AP Webstandards Com Html5 Rl11052012

WEBSTANDARDS
Com HTML5
Todos os direitos desta publicao foram reservados sob forma de lei :
Rua Monsenhor Celso, 256 - 1 andar - Curitiba Paran

Fone / Fax: (41) 3324-0015
http://www.elaborata.com.br
WEBSTANDARDS
Com HTML5
Proibida qualquer reproduo, parcial ou total, sem prvia autorizao.
Agradecimentos:
Equipe Elaborata Informtica
1 Edio
2012
Srs. Alunos
A Elaborata Informtica, com o objetivo de continuar prestando-lhe um excelente nvel de
atendimento e funcionalidade, informa a seguir algumas regras que devem ser observadas quando
do uso do laboratrio e seus equipamentos, visando mant-los sempre em um perfeito estado de
funcionamento para um melhor aproveitamento de suas aulas.
proibido:
Atender celular. Por favor, retire-se da sala, voltando assim que desligar.
Fazer cpias ilegais de software (piratear), com quaisquer objetivos.
Retirar da sala de treinamento quaisquer materiais, mesmo que a ttulo de emprstimo.
Divulgar ou informar produtos ou servios de outras empresas sem autorizao por escrito
da direo Elaborata.
Trazer para a sala de treinamento, qualquer tipo de equipamento pessoal de informtica,
como por exemplo:
Computadores de uso pessoal
Notebooks
Placas de vdeo
Placas de modem
Demais perifricos
Peas avulsas como memria RAM, ferramentas, etc.
O consumo de alimentos ou bebidas

Fumar
Atenciosamente
Elaborata Informtica
Sumrio
Captulo 1 - ...................................................................................................................................9
Introduo.....................................................................................................................................9
1.1 Introduo linguagem de marcao.........................................................................................11
1.2 A histria do HTML.....................................................................................................................12
1.3 As Web Standards........................................................................................................................12
1.4 A histria das CSS........................................................................................................................13
1.5 Semntica......................................................................................................................................13
1.6 Acessibilidade...............................................................................................................................13
1.7 O protocolo HTTP........................................................................................................................14
1.8 O que XHTML...........................................................................................................................14
Captulo 2 - .................................................................................................................................15
Entendendo o XHTML...............................................................................................................15
2.1 Entendendo o XHTML................................................................................................................17
2.2 Sintaxe da linguagem...................................................................................................................17
2.3 Atributos.......................................................................................................................................18
2.4 Estrutura bsica...........................................................................................................................20
Captulo 3 -..................................................................................................................................23
Criando um documento XHTML...............................................................................................23
3.1 Criando um documento XHTML................................................................................................25
3.2 Formatao de texto.....................................................................................................................26
3.2.1 Listas.........................................................................................................................................................28
3.2.2 Cabealhos................................................................................................................................................31
3.3 Inserindo elementos......................................................................................................................32
3.3.1 Linha horizontal........................................................................................................................................32
3.3.2 Imagens.....................................................................................................................................................33
3.4 Comentrios..................................................................................................................................35
Captulo 4 -..................................................................................................................................37
Meta Tags....................................................................................................................................37
4.1 Entendendo as meta tags..............................................................................................................39
4.2 Elemento Link..............................................................................................................................42
Captulo 5 - .................................................................................................................................43
Estruturando o layout.................................................................................................................43
5.1 Estruturando o layout..................................................................................................................45
5.2 Layout por tabelas........................................................................................................................46
5.2.1 Criao dos elementos da tabela...............................................................................................................49
5.3 Layout por div..............................................................................................................................51
5.4 Layout pelas novas tags HTML5.................................................................................................54
5.5 Iframes..........................................................................................................................................58
5.5.1 Novos atributos HTML5 para iframes......................................................................................................59
5.5.2 Sandbox.....................................................................................................................................................59
5.5.3 Seamless....................................................................................................................................................59
5.5.4 Srcdoc........................................................................................................................................................60
Captulo 6 -.................................................................................................................................61
Links............................................................................................................................................61
6.1 Links..............................................................................................................................................63
6.1.1 Tipos de links............................................................................................................................................64
Captulo 7 -.................................................................................................................................67
Formulrios................................................................................................................................67
7.1 Trabalhando com formulrios.....................................................................................................69
7.2 Novas funes para formulrios com HTML5...........................................................................75
7.2.1 Atributo form.............................................................................................................................................75
7.2.2 Atributos para campo numrico................................................................................................................75
7.2.3 Atributo range...........................................................................................................................................76
7.2.4 Atributo autocomplete...............................................................................................................................76
7.2.5 Atributo placeholder..................................................................................................................................76
7.2.6 Atributo autofocus.....................................................................................................................................76
7.3 Validao de formulrio..............................................................................................................77
7.3.1 Atributo required.......................................................................................................................................77
7.3.2 Atributo email...........................................................................................................................................77
Captulo 8 ...................................................................................................................................81
Entendendo as CSS....................................................................................................................81
8.1 Entendendo as CSS......................................................................................................................83
8.2 Sintaxe CSS...................................................................................................................................86
8.3 Agrupamentos...............................................................................................................................87
8.4 Herana.........................................................................................................................................88
8.5 Propriedades para espaamentos................................................................................................89
8.6 Propriedades para fundo.............................................................................................................91
8.7 Propriedades para bordas............................................................................................................92
8.8 Formatao de textos...................................................................................................................93
8.9 Listas.............................................................................................................................................94
8.10 Propriedades para tamanho e posicionamento........................................................................94
8.11 Propriedade display....................................................................................................................95
8.12 Propriedade overflow.................................................................................................................95
8.13 Propriedade Cursor....................................................................................................................96
8.14 Comentrios................................................................................................................................96
8.15 Pseudo-elementos........................................................................................................................97
8.16 Id e class......................................................................................................................................99
8.16.1 Id..............................................................................................................................................................99
8.16.2 Class......................................................................................................................................................100
8.17 Trabalhando com div's.............................................................................................................101
Captulo 9 -...............................................................................................................................105
Trabalhando com CSS3............................................................................................................105
9.1 Trabalhando com CSS3............................................................................................................107
9.2 Sombreamento de caixas............................................................................................................107
9.3 Sombreamento de textos............................................................................................................108
9.4 Cantos arredondados.................................................................................................................108
9.5 Transition....................................................................................................................................109
9.6 Transparncia.............................................................................................................................110
9.7 @Font-face e API Google Webfonts.........................................................................................111
9.8 Gradiente....................................................................................................................................114
Captulo 10 -.............................................................................................................................115
udio e vdeo.............................................................................................................................115
10.1 A revoluo do HTML5...........................................................................................................117
10.2 udio.........................................................................................................................................118
10.2.1 Extenses suportadas.............................................................................................................................119
10.3 Vdeo..........................................................................................................................................120
10.3.1 Extenses suportadas.............................................................................................................................121
Captulo 11 -.............................................................................................................................123
Lista de tags XHTML e atributos CSS.....................................................................................123
11.1 Tags HTML..............................................................................................................................125
11.2 Lista de novas tags HTML5.....................................................................................................125
11.3 Atributos Globais HTML5.......................................................................................................127
11.4 Lista de propriedades CSS.......................................................................................................128
11.5 Lista das novas propriedades CSS3........................................................................................131
Captulo 12 -.............................................................................................................................133
Tabelas para referncia............................................................................................................133
12.1 Tabela de cores.........................................................................................................................135
12.2 Tabela de fontes-padro...........................................................................................................136
12.3 Tabela de caracteres.................................................................................................................137
Captulo 13 -.............................................................................................................................139
Concluso..................................................................................................................................139
13.1 Leitura complementar..............................................................................................................141
13.2 Referncias para consulta........................................................................................................141
13.3 Referncias bibliogrficas........................................................................................................141
Webstandards com HTML5
Captulo 1 -
Introduo
Elaborata Informtica www.elaborata.com.br 9


1.1 Introduo linguagem de marcao
O HTML (Hypertext Markup Language ou Linguagem de Marcao de Hipertexto)

a linguagem com que se formam as pginas da web. Atravs dela, o navegador (ou browser) traduz
(renderiza) a pgina de uma forma grfica para que o usurio possa facilmente interagir.
O Curso de Web Standards com HTML5 focar na construo de pginas da web, atravs
da linguagem HTML, sua estilizao por meio das CSS e as inovaes trazidas por novas verses
dessas linguagens (HTML5 e CSS3).
HTML e CSS so linguagens muito simples e de fcil compreenso, dispensando um
conhecimento prvio em qualquer outra linguagem de programao para seu entendimento,
bastando apenas ateno e objetividade. No que concerne s suas novas verses, com efeitos e
metodologias de trabalho inovadoras, veremos o porqu da necessidade de novas tags e comandos e
como facilitar a programao web no futuro prximo.
Alm de aprendermos na prtica o trabalho com as linguagens de marcao, veremos, antes
de tudo, o que so as Web Standards (padres web), o W3C, a histria no que diz respeito rede
mundial atual, e os protocolos de envio de dados.

1.2 A histria do HTML
Em 1989, Tim Berners-Lee, fsico ingls, procurava um meio de se comunicar com seu grupo
de cientistas, o que o levou criao do conceito de hipertexto, uma forma de comunicar e interligar
documentos entre usurios. Em 1990, Tim cria o primeiro navegador capaz de se comunicar entre
computadores da NeXT, empresa criada por Steve Jobs, em 1985. Comprovado por experincias no
CERN (Centro Europeu de Pesquisas Nucleares), foi criado o embrio do que seria hoje a WWW
(World Wide Web). Estas informaes eram e ainda so transmitidas atravs de um protocolo
HTTP (Hypertext Transfer Protocol), e interpretadas pelo browser.
O conceito foi popularizado, em 1992, com a criao do navegador Mosaic pela NCSA
(National Center for Supercomputing Applications Illinois EUA). Com o surgimento de novos
navegadores, cada um deles inserindo novas formas de linguagens de marcao (HTML) prprias, a
web foi se tornando um caos.
Atualmente a verso HTML em vigor a 4.01, tendo sua verso 5 em fase de testes. A
verso 5 promete, alm de manter a estrutura atual, trazer novidades, principalmente no que
concerne estruturao do site, insero de udio e vdeo e formulrios.
1.3 As Web Standards
Para coordenar e padronizar as linguagens de marcao, em 1994, Tim Berners-Lee, em

parceria com o CERN, cria o W3C (World Wide Web Consortium), com sede no MIT
(Massachusets Institute of Tecnology), um conscio internacional formado por, aproximadamente, 300
membros, entre empresas, rgos governamentais, instituies e pesquisadores. Estes padres so o
que chamamos de Web Standards, que nos relatam a forma correta de utilizar as linguagens web at
os dias de hoje.
Observe que padronizar, de maneira alguma busca limitar ou formalizar a criatividade, mas
sim tornar as linguagens web possveis de serem utilizadas por todo o mundo, em diversos
navegadores, sem perda de informaes e qualidade de navegao. dever de todos os designers e
desenvolvedores web procurar, regularmente, enquadrar seus projetos dentro dos padres mundiais,
para que manter, atualizar e administrar os mesmos no se torne uma tarefa rdua e complicada.

1.4 A histria das CSS
Atualizar pginas HTML, reestruturar sua aparncia, ou manter um site com notcias e
novidades constantes era uma tarefa desgastante. Pense em um site de 30 pginas, onde se
pretendesse alterar a sua cor de fundo. Se pensssemos realizar este processo por meio da linguagem
HTML, precisaramos alterar as pginas uma a uma. Para resolver esse problema, em 1996, o W3C
adotou sua primeira verso CSS (sigla para Cascading Style Sheets, ou Folhas de Estilo em
Cascata). Atravs dela, prope-se que nenhuma alterao na aparncia do site seja feita por HTML,
cabendo ao HTML apenas dar a estrutura e as informaes em si, sem formatao. Toda a
estilizao do site fica a cargo das CSS, que como veremos, podem ser incorporadas ao cdigo, ou
linkadas em arquivos externos para estilizao do site todo (estas geralmente mais recomendadas).
Esta uma regra obrigatria quando se adota os padres web (Web Standards). Desta forma,
alterando apenas algumas linhas de cdigo, teremos todo o site com a aparncia totalmente
reformulada.
Um exemplo prtico do poder das CSS o Zen Garden, um desafio lanado aos Web
Designers onde nenhuma alterao no cdigo HTML poderia ser feita, apenas nas folhas de estilo, e
assim, podemos ver o site se transformando totalmente a cada layout CSS desenvolvido. Conferir em:
http://www.csszengarden.com.
1.5 Semntica
Semntica na lngua portuguesa o estudo do significado das palavras. Na web, chamamos de

semntica a utilizao das tags e comandos para aquilo que realmente servem. possvel, mas no
semntico, utilizar comandos para uma funo, sendo que na verdade ela foi criada para outra.
1.6 Acessibilidade
O bom profissional web desenvolve seus projetos levando em considerao a acessibilidade.

Acessibilidade a preocupao com que o projeto possa ser acessado por qualquer tipo de usurio,
desde usurios usuais at usurios portadores de necessidades especiais. Para isso, indispensvel
que o projeto traga alguns comandos que possibilitem o acesso a esses usurios.
Tambm entra no aspecto acessibilidade o trabalho para que o projeto tenha a possibilidade
de ser exibido em diversos tipos de navegadores diferentes, dispositivos e resolues.

1.7 O protocolo HTTP
necessrio para um bom Web Designer entender como funciona o envio e recebimento das
informaes pela web, para assim poder trabalhar melhor com imagens, cdigos e facilitar o
entendimento da pgina. O Protocolo HTTP (Hypertext Tranfer Protocol, ou Protocolo de
Transferncia de Hipertexto) a forma como ocorre a comunicao entre o cliente (navegador) e
um servidor web, onde o site est hospedado. Esse protocolo usado pela World Wide Web desde
1990. Essa comunicao se d no padro requisio-resposta, ou seja, o cliente envia uma requisio
de um recurso, e o servidor encaminha a resposta em forma de pacotes de dados, presumindo o xito
na conexo estabelecida. Assim, quando o cliente pede um documento HTML, o servidor envia o
documento ao usurio juntamente com todos os pacotes de dados a ele ligados, sejam eles imagens,
vdeos, animaes, ou arquivos de programao a ele linkados, como CSS, PHP ou Java Script.
1.8 O que XHTML
O XHTML a reformulao do cdigo HTML, com os conceitos e regras do XML

(Extensible Markup Language). O XML mais rgido em sua sintaxe, o que a torna uma
linguagem universal. Os documentos XHTML sero exibidos no navegador de forma similar ao
HTML, s que mais compatvel aos navegadores existentes. Por exemplo, na prtica poderamos
criar uma pgina com regras simples, sem descrever o documento em que estamos trabalhando, mas
isto funcionaria na prtica? Talvez sim, mas desordenadamente, em poucos navegadores e com fortes
tendncias a no se manter em demais idiomas e padres de caracteres. J em um documento
XHTML, devemos descrever o documento, expor a linguagem utilizada, o tipo de formatao, isto
s para iniciarmos nosso projeto.

Captulo 2 -
Entendendo o XHTML


2.1 Entendendo o XHTML
As pginas web (sites ou stios) so sempre hospedadas em um servidor, e acessadas pelo

