Buscar

Apostila HTML

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você viu 3, do total de 55 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você viu 6, do total de 55 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você viu 9, do total de 55 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Prévia do material em texto

Desenvolvimento WEB 
APOSTILA por Lucília Ribeiro 
 
 
 
 
 
 
 
 
 
 
 
 “Se eu fosse um padre, eu, nos meus sermões, 
não falaria em Deus nem no Pecado 
— muito menos no Anjo Rebelado 
e os encantos das suas seduções, 
 
não citaria santos e profetas: 
nada das suas celestiais promessas 
ou das suas terríveis maldições... 
Se eu fosse um padre eu citaria os poetas, 
 
Rezaria seus versos, os mais belos, 
desses que desde a infância me embalaram 
e quem me dera que alguns fossem meus! 
 
Porque a poesia purifica a alma 
...e um belo poema — ainda que de Deus se aparte — 
um belo poema sempre leva a Deus!” 
 
(Mario Quintana, “Se eu fosse um padre”) 
 
Versão 1 – jan/07 
 
Algoritmos e Linguagens – Lucilia Ribeiro 2
 
Índice 
 
"Quantas vezes a gente, em busca da ventura, 
Procede tal e qual o avozinho infeliz: 
Em vão, por toda parte, os óculos procura, 
Tendo-os na ponta do nariz!” (Mário Quintana) 
 
ÍNDICE ............................................................................................................... 2 
O BÁSICO ........................................................................................................... 4 
1.1 PÁGINAS HTML .......................................................................................4 
1.2 TAGS.....................................................................................................4 
1.3 ESTRUTURA BÁSICA DO HTML...................................................................4 
1.4 MARCAÇÕES BÁSICAS .............................................................................4 
1.4.1 TÍTULOS ..............................................................................................5 
1.4.2 CABEÇALHOS........................................................................................5 
1.4.3 PARÁGRAFOS........................................................................................5 
1.4.4 QUEBRAS DE LINHA...............................................................................5 
1.5. COMANDOS DE ESTILO ............................................................................6 
1.6. ALTERANDO A FONTE...............................................................................6 
1.7. CORES E PADRÕES DE FUNDO...................................................................7 
1.8. OUTROS COMANDOS ...............................................................................8 
1.8.1 TEXTOS PRÉ-FORMATADOS.....................................................................8 
1.8.2 CENTRALIZAÇÃO DE TEXTOS ..................................................................8 
1.8.3 LINHA DIVISÓRIA..................................................................................8 
LINKS E LISTAS .................................................................................................. 9 
2.1 LINKS....................................................................................................9 
2.2 LISTAS ................................................................................................ 10 
2.2.1 LISTAS NÃO ORDENADAS ..................................................................... 10 
2.2.2 LISTAS ORDENADAS ............................................................................ 10 
2.2.3 LISTAS DE DEFINIÇÕES ....................................................................... 10 
IMAGENS E TABELAS ........................................................................................ 12 
3.1 IMAGENS ............................................................................................. 12 
3.1.1 INSERINDO IMAGENS .......................................................................... 12 
3.1.2 BACKGROUND COM IMAGENS ............................................................... 12 
3.1.3 IMAGENS COMO HIPERLINK .................................................................. 12 
3.2 TABELAS.............................................................................................. 13 
3.2.1 INSERINDO TABELAS ........................................................................... 13 
FORMULÁRIOS.................................................................................................. 16 
4.1 INTRODUÇÃO ....................................................................................... 16 
4.2 ELEMENTOS DE FORMULÁRIOS: CAMPOS DE TEXTO........................................ 17 
4.2.1 TEXTO CURTO..................................................................................... 17 
4.2.2 TEXTO OCULTO ................................................................................... 17 
4.2.3 TEXTO LONGO .................................................................................... 18 
4.3 OUTROS ELEMENTOS DE FORMULÁRIO ..................................................... 18 
4.3.1 LISTA DE OPÇÕES ............................................................................... 19 
4.3.2 BOTÕES DE RADIO .............................................................................. 19 
4.3.3 CAIXAS DE VALIDAÇÃO ........................................................................ 20 
4.4 BOTÃO SUBMIT, APAGAR CAMPOS E OUTROS ............................................ 20 
4.4.1 BOTÃO ENVIAR CAMPOS....................................................................... 20 
4.4.2 BOTÃO APAGAR CAMPOS...................................................................... 20 
4.4.3 DADOS OCULTOS ................................................................................ 20 
FRAMES ............................................................................................................ 22 
 
Algoritmos e Linguagens – Lucilia Ribeiro 3
5.1 INTRODUÇÃO ....................................................................................... 22 
5.2 DOCUMENTOS DE LAYOUT E DE CONTEÚDO .............................................. 22 
5.3 FRAMES SOBREPOSTOS DIRETA E INDIRETAMENTE.................................... 23 
5.4 LINKS EM FRAME ALVO........................................................................... 24 
FOLHAS DE ESTILO - CSS.................................................................................. 27 
6.1 INTRODUÇÃO ....................................................................................... 27 
6.2 A REGRA CSS E SUA SINTAXE.................................................................. 27 
6.3 AGRUPAMENTO DE SELETORES ............................................................... 28 
6.4 O SELETOR CLASSE ............................................................................... 28 
6.5 INSERINDO COMENTÁRIOS..................................................................... 28 
6.6 FOLHA DE ESTILO EXTERNA.................................................................... 29 
6.7 FOLHA DE ESTILO INCORPORADA OU INTERNA.......................................... 29 
6.8 FOLHA DE ESTILO INLINE ....................................................................... 29 
6.9 FOLHAS MÚLTIPLAS DE ESTILO ............................................................... 30 
INTRODUÇÃO AO JAVA SCRIPT......................................................................... 33 
7.1 INTRODUÇÃO ....................................................................................... 33 
7.2 ORIENTAÇÃO A OBJETOS........................................................................ 33 
7.2.1 PROPRIEDADES................................................................................... 33 
7.2.2 MÉTODOS........................................................................................... 34 
7.2.3 EVENTOS ........................................................................................... 34 
7.2.4 FUNÇÕES ........................................................................................... 347.3 ELEMENTOS DA LINGUAGEM ................................................................... 34 
7.3.1 VARIÁVEIS ......................................................................................... 34 
7.3.2 EXPRESSÕES e OPERADORES................................................................ 35 
7.3.3 DECLARAÇÕES .................................................................................. 35 
7.4 JAVASCRIPT BÁSICO.............................................................................. 36 
7.4.1 EMBUTINDO O CÓDIGO JavaScript......................................................... 36 
7.4.2 CARREGANDO UM ARQUIVO EXTERNO.................................................... 37 
7.4.3 EXTENSÕES JavaScript PARA A LINGUAGEM HTML ................................... 37 
7.5 ELEMENTOS ESSENCIAIS DO JAVASCRIPT ................................................... 38 
7.5.1 O OBJETO DOCUMENT.......................................................................... 38 
7.5.2 MANIPULAÇÃO E ALTERAÇÃO DO VALOR DE UMA PROPRIEDADE................ 38 
7.6 EVENTOS ............................................................................................. 39 
7.6.1 onBlur................................................................................................ 40 
7.6.2 onChange........................................................................................... 40 
7.6.3 onClick............................................................................................... 40 
7.6.4 onFocus ............................................................................................. 42 
7.6.5 onLoad............................................................................................... 42 
7.6.6 onUnLoad........................................................................................... 43 
7.6.7 onMouseOver...................................................................................... 43 
7.6.8 onSubmit ........................................................................................... 44 
7.6.9 onSelect............................................................................................. 44 
7.6.10 onMouseDown ................................................................................... 45 
7.7 OUTROS EXEMPLOS............................................................................... 45 
PROPRIEDADES PARA FOLHAS DE ESTILOS CSS............................................... 48 
TABELA DE REFERÊNCIA HTML ......................................................................... 52 
01 – O Básico 
HTML – Lucilia Ribeiro 4
 
O Básico 
 
 
 
“O pior dos problemas da gente é que ninguém tem nada com isso” 
(Mário Quintana) 
 
1.1 PÁGINAS HTML 
Uma home page, conhecida como página Web ou página HTML, é um arquivo texto 
criado com um editor de textos qualquer, como o bloco de notas e gravado com a 
extensão .HTM ou .HTML cujo conteúdo é composto basicamente de textos e códigos 
especiais chamados tags que possibilitam a exibição deste arquivo na Web (Word Wide 
Web) através de um programa especial chamado navegador ou browser. 
Além de texto, este documento pode conter referências para imagens, sons, 
animações e até mesmo vídeos. Pode conter ligações ou links para outras páginas 
armazenadas no micro ou em qualquer outro lugar da internet. Uma página HTML é 
também conhecida como home page quando nos referimos à pagina inicial ou principal 
de um site. 
A linguagem HTML (Hiper Text Makup Language) é bastante simples e tem como 
finalidade básica formatar o texto exibido e criar ligações entre as páginas Web, criando 
assim documentos com o conceito de hipertexto. 
1.2 TAGS 
As tags normalmente são especificadas em pares, delimitando um texto que sofrerá 
algum tipo de formatação. Mas existem várias tags individuais que executam uma ação 
independente de um texto-alvo que sofrerá formatação. 
As tags são identificadas por serem envolvidas pelos sinais de menor e maior “< >”. 
Entre tais sinais são especificados os comandos propriamente ditos. No caso de tags que 
necessitam envolver um texto, a sua finalização deve ser feita usando a barra de divisão 
/, indicando que a tag está finalizando a marcação de um texto. 
1.3 ESTRUTURA BÁSICA DO HTML 
Para que um navegador interprete corretamente o programa, ele deve possuir alguns 
comandos básicos que sempre deverão estar presentes. Um programa HTML possui três 
partes básicas: a estrutura principal, o cabeçalho e o corpo do programa: 
 
<HTML> 
 <HEAD> 
 <TITLE>Minha Primeira Página </TITLE> 
 </HEAD> 
 <BODY> 
 Já acabou !!!! 
 </BODY> 
</HTML> 
 
1.4 MARCAÇÕES BÁSICAS 
Em um editor de textos convencional, você insere uma quebra ou avança de linha 
toda vez que pressiona a tecla ENTER. Em um programa HTML é necessário colocar um 
comando específico para que o navegador entenda que você deseja mudar de linha, 
começar um novo parágrafo, colocar o texto em negrito, etc. 
Veremos agora algumas marcações tags básicas: 
 
1 
01 – O Básico 
HTML – Lucilia Ribeiro 5
1.4.1 TÍTULOS 
Esse é o texto que aparece na barra de título do seu navegador. Fica dentro do 
cabeçalho no programa HTML. 
 
<TITLE>Minha Primeira Página </TITLE> 
1.4.2 CABEÇALHOS 
"Cabeçalhos" normalmente são usados para títulos e sub-títulos de uma página. 
Existem seis níveis de cabeçalhos, numerados de 1 a 6, sendo o número 1 o de maior 
destaque. Cabeçalhos são exibidos em letras maiores e em negrito. O comando para 
inserção do cabeçalho é o <Hn>, onde n pode ser um número de 1 a 6. O atributo align 
pode assumir os valores center (centralizado), right (alinhado à direita), left (alinhado 
à esquerda) e justify (alinhado pelas duas margens): 
 
