100% acharam este documento útil (2 votos)

1K visualizações306 páginas

HTML5 CSS3

Este documento fornece uma introdução abrangente sobre HTML5 e CSS3, cobrindo tópicos como: 1) A história da web e seu desenvolvimento ao longo do tempo; 2) As camadas front-end e back-end da web e suas funções; 3) Os principais elementos, atributos e estruturas das linguagens HTML5 e CSS3.

Enviado por

itatiano

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

100% acharam este documento útil (2 votos)

1K visualizações306 páginas

HTML5 CSS3

Enviado por

itatiano

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

Você está na página 1/ 306

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
Elementos e Atributos
EP: Elementos e Atributos
3.6
Estrutura HTML
3.7
DOCTYPE
EP: Estrutura HTML
3.8
Estrutura Bsica HTML
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
Suporte dos Navegadores
13.1.2
Arquivos de udio
13.1.3
<audio>
EP: <audio>
13.1.4
<source>
EP: <source>
13.2 Vdeo
13.2.1
Suporte dos Navegadores
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)
19.3 Pseudo-class (cont.)
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

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

1.3

Google em 1997

1.4

Camadas

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

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

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

EP:

Integraes

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"

Atualize a tela

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

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

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

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

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

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

Engine

Browser

Blink

Chrome e Opera

Webkit

Safari

Gecko

Firefox

Trident

Internet Explorer

1.17 Engines Timeline

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

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

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.

Busque no Google o endereo

Abra o Sublime e adicione um projeto

Clique no menu superior "Project > Add Folder to Project"

Selecione a pasta do seu projeto

Perceba a barra lateral que se abriu

Baixe e instale o Package Control

Busque no Google por "package control sublime text 3"

Identifique no site a pgina de instalao

Copie o cdigo exibido na tela (ateno para a verso do Sublime)

Abra o Sublime Text 3

Clique no item "View" do menu superior do Sublime

Selecione a opo "Show Console"

Cole o cdigo copiado do site e tecle enter

Verifique o andamento da instalao na barra de status no canto inferior

esquerdo do Sublime

Feche a visualizao do console

Repita os passos 5 e 6, porm selecione "Hide Console"

Digite o atalho CTRL + SHIFT + P

No Mac use CMD ao invs de CTRL

Ou use a opo do menu "Tools > Command Pallete"

Uma janela flutuante ser exibida

10.

Digite "install"

11.

Selecione a opo "Package Control: Install Package"

12.

Uma lista com todos os pacotes disponveis para o Sublime ser exibida

Digite "emmet" e selecione a opo com este nome

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

andamento da instalao

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"

Aguarde o trmino da instalao

Verifique as novas opes existem quando clicar com o boto direito do

mouse sobre a pasta do projeto

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>

2.6

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

Estrutura Bsica HTML

Declarao

Descrio

<!doctype html>

Navegador identificar o tipo do documento

Principal "tag" do documento ("root tag")

Possuir "tags" para configurao do documento

(ttulo, descrio, autor, palavras-chaves, etc)

Praticamente tudo que ser exibido para o usurio na

tela do navegador

2.8

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>

2.9.2 Cdigo com Indentao

<html>
<head>
<title>My Title</title>
</head>
<body>
My content
</body>
</html>

EP:

Crie um arquivo de nome "basic.html"

Adicione a informao ao navegador do tipo do documento

Deve ser o primeiro cdigo do documento

<!doctype html>
3.

Abaixo da declarao anterior, crie a "root tag" HTML:

<!doctype html>
<html>
</html>

Dentro de <html> aninhe as "tags" <head> e <body>:

Ateno ao aninhamento e a indentao

<!doctype html>
<html>
<head></head>
<body></body>
5.

</html>
Escreva um texto dentro de <body>

<!doctype html>
<html>
<head></head>
<body>My first page !</body>
6.

</html>
Salve e teste no navegador

Adicione a "tag" <title> como filha de <head>:

Altere a indentao para melhor leitura do cdigo

<head>
<title>Oh yeah!!!</title>
</head>
8.

Salve e teste novamente no navegador

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

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

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

Captulo 3:
3.1

Elementos e Atributos

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

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>

EP:

Elementos

Crie um novo arquivo de nome "elements.html"

Adicione a estrutura HTML essencial:

<!doctype html>
<html>
<body>
</body>

</html>
Dentro da "tag"<body> adicione o seguinte cdigo:
<body>
<h1>My Header</h1>
This is my content
</body>

Salve e teste no navegador

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>

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

3.5

HTML 5:
contenteditable
data-*
draggable

Elementos e Atributos
Item

Exemplo

Elemento

Tag

Atributo

Configurao de uma tag

Contedo

Informaes das tags

EP:
1.

Elementos e Atributos
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

Agora verifique os atributos:

https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes

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>

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>

EP:

Estrutura HTML

Crie um arquivo de nome "structure.html"

Adicione a estrutura essencial HTML com contedo:

<html>
<body>
My page content...
</body>

3.
4.

</html>
Salve e teste no navegador
Adicione a instruo "doctype":
<!doctype html>

<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>
<title>My Title</title>
</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...

</body>
Salve e teste
a.

Observe se as quebras foram respeitadas

10.

Volte o cdigo da forma inicial e adicione <br>

<body>
My<br>page<br>content...

11.

</body>
Salve e teste

3.8

Estrutura Bsica HTML

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

Tudo, exceto as anteriores, porm

pode incluir a "tag" de "script"

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.

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>
<title>My Title</title>
</head>
</html>

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

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

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

EP:
1.
2.

</html>
Adicione ainda o texto em <body>:
<body>
So Paulo ganhar uma nova cano...
</body>

Salve e teste
a.

Perceba que os caracteres do ttulo e do corpo no foram exibidos

corretamente

Adicione o seguinte cdigo em <head>:

Salve e repita o teste

Verifique se os caracteres esto incorretos

Adicione o metadado referente ao autor:

Salve e teste
a.

Perceba que nenhuma mudana visual ocorreu para o usurio

Adicione os demais metadados descritivos:

Descrio

Palavras chaves

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

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

Crie um arquivo de nome "http_equiv.html"

Adicione a estrutura HTML bsica

Adicione a "tag" <meta> com o seguinte atributo:

Salve e teste
a.

Perceba a atualizao a cada 2 segundos

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

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

Entidades de Encoding

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

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:

Entidades de Encoding

Crie um novo arquivo de nome "entities.html"

Adicione a estrutura bsica

Lembre-se sempre de utilizar UTF-8 na estrutura bsica

Adicione o seguinte texto em <body>:

Salve e teste, verificando se o texto "<h1>" foi exibido

Altere o cdigo de <body> para:

Salve e repita o teste

Abra a pgina do endereo abaixo

http://www.w3schools.com/charsets/ref_html_entities_4.asp

Adicione os nomes e os smbolos dos naipes de baralho dentro de <body>:

espadas

paus

copas

ouros

Escreva as entidades a seguir e descubra a palavra:

<h1>Coração</h1>

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

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>

Crie um novo arquivo de nome "style.html"

Adicione a estrutura bsica HTML

Dentro de <body> adicione <h1>:

<h1>My Header</h1>

Salve e teste
a.

