Apostila de XHTML

( Curso Introdutrio)

Verso 0.2a
7 de maro de 2005
- Verso - Rascunho -

Prof. Luis Rodrigo de O. Gonalves

E-mail:luisrodrigoog@yahoo.com.br
site: http://www.lrodrigo.cjb.net

Prof. Lus Rodrigo de Oliveira Gonalves luisrodrigoog@yahoo.com.br http://www.lrodrigo.cjb.net Pgina 1 de 33

Introduo

De onde veio XHTML? Quando o W3C definiu os parmetros da quarta verso do HTML
(HyperText Markup Language) em 1997, os profissionais ficaram satisfeitos com o resultado final e o
adotaram sem problemas como a base definitiva de programao para a criao de pginas na Web. Depois
de trs anos, a linguagem sofre o que parece ser sua maior evoluo com a adio de aplicaes da meta-
linguagem XML (EXtensible Markup Language). Nasce ento o XHTML 1.0, a nova linguagem-base para
criao de pginas Web que rene todas as qualidades do HTML com os recursos do XML, destinado para
substituir, aos poucos, o HyperText 4.0.

Todas as linguagens de marcao da web so baseadas em SGML, uma metalnguagem complexa e

complicada projetada para mquinas com a finalidade de servir de base para criao de outras linguagens.
O SGML foi usado criar XML (Extensible Markup Language), tambm uma metalinguagem, porm bem mais
simples.

Com XML voc cria suas prprias tags e atributos para escrever seu documento web. Isto significa
que voc quem cria sua linguagem de marcao. XHTML foi criado dentro deste conceito e por isso uma
aplicao XML. As tags e atributos do XHTML foram criadas ("inventadas") aproveitando-se as nossas
conhecidas tags e atributos do HTML 4.01 e suas regras.

XHTML uma linguagem de marcao bastante familiar para quem conhece HTML e a transformao
de um documento existente de HTML para XHTML uma tarefa bem simples.

A juno das duas linguagens resultou no XHTML (EXtensible HyperText Markup Language), uma
linguagem quase igual ao HTML original, o que facilita muito aos programadores, que esto acostumados
com todas as tags e cdigos desde que foi criada, mas que capaz de apresentar a "flexibilidade" da
linguagem XML de levar seu contedo registrado nela para outras plataformas.

Graas proximidade do XHTML 1.0 com seu antecessor, o HTML 4.0, os elementos XML podem ser
inseridos nas pginas HTML j existentes, adicionando as novas tags e elementos originados da nova
linguagem, gerando infinitas novas possibilidades para o futuro da Web em termos de divulgao de
contedo e de aperfeioamento da programao.

Qual a finalidade do XHTML? XHTML a sigla em ingls para EXtensible HyperText Markup
Language que em portugus resulta em Linguagem de Marcao para Hipertexto Extensvel, uma aplicao
XML, escrita para substituir o HTML e nada mais do que um HTML "puro, claro e limpo".

Quais as vantagens de se usar XHTML? Em primeiro lugar a compatibilidade da linguagem

XHTML com as futuras aplicaes de usurios, garantindo desde j que as criaes XHTML conservar-se-
o estveis por longos anos. A tendncia que futuras verses de brownsers e agentes de usurios em
geral, deixem de suportar elementos e atributos j em desuso ("deprecated") segundo as recomendaes da
W3C, bem assim como antigos e ultrapassados esquemas e esboos do HTML.

XHTML a linguagem da web do futuro desde j a disposio de projetistas e desenvolvedores web.

Prof. Lus Rodrigo de Oliveira Gonalves luisrodrigoog@yahoo.com.br http://www.lrodrigo.cjb.net Pgina 2 de 33

Ele um cdigo consistente que dispensa uso de "truques" e "hacks" para contornar "bugs". Editar um
cdigo existente uma tarefa bem simples por se tratar de uma escrita limpa e evidente. O tempo de carga
de uma pgina XHTML mais rpido pois os browsers tem a interpretar uma pgina limpa sem ter que
interpretar e decidir sobre renderizao de erros de cdigo.

Uma pgina XHTML mais acessvel aos browsers e aplicaes de usurio padro incrementando a
interoperabilidade e a portabilidade dos documentos web. Uma pgina XHTML totalmente compatvel com
todas as aplicaes de usurios para HTML, antigas e j ultrapassadas.

XHTML uma "Web Standard"? XHTML 1.0 uma recomendao da W3C e sua verso
atual data de 26 de janeiro de 2000. Isto significa que trata-se de uma linguagem estvel, oficialmente
especificada pela W3C, tendo sido projetada e revisada pelos seus membros e uma "Web Standard".