<Hn align = alinhamento>Texto do Parágrafo</Hn> 
 
EX01.HTML 
 
<HTML> 
 <HEAD> 
 <TITLE>Minha Primeira Página </TITLE> 
 </HEAD> 
 <BODY> 
 <H1>Este é o maior de todos</H1> 
 <H2 align=center>Agora vai diminuindo,</H2> 
 <H3 align=right>diminuindo...</H3> 
 <H4 align=left>diminuindo...</H4> 
 <H5>até ficar</H5> 
 <H6>bem pequenininho.</H6> 
 </BODY> 
</HTML> 
1.4.3 PARÁGRAFOS 
A marcação <P> é utilizada para definir o início de um novo parágrafo, deixando 
uma linha em branco entre cada parágrafo. A linguagem HTML não reconhece o caracter 
de quebra de linha dos editores de texto. Mesmo que exista uma linha em branco, os 
clientes Web só reconhecem o início de um novo parágrafo mediante a marcação 
apropriada. Podemos incluir o atributo align da mesma forma como utilizado nos 
cabeçalhos. 
1.4.4 QUEBRAS DE LINHA 
A marcação <BR> faz uma quebra de linha sem acrescentar espaço extra entre as 
linhas. Veja a diferença do uso de <P> e <BR> no exemplo a seguir: 
 
EX02.HTML 
 
<HTML> 
 <HEAD> 
 <TITLE>Minha Primeira Página </TITLE> 
 </HEAD> 
 <BODY> 
 <H1>Utilizando p</H1> 
 Vamos separar esta sentença com marcação de parágrafo.<p> Para ver a diferença. 
 <H1>Utilizando br</H1> 
 Diferença quando separamos duas linhas utilizando<br> a marcação de quebra de 
linha<br> Deu pra notar? 
 <P align=right>Parágrafo alinhado à direita 
 </BODY> 
</HTML> 
01 – O Básico 
HTML – Lucilia Ribeiro 6
1.5. COMANDOS DE ESTILO 
Assim como no editor de textos, você pode criar uma série de efeitos no texto, 
alterando a forma ou tipo de fonte. Todos os comandos que alteram o estilo do texto são 
do tipo contêiner ou liga-desliga, ou seja, precisam ser especificados em pares, 
marcando o início e o fim do texto que sofrerá a formatação. 
 
EX03.HTML 
 
<HTML> 
 <HEAD> 
 <TITLE>Testando Estilos de Texto</TITLE> 
 </HEAD> 
 <BODY> 
 Texto em <B>Negrito</B><BR> 
 Texto em <I>Itálico</I><BR> 
 Texto em <B><I>Negrito e Itálico</I></B><P> 
 Texto <U>Sublinhado</U><BR> 
 Texto em estilo <STRONG>Strong</STRONG><BR> 
 Texto em estilo <TT>Typewriter</TT><P>Texto em estilo <BIG>Big</BIG> que cria letras grandes<BR> 
 Texto em estilo <SMALL>Small</SMALL> que cria letras pequenas<P> 
 Texto no formato <SUP>sobrescrito</SUP> pelo comando SUP.<P> 
 Texto no formato <SUB>subscrito</SUB> pelo comando SUB.<P> 
 Para chamar a <BLINK>ATENÇÃO</BLINK> use o comando BLINK.<BR> 
 </BODY> 
</HTML> 
1.6. ALTERANDO A FONTE 
Um dos recursos de tratamento do texto mais interessante da linguagem HTML é a 
possibilidade de alterar o tamanho, cor e tipo da fonte do texto utilizado. O comando 
responsável por isso é o <FONT>, que também é do tipo contêiner: 
 
<FONT size = n face = nome1, nome2, nome3 color = cor> </FONT> 
SIZE: Este parâmetro especifica o tamanho da fonte utilizada. Os valores permitidos 
vão de 1 a 7. O padrão é 3. Se for especificado um número antecedido pelo sinal de 
adição ou de subtração, o tamanho da fonte atual será aumentado ou diminuído naquele 
valor. Por exemplo, se a fonte atual é 3 e for especificado <font size=+2> o texto será 
exibido no tamanho 5. Note que esta numeração funciona de forma contrária aos 
números usados nos comandos de cabeçalho. Aqui, quanto menor o número, menor a 
fonte. 
FACE: Este parâmetro permite que seja escolhida uma fonte diferente para o texto. 
Podem ser especificadas várias fontes, de maneira que, se o sistema não possuir a 
primeira opção, a segunda é carregada e assim por diante. 
COLOR: Especifica a cor do texto. Seu valor pode ser especificado em hexadecimal, 
RGB ou através de um nome predefinido de cores como mostra a tabela: 
 
RED #FF0000 BLUE #0000FF WHITE #FFFFFF 
BLACK #000000 CYAN #00FFFF YELLOW #FFFF00 
FLUCHSIA #FF00FF GRAY #C0C0C0 SILVER #E6E8FA 
GREEN #00FF00 LIME #32CD32 TEAL #008080 
MAROON #800000 NAVY #23238E OLIVE #808000 
 
01 – O Básico 
HTML – Lucilia Ribeiro 7
 
EX04.HTML 
 
<HTML> 
 <HEAD> 
 <TITLE>ex04</TITLE> 
 </HEAD> 
 <BODY> 
 <H2>Exemplo de faces:</H2> 
 <FONT FACE='Verdana'> 
 Texto exibido na fonte Verdana </FONT><BR> 
 <FONT FACE='Courier New'> 
 Texto exibido na fonte Corurier New </FONT><BR> 
 <FONT FACE='TimesRoman'> 
 Texto exibido na fonte Times New Roman </FONT><BR> 
 <FONT FACE='VictorianD'> 
 Texto exibido na fonte VictorianD</FONT><BR> 
 <FONT FACE='xyz'> 
 Texto exibido na fonte XYZ que não existe na máquina</FONT> 
 <FONT SIZE=+2>Exemplo de size:</FONT><BR> 
 <FONT SIZE=7>Texto com tamanho de fonte 7</FONT><BR> 
 <FONT SIZE=6>Texto com tamanho de fonte 6</FONT><BR> 
 <FONT SIZE=5>Texto com tamanho de fonte 5</FONT><BR> 
 <FONT SIZE=4>Texto com tamanho de fonte 4</FONT><BR> 
 <FONT SIZE=3>Texto com tamanho de fonte 3</FONT><BR> 
 <FONT SIZE=2>Texto com tamanho de fonte 2</FONT><BR> 
 <FONT SIZE=1>Texto com tamanho de fonte 1</FONT><BR> 
 <FONT COLOR="#ffff00">Usando cores</FONT> 
 <FONT COLOR="#ff00ff">Usando cores</FONT> 
 <FONT COLOR=green>Usando cores</FONT> 
 <font color=red>Usando cores</FONT><BR> 
 <FONT SIZE=4 COLOR="blue" FACE='Verdana' > 
 Texto exibido na fonte Verdana cor Azul e tamanho 4</FONT><BR> 
 <FONT SIZE=2 COLOR="red" FACE='Arial' > 
 Texto exibido na fonte Arial cor vermelha e tamanho 2</FONT><BR> 
 Apenas <FONT SIZE=5 COLOR=green> parte </FONT> do texto pode ser mudada 
 </BODY> 
</HTML> 
1.7. CORES E PADRÕES DE FUNDO 
O mundo é colorido, não é? Então por que usar aquele fundo cinza ou branco que 
aparece como padrão toda vez que a página é criada? A maioria dos navegadores 
permite a utilização de cores no segundo plano da tela (background) assim como a 
utilização de imagens que podem ser utilizadas para enfeitar o fundo da tela. Vamos 
alterar os parâmetros do comando <body>, responsável pelas cores da página. 
 
<BODY bgcolor=#xxxxxx text = #xxxxxx link = #xxxxxx vlink = #xxxxxx> 
 
Onde xxxxxx deve ser substituído por um código que identifique a cor desejada para 
aquele elemento. bgcolor é a cor do fundo, onde o padrão é cinza ou branco. text é a 
cor do texto sendo que o padrão é preto, link é a cor do texto do link, tendo como 
padrão o azul e vlink é a cor do link visitado, padrão vermelho púrpura. 
 
EX05.HTML 
 
<HTML> 
 <HEAD> 
 <TITLE>Grécia </TITLE> 
 </HEAD> 
 <BODY bgcolor=yellow text=red link=black vlink=blue> 
01 – O Básico 
HTML – Lucilia Ribeiro 8
 <P>Grécia está localizada no sudeste da Europa e ocupa uma área total de 131.990 
km<SUP>2</SUP>. O país tem fronteiras para o norte com a Albânia, a ex-Iugoslávia, a 
Bulgária e para o leste com a Turquia, perfazendo um comprimento total de 1.228km. </P> 
 <P><FONT color="#0000FF" size="4">Uso da terra:</FONT> 23% terra cultivável; 40% 
prados e pastos; 20% florestas e bosques; 9%outros. </P> 
 </BODY> 
</HTML> 
1.8. OUTROS COMANDOS 
Além dos comandos de formatação apresentados, existem outros que ajudam e 
melhoram a legibilidade do texto: 
1.8.1 TEXTOS PRÉ-FORMATADOS 
Através do comando <PRE> você pode incluir um texto que foi editado por um editor 
de textos e preservar a formatação original do texto tais como marcas de tabulação, fim 
de linha gerado pela tecla enter e outros formatos. A sintaxe geral é: 
 
<PRE> texto 
...texto 
</PRE> 
1.8.2 CENTRALIZAÇÃO DE TEXTOS 
Como padrão, os textos inseridos em uma página HTML são alinhados à esquerda. 
Para centralizar um cabeçalho, parágrafo ou figura dentro da largura da página deve ser 
usado o comando <CENTER></CENTER>. 
1.8.3 LINHA DIVISÓRIA 
O comando <HR> tem como finalidade inserir uma linha divisória na posição em que 
foi especificado se ele for o único comando da linha ou na linha seguinte caso esteja no 
meio de um texto. Seu uso é recomendado para criar uma divisão na página, separando 
tópicos e assuntos distintos. Pode-se utilizar os atributos color, size e width. Este 
último designa qual a porcentagem que a linha ocupará na tela. Esse comando não 
precisa ser finalizado: 
 
<HR color=red size=3 width=50%> 
 
EX06.HTML 
 
<HTML> 
 <HEAD> <TITLE>ex06</TITLE> </HEAD> 
 <BODY> 
 Primeira linha de texto <BR>Segunda linha de texto <BR> Terceira linha de 
