Após os primeiros dois artigos introdutórios ao html, vamos dar os primeiros passos na criação de conteúdo web… E desta vez com suporte multimédia!
PS: A qualidade do som e da imagem é razoável e esta ultima tem melhor visualização em ecrã completo…
Principais Tags
Apesar de ir falar no próximo artigo sobre as tags aqui ficam para vocês “brincarem”…
Tag h1, h2, h3, h4, h5 e h6
Cabeçalhos e títulos no documento em diversos tamanhos. Quanto menor for o número, maior será o tamanho da letra.
- Exemplo:
<h1>texto com h1</h1> <h2>texto com h2</h2> <h3>texto com h3</h3> <h4>texto com h4</h4> <h5>texto com h5</h5> <h6>texto com h6</h6>
- Resultado:
texto com h1
texto com h2
texto com h3
texto com h4
texto com h5
texto com h6
Tag <p>
Parágrafo. Tem várias aplicações.
- Exemplo de um paragrafo com texto:
<p>paragrafo com texto</p>
- Exemplo de um paragrafo sem texto:
<p>&nbsp;</p>
- Exemplo de três parágrafos, o segundo sem texto:
<p>paragrafo 1 com texto</p> <p>&nbsp;</p> <p>paragrafo 2 com texto</p>
- Resultado com dois parágrafos:
paragrafo 1 com texto
paragrafo 2 com texto
- Resultado com três parágrafos, o segundo sem texto:
paragrafo 1 com texto
paragrafo 2 com texto
Tag <br />
Efectua a mesma coisa que um parágrafo sem texto.
Tag <b>, <i>, <u> e <s>
A tag <b> é a tag que faz o negrito nos textos, o <i> o itálico, o <u> o sublinhado e o <s> o riscado.
Nota: As tags u e s são antigas e veremos nos próximos tutoriais qual é a maneira mais correcta de fazer estas tags.
- Exemplo:
<b>texto negrito</b> <i>texto itálico</i> <u>texto sublinhado</u> <s>texto riscado</s>
- Resultado:
texto negrito
texto itálico
texto sublinhado
texto riscado
Tag <a>
A tag <a> é a responsável pelas hiperligações ou também conhecidas como links.
- Exemplo:
<a href="http://www.kerodicas.com">Texto da Hiperligação</a>
- Resultado:
Tag <img>
A tag <img> é responsável pelas imagens.
O src é onde está localizada a imagem. No próximo tutorial iremos desenvolver esta tag mas imaginemos que queremos por o logo do kerodicas. Vamos buscar a direcção onde está localizada a imagem que é http://www.kerodicas.com/wp-content/uploads/logo.png e pomos no src.
- Exemplo:
<img src="http://www.kerodicas.com/wp-content/uploads/logo.png"/>
- Resultado:
Tag <center>
A tag <center> é responsável por centrar o texto.
Nota: Não é muito recomendada mas até ao próximo tutorial teremos de nos contentar com ela.
- Exemplo:
<center>texto que quero alinhar ao centro</center>
- Resultado:
texto que quero alinhar ao centro
Nota: Algumas destas tags serão desenvolvidas no próximo tutorial.
Qual a diferença entre htm e html?
Alguns sites apresentam os nomes das páginas com a extensão .htm, enquanto que em outros a extensão usada é o .html.Afinal, qual a diferença entre a extensão html e htm?
A extensão .htm é característica do MS-DOS depois Windows. Para quem nunca trabalhou com DOS não deve saber, mas ele não aceitava mais que três caracteres na extensão de qualquer arquivo, daí vem a origem das extensões com três letras, por exemplo: .doc, .exe, .txt, etc.
A extensão .html é característica do UNIX que suportava mais de três caracteres Para evitar problemas, foi feita a junção e, para efeitos de compatibilidade, foram mantidas as duas extensões. Diante disso é correto afirmar que não há diferença entre htm e html, ou seja, o conteúdo das páginas são os mesmos.
Sites
Perguntas?
Próximo Tutorial de HTML
Este artigo foi escrito por André Santos em 26 Out, 2010, e está arquivado em Html, Tutoriais. Siga quaisquer respostas a este artigo através do RSS 2.0. Você pode deixar uma resposta ou fazer um trackback do seu próprio site.
Todo e qualquer texto publicado (posts e/ou comentários) na Internet através deste sistema não reflecte, necessariamente, a opinião deste blog ou do(s) seu(s) autor(es). Os utilizadores que optarem por escrever um comentário no campo apropriado para tal comprometem-se, por sua vez, a não transmitir ou divulgar ameaças, pornografia infantil, material racista, textos que sejam ofensivos, difamatórios, caluniosos, preconceituosos ou viole a legislação em vigor no país. +Informações na página de Termos & Condições de Utilização.
Muito bom, para quem quer começar.
Parabéns André!
Excelente video, e iniciativa.
Vai ajudar de certeza muita gente, principalmente para o iniciantes nesta área.
Obrigado e força
Very Very Nice!!
Boa André.
Vou explorando e ficar a espera do próximo artigo claro
Cumps
Show de o seu Blog e seus post!
Parabéns!
Obrigado. Fico à espera do próximo artigo
Bom trabalho!
Posto assim até parece fácil. Boa jogada esta do vídeo, pois facilita bastante!
Parabéns fiquei surpreendido pela qualidade
excelente ideia, excelente qualidade, continua
Estou adorando o “Tutoria sobre HTML”. é de simples entendimento e linguagem bastante acessivel.
Estou pensando seriamente fazer este curso via Tutorial.