HTML CSS JavaScript - BeCode

HTML5, CSS3 e JavaScript
Com o curso de HTML, CSS e JavaScript, o aluno dar seus primeiros passos rumo criao de
websites modernos utilizando os padres (HTML, CSS e JS) que definem como a informao da
pgina web deve ser apresentada no seu navegador/browser.
Na primeira etapa do curso, o foco ser no aprendizado das tecnologias HTML e CSS, desde
conceitos iniciais at os mais avanados, abrangendo HTML5 e CSS3, verses que trazem uma
infinidade de novos recursos e funcionalidades, antes s possveis atravs de tecnologias mais
complexas. Esta etapa visa ensinar o aluno a desenvolver um site moderno, de forma completa.
A segunda etapa do curso focada na linguagem de programao JavaScript, tecnologia que

possibilita a implementao de uma infinidade de recursos que aprimoram, complementam e
otimizam o funcionamento de pginas web. JavaScript atua como responsvel pela validao de
formulrios possibilita interfaces flexveis, interatividade, mensagens de alerta e confirmao,
APIs e a criao de contedo dinmico. Tais funcionalidades so abordadas no curso,
exemplificadas e elaboradas na prtica pelo aluno.
Com a concluso do curso de HTML, CSS e JavaScript, o aluno estar apto a criar websites
modernos, aprendendo a manipular o HTML e CSS em sites criados do zero ou atravs de
templates HTML ou sistemas CMS, como WordPress e Joomla. Alm disto, aluno ser capaz de ler
e compreender um cdigo JavaScript, manipular objetos (HTML e CSS) com DOM - Document
Object Model, assim como, controlar eventos e muito mais!
PBLICO-ALVO
Estudantes
Programadores
Desenvolvedores Web
Empreendedores
Analistas de Sistemas
PR-REQUISITOS
Curso BeCode de Lgica de Programao ou conhecimento similar
OBJETIVOS
Elaborar pginas web atravs dos padres web HTML, CSS e JavaScript.
Conhecer o funcionamento da web e do protocolo HTTP - Hypertext Transfer Protocol
Conhecer as tags e o funcionamento da tecnologia HTML
http://www.becode.com.br/
web@becode.com.br
Implementar a sistemtica de hiperdocumentos (navegao entre pginas)

Dominar o uso de elementos tabulares (tabelas) em documentos web
Criar formulrios na web e formatar contedo textual de maneira rica e completa
Trabalhar com os novos recursos, funcionalidades e modelos de contedo do HTML5 e
CSS3.
Analisar o suporte atual pelos navegadores/browser e aprender estratgias de uso
Introduzir o JavaScript: aspectos de segurana e dependncia de aplicaes cliente
Manipular elementos que compe a pgina da web (HTML e CSS)
Entender os fundamentos de programao utilizando a sintaxe do JavaScript
Criar, alterar e manipular contedo dinmico em pginas web.
web@becode.com.br
1- SOBRE A WEB
Histria
Formatar informaes dos sites no algo novo. Por volta de 1970, no comeo da trajetria do
Padro Generalizado de Linguagens de Marcao, SGML, vrios browsers j personalizavam as
aparncias dos documentos, cada um com seu estilo prprio.
O estudante Hakon Wium Lie percebe as dificuldades de formatao ao desenvolver um site e
resolve criar uma maneira fcil para formatar a informao do HTML. Foi a que ele props a
criao do CSS ou Cascading Style Sheets em 1994.
Como a web no havia sido projetada para desenvolver os criativos ambientes grficos que
temos atualmente os recursos de desenvolvimento eram limitados e os criadores faziam das
tripas corao para criar seus sites. Entre as muitas ideias que surgiram para ultrapassar ao
ambiente de "apenas texto" da internet, estava aquela de utilizar tabelas de HTML para
posicionar os elementos no layout, utilizando slices de imagem, gifs transparentes e a tcnica de
aninhamento de tabelas para contornar os problemas que os padres proprietrios traziam. A
esse tipo de tcnica, que foi usada pela maior parte dos websites, chamamos de layout com
tabelas.
W3C World Wide Web Consortium

