| ULTIMATE HTML Guide |
No início era o Edit, um dos primeiros
e mais simples editores de texto. Caracteres ASCII puro sem extravagâncias.
Daí vieram os WordStar, OpenAcces, Carta
Certa, Word. Cada um trazia suas inovações, que infelizmente
não eram compatíveis entre si. A incompatibilidade existia
porque cada programa adicionava ao texto códigos próprios.
Exemplo:
Vou criar um editor de texto e quero que quando
meu usuário selecionar um texto qualquer para este ficar em negrito,
o software entenderá e na fonte adicionará o trecho entre
os sinais [neg] ... [-neg].
Assim, o trecho ficaria:
"Bater o bolo com todos os ingredientes e assar
por 10 min em forma redonda."
Desta forma é como aparece na janela,
entretanto se o arquivo for aberto em outro programa que não o meu,
será visto:
"Bater o bolo com todos os ingredientes e assar
por [neg]10[-neg] min em forma redonda."
Com o passar do tempo foram-se criando formas
de transformar de um padrão para outro - Ex.: Word => Carta Certa.
Para evitar que ocorra incompatibilidades como
esta na Internet, as entidades competentes definiram o padrão HTML.
O HTML funciona da mesma forma que o primeiro
exemplo, onde chamamos os operadores de Tags. Então no nosso
caso [neg] e [-neg] são tags. Porém as tags no HTML são
diferentes, funcionam entre os sinais de menor
que e maior que
( < > ).
A maioria das tags funcionam em dois tempos,
ou seja, você tem que especificar onde começa e onde termina.
De forma que seria assim: ...
<tag>texto</tag>... onde o sinal
BARRA (/) significa final da atuação do tag.
Nunca deve-se 'embaralhar' as tags, elas podem
vir uma dentro da outra, porém a que começou primeiro tem
que necessariamente terminar por último. Ex.:
...<tag1><tag2>texto<tag2><tag1>...
Agora, o que não se deve fazer: ...<tagA><tagB>texto</tagA></tagB>...
Isso segue a lógica LIFO (Last In, Fist Out), ou seja o último que aberto deve ser o primeiro a ser fechado.
Nem todas as tags necessitam ser terminadas. Ex.:
A tag que significa linha em branco não necessita de fim. Uma linha
em branco é uma linha em branco. A tag que significa linha horizontal,
uma linha é uma linha.
Bem 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.
Entendendo estas idéias, falta apenas demonstrar a estrutura de um documento HTML e dizer como ele pode ser escrito para provar a SIMPLICIDADE do HTML.
A facilidade em entender HTML é diretamente proporcional a facilidade que você demostrou ao aprender os conceitos acima e à sua capacidade de memorização. Daqui para frente é praticamente decorar as tags e o modo de usar.
Vamos em frente.
A estrutura de um documento HTML.
O documento HTML normalmente possui extensão .htm ou .html
Existe uma tag que identifica o documento como
sendo HTML: <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 linguagem, porém o
que sempre existe é a definição do título,
com <title> e </title>. Este título é o que vai aparecer
na barra superior (a azul) da janela do browser, junto com o nome do mesmo.
Fora do cabeçalho porém dento das
tags <html>, existe o "corpo" definido por <body> e </body>.
Assim, numa visão geral temos
1)
<html> <head><title></title></head><body>
</body></html>
ou, de forma mais organizada:
2)
<html>
<head>
<title>
</title>
</head>
<body>
</body>
</html>
Lembrando que quando o browser "lê" o arquivo, é indiferente se está tudo numa só linha como no número 1) ou arrumadinho, 2).
A grande vantagem da linguagem HTML é que não necessita
de conhecimentos prévios de programação.
Outro fator é o de não precisar de programa especial
ou editor específico, serve o Edit ou o NotePad que você nunca
mais usou (se é que usou alguma vez). Mas e o FrontPage, o Composer,
Claris, HotDog, W3e e tantos outros, você vai me perguntar.
Eles existem e não requerem necessariamente conhecimentos de
HTML, mas a vantagem de se saber é a de poder corrigir as eventuais
besteiras que estes possam vir a fazer. Tais editores são denominados
WYSIWYG ou WYSWYG, ou seja What You See Is What You Get - O que você
vê você tem. Mas não funciona tttãããooo
bem. E quando o programa empaca ou não resolve o problema, você
vai no código fonte e pronto. Não tem como o browser não
cumprir uma ordem direta.
Entrar no código fonte para suprimir as redundância também
é um grande artifício, principalmente para diminuir o tamanho
do arquivo.
Motivos para aprender não faltam, então, em frente.
Apesar das tentativas de unificar o HTML ainda existem diferenças.
Principalmente no que diz respeito a Micro$oft x Netscape. Isso desestabiliza
um pouco o WebMaker - você - que cria utilizando um e no outro sai
tudo diferente, quando sai.
Desta disputa nasceu o NHTML (Netscape HTML) que acabou sendo utilizado
no Explorer, entre outros. Porém o básico ainda é
padrão, então comecemos por ele.
Ainda falando sobre a estrutura básica, algumas tags possuem atributos específicos:
Atributos da Tag <body>:
background - Imagem para o fundo da página - background="fundo.gif"
ou background="fundo.jpg"*
*.gif e .jpg são os dois padrões de imagens aceitos pelos
browsers
bgcolor - cor de fundo para a página em RGB (Verm., Verde, Azul
) em Hexadecimal* - bgcolor=#00FF00 - fundo verde
* hexadecimal, {0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F}
text - cor dos textos em RGB - - textos em vermelho
link - cor dos links não visitados
vlink - cor dos links visitados
alink - cor dos links no instante do acionamento
OBS.: funcionam igual ao atributo text - link=#FF0000
vlink=#FF0000 alink=#FF0000
Exemplo do <body>:
<body link=#00FF00 vlink=#0000FF alink=#FF0000
text=#FF0000 background="fundo.gif" bgcolor=#00FF00>
Parágrafo, quebra de linha, linha (barra ou régua) horizontal.
A tag <p> ou <P> tanto faz, indica avanço para a próxima linha deixando uma em branco.
A tag <br> indica avanço de texto para a próxima linha, sem deixar linha em branco.
A tag <hr> gera uma barra como a abaixo, de ponta a ponta da tela
Imagens
O básico no uso de imagens é:
<img src="figura.jpg">
ou .gif
alt="texto" - texto alternativo caso a imagem não possa ser carregada
align="parâmetro" - alinhamento da imagem, parâmetros:
left, right, top, texttop, middle, absmiddle, baseline, bottom, absbottom
width="L", onde L é a Largura em pixels da imagem
height="A", onde A é a altura de imagem em pixels
width e height são muito importantes. Os browsers sabendo a altura e largua não precisam esperar a imagem chegar por completo para poder exibir o resto da página. Além disso, podem ser usados para distorcer as imagens.
border="B", onde B é a largura da borda da imagem, quando esta for um link
ismap indica que a imagem é um mapa sensitivo
vspace=V, onde V é o espaço vertical ao redor da imagem,
em pixels
hspace=H, onde H é o espaço horizontal ao redor da imagem,
em pixels
Textos
Existem muitas maneiras de tratar um texto, em HTML.
Cabeçalhos (HEADINGS)
Os comandos acima descritos são considerados de formatação física, porque é diretamente um padrão não variável, existe a formatação de layout, não física, que cada um pode alterar de acordo com seu gosto:
<cite> ... </cite>
<address> ... </address><blockquote> ... </blockquote><strong> ... </strong>
Mas quando você já possui um texto que deseja adicionar
de modo que apareça da forma como ele já é. Use:
<pre> ...</pre> preformated
Ex.:
vim vi voltei
Quando se deseja mostrar códigos de programas em geral, e não se quer que o browser interprete tais códigos, use a tag <code> ... </code>
isso é um código maluco que não quero
que o browser interprete gerrnbva gbrvbzksjnv kvnmdsnbv
Um artifício muito utilizado por programadores é o comentário,
ou seja, aquelas notas de página, informações de copy
right que só devem ser vistas por quem for bisbilhotar o código-fonte.
<!-- .....--> onde .... é seu comentário.
Alinhamento
O alinhamento padrão de um documento html é à esquerda, mas pode ser alterado usando-se:
Breve:
Links
listas
Tables
Forms
Tabelas de cores e caracteres especiais
Multimídia
dhtml
sgml
vrml
frames
contadores
java
javascript
chats