Nesta parte do tutorial, iremos seguir os passos da criação de uma homepage hipotética sobre dinosauros (se quiser, escolha outro tema e faça a sua própria página). Dela constarão os principais elementos e recursos do HTML, de forma que, seguindo os exemplos, você será capaz de utilizar os mesmos recursos na criação da sua homepage pessoal.
Esta parte abrange os seguintes tópicos:
O primeiro passo é a montagem da estrutura da página. No tópico anterior foi mostrada a estrutura hierárquica de uma página HTML típica. Para não precisar digitar os mesmos elementos toda vez que for criar uma nova página, crie um arquivo-base para usar como base para todos os outros documentos. Este arquivo deverá conter os elementos estruturais HTML. Por exemplo, crie um arquivo template.html
com o seguinte conteúdo:
<!DOCTYPE HTML Public "-//IETF//DTD HTML//EN" --> <HTML><HEAD> <TITLE> </TITLE> </HEAD><BODY> </BODY></HTML>
Se você está usando um editor HTML, pode ser que ele já faça isto por você. Salve este arquivo como somente-leitura e faça uma cópia dele sempre que for criar um novo documento HTML.
[Volta para o início desta página]
É necessário especificar um título para o documento. Este título não aparecerá na página, mas em outra área fora da área de visualização do documento (geralmente na barra de título do browser). É importante escolher um título que tenha algum significado quando aparecer isolado em uma lista de bookmarks. Escreva então o título entre <TITLE>
e </TITLE>
. Neste exemplo, como nossa página é sobre dinossauros, utilizaremos o seguinte título:
<TITLE>Página dos Dinossauros</TITLE>
O título que adicionamos acima não aparece na página, pois não está definido dentro do bloco <BODY>
. Para criarmos um título na área de visualização, utilizamos o elemento <H1> ... </H1>
. Para o nosso exemplo:
<H1>Dinosaurs´ Web</H1>
Veja o resultado no browser (para voltar use a opção/botão [BACK], do seu browser). Observe também onde aparece o título do documento que foi marcado com
<TITLE>
.
Todo o texto que adicionarmos na página, deve estar dentro do elemento de parágrafo, definido pelos rótulos <P>
e </P>
. Neste caso, o rótulo de fechamento é opcional e pode ser dispensado. Portanto, devemos iniciar cada novo parágrafo com <P>
. Lembre-se que a formatação do texto no editor não afeta o resultado final no visualizador. No nosso exemplo, acrescentaremos as seguintes linhas:
<p>Esta é a página dos velociraptores, tiranossauros e pterosauros. Aqui você encontra tudo sobre dinossauros... bem, hmmm... na verdade, este é só um exemplo para você aprender HTML. Se você realmente procura algo sobre dinossauros, sugiro que procure no índice do Yahoo ou faça uma busca no WebCrawler. <p>Este é mais um parágrafo da página sobre dinossauros. Dinossauros eram animais enormes que habitavam a terra há milhões de anos atrás. A grande maioria deles se alimentavam de plantas e insetos, mas havia também espécies carnívoras que se alimentavam dos outros.<p>Este terceiro parágrafo, embora não aparente ser outro parágrafo no editor de texto, aparece no visualizador como tal.
Veja o resultado. Observe, que apesar de haver apenas dois parágrafos acima, no browser aparece um terceiro.
Quando é necessário quebrar uma linha dentro de um parágrafo, deve-se usar <BR>
. Este elemento não possui rótulo de fechamento e apenas marca a posição onde deve ser quebrada uma linha. As três linhas do exemplo abaixo são quebradas em quatro linhas no mesmo parágrafo:
<p>Eu gostaria que este parágrafo tivesse quatro linhas.<br> Esta seria a segunda linha<br> e esta a terceira e <br>esta a quarta.
O resultado mostra que as linhas forma quebradas no ponto onde colocamos
<BR>
, e não onde elas quebram no editor de textos.
O elemento <HR>
define uma linha horizontal. A maioria dos browsers gráficos apresentam-na como uma linha sombreada que atravessa toda a largura da tela. No nosso exemplo, utilizaremos <HR>
para separar o título do corpo do texto e algumas seções que criaremos para o nosso documento.
Aproveitamos também para utilizar mais dois níveis de cabeçalho (<H2>
e <H3>
), para destacar subseções em níveis hierárquicos decrescentes. Acrescentamos então, uma linha horizontal após o título:
<h1>Dinosaurs´ Web</h1> <hr>
e mais quatro linhas, separando três subseções do documento:
<hr> <h2>Períodos da Era Mesozóica</h2> <hr> <h2>Lista de Dinossauros</h2> <h3>Tabela de Dinossauros</h3> <h3>Imagens de Dinossauros</h3> <hr> <h2>Outras Fontes de Informação</h2> <hr>
[Volta para o início desta página]
O elemento <BLOCKQUOTE>
é utilizado para destacar um bloco de texto. Em alguns browsers ele aparece em itálico, em um parágrafo separado do texto; em outros, como o Netscape, ele aparece endentado. No nosso exemplo, acrescentaremos uma citação no início da página, marcada com <BLOCKQUOTE>
, da forma abaixo:
<blockquote> "Os répteis são criaturas repugnantes por causa de seu corpo frio, coloração pálida, pele asquerosa, cheiro incômodo, esconderijos miseráveis e veneno terrível; seu Criador, portanto, não exerceu o poder de criar muitos deles." (Linnaeus, 1797)</blockquote>
Veja o resultado da marcação acima.
Outro bloco de texto que pode ser definido é um bloco de endereço. <ADDRESS>
... </ADDRESS>
marcam o início e o fim de tal bloco, que pode ser usado para identificar a autoria do documento, conter endereços para contato, e-mail e outras informações sobre o documento. <ADDRESS>
geralmente é utilizado no final da página. No exemplo, acrescentamos o seguinte bloco de texto no final do documento:
<hr> <address> Para mais informações entre em contato com dino@raptor.ingen.com.<br> Criado em 31 de fevereiro de 75.340.522 A.C. (Cretáceo) </address>
Veja como o seu browser formata o elemento
ADDRESS
(no final da página).
Outro elemento útil para formatação de blocos de texto é o <PRE>
. Todo o texto rotulado com <PRE>
preserva os espaços, tabulações novas-linhas e retornos e é formatado na tela com uma fonte fixa, geralmente Courier. É extremamente útil para reproduzir planilhas, listagens de computador e outros dados que não suportam fontes proporcionais. No nosso exemplo, decidimos refazer a citação usando <PRE>
, e fizemos previamente a sua formatação com tabulações, espaços e novas-linhas:
<pre> "Os répteis são criaturas repugnantes por causa de seu corpo frio, coloração pálida, pele asquerosa, cheiro incômodo, esconderijos miseráveis e veneno terrível; seu Criador, portanto, não exerceu o poder de criar muitos deles" (Linnaeus, 1797)</pre>
Verifique e compare a formatação do bloco de texto acima com o resultado.
Além dos três elementos de formatação de blocos acima, existe um elemento suportado pelo Netscape (que não faz parte da especificação HTML) e alguns outros browsers que permite que se defina um bloco alinhado em relação ao centro da página. Veja <CENTER>
.
[Volta para o início desta página]
O HTML define várias formas de apresentar listas em um documento. Toda lista possui um rótulo inicial e final e só pode conter rótulos <LI>
, que por sua vez podem conter texto, parágrafos ou outras listas. Isto é mais facilmente explicado através de exemplos, que veremos a seguir.
As listas não-ordenadas são marcadas pelos rótulos <UL>
e </UL>
. Cada ítem é contido dentro de <LI>
, que não necessita de rótulo de fechamento (qualquer novo <LI>
ou o rótulo </UL>
automaticamente fecham o item <LI>
). No nosso exemplo, utilizaremos o rótulo </UL>
para fazer um pequeno sumário dos ítens constantes da nossa página:
<hr> <h2>Sumário</h2> <ul> <li>Períodos da Era Mesozóica <li>Lista de Dinossauros <ul> <li>Tabela <li>Imagens </ul> <li>Endereço para contato </ul>
Observe que, dentro do segundo item da lista acima, além do texto "Lista de dinossauros"
, há uma outra lista de nível hierárquico inferior, com mais dois itens. O browser formatará a sub-lista de uma forma diferente (geralmente endentada e com um marcador diferente).
As listas ordenadas são marcadas pelos rótulos <OL>
e </OL>
. Da mesma forma que nas listas não-ordenadas, cada ítem é contido dentro de <LI>
, cujo fechamento é determinado pela próxima ocorrência de <LI>
ou pelo rótulo de fechamento </OL>
. No exemplo, usamos <OL>
para relacionar os três períodos da Era Mesozoica:
<ol> <li>Triássico: de 250 a 208 milhões de anos atrás. <li>Jurássico: de 208 a 144 milhões de anos atrás <li>Cretáceo: de 144 a 66 milhões de anos atrás </ol>
Confira o resultado e compare com as listagens acima. As extensões do Netscape permitem usar numeração romana e letras nas listas ordenadas, e marcadores diferentes, nas listas não-ordenadas. Veja também as listas de definições (
<DL>
).
[Volta para o início desta página]
Podemos destacar texto em um parágrafo usando elementos de formatação de caracteres. O HTML pode marcar o texto visando uma formatação física (ex: negrito, itálico, sublinhado, riscado, etc.) ou visando uma formatação lógica (ex: grifado, fortemente destacado, variável, citação, etc.). A diferença básica é que a formatação lógica diz o que o texto é, enquanto que a formatação física diz como ele deve ser impresso. Os resultados podem ser os mesmos. No exemplo abaixo, somente utilizaremos os elementos de formatação física <B>
e <I>
, que marcam o texto como negrito e itálico, respectivamente.
Vamos grifar (com itálico)o autor da citação e os nomes dos dinossauros no primeiro pagrágrafo:
... (<i>Linnaeus, 1797</i>)</pre> ... a página dos <i>velociraptores</i>, <i>tiranossauros</i> e <i>pterossauros</i>. Aqui você ...
e destacar (com negrito) o endereço e-mail para contato, o nome dos períodos históricos na segunda lista e dois trechos do segundo parágrafo.
... no índice do <b>Yahoo</b> ou faça uma busca no <b>WebCrawler</b>. <ol> <li><b>Triássico:</b> de 250 a 208 milhões de anos atrás. <li><b>Jurássico:</b> de 208 a 144 milhões de anos atrás <li><b>Cretáceo:</b> de 144 a 66 milhões de anos atrás </ol> ... entre em contato com <b>dino@raptor.ingen.com</b>.<br>
Pode-se combinar destaques diferentes para um mesmo trecho, por exemplo, negrito-itálico ou courier-itálico-negrito. Deve-se observar, entretanto, se os rótulos estão sendo abertos e fechados na ordem correta. Por exemplo, a seguinte marcação está incorreta:
<B>
<STRIKE>
texto</B>
</STRIKE>
As formas corretas seriam:
<B>
<STRIKE>
texto</STRIKE>
</B>
ou
<STRIKE>
<B>
texto</B>
</STRIKE>
Confira o resultado.Experimente também outros elementos físicos como
<TT>
, <U>
e <STRIKE>
e elementos lógicos, <CODE>
, <SUB>
, <SUP>
, etc. O Netscape permite também que você rotule um com o elemento lógico <BLINK>
.
[Volta para o início desta página]
O recurso de tabelas não faz parte da especificação HTML 2.0, mas já é largamente suportada por muitos browsers. É um recurso muito poderoso com o qual, com criatividade, pode-se controlar vários aspectos da formatação de uma página, como uso de margens, uso de duas colunas, etc. No nosso exemplo, faremos uma tabela simples apenas para ilustrar os elementos que a compõem. Veja mais sobre tabelas com vários exemplos e aplicações no Guia de Referência.
Os rótulos <TABLE> .. </TABLE>
marcam o início e final de uma tabela. <TABLE>
só pode conter dois rótulos: <TR>
(Table Row), que marca uma linha de tabela; e <CAPTION>
, que marca a legenda da tabela. Cada linha pode conter uma ou mais células de dados, marcadas como <TD>
(Table Data) e <TH>
(Table Header). Todas as linhas devem ter o mesmo número de células de dados (a não ser que se usem atributos). O exemplo abaixo mostra a listagem HTML de uma tabela simples:
<p><table border> <tr> <td> 1,1 </td> <td> 1,2 </td> <td> 1,3 </td> </tr> <tr> <td> 2,1 </td> <td> 2,2 </td> <td> 2,3 </td> </tr> <tr> <td> 3,1 </td> <td> 3,2 </td> <td> 3,3 </td> </tr> </table>
que resulta na seguinte formatação:
1,1 | 1,2 | 1,3 |
2,1 | 2,2 | 2,3 |
3,1 | 3,2 | 3,3 |
Se o atributo BORDER
do rótulo <TABLE>
for omitido, a tabela não terá bordas.
Para o nosso exemplo, faremos outra tabela simples de três linhas e três colunas. As células da primeira linha serão marcadas com <TH>
, para que recebam formatação de cabeçalho. Também incluímos uma legenda:
<table border> <tr> <th>Dinossauro</th> <th>Nome científico</th> <th>Período</th> </tr> <tr> <td>Tiranossauro</td> <td>Tyranossaurus Rex</td> <td>Cretáceo</td> </tr> <tr> <td>Velociraptor</td> <td>não sei</td> <td>Cretáceo</td> </tr> <caption>Tabela 1</caption> </table>
Assim como com as listas, os rótulos de fechamento </TR>
, </TD>
e </TH>
podem ser omitidos. (<TR>
é fechado pela próxima ocorrência de <TR>
ou por </TABLE>
; <TD>
e <TH>
são fechados pela próxima ocorrência de <TD>
, <TH>
, <TR>
ou </TABLE>
)
Veja como foi formatada a tabela listada acima. Observe que, por default, os dados de
<TH>
são alinhados pelo centro, enquanto que os dados de <TD>
são alinhados com a margem esquerda.
Na próxima seção, adicionaremos ligações (links) e imagens à nossa homepage.
[Volta para o início desta página]