HTML Fundamentos

HTML5 Fundamentos
COD.: TE 1580/1_WEB
HTML5 Fundamentos
Crditos
Copyright TechnoEdition Editora Ltda.
Todos os direitos autorais reservados. Este manual no pode ser copiado, fotocopiado,
reproduzido, traduzido ou convertido em qualquer forma eletrnica, ou legvel por qualquer
meio, em parte ou no todo, sem a aprovao prvia, por escrito, da TechnoEdition Editora
Ltda., estando o contrafator sujeito a responder por crime de Violao de Direito Autoral,
conforme o art.184 do Cdigo Penal Brasileiro, alm de responder por Perdas e Danos.
Todos os logotipos e marcas utilizados neste material pertencem s suas respectivas
empresas.
As marcas registradas e os nomes comerciais citados nesta obra, mesmo que no sejam assim identificados,
pertencem aos seus respectivos proprietrios nos termos das leis, convenes e diretrizes nacionais e
internacionais.
HTML5 Fundamentos
Coordenao Geral
Marcia M. Rosa
Autoria
Glaucio Daniel Souza Santos
Coordenao Editorial
Henrique Thomaz Bruscagin
Reviso Ortogrfica e Gramatical

Cristiana Hoffmann Pavan
Superviso Editorial
Simone Rocha Arajo Pereira
Diagramao
Diego Luiz Henrique
Edio n 1 | Cd.: 1580/1_WEB
julho/2013
Este material constitui uma nova obra e uma derivao das seguintes obras originais, produzidas por
TechnoEdition Editora Ltda.:
HTML5
Out/ 2012
Autoria: Andr Ricardo Stern, Athos Morais Valverde Junior, Cristiana Hoffmann Pavan, Henrique Thomaz
Bruscagin, Maria Rosa Carnicelli Kushnir.
XHTML com Tableless
Set/2007
Autoria: Bruno de Alencar Bocci, Maristela Salvatore, Tatiana Yumi Tanaka.
Sumrio
Informaes sobre o treinamento...................................................................... 10
Captulo 1 Introduo HTML5........................................................................ 11
1.1.
A histria da HTML..................................................................12
1.2.
Markup Languages..................................................................13
1.3. HTML5....................................................................................14
1.4.
Visualizando o cdigo fonte....................................................15
1.5. Interpretao e transformao do cdigo fonte.......................16
1.6.
Navegadores...........................................................................16
1.6.1. Motor de renderizao............................................................16
1.6.1.1. WebKit....................................................................................17
1.6.1.2. Gecko......................................................................................18
1.6.1.3. Trident....................................................................................18
1.6.2. Principais navegadores............................................................19
Pontos principais...................................................................................20
Teste seus conhecimentos ................................................................................... 21
Captulo 2 O universo HTML5........................................................................... 25
2.1.
A linguagem HTML5................................................................26
2.2.
Logotipo oficial.......................................................................27
2.3.
Tecnologias da HTML5............................................................27
2.3.1. Semntica...............................................................................28
2.3.2. Offline e armazenamento........................................................29
2.3.3. Acesso ao dispositivo..............................................................30
2.3.4. Conectividade.........................................................................31
2.3.5. Multimdia...............................................................................32
2.3.6. Grficos, 3D e efeitos..............................................................33
2.3.7. Desempenho e integrao.......................................................34
2.3.8. CSS3.......................................................................................35
HTML5 Fundamentos
Captulo 3 Conhecendo a estrutura HTML5................................................ 41
3.1.
Tags e atributos da HTML5......................................................42
3.2.
Estrutura do cdigo HTML5.....................................................43
3.2.1. Tipo de documento (DOCTYPE)................................................43
3.2.2. Elemento raiz (html)................................................................44
3.2.3. Cabealho (head).....................................................................44
3.2.4. Corpo da pgina (body)...........................................................45
3.3.
Metatags.................................................................................45
3.3.1. Meta name..............................................................................45
3.3.2. Palavras-chave e descries.....................................................46
3.3.3. Meta charset...........................................................................47
3.4.
Visualizando o cdigo renderizado..........................................47
Mos obra!................................................................................................................. 53
Captulo 4 Formatando um documento HTML5........................................ 55
4.1.
Introduo...............................................................................56
4.2.
Entendendo a semntica de um documento.............................56
4.3.
Elementos de um documento HTML5.......................................57
Pontos principais ..................................................................................66
Mos obra!................................................................................................................. 71
Captulo 5 Imagem, udio e vdeo................................................................... 73
5.1.
Introduo...............................................................................74
5.2.
Imagem...................................................................................74
5.2.1. O elemento IMG......................................................................75
5.3.
audio.......................................................................................79
5.4.
video.......................................................................................82
Mos obra!................................................................................................................. 91
Sumrio
Captulo 6 Trabalhando com vnculos Links e Microdata................. 93
6.1.
Introduo...............................................................................94
6.2.
Definindo ncoras...................................................................94
6.3.
Tipos de vnculos (links)..........................................................94
6.3.1. Link absoluto..........................................................................95
6.3.2. Link relativo............................................................................95
6.3.3. Link com imagem....................................................................96
6.3.4. Link para e-mail.......................................................................97
6.3.5. Nomeando ncoras..................................................................99
6.4.
Determinando a janela de destino...........................................100
6.5.
Tabindex.................................................................................100
6.6.
Disponibilizando arquivos para download...............................101
6.7.
Microdata................................................................................102
6.7.1. Itemscope...............................................................................103
6.7.2. Itemtype..................................................................................104
6.7.3. Itemprop.................................................................................105
Mos obra!................................................................................................................. 111
Captulo 7 Trabalhando com listas e tabelas............................................. 113
7.1.
Listas......................................................................................114
7.1.1. Lista ordenada.........................................................................114
7.1.2. Lista no ordenada..................................................................116
7.1.3. Lista de definio....................................................................117
7.2.
Tabelas...................................................................................118
7.2.1. Formatao de uma tabela......................................................119
7.2.2. Mesclando clulas...................................................................120
7.2.2.1. Mesclando colunas..................................................................120
7.2.2.2. Mesclando linhas.....................................................................122
Mos obra!................................................................................................................. 129
HTML5 Fundamentos
Captulo 8 Introduo ao CSS3......................................................................... 131
8.1.
Introduo...............................................................................132
8.2. Conceito de camadas..............................................................132
8.3.
Folhas de estilo (CSS)..............................................................133
8.3.1. Declarando estilos...................................................................133
8.4.
Estilos CSS ..............................................................................134
8.4.1. Declarando estilos internamente.............................................134
8.4.2. Declarando estilos no cabealho..............................................134
8.4.3. Declarando estilos diretamente na tag.....................................135
8.4.4. Declarando estilos externamente.............................................136
8.5.
Cascateamento........................................................................137
8.6.
Inserindo comentrios.............................................................138
8.7.
Atributos utilizados para formatao.......................................139
8.7.1. Declarao de cores................................................................139
8.7.2. Formatando texto....................................................................140
8.7.3. Formatando o plano de fundo.................................................142
8.7.4. Formatando bordas.................................................................144
8.7.5. Formatando espaamento entre contedo, margem e bordas..147
8.7.6. Formatando links....................................................................151
8.8.
Seletores.................................................................................153
8.8.1. Seletores de classe..................................................................153
8.8.2. Seletores de id.........................................................................154
8.9.
Tipos de mdia........................................................................156
Mos obra!................................................................................................................. 167
Captulo 9 Criando e posicionando um layout.......................................... 169
9.1.
Introduo...............................................................................170
9.2.
Dimenso real dos elementos..................................................170
9.3.
Configurando as margens dos elementos................................172
9.4.
Posicionando os elementos.....................................................174
9.4.1. Position...................................................................................174
9.4.1.1. Posicionamento esttico..........................................................174
9.4.1.2. Posicionamento fixo................................................................174
9.4.1.3. Posicionamento absoluto.........................................................175
9.4.1.4. Posicionamento relativo...........................................................176
9.4.2. Float........................................................................................178
9.5.
Definindo as camadas.............................................................180
9.6.
Definindo o modo de apresentao dos elementos..................183
Mos obra!................................................................................................................. 191
8
Sumrio
Captulo 10 Formulrios...................................................................................... 193
10.1.
Introduo...............................................................................194
10.2.
Atributos para controle de formulrios....................................194
10.2.1. placeholder.............................................................................194
10.2.2. autofocus................................................................................196
10.2.3. required..................................................................................197
10.2.4. autocomplete..........................................................................198
10.2.5. list..........................................................................................199
10.2.6. max........................................................................................200
10.2.7. min.........................................................................................202
10.2.8. form........................................................................................204
10.2.9. formaction..............................................................................205
10.2.10. formenctype............................................................................206
10.2.11. formmethod............................................................................206
10.2.12. formtarget...............................................................................207
10.3.
Atributos para validar formulrios...........................................207
10.3.1. formnovalidate........................................................................208
10.3.2. novalidate...............................................................................208
10.3.3. pattern....................................................................................209
10.4.
Atributo type (elemento input).................................................209
10.4.1. search.....................................................................................210
10.4.2. url...........................................................................................211
10.4.3. tel...........................................................................................212
10.4.4. email.......................................................................................214
10.4.5. datetime..................................................................................216
10.4.6. datetime-local.........................................................................217
10.4.7. date........................................................................................218
10.4.8. time........................................................................................219
10.4.9. month.....................................................................................219
10.4.10. week.......................................................................................220
10.4.11. number...................................................................................220
10.4.12. range......................................................................................221
10.4.13. color.......................................................................................222
Mos obra!................................................................................................................. 229
Informaes sobre o treinamento
Para que os alunos possam obter um bom aproveitamento deste curso,

imprescindvel que eles tenham participado do nosso curso de Ambiente
Windows, ou possuam conhecimentos equivalentes. Tambm necessrio que
tenham conhecimentos de Internet.
10
Introduo
HTML5
99 Histria da HTML;
99 HTML5;
99 Motor de renderizao;
99 Navegadores.
HTML5 Fundamentos
1.1.A histria da HTML

HTML (Hypertext Markup Language) uma linguagem para publicao na Web
baseada no conceito de hipertexto, ou seja, elementos que se conectam entre
si formando uma rede de informao. Esses elementos podem ser udio, vdeo,
texto etc.
O hipertexto possibilita a comunicao de dados e a organizao de
conhecimentos e informaes. Nesse contexto, a HTML surge como proposta
de linguagem universal, entendida por vrios meios de acesso, para distribuio
global dessa informao.
Tim Berners-Lee desenvolveu a linguagem HTML. A linguagem se tornou
popular na dcada de 1990, quando desenvolvedores e fabricantes de
browsers a transformaram em uma linguagem base. Em 1997, com a verso
3.2 desenvolvida pelo W3C, ela se torna uma linguagem padro.
Desde sua criao, a HTML tem como uma de suas principais caractersticas a
interoperabilidade, ou seja, pode ser usada em vrios dispositivos, plataformas
ou outros meios de acesso.
Em 2004, surge o WHATWG (Web Hypertext Application Technology Working
Group), grupo formado por especialistas das grandes corporaes de TI, que
discordava dos caminhos da Web at ento e que decide desenvolver uma nova
linguagem, uma linguagem mais flexvel para Web: HTML5.
Em 2006, houve o reconhecimento do trabalho do grupo. O prprio Tim
Berners-Lee se juntou ao WHATWG e, oficialmente, em 2009, foi anunciado o
desenvolvimento conjunto da HTML5.
12
Introduo HTML5
1.2.Markup Languages
As Markup Languages, tambm conhecidas como MLs, so linguagens que tm o
objetivo de fornecer elementos adicionais a um texto, denominados marcaes,
a fim de definir uma estrutura ou um layout de informaes.
A tabela a seguir descreve algumas Markup Languages cujos cdigos so
compostos no apenas por contedo, mas tambm por tags, que so marcas
utilizadas para enfatizar a estrutura de um documento. Observe:
Markup Language
Descrio
HTML
(HyperText Markup
Language)
Linguagem utilizada com a finalidade

de publicar hipertextos na Web. Os
hipertextos so documentos que
possuem referncias internas a
outros documentos, isto , links ou
hiperlinks. A HTML uma linguagem
no extensvel, que permite descrever
documentos que no apresentam
complexidade em sua estrutura.
XHTML
(Extensible HyperText
Markup Language)
HTML5
Linguagem criada posteriormente

HTML, apresentando uma reformulao
desta.
Trata-se de uma evoluo das
verses anteriores da HTML, tambm
com a responsabilidade de criar a
marcao de hipertexto, porm, com
recursos mais avanados, cdigo
mais limpo, nfase em semntica
e interoperabilidade dos sistemas.
basicamente uma combinao de
HTML (novos elementos e elementos
melhorados) + JavaScript + CSS3.
13
HTML5 Fundamentos
1.3.HTML5
Esta linguagem uma evoluo dos padres HTML que j existiam, ela associa
as tags de marcao utilizadas em HTML com novos conceitos semnticos e
uma coleo de novos recursos nativos que antes eram possveis somente com
plugins.
Para criar vdeos, player de udio e animaes, antes era necessrio utilizar
plug-ins como Flash, mas com o HTML5 muitos recursos se tornaram nativos e
dispensam o uso de plug-ins. A vantagem que o site ou aplicativo Web (Web
App) poder rodar em vrios dispositivos.
Quando um site funciona normalmente em qualquer navegador, chamamos
de cross-browser. Quando um site funciona normalmente em qualquer
dispositivo, como desktop, notebook, tablet, smartphone, TV, carro, culos,
chamamos de cross-device.
Quando trabalhamos com a linguagem XHTML (Extensible HyperTex Markup
Language), contamos com as tags, as quais so definidas como cdigos desta
linguagem que tm a funo de representar um comando. As tags so colocadas
entre os sinais de menor e de maior, da seguinte forma: <nome_tag>.
1.4.Visualizando o cdigo fonte

Para conhecermos o cdigo fonte de uma pgina Web, podemos realizar dois
procedimentos distintos: clicar com o boto direito do mouse sobre a pgina
desejada e selecionar a opo Exibir Cdigo Fonte (View Source) ou, na barra de
menu do browser, clicar em Exibir (View) e, ento, em Cdigo Fonte (Source).
Ao realizar um desses dois procedimentos, o bloco de notas ou outro editor de
texto aberto, trazendo o cdigo XHTML referente ao documento. Quando o
arquivo possui extenso .html, possvel que o browser exiba imagens, textos,
vdeos, filmes, entre outros, assim como possvel que o bloco de notas exiba
o cdigo fonte responsvel por inserir, diagramar e configurar os elementos.
14
Introduo HTML5
Devemos ter em mente que, mesmo sendo possvel visualizar o cdigo de uma
pgina, no possvel alterar a formatao que ele apresenta. Isso ocorre porque
tanto a pgina quanto o cdigo que visualizamos so cpias dos originais,
os quais esto no servidor e so protegidos por senhas e programas contra
invaso.
Quando visitamos uma pgina Web, ocorre o download de arquivos que
permanecem armazenados em uma pasta de arquivos temporrios da Internet
at que sejam excludos. As imagens, os textos, os arquivos de formatao de
estilos, arquivos JavaScript permanecem armazenados nesta pasta, permitindo,
assim, que as pginas sejam carregadas no browser usando a cpia j
armazenada.
1.5.Interpretao e transformao do
cdigo fonte
Ao abrirmos o browser, inserirmos uma URL em seu campo Endereo e
pressionarmos a tecla ENTER, a resposta obtida um arquivo de texto simples
que pode ser interpretado de vrias maneiras, de acordo com a extenso que
ele apresenta. Caso a extenso desse arquivo seja .html, o browser aciona seu
mecanismo de renderizao.
A engine responsvel no apenas pela interpretao do cdigo fonte, mas
tambm por sua transformao em elementos grficos.
O processo de renderizao ato da transformao do cdigo fonte. Este termo
bastante utilizado para falar a respeito de mtodos que permitem calcular
cores, sombras e texturas, seja em um documento baseado em MLs ou em uma
imagem vetorial.
15
HTML5 Fundamentos
1.6.Navegadores
Existem atualmente centenas de browsers no mercado e qualquer desenvolvedor
que tenha conhecimento da estrutura de renderizao e interpretao de cdigos
HTML pode criar o seu navegador.
Podemos mencionar os principais navegadores existentes no mercado. O que
deve ficar claro que todo navegador de Internet possui em seu ncleo um
motor de renderizao, que responsvel por determinar como o navegador
interpreta a rvore de elementos de um cdigo HTML.
1.6.1.Motor de renderizao
Existem alguns motores de renderizao que so softwares utilizados no ncleo
dos navegadores e clientes de e-mail responsveis por interpretar a linguagem
HTML, folhas de estilo (CSS), imagens e gerar um cdigo final.
A seguir, apresentamos os principais motores de renderizao utilizados no
mercado.
1.6.1.1. WebKit
um motor de renderizao criado pela Apple, utilizado inicialmente no Safari,
conservado como um projeto de cdigo aberto, escrito em linguagem C++ e
hoje mantido por um grande grupo de desenvolvedores.
importante mencionar que existem vrios tipos de WebKit e o fato de dois
navegadores utilizarem WebKit como motor de renderizao no necessariamente
os torna idnticos em seu de resultado final.
16
Introduo HTML5
utilizado nos seguintes navegadores:

Safari;
Google Chrome (alm de WebKit, utiliza o Google V8 JavaScript Engine). Em
abril de 2013, o Google anuncia que est desenvolvendo seu prprio motor
de renderizao, denominado Blink e que ser adotado em seu navegador
Google Chrome;
Konqueror;
Opera (Em 2013, o Opera mudou de Presto para WebKit e tambm ir utilizar
o Google V8 JavaScript Engine). Em abril de 2013, o Opera anuncia que
tambm mudar para o Blink, projeto de cdigo aberto criado pelo Google.
A ideia o aumento de desempenho e o multiprocessamento.
1.6.1.2. Gecko
um motor de renderizao criado pela Fundao Mozilla. Inicialmente chamado
de NGLayout.
Embora seja mantido pela Fundao Mozilla, Gecko uma marca registrada da
Netscape Communications Corporation, empresa pertencente ao grupo AOL.
Firefox;
Mozilla Suite;
Camino;
Flock;
4K-Meleon;
Thunderbird (e-mail).
17
HTML5 Fundamentos
1.6.1.3. Trident
um motor de renderizao proprietrio da Microsoft e embora seja um dos
primeiros a implantar recursos de formatao de estilos, acabou por gerar
inmeros problemas de incompatibilidade.
Cada um dos navegadores Internet Explorer de verses 6 a 8 interpretava o
cdigo sua maneira, o que tornava o trabalho do profissional responsvel
pelo layout um tanto quanto maante, uma vez que um mesmo site tinha vrias
formas de comportamento para um mesmo mecanismo. Com a verso 6.0 do
Trident utilizada no Internet Explorer 10, a tentativa da Microsoft manter uma
maior compatibilidade com o Padro Web (Web Standard).
Internet Explorer;
Microsoft Outlook (e-mail);
Visual Studio (IDE).
18
Introduo HTML5
1.6.2.Principais navegadores
Segundo as estatsticas de vrios sites de pesquisa globais, entre eles o
StatCounter Global Stats, em 2013, o Google Chrome lidera a lista dos principais
navegadores utilizados no mercado com 38.07% de Market Share (Participao
de mercado), seguido pelo Internet Explorer com 29.03% (o que inclui todas as
verses do IE), em seguida, Firefox com 20%, Safari com 8% e Opera com 1.17%.
StatCounter Global Stats, disponvel em gs.statcounter.com/
Os navegadores Google Chrome e Firefox so atualizados automaticamente

a cada seis semanas e possuem uma verso para desenvolvedores, com a
inteno de demonstrar novos recursos que sero implementados em futuras
verses. O Google Chrome Canary a verso para desenvolvedor, disponvel
para download em https://www.google.com/intl/pt-BR/chrome/browser/
canary.html. O Mozilla Firefox Aurora a verso do Firefox para desenvolvedor.
19
HTML5 Fundamentos
Pontos principais
Atente para os tpicos a seguir. Eles devem ser estudados com muita
ateno, pois representam os pontos mais importantes do captulo.
Tim Berners-Lee desenvolveu a linguagem HTML. A linguagem se tornou
popular na dcada de 90, quando desenvolvedores e fabricantes de browsers
a transformaram em uma linguagem base. Em 1997, com a verso 3.2
desenvolvida pelo W3C, ela se torna uma linguagem padro;
As Markup Languages, tambm conhecidas como MLs, so linguagens que
tm o objetivo de fornecer elementos adicionais a um texto, denominados
marcaes, a fim de definir uma estrutura ou um layout de informaes;
A HTML5 uma evoluo dos padres HTML que j existiam, ela associa as
tags de marcao utilizadas em HTML com novos conceitos semnticos e
uma coleo de novos recursos nativos que antes eram possveis somente
com plugins.
20
Introduo
HTML5
Teste seus conhecimentos
HTML5 Fundamentos
1. O que significa a acrnimo HTML?
a) Hypertext Master Language

b) Hypertext Master Link
c) Hyper-Text Markup Link
d) Hypertext Markup Language
e) Hyperlink Markup Language
2. Quem criou o HTML?
a) Steve Jobs
b) Tim Berners-Lee
c) Willian Gates
d) Steve Wozniak
e) Mark Zuckerberg
22
Introduo HTML5
3. Qual motor de renderizao utilizado no

Internet Explorer?
a) Nenhum
b) WebKit
c) Presto
d) Gecko
e) Trident

Mozilla Firefox?
a) Samba
b) WebKit
c) Presto
d) Gecko
e) Trident
23
HTML5 Fundamentos

Google Chrome?
a) MSHTML
b) WebKit
c) Presto
d) Gecko
e) Flock

Safari?
a) V8 JavaScript Engine
b) WebKit
c) Flock
d) Lynx
e) Trident
24
O universo
HTML5
99 A linguagem HTML5;
99 Logotipo oficial;
99 Tecnologias da HTML5.
HTML5 Fundamentos
2.1.A linguagem HTML5

A linguagem de marcao HTML5 facilita o trabalho de desenvolvedores,
tornando possvel a manipulao de elementos e a modificao de caractersticas
dos objetos de maneira leve e funcional. HTML5 possui ferramentas para CSS
e JavaScript, bem como cria novas tags e modifica a funo de outras. Assim,
elementos e atributos que foram modificados podem ser usados de maneira
mais eficaz.
Nas verses anteriores da HTML, no existia um padro para criao de sees
comuns e especficas (rodaps, cabealhos etc.), como tambm no havia um
padro de nomenclatura de IDs, classes ou tags.
A HTML5 facilita a maneira como o cdigo escrito e como as informaes so
organizadas na pgina, possibilitando mais interatividade sem a necessidade
de utilizao de plug-ins e sem perda de performance.
Dois aspectos so relevantes na HTML5:
Interoperabilidade: Facilita a reutilizao de informao em novos
dispositivos;
Retrocompatibilidade: Compatibiliza sites j existentes com os browsers
recentes, ou seja, no preciso refazer sites para que estes se adaptem a
novos conceitos e regras.
26
O universo HTML5
2.2.Logotipo oficial
O logotipo oficial do HTML5 um distintivo que, de forma simples, transmite
muito mais do que apenas o envolvimento da tecnologia com os padres abertos
da Web. Encomendado pela W3C, ele foi desenvolvido por uma respeitada
agncia de publicidade denominada OCUPOP.
Observe o logo:
Este logotipo e todos os outros criados pela W3C para HTML5 e suas tecnologias
esto licenciados como Creative Commons Attribution 3.0 Unported, ou seja,
voc pode compartilhar e modificar este logotipo, bem como utiliz-lo em
produtos, tais como camisetas, bons, logotipos estilizados, com o objetivo de
difundir a tecnologia. Sempre que possvel, voc poder creditar este logotipo
com o termo Criado por W3C.
2.3.Tecnologias da HTML5
As tecnologias do HTML5 so divididas oficialmente em oito reas, descritas a
seguir.
27
HTML5 Fundamentos
2.3.1.Semntica
O foco principal da HTML5 dar sentido ao contedo de um site ou de um Web

App. Com tecnologias como Microdados e Microformatos, a HTML5 permite que
sejam identificados nomes, locais, preferncias, empresas em um texto e que
essas informaes sejam interligadas. Para isso, faz uso de uma rica coleo de
tags, dando significado semntico a textos que antes eram apenas conjuntos
de palavras sem sentido para as mquinas.
Alm de tags semnticas para o contedo do texto, a parte

de formulrios ganhou novas entradas de dados que esto
melhores associadas ao seu real objetivo. H tipos de entrada
de dados especficos para e-mail, nmeros, calendrios, cores
e muito mais.
28
O universo HTML5
2.3.2.Offline e armazenamento
Graas a tecnologias como HTML5 App Cache, Local Storage, Indexed DB e as

novas especificaes de API de arquivos, os Web Apps e sites podem ser mais
rpidos e continuar trabalhando mesmo se no houver conexo com a Internet.
29
HTML5 Fundamentos
2.3.3.Acesso ao dispositivo
Com a utilizao da API de Geolocalizao, as aplicaes Web podem acessar

recursos de dispositivos e melhorar a experincia do usurio: desde udio/
vdeo at microfones e cmeras.
30
O universo HTML5
2.3.4.Conectividade
Com mais eficincia em conectividade, que necessria nas aplicaes em

tempo real, como chat, temos, tambm, velocidade maior para jogos e melhor
comunicao. O envio de dados entre cliente e servidor tambm se torna muito
mais rpido e eficiente com a utilizao de Web Sockets e Server-Sent Events.
Em Ajax, temos uma requisio cliente/servidor de forma

assncrona. A novidade com Server-Sent Events que podemos
inverter esse processo: o servidor que envia eventos para
o cliente. Isso ideal para jogos com vrios jogadores
simultneos.
31
HTML5 Fundamentos
2.3.5.Multimdia
udio e vdeo so os principais recursos de multimdia para integrao com

suas aplicaes Web e sites.
32
O universo HTML5
2.3.6.Grficos, 3D e efeitos
Com a utilizao de SVG, Canvas, WebGL e recursos CSS3 3D, possvel produzir
experincias visuais incrveis para o usurio, sem a necessidade de plug-ins, ou
seja, nativamente no navegador.
importante salientar que alguns desses recursos ainda no

esto completamente padronizados pela W3C e ainda no
foram adotados pelos principais navegadores. Para maiores
esclarecimento sobre padronizao veja: www.caniuse.com.
33
HTML5 Fundamentos
2.3.7.Desempenho e integrao
Utilizando tecnologias como Web Workers e XMLHttpRequest 2, possvel criar

suas aplicaes Web e contedo dinmico (Ajax) de forma mais rpida, alm da
grande variedade de tcnicas que permite o aumento de desempenho
34
O universo HTML5
2.3.8.CSS3
CSS3 uma das maiores revolues e, embora seja independente da HTML5,

entendida como uma de suas variantes em termos de novas tecnologias de
padro aberto para estilizao e efeitos de um documento formatado. Com
ela, voc cria suas aplicaes Web sem sacrificar a estrutura semntica ou o
desempenho. So disponibilizadas novas formas de estilizao de fontes, de
alinhamento de layout, de seletores avanados, animao e transformao.
35
HTML5 Fundamentos
Pontos principais
ateno, pois representam os pontos mais importantes do captulo:
A HTML5 facilita a maneira como o cdigo escrito e como as informaes
so organizadas na pgina, possibilitando mais interatividade sem a
necessidade de utilizao de plug-ins e sem perda de performance;
Dois aspectos so relevantes na HTML5: a interoperabilidade, que facilita a
reutilizao de informao em novos dispositivos, e a retrocompatibilidade,
que permite compatibilizar sites j existentes com os browsers recentes,
ou seja, no preciso refazer sites para que estes se adaptem a novos
conceitos e regras;
O logotipo HTML5 e todos os outros criados pela W3C e suas tecnologias
esto licenciados como Creative Commons Attribution 3.0 Unported, ou
seja, voc pode compartilhar e modifica-los;
As tecnologias do HTML5 so divididas oficialmente em oito reas: Semntica;
Offline e Armazenamento; Acesso ao Dispositivo; Conectividade; Multimdia;
Grficos, 3D e Efeitos; Desempenho e Integrao; e CSS3.
36
O universo
HTML5
HTML5 Fundamentos
1. Qual categoria da HTML5 responsvel por

utilizar o XMLHttpRequest 2?
a) Desempenho e acesso ao dispositivo

b) Desempenho e integrao
c) Multimdia
d) Desempenho e semntica
e) CSS3
2. Qual categoria da HTML5 responsvel por

manter a aplicao funcionando mesmo sem
conexo com Internet?
a) Offline
b) Semntica
c) Multimdia
d) Desempenho e integrao
e) Conectividade
38
O universo HTML5
3. Quais os principais elementos para a

aplicao de multimdia em uma soluo Web?
a) udio e API de udio.

b) Teclado e vdeo.
c) Mouse e teclado.
d) udio e vdeo.
e) udio e codec.
4. Quais elementos podemos acessar por meio

da categoria Acesso ao dispositivo?
a) Mouse e eventos touch.

b) Monitor, mouse e teclado.
c) Microfone, cmera e outros recursos de
hardware.
d) GPS, acelermetro e orientao do
dispositivo.
e) No possvel acessar o hardware com
API de acesso ao dispositivo.
39
HTML5 Fundamentos
5. Qual e tecnologia responsvel por permitir

a formatao dos arquivos incluindo fontes,
alinhamento, cores e estilizao geral do site?
a) HTML5
b) 3D
c) Multimdia
d) Semntica
e) CSS3
40
Conhecendo
a estrutura
HTML5
99 Tags e atributos da HTML5;

99 Estrutura do cdigo HTML5;
99 Metatags;
99 Visualizao de um cdigo renderizado.
HTML5 Fundamentos
3.1.Tags e atributos da HTML5

Tag o termo atribudo aos cdigos utilizados em HTML. As tags so identificadas
por estarem entre o sinal menor que (<) e maior que (>), conforme demonstram
os seguintes exemplos: <html></html>; <body></body>.
A estrutura de um documento HTML formada basicamente por tags, as quais
podem ou no possuir atributos.
preciso ter em mente que as tags e os atributos que compem um documento
HTML5 devem estar de acordo com algumas regras, a fim de que sua estrutura
esteja adequada.
Dentre essas regras, destacamos a necessidade de que um elemento vazio,
assim como os outros elementos, tenha uma tag de abertura e outra de
fechamento, por exemplo, <title></title>. Alm disso, os valores referentes
aos atributos devem ser colocados entre aspas duplas, at mesmo os valores
que so compostos por nmeros.
As tags so hierrquicas, logo, dentro de um par de tags podemos ter outras
tags que atuam como elementos filhos das tags principais. o que ocorre, por
exemplo, com a tag <title></title que filha da tag <head></head>, que
por sua vez filha do elemento ou tag raiz <html></html>.
Veja um exemplo de hierarquia:
<html>
<head>
<title>HTML5 Fundamentos</title>
</head>
<body>
</body>
</html>
Quando essas regras so observadas, o documento HTML5 construdo de

forma adequada, reduzindo a possibilidade de que ocorra um problema.
42
Conhecendo a estrutura HTML5
3.2.Estrutura do cdigo HTML5

A seguir, temos um modelo que demonstra a estrutura correta de um cdigo
HTML5. Observe:
Podemos verificar que este exemplo demonstra a estrutura correta de um cdigo

HTML, pois todas as regras mencionadas anteriormente foram obedecidas: o
valor do atributo foi colocado entre aspas, todas as tags foram declaradas em
letra minscula (caixa baixa) e todas as tags abertas tambm foram fechadas.
3.2.1.Tipo de documento (DOCTYPE)

DOCTYPE um tipo de declarao que deve obrigatoriamente constar em um
cdigo HTML, sendo includa antes do elemento raiz desse cdigo. Determina
ao navegador qual o tipo de documento ele dever interpretar.
Diferentemente da linguagem anterior, XHTML, existe agora apenas um tipo de
declarao e este bem simples. Anteriormente, um tipo de declarao do tipo
transacional era feito da seguinte maneira:
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml -transitional.dtd>
Agora, no HTML5, usamos:

<!DOCTYPE html>
43
HTML5 Fundamentos
3.2.2.Elemento raiz (html)

O elemento raiz de um cdigo HTML deve ser a tag <html>. Tal elemento pode,
ainda, possuir um atributo lang responsvel por determinar qual o idioma do
documento em questo, e ainda permitir que os navegadores sugiram a melhor
traduo quando algum usurio de um pas cujo idioma seja diferente do
documento acessar o site. Para o portugus do Brasil, utilizamos lang=pt-br.
O atributo lang pode ser utilizado tambm dentro de textos no

documento com a inteno de determinar o idioma que est
sendo utilizado em um determinado local. Por exemplo: <span
lang=es> Bienvenido a HTML5</span>.
3.2.3.Cabealho (head)
O cabealho, representado pelo elemento <head>, contm informaes
genricas a respeito do contedo do documento e da forma que ser exibido.
Essas informaes genricas tambm so chamadas de metadados, os quais
representam informaes capazes de descrever outros dados. Portanto,
podemos dizer que a funo da tag <head> determinar o cabealho de uma
pgina.
Todos os elementos que compem esta tag no so exibidos pelo browser.
Dentre esses elementos, podemos ter metatags, folhas de estilo, scripts, entre
outros. Dentro da tag <head>, deve ser inserida a tag <title>, cuja funo
determinar o ttulo da pgina.
Se desejarmos carregar estilos para formatao de contedo na prpria pgina,
utilizamos o elemento ou tag <style></style>. Se os estilos forem carregados
externamente, utilizamos o elemento <link>.
Quando precisamos adicionar programao de script ao documento, de forma
que essa seja carregada antes do corpo do site, podemos adicionar o elemento
<script></script> como elementos filhos de <head></head>.
44
3.2.4.Corpo da pgina (body)

O corpo de uma pgina HTML5 determinado pela tag <body>, cujos elementos
tm a funo de determinar tudo o que ser apresentado pelo browser de forma
grfica. Observe o exemplo a seguir:
<body>
Conhecendo a estrutura do cdigo HTML5
</body>
3.3.Metatags
Definimos metatags como sendo cdigos referentes a informaes e a indicaes.
Assim como as folhas de estilo e os scripts, as metatags representam um dos
elementos a serem colocados no cabealho da pgina (tag <head>).
O elemento utilizado para realizar a declarao de uma metatag o <meta />,
cuja funo fornecer dados capazes de descrever informaes presentes no
corpo da pgina. Normalmente, essas informaes referem-se descrio do
contedo e a palavras-chave.
3.3.1.Meta name
O elemento <meta name /> costuma referir-se s informaes relacionadas
ao autor da pgina, conforme demonstra o exemplo a seguir:
<meta name=author content=autor_da_pgina />
Podemos observar que author um atributo que permite determinar o nome

