[<-- Anterior] [Volta para Sumário] [Proximo -->]

CRIANDO UMA HOME PAGE

----------------------------------------

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:


Estrutura Básica

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]


Títulos, Parágrafos e Separadores

Título do documento

É 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>


Títulos e subtítulos de seção

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>.


Parágrafos

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.


Quebras de linha

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.


Separadores

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>
Veja o resultado. Observe que as linhas automaticamente introduzem uma quebra de linha ao separar os blocos de texto. É possível controlar a largura, espessura, posição e sombra da linha utilizando atributos propostos pelo Netscape.

[Volta para o início desta página]


Formatação de Blocos

Endentação

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.


Endereço

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).


Pré-formatado

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]


Listas

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.


Não-ordenadas

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).

Veja o resultado.


Ordenadas

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]


Formatação de Caracteres

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 texto piscante com o elemento lógico <BLINK>.

[Volta para o início desta página]


Tabelas

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]


[<-- Anterior] [Volta para Sumário] [Proximo -->]