Apostila Completa HTML

F
141 Pginas
Linguagem
HTML
Professora Ana Carolina Jaskulski
http://anacarol.blog.br
anamaxwell@gmail.com
Maro/2007
ndice
Introduo..................................................................................................................................9
1 Histria..................................................................................................................................10
1.1 Evoluo do HTML .........................................................................................................................................................10

1.2 Fundamentos da Linguagem HTML................................................................................................................................11
1.3 Os Nomes dos Arquivos .................................................................................................................................................11
1.4 A Lgica LIFO..................................................................................................................................................................11
1.5 O Arquivo HTML Bsico .................................................................................................................................................12
1.6 O Arquivo index.htm .......................................................................................................................................................12
2 Elementos Estruturais..........................................................................................................13
<html atributos> ... </html>....................................................................................................................................................13

version= "verso" ................................................................................................................................................................13
lan="idioma".........................................................................................................................................................................13
dir= "rtl| ltr" ..........................................................................................................................................................................13
<head atributos> ... </head>..................................................................................................................................................13

<body atributos> ... </body> .................................................................................................................................................14
background= "URL".............................................................................................................................................................14
bgcolor= "#rrggbb" ou "nome".............................................................................................................................................15
text= "#rrggbb" ou "nome"...................................................................................................................................................15
link= "#rrggbb" ou "nome"....................................................................................................................................................15
alink= "#rrggbb" ou "nome"..................................................................................................................................................15
vlink= "#rrggbb" ou "nome"..................................................................................................................................................16
hover= "#rrggbb" ou "nome"................................................................................................................................................16
bgproperties= "fixed"...........................................................................................................................................................16
leftmargin= "n".....................................................................................................................................................................16
topmargin= "n".....................................................................................................................................................................17
scroll= "yes | no | auto"........................................................................................................................................................17
3 Elementos do Cabealho.....................................................................................................18
<script >...</script > ..............................................................................................................................................................18

status= "mensagem"............................................................................................................................................................18
defaultstatus= "mensagem".................................................................................................................................................18
Alterando o Formato do Cursor ............................................................................................................................................18

Usando um Arquivo como Cursor..........................................................................................................................................19
cursor:url(...)........................................................................................................................................................................19
Anexando Objetos ao Cursor ...............................................................................................................................................20
4 Links e Imagens ..................................................................................................................22
Links Internos e Externos .....................................................................................................................................................22

href= "..."................................................................................................................................................................................22
name= "..."...........................................................................................................................................................................23
target="_blank", "nome" ou "_top".......................................................................................................................................24
title="descrio"...................................................................................................................................................................24
style=text-decoration=: " "......................................................................................................................................................25

Link Que Muda o Cursor........................................................................................................................................................25
onmouseover=" "...................................................................................................................................................................26
Fazendo um link oculto..........................................................................................................................................................26
onclick="alert('...')".................................................................................................................................................................27
mailto:....................................................................................................................................................................................27
Criando Links Para Download...............................................................................................................................................28
Abrir no Browser Arquivos de Outros Softwares ..................................................................................................................29
Configurando a Pgina Inicial - Pgina de Abertura .............................................................................................................29
5 Imagens................................................................................................................................31
<img atributos>......................................................................................................................................................................31
Prof Ana Carolina Jaskulski
anaschneider@gmail.com
3
src="..."................................................................................................................................................................................31
align="top | middle | bottom | left | right"..............................................................................................................................31
width="largura", height="altura"...........................................................................................................................................33
border="valor"......................................................................................................................................................................33
vspace="y" hspace="x"........................................................................................................................................................34
alt="texto".............................................................................................................................................................................35
onmouseover, onmouseout="imagem"...............................................................................................................................35
Criando um Diretrio de Imagens Reduzidas .......................................................................................................................35

Imagem de Baixa Resoluo ................................................................................................................................................36
lowsrc="arquivo"..................................................................................................................................................................36
6 Elementos Especiais............................................................................................................37
<applet> ... </applet>.............................................................................................................................................................37

code="classe Java".............................................................................................................................................................37
codebase="URL base".........................................................................................................................................................37
name="nome"......................................................................................................................................................................37
align, alt, hspace, vspace, height, width..............................................................................................................................37
<param atributos> .................................................................................................................................................................37

name="nome"......................................................................................................................................................................37
value="valor"........................................................................................................................................................................38
<font atributos> ... </font> .....................................................................................................................................................38

size="valor" ou "incremento"...............................................................................................................................................38
color="#rrggbb" ou "nome"..................................................................................................................................................39
face="nome de fonte"..........................................................................................................................................................40
<br atributos>........................................................................................................................................................................41
clear="left", "right", "all"........................................................................................................................................................41
<nobr> ... </nobr>..................................................................................................................................................................41

<wbr> .................................................................................................................................................................................
...41
<map atributos> ... </map > ..................................................................................................................................................42
name="nome_do_mapa".....................................................................................................................................................42
ismap...................................................................................................................................................................................42
usemap="#nome_do_mapa"...............................................................................................................................................42
<area atributos> ...................................................................................................................................................................43

shape="circ", "poly" ou "rect"...............................................................................................................................................43
coords="coordenadas"........................................................................................................................................................43
href="URL"...........................................................................................................................................................................43
nohref...................................................................................................................................................................................43
7 Bloqueando a Cpia da Pgina............................................................................................44

oncontextmenu="return false".............................................................................................................................................44
onselectstart="return false"..................................................................................................................................................44
 ..........................................................................................................................................................44
8 Formatao de textos e caracteres......................................................................................45
Elementos Lgicos................................................................................................................................................................45
<strong> ... </strong>............................................................................................................................................................45
<em> ... </em>......................................................................................................................................................................45
<cite> ... </cite>.....................................................................................................................................................................45
<var> ... </var>......................................................................................................................................................................45
<samp> ... </samp>...............................................................................................................................................................45
<kbd> ... </kbd>.....................................................................................................................................................................45
<dfn> ... </dfn>......................................................................................................................................................................45
<code> ... </code>.................................................................................................................................................................45
<pre> ... <pre> ......................................................................................................................................................................46
Elementos Fsicos.................................................................................................................................................................47
<b> ... </b>............................................................................................................................................................................47
<i> ... </i>...............................................................................................................................................................................47
<tt> ... </tt>............................................................................................................................................................................47
4
<u> ... </u>............................................................................................................................................................................47
<strike> ... </strike>...............................................................................................................................................................47
<del> ... </del>.......................................................................................................................................................................47
<s> ... </s>.............................................................................................................................................................................47
<sub> ... </sub>.....................................................................................................................................................................47
<sup> ... </sup>.....................................................................................................................................................................47
<small> ... </small>................................................................................................................................................................47
<big> ... </big>.......................................................................................................................................................................47
<blink> ... </blink>..................................................................................................................................................................48
align="top", "middle", "bottom" ............................................................................................................................................49
behavior =scroll, slide, alternate .........................................................................................................................................49
bgcolor="cor" ......................................................................................................................................................................50
direction=left, right, up, down...............................................................................................................................................50
height="nmero", %:............................................................................................................................................................50
hspace="nmero"................................................................................................................................................................50
loop="nmero", -1 a infinite.................................................................................................................................................50
scrollamount="nmero".......................................................................................................................................................50
scrolldelay="nmero"...........................................................................................................................................................50
vspace="nmero".................................................................................................................................................................50
width="nmero", %..............................................................................................................................................................50
9 Formataes.........................................................................................................................57
<H1, H2, ..., H6 atributos>.....................................................................................................................................................57

</H1, H2, ..., H6> ..................................................................................................................................................................57
align="center", "left", "right" ou "justify"...............................................................................................................................57
style="propriedades"............................................................................................................................................................57
<p atributos> ... </p> .............................................................................................................................................................58

align.....................................................................................................................................................................................58
style="propriedades" ...........................................................................................................................................................58
10 Linhas Horizontais .............................................................................................................60
<hr atributos> .......................................................................................................................................................................60

size="nmero"......................................................................................................................................................................60
width="nmero"....................................................................................................................................................................60
align="left", "center" ou "right".............................................................................................................................................61
noshade...............................................................................................................................................................................61
color="#rrggbb" ou "nome"..................................................................................................................................................61
11 Linhas Verticais..................................................................................................................63
Outros Separadores de Texto...............................................................................................................................................66
12 Texto Pr-Formatado ........................................................................................................68
<pre atributos> ... </pre> ......................................................................................................................................................68

width="...".............................................................................................................................................................................68
Espaamento Forado...........................................................................................................................................................68
<q atributo> ... </q> ..............................................................................................................................................................69
cite=URL..............................................................................................................................................................................69
<blockquote> ... </blockquote> .............................................................................................................................................69

<address> ... </address> ......................................................................................................................................................70
<div atributos> ... </div> .......................................................................................................................................................70
align="center", "left" ou "right".............................................................................................................................................70
style="propriedades"............................................................................................................................................................70
<center> ... </center> ...........................................................................................................................................................71

<acronym atributos> ... </acronym> .....................................................................................................................................71
title ......................................................................................................................................................................................71
13 Listas..................................................................................................................................72
No Ordenada.......................................................................................................................................................................72
<ul atributos> ... </ul> ...........................................................................................................................................................72
5
type= tipo"...........................................................................................................................................................................72
Ordenada..............................................................................................................................................................................
.72
<ol atributos> ... </ol> ...........................................................................................................................................................72
type="tipo"............................................................................................................................................................................72
start="valor".........................................................................................................................................................................73
<li atributos> ... </li> .............................................................................................................................................................73

<dl atributos> ... </dl> ...........................................................................................................................................................73
compact...............................................................................................................................................................................73
<dt atributos> ... </dt> ...........................................................................................................................................................74

<dd atributos> ... </dd> .........................................................................................................................................................74
Usando Figuras como Marcadores .......................................................................................................................................74
14 Tabelas...............................................................................................................................76
<table>...</table> ..................................................................................................................................................................76
<tr>...</tr> .............................................................................................................................................................................76
<td>...</td> ...........................................................................................................................................................................76
<table atributos> ... </table> .................................................................................................................................................76
border="valor"......................................................................................................................................................................77
cellpadding="valor"..............................................................................................................................................................78
width="valor" e height="valor"...........................................................................................................................................79
bgcolor="#rrggbb" ou "nome"..............................................................................................................................................79
background ="diretrio/nome do arquivo"...........................................................................................................................80
bordercolor ="#rrggbb" ou "nome".......................................................................................................................................80
bordercolordark ="#rrggbb" ou "nome"................................................................................................................................81
bordercolorlight ="#rrggbb" ou "nome"................................................................................................................................81
<tr atributos> ... </tr> ............................................................................................................................................................82

align="left, right" ou "center"................................................................................................................................................82
valign="baseline, bottom, top" ou "middle"..........................................................................................................................83
bgcolor="cor".......................................................................................................................................................................83
bordercolor="cor".................................................................................................................................................................84
bordercolordark="cor"..........................................................................................................................................................84
bordercolorlight="cor"..........................................................................................................................................................84
char="caracter"....................................................................................................................................................................84
charoff="nmero".................................................................................................................................................................84
table data <td atributos> ... </td> ........................................................................................................................................85
rowspan=nmero.................................................................................................................................................................85
colspan=nmero..................................................................................................................................................................85
align=left, right ou center ....................................................................................................................................................86
valign=baseline, bottom, top ou middle ..............................................................................................................................87
nowrap.................................................................................................................................................................................87
width=valor...........................................................................................................................................................................88
bgcolor="#RRGGBB"...........................................................................................................................................................89
background="diretrio/nome do arquivo"............................................................................................................................89
bordercolor...........................................................................................................................................................................89
bordercolordark e bordercolorlight.......................................................................................................................................90
<th atributos> ... </th> ...........................................................................................................................................................90

<caption atributos> </caption> .............................................................................................................................................91
align=top, (default) ou bottom..............................................................................................................................................91
Formatando grandes tabelas ................................................................................................................................................91

<thead>...</thead> ...............................................................................................................................................................91
<tbody>...</tbody> ................................................................................................................................................................92
<tfoot>...</tfoot> ...................................................................................................................................................................92
Usando Tabelas para criar Colunas de Texto.......................................................................................................................93
Imagens, Cores e Backgrounds em Tabelas.........................................................................................................................96
Fazendo Grficos de Estatsticas........................................................................................................................................100
Tabela com Imagens Linkadas............................................................................................................................................103
15 Multimdia ........................................................................................................................106
<bgsound atributo> .............................................................................................................................................................106

src="URL"..........................................................................................................................................................................106
loop="nmero | infinite"......................................................................................................................................................106
meta...................................................................................................................................................................................
..106
16 Vdeos com img................................................................................................................107

align= ""..............................................................................................................................................................................107
alt="texto"...........................................................................................................................................................................107
border="nmero"................................................................................................................................................................107
controls..............................................................................................................................................................................107
dynsrc="URL"....................................................................................................................................................................107
height="nmero"................................................................................................................................................................107
hspace="nmero"..............................................................................................................................................................107
loop="nmero ou infinite"...................................................................................................................................................108
src="endereo"..................................................................................................................................................................108
start="fileopen / mouseover"..............................................................................................................................................108
vspace="nmero"...............................................................................................................................................................108
width="nmero"..................................................................................................................................................................108
<embed atributos> ... </embed> .........................................................................................................................................108

align="left", "right", "top", "bottom" ....................................................................................................................................108
border="nmero"................................................................................................................................................................108
frameborder="no"...............................................................................................................................................................108
height="nmero"................................................................................................................................................................108
hidden="true", "false".........................................................................................................................................................108
hspace="nmero"..............................................................................................................................................................109
name="texto".....................................................................................................................................................................109
pallete="foreground", "background"...................................................................................................................................109
pluginspace="endereo"....................................................................................................................................................109
vspace="nmero"...............................................................................................................................................................109
type="mimetype"................................................................................................................................................................109
width="nmero"..................................................................................................................................................................109
<nobed> ... </nobed> .........................................................................................................................................................109
17 Posicionamento de Objetos - div.....................................................................................110

left (esquerdo) e top (topo)................................................................................................................................................110
width (largura) e height (altura).........................................................................................................................................110
position...............................................................................................................................................................................110
z-index...............................................................................................................................................................................113
overflow..............................................................................................................................................................................113
18 Filtros................................................................................................................................115
alpha.............................................................................................................................................................................
.......115
opacity ................................................................................................................................................................................115
finishopacity ......................................................................................................................................................................115
style ...................................................................................................................................................................................115
startx .................................................................................................................................................................................115
starty .................................................................................................................................................................................115
finishx ................................................................................................................................................................................115
finishx ................................................................................................................................................................................115
blur......................................................................................................................................................................................
.117
add ....................................................................................................................................................................................117
direction ............................................................................................................................................................................117
strength .............................................................................................................................................................................117
chroma .............................................................................................................................................................................
...119
color ..................................................................................................................................................................................119
dropshadow ........................................................................................................................................................................119
color...................................................................................................................................................................................119
offx ....................................................................................................................................................................................119
7
offy ....................................................................................................................................................................................119
positive ..............................................................................................................................................................................120
fliph e flipv............................................................................................................................................................................120
glow ....................................................................................................................................................................................120
color ..................................................................................................................................................................................121
strength .............................................................................................................................................................................121
gray....................................................................................................................................................................................
..121
invert............................................................................................................................................................................
........122
motion blur ..........................................................................................................................................................................122
strenght .............................................................................................................................................................................123
direction ............................................................................................................................................................................123
progid:DXimagetransform.Microsoft .................................................................................................................................123
wave ...................................................................................................................................................................................124
add ....................................................................................................................................................................................124
freq ....................................................................................................................................................................................124
lightstrength ......................................................................................................................................................................124
phase ................................................................................................................................................................................124
strength .............................................................................................................................................................................124
xray .............................................................................................................................................................................
........125
19 Frames .............................................................................................................................126
<frameset atributos> ... </frameset> ...................................................................................................................................126

cols="x, y, ...".....................................................................................................................................................................126
rows="x, y, ..."....................................................................................................................................................................126
frameborder="1 / 0"............................................................................................................................................................126
Frames verticais .................................................................................................................................................................126

Frames Horizontais..............................................................................................................................................................127
Frames Combinados...........................................................................................................................................................127
framespacing="valor".........................................................................................................................................................128
<frame atributos> ................................................................................................................................................................128

align="top, middle, bottom, left, right"................................................................................................................................128
frameborder="1 / 0" ...........................................................................................................................................................128
src="URL"..........................................................................................................................................................................128
name="rtulo"....................................................................................................................................................................129
marginheight="nmero".....................................................................................................................................................129
marginwidth="nmero".......................................................................................................................................................129
noresize ............................................................................................................................................................................129
scrolling="yes | no"............................................................................................................................................................129
Montando um Diretrio com frames ...................................................................................................................................130

<iframe> ... </iframe > ........................................................................................................................................................132
src="URL"..........................................................................................................................................................................132
name="texto".....................................................................................................................................................................132
width="nmero"..................................................................................................................................................................132
height="nmero"................................................................................................................................................................133
align="top | middle | bottom | left | right"............................................................................................................................133
Frameborder="1 | 0"..........................................................................................................................................................133
margnwidth="pixels"..........................................................................................................................................................133
marginheight="pixels"........................................................................................................................................................133
scrolling="yes | no | auto"..................................................................................................................................................133
20 Botes...............................................................................................................................135
Fechar a janela....................................................................................................................................................................135
Imprimir a pgina.................................................................................................................................................................135
"Voltar" e "Avanar".............................................................................................................................................................136
Exibir Cdigo Fonte.............................................................................................................................................................137
Botes Coloridos ................................................................................................................................................................137
Botes com Links ...............................................................................................................................................................137
Botes Texturizados............................................................................................................................................................139
8
Tamanhos e Formatos ........................................................................................................................................................140
Botes com Imagens...........................................................................................................................................................141
Introduo
Aqui neste material voc encontrar muitas informaes sobre HTML.
um apanhado de materiais que encontrei (outros que ganhei) e alguns exemplos que visam ajudar no seu aprendizado.
Esta apostila no substitui a aula. Tampouco voc precisa ter ela durante as aulas- ela um complemento.
Nem todos os contedos abordados aqui ns veremos em sala de aula... porque no h tempo para tudo.
Esta apostila um Guia.
Ela no vai te ensinar CSS. Ela no vai te ensinar tudo de HTML. Nem DHTML. Nem Javascript. Nem Ajax.
A editora Alta Books lanou a coleo Use a cabea. com livros MUITO divertidos, muito completos e muito bons de ler. So
escritos com tcnicas que ajudam o leitor decorar os comandos atravs de exemplos bem humorados e figuras divertidas.
No site da editora eles disponibilizaram parte dos livros em formato PDF. D uma olhada. muito divertido!.
Use a Cabea - HTML com CSS
Use a Cabea AJAX
No site http://anacarol.com.br eu vou sempre colocar mais informaes e outras fontes de pesquisa - de vrios assuntos.
Essa apostila no visa lucros.... voc no deve pagar por ela.
Bons estudos!
10
1 Histria
A internet nasceu em 1969, nos Estados unidos. Interligava originalmente laboratrios de pesquisa e se chamava ARPANET
(ARPA: Advanced Research Projects Agency). Era uma rede do Departamento de Defesa norte-americano. Era o auge da Guerra Fria, e
os cientistas queriam uma rede que continuasse de p em caso de um bombardeio. Surgiu ento o conceito central da internet: uma rede
em que todos os pontos se equivalem e no h um comando central. Assim, se B deixa de funcionar, A e C continuam podendo se
comunicar.
O nome internet" surgiu bem mais tarde, quando a tecnologia da ARPANET passou a ser usada para conectar universidades e
laboratrios, primeiro nos EUA e depois em outros pases. Por isso que no h um nico lugar que "governa" a internet. Hoje ela um
conjunto de milhares de redes no mundo inteiro. O que essas redes tm em comum o protocolo TCP/IP (Transmission Control
Protocol/Internet Protocol), que permite que elas se comuniquem umas com as outras.
Ento, a internet pode ser definida como: uma rede de redes baseadas no protocolo TCP/IP; uma comunidade de pessoas que usam
e desenvolvem essas redes; uma coleo de recursos que podem ser alcanados atravs destas redes.
Durante cerca de duas dcadas, a internet ficou restrita ao ambiente acadmico e cientfico. Em 87 pela primeira vez foi liberado
seu uso comercial nos EUA.
A "antiga" internet, antes da Web, exigia do usurio disposio para aprender comandos em Unix (uma linguagem de
programao) bastante complicados, e enfrentar um ambiente pouco amigvel (unicamente em texto). A Web fez pela internet o que o
Windows fez pelo computador pessoal tornou acessvel.
O poder da WWW (World Wide Web - Rede de Alcance Mundial), reside em sua capacidade em associar uma determinada parte
de um documento eletrnico a outro computador e a outro documento milhares de quilmetros afastado. Essa conexo entre
documentos possvel graas utilizao do protocolo de comunicao chamado HTTP (Hypertext Transfer Protocol - Protocolo de
transferncia de Hipertexto) e da linguagem HTML (Hypertext Markup Language Linguagem de Desenvolvimento de Hipertexto).
O HTML nasceu em 1991 no CERN (European Council for Nuclear Research Conselho Europeu de Pesquisas Nucleares), na
sua.
Seu criador, o ingls Tim Berners-Lee de 44 anos, a concebeu unicamente como uma linguagem que serviria para interligar
computadores do laboratrio e outras instituies de pesquisa e exibir documentos cientficos de forma simples e fcil de acessar.
Um desenvolvimento fundamental aconteceu em julho de 1992 com a liberao da biblioteca de desenvolvimento para WWW. Foi
essa biblioteca que deu origem construo de vrios browsers WWW e servidores que tornaram a WEB vivel.
Um desses browsers foi o Mosaic, o primeiro browser multiplataforma que explorava completamente a capacidade de hipermdia
da WEB. Desenvolvido por Marc Andreson, ento do NCSA, o Mosaic foi que iniciou o crescimento explosivo da WEB. No outono
1993 tornou-se disponvel a milhes de usurios, com a liberao das verses para Mac e Windows.
Se por um lado novos browsers tm superado os recursos do Mosaic, por outro lado foi esse programa que se tornou sinnimo da
WEB.
Cada verso de HTML tem tentado refletir todo o consenso entre a indstria de software para que o investimento feito pelos
autores de pginas no seja desperdiado e que os seus documentos no deixem de se poder ler num curto perodo de tempo. O HTML
tem sido desenvolvido com a viso que todos os equipamentos fossem capazes de usar a informao da Web, computadores com
monitores de diversas resolues e vrios nmeros de cores, equipamentos para input e output de voz, computadores com alta e baixa
largura de freqncia e muito mais. No desperdiando o tempo (e custo) de servio de um Webmaster que faz um site e logo-logo esse
site deixa de funcionar - para isso mantido o padro.
Com o HTML (e a facilidade dele), a internet se tornou uma imensa biblioteca, onde h de tudo. Tornou-se uma grande arena de
conhecimento e diverso
O HTML 4.0 estende com mecanismos para style sheets (CSS), scripting, frames (janelas), embedding objects, melhor suporte
para texto com direo varivel (esquerda, direita, e ambos), tabelas mais visualizveis, melhorias nos forms, melhor acessibilidade para
pessoas com incapacidades.
1.1 Evoluo do HTML

