PROGRAMAÇÃO WEB AULA XHTML Prof. Gustavo Linhares Instituto Federal de Educação, Ciência e...

PROGRAMAÇÃO WEB

AULA XHTMLProf. Gustavo Linhares

Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais.

Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais.

OBJETIVOPretendemos descrever o que é, para que serve e porque adotar a linguagem de marcação XHTML, apresentando seus aspectos estruturais e semânticos, bem como ressaltando as vantagens do seu uso.

Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais.

De onde veio XHTML ?

Todas as linguagens de marcação da web são baseadas em SGML, uma metalinguagem complexa, projetada para máquinas com a finalidade de servir de base para criação de outras linguagens. O SGML foi usado para criar a XML (Extensible Markup Language), também uma metalinguagem, porém bem mais simples.

Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais.

De onde veio XHTML ?

Com XML você cria suas próprias tags e atributos para escrever seu documento web. Isto significa que é você quem cria sua linguagem de marcação.

XHTML foi criado dentro deste conceito e por isso é uma aplicação 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.

Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais.

De onde veio XHTML ?

Conclui-se que ao usar XHTML, estamos escrevendo um código XML, onde as tags e atributos já estão definidas e isto proporciona todos os benefícios de XML sem as complicações e complexidade do SGML.

Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais.

De onde veio XHTML ?

XHTML é uma linguagem de marcação bastante familiar para quem conhece HTML e a transformação de um documento existente de HTML para XHTML é uma tarefa bem simples, como veremos adiante.

Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais.

Qual a finalidade do XHTML ?

XHTML é a sigla em inglês para EXtensible HyperText Markup Language que em português resulta em Linguagem Extensível para Marcação de Hipertexto, uma aplicação XML, escrita para substituir o HTML e nada mais é do que um HTML "puro, claro e limpo".

Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais.

Vantagens de se usar XHTML

XHTML é a linguagem da web do futuro desde já a disposição de projetistas e desenvolvedores web.

Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais.

Vantagens de se usar XHTML

XHTML é um código consistente que dispensa uso de "truques" e "hacks" para contornar "bugs".

Editar um código XHTML existente é uma tarefa bem simples por se tratar de uma escrita limpa e evidente.

Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais.

Vantagens de se usar XHTML

O tempo de carregamento de uma página XHTML é mais rápido pois os browsers tem a interpretar uma página limpa sem ter que interpretar e decidir sobre renderização de erros de código.

Uma página XHTML é mais acessível aos browsers e aplicações de usuário padrão incrementando a interoperabilidade e a portabilidade dos documentos web.

Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais.

Vantagens de se usar XHTML

Uma página XHTML é totalmente compatível com todas as aplicações de usuários para HTML, antigas e já ultrapassadas.

Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais.

Vantagens de se usar XHTML

Uma página XHTML é totalmente compatível com todas as aplicações de usuários para HTML, antigas e já ultrapassadas.

Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais.

XHTML é uma "Web Standard"

XHTML é uma recomendação do W3C. Isto significa que trata-se de uma linguagem estável, oficialmente especificada pelo W3C, tendo sido projetada e revisada pelos seus membros e é uma "Web Standard".

Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais.

As diferenças entre XHTML e HTML

• Todas as tags devem ser escritas em letras minúsculas;• As tags devem estar convenientemente aninhadas;• Os documentos devem ser bem formados;• O uso de tags de fechamento é obrigatório;• Elementos vazios devem ser fechados;• Diferenças para os atributos.

Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais.

Todas as tags devem ser escritas em letras minúsculas

A metalinguagem XML é sensível ao tamanho de caixa da fonte. De vez que XHTML é uma aplicação XML, também é sensível ao tamanho de caixa e deve ser usada caixa baixa, ou seja, letras minúsculas.

Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais.

Todas as tags devem ser escritas em letras minúsculas

Errado:

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

Certo:

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

Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais.

As tags devem estar convenientemente aninhadas

Errado:

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

Certo:

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

Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais.

Os documentos devem ser bem formados

Um documento diz-se bem formado quando está estruturado de acordo com as regras definidas nas Recomendações para XML 1.0 [ XML ].Todos os elementos XHTML devem estar corretamente aninhados dentro do elemento raiz <html>.

Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais.

Os documentos devem ser bem formados

A estrutura básica do documento deve ser conforme abaixo:

<html><head> ... </head><body> ... </body></html>

Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais.

O uso de tags de fechamento é obrigatório

