UNIJUÍ – DETEC – Ciência da Computação Prof. Msc. Juliano Gomes Weber ([email protected]) Tecnologias Web Notas de Aula – Aula 10 1º Semestre - 2011 Tecnologias Web [email protected] 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 html 2 PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” 3 “http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.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 <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-1106T08: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 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. O documento deve ser organizado, explorando todo o conteúdo aprendido neste curso, até o presente momento. É obrigatório o uso de: Para cada curso, detalhe as seguintes informações: Site do curso (link), e-mail de contato(link), informações sobre o curso. 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.
Download
