Guia Prático de HTML

As pessoas imaginam que é muito dif íci l construir um site. Isto não é
verdade!! Qualquer um pode aprender como construir uma página. Se você
continuar lendo, estará apto a construir um rapidamente, quando menos
esperar.
Outros pensam – er roneamente – que será necessário softwares avançados e
caros para const rui r websi tes. É verdade que existem muitos sof twares
capazes de cr iar um websi te para você. Alguns mais fechados que out ros.
Mas, se você pretende trilhar o caminho certo, deverá criar você mesmo o
website. Felizmente, isto é simples é você já tem a sua disposição todos os
softwares que necessi ta.
O objet ivo desta minha apost ila é fornecer os conhecimentos básicos que
permitirão construi r um website de forma cor reta. A apostila parte da estaca
zero e não requer qualquer conhecimento prévio de programação.
Obviamente, a apostila não ensina tudo. Diante disto, será necessár io que
você se empenhe, pratique e consolide os ensinamentos aqui contidos. Mas,
não se abor reça, pois aprender como construir um website é bem divert ido e
bastante satisfatório quando você tr i lha o caminho certo do aprendizado.
OK. Chega de conversa. Vamos começar…
2. SOBRE O HTML
O HTML é uma Linguagem de marcação de texto. Mais especificamente,
uma linguagem de marcação de hiper texto. Portanto, antes de começar a falar
de HTML, vamos entender o que vem a ser uma linguagem de marcação.
Linguagens de marcação (markup languages em inglês) são l inguagens que
combinam texto com informações extras sobre o texto. Essa informação extra
pode ser representada por diversos símbolos ou palavras-chave diferentes,
dependendo da l inguagem de marcação com que est ivermos trabalhando.
O HTML não era uma l inguagem de formatação de textos qualquer, ela
possibilitava l igar textos que estavam num computador a textos que estavam
num outro computador, usando como meio a internet. O processador e
visualizador de HTML são chamados de navegador , pela característica do
hiper texto que permite ao usuário “nadar” na informação.
O navegador (também chamado de browser ) , nada mais faz do que abrir
arquivos de computador e, caso esses arquivos contenham códigos HTML,
interpretá-los segundo o padrão do hipertexto e gerar a “página html “, que é
a manifestação gráf ica dos códigos – aquilo que você usualmente vê quando
navega pela internet . Por convenção, os nomes dos arquivos em HTML
terminam com .html. Exemplo: index.html, foo.bar.html e etc.hml
(existem também arquivos html que terminam com .shtml e out ras extensões
malucas) . Observe que esses arquivos podem estar tanto no computador do
usuár io que usa o navegador quanto em out ros computadores: o navegador é
capaz de abri r esses arquivos desde que eles estejam acessíveis – as tais
páginas web.

3. SUA PRIMEIRA PÁGINA EM HTML
Uma página HTML é dividida em duas par tes, a cabeça e o corpo. Na cabeça
(ou cabeçalho) são def inidos os atr ibutos pr incipais do documento, como o
t í tulo e as palavras-chave. O corpo contém a parte visível do documento, i.e,
aquela que você verá processada em seu navegador . Existe ainda uma região
da página que está tanto fora da cabeça quanto do corpo (não! não é a falta
de juízo!) , mas não i remos ent rar nesse mér i to.

3.1 – O que está dentro de um arquivo em HTML?!
· Um arquivo HTML é const ituído por textos que def inem os elementos da
l inguagem HTML usando “et iquetas de marcação” ;
· As et iquetas de marcação dão instruções ao navegador sobre a
est rutura do documento e sobre a forma de como a página deve ser
apresentada graf icamente;
· Os arquivos HTML podem ser escri tos usando um simples editor de
textos e seus nomes devem possui r a extensão .html
3.2 – Experimente você mesmo
Bom, se você ut il iza o Windows (95, 98, 2000, XP, etc) , inicie o Bloco de
Notas (Notepad).
Agora digi te o seguinte texto:

<html>
<head>
<t i t le> Tí tulo da Página </ t i t le>
</head>
<body>
Es ta é minha pr imei ra página. <b>Es te tex to es tá em negr i to</b>
</body>
</html>
Salve este arquivo com o nome index.htm
Abra o seu navegador. Agora abra o arquivo que você salvou acima, chamado
index.htm ut i l izando as opções do menu ou ar rastando o ícone do arquivo
para dentro da janela do navegador. Observe o resultado.
3.3 – Explicação do Exemplo
A pr imei ra tag em seu documento HTML é <html>. Esta tag define o início de
um documento HTML e indica ao navegador que todo conteúdo poster ior deve
ser t ratado como uma sér ie de códigos HTML. A últ ima tag em seu documento
deverá ser </html>. Esta tag indica ao navegador que é o f im de seu
documento HTML.
O texto ent re as tags <head> … </head> é a informação do cabeçalho.
Nenhuma informação contida no cabeçalho é exibida na janela do navegador.

O texto ent re as tags <title> … </title> é o t ítulo de seu documento. O
t í tulo será exibido na legenda do navegador, na parte de cima do browser.
O texto ent re as tags <body> … </body> são as informações que serão
exibidas na página.
O texto entre <b> … </b> f icará com o est i lo Negri to (Bold)
3.4 – Devemos usar a extensão .htm ou .html?
Os nomes dos arquivos escr itos em HTML devem ter a extensão .html, mas a
extensão .htm ainda é ut il izada. Este fato é uma herança dos tempos (préhistóricos
no que diz respei to à Internet) do MS-DOS e do Windows 16 bits,
em que os nomes dos arquivos t inham no máximo 8 caracteres e as suas
extensões não podiam ter mais de 3 caracteres.
Essas def iciências, que no passado obr igaram a usar a extensão .htm em vez
de .html já foram eliminadas. Por isso devemos usar a extensão .html, a não
ser que exista uma boa razão para você estar ut i lizando .htm (pouco
provável ).
3.5 – Editores “Puros” versus WYSIWYG
Existem duas formas de se cr iar um texto formatado at ravés de linguagens de
marcação. A pr imeira consiste em escrever o texto, usando as inst ruções da
l inguagem, num editor de texto puro. Em seguida, usa-se o processador de
texto para produzir o texto formatado.
A out ra manei ra é usar um editor de textos WYSIWYG (What You See Is
What You Get – O Que Você Vê É O Que Você Tem). Apesar da sigla ser
compr ida, o conceito é simples: esse t ipo de programa é composto por um
editor de texto que também é um processador de textos formatados. A
di ferença aqui é que o texto que o usuário está editando e visual izando não é
o texto puro, mas sim o texto já formatado graf icamente, ou seja, o que você
vê é o que você tem.
Você provavelmente já usou editores desse t ipo. Os editores como o Word , o
AbiWord e o OpenOff ice Wr iter são WYSIWYG e os documentos que eles
geram ut i l izam Linguagens de marcação.
3.6 – FAQ (Perguntas Freqüentes)
Depois que eu editei meu arquivo HTML, eu não consigo visualizar o
resultado em meu navegador. Por quê?!
Ver i fique se você salvou o arquivo com o nome cor reto e que sua extensão
seja .htm. Conf ira também em sua bar ra de endereços do navegador,
ver if ique quanto ao diretór io se está cor reto.
Qual navegador eu devo utilizar?!
Você pode ut i lizar qualquer browser, como o Internet Explorer, Mozil la, Opera,
etc. .. par ticularmente recomendo o Fi refox e o Internet Explorer.

Porque utilizamos tags com letras minúsculas?!
Em HTML os nomes das tags e elementos podem ser escr itos tanto com let ras
maiúsculas quanto com letras minúsculas, tanto que <B> é a mesma coisa
que <b>. Se você observar em tutor iais encont rados pela Web, vai notar que
os mais ant igos geralmente ut i lizam letras maiúsculas para escrever os nomes
das tags, mas os mais modernos ut i l izam exclusivamente letras minúsculas.
Nesta minha apost i la ut i lizo sempre let ras minúsculas porque existe uma razão
muito forte para isso.
A nova geração do HTML é uma apl icação do XML e é designada por
XHTML. O XHTML é a melhor l inguagem para se cr iar páginas para a Web,
mas é mais rest ri ta do que o HTML (“ rouba” algumas das l iberdades que o
HTML oferece) . Ao cont rár io do que acontece em HTML, em XML as et iquetas
<B> e <b> representam elementos diferentes, visto que em XHTML foi
adotado uma convenção segundo a qual todas as etiquetas devem ser
escritas com letras minúsculas. Por este motivo é ext remamente
recomendável que se escreva todas as etiquetas com letras minúsculas.
Deste modo, você estará adqui rindo bons modos e quase não terá trabalho de
conver ter suas páginas HTML para XHTML.
4. ELEMENTOS E ATRIBUTOS
4.1 – Elementos
Um elemento é uma estrutura semânt ica, composta de tag de abertura,
conteúdo e tag de fechamento.
Os documentos HTML são simples arquivos de texto que contêm “tags de
marcação” . Essas et iquetas definem os elementos da l inguagem HTML e os
seus conteúdos. A lista seguinte indica algumas de suas caracter íst icas:
· As “tags de marcação” do HTML são usadas para def inir os elementos.
· As tags HTML escrevem-se ut il izando os caracteres < e > , ent re eles o
nome do elemento e os seus at r ibutos.
· A pr imeira tag do par é a tag de início (ou de aber tura) e a segunda do
par é a tag de f im (ou de fechamento) .
· Tudo o que se encont rar ent re as tags de início e de fim fazem parte do
conteúdo do elemento.
· Em XHTML as tags devem ser escr itas sempre com let ras minúsculas, e
as tags <b> e <B> não representam o mesmo elemento.
Você se lembra de nosso primei ro exemplo most rado?!
<html>
<head>
<t i t le> Tí tulo da Página </ t i t le>
</head>
<body>
Es ta é minha pr imei ra página. <b>Es te tex to es tá em negr i to</b>
</body>
</html>

Esta par te abaixo é um elemento HTML:
<b>Es te tex to es tá em negr i to</b>
Repare alguns aspectos do código acima:
· Este elemento inicia com a tag: <b>
· O conteúdo do elemento é este: Este texto está em negrito
· O elemento termina com a tag f inal : </b>
O propósito da tag <b> é colocar o conteúdo do elemento HTML em negr i to
(bold)
Um exemplo mais complexo
Este exemplo abaixo também é um elemento do HTML (mais complexo) :
<body>
Es ta é minha pr imei ra página. <b>Es te tex to es tá em negr i to</b>
</body>
Este elemento HTML inicia com tag <body> e termina com a tag </body>
O propósi to da tag <body> é def ini r o conteúdo pr incipal, o corpo do
documento.
4.2 – Atributos das Tags
Tag é um código usado para marcar o início e, onde for requer ido, o fim de
um elemento HTML. Há, como exposto acima, tags de abertura e de
fechamento. Uma tag de aber tura é representada por sinal de menor ( < ),
um nome de elemento HTML, e um sinal de maior ( > ) (ex. <p>) e deve
ser colocada imediatamente antes do início do conteúdo do elemento. Uma
tag de fechamento se di ferencia de uma tag de abertura apenas por uma
barra ( / ) antes do nome do elemento (ex. </p>) e deve ser colocada
imediatamente após o f im do conteúdo do elemento.
Os Atributos servem para definir uma propr iedade de um elemento HTML. Os
atr ibutos HTML devem ser colocados sempre na tag de abertura, logo após o
nome do elemento, precedido de um espaço e é composto de um nome de
atributo, um sinal de igual ( = ) e um valor de atributo, cercado por
aspas duplas ( ” ) ou simples ( ‘ )
A tag <body> def ine o corpo ( body ) de uma página HTML. No exemplo
seguinte adicionei o atr ibuto bgcolor (que signi fica “background color “, ou
cor de fundo) para indicarmos que queremos que a página f ique com uma cor
vermelha em seu plano de fundo.
<html>
<body bgcolor=” red”>
Es ta é a minha pr imei ra página da web.
<b>Es te tex to es tá em negr i to</b>
</body>
</html>
Vamos considerar agora a tag <table>, que def ine um elemento de uma
tabela. Ao juntarmos o at ributo border (que signi fica borda) com o valor

apresentado a segui r, estamos dizendo ao navegador para não colocar as
bordas da tabela ( <table border=”0″> indica uma espessura nula para a linha
de contorno da tabela) :
<html>
<body>
<table border=”0″>
<t r>
<td>
Es ta é a minha pr imei ra tabela.
</ td>
</ t r>
</ table>
</body>
</html>
Já no exemplo abaixo estamos dizendo ao navegador para desenhar uma l inha
de contorno com espessura 2 ( border=”2″ )
<html>
<body>
<table border=”2″>
<t r>
<td>
Es ta é a minha segunda tabela.
</ td>
</ t r>
</ table>
</body>
</html>
Os at r ibutos sempre ent ram em pares nome/valor (name/value), assim:
name=”value”
Nota 1: Os at r ibutos só podem aparecer nas tags de início. É proibido colocar
atr ibutos nas tags de fechamento.
Nota 2: Para garanti r a compatibi lidade com a l inguagem XHTML, uti l ize
letras minúsculas para escrever o nome dos atr ibutos, e sempre coloque os
valores entre aspas.
4.2.1 – Atributos podem ser aplicados à maioria das tags
Você normalmente usará atr ibutos com mais freqüência em algumas tags, tais
como a tag body e raramente usará em out ras, como por exemplo, a tag br
que é um comando para pular de l inha e não precisa de nenhuma informação
adicional.
Assim como existem muitas tags, também existem muitos at r ibutos. Alguns
atr ibutos são empregados em tags específ icas enquanto outros servem para
várias tags. E vice-versa: algumas tags podem conter somente um t ipo de
atr ibuto, enquanto out ras podem conter vários t ipos.
Isto pode parecer um pouco confuso, mas à medida que você for prat icando
vai constatar que tudo é fáci l e lógico, bem como vai ver i ficar as inúmeras
possibi l idades que os at r ibutos oferecem.

4.3 – Devemos usar aspas ou plicas/apóstrofos (escrevemos
“texto” ou ‘texto’)?
Acabamos de ver que os valores dos at r ibutos devem ser sempre colocados
ent re aspas. Normalmente ut il izamos as aspas normais ( ” ), mas os
apóstrofos ( ‘ ) também são permi t idos.
Em alguns casos, o valor do at r ibuto contém o próprio caractere aspas. Numa
situação dessas, devemos usar apóstrofos (que aqui funcionam como aspas
simples) para colocar em torno do valor do at r ibuto, assim:
alt=’Ele disse: “Não!” ‘
4.4 – Notas Rápidas
· As Tags HTML são ut i l izadas para marcar elementos HTML. Elas estão
cercadas pelos dois caracteres < (menor que) e > (maior que)
· As tags normalmente aparecem em pares, como <b> e </b>
· A primei ra tag em um par é sempre a tag de início, a segunda tag do
par é a tag de f im
· O texto entre o começo e o fim da tag é o conteúdo do elemento.
· HTML não é sensit ive , ou seja, <b> é a mesma coisa que <B>
· Se por acaso você escreveu os códigos HTML errado – por exemplo
>b> invés de <b> – não se desespere, pois o máximo que pode
acontecer é o seu navegador interpretar sua página de forma di ferente
do esperado e desenhá- la de um jeito maluco.
5. O CABEÇALHO DE UM DOCUMENTO HTML
5.1 – O Elemento <head> (cabeçalho do documento)
O elemento <head> contém informação de caractere geral, também
designada por meta- informação, sobre o conteúdo do documento e sobre a
forma como ele deve ser apresentado.
Podemos dizer que o termo meta- informação (ou meta-dados ) signi f ica dados
que descrevem outros dados ou informações.
5.1.1 – A Informação Contida no Elemento <head>
Os elementos cont idos dentro do elemento <head> não são exibidos na tela
do navegador.
O padrão HTML estabelece que só um pequeno número de elementos pode
aparecer dent ro do cabeçalho. Eles são: <base>, <link>, <meta>,
<title>, <style> e <script>.

