Com HTML5
http://www.elaborata.com.br
WEBSTANDARDS
Com HTML5
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.
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
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.
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
1.6 Acessibilidade
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.
Captulo 2 -
Entendendo o XHTML
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.
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.
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>
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:
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 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>
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:
<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.
<!DOCTYPE html>
<html lang=pt-br>
<head>
<meta charset=UTF-8 />
<title>Elaborata Informtica</title>
</head>
<body>
</body>
</html>
Captulo 3 -
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.
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>, ...
<!DOCTYPE html>
<html lang=pt-br>
<head>
<meta charset=UTF-8 />
<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>
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>
<meta charset=UTF-8 />
<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.
<!DOCTYPE html>
<html lang=pt-br>
<head>
<meta charset=UTF-8 />
<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.
<!DOCTYPE html>
<html lang=pt-br>
<head>
<meta charset=UTF-8 />
<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>
<!DOCTYPE html>
<html lang=pt-br>
<head>
<meta charset=UTF-8 />
<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>
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>
<meta charset=UTF-8 />
<title>Linha horizontal</title>
</head>
<body>
<center>
<h1>Cabealho 1</h1>
<hr width=300 />
<h2>Cabealho 2</h2>
</center>
</body>
</html>
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:
<!DOCTYPE html>
<html lang=pt-br>
<head>
<meta charset=UTF-8 />
<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.
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:
Captulo 4 -
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):
Keywords (Palavras-chave):
Author (Autor):
Refresh (atualizar):
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):
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):
Serve apenas para informao. Notifica o tipo de software utilizado para a criao do cdigo-
fonte.
Language (Idioma):
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>.
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>
<meta charset=UTF-8 />
<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>
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>
<meta charset=UTF-8 />
<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
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.
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:
<!DOCTYPE html>
<html lang=pt-br>
<head>
<meta charset=UTF-8 />
<title>Layout por tabelas</title>
</head>
<body>
<center>
<table summary=layout width="984" border="0"
cellspacing="0" cellpadding="0">
<!-- Aqui comea o topo ->
<tr>
<td height="100" align="center"
bgcolor="#990000"><h1>Topo</h1></td>
</tr>
<!-- Aqui termina o topo -->
<!-- Aqui comea o menu -->
<tr>
<td height="50" align="center"
bgcolor="#CCCCCC"><h2>Menu</h2></td>
</tr>
<!-- Aqui termina o menu -->
<!-- Aqui comea o contedo -->
<tr>
<td height="400"
align="center"><h3>Contedo</h3></td>
</tr>
<!-- Aqui termina o contedo -->
<!-- Aqui comea o rodap -->
<tr>
<td height="50" align="center"
bgcolor="#CCCCCC"><h2>Rodap</h2></td>
</tr>
<!-- Aqui termina o rodap -->
</table>
</center>
</body>
</html>
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:
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.
<!DOCTYPE html>
<html lang=pt-br>
<head>
<meta charset=UTF-8 />
<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>
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.
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-se- de 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.
<!DOCTYPE html>
<html lang=pt-br>
<head>
<meta charset=UTF-8 />
<title>Layout por div</title>
</head>
<body>
<div id=container>
<!-- Aqui comea o topo ->
<div id=header>
<h1> Topo </h1>
</div>
<!-- Aqui termina o topo -->
<!-- Aqui comea o menu -->
<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>
<!-- Aqui termina o menu -->
<!-- Aqui comea o contedo -->
<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>
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.
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:
<!DOCTYPE html>
<html lang=pt-br>
<head>
<!-- HTML5 IE8-->
<!--[if lt IE 9]><script
src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--
>
<meta charset=UTF-8 />
<title>Layout por HTML5</title>
</head>
<body>
<div id=container>
<!-- Aqui comea o topo ->
<header>
<h1>Topo</h1>
<h2>Slogan</h2>
</header>
<!-- Aqui termina o topo -->
<!-- Aqui comea o menu -->
<nav>
<ul>
<li><a href="index.html" alt="Pgina Inicial"
title="Pgina Inicial">Home</a></li>
<li><a href="sobre.html" alt="Sobre Ns"
title="Sobre Ns">Sobre</a></li>
<li><a href="portfolio.html" alt="Nossos
Projetos" title="Nossos Projetos">Portflio</a></li>
<li><a href="localizacao.html" alt="Localizao"
title="Localizao">Localizao</a></li>
<li><a href="contato.html" alt="Fale Conosco"
title="Fale Conosco">Contato</a></li>
</ul>
</nav>
<!-- Aqui termina o menu -->
<!-- Aqui comea o contedo -->
<section>
<aside>
<h3>Links teis</h3>
</aside>
<article>
<h3>Notcia 1</h3>
<h4>Lorem Ipsum simplesmente uma simulao de
texto da indstria tipogrfica e de impressos, e vem sendo utilizado desde o
Salve este projeto de layout como layouthtml5.html para que, mais tarde, possamos estiliz-
lo atravs das CSS e faamos as demais pginas do projeto.
Obs.: Esta apenas uma sugesto comum de uso, as tags de estruturao de layout do HTML5
podem ser utilizadas em qualquer local do documento.
A tag <header></header> define uma seo para o topo da pgina. Todo o contedo
relativo ao topo deve ser inserido entre a tag de abertura e fechamento;
A tag <nav></nav> voltada para a barra de navegao ou menu;
A tag <section></section> cria uma seo para todo o contedo;
A tag <article></article> define uma rea para insero de notcias e blocos de contedo;
A tag <aside></aside> opcional para o caso de desejar criar um sidebar, como um
segundo menu de categorias na pgina;
A tag <footer></footer> cria uma seo para a insero do rodap da pgina.
Devemos constantemente inserir duas linhas de cdigo no incio do cabealho da pgina para
que as novas tags HTML5 de estrutura funcionem no Internet Explorer:
Dica: As novas tags HTML5 so como as tradicionais, podem receber estilizao por CSS, e
insere-se seus contedos entre a abertura e fechamento.
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>
<meta charset=UTF-8 />
<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>
<meta charset=UTF-8 />
<title>Iframes</title>
</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.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>
<meta charset=UTF-8 />
<title>Iframes</title>
</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>
<meta charset=UTF-8 />
<title>Iframes</title>
</head>
<body>
<iframe src=http://www.elaborata.com.br width=500 height=500
scrolling=auto frameborder=0 align=center seamless></iframe>
</body>
</html>
Insere uma marcao HTML dentro do iframe, muito empregado para blogs. Exemplo:
<!DOCTYPE html>
<html lang=pt-br>
<head>
<meta charset=UTF-8 />
<title>Iframes</title>
</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
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:
Observe o exemplo:
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.
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:
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:
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:
Nesse caso no precisamos definir target, j que a pgina no ser aberta, mas sim ser
destinado o download do arquivo ao usurio.
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>
<meta charset=UTF-8 />
<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 />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><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
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.
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:
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):
Serve para criar um campo de senha, onde os caracteres digitados so ocultos. Os atributos
so semelhantes ao valor text.
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.
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.
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):
Cria um boto genrico. Geralmente utilizado para ganhar funcionalidades por eventos Java
Script.
Submit (Enviar):
Cria um boto que executar o que foi definido no atributo action da tag <form></form>.
Reset (Limpar):
Image (Imagem):
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:
Cols e rows definem a quantidade de linhas e colunas que a rea de texto ter,
respectivamente.
Tag <fieldset></fieldset>
<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.
<!DOCTYPE html>
<html lang=pt-br>
<head>
<meta charset=UTF-8 />
<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>
<label for=nome>Nome: </label>
<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>
<label><input name=cursos type=checkbox
value=dreamweaver /> Dreamweaver </label>
<label><input name=cursos type=checkbox
value=fireworks /> Fireworks </label>
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:
No exemplo, o que for preenchido no campo de mensagem ser tambm processado quando
o usurio utilizar o boto de envio.
Para criarmos um campo numrico poderemos empregar o atributo number para a tag
<input />.
O atributo range para a tag <input /> cria um controle deslizante para uma escolha
numrica. No suportado pelo Mozilla Firefox:
Oferece uma dica sobre o que deve ser preenchido dentro do campo. Pode ser inserido nas
tags <input /> e <textarea></textarea>:
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>:
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:
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.
<!DOCTYPE html>
<html lang=pt-br>
<head>
<meta charset=UTF-8 />
<title>Formulrio de contato</title>
</head>
<body>
<form name=formulario action=form.php method=post
enctype=application/x-www-form-urlencoded>
<fieldset>
<legend>Dados pessoais</legend>
<p>
<label for=nome>Nome: </label>
<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>
Captulo 8
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.
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:
<!DOCTYPE html>
<html lang=pt-br>
<head>
<meta charset=UTF-8 />
<title>Formulrio de contato</title>
<style type=text/css>
p {
color: #900;
font-weight: bold;
}
</style>
</head>
<body>
<p>Pargrafo estilizado por CSS incorporado</p>
</body>
</html>
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:
<!DOCTYPE html>
<html lang=pt-br>
<head>
<meta charset=UTF-8 />
<title>Formulrio de contato</title>
<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.
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;
}
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;
}
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:
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.
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.
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.
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;
}
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.
body {
margin: 3px;
}
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:
Exemplo:
body {
background-color: #CCC;
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;
}
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.
Podemos alterar pelas folhas de estilo as bordas de uma tabela, imagem, div ou outros
elementos. Para isso, usaremos como principais propriedades CSS:
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;
}
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:
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-weight: normal;
font-style: italic;
text-decoration: underline;
}
Exemplo:
img {
width: 35%;
height: 450px;
left: 200px;
top: 400px;
float: right;
}
Exemplo:
ul {
display:inline;
}
textarea {
overflow:hidden;
}
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.
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;
text-decoration: none;
}
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;
text-decoration: underline;
}
a:active {
color: #39F;
text-decoration: none;
}
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.
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:
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;
font-weight: normal;
}
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:
.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>.
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:
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.
* {
margin: 0;
padding: 0;
border: 0;
}
body{
font: 12px Arial;
background-color: #CCC;
}
#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,
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
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:
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;
}
p.exemplo1 {
text-shadow: 2px 2px 3px #CCC;
}
#container {
width: 300px;
height: 300px;
border-radius: 3px;
moz-border-radius: 3px;
webkit-border-radius: 3px;
o-border-radius: 3px;
}
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;
text-decoration: none;
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;
text-decoration: underline;
}
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.
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;
background-color: #CCC;
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.
@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 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:
<link href='http://fonts.googleapis.com/css?family=Cantata+One|Poiret+One|
Simonetta' rel='stylesheet' type='text/css'>
h1 {
font-family: Cantata One, Poiret One, Simonetta, serif;
}
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
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.
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:
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>
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.
<video src=video.mp4></video>
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.
<!DOCTYPE html>
<html lang=pt-br>
<head>
<meta charset=UTF-8 />
<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
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.
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.
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.
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.
Captulo 12 -
Tabelas para referncia
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.
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.
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
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.
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.