cliente por meio de um endereamento. Esse endereamento no formato numrico (IP ou
Internet Protocol), que pode ser visualizado por intermdio do prompt de comando do Windows
atravs do comando ping nome do site. Para facilitar o acesso por parte dos usurios, registra-se
um domnio com um nome para que seja acessado atravs de uma URL. Quando o cliente faz uma
solicitao atravs de uma URL, o pacote de dados retornado poder ser um arquivo no formato
XHTML, que formado por tags e comandos que estruturam e formam o contedo de toda a
pgina. Esses comandos so traduzidos pelo navegador e exibidos ao usurio no formato de imagens,
textos e objetos inseridos na pgina. Podemos visualizar o cdigo XHTML de qualquer site da web
por meio da opo no navegador Exibir cdigo-fonte, em alguns casos, CTRL+U.
Existem outras maneiras de se escrever o cdigo HTML que talvez funcionariam na prtica,
mas estariam fora dos padres do W3C. No nosso caso, estaremos aprendendo apenas a forma
correta de escrever o cdigo, dentro dos padres internacionais.
2.2 Sintaxe da linguagem
A estruturao do XHTML baseado em tags, ou etiquetas, que so comandos que dizem ao

navegador o tipo de formatao ou estrutura que deve ser criada na pgina, como tabelas, pargrafos,
cabealhos e uma infinidade de outras funes. Toda tag iniciada por um sinal de menor (<) e
encerrada por um sinal de maior (>). Entre esses sinais teremos a descrio da tag em si, como por
exemplo, a tag <p> para pargrafos, ou <img /> para imagens. Ao inserir uma tag o navegador a
interpretar como um comando, e insere o elemento desejado.
Existe tambm a tag de fechamento, que contm uma barra (/), como em </p>. Desta
forma o texto ou objeto que sofre interferncia ficar entre a tag de abertura e a tag de fechamento,
como em: <p>Elaborata Informtica</p>. No exemplo, o texto est contido em um pargrafo.
Em alguns casos podem existir tags que no precisam de fechamento, mas fecham em si
mesmas, por nunca haver a necessidade de colocar um elemento dentro dela, como no caso de
imagens (<img />), quebras de linha (<br />), linha horizontal (<hr />), entre outros. Nesse caso,
a barra inserida no final da prpria tag de abertura.
As tags que possuem tag de fechamento so chamadas de Elemento Contedo, e as que
fecham em si mesmas de tag de Elemento Vazio. Veja o exemplo:
Tag de elemento contedo Tag de elemento vazio

<p>Texto em pargrafo</p> <hr />
<div>Texto em div</div> <img src=nomedaimagem.jpg />
<strong>Texto em negrito</strong> <input type=button value=enviar />

2.3 Atributos
Algumas tags precisam de maiores especificaes para chegar-se ao objetivo desejado. Essas
especificaes sero descritas dentro da prpria tag e so denominadas de atributos. Para
exemplificar: a tag <table> iniciar uma tabela, mas sem bordas, cores, identificao e espaamentos.
Se quisermos dar propriedades a essa tabela, como bordas, colocaramos o atributo border dentro da
tag <table> para fazer a solicitao, conforme sugerido abaixo:
<table border=1>
Note que o atributo colocado logo depois da tag,, mas ainda antes do sinal de maior,
separado com um espao. Observe tambm que todo o atributo precisa de uma especificao do seu
respectivo valor (no caso, largura da borda da tabela igual a 1 pixel), e que o valor vem sempre depois
de um sinal de igual e fica entre aspas duplas. Essa ser a sintaxe padro para todos os atributos de
tags.
Existem atributos que so chamados de atributos globais, isto , podem ser inseridos em
qualquer tag do documento. Essa lista de atributos globais est ainda maior agora com o HTML5. J
grande parte dos atributos s funcionam se inseridos em tags especficas.
Vamos conhecer algumas regras para o uso correto do XHTML:
As tags devem ser escritas em letras minsculas;
A metalinguagem XML case-sensitive (sensvel a maisculas e minsculas), assim como o

XHTML. Sempre que formos escrever os cdigos utilizaremos somente letras minsculas.
As tags devem ser aninhadas;
Ao se abrir duas tags sequnciais, como no caso de precisar colocar um texto em negrito de
um pargrafo que est dentro de uma diviso, a formatao correta seria a seguinte:
<div><p><strong>texto em negrito</strong></p></div>
Perceba que a primeira tag aberta foi a ltima a ser fechada, e a ltima tag aberta foi a primeira
a ser fechada.
Sempre fechar as tags;

Nunca esquecer de informar na pgina XHTML em qual momento determinada tag deve
parar de agir, fechando-a. No caso de tags de Elemento Vazio, lembre-se de colocar a barra de
fechamento ao final dela.
Todo o atributo deve possuir o sinal de igual, e o valor dele colocado entre aspas.
Ao definir o valor do atributo de determinada tag, sempre dever haver um sinal de igual e
seu valor entre aspas duplas:
<tag atributo=valor>formatao</tag>
H raras excees em que o atributo no tem valor, por no haver necessidade de

especificao, so os chamados atributos booleanos, como em:
<input type=checkbox name=cursos checked />

2.4 Estrutura bsica
Vamos para a prtica. O cdigo XHTML pode ser criado em um software de texto qualquer,
desde o Dreamweaver, uma IDE para o trabalho para cdigos web, at o Bloco de Notas. No
nosso caso utilizaremos um software gratuito chamado Notepad++, muito semelhante ao Bloco de
Notas do Windows, porm com algumas funes a mais que nos auxiliaro a entender melhor o
nosso cdigo. Depois de abrir o software, teremos algumas tags padres a serem inseridas, que devem
existir em todo o documento XHTML para podermos comear, so elas:
DTD (Document Type Definition);
a definio do tipo de documento, que diz ao navegador o tipo de site que estamos
criando. Ele deve ser escrito na primeira linha do cdigo, no podendo haver nada antes dele. Podem
ter trs variaes:
Strict:
Este Doctype utilizado em casos de documentos com a XHTML mais restrita, que no
aceita comandos que no sigam as normas e padres do W3C.
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>
Transitional:
Doctype de modo geral mais utilizado. Tem as restries de um XHTML comum, mas
aceita algumas variaes de sintaxe. Tambm empregado no caso de dispositivos que no possuam
suporte as CSS.
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
Frameset:
Este tipo de documento empregado somente se a pgina possuir frames, efeito em desuso
nos dias atuais.
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Frameset//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd>
Dica: Observe que o DTD um cdigo grande e de difcil assimilao. Esta ser a primeira
inovao do HTML5 que veremos. No HTML5 a DTD ficou como <!DOCTYPE html>.

Tag <html>
Tag que d incio ao projeto. fechada ao final do projeto com </html>. Nos padres
comuns do W3C, d-se um atribulo a ela que indica as especficas regras do seu XML, que o
atributo xmlns e usa como valor um link onde essas regras se encontram, ficando assim:
<html xmlns=http://www.w3.org/1999/xhtml>
Tag <head>
Define o cabealho da pgina. O que inserirmos entre a tag <head> e a </head> no

entrar na pgina como elemento fsico, mas ir influenci-la, como no caso da tag <title> que
veremos a seguir, meta-tags e tags de ligao com documentos externos.
Tag <title>
O title ou ttulo do site o nome que aparecer na barra de ttulo do navegador, em suas guias
(se houver), e na barra de tarefas do Windows (no caso de verses mais antigas). Permanece entre as
tags <head> e </head>. Colocaremos o ttulo da pgina entre as tags de abertura e fechamento:
<title>Ttulo da pgina</title>
Tag <body>
O corpo do site, onde sero inseridas as informaes em si. Ao final, a estrutura bsica para
iniciarmos qualquer projeto ficar assim:
<!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>
<head>
<meta http-equiv=Content-Type content=text/html;charset=utf-
8 />
<title>Elaborata Informtica</title>
</head>
<body>
</body>
</html>

Nota: A meta-tag charset diz ao navegador o tipo de caracteres que est sendo utilizado na pgina.
O valor utf-8 o padro atual para nosso idioma. Voc pode substituir o valor utf-8 por outro valor,
como iso-8859-1 para latin-1, mas ele garante menos suporte para os caracteres atuais.
No caso do documento utilizando as inovaes do HTML5, ficar assim:
<!DOCTYPE html>
<html lang=pt-br>
<head>
<meta charset=UTF-8 />
<title>Elaborata Informtica</title>
</head>
<body>
</body>
</html>
O HTML5 encurtou o DTD, facilitou o entendimento da linguagem utilizada no

documento e o tipo de caracteres.
Obs.: Note que os cdigos foram organizados com tabulaes para facilitar seu entendimento,
chamamos isso de indentao. No interfere na funo do cdigo, mas facilitar a leitura e
atualizao do mesmo.

Captulo 3 -
Criando um documento
XHTML


3.1 Criando um documento XHTML
Aps digitarmos toda a estrutura bsica do XHTML no software adequado, devemos salv-
la corretamente. Para isso, acesse o menu Arquivo/Salvar como... e defina o nome do arquivo
seguido da extenso .html. Caso esteja criando a pgina inicial do site, salve com o nome index.html
para que o servidor identifique o documento como pgina inicial. Podemos abrir esse arquivo
normalmente para visualiz-lo no navegador desejado, ou clicar com o boto direito sobre ele,
escolhendo a opo Edit with Notepad++ para continuar o cdigo.
Obs.: Os nomes de todos os arquivos do projeto que sero publicados na web no podem conter
espaos em branco, acentos, cedilhas ou caracteres especiais.
Dica: Crie uma pasta para armazenar todos os arquivos do seu projeto, com subpastas para cada
categoria de arquivos, como imagens, animaes, CSS, PHP e assim por diante.

3.2 Formatao de texto
Atualmente, a formatao de textos realizada quase que totalmente por CSS, porm, faz-se
necessria a insero de uma tag no documento para que as CSS possam estiliz-lo. Veremos como
fazer essa formatao por XHTML, e mais tarde sua estilizao pelas folhas de estilo. As principais
tags para formatao de textos so:
Tag Funo
<u></u> Sublinhado.
<b></b> ou <strong></strong> Negrito.
<i></i> ou <em></em> Itlico.
Pode ter os atributos face para tipo da letra, size para tamanho e
<font></font>
color para cor.
Novo pargrafo. Pode conter atributos como align para
<p></p>
alinhamento do texto.
<br /> Quebra de linha.
<h1></h1>, <h2></h2>,
Tags de Cabealho.
<h3></h3>, ...
Veja o exemplo a seguir:
<!DOCTYPE html>
<html lang=pt-br>
<head>
<title>Formatao de textos</title>
</head>
<body>
<p align=justify><strong>Web Standards</strong> um conjunto de
<u>normas, diretrizes, recomendaes, notas, artigos, tutoriais e afins</u>
de carter tcnico, produzidos pelo <font color=#009933><i>W3C</i></font> e
destinados a orientar fabricantes, desenvolvedores e projetistas. <br /> Seu
uso possibilita a criao de uma <em>web</em> acessvel a todos,
independentemente dos dispositivos usados ou de suas necessidades
especiais.</p>
</body>
</html>

A tag <font> pode possuir atributos como face (tipo da letra), size (tamanho da letra) e color
(cor da letra). Ao empregar o atributo face, use como valor do atributo apenas fontes padro, ou seja,
fontes existentes em todos os sistemas atuais. Ao se utilizar o atributo size, use variaes de valor
entre -2 e 4 para escolha do tamanho. Ao empregar o atributo color, utilize o nome da cor em ingls
ou seu respectivo cdigo de cores hexadecimal. No abordaremos detalhadamente esta formatao
pois encontra-se em desuso, aprofundaremos este tema ao estudarmos as CSS, padro atual.
A tag <p> possui, entre outros atributos, o atributo align para alinhamento de textos, que
pode variar em valores como left (esquerda), center (centralizado), right (direita) ou justify (justificado).

3.2.1 Listas
O XHTML possui trs tipos de listas:
Lista no ordenada, definida pela tag <ul></ul>;

Lista ordenada, definida pela tag <ol></ol>;
Lista de definio, definida pela tag <dl></dl>.
No caso das listas ordenadas e no ordenadas, cada item ser definido pela tag <li></li>.
No caso da lista de definio, cada item ser definido pelas tags <dt></dt> e <dd></dd>.
Exemplificando lista ordenada:
<!DOCTYPE html>
<html lang=pt-br>
<head>
<title>Lista ordenada</title>
</head>
<body>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
</body>
</html>
Obs.: A lista ordenada pode conter o atributo type dentro da tag <ol> com a variao de valores A,
a, i, I ou 1.

Exemplo de lista no ordenada com subitens:
<!DOCTYPE html>
<html lang=pt-br>
<head>
<title>Lista no ordenada</title>
</head>
<body>
<ul>
<li>Webdesigner</li>
<ul>
<li>Dreamweaver</li>
<li>Fireworks</li>
<li>Flash</li>
<li>Flash com Action Script</li>
</ul>
<li>Designer Grfico</li>
<ul>
<li>Indesign</li>
<li>Photoshop</li>
<li>CorelDRAW</li>
</ul>
</ul>
</body>
</html>
Obs.: A lista no ordenada pode conter o atributo type dentro da tag <ul> com a variao de
valores square, circle ou disc.

Exemplo de lista de definio:
<!DOCTYPE html>
<html lang=pt-br>
<head>
<title>Lista de definio</title>
</head>
<body>
<dl>
<dt>Lista de Definio 1</dt>
<dd>Item 1</dd>
<dd>Item 2</dd>
<dt>Lista de Definio 2</dt>
<dd>Item 1</dd>
<dd>Item 2</dd>
</dl>
</body>
</html>

3.2.2 Cabealhos
As tags de cabealho (ou headings) so extremamente difundidas e utilizadas atualmente. Elas

so seis: <h1></h1>, <h2></h2>, <h3></h3>, <h4></h4>, <h5></h5> e <h6></h6>. Se
empregadas apenas com o padro XHTML, alteram o tamanho da letra, sempre em negrito e fazem
a quebra de linha automaticamente. Contudo, sua maior utilidade hoje ser estilizar esses cabealhos
por CSS, para que toda notcia, ttulo, subttulo, de todo o site, possua a mesma formatao. Veja o
exemplo:
<!DOCTYPE html>
<html lang=pt-br>
<head>
<title>Cabealhos</title>
</head>
<body>
<h1>Cabealho 1</h1>
<h2>Cabealho 2</h2>
<h3>Cabealho 3</h3>
<h4>Cabealho 4</h4>
<h5>Cabealho 5</h5>
<h6>Cabealho 6</h6>
</body>
</html>

3.3 Inserindo elementos
3.3.1 Linha horizontal
Usualmente emprega-se uma linha horizontal para separar notcias e contedos, podemos
inseri-las atravs da tag de elemento vazio <hr />. Ela pode ser estilizada com o uso de atributos
como align para alinhamento e width para largura.
<!DOCTYPE html>
<html lang=pt-br>
<head>
<title>Linha horizontal</title>
</head>
<body>
<center>
<h1>Cabealho 1</h1>
<hr width=300 />
<h2>Cabealho 2</h2>
</center>
</body>
</html>
Obs.: Podemos utilizar a tag <center></center> para centralizar qualquer elemento.

3.3.2 Imagens
Para inserir imagens em um documento, devemos antes tomar algumas precaues:
Voc deve ter o direito de uso sobre a imagem antes de coloc-la no seu projeto. Caso
prefira, existem alguns bancos de imagens gratuitos na internet;
Baixe e insira todas as imagens em uma subpasta da pasta do seu projeto, para organizar e
facilitar o upload da pgina depois;
Preocupe-se com o tamanho do arquivo em pixels, para ter imagens em boa resoluo,
procurando equilibrar este processo com o tamanho da imagem em bytes, para no pesar
muito o seu projeto.
Assim como as tags de formatao de texto, a tag para inserir imagens deve ser colocada na
seo <body></body> da estrutura do cdigo XHTML. A tag para inserir imagens a tag
<img />, que uma tag de elemento vazio. Este comando sozinho no far nenhuma alterao na
pgina, precisamos dar alguns atributos para inserirmos a imagem corretamente. So eles:
Atributo da tag <img /> Funo