do desenvolvedor da pgina.
O site www.humanstxt.org permite que voc crie um arquivo

de texto determinando quem so as pessoas por trs do site,
e que reas cada uma delas atuou. Aps cri-lo, no elemento
<link />, feita uma ligao com esse arquivo de texto. Essa
tem sido uma iniciativa bem aceita pela comunidade mundial de
desenvolvedores Web, para colocar mais informaes sobre os
autores do site.
45
HTML5 Fundamentos
3.3.2.Palavras-chave e descries
Para compreender a importncia das palavras-chave e das descries, preciso
ter em mente que as buscas dinmicas realizadas por meio dos motores de
busca so auxiliadas, entre outras regras, por metatags.
A fim de realizar uma pesquisa, os motores de busca utilizam regras que
verificam os cabealhos e o contedo das pginas na rede, para encontrar as
palavras-chave que esto presentes nas metatags e que so representadas pelo
atributo keywords. Esses aplicativos so chamados de robots.
Assim que a palavra-chave encontrada, todas as descries contendo o
atributo description que foram encontradas pelas metatags so exibidas em
uma pgina de resultado.
Embora as metatags possam conter vrias palavras-chave, as quais devem ser
separadas por vrgulas, a descrio requer mais objetividade, visto que um texto
de descrio bastante extensa pode no ser visualizado por inteiro, uma vez
que o motor de busca limita a quantidade de caracteres a ser exibida:
<meta name=keywords content=HTML5, CSS3, Semntica, Canvas />
<meta name=description content=Nossa empresa esta situada no
melhor... />
Os mecanismos que encontram as palavras-chave (keywords) apresentam a

descrio do site, a qual est presente no atributo description.
Quando trabalhamos com a Internet, temos no apenas as ferramentas de
busca, mas tambm os catlogos, que so sites destinados realizao de
pesquisas e cujo banco de dados pode ser alimentado, desde que seja feito um
cadastramento para isso.
46
3.3.3.Meta charset
Quando precisamos tornar nosso site disponvel para os principais idiomas,
precisamos determinar o encoding que o site utilizar. Existe um encoding que
permite utilizar cerca de um milho de caracteres: chama-se utf-8.
Para determinar o encoding utilizado no documento, temos o elemento meta
com o atributo charset <meta charset/>:
<meta charset=utf-8>
3.4.Visualizando o cdigo
renderizado
Para visualizar o cdigo renderizado, devemos salvar o arquivo com a extenso
.html. Vale destacar que visualizar o cdigo renderizado significa visualizar o
resultado obtido com os cdigos a partir do browser.
Aps salvarmos o documento como .html, podemos abri-lo de duas formas
distintas: com um duplo clique sobre o nome do arquivo salvo, ou a partir do
browser utilizado. importante destacar que, para criar uma pgina HTML5,
podemos utilizar um editor de textos simples.
Existem inmeros editores de texto e Ambientes Desenvolvimento Integrado (IDE
- Integrated Development Enviroment). Veja a lista com alguns dos softwares
mais utilizados no mercado:
Adobe Dreamweaver;
Sublime Text;
Aptana Studio;
Eclipse;
Vim;
Notepad++;
Editplus.
47
HTML5 Fundamentos
Pontos principais
ateno, pois representam os pontos mais importantes do captulo:
Tag o termo atribudo aos cdigos utilizados em HTML. As tags so
identificadas por estarem entre o sinal menor que (<) e maior que (>);
O elemento raiz de um cdigo HTML deve ser a tag <html>. Tal elemento
pode, ainda, possuir um atributo lang, responsvel por determinar qual o
idioma do documento em questo, e ainda permitir que os navegadores
sugiram a melhor traduo quando algum usurio de um pas cujo idioma
seja diferente do documento acessar o site;
A funo da tag <head> determinar o cabealho de uma pgina. Todos
os elementos que compem esta tag no so exibidos pelo browser. Dentre
esses elementos, podemos ter metatags, folhas de estilo, scripts, entre
outros;
O corpo de uma pgina HTML5 determinado pela tag <body>, cujos
elementos tm a funo de determinar tudo o que ser apresentado pelo
browser de forma grfica;
Definimos metatags como sendo cdigos referentes a informaes e
a indicaes. Assim como as folhas de estilo e os scripts, as metatags
representam um dos elementos a serem colocados no cabealho da pgina
(tag <head>);
O encoding padro para Web, que abrange mais de um milho de caracteres
o utf-8.
48
Conhecendo a
estrutura HTML5
HTML5 Fundamentos
1. Quais as tags principais e em que ordem

elas formam a estrutura de um documento
HTML vlido?
a) <html><div></div><form></
form><head></head></html>
b) <html><body></body><head/>
c) <html><head><body></body><title>
d) <html><head><title></title></
head><body></body></html>
e) <html><head><title></
title><body></head></html>
2. Qual encoding deve ser utilizado para tornar

o documento compatvel com os principais
idiomas atuais?
a) iso8859-1
b) version=2.0
c) utf-8
d) utf16
e) lang=pt-br
50
3. Para determinar informaes do documento

HTML utilizamos a tag meta. Qual atributo deve
ser utilizado para apresentar uma descrio
do site nos motores de busca?
a) search
b) description
c) name
d) humanstxt
e) body
4. Para determinar informaes do documento

HTML utilizamos a tag meta. Qual atributo
deve ser utilizado para configurar o encoding
da pgina?
a) content
b) contenttype
c) name
d) author
e) charset
51
Conhecendo a
estrutura HTML5
Mos obra!
HTML5 Fundamentos
Laboratrio 1
A Criando um documento HTML com os elementos principais
1. Dentro do diretrio labs crie um arquivo com o nome lab_cap3.html;
Caso no tenha uma pasta criada no diretrio local, crie uma

pasta com o nome treinamentoHTML5 e dentro desta pasta
crie uma pasta chamada labs.
2. Determine o doctype apropriado para HTML5;

3. Crie os elementos principais de um documento HTML5 vlido;
4. Determine o ttulo HTML5 Fundamentos Captulo 3;
5. No contedo do documento, insira a frase: Primeiro laboratrio de HTML5;
6. Salve o documento e execute no navegador;
7. Clique com o boto direito do mouse sobre o documento e mande exibir o
cdigo fonte;
8. Verifique se a estrutura exibida condiz com o que foi criado.
54
Formatando
um
documento
HTML5
99 Entendendo a semntica de um documento;

99 Elementos de um documento HTML5.
HTML5 Fundamentos
4.1.Introduo
Este captulo tem por objetivo apresentar as tags ou elementos e os atributos
que so utilizados com a finalidade de formatar um documento HTML5. Veja, a
seguir, detalhes a respeito deste assunto.
4.2.Entendendo a semntica de um
documento
Quando criamos um documento HTML5, seja ele um site ou um aplicativo Web
(Web App), precisamos conhecer a estrutura dos elementos principais de um
documento HTML5 bem formatado.
Em sua nova verso, o HTML permite utilizarmos elementos que possuem
significado tanto para os desenvolvedores, quanto para os motores de busca.
Isso chamado de semntica.
Em verses anteriores do HTML, as reas de um site eram divididas por tags
que no possuam significado semntico; frequentemente, o elemento <div>
era utilizado quando fosse necessrio criar um menu para o site era usado uma
sintaxe semelhante a imagem a seguir:
56
Formatando um documento HTML5
Agora, com o HTML5, temos novos elementos semnticos, que do pleno

significado ao documento. Em um contexto de menu de navegao, possvel
utilizar o elemento <nav> criado especificamente como uma seo que contm
um menu de navegao:
Alm dos elementos de navegao, existem inmeros elementos semnticos

que atendem demanda das aplicaes Web e dos mecanismos de busca.
4.3.Elementos de um documento
HTML5
Em um documento HTML5, todos os elementos comeam com a definio do
tipo do documento. Isso possvel por meio da tag <!doctype HTML>, seguida
pela abertura da tag <html>.
Aps essa definio, temos a criao do cabealho do documento por meio
da tag <head>, que ir definir o que deve ser carregado antes da pgina ser
exibida ao usurio.
57
HTML5 Fundamentos
Definido o cabealho e seu ttulo, o corpo do documento criado por meio da
tag <body>, formando a estrutura bsica a seguir:
Dentro da tag body, colocamos o contedo de nosso site, que ser dividido por
tags que representam seu significado.
Veja, a seguir, uma lista com os principais elementos do HTML5 e seus respectivos
significados:
html
Este o elemento raiz do documento HTML, ficando logo no incio. Dentro dele,
ficam todos os elementos filhos.
head
Este o primeiro elemento filho aps o elemento raiz; o cabealho do
documento, que deve ser carregado antes da pgina ser exibida ao usurio.
Dentro dele, utilizamos a tag <meta charset=utf-8 />.
58
link
Elemento responsvel por criar uma referncia para um arquivo externo, possui
um atributo rel (relation) para explicar o motivo dessa referncia. O valor mais
comum para rel Stylesheet, referindo-se a um arquivo externo que ir dar
forma e organizao ao documento atual, formatando cor, fontes, formas e
todo o documento.
body
O incio do corpo do documento.
header
O cabealho do documento. Quando o elemento header for filho de outro
elemento dentro de um documento, por exemplo, dentro de uma section, ele
ser o cabealho deste bloco especfico. Logo, em um documento podemos ter
vrios blocos section e cada um ter seu header independente.
main
O contedo principal da pgina alocado dentro da tag main. recomendvel
utilizar o atributo role=main, uma vez que nem todos os navegadores
implementaram esse novo elemento. Informaes no essenciais podem ser
deixadas de fora.
section
Uma seo com contedos diversos no documento, por exemplo, a introduo
ou o ttulo. Um layout pode ser dividido em vrias sections, desde que possuam
contedo que reflitam algum sentido semntico.
nav
Uma seo contendo um menu de navegao, formado por vculos que ligam
um documento ou pgina a outra pgina.
59
HTML5 Fundamentos
article
Quando necessrio armazenar o texto principal do documento, por exemplo,
um artigo de uma revista, jornal, ou blog, ele deve ficar dentro do elemento
article, que pode possuir um cabealho com o ttulo principal e subttulo.
recomendvel a criao de apenas um elemento article por documento.
aside
Uma seo que contm contedo relacionado aos elementos em sua volta.
comumente utilizada para barras laterais, tais como publicidade, podendo
conter outros elementos filhos como nav, representando um menu de opes.
h1- h6 e hgroup
Estes elementos permitem criar o ttulo principal do documento utilizando h1 e
os subttulos hierrquicos de h2 at h6. Quando necessrio, possvel agrupar
esses ttulos dentro de um grupo representado pelo elemento hgroup.
footer
O rodap do documento ou de uma section pode conter outros elementos
filhos, tais como nav, tornando-o assim um menu de navegao no rodap.
p
Elemento utilizado para pragrafo.
div
Uma seo do site que no possui significado semntico.
60
Na imagem a seguir, temos a estrutura de um documento, simples e resumida,

para mostrar como so estruturados os elementos anteriormente citados.
Essa imagem resumida criada quando o design de interface est sendo
desenvolvido e a esse recurso damos o nome de wireframe. Observe:
Para criar esta estrurura, o procedimento o seguinte:
61
HTML5 Fundamentos
O primeiro passo criar o doctype, o elemento raiz, o cabealho do documento,
a codificao para acentuao, o ttulo do site, finalizar o cabealho e iniciar o
corpo do documento:
Agora, criamos o cabealho do documento, com o elemento <header>. Dentro

do dele, colocamos o elemento de ttulo principal <h1>, tambm o elemento
de navegao <nav>, com uma lista <ul>:
62
Uma seo para os itens laterais criada, com um menu de navegao utilizando
o elemento <nav>. Dentro desta seo, criada uma lista com o elemento
<ul> e um elemento <aside> com informaes relacionadas ao contedo
adicionado dentro da section; este elemento pode representar, por exemplo,
uma publicidade:
Um elemento <section> adicionado para o contedo principal e, dentro deste

elemento, criamos um elemento <article> para o texto principal desta pgina,
com um cabealho, um pargrafo e um rodap.
Quando um elemento <article> criado, os elementos filhos devem fazer
referncia direta ao texto. Por exemplo, dentro do elemento <article>, temos
um <header> com um <h1> para o ttulo do texto principal:
63
HTML5 Fundamentos
Na parte final do documento, criado um elemento <footer>, que determina
o rodap do documento, com uma frase que pode compreender os direitos
autorais e um menu de navegao com o elemento <nav>, que compreende
alguns links importantes do documento:
64
Com o documento completo, a importncia dos elementos semnticos do

HTML5 reforada, cada parte da pgina possui um elemento que d sentido
ao contedo e organiza as informaes tanto para o usurio quanto para os
mecanismos de busca.
65
HTML5 Fundamentos
Pontos principais
Em sua nova verso, o HTML permite utilizar elementos que possuem
significado tanto para os desenvolvedores, quanto para os motores de
busca. Isso chamado de semntica;
Html o elemento raiz do documento HTML, ficando no incio dele. Em seu
interior ficam todos os elementos filhos;
Dentro do elemento head, utilizamos a tag <meta charset=utf-8 />;
Um layout pode ser dividido em vrias sections, desde que possuam
contedo que reflitam algum sentido semntico;
Uma div diferente de uma section no possui qualquer significado semntico;
O elemento header utilizado para criar um cabealho no documento ou
no bloco de seo;
Um elemento article responsvel pelo texto principal do site. Normalmente,
s h um elemento article por pgina.
66
Formatando um
documento HTML5
HTML5 Fundamentos
1. O que significa semntica na HTML5?
a) Um recurso para criar formulrios

rapidamente.
b) Dar sentido e significado ao cdigo
criado.
c) Uma forma de separar o que texto do
que imagem.
d) Um recurso que facilita a compreenso
para os motores de busca.
e) As alternativas b e d esto corretas.
2. Qual elemento responsvel por criar

uma ou mais reas no site com contedo
semnticamente relevante?
a) Section
b) Header
c) Head
d) Link
e) Body
68
3. Qual a diferena entre os elementos article

e section?
a) Um article pode conter vrios section.

b) O elemento article utilizado para
imagens e section para textos.
c) O elemento section uma seo do site,
podendo existir vrios, enquanto article
para o texto principal, como uma matria
de revista ou blog.
d) Um elemento article uma seo do site,
podendo existir vrios, j section podemos
ter apenas um.
e) Os elementos article e section so iguais.
69
HTML5 Fundamentos
4. Podemos utilizar o elemento header para qual

objetivo?
a) Colocar o cabealho do documento,

incluindo um menu de navegao.
b) Colocar o cabealho de um bloco, por
exemplo, de uma seo.
c) Colocar o ttulo do site e o elemento
nav.
d) As alternativas a, b, c esto corretas.
e) Nenhuma das alternativas anteriores
est correta.
5. Quando desejamos criar um contedo opcional

que ficar na lateral do documento, qual elemento
mais apropriado semanticamente?
a) div
b) aside
c) section
d) sidebar
e) article
70
Formatando um
documento HTML5
Mos obra!
HTML5 Fundamentos
Laboratrio 1
A Criando um cdigo HTML5 formatado e estruturado
1. Dado o wireframe a seguir, crie um cdigo HTML5 que represente a estrutura
deste cdigo:
72
Imagem, udio
e vdeo
99 Imagem;
99 udio;
99 Vdeo.
HTML5 Fundamentos
5.1.Introduo
Apresentaremos, neste captulo, os elementos imagem, audio e video, bem
como a insero de mdia em documento HTML5 e as opes para alguns tipos
de arquivos.
Os elementos multimdia tm o objetivo de enriquecer a formatao do contedo.
So utilizados em logotipos, banners de publicidade, cones, botes, vdeos
corporativos, clips, msicas, filmes etc.
5.2.Imagem
As imagens so importantes no apenas para a esttica de um documento
HTML5, como tambm para a transmisso de mensagens mais objetivas ao
pblico. Um dos aspectos mais importantes sobre imagens na Web se refere ao
peso de uma imagem.
Desde o princpio, em desenvolvimento Web, deve-se pensar no desempenho
do site ou aplicativo Web: imagens com boa resoluo no raro aumentam o
peso do arquivo. Enquanto um arquivo de 1 ou 2 MB parea pequeno num
sistema operacional, quando se trata da Internet um peso muito grande, que
levar tempo para ser carregado.
Utilizando softwares editores de imagem, possvel reduzir o tamanho e o peso
de arquivos sem comprometer a qualidade do mesmo para o uso na internet.
Arquivos mais leves permitem que um documento seja aberto em menos tempo.
Devemos levar em conta que muitos usurios utilizam a Internet por meio de
dispositivos mveis, embora neste caso seja possvel criar um mecanismo que
detecte a origem do acesso do usurio, carregando imagens mais leves para
celulares e tablets. O ideal que todo o site possua contedo leve sempre que
possvel.
74
Imagem, udio e vdeo
Os arquivos de imagens utilizados em documentos HTML5 podem possuir as

