XHTML Basico PDF

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 metalinguagem 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-seo 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.
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" />
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.
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
<title> </title>
Deve ser o primeiro elemento do cabealho,

informa o texto que aparece na barra de ttulo
do navegador;
<meta> <meta>
Contem informaes sobre o contedo do

documento;
<link> </link>
Elemento utilizado para realizar a ligao entre

os documentos e as pginas contendo as folhas
de estilo;
<style> <style>
Informaes sobre as folhas de estilo usadas

em um determinado documento;
<script> <script>
Espao utilizado para insero de cdigo, por

exemplo: java script;
<base> <base>
Especifica o endereo do documento XHMTL
<object> </object>
Obrigatri
o
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
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"
Frameset: usado quando se utiliza FRAMES em um site:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
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.
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
Pargrafo
<p> </p>
um dos marcadores mais utilizados, sua

representao depende do navegador, mas normalmente
representado por um espao antes e depois do
pargrafo;
Diviso
<div> </div>
Utilizado com folhas de estilo na especificao de

blocos e texto;
Ttulos
<hn> </hn>
Introduzem ttulos no documento, podem ser de seis

nneis (1 at 6), seu tamanho de fonte varia de 24 10
ptos;
Blockquete
Preserve
Utilizados para criao de citaes, que inserem uma

<bloquete>
linha antes e depois do texto, assim como um nvel de
</bloquete>
identao;
<pre> </pre>
Utilizado para preservar a formatao do texto, no

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>
Pgina 7 de 33
Exemplo 02:
<!DOCTYPE html
<head>
<title> XHTML : Exemplo 02 </title>
</head>
<body>
<p> Isto é um parágrafo</p>
<div> Esta é a primeira div </div>
<div> Já esta é a segunda </div>
<div> E finalmente esta é a ultima </div>
<p> E outro parágrafo</p>
<blockquote> "Este agora é um bloco de citação, pequeno mais
é"</blockquote>
</body>
</html>
Pgina 8 de 33
Exemplo 03:
<!DOCTYPE html
<head>
<title> XHTML : Exemplo 02 </title>
</head>
<body>
<p> Este é um parágrafo com
mais de uma linha,
contudo parace ser tudo em uma !!!
</p>
<pre>
Este é um parágrafo com
mais de uma linha,
que é exibido corretamente !!!
</pre>
</body>
</html>
Um outro conjunto de elementos so os descritivos de linha:

Elementos Descritivos de Linha
Nome
Marcador
Citao
<cite>
</cite>
Cdigo
<code>
</code>
Descrio
Fonte em itlico
Fonte mono-espaada
Definio
<dfn> </dfn>
Fonte em itlico e negrito
nfase
<em> </em>
Fonte em itlico
Span
<span>
</span>
Forte
<strong>
</strong>
Usado para dimensionar parte do texto, normalmente

est relacionado com algum estilo de uma folha de estilo;
Fonte em negrito
Pgina 9 de 33
Exemplo 04:
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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
Grande
<big> </big>
Small
<small>
</small>
Descrio
Fonte maior que o padro
Fonte menor que o padro
Negrito
<b> </b>
Texto em negrito
Itlico
<i> </i>
Texto em itlico
Riscado
<strike>
</strike>
Texto riscado ao meio
Subscrito
<sub>
</sub>
Texto subscrito
Sobrescrito
<sup>
</sup>
Texto sobrescrito
Sublinhado
<u> </u>
Texto Sublinhado
Teclado
<kbd>
</kbd>
True-Type
<tt> </tt>
Texto nono-espaado, como se tivesse sido escrito

na mquina de escrever
Texto nono-espaado
Pgina 10 de 33
Exemplo 05:
<!DOCTYPE
<head>
<title>XTHML : Exemplo 05 </title>
</head>
<body>
<div> Texto em <b> negrito </b>.</div>
<div> Texto <big> maior que o padrao </big>.</div>
<div> Texto em <i> italico</i> .</div>
<div> Texto da <kbd> maquina de escrever </kbd>.</div>
<div> Texto <u> sublinhado </u>.</div>
<div> Texto <strike> Riscado</strike>.</div>
<div> Texto <small> menor que o padrao </small>.</div>
<div> Texto <sub> subscrito</sub>.</div>
<div> Texto <sup> sobrescrito </sup>.</div>
<div> Texto em <tt> true-type .</tt> </div>
</body>
</html>
Alm destes podemos utilizar outros dois elementos de estilo, o primeiro o <br /> utilizado para
inserir uma quebra de linha, e o segundo o <hr /> utilizado para inserir uma linha horizontal na
apresentao do documento;
2.2 Elementos de Listas

