Вы находитесь на странице: 1из 52

0isponibilizada pelo professor Penan Venna 8arreto - T C0J8 e Cedida por Aleckssandro Tavares 200J

2
APDSTILA 0E HThL

A Ap po os st ti iI Ia a

H
H
T
T
h
h
L
L
>
>

A Ap pr re en nd de en nd do o a a C Cr ri ia ar r P P g gi in na as s p pa ar ra a W We eb b








0isponibilizada pelo professor Penan Venna 8arreto - T C0J8 e Cedida por Aleckssandro Tavares 200J
J
ApostiIa de HThL
S
S
o
o
b
b
r
r
e
e
a
a
A
A
p
p
o
o
s
s
t
t
i
i
I
I
a
a






Esta apostila foi desenvolvida para o ensino da criao de pginas web. Como a HTVL a linguagem bsica
de criao de pginas, esta apostila enfoca o ensino da HTVL.

Hoje em dia, h uma grande variedade de editores que facilitam a criao de pginas e que no exigem do
usurio um grande conhecimento de HTVL. No entanto, esta apostila no usar nenhum destes editores,
pois o objetivo que a pessoa aprenda a criar pginas codificando os comandos HTVL, usando para isso
at mesmo um editor como o 8loco de Notas.

Esta apostila foi planejada para servir como um material de estudo para autoditadas, como tambm para
ministrar cursos em empresas ou escolas e at mesmo como um guia de referncia para desenvolvedores
que j conhecem a HTVL.

PbIico AIvo

- Qualquer pessoa que deseja aprender HTVL;
- 0esenvolvedores que j trabalham com HTVL;
- Professores ou instrutores que desejem usar esta apostila como material didtico.

Pr-requisitos

No necessrio ter conhecimento prvio de HTVL, mas importante conhecer o 8rowser (navegador) e
um editor de texto de sua preferncia, como por exemplo, o 8loco de Notas.

NveI

Esta apostila aborda topicos que vo do nivel 8ASC0 ao NTEPVE0AP0.











0isponibilizada pelo professor Penan Venna 8arreto - T C0J8 e Cedida por Aleckssandro Tavares 200J
4
ApostiIa de HThL
I
I
n
n
t
t
r
r
o
o
d
d
u
u

o
o





Esta apostila foi criada para ser um recurso de aprendizado e consulta linguagem HTVL, para qualquer
usurio de informtica que deseja criar pginas para a internet.

Para facilitar o estudo e pesquisa de informao, ela foi dividida em topicos, os quais foram apresentados
em forma de capitulos. 0s capitulos foram estruturados da seguinte forma:


1. Conhecendo a HThL: 0s conceitos bsicos e estrutura da linguagem HTVL so apresentados neste
capitulo.
2. Formatao de Textos: Aqui explicada a formatao de textos atravs de comandos (tags) html
especificos para esse fim. Algumas das formataes possiveis so: negrito, sublinhado, itlico,
tipo, tamanho e cor da fonte, listas, entre outras.
J. Links: A funcionalidade mais importante na HTVL a possibilidade de criar elos (links) entre
documentos e neste capitulo mostrado como usar este grande recurso.
4. Imagens: 0 objetivo deste capitulo ensinar como usar imagens nos documentos HTVL. visto os
tipos de imagens mais usadas, os formatos CF e JPEC, e um pouco de imagens mapeadas. Como
criar imagens com boa qualidade para documentos HTVL um assunto extenso e por isso no ser
abordado.
5. TabeIas: Um grande recurso para se produzir documentos com uma boa diagramao e
apresentao o uso de tabelas. Este um dos principais capitulos e justamente aqui que est a
transio entre o nivel bsico e o nivel intermedirio na HTVL.

6. FormuIrios: Pecurso poderoso da HTVL que permite gerar interao entre o usurio e o
documento. 0epois que este recurso foi criado a HTVL se difundiu e a internet passou a ser usada
tambm para fins comerciais. Neste capitulo, este recurso ser ensinado e exemplificado.
7. Frames: Este recurso permite exibir mais de um documento por tela. Para isso, a tela dividida
em partes chamadas frames. Este recurso apresentado em detalhes neste capitulo.
8. Dutros Comandos: Neste capitulo so apresentados outros comandos interessantes da HTVL, como
exibir udio e video, atualizao automtica de documento, etc.
9. Caracteres Especiais: Uma tabela de codigos de caracteres para serem usados em documentos
HTVL.
10. TabeIa de Cores: Tabela com o codigo e nome de cores para usar nos documentos HTVL.
11. Peferncias: Fontes de informao e pesquisa utilizadas para apoio ao desenvolvimento desta
apostila.




0isponibilizada pelo professor Penan Venna 8arreto - T C0J8 e Cedida por Aleckssandro Tavares 200J
5
ApostiIa de HThL
S
S
u
u
m
m

r
r
i
i
o
o

1. CDNHECEN0D A HThL.............................................................................................................. 6
1.1. C0VAN00S HTVL................................................................................................................ 6
1.2. ESTPUTUPA 8ASCA 0E UV 00CUVENT0..................................................................................... 7
2. FDPhATAD 0E TEXTDS ......................................................................................................... 8
2.1. TTUL0S E SU8TTUL0S ......................................................................................................... 8
2.2. PAPACPAF0S E QUE8PA 0E LNHA............................................................................................. 8
2.J. ESTL0S 0E TEXT0.............................................................................................................. 11
2.4. 0EFNN00 F0NTES............................................................................................................. 11
2.5. LNHAS H0PZ0NTAS E ALNHAVENT0 0E ELEVENT0S .................................................................... 12
2.6. LSTAS ........................................................................................................................... 15
2..1. LlSTAS NO OR0ENA0AS................................................................................................. 15
2..2. LlSTAS OR0ENA0AS....................................................................................................... 1
2..J. LlSTAS 0ESCRlTl\AS ...................................................................................................... 1Z
3. LINKS .................................................................................................................................20
J.1. LNKS PAPA APQU70S L0CAS ................................................................................................ 20
J.2. LNKS PAPA APQU70S EV 0UTP0S 0PET0P0S ............................................................................ 21
J.J. LNKS PAPA APQU70S 0E 0UTP0S SEP700PES ............................................................................ 2J
J.4. LNKS PAPA EVAL ............................................................................................................. 2J
J.5. LNKS PAPA A VESVA PACNA - ANC0PA ..................................................................................... 2J
4. IhACENS .............................................................................................................................26
4.1. VACENS C0V0 LNK........................................................................................................ 27
4.2. VACENS C0V0 PA0PA0 0E FUN00....................................................................................... 28
4.J. VACENS TPANSPAPENTES ................................................................................................. 28
4.4. VACENS VAPEA0AS ........................................................................................................ 28
4.5. VACENS ANVA0AS......................................................................................................... 29
5. TAELAS .............................................................................................................................31
5.1. TA8ELA SVPLES............................................................................................................. J1
5.2. V00FCAN00 A APAPNCA 0A TA8ELA ATP8UT0S .................................................................. J2
5.J. ATP8UT0S 0E LNHAS E CLULAS......................................................................................... JJ
5.4. VESCLAN00 CLULAS ...................................................................................................... J5
6. FDPhULAPIDS.......................................................................................................................37
6.1. CPAN00 UV F0PVULAP0................................................................................................. J7
6.2. TACS 0E F0PVULAP0...................................................................................................... J8
7. FPAhES...............................................................................................................................43
7.1. CPAN00 FPAVES ........................................................................................................... 4J
7.2. LNKS C0V FPAVES ......................................................................................................... 46
8. DUTPDS CDhAN0DS ...............................................................................................................48
8.1. PEFPESH PACE .............................................................................................................. 48
8.2. AU00 E 70E0 .............................................................................................................. 48
8.J. TEXT0 P0LANTE ............................................................................................................ 49
. CAPACTEPES ESPECIAIS ...........................................................................................................51
10. TAELA 0E CDPES ................................................................................................................52
11. PEFEPNCIAS ......................................................................................................................53





0isponibilizada pelo professor Penan Venna 8arreto - T C0J8 e Cedida por Aleckssandro Tavares 200J
6
ApostiIa de HThL
1
1
.
.
C
C
D
D
N
N
H
H
E
E
C
C
E
E
N
N
0
0
D
D
A
A
H
H
T
T
h
h
L
L


HTVL significa HyperText harkup Language e a linguagem de descrio de documentos usada na Web.
Sua principal caracteristica est definida em seu nome. A Html atravs de tags, posiciona e coloca hiper
texto no documento.
Por sua vez, o hipertexto a base da informao que, alm da funo comum de texto, permite ligaes
(links) para outros locais de um documento e tambm para documentos remotos (pginas, figuras, frames
e tudo mais que um navegador pode ler ou suportar).
Periodicamente a Html ganha uma nova verso com mais recursos. Quem cria as novidades desta
linguagem so as pessoas e empresas envolvidas, principalmente os desenvolvedores de softwares para
navegao (Netscape, Vicrosoft, etc).
Todo este processo sofre a colaborao e a administrao do W3C - World Wde Web Consortum.

1 1. .1 1. . C CD Dh hA AN N0 0D DS S H HT Th hL L
0s comandos HThL so representados no texto atravs de rtuIos (ou tcys). 0 visualizador (8rowser)
interpreta como rotulos todos os elementos HTVL vcldos que estejam entre os sinais "menor que" () e
"maior que" (>).
A maioria das TACs HTVL possuem um rtuIo iniciaI e um rtuIo finaI, envolvendo o texto que marcado
por eles. A sintaxe bsica
TAC> Texto marcado pela Tag lTAC>
0bserve que o rtuIo de fechamento tem o mesmo nome que o rtuIo iniciaI, mas precedido por uma
barra (/). Algumas TACs podem ter um ou mais atributos, que definem alguma caracteristica especial.
0s atributos, quando presentes, aparecem no rotulo inicial separados por espaos, logo apos o nome da
TAC.
Exemplos de tags HTVL com atributos:
0efine uma imagem de fundo para a pgina:
o body background="fundo.gif">... corpo do documento ...lbody>
0efine uma borda para a tabela:
o tabIe border> ... contedo e rtulos de tabela ... ltabIe>
0efine uma linha horizontal sem sombra, com largura de 50 da pgina, 10 pixels de espessura e
alinhada pela esquerda:
o hr noshadow width=50X size=10 aIign=Ieft>





0isponibilizada pelo professor Penan Venna 8arreto - T C0J8 e Cedida por Aleckssandro Tavares 200J
7
ApostiIa de HThL
1 1. .2 2. . E ES ST TP PU UT TU UP PA A A AS SI IC CA A 0 0E E U Uh h 0 0D DC CU Uh hE EN NT TD D
A estrutura bsica de um documento HTVL a seguinte:
<HTML>
<HEAD>
<TITLE> Ttulo do documento </TITLE>
</HEAD>
<BODY>
Corpo da pgina.
</BODY>
</HTML>

