• Save
XHTML Básico
Upcoming SlideShare
Loading in...5
×
 

XHTML Básico

on

  • 4,463 views

Introdução ao desenvolvimento de páginas web com utilizando os padrões XHTML e CSS.

Introdução ao desenvolvimento de páginas web com utilizando os padrões XHTML e CSS.

Statistics

Views

Total Views
4,463
Views on SlideShare
4,444
Embed Views
19

Actions

Likes
5
Downloads
0
Comments
0

2 Embeds 19

http://moodle.esenviseu.net 16
http://www.slideshare.net 3

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

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 Básico XHTML Básico Presentation Transcript

  • Padrões de Implementação de Interfaces
  • Um pouquinho de História... Em 1989, Tim Berners-Lee criou a World Wide Web. Lançamento oficial foi em 6 de agosto de 1991.
  • World Wide Web Sistema de documentos de hipertexto interligados. A navegação entre páginas web, se dá por links. É de tecnologia aberta e gratuita. View slide
  • World Wide Web Consortium “ To lead the World Wide Web to its full potential by developing protocols and guidelines that ensure long-term growth for the Web. ” Tim Berners-Lee, Diretor da W3C e inventor da criado em 1994 World Wide Web View slide
  • WaSP Web Standards Projects Grupo formado em 1998 para promover os Padrões Web
  • Padrões XML XHTML DOM HTML WSDL CSS SVG SOAP RDF
  • Nova Proposta Divisão em Camadas
  • Padrão HTML SGML base do padrão XML (Extensible Markup Language) 1997 - W3C endossou o HTML 4
  • Padrão XHTML eXtensible HyperText Markup Language documentos web compatíveis com aplicações XML 2000 - endossado o XHTML 1.0 2001 - endossado o XHTML 1.1
  • XHTML é baseado em XML HTML4 = XHTML1
  • Documentos são lidos, visualizados e editados em qualquer ferramenta XML
  • Interoperabilidade
  • É possível criar novas marcações (tags)
  • Há compatibilidade com diversos navegadores
  • Acessibilidade
  • Código mais limpo
  • Melhores resultados nos mecanismos de busca
  • Arquivo Menor: Carregamento mais rápido, economia de banda
  • Facilidade de manutenção
  • Diferenças entre HTML e XHTML
  • Documentos devem ser bem formatados
  • <html> <head> <title> </title> </head> <body> <p> ... </p> </body> </html> regra obrigatória
  • Tags em letras minúsculas
  • proibido em XHTML <div> <DIV> <p>texto</p> <P>texto</P> </div> </DIV>
  • Tags devem ser aninhadas corretamente
  • proibido em XHTML <div> <div> <p> <p> <em> <em> Texto Texto enfatizado enfatizado </em> </p> </p> </em> </div> </div>
  • Uso de tags de fechamento
  • proibido em XHTML <p> Um parágrafo <p> </p> Um parágrafo <li> <li> Um item de lista Um item de lista </li>
  • Elementos vazios (órfãos) devem ser fechados
  • <br /> <hr /> proibido em XHTML <img src=”imagem.gif” alt=”minha imagem” /> <br> <hr> ou <img src=”imagem.gif” alt=”minha imagem”> <br></br> <hr></hr> <img src=”imagem.gif” alt=”minha imagem”></img>
  • Sintaxe dos atributos
  • Nome dos atributos
  • <td rowspan=”3” <td ROWSPAN=”3”
  • Valores dos atributos
  • <td rowspan=”3” <td rowspan=3
  • Sintaxe para atributos
  • <input checked=”checked” /> <input checked /> <input realonly=”readonly” /> <input readonly /> <textarea multiple=”multiple” /> <textarea multiple /> ... ...
  • Pontos de âncoras
  • <a name=”topo”>Início</a> (Para HTML) <a id=”topo”>Início</a> (Para XHTML) <a id=”topo” name=”topo”>Início</a> (Para compatibilidade com navegadores antigos)
  • Atributo alt para imagens
  • regra obrigatória <img src=”imagem.gif” alt=”minha imagem” /> (Para XHTML) <img src=”imagem.gif” alt=” ” /> (Para imagem que decorativa que não transmita informação)
  • Código gerado por editores
  • Editores WYSIWYG “O que você vê é o que você tem” onmouseover=function() onMouseOver=function()
  • Codificação de caracteres reservados
  • Entidades HTML Comércio &amp; Exportação Comércio & Exportação
  • Entidades HTML Caractere Nome da Entidade Descrição em inglês “ &quot; quotation mark ‘ &apos; apostrophe » &raquo; angle quotation mark (right) < &lt; less-than > &gt; more-than ó &oacute; small a, acute accent ã &atilde; small a, tilde À &Agrave; big a, grave accent ê &ecirc; small e, circumflex accent ç &ccedil; small c, cedilla
  • Exemplo Código Esta apresenta&ccedil;&atilde;o &eacute; sobre padr&otild;es web. Visual Esta apresentação é sobre padrões web.
  • Documento XHTML
  • <!DOCTYPE blablablablabla> <html xmlns=”http://www.w3c.org/1999/xhtml” xml:lang=”pt-br” lang=”pt-br”> <head> <title>Título do documento</title> </head> <body> Conteúdo do documento </body> </html>
  • DOCTYPE Document Type Definition Especifica a sintaxe e a gramática SGML usada para a linguagem de marcação XHTML
  • DOCTYPE Strict Mais rígida das declarações: itens de apresentação dentro dos elementos <div align=”center”></div> elementos em desuso <u></u> Marcação de conteúdo totalmente independente da apresentação
  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd">
  • DOCTYPE Transitional Declarações mais flexíveis que a anterior: itens de apresentação dentro dos elementos <div align=”center”></div> elementos em desuso <u></u> Destinado para navegadores sem suporte a CSS
  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">
  • Web Semântica
  • Semântica É a parte da linguística que estuda o significado das palavras.
  • XHTML Marcação semântica Tags são usadas considerando seu significado, destino e função
  • Alguns Elementos <h1> <h2> .... até <h6> para cabeçalhos <p> para parágrafos <strong> para maior importância <small> para menor importância <em> para enfatizar <ul> para lista sem ordenação <ol> para lista ordenada <li> para item de lista <table> para dados tabulares <div> e <span> não tem valor semântico
  • Ferramenta certa para o trabalho certo
  • CSS Cascading Style Sheet
  • Sintaxe CSS Composta por seletor e declaração seletor { propriedade : valor; }
  • seletor { propriedade: valor; } seletor: é o alvo da regra CSS declaração: parâmetros de estilização propriedade: característica a ser estilizada valor: quantificação ou qualificação da propriedade
  • seletor { propriedade: valor; } Elemento <p> - parágrafo p { color: #000000; background-color: #ff0000; font-style: italic; text-align: center; }
  • Agrupamento de Seletores
  • h1 { color: red; } h2 { color: red; } p { color: red; } agrupando... h1, h2, p { color: red; }
  • Classe x Id
  • Classe Seletor de classificação ID Vários elementos Seletor de identificação podem ter a mesma classe Somente um elemento pode ter aquele id Não tem tanta especificidade Mais específico
  • Seletor Classe
  • <h4 class=”titulo”> Cabeçalho nível 4 </h4> h4.titulo { color: red; } .titulo { color: red; }
  • Seletor Classe outro exemplo
  • <p class=”introducao”> Texto de introdução da minha notícia. </p> p.introducao { color: black; font-size: 12px; width: 500px; margin: 10px 5px; } p.artigo { color: gray; font-size: 13px; } <p class=”introducao artigo”> Texto de introdução do meu artigo. </p>
  • Seletor ID
  • <div id=”principal”></div> <div id=”secundario”></div> div#principal { color: black; } #principal { color: black; } #secundario { color: red; }
  • Seletor Composto
  • <div id=”principal”> <p class=”descricao”> <strong>Nome do produto</strong> Descrição do produto. </p> </div> div#principal { color: black; font-style: normal; } p.descricao{ font-size: 13px; } p.descricao strong { font-size: 14px; color: #005A9C; }
  • Vincular Folhas de Estilo
  • Inline <p style=”width:200px; color:red; background-color:#ccc; font-size:1.8em;”> Texto com estilo inline. </p>
  • Incorporado ... <head> ... <style type=”text/css”media=”screen”> body { margin: 0; padding: 0; font-size: 80%; color: black; background-color: white; } ... outras regras ... </style> </head> ...
  • Arquivo Linkado ... <head> ... <link rel=”stylesheet” type=”text/css” href=”estilo.css” media=”all” /> </head> <body> ...
  • Arquivo Importado ... <head> ... <style type=”text/css”> @import url(“estilos.css” screen; </style> </head> <body> ...
  • Validadores W3C
  • http://validator.w3.org/
  • http://jigsaw.w3.org/css-validator/
  • http://htmlplayground.com/
  • Acessibilidade
  • Boa marcação de Conteúdo para Leitores de Tela
  • Referências http://www.w3c.br/ http://www.w3.org/TR/xhtml1/ http://jigsaw.w3.org/css-validator/ http://www.w3.org/Style/CSS/#support http://www.maujor.com/w3c/xhtml10_2ed.html http://www.acessibilidade.net/ http://www.acesso.umic.pt/w3/TR/WCAG20/ http://www.acessibilidadelegal.com/ http://acessodigital.net/