Ateno para a cor que est sendo exibida

Dentro de <head> adicione uma "tag" <style> com:

</style>
Salve e teste

Altere a "tag" <style> adicionando o atributo "media":

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

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"

Salve em uma pasta apropriada

http://www.favicon.cc/?action=icon&file_id=686403
2.

Crie um novo arquivo de nome "favicon.html"

Adicione o seguinte cdigo em <head>:

Coloque o caminho correto como valor de "href"

<link rel="icon" type="image/x-icon" href="favicon.ico">

Salve e teste
a.

Observe o cone ao lado do ttulo da pgina

Crie um novo arquivo de nome "link.css" e "link.html"

Adicione o seguinte cdigo CSS e salve o arquivo:

h1 {
color: blue;
}

Volte ao arquivo HTML "link.html"

Adicione a "tag" <h1> em <body>:

<h1>My Header</h1>

Adicione a "tag" <link> em <head>:

10.

Salve e teste

11.

Adicione o atributo "media":

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>

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

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

EP:

Crie um arquivo de nome "script.html"

Adicione o seguinte cdigo dentro de <head>:

Salve e teste

Crie um novo arquivo de nome "script.js" dentro da mesma pasta que contm o
arquivo "script.html"

Adicione o seguinte cdigo JavaScript:

document.write('<h1>Hello from JS</h1>');

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

Adicione o seguinte cdigo em <head>:

Salve e teste
a.

Perceba o texto escrito via JavaScript com a formatao "h1"

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>

EP:

Crie documento HTML de nome "noscript.html"

Adicione o cdigo em <head>, salve e teste:

Desabilite o JavaScript do navegador e este novamente

Abra "Settings" do Google Chrome

Procure por "javascript" no campo de busca das configuraes

Clique em "Content Settings"

Clique em "Do not allow any site to run JavaScript"

Habilite novamente o JavaScript do navegador

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

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

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

Crie um novo arquivo de nome "h1.html"

Dentro da "tag" <body> adicione as seguintes "tags":

5.5

Salve e teste no navegador

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

Salve e teste no navegador

Adicione nfase no texto "first" adicionando as "tags":

<p>My <strong>first</strong> paragraph.</p>

Salve e teste

Adicione as demais "tags" de nfase no texto "first", testando uma por vez:
a.

<em>

<small>

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>

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

pre

formated

</pre>

EP:

Textos

Crie um arquivo de nome texts.html

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>

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

Finalmente, adicione o cdigo abaixo, salve e teste:

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

Atributo

Valor

alt

My text

height

src

URL

usemap

#myMapTagId

width

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>

Crie o arquivo "img.html" com a estrutura bsica

Adicione em <body> a "tag" <img> conforme abaixo:

<img
src="http://lorempixel.com/900/900/food"

alt="Random Food Image">

Salve e teste
a.

Atualize a pgina e perceba a imagem mudando randomicamente

Adicione o atributo de largura e altura com um valor para distorcer a imagem:

A imagem utilizada possui 900 pixels de altura e largura

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

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
<meta http-equiv="refresh" content="3">

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>

EP:

Crie um arquivo de nome "button.html"

Adicione em <body> o seguinte cdigo:

Salve e teste

Baixe o cone do endereo abaixo na mesma pasta do arquivo "button.html":

http://iconfindr.com/1eWqAml

Renomeie o arquivo para "icon_save_48x48.png"

No arquivo HTML adicione o cone:

Salve e teste

Utilize o atributo "width" da imagem e reduza o tamanho do cone para 16 pixels:

9.
10.

Salve e teste
Utilize o atributo "autofocus" do boto:
a.

Mantenha o cdigo anterior do boto

11.

12.

Salve e teste
a.

Perceba que o boto recebe foco quando a pgina carregada

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

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

EP:

Listas

Crie um novo arquivo de nome "list.html"

Adicione o seguinte cdigo HTML:

<ol>
<li>Ordered Item 1</li>
<li>Ordered Item 2</li>

</ol>
Salve e teste

Adicione o atributo "reversed" em <ol>

<ol reversed>
<li>Ordered Item 1</li>
<li>Ordered Item 2</li>

</ol>
Salve e teste
a.

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>

Salve e teste

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>

</div>
Salve, teste e verifique se houve alguma mudana visual

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

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"

EP:

<a>

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"

target="_self">Google</a>
Nenhuma mudana ocorreu pois usamos o padro

Mude o valor de "target" para "_blank":

target="_blank"

Salve e teste

Insira lorem ipsum, aps o cdigo atual, o suficiente para que as barras de
rolagem apaream

Adicione como ltima tag de <body> (antes do fechamento) a tag <p>:

Como primeira tag de <body> (aps abertura) adicione:

10.

Salve e teste, clicando em More info

11.

Se necessrio, redimensione a janela para gerar barras de rolagem

(Opcional) Faa a ncora reversa

Clicando no final da pgina e rolando para o topo

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

Contedos no relacionados pgina

<aside>

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

Imagem de qualquer tipo (grficos, thumbs, fotos, etc)

Aninhada dentro de <figure>, exibe informao sobre a

imagem

Rodap

Sumrio, resumo ou concluso de algum contedo

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

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

EP: Tags Semnticas

Crie um novo arquivo de nome "semantics.html"

Adicione o cdigo dentro de <body>:

<h1> This is my header </h1>
<h3> This is my section </h3>
<h6> This is my footer </h6>

Salve, teste e observe o resultado visual da pgina

Envolva as "tags" da seguinte forma:

<h1> com <header>

<h3> com <section>

<h6> com <footer>

Salve, teste e verifique se houve alguma mudana visual na pgina

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>

</footer>
Envolva o contedo de <h3> com <mark> conforme a seguir:
<h3>This is my <mark>section</mark></h3>

Salve e teste

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

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>

EP: <form>
1.

Crie um novo arquivo de nome form.html

Adicione o seguinte cdigo:

<form>
First name: <input type="text"><br>
Last name: <input type="text"><br>
<input type="reset" value="Reset">

7.3

</form>
Salve e teste
a.

Insira algum valor no formulrio

Pressione o boto Reset

Principais Elementos

<input>

<label>

7.4

<input>
Exibio pode variar conforme o atributo "type"

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

Atributo

Valor

Tipo

Define

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

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>

Abra o arquivo form.html

Adicione antes do boto, o <input> do tipo password:

Password: <input type="password"><br>
91

Salve e teste
a.

Digite qualquer valor neste campo

Aps o ltimo cdigo, adicione o tipo file:

Select a file: <input type="file"><br>

Salve e teste

Adicione o atributo multiple no <input> tipo file

Salve e teste
a.

Verifique a mltipla seleo

Adicione o atributo accept no <input> tipo file:

Salve e teste
a.

Tente selecionar um arquivo diferente de imagem

(Opcional) Aplique o filtro para aceitar apenas imagens jpg

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

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:

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

Na pgina HTML, apague o valor do <input> e perceba que o valor do

placeholder aparecer

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