2) Regras Bsicas do XHTML

O XML s funciona quando todas as tags estiverem bem fechadas, no HTML diferente, as vezes
deixamos tags abertas, e ele funcionava normalmente. Para se fazer um XHTML vlido, devemos:

Fechar todas as tags: No devemos esquecer de fechar todas as tags: <p></p>, <b></b>, etc...
E no devemos esquecer de forma alguma de fechar as tags nicas, ou seja, ao invs de <br>
escrevemos <br></br>, ou na forma simplificada: <br />.

Use letras minsculas: Quem nunca viu um cdigo fonte de um documento HTML escrito assim:

<A HREF="http://tags.com.letras.minsculas/" TARGET="_BLANK"> </A>

Um documento XHTML deve ter TODAS as tags e seus respectivos atributos escritos
com letra minscula!

No esquea das "aspas": Esta regra bem simples. Todos os atributos XHTML devem conter
"ASPAS".

Atributo name: O antigo atributo NAME foi substitudo pelo atributo ID. Como os clientes, ainda
utilizam antigos browsers, voc pode sem problema utilizar as duas formas juntas. Por exemplo:

<img src="imagem.gif" id="imagem" name="imagem" />

Prof. Lus Rodrigo de Oliveira Gonalves luisrodrigoog@yahoo.com.br http://www.lrodrigo.cjb.net Pgina 3 de 33

 Atributos sem valor: No devemos esquecer tambm os atributos que escrevemos sem valor,
por exemplo:

ERRADO:

<option selected>
<frame noresize>
<input checked>
<input readonly>

CERTO:

<option selected="selected">
<frame noresize="noresize">
<input checked="checked">
<input readonly="readonly">

Se voc est migrando do HTML para o XHTML, o TIDY pode te dar uma forcinha., ele uma
ferramenta para validar e consertar cdigos HTML, voc pode escolher qual a verso do HTML quer
validar, uma das opes a XHTML. Caso j esteja escrevendo um XHTML e quer que seu cdigo fique
livre de erros, o TIDY pode arruma-lo . Ele foi originalmente desenvolvido por Dave Raggett e hoje
mantido por um projeto de cdigo aberto: SourceForge, por um grupo de voluntrios.

Os documentos devem ser bem formados: Um documento diz-se bem formado quando est
estruturado de acordo com as regras definidas nas Recomendaes para XML 1.0 [ XML ].
Todos os elementos XHTML devem estar corretamente aninhados dentro do elemento raiz
<html>. A estrutura bsica do documento deve ser conforme abaixo:

<html>
<head>
...
</head>
<body>
...
</body>
</html>

O atributo lang: Use o atributo lang para definir a lngua em que foi escrito o documento e o
atributo xml:lang para definir a verso do XML.

Prof. Lus Rodrigo de Oliveira Gonalves luisrodrigoog@yahoo.com.br http://www.lrodrigo.cjb.net Pgina 4 de 33

3) XHTML - Conceitos Bsicos
Todos os documentos XHTML podem ser divididos em duas partes bsicas: o cabealho e o corpo;
assim como duas especiais: a declarao da verso e a declarao do tipo do documento.

O cabealho possui informaes sobre o documento em si, seus principais componentes so:

Elemento Descrio Obrigatri

o

Deve ser o primeiro elemento do cabealho,

<title> </title> informa o texto que aparece na barra de ttulo S
do navegador;

Contem informaes sobre o contedo do

<meta> <meta> N
documento;

Elemento utilizado para realizar a ligao entre

<link> </link> os documentos e as pginas contendo as folhas N
de estilo;

Informaes sobre as folhas de estilo usadas

<style> <style> N
em um determinado documento;

<object> </object> Espao utilizado para insero de cdigo, por

N
<script> <script> exemplo: java script;

<base> <base> Especifica o endereo do documento XHMTL N

A declarao de verso, que informa verso da linguagem XML que ser utilizada na descrio do
documento, tambm faz parte do cabealho, sua funo determinar com ser o processo de codificao
do texto (encoding), por exemplo:

<?xml version=1.0 encoding=iso-8859-1?>

J a declarao do tipo do documento (DOCTYPE), que informa a DTD e que deve ser utilizada para
validar o documento apresentado outra declarao que integra o cabealho. A seguir temos um exemplo
desta linha:

<!DOCTYPE html PUBLIC -//w3c/DTD XHTML 1.0 Transitional //EN

http://www.w3.org/TR/xhtml1-transational.dtd