src Determina o caminho para a imagem que gostaramos de inserir.
Texto alternativo para que deficientes visuais possam saber qual objeto
alt
est inserido.
title Texto que aparecer quando o usurio parar o mouse sobre a imagem.
border Define uma borda para a imagem. Valor em pixels.
width Largura da imagem. Valor em pixels.
height Altura da imagem. Valor em pixels.
Alinhamento da imagem. Pode ter como valores top, middle, bottom, left e
align right, influenciando seu alinhamento e a interao da imagem em relao
ao texto.

Observe o exemplo:
<!DOCTYPE html>
<html lang=pt-br>
<head>
<title>Inserindo imagens</title>
</head>
<body>
<img src=http://elaborata.net.br/webstandards/logo.jpg
title=Logo da Elaborata alt=Logo da Elaborata border=1 width=200
height=150 align=left />
</body>
</html>
Ao definir link na imagem, sempre defina o atributo border com o valor 0 (Zero) por questo
esttica. Insira sempre a extenso da imagem, que geralmente varia entre .jpg, .gif ou .png.
Dica: O atributo title um atributo global. Pode ser inserido em qualquer tag para que o texto
contido em seu valor aparea quando o usurio posicionar o ponteiro do mouse sobre o elemento.

3.4 Comentrios
Para uma melhor compreenso do cdigo inserido, de bom grado que se esclarea as
regies do cdigo correspondentes a cada contedo. Para comentar o cdigo XHTML, faremos da
seguinte forma:

Podemos comentar qualquer rea do cdigo, no prejudicando em nada sua sintaxe ou

renderizao, pois o navegador sempre ir ignor-lo.


Captulo 4 -
Meta Tags


4.1 Entendendo as meta tags
As meta tags so tags inseridas na seo <head></head> da pgina, e tem como funo a
no insero de um contedo propriamente dito na pgina, mas sim inserir valores como o autor da
mesma, as palavras-chave para busca em sites especializados ou a descrio da mesma. As tags <meta
/> so de elemento vazio, fechando nelas mesmas. Contm os atributos name, para especificao
do tipo de meta tag, http-equiv, semelhante a name para controle http e content, que informa o
contedo da meta tag. Conhea as principais:
Description (descrio):
<meta name=description content=Referncia em formao profissional. Mais

de 90 cursos na rea de TI />
Informa o texto de descrio que aparecer logo abaixo de um resultado em um dispositivo

de busca.
Keywords (Palavras-chave):
<meta name=keywords content=xhtml, css, webstandards, cursos, TI,

informtica, informatica, html5 />
Informa palavras-chave que funcionaro como referncia para os dispositivos de busca.

Separam-se os termos por vrgula.
Author (Autor):
<meta name=author content=Elaborata Informtica />
Informa o profissional ou empresa de autoria do projeto.
Copyright (Direitos autorais):
<meta name=copyright content=2007 Elaborata Informtica />

Define os parmetros de direitos autorais da pgina ou contedo.
Refresh (atualizar):
<meta http-equiv=refresh content=3 />
<meta http-equiv=refresh content=3;URL=http://www.elaborata.com.br />
No primeiro exemplo, ter-se- a atualizao automtica de uma pgina a cada trs segundos,
definido no valor do atributo content. J no segundo tem-se o redirecionamento da pgina para o
endereo definido aps trs segundos, utilizado, por exemplo, em pginas de confirmao de envio
de informaes.
Rating (Classificao):
<meta name=rating content=general />
Define uma classificao etria para o site. Os valores do atributo content podem variar
entre general, para qualquer idade, 14 years, por exemplo, para censura de 14 anos, ou mature, para
maiores de 18 anos. Alguns navegadores utilizam esta meta tag como parmetro para filtro.
Generator (Gerador):
<meta name=generator content=Notepad++ />
Serve apenas para informao. Notifica o tipo de software utilizado para a criao do cdigo-
fonte.
Language (Idioma):
<meta http-equiv=content-language content=pt-br />
Empregada em documentos HTML 4.01 para definio do idioma utilizado. Padro W3C
para esse tipo de documento. Conforme visto anteriormente, no HTML5 definir-se- o idioma com
o atributo lang na tag <html></html>.

Charset (Tipo de caracteres):
<meta http-equiv=Content-type content=text/html;charset=utf-8 />
Tambm usado em documentos HTML 4.01, mas para definio do tipo de caracteres
utilizado. Padro W3C para esse tipo de documento.
Charset (Tipo de caracteres) em HTML5:
No HTML5 utilizaremos a meta tag charset para a definio do tipo de caracteres. Padro
W3C para esse tipo de documento. Faz-se indispensvel definir o tipo de caracteres no documento
para que o navegador possa interpretar os caracteres utilizados. Por padro emprega-se o padro utf-
8, podendo haver variaes, como a Latin-1. Caso no seja definido, deve-se usar um cdigo que
gere o caractere desejado, confira a tabela completa desses caracteres no captulo Tabelas de
referncia.
Exemplo de aplicao das meta tags:
<!DOCTYPE html>
<html lang=pt-br>
<head>
<title>Aprendendo meta tags</title>
<meta name=description content=Mais de 17 anos em cursos
profissionalizantes />
<meta name=keywords content=xhtml, css, webstandards, cursos,
TI, informtica, informatica, html5, css3 />
<meta name=author content=Diego />
<meta name=copyright content=2007 Elaborata Informtica />
<meta name=rating content=general />
<meta name=generator content=Notepad++ />
</head>
<body>
</body>
</html>

4.2 Elemento Link
Outra tag comumente inserida na seo <head></head> da pgina a <link />. A tag
<link /> ir ligar o arquivo onde ela inserida a um outro arquivo externo de comportamento ou
estilizao que influenciar o documento XHTML. Por exemplo, podemos linkar um documento
em um folha de estilos CSS que ir estiliz-lo.
Veja:
<!DOCTYPE html>
<html lang=pt-br>
<head>
<title>Elemento Link</title>
<link rel=stylesheet href=estilos.css />
</head>
<body>
</body>
</html>
No exemplo foram definidos atributos para indicar o tipo de ligao feita e a localizao do
arquivo. Este tema ser melhor detalhado no captulo de CSS.

Captulo 5 -
Estruturando o layout


5.1 Estruturando o layout
Layout uma palavra que significa formato. No caso das pginas XHTML representar a
forma em que o site est estruturado. Voc j deve ter percebido que escrever o texto e estiliz-lo por
XHTML no tem segredo, mas organiz-lo de maneira a ter a aparncia de uma pgina web o que
faremos agora. Esse processo pode ser realizado de vrias formas, quais sejam: por meio de tabelas,
de div's, frames, iframes ou pelas novas tags HTML5. Iniciaremos estudando o layout realizado em
tabelas.

5.2 Layout por tabelas
Tabelas por padro so utilizadas para a organizao de dados tabulares, mas por muito
tempo foram empregadas na estruturao de layouts. Tabela o modo mais primitivo de se construir
um layout. Por mais que atualmente encontrem-se em desuso, ainda hoje so empregadas na
estruturao de mail marketing ou pginas sem suporte as CSS. Combinando clulas, dividindo-as e
formatando-as, podemos construir todo o layout de uma pgina, conforme exemplo:

O cdigo XHTML que gerar esta pgina o seguinte:
<!DOCTYPE html>
<html lang=pt-br>
<head>
<title>Layout por tabelas</title>
</head>
<body>
<center>
<table summary=layout width="984" border="0"
cellspacing="0" cellpadding="0">


<tr>
bgcolor="#CCCCCC"><h2>Menu</h2></td>
</tr>


<tr>
<td height="400"
align="center"><h3>Contedo</h3></td>
</tr>


<tr>
bgcolor="#CCCCCC"><h2>Rodap</h2></td>
</tr>

</table>
</center>
</body>
</html>

Note que existe apenas uma tabela de quatro linhas, e cada linha representando uma seo da
pgina. Poderamos tambm, na rea contedo, por exemplo, inserir mais uma tabela dentro desta
clula para estruturarmos o contedo de cada pgina. O cdigo est comentado para um melhor
entendimento de cada rea, com o cdigo ainda pequeno, pode no parecer necessrio, mas esta
apenas a estrutura, tudo o mais ser inserido nela, e estes comentrios podem vir a calhar quando o
cdigo estiver bem maior.
Dica: Se definirmos a largura da tabela como 100%, teremos um layout adaptvel em qualquer
resoluo.
Como podemos observar, a tag para a criao de tabelas a <table></table>. Mas ela, de
forma isolada, apenas inicia e finaliza a regio para a tabela, ainda preciso dar-lhe propriedades e
criar as clulas. Os atributos passveis de serem inseridos na tag <table> so:
Atributo da tag <table></table> Funo

border Insere a borda da tabela. Valor em pixels.
width Largura da tabela. Valor em pixels.
height Altura da tabela. Valor em pixels.
cellspacing Espaamento entre clulas. Valor em pixels.
Espaamento entre o incio da clula e o contedo inserido.
cellpadding
Valor em pixels.
Alinhamento da tabela. Pode ter valores como center, left ou
align
right.
Cor da borda. O valor pode ser o cdigo hexadecimal da cor
bordercolor
ou seu nome em ingls.
Cor de fundo. O valor pode ser o cdigo hexadecimal da cor
bgcolor
ou seu nome em ingls.
Imagem de fundo. O valor ser o caminho para imagem,
background
seguido de seu nome e extenso.
summary Descrio da tabela.

5.2.1 Criao dos elementos da tabela
Aps a criao da tabela com sua devida formatao, precisaremos inserir as clulas que iro
receber o contedo. Para isso utilizaremos as tags <th></th>, para cabealho da tabela, ou seja, para
que a informao contida na clula receba a formatao de negrito e centralizado, <tr></tr>, para a
criao de linhas e, <td></td>, para a criao de colunas.
Dica: Muitos dos atributos que se aplicam a tag <table> podem ser aplicados tambm a tag <td>,
quando queremos que a formatao se aplique somente a clula desejada.
Ao fim, a tabela criada ficar como exemplificada abaixo:
<!DOCTYPE html>
<html lang=pt-br>
<head>
<title>Tabela de exemplo</title>
</head>
<body>
<table summary=tabela title=Tabela de veculos width="400"
height=200 align=center bgcolor=#C0C0C0 bordercolor=#FFFFFF
border="1" cellspacing="1" cellpadding="1" >
<tr>
<th>Carros</th><th>Valores</th>
</tr>
<tr>
<td>Gol</td><td>R$ 28.000,00</td>
</tr>
<tr>
<td>Corsa</td><td>R$ 15.000,00</td>
</tr>
<tr>
<td>Uno</td><td>R$ 25.000,00</td>
</tr>
<tr>
<td>Celta</td><td>R$ 17.000,00</td>
</tr>
</table>
</body>
</html>

Note que o contedo da clula, seja um texto, uma imagem ou outro elemento, fica entre as
tags de abertura e fechamento da clula. Para alterar o alinhamento vertical do contedo das clulas,
utiliza-se o atributo valign dentro das tags <td></td>, <tr></tr> ou <th></th>, que pode
conter os valores top, middle ou bottom.
Obs.: Mesmo que voc no utilize mais tabelas para a estruturao do layout, certamente pode cri-
las para organizar informaes do site, como tabelas de preos.

5.3 Layout por div
Div uma tag que cria uma seo na pgina para que se possa inserir qualquer tipo de
contedo, por isso uma tag livre de semntica. Ela sozinha no poder fazer muita coisa.
Necessitar-sede um nvel mais avanado de CSS para assim ser criado um layout com a tag
<div></div>. Por hora, veremos algumas propriedades.
Uma div como uma clula de tabela flutuante, onde ser inserido o contedo desejado
entre a tag de abertura e fechamento. Um layout por div tem maior facilidade de atualizao, maior
dinamismo na estilizao com folhas de estilo e uma variao de efeitos mais abrangente. Por
exemplo, por CSS3 hoje podemos arredondar os cantos de uma div ou colocar efeitos de
sombreamento.
Nota: Tambm utilizamos a tag <span></span> para blocos de contedo, mas nesse caso para
contedos em linha.
Para a estilizao das div's por CSS precisaremos colocar o atributo id dentro de cada uma,
para identificar e, em seguida, estilizar. Por padro, geralmente so criadas as seguintes id's para as
div's do layout:
Div container
Div header
Div navbar
Div content
Div footer
A div container aquela que vai conter todos os outros elementos, a que ser centralizada e
aplicada algum efeito de sombra, por exemplo;
A div navbar a barra de navegao do site, como no caso de um menu horizontal;
A div content traz o contedo da pgina em questo. Normalmente conter outras div's
para separar o contedo;
Criamos a div footer para o rodap da pgina.
Obs.: Voc pode dar qualquer valor para o atributo id, esses valores aqui colocados so apenas senso
comum.

O cdigo XHTML para esta pgina simples, pois apenas iremos inserir e identificar os
objetos, sero as CSS que diro seu tamanho, cor, alinhamento, posio e estilo. Veja o cdigo
XHTML da pgina:
<!DOCTYPE html>
<html lang=pt-br>
<head>
<title>Layout por div</title>
</head>
<body>
<div id=container>
<div id=header>
<h1> Topo </h1>
</div>
<div id=navbar>
<ul>
<li><a href=index.html>Home</a></li>
<li><a href=sobre.html>Sobre</a></li>
<li><a href=produtos.html>Produtos</a></li>
<li><a href=contato.html>Contato</a></li>
</ul>
</div>
<div id=content>
<div id=esquerda>
<h2>Notcia 1</h2>
<p>O Consrcio World Wide Web (W3C) anunciou o
lanamento de mais um escritrio internacional, agora na Rssia. como
resultado da crescente insero e participao global no Consrcio, O
Escritrio est hospedado na Escola Superior de Economia (HSE) da
Universidade Nacional de Pesquisa, fundada em 1992...</p>
<p><a
href=http://www.w3c.br/Noticias/W3cAbreEscritorioNaRussia>leia
mais...</a></p>
</div>
<div id=centro>
<h2>Notcia 2</h2>
<p>Esta oitava edio do Prmio Mario Covas
conta com a parceria do W3C Brasil na categoria Governo Aberto. O Prmio
Mrio Covas uma iniciativa da Secretaria de Estado de Gesto Pblica de So
Paulo e a participao do W3C Brasil inova por introduzir o reconhecimento de
iniciativas de cidados que utilizam dados governamentais...</p>

<p><a
href=http://www.w3c.br/Noticias/OitavaEdicaoPremioMarioCovas>leia
mais...</a></p>
</div>
<div id=direita>
<h2>Notcia 3</h2>
<p>O Consrcio World Wide Web (W3C) um
consrcio internacional no qual organizaes filiadas, uma equipe em tempo
integral e o pblico trabalham juntos para desenvolver padres para a
Web...</p>
<p><a href=http://www.w3c.br/Sobre>leia
mais...</a></p>
</div>
</div>

<div id=footer>
<h3>© Copyright Todos os direitos
reservados</h3>
</div>

</div>
</body>
</html>
Voltaremos a abordar este mesmo layout no final do captulo Entendendo as CSS,

portanto, salve este arquivo como estrutura_div.html para que, futuramente, possamos voltar a
desenvolver o layout por completo, uma vez que j foi adquirido o conhecimento com folhas de
estilo.
Todas as div's receberam id para futura estilizao. As div's esquerda, centro e direita so
para a digitao do contedo em trs colunas. Na rea do menu foram inseridas tags para uma lista
no ordenada onde faremos a estilizao do mesmo. Os demais contedos receberam tags de
cabealho e pargrafos.
Obs.: Ainda no HTML5 comum a utilizao de div's para outros fins, mas para estruturao de
layout teremos tags especficas para isso.

5.4 Layout pelas novas tags HTML5
O HTML5 criou novas tags para estruturao de layout, como a tag <header></header>,
<footer></footer>, <nav></nav>, e assim por diante. Desta forma, a prpria tag inserida j
possui formataes especficas e ideais para cada rea do layout. Veja o exemplo:

Agora observe o cdigo para formar uma pgina como esta, j com alguns contedos
inseridos:
<!DOCTYPE html>
<html lang=pt-br>
<head>


<footer>
<h5>© Copyright Todos os direitos reservados
Desenvolvido por: Elaborata Informtica</h5>
</footer>


<!--[if lt IE 9]><script
src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--
>
Dica: As novas tags HTML5 so como as tradicionais, podem receber estilizao por CSS, e
insere-se seus contedos entre a abertura e fechamento.

5.5 Iframes
Iframes so regies ou sees criadas na pgina que exibem parte, ou todo um contedo,
dentro de uma regio especfica. Por exemplo, poderamos ter uma regio inserida no nosso site
onde exibido parte do site da Elaborata, que representa como que uma janela que nos traz
diretamente a informao contida no site, no dependendo do local onde est inserido. Seguindo esta
ideia, poderamos inserir iframes no nosso site como a cotao do dlar ou previso do tempo, por
exemplo, sem a necessidade de atualizarmos esta informao. Observe:
<!DOCTYPE html>
<html lang=pt-br>
<head>
<title>Iframes</title>
</head>
<body>
<iframe name=elaborata src=http://www.elaborata.com.br
width=600 height=500 scrolling=auto frameborder=0
align=center></iframe>
</body>
</html>
No exemplo, seria criado um iframe na pgina exibindo o site da Elaborata, com 600 pixels
de largura e 500 pixels de altura, com barra de rolagem (scrolling=auto), sem borda e alinhado ao
centro. Caso no queiramos barra de rolagem, basta definir o valor do atributo scrolling como no
e caso queiramos borda, definiramos o valor do atributo frameborder como 1. No possvel
definir bordas maiores, apenas 0 para sem borda e 1 para com borda.
Digamos que se deseje criar um link em que ao clicarmos, a pgina de destino aparea dentro
do iframe, tornando assim o iframe mais dinmico e verstil. Para isso, definiremos o valor do
atributo target do link com o nome do iframe. Veja o exemplo:
<!DOCTYPE html>
<html lang=pt-br>
<head>
</head>
<body>
<a href=http://www.elaborata.com.br target=centro>Site
Elaborata </a>
<a href=http://www.maujor.com target=centro>Site Maujor </a>
<a href=http://pt.wikipedia.org target=centro>Wikipedia </a>
<iframe src= name=centro width=500 height=500
scrolling=auto frameborder=0 align=center></iframe>
</body>
</html>

5.5.1 Novos atributos HTML5 para iframes
O HTML5 tambm trouxe implementaes para o trabalho com iframes, vejamos:
5.5.2 Sandbox
Se empregado sem valores, desabilita a insero de contedos como scripts, formulrios, links
e plugins. Poderemos definir valores para habilitar cada recurso que gostaramos, tais como: allow-
same-origin para recursos de mesma origem, allow-top-navigation para links, allow-forms para
permitir formulrios e allow-scripts para scripts. Observe:
<!DOCTYPE html>
<html lang=pt-br>
<head>
</head>
<body>
<iframe src=http://www.elaborata.com.br width=500 height=500
sandbox=allow-top-navigation allow-forms allow-scripts></iframe>
</body>
</html>
5.5.3 Seamless
Atributo booleano que faz com que o iframe tenha o mesmo contexto do documento, ou seja,
regras de estilo e comportamento tambm so vlidas para o iframe.
<!DOCTYPE html>
<html lang=pt-br>
<head>
</head>
<body>
<iframe src=http://www.elaborata.com.br width=500 height=500
scrolling=auto frameborder=0 align=center seamless></iframe>
</body>
</html>

5.5.4 Srcdoc
Insere uma marcao HTML dentro do iframe, muito empregado para blogs. Exemplo:
<!DOCTYPE html>
<html lang=pt-br>
<head>
</head>
<body>
<iframe seamless sandbox srcdoc=<p> Novos atributos HTML5 para
iframes: <a href=http://www.elaborata.com.br> Faa o curso!
</a></p>></iframe>
</body>
</html>
Nesse caso utilizamos seamless e sandbox como uma forma de proteo contra scripts e
malwares que possam ser inseridos.

Captulo 6 -
Links


6.1 Links
Link significa ligao. Ir ligar um elemento inserido no site, como um texto, uma imagem ou
um objeto pgina que deve ser executada quando o usurio interagir com o objeto. Podemos inserir
links em qualquer objeto do site, e para isso utilizaremos a tag <a></a>, ficando o elemento linkado
entre as tags de abertura e fechamento. Essa tag sozinha no surtir efeito, ela precisar de alguns
atributos para ter sua funo especificada. Veja:
Atributo da tag <a></a> Funo

Principal atributo que define o local para onde o usurio ser enviado
href
depois de interagir com o objeto linkado.
Define em qual janela o link deve ser aberto. Os valores podem
variar em: _self,
_self, para o link ser aberto na mesma janela, _blank,
_blank, para
target
o link ser aberto em outra janela ou nome_qualquer,
nome_qualquer, para trabalhar
com iframes.
iframes.
name Utilizado em ncoras.
Observe o exemplo:
<a href=http://www.elaborata.com.br target=_blank title=Site da

Elaborata>Clique aqui</a>
Note que ao se definir link, o texto referente ao link recebe automaticamente uma formatao
padro de cor e estilo, que poder ser alterada mais tarde pelas CSS.

6.1.1 Tipos de links
Dos tipos de link existentes, veremos os quatro comumente empregados nos dias atuais:
Link Relativo:
Um link que tem como pgina de destino uma pgina de navegao interna do site. Para cri-
lo, damos como valor do atributo href o caminho e o nome do arquivo desejado. Exemplo:
<a href=contato.html target=_self title=Fale Conosco>Contato</a>
Em geral, utilizamos o valor do atributo target como _self em links relativos, para que o
usurio permanea na mesma janela do navegador ao interagir com o link.
Link Absoluto:
Link para uma pgina externa ao site. Nesse caso, como valor do atributo href damos o
endereo completo da pgina de destino. Exemplo:
<a href=http://www.elaborata.com.br target=_blank title=Site da

Elaborata>Cursos na rea de TI</a>
Comumente nesses casos damos ao atributo target o valor _blank, para que a pgina de
destino seja aberta em outra janela e o usurio continue com a navegao no site atual.
Link de download:
Link para fazer o download de um arquivo. Similar ao link relativo, mas como valor do atributo
href temos um arquivo que no contm uma extenso .htm ou .html, mas alguma outra. Exemplo:
<a href=musica.mp3 title=Faa o Download de Msica>Download</a>
Nesse caso no precisamos definir target, j que a pgina no ser aberta, mas sim ser
destinado o download do arquivo ao usurio.

