(X) HTML

Parte 1: HTML Simples
1.

Noes bsicas

1.1 Sobre a "World Wide Web"
O que a World Wide Web?
A World Wide Web (WWW), designada habitualmente apenas por a Web, formada por
muitas redes de computador ligadas entre si que se estendem por quase todo o mundo.
Todos os computadores que esto ligados Web podem comunicar uns com os outros.
A comunicao entre os computadores que esto na Web faz-se usando o protocolo padro
HTTP ("HypertText Transfer Protocol,") que significa: Protocolo para a Transferncia de
HiperTexto.
Como funciona a WWW?
Na Web a informao normalmente guardada em documentos designados por pginas da
Web.
As pginas da Web so constitudas por arquivos que esto guardados em computadores
designados por servidores da Web.
Os computadores usados para ler as pginas da Web so designados por clientes da Web.
Os clientes da Web usam um programa de software designado por Web browser (ou
navegador da Web) para apresentar as pginas graficamente.
Os browsers mais populares so o Microsoft Internet Explorer, o Netscape, o Mozilla
(derivao moderna do Netscape), e Firefox que revela muitas qualidades que j superam o
MSIE. A verso 8.52 do browser Opera tambm revela qualidades que merecem a nossa
ateno.
Como que o browser vai buscar as pginas?
O browser faz um pedido ao servidor da Web que guarda a pgina que quer ver.
O pedido, que contm o endereo (URL) da pgina desejada, enviado usando o protocolo
padro HTTP.
O endereo (URL) tem um aspecto semelhante a este:
http://www.qualquersite.com/pagina.html
Como que o browser faz a apresentao das pginas?
As pginas contm instrues que descrevem a forma como devem ser mostradas.
O browser l as instrues e usa-as para desenhar uma representao grfica do contedo da
pgina.
A forma usada para escrever essas instrues baseia-se na linguagem HTML.
Quem responsvel pela definio dos padres da Web?
Os padres atuais da Web foram influenciados por aquilo que a Netscape e a Microsoft
fizeram no passado com os seus Web browsers, mas atualmente influncia destas entidades
menor.
O organismo que define as regras para a Web o World Wide Web Consortium (W3C), que
conta com a participao ativa dos lderes da indstria e de meios acadmicos.
O W3C define as especificaes tcnicas que formam os padres da Web.
Os padres mais importantes da Web so: HTML, CSS e XML.
O padro mais recente da famlia HTML o XHTML 1. Esta uma reformulao da
linguagem HTML 4.01 que obedece aos requisitos do XML.
1.2 O que preciso para criar pginas para a Web?
Um editor de texto capaz
Um programa para manipular imagens
Web Browser
Idias e coisas para mostrar
1.3 A sua primeira pgina escrita em HTML
O acrnimo HTML resulta de HyperText Markup Language. Este nome significa que o HTML
constitudo por um texto especial que habitualmente designado por hipertexto.
O que que est dentro de um arquivo HTML?
Um arquivo HTML constitudo por texto que define os elementos da linguagem HTML
usando "tags de markup"
As tags de markup do instrues ao browser sobre a estrutura do documento e sobre forma
como a pgina deve ser apresentada graficamente
Os arquivos HTML podem ser escritos usando um simples editor de texto e os seus nomes
devem ter a extenso .html
Experimente voc mesmo
Usando o seu editor de texto preferido crie um novo arquivo e escreva nele o texto seguinte:
<ht ml >
<head>
<t i t l e>T t ul o da pgi na</ t i t l e>
</ head>
<body>
Est a a mi nha pr i mei r a pgi na da Web.
Est e t ext o est emnegr i t o
</ body>
</ ht ml >
Guarde o arquivo com o nome "pagina.html".
Faa-o executar no seu web browser. Abra o documento "pagina.html" usando as opes do menu
ou arrastando o cone do arquivo para dentro da janela do browser e, claro, observe o resultado.
Explicao do Exemplo
A primeira tag que encontramos no documento anterior <html>. Ela define o elemento raiz do
documento, que aquele que contm toda a definio da pgina. Esta tag diz ao browser para
iniciar um novo documento HTML cujo contedo se encontra definido entre esse local e a tag de
fim (ou de fechamento), que </html>. Esta tag de fim marca o fim do documento (pgina).
O texto contido entre as tags <head> e </head> define o cabealho do documento. Esta informao
no apresentada graficamente mas d indicaes importantes a respeito daquilo que a pgina
contm e sobre a forma como ela deve ser apresentada graficamente.
O texto contido no elemento <title> define o ttulo do documento. Repare que o seu sistema
operacional d, janela do browser, o nome que voc definiu como ttulo.
O texto contido no elemento <body> define tudo aquilo que o browser deve apresentar
graficamente. O corpo da pgina ("body") constitudo por tudo o que se encontra entre <body> e
</body>.
O texto contido entre as tags e ser apresentado em negrito.
Devemos usar a extenso .htm ou .html?
Os nomes dos arquivos escritos em HTML devem ter a extenso .html, mas a extenso .htm ainda
usada. Este fato uma herana dos tempos (pr-histricos no que diz respeito Internet) do
MsDOS e do Windows de 16 bits (Windows 95), em que os nomes dos arquivos tinham no mximo
8 caracteres e as suas extenses no podiam ter mais de 3 caracteres.
Essas deficincias, que no passado obrigaram a usar a extenso .htm em vez de .html, j foram
eliminadas, e por isso devemos usar a extenso .html
Editores Especializados em HTML
Muita gente acha que a forma mais fcil de criar e editar arquivos HTML consiste em usar um
editor do tipo "what you see is what you get" (WYSIWYG) como o Macromedia DreamWeaver, o
Adobe GoLive ou o Microsoft FrontPage.
Estes editores WYSIWYG permitem criar as pginas num ambiente grfico sem que o utilizador
precise de conhecer a linguagem HTML. No entanto, estas aplicaes apresentam diversas
deficincias na qualidade do HTML que produzem. Apesar de as verses mais recentes produzirem
cdigo de melhor qualidade, elas ainda esto muito longe da perfeio, o que obriga os utilizadores
a editar manualmente partes do HTML produzido para corrigir os erros criados. Se no quiser
desistir de usar a sua aplicao preferida mas quer produzir bom HTML ento ter de ser capaz de
corrigir o cdigo que ela produz de forma deficiente.
O melhor uso que se pode dar a um editor WYSIWYG consiste em us-lo para acelerar o
desenvolvimento das pginas e sempre que necessrio ir ao cdigo fonte para fazer as otimizaes
necessrias. Se o seu objetivo adquirir conhecimentos que lhe permitam criar pginas para a Web
de forma competente, ento deve aprender HTML usando um editor de texto e s depois comear a
usar um editor especializado em HTML.
Editores de texto simples
Muita gente usa o editor de texto Notepad (Bloco de Notas) para editar as suas pginas HTML. Isto
acontece porque este editor de texto est presente em todas as mquinas Windows. Porm, este
um editor de texto bastante fraco e ser muito vantajoso trabalhar com um editor mais competente.
Felizmente existem bons editores de texto disponveis gratuitamente na Internet. Alguns deles at
tm verses em portugus. Se estiver usando, ou se planeja usar o Bloco de Notas para editar
HTML, ento aceite um conselho e troque-o pelo EditPad Lite, pode escolher entre duas verses:
ingls ou portugus em http://www.editpadlite.com.br/editpadlite.html
Nota: Tenha em ateno que este editor oferecido em duas verses, a verso lite, que gratuita
para utilizaes no comerciais, e a verso Pro, pela qual preciso pagar. A verso Pro tem outras
funcionalidades acrescidas e destina-se ao uso profissional.

