INÍCIO

LITERATURA

ACTUALIDADE

EDUCAÇÃO

INFORMÁTICA

ARQUIVO

MEMÓRIA

MAPA

Guia HTML

DOCUMENTOS HTML
EDITORES HTML
ALOJAMENTO E PUBLICAÇÃO
ESTRUTURA BÁSICA
FORMATAR TEXTO
EFEITOS ESPECIAIS
TABELAS
FRAMES
IMAGENS

DOCUMENTOS HTML

A sigla HTML deriva da expressão inglesa "HyperText Markup Language". Trata-se de uma linguagem descritiva, isto é, um conjunto de instruções (tags ou etiquetas) que "diz" aos browsers como tratar os elementos que constituem o documento. De facto, um ficheiro HTML é um simples documento de texto enquadrado por um conjunto de "etiquetas". Pode verificar isso facilmente se observar o código de qualquer página web através da função "Ver HTML" do Explorer ou "View page source" do Netscape. Isso permite que os ficheiros HTML possam ser abertos em qualquer computador, independentemente do sistema operativo que utilize, o que é fundamental quando estamos inseridos numa rede global; mas essa "universalidade" tem o seu custo: nunca podemos ter a certeza de que a nossa página será visualizada exactamente como a compusemos, visto que o browser limitar-se-á a ler as instruções e cumpri-las, utilizando os recursos disponíveis no computador cliente.

Outra particularidade muito importante desta linguagem é a possibilidade de inserir em qualquer ponto do documento "hiperligações", isto é, endereços que, uma vez activados, permitem localizar e abrir imediatamente qualquer ficheiro existente na rede. Do mesmo modo, essas hiperligações permitem saltar instantaneamente para qualquer parte do documento que estamos a consultar, o que é muito útil quando se trata de um ficheiro longo.

Os ficheiros HTML podem ser criados por qualquer editor de texto, mesmo simples, como o Notepad ou o Wordpad do Windows, gravando-os com a extensão "htm" ou "html". No entanto, tenha em conta que a formatação será reduzida ao mínimo, isto é, a maior parte dos efeitos que o processador lhe permite serão ignorados pelo formato "html". Naturalmente, para que um documento produzido desta forma possa ser aberto pelo browser, terá que introduzir manualmente as "etiquetas" adequadas, conforme explicamos adiante. Os processadores mais avançados, como o Word 97, permitem já a gravação directa de um documento de texto no formato "htm", o que lhe permite escrever uma página web sem conhecer o código HTML.

EDITORES HTML

Para os principiantes a melhor opção será recorrer a um editor HTML com interface WYSIWYG (what you see is what you get). Se tem instalado no seu computador o Internet Explorer 4 ou o Netscape Communicator 4, provavelmente já dispõe de um: o "FrontPage Express", no primeiro caso, ou o Composer, no segundo. Se os não tiver instalado, poderá fazê-lo facilmente a partir do respectivo CD-ROM ou fazendo o download na internet (pode obter o respectivo link na página Ligações).

Com qualquer desses editores instalado pode compor a sua página web sem ter que conhecer uma única linha de código, visto que você pode escrevê-la como se estivesse a utilizar um vulgar processador de texto. À medida que vai introduzindo elementos eles são exibidos no écran do computador tal como aparecerão a um eventual leitor. Para maior simplicidade, pode inclusive utilizar um dos modelos fornecidos (pelo menos no FrontPage Express).

O problema com estes editores é que são limitados. Assim que estiver mais familiarizado com a linguagem HTML sentirá necessidade de um programa mais completo. Nessa altura terá duas opções: adquirir um programa comercial, ou fazer o download de um programa freeware (há vários à disposição, mas eu recomendo o SiteAid ou o Arachnophilia). Em qualquer dos casos, convirá ter alguma noção do código HTML e do que ele faz, porque poderá querer utilizar recursos que o seu editor não lhe faculta directamente.

ALOJAMENTO E PUBLICAÇÃO

Depois de elaborar a sua página web quererá publicá-la na internet. Alguns fornecedores de acesso (ISP) disponibilizam espaço para isso aos seus assinantes (caso da IP, em Portugal); se o seu fornecedor não lhe permitir isso, poderá requisitar espaço gratuitamente em servidores do tipo Terràvista ou Geocities. Em qualquer dos casos é conveniente transferir os seus ficheiros para o servidor por FTP, para o que deverá utilizar um programa específico, como o WS FTP (freeware).