Link de ncora:
Uma ncora um link para a mesma pgina, mas em outro ponto da barra de rolagem, para
casos como artigos extensos onde ao final poderamos encontrar um link que j nos enviaria de volta
para o topo da pgina. Para isso, precisaremos do atributo name. Ele ir marcar o ponto de retorno
na barra de rolagem quando o usurio clicar no link. Observe:
<!DOCTYPE html>
<html lang=pt-br>
<head>
<title>Link de ncora</title>
</head>
<body>
<a name=topo></a>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<a href=#topo> TOPO </a>
</body>
</html>
O valor do atributo name pode ser qualquer nome, sem espao ou caracteres especiais. Esse
nome referenciado no link ao final do documento, precedido por uma cerquilha (#), e assim o
navegador compreende que um link para a mesma pgina, fazendo a ligao entre o valor do
atributo name no incio, com o valor do atributo href ao fim do documento.


Captulo 7 -
Formulrios


7.1 Trabalhando com formulrios
Sempre que quisermos que o usurio interaja com a pgina web, preenchendo um formulrio
de contato, criando um cadastro ou fazendo um login, precisaremos das tags de criao de
formulrios para este fim. Para isso, necessitaremos do XHTML que dar a base para as inseres
de dados ao usurio, um agente de processamento do formulrio, que geralmente um arquivo em
PHP, que ir execut-lo e, um CSS, para deix-lo esteticamente mais agradvel.
A tag para criao de formulrios a tag <form></form>. Todos os elementos do

formulrio devero ficar entre as tags de abertura e fechamento.
<form name=exemplo_contato action=form.php enctype=application/x-www-

form-urlencoded method=post >
<p>
<label for=nome>Nome: </label>
<input name=nome type=text />
</p>
</form>
Como podemos visualizar, os demais elementos filhos estaro sempre entre o incio e fim de
<form></form>. A tag para incio de formulrio deve possuir alguns atributos para um bom
funcionamento. So eles:
Atributo da tag <form></form> Funo

name Atribui nome ao formulrio.
O valor deste atributo ser o arquivo executado quando o
action usurio clicar no boto de envio (submit
(submit).
). Em geral, usasse
um PHP.
PHP .
Define o tipo de dados. Os valores variam entre
application/x-www-form-urlencoded como padro, e
enctype
multipart/form-data para formulrios com campos para
upload de arquivos.
Mtodo de envio das informaes, podendo ter como
method valores GET ou POST, sendo mais comumente utilizado o
atributo POST, pois ele encapsula os dados e envia.

A tag que ir inserir grande parte dos objetos de formulrio a <input />, mudando apenas
o tipo de campo atravs do atributo type. Trata-se de uma tag de elemento vazio. Conhea algumas
variaes de campos input:
Text (Campo de texto):
<input name=nome type=text title=Nome value=valor inicial size=50

maxlength=20 />
Um dos campos mais utilizados. Cria um campo de texto padro para valores genricos. O
atributo name define o nome do campo para que o PHP possa reconhec-lo. O atributo type
define o tipo de input. O atributo global title est definindo o texto que aparecer quando
posicionarmos o mouse sobre o campo. O atributo value define um valor inicial de preenchimento
assim que a pgina carregada. O atributo size define a largura do campo. O atributo maxlength
define o nmero mximo de caracteres.
Password (Senha):
<input name=senha type=password title=Digite sua senha size=50

maxlength=15 />
Serve para criar um campo de senha, onde os caracteres digitados so ocultos. Os atributos
so semelhantes ao valor text.
Checkbox (Caixa de seleo):
<input name=cursos type=checkbox value=html5 title=Curso de HTML5

checked=checked />
Para criarmos caixas com a possibilidade de escolha de mais de uma opo. O atributo value
indica o valor que ser processado. O atributo checked serve para que se tenha um estado inicial
como marcado. Em HTML ele um atributo booleano e no h a necessidade de se inserir um valor,
em XHTML insere-se um valor idntico ao atributo. Caso no queiramos que a caixa tenha um
valor inicial marcado, basta no inserir o atributo.
Radio (Boto de opo):
<input name=sexo type=radio title=Masculino value=masculino

checked=checked />
Boto onde apenas uma opo pode ser escolhida. Para que o efeito funcione, todos os
botes da mesma categoria devem ter o mesmo valor do atributo name, variando apenas em value.

File (Arquivo):
<input name=anexar type=file size=50 title=Procurar arquivo... />
Valor que possibilite anexar arquivos no envio do formulrio. Ao se empregar esse valor no
formulrio, devemos mudar o enctype para multipart/form-data.
Button (Boto):
<input type=button value=Boto title=Clique aqui />
Cria um boto genrico. Geralmente utilizado para ganhar funcionalidades por eventos Java
Script.
Submit (Enviar):
<input type=submit value=Enviar title=Enviar />
Cria um boto que executar o que foi definido no atributo action da tag <form></form>.
Reset (Limpar):
<input type=reset value=Limpar campos title=Apagar dados />
Cria um boto para apagar todos os dados digitados no formulrio.
Image (Imagem):
<input type=image src=imagem.jpg title=Enviar dados />
Empregado para a insero de uma imagem de um boto ao invs do boto padro

XHTML.

Outras tags comumente utilizadas em formulrios:
Tag <select></select>
Para definirmos uma lista de opes. As opes sero definidas pela tag
<option></option>:
<select name=cursos>
<option>Escolha um curso</option>
<option value=XHTML>XHTML</option>
<option value=CSS>CSS</option>
<option value=PHP>PHP</option>
</select>
Tag <textarea></textarea>
Cria um campo de texto com mais linhas de preenchimento, para reas como comentrios,
por exemplo:
<textarea name=mensagem cols=50 rows=4></textarea>
Cols e rows definem a quantidade de linhas e colunas que a rea de texto ter,
respectivamente.
Tag <fieldset></fieldset>
Separa as informaes do formulrio em categorias de campos. A tag <legend></legend>

define um ttulo para as categorias.
<fieldset>
<legend>Sexo</legend>
<input name=sexo type=radio value=masculino /> Masculino
<input name=sexo type=radio value=feminino /> Feminino
</fieldset>
Obs.: No se esquea de sempre definir name ou value para os atributos de formulrio, para que o
PHP possa process-lo corretamente.

Veja o exemplo de um formulrio semntico com algumas das tags aprendidas:
Nota: No obrigatoriamente necessria a definio da tag <label></label> para cada campo de

formulrio, mas semntico que se faa assim, para uma melhor separao dos elementos e
compreenso do formulrio.
<!DOCTYPE html>
<html lang=pt-br>
<head>
<title>Formulrio de contato</title>
</head>
<body>
<form name=formulario
action=http://www.elaborata.com.br/teste/aula.php method=post
enctype=application/x-www-form-urlencoded>
<fieldset>
<legend>Dados pessoais</legend>
<p>
<input type=text name=nome title=Nome
size=60 />
</p>
<p>
<label for=e-mail>E-mail: </label>
<input type=text name=e-mail title=E-mail
size=60 />
</p>
<p>
Sexo:
<label><input name=sexo type=radio
value=masculino /> Masculino </label>
<label><input name=sexo type=radio
value=feminino /> Feminino </label>
</p>
</fieldset>
<fieldset>
<legend>Cursos:</legend>
<p>
<label><input name=cursos type=checkbox
value=webstandards /> Webstandards </label>
value=dreamweaver /> Dreamweaver </label>
value=fireworks /> Fireworks </label>

value=flash /> Flash </label>
</p>
</fieldset>
<p>
<label for=mensagem>Mensagem: </label>
</p>
<p>
<textarea name=mensagem rows=6 cols=50
title=Digite sua mensagem></textarea>
</p>
<p>
</p>
</form>
</body>
</html>

7.2 Novas funes para formulrios com HTML5
Foram criadas novas funes para facilitar o uso dos formulrios no HTML5, e auxiliar em
sua validao sem a necessidade de scripts para isso. Vejamos:
Obs.: O Internet Explorer no suporta nenhuma nova implementao para formulrios em

HTML5.
7.2.1 Atributo form
Associa um elemento de formulrio inserido fora das tags <form></form> ao formulrio

em questo. O valor do atributo form deve ser igual a uma id aplicada a tag <form></form>:
<form method=post action=form.php id=formcontato>

Nome: <input name=nome type=text title=Nome /> <br />
E-mail: <input name=email type=text title=E-mail /> <br />
<input type=submit value=Enviar /> <br />
</form>
Mensagem: <textarea name=mensagem form=formcontato></textarea>
No exemplo, o que for preenchido no campo de mensagem ser tambm processado quando
o usurio utilizar o boto de envio.
7.2.2 Atributos para campo numrico
Para criarmos um campo numrico poderemos empregar o atributo number para a tag
<input />.
Quantidade: <input name=quantidade type=number />
Podemos tambm definir um valor inicial, mximo e mnimo, para o campo:
Quantidade: <input name=quantidade type=number min=1 max=10 value=5

/>
Os atributos numricos atualmente tambm no funcionam no Mozilla Firefox.

7.2.3 Atributo range
O atributo range para a tag <input /> cria um controle deslizante para uma escolha
numrica. No suportado pelo Mozilla Firefox:
Quantidade: <input name=quantidade type=range min=10 max=50

value=20 step=1 />
O atributo step demonstra que ao deslizar o controle o efeito dever ocorrer de 1 em 1.
7.2.4 Atributo autocomplete
Os navegadores por padro guardam os dados digitados em formulrios anteriormente

usados e, quando o usurio d foco ao campo, esse lhe trar sugestes baseadas em seu histrico.
Com HTML5 poderemos ativar ou desativar este recurso com o atributo autocomplete. Ele
possuir dois valores, on e off, sendo on o padro e no havendo necessidade de definir. Esse atributo
se aplica as tags <form></form> e <input />. O Apple Safari no tem suporte para esse atributo.
<input name=nome type=text autocomplete=off />
7.2.5 Atributo placeholder
Oferece uma dica sobre o que deve ser preenchido dentro do campo. Pode ser inserido nas
tags <input /> e <textarea></textarea>:
Nome: <input name=nome type=text title=Nome placeholder=Digite seu

nome completo />
7.2.6 Atributo autofocus
Define o objeto que j entrar em foco assim que a pgina for carregada. Trata-se de um
atributo booleano. Aplica-se as tags <button></button>, <input />, <select></select> e
<textarea></textarea>:
Nome: <input name=nome type=text title=Nome placeholder=Digite seu

nome completo autofocus />

7.3 Validao de formulrio
Validar um formulrio torn-lo mais seguro sobre o contedo que ser inserido pelo
usurio, j que em um formulrio o usurio poderia enviar scripts maliciosos para o servidor. Tambm
facilita o preenchimento de cada campo. Poderemos atravs da validao definir campos apenas
numricos, campos de e-mail, de uma quantidade especfica de caracteres e campos obrigatrios.
Essa validao, at os dias de hoje, sempre foi feita atravs de JavaScript, o que no a
tornava segura caso o usurio desabilitasse o uso de scripts nas configuraes do navegador, mas
agora tambm pode ser realizada por HTML5, facilitando e dinamizando a criao de uma
validao. Observemos:
7.3.1 Atributo required
Quando utilizado, tornar o campo de preenchimento obrigatrio. Trata-se de um atributo

booleano, isto , no precisa de valor. Ele verifica apenas se o campo foi ou no preenchido, e em
casos do no preenchimento, o navegador apresentar ao usurio uma mensagem padro
informando a sua necessidade. Pode ser inserido nas tags <input />, <select></select> e
<textarea></textarea>:
Nome: <input name=nome type=text required />
7.3.2 Atributo email
Confere se no campo inserido foi digitado um valor que corresponda a um e-mail, ou seja,
verifica se foi digitado ao menos a arroba. Trata-se de um novo tipo para a tag <input />, e caso o
usurio no digite um valor semelhante a um endereo de e-mail, o navegador apresentar uma
mensagem padro informando a necessidade do preenchimento.
Nome: <input name=e-mail type=email />
Um valor como a@b.c passar na validao.

Observe o exemplo de um formulrio completo empregando os novos atributos HTML5.
Salve como contato.html para que, posteriormente, possamos estiliz-lo e inseri-lo em uma pgina:
<!DOCTYPE html>
<html lang=pt-br>
<head>
</head>
<body>
<form name=formulario action=form.php method=post
enctype=application/x-www-form-urlencoded>
<fieldset>
<legend>Dados pessoais</legend>
<p>
<input type=text name=nome title=Nome
size=60 placeholder=Digite seu nome completo required autofocus />
</p>
<p>
<label for=e-mail>E-mail: </label>
<input type=email name=e-mail title=E-mail
size=60 placeholder=exemplo: contato@empresa.com.br required />
</p>
<p>
<label for="estado">Estado: </label>
<select name="estado">
<option selected="selected">Escolha um
Estado</option>
<option value="Paran">PR</option>
<option value="Santa Catarina">SC</option>
<option value="Rio Grande do
Sul">RS</option>
</select>
</p>
</fieldset>
<fieldset>
<legend>Produtos: </legend>
<p>
<label><input name="produtos" type="checkbox"
value="Camiseta" /> Camiseta </label>
<label>Quantidade</label>
<input name="quantidade" type="number" min="1"
max="10" value="1" />
</p>
<p>

value="Bon" /> Bon </label>
max="10" value="1" />
</p>
<p>
value="Adesivo" /> Adesivo </label>
max="10" value="1" />
</p>
</fieldset>
<p>
<label for=mensagem>Mensagem: </label>
</p>
<p>
<textarea name=mensagem rows=6 cols=50
title=Digite sua mensagem placeholder=Digite aqui sua mensagem
required></textarea>
</p>
<p>
</p>
</form>
</body>
</html>


Captulo 8
Entendendo as CSS


8.1 Entendendo as CSS
CSS a sigla para Cascading Style Sheets ou Folhas de Estilo em Cascata e servem para
a estilizao de documentos XHTML. Ela no ter a funo de inserir elementos e, sim, personalizar
e formatar os elementos j inseridos no cdigo XHTML. Por meio das folhas de estilo poderemos
alterar toda a aparncia do site e manter um padro, para que toda a pgina siga a mesma formatao.
Desta forma economizaremos tempo e desgaste no momento da criao e atualizao das pginas.
Existem trs formas de inserirmos as folhas de estilo no documento:
In-line;
Incorporado;
Linkado externamente.
O CSS In-line escrito dentro da tag, dando-lhe uma estilizao vlida somente para aquele
elemento. Para isso, utilizamos o atributo global style. Veja o exemplo:
<p style=color:#900; font-weight:bold;>Pargrafo estilizado por CSS in-

line</p>
No exemplo, o texto receberia a formatao de negrito e com a cor vermelha.
J o CSS Incorporado escrito todo na seo <head></head> do documento, e ele

especifica a estilizao para toda aquela pgina. Essa formatao feita atravs da tag
<style></style>. Observe:
<!DOCTYPE html>
<html lang=pt-br>
<head>
<style type=text/css>
p {
color: #900;
font-weight: bold;
}
</style>
</head>
<body>
<p>Pargrafo estilizado por CSS incorporado</p>
</body>
</html>

Notaremos que foi declarado uma tag <style></style> na seo head do documento, com
um atributo type. Esse atributo facultativo de uso em HTML5.
Em seguida, temos a identificao do elemento a ser atingido atravs da CSS, no caso a tag
<p></p>.
Na sequncia, entre chaves, temos a declarao das propriedades e valores a serem
configurados para esta tag.
Dica: No HTML5 podemos inserir a tag <style></style> para estilizao em qualquer regio do
documento, no apenas na seo <head></head>.
No caso do CSS externo ou linkado criaremos uma nica folha de estilo que, ao ser ligada
diversas pginas, ter o poder de estilizar todas ao mesmo tempo, pois elas estaro dependendo dessa
nica folha para sua formatao. A imagem a seguir ilustra a ideia:

Este arquivo CSS linkado ter a extenso .css. Faremos essa ligao das pginas XHTML
com o arquivo CSS de estilizao atravs da tag <link />, vista anteriormente, na seo
<head></head> do documento, e ela deve ser inserida em cada um dos documentos XHTML em
que se deseja a estilizao por meio desta folha de estilos. Vide exemplo:
<!DOCTYPE html>
<html lang=pt-br>
<head>
<link rel=stylesheet type=text/css href=estilos/style.css />
</head>
<body>
<p>Pargrafo estilizado por CSS incorporado</p>
</body>
</html>
Todos estes atributos para a tag <link /> so obrigatrios em HTML 4.01. Os atributos rel
e href so obrigatrios em HTML5 e o atributo type facultativo. O atributo rel mostra a relao
da tag <link />, definido como folhas de estilo, o type, o tipo de documento linkado e o atributo
href indicam o caminho e o nome do arquivo que contm as estilizaes (no exemplo, o nome do
arquivo style.css contido dentro da pasta estilos). Acautele-se ao realizar o upload da pgina para o
servidor, para que no se altere este caminho, para que no acontea do cdigo-fonte no mais
encontr-lo. prefervel que se utilizem programas de FTP para envio da pgina com maior
segurana.
As folhas de estilo denominam-se de cascata devido uma hierarquia existente entre elas.
Digamos que temos um documento conflitante, onde em uma CSS in-line pedindo para
determinada tag tenha seu texto estilizado em vermelho, uma CSS incorporada pedindo para que a
mesma tag tenha seu texto estilizado em azul, e uma CSS linkada pedindo para que a mesma tenha o
seu texto estilizado em verde. Qual prevalecer? Para resolver esta questo foi criada uma hierarquia,
que ser sempre de dentro para fora, ou seja, a estilizao que est mais perto da tag (in-line)
prevalecer sobre as outras, e assim, sucessivamente. Caso no haja CSS in-line, prevalecer a
incorporada, caso no haja nenhuma outra, predominar a CSS linkada. Essa hierarquia til para
momentos em que gostaramos que todo o site tivesse uma determinada estilizao, mas com alguma
exceo, nesse caso inseriramos uma CSS mais local para o elemento especfico.
Obs.: Se algum valor CSS for declarado com a definio !important ele ter prioridade sobre os
demais, ignorando o efeito cascata.

8.2 Sintaxe CSS
Observe que as CSS so escritas de modo diferente que o XHTML, com a presena de
dois-pontos, chaves e ponto-e-vrgula. Chamamos o elemento que queremos atingir no cdigo
XHTML de seletor, o contedo entre as chaves de declarao, as definies do que ser feito de
propriedades e as especificaes das propriedades de valores, dessa forma:
seletor {
propriedade: valor;
}
Os espaamentos so apenas por questo de indentao. Perceba que ao final de cada

propriedade da declarao temos um dois-pontos, e ao fim de cada valor, um ponto-e-vrgula para
mostrar que conclumos a formatao daquela propriedade. Tudo que estiver entre chaves
(declarao) atingir a tag ou elemento definido no seletor. Poderemos definir quantas propriedades
julgarmos necessrias para cada seletor, desde que sigamos corretamente a sintaxe CSS. possvel
utilizar qualquer propriedade para atingir qualquer elemento, mas em alguns casos no far sentido.
Veja um exemplo de um arquivo CSS linkado estilizando uma pgina XHTML:
body {
margin: 0;
background-color: #CCC;
color: #FFF;
}
h1 {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #900;
font-size: 26px;
}
h2 {
font-weight: normal;
font-size: 22px;
color: #393;
}
p {
font-size: 16px;
}

No exemplo, foram atingidas as tags body, h1, h2 e p do cdigo XHTML. Receberam
formataes como cor de fundo da pgina, margens e formataes de texto. Como um arquivo
linkado, se linkassemos vrios arquivos XHTML a esta mesma folha de estilos, todos receberiam a
mesma formatao padro definida na CSS. Atualizar a aparncia do site todo tambm ficaria muito
mais fcil, podendo mudar a cor de fundo de todas as pginas, por exemplo, alterando apenas uma
nica linha de cdigo.
Note que no valor 0 (zero), para as margens, no foi definido uma unidade de medida, j nas
demais foi definido px como padro para pixels. Nas CSS sempre precisaremos definir a unidade de
medida ao qual os nmeros se referem, que podem ser px (pixels), % (porcentagem), cm
(centmetro), pt (ponto) ou in (polegada), a menos que o valor seja 0 (zero).
8.3 Agrupamentos
Podem haver casos em que gostaramos que vrias tags XHTML recebessem a mesma
formatao CSS, por exemplo, que todos os cabealhos da pgina tenham o mesmo tipo de letra,
variando somente em cores e tamanhos. Para isso, definimos todas as tags que gostaramos de atingir
no mesmo seletor, separando-as por vrgula:
h1, h2, h3, h4, h5, h6 {

}
Observe que a fonte Trebuchet MS foi colocada entre aspas. Isso deve ocorrer sempre que um
valor para a propriedade for um contedo que tenha espaos em branco em sua descrio. Outra
coisa interessante que temos a declarao de vrias fontes, uma famlia. Isso acontece devido
incerteza de que o usurio que acessar a pgina ter a primeira fonte escolhida, instalada no seu
sistema. Ento, por precauo, temos algumas fontes que iro assumir o lugar de sua predecessora,
caso ela no exista no computador do usurio, substituindo-a, evitando assim frustrao de quem
acessa a pgina. Todo o caso, vale lembrar, que devemos sempre utilizar fontes-padro, que so
fontes que se julgam devam existir em todos os sistemas atuais.

8.4 Herana
Outro momento, que denominamos de herana, quando temos a definio de elementos

sequenciais, ou seja, uma tag est inserida dentro de outra. Se quisssemos atingir os itens de uma lista
ordenada dentro de um pargrafo, nesse momento separaramos os elementos declarados no seletor
por um espao em branco:
p ul li {
display: inline;
}
No exemplo, solicitamos que todo o item que surgir em uma lista e estiver dentro de algum
pargrafo, seja exibido em linha, e no em bloco. Chamamos de herana, pois o texto ir receber
todas as formataes j aplicadas a tag <p></p>, as formataes de <ul></ul> e de <li></li>,
isto , vai herdando da tag pai os atributos aplicados anteriormente. A herana no ocorre quando
temos uma formatao especfica para o elemento filho. Exemplificando:
p {
color: #900;
}
p ul li {
color: #CCC;
}
Nesse caso, somente recebero a primeira cor aqueles elementos dentro da tag <p></p>
no contidos em listas, pois os contidos em listas recebero a segunda cor. Se no tivssemos
definido uma formatao especfica para listas, todos os textos contidos em tag <ul></ul> e
<li></li> tambm receberiam a mesma formatao por herana, julgando que estejam contidas em
um pargrafo.

8.5 Propriedades para espaamentos
Vamos ver algumas questes importantes a serem tratadas no estudo das CSS. Primeiro
tpico importante: existe um elemento chave, que atingir todas as tags do documento, representado
por um asterisco. Geralmente usa-se esse elemento para remover j de antemo bordas, margens e
espaamentos, verifique seu uso:
* {
margin: 0;
padding: 0;
border:0;
vertical-align: baseline;
}
No exemplo foram zerados valores como margens e espaamentos. Isso chamado pelos
profissionais de reset.
Margem o espaamento dado rea externa do objeto aonde inserida a propriedade.

Atingiremos as margens do seletor com a definio da propriedade margin. No caso de margens
temos vrias formas de trabalhar. Primeiro, especificando valores para cada uma delas:
body {
margin-top: 5px;
margin-right: 3px;
margin-bottom: 10px;
margin-left: 3px;
}
Note que especificamos valores para cada uma das margens individualmente, sendo top a
margem superior, right a margem direita, bottom a margem inferior e left a margem esquerda. Tambm
poderamos atingi-las em uma nica propriedade:
body {
margin: 5px 3px 10px 3px;
}
A ordem para insero sempre a mesma e lembra os ponteiros de um relgio, donde o

primeiro valor constantemente faz referncia ao top, o segundo se refere ao right, o terceiro ao bottom
e, por ltimo, o left.
Dica: Se definirmos margin: 0 auto para um elemento, ele centralizar horizontalmente onde estiver
inserido, pois define zero para o top, e o default centralizado para as demais.

Quando os valores so os mesmos, a especificao de apenas um valor aplicar esse valor s
quatro margens:
body {
margin: 3px;
}
No exemplo, todas as margens tero o valor de 3 pixels.
Outro espaamento comumente utilizado o padding, que define o espaamento entre o

limite do elemento e o contedo nele inserido, como no caso de tabelas e div's. Trabalhar com
padding semelhante s margens em suas propriedades e valores. O grfico a seguir ajuda a
entender a diferena entre margin e padding:
Empregaremos margin quando quisermos alterar o espaamento entre os limites do

contedo e sua rea externa, e padding quando gostaramos de alterar o espaamento entre os
limites do contedo e sua rea interna.

8.6 Propriedades para fundo
As propriedades CSS para alterar o fundo so usualmente utilizadas para alterar o fundo da
pgina, nesse caso aplicado a tag body, mas tambm podem ser empregadas para atingir outros
elementos como tabelas, div's ou sees.
Veja uma tabela prtica com as principais propriedades para alterao de fundo:
Propriedade Funo Valores

Background-color Cor de fundo Cdigo hexadecimal da cor ou nome da cor em ingls.
Background-image Imagem de fundo url (caminho/imagem.jpg).
Tipo de repetio No-repeat, para que no repita, repeat-x, para que
Background-repeat da imagem de repita na horizontal ou repeat-y, para que repita na
fundo vertical.
Um primeiro valor numrico para a distncia em
Posio da relao esquerda do elemento inserido e um segundo
Background-position
imagem de fundo valor numrico para a distncia em relao ao topo do
elemento inserido.
Background-attachment Rolagem do fundo Fixed para que a imagem no role com o documento.
Exemplo:
body {
background-image: url(imagens/fundo.png);
background-repeat: no-repeat;
background-position: 400px 100px;
background-attachment: fixed;
}
Tambm poderemos escrever todos os valores de forma sintetizada, desde que se siga a
ordem correta de declarao (color image repeat attachment position):
body {
background: #CCC url(imagens/fundo.png) no-repeat 400px 100px fixed;
}
Nesse exemplo teremos as mesmas propriedades do anterior, entretanto, com menor

necessidade de cdigo escrito para isso. Caso no utilizar todos os valores para a propriedade, basta
pular para o prximo valor.
Dica: O cdigo hexadecimal de cores pode ser resumido no CSS em casos de cores em que o cdigo se
repete na definio de cada par. Por exemplo, poderamos escrever #CC0099 como #C09.

8.7 Propriedades para bordas
Podemos alterar pelas folhas de estilo as bordas de uma tabela, imagem, div ou outros
elementos. Para isso, usaremos como principais propriedades CSS:

Valor numrico para largura. comum definir 0 (zero) para
Border-width Largura da borda
links em imagens por questes estticas.
Border-color Cor da borda Cdigo hexadecimal da cor ou nome da cor em ingls.
Border-style Estilo da borda Dashed, dotted, ridge, double, solid so alguns exemplos.
Exemplo:
div {
border-width: 3px;
border-color: #900;
border-style: dashed;
}
Ou pode ser escrita em uma nica linha, seguindo a ordem (size style color):
div {
border: 3px dashed #900;
}
Se quisermos tambm poderemos alterar cada borda de forma nica, por exemplo, apenas a
borda de baixo, ou apenas a da esquerda e direita, definindo qual borda gostaramos de alterar com
top (cima), right (direita), bottom (baixo) ou left (esquerda), ficando da seguinte forma:
#container {
border-top: 3px dashed #900;
border-right: 2px dotted #CCC;
border-bottom: 3px dashed #900;
border-left: 2px dotted #CCC;
}