texto<BR>Agora veremos o uso comando hr.<BR> Ao ser inserido no meio desta linha ele 
mostra uma barra na próxima linha<HR> e continua o texto na linha seguinte.<BR> 
 Primeira linha de texto <HR color=red>Segunda linha de texto <HR color=blue size=3> 
 Terceira linha de texto<HR color=fuchsia size=5> 
 <HR color=olive size=10 width=50%> 
 <H1>Sem Centralizar</H1> 
 <CENTER><H1>Centralizado</H1></CENTER> 
 <PRE> 
Este texto está digitado utilizando enter para mudar de linha 
Como qualquer outro editor de texto. 
 A tabulação também foi incluída. 
 </PRE> 
 </BODY> 
</HTML> 
 
02 – Links e Listas 
HTML – Lucilia Ribeiro 9
 
Links e Listas 
 
 
 
“A maior dor do vento é não ser colorido” 
(Mário Quintana) 
 
2.1 LINKS 
Fazer a ligação de um texto com uma página local é uma tarefa bastante simples. Você 
precisa apenas especificar o nome completo do arquivo que será chamado, utilizando o 
comando <A> de âncora, onde href especifica o endereço da URL (Universal Resource 
Locator) ao qual o link está associado, pode ser uma outra página da internet, um arquivo 
para download ou até mesmo uma figura. Pode ser usada para referências dentro ou fora do 
documento e name especifica o nome da seção de um documento que é referida por um link 
de hipertexto. 
 
<A href=url name=nome> link </A> 
 
Exemplos: 
<A href=http://www.lucilia.com.br> página da profª lucília</A> 
<A name=inicio>Início da Página</A> 
<A href=#inicio>Vai para o início da página</A> 
<A href=pagina2.html#outra> outra parte da página 2</A> 
<A href=index.html>Página Principal</A> 
<A href=figura.jpg>Nome da Figura</A> 
<A href=turboc.zip>Baixe aqui</A> o Compilador C 
 
EX07A.HTML 
 
<HTML> 
 <HEAD> <TITLE>EX07A</TITLE> </HEAD> 
 <BODY> 
 <H1><A NAME=inicio>TESTANDO LINKS</A></H1> 
 <H3>Isto aqui é só para ocuparespaço xxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxx 
xxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxx <H3> 
 Vamos experimentar links para outras páginas na internet:<HR> 
 Site da professora <A HREF=http://www.lucilia.com.br> Lucília</A>, ou então o site da <A 
HREF = http://www.ufg.br>UFG</A><HR> 
 Podemos especificar links para outras páginas html como a <A HREF=cores.html>Tabela de 
Cores</A> ou então para envio de <A HREF=mailto:professora@lucilia.com.br> EMAIL</A><HR> 
Ou então podemos vincular uma parte do texto que leva a outra, como o <A HREF="#inicio">início 
</A> desta página. Ou até à parte de outra página, <A HREF="ex07b.html#volta"> assim</A> 
 </BODY> 
</HTML> 
 
EX07B.HTML 
 
<HTML> 
 <HEAD> <TITLE>EX07B</TITLE> </HEAD> 
 <BODY bgcolor=maroon text=white link=red vlink=silver> 
 <H1> <CENTER>PÁGINA 2 PARA TESTAR LINKS</CENTER> </H1> 
 <FONT face="futura" size=5> 
Este texto é somente para testar o <A NAME="volta">link</A> em uma outra página. Da mesma 
forma, podemos retornar à página principal chamada <A HREF="ex07a.html#inicio>INÍCIO.</A> 
 </BODY> 
</HTML> 
 
2 
02 – Links e Listas 
HTML – Lucilia Ribeiro 10
2.2 LISTAS 
Assim como os cabeçalhos, que separam partes do texto, outra forma de estruturar um 
documento HTML é a utilização de listas. As listas podem funcionar como um sumário, um 
menu ou um resumo do conteúdo do documento e são excelentes para serem usadas como 
ponto de partida ao acesso de outras partes de um documento. 
Existem basicamente três tipos de listas. As listas não-ordenadas, que contêm uma série 
de itens sem numerá-los, as listas ordenadas, que atribuem um número para cada elemento 
da lista e a lista de definições, utilizadas para definir palavras. 
Pode-se utilizar uma lista dentro da outra para implementar listas aninhadas. 
2.2.1 LISTAS NÃO ORDENADAS 
O comando <UL> (Unordered List) é utilizado para criar listas não-ordenadas. Esse 
comando deve envolver o primeiro e o último item da lista. Cada item da lista deve ser 
precedido do comando <LI> (Line Item). O parâmetro type permite que sejam especificadas 
variações para o marcador utilizado na lista. Os valores possíveis de se atribuir são square, 
circle ou disc. Omitindo o parâmetro type, os marcadores assumem a bolinha padrão. 
 
<UL type=square> 
 <LI> texto do item 1 
 <LI> texto do item 2 
 <LI> texto do item n 
</UL> 
2.2.2 LISTAS ORDENADAS 
O comando <OL> (Ordered List) é utilizado para criar listas ordenadas. Esse comando 
deve envolver o primeiro e o último item da lista. Cada item da lista deve ser precedido do 
comando <LI> (Line Item). O parâmetro type permite que sejam especificadas variações 
para o marcador utilizado na lista. Os valores possíveis de se atribuir são A (cria uma lista 
alfabética com letras maiúsculas), a (lista alfabética com letras minúsculas), I (lista com 
numerais romanos maiúsculos) e i (numerais romanos minúsculos). 
Além do parâmetro type, você pode mudar o número inicial da lista utilizando o parâmetro 
start, que deve ser sucedido do sinal de igualdade e do número inicial da lista. Omitindo os 
parâmetros, a lista será numerada e iniciará pelo número 1. 
 
<OL type=a start=f> 
 <LI> texto do item 1 
 <LI> texto do item 2 
 <LI> texto do item n 
</OL> 
2.2.3 LISTAS DE DEFINIÇÕES 
O comando <DL> (Definition List) é utilizado para criar listas de definições que se parece 
um glossário de termos. Cada termo da lista deve ser especificado com o comando <DT> e a 
explicação de cada comando especificada com o comando <DD>: 
 
<DL> 
 <DT> termo1 a ser definido 
 <DD> definição do termo1 
 <DT> termo2 a ser definido 
 <DD> definição do termo2 
</DL> 
02 – Links e Listas 
HTML – Lucilia Ribeiro 11
 
EX08.HTML 
 
<HTML> 
 <HEAD> <TITLE>EX08</TITLE> </HEAD> 
 <BODY> 
 <UL> 
 <LI> FRUTAS: 
 <UL type=square> 
 <LI> banana 
 <LI> maçã 
 </UL> 
 <LI> VERDURAS: 
 <UL type=disc> 
 <LI> cenoura 
 <LI> vagem 
 </UL> 
 </UL> 
 <HR> 
 <OL> 
 <LI> FRUTAS: 
 <OL type=A> 
 <LI> banana 
 <LI> maçã 
 </OL> 
 <LI> VERDURAS: 
 <OL type=i start=5> 
 <LI> cenoura 
 <LI> vagem 
 </OL> 
 </OL> 
 <HR> 
 <DL> 
 <DT>HTML 
 <DD>A sigla HTML deriva da expressão inglesa HyperText Markup Language. 
Trata-se de uma linguagem de marcação utilizada para produzir páginas na Internet. Esses 
códigos podem ser interpretados pelos browsers para exibir as páginas da World Wide Web.. 
 <DT>HTTP 
 <DD>HTTP significa HyperText Transfer Protocol (Protocolo de Transferência de 
Hipertexto) e é um protocolo da camada de "Aplicação" do modelo OSI, utilizado para 
transferência de dados na World Wide Web. 
 </DL> 
 </BODY> 
</HTML> 
 
 
 
 
 
 
 
 
03 – Imagens e Tabelas 
HTML – Lucilia Ribeiro 12
 
Imagens e Tabelas 
 
 
 
"Para os peixinhos do aquário, quem troca a água é Deus." 
(Mário Quintana) 
 
3.1 IMAGENS 
Incluir uma imagem em uma página HTML é uma tarefa simples, mas que requer alguns 
requisitos básicos. Antes de criar uma página com dezenas de figuras e fotos, lembre-se uma 
figura demora mais para carregar do que textos. 
3.1.1 INSERINDO IMAGENS 
O comando <IMG> é responsável por definir a posição em que uma imagem será inserida. 
Sua sintaxe básica com seus respectivos parâmetros está descrito abaixo. Com exceção do 
parâmetro src, todos os demais são opcionais. 
 
<IMG src = url width = tam height = tam border = num alt = texto 
vspace = num hspace = num align = sentido> 
SRC: É o nome da figura se estiver no mesmo diretório do programa, ou o seu caminho 
completo se estiver em outro diretório. 
WIDTH: Especifica a largura em pixels de exibição da imagem independente do seu 
tamanho físico. Se a imagem for maior ou menor do que o valor especificado, ela será esticada 
ou comprimida para caber no espaço especificado. Se for colocado o sinal de percentual, ele é 
relativo à largura da janela. 
HEIGHT: Altura em pixels de exibição da imagem. 
BORDER: Especifica em pixels a largura da borda da imagem. O valor zero remove a 
borda. 
ALT: Permite a exibição de um texto alternativo no lugar da imagem quando o navegador 
não puder carregá-la. 
VSPACE: Determina em pixels o espaço que deve ser deixado em branco acima e abaixo 
da imagem. 
HSPACE: Determina o espaço que deve ser deixado do lado esquerdo e direito da imagem. 
ALIGN: Especifica o alinhamento da imagem relativa à linha do texto onde é exibida. Pode 
assumir os seguintes valores: top (acima), middle( ao meio), bottom (abaixo), left (à 
esquerda) e right (à direita). 
3.1.2 BACKGROUND COM IMAGENS 
Usar um fundo colorido dá outra vida para sua página. Melhor ainda é utilizar pequenas 
imagens para o fundo. Em vez de usar um código de cor na opção bgcolor, você pode 
especificar o nome de um arquivo de imagem na opção background do comando body. Esta 
imagem será espalhada por toda a página de forma a encher o fundo da tela: 
 
<BODY background="arquivo.jpg"> 
3.1.3 IMAGENS COMO HIPERLINK 
Você pode usar uma imagem como hiperlink envolvendo-a com o comando <A> </A>. 
Em vez de especificar um texto, você usa o comando <IMG> para colocar a imagem: 
 
<A href=link> <IMG SRC=imagem.jpg></A> 
 
 
3 
03 – Imagens e Tabelas 
HTML – Lucilia Ribeiro 13
3.2 TABELAS 
O uso de tabelas melhora muito a aparência de uma página, por permitir o alinhamento de 
textos e imagens, além de ordenar as informações de forma padronizada. 
Uma tabela é criada através do comando <TABLE> </TABLE> e consiste em linhas e 
colunas. A interseção de uma linha com uma coluna é chamada de célula. As linhas de uma 
tabela são criadas pelo comando <TR> </TR>. As células de uma linha são criadas pelo 
comando <TD> </TD>. 
3.2.1 INSERINDO TABELAS 
O comando <TABLE> definea estrutura bidimensional da tabela: 
 
