HTML5 e CSS3: Guia Completo

HTML5 e CSS3
Index
Captulo 1: Web
1.1
Histria
1.2
Timeline
1.3
Google em 1997
1.4
Camadas
1.5
Front-end
1.6
Back-end
1.7
Requsies
1.8
Integraes
EP: Integraes
1.8
Domnio
1.9
Hospedagem
1.10 Pgina HTML
1.11 Verses HTML
1.12 Verses CSS
1.13 Linguagens de Progamao
1.14 Padres HTML
1.15 Navegadores
EP: Navegadores
1.16 Engines
1.17 Engines Timeline
1.18 Browsers Timeline
1.19 Cross-browser
Capitulo 2:
Introduo Linguagem
2.1
Editores de Texto e IDE
2.2
Sublime Text
EP: Sublime Text
2.3
HTML
2.4
XHTML
2.5
XML
2.6
Tags
2.7
Estrutura Bsica HTML
2.9
Indentao
2.9.1 Cdigo sem Indentao
2.9.2 Cdigo com Indentao
1
EP: Tags
2.10 Comentrios
EP: Comentrios
2.11 Documentao Online
Captulo 3:
Elementos e Atributos
3.1
Conceito
3.2
Elementos
EP: Elementos
3.3
Atributos
3.4
Atributos Globais
3.5
EP: Elementos e Atributos
3.6
Estrutura HTML
3.7
DOCTYPE
EP: Estrutura HTML
3.8
3.9
Interpretao do Navegador
Captulo 4:
Tags de Cabealho
4.1
<head>
4.1.1
<title>
4.1.2
<meta>
4.1.2.1
Atributo name <meta>
EP: <meta>
4.1.2.2
Demais Atributos de <meta>
4.1.2.3
Atributo http-equiv <meta>
EP: http-equiv
4.1.2.4
Atributo charset <meta>
4.1.2.5
Encoding
4.1.2.6
ISO e UTF
EP: Econding
4.1.2.7
Entidades de Encoding
EP: Entidades de Encoding
4.1.3
<style>
EP: <style>
4.1.4
<link>
EP: <link>
4.1.5
<script>
EP: <script>
2
4.1.6
<noscript>
EP: <noscript>
Captulo 5:
Tags de Exibio
5.1
Sobre
5.2
Block & Inline
5.2.1
Block
5.2.2
Inline
5.3
<body>
5.4
<h1>...<h6>
EP: <h1>...<h6>
5.5
<p>
EP: <p>
5.6
<span>
5.7
<s>
5.8
<sub>
5.9
<sup>
5.10 <pre>
EP: Textos
5.11 <img>
EP: <img>
5.12 <button>
EP: <button>
5.13 Listas
5.13.1
<ol>
5.13.2
<ul>
5.13.3
<li>
EP: Listas
5.14 <div>
EP: <div>
5.15 <a>
5.15.1
Navegao
5.15.2
ncora
5.15.3 target
EP: <a>
Captulo 6: Tags Semnticas
6.1
Sobre
6.2
Tags
6.2.1 <header>
3
6.2.2
<article>
6.2.3
<footer>
6.2.4
<section>
EP: Tags Semnticas
Captulo 7:
Tags de Formulrio
7.1
Formulrios
7.2
<form>
EP: <form>
7.3
Principais Elementos
7.4
<input>
EP: <input>
7.5
<label>
EP: <label>
7.6
<select>
EP: <select>
7.7
<textarea>
EP: <textarea>
7.8
<fieldset>
EP: <fieldset>
Captulo 8:
Novos Tipos de Formulrio
8.1
Novos Tipos
8.2
Suporte dos Navegadores
8.3
Vantagens do Uso
EP: Novos Tipos
Captulo 9:
Conceitos de Requisies HTTP
9.1
Front-end & Back-end
9.2
Requisio
9.3
Header
9.4
URL Encoding
EP: URL Encoding
9.5
Servios
9.6
Caixa Preta
9.7
REST
9.8
Mtodos
9.9
GET
EP: GET
9.10 POST
9.11 Segurana
4
9.12 Ferramentas
Captulo 10:
Formulrios HTML
10.1 Mtodos vs Formulrios
10.2 Objeto do Formulrio
10.3 <form>
10.4 method
10.5 name
EP: Objeto do Formulrio
Captulo 11:
Validao
11.1 Papel do Front-end
11.3 Validao
11.3.1
Validaes mais Comuns
11.3.2
Validao HTML5
11.3.2.1
Atributos de Validao
11.3.2.2
Tipos que Validam
EP: Validao
11.3.2.3
Customizao
Captulo 12:
Recursos Externos
12.1 <object>
EP: <object>
12.2 <embed>
EP: <embed>
12.3 <iframe>
EP: <iframe>
12.4 Consideraes
EP: Consideraes
Captulo 13:
Mdias HTML5
13.1 udio
13.1.1
13.1.2
Arquivos de udio
13.1.3
<audio>
EP: <audio>
13.1.4
<source>
EP: <source>
13.2 Vdeo
13.2.1
13.2.2
Arquivos de Vdeo
13.2.3
<video>
5
EP: <video>
Captulo 14:
SVG
14.1 Viso Geral
14.2 Formato XML
14.2.1
Desmenbrando SVG
14.3 Usando SVG
EP: SVG
Captulo 15:
Tabela
15.1 <table>
15.2 Criando Tabelas
EP: <table>
15.3 Email Marketing
15.3.1
Regras Essenciais
EP: Email Marketing
Captulo 16: Fundamentos CSS
16.1 CSS
16.2 Reutilizao de Estilos
16.3 Sintaxe
16.4 Cometrios
Captulo 17:
Seletores
17.1 Element Selector
EP: Element Selector
17.2 id Selector
EP: id Selector
17.3 Class Selector
EP: Class Selector
17.4 Universal Selector
EP: Universal Selector
17.5 Declarao de Seletores
17.6 Combinando Seletores
EP: Combinando Seletores
Captulo 18:
Precedncia CSS
18.1 Nomenclatura de Vnculo
18.2 Precedncia CSS
EP: Precedncia CSS
18.3 Execuo de Precedncia
EP: Execuo de Precedncia
Captulo 19: Seletores Avanados
6
19.1 Hierarquia HTML

19.1.1
Descendant Selector
EP: Descendant Selector
19.1.2
Child Selector
EP: Child Selector
19.1.3
Adjacent Sibling Selector
EP: Adjacent SIbling Selector
19.1.4
General Sibling Selector
EP: General Sibling Selector
19.1.5
Consolidado dos Seletores Hierrquicos
19.2 Atributos HTML
19.2.1
Attribute Selector
EP: Attribute Selector
19.2.1 Attribute Selector (cont.)
EP: Attribute Selector (cont.)
19.3 Pseudo-class
EP: Pseudo-class (link)
19.3 Pseudo-class (cont.)
EP: Pseudo-class (form)
EP: Pseudo-class (others)
19.4 Pseudo-class Avanado
EP: Pseudo-class Avanado
19.5 Peseudo-elements
EP: Pseudo-elements
19.6 Vendor Properties
Captulo 20:
Cores CSS
20.1 Cores
20.2 Hexadecimal
20.3 Web Safe Colors
20.4 RGB
20.5 RGBA
20.6 HSL
20.7 HSLA
Captulo 21: Fontes
21.1 Sobre
21.2 font-family
21.3 Fontes no Carregadas
7
EP: font-family
21.4 Web Safe Fonts
21.5 Sans-serif vs Serif
21.6 Proportional vs Monospace
21.7 Fontes Carregadas
21.8 @font-face
EP: @font-face
Captulo 22:
Propriedades CSS
22.1 Unidades de Medida CSS
22.2 Propriedades CSS
22.3 Valor das Propriedades
22.4 Shorthand
EP: Propriedades CSS
22.5 overflow
22.6 background
22.6.1
background-color
EP: background-color
22.6.2
background-clip
EP: background-clip
22.6.3
background-image
EP: background-image
22.6.4
background-repeat
EP: background-repeat
22.6.5
background-position
EP: background-position
22.6.6
background-size
EP: background-size
22.6.7
background-attachment
EP: background-attachment
22.6.8
background-origin
22.7 border
22.7.1
Shorthand Border
22.7.2
border-style
22.7.3
CSS3 Border
EP: border
22.8 padding
EP: padding
22.9 margin
8
EP: margin
22.10 Texto
22.10.1 CSS3 Text
EP: Texto
22.11
list-style
22.11.1 list-style-type
22.11.2 list-style-position
22.11.3 list-style-image
EP: list-style
22.12
Colunas
EP: Colunas
Captulo 23:
At Rules
23.1 Sobre
23.2 Principais
23.3 @charset
23.4 @import
EP: @import
23.5 @font-face
23.5.1
Suporte de Fontes
EP: @font-face
23.6 @media
EP: @media
Captulo 24: Box Model
24.1 Sobre
24.2 reas
24.3 Espaamento do Contedo
24.4 Largura e Altura
EP: Tamanho do Elemento
24.5 CSS Reset
EP: CSS Reset
Captulo 25:
Posicionamento
25.1 Dimenses
25.1.1
Valores das Dimenses
25.1.2
Propriedades de Dimenses
25.2 display
25.2.1
inline vs block
EP: inline vs block
25.2.2
Modificando a Exibio
9
EP: Modificando a Exibio

25.2.3
Removendo da Exibio
25.2.4
Visibilidade
EP: Exibio vs Visibilidade
25.3 position
25.3.1
static
EP: static
25.3.2
relative
EP: relative
25.3.3
absolute
EP: absolute
25.3.4
fixed
EP: fixed
25.3.5
z-index
EP: z-index
25.3.6
Ancorando Elementos
EP: Ancorando Elementos
25.4 Flutuando Elementos
25.4.1
float
EP: float
25.4.2
clear
EP: clear
25.4.3
Flutuao vs Proximidade
EP: Flutuao vs Proximidade
25.4.4
Clearfix
EP: Clearfix
25.5 Alinhamento
25.6 Centralizando
EP: Centralizando
25.7 Outras Tcnicas
EP: Outras Tcnicas
Captulo 26: Tipos de Layout
26.1 Fixo
EP: Fixo
26.2 Lquido
EP: Lquido
26.3 Hbrido
EP: Hbrido
10
26.4 Responsivo
EP: Responsivo
Captulo 27: Layout Responsivo
27.1 Sobre
27.2 Media Query
27.2.3
Media Type
27.2.4
Media Features
EP: Media Query
27.3 Operadores Lgicos
27.3.1
and
27.3.2
not
27.3.3
only
27.4 Instruo Completa
EP: Operadores Lgicos
11
12
Captulo 1: Web
1.1
Histria
Necessidade de comunicao militar
Internet vem do conceito de computadores globais interligados
Existe o termo intranet o qual refere-se a uma rede de computadores

fechada interligada
1.2
World Wide Web, criado para facilitar a comunicao e integrao na rede
Timeline
60 70: guerra fria d origem s redes
70 80: surge o termo internet
80 90: criadas as grandes redes de computadores
90 00: "boom" world wide web
00 atualmente: web 2.0 e 3.0
13
1.3
Google em 1997
1.4
Camadas
14
1.5
Front-end
Tambm chamado de "client-side"
Na web composto por pginas HTML
+CSS
+JavaScript
+ Recursos adicionais (imagens, fontes, etc)
Sua principal funo e exibir dados e envi-los para o servidor quando

necessrio
1.6
Nunca deve lidar com regras de negcio
Apenas envia e recebe dados atravs de requisies HTTP
No acessa banco de dados diretamente
Baixa segurana
Necessita de um servidor
Hospeda o site
Gerencia as requisies recebidas pelos servios web
Lida com as regras de negcio
Back-end
Disponibiliza os servios web
Lida com as requisies HTTP
Recebe e envia dados
Gerencia as regras de negcio e inteligncia do sistema
Pode integrar-se com outros servidores via servios web
Acessa o banco de dados e efetua sua manipulao
Lista, adiciona, atualiza e apaga registros
15
1.7
Linguagem
Servidor
PHP
Apache
Java
Tomcat, JBoss, GlassFish
.NET / ASP
Windows Server
CFML
ColdFusion
Ruby
Puma, Phusion Passenger
JavaScript
NodeJS
Requsies
HTTP - Hypertext Transfer Protocol
Protocolo de comunicao mais comum na Web
Essencialmente a transmisso de dados ocorre enviando textos
Existem outros protocolos como SSH e FTP
16
Segurana das informaes transferidas baixa
Dados criptografados
Necessrio o uso de certificados digitais
Toda requisio possui "headers"
1.8
Existe a opo de HTTPS para maior segurana
Cabealhos com informaes sobre a requisio e os dados transmitidos
Integraes
Web Services
Permite que o "client" se integre com o "server"
Servidor tambm pode se integrar com outros servidores via servios
A transmisso de dados ocorre atravs de requisies HTTP
Comunicao mantida por alguns instantes
Tempo necessrio para o servidor receber a requisio e enviar a

resposta
"Stateless"
Cada invocao do "client" gera uma nova requisio para o servidor
Servidor no guarda informaes do "client"
Segurana garantida atravs de sesso ou "tokens" enviados na

requisio
Para o "client" no importa o que acontece com a requisio quando recebida

pelo servidor
Qual o sistema operacional do servidor
Quais os recursos de infra estrutura envolvidos
Quantos servidores existem
Quais as camadas de seguranas aplicadas
Qual hardware utilizado
17
EP:
Integraes
1.
Abra o Google Chrome na pgina www.google.com.br
2.
Clique com o boto direito sobre alguma rea vazia
3.
Selecione a opo "Inspecionar Elementos"
4.
Selecione a aba "Network"
5.
Atualize a tela
6.
Perceba os arquivos carregados e o tempo necessrio
7.
Use a barra de rolagem e v para o primeiro item da lista
8.
Clique sobre ele
9.
Na aba "Headers" esto as informaes enviadas da pgina HTML para o

servidor
10.
Identifique a informao "Server" e seu valor
1.8
Domnio
Nome para localizar e identificar conjuntos de computadores na rede
Foi concebido com o objetivo de facilitar a memorizao dos endereos

de computadores na Internet
1.9
Sem ele seria necessrio memorizar uma sequncia de nmeros
Necessrio registrar um endereo para sua utilizao
No Brasil os registros podem ser feitos atravs do registro.br
Registro ".com" pode ser feito pela Verisign
Hospedagem
Contratao de um servidor que conter os arquivos do "site"
O domnio deve estar configurado para apontar para o endereo IP do servidor

de hospedagem
Os arquivos do "site" devem ser colocados na pasta pblica do servidor

18
1.10 Pgina HTML
Exibida quando o endereo do domnio invocado
Contm todos os recursos necessrios para a exibio
Essencialmente deve possuir um arquivo ".html"
Opcionalmente poder conter os arquivos do tipo ".css", ".js", ".jpg",

".png", ".gif", ".woff", ".mp3", ".mp4", etc
1.11 Verses HTML
19
1.12 Verses CSS
1.13 Linguagens de Progamao
Na pgina HTML podem ser usadas as seguintes linguagens de programao:
HTML marcao de texto
CSS estilo do texto marcado com HTML
JavaScript controle e manipulao HTML e CSS
SVG exibio de imagens vetoriais
1.14 Padres HTML
W3C - World Wide Web Consortium
Grupo de empresas fabricantes de software
Mantm HTML desde 1996
Define os rumos do HTML e a padronizao da linguagem
Interpretao igual nos navegadores
20
1.15 Navegadores
IE (Internet Explorer)
Firefox
Opera
Safari
Chrome
EP:
1.
Navegadores
Navegue para os endereos abaixo e verifique as estatsticas:
a. Navegadores
b.
http://www.w3schools.com/browsers/browsers_stats.asp
Telas
c.
http://www.w3schools.com/browsers/browsers_display.asp
Sistema Operacional
http://www.w3schools.com/browsers/browsers_os.asp
1.16 Engines
Interpretam os cdigos HTML, JavaScript, CSS e SVG do documento
Cada navegador pode ter um "engine" diferente
Podem haver diferenas na interpretao
Um "engine" quer ter um diferencial competitivo dentre os demais
21
Engine
Browser
Blink
Chrome e Opera
Webkit
Safari
Gecko
Firefox
Trident
Internet Explorer
1.17 Engines Timeline
22
1.18 Browsers Timeline
1.19 Cross-browser
Cdigo deve funcionar igual em mais de um navegador em mais de uma verso
Principal problema da programao HTML
Preocupao tanto no "desktop" quanto no "mobile"
Flash no possua este problema, pois o interpretador era nico
Cdigo sem interpretao
Verso do navegador pode no suportar as funcionalidades do HTML5
Diferena dos "engines"
Pode "quebrar" o layout de uma pgina, empurrando elementos para fora

da rea visvel do usurio
Necessrio
Identificar o pblico alvo e principal navegador utilizado
Testar em mais de um navegador e mais de uma verso
23
24
Capitulo 2:
2.1
Introduo Linguagem
Editores de Texto e IDE

Editores de Texto
Bloco de notas
Adobe Dreamweaver
Sublime Text
Notepad++
IDEs
Eclipse/Aptana
Webstorm
Netbeans
Cloud
JSFiddle
Codenvy
Koding
Codepen
25
2.2
Sublime Text
Um dos editores mais utilizados pela comunidade de desenvolvedores
Multi plataforma
Windows, Mac e Linux
Leve e verstil com relao as funcionalidades
Para diversas linguagens de programao
Customizvel conforme a necessidade do desenvolvedor
Pacotes podem ser adicionados
Novas funcionalidades estaro disponveis
Enriquecimento dos recursos nativos
Instalao pode ser manual ou automatizada com a ajuda do "Package

Control"
EP:
1.
Sublime Text
Baixe e instale o Sublime Text 3
a.
2.
3.
Busque no Google o endereo
Abra o Sublime e adicione um projeto

a.
Clique no menu superior "Project > Add Folder to Project"
b.
Selecione a pasta do seu projeto
c.
Perceba a barra lateral que se abriu
Baixe e instale o Package Control

a.
Busque no Google por "package control sublime text 3"
b.
Identifique no site a pgina de instalao
c.
Copie o cdigo exibido na tela (ateno para a verso do Sublime)
4.
Abra o Sublime Text 3
5.
Clique no item "View" do menu superior do Sublime
6.
Selecione a opo "Show Console"
7.
Cole o cdigo copiado do site e tecle enter
26
a.
Verifique o andamento da instalao na barra de status no canto inferior

esquerdo do Sublime
8.
Feche a visualizao do console

a.
9.
Repita os passos 5 e 6, porm selecione "Hide Console"
Digite o atalho CTRL + SHIFT + P

a.
No Mac use CMD ao invs de CTRL
b.
Ou use a opo do menu "Tools > Command Pallete"
c.
Uma janela flutuante ser exibida
10.
Digite "install"
11.
Selecione a opo "Package Control: Install Package"

a.
12.
Uma lista com todos os pacotes disponveis para o Sublime ser exibida
Digite "emmet" e selecione a opo com este nome

a.
Perceba a barra de status do Sublime no canto inferior esquerdo com o

andamento da instalao
b.
Alguns pacotes exibem uma mensagem no prprio Sublime quando

terminam a instalao (caso do Emmet)
c.
13.
Veremos as funcionalidades do Emmet posteriormente
Clique com o boto direito do mouse sobre a pasta do projeto na barra lateral e
veja quantas opes existem
14.
Repita os passos de 9 12 e instale o pacote "Sidebar Enhancements"

a.
Aguarde o trmino da instalao
b.
Verifique as novas opes existem quando clicar com o boto direito do

mouse sobre a pasta do projeto
27
2.3
HTML
Hypertext Markup Language
Criada por Tim Berners Lee em 1993
Linguagem de marcao de texto atravs de "tags"
Texto marcado poder ser manipulado por JavaScript e ou estilizado por CSS
2.4
2.5
XHTML
EXtensible Hypertext Markup Language
Definido a partir da verso 4.01 em 2000
Baseada na linguagem XML
Estrutura hierrquica
Mesmas regras de aninhamento
rvore de elementos
Declarados como "tags"
Um elemento pode ou no ter subelementos aninhados
"Branches and leafs"
XML
Serializao de dados bastante comum
Geralmente usada para configurao
Contm dados definidos em forma de "nodes" (ns)

<?xml version="1.0"?>
<hotdog>
<bread>
<sausage>
<sauce>ketchup</sauce>
<sauce>mustard</sauce>
</sausage>
</bread>
</hotdog>
28
2.6
Tags
Estruturas de linguagem de marcao
Existem aproximadamente pouco mais de 100 "tags" HTML5
Outras linguagens tambm usam o conceito de "tags"
XML
IDML
CFML
Elementos do documento HTML
Marcam uma caracterstica
Contedo aninhado dentro destas so vinculadas as caractersticas das

"tags" de abertura e fechamento
2.7
"Case insensitive"
Maioria das "tags" HTML5 tem o par de fechamento

Declarao
Descrio
<!doctype html>
Navegador identificar o tipo do documento
<html></html>
Principal "tag" do documento ("root tag")
<head></head>
Possuir "tags" para configurao do documento

(ttulo, descrio, autor, palavras-chaves, etc)
<body></body>
Praticamente tudo que ser exibido para o usurio na

tela do navegador
29
2.8
Aninhamento das Tags

<!doctype html>
<html>
<head>
<title>Ttulo do Documento</title>
</head>
<body>
Tudo que ser visualizado no navegador
</body>
</html>
2.9
Indentao
A identificao de qual "tag" "pai" ou "filho" essencial para entendimento do
cdigo
Uma das tcnicas usadas para clareza do cdigo a indentao
"Filhos" ficam recuados direita dos pais
"Netos" ("bisnetos" e sucessivamente) ficaro aninhados aos "filhos"
Para a mquina no importa se o cdigo est indentado ou no
Basta apenas estar aninhado corretamento, sem erros de sintaxe
Os cdigos a seguir so exatamente idnticos
2.9.1 Cdigo sem Indentao

<html><head><title>My Title</title></head><body>My
content</body></html>
30
2.9.2 Cdigo com Indentao

<html>
<head>
<title>My Title</title>
</head>
<body>
My content
</body>
</html>
EP:
Tags
1.
Crie um arquivo de nome "basic.html"
2.
Adicione a informao ao navegador do tipo do documento

a.
Deve ser o primeiro cdigo do documento
<!doctype html>
3.
Abaixo da declarao anterior, crie a "root tag" HTML:

<!doctype html>
<html>
</html>
4.
Dentro de <html> aninhe as "tags" <head> e <body>:

a.
Ateno ao aninhamento e a indentao
<!doctype html>
<html>
<head></head>
<body></body>
5.
</html>
Escreva um texto dentro de <body>
31
<!doctype html>
<html>
<head></head>
<body>My first page !</body>
6.
</html>
Salve e teste no navegador
7.
Adicione a "tag" <title> como filha de <head>:

a.
Altere a indentao para melhor leitura do cdigo
<head>
<title>Oh yeah!!!</title>
</head>
8.
Salve e teste novamente no navegador
9.
Altere o texto de <body> adicionando quebras de linhas entre as palavras com a

tecla ENTER:
<body>
My
first
page !
10.
</body>
Salve e teste, verificando se as quebras de linha foram respeitadas
11.
Altere o cdigo colocando tudo em uma nica linha, porm marcando com a
"tag" <br>
<body>My<br> first<br> page !</body>
12.
Repita o ltimo teste
2.10 Comentrios
Comentrios so instrues de cdigo ignoradas pelo interpretador do

32
navegador
So teis para descrever alguma funcionalidade
Comentrio HTML multilinhas
Tudo que estiver dentro das "tags" de abertura e fechamento ser

comentado


<!-Multi line comment...
-->
<!doctype html>
<html>

<head>
<title>Ttulo do Documento</title>
</head>
<body>
Tudo que ser visualizado pelo usurio
</body>
</html>
EP:
1.
2.
Comentrios
Abra o arquivo "basic.html" do EP anterior
Adicione um comentrio mencionando que o HTML respeita o cdigo de
marcao e no a forma como as informaes so dispostas
a. Avalie e identifique o melhor local para colocar seu comentrio
<!-Explique o comportamento da tecla ENTER
33
2.11 Documentao Online
O W3C possui toda a referncia sobre as "tags" HTML e seus atributos
Algumas empresas, como a Mozilla, tambm disponibilizaram uma

documentao HTML prpria
Todas seguem as informaes do W3C
Algumas esto mais atualizadas do que outras
Geralmente so de mais fcil entendimento do que o W3C
Alguns endereos com a documentao sobre as "tags" HTML:

http://www.w3schools.com/tags/default.asp
https://developer.mozilla.org/en-US/docs/Web/HTML/Element
http://msdn.microsoft.com/en-us/library/windows/apps/hh767345.aspx
34
35
Captulo 3:
3.1
Conceito
Cada "tag" HTML considerada um elemento
Um elemento por sua vez pode ser configurado por seus atributos
O exemplo abaixo apenas didtico, mostrando a "assinatura" do cdigo,

pois a "tag" <element> no existe
<element attribute="value">Text</element>
3.2
Elementos
Um documento HTML definido por elementos HTML
Cada elemento faz uma marcao no documento
O contedo do elemento ser marcado pela "tag" que o envolve
Maioria das "tags" sempre so definidas pela de abertura e de

fechamento, mas h excees
Se uma "tag" no contiver a de fechamento, o navegador tentar

interpretar da melhor forma possvel, mas comportamentos estranhos
podem acontecer
Um elemento, pode ter contedo ou no
As que no possuem contedo no precisam ser fechadas no HTML5
Como exemplo, a "tag" <h1> marca o texto com o formato para cabealho
Se no for fechada o formato de cabealho ser aplicado tudo mais que

