Lição 6: Mais tags HTML

E aí? Você construiu algumas páginas como sugerimos na lição anterior? Não? Sim? Bem, a seguir um exemplo:

<html>

<head>
<title>Meu website</title>
</head>

<body>
<h1>Um cabeçalho</h1>

texto, texto texto, texto
<h2>Subtítulo</h2>
texto, texto texto, texto
</body>

</html>

E agora?

Agora vamos aprender mais sete tags.

Você
já sabe que pode obter negrito com a tag , agora saiba que
pode obter itálico - letras inclinadas - com a tag . Já
percebeu não é?, "i" vem de "italic".

Exemplo 1:

Este texto deve ser itálico.

Será renderizado no navegador assim:
Este texto deve ser itálico.

De modo similar você pode fazer seu texto com letra menores usando a tag :

Exemplo 2:

Este texto deve ser com letras em tamanho small.

Será renderizado no navegador assim:
Este texto deve ser com letras em tamanho small.
Posso usar várias tags simultaneamente?

Sim você pode usar quantas tags queira desde de que as aninhe convenientemente. Veja como fazer isto no exemplo abaixo:

Exemplo 3:

Para escrever um texto em negrito e itálico faça como mostrado a seguir:

Texto em negrito e itálico.

E não assim:

Texto em negrito e itálico.

Observe
que no primeiro exemplo a primeira tag de abertura 
corresponde a última tag de fechamento , e o aninhamento está
certo. Isto evita confusão para quem escreve o código e para o navegador
que lê o código.
Mais tags!

Como foi dito na Lição 4 existem
tags que são abertas e fechadas em única tag. Estas tags são comandos
isolados, ou seja, não contém nenhum texto dentro delas para poder
funcionar. Um exemplo é a tag
que serve para criar uma quebra de linha:

Exemplo 4:

Um texto
e mais texto em nova linha

Será renderizado no navegador assim:
Um texto
e mais texto em nova linha

Notar que a tag é escrita como se fosse uma mistura de tag de abertura e de fechamento com uma barra "/" no final:
. A princípio podemos escrever também (sem conteúdo), mas para que complicar?

Outra
tag de comando é <hr /> que serve para definir uma linha
horizontal ("hr" vem "horizontal rule" - régua horizontal ):

Exemplo 5:

<hr />

Será renderizado no navegador assim:

Exemplo 6:

<ul>
<li>Um item de lista</li>
<li>Outro item de lista</li>

</ul>

Será renderizado no navegador assim:
Um item de lista
Outro item de lista

Exemplo 7:

<ol>
<li>Primeiro item da lista</li>
<li>Segundo item da lista</li>

</ol>

Será renderizado no navegador assim:
Primeiro item da lista
Segundo item da lista
Uau! Isto é tudo?

Sim,
por enquanto isto é tudo. Aconselhamos, novamente, a fazer seus
próprios experimentos, construindo algumas páginas usando as sete tags
ensinadas nesta lição:

Itálico
Texto tamanho small

Pula linha
<hr /> Linha Horizontal
<blockquote>Indentação</blockquote>
<ul>Lista</ul>
<ol>Lista ordenada</ol>

<li>Item de lista</li>