1992 - Primeira apario do HTML.
1993 - HTML+ Algumas definies da aparncia, tabelas, formulrios.
1994 - HTML v2.0 Padronizao para as caractersticas principais.
1994 - HTML v3.0 uma extenso do HTML+ entendido como um rascunho de padro.
1995 - HTML v3.2 Netscape e Internet Explorer definem seus prprios padres baseados nas implementaes correntes.
1995 - JavaScript criada por Brendan Eich da Netscape como uma extenso do HTML para o browser Navigator v2.0. JavaScript
uma linguagem de roteiro (script) baseada em objetos e permite que sejam manipulados atravs de eventos dinmicos que faltavam ao
HTML: abertura de janelas de avisos etc.
1996 - CSS1 em dezembro deste ano apresentada pela primeira vez a Folha de Estilo, criada para complementar a linguagem
HTML. Possua uma formatao simples e cerca de 60 propriedades.
1997 - HTML v4.0 So lanados os browsers Netscape v4.0 (agosto) e internet Explorer v4.0 (outubro) que apresentaram um
conjunto de tecnologias (CSS, JavaScript/VBScript e DOM) que juntas disponibilizaram diversos recursos tornando o HTML dinmico.
Surge ento o DHTML.
1998 - CSS2 em maio lanado a segunda verso da Folha de Estilo que, alm de incluir todas as propriedades do CSS1 ainda
11
apresenta por volta de 70 novas propriedades.
1999 - HTML v4.01 Alguma modificaes da verso anterior.
2000 - XHTML v1.0 criado e consiste de uma verso XML do HTML v4.01.
1.2 Fundamentos da Linguagem HTML

O Edit foi um dos primeiros (e mais simples) editores de texto. Caracteres ASCii puro, sem formatao alguma (mudana de cor
de fonte, tabulaes nem pargrafos), mas depois vieram os WordStar, OpenAcces, Carta Certa, Word. Cada um trazia suas inovaes
(suas possibilidades), que infelizmente no eram compatveis entre si, ou seja: uma arquivo do Word no abria no Carta Certa.
A incompatibilidade existia porque cada programa adicionava ao texto cdigos prprios (para o controle dele e que os outros no
conheciam), mas com o passar do tempo foram-se criando formas de transformar de um padro para outro: de Word para Carta Certa, por
exemplo.
Para evitar que ocorram incompatibilidades como esta, na internet foi desenvolvido o padro HTML.
O HTML uma linguagem de formatao criada para estruturar a pgina que ser exibida na internet (no browser). Seus arquivos
so de texto puro com cdigos de marcao (as Tags). Cada Tag um comando que ser interpretado pelo browser (por exemplo, a tag
<b> o comando para transformar o texto em negrito).
Ser em texto puro significa que os arquivos em HTML no contm nada alm de letras, nmeros, sinais de pontuao e caracteres
em geral que podem ser impressos. um arquivo HTML tambm conhecido como pgina Web ou Home Page e so identificados com a
extenso .htm ou .html, exemplo: index.htm.
Os cdigos de marcao de uma pgina HTML tambm so conhecidos como cdigo fonte e para acess-los basta posicionar o
ponteiro do mouse sobre a pgina, clicar no boto direito e selecionar a opo [Exibir cdigo fonte]. Muitos Webmasters no gostam
que os usurios da internet fiquem xeretando no cdigo fonte de sua home page porque l est toda a sua criatividade, truques de
macetes de elaborao da pgina (a questo de copyright ou direitos autorais), por isso comum encontrarmos sites com bloqueio deste
recurso
A grande vantagem da linguagem HTML que, por ela ser muito simples, no necessita de conhecimentos prvios de
programao, por isso que muitas vezes escolhida como a primeira Linguagem de Programao a ser aprendida por uma pessoa. Outro
fator o de no precisar de um editor especfico, qualquer um serve (o Bloco de Notas e o Vi, por serem texto puro, so excelente para
isso), mas existem editores exclusivamente HTML, os WYSiWYG (What You See is What You Get - O que voc v o que voc tem).
Estas ferramentas foram desenvolvidas para facilitar a vida do Webmaster, porm, como tudo na Rede est em fase de transio,
estes editores ainda deixam muito a desejar tanto na apresentao de novos recursos do HTML (que normalmente levam tempo para
serem incorporados aos editores), como tambm na possibilidade de acontecerem incompatibilidades do editor para com a linguagem.
Quando isso acontece o Webmaster (que conhece a Linguagem HTML), simplesmente entra no cdigo fonte e "faz na mo", pois no
tem como o browser no cumprir uma ordem direta. Entrar no cdigo fonte para suprimir as redundncias e os caracteres de controle dos
editores ("sujeiras do cdigo") um grande artifcio, principalmente para diminuir o tamanho do arquivo.
Sabendo HTML se ganha independncia para criar, usando a criatividade, e sem depender dos recursos do Editor HTML que se
estaria usando.
1.3 Os Nomes dos Arquivos

HTML no faz distino entre letras maisculas (caixa alta) e letras minsculas (caixa baixa). Tanto faz escrever <font> como
<FONT>. Porm o servidor onde a pgina estiver hospedada (ou o sistema operacional, caso a pgina esteja no seu prprio computador)
diferencia letras minsculas e maisculas, e se criar um link para um arquivo chamado apostila.htm e ele estiver com o nome
Apostila.htm, o servidor simplesmente no ir encontr-lo. por isso que muitas vezes o servidor retorna com uma mensagem de
"Arquivo no encontrado".
Os nomes no devem conter mais que 32 caracteres nem espaos em branco (use o smbolo _ para substituir o espao em branco),
assim, ao invs de nomear o arquivo "pagina um.html", nomeie como "pagina_um.html"
O ponto final deve ser usado uma s vez para separar a extenso (de trs letras) que classifica o arquivo. No use pagina..html, use
pagina.html para o nome do arquivo.
Os nomes de arquivos no devem conter caracteres, tais como: acentos, cedilha, pontuaes, sinais de maior e menor, pipe, trema,
e comercial, asterisco, parnteses, chaves etc. use somente nmeros, letras e underline (o _)
1.4 A Lgica LIFO

O HTML uma Linguagem de Marcao., onde se insere marcaes (tags), na forma de elementos HTML no contedo da
informao que ser publicada. As marcaes informam ao browser como formatar o contedo (em Cabealhos, Pargrafos, Listas e
Tabelas) e onde inserir links em hipertexto e imagens e outros Objetos.
As tags so delimitadas entre os sinais de menor "<" e maior ">". A maioria das tags funciona em dois tempos, ou seja, tem que se
especificar onde comea e onde termina, por exemplo: <tag>texto</tag>, onde o sinal "/" significa o fim da atuao da tag.
Nunca se deve 'embaralhar' as tags, elas podem vir uma dentro da outra, porm a que comeou primeiro tem que necessariamente
terminar por ltimo, assim:
12
<tag1> <tag2> <tag3> texto </tag3> </tag2> </tag1>
Nunca misture a seqncia, como por exemplo:

<tag1> <tag2> <tag3>
texto </tag2> </tag1> </tag3>
isso segue a lgica LIFO (Last in, First Out - O ltimo aberto deve ser o primeiro a ser fechado).
Nem todas as tags necessitam ser terminadas. A tag que significa linha em branco no necessita de fim, assim como tambm a tag
de barra horizontal.
Como no so todas as tags que so relacionadas com textos, a tag que significa imagem no necessita de terminao e nem se
relaciona necessariamente com texto.
Uma tag formada por comando, atributo e valor.
Os atributos com seus valores modificam os resultados default dos comandos.
1.5 O Arquivo HTML Bsico

O documento HTML normalmente possui extenso .htm ou .html. Existe uma tag que identifica o documento como sendo HTML,
a <html>, que necessariamente a primeira que aparece no texto, e sua terminao </html> obviamente a ltima. em seguida definese o cabealho com <head> e </head>
Dentro do cabealho podem existir diversas outras tags especficas e scripts em diversas linguagens, porm o que sempre existe a
definio do ttulo, com <title> e </title>. Este ttulo o que ir aparecer na barra superior da janela do browser, junto com o nome do
mesmo. Fora do cabealho, porm dentro das tags <html>, existe o "corpo" definido por <body> e </body> e aonde vai o "corpo" do
site.
Estas so as tags bsicas de todo arquivo html.
<html>
<head>
<title>
</title>
</head>
<body>
</body>
</html>
<!
<!
<!
<!
<!
<!
<!
<!
incio do cdigo html -->

cabealho -->
ttulo -->
final do ttulo -->
final do cabealho -->
corpo do site -->
final do corpo do site -->
final do cdigo html-->
1.6 O Arquivo index.htm

Normalmente, o arquivo index.htm o arquivo default dentro de um diretrio. Quando indicamos um endereo (link) e no
especificamos um arquivo dentro de um diretrio, o browser procura pelo arquivo index.html. Se esse arquivo no existir, o browser
apresentar uma listagem dos arquivos contidos naquele diretrio, o que pode no ser nosso desejo.
Por exemplo, o endereo de um site pode ser http://www.meusite.com.br/meu_diretorio/index.html.
Se digitar no browser somente http://www.meusite.com.br/meu_diretorio/, o browser procurar naquele servidor
("meusite.com.br") o arquivo index.html dentro do diretrio "meu_diretorio" mesmo que eu no tenha especificado isso quando eu
digitei o endereo. Porm, se o arquivo index.html tiver sido deletado ou for inexistente, o browser no abrir nenhum outro arquivo,
mas exibir uma lista de todos os arquivos e diretrios contidos no diretrio "meu_diretorio".
13
2 Elementos
Estruturais
<html atributos> ... </html>
o comando de abertura e fechamento do documento HTML. Todos os demais comandos devem ser envolvidos por ele.
version= "verso"
informa a verso do HTML usado.
lan="idioma"
<html lang="en-us">
O corpo do arquivo...
</html>
No exemplo acima estou declarando que o arquivo HTML est no idioma ingls Americano. Os idiomas diferem de muitas
maneiras quanto aparncia impressa: tipos de caracteres, fluxo direcional e uma infinidade de peculiaridades principalmente nos
idiomas orientais.
dir= "rtl| ltr"

Determina a direo do fluxo do texto: RTL da direita para a esquerda, Ltr da esquerda para a direita.
<html lang="HE" Dire="RTL">
Essa uma pgina formatada para o Hebraico.
</html>
Visualizao: rtl (observe que a barra de rolagem vertical passou para o lado esquerdo):
Visualizao dir.= "Ltr"
<head atributos> ... </head>

14
Contm o cabealho do documento HTML tambm conhecido como Meta Tag (informaes sobre o documento para classificao
e indexao dele). Elas no aparecem na pgina visualizada.
<html>
<head>
<title>
Apostila de HTML
</title>
<link rev=made href="mailto:anaschneider@gmail.com">
<meta name= "author" content= "Ana Carolina Schneider da Silva" >
<meta name= "keywords" content= "HTML, WWW, tutorial, comandos, programao" >
<meta name= "description" content= "Apostila de HTML com comandos".
bsicos e avanados ">".
<meta name="language" content="Portuguese">
<meta name="robots" content="all, follow">
</head>
<body>
Este é um exemplo de corpo do site para mostrar que só o que
está aqui vai aparecer para nosso caro internauta!!
</body>
</html>
Visualizao (observe que as informaes esto somente no cdigo):
<body atributos> ... </body>

Contm o corpo do documento HTML, a parte que aparece na rea de visualizao do browser. Os atributos alteram a aparncia.
background= "URL"
Contm a URL (localizao) da imagem que cobrir o fundo da rea de visualizao do documento se repetindo para cobrir toda a
tela (tiling ou lado-a-lado).
Ateno para cores fortes: isso no poder impedir a leitura do texto.
<html>
<body background="imagens\folha.jpg">
Esse é o body - o conteúdo do seu site.... e as figuras aqui
atrás são o background e não aparecerão quando o internauta
imprimir o site;
</body>
</html>
Visualizao:
15
bgcolor= "#rrggbb" ou "nome"

indica um nmero em hexadecimal ou um nome que define a cor de fundo. O nome uma das 16 cores universalmente conhecidas
(padro VGA do Windows): aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white (branco),
yellow.
text= "#rrggbb" ou "nome"

Cor de texto. O padro preto (text= "#000000").
<html>
<body text="lime">
isso é um texto na cor lime... cuidado! Algumas cores podem *ofuscar* o
internauta!!!! - esta que estou usando, por exemplo ;)
</body>
</html>
Visualizao (cuidado com o uso inadequado das cores!!):
link= "#rrggbb" ou "nome"

Cor de texto do link, sendo que o padro azul (link= "#0000FF").
<html>
<body link="red">
Essa é uma (outra) excelente revista para interessados em banco de
dados (e é grátis!):
<a href= "http://www.oracle.com/profitmagazine" >
PROFIT
</a>
(ah! esse link (por padrão) estaria em azul)
</body>
</html>
Visualizao: cor do link em vermelho:
alink= "#rrggbb" ou "nome"

Cor do link j visitado (na hora que clico, muda a cor), o padro o vermelho (alink= "#FF0000").
16
vlink= "#rrggbb" ou "nome"

Configura a cor do link ativo, sendo que a cor padro vermelho prpura (vlink= "#800080").
hover= "#rrggbb" ou "nome"

Cor do link quando o cursor estiver sobre ele.
bgproperties= "fixed".
Mantm o papel de parede fixo no fundo da tela, impedindo que o ele role junto com o contedo da pgina.
<html>
<body bgproperties="fixed" background="imagens\sky03.jpg">
Observe que mesmo movimentando AS BARRAS de rolagem (tanto a vertical quanto a
horizontal) a figura de fundo permanece fixa - ela não se move junto com o texto
*************************
****************
****************************************
*****************************
*****************************************
************************** *********************
</body>
</html>
Visualizao:
Visualizao (depois de mover a barra):
leftmargin= "n"
Define o tamanho, em pixels, do espao entre o incio do texto e a borda esquerda da rea de visualizao do browser.
<body leftmargin= "10" >
Observe o espao entre a margem e o incio desse texto
</body>
---
LEFTMARGIN=10
Visualizao com leftmargin = 10:
17
Visualizao com leftmargin = 100
topmargin= "n".
Define o tamanho, em pixels, do espao entre o incio do texto e a borda superior da rea de visualizao do browser.
<body topmargin= "50" >
Observe o espao entre o incio desse texto e a parte SUPERIOR--- TOPMARGiN=50
</body>
Visualizao:
scroll= "yes | no | auto"

Este atributo define se a pgina ter as barras de rolagens horizontal e vertical. Onde "yes" Sempre apresentar as barras mesmo
que a pgina no precise, "no" NUNCA apresentar as barras mesmo que a pgina precise e "auto" apresentar as barras
automaticamente caso a pgina venha a precisar delas. No exemplo a seguir configurei SCRolL= "no", isso , ele ir apresentar uma
pgina sem as barras.
18
3 Elementos do
Cabealho
<script >...</script >
status= "mensagem"
Exibe uma mensagem que aparece na barra de status (barrinha no canto inferior esquerdo). Pode-se alterar essa mensagem
determinando entre os parmetros <script> status= "..." </script> a mensagem que quer que aparea. Pode-se acentuar normalmente!!!
<html>
<body>
<script>
status= "isso um exemplo de mensagem na barra de status"
</script>
</body>
</html>
Visualizao:
defaultstatus= "mensagem"
Mostra uma mensagem quando nenhuma outra est sendo exibida.
Alterando o Formato do Cursor

Basta acrescentar o parmetro style= "cursor:tipo_do_cursor". ao comando hrEF, e quando colocar o mouse sobre o link, o formato
do cursor se modificar.
19
Usando um Arquivo como Cursor

cursor:url(...)
20
especifica um arquivo.ani a escolher. Por exemplo com o arquivo meu_cursor.ani.
<a href= "meu_link.htm" style= "cursor:url (meu_cursor.ani)" >
Aqui esta um link
</a>
Para mudar definitivamente um cursor de uma pgina basta usar a classe de estilo inserindo body {cursor:url( ... )} entre as tags
<head> ... </head>. Este cursor s ir funcionar nesta homepage, de modos que, quando voc clicar num link ou fechar a pgina ele
voltar ao cursor normal configurado em seu sistema operacional. No exemplo abaixo, o cursor default da pgina (quando no estiver
sobre um outro link definido) ser o cursor progress.
<html>
<head>
<style type="text/css">
body {cursor:progress}
</style>
</head>
<body>
<a href="historia.htm" >
Historia
</a>
</body>
</html>
Anexando Objetos ao Cursor

Deve-se tomar cuidado ao usar este tipo de efeito porque ele pode acabar irritando o internauta que ao movimentar o cursor tem
esse objeto atrapalhando ou distraindo sua ateno.
Para vincular um arquivo de imagem ao cursor, de modo que essa imagem o acompanhar, fazemos assim:
Entre <head> e </head> colocamos o cdigo javascript a seguir:
<head>
<script type="text/javascript">
function cursor(){
trail.style.visibility="visible"
trail.style.position="absolute"
trail.style.left=event.clientX+10
trail.style.top=event.clienty
}
</script>
</head>
Depois colocamos o parmetro onmousemove= "cursor()" na tag <body>, ficando assim

<body onmousemove= "cursor ()" > ... </body>
Por ltimo colocamos dentro do corpo do documento (entre <body> e </body>) a linha que identificar a figura que se
movimentar com o cursor e seu tamanho.
<img id="trail"
height="64">
style="visibility:hidden"
src="imagens\minha_imagem.gif"
width="64"
Todo o cdigo ficar assim:

<html>
<head>
<script type="text/javascript">
function cursor(){
trail.style.visibility="visible"
trail.style.position="absolute"
trail.style.left=event.clientX+10
trail.style.top=event.clienty
}
</script>
21
</head>
<body onmousemove="cursor()">
<img id="trail" style="visibility:hidden"
src="imagens/minha_imagem.gif" width="64" height="64">
</body>
</html>
Visualizao:
22
4 Links e Imagens
O termo hypertext definido por "texto que tem link para outros textos".Sendo assim o que caracteriza a estrutura HTML a sua
propriedade de se "ligar indefinidamente a outros documentos".
O link um canal, uma porta de conexo com outra pgina, possibilitando a interao de um site com outros sites existentes.
Os links podem ser relativos, absolutos, internos e externos
Link (ou hiperlink) um termo ingls que quer dizer "ligao" e sua funo ligar dois documentos.
O link relativo no especifica o caminho completo do endereo do arquivo, j o link absoluto sim.
Por exemplo aqui est o link relativo que direciona para o arquivo de exemplo_de_link.html, que est no mesmo diretrio e na
mesma mquina do arquivo que o chamar.
<html>
<body>
<a href="exemplo_de_link.html">
isso aponta para o arquivo exemplo_de_link.html
</a>
</body>
</html>
Porm o seu endereo absoluto seria:

<html>
<body>
<a href="C:\ana\exemplo_de_link.html">
isso aponta para o arquivo exemplo_de_link.html
</a>
</body>
</html>
Mas como o arquivo exemplo_de_link.html, onde quero chegar, est no mesmo diretrio do site que est chamando-lhe, no
precisa todo o trabalho de digitao, apenas o nome do arquivo j basta. O link absoluto usado para localizar arquivo que est num
servidor (ou diretrio ou mquina) diferente, por isso seu endereo tem que estar completo.
Links Internos e Externos

O Link interno aquele que liga dois pontos em uma mesma homepage.
O Link Externo aquele que cria uma ligao entre homepages diferentes em locais diferentes e, por isso, um link absoluto (tem
que possuir o endereo completo).
<a atributos> ... </a>
uma ncora um ponto de referncia que marca o destino de um link interno.

As ncoras criam pontos de ligao entre todos os tpicos abordados, organizando sua estrutura e com isso otimizando sua
navegao. Por exemplo, quando se cria um artigo com ndice e todo o seu contedo est na mesma pgina, podemos fazer com que
cada ponto do ndice seja um link para o pargrafo exato (da mesma pgina) ao qual esse item diz respeito.
Para definir um link, utilizaremos o par de tags <a>.. </a>, cujo "A" vem de "Anchor" ("ncora" em ingls).
Quando numa pgina necessito colocar um link para uma palavra (ou pargrafo) no final dessa pgina, faz-se necessrio colocar
uma marcao (uma ncora) nesse destino para que o link o encontre.
Portanto, um link possui dois comandos distintos: (<a href= "..." >, comando de partida e <a NAME= "#..." > comando de
chegada) que possibilitam: saltos para pontos diferentes em uma mesma pgina ou saltos para pontos de uma pgina diferente mas que se
encontra no mesmo diretrio da pgina que a chama.
href= "..."
De Hypertext REFerence ou referncia de hipertexto. informa a URL, que pode ser um documento HTML, uma imagem ou outro
tipo de recurso.
Esse um exemplo de link para outro site de HTML:
<html>
<body>
23
<a href="http://www.icmsc.sc.usp.br/manuals/html/index.html">
Tutorial HTML ICMC-USP
</a>
</body>
</html>
Visualizao:
name= "..."
Este atributo estabelece o ponto de chegada (destino) nos saltos interligados do link.
Esse exemplo coloca a frase (o link) que quando clicar o levar para onde coloquei a ncora (entre <a name= "..." > e
</a>).
<html>
<body>
<a href="#imgreduzidas">
Clique aqui e chegue ao destino
</a>
<br><br>
isso seria um texto muito grande <br> isso seria um texto muito grande<br>isso
seria um texto muito grande<br>isso seria um texto muito grande<br>isso seria um texto
muito grande<br>isso seria um texto muito grande<br>isso seria um texto muito
grande<br>isso seria um texto muito grande<br>isso seria um texto muito grande<br>isso
seria um texto muito grande<br>isso seria um texto muito grande<br>isso seria um texto
muito grande
<br><br>
<a name="imgreduzidas">
DESTINO!!!!!!!!
</a>
</body>
</html>
Visualizao:
Quando abre o site:
Depois que clica no link e vai parar na ncora:
24
target="_blank", "nome" ou "_top"

Especifica uma janela ou quadro que recebero a pgina ou recurso referenciado.
Se target="_blank", a pgina ser aberta em uma nova janela do browser.
<html>
<head>
</head>
<body>
<a href="2.html" target="_blank">
Link para 2.html
</a>
</body>
</html>
Visualizao:
target="nome" a pgina ser aberta dentro de um frame que possua o tal nome.
target="_top", a pgina ser aberta sobre a mesma janela do browser, ignorando qualquer organizao de frames.
title="descrio"
Apresenta um quadro com a descrio do link quando o mouse posicionado sobre ele.
<html>
<body>
<a href="2.html" title="isso aponta para a pagina 2.html">
Link para 2.html
</a>
</body>
</html>
Visualizao:
25
style=text-decoration=: " "