Em agosto de 1994 foi fundada a W3C, um consrcio formado por instituies comerciais e
educacionais, com o objetivo de definir padres para as respectivas reas relacionadas Web.
Em dezembro de 1997 a W3C publicou o HTML 4 e aps dois meses publicou o XML 1. A W3C
reformulou o grupo responsvel pelo HTML para criar uma sute de tags XML. O primeiro passo
foi dado em dezembro de 1998 quando o grupo reescreveu o HTML em XML sem adicionar
elementos ou atributos novos. Essa especificao foi chamada de XHTML1.
O objetivo seguinte da W3C foi a reestruturao dos formulrios Web. Em agosto de 1999 o
mesmo grupo responsvel pelo HTML publicou o primeiro rascunho da extenso dos formulrios
para XHTML. Alguns meses depois, essa extenso dos formulrios para XHTML foi rebatizada
de XForms. Foi criado um grupo especfico, responsvel pelo XForms. Esse grupo trabalhou em
paralelo com o grupo de desenvolvimento do HTML com a finalidade de publicar a primeira
verso do XForms em outubro de 2003.
Enquanto isso, com a transio do XML completa, os membros do grupo do HTML criaram a
nova gerao do HTML. Em maio de 2001 eles publicaram a primeira verso do XHTML1.1.
Em julho de 2004 a W3C organizou um workshop onde estavam presentes membros da W3C e
companhias desenvolvedoras de navegadores como a fundao Mozilla e a Opera. Neste
workshop foi apresentada uma viso do futuro da web com uma evoluo do padro HTML4
incluindo novas caractersticas para aplicaes modernas.
No workshop a W3C deixou claro que no seriam desenvolvidas novas tecnologias de extenses
do HTML e CSS que no fossem criadas pelo atual grupo de trabalho da W3C. Diante desse
impasse, o grupo que desenvolvia o HTML e os formulrios HTML tinha duas escolhas: ou se
uniam W3C, ou se separavam. Dessa forma, em julho de 2004 surgiu o WHATWG.
De acordo com o W3C a Web baseada em trs pilares:
1. Um esquema de nomes para localizao de fontes de informao na Web, a URI.
2. Um Protocolo de acesso para acessar estas fontes, o HTTP.
3. Uma linguagem de Hypertexto, para a fcil navegao entre as fontes de informao, o
HTML.
WHATWG Web Hypertext Application Technology Working Group
Enquanto o W3C focava suas atenes na criao da segunda verso do XHTML (Linguagem
reformulada do HTML, baseada em XML, com o intuito de melhorar a acessibilidade) um grupo
chamado Web Hypertext Application Technology Working Group ou WHATWG trabalhava em uma
web@becode.com.br
verso do HTML que trazia mais flexibilidade para a produo de websites e sistemas baseados
na Web, o que seria chamado hoje de HTML5.
O WHATWG (http://www.whatwg.org/) foi fundado por desenvolvedores de empresas como
Mozilla, Apple e Opera em 2004. Eles no estavam felizes com o caminho que a Web tomava e
nem com o rumo dado pelo W3C ao XHTML. Entre outros assuntos que o WHATWG se focava era
Web Forms 2.0 que foi includo no HTML5 e o Web Controls 1.0 que foi abandonado, por
enquanto.
Por volta de 2006, o trabalho do WHATWG passou a ser conhecido pelo mundo e principalmente
pelo W3C que at ento trabalhavam separadamente que reconheceu todo o trabalho do
grupo. Em Outubro de 2006, Tim Berners-Lee anunciou que trabalharia juntamente com o
WHATWG na produo do HTML5 em detrimento do XHTML 2. Contudo o XHTML continuaria
sendo mantido paralelamente de acordo com as mudanas causadas no HTML. O grupo que
estava desenvolvendo especificamente o XHTML 2 foi descontinuado em 2009.
HTML5
O HTML5 a verso mais recente do HTML. Com HTML5 a reproduo de vdeo e udio ficou
mais fcil e tambm possvel desenhar grficos com <canvas></canvas>, SVG e CSS3 2D/3D.
Temos o suporte a API's facilitado e algumas aplicaes j disponveis como Geolocation e
FileAPI.
O HTML5 trouxe novos elementos semnticos para cabealhos, rodaps, menus, sees e
artigos. Novos elementos para formulrios tambm foram criados assim como novos atributos,
novos tipos de entradas e validao automtica.
Um dos principais objetivos do HTML5 padronizar a semntica na Web, facilitando a integrao
do cdigo entre os navegadores. Ao contrrio das verses anteriores, o HTML5 fornece
ferramentas para CSS e Javascript desempenhar seu papel de melhor forma possvel. O HTML5
permite, por meio de suas APIs, a manipulao das caractersticas desses elementos, de forma
que o website ou a aplicao continue leve e funcional.
O HTML5 tambm cria novas tags e modifica a funo de outras. As verses antigas do HTML
no continham um padro universal para a criao de sees comuns e especficas como
rodap, cabealho, menus etc. No Havia um padro de nomenclatura de IDs, Classes ou tags.
No havia um mtodo de capturar de maneira automtica as informaes localizadas nos
rodaps dos websites.
H outros elementos e atributos que suas funes e significados foram modificados e que agora
podem ser reutilizados de forma mais eficaz. Por exemplo, elementos como B ou I que foram
descontinuados em verses anteriores do HTML agora assumem funes diferentes e integram
mais significado para os usurios.
O HTML5 modifica a forma de como escrevemos documentos e como organizamos a informao
na pgina de maneira semntica e com menos cdigo.
O WHATWG tem mantido o foco para manter a compatibilidade. Nenhum site dever ser refeito
totalmente para se adequar aos novos conceitos e regras. O HTML5 est sendo criado para que
seja compatvel com os browsers recentes, possibilitando a utilizao das novas caractersticas
imediatamente.
Os motores de renderizao dos browsers so os softwares responsveis por transformar
linguagem de marcao, scripts e informaes de formatao em um contedo compreensvel
para ser exibido em tela. Estes mecanismos precisam ser atualizados constantemente para dar
suporte a evoluo da HTML.
MOTOR
BROWSER
Webkit
Safari, Chrome, Opera

web@becode.com.br
Gecko
Firefox
Trident
Explorer
EdgeHTML
Edge
PARA SABER MAIS
WHATWG community
github.com/whatwg/
(X)HTML5 Validator
EXERCCIOS

web@becode.com.br
2- CRIANDO UM DOCUMENTO HTML

Tags so estruturas da linguagem de marcao que contm instrues para que os navegadores
(e alguns dispositivos) possam renderizar uma pgina, elas normalmente vm em pares, como
<p> e </p>, e geralmente so palavras em ingls ou simplesmente abreviaes de palavras da
lngua norte-americana. Em HTML possvel incorporar elementos dentro de elementos e os
tags containers so chamadas ns. Algumas tags no possuem fechamento em par (como a
tag <p> </p>), ento podemos utilizar a barra em sua prpria declarao.
A primeira a tag de incio, a segunda a tag final escrita exatamente como a tag inicial, mas
com uma barra antes do nome, a barra representa o fechamento da tag e o encerramento
daquela determinada marcao. O Incio e fim das tags tambm so chamados de tags de
abertura e fechamento.
Para que uma pgina seja identificada e renderizada como uma pgina HTML, necessrio,
antes de tudo, definirmos a estrutura padro para que o navegador compreenda o tipo de
contedo que est recebendo.
A estrutura bsica em uma pgina HTML a seguinte:
HTML
Toda pgina HTML5 deve iniciar com <!DOCTYPE html>.A declarao do <!DOCTYPE> no
uma tag HTML, uma instruo para o navegador sobre qual verso do HTML a pgina escrita.
No HTML4 a declarao do <!DOCTYPE> refere-se a um DTD, porque o HTML4 foi baseado em
SGML. O DTD especifica as regras da linguagem de marcao para que o navegador processar
o contedo corretamente. HTML5 no se baseia em SGML, portanto no necessita de uma
referncia a uma DTD.
Aps a declarao do tipo de documento a tag <html> abre o documento sendo seguida por
</html> que encerra a declarao. O cdigo HTML pode ser entendido como uma srie de
elementos em rvore onde alguns elementos so filhos de outros e assim por diante. O
elemento principal dessa grande rvore sempre a tag HTML.
Dentro da tag <head></head>meta tags contem conjunto de informaes a respeito da pgina
e do contedo nela publicado como ttulo e codificao, tambm links de arquivos externos CSS
web@becode.com.br
e JS. Podemos dizer que dentro das tags <head></head>que est toda a parte inteligente da
pgina. Informaes como Title e Description, por exemplo, so usadas pelos mecanismos de
busca para montar uma SERP (Search Engine Results Page). H tambm uma metatag
responsvel por chavear qual tabela de caracteres a pgina est utilizando.
<meta charset=utf-8>
UTF-8 (8-bit Unicode Transformation Format) um tipo de codificao Unicode de comprimento
varivel que pode representar qualquer carcter universal padro do Unicode, sendo tambm
compatvel com o ASCII. Por esta razo, est a ser adaptado como tipo de codificao padro
para email, pginas web, e outros locais onde os caracteres so armazenados. Atualmente a
maioria dos sistemas e browsers utilizados por usurios suportam plenamente Unicode. Por isso,
fazendo seu sistema Unicode voc garante que ele ser bem visualizado aqui, na China ou em
qualquer outro lugar do mundo. O que o Unicode faz fornecer um nico nmero para cada
caractere, no importa a plataforma, nem o programa, nem a lngua.
A tag LINK uma ligao para fontes externas que sero usadas no documento. No nosso
exemplo h uma tag LINK que importa o CSS para nossa pgina:
HTML
O atributo rel=stylesheet" indica que aquele link relativo a importao de um arquivo

referente a folhas de estilo. No HTML5 h outros links relativos que voc pode inserir como o
rel="archives" que indica uma referncia a uma coleo de material histrico da pgina.
A tag <script> </script> usada para definir que as sequencias de comandos seguintes sero
interpretadas pelo motor de Scripts do Browser, No HTML5, o atributo type usado no HTML4
passa a ser opcional, pois se entende que o Javascript a linguagem padro de scripts usados
na Web.
HTML
web@becode.com.br
Dentro da tag <body></body> disposto o contedo da nossa pgina, atravs de tags

semanticamente criadas para o que desejamos exibir para o usurio. Por exemplo, um bloco de
texto pode ser definido com as tags <p></p> que representam um pargrafo, enquanto uma
imagem pode ser definida com a tag <img>.
Exemplo de documento HTML simples
HTML
Os elementos da categoria Heading definem uma seo de cabealhos, que podem estar
contidos ou no em um elemento na categoria Sectioning.
h1
h2
h3
h4
h5
h6
HTML
web@becode.com.br
Onde a <h1> a mais importante e tipicamente maior em relao as outras e a <h6> a

menos importante na hierarquia. Ento temos:
A declarao DOCTYPE define o tipo de documento;

As informaes entre <html> e </html> vo gerar uma pgina web ;
As informaes entre <head> e </head> formam o cabealho da pgina;
As tag <meta> so informaes mais tcnicas;
O texto entre <title> e </title> exibido como ttulo da pgina;
As informaes entre <body> e </body> formam o contedo visvel da pgina;
O texto entre <h1> e </h1> exibido como um ttulo de contedo;
O texto entre <p> e </p> exibido como um pargrafo.
PARA SABER MAIS
Useful HTML Meta Tags

MDN HTML element reference
Utilizando as metatags do Facebook
EXERCCIOS
<!
Escreva o cdigo do primeiro exemplo de HTML em um documento de texto e salve com o nome
de index.htm na rea de trabalho.
Abra o documento em diferentes Browsers.
-->
web@becode.com.br
3- FORMATANDO UM DOCUMENTO
A SEMNTICA DAS NOVAS MARCAES
Em todas as pginas da Web existem divises bsicas referentes aos tipos de contedo que so
colocados em cada parte do layout, como cabealho, rodap ou menu de navegao.
Nas verses anteriores do HTML no havia tags com uma semntica apropriada para cada uma
dessas divises. Dessa forma, os desenvolvedores acabavam usando a tag <div> para todas as
situaes, e criando seus prprios padres de nomenclaturas atravs dos atributos id ou class.
No HTML5 foram criadas diversas tags semnticas para indicar aos user-agents quais
contedos esto sendo inseridos em cada uma das divises da pgina, organizando e
padronizando o desenvolvimento.
O HTML5 trouxe uma srie de elementos que nos ajudam a definir setores principais no
documento HTML. Com a ajuda destes elementos, podemos, por exemplo, diferenciar
diretamente pelo cdigo HTML5 reas importantes do site com sidebar, rodap e cabealho.
Conseguimos seccionar a rea de contedo indicando onde exatamente o texto do artigo.
Estas mudanas simplificam o trabalho dos buscadores. Com o HTML5 os buscadores
conseguem vasculhar o cdigo de maneira mais eficaz, procurando e guardando informaes
mais exatas e levando menos tempo para estocar essa informao.
At a especificao quatro da HTML usamos a tag Bold <b> </b> para exibir um texto em
negrito em uma pgina Web ou a tag Italic <i> </i> para exibir um texto em itlico. As
especificaes para a HTML5 redefinem os elementos b e i retirando-lhes o carter puramente
de apresentao e a eles atribuindo uma funo semntica. De acordo com a especificao o
<b> </b> por exemplo, deve ser usado como ltimo recurso, quando nenhuma outra tag for
apropriada. As diretrizes de uso desses elementos so as seguintes:
O elemento <i></i> destina-se a marcar trechos de textos que meream um destaque

de entonao de voz ou modo quando lidos, ou seja, textos fora do fluxo normal de
leitura do texto como um todo. Por exemplo: designaes taxonmicas, termos tcnicos,
frases em outro idioma, um pensamento, um nome de navio ou outro trecho de texto
qualquer cuja apresentao tipogrfica seja tipicamente em itlico.
O elemento<b></b> destina-se a representar um trecho de texto estilisticamente

destacado do fluxo de prosa normal sem a ele atribuir nenhuma importncia extra. Por
exemplo: palavras-chave de um documento, nomes de produtos em uma resenha ou
outro trecho de texto qualquer cuja apresentao tipogrfica seja tipicamente em
negrito.
NFASE E FORA
web@becode.com.br
A especificao HTML5 determina que texto enftico deva ser indicado com a tag <em></em>,
textos de maior importncia devem ser indicado com a tag <strong> </strong> e textos
marcados ou destacados devem usar a tag <mark></mark>. Voc deve usar a propriedade CSS
"font-weight" para definir o texto em negrito quando a nica funo realizar uma marcao
visual.
PARGRAFOS
As tags <p> </p> que usamos existem para agrupar as linhas de texto em uma pgina. O
Navegador exibir o texto em um nico paragrafo ainda que seja digitados vrios ENTER em
um bloco de texto.
QUEBRA DE LINHA
Se precisar exibir uma parte do texto em uma nova linha( SHIFT + ENTER ), voc pode inserir
uma quebra de linha utilizando a tag Break, ou </br>.
LINHAS HORIZONTAIS
Linhas horizontais so usadas para dividir a informao em diferentes blocos temticos em uma
mesma seo de texto. Para fazer uso de uma linha horizontal (Horizontal Rule) usa-se a tag
<hr/>.
COMENTRIOS
Voc pode adicionar comentrios para incluir uma nota, explicaes, sugestes que no fazem
parte visual do documento. Usa-se a tag comment  para adicionar trechos de cdigo que
sero ignorados pelo Browser durante a leitura do documento HTML. Normalmente voc usa a
tag  para fornecer informaes sobre o autor do documento ou para adicionar uma
mensagem de copyright.
PR-FORMATADO
Como vimos ao usar a tag <p></p>, por padro, os browsers no exibem os espaos extras e
linhas em branco de um documento HTML na pgina Web correspondente. A tag Pre-formatted
web@becode.com.br
<pre></pre> conserva espaos mltiplos e linhas em branco mantendo a forma em que o texto
foi escrito
HTML
IMAGENS
Usamos imagens para melhorar a comunicao dos conceitos explicados em uma pgina Web.
Imagens melhoram, compe a aparncia do documento e destacam as ideias. Tipicamente
utilizamos imagens para incluir ttulos e logos em uma pgina, tambm como links para outras
pginas. Primeiramente quando adicionamos uma imagem a uma pgina, preciso manter em
mente o tamanho da imagem, formato e posio desta imagem. O tamanho da imagem reflete
diretamente o tamanho do arquivo da imagem que por sua vez reflete no tempo de
carregamento deste arquivo em uma rede. Quanto menor a velocidade de conexo do usurio,
maior o tempo de espera para a carga completa da imagem. Voc pode arrumar as imagens de
vrias maneiras e posies em sua pgina, entretanto, o posicionamento de diversas imagens
na mesma pgina dever ser consistente. Neste ponto Vamos trocar o titulo de nossa pgina por
uma imagem. O atributo src = indica o caminho do arquivo que ser apresentado pela pgina
do browser neste ponto do documento HTML.
HTML
web@becode.com.br
A sintaxe a seguinte:
img= tag utilizada para inserir uma imagem na pgina web.

src= atributo usado para especificar o arquivo da imagem a ser inserida.
alt= texto alternativo imagem, considerado atributo de acessibilidade bastante
valioso para deficientes visuais
width = largura em pixels.
height = altura em pixels.
As primeiras imagens da Web eram formatadas utilizando entre 16 e 256 cores, j que este era o
limite mximo de exibio dos monitores. Alm disso, o uso de um nmero grande de cores
numa imagem elevava muito o tamanho do arquivo. Atualmente no existe uma preocupao
muito grande com a quantidade de cores, mas sim com o tamanho do arquivo.
A Internet suporta quase todos os tipos de arquivos de imagens. Tipicamente so utilizados em
documentos HTML:
GIF - Graphics Interchange Format suporta oito bits por pixel, permitindo o uso de uma paleta de
at 256 cores. Utiliza o tipo de compresso LZW e mais indicado para grficos, cones e
imagens que no necessitam muitas cores. Permite imagens com fundo transparente.
JPG - Joint Photographic Experts Group o mtodo mais utilizado para comprimir imagens
fotogrficas. Foi introduzido em 1983 e suporta at 16,8 milhes de cores. No permite imagens
com fundos transparentes.
PNG - Portable Networks Graphics o substituto do formato GIF, que assim como JPG permite
exibio de at 16,8 milhes de cores e d suporte a canal alpha e fundos transparentes.
LISTAS
Uma lista uma coleo de itens relacionados, so usadas para organizar dados como uma
sequncia de passos ou itens em um grupo.
Em HTML existem quatro tipos de listas:
1. Numeradas - usada para exibir um conjunto de itens depois de um nmero, de forma
ordenada.
2. No numeradas - usada para exibir um conjunto de itens depois de uma marcao,
chamada tambm de lista de marcao, ou ainda no ordenada.
3. Intercaladas - combinao de duas ou mais listas. Listas intercaladas esto sendo
descontinuadas no sendo mais utilizadas.
4. Por definio - para exibir um conjunto de itens e suas descries
Observe o cdigo para uma lista tnto ordenada quanto desordenadas como vimos o curso Online
como criar cada uma delas, alm claro de como cria-las intercaladas.
HTML
web@becode.com.br
LINKS
Conexes pelas quais voc conecta pginas que podem ser do mesmo website, externas, de
qualquer outro site, ou ainda conectar pginas a outros documentos. Os links podem ser criados
no texto e tambm em outros elementos do website, como em imagens e tambm itens de um
menu. A tag Anchor <a> </a> (ncora) utilizada para criar links no hipertexto. A sintaxe desta
tag a seguinte:
HTML
O browser exibe o hiperlink em um formato diferente do texto normal, normalmente sublinhado

e na cor azul. Ao especificar uma URL apropriada para um servio de Internet, voc tambm
pode interligar sua pgina Web a esse servio. Por exemplo, voc pode criar um link entre sua
pgina e o seu e-mail.
TABELAS
Tabelas devem ser usadas exclusivamente na listagem de dados tabulares. Uma tabela
definida pela tag <table></table>, seguida de suas marcaes <thead></thead>,
web@becode.com.br
<tfoot></tfoot> e <tbody></tbody>, so as definies para cabealho, rodap e corpo da

tabela respectivamente. O elemento <caption> </caption> responsvel pelo ttulo da tabela.
esta tag que vai apresentar o que a tabela tem que transmitir para o usurio, deve ser inserido
logo aps a tag <table></table> e s pode haver um elemento <caption> </caption> por
Tabela.
As tabelas so divididas em linhas chamadas de table rows com a tag <tr></tr>, as quais so
divididas por colunas com a tag <td></td>. Linhas que pertencem ao cabealho da tabela
<thead><thead> tem a declarao de suas colunas com a tag <th></th>.
HTML
O atributo colspan determina a quantidade de colunas que a clula da tabela dever ocupar,
"col" vem de column (coluna) e span quer dizer expandir, abranger. Note que as clulas de
cabealho e rodap esto sozinhas em suas linhas e queremos fazer uma clula ocupar o espao
de trs colunas, ento na tag da clula em questo atribumos colspan="3".
A mesma lgica pode ser aplicada ao atributo rowspan onde row tem o significado de linha,
TAG SPAN
web@becode.com.br
O elemento HTML <span> </span> um conteiner generico em linha para texto, que no
representa nada por natureza. Ele pode ser usado para agrupar elementos para fins de estilo
(usando os atributos class ou id), ou para compartilhar valores de atributos como lang. Ele deve
ser usado somente quando nenhum outro elemento semntico for apropriado. <span> muito
parecido com o elemento <div> </div>, entretando <div> </div>, um elemento de nvel de
bloco enquanto <span> </span> um elemento em linha.
HTML
<ul>
<li><a
<li><a
<li><a
<li><a
<li><a
</ul>
href="#">A <span class="subTitle">Subtitle</span></a></li>

href="#">B <span class="subTitle">Subtitle</span></a></li>
href="#">C <span class="subTitle">Subtitle</span></a></li>
href="#">D <span class="subTitle">Subtitle</span></a></li>
href="#">E <span class="subTitle">Subtitle</span></a></li>
TAG DIV
O elemento <div></div> um elemento genrico que serve para criar divises que no tem
significado semntico nenhum, formataes tipicamente visuais no carregam nenhum tipo de
informao extra. Geralmente so livres agrupados de contedo que devem se distinguir por
CLASSES e IDs.
HTML
<section id="noticias">
<div> ... </div>
<div> ... </div>
<div> ... </div>
</section>
TAG SECTION
A tag <section></section> define uma nova seo genrica no documento, um bloco de
contedo relacionado. Por exemplo, a home de um site pode ser dividida em diversas sees:
introduo, novidades ou informaes de contato.
O contedo relacionado e no faria sentido por si prprio? Utilize <section></section>

HTML
web@becode.com.br
TAG ARTICLE
Define um post, um artigo, um bloco de texto ou ainda um mini aplicactivo embutido no
contedo (widget). O elemento article um elemento que forma uma parte independente ou
reutilizvel do documento, sendo mais especfico que o section e que o div. Todo o contedo do
article pode ser utilizado em feeds ou outros meio de sindicao. O <article> </article> um
web@becode.com.br
tipo especializado de <section></section>, tem um significado mais especfico do que

semntico.
O contedo faria sentido por si prprio em um leitor de feed? Utilize <article> </article>
HTML
TAG NAV
A tag <nav></nav> representa uma seo da pgina que contm links para outras partes do
Website. Nem todos os grupos de links devem ser elementos <nav></nav>, apenas aqueles
grupos que contm links importantes. O elemento <nav></nav> no deve ser usado em links
mencionados em um pargrafo de contedo e tambm em links no rodap do tipo site criado
por. Essa tag pode ser aplicado naqueles blocos de links que geralmente so colocados no
Rodap e tambm para compor o menu principal do site.
HTML
TAG FOOTER
Marca a rea inferior, normalmente conhecida como rodap, do documento ou do contedo de
uma seo especfica a qual est subordinado.
Utilizaes de <footer></footer>como ltimo elemento do documento, na funo de rodap
global e contendo um bloco de navegao global do documento:
web@becode.com.br
HTML
TAG HEADER
Representa um grupo de introduo ou elementos de navegao. O elemento header pode ser
utilizado para agrupar ndices de contedos, campos de busca ou at mesmo logos. Dentro do
header possvel inserir um ou mais elementos h1 at h6, organizando-os em uma hierarquia
de ttulos e subttulos.
Como cabealho principal do documento.
HTML


PARA SABER MAIS
HTML YouTube Videos

HTML5 Video
HTML5 Audio
HTML Tag List
web@becode.com.br
EXERCCIOS

4- FORMULRIOS HTML
Formulrios HTML so usados para transmitir dados a um servidor. Um formulrio HTML pode
conter elementos de entrada, como campos de texto, caixas de seleo, botes de rdio, botes
de envio e demais elementos como: listas de seleo, textarea, fieldset, legendas e elementos
de rotulagem. Para se criar um form usamos as tags <form> </form>.
TAG INPUT
O elemento mais importante de um <form> </form> o elemento <input></input>, ele
usado para dar entrada nas informaes do usurio. Um elemento <input></input> pode variar
web@becode.com.br
de muitas formas, dependendo do atributo type, inputs podem ser do tipo campo de texto,
caixa de verificao, senha, boto de rdio, boto entre outros.
HTML
Definindo um campo de senha que oculta os caracteres digitados

HTML
<form id="_Form1">
Senha: <input type="password" id="_Senha">
</form>
Os tipos <input type="radio"> definem botes que permitem que o usurio selecione apenas
uma opo entre de um nmero de opes, botes que se auto excluem fazem parte de um
grupo definido atravs do atributo name:
HTML
web@becode.com.br
As caixas de seleo permitem que o usurio selecione nenhuma ou mais opes de um nmero
limitado de opes.
HTML
Canhoto? <input type="checkbox" id="_Canhoto" />
Um boto de envio usado para enviar dados de formulrio para um servidor. Os dados so
enviados para a pgina especificada no atributo action do formulrio.
HTML
O cdigo cria um tpico campo para pesquisas.

HTML
Busca: <input list="_cidades" autocomplete="on" name="_BuscarCidade" type="search"
placeholder="pesquisar...">
<datalist id="_cidades">
<option value="Braslia">
<option value="Florianpolis">
<option value="Rio de Janeiro">
<option value="Porto Alegre">
<option value="Curitiba">
<option value="So Paulo">
</datalist>
TAG SELECT
A tag <select></select> define o incio de uma lista de seleo. As listas de selees permitem
que o usurio selecione uma das opes de um nmero limitado de opes.
HTML
<select id="_Carro">
web@becode.com.br
<option
<option
<option
<option
<option
<option
<option
</select>
value="Chevrolet">Chevrolet</option>
value="Volvo">Volvo</option>
value="Saab">Saab</option>
value="VW" selected="selected">VolksWagem</option>
value="Mercedes">Mercedes</option>
value="Audi">Audi</option>
value="Fiat">Fiat</option>
TAG TEXTAREA
A tag <textarea> </textarea> define o incio de uma caixa de texto que permite ao usurio
escrever um texto com mltiplas linhas.
HTML
<textarea id="_TextoMultiLine"></textarea>
O ATRIBUTO PATTERN
Uma das tarefas mais enfadonhas de se fazer validar formulrios. Infelizmente, tambm uma
das mais comuns. O HTML5 facilita muito ao validar formulrios, tornando automtica boa parte
do processo. O atributo pattern permite definir expresses regulares de validao. Exemplo de
como validar CEP:
HTML
<form>
<label for="CEP">
CEP: <input name="_CEP" id="_CEP" required pattern="\d{5}-?\d{3}" />
</label>
<input type="submit" value="Enviar" />
</form>
PLACEHOLDER
Atributo usado para auxiliar o usurio no preenchimento do campo, d uma dica do que deve ser
inserido.
HTML
<input name="pesquisar" type="search" placeholder="Pesquisar" />
REQUIRED
Para tornar um campo de formulrio obrigatrio (seu valor precisa ser preenchido) basta, em
HTML5, incluir o atributo required.
HTML
<input name="login" required/>
PARA SABER MAIS
Expresses Regulares - Guia de Consulta Rpida

HTML Forms
HTML Input Types
EXERCCIOS
<!-Construa o seguinte formulrio usando HTML semntico.
web@becode.com.br
-->
5- CSS
A CSS (Cascading Style Sheets) uma linguagem de estilo que surgiu na poca do HTML 4.0 e
utilizada para definir como os elementos de uma linguagem de marcao, como o HTML ou XML,
sero apresentados visualmente pelos navegadores.
A vantagem que o CSS bem mais robusto que o HTML para estilizao destes elementos e
isto aumenta a possibilidade de criar layouts mais atrativos visualmente e por consequncia
aumentando o poder comercial do site.
O HTML nunca foi destinado a conter tags para a formatao de documentos web, ele foi
concebido para definir o contedo de um documento. Quando tags como <font><font>, e
atributos de cor foram adicionados no HTML 3.2, comeou um pesadelo para os
desenvolvedores. Com a necessidade da criao de complexos aplicativos e sites, adicionar
fontes e informaes de cores a cada pgina individualmente tornou-se um processo longo e
caro. Para resolver este problema, o World Wide Web Consortium (W3C) criou o CSS. Quando o
web@becode.com.br
HTML 4.0 surgiu, toda a formatao visual pode ser removida do HTML, sendo colocada em um
arquivo separado, a folha de estilo.
Existem trs maneiras de aplicarmos nossas formataes em CSS, duas delas no devem ser
usadas por questes de boas prticas, mas importante voc ter conhecimento de todas, pois
certamente voc vai se deparar com elas durante em algum momento.
ATRIBUTO STYLE
A primeira maneira de se criar estilo em CSS como um atributo style no prprio elemento. Uma
das grandes vantagens do CSS manter as regras de estilo fora do HTML e usando o atributo
style no fazemos isso. Por este motivo no se recomenda esse tipo de uso na prtica. Alm do
fato que cada vez que formos usar a tag <p> </p> temos que repetir o cdigo de formatao
dela, isso duplica o tempo de codificao de cada pgina e o nosso trabalho.
CSS
<p style="color: #000; font-size: 20px;">
Ol! Sou um exemplo de texto. :))
</p>
TAG STYLE
A segunda maneira de se utilizar o CSS declarando suas propriedades dentro de uma tag
<style></style>. Como estamos declarando as propriedades visuais de um elemento no header
do nosso documento, precisamos indicar qual elemento nos referimos. Fazemos isso utilizando
um seletor CSS que basicamente uma forma de buscar certos elementos dentro da pgina que
recebero os estilos visuais desejados.
O bloco de declarao contm uma ou mais declaraes separadas por ponto e vrgula. Cada
declarao inclui um nome de propriedade e um valor, separados por dois pontos.
No exemplo a forma de aplicar o bloco de seleo no cdigo HTML
CSS
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Custom validator</title>
<style>
h1 {
color: blue;
font-size: 12px;
}
</style>
</head>
<body>
<h1>Meu primeiro ttulo formatado por CSS</h1>
<p>Meu primeiro pargrafo</p>
web@becode.com.br
</body>
</html>
ARQUIVO EXTERNO
A terceira e ultima maneira de aplicarmos os estilos de CSS em uma pgina web, atravs de
um arquivo externo, com a extenso CSS. Este arquivo externo deve conter apenas estilos em
CSS e nunca deve conter informaes em HTML ou outras linguagens.
CSS
<head>
<title> Target CodeShop( ); </title>
.
.
.
<link href="index.css" rel="stylesheet" />
</head>
UNIDADES DE MEDIDA
CSS oferece diferentes unidades para a expresso de comprimento. Algumas tm origem na
tipografia, como o ponto (pt) e a paica (pc), outras unidades de medida so conhecidas devido a
sua relao a aspectos de comuns do dia-a-dia, como centmetro (cm) e polegada (in). E uma
unidade que foi inventada especificamente para CSS: px.
No h qualquer restrio sobre qual unidade pode ser usada em qual lugar. Se uma
propriedade aceita um valor em px ('margin: 5px') ela tambm aceita o valor em polegadas ou
centmetros ('margin: 1.2in; margin: 0.5cm').
As unidades CSS esto agrupadas em dois tipos:
1. UNIDADES ABSOLUTAS - no esto referenciadas a qualquer outra unidade e no so
herdadas. So unidades de medida de comprimento definidas nos sistemas de medidas
pela fsica: centmetros, polegadas... So indicadas para serem usadas quando as mdias
de exibio so perfeitamente conhecidas.
pt - point :1/72 in;