Antes de avançarmos, uma última nota: uma boa maneira de "aprender" a linguagem HTML é estudar o código utilizado para construir uma determinada página. Quando encontrar uma de aspecto aliciante, veja como o autor obteve aqueles efeitos. Pode fazê-lo facilmente seleccionando os comandos adequados no seu browser: no Explorer abra o menu "Ver" (View) e seleccione "Ver HTML"; no Netscape, no menu "View" seleccione "Page source".

ESTRUTURA BÁSICA

As páginas web estão escritas numa linguagem específica designada por HTML (Hypertext Markup Language), constituída por um conjunto de instruções que os browsers têm que interpretar para "compor" o documento que exibem no écran do computador. As instruções HTML estão contidas entre parênteses angulares "<" e ">". Cada uma dessas intruções chama-se etiqueta (tag). Geralmente há uma etiqueta inicial "< ...>", que produz um determinado efeito, e uma etiqueta final "< /...>", que o suspende.

Assim, todos os documentos HTML começam e terminam com as etiquetas

<HTML>...</HTML>

A barra oblíqua "/" indica que se trata de uma etiqueta final, que suspende determinado efeito. Tudo o que está entre um par de etiquetas é afectado. Assim tudo o que for "escrito" entre aquelas duas etiquetas é interpretado pelo browser como fazendo parte de um documento HTML, embora nem tudo seja exibido no écran.

O segundo par de etiquetas que nos interessa é

<HEAD>...</HEAD>

Dentro desse par deve ser introduzido outro para identificar o título da página; esse título não será exibido na janela do browser, mas na barra de título, juntamente com a identificação do browser:

<TITLE>...</TITLE>

A seguir ao cabeçalho, um novo par de etiquetas delimita o "texto" a exibir na janela do browser:

<BODY>...</BODY>

<HTML>
<HEAD>
<TITLE>...</TITLE>
</HEAD>
<BODY>
  ...
</BODY>
</HTML>

Se criar um documento com esta estrutura no WordPad do Windows ou outro editor de texto e o gravar com a extensão "htm" poderá abri-lo com um browser. Naturalmente o browser mostrar-lhe-á uma página em branco. Mas se escrever entre as etiquetas "title" alguma coisa o browser exibi-la-á na barra de título; do mesmo modo, tudo o que escrever entre as etiquetas "body" será mostrado na janela do browser.

Ao digitar as etiquetas tanto pode usar maiúsculas como minúsculas, visto que o browser interpretá-las-á da mesma maneira. No entanto é recomendável o uso de maiúsculas, porque permitem distinguir melhor o código HTML, do texto propriamente dito. Alguns editores permitem até atribuir cores diferenciadas às etiquetas, o que permite distinguir claramente o código do texto, quando estamos a trabalhar directamente com o ficheiro fonte.

FORMATAR TEXTO

Pode alterar o aspecto do seu texto, recorrendo a novas etiquetas. Para controlar o tamanho dos títulos e subtítulos pode utilizar as etiquetas

<Hx>...</Hx>

É conveniente reservar as etiquetas <Hx>...</Hx> para os títulos e subtítulos. Para formatar o texto do documento propriamente dito é mais prático utilizar as etiquetas

<FONT>...</FONT>

visto que elas admitem a inclusão de atributos como "size", "face" e "color". Por exemplo:
<FONT SIZE="1" FACE="ARIAL" COLOR="#FF0000">Texto</FONT>
produz o seguinte efeito:

Texto

O atributo "size" determina o tamanho e pode ir de "1" (o mais pequeno) a "7" (o maior).

O atributo "color" permite-lhe escolher a cor para o seu texto, utilizando o código hexadecimal.

Finalmente, o atributo "face" permite-lhe seleccionar a fonte que pretende utilizar. Não vale a pena perder muito tempo a escolher as fontes: como os browsers, ao abrir um documento HTML, utilizam as fontes existentes no computador onde estão instalados, é provável que o efeito gráfico que você pretendia não seja exibido. Se a fonte que você utilizou no documento não existir nesse computador, o browser substituí-la-á por outra semelhante; na prática não vale a pena ir além do "times new roman" e do "arial", ou equivalentes.

Para escrever texto em negrito deverá utilizar as etiquetas

<B>...</B>
 ou 
<STRONG>...</STRONG>

<I>...</I>
 ou 
<EM>...</EM>

<U>...</U>

<TT>

Texto em caracteres de tipo monospace

</TT>

