Guia Prático de HTML
[ratings]
SOBRE O HTML
O HTML é uma linguagem de marcação de texto. Mais especificamente, uma linguagem de marcação de hipertexto. Portanto, antes de começar a falar de HTML, vamos entender o que vem a ser uma linguagem de marcação.
Linguagens de marcação (markup languages, em inglês) são linguagens que combinam texto com informações extras sobre o texto. Essa informação extra pode ser representada por diversos símbolos ou palavras-chave diferentes, dependendo da linguagem de marcação com que estivermos trabalhando.
O HTML não é uma linguagem de formatação de textos qualquer, ela possibilita ligar textos que estão num computador a textos que estão num outro computador, usando como meio a internet. O processador e visualizador de HTML é chamado de navegador, pela característica do hipertexto que permite ao usuário “nadar” na informação.
O navegador (também chamado de browser), nada mais faz do que abrir arquivos de computador e, caso esses arquivos contenham códigos HTML, interpretá-los segundo o padrão do hipertexto e gerar a “página html”, que é a manifestação gráfica dos códigos – aquilo que você usualmente vê quando navega pela internet. Por convenção, os nomes dos arquivos em HTML terminam com .html. Exemplo: index.html, foo.bar.html, etc. (existem também arquivos html que terminam com .shtml e outras extensões malucas). Observe que esses arquivos podem estar tanto no computador do usuário que usa o navegador quanto em outros computadores: o navegador é capaz de abrir esses arquivos desde que eles estejam acessíveis – as tais páginas web.
SUA PRIMEIRA PÁGINA EM HTML
Uma página HTML é dividida em duas partes: cabeça e corpo. Na cabeça (ou cabeçalho) são definidos os atributos principais do documento, como o título e as palavras-chave. O corpo contém a parte visível do documento, isto é, aquela que você verá processada em seu navegador. Existe ainda uma região da página que está tanto fora da cabeça quanto do corpo (não! não é a falta de juízo!), mas não iremos entrar nesse mérito.
O QUE ESTÁ DENTRO DE UM ARQUIVO EM HTML?
Um arquivo HTML é constituído por textos que definem os elementos da linguagem HTML usando “etiquetas de marcação”.
As etiquetas de marcação dão instruções ao navegador sobre a estrutura do documento e sobre a forma de como a página deve ser apresentada graficamente.
Os arquivos HTML podem ser escritos usando um simples editor de textos e seus nomes devem possuir a extensão .html.
EXPERIMENTE VOCÊ MESMO
Se você utiliza o Windows (95, 98, 2000, XP, etc), inicie o Bloco de Notas (Notepad). Agora digite o seguinte texto:
<html> <head> <title> Título da Página </title> </head> <body> Esta é minha primeira página. <b>Este texto está em negrito</b> </body> </html>
Salve este arquivo com o nome index.htm
Abra o seu navegador. Agora abra o arquivo que você salvou acima, chamado index.htm utilizando as opções do menu ou arrastando o ícone do arquivo para dentro da janela do navegador. Observe o resultado.
EXPLICAÇÃO DO EXEMPLO
A primeira tag em seu documento HTML é <html>. Esta tag define o início de um documento HTML e indica ao navegador que todo conteúdo posterior deve ser tratado como uma série de códigos HTML. A última tag em seu documento deverá ser </html>. Esta tag indica ao navegador que é o fim de seu documento HTML.
O texto entre as tags <head> … </head> é a informação do cabeçalho. Nenhuma informação contida no cabeçalho é exibida na janela do navegador.
O texto entre as tags <title> … </title> é o título de seu documento. O título será exibido na legenda do navegador, na parte de cima do browser.
O texto entre as tags <body> … </body> são as informações que serão exibidas na página.
O texto entre <b> … </b> ficará com o estilo Negrito (Bold).
.HTM OU .HTML?
Os nomes dos arquivos escritos em HTML devem ter a extensão .html, mas a extensão .htm ainda é utilizada. Este fato é uma herança dos tempos (pré-históricos no que diz respeito à Internet) do MS-DOS e do Windows 16 bits, em que os nomes dos arquivos tinham no máximo 8 caracteres e as suas extensões não podiam ter mais de 3 caracteres.
Essas deficiências, que no passado obrigaram a usar a extensão .htm em vez de .html já foram eliminadas. Por isso devemos usar a extensão .html, a não ser que exista uma boa razão para você estar utilizando .htm (pouco provável).
EDITORES “PUROS” versus WYSIWYG
Existem duas formas de se criar um texto formatado através de linguagens de marcação. A primeira consiste em escrever o texto, usando as instruções da linguagem, num editor de texto puro. Em seguida, usa-se o processador de texto para produzir o texto formatado.
A outra maneira é usar um editor de textos WYSIWYG (What You See Is What You Get – O Que Você Vê É O Que Você Tem). Apesar da sigla ser comprida, o conceito é simples: esse tipo de programa é composto por um editor de texto que também é um processador de textos formatados. A diferença aqui é que o texto que o usuário está editando e visualizando não é o texto puro, mas sim o texto já formatado graficamente, ou seja, o que você vê é o que você tem.
Você provavelmente já usou editores desse tipo. Os editores como o Word, o AbiWord e o OpenOffice Writer são WYSIWYG e os documentos que eles geram utilizam linguagens de marcação.
PERGUNTAS FREQÜENTES
Depois que eu editei meu arquivo HTML, eu não consigo visualizar o resultado em meu navegador. Por quê?
Verifique se você salvou o arquivo com o nome correto e que sua extensão seja .htm. Confira também em sua barra de endereços do navegador, verifique quanto ao diretório se está correto.
Qual navegador eu devo utilizar?
Você pode utilizar qualquer browser, como o Internet Explorer, Mozilla, Opera, etc. Particularmente, recomendo o Firefox e o Internet Explorer.
Porque utilizamos tags com letras minúsculas?
Em HTML os nomes das tags e elementos podem ser escritos tanto com letras maiúsculas quanto com letras minúsculas, tanto que <B> é a mesma coisa que <b>. Se você observar em tutoriais encontrados pela Web, vai notar que os mais antigos geralmente utilizam letras maiúsculas para escrever os nomes das tags, mas os mais modernos utilizam exclusivamente letras minúsculas.
A nova geração do HTML é uma aplicação do XML e é designada por XHTML. O XHTML é a melhor linguagem para se criar páginas para a Web, mas é mais restrita do que o HTML (“rouba” algumas das liberdades que o HTML oferece). Ao contrário do que acontece em HTML, em XML as etiquetas <B> e <b> representam elementos diferentes, visto que em XHTML foi adotado uma convenção segundo a qual todas as etiquetas devem ser escritas com letras minúsculas. Por este motivo é extremamente recomendável que se escreva todas as etiquetas com letras minúsculas. Deste modo, você estará adquirindo bons modos e quase não terá trabalho de converter suas páginas HTML para XHTML.
ELEMENTOS E ATRIBUTOS
Um elemento é uma estrutura semântica, composta de tag de abertura, conteúdo e tag de fechamento.
Os documentos HTML são simples arquivos de texto que contêm “tags de marcação”. Essas etiquetas definem os elementos da linguagem HTML e os seus conteúdos. A lista seguinte indica algumas de suas características:
- As “tags de marcação” do HTML são usadas para definir os elementos.
- As tags HTML escrevem-se utilizando os caracteres < e > e entre eles o nome do elemento e os seus atributos.
- A primeira tag do par é a tag de início (ou de abertura) e a segunda do par é a tag de fim (ou de fechamento).
- Tudo o que se encontrar entre as tags de início e de fim fazem parte do conteúdo do elemento.
- Em XHTML as tags devem ser escritas sempre com letras minúsculas, e as tags <b> e <B> não representam o mesmo elemento.
Você se lembra de nosso primeiro exemplo mostrado?
<html> <head> <title> Título da Página </title> </head> <body> Esta é minha primeira página. <b>Este texto está em negrito</b> </body> </html>
Esta parte abaixo é um elemento HTML:
<b>Este texto está em negrito</b>
Repare alguns aspectos do código acima:
- Este elemento inicia com a tag: <b>
- O conteúdo do elemento é este: Este texto está em negrito
- O elemento termina com a tag final: </b>
O propósito da tag <b> é colocar o conteúdo do elemento HTML em negrito (bold)
UM EXEMPLO MAIS COMPLEXO
Este exemplo abaixo também é um elemento do HTML (mais complexo):
<body> Esta é minha primeira página. <b>Este texto está em negrito</b> </body> Este elemento HTML inicia com tag <body> e termina com a tag </body>
O propósito da tag <body> é definir o conteúdo principal, o corpo do documento.
ATRIBUTOS DAS TAGS
Tag é um código usado para marcar o início e, onde for requerido, o fim de um elemento HTML. Há, como exposto acima, tags de abertura e de fechamento. Uma tag de abertura é representada por sinal de menor ( < ), um nome de elemento HTML e um sinal de maior ( > ) (ex. <p>) e deve ser colocada imediatamente antes do início do conteúdo do elemento. Uma tag de fechamento se diferencia de uma tag de abertura apenas por uma barra ( / ) antes do nome do elemento (ex. </p>) e deve ser colocada imediatamente após o fim do conteúdo do elemento.
Os atributos servem para definir uma propriedade de um elemento HTML. Os atributos HTML devem ser colocados sempre na tag de abertura logo após o nome do elemento, precedido de um espaço e é composto de um nome de atributo, um sinal de igual ( = ) e um valor de atributo, cercado por aspas duplas ( “ ) ou simples ( ‘ ).
A tag <body> define o corpo ( body ) de uma página HTML. No exemplo seguinte foi adicionado o atributo bgcolor (que significa “background color”, ou cor de fundo) para indicar que queremos que a página fique com uma cor vermelha em seu plano de fundo.
<html> <body bgcolor="red"> Esta é a minha primeira página da web. <b>Este texto está em negrito</b> </body> </html>
Vamos considerar agora a tag <table>, que define um elemento de uma tabela. Ao juntarmos o atributo border (que significa borda) com o valor apresentado a seguir, estamos dizendo ao navegador para não colocar as bordas da tabela ( <table border=”0″> indica uma espessura nula para a linha de contorno da tabela):
<html> <body> <table border="0"> <tr> <td> Esta é a minha primeira tabela. </td> </tr> </table> </body> </html>
Já no exemplo abaixo estamos dizendo ao navegador para desenhar uma linha de contorno com espessura 2 ( border=”2″ )
<html> <body> <table border="2"> <tr> <td> Esta é a minha segunda tabela. </td> </tr> </table> </body> </html>
Os atributos sempre entram em pares nome/valor (name/value), assim: name=”value”
Nota 1: Os atributos só podem aparecer nas tags de início. É proibido colocar atributos nas tags de fechamento.
Nota 2: Para garantir a compatibilidade com a linguagem XHTML, utilize letras minúsculas para escrever o nome dos atributos, e sempre coloque os valores entre aspas.
ATRIBUTOS PODEM SER APLICADOS À MAIORIA DAS TAGS
Você normalmente usará atributos com mais freqüência em algumas tags, tais como a tag body e raramente usará em outras, como por exemplo, a tag br que é um comando para pular de linha e não precisa de nenhuma informação adicional.
Assim como existem muitas tags, também existem muitos atributos. Alguns atributos são empregados em tags específicas enquanto outros servem para várias tags. E vice-versa: algumas tags podem conter somente um tipo de atributo, enquanto outras podem conter vários tipos.
Isto pode parecer um pouco confuso, mas à medida que você for praticando vai constatar que tudo é fácil e lógico, bem como vai verificar as inúmeras possibilidades que os atributos oferecem.
DEVEMOS USAR ASPAS OU APÓSTROFOS (“TEXTO” OU ‘TEXTO’)?
Acabamos de ver que os valores dos atributos devem ser sempre colocados entre aspas. Normalmente utilizamos as aspas normais ( “ ), mas os apóstrofos ( ‘ ) também são permitidos.
Em alguns casos, o valor do atributo contém o próprio caractere aspas. Numa situação dessas, devemos usar apóstrofos (que aqui funcionam como aspas simples) para colocar em torno do valor do atributo, assim:
alt="Ele disse: "Não!" "
NOTAS RÁPIDAS
- As Tags HTML são utilizadas para marcar elementos HTML. Elas estão cercadas pelos dois caracteres < (menor que) e > (maior que).
- As tags normalmente aparecem em pares, como <b> e </b>.
- A primeira tag em um par é sempre a tag de início, a segunda tag do par é a tag de fim.
- O texto entre o começo e o fim da tag é o conteúdo do elemento.
- HTML não é sensitive, ou seja, <b> é a mesma coisa que <B>.
- Se por acaso você escreveu os códigos HTML errado – por exemplo >b> invés de <b> – não se desespere, pois o máximo que pode acontecer é o seu navegador interpretar sua página de forma diferente do esperado e desenhá-la de um jeito maluco.
O CABEÇALHO DE UM DOCUMENTO HTML
O elemento <head> contém informação de caractere geral, também designada por meta-informação, sobre o conteúdo do documento e sobre a forma como ele deve ser apresentado.
Podemos dizer que o termo meta-informação (ou meta-dados) significa dados que descrevem outros dados ou informações.
Os elementos contidos dentro do elemento <head> não são exibidos na tela do navegador.
O padrão HTML estabelece que só um pequeno número de elementos pode aparecer dentro do cabeçalho. Eles são: <base>, <link>, <meta>, <title>, <style> e <script>.
A construção seria o seguinte:
<head> <p>Aqui temos algum texto</p> </head>
Nesta situação, o navegador pode reagir de duas formas:
- Apresentar o texto porque ele se encontra dentro de um elemento <p>
- Esconder o texto porque ele pertence ao cabeçalho
Se você colocar um elemento não autorizado, como <h2> ou <p>, dentro do cabeçalho, a maioria dos navegadores vai escrever este elemento na página.
Aparentemente, as pessoas que são responsáveis pela concepção dos browsers acham que este gênero de erros é aceitável. Esta e outras deficiências dos browsers são parcialmente responsáveis pelas más práticas de codificação adquiridas por muitos criadores de páginas HTML. Uma das razões que levaram à criação da linguagem XHTML foi a necessidade de acabar com estas situações de uma vez por todas.
ELEMENTOS DE CABEÇALHO
|
Elemento |
Descrição |
|
<head> |
Contém informação importante a respeito do documento mas que não deve ser apresentada no corpo da página |
|
<title> |
Define o título da página |
|
<base> |
Define um URL base comum para todas as ligações relativas da página |
|
<link> |
Faz referência a um recurso externo e estabelece a ligação com ele |
|
<meta> |
Dá informação sobre aquilo que o documento contém |
DOCTYPE
A declaração DOCTYPE serve para indicar o DTD a usar para validar na página. Quando utilizada, deve aparecer logo no início da página, antes do elemento <html>
|
Declaração |
Descrição |
|
<!DOCTYPE> |
Define o tipo de documento. Deve ser colocada antes de qualquer elemento pelo que fica mesmo antes do elemento <html> |
META
O elemento <meta> contém informação de caractere geral (meta-informação) sobre o documento e deve ser colocado dentro do elemento <head>. Sua finalidade é fornecer informação que descreve o documento.
Durante alguns anos a utilização mais freqüente da informação fornecida pelo elemento <meta> foi a criação de índices para sites de busca. Atualmente somente alguns buscadores ainda usam esta informação para indexar páginas, e os de maior sucesso ignoram este elemento. No entanto, há partes que continuam a ser tidas em consideração pelos agentes (robots) dos buscadores, como por exemplo, as indicações dadas sobre as pastas em que não deve ser feita qualquer indexação.
Alguns sistemas de busca (não muitos) usam a informação contida nos elemento meta para indexar as páginas. No fragmento de código seguinte, o elemento <meta> contém uma breve descrição da página:
<meta name="description" content="Tutoriais e referências técnicas de HTML, CSS, JavaScript, XML, XSLT, SVG">
Na parte do código abaixo o elemento <meta> contém uma palavras-chave para indexar a página:
<meta name="keywords" content="HTML, DHTML, CSS, XML, XHTML, JavaScript, XSLT, SVG">
Como acabamos de ver, os nomes dados ao atributo name indicam claramente a finalidade da informação contida no elemento meta.
Infelizmente, muitos criadores de páginas para a Web abusaram do elemento meta e usaram de forma contrária à sua filosofia para enganar os motores de pesquisa. Em conseqüência disso, os sites de busca passaram a ignorar cada vez mais o elemento <meta>, o que acabou dificultando todos aqueles que pretendiam usá-lo de forma correta.
Algumas vezes encontramos situações em que o atributo name do elemento <meta> contém um valor desconhecido, como no exemplo seguinte:
<meta name="security" content="low">
Numa situação destas devemos interpretar o elemento meta como contendo informação que é específica do website. Essa informação pode ser importante para o autor da página, mas provavelmente é irrelevante para os visitantes. É possível que essas informações sejam úteis para algum software que leia a página.
