FUNDAMENTOS BÁSICOS
HTML
HTML (HyperText Markup Language) é uma
linguagem de marcação de texto utilizada para publicação no WWW. Consiste de rótulos
que marcam trechos e blocos de texto que são utilizados por um visualizador HTML (ou browser)
para formatar o documento e apresentá-lo na tela.
Como foi mencionado antes, para escrever HTML, não é necessário mais que um editor
de textos. Pode-se usar, além do conjunto de caracteres básico do teclado, os caracteres
do alfabeto ISO 8859-1 (ISO Latin-1). Desta forma, é possível escrever
normalmente em português com acentos e cedilha, desde que seu editor de texto ou terminal
permitam. Pode-se também, se necessário, utilizar o conjunto básico (US ASCII 7bit) e
representar acentos, caracteres especiais e símbolos do alfabeto ISO Latin-1.
Esta parte abrange os seguintes tópicos:
Representação dos Elementos
Os elementos HTML são representados no texto através de rótulos (ou tags).
O visualizador interpreta como rótulos todos os elementos HTML válidos que
estejam entre < e >. Por exemplo: <BR>
é interpretado como uma quebra de linha. <NHAC>, é ignorado e não
aparece na página, pois não existe. Apesar de não aparecerem, elementos inválidos não
devem ser usados para texto escondido. Existe uma marcação especial para comentários.
A maioria dos elementos HTML possuem um rótulo inicial e um rótulo final,
envolvendo o texto que é marcado por eles. A sintaxe básica
<Elemento> Texto marcado por Elemento </Elemento>
Observe que o rótulo de fechamento tem o mesmo nome que o rótulo inicial,
mas é precedido por uma barra ("/"). Alguns elementos podem ter um ou mais atributos,
que definem alguma característica especial. Os atributos, quando presentes, aparecem no
rótulo inicial separados por espaços, logo após o nome do elemento.
Exemplos de elementos HTML com atributos:
<BODY BACKGROUND="backgrounds/papel-de-parede.gif">...
corpo do documento ... </BODY>
- define uma imagem de fundo, disposta em mosaico, para a página.
<table border> ... conteúdo e rótulos de tabela ... </table>
- define uma borda para a tabela.
<hr noshadow width=50% size=10 align=left>
- define uma linha horizontal sem sombra, com largura de 50% da página, 10 pixels de
espessura e alinhada pela esquerda.
Os caracteres "<" e ">",
por definirem o início e final dos rótulos, só podem ser impressos na tela do
visualizador HTML se forem referenciados através de uma seqüência de escape. Esta
seqüência é indicada por um "&" seguido de uma abreviação
e um ponto-e-vírgula, indicando o final da seqüência. As principais seqüências
de escape, necessárias para produzir "<", ">",
"&" e aspas (quando necessário) são:
| < |
< |
| > |
> |
| & |
& |
| " |
" |
Toda a formatação da página é realizada exclusivamente com base na
marcação do texto pelos elementos HTML. Somente através de elementos HTML pode-se
quebrar uma linha, criar uma endentação, iniciar um novo parágrafo, etc. Qualquer
formatação previamente realizada (exceto para texto rotulado com <PRE>)
é ignorada. Espaços extras, tabulações, retornos, novas-linhas, etc. não são
considerados. O exemplo a seguir ilustra esta característica:
Os três parágrafos...
"No reino dos ares sou a liberdade;
entre os guerreiros sou a vitória;
entre os animais que habitam as águas sou o crocodilo;
entre os rios sou o Ganges."
(Bhagavad Gita)
|
"No reino dos ares sou a liberdade; entre os guerreiros
sou a vitória; entre os animais que habitam as águas
sou o crocodilo; entre os rios sou o Ganges."
(Bhagavad Gita)
|
No reino dos ares sou a liberdade; entre os guerreiros
sou a vitória; entre os animais que habitam as
águas sou o crocodilo; entre os rios sou o Ganges.
(Bhagavad Gita)
|
... serão formatados da mesma maneira pelo visualizador e ficarão
assim:
| "No reino dos ares sou a liberdade; entre os guerreiros sou a vitória; entre os
animais que habitam as águas sou o crocodilo; entre os rios sou o Ganges." (Bhagavad
Gita) |
Também não importa se são utilizadas letras maiúsculas ou minúsculas para definir
o rótulo, ou seja, tanto faz <BODY>, <body>,
<Body> ou <bOdY>.
Esta regra não vale, porém, para as URLs que podem ser referenciadas (entre aspas,
geralmente) por atributos dentro dos rótulos.
[Volta para o início desta página]
Estrutura Hierárquica
A estrutura básica (mínima) de uma página HTML é a seguinte:
<!DOCTYPE HTML Public "-//IETF//DTD HTML//EN" -->
<HTML>
<HEAD>
<TITLE> Descrição do documento </TITLE>
[elementos opcionais]
</HEAD>
<BODY>
[texto e elementos HTML]
</BODY>
</HTML>
A primeira linha: <!DOCTYPE HTML Public "-//IETF//DTD
HTML//EN" --> é um rótulo SGML que informa ao visualizador que
ele deve interpretar o documento de acordo com a definição de documento (DTD) tipo HTML genérico,
aceitando os rótulos que ele conhece e ignorando os rótulos que ele não conhece. A
maioria dos browsers atuais assume essa definição por default, na ausência da
declaração acima.
O elemento <HTML>...</HTML>
marca o início e o final do documento HTML. Deve conter duas sub-estruturas distintas: o cabeçalho,
delimitado por <HEAD> e </HEAD>, e o corpo do
documento, entre os rótulos <BODY> e </BODY>.
O bloco do cabeçalho, marcado por <HEAD> e </HEAD>
pode conter informações sobre o conteúdo do documento utilizada para fins de
indexação e organização. Não contém informação que será exibida na página.
<TITLE> é o único elemento obrigatório do bloco
do cabeçalho. Deve conter o título do documento que aparece geralmente, fora da
página, na barra de título do browser. O título deve conter informações que
descrevam o documento. Não deve ser excessivamente longo nem muito curto a ponto de não
conter informação suficiente. O seguinte exemplo é um bom título:
<TITLE>Tutorial sobre HTML: Introducao</TITLE>
enquanto que os dois seguintes são títulos ruins:
<TITLE>Introducao</TITLE>
<TITLE>Introducao ao HTML abrangendo recursos de listas, tabelas,
formulários e interface CGI, com exemplos de utilização e exercícios. Abrange HTML
2.0, HTML+, HTML 3.0 e Extensões do Netscape. Escrito por fulano de tal em 31 de
fevereiro de 1996. Blá blá bla...</TITLE>
O bloco marcado por <BODY> e </BODY>
contém a parte do documento onde será colocada a informação que efetivamente
será mostrada e formatada na tela pelo browser. Neste tutorial, todos os elementos
que apresentaremos nas páginas a seguir, estarão dentro da estrutura de <BODY>
(com exceção de <TITLE>, descrito acima, que fica em <HEAD>).
[Volta para o início desta página]
[Voltar para o Sumário]
| 