2.

Elementos e atributos

2.1 Elementos
Os documentos HTML so simples arquivos de texto que contm "tags de markup". Estas tags
definem os elementos da linguagem HTML e os seus contedos. A lista seguinte indica algumas das
suas caractersticas:
As "tags de markup" do HTML so usadas para definir os elementos.
As tags do HTML escrevem-se usando os caracteres < e > a envolverem o nome do
elemento e os seus atributos.
Em regra, as tags do HTML aparecem em pares, como em e .
A primeira tag do par a tag de incio (ou de abertura) e a segunda tag do par a tag de fim
(ou de fechamento).
Tudo o que se encontrar entre as tags de incio e de fim faz parte do contedo do elemento.
Em HTML as tags podem ser escritas com letra grande ou com letra pequena. Os resultados
so os mesmos porque os nomes dos elementos no dependem do tipo de letra. As tags 
e representam o mesmo elemento.
Em XHTML as tags devem ser escritas sempre com letra pequena. Em XHTML as tags 
e no representam o mesmo elemento.
Relembremos agora o exemplo apresentado antes:
<ht ml >
<head>
<t i t l e>T t ul o da pgi na</ t i t l e>
</ head>
<body>
</ body>
</ ht ml >
O fragmento apresentado a seguir um elemento da linguagem HTML:
Repare nos aspectos seguintes deste fragmento:
O elemento comea com a tag de incio (ou abertura): 
O contedo do elemento apenas texto ("Este texto est em negrito")
O elemento termina com a tag de fim (ou de fechamento): 
A tag serve para definir o elemento do HTML que provoca a escrita do texto em negrito.
Um exemplo mais complexo
O fragmento seguinte tambm um elemento do HTML (mas mais complexo):
<body>
</ body>
O elemento principal deste fragmento inicia-se com a tag <body>, e termina com a tag </body>.
A tag <body> serve para definir o elemento que contm tudo aquilo que vai ser apresentado
graficamente na janela do browser. Ele contm o corpo ("body") do documento HTML.
Porque que se recomenda a escrita das tags com letra pequena?
Como se disse antes, em HTML os nomes dos elementos podem ser escritos tanto com letra grande
como com letra pequena: significa o mesmo que . Se procurar tutoriais de HTML na Web,
vai reparar que os mais antigos usam quase sempre letra grande para escrever os nomes dos
elementos, mas os mais modernos usam exclusivamente letra pequena. Aqui usamos sempre letra
pequena porque existe uma razo muito forte para isso.
A nova gerao do HTML uma aplicao do XML e designa-se por XHTML. O XHTML a
melhor linguagem para criar pginas para a Web mas mais restritiva do que o HTML (rouba
algumas das liberdades que o HTML oferece.) Contrariamente ao que acontece em HTML, em
XML as tags e representam coisas diferentes, pelo que em XHTML adoptou-se uma
conveno segundo a qual todas as tags devem ser escritas com letra pequena. Por este motivo
conveniente que escreva todas as tags com letra pequena. Deste modo no s adquirir bons hbitos
como ter muito pouco (quase nenhum) trabalho quando precisar de converter as suas pginas de
HTML para XHTML.

