Você está na página 1de 55

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
Í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 2
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 ........................................................................................... 34
7.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

Algoritmos e Linguagens – Lucilia Ribeiro 3


01 – O Básico

1 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:

HTML – Lucilia Ribeiro 4


01 – O Básico

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>

HTML – Lucilia Ribeiro 5


01 – O Básico

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

HTML – Lucilia Ribeiro 6


01 – O Básico

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>

HTML – Lucilia Ribeiro 7


01 – O Básico

<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>

HTML – Lucilia Ribeiro 8


02 – Links e Listas

2 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 ocupar espaç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>

HTML – Lucilia Ribeiro 9


02 – Links e Listas

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>

HTML – Lucilia Ribeiro 10


02 – Links e Listas

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>

HTML – Lucilia Ribeiro 11


03 – Imagens e Tabelas

3 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>

HTML – Lucilia Ribeiro 12


03 – Imagens e Tabelas

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> define a 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.

HTML – Lucilia Ribeiro 13


03 – Imagens e Tabelas

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>

HTML – Lucilia Ribeiro 14


03 – Imagens e Tabelas

<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>

HTML – Lucilia Ribeiro 15


04 – Formulários

4 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 que processa 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

HTML – Lucilia Ribeiro 16


04 – Formulários

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

HTML – Lucilia Ribeiro 17


04 – Formulários

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.

HTML – Lucilia Ribeiro 18


04 – Formulários

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ódigo anterior
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

HTML – Lucilia Ribeiro 19


04 – Formulários

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.

HTML – Lucilia Ribeiro 20


04 – Formulários

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>

HTML – Lucilia Ribeiro 21


05 – Frames

5 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, percentuais ou relativamente
uns aos outros. Ex: <frameset cols="70%,*"> <frameset cols="50,100">.

HTML – Lucilia Ribeiro 22


05 – Frames

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>

HTML – Lucilia Ribeiro 23


05 – Frames

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>

HTML – Lucilia Ribeiro 24


05 – Frames

EX12A.HTML EX12B.HTML

<HTML> <HTML>
<HEAD> <HEAD></HEAD>
<TITLE>Introdução </TITLE> <BODY>
</HEAD> <H1>Este é o documento b.htm</H1>
<BODY> <H2>Capítulo 1</H2>
<H1>Este é o documento a.htm</H1> </BODY>
<H2>Introdução</H2> </HTML>
</BODY>
</HTML>

EX12C.HTML EX12D.HTML

<HTML> <HTML>
<HEAD></HEAD> <HEAD>
<BODY> <TITLE>Capítulo 3 </TITLE>
<H1>Este é o documento c.htm</H1> </HEAD>
<H2>Capítulo 2</H2> <BODY bgcolor=lightgreen>
</BODY> <H1>Este é o documento d.htm</H1>
</HTML> <H2>Capítulo 3</H2>
</BODY>
</HTML>

EX12E.HTML EX12F.HTML

<HTML> <HTML>
<HEAD> <HEAD>
<TITLE>Capítulo 5 </TITLE> <TITLE>Capítulo 5 </TITLE>
</HEAD> </HEAD>
<BODY bgcolor=aqua> <BODY bgcolor=#ccccee>
<H1>Este é o documento e.htm</H1> <H1>Este é o documento f.htm</H1>
<H2>Capítulo 4</H2> <H2>Capítulo 5</H2>
</BODY> </BODY>
</HTML> </HTML>

EX12G.HTML EX12NADA.HTML

<HTML> <HTML>
<HEAD> <HEAD></HEAD>
<TITLE>Capítulo 6</TITLE> <BODY bgcolor="#80FFFF">
</HEAD> </BODY>
<BODY bgcolor="skyblue"> </HTML>
<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 EX12SOS.HTML
na criação de home pages.</P>
<UL> <HTML>
<LI>O que são Frames</LI> <HEAD>
<LI>Sintaxe geral</LI> <TITLE>Ajuda do manual </TITLE>
<LI>Exemplos</LI> </HEAD>
</UL> <BODY background=gray>
<HR> <H2><B><FONT face=Arial, Helvetica, sans-serif
<H5>Aula sobre o uso de Frames.</H5> color=red>Arquivo de Ajuda Online</FONT></B></H2>
<BR> Este arquivo contém informações sobre a
</BODY> ajuda.<BR>
</HTML> </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>

HTML – Lucilia Ribeiro 25


05 – Frames

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>

HTML – Lucilia Ribeiro 26


06 – CSS

6 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 arquivo independente 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"
}

HTML – Lucilia Ribeiro 27


06 – CSS

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;
}

HTML – Lucilia Ribeiro 28


06 – CSS

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>

HTML – Lucilia Ribeiro 29


06 – CSS

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 nativa no 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.

HTML – Lucilia Ribeiro 30


06 – CSS

