HTML avançado

F141 Páginas
LinguagemLinguagem
HTMLHTML
Professora Ana Carolina Jaskulski
http://anacarol.blog.br
anamaxwell@gmail.com
Março/2007

Índice
Introdução..................................................................................................................................9
1 História..................................................................................................................................10
1.1 Evolução do HTML .........................................................................................................................................................10
1.2 Fundamentos da Linguagem HTML................................................................................................................................11
1.3 Os Nomes dos Arquivos .................................................................................................................................................11
1.4 A Lógica LIFO..................................................................................................................................................................11
1.5 O Arquivo HTML Básico .................................................................................................................................................12
1.6 O Arquivo index.htm .......................................................................................................................................................12
2 Elementos Estruturais..........................................................................................................13
<html atributos> ... </html>....................................................................................................................................................13
version= "versão" ................................................................................................................................................................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 Cabeçalho.....................................................................................................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="descrição"...................................................................................................................................................................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 Página Inicial - Página de Abertura .............................................................................................................29
5 Imagens................................................................................................................................31
<img atributos>......................................................................................................................................................................31
Profª Ana Carolina Jaskulski http://anacarol.blog.br anaschneider@gmail.com
2

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 Diretório de Imagens Reduzidas .......................................................................................................................35
Imagem de Baixa Resolução ................................................................................................................................................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 Cópia da Página............................................................................................44
oncontextmenu="return false".............................................................................................................................................44
onselectstart="return false"..................................................................................................................................................44
 ..........................................................................................................................................................44
8 Formatação de textos e caracteres......................................................................................45
Elementos Lógicos................................................................................................................................................................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 Físicos.................................................................................................................................................................47
<b> ... </b>............................................................................................................................................................................47
<i> ... </i>...............................................................................................................................................................................47
<tt> ... </tt>............................................................................................................................................................................47
3

<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="número", %:............................................................................................................................................................50
hspace="número"................................................................................................................................................................50
loop="número", -1 a infinite.................................................................................................................................................50
scrollamount="número".......................................................................................................................................................50
scrolldelay="número"...........................................................................................................................................................50
vspace="número".................................................................................................................................................................50
width="número", %..............................................................................................................................................................50
9 Formatações.........................................................................................................................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="número"......................................................................................................................................................................60
width="número"....................................................................................................................................................................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
Espaçamento Forçado...........................................................................................................................................................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
Não Ordenada.......................................................................................................................................................................72
<ul atributos> ... </ul> ...........................................................................................................................................................72
4

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 ="diretório/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="número".................................................................................................................................................................84
table data <td atributos> ... </td> ........................................................................................................................................85
rowspan=número.................................................................................................................................................................85
colspan=número..................................................................................................................................................................85
align=left, right ou center ....................................................................................................................................................86
valign=baseline, bottom, top ou middle ..............................................................................................................................87
nowrap.................................................................................................................................................................................87
width=valor...........................................................................................................................................................................88
bgcolor="#RRGGBB"...........................................................................................................................................................89
background="diretório/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 Gráficos de Estatísticas........................................................................................................................................100
Tabela com Imagens Linkadas............................................................................................................................................103
5