estiver na sequncia
<h1>My Header</h1>
36
EP:
Elementos
1.
Crie um novo arquivo de nome "elements.html"
2.
Adicione a estrutura HTML essencial:

<!doctype html>
<html>
<body>
</body>
3.
</html>
Dentro da "tag"<body> adicione o seguinte cdigo:
<body>
<h1>My Header</h1>
This is my content
</body>
4.
5.
Remova a "tag" de fechamento </h1>:

<body>
<h1>My Header
This is my content
6.
7.
</body>
Salve, teste e perceba que todo o texto recebeu o formato de cabealho
Desfaa o passo anterior e mantenha a "tag" de fechamento:
<body>
<h1>My Header</h1>
This is my content
</body>
37
3.3
Atributos
Atributos configuram um elemento
Definem valores para que uma "tag" tenha um determinado

comportamento
Os atributos podem variar de "tag" para "tag"
Alguns podem ser comuns, outros podem ser exclusivos
Na documentao HTML possvel identificar e esclarecer o funcionamento de

cada um deles
No exemplo abaixo a "tag" <h1> possui o atributo "align" que configura o estilo
do alinhamento do texto:
<h1 align="center">My Header</h1>
Nota: o atributo "align" est depreciado no HTML5 e deve ser evitado mesmo em verses
anteriores do HTML, uma vez que todo o estilo deve ser aplicado atravs de CSS.
3.4
Atributos Globais
So os atributos que podem ser adicionados a qualquer "tag" HTML
Existem em verses anteriores do HTML e tambm os novos com

funcionamento apenas no HTML5
HTML:
acesskey
class
dir
id
lang
style
tabindex
title
38
3.5
HTML 5:
contenteditable
data-*
draggable
Item
Exemplo
Elemento
Tag
Atributo
Configurao de uma tag
Contedo
Informaes das tags
39
EP:
1.
Navegue para o endereo abaixo e verifique os elementos HTML:
http://www.w3schools.com/tags/ref_byfunc.asp
https://developer.mozilla.org/en-US/docs/Web/HTML/Element
2.
Agora verifique os atributos:

https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes
3.
Finalmente identifique os atributos globais:

http://www.w3schools.com/tags/ref_standardattributes.asp
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes
3.6
Estrutura HTML
Um documento HTML segue um padro estrutural definido pelo W3C, chamado
de DOM - Document Object Model
Esta estrutura define:
Ns de elementos
40
Regras hierrquicas
Acesso e manipulao dos objetos
Todas as "tags" possuem o conceito de "pai" e "filho"

<html>
<body>
<h1>My Header</h1>
</body>
</html>
Child Tags:
<html> tem como filho <body>
<body> tem como filho <h1>
Parent Tags:
<h1> tem como pai <body>
<body> tem como pai <html>
Cada elemento HTML considerado um n ("node")
A hierarquia est definida dentro de uma rvore de elementos HTML ("nodes")
Os pais so chamados de "parent nodes" e os filhos de "child nodes"
A indentao do cdigo fundamental para o entendimento
Um documento HTML deve ter uma estrutura de ns vlidos para que possa ser
exibido corretamente
A estrutura essencial para exibio :
Sendo que o contedo que ser exibido pela pgina sempre fica aninhado
dentro de <body>
Fortemente recomendado o uso de <!doctype html>
<html>
<body>
</body>
</html>
41
Porm muitas vezes desejado configurar mais informaes no documento

HTML
Novas "tags" e novos aninhamentos devem ser feitos
No exemplo a seguir a pgina possuir um ttulo
Maioria das configuraes da pgina ficam dentro de <head>
<html>
<head>
<title>My Page Title</title>
</head>
<body>
My page content...
</body>
</html>
3.7
DOCTYPE
Document Type Definition
Informa ao navegador o tipo do documento a ser renderizado
Deve ser colocada na 1 linha do documento HTML
<!doctype html>
<html>
<head>
<title>My Page Title</title>
</head>
<body>My page content...</body>
</html>
42
EP:
Estrutura HTML
1.
Crie um arquivo de nome "structure.html"
2.
Adicione a estrutura essencial HTML com contedo:

<html>
<body>
My page content...
</body>
3.
4.
</html>
Adicione a instruo "doctype":
<!doctype html>
5.
6.
<html>...
Salve e teste novamente
a. Perceba que nada ocorreu
b. Identifique o ttulo que est sendo exibido na aba do navegador (o nome
do arquivo)
Adicione <head> e <title> dentro de <html>
<!doctype html>
<html>
<head>
</head>...
7.
8.
</html>
Salve e teste, identificado o ttulo na aba do navegador
Volte ao cdigo dentro de <body> e adicione quebras de linha entre as palavras:
<body>
My
page
content...
9.
</body>
Salve e teste
a.
Observe se as quebras foram respeitadas

43
10.
Volte o cdigo da forma inicial e adicione <br>

<body>
My<br>page<br>content...
11.
</body>
Salve e teste
3.8
Tag
Descrio
Contedo do Elemento
<html>
"Root tag" do documento HTML

define continer para a rvore de
elementos DOM
Tudo, exceto outra "tag" HTML
<head>
Inclui o "cabealho" do
documento como ttulo,
metadados, estilos e "scripts"
<body>
Contedo do documento
<title>
<style>
<base>
<link>
<meta>
<script>
<noscript>
Tudo, exceto as anteriores, porm

pode incluir a "tag" de "script"
44
3.9
Interpretao do Navegador
O navegador interpreta o cdigo existente no documento HTML de cima para
baixo
"doctype" informa o tipo de documento a ser interpretado
Navegador comea a fazer o "parse" das "tags" HTML
"Parse" pode ser entendido* como:
Interpretao de todo o cdigo
Execuo das configuraes definidas em <head>
Renderizao do contedo
Nota: sequncia real dos processos diferente da apresentada aqui, a qual tem apelo
apenas didtico.
45
46
Captulo 4:
4.1
Tags de Cabealho
<head>
Aninhada dentro de <html>
Recebe praticamente todas as "tags" de configurao da pgina
Ttulo
Metadados
"Encoding"
Estilo
Script
<!doctype html>
<html>
<head>
</head>
</html>
4.1.1 <title>
Identifica o ttulo da pgina, o qual utilizado para
Janela (ou aba) do navegador
Pgina adicionada aos favoritos
Resultados de busca na Internet
<!doctype html>
<html>
<head>
</head>
</html>
47
4.1.2 <meta>
A "tag" <meta> define os metadados do documento
Aninhada dentro da "tag" <head>
No possui "tag" de fechamento para HTML5
Pode ser utilizada mais de uma vez
Metadados so usados pelo navegador
Conjunto de caracteres usados no contedo ("encoding")
Recarregar a pgina em determinados intervalos de tempo
Tambm so usados por:
Ferramentadas de indexao de "sites" (SEO - Search Engine

Optimization)
Servios na web
Especificam informaes sobre o documento antes da renderizao do contedo
Geralmente so informaes que no sero exibidas na tela
Ex: descrio, autor, palavras chaves, ltima data de modificao
<head>
<meta charset="UTF-8">
<meta name="description" content="Personal Info Page">
<meta name="keywords" content="John, Wayne, movies,
hollywood">
<meta name="author" content="Richard">
</head>
Quando usada para metadados descritivos, possui duas propriedades, "name" e
"content"
Representa o nome da caracterstica e seu valor
O interpretador (seja do navegador, seja do SEO ou qualquer outro)

obter o seguinte resultado: author=John
<meta name="author" content="John">
48
Tambm podem ser configurada com informaes proprietrias
Muito provavelmente, apenas a empresa proprietria conseguir

interpretar a informao
Ex: informaes referentes a configuraes de dispositivos mveis da

Apple
<meta name="meta-apple-mobile-web-app-status-bar-style"
content="black">
4.1.2.1
Valor
author
description
keywords
Atributo name <meta>
Descrio
Nome do autor
<meta name="author" content="My Name">
Descrio da pgina, geralmente utilizado por buscadores na

exibio de seus resultados
<meta name="description" content="My site does">
Lista de palavras chaves separadas por vrgulas, geralmente usado

por buscadores para identificar o contedo da pgina
<meta name="keywords" content="dvd, purchase,
store, movies">
49
EP:
1.
2.
<meta>
Crie um arquivo de nome "meta.html"
Adicione a estrutura bsica HTML, com ttulo:
<!doctype html>
<html>
<head>
<title>Pgina de So Paulo</title>
</head>
3.
</html>
Adicione ainda o texto em <body>:
<body>
So Paulo ganhar uma nova cano...
</body>
4.
Salve e teste
a.
Perceba que os caracteres do ttulo e do corpo no foram exibidos

corretamente
5.
Adicione o seguinte cdigo em <head>:

<meta charset="UTF-8">
6.
Salve e repita o teste

a.
7.
Verifique se os caracteres esto incorretos
Adicione o metadado referente ao autor:

<meta name="author" content="John">
8.
Salve e teste
a.
9.
Perceba que nenhuma mudana visual ocorreu para o usurio
Adicione os demais metadados descritivos:

a.
Descrio
b.
Palavras chaves
50
4.1.2.2
Demais Atributos de <meta>
Atributo
Valor
Descrio
charset
utf-8
Define o "encoding" da pgina
content
Texto
Contedo relativo ao valor utilizado em "name"
http-equiv
content-type
default-style
refresh
Informao do "header" (informao e valor) da

requisio HTTP quando a pgina invocada
pelo navegador
name
application-name
author
description
generator
keywords
Especifica o nome do metadado
51
4.1.2.3
Atributo http-equiv <meta>
Valor
Descrio
Define o "encoding" da pgina, apesar de no estar depreciado

recomenda-se usar a opo "charset" ou invs deste formato
content-type
<meta http-equiv="Content-Type"
content="text/html;charset=utf-8">
refresh
Especifica o intervalo de tempo em segundos no qual o navegador

deve atualizar a pgina
<meta http-equiv="refresh" content="30">
EP:
http-equiv
1.
Crie um arquivo de nome "http_equiv.html"
2.
Adicione a estrutura HTML bsica
3.
Adicione a "tag" <meta> com o seguinte atributo:

4.
Salve e teste
a.
Perceba a atualizao a cada 2 segundos
52
4.1.2.4
Atributo charset <meta>
Define o "encoding" do documento
Permite que os caracteres usado na pgina sejam exibidos corretamente
Conjunto de caracteres de um idioma
Ex: a A
4.1.2.5
Encoding
Conjunto de caracteres
Latinos
Japoneses
rabes
Cirlicos
Evoluo:
ASCII ANSI ISO-8859-1 UTF-8
HTML4 utilizava o ISO-8859-1
Maioria dos pases utilizava o este conjunto de caracteres
Muito similar ao ANSI, que possui 32 caracteres adicionais
HTML5 deve ser usado o UTF-8
Mais abrangente para outros idiomas
Abrange quase todos os caracteres, potuaes e smbolos no mundo
4.1.2.6
ISO e UTF
ISO
International Standards Organization
Organizao que define os conjuntos de caracteres padres para os

diferentes alfabetos
53
EP:
1.
UTF
Unicode Transformation Format
Tem maior utilizao e vem substituindo o ISO
Os primeiros 256 caracteres UTF correspondem aos 256 ISO
Econding
Navegue para o endereo abaixo e verifique os caracteres disponveis para
ASCII
a.
Perceba a pequena quantidade de caracteres disponveis e a ausncia

dos acentuados ( , , etc)
http://www.w3schools.com/charsets/ref_html_ascii.asp
2.
Verifique o valor "Entity Name" do sinal de maior > e menor < para ANSI e para
ISO-8859-1/UTF-8:
http://www.w3schools.com/charsets/ref_html_ansi.asp
http://www.w3schools.com/charsets/ref_html_entities_4.asp
4.1.2.7
Cada conjunto de caracteres define um nmero e um nome para as entidades
Ex: o sinal de maior pode ser escrito atravs do nome da entidade > ou
seu nmero >
A entidade possui a seguinte assinatura:

& + nome + ;
& + # + nmero + ;
54
Seu uso essencial dentro do cdigo HTML quando necessrio usar o sinal de
maior ou de menor
Evita o interpretador confundir com abertura e fechamento de "tags"
<body> <h1></body>
Idealmente deve-se utilizar o nome da entidade ao invs do nmero para facilitar
a leitura do cdigo
<body> <h1></body>
EP:
1.
Crie um novo arquivo de nome "entities.html"
2.
Adicione a estrutura bsica

a.
3.
Lembre-se sempre de utilizar UTF-8 na estrutura bsica
Adicione o seguinte texto em <body>:

<body><h1></body>
4.
Salve e teste, verificando se o texto "<h1>" foi exibido
5.
Altere o cdigo de <body> para:

<body><h1></body>
6.
Salve e repita o teste
7.
Abra a pgina do endereo abaixo

http://www.w3schools.com/charsets/ref_html_entities_4.asp
8.
9.
Adicione os nomes e os smbolos dos naipes de baralho dentro de <body>:

a.
espadas
b.
paus
c.
copas
d.
ouros
Escreva as entidades a seguir e descubra a palavra:

<h1>Coração</h1>
55
4.1.3 <style>
Permite definir as informaes de estilo do documento
CSS Cascading Style Sheets
Define como os elementos devem ser renderizados no documento
<style>
h1 {
color: blue;
}
</style>
Possui dois atributos (alm dos globais):
"media" especifica qual a mdia que ser aplicado o estilo
"type" "mime type"
<style type="text/css" media="print">

h1 {
color: blue;
}
</style>
EP:
<style>
1.
Crie um novo arquivo de nome "style.html"
2.
Adicione a estrutura bsica HTML
3.
Dentro de <body> adicione <h1>:

<h1>My Header</h1>
4.
Salve e teste
a.
Ateno para a cor que est sendo exibida
56
5.
Dentro de <head> adicione uma "tag" <style> com:

<style type="text/css">
h1 {
color: blue;
}
6.
</style>
Salve e teste
7.
Altere a "tag" <style> adicionando o atributo "media":

<style type="text/css" media="print">
h1 {
color: blue;
}
8.
</style>
Salve e teste
a. Imprima a pgina e verifique a cor do texto
4.1.4 <link>
Vincula o documento HTML com outro externo
Carrega um recurso externo, como CSS
Pode ser utilizada mais de uma vez
No possui "tag" de fechamento
<head>
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" type="text/css" href="default.css">
</head>
57
Atributo
Valor
Descrio
href
URL
Especifica o caminho do arquivo externo
media
all
print
Define em qual aparelho a arquivo externo ser exibido
rel
icon
stylesheet
type
text/css
Valor obrigatrio que define qual o relacionamento do

documento com o arquivo externo
Opcional no HTML5, especifica o "MIME type" do arquivo

externo
EP: <link>
1.
Navegue para o endereo abaixo e baixe o cone com o nome "favicon.ico"

a.
Salve em uma pasta apropriada
http://www.favicon.cc/?action=icon&file_id=686403
2.
Crie um novo arquivo de nome "favicon.html"
3.

a.
Coloque o caminho correto como valor de "href"
<link rel="icon" type="image/x-icon" href="favicon.ico">

4.
Salve e teste
a.
5.
Observe o cone ao lado do ttulo da pgina
Crie um novo arquivo de nome "link.css" e "link.html"
58
6.
Adicione o seguinte cdigo CSS e salve o arquivo:

h1 {
color: blue;
}
7.
Volte ao arquivo HTML "link.html"
8.
Adicione a "tag" <h1> em <body>:

<h1>My Header</h1>
9.
Adicione a "tag" <link> em <head>:

<link rel="stylesheet" type="text/css"
href="link.css">
10.
Salve e teste
11.
Adicione o atributo "media":

<link rel="stylesheet" type="text/css"
href="link.css" media="print">
12.
Salve e teste a impresso
4.1.5 <script>
Define o cdigo JavaScript do documento
Pode ser usada como:
Continer para cdigo
Apontar para arquivo JavaScript externo utilizando o atributo "src"
Quando usado o atributo "src" a "tag" deve ser vazia
No possvel apontar para arquivo externo e possui contedo ao

mesmo tempo
Pode ser usado nas "tags" <head> e <body>

59
Recomendado utilizar no final da "tag" <body>
Melhora a performance do carregamento da pgina
Navegador tem menos informao para interpretar antes de exibir a

pgina
Existem casos na qual a biblioteca deve ser carregada na "tag" <head>

para que possa funcionar corretamente
<script>
alert('Hello HTML5');
</script>
<script type="text/javascript" src="code.js"></script>
Atributo
Valor
Descrio
charset
pt-br
Especifica o "encoding" do arquivo externo
src
URL
Especifica o caminho do arquivo externo
type
text/javascript
Opcional no HTML5, especifica o "MIME type" do

arquivo externo
60
EP:
<script>
1.
Crie um arquivo de nome "script.html"
2.
Adicione o seguinte cdigo dentro de <head>:

<script>
</script>
3.
Salve e teste
4.
Crie um novo arquivo de nome "script.js" dentro da mesma pasta que contm o
arquivo "script.html"
5.
Adicione o seguinte cdigo JavaScript:
document.write('<h1>Hello from JS</h1>');

6.
Salve o arquivo e volte para o arquivo HTML "script.html"
7.

<script type="text/javascript"
src="script.js"></script>
8.
Salve e teste
a.
Perceba o texto escrito via JavaScript com a formatao "h1"
61
4.1.6 <noscript>
Define um contedo alternativo para navegadores que foram definidos para no

usarem JavaScript ou no tem suporte a linguagem
Seu contedo ser mostrado apenas nesta condio
Pode ser usado nas "tags" <head> e <body>

<script>
</script>
<noscript>
This site requires JavaScript enabled.
</noscript>
EP:
<noscript>
1.
Crie documento HTML de nome "noscript.html"
2.
Adicione o cdigo em <head>, salve e teste:

<script>alert('Hello HTML5')</script>
<noscript>
This site requires JavaScript enabled.
</noscript>
3.
4.
Desabilite o JavaScript do navegador e este novamente

a.
Abra "Settings" do Google Chrome
b.
Procure por "javascript" no campo de busca das configuraes
c.
Clique em "Content Settings"
d.
Clique em "Do not allow any site to run JavaScript"
Habilite novamente o JavaScript do navegador
62
63
Captulo 5:
5.1
Sobre
So as "tags" que marcam algum contedo
Tags de Exibio
Ser visualizado pelo usurio quando acessar a pgina HTML
Muitas delas possuam atributos de estilo (como alinhamento de texto, cor de

fundo, etc) nas verses anteriores do HTML
5.2
Estes atributos foram depreciados no HTML5
Idealmente, estilos devem ser feitos apenas com CSS
Block & Inline

So as formas mais comuns de exibio HTML
Podem ser modificadas atravs de CSS
Define como o prximo contedo seguinte a tag ser exibido
Na mesma linha e na sequncia aps o fechamento da tag
Prxima linha aps o fechamento da tag
5.2.1 Block
Ocupa toda a largura disponvel, limitado ao seu "parent elment"
Contedo seguinte "tag" estar na prxima linha
5.2.2 Inline
Ocupa somente o espao necessrio para sua exibio
Contedo seguinte "tag" estar na sequncia
64
5.3
<body>
"Corpo" do documento HTML
Continer para quase todos os elementos HTML
Pode conter elementos que sero renderizados na tela ou no
5.4
Principal uso so para elementos a serem exibidos pelo navegador
<h1>...<h6>
Marca contedo que ser exibido como cabealho (ttulo) da pgina
No possui atributos (exceto globais)
Navegadores podem renderizar o texto de forma diferente
Em geral so textos em negrito
Tamanho da fonte varia conforme a "tag" utilizada
EP:
Quanto menor o nmero da "tag" maior o texto
Ex: <h1> tem o tamanho da fonte maior que <h2>
Exibio block
<h1>...<h6>
1.
Crie um novo arquivo de nome "h1.html"
2.
Dentro da "tag" <body> adicione as seguintes "tags":

<h1> My H1 text </h1>
65
3.
5.5
<p>
Define um pargrafo que ser exibido na pgina
nfase pode ser dada combinado outras "tags" com exibio inline:
<strong> negrito
<em> itlico
<small> diminui o texto
Exibio block
<p>
This is a
<strong><em>bold and italic</em></strong> text
</p>
EP:
1.
<p>
No arquivo de nome "paragraph.html" e adicione o seguinte cdigo
<p>My first paragraph.</p>
2.
3.
Adicione nfase no texto "first" adicionando as "tags":

<p>My <strong>first</strong> paragraph.</p>
4.
Salve e teste
5.
Adicione as demais "tags" de nfase no texto "first", testando uma por vez:
a.
<em>
b.
<small>
66
5.6
<span>
Marca algum contedo
No aplica qualquer mudana visual no elemento
Ideal para marcar um contedo que receber um estilo
Pode substituir as tags de nfase, por permitir estilo com maior flexibilidade
5.7
No faz sentido marcar com <strong> e remover o negrito !
Exibio inline
<s>
Marca o elemento que ser tachado
Exibio inline
<s>This text are going to be striked</s>
5.8
<sub>
Marca o elemento que ser subscrito
Exibio inline
<p>This paragraph has <sub>subscripted</sub> text</p>
5.9
<sup>
Marca o elemento que ser elevado
Ex: exibio de raz quadrada
Exibio inline
<p>
This paragraph has
<sup>superscripted</sup> text
</p>
67
5.10 <pre>
Marca o elemento que ser pr formatado
Preserva espaos e quebra de linha
Utiliza a fonte Courier
Exibio inline
<pre> This
text
is
pre
formated
</pre>
EP:
Textos
1.
Crie um arquivo de nome texts.html
2.
Adicione o seguinte contedo, salve e teste:

<p>Paragraph is block display</p>
<span>but span is inline display and the</span>
<span>next content will be placed high after the last
one</span>
3.
Logo abaixo do ltimo cdigo adicione:
<s>This text are going to be striked</s>

<p>This paragraph has <sub>subscripted</sub> text</p>
<p>
This paragraph has
<sup>superscripted</sup> text
</p>
4.
Salve e teste
5.
Finalmente, adicione o cdigo abaixo, salve e teste:

68
<pre> This
text
is
pre
formated
</pre>
5.11 <img>
Usada para carregar imagens no documento HTML
Podem ser recursos locais ou externos
No so tecnicamente inseridas no documento, um "link" e um espao

para exibio so criados
No possui "tag" de fechamento
Exibio inline
Pode receber os atributos de largura e altura
Podem distorcer, serrilhar ou perder qualidade visual da imagem
Se utilizado apenas um dos atributos de tamanho, a imagem manter a

proporo visual
<img src="myImage.jpg" alt="My Image"

height="42" width="42">
69
Atributo
Valor
alt
My text
height
10
src
URL
usemap
#myMapTagId
width
10
EP:
Descrio
Texto alternativo para a imagem exibido antes do

carregamento
Define em "pixels" a altura da imagem
Endereo URL para a imagem
Define as coordenadas das reas clicveis de uma

imagem
Define em "pixels" a largura da imagem
<img>
1.
Crie o arquivo "img.html" com a estrutura bsica
2.
Adicione em <body> a "tag" <img> conforme abaixo:

<img
src="http://lorempixel.com/900/900/food"
3.
alt="Random Food Image">

Salve e teste
a.
4.
Atualize a pgina e perceba a imagem mudando randomicamente
Adicione o atributo de largura e altura com um valor para distorcer a imagem:

a.
A imagem utilizada possui 900 pixels de altura e largura

70
<img
src="http://lorempixel.com/900/900/food"
alt="Random Food Image"
5.
width="500" height="50">
Remova o atributo "height", salve e teste
a.
6.
Repita o teste removendo "width" e mantendo apenas "height"
(Opcional) Adicione em <head> a "tag" <meta> para que a pgina seja

atualizada automaticamente a cada 3 segundos
5.12 <button>
Marca o contedo de que receber a formatao visual e a funcionalidade de um

boto
No recomendado seu uso dentro de um formulrio, devido ao

problema de "cross-browser"
Existem botes especficos para formulrio
Exibio inline
Pode receber texto e imagem
Principal diferena para os botes de formulrio
Apesar de existir o atributo "align", alinhamento deve ser feito via CSS
Apesar de poder utilizar <img> com o boto, mais eficiente aplicar a

imagem como fundo do boto atravs de CSS
<button>Save</button>
<button>
<img src="delete_icon.png">
Delete
</button>
71
EP:
<button>
1.
Crie um arquivo de nome "button.html"
2.
Adicione em <body> o seguinte cdigo:

<button>Save</button>
3.
Salve e teste
4.
Baixe o cone do endereo abaixo na mesma pasta do arquivo "button.html":

http://iconfindr.com/1eWqAml
5.
Renomeie o arquivo para "icon_save_48x48.png"
6.
No arquivo HTML adicione o cone:

<button>
<img src="icon_save_48x48.png">Save
</button>
7.
Salve e teste
8.
Utilize o atributo "width" da imagem e reduza o tamanho do cone para 16 pixels:

<button>
<img src="icon_save_48x48.png" width="16">
Save
</button>
9.
10.
Salve e teste
Utilize o atributo "autofocus" do boto:
a.
Mantenha o cdigo anterior do boto
<button autofocus>
72
11.
12.
Salve e teste
a.
Perceba que o boto recebe foco quando a pgina carregada
b.
Pressione a barra de espaos do seu teclado
Repita o teste com o atributo "disabled" do boto
5.13 Listas
Elementos de lista so bastante teis para criar desde lista simples at menus
Quando estilizados, podem perder os marcadores e ficar na horizontal