Em HTML é permitido para determinados elementos, omitir-se a tag de fechamento. XML não permite omissão de qualquer tag de fechamento.

Errado::

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

Certo:

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

Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais.

Elementos vazios devem ser fechados

Elementos vazios devem ter uma tag de fechamento ou a tag de abertura deve terminar com />. Como exemplo, <br /> ou <hr></hr>.

Errado: Elementos vazios sem terminação

<br> <hr> <img src="imagem.gif" alt="minha imagem ">

Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais.

Elementos vazios devem ser fechados

Elementos vazios devem ter uma tag de fechamento ou a tag de abertura deve terminar com />. Como exemplo, <br /> ou <hr></hr>.

Certo: Elementos vazios com terminação

<br /> <hr /> <img src="imagem.gif" alt="minhaimagem " />

Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais.

Diferenças para os atributosNomes de atributos

Assim como as tags, os atributos também são sensíveis ao tamanhon de caixa e então deve-se escrever nomes de atributos em minúsculas;

Errado:

<td ROWSPAN="3">

Certo:

<td rowspan="3">

Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais.

Diferenças para os atributos Valores de atributos

Os valores de atributos devem estar entre "aspas";

Errado:

<td rowspan=3>

Certo: <td rowspan="3">

Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais.

Separadores de blocos de códigos É comum o uso de uma sequência de caracteres dentro da marcação de comentários ( <!-- --> ) para visualmente separar trechos do código com a finalidade de facilitar sua posterior leitura e manutenção.

Não use a clássica sequência de caracteres ------, para conseguir este efeito.Alguns agentes de usuário mais antigos podem ter dificuldades na interpretação desta sequência.Use por exemplo a sequência ==== . ou xxxxxx

Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais.

Separadores de blocos de códigos Errado:

<!-- Aqui começa o menu --><!-- -------------------------------------------- -->código XHTML do menu<!-- -------------------------------------------- -->

Certo:

<!-- Aqui começa o menu --><!-- xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx -->código XHTML do menu<!-- xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx -->

Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais.

Elementos obrigatórios em um documento XHTML

É obrigatório a declaração do DOCTYPE assim como a existências dos elementos <html> <head> <title> e <body>

Um modelo mínimo de documento XHTML é conforme abaixo:

Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais.

Elementos obrigatórios em um documento XHTML

<!DOCTYPE bla..bla..bla> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Título do odcumento</title> </head><body> Conteúdo do documento</body></html>A declaração DOCTYPE não faz parte da marcação XHTML e como tal não é também um elemento, razão pela qual não há necessidade de tag de fechamento.

Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais.

Para que serve o DOCTYPE ?A Definição do tipo de documento (Document Type Definitions DTD) especifica qual é a sintaxe SGML usada no documento. A DTD é usada pelas aplicações SGML ( tais como HTML ) para identificar as regras que se aplicam a linguagem de marcação usada no documento bem como o conjunto de elementos e entidades válidas naquela linguagem. Assim uma DTD para um documento XHTML descreve com precisão a sintaxe e a gramática da linguagem de marcação XHTML.

O DOCTYPE deve ser sempre a primeira declaração em um documento web.

Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais.

Os tipos de DOCTYPESão três os tipos de DOCTYPE para XHTML:

* STRICT * TRANSITIONAL * FRAMESET

Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais.

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

Esta é a mais rígida das declarações. Os documentos XHTML no modo Strict não admitem qualquer item de formatação dentro dos elementos e nem elementos em desuso "deprecated" segundo as recomendações do W3C. São indicados para uso com folhas de estilo em cascata, com marcação totalmente independente da apresentação

Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais.

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

Esta declaração permite uma maior flexibilidade e é indicada para documentos que ainda utilizem elementos em desuso ("deprecated"), regras de apresentação embutidas em tags e também para documentos destinados a exibição em browsers sem suporte para CSS. Não admite qualquer tipo de marcação para frames.

Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais.

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

Esta declaração permite tudo da declaração transational e mais os elementos especificos para frames.

Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais.

Para que serve o DOCTYPE ?A Definição do tipo de documento (Document Type Definitions DTD) especifica qual é a sintaxe SGML usada no documento. A DTD é usada pelas aplicações SGML ( tais como HTML ) para identificar as regras que se aplicam a linguagem de marcação usada no documento bem como o conjunto de elementos e entidades válidas naquela linguagem. Assim uma DTD para um documento XHTML descreve com precisão a sintaxe e a gramática da linguagem de marcação XHTML.

O DOCTYPE deve ser sempre a primeira declaração em um documento web.

Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais.

