• Save
XHTML, CSS e Semântica
Upcoming SlideShare
Loading in...5
×
 

XHTML, CSS e Semântica

on

  • 1,943 views

 

Statistics

Views

Total Views
1,943
Views on SlideShare
1,943
Embed Views
0

Actions

Likes
2
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

XHTML, CSS e Semântica XHTML, CSS e Semântica Presentation Transcript

  • Web Semântica
    HTML e CSS
  • 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:
    • 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ântica
    Devemos 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 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;
    }
  • Bibliografia
    http://www.pinceladasdaweb.com.br/blog/2006/05/17/o-que-e-a-web-semantica/
    http://www.tableless.com.br/a-web-semantica
    https://addons.mozilla.org/en-US/firefox/addon/249/
    http://www.maujor.com