2.2 Atributos
A tag <body> define o corpo ("body") de uma pgina HTML. No exemplo seguinte adicionamos o
atributo bgcol or (que significa "background color", ou cor de fundo) para indicarmos que
queremos que a pgina seja pintada com a cor de fundo vermelha:
<ht ml >
<body bgcol or =" r ed" >
</ body>
</ ht ml >
Consideremos agora a tag <table>, que define um elemento de tabela. Ao juntarmos o atributo
border (que significa borda, fronteira, ou limites) com o valor apresentado a seguir estamos a dizer
ao browser para no desenhar os limites da tabela (<t abl e bor der =" 0" >indica uma espessura nula
para a linha de contorno da tabela):
<ht ml >
<body>
<t abl e bor der =" 0" >
<t r >
<t d>Est a a mi nha pr i mei r a t abel a. </ t d>
</ t r >
</ t abl e>
</ body>
</ ht ml >
J no exemplo seguinte ns dizemos ao browser para desenhar uma linha de contorno com
espessura igual a 2 (bor der =" 2" ).
<ht ml >
<body>
<t abl e bor der =" 2" >
<t r >
<t d>Est a a mi nha segunda t abel a. </ t d>
</ t r >
</ t abl e>
</ body>
</ ht ml >
Como acabou de ver os atributos aparecem sempre em pares nome/valor, assim: nome=" val or " .
Nota: Os atributos s podem aparecer nas tags de incio. proibido colocar atributos nas tags de
fim. Para assegurar a compatibilidade com o XHTML use letra pequena para escrever os nomes dos
atributos e coloque os valores entre aspas.
Devemos usar aspas ou apstrofos (escrevemos "texto" ou 'texto')?
Pelos motivos que acabamos de ver, os valores dos atributos devem ser sempre colocados entre
aspas. Normalmente usam-se aspas normais (") mas os apstrofos (') tambm so permitidos.
Em certos casos, o valor do atributo contm o prprio caractere aspas. Numa situao dessas
devemos usar apstrofos (que aqui funcionam como aspas simples) para colocar em torno do valor
do atributo, assim:
al t =' El e di sse: " No! " '
Se preferirmos usar apstrofos deve escrever assim:
al t =" El e di sse: ' No! ' "

3.

Elementos bsicos da linguagem HTML
Algumas das tags mais importantes em HTML so aquelas que definem cabealhos de seco,
pargrafos, divises e quebras de linha.
Para aprofundarmos este tema comecemos por ver e executar um exemplo muito simples que
demonstra a forma como o texto dentro de um elemento (pargrafo) apresentado pelo
browser:
<ht ml >
<head>
<t i t l e>Exempl o</ t i t l e>
</ head>
<body>
I st o umpar gr af o. 
I st o out r o par gr af o. 

Os par gr af os def i nem- se como el ement o &l t ; p&gt ;

</ body>
</ ht ml >
Nota: A iniciativa Web Semntica d muita importncia aos elementos que vamos estudar nesta
pgina e nas pginas seguintes. O uso correto destes elementos permite melhorar muito as
potencialidades da Web como meio de publicao.

3.1 Cabealhos
Os cabealhos (de captulo ou de seco) definem-se com as tags <h1>...<h6>. <h1> define o
cabealho mais importante (maior) e <h6> define o menos importante (menor.)
<h1>I st o umcabeal ho</ h1>
Nota: O HTML adiciona de forma automtica uma linha em branco antes e depois de um
cabealho.
3.2 Pargrafos
Os pargrafos definem-se com a tag .
I st o umpar gr af o
I st o out r o par gr af o
O HTML adiciona de forma automtica uma linha em branco antes e depois de um pargrafo.

3.3 Quebras de linha
A tag usa-se para terminar uma linha sem iniciar um novo pargrafo. Esta tag ( , ou "line
break") provoca uma mudana de linha forada no local em que aparece.

I st o umpar - gr af o
comquebr as de l i nha

O exerccio seguinte d-lhe uma oportunidade para experimentar:
<ht ml >
<head>
<t i t l e>Exempl o</ t i t l e>
</ head>
<body>

I st o umpar - gr af o
comquebr as de l i nha

</ body>
</ ht ml >
A tag uma tag vazia. Ela no pode ter qualquer contedo e no tem tag de fim (fechamento.)
Nota: Em XHTML obrigatrio o fechamento de todas as tags de marcao, assim devemos
adicionar uma barra / antes de fecharmos a tag, ficando expressa da seguinte forma: 

3.4 Comentrios
As tags de comentrio so especiais porque no se escrevem da mesma forma que as tags que
representam elementos normais. Os comentrios servem para dizer ao browser que o seu contedo
um comentrio e no pode ser apresentado graficamente. Eles usam-se para fazer anotaes que
explicam a forma como o cdigo fonte est feito para que mais tarde consigamos compreender
aquilo que fizemos antes. O exemplo seguinte mostra um comentrio
<! - - I st o umcoment r i o - - >
Repare que o facto de termos um ponto de exclamao no incio diz ao browser que esta uma tag
especial, a qual no representa um elemento normal da linguagem HTML.
3.5

Lista de elementos bsicos do HTML
Elemento Descrio
<ht ml >
Elemento que contm todas as definies da pgina HTML
<body>
Elemento que contm o corpo ("body") da pgina
<h1>. . . <h6>
Define cabealhos desde o nvel 1 (mais importante) at ao nvel 6 (menos
importante)

Define um pargrafo
 
Provoca uma mudana de linha forada
<hr >
Insere uma linha horizontal
<! - - - - >
Insere um comentrio no cdigo fonte
Exemplos de Aplicao
Mais pargrafos
Alguns problemas com a formato em HTML
Elementos de cabealho
Cabealho alinhado ao centro
Inserir uma linha horizontal
Comentrios no cdigo fonte de uma pgina HTML
Utilizando uma cor de fundo

3.6 Dicas
Se voc executou os exemplos de aplicao listados mais acima provavelmente deparou com alguns
comportamentos inesperados. As dicas seguintes chamam a ateno para alguns deles.
1) Quando escrevemos pginas em HTML devemos ter sempre ateno ao fato de elas poderem ser
apresentadas de forma diferente em browsers diferentes ou em mquinas diferentes. O aspecto
grfico de uma pgina pode diferir entre mquinas ou entre browsers! Isso se deve no s a
diferenas nos sistemas mas tambm ao fato de os utilizadores poderem ter monitores de tamanhos
diferentes e de poderem redimensionar a janela do browser para o tamanho que preferirem.
2) As diferenas nos tamanhos das janelas dos browsers fazem com que o nmero de caracteres que
cabem numa linha varie muito. Por esse motivo no seremos capazes de controlar nem o nmero de
linhas nem os locais em que acontecem as mudanas de linha. Nunca tente formatar o texto
inserindo espaos ou linhas vazias porque os resultados que obtm no sero aqueles que
pretende obter!
3) Quando encontra dois ou mais espaos seguidos, o HTML trata-os como se fossem um nico
espao. Quando escreve uma seqncia de espaos seguidos o resultado o mesmo de escrever um
nico espao. Em HTML as teclas Tab e Enter equivalem a um espao.
4) Sempre que quiser inserir linhas em branco use o elemento . H quem use pargrafos vazios
para obter o mesmo resultado mas isso est errado. O elemento deve ser usado apenas para
definir pargrafos e o elemento no deve ser usado para fins como criar listas por exemplo.
Existem elementos concebidos especificamente para isso. Sempre que precisar de obter uma
formatao especial deve usar o elemento que foi criado para esse efeito.
5) Em muitas pginas os pargrafos esto escritos sem a tag de fechamento (.) Apesar de os
browsers aceitarem essa omisso tenha sempre o cuidado de fechar todos os elementos que
requerem uma tag de fechamento. Se tentar validar uma pgina que contenha estes erros ver que
ela no passar no teste de validao.
6) Aos elementos e <h1>... <h6>o browser adiciona automaticamente uma linha em branco
antes do incio e outra depois do fim.
3.7 Como ver o cdigo fonte de uma pgina HTML
J alguma vez olhou para uma pgina da Web e se interrogou sobre a forma das instrues que do
origem ao que v no monitor do seu computador?
Se estiver usando o Internet Explorer e quer descobrir, ento v ao menu "Ver" (ou "View") e
escolha a opo "Ver HTML." Se estiver a usar o Netscape 7/Mozilla v ao menu "Ver" (ou
"View") e escolha a opo "View Page Source" (ou o termo equivalente em portugus.) Tanto no
Netscape como no Internet Explorer pode fazer clique sobre a pgina com o boto direito do rato e
escolher a opo "Ver HTML" ou "View Page Source." Depois de realizar esta ao ver se abrir
uma nova janela contendo o cdigo fonte da pgina que est a ser apresentada pelo browser. Se
estiver usando o browser Opera procure a opo equivalente a esta no seu menu ou clicando com o
boto direito do rato sobre a pgina.
No desanime se o aspecto do cdigo fonte lhe parecer assustador. Se for esse o caso pode estar
certo que a pgina que est a ver foi escrita por um programa de software ou ento o cdigo foi
propositadamente "desarranjado" para confundir os "espies." Como ter oportunidade de perceber
ao longo deste texto, o cdigo HTML bem escrito mo muito fcil de ler, mas h muita gente
que o complica de propsito s para confundir.
4.

Formatao de texto
A linguagem HTML define vrios elementos para formatar texto, como por exemplo escrever em
negrito, itlico, ou sublinhado. O exemplo seguinte d-lhe uma oportunidade para experimentar
alguns deles:
<ht ml >
<body>
Est e exempl o t emt ext o emi t l i co, negr i t o,
enf at i zado, subl i nhado e t i po
<code>cdi go de comput ador </ code>.
</ body>
</ ht ml >

4.1 Elementos para formatao de texto
Elemento Descrio

Define texto escrito em negrito
<bi g>
Define texto com letra maior

Define texto enfatizado (escreve-se com caracteres itlicos)

Define texto escrito com caracteres itlicos
<smal l >
Define texto com letra menor
<st r ong>
Define texto forte (escreve-se em negrito)

Texto subescrito (alinhado um pouco mais abaixo)

Texto sobrescrito (alinhado um pouco mais acima)

Texto inserido
<del >
Texto apagado
<s>
Riscado ao meio. Desaprovado, use <del>
<st r i ke>
Riscado ao meio. Desaprovado, use <del>

Sublinhado. Desaprovado, use estilos CSS

4.2 Elementos para o "output de cdigo de computador"
Elemento Descrio
<code>
Define texto que cdigo de computador
<kbd>
Texto inserido com o teclado
<samp>
Amostra de cdigo de computador
<t t >
"Teletype text" (imita a letra de uma mquina de escrever antiga)
<var >
Texto que representa uma varivel
<pr e>
Texto pr formatado
<l i st i ng>
Desaprovado. Use <pre>
<pl ai nt ext >
<xmp>

4.3