Este o link tradicional, que voc j conhece: Ele, geralmente, se apresenta na cor azul e possui um sublinhado.
<html>
<body>
<a href="http://www.oracle.com">
Oracle - uma grande empresa que tambm usa Linux
</a>
</body>
</html>
:)
Visualizao:
Pode-se omitir esse sublinhado inserindo o seguinte parmetro style="text-decoration:none"

<html>
<body>
<a href="http://www.oracle.com" style="text-decoration:none">
Oracle - uma grande empresa que tambm usa Linux :)
</a>
</body>
</html>
Visualizao:
No exemplo acima se tira o sublinhado de um link especfico, para fazer o mesmo com todos os links da pgina basta inserir estes
parmetros em qualquer lugar da pgina entre <body...> e </body>
<html>
<body>
a:link {text-decoration:none}
a:visited {text-decoration:none}
a:active {text-decoration:none}
</style>
<a href="http://www.oracle.com" >
PostgreSQL - Outro excelente SGBD - esse é free!
</a>
</body>
</html>
:)
Visualizao: (observe que no tem parmetro dentro da tag <a href> do link e que mesmo assim ele mo est sublinhado)
Link Que Muda o Cursor

Quando voc sobrepe um link com o cursor ele muda a seta para uma mozinha, esta a condio default.
Pode-se escolher qual figura de cursor deve aparecer em determinado link.
Nos exemplos abaixo o primeiro link ter o cursor HELP (que apresenta uma seta com a interrogao) e o segundo o cursor de
espera (com a ampulheta).
<html>
<body>
Visite um excelente site brasileiro sobre informática, principalmente
hardware -
26
<a href="http://www.clubedohardware.com.br" style="cursor:help">
Clube do Hardware
</a>
<br><br>
<a href="http://www.apostilando.com.br" style="cursor:wait">
Apostilando.com.br - ótimo site para download de apostilas
</a>
</body>
</html>
Visualizao: (Observe que a frase que coloquei informando o destino do link est fora de <a href> e </a>, por isso que o link s
o nome do site. No segundo link toda a frase est entre as tags <a href> e </a>, por isso toda ela est em azul e toda ela link).
onmouseover=" "
O link automtico consiste naquele que abre espontaneamente quando o mouse passa sobre ele, sem que seja necessrio o
internauta dar o clique. Sua sintaxe simples:
<html>
<body>
<a href="2.html" onmouseover="parent.location='2.html'">
Passe o mouse aqui e ir para outro site mesmo sem clicar!!!!
</a>
</body>
</html>
Visualizao:
quando abre o site:
Depois que passa o mouse sobre o link:
Fazendo um link oculto

Qual a utilidade de criar um link que ningum possa ver?
Bom, isso vai da sua imaginao. Voc pode criar situaes interessantes com esse recurso. imagine alguns links ocultos e
automticos numa homepage de estrias ilustrada que entram inesperadamente com um fundo musical. O internauta, ao mover o mouse
sobre sua pgina entrar numa seo oculta, sem que ele entenda o que est acontecendo. A sintaxe do link oculto (e automtico) a
seguinte:
<html>
<body>
Passe o mouse aqui no final dos pontinhos e vá para outra
página...........
<a href="3.html"onmouseover="parent.location='3.html'" style="textdecoration:none">

</a>
</body>
</html>
Visualizao:
27
Quando abre a pgina:
Depois que passa o mouse:
Onde (no-break space) cria um espao em branco que ser a rea de atuao do link. Para aumentar essa rea basta
aumentar a quantidade de espaos.
Tem de se tomar cuidado, porque pode-se perder o controle da situao se tiverem muitos links ocultos, e o internauta pode pensar
que o browser dele est com problema (ou algo parecido), e se irritar e abandonar sua pgina de vez.
onclick="alert('...')"
Atravs da funo onclick="alert('...')" podemos inserir uma mensagem no link. Essa mensagem aparecer entre o clique no link e
a mudana da tela. Esse recurso til para mensagens de aviso em geral, pois a caixa de mensagem abrir antes da pgina destino ser
carregada.
<html>
<body>
<a href="2.html" onclick="alert('Tchau.... voc est prestes a sair desse site
e entrar em outro!')">
Clique aqui e v para outro site
</a>
</body>
</html>
Visualizao:
Quando abre o site:
Quando clica no link:
Depois de clicar em "ok" (abre o site destino):
mailto:
Podemos acionar o programa de e-mail diretamente de uma pgina HTML usando uma variao do comando <a>, que usa a opo
mailto no lugar da URL.
28
<html>
<body>
<a href="mailto:anaschneider@gmail.com">
Clique para me mandar um mail
</a>
</body>
</html>
Visualizao:
Se quiser que uma figura seja o link que acionar o seu programa de e-mail, coloque <img src="minha_figura.gif"> antes de </a>
(minha_figura.gif o nome do arquivo de imagem como esse pombinho).
O atributo border="0" elimina a borda e deixa um acabamento mais apresentvel em figuras com movimento.
<body>
<a href="mailto:anaschneider@gmail.com">
<img src="imagens\minha_figura.gif"
</a>
</body>
border="0">
Visualizao depois de clicar na figura:
Voc pode enviar E-mail para mltiplos destinatrios simplesmente colocando os endereos E-mail separados por vrgulas.
Exemplo: <a href="mailto:fulano@ig.com.br, ciclano@hotmail.com, beltrano@aol.com.br">
Criando Links Para Download

Para colocar uma relao de arquivos para o usurio fazer download, o jeito mais organizado o seguinte:
Primeiro, crie um diretrio (pasta) chamada "download" no servidor onde sua homepage est hospedada (no local onde o seu site
est), ali sero colocados os arquivos que sero disponibilizados.
Depois, basta utilize a tag <a href> (a mesma tag utilizada para criar os links) e direcione os arquivos indicando sua URL (o
caminho, tais como o nome do diretrio e o nome do arquivo).
Por exemplo, criei o diretrio download e dentro dele coloquei o game Fooblillard3
<html>
<body>
<a href="download\foobillard3.rar">
Clique aqui para download do game Foobillard 3.0
</a>
</body>
</html>
Visualizao:
29
Como o arquivo est zipado, ele pergunta se quero abrir (utilizando um aplicativo) ou salvar.....Se o arquivo fosse um vdeo, por
exemplo, no estivesse compactado e eu tivesse um plug-in que o reconhecesse, ele seria automaticamente executado e a janela (figura
acima) no apareceria.
Compactar (zipar) os arquivos (e no simplesmente coloc-los para download) diminui o tempo de download (facilitando a vida do
internauta).
Abrir no Browser Arquivos de Outros

Softwares
Imagine que tenhas uma planilha do Excel (ou outro tipo de arquivo) para disponibilizar no seu site e no tens pacincia de
convert-la para HTML..... Faa com que esse arquivo (essa planilha) abra no browser, mesmo sem estar em HTML!!!!!
Basta indicar o nome completo do arquivo e colocar o parmetro target="window" para que o arquivo seja aberto em outra janela.
Ateno!!!!! Mesmo que esse arquivo esteja sendo visualizado no browser, necessrio que o usurio tenha um software que
reconhea arquivos com tal extenso. Por exemplo, o arquivo que vou disponibilizar o dados.xls. Mesmo que ele seja aberto numa
janela do browser, tenho que ter o Excel instalado na minha mquina (ou outro software que abra arquivos .xls)
<html>
<body>
<a href="download\dados.xls" target="window">
Veja uma planilha do Excel no seu browser
</a>
</body>
</html>
Visualizao:
Configurando
Pgina
Inicial
30
Pgina de Abertura
Para fazer com que determinado site seja habilitado como a pgina inicial do usurio (a primeira pgina a ser carregada quando
abrimos o browser), usamos o cdigo a seguir (o browser pedir uma confirmao para o usurio quando ele clicar no link).
<html>
<body>
<a href="#" unclick="this.style.behavior='url(#default#homepage)';
this.setHomePage ('anacarol.blog.br');">
coloque o site da disciplina como sua pgina inicial.
</a>
</body>
</html>
31
5 Imagens
<img atributos>
No existe a terminao </img>. insere uma imagem no documento.
utilizado dentro de: elementos de formatao de caracteres, listas, tabelas, formulrios, links
src="..."
A URL da imagem o nico atributo obrigatrio.
LembrE-SE: A posio do comando img antecede o texto em todos os exemplos abaixo.
align="top | middle | bottom | left | right"

Alinha a imagem em relao ao texto pelo topo, meio, base (default), esquerda e direita, respectivamente.
Exemplos:
align="top": Alinha a parte de cima da imagem com a parte mais alta da linha. Causa falha de seqncia.
<html>
<body>
<img src="imagens\leaf6.jpg" align="top"> Alinha a parte de cima......
....................e se continuar o texto, a linha de baixo fica muito distante da de
cima.
</body>
</html>
Visualizao:
align="middle": Alinha a base do texto com a linha mdia da imagem. Tambm causa falha.
<html>
<head>
</head>
<body>
<img src="imagens\sorriso.gif" align="middle"> Alinha a base do texto com a
linha mdia da imagem. Quando o texto troca de linha, salta para a parte inferior da
figura também causando uma falha de continuidade.
</body>
</html>
Visualizao:
align="bottom": Alinha a parte de baixo da imagem com a base do texto. isso no causa descontinuidade.
<html>
32
<body>
<img src="imagens\fnt14001.jpg" align="bottom"> frase fica na parte de baixo
da figura &Eacute muito usada uma figura como letra capitular (como o "A" no incio
dessa frase), como em jornais e revistas.
</body>
</html>
Visualizao:
align="left": Posiciona a imagem no canto esquerdo jogando todo o texto para a direita. Aps o trmino da imagem o texto volta a
ocupar a largura normal da pgina e ficando em baixo da figura. isso no causa falha de continuidade do texto.
<html>
<body>
<img src="imagens\raio.jpg" align="left"> O texto fica do lado Direito da
figura, continua percorrendo toda ela e se a frase for muuuuuuiiiiito grande, termina em
baixo dela. Esse é um jeito inteligente de usar
figuras sem atrapalhar a leitura.
</body>
</html>
Visualizao:
align="right": Alinha a imagem direita forando o texto a ocupar todo o lado livre a esquerda. o contrrio do exemplo anterior.
<html>
<body>
<img src="imagens\star.jpg" align="right">O texto começa do lado
ESQUERDO e depois de percorrer toda a figura, ele termina de baixo dela, sem atrapalhar
a leitura e sem deixar espaço vago.
</body>
</html>
Visualizao:
No existe um atributo em img que centraliza a imagem envolvendo-a com textos a sua esquerda e direita. Para isso temos que
recorrer a tabela. Exemplo:
<body>
<table>
<tr>
<td width="250" style="text-align:justify">
Texto lado esquerdo...
</td>
<td width="150">
<img src="imagens\sol3.gif">
</td>
<td width="250" style="text-align:justify">
Texto lado direito...
</td>
</tr>
</table>
</body>
33
Visualizao:
width="largura", height="altura"
informa a largura e a altura da imagem, em pixels. Com esses parmetros, o browser reserva espao para a figura e mostra logo o
texto. Ao colocar o sinal % aps algum valor em "width", ele calcular esse valor (em porcentagem) em relao largura da janela.
<body>
<img src="imagens\mundo.gif" width="100%" height="80">
</body>
Visualizao:
<body>
<img src="imagens\mundo.gif" width="45%" height="150">
</body>
Visualizao:
border="valor"
Permite criar e alterar o tamanho da borda ao redor da imagem, sendo que: border="0" oculta a borda.:
<body>
<img src="imagens\brass.jpeg"
<br>
<br>
</body>
border="0">
border="1">
border="5">
Visualizao:
34
vspace="y" hspace="x"
Cria um espao entre a imagem e o texto que a envolve. Parece uma moldura invisvel.
<body>
<img src="imagens\2bois.gif" vspace="20" HSPACE="20" align="left">
Observe:
******************************
******************
************
******************************
******************************
*****
**************
*********** *********** ******************* ****************************** *********
*************************** Parece que essa figura tem uma margem (ou uma moldura)
invisvel!
</body>
Visualizao (hspace="20")
<body>
<img src="imagens\2bois.gif" vspace="20" HSPACE="80" align="left">
Agora com HSPACE=80
****************************** ******************************
****************************** ******************************
****************************** ******************************
******************************
************************************
</body>
Visualizao: (hspace="80")
35
alt="texto"
um rtulo que aparece quando posiciona-se o mouse sobre a imagem... muito til quando o browser do internauta no permite
exibio de imagens (ao menos a pessoa vai poder saber o que teria ali naquele lugar).
<body>
<img src="imagens\brasil.gif"
</body>
alt="Bandeira do Brasil">
Visualizao:
onmouseover, onmouseout="imagem"
Estes dois atributos fazem com que, ao passar o cursor sobre um objeto, ele execute uma funo pr-programada.
Essa figura um link para o site 2.html, mas quando passa-se o mouse sobre ela, ela modifica a barra de status do Windows,
exibindo a frase: " Assim se modifica a barra de status".
<body>
<a
href="2.html"
onmouseover="window.status="Assim
se
status";return true;" onmouseout="window.status=''; return true;">
<img src="imagens\elefante.gif" name="imagem2">
</a>
</body>
altera
barra
de
Visualizao: (com o mouse fora da figura)
Com o mouse sobre a figura...:
Criando
Reduzidas
um
Diretrio
de
Imagens
36
Visando diminuir o tamanho de seu site (e, assim, o tempo de transferncia dele), auxiliando quem no tem banda larga, usa-se
muito imagens reduzidas com link para sua correspondente em tamanho natural
uma forma interessante de se fazer isso :
Primeiro, criar uma pgina HTML que contenha a figura em tamanho real.
Segundo colocar na sua pgina a figura estipulando os parmetros width="" height="", obviamente, deixando a figura menor do
que ela realmente , e fazer essa figura pequena ser um link para a pgina que contem a figura em tamanho real (grande).
Pgina com figura pequena:
<body>
<a href="janela.html">
<img src="imagens\janela.jpg" width="60" height="41" alt="ir para Janela.jpg">
</a>
</body>
Pgina com figura em tamanho real (janela.html)

<body>
<img src="imagens\janela.jpg"
</body>
Visualizao (figura em tamanho menor):
Depois de clicar na figura pequena:
Imagem de Baixa Resoluo

lowsrc="arquivo"
Este atributo, do comando <img>, faz com o browser exiba uma imagem inicial, de baixa resoluo, enquanto carrega a imagem
definitiva. Logicamente para que a ttica d certo a imagem de baixa resoluo deve ser bem menor que a definitiva.
<img src="arquivo1" lowsrc="arquivo2">
A imagem de baixa resoluo coloque em "arquivo2".
37
6 Elementos Especiais
<applet> ... </applet>
Esta tag inclui um programa executvel em Java na pgina, os applets Java, como so chamados. So programas de computador
acionados pelos documentos em HTML. Os applets so transferidos a partir de um servidor Web para, em seguida, serem executados no
computador do usurio. Os applets Java so multiplataforma, isto , eles funcionam em PC, Macintosh, Sun, IBM ou Hewlett-Packard.
Esse tipo de independncia de plataforma tem sido a razo de seu maior sucesso.
code="classe Java"
informa o nome do arquivo executvel que ser carregado ou a sua URL completa.
codebase="URL base"
informa o caminho para o arquivo executvel citado em code. obrigatrio se no foi fornecida a URL completa em code.
name="nome"
Fornece um rtulo para o applet (opcional)
align, alt, hspace, vspace, height, width

idnticos aos atributos de mesmo nome de <img>
Basta copiar o arquivo .class para o diretrio onde est o arquivo HTML que ir exibir o efeito, depois insira no arquivo HTML os
seguintes parmetros:
<applet code="meu_arquivo.class" width="310" height="42">
<param name="text" value="Ttulo">
<param name="fontname" value="Arial">
<param name="bgcolor" value="cd853f">
<param name="fontstyle" value="B">
<param name="fontsize" value="30">
<param name="sleeptime" value="180">
</applet>
cole esse cdigo-fonte no arquivo HTML onde voc quer que o efeito aparea. Seus parmetros de configurao so o seguinte:
width=310 height=42 o tamanho da janela onde o texto est contido;
text value especifica o texto que ir exibir o efeito;
fontname especifica o tipo da fonte;
bgcolor a cor de fundo;
fontstyle o efeito (no nosso exemplo ela est em negrito "B");
fontsize o tamanho da fonte e finalmente
sleeptime que determina o tempo de durao do efeito apresentado.
Quando abre uma homepage que possui os aplicativos applets Java o arquivo copiado automaticamente para o seu diretrio de
arquivos temporrios. Para localiz-lo basta clicar em [iniciar], na barra de ferramentas do Windows e depois em [Localizar]. Digite
*.class <encher>. O comando de busca ir apresentar uma relao de todos os applets que voc foi adquirindo pelas suas jornadas na
Web. O RainbowText.class estar entre eles. Basta copia-lo para o diretrio de sua homepage e pronto.
<param atributos>
Fornece parmetros para um applet. utilizado dentro de: <APPLET>
name="nome"
38
informa o nome do parmetro (definido no applet).
value="valor"
informa o valor do parmetro (definido pelo autor da pgina).
<font atributos> ... </font>

Altera tamanho, tipologia e cor do texto marcado. Pode conter texto, formatao de caracteres e ser utilizado dentro de blocos,
listas, tabelas, formulrios.
size="valor" ou "incremento"
Altera o tamanho do texto. Pode ser atravs de um valor de 1, o menor, at 7, o maior (o padro 3, caso no seja especificado o
tamanho) ou atravs de incrementos de -3 a +3.
No exemplo abaixo cada letra est com um tamanho diferente, partindo do tamanho 7 em ordem decrescente, depois crescente,
depois decrescente...
<body>
<font size="7">
T
</font>
<font size="6">
A
</font>
<font size="5">
M
</font>
<font size="4">
A
</font>
<font size="3">
N
</font>
<font size="2">
H
</font>
<font size="1">
O
</font>
<font size="2">
D
</font>
<font size="3">
A
</font>
<font size="4">
F
</font>
<font size="5">
O
</font>
<font size="6">
N
</font>
<font size="7">
T
</font>
<font size="1">
E
</font>
</body>
Visualizao:
39
color="#rrggbb" ou "nome"
Altera a cor do texto. Pode ser atravs do valor RGB (Red/Green/Blue) ou atravs de um dos 16 nomes padro VGA do Windows.
Os valores RGB esto na base hexadecimal (0 a 9, A, B, C, D, E, F).
NOME PADRO
CDIGO
NOME PADRO
CDIGO
red
ff0000
maroon
800000
lime
00ff00
green
008000
blue
0000ff
navy
000080
yellow
ffff00
olive
808000
aqua
00ffff
teal
008080
fuchsia
ff00ff
purple
800080
white
ffffff
silver
c0c0c0
black
000000
gray
808080
<body>
<font size="7"
T
</font>
<font size="6"
A
</font>
<font size="5"
M
</font>
<font size="4"
A
</font>
<font size="3"
N
</font>
<font size="2"
H
</font>
<font size="1"
O
</font>
<font size="2"
D
</font>
<font size="3"
A
</font>
<font size="4"
F
</font>
<font size="5"
O
color="red">
color="008000">
color="0000ff">
color="ab0125">
color="red">
color="008000">
color="0000ff">
color="ab0125">
color="red">
color="008000">
color="0000ff">
40
</font>
<font size="6" color="ab0125">
N
</font>
<font size="7" color="red">
T
</font>
<font size="1" color="008000">
E
</font>
</body>
Visualizao:
face="nome de fonte"
Altera a tipologia do texto de acordo com o nome de uma fonte disponvel no sistema local. Se a fonte no estiver disponvel, no
ser alterada.
<body>
<font size="7"
T
</font>
<font size="6"
A
</font>
<font size="5"
M
</font>
<font size="4"
A
</font>
<font size="3"
N
</font>
<font size="2"
H
</font>
<font size="1"
O
</font>
<font size="2"
D
</font>
<font size="3"
A
</font>
<font size="4"
F
</font>
<font size="5"
O
</font>
<font size="6"
N
</font>
<font size="7"
T
</font>
<font size="1"
E
</font>
</body>
color="red"
face="Monotype Corsiva">
color="008000"
face="MS Sans Serif">
color="0000ff"
face="Courier New">
color="ab0125"
face="TimesRoman">
color="red"
face="Arial Narrow">
color="008000"
face="impact">
color="0000ff"
face="Georgia">
color="ab0125"
face="Verdana">
color="red"
face="Arial Black">
color="008000"
face="Century Gothic">
color="0000ff"
face="Garamond">
color="ab0125"
face="Tunga">
color="red"
face="Wingdings">
color="008000"
face="Sylfaens">
41
Visualizao:
<br atributos>
Break Line - Quebra de linha. Fora o texto que o segue a iniciar na prxima linha. utilizado dentro de: cabealhos, elementos de
formatao de caracteres, blocos, clulas de tabelas, itens de listas.
<body>
Esse um texto muiiiiiiiiiiiiiiiiiiitoooooooooooooooooooooooo
<br>
longo por isso depois da palavra looooongo eu coloquei um br e vou colocar outro
agora
<br>
agora ja passei para a outra linha.
</body>
Visualizao:
clear="left", "right", "all"

Sem a opo clear simplesmente introduz uma quebra de linha. Com a opo clear=left, quebra a linha e desce at encontrar uma
margem esquerda limpa. clear=right faz o mesmo em relao margem direita e clear=all, desce at encontrar ambas as margens livres
de figuras.
<nobr> ... </nobr>

Esse comando evita que o texto seja quebrado em mais de uma linha, ou seja, o texto envolvido por <nobr>...</nobr> ir ter
somente uma linha no importando a quantidade de palavras que ele contenha.
<body>
<nobr>
Esse um texto longo mas como tem essa tag antes, ele no quebra de jeito
nenhum, tendo que ficar rolando a pgina de um lado para o outro para conseguir ler...
chato, n&atildeo?
</nobr>
</body>
Visualizao:
<wbr>
Word Break . indica ao browser onde o texto pode ser quebrado. Esta tag usada em conjunto com <nobr>.
<body>
<nobr>
42
Esse um texto longo mas como tem essa tag antes, ele no quebra de jeito
nenhum, tendo que ficar rolando a
<Wbr>
pgina de um lado para o outro para conseguir ler... chato, n&atildeo?
</nobr>
</body>
Visualizao:
<map atributos> ... </map >

