O Guia do Iniciante em HTML

Esta � uma tradu��o do guia "A Beginner's Guide to HTML". Um guia para a cria��o de documentos em HTML, a linguagem de marca��o (markup language) usada convencionalmente pelo WWW (World Wide Web). O guia original pode ser encontrado em http://www.ncsa.uiuc.edu/demoweb/html-primer.html.

Expans�o de Acr�nimos
O Que Esse Guia N�o Cobre
Criando Documentos HTML
O Documento HTML M�nimo
Tags B�sicas
T�tulos
Cabe�alhos
Par�grafos
Liga��o com Outros Documentos
Links Relativos Versus Pathnames Absolutos
Uniform Resource Locator
�ncoras para Se��es Espec�ficas em Outros Documentos
�ncoras para Se��es Espec�ficas Dentro do Mesmo Documento
Tags Adicionais
Listas
Listas N�o Enumeradas
Listas Enumeradas
Listas de Defini��es
Listas Aninhadas
Texto Pr�-Formatado
Cita��es
Endere�os
Formata��o de Caracteres
F�sico Versus L�gico: Use Tags L�gicas Quando Poss�vel
Estilos L�gicos
Estilos F�sicos
Usando Tags de Caracter
Caracteres Especiais
Sequ�ncias de Escape
Quebra de Linha For�ada
Linhas Horizontais
Imagens Internas
Texto Alternativo para Viewers Que N�o Podem Exibir Imagens
Imagens Externas, Sons, e Anima��es
Resolu��o de Problemas
Evite Sobreposi��o de Tags
�ncoras Embutidas e Tags de Caracter, Nada Mais Al�m Disso
Cheque Seus Links
Um Exemplo Mais Detalhado
Para Maiores Informa��es
Formul�rios
Guias de Estilo
Outros Documentos Introdut�rios
Refer�ncias Adicionais
Expans�o de Acr�nimos
WWW
World Wide Web (ou abreviando, Web).
SGML
Standard Generalized Markup Language -- � um padr�o para descrever linguagens de marca��o.
DTD
Document Type Definition -- � uma linguagem de marca��o espec�fica, escrita usando SGML.
HTML
HyperText Markup Language -- HTML � um DTD em SGML. Em termos pr�ticos, o HTML � uma cole��o de estilos (indicados por tags) que definem os diversos componentes de um documento WWW. O HTML foi inventado por Tim Berners-Lee no CERN. Ele agora � diretor do W3 Consortium.
O Que Esse Guia N�o Cobre
Esse guia assume que voc� j� tem:

um conhecimento m�nimo do uso do NCSA Mosaic, Netscape ou algum outro navegador (browser) WWW
um entendimento geral de como servidores WWW e browsers clientes funcionam
acesso a um servidor WWW o qual voc� utilizar� para criar documentos HTML
Criando Documentos HTML
Os documentos HTML est�o no formato texto plano (tamb�m conhecido como ASCII ) e podem ser criados em qualquer editor de textos. Alguns navegadores de WWW j� possuem editores HTML elementares num ambiente WYSIWYG. Existem tamb�m alguns editores WYSIWIG dispon�veis.

Voc� pode visualizar documentos em desenvolvimento com o Netscape (e alguns outros navegadores WWW). Abra a op��o Open File a partir do menu File. Use os campos Drives, Directories e List Files of Type para localizar o documento ou entre com o caminho e nome do documento no campo File Name. Pressione OK.
Caso voc� tenha alguma modifica��o a fazer, edite o arquivo HTML fonte (source file), salve as altera��es. Retorne ao Netscape e pressione o bot�o Reload. As mudan�as aparecer�o na tela.

O Documento HTML M�nimo
Aqui est� um exemplo simples de HTML:

<TITLE>O exemplo mais simples de HTML</TITLE>
<H1>Este � um cabe�alho de n�vel 1</H1>
Bem-vindo ao mundo do HTML.
Este � o primeiro par�grafo.<P>
E este � o segundo par�grafo.<P>
Clique aqui para ver a vers�o formatada do exemplo.
O HTML usa tags para informar ao navegador WWW como apresentar o texto. O exemplo anterior usa:

a tag <TITLE> (e o seu correspondente </TITLE> ), que especifica o t�tulo do documento,
a tag de cabe�alho <H1> (e o seu correspondente </H1>), e
a tag de fim de par�grafo <P>.
As tags HTML consistem em um s�mbolo de "menor que" (<), seguido de algum texto (diretiva) e fechado por um s�mbolo de "maior que" (>). As tags s�o normalmente usadas aos pares, por exemplo <H1> e </H1>. As tags de finaliza��o s�o iguais �s tags de in�cio, exceto que uma barra (/) precede o texto dentro do marcador. No exemplo, a tag <H1> informa ao navegador WWW para iniciar a formata��o de um cabe�alho de n�vel 1; a tag </H1> informa ao navegador que o cabe�alho est� completo.

Uma exce��o � regra dos pares � a tag <P>. N�o � necess�rio um </P>.

NOTA: O HTML n�o � sensitivo, ou seja, n�o faz distin��o entre mai�sculas e min�sculas. <title> � completamente equivalente a <TITLE> ou <TiTlE>.

Nem todas as tags s�o suportadas por todos os browsers WWW. Se um browser n�o suporta uma tag, ele simplesmente a ignora.

Tags B�sicas
T�tulos
Todo documento HTML deve ter um t�tulo. Um t�tulo aparece geralmente separado do documento e � usado para identificar o documento em outros contextos (por exemplo, uma busca no WAIS). Escolha cerca de meia-d�zia de palavras que descrevam o prop�sito do documento.

Nas vers�es do NCSA Mosaic ou Netscape para o X-Windows e Microsoft Windows, o campo Document Title fica no topo da tela logo abaixo da barra de menus, ou na barra de t�tulo da janela.
A diretiva para a tag de t�tulo � <TITLE>. O t�tulo geralmente vem nas primeiras linhas do documento.
Cabe�alhos
O HTML tem 6 n�veis de cabe�alhos, numerados de 1 a 6, com 1 sendo o mais proeminente. Os cabe�alhos s�o mostrados em fontes maiores e/ou mais escuras que o texto normal. O primeiro cabe�alho em cada documento deve ser marcado como <H1>. A sintaxe da tag de cabe�alho �:

<Hy>Texto do cabe�alho </Hy>

onde y � um n�mero entre 1 e 6 especificando o n�vel do cabe�alho.

Por exemplo, o c�digo para a se��o "Cabe�alhos" acima �

<H3>Cabe�alhos</H3>
T�tulo versus primeiro cabe�alho
Em muitos documentos, o primeiro cabe�alho � igual ao t�tulo. Para os documentos com v�rias partes, o texto do primeiro cabe�alho deve ser adequado para um leitor que j� esteja navegando pela referida informa��o (por exemplo, um t�tulo de um cap�tulo), enquanto que a tag do t�tulo deve identificar o documento em um contexto maior (por exemplo, incluir o t�tulo do livro e do cap�tulo, embora isto pode tornar-se excessivamente longo).

Par�grafos
Diferente dos documentos da maioria dos processadores de textos, os caracteres de carriage return e espa�o em branco n�o s�o significativos. A quebra do texto pode ocorrer em qualquer ponto do seu arquivo, e espa�os m�ltiplos s�o colapsados em um �nico espa�o (Existem exce��es; o espa�o entre a tag <P> ou <Hy >, por exemplo, � ignorado). Note que no primeiro exemplo, o primeiro par�grafo est� codificado como

Bem-vindo ao mundo do HTML.
Este � o primeiro par�grafo.<P>
No arquivo fonte, existe uma quebra de linha entre as senten�as. O navegador Web ignora esta linha e s� inicia um novo par�grafo somente quando achar uma tag <P>.

Importante: Voc� deve separar cada par�grafo com <P>. O navegador ignora quaisquer indenta��es ou linhas em branco no texto original. O HTML se baseia quase que exclusivamente nas tags para fazer a formata��o das instru��es, e sem as tags <P>, o documento torna-se um grande �nico par�grafo (a exce��o � o texto marcado como "pr�-formatado", explicado abaixo). Por exemplo, as senten�as a seguir produzem uma sa�da id�ntica ao primeiro exemplo HTML:

<TITLE>O exemplo mais simples de HTML</TITLE><H1>Este � um
cabe�alho de n�vel 1</H1>Bem-vindo ao mundo do HTML. Este � o primeiro
par�grafo.<P>E este � o segundo par�grafo.<P>
Entretanto, para preservar a legibilidade dos arquivos HTML, os cabe�alhos devem ficar em linhas separadas, e os par�grafos devem vir separados por linhas em branco (al�m das tags <P>).