para simular um menu
Podem receber qualquer elemento HTML
Podem ter outras "tags" aninhadas para criar uma lista de produtos com
imagens e descrio, tanto na horizontal como vertical, conforme o cdigo
de estilo
HTML possui duas "tags" para estilos
<ol> "ordered list"
<ul> "unordered list"
Cada "tag" define um tipo de marcador diferente
O tipo do marcador por sua vez pode ser definido por estilo
Ex: letras, nmeros, nmeros romanos, etc
Ambas possuem exibio block
73
5.13.1
<ol>
"Ordered List"
Cria uma lista do tipo ordenada
Estilo pode ser numrico, alfabtico ou nmero romano
Decimais - 1,2,3(padro)
Alfabtico - a,b,c(minsculo e maisculo)
Romanos - i, ii, iii...(minsculo e maisculo)
Possui ainda o atributo "reversed" que reverte a numerao
Numerao ser em ordem descendente ao invs de ascendente
No altera a ordem dos itens
5.13.2
<ul>
"Unordered List"
Cria uma lista do tipo desordenada
Estilo podem ser "bullets"
Disco (padro)
Quadrados
Crculo
5.13.3
<li>
"Tag" responsvel por criar o "list item"
Tanto <ol> quanto <ul> devem possuir <li> como "child element"
O tipo do marcador (nmeros, "bullets") definido pelo "parent element"
Se o "pai" for <ul> aparecer "bullets", se for <ol> aparecer numerais
74
EP:
Listas
1.
Crie um novo arquivo de nome "list.html"
2.
Adicione o seguinte cdigo HTML:

<ol>
<li>Ordered Item 1</li>
3.
</ol>
Salve e teste
4.
Adicione o atributo "reversed" em <ol>

<ol reversed>
5.
</ol>
Salve e teste
a.
6.
Perceba que os itens permaneceram na mesma posio
Adicione o cdigo abaixo do anterior:

<ul>
<li>Unordered Item 1</li>
<li>Unordered Item 2</li>
</ul>
7.
Salve e teste
75
5.14 <div>
Continer para seu contedo
No possui qualquer alterao visual
Exceto quando estilizado
Estilos podem ser usados para aplicao de cores, imagens de fundo,

posicionamento e layout
Todo o contedo do elemento acompanhar o posicionamento da <div>

"pai"
Deve-se ter o cuidado de utilizar somente a quantidade necessria
Por no implicar em qualquer mudana visual, comum existirem mais

"divs" do que as necessrias
Eleva o consumo de processamento e memria, principalmente quando a

tela for redimensionada (navegador tem de calcular o posicionamento de
cada elemento)
Geralmente recebem o atributo "id" com os valores "container", "main", "header",

"content", "footer"
EP:
1.
2.
Por serem bastante utilizadas para posicionamento e layout
Exibio block
<div>
Abra o arquivo "list.html"
Envolva <ul> com <div>:
a. Mantenha todo o cdigo anterior de <ul>
<div>
<ul> </ul>
3.
</div>
Salve, teste e verifique se houve alguma mudana visual
76
5.15 <a>
Faz a marcao de ncora
Tanto dentro da prpria pgina, como para uma pgina externa
Seu atributo "target" configura se uma nova pgina (ou aba do navegador) ser
aberta ou no
"_self" na prpria pgina (padro)
"_blank" nova pgina
As cores padro de um "link" so:
Azul no visitado
Violeta visitado
Vermelho ativo (clique ou "tab")
Exibio inline
Atributo
Valor
Descrio
href
URL
#elementId
Endereo externo no qual o "hyperlink" est

direcionando ou "id" de um elemento interno HTML
target
_self
_blank
Especifica onde abrir o documento no qual o "link"

direciona
77
5.15.1
Navegao
O Atributo "href" pode receber o valor de um endereo
Pode ser uma pgina do seu projeto ou uma pgina na Internet
<a href="index.html">Home</a>
<a href="http://www.google.com">Google</a>
5.15.2
ncora
O atributo "href" tambm pode receber o "id" de um elemento HTML na prpria

pgina criando uma ncora
Faz a rolagem (scroll) da pgina at o ponto em que o elemento estiver,

desde que a barra de rolagem esteja presente
Deve ser acompanhado do caractere # com o "id"
Ex: href="#elementId"
<a href="#moreInfo">More Info</a>

...
<p id="moreInfo">More info is here...</p>
5.15.3
target
Especifica onde abrir o documento no qual o "link" direciona
_self no prprio documento
_blank em uma nova pgina (ou aba do navegador)
_parent "parent frame"
_top todo o corpo da janela
"nome do iframe"
78
EP:
<a>
1.
Crie o arquivo de nome "anchor.html" insira o seguinte cdigo
2.
3.
<a href="http://www.google.com">Google</a>
Salve e teste
Adicione o atributo "target" com o valor "_self"
<a href="http://www.google.com"
4.
target="_self">Google</a>
Nenhuma mudana ocorreu pois usamos o padro
5.
Mude o valor de "target" para "_blank":

target="_blank"
6.
Salve e teste
7.
Insira lorem ipsum, aps o cdigo atual, o suficiente para que as barras de
rolagem apaream
8.
Adicione como ltima tag de <body> (antes do fechamento) a tag <p>:

<p id="moreInfo">More info is here...</p>
9.
Como primeira tag de <body> (aps abertura) adicione:

<a href="#moreInfo">More Info</a>
10.
Salve e teste, clicando em More info

a.
11.
Se necessrio, redimensione a janela para gerar barras de rolagem
(Opcional) Faa a ncora reversa

a.
Clicando no final da pgina e rolando para o topo
79
80
Captulo 6: Tags Semnticas
6.1
Sobre
Criadas para uso no HTML5
Navegadores antigos no as reconhecem e simplesmente as ignoram
No recomendado seu uso para aplicao de estilos, posicionamento

ou layout
Permitem a criao de "sites semnticos"
Informam o tipo de contedo existente
Ex: contedo de cabealho do site
Importantes para indexao das ferramentas de busca
Praticamente no possuem nenhuma mudana visual para o usurio
Exceto as "tag" <mark> e <figurecaption>
Dependendo do navegador as demais "tags" podem ficar posicionadas de

forma ligeiramente diferente
6.2
Tags
Tag
Agrupa Informaes
<header>
Cabealho
<nav>
Navegao
81
<section>
Contedos em geral
<article>
Contedos no relacionados pgina
<aside>
<hgroup>
<details>
Barra lateral da pgina, esquerda ou direita (pode conter

outras "tags" semnticas, como <nav>, <article>,
<figure>)
"Tags" de cabealho <h1>...<h6>
Detalhes de algum contedo
<figure>
Imagem de qualquer tipo (grficos, thumbs, fotos, etc)
<figurecaption>
Aninhada dentro de <figure>, exibe informao sobre a

imagem
<footer>
<summary>
Rodap
Sumrio, resumo ou concluso de algum contedo
82
<mark>
Marca o texto (similar a uma caneta marca texto)
<time>
Data, hora, perodo, momento de algum contedo
6.2.1 <header>
"Cabealho" a ser exibido na pgina HTML
Geralmente so usadas "tags" relativas a marcao de "cabealhos"

(<h1...h6>) e a navegao (<nav>)
Utilizado por ferramentas de busca para indexar a pgina
Muitas vezes o logotipo da empresa definido como "background" de

<h1>, para otimizar a indexao da pgina (SEO)
<header>
<h1>My Company</h1>
<nav>...</nav>
</header>
6.2.2 <article>
Define blocos de informaes independentes
Muitas vezes independente do contedo da prpria pgina
Ex: blog, frum, notcias, etc
<article>
<h2>Latest News</h2>
<p>...</p>
</article>
83
6.2.3 <footer>
Bloco de marcao com caractersticas de rodap da pgina
Ex: direitos autorais, desenvolvedor do site, "links" do menu em texto
<footer>
<p>2014 - All rights are reserved</p>
</footer>
6.2.4 <section>
Define a seo de contedos HTML
Geralmente com "tags" semnticas de contedo aninhadas
<section>
<aside>...</aside>
<article>...</article>
<figure>...</figure>
</section>
EP: Tags Semnticas

1.
Crie um novo arquivo de nome "semantics.html"
2.
Adicione o cdigo dentro de <body>:

<h1> This is my header </h1>
<h3> This is my section </h3>
<h6> This is my footer </h6>
3.
Salve, teste e observe o resultado visual da pgina
84
4.
Envolva as "tags" da seguinte forma:

a.
<h1> com <header>
b.
<h3> com <section>
c.
<h6> com <footer>
5.
Salve, teste e verifique se houve alguma mudana visual na pgina
6.
Seu cdigo deve estar similar :

<header>
<h1> This is my header </h1>
</header>
<section>
<h3> This is my section </h3>
</section>
<footer>
<h6> This is my footer </h6>
7.
</footer>
Envolva o contedo de <h3> com <mark> conforme a seguir:
<h3>This is my <mark>section</mark></h3>
8.
Salve e teste
9.
Dentro de <section> e abaixo de <h3> adicione o seguinte cdigo:

<h3>This is my <mark>section</mark></h3>
<figure>
<img src="http://lorempixel.com/200/200/sports/2">
<figurecaption>Surfing on Hawaii</figurecaption>
</figure>
10.
Salve e teste
85
86
Captulo 7:
7.1
Tags de Formulrio
Formulrios
So contineres que possuem algumas funcionalidades embutidas
Usados desde pginas de contados em sites, at aplicaes corporativas

mais robustas
7.2
Geralmente um formulrio envia dados atravs de elementos especiais

chamados de controles ("controls")
Ex: campos de texto, botes, etc
<form>
Tag que conter todos os controls
Lida com os dados inseridos pelo usurio na pgina HTML
<input> a principal tag usada em um formulrio
Conforme o valor do seu atributo type pode se tornar desde um campo

de texto at botes ou mesmo outros tipos de controles
Possui exibio inline
<form>
First name: <input type="text"><br>
Last name: <input type="text"><br>
<input type="reset" value="Reset">
</form>
87
EP: <form>
1.
Crie um novo arquivo de nome form.html
2.
Adicione o seguinte cdigo:

<form>
First name: <input type="text"><br>
Last name: <input type="text"><br>
<input type="reset" value="Reset">
3.
7.3
</form>
Salve e teste
a.
Insira algum valor no formulrio
b.
Pressione o boto Reset
Principais Elementos
<input>
<textarea>
<button>
<select>
<option>
<optgroup>
<fieldset>
<label>
7.4
<input>
Exibio pode variar conforme o atributo "type"
88
Controle no qual o usurio interagir
Se usado dentro de um <form> seus dados so gerenciados por este
Adicionar, alterar ou remover uma informao

Ex: capturados no "submit", apagados no "reset", etc
Seu atributo type especifica o tipo de formulrio e como este parecer

visualmente para o usurio
Atualmente existem pouco mais de 20 tipos diferentes
Todos os tipos so relacionados formulrio
Muitos dos atributos de <input> fazem sentido com o tipo correto
Ex: checked faz sentido (e funciona) apenas com o tipo radio ou

