229 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 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.

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" />

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.

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

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.

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>

Exemplo 02:

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

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

Exemplo 07:
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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>
</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>

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
aponta para um arquivo texto, que possui uma

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

(descontinuado) percentagem imagem

hspace pixels, espao horizontal a ser deixado ao redor da
(descontinuado) percentagem imagem
align right, left, top,

posiciona a figura da pgina.
(descontinuado) middle, botton
border pixels define a espessura da borda

(descontinuado)
Exemplo de uso:
<?xml version="1.0" encoding="iso-8859-1"?>

<!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>

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
<table> </table> delimita o tabela e seus elementos
<caption> </caption> elemento opcional que indica o ttulo da tabela
<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
espessura da linha do desenho da borda

border pixels
da tabela
void, above, below, lhs, rhs, informa qual rea deve ser desenhada
frame
hsides, vsides, box, border em torno da tabela.
informa como as linhas entre as clulas

rules none, all, groups, row, cols
sero desenhadas
cellspacing pixels espaamento entre as clulas
espaamento entre o contedo da clula

cellpading pixels
e sua borda
nome da cor, define a cor de fundo da tabela, da linha

bgcolor
cdigo hexadecimal ou da clula
define o alinhamento da tabela dentro do

align left, right
documento

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>

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>

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>

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
pixels, relaes e
cols percentagem, informa a quantidade e o tamanho das colunas
coringa
pixels, relaes e
rows percentagem, informa a quantidade e o tamanho das linhas
coringa
O elemento frame possui os seguintes atributos:
Atributos
informa a localizao do arquivo XHTML a ser

src endereo
carregado
informa o nome do frame, a ser utilizado pelo

id nome
atributo target de uma ligao
informa se deve ser includa as barras de

scrolling yes, no rolagem quando a pgina no cabe por inteiro no
frame
frameborder pixels especifica a espessura da borda do frame
noresize noresize impede que o usurio redimensione um frame
espao a ser deixado entre a parte superior e

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

margintwidth pixels
direito do frame

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 Descrio
_self uma nova pgina ser carregada no frame atual
uma nova pgina ser carregada em uma nova

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

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

nome
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>

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>

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>

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
Informa o endereo da pgina que ir tratar as

informaes do formulrio. O endereo no precisa
action endereo
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

especifica o nome do formulrio, uma pgina
name nome
pode possuir mais de um formulrio
informa o nome do frame que tratar os dados do

target frame
formulrio
informa o mtodo de codificao utilizado no

enctype text/plain
envio dos dados
Para armazenar as informaes fornecidas pelo usurio podemos fazer uso do elemento <input /
> , que possui os seguintes atributos:
Atributos
name nome especifica o nome do elemento
value valor especifica o contedo inicial do elemento
informa que um elemento no pode ser

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

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

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

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

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

reset
campos ao seu valor default [boto]
input
cria um boto que pode ser associado a um java
button
script
image insere uma imagem [boto]
insere uma caixa de seleo, que permite a

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

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

hidden mas que podem ser utilizados para o
armazenamento temporrio de informaes

O elemento INPUT do tipo texto, possui os atributos:
Atributos
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
disabled true utilizado para desabilitar um determinado boto
O elemento INPUT do tipo seleo, possui o atributo:
Atributos
especifica quais elementos esto marcados como

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

a digitao de vrias linhas, seus atributos so:
Atributos
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.

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>

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.

229 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

229 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 Pgina 1 de 33

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

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

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

2) Regras Bsicas do XHTML

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

<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

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

Elemento Descrio Obrigatri

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

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

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

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

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

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

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 Pgina 6 de 33

Nome Marcador Descrio

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

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

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

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

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

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

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

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

<h1> Exemplo de uso de Listas ordenadas</h1>

<b> Primeira Lista </b>

<i> Segunda Lista</i>

<u> Terceira Lista </u>

<sub> Quarta Lista </sub>

<li> Item 3</li>

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

<ing src=../papagaio.jpg alt=charge do papagaio />

Alm destes, o elemento ing possui os seguintes atributos:

Atributo Valor Descrio

aponta para um arquivo texto, que possui uma

vspace pixels, espao vertical a ser deixado ao redor da

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

align right, left, top,

border pixels define a espessura da borda

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

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

<table> </table> delimita o tabela e seus elementos

<caption> </caption> elemento opcional que indica o ttulo da tabela

<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