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ça Documentos 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ântica Para construir uma página em XHTML, devem se seguir os padrões W3C. Exemplo: ,[object Object]

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

As tags simples devem ser fechadas com “/>” (<imgsrc=”foto.gif” alt=”eu” />).,[object Object]

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 CSS A 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 CSS Todo 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 CSS Position: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

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (18)

Similar a XHTML, CSS e Semântica

Similar a XHTML, CSS e Semântica (20)

Último

Último (9)

XHTML, CSS e Semântica