extenses JPG, PNG e GIF. So utilizados basicamente nas seguintes situaes:
JPG: Padro para utilizao de imagens, mantm excelente qualidade. Seu
peso depende da qualidade e dimenso da imagem;
GIF: Utilizado para pequenas imagens, pequenas animaes;
PNG: Utilizado quando precisamos fazer uso de transparncia em imagem.
Embora o formato GIF, tambm permita transparncia, a qualidade do PNG
muito superior;
WebP: Um novo formato de imagem criado e anunciado pelo Google em
2013. Mantm a mesma qualidade de uma arquivo JPG, porm, com 31%
de reduo no peso e, alm disso, possui recurso de transparncia e pode
ser animado;
BMP: No recomendamos o uso de imagens BMP por serem muito pesadas;
SVG: Um novo formato de imagem vetorial, permite redimensionar a imagem
sem perder a resoluo.
Embora o formato SVG seja o menor, por ser um cdigo estruturado em XML, o
formato JPG o mais utilizado na Web, seguido pelo PNG.
5.2.1.O elemento IMG

Para que uma imagem seja inserida em um documento HTML5, devemos utilizar
o elemento ou tag <img />, alm de alguns atributos que formam a chamada
da imagem.
Alm da tag <img />, ser preciso incluir uma breve descrio da imagem que
ser colocada no documento. Essa descrio deve ser feita por meio de um
atributo chamado alt (uma abreviao para alternate - texto alternativo) que,
mesmo que vazio, sempre deve ser colocado.
75
HTML5 Fundamentos
Junto a essa tag, tambm devemos inserir um URL que definir qual ser o
arquivo de imagem utilizado.
URL um acrnimo para Uniform Resource Locator, ou

seja, um endereo referente a um arquivo ou um documento
disponvel na rede.
Para representar o valor URL de uma imagem, devemos utilizar o atributo src.
No exemplo a seguir, podemos verificar a aplicao de ambos os atributos, alt
e src, junto tag <img />:
O exemplo anterior carrega trs imagens com extenso .png, colocando uma
abaixo da outra, com o elemento <br/> responsvel por quebrar a linha.
76
Imagem, udio e vdeo
Percebemos tambm que o elemento <img/> possui o atributo src com a

localizao do arquivo, o atributo alt com a descrio da imagem e um atributo
class, para formatao com as folhas de estilo em cascata.
O resultado a imagem a seguir:
77
HTML5 Fundamentos
Com a formatao CSS3, as imagens anteriores e uma imagem de fundo mudam
completamente o resultado. Veja o resultado com a aplicao de folhas de
estilos:
78
Imagem, udio e vdeo
5.3.audio
O elemento audio usado para insero de som ou stream de udio em um
documento HTML5, sem necessidade de plug-ins, Flash, QuickTime etc. Veja
o exemplo a seguir:
Esse cdigo produzir o seguinte resultado:
Ao usar o atributo src do elemento, indica-se o caminho para o arquivo de som,

que reproduzido pelo navegador. O atributo controls indica que os controles
Play, Pause, Volume, Mute e Temporizador devem estar visveis.
79
HTML5 Fundamentos
O contedo do elemento audio renderizado por navegadores que suportam
esse elemento. Assim como fazemos em (X)HTML, aqui tambm definimos a
incorporao do som, por exemplo, com o uso de Flash. Veja:
80
Imagem, udio e vdeo
O uso da tag audio, no Google Chrome, ser desta forma:
J o uso do Flash no Internet Explorer 8 ser da seguinte maneira:
Segundo o exemplo, quando o navegador suporta HTML5, ele simplesmente

ignora o cdigo de insero de som com Flash, caso contrrio, ou seja, quando
o navegador no suporta HTML5, ele executa o cdigo Flash.
Se voc pretende criar uma implementao crossbrowser, deve inserir marcaes
para os formatos MP3 e Ogg Vorbis, uma vez que no existe um consenso sobre
a adoo de codecs para implementao nativa.
No elemento audio, voc pode usar o elemento source como elemento-filho.
Ele permite a definio de arquivos diferentes para incorporao de mdias de
udio e vdeo na pgina.
O elemento source substitui o atributo src e permite formatos

alternativos de som.
81
HTML5 Fundamentos
Veja na tabela a seguir os atributos que o elemento source admite e as
respectivas caractersticas:
Atributo
Caracterstica
src
Indica o endereo do arquivo de mdia a ser

incorporado na pgina. obrigatrio e seu valor
URL no vazio.
type
Indica ao navegador o tipo de mdia a ser incorporado.

Seu valor deve ser um MIME type vlido. Tambm
admite o parmetro codecs definido por MIME types,
o qual deve ser informado para que o navegador
identifique como o arquivo foi codificado.
media
Indica o tipo de mdia. Seus valores possveis esto

listados nas especificaes para Media Queries e
seu valor-padro all.
5.4.video
O elemento video usado para insero de vdeo ou filme em um documento
HTML5.
Voc deve utilizar alguns atributos desse elemento antes de public-lo, porm
no h necessidade de plug-ins, Flash, Windows Media Player etc. Veja o exemplo
a seguir:
82
Imagem, udio e vdeo
Ao usar o atributo src do elemento, indica-se o caminho para o arquivo de

vdeo, que reproduzido pelo navegador.
O contedo do elemento video renderizado por navegadores que no suportam
esse elemento. Assim como fazemos em (X)HTML, aqui tambm definimos a
incorporao do vdeo, por exemplo, com o uso de Flash. Veja:
83
HTML5 Fundamentos
Agora d uma olhada no resultado:
Trailer oficial do filme Pirates of the Caribbean 4 On Stranger Tides, Walt Disney Pictures, 2011.
Segundo o exemplo, quando o navegador suporta HTML5, ele simplesmente

ignora o cdigo de insero de vdeo com Flash, caso contrrio, ou seja, quando
o navegador no suporta HTML5, ele executa o cdigo Flash.
Com relao implementao das funcionalidades de vdeo, no existe um
consenso sobre a adoo de um formato de vdeo para implementao nativa.
A seguir, apresentaremos alguns conceitos bsicos sobre vdeos na Web:
As extenses de vdeo, como .avi, .mov, .mp4, indicam que se trata de
um arquivo de vdeo, bem como do informaes sobre a compresso do
arquivo. Por exemplo, um arquivo .mp4 um continer de compresso de
vdeo, em que a compresso usada mp4;
Um vdeo contm vrias informaes necessrias para sua apresentao,
as quais podem ser trilhas de udio, stream de vdeo, parmetros de
sincronizao etc. Essas informaes so comprimidas de vrias maneiras,
dependendo do arquivo de compresso;
84
Imagem, udio e vdeo
Alm disso, por no haver padronizao, os arquivos de vdeo tambm

so codificados de diferentes formas. Essa falta de padronizao tanto de
continers como de codecs decorrente de diferentes implementaes dos
fabricantes de software em seus produtos;
Se voc pretende criar uma implementao crossbrowser, deve inserir
marcaes para os vrios formatos, uma vez que no existe um consenso
sobre a adoo de codecs para implementao nativa.
No elemento video, voc pode usar o elemento source como elemento-filho.
Ele permite a definio de arquivos diferentes para incorporao de mdias de
udio e vdeo na pgina.
O elemento source substitui o atributo src e permite formatos

alternativos de vdeo.
Veja na tabela a seguir os atributos que o elemento source admite e respectivas

caractersticas:
Atributo
Caracterstica
src
Indica o endereo do arquivo de mdia a ser

incorporado na pgina. obrigatrio e seu valor
URL no vazio.
type
Indica ao navegador o tipo de mdia a ser incorporado.

Seu valor deve ser um MIME type vlido. Tambm
admite o parmetro codecs definido por MIME types,
o qual deve ser informado para que o navegador
identifique como o arquivo foi codificado.
media
Indica o tipo de mdia. Seus valores possveis esto

listados nas especificaes para Media Queries,
mas seu valor-padro all.
O elemento source admite tambm atributos globais, incluindo

width e height.
85
HTML5 Fundamentos
Pontos principais
O elemento audio usado para insero de som ou stream de udio em um
documento HTML5, sem necessidade de plug-ins, Flash, QuickTime etc.;
O elemento video usado para insero de vdeo ou filme em um documento
HTML5. Voc deve utilizar alguns atributos desse elemento antes de publiclo, porm, no h necessidade de plug-ins, Flash, Windows Media Player
etc.;
Tanto para udio como para vdeo, os atributos, mtodos e eventos de
API na HTML5 so praticamente os mesmos. A diferena que o elemento
video possui os atributos poster, width e height e o elemento audio, no.
86
Imagem, udio e
vdeo
HTML5 Fundamentos
1. Qual atributo devemos utilizar para

determinar o caminho de uma imagem na
HTML5?
a) <media/>
b) <images>
c) src
d) alt
e) class
2. Qual elemento utilizamos para carregar

imagens e inseri-las em um documento
HTML5?
a) alt
b) img
c) src
d) URL
e) <br/>
88
Imagem, udio e vdeo
3. Qual o procedimento para carregar um

udio em um documento HTML5 incluindo seu
player?
a) Utilizar o elemento <audio> com o

atributo controls.
b) Utilizar o elemento media com o atributo
player.
c) Utilizar o elemento audio com o atributo
player=true.
d) Utilizar um elemento de vdeo sem
imagem.
e) Incluir um player do Flash.
4. Qual outro atributo, alm de src, podemos

colocar no elemento vdeo para determinar o
caminho do vdeo?
a) alt
b) href
c) source
d) link
e) source
89
5
Imagem, udio e
vdeo
Mos obra!
HTML5 Fundamentos
Laboratrio 1
A Criando um cdigo HTML5 com um elemento imagem
1. Considerando a imagem a seguir e o arquivo ferrari.jpg, construa um arquivo
chamado cap5_lab1.html, carregando a imagem images/ferrari.jpg dentro de
uma estrutura HTML5, com o texto alternativo Ferrari Califrnia.
92
Trabalhando com
vnculos Links
e Microdata
99 Definio de ncoras;
99 Tipos de vnculos (links);
99 Definio da janela de destino;
99 Tabindex;
99 Arquivos de download;
99 Microdata.
HTML5 Fundamentos
6.1.Introduo
O hipertexto considerado um dos mais significativos recursos da Internet,
pois a partir de suas propriedades, possvel navegar de um documento para
outro, em questo de segundos.
Por meio do hipertexto, possvel acessar diferentes tipos de arquivos, como
imagens, udio e texto, de forma rpida e fcil. Para isso, necessrio realizar
a formatao correta do cdigo referente ao destino do vnculo (link) que ser
criado.
Neste captulo, aprenderemos como trabalhar com essa formatao para
viabilizar a navegao entre arquivos a partir de uma pgina da Internet.
Tambm entenderemos como o advento do microdata pode criar vnculos de
informaes dentro de um contexto com referncias semnticas externas,
ajudando a dar sentido a um texto que antes, para os motores de busca, eram
apenas caracteres sem qualquer significado.
6.2.Definindo ncoras
O vnculo que permite o acesso a um determinado arquivo definido atravs
de uma ncora, representada pela tag <a>. Por meio de uma ncora, possvel
utilizar o atributo href para definir um link associado a um arquivo. A ncora
permite, ainda, que um bookmark seja criado dentro de um documento, por
meio da indicao do atributo id ou name.
Assim que clicamos em um link associado a uma pgina, ela poder ser aberta
tanto na janela atual como em outro destino, caso este seja especificado
corretamente.
6.3.Tipos de vnculos (links)

As tags <a> e </a> podem ser utilizadas para estabelecer diferentes tipos de
vnculos, cada qual com a sua finalidade, como podemos verificar a seguir.
94
Trabalhando com vnculos Links e Microdata
6.3.1.Link absoluto
Um link absoluto permite que seja definido um vnculo com um endereo
completo. O destino deve ser especificado por meio do protocolo http, seguido
por dois pontos e duas barras (://).
No exemplo a seguir, o nome Impacta Certificao e Treinamento possui a
propriedade de vnculo com um endereo absoluto, j que ela aparece entre as
tags <a> e </a>. Basta o usurio clicar nessa palavra para que ele seja levado
ao site da Impacta Certificao e Treinamento:
6.3.2.Link relativo
Um vnculo tambm pode ser criado para documentos encontrados dentro do
prprio site (ou seja, documentos locais). Para isso, devemos especificar o URL
do arquivo desejado a partir da pasta raiz por meio da tag href.
Por exemplo, o usurio poder clicar no termo Cadastro para acessar a pgina
desejada, j que esse termo possui propriedades de vnculo definidas pelas
tags <a> e </a>:
95
HTML5 Fundamentos
6.3.3.Link com imagem

Assim como os textos, as imagens tambm podem ser definidas como vnculos
para um determinado arquivo. Entretanto, em vez de utilizarmos textos,
devemos utilizar as tags destinadas incluso de imagem para que seja criado
o link desejado. Uma imagem pode ser includa em um documento HTML5 por
meio da tag <img /> e com alguns atributos, como src (referente ao caminho
da imagem) e alt (relacionado descrio desse arquivo).
No exemplo a seguir, o arquivo logotipo.jpg ser utilizado como link de acesso
ao site da Impacta Certificao e Treinamento. O uso das tags <a> e </a>
determina propriedades de vnculo para essa imagem:
Nos links em forma de texto, possvel distinguir quais vnculos j foram visitados
por meio de cores destacadas. Nas imagens, essa diferenciao pela cor tambm
acontece, s que atravs de suas bordas. Essa caracterstica pode representar
um problema quando trabalhamos com imagens, pois uma simples adio de
cor pode comprometer sua exibio na tela. Para eliminar essa associao de
cores, devemos especificar o atributo border=0 na tag <img />, ou aplic-lo
via folhas de estilo (CSS).
Muitas pginas Web utilizam uma imagem de tamanho reduzido como link
para o acesso mesma imagem, s que em dimenses maiores. No entanto,
esse redimensionamento no modifica realmente o tamanho do arquivo. Isso
significa que um arquivo com 50 pixels de largura e 100 Kb continuar com
100 Kb, mesmo quando aumentamos a largura para 200 pixels.
No prximo exemplo, o texto [+] ampliar foi utilizado como vnculo para que
o arquivo fotomaior.jpg seja exibido no browser:
96
6.3.4.Link para e-mail

Um texto tambm pode ser utilizado como vnculo para o envio de mensagens
para um endereo de e-mail. Para que isso seja possvel, devemos incluir o
atributo mailto: antes de digitar o endereo destino da mensagem.
Como podemos observar no exemplo a seguir, a expresso Fale-Conosco
aparece entre as tags <a> e </a> para que seja possvel utiliz-la como
vnculo. Dessa forma, assim que o usurio clicar nesse texto, ser aberto
automaticamente o programa de correio eletrnico padro com o destinatrio,
como seu@email.com.br:
Enviando para mais de um destinatrio

Para que uma mensagem seja enviada para vrios destinatrios, devemos incluir
os endereos desejados, como mostra o exemplo a seguir:
Definindo o assunto da mensagem

Alm de especificar o destinatrio da mensagem, tambm podemos indicar o
assunto por meio do atributo subject, que deve ser inserido aps o endereo
de e-mail, seguido por um ponto de interrogao:
No exemplo anterior, o assunto enviado para seu@email.com.br HTML5

Fundamentos.
97
HTML5 Fundamentos
Enviando mensagens com cpia
Para que a mensagem eletrnica seja enviada como cpia para outro destinatrio,
devemos incluir o atributo cc da seguinte maneira:
E com o atributo bcc enviamos com cpia oculta:
Escrevendo no corpo do e-mail

O vnculo para um endereo de e-mail tambm permite a incluso de texto no
corpo da mensagem que ser enviada. No exemplo a seguir, o texto Gostaria de
mais informaes ser colocado no corpo da mensagem por meio do atributo:
Quando for necessrio agregar mais de um atributo, deve ser utilizado o

caractere & para concatern-los.
98
6.3.5.Nomeando ncoras
Para que seja possvel acessar rapidamente um determinado ponto em um
documento HTML5, devemos criar um vnculo com a ajuda das tags <a> e </
a> e do atributo id:
No exemplo anterior, o id da section serve como referncia para os links Texto

1, Texto 2 e Texto 3.
O vnculo foi criado a partir da definio do caminho do arquivo, alm da
utilizao do smbolo # seguido pelo nome da ncora.
99
HTML5 Fundamentos
6.4.Determinando a janela de destino

De acordo com o padro, o contedo do arquivo associado ao link substituir
a janela em execuo. Por meio do atributo target, possvel determinar outro
destino para o vnculo que ser pressionado. Esse atributo deve ser descrito da
seguinte maneira, entre as tags <a> e </a>:
Neste caso, o atributo target pode possuir os seguintes valores: _blank, _self,
_parent, _top.
6.5.Tabindex
Por meio desse atributo, podemos atribuir uma ordem de navegao ao longo
de todos os elementos existentes em um documento HTML5, como links e
elementos de formulrio. Sem o uso de tabindex, o usurio seria obrigado a
percorrer todos esses elementos de acordo com a ordem em que eles aparecem
no cdigo.
possvel determinar o ndice de tabulao em uma barra de navegao, em
elementos pertencentes a um formulrio ou outros itens que fazem parte do
cdigo XHTML. Para que o ndice de tabulao seja definido em um campo de
formulrio e um link, por exemplo, devemos utilizar a sintaxe a seguir:
100
6.6.Disponibilizando arquivos para

download
O usurio pode, ainda, realizar o download de um arquivo por meio de um
vnculo. Para que o browser no seja capaz de reconhecer e exibir o arquivo em
tela, este deve ser compactado. Dessa forma, quando o usurio clicar sobre o
vnculo, a caixa de download ser exibida automaticamente.
No exemplo a seguir, preciso apenas clicar no texto DOWNLOAD para que o
download do arquivo.zip seja iniciado:
101
HTML5 Fundamentos
6.7.Microdata
Com relao criao de vnculos, um recurso muito importante que foi
adicionado especificao do HTML5 so os microdados (microdata). Este
novo recurso permite dar sentido a um contedo de texto, enriquecendo a
semntica do documento, por criar referncias ou vnculos com o texto e seu
real significado.
Veja um exemplo de um documento sem o uso de microdata:
Percebemos que as informaes do cliente, no possuem nenhum significado

para os motores de busca e outros mecanismos Web, so apenas informaes
que apenas humanos conseguem compreender.
102
Agora, com o uso de microdata, podemos orientar motores de busca, mecanismos

de renderizao dos navegadores, explicando o sentido do texto, por meio de
dos seguintes atributos:
itemscope;
itemtype;
itemprop.
6.7.1.Itemscope
Este atributo responsvel por determinar o incio de um escopo. Quando um
texto diz respeito a uma pessoa, todas as informaes desta pessoa ficam
dentro de um elemento section ou div, que possui o atributo itemscope, dando
o sentido de que pertencem ao mesmo escopo.
103
HTML5 Fundamentos
6.7.2.Itemtype
Para determinar o tipo de informao, a coleo microdata possui o atributo
itemtype, que deve definir o tipo do contedo subsequente. O atributo itemtype
aponta para o site schema.org direcionando a especificao do assunto em
questo:
Schema.org criou uma coleo de termos utilizados por

desenvolvedores Web que podem ser utilizados para dar sentido
ao seu documento, tornando-o, assim, amigvel aos principais
mecanismos de buscas, como Google, Microsoft, Yandex e
Yahoo!
No exemplo anterior, o elemento div, aps o elemento main, possui dois

atributos da coleo microdata: itemscope e itemtype. O atributo itemtype
aponta para o endereo da especificao schema.org/Person, identificando
que aquele bloco de informaes diz respeito a uma pessoa.
104
6.7.3.Itemprop
Este o atributo responsvel por determinar dentro daquele escopo que tipo
de informao o item em questo. No exemplo anterior, Glaucio Daniel
um itemprop=name no escopo de itemtype=http://schema.org/Person,
significando que Glaucio Daniel o nome de uma pessoa. Embora esta seja
uma informao bvia do ponto de vista humano, para a mquina, apenas com
o uso dos microdados que as informaes passam a ter sentido.
Alm do benefcio semntico para motores de busca, permite que os mesmos
integrem tais informaes com redes sociais, mapas e lugares (places).
Com os microdados, possvel criar Rich Snippets, que so aquelas descries
que aparecem em sites de busca.
Para maiores detalhes sobre as possibilidades de microdados, consulte:
Tipo de Informao
Empresas
Itemtype e detalhes
http://schema.org/Organization
Pessoas
http://schema.org/Person
Produtos
http://schema.org/Product
Eventos
http://schema.org/Event
Resenha (Avaliao)
http://schema.org/Review
105
HTML5 Fundamentos
Pontos principais
Por meio do hipertexto, possvel acessar diferentes tipos de arquivos,
como imagens, udio e texto, de forma rpida e fcil. Para isso, necessrio
realizar a formatao correta do cdigo referente ao destino do vnculo
(link) que ser criado;
O vnculo que permite o acesso a um determinado arquivo definido com
a utilizao de uma ncora, representada pela tag <a>;
De acordo com o padro, o contedo do arquivo associado ao link substituir
a janela em execuo. Por meio do atributo target, possvel determinar
outro destino para o vnculo que ser pressionado;
Sem o uso de tabindex, o usurio seria obrigado a percorrer todos os
elementos de acordo com a ordem em que eles aparecem no documento
HTML5, pois esse atributo permite definir uma ordem de navegao;
Com o uso de microdados, podemos enriquecer a parte semntica do
documento HTML5, informando o tipo de informao que um texto
representa.
106
Trabalhando com
vnculos Links e
Microdata
HTML5 Fundamentos
1. Qual elemento define o vnculo que permite

acesso a um determinado arquivo?
a) link
b) reference
c) itemprop
d) a
e) microdata
2. Qual o cdigo para criarmos uma referncia