pc - pica :12 points ou 1/6 in;
mm - milmetro :1/10 cm;
cm - centmetro :1/100 m;
in - polegada :2,54 cm;
2. UNIDADES RELATIVAS - Tem relao a outra medida. Folhas de Estilo em Cascata que
usam unidades de comprimento relativas so mais apropriadas para ajustes de uso em
diferentes tipos de mdia.
px pixel - Relativo ao dispositivo (midia) de exibio;

em - Relativo ao tamanho da fonte ('font-size') herdada;
ex - Relativo a altura da letra x (xis) da fonte herdada;
% - percentagem - Relaltivo a uma medida previamente definida.
Pixel
A unidade de medida de comprimento pixel relativa a resoluo do dispositivo de exibio
como a tela de um monitor. Pixel o menor elemento em um dispositivo de exibio, ao qual
possivel atribuir-se uma cor. Considere um dispositivo de exibio construido com uma
densidade de 90 dpi (dpi = dots per inch = pontos por polegada). Por definio, a referncia
padro para pixel igual a um ponto no citado dispositivo. Da pode-se concluir que 1 pixel
naquele dispositivo de exibio igual a 1/90 inch = 0,28 mm. Para uma densidade de 300 dpi 1
pixel igual a 1/300 inch = 0,085mm. Assim, pixel uma medida relativa a resoluo do
dispositivo de exibio.
web@becode.com.br
Em
A unidade de medida de comprimento em referencia-se ao tamanho da fonte (letra) do seletor
onde for declarada. Quando em for declarada para a propriedade font-size referencia-se ao
tamanho da fonte (letra) do elemento pai. Quando em for declarada para o elemento raiz do
documento referencia-se ao valor inicial (default) do tamanho de fonte (letra).
Os exemplos esclarecem as definies:
CSS
h1 { line-height: 1.2em }
line-height de <h1> ser 20% maior do que o tamanho das letras de <h1>
CSS
h1 { font-size: 1.2em }
font-size de <h1> ser 20% maior do que o tamanho das letras herdado por <h1> p.ex.: se h1
estiver contido numa div com font-size=10px ento font-size de h1 = 12px
Ex
A unidade de medida de comprimento ex igual a altura da letra x(xis) minscula.
Percentagem - %
Valores em percentagem so relativos a outro valor anterior declarado. Este valor anterior h
que estar definido e tipicamente esta definio est em uma determinada propriedade do
mesmo elemento, na propriedade do elemento "pai" ou mesmo no contexto geral da
formatao.
CSS
p { font-size: 10px }
p { line-height: 120% }/*120% de'font-size'=12px*/
Segue tabela de equivalncia entrre medidas e seus valores aproximados, valores dependem do
Navegador utilizado e tambm do Sistema Operacional:
PIXELS
8px
9px
10px
11px
12px
13px
14px
15px
EMS
0.5em
0.55em
0.625em
0.7em
0.75em
0.8em
0.875em
0.95em
%
50%
55%
62.5%
70%
75%
80%
87.5%
95%
16px
1em
100%
17px
18px
19px
20px
21px
22px
23px
24px
26px
29px
32px
35px
36px
1.05em
1.125em
1.2em
1.25em
1.3em
1.4em
1.45em
1.5em
1.6em
1.8em
2em
2.2em
2.25em
105%
112.5%
120%
125%
130%
140%
145%
150%
160%
180%
200%
220%
225%
web@becode.com.br
37px
38px
40px
42px
45px
48px
2.3em
2.35em
2.45em
2.55em
2.75em
3em
230%
235%
245%
255%
275%
300%
SELETOR POR ELEMENTO (TAG)

Seletores CSS permitem manipular elementos HTML, eles so utilizadas para "encontrar" (ou
selecionar) elementos HTML com base no ID, classes, tipos, atributos, valores de atributos etc.
O seletor de elemento seleciona elementos com base no nome do elemento. Voc pode
selecionar todos os elementos <p> </p> em uma pgina (todos os elementos <p> </p> sero
centro-alinhados, com a cor de texto em vermelho)
CSS
p{
text-align: center;
color: red;
}
SELETOR POR ID
O seletor ID usa o atributo id de uma tag HTML para encontrar o elemento especfico.
Um id deve ser nico dentro de uma pgina, ento s devemos usar o seletor de id quando
desejamos encontrar um nico elemento.
Para selecionar um elemento com um ID especfico, devemos criar um ID usando o smbolo #
mais o nome do id que desejamos. IMPORTANTE: No inicie um nome de ID com um nmero!
CSS
#textoCentralizado {
text-align: center;
color: red;
}
SELETOR POR CLASSE

O seletor CLASSE usa o atributo class de uma tag HTML para encontrar o elemento especfico.
Uma classe poder no ser nica dentro de uma pgina, ento podemos usar o seletor de classe
quando desejamos encontrar um ou mais elementos.
CSS
.textoCentralizado {
text-align: center;
color: red;
}
Podemos tambm determinar quais elementos HTML especficos devem ser afetado por uma
classe. No exemplo a seguir, todos os elementos p com a classe "textoCentralizado" sero
centralizados.
CSS
p.textoCentralizado {
text-align: center;
color: red;
}
web@becode.com.br
COMBINANDO SELETORES
Podemos tambm combinar os seletores que aprendemos acima, para conseguir diferentes
elementos e partes mais especficas de nossos sites. Alguns exemplos:
p.destaque seleciona apenas os pargrafos que possuem a classe "destaque".
div#cabecalho h1 seleciona tags h1 que estejam dentro da div com a id "cabecalho".
#conteudo ul li a seleciona links (tag a) dentro de itens de lista dentro de tags ul que estejam
dentro de um elemento com a id "conteudo".
#conteudo p.destaque strong seleciona elementos strong dentro de pargrafos com a classe
"destaque" que estejam dentro de um elemento com a id "conteudo".
.mensagem.destaque seleciona apenas elementos que tenham a classe "mensagem" e a
classe "destaque".
Separando itens por vrgulas, como p.destaque, h1, a seleciona todos os respectivos
elementos para as regras, til para diminuir a repetio de regras no arquivo CSS.
::BEFORE
O pseudo-elemento ::before do CSS3 serve para adicionar alguma formatao ou contedo
antes de um elemento HTML qualquer.
HTML
<ul>
<li>Design para a Internet: Projetando a Experincia Perfeita</li>
<li>No Me faa Pensar</li>
<li>Construindo Sites com CSS e (X)HTML</li>
<li>jQuery: A Bblia do Programador JavaScript</li>
<li>Use a Cabea HTML com CSS e XHTML</li>
</ul>
CSS
li {
font-family: Arial, sans-serif;
line-height: 200%;
color: #333;
list-style: none;
}
li:before {
content: "Livro: ";
color: #D35529;
font-weight: bold;
}
::AFTER
O pseudo-elemento ::after do CSS3 serve para adicionar formatao ou contedo aps um
elemento HTML.
HTML
<ul>
<li rel="timao">Emerson Sheik</li>
<li rel="timao">Danilo</li>
<li rel="tricolor">Luis Fabiano</li>
web@becode.com.br
<li rel="tricolor">Jadson</li>
</ul>
CSS
li {
line-height: 200%;
color: #333;
list-style: none;
}
li:after {
color: #D35529;
font-weight: bold;
}
li[rel="timao"]:after {
content: " - jogador do Corinthians.";
}
li[rel="tricolor"]:after {
content: " - jogador do Fluminense";
}
::FIRST-CHILD E ::LAST-CHILD
Os seletores ::first-child e ::last-child do CSS3 nos permitem formatar apenas o primeiro ou o
ltimo elemento dentro de uma sequncia.
HTML
<section>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
</section>
CSS
section {
width: 800px;
overflow: auto;
margin: 0 auto;
}
div {
width: 100px;
height: 100px;
background-color: #333;
margin: 20px;
float: left;
}
div:first-child {
web@becode.com.br
margin-left: 0px;
}
div:last-child {
margin-right: 0px;
}
PROPRIEDADE CONTENT
A propriedade content cria um contedo esttico utilizando os pseudo-elementos ::after e
::before e s pode ser usada em conjunto com estes.
No CSS existe a possibilidade de voc inserir um elemento de mentirinha (pseudo-elemento) em
objetos no HTML. Estes elementos podem te auxiliar em diversos momentos do
desenvolvimento, evitando a criao de elementos HTML vazios para produzir algum detalhe do
layout que possa se misturar com o contedo real.
Seguidamente preciso criar um elemento <span></span> vazio no comeo ou no final de
uma marcao qualquer para produzir uma seta, um background decorativo ou qualquer outro
detalhe, usar os pseudo-elementos como obter um <span></span> vazio, s que melhor, por
que no gerado lixo no HTML. A propriedade content pode ter os seguintes valores:
VALOR
COMPORTAMENTO
none, normal
O contedo no vai ser gerado.
<string>
Uma string de texto normal.
url( )
Permite inserir imagens de fontes

externas.
counter( )
Inserir contadores.
attr(attribute)
Obter valor de um determinado atributo

do elemento.
open-quote, close-quote
no-open-quote, no-close-quote
Gera marcaes de aspas.
Vamos analisar o exemplo: Imagine agora que voc queira inserir em um ttulo algum contedo
no incio ou no final dele. Imagine que voc queira inserir no comeo de todos os ttulos, algum
contedo Por exemplo, todos os ttulos devem comear com a palavra Captulo:. Em vez de
colocar direto no HTML, podemos colocar via CSS.
HTML
<h1>:Times</h1>
<h1>:Times</h1>
<h1>:Times</h1>
<h1>:Times</h1>
Fizemos ento alguns ttulos em HTML. Mas teramos que fazer um contador ou alguma outra
tcnica para poder contar cada captulo, seria prtico se pudssemos por de uma maneira mais
fcil e rpida. A propriedade content permite atravs de um conter-increment
CSS
web@becode.com.br
h1 {
counter-increment: numero-do-titulo;
}
h1::before {
content: "Captiulo " counter(numero-do-titulo);
}
Colocamos a propriedade counter-increment com o valor numero-do-titulo. Esse valor como se

fosse uma varivel em todos os elementos h1. Toda vez que o browser renderizar um H1, ele
pegar essa varivel (numero-do-titulo) que definimos e incrementar o valor dela.
No pseudo-elemento ::before de cada ttulo, exibimos o valor de contador daquela varivel com
o counter(numero-do-titulo).
ATRIBUTE SELECTOR
No CSS3 tambm possvel formatarmos elementos que possuam um atributo especfico.
Existem diferentes variaes e combinaes de seletores:
HTML
<section>
<div>1</div>
<div>2</div>
<div>3</div>
<div title="Seletores de atributos">4</div>
<div>5</div>
<div>6</div>
</section>
CSS
div {
width: 100px;
height: 100px;
margin: 10px;
float: left;
line-height: 100px;
text-align: center;
color: #fff;
font-weight: bold;
font-family: Verdana, Geneva, sans-serif;
font-size: 16px;
}
div[title] {
}
TARGET SELECTOR
O seletor target do CSS3 nos permite aplicar uma formatao ao elemento que alvo ativo de
um link. No exemplo existem trs blocos diferentes, sobrepostos pelo posicionamento absoluto.
Cada um dos links possui em seu atributo uma ncora para cada um dos blocos. Ao clicar em um
dos links, o seletor aplica a propriedade ao bloco correspondente, fazendo com que ele se
sobreponha aos demais.
HTML
web@becode.com.br
<nav>
<a href="#um" title="ir para o quadro 1">Um</a>
<a href="#dois" title="ir para o quadro 2">Dois</a>
<a href="#tres" title="ir para o quadro 3">Trs</a>
</nav>
<div id="um">Quadro 1</div>
<div id="dois">Quadro 2</div>
<div id="tres">Quadro 3</div>
HTML
nav {
margin: 10px;
}
nav a {
padding: 10px;
}
div {
width: 300px;
height: 100px;
line-height: 100px;
text-align: center;
padding: 10px;
color: #fff;
font-size: 16px;
position: absolute;
top: 100px;
left: 20px;
z-index: 1;
}
div#um {
}
div#dois {
}
div#tres {
}
div:target {
z-index: 1000;
}
NTH-CHILD SELECTOR
Com o seletor nth-child do CSS3 ns podemos aplicar uma formatao a diferentes elementos de
acordo com um determinado intervalo.
CSS
div:nth-child(odd) {
}
web@becode.com.br
div:nth-child(even) {
}
CSS
div:nth-child(3n) {
}
CSS
div:nth-child(3) {
}
PARA SABER MAIS
Guia completo dos Seletores CSS

10 Seletores de CSS Que Voc Deveria Usar
:nth Tester
EXERCCIOS
<!Crie uma tabela zebrada com o seletor nth-child.-->
6- PROPRIEDADES CSS
CSS BOX MODEL
Todo elemento no HTML uma caixa. Controlamos sua largura com width, sua altura com height,
sua borda com border e ainda temos as margens externas e internas com margin e padding. Box
model como todas essas propriedades se relacionam pra determinar o tamanho final do
elemento.
web@becode.com.br
CSS
div {
width: 200px;
padding: 20px;
border: 20px solid gray;
margin: 10px;
}
POSICIONAMENTO CSS
Existem quatro tipos de posicionamento possveis para as DIVs:
1.
2.
3.
4.
Esttico (static)
Relativo (relative)
Absoluto (absolute)
Fixo (fixed)
O posicionamento esttico corresponde ao fluir normal dos elementos num documento HTML, ou
seja, as DIVs so posicionadas de cima para baixo, da esquerda para a direita. Se uma DIV for
reposicionada atravs de css, a DIV imediatamente abaixo toma o seu lugar.
O posicionamento relativo um reposicionamento de uma dada DIV relativamente sua posio
esttica, ou seja, relativamente sua posio esttica a DIV est deslocada no eixo x tantos
pixeis e no eixo y outros tantos pixeis.
O posicionamento absoluto calculado tendo em conta a janela do browser. Neste caso as
coordenadas x e y da DIV esto em perfeita correlao com as dimenses da janela do browser.
O posicionamento fixo permite manter uma DIV fixa na janela do browser, que no mexe com o
movimento do Scroll. Permite-nos criar efeitos como os realizados com frames.
CSS FLOAT
web@becode.com.br
O float uma propriedade por vezes imprevisvel no CSS. Observaremos passo-a-passo o

funcionamento da propriedade em elementos de caixa. Inicialmente obtemos uma estrutura
HTML simples com trs tags Div:
HTML
<div class="tudo">
<div class="menu">Menu</div>
<div class="conteudo">Contedo</div>
</div>
O Float uma propriedade que faz o objeto flutuar esquerda ou direita do restante do
contedo. Se quisermos o menu esquerda e o contedo direita, o que os desenvolvedores
geralmente fazem :
CSS
.menu { float: left; width: 30%; }
.conteudo { float: right; width: 60%; }
Mas isso pode gerar uma srie de efeitos colaterais no desenvolvimento. Vamos compreender o
que pode dar errado. Esta tcnica gera, principalmente no Internet Explorer, alguns erros de
renderizao. Note que a borda do div pai que chamamos de tudo no est acompanhando os
divs internos (.menu e .conteudo).
Para forar o div tudo a circular tambm os objetos com float, um hack que pode funcionar
adicionar uma div com clear: both; depois de todos os divs flutuantes.
HTML
.clear { clear: both; }
<div class="clear"> </div>
Agora que o float est integrado com o restante do contedo necessrio alinhar Float:right
com o Float:left. Em alguns casos, as colunas no ficam uma do lado da outra por mais que
voc tente.
web@becode.com.br
Para corrigir isso necessrio apenas flutuar a esquerda e permitir o da direita alinhar
naturalmente, com um espao de margem. Veja como simples:
CSS
.conteudo { margin-left: 30%; }
Veja o cdigo combinado de HTML e CSS:

HTML
<div class="clear"> </div>
CSS
.tudo { }
.conteudo { margin-left: 35%; }
BACKGROUND-COLOR
A propriedade background-color especifica a cor de fundo de um elemento. No exemplo
aplicamos uma cor de fundo no elemento body. Podemos ento dizer que no exemplo a
propriedade background-color determina a cor de renderizao do seletor body que esta
associado a marcao HTML <body></body>.
CSS
body {
web@becode.com.br
background-color: #b0c4de;
}
BACKGROUND-IMAGE
A propriedade background-image especifica uma imagem para usar como pano de fundo de um
elemento.
Por padro, a imagem repetida para que ele cobre todo o elemento, mas podemos definir
como ela se repete ou mesmo fazer com que a imagem no se repita, usando a propriedade
background-repeat, e os valores repeat-x, repeat-y ou no-repeat.
CSS
body {
background-image: url("paper.gif");
background-repeat: repeat-x;
}
Pode tambm ser utilizar uma codificao reduzida, sendo a ordem dos valores das propriedades
o equivalente a:
1
2
3
4
5
background-color
background-image
background-repeat
background-attachment
background-position
No sendo necessrio preencher todos os valores, mas os valores inseridos vo ser interpretados
pelo navegador nesta ordem.
CSS
body {
background: #ffffff url("paper.gif") no-repeat right top;
}
COLOR
A propriedade color utilizada para definir a cor do texto. No CSS as cores so mais
frequentemente especificadas por:
Valor HEX (hexadecimal) - como "# FF0000"

Valor RGB (red green blue)- como "rgb (255.0.0)"
Nome de uma cor - como "blue"
O CSS3 especifica novas formas de manipulao de cores:
RGBA - Vermelho, Verde, Azul, Opacidade.

