Manual Xhtml

5/16/2018 Manual Xhtml - slidepdf.com

http://slidepdf.com/reader/full/manual-xhtml-55b079ce613fe 1/40

+

XHTML

25H

6/14/11 [email protected]



+De onde vêm o XHTML

n Todas as linguagens da web são baseadas em SGML com afinalidade de servir de base para criação de outras linguagens.

n O SGML foi usado para criar a XML (Extensible MarkupLanguage). Com XML pode cria os seus próprios elementos de

marcação e atributos. XHTML foi criado dentro deste conceito epor isso é uma aplicação XML.

n As tags e atributos da XHTML foram criadas aproveitando astags e atributos do HTML 4.01 e suas regras. Conclui-se que aousar XHTML, estamos a escrever um código XML, onde as tags eatributos já estão definidas.

n XHTML é uma linguagem de marcação bastante familiar paraquem conhece HTML e a transformação de um documentoexistente de HTML para XHTML é uma tarefa simples.




+Finalidade do XHTML

n XHTML é a sigla em inglês para EXtensible HyperTextMarkup Language que em tradução resulta em LinguagemExtensível para Marcação de Hipertexto, uma aplicação XML,escrita para substituir o HTML.

n Não é nada mais do que uma HTML "pura, clara e limpa".




+ Vantagens do XHTML

n Compatibilidade da linguagem XHTML com as futuras aplicações.

n A tendência é a de que futuras versões de browsers, deixem de suportar elementos e atributos já em desuso ("deprecated") segundo as Recomendações do W3C.

n XHTML é a linguagem da web do futuro.

n XHTML é um código consistente que dispensa uso de "truques" e "hacks" para contornar"bugs". Editar um código XHTML existente é uma tarefa simples por se tratar de uma escritalimpa e evidente.

n O tempo de carregamento de uma página XHTML é mais rápido pois os navegadores têm ainterpretar, uma página limpa sem ter que decidir sobre renderização de erros de código.

n Uma página XHTML é mais acessível aos navegadores e às aplicações dos utilizadores em geral,

incrementando a interoperabilidade e a portabilidade dos documentos web.

n Uma página XHTML é totalmente compatível com todas as aplicações HTML antigas e jáultrapassadas.




+ Vantagens do XHTML

n XHTML 1.0 é uma Recomendação do W3C e sua versão atualdata de 26 de janeiro de 2000.

n Isto significa que trata-se de uma linguagem estável,

oficialmente especificada pelo W3C, tendo sido projectada erevisada pelos seus membros e é uma "Padrão Web.




+Diferenças entre XHTML e HTML

n Todas as tags devem ser escritas em letras minúsculas;

n As tags devem estar convenientemente alinhadas;

n Os documentos devem ser bem formados;

n O uso de tags fechadas é obrigatório;

n Elementos vazios devem ser fechados;

n Sintaxe para atributos.





n Todas as tags devem ser escritas em letras minúsculas;

n A metalinguagem XML é sensível ao tamanho da fonte.

n Uma vez que XHTML é uma aplicação XML, também ésensível ao tamanho e deve ser usada lowercase

n Errado:

n <DIV><P>Aqui um texto</P></DIV>

n Certo:

n <div><p>Aqui um texto</p></div>





n As tags devem estar convenientemente alinhadas;

n Errado:

n <div><em><p>Aqui um texto negrito</em></p></div>

n Certo:

n <div><em><p>Aqui um texto negrito</p></em></div>





n Os documentos devem ser bem formados;

n Um documento diz-se bem formado quando está estruturadode acordo com as regras definidas nas Recomendações para

XML 1.0 [ XML ].Todos os elementos XHTML devem estar corretamentealinhados dentro do elemento raiz <html>.





n O uso de tags fechadas é obrigatório;

n Em HTML é permitido, para determinados elementos, omitiro fecho da tag. XML não permite.

n Errado::

n <p>Um parágrafo.<p>Outro parágrafo.

n Certo:

n <p>Um parágrafo.</p><p>Outro parágrafo.</p>





n Elementos vazios devem ser fechados;

n Exemplo, <br /> ou <hr></hr>.

n Errado: Elementos vazios sem terminação

n <br>

n <hr>

n Certo: Elementos vazios com terminação

n <br/>

n <hr/>






n Nomes de atributos

n Assim como as tags, os atributos também são sensíveis aotamanho deve-se escrever nomes de atributos emminúsculas;Errado:<td ROWSPAN="3">Certo:<td rowspan="3”>






n Valores de atributos

n Os valores de atributos devem estar entre "aspas duplas " ou'aspas simples';Errado:<td rowspan=3>Certo:<td rowspan="3"> ou <td rowspan='3'>






n Valores dos atributos

n Todos os atributos devem receber um valor;

n Errado:

n <input checked />

n Certo:<input checked="checked" />










n Os atributos id e name;

n A HTML define o atributo name para os elementos a, applet,form, frame, iframe, img , e map. HTML tambémintroduziu o atributo id. Ambos os atributos foram projetadospara serem usados como identificadores.Em XML, os identificadores são exclusivamente do tipo ID, epoderá existir somente um atributo do tipo ID por elemento.

Além disso um determinado valor do identificador ID deveser único no documento.





n Documentos XHTML 1.0 compatíveis com XML e bemestruturados, DEVEM usar o atributo id e não name aodefinir identificadores para os elementos listados acima.Notar que em XHTML 1.0, o atributo name destes elementos

está formalmente em desuso e possivelmente será excluidonas versões futuras de XHTML.

