tecnologias web [email protected] prof. msc. juliano gomes weber ([email protected]) tecnologias web...
TRANSCRIPT
![Page 1: Tecnologias Web jgw@unijui.edu.br Prof. Msc. Juliano Gomes Weber (jgw@unijui.edu.br) Tecnologias Web Notas de Aula – Aula 10 1º Semestre - 2011 UNIJUÍ](https://reader036.vdocuments.mx/reader036/viewer/2022062700/552fc131497959413d8d5962/html5/thumbnails/1.jpg)
Tecnologias Web [email protected]
Prof. Msc. Juliano Gomes Weber([email protected])
Tecnologias Web
Notas de Aula – Aula 101º Semestre - 2011
UNIJUÍ – DETEC – Ciência da Computação
![Page 2: Tecnologias Web jgw@unijui.edu.br Prof. Msc. Juliano Gomes Weber (jgw@unijui.edu.br) Tecnologias Web Notas de Aula – Aula 10 1º Semestre - 2011 UNIJUÍ](https://reader036.vdocuments.mx/reader036/viewer/2022062700/552fc131497959413d8d5962/html5/thumbnails/2.jpg)
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.
![Page 3: Tecnologias Web jgw@unijui.edu.br Prof. Msc. Juliano Gomes Weber (jgw@unijui.edu.br) Tecnologias Web Notas de Aula – Aula 10 1º Semestre - 2011 UNIJUÍ](https://reader036.vdocuments.mx/reader036/viewer/2022062700/552fc131497959413d8d5962/html5/thumbnails/3.jpg)
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.
![Page 4: Tecnologias Web jgw@unijui.edu.br Prof. Msc. Juliano Gomes Weber (jgw@unijui.edu.br) Tecnologias Web Notas de Aula – Aula 10 1º Semestre - 2011 UNIJUÍ](https://reader036.vdocuments.mx/reader036/viewer/2022062700/552fc131497959413d8d5962/html5/thumbnails/4.jpg)
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.
![Page 5: Tecnologias Web jgw@unijui.edu.br Prof. Msc. Juliano Gomes Weber (jgw@unijui.edu.br) Tecnologias Web Notas de Aula – Aula 10 1º Semestre - 2011 UNIJUÍ](https://reader036.vdocuments.mx/reader036/viewer/2022062700/552fc131497959413d8d5962/html5/thumbnails/5.jpg)
![Page 6: Tecnologias Web jgw@unijui.edu.br Prof. Msc. Juliano Gomes Weber (jgw@unijui.edu.br) Tecnologias Web Notas de Aula – Aula 10 1º Semestre - 2011 UNIJUÍ](https://reader036.vdocuments.mx/reader036/viewer/2022062700/552fc131497959413d8d5962/html5/thumbnails/6.jpg)
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.
![Page 7: Tecnologias Web jgw@unijui.edu.br Prof. Msc. Juliano Gomes Weber (jgw@unijui.edu.br) Tecnologias Web Notas de Aula – Aula 10 1º Semestre - 2011 UNIJUÍ](https://reader036.vdocuments.mx/reader036/viewer/2022062700/552fc131497959413d8d5962/html5/thumbnails/7.jpg)
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.
![Page 8: Tecnologias Web jgw@unijui.edu.br Prof. Msc. Juliano Gomes Weber (jgw@unijui.edu.br) Tecnologias Web Notas de Aula – Aula 10 1º Semestre - 2011 UNIJUÍ](https://reader036.vdocuments.mx/reader036/viewer/2022062700/552fc131497959413d8d5962/html5/thumbnails/8.jpg)
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/
![Page 9: Tecnologias Web jgw@unijui.edu.br Prof. Msc. Juliano Gomes Weber (jgw@unijui.edu.br) Tecnologias Web Notas de Aula – Aula 10 1º Semestre - 2011 UNIJUÍ](https://reader036.vdocuments.mx/reader036/viewer/2022062700/552fc131497959413d8d5962/html5/thumbnails/9.jpg)
XHTML
XHTML 1.0 Strict XHTML 1.0 Transitional XHTML 1.0 Frameset
![Page 10: Tecnologias Web jgw@unijui.edu.br Prof. Msc. Juliano Gomes Weber (jgw@unijui.edu.br) Tecnologias Web Notas de Aula – Aula 10 1º Semestre - 2011 UNIJUÍ](https://reader036.vdocuments.mx/reader036/viewer/2022062700/552fc131497959413d8d5962/html5/thumbnails/10.jpg)
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.
![Page 11: Tecnologias Web jgw@unijui.edu.br Prof. Msc. Juliano Gomes Weber (jgw@unijui.edu.br) Tecnologias Web Notas de Aula – Aula 10 1º Semestre - 2011 UNIJUÍ](https://reader036.vdocuments.mx/reader036/viewer/2022062700/552fc131497959413d8d5962/html5/thumbnails/11.jpg)
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>
![Page 12: Tecnologias Web jgw@unijui.edu.br Prof. Msc. Juliano Gomes Weber (jgw@unijui.edu.br) Tecnologias Web Notas de Aula – Aula 10 1º Semestre - 2011 UNIJUÍ](https://reader036.vdocuments.mx/reader036/viewer/2022062700/552fc131497959413d8d5962/html5/thumbnails/12.jpg)
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.
![Page 13: Tecnologias Web jgw@unijui.edu.br Prof. Msc. Juliano Gomes Weber (jgw@unijui.edu.br) Tecnologias Web Notas de Aula – Aula 10 1º Semestre - 2011 UNIJUÍ](https://reader036.vdocuments.mx/reader036/viewer/2022062700/552fc131497959413d8d5962/html5/thumbnails/13.jpg)
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.
![Page 14: Tecnologias Web jgw@unijui.edu.br Prof. Msc. Juliano Gomes Weber (jgw@unijui.edu.br) Tecnologias Web Notas de Aula – Aula 10 1º Semestre - 2011 UNIJUÍ](https://reader036.vdocuments.mx/reader036/viewer/2022062700/552fc131497959413d8d5962/html5/thumbnails/14.jpg)
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.
![Page 15: Tecnologias Web jgw@unijui.edu.br Prof. Msc. Juliano Gomes Weber (jgw@unijui.edu.br) Tecnologias Web Notas de Aula – Aula 10 1º Semestre - 2011 UNIJUÍ](https://reader036.vdocuments.mx/reader036/viewer/2022062700/552fc131497959413d8d5962/html5/thumbnails/15.jpg)
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.
![Page 16: Tecnologias Web jgw@unijui.edu.br Prof. Msc. Juliano Gomes Weber (jgw@unijui.edu.br) Tecnologias Web Notas de Aula – Aula 10 1º Semestre - 2011 UNIJUÍ](https://reader036.vdocuments.mx/reader036/viewer/2022062700/552fc131497959413d8d5962/html5/thumbnails/16.jpg)
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.
![Page 17: Tecnologias Web jgw@unijui.edu.br Prof. Msc. Juliano Gomes Weber (jgw@unijui.edu.br) Tecnologias Web Notas de Aula – Aula 10 1º Semestre - 2011 UNIJUÍ](https://reader036.vdocuments.mx/reader036/viewer/2022062700/552fc131497959413d8d5962/html5/thumbnails/17.jpg)
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>
![Page 18: Tecnologias Web jgw@unijui.edu.br Prof. Msc. Juliano Gomes Weber (jgw@unijui.edu.br) Tecnologias Web Notas de Aula – Aula 10 1º Semestre - 2011 UNIJUÍ](https://reader036.vdocuments.mx/reader036/viewer/2022062700/552fc131497959413d8d5962/html5/thumbnails/18.jpg)
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”.
![Page 19: Tecnologias Web jgw@unijui.edu.br Prof. Msc. Juliano Gomes Weber (jgw@unijui.edu.br) Tecnologias Web Notas de Aula – Aula 10 1º Semestre - 2011 UNIJUÍ](https://reader036.vdocuments.mx/reader036/viewer/2022062700/552fc131497959413d8d5962/html5/thumbnails/19.jpg)
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.
![Page 20: Tecnologias Web jgw@unijui.edu.br Prof. Msc. Juliano Gomes Weber (jgw@unijui.edu.br) Tecnologias Web Notas de Aula – Aula 10 1º Semestre - 2011 UNIJUÍ](https://reader036.vdocuments.mx/reader036/viewer/2022062700/552fc131497959413d8d5962/html5/thumbnails/20.jpg)
- 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.
![Page 21: Tecnologias Web jgw@unijui.edu.br Prof. Msc. Juliano Gomes Weber (jgw@unijui.edu.br) Tecnologias Web Notas de Aula – Aula 10 1º Semestre - 2011 UNIJUÍ](https://reader036.vdocuments.mx/reader036/viewer/2022062700/552fc131497959413d8d5962/html5/thumbnails/21.jpg)
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
![Page 22: Tecnologias Web jgw@unijui.edu.br Prof. Msc. Juliano Gomes Weber (jgw@unijui.edu.br) Tecnologias Web Notas de Aula – Aula 10 1º Semestre - 2011 UNIJUÍ](https://reader036.vdocuments.mx/reader036/viewer/2022062700/552fc131497959413d8d5962/html5/thumbnails/22.jpg)
<meta name=”author” content=”Prof. Luís Eduardo” /> O autor do documento.
<meta name=”copyright” content=”© 1996 Indústria Ltda ” /> Questões de copyright
<meta name=”keywords” content=”trabalho,mudanças,java” /> Importantíssimo: palavras chave para o motor de busca do Google e Yahoo.
<meta name=”date” content=”1994-11-06T08:49:37+00:00″ /> Data de criação formatada conforme orientador [RFC2616 sessão 3.3] disponível em http://www.ietf.org/rfc/rfc2616.txt
<meta name=”description” content=”Roteiro da Aula número 2″ /> Descrição do conteúdo da página
![Page 23: Tecnologias Web jgw@unijui.edu.br Prof. Msc. Juliano Gomes Weber (jgw@unijui.edu.br) Tecnologias Web Notas de Aula – Aula 10 1º Semestre - 2011 UNIJUÍ](https://reader036.vdocuments.mx/reader036/viewer/2022062700/552fc131497959413d8d5962/html5/thumbnails/23.jpg)
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>
![Page 24: Tecnologias Web jgw@unijui.edu.br Prof. Msc. Juliano Gomes Weber (jgw@unijui.edu.br) Tecnologias Web Notas de Aula – Aula 10 1º Semestre - 2011 UNIJUÍ](https://reader036.vdocuments.mx/reader036/viewer/2022062700/552fc131497959413d8d5962/html5/thumbnails/24.jpg)
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>
![Page 25: Tecnologias Web jgw@unijui.edu.br Prof. Msc. Juliano Gomes Weber (jgw@unijui.edu.br) Tecnologias Web Notas de Aula – Aula 10 1º Semestre - 2011 UNIJUÍ](https://reader036.vdocuments.mx/reader036/viewer/2022062700/552fc131497959413d8d5962/html5/thumbnails/25.jpg)
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>
![Page 26: Tecnologias Web jgw@unijui.edu.br Prof. Msc. Juliano Gomes Weber (jgw@unijui.edu.br) Tecnologias Web Notas de Aula – Aula 10 1º Semestre - 2011 UNIJUÍ](https://reader036.vdocuments.mx/reader036/viewer/2022062700/552fc131497959413d8d5962/html5/thumbnails/26.jpg)
Elementos vazios
Elementos vazios devem ter uma tag de fechamento ou a tag de abertura deve terminar com />. Como exemplo, <br /> ou <hr></hr>.
![Page 27: Tecnologias Web jgw@unijui.edu.br Prof. Msc. Juliano Gomes Weber (jgw@unijui.edu.br) Tecnologias Web Notas de Aula – Aula 10 1º Semestre - 2011 UNIJUÍ](https://reader036.vdocuments.mx/reader036/viewer/2022062700/552fc131497959413d8d5962/html5/thumbnails/27.jpg)
![Page 28: Tecnologias Web jgw@unijui.edu.br Prof. Msc. Juliano Gomes Weber (jgw@unijui.edu.br) Tecnologias Web Notas de Aula – Aula 10 1º Semestre - 2011 UNIJUÍ](https://reader036.vdocuments.mx/reader036/viewer/2022062700/552fc131497959413d8d5962/html5/thumbnails/28.jpg)
![Page 29: Tecnologias Web jgw@unijui.edu.br Prof. Msc. Juliano Gomes Weber (jgw@unijui.edu.br) Tecnologias Web Notas de Aula – Aula 10 1º Semestre - 2011 UNIJUÍ](https://reader036.vdocuments.mx/reader036/viewer/2022062700/552fc131497959413d8d5962/html5/thumbnails/29.jpg)
![Page 30: Tecnologias Web jgw@unijui.edu.br Prof. Msc. Juliano Gomes Weber (jgw@unijui.edu.br) Tecnologias Web Notas de Aula – Aula 10 1º Semestre - 2011 UNIJUÍ](https://reader036.vdocuments.mx/reader036/viewer/2022062700/552fc131497959413d8d5962/html5/thumbnails/30.jpg)
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
![Page 31: Tecnologias Web jgw@unijui.edu.br Prof. Msc. Juliano Gomes Weber (jgw@unijui.edu.br) Tecnologias Web Notas de Aula – Aula 10 1º Semestre - 2011 UNIJUÍ](https://reader036.vdocuments.mx/reader036/viewer/2022062700/552fc131497959413d8d5962/html5/thumbnails/31.jpg)
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.
![Page 32: Tecnologias Web jgw@unijui.edu.br Prof. Msc. Juliano Gomes Weber (jgw@unijui.edu.br) Tecnologias Web Notas de Aula – Aula 10 1º Semestre - 2011 UNIJUÍ](https://reader036.vdocuments.mx/reader036/viewer/2022062700/552fc131497959413d8d5962/html5/thumbnails/32.jpg)
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.
![Page 33: Tecnologias Web jgw@unijui.edu.br Prof. Msc. Juliano Gomes Weber (jgw@unijui.edu.br) Tecnologias Web Notas de Aula – Aula 10 1º Semestre - 2011 UNIJUÍ](https://reader036.vdocuments.mx/reader036/viewer/2022062700/552fc131497959413d8d5962/html5/thumbnails/33.jpg)
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.