HSL - Tom, Saturao, Luminosidade.
HSLA - Tom, Saturao, Luminosidade, Opacidade.
Opacity Opacidade nos permite tornar o objeto CSS transparente.
Atualmente o RGBA, HSL, HSLA e Opacity so suportados apenas nas verses mais recentes do
Firefox, Opera Safari e Chrome. No existem solues para o Internet Explorer ou verses
antigas de outros navegadores.
CSS
body {
color: blue;
}
web@becode.com.br
h1 {
color: #00ff00;
}
h2 {
color: rgb(255,0,0);
}
O conjunto de cores RGB so trs nmeros que comeam no 0 e vo at 255 (0% at 100%),
onde o primeiro bloco define a quantidade de vermelho (Red), o segundo bloco a quantidade de
verde (Green) e o ltimo bloco a quantidade de azul (Blue). A combinao destes nmeros
formam todas as cores que voc pode imaginar.
No HTML o RGB pode ser usado em qualquer propriedade que tenha a necessidade de cor,
como: color, background, border etc. Este cdigo RGB define que o background o elemento P
ser amarelo.
CSS
p{
background: rgb(255,255,0);
padding: 10px;
font: 13px verdana;
}
OPACITY
O CSS3 nos trouxe a possibilidade de modificar a opacidade dos elementos via propriedade
opacity. Lembrando que quando modificamos a opacidade do elemento, tudo o que est contido
nele tambm fica opaco e no apenas o background ou a cor dele. Perceba que o background e
tambm a cor do texto ficaram transparentes.
CSS
p{
background: rgb(255,255,255);
padding: 10px;
font: 13px verdana;
opacity: 0.5;
}
web@becode.com.br
til mas dificulta muito quando queremos que apenas a cor de fundo de um determinado
elemento tenha a opacidade modificada. a que entra o RGBA. O RGBA funciona da mesma
forma que o RGB, ou seja, definindo uma cor para a propriedade. No caso do RGBA, alm dos
trs canais RGB (Red, Green e Blue) h um quarto canal, A (Alpha) que controla a opacidade da
cor. Nesse caso, podemos controlar a opacidade da cor do background sem afetar a opacidade
dos outros elementos.
CSS
p{
background: rgba(255,255,255, 0.5);
padding: 10px;
font: 13px verdana;
}
SHADOW
Uma das vantagens mais interessantes que o CSS3 nos d a possibilidade de cada vez menos
abrirmos o Photoshop. Agora temos a possibilidade de inserirmos sombras em textos e em
elementos. As propriedades tm nomes diferentes, mas a mesma sintaxe.
CSS
p{
text-shadow: 5px 5px 5px rgba(0,0,0,0.5);
box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
}
Agora vamos entender o significado dos nmeros: os dois primeiros nmeros se referem a
posio da sombra: o primeiro nmero referente a posio vertical comeando pelo topo e o
segundo nmero referente a posio horizontal, comeando pela esquerda.
Utilizando nmeros positivos os dois primeiros valores posicionam a sombra para a direita do
texto, a coordenada X horizontalmente e a coordenada Y colocando a sombra abaixo do texto
verticalmente.
O terceiro nmero se refere ao Blur. Sua sombra pode ser rgida ou esfumaada. Isso depende
do design que voc criou o pegou para programar. Voc controla a rigidez da sombra por este
nmero.
Voc pode usar valores RGBA, em vez de cores cdigo hexadecimal como o quarto valor. O
ltimo nmero representa a transparncia e pode ser ajustado entre 0.0 e 1.0 para que voc
possa fazer o texto/elemento de sombra mais sutil e suave.
O uso de mltiplas sombras parece incrvel, e alcanamos esse efeito apenas colocando
novamente a propriedade text-shadow/box-shadow separadas por vrgulas:
CSS
web@becode.com.br
p{
color: #000;
padding: 10px;
text-shadow: 0 0 4px #ccc,
0 -5px 4px #ff3,
2px -10px 6px #fd3,
-2px -15px 11px #f80,
2px -18px 18px #f20;
}
BORDER-IMAGE
Ainda est em fase de testes pelos browsers, a sintaxe do border-image se divide em trs
partes:
1. URL da imagem que ser utilizada.
2. Tamanho do slice das bordas.
3. Como o browser ir aplicar a imagem na borda.
CSS
#box_image {
border-width: 10px 15px 12px 13px;
-webkit-border-image: url(border.png) 30% 35% 40% 30% round round;
}
A primeira propriedade, obviamente, descreve um elemento de borda, como de costume: a