Quando o navegador encontra a tag <P>, finaliza o par�grafo atual e insere uma linha em branco.
No HTML+, um sucessor do HTML ainda em desenvolvimento, a tag <P> se torna um container de texto, assim como acontece com o texto de um cabe�alho n�vel 1 contido entre <H1> ... </H1>:

<P>
Isto � um par�grafo no HTML+.
</P>
A diferen�a � que a tag de t�rmino </P> pode sempre ser omitida. Se um navegador encontra uma tag <P>, ele sabe que deve haver um </P> impl�cito no fim do par�grafo. Em outras palavras, no HTML+, a tag <P> � um marcador de in�cio de par�grafo.

A vantagem dessa mudan�a � que voc� pode especificar op��es de formata��o para um determinado par�grafo. Por exemplo, no HTML+, voc� pode centralizar um par�grafo escrevendo

<P ALIGN=CENTER>
Isto � um par�grafo centralizado.
Esta mudan�a n�o afetar� nenhum os documentos que voc� tenha escrito, eles continuar�o com a mesma apar�ncia nos navegadores HTML+.

Liga��o com Outros Documentos
Esta grande caracter�stica do HTML vem de sua habilidade em ligar regi�es de texto (e imagens tamb�m) a outros documentos. O navegador destaca estas regi�es (com outras cores e/ou sublinhados) para indicar que s�o links de hipertextos (geralmente abreviados como hyperlinks ou simplesmente links).

A tag para refer�ncias de hipertexto � o <A>, que insere uma �ncora. Para incluir uma �ncora em seu documento:

Inicie a �ncora com <A (ponha um espa�o ap�s o A).
Especifique o documento que ser� apontado escrevendo o par�metro HREF="NomeDoArquivo" seguidos de um s�mbolo de "maior que": >
Escreva o texto que servir� como link do hipertexto no documento corrente.
Ponha a tag para terminar a �ncora: </A>.
Veja um exemplo:

<A HREF="MaineStats.html">Maine</A>
Esta entrada transforma a palavra "Maine" no hiperlink para o documento MaineStats.html, que est� no mesmo diret�rio que primeiro documento. Voc� pode ligar documentos em outros diret�rios especificando o path relativo do documento corrente para o documento a ser ligado. Por exemplo, um link para um arquivo NJStats.html localizado no subdiret�rio AtlanticStates seria:

<A HREF="AtlanticStates/NJStats.html">New Jersey</A>
Estes s�o chamados de links relativos. Voc� tamb�m pode usar o pathname absoluto do arquivo se desejar. Note, os pathnames devem ser escritos na sintaxe padr�o do UNIX.

Links Relativos Versus Pathnames Absolutos
Em geral, voc� deve usar os links relativos pois

Voc� escreve menos.
� mais f�cil mover um grupo de documentos de um lugar para outro, porque os pathnames relativos continuar�o v�lidos.
Entretanto, usa-se pathnames absolutos para ligar documentos que n�o est�o diretamente relacionados. Por exemplo, considere um grupo de documentos que formam um manual de usu�rio. Os links dentro desse grupo devem ser relativos. Os links para outros documentos (talvez uma refer�ncia para um software relacionado) devem usar pathnames completos. Assim, se voc� mover o manual para um diret�rio diferente, nenhum dos links precisar�o ser atualizados.

Uniform Resource Locator
O WWW usa os Uniform Resource Locators (URLs) para especificar a localiza��o de arquivos em outros servidores. Um URL inclui o tipo do recurso que est� sendo acessado (por exemplo, gopher, WAIS), o endere�o do servidor, e a localiza��o do arquivo. A sintaxe �:

tipo://host.dom�nio[: porta]/path/ NomeDoArquivo

Onde tipo � um destes

file
um arquivo no seu sistema local, ou em um servidor FTP anonymous
http
um arquivo no servidor WWW
gopher
um arquivo no servidor Gopher
WAIS
um arquivo no servidor WAIS
news
um newsgroup da Usenet
telnet
uma conex�o com um servi�o do tipo TELNET
O n�mero port pode ser omitido (a menos que algu�m diga o contr�rio, esque�a).

Por exemplo, para incluir um link para este guia no seu documento, voc� pode usar

<A HREF = "http://www.ncsa.uiuc.edu/General/Internet/WWW/
HTMLPrimer.html">
NCSA's Beginner's Guide to HTML</A>
Isto faz com que o texto "NCSA's Beginner's Guide to HTML" seja um hyperlink para este documento.

Para mais informa��es sobre URLs, veja em