O XHTML d suporte a trs tipos de listas: ordenadas, no ordenada e de definio.
As listas no ordenadas so criadas fazendo-se uso do marcador <ul> </ul>, e dos elemento <li>
</li>. Este tipo de lista pode, atravs do atributo type, apresentar trs tipos de marcadores: um circulo
vazio (circle), um circulo cheio (disc) e um quadrado (square). Assim como pode possuir vrios nveis, ou
seja, uma lista dentro da outra. Logo abaixo temos um exemplo da utilizao destes marcadores.
As listas ordenadas possuem elementos que so numerados, o marcador utilizado o <ol> </ol> e
para definio de cada sub-elemento o <li> </li>. O tipo de numerao pode ser alterado com o uso do
atributo type, o qual pode assumir os valores: 1 (arbico), a, A (alfabtico), i e I (romano). No Exemplo
07, podemos ter uma idia de seu uso.
J as listas de definio podem ser utilizadas na definio de termos, o marcador utilizados o <dl>
</dl>, o marcador a ser utilizado no texto a ser definido o <dt> </dt> e a definio dos termos feita
atravs do marcador <dd> </dd>.
Pgina 11 de 33
Exemplo06:
<!DOCTYPE
<head>
<title>XHTML Exemplo 04</title>
</head>
<body>
<hr />
<h1> Exemplo de uso de Listas não ordenadas</h1>
<hr />
<br />
<b> Primeira Lista </b>
<ul>
<li type="circle"> Primeiro Item </li>
<li type="circle"> Segundo Item </li>
</ul>
<br />
<i> Segunda Lista</i>
<ul type="disk">
<li> Primeiro Item </li>
<li> Segundo Item </li>
</ul>
<u> Terceira Lista </u>
<ul type="square">
<li> Primeiro Item</li>
</ul>
<sub> Quarta Lista </sub>
<ul type="circle">
<li> Item 1
<ul type="disk">
<li> Item 1.1</li>
<li> Item 1.2</li>
</ul>
</li>
<li> Item 2
<ul type="square" >
<li> Item 2.1 </li>
<li> Item 2.2 </li>
</ul>
</li>
<li> Item 3</li>
</ul>
</body>
</html>
Pgina 12 de 33
Exemplo 07:

<!DOCTYPE
<head>
</head>
<body>
<h1> Exemplo de uso de Listas ordenadas</h1>
<b> Primeira Lista </b>
<ol type="1">
</ol>
<i> Segunda Lista</i>
<ol type="a">
</ol>
<u> Terceira Lista </u>
<ol type="A">
<li> Primeiro Item</li>
</ol>
<sub> Quarta Lista </sub>
<ol type="i">
<li> Item 1
<ol type="I">
<li> Item 1.1</li>
<li> Item 1.2</li>
</ol>
</li>
<li> Item 2
<ol type="I" >
<li> Item 2.1 </li>
<li> Item 2.2 </li>
</ol>
</li>
<li> Item 3</li>
</ol>
</body>
</html>
Pgina 13 de 33
Exemplo 08:
2.3) Atributos
Os atributos so utilizados para complementar a personalizao dos componentes, seja com relao
a seu comportamento ou quanto a sua apresentao. Estes atributos so inseridos sempre nos marcadores
de abertura e os valores atribudos a eles devem estar entre aspas dupla.
Dentre os atributos podemos destacar os atributos universais, os quais podem ser utilizados por
qualquer marcador existente na linguagem.
Atributos Universais
Atributo
id
class
title
Descrio
Identifica unicamente os elementos dentro dos documentos XHTML;
Especifica a classe a que um elemento pertence;
Especifica um ttulo que pode ser utilizados para nomear o elemento;
Especifica o estilo de exibio do elemento. Sua sintaxe :
style
style: [propriedade1]:[valor1];
[propriedade2:[valor2];
....
Pgina 14 de 33
Outra famlia de atributos a de apresentao, cuja maioria das opes foram migradas para as
folhas de estilo, e cujo uso direto no documento XHTML deve ser evitado:
Atributos de Apresentao
Elemento
Atributo
---
align
color
font-size
div
font-family
backgound-color
margin
backgound
bgcolor
body
hr
font
basefont
Descrio
alinhamento horizontal, pode
seguintes valores: left, right e center
assumir
os
cor da fonte
tamanho da fonte
tipo da fonte
cor de fundo do texto
margem a ser inserida em toda volta do texto
imagem de fundo;
cor de fundo;
text
cor do texto da pgina;
link
cor dos textos dos links no visitados;
vlink
cor dos textos dos links j visitados;
alink
cor dos textos dos links que esto sendo

chamados.
align
alinhamento com relao ao documento, assume

os valores: left, right e center;
noshade
impede o uso de sombra na linha;
size
espessura da linha;
width
largura da linha em relao a pgina
size
assume valores de 1 5
color
cor da fonte
face
fonte a ser utilizada
mesmas propriedades do elemento font, mas

cujos valores especificam a formatao de todos os
elementos da pgina.
Pgina 15 de 33
2.4) Ligaes
As ligaes hipertexto so figuras ou trechos de textos que quando clicados, ou acionados, redirecionam o navegador ou leitor XHML um outro documento, ou a outro ponto do documento atual. Neste
contexto h o conceito de pgina de origem, na qual existe a ligao, e apgina destino, para a qual a
ligao aponta.
Em XHTML existem as ligaes absolutas, normalmente utilizada para documentos em outros
servidores, e as ligaes relativas, utilizadas para referenciar pginas que esto hospedadas no mesmo
servidor que a pgina de origem.
O elemento <a> </a> utilizado para criar as ligaes nos documentos, que so feitas atravs do
uso do atributo href, cujo valor o endereo de destino da ligao.:
<a href=endereo de destino> texto da ligao </a>
Uma ligao relativa pode se parecer com:

<a href=../aulas-ambiente-internet.xhtml> Notas de aulas </a>
... e uma ligao absoluta:

<a href=http://www.lrodrigo.cjb.net/estacio/aulas-ambiente-internet.xhtml> Notas de
aulas </a>
onde: http:// o nome do protocolo utilizado, e poderia ser substitudo por ftp:// ou mailto:
dependendo da necessidade;
www.lrodrigo.cjb.net o endereo do servidor a ser acessado;
/estacio/aulas-ambiente-internet.xhtml o endereo da pgina, dentro do servidor.
Outro atributo que pode ser utilizado pelo elemento <a> o name, utilizado na criao de ancoras
dentro do mesmo documento. Assim uma ligao pode apontar para o mesmo documento no qual foi
inserida:
<a name=nome> Texto da ancora <a>
Para referenciar um ancora no mesmo documento podemos usar:

<a href=#ancora> Texto da ligao <a>
Pgina 16 de 33
Para referenciar um ancora em outro documento:

<a href=endereo do documento#ancora> Texto da ligao <a>
Uma opo ao atributo name, mas que s funciona no navegadores mais recentes o atributo id
presente na maioria dos elemento do XHTML, por exemplo:
<h6 id=ambiente_internet> Material da disciplina Ambientes Internet </h6>
Para definir uma ligao no mesmo documento para este elemento poderamos utilizar:
<a href=ambiente_internet> Tenha acesso ao material das aulas <a>
Exemplo de uso:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE
<head>
</head>
<body>
<h1> Exemplo de uso de Ligaes Hipertexto </h1>
<p> Menu :</p>
<p> [-] <a href="#uteis">Links teis</a></p>
<p> [-] <a href="#busca">Sites de Busca</a></p>
<p> [-] <a href="#ref">Referencias</a></p>
<p> <a name="uteis">Links teis :</a> </p>
<p> | <a href="http://www.yahoo.com.br">http://www.ig.com.br</a>
| <a href="http://www.bol.com.br">http://www.bol.com.br</a>
| <a href="http://www.gmail.com">http://www.gmail.com</a>
| <a href="http://www.hotmail.com">http://www.hotmail.com</a> | </p>
<p> <a name="busca">Sites de Busca :</a> </p>
<p> | <a href="http://www.google.com.br">http://www.google.com.br</a>
| <a href="http://www.yahoo.com.br">http://www.yahoo.com.br</a>
| <a href="http://www.altavista.com.br">http://www.altavista.com.br</a>
| <a href="http://www.cade.com.br">http://www.cade.com.br</a> |</p>
<p> <a name="ref">Referencias :</a> </p>
<p> | <a href="http://www.openoffice.org.br/saite/">Open Office</a>
| <a href="http://www.debian.org/">Debian Linux</a>
| <a href="http://www.suse.com"> SuSe Linux</a> | </p>
</body>
</html>
Pgina 17 de 33
2.5) Manipulando Imagens