para um elemento header com o id=topo
num arquivo chamado artigos.html?
a) <a link=artigos.html?topo>topo</a>
b) <a href=artigos.html#topo>topo</
a>
c) <a link=artigos.html#header>topo</
a>
d) <a link=topo.html?artigos>topo</a>
e) <a href=artigos.html?topo>topo</a>
108
3. Qual a coleo responsvel por dar sentido

semntico a um texto, criando vnculos com
objetos externos localizados em schema.org?
a) itemprop
b) itemtype
c) Microdata
d) itemscope
e) itemgroup
4. Qual o atributo responsvel por determinar

o tipo de uma informao que um escopo ir
informar?
a) itemtype
b) itemprop
c) itemscope
d) itemgroup
e) itemnav
109
Trabalhando com
vnculos Links e
Microdata
Mos obra!
HTML5 Fundamentos
Laboratrio 1
A Utilizando a coleo microdata
1. Utilizando a coleo microdata, transforme o texto a seguir em uma informao
semanticamente legvel, utilizando o itemtype http://www.schema.org/
Organization:
Empresa: Impacta Certificao e Treinamento
Endereo: Av. Paulista, 1009
Tel: (11) 3254-2200
Site: www.impacta.com.br
112
Trabalhando
com listas e
tabelas
99 Listas;
99 Tabelas.
HTML5 Fundamentos
7.1.Listas
Quando trabalhamos com documentos HTML5, podemos utilizar listas com a
finalidade de dividir os elementos de um documento em itens ou categorias. Assim,
podemos ter vrios tipos de listas ordenando itens da forma desejada. A seguir,
veremos alguns tipos de listas com as quais podemos trabalhar.
7.1.1.Lista ordenada
Este tipo de lista permite organizar seus itens, definindo uma ordem para os mesmos
de forma explcita. A tag <ol> utilizada para criar uma lista ordenada. Observe a
seguir:
ol significa Ordened List.
Os atributos que podem ser utilizados em conjunto tag <ol> so start e type,
cujas descries so as seguintes:
start: Trata-se de um atributo que permite determinar o valor inicial da
numerao de itens da lista. Dessa forma, seu valor deve ser o primeiro nmero
a partir do qual ser iniciada a ordenao;
type: Trata-se de um atributo que permite determinar o tipo de lista a ser
utilizado. Os valores que podem ser utilizados com este atributo so os seguintes:
A: Determina a utilizao das letras do alfabeto em caixa alta;
a: Determina a utilizao das letras do alfabeto em caixa baixa;
I: Determina a utilizao dos algarismos romanos em caixa alta;
114
Trabalhando com listas e tabelas
i: Determina a utilizao dos algarismos romanos em caixa baixa,

1: Determina a utilizao de nmeros para ordenar os itens da lista.
Quando no especificamos um valor para o atributo type, ele

assumir o valor 1.
O resultado ser o seguinte:

a. primeiro
b. segundo
c. terceiro
Este exemplo determina a ordenao da lista por meio de letras em caixa
alta, sendo que esta ordenao inicia-se a partir da terceira letra do alfabeto,
conforme podemos observar na figura a seguir:
O seguinte resultado apresentado no navegador:
115
HTML5 Fundamentos
7.1.2.Lista no ordenada
Alm das listas ordenadas, contamos com as listas no ordenadas. Com elas,
no podemos definir uma ordem de forma explcita.
A tag utilizada para criar uma lista no ordenada a <ul>, conforme podemos
observar a seguir:
Ir produzir o seguinte resultado:
J o exemplo a seguir demonstra como definir o marcador da lista como sendo

um crculo vazado:
Ao executarmos este exemplo, o resultado obtido o seguinte:
116
7.1.3.Lista de definio
Este tipo de lista permite no apenas a exibio de itens, mas tambm de
subitens, sendo bastante utilizada quando trabalhamos com ttulos e subttulos.
Observe o exemplo a seguir, em que trabalhamos com a exibio de um ndice
contendo itens e subitens:
Em que:
DL: Definition List;
DT: Definition Term;
DD: Definition Description.
Com a execuo deste exemplo, o seguinte resultado apresentado a partir do
navegador:
117
HTML5 Fundamentos
7.2.Tabelas
Para criarmos uma tabela em um documento HTML5, utilizamos o elemento
<table>. Trabalhar com tabelas uma tarefa que permite exibir informaes
de forma tabulada e criar uma listagem seguida de alguns dados a seu respeito.
A estrutura bsica de uma tabela a seguinte:
118
Em que:
<table>: Refere-se tag que permite criar uma tabela;
<thead>: Refere-se ao cabealho da tabela;
<th>: Refere-se ao cabealho de uma coluna;
<tbody>: Refere-se ao corpo da tabela;
<tr>: Refere-se tag que permite criar uma linha para a tabela, na qual
podemos inserir as colunas desejadas. tr significa Table Row;
<td>: Refere-se tag que permite criar uma coluna na linha da tabela.
Portanto, ela representa uma clula da tabela, na qual so inseridas as
informaes desejadas. td significa Table Data.
7.2.1.Formatao de uma tabela

Com o advento da CSS e sua verso CSS3, toda a parte de estilizao de uma
tabela, que antes era feita direto no elemento, passa a ser realizada via folhas
de estilos (CSS).
119
HTML5 Fundamentos
7.2.2.Mesclando clulas
Podemos combinar as clulas de uma tabela entre si a fim de formar uma clula
nica. Este processo denominado mescla de clulas. Mais detalhes a esse
respeito sero abordados a seguir.
7.2.2.1. Mesclando colunas

O processo que permite mesclar colunas requer a definio da quantidade de
colunas que uma determinada clula pode ocupar, sem que o layout da tabela
sofra quaisquer alteraes.
Desta forma, caso determinemos que uma clula deve ocupar o espao de trs
colunas, as prximas duas colunas devem deixar de ser utilizadas, pois a clula
mesclada ocupar o lugar das trs colunas.
120
Em que x indica o nmero de colunas que desejamos mesclar. Observe a mescla

no exemplo a seguir:
O resultado ser semelhante ao produzido abaixo:
121
HTML5 Fundamentos
7.2.2.2. Mesclando linhas
Assim como a mescla de colunas, a mescla de linhas um processo que requer a
determinao de quantas linhas devem ser ocupadas pela nova clula mesclada,
sem que o layout da tabela sofra quaisquer alteraes.
Observe o exemplo a seguir:
Ele produzir o seguinte resultado:
122
Pontos principais
Quando trabalhamos com documentos HTML5, podemos utilizar listas com a
finalidade de dividir os elementos de um documento em itens ou categorias.
Assim, podemos ter vrios tipos de listas ordenando itens da forma desejada;
Os tipos de listas utilizadas so: listas ordenadas, no ordenadas e listas
de definio;
Para criarmos uma tabela em um documento HTML5, utilizamos as tags
<table>, <thead>, <th>, <tbody>, <tr>, <td>, entre outras que
permitem realizar algumas formataes sobre a tabela.
123
Trabalhando com
listas e tabelas
HTML5 Fundamentos
1. Qual elemento utilizamos para criar uma

lista ordenada por letras em caixa baixa?
a) <ol type=A>
b) <ol type=1>
c) <ol type=A start=5>
d) <ol>
e) <ol type=a>
2. Qual elemento e atributo utilizamos para

criar uma lista no ordenada com um marcador
representado por um crculo vazado?
a) <ul type=circle>
b) <li type=>
c) <ul type=circulo>
d) <dl id=circle>
e) <ul>
126
3. Qual elemento utilizamos com o elemento

<table> para delimitar linhas de uma tabela?
a) <thread>
b) <tbody>
c) <th>
d) <tr>
e) <td>
4. Qual atributo utilizamos para mesclar

colunas de uma tabela?
a) border = solid
b) border = duo
c) colspan
d) rowspan
e) rowspan e colspan
127
7
Trabalhando com
listas e tabelas
Mos obra!
HTML5 Fundamentos
Laboratrio 1
A Criando uma tabela em um documento HTML5
1. Utilizando os conhecimentos adquiridos sobre tabelas, crie um documento
HTML5 com uma tabela, conforme a imagem abaixo:
Relatrio Financeiro
130
Cliente
Ano Apurao
Total Vendido
Total Pago
HTML5
Dev
2013
R$ 500.000,00 R$ 459.000,00
VIP
sim
Introduo
ao CSS3
99 Conceito de camadas;
99 Folhas de estilo (CSS);
99 Estilos CSS;
99 Cascateamento;
99 Insero de comentrios;
99 Atributos para formatao;
99 Seletores;
99 Tipos de mdia.
HTML5 Fundamentos
8.1.Introduo
Sites da Web, sejam eles redes sociais, comrcio eletrnico, portais de notcias
ou outros, produzem milhes de novas informaes todos os dias. Alm de
gerar contedo novo, tais sistemas so obrigados a atualizar periodicamente
as pginas j existentes. Tamanha responsabilidade implica no envolvimento
de vrios profissionais, incluindo diagramadores, redatores, programadores e
editores.
Uma mudana grfica no layout do site, por exemplo, exigiria muito trabalho
e tempo. A alterao manual dos arquivos de um site no apenas uma tarefa
trabalhosa, mas tambm suscetvel a erros, principalmente quando lidamos
com sites ou Web apps, cujos usurios produzem informao.
Para amenizar a complexidade dessas modificaes, organizar o layout e deixlo limpo e atual, muitos profissionais utilizam as folhas de estilo. Estas podem
ser bastante teis quando precisamos alterar elementos do mesmo tipo, mas
que pertencem a documentos diferentes.
Neste captulo, abordaremos como trabalhar com folhas de estilo em cascata
(CSS Cascading Style Sheets) e com seus recursos principais.
8.2.Conceito de camadas
Segundo a definio desse conceito, os elementos de programao com a mesma
finalidade devem ser agrupados no mesmo local. Alm de facilitar a incluso de
modificaes, o conceito de camadas determina uma estrutura mais organizada
para o sistema. Dessa forma, possvel acrescentar ou atualizar informaes
sem comprometer o contedo atual.
A partir do conceito de camadas, possvel trabalhar com as folhas de estilo
em cascata. As folhas de estilo CSS definem como o sistema ser formatado de
modo a facilitar a visualizao do cdigo e a organizao do sistema como um
todo.
132
Introduo ao CSS3
8.3.Folhas de estilo (CSS)

A folha de estilos em cascata CSS um documento responsvel pela definio
de critrios de formatao de pginas. Com isso, possvel estabelecer um
padro de formatao que ser associado s pginas desejadas. A extenso
utilizada para os arquivos de folhas de estilo a .css.
Por meio de um arquivo de folha de estilo, podemos definir a formatao dos
elementos referente cor, fonte, tamanho, posicionamento e outros estilos
de um documento HTML. No entanto, para que tais padres sejam aplicados,
ser necessrio criar um vnculo entre a folha de estilo e as pginas que sero
formatadas.
8.3.1.Declarando estilos
Para que uma tag seja formatada por meio de uma folha de estilo, ser preciso
declarar a sintaxe a seguir:
Em que:
elemento: Trata-se da descrio do elemento que ser formatado. Neste
caso, este elemento ser uma tag HTML sem os sinais de menor e maior;
atributo: Define qual ser o atributo utilizado para a aplicao do estilo,
desde que o nome seja de um atributo CSS vlido, como o tamanho da
fonte (font-size);
valor: Refere-se ao valor especfico do atributo definido, como 15 pt (ou
seja, 15 pontos) para o atributo de tamanho de fonte (font-size).
133
HTML5 Fundamentos
8.4.Estilos CSS
Os estilos de uma CSS podem ser aplicados em uma linha ou cabealho da
prpria pgina HTML ou por meio de um arquivo externo, o que mais indicado.
8.4.1.Declarando estilos internamente

As folhas de estilo podem ser definidas dentro do prprio documento que ser
formatado. Isso significa que os estilos associados a uma tag sero sempre
aplicados de acordo com os mesmos parmetros ao longo do arquivo.
importante lembrar que essas definies internas so prioritrias em comparao
s externas, ou seja, elas sero utilizadas primeiramente, caso tambm existam
vnculos para uma CSS externa.
8.4.2.Declarando estilos no cabealho

As definies das tags podem ser descritas no cabealho do documento que
sofrer as alteraes. Todas as tags seguintes com o mesmo nome sero
exibidas da mesma maneira, cada qual com os seus respectivos parmetros. A
descrio dos parmetros tambm feita sempre da mesma forma para todos
os modos de vnculo, como podemos observar no exemplo a seguir:
De acordo com o exemplo anterior, a tag <p> ter fonte Verdana com tamanho
de 20 pt, cor vermelha e alinhamento central.
134
Introduo ao CSS3
8.4.3.Declarando estilos diretamente na tag