8.8 Formatao de textos
As propriedades CSS para formatao de textos so usualmente aplicadas a seletores das tags
de cabealho, de pargrafo, ou com class e id especficas, como veremos.
Veja uma tabela prtica com as principais funes para formatao de textos:

Font-family Alterar o tipo da letra Famlia de fontes utilizada.
Font-size Tamanho da letra Valor numrico.
Font-style Define valores como Itlico Italic.
Font-weight Define valores como Negrito Bold para negrito, normal para sem negrito.
Cdigo hexadecimal da cor ou nome da cor em
Color Cor da letra
ingls.
Text-align Alinhamento de texto Center, justify, left ou right.
Underline para sublinhado, none para remover
Text-decoration Define valores como Sublinhado
sublinhado, como no caso de links.
Nota: Estas so as propriedades mais comuns para formatao de textos por CSS. Encontre a lista
completa no final da apostila.
Exemplo:
h1 {
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
color: #630;
text-align: center;
font-style: italic;
text-decoration: underline;
}

8.9 Listas
Existem propriedades CSS para personalizarmos as listas ordenadas e as no ordenadas.

Muitas vezes em um documento web utilizamos listas, no apenas para o seu objetivo semntico de
listar valores, mas tambm para funes como menus e galerias de imagens, e para isso precisaremos
personalizar a lista por CSS.
Veja as principais propriedades e valores:

Geralmente usa-se none para no se ter
marcadores. Para uma lista com
List-style-type Define o tipo de marcador marcadores personalizados poderemos
utilizar circle (crculo), square (quadrado),
disc (circulo preenchido), entre outros.
List-style-position Define a posio do marcador inside ou outside.
List-style-image Define uma imagem como marcador url (imagem.jpg).
8.10 Propriedades para tamanho e posicionamento
Ao se trabalhar com div's, imagens ou elementos, temos casos da necessidade em se alterar o

tamanho do objeto ou sua posio na pgina. Para tal, utiliza-se as seguintes propriedades CSS:

Width Altera a largura Valor numrico.
Height Altera a altura Valor numrico.
Left Posicionamento em relao esquerda Valor numrico.
Top Posicionamento em relao ao topo Valor numrico.
Float Flutua o elemento na pgina Left, right ou none.
Exemplo:
img {
width: 35%;
height: 450px;
left: 200px;
top: 400px;
float: right;
}

8.11 Propriedade display
Existem elementos que por caracterstica so elementos de linha, e outros elementos de

bloco. Por exemplo, as tags <span></span>, tags de cabealho e <p></p>, so elementos de
linha, j as tags <div></div>, <ul></ul>, so elementos de bloco, ou ainda tem-se casos de
exibio por dados tabulares, como as tabelas, pela forma em que exibem as informaes. O atributo
display servir para transformar essa maneira de exibio. Podemos fazer com que uma lista ordenada
seja exibida em linha, ou um pargrafo em bloco, por exemplo. Veja os valores para o atributo display:
Valor para atributo display Funo

Inline Muda a exibio do elemento para em linha.
Block Muda a exibio do elemento para em bloco.
None No faz alterao na exibio do elemento ou retorna para o padro.
Table Muda a exibio do elemento para dados tabulares.
Exemplo:
ul {
display:inline;
}
8.12 Propriedade overflow
A propriedade overflow:hidden; ir ocultar todos os elementos que estiverem alm de seus

limites, como barras de rolagem, textos, imagens ou qualquer elemento que for alm dos limites
estabelecidos. Exemplo:
textarea {
overflow:hidden;
}

8.13 Propriedade Cursor
Por meio da propriedade cursor poderemos personalizar o cursor do mouse do usurio,

como se tornar ao passar sobre o elemento onde a propriedade est inserida. Possui diversos
valores, entretanto, o normalmente utilizado o pointer, para que o ponteiro do mouse se torne, em
uma mo indicadora, muito interessante para o caso de botes de formulrios, e default para que o
cursor no mude, como nos links. Poderemos tambm transformar o cursor em cursor de ajuda, ou
de redimensionamento, apenas em casos especiais. Observe o exemplo:
input {
cursor:pointer;
}
8.14 Comentrios
Fazer um comentrio por CSS muito simples. Ele ser iniciado por uma barra seguida de
um asterisco e terminado de forma invertida:
/* Corpo do site */
body {
margin: 3px; /* Definio das margens do documento */
}
Os comentrios podem ser inseridos em qualquer lugar do cdigo CSS, desde que no
atrapalhem o desenvolvimento do cdigo, e so muito teis para nos auxiliar a entender o contedo,
principalmente para cdigos extensos. O navegador sempre ignorar os comentrios.

8.15 Pseudo-elementos
Pseudo-elementos so elementos atingidos por CSS, mas no por completo.

Exemplificando: Poderemos atingir apenas a primeira palavra ou letra, preservando o resto do texto
com a formatao original. Em sua sintaxe define-se o elemento a ser atingido, seguido de dois-
pontos e, em seguida, a pseudo-classe que gostaramos de aplicar. Normalmente faz-se uso de
pseudo-elementos para a estilizao de cada momento do link, veja:
Link:
Atinge o link em seu estado normal na pgina, antes de qualquer interao do usurio.
a:link {
color: #03C;
text-decoration: none;
}
Visited:
Atinge o link em seu estado de link j interagido anteriormente. Por padro, o XHTML
aplica uma formatao roxa a esse estado, embora esteticamente seja melhor alter-lo.
a:visited {
color: #900;
}
Hover:
Momento do link em que o usurio posiciona o mouse sobre ele. Atualmente costuma-se
utilizar uma formatao de sublinhado somente para essa ocasio.
a:hover {
color: #03C;
}

Active:
Link ativo, ou seja, o link selecionado ou no momento do clique do usurio.
a:active {
color: #39F;
}
Obs.: Pode-se definir qualquer formatao a cada momento do link, seja de texto para links escritos
ou imagens, estas so apenas algumas sugestes.
Os pseudo-elementos podem ser utilizados para qualquer tag, por exemplo, a interao de
um usurio com uma imagem, lista ou div.

8.16 Id e class
Muitas vezes precisaremos identificar, no cdigo XHTML, alguns elementos, para assim
podermos atingi-los pelas CSS. Identificaremos os elementos de duas formas diferentes:
8.16.1 Id
Poderemos dar o atributo id para qualquer tag XHTML por ser um atributo global. O valor
do atributo deve ser uma identificao nica no documento. Para evitar contratempos, utilizar
caracteres de A-Z, ou traos e underline. Exemplo:
<h1 id=texto>Texto formatado</h1>
Uma vez identificado o elemento, por padro mundial iremos atingi-lo via CSS atravs de
uma cerquilha seguida da identificao dada ao elemento no atributo id:
#texto {
color: #900;
}
As id's so empregadas quando quisermos estilizar um elemento nico do cdigo XHTML.

8.16.2 Class
Agora imagine que precisssemos estilizar uma galeria de 50 imagens do site, colocando
bordas e tamanho padro para todas elas. No poderamos atingir a tag <img /> sob risco de
estilizar imagens que no gostaramos tambm, como uma logo. Tambm seria incorreto utilizar a
mesma id para todas elas, por no ser semntico. Ento, nesse caso, usaremos class. Veja, usa-se id
em uma tag XHTML para atingir um nico elemento, e class para um grupo de elementos similares.
Observe como ficaria o cdigo XHTML seguido da estilizao das class por CSS:
<img src=imagem1.jpg class=galeria />

...
Atribuindo a mesma class a todos os diferentes elementos XHTML, atingiremos a todos

eles pelas CSS, ao mesmo tempo. Faremos isso por meio de um ponto seguido do nome da class
que gostaramos de estilizar:
.galeria {
border-width: 2px;
border-style: ridge;
border-color: #900;
padding: 2px;
width: 100px;
height: 100px;
}
Pronto, todas as imagens tero a mesma formatao, e o melhor, caso queiramos alterar
alguma formatao para a galeria toda, como a cor da borda, por exemplo, alterando apenas uma
nica linha de cdigo.
Agora digamos que queiramos que determinada class funcione somente quando se refere a
determinada tag, por exemplo, um texto sendo formatado por uma class, mas somente quando
aparecer dentro da tag <p></p>. Supondo que no cdigo XHTML tenhamos a seguinte formao:
<p class=texto> Texto exemplo </p>, o cdigo CSS ficaria assim:
p.texto {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
}
Caso haja a mesma class em outras tags ela no receber a formatao, somente quando
ocorrer em tag <p></p>.

8.17 Trabalhando com div's
Div's so objetos flutuantes inseridos no documento para criar divises onde poderemos
inserir qualquer contedo. um elemento isento de semntica, pois pode ser aplicado para qualquer
finalidade. A div inserida atravs da tag <div></div>. Como vimos em captulos anteriores,
poderemos estruturar todo o layout de uma pgina atravs das div's, mas como hoje possvel realizar
essa funo por HTML5, ela mais utilizada para blocos de contedo especficos no layout e no
tanto para estrutura. As div's, sem CSS, no so exibidas, nem possuem utilidade em si, alm de
separar os elementos, pois so as CSS que iro desenvolv-las. O que se faz ento dar sempre uma
id ou class para elas e, em seguida, configur-las nas folhas de estilo. As propriedades CSS atribudas
as div's so aquelas que anteriormente foram estudadas, como estilizar seu fundo, posio, tamanho e
estilos de texto. As novidades sero as propriedades position e z-index:

Relative, caso a posio seja relativa a outra tag div
Define a referncia para o relativa em que a div est inserida. Absolute, onde a
Position
posicionamento referncia a tela do usurio. Fixed, a div no se
movimenta com a barra de rolagem.
Define a ordem do Valor numrico. Quanto maior a escala de valores, mais
Z-index
posicionamento das div's frente a div ficar.
Para definir o tamanho da div, utilizaremos as propriedades width e height. Com relao ao
posicionamento, daremos as propriedades top e left, com os valores de relao de distncia entre o
topo e a esquerda da referncia definida. A referncia ir depender da opo definida na propriedade
position.
Nota: O uso de CSS tambm chamado de tableless (menos tabelas) justamente porque traz uma
forma mais dinmica para estruturao de layouts, deixando tabelas apenas para dados tabulares,
determinando assim, uma semntica mais apropriada.

Veja no exemplo a estilizao atravs de um arquivo CSS da pgina XHTML gerada em
captulos anteriores, quando criamos um layout por div's (arquivo estrutura_div.html):
* {
margin: 0;
padding: 0;
border: 0;
}
body{
font: 12px Arial;
}
#container {
margin: 0 auto;
width: 1000px;
}
#header {
background: url(imagens/fundo.jpg) repeat-x;
height: 200px;
}
#navbar {
height: 50px;
background-color: #666;
}
#navbar ul {
list-style-type:none;
margin:0 auto;
overflow:hidden;
width:900px;
}
#navbar ul li {
background:#CCC;
float:left;
margin:0 10px;
text-align:center;
width:200px;
}
#navbar ul li a{
color:#FFF;
display:block;
font-size: 20px;
padding:12px 0 ;
}
#navbar ul li a:hover,

#navbar ul li a:active{
background:#900;
color:#FFF;
}
#content {
overflow: auto;
}
#esquerda {
float: left;
width: 300px;
height: 600px;
margin: 10px;
}
#centro {
float: left;
width: 300px;
height: 600px;
margin: 10px;
margin-left: 30px;
}
#direita {
float: right;
width: 300px;
height: 600px;
margin: 10px;
}
#footer {
width: 1000px;
height: 50px;
clear: both;
}
p, h1, h2, h3, h4, a {
padding: 10px;
}
#content p {
font-size: 14px;

}
#content a {
float: right;
}
h1 {
font-size: 26px;
color: #FFF;
text-align: center;
}
h2 {
font-size: 20px;
color: #FFF;
}
h3 {
font-size: 16px;
color: #FFF;
text-align: center;
}
h4 {
font-size: 12px;
color: #036;
}
a:link {
color: #03C;
}
a:visited {
color: #FFF;
}
a:hover {
color: #000;
}
a:active {
color: #099;
}
Observe a imagem de fundo na div header com repeat-x. Esta uma tcnica muito utilizada
e que deixa o site muito mais leve. Baseia-se na criao de uma imagem de 1 pixel de largura e 200 de
altura, por exemplo, podendo ser um degrad ou um fundo especfico para, depois, solicitarmos que
ela se repita at o fim da tela, dando o efeito para toda a sua parte superior. Da mesma forma,
poderemos empregar a mesma tcnica para a vertical, entretanto, nesse caso, elaboraremos a imagem
com pouca altura, e daremos o valor repeat-y.

Captulo 9 -
Trabalhando com CSS3