Prof. Lus Rodrigo de Oliveira Gonalves luisrodrigoog@yahoo.com.br http://www.lrodrigo.cjb.net Pgina 5 de 33

 O Doctype (Document Type Definition, vulgo DTD) a primeira linha de um arquivo XHTML, para que
o documento possa ser validado, uma vez que, ela serve para informar ao browser o tipo de documento a
ser visualizado. Existem 3 tipos bsicos:

Strict: sado quando se deseja um cdigo100% XHTML e sem erros:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Transitional: o modo mais usado, pois utilizado na migrao do HTML para o XHTML:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Frameset: usado quando se utiliza FRAMES em um site:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

A segunda e principal parte do documento o corpo, nele so inseridos os elementos de marcao ,

os principais elementos do corpo do documento so descritos a seguir.

Prof. Lus Rodrigo de Oliveira Gonalves luisrodrigoog@yahoo.com.br http://www.lrodrigo.cjb.net Pgina 6 de 33

2.1) Elementos bsicos do corpo do documento

Como j foi dito o corpo do texto formado pelas tags de formatao, utilizadas estruturao das
informaes a serem exibidas, destes elementos de marcao podemos destacar os elementos de bloco
que so marcadores destinados tanto a estruturao quanto ao estilo da pgina:

Elementos de Blocos

Nome Marcador Descrio

um dos marcadores mais utilizados, sua

representao depende do navegador, mas normalmente
Pargrafo <p> </p>
representado por um espao antes e depois do
pargrafo;

Utilizado com folhas de estilo na especificao de

Diviso <div> </div>
blocos e texto;

Introduzem ttulos no documento, podem ser de seis

Ttulos <hn> </hn> nneis (1 at 6), seu tamanho de fonte varia de 24 10
ptos;

Utilizados para criao de citaes, que inserem uma

<bloquete>
Blockquete linha antes e depois do texto, assim como um nvel de
</bloquete>
identao;

Utilizado para preservar a formatao do texto, no

Preserve <pre> </pre>
interpretando seu contedo

Exemplo 01:

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html
PUBLIC "-//W3C/DTD XHTML 1.0 Transational//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title> XHTML : Testando os elementos Hn </title>
</head>
<body>
<h1> Nivel 1 </h1>
<h2> Nivel 2 </h2>
<h3> Nivel 3 </h3>
<h4> Nivel 4 </h4>
<h5> Nivel 5 </h5>
<h6> Nivel 6 </h6>
</body>
</html>

Prof. Lus Rodrigo de Oliveira Gonalves luisrodrigoog@yahoo.com.br http://www.lrodrigo.cjb.net Pgina 7 de 33

 Exemplo 02:

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html
PUBLIC "-//W3C/DTD XHTML 1.0 Transational//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title> XHTML : Exemplo 02 </title>
</head>
<body>
<p> Isto &#233; um par&#225;grafo</p>
<div> Esta &#233; a primeira div </div>
<div> J&#225; esta &#233; a segunda </div>
<div> E finalmente esta &#233; a ultima </div>
<p> E outro par&#225;grafo</p>
<blockquote> "Este agora &#233; um bloco de cita&#231;&#227;o, pequeno mais
&#233;"</blockquote>
</body>
</html>

Prof. Lus Rodrigo de Oliveira Gonalves luisrodrigoog@yahoo.com.br http://www.lrodrigo.cjb.net Pgina 8 de 33

 Exemplo 03:

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html
PUBLIC "-//W3C/DTD XHTML 1.0 Transational//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title> XHTML : Exemplo 02 </title>
</head>
<body>
<p> Este &#233; um par&#225;grafo com
mais de uma linha,
contudo parace ser tudo em uma !!!
</p>
<pre>
Este &#233; um par&#225;grafo com
mais de uma linha,
que &#233; exibido corretamente !!!
</pre>
</body>
</html>

Um outro conjunto de elementos so os descritivos de linha:

Elementos Descritivos de Linha

Nome Marcador Descrio

<cite>
Citao Fonte em itlico
</cite>

<code>
Cdigo Fonte mono-espaada
</code>

Definio <dfn> </dfn> Fonte em itlico e negrito

nfase <em> </em> Fonte em itlico

<span> Usado para dimensionar parte do texto, normalmente

Span
</span> est relacionado com algum estilo de uma folha de estilo;

<strong>
Forte Fonte em negrito
</strong>