<TABLE border=numero cellspacing=numero cellpadding=numero width=numero 
align=alinhamento bgcolor=cor bordercolor = cor > 
BORDER: Especifica a largura da linha das bordas que separam as células da tabela. Se 
não for especificado, não será exibido uma borda para a tabela. 
CELLSPACING: Especifica o espaçamento em pixels entre as células. 
CELLPADDING: Espaçamento entre o conteúdo e a borda da célula. 
WIDTH: Largura da tabela em pixels. 
ALIGN: Alinhamento da tabela na página. Pode ser right, left ou center. 
BGCOLOR: Especifica a cor de fundo de toda a tabela 
BORDERCOLOR: Especifica a cor das bordas da tabela 
 
O comando <TR> (Table Row) define uma linha da tabela. Para cada linha de uma tabela, 
deve ser especificado um par deste comando, onde, dentro deles, devem ser especificados os 
comandos <TD> ou <TH> para criar as células de dados daquela linha. 
 
<TR align=alinhamento valign = alinhamento bgcolor=cor bordercolor = cor > 
ALIGN: Alinhamento horizontal do conteúdo da linha: right, left, center ou justify 
VALIGN: Alinhamento vertical do conteúdo da linha: top, middle ou bottom 
BGCOLOR: Especifica a cor de fundo da linha 
BORDERCOLOR: Especifica a cor de borda da linha 
 
O comando <TD> (Table Data) define o conteúdo de uma célula da linha de uma planilha. 
Cada célula de uma linha precisa ser especificada por meio deste comando. Dentro de uma 
célula você pode colocar qualquer elemento aceito em uma página HTML como um texto ou 
imagem. 
 
<TD align=alinhamento valign = alinhamento bgcolor=cor bordercolor = cor nowrap 
colspan=numero rowspan=numero> 
ALIGN: Alinhamento horizontal do conteúdo da célula: right, left, center ou justify 
VALIGN: Alinhamento vertical do conteúdo da célula: top, middle ou bottom 
BGCOLOR: Especifica a cor de fundo da célula 
BORDERCOLOR: Especifica a cor de borda da célula 
NOWRAP: Indica para não quebrar a linha dentro da célula 
COLSPAN: Indica o número de colunas que esta célula deverá ocupar 
ROWSPAN: Indica o número de linhas que esta célula deverá ocupar 
Através do par de comandos <TH> (Title Heading) você pode especificar títulos para as 
colunas. Estes comandos funcionando da mesma forma que os comandos <TD>, só que 
deixam o conteúdo da célula centralizado e em negrito. 
03 – Imagens e Tabelas 
HTML – Lucilia Ribeiro 14
 
EX09HTML 
 
<HTML> 
 <HEAD> <TITLE>EX09</TITLE></HEAD> 
 <BODY background="planta.gif"> 
 <P><IMG src="calvin.gif" alt="abraço" align="right" > 
 <FONT color="#3299cc">IMAGEM COM ALINHAMENTO RIGHT</FONT><P><P> 
 <P><A href=pagina2.html><IMG src="calvin.gif" alt="abraço" align="top"></A> 
 <FONT color="#db7093">IMAGEM COM ALINHAMENTO TOP</FONT> 
 <P><IMG src="calvin.gif" alt="abraço" align="middle"> 
 <FONT color="#ebc79e">IMAGEM COM ALINHAMENTO MIDDLE</FONT> 
 <P><IMG src="calvin.gif" alt="abraço" align="botton"> 
 <FONT color="#238e23">IMAGEM COM ALINHAMENTO BOTTON</FONT> 
 <HR> 
 <A href=Img2.jpg> <IMG src=Img1.jpg alt=Clique para Ampliar></A> 
 <TABLE border cellpadding=10 cellspacing=0 align=center bgcolor=silver bordercolor=red> 
 <CAPTION aling=top>LEGENDA COM ALINHAMENTO TOP</CAPTION> 
 <TR> 
 <TD colspan=2>primeira linha primeira coluna ocupando 2 colunas</TD> 
 <TH rowspan=4>primeira linha segunda coluna ocupando 4 linhas</TH> 
 </TR> 
 <TR align=right> 
 <TD>2 x 1</td><td>2 x 2</TD> 
 </TR> 
 <TR align=left> 
 <TD>3 x 1</td><td>3 x 2</TD> 
 </TR> 
 <TR align=center> 
 <TD>4 x 1</td><td>4 x 2</TD> 
 </TR> 
 </TABLE> <P> 
 <TABLE border=3 bordercolor=navy cellpadding=0 cellspacing=10> 
 <CAPTION align=bottom>LEGENDA COM ALINHAMENTO BOTTOM</CAPTION> 
 <TR> 
 <TD>teste para alinhamento<br>com relação às bordas<br>superior e inferior</TD> 
 <TD valign=top bgcolor=blue>TOP</TD> 
 <TD valign=middle>MIDDLE</TD> 
 <TD valign=bottom>BOTTOM</TD> 
 </TR> 
 </TABLE> 
 <H1>Alinhamento de Imagens</H1> 
 <TABLE> 
 <TR> 
 <TD><img src="calvin.gif"></TD> 
 <TD><img src="calvin.gif"></TD> 
 <TD><img src="calvin.gif"></TD> 
 </TR> 
 </TABLE> 
 <H1>Adicionando espaço entre as imagens e incluindo uma legenda na Imagem</H1> 
 <TABLE cellpadding=50> 
 <TR> 
 <TD><img src="calvin.gif"><br>Imagem1</TD> 
 <TD><img src="calvin.gif"><br>Imagem2</TD> 
 <TD><img src="calvin.gif"><br>Imagem3</TD> 
 </TR> 
 </TABLE> 
 <H1>Imagem de fundo na tabela</H1> 
 <TABLE background="calvin.gif" border cellpadding=10 cellspacing=0 align=center 
bordercolor=red> 
 <TR> 
 <TD colspan=2>xxxxxxxxxxxxxxxxxxxxxxxxxxx</TD> 
03 – Imagens e Tabelas 
HTML – Lucilia Ribeiro 15
 <TH rowspan=4>xxxxxxxxxxxxxxxxxxxxxxxxxxx</TH> 
 </TR> 
 <TR> 
 <TD>xxxxxxxxxxxxxxxxxxxxxxxxxx</TD><TD>xxxxxxxxxxxxxxxxxxxxxxxxxxx</TD> 
 </TR> 
 <TR align=left> 
 <TD>xxxxxxxxxxxxxxxxxxxxxxxxxx</TD><TD>xxxxxxxxxxxxxxxxxxxxxxxxxxx</TD> 
 </TR> 
 <TR> 
 <TD>xxxxxxxxxxxxxxxxxxxxxxxxxx</TD><TD>xxxxxxxxxxxxxxxxxxxxxxxxxxx</TD> 
 </TR> 
 </TABLE><P><P> 
 </BODY> 
</HTML> 
 
 
 
 
 
 
 
 
04 – Formulários 
HTML – Lucilia Ribeiro 16
 
Formulários 
 
 
 
“A resposta certa, não importa nada: 
o essencial é que as perguntas estejam certas.” 
(Mário Quintana) 
 
4.1 INTRODUÇÃO 
Até agora vimos a forma na qual o HTML providencia e mostra a informação, 
essencialmente mediante o texto, imagens e links. Falta ver de que forma podemos trocar 
informações com nosso visitante. Desde então, este novo aspecto é primordial para a grande 
quantidade de ações que se podem realizar mediante o Web: Comprara um artigo, preencher 
uma enquete, enviar um comentário ao autor 
Vimos anteriormente que poderíamos, mediante os links, entrar em contato diretamente 
com um correio eletrônico. Entretanto, esta opção pode ser em alguns casos pouco versátil se 
o que desejamos é que o navegante nos envie uma informação bem precisa. É através dele, o 
HTML que propõem outra solução muito mais ampla: Os formulários. 
Os formulários são estas famosas caixas de texto e botões que podemos encontrar em 
muitas páginas web. São muito utilizados para realizar buscar ou também para introduzir 
dados pessoais, por exemplo, em sites de comércios eletrônico. Os dados que o usuário 
introduz nestes campos são enviados ao correio eletrônico do administrador do formulário ou 
também, em um programa que se encarrega de processá-lo automaticamente. 
Usando HTML podemos unicamente enviar o formulário a um correio eletrônico. Se 
quisermos processar o formulário mediante um programa, a coisa pode ser um pouco mais 
complexa, já que teremos que empregar outras linguagens mais sofisticadas. Neste caso, a 
solução mais simples é utilizar os programas pré-desenhados que nos propõem um grande 
número de servidores de hospedagem e que nos permitem armazenar e processar os dados 
em forma de arquivo ou outros formatos. Se sua página está hospedada em um servidor que 
não lhe propõem estes tipos de vantagens, você sempre poderá recorrer a servidores de 
terceiros que oferecem este ou outros tipos de serviços gratuitos para webs. É claro que 
também existe outra alternativa que é a de aprender linguagens como ASP ou PHP que nos 
permitirá, entre outras coisas, o tratamento de formulários. 
Os formulários são definidos por meio das etiquetas <FORM> e </FORM>. Entre estas 
duas etiquetas colocaremos todos os campos e botões que compõem o formulário. Dentro 
desta etiqueta <FORM> devemos especificar alguns atributos: 
 
<FORM action= mailto:professora@lucilia.com.br method= post enctype = text/plain> 
 
ACTION: Define o tipo de ação a realizar com o formulário. Como já dissemos, existem duas 
possibilidades: 
• O formulário é enviado a um endereço de correio eletrônico 
• O formulário é enviado a um programa ou script queprocessa seu conteúdo. 
No primeiro caso, o conteúdo do formulário é enviado ao endereço de correio eletrônico 
especificada por meio de uma sintaxe deste tipo: 
Se o que queremos é que o formulário seja processado por um programa, temos de 
especificar o endereço do arquivo que contem o tal programa. 
 
METHOD: Este atributo se encarrega de especificar a forma na qual o formulário é enviado. Os 
dois valores possíveis que este atributo pode tomar são post e get. Para efeitos práticos e 
salvo se lhe disserem o contrário, daremos sempre o valor post. 
 
ENCTYPE: Utiliza-se para indicar a forma na qual viajará a informação que for mandada pelo 
formulário. No caso mais corrente, enviar o formulário por correio eletrônico, o valor deste 
4 
04 – Formulários 
HTML – Lucilia Ribeiro 17
atributo deve ser text/plain. Assim, conseguimos que o conteúdo do formulário seja enviado 
como texto plano dentro do e-mail. 
Se quisermos que o formulário se processe automaticamente por um programa, 
geralmente não utilizaremos este atributo, de forma que tome seu valor padrão, ou seja, não 
incluiremos enctype dentro da etiqueta <FORM>. 
4.2 ELEMENTOS DE FORMULÁRIOS: Campos de Texto 
O HTML nos propõe uma grande diversidade de alternativas na hora de criar nossos 
formulários. Estas vão desde a clássica caixa de texto até a lista de opções passando pelas 
caixas de validação. Veremos em que consiste cada uma destas modalidades e como podemos 
implementá-las em nosso formulário. 
4.2.1 TEXTO CURTO 
As caixas de texto são colocadas por meio da etiqueta <INPUT>. Dentro desta etiqueta 
temos de especificar o valor de dois atributos: type e name. 
A etiqueta é da seguinte forma: 
<INPUT type=text name=nome> 
Deste modo expressamos nosso desejo de criar uma caixa de texto cujo conteúdo será 
chamado nome (por exemplo). O aspecto deste tipo de caixas é conhecido, como pode ser 
visto aqui: 
 
 
 
