Tive inspiração pra fazer um tutorial de CSS por causa da kouhai, mas resolvi fazer um de XHTML antes. Na verdade eu quero fazer um de PHP para quem quer só mexer no WP, mas um dia chego lá. XD

Pré-requisitos: noções básicas de informática.
Objetivo: aprender a fazer um documento XHTML na mão. Elementos. Atributos. Semântica.

O que é XHTML

É um formato de arquivo com o qual são escritas (algumas) páginas da Internet. Muitos devem conhecer o HTML; o XHTML é descendente dele. A grosso modo, ele foi criado porque o HTML permitia muitas “gambiarras”. Ao transportar o formato HTML para o XML (que define uma estrutura de documento que deve ser sempre bem formada), nasceu o XHTML.

Seu primeiro documento XHTML

Gosto de abordagens práticas, então vamos lá:

1. Abra o Bloco de Notas.
2. Digite ou copie/cole o seguinte texto nele:

   
   
   
   
     
       
       
     
     
       Este é meu primeiro documento XHTML.
     
   
   

3. Salve como “pagina.html” (inclua as aspas na hora de salvar ¹.)
4. Abra o arquivo no seu navegador e observe, maravilhado, seu primeiro documento XHTML.

Tags

O principal conceito a compreender é o de tags. No exemplo acima, você viu as “coisas” estranhas como ““. Elas são tags, ou “etiquetas”. “” abre a tag “body”; “” fecha a tag “body”.

Vá lá no arquivo e coloque o texto “primeiro documentos” entre a tag “strong” (“forte”), assim:

Este é meu primeiro
documento XHTML.

Não faz mal passar para outra linha como eu fiz, mas você pode fazer numa linha só. Abra o arquivo novamente (ou dê “atualizar” no navegador). Ta-da, você aprendeu a fazer negrito! Agora coloque a palavra “documento” entre a tag “em” (emphasis, “ênfase”). Ficará assim:

Este é meu primeiro
documento XHTML.

Atualize o navegador. A palavra “documento” ficará em negrito e em itálico! Você pode aninhar tags, isto é, colocar uma dentro de outra. Mas você não pode fazer isso:

Este é meu primeiro
documento
XHTML mal escrito.

Antes de fechar uma tag X, você deve fechar todas as tags que foram abertas depois da tag X ser aberta. OK, um pouco confuso, mas pense um pouco que fará sentido.

Agora vou confiar na sua capacidade de aprendizado e dar um exemplo mostrando várias tags (para testar, copie e cole isso no lugar do “Este é meu primeiro documento XHTML”, isto é, dentro da tag “body”):

Tags XHTML

Tag p


  Isto é um parágrafo.
  Sempre use "p" para parágrafos.


Tag br


  Veja
  que
  tudo
       isto
  fica numa
  linha só.
  Use a tag br

  Para pular de linha.
  Porém seu uso não é recomendado.
  Use parágrafos!


Tag a


  Links são fáceis de fazer.
  Google.


Tag img


  


Tag h2 (título de nível 2).

Tag h3 (título de nível 3).

Tag ul/li


  
Isto é um item.
  
Outro item.
  
Tudo isto é uma lista.


Tag ol/li


  
Isto é um item.
  
Outro item.
  

     Tudo isto é uma lista
    numerada!.
  



  Cuidado com o "e comercial" (&),
  o "menor que" (<) e
  o "maior que" (>).

Coisas a se notar:

• Note que espaços em brancos no início e final de linhas são ignorados. Você pode usar esse “recurso” para deixar seu código alinhado de forma mais organizada. Quando você quiser realmente colocar um “enter”, use a tag

• Existem tags que são uma só, e não possuem o par de “abrir” e “fechar”. É o caso do
(o espaço ali no meio da tag é necessário para compatibilidade com navegadores toscos) e do .
• A tag “a”, para links, tem uma coisa diferente. Aquilo é um atributo. Quando presentes, eles estão sempre na tag de abertura, e possuem o formato nome="valor". A tag “a” deve ter um atributo “href” indicando o endereço para qual o link deve apontar (e o texto dentro da tag propriamente dita será o texto do link). A tag “img” possui dois atributos obrigatórios: o “src” com o endereço da imagem, e o “alt” com uma descrição dela (para deficientes visuais, ou navegadores em modo texto); você pode usar o atributo opcional “title” para colocar um título na imagem (o texto que aparece quando você deixa o mouse sobre a imagem).
• Existem algumas letras você não pode digitar normalmente: use “&amp;” para escrever “&”, “&lt;” para “<” e “&gt;” para “>”. (Exercício: como acabei de digitar isso no XHTML? ².) Para lembrar mais fácil, note que “amp” = “ampersand”, “lt” = “less than” e “gt” = “greater than”.
• Compare com o resultado final e veja se o seu ficou igual (vá em Exibir > Código Fonte no seu navegador para ver o meu código).

Aparência vs Semântica

Provavelmente você deve estar achando que a sua página XHTML está feia como o capeta. Talvez você saiba um pouco de HTML e esteja querendo botar umas tags para mudar a fonte dos textos e cores, ou se perguntando porque não usei as tags e para negrito e itálico, respectivamente.