O formato de imagem mais usado na internet o gif e o jpg. Eles foram adotados devido seu tamanho comprimido, otimizando o
tempo de abertura das homepages que utilizam imagens, fotos ou figuras em gerais. Tais imagens podem ser mapeadas de forma que uma
determinada rea sua possa ser vinculada a uma ncora de acesso para outros links. Mapear uma imagem consiste em determinar as
coordenadas da imagem que pertencem a uma rea de link com pontos de ativao. Existem duas maneiras de se fazer isso.
uma imagem formada por pixels (pontos). Seu tamanho dimensionado pelos eixos X (largura) e Y (altura). A imagem dos
limes, abaixo, possui a dimenso de 81 x 66 pixels. Portanto suas coordenadas partem do canto superior esquerdo (0 x 0) e vo at o
canto inferior direito (81 x 66).
Para verificar a dimenso de uma imagem basta clicar sobre ela com o boto direito do mouse e depois selecionar Propriedades (no
browser ou no Explorer, por exemplo), ali apresentado vrias informaes sobre a imagem, entre elas sua dimenso.
Mapear uma imagem consiste em informar ao browser que determinada rea da imagem ir acessar outro link, por exemplo podese te ruma imagem onde cada parte dessa mesma imagem acessa um link diferente.
name="nome_do_mapa"
Rotula o mapa com um nome que pode ser referenciado por uma imagem atravs do atributo usemap.
ismap
indica que a figura uma imagem mapeada (imagemap) controlada pelo servidor (o mapa estabelecido por arquivo separado, no
servidor).
usemap="#nome_do_mapa"
indica que a figura uma imagem mapeada (imagemap) controlada pelo cliente (o mapa estabelecido pelo elemento <map>, na
mesma pgina HTML). #nome_do_mapa informa o rtulo do mapa <map> usado pela imagem.
<body>
<center>
<img src="imagens\lemon.gif" usemap="#meu_mapa" border="1">
<map name="meu_mapa">
<area shape=rect coords="0,0,40,33" href="outra_pagina.html">
</map>
</center>
</body>
Observe o comando img src="...", especificando o nome da imagem, com o parmetro usemap="#...", especificando o nome do
mapa, antecedendo o comando map name="...". Agora movimente o cursor sobre a imagem e observe que no seu primeiro 1/4 aparece a
opo de ncora para outro arquivo HTML (outra_pagina.html).
43
<area atributos>
Define coordenadas para imagens mapeadas.
As coordenadas variam conforme o tipo da rea a ser mapeada.
A rea do tipo circular possui duas coordenadas, uma para definir o centro do crculo e outra para definir o raio.
A rea retangular possui duas coordenadas, tambm, uma para o vrtice superior esquerdo e outra para o vrtice inferior direito.
A rea poligonal possui uma coordenada para cada vrtice, conforme o tipo da poligonal. utilizado somente dentro de: <MAP>
Determinar as coordenadas de uma rea quadrada ou retangular at que fcil, o problema comea a complicar quanto tentamos
definir as reas circulares ou, pior, as poligonais de uma imagem qualquer, por exemplo temos uma foto de uma pessoa e queremos que
quando clicamos na cabea aponte para uma pgina, nos ps para outra e nas mos para outra. Para isso temos diversos softwares
shareware ou freeware que faz todo o trabalho matemtico, como o Map This v1.31 (870Kbytes).
shape="circ", "poly" ou "rect"

Crculo, polgono ou retngulo, respectivamente.
coords="coordenadas"
Depende da forma: coords="x1, y1, x2, y2, x3, y3, ..." definem os vrtices em um polgono; coords="x1, y1, x2, y2" vrtices
opostos em um retngulo; coords="x, y, r" centro e raio de um crculo.
href="URL"
informa a URL que deve ser carregada ao se selecionar a rea.
nohref
Permite que a rea selecionada no acione nenhum link.
Editores de reas Mapeadas
44
7 Bloqueando a Cpia
da Pgina
Esses dois atributos so colocados dentro de <body>.
oncontextmenu="return false"
Desabilita o menu que acionado atravs do boto direito do mouse mesmo que a pessoa clique com o direito (para copiar e
colar, por exemplo), esse , menu no abrir.
onselectstart="return false"
O usurio no consegue selecionar o texto - boto esquerdo do mouse pressionado e arrastado sobre o texto.


So anotaes que s podem/devem ser vistas por quem for bisbilhotar o cdigo fonte. Tudo o que for
escrito entre o  ser ignorado pelo browser e no ser mostrado na tela. Ele pode ser usado em qualquer lugar do
documento. Outro comando com funo similar o <comment> ...</comment>.
utilize sempre comentrios: so eles que localizam o programador dentro do cdigo e no devem ser usados somente em outras
linguagens de programao, mas em HTML tambm devemos adot-lo!
<html>
<head> 
<title>
Pgina com alguns comentrios
</title>
</head>
<body> 
<comment>
isso tambm um comentrio, mas desta vez utilizei uma
tag em vez dos smbolos!!
</comment>
Você está vendo PARTE do cdigo HTML deste site....
Para saber TUDO que contém nele, verifique o código
fonte!!!
</body> 
</html>
Visualizao:
45
8 Formatao de
textos e caracteres
So elementos usados para destacar trechos de texto.
Podem ser lgicos (sugerem uma utilizao para o texto destacado: grifo, destaque, varivel, trecho de cdigo, etc.) ou fsicos
( somente do uma formatao especfica para o trecho: negrito, itlico, etc)
A ao dos fsicos restringe-se capacidade de visualizao do browser (alguns podem no interpretar).
Tanto lgicos quanto fsicos podem conter: texto, elementos de formatao de caracteres, <a>, <img>, <br> e so permitidos
dentro de: cabealhos, elementos de formatao de caracteres, <a>, <pre>, <p>, <li>, <dd>, <dt>, <td>
Elementos Lgicos
<strong> ... </strong>
Destaque (geralmente negrito).
<em> ... </em>

Grifo (geralmente itlico).
<cite> ... </cite>

Citao (geralmente itlico)
<var> ... </var>

varivel (geralmente itlico)
<samp> ... </samp>

Amostra (geralmente fonte de largura fixa)
<kbd> ... </kbd>

Teclado (geralmente fonte de largura fixa)
<dfn> ... </dfn>

indica definio de uma palavra (geralmente em itlico)
<code> ... </code>

Quando se deseja mostrar cdigos de programas em geral, e no se quer que o browser interprete tais cdigos, usa-se esse tag
(geralmente fonte de largura fixa).
46
<pre> ... <pre>

Permite que o texto aparea tal qual a gente o escreve (inclusive com as quebras de linha sem colocar o br . quando eu pular de
linha ele pula tambm)
<body>
<strong>
Texto como strong
</strong>
<br>
<em>
Texto como em
</em>
<br>
<cite>
Texto como cite
</cite>
<br>
<var>
Texto como var
</var>
<br>
<samp>
Texto como samp
</samp>
<br>
<kbd>
Texto como kbd
</kbd>
<br>
<dfn>
Texto como dfn
</dfn>
<br>
<code>
Texto como code
</code>
<pre>
isso é um texto com pre
dei um monte de espacos e troquei de linha
browser me mostrou tal qual
ter colocado br
</pre>
</body>
e aqui eu
e troquei de novo.... e o
eu
escrevi - mesmo sem eu
Visualizao:
47
Elementos Fsicos
<b> ... </b>
Negrito
<i> ... </i>

itlico
<tt> ... </tt>

Teletipo
<u> ... </u>

sublinhado
<strike> ... </strike>

Texto riscado
<del> ... </del>

Texto riscado
<s> ... </s>

Texto riscado
<sub> ... </sub>

Texto subscrito (como os nmeros de frmulas qumicas)
<sup> ... </sup>

Texto Sobrescrito (como exponenciais matemticos)
<small> ... </small>

Texto menor
<big> ... </big>

Texto maior o contrrio de small
48
<blink> ... </blink>

Texto Pulsante
<body>
Texto normal
<br>
<B>
Texto como
</b>
<br>
<i>
Texto como
</i>
<br>
<tt>
Texto como
</tt>
<br>
<u>
Texto como
</u>
<br>
<strike>
Texto como
</strike>
<br>
<del>
Texto como
</del>
<br>
<s>
Texto como
</s>
<br>
Texto normal e
<sub>
texto como
</sub>
<br>
Texto normal e
<sup>
texto como
</sup>
<br>
<small>
Texto como
</small>
<br>
<big>
Texto como
</big>
<br>
<blink>
Texto como
</blink>
</body>
Ti
strike
del
sub
sup
small
big
blink
Visualizao:
49
Pode-se usar vrios comandos se formatao ao mesmo tempo, mas sempre a primeira tag a ser aberta a ltima a ser fechada ;)
Voc tambm pode usar vrios comandos de formatao ao mesmo tempo sobrepondo-os, sempre seguindo a lgica LIFO, isto :
A primeira tag a ser aberta, a ltima a ser fechada
<body>
<b>
<i>
<u>
Este texto est com bold, itlico e sublinhado.
</u>
</i>
</b>
<br>
<tt>
<strike>
Este texto est com teletipo riscado.
</strike>
</tt>
</body>
Visualizao:
Objetos em movimento:
marquee
Propriedade que possibilita o efeito de rolamento de um objeto (texto, quadro ou imagem) para a esquerda ou direita, para cima ou
para baixo como tambm define sua velocidade. A sintaxe a seguinte:
<marquee atributo="efeito">
objeto
</marquee>
align="top", "middle", "bottom"

Alinha o texto pelo topo, meio e inferior, respectivamente.
behavior =scroll, slide, alternate

Scroll inicia o texto aparecendo de um lado e segue at desaparecer a ltima letra do outro, slide inicia o texto de um lado e segue
at a primeira letra tocar o lado oposto (bate e estaciona, no volta), ento ele pra; e alternative onde o texto aparece de um lado e
segue at tocar o lado oposto, ento ele retorna (o bate-e-volta)
50
bgcolor="cor"
Especifica a cor de fundo. Pode ser pelo nome da cor ou atravs de seu cdigo RGB.
direction=left, right, up, down

Especifica a direo do texto, esquerda (default), direita, para cima e para baixo, respectivamente.
height="nmero", %:
Especifica a largura do painel. Se for um nmero ele especifica a quantidade de pixels se for % ele especifica a largura da janela do
marquee em porcentagem.
hspace="nmero"
Especifica a largura em pixels das margens esquerda / direita.
loop="nmero", -1 a infinite
Especifica quantas vezes ser executado a rolagem do texto, se o valor for -1 ou infinite, o texto rolar infinitamente.
scrollamount="nmero"
Especifica a quantidade de pixels que ser usada para deslocar o marquee, ou seja, quanto maior for o valor, maior ser a
velocidade de deslocamento.
scrolldelay="nmero"
Especifica em milissegundos o tempo de deslocamento do texto.
vspace="nmero"
Determina em pixels a margem superior e inferior do marquee.
width="nmero", %
O nmero especifica a altura do painel, % especifica a altura em relao a janela em porcentagem.
Texto centralizado em fonte tamanho 5 (<font size="5">) rolando numa faixa de 70% (width=70%) da tela entre duas barras <hr>
:
<body>
<center>
<hr width="80%">
<marquee behavior="scroll" width="70%">
<font size="5">
<b>
No esquea de fazer backup de seus arquivos.
</b>
</font>
</marquee>
<hr width="80%">
</center>
</body>
Visualizao:
51
Agora um exemplo com o texto e imagem rolando (scroll) de baixo para cima direction="up e diminui a velocidade do
movimento scrollamount="1" (bem devagar) de forma que ela ir correr lentamente como na abertura de um filme.
<body>
<marquee behavior="scroll" direction="up" scrollamount="11">
<img src="imagens\3sun5a.gif" align="left">
<center>
<i>
Texto...
</i>
</center>
</marquee>
</body>
Visualizao:
incio da rolagem:
Final da rolagem:
Texto em movimento alternado (behavior=alternate) (bate-e-volta), da esquerda pra direita (left, default) e cor de fundo
(bgcolor="dda0dd").
<body>
<marquee behavior="alternate" direction="left" bgcolor="dda0dd">
<font size="5">
<b>
52
<i>
isso é ótimo para tontear alguém!!:D
</i>
</b>
</font>
</marquee>
</body>
Visualizao:
inicio:
Bate:
Volta:
Combinao de marquee com rolagens em direes alternadas (um da direita para a esquerda e outro da esquerda para a direita).
A porcentagem divide a tela ao meio! Se tirar a porcentagem fica cada um correndo em linha diferente!!!
<body>
<marquee behavior="scroll" direction="left" width="50%" bgcolor="ffa500">
<font color="ff4500">
Agora marquees combinados
</font>
</marquee>
<marquee behavior="scroll" direction="right" width="50%" bgcolor="ff7f50">
<font color="191970">
sodanibmoc seeuqram arogA
</font>
</marquee>
</body>
Visualizao:
incio:
Final:
Aqui aumentei a velocidade de rolamento do texto com scrollamount="30". (Cuidado com a velocidade!!! Seu usurio pode no
conseguir ler um "texto a jato" ;P
<body>
53
<marquee behavior="scroll" direction="right" scrollamount="30">
<font color="green">
<b>
Vc disse que sabe ler rápido?
:))
</b>
</font>
</marquee>
</body>
Visualizao:
incio:
Final:
Rolamento de um texto com vrias linhas (utilizando o comando <pre>)

<body>
<marquee behavior="scroll" direction="left" scrolldelay="150" vspace="20">
<font size="3" color="#ff00ff">
<pre>
<b>
Agora bem devagarzinho...
Voc pode fazer efeitos
de movimento com
vrias
linhas tambm.
</b>
</pre>
</marquee>
</body>
Visualizao:
incio:
Final:
Rolamentos de texto dentro de uma tabela... Espero que tenha ficado didtico ao menos para demonstrar que marquee tambm
funciona em tabelas
<body>
<center>
<table border="5" bgcolor="#ffd700" width="450">
<tr>
54
<td bgcolor="#00bfff">
<marquee behavior=scroll direction=left scrollamount="3">
<b>
uma clula
</b>
</marquee>
</td>
<td colspan=2 bgcolor="#9acd32">
<b>
outra!!
</b>
</marquee>
</td>
<td bgcolor="#f0e68c">
<b>
mais uma!!
</b>
</marquee>
</td>
</tr>
<tr>
<td colspan=4 bgcolor="#483d8b">
<marquee behavior=scroll direction=right scrollamount="3">
<font color="#ffffff">
isso é uma tabela com marquee
</font>
</marquee>
</td>
</tr>
</table>
</center>
</body>
Visualizao:
incio:
Final:
uma imagem com movimento!

<marquee behavior="scroll" direction="left"
<img src="imagens\cat_toilet.gif">
</marquee>
scrolldelay="140"
scrollamount="20">
Visualizao:
incio:
55
Fim:
Pgina com uma janela (criada com a tag <iframe>) com o arquivo 2.html, sendo que a sua pgina (fora da janela) recebe um
background (pingins) .
<body background="imagens\pinguins2.gif">
<center>
<iframe src="pagina_da_janela.html" width="650" height="90" scrolling="auto"
frameborder="1">
</iframe>
<br>
Esse texto não está mais no frame, está no seu site
mesmo!!
</center>
</body>
Visualizao:
56
57
9 Formataes
Vamos aplicar formataes a ttulos, cabealhos, pargrafos, textos espaados, saltos de linha, endentao, centralizao de
objetos, formatao de diversos tipos de linhas..
<H1, H2, ..., H6 atributos>

</H1, H2, ..., H6>
So disponveis seis nveis de cabealhos formando uma hierarquia descendente em tamanho. Os comandos de cabealho incluem
uma linha antes e outra depois (no necessita colocar um <br> depois que termina a frase... ele pula a linha automaticamente).
As tags <H1, H2, H3, H4, H5, H6> apresentam apenas 6 tamanhos de cabealho sendo o <H1> o maior tamanho.
Podem conter: texto; todos os elementos de formatao de caracteres; <a>, <img>, <br>, etc.. utilizado dentro de: <body>,
<form>, <blockquote>, <center>, <div>
align="center", "left", "right" ou "justify"

Alinha o cabealho no centro, esquerda (padro), direita ou pelas duas margens, respectivamente.
<body>
<h1 align="center">
h1 com align=center
</h1>
<h2 align="left">
h2 com align=left
</h2>
<h3 align="right">
h3 com align=right
</h3>
<h4 align="justify">
h4 com align=justify. ou seja, fica parelha a margem esquerda e a margem
direita, como um bloco de texto ' quadradinho'. sem aquelas ' idas e vindas' como fica o
caderno da gente.ah! isso se o pargrafo for muito grande, se for somente uma linha,
fica só alinhadinho à esquerda, viu?
</h4>
<h5 align="center">
h5 com align=center
</h5>
<h6>
h6 com align default - sem eu ter especificado
</h6>
</body>
Visualizao:
style="propriedades"
58
atributo de <H...>.Altera a apresentao do cabealho (cor, fonte, tamanho, sublinhado, estilo) de acordo com uma lista de
propriedades de estilo.
Por exemplo. formatar a palavra "Computador" em azul marinho, fonte Helvetica (ou, na ausncia desta, a fonte Sans-serif), com 2
cm de tamanho (pode-se usar pt,. in,. cm tambm ).
<body>
<h3 style="color: navy; font-family: Helvetica, Sans-serif; font-size: 2cm">
Computador
</h3>
</body>
Visualizao:
<p atributos> ... </p>

P (Paragraph) Pargrafo usado para separar blocos de texto (geralmente com o espao de uma linha entre eles). opcional
usar </p>. utilizado dentro de: <body>, <form>, <blockquote>, <center>, <li>, <dd>, <div>
align
"center", alinhamento pelo centro; "left" - alinhamento pela esquerda, (default),"right" - alinhamento pela direita ou "justify"
(justificado) - alinha o texto pelas duas margens. O modo justificado permite dar ao pargrafo uma aparncia mais profissional e
organizada, j que os textos ficam alinhados de maneira uniforme entre as margens esquerda e direita.
<body>
<p align="justify">
Para inovar é preciso olhar as coisas de uma nova forma, entender as
pessoas, ter vontade de assumir riscos e trabalhar pesado. uma
idéia não se transforma em inovação até que
tenha sido largamente adotada e incorporada à vida das pessoas. Muita
gente teme mudanças, portanto, uma peça-chave do processo é
convencer os outros de que sua idéia é boa. Você pode
simplesmente incorporar a ajuda deles e, fazendo isso, estará ajudando-os
a descobrir a utilidade de sua idéia.
</p>
</body>
Visualizao:
formata o pargrafo (cor, fonte, tamanho, sublinhado, estilo) de acordo com uma lista de propriedades de estilo.
Pargrafo na cor verde 006400, fonte Verdana ou, na ausncia dessa, a fonte Sans-serif em itlico com tamanho 11pt
<body>
59
<p style="color:006400; font-family: verdana, sans-serif; font-style: italic; fontsize: 11pt">
Se você quer inovar, precisa de três coisas: um certo grau de
conhecimento na área; um desejo grande de fazer algo útil (seja para a
sociedade ou para a indústria) e um objetivo.
</p>
</body>
Visualizao:
No exemplo acima se est formatando apenas um pargrafo, os demais mantero a configurao padro (conforme pode ver). Mas
se o desejo for tornar essa configurao como formato padro na homepage, ento tem que colocar a sintaxe abaixo entre as tags
<head>...</head> da pgina HTML, e ento todos os pargrafos tero essa formatao.
<head>
P {
color: #006400;
font-size: 11pt;
}
</style>
</head>
font-family:
verdana,
sans-serif;
font-style:
italic;
60
10 Linhas Horizontais
<hr atributos>
Horizontal Rule - Rgua horizontal, usada como divisor de texto.. utilizado dentro de: <body>, <form>, <blockquote>, <pre>,
<center>, <div>
size="nmero"
Espessura da linha em pixels.
<body>
Aqui em baixo está
<hr size="2">
Aqui em baixo está
<hr size="4">
Aqui em baixo está
<hr size="9">
Aqui em baixo está
<hr size="20">
</body>
uma linha size=2

uma linha size=4
uma linha size=9
uma linha size=20
Visualizao:
width="nmero"
Largura da linha: nmero pode ser um valor absoluto em pixels ou uma percentagem em relao a largura da pgina (seguido de
%). O default aparecer centralizada a linha caso ela seja menor que 100% da largura da pgina.
<body>
Linha com 20% da largura da página
<hr width="20%">
<hr width="50%">
<hr width="80%">
Linha com largura de 10 pixels
<hr width="10">
<hr width="40">
<hr width="90">
</body>
Visualizao:
61
align="left", "center" ou "right"

Se for menor que a largura da pgina, a linha pode ser alinhada pela margem esquerda, pelo centro ou pela margem direita,
respectivamente. O default centralizado.
<body>
Linha com 50% da largura da página alinhada à direita
<hr width="50%" align="right">
e esta com 75% da largura e alinhada à esquerda
<hr width="50%" align="left">
</body>
Visualizao:
noshade
Especifica uma linha horizontal slida, sem sombreamento (o default a sombreada).
<body>
Linhas sem sombreamento, e com size = 3, 8 e 12 respectivamente
<hr noshade size="3">
</body>
Visualizao:
color="#rrggbb" ou "nome"
62
Determina uma cor para a linha. O default o cinza.
<body>
Linhas com cores iguais a red, #00ff00 e #00ccff , respectivamente
<hr noshade size="3" color="red">
<hr noshade size="5" color="#00ff00">
<hr noshade size="8" color="#00ccff">
</body>
Visualizao:
63
11 Linhas Verticais
No existe uma tag que cria uma linha vertical (assim como <hr> para a horizontal), o que existe so alguns macetes que substitui
esse comando.
Primeiro recurso: Se pegarmos o comando <hr> (a linha horizontal) e configurar seus atributos width para uma largura muito
pequena e size para uma altura muito grande temos uma linha vertical. um problema com esse recurso que ele no funciona para linhas
verticais maiores que size="100", ou seja, a linha ter no mximo um tamanho igual ao terceiro exemplo.
<body>
<hr width="2" size="50">
</body>
Visualizao:
Segundo recurso: aplicar o mesmo princpio (de afinar largura e alongar altura), mas em uma tabela. Os atributos so: border,
cellpadding, cellpacing e height. As linhas no tm limite de tamanho.
Cria-se, ento, uma tabela com UMA linha e UMA clula - sem textos!!!!! Ento teremos uma linha do tamanho que
necessitarmos.
<table border cellpadding="1" cellpacing="0" height="200">
<tr>
<td>
</td>
</tr>
</table>
Visualizao:
64
<table border cellpadding="1" cellpacing="0" height="400">

<tr>
<td>
</td>
</tr>
</table>
Visualizao:
Agora vou acrescentar cor e espessura.