7amos as explicaes de cada um desses comandos:
HTML>...lHTML> : ndicam o inicio e o fim do documento, todo o resto deve estar entre esses
dois comandos.
HEA0> lHEA0> : 0elimitam a seo de cabealho do documento e nelas esto contidas as
informaes de configurao da pgina.
TlTLE> lTlTLE> : ndicam o titulo do documento, que ser apresentado na barra superior do
8rowser. Estes comandos devem estar sempre entre o comando acima.
00Y>...l00Y> : ndicam o corpo do documento. Entre esses comandos estar a sua pgina
em si. 0 texto, imagens e tudo que ser apresentado pelo browser.

Atravs de atributos de 800Y, podemos definir cores para os textos, links e para o fundo da pgina,
bem como uma imagem de fundo (marca d'gua).
Sintaxe:
800Y CCDLDP=#rrggbb TEXT=#rrggbb LINK=#rrggbb ALINK=#rrggbb VLINK=#rrggbb
ACKCPDUN0=UPL hAPCINHEICHT="0" hAPCINWI0TH="0" LEFThAPCIN="0" TDPhAPCIN="0"
Dnde:
CCDLDP - cor de fundo (padro: cinza ou branco)
TEXT - cor dos textos da pgina (padro: preto)
LINK - a cor dos links (padro: azul)
ALINK - cor dos links, quando acionados (padro: vermelho)
VLINK - cor dos links, depois de visitados (padro: azul escuro ou roxo)
ACKCPDUN0 indica o UPL da imagem a ser replicada no fundo da pgina, como uma marca
d'gua.
LEFThAPCIN - margem esquerda da pgina(VS nternet Explorer).
TDPhAPCIN - margem superior da pgina(VS nternet Explorer).
hAPCINHEICHT - margem superior(Netscape).
hAPCINWI0TH - margem esquerda(Netscape).






0isponibilizada pelo professor Penan Venna 8arreto - T C0J8 e Cedida por Aleckssandro Tavares 200J
8
ApostiIa de HThL
2
2
.
.
F
F
D
D
P
P
h
h
A
A
T
T
A
A

D
D
0
0
E
E
T
T
E
E
X
X
T
T
D
D
S
S


2 2. .1 1. . T T T TU UL LD DS S E E S SU U T T T TU UL LD DS S
Para demarcar titulos e subtitulos, use os TACs de HEA0EP (H1 a H6).
ExempIo: TituIos.htm
<HTML>
<HEAD>
<TITLE>Curso de HTML - Ttulos</TITLE>
</HEAD>
<BODY>
<H1>Ttulo com H1</H1>
<H2>Ttulo com H2</H2>
<H3>Ttulo com H3</H3>
<H4>Ttulo com H4</H4>
<H5>Ttulo com H5</H5>
<H6>Ttulo com H6</H6>
</BODY>
</HTML>

Como fica no rowser:


2 2. .2 2. . P PA AP P C CP PA AF FD DS S E E U UE E P PA A 0 0E E L LI IN NH HA A
Uma pgina HTVL usa comandos especiais para definir a quebra de um pargrafo ou de uma linha.
7ejamos alguns:





0isponibilizada pelo professor Penan Venna 8arreto - T C0J8 e Cedida por Aleckssandro Tavares 200J
9
ApostiIa de HThL
TAC P>
responsvel pela quebra de pargrafos, inserindo automaticamente uma linha em branco. 0 uso da tag
/P opcional. Tambm possivel alinhar os pargrafos atravs desta tag.

Sintaxe:

P ALICN="posio">Texto do pargrafolP>

Dnde:
posio pode ser:
o Ieft: alinhamento esquerda;
o center: centralizado;
o right: alinhamento direita.
o justify: justificado.

ExempIo: Paragrafos.htm

<HTML>
<HEAD>
<TITLE>Curso de HTML - Pargrafos</TITLE>
</HEAD>
<BODY>
<P>Este pargrafo utiliza a TAG P e alinhamento padro (esquerdo)
<P ALIGN="Right">Este pargrafo utiliza a TAG P e alinhamento direita
<P ALIGN="Center">Este pargrafo utiliza a TAG P e alinhamento centralizado
<P ALIGN="Justify">Este pargrafo utiliza a TAG P e alinhamento justificado.
Para ver o resultado digite um texto grande o suficiente.
Este pargrafo utiliza a TAG P e alinhamento justificado.
Este pargrafo utiliza a TAG P e alinhamento justificado.
Este pargrafo utiliza a TAG P e alinhamento justificado.
</BODY>
</HTML>

Como fica no rowser:






0isponibilizada pelo professor Penan Venna 8arreto - T C0J8 e Cedida por Aleckssandro Tavares 200J
10
ApostiIa de HThL
TAC P>
responsvel pela quebra de linha. Ela finaliza a linha atual e passa para a proxima. Esta TAC no
necessita da TAC /8P.

Sintaxe:

Texto da linhaP>

ExempIo: uebra_de_Linha.htm

<HTML>
<HEAD>
<TITLE>Curso de HTML Quebra de Linha</TITLE>
</HEAD>
<BODY>
Este texto est usando a TAG BR no final de cada linha.<BR><BR>
Voc pode utilizar<BR> a TAG BR<BR> toda vez<BR> que quiser passar o
texto<BR> para a prxima linha.<BR><BR>
O resultado simples.
</BODY>
</HTML>

Como fica no rowser:



TAC PPE>
Permite que se insira em uma pgina um pargrafo prformatado, isto , conforme foi digitado no editor.

Sintaxe:

PPE>Texto do pargrafolPPE>
ExempIo: Paragrafos2.htm

<HTML>
<HEAD>
<TITLE>Curso de HTML - Pargrafos</TITLE>




0isponibilizada pelo professor Penan Venna 8arreto - T C0J8 e Cedida por Aleckssandro Tavares 200J
11
ApostiIa de HThL
</HEAD>
<BODY>
<PRE>
Este pargrafo esta utilizando a TAG PRE,
foi definido no editor de uma forma especial,
no final de cada linha, foi pressionada a tecla enter,
para o texto continuar na linha seguinte.
</PRE>
</BODY>
</HTML>

Como fica no rowser:


2 2. .3 3. . E ES ST TI IL LD DS S 0 0E E T TE EX XT TD D
Como em editores de texto, o HTVL tambm permite alterar o estilo do texto. 7ejamos alguns estilos:

>...l> Aplica o estilo negrito.
I>...lI> Aplica o estilo tclco.
U>...lU> Aplica o estilo sublinhado (nem todos os browser o reconhecem).
SUP>...lSUP> Faz com que o texto fique
sobrescrito
.
SU>...lSU> Faz com que o texto fique
subscrito
.
IC>...lIC> Aumenta a fonte e atribui negrito
ShALL>...lShALL> Peduz e altera a fonte
TT>...lTT> Aplica um espaamento regular ao texto.


2 2. .4 4. . 0 0E EF FI IN NI IN N0 0D D F FD DN NT TE ES S

TAC FDNT>
Permite alterar o tipo de fonte, o tamanho e a cor.

Sintaxe:

FDNT SIZE="n" FACE="nome" CDLDP="cor">TextolFDNT>

Dnde:
n: o n varia de 1 a 7 e o valor J corresponde ao valor padro;
nome: o nome da fonte a ser utilizada;




0isponibilizada pelo professor Penan Venna 8arreto - T C0J8 e Cedida por Aleckssandro Tavares 200J
12
ApostiIa de HThL
cor: a cor da fonte, definida em hexadecimal, ou atravs de um nome predefinido de
cores.

ExempIo: Fontes.htm

<HTML>
<HEAD>
<TITLE>Curso de HTML - Fontes</TITLE>
</HEAD>
<BODY>
<FONT SIZE="7" FACE="Times New Roman" COLOR="#FF0000">
Fonte Times New Roman com tamanho 7 e cor Vermelha.</FONT><BR>
<FONT SIZE="6" FACE="Arial" COLOR="#BC8F8F">
Fonte Arial com tamanho 6 e cor Pink.</FONT><BR>
<FONT SIZE="5" FACE="Tahoma" COLOR="Blue">
Fonte Tahoma com tamanho 5 e cor Azul.</FONT><BR>
<FONT SIZE="4" FACE="Verdana" COLOR="Gold">
Fonte Verdana com tamanho 4 e cor Gold</FONT><BR>
<FONT SIZE="3" FACE="Helvetica" COLOR="DarkGreen">
Fonte Helvetica com tamanho 3 e cor Verde Escuro</FONT><BR>
<FONT SIZE="2" FACE="Courier New" COLOR="Gray">
Fonte Courier New com tamanho 2 e cor Cinza</FONT><BR>
<FONT SIZE="1" FACE="Impact" COLOR="#000000">
Fonte Impact com tamanho 1 e cor Preta</FONT><BR>
</BODY>
</HTML>

Como fica no rowser:

2 2. .5 5. . L LI IN NH HA AS S H HD DP PI IZ ZD DN NT TA AI IS S E E A AL LI IN NH HA Ah hE EN NT TD D 0 0E E E EL LE Eh hE EN NT TD DS S

TAC 0IV>
Ela permite o alinhamento horizontal de qualquer elemento em uma pgina. Esta TAC muito utilizada
em 0HTVL pela propriedade de agrupar elementos de pgina.




0isponibilizada pelo professor Penan Venna 8arreto - T C0J8 e Cedida por Aleckssandro Tavares 200J
1J
ApostiIa de HThL

Sintaxe:

0IV ALICN="posio">Elementos a serem alinhadosl0IV>

Dnde:
posio pode ser:
o Ieft: alinhamento esquerda;
o center: centralizado;
o right: alinhamento direita.
o justify: justificado. Somente para textos.

ExempIo: AIinhamento_div.htm

<HTML>
<HEAD>
<TITLE>Curso de HTML - Alinhamento</TITLE>
</HEAD>
<BODY>
<DIV ALIGN="Center">Usando a TAG DIV:</DIV>
<BR>
<DIV ALIGN="Right">
<P>Usando a TAG DIV voc pode alinhar seu texto sem problemas.
<P>Pode utilizar o alinhamento direita, que alinha seu texto na margem
direita
da tela. Como um texto criado em editor de textos para ser impresso em uma
pgina.
<P>Com a TAG DIV voc pode aproveitar o mesmo alinhamento para vrios
pargrafos.
</DIV>
</BODY>
</HTML>

Como fica no rowser:

TAC CENTEP>
Ela permite a centralizao horizontal de qualquer elemento em uma pgina. Tem o mesmo efeito que a
TAC 07 ALCN="Center".




0isponibilizada pelo professor Penan Venna 8arreto - T C0J8 e Cedida por Aleckssandro Tavares 200J
14
ApostiIa de HThL

Sintaxe:

CENTEP>Elementos a serem centralizadoslCENTEP>


ExempIo: AIinhamento_center.htm

<HTML>
<HEAD>
<TITLE>Curso de HTML - Alinhamento</TITLE>
</HEAD>
<BODY>
<CENTER>
<FONT FACE="Arial" COLOR="Blue"><H4>Aqui esta sendo utilizado a TAG
CENTER</H4></FONT>
</CENTER>
Neste pargrafo no esta sendo utilizado a tag center, veja como o
texto fica alinhado esquerda quando nenhum tipo de alinhamento especificado.
</BODY>
</HTML>

Como fica no rowser:


TAC HP>
nsere uma linha horizontal no 8rowser.

Sintaxe:

HP WI0TH="nX" ALICN="posio" SIZE="n" NDSHA0E CDLDP="#PPCC">

Dnde:
ALICN="posio": pode ser left, center e rigth;
WI0TH="nX": define a largura da linha, pode ser definida em pixels ou em percentagem do
tamanho horizontal da tela;
SIZE="n": define a espessura da barra, em pixels;
NDSHA0E: define que a barra no deve ser com efeito J0;
CDLDP="#PPCC": define a cor da barra. (VS nternet Explorer).





0isponibilizada pelo professor Penan Venna 8arreto - T C0J8 e Cedida por Aleckssandro Tavares 200J
15
ApostiIa de HThL
ExempIo: Linhas.htm

<HTML>
<HEAD>
<TITLE>Curso de HTML - Linhas Horizontais</TITLE>
</HEAD>
<BODY>
Espessura 5<HR SIZE="05">
<BR>
Largura 80% da pgina:<HR SIZE="05" WIDTH="80%">
<BR>
Alinhamento direita:<HR SIZE="05" ALIGN="Right" WIDTH="30%">
<BR>
Linha sem nenhum atributo:<HR>
Linha com COR Vermelha:<HR NOSHADE COLOR="Red">
</BODY>
</HTML>

Como fica no rowser:



2 2. .6 6. . L LI IS ST TA AS S
Utilizar listas uma boa forma de organizar as pginas Web. As listas podem servir como resumos ou
indices de todo o site, contendo links para outras pginas.

8asicamente existem trs tipos de listas:
Listas No 0rdenadas;
Listas 0rdenadas ou Numeradas;
Listas 0escritivas.

2 2. .6 6. .1 1. . L LI IS ST TA AS S N N D D D DP P0 0E EN NA A0 0A AS S

TAC UL>




0isponibilizada pelo professor Penan Venna 8arreto - T C0J8 e Cedida por Aleckssandro Tavares 200J
16
ApostiIa de HThL
Permite inserir na pgina um texto de topicos com marcadores de tipos diferentes.

Sintaxe:

UL TYPE="formato">
LI>Topico 1lLI>
LI>Topico 2lLI>
lUL>

Dnde:
UL>: nicio da Lista No 0rdenada.
TYPE="formato": ndica o formato do marcador. Pode ser:
o disc: 0 marcador um ponto. Este o padro;
o square: 0 marcador um quadrado;
o circIe: 0 marcador um circulo.
LI>: Topicos da lista. No h limites e no necessrio a TAC /L.
lUL>: Fim da Lista No 0rdenada.

ExempIo: Listas_n_ordenada.htm

<HTML>
<HEAD>
<TITLE>Curso de HTML - Listas</TITLE>
</HEAD>
<BODY>
<H3>Lista No Ordenada - Tipo Square</H3>
<UL TYPE="square">
<LI>Tpico 1</LI>
<LI>Tpico 2</LI>
<LI>Tpico 3</LI>
</UL>
</BODY>
</HTML>

Como fica no rowser:


2 2. .6 6. .2 2. . L LI IS ST TA AS S D DP P0 0E EN NA A0 0A AS S

TAC DL>
Permite inserir na pgina uma lista numrica ou alfabtica, com valor predefinido ou no.




0isponibilizada pelo professor Penan Venna 8arreto - T C0J8 e Cedida por Aleckssandro Tavares 200J
17
ApostiIa de HThL

Sintaxe:

DL TYPE="formato" STAPT="n">
LI>Topico 1lLI>
LI>Topico 2lLI>
lDL>

Dnde:
DL>: nicio da Lista 0rdenada.
TYPE="formato": ndica o formato da numerao. Pode ser:
o 1: lista numrica padro;
o A: lista alfabtica com letras maiusculas;
o a: lista alfabtica com letras minusculas;
o I: lista numrica com numeros romanos maiusculos;
o i: lista numrica com numeros romanos minusculos.
STAPT="n": 0 valor inicial da lista numerada.
LI>: Topicos da lista. No h limites e no necessrio a TAC /L.
lDL>: Fim da Lista 0rdenada.

ExempIo: Listas_ordenadas.htm

<HTML>
<HEAD>
<TITLE>Curso de HTML - Listas</TITLE>
</HEAD>
<BODY>
<H3>Lista Ordenada - TYPE="A" e START="3"</H3>
<OL TYPE="A" START="3">
<LI>Tpico 1</LI>
<LI>Tpico 2</LI>
<LI>Tpico 3</LI>
</OL>
</BODY>
</HTML>

Como fica no rowser:



2 2. .6 6. .3 3. . L LI IS ST TA AS S 0 0E ES SC CP PI IT TI IV VA AS S

As listas descritivas so diferentes das outras listas. Cada item de uma lista descritiva possui dois
componentes: um topico e uma descrio do topico.




0isponibilizada pelo professor Penan Venna 8arreto - T C0J8 e Cedida por Aleckssandro Tavares 200J
18
ApostiIa de HThL

TAC 0L>
Permite inserir na pgina uma lista descritiva.

Sintaxe:

0L>
0T>Topico 1
00>0escrio do Topico 1
0T>Topico 2
00>0escrio do Topico 2
l0L>

Dnde:
0L>: nicio da Lista 0escritiva.
0T>: Topico da Lista 0escritiva. No h limite e no necessrio a TAC /0T.
00>: 0escrio da lista. Para cada TAC 0T existe uma TAC 00.
l0L>: Fim da Lista 0escritiva.

ExempIo: Listas_descitivas.htm

<HTML>
<HEAD>
<TITLE>Curso de HTML - Listas</TITLE>
</HEAD>
<BODY>
<H3>Lista Descritiva</H3>
<DL>
<DT><B>Listas No Ordenadas</B>
<DD>As listas no ordenadas inserem <I>marcadores</I> na frente de cada
item.
<DT><B>Listas Ordenadas</B>
<DD>As listas ordenadas inserem <I>nmeros</I> ou <I>letras</I> na frente de
cada item.
<DT><B>Listas Descritivas</B>
<DD>As listas descritivas so diferentes das outras listas. Cada item de uma
lista descritiva possui dois componentes: um <I>tpico</I> e uma
<I>descrio</I>.
<DL>
</BODY>
</HTML>

Como fica no rowser:





0isponibilizada pelo professor Penan Venna 8arreto - T C0J8 e Cedida por Aleckssandro Tavares 200J
19
ApostiIa de HThL






0isponibilizada pelo professor Penan Venna 8arreto - T C0J8 e Cedida por Aleckssandro Tavares 200J
20
ApostiIa de HThL
3
3
.
.
L
L
I
I
N
N
K
K
S
S


A principal atrao da nternet sem duvida a utilizao de hipertexto. Uma pgina com ligao com
outras pginas ou arquivos localizados em qualquer parte do mundo.
A aplicao de hipertexto no se restringe somente a ligaes com outras pginas. possivel fazer
ligaes com trechos dentro da propria pgina. sto muito utilizado em pginas com textos longos.

3 3. .1 1. . L LI IN NK KS S P PA AP PA A A AP P U UI IV VD DS S L LD DC CA AI IS S
Um link para uma pgina local quando o arquivo que ser linkado est no mesmo diretorio da pgina que
esta linkando. Neste caso preciso informar somente o nome do arquivo.

Sintaxe:

A HPEF="arquivo.extenso">Texto ou magemlA>

Dnde:
"arquivo.extenso": 0eve ser definido o nome do arquivo que ser acessado e sua extenso.
Texto ou Imagem: o texto ou imagem que servir como link.

ExempIo: Links.htm

<HTML>
<HEAD>
<TITLE>Curso de HTML - Links</TITLE>
</HEAD>
<BODY>
<H3>Link Para Pgina Local</H3>
<A HREF="Link_Local.htm">Clique aqui</A> para ver a pgina Link_Local.htm
</BODY>
</HTML>

Como fica no rowser:






0isponibilizada pelo professor Penan Venna 8arreto - T C0J8 e Cedida por Aleckssandro Tavares 200J
21
ApostiIa de HThL
ExempIo: Link_LocaI.htm
<HTML>
<HEAD>
<TITLE>Curso de HTML - Links</TITLE>
</HEAD>
<BODY>
<H3>Link Para Pgina Local</H3>
<A HREF="Links.htm">Clique aqui</A> voltar pgina Links.htm
</BODY>
</HTML>
Como fica no rowser:





3 3. .2 2. . L LI IN NK KS S P PA AP PA A A AP P U UI IV VD DS S E Eh h D DU UT TP PD DS S 0 0I IP PE ET TD DP PI ID DS S
Para criar um link para um arquivo localizado em outro diretorio (pasta) necessrio indicar o caminho
completo para o arquivo
Pegras de diretorios na Web:
0 Ponto de partida para localizar um arquivo o diretorio atual;
A barra utilizada para separar diretorios a barra convencional (/);
Para subir um nivel, voc deve utilizar os sinais "../".

Sintaxe:

A HPEF="diretriolarquivo.extenso">Texto ou magemlA>
0u
A HPEF="..ldiretriolarquivo.extenso">Texto ou magemlA>


ExempIo:

magine a seguinte estrutura de diretorios:
C:\HTVL\Aulas\Links.htm




0isponibilizada pelo professor Penan Venna 8arreto - T C0J8 e Cedida por Aleckssandro Tavares 200J
22
ApostiIa de HThL
C:\HTVL\Link_Home.htm
C:\HTVL\Aulas\0istante\Link_0istante.htm


0e dentro da pgina Links.htm para acessar a pgina Link_Home.htm o comando correto :
A HPEF="..lLink_Home.htm">Texto ou magemlA>

Para acessar a pgina Link_0istante.htm o comando correto :
A HPEF="0istantelLink_0istante.htm">Texto ou magemlA>

ExempIo: Links.htm

<HTML>
<HEAD>
<TITLE>Curso de HTML - Links</TITLE>
</HEAD>
<BODY>
<H3>Link Para Pgina Local</H3>
<A HREF="Link_Local.htm">Clique aqui</A> para ver a pgina Link_Local.htm
<BR>
<H3>Link Para Pgina Que est um nvel acima</H3>
<A HREF="../Link_Home.htm">Clique aqui</A> para ver a pgina ../Link_Home.htm
<BR>
<H3>Link Para Pgina Que est um nvel abaixo</H3>
<A HREF="Distante/Link_Distante.htm">Clique aqui</A> para ver a pgina
Distante/Link_Distante.htm
</BODY>
</HTML>


ExempIo: Pagina_Home.htm

<HTML>
<HEAD>
<TITLE>Curso de HTML - Links</TITLE>
</HEAD>
<BODY>
<H3>Pgina em Home</H3>
Esta pgina est um nvel de diretrio acima que a pgina onde foi criado o
link.
<BR>
<A HREF="Aulas/Links.htm">Clique aqui</A> para voltar a pgina Links.htm
</BODY>
</HTML>

ExempIo: Pagina_0istante.htm

<HTML>
<HEAD>
<TITLE>Curso de HTML - Links</TITLE>
</HEAD>
<BODY>
<H3>Pgina Distante</H3>
Esta pgina est um nvel abaixo do diretrio da pgina onde foi criado o link.




0isponibilizada pelo professor Penan Venna 8arreto - T C0J8 e Cedida por Aleckssandro Tavares 200J
2J
ApostiIa de HThL
<BR>
<A HREF="../Links.htm">Clique aqui</A> para voltar a pgina ../Links.htm
</BODY>
</HTML>

Teste estes exemplos no 8rowser, navegando entre as pginas atravs dos links.

3 3. .3 3. . L LI IN NK KS S P PA AP PA A A AP P U UI IV VD DS S 0 0E E D DU UT TP PD DS S S SE EP PV VI I0 0D DP PE ES S
Para criar um link para arquivos localizados em qualquer parte do mundo necessrio indicar o UPL do
arquivo.

Sintaxe:

A HPEF="protocoIo:llservidorlarquivo">Texto ou magemlA>

Dnde:
protocoIo: o tipo de servidor que est sendo acessado. HTTP, FTP, etc;
servidor: o computador que contm o arquivo;
arquivo: o diretorio e o nome do arquivo.

ExempIos:
A HPEF="ftp:llwww.empresa.com.brldocslcurricuIo.doc">CurriculolA>
A HPEF="http:llwww.empresa.com.brlindex.htm">Empresa XlA>


3 3. .4 4. . L LI IN NK KS S P PA AP PA A E E- -h hA AI IL L
Para criar um link para um email preciso informar o endereo eletronico na tag de link.

ExempIo:
A HPEF="maiIto:aIeckssandro@hotmaiI.com">aleckssandro@hotmail.comlA>

3 3. .5 5. . L LI IN NK KS S P PA AP PA A A A h hE ES Sh hA A P P C CI IN NA A - - N NC CD DP PA A
Para criar um link para a mesma pgina preciso definir sees na pgina. Cada seo ter um nome que
servir de referncia para o link.
Para isso, preciso criar uma ncora no inicio de cada seo que ser acessada.
Uma ncora um ponto de referncia ou endereo. Ela utilizada para marcar o inicio de cada seo. 0
nome da ncora ser utilizado pelo link que a acessar.

Para Criar ncora:

A NAhE="Nome da Seo">TextolA>

Dnde:




0isponibilizada pelo professor Penan Venna 8arreto - T C0J8 e Cedida por Aleckssandro Tavares 200J
24
ApostiIa de HThL
NAhE="Nome da Seo": Cria o nome da seo, marcando o inicio da mesma.
Texto: No necessrio definir nada.


Para Linkar ncora:

A HPEF="#Nome da Seo">TextolA>

Dnde:
#Nome da Seo: ndica o nome da seo que deve ser acessada.
Texto: o texto que servir como link.


ExempIo: Links_Ancoras.htm

<HTML>
<HEAD>
<TITLE>Curso de HTML - Links ncoras</TITLE>
</HEAD>
<BODY>
<A NAME="Inicio"></A>
<H2>Exemplo de links para sees de uma Pgina:</H2>
<!-- Aqui esto os links -->
<A HREF="#Seo1">Seo</A><BR>
<A HREF="#Seo2">ncoras</A><BR>
<A HREF="#Seo3">Links</A><BR>
<BR><BR>
Este espao foi criado para separar as sees da pgina.
<BR><BR>
<!-- Aqui esto as sees -->
<A NAME="Seo1"></A>
<H3>Seo:</H3>
Seo uma parte de uma pgina.<BR>
As sees normalmente so utilizadas como captulos de um livro.<BR>
<A HREF="#Inicio">Clique aqui para voltar ao incio da pgina</A><BR>
<BR><BR>
Este espao foi criado para separar as sees da pgina.
<BR><BR>
<A NAME="Seo2"></A>
<H3>ncoras:</H3>
As ncoras so criadas para definir o incio de cada seo que servem como
referncia para os links.<BR>
<A HREF="#Inicio">Clique aqui para voltar ao incio da pgina</A><BR>
<BR><BR>
Este espao foi criado para separar as sees da pgina.
<BR><BR>
<A NAME="Seo3"></A>
<H3>Links:</H3>
Os links so ligaes para outras pginas ou sees de uma mesma pgina.<BR>
<A HREF="#Inicio">Clique aqui para voltar ao incio da pgina</A><BR>
</BODY>
</HTML>








0isponibilizada pelo professor Penan Venna 8arreto - T C0J8 e Cedida por Aleckssandro Tavares 200J
25
ApostiIa de HThL
Como fica no rowser:




0isponibilizada pelo professor Penan Venna 8arreto - T C0J8 e Cedida por Aleckssandro Tavares 200J
26
ApostiIa de HThL
4
4
.
.
I
I
h
h
A
A
C
C
E
E
N
N
S
S




Um otimo recurso para tornar uma pgina web mais atraente a utilizao de imagens. 0s formatos de
arquivos utilizados para web so o CF e o JPC ou JPEC.
Para editar imagens para web voc pode usar o editor de sua preferncia. 0s mais poderosos e utilizados
por 0esigners Web so o Corel 0raw e o Photo Shop, porm o mais utilizado por programadores em geral
o Paint Shop Pro, que o que vamos utilizar no curso para criarmos imagens, porm o proposito no
ensinar a utilizao do mesmo e sim uslo como uma ferramenta.
0 formato CF (Craphics nterchange Format) suporta at 256 cores e gera arquivos em geral bem
menores, com extenso .gif. Ele muito utilizado para desenhos e grficos web.
0 formato JPEC (Joint Photographic Engineering Croup) suporta at 16 milhes de cores, podendo reduzir
o tamanho de uma imagem em at 10 vezes. Ele gera arquivos com extenso .jpg ou .jpeg, sendo muito
utilizado para fotos por ter melhor resoluo de cores.

TAC IhC>
Permite inserir na pgina uma imagem.

Sintaxe:

IhC SPC="arquivo" WI0TH="n" HEICHT="n" DP0EP="n" ALICN="posio" ALT="texto">

Dnde:
SPC="arquivo": ndica a UPL(caminho) do arquivo de imagem. 0igite o nome do arquivo e a
extenso.
WI0TH="n": 0efine a largura da imagem em pixels. Se no for informado o padro o tamanho
original da imagem.
HEICHT="n": ndica a altura da imagem. Se no for informado o padro o original da imagem.
DP0EP="n": a espessura da borda em pixels.

ALICN="posio: ndica a posio da imagem em relao ao texto. Posio pode ser:
o top: alinha o texto pelo topo da imagem;
o bottom: alinha o texto pela base da imagem(padro);
o middIe: alinha o texto pelo centro da imagem.
ALT="texto": um texto alternativo para a imagem. Quando o 8rowser no exibe a imagem, a
mensagem exibida no lugar.


ExempIo: Imagens.htm

<HTML>
<HEAD>
<TITLE>Curso de HTML - Imagems</TITLE>
</HEAD>
<BODY BGCOLOR="White">




0isponibilizada pelo professor Penan Venna 8arreto - T C0J8 e Cedida por Aleckssandro Tavares 200J
27
ApostiIa de HThL
<IMG SRC="Imagens/Estrela.gif" WIDTH="200" HEIGHT="200" BORDER="5" ALT="Estrela"
ALIGN="Middle">
Teste o alinhamento deste texto alterando o atributo ALIGN para Top, depois
Bottom e
depois Middle.
</BODY>
</HTML>

Teste no rowser.
4 4. .1 1. . I Ih hA AC CE EN NS S C CD Dh hD D L LI IN NK K
Para utilizar uma imagem como link acrescente a tag VC entre as tag A/A. Quando se usa uma
imagem como link, preciso definir o atributo 80P0EP=0, pois alguns browsers exibem uma borda azul ao
redor da imagem, prejudicando a aparncia da pgina.

Sintaxe:

A HPEF="UPL">IhC SPC="otao.gif">lA>

ExempIo: Imagens.htm
<HTML>
<HEAD>
<TITLE>Curso de HTML - Imagens</TITLE>
</HEAD>
<BODY BGCOLOR="White">
<IMG SRC="Imagens/Estrela.gif" WIDTH="200" HEIGHT="200" BORDER="5" ALT="Estrela"
ALIGN="Middle">
Teste o alinhamento deste texto alterando o atributo ALIGN para Top, Bottom e
depois Middle.
<H3>Imagem como Link</H3>
<A HREF="Imagens.htm"><IMG SRC="Imagens/Botao.gif" BORDER="0"></A>
</BODY>
</HTML>

Veja como fica no rowser:




0isponibilizada pelo professor Penan Venna 8arreto - T C0J8 e Cedida por Aleckssandro Tavares 200J
28
ApostiIa de HThL
4 4. .2 2. . I Ih hA AC CE EN NS S C CD Dh hD D P PA A0 0P P D D 0 0E E F FU UN N0 0D D
possivel utilizar uma imagem como padro de fundo em uma pgina. Para isso basta acrescentar o
atributo 8ACKCP0UN0 dentro da tag 800Y. Tome cuidado para no utilizar arquivos muito grandes como
padro de fundo, pois tornariam a pgina mais lenta para carregar.

Sintaxe:

D0Y ACKCPDUN0="imagem">lD0Y>

ExempIo: Imagens.htm
<HTML>
<HEAD>
<TITLE>Curso de HTML - Imagens</TITLE>
</HEAD>
<BODY BGCOLOR="White" BACKGROUND=Imagens/Estrela.gif>
<br><br><br>
Veja como a imagem da estrela fica como fundo na pgina.
</BODY>
</HTML>

Teste no rowser.


4 4. .3 3. . I Ih hA AC CE EN NS S T TP PA AN NS SP PA AP PE EN NT TE ES S
possivel tornar o fundo de uma imagem transparente, de forma que, ao ser carregada, a cor de fundo da
imagem desaparece. Este recurso muito util para utilizar a mesma imagem em vrias pginas de cores
de fundo diferentes, sem que precise criar uma imagem para cada pgina.

Transparncia em imagens so suportada pelo formato CF.


4 4. .4 4. . I Ih hA AC CE EN NS S h hA AP PE EA A0 0A AS S
Uma imagem mapeada nada mais do que uma imagem dividida em vrias regies, onde cada regio um
link para uma pgina.
Existem dois tipos de imagens mapeadas:
ServerlSide: As informaes ficam em um arquivo residente no servidor onde est hospedada
a pgina. Quando o usurio d um clique na imagem, enviado ao servidor as coordenadas da
imagem que recebeu o clique e o nome do arquivo com as informaes que deve ser utilizado.
CIientelSide: As informaes necessrias so armazenadas na propria pgina onde est a
imagem mapeada. Por isso mais rpido.
Neste curso vamos criar um mapa do tipo Client/Side. Para isso existem diversos programas que podem ser
usados para mapear a imagem. 7amos utilizar o VapEdit.
Para criar uma imagem mapeada preciso:





0isponibilizada pelo professor Penan Venna 8arreto - T C0J8 e Cedida por Aleckssandro Tavares 200J
29
ApostiIa de HThL
Criar uma imagem em seu editor preferido. 7amos utilizar a imagem Estrela_Transparente.gif;
Criar uma pgina HTVL com a imagem. 7amos criar a pgina magem_Vapeada.htm;
Criar o mapa: definir as regies e associar as UPLs.


Veja o arquivo saIvo por um editor de imagem mapeada:

<HTML>
<HEAD>
<TITLE>Curso de HTML - Imagem Mapeada</TITLE>
</HEAD>
<BODY BGCOLOR="White">
<IMG SRC="Imagens/Estrela_Transparente.gif" usemap="#Estrela_Transparente"
border="0">
<map name="Estrela_Transparente">
<area shape="circle" coords="49,55,17" href="Imagem_Mapeada.htm" title="">
<area shape="poly" coords="37,33,47,2,59,36,37,34" href="Imagem_Mapeada.htm"
title="">
<area shape="default" nohref>
</map>
</BODY>
</HTML>


Sintaxe:

IhC SPC="arquivo" USEhAP="mapa">
hAP NAhE="nome">
APEA SHAPE="formato" CDDP0S="coordenadas" HPEF="pagina">
lhAP>

Estrutura de um "hapa":

hAP>lhAP>: ndica o inicio de uma descrio de mapa processado no cliente. Atributo:
o NAhE="nome": indica o nome do mapa;
APEA>: ndica as regies sensiveis que o mapa apresentar. Atributos:
o SHAPE="formato": indica o formato da regio. Pode ser Circle, Poly, Pect, 0efault;
o CDDP0S="coordenadas": indica as coordenadas que formam a regio;
o HPEF="pagina": indica a pgina associada regio;
IhC>: ndica a imagem mapeada. Atributo:
o SPC="arquivo": indica o nome do arquivo de imagem;
o USEhAP="mapa": indica o mapa que ser utilizado;


4 4. .5 5. . I Ih hA AC CE EN NS S A AN NI Ih hA A0 0A AS S
Este um dos recursos mais utilizados para atrair a ateno dos usurios. possivel criar animaes
complexas com Applets Java, objetos ActiveX e Flash. Porm a forma mais simples de criar animaes
utilizar imagens CF.
Para criar um gif animado preciso utilizar um programa proprio para criao de gifs animados. Um dos
programas mais utilizados e completos o Animation Shop que vem com o Paint Shop Pro
(www.jasc.com).




0isponibilizada pelo professor Penan Venna 8arreto - T C0J8 e Cedida por Aleckssandro Tavares 200J
J0
ApostiIa de HThL
Nesta apostila no chegaremos a aprender como se faz uma imagem animada, mas para testar, baixe
alguma da internet e teste. A tag img para uma imagem animada no muda em relao a uma imagem
esttica.





0isponibilizada pelo professor Penan Venna 8arreto - T C0J8 e Cedida por Aleckssandro Tavares 200J
J1
ApostiIa de HThL
5
5
.
.
T
T
A
A

E
E
L
L
A
A
S
S




As tabelas so perfeitas para organizar e apresentar dados de forma prtica. possivel inserir texto,
imagens ou links em tabelas, distribuindo melhor as informaes em uma pgina.
Este um dos topicos mais importantes, porque imprescindivel dominar bem o uso de tabelas para criar
um bom layout html. Praticamente todas as pginas web utilizam recursos de tabela para diagramar seus
elementos. Porm a utilizao de estilos (CSS) para posicionamento de elementos na pgina est
crescendo cada vez mais, e j existem pginas com layout muito bom sem o uso de tabelas, usando apenas
CSS.

5 5. .1 1. . T TA A E EL LA A S SI Ih hP PL LE ES S
Como padro uma tabela no possui bordas. Cada linha da tabela definida separadamente e possivel
modificar a aparncia da tabela, utilizando alguns atributos que veremos mais adiante.
0 numero de TP define o numero de linhas na tabela e o numero de T0 (dentro da TAC TP) define o
numero de colunas da tabela.
Sintaxe:

TALE>
TP>
TH>Cabealho da TabelalTH>
T0>0ados da TabelalT0>
lTP>
lTALE>


Dnde:
TALE>lTALE>: TACs de inicio e fim de tabela.
TP>lTP>: define cada linha da tabela;
TH>lTH>: define o cabealho da tabela. uma clula da tabela;
T0>lT0>: define os dados da tabela. uma clula na tabela;
0ados da TabeIa: podem ser texto, imagens e links;
CabeaIhos da TabeIa: cabealhos com texto, imagens ou links.

ExempIo: TabeIas.htm

<HTML>
<HEAD>
<TITLE>Curso de HTML - Tabelas</TITLE>
</HEAD>
<BODY>
<H3>Tabela Sem Borda:</H3>
<TABLE>
<TR>
<TH>Clula 1</TH>




0isponibilizada pelo professor Penan Venna 8arreto - T C0J8 e Cedida por Aleckssandro Tavares 200J
J2
ApostiIa de HThL
<TH>Clula 2</TH>
</TR>
<TR>
<TD>Clula 3</TD>
<TD>Clula 4</TD>
</TR>
</TABLE>
</BODY>
</HTML>


Como fica no rowser:


5 5. .2 2. . h hD D0 0I IF FI IC CA AN N0 0D D A A A AP PA AP P N NC CI IA A 0 0A A T TA A E EL LA A - - A AT TP PI I U UT TD DS S
possivel definir alguns atributos para tabelas, como bordas, alinhamento do conteudo, espaamento
entre as clulas, espaamento entre os dados e a proxima clula, largura da tabela, etc...
7ejamos alguns desses atributos:

Sintaxe:

TALE DP0EP="n" WI0TH="nX" HEICHT="nX" CELLSPACINC="n" CELLPA0INC="n"
CCDLDP="#PPCC">
lTALE>

Dnde:
DP0EP="n": espessura da borda em pixels.
WI0TH="nX": largura da tabela em relao ao browser, em pixels ou ;
HEICHT="nX": altura da tabela em relao ao browser, em pixels ou ;
CELLSPACINC="n": espao entre uma clula e outra, em pixels;
CELLA00INC="n': espao entre os dados e a borda da tabela, em pixels;
CCDLDP="#PPCC": cor de fundo das clulas da tabela.

ExempIo: TabeIas.htm

<HTML>
<HEAD>
<TITLE>Curso de HTML - Tabelas</TITLE>




0isponibilizada pelo professor Penan Venna 8arreto - T C0J8 e Cedida por Aleckssandro Tavares 200J
JJ
ApostiIa de HThL
</HEAD>
<BODY>
<H2>Tabela com :</H2>
<H4>border="3" width="80%" height="30%" cellpadding="6" cellspacing="6"
bgcolor="Gold"</H4>
<TABLE border="3" width="80%" height="30%" cellspacing="6" cellpadding="0"
bgcolor="Gold">
<TR>
<TH>Clula 1</TH>
<TH>Clula 2</TH>
</TR>
<TR>
<TD>Clula 3</TD>
<TD>Clula 4</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Como fica no rowser:

5 5. .3 3. . A AT TP PI I U UT TD DS S 0 0E E L LI IN NH HA AS S E E C CE EL LU UL LA AS S
Tambm possivel definir algumas propriedades de linhas e clulas individuais da tabela.

Sintaxe:

TP ALICN="posio" CCDLDP="#PPCC" VALICN="posio">
T0 ALICN="posio" VALICN="posio" CCDLDP="#PPCC" WI0TH="nX" NDWPAP>lT0>
lTP>

Dnde:
ALICN="posio": alinhamento horizontal do conteudo da clula ou das clulas da linha. Pode ser
left, right e center;
CCDLDP="#PPCC": define a cor de fundo das clulas da linha ou de uma clula individual;
VALICN="posio": alinhamento vertical de uma clula ou de clulas de uma linha;




0isponibilizada pelo professor Penan Venna 8arreto - T C0J8 e Cedida por Aleckssandro Tavares 200J
J4
ApostiIa de HThL
WI0TH="nX": largura de uma clula em pixels ou ;
NDWPAP: indica ao browser que o texto da clula no pode ser dividido em mais de uma linha. A
coluna inteirar ter o tamanho do texto escrito naquela clula;

ExempIo: TabeIas.htm

<HTML>
<HEAD>
<TITLE>Curso de HTML - Tabelas</TITLE>
</HEAD>
<BODY>
<H2>Tabela</H2>
<TABLE BORDER="0" BGCOLOR="Gold" WIDTH="600" CELLPADING="3">
<TR BGCOLOR="Silver">
<TH>Clula 1</TH>
<TH>Clula 2</TH>
</TR>
<TR>
<TD BGCOLOR="LightBlue" ALIGN="Center" VALIGN="top">
Clula 3 - ALIGN="center" VALIGN="top"<BR><BR>
</TD>
<TD BGCOLOR="Red">Clula 4</TD>
</TR>
</TABLE>
<H2>Tabela utilizando o atributo NOWRAP</H2>
<TABLE BORDER="2" WIDTH="80%" CELLPADDING="6">
<TR ALIGN="Center">
<TD NOWRAP>Com o atributo NOWRAP o texto no pode ser dividido em mais de
uma linha</TD>
<TD>Este texto no est utilizando o atributo NOWRAP na tag TD. O texto
distribudo
em mais de uma linha dentro da mesma clula.
</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Como fica no browser:





0isponibilizada pelo professor Penan Venna 8arreto - T C0J8 e Cedida por Aleckssandro Tavares 200J
J5
ApostiIa de HThL

5 5. .4 4. . h hE ES SC CL LA AN N0 0D D C CE EL LU UL LA AS S
possivel atravs de atributos na tag T0 mesclar clulas em uma mesma linha ou em uma mesma coluna.
Para mesclar clulas em uma mesma linha usar o atributo C0LSPAN na tag T0 e para mesclar clulas em
uma mesma coluna usar o atributo P0WSPAN na tag T0.

Sintaxe:

T0 CDLSPAN="n">0ados da TabelalT0>
T0 PDWSPAN="n">0ados da TabelalT0>

Dnde:
CDLSPAN="n": o numero de colunas que a clula ocupar;
PDWSPAN="n": o numero de linhas que a clula ocupar;

ExempIo: TabeIas_hescIadas.gif





0isponibilizada pelo professor Penan Venna 8arreto - T C0J8 e Cedida por Aleckssandro Tavares 200J
J6
ApostiIa de HThL
<HTML>
<HEAD>
<TITLE>Curso de HTML - Tabelas</TITLE>
</HEAD>
<BODY>
<H2>Tabela utilizando o atributo COLSPAN</H2>
<TABLE BORDER="2" WIDTH="50%" CELLPADDING="6">
<TR BGCOLOR="Silver">
<TD COLSPAN="2">Clula 1</TD>
</TR>
<TR ALIGN="Right">
<TD>Clula 2</TD>
<TD>Clula 3</TD>
</TR>
</TABLE>
<H2>Tabela utilizando o atributo ROWSPAN</H2>
<TABLE BORDER="2" WIDTH="50%" CELLPADDING="6">
<TR BGCOLOR="Silver">
<TD ROWSPAN="2">Clula 1</TD>
<TD>Clula 2</TD>
</TR>
<TR ALIGN="Right">
<TD>Clula 3</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Como fica no rowser:




0isponibilizada pelo professor Penan Venna 8arreto - T C0J8 e Cedida por Aleckssandro Tavares 200J
J7
ApostiIa de HThL
6
6
.
.
F
F
D
D
P
P
h
h
U
U
L
L
A
A
P
P
I
I
D
D
S
S





Atravs de um formulrio o usurio pode interagir com o servidor, enviando dados que sero processados
no servidor e devolvidos ao usurio.
0s formulrios enviam os dados para um servidor http onde um programa CC, geralmente em "PEPL" ou
"C", processa os dados. 0 script CC pode retornar, por exemplo, uma pgina ao usurio agradecendo o
uso do formulrio e/ou enviar um email para o criador da pgina.
Um script CC (Common Cateway nterface), uma interface que executa programas externos suportados
por servidores de informaes. No caso da internet, so os servidores http que do suporte aos CC.
Alguns exemplos de uso de scripts CC:
tratar as requisies e dados enviados pelo usurio atravs de formulrios;
servir de interface entre HTVL e banco de dados SQL, fazendo a converso da transao HTVL
para SQL e viceversa;
converter dados do sistema em HTVL gerando respostas para o cliente;

0s scripts so escritos em linguagens compativeis com a plataforma sob a qual o servidor est rodando e
devem produzir arquivos executveis. As linguagens mais utilizadas so:
PEPL
TCL
C Shell
8ourne Shell
C/C++

Um formulrio tambm pode ser processado por Servidores de Pginas Ativas como ASP, JSP e PHP que
esto muito difundidos na internet.

6 6. .1 1. . C CP PI IA AN N0 0D D U Uh h F FD DP Ph hU UL LA AP PI ID D
Cada elemento de um formulrio definido separadamente. Na definio do formulrio, voc informa o
local do programa (CC, ASP, PHP) que controlar o formulrio e a forma ou mtodo como os dados sero
enviados para o servidor.
Sintaxe:

FDPh NAhE="nome" hETHD0="mtodo" ACTIDN="UPL">
Elementos de Formulrio
lFDPh>


Dnde:
hETHD0: 0efine o mtodo utilizado pelo servidor para receber os dados do formulrio. 0 mtodo
pode ser:




0isponibilizada pelo professor Penan Venna 8arreto - T C0J8 e Cedida por Aleckssandro Tavares 200J
J8
ApostiIa de HThL
o PDST: mtodo mais utilizado, transmite toda a informao do formulrio imediatamente
apos a UPL;
o CET: anexa o conteudo do formulrio ao endereo da UPL, por isso tem limitao de
tamanho das informaes;
ACTIDN: especifica o programa ou pgina do servidor que processar os dados do formulrio;
NAhE: define o nome do formulrio.


6 6. .2 2. . T TA AC Cs s 0 0E E F FD DP Ph hU UL LA AP PI ID D

TAC INPUT>
0efine um campo de entrada de dados. Cada campo de um formulrio atribui o seu conteudo a uma
varivel que possui nome e tipo especifico.
Sintaxe:

INPUT TYPE="tipo" SPC="imagem" NAhE="nome" VALUE="vaIor" SIZE="tamanho"
hAXLENCTH="comprimento" CHECKE0>


Dnde:
TYPE:="tipo" 0efine o tipo de varivel que pode ser:
o TEXT: Area de texto (usa os atributos: type, name, value, size, maxlength);
o PASSWDP0: Texto protegido por senha (usa os atributos: type, name, value, size e
maxlength);
o HI00EN: Entrada oculta (atributos: type, name, value);
o PA0ID: 8oto com uma opo (atributos: type; name, value, checked);
o CHECKDX: 8oto com mais opes (type, name, value, checked);
o PESET: Limpa os campos (type, name, value);
o SUhIT: Envia os dados do formulrio (type, name, value);
o IhACE: Envia os dados do formulrio (type, name, value, src);
o UTTDN: 8oto (atributos: type, name, value);
o FILE: Abre uma janela para selecionar arquivo (type, name, value);
NAhE="nome": nome do campo ou varivel;
SPC="imagem": define a imagem que ser usada no input do tipo image;
VALUE="vaIor": define o valor do campo;
CHECKE0: indica que o campo deve estar marcado ( o padro);
SIZE="tamanho": define o tamanho do campo, ou seja, a quantidade de caracteres que ser
exibido em campos do tipo Text e Password;
hAXLENCTH="comprimento": define a quantidade de caracteres que o campo pode receber em
campos do tipo Text e Password.

ExempIo: FormuIario.htm

<HTML>
<HEAD>
<TITLE>Curso de HTML - Formulrio</TITLE>
</HEAD>
<BODY>
<FORM ACTION="processa.asp" METHOD="POST">
<TABLE>
<TR>
<TH ALIGN="left" VALIGN="top">Caixa de texto comum:</TH>




0isponibilizada pelo professor Penan Venna 8arreto - T C0J8 e Cedida por Aleckssandro Tavares 200J
J9
ApostiIa de HThL
<TD><INPUT TYPE="Text" NAME="txtTexto" SIZE="20" MAXLENGTH="25"></TD>
</TR>
<TR>
<TH>Texto protegido por senha:</TH>
<TD><INPUT TYPE="Password" NAME="txtTexto" SIZE="6" MAXLENGTH="6"></TD>
</TR>
<TR>
<TH>Botes de Radio:</TH>
<TD>
Qual o seu time?
<INPUT TYPE="Radio" NAME="radOpcao" VALUE="share" CHECKED>
<INPUT TYPE="RAdio" NAME="radOpcao" VALUE="free">
</TD>
</TR>
<TR>
<TH>Checkboxes:</TH>
<TD>
Que softwares voc cohece?
<INPUT TYPE="Checkbox" NAME="book" VALUE="Sim">
<INPUT TYPE="Checkbox" NAME="share" VALUE="Sim">
<INPUT TYPE="Checkbox" NAME="soft" VALUE="Sim">
</TD>
</TR>
<TR>
<TH>Boto de Envio:</TH>
<TD><INPUT TYPE="Submit" NAME="cmdEnvio" VALUE="Enviar"></TD>
</TR>
<TR>
<TH>Boto de Limpeza:</TH>
<TD><INPUT TYPE="Reset" NAME="cmdLimpar" VALUE="Limpar"></TD>
</TR>
<TR>
<TH>Tipo File:</TH>
<TD><INPUT TYPE="FILE" NAME="filArquivo"></TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>

Como fica no rowser:





0isponibilizada pelo professor Penan Venna 8arreto - T C0J8 e Cedida por Aleckssandro Tavares 200J
40
ApostiIa de HThL



TAC SELECT>
0efine uma lista de itens que podem ser selecionados pelo usurio.
Sintaxe:

SELECT NAhE="nome" SIZE="tamanho" hULTIPLE LISTDX>
DPTIDN SELECTE0>0polDPTIDN>
DPTIDN>0polDPTIDN>
lSELECT>

Dnde:
NAhE="nome": define o nome do campo;
SIZE="tamanho": define a quantidade de linhas da lista;
hULTIPLE: define que vrios itens da lista podem ser selecionados;
LISTDX: define uma caixa dropdown para lista (deve ser utilizado sem os atributos SZE e
VULTPLE);
DPTIDN: define cada opo da lista, as opes da lista devem ser definidas entre as tags
0PT0N/0PT0N;
SELECTE0: indica que a opo estar selecionada como default;

ExempIo: FormuIario.htm

<HTML>
<HEAD>
<TITLE>Curso de HTML - Formulrio</TITLE>
</HEAD>
<BODY>
<FORM ACTION="processa.asp" METHOD="POST">
<TABLE BORDER="0" CELLPADDING="2">
<TR>
<TH ALIGN="Right">Hobbie:</TH>
<TD>
<SELECT NAME="Hobbie" SIZE="3" MULTIPLE>
<OPTION>Carro</OPTION>
<OPTION SELECTED>Futebol</OPTION>




0isponibilizada pelo professor Penan Venna 8arreto - T C0J8 e Cedida por Aleckssandro Tavares 200J
41
ApostiIa de HThL
<OPTION>Msica</OPTION>
<OPTION>Livros</OPTION>
<OPTION>Outros</OPTION>
</SELECT>
</TD>
</TR>
<TR>
<TH ALIGN="Right">Estado Civil:</TH>
<TD>
<SELECT NAME="ListBox" LISTBOX>
<OPTION>Casado</OPTION>
<OPTION SELECTED>Solteiro</OPTION>
<OPTION>Disquitado</OPTION>
<OPTION>Vivo</OPTION>
</SELECT>
</TD>
</TR>
<TR>
<TD>&nbsp;</TD>
<TD>
<INPUT TYPE="Reset" NAME="cmdLimpar" VALUE="Limpar">&nbsp;&nbsp;&nbsp;
<INPUT TYPE="Submit" NAME="cmdEnvio" VALUE="Enviar">
</TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>

Como fica no rowser:

TAC TEXTAPEA>
0efine uma caixa de texto onde o usurio pode digitar um texto com varias linhas.
Sintaxe:

TEXTAPEA NAhE="nome" PDWS="n" CDLS="n">TextolTEXTAPEA>




0isponibilizada pelo professor Penan Venna 8arreto - T C0J8 e Cedida por Aleckssandro Tavares 200J
42
ApostiIa de HThL

Dnde:
NAhE="nome": define o nome do campo;
PDWS="n": o numero de linhas da caixa de texto;
CDLS="n": define o numero de colunas da caixa de texto;
Texto: define o texto que aparecer como default;

ExempIo: FormuIario.htm

<HTML>
<HEAD>
<TITLE>Curso de HTML - Formulrio</TITLE>
</HEAD>
<BODY>
<FORM ACTION="processa.asp" METHOD="POST">
<TABLE BORDER="0" CELLPADDING="2">
<TR>
<TH ALIGN="Right" VALIGN="top">Deixe sua sugesto:</TH>
<TD><TEXTAREA NAME="Sugestao:" COLS="30" ROWS="5">Digite sua sugesto
aqui.</TEXTAREA></TD>
</TR>
<TR>
<TD>&nbsp;</TD>
<TD>
<INPUT TYPE="Reset" NAME="cmdLimpar" VALUE="Limpar">&nbsp;&nbsp;&nbsp;
<INPUT TYPE="Submit" NAME="cmdEnvio" VALUE="Enviar">
</TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>

Como fica no rowser:







0isponibilizada pelo professor Penan Venna 8arreto - T C0J8 e Cedida por Aleckssandro Tavares 200J
4J
ApostiIa de HThL
7
7
.
.
F
F
P
P
A
A
h
h
E
E
S
S




0s frames so divises da tela do browser em diversas telas (ou "quadros"). Com isso, tornase possivel
apresentar mais de uma pgina por vez: por exemplo, um indice principal em uma parte pequena da tela,
e os textos relacionados ao indice em outra parte.processados no servidor e devolvidos ao usurio.
0 corpo de uma pgina Frame diferente de uma pgina comum, e nesse arquivo so tem as dimenses das
divises e as pginas que iram aparecer em cada diviso.
A estrutura bsica do corpo de uma pgina com frame:
HThL>
HEA0>
TITLE>TituIo da pginalTITLE>
lHEA0>
FPAhESET CDLS="15X,85X">
FPAhE SPC="pagina1.htmI">
FPAhE SPC="pagina2.htmI">
lFPAhESET>
lHThL>

7 7. .1 1. . C CP PI IA AN N0 0D D F FP PA Ah hE ES S
Para utilizar o recurso de frames, preciso utilizar um conjunto de tags. Cada uma com sua funo:
FPAhESET> utilizada para criar um conjunto de frames e seus elementos. a tag principal
para a criao de frames e precisa ser encerrada com /FPAVESET;
FPAhE> utilizada para definir um frame (quadro) dentro de um conjunto de frames. No
necessita de tag de encerramento;

Sintaxe:

FPAhESET CDLS="coIunas,Iargura" PDWS="Iinhas,aItura" FPAhEDP0EP="1l0" FPAhESPACINC="n"
DP0EP="n">
FPAhE NAhE="nome" SPC="UPL" ALICN="posio" FPAhEDP0EP="1l0" hAPCINHEICHT="aItura"
hAPCINWI0TH="Iargura" SCPDLLINC="yeslno" NDPESIZE>
lFPAhESET>


Dnde:
FPAhESET: tag de abertura de um conjunto de frames;
CDLS="coIunas,Iargura": define o numero de colunas, o valor pode ser em pixels ou
percentagem. utilizado para definir o numero de quadros (frames) que ter o conjunto de
frames;
PDWS="Iinhas,aItura": define o numero de linhas, o valor pode ser em pixels ou em
percentagem. utilizado para definir o numero de quadros (frames) que ter o conjunto de
frames;
FPAhEDP0EP="1l0": o valor 1 exibe uma borda J0 no frame, o valor 0 no exibe a borda;




0isponibilizada pelo professor Penan Venna 8arreto - T C0J8 e Cedida por Aleckssandro Tavares 200J
44
ApostiIa de HThL
DP0EP="n": define o tamanho da borda;
FPAhESPACINC="n": define um espao em pixels entre os frames, nem todos os browsers
reconhecem este atributo;


FPAhE: define cada quadro (frame) separadamente;
NAhE="nome": define o nome do frame;
SPC="UPL": define a pgina que ser exibida no frame;
ALICN="posio': define o alinhamento do conteudo do frame. Posio pode ser:
o top: o conteudo alinhado no topo do frame;
o middIe: o conteudo alinhado nomeio do frame;
o bottom: o conteudo alinhado na base do frame;
o Ieft: o conteudo alinhado esquerda do frame;
o right: o conteudo alinhado direita do frame;
FPAhEDP0EP="1l0": o valor 1 exibe uma borda J0, o valor 0 no exibe borda;
hAPCINHEICHT="aItura": define a altura da margem em pixels;
hAPCINWI0TH="Iargura": define a largura da margem em pixels;
SCPDLLINC="yeslnolAuto": define se o frame ter ou no barra de rolagem;
NDPESIZE: evita o redimensionamento do frame;


ExempIo: Frames.htm

<HTML>
<HEAD>
<TITLE>Curso de HTML - Frames</TITLE>
</HEAD>
<FRAMESET COLS="40%,*" FRAMEBORDER="1" BORDER="5">
<FRAME NAME="Frame_1" SCROLLING="No" NORESIZE SRC="Pagina1.htm">
<FRAME NAME="Frame_2" SCROLLING="Auto" NORESIZE SRC="Pagina2.htm">
</FRAMESET>
</HTML>

ExempIo: Pagina1.htm

<HTML>
<HEAD>
<TITLE>Curso de HTML - Frames</TITLE>
</HEAD>
<BODY BGCOLOR="Gold">
<CENTER><H2>Pgina 1</H2></CENTER>
</BODY>
</HTML>

ExempIo: Pagina2.htm

<HTML>
<HEAD>
<TITLE>Curso de HTML - Frames</TITLE>
</HEAD>
<BODY BGCOLOR="LigthBlue">
<CENTER><H2>Pgina 2</H2></CENTER>
</BODY>
</HTML>




0isponibilizada pelo professor Penan Venna 8arreto - T C0J8 e Cedida por Aleckssandro Tavares 200J
45
ApostiIa de HThL
Como fica no rowser:




ExempIo: Frames_2.htm

<HTML>
<HEAD>
<TITLE>Curso de HTML - Frames</TITLE>
</HEAD>
<FRAMESET COLS="40%,*" FRAMEBORDER="1" BORDER="5">
<FRAME NAME="Frame_1" SCROLLING="No" NORESIZE SRC="Pagina1.htm">
<FRAME NAME="Frame_2" SCROLLING="Auto" NORESIZE SRC="Pagina2.htm">
</FRAMESET>
</HTML>

Como fica no rowser:







0isponibilizada pelo professor Penan Venna 8arreto - T C0J8 e Cedida por Aleckssandro Tavares 200J
46
ApostiIa de HThL
ExempIo: Frames_3.htm

<HTML>
<HEAD>
<TITLE>Curso de HTML - Frames</TITLE>
</HEAD>
<FRAMESET ROWS="10%,*" FRAMEBORDER="0" BORDER="0">
<FRAME NAME="Frame_1" SCROLLING="no" NORESIZE SRC="Pagina1.htm">
<FRAMESET COLS="10%,*" FRAMEBORDER="0">
<FRAME NAME="Frame_2" SCROLLING="Auto" NORESIZE SRC="Pagina2.htm">
<FRAME NAME="Frame_3" SCROLLING="Auto" NORESIZE SRC="Pagina3.htm">
</FRAMESET>
</FRAMESET>
</HTML>

ExempIo: Pagina3.htm

<HTML>
<HEAD>
<TITLE>Curso de HTML - Frames</TITLE>
</HEAD>
<BODY BGCOLOR="Red">
<CENTER><H2><FONT COLOR="White">Pgina 3</FONT></H2></CENTER>
</BODY>
</HTML>


Como fica no rowser:


7 7. .2 2. . L LI IN NK KS S C CD Dh h F FP PA Ah hE ES S
Sempre que se aciona um link dentro de uma pgina, o de]cult que a pgina referente a esse link seja
carregada na mesma janela da pgina anterior, porm possivel fazer com que um link abra uma pgina
em qualquer frame, para isso usamos o atributo TAPCET na tag A/A