(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

Perceba que o valor de placeholder possui mais de 3 caracteres

Adicione o atributo size no <input> maxlength:

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

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>

EP: <label>
1.

Volte ao arquivo "form.html"

Adicione o atributo "id" s "tags" <input>

Envolva os textos ao lado das "tags" <input> com <label>

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

<label for="firstName">First name:</label>

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

7.6

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>

EP:
1.

<select>
Abra o arquivo form.html e adicione:
<label for="options">Options:</label>
<select id="options">
<option>Item 1</option>
<option>Item 2</option>
<option>Item 3</option>

2.
3.

</select>
Salve e teste
Adicione o atributo multiple:
<select id="options" multiple>

Salve e teste
a.

Utilize a tecla CTRL e selecione mais de um elemento

7.7

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>

Salve e teste

7.8

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>
<label for="firstName">First name:</label>
<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>

</form>
Salve e teste

Adicione a "tag" <legend> dentro de <fieldset>:

</fieldset>
Salve e teste novamente
98

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

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

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

Suporte dos Navegadores

"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

Crie um novo arquivo de nome "form_new_types.html"

Adicione a "tag" <form>

Dentro de <form> adicione o seguinte cdigo:

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

Adicione mais um conjunto de "tags" dentro de <form>:

<fieldset>
<legend>Numerics:</legend>

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

Adicione mais um conjunto de "tags" dentro de <form>:

<fieldset>
<legend>Others:</legend>
</fieldset>

103

10.

Dentro de <fieldset> adicione:

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

Dentro de <fieldset> adicione:

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

Digite o texto So Paulo e clique no boto Url Encode

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

Abra o endereo www.google.com.br

Digite no campo de buscas a palavra restful

Observe a URL gerada

Identifique o parmetro digitado na URL

Analise tambm os demais parmetros enviados na requisio

Modifique o parmetro na URL para html5

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

Navegue por alguma categoria existente como dvd

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

Crie o arquivo de nome "form_submit.html"

Adicione a "tag" <form>:

Dentro dela adicione duas "tags" <input>:

First name:
<input type="text" name="fname"><br>
Last name:
<input type="text" name="lname"><br>

Salve e teste

Ainda dentro da "tag" <form> adicione o boto para enviar os dados:

<input type="submit" value="Send">

Salve e teste novamente
a.

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

"name" so utilizados na URL pelo mtodo padro GET

Adicione o seguinte atributo "tag" <form>:

action="http://httpbin.org/get"
Seu cdigo deve estar similar :
<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">

</form>
Abra o Chrome Developer Tools e verifique os dados enviados
a.

Antes de enviar abra a ferramenta

Entre na aba Network

Adicione as informaes no formulrio e clique para enviar

118

Clique no primeiro item (arquivo) de nome get

Clique na sub aba Headers e verifique os dados em Query String

Parameters

10.

Altere os atributos de <form> para:

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

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

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

date

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

Crie um novo arquivo de nome form_validation.html

Adicione a tag <form> sem nenhuma configurao

Dentro dela adicione os seguintes <input> do tipo:

Salve e teste
a.

Verifique quais dos elementos visualmente igual ao tipo text

Ainda com o formulrio vazio, clique no boto submit e verifique se a

validao ocorre

Preencha o campo do e-mail com um valor parcial e clique no boto

submit

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:

Salve e teste
a.

Insira valores menores e maiores que os determinados pelos atributos

min e max e valide o formulrio

Repita a configurao para o tipo date:

Salve e teste
a.

Tente inserir uma data anterior ou posterior a definida

125

Adicione um novo elemento obrigatrio dentro do formulrio:

10.

11.

Salve e teste
a.

Deixe o novo elemento sem nenhum valor e valide o formulrio

Adicione o atributo required para outros campos e repita o teste

Insira um novo elemento com validao de expresso regular (regex):

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:

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

Crie um arquivo com nome embeds.html

Baixe o arquivo na mesma pasta do arquivo HTML:

http://www.w3.org/TR/1998/REC-html40-19980424/html40.pdf

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

Valor em "pixels" da altura

source

URL

Endereo do contedo a ser embutido

type

text/html

width

150

Especifica o MIME-type do objeto a ser embutido

Valor em "pixels" da largura

130

EP:

<embed>

Abra o arquivo "embeds.html"

Adicione o seguinte cdigo (abaixo do anterior):

<h1><embed></h1>
<embed
src="html40.pdf"
type="application/pdf"

width="100%" height="800">
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

Valor em "pixels" da altura

width

150

Valor em "pixels" da largura

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

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

Crie um novo arquivo de nome header.html

Crie a estrutura bsica, adicione <h1>:

<h1>My Page Header</h1>

Crie um novo arquivo de nome footer.html com:

<h6>My page footer</h6>

Salve ambos os arquivos

Crie um terceiro arquivo de nome index.html

Adicione as tags <iframe> carregando header.html e footer.html

Entre elas adicione o seguinte contedo

<h3>My index page content</h3>

Salve e teste

Crie mais duas pginas com os nomes:

about.html

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

Suporte dos Navegadores

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

Chrome

SIM

Firefox

parcialmente

SIM

Safari

SIM

Opera

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>

Crie um novo arquivo de nome "audio.html"

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

Repita o mesmo teste no Safari ou no Internet Explorer

Volte ao cdigo e adicione o atributo "controls" na "tag" <audio>

Salve e teste

Teste os demais atributos

139

13.1.4

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:

Crie um novo arquivo de nome "audio_source.html"

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>

Salve e teste no Chrome

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

Suporte dos Navegadores

Navegador

MP4

WebM

Ogg

Internet Explorer

SIM

Chrome

SIM

Firefox

parcialmente

SIM

Safari

SIM

Opera

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

poster

URL

width

Descrio
Valor em "pixels" da altura
Endereo com a imagem do vdeo que ser usado
enquanto o arquivo carregado ou at que o
usurio clique em "play"
Valor em "pixels" da largura

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>

Crie um novo arquivo de nome "video.html"

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

Altere os valores de altura e largura para um valor maior

Salve e teste

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

14.2.1

Desmenbrando SVG

147

Declarao

Descrio

<svg>

"Tag" de declarao do fragmento SVG

xmlns

"Namespace" do arquivo XML

version

width/height

Verso do SVG

Largura/altura

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

Crie um arquivo de nome "svg.html"

Dentro de <body> adicione o seguinte cdigo, salve e teste:

Remova todos os atributos da "tag" <svg> e teste novamente

Baixe e instale o "software" Inkscape (ou use o Illustrator)

Crie uma forma, salve e gere um arquivo SVG com o nome de "shape.svg"

Abra o arquivo com algum editor de textos e inspecione o cdigo

Copie o cdigo que estiver a partir da "tag" <svg> do arquivo para a pgina
HTML em <body>

Salve e teste novamente

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>[email protected]</td>
</tr>
<tr>
<td>Alex Afford</td>
<td>[email protected]</td>
</tr>
</table>

EP:

<table>

Crie um novo arquivo de nome table.html

Adicione o seguinte cdigo, salve e teste:

<table>
<tr>
<th>Name</th>
<th>Email</th>
</tr>
</table>

Abaixo de <tr> e antes do fechamento de </table>:

<tr>
<td>Peter Wasty</td>
<td>[email protected]</td>
</tr>
152

4.
5.

Salve e teste
Adicione mais registros na tabela:
a.

Alex Afford - [email protected]

Mary Castella - [email protected]

Zed Broken - [email protected]

Salve e teste

Adicione mais colunas tabela com dados aleatrios:

Phone

Picture (foto da pessoa)

<tr>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th>Picture</th>
</tr>
<tr>
<td>Peter Wasty</td>
<td>[email protected]</td>
<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

Abra o link abaixo:

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

Escolha um dos modelos disponveis

Use o painel esquerda para configurar cada item

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

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

Crie os arquivos HTML e CSS com o nome "selectors" e os vincule

No arquivo CSS adicione o seguinte cdigo:

h1 {
color: red;

}
Adicione a tag <h1> no arquivo HTML:
<h1>First Header (element selector)</h1>

Vincule o arquivo CSS com o documento HTML, adicionando o seguinte cdigo

em <head>:
<link rel="stylesheet"
type="text/css" href="selectors.css">

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>

No arquivo "selectors.css" adicione o seguinte cdigo

#header { color: blue; }

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>

No arquivo "selectors.css" adicione o seguinte cdigo

.myClass { color: yellow; }

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>

Adicione o cdigo CSS:

* {
color: green;
}

Salve e teste
a.

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>

Salve e teste

164

17.5 Declarao de Seletores

Tipo de Seletor

Declarao CSS

Seleo

Element

elementName

#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>
<h2 class="title">H2 Header with "title" class</h2>
<h3 class="title">H3 Header with "title" class</h3>

165

CSS:
.title{
color: darkcyan;
}
h1.title{
color: brown;
}

EP:

Combinando Seletores

Crie novos arquivos HTML e CSS de nome selectors_combination e os vincule

No arquivo HTML adicione o seguinte cdigo:

<h1 class="title">H1 Header with "title" class</h1>
<h2 class="title">H2 Header with "title" class</h2>
<h3 class="title">H3 Header with "title" class</h3>

No arquivo CSS adicione o seguinte estilo:

.title{
color: darkcyan;
}

Salve e teste
a.

Como esperado, todas as tags com a classe receberam o estilo

Adicione a seguinte instruo CSS:

h1.title{
color: purple;
}

166

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

Crie um novo arquivo de nome "precedence.html"

Adicione o seguinte CSS:

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

Adicione o seguinte cdigo HTML:

<h1>Element selector</h1>

Salve e teste
a.

Ateno para a cor aplicada e o CSS utilizado

Crie mais uma "tag", salve e teste novamente:

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

Adicione o seguinte cdigo, salve e teste:

<h1 class="blueText" id="header">
Element + Class + ID selectors
</h1>

Salve e teste
a.

Perceba a cor aplicada e a precedncia do CSS

Adicione o seguinte cdigo:

<h1 class="blueText" id="header" style="color:gray">
Element + Class + ID selectors with inline attribute
</h1>

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>
<h1>First header</h1>
<ul>
<li><h1>Second Header</h1></li>
</ul>
</div>

EP:

Descendant Selector

Crie os arquivos HTML e CSS de nome selectors_descedant e os vincule

Adicione o seguinte cdigo de estilo:

div h1 {
color: lime;
}

Adicione o cdigo HTML:

<div>
<h1>First header</h1>
</div>

<h1>Another header</h1>
Salve e teste
a. Perceba que <h1> fora da <div> no recebe o estilo

174

Dentro da <div>, adicione o seguinte cdigo:

<ul>
<li><h1>Second Header</h1></li>
<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:

First Header

Third Header

Another Header

Altere a instruo CSS para:

div h1.myClass { color: lime; }

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>
<h1>First header</h1>
<ul>
<li><h1>Second Header</h1></li>
</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>First header</h1>
<h1>Second header</h1>
-------------------------------------------CSS:
h1 + h1 + h1 { color: lime; }

HTML:
<h1>First header</h1>
<h1>Second header</h1>
<h1>Third header</h1>
<h1>Fourth header</h1>
177

-------------------------------------------CSS:
h1 + h1.myClass { color: skyblue; }

HTML:
<h1>First header</h1>
<h1 class="myClass">Second header</h1>
<h1>Third header</h1>
<h1>Fourth header</h1>

EP:
1.

Adjacent SIbling Selector

Crie novos arquivos HTML e CSS com o nome selectors_adjacent_sibling e os
vincule

Adicione o cdigo no arquivo HTML:

<h1>First header</h1>
<h1>Second header</h1>
<h1>Third header</h1>
<h1>Fourth header</h1>

Adicione o cdigo no arquivo CSS:

h1 + h1 {
color: skyblue;

}
Salve e teste
a.

Perceba que todos os elementos que possuem a estrutura <h1> + <h1>

receberam o estilo

178

Altere o cdigo no arquivo CSS:

h1 + h1 + h1 {
color: skyblue;
}

Salve e teste

Altere o cdigo no arquivo CSS:

h1 + h1 + h1 + h1 {
color: skyblue;
}

Salve e teste

Altere o cdigo no arquivo HTML:

<h1>First header</h1>
<h1>Second header</h1>
<h1>Third header</h1>
<h2>Ops...structure has changed</h2>

10.

<h1>Fourth header</h1>
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

Adicione a classe no elemento <h1> correto

h1 + h1.myClass { color: skyblue; }

179

19.1.4

General Sibling Selector

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>First header</h1>
<h2>Second header</h2>
<h1>Third header</h1>
<h3>Fourth header</h3>
<h1>Fifth header</h1>

EP:
1.
2.

General Sibling Selector

Crie novos arquivos HTML e CSS com o nome selectors_general_sibling e os
vincule
Adicione o seguinte cdigo HTML:
<h1>First header</h1>
<h2>Second header</h2>
<h1>Third header</h1>
<h3>Fourth header</h3>
<h1>Fifth header</h1>

180

Adicione o cdigo CSS:

h2 ~ h1 {
color: salmon;
}

Salve e teste
a.

Perceba que todos os elementos <h1> aps <h2> so selecionados

Adicione no final cdigo HTML anterior a seguinte instruo:

<div>
<h1>Sixth header</h1>

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

Crie novos arquivos HTML e CSS de nome selector_attribute e os vincule

Adicione o cdigo 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>
Adicione o seguinte CSS:
h1[title] { color: firebrick; }

Salve e teste
a.

Perceba que apenas os elementos <h1> com atributo title receberam

estilo

Altere a instruo CSS removendo o seletor h1:

[title] { color: firebrick; }
183

Adicione o cdigo HTML:

<h2 title="Fifth title attribute">Fifth Header</h2>
<h3>Sixth Header</h3>

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

Abra os arquivos HTML e CSS selector_attribute

Adicione o cdigo HTML:

<a href="https://www.google.com.br">Google BR</a>
<a href="http://www.google.com">Google US</a>

Salve e teste
a.

Verifique se os links esto funcionando corretamente

Adicione o seguinte estilo:

a[href="https://www.google.com.br"]{
color: deeppink;
}

Salve e teste

Altere a ltima instruo CSS para:

a[href="http"]{
color: deeppink;
}

Salve e teste
a.

Perceba que o valor no foi encontrado e nenhum estilo foi aplicado

Altere a ltima instruo CSS para:

a[href^="http"]{
color: deeppink;
}

185

Salve e teste
a.

10.

Perceba que o valor foi encontrado no incio do atributo href

Altere a ltima instruo CSS para:

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.

Altere a ltima instruo CSS para:

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)