Elementos para citaes e listas de definies
Elemento Descrio
<abbr >
Define uma abreviao
<acr onym>
Define um acrnimo
<addr ess>
Define um endereo (postal)
<bdo>
Define a direo de escrita do texto
<bl ockquot e>
Citao longa
<q>
Citao curta
<ci t e>
Citao
<df n>
Apresenta a definio de um termo
Exemplos de Aplicao
Formatao de Texto
Texto pr-formatado (controla rigorosamente as mudanas de linha e a insero de espaos)
Diversos elementos para mostrar cdigo de computador
Inserir um endereo
Abreviaes e acrnimos
Citaes extensas e curtas
Como indicar texto que foi apagado e texto que foi inserido em substituio

5.

Ligaes de HiperTexto ("links")
O HTML usa ligaes de hipertexto ("hyperlinks") para ligar as pginas da Web umas s outras.

5.1 O Elemento <a> (ncora) e o atributo href
O elemento <a> serve para criar uma ligao ("link") para outro documento. A ligao pode
apontar para qualquer recurso disponvel na Web: uma pgina escrita em HTML, uma imagem, um
arquivo de som, um filme, etc.
Sintaxe para criar uma ncora:
<a hr ef =" ur l " >Text o a most r ar </ a>
O atributo hr ef contm o endereo (URL) do recurso ao qual se faz a ligao. Aquilo que est
dentro do elemento constitui o material visvel sobre o qual se deve clicar para ligar ao recurso.
A ligao seguinte define uma ligao para o stio do W3C:
<a hr ef =" ht t p: / / www. w3. or g/ " >Si t e da W3C - Wor l d Wi de Web Consor t i um</ a>
A linha mais acima tem o seguinte aspecto no seu browser:
W3C - Site do World Wide Web Consortium
Exemplos de Aplicao
Como inserir ligaes (links)
Colocar uma ligao sobre uma imagem

5.2 O atributo target
O atributo target permite-nos abrir a ligao numa janela ou moldura ("frame") diferente daquela
em que foi feito o clique.
A linha mais abaixo vai abrir o documento numa nova janela do browser:
<a hr ef =" ht t p: / / www. w3. or g/ " t ar get =" _bl ank" >Si t e da W3C</ a>

5.3 O atributo name
O atributo name usa-se para dar um nome nico ncora. Este nome serve para marcar o lugar em
que a ncora se encontra e tornar possvel saltar diretamente para esse local a partir de outros
documentos ou de outros pontos do mesmo documento sem que o utilizador tenha de se deslocar na
pgina.
Mais abaixo temos a sintaxe de uma ncora que recebeu um nome:
<a name=" nome" >Text o a ser most r ado</ a>
O atributo name d um nome nico ao local em que se encontra a ncora. Esse nome pode ser um
texto sua escolha e no deve ser repetido em nenhuma outra ncora que esteja no mesmo
documento.
A linha seguinte define uma ncora com um nome:
<a name=" t oc" >Tabel a de Cont edos</ a>
Nota: uma ncora com atributo name no pode ter atributo hr ef . Por isso ela no sensvel a
cliques. Ela serve apenas para marcar um local do documento para o qual podem apontar outras
ligaes.
Depois de darmos um nome a um local do documento podemos ligar diretamente a ele.
Continuando com o ltimo exemplo que vimos podemos ligar seco "Tabela de Contedos"
usando uma ligao como esta:
<a hr ef =" #t oc" >I r par a a t abel a de cont edos de HTML 4. 01</ a>
Se a tabela de contedos a que queremos ligar estiver na pgina cujo URL
http://www.w3.org/TR/1999/REC-html401-19991224/cover.html basta-nos escrever esta ligao:
<a hr ef =" ht t p: / / www. w3. or g/ TR/ 1999/ REC- ht ml 401- 19991224/ cover . ht ml #t oc" >
I r par a a t abel a de cont edos da especi f i cao HTML 4. 01</ a>

Dicas
As ncoras com nomes so frequentemente usadas para criar "tabelas de contedos" no incio de um
documento extenso (a pgina do W3C indicada no exemplo anterior antes um bom exemplo
disto.) Cada captulo dentro do documento recebe uma ncora com um nome, e as ligaes
presentes na tabela de contedos referem-se a esses nomes para saltar para a seo ou captulo
pretendido.
Quando o browser recebe um clique para um local que devia conter uma ncora com um nome mas
no consegue encontrar a ncora indicada, ento salta para o topo do documento, sem gerar
qualquer erro.
Elementos para fazer ligaes
Elemento Descrio
<a>
Define uma ncora ou uma ligao de hipertexto
Exemplos de Aplicao
Como inserir ligaes (links)
Abrir uma pgina numa nova janela do browser
Saltar para um outro local dentro da mesma pgina
Como libertar uma pgina que est dentro de uma subjanela ("frame")
Como fazer uma ligao para enviar e-mail

"Uniform Resource Locators" (URLs)

5.4 Ligaes em HTML ("links")
Sempre que clicamos sobre um link que se encontra numa pgina HTML, existe um elemento <a>
que contm informao sobre o local da Web onde se encontra a pgina que vai ser mostrada a
seguir. Essa informao o endereo (URL) da nova pgina e est contida no atributo hr ef , assim:
<a hr ef =" pagi na. ht ml " >Uma Pgi na</ a>.
O link para a ligao que tem escrito "Uma pgina", que apresentado no exemplo acima, uma
ligao relativa. Isto significa que o browser constri o endereo da nova pgina baseando-se no
endereo da pgina atual.
5.5 Como se forma um URL
O conceito de Uniform Resource Locator (URL) est na base da forma como so localizados os
recursos da Web. Para acessar um recurso precisamos saber como encontr-lo. A informao que
nos permite encontr-lo est contida no seu URL.
Um URL completo (absoluto) contm o endereo completo, que comea sempre pelo protocolo
(que quase sempre ht t p: / / ), mas tambm podemos usar URLs relativos. Sempre que encontrar
um link cujo atributo href no comea por ht t p: / / o browser trata-o como um URL relativo.
Isto significa que o browser calcula o novo endereo (URL) a partir do servidor e da pasta em que
se encontra a pgina atual.
H uma exceo a esta regra: quando se usa o elemento <base>no cabealho, os URLs relativos
so calculados a partir do endereo indicado no atributo hr ef desse elemento. Um URL
composto pelas seguintes partes:
pr ot ocol o: / / subdom ni o. dom ni o: por t a/ past a/ ar qui vo
O protocolo quase sempre ht t p, mas tambm pode ser f t p ou outro que seja adequado.
O domnio uma identificao nica para o website ou a rede onde est o recurso. Por exemplo, o
domnio atribudo ao World Wide Web Consortium w3. or g
O subdomnio representa normalmente uma subrede dentro de uma rede maior, mas as coisas
podem ser mais complexas do que isso. Para aquilo que nos interessa podemos considerar que se
trata de uma identificao dada a uma parte do domnio que passa a ter um nome que permite
distingui-la das restantes. Nos primeiros tempos da Web usava-se sempre o subdomnio www para
identificar a parte da rede pertencente ao servidor da Web, mas hoje freqente no encontrar
subdomnio nenhum e subdomnios com nomes diferentes (como por exemplo
ht t p: / / yahoo. com, ou ht t p: / / msdn. mi cr osof t . com).
A porta um nmero: o nmero de porta. O software de servidor "escuta" apenas os pedidos que
so feitos atravs de uma determinada porta. Os servidores da Web em regra escutam a porta
nmero 80. Como o valor deste parmetro por omisso 80 ns no precisamos de escrev-lo
porque ele acrescentado automaticamente. Se o servidor escutar uma porta diferente ento temos
de escrever o seu nmero para que ele oua os nossos pedidos.
A parte pasta indica a pasta (ou diretrio) do servidor dentro da qual se encontra o recurso a que
queremos acessar. Se no escrevermos nenhum valor para este parmetro o servidor procura o
arquivo no diretrio raiz do website.
O parmetro arquivo contm o nome do arquivo que queremos acessar. Se no escrevermos nada o
servidor insere um valor por omisso, que normalmente i ndex. ht ml (ou def aul t . ht mnos
servidores da Microsoft) e nos apresenta essa pgina.