0isponibilizada pelo professor Penan Venna 8arreto - T C0J8 e Cedida por Aleckssandro Tavares 200J
47
ApostiIa de HThL
Sintaxe:

A HPEF="" TAPCET="frame">Linkla>

Dnde:
TAPCET="janeIa":indica em qual a janela ou frame que a pgina do link deve ser carregada.
Janela pode ser;
o _top: limpa a tela e abre a pgina ocupando toda a tela;
o _bIank: abre uma nova janela do browser para exibir a pgina;
o _seIf: carrega a pgina no frame atual. o default;
o nome do frame: carrega a pgina no frame especificado;

ExempIo: Frames.htm

<HTML>
<HEAD>
<TITLE>Curso de HTML - Frames</TITLE>
</HEAD>
<FRAMESET COLS="20%,*" FRAMEBORDER="0" BORDER="0">
<FRAME NAME="Frame_1" SCROLLING="no" NORESIZE SRC="Pagina1.htm">
<FRAME NAME="Frame_2" SCROLLING="Auto" NORESIZE SRC="Pagina2.htm">
</FRAMESET>
</HTML>

ExempIo: Pagina1.htm

<HTML>
<HEAD>
<TITLE>Curso de HTML - Frames</TITLE>
</HEAD>
<BODY BGCOLOR="Gold">
<H2>Pgina 1</H2>
<A HREF="Pagina3.htm" TARGET="_top">Pgina 3 em _top</A><BR>
<A HREF="Pagina3.htm" TARGET="_blank">Pgina 3 em _blank</A><BR>
<A HREF="Pagina3.htm" TARGET="Frame_2">Pgina 3 em Frame_2</A><BR>
</BODY>
</HTML>

