![Page 1: PROGRAMAÇÃO WEB AULA XHTML Prof. Gustavo Linhares Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader035.vdocuments.com.br/reader035/viewer/2022062818/570638491a28abb8238f4c0e/html5/thumbnails/1.jpg)
PROGRAMAÇÃO WEB
AULA XHTMLProf. Gustavo Linhares
Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais.
![Page 2: PROGRAMAÇÃO WEB AULA XHTML Prof. Gustavo Linhares Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader035.vdocuments.com.br/reader035/viewer/2022062818/570638491a28abb8238f4c0e/html5/thumbnails/2.jpg)
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.
![Page 3: PROGRAMAÇÃO WEB AULA XHTML Prof. Gustavo Linhares Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader035.vdocuments.com.br/reader035/viewer/2022062818/570638491a28abb8238f4c0e/html5/thumbnails/3.jpg)
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.
![Page 4: PROGRAMAÇÃO WEB AULA XHTML Prof. Gustavo Linhares Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader035.vdocuments.com.br/reader035/viewer/2022062818/570638491a28abb8238f4c0e/html5/thumbnails/4.jpg)
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.
![Page 5: PROGRAMAÇÃO WEB AULA XHTML Prof. Gustavo Linhares Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader035.vdocuments.com.br/reader035/viewer/2022062818/570638491a28abb8238f4c0e/html5/thumbnails/5.jpg)
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.
![Page 6: PROGRAMAÇÃO WEB AULA XHTML Prof. Gustavo Linhares Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader035.vdocuments.com.br/reader035/viewer/2022062818/570638491a28abb8238f4c0e/html5/thumbnails/6.jpg)
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.
![Page 7: PROGRAMAÇÃO WEB AULA XHTML Prof. Gustavo Linhares Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader035.vdocuments.com.br/reader035/viewer/2022062818/570638491a28abb8238f4c0e/html5/thumbnails/7.jpg)
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".
![Page 8: PROGRAMAÇÃO WEB AULA XHTML Prof. Gustavo Linhares Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader035.vdocuments.com.br/reader035/viewer/2022062818/570638491a28abb8238f4c0e/html5/thumbnails/8.jpg)
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.
![Page 9: PROGRAMAÇÃO WEB AULA XHTML Prof. Gustavo Linhares Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader035.vdocuments.com.br/reader035/viewer/2022062818/570638491a28abb8238f4c0e/html5/thumbnails/9.jpg)
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.
![Page 10: PROGRAMAÇÃO WEB AULA XHTML Prof. Gustavo Linhares Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader035.vdocuments.com.br/reader035/viewer/2022062818/570638491a28abb8238f4c0e/html5/thumbnails/10.jpg)
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.
![Page 11: PROGRAMAÇÃO WEB AULA XHTML Prof. Gustavo Linhares Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader035.vdocuments.com.br/reader035/viewer/2022062818/570638491a28abb8238f4c0e/html5/thumbnails/11.jpg)
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.
![Page 12: PROGRAMAÇÃO WEB AULA XHTML Prof. Gustavo Linhares Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader035.vdocuments.com.br/reader035/viewer/2022062818/570638491a28abb8238f4c0e/html5/thumbnails/12.jpg)
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.
![Page 13: PROGRAMAÇÃO WEB AULA XHTML Prof. Gustavo Linhares Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader035.vdocuments.com.br/reader035/viewer/2022062818/570638491a28abb8238f4c0e/html5/thumbnails/13.jpg)
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".
![Page 14: PROGRAMAÇÃO WEB AULA XHTML Prof. Gustavo Linhares Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader035.vdocuments.com.br/reader035/viewer/2022062818/570638491a28abb8238f4c0e/html5/thumbnails/14.jpg)
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.
![Page 15: PROGRAMAÇÃO WEB AULA XHTML Prof. Gustavo Linhares Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader035.vdocuments.com.br/reader035/viewer/2022062818/570638491a28abb8238f4c0e/html5/thumbnails/15.jpg)
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.
![Page 16: PROGRAMAÇÃO WEB AULA XHTML Prof. Gustavo Linhares Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader035.vdocuments.com.br/reader035/viewer/2022062818/570638491a28abb8238f4c0e/html5/thumbnails/16.jpg)
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>
![Page 17: PROGRAMAÇÃO WEB AULA XHTML Prof. Gustavo Linhares Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader035.vdocuments.com.br/reader035/viewer/2022062818/570638491a28abb8238f4c0e/html5/thumbnails/17.jpg)
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>
![Page 18: PROGRAMAÇÃO WEB AULA XHTML Prof. Gustavo Linhares Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader035.vdocuments.com.br/reader035/viewer/2022062818/570638491a28abb8238f4c0e/html5/thumbnails/18.jpg)
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>.
![Page 19: PROGRAMAÇÃO WEB AULA XHTML Prof. Gustavo Linhares Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader035.vdocuments.com.br/reader035/viewer/2022062818/570638491a28abb8238f4c0e/html5/thumbnails/19.jpg)
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>
![Page 20: PROGRAMAÇÃO WEB AULA XHTML Prof. Gustavo Linhares Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader035.vdocuments.com.br/reader035/viewer/2022062818/570638491a28abb8238f4c0e/html5/thumbnails/20.jpg)
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>
![Page 21: PROGRAMAÇÃO WEB AULA XHTML Prof. Gustavo Linhares Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader035.vdocuments.com.br/reader035/viewer/2022062818/570638491a28abb8238f4c0e/html5/thumbnails/21.jpg)
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 ">
![Page 22: PROGRAMAÇÃO WEB AULA XHTML Prof. Gustavo Linhares Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader035.vdocuments.com.br/reader035/viewer/2022062818/570638491a28abb8238f4c0e/html5/thumbnails/22.jpg)
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 " />
![Page 23: PROGRAMAÇÃO WEB AULA XHTML Prof. Gustavo Linhares Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader035.vdocuments.com.br/reader035/viewer/2022062818/570638491a28abb8238f4c0e/html5/thumbnails/23.jpg)
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">
![Page 24: PROGRAMAÇÃO WEB AULA XHTML Prof. Gustavo Linhares Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader035.vdocuments.com.br/reader035/viewer/2022062818/570638491a28abb8238f4c0e/html5/thumbnails/24.jpg)
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">
![Page 25: PROGRAMAÇÃO WEB AULA XHTML Prof. Gustavo Linhares Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader035.vdocuments.com.br/reader035/viewer/2022062818/570638491a28abb8238f4c0e/html5/thumbnails/25.jpg)
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
![Page 26: PROGRAMAÇÃO WEB AULA XHTML Prof. Gustavo Linhares Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader035.vdocuments.com.br/reader035/viewer/2022062818/570638491a28abb8238f4c0e/html5/thumbnails/26.jpg)
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 -->
![Page 27: PROGRAMAÇÃO WEB AULA XHTML Prof. Gustavo Linhares Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader035.vdocuments.com.br/reader035/viewer/2022062818/570638491a28abb8238f4c0e/html5/thumbnails/27.jpg)
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:
![Page 28: PROGRAMAÇÃO WEB AULA XHTML Prof. Gustavo Linhares Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader035.vdocuments.com.br/reader035/viewer/2022062818/570638491a28abb8238f4c0e/html5/thumbnails/28.jpg)
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.
![Page 29: PROGRAMAÇÃO WEB AULA XHTML Prof. Gustavo Linhares Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader035.vdocuments.com.br/reader035/viewer/2022062818/570638491a28abb8238f4c0e/html5/thumbnails/29.jpg)
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.
![Page 30: PROGRAMAÇÃO WEB AULA XHTML Prof. Gustavo Linhares Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader035.vdocuments.com.br/reader035/viewer/2022062818/570638491a28abb8238f4c0e/html5/thumbnails/30.jpg)
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
![Page 31: PROGRAMAÇÃO WEB AULA XHTML Prof. Gustavo Linhares Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader035.vdocuments.com.br/reader035/viewer/2022062818/570638491a28abb8238f4c0e/html5/thumbnails/31.jpg)
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
![Page 32: PROGRAMAÇÃO WEB AULA XHTML Prof. Gustavo Linhares Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader035.vdocuments.com.br/reader035/viewer/2022062818/570638491a28abb8238f4c0e/html5/thumbnails/32.jpg)
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.
![Page 33: PROGRAMAÇÃO WEB AULA XHTML Prof. Gustavo Linhares Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader035.vdocuments.com.br/reader035/viewer/2022062818/570638491a28abb8238f4c0e/html5/thumbnails/33.jpg)
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.
![Page 34: PROGRAMAÇÃO WEB AULA XHTML Prof. Gustavo Linhares Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader035.vdocuments.com.br/reader035/viewer/2022062818/570638491a28abb8238f4c0e/html5/thumbnails/34.jpg)
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.
![Page 35: PROGRAMAÇÃO WEB AULA XHTML Prof. Gustavo Linhares Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader035.vdocuments.com.br/reader035/viewer/2022062818/570638491a28abb8238f4c0e/html5/thumbnails/35.jpg)
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)
![Page 36: PROGRAMAÇÃO WEB AULA XHTML Prof. Gustavo Linhares Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader035.vdocuments.com.br/reader035/viewer/2022062818/570638491a28abb8238f4c0e/html5/thumbnails/36.jpg)
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
![Page 37: PROGRAMAÇÃO WEB AULA XHTML Prof. Gustavo Linhares Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader035.vdocuments.com.br/reader035/viewer/2022062818/570638491a28abb8238f4c0e/html5/thumbnails/37.jpg)
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)
![Page 38: PROGRAMAÇÃO WEB AULA XHTML Prof. Gustavo Linhares Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader035.vdocuments.com.br/reader035/viewer/2022062818/570638491a28abb8238f4c0e/html5/thumbnails/38.jpg)
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>
![Page 39: PROGRAMAÇÃO WEB AULA XHTML Prof. Gustavo Linhares Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader035.vdocuments.com.br/reader035/viewer/2022062818/570638491a28abb8238f4c0e/html5/thumbnails/39.jpg)
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.
![Page 40: PROGRAMAÇÃO WEB AULA XHTML Prof. Gustavo Linhares Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader035.vdocuments.com.br/reader035/viewer/2022062818/570638491a28abb8238f4c0e/html5/thumbnails/40.jpg)
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
![Page 41: PROGRAMAÇÃO WEB AULA XHTML Prof. Gustavo Linhares Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader035.vdocuments.com.br/reader035/viewer/2022062818/570638491a28abb8238f4c0e/html5/thumbnails/41.jpg)
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>
![Page 42: PROGRAMAÇÃO WEB AULA XHTML Prof. Gustavo Linhares Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader035.vdocuments.com.br/reader035/viewer/2022062818/570638491a28abb8238f4c0e/html5/thumbnails/42.jpg)
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-->
![Page 43: PROGRAMAÇÃO WEB AULA XHTML Prof. Gustavo Linhares Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader035.vdocuments.com.br/reader035/viewer/2022062818/570638491a28abb8238f4c0e/html5/thumbnails/43.jpg)
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>
![Page 44: PROGRAMAÇÃO WEB AULA XHTML Prof. Gustavo Linhares Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader035.vdocuments.com.br/reader035/viewer/2022062818/570638491a28abb8238f4c0e/html5/thumbnails/44.jpg)
Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais.
Quebra de linha
<br />
![Page 45: PROGRAMAÇÃO WEB AULA XHTML Prof. Gustavo Linhares Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader035.vdocuments.com.br/reader035/viewer/2022062818/570638491a28abb8238f4c0e/html5/thumbnails/45.jpg)
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
![Page 46: PROGRAMAÇÃO WEB AULA XHTML Prof. Gustavo Linhares Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader035.vdocuments.com.br/reader035/viewer/2022062818/570638491a28abb8238f4c0e/html5/thumbnails/46.jpg)
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>
![Page 47: PROGRAMAÇÃO WEB AULA XHTML Prof. Gustavo Linhares Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader035.vdocuments.com.br/reader035/viewer/2022062818/570638491a28abb8238f4c0e/html5/thumbnails/47.jpg)
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>
![Page 48: PROGRAMAÇÃO WEB AULA XHTML Prof. Gustavo Linhares Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader035.vdocuments.com.br/reader035/viewer/2022062818/570638491a28abb8238f4c0e/html5/thumbnails/48.jpg)
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.
![Page 49: PROGRAMAÇÃO WEB AULA XHTML Prof. Gustavo Linhares Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader035.vdocuments.com.br/reader035/viewer/2022062818/570638491a28abb8238f4c0e/html5/thumbnails/49.jpg)
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>
![Page 50: PROGRAMAÇÃO WEB AULA XHTML Prof. Gustavo Linhares Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader035.vdocuments.com.br/reader035/viewer/2022062818/570638491a28abb8238f4c0e/html5/thumbnails/50.jpg)
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>
![Page 51: PROGRAMAÇÃO WEB AULA XHTML Prof. Gustavo Linhares Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader035.vdocuments.com.br/reader035/viewer/2022062818/570638491a28abb8238f4c0e/html5/thumbnails/51.jpg)
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
![Page 52: PROGRAMAÇÃO WEB AULA XHTML Prof. Gustavo Linhares Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader035.vdocuments.com.br/reader035/viewer/2022062818/570638491a28abb8238f4c0e/html5/thumbnails/52.jpg)
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>
![Page 53: PROGRAMAÇÃO WEB AULA XHTML Prof. Gustavo Linhares Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader035.vdocuments.com.br/reader035/viewer/2022062818/570638491a28abb8238f4c0e/html5/thumbnails/53.jpg)
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
![Page 54: PROGRAMAÇÃO WEB AULA XHTML Prof. Gustavo Linhares Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader035.vdocuments.com.br/reader035/viewer/2022062818/570638491a28abb8238f4c0e/html5/thumbnails/54.jpg)
Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais.
Tabelas<table width="200" border="1"> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr></table>
![Page 55: PROGRAMAÇÃO WEB AULA XHTML Prof. Gustavo Linhares Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader035.vdocuments.com.br/reader035/viewer/2022062818/570638491a28abb8238f4c0e/html5/thumbnails/55.jpg)
Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais.
Tabelas
![Page 56: PROGRAMAÇÃO WEB AULA XHTML Prof. Gustavo Linhares Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader035.vdocuments.com.br/reader035/viewer/2022062818/570638491a28abb8238f4c0e/html5/thumbnails/56.jpg)
Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais.
Divs
<div>Content for New Div Tag Goes Here</div>
![Page 57: PROGRAMAÇÃO WEB AULA XHTML Prof. Gustavo Linhares Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader035.vdocuments.com.br/reader035/viewer/2022062818/570638491a28abb8238f4c0e/html5/thumbnails/57.jpg)
Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais.
Divs
![Page 58: PROGRAMAÇÃO WEB AULA XHTML Prof. Gustavo Linhares Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader035.vdocuments.com.br/reader035/viewer/2022062818/570638491a28abb8238f4c0e/html5/thumbnails/58.jpg)
Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais.
Links
<a href="#">Clique aqui</a>
![Page 59: PROGRAMAÇÃO WEB AULA XHTML Prof. Gustavo Linhares Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader035.vdocuments.com.br/reader035/viewer/2022062818/570638491a28abb8238f4c0e/html5/thumbnails/59.jpg)
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>
![Page 60: PROGRAMAÇÃO WEB AULA XHTML Prof. Gustavo Linhares Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader035.vdocuments.com.br/reader035/viewer/2022062818/570638491a28abb8238f4c0e/html5/thumbnails/60.jpg)
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>
![Page 61: PROGRAMAÇÃO WEB AULA XHTML Prof. Gustavo Linhares Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader035.vdocuments.com.br/reader035/viewer/2022062818/570638491a28abb8238f4c0e/html5/thumbnails/61.jpg)
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>
![Page 62: PROGRAMAÇÃO WEB AULA XHTML Prof. Gustavo Linhares Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader035.vdocuments.com.br/reader035/viewer/2022062818/570638491a28abb8238f4c0e/html5/thumbnails/62.jpg)
Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais.
Formulários – Text field
![Page 63: PROGRAMAÇÃO WEB AULA XHTML Prof. Gustavo Linhares Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader035.vdocuments.com.br/reader035/viewer/2022062818/570638491a28abb8238f4c0e/html5/thumbnails/63.jpg)
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>
![Page 64: PROGRAMAÇÃO WEB AULA XHTML Prof. Gustavo Linhares Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader035.vdocuments.com.br/reader035/viewer/2022062818/570638491a28abb8238f4c0e/html5/thumbnails/64.jpg)
Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais.
Formulários – Text area