Nomes e Endere�os WWW, URIs, URLs, URNs, escrito pelo pessoal do CERN
A Beginner's Guide to URLs, localizado no menu Help do NCSA Mosaic
�ncoras para Se��es Espec�ficas em Outros Documentos
As �ncoras tamb�m podem ser usadas para ir para uma determinada se��o em um documento. Suponha que voc� queira fazer uma liga��o entre um documento A e uma se��o espec�fica no documento B (chame este arquivo de documentB.html). Inicialmente, voc� precisa definir uma �ncora no documento B. Por exemplo, para definir uma �ncora chamada de "Jabberwocky" no documento B, escreva

Aqui est� <A NAME = "Jabberwocky">algum texto</A>
Agora, quando voc� criar a liga��o no documento A, inclua n�o apenas o nome do arquivo, mas tamb�m a respectiva �ncora, separados por tralha (#).

Este � o meu <A HREF = "documentB.html#Jabberwocky">link</A>
para o documento B.
Clicando sobre a palavra "link" no documento A, o navegador Web transfere o leitor diretamente para as palavras "algum texto" no documento B.

�ncoras para Se��es Espec�ficas Dentro do Mesmo Documento
A t�cnica � exatamente a mesma, exceto que o nome do arquivo � omitido.

Por exemplo, para ligar � �ncora "Jabberwocky" de dentro do mesmo arquivo (documento B), use

Este � o <A HREF = "#Jabberwocky">link Jabberwocky</A>
de dentro do documento B.
Tags Adicionais
O texto anterior � suficiente para produzir documentos HTML simples. Para documentos mais complexos, o HTML fornece tags para v�rios tipos de listas, se��es pr�-formatadas, cita��es, formata��o de caracteres, e outros itens.

Listas
O HTML suporta listas n�o enumeradas, enumeradas, e listas de defini��es.

Listas N�o Enumeradas
Para construir uma lista n�o enumerada,

Inicie com uma tag <UL> para abrir a lista.
Ponha a tag <LI> seguida pelo item (n�o � necess�rio a tag </LI> para fechar).
Finalize com uma tag </UL> para fechar a lista.
Abaixo um exemplo de lista com dois itens:

<UL>
<LI> ma��s
<LI> bananas
</UL>
A sa�da �:

ma��s
bananas
Os itens <LI> podem conter v�rios par�grafos. Apenas separe os par�grafos com as tags de par�grafo <P>.

Listas Numeradas
Uma lista numerada (tamb�m chamada de lista ordenada, da qual o nome deriva) � id�ntica a uma lista n�o enumerada, exceto que usa <OL> ao inv�s de <UL>. Os itens s�o marcados usando-se a mesma tag <LI>. O seguinte c�digo HTML

<OL>
<LI> laranjas
<LI> p�ssegos
<LI> uvas
</OL>
produz essa sa�da formatada:

laranjas
p�ssegos
uvas
Listas de Defini��es
Uma lista de defini��o consiste de um termo (abreviado como DT) e uma defini��o (abreviado como DD). Os browsers WWW geralmente formatam a defini��o em uma nova linha.

A seguir, um exemplo de uma lista de defini��es:

<DL>
<DT> NCSA
<DD> O NCSA, National Center for Supercomputing Applications,
� localizado no campus da Universidade de Ilinois
em Urbana-Champaign. O NCSA � um dos participantes do
National MetaCenter for Computational Science and Engineering.
<DT> Cornell Theory Center
<DD> O CTC est� localizado no campus da Universidade de Cornell
em Ithaca, Nova Iorque. O CTC � um outro participante do
National MetaCenter for Computational Science and Engineering.
</DL>
A sa�da fica:

NCSA
O NCSA, National Center for Supercomputing Applications, � localizado no campus da Universidade de Ilinois em Urbana-Champaign. O NCSA � um dos participantes no National MetaCenter for Computational Science and Engineering.
Cornell Theory Center
O CTC est� localizado no campus da Universidade de Cornell em Ithaca, Nova Iorque. O CTC � um outro participante do National MetaCenter for Computational Science and Engineering.
As entradas <DT> e <DD> podem conter m�ltiplos par�grafos (separados pelas tags de par�grafo <P>), listas, ou outras defini��es.

Listas Aninhadas
Listas podem ser sucessivamente aninhadas, embora na pr�tica voc� deva limitar o aninhamento a tr�s n�veis. Em um mesmo item de lista, podem existir v�rios par�grafos, cada qual contendo uma lista aninhada.

Um exemplo de lista aninhada:

<UL>
<LI> Alguns estados do Nordeste:
<UL>
<LI> Bahia
<LI> Pernambuco
</UL>
<LI> Um estado do Centro-Oeste:
<UL>
<LI> Goi�s
</UL>
</UL>
A lista aninhada � exibida assim

Alguns estados do Nordeste:
Bahia
Pernambuco
Um estado do Centro-Oeste:
Goi�s
Texto Pr�-Formatado
Use a tag <PRE> (que significa "preformatado") para gerar texto com fonte de largura fixa e permitir que espa�os, quebras de linha, e tabs sejam reconhecidos. Ou seja, m�ltiplos espa�os aparecem como m�ltiplos espa�os, e as quebras linha acontecem na mesma posi��o do arquivo HTML fonte. Isto � �til para listagem de programas. Por exemplo, as seguintes linhas

<PRE>
#!/bin/csh
cd $SCR
cfs get mysrc.f:mycfsdir/mysrc.f
cfs get myinfile:mycfsdir/myinfile
fc -02 -o mya.out mysrc.f
mya.out
cfs save myoutfile:mycfsdir/myoutfile
rm *
</PRE>
aparecem como

#!/bin/csh
cd $SCR
cfs get mysrc.f:mycfsdir/mysrc.f
cfs get myinfile:mycfsdir/myinfile
fc -02 -o mya.out mysrc.f
mya.out
cfs save myoutfile:mycfsdir/myoutfile
rm *
Hiperlinks podem ser usados dentro de se��es <PRE>. Entretanto, deve-se evitar usar tags HTML dentro de se��es <PRE>.

Note que devido <, >, e & terem significado especial em HTML, voc� tem que usar suas respectivas sequ�ncias de escape ( &lt;, &gt;, e &amp;, respectivamente) para escrever estes caracteres. Veja a se��o Caracteres Especiais para mais informa��es.

Cita��es
Use a tag <BLOCKQUOTE> para incluir cita��es em um bloco separado na tela. A maioria dos browsers geralmente indentam o bloco para separ�-lo do texto ao redor.

Um exemplo:

<BLOCKQUOTE>
I still have a dream. It is a dream deeply rooted in the
American dream. <P>
I have a dream that one day this nation will rise up and
live out the true meaning of its creed. We hold these truths
to be self-evident that all men are created equal. <P>
</BLOCKQUOTE>
O resultado �:

I still have a dream. It is a dream deeply rooted in the American dream.
I have a dream that one day this nation will rise up and live out the true meaning of its creed. We hold these truths to be self-evident that all men are created equal.

Endere�os
A tag <ADDRESS> � geralmente usada para especificar o autor de um documento e um meio de contactar o autor (por exemplo, um endere�o de email). Normalmente � o �ltimo item em um arquivo.

Por exemplo, a �ltima linha da vers�o online desse guia �

<ADDRESS>
O Guia do Iniciante em HTML / UERJ / [email protected]
</ADDRESS>
O resultado �

O Guia do Iniciante em HTML / UERJ / [email protected]
NOTA: A tag <ADDRESS> n�o � usada para endere�os postais. Veja "Quebra de Linha For�ada" para ver como formatar endere�os postais.

Formata��o de Caracteres
Voc� pode escrever palavras ou senten�as com estilos especiais. Existem dois tipos de estilos: l�gico e f�sico. Os estilos l�gicos marcam o texto de acordo com o seu significado, enquanto estilos f�sicos especificam a apar�ncia de uma se��o. Por exemplo, na frase anterior, as palavras "estilos l�gicos" foram marcadas como uma "�nfase". O mesmo efeito (formatar essas palavras em it�lico), poderia ser conseguido via uma tag diferente que especificasse apenas "coloque estas palavras em it�lico".

F�sico Versus L�gico: Use Tags L�gicas Quando Poss�vel
Se os estilos l�gico e f�sico produzem o mesmo resultado na tela, porque existem os dois? N�s mencionamos, por alguns par�grafos, a filosofia do SGML, que pode ser resumida num numa esp�cie de mantra Zen: "Confie no seu browser".

No universo SGML ideal, o conte�do � desvinculado da apresenta��o. Assim, o SGML marca um cabe�alho de n�vel um como tal, mas n�o especifica como o cabe�alho de n�vel um deve ser, por exemplo, Times bold 24 pontos centralizado no topo da p�gina. A vantagem dessa abordagem (� similar ao conceito de estilos em muitos processadores de texto) � que se voc� decidir trocar a formata��o dos cabe�alhos de n�vel um para Helv�tica 20 pontos justificado � esquerda, tudo o que se tem a fazer � mudar a defini��o no seu browser WWW.

A outra vantagem de tags l�gicas � que elas for�am a consist�ncia nos seus documentos. � mais f�cil marcar algo como <H1> do que lembrar que cabe�alhos de n�vel um s�o Times 24 pontos ou o que quer que seja. O mesmo acontece para estilos de caracteres. Por exemplo, considere a tag <STRONG>. A maioria dos browsers a representam como texto em bold. Contudo, � poss�vel que um leitor prefira que estas se��es apare�am em vermelho. Estilos l�gicos oferecem essa flexibilidade.

Estilos L�gicos
<DFN>
para uma palavra a ser definida. Normalmente exibida em it�lico. (NCSA Mosaic � um browser WWW).
<EM>
para �nfase. Normalmente exibido em it�lico. (Tome cuidado com batedores de carteira).
<CITE>
para t�tulo de livros, filmes, etc. Normalmente exibido em it�lico (O Guia do Iniciante em HTML).
<CODE>
para fragmentos de c�digo de computador. Exibido numa fonte de tamanho fixo. (O arquivo de header <stdio.h>).
<KBD>
para entrada de teclado do usu�rio. Deveria ser exibido em uma fonte bold de tamanho fixo, mas muitos browsers o representam numa fonte plana de tamanho fixo. (Digite passwd para trocar sua password).
<SAMP>
para mensagens de status de computador. Exibido numa fonte de tamanho fixo. (Segmentation fault: Core dumped).
<STRONG>
para �nfases fortes. Normalmente exibido em bold. (Importante).
<VAR>
para uma vari�vel "metasint�tica", quando o usu�rio deve substituir a vari�vel por uma determinada inst�ncia. Normalmente exibido em it�lico. (rm filename deleta o arquivo).
Estilos F�sicos
<B>
texto em bold
<I>
texto em it�lico
<TT>
texto datilografado, por exemplo fonte de tamanho fixo.
Usando Tags de Caracter
Para impor um estilo de caracter,

Inicie com <tag>, onde tag � a tag de formata��o de caracter desejada, para indicar o in�cio do texto formatado.
Escreva o texto.
Finalize a transcri��o com </tag>.
Caracteres Especiais
Sequ�ncias de Escape
Quatro caracteres do conjunto de ASCII -- o "menor que" (<), o "maior que" (>), o ampersand (&) e as aspas (") -- tem significado especial dentro do HTML e portanto n�o podem ser usados diretamente no texto (o "maior que" e "menor que" s�o usados para indicar o in�cio e fim de tags HTML, e o ampersand � usado para indicar o in�cio de uma sequ�ncia de escape).

Para usar um desses caracteres em um documento HTML, voc� deve escrever suas respectivas sequ�ncias de escape:

&lt;
a sequ�ncia de escape para <
&gt;
a sequ�ncia de escape para >
&amp;
a sequ�ncia de escape para &
&quot;
a sequ�ncia de escape para "
Existem outras sequ�ncias de escape que aceitam caracteres acentuados. Por exemplo:

&ouml;
a sequ�ncia de escape para um "o" min�sculo com trema (umlaut): �
&ntilde;
a sequ�ncia de escape para um "n" min�sculo com til (tilde): �
&Egrave;
a sequ�ncia de escape para um "E" mai�sculo com acento grave: �
Uma lista completa dos caracteres suportados est� dispon�vel.

NOTA: Diferente do resto do HTML, as sequ�ncias de escape s�o sensitivas. Voc� n�o pode, por exemplo, usar &LT; ao inv�s de &lt;.

Quebra de Linha For�ada
A tag <BR> for�a uma quebra de linha sem espa�o extra entre as linhas (a maioria dos browsers formatam a tag de par�grafo <P> com uma linha em branco a mais para indicar mais claramente o in�cio do novo par�grafo).

Um uso para <BR> est� na formata��o de endere�os:

National Center for Supercomputing Applications<BR>
605 East Springfield Avenue<BR>
Champaign, Illinois 61820-5518<BR>
Linhas Horizontais
A tag <HR>; produz uma linha horizontal com a largura da janela do browser.

Imagens Internas
A maioria dos browsers pode exibir imagens internas (isto �, imagens junto ao texto) que estejam no formato X Bitmap (XBM) ou GIF. Cada imagem leva um tempo para ser carregada o que retarda a exibi��o inicial do documento, assim normalmente voc� n�o deve incluir muitas imagens ou imagens demasiadamente grandes.

Para incluir uma imagem interna, use

<IMG SRC=image_URL>
onde image_URL � a URL do arquivo que cont�m a imagem. A sintaxe IMG SRC para URLs � id�ntica � usada em uma �ncora HREF. Se a imagem for um arquivo GIF, ent�o a parte do filename do arquivo em image_URL tem que terminar com .gif. Filenames de imagens X Bitmap tem terminar com .xbm.

Por default a parte inferior de uma imagem � alinhada com o texto como mostrado nesse par�grafo.

Adicione a op��o ALIGN=TOP se quiser que o browser alinhe o texto adjacente com o topo da imagem como mostrado nesse par�grafo. A tag completa de imagem interna com alinhamento pelo topo �:

<IMG ALIGN=top SRC=image_URL>
ALIGN=MIDDLE alinha o texto com o centro da imagem.

Texto Alternativo para Viewers Que N�o Podem Exibir Imagens
Alguns browsers WWW, principalmente aqueles que executam em terminais VT100, n�o podem exibir imagens. A op��o ALT permite especificar um texto a ser exibido quando uma imagem n�o puder. Por exemplo:

<IMG SRC = "UpArrow.gif" ALT = "Up">
onde UpArrow.gif � a figura de uma seta para cima. Com o NCSA Mosaic e outros viewers que exibem gr�ficos, o usu�rio v� a seta gr�fica. Com um browser VT100, tal como Lynx, o usu�rio v� a palavra "Up".

Imagens Internas, Sons e Anima��es
Voc� pode querer ter uma abertura de imagem como um documento separado que � carregado quando um usu�rio ativa um link atrav�s de uma palavra ou uma outra vers�o da imagem, interna e menor, inclu�da no seu documento. Isso � considerado uma imagem externa e � �til caso voc� n�o deseje retardar a carga do documento principal com imagens internas grandes.

Para incluir uma refer�ncia para uma imagem interna, use

<A HREF = image_URL>�ncora para o link</A>
Use a mesma sintaxe em links para anima��es externas e sons. A �nica diferen�a � a extens�o do arquivo ligado. Por exemplo,

<A HREF = "QuickTimeMovie.mov">�ncora para o link< /A>

especifica um link para o filme QuickTime. Alguns tipos comuns de arquivos e suas extens�es s�o:

Tipo de Arquivo
Extens�o
Texto plano
.txt
documento HTML
.html
imagem GIF
.gif
imagem TIFF
.tiff
imagem XBM bitmap
.xbm
imagem JPEG
.jpg ou .jpeg
arquivo PostScript
.ps
som AIFF
.aiff
som AU
.au
filme QuickTime
.mov
filme MPEG
.mpeg ou .mpg
Certifique-se que os tipos de arquivos pretendidos tenham os viewers necess�rios. A maioria das workstations UNIX, por exemplo, n�o podem exibir filmes QuickTime.

Resolu��o de Problemas
Evite Sobreposi��o de Tags
Considere esse fragmento de HTML:

<B>Este � um exemplo de <DFN>sobreposi��o</B> de tags HTML.</DFN>
A palavra "sobreposi��o" est� contida dentro das tags <B> e <DFN>. Como o browser far� a formata��o? Voc� n�o saber� at� ver, e diferentes browsers provavelmente v�o reagir de maneira diferente. Em geral, evite sobreposi��o de tags.

�ncoras Embutidas e Tags de Caracter, Nada Mais Al�m Disso
� poss�vel embutir �ncoras dentro de outro elemento HTML:

<H1><A HREF = "Destination.html">Meu cabe�alho</A></H1>
N�o insira um cabe�alho ou outro elemento HTML dentro de uma �ncora:

<A HREF = "Destination.html">
<H1>Meu cabe�alho</H1>
</A>
Embora a maioria dos browsers tratem esse caso, ele n�o foi considerado nas especifica��es oficiais HTML e HTML+, e n�o funcionar� com os browsers futuros.

Tags de caracter modificam a apar�ncia de outras tags:

<UL><LI><B>Um item de lista bold</B>
<UL>
<LI><I>Um item de lista it�lico</I>
</UL>
Contudo, evite inserir outros tipos de tags HTML. Por exemplo, � tentador inserir um cabe�alho dentro de uma lista, de maneira a tornar o tamanho da fonte maior:

<UL><LI><H1>Um cabe�alho grande</H1>
<UL>
<LI><H2>Algo um pouco menor</H2>
</UL>
Embora alguns browsers, tal como NCSA Mosaic para X Window, formatem esta constru��o satisfatoriamente, � imprevis�vel (porque n�o est� definido) o que os outros browsers far�o. Por compatibilidade com todos os browsers, evite esses tipos de constru��es.

Qual a diferen�a entre inserir um <B> dentro de uma tag <LI> em compara��o a inserir <H1> dentro de <LI>? Isso � novamente uma quest�o do SGML. O significado sem�ntico de <H1> � que ele � o cabe�alho principal de um documento e que deve ser acompanhado pelo conte�do do documento. Assim, n�o faz sentido encontrar <H1> dentro de uma lista.

Tags de formata��o de caracteres s�o geralmente n�o acumulativas. Voc� poderia esperar que

<B><I>algum texto</I></B>
pudesse produzir texto bold-it�lico. Em alguns browsers isso ocorre; outros interpretam apenas a tag mais interna (aqui, o it�lico).

Cheque Seus Links
Quando uma tag <IMG> aponta para uma imagem que n�o existe, ela � substitu�da por uma imagem fict�cia. Quando isso acontece, certifique-se que a imagem referenciada de fato existe, que o hiperlink tem a informa��o correta na URL, e que a permiss�o do arquivo est� configurada apropriadamente (p�blica).

Um Exemplo Mais Detalhado
Aqui est� um exemplo de um documento HTML:

<HEAD>
<TITLE>Um Exemplo Mais Detalhado</TITLE>
</HEAD>
<BODY>
<H1>Um Exemplo Mais Detalhado</H1>
Este � um simples documento HTML. Este � o primeiro
par�grafo. <P>
Este � o segundo par�grafo, que mostra efeitos especiais. Esta �
uma palavra em <I>it�lico</I>. Esta � uma palavra em <B>bold</B>.
Aqui est� uma imagem GIF interna: <IMG SRC = "myimage.gif">
<P>
Este � o terceiro par�grafo, que demonstra links. Aqui est�
um link da palavra <A HREF = "subdir/myfile.html">bl�bl�bl�</A>
para um documento chamado "subdir/myfile.html" (se voc�
tentar entrar nesse link, voc� receber� uma tela de erro). <P>
<H2>Um cabe�alho de segundo n�vel</H2>
Aqui est� uma se��o de texto que deve aparecer com uma
fonte de tamanho fixo: <P>
<PRE>
On the stiff twig up there
Hunches a wet black rook
Arranging and rearranging its feathers in the rain ...
</PRE>
Isto � uma lista n�o enumerada com dois itens: <P>
<UL>
<LI> uvas
<LI> cerejas
</UL>
Este � o fim do meu documento exemplo. <P>
<ADDRESS>Eu ([email protected])</ADDRESS>
</BODY>
Clique aqui para ver a vers�o formatada.
Al�m das tags j� discutidas, este exemplo tamb�m usa as tags <HEAD> ... </HEAD> e <BODY> ... </BODY>, que separam o documento em informa��o introdut�ria sobre o documento e o texto principal do documento. Essas tags n�o mudam a apar�ncia do documento formatado como um todo, mas s�o �teis para v�rios prop�sitos (por exemplo, o NCSA Mosaic para Macintosh 2.0, permite a voc� navegar apenas pelo cabe�alho do documento antes de decidir carregar o resto), e � recomendado que voc� use essas tags.

Para Maiores Informa��es
Esse guia � somente uma introdu��o ao HTML e n�o uma refer�ncia completa. Abaixo est�o fontes adicionais de informa��o.

Formul�rios
Uma importante caracter�stica n�o discutida aqui s�o os formul�rios, que permite a usu�rios devolver informa��o ao servidor WWW. Para informa��es sobre formul�rios, olhe em Fill-out Forms Overview

Guias de Estilo
Os seguintes oferecem informa��o de como escrever um "bom" HTML:

Composing Good HTML
Guia de estilo do CERN para hipertexto online
Outros Documentos Introdut�rios
Estes cobrem informa��o similar a esse guia:
How to Write HTML Files
Introduction to HTML
Refer�ncias Adicionais
The HTML Quick Reference Guide, fornece uma listagem completa de c�digos HTML
The official HTML specification
A description of SGML, the Standard Generalized Markup Language
The HTML Working Group of the IETF
National Center for Supercomputing Applications / [email protected]