largura das quatro bordas expressa em pixels, no sentido horrio (top, border-right, borderbottom, border-left). A segunda propriedade a que vai realmente fatiar a imagem.
Normalmente existem trs propriedades border-image.
Usaremos a imagem que ser cortada para decorar o nosso elemento.
A segunda parte descreve a maneira como a imagem ser cortada em nove partes (fatias).
Esses valores podem ser expressos em percentuais, ou seja, sem qualquer unidade de largura
em pixels.
A ltima parte o valor de alongamento. Ele descreve como as fatias para os lados e na parte
mdia so escalados e azulejos. Especificando somente um valor o mesmo que especificar o
dobro do mesmo lado.
H trs valores possveis: stretch, repeat and round. O valor padro stretch.
web@becode.com.br
BORDER-RADIUS
Usando CSS3, criar uma borda arredondada incrivelmente fcil. Ela pode ser aplicada a cada
esquina ou cantos individuais, e a largura/cor facilmente alterada. Podem-se definir valores
variados dependendo do resultado desejado, possvel se arredondar as bordas at se formar
um crculo, deixando a altura e largura com tamanhos iguais.
CSS
div {
border-radius: 20px;
}
As bordas arredondadas no ficam restritas ao elemento elas podem ser usadas em botes,
campos de formulrio, pargrafos, caixas de destaque em uma pgina de textos, entre outros.
GRADIENTES
Todos os browsers mais novos como Safari, Opera, Firefox e Chrome j aceitam essa feature e
voc pode utiliz-la hoje. O browser Internet Explorer no reconhece ainda, contudo voc poder
utilizar imagens para estes browsers que no aceitam essa feature.
CSS
div {
width: 200px;
height: 200px;
background-color: #FFF;
background-image: -moz-linear-gradient(green, red);
background-image: -webkit-linear-gradient(green, red);
background-image: -o-linear-gradient(green, red);
web@becode.com.br
/* Firefox 3.6+ */
/* Safari 5.1+, Chrome 10+ */
/* Opera 11.10+ */
O padro que o gradiente ocupe 100% do elemento como vimos no exemplo anterior, mas
muitas vezes queremos fazer apenas um detalhe.
Nesse caso ns temos que definir um STOP, para que o browser saiba onde uma cor deve
terminar para comear a outra. Perceba o 20% ao lado da cor vermelha. O browser calcula
quanto 20% da altura (ou largura dependendo do caso) do elemento, e comea o gradiente da
cor exatamente ali. Voc ainda pode criar cdigos de gradientes online usando ferramentas
grtis.
CSS
div {
width: 200px;
height: 200px;
background-color: #FFF;
background-image: -moz-linear-gradient(green, red 20%);
background-image: -webkit-linear-gradient(green, red 20%);
10+ */
background-image: -o-linear-gradient(green, red 20%);
}
/* Firefox 3.6+ */
/* Safari 5.1+, Chrome
/* Opera 11.10+ */
CURRENTCOLOR
O valor currentColor muito simples de se entender e pode ser muito til para diminuirmos o
retrabalho em alguns momentos da produo. Imagine que o currentColor uma varivel cujo
seu valor definido pelo valor da propriedade color do seletor. Veja o cdigo
CSS
p{
background:red;
padding:10px;
font:13px verdana;
color: green;
border:1px solid green;
}
Note que o valor da propriedade color igual ao valor da cor da propriedade border.
H uma redundncia de cdigo, que nesse caso irrelevante, mas quando falamos de dezenas
de arquivos de CSS modulados, com centenas de linhas cada, essa redundncia pode incomodar
a produtividade. A funo do currentColor simples: ele copia para outras propriedades do
mesmo seletor o valor da propriedade color. Veja o cdigo abaixo para entender melhor:
CSS
p{
background: red;
padding: 10px;
font: 13px verdana;
color: green;
border: 1px solid currentColor;
}
Veja que aplicamos o valor currentColor onde deveria estar o valor de cor da propriedade border.
Agora, toda vez que o valor da propriedade color for modificado, o currentColor aplicar o
mesmo valor para a propriedade onde ela est sendo aplicada.
web@becode.com.br
Isso funciona em qualquer propriedade que faa utilizao de cor como background, border, etc.
Obviamente no funciona para a propriedade color. O currentColor tambm no funciona em seletores separados, ou seja, voc no consegue atrelar o valor da propriedade color ao
currentColor de outro seletor.
PARA SABER MAIS
CSS grid: isso muda tudo de novo

CSS float: consideraes, dicas e macetes para bons layouts na web
Design Responsivo na prtica: do rascunho ao digital
CSS: Voc deveria usar box-sizing: border-box em todas as suas pginas
http://www.colorzilla.com/gradient-editor/
EXERCCIOS
<!Formate o formulrio criado no exerccio de HTML semntico. Usando CSS, aqui voc pode
pesquisar na web um modelo e tentar reproduzir.-->
7- FORMATANDO TEXTO CSS

LINKS
So quatro as pseudo classes para links:
1.
2.
3.
4.
a:link........define o estilo do link no estado inicial;

a:visited...define o estilo do link visitado;
a:hover.....define o estilo do link quando passa-se o mouse sobre ele;
a:active....define o estilo do link ativo (o que foi "clicado").
importante a ordem de definio das regras para os estados dos links, quando duas ou mais
regras so conflitantes aquela ocupando uma posio na folha de estilo sobrescrita ("perde
para") um regra posterior a ela na folha. Assim, se define a:hover ANTES de a:visited, esta
prevalecer sobre a:hover, em consequncia o link visitado pela primeira vez assumir a regra
definida em a:visited e a partir de ento a:hover no mais funcionar naquele link pois a:visited
prevalecer sobre a:hover.
CSS
a:link {
color: #FF0000;
text-decoration: none }
a:visited { color: #00FF00; }
a:hover {
color: #FF00FF;
text-decoration: none }
a:active { color: #0000FF; }
TEXT-ALIGN
A formatao de texto em documentos HTML semelhante a editorao eletrnica de um livro.
A estruturao semntica do texto criada primeiramente em HTML e ento so aplicados os
estilos em CSS.
A propriedade text-align usada para definir o alinhamento horizontal de um texto. O texto pode
ser centralizado ou alinhado esquerda ou direita ou justificado.
web@becode.com.br
CSS
h1 {
text-align: center; }
p.data {
p.texto {
text-align: right; }
text-align: justify; }
TEXT-DECORATION
A propriedade text-decoration usada para definir ou remover decoraes nos texto.
CSS
a{
text-decoration: none;
}
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}
TEXT-TRANSFORMATION
Esta propriedade pode ser usada para transformar tudo em letras maisculas ou minsculas, ou
capitalizar a primeira letra de cada palavra.
CSS
p.maiusculo {
text-transform: uppercase;
}
p.minusculo {
text-transform: lowercase;
}
p.capitalizado {
text-transform: capitalize;
}
FONT-FAMILY
No CSS a propriedade de fonte define a famlia das fontes, negritos, tamanho e estilo de um
texto. Existem dois tipos de nomes para famlia de fontes:
web@becode.com.br
1. Generic family - um grupo de famlias de fontes com um olhar similar (como "Serif" ou
"Monospace")
2. Font family - uma famlia de fontes especficas (como "Times New Roman" ou "Arial")
A famlia da fonte de um texto definida com a propriedade font-family. A propriedade fontfamily deve conter vrios nomes de fontes como um sistema de "fallback". Se o navegador no
suportar a primeira fonte, ele vai tentar a prxima fonte.
Sempre comece com a fonte que voc quer, e termine com uma famlia genrica, assim voc vai
deixar o navegador escolher uma fonte semelhante na famlia genrica, parecida com as que
voc definiu primeiramente caso nenhuma destas fontes estejam disponveis no dispositivo do
usurio.
Se o nome de uma famlia de fonte mais do que uma palavra, ele deve estar entre aspas,
como: "Times New Roman" e quando h mais do que uma famlia de fontes, devemos especificar
cada uma delas separada por vrgulas.
CSS
p{
font-family: "Times New Roman", Times, serif;
}
FONT-STYLE
A propriedade font-style usada principalmente para especificar texto em itlico e possui trs
valores:
1. Normal - O texto exibido normalmente
2. Itlico - O texto mostrado em itlico
3. Oblquo - O texto "inclinar-se" (oblqua muito semelhante ao itlico, mas menos
utilizado e suportado).
CSS
p.normal {
p.italico {
p.obliquo {
font-style: normal; }
font-style: italic; }
font-style: oblique; }
FONT-SIZE
A propriedade font-size define o tamanho do texto. Ser capaz de gerenciar o tamanho do texto
importante no design para web. No entanto, voc no deve usar essa propriedade para fazer
pargrafos se parecerem como ttulos, ou cabealhos se parecem com pargrafos. Neste caso,
utilize sempre as tags HTML adequadas para isso, como o <h1></h1> at o <h6> </h6> para
ttulos e <p> </p> para pargrafos. O valor da font-size pode ser um tamanho absoluto ou
relativo.
O tamanho absoluto define o texto para um tamanho especificado e no permite que o usurio
altere o seu tamanho em todos os navegadores (isto se torna ruim por questes de
web@becode.com.br
acessibilidade). Tamanho absoluto til quando o tamanho fsico de impresso (na tela) da fonte
conhecido. Definir o tamanho com pixels lhe d controle total sobre o tamanho do texto
CSS
h1 {
font-size: 40px;
}
O tamanho relativo define o tamanho em relao a elementos e permite que o usurio altere o
tamanho do texto nos navegadores. Se voc no especificar um tamanho de fonte, o tamanho
padro para texto normal, como pargrafos, 16px (16px = 1em).
Para permitir que os usurios possam redimensionar o texto (no menu do navegador), muitos
desenvolvedores usam em em vez de pixels. 1em igual ao tamanho da fonte de corrente. O
tamanho padro do texto nos navegadores 16px. Assim, o tamanho padro de 1em 16px. O
tamanho pode ser calculado a partir de pixels para em usando esta frmula: pixels / 16 = EM.
CSS
h1 {
font-size: 2.5em;
}
/* 40px/16=2.5em */
@FONT-FACE
A regra @font-face utilizada para que voc utilize fontes fora do padro do sistema em seus
sites. Para que isso funcione, necessrio disponibilizar as fontes necessrias em seu servidor e
linkar estas fontes no arquivo CSS. A sintaxe bem simples e tem suporte a todos os
navegadores, com algumas ressalvas.
CSS
@font-face {
font-family: bebasneue;
src: local(bebasNeue.otf),
url(bebasNeue.otf);
}
Na primeira linha voc customiza o nome da font que voc usar durante todo o projeto. Na
segunda linha definimos a URL onde o browser procurar o arquivo da font para baixar e aplicar
no site. Suponha que o usurio tenha a font instalada, logo ele no precisa baixar a font, assim
podemos indicar para que o browser possa utilizar o arquivo da prpria mquina do usurio.
Formatos que podem ser usados e que os browsers podem adotar:
STRING
truetype
opentype
embeddedopentype
woff
svg
FONT FORMAT
TrueType
OpenType
Embedded OpenType
COMMON EXTENSIONS
.ttf
.ttf, .otf
.eot
Web Open Font Format

SVG Font
.woff
.svg, .svgz
Voc aplica a fonte como segue:

CSS
p{
font: 36px bebasneue, Arial, Tahoma, Sans-serif;
}
web@becode.com.br
TEXT-OVERFLOW
Alguns contedos em um elemento podem sair caixa de renderizao do elemento por uma
srie de razes (margens negativas, o posicionamento absoluto, o ndice superior a largura /
altura definida por um elemento, etc). Nos casos em que isso ocorre, a propriedade textoverflow traz uma alternativa, o texto extra se mostra sem problemas. Os valores possveis da
propriedade so:
text-overflow: ellipsis - O contedo do texto que transbordar, mostrado com a

seqncia de na regio visvel.
text-overflow: clip - O contedo visvel para a rea definida pela caixa de processamento,
escondendo o restante que ficar fora dos limites da caixa, comportamento similar ao
overflow: hidden.
Para que funcione em todos os browsers necessrio que o elemento tenha largura fixa, tenha a
propriedade white-space:nowrap e overflow:hidden.
CSS
text_overflow {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 200px;
height: 20px;
border: 1px solid #000;
}
PARA SABER MAIS
Guia de Referncia CSS
EXERCCIOS
<!-http://www.becode.com.br/
web@becode.com.br
Construa o seguinte documento HTML semntico e formate visualmente com CSS.
-->
8- CSS TRANSFORM E TRANSITION

O mdulo Transform permite que elementos renderizados em css sejam transformados em 2D ou
3D atravs de comandos especficos. A propriedade CSS3 Transform nos permite alteraes
lineares em elementos HTML, incluindo rotao, inclinaes e alterao da escala.
Existem duas propriedades principais nas transformaes CSS: transform, que define as
alteraes que sero feitas no elemento; transform-origin, que define a posio de origem do
elemento, ou eixo de rotao.
TRANSLATE
A funo translate usada para movermos um elemento nos eixos X, Y, ou ambos. Caso seja
passado apenas um parmetro para a funo, o elemento ser movido em relao ao eixo X. J
com dois parmetros, o primeiro ser o valor usado para a movimentao no eixo X, e o
segundo para o eixo Y.
CSS
.div-teste {
transform: translate(13px, 10px); /* move elemento 13px em X e 10px em Y */
web@becode.com.br
transform: translate(13px); /* move elemento 13px no eixo X */

transform: translateX(13px); /* move elemento 13px no eixo X */
transform: translateY(10px); /* move elemento 10px no eixo Y */
}
Alm de px, tambm podemos passar valores expressos em %. Neste caso, 100% ser
equivalente a dimenso do elemento no eixo em que vamos efetuar o translate. Em outras
palavras: se vamos movimentar o elemento no eixo X, 100% ser igual a sua largura; se a
movimentao ocorrer no eixo Y, 100% equivaler a altura do elemento. No experimento abaixo
vocs podem ver a funo translate em ao de uma forma mais interativa e menos abstrata,
basta mover os handlers dos inputs do Translate X e Translate Y.
Reparem que valores negativos tambm so aceitos. Valores negativos em X movimentam o
elemento para a esquerda. Valores negativos em Y movimentam o elemento para cima. Um
transform: translateX(-10px); mover o elemento 10 pixels para a esquerda. Enquanto um
transform: translateY(-5px); mover o elemento 5 pixels para cima.
SKEW
A funo skew ir entortar um elemento em relao a um dos eixos.
CSS
.div-teste {
transform: skewX(30deg); /* entorta o elemento horizontalmente */
transform: skewY(30deg); /* entorta o elemento verticalmente */
}
As funes usadas para efetuarmos o skew so skewX e skewY. Cada uma recebe apenas um
parmetro, estes expressos em graus (deg).
ROTATE
A funo rotate rotacional um elemento em seu prprio eixo. Recebe um nico parmetro que
pode ser expresso em graus (deg), radianos (rad) ou voltas (turn).
CSS
.div-teste {
transform:
transform:
transform:
transform:
}
rotate(30deg); /* rotaciona 30' no sentido horrio */

rotate(-45deg); /* rotaciona 45' no sentido anti-horrio */
rotate(2rad); /* rotaciona ~ 144,59' no sentido horrio */
rotate(0.5turn); /* rotaciona meia-volta no sentido horrio */
Valores positivos rotacionam o elemento no sentido horrio, enquanto que valores negativos
rotacionam o elemento no sentido anti-horrio. O experimento abaixo mostra o rotate em ao.
SCALE
Altera o tamanho do elemento em ambos os eixos ou apenas em um eixo especfico. Esta funo
aceita um ou dois parmetros. Caso seja passado apenas um, a alterao ir ocorrer tanto na
altura como na largura. Caso sejam passados dois, o primeiro argumento ir alterar a largura e o
segundo ir alterar a altura.
Os valores passados como parmetros no possuem unidades. Eles funcionam como
multiplicadores do tamanho do elemento. Um transform: scale(2) ir duplicar o tamanho do
elemento. Um transform: scale(0.5) ir reduzi-lo pela metade.
CSS
.div-teste {
transform: scale(2);
/* dobra o tamanho do elemento em todas as direes */
web@becode.com.br
transform: scale(2, 3); /* dobra a largura e triplica a altura */

transform: scaleX(0.5); /* reduz largura do elemento pela metade */
transform: scaleY(2);
/* deixa o elemento duas vezes mais alto */
}
Alm da funo scale, podemos usar as funes especficas de cada eixo: para o eixo X a scaleX
e para o eixo Y a scaleY. Abaixo tambm podemos interagir com esta funo e ver na prtica
como se comporta.
Observe que, ao passarmos valores negativos, ns invertemos a imagem. Se passarmos um
valor de -1 para scaleX, como se estivssemos espelhando o elemento. -1 para scaleY e o
elemento ir ficar de cabea para baixo (invertido na vertical).
CSS TRANSITIONS
Mostrar um feedback ao usurio quando ele passar o mouse sobre um link (:hover) ou quando
ele der foco em um campo input (:focus) so boas prticas. H muitos jeitos de fazermos isso:
mudando a cor do texto, tirando o underline da palavra, alterando a borda do input que recebeu
o foco ou at alterando a cor de background do elemento. Normalmente fazemos isso alterando
o valor de uma propriedade CSS no estado :hover ou :focus do elemento. Quando fazemos isso,
o resultado instantneo. Melhor dizendo, a alterao ocorre imediatamente ao usurio fazer a
ao (seja passar o mouse sobre o elemento ou este ganhar foco). A alterao ocorre de forma
brusca, do valor antigo da propriedade para o novo valor. Por exemplo, quando temos um
elemento com borda colorida, e utilizamos o estado :hover para alterarmos a cor da borda, essa
transio entre uma cor e outra acontece imediatamente assim que voc passa o mouse em
cima do elemento.
Como o CSS est implementado em todos os grandes navegadores e seu uso comum podemos
adicionar um efeito quando o navegador troca de um estilo para outro, sem usar animaes em
Flash ou JavaScript. a que entra a transition do CSS3. Ela analisa a mudana de valor entre a
propriedade e faz com que essa transio, ao invs de ocorrer de forma brusca, ocorra
suavemente em um tempo determinado. A propriedade transition possui quatro propriedades
para voc configurar:
1. transition-property: Nome da propriedade CSS sobre a qual o efeito da transio vai
ser aplicado, caso seja omitida, no existir uma propriedade para se aplicar o efeito da
transio. possvel aplicar uma mesma transio para todas as propriedades CSS do
elemento usando o valor: all.
2. transition-duration: Durao do efeito em segundos (o padro 0). Obrigatria na
declarao pois, se omitida, assume valor default zero e a transio no vai ter efeito.
3. transition-timing-function: Forma como a transio progride no tempo (o padro
ease), em outras palavras, como se comporta o ritmo da transio durante o efeito.
4. transition-delay: Define a partir de quanto tempo (em segundos) o efeito da transio
vai se iniciar (o padro 0).
CSS
.classname {
transform: rotate(4deg) scale(1) skew(1deg) translate(10px);
transition-delay:0s;
transition-property:all;
transition-duration:1s;
transition-timing-function:ease;
}
.classname:hover{
transform: rotate(0deg) scale(0.67) skew(1deg) translate(0px);
}
A tabela relaciona propriedades que podem sofrer transforms e transitions.

PROPERTY NAME
TYPE
web@becode.com.br
background-color
background-position
border -color
border -width
border-spacing
bottom
as color
as repeatable list of simple list of length, percentage,
or calc
as color
as length
as simple list of length
as length, percentage, or calc
as rectangle
clip
as color
color
font-size
font-weight
height
as length
as font weight
left
letter-spacing
line-height
margin
max-height
max-width
min-height
min-width
opacity
outline-color
outline-width
padding
as length
as either number or length
as length
as number
as color
as length
as length
right
text-indent
text-shadow

as shadow list
top
vertical-align
visibility
as length
as visibility
width
word-spacing
z-index
as length
as integer
PARA SABER MAIS
Using CSS transitions
EXERCCIOS
<!
Implemente uma transio de tamanho e opacidade em uma imagem.
-->
web@becode.com.br
9- CSS ANIMATION
Uma animao permite que um elemento mude seu estilo inicial para outro estilo. Voc pode
mudar muitas propriedades CSS que voc queira e quantas vezes voc quiser. possvel
especificar quando a mudana ir acontecer em porcentagens, ou podemos usar as palavras
chaves "from" (de) e "to" (para) que representam 0% e 100%. 0% representa o incio da
animao e 100% quando a animao est completa.
Com o CSS3 podemos criar animaes que podem subistituir as animaes em flash, imagens e
JavaScript nas pginas existentes. Utilizamos inicialmente duas propriedades para criar uma
animao:
1. @keyframes - local onde a animao criada
2. animation - define o seletor da animao que ser usada a qual foi criada pela regra
keyframes
Quando uma animao criada no keyframe, necessrio vincular isto em um seletor, caso
contrrio, a animao no ter efeito algum.
Para incular a animao de um seletor (elemento), especificamos pelo menos o nome da
animao e a durao da animao.
A sintaxe para a criao de keyframes a seguinte:
CSS
@keyframes nomedaanimacao {
seletores-keyframe {
estilo css para esse determinado keyframe;
}
}
Existem duas forma de se criar KeyFrames, a forma mais bsica, onde definimos um incio e um
fim para a animao. No exemplo from equivalente ao incio da animao (0%) e to
equivalente ao final da animao (100%).
CSS
@keyframes animacao {
from {
width: 100px;
background: black;
}
to {
background: yellow;
width: 200px;
}
}
Desta forma h maior controle da animao. Para isso, utilizamos porcentagem para definir os
keyframes. No cdigo, a animao possui cinco passos e, a porcentagem relativa durao da
animao que vai ser definida posteriormente.
Com a animao criada nos keyframes, precisamos vincul-la a algum seletor, caso contrrio a
animao no ter nenhum efeito. Para fazer isso, temos que declarar pelo menos duas
propriedades que so obrigatrias:
1. O nome da animao (igual ao especificado nos keyframes);
2. A durao da animao (se no for declarada, a animao no se inicia, pois o valor
padro zero).
web@becode.com.br
CSS
@keyframes animacaoBolada {
0% {
background: black;
width: 100px; }
25% { background: green; }
50% { background: blue; }
75% { background: red; }
100% {
background: yellow;
width: 200px; }
}
PROPRIEDADES CSS ANIMATIONS

animation-name: Nome da animao especificada nos @keyframes;
CSS
animation-name: animacaoBolada;
animation-duration: Quanto tempo, em segundos ou milisegundos, durar um ciclo da

animao (o padro 0).
CSS
animation-duration: 5s;
animation-timing-function: Forma como a animao progride no tempo (o padro ease). Do

mesmo modo que a propriedade transition, pode ser usada de duas maneiras: utilizando alguns
valores j pr-definidos: linear, ease, ease-in, ease-out e ease-in-out;
CSS
animation-timing-function: ease;
Definindo uma funo customizada, especificando quatro coordenadas para definir a cubic
bezier curve:
CSS
animation-timing-function: cubic-bezier(0.005, 0.0625, 0.365, 0.0840);
animation-delay: Define a partir de quanto tempo a animao vai se iniciar (o padro 0).
CSS
animation-delay: 0.2s;
animation-iteration-count: Determina o nmero de vezes que a animao vai se repetir (o

padro 1). Podemos deixar a animao repetindo infinitamente, basta especificar o valor
infinite.
CSS
animation-iteration-count: infinite;
web@becode.com.br
animation-direction: Especifica se ao final da animao, ela deve reiniciar seu fluxo

normalmente (normal), que o padro, ou voltar no sentido inverso (reverse).
CSS
animation-direction: reverse;
animation-play-state: Define se a animao est rodando (running), que o padro, ou

pausada (paused).
CSS
animation-play-state: running;
Aps definir as propriedades temos a animao montada:

CSS
div {
animation-name: animacaoBolada;
animation-duration: 5s;
animation-timing-function: ease;
animation-delay: 1s;
animation-direction: alternate;
animation-play-state: running;
}
ANIMATIONS VS TRANSITIONS
Em CSS3, ns temos duas tcnicas para visualizao de mudana que esto competindo por
nossa ateno: Animaes e Transies. De longe, as duas animaes e transies so muito
semelhantes. Ambos permitem que voc:
Especifique quais propriedades CSS sero alteradas

Especifique a durao da animao ou transio.
Especificar animao e transio especficas de eventos
Visualizar as alteraes das propriedades CSS
Porm, voc vai perceber que as animaes e transies divergem um pouco em sua
singularidade. Animaes e transies mostram suas diferenas quando se trata de acionar seus
efeitos, como definir uma transio, um loop ou como ambas trabalham com JavaScript.
Uma das principais diferenas entre as animaes e transies pode ser visto na forma como
ns definimos o disparo do efeito.
Uma transio somente funciona como uma reao para uma propriedade CSS que foi alterada.
Um cenrio comum aquele em que voc usa a pseudo classe :hover para alterar o valor de
uma propriedade CSS.
web@becode.com.br
Para usar o exemplo visualizado aqui, se uma transio definida, voc seria capaz de ver o
crculo crescer de seu tamanho normal para o seu tamanho hover. Outra maneira de disparar
uma transio usar JavaScript adicionando ou removendo classes CSS para simular uma
mudana de propriedade CSS (simular a pseudo-classe :hover, por exemplo).
Animaes, por outro lado, no necessitam de qualquer accionamento explcito. Depois de
definir a animao, ela vai comear a tocar automaticamente.
Animaes podem facilmente construir um loop configurando a propriedade animation-iterationcount. Voc pode especificar o nmero de quantas vezes voc que que a sua animao se
repita:
CSS
animation-iteration-count: 5;
Se voc quiser que sua animao tenha uma repetio infinita, voc pode fazer isto desta
maneira:
CSS
As transies no tem uma propriedade que especifca quantas vezes elas podem rodar. Quando
disparada, uma transio roda somente uma vez. Voc pode fazer um loop de transio,
brincando com o transitionEndevent, mas isso no particularmente simples, especialmente
quando comparado com animaes.
Com uma animao, voc pode ter capacidade de definir keyframes que daro maior controle
sobre suas propriedades CSS e seus valores alm de apenas incio e fim.
Voc pode configurar quantos keyframes que voc quisert, e quantas animaes ir tocar, cada
keyfreme ser o hit que especfica as mudanas que a propriedade ir refletir. Isso permite que
voc crie tipos de animaes que ajudam o HTML5 a competir com as tecnologias de animao
mais estabelecidos no mercado, como o Flash de forma mais eficaz. Com uma transio, voc
no tem muito controle sobre nada alm do resultado final.
web@becode.com.br
Uma transio simplesmente vai de um estado inicial para o estado final. Voc no pode
especificar todos os pontos no meio como voc pode com uma animao, por isso, uma
transio pode no ser uma boa escolha se voc est tentando criarum efeito fadeIn ou uma
animao complexa.
PARA SABER MAIS
CSS3 Animations
CSS 3.0 Maker
CSS Transition e CSS Animation
Animate.css
10- JAVASCRIPT
Javascript uma linguagem de programao utilizada para criar pequenos programas
encarregados de realizar aes no mbito de uma pgina web. Com Javascript podemos criar
efeitos especiais nas pginas e definir interatividades com o usurio. O navegador do cliente o
encarregado de interpretar as instrues Javascript e execut-las para realizar estes efeitos e
interatividades, de modo que o maior recurso com que esta linguagem conta o prprio
navegador.
Javascript o seguinte passo, depois de HTML, que pode dar um programador da web que
decide melhorar suas pginas e a potncia de seus projetos. uma linguagem de programao
bastante simples e pensada para fazer as coisas com rapidez, s vezes com leveza. Inclusive as
pessoas que no tenham uma experincia prvia na programao podero aprender esta
linguagem com facilidade e utiliz-la com um pouco de prtica.
Entre as aes tpicas que se podem realizar em Javascript temos duas vertentes. Por um lado,
os efeitos especiais sobre pginas web, para criar contedos dinmicos e elementos da pgina
que tenham movimento, mudam de cor ou qualquer outro dinamismo. Por outro, javascript nos
permite executar instrues como resposta s aes do usurio, com o qual podemos criar
pginas interativas com programas como calculadoras, agendas, ou tabelas de clculo.
Javascript uma linguagem com muitas possibilidades, permite a programao de pequenos
scripts, e tambm de programas maiores, orientados a objetos, com funes, estruturas de
dados complexas, etc. Toda esta potncia de Javascript se coloca disposio do programador,
que se converte no verdadeiro dono e controlador de cada coisa que ocorre na pgina.
web@becode.com.br
Que fique claro que Javascript no tem nada a ver com Java, salvo em suas origens. Atualmente
so produtos totalmente distintos e no guardam entre si mais relao que a sintaxe idntica e
pouco mais. Algumas diferenas entre estas duas linguagens so:
Java compilado e JavaScript interpretado

JavaScript no totalmente Orientado a objetos
JavaScript no usado tipicamente em servidores.
JavaScript no uma linguagem fortemente tipada.
Para programar em Javascript necessitamos basicamente o mesmo que para programar pginas
web com HTML. Um editor de textos e um navegador compatvel com Javascript. Um usurio de
Windows possui de sada todo o necessrio para poder programar em Javascript, visto que
dispe dentro de sua instalao tpica de sistema operativo, de um editor de textos, o Bloco de
notas, e de um navegador: Google Chrome, Mozilla Firefox ou Internet Explorer.
Uma recomendao em relao ao editor de textos: Apesar de o Bloco de Notas editar os
arquivos, desejvel contar com outros programas que nos oferecem melhores ferramentas na
hora de escrever as linhas de cdigo. Estes editores avanados tm algumas vantagens: colorem
os cdigos de nossos scripts, nos permitem trabalhar com vrios documentos simultaneamente,
etc.
FUNDAMENTOS
Existem duas maneiras de executar scripts na pgina. A primeira destas maneiras se trata de
execuo direta de scripts, a segunda uma execuo como resposta ao de um usurio.
Execuo direta - o mtodo mais bsico de executar scripts. Neste caso se incluem as
instrues dentro da etiqueta <script></script> tal como comentamos anteriormente. Quando o
navegador l a pgina e encontra um script vai interpretando as linhas de cdigo e vai
executando uma depois da outra. Chamamos a esta maneira execuo direta, pois quando se l
a pgina se executam diretamente os scripts.
Resposta a um evento - a outra maneira de executar scripts, mas antes de v-la devemos falar
sobre os eventos. Os eventos so aes que realiza o usurio. Os programas como Javascript
esto preparados para apanhar determinadas aes realizadas, neste caso sobre a pgina, e
realizar aes como resposta. Deste modo se podem realizar programas interativos, j que
controlamos os movimentos do usurio e respondemos a eles. Existem muitos tipos de eventos
distintos, por exemplo, o click do mouse, a seleo de texto da pgina, entre outros.
A linguagem Javascript tem uma sintaxe muito parecida a de Java por estar baseado nele.
Tambm muito parecida a da linguagem C, de modo que se o leitor conhece alguma destas
duas linguagens poder manejar com facilidade com o cdigo.
Um comentrio uma parte de cdigo que no interpretada pelo navegador e cuja utilidade
radica em facilitar a leitura ao programador. O programador, a medida que desenvolve o script,
vai deixando frases ou palavras soltas, chamadas comentrios, que ajudam a ele ou a qualquer
outro a ler mais facilmente o script na hora de modific-lo ou depur-lo.
Existem dois tipos de comentrios na linguagem. Um deles, a barra dupla, serve para comentar
uma linha de cdigo. O outro comentrio pode ser utilizado para comentar vrias linhas,
indicado com os signos /* para comear o comentrio e */ para termin-lo. Vejamos:
JavaScript
<script>
//Comentrio de uma linha
/*
Comentrio de vrias Linhas
.
.
*/
</script>
web@becode.com.br
Em javascript se devem respeitar as maisculas e as minsculas. Se nos equivocamos ao utilizlas o navegador responder com uma mensagem de erro de sintaxe. Por conveno os nomes
das coisas se escrevem em minsculas, salvo que se utilize um nome com mais de uma palavra,
pois nesse caso se escrevero com maisculas as iniciais das palavras seguintes primeira.
Tambm se pode utilizar maisculas nas iniciais das primeiras palavras em alguns casos, como
os nomes das classes, apesar de que j veremos mais adiante quais so estes casos e o que so
as classes.
As distintas instrues que contm nossos scripts devem ser separadas convenientemente para
que o navegador no indique os correspondentes erros de sintaxe. Javascript tem duas maneiras
de separar instrues. A primeira atravs do caractere pontoe vrgula (;) e a segunda atravs
de uma quebra de linha. Por esta razo, as sentenas Javascript no necessitam acabar em
ponto e vrgula a no ser que coloquemos duas instrues na mesma linha.
De qualquer forma, no uma idia ruim se acostumar a utilizar o ponto e vrgula depois de
cada instruo, pois outras linguagens como Java ou C obrigam a utiliz-las e estaremos nos
acostumando a realizar uma sintaxe mais parecida habitual em torno de programaes
avanadas.
Semelhante a Java ou linguagem C.
Case Sensitive.
Separao das instrues com ;.
DECLARANDO VARIVEIS
Uma varivel um espao em memria onde se armazena um dado, um espao onde podemos
salvar qualquer tipo de informao que necessitemos para realizar as aes de nossos
programas. Por exemplo, se nosso programa realiza somas, ser muito normal guardarmos em
variveis as distintas parcelas que participam na operao e o resultado da soma. O efeito seria
algo parecido a isto.
JavaScript
parcela1 = 23;
parcela2 = 33;
soma = parcela1 + parcela2;
Neste exemplo temos trs variveis, parcela1, parcela2 e soma, onde guardamos o resultado.
Vemos que seu uso para ns como se tivssemos um apartado onde salvar um dado e que se
pode acessa-los colocando somente seu nome.
Os nomes das variveis devem ser construdos com caracteres alfanumricos e o caractere
sublinhado (_). A parte disso h uma srie de regras adicionais para construir nomes para
variveis. A mais importante que tem de comear por um caractere alfabtico ou sublinhado.
No podemos utilizar caracteres raros como o signo +, um espao ou um $. Nomes admitidos
para as variveis poderiam ser:
JavaScript
Idade;
PaisDeNascimento;
_nome;
Tambm h que evitar utilizar nomes reservados como variveis, por exemplo, no poderemos
chamar a nossas variveis palavras como return ou for que j veremos que so utilizadas para
estruturas da prpria linguagem. Vejamos agora alguns nomes de variveis que no est
permitido utilizarem
JavaScript
web@becode.com.br
12meses ;
seu nome ;
return ;
pe%pe ;
Declarar variveis consiste em definir e de passo informar ao sistema de que se vai utilizar uma
varivel. um costume habitual nas linguagens de programao definir as variveis que sero
utilizadas nos programas e para isso, seguem-se algumas regras restritas. Porm, javascript
ultrapassa muitas regras por ser uma linguagem mais livre na hora de programar e um dos
casos no qual outorga um pouco de liberdade na hora de declarar as variveis, j que no
estamos obrigados a faz-lo, ao contrrio do que acontece na maioria das linguagens de
programao.
De qualquer forma, aconselhvel declarar as variveis, alm de um bom costume e para isso
Javascript conta com a palavra var. Como lgico, utiliza-se essa palavra para definir a varivel
antes de utiliz-la.
JavaScript
var operando1;
var operando2;
Tambm se pode atribuir um valor varivel quando se est declarando

JavaScript
var operando1 = 23;
var operando2 = 33;
Tambm se permite declarar vrias variveis na mesma linha, sempre que se separem por
vrgulas.
JavaScript
var operando1, operando2;
Tambm poderemos declarar variveis em lugares mais dimensionados, como por exemplo, uma
funo. A estas variveis chamaremos de locais. Quando se declarem variveis locais somente
poderemos acess-las dentro do lugar aonde tenham sido declaradas, ou seja, se havamos
declarado em uma funo somente poderemos acess-la quando estivermos nessa funo.
As variveis podem ser locais em uma funo, mas tambm podem ser locais a outros mbitos,
como por exemplo, um loop. Em geral, so mbitos locais qualquer lugar dimensionado por
chaves.
JavaScript
<script>
function minhaFuncao() {
var variavelLocal;
}
</script>
No script anterior declaramos uma varivel dentro de uma funo, pelo qual esta varivel
somente ter validade dentro da funo. Podem-se ver as chaves para dimensionar o lugar onde
est definida essa funo ou seu mbito.
No h problema em declarar uma varivel local com o mesmo nome que uma global, neste
caso a varivel ser visvel desde toda a pgina, exceto no mbito onde est declarada a
varivel local j que neste lugar esse nome de varivel est ocupado pela local e ela quem
tem validade. Resumindo, em qualquer lugar da pgina, a varivel que ter validade a global.
Menos no mbito onde est declarada a varivel local, que ser ela que vai ter validade.
web@becode.com.br
JavaScript
<script>
var numero = 2
function minhaFuncao() {
var numero = 19
document.write(numero) //imprime 19
}
</script>
Um conselho para os principiantes poderia ser no declarar variveis com os mesmos nomes,
para que nunca tenha confuso sobre qual varivel a que tem validade em cada momento.
Em Javascript temos liberdade para declarar ou no as variveis com a palavra var, mas os
efeitos que conseguiremos em cada caso sero distintos. Na verdade, quando utilizamos var,
estamos fazendo com que a varivel que estamos declarando seja local ao mbito onde se
declara. Por outro lado, se no utilizamos a palavra var para declarar uma varivel esta ser
global a toda a pgina, seja qual for o mbito no qual tenha sido declarada.
No caso de uma varivel declarada na pgina web, fora de uma funo ou de qualquer outro
mbito mais reduzido, indiferente se se declara ou no com var, desde um ponto de vista
funcional. Isto devido a que qualquer varivel declarada fora do mbito global a toda a pgina.
A diferena pode ser apreciada em uma funo, por exemplo, j que se utilizamos var a varivel
ser local funo e se no o utilizamos, a varivel ser global pgina. Esta diferena
fundamental na hora de controlar corretamente o uso das variveis na pgina, j que se no o
fazemos em uma funo poderamos sobrescrever o valor de uma varivel, perdendo o dado que
pudesse conter previamente.
JavaScript
<script>
var numero = 2
function minhaFuncao( ) {
numero = 19
}
//chamamos a funcao
minhaFuncao()
</script>
Neste exemplo, temos uma varivel global pgina chamada numero, que contm um 2.
Tambm temos uma funo que utiliza a varivel numero sem a ter declarado com var, pelo que
a varivel numero da funcao ser mesma varivel global numero declarada fora da funo. Em
uma situao com esta, ao executar a funo se sobrescrever a varivel numero e o dado que
havia antes de executar a funo se perder.
TIPOS DE DADOS
Em uma varivel podemos introduzir vrios tipos de informao, por exemplo, texto, nmeros
inteiros ou reais, etc. A estas distintas classes de informao conhecemos como tipos de dados.
Cada um tem caractersticas e usos distintos, vejamos quais so os tipos de dados de Javascript.
Nmeros - Para comear temos o tipo numrico, para salvar nmeros como 9 ou 23.6
Strings - O tipo String salva um texto. Sempre que escrevemos uma cadeia de caracteres
devemos utilizar as aspas (").
Boleanos - Tambm contamos com o tipo boleano, que salva uma informao que pode valer
como sim (true) ou no (false).
Alm disso, usamos tambm os operadores exatamente como os de Lgica de Programao.
web@becode.com.br
DESCRIO
SMBOLO
Negao unria
Incremento
Reduo
Multiplicao
Diviso
Mdulo aritmtico
Adio
Subtrao
++
-*
/
%
+
-
Operadores lgicos
DESCRIO
NO lgico
Menor que
Maior que
Menor ou igual a
Maior ou igual a
Igualdade
Desigualdade
Lgico AND
OU lgico
Condicional (ternrio)
Vrgula
Igualdade estrita
Desigualdade estrita
SMBOLO
!
<
>
<=
>=
==
!=
&&
||
?:
,
===
!==
Operadores bit a bit

DESCRIO
NOT bit a bit
Deslocamento para a esquerda bit a bit
Deslocamento para a direita bit a bit
Deslocamento para a direita sem sinal
AND bit a bit
XOR bit a bit
OR bit a bit
SMBOLO
~
<<
>>
>>>
&
^
|
Operadores de Atribuio
DESCRIO
Atribuio
Atribuio composta
SMBOLO
=
OP= (como += e
&=)
A diferena entre o == (igualdade) e === (igualdade estrita) que o operador de igualdade

forar valores de diferentes tipos antes de verificar a igualdade. Por exemplo, comparar a
cadeia de caracteres "1" com o nmero 1 far uma comparao como true. O operador de
igualdade estrita, por outro lado, no forar valores para diferentes tipos e, portanto, a cadeia
de caracteres "1" no ser comparada como igual ao nmero 1.
A tabela a seguir lista os operadores JavaScript, ordenados da maior at a menor precedncia.
Operadores com a mesma precedncia so avaliados da esquerda para a direita.
OPERADOR
DESCRIO
.[]()
Acesso a campos, indexao de matriz, chamadas de funo e

agrupamento de expresses
++ -- - ~ ! new Operadores unrios, tipo de dados de retorno, criao de objetos

web@becode.com.br
indefinidos
*/%
Multiplicao, diviso, diviso de mdulo
+-+
Adio, subtrao, concatenao de cadeias de caracteres
<< >> >>>
Deslocamento de bits
< <= > >=
Menor que, menor que ou igual a, maior que, maior que ou igual a
== != === !
==
Igualdade, desigualdade, igualdade estrita e desigualdade estrita
&
AND bit a bit
XOR bit a bit
OR bit a bit
&&
Lgico AND
||
OU lgico
?:
Condicional
= OP=
Atribuio, atribuio com operao (como += e &=)
PARA SABER MAIS
Aptana Studio 3
Sublime Text is a sophisticated text editor for code
The NetBeans IDE provides enhanced JavaScript editing features
5 razes pelas quais JavaScript pode ser a prxima grande linguagem
EXERCCIOS

11- ESTRUTURAS DE SELEO

Normalmente, instrues em um script JavaScript so executadas uma aps a outra, na ordem
em que so escritas. Isso chamado de execuo sequencial e a direo padro do fluxo do
programa.
Estruturas de seleo transferem o fluxo do programa para outra parte do script. Ou seja, em
vez de executar a prxima instruo na sequncia, outra instruo executada.
Para tornar um script til, essa transferncia de controle deve ser feita de maneira lgica. A
transferncia do controle do programa se baseia em uma deciso, que o resultado de qual
instruo verdadeira (retornar um booliano true ou false). Voc cria uma expresso e, depois,
testa se o seu resultado verdadeiro. H dois tipos principais de estruturas de programa que
fazem isso.
O primeiro a estrutura de seleo. Voc usa para especificar rotas alternativas do fluxo do
programa, criando uma juno no seu programa (como uma bifurcao em uma estrada). H
quatro estruturas de seleo disponveis em JavaScript.
A estrutura de seleo nica (if).
A estrutura de seleo dupla (if/else).
O operador ternrio embutido (?:)
Estrutura de seleo mltipla (switch).
JavaScript oferece suporte para instrues condicionais if e if...else. Em instrues if, uma
condio testada e, se ela corresponder ao teste, o cdigo JavaScript relevante ser
executado. Na instruo if...else, o cdigo diferente ser executado se a condio for reprovada
web@becode.com.br
no teste. A forma mais simples de uma instruo if pode ser escrita em uma linha, mas
instrues if e if...else de vrias linhas so muito mais comuns.
Os exemplos a seguir demonstram sintaxes que voc pode usar com instrues if e if...else. O
primeiro exemplo mostra o tipo mais simples de teste booleano. Se (e somente se) o item entre
parnteses for avaliado como (ou puder ser forado como) verdadeiro, a instruo ou o bloco de
instrues depois de se ser executado.
JavaScript
var numero1 = 23;
var numero2 = 63;
if (numero1 == numero2) {
alert("Os dois nmeros so iguais")
}
else {
if (numero1 > numero2) {
alert("O primeiro nmero maior que o segundo")
}
else {
alert("O primeiro nmero menor que o segundo")
}
}
PARA SABER MAIS
JavaScript - Switch Case

JavaScript If...Else Statements
EXERCCIOS
<!Construa um algoritimo em JavaScript que pergunta se um individuo masculino ou
feminino e mostra o resultado.
-->
12- FUNES
Funes JavaScript realizam aes e tambm podem retornar valores. s vezes, estes so os
resultados de clculos ou comparaes. Funes tambm so chamadas "mtodos globais".
Funes combinam vrias operaes em um nico nome. Isso permite simplificar o seu cdigo.
Voc pode escrever um conjunto de instrues, nome-las e executar o conjunto inteiro
chamando-o e transmitindo a ele todas as informaes necessrias.
Voc transmite informaes a uma funo colocando-as entre parnteses aps o nome da
funo. Os fragmentos de informaes que so transmitidos para uma funo se chamam
argumentos ou parmetros. Algumas funes no usam argumentos, enquanto outras usam um
ou mais argumentos. Em algumas funes, o nmero de argumentos depende de como voc
est usando a funo.
A linguagem JavaScript oferece suporte para dois tipos de funes: funes internas da
linguagem e funes que voc mesmo cria e pode us-las quando necessrio. Uma definio de
funo consiste em uma instruo de funo e um bloco de instrues JavaScript.
ESCREVENDO FUNES
Uma funo deve-se definir com uma sintaxe especial que vamos conhecer a seguir:
JavaScript
web@becode.com.br
function nomeFuncao ( ) {
//instrues da funo
.
.
.
}
Primeiro escreve-se a palavra funo, reservada para este uso. Seguidamente se escreve o
nome da funo, que como os nomes de variveis podem ter nmeros, letras e algum caractere
adicional como um hfen abaixo. A seguir se colocam entre chaves as diferentes instrues da
funo. As chaves no caso das funes no so opcionais, ademais til coloc-las sempre
como se v no exemplo, para que seja visto facilmente a estrutura de instrues que engloba a
funo.
Vejamos um exemplo de funo para escrever na pgina uma mensagem de boas vindas dentro
de etiquetas <h1> para que fique mais ressaltado.
JavaScript
function escreverBoasvindas( ) {
document.write("<h1> -- OLA TODOS -- </h1>");
}
Simplesmente escreve na pgina um texto, uma funo to simples que o exemplo no

expressa suficientemente o conceito de funo, mais j veremos outras mais complexas. As
etiquetas H1 no se escrevem na pgina, e sim so interpretadas como o significado da mesma,
neste caso que escrevemos um cabealho de nvel um. Como estamos escrevendo em uma
pgina web, ao colocar etiquetas HTML se interpretam como o que so.
Quando se chamam s funes: Para executar uma funo temos que cham-la em qualquer
parte da pgina, com isso conseguiremos que se executem todas as instrues que tem a
funo entre as duas chaves. Para executar a funo utilizamos seu nome seguido dos
parnteses.
JavaScript
NomeDaFuncao( )
Dentro das funes podemos declarar variveis, inclusive os parmetros so como variveis que
se declaram no cabealho da funo e que se iniciam ao chamar a funo. Todas as variveis
declaradas em uma funo so locais a essa funo, ou seja, somente tero validade durante a
execuo da funo.
Podemos declarar variveis em funes que tenham o mesmo nome que uma varivel global
pgina. Ento, dentro da funo a varivel que ter validade a varivel local e fora da funo
ter validade a varivel global pgina.
Em troca, se no declaramos as variveis nas funes se entender por javascript que estamos
fazendo referncia a uma varivel global pgina, de modo que se no est criada, a varivel a
cria, mas sempre global pgina no lugar de local funo.
PARAMETROS
As estruturas que vimos anteriormente sobre funes no so as nicas que devemos aprender
para manej-las em toda a sua potncia. As funes tambm tm uma entrada e uma sada, que
se podem utilizar para receber e devolver dados.
Os parmetros se usam para mandar valores funo, com os quais ela trabalhar para realizar
as aes. So os valores de entrada que recebem uma funo. Por exemplo, uma funo que
realizasse uma soma de dois nmeros teria como parmetros a esses dois nmeros. Os dois
nmeros so a entrada, assim como a sada seria o resultado, mais isso ser visto mais tarde.
web@becode.com.br
Vejamos um exemplo anterior no qual crivamos uma funo para mostrar uma mensagem de
boas vindas pgina web, mas que agora passaremos um parmetro que vai conter o nome da
pessoa a qual se vai saudar.
JavaScript
function escreverBoasvindas(nome) {
document.write("<h1> -- OLA " + nome + " -- </h1>");
}
Como podemos ver no exemplo, para definir na funo um parmetro temos que por o nome da
varivel que vai armazenar o dado que passarmos. Essa varivel, que neste caso se chama
nome, ter como valor o dado que passarmos a esta funo quando a chamarmos, al disso, a
varivel ter vida durante a execuo da funo e deixar de existir quando a funo terminar
sua execuo.
Para chamar a uma funo que tem parmetros coloca-se entre parntesis o valor do parmetro.
Para chamar funo do exemplo haveria que escrever:
JavaScript
escreverBoasvindas("Alberto Garcia");
Ao chamar funo assim, o parmetro nome toma como valor "Alberto Garcia" e ao escrever a
saudao na tela escrever "Ol Alberto Garcia" entre etiquetas <H1>.
Os parmetros podem escrever qualquer tipo de dados, numrico, textual, boleano ou um
objeto. Realmente no especificamos o tipo do parmetro, por isso devemos ter um cuidado
especial ao definir as aes que realizamos dentro da funo e ao passar valores funo para
assegurarmos que tudo consequente com os tipos de nossas variveis ou parmetros.
Uma funo pode receber tantos parmetros quanto quisermos e para express-lo colocam-se
os parmetros separados por vrgulas dentro dos parnteses. Vejamos rapidamente a sintaxe
para que a funo de antes receba dois parmetros, primeiro, o nome a quem saudar e segundo,
a cor do texto.
JavaScript
function escreverBoasvindas(nome, corTexto) {
document.write("<h1 style='color:" + corTexto + "'>-- OLA " + nome + " -- </h1>");
}
Chamaramos funo com esta sintaxe. Entre parnteses colocaremos os valores dos
parmetros.
JavaScript
var meuNome = "Pedro"
var minhaCor = "red"
escreverBoasvindas(meuNome, minhaCor)
Entre parnteses, duas variveis no lugar de dois textos entre aspas. Quando colocamos
variveis entre os parmetros na verdade o que estamos passando funo so os valores que
contm as variveis e no as mesmas variveis.
Para seguir a linha do uso de parmetros em nossos programas Javascript, temos que indicar
que os parmetros das funes se passam por valor. Isto quer dizer que mesmo que
modifiquemos um parmetro em uma funo a varivel original que havamos passado no
mudar seu valor. Pode-se ver facilmente com um exemplo.
JavaScript
function passoPorValor(meuParametro) {
web@becode.com.br
meuParametro = 32;
document.write("mudei o valor a 32");
}
var minhaVariavel = 5
passoPorValor(minhaVariavel);
document.write("o valor da variavel e: " + minhaVariavel);
No exemplo, temos uma funo que recebe um parmetro, e que modifica o valor do parmetro
atribuindo-lhe o valor 32. Tambm temos uma varivel, que iniciamos a 5 e posteriormente
chamamos funo passando esta varivel como parmetro. Como dentro da funo
modificamos o valor do parmetro poderia acontecer da varivel original mudasse de valor, mas
como os parmetros no modificam o valor original das variveis, esta no muda de valor. Deste
modo, ao imprimir na tela o valor de minhaVariavel se imprimir o nmero 5, que o valor
original da varivel, no lugar de 32 que era o valor col o que havamos atualizado o parmetro.
RETORNANDO VALORES
As funes tambm podem retornar valores, de modo que ao executar a funo poder se
realizar aes e obter um valor de retorno. Por exemplo, uma funo que calcula o quadrado de
um nmero ter como entrada -tal como vimos- a esse nmero e como sada ter o valor
resultante de encontrar o quadrado desse nmero. Uma funo que devolva o dia da semana
teria como sada em dia da semana.
Vejamos um exemplo de funo que calcula a mdia de dois nmeros. A funo receber os dois
nmeros e retornar o valor da mdia.
JavaScript
function media(valor1, valor2) {
var resultado
resultado = (valor1 + valor2) / 2
return resultado
}
Para especificar o valor que retornar a funo se utiliza a palavra return seguida do valor que
se deseja devolver. Neste caso se devolve o contedo da varivel resultado, que contm a
mdia dos dois nmeros.
Para receber os valores que devolve uma funo se coloca o operador de atribuio =. Para
ilustrar isto, pode-se ver este exemplo, que chamar funo mdia() e salvar o resultado da
mdia em uma varivel para logo, imprimi-la na pgina.
JavaScript
var minhaMedia;
minhaMedia = media(12, 8);
document.write(minhaMedia);
Em uma mesma funo podemos colocar mais de um return. Logicamente s vamos poder
retornar uma coisa, mas dependendo do que tenha acontecido na funo poder ser de um tipo
ou de outro, com uns dados ou outros.
Nesta funo podemos ver um exemplo de utilizao de mltiplos return. Trata-se de uma
funo que devolve um 0 se o parmetro recebido era par e o valor do parmetro se este era
mpar.
JavaScript
function multiploReturn(numero) {
var resto = numero % 2
if (resto == 0)
return 0
web@becode.com.br
else
return numero
}
Para averiguar se um nmero par encontramos o resto da diviso ao dividi-lo entre 2. Se o

resto zero porque era par e devolvemos um 0, em caso contrrio -o nmero mpardevolvemos o parmetro recebido.
PARA SABER MAIS
A function is a JavaScript procedure
13 - EVENTOS
O desenvolvimento dos mais distintos recursos que voc utiliza hoje ao navegar na Internet,
acessando seu webmail, comprando produtos, participando de promoes, e tudo mais s se
tornou vivel de implementao com o uso do JavaScript. Embora todos estes servios sejam
possveis de se implementar diretamente com HTML/CSS e uma linguagem server-side, o
JavaScript facilita, otimiza e aprimora a maioria dos quesitos funcionais de interao com o
usurio. As aes do usurio no navegador s podem ser controladas atravs dos scripts, com
eventos.
Um evento consiste em uma ao, que pode ser disparado pelo prprio fluxo de navegao,
como finalizar o download do arquivo corrente, ou ento por alguma atividade do usurio, como
passar o mouse sobre um elemento, ou pressionar uma tecla.
A programao orientada a eventos possibilita a criao e a funcionalidade de toda a Web como
a conhecemos hoje. So menus, validao de dados, animaes de elementos, facilidades de
navegao e uma srie de outros quesitos.
Como voc deve contextualizar a programao orientada a eventos? Pode ser mais simples do
que voc imagina. Imagine o objeto de um aparelho de DVD, seria como se voc pudesse
programar uma rotina da seguinte natureza ao aparelho: "ao terminar o filme, ejetar a bandeja
do disco". E no caso da programao do cdigo, como possvel vislumbrar algo dessa
natureza? Algo como "ao carregar o documento inteiro, imprimir algo a mais na pgina" pode ser
uma primeira amostragem. Confira no exemplo:
JavaScript
<!DOCTYPE html>
<html>
<head>
<title>Eventos </title>
<script type="text/javascript">
function escrever() {
var teste = 1;
var TESTE = 2;
document.write(teste);
document.write(TESTE);
}
</script>
</head>
<body onload="escrever();">
</body>
</html>
Analisando o cdigo: h uma declarao de uma funo com o nome escrever. Ela possui duas
variveis distintas declaradas: teste e TESTE, com valores distintos. O que faz a funo? Ela
web@becode.com.br
escreve no documento os valores das variveis declaradas, assim que o documento for
descarregado no navegador do cliente. Isto pode ser notado pelo evento onload da tag
<body></body>. Existem muitos eventos que se pode aplicar, inclusive mais de um para o
mesmo elemento. Isso significa que possvel voc definir rotinas distintas para eventos
distintos, que operem sobre um objeto comum.
Analogamente o aparelho de DVD: se o boto de reproduo for pressionado uma vez, inicia-se a
atividade; mas caso o mesmo boto seja pressionado e mantido pressionado, o filme avanado
em uma velocidade ligeiramente mais rpida.
Aplicando isto no nosso modelo web: "caso o usurio aponte o cursor para o boto da soma, o
clculo processado; o resultado s exibido caso o boto seja pressionado". Veja no cdigo
abaixo, uma proposta para resoluo:
JavaScript
<!DOCTYPE html>
<html>
<head>
<script defer type="text/javascript">
var resultado = 0;
function calcular() {
var v1 = 10;
var v2 = 20;
resultado = v1 + v2;
}
function imprimir() {
document.write(resultado);
}
</script>
</head>
<body>
<button onmouseover="calcular();" onclick="imprimir();">Teste!</button>
</body>
</html>
EVENTOS DE JANELA
onbeforeprint( ) - Disparado antes da impresso da pgina. Voc pode us-lo para

modificar, esconder ou exibir elementos, preparando a pgina para impresso.
onafterprint( ) - Disparado aps a impresso da pgina. Voc pode us-lo para reverter o
status anterior impresso.
onhashchange( ) - A ltima poro da URL, aps o hash (#), foi modificada.
onoffline( ) - O agente de usurio ficou offline.
ononline( ) - O agente de usurio est novamente conectado.
onredo( ) - O usurio disparou a ao de "Refazer".
onundo( ) - O usurio disparou a ao de "Desfazer".
So aplicados ao elemento <body></body>
onload( ) - Executa o script assim que o download do documento for finalizado para o
navegador do usurio.
onunload( ) - Executa o script quando o documento corrente for descarregado pelo
usurio como sair da URL ou fechar o navegador.
HTML
<!DOCTYPE html>
<html>
web@becode.com.br
<head>
function Carregado(event) {
alert("Pgina carregada");
}
function Sair() {
return "Deseja Sair?";
}
</script>
</head>
<body onload="Carregado();" onbeforeunload="return Sair();">
<a href="http://www.google.com.br/">Teste!</a>
</body>
</html>
EVENTOS DE FORMULRIO
Aplica-se aos elementos presentes em tags <form></form>, como <input><input> e
<select></select>.
onchange( ) - Dispara o script assim que o elemento sofrer alguma alterao.

onsubmit( ) - Realiza a rotina do script quando o formulrio enviado para
processamento, atravs do seu envio.
onreset( )- Executa o script quando o formulrio reinicializado.
onselect( ) - Processa o script quando o elemento selecionado.
onblur( ) - Quando o elemento perde o foco do usurio, o script processado.
onfocus( ) - Assim que o elemento focado, o script ganha sua execuo.
oninput( ) - O usurio entrou com dados no campo
oninvalid( ) - O campo no passou pela validao
HTML
<!DOCTYPE html>
<html>
<head>
function Verifica(obj) {
alert("O valor foi alterado para " + obj.value)
}
</script>
</head>
<body>
<form id=teste>
Teste:<input type="text" id=campo name=campo onchange="Verifica(this);" />
</form>
</body>
</html>
PARA SABER MAIS
JavaScript HTML DOM Events

JavaScript Events
web@becode.com.br
14- MANIPULANDO FORMULRIOS

Os objetos de maior controle via JavaScript so os que compe um formulrio de entrada ou
consulta de dados em um documento web. Para todos os campos de formulrios da web, h uma
srie de propriedades e mtodos que so comuns.
PROPRIEDADE/MTODO
EXEMPLO
value = String, contm a

informao do campo.
var campo =
document.getElementById('campo');
disabled = Boolean,
habilita/desabilita o campo.
var campo =
focus = Mtodo, seta o foco do

cursor para o campo.
var campo =
var valor = campo.value;
campo.disabled = true;
campo.focus();
A seguir exemplo de uma rotina para obter o valor de um campo texto.

JavaScript
var campo = document.getElementById('campo');
window.alert('O valor do campo : ' + campo.value);
Para bloquear uma lista de seleo.

JavaScript
var combo = document.getElementById('combo');
combo.disabled = true;
Posicionar o cursor com o foco em um campo de senha.

JavaScript
var senha = document.getElementById('senha');
senha.focus();
INPUT TYPE SUBMIT, RESET E BUTTON

Consistem nos botes que efetivamente realizam alguma atividade frente a alguma ao do
usurio. So os botes que enviam os dados para processamento (submit), limpam os campos
(reset) ou permitem total personalizao pelo programador (button).
INPUT TYPE FILE, HIDDEN E TEXTAREA

Para os campos de entrada de informaes pelo usurio h um mtodo que possibilita selecionar
o seu contedo, o select.
PROPRIEDADE/MTODO
EXEMPLO
select = Mtodo, seleciona o

campo e seu contedo.
readonly = Boolean, define se

o campo somente para
leitura. Oficialmente,
exclusivo de TEXTAREA.
campo.select();
campo.readonly = false;
web@becode.com.br
Exemplos de rotina para selecionar os dados de um campo de texto

JavaScript
campo.select();
INPUT TYPE RADIO E CHECKBOX

Os botes de rdio (input type radio) so utilizados para escolher uma dentre algumas opes
disponveis, enquanto que as caixas de dilogo (input type checkbox) podem ser marcadas ou
desmarcadas.
PROPRIEDADE/MTODO
checked = Boolean, define se um
elemento checkbox est
marcado ou no.
EXEMPLO
var campo =
campo.checked = true;
Exemplos de uma rotina para marcar uma caixa de seleo com JS

JavaScript
campo.checked = true;
SELECT
As "combos" so os elementos apresentados nos formulrios que apresentam uma listagem de
opes, onde o usurio deve selecionar um ou mais itens, dependendo da configurao do
mesmo.
PROPRIEDADE/MTODO
EXEMPLO
options = Array, estrutura que

contm todos os elementos
presentes em um elemento.
var campo =
selectedIndex = Objeto, contm

o objeto que est selecionado na
listagem.
var campo =
var item =
campo.options[campo.selectedIndex];
var dimensao = campo.options.length;
var valor = item.value;
option value = String, armazena

o valor do atributo value da tag
OPTION dentro da listagem.
var campo =
option text = String, armazena o

texto que est delimitado entre
as tags OPTION.
var campo =
var v =
campo.options[campo.selectedIndex].value;
var t =
campo.options[campo.selectedIndex].text;
Exemplos de rotina para contar o nmero de itens presentes em uma listagem.

JavaScript
window.alert('A lista apresenta ' + combo.options.length + ' itens');
Exibindo o texto e o valor da opo selecionada

web@becode.com.br
HTML
var valor = combo.options[combo.selectedIndex].value;
var texto = combo.options[combo.selectedIndex].text;
window.alert('Valor: ' + valor + '\nTexto:' + texto);
VALIDAO DE FORMULRIOS
A sistemtica da validao de formulrios em pginas da web visa contemplar requisitos
essenciais para a operacionalidade da aplicao. Com os detalhes de elementos de formulrio
expostos no tpico recente, voc j pode por em prtica a bagagem adquirida at este momento
para aplicar suas primeiras validaes de dados.
Para campos de entrada de dados pelo usurio, aqueles que forem essenciais para a regra de
negcio da aplicao devem ser validados nestes quesitos. A validao tem por objetivo persistir
a informao no nula e no vazia (que so diferentes).
JavaScript
function validarLogin() {
var campoNome = document.getElementById('nome');
var campoSenha = document.getElementById('senha');
if ((campoNome.value == null) || (campoNome.value == '')) {
window.alert('O seu nome de usurio no foi informado!');
return (false);
}
else if ((campoSenha.value == null) || (campoSenha.value == '')) {
window.alert('Sua senha no foi informada!');
return (false);
}
}
A rotina acima poderia ser invocada em momentos distintos, mas em especial, na prpria
submisso dos dados do formulrio ela encontra seu espao adequado. Ao utilizar o comando
return na invocao da rotina, o seu valor de retorno (booleano em todos os casos) para a
funo a ser executada impedir o formulrio de ser processado, "congelando" o usurio na
pgina corrente. Caso o return no seja utilizado, o formulrio ser submetido independente do
valor retornado na funo.
HTML
<form id="login" action="cadastro.php" onsubmit="return validarLogin();">
<label for="nome">CPF</label>
<input type="text" name="nome" id="nome" size="11" maxlength="11" />
<label for="senha">Senha</label>
<input type="password" name="senha" id="senha" size="8" /><br />
<input type="submit" name="ok" value="OK" />
</form>
Um dos quesitos que os desenvolvedores web geralmente necessitam implementar em algum

tipo de aplicao a verificao do tamanho do contedo presente em um campo to tipo
textarea. Isto porque geralmente a informao ali posta pelo usurio do sistema ir integrar-se a
uma base de dados, em um tabela, respeitando o tamanho de sua coluna vinculada no
relacionamento.
HTML
function iniciarContagem() {
document.getElementById('status').value = 255;
web@becode.com.br
}
function contar() {
var objTexto = document.getElementById('msg');
var gasto = objTexto.value.length;
var limite = 255;
var restante = limite - (1 + gasto);
if (restante < 0) {
window.alert('Limite de contedo!');
return false;
}
else {
document.getElementById('status').value = restante;
return true;
}
}
CUSTOM VALIDATORS
Validaes padro, embora atendam a maioria dos casos, no so suficientes para todas as
situaes. Muitas vezes voc vai querer escrever sua prpria funo de validao Javascript. H
alguns detalhes na especificao do HTML5 que vo ajud-lo com isso:
O novo evento oninput disparado quando algo modificado no valor de um campo de
formulrio. Diferente de onchange, que disparado ao final da edio, oninput disparado ao
editar. diferente tambm de onkeyup e onkeypress, porque vai capturar qualquer modificao
no valor do campo, feita com mouse, teclado ou outra interface qualquer.
O mtodo setCustomValidity pode ser invocado por voc. Ele recebe uma string. Se a string for
vazia, o campo ser marcado como vlido. Caso contrrio, ser marcado como invlido.
Com isso, voc pode inserir suas validaes no campo de formulrio e deixar o navegador fazer
o resto. No mais preciso capturar o evento submit e trat-lo. Veja, por exemplo, este
formulrio com validao de CPF.
HTML
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
<title>Custom validator</title>

<script src="cpf.js"></script>
<script>
function vCPF(i) {
i.setCustomValidity(validaCPF(i.value) ? '' : 'CPF invlido!')
}
</script>
</head>
<body>
<form>
<label>CPF: <input name="cpf" oninput="vCPF(this)" /></label>
<input type="submit" value="Enviar" />
</form>
</body>
</html>
web@becode.com.br
PARA SABER MAIS
Qual a dose certa de JavaScript?

JavaScript Form Validation
jQuery Validation Plugin
Apndece - DOM E HTML5

O DOM (Document Object Model) uma interface independente de plataforma e linguagem que
permite aos programas e scripts atualizarem dinamicamente a estrutura, contedo e estilo de
documentos XML, HTML e demais. Isso significa que o DOM no apenas utilizado em Javascript,
de fato, outras linguagens de programao podem fazer uso do DOM em suas funes. A
primeira verso do DOM (DOM Nvel 1) foi lanada em 1998 pela W3C, a segunda (DOM Nvel 2)
em 2000, e, por fim, a terceira verso (DOM nvel 3) foi lanada em 2004.
Podemos trabalhar com trs partes relevantes de APIs (Application Programming Interface) do
DOM: A DOM Core API, que o ncleo do DOM e fornece tudo o que voc precisa para criar,
remover e alterar elementos da rvore do DOM de maneira genrica. A DOM HTML API, que
uma parte do DOM voltada especificamente para HTML e foi criada para trazer muitas
implementaes do BOM (Browser Object Model) que existiam em diversos navegadores antes
da padronizao. Ela mais fcil para ser utilizada, pois, tem os mesmos atributos dos
elementos HTML. E, por fim, a DOM XML API, que voltada para arquivos XML.
Ainda que alguns dos navegadores no sigam tudo risca, atualmente bem mais simples
trabalhar com Javascript (ECMAscript) do que j foi um dia.
O Modelo de Objetos do Documento a interface entre a linguagem Javascript e os objetos
HTML. DOM o mtodo padro para construo de aplicaes ricas com Javascript e
amplamente conhecido e utilizado. Basicamente, este modelo implementa uma hierarquia de
composio, apresentando descendncia de elementos. Isto facilmente compreendido se voc
abstrair uma estrutura de rvore: h uma raiz, um caule (tronco), e uma diversidade de galhos
(ramos) que se propagam ao longo da estrutura. Observe o seguinte trecho HTML simples:
HTML
<html>
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script src="meu_arquivo_javascript.js"></script>
</head>
<body>
<h1 id="id_h1" class="classe_h1">Sou um cabealho!</h1>
<p id="id_p" class="classe_p">
Um texto qualquer dentro de uma tag de pargrafo. Aqui tambm
temos outras tags, como <a href="#"> um link</a> , ou um texto <b>em
negrito</b>.
</p>
<p id="id_p" class="classe_p">
Este outro pargrafo.
</p>
</body>
</html>
Agora veja como o DOM cria sua rvore a partir do HTML acima:
web@becode.com.br
Existem elementos pai (parent), filhos (childs) e irmos (siblings). Estes elementos so
caracterizados na forma como esto na rvore, veja o mesmo exemplo na imagem a seguir:
Como voc pode perceber cada elemento tem seus pais e filhos. necessrio compreender a
estrutura da rvore para navegar entre seus elementos utilizando Javascript. Elementos pais so
tags que tm outros elementos dentro de si. Por exemplo: um <p></p> que tem um link
<a></a> dentro de si, pai deste link. Por outro lado, o link <a></a> que est dentro de
<p></p> filho deste<p></p>.
HTML
web@becode.com.br
<p>Sou o pai, e <a href="#">eu o filho</a></p>
Se um elemento tem mais de uma tag dentro de si, esses elementos so irmos. Por exemplo,
se uma <div></div> tem dois elementos <p></p> dentro de si, ambos os elementos <p></p>
so irmos.
HTML
<div>
<p>Eu sou filho da DIV.</p>
<p>Eu sou filho da DIV tambm, e irmo do feioso a acima.</p>
<h1>Sou um cabealho, filho da DIV e irmo dos dois a acima.</h1>
</div>
ACESSO HIERRQUICO
A primeira maneira que voc dispe de acessar os elementos que compe um documento da
web com JavaScript usar o acesso hierrquico. Considere a pequena pgina XHTML a seguir, e
veja como isto funciona:
HTML
<html>
<head>
<title>Estrutura DOM </title>
</head>
<body>
<form name="login" id="login" method="post" action="login.php">
<fieldset>
<legend>Login</legend>
<label for="usuario">Usuário</label>
<input type="text" name="usuario" id="usuario" size="8" /><br />
<label for="senha">Usuário</label>
<input type="text" name="senha" id="senha" size="8" maxlength="4" />
</fieldset>
</form>
<p>OK</p>
</body>
</html>
O principal objeto de uso a prpria janela onde o documento est sendo exibido: este o
objeto window. O documento contido nesta janela o objeto document. A partir dele, todas as
suas tags podem ser acessadas hierarquicamente. Por exemplo: para acessar o campo do
usurio presente nesta tela, o cdigo em JavaScript seria o seguinte:
JavaScript
var campoUsuario = window.document.forms[0].elements[0];
Esta pgina especfica apresenta somente um formulrio, com dois campos. Por se tratar do
primeiro e nico elemento presente na pgina, a indexao deve ser feita numericamente
iniciando em zero. Logo, forms[0] significa o primeiro formulrio presente no documento e
elements[0] segue o mesmo raciocnio: o primeiro elemento do primeiro formulrio presente
na pgina. Se um novo formulrio for adicionado basta mudar o ndice numrico dentro dos
colchetes para acessar corretamente o objeto.
ACESSO UTILIZANDO O ATRIBUTO NAME

O atributo name est disponvel nas principais tags da HTML que voc necessite manipular em
seus scripts. A programao pode lhe parecer mais clara e objetiva, uma vez respeitado o seu
padro para atribuio de nomes.
web@becode.com.br
JavaScript
var campoUsuario = document.login.usuario;
Realmente, o cdigo parece mais claro. Mas lembre-se que se algum atributo tiver seu nome
alterado, voc ter que ajustar seus scripts. Isto pode ser um tanto quanto inconveniente em
ambientes corporativos ou aplicaes distribudas (desenvolvidas em camadas), onde o mesmo
profissional que elabora o visual da pgina HTML, pode no ser o mesmo que programar o
cdigo dos scripts.
ACESSO UTILIZANDO O MTODO getElementById( )

Este recurso bastante robusto. Alm de ser suportado pelos navegadores atuais, sob qualquer
plataforma, este mtodo nativo do objeto document pode acessar qualquer elemento de uma
pgina da web, atravs do atributo id. Na prtica, muito semelhante ao modelo anterior
(name), com a vantagem de ser padronizado.
JavaScript
var campoUsuario = document.getElementById('usuario');
Preste ateno que a sintaxe pode ser incmoda a princpio: h realmente trs letras maisculas
que fazem parte do comando getElementById (EBI). Com a prtica, voc ir se habituar logo
com este comando, at porque ele ser um dos mais utilizados. Em um documento HTML no
pode haver atributos id duplicados. Isto garante o perfeito funcionamento deste mtodo no
escopo de todo o script.
ACESSO UTILIZANDO O MTODO getElementsByName( )

Este mtodo tem por objetivo acessar os objetos pela presena do atributo name, assim como o
mtodo getElementById faz com o id. A novidade que alm de acessar pelo atributo, possvel
percorrer uma coleo com o mesmo valor de atributo numericamente, como uma lista. Ao
contrrio do atributo id, o name pode ser encontrado duplicado em uma pgina:
JavaScript
var campoUsuario = document.getElementsByName('login')[0];
As seguintes tags aceitam a utilizao do atributo name: BUTTON, TEXTAREA, APPLET, SELECT,
FORM, FRAME, IFRAME, IMG, A, INPUT, OBJECT, MAP, PARAM e META. Isto tem reflexos para
diferentes browsers caso voc venha a utilizar name para outros elementos que no estejam de
acordo com a especificao. Neste caso, utilize-se do getElementById.
ACESSO UTILIZANDO O MTODO getElementsByTagName( )

Seguindo o padro apontado pelo getElementById, este mtodo nativo do objeto document
tem a finalidade de acessar objetos diretamente pela tag que o representa. Esta soluo pode
ser muito til para solues de script que necessitem percorrer colees de tags ou tipos de tags
especficas em uma pgina web. Para a situao em abordagem, a sintaxe para acessar o login
do usurio:
JavaScript
var campoUsuario = document.getElementsByTagName('input')[0];
Veja que o nome tag na verdade um parmetro de uso do mtodo, do tipo string. E tambm h
uma associatividade numrica, reconhecida pelo uso dos colchetes, para obter a exata tag na
ordem em que ela est presente no documento. Sempre iniciando em zero (primeira tag) at o
total do nmero de tags presentes no documento menos um (n-1). Como este mtodo retorna
uma array com todos os elementos, caso no encontre nenhum com a tag especificada,
retornar uma array de zero posies. Assim, voc pode iterar esta array e trabalhar com cada
elemento encontrado.
ACESSO UTILIZANDO O MTODO getElementsByClassName( )

web@becode.com.br
Retorna todos os elementos do HTML que possuem a classe especificada. Com HTML5 voc pode
fazer:
JavaScript
var destaques = document.getElementsByClassName('destaque');
E isso retornar todos os elementos do HTML que possuem a classe "destaque". Observe:
HTML
<!DOCTYPE html>
<html>
<body>
<div class="destaque"> </div>
<div class="destaque">Second div element with class="destaque".</div>
<p>Click the button to change the text of the first div element with class="example"
(index 0).</p>
<button onclick="myFunction()"> Tente</button>
<p><strong>Note:</strong> The getElementsByClassName() method is not supported
in Internet Explorer and earlier versions.</p>
function myFunction( ) {
var x = document.getElementsByClassName("destaque");
x[0].innerHTML = "Hello World!";
}
</script>
</body>
</html>
ACESSO UTILIZANDO O MTODO getSelection( )

Os objetos document e window possuem um mtodo getSelection(), que retorna um objeto
Selection com a seleo atual em um documento. A seleo tem, entre outros, os seguintes
mtodos e propriedades:
PROPRIEDADE/MTODO
anchorNode
focusNode
selectAllChildern(parentN
ode)
deleteFromDocument()
rangeCount
getRangeAt(index)
addRange(range)
DESCRIO
O elemento que contm o incio da seleo.
O elemento que contm o final da seleo.
Seleciona todos os filhos de parentNode.
Remove a seleo do documento.
A quantidade de intervalos na seleo.
Retorna o intervalo na posio index.
Adiciona um intervalo seleo.
Um objeto Selection um conjunto de intervalos, de classe Range. Cada intervalo possui, entre
outros, os seguintes mtodos e propriedades:
PROPRIEDADE/MTODO
deleteContent()
setStart(parent,offset)
setEnd(parent,offset)
Propriedade/Mtodo
deleteContent()
setStart(parent,offset)
setEnd(parent,offset)
DESCRIO
Remove o contedo do intervalo.
Seta o incio do intervalo para o caractere na posio
offset dentro do elemento DOM parent.
Seta o final do intervalo para o caractere na posio
Descrio
Remove o contedo do intervalo.
Seta o incio do intervalo para o caractere na posio
Seta o final do intervalo para o caractere na posio
web@becode.com.br
MTODOS DE MANIPULAO HTML

Veja algumas das funcionalidades que esto disponveis nativamente para programar alguns
recursos em seus scripts:
appendChild : adiciona nodos na estrutura do documento;
JavaScript
<html>
<head>
<title>JS DOM</title>
function CriarParagrafo() {
var objNovoParagrafo = document.createElement('p');
var strTexto = document.createTextNode('Informao do pargrafo.');
objNovoParagrafo.appendChild(strTexto);
document.getElementById('pindice').appendChild(objNovoParagrafo);
}
</script>
</head>
<body>
<h1>Teste</h1>
<div id="pagina">
<h3>Exemplo</h3>
<p id="pindice" onclick="CriarParagrafo();">Inserir contedo a partir deste
pargrafo</p>
</div>
</body>
</html>
innerHTML : contedo inserido entre o nodo, no padro HTML;

JavaScript
<html>
<head>
function Conteudo() {
var objTag = document.getElementById('pindice');
window.alert(objTag.innerHTML);
}
</script>
</head>
<body>
<h1>Teste</h1>
<div id="pagina">
<h3>Exemplo</h3>
<p id="pindice" onclick="Conteudo();">O que h <i>aqui</i>.</p>
</div>
</body>
</html>
insertBefore : adiciona o novo nodo aps uma referncia de outro nodo; Os dois parmetros
utilizados por este mtodo tem a finalidade de identificar o novo objeto de contedo a ser
adicionado (primeiro parmetro), com referncia a um objeto irmo de mesmo nvel (segundo
parmetro).
web@becode.com.br
JavaScript
<head>
function Inserir(objeto) {
var strTexto = document.createTextNode('Conteudo criado!');
objeto.parentNode.insertBefore(objNovoParagrafo, objeto);
}
</script>
</head>
<body>
<h1>Teste</h1>
<div id="pagina">
<h3>Exemplo</h3>
<p id="p1" onclick="Inserir(this);">Adicionar conteudo antes deste elemento...</p>
<p id="p2" onclick="Inserir(this);">ou deste.</p>
</div>
</body>
removeChild : exclui o nodo filho parametrizado. Caso no hajam filhos, o prprio nodo
excludo; O parmetro identifica qual o nodo a ser excludo a partir do nodo pai. Pode-se
utilizar um valor numrico ou, como no caso exposto, passar um objeto a ser excludo.
JavaScript
<head>
function Inserir(objeto) {
var strTexto = document.createTextNode('Conteudo criado!');
objeto.parentNode.insertBefore(objNovoParagrafo, objeto);
objNovoParagrafo.onclick = function () { this.parentNode.removeChild(this); };
}
</script>
</head>
<body>
<h1>Teste</h1>
<div id="pagina">
<h3>Exemplo</h3>
<p id="p1" onclick="Inserir(this);">Adicionar conteudo antes deste elemento...</p>
<p id="p2" onclick="Inserir(this);">ou deste.</p>
</div>
</body>
PARA SABER MAIS
The definitive source of the best JavaScript libraries, frameworks, and plugins
Using the W3C DOM
web@becode.com.br
Apndece Exerccios de Multipla

escolha.
1. Marque todas as alternativas que forem verdadeiras
a. O HTML baseado no conceito de Hipertexto. Hipertexto so conjuntos de
ligados por conexes.
(V)
(F)
b. Desde o comeo o HTML foi criado para ser uma linguagem dependente de
plataformas, browsers e outros meios de acesso.
(V )
c. O HTML5 a nova verso do HTML4. Enquanto o WHATWG define as regras
de marcao que usaremos no HTML5 e no XHTML, eles tambm definem
APIs que formaro a base da arquitetura web.
(V)
d. Elementos de bloco podem conter elementos de bloco, dependendo da
categoria que ele se encontra. Por exemplo, um pargrafo no pode conter
um DIV. Mas o contrrio possvel.
e. A tag section define uma nova seo genrica no documento. Por exemplo, a
home de um website pode ser dividida em diversas sees: introduo ou
destaque, novidades, informao de contato e chamadas para contedo
interno.
f. O elemento header representa um grupo de introuo ou elementos de
navegao. O elemento header no deve ser utilizado para agrupar ndices
de contedos.
(v )
(F)
2. Sobre o CSS, analise os cdigos abaixo e diga qual deles correto.

#r-box{
color: #fff;
width: 200px;
padding: 5px;
border-radius: 10px;
-webkit-border-radius: 10px;
}
<p style="font-size:20px;">Este pargrafo em
tamanho de fonte igual a
20px</p>
<p style="font-family:courier;">Este pargrafo em
fonte Courier</p>
<p style="font-size:16px; fontfamily:cambria">Este pargrafo em fonte
Cambria e tamanho 20px</p>
web@becode.com.br
( F ) O trecho do cgigo trabalha com

uma classe de nome r-box, onde utiliza
uma cor de fundo #666 e cor de texto # fff
alm de altura de 200px, espaamento entre os
elementos de 5px e border-radius, elemento novo
do CSS3 que define novos recursos de borda.
( V ) Neste exemplo estamos trabalhando

com o CSS inline, onde os cdigos so
colocados dentro da tag.
3. A linha de cdigo abaixo mostra o posicionamento de uma imagem, sendo assim

marque a alternativa correta.
CDIGO
<img
src="bandeiradobrasil.jp
g" alt="Bandeira do
Brasil" style=
"float:left;" />
VISUALIZAO
A ( x ) Mostra a imagem esquerda do elemento de texto;

B ( ) Mostra a imagem direita do elemnto de texto;
4. Considere o cdigo HTML abaixo sobre um formulrio em um cdigo CSS3

incorporado ao cabealho da pgina, uma das formas para definir apenas o
campo do tipo texto com fundo cinza :
Reposta: D
web@becode.com.br
5. Estudamos em nosso curso o elemento de posicionamento chamado positin,

sobre ele pergunta-se: Esta propriedade permite os valores.
Resposta: A
6. Uma folha de estilo CSS externa ideal quando se deseja aplicar estilos a muitas
pginas, sendo possvel mudar a aparncia de um site inteiro alterando apenas
um arquivo. Com relao s folhas de estilo externas, considere:
I. < link rel="stylesheet" type="text/css" href="estilo.css">
II. < style type="text/css"> @import url("estilo.css");
III. < @import page="text/css" src="estilo.css">
IV. <@include type="text/css" href="estilo.css">
Considerando que o arquivo CSS est no mesmo diretrio da pgina HTML, para
fazer referncia correta a um arquivo CSS externo no interior do cabealho da
pgina HTML pode-se utilizar o que apresentado APENAS em:
Resposta: E
web@becode.com.br
7. Reproduza o modelo abaixo usando os conhecimentos adquiridos no curso.
web@becode.com.br

HTML CSS JavaScript - BeCode

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

HTML CSS JavaScript - BeCode

Caricato da

Copyright:

Formati disponibili

HTML5, CSS3 e JavaScript

A segunda etapa do curso focada na linguagem de programao JavaScript, tecnologia que

Curso BeCode de Lgica de Programao ou conhecimento similar

Implementar a sistemtica de hiperdocumentos (navegao entre pginas)

W3C World Wide Web Consortium

Safari, Chrome, Opera

PARA SABER MAIS

2- CRIANDO UM DOCUMENTO HTML

O atributo rel=stylesheet" indica que aquele link relativo a importao de um arquivo

Dentro da tag <body></body> disposto o contedo da nossa pgina, atravs de tags

Onde a <h1> a mais importante e tipicamente maior em relao as outras e a <h6> a

A declarao DOCTYPE define o tipo de documento;

PARA SABER MAIS

Useful HTML Meta Tags

O elemento <i></i> destina-se a marcar trechos de textos que meream um destaque

O elemento<b></b> destina-se a representar um trecho de texto estilisticamente

img= tag utilizada para inserir uma imagem na pgina web.

O browser exibe o hiperlink em um formato diferente do texto normal, normalmente sublinhado

<tfoot></tfoot> e <tbody></tbody>, so as definies para cabealho, rodap e corpo da

href="#">A <span class="subTitle">Subtitle</span></a></li>

O contedo relacionado e no faria sentido por si prprio? Utilize <section></section>

tipo especializado de <section></section>, tem um significado mais especfico do que

PARA SABER MAIS

HTML YouTube Videos

<!--Construa o seguinte documento usando HTML semntico. Aqui use tabelas.

Definindo um campo de senha que oculta os caracteres digitados

O cdigo cria um tpico campo para pesquisas.

PARA SABER MAIS

Expresses Regulares - Guia de Consulta Rpida

pt - point :1/72 in;

px pixel - Relativo ao dispositivo (midia) de exibio;

SELETOR POR ELEMENTO (TAG)

SELETOR POR CLASSE

O contedo no vai ser gerado.

Uma string de texto normal.

Permite inserir imagens de fontes

Obter valor de um determinado atributo

Gera marcaes de aspas.

Colocamos a propriedade counter-increment com o valor numero-do-titulo. Esse valor como se

PARA SABER MAIS

Guia completo dos Seletores CSS

O float uma propriedade por vezes imprevisvel no CSS. Observaremos passo-a-passo o

Veja o cdigo combinado de HTML e CSS:

Valor HEX (hexadecimal) - como "# FF0000"

O CSS3 especifica novas formas de manipulao de cores:

RGBA - Vermelho, Verde, Azul, Opacidade.

A primeira propriedade, obviamente, descreve um elemento de borda, como de costume: a

PARA SABER MAIS

CSS grid: isso muda tudo de novo

7- FORMATANDO TEXTO CSS

a:link........define o estilo do link no estado inicial;

Web Open Font Format

Voc aplica a fonte como segue:

text-overflow: ellipsis - O contedo do texto que transbordar, mostrado com a

PARA SABER MAIS

Guia de Referncia CSS

Construa o seguinte documento HTML semntico e formate visualmente com CSS.

8- CSS TRANSFORM E TRANSITION

transform: translate(13px); /* move elemento 13px no eixo X */

rotate(30deg); /* rotaciona 30' no sentido horrio */

/* dobra o tamanho do elemento em todas as direes */

transform: scale(2, 3); /* dobra a largura e triplica a altura */

A tabela relaciona propriedades que podem sofrer transforms e transitions.