Crie novos arquivos HTML e CSS de nome selector_pseudo_class e os vincule

Adicione uma tag <h1> com valor Links

Adicione o cdigo HTML com a tag <a> configurada para os arquivos dos EPs
anteriores:

selectors_descedant.html

selectors_adjacent_sibling.html

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

Salve e teste

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>

Adicione o CSS:

:target { background-color: yellow;}

Salve e teste
a.

Clique nas ncoras e perceba o estilo sendo aplicado quando uma as

ncoras selecionada

188

19.3 Pseudo-class (cont.)

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)

Abra os arquivos selector_pseudo_class

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

Adicione o cdigo CSS (abaixo do anterior):

input[type="text"]:required {
background-color: yellow;

}
Salve e teste
a.

Perceba que apenas o <input> do tipo texto requerido foi selecionado e

recebeu estilo

Adicione o cdigo CSS (abaixo do anterior):

input:focus{
background-color: skyblue;
}

Salve e teste
a.

Clique nos <input> requeridos

Perceba que apenas um deles recebe o estilo de fundo azul

Adicione o cdigo CSS (abaixo do anterior):

input:invalid {
border-color: red;
}
input:valid {
border-color: green;
}

Salve e teste
a.

Perceba que os <input> obrigatrios recebem o estilo automaticamente