5.6 Protocolos de acesso
Alguns dos protocolos mais usados para aceder aos recursos da Internet so:
Fazer um download por FTP
O seguinte cdigo HTML:
<a hr ef =" f t p: / / um_ser vi dor . com/ pub/ ar qui vo. zi p" >Downl oad do ar qui vo</ a>
cria um link para um arquivo acessvel por f t p (o link que mostramos fictcio e no funciona)
Enviar uma mensagem eletrnica usando o programa de e-mail
O seguinte cdigo HTML:
<a hr ef =" mai l t o: ze_das_couves@hor t a. com" >ze_das_couves@hor t a. com</ a>
cria uma ligao que faz abrir o seu programa de e-mail com o e-mail do destinatrio j escrito.

6.

Listas
A linguagem HTML contm elementos que permitem criar listas de definies, listas ordenadas e
listas no ordenadas.

6.1 Listas No Ordenadas
Uma lista no ordenada contm vrios itens marcados todos com o mesmo smbolo (normalmente
um crculo pequeno ou um quadrado pequeno.)
Para criar uma lista no ordenada usa-se o elemento <ul >("unordered list.") Dentro desse elemento
os vrios itens so criados com o elemento <l i >("list item.") O exemplo seguinte mostra uma lista
simples:
<ul >
<l i >Rum</ l i >
<l i >Bagao</ l i >
</ ul >
Este o aspecto com que fica no seu browser:
Rum
Bagao
Dentro de uma lista no ordenada podemos colocar pargrafos, quebras de linha, imagens, outras
listas, etc.

6.2 Listas Ordenadas
Uma lista ordenada contm vrios itens numerados e criada com o elemento <ol >("ordered list.")
Os itens da lista definem-se com o elemento <l i >("list item.")
<ol >
<l i >Rum</ l i >
<l i >Bagao</ l i >
</ ol >
1. Rum
2. Bagao
Dentro de uma lista ordenada podemos colocar pargrafos, quebras de linha, imagens, outras listas,
etc.
6.3 Listas de Definies
Uma lista de definies no constituda por uma srie de itens, mas sim por vrios termos
acompanhados de descries dos seus significados.
As listas de definies criam-se com o elemento <dl >("definition list.") O nome de cada termo fica
dentro de um elemento <dt > ("definition term") e a sua descrio fica num elemento <dd>
("definition description".)
<dl >
<dt >Rum</ dt >
<dd>Bebi da espi r i t uosa mui t o apr eci ada pel os pi r at as das Car a bas</ dd>

<dt >Bagao</ dt >
<dd>Bebi da comel evado cont edo al col i co. A sabedor i a popul ar
at r i bui - l he f or t es pr opr i edades t er aput i cas. </ dd>
</ dl >
Rum
Bebida espirituosa muito apreciada pelos piratas das Carabas
Bagao
Bebida com elevado contedo alcolico. A sabedoria popular reconhece-lhe fortes
propriedades teraputicas.
Dentro de um elemento <dd>podemos colocar pargrafos, quebras de linha, imagens, outras listas,
etc.

6.4

Elementos para Listas
Elemento Descrio
<ol >
Define uma lista ordenada
<ul >
Define uma lista no ordenada
<l i >
Insere um item na lista
<dl >
Insere uma lista de definies
<dt >
Apresenta a definio de um termo
<dd>
Insere a definio de um termo
<di r >
Desaprovado. Use <ul>
<menu>
Desaprovado. Use <ul>
Exemplos de Aplicao
Uma lista ordenada
Diferentes tipos de listas ordenadas
Diferentes tipos de listas no ordenadas
Listas encaixadas
Uma lista de definies

7.

Imagens
O HTML torna muito fcil a tarefa de mostrar imagens dentro de um documento.

7.1 O elemento <img> e o atributo src
A insero de imagens num documento se faz com o elemento . Este elemento tem contedo
vazio, o que significa que ele apenas possui atributos e no tem uma tag de especfica para
fechamento.
A escolha da imagem que ser mostrada na pgina se faz atravs do atributo sr c (que uma
abreviao de "source," ou origem) o qual indica o nome e o local em que pode ser encontrado o
arquivo que contm a imagem.
O exemplo seguinte ilustra o uso deste elemento:
<ht ml >
<body>

</ body>
</ ht ml >
A forma genrica mais simples deste elemento a seguinte:

O URL aponta para o local onde se encontra o arquivo que contm a imagem. Por exemplo, se
quisermos mostrar o cone que aparece no incio de cada pgina do W3C devemos usar o URL:
ht t p: / / www. w3. or g/ I cons/ WWW/ w3c_home
A imagem ser desenhada no local que corresponde ao elemento dentro do documento
HTML.

7.2 O atributo alt
O atributo al t usa-se para definir "texto alternativo" imagem. Este texto ser mostrado em vez da
imagem no caso de o browser no conseguir apresent-la, e deve ser usado assim:

O atributo "al t " deve conter uma descrio daquilo que a imagem contm para que seja possvel
compreender o seu contedo mesmo sem a ver. A utilizao do atributo "al t " recomendada
porque melhora a acessibilidade das pginas. Este atributo pode ser lido em voz alta pelo software
de leitura utilizado pelas pessoas que tm deficincias visuais. Nesses casos, sem o atributo "al t " o
contedo das imagens seria sempre um mistrio.
Nota: Ao utilizar imagens tenha em conta que elas podem aumentar consideravelmente o tempo
que preciso esperar para ver os contedos das suas pginas: Por isso, use-as com cuidado!
7.3

Elementos relacionados com imagens
Elemento Descrio

Insere uma imagem
<map>
Define uma mapa sobre uma imagem ("image map")
<ar ea>
Define uma rea clicvel sobre um mapa de imagem
Exemplos de Aplicao
Como inserir imagens
Utilizando uma imagem de fundo
Como alinhar uma imagem com o texto
Como fazer com que uma imagem flutue esquerda ou direita de um pargrafo
Como ajustar o tamanho de uma imagem
Como juntar texto alternativo (visvel quando no possvel mostrar a imagem)
Crie um mapa sobre uma imagem com diferentes reas sensveis a cliques
7.4 O atributo bgcolor do elemento <body>
O elemento <body>possui atributos que nos permitem especificar as cores do texto e a cor de
fundo. Tambm podemos usar uma imagem como padro de fundo.
Uma cor ou uma imagem de fundo, se bem escolhidos, podem melhorar o aspecto da pgina, mas
uma m escolha capaz de causar danos muito graves na legibilidade e no aspecto geral.
O atributo bgcol or permite-nos escolher a cor de fundo da pgina. O quadro seguinte mostra trs
formas de indicar a cor de fundo da pgina usando um cdigo de cor hexadecimal um cdigo rgb e
um nome de cor (veja mais frente neste tutorial como se definem as cores.)
<body bgcol or =" #000000" >
<body bgcol or =" r gb( 0, 0, 0) " >
<body bgcol or =" bl ack" >
As linhas apresentadas mais acima usam formas diferentes (mas todas vlidas) para dar a cor preta
ao fundo da pgina.
Nota: a forma recomendada para formatar o texto e os fundos de pgina baseia-se em estilos CSS.
A utilizao do atributo bgcol or s se justifica se precisarmos de manter a compatibilidade com
browsers antigos que no suportam CSS.