Uma folha de estilo classificada como inline quando as regras so declaradas
dentro das prprias tags de um elemento HTML. Esse mtodo deve ser utilizado
apenas para aplicar um estilo a um s elemento, pois o usurio poder confundir
facilmente o contedo da tag com as regras de formatao, j que ambos esto
no mesmo local.
importante mencionar que essa no uma boa prtica de desenvolvimento
Web, uma vez que se o estilo for aplicado diretamente no elemento, o cdigo
fica engessado, logo este recurso deve ser utilizado com cautela e em casos de
excees.
A sintaxe utilizada para a aplicao da folha de estilo inline pode ser vista a
seguir:
No seguinte exemplo, ser formatado um determinado pargrafo de modo que

sua cor fique vermelha e a margem tenha 3 px (pontos):
135
HTML5 Fundamentos
8.4.4.Declarando estilos externamente

A definio de uma folha de estilo por meio de um arquivo externo a maneira
mais recomendada para trabalhar com esse tipo de recurso. Para que seja possvel
o uso de arquivos externos, devemos criar vnculos com os documentos que
sero formatados. Com isso, todos os documentos vinculados folha de estilo
sero modificados de acordo com os valores configurados nas tags.
Um arquivo de folha de estilo com a extenso .css pode ser criado em qualquer
programa editor de textos. Sua estrutura pode ser vista a seguir:
O prximo exemplo facilita a compreenso dessa estrutura:
De acordo com o exemplo apresentado, o pargrafo ter a fonte com tamanho

de 20 pt, cor branca e alinhamento centralizado. O fundo da pgina, por sua
vez, ser vermelho.
136
Introduo ao CSS3
Para vincular a folha de estilo ao documento HTML, devemos utilizar a tag <link
/>. Os parmetros dessa tag incluem o caminho de localizao do arquivo .css
e a descrio do tipo de arquivo externo, como podemos observar no prximo
exemplo:
Como possvel verificar no exemplo anterior, a tag <link /> deve ser inserida no
cabealho (head) do documento HTML. Graas correta localizao e descrio
da folha de estilo, os padres CSS podero ser importados para aplicao nesse
documento.
8.5.Cascateamento
Um documento HTML5 pode ser vinculado a uma ou vrias folhas de estilo. Caso
mais de uma CSS esteja associada a esse documento, o browser ser obrigado
a decidir quais so os padres mais importantes, uma vez que a mesma regra
pode aparecer em vrias folhas de estilo.
A prioridade entre definies de estilo atende s seguintes regras, descritas em
ordem de importncia:
Os estilos aplicados caso no existam outros padres que possam ser
aplicados no seu lugar: so os estilos definidos por omisso;
Os estilos definidos por meio de uma folha de estilo interna (ou seja, dentro
do elemento <style>) ou por meio de um arquivo externo;
Os estilos definidos nos elementos de um documento HTML por meio do
atributo <style> em uma folha de estilo inline.
137
HTML5 Fundamentos
Como podemos notar, os estilos definidos atravs do atributo <style> no
prprio elemento so prioritrios em relao aos demais estilos. Caso o browser
reconhea diferentes verses para o mesmo estilo, ser utilizada somente a
mais recente.
A ordem de maior utilizao dos estilos pode ser categorizada de maneira
simples:
Externo: Arquivo .css;
Incorporado: Atravs da tag <style> declarada no cabealho da pgina;
Inline: Tag <style> declarada em uma determinada linha do cdigo da
pgina.
8.6.Inserindo comentrios
Para facilitar a compreenso de um determinado cdigo, possvel incluir
comentrios nas definies de estilo CSS. Tais comentrios explicam o cdigo
que ser escrito, de forma que outros usurios possam entender rapidamente
sua utilizao.
Um comentrio deve ser includo da seguinte forma: em primeiro lugar, devemos
escrever a sequncia de caracteres /*. Em seguida, preciso incluir a descrio
do comentrio. Depois de incluir a descrio do comentrio, devemos fech-lo
escrevendo a sequncia de caracteres */, como mostra o exemplo a seguir:
importante utilizar comentrios para documentao do cdigo, entretanto

em verses minificadas (utilizadas em ambiente de produo), os comentrios
e espaos so retirados.
138
Introduo ao CSS3
8.7.Atributos utilizados para

formatao
Os arquivos de folhas de estilo podem apresentar atributos associados a
diferentes estilos de formatao, como aprenderemos a partir de agora.
8.7.1.Declarao de cores
Uma folha de estilo permite que sejam utilizados diferentes mtodos para a
especificao de cores:
Nome da cor: Uma cor pode ser especificada por meio do seu nome, como

green;
#valor: Determina um valor padronizado da cor que ser utilizada;
Rgb(vermelho, verde, azul): Define os valores de vermelho,
verde e azul para a composio da cor final, como rgb(0,255,0);
rgb(vermelho%,verde%,azul%):
Define
os
valores
de
vermelho, verde e azul como porcentagens em relao ao
valor mximo de cada cor. Por exemplo, rgb(15%,40%,30%);
Nome
resumido:
Caso
seja
ser
declarado
em
vez
de
uma
cor
#CC6699
segura,
como
pode
#C69;
rgba(vermelho, verde, azul, alpha): Define os valores de vermelho, verde

e azul semelhante ao rgb, porm o ltimo parmetro alpha, determina a
transparncia da cor, em que 1.0 100% visvel, 0.50 50% transparente
e 0.20 80% transparente.
139
HTML5 Fundamentos
8.7.2.Formatando texto
Vrios atributos podem ser utilizados para a formatao do texto de um
elemento. Veja quais so esses atributos:
Atributos
Valor
color
Valor em formato
hexadecimal o nome da
cor.
Cor do texto.
Nome da fonte.
Tipo da fonte.
font-size
Valor referente ao
tamanho da fonte ou
porcentagem.
Tamanho da fonte.
font-style
normal, oblique ou
italic.
Estilo do texto.
font-variant
normal ou small-caps.
Os caracteres so
convertidos para
maisculo.
font-weight
normal, bold, bolder,

lighter, [100 -900].
Estilo negrito.
normal ou pt.
Valor para o espao

disponvel entre as
letras.
left, right, center ou

justify.
Ajuste do alinhamento
do texto.
overline, underline,
line-through ou blink.
Decorao do texto ou
hiperlink.
Porcentagem ou
valor desejado para o
comprimento.
Identao do texto.
text-transform
capitaliza, lowercase
ou uppercase.
Converso do texto
em formato minsculo
ou maisculo ou
apenas a primeira
letra.
vertical-align
bottom, middle, sub,

super, text-bottom,
text-top e top
Alinhamento vertical
do texto.
font-family
letter-spacing
text-align
text-decoration
text-ident
140
Definio
Introduo ao CSS3
No exemplo a seguir, o documento style.css possui alguns dos atributos que

foram descritos anteriormente:
J o arquivo cap_8_01.html possui a seguinte estrutura:
O resultado do cdigo renderizado pode ser visto a seguir:
141
HTML5 Fundamentos
8.7.3.Formatando o plano de fundo

Para que o plano de fundo de uma pgina seja formatado com as regras CSS,
podemos utilizar vrios atributos em conjunto com o comando background:
Atributos
backgroundattachment
background-color
background-image
background-repeat
background-size
background-position
142
Valor
Definio
Define se a imagem de
fundo permanecer fixa
enquanto a barra de
fixed, scroll ou local.
rolagem deslizada (fixed)
ou se ela acompanhar esse
movimento (scroll).
transparent,
valor em formato
Determina a cor de fundo
hexadecimal, rgb,
de um elemento.
rgba ou nome da cor.
url, linear-gradient
Uma imagem que ser

utilizada como plano de
fundo. Podemos utilizar
a funcionalidade lineargradient que permite criar
degrad utilizando apenas
CSS3.
repeat-x, repeat-y,
repeat, space,
round, no-repeat.
Especifica como a imagem

de fundo deve se comportar
caso seja maior que a rea
do elemento em que foi
aplicada.
Valor em pixels,
Especifica o tamanho das
porcentagem ou auto. imagens de fundo.
center, [left | right |

top | bottom] [%]
Caso a propriedade
background-image seja
especificada, podemos
determinar a localizao da
imagem e tambm o seu
comportamento quando a
janela for redimensionada.
Introduo ao CSS3
A seguir veja um exemplo do arquivo style.css:
143
HTML5 Fundamentos
E com o cdigo HTML carregando os estilos e criando um boto para aplicar os
estilos criados:
Aps a renderizao, o cdigo anterior produzir o seguinte resultado:
144
Introduo ao CSS3
8.7.4.Formatando bordas
As bordas podem ser ajustadas de acordo com uma srie de atributos, como
podemos observar na tabela a seguir:
Atributos
border-bottom
Valor
Definio
border-bottom-width, Todas as propriedades da linha de

border-color e border- limite inferior da borda podem ser
style.
escritas em uma s declarao.
As cores das quatro linhas de
limite so escolhidas.
border-color
Cor
border-style
none, hidden, dotted,

O estilo das quatro linhas de
dashed, solid, double,
limite da borda pode ser ajustado
groove, ridge, inset ou
com um a quatro valores.
outset.
border-top
border-color, border- Todas as propriedades da linha

style e border-top- de limite superior so definidas
width.
por meio de uma s declarao.
border-radius
[px | % ] [px | %]
Determina o grau da curva das

margens de um objeto.
Veja um exemplo com o uso da formatao de bordas:
145
HTML5 Fundamentos
O arquivo cap_8_03.html com o contedo do documento HTML:
Confira o resultado criado no navegador:
Observe no exemplo acima que o elemento h1 est chamando a classe bordaarredondada, criando assim um efeito com cantos arredondados sem o uso de
imagens, o que no era possvel em verses anteriores ao HTML5.
146
Introduo ao CSS3
8.7.5.Formatando espaamento entre

contedo, margem e bordas
O espao existente entre as bordas e o contedo dos elementos de um documento
HTML pode ser ajustado conforme os seguintes atributos:
Atributos
Valor
Definio
padding-bottom
Porcentagem
ou O espao inferior entre o
valor desejado para contedo e as bordas
o cumprimento.
configurado.
padding-left
Porcentagem
ou O espao do lado esquerdo
valor desejado para entre o contedo e as bordas
o cumprimento.
configurado.
padding-right
Porcentagem
ou O espao do lado direito
valor desejado para entre o contedo e as bordas
o cumprimento.
configurado.
padding-top
Porcentagem
ou O espao superior entre
valor desejado para o contedo e as bordas
o cumprimento.
configurado.
Definio das margens de um objeto: margens a partir do topo, da base,

da esquerda e da direita
147
HTML5 Fundamentos
Definio do padding de um bloco
Pellentesque habitant morbi tristique senectus et netus et matesuada fames ac turpis egestas.
Pellentesque
malesuada
malesuada
habitant
fames
fames
Criamos o estilo em um arquivo style.css:
148
ac
morbi.
Et
turpis
et
ac
turpis.
Introduo ao CSS3
Criamos o contedo HTML no arquivo cap_8_04.html, definindo uma section

com uma chamada para a classe bloco:
E temos como resultado um bloco definindo as margens externas (margin) e

internas (padding):
149
HTML5 Fundamentos
Com o clareamento da fonte e a adio de cantos arredondados (border-radius),
temos um efeito interessante:
E o resultado renderizado ser o seguinte:
As margens de um documento HTML tambm podem ser formatadas com a

ajuda das folhas de estilo. Para isso, ser necessrio utilizar o atributo margin,
como podemos observar no exemplo anterior.
150
Introduo ao CSS3
8.7.6.Formatando links
Os links inseridos em um documento HTML tambm podem ser formatados.
Para isso, algumas regras de estilo devem ser declaradas para as pseudoclasses
do elemento <a> do HTML. As pseudoclasses permitem acrescentar efeitos a
uma instncia dos seletores ou aos prprios seletores.
As pseudoclasses dos links podem ser divididas em:
a:hover: Define a formatao do link no momento em que passamos o
mouse sobre ele;
a:link: Define a formatao do link antes dele ser visitado;
a:visited: Define a formatao do link depois que ele visitado;
a:active: Link ativo.
A sintaxe utilizada para a formatao de links a seguinte:
seletor:pseudo-classe {propriedade: valor}
De acordo com o padro, os links aparecem na cor azul e sublinhados. Para que
ambas as caractersticas sejam exibidas apenas no momento em que passamos
o mouse sobre o link, devemos utilizar o atributo text-decoration.
A seguir, podemos visualizar um exemplo desse tipo de formatao, no arquivo
style.css:
151
HTML5 Fundamentos
A estrutra HTML ser utilizada da seguinte maneira:
Confira o resultado renderizado:

Link ainda no visitado
Link j visitado
Link ao passar o mouse
152
Introduo ao CSS3
8.8.Seletores
Os seletores permitem no s a definio de diferentes formataes em um
mesmo elemento HTML, mas tambm a criao de estilos personalizados.
Ambos os procedimentos sero vistos com detalhes a partir de agora.
8.8.1.Seletores de classe
Por meio dos seletores de classe, possvel configurar diferentes estilos no
mesmo elemento de um documento HTML. Por exemplo, suponhamos que
vrios tipos de alinhamento de pargrafo sero definidos: um ao centro, outro
esquerda e um ltimo direita. Vejamos como os seletores de classe podem
ser aplicados para que essa formatao seja realizada.
No primeiro exemplo, temos a seguinte estrutura no documento CSS:
153
HTML5 Fundamentos
O arquivo.html apresentar a seguinte estrutura:
E o resultado renderizado ser apresentado da seguinte forma:
8.8.2.Seletores de id
Ao contrrio do seletor de classe, o seletor id aplicado a um nico elemento,
pois os valores do atributo id no podem aparecer mais de uma vez em uma
pgina. Isso significa que a quantidade de elementos que possuem id em
uma pgina sempre ser zero ou um. Conforme a regra do prximo exemplo,
somente um elemento <p> com o valor p1 no atributo id poder ser aplicado
pelo estilo.
154
Introduo ao CSS3
No documento CSS, temos:
Em seguida, a estrutura do arquivo cap_8_07.html ser:
Veja o resultado renderizado:
155
HTML5 Fundamentos
8.9.Tipos de mdia
Alguns estilos podem ser aplicados somente em algumas situaes especiais,
por exemplo, a utilizao de um determinado tipo de fonte assim que algum
usurio requisitar a impresso da pgina. Por meio dos tipos de mdia (tambm
chamados de media types), um arquivo CSS poder ser criado apenas para um
evento em particular.
Veja quais so os principais tipos de mdia para aplicao em uma folha de
estilo CSS:
all: Permite a definio de estilos para todos os tipos de mdia;

aural: Os estilos so definidos para sintetizadores de voz;
braille: Possibilita a aplicao de definies para textos em braile;
embossed: Permite a impresso em impressoras prprias para a leitura
braile;
handheld: Os estilos so definidos para equipamentos mveis de mo,
como celulares;
print: Possibilita a aplicao de estilos para a impresso da pgina em papel;
projection: Os estilos so definidos para a apresentao da pgina em um
projetor;
screen: Permite que os estilos sejam utilizados para que a pgina seja
exibida na tela do computador;
tty: Os estilos so aplicados para a apresentao da pgina em terminais
com poucos recursos;
tv: Permite a exibio da pgina em uma tela de TV.
156
Introduo ao CSS3
Por meio da regra @media, possvel aplicar diversas propriedades relacionadas

a diferentes tipos de mdia em uma s folha de estilo. No exemplo a seguir,
temos uma demonstrao dessa regra: a pgina ser formatada para impresso
em papel e exibio na tela. Para comear, ser criado o arquivo .css:
No exemplo anterior, temos um estilo com cor preta para impressora e outro
estilo para dispositivos que possuem no mximo 480px de largura.
Para realizar este teste podemos utilizar o redimensionar do navegador. Observe
que com a janela completamente dimensionada, ultrapassamos o valor de
480px de largura, logo, o estilo no ser aplicado:
157
HTML5 Fundamentos
Agora, quando redimencionamos o navegador para uma resoluo inferior a
480px o estilo aplicado:
O layout do site da Faculdade Impacta Tecnologia utiliza esse recurso, que

denominado Responsive Web Design ou apenas Layout Responsivo:
158
Introduo ao CSS3
Reduzindo a dimenso da janela, por exemplo, no uso em tablets, percebemos

que o banner principar sumir:
159
HTML5 Fundamentos
E com a tela utilizada para SmartPhone:
160
Introduo ao CSS3
Pontos principais
Ao trabalharmos com o conceito de camadas, alm de facilitar a
incluso de modificaes, ele determina uma estrutura mais organizada
para o sistema. A partir do conceito de camadas, possvel trabalhar
com as folhas de estilo em cascata (CSS ou Cascading Style Sheets);
A folha de estilos em cascata CSS um documento responsvel
pela
definio
de
critrios
de
formatao
de
pginas;
A definio de uma folha de estilo por meio de um arquivo externo
a maneira mais recomendada para trabalhar com esse tipo
de recurso. Para que seja possvel o uso de arquivos externos,
devemos criar vnculos com os documentos que sero formatados;
A sintaxe utilizada para a criao de folhas de estilo deve seguir a ordem:
seletor:pseudo-classe {propriedade: valor};
Utilizamos o sinal de ponto (.) para criar uma pseudoclasse;
Para referenciar um id como um seletor CSS utilizamos #.
161
Introduo ao
CSS3
HTML5 Fundamentos
1. Qual cdigo deve ser utilizado para criar

