Escolar Documentos
Profissional Documentos
Cultura Documentos
XHTML Basico
XHTML Basico
( Curso Introdutrio)
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".
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".
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
<title> </title>
<meta> <meta>
<link> </link>
N N 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
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">
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
Pargrafo
<p> </p>
Diviso
<div> </div>
Ttulos
<hn> </hn>
Blockquete
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
Preserve
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:
<?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 é 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:
<?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 é 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 Citao Cdigo Definio nfase Span Forte Marcador <cite> </cite> <code> </code> <dfn> </dfn> <em> </em> <span> </span> <strong> </strong> Fonte em itlico Fonte mono-espaada Fonte em itlico e negrito Fonte em itlico Usado para dimensionar parte do texto, normalmente est relacionado com algum estilo de uma folha de estilo; Fonte em negrito Descrio
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 Grande Small Negrito Itlico Riscado Subscrito Sobrescrito Sublinhado Teclado True-Type Marcador <big> </big> <small> </small> <b> </b> <i> </i> <strike> </strike> <sub> </sub> <sup> </sup> <u> </u> <kbd> </kbd> <tt> </tt> Descrio Fonte maior que o padro Fonte menor que o padro Texto em negrito Texto em itlico Texto riscado ao meio Texto subscrito Texto sobrescrito Texto Sublinhado Texto nono-espaado, como se tivesse sido escrito na mquina de escrever Texto nono-espaado
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;
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ã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>
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>
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 text body link vlink alink align hr noshade size width size font color face basefont Descrio alinhamento horizontal, pode seguintes valores: left, right e center 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; 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 chamados. alinhamento com relao ao documento, assume os valores: left, right e center; impede o uso de sombra na linha; espessura da linha; largura da linha em relao a pgina assume valores de 1 5 cor da fonte fonte a ser utilizada mesmas propriedades do elemento font, mas cujos valores especificam a formatao de todos os elementos da pgina. assumir os
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>
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 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>
Pgina 17 de 33
Alm destes, o elemento ing possui os seguintes atributos: Atributos Atributo longdec width height vspace Valor -----pixels, percentagem pixels, percentagem pixels, percentagem Descrio aponta para um arquivo texto, que possui uma descrio para a imagem. define o comprimento da imagem define o altura da imagem espao vertical a ser deixado ao redor da imagem
(descontinuado)
Pgina 18 de 33
(descontinuado)
hspace align
espao horizontal a ser deixado ao redor da imagem posiciona a figura da pgina. define a espessura da borda
(descontinuado)
(descontinuado)
border
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>
Pgina 19 de 33
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 border frame rules cellspacing cellpading bgcolor align Valor pixels Descrio espessura da linha do desenho da borda da tabela
void, above, below, lhs, rhs, informa qual rea deve ser desenhada hsides, vsides, box, border em torno da tabela. none, all, groups, row, cols pixels pixels 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
Pgina 21 de 33
Pgina 22 de 33
Pgina 23 de 33
rows
O elemento frame possui os seguintes atributos: Atributos Atributo src id Valor endereo nome Descrio informa a localizao do arquivo XHTML a ser carregado informa o nome do frame, a ser utilizado pelo atributo target de uma ligao informa se deve ser includa as barras de rolagem quando a pgina no cabe por inteiro no frame especifica a espessura da borda do frame impede que o usurio redimensione um frame espao a ser deixado entre a parte superior e inferior do frame espao a ser deixado entre o lado esquerdo e direito 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 _blank _parent _top nome Descrio uma nova pgina ser carregada no frame atual uma nova pgina ser carregada em uma nova janela uma nova pgina ser carregada no frame pai uma nova pgina ser carregada nesta janela, substituindo a pgina atual que usa frames informa o nome do frame no qual a pgina deve ser carregada
Pgina 25 de 33
Pgina 26 de 33
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>
Pgina 27 de 33
action
endereo
method
GET, POST
Pgina 28 de 33
especifica o nome do formulrio, uma pgina pode possuir mais de um formulrio informa o nome do frame que tratar os dados do formulrio 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 name value disabled type Valor nome valor disabled tipo Descrio especifica o nome do elemento especifica o contedo inicial do elemento informa que um elemento manipulado pelo usurio informa o tipo do elemento no pode ser
Os principais tipos do elemento input so : caixa que pode ser utilizada para insero de informaes [texto] caixa utilizada para digitao de senhas, ou campos que no devem ser lidos por terceiros [texto] caixa para digitao do nome de um arquivo, conta ainda como um boto para realizar a busca do elemento [texto] cria um boto que ao ser clicado submete o contedo do formulrio [boto] cria um boto que ao ser clicado restaura os campos ao seu valor default [boto] cria um boto que pode ser associado a um java script insere uma imagem [boto] insere uma caixa de seleo, que permite a seleo de mais de uma elemento ao mesmo tempo [seleo] inserida uma caixa de seleo, que no permite selees mltiplas [seleo] insere campos ocultos, que no so exibidos, mas que podem ser utilizados para o armazenamento temporrio de informaes
text password
file
radio
hidden
Pgina 29 de 33
O elemento INPUT do tipo texto, possui os atributos: Atributos Atributo width maxlenght readonly Valor numeral numeral readonly Descrio quantidade mxima de caracteres largura mxima do elemento o contedo da caixa no pode ser alterada
O elemento INPUT do tipo boto, possui o atributo: Atributos Atributo disabled Valor true Descrio utilizado para desabilitar um determinado boto
O elemento INPUT do tipo seleo, possui o atributo: Atributos Atributo checked Valor checked Descrio 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 cols rows id Valor numeral numeral nome Descrio quantidade de caracteres por linha quantidade de linha na caixa 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
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