18 de dezembro de 2010

Tutorial de XHTML

Aprenda XHTML sem enrolação



O que é XHTML ? Uma breve introdução.

O XHTML é uma linguagem desenvolvida para exibição de páginas da internet tanto em pcs e notebooks quanto em celulares, pamls, etc. É uma linguagem mais organizada e mais "limpa" em relação ao HTML. Essa nova linguagem consegue ser suportada por vários dispositivos, independentemente da plataforma usada. Se baseia na linguagem XML sem deixar de lado a inguagem de marcação HTML. Além disso a W3C recomenda o uso do XHTML desde 26 de janeiro de 2000 (já faz um tempinho).


Diferenças entre HTML e XHTML.

Não existem grandes diferenças entre o HTML e o XHTML, se você domina o HTML não terá muitas dificuldades em aprender essa linguagem, existem muitas praticas que podiam ser usadas no HTML e que agora no XHTML não podem mais, seria como um HTML mais organizado como dito anteriormente, onde você tem que seguir algumas regras a mais, vamos começar.
(...)
1 No XHTML todos os elementos devem, obrigatoriamente, estar bem aninhados.



Modo errado:
<p><b><i>texto</b></i></p>
Modo certo:
<p><b><i>texto</i></b></p>



2 Todos os elementos devem, obrigatoriamente, possuir tags de fechamento.



Modo errado:
<p>esse é um texto.
<p>esse é outro texto.
Modo certo:
<p>esse é um texto.</p>
<p>esse é outro texto.</p>



2.1 Aqueles elementos que no HTML não possuem uma tag de fechamento, devem ser, obrigatoriamente, fechados com um espaço e uma "/" no final, atenção, não se esqueça do espaço:



Modo errado:
esse é um texto.
<br>
esse é outro texto.
<hr>
<img src="exemplo.gif" alt="uma imagem">
Modo certo:
esse é um texto.
<br />
esse é outro texto.
<hr />
<img src="exemplo.gif" alt="uma imagem" />



3 No XHTML as tags e também os atributos são sensíveis a caixa, por isso devem estar, obrigatoriamente, em caixa baixa (letras minúsculas):



Modo errado:
<BODY>
<P><b><i>texto</i></b></P>
</BODY>
<font COLOR="blue">texto</b>
<img src="exemplo.gif" ALT="uma imagem" />
Modo certo:
<body>
<p><b><i>texto</i></b></p>
</body>
<font color="blue">texto</b>
<img src="exemplo.gif" alt="uma imagem" />



3.1 Cuidado com códigos com letras maiúsculas feitos por editores:



Modo errado:
<div OnMouseOut=function()>
Modo certo:
<div onmouseout=function()>



4 Todos os valores dos atributos devem estar, obrigatoriamente, entre aspas:



Modo errado:
<font color=blue>texto</b>
<img src=exemplo.gif alt="uma imagem" />
Modo certo:
<font color="blue">texto</b>
<img src="exemplo.gif" alt="uma imagem" />



5 A sintaxe deve ser escrita por completo:



Modo errado:
<input checked />
Modo certo:
<input checked="checked" />



5.1 - Uma lista com os atributos que se enquadram no item 5:



declare declare="declare" 
readonly readonly="readonly" 
disabled disabled="disabled" 
selected selected="selected" 
defer defer="defer"
compact compact="compact" 
checked checked="checked"  
ismap ismap="ismap" 
nowrap nowrap="nowrap"
nohref nohref="nohref" 
noshade noshade="noshade"  
multiple multiple="multiple" 
noresize noresize="noresize"



6 Se for usar o &(e comercial) ele deve ser codificado no código HTML.



Modo errado
Maria & João
Modo certo
Maria &amp; João



7 Imagens, o atributo "alt" é abrigatorio em todas as imagens.



Modo errado:
<img src="exemplo.gif" />
Modo certo:
<img src="exemplo.gif" alt="uma imagem" />

ou assim:

<img src="exemplo.gif" alt="" />



8 Use o "id" ao invez do "name", o elemento "name" está em desuso.



Modo errado:
<img src="exemplo.gif" name="foto" />
Modo certo:
<img src="exemplo.gif" id="foto" />



9 Separadores de blocos de código. Não use a sequência "----------" entre os "<-- -->" alguns agentes de usuários mais antigos podem ter problemas para interpretar, use uma sequecia como "========" ou "xxxxxxxx".



Modo errado:
<---------------menu----------------->
  <li>Homze</li>
   <li>Contato</li>
     <li>Sugestões</li> 
    
   <li>Twitter</li> 
 </ul> 
<---------------menu----------------->

Modo certo:
<-- ==========menu============= -->
  <li>Homze</li>
   <li>Contato</li>
     <li>Sugestões</li>     
   <li>Twitter</li> 
 </ul> 
<-- ============menu=========== -->

3 comentários:

  1. Interessante o post,só gostaria de acrescentar o seguinte, nos comentário dentro do Xhtml pode-se usar também é o que normalmente se usa, abraços.

    ResponderExcluir
  2. Obrigado pelo post e pelo site :o)

    ResponderExcluir