A const rução ser ia o seguinte:
<head>
<p>Aqui temos algum tex to</p>
</head>
Nesta si tuação acima, o navegador pode reagi r de duas formas:
· Apresentar o texto porque ele se encont ra dent ro de um elemento <p>
· Esconde o texto porque ele pertence ao cabeçalho.
Se você colocar um elemento não autor izado, como <h2> ou <p>, dent ro do
cabeçalho, a maior ia dos navegadores vai escrever este elemento na página.
Aparentemente, as pessoas que são responsáveis pela concepção dos
browsers acham que este gênero de er ros é aceitável. Esta e out ras
def iciências dos browsers são parcialmente responsáveis pelas más práticas
de codi f icação adqui ridas por muitos cr iadores de páginas HTML. Uma das
razões que levaram à cr iação da l inguagem XHTML foi a necessidade de
acabar com estas si tuações de uma vez por todas.
5.1.2 – Elementos de cabeçalho ( <head> )
Elemento Descrição
<head> Contém informação impor tante a respei to do documento mas que não
deve ser apresentada no corpo da página
<t i t le> Def ine o t í tulo da página
<base> Def ine um URL base comum para todas as l igações relat i vas da página
<l ink> Faz referênc ia a um recur so ex terno e es tabelece a l igação com ele
<meta> Dá informação sobre aqui lo que o documento contém
5.1.3 – A declaração DOCTYPE
A declaração DOCTYPE serve para indicar o DTD a usar para val idar na
página. Quando ut i l izada, deve aparecer logo no início da página, antes do
elemento <html>
Declaração Descrição
<!DOCTYPE> Def ine o t ipo de documento. Deve ser colocada antes de qualquer
elemento pelo que f i ca mesmo antes do elemento <html>
5.2 – O elemento <meta>
O elemento <meta> contém informação de caractere geral (meta- informação )
sobre o documento e deve ser colocado dent ro do elemento <head>. Sua
f inal idade é fornecer informação que descreve o documento.
5.2.1 – Palavras-chave para os motores de pesquisa
Durante alguns anos a uti l ização mais f reqüente da informação fornecida pelo
elemento <meta> foi a criação de índices para si tes de busca. Atualmente
somente alguns buscadores ainda usam esta informação para indexar páginas,
e os de maior sucesso ignoram este elemento. No entanto, há partes que

continuam a ser t idas em consideração pelos agentes (robots ) dos buscadores,
como por exemplo, as indicações dadas sobre as pastas em que não deve ser
feita qualquer indexação.
Alguns sistemas de busca (não mui tos ) usam a informação cont ida nos
elemento meta para indexar as páginas. No f ragmento de código seguinte, o
elemento <meta> contém uma breve descr ição da página:
<meta name=”des c r ipt ion” content=”Tutor iai s e referênc ias técni cas de HTML , CSS,
JavaSc r ipt , XML , XSLT, SVG”>
Na par te do código abaixo o elemento <meta> contém uma palavras-chave
para indexar a página:
<meta name=” keywords ” content=”HTML , DHTML , CSS, XML , XHTML , JavaSc r ipt , XSLT, SVG”>
Como acabamos de ver , os nomes dados ao atr ibuto name indicam claramente
a final idade da informação contida no elemento meta.
Infel izmente, muitos cr iadores de páginas para a Web abusaram do elemento
meta e usaram de forma contrária à sua f i losof ia para enganar os motores de
pesquisa. Em conseqüência disso, os sites de busca passaram a ignorar cada
vez mais o elemento <meta>, o que acabou dif icultando todos aqueles que
pretendiam usá-lo de forma correta.
5.2.2 – Valores desconhecidos para o atributo name do
elemento <meta>
Algumas vezes encont ramos situações em que o atr ibuto name do elemento
<meta> contém um valor desconhecido, como no exemplo seguinte:
<meta name=” secur i ty” content=” low”>
Numa si tuação destas devemos interpretar o elemento meta como contendo
informação que é específ ica do websi te. Essa informação pode ser impor tante
para o autor da página, mas provavelmente é i rrelevante para os visitantes. É
possível que essas informações sejam úteis para algum software que leia a
página.
6. MODIFICANDO O CORPO DO DOCUMENTO
Como di to anter iormente, o elemento body engloba o corpo do seu
documento HTML. Ele possui muitos atr ibutos que possibi li tam modi f icar a
aparência da sua página, como cor de fundo ou das let ras. Esses at r ibutos
também podem ser ut i lizados junto com o at r ibuto td. Aqui most raremos
apenas os atr ibutos que interferem nas cores da sua página:
· bgcolor: def ine a cor de fundo de um documento
· text: a cor do texto
· link: a cor dos l inks
· alink: a cor dos l inks at ivos atualmente (a página que você está
visi tando)
· vlink: cor dos l inks já visitados

Os argumentos são o nome ou o número de uma cor , exatamente como no
caso do at ributo color usado no elemento font. Por exemplo:
<html>
<head> <t i t le>I s so é uma confusão!</ t i t le></head>
<body bgcolor=”blac k ” text=”gray ” l ink=” red” al ink=”whi te”>
I s so é uma página em html .
</body>
</html>
Essa é uma página HTML onde o fundo será preto, com letras cinzas, links em
vermelho e l inks ativos em branco. Essas são as definições globais de cor para
seu documento, e a qualquer instante você pode mudar as cores com o
elemento font.
7. ELEMENTOS BÁSICOS DA LINGUAGEM HTML
7.1 – Cabeçalhos
Os cabeçalhos ( também chamados de Headings) servem para cr iar t ítulos
di ferenciar as seções da sua página. Eles possuem seis valores di ferentes,
sendo que a de valor 1 é a que possui a maior fonte e a de valor 6 possui a
menor fonte.
Por exemplo, usando o seguinte código:
<h1> Tí tulo 1 </h1>
<h2> Tí tulo 2 </h2>
<h3> Tí tulo 3 </h3>
<h4> Tí tulo 4 </h4>
<h5> Tí tulo 5 </h5>
<h6> Tí tulo 6 </h6>
No código acima, o HTML automaticamente solta uma linha em branco entre
um t í tulo e out ro.
7.2 – Parágrafos
Os parágrafos são definidos com a tag <p>
<p>Es te é um parágrafo</p>
<p>Es te é um out ro parágrafo</p>
No código acima, o HTML automaticamente acrescenta uma linha em branco
antes e depois de um parágrafo.
7.2.1 – Alinhamentos de parágrafo
Você já deve ter visto que em cer tos documentos o texto aparece ora al inhado
à direi ta, ora à esquerda, no cent ro ou então ocupando uni formemente o
espaço da página ( texto justi ficado) . Isso pode ser obt ido faci lmente em
HTML. Veja a tabela abaixo:
ELEMENTO DESCRIÇÃO
<p al ign=” lef t ”> Al inha o tex to à esquerda

<p al ign=” r ight ”> Al inha o tex to à di rei ta
<p al ign=” center ”> Al inha o tex to cent ral i zado
<p al ign=” jus t i f y ”> Al inha o tex to jus t i f i cado
Note que ent re os del imi tadores < e > não encont ra-se apenas o elemento
<p>. Além dele, existe o texto align=”alinhamento”. Dizemos que align é
um at r ibuto do elemento p e alinhamento é o valor desse at ributo. No caso de
<p align=”justify”>, o valor do at ributo align (que signif ica al inhamento
em inglês) é justify (justi f icado) .
Os at r ibutos, as palavras que seguem o elemento, informam o navegador a
respeito das propriedades que os elementos podem assumi r. Confuso?! Pode
parecer um pouco confuso, mas não é. Como disse a Toya, “Um disco de
banda punk pode ter diversas propr iedades ou ‘atr ibutos’ – a cor do disco,
tamanho, velocidade, etc, tudo isso são atr ibutos. ” E eu digo mais: se você
coloca o disco num toca-discos, você pode ouvi- lo em duas ou no máximo t rês
velocidades. Às vezes dá pra ouvi r ao contrário. Mas se você ar remessar seus
discos do Fofão, garanto que eles poderão gi rar em mui tas out ras velocidades.
Assim é o HTML, com muitas opções para você exibi r seu texto.
No HTML, os valores dos atr ibutos podem ser def inidos da forma
atributo=valor ou atributos=”valor” (como em al ign=”justi fy” ) , que é mais
recomendada.
Como você viu, nem todos os códigos em HTML necessitam de atr ibutos, em
especial os comandos de modif icação de texto como negr ito, i tál ico,
subl inhado, etc.
Resumindo, os atr ibutos def inem caracter ísticas adicionais aos elementos. Nas
seções seguintes veremos elementos com vár ios at r ibutos. Por exemplo, não
adianta dizer ao seu navegador pra por um link em alguma parte do seu texto,
é preciso dizer ao navegador, por exemplo, pra que lugar esse link aponta. É
isso o que um atr ibuto faz.
7.3 – Criando uma divisão
Existem momentos em que queremos que vár ios parágrafos possuam um
mesmo valor de atr ibuto – cent ral izado, por exemplo . Ao invés de escrevermos
align=”justify” a cada abertura de novo parágrafo, podemos usar o
elemento div, que cria uma “divisão” no documento na qual alguns atr ibutos
são preservados. Vejamos o exemplo:



Parágrafo 1
Parágrafo 1
Parágrafo 1


Parágrafo 2
Parágrafo 2
Parágrafo 2


Parágrafo 3
Parágrafo 3
Parágrafo 3

Exper imente mudar os at r ibutos do al inhamento pra ver o que acontece!! Na
parte de Folhas de Estilo most rarei como uti l izar o elemento div para cr iar
seções lógicas em documentos.
7.4 – Quebras de Linha
A tag <br> é ut il izada quando você quer terminar uma l inha, mas não quer
começar um novo parágrafo. Com este comando você faz com que ocor ra uma
quebra de linha, onde você posicionar a tag.
Note que para o elemento <br> não existe o comando </br>, isto é, a
quebra de l inha não age numa região de texto del imitada, mas sim num ponto
do texto. Compl icado?! Então vamos lá, mais uma vez expl icando de uma
out ra forma: comandos como <b>, <i> e <u> agem sobre uma região do
texto e precisam ser fechados com seus respect ivos </b>, </i> e </u>,
pois do cont rár io esses comandos agi rão até o f im do documento. Já o
comando de quebra de l inha, </br>, e alguns out ros atuam somente no
ponto onde eles aparecem.
Veja o exemplo abaixo da uti l ização da tag <br>
<p>Es te <br> é um pará<br>grafo com quebra de l inha</p>
A tag <br> é uma etiqueta vazia, ela não possui tag f inal.
7.5 – Comentários
A tag de comentário é ut il izada para inser i r comentár ios no código fonte
HTML. Todo tipo de comentário é ignorado pelo navegador, isto é, ele não
será exibido na tela. Você pode ut i l izar esta tag para expl icar seu código
fonte ou parte dele, que poderá ajudá- lo quando você est iver editando seus
códigos posteriormente.
<! – – Es te é o comentár io – ->
Note que você precisa de um ponto de exclamação depois do parênteses de
abertura, e não antes do parênteses f inal.
7.6 – Informações Úteis
1) Quando você escrever um texto em HTML, esteja ciente de que o texto que
você está visual izando não será exibido igualmente em todos os navegadores.
Algumas pessoas possuem computadores com resoluções maiores, out ros
menores, tudo isso inf lui na questão da exibição da página, o que pode
acontecer são os textos e as janelas que podem ser redimensionados.
2) As diferenças nos tamanhos das janelas dos navegadores fazem com que o
número de caracteres que cabem numa l inha varie muito. Por esse motivo não
seremos capazes de cont rolar nem o número de l inhas nem os locais em que
acontecem as mudanças de l inha. Nunca tente formatar o texto inserindo
espaços ou l inhas vazias, porque os resultados não serão aqueles que você
esperava.

3) O HTML quando encontra dois ou mais espaços seguidos, ele trata-os como
se fosse um único espaço. Quando você escreve uma seqüência de espaços
seguidos, o resultado é o mesmo de escrever um único espaço. Em HTML, as
teclas Tab e Enter equivalem a um espaço.
4) Sempre que você quiser inser i r linhas em branco, ut i lize a tag <br>.
Existem pessoas que ut i lizam parágrafos vazios para obter o mesmo resul tado,
mas isso está er rado. A tag <p> deve ser usada apenas para def ini r
parágrafos, e o elemento <br> não deve ser usado, por exemplo, para criar
l istas, pois existem tags concebidas especi f icamente para isso. Sempre que
você precisar de obter uma formatação especial , você deve usar o elemento
que foi cr iado para esse efei to.
5) Em mui tas páginas, os parágrafos estão escri tos sem a et iqueta de
fechamento (</p>) Apesar dos navegadores aceitarem esta omissão, tenha
sempre atenção para fechar todos os elementos que requerem uma tag de
fechamento. Se você tentar validar uma página que contenha estes er ros, verá
que ela não passará no teste de val idação.
6) Os elementos <p> e <h1> … <h6> o navegador adiciona
automaticamente uma l inha em branco antes do início e out ra depois do f im.
7.7 – Lista de elementos básicos do HTML
TAG DESCRIÇÃO
<html> Def ine um documento HTML
<body> Def ine o conteúdo pr inc ipal , o corpo do documento
<h1> até <h6> Def ine t í tulos , de 1 a 6
<p> Def ine parágrafo
<br> Insere l inhas em branco, quebra de l inha
<hr> Insere uma l inha hor i zontal
<! – -> Def ine um comentár io
8. FORMATAÇÃO DE TEXTO
A l inguagem HTML def ine vários elementos para se formatar um texto, como
por exemplo, escrever em negr i to, itál ico, subl inhado, etc. O exemplo abaixo
most ra alguns deles:
<html>
<body>
Es te exemplo tem tex to em <i>i tál i co</ i>, <b>negr i to</b>,
<em>enfat i zado</em>, <u>subl inhado</u> e t ipo
<code>código de computador</ code>
</body>
</html>
8.1 – Elementos para formatação de texto
TAG DESCRIÇÃO
<b> Def ine seu tex to em negr i to
<big> Def ine seu tex to grande
<i> Def ine seu tex to em i tál i co
<smal l> Def ine seu tex to pequeno
<s t rong> Def ine seu tex to for te

<sub> Def ine seu tex to subs c r i to (ex: H2O)
<sup> Def ine seu tex to sobres c r i to (ex : 15 2 )
<ins> Def ine tex to inser ido
<del> Def ine tex to apagado
<s> Desuso. Ut i l i ze <del> ao invés
<s t r i ke> Desuso. Ut i l i ze <del> ao invés
<u> Desuso. Ut i l i ze <s ty les> ao invés
8.2 – Elementos para o “output de código de computador”
TAG DESCRIÇÃO
<code> Def ine códigos de tex to
<kbd> Def ine o tex to com uma fonte espec ial determinada pelo navegador
<samp> Def ine código de computador de amos t ra
<t t> Def ine o tex to ut i l i zando uma fonte de t ipo e largura def inidas pelo navegador
<var> Def ine var iávei s
<pre> Def ine o tex to pré- formatado
<l i s t ing> Desuso. Ut i l i ze <pre> ao invés
<plaintex t> Desuso. Ut i l i ze <pre> ao invés
<xmp> Desuso. Ut i l i ze <pré> ao invés
8.3 – Elementos para citações e listas de definições
TAG DESCRIÇÃO
<abbr> Def ine uma abrev iação
<ac ronym> Def ine uma s igla
<addres s> Def ine um elemento de endereço
<bdo> Def ine a di reção do tex to
<bloc kquote> Def ine uma longa c i tação
<q> Def ine uma pequena c i tação
<c i te> Def ine a c i tação
<dfn> Def ine um termo de c i tação
9. LIGAÇÕES DE HIPERTEXTO (“LINKS”)
Essa é uma das seções mais importantes desta apost ila, pois af inal estamos
falando de hiper texto. Queremos que uma página HTML possa fazer referência
a out ras páginas html ou para qualquer out ro tipo de arquivo que se encont re
em outros lugares da web. No jargão da internet, você quer l igar ( l ink) par te
da sua página com out ras.
Isso é feito de modo muito simples com o elemento a, como segue:
<a href=”ht tp: / /www.midiaindependente.org”>CMI Brasi l</a>
Como você deve ter percebido, o at r ibudo href (Hiper text Reference /
Referência de Hiper texto) indica o endereço da página que você quer “l inkar”
( l igar) ao seu documento. No exemplo acima, o texto CMI Brasil aparece
como uma referência para o l ink. Se você cl icar sobre esse texto, seu
navegador automat icamente tentará abr i r a página
http:/ /www.midiaindependente.org