Preencha um deles adequadamente

190

19.3 Pseudo-class (cont.)

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)

Abra os arquivos selector_pseudo_class

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>

Adicione o cdigo CSS (abaixo do anterior):

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
Adicione o cdigo CSS (abaixo do anterior):
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
Adicione o cdigo CSS (abaixo do anterior):
:not(span){
color: blue;
}

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

Adicione o seguinte cdigo HTML:

<p>First paragraph with <body> parent tag</p>
<p>Second paragraph with <body> parent tag</p>

Adicione o CSS:
p:first-child{
background-color: lime;
}

Salve e teste
a.

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>

Salve e teste

Adicione o CSS (abaixo do anterior):

p:last-child{
background-color: pink;
}

Salve e teste
a.

Perceba que somente o <p> que for ltimo filho receber estilo

194

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

Adicione o cdigo CSS:

p:first-of-type{
background-color: orange;
}

12.

Salve e teste
a.

Perceba que os <p> que forem primeiros filhos deste tipo recebem estio

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)

Perceba que o estilo p:last-child foi aplicado

(Opcional) Altere a indentao do cdigo para que cada <span> fique

com um espao entre cada uma das tags

14.

Seu cdigo deve estar similar :

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

15.

Adicione o seguinte CSS:

span:nth-child(3){
background-color: yellow;
}
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){
background-color: yellow;
}

22.

Salve e teste

23.

Adicione o cdigo HTML, antes do fechamento de <body>:

<div>
<h1><h1> child</h1>
</div>

196

24.

Adicione o cdigo CSS:

h1:only-child{
background-color: skyblue;
}

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{
background-color: skyblue;
}

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

Crie um novo arquivo de nome selector_pseudo_element.html

Adicione mltiplas linhas de cdigo lorem ipsum

Utilize a instruo EMMET: p10>span10>lorem

Adicione o CSS:
p::first-letter{
font-size: 30px;
}

Salve e teste

Altere a instruo p::first-letter para:

p::first-line{
font-size: 30px;
}

Salve e teste

198

Adicione as instrues CSS:

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.

Selecione algum texto com o mouse

Adicione a instruo CSS:

p::after{
content:

"CONTENT FROM CSS !!!";

}
10.

11.

Salve e teste
a.

Perceba que no possvel selecionar com o mouse o texto

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 */
#p2 {background-color:rgba(0,255,0,0.3);}

/ * blue with opacity */

#p3 {background-color:rgba(0,0,255,0.3);}

20.6 HSL

Hue, Saturation and Lightness

hsl(hue, saturation, lightness)

Representa as cores atravs de coordenadas cilndricas

No tem o mesmo suporte dos navegadores

IE9+, Firefox 3+, Chrome, Safari, e Opera 10+

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 */
#p2 {background-color:hsl(120,100%,75%);}
/ * dark green */
#p3 {background-color:hsl(120,100%,25%);}
/ * pastel green */
#p4 {background-color:hsl(120,60%,70%);}

205

20.7 HSLA

Hue, Saturation, Lightness and Alpha

No tem o mesmo suporte dos navegadores

IE9+, Firefox 3+, Chrome, Safari, e Opera 10+

"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 */

#p2 {background-color:hsla(120,100%,75%,0.3);}
/ * dark green with opacity */
#p3 {background-color:hsla(120,100%,25%,0.3);}
/ * pastel green with opacity */
#p4 {background-color:hsla(120,60%,70%,0.3);}

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

Crie um arquivo HTML de nome font_family.html

Adicione o seguinte cdigo HTML:

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

Adicione o CSS com as respectivas classes:

font-family: "Times New Roman", Times, serif;

font-family: Arial, Helvetica, sans-serif

font-family: "Courier New", Courier, monospace

Salve e teste
a.

Perceba a diferena entre as fontes

Adicione uma fonte inexistente no seu sistema:

<h2 class="sf">SF Quartzite</h2>

font-family: "SF Quartzite"

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

Abra o arquivo font_family.html

Baixe a fonte SF Quartzite do endereo:

http://img.dafont.com/dl/?f=sf_quartzite

Extraia os arquivos para seu projeto

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

arquivo HTML

Adicione a instruo CSS:

@font-face {
font-family: "SF Quartzite";
src: url("SF Quartzite.ttf");
}

Salve e teste

214

215

Captulo 22:

Propriedades CSS

22.1 Unidades de Medida CSS

Unidade

Descrio

percentual

"inch"

centmetro

milmetro

"1em" igual ao tamanho atual da fonte, portanto "2em" o dobro de seu

tamanho atual

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

"font-size")

"1pt" um ponto ("1pt" equivale a "1/72 inch")

"1pc" medida em "picas" ("1pc" equivale a "12 points")

"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

Crie o arquivo "properties.html"

Adicione 3 elementos <div> vazios

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.

Atribua o seguinte estilo para o elemento "div1":

border-style: solid;
border-width: 5px;
border-color: blue;

Salve e teste

Na sequncia, adicione o estilo para o elemento "div2":

border: 3px dotted red;

Salve e teste
a.

Perceba que os estilos so similares e foram criados de forma diferente

Adicione o estilo para div3:

border-style: solid;
border-color: green;

Salve e teste
a.

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

Padro, contedo no cortado e pode sair dos limites do

continer pai, nenhuma barra adicionada

hidden

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

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

Crie um novo arquivo de nome background.html

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}

Adicione o seguinte CSS:

div {
width: 300px;
height: 200px;
display: inline-block;
border: 15px dotted black;
margin: 30px;
text-align: center
}
h1{

line-height: 155px;

221

Crie a classe CSS de nome alpha com a instruo:

background-color: rgba(0, 255, 255, .2);

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

Abra o arquivo background.html

Adicione mais uma <div> com a classe clip, o elemento <h1> com o texto
background-clip

Crie a classe CSS clip com as seguintes instrues:

padding: 0px 20px;
background-color: salmon;
background-clip: padding-box;

Salve e teste
a.

Perceba a diferena do preenchimento do fundo entre as duas <div>

Altere o valor da propriedade background-clip para:

background-clip: content-box;

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

Abra o arquivo background.html

Adicione mais uma <div> com a classe image, o elemento <h1> com o texto
background-image

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.

background-repeat
Abra o arquivo background.html
a.

Adicione mais uma <div> com a classe repeat

Elemento <h1> com o texto background-repeat

Crie a classe CSS com o seguinte cdigo:

background-image:
url('http://www.lorempixel.com/37/37/cats/3');
background-repeat: no-repeat;

Salve e teste

Altere a classe:
a.

Adicione altura de 300px

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

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.

background-position
Abra o arquivo background.html
a.

Adicione mais uma <div> com a classe position

Elemento <h1> com o texto background-position

Crie a classe CSS com o seguinte cdigo:

height: 300px;
background-image:
url('http://www.lorempixel.com/37/37/cats/4');
background-repeat: no-repeat;
background-position: center top;

Altere a classe combinando em pares as seguintes posies (teste uma

combinao por vez):

top

bottom

right

left

center

Novamente altere a classe, porm com valores usando percentuais e em pixels

(teste um por vez):
a.

0 50%

50% 50%

100% 100%

350px 60px

-20px 50px

226

Adicione uma segunda imagem modificando apenas as propriedades:

background-image:
url('http://www.lorempixel.com/90/90/cats/4'),
url('http://www.lorempixel.com/90/90/cats/5');
background-position: top center, bottom right;

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.

background-size
Abra o arquivo background.html
a.

Adicione mais uma <div> com a classe size

Elemento <h1> com o texto background-size

Crie a classe CSS com o seguinte cdigo:

height: 300px;
background-image:
url('http://www.lorempixel.com/37/37/cats/7');
background-repeat: no-repeat;
background-size: 150px 150px;

Salve e teste
a.

Perceba a imagem distorcida

Visualize a imagem colando a URL em outra aba do navegador

Altere a propriedade background-size para (teste um por vez):

cover

contain

228

22.6.7

background-attachment

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.

background-attachment
Abra o arquivo background.html
a.

Adicione mais uma <div> com a classe attachment

Elemento <h1> com o texto background-attachment

Texto dentro da <div>:

p>span>lorem*5

Crie a classe CSS com o seguinte cdigo:

width: 800px;
height: 300px;
background-image:
url(http://www.lorempixel.com/500/500/cats/8);
background-repeat: no-repeat;
background-attachment: scroll;
overflow: auto;

Salve e teste
a.

Perceba a barra de rolagem da tela e da <div>

Faa o scroll e verifique as diferenas

Altere o valor de background-attachment para local

Salve e teste novamente

229

Perceba que a imagem de fundo acompanha o contedo da <div>

Finalmente altere o valor de background-attachment para fixed

Salve e teste
a.

Perceba que a imagem est escondida

Diminua o tamanho da tela para menos da metade

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-style: solid;

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

Crie um novo arquivo de nome border.html

Adicione 8 <div> com as classes:

dotted

dashed

solid

double

groove

ridge

inset

outset

Adicione o seguinte CSS:

div {
width: 200px;
height: 200px;
}

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

Crie mais uma <div> com a classe custom

233

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

Adicione o seguinte CSS, salve e teste:

.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

Crie um novo arquivo de nome padding.html

Adicione <div> com <h2> e <p>:

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

Adicione o seguinte CSS, salve e teste:

div{
background-color: skyblue;
padding: 50px;
}

Adicione padding para os elementos, salve e teste:

div h2 {
background-color: yellow;
padding: 10px 0;
}
div p {
background-color: lime;
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

Crie um novo arquivo de nome margin.html

Adicione 2 <div> com <h2> e <p>:

Perceba que foram criadas duas classes, uma para cada <div>

Os ttulos tambm so diferentes para cada <div>

div.div$*2>h2{Div$}+p>lorem*5
3.

Adicione o seguinte estilo:

.div1 {
background-color: crimson;
margin: 20px;
}
.div2 {
background-color: cornsilk;
}

Salve e teste
a.

Perceba a diferena de posicionamentos

Adicione o CSS:
.div1 h2 {
margin-top: 50px;
}

Salve e teste
a.

Perceba o posicionamento do elemento foi comprometido pela margin

de <h2>, deslocando <div> mais abaixo

236

Altere o CSS:
.div1 h2 {
padding-top: 50px;
}

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

Crie um novo arquivo de nome text.html

Adicine <h1> e 3 <p> com texto:

h1.title{Title}+a.link[href="#"]{Link $}*5+(p.paragraph$>lorem*3)*3

Salve e teste
a.

Identifique o contedo HTML no navegador

Verifique as classes utilizadas no cdigo

Crie as classes necessrias

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

Salve e teste

239

Altere o estilo dos links:

text-decoration: none;
font-size: 2em;

Salve e teste

Altere o estilo do primeiro pargrafo:

text-align: justify;
font-size: 13pc;
text-indent: 100px;

10.

Salve e teste

11.

Adicione o seguinte CSS:

.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

Crie um novo arquivo de nome list.html

Adicione <ul> e <ol> com alguns itens dentro de <div>:

ul>li{Unordered Item $}*5 <TAB>
ol>li{Ordered Item $}*5 <TAB>

Salve e teste
a.

Visualize os marcadores padres de <ul> e <ol>

Adicione o seguinte estilo:

li {
border: 2px solid;
margin: 5px;
}

Salve e teste

Altere o estilo de <ul> e <ol>:

ul { list-style: circle inside ; }
ol { list-style: upper-roman; }

Salve e teste

243

Altere <ul> para usar uma imagem:

ul {
list-style: circle inside
url('http://lorempixel.com/30/30/food/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

Crie um novo arquivo de nome columns.html

Adicione <div> com <p> e texto lorem ipsum:

div.columns>span>lorem*5

Salve e teste
a.

Verifique a disposio do texto

Adicione estilo para <div>:

div{
width: 1000px;
color: white
background-color: green;
padding: 20px;
margin: auto;
}

Crie a classe para colunas:

.columns {
column-count:

-moz-column-count:

-webkit-column-count:

}
6.

Salve e teste

245

Adicione na classe columns:

column-gap:

30px;

-moz-column-gap:

30px;

-webkit-column-gap: 30px;
8.

Salve e teste

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

Crie no projeto uma pasta de nome "import"

Crie os arquivos HTML e CSS e vincule um ao outro

No arquivo HTML adicione uma "tag" <h1> com valor "CSS Import"

No arquivo CSS adicione o estilo "color" com valor "red" para <h1>

Crie um segundo arquivo CSS de nome "additional.css"

No vincule este arquivo no HTML

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

Salve e teste
a.

Perceba que o estilo do arquivo importado no foi aplicado

Abra o Chrome Developer Tools e inspecione o estilo do elemento, os

dois estilos estaro presentes, sendo que um deles foi sobrescrito
250

Remova o estilo de cor de <h1> do arquivo import.css

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

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 {
font-family: myCustomFont;
src: url(sansation_italic.woff);
font-style: italic;
}
@font-face {
font-family: myCustomFont;
src: url(sansation_bold.woff);
font-weight: bold;
}

23.5.1

Suporte de Fontes

WOFF

OTF

TTF

SVG

EOT

---

Firefox

3.6

3.5

---

Opera

11.1

---

Safari

5.1

3.1

---

Chrome

0.3

---

252

EP:

@font-face

Crie um novo arquivo de nome font-face.html

Baixe uma fonte da Internet

Para maior suporte procure um arquivo da extenso .ttf ou .otf

Salve o arquivo na pasta adequada do seu projeto

(Opcional) Baixe os arquivos itlico e negrito tambm

Adicione texto lorem ipsum:

p>lorem*50

Adicione o seguinte CSS:

@font-face {
font-family: myCustomFont;
src: url(xxxxxxx.xxx);
}
body { font-family: myCustomFont; }

Salve e teste

(Opcional) Usando fonte em itlico ou negrito

Crie outra instruo @font-face

Mantenha o mesmo nome da fonte

Aponte para o caminho correto

Adicione propriedade na qual se refere

@font-face {
font-family: myCustomFont;
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

Impressoras

projection

Projetores

screen

Telas de computadores

speech

Sintetizadores de voz

tty

Terminais, tele-texto

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

Crie um arquivo de nome media.html

Adicione texto lorem ipsum:

p>lorem*100

Adicione o CSS:
@media print {
body { font-size: 5pt; }
}
@media screen {
body { font-size: 30px; }
}

Salve e teste a impresso

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;

Largura total ser 300 "pixels"

250px (width)
+
20px (left + right padding)
+
10px (left + right border)
+
20px (left + right margin)
=

300px
Assumindo que voc tenha apenas 250 "pixels" de largura na tela, qual seriam
os valores corretos da instruo CSS inicial ?

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

Crie um novo arquivo de nome reset.html

Vncule o arquivo CSS no HTML

Crie uma "tag" <h1> com o valor "CSS Reset"

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

Crie um novo arquivo chamado display.html

Adicione o seguinte cdigo HTML

h1{Title}+p>(span>lorem1000)+img[src=http://lorempixel.com/100/100/cats]+(span>lorem10
00)

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

Utilize CSS e aplique fundos com cores diferentes para cada tipo de elemento

Salve e teste
a.

Perceba quais os elementos que ocupam toda a tela

265

25.2.2

Modificando a Exibio

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:

Modificando a Exibio

Crie um novo arquivo de nome display_change.html

Adicione um menu utilizando <ul>

ul>li*5>a[href=#]{Link $}

Salve e teste
a.

Identifique o tipo de exibio da lista

Altere o tipo de exibio atravs do cdigo CSS:

li {
list-style: none;
display: inline;
}

Salve e teste

266

Adicione o seguinte cdigo:

<p>
Text inside <p> tag.
<span>First <span> tag.</span>
<span>Second <span> tag.</span>
<span>Third <span> tag.</span>
</p>

Salve e teste
a.

Perceba a exibio inline de <span>

Altere a exibio para "block" do elemento <span>

span {
display:block;
}

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/

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>

No campo escrito CSS, adicione o seguinte estilo:

h1 ~ h1 {
background-color: #f00;
}

Perceba o espao ocupado por <h1>

268

Modifique o CSS para:

h1 ~ h1 {
background-color: #f00;
display:none;
}

Perceba que o espao ocupado por <h1> deixou de existir

Modifique o CSS para:

Comente a ltima instruo utilizando o atalho CTRL + /

h1 ~ h1 {
background-color: #f00;
/*display:none;*/
visibility: hidden;
8.

}
Perceba que o espao ocupado por <h1> foi mantido

Salve o EP como arquivo display_background.html

Clique no boto Save

Clique no boto Share

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
Abra o endereo abaixo:
http://jsfiddle.net/

Identifique o campo com o nome HTML e adicione o seguinte cdigo:

div#div$*3

Identifique o campo CSS e adicione:

div {
width: 200px;
height: 200px;
}
#div1 {
background: skyblue;
}
#div2 {
background: gold;
}
#div3 {
background: salmon;

}
Clique no boto Run localizado na barra superior do lado direito

Altere o CSS para:

#div2 {
background: gold;
position: static;
top: 100px;
}

271

Clique no boto Run

Perceba que nada ocorreu, a distncia definida pela propriedade top

Altere o valor position de static para relative

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

Adicione na URL o valor /show

Clique em CTRL + S

Modifique o nome do arquivo e salve na pasta position no projeto

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.

Utilize o cdigo URL salvo no EP anterior

Clique no boto Fork localizado na barra superior ao lado do boto Save

Uma nova verso do cdigo criada

A original ser mantida

Ambas as verses podero ser acessadas pelas diferentes URLs

Altere o cdigo CSS de div2 para:

position:relative;
top: 20px;
left: 20px;

Rode o cdigo
a.

Veja o deslocamento da div2

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

Abra o JSFiddle com o EP anterior e clique em Fork

Altere o cdigo CSS de div2 para:

#div2 {
background: gold;
position: absolute;
top: 20px;
left: 20px;
}

Rode o cdigo
a.

Perceba que no existe nenhum parent container com propriedade

position diferente de static (padro)

O elemento posicionando utilizou como referncia o ponto inicial da

pgina (0,0)

O espao inicialmente ocupado pela div2 foi utilizado pelo elemento na

sequncia (div3)

Altere o cdigo HTML, envolvendo a div2 dentro de outra <div>:

Adicione a seguinte instruo CSS:

#divContainer {
background: lime;
}

Rode e visualize os elementos

<div> com posicionamento absoluto continua na mesma posio

274

Altere o cdigo de divContainer acrescentando:

position: relative;

Rode
a.

Perceba que div2 encontrou um parent container diferente de static e

utilizou sua posio como referncia inicial (0,0)

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

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

Abra o JSFiddle do EP static ou absolute

Remova todas as propriedades de posicionamento de div2

Adicione texto aps o fechamento da ltima <div>

p>lorem1000

Altere o posicionamento da div1 adicionando o CSS:

position: fixed;
top: 20px;

left: 20px;
Rode
a.

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

Crie um novo arquivo de nome z-index.html

Adicione o seguinte cdigo HTML:

div#div$*3+p>lorem1000

Configure o CSS da seguinte maneira:

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

Salve e teste
a.

Perceba que div3 ficou sobre div2 por ter sido a ltima <div> com
posicionamento relativo adicionada na tela

Altere o CSS de div3 adicionando a instruo:

z-index: -1;

Salve e teste
a.

Identifique a ordem dos elementos sobrepostos

Altere o posicionamento da div3 para relativo, afastando-se 100 pixels do topo

e da esquerda

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

Crie um novo arquivo de nome anchored.html

Vincule o arquivo com as instrues CSS Reset

Adicione uma <div> com a classe anchored:

div#anchored

Configure a classe para:

Ter uma cor de fundo

Altura de 200 pixels

Adicione as seguintes instrues na classe criada:

position: absolute;
left: 20px;
right: 20px;

Salve e teste
a.

Perceba o distanciamento da esquerda e da direita de 20 pixels

Redimensione a tela e observe que a distncia ser mantida

Faa o mesmo para altura

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

Verifique que no funciona adequadamente

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

Crie um novo arquivo de nome "float.html"

Adicione 10 pargrafos, com a seguinte configurao:

p[title=$]*10>lorem100

Antes do quinto pargrafo adicione uma imagem do seguinte endereo:

http://lorempixel.com/200/200

Adicione o seguinte CSS:

p[title='4'] {
background-color: lime;
}
p[title='5'] {
background-color: yellow;
}
p[title='5'] ~ p {
background-color: skyblue;
}

Salve e teste

Flutue a imagem:
img {
float: right;
}

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

Abra novamente o arquivo "float.html"

Pare a flutuao do sexto pargrafo com o CSS:

p[title='6'] {
clear: right;

}
Salve e teste

25.4.3

Flutuao vs Proximidade

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:

Flutuao vs Proximidade

Crie um arquivo de nome "cats_gallery.html"

Adicione 10 "tags" <img> com a seguinte configurao:

img.gallery[src=http://lorempixel.com/100/90/cats/$]*10

Salve e teste
a.

Redimensione a janela e perceba que enquanto existe espao tudo fica

em uma nica linha

Flutue as imagens a esquerda

Salve e teste
a.

Redimensione a a janela novamente e perceba que o comportamento foi

mantido

Adicione <h3> antes da primeira imagem

h3{Row 1}

Adicione um segundo <h3> aps a quinta imagem:

<img src="http://lorempixel.com/100/90/cats/6"
class="gallery">
Salve e teste
a.

Perceba o alinhamento incorreto do segundo <h3>

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

Crie um arquivo de nome "clearfix.html"

Adicione uma <div> com texto e imagem:

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

No CSS:
a.

Flutue a imagem direita

Adicione uma cores de fundo diferentes para as classes .container e

.footer

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

segundo elemento <span>, utilizando seletores avanados

O segundo elemento do passo 4 <span> pode ser selecionado atravs do uso

de um dos seletores:

last-child

last-of-type

nth-of-type(2)

nth-last-of-type(1)

nth-last-child(1)

Salve e teste
a.

Perceba que a imagem invade a rea do elemento .footer

Tente limpar a flutuao de .footer

clear: right;

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

Apague a instruo clear: right de .footer

285

10.

Baixe e salve o cdigo ClearFix no projeto:

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

13.

Salve e teste

Perceba que a <div> conseguiu calcular corretamente o tamanho da

imagem e adequou seu tamanho a esta

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

Crie um novo arquivo HTML

Adicione uma <div> com <span> e lorem ipsum:

div.center>span[title=$]*2>lorem

Indente o cdigo de forma adequada leitura

No arquivo CSS, adicione o estilo a seguir:

.center {
margin: auto;
width: 500px;
background-color: salmon;
}

Salve e teste
a.

Redimensione a janela e verifique se alguma mudana ocorre

Altere o valor da largura para "70%"

287

Salve e teste
a.

Finalmente altere o valor da largura para "100%"

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.

Utilize cores e ou bordas para marcar cada layout

Redimensione a tela
a.

No deve haver sobreposio de contedo

Estrutura base deve ser mantida

Barras de rolagem devem ser criadas quando necessrias

Opcionalmente pode aumentar quando redimensionado

288

Layouts:

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

Crie um novo arquivo de nome layout_fixed.html

Adicione 5 <div> com <h1>

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

Crie todas as classes necessrias

Coloque uma cor de fundo diferente para cada classe

Flutue a esquerda as classes .leftBar, .content e .rightBar

Na classe .footer utilize a propriedade clear com valor left

Centralize o contedo com margem automtica e 1280 pixels de largura

Salve e teste

Configure as seguintes alturas:

Cabealho com 200 pixels de altura

Rodap com 100 pixels de altura

Barras e contedo com 600 pixels de altura

291

Salve e teste

Configure as seguintes larguras:

Barras com 256 pixels de largura

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

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

Duplique o arquivo do EP anterior para o nome de liquid.html

Apague todas as instrues CSS de largura, altura e margem existentes

Mantenha as instrues que contiverem float e clear

Salve e teste

Adicione as seguintes larguras:

.leftBar e .rightBar com largura de 20%

.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

Redimensione a tela e verifique se os tamanhos so alterados com base

no percentual de largura disponvel

Adicione altura aos elementos:

Cabealho com 20% altura

Barras e contedo com 70% de altura

Rodap com 10% de altura

Salve e teste
a.

Perceba que os valores de altura no foram respeitados

O navegador no consegue calcular sem a definio de tamanho para a

janela

Adicione o seguinte CSS:

html, body {
width: 100%;
height: 100%;

}
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

Duplique o arquivo do EP anterior para hybrid.html

Adicione o seguinte CSS:

body {
min-width: 1280px;
min-height: 768px;
}

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
Abra o endereo abaixo:
http://stephencaver.com/

Redimensione a tela e perceba as mudanas de :

Posicionamento

Layout

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 {
body { font-size: 12px; }

}
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 {
body { font-size: 20px; }
}

Valores aceitos so:

all

braille

embossed

handheld

projection

screen

speech

tty

@media screen {
body { font-size: 20px; }
}

@media tv {
body { font-size: 30px; }
}

298

Mltiplas condies podem ser criadas para um mesmo estilo

Basta separar as condies por vrgula

@media tv, projection {

body { font-size: 30px; }
}
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

299

Existem muitas combinaes possveis

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries#Media_features

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

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries#Media_features

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

Crie a estrutura "responsive" no seu projeto com os arquivos HTML e CSS

vinculados

Adicione as imagens a este projeto na estrutura adequada

Crie um elemento <div> com classe simpsons:

div.simpsons

Configure a classe simpsons para:

height: 768px;
width: 1024px;
margin: auto;
background-color: black;

Salve e teste

Adicione o seguinte cdigo CSS:

@media screen {
#simpsons { background-image: url(images/1.jpg); }
}
@media print {
#simpsons { background-image: url(images/6.jpg); }
}

Salve e teste a impresso

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.

Comente ou remova apenas o cdigo CSS de "media query"

Adicione mais uma instruo CSS

@media screen and (min-width: 950px) {
#simpsons { background-image: url(images/1.jpg); }

}
Salve e teste
a.

Redimensione a janela para menos de "950px"

Utilize o Chrome Developer Tools e verifique a informao com o

tamanho da janela no canto superior direito, enquanto a redimensiona

Perceba que a imagem mantida apena enquantoa condio da media

query for satisfeita, caso contrrio utilizar o CSS fora da instruo

Crie as "media queries" para os seguintes tamanhos e imagens

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

Cdigo deve ficar similar ao trecho abaixo:

@media screen and (min-width: 950px) {
#simpsons { background-image: url(images/1.jpg); }
}
@media screen and (max-width: 950px) {
#simpsons { background-image: url(images/2.jpg); }
}
@media screen and (max-width: 900px) {
#simpsons { background-image: url(images/3.jpg); }
}

304