Atualmente os navegadores aceitam trs formatos de figuras: GIF, JPEG e PNG, que podem ser
includas nas pginas atravs do elemento <ing />. Este elemento possui o atributo alt, que deve ser
utilizado para fornecer um texto alternativo quando a imagem no puder ser visualizada, j o atributo src
deve ser utilizado para indicar a localizao da figura. Por exemplo:
<ing src=../papagaio.jpg alt=charge do papagaio />
Alm destes, o elemento ing possui os seguintes atributos:

Atributos
Atributo
Valor
Descrio
longdec
------
aponta para um arquivo texto, que possui uma

descrio para a imagem.
width
pixels,
percentagem
define o comprimento da imagem
height
pixels,
percentagem
define o altura da imagem
vspace
pixels,
percentagem
(descontinuado)
espao vertical a ser deixado ao redor da

imagem
Pgina 18 de 33
hspace
pixels,
percentagem
align
right, left, top,

middle, botton
posiciona a figura da pgina.
border
pixels
define a espessura da borda
(descontinuado)
(descontinuado)
(descontinuado)
espao horizontal a ser deixado ao redor da

imagem
Exemplo de uso:
<!DOCTYPE
<head>
</head>
<body>
<h1> Exemplo de uso de Figuras</h1>
<p>
Figura com alinhamento padro: <img src="galho2.jpg" width="100" border="0" />,
"middle" <img src="galho2.jpg" width="100" border="0" align="middle" />,
"texttop" <img src="galho2.jpg" width="100" border="0" align="texttop"/>.
</p>
<p>
Borda = 0 <img src="galho2.jpg" width="100" border="0" align="middle" />,
borda = 1 <img src="galho2.jpg" width="100" border="1" align="middle" />,
borda = 2 <img src="galho2.jpg" width="100" border="2" align="middle" />.
</p>
</body>
</html>
Pgina 19 de 33
2.6) Manipulando Tabelas

Em XHTML todas as tabelas devem possuir um ttulo, cabealho, corpo e roda-p. O elemento
<table> </table> o responsvel pela manuteno das tabelas nesta linguagem. Na construo de uma
tabela podemos utilizar os seguintes elemento para definir suas partes:
Atributos
Elemento
Descrio
delimita o tabela e seus elementos
<table> </table>
elemento opcional que indica o ttulo da tabela
<caption> </caption>
<thead> </thead>
delimita o cabealho da tabela
<tfoot> </tfoot>
delimita o roda-p da tabela
<tbody> </tbody>
delimita o corpo da tabela
<tr> </tr>
delimita as linhas da tabela
<td> </td>
delimita as colunas da tabela
Uma clula pode se estender por mais de uma coluna, para isto deve ser utilizado o atributo
colspan seguido do nmero de colunas que a clula deve se expandir. Caso a clula tenha de ocupar
mais de uma linha o atributo a ser utilizado o rowspan, ambos os atributos devem ser inseridos dentro
de uma declarao <td> </td>.
Uma tabela possui alguns atributos importantes dos quais podemos destacar:
Atributos
Atributo
Valor
Descrio
border
pixels
espessura da linha do desenho da borda

da tabela
frame
void, above, below, lhs, rhs,

informa qual rea deve ser desenhada
hsides, vsides, box, border em torno da tabela.
rules
none, all, groups, row, cols
cellspacing
pixels
cellpading
pixels
bgcolor
align
nome da cor,
cdigo hexadecimal
left, right
informa como as linhas entre as clulas

sero desenhadas
espaamento entre as clulas
espaamento entre o contedo da clula
e sua borda
define a cor de fundo da tabela, da linha
ou da clula
define o alinhamento da tabela dentro do
documento
Pgina 20 de 33
Exemplo de uso de tabelas :