O nome do elemento do formulário é de grande importância para poder identificá-lo em 
nosso programa de processamento ou no e-mail recebido. Por outro lado, é importante indicar 
o atributo type, já que, como veremos, existem outras modalidades de formulário que usam 
esta mesma etiqueta. 
O emprego destas caixas está fundamentalmente destinado à tomada de dados breves: 
palavras ou conjuntos de palavras de longitude relativamente curta. Veremos mais adiante que 
existe outra forma de tomar textos mais longos a partir de outra etiqueta. 
Além destes dois atributos, essenciais para o correto funcionamento de nossa etiqueta, 
existem outra série de atributos que podem ser de utilidade, mas que não são imprescindíveis: 
SIZE: Define o tamanho da caixa em número de caracteres. Se ao escrever o usuário 
chega ao final da caixa, o texto irá desfilando à medida que se escreve fazendo desaparecer a 
parte de texto que fica à esquerda. 
MAXLENGTH: Indica o tamanho máximo do texto que pode ser tomado pelo formulário. É 
importante não confundi-lo com o atributo size. Enquanto o primeiro define o tamanho 
aparente da caixa de texto, maxlength indica o tamanho máximo real do texto que pode ser 
escrito. Podemos ter uma caixa de texto com um tamanho aparente (size) que é menor do que 
o tamanho máximo (maxlength). O que ocorrerá neste caso é que, ao escrever, o texto irá 
desfilando dentro da caixa até que cheguemos ao seu tamanho máximo definido por 
maxlength, momento no qual será impossível continuar escrevendo. 
VALUE: Em alguns casos pode ser interessante atribuir um valor definido ao campo em 
questão. Isto pode ajudar ao usuário a preencher mais rapidamente o formulário ou a dar 
alguma idéia sobre a natureza de dados que se requerem. Este valor inicial do campo pode ser 
expresso mediante o atributo value. Vejamos seu efeito com um exemplo simples: 
<INPUT type=text name=nome value=Josefa Palotes> 
Gera um campo deste tipo: 
 
Josefa Palotes
 
4.2.2 TEXTO OCULTO 
04 – Formulários 
HTML – Lucilia Ribeiro 18
Podemos esconder o texto escrito por meio de asteriscos de forma a fornecer uma certa 
confiabilidade. Estes tipos de campos são análogos aos de texto com somente uma diferença: 
deslocando o atributo type=text por type=password: 
<INPUT type=password name=nome> 
Neste caso, pode ser comprovado que ao escrever dentro do campo no lugar de texto 
serão vistos asteriscos. Estes campos são ideais para a introdução de dados confidenciais, 
principalmente códigos de acesso. Isto pode ser visto em funcionamento a seguir: 
 
 
4.2.3 TEXTO LONGO 
Se desejarmos colocar à disposição do usuário um campo de texto onde possa escrever 
comodamente sobre um espaço composto de várias linhas, temos de convocar uma nova 
etiqueta: <TEXTAREA> e seu fechamento correspondente. 
Estes tipos de campos são práticos quando o conteúdo a enviar não é um nome, telefone 
ou qualquer outro dado breve, e sim, um comentário, opinião, etc. 
Dentro da etiqueta TEXTAREA deveremos indicar, como para o caso visto anteriormente, o 
atributo name para associar o conteúdo a um nome que será semelhante a uma variável nos 
programas de processo. Além disso, podemos definir as dimensões do campo a partir dos 
atributos rows (número de linhas do campo de texto.) e cols (número de colunas do campo 
de texto). A etiqueta fica portanto, desta forma: 
<TEXTAREA name=comentário rows=10 cols=40></TEXTAREA> 
 
 
Mesmo assim, é possível definir o conteúdo do campo. Para isso, não usaremos o atributo 
value e sim, que escreveremos dentro da etiqueta o conteúdo que lhe desejamos atribuir. 
Vejamos: 
 
<TEXTAREA name = comentário rows = 10 cols = 40> Escreva seu comentário</TEXTAREA> 
 
Escreva seu comentário....
 
 
 
 
4.3 OUTROS ELEMENTOS DE FORMULÁRIO 
Efetivamente, os textos são uma maneira muito prática de fazer chegar a informação do 
navegante. Porém, em muitos casos, os textos são dificilmente adaptáveis a programas que 
possam processá-los devidamente ou também pode ser que seu conteúdo não se ajuste ao 
tipo de informação que requeremos. É por isso que, em determinados casos, pode ser mais 
efetivo propor uma escolha ao navegante a partir da exposição de uma série de opções. 
04 – Formulários 
HTML – Lucilia Ribeiro 19
Este é o caso de, por exemplo, oferecer uma lista de países, o tipo de cartão de crédito 
para um pagamento, etc. Estes tipos de opções podem ser expressadas de diferentes formas. 
4.3.1 LISTA DE OPÇÕES 
As listas de opções são menus desdobráveis que nos permite escolher uma (ou várias) das 
múltiplas opções que nos propõem. Para construí-las utilizaremos uma etiqueta com seu 
respectivo fechamento: <SELECT>. Como para os casos já vistos, dentro desta etiqueta 
definiremos seu nome por meio do atributo name. Cada opção será incluída em uma linha 
precedida da etiqueta <OPTION>. 
 
<SELECT name=estação> 
 <OPTION>Primavera</OPTION> 
 <OPTION>Verão</OPTION> 
 <OPTION>Outono</OPTION> 
 <OPTION>Inverno</OPTION> 
</SELECT> 
 
Primavera
 
A etiqueta <OPTION> ainda pode ser precisada por meio de outros atributos: 
VALUE: Define o valor da opção que será enviada ao programa ou ao correio eletrônico se 
o usuário escolhe essa opção. Este atributo pode ser muito útil se o formulário for enviado a 
um programa visto que a cada opção se pode associar um número ou letra, o qual torna-se 
mais facilmente manipulável que uma palavra ou texto. Poderíamos assim escrever linhas 
conforme escrito abaixo. Deste modo, se o usuário escolhe primavera, o que chegará ao 
programa (ou ao correio) é uma variável chamada estação que terá com valor 1. No correio 
eletrônico receberíamos: estação=1 
<OPTION value=1>Primavera</OPTION> 
SELECTED: Este atributo não toma nenhum valor senão que simplesmente indica que a 
opção que apresenta está escolhida por padrão. Assim, se mudamos a linha do códigoanterior 
por <OPTION selected>Outono</OPTION>, o resultado será: 
 
Outono
 
4.3.2 BOTÕES DE RADIO 
Existe outra alternativa para expor uma escolha, neste caso, obrigamos ao internauta a 
escolher unicamente uma das opções que lhe propõem. A etiqueta empregada neste caso é 
<INPUT> na qual teremos a atributo type que temos de tomar o valor radio. Vejamos um 
exemplo: 
 
<INPUT type=radio name=estação value=1>Primavera <BR> 
<INPUT type=radio name=estação value=2>Verão <BR> 
<INPUT type=radio name=estação value=3>Outono <BR> 
<INPUT type=radio name=estação value=4>Inverno <BR> 
 
O resultado é o seguinte: 
 
Primavera 
Verão 
Outono 
Inverno 
Como podemos ver, a cada uma das opções se atribui uma etiqueta input dentro da qual 
atribuímos o mesmo nome (name) para todas as opções e um valor (value) distinto. Se o 
usuário escolhe supostamente Outono, receberemos em nosso correio uma linha tal como 
04 – Formulários 
HTML – Lucilia Ribeiro 20
esta: estação=3. Cabe assinalar que é possível pré-selecionar por padrão uma das opções. 
Isto se pode conseguir por meio do atributo checked: 
<INPUT type=radio name=estação value=2 checked>Verão 
Vejamos o efeito: 
 
Primavera 
Verão 
Outono 
Inverno 
4.3.3 CAIXAS DE VALIDAÇÃO 
Estes tipos de elementos podem ser ativados ou desativados pelo visitante com um simples 
clique sobre a caixa em questão. A sintaxe utilizada é muita parecida com as anteriores. A 
única diferença fundamental é o valor adotado pelo atributo type. 
Da mesma forma que para os botões de rádio, podemos ativar a caixa por meio do atributo 
checked. O tipo de informação que chegará ao nosso correio (ou ao programa) será do tipo: 
feijoada=on (ou off dependendo se tiver sido ativada ou não) 
 
<INPUT type=checkbox name=paella>Adoro uma feijoada 
 
Adoro uma feijoada 
 
4.4 BOTÃO SUBMIT, APAGAR CAMPOS E OUTROS 
Os formulários têm de dar lugar não somente à informação a tomar do usuário como 
também, a outra série de funções. Concretamente, permite-nos seu envio mediante seu botão. 
Também pode ser prático poder propor um botão de Apagar Campos ou também, acompanhá-
lo de dados ocultos que possam ajudar-nos em seu processamento. 
4.4.1 BOTÃO ENVIAR CAMPOS 
Para finalizar o processo de preenchimento do formulário e fazê-lo chegar a seu gestor, o 
navegante tem de validá-lo por meio de um botão previsto para tal efeito. A construção de tal 
botão não implica nenhuma dificuldade uma vez familiarizados com as etiquetas input já 
vistas. Como poderemos observar, somente temos de especificar se trata de um botão de 
envio (type=submit) e temos de definir a mensagem do botão por meio do atributo value. 
 
<INPUT type=submit value=Enviar> 
Enviar
 
 
4.4.2 BOTÃO APAGAR CAMPOS 
Este botão nos permitirá apagar o formulário por completo no caso de que o usuário deseje 
refazê-lo desde o princípio. Sua estrutura sintática é igual a anterior. Diferentemente ao botão 
de envio, indispensável em qualquer formulário, o botão de Apagar Campos é meramente 
optativo e não é utilizado freqüentemente. 
 
<INPUT type=reset value=Apagar Campos> 
4.4.3 DADOS OCULTOS 
Em alguns casos, aparte dos próprios dados enviados pelo usuário, pode ser prático enviar 
dados definidos por nós mesmos que ajudem ao programa em seu processamento do 
formulário. Estes tipos de dados, que não se mostram na página, mas que podem ser 
detectados solicitando o código fonte, não são freqüentemente utilizados por páginas 
construídas em HTML, são mais usados por páginas que empregam tecnologias de servidor. 
04 – Formulários 
HTML – Lucilia Ribeiro 21
Esta etiqueta, incluída dentro de nosso formulário, enviará um dado adicional ao correio ou 
ao programa encarregado da gestão do formulário. Poderíamos a partir deste dado, tornar 
conhecido ao programa a origem do formulário ou algum tipo de ação a realizar (um re-
endereçamento, por exemplo). 
 