<body>
<table border cellpadding="0" cellpacing="0" height="20" bgcolor="#006600">
<tr>
<td>
</td>
</tr>
</table>
<table border cellpadding="1" cellpacing="1" height="30" bgcolor="#ff2400">
<tr>
<td>
</td>
</tr>
</table>
<table border cellpadding="1" cellpacing="2" height="40" bgcolor="#0000c9">
<tr>
<td>
65
</td>
</tr>
</table>
</body>
Visualizao:
Os exemplos acima criam linhas verticais livres, isso , desvinculada com qualquer objeto, mas podemos utilizar a tag <table>
(tabela) para criar linhas vinculadas a objetos. Nos exemplos a seguir o texto ir determinar o comprimento da linha, e isso o mais
prtico quando se quer uma linha vertical (faz uma tabela, onde uma clula vai estar com o texto e a outra clula no conter texto e ser
to fina que parecer uma linha)
Repare que para alterar a posio (direita/esquerda) da linha, basta alterar a posio da "clula-linha" para antes ou depois da
clula que tem o texto. Para alterar cor e espessura das linhas basta configurar os atributos width e bgcolor da clula. Lembre-se: cada
clula comea com <td> e termina com </td>!!!!! Cada linha da tabela comea com <tr> e termina com </tr>!!!!
<table cellpadding="0">
<tr>
<td width="2" bgcolor="#db7093">
</td>
<td width="200">
isso é um texto com uma linha do lado... aquela linha é
uma célula da tabela e esse texto está em outra célula. A diferena
é a espessura delas, certo?
</td>
</tr>
</table>
Visualizao:
Outro exemplo, mas com a linha um pouco mais grossa (lembre-se que o que diferencia a largura das clulas.... se quiser a linha
mais grossa, deve-se aumentar a largura da clula que no recebe texto).
<tr>
<td width="250">
Outro exemplo de texto com uma linha grossa à direita (essa linha
é outra célula da tabela, mas à direita e mais fina que a
célula desse texto aqui).
</td>
<td width="7" bgcolor="008000">
</td>
</tr>
</table>
Visualizao:
66
Aqui est um exemplo de uma tabela com trs clulas, sendo que a do meio recebe o texto e as outras duas (as de fora) possuem
uma largura bem estreita (width=3)
<table>
<tr>
<td width="3" bgcolor="purple">
</td>
<td width="280">
Aqui está um texto com linhas dos dois lados.... Elas são
duas células da tabela (uma antes e outra depois desta célula AQUI que tem
este texto que você esté lendo!!!)
</td>
<td width="3" bgcolor="purple">
</td>
</tr>
</table>
Visualizao:
Outros Separadores de Texto

O comando de insero de imagens tambm pode ser usado como separador de texto, etc... Existem muitos arquivos gif ou jpeg
criados exclusivamente para isso. Para inserir um arquivo de imagem usamos o comando
<img src="arquivo.ext">
Os parmetros width=nmero e height=nmero que altera a largura e altura da imagem pode causar alguns efeitos interessantes:
<body>
<center>
<img src="imagens\linha.gif">
</center>
<center>
<img src="imagens\vizinhanca.gif">
</center>
<center>
<img src="imagens\mabelT.gif">
</center>
</body>
Visualizao:
Outros exemplos de linhas:
67
68
12 Texto PrFormatado
<pre atributos> ... </pre>
pre (Preformatted Text). digitar em um cdigo HTML vrios espaos em branco entre duas palavras, de nada adiantar, o browser
s reconhecer um. Para resolver isso usando os tags <pre>...</pre>. O texto que estiver dentro deste elemento preservar a
formatao original (o browser interpretar os espaos, retornos e tabulaes). O texto pr-formatado exibido em uma fonte de
espaamento fixo, como Courier, ou seja, cada letra vai ocupar sempre o mesmo espao que a outra. Pode conter: texto, elementos de
formatao de caracteres, <a>, <br>, <hr> e pode ser utilizado dentro de: <body>, <form>, <blockquote>, <dd>, <li>
width="..."
Opcional. informa a largura em colunas.
Note que as fontes ocupam tamanho fixo, mas o tamanho das letras depende do browser:
<pre>
através do comando pre
em qualquer
mostrado
pode-se
lugar da tela
bem igual
colocar
texto
que ele
ao codigo fonte.
sera
inclusive com um moooooooonte de espacos e novas-linhas

como
esse
exemplo aqui.
Cuidado!!! Se fizer linha muito longa o usuário vai ter de

usar a
barra de
rolagem horizontal do navegador porque ele não vai quebrar
a linha
sozinho!!!!
</pre>
Visualizao:
Espaamento Forado
69
Non-Breaking Space.Ainda que o Webmaster adicione dez espaos com a tecla [space] vrias vezes em seu cdigo fonte, o
browser ir considerar apenas um espao. isso muito chato quando descobrimos que o texto teima em no ficar no lugar indicado de
uma coluna. uma forma de impor espaamentos forados o conjunto de caracteres (non-breaking space). Repita 3 vezes
se ter trs espaos seguidos.
<body>
1000,00
<br>
  903,00
<br>
&nbsp   21,00
<br>
&nbsp&nbsp    0,23
</body>
Visualizao:
usando <p> aumentando o espaamento vertical entre cada pargrafo... esse um jeito de pular a linha sem usar <br>.
<body>
O número de computadores de médio porte utilizados nas empresas com
Linux em todo mundo vem crescendo rapidamente.
<p>
No último trimestre de 2003, sua comercialização
totalizou 960 milhões de dólares: 63,1% superior às vendas no ano
anterior.
</p>
</body>
Visualizao:
<q atributo> ... </q>

usado para citaes curtas. Se parece com o blockquote.
cite=URL
Especifica a fonte da citao.:
<q cite=url>
texto...
</q>:
<blockquote> ... </blockquote>

Destacar um bloco de texto aumentando a espessura de suas margens.
Pode conter: listas, cabealhos, separadores, blocos, formulrios, tabelas e estar dentro de <body>, <form>, <dd>, <li>,
<blockquote>, <pre>
Observe o deslocamento das margens dir/esq. do segundo pargrafo que foi ajustado com o parmetro:
70
<body>
Sobre JavaScript e Applets Java em sites:
<br>
Segundo John e Peter Kent em JavaScript para Netscape - Guia Oficial:
<blockquote>
O Javascipt enviará informações da página para a
applet Java, e a applet Java poderá retornar algo para a página.
</blockquote>
Ou seja, o JavaScript é uma interface entre sua página e os Applets
Java.
</body>
Visualizao observe o segundo pargrafo:
<address> ... </address>

Bloco de texto destacado. utilizado para endereos e para assinar o documento.
<body>
Veja um exemplo de address:
<address>
CTT - Maxwell Educacional
<br>
Porto Alegre - RS - Brasil
</address>
</body>
Visualizao:
<div atributos> ... </div>

divide a pgina em blocos que podem ser alterados de acordo com caractersticas comuns.
align="center", "left" ou "right"

Alinha todo o bloco de acordo com a posio.
Altera a apresentao do contedo do bloco (cor, fonte, tamanho, sublinhado, estilo, espaamento) de acordo com uma lista de
propriedades de estilo.
<body>
<div style="color: 005500; font-family: Comic Sans MS;font-size: 12pt;line-height:
14pt">
71
formata esse texto em verde, fonte Comic Sans MS 12pt (ou qualquer outra fonte sem
serifa caso não tenha Comic Sans) e espaçamentos entre linhas de 14pt.
</div>
</body>
Visualizao:
<center> ... </center>

Alinha um bloco de texto, cabealho, tabela ou imagem no centro da pgina.
Pode conter blocos e ser utilizado dentro de <body>, <form>, <blockquote> e <pre>.
<body>
Figuras também podem ser centralizadas:
<br>
<br>
<center>
<img src="imagens\div82.gif">
</center>
</body>
Visualizao:
<acronym atributos> ... </acronym>

Esta tag indica que o contedo envolvido por ela um acrnimo (abreviao formada pelas letras iniciais de uma frase.)
title
Este atributo apresenta a forma desabreviada do acrnimo, tornando desnecessria a utilizao de textos explicativos sobre a
abreviao (geralmente apresentada entre parnteses).
<body>
Para programar em Java necessita do
<acronym title = "Java Developer's Kit">
JDK
</acronym>
instalado.
</body>
Visualizao:
72
13 Listas
Uma forma de estruturar um documento HTML a utilizao de listas. Elas funcionam como um sumrio, um menu ou um
resumo do contedo do documento.
Existem dois tipos de listas: no ordenadas (que contm uma srie de itens sem numerao), e as ordenadas (que atribuem um
nmero ou letra para cada elemento da lista).
No Ordenada
<ul atributos> ... </ul>
uL (unordered List) o comando usado para gerar lista no ordenada. Define os nveis (para identao). Ele deve envolver o
primeiro e o ltimo item da lista. Cada <uL> funciona como um toque na tecla tab , sendo que se coloco um <ul> dentro de outro <ul>,
eu terei uma identao no meio da lista.
Cada <li> um tpico da lista. No necessita </li>, mas pode ser usado!
Pode conter <li> e poder ser utilizado dentro de: <li>, <dd>, <body>, <form>, <blockquote>, <td>, <center>
type= tipo"
tipo: disc, circle ou square.
Estrutura de uma lista tpica:
<ul type="disc">
<li>Lista NÃO ORDENADA:
<ul type="square">
<li> Vegetais
<li> Animais
<ul type="circle">
<li> Vertebrados
<li> invertebrados
</uL>
<li> Minerias
</uL>
</ul>
Visualizao: (veja que a cada <ul> eu mudo o nvel da identao)
Ordenada
<ol atributos> ... </ol>
ol (Ordered List) - Consiste no comando para a lista ordenada de itens com nmeros, letras maiscula ou minscula e algarismos
romanos.
Pode conter: <li> e utilizado dentro de: <li>, <dd>, <body>, <form>, <blockquote>, <td>, <center>
type="tipo"
73
"tipo-de-numerao" descreve o formato de numerao empregado na lista. Pode ser de letras:
type=A (alfabeto maisculas); type=a (alfabeto minsculas); type=i (romanos maisculos); type=i (romanos minsculos) ou
type=1 (numerao -default).
start="valor"
"valor" o nmero no qual se inicia a contagem de numerao. Por exemplo: start=8 iniciaria a contagem a partir de 8, viii, Viii, H
ou h, dependendo do valor do atributo type.
A cada novo <ol> reinicia a contagem!
Estrutura de uma lista numerada tpica:
<ol type="1" START="8">
<li> Melancia
<li> Repolho
<ol type="a">
<li> Repolho-roxo
<li> Repolho-verde
</ol>
<li> Goiaba
<ol type="i">
<li> Goiaba-branca
<ol type="1">
<li> Bem madura
<li> Ainda verde
</ol>
<li> Goiaba-vermelha
</ol>
</ol>
Visualizao: observe Bem os nveis de texto e como reinicia a contagem a cada novo <ol>!
<li atributos> ... </li>

Li (List item), item de lista. O descritor de fechamento ( a tag </li> ) opcional (em geral no utilizado).
Pode conter: outro nvel de listas (<uL>, <ol>, <dl>), texto, elementos de formatao de caracteres, blocos, <a>, <img>, <br> e
utilizado dentro de <uL> e <ol>
<dl atributos> ... </dl>

Listas de definies. NO possui numerao e nem caracteres de marcao (circulo, quadrado, bolinha) antes de cada tpico.
Somente identa (usando um <dl> para cada identao e um <dt> para cada tpico e <dd> para definir cada tpico)
Pode conter: <dt>, <dd> e ser utilizado dentro de: <li>, <dd>, <body>, <form>, <blockquote>, <td>, <center>
compact
opcional. Especifica uma formatao compacta (que utiliza menos espao vertical)
74
<dt atributos> ... </dt>

Marca o termo a ser definido. O descritor de fechamento opcional e em geral no utilizado.
Pode conter: texto, elementos de formatao de caracteres, <a>, <img>, <br> e utilizado dentro de: <dl>
<dd atributos> ... </dd>

Marca a definio do termo. O descritor de fechamento opcional e em geral no utilizado.
Pode conter: listas , <uL>, <ol>, <dl>, texto, elementos de formatao de caracteres, blocos, <a>, <img>, <br> e utilizado dentro
de: <dl>
<dl>
<dt> varanda
<dd> um cmodo de uma casa.
<dt> Garagem
<dd> um local onde se estaciona.
<dl>
<dt> Garagem coberta
<dd> Local coberto, onde se estaciona.
<dt> Garagem aberta
<dd> Local aberto, onde se estaciona.
</dl>
<dt> Telhado
<dd> Local onde o gato fica
</dl>
Visualizao (observe que no existe marcao no incio dos tpicos)
Usando Figuras como Marcadores

A combinao do comando <blockquote> com alguns gifs, pode criar efeitos de marcao elaborados, tambm. Nesse caso, a
identao (como a tecla tab do teclado) ser feita a cada <blockquote>. Para cada nvel mais direita, mais um <blockquote> deve ser
aberto
<blockquote>
<img src="imagens\cafe.gif" >
Captulo i
<br>
<blockquote>
<img src="imagens\pipoca.gif" >
Pargrafo
<br>
<blockquote>
<img src="imagens\pipoca2.gif">
Texto
<br>
75
</blockquote>
</blockquote>
Captulo ii
<br>
<blockquote>
Pargrafo
<br>
<blockquote>
<img src="imagens\pipoca2.gif" >
Texto
<br>
</blockquote>
</blockquote>
Captulo iii
<br>
<blockquote>
Pargrafo
<br>
<blockquote>
<img src="imagens\pipoca2.gif" >
Texto
<br>
</blockquote>
</blockquote>
</blockquote>
Visualizao: Observe que a cada novo <blockquote> criado um novo nvel
76
14 Tabelas
Tabela surgiu pela primeira no HTML na verso 3.2 para melhorar o layout da pgina oferecendo recursos para posicionar seus
textos e imagens semelhante as pginas dos jornais e revistas.Basicamente uma tabela composta por trs tags:
<table>...</table>
Este o elemento principal que estabelece os limites da tabela. Dentro dele esto todos os demais elementos da tabela;
<tr>...</tr>
Este elemento define a linha da tabela. Para uma tabela, por exemplo, ter 4 linhas este atributo deve ser escrito 4 vezes.;
<td>...</td>
Este define a clula da linha. Dentro das clulas podemos inserir o texto, imagens, formulrios e at mesmo outra tabela.
A seguir est um exemplo de uma tabela simples montada com estas 3 tags. Observe que para criar duas linhas tive que repetir o
conjunto <tr>...</tr> duas vezes. Para criar 3 clulas em cada linha repeti o conjunto <td>...</td> 3 vezes em cada linha. E finalmente um
conjunto de <table>...</table> envolvendo toda a estrutura. A barra "/" antes da tag representa o fechamento (fim) dela.
<table border=1>
<tr>
<td>
Linha
</td>
<td>
Linha
</td>
<td>
Linha
</td>
</tr>
<tr>
<td>
Linha
</td>
<td>
Linha
</td>
<td>
Linha
</td>
</tr>
</table>
1, coluna 1
1, coluna 2
1, coluna 3
2, coluna 1
2, coluna 2
2, coluna 3
Visualizao:
Agora vamos nos aprofundar um pouquinho mais.
<table atributos> ... </table>

table o elemento principal que estabelece os limites de uma tabela. Ele pode conter atributos:
77
border="valor"
Define uma borda para a tabela. Se este atributo no estiver presente, a tabela ser exibida sem bordas ou linhas separando as
clulas. Quando especificado border sem nenhum valor, criada uma borda de 1 pixel de espessura.
<table>
<td>
Clula sem borda
</td>
</table>
<table border>
<td>
border = 1
</td>
</table>
<table border="5">
<td>
border = 5
</td>
</table>
Visualizao:
cellpacing="valor"
Controla o espaamento entre as clulas de uma tabela ou torna as bordas mais grossas, se elas existirem. Valor absoluto em
pixels.
<table border cellpacing="3">
<tr>
<td>
clula 1
</td>
<td>
clula 2
</td>
</tr>
</table>
<br>
<br>
<table border cellpacing="10">
<tr>
<td>
clula 1
</td>
<td>
clula 2
</td>
</tr>
</table>
<br>
<br>
<table cellpacing="30">
<tr>
<td>
78
clula 1
</td>
<td>
clula 2
</td>
</tr>
</table>
Visualizao:
cellpadding="valor"
Controla a quantidade de espao entre o contedo da clula e suas bordas, estando elas visveis ou no. Valor absoluto em pixels.
<table border cellpadding="10">
<tr>
<td>
clula 1
</td>
<td>
clula 2
</td>
</tr>
</table>
<table border cellpadding="30">
<tr>
<td>
clula 1
</td>
<td>
clula 2
</td>
</tr>
</table>
<tr>
<td>
clula 1
</td>
<td>
clula 2
</td>
</tr>
</table>
Visualizao:
79
width="valor" e
height="valor"
Permite especificar a largura e altura da tabela, seja atravs de um valor absoluto em pixels ou atravs de uma percentagem da rea
da pgina. Para percentagem, utilize o sinal "%" aps o nmero.
Reduza a janela do browser e observe o efeito que isso causa aos dois exemplos acima. O exemplo 1 mantm o seu tamanho fixo,
enquanto o exemplo 2 ajusta-se a % da janela reduzida.
<table border width="60" height="40">
<tr>
<td>
clula 1
</td>
<td>
clula 2
</td>
</tr>
</table>
<table border width="30%" height="30%">
<tr>
<td>
clula 1
</td>
<td>
clula 2
</td>
</tr>
</table>
Visualizao:
bgcolor="#rrggbb" ou "nome"
Altera a cor de fundo da tabela ou apenas da clula conforme aonde ele for usado. Pode ser atravs do valor RGB ou atravs de um
dos 16 nomes padro VGA do Windows.
<table bgcolor="blue">
<tr>
80
<td>
clula 1
</td>
<td>
clula 2
</td>
</tr>
</table>
Visualizao:
background ="diretrio/nome do arquivo"

coloca um arquivo de imagem como fundo da tabela ou da clula. Se o arquivo de imagem estiver no mesmo diretrio do
arquivo.htm onde a tabela exibida voc pode omitir o diretrio no endereo do background.
<table border background="imagens\confeti.jpg" height="80" width="200">
<tr>
<td>
clula 1
</td>
<td>
clula 2
</td>
</tr>
</table>
Visualizao:
bordercolor ="#rrggbb" ou "nome"

Altera a cor das bordas da tabela.
<table border bordercolor="#4682b4">
<tr>
<td>
clula 1
</td>
<td>
clula 2
</td>
</tr>
</table>
<br>
<br>
<table border bordercolor="red">
<tr>
<td>
clula 1
</td>
<td>
clula 2
</td>
</tr>
</table>
Visualizao:
81
bordercolordark ="#rrggbb" ou "nome"

Altera a cor da sombra das bordas de toda a tabela ou de uma clula especfica.
<table border bordercolordark="#4682b4">
<tr>
<td bordercolordark="#FF6600">
clula 1
</td>
<td>
clula 2
</td>
</tr>
</table>
<br>
<br>
<table border bordercolordark="red">
<tr>
<td bordercolordark="#000000">
clula 1
</td>
<td bordercolordark="#000000">
clula 2
</td>
</tr>
</table>
Visualizao (compare com o outro exemplo, onde s tinham as ocres, e no as sombras)
bordercolorlight ="#rrggbb" ou "nome"

Altera a cor da luz das bordas de toda a tabela ou de uma clula especfica.
<table border bordercolorlight="#4682b4">
<tr>
<td bordercolorlight="#CC33CC">
clula 1
</td>
<td>
clula 2
</td>
</tr>
</table>
<br>
<br>
<table border bordercolorlight="red">
82
<tr>
<td>
clula 1
</td>
<td>
clula 2
</td>
</tr>
</table>
Visualizao:
<tr atributos> ... </tr>

table row - Linha de tabela. Todas as clulas so dispostas em linhas. O conjunto <tr>...</tr> deve se repetir conforme o nmero
que linhas que se deseja criar. table row pode conter os seguintes atributos:
align="left, right" ou "center"

Controla o alinhamento horizontal do contedo das clulas na linha. Para habilitar align configurei espaamento horizontal da
tabela com o width="300", para que haja o deslocamento horizontal do texto.
<table border width="300">
<tr align="center">
<td>
Texto no
</td>
<td>
Centro
</td>
<td>
da linha
</td>
</tr>
</table>
<br><br>
<tr align="right">
<td>
Texto
</td>
<td>
todo
</td>
<td>
direita
</td>
</tr>
</table>
Visualizao:
83
valign="baseline, bottom, top" ou "middle"

Controla o alinhamento vertical do contedo das clulas na linha. Para habilitar Valign configurei o espaamento vertical da tabela
com height="100", para que haja o deslocamento vertical do texto.
<tr valign="bottom">
<td>
Texto na
</td>
<td>
base da
</td>
<td>
linha
</td>
</tr>
</table>
<br><br>
<tr Valign="middle">
<td>
Texto no
</td>
<td>
meio da
</td>
<td>
linha
</td>
</tr>
</table>
Visualizao:
bgcolor="cor"
Define a cor de fundo da linha envolvendo todas as clulas que estiverem nela.
<table border="1" width="60%">
<tr bgcolor="ff4500">
84
<td>
Cuidado com
</td>
<td>
as cores para
</td>
</tr>
<tr bgcolor="db7093">
<td>
o texto
</td>
<td>
poder ser lido!
</td>
</tr>
</table>
Visualizao:
bordercolor="cor"
Define a cor da borda da linha.
bordercolordark="cor"
Define a cor da sombra da borda da linha.
bordercolorlight="cor"
Define a cor da luz da borda da linha.
char="caracter"
Define o caracter de alinhamento da clula que pode ser um ponto, uma vrgula ou caracteres tais como "=", "/", ":", etc. No
exemplo abaixo usei um ponto como caracter de alinhamento.
charoff="nmero"
Define o deslocamento do caracter de alinhamento da clula. Ah! Muito poucos browsers sabem interpretar esses parmetros.
<table>
<colgroup align="char" char="." charoff="35%">
<tr>
<td>
880.76
</td>
</tr>
<tr>
<td>
7.032
</td>
</tr>
<tr>
<td>
13.48
</td>
</tr>
<tr>
<td>
85
542.23
</td>
</tr>
</colgroup>
</table>
Visualizao:
table data <td atributos> ... </td>

Clula de dados da tabela. Pode conter texto, listas, elementos de formatao de caracteres, blocos, arquivos de imagem e tambm
outras tabelas.
rowspan=nmero
Especifica o nmero de linhas que a clula pode ocupar. O default 1. o famosos efeito "mesclar clulas" na horizontal
<tr>
<td rowspan=2 align="center">
Mesclada
</td>
<td>
Normal
</td>
</tr>
<tr>
<td>
Normal
</td>
</tr>
</table>
Visualizao:
colspan=nmero
Especifica o nmero de colunas que a clula pode ocupar. O default 1.
<tr>
<td colspan="2" align="center">
Celula 1 primeira linha
</td>
</tr>
<tr>
<td>
Celula 1 segunda linha
</td>
<td>
celula 2 segunda linha
</td>
86
</tr>
</table>
Visualizao:
Agora a combinao entre as duas:

<tr>
<td colspan="2" align="center">
L1 C1
</td>
<td>
L1 C2
</td>
</tr>
<tr>
<td rowspan="2" align="center">
L2 C1
</td>
<td>
L2 C2
</td>
</tr>
<tr>
<td>
L3 C1
</td>
</tr>
</table>
Visualizao:
align=left, right ou center