7.5 O atributo background
O atributo "background" estabelece que o padro de fundo da pgina dado por uma imagem. O
valor deste atributo indica o local onde se encontra a imagem. Se as dimenses da imagem forem
inferiores s dimenses da pgina o browser repetir a imagem (como num cho de mosaicos ou
numa parede de azulejos) por forma a ocupar todo o fundo da pgina. O quadro seguinte mostra
como isso se faz:
<body backgr ound=" cl ouds. gi f " >
<body backgr ound=" ht t p: / / www. meusi t e. com. br / cl ouds. gi f " >
O valor do atributo background um URL que define o local onde pode ser encontrada a imagem.
Na primeira linha mais acima demos um URL relativo e na segunda demos um URL absoluto.
7.6 Dicas
Sempre que usar uma imagem de fundo tenha em considerao os seguintes aspectos:
Certifique-se de que o tamanho da imagem (em KBytes) no muito grande, o que
aumentaria o tempo de espera para ver a pgina.
Certifique-se de que a imagem de fundo combina bem com a cor do texto.
Certifique-se de que o fundo combina bem com as outras imagens que tem na pgina.
Verifique se da repetio a imagem de fundo em mosaico resulta um padro perfeito. Se
detectar faltas de acerto ao passar de um mosaico para o seguinte no use essa imagem.
Certifique-se de que a imagem no incomodativa e no desvia a ateno do texto.
Nota: Os atributos "bgcol or ", "backgr ound" e "t ext " do elemento <body> foram
desaprovados nas recomendaes mais recentes do W3C para a linguagem HTML (HTML 4 e
XHTML). A forma recomendada para obter os mesmos resultados baseia-se na utilizao de estilos
CSS. A utilizao destes atributos s se justifica se precisarmos de manter a compatibilidade com
browsers antigos que no suportam CSS.
So muito poucos os websites de qualidade que usam imagens de fundo, e aqueles que o fazem,
usam fundos que do pouco impacto aos olhos.
As cores de fundo mais utilizadas so: branco (a escolha mais freqente), preto e cinza.
Exemplos de Aplicao
Utilizando uma imagem como fundo de pgina.

8.

Cores
Podemos obter qualquer cor nossa escolha combinando em propores correctas trs cores base:
vermelho (red), verde (green) e azul (blue).