<INPUT type=hidden name=site value=www.criarweb.com> 
 
EX10HTML 
 
<HTML> 
 <HEAD> 
 <TITLE>EX10</TITLE> 
 </HEAD> 
 <FORM action="mailto:professora@lucilia.com.br" method="post" enctype="text/plain"> 
 Nome <INPUT type="text" name="nome" size="30" maxlength="100"> <P> 
 E-mail <INPUT type="text" name="email" size="25" maxlength="100" value="@"> <P> 
 Cidade <INPUT type="text" name="cidade" size="20" maxlength="60"> <P> 
 Sexo <BR> 
 <INPUT type="radio" name="sexo" value="Masculino" checked> Homem <BR> 
 <INPUT type="radio" name="sexo" value="Feminino"> Mulher 
 <BR> <BR> Frequência das viagens <BR> 
 <SELECT name="utilização"> 
 <OPTION value="1">Várias vezes por dia 
 <OPTION value="2">Uma vez por dia 
 <OPTION value="3">Várias vezes por semana 
 <OPTION value="4">várias vezes por mês 
 </SELECT> 
 <BR> <BR>Comentários sobre sua satisfação pessoal <BR> 
 <TEXTAREA cols="30" rows="7" name="comentários"></TEXTAREA> 
 <BR> <BR> 
 <INPUT type="checkbox" name="receber_info" checked> 
 Desejo receber notificação das novidades nas linhas de ônibus. <BR> <BR> 
 <INPUT type="submit" value="Enviar formulário"> 
 <BR> <BR> 
 <INPUT type="Reset" value="Apagar tudo"> 
 </FORM> 
</HTML> 
 
 
 
05 – Frames 
HTML – Lucilia Ribeiro 22
 
Frames 
 
 
 
"A morte é a libertação total: 
a morte é quando a gente pode, afinal, estar deitado de sapatos". 
(Mário Quintana) 
 
5.1 INTRODUÇÃO 
Os frames são divisões da tela do navegador em diversas telas (ou “quadros”). Com isso, 
torna-se possível apresentar mais de uma página por vez: por exemplo, um índice principal em 
uma parte pequena da tela, e os textos relacionados ao índice em outra parte. O objetivo 
principal é dividir a página em seções que se tornam HTML independentes. 
Não é difícil colocar frames em páginas; porém, nem todos os usuários gostam deles, pois 
nem sempre a navegação é fácil, além de problemas para a impressão e a marcação dos 
documentos interiores aos frames nos bookmarks. 
5.2 DOCUMENTOS DE LAYOUT E DE CONTEÚDO 
Com a definição de frames, os documentos escritos em HTML (extensão html ou htm) 
podem ser de dois tipos: Documentos de Layout e Documentos de Conteúdo. 
Documentos de layout contêm informações sobre a estrutura de frames dos documentos. 
Cada frame declarado em documento de layout contém uma referência implícita ou explícita 
para outro documento que será exibido no frame. Esse "documento filho" será exibido 
independentemente da existência de outros frames na janela do navegador. O "documento 
filho" pode ser um documento de conteúdo ou mesmo outro documento de layout encadeado. 
Os documentos de conteúdo são documentos normais em HTML. Um documento de 
conteúdo pode ser visto em um frame (de um documento de layout) ou sozinho, na janela do 
navegador. A tag <FRAME></FRAME> define o conteúdo de cada frame do documento. 
 
<frame src=pagina.htm name=nome scrolling=no noresize> 
 
SRC:Associa uma URL ao frame. 
NAME: Associa um valor (nome) à janela. 
SCROLLING: Define a presença, ausência ou atribuição automática pelo navegador das 
barras de rolagem. Pode ser yes, no ou auto. 
NORESIZE: Impede que o usuário mude o tamanho do frame. 
A tag <FRAMESET> </FRAMESET> substitui o TAG <BODY> em um documento de 
layout. Ela define a divisão da janela em duas ou mais linhas ou em duas ou mais colunas. 
Pode haver várias TAGs <FRAMESET> encadeados, fazendo-se, desta maneira, divisões das 
divisões da página. 
Contém os elementos FRAME, NOFRAMES e outros FRAMESETs que podem ser aninhados 
para que se tenha uma divisões dentro de uma divisão de layout. 
 
<FRAMESET cols=quant rows=quant frameborder=1|0 framespacing=num> 
 
COLS: Divide a janela (ou frame) em diversos frames verticais, tantos quantos forem os 
valores descritos. Os valores podem estar expressos em pixels, percentuaisou relativamente 
uns aos outros. Ex: <frameset cols="70%,*"> <frameset cols="50,100">. 
5 
05 – Frames 
HTML – Lucilia Ribeiro 23
ROWS: Divide a janela (ou frame) em diversos frames horizontais, tantos quantos forem 
os valores descritos. Os valores podem estar expressos em pixels, percentuais ou 
relativamente uns aos outros. 
FRAMEBORDER: Indica se será exibida uma borda 3D para os frames, ou se os frames 
não aparecerão destacados por uma borda. O parâmetro pode assumir os valores "1" (default, 
indica a exibição da borda) ou "0" (suprime a exibição de borda). 
FRAMESPACING: Cria um espaço adicional, em pixels, entre os frames. 
Os atributos FRAMESPACING e FRAMEBORDER funcionam igualmente por toda a cadeia de 
FRAMESETs encadeados, bastando que sejam declarados no primeiro comando FRAMESET a 
ser utilizado. A definição de frames através de percentuais é interessante, pois a diagramação 
da janela é preservada, não importando a resolução em que se estiver visualizando a página. 
5.3 FRAMES SOBREPOSTOS DIRETA E INDIRETAMENTE 
A janela do navegador pode ser dividida em diversos frames horizontais e verticais. Para 
que isso seja possível, as TAGs <FRAMESET> são encadeadas. Assim são criados frames 
sobrepostos diretamente: 
 
EX11.HTML (Documento de Layout) 
 
<HTML> 
 <HEAD> 
 <TITLE>EX11</TITLE> 
 </HEAD> 
 <FRAMESET rows=*,*> <!---Divisão da janela em 2 frames---> 
 <FRAME src=ex11a.html noresize> 
 <FRAMESET cols=30%,70%> <!---Divisão do segundo frame em duas---> 
 <FRAME src=ex11b.html> 
 <FRAME src=ex11c.html> 
 </FRAMESET> 
 </FRAMESET> 
</HTML> 
O documento acima é um documento de layout. Os documentos a que se referem os 
comandos <FRAME>, dentro do <FRAMESET>, são tipicamente documentos de conteúdo, mas 
também poderão ser novos documentos de layout, que dividam novamente cada frame. 
A janela do navegador foi inicialmente dividida em 2 frames horizontais iguais. Foi atribuído 
o documento de conteúdo "ex11a.htm" ao primeiro frame. 
Em seguida, dividiu-se o segundo frame em dois frames verticais, o primeiro com 30% do 
espaço disponível e o segundo com os restantes 70%. Um frame pode exibir um documento de 
conteúdo, isto é, um documento tradicional com textos, imagens etc, ou um documento de 
layout, que o dividiria novamente em outros frames. Chama-se isto de divisão indireta. 
Iremos criar os documentos ex11a, ex11b e ex11c para fazer funcionar o exemplo. 
 
EX11A.HTML 
 
<HTML> 
 <HEAD> 
 <TITLE>EX11A</TITLE> 
 </HEAD> 
 <BODY> 
 <P> 
 <FONT face="Arial, Helvetica" color="blue" size="+4"> 
 Este texto é um teste do arquivo EX11A 
 </FONT> 
 </BODY> 
</HTML> 
 
 
05 – Frames 
HTML – Lucilia Ribeiro 24
 
EX11B.HTML 
 
<HTML> 
 <HEAD> 
 <TITLE>EX11B</TITLE> 
 </HEAD> 
 <BODY> 
 <P><FONT face="Arial, Helvetica" color="red"> 
Este texto é um teste do arquivo EX11B</FONT> 
 </BODY> 
</HTML> 
 
EX11C.HTML 
 
<HTML> 
 <HEAD> 
 <TITLE>EX11C</TITLE> 
 </HEAD> 
 <BODY> 
 <H1 align="center"> <B>Este texto é um teste do arquivo EX11C</B></H1> 
 </BODY> 
</HTML> 
5.4 LINKS EM FRAME ALVO 
Quando o usuário pressiona um link qualquer em um frame, o link pode atualizar seu 
próprio frame com o documento contido em sua URL, ou atualizar outro frame. Para que seja 
possível a atualização de outros frames, foi introduzido o atributo TARGET na TAG <A>. O 
atributo "TARGET" pode ter o nome de um frame ou uma dentre as seguintes palavras: 
_self (atualiza o próprio frame) 
_parent (atualiza o "frame-mãe") 
_top (atualiza toda a janela, independente de qualquer frame - ex.: link externo) 
_blank ou _window (abre uma nova janela de navegador) 
 
"_self", "_parent" e "_top" são case-sensitive, e devem ser escritos em minúsculas. 
 
EX12.HTML 
 
<HTML> 
 <HEAD> 
 <TITLE>Este é o menu</TITLE> 
 </HEAD> 
 <FRAMESET rows=80%,*> 
 <FRAMESET cols=30%,*> 
 <FRAME src=ex12ind.html name=menu> 
 <FRAME src=ex12nada.html name=textos> 
 </FRAMESET> 
 <FRAME src=ex12nada.html name=ajuda> 
 </FRAMESET> 
</HTML> 
 
05 – Frames 
HTML – Lucilia Ribeiro 25
 
 
EX12A.HTML 
 
<HTML> 
 <HEAD> 
 <TITLE>Introdução </TITLE> 
 </HEAD> 
 <BODY> 
 <H1>Este é o documento a.htm</H1> 
 <H2>Introdução</H2> 
 </BODY> 
</HTML> 
 
EX12B.HTML 
 
<HTML> 
 <HEAD></HEAD> 
 <BODY> 
 <H1>Este é o documento b.htm</H1> 
 <H2>Capítulo 1</H2> 
 </BODY> 
</HTML> 
 
EX12C.HTML 
 
<HTML> 
 <HEAD></HEAD> 
 <BODY> 
 <H1>Este é o documento c.htm</H1> 
 <H2>Capítulo 2</H2> 
 </BODY> 
</HTML> 
 
EX12D.HTML 
 
<HTML> 
 <HEAD> 
 <TITLE>Capítulo 3 </TITLE> 
 </HEAD> 
 <BODY bgcolor=lightgreen> 
 <H1>Este é o documento d.htm</H1> 
 <H2>Capítulo 3</H2> 
 </BODY> 