Teste no rowser.








0isponibilizada pelo professor Penan Venna 8arreto - T C0J8 e Cedida por Aleckssandro Tavares 200J
48
ApostiIa de HThL
8
8
.
.
D
D
U
U
T
T
P
P
D
D
S
S
C
C
D
D
h
h
A
A
N
N
0
0
D
D
S
S





Neste topico vamos abordar alguns outros comandos interessantes, porm sem aprofundar em nenhum
deles.


8 8. .1 1. . P PE EF FP PE ES SH H P PA AC CE E
So pginas normalmente sem links, que chamam outras depois de um determinado tempo, sem nenhuma
interferncia do usurio. Este refresh pode ser para a propria pgina.
Para fazer uma pgina com refresh basta colocar no documento a seguinte linha de comando:

Sintaxe:

hETA HTTP-EUIV="PEFPESH" CDNTENT="segundos; UPL=pagina">
Dnde:
segundos: numero de segundos para ocorrer o refresh.
pagina: pgina que deve ser carregada apos transcorrer o numero de segundos especificados.
ExempIo: Pefresh.htm
<HTML>
<HEAD>
<META HTTP-EQUIV="REFRESH" CONTENT="5; URL=Pagina2.htm">
<TITLE>Curso de HTML - Refresh</TITLE>
</HEAD>
<BODY>
<H1>Aguarde...<H1>
<H2>Aps 5 segundos ser carregada a Pagina2.htm</H2>
</BODY>
</HTML>