Não se esqueça que alguns dos comandos usados universalmente nos processadores de texto não têm qualquer efeito num editor HTML. Por exemplo, o comando de "novo parágrafo" introduzido pela tecla "Enter" é neste caso de efeito nulo. Pode e deve utilizá-lo para introduzir espaços e linhas em branco no ficheiro-fonte, mas isso será ignorado pelo browser na visualização do documento. Para obter efeitos visíveis terá que usar comandos HTML específicos.

Para quebrar uma linha e passar à linha seguinte deverá utilizar a etiqueta

<BR>

Se pretender introduzir uma linha em branco entre dois parágrafos utilize a etiqueta

<P>...</P>

Geralmente os browsers dispensam a etiqueta de fecho </P>. Ao encontrarem uma etiqueta <P> interpretam-na correctamente como o início de um parágrafo e ela permanece válida até que apareça a respectiva etiqueta de encerramento </P>, ou uma nova etiqueta <P>. No entanto, como a etiqueta de parágrafo <P> pode receber vários atributos, é recomendável fechar os parágrafos com a etiqueta de encerramento </P>, para evitar possíveis efeitos indesejáveis.

Por defeito, os documentos HTML utilizam o alinhamento à esquerda. Para alterar esse comportamento terá que recorrer ao atributo "align". Se escrever

<P align="center">

o texto será centrado na janela do browser, enquanto a indicação "right" alinhará o texto à direita. A instrução "justify" é aceite sem problemas pelo Internet Explorer 4, mas frequentemente ignorada pelo browser da Nestcape.

EFEITOS ESPECIAIS

Por vezes há necessidade de introduzir numa página web texto com determinada formatação. Se não quiser correr o risco de a ver alterada, deverá recorrer a um par de etiquetas que indique ao browser que aquele pedaço de texto deve ser interpretado tal como aparece. Essas etiquetas são as seguintes:

<PRE>...</PRE>

É possível utilizar linhas horizontais para estabelecer divisões no corpo do documento. Para esse efeito deveremos utilizar a etiqueta

<HR>

Note que esta etiqueta também suporta atributos: "width" permite determinar o tamanho da linha, que por defeito é 100%; "align" pode receber os valores "left", "right" ou "center"; o atributo "size" determina a espessura do traço, sendo "1" (o mais fino). Por defeito a etiqueta produz um efeito de três dimensões, perceptível nas linhas de maior espessura, mas pode ser utilizado o atributo "noshade" para produzir um traço cheio. O Internet Explorer permite mesmo utilizar o atributo "color" nesta etiqueta.

Observe o efeito produzido pela etiqueta <HR WIDTH=50% ALIGN=left SIZE=3>

ou <HR WIDTH=50% SIZE=3 NOSHADE

ou ainda <HR WIDTH=50% ALIGN=right SIZE=3 NOSHADE COLOR="#FF0000">

Pode também definir a imagem de fundo do écran. Isso é feito manipulando os atributos da etiqueta "body". O atributo "BGCOLOR" permite-lhe escolher uma cor de fundo utilizando o código hexadecimal; por exemplo, a instrução <BODY BGCOLOR="#000000"> determinará um fundo branco, enquanto a instrução <BODY BGCOLOR="#FFFFFF"> imporá um fundo negro.

Em alternativa pode utilizar o atributo "BACKGROUND" para usar uma imagem como fundo. Nesse caso a sintaxe será a seguinte:

<BODY BACKGROUND="nome.ext">

Note que os formatos geralmente utilizados em páginas web (identificados pela extensão) são o "gif" e o "jpg". O formato "bmp" é desaconselhado, porque, como não é comprimido, envolve uma grande quantidade de dados a transmitir, pelo que o seu uso imoderado entupiria as linhas de comunicação.

No caso de optar por uma imagem de fundo, não se esqueça de que ela terá que estar disponível no sistema hospedeiro, juntamente com o ficheiro html.

TABELAS

É quase impossível compor uma página HTML, com um mínimo de qualidade, sem recorrer a tabelas. Com elas é possível dispor o texto e as imagens na página, da forma que mais nos agradar.

A estrutura da tabela pode incluir um cabeçalho, um rodapé e, obviamente, o corpo. O código HTML correspondente terá o seguinte aspecto:

<TABLE>
<THEAD>
...
<TBODY>
...
<TFOOT>
...
</TABLE>

No entanto, quando se trata apenas de dispor o texto e as imagens em determinadas zonas da página, dispensamos o cabeçalho e o rodapé e, nessa altura, a estrutura reduz-se à forma

<TABLE>
...
</TABLE>

