Você está na página 1de 33

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.

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

<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

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

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>

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

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

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

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

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

Pgina 10 de 33

Exemplo 05:
<?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 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>.

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

Pgina 11 de 33

Exemplo06:
<?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>XHTML Exemplo 04</title>
</head>
<body>
<hr />
<h1> Exemplo de uso de Listas n&#227;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>
<li> Segundo 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>

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

Pgina 12 de 33

Exemplo 07:

<?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>XHTML Exemplo 07</title>
</head>
<body>
<h1> Exemplo de uso de Listas ordenadas</h1>
<b> Primeira Lista </b>
<ol type="1">
<li> Primeiro Item </li>
<li> Segundo Item </li>
</ol>
<i> Segunda Lista</i>
<ol type="a">
<li> Primeiro Item </li>
<li> Segundo Item </li>
</ol>
<u> Terceira Lista </u>
<ol type="A">
<li> Primeiro Item</li>
<li> Segundo 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>

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

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];
....

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

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.

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

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>

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

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
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 09</title>
</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>

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

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

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

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:
<?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 10</title>
</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>

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

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

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

Pgina 20 de 33

Exemplo de uso de tabelas :


<?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 11</title>
</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>
<td>Linha 1 Coluna 2</td>
<td>Linha 1 Coluna 3</td>
</tr>
<tr>
<td>Linha 2 Coluna 1</td>
<td>Linha 2 Coluna 2</td>
<td>Linha 2 Coluna 3</td>
</tr>
<tr>
<td>Linha 3 Coluna 1</td>
<td>Linha 3 Coluna 2</td>
<td>Linha 3 Coluna 3</td>
</tr>
</tbody>
<tfoot>
Rodap da tabela
</tfoot>
</table>
</body>
</html>

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

Pgina 21 de 33

Exemplo de uso de tabelas com unio de clulas:


<?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 12</title>
</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>
<td>Linha 1 Coluna 3</td>
</tr>
<tr>
<td>Linha 2 Coluna 1</td>
<td>Linha 2 Coluna 2</td>
<td rowspan="2">Linha 2 Coluna 3</td>
</tr>
<tr>
<td>Linha 3 Coluna 1</td>
<td>Linha 3 Coluna 2</td>
</tr>
</tbody>
<tfoot>
Rodap da tabela
</tfoot>
</table>
</body>
</html>

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

Pgina 22 de 33

Exemplo de uso de alguns dos atributos das tabelas:


<?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 13</title>
</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>
<td>Linha 1 Coluna 3</td>
</tr>
<tr>
<td>Linha 2 Coluna 1</td>
<td>Linha 2 Coluna 2</td>
<td rowspan="2">Linha 2 Coluna 3</td>
</tr>
<tr>
<td>Linha 3 Coluna 1</td>
<td>Linha 3 Coluna 2</td>
</tr>
</tbody>
<tfoot>
Rodap da tabela
</tfoot>
</table>
</body>
</html>

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

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

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

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:


<?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 14</title>
</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>

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

Pgina 25 de 33

Exemplo de uma pgina com do frame topo :


<?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 14</title>
</head>
<body>
<p align="center">
<img src="tux2.gif" align="middle" height="50" border="0" />
[ Pessoal ] [ Mestrado ] [ Artigos ] [ Linux ] [ Segurana ]
<img src="tux1.gif" align="middle" height="50" border="0" />
</p>
</body>
</html>

Exemplo de uma pgina com do frame esq :


<?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 14</title>
</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 :


<?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 14</title>
</head>
<body>
<br /> <br />
<p align="center">
<img src="linuxrodrigo-limpo.gif" width="400" border="0" align="center" />
</p>
</body>
</html>

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

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:
<?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 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">
<img src="tux2.gif" align="middle" height="50" border="0" />
[ Pessoal ] [ Mestrado ] [ Artigos ] [ Linux ] [ Segurana ]
<img src="tux1.gif" align="middle" height="50" border="0" />
</p>
</body>
</html>

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

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

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

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

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

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.

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

Pgina 30 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

Interesses relacionados