Instituto Federal de Educao, Cincia e Tecnologia de Roraima

Construindo Websites Atravs De Padres Web Com O Uso De

Moyss-Halley Maciel

(X)HTML E CSS

Apresentao
Moyss-Halley Maciel
y y y y

Tcnico de Informtica CEFET-RR Tecnlogo em Anlise em Desenvolviemento de Sistemas IFRR Graduando em Bacharel de Cincia da Computao - UFRR Ps-Graduando em Engenharia de Sistemas - ESAB

Experincia com Web Designer desde 2007.

Programao Programao
1 Dia Conceitos e Prtica

ZzZzZzZz
2 Dia Finalizando a Prtica.

O que so Padres Web?

Padres Web
y

Web Standards
um conjunto de normas, diretrizes, recomendaes, notas,

artigos, tutoriais e afins de carter tcnico, produzidos pelo W3C e destinados a orientar fabricantes, desenvolvedores e projetistas para o uso de prticas que possibilitem a criao de uma Web acessvel a todos, independentemente dos dispositivos usados ou de suas necessidades especiais.
XHTML HTML CSS DOM XML SVG SOAP ...

Sem Padres X Com Padres

Extenso da Mdia Impressa Acessvel de qualquer dispositivo

Layout baseado em Tabelas

Layout baseado em CSS

Contedo, Apresentao e Comportamento aninhados

Separao entre Contedo, Apresentao e Comportamento

Cdigo Incompreensvel

Cdigo Acessvel

Como a Web Dividida? Receita ?

Contedo

Apresentao

Comportamento

Vantagens da adoo dos Padres

Melhor experincia do usurio. Sites mais funcionais. Carregamento mais rpido do contedo e menores problemas com incompatibilidades com navegadores.
y y

Melhor posicionamento em ferramentas de buscas.

Acessibilidade. Estar em conformidade com as leis e diretrizes (sites de instituies pblicas) possibilitando o acesso a pessoas portadoras de necessidades especiais atravs de browser especiais.
y

Vantagens da adoo dos Padres

y

Reduo dos custos de desenvolvimento (simplificar cdigo, separao entre apresentao e contedo). Reduo dos custos de manuteno (menos cdigo, cdigo modular). O contedo pode ser facilmente re-estilizado sem alterao de cdigo. Facilidade em manter a consistncia visual entre os documentos do mesmo site.

Ampliao da audincia. Proporcionar web sites acessveis a uma gama maior de pessoas e um nmero maior de aparelhos/ferramentas para Internet. Entre outros

Desvantagens????? Desvantagens?????

Desvantagens Desvantagens

Implementaes discordantes

Aumento da complexidade inicial

Concluso disso tudo tudo

y

Estes padres no so s necessrios como tambm

resultam em vrias vantagens para os desenvolvedores, produtores e usurios da Web.

Essas vantagens compensam os eventuais problemas

criados pelas incompatibilidades de implementao e permitem que as pessoas exeram maior liberdade quanto criao e compartilhamento de informaes.

Curiosidade Curiosidade

Tableless x Web Standards

Tableless
y

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 no significa que esteja seguindo os

Padres Web, que vo muito alm de um cdigo vlido, e tem preocupaes maiores como a Semntica e a Acessibilidade.

Quem esse tal de W3C

O W3C um consrcio de empresas de tecnologia que desenvolvem padres para a criao e a interpretao dos contedos para a web. Com esses padres, o site desenvolvido pode ser acessado por qualquer pessoa ou tecnologia.

Porque utilizar?
y

Utilizando os padres estabelecidos pelo W3C ao desenvolver

um site, voc est garantindo que qualquer pessoa poder acessar o seu site, atravs de qualquer aparelho ou software.

Como saber?
y

O primeiro passo para saber se voc est seguindo as

recomendaes do W3C, realizar um estudo dessas recomendaes.

Recomendaes XHTML 1.0 (traduzido)

http://www.maujor.com/w3c/xhtml10_2ed.html

Recomendaes CSS nvel 2 (original)

http://www.w3.org/TR/CSS2/

HTML & (X)HTML

HTML - Histria
y

Criador da linguagem: Berners-Lee

y Tim

Desde a publicao do HTML 3.5 no final de 1997, o grupo de

trabalho da W3C tem cada vez mais focado no desenvolvimento do XHTML.

HTML - Conceito
y y

HTML significa Hyper Text Markup Language. Em portugus: Linguagem de Marcao de Hipertexto, ou seja,

a linguagem na qual so escritas as pginas da Web.

Verses 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).

(X)HTML
O (X)HTML, ou eXtensible Hypertext Markup Language, uma Linguagem de Marcao para Hipertexto Extensvel.

Pode ser interpretado por qualquer dispositivo, independentemente da plataforma utilizada, pois as marcaes possuem sentido semntico para as mquinas.