<!DOCTYPE
<head>
</head>
<body>
<h1> Exemplo de uso de Tabelas </h1>
<br />
<table border="1">
<caption> Ttulo da Tabela
</caption>
<thead> Cabealho da Tabela </thead>
<tbody>
<tr>
<td>Linha 1 Coluna 1</td>
</tr>
<tr>
</tr>
<tr>
</tr>
</tbody>
<tfoot>
Rodap da tabela
</tfoot>
</table>
</body>
</html>
Pgina 21 de 33
Exemplo de uso de tabelas com unio de clulas:

<!DOCTYPE
<head>
</head>
<body>
<h1> Exemplo de uso de Tabelas</h1>
<br />
<table border="1">
<caption> Ttulo da Tabela</caption>
<thead>
Cabealho da Tabela
</thead>
<tbody>
<tr>
<td colspan="2">Linha 1 Coluna 1</td>
</tr>
<tr>
<td rowspan="2">Linha 2 Coluna 3</td>
</tr>
<tr>
</tr>
</tbody>
<tfoot>
Rodap da tabela
</tfoot>
</table>
</body>
</html>
Pgina 22 de 33
Exemplo de uso de alguns dos atributos das tabelas:

<!DOCTYPE
<head>
</head>
<body>
<h1> Exemplo de uso de Tabelas </h1>
<br />
<table border="1" frame="box" rules="groups" bgcolor="#00C0C0" >
<caption> Ttulo da Tabela</caption>
<thead>
Cabealho da Tabela
</thead>
<tbody>
<tr>
<td colspan="2">Linha 1 Coluna 1</td>
</tr>
<tr>
<td rowspan="2">Linha 2 Coluna 3</td>
</tr>
<tr>
</tr>
</tbody>
<tfoot>
Rodap da tabela
</tfoot>
</table>
</body>
</html>
Pgina 23 de 33
2.7) Trabalhando com Frames

Os frames, ou quadros, permitem que uma pgina possa ser dividida em vrias partes, cada uma
carregando outra pgina. Mesmo no tendo seu uso indicado no XHTML, eles continuam sendo largamente
empregados.
Dependendo da resoluo do monitor, o cliente pode ter problemas em visualizar uma pgina que
faa uso de frames.
Para a criao de uma pgina com frames devemos utilizar dois elementos: <frameset> </frameset>
e o <frame> </frame>, o primeiro define as sesses do documento e o segundo o contedo de cada
sesso.
O elemento frameset possui os seguintes atributos:
Atributos
Atributo
Valor
Descrio
cols
pixels, relaes e
percentagem,
coringa
informa a quantidade e o tamanho das colunas
rows
pixels, relaes e
percentagem,
coringa
informa a quantidade e o tamanho das linhas
O elemento frame possui os seguintes atributos:

Atributos
Atributo
Valor
Descrio
src
endereo
informa a localizao do arquivo XHTML a ser

carregado
id
nome
informa o nome do frame, a ser utilizado pelo

atributo target de uma ligao
scrolling
yes, no
informa se deve ser includa as barras de

rolagem quando a pgina no cabe por inteiro no
frame
frameborder
pixels
noresize
noresize
impede que o usurio redimensione um frame
marginheight
pixels
espao a ser deixado entre a parte superior e

inferior do frame
margintwidth
pixels
espao a ser deixado entre o lado esquerdo e

direito do frame
especifica a espessura da borda do frame
Pgina 24 de 33
Para um melhor uso dos frames, podemos utilizar as ligaes para alterar o seu contedo a medida
que o usurio clica nos hiperlinks, para tal temos de definir onde a ligao deve abrir o documento, isto
feito atravs do atributo target. Os possveis valores para este atributo so:
Atributos
Valor
_self
Descrio
uma nova pgina ser carregada no frame atual
_blank
uma nova pgina ser carregada em uma nova

janela
_parent
uma nova pgina ser carregada no frame pai
_top
uma nova pgina ser carregada nesta janela,

substituindo a pgina atual que usa frames
nome
informa o nome do frame no qual a pgina deve

ser carregada
Exemplo de uma pgina com a definio do frameset:

<!DOCTYPE
<head>
</head>
<body>
<frameset rows="80px,80%" >
<frame src="exemplo14-top.xhtml" noresize="noresize"
name="topo" id="topo"
marginwidth="10" marginheight="10"
scrolling="no" />
<frameset cols="130px,80%" >
<frame src="exemplo14-esq.xhtml" name="esq" id="esq"
noresize="noresize" scrolling="no"
marginwidth="10" marginheight="10" />
<frame src="exemplo14-dir.xhtml" name="dir" id="dir"
noresize="noresize" scrolling="no"
marginwidth="10" marginheight="10" />
</frameset>
</frameset>
</body>
</html>
Pgina 25 de 33
Exemplo de uma pgina com do frame topo :

<!DOCTYPE
<head>
</head>
<body>
<p align="center">
<img src="tux2.gif" align="middle" height="50" border="0" />
[ Pessoal ] [ Mestrado ] [ Artigos ] [ Linux ] [ Segurana ]
</p>
</body>
</html>
Exemplo de uma pgina com do frame esq :

<!DOCTYPE
<head>
</head>
<body>
<p align="center">
<img src="papagaio-direita.gif" height="200" border="0" />
</p>
</body>
</html>
Exemplo de uma pgina com do frame dir :

<!DOCTYPE
<head>
</head>
<body>
<br /> <br />
<p align="center">
<img src="linuxrodrigo-limpo.gif" width="400" border="0" align="center" />
</p>
</body>
</html>
Pgina 26 de 33
Resultado obtido no navegador
Contudo a forma indicada de se trabalhar com frames no XHTML atravs do uso dos iframes, os
quais no necessitam da declarao dos frameset. Eles so normalmente conhecidos como frames de linha
e possuem a sintaxe:
<iframe src=pagina a ser carregada>

Texto a ser apresentado caso o browser no seja compatvel
</iframe>
Exemplo de uso:
<!DOCTYPE
<head> <title> XHTML Exemplo 15 </title> </head>
<body>
<p> <img src="top.jpg" width="750" height="161" border="0" />
</p>
<iframe height="250" width="750" align="center" scrolling="no"
marginheight="10" marginwidth="10" src="exemplo14-dir.xhtml">
Texto a ser utilizado por navegadores que no suportam iframe
</iframe>
<p align="center">
[ Pessoal ] [ Mestrado ] [ Artigos ] [ Linux ] [ Segurana ]
</p>
</body>
</html>
Pgina 27 de 33
2.8) Trabalhando com Formulrios

Os formulrios so utilizados para o envio de informaes ao servidor ou para a interao da pgina
com o usurio atravs do uso de java scripts. Os dados do formulrio sero tratados somente quando
ocorrer sua submisso, que pode ser realizada atravs do boto de submit. Os valores inseridos nos
formulrios so retornados em pares, onde a primeira parte o nome do elemento e a segunda o valor
atribudo, sendo que eles so separados uns dos outros pelo sinal de igual (=) ;
Os dados podem ser submetidos atravs de dois mtodos GET e POST. No mtodo GET os dados
sero anexados URL e enviados ao servidor, j o mtodo POST envia os dados junto com as demais
informaes contidas no cabealho do HTTP. Ao contrrio do POST que pode manipula qualquer
quantidade de informaes, o GET fica limitado pelo tamanho mximo permitido para uma URL, alm disto
o GET menos seguro, mas seu uso permite o reenvio de um formulrio sem que o mesmo seja re-digitado
Para a construo dos formulrios devemos fazer uso do elemento <form> </form>, que possui os
seguintes atributos:
Atributos
Atributo
Valor
Descrio
action
endereo
Informa o endereo da pgina que ir tratar as

informaes do formulrio. O endereo no precisa
ser uma pgina, pode ser um endereo de e-mail
(mailto:e-mail@dominio.com.br)
method
GET, POST
especifica o mtodo de envio das informaes
Pgina 28 de 33
name
nome
especifica o nome do formulrio, uma pgina

pode possuir mais de um formulrio
target
frame
informa o nome do frame que tratar os dados do

formulrio
enctype
text/plain
informa o mtodo de codificao utilizado no

envio dos dados
Para armazenar as informaes fornecidas pelo usurio podemos fazer uso do elemento <input /
> , que possui os seguintes atributos:
Atributos
Atributo
Valor
Descrio
name
nome
especifica o nome do elemento
value
valor
especifica o contedo inicial do elemento
disabled
disabled
informa que um elemento