Controla o alinhamento horizontal do contedo das clulas.
<tr>
<td align="right">
right - cuidado com a grafia
</td>
<td align="center">
center
</td>
<td align="left">
left
</td>
</tr>
</table>
Visualizao:
87
valign=baseline, bottom, top ou middle

Controla o alinhamento vertical do contedo das clulas.
<tr>
<td Valign="bottom">
bottom
</td>
<td Valign="middle">
middle
</td>
<td Valign="top">
top
</td>
<td Valign="baseline">
baseline
</td>
</tr>
</table>
Visualizao:
nowrap
Atributo Booleano. evita que haja uma quebra de linha dentro da clula (se includo significa verdadeiro, seno falso). O termo
booleano provm do nome do matemtico ingls George Boole (1815 / 1864), criador da lgebra booleana.
Este atributo, em conjunto com o atributo width, permite criar clulas com tamanho fixo. Assim quando o browser
redimensionado pelo usurio, as clulas tero sempre o mesmo tamanho ao invs de quebrar seu contedo em vrias linhas.
A sintaxe ...
<td nowrap width="200">...</td>
...especifica uma clula de 200 pixels de largura cujo contedo no pode ter quebra de linha (text wrapping).
Abaixo o cdigo para criao de duas tabelas iguais, porm a ltima no tem o atributo nowrap. Esse efeito, ento ser visualizado
quando a janela no estiver maximizada.
<table border>
<tr>
<td nowrap width="200" align="center">
Esta uma tabela comum...
</td>
com uma clula configurada
</td>
COM o atributo nowrap.....
</td>
</tr>
</table>
<br><br>
<table border>
<tr>
<td width="200" align="center">
Esta uma tabela comum...
</td>
com uma clula configurada
</td>
88
Sem o atributo nowrap.....
</td>
</tr>
</table>
Visualizao:
Janela maximizada:
E agora mais estreita (observe a diferena a segunda tabela no tem nowrap)
width=valor
Controla a largura da clula, seja atravs de um valor absoluto em pixels, seja atravs de uma percentagem em relao largura da
tabela.
&nbsp = Espao vazio
<table border>
<tr>
<td width="10">

</td>
<td width="10">
width=10
</td>
<td width="80">
width=80
</td>
<td width="120">
width=120
</td>
</tr>
</table>
Visualizao:
89
bgcolor="#RRGGBB"
Define uma cor de fundo para a clula. No exemplo abaixo estou apresentando uma configurao de cores completa envolvendo
table, tr e td.
background="diretrio/nome do arquivo"
Define uma textura de fundo na clula.
Quando eu coloco um background na tabela (ou na linha), as clulas daquela tabela (ou daquela linha) recebero (todas) aquele
background, a no ser que eu defina um outro para cada uma delas.
<table border background="imagens\menta.jpg">
<tr>
<td background="imagens\sky.jpg">
aqui tem a figura sky.jpg
</td>
<td background="imagens\papel.jpg">
e aqui a papel.jpg
</td>
<td>
e aqui como não identifiquei, ela fica com o fundo da
própria tabela (o menta.jpg)
</td>
</tr>
</table>
Visualizao (observe que a tabela tem o background menta.jpg. a primeira clula tem um outro (o sky.jpg) e a segunda clula tem
o (papel.jpg), como no defini um para a terceira clula, ela recebe o da tabela o menta.jpg)
bordercolor
Altera a cor da borda de uma clula especfica dentro da tabela.
<table border=3 bordercolor="blue">
<tr>
<td bordercolor="red">
clula 1
</td>
<td>
clula 2
</td>
</tr>
</table>
<br><br>
<table border=5 bordercolor="purple">
<tr>
<td>
clula 1
</td>
<td border =3 bordercolor="yellow">
clula 2
</td>
</tr>
</table>
Visualizao:
90
bordercolordark e bordercolorlight
Tm a mesma funo que estes atributos em <table> porm aqui eles so aplicados apenas em uma clula. Os exemplos j foram
apresentados acima.
Aqui est um tabuleiro. A tabela definida assim:
<table border="3" cellpadding="1">
E as linhas assim:
<tr height="25">
Cada clula dentro de cada linha assim (onde o bgcolor varia em white ou black)
<td width="25" bgcolor="white">

</td>
Visualizao:
<th atributos> ... </th>

title heading. Este comando especifica um ttulo centralizado e em negrito para cada coluna.
<table border >
<tr>
<th>
texto negrito e no centro por causa da tag th
</th>
<th>
linha 1 coluna 2 - tambem com a tag th
</th>
</tr>
<tr>
<td>
linha 2 coluna 1
</td>
<td>
linha 2 coluna 2
</td>
</tr>
</table>
Visualizao:
91
<caption atributos> </caption>

Este elemento usado para especificar uma legenda tabela e sua tag deve seguir imediatamente aps a table inicial. S deve
haver uma tag desse tipo na tabela.
align=top, (default) ou bottom

Controla a posio da legenda em relao a tabela.
<table border>
<caption align="top">
Legenda no topo
</caption>
<tr>
<th>
L1 C1 - Titulo 1 (com th)
</th>
<th>
L1 C2 - Titulo 2 (com th)
</th>
</tr>
<tr>
<td>
L2 C1 (celulas normais com td)
</td>
<td>
L2 C2
</td>
</tr>
</table>
Visualizao:
Formatando grandes tabelas

Vamos imaginar a seguinte situao: Quero criar uma tabela que possui muitas clulas, distribudas em diversas linhas, sendo que
algumas clulas tero uma formatao de cor e texto diferentes que as demais. Eu no posso configurar <table> porque, como falei, a
clulas possuem formataes diferentes e <tr> no aceita formatao para clulas individuais.
Nesse caso o jeito seria entrar em cada clula e inserir os parmetros, clula por clula... Tudo bem, j fiz isso diversas vezes e com
o auxlio do comando COPY fica at mais fcil. Porm quando a tabela consideravelmente enorme, esse mtodo deixa de ser adequado,
pois o excesso de formatao alm de ser trabalhoso deixaria o arquivo desnecessariamente "pesado". Para resolver este problema
existem trs tags criadas exclusivamente para essa finalidade:
<thead>...</thead>
formata o cabealho.
92
<tbody>...</tbody>
formata o corpo.
<tfoot>...</tfoot>
formata o rodap.
Elas foram criadas exclusivamente para facilitar a formatao dos mdulos da tabela.
Vamos supor que a tabela abaixo uma lista de preos de materiais enorme, com 80 itens!! A borda (em table) possuir uma
formatao diferente que o seu ttulo, cabealho e rodap, que por sua vez sero diferentes que o seu corpo. Configurar cada item do
ttulo, cabealho e rodap at que seria simples, porm o corpo da tabela possui 240 clulas!!! Pois em cada item possuo 3 clulas e como
so 80 itens (3 x 80 = 240). imagine acionar o comando COPY 240 vezes!!
<table border width="350" bgcolor="cyan"> 
<thead bgcolor="gold">

<tr>
<td colspan=5 align="center">
Parte de cima da tabela
</td>
</tr>
</thead>
<tbody bgcolor="purple" style="font-size:18"> 
<tr>
<td width="25">
item
</td>
<td width="150">
DESCRIO
</td>
<td width="50">
QUANT.
</td>
</tr>
</tbody>
<tbody bgcolor="pink" style="font-size:12"> 
<tr>
<td>
1)
</td>
<td>
CD-RW
</td>
<td>
R$3,50
</td>
</tr>
<tr>
<td>
2)
</td>
<td>
Cartucho recarregado
</td>
<td>
17,80
</td>
</tr>
<tr>
<td>
...
</td>
<td>
...
93
</td>
<td>
...
</td>
</tr>
<tr>
<td>
80)
</td>
<td>
Caneta para quadro branco
</td>
<td>
R$2,00
</td>
</tr>
</tbody>
<tfoot bgcolor="blue" style="color:#FFFFFF"> 
<tr>
<td colspan=5 align="center">
Parte de baixo... ;)
</td>
</tr>
</tfoot>
</table>
Visualizao:
Usando Tabelas para criar Colunas

de Texto
Uma forma de incrementar a apresentao de sua homepage dividir o texto em duas ou mais colunas, estilo manchete de revista.
Vou montar um exemplo com um texto formatado em duas colunas. Primeiro digite o texto em modo simples, sem qualquer
formatao. Depois divida o texto exatamente no meio criando uma linha em branco entre o texto superior e o inferior (conforme o
exemplo do texto em itlico, abaixo). O texto superior ser a coluna direita e o inferior a esquerda.
Agora vou inserir os parmetros de tabela <table> , envolvendo os dois blocos de texto, superior e inferior. Entre eles irei inserir
uma coluna intermediria com <td width="8%">, direi que essa linha possui um packground especial (as laranjas), s para identificar a
linha e para separar uma coluna da outra usando essa coluninha especial.
<body>
<table>
<tr>
<td width="20%">
Saiba o que fez Steve Jobs parecer um bom sujeito
</td>
<td width="5%" background="imagens\laranja.jpg">
</td>
<td width="75%">
em 1976, a Apple começou a comercializar o Apple i por uS$
666 e logo nesse primeiro ano,
as vendas alcanaram uS$ 774 mil. Steve Jobs viu que
estava na hora de ampliar a empresa, e para isso apelou para os empréstimos. Diz
o financeiro (que emprestou o dinheiro) que ele era muito mal apresentado, se vestia
muito mal, mas que só comia frutas, e
isso o fez dar um voto de confianca e
94
efetuar o empréstimo para a apple.
</td>
</tr>
</table>
</body>
Visualizao (Observe que a soma de "width="20%" + "5%" + "75%" = 100% que a largura da tela do seu monitor. A
coluna do centro serve como um separador de texto.Agora vou usar o mesmo exemplo para inserir imagens nas colunas. )
<body>
<table>
<tr>
<td width="48%">
<img src="imagens/ping.gif"
align="left"
vspace="6"
hspace="10"
border="2" >
Essa figura e esse texto esto na mesma clula, viu?
</td>
<td width=3pt bgcolor=gold>
Aqui é outra célula!
</td>
<td background="imagens\pipoca.jpg" align="left" vspace="6" hspace="10"
border="2">
E isso aqui é para lembrar
SÁBADO, ótimo dia para comer pipoca.
</td>
</tr>
</table>
</body>
que
amanhã
é
Visualizao: veja que a cada novo td uma nova clula aberta. Repare que eu no determinei tamanho para a nova clula,
portanto ela assume o resto da largura disponvel.
imagine o mesmo exemplo com figura de centro e o texto margeando suas duas laterais. Para isso vou criar mais dois blocos de
tabela,com trs divises cada, e trabalhar com eles.
Quando se cria uma tabela com mais de uma linha e com mais de uma coluna, os tamanhos de coluna (largura das clulas) da
primeira linha que definiro a largura das demais colunas, portanto, se o tamanho das clulas da primeira linha for 10, depois 20 e
depois 70%, as outras linhas dessa mesma tabela tambm tero essas mesmas larguras de colunas. Para eu ter larguras diferentes de
colunas, tenho que criar nova tabela (nem que a tabela tenha s uma linha).
<body>
<table>
<tr>
<td width="48%">
Primeira
célula da PRIMEIRA tabela. Esse vermelho aqui do
lado é uma outra célula
</td>
95
<td width="1%" bgcolor=red>
</td>
<td width="51%" background="imagens\margarida.jpg">
Aqui está a terceira célula - desta vez, com
margaridas no fundo.
</td>
</tr>
</table>
<table>
<tr>
<td width="25%">
Primeira célula desta SEGUNDA tabela. O baterista aqui do
lado é a segunda célula desta tabela aqui
</td>
<td width="50%">
<img src="imagens\bateria.gif" align="left" vspace="6" hspace="10"
>
</td>
<td width="25%">
Terceira e última célula desta tabela.
</td>
</tr>
</table>
<table>
<tr>
<td width="48%">
Primeira célula da primeira linha. Aqui do lado tem outra
célula - também poderí amos chamar de COLUNA.
</td>
<td width="10%" bgcolor=00ff7f >
</td>
<td width="48%">
Esta é a última célula desta linha. Veja que a
largura das células da primeira linha vai ser a mesma largura da segunda linha mesmo que eu não defina largura na segunda linha
</td>
</tr>
<tr>
<td >
primeira célula da SEGUNDA LINHA. Aqui do lado tem outra
célula
</td>
<td bgcolor=pink >
</td>
<td>
última célula dessa linha!!.
</td>
</tr>
</table>
</body>
Visualizao: (repare que a ultima tabela tem 2 linhas, e que na segunda linha eu no especifico largura de celula porque ser
sempre as mesmas larguras da primeira linha da tabela).
96
Imagens,
Tabelas
Cores
Backgrounds
em
Alinhando trs arquivos de imagem.gif.

<body>
<table border>
<tr>
<td>
<img src="imagens\garfield.gif">
</td>
<td>
<img src="imagens\rosa.jpg">
</td>
<td>
<img src="imagens\martelando.gif">
</td>
</tr>
</table>
</body>
Visualizao: (observe que como nao defini a largura das celulas, elas se dispe conforme o tamanho da figura veja tambm que
o atributo "border" na tag table define que a tabela ter uma borda)
Configurando border="0" (sem borda) e usando cellpadding="50" para aumentar os espaos entre as figuras temos os seguintes
resultados:
<tr>
<td>
97
<img src="imagens\garf.gif">
</td>
<td>
<img src="imagens\bola.gif">
</td>
<td>
<img src="imagens\borboleta.gif">
</td>
</tr>
</table>
Visualizao:
Voc pode inserir um texto do lado direito, esquerdo, ou, usando a tag <br>, (break line = quebra de linha), acima e abaixo da
imagem. Voc pode usar normalmente quebras de linhas e at linhas (<hr>) e formataes (<b>) dentro de uma clula.
Aqui colocarei cellpadding (distncia) = 10, compare com o exemplo acima (do Garfield), que o cellpadding 50!
<tr>
<td>
<img src="imagens\queijo.jpg"><br>um queijo...
</td>
<td>
um chocolate
<br>
<img src="imagens\chocolate.jpg">
</td>
<td>
<img src="imagens\rosa.jpg">E flores...!
</td>
</tr>
</table>
Visualizao: (repare que como no coloquei <br> depois da figura na ltima clula, o texto ficou do lado)
Agora vamos inserir uma cor de fundo com o atributo bgcolor:

<table border="0" cellpadding="10" bgcolor="#87ceeb">
<tr>
<td>
<img src="imagens\magica.gif">
<br>Abóboras!
98
</td>
<td>
O Sistema Solar
<br>
<img src="imagens\sistema.gif">
</td>
<td>
<img src="imagens\ramalhete.gif">
um ramalhete!
</td>
</tr>
</table>
Visualizao: (observe que o fundo ficou azul e que "Abboras" est escrito em baixo porque tem um <br> antes, e que "O
Sistema Solar" est escrito em cima da figura porque entre o texto e a figura tem um <br>. Veja a distncia entre os objetos com o uso do
cellpadding = 10)
inserindo um background. (figura como fundo)