Teste no rowser.


8 8. .2 2. . A AU U0 0I ID D E E V V 0 0E ED D
7amos ver duas maneiras de colocar musicas em sua home page. A primeira com o TAC 8CS0UN0 que
so reconhecida pelo nternet Explorer. Para utilizar este TAC siga o exemplo :
CSDUN0 SPC="arquivo.mid">
0nde crquvo.md o arquivo de musica. Caso voc queira que a musica repitase, adicione o atributo
loo=njnte.




0isponibilizada pelo professor Penan Venna 8arreto - T C0J8 e Cedida por Aleckssandro Tavares 200J
49
ApostiIa de HThL
A segunda maneira com o TAC EV8E0 que, por ser reconhecido pelo nternet Explorer e Netscape,
recomendado. Para utilizlo, siga o exemplo :
EhE0 SPC="arquivo.mid">
recomendado usar arquivos midi por serem bem menores que os wavs.
Com o comando EV8E0 tambm possivel rodar videos, a sintaxe a mesma que para musicas.

ExempIo: huItimidia.htm

<HTML>
<HEAD>
<TITLE>Curso de HTML - Frames</TITLE>
</HEAD>
<BODY BGCOLOR="LightBlue">
<CENTER><H2>Pgina 2</H2></CENTER>
<BGSOUND SRC="laser.wav">
<!-- <EMBED SRC="testsnd.mid"> -->
<!-- <EMBED SRC="laser.wav"> -->
</BODY>
</HTML>