manipulado pelo usurio
type
tipo
informa o tipo do elemento
no
pode
ser
Os principais tipos do elemento input so :
text
caixa que pode ser utilizada para insero de

informaes [texto]
password
caixa utilizada para digitao de senhas, ou

campos que no devem ser lidos por terceiros [texto]
file
caixa para digitao do nome de um arquivo,

conta ainda como um boto para realizar a busca do
elemento [texto]
submit
cria um boto que ao ser clicado submete o

contedo do formulrio [boto]
reset
cria um boto que ao ser clicado restaura os

campos ao seu valor default [boto]
button
cria um boto que pode ser associado a um java

script
input
image
insere uma imagem [boto]
checkbox
insere uma caixa de seleo, que permite a

seleo de mais de uma elemento ao mesmo tempo
[seleo]
radio
inserida uma caixa de seleo, que no permite

selees mltiplas [seleo]
hidden
insere campos ocultos, que no so exibidos,

mas
que
podem
ser
utilizados
para
o
armazenamento temporrio de informaes
Pgina 29 de 33
O elemento INPUT do tipo texto, possui os atributos:

Atributos
Atributo
Valor
Descrio
width
numeral
quantidade mxima de caracteres
maxlenght
numeral
largura mxima do elemento
readonly
readonly
o contedo da caixa no pode ser alterada
O elemento INPUT do tipo boto, possui o atributo:

Atributos
Atributo
Valor
disabled
true
Descrio
utilizado para desabilitar um determinado boto
O elemento INPUT do tipo seleo, possui o atributo:

Atributos
Atributo
Valor
Descrio
checked
checked
especifica quais elementos esto marcados como

selecionado
Outro elemento de insero de informao o textarea ( <textarea> </textarea> ), que permite

a digitao de vrias linhas, seus atributos so:
Atributos
Atributo
Valor
Descrio
cols
numeral
quantidade de caracteres por linha
rows
numeral
quantidade de linha na caixa
id
nome
identificao do elemento
Para a criao de uma lista para seleo (combo box) devemos utilizar o elemento select (
<select> </select> ), que delimita a lista, e o elemento option ( <option> </option> ) utilizado na
definio de cada item da lista.
Pgina 30 de 33
Exemplo de Uso de formulrios:

<!DOCTYPE
<head>
</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>
Pgina 31 de 33
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.
Pgina 33 de 33

XHTML Basico PDF

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

XHTML Basico PDF

Enviado por

Direitos autorais:

Formatos disponíveis

Apostila de XHTML

Prof. Luis Rodrigo de O. Gonalves

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

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

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

2) Regras Bsicas do XHTML

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

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

3) XHTML - Conceitos Bsicos

Deve ser o primeiro elemento do cabealho,

Contem informaes sobre o contedo do

Elemento utilizado para realizar a ligao entre

Informaes sobre as folhas de estilo usadas

Espao utilizado para insero de cdigo, por

Especifica o endereo do documento XHMTL

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

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

Frameset: usado quando se utiliza FRAMES em um site:

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

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

2.1) Elementos bsicos do corpo do documento

um dos marcadores mais utilizados, sua

Utilizado com folhas de estilo na especificao de

Introduzem ttulos no documento, podem ser de seis

Utilizados para criao de citaes, que inserem uma

Utilizado para preservar a formatao do texto, no

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

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

Um outro conjunto de elementos so os descritivos de linha:

Fonte em itlico e negrito

Usado para dimensionar parte do texto, normalmente

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

Texto riscado ao meio

Texto nono-espaado, como se tivesse sido escrito

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

2.2 Elementos de Listas

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

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

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

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

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

cor do texto da pgina;

cor dos textos dos links no visitados;

cor dos textos dos links j visitados;

cor dos textos dos links que esto sendo

alinhamento com relao ao documento, assume

impede o uso de sombra na linha;

largura da linha em relao a pgina

fonte a ser utilizada

mesmas propriedades do elemento font, mas

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

Uma ligao relativa pode se parecer com:

... e uma ligao absoluta:

Para referenciar um ancora no mesmo documento podemos usar:

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

Para referenciar um ancora em outro documento:

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

2.5) Manipulando Imagens

Alm destes, o elemento ing possui os seguintes atributos:

aponta para um arquivo texto, que possui uma

define o comprimento da imagem

define o altura da imagem

espao vertical a ser deixado ao redor da