uma referncia a um arquivo chamado estilo.
css?
a) <link type=text/css href=css/estilo.

css rel=StyleSheet></link>
b) <script type=text/css href=css/estilo.
css rel=StyleSheet></script/>
c) <script language=texto/css href=css/
estilo.css rel=StyleSheet/>
d) <link language=texto/css href=css/
estilo.css rel=StyleSheet>
e) <link type=text/css href=css/estilo.
css rel=StyleSheet>
164
Introduo ao CSS3
2. Qual(is) propriedade(s) utilizamos para

formatar a imagem de fundo de um elemento?
a) Utilizamos as propriedades
background-color e background-size.
b) Utilizamos a propriedade backgroudimage.
c) Utilizamos a propriedade backgroundreppeat.
d) Utilizamos as propriedades
background-image, background-size e
background-repeat.
e) Utilizamos as propriedades
background-color e background-style.
165
HTML5 Fundamentos
3. Qual propriedade da CSS utilizamos para

deixar os cantos das bordas dos elementos
arredondadas?
a) border-radius
b) font-family
c) padding-top
d) padding-left
e) border
4. Qual cdigo deve ser utilizado para

determinar 15px de margem externa a partir
da esquerda?
a) margin-left{15px;}
b) margin: 0px 0px 15px;
c) margin-left: 15px;
d) padding: {15px;}
e) padding-left:15px;
166
8
Introduo ao CSS3
Mos obra!
HTML5 Fundamentos
Laboratrio 1
A Utilizando a CSS
1. Utilizando o wireframe (guia visual de interface) adiante, crie um arquivo
chamado home.html e um arquivo para folha de estilos denominado estilo.
css, de forma que produza o seguinte resultado:
ImpactaStore
Full Banner, carregue uma imagem com cantos arredondados.
Carregar
uma
pequena imagem
e
um
texto
descritivo.
168
Carregar
uma
pequena imagem
e
um
texto
descritivo.
Carregar duas pequenas

imagens.
Criando e
posicionando
um layout
99 Dimenso real dos elementos;

99 Configurao das margens dos elementos;
99 Posicionamento dos elementos;
99 Definio das camadas;
99 Definio do modo de apresentao
dos elementos.
HTML5 Fundamentos
9.1.Introduo
A transformao de um layout em formato de imagem criado por um designer
para um formato HTML que servir um site ou Web App um processo que
requer alguns passos. Neste captulo, abordaremos como criar um layout e
posicion-lo corretamente em um navegador, de maneira que envolva as folhas
de estilo em cascata (CSS) e os elementos que aprendemos at aqui.
Um dos mtodos utilizados para a criao de layout em HTML o chamado
Tableless, que o nome atribudo metodologia de construo de sites sem
o uso de tables (tabelas). Para realizar essa construo, utiliza-se o HTML para
determinar a estrutura dos dados e as folhas de estilo CSS para formatar sua
exibio.
Antigamente, era comum o uso de tabelas para a estruturao e criao do
layout da pgina, porm, desde o XHTML no h necessidade de utiliz-las.
Devemos ter em mente que as tags, inclusive a <table>, continuam a ser
utilizadas de acordo com suas funes. A construo de sites por meio da
metodologia Tableless requer a formatao de elementos por meio de arquivos
CSS, que representam as folhas de estilo.
9.2.Dimenso real dos elementos

A dimenso real ocupada por um elemento dentro de uma pgina deve ser
conhecida para que se possa compreender os conceitos envolvidos no processo
de construo de um layout. A rea ocupada por cada um dos elementos de
uma pgina denominada continer e tem a forma de um retngulo.
170
Criando e posicionando um layout
O continer de um elemento possui todos os itens que dizem respeito a ele,

como seu contedo, seus espaos em branco, suas margens e suas linhas de
contorno. O desenho a seguir demonstra quais so as reas de um continer de
um elemento. Observe:
Em que:
MARGIN:
Espao que separa o continer de outros elementos
que compem a pgina. Vale destacar que a margem (margin)
no est dentro dos limites de um elemento. As margens so
utilizadas com a finalidade de mover a caixa do elemento;
CONTEDO: Todos os itens contidos em um elemento, os quais
permanecem dentro do continer;
BORDER: Limites de um elemento, isto , as linhas de contorno do continer;
PADDING: Espaos em branco existentes entre o contedo e os limites de
um elemento.
A largura do continer, no qual est contido o elemento, determinada pela
largura do contedo somada s larguras referentes ao border e ao padding.
J a largura do elemento em si determinada apenas pela largura ocupada por
seu contedo, assim como sua altura.
171
HTML5 Fundamentos
Em uma pgina, todos os elementos visveis so de grupo ou inline. Os elementos
de bloco tm sua largura determinada pela largura do bloco em que esto.
Eles iniciam-se sempre em uma linha nova e, depois de finalizados, h uma
nova mudana de linha. J os elementos inline tm sua largura determinada
apenas por seu contedo e, ao contrrio dos elementos de bloco, no se iniciam
sempre em uma nova linha. Dessa forma, conclumos que os elementos inline
comportam-se da mesma maneira que um texto simples.
Como exemplo de elemento de bloco, podemos mencionar o <table>. J como
exemplo de um elemento inline, podemos mencionar o <span>.
9.3.Configurando as margens dos

elementos
Em CSS, a espessura das margens dos elementos definida pelas propriedades
dessas margens, as quais podem ser:
margin-bottom: Permite determinar a espessura referente margem
inferior do elemento;
margin-top: Permite determinar a espessura referente margem superior
do elemento;
margin-right: Permite determinar a espessura referente margem direita
do elemento;
margin-left: Permite determinar a espessura referente margem esquerda
do elemento.
O valor dessas propriedades normalmente determinado em

pixels.
172
Observe o exemplo a seguir, em que temos a definio das margens de um

elemento:
style.css
cap_9_01.html
Ao executarmos esse cdigo, o resultado obtido o seguinte:
Top: 70px
Left: 50px
173
HTML5 Fundamentos
9.4.Posicionando os elementos
Quando trabalhamos com arquivos CSS, podemos posicionar elementos e
construir o layout com algumas propriedades. Duas propriedades do CSS3 que
sero utilizadas com o objetivo de criar e posicionar um layout so Flexible Box
Layout, ou simplesmente Flexbox, que uma forma simples e sem clculos
para posicionar um layout, e o Mdulo Grid Template Layout, ainda sendo
padronizado em 2013.
Alm disso, temos outras duas propriedades que j eram utilizadas no XHTML:
float e position. Neste tpico, veremos como trabalhar com elas.
9.4.1.Position
A propriedade position permite determinar o posicionamento de um contedo
na tela do usurio. Esse posicionamento pode ser: esttico, fixo, absoluto e
relativo.
9.4.1.1. Posicionamento esttico

Este tipo de posicionamento determinado por meio do valor static, o qual
desnecessrio, pois o posicionamento esttico padro para os elementos.
Portanto, a propriedade position: static no precisa ser declarada de forma
explcita na folha de estilo.
Um elemento cuja posio esttica coloca-se imediatamente abaixo de seu
elemento anterior e acima de seu posterior. No entanto, vale destacar que
isso apenas ocorre caso os elementos anterior e posterior no tenham seu
posicionamento determinado de forma diferente da esttica.
9.4.1.2. Posicionamento fixo

Este tipo de posicionamento determina que o elemento seja posicionado de
acordo com a parte que pode ser visualizada do User Agent, no qual exibida
a pgina. Para determinar que um elemento ter seu posicionamento fixo,
preciso utilizar o valor fixed juntamente propriedade position.
174
9.4.1.3. Posicionamento absoluto

Este tipo de posicionamento determina que o elemento seja posicionado
levando-se em considerao o local em que est o elemento mais prximo,
cuja posio pode ser definida como fixa, absoluta ou relativa.
Nas situaes em que no h um elemento mais prximo, considera-se o
posicionamento do elemento <body>. Para determinar o posicionamento de
um elemento como sendo absoluto, basta utilizar o valor absolute em conjunto
propriedade position.
Vale destacar que h quatro propriedades que se aplicam aos elementos cujo
posicionamento determinado como absoluto. So elas: bottom, top, left e
right.
style.css
cap_9_02.html
175
HTML5 Fundamentos
Ao executarmos o cdigo anterior, o resultado obtido o seguinte:
Podemos observar, no exemplo apresentado, a presena da propriedade

position, a qual recebe o valor absolute e complementada pelas propriedades
left e top. Com isso, o posicionamento do elemento determinado tomando-se
como base o canto superior esquerdo da viewport. O elemento representado
neste exemplo por img, que possui a id=imagem.
Podemos observar, ainda, que a propriedade left determina o distanciamento
da imagem a partir da margem esquerda e a propriedade top determina o
distanciamento a partir da margem superior.
9.4.1.4. Posicionamento relativo

Este tipo de posicionamento determina a posio do elemento de acordo com
sua prpria posio. Para determinar o posicionamento de um elemento como
relativo, basta utilizar o valor relative juntamente propriedade position.
Quando trabalhamos com o posicionamento relativo de elementos, podemos
utilizar as propriedades bottom, top, right e left.
176

style.css
cap_9_03.html
Veja o resultado:
177
HTML5 Fundamentos
9.4.2.Float
Os elementos que so declarados como float so convertidos para elementos
de bloco de forma automtica, podendo ter sua altura e largura declaradas.
Mais especificamente, a largura dos elementos float deve ser declarada, pois os
browsers consideram a no declarao dessa largura um erro.
Quanto ao posicionamento de um elemento float, este ocorre imediatamente
aps o elemento em bloco anterior a ele, embora tais elementos fiquem fora do
fluxo. Os valores que podem ser utilizados juntamente ao atributo float so:
none, left, right e inherit, cujo valor igual ao valor da propriedade referente
ao elemento pai.
Veja o exemplo a seguir:
style.css
cap_9 _04.html
178
Veja o resultado obtido:
Se no tivssemos utilizado o atributo float no exemplo anterior, o resultado

obtido seria o seguinte:
179
HTML5 Fundamentos
9.5.Definindo as camadas
Alguns elementos de bloco, como section, div, article e outros mencionados
anteriormente, oferecem atributos que permitem definir as camadas que sero
utilizadas na construo do layout da pgina.
Veja, a seguir, quais so esses atributos:
id: Permite determinar como a camada ser identificada;
class: Permite determinar qual classe j declarada no arquivo CSS deve ser
aplicada;
z-index: Permite determinar o nvel de empilhamento;
visibility: Permite determinar a visibilidade da camada. Os valores que
podem ser utilizados por este atributo so os seguintes: visible, inherit e
hidden.
O atributo z-index, que tem a finalidade de ordenar a prioridade de visualizao
dos elementos, funciona apenas com os elementos que foram configurados
com o posicionamento absoluto, o que significa que so os elementos cuja
propriedade position configurada como absolute. Vale destacar que quanto
maior o valor do atributo z-index, maior a prioridade de visualizao do
elemento. Por exemplo, um elemento que possui z-index: 5 tem prioridade
sobre um elemento que possui z-index: 3.
180

style.css
181
HTML5 Fundamentos
Cap_9_05.html
O resultado produzido ser o seguinte:
Neste exemplo, temos o posicionamento de vrias camadas.

Com isso, algumas sobreposies foram criadas.
182
9.6.Definindo o modo de
apresentao dos elementos
O atributo display permite determinar se um elemento deve ser apresentado
e, caso deva, permite determinar seu modo de apresentao. Os valores que
podem ser utilizados com o atributo display so os seguintes:
Valores
Descrio
table
Determina que o elemento seja apresentado

como uma tabela, sendo que h mudana de linha
tanto antes do elemento quanto depois dele.
list-item
Determina que o elemento seja apresentado com

sendo item de uma lista.
inline
Determina que o elemento seja apresentado sem

que haja mudana de linha.
block
Determina que o elemento seja apresentado

como um elemento de bloco, e, diferentemente
do item anterior, existe a quebra de linha antes
e depois do item.
none
Determina que o elemento no seja apresentado.
O exemplo descrito a seguir permite compreender de forma adequada a

utilizao dos valores que acabam de ser definidos:
style.css
183
HTML5 Fundamentos
cap_9_06.html
O resultado produzido ser o seguinte:
184
Pontos principais
Atente para os tpicos a seguir. Eles devem ser estudados com muita ateno,
pois representam os pontos mais importantes do captulo.
Tableless o nome atribudo metodologia de construo de sites sem o uso de
tables (tabelas). Para realizar essa construo, utiliza-se o HTML para determinar
a estrutura dos dados e as folhas de estilo CSS para formatar sua exibio;
A dimenso real ocupada por um elemento dentro de uma pgina deve ser
conhecida para que se possa compreender os conceitos envolvidos no processo
de construo de um layout Tableless. A rea ocupada por cada um dos
elementos de uma pgina denominada caixa e tem a forma de um retngulo;
Em HTML, a espessura das margens dos elementos definida pelas propriedades
dessas margens, as quais podem ser: margin-bottom; margin-top, marginright e margin-left;
O atributo display permite determinar se um elemento deve ser apresentado
e, caso deva, permite definir seu modo de apresentao.
185
Criando e
posicionando
um layout
HTML5 Fundamentos
1. Qual propriedade devemos utilizar para

determinar a margem interna de um elemento?
a) internal-margin
b) padding
c) border
d) margin-internal
e) padding-border
2. Qual propriedade e valor devemos utilizar

para determinar um posicionamento de um
elemento de forma absoluta?
a) float:none
b) float:left
c) position:relative
d) position:absolute
e) position:absolute z-index 3
188
3. Qual propriedade da CSS utilizamos para

determinar a prioridade de exibio de um
elemento em camada?
a) id
b) class
c) z-index
d) visibility
e) inline
4. Qual propriedade e valor devemos utilizar

para ocultar um elemento?
a) border:none
b) top:none
c) display:block
d) display:inline
e) display:none
189
9
Criando e
posicionando
um layout
Mos obra!
HTML5 Fundamentos
Laboratrio 1
A Criando um layout
1. Utilizando o wireframe a seguir, crie um arquivo chamado home.html e um
arquivo para folha de estilos denominado estilo.css de forma que produza o
seguinte resultado:
Caixa de busca
Full Banner, carregue uma imagem com cantos arredondados.
Carregar
uma
pequena imagem
e
um
texto
descritivo
Carregar
uma
pequena imagem
e
um
texto
descritivo
Carregar duas pequenas imagens.
192
Carregar duas pequenas

imagens.
Carregar
uma
pequena imagem
e
um
texto
descritivo.
Formulrios
10
99 Atributos para controle de formulrios;

99 Atributos para validar formulrios;
99 Atributo type (elemento input).
HTML5 Fundamentos
10.1.Introduo
Em HTML, um formulrio uma seo de documento que abrange texto,
marcao, controles e rtulos. A funo de um formulrio recolher dados
recolhidos pelo usurio e envi-los para serem processados no servidor. Os
dados so inseridos pelo usurio nos formulrios por meio de modificaes
nos controles (digitando um texto, selecionando um item em um menu, etc.) e
depois processados por scripts no servidor.
Como, ao preencher um formulrio, um usurio pode inserir no s textos
simples, mas tambm scripts inteiros, isso pode gerar um problema de segurana,
com a entrada de scripts maliciosos que prejudicam o site e seus usurios. Por
isso, ao desenvolver um formulrio e o script para o seu processamento, o
mecanismo de validao importante. A validao o que permite verificar os
dados digitados por um usurio nos controles de um formulrio.
At a HTML5, a validao era feita com JavaScript, mas podia ser facilmente
anulada. Na HTML5, a validao simples e eficiente, reduzindo a necessidade
de desenvolvimento de scripts. H novos atributos nos controles que permitem
definir o tipo de dado a ser entrado e disparam mecanismos nativos de validao
e mensagens de erro.
Neste captulo, voc ver as funcionalidades para formulrios na HTML5,
implementadas por meio de atributos usados nos controles dos formulrios.
10.2.Atributos para controle de