9.1 Trabalhando com CSS3
Temos uma nova verso para folhas de estilo que trazem efeitos e funcionalidades passivas
de serem empregadas nos navegadores mais atuais. Atravs de CSS3 poderemos colocar sombras,
arredondamentos e at animaes. Muitos efeitos funcionaro em todos os navegadores modernos,
j alguns apenas para navegadores especficos, outros nos quais teremos que criar um cdigo para
adaptar o efeito para os demais navegadores. Para uma lista completa de suporte de cada navegador,
confira a pgina: http://www.findmebyip.com/litmus. Observemos alguns efeitos possveis de serem
realizados por CSS3:
Nota: Os efeitos CSS3 no so suportados por navegadores como o Internet Explorer 8.
9.2 Sombreamento de caixas
Por meio de CSS3 pode-se realizar efeitos como sombra. So geralmente aplicados a tags div
ou elementos em bloco do cdigo XHTML. Para isso, faz-se necessrio definir a cor da sombra, seu
deslocamento com relao ao objeto, e o enevoamento do efeito, alm de fazer cdigos adaptveis
para outros navegadores. Veja:
#exemplo {
width: 300px;
height: 300px;
box-shadow: 2px 2px 3px #CCC;
-moz-box-shadow: 2px 2px 3px #CCC;
-webkit-box-shadow: 2px 2px 3px #CCC;
-o-box-shadow: 2px 2px 3px #CCC;
}
O primeiro valor do atributo box-shadow que determina a cor em caixas define o

deslocamento da sombra em relao ao topo. O segundo valor define o deslocamento da sombra em
relao esquerda. O terceiro valor define o enevoamento do efeito e, o ltimo, a cor. Observe que
fizemos cdigos para adaptar o mesmo efeito em cada navegador. A primeira linha para Internet
Explorer 9, a segunda para Mozilla Firefox, a terceira (webkit) para Google Chrome e Apple
Safari e a ltima linha para o pera.

9.3 Sombreamento de textos
Um efeito de sombreamento semelhante ao box-shadow, mas aplicado a textos o text-

shadow. Veja sua aplicao:
p.exemplo1 {
text-shadow: 2px 2px 3px #CCC;
}
O padro aplicado a box-shadow se mantm aqui, isto , o primeiro e o segundo valores so

para o posicionamento da sombra em relao ao topo e esquerda, respectivamente; o terceiro valor
para enevoamento e, por ltimo, a cor desejada. Nesse caso no faremos adaptao aos navegadores.
Esse efeito no funcionar em nenhuma verso do Internet Explorer.
9.4 Cantos arredondados
Um efeito inovador do CSS3 a possibilidade de arredondarmos os cantos de div's ou

elementos de bloco, isso por meio do atributo border-radius:
#container {
width: 300px;
height: 300px;
border-radius: 3px;
moz-border-radius: 3px;
webkit-border-radius: 3px;
o-border-radius: 3px;
}
No exemplo acima tem-se a definio de 3 pixels de arredondamento, e a adaptao deste

cdigo aos demais navegadores modernos.

9.5 Transition
Cria um efeito de transio para o elemento. Por exemplo, a animao entre o elemento em
seu estado normal, e a transformao que deve ocorrer quando posicionado o mouse sobre ele.
Faremos isso atravs da propriedade transition.
a {
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #F00;
transition: all 3s ease;
-moz-transition: all 3s ease;
-webkit-transition: all 3s ease;
-o-transition: all 3s ease;
}
a:hover {
font-family: Tahoma, Geneva, sans-serif;
font-size: 32px;
color: #900;
}
No primeiro valor de transition escolhe-se aonde se deseja aplicar a transio. Pode ser
definida como color, para alterar apenas a cor, ou font-size para o tamanho, ou at opacity, que
veremos a seguir, para transparncia. Nesse caso definiremos all para todos os elementos
participarem do efeito de transio. Em um segundo momento, define-se o tempo do efeito em
segundos. E, finalmente, o tipo de efeito, que possui diversas variaes, tais como: ease, ease-in,
ease-out, linear, entre outros. Esse efeito no funcionar em nenhuma verso do Internet
Explorer.

9.6 Transparncia
Outro efeito muito interessante que o CSS3 nos proporciona a transparncia nos
elementos, utilizada principalmente para div's e imagens. O efeito acontecer por meio da declarao
da propriedade opacity:
#container {
width: 300px;
height: 300px;
opacity: 0.4;
filter: alpha(opacity=40); /* Para Internet Explorer 8 ou anterior */
}
Simples assim. Ter-se- uma escala de transparncia que varia entre 0, para totalmente
transparente, e 1 para totalmente slido, e a variao dos valores entre 0 e 1 para escolha da
transparncia desejada. No h a necessidade de adaptar o cdigo para os demais navegadores. Caso
a verso do Internet Explorer seja anterior 9, o navegador usar a linha abaixo comentada, escrita
em cdigo CSS padro.

9.7 @Font-face e API Google Webfonts
Um problema que os web designers sempre enfrentaram a obrigao de se utilizar fontes-

padro para a criao dos seus projetos, limitando a esttica dos mesmos. Atravs da propriedade
@font-face da CSS3 poderemos utilizar qualquer fonte em nossos projetos, desde que hospedemos
a fonte junto com o site no servidor, e ela ser automaticamente baixada quando o usurio acessar a
pgina para que possa visualizar o contedo. Para isso, digitaremos a seguinte configurao em uma
seo a parte dentro do cdigo CSS, por exemplo, no incio:
@font-face {
font-family: minhasfontes;
src: url('Arista.ttf'),
src: url('Chicago.ttf');
}
As fontes so linkadas em famlia na ordem dada, separadas por vrgula e entre aspas simples.
O efeito suportado em todos os navegadores e as fontes devero ter a extenso .ttf ou .otf. Fontes
criadas pelo usurio com a extenso .eot so suportadas apenas pelo Internet Explorer 9. No
momento em que desejar utilizar a fonte especfica em um seletor, basta definir o nome dado em
@font-face como valor da famlia da fonte:
h1 {
font-family: minhasfontes;
}
No esquea de colocar a fonte dentro da pasta do projeto e indicar o caminho at ela, de

maneira certa, em @font-face, e de hosped-la no servidor juntamente com os demais arquivos do
projeto, para que o texto possa ser aberto corretamente com a fonte desejada.
Outra forma de inserir todo o tipo de fonte em uma pgina utilizando a API de fontes do
Google, uma galeria imensa de fontes para web onde no h a necessidade de se fazer o download
da fonte para incorporar ao documento, basta escolher a famlia desejada e incorporar o link ao
cdigo. Para isso, acesse a pgina http://www.google.com/webfonts, clique em Start choosing fonts:

No painel a esquerda pode-se procurar uma fonte especfica pelo nome e utilizar filtros de
busca para categorias e tipografia. Nas guias no topo poderemos alterar a forma em que o exemplo
da fonte expresso. Ao encontrar as fontes desejadas, basta clicar em Add to Colection. A cada fonte
escolhida, vai-se criando uma famlia de fontes personalizada. Ao trmino, pode-se clicar em Review,
na parte inferior, para que se possa revisar como ficariam as fontes escolhidas em textos de exemplo.
Para finalizar a escolha e incorporar no cdigo-fonte, clica-se em Use:
Nessa oportunidade deve-se escolher os tipos de fontes a serem incorporadas, se gostaramos

ou no de alguma variao, o tipo de caracteres e, em seguida, gerado um cdigo para ser inserido
na seo <head></head> do documento para que as fontes sejam linkadas a ele.
<link href='http://fonts.googleapis.com/css?family=Cantata+One|Poiret+One|
Simonetta' rel='stylesheet' type='text/css'>

Uma vez linkado ao documento, quando quisermos utilizar a fonte, basta-nos definir seu
nome na formatao por CSS padro do documento, como fazemos com qualquer outra fonte. Veja
o exemplo:
h1 {
font-family: Cantata One, Poiret One, Simonetta, serif;
}

