Construindo Sites com (X)HTML & CSS

( Utilizando padres web )

Moyss-Halley Maciel

Instituto Federal de Educao, Cincia e Tecnologia de Roraima.

Apresentao
y
y y y y

Moyss-Halley Maciel
Tcnico de Informtica. Tecnlogo em Anlise em Desenvolviemento de Sistemas. Graduando em Cincia da Computao. Ps-Graduando em Engenharia de Sistemas.

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
Layout baseado em Tabelas Acessvel de qualquer dispositivo

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

y

Melhor experincia do usurio. Sites mais funcionais. Carregamento mais rpido do contedo e menores problemas com incompatibilidades com navegadores. 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.

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

Estes padres no so s necessrios como tambm resultam em vrias vantagens para os desenvolvedores, produtores e usurios da Web. y 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.
y

Curiosidade Curiosidade

Tableless x Web Standards

Tableless
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

y

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:
Tim Berners-Lee 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
HTML significa Hyper Text Markup Language. y Em portugus: Linguagem de Marcao de Hipertexto; ou seja, E a linguagem na qual so escritas as pginas da Web.
y

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.
y

Escrita para substituir o HTML e nada mais do que um HTML

y "padronizado, claro

e limpo".

O que XML?
y

uma recomendao da W3C gerar linguagens de marcao necessidades especiais, tais como:

para para

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

Verses do XHTML
XHTML uma linguagem que comeou como uma reformulao do HTML 4.01 y Usando XML 1.0:
y
XHTML 1.0 (Janeiro de 2000) XHTML 1.1: (Maio de 2001) XHTML 2.0:Ainda um projeto de trabalho do W3C. y XHTML 5.0: uma atualizao para o XHTML 1.x, est sendo definido juntamente com o HTML5 no mesmo projeto.

Semntica refere-se significado.

ao

estudo

do

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

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

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

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

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

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

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

XHTML 1.0 - DOCTYPE:

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

Esta declarao permite tudo da declarao transational e mais os elementos especficos para frames.

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 y

Os comandos HTML so chamados de TAGs. Assim como em outras linguagens, os comandos tm uma sintaxe prpria, e seguem algumas regras: As TAGs aparecem sempre entre sinais de menor que (<) e maior que (>); 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

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

Diferenas entre XHTML e HTML

y

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

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

y

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

ELEMENTOS DE BLOCO
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 x x <ol> <li>Exemplo</li> </ol>

No ordenada
x x x <ul> <li>Exemplo</li> </ul>

De definio
x x x x <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. 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 a outra ou a si mesma. O link definido pela tag <a>. EXEMPLOS DE LINKS:
NCORA
 <body>  <p>  <a name="inmeta"></a>  </p>  </body> x <a href="#inmeta">topo</a>

Links
y y

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

y y

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

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

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:

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

y y y y y y y y y y

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?
Os estilos definem como exibir os elementos HTML; y Os estilos foram adicionados ao HTML 4.0 para resolver um problema; y Folhas de estilo externas podem poupar um monte de trabalho; y Folhas de estilo externas so armazenados em arquivos de extenso .css;
y

Verses
CSS 1.0 CSS level 1 Em setembro de 1994 surgiu a primeira proposta Em dezembro de 1996 lanada como Recomendao oficial do W3C y CSS 2.0 CSS level 2 Publicada em maio de 1998 Ultima reviso: 12 de maio de 2008 y CSS 2.1 CSS level 2 revision 1 Candidata a Recomendao oficial do W3C em 23 de abril de 2009 y CSS 3.0 CSS level 3 Proposta em 2001
y

CSS + XHTML
y

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

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

y y

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; }

y y

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: bold14px Verdana;
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
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; 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;

CSS: Propriedades
font-family: Relao de nomes especficos de famlias de fontes ou de seus nomes genricos. Ex: font-family:Arial, Helvetica, sans-serif; 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
y y y y y

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

CSS: Propriedades
y

Largura e altura de um elemento

y y y

Height: para definir a altura. 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 ou no uma caixa deve flutuar. div { float: left;} float: left; float: right; float: none;

Validao W3C
y y

W3C Markup Validation Service 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

Dvidas? Dvidas?