Introdução à Tecnologia Web HTML  HyperText Markup Language XHTML – eXtensible HyperText Markup Language Estrutura Básica do Documento HTML Profª MSc. Elizabete Munzlinger www.elizabete.com.br
Profª MSc. Elizabete Munzlinger www.elizabete.com.br Estrutura Básica do Documento HTML Índice 1 - O que é mesmo HTML? .......................................................................................... 2 2 – E o que é XHTML? ................................................................................................. 2 3 – O que são tags HTML? ........................................................................................... 2 4 - O que são elementos HTML?................................................................................... 2 5 – Estrutura básica do documento............................................................................... 3 Diferenças entre HTML 4.01 e XHTML 1.0 deste capítulo................................................ 3 Referências Bibliográficas............................................................................................. 4 1
Profª MSc. Elizabete Munzlinger www.elizabete.com.br 1  O que é mesmo HTML? HTML é uma linguagem de marcação para escrever as páginas web.
• HTML significa HypertText Markup Language (Linguagem de Marcação de
Hypertexto).
• HTML não é uma linguagem de programação, é uma linguagem de marcação.
• Uma linguagem de marcação é um conjunto de etiquetas de marcação (tags) usadas para
definir os elementos existentes na página.
• HTML 4.01 é uma recomendação da W3C desde 24 de dezembro de 1999.
2 – E o que é XHTML? XHTML é uma reformulação da linguagem HTML 4.01, combinado com as regras rígidas de
escrita da linguagem XML. Também é usado para escrever as páginas web, tornando-as acessíveis em
diversos dispositivos.
• XHTML significa Extensible HyperText Markup Language (Linguagem de Marcação de
Texto Extensível).
• XHTML é quase idêntico ao do HTML 4.01, com a diferença de ser uma versão com
escrita de código mas rigorosa e limpa.
• XHTML 1.0 é uma recomendação da W3C desde 26 de janeiro de 2000.
OBS: Como XHTML é baseada em HTML, veremos o conteúdo de HTML, e todas as
diferenças de uso dos elementos para o XHTML serão citados ao final de cada documento.
3 – O que são tags HTML/XHTML? Tags são etiquetas usadas para definir os elementos que compõem um site. Servem para definir
a estrutura de uma página. As tags garantem que o browser consiga interpretar de forma correta o site,
identificando o tipo de documento e os elementos que ele deve apresentar para o usuário.
• São palavras-chave precedidos de um caracter "<" (menor que) e seguido por um
caracter ">" (maior que)... Ex: <body>.
• Normalmente vêm em pares como <b> e </ b>, chamadas de “tag de abertura” e “tag
de fechamento”.
• Tag de fechamento tem o mesmo nome da Tag de abertura, precedido do caracter "/".
Ex: <body> </body>
• A tag de abertura indica onde começa sua área de influência, enquanto o seu
correspondente, tag de fechamento, indica onde termina a área de influência.
• Também existem “tags vazias”. São assim chamadas por que não tem a correspondente
de abertura e de fechamento.
• Tags normalmente possuem atributos, que definem detalhes de configuração. Alguns
atributos podem repetir para diversas tags, mas algumas delas possuem atributos
próprios.
• As tags podem estar em diferentes sintaxes. Exemplo:
<tag> ... </tag>
tag de abertura e tag de fechamento
<tag atributos > ... </tag>
tag de abertura com atributos e tag de fechamento
<tag>
tag vazia
<tag atributos>
tag vazia com atributos
4  O que são elementos HTML/XHTML? A linguagem de marcação HTML define um documento com “marcas” ou “marcações”. Estas
marcações, indicam ao browser que existe um elemento que deve ser apresentado. Os elementos são
todas as estruturas visuais que podemos inserir em uma página: textos, links, tabelas, listas, imagens,
vídeos, âncoras, elementos pré-formatados, parágrafos, títulos, etc. Um elemento é formado pelo
2
Profª MSc. Elizabete Munzlinger www.elizabete.com.br conjunto de tag com ou sem atributos e mais o conteúdo influenciado. O conjunto de elementos de um
documento HTML formam a estrutura da página.
Um elemento HTML pode ter as seguintes sintaxes:
<tag_vazia>
<tag_vazia atributo1=”valor” atributo2=”valor”>
<tag_de_abertura>Conteúdo</tag_de_fechamento>
<tag_de_abertura atributo1=”valor” atributo2=”valor”>Conteúdo</tag_de_fechamento>
5 – Estrutura básica do documento Todo documento deve conter os elementos que definem a sua estrutura básica. Esta estrutura
se refere a um “documento bem formado”, segundo os padrões W3C. Evidente que dentro de cada
conjunto de elementos apresentados abaixo, temos outros elementos.
A endentação é usada apenas para organizar o código-fonte. Use a tabulação ou 2 espaços.
Estrutura mínima de um documento bem formado:
1 <!DOCTYPE ...>
<- não é tag do HTML
2 <html>
3
<head>
4
<title>
Aqui entra o título do documento
</title>
Informações lógicas sobre o documento
</head>
5
<body>
Todo o conteúdo que será exposto pelo browser...
</body>
</html>
1 – Declaração DOCTYPE é uma instrução para o navegador sobre qual versão da linguagem
de marcação a página está escrita.
2 – Definição do documento HTML
3 – Seção do cabeçalho contém informações lógicas sobre o documento.
4 – Titulo da página.
5 – Seção do corpo contém todo o conteúdo apresentado pelo browser.
OBS: Cada item acima será visto em detalhes nos próximos documentos
Diferenças entre HTML 4.01 e XHTML 1.0 deste capítulo 1 – A estrutura básica com elemento raiz e instrução DOCTYPE é recomendado em HTML e obrigatório em XHTML. 2 – Em XHTML todas as tags vazias devem ter marca de fim (barra): <meta name=”author” content=”Joao” />
<link rel="stylesheet" type="text/css" href="theme.css" />
<hr />
<br />