checkbox
Os tipos mais comuns so os j existentes em verses anteriores do HTML:
button
checkbox
file
hidden
image
password
radio
reset
submit
text
89
Atributo
Valor
Tipo
Define
accept
video/*
image/*
file
autocomplete
on
off
Habilita/desabilita a funcionalidade de
autocompletar
autofocus
---
Foco ao elemento quando a pgina

carregar
checked
---
disabled
---
list
datalist_id
text
number
O elemento <datalist> que contm os

valores pr definidos para o <input>
maxlength
text
number
Nmero mximo de caracteres que o

usurio pode inserir
multiple
---
file
Se o usurio pode selecionar mltiplos

arquivos
name
text
Nome do elemento, deve ser o mesmo

usado no servidor quando o formulrio
enviar dados
placeholder
text
text
number
MIME-type do arquivo que ser

carregado
checkbox
Se o elemento estar pr selecionado
radio
Se o elemento estar desabilitado
Dica que mostrada ao usurio antes do

seu preenchimento
90
readonly
---
Impede que o usurio modifique o valor do

elemento
size
text
number
Largura do elemento definido pelo nmero

de caracteres
value
text
Valor do elemento, o qual poder ser

usado no servidor (se submetido)
type
button
checkbox
color
date
datetime
datetime-local
email
file
hidden
Tipo do elemento, se no declarado o

valor padro ser do tipo text
type
image
month
number
password
radio
range
reset
search
submit
tel
text
time
url
week
Tipo do elemento, se no declarado o

valor padro ser do tipo text
EP:
<input>
1.
Abra o arquivo form.html
2.
Adicione antes do boto, o <input> do tipo password:

Password: <input type="password"><br>
91
3.
Salve e teste
a.
4.
Digite qualquer valor neste campo
Aps o ltimo cdigo, adicione o tipo file:

Select a file: <input type="file"><br>
5.
Salve e teste
6.
Adicione o atributo multiple no <input> tipo file
7.
Salve e teste
a.
8.
Verifique a mltipla seleo
Adicione o atributo accept no <input> tipo file:

<input type="file"
accept="image/*" multiple><br>
9.
Salve e teste
a.
Tente selecionar um arquivo diferente de imagem
b.
(Opcional) Aplique o filtro para aceitar apenas imagens jpg
c.
(Opcional) Crie uma nova tag com filtro para arquivo pdf
10.
Adicione um novo <input> do tipo checkbox:
11.
<input type="checkbox">Send me spam<br>

Salve e teste
12.
Adicione o atributo checked ao <input>:

<input type="checkbox" checked>
13.
Send me spam<br>
Salve e teste
14.
Adicione dois novos <input> do tipo radio:

<input type="radio">I am a man<br>
<input type="radio">I am a woman<br>
15.
Salve e teste
a.
16.
Tente selecionar ambos os <input>
Adicione o atributo name com o mesmo valor para os <input> do tipo radio:
92
<input type="radio" name="gender">

I am a man<br>
<input type="radio" name="gender">
I am a woman<br>
17.
18.
Salve e teste
a. Tente novamente selecionar ambos os <input>
Adicione o atributo placeholder no <input>:
First name:
<input type="text" placeholder="first name">
19.
Salve e teste
20.
Adicione tambm o atributo title:

a.
Faa o mesmo para os demais <input> de texto
<input placeholder="first name"

title="Insert your name">
21.
Salve e teste
a.
Mantenha o ponteiro do mouse sobre o campo para visualizar o valor do

atributo title
22.
Crie um novo <input> de texto com o atributo value:

Input with value:
<input value="This is a value"
placeholder="some text..."><br>
23.
Salve e teste
a.
Perceba que value sobrescreve placeholder
b.
Na pgina HTML, apague o valor do <input> e perceba que o valor do

placeholder aparecer
93
24.
Adicione outro <input> com o atributo readonly:

Read only input:
<input value="Change me!" readonly><br>
25.
Salve e teste
a.
26.
Tente inserir um novo valor no <input>
Adicione outro <input> com o atributo disabled:

Disabled input:
<input value="Change me!" disabled><br>
27.
Salve e teste
a.
Note a diferena entre readonly e disabled
b.
(Opcional) Coloque como valor de title com o texto readonly e

disabled respectivamente em cada <input>
28.
Adicione um novo <input> com o atributo maxlength:

Max length input:
<input maxlength="3" title="3 only !!!"
29.
30.
placeholder="Just 3 characters allowed"><br>

Salve e teste
a.
Tente adicionar mais de 3 caracteres no campo
b.
Perceba que o valor de placeholder possui mais de 3 caracteres
Adicione o atributo size no <input> maxlength:

<input size="3">
31.
Salve e teste
a.
Perceba que o texto do placeholder no est visvel
32.
Adicione o atributo autofocus no primeiro <input>
33.
Salve e teste
a.
Perceba que o <input> est com foco e pronto para a digitao
94
7.5
<label>
Utilizada em conjunto com a "tag" <input>
Quando o usurio clica no texto da "tag" o <input> selecionado
Auxilia na usabilidade do usurio
O atributo "for" deve fazer referncia ao valor do "id" da "tag" <input>
<label for="firstName">First name:</label>

<input type="text" id="firstName">
EP: <label>
1.
Volte ao arquivo "form.html"
2.
Adicione o atributo "id" s "tags" <input>
3.
Envolva os textos ao lado das "tags" <input> com <label>

a.
Atributo "for" deve ter o mesmo valor do atributo "id" da "tag" <input>

<input id="firstName" type="text"><br>
<label for="lastName">Last name:</label>
<input id="lastName" type="text"><br>
4.
Salve e teste
a.
Clique exatamente sobre a palavra dentro de <label> e perceba o foco no

<input>
95
7.6
<select>
Cria um elemento com lista de itens para seleo do usurio
O atributo multiple permite selecionar mltiplos itens
Altera visualmente o elemento
A tag <option> define os itens do elemento
Deve estar aninhada dentro de <select>
<select>
<option>Item 1</option>
</select>
EP:
1.
<select>
Abra o arquivo form.html e adicione:
<label for="options">Options:</label>
<select id="options">
2.
3.
</select>
Salve e teste
Adicione o atributo multiple:
<select id="options" multiple>
4.
Salve e teste
a.
Utilize a tecla CTRL e selecione mais de um elemento
96
7.7
<textarea>
Elemento para insero de texto
Similar ao <input> porm para mltiplas linhas
Possui muitos dos atributos de <input> do tipo texto
Principais atributos so:
cols largura
row altura
<textarea rows="2" cols="10">

Default value
</textarea>
EP:
1.
<textarea>
Abra o arquivo form.html e adicione:
<label for="description">Description:</label>
<textarea id="description"
rows="2" cols="10">
Default value
</textarea>
2.
Salve e teste
97
7.8
<fieldset>
Agrupa elementos relacionados em um <form>
Desenha um quadrado em volta dos seus elementos
O elemento <legend> adiciona um "ttulo" na linha do quadrado desenhado

<form>
<fieldset>
<legend>My Form</legend>
<input type="text" id="firstName">
</fieldset>
</form>
EP:
1.
<fieldset>
No arquivo "form.html" adicione logo aps <form> a "tag" <fieldset> com
fechamento antes de </form>
<form>
<fieldset>
</fieldset>
2.
</form>
Salve e teste
3.
Adicione a "tag" <legend> dentro de <fieldset>:

<fieldset>
<legend>My Form</legend>
4.
</fieldset>
98
99
Captulo 8:
8.1
Novos Tipos
HTML5 define novos tipos para <input>
Alguns modificam visualmente o elemento
Novos Tipos de Formulrio
Deve-se ter um cuidado maior com o problema de "cross-browser",
A exibio incorreta pode comprometer a experincia do usurio
Podem validar o valor do campo conforme seu tipo
Geralmente antes do envio dos dados do formulrio para o servidor
Tipo
Suporte
Define
color
Elemento para seleo de cor ("color picker")
date
Controle de data com ano, ms e dia (sem horrio)
datetime
Similar ao tipo "date", porm com controle

adicional para horrio (hora, minuto, segundo) com
base na zona de horrio UTC
datetime-local
Similar ao tipo "date", porm com base no horrio

UTC
email
Elemento para insero de email
month
Similar ao tipo "date", porm par ms e ano
100
Elemento para insero de nmero com

botes internos para aumentar e reduzir o
valor
number
range
Elemento para a definio de valor

("slider")
search
Elemento para insero de texto, auxiliado

por boto interno para apagar o valor
inserido
tel
---
time
Elemento para insero de hora
url
Elemento para insero de URL

Similar ao tipo "date", porm para semana
e ano
week
8.2
Elemento para insero de nmero

telefnico

"Cross-browser" ainda bastante limitado
Mesmo para navegadores modernos
Navegadores antigos ignoram o novo tipo renderizando o padro texto
Dependendo do caso, em produo, o recomendvel utilizar jQuery UI

ou biblioteca similar
Tipos que no tem grande interferncia visual no elemento podem ser usados
sem maiores problemas
Mesmo que for exibido como tipo texto, no impedir (ou atrapalhar) o
usurio de interagir com o elemento
Ex: tipos "email", "search", "tel", etc
101
8.3
Vantagens do Uso
O uso dos novos tipos auxilia na interao do usurio com o elemento
No caso de dispositivos mveis, o tipo do teclado do dispositivo exibido

ao usurio muda conforme o tipo do <input>
Ex: tipo "email" abre o teclado com teclas que facilitam a insero do
email (ponto, arroba, etc)
EP:
Novos Tipos
1.
Crie um novo arquivo de nome "form_new_types.html"
2.
Adicione a "tag" <form>
3.
Dentro de <form> adicione o seguinte cdigo:

<fieldset>
<legend>Date & Time</legend>
4.
</fieldset>
Abaixo de <legend> adicione os tipos de datas:
<label for="date">Date:</label>
<input type="date" id="date"><br>
<label for="datetime">Date Time:</label>
<input type="datetime" id="datetime"><br>
<label for="datetimelocal">Date Time Local:</label>
<input type="datetime-local" id="datetimelocal"><br>
<label for="time">Time:</label>
<input type="time" id="time"><br>
102
<label for="week">Week:</label>
<input type="week" id="week"><br>
<label for="month">Month:</label>
5.
<input type="month" id="month"><br>

Salve e teste
a.
Abra tambm com outros navegadores alm do Chrome e verifique se a

visualizao a mesma
6.
Adicione mais um conjunto de "tags" dentro de <form>:

<fieldset>
<legend>Numerics:</legend>
7.
</fieldset>
Dentro de <fieldset> adicione:
<label for="number">Number:</label>
<input type="number" id="number"><br>
<label for="range">Range:</label>
<input type="range" id="range"><br>
<label for="tel">Telephone:</label>
8.
<input type="tel" id="tel"><br>

Salve e teste
9.
Adicione mais um conjunto de "tags" dentro de <form>:

<fieldset>
<legend>Others:</legend>
</fieldset>
103
10.

<label for="email">E-Mail:</label>
<input type="email" id="email"><br>
<label for="url">URL:</label>
<input type="url" id="url"><br>
11.

<label for="search">Search:</label>
<input type="search" id="search"><br>
<label for="color">Color:</label>
<input type="color" id="color"><br>
12.
Salve e teste
104
105
Captulo 9:
9.1
Front-end & Back-end

So camadas que se integram atravs de requisio
Conceitos de Requisies HTTP
Geralmente requisio HTTP - Hypertext Transfer Protocol
Pgina HTML faz uma requisio para um endereo vlido no qual o servidor
responde
Pode retornar desde uma pgina HTML ou apenas dados
O servidor deve estar adequadamente configurado e preparado para

receber a requisio
9.2
Cada camada tem seu papel bem definido e distinto
Front-end envia, recebe e exibe os dados do server
Back-end processa e retorna os dados processados para o client
Os papis de cada camada nunca devem ser invertidos
Front-end gerencia a exibio dos dados
Back-end gerencia as regras de negcios
Requisio
Transmisso de dados entre a pgina HTML e o servidor
Os dados so enviados como texto
Cada requisio envia informaes adicionais no header
Toda vez que uma pgina invocada dados so enviados e recebidos,

independente de um formulrio ter sido submetido
106
9.3
Header
9.4
URL Encoding
Dados so convertidos automaticamente para o formato ASCII
Somente este formato aceito na transmisso
Diferente do encoding da pgina, a qual exibe os dados para o usurio
Caracteres no seguros so convertidos utilizando:

% + hexadecimal
Ex: So Paulo
Header S%C3%A3o%20Paulo
URLSo%20Paulo
107
EP:
1.
URL Encoding
Abra o endereo abaixo:
http://www.url-encode-decode.com/
2.
Digite o texto So Paulo e clique no boto Url Encode

a.
9.5
Observe o resultado
Servios
Servidores configurados para receber e processar os dados da requisio
Os principais tipos de webservices so:
RPC - Remote Procedure Call
SOAP - Simple Object Access Protocol
REST - Representational State Transfer
108
9.6
Caixa Preta
O client no deve ter informaes especficas ou detalhadas do server
Apenas configuraes essenciais devem existir para o client:
9.7
Endereo
Mtodo
Nome para os parmetros
Para o client no importa a infra estrutura usada
Quantidade de mquinas
Camadas
Linguagem de programao
Sistema operacional
REST
Servio Web bastante comum e utilizado atualmente
Estilo de arquitetura
Sistemas que seguem os princpios REST so chamados de RESTful
Efetua uma operao com base em uma ao
Ao deve resultar em um estado final
Como (se presume) que a aplicao se comportar a seguir, ou o estado

no qual se encontrar aps a ao
109
9.8
Mtodos
So verbos de aes para uma requisio HTTP
Enviados no header da requisio HTTP
Em REST, representam o estado final no qual a ao resultar
Podem representar manipulaes de CRUD
Create
Read
Update
Delete
Mtodo
GET
Obtm valor(es)
HEAD
Obtm apenas o cabealho (header) da requisio
POST
Adiciona valor(es)
PUT
Atualiza valor(es)
PATCH
Atualiza valor(es)
DELETE
Apaga valor(es)
OPTIONS
Utilizao
Retorna os mtodos HTTP disponveis
Tecnicamente qualquer mtodo pode ser usado para transmitir ou receber dados
Porm o servidor que estiver configurado adequadamente, seguindo a

arquitetura REST, utilizar a ao invocada pelo mtodo para executar
algum procedimento
Ex: requisio com o mtodo DELETE apagar o registro
110
9.9
GET
Efetua a requisio transmitindo dados pela URL
nico mtodo que utiliza URL
Os dados podem ser visualizados e manipulados pelo usurio
Dados so enviados no formato nome e valor
Essencialmente tem o objetivo de obter dados
Mas muitas vezes utilizada para outras aes em sistemas que no

seguem a arquitetura REST (no recomendado)
Caracteriza-se por:
Permitir salvar a URL como favorito
Manter a URL (requisio) no histrico de navegao
Possui restrio de tamanho da URL (cerca de 3000 caracteres)
Os dados transmitidos tem a seguinte assinatura:

...url/server_pag.ext?name1=value1&name2=value2
Item
Exemplo
Descrio
server_pag.ext
search.php
list.jsp?category=dvd
Separador do endereo da
pgina do servidor e o(s)
parmetro(s) enviado(s)
name1=value1
item=dvd
Nome da propriedade e seu

valor enviado como
parmetro
&
product.asp?category=dvd&id=123
Separador de parmetros
(quando existir mais de um)
Endereo da pgina do
servidor
111
EP:
GET
1.
Abra o endereo www.google.com.br
2.
Digite no campo de buscas a palavra restful
3.
Observe a URL gerada
4.
Identifique o parmetro digitado na URL

a.
5.
Analise tambm os demais parmetros enviados na requisio
Modifique o parmetro na URL para html5

a.
No utilize o campo de buscas, modifique no campo de endereos do

navegador
b.
6.
Perceba a alterao da busca
(Opcional) Navegue para um site de compras tradicional na Web

a.
Navegue por alguma categoria existente como dvd
b.
Observe a URL gerada e os parmetros enviados
9.10 POST
Mtodo que permite o envio de dados sem utilizar a URL do navegador
Mais segura para o envio de dados
Porm pode a requisio e os dados transmitidos podem ser capturados

e manipulados com alguns softwares comuns
Essencialmente deve ser utilizada para inserir dados
Se o servio no seguir os princpios REST tambm pode ser usada para

atualizar e ou apagar dados
Caracteriza-se por:
No permite a manipulao direta e explcita do usurio
No permite armazenar a chamada nos favoritos ou no histrico
No possui problemas com relao a quantidade de parmetros enviados
112
9.11 Segurana
Nenhuma requisio tem algum mecanismo prprio de segurana
Para maior segurana recomenda-se o uso de HTTPS
Conexo criptografada com protocolo SSL/TLS (camada de segurana)
Utiliza certificados digitais para verificar a autenticidade do cliente e

servidor
Porta padro utilizada pelo navegador a 443
9.12 Ferramentas
Existem muitas ferramentas que permitem inspecionar um requisio
So bastante teis para o desenvolvimento e depurao da requisio
As mais comuns so:
Google Chrome/Network recurso disponvel como parte do Chrome

Developer Tools
Advanced Rest Client Extenso para o Google Chrome
Charles Proxy software instalado na mquina
113
114
Captulo 10:
Formulrios HTML
10.1 Mtodos vs Formulrios
O formulrio HTML suporta apenas os mtodos GET e POST
Utilizando Ajax, possvel efetuar requisies com outros mtodos
HTML5 previa suporte para PUT e DELETE, mas foram cancelados
Alguns navegadores em verses especficas fizeram algumas implementaes

para mais mtodos
No recomendado, por ser especfico e por gerar dependncia
10.2 Objeto do Formulrio
Os dados do formulrio so enviados atravs de um objeto criado

automaticamente por <form>
Objeto criado automaticamente quando existir um <input> do tipo

submit e o usurio clicar no boto
Os dados so enviados para o caminho configurado no atributo action

da tag <form> utilizando o mtodo definido
<form action="form.jsp" method="post">
Formulrio deve estar configurado adequadamente com o atributo name com

valor esperado pelo servidor
O atributo name ser usado como nome do parmetro e seu valor ser
o dado inserido pelo usurio no formulrio
115
<form action="form.jsp" method="get">

First name: <input type="text" name="firstName">
Last name: <input type="text" name="lastName">
<input type="submit" value="Submit">
</form>
url/form.jsp?firstName=John&lastName=Wayne
10.3 <form>
Atributo
Valor
action
URL
autocomplete
on
off
method
get
post
name
myFormName
Descrio
Caminho no qual os dados sero submetidos
Especifica se um formulrio pode ter a

funcionalidade de autocompletar do navegador
Mtodo HTTP no qual os dados sero submetidos
Nome do formulrio
116
novalidate
---
target
_blank
_self
Formulrio no deve ser validado quando

submetido
Especifica onde a resposta ser exibida aps

submisso
10.4 method
Configura como o formulrio enviar os dados
Servidor deve estar configurado para receber os dados utilizando um dos

mtodos
Os verbos de ao suportados pelo formulrio so:
GET
POST
10.5 name
Atributo no qual utilizado para enviar os dados ao servidor
Servidor deve estar configurado adequadamente para receber os dados
Com valor correto do atributo "name" e mtodo adequado de envio
Seu valor deve ser o mesmo usado no servidor
Se os valores forem diferentes no funcionar
117
EP:
Objeto do Formulrio
1.
Crie o arquivo de nome "form_submit.html"
2.
Adicione a "tag" <form>:

<form></form>
3.
Dentro dela adicione duas "tags" <input>:

First name:
<input type="text" name="fname"><br>
Last name:
<input type="text" name="lname"><br>
4.
Salve e teste
5.
Ainda dentro da "tag" <form> adicione o boto para enviar os dados:
6.
<input type="submit" value="Send">

a.
Perceba que ao clicar no boto a URL muda e os valores do atributo

"name" so utilizados na URL pelo mtodo padro GET
7.
Adicione o seguinte atributo "tag" <form>:
8.
action="http://httpbin.org/get"
<form action="http://httpbin.org/get">
First name: <input type="text" name="firstName"><br>
Last name: <input type="text" name="lastName"><br>
<input type="submit" value="Send">
9.
</form>
Abra o Chrome Developer Tools e verifique os dados enviados
a.
Antes de enviar abra a ferramenta
b.
Entre na aba Network
c.
Adicione as informaes no formulrio e clique para enviar
118
d.
Clique no primeiro item (arquivo) de nome get
e.
Clique na sub aba Headers e verifique os dados em Query String

Parameters
10.
Altere os atributos de <form> para:

<form action="http://httpbin.org/post" method="post">
11.
Salve e teste
a.
Faa o mesmo teste anterior usando o Chrome Developer Tools
119
120
Captulo 11:
Validao
11.1 Papel do Front-end
Responsvel pela exibio de dados
Recebe e envia dados
Ex: exibir lista de produtos com valor e descrio
Opcionalmente, pode ajudar na validao de algum campo para evitar a

requisio
Diminui o trfego de dados e a quantidade de requisies para o servidor

lidar
Ex: validar se um campo foi preenchido
Deve possuir cdigo que gerencie apenas a visualizao dos dados e nunca
regras de negcio ou inteligncia do sistema
Facilmente manipulvel e passvel de ataque
Ex: nunca verificar se o usurio e senha esto corretos
Nunca acessa banco de dados diretamente, requer servidor para isso
11.2 Papel do Back-end
Gerencia os dados enviados e transmitidos para o front-end
Deve possuir toda a inteligncia do sistema
Sempre validar os dados, mesmo que a validao tenha sido aplicada

no front-end
Persistncia dos dados geralmente ocorre em um banco de dados
Garante a integridade dos dados e consequentemente do sistema

Somente o back-end tem acesso ao banco de dados
Opcionalmente pode se integrar com um ou mais servidores terceiros
Permite a integrao entre sistemas
121
11.3 Validao
Processo de validao importante para reduzir o trfego desnecessrio de

dados na rede
Opcional no front-end e obrigatrio no back-end
No faz sentido gerar uma requisio para o servidor para identificar se um

campo foi preenchido ou no
11.3.1
Gera consumo de recursos desnecessrios
Validaes mais Comuns
Tipo
Campo
obrigatrio
Validao
Se o campo foi preenchido pelo usurio
Email
Usurio inseriu uma informao de email, como utilizao do

caractere arroba, se a palavra contm caracteres vlidos para
email, se fez uso de .com
Nmero
Se o valor inserido um nmero, podendo ainda verificar se o

valor est dentro de um limite mximo e mnimo, ou ainda se
inteiro ou real
Nmeros
especficos
Seleo
Se o valor preenchido contm o dado desejado, como data,

CPF, cep, telefone, etc
Um item da lista foi selecionado (<select>) ou ainda se o usurio
escolheu uma opo (<input> tipo radio e checkbox)
Nota: usando como exemplo o tipo email, perceba que no feita a verificao real se o
email existe ou no, isso inteligncia do sistema e deve ser feita pelo servidor, porm
verificado se o valor digitado um email, ou seja, possui o caractere @ e .com no texto
inserido pelo usurio.
122
11.3.2
Validao HTML5
Os formulrios do HTML5 permitem fazer uma validao simples
Seu uso recomendado apenas para formulrios simples que sejam

visualizados em navegadores modernos
Ainda assim existem alguns navegadores modernos e atuais que no

suportam alguns tipos de validao
Recurso nativo do HTML5
No necessita de cdigo JavaScript
Tem escopo limitado e reduzido
Validao do formulrio ocorre com base no tipo do <input> utilizado e ou em

sua configurao
Se utilizado um tipo email apenas valores que contiverem um e-mail

sero aceitos na validao
Os dados so validados no momento em que o usurio clica no <input> do tipo

submit
<form> possui o atributo novalidate que controla se todo o formulrio

ser ou no validado
<input> possui o atributo formnovalidate que controla se apenas este

elemento ser ou no validado
<form>
<input type="email">
<input type="number" min="1" max="5">
<input type="date">
<input type="text" required>
<input type="text" pattern="[A-Za-z]{2}>
<input type="submit">
</form>
123
11.3.2.1
Atributos de Validao
Atributo
Valor
Tipo
formnovalid
ate
---
submit
Formulrio no ser validado
pattern
[0-9]{2}
text
number
Expresso regular que ser usada na validao

do formulrio
required
---
max/min
number
date
11.3.2.2
Define
Valida se o elemento foi preenchido (ou

selecionado) no envio do formulrio
Verifica se o valor inserido est dentro do(s)

limite(s) imposto(s) pelo(s) atributo(s)
Tipos que Validam
Os principais tipos que efetuam validao so:
tel
email
date
search
Muitos dos novos tipos so visualmente similares ao tipo text
Diferem na forma como o usurio interage, principalmente em mobile
Ex: quando o usurio interage como elemento do tipo email com um

tablet ou celular, o teclado aparece com os elementos para facilitar a
digitao do email (@, .com, etc)
124
EP:
Validao
1.
Crie um novo arquivo de nome form_validation.html
2.
Adicione a tag <form> sem nenhuma configurao
3.
Dentro dela adicione os seguintes <input> do tipo:

<input type="email"><br>
<input type="number"><br>
<input type="date"><br>
<input type="submit">
4.
Salve e teste
a.
Verifique quais dos elementos visualmente igual ao tipo text
b.
Ainda com o formulrio vazio, clique no boto submit e verifique se a

validao ocorre
c.
Preencha o campo do e-mail com um valor parcial e clique no boto

submit
i.
Continue preenchendo e validando este campo at que um email

seja inserido
d.
5.
Preencha o campo do tipo number com uma letra e valide o formulrio
Adicione a seguinte configurao para o tipo number:

<input type="number" min="1" max="5">
6.
Salve e teste
a.
Insira valores menores e maiores que os determinados pelos atributos

min e max e valide o formulrio
7.
Repita a configurao para o tipo date:

<input type="date"
min="2000-12-26" max="2000-12-31">
8.
Salve e teste
a.
Tente inserir uma data anterior ou posterior a definida

125
9.
Adicione um novo elemento obrigatrio dentro do formulrio:

<input type="text" required>
10.
11.
Salve e teste
a.
Deixe o novo elemento sem nenhum valor e valide o formulrio
b.
Adicione o atributo required para outros campos e repita o teste
Insira um novo elemento com validao de expresso regular (regex):

a.
A expresso verifica se o valor inserido uma letra (maiscula ou

minscula) e se existem dois caracteres
<input type="text" pattern="[A-Za-z]{2}">

12.
Salve e teste
a.
13.
Insira nmeros ou mais e menos de duas letras
No elemento submit adicione o atributo formnovalidate:

<input type="submit" formnovalidate>
14.
Salve e teste
a.
11.3.2.3
Customizao
Modificao dos textos das mensagens pode ocorrer com o uso de JavaScript
Verifique se o formulrio continua sendo validado
Atualmente apenas o Google Chrome permite a modificao
Estilo das mensagens diferente de navegador para navegador
Usa recursos visuais do prprio navegador para exibir as mensagens
Atualmente no possvel modificar o estilo das mensagens
126
127
Captulo 12:
Recursos Externos
12.1 <object>
Define um objeto que ser embutido no arquivo HTML
udio
Vdeo
PDF
Flash
HTML
Declarada dentro da "tag" <body>
Possvel definir um texto alternativo como contedo do elemento
Nas verses HTML anteriores aparecia em <head>

Exibido caso o navegador no tenha suporte para o arquivo embutido
Necessrio definir ao menos um dos atributos:
data endereo do arquivo a ser embutido
type MIME-type do arquivo
<!doctype html>
<html>
<body>
<object width="400" height="400" data="banner.swf">
Your browser does not support embed objects.
</object>
</body>
</html>
128
Atributo
Valor
data
URL
Endereo do objeto a ser embutido
height
200
Valor em "pixels" da altura
type
text/html
width
150
EP:
Descrio
Especifica o MIME-type do objeto a ser embutido
Valor em "pixels" da largura
<object>
1.
Crie um arquivo com nome embeds.html
2.
Baixe o arquivo na mesma pasta do arquivo HTML:

http://www.w3.org/TR/1998/REC-html40-19980424/html40.pdf
3.
Adicione o seguinte cdigo, salve e teste:

<h1><object></h1>
<object data="html40.pdf" type="application/pdf"
width="100%" height="800">
Your browser does not support embeded objects.
</object>
129
12.2 <embed>
Define um continer para uma "aplicao" externa ou contedo interativo de um

"plugin"
Disponibilizada oficialmente no HTML5
Existia em verses anteriores do HTML, apesar de no fazer parte da

especificao do HTML
Maioria dos navegadores a suporta, mesmo os antigos
Importa o arquivo externo para o documento HTML

<!doctype html>
<html>
<body>
<embed src="helloworld.swf">
</body>
</html>
Atributo
Valor
Descrio
height
200
source
URL
Endereo do contedo a ser embutido
type
text/html
width
150
Especifica o MIME-type do objeto a ser embutido
130
EP:
<embed>
1.
Abra o arquivo "embeds.html"
2.
Adicione o seguinte cdigo (abaixo do anterior):

<h1><embed></h1>
<embed
src="html40.pdf"
type="application/pdf"
3.
Salve e teste
12.3 <iframe>
Embuti outro documento dentro da pgina HTML
Bastante comum seu uso com outros arquivos HTML
Uso deve ser moderado pois:
Dificulta o acesso e troca de informaes entre as pginas com

JavaScript
Estilizao por CSS pode ser bastante trabalhosa
Permite colocar texto como contedo do elemento caso o navegador no tenha

suporte
<!doctype html>
<html>
<body>
<iframe src="http://www.google.com.br">
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
131
Atributo
Valor
height
200
width
150
name
myName
seamless
---
src
URL
EP:
1.
Descrio
Nome do elemento
Especifica que o contedo deve ser parte visual da

pgina que o carregou
Endereo do contedo a ser embutido
<iframe>
Abra o arquivo "embeds.html", adicione:
<h1><iframe></h1>
<iframe src="html40.pdf" type="application/pdf"
Your browser does not support embeded objects.
</iframe>
2.
Salve e teste
132
12.4 Consideraes
Estas tags permitem carregar outros arquivos HTML
Estes arquivos podem funcionar inteiramente ou parcialmente
Depende da tag utilizada para carreg-lo
No caso de <iframe> existem restries de segurana que podem ser

aplicadas, como permisso para rodar scripts ou mesmo submeter
formulrios
No h limites para aninhamentos
No caso de <iframe> uma pgina pode carregar outra de um domnio

diferente e assim por diante
Eleva o risco de segurana e controle de contedo
Muitas mdias sociais disponibilizam contedos que podem ser atribudos na

pgina com uma das tags
Integrao pode ser complexa ou invivel
Aplicao de estilos pode ser mais trabalhosa
Integrao com JavaScript entre as pginas
A indexao da pgina no funciona adequadamente
Algumas vezes todas as formas esto disponveis
Sites de busca no avaliam o contedo embutido
A pgina embutida pode exibir contedo completamente diferente do previsto na

pgina
Tambm possvel embutir outras pginas utilizando JavaScript
Muitas mdias sociais tambm oferecem esta opo
Tambm podem facilitar a manuteno
Possvel utilizar um cdigo HTML para cabealho e rodap, carregando

apenas seu contedo nas pginas desejadas
Se for necesria alguma alterao, basta modificar o arquivo carregado e

todas as pginas sero atualizadas
133
EP:
Consideraes
1.
Crie um novo arquivo de nome header.html
2.
Crie a estrutura bsica, adicione <h1>:

<h1>My Page Header</h1>
3.
Crie um novo arquivo de nome footer.html com:

<h6>My page footer</h6>
4.
Salve ambos os arquivos
5.
Crie um terceiro arquivo de nome index.html
6.
Adicione as tags <iframe> carregando header.html e footer.html
7.
Entre elas adicione o seguinte contedo

<h3>My index page content</h3>
8.
Salve e teste
9.
Crie mais duas pginas com os nomes:

a.
about.html
b.
contact.html
10.
Repita os passos 6 8 e coloque o respectivo contedo em <h3>
11.
Salve e teste
12.
Altere o contedo de header.html para:

<h1>Changed Header</h1>
13.
Salve e verifique as pginas criadas (index, about e contact)
134
135
Captulo 13:
Mdias HTML5
13.1 udio
HTML5 oferece API para udio e vdeo
Execuo do arquivo de udio ocorre de acordo com seu "engine"
13.1.1
Tipos suportados pelo HTML5 para udio so:
".mp3", ".ogg" e ".wav"
Cada navegador pode ou no implementar todos os arquivos ou

parcialmente
Navegador
MP3
Wav
Ogg
Internet Explorer
SIM
NO
NO
Chrome
SIM
SIM
SIM
Firefox
parcialmente
SIM
SIM
Safari
SIM
SIM
NO
Opera
NO
SIM
SIM
136
Nota: Mozilla Firefox suporta MP3 dependendo da sua verso, ou seja, h suporte no
Firefox 21 apenas quando estiver rodando nos sistemas operacionais Windows 7, Windows
8, Windows Vista e Android.
13.1.2
Arquivos de udio
Arquivo de udio um container de informaes sobre seu contedo
Em sua estrutura interna encontram-se
Informaes sobre as trilhas de udio
Metadados (ttulo, autor, nome da msica, tempo, etc)
137
13.1.3
Formato
MIME-type
MP3
audio/mpeg
Ogg
audio/ogg
Wav
audio/wav
<audio>
"Tag" usada para fazer a marcao do contedo de udio
Arquivo com contedo
"Streaming" do contedo
Se a "tag" no for suportada pelo navegador o texto que for definido como
contedo do elemento ser exibido
Atributo
Valor
Descrio
autoplay
---
O udio ser reproduzido to logo esteja pronto
controls
---
Exibe os controles
loop
---
Reinicia a reproduo automaticamente quando terminar
138
muted
---
preload
auto
metadata
none
src
URL
Mudo
Carrega todo o arquivo, apenas os metadados do arquivo

ou ainda no carrega o arquivo de udio, quando a pgina
HTML for carregada
Endereo do arquivo de udio
<audio src= "sound.ogg" controls>

Your browser does not support audio tag.
</audio>
EP:
<audio>
1.
Crie um novo arquivo de nome "audio.html"
2.
Em <body> adicione o cdigo:
<audio autoplay
src="http://www.music.helsinki.fi/tmt/opetus/uusmedia/esim/a2002
011001-e02-128k.ogg">
Your browser does not support audio tag.
</audio>
3.
Salve e teste no Google Chrome
4.
Repita o mesmo teste no Safari ou no Internet Explorer
5.
Volte ao cdigo e adicione o atributo "controls" na "tag" <audio>
6.
Salve e teste
7.
Teste os demais atributos

139
13.1.4
<source>
Define os mltiplos arquivos de mdia
Pode ser usado para udio e vdeo
Usado conforme o suporte do navegador do usurio
Ideal definir mais de um elemento com arquivos diferentes
Arquitetura "failover"
Atributo
Valor
media
screen and (min-width:320px)
src
URL
type
video/ogg
Descrio
Especifica o tipo de mdia (ainda
no suportado por nenhum
navegador)
Endereo do arquivo de udio
Especifique o MIME-type do
arquivo
<audio controls>
<source src="saound.mp3" type="audio/mpeg">
<source src="saound.ogg" type="audio/ogg">
Your browser does not support the audio tag.
</audio>
140
EP:
<source>
1.
Crie um novo arquivo de nome "audio_source.html"
2.
Em <body> adicione o cdigo:

<audio controls>
<source
src="http://www.music.helsinki.fi/tmt/opetus/uusmedia/
esim/a2002011001-e02-128k.mp3" type="audio/mpeg">
<source
src="http://www.music.helsinki.fi/tmt/opetus/uusmedia/
esim/a2002011001-e02-128k.ogg" type="audio/ogg">
Your browser does not support the audio tag.
</audio>
3.
Salve e teste no Chrome
4.
Repita o mesmo teste no Safari ou no Internet Explorer
13.2 Vdeo
API dos navegadores tambm permite trabalhar com arquivos de vdeo
Os formatos suportados so:
"mp4", "webm" e "ogg"
141
13.2.1
Navegador
MP4
WebM
Ogg
Internet Explorer
SIM
NO
NO
Chrome
SIM
SIM
SIM
Firefox
parcialmente
SIM
SIM
Safari
SIM
NO
NO
Opera
NO
SIM
SIM
Nota: Mozilla Firefox suporta MP4 de forma similar ao MP3, ou seja, h suporte no Firefox
21 apenas quando estiver rodando nos sistemas operacionais Windows 7, Windows 8,
Windows Vista e Android.
142
13.2.2
Arquivos de Vdeo
13.2.3
Formato
MIME-type
MP4
video/mp4
WebM
video/webm
Ogg
video/ogg
<video>
Similar a "tag" <audio>
Suporta leitura de arquivos de vdeo ou "streaming"
Utiliza a "tag" <source> para mltiplas referencias de arquivo
Possui todos os atributos de <audio> e mais os seguintes:
height
width
poster
Atributo
Valor
height
10
poster
URL
width
10
Descrio
Endereo com a imagem do vdeo que ser usado
enquanto o arquivo carregado ou at que o
usurio clique em "play"
143
<video width="320" height="240" controls>

<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support video tag.
</video>
EP:
<video>
1.
Crie um novo arquivo de nome "video.html"
2.
Adicione em <body>:
<video width="320" height="240" controls>

<source src="http://techslides.com/demos/samplevideos/small.mp4" type="video/mp4">
<source src="http://techslides.com/demos/samplevideos/small.ogv" type="video/ogg">
Your browser does not support video tag.
</video>
3.
Salve e teste
4.
Altere os valores de altura e largura para um valor maior
5.
Salve e teste
6.
Repita o teste com valores menores
144
145
Captulo 14:
SVG
14.1 Viso Geral
Uso recomendado pelo W3C
Define os grfico no formato XML
Permite o desenho de formas primitivas
Principal concorrente do Flash
Padro aberto ("open standard")
Suportado por quase todos os navegadores
14.2 Formato XML
Pode ser criado e editado com qualquer editor de texto
Permite busca, indexao, "script" e compresso
Qualquer elemento ou atributo podem ser animados
Mantm a qualidade de resoluo original
Independente do tamanho
Valores matemticos calculados conforme tamanho
Atende as especificaes DOM
Padres estabelecidos pelo W3C
Todas as "tags" de elemento devem possuir fechamento
Pode ser criado e editado com o "software" Inkscape
http://inkscape.org/
146
<svg xmlns='http://www.w3.org/2000/svg' version='1.1'>

<rect width='100' height='50' fill='#ccc' x='35' y='35'
strokewidth='3' stroke='#444' />
</svg>
14.2.1
Desmenbrando SVG
<svg
xmlns="http://www.w3.org/2000/svg"
version="1.1"
width="200px" height="200px">
147
Declarao
Descrio
<svg>
"Tag" de declarao do fragmento SVG
xmlns
"Namespace" do arquivo XML
version
width/height
Verso do SVG
Largura/altura
<rect
width='100' height='50'
fill='#ccc'
x='35' y='35'
strokewidth='3'
stroke='#444' />
Declarao
Descrio
<rect>
Desenha a forma primitiva de um retngulo
fill
Valor hexadecimal da cor do preenchimento
strokewidth
stroke
Largura do contorno
Valor hexadecimal da cor do contorno
148
14.3 Usando SVG
Um contedo SVG cria um "viewport"
Uma rea reservada para seu contexto
Posicionamento dos seus elementos ocorrem com base no "viewport"
Posio 0,0 o canto superior esquerdo do "viewport" e no da

pgina HTML
Pode ser usado diretamente atravs da "tag" <svg>
EP:
Declara-se o fragmento de um documento SVG
SVG
1.
Crie um arquivo de nome "svg.html"
2.
Dentro de <body> adicione o seguinte cdigo, salve e teste:

<svg xmlns='http://www.w3.org/2000/svg' version='1.1'>
<rect
width='500' height='250'
fill='#ccc' x='35' y='35'
strokewidth='3' stroke='#444' />
</svg>
3.
Remova todos os atributos da "tag" <svg> e teste novamente
4.
Baixe e instale o "software" Inkscape (ou use o Illustrator)
5.
Crie uma forma, salve e gere um arquivo SVG com o nome de "shape.svg"
6.
Abra o arquivo com algum editor de textos e inspecione o cdigo
7.
Copie o cdigo que estiver a partir da "tag" <svg> do arquivo para a pgina
HTML em <body>
8.
149
150
Captulo 15:
Tabela
15.1 <table>
Tabelas foram muito utilizadas para criar sites no passado
Posicionava os elementos dentro de clulas
Atualmente seu uso se restringe :
Exibio de informaes em grid (visualmente similar uma tabela do

excel)
Criao de email marketing
15.2 Criando Tabelas

Elemento
Descrio
<table>
Root tag
<tr>
Linha (row)
<th>
Cabealho (heading)
<td>
Dados (clula)
151
<table>
<tr>
<th>Name</th>
<th>Email</th>
</tr>
<tr>
<td>Peter Wasty</td>
<td>peter@wasty.com</td>
</tr>
<tr>
<td>Alex Afford</td>
<td>alex@afford.com</td>
</tr>
</table>
EP:
<table>
1.
Crie um novo arquivo de nome table.html
2.

<table>
<tr>
<th>Name</th>
<th>Email</th>
</tr>
</table>
3.
Abaixo de <tr> e antes do fechamento de </table>:

<tr>
</tr>
152
4.
5.
Salve e teste
Adicione mais registros na tabela:
a.
Alex Afford - alex@afford.com
b.
Mary Castella - mary@castella.com
c.
Zed Broken - zed@broken.com
6.
Salve e teste
7.
Adicione mais colunas tabela com dados aleatrios:

a.
Phone
b.
Picture (foto da pessoa)
<tr>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th>Picture</th>
</tr>
<tr>
<td>1122334455</td>
<td>
<img
src='http://lorempixel.com/200/200/people/3/'>
</td>
</tr>
153
15.3 Email Marketing
Como mencionado anteriormente, no se deve fazer uso de tabelas para a

criao (posicionamento e layout) de sites
Porm para email marketing seu uso fundamental
Os clientes de email conseguem interpretar apenas cdigos

simples/antigos de HTML
A tcnica para sua criao totalmente oposta a criao de um site tradicional
Cdigo similar a verso do HTML de 1999
No use HTML5 !
Os estilos que podem ser aplicados tambm so limitados:

http://www.campaignmonitor.com/css/
Existem algumas ferramentas teis para a criao:

http://premailer.dialect.ca/
https://litmus.com/
http://mailchimp.com/features/inbox-inspector/
15.3.1
Regras Essenciais
Estilos inline
No devem existir arquivos externos (como CSS)
Todo o estilo deve acontecer na prpria tag atravs do atributo style
Nem todos os estilos CSS so suportados
Carregamento de imagem
No assuma que as imagens sero carregadas/visualizadas
Muitos clientes de email bloqueiam as imagens
Sempre inclua a verso em texto simples
154
Estilos
Largura deve ser definida em cada clula ao invs da tabela toda
Aninhe tabelas uma dentro da outra
Defina a cor de fundo na tabela principal
Nos clientes de celulares, os textos so quebrados geralmente aps 60

caracteres
Espaos em branco
Sempre remova espaos em branco desnecessrios no cdigo
EP:
Email Marketing
1.
Abra o link abaixo:

a.
Voc necessitar criar uma conta ao final do processo para ter acesso ao
cdigo
http://www.campaignmonitor.com/templates/
2.
Clique no boto Start Building Now
3.
Escolha um dos modelos disponveis
4.
Use o painel esquerda para configurar cada item
5.
Siga os procedimentos indicados no site
155
156
Captulo 16: Fundamentos CSS

16.1 CSS
Cascading Style Sheets
Criado pelo W3C
Define como exibir os elementos HTML
Um mesmo arquivo HTML pode ser exibido com estilos diferentes
http://www.w3schools.com/css/demo_default.htm
Estilo pode ser adicionado atravs:
<style>: estilo pertecer unicamente ao arquivo HTML
<link>: estilo definido em arquivo externo com a extenso .css

permitindo o reaproveitamento do estilo em mais de um arquivo HTML
Recomendado que toda a formatao seja definida em um arquivo ".css" externo
<style type="text/css">
/*CSS style goes here*/
</style>
<link rel="stylesheet" type="text/css" href="myStyle.css">
16.2 Reutilizao de Estilos
Objetivo separar todos os estilos em um arquivo
No recomendado colocar estilos no documento HTML
Documento HTML deve definir apenas os elementos HTML
Facilita a manuteno e o reaproveitamento
Quando um estilo definido em uma pgina e redefinido em outra, tornase problema se for alterado
157
Um arquivo CSS pode ser reutilizado para definir estilos em mais de um

