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.