Estrutura de um documento (X)HTML

Actualmente um documento HTML é composto por uma série de elementos HTML formatados por CSS. Em XHTML(normalmente referimos como HTML o que é XHTML) existe uma clara distinção entre estrutura e forma.

O XHTML

O xhtml é uma versão mais restrita e limpa do HTML e é definido como uma aplicação xml. O XHTML é uma combinação de HTML com XML, uma depuração do HTML tendo em conta a organização estrutural do XML.
Porquê XHTML?
Dado o estado caótico do HTML, foi preciso reformular a linguagem, até para servir diferentes browsers com diferentes formas de render. Criou-se uma linguagem com regras que pudessem ser lidas e rendidas por motores capazes de entender XML, que é uma linguagem depurada e organizada.
O XHTML exige uma sintaxe limpa e apresenta as seguintes características:
- O valor dos atributos deve estar entre "aspas";
- A minimização não é permitida;
- O atribuo id="" substitui o atributo name="";
- Os seus elementos têm que ser claramente aninhados (nested);
Desta forma

<b><i>Este é um texto a bod e itálico</i></b>
E não desta

<b><i> Este é um texto a bod e itálico</b></i>
Os seus elementos devem ser sempre fechados

<p>Este é um parágrafo</p>
Os elementos vazios, também, devem ser fechados e com um espaço extra antes da barra

<br /> <hr /> <img src="imagem.jpg" />
Os seus elementos devem ser sempre em minúsculas

<p> <h> <i> <hr /> <br /> <span> <em> etc.
- A DTD (Document Type Definition) do XHTML define os elementos mandatórios.
A declaração DOCTYPE define o tipo de documento, o que tem a ver com a forma como o browser vai ler e apresentar o documento.
A DTD especifica a sintaxe do documento em SGML. Existem três tipos de DTD em XHTML:
- Transitional, quando queremos tirar partido das vantagens da apresentação em HTML e queremos suportar os browsers mais antigos que não suportam CSS;
- Strict, quando temos uma linguagem de marcação clara e concisa, livre de conteúdo estilizado por HTML, antes tratado por CSS;
- Frameset, quando queremos dividir as janelas do browser em duas ou mais frames.
A estrutura do conteúdo deve estar de acordo com a sua DTD, de outra forma a página não será validada.
Um documento XHTML simples

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "www.w3.org—xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Webdesign</title>
<link rel="stylesheet" type="text/css" href="…/css/exempl.css"/>
</head>
<body>
</body>
</html>

Construção de uma página (Box Model)

O elemento principal na definição da estrutura de um documento (X)HTML é a tag <div> que nos permite organizar o conteúdo. Posteriormente, com CSS, iremos formatar e posicionar os elementos. De notar que estas duas etapas são realizadas em separado:
1º - A organização do contudo com as DIVs, no chamado Box Model;
2º - A formatação e posicionamento das DIVs e do conteúdo.

Vejamos um exemplo da ajuda do Dreamweaver que contém, numa página uma div container, uma div sidebar e uma div main content.

<div id="container">

<div id="sidebar">
<h3>Sidebar Content</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis.</p>
</div>


<div id="mainContent">
<h1> Main Content </h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum.</p>
<p>Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
<h2>H2 level heading </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam.</p>
</div>
</div>

Este código sem CSS, no seu fluxo normal, vai apresentar-se tal como o vemos no html: a div sidebar no topo da janela browser e a div main content logo abaixo, ocupando à largura toda a janela do browser.

Com a definição da div container com CSS, o conteúdo deixa de ocupar toda a largura do browser e passa a estar numa "caixa" com 780 pixeis de largura, sem margem na vertical e centrada na horizontal, com uma moldura sólida de cor preta e com o texto alinhado à esquerda.

#container {
width: 780px;
background: #FFFFFF;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
}

A div sidebar vai posicionar-se à esquerda, com 200 pixeis de largura, com um fundo cinza e com padding definido.

#sidebar {
float: left;
width: 200px;
background: #EBEBEB;
padding: 15px 10px 15px 20px;
}

A definição da DIV mainContent finaliza o layout. De notar que a DIV posiciona-se à direita da DIV sidebar por ter uma margem esquerda de 250 pixeis, não necessitando, por isso, de um float: right.

#mainContent {
margin: 0 0 0 250px;
padding: 0 20px 20px 20px;
}

O código completo com a CSS embebida no documento.

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#container {
width: 780px;
background: #FFFFFF;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
}
#sidebar {
float: left;
width: 200px;
background: #EBEBEB;
padding: 15px 10px 15px 20px;
}
#mainContent {
margin: 0 0 0 250px;
padding: 0 20px 20px 20px;
}
</style>
</head>
<body>

<div id="container">

<div id="sidebar">
<h3>Sidebar Content</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis.</p>
</div>

<div id="mainContent">
<h1> Main Content </h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum.</p>
<p>Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
<h2>H2 level heading </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam.</p>
</div>
</div>
</body>

Estrutura de um documento (X)HTML

O XHTML

Construção de uma página (Box Model)

Construção de uma página (Box Model)