</HTML> 
 
EX12E.HTML 
 
<HTML> 
 <HEAD> 
 <TITLE>Capítulo 5 </TITLE> 
 </HEAD> 
 <BODY bgcolor=aqua> 
 <H1>Este é o documento e.htm</H1> 
 <H2>Capítulo 4</H2> 
 </BODY> 
</HTML> 
 
EX12F.HTML 
 
<HTML> 
 <HEAD> 
 <TITLE>Capítulo 5 </TITLE> 
 </HEAD> 
 <BODY bgcolor=#ccccee> 
 <H1>Este é o documento f.htm</H1> 
 <H2>Capítulo 5</H2> 
 </BODY> 
</HTML> 
 
EX12NADA.HTML 
 
<HTML> 
 <HEAD></HEAD> 
 <BODY bgcolor="#80FFFF"> 
 </BODY> 
</HTML> 
 
EX12G.HTML 
 
<HTML> 
 <HEAD> 
 <TITLE>Capítulo 6</TITLE> 
 </HEAD> 
 <BODY bgcolor="skyblue"> 
 <H1>Capítulo 6</H1> 
 <HR> 
 <P>Este capítulo descreve alguns conceitos básicos 
relacionados com a utilização dos recursos de <A href = 
ex12hlp.html target = ajuda>frames </A> e sua utilização 
na criação de home pages.</P> 
 <UL> 
 <LI>O que são Frames</LI> 
 <LI>Sintaxe geral</LI> 
 <LI>Exemplos</LI> 
 </UL> 
 <HR> 
 <H5>Aula sobre o uso de Frames.</H5> 
 <BR> 
 </BODY> 
</HTML> 
 
EX12SOS.HTML 
 
<HTML> 
 <HEAD> 
 <TITLE>Ajuda do manual </TITLE> 
 </HEAD> 
 <BODY background=gray> 
 <H2><B><FONT face=Arial, Helvetica, sans-serif 
color=red>Arquivo de Ajuda Online</FONT></B></H2> 
 Este arquivo contém informações sobre a 
ajuda.<BR> 
 </BODY> 
</HTML> 
 
EX12HLP.HTML 
 
<HTML> 
 <HEAD> 
 <TITLE>Help do Frame.</TITLE> 
 </HEAD> 
 <BODY bgcolor=aquamarine> 
 <H1><FONT color=red>Frames</FONT></H1> 
 <P><TT>Os frames são divisões da tela do browser em diversas telas (ou “quadros”). Com isso, torna-se possível 
apresentar mais de uma página por vez: por exemplo, um índice principal em uma parte pequena da tela, e os textos 
relacionados ao índice em outra parte.</TT></P> 
 <P><A href=ex12nada.html>apagar texto de ajuda</A></P> 
 </BODY> 
</HTML> 
05 – Frames 
HTML – Lucilia Ribeiro 26
 
EX12IND.HTML 
 
<HTML> 
 <HEAD> 
 <TITLE>Menu principal</TITLE> 
 <base target=textos> 
 </HEAD> 
 <BODY bgcolor=gold> 
 <H1 align=center>Menu Principal</H1> 
 <UL> 
 <LI><A href=ex12a.html>Introdução </A> 
 <LI><A href=ex12b.html>Capítulo 1 </A> 
 <LI><A href=ex12c.html>Capítulo 2 </A> 
 <LI><A href=ex12d.html>Capítulo 3 </A> 
 <LI><A href=ex12e.html>Capítulo 4 </A> 
 <LI><A href=ex12f.html>Capítulo 5 </A> 
 <LI><A href=ex12g.html>Capítulo 6 </A> 
 </UL> 
 <HR> 
 <P CENTER> <A href=ex12sos.html target=ajuda>Ativa Ajuda</A> 
 <P CENTER> <A href=ex12nada.html target=ajuda>Desativa Ajuda</A> 
 </BODY> 
</HTML> 
 
 
 
 
 
 
 
 
 
 
 
 
 
06 – CSS 
HTML – Lucilia Ribeiro 27
 
Folhas de Estilo - CSS 
 
 
 
"O estilo é uma dificuldade de expressão" 
(Mário Quintana) 
 
6.1 INTRODUÇÃO 
CSS, sigla em inglês para Cascading Style Sheet que em português foi traduzido para Folha 
de Estilo em Cascata. 
A introdução deste conceito preconiza o uso dos elementos (tags) HTML, exclusivamente 
para marcar e estruturar o conteúdo do documento. Nenhum elemento HTML será usado para 
alterar a apresentação, ou seja estilizar o conteúdo. A tarefa de estilização ficará a cargo das 
CSS que nada mais é do que um arquivoindependente do arquivo HTML no qual são 
declaradas propriedades e valores de estilização para os elementos do HTML. 
Estas declarações de estilo, quer sejam estruturadas em um arquivo externo com extensão 
.css quer sejam declaradas de outros modos (importadas, lincadas, incorporadas ou inline), 
contém todas as regras de estilo para os elementos do documento HTML. 
6.2 A REGRA CSS E SUA SINTAXE 
Uma regra CSS é uma declaração que segue uma sintaxe própria e que define como será 
aplicado estilo a um ou mais elementos HTML. Um conjunto de regras CSS formam uma Folha 
de Estilos. 
Uma regra CSS, na sua forma mais elementar, compõe-se de três partes: um seletor, 
uma propriedade e um valor e tem a sintaxe conforme mostrado abaixo: 
 
seletor { propriedade: valor; } 
 
SELETOR: genericamente, é o elemento HTML identificado por sua tag, ou por uma classe, 
ou por uma ID, ou etc., e para o qual a regra será válida (por exemplo: <p>, <h1>, <form>, 
.minhaclasse, etc...); 
PROPRIEDADE: é o atributo do elemento HTML ao qual será aplicada a regra (por 
exemplo: font, color, background, etc...). 
VALOR: é a característica específica a ser assumida pela propriedade (por exemplo: letra 
tipo arial, cor azul, fundo verde, etc...) 
Na sintaxe de uma regra CSS, escreve-se o seletor e a seguir a propriedade e valor 
separados por dois pontos e entre chaves { }. Quando mais de uma propriedade for definida 
na regra, deve-se usar ponto-e-vírgula para separá-las. O ponto-e-vírgula é facultativo no caso 
de propriedade única e também após a declaração da última propriedade no caso de mais de 
uma. No entanto é de boa técnica usar-se sempre o ponto-e-vírgula após cada regra para uma 
propriedade. 
No exemplo abaixo, o seletor é o "documento todo" (body - a página web), a propriedade é 
o fundo do documento e o valor é a cor branca. Se o valor for uma palavra composta, deverá 
estar entre aspas duplas " ", ou simples ': 
 
body { 
 background: lightgray; 
} 
 
h3 { 
 font-family: "Comic Sans MS" 
} 
6 
06 – CSS 
HTML – Lucilia Ribeiro 28
Para tornar mais legível as definições de estilo, você deve descrever uma propriedade e 
seu valor, em cada linha, como abaixo, mas isto não é obrigatório! 
 
p { 
text-align: right; 
color: #FF0000; 
} 
6.3 AGRUPAMENTO DE SELETORES 
Uma regra CSS quando válida para vários seletores, estes podem ser agrupados. Separe 
cada seletor com uma vírgula. No exemplo abaixo agrupamos todos os elementos cabeçalho. A 
cor de todos os cabeçalhos será verde. 
 
h1, h2, h3, h4, h5, h6 { 
color: green; 
} 
6.4 O SELETOR CLASSE 
Você não está restrito somente aos elementos HTML (tags) para aplicar regras de estilo. 
Você pode "inventar" um nome e com ele criar uma classe a qual definirá as regras CSS. E o 
mais interessante das classes, é que elas podem ser aplicadas a qualquer elemento HTML. E 
mais ainda, você pode aplicar estilos diferentes para o mesmo tipo de elemento do HTML, 
usando classes diferentes para cada um deles. A sintaxe para o seletor classe é mostrada 
abaixo: elemento HTML mais um nome qualquer que você "inventa" precedido de . (ponto): 
 
elemento HTML.minhaclasse { 
propriedade: valor; 
} 
Por exemplo: suponha que você queira ter dois tipos de parágrafos em seu documento: um 
parágrafo com letras na cor preta e um parágrafo com letras na cor azul. 
 
p.corum { 
 color:black; 
} 
p.cordois { 
 color:blue; 
} 
No seu documento HTML as regras seriam aplicadas conforme abaixo: 
 
<p class =corum> este parágrafo terá cor preta.</p> 
<p class =cordois> este parágrafo terá cor azul.</p> 
 
6.5 INSERINDO COMENTÁRIOS 
Você pode inserir comentários nas CSS para explicar seu código, e principalmente ajudá-lo 
a relembrar de como você estruturou e qual a finalidade de partes importantes do código. O 
comentário introduzido no código será ignorado pelo navegador. Um comentário nas CSS 
começa com o /*, e termina com */. Veja o exemplo abaixo: 
 
/* este é um comentário*/ 
 
p { 
 font-size: 14px; /* este é outro comentário*/ 
 color: #000000; 
 font-family: Arial, Serif; 
} 
 
 
06 – CSS 
HTML – Lucilia Ribeiro 29
6.6 FOLHA DE ESTILO EXTERNA 
Uma folha de estilo é dita externa, quando as regras CSS estão declaradas em um 
documento a parte do documento HTML. A folha de estilo é um arquivo separado do arquivo 
html e que tem a extensão .css. 
Uma folha de estilo externa é ideal para ser aplicada a várias páginas. Com uma folha de 
estilo externa, você pode mudar a aparência de um site inteiro mudando um arquivo apenas (o 
arquivo da folha de estilo). 
O arquivo css da folha de estilo externa deverá ser lincado ou importado ao documento 
HTML, dentro da tag <HEAD> do documento. A sintaxe geral para lincar uma folha de estilo 
chamada estilo.css é mostrada abaixo: 
 
<HEAD> 
 .......... 
 <LINK rel=stylesheet type=text/css href=estilo.css> 
 ......... 
</HEAD> 
O browser lerá as regras de estilo do arquivo estilo.css, e formatará o documento de 
acordo com elas.Uma folha de estilo externa pode ser escrita em qualquer editor de texto. O 
arquivo não deve conter nenhuma tag HTML. As folhas de estilo devem ser "salvas" com uma 
extensão .css. 
6.7 FOLHA DE ESTILO INCORPORADA OU INTERNA 
Uma folha de estilo é dita incorporada ou interna, quando as regras CSS estão declaradas 
no próprio documento HTML. 
Uma folha de estilo incorporada ou interna é ideal para ser aplicada a uma única página. 
Com uma folha de estilo incorporada ou interna, você pode mudar a aparência de somente um 
documento, aquele onde a folha de estilo esta incorporada. 
As regras de estilo, válidas para o documento, são declaradas na seção <HEAD> do 
documento com a tag de estilo <STYLE>, conforme sintaxe mostrada abaixo: 
 
