Curso Relâmpago

de HTML/XHTML

versão 1.0, Janeiro 2007

por António Manuel Dias
ammdias@gmail.com

Copyright © 2004 - 2006 António Manuel Dias

Este documento pode ser copiado e distribuído segundo a licença Creative Commons Atribuição –
Partilha nos Termos da Mesma Licença 2.5. Esta licença permite que o documento seja copiado,
distribuído e lido sob as seguintes condições:

● Atribuição. O utilizador deve dar crédito ao autor original, da forma especificada pelo autor
ou licenciante.

● Partilha nos termos da mesma Licença. Se alterar, transformar, ou criar outra obra com
base nesta, só poderá distribuir a obra resultante através de uma licença idêntica a esta.
Para cada reutilização ou distribuição, deverá deixar claro para outros os termos da licença desta obra.
Qualquer uma destas condições podem ser renunciadas, desde que obtenha permissão por parte do au-
tor. Qualquer direito de uso legítimo (ou "fair use") concedido por lei, ou qualquer outro direito prote-
gido pela legislação local, não são em hipótese alguma afectados pelo disposto acima. Para mais infor-
mações, pode consultar o texto jurídico, na íntegra, no endereço web:
http://creativecommons.org/licenses/by-sa/2.5/pt/legalcode

Conteúdo
1 Introdução .....................................................................................
......................... 2
2 Primeiros passos .................................................................................................... 3
3 Listas ......................................................................................................................
.8
4 Tabelas .........................................................................................................
......... 13
5 Hiperligações .........................................................................
.............................. 15
6 Estrutura de um documento HTML ..................................................................... 17
7 Imagens e outros efeitos ...........................................................................
........... 18
7.1 Imagens ......................................................................................................
... 18
7.2 Caracteres especiais ...................................................................................
.. 20

1
 7.3 Efeitos ......................................................................................
..................... 22
8 Conclusão .....................................................................................
........................ 24

1 Introdução

HTML é uma linguagem de marcação de texto, tendo como utilidade não só a alte-
ração do seu aspecto (formatação) e inclusão de imagens, animações, etc. como, e
principalmente, a possibilidade da inclusão de hiper-texto — referências para ou-
tras partes do mesmo documento e para outros documentos. É esta possibilidade
que lhe dá o nome, Hyper-Text Markup Language e que a tornou tão útil, possibili-
tando a criação da World-Wide Web, a face mais visível da Internet. A grande mai-
oria dos sítios na Internet que visitas com o teu navegador web são escritos numa
versão desta linguagem ou numa das suas derivadas.

Actualmente, a versão de HTML mais usada é a 4.01, que é também a última, no

sentido de que não haverá mais nenhuma, estando já em grande ascensão de popu-
laridade a sua substituta, XHTML, que é baseada na primeira e, na sua versão ini-
cial, totalmente compatível. Uma vez que são compatíveis, ou seja, XHTML é
HTML válido, e que esta está gradualmente a ser substituída em todo o lado por
XHTML, todos os exemplos que utilizarei estarão apenas escritos nesta última.

Antes de iniciar o curso, vamos listar aquilo que necessitas para o completar e des-
crever as convenções que utilizarei ao longo das páginas que se seguem.

Como a maior parte das linguagens, HTML é texto puro — aquele que consegues
ao utilizar um editor como o Bloco de Notas do Windows. Necessitas, portanto, de
um editor de texto para criares documentos (páginas) HTML; o Bloco de Notas ou
outro editor do género, como o KEdit, para aqueles que usam o ambiente KDE de
sistemas Unix, serão suficientes. No entanto, podes também usar editores mais
sofisticados, com realce de sintaxe — a separação visual, geralmente por intermé-
dio de cores diferentes, entre os elementos de formatação da linguagem e o texto
(ou conteúdo) propriamente dito. Bons exemplos deste tipo de editores são o
tsWebEditor1, para Windows, ou o Kate2, para KDE. Até o célebre Vim3, editor de
consola presente na maior parte das distribuições de GNU/Linux, tem um modo de
realce de HTML. Necessitarás também de um navegador web, para ires vendo os
resultados dos exemplos que formos construindo.