No interior das etiquetas de "TABELA" dispõem-se as etiquetas relativas às linhas (TR=table row) e células (TD=table data>. Cada par de etiquetas <TR>...</TR> define uma linha da tabela e cada par <TD>...</TD> no seu interior define uma célula de dados. Assim, o conjunto de códigos

<TABLE>
<TR>
<TD>Célula 1</TD>
<TD>Célula 2</TD>
<TD>Célula 3</TD>
</TR>
</TABLE>

produz o seguinte efeito

Célula 1

Célula 2

Célula 3

isto é, uma tabela com uma única linha, contendo três células. Poderíamos aumentar ou reduzir o número de células por linha, do mesmo modo que poderíamos aumentar também o número de linhas. Assim, esta sequência de códigos

<TABLE>
<TR>
<TD>Célula 1</TD>
<TD>Célula 2</TD>
<TD>Célula 3</TD>
</TR>
<TR>
<TD>Célula 4</TD>
<TD>Célula 5</TD>
<TD>Célula 6</TD>
</TR>
</TABLE>

terá o seguinte efeito:

A etiqueta <TABLE> pode conter vários atributos:

Note que as tabelas, como qualquer outro objecto, por defeito são alinhadas à esquerda. No entanto, podem ser alinhadas à direita ou centradas. Do mesmo modo, os dados introduzidos em cada uma das células podem ser formatados.

FRAMES

Com as frames é possível dividir o écran em várias janelas, de forma a exibir em cada uma delas um documento independente.

A criação de frames faz-se pelo recurso às etiquetas

<FRAMESET> ... </FRAMESET>

Para dividir o écran em janelas verticais usam-se as seguintes instruções:

<FRAMESET COLS "30%.*">
<FRAME NAME="" SCR="ficheiro1.htm">
<FRAME NAME="" SCR="ficheiro2.htm">
</FRAMESET>

O atributo "COLS", a seguir a "FRAMESET" indica que o écran deverá ser dividido em duas janelas verticais; inversamente, se utilizarmos o atributo "ROWS", o écran será dividido em duas janelas horizontais. As percentagens indicadas entre aspas indicam o tamanho relativo das janelas; no exemplo apresentado, a primeira janela ocupará 30% da largura do écran, à esquerda, e, naturalmente, a segunda coluna ocupará os restantes 70%. Os dois valores devem estar separados por um ponto. Cda uma das janelas deverá possuir um nome identificador (FRAME NAME), enquanto o atributo "SCR" indica ao browser o ficheiro htm que deverá ser carregado na janela.

Quer as janelas verticais, quer as horizontais podem ser por sua vez divididas, abrindo assim espaço para várias combinações.

Observe, por exemplo, os seguintes códigos:

<FRAMESET Cols="50%,50%">
<FRAME NAME="Frame1" SRC="*.htm">
<FRAMESET Rows="30%,70%">
<FRAME NAME="Frame2" SRC="*.htm">
<FRAME NAME="Frame3" SRC="*.htm">
</FRAMESET>

A primeira linha de código divide o écran em duas janelas verticais de igual largura. A segunda linha atribui um ficheiro à frame da esquerda. A terceira linha divide a janela do lado direito em duas outras janelas horizontais, ocupando a de cima 30% da área disponível e a de baixo os restantes setenta por cento. As linhas de código seguintes (4ª e 5ª) atribuem um ficheiro a cada uma dessas janelas. Finalmente a última linha encerra a etiqueta "frameset".

IMAGENS

É possível inserir imagens nos nossos documentos. Geralmente utilizam-se imagens comprimidas para facilitar a sua transferência entre computadores. Os formatos mais utilizados são o "gif" e o "jpg". Para que o browser saiba onde as deve inserir é utizada a seguinte etiqueta:

<IMG SRC="imagem.gif">

As imagens devem ser gravadas como ficheiros independentes e devem estar alojadas na mesma pasta em que se encontra o ficheiro htm que as solicita; se as imagens estiverem numa pasta diferente é necessário indicar na etiqueta o caminho (path) para elas.

Tal como a maioria das etiquetas, esta admite vários atributos. Pode especificar-se a largura e a altura da imagem, usando os atributos "WIDTH" e "HEIGHT". Do mesmo modo é possível atribuir um limite externo de largura variável, usando o atributo "BORDER". É aconselhável acrescentar uma curta descrição da imagem, usando o atributo "ALT", para o caso de o browser não conseguir abrir a imagem. Usando todas essas possibilidades, a etiqueta assumiria a seguinte forma:

<IMG SRC="imagem.gif" BORDER=1 WIDTH=20 HEIGHT=30 ALT="Imagem">

(em construção)