Mais Tags HTML
Autor: Web Fácil | Publicado: 2012-05-27T16:08:00-07:00

E aí? Você construiu algumas páginas como sugerimos na lição anterior? Não? Sim?



Bem, a seguir um exemplo:

 &lt;html&gt;
 
   &lt;head&gt;
   &lt;title&gt;Meu website&lt;/title&gt;
   &lt;/head&gt;
 
   &lt;body&gt;
   &lt;h1&gt;Um cabeçalho&lt;/h1&gt;
 
   &lt;p&gt;texto, texto texto, texto&lt;/p&gt;
   &lt;h2&gt;Subtítulo&lt;/h2&gt;
   &lt;p&gt;texto, texto texto, texto&lt;/p&gt;
   &lt;/body&gt;
 
   
 &lt;/html&gt;
 
 
E agora?
Agora vamos aprender mais sete tags.
Você já sabe que pode obter negrito com a tag&nbsp;&lt;b&gt;, agora saiba que pode obter itálico - letras inclinadas - com a tag&nbsp;&lt;i&gt;. Já percebeu não é?, "i" vem de "italic".
Exemplo 1:&lt;i&gt;Este texto deve ser itálico.&lt;/i&gt;

Deverá ser apresentado no navegador assim:Este texto deve ser itálico

De modo similar você pode fazer seu texto com letra menores usando a tag&nbsp;&lt;small&gt;:Exemplo 2:
 
 &lt;small&gt;Este texto deve ser com letras em tamanho small.&lt;/small&gt;
 
 
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&nbsp;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:
 &lt;b&gt;&lt;i&gt;Texto em negrito e itálico.&lt;/i&gt;&lt;/b&gt;
 
 
 
E não assim:
 &lt;b&gt;&lt;i&gt;Texto em negrito e itálico.&lt;/b&gt;&lt;/i&gt;
 
 
 
Observe que no primeiro exemplo a primeira tag de abertura&nbsp;&lt;b&gt;&nbsp;corresponde a última tag de fechamento&nbsp;&lt;/b&gt;, 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&nbsp;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&nbsp;&lt;br /&gt;&nbsp;que serve para criar uma quebra de linha:
Exemplo 4:
 Um texto&lt;br /&gt; e mais texto em nova linha
 
Será renderizado no navegador assim:Um texto
e mais texto em nova linhaNotar que a tag é escrita como se fosse uma mistura de tag de abertura e de fechamento com uma barra "/" no final:&nbsp;&lt;br /&gt;. A princípio podemos escrever também&nbsp;&lt;br&gt;&lt;/br&gt;&nbsp;(sem conteúdo), mas para que complicar?Outra tag de comando é&nbsp;&lt;hr /&gt;&nbsp;que serve para definir uma linha horizontal ("hr" vem "horizontal rule" - régua horizontal ):
Exemplo 5:
 &lt;hr /&gt;
 
 
Será renderizado no navegador assim:
Exemplo 6:
 &lt;ul&gt;
   &lt;li&gt;Um item de lista&lt;/li&gt;
   &lt;li&gt;Outro item de lista&lt;/li&gt;
 
 &lt;/ul&gt;
 
 
Será renderizado no navegador assim:Um item de lista
Outro item de lista

Exemplo 7:
 &lt;ol&gt;
   &lt;li&gt;Primeiro item da lista&lt;/li&gt;
   &lt;li&gt;Segundo item da lista&lt;/li&gt;
 
 &lt;/ol&gt;
 
 
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:
 &lt;i&gt;Itálico&lt;/i&gt;
 &lt;small&gt;Texto tamanho small&lt;/small&gt;
 
 &lt;br /&gt; Pula linha
 &lt;hr /&gt; Linha Horizontal
 &lt;blockquote&gt;Indentação&lt;/blockquote&gt;
 &lt;ul&gt;Lista&lt;/ul&gt;
 &lt;ol&gt;Lista ordenada&lt;/ol&gt;
 
 &lt;li&gt;Item de lista&lt;/li&gt;
 
 


Tutorial Anterior: O que você aprendeu


Tutorial Seguinte: Lista de códigos de 216 cores