XHTML, CSS e Semântica

O que é?A Web Semântica é nada mais nada menos, que uma web com toda sua informação organizada de forma que não somente seres humanos possam entendê-la, mas principalmente máquinas.Seu objetivo é melhorar a Web através de padrões e ferramentas que tornem seu conteúdo claro e de fácil manutenção.

Por quê seguir?Tente imaginar como o Google seria mais preciso em suas buscas se toda a informação da web estivesse organizada de uma maneira sensata.

Mas e o HTML e o XHTML?HTML é uma linguagem de marcação utilizada para produzir páginas na Web.XHTML é uma reformulação do HTML 4, baseada em xml.É um processo de padronização para a exibição das páginas em diversos dispositivos.

Como criar?<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Hello World</title> </head> <body> </body> </html>

Usando a herançaDocumentos HTML são hierarquicamente estruturados.Há um ancestral, o elemento de nível mais alto (pai) do qual os demais elementos (filhos) são descendentes. Os elementos filhos herdam as características do elemento pai. Por exemplo: cores e tamanhos de letras.Assim numa folha de estilos as regras de estilo CSS para o elemento pai serão herdadas pelos elementos filhos. A herança é passada do elemento pai para os filhos e estes se tiverem filhos também herdarão e assim por diante, seguindo a herança até o elemento de menor nível.

Utilizando a semânticaPara construir uma página em XHTML, devem se seguir os padrões W3C.Exemplo: Todas as tags e seus atributos devem ser escritos em letra minúscula.

Todo valor dos atributos devem estar entre “” (alt=”Olá”),

As tags simples devem ser fechadas com “/>” (<imgsrc=”foto.gif” alt=”eu” />).Utilizando a semânticaDevemos ainda lembrar que, para todo tipo de conteúdo inserido na página existe umaatag específica.Para o título principal do site, usamos <h1>Para títulos secundários, <h3>Todo texto deve ser inserido dentro da tag <p> e/ou <span>Para links utilizamos < a href=“” title=“”></a>Lista de tags:http://www.w3schools.com/tags/default.asp

CSS, por que usar?A finalidade das CSS é a de retirar do HTML toda e qualquer declaração que vise a formatação, a apresentação do documento.Ou seja, o html marca, o css transforma.

Como usar CSSA sintaxe de uma regra CSS compreende um seletor uma propriedade e um valor escritos como mostrado abaixo:seletor {propriedade: valor;}Ex: p {font-size:10px;}A regra acima, aplica tamanho de 10px a todos os elementos <p> contidos dentro da página html.

Como usar CSSÉ comum, iniciar a folha de estilo com uma marcação de reset, para igualar as propriedades em todos os browsers.Ex: *{margin:0; padding:0; font-family:Arial;}A utilização de classes nos elementos HTML é aconselhada, pois torna-se mais fácil o acesso a determinada tag.A força de um ID, é maior ao de uma class, na cascata da CSS.

Posicionamento em CSSTodo o comportamento da CSS, depende de como o html foi marcado.Para posicionarmos elementos na tela, existem básicamente dois meios.Position:absolute e position:relative(default)

Posicionamento em CSSPosition:absolute, posiciona o elemento na página de acordo com as cordenadas de top, left, right e/ou bottom, dependendo da herança do elemento pai;Position:relative, posiciona o elemento a esquerda ou direita, dependendo da herança do elemento pai.Utiliza-se clear:both para limpar a herança do float.

Exemplo de CSS/*atribuindo caracteristica para a tag <h1></h1>*/h1{color:#008000;font-weight: bold;}

Exemplo de CSS/*atribuindo caracteristica para a tag <body>*/body {background-color:#87ceeb;background-image:url('imagem/fundo.jpg');background-repeat:no-repeat; /*para a imagem de fundo não repetir (no-repeat), para repetir só na horizontal(repeat-x), para repetir na vertical (repeat-y)*/background-attachment:fixed; /*para a imagem de fundo ficar "fixa" sem repetir*/}

Exemplo de CSS/*definindo uma classe para atribuir uma caracteristica diferente ao texto em determinada parte*/.pazul {color:#0000ff;font-size:16px;font-style:italic;text-align:center;font-family:arial;}

XHTML, CSS e Semântica

Mais conteúdo relacionado

Mais procurados

Semelhante a XHTML, CSS e Semântica

XHTML, CSS e Semântica