<HEAD> 
 ........... 
 <STYLE type=text/css> 
 BODY { 
 background: white; 
 } 
 H3 { 
 color: red; 
 } 
 P { 
 margin-left: 15px; 
 } 
 </STYLE> 
 ........... 
</HEAD> 
6.8 FOLHA DE ESTILO INLINE 
Uma folha de estilo é dita inline, quando as regras CSS estão declaradas dentro da tag do 
elemento HTML. Um estilo inline só se aplica a um elemento HTML. Ele perde muitas das 
vantagens de folhas de estilo pois mistura o conteúdo com a apresentação. Use este método 
excepcionalmente, como quando quiser aplicar um estilo a uma única ocorrência de um 
elemento. A sintaxe para aplicar estilo inline é mostrada a seguir: 
 
<P style=color:#000000; margin: 5px;> 
 Aqui um parágrafo de cor preta e com 5px nas 4 margens. 
</P> 
06 – CSS 
HTML – Lucilia Ribeiro 30
6.9 FOLHAS MÚLTIPLAS DE ESTILO 
Se alguma propriedade for definida para um mesmo elemento em folhas de estilo 
diferentes, entrará em ação, o EFEITO CASCATA e prevalecerão os valores da folha de estilo 
mais específica. Suponha, uma folha de estilo externa com as seguintes propriedades para o 
seletor h2: 
 
h2 { 
 color: #FFCC00; 
 text-align: center; 
 font: italic 9pt Verdana, Sans-serif; 
} 
E uma folha de estilo interna com as seguintes propriedades para o seletor h2: 
 
h2 { 
 color: #FFCC00; 
 text-align: center; 
 font: italic 10pt Verdana, Sans-serif; 
} 
Se ambas as páginas estiverem vinculadas ao documento, como há um conflito no 
tamanho das letras para <h2>, prevalecerá a folha interna e a letra de <h2> terá o tamanho 
igual a 10 pt. 
Para determinar a prioridade são considerados diversos fatores, entre eles, o tipo de folha 
de estilo, o local físico da folha de estilo no seu todo, o local físico da regra de estilo na folha 
de estilo e a especificidade da regra de estilo. 
A prioridade para o efeito cascata: 
1. folha de estilo do usuário; 
2. folha de estilo do desenvolvedor; 
3. estilo inline (dentro de um elemento HTML); 
4. estilo incorporado (definido na seção head do documento); 
5. estilo externo (importado ou linkado). 
6. folha de estilo nativano navegador. 
Assim, em linhas gerais, um estilo definido pelo usuário prevalece sobre todos os demais, a 
seguir vem as folhas de estilo definidas pelo desenvolvedor do site e para estas os estilos 
inline (dentro de um elemento HTML) tem a prioridade a mais elevada, o que significa que 
prevalecerá sobre aquele definido na seção head e este sobre o definido em uma folha de 
estilo externa e finalmente a última prioridade é para estilos padrão do navegador. 
06 – CSS 
HTML – Lucilia Ribeiro 31
 
EX13.CSS 
 
 H1 { 
 font-family: Verdana; 
 font-size: xx-large; 
 font-weight: bold; 
 color: #800000; 
 background: #FFFFCC; 
 text-align: center; 
 border: 10pt green inset; 
 } 
 
 H2 { 
 font-family: Arial; 
 font-size: x-large; 
 font-weight: bold; 
 color: #FFFFCC; 
 background: #800000; 
 text-align: center; 
 border: 10pt blue ridge; 
 } 
 
 H3 { 
 font-family: Courier; 
 font-size: large; 
 font-weight: bold; 
 color: #800080; 
 text-align: center; 
 border: 10pt red groove; 
 } 
 
 A { 
 font-family: Arial; 
 font-weight: bold; 
 color: #0000FF; 
 cursor: crosshair; 
 } 
 
 A:LINK { 
 font-family: Arial; 
 font-weight: bold; 
 color: #0000FF; 
 } 
 
 A:VISITED { 
 font-family: Arial; 
 font-weight: bold; 
 color: #800080; 
 text-decoration: underline; 
 position: relative; 
 } 
 
 B { 
 font-family: Arial; 
 font-weight: bold; 
 color: #800000; 
 } 
 
 I { 
 font-family: Arial; 
 font-weight: bold; 
 font-style: italic; 
 } 
 
 LI { 
 font-family: Arial; 
 font-size: medium; 
 color: #000080; 
 list-style: circle; 
 } 
 
 P { 
 font-family: Arial; 
 font-size: medium; 
 color: #000080; 
 position: relative; 
 } 
 
 TD { 
 font-family: sans-serif; 
 font-size: medium; 
 background: #99CCCC; 
 } 
 
 TH { 
 font-family: sans-serif; 
 font-size: medium; 
 font-weight: bold; 
 color: #FF0000; 
 background: #FFFF00; 
 text-align: center; 
 position: relative; 
 } 
 
 PRE { 
 font-family: monospace; 
 font-size: medium; 
 background: #CCFFFF; 
 left: 1cm; 
 } 
 
 .first { 
 border-top: ridge; 
 border-left: ridge; 
 text-decoration: underline; 
 } 
 
 .last { 
 border-bottom: ridge; 
 border-right: ridge; 
 border-top: solid; 
 border-left: double; 
 text-decoration: line-through; 
 letter-spacing: 2pt; 
 margin: .5cm .5cm .1cm .5cm; 
 } 
 
06 – CSS 
HTML – Lucilia Ribeiro 32
 
EX13.HTML 
 
<HTML> 
 <HEAD> 
 <TITLE>EX13</TITLE> 
 <LINK rel=stylesheet type=text/css href=ex13.css> 
 </HEAD> 
 <BODY bgcolor=White> 
 <H1>Este é um cabeçalho H1</H1> 
 <P class=first> Esta é uma classe de parágrafo "first"</P> 
 <H2>Este é um cabeçalho H2</H2> 
 <P>Este é um parágrafo normal com texto em <B>negrito</B> e em <I>itálico</I>.</P> 
 <H3>Este é um cabeçalho H3</H3> 
 <UL> 
 <LI>Este é um item de lista com um link <A href=ex13.html>vazio</A> 
 </UL> 
 <PRE> 
 Aqui vai algum texto pré-formatado. 
 </PRE> 
 <TABLE> 
 <TR> 
 <TH>Um cabeçalho de tabela</TH> 
 </TR> 
 <TR> 
 <TD>Uma célula de tabela</TD> 
 </TR> 
 </TABLE> 
 <P class=last>E aqui está uma classe de parágrafo "last"</P> 
 </BODY> 
</HTML> 
 
 
 
 
 
 
 
 
 
 
 
07 – Java Script 
HTML – Lucilia Ribeiro 33
 
Introdução ao Java Script 
 
 
 
"Confesso que até hoje só conheci dois sinônimos perfeitos: 'nunca' e 'sempre'." 
(Mário Quintana) 
 
7.1 INTRODUÇÃO 
A linguagem HTML é especializada na formatação de páginas e na criação de hiperlinks. Ela 
é totalmente desprovida de recursos para a validação de conteúdo e comandos estruturais que 
permitam a execução repetitiva de trechos do programa. Podemos resolver esse problema 
utilizando uma linguagem de script como a JavaScript. 
A primeira coisa que tem de ficar clara é que a linguagem JavaScript não deve ser 
confundida com a linguagem de programação Java. O Java permite a criação de uma aplicação 
independente e possui todos os recursos de uma linguagem de programação destinada à 
criação de aplicações comerciais, assim como a linguagem C. A JavaScript é uma linguagem de 
script que se aloja dentro de um programa HTML. Você não pode criar um programa em 
JavaScript e executá-lo sem ter um navegador. 
O J avaScript é uma linguagem interpretada, ou seja, o código fonte sempre é traduzido 
para uma linguagem de máquina que o computador entenda na hora em que for executado. 
Ele é baseado em objetos, que significa que o programador pode utilizar-se de objetos 
predefinidos ou então criar novos objetos para satisfazer suas necessidades. 
7.2 ORIENTAÇÃO A OBJETOS 
A JavaScript é baseada em objetos. Isso quer dizer, de uma forma bem simples, que ela 
trata todos os elementos de uma página Web como um objeto. Os objetos normalmente são 
agrupados de acordo com seu tipo ou finalidade. Quando um documento é carregado no 
navegador, ele cria um certo número de objetos JavaScript com propriedades e valores 
ajustados pelo conteúdo do documento. Esses objetos respeitam uma hierarquia que reflete a 
estrutura da página HTML em si. 
Um objeto normalmente armazena uma série de informações que podem ser acessadas e 
utilizadas para processamento, ou alteradas pelo programador. Uma janela que exibe uma 
home page possui diversos objetos intrínsecos, por xemplo: navigator (possui propriedades 
para o nome e versão do navegador que está sendo usado), window (é o objeto de mais alto 
nível. Possui propriedades que se aplicam à janela como um todo. Cada janela-filha possui 
também um objeto window), document (contém informações sobre a página ou documento 
HTML como um todo, incluindo dados sobre os elementos de formulários, links e âncoras, além 
de uma série de funções que permitem mudar as características da página), form (guarda 
informações específicas sobre formulários da página atual tais como o seu método, URL e 
dados sobre seus elementos ou campos), history (mantém uma lista de todos os sites 
visitados na sessão de uso atual do navegador) e location (possui informações sobre o local 
da página e informações relacionadas tais como o protocolo utilizado e seu domínio. 
7.2.1 PROPRIEDADES 
Um objeto possui características próprias que o tornam único dentro de um grupo. Por 
exemplo, um carro possui características do tipo, número de portas, potência do motor, 
número de passageiros, cor, peso, etc. Já uma geladeira possui características do tipo, 
capacidade (em litros), cor, altura, peso, etc. Algumas características ou propriedades são 
comuns a muitos objetos (nos exemplo acima a cor e o peso) enquanto outras são específicas 
a cada um. 
As propriedades podem ser vistas como variáveis que armazenam uma informação 
relacionada com um determinado objeto. As propriedades de um objeto são acessadas através 
de uma sintaxe bastante simples e que consiste do nome do objeto, um ponto e o nome da 
7 
07 – Java Script 
HTML – Lucilia Ribeiro 34
propriedade. Por exemplo, o objeto documento (que diz respeito à página HTML) possui uma 
propriedade que é a cor do fundo. Para se referir a esta propriedade devemos usar: 
documento.bgcolor. Para saber o conteúdo do título do documento pode-se usar outra 
propriedade, assim: documento.title. 
7.2.2 MÉTODOS 
Além de propriedades, um objeto possui, em sua maioria, funções especiais chamadas 
métodos que realizam alguma operação relacionada com o objeto. Os métodos normalmente 
são usados para alterar o valor de uma propriedade do objeto ou então executar uma tarefa 
específica. A sintaxe básica de um método é composta da seguinte forma: 
objeto.nome_do_método(argumento) 
Onde objeto é o nome do objeto que sofre a ação do método, nome_do_método é o 
nome que

Outros materiais