15 Multimídia ........................................................................................................................106
<bgsound atributo> .............................................................................................................................................................106
src="URL"..........................................................................................................................................................................106
loop="número | infinite"......................................................................................................................................................106
meta.....................................................................................................................................................................................106
16 Vídeos com img................................................................................................................107
align= ""..............................................................................................................................................................................107
alt="texto"...........................................................................................................................................................................107
border="número"................................................................................................................................................................107
controls..............................................................................................................................................................................107
dynsrc="URL"....................................................................................................................................................................107
height="número"................................................................................................................................................................107
hspace="número"..............................................................................................................................................................107
loop="número ou infinite"...................................................................................................................................................108
src="endereço"..................................................................................................................................................................108
start="fileopen / mouseover"..............................................................................................................................................108
vspace="número"...............................................................................................................................................................108
width="número"..................................................................................................................................................................108
<embed atributos> ... </embed> .........................................................................................................................................108
align="left", "right", "top", "bottom" ....................................................................................................................................108
border="número"................................................................................................................................................................108
frameborder="no"...............................................................................................................................................................108
height="número"................................................................................................................................................................108
hidden="true", "false".........................................................................................................................................................108
hspace="número"..............................................................................................................................................................109
name="texto".....................................................................................................................................................................109
pallete="foreground", "background"...................................................................................................................................109
pluginspace="endereço"....................................................................................................................................................109
vspace="número"...............................................................................................................................................................109
type="mimetype"................................................................................................................................................................109
width="número"..................................................................................................................................................................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
6

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="rótulo"....................................................................................................................................................................129
marginheight="número".....................................................................................................................................................129
marginwidth="número".......................................................................................................................................................129
noresize ............................................................................................................................................................................129
scrolling="yes | no"............................................................................................................................................................129
Montando um Diretório com frames ...................................................................................................................................130
<iframe> ... </iframe > ........................................................................................................................................................132
src="URL"..........................................................................................................................................................................132
name="texto".....................................................................................................................................................................132
width="número"..................................................................................................................................................................132
height="número"................................................................................................................................................................133
align="top | middle | bottom | left | right"............................................................................................................................133
Frameborder="1 | 0"..........................................................................................................................................................133
margnwidth="pixels"..........................................................................................................................................................133
marginheight="pixels"........................................................................................................................................................133
scrolling="yes | no | auto"..................................................................................................................................................133
20 Botões...............................................................................................................................135
Fechar a janela....................................................................................................................................................................135
Imprimir a página.................................................................................................................................................................135
"Voltar" e "Avançar".............................................................................................................................................................136
Exibir Código Fonte.............................................................................................................................................................137
Botões Coloridos ................................................................................................................................................................137
Botões com Links ...............................................................................................................................................................137
Botões Texturizados............................................................................................................................................................139
7

Tamanhos e Formatos ........................................................................................................................................................140
Botões com Imagens...........................................................................................................................................................141
8

IntroduçãoIntrodução
Aqui neste material você encontrará muitas informações sobre HTML.
É um apanhado de materiais que encontrei (outros que ganhei) e alguns exemplos que visam ajudar no seu aprendizado.
Esta apostila não substitui a aula. Tampouco você precisa ter ela durante as aulas- ela é um complemento.
Nem todos os conteúdos abordados aqui nós veremos em sala de aula... porque não há tempo para tudo.
Esta apostila é um Guia.
Ela não vai te ensinar CSS. Ela não vai te ensinar tudo de HTML. Nem DHTML. Nem Javascript. Nem Ajax.
A editora Alta Books lançou a coleção Use a cabeça. com livros MUITO divertidos, muito completos e muito bons de ler. São
escritos com técnicas que ajudam o leitor decorar os comandos através 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 Cabeça - HTML com CSS e Use a Cabeça – AJAX
No site http://anacarol.com.br eu vou sempre colocar mais informações e outras fontes de pesquisa - de vários assuntos.
Essa apostila não visa lucros.... você não deve pagar por ela.
Bons estudos!
9

