Tutoriais

Introdução à Linguagem HTML

Esta lição apresentará à você seu novo amigo, o HTML.

O que é HTML?

HTML é a "língua mãe" do seu navegador.

Resumindo uma longa história, HTML foi inventado em 1990 por um cientista chamado Tim Berners-Lee. A finalidade inicial era a de tornar possível o acesso e a troca de informações e de documentação de pesquisas, entre cientistas de diferentes universidades. O projeto inicial tornou-se um sucesso jamais imaginado por Tim Berners-Lee. Ao inventar o HTML ele lançou as fundações da Internet tal como a conhecemos atualmente.

HTML é uma linguagem que possibilita apresentar informações (documentação de pesquisas científicas) na Internet. Aquilo que você vê quando abre uma página na Internet é a interpretação que seu navegador faz do HTML. Para visualizar o código HTML de uma página use o menu "View" (Ver) no topo do seu navegador e escolha a opção "Source" (Código fonte).

Para quem não conhece, o código HTML pode parecer complicado, mas este tutorial irá tornar as coisas claras para você.

Para que devo usar o HTML?

Se você quer construir websites terá que conhecer HTML. Mesmo que você use um programa para criar seu website, tal como o Dreamweaver, um conhecimento básico de HTML será necessário para tornar as coisas mais simples e para criar um website de melhor qualidade. A boa notícia é que HTML é fácil de aprender e de usar. A partir das duas próximas lições você já terá aprendido como construir seu primeiro website.

HTML é usado para construir websites. É simples!

OK, mas o que significa H-T-M-L?

HTML é a abreviatura de "HyperText Mark-up Language" - e isto é tudo o que você precisa saber por enquanto. Contudo, vamos detalhar isto.

• Hyper é o oposto de linear. Nos tempos antigos - quando mouse era apenas um rato caçado por gatos - os programas de computadores rodavam linearmente: quando o programa executava uma ação tinha que esperar a próxima linha de comando para executar a próxima ação e assim por diante de linha em linha. Com HTML as coisas são diferentes - você pode ir de onde estiver para onde quiser. Exemplificando: não é necessário que você tenha visitado o site MSN.com antes de visitar o site HTML.net.
• Text é texto e não há mais nada a acresentar.
• Mark-up significa marcação e é o texto que você escreve. Você cria a marcação da mesma forma que escreve em um editor seus cabeçalhos, marcadores, negrito, etc
• Language significa linguagem e é exatamente o que HTML é; uma linguagem. A linguagemHTML usa muitas palavras do inglês.

Neste tutorial você aprenderá XHTML (Extensible HyperText Mark-up Language) que nada mais é do que uma maneira mais bem estruturada de escrever HTML.

O que são tags HTML?

Você já está em condições de aprender a chave do HTML - tags.

"Tags"?

Tags são rótulos usados para informar ao navegador como deve ser apresentado o website.

Todas as tags têm o mesmo formato: começam com um sinal de menor "<" e acabam com um sinal de maior ">".

Genericamente falando, existem dois tipos de tags - tags de abertura: <comando> e tags de fechamento: </comando>. A diferença entre elas é que na tag de fechamento existe um barra "/".

Tudo que estiver contido entre uma tag de abertura e uma tag de fechamento será processado segundo o comando contido na tag.

Mas, como toda regra tem sua exceção, aqui no HTML a exceção é que para algumas tags a abertura e o fechamento se dá na mesma tag. Tais tags contém comandos que não necessitam de um conteúdo para serem processados, isto é, são tags de comandos isolados, por exemplo, um pulo de linha é conseguido com a tag <br />.

HTML é tag - e nada mais do que tags. Aprender HTML é aprender como usar as diferentes tags.

Você pode mostrar alguns exemplos?

OK, a tag <b> informa ao navegador que todo o texto colocado entre <b> e </b> deve ser mostrado em negrito. (O comando "b" é uma abreviação para "bold" - negrito.)

Exemplo 1:

 <b>Este texto deve ser em negrito.</b>
 
 

Vai ser apresentado no navegador, como mostrado a seguir:

Este texto deve ser em negrito.

As tags <h1>, <h2>, <h3>, <h4>, <h5> e <h6> informam ao navegador que trata-se de um cabeçalho (h vem de "heading" - cabeçalho ), sendo <h1> o cabeçalho de primeiro nível e aquele apresentado com o maior tamanho de texto, <h2> o cabeçalho de segundo nível e aquele apresentado com tamanho de texto um pouco menor e <h6> o cabeçalho de sexto nível e aquele apresentado com o menor tamanho de texto.