Escrita para substituir o HTML e nada mais do que um HTML "padronizado, claro e limpo".

O que XML?
y

uma recomendao da W3C para gerar linguagens de

marcao para necessidades especiais, tais como:

x Separao do contedo da formatao. x Simplicidade e Legibilidade, para humanos e computadores. x Criao de arquivos para validao de estrutura. x Interligao de bancos de dados distintos.

Verses do XHTML
y

XHTML uma linguagem que comeou como uma

reformulao do HTML 4.01

y

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 atualizao para o XHTML 1.x, est sendo

definido juntamente com o HTML 5.0 no mesmo projeto.

Semntica refere-se ao estudo do significado.

Quando utilizamos cada marcao para o que ela realmente foi criada, estamos construindo um Cdigo Semntico.

Parar de pensar em isso vem aqui, isso vai ali... e pensar na Estrutura da Informao Criar uma Marcao com Significado.

Marcao Semntica Semntica

y

Usar <table></table> apenas para dados tabulares.

Usar <h1></h1> at <h6></h6> para ttulos.

Usar <ol></ol> para Listas Ordenadas e <ul></ul> para listas

No Ordenadas, seguidos do elemento <li></li>.

Usar <em></em> para Enfase, e <strong></strong> para

Enfase Forte

Vantagens de se usar XHTML

y

Web Standard
x XHTML 1.0 uma recomendao da W3C. Isto significa que trata-se de uma linguagem estvel, oficialmente especificada pela W3C, tendo sido projetada e revisada pelos seus membros.

Tempo de carregamento da pgina

x Uma pgina XHTML mais rpida pois os browsers tem a interpretar uma pgina limpa sem ter que decidir sobre renderizao de erros de cdigo.

Portabilidade
x Uma pgina XHTML mais acessvel a aplicaes do usurio, incrementando a interoperabilidade e a portabilidade dos documentos web.

DTD: Document Type Definition

Um padro que define as partes de um documento, e descrevem como eles podem ou no ser usados, o que pode ser colocado em seus interiores, e se so ou no elementos obrigatrios do documento.

Descreve com preciso a sintaxe e a gramtica da linguagem de marcao XHTML.

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">

Esta a mais rgida das declaraes. Exige um documento XHTML segundo as recomendaes do W3C.
y

Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
y

1.0

Esta declarao permite uma maior flexibilidade e indicada para documentos que ainda utilizem elementos em desuso ("deprecated").

XHTML 1.0 - DOCTYPE:

Frameset
<!DOCTYPE Frameset//EN" html PUBLIC "-//W3C//DTD XHTML 1.0 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> Esta declarao permite tudo da declarao transational e mais os elementos especficos para frames.
y

XHTML Elementos obrigatrios:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <head> <title>XHTML Base</title> </head> <body> <p>Contedo</p> </body> </html>

TAGs
y

Os comandos HTML so chamados de TAGs.

Assim como em outras linguagens, os comandos tm uma

sintaxe prpria, e seguem algumas regras: x As TAGs aparecem sempre entre sinais de menor que (<) e maior que (>); x Geralmente so utilizadas aos pares, sendo que a TAG de finalizao de um comando qualquer finalizada com a precedncia de uma barra (/).

Diferenas entre XHTML e HTML

y y y y y y

Documentos devem ser bem formados; Todas as tags devem ser escritas com letras minsculas; Tags devem estar convenientemente aninhadas; Uso de tags de fechamento obrigatrio; Elementos vazios devem ser fechados; Diferena na sintaxe dos atributos;

Diferenas entre XHTML e HTML

Documentos devem ser bem-formados A estrutura bsica do documento deve ser conforme mostrado a seguir:
y

<html> <head> ... </head> <body> ... </body> </html>

Diferenas entre XHTML e HTML

y

Todas as tags devem ser escritas com letras minsculas Errado: <DIV><P>Aqui um texto!</P></DIV> Correto: <div><p>Aqui um texto!</p></div>

Diferenas entre XHTML e HTML

y

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>

Diferenas entre XHTML e HTML

y

Uso de tags de fechamento obrigatrio Errado: <p>Um pargrafo. Correto: <p>Um pargrafo.</p>

Diferenas entre XHTML e HTML

y

Elementos vazios devem ser fechados Errado: <br> <img src=imagem.gif alt=uma imagem> Correto: <br /> <img src=imagem.gif alt=uma imagem />

Diferenas entre XHTML e HTML

y

Diferena na sintaxe dos atributos Errado: <td ROWSPAN=3> <input checked> Correto: <td rowspan=3> <input checked=checked>

CABEALHO (<HEAD>) (<HEAD>)

O cabealho possui informaes sobre o documento em si, seus principais componentes so:

CORPO (<BODY>) (<BODY>)

Como j foi dito o corpo do documento XHTML formado pelas tags de formatao, utilizadas estruturao das informaes a serem exibidas.
y y

