montando sites com xhtml e css utilizando os padrões web
DESCRIPTION
Apresentação do minicurso realizado na UFC-Quixadá de 20 a 24 de julho de 2009.TRANSCRIPT
![Page 1: Montando sites com XHTML e CSS utilizando os padrões web](https://reader030.vdocuments.net/reader030/viewer/2022012916/548b7536b479597e6a8b4575/html5/thumbnails/1.jpg)
![Page 2: Montando sites com XHTML e CSS utilizando os padrões web](https://reader030.vdocuments.net/reader030/viewer/2022012916/548b7536b479597e6a8b4575/html5/thumbnails/2.jpg)
Programa
• 1º Dia: Um pouco de história
• 2º Dia: Mão na massa - Site do WTISC
• 3º Dia: Montando a página Programação
(Tabelas)
• 4º Dia: Montando a página Inscrições
(Formulário)
• 5º Dia: Um pouco de JavaScript e FTP
![Page 3: Montando sites com XHTML e CSS utilizando os padrões web](https://reader030.vdocuments.net/reader030/viewer/2022012916/548b7536b479597e6a8b4575/html5/thumbnails/3.jpg)
1º Dia:Um pouco de história
![Page 4: Montando sites com XHTML e CSS utilizando os padrões web](https://reader030.vdocuments.net/reader030/viewer/2022012916/548b7536b479597e6a8b4575/html5/thumbnails/4.jpg)
Como tudo começou
A Web foi criado em 1989, por Tim Berners-Lee, para ser um padrão de publicação e distribuição de textos científicos e acadêmicos.
Localizador Uniforme de Recursos (URL)
Linguagem de Marcação de Hipertexto (HTML)
Protocolo de Transferência de Hipertexto (HTTP)
Navegador Web (Browser)
![Page 5: Montando sites com XHTML e CSS utilizando os padrões web](https://reader030.vdocuments.net/reader030/viewer/2022012916/548b7536b479597e6a8b4575/html5/thumbnails/5.jpg)
A Bagunça
A Web cresce comercialmente,
e veem a necessidade de publicação de conteúdo diagramado,
como em revistas e jornais
(algo para o qual o HTML não possuia recursos).
Há então a adaptação da linguagem
de forma equivocada,
com uma preocupação unicamente visual, esquecendo da qualidade do código.
![Page 6: Montando sites com XHTML e CSS utilizando os padrões web](https://reader030.vdocuments.net/reader030/viewer/2022012916/548b7536b479597e6a8b4575/html5/thumbnails/6.jpg)
A Guerra dos Browsers
Aproximadamente entre 1995 e 1999 houve a chamada “Guerra dos Browsers”, onde a Netscape (e seu Browsers de mesmo nome) e a Microsoft (com o seu Internet Explorer) disputavam o mercado de navegadores.
Além de não darem suporte aos padrões do recém criado World Wide Web Consortium (W3C), ainda criavam seus próprios padrões, aumentando a bagunça.
![Page 7: Montando sites com XHTML e CSS utilizando os padrões web](https://reader030.vdocuments.net/reader030/viewer/2022012916/548b7536b479597e6a8b4575/html5/thumbnails/7.jpg)
Editores WYSIWYG
"O que você vê é o que você tem", ou em inglês "What You See Is What You Get" (WYSIWYG) são programas que lhe permitem ter a visualização final de um documento, enquanto o mesmo ainda é editado.
Editores HTML WYSIWYG como Go Live, Front Page e Dreamweaver surgiram por volta de 1996, e são conhecidos por gerar um código sujo e muito maior que o necessário.
![Page 8: Montando sites com XHTML e CSS utilizando os padrões web](https://reader030.vdocuments.net/reader030/viewer/2022012916/548b7536b479597e6a8b4575/html5/thumbnails/8.jpg)
Cursos e Profissionais desatualizados
![Page 9: Montando sites com XHTML e CSS utilizando os padrões web](https://reader030.vdocuments.net/reader030/viewer/2022012916/548b7536b479597e6a8b4575/html5/thumbnails/9.jpg)
Com tudo isso...
Cada arquivos de um site acaba sendo um incompreensível emaranhado de Tags
com tabelas, formatações, scripts...
Tudo muito maior que o necessário.
Dessa forma, para que seja feita alguma alteração no site, é necessário alterar todos os
arquivos...
um a um!
![Page 10: Montando sites com XHTML e CSS utilizando os padrões web](https://reader030.vdocuments.net/reader030/viewer/2022012916/548b7536b479597e6a8b4575/html5/thumbnails/10.jpg)
![Page 11: Montando sites com XHTML e CSS utilizando os padrões web](https://reader030.vdocuments.net/reader030/viewer/2022012916/548b7536b479597e6a8b4575/html5/thumbnails/11.jpg)
Os Padrões Web
Padrões Web ou Web Standards são um conjunto de normas, diretrizes, recomendações, notas, artigos, tutoriais e afins de caráter técnico, produzidos pelo W3C e destinados a orientar fabricantes, desenvolvedores e projetistas para o uso de práticas que possibilitem a criação de uma Web acessível a todos, independentemente dos dispositivos usados ou de suas necessidades especiais.
XHTML – HTML – CSS – DOM – XML – SVG – SOAP – ...
![Page 12: Montando sites com XHTML e CSS utilizando os padrões web](https://reader030.vdocuments.net/reader030/viewer/2022012916/548b7536b479597e6a8b4575/html5/thumbnails/12.jpg)
O que é W3C?
W3C (World Wide Web Consortium) é um consórcio de empresas de tecnologia. Fundado por Tim Berners-Lee em 1994 para levar a Web ao seu potencial máximo.
Desenvolve Recomendações abertas,
até agora mais de 80 padrões...
www.w3.org
![Page 13: Montando sites com XHTML e CSS utilizando os padrões web](https://reader030.vdocuments.net/reader030/viewer/2022012916/548b7536b479597e6a8b4575/html5/thumbnails/13.jpg)
Web Standards Project
O Web Standards Project (WaSP) é um grupo formado em 1998 com o objetivo de promover os Padrões Web, assegurando desse modo um acesso simples e com menos custos para todos.
Vem encorajando e persuadindo os fabricantes de Browsers a fornecerem suporte aos padrões, como o XHTML, CSS, ECMAScript (a versão standard do JavaScript) e o DOM.
www.webstandards.org
![Page 14: Montando sites com XHTML e CSS utilizando os padrões web](https://reader030.vdocuments.net/reader030/viewer/2022012916/548b7536b479597e6a8b4575/html5/thumbnails/14.jpg)
Mudança de Conceito...
Web dividida em três camadas:
● Conteúdo (XHTML)
● Apresentação (CSS)
● Comportamento (Javascript)
Devem ser desenvolvidas
de forma independente, porém
uma complementa a outra.
![Page 15: Montando sites com XHTML e CSS utilizando os padrões web](https://reader030.vdocuments.net/reader030/viewer/2022012916/548b7536b479597e6a8b4575/html5/thumbnails/15.jpg)
Mudança de Conceito...
![Page 16: Montando sites com XHTML e CSS utilizando os padrões web](https://reader030.vdocuments.net/reader030/viewer/2022012916/548b7536b479597e6a8b4575/html5/thumbnails/16.jpg)
Sem Padrões x Com Padrões
✗ Extensão da
Mídia Impressa
✗ Layout baseado
em Tabelas
✗ Conteúdo,
Apresentação e
Comportamento
“aninhados”
✗ Código
Incompreensível
✔ Acessível de
qualquer
dispositivo
✔ Layout baseado
em CSS
✔ Separação entre
Conteúdo,
Apresentação e
Comportamento
✔ Código Acessível
![Page 17: Montando sites com XHTML e CSS utilizando os padrões web](https://reader030.vdocuments.net/reader030/viewer/2022012916/548b7536b479597e6a8b4575/html5/thumbnails/17.jpg)
Vantagens da adoção dos Padrões• Carregamento mais rápido• Menores custos com hospedagem• Melhor Consistência Visual• Redesign mais barato e eficiênte• Melhores resultados nos Mecanismos de
Buscas• Maior acessibilidade e interoperabilidade
![Page 18: Montando sites com XHTML e CSS utilizando os padrões web](https://reader030.vdocuments.net/reader030/viewer/2022012916/548b7536b479597e6a8b4575/html5/thumbnails/18.jpg)
Tableless x Web Standards
Tableless é um termo que ficou muito popular no Brasil, e que acaba por confundir muita gente.
Tableless significa (resumidamente) um site desenvolvido sem o antiquado uso das tabelas para organizar o layout, e sim usando CSS.
Criar um site Tableless não significa que esteja seguindo os Padrões Web, que vão muito além de um código válido, e tem preocupações maiores como a Semântica e a Acessibilidade.
![Page 19: Montando sites com XHTML e CSS utilizando os padrões web](https://reader030.vdocuments.net/reader030/viewer/2022012916/548b7536b479597e6a8b4575/html5/thumbnails/19.jpg)
HTML
HTML é a abreviação para HyperText Markup Language, que pode ser traduzido como Linguagem de Marcação para Hipertexto.
Compõe a estrutura de uma página Web através de etiquetas (tags) e atributos.
![Page 20: Montando sites com XHTML e CSS utilizando os padrões web](https://reader030.vdocuments.net/reader030/viewer/2022012916/548b7536b479597e6a8b4575/html5/thumbnails/20.jpg)
HTML
O HTML sofreu várias mudanças em suas diferentes versões, com o objetivo de estender a linguagem para que pudesse acompanhar a evolução da Web e das tecnologias nela inseridas.
Versões do HTML:– HTML 2.0 (Novembro de 1995)– HTML 3.2 (Janeiro de 1997)– HTML 4.0 (Dezembro de 1997)– HTML 4.01 (Dezembro de 1999)– ISO/IEC 15445:2000 "ISO HTML" (Maio de 2000)– HTML 5 (Janeiro de 2008)
![Page 21: Montando sites com XHTML e CSS utilizando os padrões web](https://reader030.vdocuments.net/reader030/viewer/2022012916/548b7536b479597e6a8b4575/html5/thumbnails/21.jpg)
XML: eXtensible Markup Language
Criada para suprir a falta de flexibilidade do HTML.
Separação do conteúdo da formatação.
Simplicidade e Legibilidade, para humanos e computadores.
Criação de arquivos para validação de estrutura.
Interligação de bancos de dados distintos.
Concentração na estrutura da informação.
![Page 22: Montando sites com XHTML e CSS utilizando os padrões web](https://reader030.vdocuments.net/reader030/viewer/2022012916/548b7536b479597e6a8b4575/html5/thumbnails/22.jpg)
XHTML
O (X)HTML, ou eXtensible Hypertext Markup Language, é uma reformulação da linguagem de marcação HTML baseada em XML.
Pode ser interpretado por qualquer dispositivo, independentemente da plataforma utilizada, pois as marcações possuem sentido semântico para as máquinas.
![Page 23: Montando sites com XHTML e CSS utilizando os padrões web](https://reader030.vdocuments.net/reader030/viewer/2022012916/548b7536b479597e6a8b4575/html5/thumbnails/23.jpg)
Um Código Semântico
Semântica refere-se ao estudo do significado.
Quando utilizamos cada marcação para o que ela realmente foi criada, estamos construindo um “Código Semântico”.
Parar de pensar em “isso vem aqui, isso vai ali...” e pensar na “Estrutura da Informação”
Criar uma “Marcação com Significado”.
![Page 24: Montando sites com XHTML e CSS utilizando os padrões web](https://reader030.vdocuments.net/reader030/viewer/2022012916/548b7536b479597e6a8b4575/html5/thumbnails/24.jpg)
Marcação Semântica
Usar <table></table> apenas para dados tabulares
Usar <h1></h1> até <h6></h6> para títulos
Usar <ol></ol> para Listas Ordenadas e <ul></ul> para
Listas Não Ordenadas, seguidos do elemento <li></li>
Usar <em></em> para Enfase,
e <strong></strong> para Enfase Forte
![Page 25: Montando sites com XHTML e CSS utilizando os padrões web](https://reader030.vdocuments.net/reader030/viewer/2022012916/548b7536b479597e6a8b4575/html5/thumbnails/25.jpg)
Versões do XHTML
XHTML é uma linguagem que começou como uma reformulação do HTML 4.01
usando XML 1.0:– XHTML 1.0 (Janeiro de 2000)– XHTML 1.1: (Maio de 2001)– XHTML 2.0: Ainda é um projeto de trabalho do W3C. – XHTML 5.0: é uma atualização para o XHTML 1.x,
está sendo definido juntamente com o HTML5 no mesmo projeto.
![Page 26: Montando sites com XHTML e CSS utilizando os padrões web](https://reader030.vdocuments.net/reader030/viewer/2022012916/548b7536b479597e6a8b4575/html5/thumbnails/26.jpg)
DTD: Document Type Definition
Um padrão que define as partes de um documento, e descrevem como eles podem ou não ser usados, o que pode ser colocado em seus interiores, e se são ou não elementos obrigatórios do documento.
Descreve com precisão a sintaxe e a gramática da linguagem de marcação XHTML.
![Page 27: Montando sites com XHTML e CSS utilizando os padrões web](https://reader030.vdocuments.net/reader030/viewer/2022012916/548b7536b479597e6a8b4575/html5/thumbnails/27.jpg)
XHTML 1.0 - DOCTYPE:
Strict<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Transitional<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Frameset<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
![Page 28: Montando sites com XHTML e CSS utilizando os padrões web](https://reader030.vdocuments.net/reader030/viewer/2022012916/548b7536b479597e6a8b4575/html5/thumbnails/28.jpg)
XHTML – Elementos obrigatórios:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>XHTML Base</title>
</head>
<body>
<p>Conteúdo</p>
</body>
</html>
![Page 29: Montando sites com XHTML e CSS utilizando os padrões web](https://reader030.vdocuments.net/reader030/viewer/2022012916/548b7536b479597e6a8b4575/html5/thumbnails/29.jpg)
Diferenças entre XHTML e HTML• Documentos devem ser bem-formados• Todas as tags devem ser escritas com
letras minúsculas• Tags devem estar convenientemente
aninhadas• Uso de tags de fechamento é
obrigatório• Elementos vazios devem ser fechados• Diferença na sintaxe dos atributos
![Page 30: Montando sites com XHTML e CSS utilizando os padrões web](https://reader030.vdocuments.net/reader030/viewer/2022012916/548b7536b479597e6a8b4575/html5/thumbnails/30.jpg)
Diferenças entre XHTML e HTML• Documentos devem ser bem-formados
A estrutura básica do documento deve ser conforme mostrado a seguir:
<html>
<head>
...
</head>
<body>
...
</body>
</html>
![Page 31: Montando sites com XHTML e CSS utilizando os padrões web](https://reader030.vdocuments.net/reader030/viewer/2022012916/548b7536b479597e6a8b4575/html5/thumbnails/31.jpg)
Diferenças entre XHTML e HTML• Todas as tags devem ser escritas com
letras minúsculas
Errado:
<DIV><P>Aqui um texto!</P></DIV>
Correto:
<div><p>Aqui um texto!</p></div>
![Page 32: Montando sites com XHTML e CSS utilizando os padrões web](https://reader030.vdocuments.net/reader030/viewer/2022012916/548b7536b479597e6a8b4575/html5/thumbnails/32.jpg)
Diferenças entre XHTML e HTML• Tags devem estar convenientemente
aninhadas
Errado:
<div><p>Aqui um <em>texto!</p></em></div>
Correto:
<div><p>Aqui um <em>texto! </em></p></div>
![Page 33: Montando sites com XHTML e CSS utilizando os padrões web](https://reader030.vdocuments.net/reader030/viewer/2022012916/548b7536b479597e6a8b4575/html5/thumbnails/33.jpg)
Diferenças entre XHTML e HTML• Uso de tags de fechamento é
obrigatório
Errado:
<p>Um parágrafo.
Correto:
<p>Um parágrafo.</p>
![Page 34: Montando sites com XHTML e CSS utilizando os padrões web](https://reader030.vdocuments.net/reader030/viewer/2022012916/548b7536b479597e6a8b4575/html5/thumbnails/34.jpg)
Diferenças entre XHTML e HTML• Elementos vazios devem ser fechados
Errado:
<br>
<img src=“imagem.gif” alt=“uma imagem”>
Correto:
<br />
<img src=“imagem.gif” alt=“uma imagem” />
![Page 35: Montando sites com XHTML e CSS utilizando os padrões web](https://reader030.vdocuments.net/reader030/viewer/2022012916/548b7536b479597e6a8b4575/html5/thumbnails/35.jpg)
Diferenças entre XHTML e HTML• Diferença na sintaxe dos atributos
Errado:
<td ROWSPAN=3>
<input checked>
Correto:
<td rowspan=“3”>
<input checked=“checked”>
![Page 36: Montando sites com XHTML e CSS utilizando os padrões web](https://reader030.vdocuments.net/reader030/viewer/2022012916/548b7536b479597e6a8b4575/html5/thumbnails/36.jpg)
XHTML: Recomendações
Aplicamos “Itálico” em um texto para dar ênfase...
Ao invés da marcação <i></i>,
use <em></em>, ou então <cite></cite>se for uma citação (de um livro, por exemplo)
Para uma ênfase forte,
ao invés de <b></b>,
use a marcação <strong></strong>
![Page 37: Montando sites com XHTML e CSS utilizando os padrões web](https://reader030.vdocuments.net/reader030/viewer/2022012916/548b7536b479597e6a8b4575/html5/thumbnails/37.jpg)
XHTML: Recomendações
Um menu nada mais é
do que uma lista de opções...
Então, use as marcações de
Lista não-ordenada
![Page 38: Montando sites com XHTML e CSS utilizando os padrões web](https://reader030.vdocuments.net/reader030/viewer/2022012916/548b7536b479597e6a8b4575/html5/thumbnails/38.jpg)
CSS: Cascading Style Sheets Cascading Style Sheets (ou simplesmente CSS)
é uma linguagem de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação, como HTML ou XML.
Seu principal benefício é prover aseparação entre o formato e o conteúdo de um documento.
Pode-se definir apresentações especificas para diferentes dispositivos (Tvs, Celulares e PDAs, Impressoras, etc) apenas criando
folhas de estilo alternativas.
![Page 39: Montando sites com XHTML e CSS utilizando os padrões web](https://reader030.vdocuments.net/reader030/viewer/2022012916/548b7536b479597e6a8b4575/html5/thumbnails/39.jpg)
CSS: Cascading Style Sheets• CSS 1.0 … CSS level 1
– Em setembro de 1994 surgiu a primeira proposta– Em dezembro de 1996 lançada como Recomendação
oficial do W3C• CSS 2.0 … CSS level 2
– Publicada em maio de 1998– Ultima revisão: 12 de maio de 2008
• CSS 2.1 … CSS level 2 revision 1– Candidata a Recomendação oficial do W3C em 23 de
abril de 2009• CSS 3.0 … CSS level 3
– Proposta em 2001
![Page 40: Montando sites com XHTML e CSS utilizando os padrões web](https://reader030.vdocuments.net/reader030/viewer/2022012916/548b7536b479597e6a8b4575/html5/thumbnails/40.jpg)
Associar CSSs a documentos HTML• Inline
Através do atributo style diretamente dentro de uma marcação
• Interno
Através da tag style entre as marcações <head></head> do documento HTML
• Externo
Criar um link (ligação) para uma página que contém os estilos.<link href="estilo.css" rel="stylesheet" type="text/css" />
![Page 41: Montando sites com XHTML e CSS utilizando os padrões web](https://reader030.vdocuments.net/reader030/viewer/2022012916/548b7536b479597e6a8b4575/html5/thumbnails/41.jpg)
CSS: Cascading Style Sheets
![Page 42: Montando sites com XHTML e CSS utilizando os padrões web](https://reader030.vdocuments.net/reader030/viewer/2022012916/548b7536b479597e6a8b4575/html5/thumbnails/42.jpg)
CSS: Seletor classe
• Uma classe define a variação de um estilo.• É referenciado através de uma ocorrência
específica de um elemento utilizando o atributo class.
• Serve para definir vários estilos diferentes para o mesmo elemento.
• Defenido pelo .
Exemplo:
- no CSS: h4.diferente {color:red;}
- no XHTML: <h4 class=“diferente”>Titulo</h4>
![Page 43: Montando sites com XHTML e CSS utilizando os padrões web](https://reader030.vdocuments.net/reader030/viewer/2022012916/548b7536b479597e6a8b4575/html5/thumbnails/43.jpg)
CSS: Seletor id
• Semelhante ao Seletor classe.• A diferença é que utiliza o atributo id, que serve
para identificar exclusivamente um determinado elemento no documento.
• Defenido pelo #
Exemplo:
- no CSS: #header {width:900px;}
- no XHTML: <div id=“header”>…</div>
![Page 44: Montando sites com XHTML e CSS utilizando os padrões web](https://reader030.vdocuments.net/reader030/viewer/2022012916/548b7536b479597e6a8b4575/html5/thumbnails/44.jpg)
CSS: Comentários
Assim como em qualquer linguagem de programação, em CSS é possível adicionar comentários para melhor documentar o código.
Exemplo:
/* Comentário */
![Page 45: Montando sites com XHTML e CSS utilizando os padrões web](https://reader030.vdocuments.net/reader030/viewer/2022012916/548b7536b479597e6a8b4575/html5/thumbnails/45.jpg)
display: Define como um elemento é exibido.
Ex: display: none;
float: Faz o elemento flutuar à esquerda ou à direita do restante do conteúdo.
Ex: float: left;
CSS: Propriedades
![Page 46: Montando sites com XHTML e CSS utilizando os padrões web](https://reader030.vdocuments.net/reader030/viewer/2022012916/548b7536b479597e6a8b4575/html5/thumbnails/46.jpg)
margin-top, margin-right, margin-bottom e margin-left: Define a margem superior, direita, inferior e esquerda de um elemento.Ex: margin-top: 10px;padding-top, padding-right, padding-bottom e padding-left: Define a área superior, direita, inferior e esquerda de espaçamento de um elemento.Ex: padding-right: 5px;
CSS: Propriedades
![Page 47: Montando sites com XHTML e CSS utilizando os padrões web](https://reader030.vdocuments.net/reader030/viewer/2022012916/548b7536b479597e6a8b4575/html5/thumbnails/47.jpg)
font-family: Relação de nomes específicos de famílias de fontes ou de seus nomes genéricos.Ex: font-family: Arial, Helvetica, sans-serif;font-size: Define o tamanho de uma fonte.Ex: font-size: 11px;font-weight: Define o peso de uma fonte.Ex: font-weight: bold;color: Define a cor do texto.Ex: color: red;
CSS: Propriedades
![Page 48: Montando sites com XHTML e CSS utilizando os padrões web](https://reader030.vdocuments.net/reader030/viewer/2022012916/548b7536b479597e6a8b4575/html5/thumbnails/48.jpg)
text-align: Alinha o texto em um elemento.
Ex: text-align: center;
text-decoration: Acrescenta decoração de texto.
Ex: text-decoration: underline;
CSS: Propriedades
![Page 49: Montando sites com XHTML e CSS utilizando os padrões web](https://reader030.vdocuments.net/reader030/viewer/2022012916/548b7536b479597e6a8b4575/html5/thumbnails/49.jpg)
background-color: Define a cor de fundo de um elemento.Ex: background-color: blue;background-image: Define uma imagem como plano de fundo.Ex: background-image: url(images/bg.jpg);background-repeat: Define como uma imagem de fundo será repetida.Ex: background-repeat: no-repeat;
CSS: Propriedades
![Page 50: Montando sites com XHTML e CSS utilizando os padrões web](https://reader030.vdocuments.net/reader030/viewer/2022012916/548b7536b479597e6a8b4575/html5/thumbnails/50.jpg)
border-width: Define a largura da borda de um elemento.
Ex: border-width: 3px;
border-style: Define o estilo da borda.
Ex: border-style: dotted;
border-color: Define a cor da borda.
Ex: border-color: #000000;
CSS: Propriedades
![Page 51: Montando sites com XHTML e CSS utilizando os padrões web](https://reader030.vdocuments.net/reader030/viewer/2022012916/548b7536b479597e6a8b4575/html5/thumbnails/51.jpg)
CSS e o Designer
CSS é a linguagem do designer.
Designer de web precisa saber CSS.
Design não é nada sem controle.
O CSS, dá o controle.
Diego Eis - tableless.com.br
![Page 52: Montando sites com XHTML e CSS utilizando os padrões web](https://reader030.vdocuments.net/reader030/viewer/2022012916/548b7536b479597e6a8b4575/html5/thumbnails/52.jpg)
O Poder do CSS
O CSS Zen Garden tem como alvo entusiasmar, inspirar e encorajar a separação do Conteúdo
(HTML) da Apresentação (CSS)
Mostrar as enormes possibilidades de se obter belos Layouts através do CSS
Como exemplo, podemos Acessar os links e visualizar diversos Layouts diferentes. O código HTML permanece o mesmo, a única coisa que
muda é o arquivo CSS externo.
www.csszengarden.com
![Page 53: Montando sites com XHTML e CSS utilizando os padrões web](https://reader030.vdocuments.net/reader030/viewer/2022012916/548b7536b479597e6a8b4575/html5/thumbnails/53.jpg)
![Page 54: Montando sites com XHTML e CSS utilizando os padrões web](https://reader030.vdocuments.net/reader030/viewer/2022012916/548b7536b479597e6a8b4575/html5/thumbnails/54.jpg)
![Page 55: Montando sites com XHTML e CSS utilizando os padrões web](https://reader030.vdocuments.net/reader030/viewer/2022012916/548b7536b479597e6a8b4575/html5/thumbnails/55.jpg)
![Page 56: Montando sites com XHTML e CSS utilizando os padrões web](https://reader030.vdocuments.net/reader030/viewer/2022012916/548b7536b479597e6a8b4575/html5/thumbnails/56.jpg)
![Page 57: Montando sites com XHTML e CSS utilizando os padrões web](https://reader030.vdocuments.net/reader030/viewer/2022012916/548b7536b479597e6a8b4575/html5/thumbnails/57.jpg)
![Page 58: Montando sites com XHTML e CSS utilizando os padrões web](https://reader030.vdocuments.net/reader030/viewer/2022012916/548b7536b479597e6a8b4575/html5/thumbnails/58.jpg)
Validadores
• Validador de HTML, XHTML, XML e
http://validator.w3.org • Validador de Folhas de Estilo CSS
http://jigsaw.w3.org/css-validator
![Page 59: Montando sites com XHTML e CSS utilizando os padrões web](https://reader030.vdocuments.net/reader030/viewer/2022012916/548b7536b479597e6a8b4575/html5/thumbnails/59.jpg)
Fixe bem...
“XHTML para estruturar
e
CSS para apresentar (formatação).”
![Page 60: Montando sites com XHTML e CSS utilizando os padrões web](https://reader030.vdocuments.net/reader030/viewer/2022012916/548b7536b479597e6a8b4575/html5/thumbnails/60.jpg)
Agradecimentos
Grande parte dos slides utilizados aqui foram retirados da apresentação “Web Standards” de Eduardo Santos que prontamente me foram cedidos para ajudar na disseminação dos Padrões Web.
Todos os créditos a ele.
![Page 61: Montando sites com XHTML e CSS utilizando os padrões web](https://reader030.vdocuments.net/reader030/viewer/2022012916/548b7536b479597e6a8b4575/html5/thumbnails/61.jpg)
Referências
Silva, Maurício Samy – Construindo sites com CSS e (X)HTML. -- São Paulo: Novatec, 2008.
www.w3.org
www.w3schools.com
www.maujor.com
www.tableless.com.br
www.cssnolanche.com.br
![Page 62: Montando sites com XHTML e CSS utilizando os padrões web](https://reader030.vdocuments.net/reader030/viewer/2022012916/548b7536b479597e6a8b4575/html5/thumbnails/62.jpg)
Dúvidas?
![Page 63: Montando sites com XHTML e CSS utilizando os padrões web](https://reader030.vdocuments.net/reader030/viewer/2022012916/548b7536b479597e6a8b4575/html5/thumbnails/63.jpg)
2º Dia:Mão na massa – Site do WTISC
![Page 64: Montando sites com XHTML e CSS utilizando os padrões web](https://reader030.vdocuments.net/reader030/viewer/2022012916/548b7536b479597e6a8b4575/html5/thumbnails/64.jpg)
![Page 65: Montando sites com XHTML e CSS utilizando os padrões web](https://reader030.vdocuments.net/reader030/viewer/2022012916/548b7536b479597e6a8b4575/html5/thumbnails/65.jpg)
![Page 66: Montando sites com XHTML e CSS utilizando os padrões web](https://reader030.vdocuments.net/reader030/viewer/2022012916/548b7536b479597e6a8b4575/html5/thumbnails/66.jpg)
![Page 67: Montando sites com XHTML e CSS utilizando os padrões web](https://reader030.vdocuments.net/reader030/viewer/2022012916/548b7536b479597e6a8b4575/html5/thumbnails/67.jpg)
![Page 68: Montando sites com XHTML e CSS utilizando os padrões web](https://reader030.vdocuments.net/reader030/viewer/2022012916/548b7536b479597e6a8b4575/html5/thumbnails/68.jpg)
![Page 69: Montando sites com XHTML e CSS utilizando os padrões web](https://reader030.vdocuments.net/reader030/viewer/2022012916/548b7536b479597e6a8b4575/html5/thumbnails/69.jpg)
![Page 70: Montando sites com XHTML e CSS utilizando os padrões web](https://reader030.vdocuments.net/reader030/viewer/2022012916/548b7536b479597e6a8b4575/html5/thumbnails/70.jpg)
![Page 71: Montando sites com XHTML e CSS utilizando os padrões web](https://reader030.vdocuments.net/reader030/viewer/2022012916/548b7536b479597e6a8b4575/html5/thumbnails/71.jpg)
![Page 72: Montando sites com XHTML e CSS utilizando os padrões web](https://reader030.vdocuments.net/reader030/viewer/2022012916/548b7536b479597e6a8b4575/html5/thumbnails/72.jpg)
![Page 73: Montando sites com XHTML e CSS utilizando os padrões web](https://reader030.vdocuments.net/reader030/viewer/2022012916/548b7536b479597e6a8b4575/html5/thumbnails/73.jpg)
![Page 74: Montando sites com XHTML e CSS utilizando os padrões web](https://reader030.vdocuments.net/reader030/viewer/2022012916/548b7536b479597e6a8b4575/html5/thumbnails/74.jpg)
Mão na massa - Site do WTISCPassos:• XHTML Padrão• CSS Padrão• Página Programação
– Trabalhando com tabelas• Página Inscrições
– Trabalhando com formulários
![Page 75: Montando sites com XHTML e CSS utilizando os padrões web](https://reader030.vdocuments.net/reader030/viewer/2022012916/548b7536b479597e6a8b4575/html5/thumbnails/75.jpg)
Mão na massa - Site do WTISCVamos aos trabalhos... Inicie o Editor.
OBS: O site foi todo montado durante o minicurso.
Link para o material final:
www.igorpimentel.com/minicursos/xhtmlcss.zip
![Page 76: Montando sites com XHTML e CSS utilizando os padrões web](https://reader030.vdocuments.net/reader030/viewer/2022012916/548b7536b479597e6a8b4575/html5/thumbnails/76.jpg)
Obrigado! ;)