ATENÇÃO: este tutorial foi publicado originalmente em 2002; algumas informações podem estar desatualizadas
Apesar dessa aparente sofisticação, as páginas Web não passam de documentos de texto simples. Podem ser produzidas com qualquer editor de texto, como o Notepad do Windows. A diferença é que as páginas Web contêm algumas marcas especiais para determinar o papel de cada elemento dentro do texto. Alguns elementos são marcados como títulos, outros como parágrafos. As marcações são usadas também para indicar os links que levam a outros documentos na rede. Essas marcas são chamadas de tags e estão especificadas dentro da linguagem utilizada para criar as páginas Web, HTML.
O mínimo que você precisa saber sobre HTML O primeiro conceito que deve-se ter em mente ao projetar páginas Web é que HTML não foi criada para controlar a aparência dos documentos, ao contrário dos processadores de texto e programas de layout de página. Como dissemos há pouco, os tags de HTML apenas informam ao navegador o que são os elementos que estão na página. Eles dizem, por exemplo, que um determinado trecho é o título principal do documento e outro é um item de lista. A formatação do trecho é deixada para o navegador. Cada navegador mostra a página de uma forma um pouco diferente, o que dificulta o trabalho de programação visual na Web. Para complicar ainda mais, cada usuário pode modificar a configuração padrão de seu navegador para que o seu programa mostre o texto na fonte (tipo de caractere) que quiser.
Em compensação é muito simples criar uma página básica para colocar na Internet com HTML. Neste capítulo, apresentamos um exemplo enxuto, que aos poucos ficará mais sofisticado.
Software necessário para esta seção Como a página Web é um documento de texto comum, pode-se utilizar um editor de texto simples, como o Notepad do Windows. Existem editores de HTML que podem facilitar a confecção das páginas.
É importante notar que os exemplos descritos aqui devem ser gravados no formato texto e com a extensão .htm ou .html. Portanto, se for utilizado um processador de texto, como o Word, WordPerfect ou WordStar, o arquivo deve ser salvo no formato "somente texto". O navegador de Web não vai entender um arquivo gravado nos formatos específicos dos processadores de texto (.doc, por exemplo).
Será necessário também um programa de desenho para criar as imagens, como o Paintbrush do Windows ou um mais sofisticado, como o Photoshop. Também é preciso cuidado na hora de gravar as imagens. O formato mais aceito pelos navegadores é o GIF. O Paintbrush do Windows grava arquivos apenas nos formatos BMP ou PCX. Será necessário um outro programa para fazer a conversão, como o Lview. Veja a lista dos programas recomendados para edição em HTML no capítulo Programas. Além disso, será necessário um navegador de Web para visualizar as páginas. Os exemplos deste livro foram testados nos seguintes navegadores:
Netscape Navigator 2.0 (
http://home.netscape.com/comprod/mirror/ client_download.html)
Microsoft Internet Explorer 2.0 (
http://www.microsoft.com/ie/download/default.htm)
NCSA Mosaic 2.0.0 (
http://www.ncsa.uiuc.edu /SDG/Software/Mosaic/)
Acentuação Não é recomendável que os documentos Web contenham acentos. Ainda que todos os navegadores existentes entendam a presença de um caractere acentuado, existem ocasiões em que o texto em HTML pode ficar truncado. Por exemplo, quando alguém copia uma página Web e a envia para outra pessoa através de correio eletrônico. Para contornar este problema, existe uma tabela de códigos que substituem os acentos. Os navegadores transformam estes códigos em caracteres acentuados e o documento poderá ser transmitido por qualquer meio. Sugestão: o documento pode ser escrito com os acentos e, antes de ir para o servidor de Web, ser submetido a uma macro de processador de texto para substituí-los pelos códigos HTML. O Apêndice A mostra a tabela de acentos ISO 8859 Latin-1. Para facilitar a leitura, os exemplos deste livro contêm os acentos normais de um editor de texto ao invés dos códigos.
Primeiro Exemplo A melhor maneira de aprender a escrever páginas de Web é fazendo. Vamos ao primeiro exemplo:
<HTML>
<HEAD>
<TITLE>Primeiro
exemplo</TITLE>
</HEAD>
<BODY>
<H1>Título
principal</H1>
Este é o texto do primeiro exemplo.
Para dividir os parágrafos, usa-se o tag <P>.<P>
Este é o segundo parágrafo. Para colocar um novo título depois de um parágrafo não é necessário colocar o tag <P>.
<H2>Título
secundário</H2>
Para abrir uma linha, usa-se o tag <br>,<br>
certo?
<H3>Uma
lista</H3>
<UL>
<LI>Item
1
<LI>Item
2
<LI>Item
3
</UL>
</BODY>
</HTML>
Observação: a representação dos tags
<P> e
<BR> foi escrita na forma de código (<P> e <BR>, respectivamente). Do contrário, essa representação não seria mostrada na página, mas interpretada com os efeitos reais de cada um dos tags.
Visualizando o exemplo no navegador Assim que o exemplo for salvo no editor de texto com a extensão .htm ou .html, pode-se visualizá-lo em um navegador. Para abrir o arquivo, deve-se escolher Open, Open File ou Open Local File no menu File do navegador. Alguns navegadores tem um botão Open na barra de botões.
 |
| Exemplo 1: uma página simples |
Como funcionam os tags O primeiro exemplo mostra vários trechos de texto marcados por códigos colocados entre os caracteres
< e
>. Esses códigos, chamados de tags, são responsáveis pela marcação do texto em função de seu papel dentro do documento. O título principal é marcado com os tags
<H1> e
</H1>, enquanto os parágrafos são separados pelo tag
<P>. Existem dois tipos de tags. Alguns são formados aos pares, indicando o início e o fim do trecho afetado, como o par
<H1> e
</H1>. Outros podem ser colocados inidividualmente, como o
<P>, que simplesmente insere um espaço para dividir parágrafos. Mais adiante, mostraremos que os tags também podem receber atributos.
Tags básicos Existem quatro pares de tags que devem ser sempre colocados na página. O par de tags
<HTML> e
</HTML> deve englobar todo o conteúdo da página (estar presente no início e no fim do texto) para indicar ao navegador que se trata de um documento HTML. O documento, por sua vez, está dividido em duas partes: o cabeçalho e o corpo do texto, cada um indicado por um par de tags diferente. Tudo que estiver entre o par e irá compor o cabeçalho, não aparecendo na página. O elemento principal do cabeçalho é o título do documento, que deve ser colocado entre o par
<HEAD> e
</HEAD>. Os navegadores mostram o título na barra de título do programa e na área em aparecem as páginas já visitadas. Por fim, existe o par
<TITLE> e
</TITLE>, que serve para indicar o corpo do texto, ou seja, a parte mostrada na janela do navegador.
Títulos No corpo do texto podem ser colocados até seis níveis de títulos. A hierarquia começa em
<H1>, como o maior título, e termina em
<H6>, como o menor. Os títulos
<H5> e
<H6> aparecem tão pequenos no navegador que provavelmente nunca serão usados.
Parágrafos Os parágrafos são digitados normalmente. O tag
<P> serve para indicar o início de um novo parágrafo. Se o tag
<P> for colocado antes de um título (
<H2>, por exemplo), a marca de parágrafo é ignorada. Nesse caso, o próprio título se encarrega de colocar o espaço necessário.
Linhas Assim como as marcas de parágrafo, as quebras de linha são indicadas por um tag simples. Para abrir uma nova linha, usa-se o tag
<BR>.
Listas O início de uma lista pode ser indicado com
<UL> e o final com
</UL>. Esse tag descreve listas não-ordenadas (unordered lists, em inglês) e simplesmente coloca um elemento gráfico (um círculo, um quadrado etc.) no começo de cada item da lista. Existem outros tipos de listas. A relação completa pode ser encontrada no Apêndice B. O início de cada item é indicado com o tag
<LI>.
Índice
Continuação: Melhorando a aparência 
IMPRIMIR
ENVIAR POR EMAIL
COMUNICAR ERRO