<table >
<tr>
<td bgcolor=ba55d3>
<img src="imagens\pegadas.gif"
<br>
Esse fundo é uma cor (uso do bgcolor).
</td>
<td background="imagens\pool.jpg">
Aqui e no cogumelo, eu uso o background (para ter figuras como fundo)
<br>
<img src="imagens\jacare.gif">
</td>
<td background="imagens\manta.jpg">
<img src="imagens\cogumelo.gif">
</td>
</tr>
</table>
Mais um exemplo de como se pode ter efeitos diferentes (usando figuras com movimento como fundo)uso do cellpacing="0" para
99
eliminar os espaos entre as clulas.
<table border="0" cellpadding="20" cellpacing="0">
<tr>
<td background="imagens\color.gif">
<img src="imagens\quadro.gif">
</td>
<td background="imagens\inch.gif">
<img src="imagens\dado.gif">
</td>
<td background="imagens\gota.gif">
<img src="imagens\cabeca.gif">
</td>
</tr>
</table>
Visualizao:
Alguns gifs so timos para se colocar bem em cima da pgina (como enfeite)... e eles podem ocupar a largura toda da tela (so
timos para sublinhas ttulos, por exemplo). Esses gifs tambm podem ser colocados em tabelas (como no exemplo abaixo, onde
dependendo da altura do texto ele vai repetir ou no a figura dentro da clula), mas tenha muito cuidado na hora de inserir textos em cima
de figuras (o internauta pode ter dificuldade de ler).
Gifs usados:
Pisca (troca as cores das lmpadas e "acende")
Jacaroa (pisca os olhos):
Pasta (a mo comprime o tubo e a "pasta" : espirrada at o fim da pgina (ou da clula da tabela)

<tr>
<td background="imagens\pisca.gif" width="150">
<b>
olhe as cores!!
</b>
</td>
<td background="imagens\jacaroa.gif" width="400">
<font color=ba55d3>
100
um gif interessante
<br>
colocar bem em cima
<br>
de sua pagina!
</font>
para
</td>
<td background="imagens\pasta.gif" width="200">
</td>
</tr>
</table>
Visualizao:
Fazendo Grficos de Estatsticas

Geralmente o Webmaster utiliza arquivos gif ou jpg que (c entre ns), alm de serem mais trabalhosos ocupam mais espao na
pgina, tambm.
Vamos analisar passo-a-passo como montar o grfico. Ele nada mais que um conjunto de mdulos sendo que cada mdulo
consiste numa tabela inserida dentro da outra.
Observe uma dificuldade que temos:
1 clula da 1 linha
2 clula da 1 linha
3 clula da 1 linha
1 clula da 2 linha
2 clula da 2 linha
3 clula da 2 linha
1 clula da 3 linha
2 clula da 3 linha
3 clula da 3 linha
Veja que quando eu defino a largura das clulas da primeira linha, eu estou definindo a largura das clulas de todas as linhas
daquela tabela (as primeiras clulas sempre tero a mesma largura, as segundas clulas tambm e as terceiras clulas tambm).
isso no tem problema quando vou usar uma tabela normal, mas quando eu vou fazer um grfico de barras horizontais, eu
necessito que a coluna onde vo as barras (a segunda coluna de cada linha, por exemplo), tenha tamanhos diferentes (porque as barras
tero tamanhos variados de linha para linha). isso obriga eu ter uma outra tabela dentro de cada uma das "segundas clulas" (dentro das
segundas clulas de cada linha), e essa nova tabela mudar de tamanho de acordo com o tamanho que eu quero as barras.
Somente colocando uma tabela dentro da outra que eu conseguirei larguras diferentes.
1.
2.
<table border=1>
<tr>
101
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
29.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
<td>
Homens
</td>
<td width="200">
<table height="15" width="50" bgcolor="pink">
<tr>
<td>
</td>
</tr>
</table>
</td>
<td>
300
</td>
</tr>
<!aqui inicia a outra barra -->
<tr>
<td>
Mulheres
</td>
<td>
<table height="15" width="100" bgcolor="pink">
<tr>
<td>
</td>
</tr>
</table>
</td>
<td>
600
</td>
</tr>
</table>
1- Tabela de base: ter 3 colunas (para ir o "masculino" e o "feminino", as barras e os valores)

2- primeira linha (para ir cada uma das 3 clulas)
3- Primeira clula da primeira linha (para ir o "masculino")
4- O contedo da primeira clula da primeira linha (o "masculino")
6- coluna onde vo as barras vai deve ser igual em todas as barras (por isso s defino na primeira) e deve ser maior que
a maior barra para ficar mais apresentvel.
7- largura, altura e cor da BARRA! Altura deve ser igual em todas as barras
8- linha que conter a clula que formar a barra
9- clula vazia que formara a barra
14- Terceira clula da tabela de base, que conter texto do valor que a barra est representando.
15- o valor (escrito) que a barra est representando
19- linha que far a outra barra
20- primeira clula da segunda linha
21- contedo da primeira clula (o "Mulheres")
23- coluna onde vai a barra (j defini a largura quando fiz a primeira, por isso no defino de novo)
24- largura, altura e cor que quero que a barra tenha (altura tem que ser igual em todas para ser mais bonito)
25- linha que recebera a clula vazia
26- clula vazia que ser a barra em si
31- clula que recebera o valor que a barra est representando
32- valor
Visualizao:
O grfico de barras vertical segue o mesmo princpio, mas ele ter uma tabela com uma linha (onde estaro duas colunas (uma para
cada barra) e dentro dessas colunas estar uma tabela em cada para que seja desenhadas as barras coloridas). Relembrando: s teremos
tabelas dentro dessas colunas para que possamos colocar alturas diferentes nas barras. Depois de pronta as barras, colocamos na tabela
primria uma outra linha com os rtulos (das legendas)
102
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
<table border=1>
<tr height="240">
<td valign="bottom" >
<table>
<tr width=10 height=200>
200
<td bgcolor="pink"
</td>
</tr>
</table>
</td>

<td valign="bottom" >
<table>
<tr width=10 height=100>
100
<td bgcolor="pink" >
</td>
</tr>
</table>
</td>
</tr>
<tr> 
<td>
Mulheres 
</td>
<td>
Homens 
</td>
</tr>
</table>
1- tabela primria (duas colunas uma para cada barra) e duas linhas (uma para as barras e outra para a legenda)
2- primeira linha que ter as duas colunas (uma para cada barra)
3- primeira coluna onde vai a primeira barra
4- tabela que desenhara a barra
5- linha que desenhara a barra ter a largura e a altura da barra (largura deve ser igual para todas as barras do grfico para ficar
mais bonito
6- valor que ficara "em cima" da barra para indicar o valor que ela representa
7- clula vazia que ser a barra; e a sua cor
13- segunda coluna que conter a segunda barra
14 - tabela que desenhar a segunda barra
15- linha com a altura e a largura da segunda barra
16- valor que a barra representa fica em cima da barra
17- clula vazia que ser a barra
23- segunda linha da tabela, que ser a legenda
24- primeira clula da legenda
25- primeira rtulo "Mulheres"
26- segunda clula
27- segundo rtulo "Homens"
Visualizao:
103
Tabela com Imagens Linkadas

Criao de uma tabela com trs colunas em uma linha. Cada coluna ser um frame (uma outra janela), e cada um desses frames
abre um arquivo html diferente.
um efeito legal esse: cada site html que abre em cada um desses frames, possui uma figura que um link para outro site... que
pode conter tambm somente uma tabela ou ser um link para a mesma pgina que esta abrindo da outra coluna (no outro frame) da tabela
que voc criou!!
Ou seja, uma tabela que mostra outras pginas que tem figuras que se chamam!! Como um jogo!
Visualizao quando abre:
E quando clica na primeira imagem ela vai chamar outro arquivo!
104
Veja agora de forma mais didtica como isso foi feito:

Escolha trs imagens de tamanho igual (sakura.gif, libra.jpg e light.jpg) com width="150" heiht="338". em seguida crie a estrutura
de tabela normal com 3 clulas. Dentro dessas clulas os parmetros da tag iframe. Cada iframe tem o mesmo tamanho das imagens. O
atributo scrolling="no" omite aquelas barras de rolagens horizontal e vertical. Porm as imagens no so inseridas diretamente dentro do
iframe, para isso criei 3 arquivos HTML que chamei arquivo-a.htm, arquivo-b.htm e arquivo-c.htm sendo que cada um possui S, E
SOMENTE S, uma imagem.
<table border=1>
<tr >
<td>
<iframe
scrolling="no">
</iframe>
</td>
<td>
<iframe
scrolling="no" >
</iframe>
</td>
<td>
<iframe
scrolling="no" >
</iframe>
</td>
</tr>
</table>
1.
2.
3.
4.
src="imagens\arquivo-a.html"
width="150"
height="338"
src="imagens\arquivo-b.html"
width="150"
height="338"
src="imagens\arquivo-c.html"
width="150"
height="338"
a tabela
a linha
a primeira coluna
o frame dentro dessa primeira coluna com o arquivo que dever abrir nele, a largura e a altura e o scrolling="no" para no
aparecer barra de rolagem
7. a outra coluna que ter o outro frame
8. definio do outro frame abrindo o outro arquivo
1. terceira e ultima coluna
2. terceiro e ultimo frame abrindo o terceiro arquivo
Os arquivos HTML com as imagens contidas so simples, porm possuem alguns parmetros importantes. Os trs so
semelhantes, s mudando os nomes do arquivo e sua respectiva imagem.
Sintaxe do arquivo-a.htm
1. <html>
2.
<head>
3.
</head>
4.
<body>
5.
<div style="position:absolute; left:0px; top:0px;">
6.
<a href="imagens\arquivo-b.html">
105
7.
<img src="imagens\light.jpg">
8.
</a>
9.
</div>
10.
</body>
11.</html>
5.
6.
7.
define a posio (o mais encostado da lateral esquerda e o mais acima possvel)

define o que ser chamado quando clicar na imagem.
define a imagem que ser usada como link quando clicar nela abre o link da linha acima
Observe que a imagem light.jpg deste arquivo um link que chama o arquivo-b. A imagem do arquivo-b possui outro link
chamando o arquivo-c e a imagem do arquivo-c possui um outro link chamando o arquivo-a, fechando o loop de 3 saltos.
Arquivo-b.html
<html>
<head>
</head>
<body>
<a href="imagens\arquivo-c.html">
<img src="imagens\sakura.jpg">
</a>
</div>
</body>
</html>
Arquivo-c.html
<html>
<head>
</head>
<body>
<a href="imagens\arquivo-a.html">
<img src="imagens\libra.jpg">
</a>
</div>
</body>
</html>
106
15 Multimdia
<bgsound atributo>
bgsound executa um arquivo de som ( exclusivo do internet Explorer), assim que a pgina acessada. uma vez iniciada a execuo
do som, pode-se interromp-la pressionando Esc ou simplesmente mudando de pgina.
A tag <bgsound> deve ser colocado entre as tags <head>...</head>.
<bgsound src="audio/minha_musica.mid" loop="1">
src="URL"
endereo do arquivo de som. No exemplo acima, o arquivo mid est dentro do diretrio "audio".
loop="nmero | infinite"
quantas vezes o arquivo ser executado.
meta
Possibilita colocar a chamada da msica dentro do <body>. Porm, usando META tem de clicar no stop para a msica parar, no
adianta somente dar esc.
<html>
<head>
</head>
<body bgcolor="#000000">
<meta http-equiv="refresh" content=5; url="D:\msc\asas.mp3>
</body>
</html>
Visualizao: Observe que abre no browser uma janela do Media Player (tanto com, quanto sem "<meta>").
107
16 Vdeos com img

Dentro do comando img existe um parmetro muito usado para se inserir clipe de vdeo na homepage. o dynsrc, abreviatura de
Dynamic Source.
<body>
Clip de Eric Clapton com Jeff Beck e Jimmy Page - Layla
<center>
<img dynsrc="imagens\EricClap.mpg" width="100" height="70" loop="infinite">
</center>
</body>
Visualizao: (no quadrado aparece o clip)
No exemplo acima temos dynsrc que exibe o arquivo numa janela de 100 x 70 pixels com uma repetio infinita (loop=infinite).
align= ""
top, middle, bottom, left, right. Alinha o texto que margeia a imagem pelo topo, meio, base, esquerda e direita, respectivamente.
alt="texto"
Exibe um texto alternativo no lugar da imagem.
border="nmero"
Especifica a largura da borda.
controls
Exibe botes de controle sob a imagem.
dynsrc="URL"
Exibe o arquivo de vdeo. Os formatos de arquivo so avi, mpg e mov.
height="nmero"
Determina a altura da janela que ser aberta para exibir o arquivo.
hspace="nmero"
Especifica uma margem horizontal entre a imagem e o texto.
108
loop="nmero ou infinite"
Especifica quantas vezes o arquivo ser exibido.
src="endereo"
Especifica o endereo do arquivo de vdeo.
start="fileopen / mouseover"
Fileopen (default), especifica que o vdeo deve ser executado imediatamente. Mouseover faz com que o vdeo seja executado
somente quando o cursor do mouse passa sobre a rea da imagem.
vspace="nmero"
Especifica uma margem vertical entre a imagem e o texto.
width="nmero"
Determina a largura da janela que ser aberta para exibir o arquivo.
Agora alguns parmetros de configurao sobre o mesmo arquivo:
<center>
<img dynsrc="imagens\EricClap.mpg" border="2" start="mouseover" alt="A imagem nao
pode ser carregada">
</center>
O parmetro border=2 criou uma borda preta em torno da imagem; start=mouseover faz a imagem se movimentar (iniciar o clip)
quando o cursor do mouse passado sobre ela, o alt apresenta uma janelinha com o nome "A imagem nao pode ser carregada", quando a
imagem, por uma razo qualquer, deixa de ser carregada.
<embed atributos> ... </embed>

Executa ou carrega um objeto, como um vdeo ou arquivo de som.
align="left", "right", "top", "bottom"

Alinha o texto esquerda, direita, topo e base, respectivamente.
border="nmero"
insere e determina a espessura de uma borda em torno do applet.
frameborder="no"
Configura uma moldura sem borda.
height="nmero"
Determina a altura da janela em pixels.
hidden="true", "false"
Determina se o plug-in visvel na pgina.
109
hspace="nmero"
Especifica as bordas horizontais.
name="texto"
Especifica o nome do applet.
pallete="foreground", "background"
plano.
S usado na plataforma Windows. Foreground faz a paleta do plug-in ser a paleta de primeiro plano. background a do segundo
pluginspace="endereo"
Especifica o endereo que contm as instrues para a instalao do plug-in.
vspace="nmero"
Especifica as bordas verticais.
type="mimetype"
Determina o tipo de mime da tag embed deve ser carregado.
width="nmero"
Determina a largura da janela em pixels.
<center>
<embed src="imagens\EricClapton.mpg" width="150" align="top" height="150">
Eric Clapton,Jeff Beck, Jimmy Page - Layla (texto alinhado no
topo).
</embed>
</center>
Visualizao:
<nobed> ... </nobed>

Este comando exibe uma mensagem informando que o browser usado no tem capacidade para exibir o objeto. A mensagem deve
ser inserida entre <nobed> e </nobed>.
110
17 Posicionamento de
Objetos - div
Um recurso interessante que o CSS trouxe ao Webmaster foi o controle do posicionamento de objetos na tela, que no era possvel
apenas com o HTML convencional. Agora pode-se definir a localizao exata de um objeto e sobrep-los em camadas nas mais
diferentes maneiras.
Atravs da propriedade position o posicionamento pode acontecer de trs modos distintos:
absolute - definido pelas margens superior e esquerda da tela.;
relative - definido pela margem inferior do ltimo objeto e margem esquerda da tela.
static - O posicionamento definido pelo prximo espao disponvel no canto esquerdo da tela.
left (esquerdo) e top (topo)

definem a distncia que o objeto ter em relao ao browser ou a outro objeto dependendo do que for definido em posicion. As
unidades que definem as distncias podem ser em pixels (px), points (pt) e porcentagem (%).
width (largura) e height (altura)

definem o tamanho do bloco que ir comportar o objeto.
position
Quando voc especifica uma posio absoluta em pixel de um objeto (um quadro, uma imagem ou algum texto), ele aparecer no
local exato que voc o especificar mesmo quando o internauta minimiza a tela do browser. Os blocos de posies absolutas podem se
sobrepor, e a hierarquia de sobreposio obedece quela apresentada no cdigo-fonte, isso , os objetos definidos por ltimo iro
sobrepor os anteriores. Abaixo segue um exemplo prtico de como isso acontece.
So trs textos com background (o que forma retngulos quando eu estipulo alturas e larguras), e so colocados a uma altura (top)
da tela e uma distncia da margem esquerda (left)
<div
style="background-color:4682b4;
position:absolute;
height:50px; width:200px;">
Bloco azul
</div>
<div
style="background-color:7fff00;
position:absolute;
Bloco verde
</div>
<div
style="background-color:808080
;
position:absolute;
Bloco cinza
</div>
left:200px;
top:210px;
left:300px;
top:230px;
left:400px;
top:250px;
Visualizao: (a altura e a largura so iguais, o que varia a distncia de cima da pgina e da esquerda (top e left)
111
Agora invertendo as posies dos blocos. Tambm foram alteradas as propriedades left & top dos trs blocos para que o exemplo
fosse deslocado mais para baixo na tela.
<div style="background-color: 7fff00; position: absolute; left: 300px; top:
530px; height: 50px; width: 200px">
Bloco verde
</div>
<div style="background-color: 4682b4; position: absolute; left: 200px; top:
Bloco azul
</div>
<div style="background-color: 808080; position: absolute; left: 400px; top:
Bloco cinza
</div>
Visualizao:
Agora vou apresentar os mesmos exemplos porm mudando a configurao de absolute para relative. Como j disse na posio
relativa o objeto ir ocupar o prximo espao disponvel abaixo do ltimo objeto
<body>
<div style="background-color: 7fff00; position: relative;
left:200px; top:10px; height: 50px; width: 200px;">
Bloco verde
112
</div>
<div style="background-color: 4682b4; position: relative;
left:300px; top:10px; height: 50px; width: 200px;">
Bloco azul
</div>
<div style="background-color: 808080; position: relative;
left: 400px; top:-20px; height: 50px; width: 200px;">
Bloco cinza
</div>
</body>
Visualizao:
O top do bloco verde est a 10px abaixo do texto, j o top do bloco azul tambm deveria estar a 10px abaixo do texto (sobrepondo
a metade direita do bloco verde), porm sua distncia no corresponde com o que vemos. isso porque relative contabiliza a distncia do
texto mais a altura (height) do bloco anterior. Ento ele ir contar 10px + 50px = 60px abaixo do texto. Para sobrep-los temos que
inserir valores negativos em top. Observe que o bloco cinza possui top:-20px, ento ele ir subir 30px para dentro do bloco azul (pois
alm do bloco cinza no ter os 10px, ele possui -20px totalizando -30px). A equao ficaria assim:
10 + 50 + 50 +[-20 -(+10)] = 80px.
isso quer dizer que o bloco cinza com top=-20px est 80px abaixo do texto. isso parece muito complicado... Qual seria a utilidade
de relative funcionar assim? Para posicionar um objeto no meio ou final de arquivos HTML relativamente longos, no precisamos ficar
calculando sua posio vertical, relative j o colocaria diretamente no local disponvel mais prximo. Agora sobre a razo de ele
funcionar assim s o W3C (Consrcio internacional que padroniza os protocolos e linguagens utilizadas na Web) saber responder.
A posio esttica ir inserir o objeto no espao disponvel mais prximo sem nenhuma caracterstica especial aplicada a ele, isso
, ele ir ocupar o primeiro canto superior esquerdo, conforme voc est vendo abaixo independente de voc inserir valores em left e top.
<div style="background-color: eee8aa; position: static; left:200px; top:10px; height:
50px; width: 200px;">
Bege
</div>
<div style="background-color: ff7f50; position: static;left:300px; top:10px; height:
Laranja
</div>
<div style="background-color: 483d8b; position: static;left: 400px; top:-20px; height:
Azul
</div>
Visualizao:
113
Observe que em static as propriedades left & top so ignoradas.
z-index
z-index define uma hierarquia de sobreposio de objetos independente do seu alinhamento sinttico. Os valores de z-index so
sempre inteiros e o objeto que tiver o maior valor ir sobrepor os demais. Essa norma usada tanto para o posicionamento absoluto como
para o relativo.
<div style="position: absolute; left: 80px; top: 4px; z-index:1">
<img src="imagens\mickey.gif">
</div>
<img src="imagens\jacare.gif ">
</div>
Visualizao: (repare que o Mickey tem z-index menor, por isso ele est atrs do jacar o jacar tem fundo transparente)
<body>
<img src="imagens\mickey.gif">
</div>
<img src="imagens\jacare.gif ">
</div>
</body>
trocando a ordem, o mickey fica na frente (como tem fundo branco, o jacar no aparece).
Repare que embora o alinhamento sinttico das figuras permanea o mesmo, a sobreposio das figura se alteraram.
overflow
aplicada sobre um texto que extrapolou o tamanho do bloco definido por width e height. Seus valores so:
visible - Onde ser mostrado todo o contedo da caixa.;
hidden - Onde no ser mostrado o contedo que ficar fora dos limites da caixa.;
auto - O browser mostrar uma barra de rolagem, caso seja necessrio.;
scroll - O browser sempre mostrar uma barra de rolagem, mesmo que no seja necessrio.
<div style="overflow:scroll; width:400px; height:80px; background-color:40e0d0">
114
Este texto est configurado com overflow:scroll e ir aparecer dentro de um quadro
com barras de rolagem horizontal e vertical mesmo que as barras sejam desnecessrias.
</div>
Visualizao:
<div style="overflow:visible; width:300px; height:80px; background-color:#ffc0cb">

Este texto est configurado com overflow:visible e ir aparecer dentro de um quadro
sem barras de rolagem.
</div>
Visualizao:
115
18 Filtros
Efeitos visuais (sombreamento, foco...)apareceram pela primeira vez como controles de ActiveX e posteriormente foram
incorporados como propriedades de folha de estilo aceitas inicialmente pelo browser internet Explorer v4.0.
Note o uso de <span>.
alpha
Cria um efeito de transparncia total ou parcial no objeto por ele envolvido de forma que quanto menor for a sua graduao de
porcentagem, definida por opacity=% maior ser a sua transparncia.
opacity
Apresenta o grau de transparncia do objeto e seu valor refere-se a %. Opacity=100 apresenta um objeto totalmente opaco e
opacity=0 um objeto totalmente invisvel.
finishopacity
Define o nvel de opacidade e seus valores vo de 0 100%.
style
Seus estilos podem ser 0 (uniforme), 1 (linear), 2 (radial) ou 3 Retangular.
startx
Coordenada horizontal para comeo do gradiente de opacidade.
starty
Coordenada vertical para comeo do gradiente de opacidade.
finishx
Coordenada horizontal para o fim do gradiente de opacidade.
finishx
Coordenada vertical para o fim do gradiente de opacidade.
<span
style="font-size:
height:1;filter:Alpha(opacity=10)">
opacity =10
</span>
24pt;
font-family:
Arial
Black;
<span
style="font-size:
height:1;filter:Alpha(opacity=80)">
opacity = 80
</span>
24pt;
font-family:
Arial
Black;
Visualizao:
116
Visualizao:
<span style="font-size: 24pt; font-family: Arial Black; height:1;filter:Alpha(style=0)">

style=0 uniforme
</span>
Visualizao:

style=1 linear
</span>
Visualizao:

style=2 radial
</span>
Visualizao:

style=3 retangular
</span>
Visualizao:
<span style="font-size: 24pt; font-family: Arial Black; height:1;filter:Alpha(opacity=0,

finishopacity=50, style=2)">
opacity=0 finishopacity=50 style=2
</span>
Visualizao:
<span style="font-size: 24pt; font-family: Arial Black; height:1;filter:Alpha(opacity=0,

Finishopacity=70, style=3)">
opacity=0 finishopacity=70 style=3
</span>
Visualizao:
117
blur
Este filtro cria um efeito difuso diminuindo a definio das bordas do objeto. Sua sombra apresenta a mesma cor do objeto, porm
com uma textura mais atenuada.
add
Booleano, 1 Sombreamento ntido, 0 Sombreamento difuso.
direction
Define o ngulo em que o efeito deve acontecer. Seu valor vai de 0 (topo) em incrementos de 45 graus at 315 graus.
strength
Define o comprimento que o efeito deve ter. Default = 5.
<span style="height:1; filter: Blur(add=0,Direction=45, Strength=3)">
<font color="blue">
<img src="imagens\cs05g.gif">
Figura e texto
</font>
COM
<font color="red">
o filtro.
</font>
</span>
Visualizao:

<font color="blue">
Figura e texto
</font>
COM
<font color="red">
o filtro
</font>
</span>
Visualizao:

<font color="blue">
Figura e texto
</font>
COM
118
<font color="red">
o filtro
</font>
</span>
Visualizao:

<font color="blue">
Figura e texto
</font>
COM
<font color="red">
o filtro
</font>
</span>
Visualizao:
<span style="height:1; filter: Blur(add=1,Direction=45,Strength=5)">

<font color="blue">
Figura e texto
</font>
COM
<font color="red">
o filtro
</font>
</span>
Visualizao:
<font color="blue">
Figura e texto
</font>
Sem
<font color="red">
o filtro
</font>
Visualizao:
119
chroma
Este filtro torna uma cor especfica do objeto transparente. No exemplo a seguir a imagem home1.gif tem o fundo branco
(criando contraste com o background) Com o filtro chroma pode-se neutralizar o fundo branco (#FFFFFF) da imagem, simulando uma
imagem GiF de fundo transparente. Ah! O efeito no funcionar caso a cor selecionado no exista na figura.
color
Define uma cor do cdigo RGB que sofrer o efeito de transparncia.
<body background="imagens\ambulancia.jpg">
<span style="filter:chroma(color=FFFFFF); height:1">
<img src="imagens\home1.gif">
</span>
</body>
Visualizao (usando o filtro):
Sem o filtro:
dropshadow
Este filtro cria um eleito de sombra slida no objeto. pode ser direcionada conforme o ngulo desejado.
color
Define a cor RGB (#rrggbb) da sombra. Os valores so em hexadecimal.
offx
Determina a distncia de afastamento em "x" (horizontal). Os valores em pixels (px) podem ser positivos ou negativos.
offy
Determina a distncia de afastamento em "y" (vertical). Os valores em pixels (px) podem ser positivos ou negativos.
120
positive
Parmetro booleano: 1 para sombra positiva. 0 para sombra negativa.
<body>
<span
style="font-size:
24pt;
font-family:
Arial
height:1;filter:dropshadow(color=blue, offx=2, offy=2, positive=1) ;height:1">
color =blue offx=2 offy=2
</span>
</body>
Black;
Visualizao:
<body>
<span
style="font-size:
24pt;
font-family:
Arial
Black;
filter:dropshadow(color=green, offx=10, offy=10, positive=1) ;height:1">
color =green offx=10 offy=10
</span>
</body>
height:1;
Visualizao:
fliph e flipv
Efeito de imagem invertida no objeto. FlipH inverte no sentido horizontal (reflexo de espelho) e FlipV inverte no sentido vertical
(reflexo na superfcie de um lago).
<body>
<p align="center" style="filter:fliph; height:1; font-size:20px;
color:#8B008B">
Socorram-me subi no ônibus em Marrocos
</p>
</body>
Visualizao:
<body>
<p align="center" style="filter:flipv; height:1; font-size:20px;
color:#8A2BE2">
Socorram-me subi no ônibus em Marrocos
</p>
</body>
Visualizao:
glow
Borra os contornos do objeto. Esse borro pode ter uma cor diferente do objeto.
Repare que no exemplo a seguir o objeto possui bordas pretas e o borrado vermelho
121
color
Define a cor RGB (#rrggbb) do borrado.
strength
Determina a distncia de afastamento do efeito. Seu valor em pixels (px) e pode ser valor positivo (borro externo) ou negativo
(borro interno).
<body>
<div style="filter:glow(color=red strength=-10); height:1">
<img src="imagens\comp.png">
</div>
</body>
Visualizao strength = -10:
<div style="filter:glow(color=red strength=10); height:1">

</div>
Visualizao - strength=10:
<div style="filter:glow(color=red strength=200); height:1">

</div>
Visualizao - strength=200:
gray
Esse filtro torna a figura em tons de cinza:
A figura normal :
122
<body>
<div style="filter:gray; height:1">
<img src="imagens\pordosol.jpg">
</div>
</body>
Visualizao:
invert
inverte a matiz de cores do objeto, criando um efeito como o negativo de uma fotografia.
Figura normal:
<body>
<div style="filter:invert; height:1">
<img src="imagens\flores.jpg">
</div>
</body>
Visualizao ( filtro invert):
motion blur
Este filtro cria um efeito de movimento no objeto.
123
strenght
Define o comprimento do efeito (em pixels).
direction
Define o grau em que o efeito deve ocorrer (obviamente, de 0 a 360 graus).
progid:DXimagetransform.Microsoft
Parmetros proprietrios da Microsoft obrigatrios
Visualizao sem o efeito:
<div style="height:1; filter:progid:DXimagetransform.Microsoft.MotionBlur(strength=20,

direction=100)">
<img src="imagens\rio.jpg">
</div>
Visualizao -
strength=20 direction=100
<div style="height:1; filter:progid:DXimagetransform.Microsoft.MotionBlur(strength=100,

direction=45)">
<img src="imagens\rio.jpg">
</div>
Visualizao strength=100, direction=45
124
wave
Cria um efeito de ondulao no objeto.
add
Parmetro booleano: 1 cria o efeito wave, 0 anula o efeito.
freq
Nmero de ondulaes que o objeto deve sofrer.
lightstrength
intensidade de ondulao luminosa. (de 0 a 100%)
phase
Freqncia da ondulao, seu valor vai de 0 a 360graus.
strength
intensidade da ondulao da imagem.
Visualizao figura sem o efeito:
<span style="filter:wave(freq=13, lightstrength=30); height:1">

<img src="brasil.gif">
</span>
Visualizao
freq=13
lightstrength=30:
<span style="filter:wave(freq=4, lightstrength=80); height:1">

</span>
Visualizao
freq=4
lightstrength=80:
<span style="filter:wave(freq=4, lightstrength=80, strength=5);height:1">

</span>
Visualizao
freq=4
lightstrength=80
strength=5:
125
<span style="filter:wave(freq=4, lightstrength=80, phase=360); height:1">

</span>
Visualizao
freq=4
lightstrength=80
phase=360 :
xray
Efeito de chapa de raio X (se parece muito com o efeito Gray, mas menos ntido:
imagem sem efeitos:
imagem com efeito Gray:
<div style="filter:xray; height=1">

<img src="imagens\barra_flor.jpg">
</div>
Visualizao XRay:
126
19 Frames
<frameset atributos> ... </frameset>
Define um conjunto de quadros. um arquivo HTML que contenha o <frameset> no deve conter tambm o descritor <body>. .
Pode ser utilizado dentro de <html>, <frameset> e pode <frame>, <no frames>, <frameset>
cols="x, y, ..."
largura ocupada por cada quadro. Pode ser uma porcentagem (valor seguido de "%") em relao largura total da pgina ou um
valor absoluto em pixels.
rows="x, y, ..."
altura ocupada por cada quadro. Pode ser uma ou um valor absoluto
frameborder="1 / 0"
largura em pixels da borda dos quadros. Por default, todo quadro possui uma borda. Para retir-la use frameborder="0".
Frames verticais
Esta a sintaxe de um arquivo HTML simples com frames verticais. O exemplo consiste num arquivo dividido em trs frames: 1,
2 e 3 com 10, 30 e 20 colunas, respectivamente.
Cada frame exibir seu arquivo correspondente conforme mostra o comando <frame src="...">
O arquivo criado simplesmente estrutura a apresentao dos outros arquivos HTML, chamados frames_1.html, frame_2.html e
frame_3.html (mas poderia ser qualquer outro site, viu?). Ele a moldura de apresentao desses trs arquivos HTML. Quando a janela
criada para cada arquivo no for suficiente para exibir todo o seu contedo, ele automaticamente cria barras de rolagem vertical e/ou
horizontal, conforme a necessidade.
<html>
<frameset cols="10,15,20">
<frame src="frame_1.html">
</frameset>
</html>
Visualizao:
127
Frames Horizontais
O mesmo exemplo dado anteriormente (usando frame_1.html, frame_2.html e frame_3.html), mas usando o atributo
"rows=10,15,20": e sem as bordas, frameborder="0".
<html>
<frameset rows="10,25,10" frameborder="0">
</frameset>
</html>
Visualizao - foram includas automaticamente barras de rolagem porque no foi suficiente o espao!!!
Para dividir os frames em janelas iguais no browser usamos o "*".

<frameset cols="*,*,*">
ou
<frameset rows="*,*,*">
ir criar trs janelas verticais ou horizontais equivalentes.

Outra forma de distribuir os frames usando valores percentuais. Determine quantos % cada frame dever ocupar na janela do
monitor. As distribuies sempre devero totalizar os 100%:
<frameset cols="20%,60%,20%">
Frames Combinados
Os atributos "cols" e "rows" podem ser combinados simultaneamente criando janelas verticais e horizontais.
<frameset cols="30%,70%">
<frameset rows="50%,50%">
</frameset>
</frameset>
Visualizao:
128
framespacing="valor"
Este atributo altera a espessura das bordas deixando os frames mais separados entre si.
<frameset cols="30%,70%" framespacing="15">
</frameset>
</frameset>
Visualizao:
<frame atributos>
Define um quadro dentro de um conjunto <frameset>. utilizado dentro de: <frameset>
align="top, middle, bottom, left, right"

Ajusta o alinhamento do frame ou do texto.
frameborder="1 / 0"
Ativa ou desativa a exibio de borda no frame relacionado.
src="URL"
129
informa a URL do documento que ser exibido dentro do quadro.
name="rtulo"
Define um nome para o quadro que pode ser referenciado pelo atributo target do elemento <a>.
marginheight="nmero"
Define um espaamento vertical em pixels entre a borda do quadro e o seu contedo.
marginwidth="nmero"
Define um espaamento horizontal em pixels entre a borda do quadro e o seu contedo.
noresize
impede que o quadro possa ser redimensionado pelo usurio.
scrolling="yes | no"
Decide se haver ou no barra de rolamento para permitir a visualizao do contedo do quadro. Por default, as barras de
rolamento aparecem sempre que o contedo ultrapassa a rea de visualizao do browser.
<frame marginwidth="50" marginheight="50" src="frame_1.html">
<frame scrolling="no" src="frame_2.html">
</frameset>
<frame frameborder=0 src="frame_3.html">
</frameset>
Visualizao:
Neste exemplo, no frame 1 marginwidth=50 marginheight=50, observe como ficaram as margens do texto. Ele criou um
espaamento nas bordas verticais e horizontais.
No frame 2 configurei scrolling="no", ou seja, sem barras de rolagem. embora exista uma parte do texto que ficou oculta (no
monitor de 14"), a barra de rolagem vertical no aparece.
No frame 3 configurei frameborder=0, ento ele aparecer sem bordas, observe a diferena entre os frames 1 e 2, com borda e o
frame 3, sem borda.
<noframes> ... </noframes>
Caso o browser do usurio seja antigo ou no compatvel com os recursos de frames, um recurso muito utilizado inserir uma
mensagem de aviso entre <noframes>... </noframes>, informando o usurio.
<frame marginwidth="50" marginheight="50" src="frame_1.html">
<frame scrolling="no" src="frame_2.html">
</frameset>
130
<frame frameborder=0 src="frame_3.html">
</frameset>
<noframes>
O seu browser não suporta frames. Sugerimos obter uma verso atualizada do
Netscape Navigator 3.0 ou do internet Explorer 3.0 atravs dos seguintes sites:
<p>
Microsoft:
<a href="http://www.microsoft.com">
http://www.microsoft.com
</a>
</p>
<p>
Netscape:
<a href="http://home.netscape.com">
http://home.netscape.com
</a>
</p>
<p>
<center>
Clique no boto [Back] do seu browser para voltar.
</center>
</p>
</noframes>
Visualizao - caso o browser no suportasse frames:
Montando um Diretrio com frames

Montar uma estrutura com frames verticais de forma que, ao clicar no ndice do frame esquerda ele mude apenas o frame direita
mantendo o resto da pgina inalterada. Para montar essa estrutura vou criar mais trs arquivos que me serviro como exemplos. Os
arquivos chamaro matriz.htm, indice.htm e abertura.htm (dei aos arquivos nomes associados as suas funes pra ficar mais fcil o
entendimento).
matriz.htm: Este e o arquivo que ir comportar os frames. ele que ir aparecer no monitor com os dois frames verticais.
indice.htm: Este o arquivo que ir conter a lista de arquivos esquerda. Sero os nossos j conhecidos frame1, frame2 e
frame3.htm.
abertura.htm: Este o arquivo que sempre ir aparecer direita quando entrarem na sua pgina juntamente com o arquivo ndice
esquerda.
Sintaxe do arquivo matriz.htm
<html>
<frameset cols=20%,*>
<frame name="ladoesquerdo" src=indice.htm>
<frame name="ladodireito" src="abertura.htm">
</frameset>
</html>
131
Observe que o frame da esquerda ter 20% de tamanho <frameset cols=20%,*> e o asterisco indica que o restante do espao ficar
com o arquivo da direita. O parmetro <frame name="ladoesquerdo" src=indice.htm> define qual arquivo ir aparecer esquerda e
<frame name="ladodireito" src=abertura.htm>, qual arquivo ir aparecer a direita.
Para criar o arquivo indice.htm
<html>
<head>
<base target="ladodireito">
</head>
<body bgcolor="#daa520">
<center>
<h1>
Diretrio
</h1>
<br>
Clique sobre a lista abaixo.
<br>
<a href="abertura.htm">
abertura
</a>
<br>
<a href="frame_1.htm">
Frame 1
</a>
<br>
Frame 2
</a>
<br>
Frame 3
</a>
</center>
</body>
</html>
Visualizao:
Sintaxe do abertura.htm:
<html>
<body>
Oi... esta é e abertura.htm!
</body>
</html>
132
Visualizao:
O parmetro <base target="ladodireito"> acima, ir indicar ao browser onde os arquivos vinculados pelo comando <a href> devem
ser carregados. Para entender melhor vamos ao exemplo prtico, ele nada mais que os dois arquivos apresentados acima.
Os arquivos frame_1, frame_2 e frame_3 so os mesmos j usados (no colocarei novamente a sintaxe porque poderiam ser
quaisquer outros sites (como o www.google.com, por exemplo, em um dos frames)
Note como ficou fcil o entendimento analisando as sintaxes dos arquivos acima e depois verificando o exemplo.
Visualizao final (abrindo o matriz.htm):
<iframe> ... </iframe >

Define um frame embutido na pgina (como uma janela) e permite tambm a incluso de outros documentos HTML.
src="URL"
Endereo do documento que ser exibido.
name="texto"
Nome do frame.
width="nmero"
Define a largura do frame.
133
height="nmero"
Define a altura do frame.
align="top | middle | bottom | left | right"

Alinha o frame em relao a pgina no topo, meio, base, esquerda e direita, respectivamente.
Frameborder="1 | 0"
O valor 1 insere uma borda no frame, o valor 0 omite.
margnwidth="pixels"
Define uma largura para a margem.
marginheight="pixels"
Define uma altura para a margem.
scrolling="yes | no | auto"
yes permite a rolagem do frame, no no permite.
Exemplo: uma janela no centro desta pgina utilizando o comando iframe. A sintaxe de configurao a seguinte:
<center>
<iframe width="350" height="200" scrolling="auto" frameborder="1">
</iframe>
</center>
visualizao:
Este frame possui o tamanho de 350 x 200 pixels, barra de rolagem automtica e uma borda. Agora irei colocar um arquivo HTML
dentro desta janela (o arquivo background.htm).
Sintaxe:
<center>
<iframe
src="background1.htm"
frameborder="1">
</iframe>
</center>
width="350"
height="200"
scrolling="auto"
134
No prximo exemplo coloquei um texto rolante dentro da janela. Para criar o texto rolante coloquei uma frase qualquer dentro do
comando marquee que por sua vez est dentro do arquivo banner.htm, depois inseri o arquivo banner.htm dentro da janela iframe,
pronto!
Sintaxe deste exemplo:

<center>
<iframe src="banner.htm"
marginheight="2px">
</iframe>
</center>
width="400"
height="20"
scrolling="no"
frameborder="1"
Arquivo banner.htm
<html>
<body bgcolor="#D8D8BF">
<center>
<marquee behavior="scroll" width="700">
<font face="verdana" size="2">
Outro exemplo de aplicao esta mensagem estilo banner.
</font>
</marquee>
</center>
</body>
</html>
135
20 Botes
Fechar a janela
<html>
<body>
<FORM>
<INPUT
ONCLICK="window.close()">
</FORM>
</body>
</html>
TYPE="button"
NAME="Button"
VALUE="Fechar
janela"
Visualizao:
<html>
<body>
<A HREF=JavaScript:window.close()>
Fechar a janela
</a>
</body>
</html>
Visualizao:
<html>
<body>
Clique na figura para fechar a janela
<A HREF=JavaScript:window.close()>
<IMG SRC="imagens/fechar.gif ">
</a>
</body>
</html>
Visualizao:
Imprimir a pgina
<body>
<FORM>
<INPUT
TYPE="button"
ONCLICK="window.print()">
</FORM>
</body>
NAME="Button"
VALUE="Imprimir
esta
pgina"
Visualizao:
<body>
<A HREF=JavaScript:window.print()>
136
Imprimir esta pgina
</a>
</body>
Visualizao:
<body>
<A HREF=JavaScript:window.print()>
<IMG SRC="imagens/imprimir.gif">
</a>
</body>
Visualizao:
"Voltar" e "Avanar"
<body>
<FORM>
<INPUT
TYPE="button"
ONCLICK="window.history.go(-1)">
</FORM>
</body>
NAME="Button"
VALUE="Voltar"
Visualizao:
<html>
<body>
<A HREF="javascript:window.history.go(-1)">Voltar</a>
</body>
</html>
Visualizao:
<html>
<body>
<FORM>
<INPUT
TYPE="button"
ONCLICK="window.history.go(1)">
</FORM>
</body>
</html>
NAME="Button"
VALUE="Avanar"
Visualizao:
<html>
<body>
<A HREF="javascript:window.history.go(1)">
Avanar
</a>
</body>
</html>
137
Visualizao:
Exibir Cdigo Fonte

<html>
<body>
<INPUT TYPE="button" VALUE="Cdigo
"view-source:"+ window.location.href">
</body>
</html>
Fonte"
ONCLICK="window.location
Visualizao:
Botes Coloridos
<body>
<INPUT TYPE="submit" NAME="button" VALUE="Boto 1">
<INPUT TYPE="submit" NAME="button" VALUE="Boto 2">
</body>
Visualizao:
O atributo VALUE="texto" o que apresenta a escrita na sua superfcie. Vamos modificar o boto 1 que ter uma letra azul
escuro (color: 0000FF) e um fundo azul claro (background-color: 87CEFA), e o Boto 2 ter uma letra preta (color: 000000)e um fundo
amarelo ouro (background-color: FFD700).
<html>
<body>
<INPUT TYPE="submit"
background-color:87CEFA">
<INPUT TYPE="submit"
background-color:FFD700">
NAME="button"
VALUE="Boto
1"
STYLE="color:0000FF;
NAME="button"
VALUE="Boto
2"
STYLE="color:000000;
</body>
</html>
Visualizao:
Botes com Links

Para enderear os botes com links, tem-se de renomear os botes, por uma questo de referncia. O boto 1 passar a ser o Cad e
o 2 ser o Google.
Um detalhe de apresentao ser incluir o parmetro STYLE="cursor:hand" para que o cursor mude para a mozinha quando o
mouse sobrepe o boto.
<html>
<body>
<FORM METHOD=GET ACTION="http://www.cade.com.br/">
<INPUT TYPE="submit" NAME="button" VALUE="Cad"
STYLE="cursor:hand;
138
color:0000FF; background-color:87CEFA">
<FORM METHOD=GET ACTION="http://www.google.com.br/">
<INPUT
TYPE="submit"
NAME="button"
STYLE="cursor:hand; color:000000; background-color:FFD700">
</FORM>
</FORM>
</body>
</html>
VALUE="Google"
Visualizao:
Note que o tamanho do boto se ajusta automaticamente a quantidade de caracteres que tem na sua superfcie.
Para alinhar os botes lado-a-lado podemos recorrer aos recursos de <TABLE> (tabela).
<body>
<CENTER>
<TABLE>
<TR>
<TD>
<FORM METHOD=GET ACTION="http://www.cade.com.br/">
<INPUT TYPE="submit" NAME="button" VALUE="Cad?"
STYLE="cursor:hand; color:0000FF; background-color:87CEFA">
</FORM>
</TD>
<TD>
<FORM METHOD=GET ACTION="http://www.google.com.br/">
<INPUT TYPE="submit" NAME="button" VALUE="Google"
STYLE="cursor:hand; color:000000; background-color:FFD700">
</FORM>
</TD>
</TR>
</TABLE>
</CENTER>
</body>
Visualizao:
(esto centralizados na pgina)

Os botes personalizados apresentados acima so estticos, isso , no reagem a sobreposio do mouse. Movimente o mouse
sobre eles (sem clicar) e repare que eles parecem simples imagens. Ento vamos faz-los responder a sobreposio do mouse com
alternamento de cores.
Primeiro: inserimos o cdigo CSS/JavaScript.
Observe os seletores .troca1 e .troca2. So eles que iro definir as cores iniciais do boto. Se escolher duas cores diferentes tem
que usar dois seletores com propriedades diferentes.
<body>

<STYLE>
.troca1 {background-color:black}
.troca2 {background-color:gray}
</STYLE>
<SCRIPT LANGUAGE="JavaScript1.2">
function Troca(cor){
var mud=event.srcElement
if (mud.tagName=="INPUT"&&mud.type=="submit")
event.srcElement.style.backgroundColor=cor
}
</SCRIPT>

<CENTER>
139
<TABLE>
<TR>
<TD>
<FORM
METHOD=GET
ACTION="http://www.cade.com.br/"
onMouseover="Troca('yellow')" onMouseout="Troca('red')">
<INPUT TYPE="submit" NAME="button" VALUE="Cad"
STYLE="color:pink; cursor:hand" class="troca1">
</FORM>
</TD>
<TD>
<FORM METHOD=GET ACTION="http://www.google.com.br/"
onMouseover="Troca('blue')" onMouseout="Troca('green')">
<INPUT
TYPE="submit"
NAME="button"
VALUE="Google"
STYLE="color:white"; cursor:hand" class="troca2">
</FORM>
</TD>
</TR>
</TABLE>
</CENTER>
</body>
Visualizao:
Quando abre a pgina:
Quando o mouse est em cima do primeiro:
Quando o mouse sai de cima do primeiro e est em cima do segundo:
Quando o mouse sai fora dos dois:
Botes Texturizados
Geralmente a superfcie do boto muito pequena e isso dificulta uma definio clara de sua textura. Usamos o atributo padding
para definir o distanciamento entre o texto (do boto) e suas bordas, manipulando a sua rea de superfcie.
Os valores usados em padding so points (pt), inches (in), centimeters (cm), pixels (px) ou percentage (%).
Boto 1 sem padding (default), boto 2 com 5 pixel de padding e boto 3 com 1 centimetro de padding:
<html>
<body>
<INPUT TYPE="submit" NAME="button" VALUE="Boto 1" STYLE="color:000000">
<INPUT TYPE="submit" NAME="button" VALUE="Boto 2" STYLE="color:000000;
padding:5px">
padding:1cm">
</body>
</html>
Visualizao:
140
As texturas no devem dificultar a leitura do texto que est na superfcie e os botes tem que ter padding sufuciente para as
texturas poderem ser visualizadas.
As texturas que vamos usar so essas:
(textura01.jpe)
(fundo3.jpe)
(textura23.jpe)
Atravs do atributo background:url(...) inserimos dentro dos botes.

<html>
<body>
background:url(F:\ana\apostila_html\imagens\textura01.jpe)">
padding:5px; background:url(F:\ana\apostila_html\imagens\fundo3.jpe)">
padding:1cm; background:url(F:\ana\apostila_html\imagens\textura23.jpe)">
</body>
</html>
Visualizao:
Tamanhos e Formatos
No exemplo anterior usamos padding para alterar o tamanho do boto porm esta propriedade no foi criada especificamente para
isso. Para manipular o tamanho, bem como, o formado quadrado ou retangular do boto usamos as propriedades width (largura) e height
(altura). Seus valores podem ser em pixel (px), point (pt), centimeter (cm) e inches (in).
<html>
<body>
<INPUT TYPE="submit" NAME="button" VALUE="Boto
background:url(imagens/textura01.jpe)">
width:60; height:75; background:url(imagens/fundo3.jpe)">
width:50; height:20; background:url(imagens/textura23.jpe)">
</body>
</html>
1"
2"
3"
Visualizao:
Repare que os botes tem que ser altos e largos o suficiente para que o texto caiba dentro. O Boto 1 est no tamanho default, o 2
estaria alto demais e o 3 muito curto.
141
Botes com Imagens

Vamos usar background para inserir uma imagem no boto.
Omitimos o texto de sua superfcie configurando VALUE=" ", depois s configurar as propriedades width & height para o
tamanho da imagem. Com a ausncia do texto a figura dever transmitir uma idia de qual seria a funo do boto, logicamente.
Podemos colocar um ttulo explicativo title="descrio no link , e quando o internauta colocar o mouse em cima abrir uma tarja
identificando seu destino. No exemplo, somente o primeiro boto tem tarja.
<html>
<body>
<FORM method="get" action="http://anacarol.blog.br/" title="Site">
<INPUT
TYPE="submit"
NAME="button"
VALUE=" "
STYLE="color:000000; width:94;height:40;background:url(F:\ana\img.gif); cursor:hand">
</FORM>
<FORM method="get" action="http://anacarol.blog.br">
<INPUT
type="submit"
NAME="button"
VALUE=" "
width:170;
height:90;
background:url(imagens/img.gif);
cursor:hand">
</FORM>
</body>
</html>
Existe necessidade de adeqar o tamanho de acordo com o tamanho real da figura. Se colocarmos um boto maior, ele ser
preenchido com repeties da figura; se colocarmos um boto menor, a figura no poder ser totalmente vista.

Apostila Completa HTML

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Apostila Completa HTML

Uploaded by

Copyright:

Available Formats

F

1.1 Evoluo do HTML .........................................................................................................................................................10

<html atributos> ... </html>....................................................................................................................................................13

<head atributos> ... </head>..................................................................................................................................................13

<script >...</script > ..............................................................................................................................................................18

Alterando o Formato do Cursor ............................................................................................................................................18

Anexando Objetos ao Cursor ...............................................................................................................................................20

4 Links e Imagens ..................................................................................................................22

Links Internos e Externos .....................................................................................................................................................22

style=text-decoration=: " "......................................................................................................................................................25

Criando um Diretrio de Imagens Reduzidas .......................................................................................................................35

<applet> ... </applet>.............................................................................................................................................................37

<param atributos> .................................................................................................................................................................37

<font atributos> ... </font> .....................................................................................................................................................38

<nobr> ... </nobr>..................................................................................................................................................................41

<area atributos> ...................................................................................................................................................................43

7 Bloqueando a Cpia da Pgina............................................................................................44

..........................................................................................................................................................44

8 Formatao de textos e caracteres......................................................................................45

<H1, H2, ..., H6 atributos>.....................................................................................................................................................57

<p atributos> ... </p> .............................................................................................................................................................58

10 Linhas Horizontais .............................................................................................................60

<hr atributos> .......................................................................................................................................................................60

Outros Separadores de Texto...............................................................................................................................................66

12 Texto Pr-Formatado ........................................................................................................68

<pre atributos> ... </pre> ......................................................................................................................................................68

<blockquote> ... </blockquote> .............................................................................................................................................69

<center> ... </center> ...........................................................................................................................................................71

<li atributos> ... </li> .............................................................................................................................................................73

<dt atributos> ... </dt> ...........................................................................................................................................................74

<tr atributos> ... </tr> ............................................................................................................................................................82

<th atributos> ... </th> ...........................................................................................................................................................90

Formatando grandes tabelas ................................................................................................................................................91

<bgsound atributo> .............................................................................................................................................................106

16 Vdeos com img................................................................................................................107

<embed atributos> ... </embed> .........................................................................................................................................108

<nobed> ... </nobed> .........................................................................................................................................................109

17 Posicionamento de Objetos - div.....................................................................................110

Prof Ana Carolina Jaskulski

<frameset atributos> ... </frameset> ...................................................................................................................................126

Frames verticais .................................................................................................................................................................126

<frame atributos> ................................................................................................................................................................128

Montando um Diretrio com frames ...................................................................................................................................130

Prof Ana Carolina Jaskulski

Use a Cabea - HTML com CSS

Use a Cabea AJAX

Prof Ana Carolina Jaskulski

1.1 Evoluo do HTML

Prof Ana Carolina Jaskulski

1.2 Fundamentos da Linguagem HTML

1.3 Os Nomes dos Arquivos

1.4 A Lgica LIFO

Prof Ana Carolina Jaskulski

Nunca misture a seqncia, como por exemplo:

texto </tag2> </tag1> </tag3>

1.5 O Arquivo HTML Bsico

incio do cdigo html -->

1.6 O Arquivo index.htm

Prof Ana Carolina Jaskulski

dir= "rtl| ltr"

Visualizao dir.= "Ltr"

<head atributos> ... </head>

Visualizao (observe que as informaes esto somente no cdigo):

<body atributos> ... </body>