Teste no rowser.


8 8. .3 3. . T TE EX XT TD D P PD DL LA AN NT TE E
Com esta tag voc pode colocar uma faixa decorativa com um texto animado em sua pgina.
Para entendelo melhor d uma olhada no exemplo abaixo:
Sintaxe:
hAPUEE ALICN="posio" EHAVIDP="animao" CCDLDP="#PPCC" 0IPECTIDN="direo"
HEICHT="nX" WI0TH="nX" HSPACE="n" VSPACE="n" LDDP="quantide" SCPDLLAhDUNT="n"
SCPDLL0ELAY="n">TextolhAPUEE>
Dnde:
ALICN: Usado para alinhar a faixa, pode ser LEFT, PCHT, V00LE.
EHAVIDP: 0efine animao do texto, pode ser SCP0LL, SL0E ou ALTEPNATE, eu poderia falar o
que cada um desses tributos faz mas acho melhor voc mesmo testalos um a um.
CCDLDP: Como voc j deve saber define o fundo da faixa.
0IPECTIDN: 0ireo do texto, pode ser LEFT ou PCHT
HEICHTlWI0TH: 0efine o tamanho da faixa em pixels
LDDP: 0efine o numero de vezes que o texto passar pela faixa, o valor atribuido no exemplo foi
NFNTE que anima o texto um numero infinito de vezes.
HSPACElVSPACE: 0efine o tamanho das margens onde a faixa deve ser posicionada.