Os endereços são escr i tos na forma de URL (Uniform Resource Locators) , que
é uma maneira que inventaram para se especif icar o caminho até se chegar
num arquivo que esteja nalgum local da internet.
O formato da URL é:
protocolo: / /nome-do- computador /pas tas /arqui vo
O protocolo indica como o navegador i rá buscar o arquivo. Nome do
computador é aquele endereço do t ipo http://www.ninguem.com.br e as pastas
são os di retór ios dentro desse computador onde estão os arquivos. Uma URL
de um art igo do site da CMI Brasil é, por exemplo,
http:/ /www.midiaindependente.org/pt/blue/2004/09/290669.shtml, onde
http:// é o protocolo, pt, blue, 2004 e 09 são pastas (uma f ica dent ro da
out ra) e 290669.shtml é o nome do arquivo.
http:/ /
\– – http://www.midiaindependente.org
\ — pt
\– blue
\– – 2004
\- — 09
\- — 290669.shtml
Lembre-se também que quando você acessa o endereço
http:/ /www.ninguem.com.br , por exemplo, está na verdade vendo o arquivo
http:/ /www.ninguem.com.br / index.html. Os arquivos do t ipo index.html
sempre são procurados pelo navegador quando você sol ici ta apenas o nome
do si te ou uma pasta de um computador.
Em html, existem t rês formas possíveis de se fazer l inks: os links internos,
os links locais (ou relat ivos) e os links externos.
9.1 – Links internos
Links internos são aqueles que l igam uma seção de uma página com uma
out ra seção da mesma página. Por exemplo, se eu quiser fazer uma referência
para a seção Hipertexto dessa nossa apost i la, basta que eu primeiro def ina
um nome para a seção Hipertexto e então adicione um l ink pra ela. Isso é
feito da seguinte forma:
1 – Vou até o início da seção Hiper texto e adiciono o seguinte código, ao invés
de simplesmente escrever o t ítulo da seção:
<a name=”Hiper tex to”>Hiper tex to</a>
2 – Adiciono o link pra essa seção com o seguinte código,
<a href=”#Hiper tex to”>Vá para a seção hiper tex to</a>
O atr ibuto name serve apenas para dar um nome para uma posição de uma
página html . O valor de name pode ser qualquer um (nesse caso eu coloquei
“Hiper texto” ).
Quando você fizer uma referência a um l ink interno util izando o at r ibuto href ,
você precisa necessar iamente adicionar o caractere # (jogo da velha) antes

do nome da sua seção – no nosso caso, #Hipertexto – pois do cont rár io seu
navegador tentará abri – lo como um l ink local .
9.2 – Links locais ou relativos
Links locais são aqueles que referenciam um arquivo que esteja no mesmo
computador que a sua página. Links locais não contém o ht tp: // no início do
endereço. Por exemplo, se no meu documento html eu quiser fazer um l ink
para o arquivo links.html que está na mesma pasta do meu documento, não
preciso digi tal o endereço completo, mas apenas:
<a href=” l inks.html “>Aces se os l ink s !</a>
Esse t ipo de argumento para o href também é chamado de links relativos.
Se você quiser l inkar uma página que esteja do di retór io (pasta) super ior da
sua página, use dois pontos e uma bar ra antes do nome do arquivo:
<a href=” . . / l ink s .html “>Aces se os l ink s !</a>
A vantagem de você usar l inks relat ivos é que você pode mover todo o seu
site para um novo endereço na internet e não precisar reeditar todos os l inks
que apontam para páginas do seu própr io si te.
9.3 – Links externos
Links externos são aqueles que podem apontar para qualquer arquivo
disponível na internet, como por exemplo:
<a href=”ht tp: / /pt .wi k ipedia.org”>Aces se a Wi k ipedia!</a>
Os links externos precisam necessar iamente conter o prefixo http: // e o
endereço completo do arquivo.
9.4 – Alvo (target)
Um at ributo interessante para o elemento <a href> é o target, que permi te
que o l ink seja aberto numa outra janela do seu navegador.
<a href=”ht tp: / /pt .wi k ipedia.org” target=”_blank”>Aces se a Wik ipedia!</a>
O argumento do atr ibuto target é o nome da janela do navegador que abr irá
o l ink. Se você quiser que o link seja aberto numa nova janela, simplesmente
escolha qualquer nome como argumento.
9.5 – Elementos para fazer ligações
ELEMENTO DESCRIÇÃO
<a> Def ine uma âncora ou uma l igação de hiper tex to

10. LISTAS
A l inguagem HTML contém elementos que permi tem cr iar listas de
def inições, listas ordenadas e listas não ordenadas.
10.1 – Listas Não Ordenadas
Uma lista não ordenada contém vár ios itens marcados todos com o mesmo
símbolo (normalmente um cí rculo pequeno ou um quadrado pequeno).
Para cr iar uma lista não ordenada, uti l izamos o elemento <ul> ( “unordered
l ist “). Dent ro desse elemento, os vár ios itens são cr iados com o elemento
<li> ( ” list i tem”).
O exemplo seguinte mostra uma lista simples:
<ul>
<l i>Rum</l i>
<l i>Bagaço</l i>
</ul>
Este é o aspecto de como vai ficar em seu navegador:
· Rum
· Bagaço
Dent ro de uma lista não ordenada podemos colocar parágrafos, quebras de
l inha, imagens, out ras l istas, etc.
10.2 – Listas Ordenadas
Uma lista ordenada contém vár ios itens numerados e é cr iada com o
elemento <ol> (“ordered l ist”) . Os itens da lista def inem-se com o elemento
<li> ( ” list i tem”) .
<ol>
<l i>Rum</l i>
<l i>Bagaço</l i>
</ol>
Este é o aspecto de como vai ficar em seu navegador:
1. Rum
2. Bagaço
Dent ro de uma l ista ordenada podemos colocar parágrafos, quebras de l inha,
imagens, out ras l istas, etc.
10.3 – Listas de Definições
Uma lista de def inições não é const ituída por uma série de itens, mas sim
por vár ios termos acompanhados de descr ições de seus signif icados.

As listas de def inições são cr iadas com o elemento <dl> ( “defini t ion l ist “) O
nome de cada termo f ica dent ro de um elemento <dt> ( “def init ion term”) e a
sua descr ição f ica no elemento <dd> ( “def init ion descr ipt ion” )
<dl>
<dt>Rum</dt>
<dd>Bebida espi r i tuosa mui to aprec iada pelos pi ratas do Car ibe</dd>
<dt>Bagaço</dt>
<dd>Bebida com elevado teor al coól i co. A sabedor ia popular
at r ibui – lhe for tes propr iedades terapêut i cas .</dd>
</dl>
Este é o aspecto de como vai ficar em seu navegador:
Rum
Bebida espir i tuosa muito apreciada pelos pi ratas do Caribe
Bagaço
Bebida com elevado teor alcoól ico. A sabedor ia popular reconhece-lhe
fortes propr iedades terapêut icas.
Dent ro de um elemento <dd> podemos colocar parágrafos, quebras de l inha,
imagens, out ras l istas, etc.
10.4 – Elementos para Listas
ELEMENTO DESCRIÇÃO
<ol> Def ine uma l i s ta ordenada
<ul> Def ine uma l i s ta não ordenada
<l i> Insere um i tem na l i s ta
<dl> Insere uma l i s ta de def ini ções
<dt> Apresenta a def ini ção de um termo
<dd> Insere a def ini ção de um termo
<di r> Desuso. Ut i l i ze <ul>
<menu> Desuso. Ut i l i ze <ul>
11. IMAGENS
Além de manipular texto, o html também serve para exibi r imagens de uma
maneira mui to simples, usando para isso o elemento img:
<img src=”emma. jpg” width=”221″ height=”300″>
O atr ibuto src – source, fonte em inglês – dá o nome do arquivo da imagem
e é o único at r ibuto obrigatório para o elemento img. Os at ributos para a
largura (width) e a altura (height) não são necessár ios, mas serão muito
úteis quando as pessoas est iverem navegando em seu site: quando seu
navegador abre um arquivo html e encont ra o elemento img, ele usará o
respect ivo atr ibuto src como o endereço onde está o arquivo de imagem a ser
exibido. Em out ras palavras, o elemento img apenas passa uma referência do
arquivo de imagem ao navegador, ou seja, você não está colocando esse
arquivo de imagem dent ro do seu arquivo html, você está apenas colocando
em seu arquivo html uma referência a esse arquivo de imagem. O navegador,
por sua vez, começa a baixar essa imagem a par t ir desse endereço at ributo
enquanto termina de exibi r o documento.
Dependendo do t ipo de arquivo de imagem, ela só será exibido pelo
navegador quando terminar de ser baixada. Se isso ocor rer e você não ut i l izou

os atr ibutos width e height no seu documento, o navegador só reservará
espaço na tela do seu computador para a exibição da imagem quando ela
est iver sido baixada, e duranter esse intervalo a formatação do seu
documento pode f icar di ferente. Para evi tar isso – somente por uma questão
de est i lo – recomendamos que você sempre use os atr ibutos width e height,
que informam ao navegador o tamanho da imagem, antes mesmo dele
começar a baixá- la, e assim o espaço na tela do seu computador será
apropr iadamente reservado para ela.
11.1 – Tamanho de exibição da imagem
Os at r ibutos width e height merecem um pouco mais de atenção. Como
vimos, são os at r ibutos que determinam o tamanho que a imagem será
exibida. Existem duas formas de se fazer isso, ut i lizando o tamanho em pixels
( tamanho absoluto) e em valores relat ivos ao tamanho disponível da tela do
computador , isto é, em porcentagem.
Um pixel é a menor unidade luminosa da tela do seu computador que os
programas podem manipular , e isso depende mui to da resolução da tela do
seu computador. Um pixel é um quadradinho luminoso. Atualmente as telas de
computador tem uma resolução de 800 pixels de comprimento e 600 de altura,
às vezes pode ser de 1024 de compr imento e 768 na al tura ou resoluções até
maiores, de tal modo que nossos olhos já não conseguem dist ingui r ent re
pixels cont íguos.
O tamanho das imagens computador izadas também pode ser medido em
pixels, que é o tamanho que a imagem vai ocupar na tela do seu computador
quando ela for exibida. Para que você descubra qual é o tamanho da sua
imagem, você terá que usar algum programa de edição de imagens ou então
abri -la di retamente no seu navegador. Exper imente ir no menu Arquivo e
depois em Abr i r, no seu nagevador, ou então digitar a localização da imagem
di retamente na barra de endereços. Quando a imagem for exibida, cl ique
sobre ela com o botão di reito do seu mouse e em seguida vá em Propr iedades.
Uma janela com as informações da imagens – inclusive seu tamanho – deverá
aparecer. De posse desses valores, basta colocar- los dentro da do img. No
exemplo anter ior, onde usamos o código width=”221″ height=”300″, a
imagem foi exibida com 221 pixels de largura e 300 de altura,
coincidentemente sendo seu tamanho or iginal. Poder íamos ter escr ito:
<img s r c=”emma. jpg” width=”22″ height=”30″>
Ou seja, a imagem foi most rada com um tamanho menor do que o original .
Também poder íamos usar tamanhos maiores que or iginal… que tal você
exper imentar algo como width=”2210″ height=”3000″?!
O segundo modo de determinar o tamanho de exibição das imagens no
navegador consiste em ut i l izar porcentagem. Por exemplo:
<img s r c=”emma. jpg” width=”10%” height=”10%”>
Resultará numa imagem exibida com um décimo (10%) do espaço disponível
da tela do computador .
Nos dois modos de determinar o tamanho – em pixels e em porcentagem –
podemos escolher valores independentes para a altura e a largura, de tal
forma que a imagem fique distorcida. Olha que engraçado:
<img s r c=”emma. jpg” width=”50″ height=”400″>

11.2 – Texto alternativo
Existem ainda out ros at ributos interessantes para a exibição de imagens. Você
pode inclui r uma descr ição da imagem para que se, por qualquer razão,
alguém não consiga ver a imagem ela possa ler uma descr ição no espaço
vazio. Essa descr ição também aparecerá quando você passar o mouse por
sobre a imagem.
Você pode adicionar uma pequena descr ição desta manei ra:
<img s r c=”emma. jpg” width=”221″ height=”300″ al t=”Emma Goldman! “>
O at r ibuto alt (texto alternativo) é ut i lizado para dar a pequena descr ição,
neste caso “Emma Goldman!”.
11.3 – Borda da imagem
Uma borda (contorno) da imagem pode ser adicionada com o at r ibuto border :
<img s r c=”emma. jpg” width=”10%” height=”10%” border=”1″>
<img s r c=”emma. jpg” width=”10%” height=”10%” border=”2″>
<img s r c=”emma. jpg” width=”10%” height=”10%” border=”3″>
O valor do atr ibuto border indicará o tamanho dessa moldura.
11.4 – Alinhamento da imagem
É possível ainda colocar imagens e texto um do lado do out ro, de diversas
formas. Vamos supor a mais simples:
<img s r c=”emma. jpg” width=”3%” height=”3%” border=”1″>
O texto aparece ao lado da imagem.
Esse código pode funcionar mui to bem, mas às vezes acontece do texto
aparecer abaixo da imagem. Para fazer o posicionamento da imagens e do
texto cor retamente, basta ut il izar o at r ibuto align, que funciona de modo
análogo ao do al inhamento de paragráfos:
<img s r c=”emma. jpg” width=”5%” height=”5%” border=”1″ al ign=” r ight ” border=”1″>
O texto vai aparecer à esquerda da imagem (o atr ibuto right faz que a
imagem f ique à direi ta da tela) , mesmo tendo escr ito após o código sobre a
imagem. Enquanto o texto puder f icar ao lado da imagem, ele ficará. Quando
ele não mais couber nesse espaço, ele começará a ser exibido abaixo da
imagem, como você pode ver aqui.
Ut i l izar o al inhamento de imagens é a melhor manei ra de garant ir que ela
aparecerá no local desejado.
11.5 – Espaçamento da imagem
Notou como o texto do exemplo anter ior saiu colado à imagem?! É possível
def ini r um espaçamento ent re a imagem e qualquer objeto (texto, imagem,
tabelas) que esteja ao seu lado, acima ou abaixo, usando para isso os
atr ibutos vspace (espaçamento ver tical) e hspace (espaçamento hor izontal) .

O valor desses atr ibutos diz ao navegador qual será o espaço em pixels ent re
a imagem e qualquer objeto:
<img s r c=”emma. jpg” width=”3%” height=”3%” border=”1″ al ign=” lef t ” hspace=”5″
border=”1″>
O texto vai aparecer à direi ta da imagem, a cinco pixels de distância dela.
Deu pra notar a di ferença?! Ut il izando todos esses at r ibutos para a exibição
de imagens você obtém um texto bem diagramado e bonito de ser l ido.
Nota: Ao ut i l izar imagens, lembre-se de que elas podem aumentar
consideravelmente o tempo de car regamento para ver o conteúdo de suas
páginas, por isso, use-as com cuidado.
11.6 – Elementos relacionados com imagens
ELEMENTO DESCRIÇÃO
<img> Insere uma imagem
<map> Def ine um mapeamento sobre a imagem ( ” image map” )
<área> Def ine uma área c l i cável sobre um mapa de imagem
11.7 – Fundos de Página
Uma cor ou uma imagem de fundo bem escolhido podem melhorar o aspecto
da página, mas uma má escolha é capaz de causar danos mui to graves na
legibi l idade e no aspecto geral da página.
11.7.1 – O atributo bgcolor do elemento <body>
O elemento <body> possui atributos que nos permitem especif icar as cores
do texto e a cor de fundo. Também podemos usar uma imagem como padrão
de fundo.
O at r ibuto bgcolor nos permite escolher a cor de fundo da página. O quadro
seguinte mostra t rês formas de indicar a cor de fundo da página usando um
código de cor hexadecimal, um código RGB e um nome de cor (veja mais à
f rente o tópico sobre cores).
<body bgcolor=”#000000″>
<body bgcolor=” rgb(0,0,0) “>
<body bgcolor=”blac k “>
As l inhas apresentadas mais acima usam formas di ferentes (mas todas
válidas) para dar a cor preta ao fundo da página.
Nota: a forma recomendada para formatar o texto e os fundos de página
baseia-se em estilos CSS. A uti l ização do atr ibuto bgcolor só se just i fica se
precisarmos de manter a compatibi lidade com navegadores ant igos que não
supor tam CSS (veremos sobre CSS no f im da apost i la).