Para distinguir os comandos HTML, usarei uma fonte fixa e para apresentar no-
vos conceitos ou pontos importantes, usarei itálico. A cheio estarão todos os avi-
sos e chamadas de atenção.

1 http://tswebeditor.at.tf/
2 http://kate.kde.org/
3 http://www.vim.org/

2
É agora tempo de passarmos à acção e começarmos a produzir HTML.

(Podes transferir um arquivo com todos os ficheiros-fonte deste curso a partir do

mesmo site deste documento: http://maracuja.homeip.net/doc/ti/src/crhtml.zip)

2 Primeiros passos

Como disse, um documento HTML é apenas texto puro, pelo que podes começar
por abrir o editor que escolheste e escrever o teu primeiro documento (ou copia e
cola o texto no editor — não pretendo ensinar-te dactilografia):

Canção de embalar
Dorme meu menino a estrela d'alva
já a procurei e não a vi
Se ela não vier de madrugada
Outra que eu souber será pra ti

Outra que eu souber na noite escura

Sobre o teu sorriso de encantar
Ouvirás cantando nas alturas
Trovas e cantigas de embalar

por José Afonso

Os documentos HTML e XHTML devem ter a extensão .html, para que o sistema
operativo os trate por omissão como tal. Assim, guarda este texto com o nome em-
balar.html (se estiveres a usar o Bloco de Notas do Windows, toma atenção que
este programa insiste em gravar os documentos com a extensão .txt, mesmo que
lhe coloques outra extensão; para contornar este problema, coloca o nome entre
aspas: "embalar.html").

Agora, visualiza o documento no teu navegador favorito.

3
Ups, o texto está todo seguido, sem quebras de linha nem parágrafos... não era
bem isto o que pretendíamos. O que se passa é que não colocámos qualquer for-
matação no texto, pelo que o interpretador do navegador não lhe deu nenhuma e,
em HTML, todo o espaço em branco, sejam qualquer número de espaços, tabula-
ções ou mudanças de linha, são interpretados da mesma forma: uma separação en-
tre duas palavras seguidas. As separações entre palavras são mostradas de uma
de duas formas pelo navegador: se as palavras couberem as duas na mesma linha,
será introduzido um, e apenas um, espaço entre elas; se não couberem, será intro-
duzida uma mudança de linha. Se reparares, foi o que aconteceu com o nosso tex-
to.

Toda a formatação HTML/XHTML é feita com tags (etiquetas), que equivalem aos
comandos da linguagem. Uma tag, em HTML, não é mais do que uma palavra cha-
ve rodeada por um sinal de menor ('<') e maior ('>'). Existem duas variantes de
tags, as normais, compostas por uma tag de abertura e outra de fecho, e as únicas
ou simples, em que se usa apenas uma única tag. Por exemplo, para dividirmos o
texto em parágrafos usamos a tag de abertura <p> a que corresponde a de fecho
</p> — é sempre assim: a tag de fecho é a de abertura precedida de uma barra.
Vamos usar esta tag para dividir o nosso texto em parágrafos (deves gravar o fi-
cheiro sempre que fizeres alterações e fazer Refrescar ou Recarregar no teu nave-
gador para visualizar a nova versão):

<p>Canção de embalar</p>

<p>Dorme meu menino a estrela d'alva

já a procurei e não a vi
Se ela não vier de madrugada
Outra que eu souber será pra ti</p>

<p>Outra que eu souber na noite escura

4
Sobre o teu sorriso de encantar
Ouvirás cantando nas alturas
Trovas e cantigas de embalar</p>

<p>por José Afonso</p>

Como se pode ver, o texto foi separado em parágrafos, sendo estes mostrados com
uma linha de intervalo entre cada um.

Está melhor, mas ainda não é bem isto que queríamos. O necessário agora é que-
brar as linhas de cada estrofe em versos. Não podemos usar a tag anterior, já que
esta colocaria uma linha a separar cada verso; o que necessitamos é de um coman-
do para mudar de linha sem iniciar um novo parágrafo. Para esse efeito usaremos
uma tag simples, <br />. Para distinguir as tags simples das normais de abertura,
as primeiras devem ser terminadas com uma barra, tal como apresentado (esta é
uma restrição apenas do XHTML, que não era necessária no HTML). Vamos então
formatar de novo a letra da canção do José Afonso, colocando uma quebra de linha
em cada verso (br vem de line break):

<p>Canção de embalar</p>

<p>Dorme meu menino a estrela d'alva<br />

já a procurei e não a vi<br />
Se ela não vier de madrugada<br />
Outra que eu souber será pra ti</p>

<p>Outra que eu souber na noite escura<br />

Sobre o teu sorriso de encantar<br />
Ouvirás cantando nas alturas<br />
Trovas e cantigas de embalar</p>

5
<p>por José Afonso</p>

Agora sim, já se parece com a letra de uma canção.

No entanto, ainda podemos introduzir alguns melhoramentos, como pôr a atribui-

ção da autoria em itálico e o nome do autor a cheio. Para isso iremos utilizar as
duas tags correspondentes, <em> e <strong>, respectivamente, com as suas tags
de fecho (em, ênfase; strong, forte):

<p>Canção de embalar</p>

<p>Dorme meu menino a estrela d'alva<br />

já a procurei e não a vi<br />
Se ela não vier de madrugada<br />
Outra que eu souber será pra ti</p>

<p>Outra que eu souber na noite escura<br />

Sobre o teu sorriso de encantar<br />
Ouvirás cantando nas alturas<br />
Trovas e cantigas de embalar</p>

<p><em>por <strong>José Afonso</strong></em></p>

Nota que todo o texto do parágrafo ficou em itálico e apenas o nome a cheio.

6
Isto demostra o facto de que podes embeber tags umas dentro das outras, desde
que as mais interiores fiquem totalmente incluídas nas exteriores. Ou seja, o có-
digo seguinte seria XHTML inválido, uma vez que a marcação interior não está to-
talmente incluída na exterior (nota que a maior parte dos navegadores fosse igno-
rar o erro e mostrar o texto correctamente):

<em>texto <strong>XHTML</em> inválido</strong>

Para terminar esta secção, vamos destacar o título da canção, usando a tag indica-
da, <h1>, e sublinhando-o. O h vem de Heading (título ou cabeçalho) e o 1 indica
que é um título de primeira ordem, podendo ser usados títulos de <h1> a <h6>.
Para sublinhar usamos a tag <u> (underline). Vamos ainda separar o título do tex-
to através de uma linha horizontal, com a tag <hr /> (horizontal rule).

<h1><u>Canção de embalar</u></h1>

<hr />

<p>Dorme meu menino a estrela d'alva<br />

já a procurei e não a vi<br />
Se ela não vier de madrugada<br />
Outra que eu souber será pra ti</p>

<p>Outra que eu souber na noite escura<br />

Sobre o teu sorriso de encantar<br />

7
Ouvirás cantando nas alturas<br />
Trovas e cantigas de embalar</p>

<p><em>por <strong>José Afonso</strong></em></p>

Reparaste que substituí a tag de parágrafo pela de título, o que faz todo o sentido:
um título será sempre apresentado separado do resto do texto.

Apenas com estas tags já poderias produzir muitos documentos em texto formata-
do, demonstrando assim a facilidade de aprendizagem desta linguagem, uma das
razões que a levaram ao sucesso que é hoje. É então uma boa altura de terminar
esta lição e passar à seguinte.

3 Listas

Listas, tabelas e imagens são das adições mais comuns para tornar um texto inte-
ressante. Como não podia deixar de ser, tudo isso é possível fazer com HTML.
Nós iremos começar por falar de listas.

Genericamente, podemos dividir as listas em dois grandes tipos: numeradas e não

numeradas (listas de itens). As listas não numeradas são descritas em HTML com
duas tags: <ul> e <li>. Para memorizares mais facilmente, basta lembrares-te que

8
ul vem de unordered list, lista não ordenada, e li de list item, item de uma lista.
Eis um pequeno exemplo da utilização destas tags (começa um novo ficheiro de
nome listas.html):

<h1>Listas</h1>

<h2>Lista não ordenada:</h2>

<ul>
<li>Primeiro item</li>
<li>Segundo item</li>
<li>Terceiro item</li>
</ul>

Toda a lista é envolvida entre as tags <ul> e </ul> e cada item entre as tags <li> e
</li>. Lembra-te que as quebras de linha e espaços são irrelevantes em HTML,
pelo que a separação e indentação de itens são apenas por motivos estéticos e
para melhorar a leitura do ficheiro de texto. Um item não precisa de ter uma só li-
nha, pode ser do tamanho que for necessário. Aliás, pode mesmo conter outra lis-
ta:

<h1>Listas</h1>

<h2>Lista não ordenada:</h2>

<ul>
<li>Primeiro item</li>
<li>Segundo item, uma sub-lista:
<ul>
<li>Primeiro sub-item</li>
<li>Segundo sub-item</li>
</ul>

9
 </li>
<li>Terceiro item</li>
</ul>

As listas ordenadas são semelhantes às anteriores, com a diferença que a sua tag
de definição é <ol> (ol vem de ordered list, lista ordenada). Podes adicionar esta
parte no fim do ficheiro anterior e visualizar no navegador para veres o efeito:

<h2>Lista ordenada:</h2>

<ol>
<li>Primeiro item</li>
<li>Segundo item</li>
<li>Terceiro item</li>
</ol>

10
As listas ordenadas podem também ser por ordem alfabética ou de numeração ro-
mana. Para tal temos de incluir no elemento de abertura da lista um atributo a es-
pecificar o tipo de lista pretendido. Os atributos usam-se da seguinte forma:

<h2>Lista ordenada:</h2>

<ol type="a">
<li>Primeiro item</li>
<li>Segundo item</li>
<li>Terceiro item</li>
</ol>

11
Neste caso o atributo chama-se type e indica o tipo de lista que queremos usar. A
maior parte dos atributos tem um valor (neste caso, “a”) que deve ser incluído
sempre entre aspas e a seguir ao sinal de igual. O atributo type de ol pode ter es-
tes valores:

• “1”: lista numerada normal (pode ser omitido)

• “a”: lista alfabética em letra minúscula ('a', 'b', etc...)

• “A”: lista alfabética em letra maiúscula ('A', 'B', etc...)

• “i”: lista em numeração romana minúscula ('i', 'ii', etc...)

• “I”: lista em numeração romana maiúscula ('I', 'II', etc...)

Outro atributo bastante útil nas listas é o value, que serve para alterar o valor de
um item na lista. Este atributo tem de ser sempre um número inteiro, que repre-
senta o valor que irá ser atribuído ao item; mesmo numa lista alfabética, é sempre
o número de ordem que é especificado. Por exemplo, se quiséssemos uma lista ini-
ciada no item ‘e’, faríamos o seguinte:

<h2>Lista ordenada:</h2>

<ol type="a">
<li value="5">Primeiro item</li>
<li>Segundo item</li>
<li>Terceiro item</li>
</ol>

Como vês, após a especificação de um valor, os itens restantes seguem a numera-

ção normalmente, mesmo sem especificarmos o seu valor.

12
4 Tabelas

As tags para construir uma tabela são <table>, <tr> e <td>, que representam res-
pectivamente uma tabela, uma linha e uma célula. Vamos construir uma tabela de
multiplicação, para ficares com uma ideia de como se usam estes elementos (grava
num ficheiro de nome tabela.html):

<h1>Tabela de multiplicação</h1>

<table>
<tr>
<td><b>X</b></td>
<td><b>1</b></td>
<td><b>2</b></td>
<td><b>3</b></td>
</tr>
<tr>
<td><b>1</b></td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td><b>2</b></td>
<td>2</td>
<td>4</td>
<td>6</td>
</tr>
<tr>
<td><b>3</b></td>
<td>3</td>
<td>6</td>
<td>9</td>
</tr>
</table>

Mais uma vez, lembra-te que as quebras de linha e espaços são opcionais, servindo
apenas para tornar legível o texto fonte.

13
Repara como toda a tabela está envolvida entre as tags <table> e </table>, cada
linha entre as tags <tr> e </tr> (table row, linha de tabela) e cada célula entre as
tags <td> e </td> (table data, dados da tabela). Dentro das células pode estar
qualquer conteúdo, incluindo outras tabelas -- aliás, é dessa forma que muitas das
páginas web mais complexas são feitas.

Para mostrar as linhas divisoras entre as células deves incluir o atributo border na
tag <table>. Este atributo é também um número inteiro que significa a espessura
da linha. Por exemplo, para que a tabela anterior tivesse linhas com a espessura
de um pixel, a tag inicial deveria ser <table border="1">.

14
5 Hiperligações

Aquilo que torna o HTML especial, e o que lhe dá inclusivamente o nome, é o facto
de poder incluir hiperligações (referências) nos documentos. As hiper-ligações po-
dem ser internas, para um local na própria página ou externas, para outra pági-
na. As outras páginas referenciadas podem estar na mesma máquina ou em qual-
quer local acessível por rede. Também podes referenciar locais específicos dentro
de uma página externa.

Para incluíres uma ligação para uma página deves usar a tag <a>, de anchor, indi-
cando no seu atributo href a localização dessa página. O texto que puseres entre
a tag de abertura e a de fecho será o texto da ligação. Por exemplo, no parágrafo
seguinte está uma ligação para o Google (grava num ficheiro href.html):

<h1>Hiperligações</h1>

<p>Consulta o <a href="http://www.google.com">Google</a> para

descobrires o que procuras.</p>

Neste caso era uma ligação para uma página externa, pelo que deve levar sempre
a indicação do protocolo a usar (o http://) — sempre que necessitares de ligar a
uma página exterior, a melhor forma é abri-la num navegador e copiar o endereço
para o atributo href. Se a página referenciada for local ao sítio ( site) ou máquina
onde está a página com a ligação para lá, não necessitas de incluir o protocolo,
bastando incluir o caminho relativo ou absoluto para a página em questão. Por ex-
emplo, para uma ligação para a página listas.html, que fizeste anteriormente, lo-
calizada na mesma directoria desta página, poderias incluir o seguinte código (vai
acrescentando ao ficheiro anterior):

<p>Ligação para <a href="listas.html">listas.html</a>.</p>

15
Quando o navegador segue a ligação para uma página, mostra sempre o topo da
nova página e, na maior parte dos casos, é isso mesmo que queremos. No entanto,
em páginas mais compridas, com várias secções, podemos querer ir directamente
para uma dessas secções. Também, se a página que estivermos a escrever ultra-
passar várias vezes a altura do ecrã, será conveniente colocarmos um índice no
topo com referências para cada uma das secções ou partes da página. Para este
efeito temos de marcar as secções no documento para onde queremos ligar com o
atributo id. Para exemplificar, volta a abrir a página listas.html e altera os títu-
los das secções para que fiquem desta forma:

<h2 id="li_nord">Lista não ordenada:</h2>

<h2 id="li_ord">Lista ordenada:</h2>

<h2 id="li_alf">Lista ordenada:</h2>

<h2 id="li_alf2">Lista ordenada:</h2>

Agora, podemos criar uma lista de ligações para cada uma dessas secções na pági-
na href.html:

<ul>
<li><a href="listas.html#li_nord">Lista não ordenada</a></li>
<li><a href="listas.html#li_ord">Lista ordenada</a></li>
<li><a href="listas.html#li_alf">Lista alfabética</a></li>
<li><a href="listas.html#li_alf2">Segunda lista alfabética</a></li>
</ul>

16
Repara no uso do cardinal antes do nome que demos às secções, o que indica pre-
cisamente que é uma referência para uma secção da página — se não tivesse o car-
dinal seria tratado como uma referência para um ficheiro local. Se pretendesses
criar um índice na própria página listas.html, poderias fazê-lo desta forma (colo-
ca este pedaço no início do ficheiro, logo a seguir ao título):

<h2>Índice</h2>

<ul>
<li><a href="#li_nord">Lista não ordenada</a></li>
<li><a href="#li_ord">Lista ordenada</a></li>
<li><a href="#li_alf">Lista alfabética</a></li>
<li><a href="#li_alf2">Segunda lista alfabética</a></li>
</ul>

Uma vez que a secção fica na própria página, não necessitas de incluir o seu nome
antes do cardinal.

Nesta página coloquei todos os atributos id em tags <h2>, porque me pareceu a lo-
calização mais lógica. No entanto, este atributo é válido em qualquer tag.

6 Estrutura de um documento HTML

Até agora temos usado a marcação HTML/XHTML para produzir documentos mas,
apesar de a maior parte dos navegadores os conseguir interpretar, os documentos
que temos criado não são documentos HTML válidos, uma vez que todo o docu-

17
mento HTML tem de obedecer a uma estrutura rígida. Uma página HTML válida
mas bastante básica poderia ser assim:

<html>
<head>
<title>A minha página</title>
</head>
<body>

<h1>A minha página</h1>

<p>Página em construção.</p>

</body>
</html>

Os documentos HTML e XHTML têm duas partes distintas. A primeira parte, o ca-
beçalho, é envolto entre as tags <head> e </head> e contém informação diversa so-
bre o documento; neste caso tem apenas o seu título, que é definido com a tag
<title>. O título da página é normalmente mostrado na barra de título do navega-
dor, junto com o seu nome. A segunda parte, envolta entre as tags <body> e
</body>, contém o corpo do documento, ou seja, o seu conteúdo propriamente di-
to. Toda a página HTML deve ficar dentro das marcações <html> e </html>.

7 Imagens e outros efeitos

Com o que falámos até aqui já podemos escrever uns bons textos para colocar na
Internet. No entanto, podemos tornar as coisas ainda mais interessantes colocan-
do algumas imagens e incluindo outros efeitos. É disso que irei falar nesta última
secção do Curso Relâmpago.

7.1 Imagens
Para incluir imagens nas páginas HTML usa-se a tag <img /> (image), indicando o
ficheiro com a imagem que queremos incluir (este ficheiro podes chamar efei-
tos.html):

<html>
<head>
<title>Efeitos</title>
</head>
<body>

<h1>Efeitos</h1>

<h2>Imagens</h2>

<img src="http://maracuja.homeip.net/info/antonio/antonio.png"

18
 width="158" height="140" alt="António" />

</body>
</html>

O nome do ficheiro com a imagem é indicado no atributo src (source, fonte) e

pode indicar uma imagem local ou em qualquer ponto da rede. Se a imagem esti-
ver numa máquina diferente, como no exemplo acima, deve indicar-se o seu URL
completo; se, por outro lado, esta se encontrar no mesmo sistema da página, bas-
ta indicar o seu caminho absoluto (partindo da raiz do sistema) ou relativo (a partir
da localização da página). Experimenta incluir uma imagem que tenhas no teu sis-
tema — copia-a para a directoria onde tens a página e dá-lhe o nome teste.png
(altera a extensão do ficheiro consoante o tipo de imagem que vais utilizar). Em
seguida, acrescenta esta linha ao ficheiro anterior (antes da tag </body>, obvia-
mente):

<h2>Imagem local</h2>

<img src="teste.png" alt="Imagem local de teste" />

Os formatos de imagem admitidos variam consoante o programa utilizado para vi-

sualizar a página, sendo os mais vulgares os JPEG, GIF e PNG. Os atributos width
e height são opcionais, levando respectivamente a largura e altura da imagem em
pixeis, e servem para indicar ao navegador o espaço que a imagem irá ocupar, tor-

19
nando mais rápida a construção da página. Finalmente, o atributo alt contém um
texto a ser exibido no caso de ser impossível mostrar a imagem, quer isso seja por
indisponibilidade do ficheiro quer por outro qualquer problema; é uma boa norma
incluir sempre este atributo, apesar de também ele ser opcional. Para veres o efei-
to deste atributo, remove a imagem anterior da directoria e visualiza novamente a
página.

7.2 Caracteres especiais

Existem alguns caracteres que necessitam de uma notação especial para serem re-
presentados numa página HTML. Por exemplo, os sinais de maior e menor, uma
vez que são utilizados para delimitar as tags, não seriam visualizados se os incluís-
semos naturalmente numa página. Estes sinais podem ser representados da se-
guinte forma:

• &lt; → sinal de menor, ‘<’ (lt significa less than)

• &gt; → sinal de maior, ‘>’ (gt singifica greater than)

Os caracteres especiais são então representados através de uma abreviatura entre

um e-comercial (‘&’) e um ponto e vírgula (‘;’). O próprio e-comercial tem também
uma representação: &amp; (amp vem de ampersand). Também símbolos que não
constam nos teclados podem ser representados por esta notação:

• &copy; → símbolo de copyright, ‘©’

• &nbsp; → espaço entre palavras que não devem ser separadas por uma
quebra de linha (nbsp significa non-breaking space)

Os caracteres acentuados também podem ser representados desta forma:

• &aacute; → ‘a’ com acento agudo, ‘á’

• &agrave; → ‘a’ com acento grave, ‘à’

• &acirc; → ‘a’ com acento circumflexo, ‘â’

• &atilde; → ‘a’ com til, ‘ã’

• &auml; → ‘a’ com trema, ‘ä’

• &ccedil; → ‘c’ com cedilha, ‘ç’

Penso que percebeste a lógica: primeiro coloca-se a letra que se quer acentuar e
depois o tipo de acento a colocar. Isto é muito útil quando não se sabe a codifica-
ção de caracteres que estamos a usar para editar a página HTML: se esta for dife-
rente da que é utilizada por omissão pelos navegadores das pessoas que a irão vi-
sualizar, estes caracteres sairão todos trocados. Acrescenta estas linhas ao fichei-
ro efeitos.html para veres um exemplo da utilização desta notação:

20
<h2>Caracteres especiais</h2>

<p>&lt; &copy; 2007 Maracujá! &gt; <br />

&Eacute; um texto divert&iacute;ssimo.</p>

Também é possível indicar a codificação que estamos a usar incluindo esta tag
dentro da <head> </head> da página:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Esta tag, quando incluída, indica o tipo de documento que se trata, neste caso um
documento HTML (text/html), e qual a codificação de caracteres que foi utilizada
para o editar, aqui UFT-8 (charset=utf-8). Deves colocar a codificação de caracte-
res que usares a seguir a charset=. As codificações mais vulgares em Portugal,
para além do UTF-8, utilizada pelos sistemas operativos mais modernos, são o ISO-

21
8859-1, ISO-8859-15 e Windows-1252, este último utilizado maioritariamente pelos
Windows mais antigos.

7.3 Efeitos
Tradicionalmente, o estilo utilizado nos documentos, como o tipo de fonte, o seu ta-
manho, a cor do texto e do fundo, etc., eram definidos no próprio documento
HTML através de tags e atributos específicos. No entanto, foi depois verificado
que isso implica um pesadelo de manutenção para sites com muitas páginas, uma
vez que. quando se quisesse alterar o aspecto de um sítio web teriam de se alterar
todas elas, uma a uma, correndo sempre o risco de deixar algo para trás. Por essa
razão foi criada uma nova norma, chamada Cascading Style Sheets (CSS), que pos-
sibilita colocar todas as definições de estilo num único ficheiro, bastando então
que nas páginas HTML o referenciemos para que estas adoptem essas definições.
Assim, nas páginas HTML passa a estar apenas o conteúdo, o que torna mais fácil
a sua manutenção e a alteração consistente do aspecto de todo um sítio, bastando
alterar apenas num ficheiro. Como o objectivo deste curso é apenas iniciá-los no
HTML, não me irei debruçar sobre CSS, deixando isso, talvez, para um documento
futuro. No entanto, para que consigas embelezar as tuas páginas, irei abordar le-
vemente a forma de embeberes CSS em HTML (defraudando assim todo o objecti-
vo deste padrão, mas é por uma boa causa).

Para incluires uma definição de estilo numa tag, basta colocares o atributo
style="" dentro dessa tag, colocando a definição dentro das aspas. Por exemplo,
para modificarmos a cor do texto de um parágrafo faríamos (vai acrescentando ao
ficheiro anterior):

<h2>Cores</h2>

<p style="color: green;">Texto a verde.</p>

Para alterar a cor do texto usa-se a propriedade CSS color, indicando a cor deseja-
da de seguida e terminando com um ponto e vírgula. Aqui usámos uma cor prede-
finida, green, estando disponíveis as cores mais vulgares como red, blue, yellow,
pink, orange, etc. Também podemos construir uma cor usando uma escala de 16
níveis das três cores fundamentais: vermelho, verde e azul. Para indicar o nível
pretendido usamos o seu valor com um dígito hexadecimal (0-9, A-F). Por exem-
plo, para uma cor composta por 15 de vermelho, 8 de verde e 0 de azul, usaríamos
a seguinte especificação:

<p style="color: #F80;">Texto a laranja.</p>

Quando indicamos uma cor em hexadecimal, temos de o indicar com um cardinal

(#) antes do valor e seguindo a ordem vermelho-verde-azul.

22
Podemos incluir vários elementos de estilo no mesmo atributo. O parágrafo que se
segue apresenta texto a branco sobre um fundo (background) verde:

<p style="color: white; background: green;">Branco sobre verde.</p>

Para terminar, vê como se muda a fonte (propriedades font-family e font-size) e

o alinhamento (text-align):

<h2>Fontes e alinhamento</h2>

<p style="text-align: left; font-family: serif; font-size: x-small;">

À esquerda, Serif e muito pequeno
</p>

<p style="text-align: justify; font-size: small;">

Justificado (alinhado às margens) e apenas pequeno, mas temos que
colocar bastante texto para ver o efeito, pelo que este parágrafo é
anormalmente grande, não sei se me estás a compreender...
</p>

<p style="text-align: center; font-family: courier; font-size: large;">

Ao centro, Courier e grande
</p>

<p style="text-align: right; font-family: sans-serif;

font-size: x-large;">
À direita, Sans-serif e enorme
</p>

23
Apesar de ter usado as definições de estilo sempre em tags <p>, podes usá-las
onde quiseres, desde que faça sentido, como em tags <tr> e <td>, por exemplo.
Também, se quiseres que uma grande porção de texto tenha um estilo definido,
por exemplo, que todo o texto de um artigo seja justificado, podes incluí-lo dentro
de um bloco <div style="text-align: justified"></div>. A tag <div> serve
precisamente para definir um bloco na página.

8 Conclusão

Com os conhecimentos abordados ao longo deste guia, deves poder desenrascar-te

a fazer algumas páginas para publicação na Internet. No entanto, deves tentar au-
mentar os teus conhecimentos, para poderes fazer coisas realmente interessantes
e bonitas, utilizando todas as características do HTML, incluindo a utilização de
formulários. Para tal deixo aqui umas referências para estudo futuro:

• http://www.w3.org/MarkUp/ — a casa da HTML na Web.

• http://www.w3.org/TR/html4/ — a descrição completa da última versão de

HTML.

• http://www.w3.org/TR/xhtml11/ — a descrição da versão 1.1 da norma

XHTML.

• http://www.w3.org/Style/CSS/ — a página de referência da CSS.

24