ELEMENTOS DE BLOCO x Elementos de bloco so marcadores destinados tanto a estruturao quanto ao estilo da pgina:

CORPO (<BODY>) (<BODY>)

Exemplo de Ttulos ( H1 a H6 )

Exemplo de Blocos

Elementos inline (descritivos de linha)

y

Elementos

inline

so

marcadores

destinados

geralmente para armazenagem de textos. Em destaque temos o elemento <span></span> o qual

o elemento inline mais usando em documentos xhtml.

Tambm podemos observar o conjunto de elementos

voltados a decorao inline...

Tipos de Elementos inline

Na prtica ( inline )

Listas
y

O XHTML d suporte a trs

tipos de listas: Ordenadas x <ol> x <li>Exemplo</li> x </ol> No ordenada x <ul> x <li>Exemplo</li> x </ul> x x x x De Definio <dl> <dt>Item 1</dt> <dd>Descrio 1</dd> </dl>

Atributos
y

Os atributos so utilizados para complementar um elemento

html, seja com relao a seu comportamento ou quanto a sua apresentao. Estes atributos so inseridos sempre nos marcadores de abertura e os valores atribudos a eles devem estar entre aspas duplas.
y

Dentre os atributos podemos destacar os atributos

universais, os quais podem ser utilizados por qualquer marcador existente na linguagem.

Links
y

Hyperlinks ou simplesmente links so elos que ligam uma pgina O link definido pela tag <a>. EXEMPLOS DE LINKS:

a outra ou a si mesma.
y

NCORA  <body>  <p>  <a name="inmeta"></a>  </p>  </body> x <a href="#inmeta">topo</a>

Links
Links entre pginas: <a href="http://www.ifrr.edu.br"> IFRR </a>
y

Link relativo: <a href="../home.php">Home</a>

y

Link para email: <a href="mailto:contato@ifrr.edu.br">Enviar email</a>

y

Imagens
y

Atualmente temos trs formatos de figuras bem difundidos:

GIF, JPEG e PNG, que podem ser includas nas pginas atravs do elemento <img />. Este elemento possui 3 atributos essenciais o atributo alt,src e o title .

Alm desses, O elemento img possui os seguintes atributos

que podem ser usados no xhtml:

Imagens

Formulrio
y

Um formulrio serve para o usurio interagir de

alguma forma com o site, enviando informaes, escolhendo ou selecionando certas funes do site ou entrar em contato com o criador ou dono do site.

O uso bsico para construo de um formulrio

XHTML semntico composto da sua tag <form>, mais o atributo da ao (action) e o mtodo (method) post.

Formulrio Exemplo: Exemplo:

Formulrio Exemplo Visual

Formulrio
y

Os elementos internos de um formulrio xhtml podem ser

divididos em 7 tipos: x x x x x x x Input; Button; Select; Textarea; Label; Fieldset, e Legend.

Formulrio - Input
y

O elemento input um elemento de formulrio, onde ao atributo type

se agregam vrios outros valores que definem outros tipos de inputs, so eles:
radio - Seleo de uma nica alternativa. checkbox Seleo de mltiplas alternativas. submit Elemento que envia informaes de um formulrio. image El. que envia informaes de um formulrio atravs de um boto grfico. text Caixa que recebe valores simples de texto. hidden Envia dados ocultos. password Entrada de linha de texto com informaes ocultas em ****. reset Boto que limpa os dados adicionados pelo usurio. file Seleciona arquivos para um tipo de envio. button Boto evento, semelhante ao input mas aceita contedo.

O que CSS?
y

CSS a sigla para Cascading Style Sheets,

que em

portugus foi traduzido para Folhas de Estilo em Cascata.

Folhas de estilo nada mais so do que documentos onde so

definidas regras de formatao e de estilos, a serem aplicadas aos elementos estruturais de marcao de texto (Exemplos de aplicao do CSS: HTML, XHTML, XML etc).

O que CSS?
y

Os estilos definem como exibir os elementos HTML; Os estilos foram adicionados ao HTML 4.0 para resolver um

problema; Folhas de estilo externas podem poupar um monte de

trabalho; Folhas de estilo externas so armazenados em arquivos de

extenso .css.

Verses
y

CSS 1.0 CSS level 1

x Em setembro de 1994 surgiu a primeira proposta; x Em dezembro de 1996 lanada como Recomendao oficial do W3C.

CSS 2.0 CSS level 2

x Publicada em maio de 1998; x Ultima reviso: 12 de maio de 2008.

CSS 2.1 CSS level 2 revision 1

x Candidata a Recomendao oficial do W3C em 23 de abril de 2009.

CSS 3.0 CSS level 3

x Proposta em 2001.

CSS + XHTML
y

