|
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.
[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> </B></STRIKE>
As formas corretas seriam:
<B><STRIKE> </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]
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.
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]
[Voltar para o Sumário]
| 