documento
Se alterado um valor, todos os documentos que o utilizarem sero

atualizados
16.3 Sintaxe
Possui duas partes principais:
Seletor
Seleciona o elemento HTML desejado
Declarao
Propriedade atributo de estilo o qual se deseja alterar
Valor
Instruo termina com com ponto e vrgula ;
Agrupado por chaves { declarao1; declarao2; declarao3;

}
h1 {
color: blue;
font-size: 12px;
}
158
16.4 Cometrios
Iniciam com barra + asterisco /*

Finalizam com asterisco + barra */
/* This is a comment */
/*
Everything inside those comment characters are
comments, even if it takes more than one line !
*/
159
160
Captulo 17:
Seletores
17.1 Element Selector
Tambm chamado de type selector
Forma mais comum de declarao CSS
Utiliza-se o nome da "tag" HTML sem os sinais de maior e menor usados no

documento HTML
Ex: h1, p, div
Todos os elementos iguais ao declarado possuiro o estilo
Seletores separados por vrgula aplicam o estilo a mais de um elemento

h1,h2,h3 { color: blue; }
EP:
Element Selector
1.
Crie os arquivos HTML e CSS com o nome "selectors" e os vincule
2.
No arquivo CSS adicione o seguinte cdigo:

h1 {
color: red;
4.
}
Adicione a tag <h1> no arquivo HTML:
<h1>First Header (element selector)</h1>
5.
Vincule o arquivo CSS com o documento HTML, adicionando o seguinte cdigo

em <head>:
<link rel="stylesheet"
type="text/css" href="selectors.css">
6.
Salve e teste
161
17.2 id Selector
Aplica estilo para um nico elemento
O "id" especifica qual elemento receber o estilo
Utiliza o atributo "id" do elemento HTML para identificar
Os valores devem ser idnticos
Se por algum motivo for alterado em um dos arquivos ambos

devero ser atualizados
Arquivo HTML
<h1 id="header">My Title</h1>
Arquivo CSS
#header {
color: blue;
}
EP:
1.
id Selector
No arquivo "selectors.html" adicione o elemento <h1>:
<h1 id="header">Second Header (id selector)</h1>
2.
No arquivo "selectors.css" adicione o seguinte cdigo

#header { color: blue; }
3.
Salve e teste
a.
Verifique as cores que prevaleceram
162
17.3 Class Selector
Estiliza um grupo de elementos
O atributo "id" deve ser utilizado com valor nico e consequentemente um

nico elemento ser estilizado
J o seletor de elementos aplica estilo todas as "tags" de um

determinado tipo
Todos os elementos que possurem o mesmo valor para o atributo "class"

recebero o estilo
Declarao no arquivo CSS diferente do arquivo HTML:
No arquivo CSS recebe um ponto antes do nome
No arquivo HTML o ponto no colocado
Arquivo HTML
<h1 class="myClassStyle">My Big Title</h1>
<h6 class="myClassStyle">My Small Title</h6>
Arquivo CSS
.myClassStyle {
EP:
1.
color: yellow; }
Class Selector
No arquivo "selectors.html" crie uma terceira "tag" <h1> com a seguinte
configurao:
<h1 class="myClass">Third Header (class selector)</h1>
2.
No arquivo "selectors.css" adicione o seguinte cdigo

.myClass { color: yellow; }
3.
Salve e teste
163
17.4 Universal Selector
Caractere asterisco * seleciona todos os elementos existentes na pgina

* {
color: green;
}
EP:
1.
Universal Selector
No arquivo selectors.html adicione o cdigo:
<h2>Fourth Header (universal selector)</h2>
2.
Adicione o cdigo CSS:

* {
color: green;
}
3.
Salve e teste
a.
4.
Perceba que no existe nenhum instruo CSS de estilo para <h2>
Adicione no arquivo HTML outras tags:

<h3>Fifith Header (universal selector)</h3>
<h4>Sixth Header (universal selector)</h4>
5.
Salve e teste
164
17.5 Declarao de Seletores
Tipo de Seletor
Declarao CSS
Seleo
Element
elementName
id
#elementId
Elemento HTML com o ID
Class
.className
Elementos HTML com a classe
Universal
Elementos HTML do tipo especificado
Todos os elementos HTML
17.6 Combinando Seletores
Possvel combinar os tipos de seletores para obter um resultado mais especfico
O estilo ser aplicado apenas se a instruo combinar com a estrutura e seletor

HTML:
<h1 class="title">H1 Header with "title" class</h1>
165
CSS:
.title{
color: darkcyan;
}
h1.title{
color: brown;
}
EP:
Combinando Seletores
1.
Crie novos arquivos HTML e CSS de nome selectors_combination e os vincule
2.
No arquivo HTML adicione o seguinte cdigo:

3.
No arquivo CSS adicione o seguinte estilo:

.title{
color: darkcyan;
}
4.
Salve e teste
a.
5.
Como esperado, todas as tags com a classe receberam o estilo
Adicione a seguinte instruo CSS:

h1.title{
color: purple;
}
166
6.
Salve e teste
a.
Perceba que a cor purple foi aplicada apenas em <h1>
167
168
Captulo 18:
Precedncia CSS
18.1 Nomenclatura de Vnculo
A forma utilizada do CSS define a nomenclatura:
Externo arquivo ".css"
Interno "tag" <style>
"Inline" atributo "style" do elemento HTML
18.2 Precedncia CSS
Se um mesmo estilo for aplicado um elemento HTML, a ordem de precedncia

ser essencial para determinar qual o estilo que ser usado
Quando mais "prximo" da "tag" maior ser sua precedncia
Mais especfico sobrepe o menos especfico
inline
#id selector
.class selector
element selector
padro do navegador
169
EP:
Precedncia CSS
1.
Crie um novo arquivo de nome "precedence.html"
2.
Adicione o seguinte CSS:

h1 { color: red; }
.blueText { color: blue; }
#header { color:green; }
3.

<h1>Element selector</h1>
4.
Salve e teste
a.
5.
Ateno para a cor aplicada e o CSS utilizado
Crie mais uma "tag", salve e teste novamente:

<h1 class="blueText">Element + Class selectors</h1>
6.

<h1 class="blueText" id="header">
Element + Class + ID selectors
</h1>
7.
Salve e teste
a.
8.
Perceba a cor aplicada e a precedncia do CSS

<h1 class="blueText" id="header" style="color:gray">
Element + Class + ID selectors with inline attribute
</h1>
9.
Finalmente salve e teste
170
18.3 Execuo de Precedncia
Ordem, forma e disposio do cdigo CSS pode influenciar diretamente na sua

aplicao
Se a "tag" <link> for colocada aps a "tag" <style> os estilos da ltima se

sobreporo aos definidos anteriormente
EP:
1.
O mesmo ocorre se mltiplas "tags" <style> forem definidas
Execuo de Precedncia
No arquivo "precedence.html" adicione o cdigo CSS no final da instruo
existente, salve e teste:
a.
Ser a ltima instruo, abaixo de todas as demais
h1 { color: salmon; }
2.
Repita o teste adicionando o seguinte cdigo:

h1 { color: chocolate; }
171
172
Captulo 19: Seletores Avanados

19.1 Hierarquia HTML
Hierarquia HTML define a estrutura hierrquica dos elementos:
Parent elemento pai
Child elemento filho
Sibling elemento irmo
Em CSS possvel criar seletores com base na hierarquia HTML
Apesar de ser bastante usual, sua utilizao pode deixar o cdigo frgil,
pois se a estrutura HTML mudar o estilo no mais ser aplicado
Bastante til quando no existe acesso ao cdigo HTML (gerado pelo

servidor ou JavaScript)
19.1.1
Descendant Selector
SELETOR SELETOR
Seleciona todos os elementos que forem descendentes do primeiro seletor
No importa se um filho direto ou indireto (neto, bisnetos, etc)
CSS:
div h1 {
color: lime;
}
HTML:
<div>
<h1>First header</h1>
</div>
CSS:
173
div h1 { color: lime; }
HTML:
<div>
<ul>
<li><h1>Second Header</h1></li>
</ul>
</div>
EP:
Descendant Selector
1.
Crie os arquivos HTML e CSS de nome selectors_descedant e os vincule
2.
Adicione o seguinte cdigo de estilo:

div h1 {
color: lime;
}
3.
Adicione o cdigo HTML:

<div>
</div>
4.
<h1>Another header</h1>
Salve e teste
a. Perceba que <h1> fora da <div> no recebe o estilo
174
5.
Dentro da <div>, adicione o seguinte cdigo:

<ul>
<li><h1>Third Header</h1></li>
6.
7.
</ul>
Salve e teste
a. Perceba que qualquer <h1> descendente de <div> recebe o estilo
Adicione o atributo class com valor myClass nos elementos <h1> com os
seguintes contedos:
8.
a.
First Header
b.
Third Header
c.
Another Header
Altere a instruo CSS para:

div h1.myClass { color: lime; }
9.
Salve e teste
a.
Perceba que somente os elementos <h1> descendentes de <div> com a

classe myClass receberam estilo
175
19.1.2
Child Selector
SELETOR > SELETOR
Seleciona todos os elementos que forem descendentes diretos do primeiro

seletor
Apenas elementos filhos diretos do elemento pai
Elementos descendentes no diretos (netos, bisnetos, etc) no

recebero o estilo
CSS:
div>h1 { color: lime; }
HTML:
<div>
<ul>
</ul>
</div>
EP:
1.
2.
3.
Child Selector
Duplique os arquivos HTML e CSS selectors_descedant para selectors_child
a. No esquea de corrigir o vnculo da tag <link>
Altere a instruo CSS para:
div>h1.myClass { color: lime; }
Salve e teste
a. Perceba que apenas <h1> descendente direto de <div> recebeu o estilo
176
19.1.3
Adjacent Sibling Selector
SELETOR + SELETOR
Podem ser usados quaisquer seletores vlidos CSS, e quantos forem

necessrios
Seleciona o elemento que estiver imediatamente seguinte ao elemento

especificado
Equivale ao elemento irmo na estrutura HTML
CSS:
h1 + h1 {
color: lime;
}
HTML:
<h1>Second header</h1>
-------------------------------------------CSS:
h1 + h1 + h1 { color: lime; }
HTML:
<h1>Third header</h1>
<h1>Fourth header</h1>
177
-------------------------------------------CSS:
h1 + h1.myClass { color: skyblue; }
HTML:
<h1 class="myClass">Second header</h1>
EP:
1.
Adjacent SIbling Selector

Crie novos arquivos HTML e CSS com o nome selectors_adjacent_sibling e os
vincule
2.
Adicione o cdigo no arquivo HTML:

3.
Adicione o cdigo no arquivo CSS:

h1 + h1 {
color: skyblue;
4.
}
Salve e teste
a.
Perceba que todos os elementos que possuem a estrutura <h1> + <h1>

receberam o estilo
178
5.
Altere o cdigo no arquivo CSS:

h1 + h1 + h1 {
color: skyblue;
}
6.
Salve e teste
7.
Altere o cdigo no arquivo CSS:

h1 + h1 + h1 + h1 {
color: skyblue;
}
8.
Salve e teste
9.
Altere o cdigo no arquivo HTML:

<h2>Ops...structure has changed</h2>
10.
Salve e teste
a.
Perceba a fragilidade da aplicao do estilo no caso de mudana da

estrutura HTML
11.
Comente a tag <h2>
12.
(Opcional) Faa o teste utilizando class selector

a.
Adicione a classe no elemento <h1> correto
h1 + h1.myClass { color: skyblue; }
179
19.1.4
SELETOR ~ SELETOR
Seleciona todos os elementos que forem seguintes ao elemento especificado e

tiverem o mesmo parent element
No importa se outros tipos de elementos existirem entre os elementos

seguintes ao especificado
CSS:
h2 ~ h1 { color: salmon; }
HTML:
<h1>Fifth header</h1>
EP:
1.
2.

Crie novos arquivos HTML e CSS com o nome selectors_general_sibling e os
vincule
<h1>Fifth header</h1>
180
3.

h2 ~ h1 {
color: salmon;
}
4.
Salve e teste
a.
5.
Perceba que todos os elementos <h1> aps <h2> so selecionados
Adicione no final cdigo HTML anterior a seguinte instruo:

<div>
<h1>Sixth header</h1>
6.
</div>
Salve e teste
a. Perceba que o <h1> aninhado em <div> no recebe o estilo
181
19.1.5
Consolidado dos Seletores Hierrquicos
Combinao
CSS
Multiples
selector, selector
Elementos dos seletores separados por

vrgulas (ou um, ou outro)
Descendants
selector selector
Elementos dos seletores que forem

descendentes diretos ou indiretos
Child
selector > selector
Elementos dos seletores que forem

descendentes diretos
Adjacent Sibling
selector + selector
Elemento irmo ao definido pelo primeiro

seletor
selector ~ selector
Todos os elementos irmos ao definido

pelo primeiro seletor e filhos do mesmo
pai
General Sibling
Seleo
19.2 Atributos HTML
Possvel selecionar elementos atravs dos atributos HTML
Existncia de um atributo
Valor integral de um atributo
Valor parcial (contm um determinado valor) de um atributo
19.2.1
Attribute Selector
SELETOR[...]
Seleciona um elemento com base em seu atributo
Possuir um atributo ou mesmo seu valor

182
Instruo colocada aps a declarao do seletor entre colchetes
O uso do seletor opcional e se omitido ser usado o seletor universal,

ou seja, todos os elementos HTML
CSS:
h1[title] { color: firebrick; }
HTML:
<h1 title="First title attribute">First Header</h1>
<h1>Second Header</h1>
<h1 title="Third title attribute">Third Header</h1>
<h1>Fourth Header</h1>
EP: Attribute Selector

1.
Crie novos arquivos HTML e CSS de nome selector_attribute e os vincule
2.

<h1 title="First title attribute">First Header</h1>
<h1>Second Header</h1>
<h1 title="Third title attribute">Third Header</h1>
3.
<h1>Fourth Header</h1>
h1[title] { color: firebrick; }
4.
Salve e teste
a.
Perceba que apenas os elementos <h1> com atributo title receberam

estilo
5.
Altere a instruo CSS removendo o seletor h1:

[title] { color: firebrick; }
183
6.

<h2 title="Fifth title attribute">Fifth Header</h2>
<h3>Sixth Header</h3>
7.
<h4>Seventh Header</h4>
Salve e teste
a.
Perceba que todos os elementos com o atributo title foram selecionados
19.2.1 Attribute Selector (cont.)
Alm de verificar se um elemento possui ou no o atributo, possvel tambm

seu valor
Possvel verificar se o valor especificado:
Existe dentro da instruo
Est contido dentro da instruo
Comea ou termina como valor da instruo
Seletor
CSS
Seleo
[attr=value]
[target=_blank]
Elementos que contiverem o atributo e o valor

especificado
[attr~=value]
[title~=required]
Elementos que contiverem a palavra exata como

valor do atributo
[attr|=value]
[lang|=en]
Elementos que iniciarem e contiverem a palavra

exata como valor do atributo
[attr^=value]
[src^=icon]
Elementos que iniciarem e contiverem a palavra

como valor do atributo
[attr$=value]
[src$=.pdf]
Elementos que terminarem e contiverem a palavra

como valor do atributo
184
[attr*=value]
[src*=othersite]
Elementos que contiverem a palavra como valor

do atributo
EP: Attribute Selector (cont.)

1.
Abra os arquivos HTML e CSS selector_attribute
2.

<a href="https://www.google.com.br">Google BR</a>
<a href="http://www.google.com">Google US</a>
3.
Salve e teste
a.
4.
Verifique se os links esto funcionando corretamente
Adicione o seguinte estilo:

a[href="https://www.google.com.br"]{
color: deeppink;
}
5.
Salve e teste
6.
Altere a ltima instruo CSS para:

a[href="http"]{
color: deeppink;
}
7.
Salve e teste
a.
8.
Perceba que o valor no foi encontrado e nenhum estilo foi aplicado

a[href^="http"]{
color: deeppink;
}
185
9.
Salve e teste
a.
10.
Perceba que o valor foi encontrado no incio do atributo href

a[href$="br"]{
color: deeppink;
11.
}
Salve e teste
a.
Perceba que o valor foi encontrado no final do atributo href em apenas

dos elementos
12.

a[href*="google"]{
color: deeppink;
}
13.
Salve e teste
a.
Perceba que o valor foi encontrado dentro do valor de href
186
19.3 Pseudo-class
Palavra chave adicionada ao seletor
Especifica um estado especial do elemento
Ex: hover, enabled, focus, link, etc
Aplica o estilo apenas quando o elemento estiver no estado definido
/* selector:pseudo-class {
property: value;
}*/
h1:hover{
background-color: yellow;
}
Seletor
CSS
Seleo
active
a:active
Elemento estiver ativo (mouse pressionado no

elemento)
hover
a:hover
Usurio passa o mouse sobre o elemento
link
a:link
visited
a:visited
Elemento for um link visitado pelo usurio
target
a:target
Elemento alvo ncora
Elemento for um link
187
EP:
Pseudo-class (link)
1.
Crie novos arquivos HTML e CSS de nome selector_pseudo_class e os vincule
2.
Adicione uma tag <h1> com valor Links
3.
Adicione o cdigo HTML com a tag <a> configurada para os arquivos dos EPs
anteriores:
4.
a.
selectors_descedant.html
b.
selectors_adjacent_sibling.html
c.
selector_attribute.html
No aquivo CSS adicione a seguinte instruo:

a:link { color: green; }
a:visited { color: gray; }
a:hover { color: purple; }
a:active { color: pink; }
5.
Salve e teste
6.
Crie uma ncora na pgina:

<a href="anchor1">Go to anchor 1</a>
<a href="anchor2">Go to anchor 2</a>
<p>lorem ipsum</p>
<p id="anchor1">Anchor 1</p>
<p id="anchor2">Anchor 2</p>
7.
Adicione o CSS:
8.
:target { background-color: yellow;}

Salve e teste
a.
Clique nas ncoras e perceba o estilo sendo aplicado quando uma as

ncoras selecionada
188

Seletor
CSS
disabled
enabled
input:disabled
input:enabled
focus
input:focus
Elemento com foco
invalid
valid
input:invalid
input:valid
Elemento estiver invlido / vlido
required
input:required
EP:
Seleo
Elemento estiver desabilitado / habilitado
Elemento que contiver o atributo required
Pseudo-class (form)
1.
Abra os arquivos selector_pseudo_class
2.
Adicione o cdigo HTML (abaixo do anterior):

<h1> Form </h1>
<form>
Required: <input type="text" required> <br>
Email:
<input type="email" required> <br>
Disabled: <input type="text" disabled>

</form>
189
3.
Adicione o cdigo CSS (abaixo do anterior):

input[type="text"]:required {
4.
}
Salve e teste
a.
Perceba que apenas o <input> do tipo texto requerido foi selecionado e

recebeu estilo
5.

input:focus{
background-color: skyblue;
}
6.
7.
Salve e teste
a.
Clique nos <input> requeridos
b.
Perceba que apenas um deles recebe o estilo de fundo azul

input:invalid {
border-color: red;
}
input:valid {
border-color: green;
}
8.
Salve e teste
a.
Perceba que os <input> obrigatrios recebem o estilo automaticamente
b.
Preencha um deles adequadamente
190

Seletor
CSS
empty
p:empty
lang
span:lang(fr)
not
:not(h1)
EP:
Seleo
Elemento estiver sem contedo
Elemento com atributo lang defindo para fr
Todos os elementos, exceto o definido entre os

parnteses
Pseudo-class (others)
1.
Abra os arquivos selector_pseudo_class
2.
Adicione o cdigo HTML (abaixo do anterior):

<h1>Others</h1>
<p></p>
<p>
Em francs <span lang="fr">bonjour</span>
significa bom dia ou mesmo boa tarde
</p>
3.

p:empty{
background-color: pink;
height:50px;
}
191
4.
5.
Salve e teste
a. Perceba que se no for definida a altura o estilo no ser visvel
span:lang(fr){
font-style: italic;
letter-spacing: 2px;
color: red;
6.
7.
}
Salve e teste
a. Perceba que apenas o texto em francs recebeu o estilo
:not(span){
color: blue;
}
8.
Salve e teste
a.
Perceba que apenas o texto em <span> no recebeu o estilo
19.4 Pseudo-class Avanado
Permitem seleo bastante pontual e especfica
Essenciais para situaes na qual o desenvolvedor no tem acesso ao cdigo

HTML
Muito cdigo HTML adicionado dinamicamente atravs de JavaScript ou

mesmo por servidores
Impossibilita de adicionar os atributos id ou class para estilizar a

pgina
Muitos dependem da estrutura posicional dos elementos HTML
Se um elemento mudar de posio no mais ser selecionado
192
Seletor
CSS
Seleo
first-child
last-child
p:first-child
p:last-child
first-of-type
last-of-type
p:first-of-type
p:last-of-type
Elementos que forem os primeiros /

ltimos filhos de um determinado tipo
de seu pai
nth-child(n)
p:nth-child(3)
Elementos que forem os filhos na

posio definida por n de seu pai
nth-last-child(n)
p:nth-last-child(4)
Similar nth-child(n), porm do ltimo