Versões do HTML

•HTML•HTML+•HTML 2.0•HTML 3.0•HTML 3.2•HTML 4.0•HTML 4.01(Versão atual)•HTML 5 (Versão em fase de desenvolvimento)

Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais.

Versões do HTML

•HTML•HTML+•HTML 2.0•HTML 3.0(não oficial)•HTML 3.2•HTML 4.0•HTML 4.01(Versão atual)•HTML 5 (Versão em fase de desenvolvimento)

Deu origem ao XHTML 1.0

Versões anteriores a W3C

Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais.

Versões do XHTML

•XHTML 1.0•XHTML 1.1•XHTML 2.0(em fase de estudos)

Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais.

Sintaxe geral de marcação<!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"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title></head>

<body></body></html>

Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais.

Sintaxe geral de marcaçãoO elemento mais importante de uma página web é o elemento title destinado a marcar o título da página. Segue-se em importância o elemento h destinado a marcar os cabeçalhos em seus seis níveis, h1, h2, h3, h4, h5 e h6.

Elemento Descrição

p destinado a marcar parágrafosul destinado a marcar listasstrong destinado a dar forte ênfase a uma palavrablockquote destinado a marcar uma citação longa.

Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais.

Tags(ou etiquetas)Na marcação utilizamos uma tag de abertura(ou inicial) e uma tag de fechamento(ou final) entre os quais se insere o conteúdo.

A sintaxe geral de marcação é apresentada no diagrama da figura abaixo:

<h1 id=”idggentificador”>

tag de abertura

Texto de cabeçalho </h1>

elemento

tag de fechamento

conteúdoatributo/valor

Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais.

Sintaxe geral de marcação

<title> Aqui vai o titulo da página web</title><h2>Aqui um cabeçalho nível 2</h2><p>Aqui o texto de um parágrafo</p><blockquote> Aqui o texto de uma citação longa</blockquote>

Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais.

Comentários

<!-- Aqui começa a seção 2--><h2>Aqui um cabeçalho nível 2</h2><p>Aqui o texto de um parágrafo</p><!-- Aqui termina a seção 2-->

Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais.

Atributos

Fornece informações adicionais para um elemento XHTML e são declarados dentro da tag de abertura do elemento.

<h1 style=”color: red”>Cabeçalho de nível 1</h1>

Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais.

Quebra de linha

<br />

Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais.

Sintaxe para cores

Sintaxe hexadecimal

<h1 style="color:#FF0000">Cabeçalho de nível 1</h1>

Cabeçalho de nível 1

Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais.

Seção head

A seção head de um documento designa-se a conter os elementos da linguagem destinados a fornecer informações adicionais sobre o documento e dela deverá constar obrigatoriamente o título do documento, marcado com o elemneto title.<head></head>

Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais.

Seção head

<head><title>O título da minha página</title></head>

Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais.

Estrutura da Seção body

Destinado a conter os elementos designados a marcar os conteúdos que serão renderizados no navegador. Tudo que você vê em uma página quando navega na internet esta contido na seção body da marcação do documento.

Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais.

Estrutura da Seção body

<body>...marcação para ser redenrizada...</body>

Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais.

Lista de elementos não ordenado (ul)

<ul> <li>Elemento 1</li> <li>Elemento 2</li> <li>Elemento 3 </li></ul>

Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais.

Lista de elementos não ordenado (ul)

•Elemento 1•Elemento 2•Elemento 3

Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais.

Lista de elementos ordenado (ol)

<ol> <li>Elemento 1</li> <li>Elemento 2</li> <li>Elemento 3 </li></ol>

Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais.

Lista de elementos não ordenado (ul)

1.Elemento 12.Elemento 23.Elemento 3

Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais.

Tabelas<table width="200" border="1"> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr></table>

Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais.

Tabelas

Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais.

Divs

<div>Content for New Div Tag Goes Here</div>

Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais.

Divs

Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais.

Links

<a href="#">Clique aqui</a>

Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais.

Strong, em

<strong>Texto em negrito</strong><em>Texto em itálico</em>

Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais.

Formulários

<form id="form1" name="form1" method="post" action="">

</form>

Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais.

Formulários – Text field

<form id="form1" name="form1" method="post" action="">

<input type="text" name="textfield" />

</form>

Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais.

Formulários – Text field

Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais.

Formulários – Text field

<form id="form1" name="form1" method="post" action="">

<textarea name="textarea"></textarea>

</form>

Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais.

Formulários – Text area