Errado:<img src="imagem.gif" name="minha_imagem" />

Certo:<img src="imagem.gif" id="minha_imagem" />





n O atributo lang;

n O atributo lang destina-se a definir a língua em que foiescrito o documento HTML e o atributo xml:lang para

definir a língua em que foi escrito o documento XML.n <div lang="it" xml:lang="it">Ciao bella!</div>




+Elementos obrigatórios em XHTML

n Mandatory XHTML Elements

n Num documento XHTML têm de existir a declaraçãoDOCTYPE. O elementos html, head, title, e body têm de estar

presentes.




+DOCTYPES em XHTML

n A Definição do tipo de documento (Document TypeDefinitions DTD) especifica qual é a sintaxe SGML usada nodocumento. A DTD é usada pelas aplicações SGML ( taiscomo HTML ) para identificar as regras que se aplicam a

linguagem de marcação usada no documento bem como oconjunto de elementos e entidades válidas naquelalinguagem. Assim uma DTD para um documento XHTMLdescreve com precisão a sintaxe e a gramática da linguagemde marcação XHTML.O DOCTYPE deve ser sempre aprimeira declaração em um documento web.




+Diferentes DOCTYPES em XHTML

n São três os tipos de DOCTYPE para XHTML:

n STRICT

n TRANSITIONAL

n FRAMESET





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

n A mais rígida das declarações.

n No modo Strict não admitem qualquer item de formataçãodentro dos elementos.

n Não admite elementos em desuso "deprecated" segundo asrecomendações do W3C.

n São indicados para uso com folhas de estilo em cascata, commarcação totalmente independente da apresentação.





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

n Esta declaração permite uma maior flexibilidade e éindicada para documentos que ainda utilizem elementos emdesuso ("deprecated"),

n Regras de apresentação embutidas em tags.

n Documentos destinados a exibição em browsers sem suporte

para CSS.

n Não admite qualquer tipo de marcação para frames.





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

n Esta declaração permite tudo da declaração transational emais os elementos especificos para frames.





n W3C disponibiliza um validador gratuito para documentosXHTML.

n Digita o URL ou o caminho para a página e um robô analisa odocumento fornecendo um relatório completo e detalhado das

não conformidades por ventura existentes.n É uma ferramenta excelente para usar durante a elaboração ou

migração do seu documento para XHTML.

n Serve como um revisor do código que cria.

n Link para o validador:

n http://www.w3schools.com/xhtml/default.asp




+Caminhos relativos e Absolutos

n Uma ligação relativa pode se parecer com:...

n <a href=”../aulas-ambiente-internet.xhtml”> Notas de aulas </

a>

n e uma ligação absoluta:

n <a href=”http://www.lrodrigo.cjb.net/estacio/aulas-ambiente-internet.xhtml”> Notas de aulas </a>




+Pontos de âncoras”Links”

n Em HTML para criar um ponto de âncora, associamos umnome ao elemento <a>:

n Ligação a outro site

n <a href="http://www.123.com">Visita 123!</a>

n Ligação dentro do documento

n <a href="#uteis">Links Úteis</a> faz o link para

n <a name="uteis">Links Úteis :</a> ou

n <a id="uteis">Links Úteis :</a>




+Separadores de blocos de códigos

n É comum o uso de uma sequência de caracteres dentro da marcação de comentários (  )

n Não usar a sequência de caracteres ------.

n Usar por exemplo a sequência ====, ., ou xxxxxx

n Errado:

n 

n 





n É comum o uso de uma sequência de caracteres dentro da marcação de comentários (  )

n Não usar a sequência de caracteres ------.

n Usar por exemplo a sequência ====, ., ou xxxxxx

n Errado:


n 





n Os browsers aceitam três formatos: GIF, JPEG e PNG

n Incluídas nas páginas através do elemento <img />.

n Este elemento possui o atributo “alt”, utilizado para fornecer umtexto alternativo quando a imagem não puder ser visualizada.

n Atributo “src” para indicar a localização da figura.

n Exemplo:

n <img src=”../papagaio.jpg” alt=” papagaio” />

n Ainda têm atributo width e height.




+Tabelas

n Todas as tabelas devem conter:

n Título

n Cabeçalho

n Corpo

n Rodape




+Tabelas




+Tabelas




+Tabelas




+Formulários

n Para criar formulários usamos a tag <form>

n Um formulário pode conter elementos input, text fields,checkboxes, radio-buttons, submit button.

n Formulários são usados para passar informação paraservidor.




+Formulários

n <form action="form_action.asp" method="get">

n <input type="checkbox" name="vehicle" value="Bike" /> Ihave a bike<br />

n <input type="checkbox" name="vehicle" value="Car"checked="checked" /> I have a car <br />

n <input type="submit" value="Submit" />

n </form>




+Formulários

n <form action="form_action.asp" method="get">

n <input type="radio" name="sex" value="Male" />Male<br />

n <input type="radio" name="sex" value="Female"checked="checked" /> Female<br />

n <input type="submit" value="Submit" />

n </form>




+Formuláriosn <form action="mailto:[email protected]"

method="post" enctype="text/plain">

n Name:<br />

n <input type="text" name="name" size="20" /><br />

n Email:<br />

n <input type="text" name="email" size="20" /><br />

n Comment:<br />

n <input type="text" name="comment" size="40" /><br /

><br />

n <input type="submit" value="Send" />

n <input type="reset" value="Reset" /> </form>6/14/11 [email protected]



+Formulários




+Frames

Documents

Manual Xhtml