0isponibilizada pelo professor Penan Venna 8arreto - T C0J8 e Cedida por Aleckssandro Tavares 200J
50
ApostiIa de HThL
SCPDLLAhDUNTlSCPDLL0ELAY: 0efinem a velocidade do texto, o SCP0LLAV0UNT define a
quantidade de informao que ser movimentada, prefira os valores entre 2 e 5. 0 SCP0LL0ELAY
define a velocidade entre os intervalos entre cada desenho, um valor aconselhvel seria em torno
de 20.

ExempIo: Texto_PoIante.htm
<HTML>
<HEAD>
<TITLE>Curso de HTML - Texto Rolante</TITLE>
</HEAD>
<BODY BGCOLOR="LightBlue">
<CENTER><H2>Usando a tag MARQUEE</H2></CENTER>
<MARQUEE
ALIGN=middle
BEHAVIOR=scroll
BGCOLOR=Gold
DIRECTION=right
HEIGHT=5%
WIDTH=80%
HSPACE=10
VSPACE=10
LOOP=infinite
SCROLLAMOUNT=2
SCROLLDELAY=20>
Apostila de HTML
</MARQUEE>
<BR>
<MARQUEE
ALIGN=middle
BEHAVIOR=alternate
BGCOLOR=#FFFFFF
DIRECTION=right
HEIGHT=5%
WIDTH=80%
HSPACE=10
VSPACE=10
LOOP=infinite
SCROLLAMOUNT=2
SCROLLDELAY=15>
Curso de HTML
</MARQUEE>
</BODY>
</HTML>

