Tecnologias Web jgw@unijui.edu.br Prof. Msc. Juliano Gomes Weber (jgw@unijui.edu.br) Tecnologias Web...

View
113
Download
7
Category

Documents

Preview:

Citation preview

Tecnologias Web jgw@unijui.edu.br

Prof. Msc. Juliano Gomes Weber(jgw@unijui.edu.br)

Tecnologias Web

Notas de Aula – Aula 101º Semestre - 2011

UNIJUÍ – DETEC – Ciência da Computação

De onde veio o xhtml

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.

W3C

Padrões como HTML, XHTML e CSS são muito populares, contudo, em muitos casos são usados de forma errônea devido ao desconhecimento da especificação.

XHTML – Introdução

XHTML (eXtensible HyperText Markup Language) – linguagem baseada na XML para sucessão do HTML 4.01.

XML (eXtensible Markup Language) – linguagem que permite a definição de elementos, atributos e valores para linguagens de marcação personalizadas.

Um documento XHTML é um documento XML. Possui os mesmos 90 elementos do HTML 4.01. Poucas diferenças entre o XHTML e o HTML.

XHTML

XHTML, ou eXtensible Hypertext Markup Language - reformulação da linguagem de marcação HTML baseada em XML;

Combina as tags de marcação HTML com regras da XML;

Tem em vista a exibição de páginas Web em diversos dispositivos (televisão, palm, celular, etc);

Acessibilidade.

As diferenças entre XHTML e HTML

As principais diferenças são: 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; sintaxe para atributos.

XHTML

O XHTML consegue ser interpretado por qualquer dispositivo.

Não existem muitas diferenças entre o HTML e o XHTML.

Para verificar se uma página XHTML está bem construída, o melhor método é validar o código através de uma aplicação Web disponibilizada pela W3C.

http://validator.w3.org/

XHTML

XHTML 1.0 Strict XHTML 1.0 Transitional XHTML 1.0 Frameset

XHTML – Introdução

XHTML Transitional – transição entre o HTML e o XHTML Strict. Permite a utilização de todos os elementos do HTML 4.01, possibilitando a compatibilidade com navegadores antigos.

XHTML Strict – não inclui os elementos de formatação do HTML 4.01. Base para a XHTML 1.1 e XHTML 2.0.

XHTML Frameset – deve ser usada quando se quer trabalhar com frames. Inclui todos os elementos da HTML 4.01.

Documento mínimo codificado em Xhtml 1.0 padrão

1 <!DOCTYPE html2 PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”3 “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>4 <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”pt-br” lang=”pt-br”>5 <head>6 <title>Um título</title>7 <meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />8 </head>9 <body>10 </body>11 </html>

1, 2, 3 doctype: indica a versão do padrão que estará utilizando. Existem várias possibilidades como Html4.1 transactional, strict e frameset, Xhtml1.0 transactional, strict e frameset e outros. No nosso caso usaremos o padrão Xhtml Strict 1.0.

4 e 11 html: marcador (tag) que indica o início efetivo da página html. As propriedades xml:lang e lang indicam a língua em que o documento está escrito. Use “pt-br” para português do Brasil. “en” para inglês.

5 e 8 head: bloco de cabeçalho. Dentro deste bloco iremos colocar as informações importantes sobre a página. Estes dados ajudarão os navegadores montarem o conteúdo de maneira que foi planejada pelo programador. E os motores de busca do google e outros obter informações para posicionar sua página corretamente. Os conteúdos colocados aqui não serão mostrados diretamente na página do navegador.

6 title: títudo da página. Texto que será colocada na barra de título do navegador e usada pelos motores dos buscadores para nomear o conteúdo de sua página.

7 meta content-type: indica detalhes de codificação de caracter para o navegador.

9 e 10 body: corpo ou conteúdo da página. Tudo que você quizer mostrar na área principal do navegador estará dentro deste bloco.

Todos os itens apresentados são obrigatórios em uma página Xhtml padrão.

Exemplo Prático

… (todo o cabeçalho igual ao exemplo anterior)<body><p>Olá Mundo! Esta é minha primeira página XHTML padronizada e funcional.</p></body></html>

Testar....

Salve o documento com extensão *.html. E pronto.-Tag <p> delimita um parágrafo do documento. Cada um dos parágrafos devem ser delimitados individualmente.

Entre em validator.w3.org selecione o seu arquivo e clique em “Check”. Se tudo estiver certo verá a mensagem “Congratulations”.

Algumas regras para conseguir a validação:

- Os caracteres maiúsculos e minúsculos são obrigatoriamente como apresentados. (HTML <> html)- Cuidado com o final do tag meta: …harset=iso-8859-1″ /> Observe que depois das aspas usamos espaço, barra e maior. O espaço é obrigatório.

- Cuidado ao usar o Ctrl+c e Ctrl+v do navegador: verifique que todas as aspas ” estão trocadas por aspas inglesas. Apague e use a aspa dupla que fica próxima ao número 1 do teclado. Recomendo pelo menos uma vez você mesmo digitar todo o código para se acostumar. Isso ajuda muito na memorização.- Todo o resto é obrigatório.

Head

No cabeçalho ou Head podemos colocar uma série de informações sobre o documento.

Com estes dados o navegador e os sistemas de busca podem entender melhor o conteúdo do documento.

O título do documento é a principal informação do cabeçalho.

Porém com o tag meta podemos definir uma série de outras informações úteis

Todas as tags devem ser escritas em minúsculo

Errado: <DIV><P>Aqui um texto</P></DIV> Certo: <div><p>Aqui um texto</p></div>

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>

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>

Elementos vazios

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

Exercício 1

Crie um documento XHTML que contenha uma lista ordenada com os seus 10 web sites favoritos. O título do documento deve ser: Meus Sites Favoritos

Exercício 2

Crie um documento XHTML que contém três listas ordenadas: sorvetes, tortas e gelatina. Cada lista ordenada deve conter uma lista não ordenada aninhada com pelos menos três sabores para cada sobremesa.

Exercício 3 Crie um documento XHTML contendo informações sobre 2 cursos de

informática em cada um dos estados do sudeste. Para cada curso, detalhe as seguintes informações: Site do curso (link), e-mail

de contato(link), informações sobre o curso.

O documento deve ser organizado, explorando todo o conteúdo aprendido neste curso, até o presente momento. É obrigatório o uso de: Título (h1, por exemplo); Parágrafo; Lista (ordenada ou não); Links.

O documento deve conter um índice informando todo o seu conteúdo. Este índice deve ser composto por links para os itens do documento.

Exercício 4

Validar as páginas no W3.org com

Caso tenha alguma página html de sua autoria que esteja fora do padrão Xhtml, identifique os problemas usando o validador.

Recommended