Arquivo Externo <head> <link rel="stylesheet" type="text/css" href=estilos.css" /> </head>

y

Interno <head> <style type="text/css"> hr {color:sienna;} p {margin-left:20px;} </style> </head>

Em linha <p style="color:blue; margin-left:20px">This is a paragraph.</p>

Sintaxe
y

O CSS tem duas sintaxes bsicas, o seletor e uma ou

vrias declaraes;

Marcadores
Os marcadores so atributos das Tags HTML ou elas mesmas.
y

ID #para1 { text-align: center; color: red; }

CLASS .center{ text-align: center; }

Tag h2 { font-size: 20px;}

*Nunca comear classes com nmeros, pois somente o Internet Explorer suporta isto.

Hierarquia (cascata)
y

Quando definimos um estilo para um marcador, todos os

elementos que se nele se encaixam vo herdar o estilo. Se defino um estilo para a Tag<P> todas as tags<P> herdaro este estilo, a no ser que outra definio anule este estilo. Exemplo: P { color: red; font-family:Verdana; } P.Contato { color: blue; }

Hierarquia (cascata)
y

O melhor jeito para se prevenir de hierarquias indesejadas

definir um padro bem simples no inicio e depois definir profundamente os estilos dentro de tags... Exemplo:
Body{ font: normal 12px Verdana; color: #000 } #Menu ul li a { font: bold14pxVerdana; color: #fff; }

CSS: Comentrios
Assim como em qualquer linguagem de programao, em CSS possvel adicionar comentrios para melhor documentar o cdigo.

Exemplo: /* Comentrio */

CSS: Propriedades
float: Faz o elemento flutuar esquerda ou direita do restante do contedo. Ex.: float: left; Margin: Define a margem superior, direita, inferior e esquerda de um elemento. margin-top; margin-right; margin-bottom; e margin-left. Ex.: margin-top: 10px;

CSS: Propriedades
y

Padding: Define a rea superior, direita, inferior e esquerda de

espaamento de um elemento. padding-top; padding-right; padding-bottom; e padding-left. Ex.: padding-right: 5px;

y

font-family: Relao de nomes especficos de famlias de fontes ou de seus

nomes genricos. Ex.: font-family:Arial, Helvetica, sans-serif;

y

font-size: Define o tamanho de uma fonte. Ex.: font-size: 11px;

CSS: Propriedades
font-weight: Define o peso de uma fonte. Ex.: font-weight: bold; color: Define a cor do texto. Ex.: color: red; text-align: Alinha o texto em um elemento. Ex.: text-align: center; text-decoration: Acrescenta decorao de texto. Ex.: text-decoration: underline;

CSS: Propriedades
background: Define a cor de fundo e de um elemento e tambm pode colocar uma imagem. Ex.: background: #000000 url(images/bg.jpg);

CSS: Propriedades
Links:
a:link {color:#FF0000;} a:visited {color:#00FF00;} /* Visitado */ a:hover {color:#FF00FF;} /* mouse over */ a:active {color:#0000FF;} /* selecionado */

CSS: Propriedades
Largura e altura de um elemento
y

Height: para definir a altura.

y y

Width: para definir a largura. Com valor numrico e definido em Pixels (px) div { height: 500px; width: 900px; }

CSS: Propriedades
y

Borda border: 1px solidblack; border-bottom: 1px solidred; border-left: 1px dashed#0FC; border-right: 1px solidpink; border-top: 1px dotted#000; Float Especifica se h ou no uma caixa que deve flutuar. div { float: left;} float: left; float: right; float: none;

Validao W3C
W3C Markup Validation Service
y

O servio de Markup Validatior da W3C, um servio gratuito, que ajuda a

analisar documentos web usando as linguagens HTML ou XHTM.

Estas linguagens esto definidas por especificaes tcnicas. A validao de

documentos web, um importante passo, que pode ajudar a melhorar drasticamente a qualidade de um website, permitindo poupar tempo e dinheiro. Esta ferramenta de anlise, alm de identificar os eventuais erros da pgina tambm identifica a possvel soluo para o problema.

Existem dois tipos de ferramentas: uma para anlise dos ficheiros HTML e para

os ficheiros CSS. Estas ferramentas esto disponveis no website da W3C ou ento nos links listados abaixo:
y y

HTML Validator - http://validator.w3.org/ CSS Validator - http://jigsaw.w3.org/css-validator

Validando o site
http://www.w3schools.com/web/web_validate.asp

XHTML

CSS

Dvidas? Dvidas?

Referncias
y Livro

Construindo sites com XHTML e

CSS MAUJOR.
y http://www.w3c.br/Home/WebHome y http://tableless.com.br/ y http://maujor.com/

Agradecimentos
y Saula

Dantas; y Walber Medrado, e y Rmulo Ferreira.

Vamos praticar??? praticar???

Email / MSN
y

tzhalley@gmail.com