11.7.2 – O atributo background
O at ributo background estabelece que o padrão de fundo da página será uma
imagem. O valor deste atr ibuto indica o local onde se encont ra a imagem. Se
as dimensões da imagem forem infer iores às dimensões da página, o
navegador repeti rá a imagem (como num chão de mosaicos ou em uma parede
de azulejos) , por forma a ocupar todo o fundo da página.
O exemplo abaixo most ra bem como se faz isso:
<body background=” imagem. jpg”>
<body background=”ht tp: / /paulista07. com/ imagem. jpg”>
O valor do at r ibuto background é uma URL (site) que def ine o local onde se
encontra a imagem. Na pr imei ra linha mais acima, demos uma URL relat iva e
na segunda demos uma URL absoluta.
Nota: a forma recomendada para formatar o texto e os fundos de página
baseia-se em estilos CSS. A uti l ização deste at ributo só se just if ica se
precisarmos de manter a compatibi lidade com navegadores ant igos que não
supor tam CSS (veremos sobre CSS no f im da apost i la).
11.8 – Dicas
Sempre que ut il izar uma imagem de fundo na página, não se esqueça destes
aspectos:
· Cert i f ique-se de que o tamanho da imagem (em KBytes) não é mui to
grande, pois em caso af i rmativo, o tempo para carregar a página
aumentaria consideravelmente.
· Cert i f ique-se de que a imagem de fundo combina bem com a cor do texto.
· Cert i f ique-se de que o fundo combina bem com as outras imagens da
página.
· Ver i fique se a repetição da imagem de fundo em mosaico resul ta em um
padrão perfeito. Se você perceber algumas falhas aparentes, uti l ize out ra
imagem de fundo ou faça uma edição nesta atual.
· Cert i f ique-se de que a imagem não é incômoda e que não desvia a atenção
do texto.
Os at r ibutos bgcolor, background e text do elemento <body> foram
reprovados nas recomendações mais recentes da W3C para a linguagem
HTML (HTML 4 e XHTML) . A forma recomendada para obter os mesmos
resultados baseia-se na ut i lização de est i los CSS. A ut i lização destes at r ibutos
só se just if ica se precisarmos de manter a compat ibilidade com navegadores
ant igos que não supor tam CSS.
São poucos os sites de qual idade que uti lizam imagens de fundo, e aqueles
que o fazem, usam fundos que não atrapalham a visualização do si te.