Exemplo 2:

 <h1>Este é um título</h1>
 <h2>Este é um sub título</h2>
 

Vai ser apresentado no navegador, como mostrado a seguir:

Este é um título

Este é um subtítulo

As tags devem ser escritas com letras maiúsculas ou minúsculas?

Para a maioria dos navegadores é indiferente se você usa maiúscula, minúscula ou mesmo uma mistura delas.<COMANDO>, <comando> ou <CoMaNdo> normalmente tem o mesmo efeito. Contudo a maneira correta é usar minúsculas. Então, crie o hábito de escrever suas tags com minúsculas.

Onde devo colocar todas estas tags?

Você deve escrever suas tags em um documento HTML. Um website é constituido por um ou mais documentos HTML. Quando você navega na Web, você está abrindo diferentes documentosHTML.

Mais tags!

Exemplo de uma estrutura de html.

 
 <html>
 
   <head>
   <title>Meu website</title>
   </head>
 
   <body>
   <h1>Um cabeçalho</h1>
 
   <p>texto, texto texto, texto</p>
   <h2>Subtítulo</h2>
   <p>texto, texto texto, texto</p>
   </body>
 
   
 </html>
 
 

E agora?

Agora vamos aprender mais sete tags.

Você já sabe que pode obter negrito com a tag <b>, agora saiba que pode obter itálico - letras inclinadas - com a tag <i>. Já percebeu não é?, "i" vem de "italic".

Exemplo 1:

 
 <i>Este texto deve ser itálico.</i>
 
 

Será renderizado no navegador assim:

Este texto deve ser itálico.

De modo similar você pode fazer seu texto com letra menores usando a tag <small>:

Exemplo 2:

 
 
 <small>Este texto deve ser com letras em tamanho small.</small>
 
 

Será renderizado no navegador assim:

Este texto deve ser com letras em tamanho small.

Posso usar várias tags simultaneamente?

Sim você pode usar quantas tags queira desde de que as aninhe convenientemente. Veja como fazer isto no exemplo abaixo:

Exemplo 3:

Para escrever um texto em negrito e itálico faça como mostrado a seguir:

 
 <b><i>Texto em negrito e itálico.</i></b>
 
 
 

E não assim:

 
 <b><i>Texto em negrito e itálico.</b></i>
 
 
 

Observe que no primeiro exemplo a primeira tag de abertura <b> corresponde a última tag de fechamento </b>, e o aninhamento está certo. Isto evita confusão para quem escreve o código e para o navegador que lê o código.

Mais tags!

Como foi dito na Lição 4 existem tags que são abertas e fechadas em única tag. Estas tags são comandos isolados, ou seja, não contém nenhum texto dentro delas para poder funcionar. Um exemplo é a tag <br /> que serve para criar uma quebra de linha:

Exemplo 4:

 
 Um texto<br /> e mais texto em nova linha
 

Será renderizado no navegador assim:

Um texto
e mais texto em nova linha

Notar que a tag é escrita como se fosse uma mistura de tag de abertura e de fechamento com uma barra "/" no final: <br />. A princípio podemos escrever também <br></br> (sem conteúdo), mas para que complicar?

Outra tag de comando é <hr /> que serve para definir uma linha horizontal ("hr" vem "horizontal rule" - régua horizontal ):

Exemplo 5:

 
 <hr />
 
 

Será renderizado no navegador assim:

---

Exemplo 6:

 
 <ul>
   <li>Um item de lista</li>
   <li>Outro item de lista</li>
 
 </ul>
 
 

Será renderizado no navegador assim:

• Um item de lista
• Outro item de lista

Exemplo 7:

 
 <ol>
   <li>Primeiro item da lista</li>
   <li>Segundo item da lista</li>
 
 </ol>
 
 

Será renderizado no navegador assim:

1. Primeiro item da lista
2. Segundo item da lista

Uau! Isto é tudo?

Sim, por enquanto isto é tudo. Aconselhamos, novamente, a fazer seus próprios experimentos, construindo algumas páginas usando as sete tags ensinadas nesta lição:

 
 <i>Itálico</i>
 <small>Texto tamanho small</small>
 
 <br /> Pula linha
 <hr /> Linha Horizontal
 <blockquote>Indentação</blockquote>
 <ul>Lista</ul>
 <ol>Lista ordenada</ol>
 
 <li>Item de lista</li>