formulrios
As funcionalidades para formulrios na HTML5 esto relacionadas a novos
atributos usados nos controles. Como veremos, eles servem para validao e
outras funcionalidades que antes eram implementadas com o uso de scripts.
10.2.1.placeholder
Sua funo definir uma dica de preenchimento de um campo, composta
por uma palavra ou uma frase curta. Deve ser usado exclusivamente com os
elementos input e textarea.
194
Formulrios
10
A seguir, um exemplo ilustrando o uso de placeholder:
Esse cdigo produzir o seguinte resultado:
195
HTML5 Fundamentos
10.2.2.autofocus
A funo deste atributo definir qual o elemento deve ter o foco quando a
pgina for carregada. Pode ser usado com os elementos button, input, keygen,
select e textarea.
Veja o uso de autofocus no seguinte exemplo:
O resultado ser o seguinte:
196
Formulrios
10
10.2.3.required
Sua funo marcar um controle de preenchimento obrigatrio. Pode ser usado
com input, select e textarea e um atributo booleano, ou seja, basta sua
presena na sintaxe, sem declarao de valor.
Veja, a seguir, um exemplo de required:
D uma olhada no resultado:
197
HTML5 Fundamentos
10.2.4.autocomplete
Este atributo oferece uma lista de opes para o preenchimento de um controle,
de acordo com o que o usurio digitou nele anteriormente. implementado de
diferentes maneiras nos navegadores. Pode ser usado com os elementos form
e input e admite os seguintes valores: on e off. Eles definem, respectivamente,
se o navegador far ou no sugestes de autopreenchimento.
Quando no especificado para um controle especfico, ele assume o
comportamento de autopreenchimento do elemento form ao qual o controle
pertence. Quando o autocomplete no especificado para o form, o padro de
autopreenchimento on.
Veja um exemplo de autocomplete:
O cdigo produzir o seguinte resultado:
198
Formulrios
10
10.2.5.list
Define uma lista com opes de preenchimento para um campo de texto. Deve
ter o mesmo valor que o id de um elemento datalist e s pode ser usado com
o elemento input. Veja um exemplo a seguir:
O resultado ser este:
199
HTML5 Fundamentos
10.2.6.max
Este atributo tem como funo definir um valor mximo para os diferentes
elementos com os quais pode ser usado:
Para o elemento meter, define o valor mximo da escala da medida marcada.
Caso seja omitido, seu valor 1;
Para o elemento progress, define o valor mximo de uma barra de progresso,
que mostra a progresso de uma tarefa;
Para o elemento input, define o valor mximo que ser permitido como
entrada em um campo. Se for usado junto com o atributo min, definir uma
faixa de entrada de dados no campo.
Veja, a seguir, um exemplo de como utilizar o atributo max:
200
Formulrios
10
E agora observe o resultado:
201
HTML5 Fundamentos
10.2.7.min
Ao contrrio de max, serve para definir um valor mnimo. Alm disso, s pode
ser usado com meter e input:
Para meter, define o valor mnimo da escala da medida marcada. Caso seja
omitido, seu valor 0;
Para input, define o valor mnimo que ser permitido como entrada em um
campo.
Veja, no exemplo, como utilizar min:
202
Formulrios
10
O resultado voc v a seguir:
203
HTML5 Fundamentos
10.2.8.form
Associa um controle de formulrio a um elemento formulrio. Permite, inclusive,
associar a um formulrio controles que esto fora dele ou dentro de outros
formulrios, o que no era possvel nas verses anteriores da HTML. O atributo
form tem o mesmo valor do atributo id do formulrio ao qual estiver associado.
Podemos usar form com os seguintes elementos: input, output, select, object,
button, textarea, meter, label, progress, keygen e fieldset.
Veja como usar o atributo no exemplo a seguir:
E este ser o resultado:
204
Formulrios
10
Observe, na imagem a seguir, que, mesmo o elemento estando fora da tag do

formulrio, o seu valor enviado:
10.2.9.formaction
Este atributo define uma URL que ser o endereo para o qual o formulrio ser
enviado e onde ser processado. Pode ser usado com os elementos input e
button. Veja como us-lo no exemplo a seguir:
205
HTML5 Fundamentos
10.2.10.formenctype
Este atributo define qual o tipo de contedo enviado pelo formulrio e pode
ser usado com input e button. Veja como us-lo no exemplo a seguir:
10.2.11.formmethod
A funo deste atributo definir qual mtodo ser usado para enviar os dados
do formulrio. Pode ser usado com input e button. Veja como no seguinte
exemplo:
206
Formulrios
10
10.2.12.formtarget
Permite determinar qual ser o destino do documento aberto aps o formulrio
ser enviado. Pode ser usado com input e button e admite os seguintes valores:
_blank, _top, _self, _parent ou outro nome na janela atual.
O exemplo a seguir mostra como usar este atributo:
10.3.Atributos para validar

formulrios
Como dissemos, uma caracterstica importante da HTML5 introduzir atributos
que facilitam a validao de formulrios, automatizando o processo todo ou
pelo menos parte dele. Vejamos os atributos que so utilizados nessa tarefa.
207
HTML5 Fundamentos
10.3.1.formnovalidate
Com este atributo, voc desabilita a validao de dados do formulrio. Pode
ser usado com os elementos button e input e um atributo booleano. Assim,
basta inserir o atributo em um elemento para que o formulrio no tenha seus
dados validados. Veja no exemplo a seguir:
10.3.2.novalidate
Possui o mesmo efeito que o formnovalidate. A diferena que deve ser usado
exclusivamente com um elemento form. Veja um exemplo com esse atributo:
208
Formulrios
10
10.3.3.pattern
Com pattern, voc pode definir expresses regulares para validao de
formulrios, sem precisar de JavaScript.
Veja como utiliz-lo no exemplo a seguir:
10.4.Atributo type (elemento input)

Na HTML5, o atributo type do elemento input possui diversos novos valores
que definem o tipo de dado esperado pelo controle. Na HTML4, o type tinha
dez valores diferentes (text, password, checkbox, radio, submit, reset, file,
hidden, image e button). Com a HTML5, esses valores foram mantidos e foram
acrescentados outros, que voc ver adiante.
209
HTML5 Fundamentos
10.4.1.search
Define um controle input para busca, diferenciando-o dos outros controles
alterando sua estilizao e comportamento. Cada navegador possui um modo
de estilizao e comportamento prprios.
Veja como funciona o atributo type com valor search:
O resultado mostrado a seguir:
210
Formulrios
10
10.4.2.url
Garante que um controle input receba uma URL como valor. Ele fornece ao
usurio, entre outras coisas, uma indicao visual de que o valor digitado uma
URL vlida. Veja como funciona no exemplo a seguir:
Agora veja o resultado:
211
HTML5 Fundamentos
10.4.3.tel
Define um controle input destinado a receber um nmero de telefone. Ele no
restringe o controle a uma sintaxe particular porque os formatos de nmeros de
telefone podem variar muito. Portanto, ele apenas define o destino do controle.
Para validar um controle desse tipo, voc tem duas opes: Usar o atributo
pattern ou o mtodo setCustomValidity(), que disponibilizado como um
mecanismo JavaScript nativo do navegador. O exemplo a seguir mostra como
validar esse controle utilizando o atributo pattern:
212
Formulrios
10
E o resultado voc v logo adiante:
Ao acessar uma pgina com um input com o type=tel de um dispositivo

mvel, o teclado se adapta para que o usurio possa digitar mais facilmente o
valor esperado. Veja:
213
HTML5 Fundamentos
10.4.4.email
Com este valor, o controle input pode receber apenas um endereo de e-mail
como valor. Ele, na verdade, no verifica se o e-mail digitado vlido, apenas
se o formato digitado vlido. Veja como us-lo no seguinte exemplo:
Agora veja o resultado:
214
Formulrios
10
Assim como o type=tel, o type=email tambm faz o teclado dos dispositivos

mveis se adaptarem para facilitar a entrada de um endereo de e-mail. Veja:
10.4.5.datetime
Um controle input com esse valor dever receber uma string de data e hora
UTC. O agente de usurio quem define como ser a representao do grupo
data/hora, que depender do local e do usurio. comum o agente de usurio
usar um widget do tipo date picker para entradas no controle de data e um
campo com slider de seta para entradas de hora.
215
HTML5 Fundamentos
Veja o uso de datetime a seguir:
E o resultado este:
216
Formulrios
10
10.4.6.datetime-local
Diferencia-se do datetime por aceitar como valor uma string representando
data e hora locais, e no UTC. Veja o exemplo a seguir:
E, em seguida, o resultado:
217
HTML5 Fundamentos
10.4.7.date
Um controle input com esse valor dever receber uma string de data. O agente
de usurio quem define como ser a representao da data, que depender
do local e do usurio. comum o agente de usurio usar um widget date picker
para entradas no controle de data. Veja o exemplo a seguir:
Com o seguinte resultado:
218
Formulrios
10
10.4.8.time
Um controle input com esse valor dever receber uma string de hora. Geralmente,
o agente de usurio usa um slider de seta para entradas no controle de data.
Veja o exemplo a seguir:
10.4.9.month
Define para um controle input uma string de ms, cuja representao fica por
conta do agente de usurio, de acordo com o local e o usurio. Geralmente,
utiliza-se um widget date picker para a entrada no controle. Veja o exemplo a
seguir:
219
HTML5 Fundamentos
10.4.10.week
Define um controle que dever receber uma string representando uma semana
do ano. Normalmente, o agente de usurio usa um widget date picker para a
entrada. Veja o exemplo a seguir:
10.4.11.number
Controles com esse valor devem receber nmeros. comum que o agente de
usurio use sliders de seta para esse tipo de entrada. Veja um exemplo:
220
Formulrios
10
O resultado o seguinte:
10.4.12.range
Em controles com range, a entrada deve ser um nmero situado dentro de um
intervalo definido. comum que essas entradas tenham um slider deslizante.
Veja um exemplo com range:
221
HTML5 Fundamentos
E o resultado o seguinte:
10.4.13.color
Define que um controle input receba um cdigo sRGB de cor. Geralmente,
utiliza-se um color pick para esse tipo de entrada. Veja um exemplo:
222
Formulrios
10
Agora observe o resultado:
Ao clicar no input type=color, a seguinte janela ser aberta:
Aps escolher uma cor, o input assume a cor escolhida:
223
HTML5 Fundamentos
Pontos principais
Formulrio uma seo de documento que abrange texto, marcao,
controles e rtulos e tem como funo recolher dados recolhidos pelo
usurio e envi-los para serem processados no servidor. Os dados so
inseridos pelo usurio nos formulrios por meio de modificaes nos
controles (digitando um texto, selecionando um item em um menu, etc.) e
depois processados por scripts no servidor;
As funcionalidades para formulrios na HTML5 esto relacionadas a novos
atributos nos controles, usados para validao e outras funcionalidades
anteriormente implementadas com scripts. So eles: placeholder,
autofocus, required, autocomplete, lista, max, min, form, formaction,
formenctype, formmethod e formtarget;
Os atributos usados na validao de formulrios so: formnovalidate,
novalidate e pattern;
O atributo type do elemento input possui, alm dos valores j presentes na
HTML4, diversos novos valores para definir o tipo de dado esperado por
um controle: search, url, tel, email, datetime, datetime-local, date, time,
month, week, number, range e color.
224
Formulrios
10
HTML5 Fundamentos
1. Qual a seo do documento que abrange

texto, marcao, controles e rtulos e tem como
funo recolher dados do usurio e envi-los
para serem processados no servidor?
a) Cabealho
b) Tabela
c) Formulrio
d) Linguagem
e) Rodap
2. Qual atributo foi adicionado na HTML5?
a) form
b) name
c) value
d) rel
e) id
226
Formulrios
10
3. Qual o atributo usado para alterar o destino

de envio de um formulrio?
a) formenctype
b) formmethod
c) formtarget
d) formsubmit
e) formaction
4. Qual o atributo usado para validar um

campo de formulrio com expresso regular?
a) regex
b) validate
c) required
d) pattern
e) novalidate
227
HTML5 Fundamentos
5. Qual atributo usado para dar uma dica de

preenchimento de um campo?
a) placeholder
b) pattern
c) dirname
d) autofocus
e) required
228
10
Formulrios
Mos obra!
HTML5 Fundamentos
Laboratrio 1
A Criando um formulrio com elementos da HTML5
1. Crie um arquivo HTML com o nome de formulrio.html;
2. Adicione a estrutura bsica de elementos HTML no arquivo;
3. No elemento BODY, adicione o elemento FORM;
4. Adicione o elemento LABEL com o texto Nascimento:;
5. Adicione o elemento INPUT com o atributo TYPE igual a DATE;
6. Adicione o elemento LABEL com o texto Salrio:;
7. Adicione o elemento INPUT com o atributo TYPE igual a RANGE, o atributo
MIN igual a 0 e o atributo MAX igual 10000;
8. Adicione o elemento LABEL com o texto E-mail:;
9. Adicione o elemento INPUT com o atributo TYPE igual a EMAIL;
10. Adicione o elemento LABEL com o texto Site:;
11. Adicione o elemento INPUT com o atributo TYPE igual a URL;
12. Adicione o elemento LABEL com o texto Telefone:;
13. Adicione o elemento INPUT com o atributo TYPE igual a TEL e crie uma
expresso regular para validar o valor inserido;
230
Formulrios
10
14. Adicione o elemento BUTTON com a classe btn, o atributo TYPE igual a
SUBMIT e o texto Enviar. O resultado final ser este:
B Criando um formulrio de autenticao com mltiplos destinos

1. Crie um arquivo HTML com o nome de login.html;
3. No elemento BODY, adicione o elemento FORM com os atributos ACTION
igual a aluno.php e METHOD igual a POST;
4. Adicione o elemento INPUT com o atributo TYPE igual a EMAIL e o atributo
PLACEHOLDER igual a E-mail;
5. Adicione o elemento INPUT com o atributo TYPE igual a PASSWORD e o
atributo PLACEHOLDER igual a Senha;
6. Adicione o elemento BUTTON com o atributo TYPE igual a SUBMIT e o texto
Login Aluno;
7. Adicione o elemento BUTTON com o atributo TYPE igual a SUBMIT, o atributo
231
HTML5 Fundamentos
FORMACTION igual a instrutor.php e o texto Login Instrutor. O resultado
ser como mostrado a seguir:
C Utilizando campos range para ajustar a largura e a altura de uma imagem

1. Crie um arquivo HTML com o nome de ajustar_imagem.html;
3. Adicione os seguintes estilos CSS:
4. Crie um elemento DIV com o ID igual a Area e insira um elemento IMG nesse
DIV com o SRC igual a HTML5-Logo.png;
232
Formulrios
10
5. Crie dois elementos INPUT do tipo RANGE com os atributos MAX e VALUE
iguais a 600 e MIN igual 0. O primeiro INPUT dever ter o ID igual a V e o
segundo igual a H;
6. Crie um elemento SCRIPT;
7. Crie uma varivel com o nome ranges e selecione todos os elementos em
que o TYPE for igual a RANGE;
8. Percorra os elementos selecionados e adicione o evento change a cada um
deles;
9. No evento, crie uma varivel com o nome imgStyle que receber a seleo
do atributo style do elemento IMG;
10. Crie uma nova varivel com o nome size e defina o valor igual ao atributo
value do objeto this concatenado com a string px;
11. Verifique se o ID do objeto this igual a V. Se a condio for verdadeira,
atribua a varivel size ao atributo height da varivel imgStyle. Seno, atribua
ao atributo width. O resultado ser este:
233

HTML Fundamentos

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

HTML Fundamentos

Uploaded by

Copyright:

Available Formats

HTML5 Fundamentos

Reviso Ortogrfica e Gramatical

Informaes sobre o treinamento

Para que os alunos possam obter um bom aproveitamento deste curso,

1.1.A histria da HTML

Linguagem utilizada com a finalidade

Linguagem criada posteriormente

1.4.Visualizando o cdigo fonte

utilizado nos seguintes navegadores:

StatCounter Global Stats, disponvel em gs.statcounter.com/

Os navegadores Google Chrome e Firefox so atualizados automaticamente

Teste seus conhecimentos

1. O que significa a acrnimo HTML?

a) Hypertext Master Language

2. Quem criou o HTML?

3. Qual motor de renderizao utilizado no

4. Qual motor de renderizao utilizado no

5. Qual motor de renderizao utilizado no

6. Qual motor de renderizao utilizado no

2.1.A linguagem HTML5

O foco principal da HTML5 dar sentido ao contedo de um site ou de um Web

Alm de tags semnticas para o contedo do texto, a parte

Graas a tecnologias como HTML5 App Cache, Local Storage, Indexed DB e as

Com a utilizao da API de Geolocalizao, as aplicaes Web podem acessar

Com mais eficincia em conectividade, que necessria nas aplicaes em

Em Ajax, temos uma requisio cliente/servidor de forma

udio e vdeo so os principais recursos de multimdia para integrao com

importante salientar que alguns desses recursos ainda no

Utilizando tecnologias como Web Workers e XMLHttpRequest 2, possvel criar

CSS3 uma das maiores revolues e, embora seja independente da HTML5,

Teste seus conhecimentos

1. Qual categoria da HTML5 responsvel por

a) Desempenho e acesso ao dispositivo

2. Qual categoria da HTML5 responsvel por

3. Quais os principais elementos para a

a) udio e API de udio.

4. Quais elementos podemos acessar por meio

a) Mouse e eventos touch.

5. Qual e tecnologia responsvel por permitir

99 Tags e atributos da HTML5;

3.1.Tags e atributos da HTML5

Quando essas regras so observadas, o documento HTML5 construdo de

Conhecendo a estrutura HTML5

3.2.Estrutura do cdigo HTML5

Podemos verificar que este exemplo demonstra a estrutura correta de um cdigo

3.2.1.Tipo de documento (DOCTYPE)

Agora, no HTML5, usamos:

3.2.2.Elemento raiz (html)

O atributo lang pode ser utilizado tambm dentro de textos no

Conhecendo a estrutura HTML5

3.2.4.Corpo da pgina (body)

Podemos observar que author um atributo que permite determinar o nome

O site www.humanstxt.org permite que voc crie um arquivo

Os mecanismos que encontram as palavras-chave (keywords) apresentam a

Conhecendo a estrutura HTML5

Teste seus conhecimentos

1. Quais as tags principais e em que ordem

2. Qual encoding deve ser utilizado para tornar

Conhecendo a estrutura HTML5

3. Para determinar informaes do documento

4. Para determinar informaes do documento

Caso no tenha uma pasta criada no diretrio local, crie uma

2. Determine o doctype apropriado para HTML5;

99 Entendendo a semntica de um documento;