12 – CORES
Podemos obter qualquer cor que desejarmos combinando proporções corretas
de t rês cores bases: Vermelho (Red) , Verde (Green) e Azul (Blue) .
12.1 – Formas de exprimir cores
Em CSS a forma recomendada para ut i l izar cores é usando código (notações)
hexadecimal. Desta forma as cores expr imem usando t rês números
hexadecimais que def inem as quant idades de vermelho, verde e azul que
ent ram na composição de uma determinada cor. O valor mais baixo de uma
determinada cor é 0 (#00 na notação hexadecimal usada em CSS) e o valor
mais al to é 255 (#FF em código hexadecimal). Assim, a cor preta tem 0 de
vermelho, 0 de verde e 0 de azul, escrevendo na forma #000000. Já o
branco possui 255 de vermelho, 255 de verde e 255 de azul , sendo seu código
#FFFFFF. O amarelo forte possui 255 de vermelho, 255 de verde e 0 de azul,
sendo seu código #FFFF00
A tabela abaixo most ra os resul tados de diversas combinações de cores:
COR CÓDIGO HEXADECIMAL VALOR RGB (DECIMAL)
#000000 rgb(0,0,0)
#FF0000 rgb(255,0,0)
#00FF00 rgb(0,255,0)
#0000FF rgb(0,0,255)
#FFFF00 rgb(255,255,0)
#00FFFF rgb(0,255,255)
#FF00FF rgb(255,0,255)
#C0C0C0 rgb(192,192,192)
#FFFFFF rgb(255,255,255)
12.2 – Nomes de cores
A tabela seguinte most ra as 16 cores cujos nomes foram def inidos
of icialmente pelo W3C. Todos os navegadores reconhecem estes nomes pelo
que podem usá-los sem qualquer problema:
Cores com Nomes Atribuídos Oficialmente
Aqua
(#00FFFF)
Black
(#000000)
Blue
(#0000FF)
Fuchsia
(#FF00FF)
Green
(#008000) Gray
(#808080) Lime
(#00FF00) Maroon
(#800000)
Navy
(#000080)
Ol ive
(#808000)
Purple
(#800080)
Red
(#FF0000)
Si lver
(#C0C0C0)
Teal
(#008080)
Whi te
(#FFFFFF)
Yel low
(#FFFF00)
Apesar de não estarem definidos of icialmente, os nomes das cores
apresentados a segui r são reconhecidos por todos os navegadores relevantes,
com exceção das versões mais ant igas.
Nota: Estes nomes de cores não estão def inidos em nenhum padrão do W3C,
apesar de serem reconhecidos pelos pr incipais navegadores, esse
reconhecimento não é exigido a nenhum navegador para estar conforme com
as recomendações oficiais. É pouco provável que nos anos mais próximos os

navegadores para PDA e telefones móveis consigam reconhecer estes nomes
de cor. Se quiser garant ir a apresentação cor reta das cores das suas páginas
em todos os navegadores conformes com as normas do W3C, em vez dos
nomes apresentados na tabela, ut i lize os códigos hexadecimais apresentados
junto das cores.
COR CÓDIGO HEXADECIMAL NOME DA COR
#F0F8FF Al i ceBlue
#FAEBD7 Ant iqueWhi te
#7FFFD4 Aquamar ine
#000000 Blac k
#0000FF Blue
#8A2BE2 BlueViolet
#A52A2A Brown
12.3 – Cores seguras da Web
Problemas causados por um número reduzido de cores
Todos os computadores modernos são capazes de mostrar dezenas de milhar
ou mi lhões de cores em simultâneo. Contudo, até meados da década de 1990
muitos sistemas apenas conseguiam apresentar 256 cores diferentes de cada
vez. Esta limi tação obr igava os navegadores a t rabalharem com uma paleta
f ixa que cont inha apenas 256 cores.
Os navegadores eram obr igados a usar apenas 256 cores para simular todas
as cores que não conseguiam apresentar. Os efeitos destas aproximações
eram visíveis na forma pontos adjacentes com cores di ferentes e de manchas
de cor. Atualmente estas l imi tações já quase não existem.
Como acabamos de ver , na pr imei ra metade da década de 1990, a maioria dos
computadores eram capazes de apresentar apenas 256 cores di ferentes de
cada vez. Dessas 256 cores, os sistemas operat ivos Windows e Apple
Macintosh reservavam 20 cores cada um (40 no total ) para desenhar suas
inter faces gráf icas. Assim, de um total de 256 cores possíveis, apenas 216
podiam ser escolhidas l ivremente com a garant ia de poderem ser apresentadas
tanto numa máquina Windows como em um Mac. Estas 216 cores receberam a
designação de cores seguras da Web.
A forma encontrada para limitar as conseqüências resul tantes da ut i lização de
uma paleta com apenas 216 cores consiste em usar apenas cores cujos
códigos hexadecimais usam apenas combinações dos números indicados na
tabela seguinte:
RGB 00 51 102 153 204 255
Hex 00 33 66 99 CC FF
A tabela abaixo mostra todas as 216 combinações de cores que podemos
formar com os valores apresentados na tabela anter ior. Estas são, por tanto,
as 216 cores seguras da Web, que most ramos juntamente com seus códigos
hexadecimais (o caractere # no início foi omi t ido) :

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
33CC00 33CC33 33CC66 33CC99 33CCCC 33CCFF
33FF00 33FF33 33FF66 33FF99 33FFCC 33FFFF
660000 660033 660066 660099 6600CC 6600FF
663300 663333 663366 663399 6633CC 6633FF
666600 666633 666666 666699 6666CC 6666FF
669900 669933 669966 669999 6699CC 6699FF
66CC00 66CC33 66CC66 66CC99 66CCCC 66CCFF
66FF00 66FF33 66FF66 66FF99 66FFCC 66FFFF
990000 990033 990066 990099 9900CC 9900FF
993300 993333 993366 993399 9933CC 9933FF
996600 996633 996666 996699 9966CC 9966FF
999900 999933 999966 999999 9999CC 9999FF
99CC00 99CC33 99CC66 99CC99 99CCCC 99CCFF
99FF00 99FF33 99FF66 99FF99 99FFCC 99FFFF
CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF
CC3300 CC3333 CC3366 CC3399 CC33CC CC33FF
CC6600 CC6633 CC6666 CC6699 CC66CC CC66FF
CC9900 CC9933 CC9966 CC9999 CC99CC CC99FF
CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF
CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF
FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF
FF3300 FF3333 FF3366 FF3399 FF33CC FF33FF
FF6600 FF6633 FF6666 FF6699 FF66CC FF66FF
FF9900 FF9933 FF9966 FF9999 FF99CC FF99FF
FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF
FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF
Atualmente qualquer computador consegue apresentar milhões de cores
di ferentes ao mesmo tempo, não havendo necessidade de usar apenas cores
seguras da Web. Apesar disso, este tema cont inua a ser focado em quase
todas as int roduções à construção de páginas.

12.4 – Formas de exprimir os valores das cores
As cores def inem-se usando notação hexadecimal que expr ime as quant idades
de Vermelho (Red) , Verde (Green) e Azul (Blue) que ent ram em sua
composição. A quant idade mínima de uma cor é 0 (#00 em código
hexadecimal) e a quant idade máxima é 255 (#FF em código hexadecimal)
Assim, a cor branca escreve-se na forma #FFFFFF e a cor preta na forma
#000000. Uma forma mais ant iga que ainda funciona é a forma decimal. Na
forma decimal a cor branca exprime-se como rgb(255,255,255) e a cor preta
expr ime-se como rgb(0,0,0). Ent re estes dois ext remos, temos toda a gama
de cores que podem ser apresentadas em um moni tor.
Nada de Vermelho
Se desl igarmos completamente a cor Vermelha, f icamos com 65536 cores
di ferentes que resultam de combinar 256 quant idades de verde com 256
quantidades de azul (65536 = 256 × 256) .
A tabela seguinte most ra algumas destas combinações:
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 ao Máximo
Se colocarmos a quant idade de Vermelho com seu valor máximo, que é 255
(#FF em código hexadecimal ) f icamos ainda com 65536 (256 x 256) cores
di ferentes que resul tam de combinarmos todos os valores possíveis de Verde
com todos os valores possíveis de Azul.
A tabela seguinte most ra algumas destas combinações:
FF3300 FF6600 FF9900 FFCC00 FFFF00
FF3333 FF6633 FF9933 FFCC33 FFFF33
FF3366 FF6666 FF9966 FFCC66 FFFF66
FF3399 FF6699 FF9999 FFCC99 FFFF99
FF33CC FF66CC FF99CC FFCCCC FFFFCC
FF33FF FF66FF FF99FF FFCCFF FFFFFF
Tons de Vermelho
A tabela apresentada abaixo most ra o resul tado obt ido var iando a quant idade
de cor vermelha de 0 até 255 ao mesmo tempo que se mantêm em zero as
quantidades de verde e de azul. Existem 256 tons diferentes de vermelho puro
e mui tas out ras que contêm misturas de outras cores.

TONS DE VERMELHO HEXADECIMAL RGB
#000000 rgb(0,0,0)
#080000 rgb(8,0,0)
#100000 rgb(16,0,0)
#180000 rgb(24,0,0)
#200000 rgb(32,0,0)
#280000 rgb(40,0,0)
#300000 rgb(48,0,0)
#380000 rgb(56,0,0)
#400000 rgb(64,0,0)
#480000 rgb(72,0,0)
#500000 rgb(80,0,0)
#580000 rgb(88,0,0)
#600000 rgb(96,0,0)
#680000 rgb(104,0,0)
#700000 rgb(112,0,0)
#780000 rgb(120,0,0)
#800000 rgb(128,0,0)
#880000 rgb(136,0,0)
#900000 rgb(144,0,0)
#980000 rgb(152,0,0)
#A00000 rgb(160,0,0)
#A80000 rgb(168,0,0)
#B00000 rgb(176,0,0)
#B80000 rgb(184,0,0)
#C00000 rgb(192,0,0)
#C80000 rgb(200,0,0)
#D00000 rgb(208,0,0)
#D80000 rgb(216,0,0)
#E00000 rgb(224,0,0)
#E80000 rgb(232,0,0)
#F00000 rgb(240,0,0)
#F80000 rgb(248,0,0)
#FF0000 rgb(255,0,0)
Tons de Cinza
As cores cinzas obtêm-se combinando quantidades iguais de vermelho, verde e
azul. A cor branca cor responde ao cinza mais claro de todos e obtém-se
juntando 255 de vermelho, 255 de verde e 255 de azul (#FFFFFF em
hexadecimal). O preto é o cinza mais escuro de todos e obtém-se colocando
todas as cores em 0 (#000000 em hexadecimal) . Ent re estes dois valores
ext remos, temos 254 graus de intensidade possíveis.
A tabela seguinte dá uma idéia dos tons de cinza que podemos obter:
RGB(0,0,0) #000000
RGB(8,8,8) #080808
RGB(16,16,16) #101010
RGB(24,24,24) #181818
RGB(32,32,32) #202020
RGB(40,40,40) #282828
RGB(48,48,48) #303030
RGB(56,56,56) #383838
RGB(64,64,64) #404040
RGB(72,72,72) #484848
RGB(80,80,80) #505050
RGB(88,88,88) #585858
RGB(96,96,96) #606060
RGB(104,104,104) #686868

RGB(112,112,112) #707070
RGB(120,120,120) #787878
RGB(128,128,128) #808080
RGB(136,136,136) #888888
RGB(144,144,144) #909090
RGB(152,152,152) #989898
RGB(160,160,160) #A0A0A0
RGB(168,168,168) #A8A8A8
RGB(176,176,176) #B0B0B0
RGB(184,184,184) #B8B8B8
RGB(192,192,192) #C0C0C0
RGB(200,200,200) #C8C8C8
RGB(208,208,208) #D0D0D0
RGB(216,216,216) #D8D8D8
RGB(224,224,224) #E0E0E0
RGB(232,232,232) #E8E8E8
RGB(240,240,240) #F0F0F0
RGB(248,248,248) #F8F8F8
RGB(255,255,255) #FFFFFF
12.5 – Mais de 16 milhões de cores diferentes
Combinando as 256 cores de Vermelho com as 256 cores de Verde e as 256
cores do Azul, conseguimos criar mais de 16 mi lhões de cores di ferentes
(256×256×256) .
Prat icamente todos os moni tores dos computadores modernos estão
preparados para apresentar mais de 16 mi lhões de cores di ferentes. No
entanto, é preciso ter em mente que os novos sistemas móveis (celulares,
PDA’s, etc) , geralmente possuem paletas mais reduzidas. Alguns mostram
apenas 256 cores, outros 4096 ou 65536.
12.6 – Mais nomes de cores
As cores most radas no site abaixo possuem diversos códigos hexadecimais
relacionados a cores, todos estão def inidos nos padrões do W3C.
http:/ /www.cr iarweb.com/art igos/exemplos/tal ler js/ tabelacores.html
13. ENTIDADES, ACENTUAÇÃO E CARACTERES
ESPECIAIS
Alguns caracteres em HTML são chamados de caracteres reservados ou
marcadores, que ser iam os < (menor que) e > (maior que) , que quando
aparecem num documento HTML são interpretados pelo navegador como
del imitadores de instrução. Mas e se eu quiser simplesmente que esses
caracteres façam parte do meu texto e não sejam interpretados como
marcadores?!
No HTML, todos os caracteres têm um nome especial, ou código. Para acessar
um caractere, você precisa usar a seguinte convenção:
&nome-especial ;

onde o nome-especial é o nome ou um número associado ao símbolo gráf ico
que você deseja most rar no seu documento. Isso def ine algo que podemos
chamar de seqüência reservada, que é um grupo de caracteres que quando
interpretado pelo navegador produzi rá um caractere, que inclusive pode ser
um caractere reservado. No HTML, os nomes especiais são chamados de
ent idades.
Na próxima tabela mostramos alguns nomes especiais de caracteres e suas
respect ivas seqüências reservadas para acessá- los:
CARACTERES NOME ESPECIAL SEQUÊNCIA RESERVADA
á aacute á
Á Aacute Á
é eacute é
ã at i lde &at i lde;
ô oc i r c &oc i r c ;
& amp &
< l t &l t ;
> gt &gt ;
¢ cent &cent ;
£ pound £
¥ yen ¥
§ sec t ion &sec t ;
© copy r ight &copy ;
® regi s tered t rademar k ®
× mul t ipl i cat ion &t imes ;
÷ di v i s ion &di v ide;
Veja a lista completa de ent idades HTML no link abaixo:
http:/ /www.w3.org/TR/REC-html40/sgml /ent it ies.html
14. TABELAS
Tabelas auxi liam na visual ização de dados ou na divisão de sua página em
setores. Entenda por uma tabela HTML como sendo semelhante a uma tabela
que você desenhar ia numa folha de papel ou num out ro programa de
computador . O elemento principal de uma tabela é o table e aqui segue um
exemplo simples de tabela:
<table border=”1″>
<t r>
<td>Pr imei ra</td>
<td>Segunda</td>
</t r>
<t r>
<td>Ter cei ra</td>
<td>Quar ta</td>
</t r>
</table>
Cujo resultado é:
Pr imei ra Segunda
Ter cei ra Quar ta
Em HTML, as tabelas são divididas em l inhas e células. Na tabela acima, a
pr imei ra l inha contém as células Primeira e Segunda, enquanto que a
segunda l inha contém as células Terceira e Quarta.

Dent ro de um bloco table, os principais elementos que você ut il izará são o tr,
ou table row (l inha) , e o td, ou table data (célula) . Dessa forma, podemos
def ini r as linhas e as células da tabela. É mandatório que um bloco td esteja
def inido dent ro de um bloco tr, ou seja, que as células estejam dent ro de
l inhas.
No exemplo anter ior, cr iamos uma l inha com tr e em seguida, dent ro de um
bloco td, escrevemos o texto da célula (Primeira). Abr imos out ro bloco td
nesse mesmo bloco tr, onde colocamos o texto da segunda célula (Segunda) .
Depois, fechamos a l inha com o </tr> para em seguida abr i r uma nova l inha,
onde cr iamos as células contendo os textos Terceira e Quarta.
O atr ibuto border no elemento table serve para dar borda à tabela. Sem o
ele não ficar ia mui to dist into onde começa e termina cada uma das células:
<table>
<t r>
<td>Pr imei ra</ td>
<td>Segunda</ td>
</ t r>
<t r>
<td>Ter cei ra</ td>
<td>Quar ta</ td>
</ t r>
</table>
Pr imei ra Segunda
Ter cei ra Quar ta
Dent ro de um bloco td é possível colocar códigos HTML e inclusive cr iar até
tabelas dent ro de células! Veja só:
<table border=”1″>
<t r>
<td>Pr imei ra</ td>
<td>Segunda</ td>
</ t r>
<t r>
<td>Ter cei ra</ td>
<td>
<table border=”1″>
<t r>
<td>Quar ta</ td>
<td>Quinta</ td>
</ t r>
</ table>
</ td>
</ t r>
</ table>
Pr imei ra Segunda
Ter cei ra Quar ta Quinta
O código f ica compl icado o tanto quanto se queira.
Agora que você captou a essência das tabelas, vamos most rar dois t rês
atr ibutos que podem ser ut il izados em tabelas.

14.1 – Espaçamento entre células
Para cont rolarmos a distância entre duas células, ut i l izamos o at r ibuto
cellspacing, cujo argumento é dado em pixels:
<table cel lspacing=”20″ border=”1″>
<t r>
<td>Pr imei ra</ td>
<td>Segunda</ td>
</ t r>
<t r>
<td>Ter cei ra</ td>
<td>Quar ta</ td>
</ t r>
</ table>
Pr imei ra Segunda
Ter cei ra Quar ta
Para cont rolar o espaçamento ver t ical, ut i lizamos o cellpadding:
<table cel l spac ing=”20″ cel lpadding=”35″ border=”1″>
<t r>
<td>Pr imei ra</ td>
<td>Segunda</ td>
</ t r>
<t r>
<td>Ter cei ra</ td>
<td>Quar ta</ td>
</ t r>
</ table>
Pr imei ra Segunda
Ter cei ra Quar ta
14.2 – Preenchimento de células
Pode ser que você queira uma tabela onde a pr imeira linha tenha duas
células, a segunda com apenas uma célula e a terceira com t rês células.
Faremos o seguinte:
<table border=”1″>
<t r>
<td>Pr imei ra</ td>
<td>Segunda</ td>

</ t r>
<t r>
<td>Ter cei ra</ td>
</ t r>
<t r>
<td>Quar ta</ td>
<td>Quinta</ td>
<td>Sex ta</ td>
</ t r>
</ table>
Pr imei ra Segunda
Ter cei ra
Quar ta Quinta Sex ta
Percebeu como a tabela f icou cheia de buracos?! Para que as células
preencham os buracos, ut il izaremos o at r ibuto colspan:
<table border=”1″>
<t r>
<td>Pr imei ra</ td>
<td colspan=”2″>Segunda</ td>
</ t r>
<t r>
<td colspan=”3″>Ter cei ra</ td>
</ t r>
<t r>
<td>Quar ta</ td>
<td>Quinta</ td>
<td>Sex ta</ td>
</ t r>
</ table>
Pr imei ra Segunda
Ter cei ra
Quar ta Quinta Sex ta
Da mesma forma, se quisermos uma coluna com apenas uma célula e out ra
com duas, poder íamos usar o at ributo rowspan. Veja a di ferença ent re
usarmos e não usarmos o rowspan:
<table border=”1″>
<t r>
<td>Pr imei ra</ td>
<td>Segunda</ td>
</ t r>
<t r>
<td>Ter cei ra</ td>
</ t r>
</ table>
Pr imei ra Segunda
Ter cei ra
<table border=”1″>
<t r>
<td rowspan=”2″>Pr imei ra</ td>
<td>Segunda</ td>
</ t r>
<t r>
<td>Ter cei ra</ td>
</ t r>
</ table>

Segunda
Pr imei ra
Ter cei ra
14.3 – Largura de células e tabelas
Para escolher a largura de tabelas e células, uti l iza-se o já conhecido
atr ibuto width, cujo argumento é idêntico para o caso de imagens:
<table border=”1″ width=”200″>
<t r>
<td width=”30%”>Pr imei ra</ td>
<td width=”70%”>Segunda</ td>
</ t r>
<t r>
<td>Ter cei ra</ td>
<td>Quar ta</ td>
</ t r>
</ table>
Pr imei ra Segunda
Ter cei ra Quar ta
Note que quando o width é ut i lizado com o elemento table, a largura referese
à largura da página, enquanto que quando usado dent ro de um td a
largura é referente ao tamando da tabela. Isso tudo desde que o argumento
seja dado em porcentagem e não em pixels.
14.4 – Uso de tabelas
Aqui exploramos poucas possibil idades das tabelas HTML. Você pode ut i lizálas
para const rui r uma simples caixa para exibição de informações como fazer
uma página intei ra ut i lizando tabelas. Existem mui tos out ros elementos e
atr ibutos para ajudá- lo nessa tarefa. Consul te as referências para mais
informações sobre tabelas.
14.5 – Dicas
Os elementos <thead>, <tbody> e <tfoot> ainda são pouco usados devido
ao suporte def iciente oferecido pelos navegadores ant igos. Os navegadores
modernos já supor tam bem estes elementos.
14.6 – Elementos relativos a tabela
ELEMENTO DESCRIÇÃO
<table> Def ine uma tabela
<th> Def ine um cabeçalho para uma tabela
<t r> Insere uma nova l inha numa tabela
<td> Insere uma célula numa tabela
<capt ion> Def ine uma legenda para uma tabela
<colgroup> Agrupa colunas numa tabela
<col> Def ine os valores dos at r ibutos para uma ou mai s colunas da tabela
<thead> Def ine um cabeçalho de uma tabela
<tbody> Def ine um corpo numa tabela
<t foot> Def ine o rodapé de uma tabela

15. FORMULÁRIOS
Os formulár ios servem para recolher dados int roduzidos pelos visi tantes e
enviá- las para você, at ravés de seu servidor.
15.1 – Criar Formulários
Um formulár io é uma seção da página HTML que contém elementos que
permi tem ao visitante inser irem dados (elementos <tetxarea> e vár ios t ipos
de elementos <input>, <option> e <select>). Estes elementos permi tem
inseri r dados numér icos, textos pequenos, textos longos, selecionar elementos
em uma l ista com várias escolhas, responder faci lmente com respostas do t ipo
“sim” ou “não” , selecionar rapidamente uma opção em um pequeno grupo,
etc.
Os formulár ios são criados com o elemento <form>. Dent ro desse elemento
pr incipal colocamos diversos elementos para a inserção dos dados.
<form>
<input>
.
.
.
<input>
</form>
O elemento <form> por si só não faz com que o navegador desenhe nada na
página nem permite inser i r dados. Ele contém elementos que recolhem os
dados e possui at r ibutos que “dizem” ao navegador como e para onde devem
ser enviados os dados inser idos pelo visitante.
15.2 – input
O elemento que encont ramos com maior f reqüência em formulár ios é o
elemento <input>. O exemplo abaixo most ra um formulár io simples com dois
elementos input :
<form ac t ion=”proces sar .php” method=”pos t “>
Pr imei ro nome:
<input type=” tex t ” name=”pr imei ro_nome”>
<br>
Úl t imo nome:
<input type=” tex t ” name=”ul t imo_nome”>
</ form>
O formulár io acima ficará sendo exibido desta forma em seu navegador:
Pr imei ro nome:
Últ imo nome:
O elemento <input> pode assumir diversas formas com final idades
di ferentes.

15.3 – “Radio Buttons”
Os “Radio Buttons” são ut i l izados para se cr iar um grupo pequeno de opções
em que apenas podemos selecionar uma de cada vez.
<form ac t ion=”proces samento.asp”>
<input type=” radio” name=” sexo” value=”mas cul ino”> Mas cul ino
<br>
<input type=” radio” name=” sexo” value=” feminino”> Feminino
<form>
O exemplo acima ficará sendo exibido desta maneira em seu browser:
Mascul ino
Feminino
Repare que só podemos selecionar uma das opções acima.
15.4 – Checkboxes
As caixas de validação ( “checkboxes”) devem ser usadas sempre que
queremos que o visitante acei te (ou não) os i tens dentro de um pequeno
grupo. É permi t ido val idar mais de uma opção simul taneamente.
<form>
<input type=”checkbox” name=” car ro”>Eu tenho um car ro
<br>
<input type=”checkbox” name=” sur f “>Eu tenho uma prancha de sur f
<form>
O exemplo acima ficará sendo exibido desta forma em seu browser:
Eu tenho um car ro
Eu tenho uma prancha de sur f
Repare que podemos selecionar vár ias opções ao mesmo tempo.
15.5 – O atributo action e o botão de submissão
Quando o visitante cl ica sobre o botão “Submeter” (ou “Submit”), as opções
marcadas e o texto que foram inser idos no formulár io são enviados para você
(ou para seu servidor ) . O atr ibuto action do elemento <form> contém o
endereço (URL) do recurso da Web (site, download, email, etc ) que está
encar regado de real izar este processamento. É para lá que o conteúdo do
formulár io será enviado.
<form name=” input ” act ion=”exemplos /ac t ion.html ” method=”get “>
Nome de usuár io:
<input type=” tex t ” name=”usuar io”>
<input type=” submi t ” value=”Submeter “>
<form>
O exemplo acima ficará sendo exibido da seguinte forma em seu navegador:

Nome de usuár io:
Submeter
15.6 – Elementos para Formulários
ELEMENTO DESCRIÇÃO
<form> Def ine um formulár io para recolher dados inser idos pelo ut i l i zador
<input> Insere um campo para int roduz i r dados
<tex tarea> Def ine uma área de tex to (permi te inser i r tex to com vár ias l inhas e um
número i l imi tado de carac teres )
<label> Def ine um nome para um elemento
<f ieldset> Agrupa elementos num formulár io
<legend> Def ine uma legenda para um grupo de elementos do formulár io
<selec t> Def ine uma l i s ta com vár ias opções selec ionávei s
<optgroup> Def ine um grupo de opções
<opt ion> Insere mai s uma opção em uma l i s ta com vár ias opções selec ionávei s
<but ton> Def ine um botão que pode ser pres s ionado
<i s index> Desuso. Ut i l i ze <input> com o at r ibuto type=”but ton”
16. FRAMES HTML
As molduras ( “f rames ” ) são subjanelas definidas sobre a janela pr incipal do
browser. Estas subjanelas são cr iadas dividindo a janela em várias par tes.
Cada uma dessas partes pode apresentar uma página da Web di ferente. As
subjanelas são habi tualmente designadas por molduras, ou “frames “.
16.1 – Vantagens e desvantagens das molduras
As molduras (“f rames “) nos permi tem apresentar mais do que uma página
HTML numa única janela do browser. Cada página está dentro da sua própr ia
moldura (subjanela ) e é independente das restantes páginas. Apesar de
oferecerem alguma l iberdade ao faci li tarem bastante a cr iação de bar ras de
navegação em conjuntos de documentos com mui tas páginas e de tornarem
bastante mais rápido o carregamento das páginas, as molduras também
podem dar or igem a algumas di f iculdades, tais como:
· O cr iador de páginas vê-se obr igado a lidar com um número maior de
páginas ao mesmo tempo.
· A impressão do conteúdo do navegador f ica mais dif ícil .
· Algumas vezes será necessár io a ut i lização de um único elemento <a>,
para que ele real ize a l igação de duas ou mais páginas, o que obr iga a
ut i lizar JavaScr ipt.
16.2 – O Elemento frameset
· O elemento <frameset> def ine a forma como a janela do browser se
subdivide para acomodar as molduras.
· Este elemento divide a janela do browser em l inhas e colunas.

Os valores at r ibuídos às l inhas e às colunas indicam a quant idade de
área de écran que cada linha e cada coluna devem ocupar.
16.3 – O Elemento frame
O elemento <frame> def ine qual o documento HTML a colocar numa
determinada moldura.
No exemplo apresentado abaixo, temos um conjunto de molduras com duas
colunas. A pr imei ra coluna ocupa 25% da largura da janela do navegador,
enquanto a segunda coluna ocupa 75% da largura. O documento
moldura_a.html ocupa a primeira coluna e o documento moldura_b.html
ocupa a segunda coluna:
<f rameset col s=”25%,75%”>
<f rame s r c=”moldura_a.html “>
<f rame s r c=”moldura_b.html “>
<f rameset>
16.4 – Dicas
Quando uma moldura possui l inhas de contorno visíveis, você pode alterar
suas dimensões ar rastando as l inhas de l imite com o mouse. Para impedi r que
isso aconteça, ut i l ize o at r ibuto noresize=”noresize” dent ro da tag
<frame>
Ut i l ize a tag <noframes> para que os navegadores que não suportam frames
possam most rar um aviso na janela de quem está acessando o site.
<a href =”pagina_1.html ” target=”pr inc ipal “>Página 1</a><br>
<a href=”pagina_2.html ” target =”pr inc ipal “>Página 2</a><br>
<a href=”pagina_3.html ” target =”pr inc ipal “>Página 3</a>
Ao cl icar num l ink dent ro da moldura de navegação a nova página abre-se na
segunda moldura (à di reita ), que tem por nome “principal”.
16.5 – Elementos para Frames
ELEMENTO DESCRIÇÃO
<f rameset> Def ine um conjunto de molduras
<f rame> Def ine o conteúdo de uma subjanela (moldura, ou ” f rame” )
<nof rames> Def ine uma seção “nof rames ” para ser usada pelos browser s que não
supor tam molduras
<i f rame> Def ine uma subjanela (moldura) inter ior ( ” inl ine f rame” )
17. INSERÇÃO DE SCRIPTS
A inserção de scr ipts em suas páginas escr itas em HTML podem fazer com que
elas sejam capazes de reagir de forma dinâmica e interagir com seus
visi tantes.
17.1 – Inserir um script numa página HTML
A inserção de um scr ipt em HTML faz-se através do elemento <script>

<html>
<head>
</head>
<body>
<scr ipt type=” tex t / javas c r ipt “>
document .wr i te( “Olá Mundo! ” ) ;
</scr ipt>
</body>
</html>
O script acima fará o seguinte resul tado:
Olá Mundo!
17.1.1 – Um exemplo prático
<html>
<body>
<scr ipt type=” tex t / javas c r ipt “>
<! – –
document .wr i te( “Olá mundo! ” ) ;
– ->
</scr ipt>
</body>
</html>
17.2 – Como lidar com os browsers antigos
Um navegador que não reconhece o elemento <script> é muito ant igo e a
sua ut il idade na Web atual é mui to reduzida. Estes browsers, ao encont rarem
um elemento <script> (cujo signi f icado desconhecem), l imitam-se a
apresentar o texto que está dentro do elemento como se t ratasse de conteúdo
normal. Para impedir que isso aconteça, deve-se colocar o conteúdo do
elemento <script> dent ro de um comentár io. Deste modo, os navegadores
que não suportam scr ipts ignoram-nos, mas os out ros navegadores
reconhecem os scr ipts e executam-nos (apesar dos comentár ios ) . Mesmo com
browsers modernos, a ut i l ização de comentár ios nos scr ipts é uma prát ica
recomendável porque evi ta muitos problemas que surgem quando ut il izamos
scr ipts na linguagem XHTML.
17.2.1 – O Elemento <noscript>
Além de escondermos o código dent ro de um comentár io, uma out ra forma de
ajudar os browsers muito ant igos seria ut i lizar o elemento <noscript> para
oferecer conteúdos alternat ivos.
O elemento <noscript> é usado para compensar de alguma forma a falta de
execução de um scr ipt. O conteúdo deste elemento será apresentado pelos
browsers que não reconhecem scr ipts, mas será ignorado pelos browsers mais
modernos e não interfere na apresentação da página.
17.2.2 – Um exemplo
<html>
<body>
<s c r ipt type=” tex t / javas c r ipt “>
<! – –
document .wr i te( “Olá mundo! ” )

– ->
</ s c r ipt>
<noscr ipt>
O seu browser não supor ta
JavaSc r ipt !
</noscr ipt>
</body>
</html>
17.3 – Elementos para inserir scripts e código
Elemento Descrição
<s c r ipt> Def ine um bloco que contém um s c r ipt
<nos c r ipt> Def ine tex to al ternat i vo para ser apresentado sempre que o s c r ipt não é
executado
<objec t> Insere um objeto na página
<param> Def ine parâmet ros para cont rolar o objeto
<applet> Desuso. Use <objec t>
18. OUTRAS POSSIBILIDADES
O pr incípio de funcionamento do HTML já deve estar sól ido em sua mente, se
é que você leu tudo o que antecede esta seção. Para que este texto não se
torne enfadonho, passaremos para a Especi f icação HTM, desenvolvida pelo
consórcio da web, a tarefa de detalhar cada um dos tópicos l istados a segui r.
Espec i f i cação HTML (em inglês ) ht tp: / /www.w3.org/TR/html4
Espec i f i cação HTML (em espanhol ) ht tp: / /html . conc lase.net /w3c /html401-es / cover .html
Consór c io da web doc s . indymedia.org/ v iew/Sy sadmin/GuiaHtml#O_cons_r c io_da_Web
· Texto est ruturado: blocos que permi tem es t ruturar lógi ca e v i sualmente seu tex to
ht tp: / /www.w3.org/TR/html4/ s t ruc t / tex t .html
· Listas: blocos para a c r iação de l i s tagens
ht tp: / /www.w3.org/TR/html4/ s t ruc t / l i s t s .html
· Frames: permi te que a página ex ibida no navegador seja formada por mai s de um
arqui vo html (não recomendado, veja em Acessibi l idade)
ht tp: / /www.w3.org/TR/html4/present / f rames .html
· Formulár ios: pos s ibi l i ta a interação do seu html com apl i cações web.
ht tp: / /www.w3.org/TR/html4/ interac t / forms .html
· Scr ipt ing: permi te a automat i zação de cer tas seções do seu documento.
ht tp: / /www.w3.org/TR/html4/ interac t / s c r ipt s .html
· Meta- informações: fornecem dados a respei to do própr io documento, como data,
conjunto de carac teres usado, data de val idade, et c
ht tp: / /www.w3.org/TR/html4/ s t ruc t /global .html#h-7.4.4
Essas funcional idades permi t irão que você faça documentos HTML bem
completos. Prosseguiremos agora a parte f inal desta apost i la, onde serão
abordados alguns temas bem bacanas ;- )
19. COLOCANDO SEU SITE NO AR
Até agora somente você conseguiu visualizar suas páginas. Chegou a hora de
most rá- las para o mundo todo.

Para publ icar seu trabalho na Internet, você precisa somente de espaço em
um servidor e um programa FTP gratui to.
Se você costuma acessar a Internet já deve ter visto que existem vários
serviços gratuitos de hospedagem de si tes. Seu endereço no servidor será
alguma coisa parecida com ht tp: //home.servidor.com/~nomedousuar io. Você
tem que ativar o serviço. Informe-se como fazer isto na documentação
fornecida pelo serviço de hospedagem.
Outra opção é obter um espaço gratuito de um servidor na Internet. Isto é
igual a regist rar uma conta de e-mail (como por exemplo, obter um endereço
de e-mai l do hotmail) você pode registrar-se gratuitamente para obter
um espaço em um servidor na Internet. Existem vár ias companhias que
oferecem este serviço gratuito – ent re elas a Angelf i re (cl ique em “Sign Up” e
escolha membro gratui to – ou veja mais abaixo uma lista com sérvios gratui tos
de hospedagem) – isto é um processo bem rápido.
Angel f i re ht tp: / /angel f i re. l y cos . com
Para acessar o servidor você precisa conhecer o “Nome do seu servidor”
(por exemplo, f tp.angel f ire.com) e ter um nome de usuár io e senha.
19.1 – Isto é tudo que eu preciso?!
Para acessar o servidor e publ icar as páginas você precisa de um programa
FTP. Você não deve ter um programa destes ainda, mas existem vários deles
na Internet para download e são gratui tos.
Existem mui tos programas FTP. Um dos melhores é o Fi leZi l la, e é gratuito .
Você pode obter o Fi leZi lla em ht tp: // fi lezi lla.sourceforge.net
19.2 – Como eu faço envio os arquivos do meu site?!
Abaixo fornecemos um exemplo de como fazer isto usando o servidor Angel f ire
e o programa FileZil la. Este procedimento é mais ou menos igual para
qualquer programa FTP.
Conecte-se à Internet e abra o programa FTP. Insi ra “Host Name”
( ” ftp.angelf i re.com” no “Address” ) , nome do usuário (em “User “) e senha
(em “Password”) cl ique “Connect”. Você agora tem acesso ao servidor. Em
um lado da janela do programa você verá os di retór ios e arquivos do seu
computador (“Local Site” ) , e no out ro o do servidor ( “Remote Si te”) :

Ache os seus documentos HTML e imagens a serem publicadas (no “Local
site” ) e t ransfi ra para o servidor ( “Remote si te”) simplesmente dando um
cl ique duplo nos arquivos. Agora o mundo todo poderá ver seu si te.
Dê a uma das páginas o nome de “index.htm” (ou ” index.html” ) e ela será
automaticamente a página de ent rada no si te, ou seja, basta digitar
http:/ /www.angel fi re.com/ folk/htmlnet (sem qualquer nome de arquivo) e
abri rá http: //www.angel fi re.com/ folk/htmlnet/ index.htm
Para mais adiante será uma boa idéia comprar um domínio (espaço no
servidor ) só para você (www.seu-nome.com) e assim ter um nome do si te bem
mais curto e fáci l de guardar que aqueles fornecidos por um serviço gratui to
da Internet . Você pode encont rar na Internet várias f i rmas que vendem
domínio. Faça uma busca do Google.
LISTA DE SITES COM INFORMAÇÕES SOBRE HOSPEDAGEM GRATUITA
L ink 01
ht tp: / /neos i te. i logi c . com.br /ar t igos /hospedagemgrat i s .htm
L ink 02
ht tp: / / c r iandos i te. v i rgula. com.br /
L ink 03
ht tp: / /www.babooforum. com.br / idealbb/v iew.asp? topi c ID=425835
20. HTML AVANÇADO
Esta parte assume que você já t reinou HTML o suf iciente para estar
fami l iarizado com a l inguagem e fazer si tes na internet . Daqui em diante, este
art igo apenas fará um tour por out ras linguagens e tecnologias que podem ser

ut i lizadas para organizar seus documentos, separar a aparência do conteúdo,
faci l itar buscas e criar documentos que, sobretudo não ut i lizem formatos que
venham a ser tornar obsoletos.
Estarei dando aqui uma visão geral de todas as tecnologias usadas atualmente
que podem ser integradas ou tem alguma relação com o HTML e l inguagens de
marcação:
· Folhas de Esti lo (CSS)
· Templates
· Acessibi lidade
· Sí tios dinâmicos ou automat izados
· Web standards e val idação
20.1 – Folhas de Estilo (CSS)
Folhas de est ilo permi tem que você separe o conteúdo do seu documento da
sua representação gráf ica. Como exemplo, ao invés de uma expressão do tipo:
<font face=” f i xed” s i ze=”+2″ color=” red”>Es t i lo mi s turado com o tex to</ font>
Você ut il iza algo mais organizado, como:
<di v c las s=”es t i losa”>Es t i lo separado do tex to</di v>
E então você definir ia uma classe de nome est ilosa onde os atr ibutos, como
t ipo de fonte, tamanho e cor ser iam def inidos. Essa def inição pode inclusive
estar armazenada num arquivo separado do seu documento, sendo que neste
úl t imo é necessár io apenas uma referência ao arquivo que contenha os
est ilos.
O mecanismo mais uti l izado para cr iar folhas de esti lo para um arquivo HTML
é o Cascading Style Sheet , ou CSS. Em CSS, o est i lo est ilosa para o exemplo
acima poder ia ser def inido como:
di v .es t i losa {
color : red;
font : f i xed;
font – s i ze: 14;
}
As vantagens de usar folhas de est i lo são:
· Separação ent re a informação que o seu texto pretende passar e sua
apresentação
· Permite que toda a apresentação do seu texto seja mudada sem que
seja preciso alterar o html, bastando apenas que o arquivo que
contenha a folha de est i lo seja al terado
· Mais organização para seus documentos
· Faci l ita a cr iação de Templates
Pela clareza e organização resultante do uso de folhas de estilo,
muitas tags e atributos do HTML são consideradas obsoletas ou seu
uso é depreciado, inclusive muitas das quais ensinadas neste tutorial.
Sempre que possível, utilize CSS nos seus documentos.

20.2 – Templates
Quem usa HTML provavelmente não o faz para escrever um único documento e
sim um grande número deles. Se você está redigindo um texto ou fazendo um
site composto por mui tos arquivos, provavelmente você deseja que todos seus
documentos HTML tenham a mesma aparência ou o mesmo est ilo.
Para uni formizar o est ilo e a apresentação, você pode cr iar um modelo,
também conhecido como Template, que contenha o esqueleto de qualquer
página de um site ou texto que seja dividido em vários arquivos. Esse
template pode conter menus, tabelas e todos os campos que você for ut i lizar.
Existem ainda os motores de template, que são softwares que juntam o
conteúdo com os templates e produzem páginas HTML. Cr iar um template
depende do gosto de cada um, porém se você pretende uti l izar um sít io
automatizado existem vár ios motores de template que você pode ut i lizar,
como por exemplo:
· FreeMarker: é um template engine. Ele faci l ita a geração de textual
(HTML, PostScr ipt, TeX, source code, etc) e ajuda a separar edição de
design da lógica. Integrado com servlets, XML, Python e mais.
· Smarty: é uma classe de templates. Funciona de uma forma que separe
inter face da lógica de programação e tem por objet ivo, faci l itar e
melhorar o desenvolvimento de qualquer aplicação em PHP.
20.3 – Acessibilidade
Uma consideração importante ao escrever seus documentos HTML é o quão
usável e acessível ele é, tanto em termos visuais quanto na organização do
conteúdo. Lembre-se que todos os t ipos de pessoas podem acessar seu site,
desde as leigas até as especial istas no assunto que você t rata, desde aquelas
que já conhecem o site até as que nunca ouvi ram falar dele. Seu conteúdo
também precisa estar organizado para que ao longo do tempo as coisas não se
percam.
Para ter um bom nível de usabi l idade em seu site, siga as seguintes
recomendações:
· Use esquemas simples
· A navegação do seu sít io deve ser intuit iva
· Cr ie seções do t ipo “Sobre este sí t io”, “Quem somos”, etc
· Use índices na medida do possível
· Escreva resumos
· Use referências
· Use uma lógica para os nomes de arquivos e pastas
· Evite usar f rames, elas bloqueiam o modo natural de se navegar pela
web

Escolha mais de um est i lo para seu sít io e evite usar combinações de
cores que di f icultem a visual ização
· Disponibi l ize, na medida do possível, seu conteúdo em mais de um
formato: texto simples, documento HTML, etc
· Disponibi l ize seu conteúdo em copylef t ou em out ras licenças
· Val ide seu HTML: ver i fique se seu código HTML está vál ido ou se
existem incor reções
A acessibi lidade de um site também leva em consideração os portadores de
necessidades especiais.
O W3C possui l inhas gerais de recomendação quanto à acessibi l idade do
conteúdo de documentos que usam l inguagem de marcação.
20.4 – Sites dinâmicos ou automatizados
Seu texto ou si te pode ser composto simplesmente por meia dúzia de
documentos HTML e ter pouca ou nenhuma atualização ao longo da sua
existência. Caso nada disso seja verdade e você está fazendo algo grande ou
então você não tem tempo para escrever seu código HTML na mão, talvez seja
o momento de considerar a adoção de um sistema automat izado. Destaco três
t ipos deles:
· Gerenciadores de conteúdo
· Blogs
· Wikis
Gerenciadores de conteúdo são softwares que rodam em servidores e que
administ ram informações disponíveis em sites. Muitos sites na web são apenas
arquivos html, mas também existem sites automat izados que permitem
armazenar o conteúdo das páginas num banco de dados e a parti r desse banco
cr iar muitas páginas html e ainda manter o sistema de busca e a publ icação
sem que para isso o usuár io precise saber html ou qualquer out ra linguagem
de marcação. Alguns gerenciadores de conteúdo permitem que existam
usuár ios capazes de adicionar comentár ios em publicações existentes ou até
mesmo cr iar suas própr ias páginas at ravés do preenchimento de formulários.
Os Blogs são casos especiais de gerenciadores de conteúdo que funcionam
como diár ios ou coluna de editor ial, onde o dono do blog adiciona texto,
imagens e código HTML no site apenas preenchendo um formulár io.
Já os Wikis são ferramentas que permi tem qualquer pessoa cr iar ou edi tar um
texto uti l izando uma l inguagem de marcação especial e mais simples de ser
ut i lizada do que o HTML. Duas caracter íst icas pr incipais dos sistemas Wiki
são: você pode cr iar faci lmente uma nova página simplesmente escolhendo um
nome especial para ela e escrever na página já existente. A out ra
característ ica dos wikis é a preservação das modi f icações: o wiki possui um
histórico de todas as modi f icações feitas num documento.
Os gerenciadores de conteúdo, blogs e wikis são escr i tos nalguma l inguagem
de programação como PHP, Perl , Python, Java, Ruby e muitas vezes uti l izam
um banco de dados para armazenar o conteúdo. Com um pouco de estudo,
você pode escrever seu própr io sistema ou então ut il izar uma solução pronta,
como por exemplo:

Gerenciadores de conteúdo: Drupal, SPIP, etc
· Wikis: PmWiki, PhpWiki, MediaWiki, TWiki, etc
· Blogs: b2, WordPress, etc
20.5 – Web standards e validação
Nesta l ição você aprenderá mais alguns concei tos teór icos do HTML.
20.5.1 – O que mais há para conhecer sobre HTML?!
HTML pode ser escr ito de vár ias manei ras. O navegador está apto a ler HTML
escri to de várias manei ras. Podemos dizer que HTML tem mui tos dialetos. Esta
é a razão porque alguns websi tes são apresentados de formas diversas em
di ferentes navegadores.
Desde o aparecimento da Internet tem sido fei tas vár ias tentat ivas para se
normatizar o HTML notadamente at ravés do Wor ld Wide Web Consort ium
(W3C) fundado por Tim Berners-Lee (yep! o grande sujeito que inventou o
HTML) . Mas, este tem sido um árduo e longo caminho.
No passado – quando você t inha que comprar um navegador – o Netscape
dominava o mercado de navegadores. Àquela época as normas para o HTML
estavam nas suas versões 2.0 e 3.2. Mas pelo fato de dominar 90% do
mercado a Netscape não ter ia – e não teve – que se preocupar muito com
normas. Pelo cont rár io, a Netscape inventava seus própr ios elementos de
marcação que não funcionavam em outros navegadores.
Por muitos anos a Microsoft ignorou completamente a Internet. Em
determinado momento, resolveu compet ir com a Netscape e lançou seu
navegador própr io. A pr imei ra versão do navegador da Microsoft ‘s, o Internet
Explorer, não era melhor do que o Netscape no suporte às normas do HTML.
Mas, a Microsoft resolveu dist r ibui r seu navegador gratuitamente ( isto sempre
agrada a todos) e o Internet Explorer em pouco tempo tornou-se o navegador
mais usado e mais popular.
A part i r das versões 4 e 5 a Microsoft anunciava que seus navegadores
ofereciam cada vez maior supor te às normas HTML do W3C. A Netscape não se
movimentou para atual izar seu navegador e cont inuou a colocar no mercado a
velha e desatual izada versão 4.
O que vem a segui r é história. Nos dias atuais as normas HTML estão na sua
versão 4.01 e no XHTML. Hoje em dia é o Internet Explorer que detém quase
90% do mercado. O Internet Explorer ainda tem seus elementos própr ios, mas
oferece suporte para as normas HTML do W3C. Os navegadores Mozil la, Opera
e Netscape também supor tam as normas.
Então, quando você codi f ica HTML de acordo com as normas do W3C, você
está construindo um websi te para ser visual izado em todos os navegadores –
não só agora mas também no futuro. E fel izmente, tudo o que você aprendeu
neste tutor ial está de acordo com a mais nova versão do HTML, que é o
XHTML.

20.5.1.1 – Legal!! Posso anunciar?!
Devido à existência de di ferentes tipos de HTML, você precisa informar ao
navegador qual é o “dialeto” do HTML e no seu caso você aprendeu XHTML.
Para informar ao navegador, você usa o Document Type Def init ion . O
Document Type Def init ion deve ser escri to sempre no topo do documento:
Exemplo 1:
<!DOCTYPE html PUBLIC ” -//W3C//DTD XHTML 1.0 St r ict//EN”
“ht tp: / /www.w3.org/TR/ xhtml1/DTD/ xhtml1- s t r i c t .dtd”>
<html xmlns=”ht tp: / /www.w3.org/1999/ xhtml ” lang=”pt -br “>
<head>
<t i t le>Tí tulo</ t i t le>
</head>
<body>
<p>tex to texto</p>
</body>
</html>
Além do Document Type Def inition, que informa ao navegador que você
está codi f icando XHTML, você precisa ainda adicionar informação ext ra na tag
html , usando os at r ibutos xmlns e lang.
xmlns é abreviação de “XML-Name-Space” e deve ter sempre o valor
http:/ /www.w3.org/1999/xhtml. Isto é tudo o que você precisa saber. Se você
tem o hábito ou gosta de se aprofundar e conhecer coisas compl icadas poderá
ler mais sobre namespaces no si te do W3C.
namespaces no s i te do W3C – ht tp: / /www.w3.org/TR/1999/REC-xml -names -19990114
No atr ibuto lang você especí f ica em que língua (aqui t rata-se de l inguagem
humana) o documento é escr ito. As abreviaturas para as l ínguas existentes no
mundo todo, estão nas ISO 639 standard . No exemplo acima a l íngua def inida
no at r ibuto é o por tuguês do Brasi l (“pt-br “) .
Uma DTD informará ao navegador como deve ser l ido e renderizado o HTML.
Use o exemplo mostrado, como um template para todos os seus futuros
documentos HTML.
O DTD é impor tante ainda, para a val idação da página.
20.5.1.2 – Validação?! Porquê deveria eu fazer isto?!
Insi ra o DTD nas suas páginas e poderá verif icar erros no seu HTML, usando o
validador gratuito do W3C. ( ht tp: //validator.w3.org )
Para testar o val idador faça o seguinte: crie uma página e publ ique na
Internet. A segui r entre em http: //val idator.w3.org e lá digite o endereço (a
URL) da sua página, depois clique no botão val idar. Se seu HTML est iver
cor reto, vai aparecer uma mensagem de congratulações. Se não, será
apresentada uma l ista de er ros, informando o quê está er rado e onde. Cometa
alguns er ros proposi tais no seu código para ver if icar o que acontece.
O val idador não é úti l somente no encont ro de er ros. Alguns navegadores
tentam interpretar os er ros comet idos pelos desenvolvedores e consertar o

código most rando a página corretamente. Em navegadores assim você nunca
encontrará er ros no própr io navegador. Já outros navegadores não aceitam o
er ro e apresentam a página ar ruinada ou mesmo nem apresentam. O val idador
então ajuda você a encontrar er ros que você não tenha nem idéia de que
exist iam
Sempre val ide suas páginas, para ter cer teza que elas serão most radas
cor retamente em todos os navegadores.
21 – GUIA DE REFERÊNCIA RÁPIDA
Como resumo de todo o código HTML apresentado até agora, deixo algumas
tabelas de referência rápida que podem ser até impressas e guardadas no
bolso.
Características gerais de um documento HTML
CÓDIGO FUNÇÃO EXIGE FECHAMENTO
html bloco interno é cons iderado documento html s im
head bloco que def ine a cabeça do documento s im
t i t le bloco que def ine o t í tulo do documento s im
body bloco interno é cons iderado o corpo do html s im
Aparência do documento
CÓDIGO FUNÇÃO EXIGE FECHAMENTO
b bloco em negr i to s im
i bloco em i tál i co s im
u bloco subl inhado s im
font muda as carac ter í s t i cas da fonte s im
pre mantém o texto pré- formatado s im
Quebra de linha, parágrafos e divisões
CÓDIGO FUNÇÃO EXIGE FECHAMENTO
br quebra de l inha não
center tex to cent ral i zado s im
p parágrafos recomendado
di v c r ia uma di v i são s im
Atributos diversos
CÓDIGO ATRIBUTO FUNÇÃO VALORES POSSÍVEIS
p, di v al ign al inhamento let f , r ight , jus t i f y , center
font face fonte nome da fonte
font s i ze tamanho -7 a +7
font color cor ver no tópi co de cores
Espaçamento e entidades
CÓDIGO FUNÇÃO EXIGE FECHAMENTO
  espaço s imples não é uma tag
O documento HTML básico
<html>
<head>
<t i t le>Aqui colocamos o t í tulo</ t i t le>
</head>
<body>
Aqui colocamos os conteúdos v i s í vei s
</body>

<html>
Elementos de cabeçalho (para capítulos ou secções)
<h1>Cabeçalho maior</h1>
<h2>. . . </h2>
<h3>. . . </h3>
<h4>. . . </h4>
<h5>. . .</h5>
<h6>Cabeçalho menor</h6>
Elementos para texto
<p>I s to é um parágrafo</p>
<br> (mudança for çada de l inha)
<hr> ( l inha hor i zontal )
<pre>I s to é tex to pré- formatado</pre>
Estilos lógicos
<em>I s to é tex to enfat i zado</em>
<s t rong>I s to é tex to for te</ s t rong>
<code>I s to é código de computador</ code>
Estilos f ísicos
<b>I s to é tex to em negr i to</b>
<i>I s to é tex to em i tál i co</ i>
Ligações e âncoras
<a href=”ht tp: / /www. t iagosouza. com/ “>I s to é uma L igação</a>
<a href=” ht tp: / /www. t iagosouza. com/ “><img s r c=”URL ” al t=”Tex to al ternat i vo”></a>
<a href=”mai l to: t iagocopa@gmai l . com “>Env iar e-mai l</a>
Uma âncora com nome:
<a name=”di cas ” id=”di cas “>Di cas Útei s</a>
<a href=”#di cas “>Sal tar para a Sec ção de Di cas</a>
Lista não ordenada
<ul>
<l i>Pr imei ro i tem</ l i>
<l i>I tem seguinte</ l i>
</ul>
Lista ordenada
<ol>
<l i>Pr imei ro i tem</ l i>
<l i>I tem seguinte</ l i>
</ol>
Lista de def inições
<dl>
<dt>Pr imei ro termo</dt>
<dd>Def ini ção</dd>
<dt>Termo seguinte</dt>
<dd>Def ini ção</dd>
</dl>
Tabelas
<table border=”1″>
<t r>
<th>um cabeçalho</ th>
<th>out ro cabeçalho</ th>
</ t r>
<t r>
<td>algum tex to</ td>
<td>mai s tex to</ td>
</ t r>
</ table>

Subjanelas (molduras, ou “frames”)
<f rameset col s=”25%,75%”>
<f rame s r c=”pagina1.html “>
<f rame s r c=”pagina2.html “>
<f rameset>
Formulários
<form ac t ion=”ht tp: / /www. t iagosouza. com/proces sar .php” method=”pos t /get “>
<input type=” tex t ” name=” las tname” value=”Nabo” s i ze=”30″ max length=”50″>
<input type=”pas sword”>
<input type=” chec kbox ” chec ked=” chec ked”>
<input type=” radio” chec ked=” chec ked”>
<input type=” submi t “>
<input type=” reset “>
<input type=”hidden”>
<selec t>
<opt ion>Rabanetes
<opt ion selec ted>Alhos
<opt ion>Cebolas
</ selec t>
<tex tarea name=”Comentar io” rows=”60″ col s=”20″></ tex tarea>
</ form>
Entidades
&l t ; representa o mesmo que <
&gt ; representa o mesmo que >
© representa o mesmo que ©
Outros Elementos
<! – – I s to é um comentár io – ->
<bloc kquote>
Tex to c i tado a par t i r de uma fonte ex terna.
</bloc kquote>
<addres s>
Endereço (1ª l inha)<br>
Endereço (2ª l inha)<br>
Cidade<br>
</addres s>
22 – REFERÊNCIAS COMPLETAS DE HTML 4.01
Todos os elementos ordenados alfabet icamente:
ELEMENTO DESCRIÇÃO
<! – – . . . – -> Permi te inser i r um comentár io
<!DOCTYPE> Indi ca o t ipo de documento usado na página
<a> Insere uma âncora (mar ca que ident i f i ca o local do documento em que se
encont ra)
<abbr> Insere uma abrev iação
<ac ronym> Insere um ac rônimo
<addres s> Insere um endereço (pos tal )
<applet> Insere um applet (miniapl i cação em Java) Desuso (ut i l i ze <object>)
<area> Def ine uma área sobre uma imagem
<b> Insere tex to car regado (negr i to ou “bold” )
<base> Def ine o URL base de onde par tem todas as l igações relat i vas da página
<basefont> Def ine o t ipo de let ra base para a página. Desuso (usar CSS)
<bdo> Def ine a di reção em que o tex to é apresentado
<big> Tex to com let ra maior
<bloc kquote> Def ine uma c i tação ex tensa
<body> Elemento que contém o corpo ( conteúdo v i s í vel ) da página

<br> Provoca uma mudança de l inha for çada
<but ton> Insere um botão num formulár io
<capt ion> Def ine a legenda de uma tabela
<center> Tex to al inhado ao cent ro. Desuso.
<c i te> Insere uma c i tação
<code> Def ine o tex to que é código de computador
<col> Def ine os at r ibutos para as colunas de uma tabela
<colgroup> Agrupa colunas numa tabela
<dd> Insere tex to que des c reve uma def ini ção
<del> Def ine tex to que foi apagado ( “deleted” )
<di r> Mos t ra uma l i s ta de di retór io. Desuso.
<dfn> Insere a def ini ção de um termo
<di v> Insere uma di v i são (ou seção) dent ro da página
<dl> Insere uma l i s ta de def ini ções ( “def ini t ion l i s t ” )
<dt> Insere a def ini ção de um termo
<em> Insere tex to enfat i zado (es c reve- se em i tál i co)
<f ieldset> Elemento que contém um grupo de campos de um formulár io
<font> Def ine o t ipo de let ra, o tamanho e a cor a apl i car ao tex to. Desuso.
(usar CSS)
<form> Insere um formulár io
<f rame> Def ine uma subjanela (moldura) dent ro da janela pr inc ipal do browser . A
subjanela contém a sua própr ia página da Web
<f rameset> Insere um conjunto de subjanelas ( ” f rames ” )
<h1> a <h6> Def ine cabeçalhos ( “header s ” ) desde o ní vel 1 (mai s impor tante) até ao
ní vel 6 (menos impor tante)
<head> Contém informação impor tante a respei to do documento que não deve ser
apresentada no corpo da página
<hr> Desenha uma l inha hor i zontal
<html> Elemento dent ro do qual são colocados todos os res tantes elementos da
página
<i> Insere tex to para ser es c r i to com carac teres i tál i cos
<i f rame> Insere no inter ior da página da Web uma subjanela ( ” f rame” ) contendo a
sua própr ia página da Web
<img> Insere uma imagem
<input> Def ine uma cai xa para inser ção de tex to num formulár io
<ins> Def ine tex to que foi inser ido em subs t i tui ção de out ro mai s ant igo
<i s index>
<kbd> Def ine tex to inser ido at ravés do tec lado
<label> Def ine uma mar ca que será as soc iada a um cont rolo. Ao c l i car nes sa
mar ca, o cont role que es t iver as soc iado deverá ser ac ionado.
<legend> Def ine um t í tulo num elemento <f ieldset>
<l i> Def ine um i tem de uma l i s ta
<l ink> Faz referênc ia a um recur so ex terno e es tabelece a l igação com ele
<map> Def ine um mapeamento sobre uma imagem
<menu> Def ine uma l i s ta de menu. Desuso.
<meta> Dá informação sobre aqui lo que o documento contém
<nof rames> Def ine um bloco nof rames , o qual só será apresentado se o browser não
supor tar os elementos <f rameset> e <f rame>
<nos c r ipt> Def ine um bloco nos c r ipt , o qual só será apresentado se o browser não
supor tar o elemento <s c r ipt>
<objec t> Insere um objeto dent ro da página ( como um f i lme em Flash, por
exemplo)
<ol> Def ine uma l i s ta ordenada
<optgroup> Def ine um grupo de opções
<opt ion> Def ine uma opção numa l i s ta de um formulár io
<p> Insere um parágrafo
<param> Def ine um parâmet ro para o elemento <objec t>
<pre> Def ine tex to pré- formatado
<q> Def ine uma c i tação cur ta
<s> Def ine tex to que se es c reve com um t raço hor i zontal sobrepos to
( ” s t r i kethrough” ) Desuso. (usar CSS)

<samp> Def ine uma amos t ra ( ” sample” ) de código de computador
<s c r ipt> Insere um s c r ipt
<selec t> Def ine uma l i s ta com i tens selec ionávei s
<smal l> Def ine tex to menor ( ” smal l ” )
<span> Insere uma di v i são (ou sec ção) dent ro da página
<s t r i ke> Def ine tex to que se es c reve com um t raço hor i zontal sobrepos to
( ” s t r i kethrough” ) Desuso (usar CSS) .
<s t rong> Def ine tex to mai s for te ( será es c r i to em negr i to)
<s ty le> Def ine es t i los CSS a apl i car na página
<sub> Def ine tex to que f i ca al inhado um pouco mai s abai xo ( ” subs c r ipt ” )
<sup> Def ine tex to que f i ca al inhado um pouco mai s ac ima ( ” super s c r ipt ” )
<table> Def ine uma tabela
<tbody> Def ine um corpo ( “body ” ) numa tabela
<td> Def ine uma di v i são, ou célula, numa tabela
<tex tarea> Def ine uma área para inser ção de tex to num formulár io
<t foot> Def ine o rodapé de uma tabela
<th> Def ine o cabeçalho de uma coluna numa tabela
<thead> Def ine o cabeçalho de uma célula numa tabela
<t i t le> Def ine o t í tulo da página
<t r> Def ine uma l inha de células numa tabela
<t t> Def ine tex to que imi ta o de uma máquina de es c rever ant iga ( ” teletype
tex t ” )
<u> Def ine tex to subl inhado ( “under l ined” ) Desuso (usar CSS)
<ul> Def ine uma l i s ta não ordenada ( “unordered l i s t ” )
<var> Def ine uma var iável
23. ATRIBUTOS ESPECIAIS DE HTML 4
23.1 – Atributos intrínsecos
Quase todos os elementos do HTML possuem atr ibutos. Os atr ibutos
especí ficos de cada elemento são descritos junto à descr ição do própr io
elemento na Referência de HTML (veja mais acima) . Os atr ibutos
apresentados na l ista seguinte fazem par te do núcleo ( “core” ) da linguagem
HTML e são raras as exceções que podem ser usadas em todos os elementos
do HTML 4, porque são at r ibutos intr ínsecos da l inguagem.
23.2 – Atributos nucleares ou intrínsecos (“Core Attributes “)
Não podem ser usados com os elementos base, head, html, meta, param,
script, style, e title.
ATRIBUTO VALOR DESCRIÇÃO
c las s c las s_rule ou s ty le_rule A c las se (CSS) a que per tence o elemento
id id_name Um nome úni co (não deve ser repet ido no
mesmo documento) para o elemento
s ty le s ty le_def ini t ion Def ini ção de um es t i lo dent ro do própr io corpo
do documento ( ” inl ine s ty le def ini t ion” )
t i t le tool t ip_tex t Tex to a apresentar como di ca
23.3 – Atributos lingüísticos
Não pode ser usado com os elementos base, br, frame, frameset, hr,
iframe, param e script.

ATRIBUTO VALOR DESCRIÇÃO
di r l t r | r t l Def ine a di reção do tex to
lang language_code Def ine o código da l íngua usada na es c r i ta dos tex tos
23.4 – Atributos de teclado
ATRIBUTO VALOR DESCRIÇÃO
ac ces s key carác ter ( cor responde a
uma tec la)
Def ine um atalho do tec lado ( seqüênc ia de
tec las ) que permi te aceder mai s rapidamente a
um elemento da página
tabindex número Def ine o número de ordem ( ” tab order ” ) do
elemento no aces so at ravés da tec la tab
23.5 – Eventos de janela
A par ti r da versão 4 da linguagem HTML prat icamente todos os elementos
podem desencadear eventos que têm como resposta a execução de ações por
parte do navegador, como por exemplo, executar códigos JavaScr ipt quando o
visi tante clicar num determinado elemento. A lista apresentada mais abaixo
most ra os atr ibutos que podemos inser i r nos elementos do HTML para defini r
ações de resposta a eventos.
Só podem ser usados com os elementos <body> e <frameset>
ATRIBUTO VALOR DESCRIÇÃO
onload s c r ipt Sc r ipt a executar quando o documento acabar de ser
car regado
onunload s c r ipt Sc r ipt a executar quando o documento for abandonado
23.6 – Eventos para formulários
Só podem ser usados com elementos associados a um formulár io:
ATRIBUTO VALOR DESCRIÇÃO
onchange s c r ipt Sc r ipt a executar quando o valor cont ido no elemento sof rer
uma al teração
onsubmi t s c r ipt Sc r ipt a executar quando o formulár io for submet ido
onreset s c r ipt Sc r ipt a executar quando o conteúdo do formulár io for
repos to nos valores ini c iai s
onselec t s c r ipt Sc r ipt a executar quando o elemento for selec ionado
onblur s c r ipt Sc r ipt a executar quando o elemento perder o foco
onfocus s c r ipt Sc r ipt a executar quando o elemento ganhar o foco
23.7 – Eventos de teclado
Não podem ser usados com os elemento base, bdo, br, f rame, f rameset, head,
html , i frame, meta, param, scr ipt , style, e ti t le.
ATRIBUTO VALOR DESCRIÇÃO
onkeydown s c r ipt Sc r ipt a executar quando uma tec la é pres s ionada
onkeypres s s c r ipt Sc r ipt a executar quando uma tec la é pres s ionada e
seguidamente l iber tada
onkeyup s c r ipt Sc r ipt a executar quando uma tec la é l iber tada

23.8 – Eventos do mouse
Não podem ser usados com os elementos base, bdo, br, f rame, frameset,
head, html, i f rame, meta, param, scr ipt, style e t it le.
ATRIBUTO VALOR DESCRIÇÃO
onc l i c k s c r ipt Sc r ipt a executar quando é detec tado um c l ique no rato
ondbl c l i c k s c r ipt Sc r ipt a executar quando é detec tado um c l ique duplo no rato
onmousedown s c r ipt Sc r ipt a executar quando o botão do rato é pres s ionado
onmousemove s c r ipt Sc r ipt a executar quando o pontei ro do rato muda de pos i ção
onmouseout s c r ipt Sc r ipt a executar quando o pontei ro do rato deixa de es tar
sobre um elemento
onmouseover s c r ipt Sc r ipt a executar quando o pontei ro do rato pas sa a es tar sobre
um elemento
onmouseup s c r ipt Sc r ipt a executar quando o botão do rato é l iber tado
24. O PRESENTE E O FUTURO DO MARKUP
As l inguagens de marcação se mostraram formas poderosíssimas para
armazenar e categor izar conteúdo, tanto é que elas estão sendo desenvolvidas
para acomodar dados com di ferentes propósitos, incluindo representações de
roteamento de chamadas telefônicas, fórmulas matemáticas e esquemas de
classi f icação de remédios. Nos próximos tópicos veremos como essa
general ização está tomando forma.
24.1 – O consórcio da Web
O HTML e demais l inguagens de marcação são atualmente regulamentados
pelo World Wide Web Consor tium, o Consórcio da Web ou simplesmente W3C ,
uma iniciativa cr iada para padronizar mui tas das tecnologias de informação
surgidas com o advento da Internet.
O sucesso do HTML levou a diversos pesquisadores a explorar mais as
possibi l idades das l inguagens de marcação que:
· Acomodem bem o t ipo de informação que pretendem armazenar
· Separem o conteúdo da visual ização
· Possam ser interpretados por diversos programas
A abordagem que as pesquisas na área escolheram foi a busca por uma
general ização total das l inguagens e duas metal inguagens ( linguagens usadas
para def inir l inguagens) foram def inidas: o SGML e o XML.
24.2 – SGML e HTML
O SGML (ou Standard General ized Markup Language, Linguagem de Marcação
Genér ica Padrão) foi a pr imei ra general ização de linguagem de marcação a ser
largamente adotada. Como metal inguagem, o SGML é ut il izado para defini r
novas l inguagens de marcação e atualmente o HTML é def inido at ravés de
SGML.

24.3 – XML
O XML também é uma l inguagem def inida sobre SGML, mas que serve para
def ini r l inguagens de marcação com propósitos especí ficos e com uma sintaxe
bem estr i ta. O XML é mais simples de ser interpretado via software e por isso
tem ganho bastante visibi l idade. Exemplos de l inguagens de marcação cr iadas
em XML são:
· MathML: usada para notação matemát ica.
· RDF: usado pr incipalmente para armazenar not ícias.
· VoiceXML: projetada para esquemat izar conversas ent re um ser
humano e um computador.
· XHTML: uma versão do HTML mais simples e escri ta em XML.
24.4 – RDF e Syndication
Em especial, o RDF (Resource Descr ipt ion Framework) é uma l inguagem
ut i lizada para criar uma out ra sopa de let r inhas conhecida como RSS (RDF
Si te Summary, ou Conteúdo de Sít ios em RDF) , que é um contêiner para
armazenar informações de sites na internet.
Por exemplo, se você quisesse divulgar not ícias veiculadas do site iMasters
dent ro de seu própr io website, você TERIA que fazer um programa bem
compl icado para extrair essa informação do HTML, mas o site iMasters
também oferece seu conteúdo em RSS, que nada mais é do que um arquivo
escri to num dialeto XML que contém os tí tulos, as datas e os/as autores das
not ícias numa estrutura bem r ígida, que pode ser facilmente interpretada por
out ros si tes e programas. Então, se alguém quiser divulgar algum tipo de
conteúdo publ icado no si te iMasters dent ro de seu site, basta uti l izar o RSS
do iMasters.
* iMa s t e r s é um s i t e vo l t a d o a d e s e n vo l v e d o r e s we b , mui t o b em c o n c e i t ua d o . www. ima s t e r s . c om.b r
O RSS resolveu o problema de juntar informações de diferentes sites, cada um
deles escr ito em um determinado software ou usando determinado template
HTML. Além disso, o RSS permi te que a informação do site seja obt ida por
qualquer sistema de tratamento de informações (outro site, um programa que
faz a lei tura de not ícias, um aparelho móvel , etc) .
O RSS é suf icientemente completo para permi t ir também que informações de
conteúdos mult imídia sejam dist ribuídas. Exemplos disso são os podcasts e o
vodcast. O podcast é o RSS que contém informações de arquivos de áudio
disponíveis em um site (por exemplo, áudios de not ícias, músicas ou
programas de rádio) . Um tocador de áudio pode ser constantemente
al imentado com um podcast e com as informações contidas nele baixar todos
os áudios automaticamente, sem intervenção do usuário. Com um vodcast é
simi lar e consiste num RSS para arquivos de vídeo.

25. DICAS FINAIS
Se você está lendo isto aqui neste momento, parabéns, isso signi fica que você
certamente está apto com o conteúdo aqui transmit ido.
Então, agora eu já sei tudo?!
Você aprendeu um bocado de coisas e já está em condições de construi r seu
websi te. No entanto o que você aprendeu é o básico e ainda há mui ta coisa a

ser aper feiçoada. Podemos dizer que você const ruiu uma base sólida para
continuar e se aprofundar no assunto.
Nesta últ ima lição, deixo algumas dicas finais:
· Para começar , aconselhamos a escrever seus documentos HTML de
forma ordenada e est ruturada. Assim fazendo você estará não só
most rando aos outros que possui uma base sólida de conhecimento,
mas também estará faci l itando a lei tura, interpretação e manutenção
do código.
· Siga as normas e valide seu código. Mas, não faça disto uma fonte de
st ress. Escreva um XHTML claro, use o DTD e val ide suas páginas no
http:/ /val idator .w3c.org
· Coloque conteúdos nas suas páginas. Lembre-se que HTML é apenas a
fer ramenta que possibi l ita apresentar informação na Internet, assim é
necessár io que haja a informação a ser apresentada ou seja, o
conteúdo. Páginas l indas e bem desenhadas são ótimas, mas as pessoas
buscam informação na Internet.
· Evite encher suas páginas com imagens pesadas e outros
“balangandans” que você encont ra na Internet. Isto faz com suas
páginas demorem a car regar e é f rust rante para o usuár io. Páginas que
demoram mais de 20 segundos para carregar podem perder até 50%
dos seus visitantes.
· Lembre-se de cadastrar seu site nos si tes de busca, de modo a que
out ras pessoas, além da sua famí l ia, possam encontrá- las e visitá-las.
Na página de entrada dos si tes para cadast ro em mecanismos de busca
você encont rará um l ink para adicionar seu si te (o mais impor tante é o
Google mas, existem outros tais como, DMOZ, Yahoo, Al taVista,
Al l theWeb e Lycos).
· Nesta apost i la você aprendeu a usar o Bloco de Notas, que é um
simples e fáci l editor de textos, contudo talvez você agora possa pensar
em usar um editor mais sof ist icado com mais possibil idades e
fer ramentas. Você encont ra uma listagem e sumár io de di ferentes
editores em Superdownloads.com.br ou pelo própr io Google.
Como eu aprendo mais?!
Antes de mais nada é muito importante que você continue a trabalhar e
exper imentar com tudo que você aprendeu neste tutor ial. Quando encontrar
algum site que contenha uma coisa que você ache interessante, estude o
código do site. No seu navegador vá ao menu “View” – “Ver ” e escolha
“Source” – “Código Fonte” para ver o código do si te.
Só nos resta desejar a você que passe horas agradáveis ao lado do seu novo
amigo, o HTML.
O que pretende divulgar?!
Que t ipo de conteúdo você pode apresentar na Web?! Prat icamente o que
quiser. Eis aqui alguns t ipos de conteúdo mais comuns na Web, no momento:
· Informações pessoais: informações sobre você, por exemplo.
· Hobbies ou interesses especiais: fi lmes, motocicletas, etc.
· Publicações: como jornais, revistas.

Perf is de empresa: o que uma empresa faz ou vende, etc
· Documentação On-line: desde manuais, guias de t reinamento,
dicionár ios, etc.
· Catálogos de compras: comercialização de art igos.
· Lojas online.
· Pesquisas de opinião: a interat ividade com o usuár io através de
formulár ios, caixas de sugestões, etc.
· Educação online: numerosas universidades, escolas e empresas
part iculares oferecem o ensino a distância através da Web.
O único l imi te da Web é a sua própr ia vontade. Por isso, se a sua idéia não
est iver nesta l ista ou parecer meio maluca ou ainda não est iver amadurecida,
pare e navegue um pouco pela Internet. Com cer teza encontra excelentes
idéias e poderá amadurecer as suas e ter muitas out ras.
Estabeleça seus objetivos
Você deve se perguntar os que seus leitores procuram?! O que deseja real izar
com sua apresentação?! Eles lerão a página intei ra ou apenas uma par te
dela?!
Antes de começar ent rar com códigos ou imagens você deve pensar o que
quero colocar em minha página?! Como será est ruturada?! Ela está adequada
ou não ao meu públ ico alvo?!
Os objet ivos não precisam ser grandiosos, mas a determinação i rá ajudá-lo a
elaborar, organizar e codi f icar suas páginas com uma maior probabi l idade de
sucesso.
Caso vá desenvolver uma apresentação Web para uma empresa ou pessoas é
importante que você colha junto ao seu cl iente seus objet ivos, idéias, a forma
que imagina sua página, etc. Assim, f icará bem mais fáci l de começar seu
t rabalho.
Divida seu conteúdo em tópicos
Cr ie uma lista com os pr incipais tópicos, a pr incípio não impor ta a ordem. Esta
é uma forma de começar a se organizar.
Sua l ista poderá ter quantos tópicos desejar, mas se perca l istando uma
quantidade enorme de tópicos (seu leitor poderá se cansar e se perder em
meio a tantas opções).
Organização e Navegação
Aqui descreverei algumas das est ruturas e navegação e suas caracter íst icas e
ainda considerações impor tantes como:
· Os t ipos de informação que se adaptam melhor a cada estrutura.
· Como os lei tores conseguem se deslocar pelo conteúdo de cada t ipo de
est rutura para encontrar as informações de que precisam
· Como Ter certeza de que os leitores conseguem se localizar nos seus
documentos (contexto) e achar o caminho de volta até uma posição
conhecida.
Ao ler esta parte ref lita como suas informações se encaixar ia em cada uma.
Você poderá combinar, até mesmo, duas estruturas e cr iar uma nova forma de
navegação.

Webdesign e Visão do Projeto
A maior ia das pessoas associam Design unicamente ao projeto gráf ico de um
WebSi te, o que é um er ro.
O conceito de Web Design envolve todos os aspectos da const rução de um
site, desde o desenho de sua est rutura de navegação e forma de
disponibi l ização da informação até o desenvolvimento do projeto gráf ico.
A construção de um Website deve, antes de mais nada, ser entendida como
um projeto, composto de fases e desenvolvido por pessoas de backgrounds
di ferentes.
Conteúdo e Forma
O que faz uma pessoa ent rar em um si te?! O faz a pessoa querer retornar?!
Estas perguntas devem sempre estar na cabeça das pessoas de uma equipe de
construção de si tes.
A pr imei ra muito relaciona-se ao públ ico alvo. Para qual t ipo de públ ico você
está disponibi lizando informação?! Quais são as pr ioridades e interesses deste
públ ico? Que t ipo de conexão é mais usada por ele?!
As respostas para a segunda pergunta certamente envolvem t rês pontos: o 1º
é o conteúdo. É o elemento central. O 2º ponto é o design do site (est rutura
de navegação e projeto gráf ico).
Estruturar a informação de forma que a navegação seja o mais intui t iva
possível faz com que sua apresentação Web tenha muito mais chance de
sucesso, considerando o tipo de informação disponibi lizada conforme seu
públ ico alvo. Out ro ponto é a atual ização para que não perca uma das
pr incipais caracter íst icas da Internet : a dinamicidade.
1. Na cr iação do projeto gráf ico, tente sempre optar por soluções que
melhor se adaptem a plataforma mais usada. Por exemplo: moni tor 14
polegadas com resolução de 640×480, faça com a melhor diagramação
das páginas aconteça quando o site é visto nesse t ipo de moni tor e
resolução. Caso o seu si te deva ser diagramado para uma resolução ou
tamanho de moni tor di ferentes do mais usado, informe no site.
2. Num projeto gráfico deve sempre se perguntar se sua apresentação
f icou adequada ou não ao que seu cl iente desejava e ao seu públ ico
alvo.
3. Para ter uma garant ia que suas imagens serão sempre bem
visual izadas, procure t rabalhar com imagens palet izadas ( formato .gi f ) .
O melhor resultado para isso será t rabalhar suas imagens em RGB e
depois indexá- las com o menor número de cores possível. Caso precise
ut i lizar imagens True Color, salve-as em formato . jpeg, que resul tará
em arquivos pequenos.
4. Sempre indique em que browser sua página será melhor visualizada.
5. A página de entrada de um site é mui to impor tante. Ela deve ser
projetada de forma que diga a que o si te se dest ina, seja de forma
textual, visual ou estrutural.

6. O conteúdo e forma como ele é apresentado serão os principais
atrat ivos de suas páginas, a não ser que o ponto chave sejam as
imagens. Por isso, não pense que a net é igual a out ras mídias.
7. Di rei tos autorais: A proteção de direitos autorais não costuma ser
muito evidente na Web. O desejo or iginal de uma página não é
protegido. Mas qualquer texto, gráf ico, vídeo ou áudio or iginais deve
ser protegido. Um l ink ou URL não é protegido, mas uma l ista de l inks
(como no caso das bibl iotecas vi r tuais) deve ser protegido pelos
di rei tos autorais.
8. A net iqueta e Domínio públ ico: A Web foi cr iada com base em ser capaz
de atar l inks de hipertexto de qualquer out ra localização da rede.
Consequentemente, quando você disponibi l iza um si te, implica em você
permi ti r a out ros ” linkar” sua página de Web, porém a net iqueta
recomenda que se peça permissão aos Webmasters sempre que
possível.
26. CONCLUSÃO
O volume de informações no mundo do Desenvolvimento Web é extremamente
grande, e di f ici lmente uma pessoa domina todos os aspectos e
part icularidades. Por isso é bastante comum ouvi rmos termos como
“Webdesigner” e “Programador Web”. Os Webdesigners geralmente dominam a
arte da criação de layouts, interfaces com o usuár io, t ipografia, CSS e
programas de edição de imagens. Os Programadores Web por sua vez são
responsáveis pela estruturação dos códigos das páginas, pela programação
das Linguagens de Servidor e Navegador e pela cr iação de banco de dados.
Apesar de excitante, a discussão sobre esses temas começa a fugi r mui to do
objet ivo inicial desta aposti la, que é a int rodução prát ica do leitor ou da
leitora à l inguagem de marcação conhecida como HTML e também dar uma
noção sobre as novas tecnologias e o futuro da l inguagem de marcação.

LCM::: INFORMÁTICA:::

por Paulista Postado em HTML Com a tag