para o primeiro
nth-of-type(n)
nth-of-type(3)
Elementos que forem os filhos de um

determinado tipo na posio definida por
n de seu pai
nth-last-of-type(n)
p:nth-last-of-type(2)
only-of-type
p:only-of-type
only-child
p:only-child
Elementos que forem os primeiros /

ltimos filhos de seu pai
Similar nth-of-type(n), porm do

ltimo para o primeiro
Elementos filhos nicos de um
determinado tipo de seu pai
Elementos filhos nicos de seu pai
193
EP:
1.
Pseudo-class Avanado
Crie novos arquivos HTML e CSS de nome selector_pseudo_class_advanced
e os vincule
2.

<p>First paragraph with <body> parent tag</p>
<p>Second paragraph with <body> parent tag</p>
3.
Adicione o CSS:
p:first-child{
background-color: lime;
}
4.
Salve e teste
a.
5.
Identifique qual das <p> recebeu estilo
Adicione o HTML (abaixo do anterior):

<div>
<p>First paragraph with <div> parent tag</p>
<p>Second paragraph with <div> parent tag</p>
</div>
6.
Salve e teste
7.
Adicione o CSS (abaixo do anterior):

p:last-child{
background-color: pink;
}
8.
Salve e teste
a.
Perceba que somente o <p> que for ltimo filho receber estilo
194
9.
Adicione como primeira tag (abaixo de <body>):

<h1><body> first child !</h1>
10.
Salve e teste
a.
11.
Perceba que somente o <p> que for o primeiro filho receber estilo

p:first-of-type{
background-color: orange;
}
12.
Salve e teste
a.
Perceba que os <p> que forem primeiros filhos deste tipo recebem estio
b.
O estilo definido em p:first-child foi sobrescrito devido a ordem das

declaraes CSS (altere a ordem para se verificar)
13.
Acrescente um novo <p> com o texto lorem ipsum, como ltima tag de <body>
a.
Utilize a expresso do EMMET dentro de <p>: p>span[title=$]*5>{$

-- }(lorem)
b.
Perceba que o estilo p:last-child foi aplicado
c.
(Opcional) Altere a indentao do cdigo para que cada <span> fique

com um espao entre cada uma das tags
14.

<p>
<span title="1">1 -- Lorem ipsum dolor sit amet...</span>
<span title="2">2 -- Non, totam, ad, blanditiis...
15.

span:nth-child(3){
}
195
16.
Salve e teste
17.
Adicione o cdigo HTML entre o primeiro e o segundo <span>:

<span>1 Lorem ipsum dolor sit amet...</span>
<img src="http://www.lorempixel.com/100/100">
<span>2 Non, totam, ad, blanditiis...
18.
Salve e teste
a.
19.
Perceba que no existe mais <span> como terceira tag filha
Adicione a instruo CSS:

span:nth-last-child(4){
background-color: red;
}
20.
Salve e teste
a.
21.
Perceba a seleo com a contagem reversa
Altere a instruo atual nth-child(3) para:

span:nth-of-type(3){
}
22.
Salve e teste
23.
Adicione o cdigo HTML, antes do fechamento de <body>:

<div>
<h1><h1> child</h1>
</div>
196
24.

h1:only-child{
}
25.
Salve e teste
26.
Adicione o HTML abaixo de <h1> dentro da <div>:

<h2><h4> child</h2>
27.
Salve e teste
a.
28.
Perceba que <h1> no mais a nica filha de <div>
Altere a instruo h1:only-child para:

h1:only-child{
}
29.
Salve e teste
19.5 Peseudo-elements
Similares pseudo-classes
Porm referem-se aos elementos ao invs do estado destes
Permite estilizar determinadas partes do documento
Primeira linha
Primeira letra
Seleo do mouse
197
Tambm permitem adicionar contedo de texto no documento HTML

/* selector::pseudo-element {
property: value;
}*/
p::first-letter{
font-size: 30px;
}
EP:
Pseudo-elements
1.
Crie um novo arquivo de nome selector_pseudo_element.html
2.
Adicione mltiplas linhas de cdigo lorem ipsum

a.
3.
Utilize a instruo EMMET: p*10>span*10>lorem
Adicione o CSS:
p::first-letter{
font-size: 30px;
}
4.
Salve e teste
5.
Altere a instruo p::first-letter para:

p::first-line{
font-size: 30px;
}
6.
Salve e teste
198
7.
Adicione as instrues CSS:

a.
O prefixo -moz- garante o funcionamento no navegador Firefox e ser

explicado posteriormente
::selection{
background-color: gold;
}
::-moz-selection{
background-color: gold;
}
8.
Salve e teste
a.
9.
Selecione algum texto com o mouse

p::after{
content:
"CONTENT FROM CSS !!!";
}
10.
11.
Salve e teste
a.
Perceba que no possvel selecionar com o mouse o texto
b.
Verifique o cdigo fonte HTML e tente localizar o texto
(Opcional) Adicione um contedo usando ::before
199
19.6 Vendor Properties
Existem declaraes CSS que se referem ao engine do navegador

-webkit- Chrome e Safari
-moz- Firefox
-o- Opera
-ms- Internet Explorer
Permitem aplicar alguns estilos com base no "engine" do navegador
http://peter.sh/experiments/vendor-prefixed-css-property-overview/
Usado quando um navegador no entende um propriedade CSS
Pode gerar repetio de cdigo
-moz-border-radius: 10px 5px;

-webkit-border-radius: 10px 5px;
border-radius: 10px 5px;
200
201
Captulo 20:
Cores CSS
20.1 Cores
Cores podem ser definidas pelo nome ou hexadecimal

http://en.wikipedia.org/wiki/Web_colors
http://en.wikipedia.org/wiki/X11_color_names
Tambm possvel definir cores por:
RGB
RGBA
HSL
HSLA
20.2 Hexadecimal
Notao para definir cor em HTML
Alguns valores possuem um nome atribudo
Combinao RGB
Definido por 3 pares com 2 dgitos e iniciados pelo caractere #
Ex: #FFFFFF
Valor mais baixo zero (00) e mais alto 255 (FF)
Permite variaes de 16 milhes de cores
256 x 256 x 256
Quando um par de dgitos so repetidos possvel usar a verso reduzida

(atalho)
Ex: #FFFFFF #FFF;
202
#p1 {background-color:#ff0000;} / * red */

#p2 {background-color:#00ff00;} / * green */
#p3 {background-color:#0000ff;} / * blue */
20.3 Web Safe Colors
Inicialmente existia uma lista de cores seguras
Computadores conseguiam exibir 256 cores diferentes
40 reservadas para o sistema
216 "web safe colors"
Atualmente no existe esta preocupao, pois os computadores atuais so

capazes de exibir as 16 milhes de cores
20.4 RGB
Red, Green and Blue
"rgb(red, green, blue)"
Cada parmetro define intensidade da cor
Valores podem ser inteiros de 0 255 ou percentual 0% 100%
Para definir a cor azul pode-se:
rgb(0,0,255)
rgb(0%,0%,100%)
#p1 {background-color:rgb(255,0,0);} / * red */

#p2 {background-color:rgb(0,255,0);} / * green */
#p3 {background-color:rgb(0,0,255);} / * blue */
203
20.5 RGBA
Red, Green, Blue and Alpha
Extenso de RGB com "alpha"
O valor "alpha" define a opacidade do objeto
"rgba(red, green, blue, alpha)"
O valor de "alpha" deve ser de 0.0 (totalmente transparente) 1.0

(totalmente opaco)
No tem o mesmo suporte dos navegadores
IE9+, Firefox 3+, Chrome, Safari, e Opera 10+
/ * red with opacity */

#p1 {background-color:rgba(255,0,0,0.3);}
/ * green with opacity */
/ * blue with opacity */

20.6 HSL
Hue, Saturation and Lightness

hsl(hue, saturation, lightness)
Representa as cores atravs de coordenadas cilndricas
204
Valores
"Hue" varia de 0 360
Vermelho 0 ou 360
Verde 120
Azul 240
"Saturation" varia de 0% 100%
0% cinza bem claro
100% cor totalmente aplicada
"Light" varia de 0% 100%
0% preto
100% branco
/ * green */
#p1 {background-color:hsl(120,100%,50%);}
/ * light green */
/ * dark green */
/ * pastel green */
205
20.7 HSLA
Hue, Saturation, Lightness and Alpha
"hsla(hue, saturation, lightness, alpha)"
O valor de "alpha" deve ser de 0.0 (totalmente transparente) 1.0

(totalmente opaco)
/ * green with opacity */

#p1 {background-color:hsla(120,100%,50%,0.3);}
/ * light green with opacity */

/ * dark green with opacity */
/ * pastel green with opacity */
206
207
Captulo 21: Fontes

21.1 Sobre
So utilizadas aquelas definidas pela instruo CSS font-family
Define a famlia de fontes
Existem duas formas de utilizao:
Carregadas: adicionadas como um recurso do documento HTML
No carregadas: usadas se existirem no sistema operacional do usurio
21.2 font-family
Propriedade CSS que permite definir uma ou mais fontes a serem utilizadas na
pgina HTML
Geralmente so definidas fontes de uma mesma famlia
Se a primeira no for encontrada, a prxima da lista ser usada

Para que no ocorram grandes diferenas visuais e tamanhos diferentes
Quando um nome de fonte possuir espaos em branco deve-se

obrigatoriamente utilizar aspas para definir o nome
Ex: Times New Roman
p {
font-family: "Times New Roman", Times, serif;
}
208
21.3 Fontes no Carregadas
Forma mais tradicional de uso
Utiliza os recursos existentes na mquina do usurio
Caso no exista o sistema operacional tentar usar a que este considerar

como a mais prxima
Nem sempre o sistema operacional utiliza uma fonte to bem adequada

quanto aquela escolhida pelo desenvolvedor
EP:
Pode comprometer o posicionamento e layout da pgina HTML
font-family
1.
Crie um arquivo HTML de nome font_family.html
2.
<h2 class="serif">"Times New Roman", Times, serif</h2>

<h2 class="sans-serif">Arial, Helvetica, sans-serif</h2>
<h2 class="monospace">"Courier New", Courier, monospace</h2>
3.
4.
Adicione o CSS com as respectivas classes:

a.
font-family: "Times New Roman", Times, serif;
b.
font-family: Arial, Helvetica, sans-serif
c.
font-family: "Courier New", Courier, monospace
Salve e teste
a.
5.
Perceba a diferena entre as fontes
Adicione uma fonte inexistente no seu sistema:

a.
<h2 class="sf">SF Quartzite</h2>
b.
font-family: "SF Quartzite"
c.
Visualize a fonte correta no endereo
http://www.dafont.com/sf-quartzite.font
209
21.4 Web Safe Fonts
So as fontes consideradas seguras para Web
Existentes na maioria das mquinas
Famlias com visual e tamanhos similares
Propriedade "font-family" deve receber mais de um valor para ter a

funcionalidade de "failover"
Se o navegador no suportar a primeira, segue para o prximo
Primeiro valor define a fonte desejada, os demais definem famlia

genrica
Existem 3 categorias principais:
Serif Fonts
Sans-serif Fonts
Monospace Fonts
Cada categoria define um conjunto de famlias
Fonte
font-family
Monospace
"Courier New", Courier, monospace
Monospace
"Lucida Console", Monaco, monospace
Serif
Georgia, serif
Serif
"Palatino Linotype", "Book Antiqua", Palatino, serif
210
Serif
"Times New Roman", Times, serif
Sans-serif
Arial, Helvetica, sans-serif
Sans-serif
"Arial Black", Gadget, sans-serif
Sans-serif
"Comic Sans MS", cursive, sans-serif
Sans-serif
Impact, Charcoal, sans-serif
Sans-serif
"Lucida Sans Unicode", "Lucida Grande", sans-serif
Sans-serif
Tahoma, Geneva, sans-serif
Sans-serif
"Trebuchet MS", Helvetica, sans-serif
Sans-serif
Verdana, Geneva, sans-serif
211
21.5 Sans-serif vs Serif
21.6 Proportional vs Monospace
212
21.7 Fontes Carregadas
Carregamento do arquivo contendo uma fonte para uso na pgina HTML
Similar a qualquer arquivo externo (como uma imagem) aumenta o tempo

necessrio para carregamento da pgina
Garante a integridade visual da fonte
213
21.8 @font-face
Instruo CSS que define a fonte embutida
Permite ainda colocar qualquer nome para a fonte
Os tipos com maior suporte dos navegadores so:
WOFF - Web Open Font Format
TTF - True Type Fonts
OTF - OpenType Fonts
@font-face {
font-family: myCustomFontName;
src: url(satisfy.woff);
}
EP:
@font-face
1.
Abra o arquivo font_family.html
2.
Baixe a fonte SF Quartzite do endereo:

http://img.dafont.com/dl/?f=sf_quartzite
3.
Extraia os arquivos para seu projeto

a.
Copie o arquivo de nome SF Quartzite.ttf para a pasta que contm o

arquivo HTML
4.

@font-face {
font-family: "SF Quartzite";
src: url("SF Quartzite.ttf");
}
5.
Salve e teste
214
215
Captulo 22:
Propriedades CSS
22.1 Unidades de Medida CSS

Unidade
Descrio
percentual
in
"inch"
cm
centmetro
mm
milmetro
em
"1em" igual ao tamanho atual da fonte, portanto "2em" o dobro de seu

tamanho atual
ex
"1ex" o valor "x-height" de uma fonte ("x-height" geralmente metade

"font-size")
pt
"1pt" um ponto ("1pt" equivale a "1/72 inch")
pc
"1pc" medida em "picas" ("1pc" equivale a "12 points")
px
"1px" medida em "pixels" (equivale a pontos na tela)
22.2 Propriedades CSS
Existem inmeras propriedades CSS
Geralmente modificam um atributo do elemento HTML
Existem ainda as que se referem ao navegador
Podem alterar alguma valor padro do navegador conforme seu "engine"
Lista completa pode ser encontrada no endereo:
http://www.w3schools.com/cssref/
216
22.3 Valor das Propriedades
Conceito de "chave" mais "valor"

div {
border-style:solid;
border-width:5px;
border-color:red;
}
22.4 Shorthand
Existe a opo de declarao "shorthand"
Utiliza-se a propriedade principal com mltiplos valores
A ordem e quantidade de valores influenciam na exibio
Cada propriedade tem uma ordenao
No caso de "border" temos "style", "width" e "color"
div {
border: 5px solid red;
}
Da mesma forma algumas propriedades podem definir seus valores por
mltiplas declaraes
Neste caso deve-se optar por qual usar
div {
border-style:solid;
border-width:5px;
border-color: red green blue yellow;
}
217
EP:
Propriedades CSS
1.
Crie o arquivo "properties.html"
2.
Adicione 3 elementos <div> vazios

a.
Utilize a instruo do EMMET: div#div$*3
Nota: o uso da nomenclatura div com o nmero no recomendada para verses de

produo do cdigo HTML, est sendo utilizada aqui apenas para facilitar e aumentar a
produtividade das aulas.
3.
Atribua o seguinte estilo para o elemento "div1":

border-style: solid;
border-width: 5px;
border-color: blue;
4.
Salve e teste
5.
Na sequncia, adicione o estilo para o elemento "div2":

border: 3px dotted red;
6.
Salve e teste
a.
7.
Perceba que os estilos so similares e foram criados de forma diferente
Adicione o estilo para div3:

border-color: green;
8.
Salve e teste
a.
9.
Perceba que os quatro lados da borda recebeu a mesma cor
Altere o estilo para o elemento "div3":

border-color: green red;
10.
Salve e teste
a.
Perceba os lados que receberam cor
218
11.
Mais uma vez, altere, salve e teste:

border-color: green red blue;
12.
Finalmente, altere para:

border-color: green red blue yellow;
13.
Salve e teste
a.
Perceba que as cores foram colocadas em cada lado seguindo o sentido

horrio (top, left, bottom e right)
22.5 overflow
Propriedade que controla a visualizao das barras de rolagem
Por padro o contedo no cortado e pode sair dos limites de seu parent
container, sem nenhuma barra de rolagem
Configuraes de largura e altura tem papel fundamental para definir se

as barras sero exibidas automaticamente ou no
Valor
Exibe Barras
Descrio
visible
No
Padro, contedo no cortado e pode sair dos limites do

continer pai, nenhuma barra adicionada
hidden
No
Similar ao visible, porm corta o contedo nos limites do

continer pai
auto
Quando
necessrio
scroll
Sim
Se o contedo necessitar, barras de rolagem sero

adicionadas automaticamente
Barras de rolagem sempre sero exibidas, independente

do tamanho do contedo
219
22.6 background
Define as propriedades de fundo de um elemento
Quase todas as derivaes de background (como background-color)

aceitam os valores CSS initial e inherit
Shorthand:
background: color position size repeat origin clip attachment image|initial|inherit;
Propriedade
background-color
background-clip
background-image
background-position
Descrio
Cor de fundo
Corte/limites da cor de fundo
Imagem de fundo
Posio da imagem de fundo
background-size
Tamanho da imagem de fundo
background-repeat
Repetio da imagem de fundo
background-origin
Como a imagem de fundo ser anexada
Similar background-clip, porm para imagem
220
22.6.1
background-color
Cor de fundo
Padro transparente
Aceita valores vlidos de cores CSS:
background-color: rgb(255, 0, 255);

background-color: red;
background-color: #FF0;
EP:
background-color
1.
Crie um novo arquivo de nome background.html
2.
Adicione uma <div> com a classe alpha, o elemento <h1> como elemento
filho, com o texto background-color
a.
Utilize a instruo do EMMET:

div.alpha>h1{background-color}
3.