EX13.CSS
font-family: Arial;
H1 { font-weight: bold;
font-family: Verdana; font-style: italic;
font-size: xx-large; }
font-weight: bold;
color: #800000; LI {
background: #FFFFCC; font-family: Arial;
text-align: center; font-size: medium;
border: 10pt green inset; color: #000080;
} list-style: circle;
}
H2 {
font-family: Arial; P{
font-size: x-large; font-family: Arial;
font-weight: bold; font-size: medium;
color: #FFFFCC; color: #000080;
background: #800000; position: relative;
text-align: center; }
border: 10pt blue ridge;
} TD {
font-family: sans-serif;
H3 { font-size: medium;
font-family: Courier; background: #99CCCC;
font-size: large; }
font-weight: bold;
color: #800080; TH {
text-align: center; font-family: sans-serif;
border: 10pt red groove; font-size: medium;
} font-weight: bold;
color: #FF0000;
A{ background: #FFFF00;
font-family: Arial; text-align: center;
font-weight: bold; position: relative;
color: #0000FF; }
cursor: crosshair;
} PRE {
font-family: monospace;
A:LINK { font-size: medium;
font-family: Arial; background: #CCFFFF;
font-weight: bold; left: 1cm;
color: #0000FF; }
}
.first {
A:VISITED { border-top: ridge;
font-family: Arial; border-left: ridge;
font-weight: bold; text-decoration: underline;
color: #800080; }
text-decoration: underline;
position: relative; .last {
} border-bottom: ridge;
border-right: ridge;
B{ border-top: solid;
font-family: Arial; border-left: double;
font-weight: bold; text-decoration: line-through;
color: #800000; letter-spacing: 2pt;
} margin: .5cm .5cm .1cm .5cm;
}
I{

HTML – Lucilia Ribeiro 31


06 – CSS

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>

HTML – Lucilia Ribeiro 32


07 – Java Script

7 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

HTML – Lucilia Ribeiro 33


07 – Java Script

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 identifica o método e argumento é uma expressão ou valor opcional que será
usado para alterar ou atuar sobre o objeto.
O objeto documento possui um método chamado write cuja finalidade é a de inserir
linhas no programa HTML durante sua execução: documento.write(“<H1>Demonstração de
JavaScript</H1>”). Já o objeto window possui um método chamado alert que exibe uma
mensagem de aviso em uma caixa de diálogo: window.alert(“operação inválida”).
7.2.3 EVENTOS
Uma das características de uma linguagem baseada em objetos é a possibilidade de
gerenciar eventos, ou seja, reagir a um evento e executar algum procedimento. De uma forma
simples podemos dizer que um evento é uma ação que ocorre na página devido à interação do
usuário. Por exemplo, clicar sobre um botão, marcar um campo, digitar o conteúdo de um
campo.
Os eventos são o principal recurso da linhagem JavaScript para a validação de campos e
alteração dinâmica da página. Veja uma tabela parcial dos eventos e seus gerenciadores:

Evento Gerenciado associado Comentário


Blur onBlur É executado sempre que um campo perde o foco
change onChange Executado sempre que o conteúdo de um campo é alterado
Click onClick Executado sempre que um objeto do formulário é clicado
focus onFocus Executado quando um campo recebe o foco
Load onLoad Executado quando uma janela é totalmente carregada
mouseover onMouseOver Executado sempre que o mouse passa por cima de um objeto
select onSelect Executado quando um texto de um campo (text ou textarea) é selecionado
submit onSubmit Executado sempre que o usuário enviar um formulário para o servidor
Unload onUnload Executado quando um documento é abandonado

Com o gerenciador de eventos, podemos mudar o comportamento do navegador. Por


exemplo, quando você clicar sobre uma área da janela com o botão direito do mouse, aparece
um menu rápido padrão. Você pode usar um gerenciador de evento para mudar isso. Ao invés
de mostrar o menu, você pode trocar a cor de fundo da tela, mostrar uma caixa de diálogo ou
executar uma rotina qualquer.
7.2.4 FUNÇÕES
Funções são rotinas independentes que executam uma tarefa específica. Elas se
diferenciam dos métodos, pois não estão associadas a um objeto. O JavaScript possui funções
genéricas que realizam operações matemáticas, com strings, datas, etc. A linguagem também
permite que o usuário crie suas próprias funções.
7.3 ELEMENTOS DA LINGUAGEM
Vimos que a linguagem funciona através da manipulação de objetos. Essa manipulaç~çao
pode ser feita de diversas formas. Seja através da alteração direta do conteúdo de uma
propriedade ou através de rotinas escritas na linguagem JavaScript, que possui sua própria
sintaxe e regras. Veremos as características de programação da linguagem:
7.3.1 VARIÁVEIS

HTML – Lucilia Ribeiro 34


07 – Java Script

Além de propriedades, que armazenam informações sobre objetos, a JavaScript permite a


criação de variáveis de memória cuja finalidade é armazenar temporariamente um conteúdo
qualquer que pode ser um texto, um valor, uma data, etc. Uma variável pode receber seu
conteúdo através da atribuição simples do conteúdo ou do resultado da ação de uma
expressão ou função:
nome=”Geraldo Amaral”
hoje=date()
total=20*4
O nome de uma variável pode começar com uma letra ou sublinhado (_) seguidos de
números ou letras sem espaço. A JavaScript faz distinção entre letras maiúsculas e
minúsculas.
As variáveis podem ser do tipo inteiro (ou integer, que representam um número que pode
ser positivo, negativo ou fracionário), ponto flutuante (ou floating point, conhecido também
como notação científica), booleanos (podem assumir valores TRUE ou FALSE) ou literais
string (que consiste em um texto envolvido por aspas).
7.3.2 EXPRESSÕES e OPERADORES
Uma expressão é uma combinação de variáveis, métodos, funções e operadores que
retornam um resultado qualquer. Uma expressão é usada para atribuir um valor a uma
variável ou para ser testada e uma ação tomada em função do seu resultado. Na tabela a
seguir estão os principais operadores e seus respectivos efeitos:

Operador Função Exemplos


= Atribuição x = 20 (atribui o valor 20 à variável x)
+ Adição 10 + 5 (resulta em 15)
– Subtração 10 – 8 (resulta em 2)
* Multiplicação 5 * 4 (resulta em 20)
/ Divisão 50 / 5 (resulta em 10)
% Módulo 10 % 3 (é o resto da divisão de 10 por 3, resultado 1)
&& E lógico (and) a && b (retorna TRUE se as duas expressões lógicas a e b forem verdadeiras)
|| Ou lógico (or) a || b (retorna TRUE se uma das duas expressões a ou b forem verdadeiras)
== Igual a a == b (retorna TRUE se a for igual a b)
!= Diferente a != b (retorna TRUE se a for diferente de b)
> Maior que a > b (retorna TRUE se a for maior que b)
< Menor que a < b (retorna TRUE se a for menor que b)
>= Maior ou igual a a >= b (retorna TRUE se a for maior ou igual a b)
<= Menor ou igual a a <= b (retorna TRUE se a for menor ou igual a b)

7.3.3 DECLARAÇÕES
A seguir encontra-se uma lista com os principais comandos ou declarações da linguagem
JavaScript. Estes comandos são usados basicamente para criar a estrutura lógica do programa.
Eles são usados para a tomada de decisão, execução repetitiva de outros comandos ou a
criação de funções do usuário.

Comando Função Sintaxe Exemplos


break interrompe o comando while ou for que break; function teste(x){
está sendo executado e transfere o controle var i = 0;
do programa para o comando seguinte ao while (i < 6) {
comando que encerra o laço. if (i == 4)
break;
i++;
}
return i*x;
}
comentários inclui linhas que serão ignoradas pela //texto //esta é uma linha de
linguagem. Para comentário de uma única ou comentário
linha use duas barras. Para comentários /*texto longo*/ /*este é um comentário
que ocupem várias linhas, inicie com /* e extenso que ocupa mais de
finalize com */ uma linha consecutiva.*/

HTML – Lucilia Ribeiro 35


07 – Java Script

continue termina a execução de um grupo de continue


comandos dentro de um laço gerado pelo
while ou for reiniciando o processo na
próxima interação, ou seja, ele retorna o
controle para a linha que contém a
condição validada pelo laço. Dentro de um
comando while volta para a linha da
condição e dentro de um comando for para
a linha da expressão usada para
atualização.
for estrutura de controle que permite a for (exp1; exp2; exp3){ for (var i=0; i<19; i++) {
execução repetitiva de comandos comandos n = n + I;
envolvidos dentro dos limites do comando } myfunc(n);
for. Ele é composto de três expressões. A }
primeira é usada para inicializar uma
variável que é usada como um contador
para controlar as repetições. A segunda
expressão é analisada e se seu valor for
TRUE, ela executa os comandos seguintes.
Caso contrário abandona o comando FOR.
A terceira expressão é usada para
aumentar ou diminuir o valor do contador.
function cria uma função definida pelo usuário. Ela function nome(param){ function cubo(x){
recebe o nome determinado pelo texto que comandos return x*x*x;
for especificado no local de nome. No caso } }
da função retornar um valor, deve ser
especificado o comando return com a
expressão de retorno.
if ... else faz a avaliação de uma expressão e if (condição) { if (a%2 = 0) {
executa os comandos dentro do if se o comandos document.write (“par”)
resultado for verdadeiro. Caso contrário, os } else { else
comandos seguintes ao if são executados. comandos document.write(“impar”);
Se a cláusula else for usada os comandos }
seguintes a ela são executados caso a
expressão se torne falsa.
this substitui o nome do objeto atual quando se this.property
aplica um método ou uma propriedade.
var declara o nome de uma variável e var
opcionalmente inicializa a variável com um var1=valor, var2;
valor.
while estrutura de controle que avalia uma while (condição) { x = 0;
expressão e se ela for verdadeira executa o comandos while (x <= 10) {
grupo de comandos. Quando a expressão } document.write(x*2);
se torna falsa o fluxo do programa é x++;
continuado sendo executada a instrução }
seguinte ao comando while.

7.4 JAVASCRIPT BÁSICO


A JavaScript é uma linguagem interpretada pelo navegador. O código é um tipo de hóspede
dentro de um programa HTML. No mesmo arquivo .HTML que estão os comandos básicos da
linguagem HTML, o código JavaScript é inserido de maneira a ser interpretado quando
necessário.
Existem duas formas de incluir um código JavaScript dentro do documento HTML. A
primeira é embutir o código inteiramente dentro do documento e a segunda é criar um arquivo
externo com os comandos e que é referenciado por um comando dentro do programa HTML
que o carrega automaticamente.
Embutir o código dentro do programa HTML tem a vantagem de deixar tudo à mão para a
edição do código. É ideal quando o código JavaScript vai ser usado apenas naquele
documento. A criação de um arquivo separado é interessante quando um mesmo código
JavaScript é utilizado por vários documentos.
7.4.1 EMBUTINDO O CÓDIGO JavaScript
Para embutir o código JavaScript no programa HTML, deve ser usado o comando <SCRIPT
language = JavaScript> ..... </SCRIPT>. Dentro desta tag você deve inserir os comandos
da linguagem. Este código é avaliado depois da página HTML ter sido carregada. Se existirem

HTML – Lucilia Ribeiro 36


07 – Java Script

funções definidas pelo usuário dentro desse código, elas serão apenas carregadas e
executadas somente quando algum evento as acionar.

EX14.HTML

<HTML>
<HEAD>
<TITLE>EX14 - embutindo um código JavaScript</TITLE>
<SCRIPT language="JavaScript">
alert( "Esta caixa de diálogo foi exibida pelo código JavaScript embutido no programa" )
document.write("Esta linha também foi escrita pelo código JavaScript")
</SCRIPT>
</HEAD>
<BODY bgcolor="#FFFFFF">
<HR>
Esta linha já é parte do documento HTML.
</BODY>
</HTML>
7.4.2 CARREGANDO UM ARQUIVO EXTERNO
Usar um arquivo externo é bastante simples, basta adicionar na linha do comando
<SCRIPT> o endereço do arquivo através do atributo src. Veja o código abaixo:

EX15.HTML

<HTML>
<HEAD>
<TITLE>EX15 – carregando arquivo JavaScript externo</TITLE>
<SCRIPT language=JavaScript src=ex15.js>
</SCRIPT>
</HEAD>
<BODY bgcolor="#FFFFFF">
<HR>
Esta linha já é parte do documento HTML.
</BODY>
</HTML>
O arquivo ex15 é um arquivo texto normal. O seu conteúdo é:

EX15.JS

alert( "Esta caixa de diálogo foi exibida pelo código JavaScript embutido no programa" )
document.write("Esta linha também foi escrita pelo código JavaScript")
7.4.3 EXTENSÕES JavaScript PARA A LINGUAGEM HTML
O container definido pelo comando <SCRIPT>...</SCRIPT> é usado para armazenar
comandos que devem ser executados imediatamente após o carregamento do documento
HTML e funções definidas pelo usuário que são executadas em função da ocorrência de um
determinado evento com um objeto.
No exemplo a seguir, dentro da tag <SCRIPT> são criadas duas funções, uma chamada
Quadrado() e outra Cubo(). Ainda dentro do container, são inseridos alguns comandos que
inicializam uma variável e acionam a função Quadrado(), exibindo uma frase no documento
contendo o valor original e o seu Quadrado.
Ao terminar a execução do script, o documento HTML é carregado normalmente. Através
de uma extensão do JavaScript à linguagem HTML, pode-se controlar os eventos que ocorrem
com um objeto e tomar uma ação baseada neste evento.
O comando input, conforme já foi visto, é usado para receber a digitação de um número.
Ao digitar o número e teclar enter, o gerenciador de eventos do JavaScript chamado onBlur
ativa a caixa de diálogo Alert e a função Cubo mostrando o resultado da operação:

HTML – Lucilia Ribeiro 37


07 – Java Script

EX16.HTML

<HTML>
<HEAD>
<TITLE>EX16 - eventos - OnChange</title>
</HEAD>
<SCRIPT language=”javascript”>
document.write("Linha gerada pelo JavaScript durante o seu carregamento"+"<br>")
function quadrado(x) // Função executada por comandos dentro do container Script. {
document.write( x*x)
}
function cubo(x) // Função executada apenas quando um evento ocorrer {
return x*x*x
}
a=5
document.write("A raiz de "+ a +" é igual a = " )
quadrado(a)
</SCRIPT>
<BODY bgcolor="#FFFFFF">
<HR>
<FORM>
<INPUT type=text name=teste Value=""
onChange="alert('O cubo de '+ this.value + ' é ' +cubo(this.value))" >
</FORM>
<HR>
</BODY>
</HTML>
7.5 ELEMENTOS ESSENCIAIS DO JavaScript
Veremos agora alguns elementos essenciais mínimos para trabalhar com a linguagem.
7.5.1 O OBJETO DOCUMENT
O objeto document é criado automaticamente pelo comando HTML <HEAD> e <BODY>.
Como todo objeto, ele possui características ou propriedades que podem ser acessadas ou até
mesmo alteradas. Para usar uma propriedade ou método deste objeto deve ser usada a
seguinte sintaxe: document.nome_da_propriedade.
O MÉTODO DOCUMENTO.WRITE(): um dos elementos da linguagem JavaScript mais
utilizados é o método write do objeto document. Ele tem como finalidade escrever na página
HTML o conteúdo especificado entre parênteses. Sintaxe: document.write(mensagem) onde
mensagem pode representar uma string, que neste caso deve estar entre aspas, qualquer
expressão válida incluindo o conteúdo de variáveis e propriedades.
O MÉTODO ALERT(): na verdade pertence ao objeto window. Ele é largamente utilizado
para a criação de caixas de diálogo interativas com o usuário. Sintaxe: alert(mensagem) onde
mensagem pode representar uma string entre aspas.
O MÉTODO CONFIRM(): é uma alternativa ao método alert. Ele exibe uma caixa de
diálogo com a mensagem específica e dois botões, OK e CANCEL. Se for pressionado o botão
OK o método retorna TRUE. Dessa forma podemos usar esse método para a tomada de
decisões dentro de um script.
7.5.2 MANIPULAÇÃO E ALTERAÇÃO DO VALOR DE UMA PROPRIEDADE
Uma propriedade de um objeto pode ser vista como se fosse uma variável de memória.
Quando um objeto é criado, um conteúdo é atribuído a ela. Para alterar o conteúdo de uma
propriedade usamos um método parecido com o usado para alterar o conteúdo de uma
variável normal. Basta especificar o nome da propriedade, o sinal de igualdade e o novo
conteúdo.
Por exemplo: document.bgColor=red muda a cor de fundo do documento para vermelho.
Você pode atribuir o conteúdo de uma propriedade a uma variável: cor=document.bgcolor

HTML – Lucilia Ribeiro 38


07 – Java Script

EX17.HTML

<HTML>
<HEAD>
<TITLE>EX17 - Objetos e propriedades</TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF">
<SCRIPT language=JavaScript>
document.write("A cor dos links do documento é : "+ document.alinkColor+ "<br>")
document.write("A cor dos links visitados é : "+ document.vlinkColor+ "<br>")
document.write("A cor de fundo do documento é : "+ document.bgColor+ "<br>")
document.write("A cor de frente do documento é : "+ document.fgColor+ "<br>")
document.write("O título do documento é : "+ document.title+ "<br>")
alert("A cor de fundo do Documento será alterada")
document.bgColor="#FFFF00"
document.write("A nova cor de fundo é : "+ document.bgColor)
</SCRIPT>
<HR>
Os dados acima foram obtidos pelo Javascript
</BODY>
</HTML>
7.6 EVENTOS
Em uma linguagem baseada em objetos, uma das características principais é a
possibilidade de gerenciar eventos relacionados com um objeto. A maioria dos eventos está
relacionada com um campo de formulário, link ou o documento como um todo. Cada evento
possui um gerenciador de eventos que é responsável pelo seu acionamento.
Um gerenciador de eventos tem associado a ele uma função ou comandos JavaScript que
são executados quando ele é ativado. Por exemplo, se um usuário der um clique sobre um
botão, deve ser exibida uma caixa de diálogo avisando-o do fato. Nesse caso deve ser criada
uma função ou rotina que é executada quando o botão recebe o clique. A seguir veremos os
eventos e seus gerenciadores. Note que eles têm uma letra em caixa alta no meio da palavra.
Se você não usar a mesma notação, ocorrerá um erro:

Evento Aplica-se a Ocorre quando Manipulador


Abort Imagens O usuário interrompe o carregamento de onAbort
uma imagem pressionando o botão stop
Blur Windows e todos os elementos de É retirado o foco do elemento onBlur
formulários
Change Campos text, texareas e select É alterado o valor do elemento onChange
Click botões, radio buttons, checkboxes, botões É clicado sobre um link ou elemento de onClick
submit e reset, links formulário
DragDrop windows Usuário deposita um objeto na janela do onDragDrop
navegador
Error imagens, windows O carregamento de uma imagem ou onFocus
documento causa um erro
Focus windows e elementos de formulário O usuário coloca foco de input em uma onFocus
janela ou campo de formulário
KeyDown documentos, imagens, links, campos de É pressionada uma tecla onKeyDown
texto
KeyPress documentos, imagens, links, campos de Uma tecla é mantida pressionada onKeyPress
texto
KeyUp documentos, imagens, links, campos de Uma tecla é liberada onKeyUp
texto
Load document body Uma página é carregada no navegador onLoad
MouseDown documentos, botões, links O botão do mouse é pressionado onMouseDown
MouseMove nada O cursor é movido onMouseMove
MouseOut áreas, links O cursor é movido fora de um mapa de onMouseOut
imagem ou link
MouseOver links O mouse é movido sobre um link onMouseOver
MouseUp documentos, botões, link O botão do mouse é liberado onMouseUp
Move windows A janela é movimentada onMove
Reset formulários O botão reset de um formulário é onReset
pressionado

HTML – Lucilia Ribeiro 39


07 – Java Script

Resize windows Uma janela é redimensionada


Select text fields, textareas Um campo de formulário é selecionado onSelect
Submit formulários O botão submit é pressionado onSubmit
Unload document body A página é abandonada onUnload

7.6.1 onBlur
Esse evento ocorre quando um campo perde o foco. Por exemplo, foi digitado o conteúdo
de um campo do tipo text e depois foi pressionada a tecla Tab para avançar para outro campo,
ou ainda foi clicado outro objeto do formulário, fazendo com que o campo atual perca o foco
do programa.

EX18.HTML

<HTML>
<HEAD>
<TITLE>JsonBlur01</TITLE>
<SCRIPT language="JavaScript">
function campovital(x) {
if (x.value=="") {
alert("O campo "+ x.name +" não pode ser deixado em branco") }
}
function testanome(x) {
if (x.value.length < 5) {
alert("O campo "+ x.name +" não pode ter menos do que 5 caracteres")
}

</SCRIPT>
</HEAD>
<BODY bgcolor="#FFFFFF">
<FORM >
<BR>Código....:<INPUT type="text" name="código" value="" size=5 maxlength=5
onBlur="campovital(this)">
<BR>Nome......:<INPUT type="text" name="nome" value="" size=30 maxlength=30
onChange="testanome(this)">
<BR>Cargo......:<INPUT type="text" name="cargo" value="" size=20 maxlength=0>
<BR>Telefone..:<INPUT type="text" name="telefone" value="" size=15 maxlength=0
onBlur="campovital(this)">
<BR>Ramal......:<INPUT type="text" name="ramal" value="" size=4 maxlength=0>
</FORM>
</BODY>
</HTML>
7.6.2 onChange
O evento ocorre quando um campo do tipo select, text ou textarea perde o foco e o seu
conteúdo foi alterado. Ele é diferente do evento Blur que ocorre sempre que o campo perde o
foco independemente de ter seu conteúdo alterado.
7.6.3 onClick
Esse evento ocorre quando um objeto de um formulário do tipo button, checkbox, radio,
link, reset ou submit são clicados. Este evento é controlado pelo geranciador onClick. Ele pode
executar uma função ou um comando da linguagem JavaScript.

EX19.HTML

<HTML>
<HEAD>
<TITLE>EX19</title>
<SCRIPT language="JavaScript">
</SCRIPT>
</HEAD>

HTML – Lucilia Ribeiro 40


07 – Java Script

<BODY bgcolor="#FFFFFF">
<FORM>
<CENTER>
<INPUT type="button" value="Não aperte este botão" onclick="alert('Curiosidade mata! O
seu disco rígido está sendo formatado')">
<HR>
<H2>Prova</H2></CENTER>
1. Quem descobriu o Brazil?
<INPUT type="button" value="A" onclick="alert(' A : Volta para a escola!')"> Vasco da
Grama
<INPUT type="button" value="B" onclick="alert('B: Correto.')"> Pedro Alvares Cabral
<INPUT type="button" value="C" onclick="alert('C: Este descobriu a América')">
Cristóvão Colombo
<HR>
2. Qual é a raiz quadrada de 16 ?
<INPUT type="button" value="resposta" onclick="alert(eval(16*16)) ">
</FORM>
</BODY>
</HTML>

EX20.HTML

<HTML>
<HEAD>
<TITLE>EX20</TITLE>
<SCRIPT language="JavaScript">
</SCRIPT>
</HEAD>
<BODY bgcolor="#FFFFFF">
<CENTER>
<H2>Usando onClick para alterar propriedades </H2>
<HR>
<FORM>
<INPUT type="button" value="Vermelho" ONCLICK="document.bgColor='red'">
<INPUT type="button" value="Cyan" ONCLICK="document.bgColor='cyan'">
<INPUT type="button" value="Azul" ONCLICK="document.bgColor='blue'">
<INPUT type="button" value="Cinza" ONCLICK="document.bgColor='silver'">
<HR>
Cinza: <INPUT type="radio" name="bgcolor" ONCLICK="document.bgColor='gray' ">
Azul: <INPUT type="radio" name="bgcolor" ONCLICK="document.bgColor='blue' ">
Verde: <INPUT type="radio" name="bgcolor" ONCLICK="document.bgColor='lightgreen' ">
Cyan <INPUT type="radio" name="bgcolor" ONCLICK="document.bgColor='cyan' ">
</FORM>
</CENTER>
</BODY>
</HTML>

EX21.HTML

<HTML>
<HEAD>
<TITLE>EX21</TITLE>
<SCRIPT language="JavaScript">
function processa1() {
d= eval(document.calculo.campo1.value) + eval(document.calculo.campo2.value)+
eval(document.calculo.campo3.value)
document.calculo.campo4.value=d
}
function processa2() {
d= eval(document.calculo.campo1.value) * val(document.calculo.campo2.value) *
eval(document.calculo.campo3.value)
document.calculo.campo4.value=d

HTML – Lucilia Ribeiro 41


07 – Java Script

}
</SCRIPT>
</HEAD>
<BODY bgcolor="#FFFFFF">
<FORM name="calculo">
<H2>Usando onClick para alterar o conteúdo de outros campos</H2>
Campo1....:<input type="text" name="campo1" value="" size=10 maxlength=10 >
Campo2......:<input type="text" name="campo2" value="" size=10 maxlength=10 >
Campo3.....:<input type="text" name="campo3" value="" size=10 maxlength=10>
<HR>
<CENTER>
<INPUT type="button" value="Soma" onclick="processa1()">
<INPUT type="button" value="Multiplica" onclick="processa2()">
<HR>
Resultado...:<input type="text" name="campo4" value="" size=10 maxlength=0>
</CENTER>
</FORM>
</BODY>
</HTML>
7.6.4 onFocus
O evento foco ocorre quando um campo recebe o foco de entrada ou digitação pelo
pressionamento da tecla Tab no campo anterior, Shift+Tab do campo posterior ou pelo click do
mouse. Ele atua sobre campos do tipo select, text e textarea.

EX22.HTML

<HTML>
<HEAD>
<TITLE>EX22</TITLE>
<SCRIPT language="JavaScript">
function processa1() {
d= eval(document.calculo.campo1.value) + eval(document.calculo.campo2.value)+
eval(document.calculo.campo3.value)
document.calculo.campo4.value=d
}
</SCRIPT>
</HEAD>
<BODY bgcolor="#FFFFFF">
<FORM name="calculo" >
<H2>Usando onFocus para executar cálculos e mensagens</H2>
Campo1....:<INPUT type="text" name="campo1" value="" size=10
onBlur='if(this.value=="") {this.value=0}' >
<BR>Campo2.....:<INPUT type="text" name="campo2" value="" size=10
onBlur='if(this.value=="") {this.value=0}' >
<BR>Campo3.....:<INPUT type="text" name="campo3" value="" size=10
onBlur='if(this.value=="") {this.value=0}'>
<BR>Resultado...:<INPUT type="text" name="campo4" value="" size=10
onFocus="processa1()">
<BR>Comentário...:<INPUT type="text" name="campo5" value="" size=30
onFocus="alert('Este campo de comentário deve ser preenchido')">
</FORM>
</BODY>
</HTML>
7.6.5 onLoad
O evento ocorre quando você carrega uma página ou documento. Por exemplo, você clicou
no botão Back ou Voltar do navegador ou clicou em um hiperlink. O gerenciador onLoad é
responsável por tratar este evento. Ele pode ser especificado no comando <BODY> ou
<FRAMESET>. Este gerenciador pertence ao objeto window e não ao objeto document.
Exemplo: <BODY onLoad=rotinadeabertura()>

HTML – Lucilia Ribeiro 42


07 – Java Script

7.6.6 onUnLoad
O evento ocorre quando você abandona uma página ou documento. Por exemplo, você
clicou no botão Back ou Voltar do navegador ou clicou em um hiperlink. O gerenciador
onUnLoad é responsável por tratar este evento. Ele pode ser especificado no comando
<BODY> ou <FRAMESET>. Este gerenciador pertence ao objeto window e não ao objeto
document. Exemplo: <BODY onUnLoad=rotinadefechamento()>

EX23_1.HTML

<HTML>
<HEAD>
<TITLE>EX23_1</title>
</HEAD>
<BODY onUnload="alert('Voce ainda está na página Pag01 e vai carregar a página Pag02')">
<H1>Página 1</H1>
Essa página contém um link para outra página <BR>
<A href="ex23_2.html" >Acesse a segunda Página</A>
</BODY>
</HTML>

EX23_2.HTML

<HTML>
<HEAD>
<TITLE>EX23_2</TITLE>
</HEAD>
<BODY>
<H1>Página 2</H1>
Essa página contém dois link para outras páginas <HR>
<A href="ex23_1.html" >Acesse a primeira Página</A><BR>
<A href="ex23_3.html" >Acesse a terceira Página</A>
</BODY>
</HTML>

EX23_3.HTML

<HTML>
<HEAD>
<TITLE>EX23_3</TITLE>
</HEAD>
<BODY onLoad="alert('Você esta na página Pag03') ">
<H1>Página 3</H1>
Essa página contém um link para outra página <BR>
<A href="ex23_2.html" >Acesse a segunda Página</A>
</BODY>
</HTML>
7.6.7 onMouseOver
O evento pertence ao objeto Link. Toda vez que o cursor do mouse passa por cima de um
link o gerenciador de eventos é ativado se tiver sido especificado no comando. Como padrão,
quando passamos o cursor sobre um link, a linha de status da janela do navegador mostra o
endereço do link. O código associado ao gerenciador deve sempre conter o comando return
true para que funcione corretamente.

EX24.HTML

<HTML>
<HEAD>
<TITLE>EX24 - onMouseOver</TITLE>
<SCRIPT language="JavaScript">
</SCRIPT>

HTML – Lucilia Ribeiro 43


07 – Java Script

</HEAD>
<BODY bgcolor="#FFFFFF">
<H1 color="red"> Página 2 </H1>
Esta página contém um link para a página chamada Pag03 e outro para a página Pag01<P>
<A href="" ONMOUSEOVER ="document.bgColor='red' ">vermelho</A>
<A href="" ONMOUSEOVER ="document.bgColor='cyan' ">cyan</A>
<A href="" ONMOUSEOVER ="document.bgColor='lightgreen' "> verde</A>
<HR>
<A HREF=ex23_3.html ONMOUSEOVER ="window.status='MATERIAL IMPRÓPRIO PARA
MENORES' ; return true">Vai para a Página 03</A>
<A HREF=ex23_1.html ONMOUSEOVER = "window.status='Esta página pode conter
material impróprio para Maiores' ; return true">Vai para a página 01 </A>
</BODY>
</HTML>
7.6.8 onSubmit
O evento ocorre quando o usuário pressiona o botão submit para enviar um formulário.
Para evitar que o formulário seja enviado, deve ser acrescentado o comando RETURN FALSE
dentro do código associado ao gerenciador.

EX25.HTML

<HTML>
<HEAD>
<TITLE>EX25 - onsubmit </TITLE>
</HEAD>
<SCRIPT>
var dataOK=false
function testacampos(){
if (document.ficha.campo1.value.length == 0 |document.ficha.campo2.value.length == 0
| document.ficha.campo3.value.length == 0) {
alert("Todos os campos do formulário devem ser preenchidos")
return false
}
else {
alert("Todos os campos do formulário FORAM preenchidos")
return true
}
}
</SCRIPT>
<BODY>
<FORM NAME="ficha" onSubmit="return testacampos()">
<INPUT TYPE="text" NAME="campo1" SIZE=10>
<INPUT TYPE="text" NAME="campo2" SIZE=10>
<INPUT TYPE="text" NAME="campo3" SIZE=10>
<P><INPUT TYPE="submit" VALUE="envia" NAME="submit1">
</FORM>
</BODY>
</HTML>
7.6.9 onSelect
O evento ocorre quando um texto de um campo do tipo Text ou Texarea é selecionado. O
gerenciador onSelect é o responsável por manipular este evento.

EX26.HTML

<HTML>
<HEAD>
<TITLE>EX26</TITLE>
</HEAD>

HTML – Lucilia Ribeiro 44


07 – Java Script

<BODY bgcolor="#FFFFFF">
<FORM>
<H2>Testando alterações em um campo com onChange</H2>
<BR>Código....:<input type="text" name="código" value="" size=5 maxlength=5
onMouseOver="window.status='Digite o código do cliente' ">
<BR>Nome......:<input type="text" name="nome" value="" size=30 maxlength=30
onSelect="alert('campo com texto selecionado') ">
<BR>Cargo......:<input type="text" name="cargo" value="" size=20 maxlength=20>
</FORM>
</BODY>
</HTML>

7.6.10 onMouseDown
O evento ocorre quando o botão do mouse é pressionado. Ele está associado com button,
document e link. Este recurso funciona por enquanto, apenas no Internet Explorer.

EX27.HTML

<HTML>
<HEAD>
<TITLE>EX27 - onmousedown</TITLE>
<SCRIPT language=javascript>
function click() {
if (event.button==1) {
document.bgColor="FFFF00"
}
if (event.button==2) {
alert('Copyrighted. Essa imagem não pode ser usada sem permissão do autor')
}
}
document.onmousedown=click
</SCRIPT>
</HEAD>
<BODY>
<h1>CALVIN</h1>
<IMG src=calvin.gif>
</BODY>
</HTML>
7.7 OUTROS EXEMPLOS

EX28.HTML

<HTML>
<HEAD>
<TITLE>EX28 – Testando Javascript</TITLE>
</HEAD>
<BODY>
Que horas são???
<A href = ex29.html ONCLICK="alert(Date())">Clique Aqui</A>
</BODY>
</HTML>

EX29.HTML

<HTML>
<HEAD>
<TITLE>EX29 – Usando Condicionais</TITLE>
</HEAD>
<BODY>

HTML – Lucilia Ribeiro 45


07 – Java Script

<SCRIPT LANGUAGE="Javascript" TYPE="Text/Javascript">


if (confirm("Você que trocar o carro por uma banana?")){
alert("Você ganhou uma BANANA!!!")
}
else{
alert("Parabéns!!! Você ganhou um CARRO!!!")
}
</SCRIPT>
</BODY>
</HTML>

EX30.HTML

<HTML>
<HEAD>
<TITLE>EX30 – Método Prompt e Confirm</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="Javascript" TYPE="Text/Javascript">
/*no método prompt são passados dois parâmetros: a pergunta e a resposta padrão*/
RESP=prompt("O que você deseja, CASAR ou comprar uma BICICLETA???","BICICLETA")
if (RESP==null){
alert("Você não respondeu")
}
if (RESP=="CASAR"){
confirm("Tem Certeza????")
}
if (RESP=="BICICLETA"){
alert("PARABÉNS!!! \nVocê fez a escolha correta.")
}
document.write("Você escolheu "+RESP)
</SCRIPT>
</BODY>
</HTML>

EX31.HTML

<HTML>
<HEAD>
<TITLE>EX31 – Funções</TITLE>
<SCRIPT LANGUAGE="Javascript" TYPE="Text/Javascript">
/*Criando uma função function nomedafuncao(){*/
function Oi(texto){
alert(texto)
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="BUTTON" VALUE="MENSAGEM1" onClick="Oi('Isto é um teste')">
<INPUT TYPE="BUTTON" VALUE="MENSAGEM2" onClick="Oi('Deu certo')">
</FORM>
</BODY>
</HTML>

EX32.HTML

<HTML>
<HEAD>
<TITLE>EX32 – Janelas</TITLE>
<SCRIPT LANGUAGE="Javascript" TYPE="Text/Javascript">

HTML – Lucilia Ribeiro 46


07 – Java Script

/*Trabalhando com janelas: a variável quadro contém o objeto novajanela. Para


adicionar parâmetros podemos incluir "toolbar=yes, location=yes, scrollbars=yes,
width=n,height=n, resizable"*/
function NovaJanela(){
Quadro=window.open("susanita.gif", "nome", "width=100,height=100, resizable")
}
</SCRIPT>
</HEAD>
<BODY >
<A HREF="javascript:NovaJanela()">SURPRESA!!!</a>
</BODY>
</HTML>

EX33.HTML

<HTML>
<HEAD>
<TITLE>EX33 – Janelas onLoad</TITLE>
<SCRIPT LANGUAGE="Javascript" TYPE="Text/Javascript">
function NovaJanela(){
Quadro=window.open("ex04.html", "NOME", "width=100,height=100")
}
</SCRIPT>
</HEAD>
<BODY onLoad="javascript:NovaJanela()">
<A HREF="javascript:NovaJanela()">DE NOVO</a>
</BODY>
</HTML>

EX34.HTML

<HTML>
<HEAD>
<TITLE>EX34 – Imagens</TITLE>
</HEAD>
<BODY>
<A HREF="ex04.html" onMouseOver="document.desenho.src='susanita.gif'"
onMouseOut="document.desenho.src='mafalda.gif'" > <IMG SRC="susanita.gif" BORDER=0
HEIGHT=100 WIDTH=100 NAME="desenho"> </A>
</BODY>
</HTML>

EX35.HTML

<HTML>
<HEAD>
<TITLE>EX35 – OnClick</TITLE>
<SCRIPT language="JavaScript">
function AperteBotao() {
alert("Ai, não com tanta força!!!");
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT type="button" name="Button1" value="Aperte-me" onclick="AperteBotao()">
</FORM>
</BODY>
</HTML>

HTML – Lucilia Ribeiro 47


Folhas de Estilo
Propriedades Para Folhas De Estilos CSS
MEDIDAS: CORES:
px – pixel aqua lime silver
in – polegadas (2,54 cm) black maroon teal
cm – centímetros blue navy white
mm – milímetros fuchsia olive yellow
pt – pontos (medida tipográfica, sendo cada ponto equivalente a 1/72 de polegada). gray purple
pc – picas (pronuncia-se “páica”. Outra medida tipográfica, equivalente a 12 pontos). green red

PROPRIEDADES DE FONTE
PROPRIEDADE DESCRIÇÃO VALORES EXEMPLO
font-size Ajusta o tamanho do texto tamanho (pt, in, cm, px) porcentagem { font-size: 200% }
do tamanho normal relativo: xx-large, { font-size: x-large }
x-large, large, medium, small, x-small, { font-size: 12pt }
xx-small, larger, smaller
font-family Ajusta os tipos de face e as alternativas (em ordem de nome do tipo de face { font-family: "Trebuchet MS", "Sans-serif" }
preferência) nome da família da fonte
font-weight Ajusta o peso do tipo normal { font-weight: bold }
bold
font-style Texto em itálico normal { font-style: italic }
italic
font-variant Especifica uma variante de fonte smallcaps { font-variant: smallcaps }
PROPRIEDADES DE TEXTO
PROPRIEDADE DESCRIÇÃO VALORES EXEMPLO
text-decoration Sublinha ou então seleciona o texto none { text-decoration: underline }
underline
overline
line-through
text-align Ajusta o alinhamento de texto para a margem esquerda ou left { text-align: right }
direita, ou para o centro da página center
right
text-indent Faz a indentação da primeira linha do texto no elemento tamanho (pt, in, cm, px) { text-indent: 0.5in }
vertical-align Alinha o texto verticalmente dentro do elemento baseline { vertical-align: super }
sub
super
top
text-top
middle
bottom
text-bottom

porcentagem da altura de linha a


partir da base da linha (%)
text-transform Ajusta as regras de maiúsculas e minúsculas no texto capitalize (coloca em maiúscula a { text-transform: capitalize }
primeira letra de cada palavra)
uppercase
lowercase

48
Folhas de Estilo
letter-spacing ajusta o espaçamento entre as letras no texto normal, { letter-spacing: 2pt }
tamanho (pt, in, cm, px, em)
PROPRIEDADES DE COR e BACKGROUND
PROPRIEDADE DESCRIÇÃO VALORES EXEMPLO
color Ajusta a cor do texto nome da cor { color: blue }
Trio RGB { color: #00F }
Código hex { color: #0000FF }
Valores RGB { color: RGB 0.0 0.0 1.0 }
background Ajusta as imagens de background ou cores url(URL) (com ou sem repeat); { background: url(image1.gif) repeat }
nome da cor (ou transparent, ou dois { background: Red }
nomes de cores, que serão { background: Red / Blue }
misturadas, separados por um /); { background: transparent }
trio RGB (código hex) { background: #CCCCCC }
background-color Ajusta a cor do background nome da cor; { background-color: Red }
trio RGB (código hex) { background-color: #CCCCCC }
background-image Ajusta a imagem de background URL { background-image: url(image1.gif) }
background-repeat Ajusta a repetição do entelhamento das imagens de repeat (horizontalmente e { background-repeat: repeat-y }
background verticalmente);
repeat-x (horizontal);
repeat-y (vertical);
no-repeat
background-attachment Fixa a imagem de background ou permite que ela deslize scroll ou fixed { background: fixed }
junto com a página
background-position Ajusta a posição inicial das imagens de background Posição (x y) ou (x% y%); { background-position: 2cm 1cm }
(Observe que a posição default, 0,0 ou 0%,0%, é o canto top, center, bottom { background-position: 50% 20% }
superior esquerdo do elemento) left, center, right { background-position: top center }
{ background-position: top }
{ background-position: bottom right}
PROPRIEDADES DE CAIXA e MARGENS
PROPRIEDADE DESCRIÇÃO VALORES EXEMPLO
margin-left Ajusta a distância a partir do lado esquerdo da página tamanho (pt, in, cm, px) { margin-left: 1in }
margin-right Ajusta a distância a partir do lado direito da página tamanho (pt, in, cm, px) { margin-right: 1in }
margin-top Ajusta a distância a partir da parte de baixo do elemento tamanho (pt, in, cm, px) { margin-top: -20pt }
prévio
margin-bottom Ajusta a distância a partir da parte de cima do próximo tamanho (pt, in, cm, px) { margin-bottom: 20pt }
elemento
margin Ajusta as margens em todos os quatro lados de um tamanho (pt, in, cm, px) ou { margin: .5cm .5cm 1cm .5cm }
elemento (Se houver somente um valor, ele se aplica a porcentagem do tamanho da fonte na
todos os lados; se houver dois ou três, o valor que falta será ordem: alto, direita, baixo, esquerda
tomado do lado oposto.)
padding Ajusta o preenchimento em todos os quatro lados do tamanho (pt, in, cm, px) ou { padding: .5cm .5cm 1cm .5cm }
conteúdo de um elemento (Se houver somente um valor, ele porcentagem do tamanho da fonte na
se aplica a todos os lados; se houver dois ou três, o valor ordem: alto, direita, baixo, esquerda
que falta será tomado do lado oposto.)
padding-top Ajusta o preenchimento nos lados referentes do conteúdo de tamanho (pt, in, cm, px) ou { padding-left: 5pt }
padding-right um elemento porcentagem do tamanho da fonte
padding-bottom
padding-left

49
Folhas de Estilo

border-top-width Ajusta a largura da borda ao longo da parte designada de tamanho (pt, in, cm, px); { border-top-width: thin }
border-right-width um elemento thin, medium, thick
border-bottom-width
border-left-width

border-width Ajusta a largura da borda em cada lado de um elemento na tamanho (pt, in, cm, px); { border-width: thin thin thick thin }
ordem parte de cima, lado direito, parte de baixo, lado thin, medium, thick
esquerdo (Se houver só um valor, ele se aplica a todos os
lados; se houver dois ou três, os valores que faltam serão
tomados do lado oposto.)
border-top-color Ajusta a cor da borda relativa de um elemento nome da cor ou código hex { border-top-color: green }
border-right-color
border-bottom-color
border-left-color
border-color Ajusta a cor da borda em cada lado de um elemento na nome da cor ou código hex { border-color: green #FFFF00 #00FFFF
ordem parte de cima, lado direito, parte de baixo, lado green }
esquerdo (Se houver só um valor, ele se aplica a todos os
lados; se houver dois ou três, os valores que faltam serão
tomados do lado oposto.)
border-top-style Ajusta o estilo da borda referente de um elemento nome do estilo (none, solid, double, { border-top-style: ridge }
border-right-style groove, ridge, inset, outset)
border-bottom-style
border-left-style
border-style Ajusta o estilo da borda em todos os lados de um elemento nome do estilo (none, solid, double, { border-style: outset }
groove, ridge, inset, outset)
border-top Ajusta a largura, cor, e estilo da borda ao longo do lado de largura, cor, e estilo { border-top: thin green ridge }
border-right cima de um elemento
border-bottom
border-left
border Ajusta a largura, cor, e estilo da borda em todos os lados de largura, cor, e estilo { border: thin green ridge }
um elemento
float Faz com que o elemento flutue para um lado e outro do left, right, ou none { float: left }
texto e o envolva. (Usado nos elementos DIV e SPAN.)
clear Especifica se o elemento pode ter elementos flutuando à sua left, right, ou both { clear: left }
volta -- faz com que o elemento se posicione por baixo de
qualquer elemento que esteja flutuando no lado especificado.
PROPRIEDADES DE CLASSIFICAÇÃO
PROPRIEDADE DESCRIÇÃO VALORES EXEMPLO
display Faz com que o elemento não apareça (não será reservado none { display: none }
nenhum espaço para ele na página)
list-style-type Especifica a aparência de marcadores de item de lista (para disk; circle; square; decimal; lower- { list-style-type: square }
uso com elementos LI) roman; upper-roman; lower-alpha;
upper-alpha; none
list-style-image Especifica uma imagem para ser usada como marcador de url(URL); none { list-style-image: url(redball.jpg) }
item de lista (para uso com elementos LI)
list-style-position Especifica a posição de marcadores de item de lista (para inside; outside { list-style-position: inside }
uso com elementos LI)

50
Folhas de Estilo

list-style Especifica a posição, estilo,e URL da imagem a ser usada inside; outside { list-style: inside disk url(redball.jpg) }
como marcador de item de lista (para uso com elementos LI) disk; circle; square; decimal; lower-
roman; upper-roman; lower-alpha;
upper-alpha; none; URL
PROPRIEDADES DE POSICIONAMENTO
PROPRIEDADE DESCRIÇÃO VALORES EXEMPLO
clip Especifica a área do elemento que aparece como rect (top right left bottom) onde top { clip: rect (5pt auto auto auto) }
transparente right left bottom são definidas como
auto ou como valores de extensão (pt,
in, cm, px)
height Especifica a altura de um elemento (é mais útil para o auto ou valores de extensão (pt, in, { height: 50px }
escalonamento de imagens; a média da aparência será cm, px) ou porcentagem
mantida se a width for especificada como auto)
width Especifica a largura de um elemento (é mais útil para o auto ou valores de extensão (pt, in, { width: 50% }
escalonamento de imagens; a média da aparência será cm, px) ou porcentagem
mantida se height for especificada como auto)
left Especifica a posição esquerda de um elemento relativamente auto ou valores de extensão (pt, in, { left: 2pt }
ou absolutamente posicionado cm, px) ou porcentagem
top Especifica a posição da parte de cima de um elemento auto ou valores de extensão (pt, in, { top: -2pt }
relativamente ou absolutamente posicionado cm, px) or porcentagem
overflow Especifica o manejo da porção de um elemento Clip ((a porção inundada é oculta) ou { overflow: clip }
relativamente ou absolutamente posicionado, que se none (a porção inundada aparece) ou
derrama sobre outro elemento scroll (para revelar a porção inundada)
position Especifica se o elemento pode ser posicionado absolute (em relação ao documento); { position: relative }
relative (em relação ao elemento pai);
static (default--não posicionado)
visibility Especifica se o elemento é visível (espaço para o elemento é visible; hidden { visibility: hidden }
reservado em ambos os casos)
z-index Especifica se o elemento é mostrado acima ou abaixo de número (positivo para cima, negativo { z-index: 2 }
outros elementos com os quais faz entelhamento para baixo, começando do 1; por
default elementos sucessivos são
designados números superiores aos
elementos antecedentes)
white-space Especifica se um elemento vai ser mostrado normalmente ou normal; pre { white-space: pre }
num texto pré-formatado
OUTRAS PROPRIEDADES
PROPRIEDADE DESCRIÇÃO VALORES EXEMPLO
@import Importa outra folha de estilo para dentro da atual; deve @import: url(url) @import url(stylesheet2.css)
aparecer antes que qualquer estilo seja definido; novas
propriedades e valores irão sobrepujar-se às da folha de
estilo importada
cursor especifica a aparência do cursor quando colocado dentro do auto (default definido pelo { cursor: help }
elemento browser/sistema operacional);
crosshair; default; hand; move; e-
resize; ne-resize; nw-resize; n-resize;
se-resize; sw-resize; s-resize; w-
resize; text; wait; help
A:link|A:visited |A:active Classes pré-definidas para a tag <a> Nome da cor ou código hex a.link { color: #FF0000 }

51
Tabela de Referência HTML

Tabela de Referência HTML


TAGS DESCRIÇÃO
!-- Insere comentários Ex.: <!-- texto aqui -->
<A> Cria links e ancoras
Accesskey Adiciona tecla de atalho para o link
Event Aciona um SCRIPT
Href Especifica uma URL ou nome da ancora para onde o link irá
Name Especifica uma área especifica da página para onde o link pulará
Tabindex Define a ordem na qual a tecla Tab levará o visitante através dos links
e dos elementos dos formulários.
Ex.: <A Href=”xx.html” Tabindex=2> xx </A>
Target Especifica uma janela ou moldura particular para o link
<AREA> Especifica as coordenadas de um mapa de imagem
Accesskey Adiciona uma tecla de atalho para uma região particular do mapa
Coords Especifica as coordenadas de uma área
Href Especifica a URL do link
Nohref Um link não tem efeito
Shape Especifica o formato da área (rect, circle, poly)
Target Especifica a janela ou moldura onde o link será mostrado
<B> Negrito
<BASEFONT> Especifica uma fonte padrão para toda a página
Color Especifica a cor
Face Especifica o tipo
Size Especifica o tamanho
<BGSOUND> Insere som de fundo
Loop Especifica quantas vezes o som será tocado (n, -1 ou infinite)
Src Especifica a URL do som
<BIG> Formata um texto maior que o texto ao redor
<BLOCKQUOTE> Formata um bloco de texto na página
<BODY> Determina seção de corpo da página
Alink, Link, Vlink Especifica a cor dos links ativos, dos novos links, e dos links visitados.
Background Especifica imagem de fundo
Bgcolor Especifica cor de fundo
Leftmargin Especifica margem da esquerda
Topmargin Especifica margem do topo
Text Especifica cor do texto
<BR> Cria quebra de linha
Clear Para o envolvimento do texto
<BUTTON> Cria botões
Accesskey Adiciona teclas de atalho para o botão
Event Associa um botão com um SCRIPT
Name Identifica um botão
Value Especifica o tipo de botão a construir
<CENTER> Centraliza texto, imagens e outros elementos.
<DIV> Divide a página em seções lógicas
Align Especifica o alinhamento da coluna (left, right, center)
Class Dá um nome a cada classe de divisão
Id Dá um nome único a uma divisão particular
<EMBED> Adiciona multimídia à página
Align Alinha controles (left, right, center)
Autostart Inicializa multimídia automaticamente (true, false)
Controls Mostra play, pause e rewind botões (console, smallconsole, playbutton,
pausebutton, stopbutton, volumelever)
Loop Especifica se a multimídia deve ocorrer mais de uma vez (true para
tocar até que o usuário clique em stop)
Src Especifica a URL do arquivo multimídia

52
Tabela de Referência HTML

Width, height Especifica o tamanho dos controles


<FIELDSET> Agrupa um conjunto de elementos de um formulário
<FONT> Formata fontes
Color Especifica cor
Face Especifica tipo
Size Especifica tamanho
<FORM> Cria formulários
Action Especifica a URL ou o SCRIPT CGI para o formulário
Method Especifica como o formulário será processado (post, get)
<FRAME> Cria molduras
Border Especifica a grossura da borda da moldura
Bordercolor Especifica a cor das bordas da moldura
Frameborder Mostra ou esconde as bordas da moldura
Framespacing Adiciona espaço entre as molduras
Name Nomeia as molduras para que possam ser usadas como atributo de
Target
Noresize Impede que o usuário redimensione a moldura
Marginwidth, Especifica as margens superior, inferior, direita e esquerda da moldura
Marginheight
Scrolling Mostra ou esconde as barras de rolamento da moldura (yes, no, auto)
Src Especifica a URL inicial a ser mostrada na moldura
Target Especifica qual a moldura em que um link deve ser aberto
<FRAMESET> Define moldura
Border Especifica a grossura da borda da moldura
Bordercolor Especifica a cor das bordas da moldura
Cols Determina o numero e o tamanho das molduras
Frameborder Mostra ou esconde as bordas da moldura
Framespacing Adiciona espaço entre as molduras
Rows Determina o numero e o tamanho das molduras
<HN> Cria cabeçalhos
Align Alinha cabeçalhos (left, right, center)
<HEAD> Cria seção de cabeçalho
<HR> Cria linhas horizontais
Align Alinha as linhas horizontais (left, right, center)
Noshade Mostra as linhas sem sombra
Size Especifica altura
Width Especifica comprimento
<HTML> Identifica o documento como documento HTML
<I> Itálico
<IFRAME> Cria molduras flutuantes
Align Especifica alinhamento da moldura (left, right, center)
Frameborder Mostra ou esconde as bordas
Name Especifica um nome para a moldura para ser usado em um TARGET
Width, height Especifica o tamanho da moldura
Scrolling Mostra ou esconde as barras de rolamento (yes, no, auto)
Src Especifica a URL da página inicial
<IMG> Insere imagem
Align Alinha imagem e escreve texto ao redor (left, right, center)
Alt Oferece texto alternativo caso a imagem não carregue
Border Especifica a grossura da borda
Controls Mostra ou esconde controle de vídeo
Dynsrc Especifica URL do arquivo de vídeo
Hspace,vspace Especifica espaço acima, abaixo e ao lado da imagem.
Loop Especifica numero de repetição do arquivo de vídeo (n, -1 ou infinite)
Lowsrc Especifica URL de uma versão de baixa resolução da imagem
Src Especifica URL da imagem
Start Determina quando o vídeo deve começar (FILEOPEN, MOUSEOVER)

53
Tabela de Referência HTML

Usemap Especifica a imagem que deve ser usada como referencia em um mapa
Width,height Especifica o tamanho da imagem
<INPUT> Cria elementos de um formulário
Accesskey Adiciona tecla de atalho para o elemento
Checked Marca um “radio button” ou “checkbox” como padrão
Disabled Desabilita elementos do formulário
Event Para acionar um SCRIPT com um determinado evento
Maxlength Especifica o numero máximo de caracteres que pode ser entrado
Name Determina o nome do elemento para poder ser usado depois
Size Especifica o comprimento do texto ou senha
Src Especifica URL de uma imagem
Readonly Impede que usuários alterem seu conteúdo
Taborder Especifica em que ordem TAB irá percorrer os elementos
Type Especifica o tipo (text, password, radio, checkbox)
Value Especifica o valor inicial
<LEGEND> Nomeia “Fieldsets”
<LI> Cria item de uma lista
Type Determina o tipo do símbolo marcador (A- letras maiúsculas, a – letras
minúsculas, I – números romanos, i – números romanos minúsculos, 1
– números, disc, circle, square)
Value Determina o valor inicial do primeiro item
<LINK> Liga a uma css externa
<MAP> Cria um mapa de imagem
Name Atribui um nome ao mapa para que este possa ser referenciado depois.
<MARQUEE> Cria um texto em movimento
Behavior Controla como o texto deve mover (scroll, slide, alternate)
Direction Esquerda – Direita ou Direita – Esquerda
Loop Quantas vezes a ação irá se repetir
Scorllamount Espaço entre cada repetição
Scrolldelay Tempo entre cada repetição
<META>
http-equiv Redireciona a página
Name Adiciona informações extras sobre a página
<NOBR> Mantém elementos na mesma linha independente do tamanho da
janela.
<NOFRAMES> Oferece uma alternativa para molduras
<NOSCRIPT> Oferece uma alternativa para SCRIPTS
<OL> Cria uma lista ordenada
Type Especifica o símbolo com o qual cada item irá começar (A- letras
maiúsculas, a – letras minúsculas, I – números romanos, i – números
romanos minúsculos, 1 – números)
Start Especifica o valor inicial da lista
<OPTION> Cria opções individuais em um formulário
Selected Seleciona a opção como padrão de um formulário em branco
Value Especifica um valor inicial
<P> Cria um novo parágrafo
Align Especifica o alinhamento (left, right, center)
<S> Tachado
<SCRIPT> Adiciona SCRIPTS automáticos na página
Charset Especifica o conjunto de caracteres no qual o SCRIPT externo está
sendo escrito
Language Define a linguagem na qual o SCRIPT está sendo escrito
Src Referencia um SCRIPT externo
Type Define a linguagem na qual o SCRIPT está sendo escrito
<SELECT> Cria menus no formulário
Name Dá nome ao elemento
Multiple Permite que o usuário escolha mais de uma opção

54
Tabela de Referência HTML

Size Especifica o numero de itens inicialmente visíveis


<SMALL> Diminui o tamanho de um texto
<SPAN> Cria estilo
Class Nomeia estilos
Id Nomeia estilos
<STRIKE> Tachado
<STYLE> Adiciona informações a uma folha de estilo
<SUB> Subscrito
<SUP> Sobrescrito
<TABLE> Cria tabela
Bgcolor Especifica a cor de fundo da tabela
Border Especifica a grossura da borda da tabela
Bordercolor Especifica a cor da borda
Bordercolordark Especifica cor da borda (mais escura, sombreada)
Bordercolorlight Especifica cor da borda (mais clara, marcada)
Cellpadding Especifica o espaço entre o conteúdo da célula e a borda
Cellspacing Especifica o espaço entre células
Frame Mostra bordas externas
Height Especifica altura da tabela
Rules Mostra bordas internas
Width Especifica o comprimento da tabela
<TBODY> Identifica o corpo de uma tabela
<TD><TH> Cria células em uma tabela (normal, de cabeçalho)
Align, Valign Especifica o alinhamento do conteúdo da célula (right, left, center, top,
bottom, middle)
Bgcolor Especifica cor de fundo da célula
Colspan Aumenta a célula em relação à coluna
Nowrap Mantém o conteúdo da célula em uma linha
Rowspan Aumenta a célula em relação à linha
Width, Height Especifica o tamanho da célula
<TEXTAREA> Cria um bloco de texto em um formulário
Accesskey Adiciona uma tecla de atalho para a área de texto
Name Identifica o conteúdo para ser usado posteriormente
Rows, Cols Especifica o numero de linhas e colunas para a área de texto
<TITLE> Cria o titulo na barra de títulos
<TR> Cria linhas em uma tabela
Align, Valign Especifica o alinhamento do conteúdo da linha (right, left, center, top,
bottom, middle)
Bgcolor Especifica a cor de fundo de uma linha
<U> Sublinhado
<UL> Cria lista desordenada
Type Especifica o tipo do símbolo do marcador (disc, circle, square)
<WBR> Controla onde uma linha será quebrada caso seja necessário, usada
com <NOBR> xxxx <WBR> yyy </NOBR>

55