3 – Em XHTML tags/atributos e valores devem ser escritos em minúsculo. Os valores devem estar sempre entre aspas. Essa característica é recomendada também para documentos HTML. Abandone 1 – Documentos HTML que não possuem a estrutura básica com elemento raiz e instrução DOCTYPE. 2 – Documentos HTML com elementos, atributos e valores escritos em maiúsculas e minúsculas. 3
Profª MSc. Elizabete Munzlinger www.elizabete.com.br Referências Bibliográficas 1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
MACEDO, Marcelo da Silva. Construindo sites adotando padrões Web. Rio de Janeiro: Ciência Moderna, 2004. MARCONDES, Christian Alfim. HTML fundamental 4.0. São Paulo: Érica, 2005. CARDOSO, Márdel. Desenvolvimento web para o ensino superior. Rio de Janeiro: Axcel Books, 2004. ALBERTIN, Alberto Luiz. Comércio eletrônico : modelo, aspectos e contribuições de sua aplicação. São Paulo: Atlas, 2004. W3C. Word Wide Web Consortium. Disponível online em: [http://www.w3.org/] Webdesign. Revista Webdesign. Rio de Janeiro: Artecom, 2010. Ti Digital. Revista TI Digital. Rio de Janeiro: Artecom, 2010. HTML. HTML Working Group. Disponível online em: [http://www.w3.org/html/wg/] HTML. W3C Recomendation: HTML 4.01 Specification. Disponível online em: [http://www.w3.org/TR/html4/] HTML. HTML 5 – In Revision. Disponível online em: [http://dev.w3.org/html5/spec/Overview.html] XHTML. W3C Recomendation: XHTML 1.0 The Extensible HyperText Markup Language (Second Edition). A Reformulation of HTML 4 in XML 1.0. Disponível online em: [http://www.w3.org/TR/xhtml1/] HTML. Overview of HTML. Disponível online em: [http://www.w3.org/html/] 4