Guia completo de HTML - 141 páginas sobre elementos, links e cabeçalhos

F
141 Páginas

Linguagem
HTML

Professora Ana Carolina Jaskulski

http://anacarol.blog.br
anamaxwell@gmail.com

Março/2007

2

Í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

3
src="..."................................................................................................................................................................................31
align="top | middle | bottom | left | right"..............................................................................................................................31
width="largura", height="altura"...........................................................................................................................................33
border="valor"......................................................................................................................................................................33
vspace="y" hspace="x"........................................................................................................................................................34
alt="texto".............................................................................................................................................................................35
onmouseover, onmouseout="imagem"...............................................................................................................................35
Criando um 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

4
<u> ... </u>......................................................................................................................................................
......................47
<strike> ... </strike>........................................................................................................................................... ....................47
<del> ... </del>.......................................................................................................................................................................47
<s> ... </s>......................................................................................................................................................................
.......47
<sub> ... </sub>.............................................................................................................................................................. .......47
<sup> ... </sup>.............................................................................................................................................................. .......47
<small> ... </small>............................................................................................................................................................. ...47
<big> ... </big>.......................................................................................................................................................................47
<blink> ... </blink>................................................................................................................................................................ ..48
align="top", "middle", "bottom" ............................................................................................................................................49
behavior =scroll, slide, alternate .........................................................................................................................................49
bgcolor="cor" ......................................................................................................................................................................50
direction=left, right, up, down...............................................................................................................................................50
height="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


5
type= “tipo"...........................................................................................................................................................................72
Ordenada..............................................................................................................................................................................
.72
<ol atributos> ... </ol> ...........................................................................................................................................................72
type="tipo"............................................................................................................................................................................72
start="valor".........................................................................................................................................................................73
<li atributos> ... </li> ....................................................................................................................................
.........................73
<dl atributos> ... </dl> ...........................................................................................................................................................73
compact...............................................................................................................................................................................73
<dt atributos> ... </dt> ......................................................................................................................................................
.....74
<dd atributos> ... </dd> .........................................................................................................................................................74
Usando Figuras como Marcadores ................................................................................................................................... ....74
14 Tabelas..............................................................................................................................76
.
<table>...</table> ........................................................................................................................................................... .......76
<tr>...</tr> .................................................................................................................................................................
............76
<td>...</td> ...........................................................................................................................................................................76
<table atributos> ... </table> ................................................................................................................................. ................76
border="valor"......................................................................................................................................................................77
cellpadding="valor"..............................................................................................................................................................78
width="valor" e height="valor"...........................................................................................................................................79
bgcolor="#rrggbb" ou "nome"..............................................................................................................................................79
background ="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


6
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

7
offy ....................................................................................................................................................................................119
positive ..............................................................................................................................................................................120
fliph e flipv........................................................................................................................................................................
....120
glow .................................................................................................................................................................
...................120
color ..................................................................................................................................................................................121
strength .............................................................................................................................................................................121
gray....................................................................................................................................................................................
..121
invert............................................................................................................................................................................
........122
motion blur ................................................................................................................................................................. .........122
strenght .............................................................................................................................................................................123
direction ............................................................................................................................................................................123
progid:DXimagetransform.Microsoft .................................................................................................................................123
wave ................................................................................................................................................................
...................124
add ....................................................................................................................................................................................124
freq ....................................................................................................................................................................................124
lightstrength ......................................................................................................................................................................124
phase ................................................................................................................................................................................124
strength .............................................................................................................................................................................124
xray .............................................................................................................................................................................
........125
19 Frames ..........................................................................................................................
...126
<frameset atributos> ... </frameset> ...........................................................................................................................
........126
cols="x, y, ...".....................................................................................................................................................................126
rows="x, y, ..."....................................................................................................................................................................126
frameborder="1 / 0"............................................................................................................................................................126
Frames verticais ..........................................................................................................................................
.......................126
Frames Horizontais..............................................................................................................................................................127
Frames Combinados..................................................................................................................................... ......................127
framespacing="valor".........................................................................................................................................................128
<frame atributos> ...............................................................................................................................................................
.128
align="top, middle, bottom, left, right"................................................................................................................................128
frameborder="1 / 0" ...........................................................................................................................................................128
src="URL"..........................................................................................................................................................................128
name="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

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


9

Introduçã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!


10

1 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


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


12
<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".


13

2 Elementos
Estruturais
<html atributos> ... </html>
É o comando de abertura e fechamento do documento HTML. Todos os demais comandos devem ser envolvidos por ele.

version= "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>

Guia completo de HTML - 141 páginas sobre elementos, links e cabeçalhos

Guia completo de HTML - 141 páginas sobre elementos, links e cabeçalhos

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (19)

Similar a Guia completo de HTML - 141 páginas sobre elementos, links e cabeçalhos

Similar a Guia completo de HTML - 141 páginas sobre elementos, links e cabeçalhos (20)

Guia completo de HTML - 141 páginas sobre elementos, links e cabeçalhos