Prof. Lus Rodrigo de Oliveira Gonalves luisrodrigoog@yahoo.com.br http://www.lrodrigo.cjb.net Pgina 9 de 33

 Exemplo 04:

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>XTHML : Exemplo 04 </title>
</head>
<body>
<div>Exemplo de <cite> uma citcao </cite>.</div>
<div>Exemplo de <code> um codigo </code></div>
<div>Exemplo de <em> um texto com emfase </em>.</div>
<div>Exemplo de <span>de um span </span></div>
<div>Exemplo de <strong>de um texto forte</strong>.</div>
</body>
</html>

J os elementos de estilo de linha permitem introduzir estilos somente nas mdias visuais, como
navegadores, sendo desaconselhado seu uso quando se busca compatibilidade com outras mdias, seus
exemplares bsicos so:

Elementos de Estilo de Linha

Nome Marcador Descrio

Grande <big> </big> Fonte maior que o padro

<small>
Small Fonte menor que o padro
</small>

Negrito <b> </b> Texto em negrito

Itlico <i> </i> Texto em itlico

<strike>
Riscado Texto riscado ao meio
</strike>

_{Subscrito Texto subscrito}

^{Sobrescrito Texto sobrescrito}

Sublinhado <u> </u> Texto Sublinhado

<kbd> Texto nono-espaado, como se tivesse sido escrito

Teclado
</kbd> na mquina de escrever

True-Type <tt> </tt> Texto nono-espaado

Prof. Lus Rodrigo de Oliveira Gonalves luisrodrigoog@yahoo.com.br http://www.lrodrigo.cjb.net Pgina 10 de 33

 Exemplo de Uso de formulrios:

<?xml version="1.0" encoding="iso-8859-1"?>

<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>XHTML Exemplo 16</title>
</head>
<body>
<br /><br />
<h1> Exemplo de uso de formulrios: </h1>
<form action="exemplo16.xhtml" method="post" name="form01">
Nome......: <input type="text" id="nome" name="nome" /><br /><br />
Endereo: <input type="text" id="endereco" name="endereco" readonly="true" />
<br /><br />
E-mail....: <input type="text" id="mail" name="mail" /><br /><br />
Telefone.: <input type="text" id="tel" name="tel" /><br /><br />
Senha.....: <input type="password" name="senha" id="senha" /><br /><br />
Curriculo: <input type="file" id="cv" name="cv" /> <br /><br />
Idade .....:
<input type="radio" name="idade" id="idade" value="maior" /> Maior de Idade |
<input type="radio" name="idade" id="idade" value="menor"/> Menor de Idade <br /><br />
Sistema Operacional:
<input type="checkbox" name="so" id="so" value="linux" /> Linux |
<input type="checkbox" name="so" id="so" value="bsd" /> BSD |
<input type="checkbox" name="so" id="so" value="aix" /> AIX |
<input type="checkbox" name="so" id="so" value="solaris" /> Solaris |
<input type="checkbox" name="so" id="so" value="macos" /> MacOS |
<input type="checkbox" name="so" id="so" value="outro" /> Outro
<br /><br />
Estado Civil :
<select name="civil" id="civil">
<option> Casado </option>
<option> Solteiro </option>
</select> <br /><br />
<input type="submit" name="enviar" id="enviar" value="Enviar" />
<input type="reset" name="cancelar" id="cancelar" value="Cancelar" />
<input type="button" name="validar" id="validar" value="Validar" />
<input type="image" name="validar2" id="validar2" src="alinux.jpg" />
</form>
</body>
</html>

Prof. Lus Rodrigo de Oliveira Gonalves luisrodrigoog@yahoo.com.br http://www.lrodrigo.cjb.net Pgina 31 de 33

Prof. Lus Rodrigo de Oliveira Gonalves luisrodrigoog@yahoo.com.br http://www.lrodrigo.cjb.net Pgina 32 de 33
Referncias

[1] Referncia de XHTML 1.0 (www.w3schools.com/xhtml/xhtml_reference.asp);

[2] Tutorial da W3C (www.w3schools.com/w3c);

[3] W3Schools (www.w3schools.com/default.asp);

[4] .WebSemntica (www.comciencia.br/reportagens/internet/net08.htm).

[5] Manual e XHTML em ingls (http://www.htmlstaff.org/xhtmlmanual/Cover.html)

[6] Apostila XHTML, Prof. Jos Celso Freire Junior, Universidade Estadual Paulista, Ano de 2003

Ferramentas

[1] Para saber se seu documento XHTML vlido: http://validator.w3.org

[2] TIDY: http://tidy.sourceforge.net ou www.w3.org/People/Raggett/tidy.

Prof. Lus Rodrigo de Oliveira Gonalves luisrodrigoog@yahoo.com.br http://www.lrodrigo.cjb.net Pgina 33 de 33