Teste no rowser.











0isponibilizada pelo professor Penan Venna 8arreto - T C0J8 e Cedida por Aleckssandro Tavares 200J
51
ApostiIa de HThL

.
.
C
C
A
A
P
P
A
A
C
C
T
T
E
E
P
P
E
E
S
S
E
E
S
S
P
P
E
E
C
C
I
I
A
A
I
I
S
S



A EAacute; Eaacute; EAcirc
Eacirc; EAgrave; Eagrave;
EAring; Earing; EAtilde;
Eatilde; A EAuml; Eauml;
EAElig; Eaelig; E EEacute;
Eeacute EEcirc; Eecirc;
E EEgrave; Eegrave; E EEuml;
Eeuml; 0 EETH; Eeth;
Eacute; Eiacute Ecirc;
Eicirc; Egrave; Eigrave;
Euml; Eiuml; D E0acute;
Eoacute; D E0circ; Eocirc
D E0grave; Eograve; D E0slash;
Eoslash; D E0tilde; Eotilde;
D E0uml; o Eouml; EUacute;
Euacute; EUcirc; Eucirc;
U EUgrave; Eugrave; EUuml;
Euuml; ECcedil; Eccedil;
ENtilde; Entilde; Elt;
> Egt; Eamp; " Equot;
Ereg; Ecopy; Y EYacute;
Eyacute; ETH0PN; Ethorn;
6 Eszlig; E#186; E170;
E#185; E#178; E#179;
j E#1J1; | E#1J4; | E#1J5;
X E#1J7; s E#162; f E#16J;
E#171; E#177; E#187;
E#18J; E#188; E#189;
E#190; E#191; E#215;
E#247; E#161; E#164;












0isponibilizada pelo professor Penan Venna 8arreto - T C0J8 e Cedida por Aleckssandro Tavares 200J
52
ApostiIa de HThL
1
1
0
0
.
.
T
T
A
A

E
E
L
L
A
A
0
0
E
E
C
C
D
D
P
P
E
E
S
S

aliceblue #f0f8ff dodgerblue 1e90ff mistyrose ffe4e1
antiquewhite faebd7 firebrick b22222 moccasin ffe4b5
aquamarine 7fffd4 floralwhite fffaf0 navajowhite ffdead
azure f0ffff forestgreen 228b22 navy 000080
beige f5f5dc gainsboro dcdcdc oldlace fdf5e6
bisque ffe4c4 ghostwhite f8f8ff olivedrab 6b8e2J
black 000000 gold ffd700 orange ffa500
blanchedalmond ffebcd goldenrod daa520 orangered ff4500
blue 0000ff gray 7f7f7f orchid da70d6
blueviolet 8a2be2 green 008000 palegoldenrod eee8aa
brown a52a2a greenyellow adff2f palegreen 98fb98
burlywood deb887 honeydew f0fff0 paleturquoise afeeee
cadetblue 5f9ea0 hotpink ff69b4 palevioletred db709J
chartreuse 7fff00 indianred cd5c5c papayawhip ffefd5
chocolate d2691e ivory fffff0 peachpuff ffdab9
coral ff7f50 khaki f0e68c peru cd85Jf
cornflowerblue 6495ed lavender e6e6fa pink ffc0cb
cornsilk fff8dc lavenderblush fff0f5 plum dda0dd
cyan 00ffff lightseagreen #20b2aa powderblue b0e0e6
darkblue 00008b lightskyblue 87cefa purple 800080
darkcyan 008b8b lightslateblue 778899 red ff0000
darkgoldenrod b8860b lightslategray 888888 rosybrown bc8f8f
darkgray a9a9a9 lightsteelblue b0c4de royalblue 4169e1
darkgreen 006400 lightyellow ffffe0 saddlebrown 8b451J
darkkhaki bdb76b limegreen 00ff00 salmon fa8072
darkmagenta 8b008b linen faf0e6 sandybrown f4a460
darkolivegreen 556b2f magenta ff00ff seagreen 2e8b57
darkorange ff8c00 maroon 800000 seashell fff5ee
darkorchid 99J2cc mediumaquamarine 66cdaa sienna a0522d
darkred 8b0000 mediumblue 0000cd skyblue 87ceeb
darksalmon e9967a mediumorchid ba55dJ slateblue 6a5acd
darkseagreen 8fbc8f mediumpurple 9J70db slategray 708090
darkslateblue 48Jd8b mediumseagreen JcbJ71 snow fffafa
darkslategray 2f4f4f mediumslateblue 7b68ee springgreen 00ff7f
darkturquoise 00ced1 mediumspringgreen 00fa9a steelblue 4682b4
darkviolet 9400dJ mediumturquoise 48d1cc tan d2b48c
deeppink ff149J mediumvioletred c71585
deepskyblue 00bfff midnightblue 191970
dimgray 696969 mintcream f5fffa




0isponibilizada pelo professor Penan Venna 8arreto - T C0J8 e Cedida por Aleckssandro Tavares 200J
5J
ApostiIa de HThL
1
1
1
1
.
.
P
P
E
E
F
F
E
E
P
P

N
N
C
C
I
I
A
A
S
S

HThL 0inmico. Rcmclho, 1os Antno Alves. 8erkeley 8rasil, 1999.

A Arte Web. Ste Sobre HTML, HTML 0nmco e 0esyn. (www.aarteweb.com.br).

TutoriaI HThL. Tutorcl mcntdo pelc 0SP desde 15. (www.icmc.usp.br/manuals/HTVL).

Вам также может понравиться