Hipermídia

Prof Maurício Nacif

Semana 7

Introdução a marcação semântica

Para posicionar os elementos na página, já constatamos que devemos criar

os containers principais. Analise o design da página que você pretende
construir (que pode ser uma figura, um esboço em folha de papel ou um
template existente) e defina os containers principais.
Estes containers serão os elementos DIV principais nas quais serão
inseridos os conteúdos e elas deverão ser designadas com nomes ligados
semanticamente às suas finalidades evitando-se nomeá-las de acordo com
sua apresentação ou aparência.
Como por exemplo, os nomes mais comuns para as DIVs principais de um
layout simples:

•container (ou total)

•header (para cabeçalho)
•mainnav (para janela principal de navegação)
•menu
•contents (conteúdos)
•footer (rodapé)

Estes nomes, ou nomenclatura não é obrigatória. Você pode usar qualquer

que seja o nome para identificar qualquer uma das partes da sua página.
Mas manter coerência entre o nome que identifica um objeto, texto, imagem
ou propriedade (ID ou Class) é importante para não se confundir
posteriormente.

Se o container for único na página use IDs no lugar de classes. Isto é

importante para a aplicação de estilos na página. Caso ocorra regras CSS
conflitantes, os seletores IDs terão prioridade sobre os seletores classes.

Não caia na armadilha de construir todo o layout e depois testar, pois

você poderá constatar uma quebra de layout em um ponto difícil de detectar.
Construa em passos pequenos e teste cada passo em diferentes
navegadores. Assim fazendo você irá detectar eventuais problemas com o
layout tão logo eles apareçam, tornando a correção mais fácil.

Analise seu design e decida o método a adotar para posicionamento de cada

um dos containers.

•O layout será líquido, com largura fixa, definido em unidade em ou uma

combinação deles?
•O layout será centrado na página?
•Quais containers deverão ser flutuados?
•Quais containers serão mantidos no fluxo normal?
•Há necessidade de posicionamento absoluto?
Introdução a marcação semântica

Marcação Válida: é quando não contém erros (ex: esquecer de fechar tags)
e não contém tags ou atributos ilegais (ex: usar atributo height em tabelas
que não é permitido).

Marcação Semântica: É quando as tags representam o tipo de conteúdo

para qual foram projetadas (ex: quando colocamos a tag de título h1
marcando o trecho de conteúdo mais importante da página).

A Marcação Válida é facilmente detectada por softwares automatizados

porque se trata de sintaxe e de regras pre-definidas. Porém a boa
utilização da Marcação Semântica depende extritamente do nível de
consciência e da maturidade que o desenvolvedor tem com relação aos
padrões Web. Nesse momento o fator humano é essencial.

Enquanto que escrever CSS é simples, utilizá-la para formatar seus sites
requer uma forma de pensar um pouco diferente.
No lugar de pensar coisas como "isto vai aqui, e isto vai ali" quando estamos
trabalhando o layout de uma página, nós precisamos pensar sobre o tipo de
informação dentro da nossa página e a estrutura desta informação.

Qual o título mais importante? Marque-o com uma tag <h1>.

Marque seus subtítulos com <h2> e assim por diante.
As tags de marcação para Títulos e Sub-Títulos podem ser <h1> até
<h6>, devendo ser ordenadas da maior h1 para a menor.
Marque os parágrafos com <p>.
Escolha um DOCTYPE e o utilize. (use XHTML transitional)

Habitue-se a usar para a manchete a tag <h1>; sub-títulos serão marcados

com a tag <h2> etc; e parágrafos serão parágrafos.
Isto é conhecido como marcação "estruturada", ou marcação "semântica".

Ao invés de colocar o seu conteúdo dentro de tabelas, envolva o seu

conteúdo dentro de elementos div. Dê a seu elemento div um id
(identificador) ou uma class que descreverá o seu conteúdo e/ou função, no
lugar de sua aparência.
O atributo Class, dentro das regras CSS permite controle particularizado
sobre tags de uma determinada classe. Ao criarmos, poe exemplo, uma
Class p.esquerdo ou p.azul (etc - as classes usam o ponto entre nomes
para identificação) poderemos ter dentro da tag geral <p> que controla todos
os parágrafos, opções de classe para refinar o estilo <p>, com as mesmas
possibilidades de definir particularmete um alinhamento, côr, corpo ou peso.

Os tamanhos de fontes podem ser definidos de forma global para o container

ou individualmente para os elementos neles contidos. Isto resulta em um alto
grau de controle sobre os elementos no layout. Por exemplo: diferentes
elementos <h1> podem ter diferentes tamanhos de fontes dependendo do
seu container, como nesse exemplo abaixo:

#navigation h1 {
font-size: 120%;
}

#content h1 {
font-size: 140%;
}

Estruturar semanticamente um projeto para web é fundamental para que a

direção de arte tenha consistência em todas as páginas fazendo mais fácil a
aplicação de uma follha de estilo que controle os textos de forma
padronizada.