div {
width: 300px;
height: 200px;
display: inline-block;
border: 15px dotted black;
margin: 30px;
text-align: center
}
h1{
line-height: 155px;
221
4.
Crie a classe CSS de nome alpha com a instruo:

background-color: rgba(0, 255, 255, .2);
5.
Salve e teste
a.
22.6.2
Altere o valor do alpha para perceber a diferena

background-clip
Corte/limites do fundo
Valores aceitos so:
border-box
padding-box
content-box
background-clip: content-box;
EP:
background-clip
1.
Abra o arquivo background.html
2.
Adicione mais uma <div> com a classe clip, o elemento <h1> com o texto
background-clip
3.
Crie a classe CSS clip com as seguintes instrues:

padding: 0px 20px;
background-color: salmon;
background-clip: padding-box;
4.
Salve e teste
a.
5.
Perceba a diferena do preenchimento do fundo entre as duas <div>
Altere o valor da propriedade background-clip para:

background-clip: content-box;
6.
Salve e teste
222
22.6.3
background-image
Propriedade que permite adicionar uma imagem de fundo
Possvel definir mais de uma imagem
Basta separar por vrgula as URLs
Necessrio combinar outras configuraes de background para ter seu

funcionamento correto
background-image: url('image.jpg');
EP:
background-image
1.
2.
Adicione mais uma <div> com a classe image, o elemento <h1> com o texto
background-image
3.
Crie a classe CSS image, salve e teste:

background-image:
url('http://www.lorempixel.com/37/37/cats/2');
22.6.4
background-repeat
Define a repetio da imagem
A repetio pode ocorrer nos eixos:
repeat-x
repeat-y
repeat
no-repeat
223
EP:
1.
2.
background-repeat
a.
Adicione mais uma <div> com a classe repeat
b.
Elemento <h1> com o texto background-repeat
Crie a classe CSS com o seguinte cdigo:

background-image:
background-repeat: no-repeat;
3.
Salve e teste
4.
Altere a classe:
a.
Adicione altura de 300px
b.
Teste (um por vez) os demais eixos de repetio (apenas X, apenas Y e

ambos)
22.6.5
background-position
Posicionamento da imagem de fundo
Valores aceitos so:
top
bottom
left
right
center
xpos
ypos
x%
y%
224
Combinao dos valores ocorre em pares no eixo horizontal e vertical:

background-position: left top;
background-position: right center;
background-position: center bottom;
background-position: 25% 75%;
background-position: 300px 550px;
225
EP:
1.
2.
background-position
a.
Adicione mais uma <div> com a classe position
b.
Elemento <h1> com o texto background-position

height: 300px;
background-image:
background-position: center top;
3.
Altere a classe combinando em pares as seguintes posies (teste uma

combinao por vez):
4.
a.
top
b.
bottom
c.
right
d.
left
e.
center
Novamente altere a classe, porm com valores usando percentuais e em pixels

(teste um por vez):
a.
0 50%
b.
50% 50%
c.
100% 100%
d.
350px 60px
e.
-20px 50px
226
5.
Adicione uma segunda imagem modificando apenas as propriedades:

background-image:
url('http://www.lorempixel.com/90/90/cats/4'),
background-position: top center, bottom right;
6.
Salve e teste
22.6.6
background-size
Permite controlar o tamanho da imagem de fundo
Idealmente a imagem deve vir sempre do tamanho adequado e evitar a

alterao de seu tamanho por CSS
Distores e serrilhamentos podem ocorrer na imagem
Os valores podem ser:
Pixels
Percentual
cover e contain
Permite controlar o tamanho da imagem de fundo
Idealmente a imagem deve vir sempre do tamanho adequado e evitar a

alterao de seu tamanho por CSS
Distores e serrilhamentos podem ocorrer na imagem
Os valores podem ser em pixels ou em percentual
O primeiro valo refere-se largura e o segundo altura
background-size: 100px 50px;
Tambm possvel utilizar os valores:
auto: padro
cover: aumenta o tamanho da imagem para cobrir toda a rea de fundo,

sendo que partes da imagem podem no ser mostradas
227
contain: similar a cover, porm at o limite que no corte a imagem
background-size: cover;
EP:
1.
2.
background-size
a.
Adicione mais uma <div> com a classe size
b.
Elemento <h1> com o texto background-size

height: 300px;
background-image:
background-size: 150px 150px;
3.
4.
Salve e teste
a.
Perceba a imagem distorcida
b.
Visualize a imagem colando a URL em outra aba do navegador
Altere a propriedade background-size para (teste um por vez):

a.
cover
b.
contain
228
22.6.7
Define o comportamento da imagem de fundo com relao ao scroll da pgina:
local: acompanha a rolagem do contedo do elemento
scroll: no acompanha a rolagem do elemento
fixed: no acompanha a rolagem da tela
background-attachment: fixed;
EP:
1.
a.
Adicione mais uma <div> com a classe attachment
b.
Elemento <h1> com o texto background-attachment
c.
Texto dentro da <div>:

p>span>lorem*5
2.

width: 800px;
height: 300px;
background-image:
url(http://www.lorempixel.com/500/500/cats/8);
background-attachment: scroll;
overflow: auto;
3.
Salve e teste
a.
Perceba a barra de rolagem da tela e da <div>
b.
Faa o scroll e verifique as diferenas
4.
Altere o valor de background-attachment para local
5.

229
a.
Perceba que a imagem de fundo acompanha o contedo da <div>
6.
Finalmente altere o valor de background-attachment para fixed
7.
Salve e teste
a.
Perceba que a imagem est escondida
b.
Diminua o tamanho da tela para menos da metade
c.
Utilize a barra de rolagem da tela
22.6.8
background-origin
Define os limites de fundo para a imagem
Similar a propriedade background-clip porm para imagem
Os valores aceitos so:
padding-box
border-box
content-box
22.7 border
Define as bordas de um elemento
Quase todas as derivaes de border aceitam os valores CSS initial e

inherit
Shorthand:
border: width style color;
As propriedades de border so (define para os 4 lados):
border-width
border-style
border-color
230
Porm possvel especificar para qual(is) lado(s):
border-top-width
border-left-style
border-bottom-color
Ou mesmo o shorthand de cada lado:

border-top: width style color;
22.7.1
Shorthand Border
Em CSS cada shorthand pode mudar a forma e sequncia de definio

conforme a propriedade
No caso de estilos quadrados (border, padding, etc) existe uma lgica de uso
Definio ocorre no sentido horrio, para os 4 cantos (TOP, RIGHT,

BOTTOM, LEFT)
Exemplo
border-color: red blue;
Lados
solid TOP + RIGHT+ BOTTOM + LEFT
red TOP + BOTTOM
blue LEFT + RIGHT
2px TOP
border-width: 2px 3px 4px;
3px LEFT + RIGHT

4px BOTTOM
red TOP
border-color: red blue green yellow;
blue RIGHT
green BOTTOM
yellow LEFT
231
22.7.2
border-style
Define o estilo da borda:

dotted
dashed
solid
double
groove
ridge
inset
outset
22.7.3
CSS3 Border
Existem novas propriedades de borda do CSS3:
border-radius: contorno da borda
border-shadow: sombra
border-image: imagem a ser usada como borda
Porm tem seu funcionamento apenas em navegadores mais atuais
border-image funciona a partir do IE 11
Muitos navegadores requerem o uso de vendor properties
232
EP:
border
1.
Crie um novo arquivo de nome border.html
2.
Adicione 8 <div> com as classes:
3.
a.
dotted
b.
dashed
c.
solid
d.
double
e.
groove
f.
ridge
g.
inset
h.
outset

div {
width: 200px;
height: 200px;
}
4.
Crie as classes CSS com os respectivos valores para a propriedade style,

salve e teste:
.dotted {
border: 5px dotted red;
}
.dashed {
border: 3px dashed blue;
}
6.
Crie mais uma <div> com a classe custom

233
7.
Adicione o seguinte CSS, salve e teste:

.custom {
border-top:
5px
border-left:
3px
dashed
border-bottom:
1px
border-right:
dotted
8px
blue;
solid
double
red;
green;
purple;
}
8.
Crie mais uma <div> com a classe sense
9.
.sense {
border-width: 5px
border-style:
10px;
solid
border-color: deeppink
dashed
double;
chocolate skyblue firebrick;
22.8 padding
Define o espaamento entre o contedo do elemento e sua borda
Shorthand especifica os lados com espaamento:

padding: 5px;
padding: 20% 30%;
padding: 2px 5px 3px;
padding: 2px 5px 3px 4px;
234
EP:
padding
1.
Crie um novo arquivo de nome padding.html
2.
Adicione <div> com <h2> e <p>:

div>h2{Title}+p>lorem*5
3.

div{
padding: 50px;
}
4.
Adicione padding para os elementos, salve e teste:

div h2 {
padding: 10px 0;
}
div p {
padding: 20px 30px 40px;
}
22.9 margin
Define o espaamento entre elementos
Shorthand especifica os lados com margem:

margin: 10px;
margin: 5% 10%;
margin: 5px 10px 7px;
margin: 5px 10px 7px 3px;
235
EP:
margin
1.
Crie um novo arquivo de nome margin.html
2.
Adicione 2 <div> com <h2> e <p>:

a.
Perceba que foram criadas duas classes, uma para cada <div>
b.
Os ttulos tambm so diferentes para cada <div>
div.div$*2>h2{Div$}+p>lorem*5
3.

.div1 {
background-color: crimson;
margin: 20px;
}
.div2 {
background-color: cornsilk;
}
4.
Salve e teste
a.
5.
Perceba a diferena de posicionamentos
Adicione o CSS:
.div1 h2 {
margin-top: 50px;
}
6.
Salve e teste
a.
Perceba o posicionamento do elemento foi comprometido pela margin

de <h2>, deslocando <div> mais abaixo
236
7.
Altere o CSS:
.div1 h2 {
padding-top: 50px;
}
8.
Salve e teste
a.
Perceba o posicionamento do elemento <div> est em seu local original,

mas <h2> afastou-se do seu topo
b.
9.
Em ambos os casos a segunda <div> foi deslocada para baixo
(Opcional) Mantenha as duas instrues CSS e use o Chrome Developer Tools

para habilitar e desabilitar as propriedades:
.div1 h2 {
padding-top: 50px;
margin-top: 50px;
}
22.10 Texto
Propriedade
Valores
color
#F00
red
rgba(255,0,0,.5)
text-align
center
justify
right
left
Descrio
Altera a cor do texto
Alinha o texto
237
text-decoration
none
overline
line-through
underline
text-transform
uppercase
lowercase
capitalize
text-indent
10px
text-shadow
2px 2px #FF0
direction
ltr
rtl
letter-spacing
2px
Espaamento entre as letras
word-spacing
5px
Espaamento entre as palavras
word-wrap
break-word
vertical-align
baseline
middle
10px
sub
super
50%
top
font-size
18px
2em
font-family
times, sans-serif
serif
font-weight
bold
bolder
lighter
600
Linha de decorao do texto
Transforma o texto para caixa alta,

baixa ou primeira letra maiscula
Indentao do texto
Sombra abaixo do texto
Direo do texto
Quebra de linha
Alinhamento vertical do texto
Tamanho da fonte
Famlia da fonte
Peso (negrito) da fonte
238
22.10.1
CSS3 Text
Alm das mencionadas existem ainda:
hanging-punctuation
punctuation-trim
text-align-last
text-emphasis
text-justify
Porm o suporte estas bastante limitado
EP:
Mesmo os navegadores atuais no suportam muitas delas
Texto
1.
Crie um novo arquivo de nome text.html
2.
Adicine <h1> e 3 <p> com texto:
h1.title{Title}+a.link[href="#"]{Link $}*5+(p.paragraph$>lorem*3)*3
3.
4.
Salve e teste
a.
Identifique o contedo HTML no navegador
b.
Verifique as classes utilizadas no cdigo
Crie as classes necessrias

a.
5.
Adicione apenas com cores de fundo diferentes
Adicione o seguinte CSS para a classe de <h1>:

text-align: center;
text-decoration: overline;
font-size: 300%;
6.
Salve e teste
239
7.
Altere o estilo dos links:

text-decoration: none;
font-size: 2em;
8.
Salve e teste
9.
Altere o estilo do primeiro pargrafo:

text-align: justify;
font-size: 13pc;
text-indent: 100px;
10.
Salve e teste
11.

.paragraph1 > span:first-child{
text-decoration: line-through;
font-transform: uppercase;
}
12.
Salve e teste
13.
Altere o segundo pargrafo:

font-size: 20px;
text-align: right;
letter-spacing: 8px;
word-spacing: 30px;
14.
Salve e teste
15.
Altere o ltimo pargrafo:

font-size: 30pt;
text-shadow: 2px 2px yellow;
16.
Salve e teste
240
22.11
list-style
Estiliza os marcadores de lista de <ul> e <ol>
Shorthand:
list-style: list-style-type list-style-position list-style-image;
22.11.1
list-style-type
Define o estilo do marcador da lista
Tipo de marcador depende se a tag <ul> ou <ol>
Para <ul>:
disc
circle
square
none
Para <ol> existem diversas opes:
armenian
cjk-ideographic
decimal
decimal-leading-zero
georgian
hebrew
hiragana
hiragana-iroha
katakana
katakana-iroha
lower-alpha
lower-greek
lower-latin
lower-roman
241
upper-alpha
upper-latin
upper-roman
none
ol {
list-style-type: decimal;
}
ul {
list-style-type: square;
}
22.11.2
list-style-position
Os marcadores de lista podem ser posicionados dentro do continer que o

contm ou ainda fora deste:
inside
outside
ul {
list-style-position: outside;
}
242
22.11.3
list-style-image
Permite utilizar uma imagem como marcador

ul {
list-style-image: url(icon.png');
}
EP:
list-style
1.
Crie um novo arquivo de nome list.html
2.
Adicione <ul> e <ol> com alguns itens dentro de <div>:

ul>li{Unordered Item $}*5 <TAB>
ol>li{Ordered Item $}*5 <TAB>
3.
Salve e teste
a.
4.
Visualize os marcadores padres de <ul> e <ol>

li {
border: 2px solid;
margin: 5px;
}
5.
Salve e teste
6.
Altere o estilo de <ul> e <ol>:

ul { list-style: circle inside ; }
ol { list-style: upper-roman; }
7.
Salve e teste
243
8.
Altere <ul> para usar uma imagem:

ul {
list-style: circle inside
url('http://lorempixel.com/30/30/food/9/');
}
9.
(Opcional) Altere a propriedade list-style de <ol> para os demais valores

permitidos
22.12
Colunas
Existem algumas propriedade CSS3 que permite definir colunas
Por ser relativamente nova, seu uso deve ocorrer apenas com
navegadores modernos
Nem todas as propriedades so suportadas (Ex: column-fill)
Necessitam de vendor properties:
-moz-
-webkit-
Propriedade
Valor
column-count
column-gap
20px
column-rule
3px dotted red
column-width
100px
Descrio
Nmero de colunas
Espaamento entre colunas
Shorthand para exibir o separador
de colunas
Largura da coluna
244
EP:
Colunas
1.
Crie um novo arquivo de nome columns.html
2.
Adicione <div> com <p> e texto lorem ipsum:

div.columns>span>lorem*5
3.
Salve e teste
a.
4.
Verifique a disposio do texto
Adicione estilo para <div>:

div{
width: 1000px;
color: white
background-color: green;
padding: 20px;
margin: auto;
}
5.
Crie a classe para colunas:

.columns {
column-count:
8;
-moz-column-count:
8;
-webkit-column-count:
8;
}
6.
Salve e teste
245
7.
Adicione na classe columns:

column-gap:
30px;
-moz-column-gap:
30px;
-webkit-column-gap: 30px;
8.
Salve e teste
9.
Novamente, adicione na classe columns:

column-rule:
3px outset lime;
-moz-column-rule:
3px outset lime;
-webkit-column-rule:
3px outset lime;
10.
Salve e teste
11.
(Opcional) Altere a quantidade e o espaamento das colunas
246
247
Captulo 23:
At Rules
23.1 Sobre
Instruo CSS que se inicia com o caractere @ seguido pelo identificador
Pode ser encerrado pelo caractere ponto e vrgula ou do bloco CSS
Muitos ainda esto em desenvolvimento
Porm existem aqueles essenciais para um "layout" responsivo
23.2 Principais
At rule
Exemplo
Descrio
@charset
@charset "UTF-8"
Define o "encoding" usado pelo

arquivo CSS
@import
@import url("print.css") print;
Importa regras de estilos de um

arquivo CSS
@media
@media print {
body { font-size: 10pt }
}
Regra condicional aplicada se o

"device" possuir
@font-face
@font-face {
font-family:
myFirstFont;
src:
url('Sansation_Light.ttf'
),
}
Permite utilizar fontes adicionais
248
23.3 @charset
Define o encoding usado no arquivo CSS
Deve ser a primeira instruo no arquivo
No deve conter nem mesmo espao em branco antes dele
Recebe o valor entre aspas
Deve ser um valor vlido de conjunto de caracteres
@charset "UTF-8"
23.4 @import
Importa regras de estilos de arquivos CSS
Deve ser a primeira instruo do arquivo CSS
Exceto se usada "@charset"
Sintaxe contm a URL e opcionalmente a lista de "media queries" separadas por

vrgula
@import url("tv.css") tv, projection;
O cdigo importado adicionado ao arquivo CSS
Similar ao ato de copiar e colar o cdigo do arquivo importado para o

arquivo que o importa
Por ser a primeira tag o cdigo CSS sofre as regras de precedncia
O carregamento do cdigo CSS importado diferente do da pgina HTML
Em alguns casos pode ocorrer um atraso do carregamento do CSS

importado e a pgina HTML aparecer sem estilo
@import url("print.css") print;

@import url("tv.css") tv, projection;
@import 'custom.css';
@import url('landscape.css') screen and
(orientation:landscape);
249
/*fine.css*/
h1{ color: blue; }
-------------------/*default.css*/
@import url('fine.css')
h1{ color: red; }
/* Imported code will be like this at default.css:

h1{ color: blue; }
h1{ color: red; }
*/
EP:
@import
1.
Crie no projeto uma pasta de nome "import"
2.
Crie os arquivos HTML e CSS e vincule um ao outro
3.
4.
a.
No arquivo HTML adicione uma "tag" <h1> com valor "CSS Import"
b.
No arquivo CSS adicione o estilo "color" com valor "red" para <h1>
Crie um segundo arquivo CSS de nome "additional.css"

a.
No vincule este arquivo no HTML
b.
Adicione o estilo "color" com valor "blue" para <h1>
No arquivo CSS vinculado ao HTML adicione o cdigo abaixo como a primeira

instruo:
@import url("additional.css");
5.
Salve e teste
a.
Perceba que o estilo do arquivo importado no foi aplicado
b.
Abra o Chrome Developer Tools e inspecione o estilo do elemento, os

dois estilos estaro presentes, sendo que um deles foi sobrescrito
250
6.
Remova o estilo de cor de <h1> do arquivo import.css

a.
7.
Apenas o arquivo additional.css possuir o estilo de cor para <h1>
Salve e teste
a.
Sem o conflito, a cor foi aplicada do arquivo importado
23.5 @font-face
Permite carregar e utilizar uma fonte customizada
Devem ser configuradas as propriedades:
font-family nome da fonte
src URL com o caminho para o arquivo da fonte
No caso de uso das variaes de fonte (negrito, itlico, etc) estas tambm
devem ser carregadas para uso
No caso de uso das variaes de fonte (negrito, itlico, etc) estas tambm
devem ser carregadas para uso
O tamanho do arquivo da fonte influenciar no tempo de carregamento da

pgina
Similar a uma imagem, quanto mais pesado (kb) o arquivo maior ser o
tempo de carregamento
Quantidade de arquivos tambm influencia
@font-face {
font-family: myCustomFont;
src: url(sansation.woff);
}
body { font-family: myCustomFont; }
/* Adding font italic and bold */
251
@font-face {
src: url(sansation_italic.woff);
font-style: italic;
}
@font-face {
src: url(sansation_bold.woff);
font-weight: bold;
}
23.5.1
Suporte de Fontes
WOFF
OTF
TTF
SVG
EOT
IE
---
Firefox
3.6
3.5
3.5
---
---
Opera
11.1
10
10
10
---
Safari
5.1
3.1
3.1
3.1
---
Chrome
0.3
---
252
EP:
@font-face
1.
Crie um novo arquivo de nome font-face.html
2.
Baixe uma fonte da Internet
3.
a.
Para maior suporte procure um arquivo da extenso .ttf ou .otf
b.
Salve o arquivo na pasta adequada do seu projeto
c.
(Opcional) Baixe os arquivos itlico e negrito tambm
Adicione texto lorem ipsum:

p>lorem*50
4.

@font-face {
src: url(xxxxxxx.xxx);
}
body { font-family: myCustomFont; }
5.
Salve e teste
6.
(Opcional) Usando fonte em itlico ou negrito

a.
Crie outra instruo @font-face
b.
Mantenha o mesmo nome da fonte
c.
Aponte para o caminho correto
d.
Adicione propriedade na qual se refere
@font-face {
src: url(xxxxxxx_italic.xxx);
font-style: italic;
}
253
23.6 @media
Aninha instrues CSS com uma condio definida pela "media query"
"Media queries" definem o tipo de mdia na qual a declarao CSS

aninhada ser aplicada
Seu valor um "media type" e define a condio para que o bloco CSS
aninhado seja aplicado
Media Type
Descrio
all
Todos os "devices"
braille
Braille "devices"
embossed
Impressoras braille
handheld
So "devices" de mo, tipicamente de telas pequenas
print
Impressoras
projection
Projetores
screen
Telas de computadores
speech
Sintetizadores de voz
tty
Terminais, tele-texto
tv
Para "devices" do tipo TV
254
@media print {
body { font-size: 10pt }
}
@media screen {
body { font-size: 13px }
}
@media screen, print {
body { line-height: 1.2 }
}
EP:
@media
1.
Crie um arquivo de nome media.html
2.
Adicione texto lorem ipsum:

p>lorem*100
3.
Adicione o CSS:
@media print {
body { font-size: 5pt; }
}
@media screen {
body { font-size: 30px; }
}
4.
255
256
Captulo 24: Box Model

24.1 Sobre
Todos os elementos HTML podem ser considerados caixas
Termo "box model" refere-se a caixa na qual os elementos esto inseridos
Essencial entender seu funcionamento para se definir a largura e altura de um

elemento
24.2 reas
4 reas retangulares
"margin"
"border"
Fundo
"padding"
Transparente
Recebe o fundo do contedo
"content"
Fundo
257
24.3 Espaamento do Contedo
Um contedo HTML respeita os tamanhos:
Margem
Borda
Espaamento entre contedo e borda
Prprio contedo
Assim um contedo composto pelos tamanhos:
contedo + padding + border + margin = actual size
O valor do espaamento pode variar conforme o navegador
Ideal usar CSS Reset
258
24.4 Largura e Altura
Para definir a largura e altura de um elemento basta utilizar as respectivas

propriedades
"width"
"height"
As propriedades referem-se apenas a "content area"
O tamanho total do elemento calculado com a somatria dos itens que

compem o "box model"
Clculo da largura:
Largura total do elemento =
width
+ left padding + right padding
+ left border + right border
+ left margin + right margin
Clculo da altura:
Altura total do elemento =
height
+ top padding + bottom padding
+ top border + bottom border
+ top margin + bottom margin
259
EP:
1.
Tamanho do Elemento
Calcule o tamanho do elemento conforme o CSS:
width: 250px;
padding: 10px;
border: 5px solid gray;
margin: 10px;
2.
Largura total ser 300 "pixels"

250px (width)
+
20px (left + right padding)
+
10px (left + right border)
+
20px (left + right margin)
=
3.
300px
Assumindo que voc tenha apenas 250 "pixels" de largura na tela, qual seriam
os valores corretos da instruo CSS inicial ?
4.
Resposta:
a.
Existem outras possibilidades de resposta
width: 220px;
padding: 10px;
border: 5px solid gray;
margin: 0px;
260
24.5 CSS Reset
Cada navegador pode definir bordas, espaamento, fontes de formas diferentes
Isso pode dificultar muito o posicionamento e layout em mais de um

navegador
So instrues CSS que eliminam os estilos padres definidos pelo navegador
Ex: cores, tamanhos de fonte, margens, efeitos, decoraes, etc
Basta vincular o arquivo CSS no documento HTML
Devido a precedncia CSS, deve ser sempre o primeiro arquivo CSS

vnculado ao HTML
Mais comuns so os arquivos do Eric Meyer e do Yahoo

http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
http://yui.yahooapis.com/2.7.0/build/reset/reset-min.css
EP:
1.
CSS Reset
Baixe o arquivo CSS Reset do Eric Meyer
a.
Salve no projeto em uma pasta adequada
2.
Crie um novo arquivo de nome reset.html
3.
Vncule o arquivo CSS no HTML
4.
Crie uma "tag" <h1> com o valor "CSS Reset"
5.
Salve e teste
a.
Perceba que <h1> no tem a fonte grande em negrito
261
262
Captulo 25:
Posicionamento
25.1 Dimenses
Propriedades CSS que permitem controlar a altura e largura de um elemento
Tambm podem ser definidos valores mximos e mnimos de largura e altura
25.1.1
Valores das Dimenses
Propriedade
Descrio
auto
Navegador efetua os clculos para determinar a dimenso
none
Nenhum valor
length
Dimenso em "px", "cm", etc
inherit
Dimenso em percentual, limitado por seu "parent element"
Herda a dimenso do "parent element"
263
25.1.2
Propriedades de Dimenses
Propriedade
Caracterstica
auto
length
inherit
none
max-height
Altura mxima
---
max-width
Largura mxima
---
min-height
Altura mnima
---
---
min-width
Largura mnima
---
---
height
Altura
---
width
Largura
---
25.2 display
Os elementos HTML so adicionados na tela conforme sua forma de exibio
Em linha ("inline") ou em bloco ("block")
Este comportamento pode ser alterado atravs de CSS
A alterao pode comprometer a exibio dos elementos seguintes
comum o uso de <div> para layout do documento
Agrupa os itens que respeitaro a posio da "div"
Deve-se evitar o uso de tabelas
264
25.2.1
EP:
inline vs block
inline
Ocupam o espao necessrio para seu prprio contedo
Prximo contedo ser adicionado da sequncia
Ex: <a>, <label>, <span>, <small>, <strong>, <em>
block
Elementos de bloco ocupam toda a largura do documento
Prximo contedo ser adicionado na linha seguinte
Ex: <h1>, <p>, <div>, <ul>
inline vs block
1.
Crie um novo arquivo chamado display.html
2.
Adicione o seguinte cdigo HTML
h1{Title}+p>(span>lorem1000)+img[src=http://lorempixel.com/100/100/cats]+(span>lorem10
00)
3.
Salve, teste
a.
Verifique se as "tags" <h1>, <span> e <img> possuem exibio em linha

ou bloco
b.
4.
Use o Chrome Developer Tools, para verificar o tipo de exibio
Aps o final de </span>, adicione pargrafos

p*3>lorem100
5.
Utilize CSS e aplique fundos com cores diferentes para cada tipo de elemento
6.
Salve e teste
a.
Perceba quais os elementos que ocupam toda a tela
265
25.2.2
Possvel modificar um elemento com exibio "inline" para "block" e vice-versa
Propriedade "display" permite configurar a exibio com os valores:
"inline"
"block"
"none"
li {
display:inline;
}
EP:
1.
Crie um novo arquivo de nome display_change.html
2.
Adicione um menu utilizando <ul>

ul>li*5>a[href=#]{Link $}
3.
Salve e teste
a.
4.
Identifique o tipo de exibio da lista
Altere o tipo de exibio atravs do cdigo CSS:

li {
list-style: none;
display: inline;
}
5.
Salve e teste
266
6.

<p>
Text inside <p> tag.
<span>First <span> tag.</span>
<span>Second <span> tag.</span>
<span>Third <span> tag.</span>
</p>
7.
Salve e teste
a.
8.
Perceba a exibio inline de <span>
Altere a exibio para "block" do elemento <span>

span {
display:block;
}
9.
Salve e teste
25.2.3
Removendo da Exibio
A exibio de um elemento definida pela propriedade "display"
Se o valor da propriedade for "none"
Elemento removido da tela
Seu espao ocupado pelo seguinte no fluxo do documento
display: none;
267
25.2.4
Visibilidade
A visibilidade de um elemento definida pela propriedade "visibility"
Se o valor da propriedade for "hidden"
Elemento ficar invisvel

Seu espao continua preservado na tela
visibility: hidden;
EP:
1.
Exibio vs Visibilidade
Abra o endereo abaixo no navegador:
http://codepen.io/pen/
2.
No campo escrito HTML, adicione o seguinte cdigo:

<h1>This is a visible heading</h1>
<h1>This <h1> will disappear</h1>
<p>
Notice that the hidden heading still takes up space.
</p>
3.
No campo escrito CSS, adicione o seguinte estilo:

h1 ~ h1 {
background-color: #f00;
}
4.
Perceba o espao ocupado por <h1>
268
5.
Modifique o CSS para:

h1 ~ h1 {
display:none;
}
6.
Perceba que o espao ocupado por <h1> deixou de existir
7.
Modifique o CSS para:

a.
Comente a ltima instruo utilizando o atalho CTRL + /
h1 ~ h1 {
/*display:none;*/
visibility: hidden;
8.
}
Perceba que o espao ocupado por <h1> foi mantido
9.
Salve o EP como arquivo display_background.html

a.
Clique no boto Save
b.
Clique no boto Share
c.
Clique no boto Export
25.3 position
Permite posicionar um elemento com base nas regras de posicionamento
Pode receber os seguintes valores:
static (padro)
relative
absolute
fixed
Quando alterada pode ser ideal para:
269
Animaes
Popups
Qualquer elemento que necessite sair do fluxo natural do documento
Posicionamento dos elementos ocorre com base nos valores das propriedades:
top
bottom
left
right
Propriedades "top", "bottom", "left" e "right" sero respeitadas apenas
Se o valor de position for diferente de static
Se as propriedades forem declaradas com algum valor
div {
position: relative;
top: 20px;
left: 50px;
}
25.3.1
static
Padro do navegador
Elemento renderizado na posio original, conforme o fluxo do documento
Coordenadas "top", "bottom", "left" e "right" no so respeitadas
270
EP:
1.
static
http://jsfiddle.net/
2.
Identifique o campo com o nome HTML e adicione o seguinte cdigo:

div#div$*3
3.
Identifique o campo CSS e adicione:

div {
width: 200px;
height: 200px;
}
#div1 {
background: skyblue;
}
#div2 {
background: gold;
}
#div3 {
background: salmon;
4.
}
Clique no boto Run localizado na barra superior do lado direito
5.
Altere o CSS para:

#div2 {
background: gold;
position: static;
top: 100px;
}
271
6.
Clique no boto Run

a.
Perceba que nada ocorreu, a distncia definida pela propriedade top
7.
Altere o valor position de static para relative
8.
Rode novamente
a.
9.
10.
A div2 deslocou 100 pixels para baixo
Volte o valor para static

Salve o EP no arquivo static.html
a.
Clique no boto Save
b.
Adicione na URL o valor /show
c.
Clique em CTRL + S
d.
Modifique o nome do arquivo e salve na pasta position no projeto
e.
Guarde o endereo da URL do JSFiddle, uma vez salvo, com etse o

cdigo pode ser compartilhado e recuperado
25.3.2
relative
Elemento renderizado na posio original
O ponto inicial (0,0) a posio na qual o elemento est
Porm respeita os valores das propriedades
top
bottom
left
right
Se as coordenadas no forem declaradas nenhum efeito visual ocorrer
O espao ocupado inicialmente mantido
Elemento deslocado para a nova coordenada
Nova coordenada pode fazer com que o elemento sobreponha outro
272
EP:
1.
relative
Volte ao JSFiddle
a.
2.
3.
Utilize o cdigo URL salvo no EP anterior
Clique no boto Fork localizado na barra superior ao lado do boto Save

a.
Uma nova verso do cdigo criada
b.
A original ser mantida
c.
Ambas as verses podero ser acessadas pelas diferentes URLs
Altere o cdigo CSS de div2 para:

position:relative;
top: 20px;
left: 20px;
4.
5.
Rode o cdigo
a.
Veja o deslocamento da div2
b.
Perceba que o espao inicialmente ocupado pela div2 foi mantido
Salve o EP no arquivo de nome relative.html
25.3.3
absolute
Este posicionamento toma como referncia o primeiro parent container que

contiver o valor "position" diferente de "static"
O ponto inicial (0,0) a partir da posio do elemento diferente de static

encontrado
Caso no seja encontrado, ser usado o elemento <html>, ou seja, o

ponto incial (0,0) da pgina
No mantm o espao inicial do elemento
O prximo elemento ocupa o lugar do elemento posicionado com

absolute
273
EP:
absolute
1.
Abra o JSFiddle com o EP anterior e clique em Fork
2.
Altere o cdigo CSS de div2 para:

#div2 {
background: gold;
position: absolute;
top: 20px;
left: 20px;
}
4.
Rode o cdigo
a.
Perceba que no existe nenhum parent container com propriedade

position diferente de static (padro)
b.
O elemento posicionando utilizou como referncia o ponto inicial da

pgina (0,0)
c.
O espao inicialmente ocupado pela div2 foi utilizado pelo elemento na

sequncia (div3)
5.
Altere o cdigo HTML, envolvendo a div2 dentro de outra <div>:

<div id="divContainer">
<div id="div2"></div>
</div>
6.
Adicione a seguinte instruo CSS:

#divContainer {
background: lime;
}
7.
Rode e visualize os elementos

a.
<div> com posicionamento absoluto continua na mesma posio
274
8.
Altere o cdigo de divContainer acrescentando:

position: relative;
9.
Rode
a.
Perceba que div2 encontrou um parent container diferente de static e

utilizou sua posio como referncia inicial (0,0)
b.
J a divContainer permaneceu no mesmo local, pois nenhuma

propriedade com as coordenadas foi usada
10.
Altere o posicionamento da divContainer:

#divContainer {
background: lime;
position: relative;
top: 20px;
left: 20px;
}
11.
Rode
a.
Perceba que a divContainer se deslocou seguindo as regras do

posicionamento relativo
b.
12.
Altere o posicionamento de divContainer para absolute e rode

a.
13.
A posio da div2 baseada no ponto inicial da divContainer

Antes de rodar tente prever onde as <div> estaro
Salve o EP no arquivo absolute.html
275
25.3.4
fixed
Mantm uma posio fixa na tela mesmo quando for utilizada a barra de rolagem
Geralmente utilizada para menus ou marcadores laterais no site
Ponto inicial (0,0) para posicionamento ser o da pgina
Seu espao ser ocupado pelo prximo elemento
EP:
fixed
1.
Abra o JSFiddle do EP static ou absolute
2.
Remova todas as propriedades de posicionamento de div2
3.
Adicione texto aps o fechamento da ltima <div>

p>lorem1000
4.
Altere o posicionamento da div1 adicionando o CSS:

position: fixed;
top: 20px;
5.
left: 20px;
Rode
a.
6.
Faa scroll da pgina e perceba que div1 no se movimenta
Salve o EP no arquivo de nome fixed.html
276
25.3.5
z-index
Quando os elementos saem do fluxo padro da tela, elementos podem se

sobrepor
A propriedade "z-index" especifica a ordem do empilhamento
Valores podem ser positivos ou negativos
Positivo "envia para frente"
Negativo "envia para traz"
div {
position: absolute;
top: 10px;
left: 10px;
z-index: -1;
}
EP:
z-index
1.
Crie um novo arquivo de nome z-index.html
2.

div#div$*3+p>lorem1000
3.
Configure o CSS da seguinte maneira:

a.
Todas as <div> devem ter o tamanho de 200 pixels (largura e altura) e

posicionamento relativo
b.
4.
Cada uma delas deve ter uma cor de fundo diferente
Altere o posicionamento da div2:

top: 20px;
left: 20px;
277
5.
Salve e teste
a.
Perceba que div3 ficou sobre div2 por ter sido a ltima <div> com
posicionamento relativo adicionada na tela
6.
Altere o CSS de div3 adicionando a instruo:

z-index: -1;
7.
Salve e teste
a.
8.
Identifique a ordem dos elementos sobrepostos
Altere o posicionamento da div3 para relativo, afastando-se 100 pixels do topo

e da esquerda
9.
Salve e teste
a.
Devido ao valor de z-index ser negativo ela ficou atrs do texto
10.
Altere o valor de z-index para um valor positivo
11.
Salve e teste
a.
25.3.6
Perceba que div3 est na frente do texto
Ancorando Elementos
Utilizando-se posicionamento absoluto possvel ancorar elementos na pgina
Fixa cada cada um dos lados na posio definida
Sempre manter a posio, independente da redimenso da pgina
Esta tcnica permite definir:
largura: left e right
altura: top e bottom
278
EP:
Ancorando Elementos
1.
Crie um novo arquivo de nome anchored.html
2.
Vincule o arquivo com as instrues CSS Reset
3.
Adicione uma <div> com a classe anchored:

div#anchored
4.
5.
Configure a classe para:

a.
Ter uma cor de fundo
b.
Altura de 200 pixels
Adicione as seguintes instrues na classe criada:

position: absolute;
left: 20px;
right: 20px;
6.
7.
Salve e teste
a.
Perceba o distanciamento da esquerda e da direita de 20 pixels
b.
Redimensione a tela e observe que a distncia ser mantida
Faa o mesmo para altura

a.
8.
Configure para 20 pixels de distncia da parte superior e inferior
Salve e teste
a.
Novamente redimensione a janela, tanto para os lados como para cima e

para baixo
279
9.
10.
Altere os valores para 20%

Salve e teste
a.
11.
Perceba que a distncia muda conforme o clculo de largura da tela
(Opcional) Altere o posicionamento para relativo

a.
Verifique que no funciona adequadamente
b.
Volte para absoluto aps o teste
25.4 Flutuando Elementos
Permite que o elemento seja "flutuado" a esquerda ou a direita
Posicionado de forma que outros elementos fiquem "em volta" deste
Ex: texto envolvendo a imagem flutuada
Flutuao ocorre apenas no sentido horizontal
Elemento "flutuado" movido para o lado definido no ponto mximo possvel
Totalmente a direita ou totalmente a esquerda, desde que haja espao
Limitado pelo seu parent container
Todos os elementos aps o elemento "flutuado" tero seu fluxo em volta deste
25.4.1
No possvel flutuar para cima ou para baixo
Elementos anteriores ao "flutuado" no sofrem efeito do fluxo
float
Propriedade CSS que permite a "flutuao" de elementos
right
left
none
inherit
280
EP:
float
1.
Crie um novo arquivo de nome "float.html"
2.
Adicione 10 pargrafos, com a seguinte configurao:

p[title=$]*10>lorem100
3.
Antes do quinto pargrafo adicione uma imagem do seguinte endereo:

http://lorempixel.com/200/200
4.

p[title='4'] {
}
p[title='5'] {
}
p[title='5'] ~ p {
}
5.
Salve e teste
6.
Flutue a imagem:
img {
float: right;
}
7.
Salve e teste
a.
So afetados com a flutuao todos os elementos aps a imagem
281
25.4.2
clear
Eventualmente ser necessrio interromper a flutuao de outros elementos
A propriedade "clear" especifica quais os lados devem ser suprimidos da

"flutuao"
Aplica-se ao elemento que est seguindo o fluxo de "flutuao", na mesma

direo
EP:
Ex: float: left clear: left;
Valores so:
"left" suprime o efeito da flutuao esquerda
"right" suprime o efeito da flutuao direita
"both" suprime o efeito da flutuao esquerda e direita
clear
1.
Abra novamente o arquivo "float.html"
2.
Pare a flutuao do sexto pargrafo com o CSS:

p[title='6'] {
clear: right;
3.
}
Salve e teste
25.4.3
Se elementos forem flutuados um aps o outro, estes ficaro dispostos um ao

lado do outro
Caso o espao no seja suficiente a "flutuao" ocorre na prxima linha
Este comportamento o mesmo de elementos no flutuados
Por ser um comportamento esperado algo mais natural
Mas pode quebrar visualmente o layout do seu site
282
EP:
1.
Crie um arquivo de nome "cats_gallery.html"
2.
Adicione 10 "tags" <img> com a seguinte configurao:

img.gallery[src=http://lorempixel.com/100/90/cats/$]*10
3.
Salve e teste
a.
Redimensione a janela e perceba que enquanto existe espao tudo fica

em uma nica linha
4.
Flutue as imagens a esquerda
5.
Salve e teste
a.
Redimensione a a janela novamente e perceba que o comportamento foi

mantido
6.
Adicione <h3> antes da primeira imagem

h3{Row 1}
7.
Adicione um segundo <h3> aps a quinta imagem:

<img src="http://lorempixel.com/100/90/cats/5"
class="gallery">
<h3>Row 2</h3>
8.
9.
<img src="http://lorempixel.com/100/90/cats/6"
class="gallery">
Salve e teste
a.
Perceba o alinhamento incorreto do segundo <h3>
b.
Corrija utilizando a propriedade clear
Possvel soluo:
h3:nth-of-type(2){
clear: left;
10.
}
Salve e teste
a.
Redimensione a tela para o tamanho mnimo possvel e perceba que o

layout pode estar comprometido
283
11.
Defina um tamanho mnimo para <body>:

body {
min-width: 1024px;
}
12.
Salve e teste
a.
25.4.4
Repita o teste anterior
Clearfix
Ocorre um problema quando o elemento "flutuado" est dentro de um "container

box"
Quando um elemento "flutuado" seu "pai" no mais o contm
O elemento no ajusta a altura do continer ao do elemento "flutuado"

A propriedade "float" remove o elemento do fluxo
Soluo para resolver o problema "zero height" do continer que possui o

elemento flutuado
Mais tradicional adicionar um "ponto" invisvel na tela para ocupar o

lugar do elemento "flutuado" e utilizar a propriedade "clear" com valor
"both"
Esta uma soluo que apesar de necessria tem sido

desencorajada
Muitas vezes possvel solucionar com a propriedade "display"

com valor "inline-block"
Dependendo do navegador esta tcnica pode no ser

efetiva
284
EP:
Clearfix
1.
Crie um arquivo de nome "clearfix.html"
2.
Adicione uma <div> com texto e imagem:

a.
Instruo do Emmet deve ser feita em uma nica linha
(div.container>(span>lorem1000)+img[src=http://lorempixel.com/80
0/900]+(span>lorem100))+div.footer>h3>lorem
3.
Salve e teste
4.
No CSS:
a.
Flutue a imagem direita
b.
Adicione uma cores de fundo diferentes para as classes .container e

.footer
c.
Tambm adicione uma cor de fundo (diferente das demais) para o

segundo elemento <span>, utilizando seletores avanados
5.
O segundo elemento do passo 4 <span> pode ser selecionado atravs do uso

de um dos seletores:
6.
a.
last-child
b.
last-of-type
c.
nth-of-type(2)
d.
nth-last-of-type(1)
e.
nth-last-child(1)
Salve e teste
a.
7.
Perceba que a imagem invade a rea do elemento .footer
Tente limpar a flutuao de .footer

clear: right;
8.
Salve e teste
a.
O problema no foi resolvido corretamente, pois a imagem continua

saindo para fora do seu parent container (est fora dos limites <div>)
9.
Apague a instruo clear: right de .footer
285
10.
Baixe e salve o cdigo ClearFix no projeto:

a.
Analise o cdigo CSS e tente interpret-lo
http://cssmatter.com/blog/css-clearfix/
11.
Vincule o arquivo pgina HTML
12.
Adicione a classe clearfix na <div>:

<div class="container clearfix">
13.
Salve e teste
a.
Perceba que a <div> conseguiu calcular corretamente o tamanho da

imagem e adequou seu tamanho a esta
b.
A imagem no mais interfere no elemento com a classe .footer
25.5 Alinhamento
Possvel alinhar os elementos usando algumas tcnicas CSS
Centralizar
Propriedade "margin" com valor "auto"
Esquerda e direita
Propriedade "position" com valor "absolute"
Usando a propriedade "float" com valores "left" e "right"
25.6 Centralizando
Ocorre sobre elementos em bloco
Como visto anteriormente, um elemento em bloco utiliza toda a largura

disponvel e possui uma quebra de linha antes e depois do elemento
286
A margem deve ser definida para a esquerda e direita como "auto" para
centralizar o elemento em bloco
Especifica que as margens devem ser divididas igualmente
Quando as margens possuem o mesmo valor do lado esquerdo e direito o

elemento ser centralizado
.center {
margin: 0 auto;
width:70%;
}
EP:
Centralizando
1.
Crie um novo arquivo HTML
2.
Adicione uma <div> com <span> e lorem ipsum:

div.center>span[title=$]*2>lorem
3.
Indente o cdigo de forma adequada leitura
4.
No arquivo CSS, adicione o estilo a seguir:

.center {
margin: auto;
width: 500px;
background-color: salmon;
}
5.
Salve e teste
a.
6.
Redimensione a janela e verifique se alguma mudana ocorre
Altere o valor da largura para "70%"
287
7.
Salve e teste
a.
8.
Finalmente altere o valor da largura para "100%"

a.
9.
Refaa o teste de redimensionamento

No existe margem disponvel para centralizar o contedo
Retorne o valor da largura para "70%"
10.
Remova o atributo "class" de <div> e atribua ao primeiro elemento <span>
11.
Salve e teste
a.
Perceba que a margem no pode ser calculada para elementos inline,

pois este automaticamente ocupa o espao necessrio para exibio de
seu contedo
12.
Na classe "center" altere a exibio de <span> de "inline" para "block"
13.
Salve e teste
25.7 Outras Tcnicas

http://designshack.net/articles/css/how-to-center-anything-with-css/
http://blog.themeforest.net/tutorials/vertical-centering-with-css/
EP:
1.
Outras Tcnicas
Crie diferentes layouts
a.
2.
Utilize cores e ou bordas para marcar cada layout
Redimensione a tela
a.
No deve haver sobreposio de contedo
b.
Estrutura base deve ser mantida
c.
Barras de rolagem devem ser criadas quando necessrias
d.
Opcionalmente pode aumentar quando redimensionado
288
3.
Layouts:
4.
Soluo:
http://www.primarycss.com/
289
290
Captulo 26: Tipos de Layout

26.1 Fixo
So aqueles nos quais o valores so definidos de forma fixa
Valor que no recalculado quando a janela redimensionada
Barras de rolagem so criadas quando o tamanho for inferior ao definido
width: 1280px;
height: 768px;
EP:
Fixo
1.
Crie um novo arquivo de nome layout_fixed.html
2.
Adicione 5 <div> com <h1>

a.
Instruo do Emmet deve ser feita em uma nica linha
(div.head>h1{Head})+(div.leftBar>h1{Left})+(div.content>h1{Conte
nt})+(div.rightBar>h1{Right})+(div.footer>h1{Footer})
3.
No CSS:
a.
Vincule o arquivo de CSS Reset
b.
Crie todas as classes necessrias
c.
Coloque uma cor de fundo diferente para cada classe
d.
Flutue a esquerda as classes .leftBar, .content e .rightBar
e.
Na classe .footer utilize a propriedade clear com valor left
f.
Centralize o contedo com margem automtica e 1280 pixels de largura
4.
Salve e teste
5.
Configure as seguintes alturas:

a.
Cabealho com 200 pixels de altura
b.
Rodap com 100 pixels de altura
c.
Barras e contedo com 600 pixels de altura
291
6.
Salve e teste
7.
Configure as seguintes larguras:
8.
a.
Barras com 256 pixels de largura
b.
Contedo com 768 pixels de largura
Salve e teste
a.
Redimensione a janela e perceba que no ocorre qualquer alterao nas

larguras e alturas dos elementos
b.
Barras de rolagem so criadas quando o tamanho da janela inferior aos

tamanhos estabelecidos
26.2 Lquido
Tambm chamado de flexvel, elstico, relativo
Os valores so definidos de forma que recalcule ou reposicione o elemento
Valores definidos em percentual
Utilizao da tcnica de ancoragem com posicionamento absoluto
html, body {
width: 100%;
height: 100%;
}
div {
left: 30px;
right: 10%;
}
292
EP:
Lquido
1.
Duplique o arquivo do EP anterior para o nome de liquid.html
2.
Apague todas as instrues CSS de largura, altura e margem existentes

a.
Mantenha as instrues que contiverem float e clear
3.
Salve e teste
4.
Adicione as seguintes larguras:
5.
a.
.leftBar e .rightBar com largura de 20%
b.
.content com largura de 60%
Salve e teste
a.
Perceba que .head e .footer no definem qualquer valor de largura e

por serem do tipo block ocupam toda a rea disponvel na tela
b.
Redimensione a tela e verifique se os tamanhos so alterados com base

no percentual de largura disponvel
6.
7.
Adicione altura aos elementos:

a.
Cabealho com 20% altura
b.
Barras e contedo com 70% de altura
c.
Rodap com 10% de altura
Salve e teste
a.
Perceba que os valores de altura no foram respeitados
b.
O navegador no consegue calcular sem a definio de tamanho para a

janela
8.

html, body {
width: 100%;
height: 100%;
9.
}
Salve e teste
a.
Redimensione a janela e o tamanho do elemento poder ficar muito

pequeno, o que pode comprometer o contedo destes
293
26.3 Hbrido
Combina as caractersticas do fixo com o lquido
Permite estabelecer valores mximos e ou mnimos de largura e altura
Barras de rolagem so criadas automaticamente quando o valor do limite

mnimo for atingido
Redimensionamento do elemento ocorre dentro dos limites estabelecidos

body {
min-width: 1280px;
min-height: 768px;
}
bars {
width: 20%;
}
content {
width: 60%;
}
EP:
Hbrido
1.
Duplique o arquivo do EP anterior para hybrid.html
2.

body {
min-width: 1280px;
min-height: 768px;
}
3.
Salve e teste
a.
Redimensione a tela e perceba a criao das barras de rolagem

294
26.4 Responsivo
Se reconfigura quando a janela redimensionada e a condio for satisfeita
Reconfigurao pode ser apenas dos valores, como pode mudar o layout
completamente
Ex: mudar de um layout na horizontal para vertical quando a janela

muito pequena
EP:
1.
Responsivo
http://stephencaver.com/
2.
3.
Redimensione a tela e perceba as mudanas de :

a.
Posicionamento
b.
Layout
c.
Tamanhos
Clique em um dos itens e refaa o teste
295
296
Captulo 27: Layout Responsivo

27.1 Sobre
Permite criar diversos estilos conforme a condio estabelecida
Cria uma condio que deve ser satisfeita para o estilo ser aplicado
Definido atravs da instruo "media query"
27.2 Media Query
Utilizando "media query" possvel definir estilos diferentes para diferentes

mdias
Pode ser aplicado para as instrues "at rule":
@media
@import
Instruo pode ser composta por:
"at rule"
"media type"
"media feature"
"logical operator"
O CSS aninhado ser aplicado apenas se a condio for satisfeita

@media print {
}
Tambm possvel usar a "tag" <link> com o atributo "media"
O arquivo CSS da "tag" <link> ser baixado independente da condio

ser satisfeita ou no
A aplicao de seus estilos respeitam a condio
<link rel="stylesheet" media="print" href="print.css" />
297
27.2.3
Media Type
Valor opcional declarado logo aps a instruo "@media"
Caso nenhum valor seja especificado, ser aplicado a todos os tipos de mdia
Exceto se usados os operadores lgicos "not" ou "only"
@media {
}
Valores aceitos so:
all
braille
embossed
handheld
print
projection
screen
speech
tty
tv
@media screen {
}
@media tv {
}
298
Mltiplas condies podem ser criadas para um mesmo estilo
Basta separar as condies por vrgula
@media tv, projection {

}
27.2.4
Media Features
Maioria das caractersticas da mdia podem ser prefixadas com os valores "min-"
ou "max-"
Expresso menor igual ou maior igual
Caso nehuma seja especifica o valor ser sempre "true"
Exceto se o valor resultante for zero
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries#Media_features
<link
rel="stylesheet"
media="(max-width: 800px)"
href="example.css"
/>
---------------------------------------<style>
@media (max-width: 800px) {
.hideSideBar {
display: none;
}
}
</style>
299
Existem muitas combinaes possveis
Os valores mais usados so:
width | min-width | max-width
height | min-height | max-height
aspect-ratio | min-aspect-ratio | max-aspect-ratio
monochrome | min-monochrome | max-monochrome
resolution | min-resolution | max-resolution
Existem muitos valores possveis
Os valores mais usados so:

Largura
width
min-width
max-width
Altura
height
min-height
max-height
Resoluo
resolution
min-resolution
max-resolution
Aspect Ratio
aspect-ratio
min-aspect-ratio
max-aspect-ratio
300
EP:
1.
Media Query
Baixe as imagens:
http://pastebin.com/UwQ3CLY9
2.
Crie a estrutura "responsive" no seu projeto com os arquivos HTML e CSS

vinculados
3.
Adicione as imagens a este projeto na estrutura adequada
4.
Crie um elemento <div> com classe simpsons:

div.simpsons
5.
Configure a classe simpsons para:

height: 768px;
width: 1024px;
margin: auto;
background-color: black;
6.
Salve e teste
7.
Adicione o seguinte cdigo CSS:

@media screen {
#simpsons { background-image: url(images/1.jpg); }
}
@media print {
}
8.
301
27.3 Operadores Lgicos
Permitem criar condies mais complexas
O estilo ser aplicado apenas se toda a instruo for satisfeita
Diferente da separao por vrgula, na qual define mltiplas condies
O estilo ser aplicado mesmo se apenas uma da mltiplas instrues for

satisfeita
Usados com mltiplas "media features"
Condio pode utilizar operadores:
"and"
"not"
"only"
Os operadores lgicos podem ser combinados entre s
27.3.1
and
Combina mltiplas "media features"

Instruo aplicar o estilo apenas se a mdia tiver o mnimo de "700px" e
a orientao for "landscape
@media (min-width: 700px) and (orientation: landscape) {...}

Possvel combinar e tornar mais especfica
Mesma regra anterior, porm apenas se for TV
@media screen and (min-width: 1280px)
and (max-width: 1366px) { ... }

Ateno para valores separados por vrgula
O estilo ser aplicado se a mdia tiver o mnimo de "700px" e tambm se

for "handheld" em orientao "landscape"
@media (aspect-ratio: 16/9), (orientation: landscape) {...}
302
27.3.2
not
Cria uma negao na instruo
Estilo ser aplicado para qualquer mdia que no for "screen"
@media not screen { }
Sempre possvel efetuar combinaes
Aplicado para todos que no forem "screen" com tela colorida
@media not screen and (color) { }

27.3.3
only
Evita que navegadores antigos apliquem o estilo sem respeitar a "media query"
<link rel="stylesheet"
media="only screen and (color)"
href="example.css" />
27.4 Instruo Completa
303
EP:
1.
Operadores Lgicos
No mesmo arquivo do EP anterior
a.
2.
Comente ou remova apenas o cdigo CSS de "media query"
Adicione mais uma instruo CSS

@media screen and (min-width: 950px) {
3.
}
Salve e teste
a.
Redimensione a janela para menos de "950px"
b.
Utilize o Chrome Developer Tools e verifique a informao com o

tamanho da janela no canto superior direito, enquanto a redimensiona
c.
Perceba que a imagem mantida apena enquantoa condio da media

query for satisfeita, caso contrrio utilizar o CSS fora da instruo
4.
Crie as "media queries" para os seguintes tamanhos e imagens
5.
a. max-width: 950px com 2.jpg

b. max-width: 900px com 3.jpg
c. max-width: 850px com 4.jpg
d. max-width: 800px com 5.jpg
e. max-width: 750px com 6.jpg
Salve, teste e redimensione a janela
6.
Cdigo deve ficar similar ao trecho abaixo:

@media screen and (min-width: 950px) {
}
@media screen and (max-width: 950px) {
}
@media screen and (max-width: 900px) {
}
304

HTML5 e CSS3: Guia Completo

Uploaded by

Document Information

Original Title

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

HTML5 e CSS3: Guia Completo

Uploaded by

Copyright:

Available Formats

HTML5 e CSS3

19.1 Hierarquia HTML

EP: Modificando a Exibio

Necessidade de comunicao militar

Internet vem do conceito de computadores globais interligados

Existe o termo intranet o qual refere-se a uma rede de computadores

World Wide Web, criado para facilitar a comunicao e integrao na rede

60 70: guerra fria d origem s redes

70 80: surge o termo internet

80 90: criadas as grandes redes de computadores

90 00: "boom" world wide web

00 atualmente: web 2.0 e 3.0

Tambm chamado de "client-side"

Na web composto por pginas HTML

+ Recursos adicionais (imagens, fontes, etc)

Sua principal funo e exibir dados e envi-los para o servidor quando

Nunca deve lidar com regras de negcio

Apenas envia e recebe dados atravs de requisies HTTP

No acessa banco de dados diretamente

Gerencia as requisies recebidas pelos servios web

Lida com as regras de negcio

Lida com as requisies HTTP

Recebe e envia dados

Gerencia as regras de negcio e inteligncia do sistema

Pode integrar-se com outros servidores via servios web

Acessa o banco de dados e efetua sua manipulao

Lista, adiciona, atualiza e apaga registros

Tomcat, JBoss, GlassFish

Puma, Phusion Passenger

Protocolo de comunicao mais comum na Web

Essencialmente a transmisso de dados ocorre enviando textos

Existem outros protocolos como SSH e FTP

Segurana das informaes transferidas baixa

Necessrio o uso de certificados digitais

Toda requisio possui "headers"

Existe a opo de HTTPS para maior segurana

Cabealhos com informaes sobre a requisio e os dados transmitidos

Permite que o "client" se integre com o "server"

Servidor tambm pode se integrar com outros servidores via servios

A transmisso de dados ocorre atravs de requisies HTTP

Comunicao mantida por alguns instantes

Tempo necessrio para o servidor receber a requisio e enviar a

Cada invocao do "client" gera uma nova requisio para o servidor

Servidor no guarda informaes do "client"

Segurana garantida atravs de sesso ou "tokens" enviados na

Para o "client" no importa o que acontece com a requisio quando recebida

Qual o sistema operacional do servidor

Quais os recursos de infra estrutura envolvidos

Quantos servidores existem

Quais as camadas de seguranas aplicadas

Qual hardware utilizado

Abra o Google Chrome na pgina www.google.com.br

Clique com o boto direito sobre alguma rea vazia

Selecione a opo "Inspecionar Elementos"

Selecione a aba "Network"

Perceba os arquivos carregados e o tempo necessrio

Use a barra de rolagem e v para o primeiro item da lista

Clique sobre ele

Na aba "Headers" esto as informaes enviadas da pgina HTML para o

Identifique a informao "Server" e seu valor

Nome para localizar e identificar conjuntos de computadores na rede

Foi concebido com o objetivo de facilitar a memorizao dos endereos

Sem ele seria necessrio memorizar uma sequncia de nmeros