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>&amp;nbsp;</p>

• Exemplo de três parágrafos, o segundo sem texto:

<p>paragrafo 1 com texto</p>

<p>&amp;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="ht­tp://www.kerodicas.com">Texto da Hiperligação</a>

• Resultado:

Texto da Hiperligação

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

• W3Schools
• Html Dog
• Html.net

Perguntas?

Próximo Tutorial de HTML

Índice do Tutorial