8.1 Formas de exprimir cores
Em CSS a forma recomendada para exprimir cores baseia-se em notao hexadecimal. Nesta forma
as cores so dadas utilizando trs nmeros em notao hexadecimal, que definem as quantidades de
vermelho, verde e azul que entram na composio de uma determinada cor.
O valor mais baixo de uma determinada cor 0 (#00 na notao hexadecimal usada em CSS) e o
valor mais alto 255 (#FF em notao hexadecimal.) Assim, a cor preta tem 0 vermelho, 0 verde e
0 azul pelo que se escreve na forma #000000. J o branco tem 255 vermelho, 255 verde e 255 azul
pelo que se escreve como #FFFFFF. O amarelo forte tem 255 de vermelho, 255 de verde e zero de
azul e escreve-se como #FFFF00.
A tabela seguinte mostra os resultados de diversas combinaes de cores:
Cor Cdigo Hexadecimal Valor RGB (decimal)

#000000 r gb( 0, 0, 0)

#FF0000 r gb( 255, 0, 0)

#00FF00 r gb( 0, 255, 0)

#0000FF r gb( 0, 0, 255)

#FFFF00 r gb( 255, 255, 0)

#00FFFF r gb( 0, 255, 255)

#FF00FF r gb( 255, 0, 255)

#C0C0C0 r gb( 192, 192, 192)

#FFFFFF r gb( 255, 255, 255)

8.2 Nomes de cores
A tabela seguinte mostra as 16 cores cujos nomes foram definidos oficialmente pelo W3C. Todos os
browsers reconhecem estes nomes pelo que pode us-los sem qualquer problema:
Cores com os nomes oficialmente atribudos
Aqua
( #00FFFF)

Bl ack
( #000000)
Bl ue
( #0000FF)
Fuchsi a
( #FF00FF)
Gr een
( #008000)

Gr ay
( #808080)
Li me
( #00FF00)
Mar oon
( #800000)
Navy
( #000080)

Ol i ve
( #808000)
Pur pl e
( #800080)
Red
( #FF0000)
Si l ver
( #C0C0C0)

Teal
( #008080)
Whi t e
( #FFFFFF)
Yel l ow
( #FFFF00)

Nota: Estes nomes de cores no esto definidos em nenhum padro do W3C. Apesar de serem
reconhecidos pelos browsers mais importantes, esse reconhecimento no exigido a nenhum
browser para estar conforme com as recomendaes oficiais. pouco provvel que nos anos mais
prximos os browsers para PDA e telefones mveis consigam reconhecer estes nomes de cor. Se
quiser garantir a apresentao correta das cores das suas pginas em todos os browsers conformes
com as normas do W3C deve usar, em vez dos nomes apresentados na tabela, os cdigos
hexadecimais apresentados junto das cores.
Cor
Cdigo
Hexadecimal
Nome da Cor

#F0F8FF Al i ceBl ue

#FAEBD7 Ant i queWhi t e

#7FFFD4 Aquamar i ne

#000000 Bl ack

#0000FF Bl ue

#8A2BE2 Bl ueVi ol et

#A52A2A Br own

8.3 Cores seguras da Web
Problemas causados por um nmero reduzido de cores
Todos os computadores modernos so capazes de mostrar dezenas de milhar ou milhes de cores
simultaneamente. Contudo, at meados da dcada de 1990 muitos sistemas apenas conseguiam
apresentar 256 cores diferentes de cada vez. Esta limitao obrigava os browsers a trabalharem com
uma paleta fixa que continha apenas 256 cores.
Os browsers eram obrigados a usar apenas 256 cores para simular todas as cores que no
conseguiam apresentar. Os efeitos destas aproximaes eram visveis na forma pontos adjacentes
com cores diferentes e de manchas de cor. Atualmente estas limitaes j quase no existem.
Como acabamos de ver, na primeira metade da dcada de 1990, a maioria dos computadores eram
capazes de apresentar apenas 256 cores diferentes de cada vez. Dessas 256 cores, os sistemas
operacionais Windows e Apple Macintosh reservavam 20 cores cada um (40 no total) para desenhar
os seus interfaces grficos. Assim, de um total de 256 cores possveis, apenas 216 podiam ser
escolhidas livremente com a garantia de poderem ser apresentadas tanto numa mquina Windows
como num Mac. Estas 216 cores receberam a designao de cores seguras da Web.
A forma encontrada para limitar as conseqncias resultantes da utilizao de uma paleta com
apenas 216 cores consiste em usar apenas cores cujos cdigos hexadecimais usam apenas
combinaes dos nmeros indicados na tabela seguinte:
RGB
0
0
51 102 153 204 255
Hex
0
0
33 66 99 CC FF
A tabela seguinte mostra-nos todas as 216 combinaes de cores que podemos formar com os
valores apresentados na tabela anterior. Estas so portanto as 216 cores seguras da Web, que
mostramos juntamente com os seus cdigos hexadecimais (o carcter # no incio foi omitido):
000000 000033 000066 000099 0000CC 0000FF
003300 003333 003366 003399 0033CC 0033FF
006600 006633 006666 006699 0066CC 0066FF
009900 009933 009966 009999 0099CC 0099FF
00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF
00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF
330000 330033 330066 330099 3300CC 3300FF
333300 333333 333366 333399 3333CC 3333FF
336600 336633 336666 336699 3366CC 3366FF
339900 339933 339966 339999 3399CC 3399FF
660000 660033 660066 660099 6600CC 6600FF
663300 663333 663366 663399 6633CC 6633FF
666600 666633 666666 666699 6666CC 6666FF
669900 669933 669966 669999 6699CC 6699FF
990000 990033 990066 990099 9900CC 9900FF
993300 993333 993366 993399 9933CC 9933FF
996600 996633 996666 996699 9966CC 9966FF
999900 999933 999966 999999 9999CC 9999FF
CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF
CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF
CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF
FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF
FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF
FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF
Atualmente qualquer mquina consegue apresentar milhes de cores diferentes ao mesmo tempo
pelo que j no precisamos de ter o cuidado de usar apenas cores seguras. Apesar disso, este tema
continua a ser focado em quase todas as introdues construo de pginas para a Web.

8.4 Formas de exprimir os valores das cores
As cores definem-se usando notao hexadecimal que exprime as quantidades de vermelho (Red),
verde (Green) e azul (Blue) que entram na sua composio. A quantidade mnima de uma dada cor
0 (#00 em notao hexadecimal) e a quantidade mxima 255 (#FF em notao hexadecimal.)
Assim, a cor branca escreve-se na forma #FFFFFF e a cor preta na forma #000000. Uma forma
mais antiga que ainda funciona a forma decimal. Na forma decimal a cor branca exprime-se como
rgb(255,255,255) e a cor preta exprime-se como rgb(0,0,0). Entre estes dois extremos temos toda a
gama de cores que podem ser apresentadas num monitor de computador.
Nada de Vermelho
Se desligarmos completamente a cor vermelha, ainda ficaremos com 65536 cores diferentes que
resultam de combinar 256 quantidades de verde com 256 quantidades de azul (65536 = 256 256).
A tabela seguinte mostra algumas destas combinaes:
003300 006600 009900 00CC00 00FF00
003333 006633 009933 00CC33 00FF33
003366 006666 009966 00CC66 00FF66
003399 006699 009999 00CC99 00FF99
0033CC 0066CC 0099CC 00CCCC 00FFCC
0033FF 0066FF 0099FF 00CCFF 00FFFF
Vermelho no mximo
Se colocarmos a quantidade de vermelho no seu valor mximo, que 255 (#FF em notao
hexadecimal) ficamos ainda com 65536 (256 x 256) cores diferentes que resultam de combinarmos
todos os valores possveis de Verde com todos os valores possveis de Azul.
A tabela seguinte mostra algumas destas combinaes:
FF3300 FF6600 FF9900 FFCC00 FFFF00
FF33CC FF66CC FF99CC FFCCCC FFFFCC
FF33FF FF66FF FF99FF FFCCFF FFFFFF
Tons de vermelho
A tabela apresentada mais abaixo mostra o que se obtm variando a quantidade de cor vermelha
desde 0 at 255 ao mesmo tempo em que se mantm a zero as quantidades de verde e de azul.
Existem 256 tons diferentes de vermelho puro e muitos outros que contm misturas de outras cores.
Tons de Vermelho Hexadecimal RGB
#000000 rgb(0,0,0)
#100000 rgb(16,0,0)
#200000 rgb(32,0,0)
#300000 rgb(48,0,0)
#400000 rgb(64,0,0)
#500000 rgb(80,0,0)
#600000 rgb(96,0,0)
#700000 rgb(112,0,0)
#800000 rgb(128,0,0)
#900000 rgb(144,0,0)
#A00000 rgb(160,0,0)
#B00000 rgb(176,0,0)
#C00000 rgb(192,0,0)
#D00000 rgb(208,0,0)
#E00000 rgb(224,0,0)
#F00000 rgb(240,0,0)
#FF0000 rgb(255,0,0)

Tons de Cinza
As cores cinzentas obtm-se combinado quantidades iguais de vermelho, verde e azul. A cor branca
corresponde ao cinzento mais claro de todos e obtm-se juntando 255 de vermelho, 255 de verde e
255 de azul (#FFFFFF em hexadecimal.) O preto o cinzento mais escuro de todos e obtm-se
colocando todas as cores a zero (#000000 em hexadecimal.) Entre estes dois valores extremos
temos 254 graus de intensidade possveis.
A tabela seguinte d uma ideia dos tons de cinzento que podemos obter:
Tons de Cinzento RGB Hexadecimal
rgb(0,0,0) #000000
rgb(16,16,16) #101010
rgb(32,32,32) #202020
rgb(48,48,48) #303030
rgb(64,64,64) #404040
rgb(80,80,80) #505050
rgb(96,96,96) #606060
rgb(112,112,112) #707070
rgb(128,128,128) #808080
rgb(144,144,144) #909090
rgb(160,160,160) #A0A0A0
rgb(176,176,176) #B0B0B0
rgb(192,192,192) #C0C0C0
rgb(208,208,208) #D0D0D0
rgb(224,224,224) #E0E0E0
rgb(240,240,240) #F0F0F0
rgb(255,255,255) #FFFFFF
8.5 Mais de 16 milhes de cores diferentes
Combinando as 256 quantidades possveis de vermelho com as 256 quantidades possveis de verde
e as 256 quantidades possveis de azul conseguimos criar mais de 16 milhes de cores diferentes
(256256256).
Praticamente todos os monitores de computador modernos esto preparados para apresentar mais de
16 milhes de cores diferentes. No entanto, preciso ter em conta que os novos terminais mveis a
cores que existem no mercado (em telefones mveis e em PDAs) em regra possuem paletas mais
reduzidas. Alguns mostram apenas 256 cores, outros 4096 ou 65536.

9.

As entidades de caracteres do HTML
Alguns caracteres, como o caractere <, tm significados especiais em HTML e por isso no podem
ser usados no cdigo fonte. Sempre que precisar de escrever um parntesis angular (< ou >) no
contedo da pgina (no para escrever uma tag) deve usar entidades de caracteres. A lista que
encontra um pouco mais abaixo contm estes e outros caracteres especiais importantes em HTML.
Entidades de caracteres
Os caracteres mais especiais em HTML so <, > e &. Sempre que precisarmos de inserir um destes
caracteres como parte do contedo de uma pgina devemos usar entidades de caracteres.
Uma entidade de carcter formada por trs partes: o smbolo &, o nome da entidade (ou o seu
cdigo numrico equivalente) e finalmente o smbolo ; (ponto e virgula.)
Temos assim que os caracteres mais especiais (entre eles temos os parntesis angulares que
representam os smbolos matemticos "menor do que" e "maior do que") so representados pelas
seguintes entidades:
Carcter Entidade correspondente
< < ("less than")
> > ("greater than")
& & (ampersand)
Um pouco mais abaixo pode ver uma lista que contm estes e outros caracteres especiais
importantes em HTML.
9.1

Entidades de caracteres mais importantes:
Resultado Descrio
Nome da
Entidade
Cdigo
Numrico

inserir espao sem mudar de linha ("non-breaking
space")

< menor do que < <
> maior do que > >
& "e" comercial & &
" aspas " "
Euro € €
Outras entidades importantes:
Resultado Descrio Nome da EntidadeCdigo Numrico
cntimo (de dollar) ¢ ¢
libra esterlina £ £
yen ¥ ¥
section § §
direitos de cpia ("copyright") © ©
marca registada ® ®
sinal de multiplicao × ×
sinal de diviso ÷ ÷

9.2 Inserir espaos sem quebras de Linha
Uma entidade de caractere que muito utilizada . Ela serve para forar o browser a inserir
um espao e probe-o de mudar de linha junto a esse espao.
<ht ml >
<body>

A segui r
t emos 5 espaos nor mai s. 
A segui r
t emos 5 espaos especi ai s. 

</ body>
</ ht ml >

Entidades de caracteres do HTML 4.01
O HTML 4.01 suporta o conjunto de caracteres ISO 8859-1 (Latin-1,) que contm os caracteres
com acentos usados pelas lnguas da Europa Ocidental. Os caracteres acentuados da lngua
portuguesa podem ser todos obtidos usando este conjunto de caracteres.

9.3 Entidades para caracteres do conjunto ASCII e os nomes definidos em HTML
Os caracteres da primeira metade do conjunto ISO-8859-1 (cdigos desde 0 a 127) so os mesmos
que os caracteres padro ASCII de 7 BITs. A maior parte destes caracteres pode ser usada
diretamente sem necessidade de recorrer a entidades porque esto sempre disponveis em todas as
mquinas qualquer que seja a sua configurao.
Os caracteres finais do conjunto ISO-8859-1 (cdigos desde 160 at 255) podem ser usados
recorrendo a nomes de entidade de carcter definidos em HTML.
Nota: os nomes das entidades so sensveis ao tipo de letra (maiscula ou minscula.)
Resultado Descrio Nome da EntidadeCdigo Numrico
" aspas " "
& "e" comercial & &
< menor do que< <
> maior do que > >

9.4

Entidades para caracteres do conjunto ISO 8859-1 (no ASCII)
Resultado Descrio
Nome da
Entidade
Cdigo
Numrico

inserir espao sem mudar de linha ("non-breaking
space")

ponto de exclamao invertido ¡ ¡
dinheiro ¤ ¤
cntimo (de dollar) ¢ ¢
libra esterlina £ £
yen ¥ ¥
barra vertical descontnua ¦ ¦
seco § §
acento direse (trema, metafonia) ¨ ¨
direitos de cpia ("copyright") © ©
ordinal feminino ª ª
abertura de aspas angulares « «
negao ¬ ¬

hfen "soft" (pode acontecer uma quebra de linha
junto ao hfen)

marca registada ® ®
sinal (acento) mcron ¯ ¯
graus ° °
mais ou menos ± ±
2 sobreescrito ² ²
3 sobreescrito ³ ³
acento agudo ´ ´
micro µ µ
pargrafo ¶ ¶
ponto a meia altura · ·
cedilha ¸ ¸
1 sobreescrito ¹ ¹
ordinal masculino º º
fechamento de aspas angulares » »
fraco 1/4 ¼ ¼
fraco 1/2 ½ ½
fraco 3/4 ¾ ¾
ponto de interrogao invertido ¿ ¿
sinal de multiplicao × ×
sinal de diviso ÷ ÷
a grande com acento grave À À
a grande com acento agudo Á Á
a grande com acento circunflexo Â Â
a grande com til Ã Ã
a grande com direse Ä Ä
a grande com anel Å Å
ae ligados, grandes Æ Æ
c grande com cedilha Ç Ç
e grande com acento grave È È
e grande com acento agudo É É
e grande com acento circunflexo Ê Ê
e grande com direse Ë Ë
i grande com acento grave Ì Ì
i grande com acento agudo Í Í
i grande com acento circunflexo Î Î
i grande com direse Ï Ï
eth grande (Islands) Ð Ð
n grande com til Ñ Ñ
o grande com acento grave Ò Ò
o grande com acento agudo Ó Ó
o grande com acento circunflexo Ô Ô
o grande com til Õ Õ
o grande com direse Ö Ö
o grande com trao oblquio Ø Ø
u grande com acento grave Ù Ù
u grande com acento agudo Ú Ú
u grande com acento circunflexo Û Û
u grande com direse Ü Ü
y grande com acento agudo Ý Ý
thorn grande (Islands) Þ Þ

carcter que representa a ligao sz, minsculo
(Alemo)
ß ß
a pequeno com acento grave à à
a pequeno com acento agudo á á
a pequeno com acento circunflexo â â
a pequeno com til ã ã
a pequeno com direse ä ä
a pequeno com anel å å
ligao ae, minscula æ æ
c pequeno com cedilha ç ç
e pequeno com acento grave è è
e pequeno com acento agudo é é
e pequeno com acento circunflexo ê ê
e pequeno com direse ë ë
i pequeno com acento grave ì ì
i pequeno com acento agudo í í
i pequeno com acento circunflexo î î
i pequeno com direse ï ï
eth pequeno (Islands) ð ð
n pequeno com til ñ ñ
o pequeno com acento grave ò ò
o pequeno com acento agudo ó ó
o pequeno com acento circunflexo ô ô
o pequeno com til õ õ
o pequeno com direse ö ö
o pequeno com trao oblquo ø ø
u pequeno com acento grave ù ù
u pequeno com acento agudo ú ú
u pequeno com acento circunflexo û û
u pequeno com direse ü ü
y pequeno com acento agudo ý ý
thorn pequeno (Islands) þ þ
y pequeno com direse ÿ ÿ

9.5

Entidades HTML no pertencentes ao conjunto ISO 8859-1
Resultado Descrio
Nome da
Entidade
Cdigo
Numrico
Modeda Euro € €

Marca para item em lista no ordenada
("bullet")
• •
Marca comercial ("Trade Mark") ™ ™
trs pontos (elipse) … …
plica ′ ′
+amp;Prime; plica dupla ″ ″
aspas (elegantes) do lado esquerdo “ “
aspas (elegantes) do lado direito ” ”
+amp;rarr; seta para a direita → →
+amp;larr; seta para a esquerda ← ←
ligao OE grande &OElig; Œ
ligao oe pequena &oelig; œ
s grande com um caron &Scaron; Š
s pequeno com um caron &scaron; š
y grande com direse &Yuml; Ÿ
carcter modificador para acento circunflexo &circ; ˆ
til pequeno &tilde; ˜
trao "en dash" – –
trao "em dash" — —
aspa esquerda simples ‘ ‘
aspa direita simples ’ ’

(X) HTML

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

(X) HTML

Enviado por

Direitos autorais:

Formatos disponíveis

Parte 1: HTML Simples

Você também pode gostar