9.8 Gradiente
Poderemos com CSS3 criar gradientes apenas utilizando cdigos. Para isso, definiremos o
gradiente desejado na j conhecida propriedade background-image:
div {
background-image: url(imagens/efeito.png); /* Para Internet Explorer */
background-image: -moz-linear-gradient (#900, #FFF);
background-image: -webkit-linear-gradient (#900, #FFF);
background-image: -o-linear-gradient (#900, #FFF);
}
O efeito no funcionar no Internet Explorer. Para esses casos, mantenha uma imagem
com o gradiente como no cdigo comentado. Voc tambm poder utilizar uma ferramenta web para
facilitar a criao desse gradiente em: http://www.gradients.glrzad.com.

Captulo 10 -
udio e vdeo


10.1 A revoluo do HTML5
Das muitas tecnologias importantes e inovadoras que o HTML5 trouxe, como um novo
DTD, uma nova forma de estruturar layouts, globalizao de atributos e atributos novos, um dos
itens mais esperados e prometidos para HTML5 uma inovao no trabalho de insero de vdeo e
udio no projeto. Antes, para efetuar essa tarefa, eram necessrios cdigos Java Script, adaptaes
de cdigo e incorporao de elementos, ou ento o trabalho com flash. Com o HTML5 poderemos
inserir esses elementos apenas inserindo tags HTML para isso, como fazemos com imagens ou
qualquer outro elemento.
Nota: udio e vdeo por HTML5 no so suportados por navegadores como o Internet Explorer 8.

10.2 udio
Para a insero de udio em seu site por HTML5 utilizaremos a tag <audio></audio>:
<audio src=som.mp3></audio>
A tag <audio></audio> pode receber os seguintes atributos:
Atributo da tag <audio></audio> Funo

src Define a msica a ser tocada.
Atributo booleano.
booleano. Define que a msica ser tocada assim que
autoplay
estiver pronta.
controls Atributo booleano. Controles sero mostrados.
Atributo booleano. A msica tocar novamente assim que
loop
terminar.
Atributo booleano. O udio ser primeiro totalmente
preload carregado para depois ser tocado. cancelado com atributo
autoplay.
Veja um exemplo:
<audio src=som.mp3 autoplay loop controls></audio>
Caso queiramos inserir formatos alternativos para o som, sem a ocorrncia de problemas
ligados a suporte de leitura do mesmo, poderemos fazer uso da tag <source /> dentro da tag
<audio></audio>:
<audio autoplay controls>
<source src=som.mp3 type=audio/mpeg />
<source src=som.wav type=audio/wave />
<source src=som.ogg type=audio/ogg />
</audio>
A tag <source /> possui os seguintes atributos e valores:
Atributo da tag <source /> Valor

src Define a msica a ser tocada.
type Define o tipo do arquivo.
codecs Define o codec necessrio para que a msica seja tocada.
media Padro all ou screen para o tipo de mdia.
O tipo de player empregado depender do navegador em que o site aberto. possvel

personaliz-lo atravs do uso de JavaScript.

10.2.1 Extenses suportadas
Extenso Suporte
Arquivos .mp3 Apple Safari, Google Chrome e Internet Explorer 9.
Arquivos .wav Apple Safari, Mozilla Firefox, Google Chrome e pera.
Arquivos .ogg Mozilla Firefox, Google Chrome e pera.
Arquivos .aac Apple Safari, Google Chrome e Internet Explorer 9.

10.3 Vdeo
Para inserirmos vdeos por HTML5 utilizaremos a tag <video></video>:
<video src=video.mp4></video>
As extenses da tag <video></video> so idnticas a da tag <audio></audio>, em suas

propriedades e valores, assim como o uso da tag filha <source />:
<video autoplay controls>

<source src=video.mp4 type=video/mp4 />
<source src=video.ogv type=video/ogg />
<source src=video.webm type=video/webm />
</video>
possvel empregar os atributos da tag <audio></audio>, vistos anteriormente, e ainda

outros atributos na tag <video></video> para alguns controles adicionais:
Atributo da tag <video></video> Valor

Nome e extenso de uma imagem para ser definida como
poster capa do vdeo enquanto ele ainda estiver pausado ou
carregando.
audio Valor muted para que o vdeo seja isento de udio.
Valor numrico para largura do player. Caso as dimenses
width sejam diferentes do aspect ratio do vdeo, o mesmo ser
preservado.
Valor numrico para altura do player. Caso as dimenses
height sejam diferentes do aspect ratio do vdeo, o mesmo ser
preservado.
O tipo de player usado depender do navegador em que o site aberto. possvel

personalizar controles por meio do uso de JavaScript.

10.3.1 Extenses suportadas
Extenso Suporte
Arquivos .mp4 Apple Safari, Google Chrome e Internet Explorer 9.
Arquivos .webm Mozilla Firefox, Google Chrome e pera.
Arquivos .ogv Mozilla Firefox, Google Chrome e pera.
Observe o exemplo de um udio e um vdeo incorporados a um site pelas novas tags

HTML5:
<!DOCTYPE html>
<html lang=pt-br>
<head>
<title>udio e Vdeo</title>
</head>
<body>
<header>
<audio preload loop controls>
<source src=som.mp3 type=audio/mpeg />
<source src=som.wav type=audio/wave />
<source src=som.ogg type=audio/ogg />
</audio>
</header>
<section>
<article>
<video autoplay controls width=500 height=350>
<source src=video.mp4 type=video/mp4 />
<source src=video.ogv type=video/ogg />
<source src=video.webm type=video/webm />
</video>
</article>
</section>
</body>
</html>


Captulo 11 -
Lista de tags XHTML e
atributos CSS


11.1 Tags HTML
Lista das tags XHTML em: http://www.w3schools.com/html5/html5_ref_dtd.asp
11.2 Lista de novas tags HTML5
Segue uma lista baseada nos novos elementos HTML5. Muitos ainda no tm suporte em
nenhum navegador atual.
Tag Funo
<article> Cria um campo para artigo.
<aside> Contedo relacionado ao artigo ou para criao de sidebar.
<audio> udio em um documento HTML.
<bdi> Parte de um texto que pode ser formatado em diferentes direes.
<canvas> Criao de grficos.
<command> Comando que o usurio pode invocar.
Autocompletar em formulrios como exemplos para o preenchimento do campo.
<datalist>
Atualmente funciona apenas no pera e no Mozzila Firefox.
<datatemplate> Template de dados.
<details> Informaes adicionais que o usurio pode visualizar ou esconder.
<device> Permite ao usurio dar o acesso pgina para um dispositivo.
<embed> Aplicao externa com contedo interativo.
<figcaption> Define uma legenda para um elemento <figure>.
<figure> Ilustraes, imagens, fotos, associados juntamente com alguma legenda.
<footer> Cria uma seo na pgina que pode ser utilizada para criao do Rodap.
<header> Cria uma seo na pgina que pode ser utilizada para criao do Topo.
<hgroup> Container para elementos de ttulo do nvel h1 ao h6.
<keygen> Chave de acesso.
<mark> Texto destacado para fins de referncia.
<meter> Medio dentro de um intervalo pr-definido.
<nav> Lista de links para navegao.
<output> Resultado de um clculo.
<progress> Progresso de uma tarefa como a execuo de um script em Java.
<rt> Componente do texto em uma anotao.
<section> Seo dentro de um artigo.

<source> Exibe mltiplos recursos multimdia.
Define data e hora de uma publicao, por exemplo. Os navegadores atuais ainda
<time>
no oferecem suporte para seu funcionamento.
<track> Legenda para elementos multimdia.
<video> Vdeo em um documento html.
<wbr> Possvel quebra de linha.

11.3 Atributos Globais HTML5
Atributos globais so aqueles que podem ser inseridos em qualquer tag. Com HTML5
muitos atributos que eram especficos se tornaram globais e outros foram incorporados. Muitos deles
ainda no tm suporte em nenhum navegador atual. Verifique a lista:
Atributo Funo
accesskey Especifica uma tecla de atalho para dar foco ao elemento.
class Atribui um nome de classe para ser estilizado por folhas de estilo.
contenteditable Especifica se o elemento editvel.
Atribui um menu de contexto para aparecer quando o usurio utilizar o boto
contextmenu
auxiliar do mouse.
dir Direo do texto.
draggable Especifica se o elemento passvel de ser arrastado.
dropzone Especifica se o elemento arrastado ser copiado, movido ou linkado.
hidden Esconde o elemento.
id Atribui uma identificao ao elemento para ser estilizado por folhas de estilo.
lang Especifica o idioma.
spellcheck Atribui um corretor ortogrfico.
style Para estilizaes inline.
tabindex Especifica a ordem de acesso pela tecla tab.
title Texto ao posicionar o ponteiro do mouse sobre o elemento.

11.4 Lista de propriedades CSS
Propriedade Valores
background Color image repeat attachment position.
background-attachment Fixed ou scroll.
background-image Url (nomedaimagem.jpg).
background-color Cdigo hexadecimal ou nome da cor.
Valor numrico seguido da unidade de medida. Primeiro valor para
background-position
esquerda, segundo para topo.
background-repeat No-repeat, repeat, repeat-x ou repeat-y.
border width style color.
border-color Cdigo hexadecimal ou nome da cor.
border-style None, dotted, dashed, solid, double, groove, ridge, inset ou outset.
border-width Valor numrico seguido da unidade de medida.
border-bottom width style color.
border-bottom-color Cdigo hexadecimal ou nome da cor.
border-bottom-style None, dotted, dashed, solid, double, groove, ridge, inset ou outset.
border-bottom-width Valor numrico seguido da unidade de medida.
border-left width style color.
border-left-color Cdigo hexadecimal ou nome da cor.
border-left-style None, dotted, dashed, solid, double, groove, ridge, inset ou outset.
border-left-width Valor numrico seguido da unidade de medida.
border-right width style color.
border-right-color Cdigo hexadecimal ou nome da cor.
border-right-style None, dotted, dashed, solid, double, groove, ridge, inset ou outset.
border-right-width Valor numrico seguido da unidade de medida.
border-top width style color.
border-top-color Cdigo hexadecimal ou nome da cor.
border-top-style None, dotted, dashed, solid, double, groove, ridge, inset ou outset.
border-top-width Valor numrico seguido da unidade de medida.
clear None, left, right ou both.
color Cdigo hexadecimal ou nome da cor.
Default, pointer, crosshair, e-resize, help, move, ne-resize, n-resize,
cursor
nw-resize, se-resize, s-resize, sw-resize, text, wait ou w-resize.
Block, inline, none, inline-block, inline-table, compact, list-item ou
display
table.

font Style variant weight size family.
font-family Famlia de fontes.
font-size Valor numrico seguido da unidade de medida.
font-style Normal, italic ou oblique.
font-variant Normal ou small-caps.
font-weight Normal, bold, bolder, lighter ou valor numrico.
height Valor numrico seguido da unidade de medida.
left Valor numrico seguido da unidade de medida.
letter-spacing Valor numrico seguido da unidade de medida.
line-height Valor numrico seguido da unidade de medida.
list-style Position; imagem ou position; type.
list-style-image None ou url (nomedaimagem.jpg).
list-style-position Outside ou inside.
None, disc, circle, square, decimal, lower-roman, upper-roman, lower-
list-style-type
alpha ou upper-alpha.
margin Top right bottom left.
margin-left Valor numrico seguido da unidade de medida.
margin-right Valor numrico seguido da unidade de medida.
margin-bottom Valor numrico seguido da unidade de medida.
margin-top Valor numrico seguido da unidade de medida.
overflow Visible, hidden, scroll ou auto.
padding Valor numrico seguido da unidade de medida.
padding-bottom Valor numrico seguido da unidade de medida.
padding-left Valor numrico seguido da unidade de medida.
padding-right Valor numrico seguido da unidade de medida.
padding-top Valor numrico seguido da unidade de medida.
position Absolute, relative, fixed ou static.
text-align Left, right, center ou justify.
text-decoration None, underline, overline, line-through ou blink.
text-indent Valor numrico seguido da unidade de medida.
text-transform None, capitalize, uppercase ou lowercase.
top Valor numrico seguido da unidade de medida.
vertical-align Baseline, bottom, middle, sub, super, text-bottom, text-top ou top.
visibility Hidden ou visible.
width Valor numrico seguido da unidade de medida.

Word-spacing Valor numrico seguido da unidade de medida.
z-index Valor numrico.

11.5 Lista das novas propriedades CSS3
Propriedade Valores
backface-visibility Hidden.
background-origin Border-box, padding-box ou content-box.
background-clip Border-box, padding-box ou content-box.
Valor numrico seguido da unidade de medida como primeiro valor para
background-size
largura e, valor numrico seguido da unidade de medida para valor da altura.
border-color Cdigo hexadecimal ou nome da cor.
url (imagem.jpg) para primeiro valor, valor numrico seguido da unidade de
border-image
medida para segundo e terceiro valor e, valor round, para quarto valor.
border-radius Valor numrico seguido da unidade de medida.
box-sizing Content-box ou border-box.
Valor numrico seguido da unidade de medida para os trs primeiros valores
box-shadow
e, no quarto valor, cdigo hexadecimal ou nome da cor.
column-count Valor numrico.
column-gap Valor numrico seguido da unidade de medida.
No primeiro valor definimos um valor numrico seguido da unidade de
medida, em seguida um estilo, que pode ser None, dotted, dashed, solid,
column-rule
double, groove, ridge, inset ou outset e, por fim, o Cdigo hexadecimal ou
nome da cor.
opacity Valor numrico entre zero e 1.
outline-offset Valor numrico seguido da unidade de medida.
perspective Valor numrico.
Um primeiro valor numrico seguido da unidade de medida para o eixo x e,
perspective-origin
um segundo valor numrico seguido da unidade de medida para o eixo y.
resize None, both, horizontal ou vertical.
Os primeiros dois valores so valores numricos seguidos da unidade de
medida para deslocamento horizontal e vertical, respectivamente; um terceiro
text-shadow
valor para enevoamento e, o quarto valor, como cdigo hexadecimal ou
nome da cor.
text-overflow Clip, ellipsis ou string.
None, matrix, matrix3d, translate, translate3d, translatex, translatey, translatez,
transform scale, scale3d, scalex, scaley, scalez, rotate, rotate3d, rotatex, rotatey, rotatez,
skew, skewx, skewy ou perspective.
Primeiro valor com all ou a definio do que animar, segundo valor em
transition tempo e terceiro valor, como: ease, ease-in, ease-out, ease-in-out, linear ou
cubic-bezier.
word-wrap Normal ou break-word.

@keyframes Para definies de animaes.
@font-face Para definio de fontes externas.

Captulo 12 -
Tabelas para referncia


12.1 Tabela de cores
Em cdigos XHTML e CSS, vistos anteriormente, so utilizadas cores com seu nome em
ingls ou o cdigo hexadecimal que lhe d origem. Esse cdigo formado pela codificao RGB,
onde temos valores para Red (Vermelho), Green (Verde) e Blue (Azul). No CSS, quando ocorre um
cdigo de cores em que se repetem cores consecutivas, como em #FF6600, poderemos escrever
somente trs caracteres, sem a repetio de valores (#F60). Observe a seguir uma tabela com as
principais cores e a tabela completa disponvel em: http://www.elaborata.com.br/tabela_cores.html.
Cor Cdigo Hexadecimal Cor Cdigo Hexadecimal

White #FFFFFF Purple #A020F0
Black #000000 Blue1 #0000FF
Grey #BEBEBE Blue2 #0000EE
LightGrey #D3D3D3 PaleTurquoise1 #BBFFFF
Blue #0000FF Cyan1 #00FFFF
SkyBlue #87CEEB Cyan2 #00EEEE
Turquoise #40E0D0 Green1 #00FF00
Cyan #00FFFF Green2 #00EE00
Aquamarine #7FFFD4 Yellow1 #FFFF00
SeaGreen #2E8B57 Yellow2 #EEEE00
Green #00FF00 Gold1 #FFD700
GreenYellow #ADFF2F Orange1 #FFA500
LimeGreen #32CD32 Orange2 #EE9A00
LightYellow #FFFFE0 Red1 #FF0000
Yellow #FFFF00 Red2 #EE0000
Gold #FFD700 Magenta1 #FF00FF
Goldenrod #DAA520 Magenta2 #EE00EE
Beige #F5F5DC Plum1 #FFBBFF
Firebrick #B22222 grey11 #1C1C1C
Brown #A52A2A grey21 #363636
Salmon #FA8072 grey31 #4F4F4F
Orange #FFA500 grey41 #696969
DarkOrange #FF8C00 grey51 #828282
OrangeRed #FF4500 grey61 #9C9C9C
Red #FF0000 grey71 #B5B5B5
Pink #FFC0CB gray81 #CFCFCF
Magenta #FF00FF gray91 #E8E8E8

12.2 Tabela de fontes-padro
Conforme verificado anteriormente, no se pode empregar todas as fontes que quisermos no

nosso cdigo XHTML e CSS. Por questo de acessibilidade utilizaremos somente fontes-padro,
que so aquelas que temos a certeza de que existem em todos os sistemas operacionais modernos (a
no ser que se use @font-face do CSS3 ou a API de Webfonts do Google). No caso de CSS
usaremos famlias de fontes, para que caso a primeira fonte no exista no computador do usurio, ela
seja substituda pela seguinte e, assim, sucessivamente, para exibir a informao. Veja quais so:
Fonte-padro Famlia de fontes

Arial Arial, Helvetica, sans-serif.
Arial Black Arial Black, Gadget, sans-serif.
Comic Sans MS Comic Sans MS, cursive.
Courier New Courier New, Courier, monospace.
Georgia Georgia, Times New Roman, Times, serif.
Lucida Console Lucida Console, Monaco, monospace.
Lucida Sans Unicode Lucida Sans Unicode, Lucida Grande, sans-serif.
MS Serif MS Serif, New York, serif.
Palotino Linotype Palotino Linotype, Book Antiqua, Palotino, serif.
Tahoma Tahoma, Geneva, sans-serif.
Times New Roman Times New Roman, Times, serif.
Trebuchet MS Trebuchet MS, Arial, Helvetica, sans-serif.
Verdana Verdana, Geneva, sans-serif.
No caso das CSS, deve-se colocar uma fonte que tenha mais de um nome em sua descrio
entre aspas. Exemplo: Trebuchet MS, Arial, Helvetica, sans-serif.

12.3 Tabela de caracteres
Em um documento XHTML poderemos escrever caracteres com acentos, cedilha e

caracteres especiais, entretanto pode acontecer de um usurio que utilize um idioma padro em seu
sistema operacional no estejam disponibilizados esses caracteres. Nesse caso, os caracteres no
sero exibidos, ou sero exibidos de forma deturpada, como um caractere invlido. Para evitar esse
tipo de problema, por questo de acessibilidade, deveremos procurar digitar contedos com
caracteres diferentes, no formato de cdigos que levam a ele, e so interpretados pelos navegadores
em qualquer idioma. So eles:
Caractere Cdigo Caractere Cdigo Caractere Cdigo Caractere Cdigo

Á É Ô ®
á é ô ©
Â Ê Õ Ñ
â ê õ ñ
À Í Ú Ë
à í ú ë
Ã Ó ç &Uuml
ã ó & & ü
Nota: A definio do charset como utf-8 resolve o problema da exibio de caracteres para todos os
idiomas derivados do latin. Se voc utilizar o charset como iso-8859-1 dever mudar os caracteres
especiais para os especificados na tabela anterior.


Captulo 13 -
Concluso


13.1 Leitura complementar
No que diz respeito semntica e padres web sempre bom conferir o site nacional da
W3C: Disponvel em: http://www.w3c.br.
A prpria W3C oferece um portal na web para o aprendizado de novos efeitos e suportes a
HTML, CSS, HTML5 e CSS3. Disponvel em: http://www.w3schools.com.
13.2 Referncias para consulta
Quanto as CSS, o site Maujor a maior referncia nacional atual. Disponvel em:
http://www.maujor.com;
Lista com todas as principais tags HTML. Disponvel em:
http://codigofonte.uol.com.br/artigo/html-xhtml/principais-tags-de-html.
13.3 Referncias bibliogrficas
SILVA, Maurcio Samy. HTML5 A linguagem de marcao que revolucionou a web. 1.

ed. Novatec Editora, 2011.

AP Webstandards Com Html5 Rl11052012

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

AP Webstandards Com Html5 Rl11052012

Uploaded by

Copyright:

Available Formats

WEBSTANDARDS

Todos os direitos desta publicao foram reservados sob forma de lei :

Rua Monsenhor Celso, 256 - 1 andar - Curitiba Paran

Proibida qualquer reproduo, parcial ou total, sem prvia autorizao.

O consumo de alimentos ou bebidas

Elaborata Informtica www.elaborata.com.br 9

Elaborata Informtica www.elaborata.com.br 10

O HTML (Hypertext Markup Language ou Linguagem de Marcao de Hipertexto)

Elaborata Informtica www.elaborata.com.br 11

1.3 As Web Standards

Para coordenar e padronizar as linguagens de marcao, em 1994, Tim Berners-Lee, em

Elaborata Informtica www.elaborata.com.br 12

Semntica na lngua portuguesa o estudo do significado das palavras. Na web, chamamos de

O bom profissional web desenvolve seus projetos levando em considerao a acessibilidade.

Elaborata Informtica www.elaborata.com.br 13

1.8 O que XHTML

O XHTML a reformulao do cdigo HTML, com os conceitos e regras do XML

Elaborata Informtica www.elaborata.com.br 14

Elaborata Informtica www.elaborata.com.br 15

Elaborata Informtica www.elaborata.com.br 16

As pginas web (sites ou stios) so sempre hospedadas em um servidor, e acessadas pelo

2.2 Sintaxe da linguagem

A estruturao do XHTML baseado em tags, ou etiquetas, que so comandos que dizem ao

Tag de elemento contedo Tag de elemento vazio

Elaborata Informtica www.elaborata.com.br 17

Vamos conhecer algumas regras para o uso correto do XHTML:

As tags devem ser escritas em letras minsculas;

A metalinguagem XML case-sensitive (sensvel a maisculas e minsculas), assim como o

As tags devem ser aninhadas;

Sempre fechar as tags;

Elaborata Informtica www.elaborata.com.br 18

H raras excees em que o atributo no tem valor, por no haver necessidade de

<input type=checkbox name=cursos checked />

Elaborata Informtica www.elaborata.com.br 19

DTD (Document Type Definition);

Elaborata Informtica www.elaborata.com.br 20

Define o cabealho da pgina. O que inserirmos entre a tag <head> e a </head> no

<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN

Elaborata Informtica www.elaborata.com.br 21

No caso do documento utilizando as inovaes do HTML5, ficar assim:

O HTML5 encurtou o DTD, facilitou o entendimento da linguagem utilizada no

Elaborata Informtica www.elaborata.com.br 22

Elaborata Informtica www.elaborata.com.br 23

Elaborata Informtica www.elaborata.com.br 24

Elaborata Informtica www.elaborata.com.br 25

Veja o exemplo a seguir:

Elaborata Informtica www.elaborata.com.br 26

Elaborata Informtica www.elaborata.com.br 27

O XHTML possui trs tipos de listas:

Lista no ordenada, definida pela tag <ul></ul>;

Elaborata Informtica www.elaborata.com.br 28

Elaborata Informtica www.elaborata.com.br 29

Elaborata Informtica www.elaborata.com.br 30

As tags de cabealho (ou headings) so extremamente difundidas e utilizadas atualmente. Elas

Elaborata Informtica www.elaborata.com.br 31

3.3.1 Linha horizontal

Obs.: Podemos utilizar a tag <center></center> para centralizar qualquer elemento.

Elaborata Informtica www.elaborata.com.br 32

Para inserir imagens em um documento, devemos antes tomar algumas precaues:

Atributo da tag <img /> Funo

Elaborata Informtica www.elaborata.com.br 33

Elaborata Informtica www.elaborata.com.br 34

Podemos comentar qualquer rea do cdigo, no prejudicando em nada sua sintaxe ou