1 História1 História
A internet nasceu em 1969, nos Estados unidos. Interligava originalmente laboratórios 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 então o conceito central da internet: uma rede
em que todos os pontos se equivalem e não 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
laboratórios, primeiro nos EUA e depois em outros países. Por isso que não há um único lugar que "governa" a internet. Hoje ela é um
conjunto de milhares de redes no mundo inteiro. O que essas redes têm em comum é o protocolo TCP/IP (Transmission Control
Protocol/Internet Protocol), que permite que elas se comuniquem umas com as outras.
Então, 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 coleção de recursos que podem ser alcançados através destas redes.
Durante cerca de duas décadas, a internet ficou restrita ao ambiente acadêmico e científico. Em 87 pela primeira vez foi liberado
seu uso comercial nos EUA.
A "antiga" internet, antes da Web, exigia do usuário disposição para aprender comandos em Unix (uma linguagem de
programação) bastante complicados, e enfrentar um ambiente pouco amigável (unicamente em texto). A Web fez pela internet o que o
Windows fez pelo computador pessoal – tornou acessível.
O poder da WWW (World Wide Web - Rede de Alcance Mundial), reside em sua capacidade em associar uma determinada parte
de um documento eletrônico a outro computador e a outro documento à milhares de quilômetros afastado. Essa conexão entre
documentos é possível graças à utilização do protocolo de comunicação chamado HTTP (Hypertext Transfer Protocol - Protocolo de
transferência 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
suíça.
Seu criador, o inglês Tim Berners-Lee de 44 anos, a concebeu unicamente como uma linguagem que serviria para interligar
computadores do laboratório e outras instituições de pesquisa e exibir documentos científicos de forma simples e fácil de acessar.
Um desenvolvimento fundamental aconteceu em julho de 1992 com a liberação da biblioteca de desenvolvimento para WWW. Foi
essa biblioteca que deu origem à construção de vários browsers WWW e servidores que tornaram a WEB viável.
Um desses browsers foi o Mosaic, o primeiro browser multiplataforma que explorava completamente a capacidade de hipermídia
da WEB. Desenvolvido por Marc Andreson, então do NCSA, o Mosaic foi que iniciou o crescimento explosivo da WEB. No outono
1993 tornou-se disponível a milhões de usuários, com a liberação das versões para Mac e Windows.
Se por um lado novos browsers têm superado os recursos do Mosaic, por outro lado foi esse programa que se tornou sinônimo da
WEB.
Cada versão de HTML tem tentado refletir todo o consenso entre a indústria de software para que o investimento feito pelos
autores de páginas não seja desperdiçado e que os seus documentos não deixem de se poder ler num curto período de tempo. O HTML
tem sido desenvolvido com a visão que todos os equipamentos fossem capazes de usar a informação da Web, computadores com
monitores de diversas resoluções e vários números de cores, equipamentos para input e output de voz, computadores com alta e baixa
largura de freqüência e muito mais. Não desperdiçando o tempo (e custo) de serviço de um Webmaster que faz um site e logo-logo esse
site deixa de funcionar - para isso é mantido o padrão.
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 diversão
O HTML 4.0 estende com mecanismos para style sheets (CSS), scripting, frames (janelas), embedding objects, melhor suporte
para texto com direção variável (esquerda, direita, e ambos), tabelas mais visualizáveis, melhorias nos forms, melhor acessibilidade para
pessoas com incapacidades.
1.1 Evolução do HTML
1992 - Primeira aparição do HTML.
1993 - HTML+ Algumas definições da aparência, tabelas, formulários.
1994 - HTML v2.0 Padronização para as características principais.
1994 - HTML v3.0 uma extensão do HTML+ entendido como um rascunho de padrão.
1995 - HTML v3.2 Netscape e Internet Explorer definem seus próprios padrões baseados nas implementações correntes.
1995 - JavaScript criada por Brendan Eich da Netscape como uma extensão do HTML para o browser Navigator v2.0. JavaScript é
uma linguagem de roteiro (script) baseada em objetos e permite que sejam manipulados através de eventos dinâmicos 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. Possuía uma formatação simples e cerca de 60 propriedades.
1997 - HTML v4.0 São lançados 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 dinâmico.
Surge então o DHTML.
1998 - CSS2 em maio é lançado a segunda versão da Folha de Estilo que, além de incluir todas as propriedades do CSS1 ainda
10

apresenta por volta de 70 novas propriedades.
1999 - HTML v4.01 Alguma modificações da versão anterior.
2000 - XHTML v1.0 É criado e consiste de uma versão 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 formatação alguma (mudança de cor
de fonte, tabulações nem parágrafos), mas depois vieram os WordStar, OpenAcces, Carta Certa, Word. Cada um trazia suas inovações
(suas possibilidades), que infelizmente não eram compatíveis entre si, ou seja: uma arquivo do Word não abria no Carta Certa.
A incompatibilidade existia porque cada programa adicionava ao texto códigos próprios (para o controle dele e que os outros não
conheciam), mas com o passar do tempo foram-se criando formas de transformar de um padrão para outro: de Word para Carta Certa, por
exemplo.
Para evitar que ocorram incompatibilidades como esta, na internet foi desenvolvido o padrão HTML.
O HTML é uma linguagem de formatação criada para estruturar a página que será exibida na internet (no browser). Seus arquivos
são de texto puro com códigos de marcação (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 não contêm nada além de letras, números, sinais de pontuação e caracteres
em geral que podem ser impressos. um arquivo HTML é também conhecido como página Web ou Home Page e são identificados com a
extensão .htm ou .html, exemplo: index.htm.
Os códigos de marcação de uma página HTML também são conhecidos como código fonte e para acessá-los basta posicionar o
ponteiro do mouse sobre a página, clicar no botão direito e selecionar a opção [Exibir código fonte]. Muitos Webmasters não gostam
que os usuários da internet fiquem xeretando no código fonte de sua home page porque lá está toda a sua criatividade, truques de
macetes de elaboração da página (a questão 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, não necessita de conhecimentos prévios de
programação, por isso que muitas vezes é escolhida como a primeira Linguagem de Programação a ser aprendida por uma pessoa. Outro
fator é o de não precisar de um editor específico, qualquer um serve (o Bloco de Notas e o Vi, por serem texto puro, são 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, porém, como tudo na Rede está em fase de transição,
estes editores ainda deixam muito a desejar tanto na apresentação de novos recursos do HTML (que normalmente levam tempo para
serem incorporados aos editores), como também na possibilidade de acontecerem incompatibilidades do editor para com a linguagem.
Quando isso acontece o Webmaster (que conhece a Linguagem HTML), simplesmente entra no código fonte e "faz na mão", pois não
tem como o browser não cumprir uma ordem direta. Entrar no código fonte para suprimir as redundâncias e os caracteres de controle dos
editores ("sujeiras do código") é um grande artifício, principalmente para diminuir o tamanho do arquivo.
Sabendo HTML se ganha independência para criar, usando a criatividade, e sem depender dos recursos do Editor HTML que se
estaria usando.
1.3 Os Nomes dos Arquivos
HTML não faz distinção entre letras maiúsculas (caixa alta) e letras minúsculas (caixa baixa). Tanto faz escrever <font> como
<FONT>. Porém o servidor onde a página estiver hospedada (ou o sistema operacional, caso a página esteja no seu próprio computador)
diferencia letras minúsculas e maiúsculas, e se criar um link para um arquivo chamado apostila.htm e ele estiver com o nome
Apostila.htm, o servidor simplesmente não irá encontrá-lo. É por isso que muitas vezes o servidor retorna com uma mensagem de
"Arquivo não encontrado".
Os nomes não devem conter mais que 32 caracteres nem espaços em branco (use o símbolo _ para substituir o espaço em branco),
assim, ao invés de nomear o arquivo "pagina um.html", nomeie como "pagina_um.html"
O ponto final deve ser usado uma só vez para separar a extensão (de três letras) que classifica o arquivo. Não use pagina..html, use
pagina.html para o nome do arquivo.
Os nomes de arquivos não devem conter caracteres, tais como: acentos, cedilha, pontuações, sinais de maior e menor, pipe, trema,
e comercial, asterisco, parênteses, chaves etc. use somente números, letras e underline (o _)
1.4 A Lógica LIFO
O HTML é uma Linguagem de Marcação., onde se insere marcações (tags), na forma de elementos HTML no conteúdo da
informação que será publicada. As marcações informam ao browser como formatar o conteúdo (em Cabeçalhos, Parágrafos, Listas e
Tabelas) e onde inserir links em hipertexto e imagens e outros Objetos.
As tags são delimitadas entre os sinais de menor "<" e maior ">". A maioria das tags funciona em dois tempos, ou seja, tem que se
especificar onde começa e onde termina, por exemplo: <tag>texto</tag>, onde o sinal "/" significa o fim da atuação da tag.
Nunca se deve 'embaralhar' as tags, elas podem vir uma dentro da outra, porém a que começou primeiro tem que necessariamente
terminar por último, assim:
11

<tag1> <tag2> <tag3> texto </tag3> </tag2> </tag1>
Nunca misture a seqüência, como por exemplo:
<tag1> <tag2> <tag3> texto </tag2> </tag1> </tag3>
isso segue a lógica 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 não necessita de fim, assim como também a tag
de barra horizontal.
Como não são todas as tags que são relacionadas com textos, a tag que significa imagem não necessita de terminação 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 Básico
O documento HTML normalmente possui extensão .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 terminação </html> é obviamente a última. em seguida define-
se o cabeçalho com <head> e </head>
Dentro do cabeçalho podem existir diversas outras tags específicas e scripts em diversas linguagens, porém o que sempre existe é a
definição do título, com <title> e </title>. Este título é o que irá aparecer na barra superior da janela do browser, junto com o nome do
mesmo. Fora do cabeçalho, porém dentro das tags <html>, existe o "corpo" definido por <body> e </body> e aonde vai o "corpo" do
site.
Estas são as tags básicas de todo arquivo html.
<html> <!— início do código html -->
<head> <!— cabeçalho -->
<title> <!— título -->
</title> <!— final do título -->
</head> <!— final do cabeçalho -->
<body> <!— corpo do site -->
</body> <!— final do corpo do site -->
</html> <!— final do código html-->
1.6 O Arquivo index.htm
Normalmente, o arquivo index.htm é o arquivo default dentro de um diretório. Quando indicamos um endereço (link) e não
especificamos um arquivo dentro de um diretório, o browser procura pelo arquivo index.html. Se esse arquivo não existir, o browser
apresentará uma listagem dos arquivos contidos naquele diretório, o que pode não ser nosso desejo.
Por exemplo, o endereço 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 diretório "meu_diretorio" mesmo que eu não tenha especificado isso quando eu
digitei o endereço. Porém, se o arquivo index.html tiver sido deletado ou for inexistente, o browser não abrirá nenhum outro arquivo,
mas exibirá uma lista de todos os arquivos e diretórios contidos no diretório "meu_diretorio".
12

2 Elementos2 Elementos
EstruturaisEstruturais
<html atributos> ... </html><html atributos> ... </html>
É o comando de abertura e fechamento do documento HTML. Todos os demais comandos devem ser envolvidos por ele.
version= "versão"
informa a versão 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 inglês Americano. Os idiomas diferem de muitas
maneiras quanto à aparência impressa: tipos de caracteres, fluxo direcional e uma infinidade de peculiaridades principalmente nos
idiomas orientais.
dir= "rtl| ltr"
Determina a direção do fluxo do texto: RTL da direita para a esquerda, Ltr da esquerda para a direita.
<html lang="HE" Dire="RTL">
Essa é uma página formatada para o Hebraico.
</html>
Visualização: rtl (observe que a barra de rolagem vertical passou para o lado esquerdo):
Visualização dir.= "Ltr"
<head atributos> ... </head><head atributos> ... </head>
13

Contém o cabeçalho do documento HTML também conhecido como Meta Tag (informações sobre o documento para classificação
e indexação dele). Elas não aparecem na página 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, programação" >
<meta name= "description" content= "Apostila de HTML com comandos".
básicos e avançados ">".
<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>
Visualização (observe que as informações estão somente no código):
<body atributos> ... </body><body atributos> ... </body>
Contém o corpo do documento HTML, a parte que aparece na área de visualização do browser. Os atributos alteram a aparência.
background= "URL"
Contém a URL (localização) da imagem que cobrirá o fundo da área de visualização do documento se repetindo para cobrir toda a
tela (tiling ou lado-a-lado).
Atenção para cores fortes: isso não poderá impedir a leitura do texto.
<html>
<body background="imagensfolha.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>
Visualização:
14

bgcolor= "#rrggbb" ou "nome"
indica um número em hexadecimal ou um nome que define a cor de fundo. O nome é uma das 16 cores universalmente conhecidas
(padrão 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 padrão é 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>
Visualização (cuidado com o uso inadequado das cores!!):
link= "#rrggbb" ou "nome"
Cor de texto do link, sendo que o padrão é 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>
Visualização: cor do link em vermelho:
alink= "#rrggbb" ou "nome"
Cor do link já visitado (na hora que clico, muda a cor), o padrão é o vermelho (alink= "#FF0000").
15

vlink= "#rrggbb" ou "nome"
Configura a cor do link ativo, sendo que a cor padrão é vermelho púrpura (vlink= "#800080").
hover= "#rrggbb" ou "nome"
Cor do link quando o cursor estiver sobre ele.
bgproperties= "fixed".
Mantém o papel de parede fixo no fundo da tela, impedindo que o ele role junto com o conteúdo da página.
<html>
<body bgproperties="fixed" background="imagenssky03.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>
Visualização:
Visualização (depois de mover a barra):
leftmargin= "n"
Define o tamanho, em pixels, do espaço entre o início do texto e a borda esquerda da área de visualização do browser.
<body leftmargin= "10" >
Observe o espaço entre a margem e o início desse texto --- LEFTMARGIN=10
</body>
Visualização com leftmargin = 10:
16

Visualização com leftmargin = 100
topmargin= "n".
Define o tamanho, em pixels, do espaço entre o início do texto e a borda superior da área de visualização do browser.
<body topmargin= "50" >
Observe o espaço entre o início desse texto e a parte SUPERIOR--- TOPMARGiN=50
</body>
Visualização:
scroll= "yes | no | auto"
Este atributo define se a página terá as barras de rolagens horizontal e vertical. Onde "yes" Sempre apresentará as barras mesmo
que a página não precise, "no" NUNCA apresentará as barras mesmo que a página precise e "auto" apresentará as barras
automaticamente caso a página venha a precisar delas. No exemplo a seguir configurei SCRolL= "no", isso é, ele irá apresentar uma
página sem as barras.
17

3 Elementos do3 Elementos do
CabeçalhoCabeçalho
<script >...</script ><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 parâmetros <script> status= "..." </script> a mensagem que quer que apareça. Pode-se acentuar normalmente!!!
<html>
<body>
<script>
status= "isso é um exemplo de mensagem na barra de status"
</script>
</body>
</html>
Visualização:
defaultstatus= "mensagem"
Mostra uma mensagem quando nenhuma outra está sendo exibida.
Alterando o Formato do Cursor
Basta acrescentar o parâmetro style= "cursor:tipo_do_cursor". ao comando hrEF, e quando colocar o mouse sobre o link, o formato
do cursor se modificará.
18

Usando um Arquivo como Cursor
cursor:url(...)
19

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 página 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 página ele
voltará ao cursor normal configurado em seu sistema operacional. No exemplo abaixo, o cursor default da página (quando não 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 atenção.
Para vincular um arquivo de imagem ao cursor, de modo que essa imagem o acompanhará, fazemos assim:
Entre <head> e </head> colocamos o código 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 parâmetro 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" style="visibility:hidden" src="imagensminha_imagem.gif" width="64"
height="64">
Todo o código 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>
20

</head>
<body onmousemove="cursor()">
<img id="trail" style="visibility:hidden"
src="imagens/minha_imagem.gif" width="64" height="64">
</body>
</html>
Visualização:
21

4 Links e Imagens4 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 conexão com outra página, possibilitando a interação de um site com outros sites existentes.
Os links podem ser relativos, absolutos, internos e externos
Link (ou hiperlink) é um termo inglês que quer dizer "ligação" e sua função é ligar dois documentos.
O link relativo não especifica o caminho completo do endereço 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 diretório e na
mesma máquina 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>
Porém o seu endereço absoluto seria:
<html>
<body>
<a href="C:anaexemplo_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 diretório do site que está chamando-lhe, não
precisa todo o trabalho de digitação, apenas o nome do arquivo já basta. O link absoluto é usado para localizar arquivo que está num
servidor (ou diretório ou máquina) diferente, por isso seu endereço tem que estar completo.
Links Internos e ExternosLinks Internos e Externos
O Link interno é aquele que liga dois pontos em uma mesma homepage.
O Link Externo é aquele que cria uma ligação entre homepages diferentes em locais diferentes e, por isso, é um link absoluto (tem
que possuir o endereço completo).
<a atributos> ... </a>
uma âncora é um ponto de referência que marca o destino de um link interno.
As âncoras criam pontos de ligação entre todos os tópicos abordados, organizando sua estrutura e com isso otimizando sua
navegação. Por exemplo, quando se cria um artigo com índice e todo o seu conteúdo está na mesma página, podemos fazer com que
cada ponto do índice seja um link para o parágrafo exato (da mesma página) ao qual esse item diz respeito.
Para definir um link, utilizaremos o par de tags <a>.. </a>, cujo "A" vem de "Anchor" ("âncora" em inglês).
Quando numa página necessito colocar um link para uma palavra (ou parágrafo) no final dessa página, faz-se necessário colocar
uma marcação (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 página ou saltos para pontos de uma página diferente mas que se
encontra no mesmo diretório da página que a chama.
href= "..."href= "..."
De Hypertext REFerence ou referência 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>
22

<a href="http://www.icmsc.sc.usp.br/manuals/html/index.html">
Tutorial HTML ICMC-USP
</a>
</body>
</html>
Visualização:
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>
Visualização:
Quando abre o site:
Depois que clica no link e vai parar na âncora:
23

target="_blank", "nome" ou "_top"
Especifica uma janela ou quadro que receberão a página ou recurso referenciado.
Se target="_blank", a página 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>
Visualização:
target="nome" a página será aberta dentro de um frame que possua o tal nome.
target="_top", a página será aberta sobre a mesma janela do browser, ignorando qualquer organização de frames.
title="descrição"
Apresenta um quadro com a descrição 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>
Visualização:
24

style=text-decoration=: " "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 também usa Linux :)
</a>
</body>
</html>
Visualização:
Pode-se omitir esse sublinhado inserindo o seguinte parâmetro style="text-decoration:none"
<html>
<body>
<a href="http://www.oracle.com" style="text-decoration:none">
Oracle - uma grande empresa que também usa Linux :)
</a>
</body>
</html>
Visualização:
No exemplo acima se tira o sublinhado de um link específico, para fazer o mesmo com todos os links da página basta inserir estes
parâmetros em qualquer lugar da página entre <body...> e </body>
<html>
<body>
<style type="text/css">
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>
Visualização: (observe que não tem parâmetro dentro da tag <a href> do link e que mesmo assim ele mão está sublinhado)
Link Que Muda o Cursor
Quando você sobrepõe um link com o cursor ele muda a seta para uma mãozinha, esta é a condição 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 interrogação) e o segundo o cursor de
espera (com a ampulheta).
<html>
<body>
Visite um excelente site brasileiro sobre informática, principalmente
hardware -
25

<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>
Visualização: (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=" "onmouseover=" "
O link automático consiste naquele que abre espontaneamente quando o mouse passa sobre ele, sem que seja necessário 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>
Visualização:
quando abre o site:
Depois que passa o mouse sobre o link:
Fazendo um link oculto
Qual a utilidade de criar um link que ninguém possa ver?
Bom, isso vai da sua imaginação. Você pode criar situações interessantes com esse recurso. imagine alguns links ocultos e
automáticos numa homepage de estórias ilustrada que entram inesperadamente com um fundo musical. O internauta, ao mover o mouse
sobre sua página entrará numa seção oculta, sem que ele entenda o que está acontecendo. A sintaxe do link oculto (e automático) é 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="text-
decoration:none">
    
</a>
</body>
</html>
Visualização:
26

Quando abre a página:
Depois que passa o mouse:
Onde   (no-break space) cria um espaço em branco que será a área de atuação do link. Para aumentar essa área basta
aumentar a quantidade de espaços.
Tem de se tomar cuidado, porque pode-se perder o controle da situação 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 página de vez.
onclick="alert('...')"onclick="alert('...')"
Através da função onclick="alert('...')" podemos inserir uma mensagem no link. Essa mensagem aparecerá entre o clique no link e
a mudança da tela. Esse recurso é útil para mensagens de aviso em geral, pois a caixa de mensagem abrirá antes da página 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>
Visualização:
Quando abre o site:
Quando clica no link:
Depois de clicar em "ok" (abre o site destino):
mailto:mailto:
Podemos acionar o programa de e-mail diretamente de uma página HTML usando uma variação do comando <a>, que usa a opção
mailto no lugar da URL.
27

<html>
<body>
<a href="mailto:anaschneider@gmail.com">
Clique para me mandar um mail
</a>
</body>
</html>
Visualização:
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 apresentável em figuras com movimento.
<body>
<a href="mailto:anaschneider@gmail.com">
<img src="imagensminha_figura.gif" border="0">
</a>
</body>
Visualização depois de clicar na figura:
Você pode enviar E-mail para múltiplos destinatários simplesmente colocando os endereços E-mail separados por vírgulas.
Exemplo: <a href="mailto:fulano@ig.com.br, ciclano@hotmail.com, beltrano@aol.com.br">
Criando Links Para Download
Para colocar uma relação de arquivos para o usuário fazer download, o jeito mais organizado é o seguinte:
Primeiro, crie um diretório (pasta) chamada "download" no servidor onde sua homepage está hospedada (no local onde o seu site
está), ali serão colocados os arquivos que serão 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 diretório e o nome do arquivo).
Por exemplo, criei o diretório download e dentro dele coloquei o game Fooblillard3
<html>
<body>
<a href="downloadfoobillard3.rar">
Clique aqui para download do game Foobillard 3.0
</a>
</body>
</html>
Visualização:
28

HTML avançado

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (9)

Semelhante a HTML avançado

Semelhante a HTML avançado (20)

HTML avançado