Programação WEB

PROGRAMAÇÃO WEB
JULIANO PAULO MENZEN

PROGRAMAÇÃO WEB 2
SUMÁRIO
A HISTÓRIA DA INTERNET 4 Forma de Aplicação e Precedências do CSS 54
Introdução à Internet 5 Tags adicionais de HTML para iteração com o CSS 56
As fases da Internet 8 Seletores 56
Unidade de Medida em CSS 59
A LINGUAGEM HTML 12 Estilos para Formatação de Texto 60
Mais um pouco de história 13
Fluxo de Página 66
Tags Estruturais 15
Formatação de Texto e Imagens 17 JAVASCRIPT 81
Tags para inclusão de títulos 18 Um pouco de História 82
Tag para inclusão de parágrafos e quebra de linhas 19 Estrutura de um Programa JavaScript 83
Tags para destacar textos 21 Variáveis, Atribuições e Operações 87
Tag para alterar a fonte de um texto 23 Interagindo com o Usuário 89
CENTRO UNIVERSITÁRIO UNIFTEC
Tag para inclusão de imagens em uma página 23 Comandos Condicionais e Expressões 91 Rua Gustavo Ramos Sehbe n.º 107.
Tag para adicionar separação de textos em documento 25 Estruturas de Repetição 93 Caxias do Sul/ RS
Meta Tags e Caracteres Especiais 26 Funções 94
Hyperlinks e Âncoras 28 Orientação a Objetos em JavaScript 95
Listas 30 Eventos 97 REITOR
Tabelas 31 Aplicação de CSS com JavaScript 99 Claudino José Meneguzzi Júnior

PRÓ-REITORA ACADÊMICA
Formulários HTML 35 RECURSOS AVANÇADOS DO JAVASCRIPT 104 Débora Frizzo
Inclusão de Elementos de Áudio e Vídeo 40 DOM e Manipulação de Elementos 105 PRÓ-REITOR ADMINISTRATIVO
NOÇÕES DE DESIGN 46 Funções Anônimas 109 Altair Ruzzarin
Noções de Design 47 Interagindo com o Tempo 111 DIRETORA DE EDUCAÇÃO A DISTÂNCIA (NEAD)
Arquitetura de Informação 47 Rotinas de Geolocalização 113 Lígia Futterleib
Usabilidade 48 Substituindo os Cookies 114
Aprendizagem 48 Canvas API 115
Desenvolvido pelo Núcleo de Educação a
Eficiência 48 FRAMEWORKS JAVASCRIPT 121 Distância (NEAD)
Memorização 48 Conceito 122 Designer Instrucional
Robustez 48 Biblioteca Modernizr 123 Sabrina Maciel
Satisfação 48 Framework JQuery 123 Diagramação, Ilustração e Alteração de Imagem
Acessibilidade 49 Eventos JQuery 126 Igor Zattera
Layout 50 Funcionalidades do JQuery 127 Revisora
A LINGUAGEM CSS 53 Biblioteca jQuery UI 129 Caiani Martins
Conceito 54 Framework Bootstrap 130

PROGRAMAÇÃO WEB 3
INTRODUÇÃO
Praticamente todos nós utilizamos a internet. Seja para verificar o status dos
amigos nas redes sociais, seja para o trabalho do nosso dia a dia ou ainda para pes-
quisarmos aquele assunto sobre o qual queremos conhecer um pouco mais. Também
para escutar música, assistir filmes, enfim, poderíamos ficar aqui muito tempo citando
os nossos usos da internet.
O que a maioria das pessoas não sabe é como tudo isso funciona. Talvez até
tenham uma ideia de como a internet trabalha, mas apenas uma ideia!
Nesta nossa disciplina de Programação Web, vamos deixar de ter uma

ideia de como a internet funciona para passarmos a ter certeza do seu fun-
cionamento.
Além de aprendermos sobre como tudo começou, vamos compreen-

der o funcionamento das redes e como criar web sites estáticos, ainda, como
torná-los disponíveis na internet.
Depois de estudarmos e aplicarmos tudo isso, ao final da discipli-

na, ainda poderemos exibir aos nossos amigos todas as páginas web que
criamos na própria internet!
Então, alunos, agora vamos navegar em nosso estudo!!!

PROGRAMAÇÃO WEB 4
A HISTÓRIA DA
INTERNET
Entenda como uma necessidade de
segurança se tornou uma das maiores
inovações da humanidade no século XXI.
Você já se perguntou alguma vez quando a internet
surgiu? Para muitos de nós, quando nascemos, ou quando
passamos a perceber o mundo ao nosso redor, a internet já
estava presente. Tanto que, possivelmente, você não se imagina
vivendo sem internet no mundo de hoje.
Na verdade, nem sempre foi assim, há pouco tempo,

considerando o tempo de existência da humanidade, a inter-
net não existia. Pergunte aos seus pais como eles utilizavam
a internet.
A resposta que você receberá é a de que eles não ti-

nham internet!!! Estranho? Nem tanto! Faça outro teste agora,
pergunte para algum amigo mais velho que você como era a
internet na época dele.
PROGRAMAÇÃO WEB 5
Provavelmente, ele irá lhe responder Introdução à Internet

que a internet era bem diferente daquilo
que estamos acostumados a ver. Ela era
Antes de aprendermos a criar os fa-
lenta, as páginas exibiam poucos recursos,
mosos websites, vamos estudar um pouco
praticamente apenas texto e imagens e
a história e entender como tudo começou.
nós não podíamos ver ou escrever para
os nossos amigos na rede social, por um
A Internet é uma rede de compu-
motivo muito simples: as redes sociais não
tadores que começou através de pesquisas
existiam!
militares durante a Guerra Fria, na déca-
Outro aspecto curioso que você vai da de 1960. Nesse período, existiam dois
ouvir deles é que a internet não estava dis- blocos com políticas e ideologias comple-
ponível a qualquer momento e em qualquer tamente contrárias, que eram os Estados
lugar. Para podermos utilizar a famosa Unidos e a União Soviética.
rede das redes, precisávamos de uma li-
nha telefônica e mesmo assim, tínhamos Estes dois blocos exerciam uma forte
a necessidade de discar para um provedor influência em todo o mundo e qualquer
de acesso com os famosos modens e o seu inovação, como mecanismo ou tecnologia,
barulhinho inconfundível. Se você não poderia proporcionar a um bloco liderar
teve a oportunidade de escutar o barulho, esta disputa. Nesse complexo momen-
neste link você poderá ouvi-lo ou então to em que vivia o mundo, o governo dos
sentir saudades dessa época, caso tenha Estados Unidos temia um ataque as suas
passado por ela. bases militares pelo governo Russo. Um
ataque a essas bases poderia trazer à tona
A partir de agora, vamos entender informações sigilosas, como também po-
como todas estas situações apresentadas deria destruir para sempre informações
foram se transformando para que a internet contidas naquele local.
pudesse chegar ao ponto que chegou nos
dias atuais.
PROGRAMAÇÃO WEB 6
Por conta disso, foi idealizado um de dados, informações do destinatário e Donald Davies, propôs uma rede nacional
modelo de comunicação que permitisse informações que permitiam a construção de dados também baseada em troca de
que as informações fossem armazenadas do conteúdo original na sua chegada. pacotes. Esta rede foi construída e passou
e descentralizadas. Com isso, se uma base a se chamar Mark I. No ano de 1976,
americana fosse atingida, as informações Apesar de o governo americano fa- haviam 12 computadores e 75 terminais
deste local não seriam perdidas. Este zer todo esse investimento, com medo interligados pela rede.
modelo de comunicação descentralizada de sofrer um ataque Russo, esse nunca
foi batizado de ARPANET, criado pela aconteceu. No entanto, a partir dessa ação, Por volta da década de 70, uma rede
ARPA. surgiu um dos maiores meios de comuni- de pesquisa francesa chamada CYCLA-
cação do século 20/21, onde, em apenas DES, dirigida por Luis Pouzin, apresentou
A ARPANET funcionava por meio Quatro anos, conseguiu atingir em torno um novo modelo de rede como alternati-
de um sistema de chaveamento de paco- de 50 milhões de pessoas. va a rede americana ARPANET. Sendo
tes. Esse sistema fazia a transmissão de essa, a primeira rede a fazer com que os
dados em rede de computadores onde as Saindo dos Estados Unidos e viajan- próprios equipamentos conectados à rede
informações eram divididas em peque- do até o Reino Unido, em 1965, o Natio- fossem responsáveis pelo transporte das
nos pacotes, os quais possuíam trechos nal Physical Laboratory, comandado por informações em vez da própria rede.
Arpanet foi a primeira rede operacional

de computadores base de comutação
de pacotes, sendo uma das redes
precursoras da internet.
Arpa foi a agência de projetos de
pesquisa avançada, sendo criada em
1958 pelos militares para garantir a
superioridade tecnológica dos EUA.
PROGRAMAÇÃO WEB 7
Desta maneira, com o surgimento Em 1978, surgiu o protocolo TCP/ na rede, a década de 90 foi responsável
de redes em diversas partes do mundo e IP, onde cada dispositivo conectado à rede pela popularização da internet, de forma
cada uma com diferentes métodos de co- passou a receber um endereço único, para que no ano de 2003 haviam cerca de 600
municação, passou a ser necessário algo que este dispositivo pudesse ser identifi- milhões de pessoas conectadas, enquanto
que pudesse unificar estas redes. Com isso, cado na rede e pudesse receber os paco- que em 2007 este número já estava em 1
membros da DARPA e da Universidade de tes de rede destinados a ele. Assim, em bilhão e 234 milhões de usuários, segundo
Stanford, iniciaram em 1973 um trabalho 1983, o protocolo TCP/IP passou a ser a Internet World Estatistics.
de reformulação, onde todas as diferenças o único protocolo empregado pela rede
entre os protocolos de rede pudessem ser ARPANET. Nas terras tupiniquins a internet
escondidas através do uso de um protocolo teve início em 1988, e servia apenas para
inter-redes comuns. Com esta definição, os Com a ligação de diversas redes por ligar universidades brasileiras com univer-
responsáveis pela comunicação passaram a meio deste novo protocolo, surgiu o ter- sidades americanas. Em 1989 o governo
ser os dispositivos conectados e não a rede.
mo backbone, o qual representa grandes brasileiro iniciou um projeto chamado
Na verdade, o mesmo conceito proposto computadores conectados entre si, os quais de Rede Nacional de Ensino e Pesquisa
pela francesa CYCLADES. distribuem a comunicação de grandes flu- (RNP), que existe ainda hoje, e tem por
xos de dados entre diferentes regiões, uti- objetivo organizar uma rede acadêmica de
A especificação deste modelo resul- lizando como canais de comunicação fibra alcance nacional.
tou no primeiro uso do termo “internet”, ótica, satélites ou ondas de rádio.
como abreviação de “internetworking” e O primeiro backbone brasileiro en-
a partir disso, diversos padrões de redes No ano de 1992, Tim Bernes Lee trou em funcionamento em 1991, ligan-
passaram a empregar o seu uso. criou a World Wide Web, surgindo, a do apenas universidades, mas em 1995, o
Com a função da rede reduzida ape- partir de então, o protocolo HTTP, que governou abriu o backbone para fornecer
nas para a transferência de dados, tor- permite a transferência de informações em conectividade a provedores de acesso co-
nou-se possível a junção de praticamente formato textual através de uma linguagem merciais.
todas as redes, independentemente de de hipertexto conhecida como HTML.
suas características. Esse novo padrão de Atualmente, a internet no Brasil é
transferência de dados entre redes ficou A partir da World Wide Web e, gerenciada pelo NIC.br, a qual pode ser
conhecido como TCP. juntamente, com o interesse comercial acessado em http://www.nic.br. Além de
PROGRAMAÇÃO WEB 8
gerenciar e regulamentar a internet no Além da evolução da tecnologia que ser realmente uma ferramenta de inte-
Brasil, a entidade possui muita informação levou ao surgimento da internet, o seu gração entre todos. Exemplo disso, são os
sobre a internet, seu funcionamento e dicas próprio uso passou por evoluções. Assim, sites de e-commerce, blogs e redes sociais.
de como fazer bom uso deste recurso. estas evoluções estão diretamente associa- Agora, tente imaginar uma rede social
das à melhoria dos meios de comunica- sem usuários cadastrados ou um blog sem
Se você tiver interesse, acesse os en- ção e acesso, além do aumento do poder uma pessoa que adicionasse conteúdo ao
dereços a seguir e assista aos vídeos. Tenho de processamento dos computadores e ao mesmo.
certeza que será uma ótima experiência massivo uso da rede.
para você! Já, no ano de 2004, estas diferen-
Nos primórdios da internet, haviamças de uso da Web foram classificadas.
• Como funciona a Internet ? Pro- poucas pessoas responsáveis por inserir Tim O’Reilly, em sua O’Reilly Media
tocolo IP; conteúdos na rede. Estas pessoas adiciona-
Web 2.0 Conference eram as versões da
vam os conteúdos manualmente, criando Web, dividindo a mesma em três versões:
• Como funciona a Internet ? Siste- páginas web que hoje são conhecidas como Web 1.0, as quais foram os primórdios da
mas Autonômos; páginas estáticas. Quem acessava a internet
internet, uma internet estática onde pou-
nesta época, apenas podia acessar e ver os
cos produziam conteúdo; Web 2.0, a qual
• Como funciona a Internet ? DNS. conteúdos adicionados por estas pessoas, estamos vivendo no momento presente,
ou seja, não havia muita interação. onde todos contribuem para a formação do
As fases da Internet conteúdo da internet e ainda a Web 3.0,
No final da década de 90 e nos que é conhecida como a web semântica
primeiros anos após a virada do século, ou internet das coisas.
Você deve estar lembrado da intro- iniciou-se uma mudança na forma de uso
dução deste capítulo, em que falamos que a da web. A partir daí, os próprios usuá- Para ser possível compreender o
internet nem sempre foi como é hoje. Real- rios da web deixaram de apenas acessar conceito da web semântica, precisamos
mente os primórdios da internet lembram e visualizar os conteúdos, mas também entender o conceito da web atual, o qual
muito pouco da internet atual. Veja com passaram a contribuir com os conteúdos pode ser chamado de web sintática. Na
os seus próprios olhos como era a primeira da internet. Ou seja, a internet passou a web sintática, os computadores fazem a
página da internet acessando aqui. ser muito mais participativa passando a apresentação da informação, mas não in-
PROGRAMAÇÃO WEB 9
terpretam o que a informação significa. cializações de cada equipamento. Num

Esta interpretação cabe aos seres humanos. automóvel, por exemplo, a internet estará
Na web semântica, esta interpretação passa conectada ao mesmo, já fornecendo infor-
a ser realizada também pelos computado- mações sobre a trafegabilidade das vias.
res. Pode-se exemplificar a situação com Enquanto que a geladeira pode verificar o
um mecanismo de busca. No mecanismo conteúdo da mesma ou temperatura, ainda,
de busca, quando informarmos um termo informar ao seu dono sobre a necessidade
para pesquisa contendo algumas palavras, de compra de produtos.
o mecanismo irá buscar as páginas que
apresentarem maior relevância com as Em diversos televisores esta ten-
palavras informadas, mas não irá buscar dência já uma realidade. Nestes casos, o
as páginas pelo significado das palavras, usuário pode ver filmes e informações
as quais podem ser uma pergunta, por existentes na Web, diretamente pelo te-
exemplo. Na web semântica, se pergun- levisor.
tarmos à internet onde podemos ir comer,
ela vai nos responder com o endereço dos
restaurantes mais próximos.
Outra tendência da web 3.0, é a in-

ternet das coisas. Nesse conceito, a internet
deixa de estar presente apenas em compu-
tadores, mas passa a ser incluída nos mais
diversos equipamentos presentes na vida
das pessoas, como refrigeradores, fornos,
automóveis, televisores, etc.
Em cada um dos casos a internet

irá ser utilizada de acordo com as espe-
Síntese
Neste capítulo nós aprendemos que:
• A internet é uma rede de computadores que teve o

seu início com a Guerra Fria, sendo formada por um
conjunto de redes;
• Inicialmente ela tinha apenas objetivos militares e aca-

dêmicos mas a partir do final da década de 90 e início
dos anos 2000, passou a ser utilizada comercialmente;
• A internet não se restringe apenas a websites, mas sim

a qualquer tipo de recurso que utilize a rede mundial
de computadores para funcionar;
• A partir de 1991 foi definida a linguagem HTML, a

qual passou a ser a base para a construção de websites
como os que conhecemos atualmente.
Questões para
recapitularmos!
1. Através do estudo deste capítulo,
descreva os motivos que levaram ao
surgimento da internet.
2. Explique por que a internet foi divi-

dida em fases, bem como as carac-
terísticas essenciais de cada uma das
fases, as quais também justificam a
separação das mesmas.
3. Quem criou o protocolo HTTP e

a primeira definição da linguagem
HTML.? Explique por que a forma
como ele definiu estes protocolos e
tecnologias permitiu que a internet
fosse o que nós conhecemos hoje.
PROGRAMAÇÃO WEB 12
A LINGUAGEM
HTML
Agora chegou o momento de sentirmos
o gostinho de como é criar uma página
na internet. Neste capítulo daremos os
primeiros passos para construir uma página
web.
Juntamente com o início da World Wide Web, surgiu
a linguagem HTML, que é uma sigla do inglês para Hyper
Text Markup Language, a qual significa Linguagem de mar-
cação de hipertexto.
Por hipertexto, entendemos como sendo todo o conteúdo

de um documento para a web, que possui por principal carac-
terística a capacidade de se interligar a outros documentos da
web. Esta interligação entre os hipertextos é possível através
do emprego de links, os quais estamos habituados a acessar
quando navegamos pela rede.
A linguagem HTML é uma linguagem de marcação,

que se destina a marcar ou estruturar os conteúdos para a Web.
Esta marcação é feita através de elementos empresa NeXT, a qual Steve Jobs navegador de texto chamado Lynx, e
conhecidos como Tags. Esse processo de foi o fundador. em 2004 surgiu o navegador Mosaic.
marcação da linguagem, em nada tem a Além do navegador, ele implemen- Entretanto, como esta nova lingua-
ver com uma linguagem de programação, tou um novo protocolo de comu- gem não despertou muito interesse
como PHP, Java ou JavaScript, as quais nicação que ficou conhecido como das grandes empresas, as pesquisas
têm por objetivos gerenciar comportamen- HTTP, que permitia transferir do- e evolução da plataforma acabaram
tos e ações através de instruções baseadas cumentos no formato HTML, o sendo lentas.
em lógica algorítmica. qual também foi uma especificação • HTML 2.0: Com a criação de novos
criada por TIM, mas baseada no navegadores, a internet tornou-se
Mais um pouco de história formato de marcação SGML. um caos, pois cada fabricante passou
• HTML+: A partir de uma lista a definir as suas próprias formas de
de discussão eletrônica, criada em marcação. Com isso, neste mesmo
Desde o surgimento do HTML até
1991, Dave Regett, da HP, passou ano foi criada a IETF (Força Tarefa
o momento presente, o HTML passou
a desenvolver pesquisas para a im- para a Engenharia da Internet), que
por uma série de versões, as quais vamos
plementação de novos recursos da tinha por objetivo analisar e definir
ver agora:
linguagem HTML, passando a ser um padrão único para o HTML.
• HTML: A web que conhecemos Nessa época, a predominância de
chamada de HTML+, sendo essa
hoje, foi inventada em 1992 por navegador web era da Mosaic, que
versão publicada no ano de 1993.
Tim Berners-Lee. Ela surgiu com logo após se tornou o Netscape.
Assim, a partir dessa definição, con-
a pesquisa de Tim para descobrir um Esse sucesso deveu-se ao Netscape
vencionou-se que as definições do
método que permitisse aos cientistas funcionar em dispositivos precários.
HTML não se destinam a determi-
do mundo inteiro compartilhar, ele- Apesar da Netscape ter contribuído
nar a aparência, assim como nomes,
tronicamente, seus textos e pesqui- de forma considerável para a difusão
formatações, entre outras, de uma
sas, ainda, que permitisse interligar da internet, na época ela se isolou,
página Web. Estas funções sempre
estes documentos. Antes, em 1990, criando a sua própria definição de
devem ficar a cargo do programa
foi criado o primeiro protótipo de HTML e não participando de dis-
responsável por renderizar as pági-
navegador, o qual se chamava Nexus cussões da comunidade.
nas web. No ano de 2003, surgiu o
e era executado em computadores da
Em outubro de 1994, foi criado mesmo ano surgiu a versão 2.0 no Opera. Com base nesses estudos
o World Wide Web Consortion navegador Internet Explorer da Mi- surgiram novos elementos e estru-
(W3C), formado por empresas, ins- crosoft. turas para tornar a interpretação das
tituições e pesquisadores com o ob- • HTML 3.2: A versão 3.2 foi endos- páginas mais semântica para o na-
jetivo de desenvolver a web, criando sada pelo W3C em janeiro de 1997 vegador, além de adicionar diversos
normas e especificações aplicáveis como uma recomendação oficial, recursos que antes eram somente
aos diversos setores e segmentos da apresentando os recursos de tabelas possíveis com o emprego de plugins
web, desde fabricantes de tecnolo- e applets. ao navegador, não sendo recursos
gias e softwares a fornecedores. nativos e padrões da web. Confi-
• HTML 4.0: Em dezembro de 1997 ra neste link as funcionalidades do
No ano de 1995, iniciou-se o desen- o W3C definiu a versão 4.0 como
volvimento de novas marcações para HTML 5.0, que já estão disponíveis
sendo a versão oficial do HTML. em cada um dos navegadores exis-
o HTML, priorizando-se a inclusão
de elementos de apresentação, indo • HTML 4.01: Em dezembro de tentes no mercado.
de encontro às definições iniciais do 1999 o W3C publicou as definições
HTML. Mais adiante, em setembro para o HTML 4.01, o qual passou
desse mesmo ano, foi publicada a a ser a versão oficial, inclusive até
versão 2.0 do HTML. os dias de hoje, trabalhando para-
lelamente com a versão 5.0, ainda
• HTML 3.0: Ainda, em 1995, Dave não concluída.
Ragget lançou a proposta da versão
3.0 do HTML. Nessa versão passou • HTML 5: Em maio de 2007 o W3C
a ser criada uma marcação específica passou a estudar a implementação de
para estilização, bem como o sur- uma nova versão do HTML, cha-
gimento de marcações para tabelas, mada de HTML 5. Esse estudo foi
formulários e notas de rodapé. Nessa inicialmente baseado no trabalho
mesma época a Netscape adicio- realizado pelo grupo WHATWG
nou a funcionalidade de Frames no (Web Hypertext Application Tech-
HTML do seu navegador. Nesse nology Working Group), formado
pelas empresas Apple, Mozilla e
Tags Estruturais de fechamento. Desse modo, essa tag de Cada uma das tags, antes citadas,
fechamento é igual a de abertura, porém, possuem um significado, o qual será de-
precedida do caractere barra “/”. Somente talhado:
Um documento html refere-se a um
as tags que não possuem conteúdo não
arquivo de texto que deve ser salvo no sis-
necessitam de fechamento, por exemplo: <!DOCTYPE html>: Essa tag não
tema de arquivos com a extensão “.html”
faz parte do documento html, mas tem
ou “.htm”. <title>Este é um título</title> por objetivo informar o navegador que o
documento descrito na página está cons-
<br> truído com o uso de html versão 5;
<html> e </html>: São as tags que

Para que uma página html possa ser contém em seu interior todo o documen-
Para que este arquivo possa ser in- criada, é preciso que a página contenha to escrito na linguagem html. Qualquer
terpretado corretamente pelo navegador um conjunto de tags básicas, conhecidas página html deve conter estas tags;
web, é preciso que o mesmo possua um como tags estruturais, conforme pode ser
conjunto de tags de marcação específica. observado no exemplo a seguir: <head> e </head>: Essas tags re-
presentam a estrutura de cabeçalho do
Uma Tag é uma palavra reservada <!DOCTYPE html>
documento. Dentro deste bloco de tags
na linguagem disposta entre os sinais de <html>
devem estar contidas apenas as que pos-
maior “>” e menor “<”. A seguir, um exem- <head>
suem instruções que devem ser seguidas
plo de tag HTML. <title></title>
pelo navegador, como inclusão de arqui-
</head> vos complementares, descrição de scripts,
<html>
<body> regras, entre outros. Alem disso, não de-
</body> vem ser inseridas tags de estruturação e
Essas tags, em sua grande maioria, </html> formatação de texto neste local;
são compostas por uma tag de abertura,
um conteúdo utilizado para ser estrutu- <title> e </title>: Essas tags têm por
rado pela mesma, seguido de uma outra objetivo definir o título do documento
html que será exibido na guia do navega- tado deverá ser uma página em branco. cor sólida através do seu nome em inglês,
dor; ou então através de um valor hexadecimal;
A tag <body> permite a inclusão
<body> e </body>: Essas tags rede propriedades. Essas propriedades são Text: Esta propriedade permite
presentam o corpo do documento html. características que podem ou não ser adi- definir a cor das letras da página html,
É dentro deste bloco de tags que serão cionadas à tag, as quais complementam sendo preenchida da mesma forma que a
adicionados todos os elementos e conteúdo a funcionalidade original da tag. Assim, propriedade bgcolor.
que compõem a página html. determinadas tags somente funcionam de
forma correta, quando tiverem as suas pro- Exemplo:
Observação: O documento HTML priedades adicionadas. Respectivamente,
deve ser estruturado conforme apresen- essas propriedades sempre são um conjunto <!DOCTYPE html>
tado, porém, se algumas destas tags não formado por chave e valor, onde o valor <html>
<head>
forem adicionadas ou colocadas em ordem deve ser adicionado sempre entre aspas
<title></title>
diferente da apresentada, o resultado vi- duplas. Exemplo: </head>
sualizado no navegador, possivelmente, <body background=”imagem.png”
será o mesmo, visto que o motor de ren- Background=”imagem.png” text=”red”>
derização do navegador interpreta as tags </body>
conforme elas aparecem no documento. </html>
Algumas das propriedades que po-
Entretanto, o posicionamento incorreto dem ser adicionadas a tag <body> são:
das tags tornará a renderização da página Observação: Estas propriedades da
mais lenta e também ocasionará erros de tag <body> funcionarão nos testes, entre-
Backbround: Esta propriedade per- tanto, as mesmas não são mais suportadas
execução de rotinas Java Script. mite vincular uma imagem de fundo para pelo html 5.
a página html;
Agora, implemente o exemplo an-
terior em um arquivo html e execute este Bgcolor: Esta propriedade permite
arquivo no navegador de sua preferência, definir uma cor de fundo para a página
analisando o resultado. Se tudo foi imple- html. Esta cor pode ser definida como uma
mentado de forma correta, então, o resul-
Tabela de cores básicas Formatação de Texto e Imagens digo que serão vistos a partir de agora não
apresentam acentuação propositalmente,
Cor Nome da Representação pois em momento oportuno serão apre-
Cor Hexadecimal Agora que já conseguimos definir
sentadas maneiras de adicionar acentos e
a estrutura básica de uma página html,
black #000000 caracteres especiais no hml.
podemos começar a inserir conteúdo na
silver #C0C0C0 mesma. Para isso, utilizamos um conjunto
de tags que tem por objetivo estruturar e
gray #808080 organizar os textos inseridos na página
white #FFFFFF web.
maroon #800000 Nota 1: Como o objetivo primor-

red #FF0000 dial do HTML é estruturar o conteúdo
da página, não existem muitas tags que
purple #800080 apliquem formatação de texto. Esta tarefa
fuchsia #FF00FF de formatação foi amplamente desconti-
nuada com o HTML 5, deixando a tarefa
green #008000 para o CSS, o qual será visto no próximo
lime #00FF00 capítulo.
olive #808000 Como estamos dando os primei-
yellow #FFFF00 ros passos com a programação web, neste
momento utilizaremos algumas tags de
navy #000080
formatação de texto em HTML para ter-
blue #0000FF mos a possibilidade de adicionar algum
conteúdo da página.
teal #008080
aqua #00FFFF Nota 2: Todos os exemplos de có-
Uma tabela de cores completa pode ser encontrada neste link.
Tags para inclusão de títulos
Sempre que um conteúdo textual, como um documento

ou um artigo for criado, existe a necessidade de definir-se um
título para o mesmo. Estes títulos podem ser adicionados em
diversos pontos do documento, de forma que em alguns locais o
título apresenta uma maior prioridade (destaque) do que outros.
Para representar estes títulos em um documento descrito

na linguagem html, devem ser empregadas as tags <h1>, <h2>,
<h3>, <h4>, <h5> ou <h6>.
O texto inserido entre estas tags será interpretado pelo

html como sendo um título, recebendo maior ou menor destaque,
de acordo com a tag empregada. Exemplo: A tag <h1> refere-se
a um título de maior prioridade que um título adicionado com
a tag <h2> e, assim, sucessivamente. Exemplo de código:
<html>
<head>
</head>
<body>
<h1>Titulo de primeiro nivel</h1>
<h2>Titulo de segundo nivel</h2>
<h3>Titulo de terceiro nivel</h3>
<h4>Titulo de quarto nivel</h4>
<h5>Titulo de quinto nivel</h5>
<h6>Titulo de sexto nivel</h6>
</body>
</html>
Tag para inclusão de parágrafos e quebra de linhas
Durante a elaboração de documentos, existe a necessidade de adicionarmos parágrafos para o mesmo. Também, há a
necessidade de adicionar uma quebra de linha que não seja um parágrafo.
As tags para inclusão de parágrafos e quebra de linha forçada são, respectivamente, <p> e <br>. Exemplo de código html
com parágrafos:
<html>
<head>
</head>
<body>
<h1>Residuo eletronico</h1>
<p>
Residuo computacional tambem conhecido como Residuo eletronico ou lixo eletronico, conhecidos
pelo acronimo de REEE (Residuo de Equipamentos Eletronicos) 1 e o termo utilizado para qualificar
equipamentos eletroeletronicos descartados ou obsoletos2.
A definicao inclui computadores, televisores,telemoveis/celulares, entre outros dispositivos.
A classificacao dos produtos por categoria pode ser encontrada no site da Comunidade Europeia 3
</p>
<p>
Origem: Wikipedia, a enciclopedia livre.
</p>
</body>
</html>
A partir do exemplo, podemos perceber que o browser interpretou apenas as tags <p> no código html, a fim de fazer a
quebra de linha, ignorando as quebras de linhas adicionadas no código fonte. Esta situação é um padrão na linguagem, de forma
que qualquer que seja a formatação, espaçamento ou quebra de linha adicionado ao texto, sem o uso de uma tag html ou css, a
formatação será sempre ignorada.
Assim, caso haja a necessidade de forçar uma quebra de linha que não seja um parágrafo, deve-se utilizar a tag
<br>, conforme segue o exemplo:
<html>
<head>
</head>
<body>
<p>
Residuo computacional tambem conhecido como Residuo eletronico ou lixo eletronico, conhecidos
pelo acronimo de REEE (Residuo de Equipamentos Eletronicos) 1 e otermo utilizadopara qualificar
equipamentos eletroeletronicos descartados ou obsoletos2.<br>
A definicao inclui computadores, televisores,telemoveis/celulares, entre outros dispositivos.<br>
A classificacao dos produtos por categoria pode ser encontrada no site da Comunidade Europeia 3
</p>
<p>
</p>
</body>
</html>
Pela imagem mostrada, podemos são as seguintes: • Texto em Itálico: Tag <i>. Exemplo:
observar que quando adicionada a tag <br> <html>
ocorre de forma forçada a quebra da linha • Texto em Negrito: Tag <b>. Exem- <head>
no texto. Assim, a maior diferença do uso plo: </head>
da tag <br> em relação a tag <p> é a sua <html>
<body>
função semântica para o navegador e não <h1>Residuo eletronico</h1>
<head>
apenas o espaçamento diferenciado entre <p>
</head>
<i>Residuo computacional</i>
as linhas conforme pode ser observado. <body>
tambem conhecido como
<h1>Residuo eletronico</
A identificação semântica permite Residuo eletronico ou
h1>
lixo eletronico....
ao navegador saber que aquele conteúdo <p>
</p>
que está envolvido em uma tag do tipo <b>Residuo computacional</b>
<p>
<p> é um parágrafo, enquanto que se o tambem conhecido
Origem: Wikipedia, a
como Residuo eletronico
texto apenas for inserido e adicionadas enciclopedia livre.
ou lixo eletronico....
tags do tipo <br> para fazer a sua quebra, </p>
</p>
apesar de visualmente entendermos que </body>
<p>
</html>
se tratam de parágrafos, o navegador não Origem: Wikipedia, a
terá este entendimento, provocando, assim, enciclopedia livre.
possíveis divergências de renderização e </p>
</body>
dificuldade da página ser reconhecida da
</html>
forma correta pelos mecanismos de busca.
Tags para destacar textos
Com o uso do html é possível des-
tacar um texto de quatro formas diferen-
tes: pode-se tornar um bloco de texto em
negrito, itálico, sublinhado, ou riscado. As
tags para aplicar este tipo de formatação
• Texto Sublinhado: Tag <u>. Exemplo: • Texto Riscado: Tag <s>. Exemplo: Devemos observar que estes ele-
<html> <html>
mentos de formatação também podem ser
<head> <head> aplicados de forma combinada, conforme
</head> </head> segue exemplo:
<body> <body>
<h1>Residuo eletronico</h1> <h1>Residuo eletronico</h1> <html>
<p> <p> <head>
<u>Residuo computacional</u> <s>Residuo computacional</s> </head>
tambem conhecido como tambem conhecido como <body>
Residuo eletronico ou Residuo eletronico ou <h1>Residuo eletronico</h1>
lixo eletronico.... lixo eletronico.... <p>
</p> </p> <b><i>Residuo
<p> <p> computacional</i></b>
Origem: Wikipedia, a Origem: Wikipedia, a tambem conhecido como
enciclopedia livre. enciclopedia livre. <u>Residuo eletronico
</p> </p> ou <s>lixo eletronico</s></u>
</body> </body> ...
</html> </html> </p>
<p>
Origem: Wikipedia, a
enciclopedia livre.
</p>
</body>
</html>
Tag para alterar a fonte de um texto De acordo com o que se pode observar, a tag font somente
funciona se for utilizada em conjunto com as suas propriedades.
Não existe ordem específica para inclusão dessas propriedades,
Para alterar características da fonte de um determinado
não havendo, também, necessidade de inclusão de todas as pro-
bloco de texto em uma página, deve-se aplicar a tag <font>. Essa
priedades de uma única vez. A seguir, observe o detalhamento
tag permite, através do emprego de suas propriedades, alterar
de cada uma das propriedades.
a família da fonte, bem como o seu tamanho e cor, conforme
segue no exemplo:
<html>
Face: Permite definir as fontes que podem ser aplicadas
<head> ao elemento. Pode ser aplicada mais de uma fonte, desde que o
</head> respectivo nome seja separado por vírgula;
<body>
<h1>Residuo eletronico</h1> Size: Permite definir o tamanho da fonte. Nessa proprie-
<p>
dade é aceito um valor de um a sete, sendo que o valor padrão
Residuo computacional tambem conhecido
como Residuo eletronico ou lixo eletronico.... é três;
</p>
<p> Color: Permite aplicar uma cor ao texto. Pode ser aplica-
<font size=”1” color=”red” face=”verdana”> da uma cor sólida ou uma em formato hexadecimal, conforme
Origem: Wikipedia, a enciclopedia livre. tabela 1 deste documento.
</font>
</p>
</body> Tag para inclusão de imagens em uma página
</html>
Para incluir uma imagem dentro do documento html,

deve ser empregada a tag <img>. Esta tag opera em conjunto
com algumas propriedades, as quais permitem configurar esta
imagem dentro do documento. A imagem adicionada com a
tag <img> pode ser incluída em qualquer local do documento
html como, por exemplo:
<html> São as propriedades da tag img que permitem a inclusão

<head> e gestão da imagem no local adicionado. A seguir, temos as
</head>
funções de cada uma das propriedades:
<body>
<p> Src: Esta propriedade é a responsável por permitir adi-
Residuo computacional tambem conhecido cionar a imagem a tag. Podendo ser adicionadas imagens per-
como Residuo eletronico ou lixo tencentes ao próprio site ou, então, ser adicionadas imagens
eletronico.... referenciadas de outros websites. Visto que, quando se adiciona
</p>
uma imagem do site, deve-se apenas mencionar o seu diretório,
<img src=”monitor.jpg” alt=”Monitor jogado
na rua” width=”200” height=”200”> assim como o nome, a partir da página atual, enquanto que para
<p> uma imagem referenciada de outro site, deve-se informar a url
<font size=”1” color=”red” face=”verdana”> completa da imagem. Exemplo.
</font> Alt: Esta propriedade permite adicionar um texto al-
</p>
ternativo à imagem para as situações em que a imagem não
</body>
</html> puder ser exibida. Esta propriedade é muito importante para a
acessibilidade.
Width: Permite definir em pixels a largura relativa ao

tamanho da exibição da imagem no documento. Aqui, devemos
observar que esta propriedade não altera o tamanho físico da
imagem, apenas o tamanho para a exibição. Se a imagem possuir
uma alta resolução e for exibida com um tamanho pequeno, ela
levará o mesmo tempo de carregamento, independentemente
do tamanho visualizado.
Height: Permite definir em pixels a altura relativa ao

tamanho da exibição da imagem no documento. Nesse aspecto,
devemos observar que esta propriedade <html>

não altera o tamanho físico da imagem, <head>
</head>
apenas o tamanho para a exibição. Já, se
<body>
a imagem possuir uma alta resolução e for
exibida com um tamanho pequeno, ela <p>
levará o mesmo tempo de carregamento, Residuo computacional tambem conhecido como Residuo
independentemente do tamanho visuali- eletronico ou lixo eletronico....
zado. </p>
<img src=”monitor.jpg” alt=”Monitor jogado na rua” width=”200” height=”200”>
<hr>
Tag para adicionar separação de <p>
textos em documento <font size=”1” color=”red” face=”verdana”>
</font>
Para adicionarmos uma separação </p>
de textos ou áreas em um documento, po- </body>
</html>
demos empregar a tag <hr>. Este elemento
html, normalmente, não é utilizado, mas
para o início dos nossos estudos poderá
ser útil.
Meta Tags e Caracteres Especiais Para definir o idioma principal da

página:
No html temos um elemento cha- <meta name=”language” content=”pt-
mado META. Este elemento destina-se br” />
a fornecer informações adicionais sobre o
documento. Também, para cada tipo de Para fornecer uma descrição da
informação, usamos um atributo e, as- página:
sim, há uma variedade enorme desses ele-
mentos que podem ser inseridos na seção <meta name=”description”
head da página, não havendo um limite content=”Materia sobre htm da
de elementos que podem ser inseridos e disciplina de programação web.” />
nem ordem de inserção. Alguns são de uso
quase generalizado e úteis para qualquer Nota: É recomendado o emprego
página, enquanto que outros são bastante desta tag, pois a descrição informada é exi-
específicos. bida como o descritivo exibido ao usuário,
por meio do mecanismo de busca quando
Agora serão analisados os principais a mesma for localizada por tal. Para deixar
elementos metas que podem ser inseridos com que o mecanismo de busca escolha a
em uma página web. melhor descrição, deve-se descrever esta
tag da seguinte forma:
Identificando o autor da página:
<meta name=”description” content=”none”/>
<meta name=”author” content=”Ftec
Faculdades”/>
Para atualizar a página de tempos em tempos. Até o momento, todos os códigos html dos exemplos não
possuíam acentuação de forma proposital, pois se fosse tentar
No exemplo, a atualização ocorre a cada 5 segundos: adicionar qualquer tipo de acentuação, a mesma não seria exi-
bida no documento, sendo exibido em lugar disso, um caractere
<meta http-equiv=”refresh” content=”5” /> não identificado.
Para informar palavras chaves para o mecanismo de busca:
<meta name=”keywords” content=”css, html, jvascript,

ftec” />
A seguir temos um exemplo completo, onde são aplicadas

as tags vistas. Existem duas maneiras de resolver esta situação em páginas
html. Na primeira, podemos utilizar uma tag meta, identifican-
<html>
<head> do qual página de código deve ser interpretada pelo navegador.
<title>Pagina de programacao web</title> Neste caso, o recomendado é utilizar a página utf-8. Exemplo:
<meta name=”author” content=”Ftec <html>
Faculdades” /> <head>
<meta name=”language” content=”pt-br” /> <title>Pagina de programacao web</title>
<meta name=”description” content=”Materia <meta name=”author” content=”Ftec
sobre htm da disciplina de programação Faculdades” />
web.” /> <meta name=”language” content=”pt-br” />
<meta http-equiv=”refresh” content=”5” /> <meta name=”description” content=”Materia
<meta name=”keywords” content=”css, html, sobre htm da disciplina de programação
jvascript, ftec” /> web.” />
</head> <meta http-equiv=”refresh” content=”5” />
<body> <meta name=”keywords” content=”css, html,
jvascript, ftec” />
</body> <meta http-equiv=”content type”
</html> content=”text/html” charset=”utf-8” />
</head> <html>
<body> <head>
<h1>Resíduo Eletrônico</h1> <title>Pagina de programacao web</title>
</body> <meta http-equiv=”content type”
</html> content=”text/html” charset=”utf-8” />
</head>
A segunda for- <body>
<h1>Resíduo Eletrônico</h1>
ma de inserir caracteres <p>
acentuados é através do ©<teste>
emprego de entidades </p>
html, com o intuito de </body>
codificar estes caracte- </html>
res. A vantagem do uso de entidades sobre o uso da página de
código reside apenas nos casos onde se torna necessário adicio-
nar caracteres não disponíveis no teclado, apenas na página de
código ou, então, caracteres reservados pela linguagem, como
o sinal de maior e menor (> e <). Segue uma pequena tabela de
como codificar determinadas entidades HTML, seguidas de
um exemplo de código:
Símbolo Descrição Sintaxe 1 Sintaxe 2 Neste link você poderá acessar uma lista de caracteres
© Copyright © © especiais que podem ser adicionados em uma página html.
® Marca Registrada ® ®
< Menor que < < Hyperlinks e Âncoras
> Maior que > >
& E comercial & & A internet que conhecemos atualmente, tem como uma
ç Cedilha ç ç de suas principais características a possibilidade de navegação
ã Acento ã ã entre as páginas da internet. A partir desse conceito, foi possível
criar hipertextos e interligar os mesmos, página, de forma que, se clicado sobre um determinado link, irá se mover na própria
criando, dessa forma, uma teia mundial página, posicionando o cursor no local destinado desta propriedade, por exemplo:
de informações.
<html>
O elemento utilizado para este re- <head>
<title>Pagina de programacao web</title>
curso é conhecido como elemento âncora,
<meta http-equiv=”content type” content=”text/html”
o qual destina-se a marcar um conteúdo charset=”utf-8” />
qualquer de um documento, seja ele um </head>
texto, uma imagem ou uma animação, <body>
com o qual o usuário poderá interagir, de <h1>Resíduo Eletrônico</h1>
forma que a partir desta iteração o mesmo <p>
<a href=”#destino”>Clique aqui</a>
possa navegar para um outro conteúdo na
</p>
web. Como em: <p>paragrafo 1....</p>
<p>paragrafo 2....</p>
<a href=”http://www.ftec.com.br”>Site <p>paragrafo 3....</p>
da Ftec</a> <p>paragrafo 4....</p>
<p>
No exemplo, quando clicarmos so- <a name=”destino”></a>
bre o termo “Site da Ftec”, seremos redire- </p>
</body>
cionados para o endereço web, contido na </html>
propriedade “href ”. Além da propriedade
href, existem outras propriedades, apre- No exemplo citado, quando o usuário clicar no hiperlink com o texto “Clique
sentadas a seguir: aqui”, o cursor será conduzido dentro da própria página até o local onde existe o
hiperlink com a propriedade name e com o valor “destino”.
Name: Identifica um determinado
ponto do documento que poderá ser utili- Target: Define de que forma o documento referenciado pelo hiperlink será
zado como destino de um link. Esta pro- aberto no navegador. Para esta propriedade, podem ser utilizados os seguintes valores:
priedade permite a navegação interna na
_blank: o documento é aberto em uma nova janela; conjuntos ordenados, os quais recebem uma marca de ordenação
sequencial, que pode ser alfabética, numérica ou ainda, podem
_parent: o documento é aberto na janela pai do docu- ser listas não ordenadas.
mento atual;
Uma lista ordenada é representada pela tag <ol>, enquanto
_self: o documento abre na mesma janela do documento; que uma lista não ordenada é representada pelo item <ul>. Os
itens que fazem parte de uma lista são definidos com o uso da
_top: o documento abre no corpo da janela do documento tag <li>. Exemplo de uma lista ordenada:
atual.
<html>
<html> <head>
<head> <title>Pagina de programacao web</title>
<title>Pagina de programacao web</title> <meta http-equiv=”content type”
<meta http-equiv=”content type” content=”text/html” charset=”utf-8” />
content=”text/html” charset=”utf-8” /> </head>
</head> <body>
<body> <h1>Lista de frutas</h1>
<h1>Resíduo Eletrônico</h1> <ol>
<p> <li>Maça</li>
<a href=”#destino” target=”_blank”> <li>Laranja</li>
Clique aqui</a> <li>Melância</li>
</p> </ol>
</body> </body>
</html> </html>
Listas
As listas permitem estruturar e agrupar um conjunto de

itens com características semelhantes. Estas listas podem ser
Exemplo de uma lista não ordenada: Para as listas ordenadas, pode-se optar em definir o valor
inicial da ordenação. Para isso, utilizamos a propriedade “start”,
<html> conforme pode-se observar no exemplo:
<head>
<title>Pagina de programacao web</title> <html>
<meta http-equiv=”content type” <head>
content=”text/html” charset=”utf-8” /> <title>Pagina de programacao web</title>
</head> <meta http-equiv=”content type”
<body> content=”text/html” charset=”utf-8” />
<h1>Lista de frutas</h1> </head>
<ul> <body>
<li>Maça</li> <h1>Lista de frutas</h1>
<li>Laranja</li> <ol start=”4”>
<li>Melância</li> <li>Maça</li>
</ul> <li>Laranja</li>
</body> <li>Melância</li>
</html> </ol>
</body>
</html>
Tabelas
Uma tabela é uma representação matricial de um conjunto

de dados, sendo formada por linhas e colunas. Para construir
uma tabela, emprega-se as seguintes tags:
Table: Esta tag serve de container para a construção da

tabela;
Caption: Esta tag permite definir um título para a tabela; </tr>

<tr>
<td>3</td>
Tr: Define a linha de uma tag;
<td>Carlos Silveira</td>
<td>27/08/1966</td>
Th: Define uma célula para o título de uma coluna; </tr>
</table>
Td: Define uma célula de uma coluna; </body>
</html>
<html>
<head>
<title>Pagina de programacao web</title>
<meta http-equiv=”content type”
content=”text/html” charset=”utf-8” />
</head>
<body>
<table>
<caption>Lista de alunos</caption>
<tr>
<th>Código</th>
<th>Nome</th>
<th>Data de Nascimento</th>
Além das tags apresentadas, existem diversas propriedades
</tr> que podem ser empregadas na construção de tabelas. Segue uma
<tr> lista das propriedades mais utilizadas:
<td>1</td>
<td>José Silva</td> Border: Permite definir se uma tabela deve possuir borda.
<td>12/11/1979</td> Esta propriedade pode possuir valor “0” ou “1” para desativar
</tr>
<tr>
ou ativar as bordas, respectivamente. Esta propriedade pode ser
<td>2</td> aplicada à tag table.
<td>Antonio Oliveira</td>
<td>01/01/1990</td>
<table border=”1”> </tr>

<tr> <tr>
<th>Código</th> <td>2</td>
<th>Nome</th> <td>Antonio Oliveira</td>
<th>Data de Nascimento</th> <td>01/01/1990</td>
</tr> </tr>
<tr> </table>
<td>1</td>
<td>José Silva</td> Cellspacing: Define o espaçamento em pixels entre as
<td>12/11/1979</td>
</tr>
células de uma tabela. Essa propriedade pode ser aplicada às
<tr> tag th ou td.
<td>2</td>
<td>Antonio Oliveira</td> <table border=”1” cellspacing=”10”>
<td>01/01/1990</td> <tr>
</tr> <th>Código</th>
</table <th>Nome</th>
<th>Data de Nascimento</th>
</tr>
Cellpadding: Define o espaçamento em pixels entre o
<tr>
conteúdo de uma célula e as suas bordas. Esta propriedade pode <td>1</td>
ser aplicada à tag table. <td>José Silva</td>
<td>12/11/1979</td>
<table border=”1” cellpadding=”10”> </tr>
<tr> <tr>
<th>Código</th> <td>2</td>
<th>Nome</th> <td>Antonio Oliveira</td>
<th>Data de Nascimento</th> <td>01/01/1990</td>
</tr> </tr>
<tr> </table>
<td>1</td>
<td>José Silva</td>
<td>12/11/1979</td>
Width: Define a largura da tabela em percentual. Se in- Bgcolor: Esta propriedade define a cor de fundo de uma
formado 100%, a tabela irá ocupar toda a largura do documento tabela, linha ou célula, podendo ser aplicada às tags table, tr,
no navegador. Esta propriedade pode ser aplicada na tag table th e td.
e na tag td ou th.
<table border=”1” width=”50%”>
<table border=”1” width=”50%”> <tr>
<tr> <th width=”20%”>Código</th>
<th width=”20%”>Código</th> <th width=”60%”>Nome</th>
<th width=”60%”>Nome</th> <th width=”30%”>Data de Nascimento</th>
<th width=”30%”>Data de Nascimento</th> </tr>
</tr> <tr bgcolor=”blue”>
<tr> <td>1</td>
<td>1</td> <td>José Silva</td>
<td>José Silva</td> <td>12/11/1979</td>
<td>12/11/1979</td> </tr>
</tr> <tr>
<tr> <td bgcolor=”red”>2</td>
<td>2</td> <td>Antonio Oliveira</td>
<td>Antonio Oliveira</td> <td>01/01/1990</td>
<td>01/01/1990</td> </tr>
</tr> </table>
</table>
Rowspan: Esta propriedade permite mesclar células entre Nota: As tabelas permitem, além de exibir dados em for-
linhas da tabela. O valor atribuído a ela refere-se à quantidade de mato tabular, organizar e estruturar o conteúdo de elementos
células que serão mescladas, devendo esta ser aplicada à tag td. de uma página. Dentro de uma determinada célula de tabela
podem ser adicionados quaisquer outros elementos, inclusive,
Colspan: Essa propriedade permite mesclar células en- outras tabelas. Atualmente, essa aplicação para as tabelas tem
tre colunas da tabela. O valor atribuído refere-se à quantidade sido menos utilizada, dando lugar ao conceito de sites tableless.
de células que serão mescladas, devendo esta propriedade ser
aplicada à tag td. Formulários HTML
<table border=”1”>
<tr> Em diversas situações existe a necessidade de enviar in-
<td colspan=”3”>1</td> formações da página web para o servidor, onde a mesma está
<td>4</td>
hospedada. Esta atividade está presente em situações bastante
</tr>
<tr> comuns, como, por exemplo, no cadastramento de um cliente
<td>5</td> em um e-commerce ou ainda, na própria compra de um item
<td rowspan=”3”>6</td> pela internet, que exige que a página envie para o servidor as
<td>7</td> informações relativas à compra que está sendo efetuada.
<td>8</td>
</tr>
Para ser possível utilizar este recurso, devemos utilizar
<tr>
<td>9</td> a tag form, e dentro desta tag devem ser adicionadas todas as
<td>11</td> demais tags que recebem informações do usuário. Assim, essa
<td>12</td> tag necessita de três propriedades a serem descritas:
</tr>
<tr> Name: Define o nome do formulário;
<td>13</td>
<td>15</td>
<td>16</td> Method: Define a forma de envio do formulário para o
</tr> servidor. Podem ser empregados dois valores: GET e POST.
</table> Quando empregado GET, as informações são enviadas para
o servidor através da URL da página. No caso do POST, as textos ou seleções pelo usuário. Esta tag possui a proprie-
informações são enviadas de forma oculta, garantindo mais dade type, a qual permite criar variações de tipos para
segurança para o processo de envio. este campo e também possuem a propriedade value, a
qual define um valor padrão para cada tag.
Action: Local onde deve ser inserida a url contendo o
endereço do servidor que processa a página html. • Tipo Text: Define um campo do tipo texto.
<html> <form name=”cadastro” method=”GET”

<head> action=”http://www.ftec.com.br/processa.aspx”>
<title>Pagina de programacao web</title> <input type=”text” value=”usuario”></input>
<meta http-equiv=”content type” </form>
content=”text/html” charset=”utf-8” />
</head> • Tipo Password: Define um campo do tipo password, sem
<body>
<form name=”cadastro” method=”GET”
permitir visualizar o seu conteúdo;
action=”http://www.ftec.com.br/processa.aspx”>
 <input type=”password” value=”usuario”></input>
</form> </form>
</body>
</html> • Tipo Radio: Permite selecionar uma opção dentre várias.
Para ser possível fazer esta seleção, todos os itens devem
No interior da tag form, podem ser inseridas tags que possuir o mesmo valor para a propriedade name.
permitem aos usuários adicionar informações no formulário.
Além disso, todas essas tags necessitam da propriedade name <form name=”cadastro” method=”GET” action=”http://www.
para permitir que o campo possa ser identificado no servidor. ftec.com.br/processa.aspx”>
<input type=”text” value=”usuario”></input>
<input type=”password”></input>
• Tipo Input: A tag do tipo input permite a inclusão de <input type=”radio” name=”sexo” value=”m”>Masculino</input>
<input type=”radio” name=”sexo” value=”f”>Feminino</input> • Tipo Select: Este campo permite criar uma caixa de seleção
</form> com valores definidos. Para criar os elementos de seleção
desta tag, devem ser empregadas tags do tipo option.
• Tipo Checkbox: Permite selecionar alguma opção entre
um conjunto de opções. <form name=”cadastro” method=”GET” action=”http://www.
ftec.com.br/processa.aspx”>
<form name=”cadastro” method=”GET” action=”http://www. <input type=”text” value=”usuario”></input>
ftec.com.br/processa.aspx”> <input type=”password”></input>
<input type=”text” value=”usuario”></input> <input type=”radio” name=”sexo”
<input type=”password”></input> value=”m”>Masculino</input>
<input type=”radio” name=”sexo” value=”m”>Masculino</input> <input type=”radio” name=”sexo”
<input type=”radio” name=”sexo” value=”f”>Feminino</input> value=”f”>Feminino</input>
<input type=”checkbox” value=”email”>Contato por email</input> <input type=”checkbox” value=”email”>Contato por
email</input>
<input type=”checkbox” value=”telefone”>Contato por telefone </input>
</form> <input type=”checkbox” value=”telefone”>Contato
por telefone </input>
<input type=”hidden” name=”codigo” value=”1”></
• Tipo Hidden: Permite adicionar um valor para um campo
input>
oculto; <select name=”uf”>
<form name=”cadastro” method=”GET” action=”http://www. <option>SP</option>
ftec.com.br/processa.aspx”> <option>SC</option>
<input type=”text” value=”usuario”></input> <option>RJ</option>
<input type=”password”></input> <option>RS</option>
<input type=”radio” name=”sexo” value=”m”>Masculino</input> </select>
<input type=”radio” name=”sexo” value=”f”>Feminino</input> </form>
<input type=”checkbox” value=”email”>Contato por email</input>
<input type=”checkbox” value=”telefone”>Contato
por telefone </input> • Tipo TextArea: Este campo permite incluir uma caixa
<input type=”hidden” name=”codigo” value=”1”></ de texto para digitação.
input>
</form>
<form name=”cadastro” method=”GET” action=”http://www. <form name=”cadastro” method=”GET” action=”http://www.

ftec.com.br/processa.aspx”> ftec.com.br/processa.aspx”>
<input type=”text” value=”usuario”></input> <input type=”text” value=”usuario”></input>
<input type=”password”></input> <input type=”password”></input>
<input type=”radio” name=”sexo” <input type=”radio” name=”sexo”
value=”m”>Masculino</input> value=”m”>Masculino</input>
<input type=”radio” name=”sexo” <input type=”radio” name=”sexo”
value=”f”>Feminino</input> value=”f”>Feminino</input>
<input type=”checkbox” value=”email”>Contato por <input type=”checkbox” value=”email”>Contato por
email</input> email</input>
<input type=”checkbox” value=”telefone”>Contato <input type=”checkbox” value=”telefone”>Contato
por telefone </input> por telefone </input>
<input type=”hidden” name=”codigo” value=”1”></ <input type=”hidden” name=”codigo” value=”1”></
input> input>
<select name=”uf”> <select name=”uf”>
<option>SP</option> <option>SP</option>
<option>SC</option> <option>SC</option>
<option>RJ</option> <option>RJ</option>
<option>RS</option> <option>RS</option>
</select> </select>
<textarea name=”observacoes”> <textarea name=”observacoes”>

</textarea> </textarea>
</form> <input type=”submit” value=”enviar”></input>
<input type=”reset” value=”limpar cadastro”></
• Tipo Submit: Este botão, quando clicado, envia a infor- input>
</form>
mação para o servidor;
O exemplo a seguir, ilustra um formulário completo,
• Tipo Reset: Este botão, quando clicado, limpa as infor-
estruturado com o uso de tabelas.
mações dos campos do formulário, restaurando os valores
padrões aos campos.
<html> </tr>
<head> <tr>
<title>Pagina de programacao web</title> <td>Contato</td>
<meta http-equiv=”content type” <td>
content=”text/html” charset=”utf-8” /> <input
</head> type=”checkbox”
<body> value=”email”>Contato
<form name=”cadastro” method=”GET” por email</input>
action=”http://www.ftec.com.br/processa. <input
aspx”> type=”checkbox”
<table> value=
<tr> ”telefone”> Contato por
<td>Nome:</td> telefone </input>
<td><input type=”text” </td>
value=”usuario”></input></td> </tr>
</tr> <tr>
<tr> <td>UF</td>
<td>Senha</td> <td>
<td><input <select name=”uf”>
type=”password”></input></td> <option>SP
</tr> </option>
<tr> <option>SC
<td>Sexo</td> </option>
<td> <option>RJ
<input type=”radio” </option>
name=”sexo” <option>RS
value=”m”>Masculino </option>
</input> </select>
<input type=”radio” <td>
name=”sexo” </tr>
value=”f”>Feminino <tr>
</input> <td>Observacoes</td>
</td> <td><textarea name=
”observacoes”></textarea></td> Inclusão de Elementos de Áudio e Vídeo

</tr>
</table>
<input type=”submit” value=”Enviar”></ Até alguns anos atrás, não existia uma maneira padro-
input> nizada de exibir vídeos e áudios pelo navegador. Tudo era feito
<input type=”reset” value=”Limpar”></ com plugins específicos de cada fabricante. Por exemplo, o
input>
</form>
Youtube utilizava o flash.
</body>
</html> Com o html 5, foi criada a tag vídeo, com a qual podemos
exibir vídeos de forma padronizada na web.
<video width=”320” height=”240” controls>

<source src=”movie.mp4” type=”video/mp4”>
<source src=”movie.ogg” type=”video/ogg”>
O navegador não suporta a tag video
</video>
A tag vídeo necessita da tag source, com a qual podem ser

adicionados os vídeos. No exemplo, são utilizadas mais de uma
tag source para garantir compatibilidade entre os navegadores,
pois nem todos suportam o mesmo tipo de formato de vídeo.
Além disso, existem as seguintes propriedades:
Width: Define a largura em pixels do vídeo a ser exibido;
Height: Define a altura em pixels do vídeo a ser exibido;
Controls: Se incluída esta propriedade, o vídeo libera os

controles de navegação sobre o mesmo;
Src: Define o caminho do vídeo a ser exibido;
Type: Define o tipo de codificação do vídeo exibido.
A tag áudio também foi adicionada no html 5 e permite

a inclusão de áudios de forma padronizada na web.
<audio controls>
<source src=”audio.ogg” type=”audio/ogg”>
<source src=”audio.mp3” type=”audio/mpeg”>
O navegador não suporta audio
</audio>
A tag áudio necessita da tag source, com a qual podem

ser adicionados os áudios. No exemplo anterior, são utilizadas
mais de uma tag source para garantir compatibilidade entre os
navegadores, pois nem todos suportam o mesmo tipo de formato
de áudio. Além disso, existem as seguintes propriedades:
Controls: Se incluída esta propriedade, o vídeo libera os

controles de navegação sobre o ;
Src: Define o caminho do vídeo a ser exibido;
Type: Define o tipo de codificação do vídeo exibido.

Síntese
Após termos estudado este capítulo, podemos enten-
der que:
• A linguagem HTML é uma linguagem de marcação,

não de programação, que permite criar os websites da
forma como os vemos atualmente;
• O objetivo principal do HTML é estruturar o conteúdo

das páginas, não se preocupando com a sua formatação,
deixando esta tarefa a cargo do navegador e também
da linguagem de estilo, chamada CSS;
• O emprego do HTML deve seguir a sua sintaxe, para

que ele possa ser executado corretamente pelo nave-
gador;
• Quando utilizamos HTML, devemos nos preocupar

em aplicar as tags corretamente, de acordo com a sua
estrutura e organização semântica dentro do documento;
Questões para recapitularmos!
1. Explique o que é a linguagem HTML e qual a diferença desta para a lingua-
gem de programação.
2. Quando construímos uma página web, não conseguimos construir a página

apenas com HTML. Necessitamos também de CSS e de JavaScript, de forma
que cada uma destas tecnologias possua uma função dentro da página. Com
base no material, explique qual a função do HTML dentro desse contexto.
3. Construa uma página HTML somente com as tags estruturais, execute a página
em um navegador e avalie o resultado.
4. Construa uma página HTML a partir do modelo criado na atividade anterior e

acrescente duas imagens a sua escolha. Uma destas imagens deve ser no formato
jpg e a outra em formato png. Também defina para o background da página
uma terceira imagem de sua escolha, também no formato jpg.
5. Realize uma pesquisa na internet e encontre um artigo sobre poluição sonora.

Com base no conteúdo deste arquivo, crie uma página html adequadamente
estruturada, logo, transcreva este artigo para a página aplicando as tags de
título, parágrafo, de formatação (negrito e itálico), listas, imagens e tabelas,
caso existam. Lembre-se de empregar as tags conforme a sua característica
semântica à página e não de acordo com a sua formatação. Ao concluir, salve
o arquivo, execute o mesmo no navegador e analise o resultado.
6. Crie quatro páginas html com os seguintes nomes:

• Produtos.html
• Limpeza.html
• Moveis.html
• Iluminacao.html
Na página “Produtos.html” construa um hiperlink para que permita ao usuário

acessar cada uma das três páginas criadas. Cada uma destas páginas deve conter
imagens de produtos relativos ao nome da página. Assim, temos como exmplo,
a página de limpeza, onde devem existir figuras de produtos de limpeza, em
que cada uma destas figuras deverá ser um hyperlink para a página da figura
pesquisa, no site do fabricante, daquilo que é exibido na imagem.
7. Construa uma tabela com as seguintes colunas:

• Nome
• Idade
• Data de Nascimento
• Sexo: (Masculino e Feminino)
• Rua
• Cidade
• Bairro
• Cep
• UF
• Editar
Nesta tabela adicione 10 pessoas, com dados criados a seu critério. A coluna
“Editar” deve conter um hyperlink para uma página html, chamada “formulário.
html”. Está página terá o seu conteúdo implementado na próxima atividade.
A tabela deve ter uma borda e a linha de cabeçalho deve exibir os títulos das
colunas em negrito, empregando a tag específica para destacar títulos de colunas.
8. Crie uma página chamada “formulário.html”. Esta página deve conter um for-
mulário que empregue o método de envio “Get” para o endereço http://www.
jmenzen.com.br/teste.aspx. Os campos deste formulário devem ser os campos
da tabela criada na atividade anterior. Cada um dos campos deve ser do tipo
equivalente à característica do campo. Este formulário deve ser estruturado
com os campos do formulário, um abaixo do outro, devendo ser alinhados
com o emprego de tabela. Para finalizar, o formulário deve possuir um botão
para enviar o formulário e outro botão para limpar as informações do mesmo.
9. Pesquise um vídeo na internet e faça o download do mesmo em dois formatos

de vídeo. Após, construa uma página html contendo todas as tags estruturais
e também uma tag de vídeo, na qual os dois vídeos devem ser inseridos. Esta
tag vídeo deve conter os controles de exibição.
10. Pesquise uma música no formato mp3 e faça o download da mesma. Após,
construa uma página html contendo todas as tags estruturais e também uma
tag de áudio, na qual o arquivo .mp3 deve ser inserido. Esta tag áudio deve
conter os controles sobre a música.
NOÇÕES DE
DESIGN
Neste momento, após ter aprendido HTML,
provavelmente você está ansioso por criar
web sites com uma aparência agradável aos
olhos. A partir de agora, você passará a ter
uma noção de como construir um website
com uma boa aparência e usabilidade.
Noções de Design Arquitetura de Informação o tipo de navegação do usuário que irá

acessar o site; fortalecer os mecanismos
Arquitetura de Informação é a téc- de busca dentro do próprio site para que
Web design é uma vertente do de-
nica que empregamos para dar forma a se necessário, o usuário tenha facilidade
sign gráfico voltada para a criação de we-
produtos e experiências de informação, de ao fazer suas pesquisas, principalmente
bsites e documentos para o ambiente on-
modo a suportar a facilidade de acesso ao quando o conteúdo apresentado for ex-
line, valendo-se de alguns preceitos como
conteúdo e a usabilidade. tenso; rotular e particionar o conteúdo de
arquitetura da informação, usabilidade,
maneira a tornar a navegação do usuário
acessibilidade, layout, entre outros. O ob-
Sem um bom entendimento do mais intuitiva e natural; evitar ao máximo
jetivo do design voltado para web é expor
propósito e das informações que irão ser que o usuário tenha que descer muitos
da forma mais ágil, atrativa e simples um
dispostas no site, não poderemos realizar níveis dentro do site para encontrar o que
produto ou informação aos usuários que
um bom trabalho quanto à usabilidade, deseja. O ideal é que tenhamos sempre
visitarem aquele site.
acessibilidade e ao próprio layout da página que possível 3 níveis de navegação. Por
(arte) em si. exemplo:
Boas práticas em arquitetura levam Home > Categorias de Produtos >

em conta, por exemplo: analisar como seria Detalhes de um produto
Usabilidade Memorização
A usabilidade é um atributo de qua- Depois de um longo período de

lidade de um produto que permite medir o ausência, quão facilmente os usuários
grau de facilidade que um usuário tem ao conseguem restabelecer o seu nível de
utilizar uma interface. Também é empre- proficiência?
gada para se referir ao conjunto de métodos
destinados a melhorar a utilização de um Robustez
produto ou aplicação, seja ela qual for. A
usabilidade é definida em 5 dimensões:
Quantos erros cometem os usuários,
quão graves são esses erros, e qual a faci-
Aprendizagem lidade com que conseguem se recuperar
deles?
Quão fácil é para os usuários reali-
zarem tarefas básicas no primeiro contato No caso de um website, as infor-
com a interface ou web site? mações são encontradas? O acesso a essas
informações é simples? (Note que a usa-
bilidade tem uma grande relação com a
Eficiência
arquitetura da informação).
Depois dos usuários se tornarem

Satisfação
experientes na utilização da interface ou
website, quão rápido conseguem realizar
as tarefas? Na web, a usabilidade é um fator
de sobrevivência crucial. Se um website
é difícil de utilizar, as pessoas desistem.
Se a homepage não apresenta, de forma
clara, o que a empresa tem para oferecer que tentamos tratar essas necessidades,
e o que os usuários podem fazer no site, aliadas ao objetivo de um projeto, falamos
as pessoas desistem. em acessibilidade.
Se os usuários se perdem num websi- Quando se trata de acessibilidade,

te, desistem. Se a informação contida num principalmente com relação a sites gover-
website é de difícil leitura e não responde namentais, a primeira noção que nos vem
às questões-chave dos utilizadores, eles à mente é um conjunto de ferramentas que
desistem. É irreal pensar que um usuário facilitem a navegação para pessoas com
irá ler um manual para aprender a navegar algum tipo de necessidade especial, por
em um determinado site ou plataforma. exemplo, uma pessoa cega, ou que seja
Existem numerosas alternativas online; extremamente leiga quanto ao funciona-
desistir e abandonar o site é a primeira de- mento da internet.
fesa que um usuário tem quando encontra
dificuldades de sua utilização. No entanto, acessibilidade engloba
variadas ferramentas e boas práticas pa-
ralelas a essas, empregadas no caso acima,
Acessibilidade
como o crescimento da utilização de celu-
lares para navegar na web, que necessita
Quando nós publicamos na internet de adaptação de conteúdo, visto que, se
um website, é nossa a responsabilidade tratando de um website convencional, a
atender as necessidades do usuário e que navegação é dificultada por cortar o con-
ele possa usá-lo de forma clara. Entre esses teúdo ou apresentá-lo de forma que não
usuários, é possível que existam pessoas propícia à navegação mobile. Dessa for-
com necessidades específicas, que este- ma, utilizando o design responsivo, que se
jam navegando através de um dispositivo adapta naturalmente ao tamanho de tela
móvel, ou que dispõem de uma conexão e a capacidade do dispositivo móvel do
precária com a internet. Assim, sempre usuário, acaba sendo natural que o usuário
opte, mais comumente, em retornar ao ros de colunas de texto e outros aspectos

segundo site para novas visitas. relevantes.
Outro fator importante que está li- O layout de uma página vai depen-
gado a acessibilidade é a visibilidade de der da criatividade e do conteúdo que vai
um site perante aos mecanismos de busca conter. Por esse motivo, muitas vezes o
(Google, por exemplo). Para tal, é neces- cliente dá indicações precisas ao designer,
sário um uso aprofundado de algumas para que ele possa, através da arquitetura
técnicas de programação para tornar o de informação, técnicas de usabilidade e
site mais acessível a esses mecanismos e acessibilidade, trabalhar no layout. Desse
melhorar o seu ranking nas pesquisas. modo, o layout consiste em um rascunho,
esboço ou projeto, um trabalho prévio que
Layout dá uma ideia de como será a aparência
final da página em questão. Pode ser um
desenho simples numa folha ou algo mais
Layout é uma palavra inglesa, que evoluído, quando o projeto já está em uma
significa plano, arranjo, esquema, design fase mais avançada.
ou projeto. Na área de arte gráfica, o layout
é um esboço ou rascunho que mostra a
estrutura física de uma página de um jor-
nal, revista ou página na internet (como
um blog, por exemplo). O layout engloba
elementos como texto, gráficos, imagens e
a forma como eles se encontram em um de-
terminado espaço. O layout gráfico pres-
supõe o trabalho de um designer gráfico,
que vai trabalhar no formato e números de
página, assim como suas margens, núme-
Síntese
O design adequado, seguindo os padrões, pode garantir
o sucesso de um website; assim, sempre que construirmos
um website, devemos nos lembrar das boas práticas de web
design: Arquitetura da informação, Usabilidade, Acessibi-
lidade e Layout.
1. Qual a importância da usabilidade na cons-
trução de uma página web?
2. O que influencia o desenvolvimento do layout

de uma página web?
3. Explique o motivo da acessibilidade ser um

fator importante no design de um website.
4. Qual é o relacionamento do emprego correto

das tags html quando obedecem as regras de
semântica das tags em relação a acessibilidade
das páginas web?
A LINGUAGEM
CSS
Depois de entendermos como funciona a
linguagem HTML e aprendermos sobre os
conceitos de Web Design, chegou a hora de
colocarmos tudo isso em prática através do
CSS. Neste capítulo, você aprenderá a criar
uma página web bonita e cheia de detalhes.
Conceito e de maior dificuldade na hora da manu-

color: red; tenção. Exemplo:
font-size: 10px;
Com a evolução da internet, as pá- <p style=”color:red; margin-left:20px;”>
ginas web tinham a necessidade de atrair Este é um parágrafo vermelho</p>
Forma de Aplicação e
mais atenção do usuário, de modo que ele
Precedências do CSS
obtivesse uma experiência mais satisfatória
na absorção do conteúdo apresentado, seja
Estilo Incorporado
ele qual for. Uma das peças responsáveis Como vimos, os estilos sempre de-
por trazer essa melhor visualização de vem estar associados a algum elemento Nesta forma de incluir CSS no
páginas HTML foi a linguagem CSS - do HTML. A forma como nós fizemos HTML todos os estilos são inseridos em
Cascading Style Sheets ou folhas de estiloesta associação depende do resultado que um único local da página. Estes CSSs
em camadas. queremos obter ao final do desenvolvi- devem ser incluídos sempre no cabeçalho
mento. Nós podemos aplicar o CSS de (head)1 da página HTML, dentro de uma
Por meio do CSS é possível mani- três formas, conforme veremos a seguir. TAG style. Exemplo:
pular tanto visual (a maneira como são
impressos os elementos no navegador), Estilos locais (in-line) <head>
quanto estruturalmente (como o elemento <style type=”text/css”>
se comporta em relação ao demais ele- p {
mentos da página) às propriedades dos Neste modelo, o estilo é aplica- color: red;
margin-left: 20px;
elementos HTML. A seguir vemos um do diretamente à TAG HTML e deve }
exemplo de como é a estrutura CSS e outro ser utilizado dentro do atributo HTML </style>
exemplo prático do seu uso. “style”, junto com a TAG desejada. Esta </head>
utilização deve ser evitada de modo geral,
propriedade: valor; ou ter uma utilização muito pontual, pois 1 O motivo de priorizarmos o uso do css in-page DENTRO do ca-
beçalho (head) da página é o fato de que, assim como lemos este texto,
por ser inserida diretamente na tag, não uma página HTML é lida pelo navegador de maneira descendente (de
seletor { cima para baixo), de modo que ao incluirmos o CSS no topo evitamos o
permite nenhuma reutilização, levando, chamado FOUC (flash of unstyled content - lampejo de conteúdo não
propriedade: valor;
} por exemplo, a um arquivo mais extenso estilizado). Dessa forma, evitando que o browser imprima a página na
tela, primeiramente sem estilo, para somente depois aplicar as correções e
propriedades referentes a cada elemento.
<html>
Estilo Linkado ou Externo
<head>
<link rel=”stylesheet” href=”arquivo.css”
type=”text/css”/>
Nesta forma de inclusão do CSS, todo o estilo é escrito em <style>
um ou mais arquivos (.css) externos à página HTML, sendo os div {
mesmos referenciados através da TAG <link/> no cabeçalho da background-color: #000000;
página. Esta maneira de aplicar estilos a uma página apresenta }
vantagens sobre as demais por permitir que uma mesma folha </style>
de estilo seja aplicada a diversas páginas HTML, e permitindo </head>
<body>
também que estes estilos fiquem salvos no cache2 do navegador, <div style=”background-color: #ffff00”></div>
por exemplo. </body>
</html>
<head>
<link rel=”stylesheet” href=”arquivo.css” type=
No “arquivo.css” temos:
”text/css”/>
</head>
div {
background-color: blue;
Precedência de Estilos }
Para que o browser decida qual regra irá aplicar, ele segue
As três formas de aplicação de estilos que vimos ante-
algumas regras gerais de precedência. A seguir é apresentada
riormente (in-line, in-page, externo) podem ser inclusas na
sua ordem de relevância onde, por exemplo, um estilo in-line
mesma página, referindo-se ao mesmo elemento. Quando isso
tem mais “força” que um estilo externo.
ocorre, qual das formas de aplicação irá, efetivamente, estilizar
o elemento? Exemplo:
1. Estilo In-line;
2 O cache pode ser compreendido como uma área de armazenamento onde dados ou processos, frequentemente,
utilizados são guardados para um acesso futuro mais rápido, logo, perceba que um site que você normalmente
acessa carrega mais rapidamente que um site nunca acessado. Isso se deve ao fato do cache do navegador salvar a 2. Estilo In-page;
estrutura básica das páginas que você está habituado a visitar, poupando o tempo de download delas em exibições
futuras. Ele salva os planos de fundo das páginas, principais links, arquivos utilizados pela página (.css, .js) e
diversos outros dados dela, o que torna a navegação mais rápida.
3. Folha de Estilo Externa (linkada); <p> Este é um texto em <span style=”font-style:italic”> italico </span></p>
4. Estilo padrão do navegador.3 Outra tag HTML muito importante e que ainda não mencionamos, é a tag
DIV. Essa tag tem por objetivo nos permitir a divisão do conteúdo da página em
áreas, independentes entre si. Estas áreas servem para separar, semanticamente, o
Tags adicionais de HTML para
conteúdo de acordo com o seu objetivo de negócio.
iteração com o CSS
Como vimos, nós podemos incluir

o css apenas a tags HTML. É impossível
podermos aplicar o CSS a algum elemento
que não seja um elemento HTML, porém,
em diversas situações teremos a necessida-
de de aplicar um estilo apenas para uma
parte de um parágrafo, por exemplo, e
<div>
neste caso, a tag <p>, que representa um <h3> Ultima noticia </h3>
parágrafo, contém todo o conteúdo do <p>conteúdo de um paragrafo </p>
mesmo. Para resolver este tipo de situação, </div>
existe uma tag HTML chamada “Span”,
que tem por objetivo permitir o incluso de Seletores
CSS para partes do código que não são
gerenciadas por um elemento HTML.
Quando fazemos uso de um estilo in-page ou externo na nossa página, ne-
3 Mesmo respeitando a precedência de código todo browser tem por
padrão sua própria definição de propriedades iniciais para cada elemento, cessitamos de uma forma para conciliarmos nossas regras de CSS com os elementos
o que varia de browser para browser. As propriedades iniciais do browser
são sobrepostas naturalmente por qualquer uma das 3 precedências apre- presentes na página. Isso se faz através do uso de seletores CSSs, sendo os principais:
sentadas, porém vale ressaltar que “propriedade não setada” difere de um
atributo igual a “zero” ou “none”, pois não setado remete as propriedades
iniciais do browser. Uma maneira encontrada por desenvolvedores para
contornar este problema é utilizar um arquivo css para “resetar” todas as
propriedades e torná-las iguais em todos os browsers, zerando as proprie-
dades iniciais do navegador.
SELETOR DE TIPO Para esse trecho de código apre- pre que for possível e que um seletor de
sentado, atribuímos a cor de texto azul a descendência não possua mais que 4 níveis.
todas as tags span que estão dentro de pa- Exemplo:
Um seletor de tipo combina com rágrafos (p). Sendo possível selecionarmos
qualquer instância de um determinado tipo com ainda mais especificidade, escrevendo p span {
de elemento. Veja no exemplo, que este mais elementos, como: color: blue;
}
tipo de seletor permite aplicarmos o estilo
com a própria tag. Aqui, estamos dizendo Neste exemplo, atribuímos um ta-
que todo o parágrafo terá cor vermelha. manho de fonte de 14px(pixels) a todas Se possível, opte por estes:
tags span que estão dentro de link (a),
texto span {
p { situados em parágrafos (p), dentro de uma color: blue;
color:red; tag div. }
}
div p a span { Na página teremos:
font-size: 14px;
SELETOR DESCENDENTE }
<p class=”texto”>este texto tem uma
palavra em <span>azul</span></p>
Não há um limite para esta utili- <p class=”texto”>este texto tem
Neste seletor, podemos escolher um zação, porém, o uso em demasia, tanto uma palavra em <span class=”span-
ou mais elementos que estão dentro de de seletores de tipo simples quanto de texto”>azul</span></p>
outro elemento para aplicar o estilo. Ou descendência, acaba necessitando de um
seja, que são descendentes do elemento maior processamento do navegador para
principal. organizar a página e localizar o elemento SELETOR DE ID
a ser estilizado, o que por sua vez, torna
p span { a impressão da página mais lenta. Assim,
color: blue; Aplicamos um seletor de ID a um
}
recomendamos que ao invés de utilizar
seletores de tipo em uma descendência, elemento, especificado na página, atra-
usemo-nos seletores de classe ou ID ,sem- vés do atributo ID=”nome_id”; todo ID
é único, podendo ser utilizado somente
uma vez no mesmo documento. Exemplo: “reciclável”, já que pode ser usado mais *{
de uma vez na página permitindo que se margin:0;
}
Na página temos: digite menos códigos. Exemplo:
<p id=”texto”>Meu texto com ID</p> Na página: As boas práticas nos recomendam
não atribuir muitas propriedades para este
No arquivo CSS temos: <div class=”content”> </div> tipo de seletor, pois ele também interfere
no carregamento da página; normalmen-
#texto { No arquivo CSS: te é usado para zerar margens e padding
Font-weight: bold: (espaçamento interno) dos elementos.
} .content{
width:200px; PSEUDO-CLASSES
Perceba que dentro do arquivo CSS }
a diferenciação de um seletor de ID é feita
através do caractere “#”, antes do nome Note que dentro do arquivo CSS Pseudo-classes são tipos de classes
do seletor. a diferenciação de um seletor de classe é especiais que NÃO são definidas pelo
feita pelo caractere “.” antes do nome do desenvolvedor (já são pré-definidas). São
SELETOR DE CLASSE seletor. mais utilizadas para atribuir propriedades
que destacam links (TAGs [a]) novos ou já
SELETOR UNIVERSAL visitados, para alterar as propriedades de
Aplicamos um seletor de classe a um elemento quando o cursor do mouse
todo e qualquer elemento especificado estiver sobre ele, entre outros. O seletor
na página pelo atributo class=”nome_da_ Este seletor é usado como o nome de pseudo-classe é escrito com o nome do
class”. A grande vantagem do uso de sele- sugere, para atribuir propriedades a todos elemento ou seletor + dois pontos + nome
tores de classe é que ela pode ser utilizada os elementos da página. Ele é definido por da pseudo-classe. Exemplo:
sem restrições dentro de um mesmo do- um asterisco antes das chaves que abrem e
cumento. Fazendo com que o uso de CSS, fecham a declaração. Exemplo de arquivo a:hover {
por meio de classes, torne o código mais CSS: color: blue;
}
Outras pseudo-classes de links: um link quando o mouse está sendo usados com cautela. Se valores negativos
clicado ou se pressionarmos a tecla não forem suportados pela aplicação de
• Com o seletor a:link, estilizamos “Enter”, ativando o link. usuário, eles serão convertidos para o va-
apenas os links não-visitados, ou lor mais próximo suportado (e isso pode
seja, links no seu estado normal. Unidade de Medida em CSS tornar-se desastroso para um layout).
• Com o seletor a:visited, estilizamos UNIDADE DE MEDIDA RELATIVA

apenas links visitados, ou seja, que As unidades de medida de compri-
já foram clicados. mento CSS referem-se às medidas na ho-
rizontal ou na vertical (e em sentido mais A unidade de medida relativa é
• Com o seletor a:hover, estilizamos amplo, em qualquer direção). aquela tomada em relação a uma outra
links quando o mouse está em cima medida. Folhas de Estilo em Cascata que
do mesmo. Com essa pseudo-classe O formato para declarar o valor de usam unidades de comprimento relati-
podemos fazer diversos efeitos in- uma unidade de medida CSS é um número vas são mais apropriadas para ajustes de
teressantes. Também, podendo ser com ou sem ponto decimal, podendo ser uso em diferentes tipos de mídia. (Por
aplicada a qualquer elemento, não precedido por um sinal ‘-’ (menos), sen- exemplo, de uma tela de monitor para uma
apenas em links, o que a torna ainda do o sinal ‘+’ (mais) o valor “default” e, impressora laser).
mais útil. imediatamente, seguido por uma unidade
identificadora. A unidade identificadora O valor é tomado em relação a:
• Com o seletor a:focus, estilizamos é opcional quando se declara um valor ‘0’
links quando os selecionamos com (zero) e para algumas propriedades em • em: ao tamanho da fonte (‘font-si-
o teclado, através da tecla Tab. Essa específico. ze’) herdado;
pseudo-classe é útil para estilizar
links para pessoas que possuem ha- Algumas das propriedades CSS • ex: a altura da letra x (xis) da fonte
bilidade limitada e não conseguem permitem que sejam declarados valores herdado;
utilizar o mouse, por exemplo. negativos para unidades de medida. A
adoção de valores negativos pode dificultar • px: ao dispositivo de exibição medi-
• Com o seletor a:active, estilizamos a formatação dos elementos e devem ser da, mais comumente usada);
• %: a uma medida previamente de- Assim, pixel é uma medida ligada a Estilos para Formatação de Texto
finida (normalmente relacionada ao resolução do dispositivo de exibição.
elemento pai).
Até o momento, entendemos como
UNIDADE DE MEDIDA ABSOLUTA podemos estruturar e organizar o CSS
UNIDADE DE MEDIDA – PIXEL dentro da nossa página. A partir de agora,
precisamos conhecer as propriedades do
É aquela que não está referenciada a
CSS que nos permitem aplicar formatações
A unidade de medida de compri- qualquer outra unidade e nem é herdada.
aos textos da nossa página.
mento pixel é relativa à resolução do dis- São unidades de medida de comprimento,
positivo de exibição (a tela de um monitor, definidas nos sistemas de medidas pela
por exemplo). A mais simples definição física e são conhecidos como “centímetros, Propriedade Color:
de pixel seria: polegadas etc. São indicadas para serem
usadas quando as mídias de exibição são
A propriedade color é utilizada para
Pixel é o menor elemento em um perfeitamente conhecidas.
definir uma cor para um texto. Em CSS,
dispositivo de exibição, ao qual é possível
uma cor de fonte pode ser definida de três
atribuir-se uma cor. • pt: ponto
maneiras:
Considere um dispositivo de exi- • pc: pica
• Com um valor em hexadecimal,
bição construído com uma densidade de
como #ffff00 (vermelho);
90 dpi (dpi = dots per inch = pontos por • mm: milímetro
polegada). Por definição, a referência pa-
• Com um valor em RGB, como rgb
drão para pixel é igual a um ponto no • cm: centímetro
(255,255,0) (vermelho);
dispositivo citado. Daí, pode-se concluir
que 1 pixel naquele dispositivo de exibição • in: polegada
• Com um nome, como red;
é igual a 1/90 inch = 0,28 mm.
Para uma densidade de 300 dpi 1

pixel é igual a 1/300 inch = 0,085mm.
<html> • text-align: center: centraliza o texto.

<head>
<style>
• text-align: left: alinha o texto à esquerda.
.texto-1{
color:red;
} • text-align: right: alinha o texto à direita.
.texto-2{
color:#0000ff; • text-align: justify: ajusta o texto ao espaço determinado,
} ajustando os espaços entre fontes e entre palavras.
.texto-3{
color:rgb(0,255,0);
<html>
}
<head>
</style>
<style>
</head>
.esquerda{
<body>
text-align:left;
<p class=”texto-1”>cor vermelha</p>
}
<p class=”texto-2”>hexadecimal da cor azul</p>
.central{
<p class=”texto-3”>RGB da cor vermelha</p>
text-align:center;
</body>
}
</html>
.direita{
text-align:right;
}
Propriedade Text-align: .justificado{
text-align:justify;
}
A propriedade text-align faz exatamente o que o nome </style>
</head>
sugere: alinha o texto da mesma forma que ocorre com os edi- <body>
tores de texto. Assim como na maioria dos editores de texto, <p class=”esquerda”>alnhamento a esquerda</p>
existem quatro tipos de alinhamento para textos em HTML, <p class=”central”>centralizado</p>
com CSS: <p class=”direita”>alinhamento a direita</p>
<p class=”justificado”>este paragrafo esta usando
um alinhamento justificado. Isso fara com que o texto text-transform:capitalize;

se adapte ao container onde estiver inserido }
(note como o espacamento entre as letras e </style>
palavras varia)</p> </head>
</body> <body>
</html> <p class=”texto-1”>caracteres em minusculo</p>
<p class=”texto-2”>caracteres em maiusculo</p>
<p class=”texto-3”>a primeira letra de cada
Propriedade Text-transform: palavra ser maiuscula</p>
</body>
</html>
A propriedade text-transform pode ser muito útil, princi-
palmente na elaboração de menus. Existem três tipos de trans-
formação de textos que podem ser realizadas através dessa Propriedade Letter-spacing:
propriedade CSS:
• uppercase: transforma o texto em questão para maiúsculas. Esta propriedade nos permite definir o espaçamento entre
as letras de um texto na página.
• lowercase: transforma o texto para minúsculas.
• capitalize: transforma cada primeira letra das palavras do <html>
<head>
texto em maiúscula. <style>
.texto-1{
<html> letter-spacing:-2px;
<head> }
<style> </style>
.texto-1{ </head>
text-transform:uppercade; <body>
} <p class=”texto-1”>texto com espacamento
.texto-2{ reduzido</p>
text-transform:lowercase; </body>
} </html>
.texto-3{
Propriedade Word-spacing: • h-shadow: sombra horizontal (valores positivos aplicam

a sombra à direita do texto, valores negativos aplicam a
esquerda do texto);
Como o nome sugere, essa propriedade define o espaça-
mento entre as palavras de um texto. • v-shadow: sombra vertical (valores positivos aplicam a
sombra abaixo do texto, valores negativos aplicam acima
<html> do texto);
<head>
<style>
.texto-1{
• blur: desfoque (quanto maior o valor, maior o desfoque);
word-spacing:30px;
} • color: cor da sombra;
</style>
</head> text-shadow: 2px 3px 5px rgb(0,0,0);
<body>
<p class=”texto-1”>espacamento entre palavras
ampliado</p>
</body> Propriedade Text-decoration:
</html>
Esta propriedade especifica uma decoração para o texto,

normalmente usada para sublinhar. Possui os seguintes valores:
Propriedade Text-shadow:
• none: nenhum (valor padrão de texto);
Esta propriedade permite especificarmos uma sombra • underline: sublinhado4 ;
para o texto. Ela é composta por dois valores obrigatórios e
dois valores opcionais. O valor padrão desta propriedade é none • overline: sobrelinhado;
(neste caso, sem sombra): • l ine-through: riscado.
Sintaxe: 4 Todo texto dentro de uma TAG ‘a’ (link) tem como padrão o valor sublinhado, para retirar este padrão é só
atribuir o valor none a esta propriedade.
<html> p{
<head> font-family: “Times New Roman”, Times, serif;
<style> }
.texto-1{
text-decotarion:none; No exemplo, utilizamos a família “Times New Roman5”
}
.texto-2{
a fim de aplicar esta fonte à página. Nesse caso, o navegador
text-decotarion:underline; procura nos diretórios locais pela fonte, se esta fonte não existir
} no computador do usuário, será substituída pela fonte padrão do
.texto-3{ navegador: por este motivo esta propriedade deve ser descrita,
text-decotarion:overline; sempre iniciando pela fonte desejada, seguida de uma ou mais
} fontes genéricas similares com a desejada. Garantindo, assim,
.texto-4{
text-decotarion:line-through;
que o navegador sempre chegue a um resultado, no mínimo,
} próximo ao desejado.
</style>
</head> Propriedade Font-size:
<body>
<p class=”texto-1”>texto normal</p>
<p class=”texto-2”>texto sublinhado</p>
<p class=”texto-3”>texto sobrelinhado</p>
Especifica o tamanho da fonte. Pode ser atribuído uma
<p class=”texto-4”>texto riscado</p> medida tanto relativa, quanto absoluta. Quando este valor não
</body> é setado pelo desenvolvedor acaba sendo orientado pelas pro-
</html> priedades padrões do navegador.
<html>
Propriedade Font-Family: <head>
<style>
.texto-1{
Com esta propriedade nós podemos especificar uma fa- /*Tamanho defindo pelo navegador*/
mília de fontes a ser atribuída ao documento ou determinado }
bloco de texto. Exemplo:
5 Se o nome de uma família de fonte possuir mais de uma palavra, deve ser descrito entre aspas.
.texto-2{ A propriedade font-weight pode ser atribuída numerica-

font-size:50%; /*Porcentagem em relacao ao valor mente através dos valores 100, 200, 300, 400, 500, 600, 700,
padrao do navegador*/
800, 900. O valor 400 refere-se ao estilo normal e 700 o valor
}
.texto-3{ referente a bold.
font-size:10pt; /*Tamanho definido por pontos.
10pt equivalr a 13 px aproxximadamente*/ <html>
} <head>
</style> <style>
</head> .texto-1{
<body> font-weight:bold;
<p class=”texto-1”>tamanho da fonte</p> }
<p class=”texto-2”>tamanho da fonte</p> .texto-2{
<p class=”texto-3”>tamanho da fonte </p> font-weight:400;
</body> }
</html>
</style>
</head>
Propriedade Font-weight: <body>
<p class=”texto-1”>peso da fonte em 700 ou
bold</p>
Com esta propriedade nós especificamos o peso do tipo <p class=”texto-2”>peso da fonte em 400 ou
(caracteres da fonte). Podendo ser atribuídos valores como: normal</p>
</body>
• ligther </html>
• normal
Propriedade Font-style:
• bold
• bolder Usado para alterar o estilo de renderização da fonte. Possui

três valores:
• Normal: o texto é renderizado normalmente. Fluxo de Página
• Itálico: o texto é renderizado em itálico.

O conhecimento do fluxo de página no CSS é um dos
aspectos mais importantes no desenvolvimento de bons layouts.
• Oblique: o texto é renderizado relativamente “deitado”
Trata-se de um conceito básico, porém às vezes pouco estudado
(valor similar ao itálico, porém menos suportado).
no momento de manipularmos nossos elementos html, através
<html>
de CSS.
<head>
<style> Sabemos que as páginas web são codificadas em HTML e
.texto-1{ os elementos aparecem no código em uma determinada posição.
font-style:normal; O navegador, no momento que interpreta o código HTML da
} página, vai imprimindo os elementos, na tela, de acordo com
.texto-2{
font-style:italic;
a sua ordem na página (como as palavras neste texto) e as pro-
} priedades estruturais padrão de cada TAG (como o elemento
.texto-3{ fica disposto na página).
font-style:oblique;
} A disposição padrão (display) dos elementos e a posição
</style>
destes no código resulta na visualização dos elementos de uma
</head>
<body> forma específica. Esta forma de disposição e visualização é o
<p class=”texto-1”>estilo normal</p> que chamamos de fluxo de página.
<p class=”texto-2”>estilo italico</p>
<p class=”texto-2”>estilo obliquo</p> Com relação ao fluxo da página (disposição e visualização)
</body> existem 3 tipos de elementos.
</html>
ELEMENTOS INLINE do elemento de bloco, nunca ao lado. Elementos de bloco podem

conter elementos inline e outros elementos de bloco.
Possuem a propriedade CSS display:inline; como padrão, Exemplos de elementos (TAGs) de bloco:
ocupam somente a largura necessária para exibir seu próprio
• div
conteúdo. Só podem conter informações ou outros elementos
“inline”. Diferente dos elementos nível de bloco, os elementos • h1
inline não começam em nova linha. Ficando dispostos lado a
• h2
lado, até ocuparem toda largura disponível na página.
• ul
Exemplos de elementos (TAGs) inline:
• li
• a
• p (a TAG p é inicialmente usada como um “bloco” de texto)
• img
• input ELEMENTOS DE CABEÇALHO
• label
Possuem a propriedade CSS display:none; como padrão,
• span
são definidos como elementos invisíveis, porque estão no do-
cumento, mas o usuário não os vê. Exemplos de elementos
ELEMENTOS DE BLOCO (TAGs) de bloco:
• meta
Possuem a propriedade CSS display:block; como padrão,
• link
ocupam toda largura disponível na página e criam uma linha
invisível antes e depois de si próprios. Elementos de bloco sem- • style
pre começam em nova linha. Um elemento que venha antes ou
• title
depois de um elemento de bloco é renderizado acima ou abaixo
Todo elemento presente na página pode ter sua renderi- Block: Elementos com display block sempre promovem
zação padrão alterada através da propriedade “display”, o que uma quebra de linha no f luxo da página. Um bloco contém
interfere no fluxo da página. um espaço em branco tanto em cima quanto embaixo e não
permite outros elementos HTML ao lado, exceto quando tiver
PROPRIEDADE DISPLAY sido declarado o contrário (por exemplo, declarar a propriedade
“f loat” para o elemento próximo ao bloco). São mais rígidos
que elementos inline quanto a suas dimensões, principalmente
A propriedade display determina como um elemento se quando possuírem altura e largura definidas por alguma medida
comporta no fluxo da página, assim, por meio desta propriedade, específica, o que pode ocasionar o “vazamento” do conteúdo
podemos alterar o modo de renderização padrão dos elementos para fora do bloco, ou, que o bloco corte parte do conteúdo que
descritos no fluxo da página. Exemplo: ficará escondida durante a visualização da página.
display: block; Table: Display table força o elemento a se comportar como

uma tabela html, transformando o elemento em um elemento
Os valores mais usados são: de bloco, também provocando uma quebra de linha acima e
abaixo de si mesmo. A maior diferença entre um elemento
Inline: Como mencionado anteriormente, elementos com com display table e outro com display block é que uma tabela
display inline se comportam como palavras em um arquivo sempre irá acomodar todo seu conteúdo ou elementos filhos em
de texto, colocando-se lado a lado até ocuparem toda largura seu interior. Não permitindo “vazamentos”, além disso, mesmo
disponível. Elementos inline são flexíveis quanto a sua altura e que tenha uma altura e largura definida a tabela irá crescer (se
largura, sempre forçando a visualização de TODO seu conteúdo. o conteúdo exceder seu tamanho) de acordo com a necessidade
Um elemento inline pode receber propriedades como margem de seu conteúdo.
e espaçamento interno, assim como elementos de bloco.
None: Quando atribuímos esta propriedade a um ele-
<div> mento, ou ele já a possui por padrão, ele deixa de fazer parte
<span>ESSE E NOSSO PRIMEIRO SPAN</span>
do fluxo da página, atuando como se não existisse. Um ponto
<a href=””>seguido de um link</a>
<span>esse é nosso segundo span</span> importante sobre display none:
</div>
Mesmo que um elemento esteja com display none, ele será <div class=”box-1”></div>
lido pelo navegador e influenciará o carregamento da página. <div class=”box-2”></div>
<div class=”box-2”></div>
Dessa forma, sempre que for possível remova os elementos da
</body>
página, ao invés de atribuir display none a elementos que não </html>
serão usados ou não irão influenciar na renderização da página.
Inline-Block E Inline-Table: Ambos se comportam como POSITION

elementos de bloco com relação a suas dimensões e aninhamento
(relação entre elemento pai e elemento filho), porém, coloca-se A propriedade position trabalha juntamente com proprie-
como elementos inline no fluxo da página (ou seja, na mesma dades de coordenadas (top, left, right ou bottom) para diagramar
linha do conteúdo adjacente). e também para posicionar elementos no fluxo da página. Logo,
os quatro principais valores de posicionamento são:
<html>
<head>
Position static: Este é o posicionamento padrão que o
<style> browser atribui a todos os elementos. Como o nome sugere,
div{ nada acontece ao fluxo da página; permanecendo o elemento
width:50px; height:50px; em sua posição original dentro do fluxo.
margin:0px; display:inline-table;
{ Position fixed: Quando atribuímos um valor diferente de
.box-1{ static ao posicionamento de um elemento, iremos precisar de um
background-color:red; ponto de referência de onde irão partir nossas coordenadas. No
} caso de um position fixed, o ponto de referência será o canto
.box-2{
superior esquerdo da tela. Se atribuirmos os valores que seguem:
background-color:blue;
}
.box-3{ div {
background-color:green; display: block;
} position: fixed;
</style> top:0;
</head> left:0;
<body> }
No referido exemplo, a div irá colar ao canto superior }

esquerdo da tela. Mesmo que a página seja rolada o elemento .box-2{
irá ficar fixo ao canto.
position:absolute;
top:-10px;
Position Relative: Este valor posiciona o elemento em lef:-10px;
relação a si mesmo dentro do fluxo da página; seguindo a regra }
de que todo elemento precisa de um ponto de referência para .box-3{
iniciar seu cálculo de coordenadas e, ao contrário do que muitos background-color:green;
}
pensam, esse ponto não é o ponto central do elemento, o ponto
</style>
base é o canto superior esquerdo do elemento, e ele começará a </head>
contar a partir dali. Consequentemente, pelo fato de posicionar- <body>
-se em relação a si mesmo, um elemento com position relative <div class=”box-2”></div>
se comporta de maneira similar a um position static, diferindo <div class=”box-2”></div>
somente no fato de que o position relative pode influenciar o <div class=”box-3”></div>
</body>
posicionamento de seus elementos filhos. Quando se deseja
</html>
manter o elemento em seu local de origem no fluxo da página,
não há necessidade de setar coordenadas, tendo em vista que o Position Absolute: Ao contrário de um position relative,
valor das mesmas é zero por padrão. um elemento com position absolute adota como referência o
<html> canto superior esquerdo de seu elemento pai, ou do elemento
<head> diretamente anterior a ele, e que tiver um position diferente
<style> de static, saindo do fluxo da página. Por ficar fora do fluxo da
div {
página, elementos com esse tipo de posicionamento não irão
width:50px;
height:50px; ocupar espaço dentro do elemento pai. Quando não houver
margin:0px; nenhum elemento com position setado, na árvore de elementos
position:relative; precedentes a este elemento, ele irá se orientar pelo body, mesmo
} que seja o último elemento descrito no código HTML. Só é
.box-1{ necessário setar duas coordenadas para cada elemento. Uma no
background-color:red;
eixo X (left e right) e uma no eixo Y (top e bottom).
<html> deve ser atribuída a elementos com position relative ou static.

<head> Quando dois ou mais elementos estiverem flutuando, eles irão
<style>
se acomodar lado a lado, enquanto houver espaço, prosseguindo
div {width:50px; height:50px;margin:0px;}
.box-1{ logo abaixo. Desse modo, possui três valores:
background-color:red; • left
}
.box-2{ • right
position:absolute; • none (padrão)
top:20px;
lef:20px; <html>
} <head>
.box-3{ <style>
background-color:green; div {width:50px;
} height:50px;margin:0px;float:left;}
</style> .box-1{
</head> background-color:red;
<body> }
<div class=”box-1”></div> .box-2{
<div class=”box-2”></div> background-color:blue;
<div class=”box-3”></div> }
</body> .box-3{
</html> background-color:green;
}
.box-4{
FLOAT background-color:cyan;
}
.box-5{
Float é uma propriedade que retira o elemento do flu- background-color:yellow;
xo da página e força-o a se posicionar à esquerda ou à direita }
da página, dependendo do valor setado. A propriedade float .box-6{
background-color:black;width:80px;
height:80px; <html>
float:nome; <head>
} <style>
</style> div {width:50px;
</head> height:50px;margin:0px;float:left;}
<body> .box-1{
<div class=”box-1”></div> background-color:red;
<div class=”box-4”></div> background-color:blue;
</body> background-color:green;
</html> }
.box-4{
A propriedade CLEAR é usada para controlar o com- background-color:cyan;
float:nome;
portamento dos elementos que seguem aos elementos float no clear:left;
documento. /*O estilo clear permite limpar a flutuação de um
element que vier antes o depois de determinado
Por padrão, o elemento subsequente a um float, ocupa o element, proporcionando uma especie de quebra de
espaço livre ao lado do elemento flutuado. pagina*/
}
.box-5{
A propriedade clear pode assumir os valores left, right, background-color:yellow;
both (ambos) ou none. A regra geral é: se clear for, por exem- }
plo, definido both para um box, a margem superior deste box .box-6{
será posicionada sempre abaixo da margem inferior dos boxes background-color:black;width:80px;heigh
flutuados que estejam antes dele no código (ocasionando uma t:80px;
espécie de quebra de linha). }
</style>
</head>
<body>
<div class=”box-1”></div> border: ajusta a largura, a cor e estilo da borda de todos

<div class=”box-2”></div> os lados de um elemento. Sintaxe:
<div class=”box-5”></div> propriedade: largura estilo cor;
</body> Exemplo:
</html>
border: 2px solid rgb(0,0,0);
Propriedades para Formatação de Elementos de Bloco
As definições de valores podem ser atribuídas separada-
mente para cada lado no elemento através da adição de sufixos
Assim como elementos inline, elementos de bloco podem à propriedade:
receber propriedades que irão influenciar sua apresentação e
comportamento: • border-top
• width: especifica a largura de um elemento.
• border-right
• max-width: especifica a largura máxima de um elemento.
• border-bottom
• min-width: especifica a largura mínima de um elemento.
• height: especifica a altura de um elemento . • border-left
• max-height: especifica a altura máxima de um elemento.
Os estilos de borda mais comuns são:
• min-height: especifica a altura mínima de um elemento.
• solid (borda lisa)
A largura e a altura de um elemento podem conter, ao
invés de uma medida absoluta ou uma medida relativa, o valor • dashed (tracejada)
auto. Esse valor sugere que o elemento irá tomar um tamanho
necessário para acomodar seu conteúdo. • dotted (pontilhada)
<html> margin6 : especifica uma margem para cada lado de um

<head> elemento.
<style>
div {
width:100px; padding: especifica o espaçamento interno para cada lado
height:100px; de um elemento.
margin:0px 0px 20px 20px; Essas duas propriedades seguem o mesmo padrão na hora
} de serem aplicadas a um elemento:
.box-1{
border:5px solid #ff0;
} »» podendo receber o valor auto;
.box-2{
border-bottom: 10px solid blue; »» podendo ter somente um valor, que será atribuído a todos
} os lados do elemento;
.box-3{
border-bottom: 5px solid blue;
»» podendo ter dois valores, que serão atribuídos da seguinte
border-top: 5px dashed black;
border-left: 5px dotted blue; forma; o primeiro valor para os lados superior e inferior
border-right: 5px dashed red; e, o segundo valor para os lados direito e esquerdo;
}
</style> »» podendo ter 4 valores, que serão atribuídos aos lados
</head> do elemento no sentido horário; topo, direito, inferior e
<body>
esquerdo;
<div class=”box-3”></div> »» podendo tratar cada lado separadamente através de sufixos
</body> com a propriedade border.
</html>
6 Atribuindo-se o valor “auto” para a borda esquerda e direita de um elemento ela irá, automaticamente,
centralizar na página ou no elemento pai.
<html> Background-Image: Atribui uma imagem de fundo ao

<head> elemento.
<style>
div {
<html>
width:100px;
<head>
height:100px;
<style>
.box-1{
}
width:300px;
.box-1{
height:250px;
margin:0px 0px 20px 20px;
margin:20px 10px;
}
background-color:green;
.box-2{
background-image:url(http://www.teste.
com.br/imagem.png);
margin: 20px 100px;
}
}
</style>
.box-3{
</head>
margin-left: 50px;
<body>
}
</style>
</body>
</head>
</html>
<body>
<div class=”box-2”></div> Background-Repeat: Ajusta o tipo de repetição que a
<div class=”box-3”></div> imagem de fundo usará. É possível que seja atribuída, como
</body> imagem de fundo de um elemento, uma imagem menor que o
</html> próprio elemento, isso faz com que por padrão, a imagem seja
repetida até cobrir todo fundo do elemento. Sendo possível
Background-Color: Atribui uma cor de fundo ao elemen- alterar este padrão com a respectiva propriedade:
to, cobrindo todo seu interior; usa os mesmos valores que a cor
de texto. Um background por padrão leva o valor transparente • repeat: a imagem irá repetir em ambas as direções;
na maioria dos elementos.
• repeat-x: a imagem irá repetir somente no eixo x (hori- Background-Position: Posiciona através de coordenadas
zontalmente); onde ficará a primeira aplicação de uma imagem de fundo. Ao
contrário da propriedade position, esta propriedade pega o ponto
• repeat-y: a imagem irá repetir somente no eixo y (ver- central do elemento como referência. Podendo receber valores
ticalmente); numéricos para X e Y ou apresentar os seguintes valores:
• no-repeat: a imagem não irá ser repetida. • Para o eixo x: left, center, right;
<html>
<head>
• Para o eixo Y: top, center, bottom;
<style>
div{ Para esta propriedade devem ser atribuídos valores para
width:300px; x e y. Se o valor for igual para ambos eixos, então é possível
height:250px; declarar somente um valor, como no caso do valor center ou
margin:20px 10px; uma medida numérica.
<html>
com.br/imagem.png);
<head>
}
<style>
.box-1{
div{
background-repeat:no-repeat;
width:300px;
}
height:250px;
.box-2{
margin:20px 10px;
background-repeat:repeat-x;
}
</style>
com.br/imagem.png);
</head>
background-repeat:no-repeat;
<body>
}
.box-1{
background-position:110px center;
</body>
}
</html>
.box-2{
background-position:-93px -30px;
}
</style>
</head>
<body>
</body>
</html>
Background: Esta propriedade resume todas as proprie-

dades relacionadas ao plano de fundo de um elemento. Sintaxe:
Background: url (caminho da imagem), repetição, nome

da cor, posicionamento;
Exemplo:
background url (./imagem.jpg) no-repeat #ff0 center top;

Síntese
Nesse capítulo aprendemos que:
• O emprego do CSS, de forma adequada, faz com que o HTML

seja aplicado conforme o seu objetivo: Estruturar o Web Site;
• O objetivo do CSS é aplicar a formatação ao website, en-

quanto que o html tem por objetivo estruturar o seu conteúdo
semanticamente;
• O HTML é limitado quanto aos recursos de formatação;
• O CSS provê recursos de formatação que podem ser aplicados

nas mais diversas áreas do site;
• A combinação de recursos do CSS permite criar websites

com alta qualidade visual;
• Os recursos disponibilizados pelo CSS podem ser combinados

entre os elementos da página, fornecendo recursos visuais
bastante interessantes;
• Esses recursos, quando utilizados corretamente, permitem

criar websites que funcionam em dispositivos com diversas
resoluções, fornecendo o conceito de responsividade.
1. Explique a importância do CSS na elaboração
de uma página web.
2. Cite três formas de inclusão do CSS em uma

página web e apresente qual a prioridade e pre-
cedência desta inclusão do CSS destas formas.
3. O que são seletores para o CSS. Explique a

diferença entre os seletores por classe e os se-
letores por Id.
4. Qual a diferença entre unidades de medida

fixas e relativas, citando dois exemplos de cada
uma das unidades.
5. Implemente um Div com conteúdo conforme

a seguinte imagem:
6. Crie os seletores usando CSS (desconside-
rar bordas e cores) e na sequência faça uso de
HTML para incorporá-los na página, confor-
me a representação a seguir:
7. Crie os seletores usando CSS (desconside-

rar bordas e cores) e na sequência faça uso de
HTML para incorporá-los na página, confor-
me a representação a seguir:
JAVASCRIPT
Quando você navega na internet, já deve ter se
indagado sobre como são programadas aquelas
páginas que interagem conosco, como se a página
fosse saber o que queremos fazer. A partir
de agora, vamos aprender a tornar as nossas
páginas interativas com o uso da tecnologia
JavaScript.
O JavaScript é uma linguagem de programação imple-
mentada para ser executada dentro do navegador web, para
que os programas (scripts) escritos nesta linguagem fossem
executados no próprio navegador, sem haver necessidade deste
programa passar pelo servidor. Por conta disso, o JavaScript
é uma linguagem conhecida como linguagem “client-side”.
Essa linguagem é baseada no padrão ECMAScript,

padronizada pela Ecms International, seguindo as especifi-
cações ECMS-262 e ISSO/IEC 16262.
Dentre as características e vantagens do JavaScript,

podemos citar as seguintes:
• O JavaScript é uma linguagem in- • Permite que o conteúdo das páginas

terpretada7 pelo navegador; seja criado conforme a interação do
usuário com a página;
• O JavaScript não é Java;
• Apesenta recursos para acessar ou-
• Apresenta similaridades com a lin- tros, dinamicamente, no servidor
guagem Java e C++ na sua sintaxe; (ajax);
• Apesar de ser padronizado, cada • Possui recursos para trabalhar com

navegador pode apresentar carac- expressões regulares, validações de
terísticas implementadas de forma campos, recursos de data e hora,
diferente; e manipulação de tempos, ainda,
muitos outros que serão tratados
• O JavaScript permite aumentar a neste capítulo.
iteração entre o usuário e as páginas
web; Um pouco de História
• O script pode ser incluído na própria A linguagem JavaScript foi inicial-

página html ou em arquivo próprio; mente criada pela Netscape, sendo origi-
nalmente chamada de Mocha e, poste-
• O conteúdo do script não é exibido riormente, chamada de LiveScript, sendo
para o usuário, mas pode ser facil- lançada no ano de 1995. Mais adiante, o
mente recuperado pelo usuário, pois seu nome foi rebatizado para JavaScript.
o seu código não é escondido pelo Isso se deve ao fato de que em 1995 a lin-
navegador; guagem de programação Java foi lançada
e, para aproveitar o sucesso desta lingua-
7 Linguagem Interpretada: É a linguagem de programação onde o código gem, o LiveScript passou a ser chamado
fonte é executado por um interpretador, não sendo executado diretamente
pelo sistema operacional. de JavaScript.
Rapidamente, o JavaScript obteve Dessa maneira, a linguagem JavaS- Estrutura de um Programa

uma grande aceitação como uma lingua- cript se tornou um padrão no desenvolvi- JavaScript
gem “client-side”, por conta disso, a Mi- mento para web. Entretanto, inicialmente
crosoft lançou a sua própria linguagem foi bastante denegrida pelos profissionais,
Um script criado em JavaScript pode
de scripts, sendo esta compatível com o pois o público alvo da linguagem era um
ser inserido em uma página HTML de
JavaScript. O nome desta linguagem foi público leigo. Foi somente a partir do uso
três formas: no corpo da página HTML,
JScript, a qual muitas vezes é confundida de recursos AJAX9 que o JavaScript se
no cabeçalho da página HTM ou, então,
com o próprio JavaScript, entranto, ape- consolidou e recebeu mais atenção dos
em um arquivo próprio, sendo apenas re-
sar de ser compatível com o JavaScript, profissionais. A partir disso, observou-se
ferenciado na página.
esta linguagem apresenta características uma grande proliferação de Frameworks
próprias, fazendo com que determinados e Bibliotecas JavaScript10 , além do surgi-
Para permitir uma boa separação
recursos desta não sejam compatíveis com mento de novas práticas de programação,
e identificação dos códigos do sistema,
o JavaScript. melhorando, assim, o uso do JavaScript.
manter os scripts em um arquivo separado
é sempre o padrão recomendado e que
O primeiro navegador que teve su- Atualmente, qualquer website de-
deve ser seguido, mas para fins didáticos,
porte ao JavaScript foi o navegador Netsca- senvolvido profissionalmente apresenta
serão apresentadas as três formas de uso
pe 2.0, da própria Netscape, enquanto que recursos que envolvem o uso de JavaScript.
neste material.
o JScript teve a sua primeira aparição no
navegador Internet Explorer 3.0 em 1996.
Tanto na inclusão do Script no corpo
da página como no cabeçalho é neces-
Em novembro de 1996, a Netscape
9 Ajax: Abreviatura de Asynchronous JavaScript and XML. Este termo sário inserir o script dentro da tag html
submeteu o JavaScript ao Ecma Inter- refere-se ao uso das tecnologias JavaScript, CSS, XML e Html para permitir
criação de solicitações assíncronas ao servidor, evitando a necessidade de “<script>”. Tudo o que estiver contido
nacional8 para tornar a linguagem um asubmeter o conteúdo de toda uma página e, consequentemente, carregar
dentro do bloco de código desta tag, será
padrão industrial, que resultou no padrão toda a página html no retorno. O emprego deste recurso permite a criação
de páginas mais interativas com o usuário. interpretado pelo navegador como sendo
JavaScript conhecido como ECMAScript. 10 Frameworks e Bibliotecas JavaScript: são conjuntos de funcionalidades
implementadas em JavaScript que podem ser incorporadas a uma aplicação um script JavaScript.
web, através do vínculo do arquivo JavaScript da biblioteca/framework em
questão, com a página html. Estas bibliotecas normalmente apresentam
8 Ecma Internacional: Associação fundada em 1961 dedicada a padro- objetivos específicos, como novos objetos de interface ou facilidades para
nização de sistemas de informação. Abreviação de European Computer a programação. Exemplos de framework são o Jquery, ExtJs, AngularJs e
Manufacturees Association. vários outros.
Para este tipo de inclusão dos scripts e para garantir que <HTML>
os mesmos não sejam exibidos na página, é recomendado que <HEAD>
<TITLE>Meu primeiro script</TITLE>
o script seja inserido em um bloco de comentário do HTML.
<SCRIPT LANGUAGE=”JAVASCRIPT” TYPE=”TEXT/
Isso é necessário, pois o JavaScript pode estar desabilitado no JAVASCRIPT”>
navegador ou, então, o navegador pode não possuir suporte ao 
</SCRIPT>
da página. </HEAD>
<BODY>
<HTML> </BODY>
<HEAD> </HTML>
</HEAD>
<BODY>
Para o caso da inclusão do script em um arquivo separado,
<SCRIPT LANGUAGE=”JAVASCRIPT” TYPE=”TEXT/ neste arquivo basta ser inserido o script, enquanto que na página
JAVASCRIPT”> html deve ser feita a referência a este arquivo, conforme segue
 document.write(“Olá mundo!”);
</SCRIPT> }
</BODY>
</HTML>
<HTML> esta regra, o mesmo não funcionará;

<HEAD>
• Ao final de cada linha de instrução da linguagem, deve
<SCRIPT language=”javascript” scr=”arquivo.js”></
SCRIPT> ser informado um ponto e vírgula (“;”);
</HEAD>
<BODY> • O JavaScript é uma linguagem fracamente tipada, não
</BODY> sendo necessário declarar as suas variáveis. Isso será visto
</HTML em detalhes no próximo tópico.
O primeiro bloco representa o arquivo “arquivo.js”, o Um ponto muito importante que deve ser considerado
qual contém o script JavaScript, enquanto que o segundo bloco quando se programa em JavaScript é como identificar se o script
apresenta a forma como este arquivo deve ser relacionado na funcionou corretamente ou apresentou algum problema. Existem
página HTML. diversas técnicas para identificar estas situações, entretanto,
todas estão relacionadas ao uso do Browser para identificar a
Na página HTML podem ser relacionados diversos ar- execução do mesmo.
quivos JavaScript.
Para isso, a maneira mais simples é utilizar o console do
Caso este exemplo seja executado, no momento ele não navegador para verificar as possíveis falhas do script. Logo, o
irá apresentar nada na página do navegador, pois foi criada uma código exibido terá o seguinte resultado no browser:
função JavaScript, assunto que ainda não foi apresentado.
<HTML>
Além de ser necessário sabermos o local onde o script pode <HEAD>
ser inserido no documento, existem alguns outros detalhes que <TITLE>Meu primeiro script</TITLE>
devem ser considerados para a linguagem: </HEAD>
<BODY>
<SCRIPT LANGUAGE=”JAVASCRIPT” TYPE=”TEXT/JAVASCRIPT”>
• O JavaScript é uma linguagem case sensitive, ou seja, a  Quando acessado este recurso, será exibida a seguinte

</SCRIPT> informação:
</BODY>
Neste console serão exibidas mensagens conforme a execu-

ção da nossa página. Estas mensagens nos permitem identificar
Caso o termo “document.write...” fosse escrito como
como está sendo realizada a execução da página pelo navega-
“Documento.write...”, o resultado no navegador seria apenas
dor. Caso desejemos limpar o console, devemos clicar no botão
uma página em branco. Nesse caso, possivelmente teríamos
“Limpar”, disponibilizado na tela. No caso da falha destacada
dificuldade em encontrar a falha. Para auxiliar nisso, pode-
anteriormente, temos a seguinte informação no console:
mos utilizar o console do Firefox, o qual é acessado através do
seguinte caminho:
Procure sempre utilizar o console do navegador para iden- A seguir, mostramos a tabela com os tipos de dados
tificar possíveis falhas de execução dos scripts JavaScript. possíveis de serem utilizados no JavaScript:
Tipo Descrição Exemplo
Variáveis, Atribuições e Operações
Number Permite armazenar qualquer 3.675
valor do tipo numérico, podendo 1
Um dos recursos disponíveis em todas as linguagens de ser um valor inteiro ou decimal. 3
programação é a possibilidade de armazenar uma informação String Representa uma cadeia de “esta é uma
em uma área reservada de memória. Nesse conceito, a infor- caracteres, sempre entre aspas string”
mação armazenada nesta área é identificada pelo termo “valor”, duplas (“).
enquanto que a área de memória é referenciada por nós, através
Boolean Verdadeiro ou falso True
de uma “variável”.
False
Estas variáveis podem armazenar qualquer tipo de valor, e Null Valor vazio, sem significado
no caso do JavaScript, por ser uma linguagem fracamente tipada, Object Qualquer valor associado a um
onde o tipo de informação armazenado não é explicitado como objeto
ocorre em linguagens de programação, como o Java ou C++. Function Permite armazenar uma função
em uma variável.
O tipo da variável é assumido de acordo com o valor que
é atribuído à mesma. O tipo é muito importante, pois mais <HTML>
adiante iremos perceber que determinadas operações podem ser <HEAD>
realizadas somente para determinados tipos de valor. <TITLE>Meu primeiro script</TITLE>
</HEAD>
<BODY>
No JavaScript, para utilizamos uma variável, o primeiro <SCRIPT LANGUAGE=”JAVASCRIPT” TYPE=”TEXT/
passo é declarar a mesma linguagem e, após, atribuir um valor JAVASCRIPT”>
a mesma, de acordo com a necessidade. A declaração da variável  programação, deve-se,
</SCRIPT> acima de tudo, saber
</BODY>
como atribuir valores
</HTML>
a estas variáveis.
O código anterior apresenta um exemplo de declaração
Até agora, já vimos como realizar tal atribuição pelo sinal
e uso de variáveis. A variável “nome” recebe uma string, en-
de igual (=), porém existem ainda outras formas de fazermos
quanto que a variável idade recebe um valor numérico. A partir
estas atribuições, conforme segue a tabela.
da atribuição destes valores é que a variável passa a conhecer
o seu tipo.
Ainda nesse exemplo, assim como nos outros já vistos,

percebemos que o comando “document.write” tem por objetivo Atribuição O que faz
escrever informações no navegador. Neste momento, é impor- X=y Define x com o valor de y
tante saber que tal comando aceita apenas escrita de valores X += y O mesmo que x = x + y
do tipo string, e caso algum valor do tipo numérico seja usado
X -= y O mesmo que x = x – y
com esse comando, o mesmo será, automaticamente, convertido
para uma string. X *= y O mesmo que x = x * y
X /= y O mesmo que x = x / y
Como quem renderiza a informação deste comando é o X %= y O mesmo que x = x % y
próprio navegador, então, se na string forem inseridos comandos
html, estes serão interpretados e exibidos. No exemplo citado a
Além das variáveis e atribuições, uma linguagem de pro- que outras são mais complexas. Inicialmente, serão abordadas
gramação sempre necessita que sejam realizadas operações entre técnicas simples de fazer esta interação e nos próximos tópicos
valores e variáveis. Estas operações podem ser matemáticas, serão vistas formas mais complexas e corretas de fazer isso.
lógicas ou envolvendo caracteres (strings) ou datas. Para um
bom entendimento, observe a lista de operações matemáticas Para obtermos uma informação do usuário, podemos uti-
que podem ser feitas pelo JavaScript. lizar o “prompt”. Através deste, é possível que o usuário informe
um valor qualquer que possa ser utilizado no script.
Operador O que faz
X + y (numérico) Soma x e y Um aspecto importante que deve ser considerado, é que
qualquer informação obtida da interface com o usuário sempre
X + y (strings) Contatena x e y. Exemplo: x = “Joao”, y = “
será do tipo caractere (strings). Caso, desejemos utilizar esta
Pedro”. X + y = “Joao” + “ Pedro” = “Joao
informação como um valor numérico, a mesma deve ser con-
Pedro”.
vertida para número, por meio de uma função específica.
X-y Subtrai y de x
X*y Multiplica x e y <HTML>
<HEAD>
X/y Divide x e y <TITLE>Meu primeiro script</TITLE>
X%y Resto da divisão de x e y </HEAD>
<BODY>
X++, ++x Incrementa x em um. <SCRIPT LANGUAGE=”JAVASCRIPT” TYPE=”TEXT/
X--. --x Decrementa x em um. JAVASCRIPT”>
 iteração em websites com o usuário, todavia, ela deve ser uti-
</SCRIPT> lizada durante o processo de desenvolvimento, a fim de que o
programador possa verificar se a execução do script está correta.
Ainda, com possibilidade de ser utilizada como uma espécie de
auxiliar para a depuração do código fonte.
<HTML>
<HEAD>
</HEAD>
Após o usuário informar o nome e clicar sobre o botão <BODY>
“OK”, o valor informado será atribuído a variável “nome”. Caso <SCRIPT LANGUAGE=”JAVASCRIPT” TYPE=”TEXT/
seja clicado no botão “Cancelar”, o valor retornado para a va- JAVASCRIPT”>
riável será “null”. 
fechada, ou então, podemos utilizar o comando “document. </SCRIPT>
write”, que, como visto anteriormente, tem a função de escrever </BODY>
</HTML>
Comandos Condicionais e Expressões Comparação O que faz

X == y Retorna verdadeiro se x e y são iguais
Os comandos condicionais são comandos que permitem X != y Retorna verdadeiro se x e y não são iguais
que um determinado bloco de código seja executado somente
X>y Retorna verdadeiro se x é maior que y
se houver uma determinada condição que permita a sua exe-
cução. Esta condição sempre será uma expressão lógica, a qual X >=y Retorna verdadeiro se x é maior que ou igual a y
irá retornar um resultado que poderá ser verdadeiro ou falso. X<y Retorna verdadeiro se x é menor que y
X <= y Retorna verdadeiro se x é menor que ou igual a y
No JavaScript o comando condicional mais comum é o
“if ” (SE), que apresenta a seguinte sintaxe: X && y Retorna verdadeiro se x e y são ambas
verdadeiras
if (expressão) X || y Retorna verdadeiro se x ou y é verdadeira
{
!x Retorna verdadeiro se x é falsa
//Codigo executado quando a expressão for verdadeira
} <HTML>
Else <HEAD>
{ <TITLE>Meu script de comparacao</TITLE>
//Codigo executado quando a expressão for falsa </HEAD>
} <BODY>
Uma expressão lógica é uma expressão que permite a re- JAVASCRIPT”>
alização de operações de comparação entre outras expressões,  Feira”;
</SCRIPT> break;
</BODY> case 2:
</HTML> diaPorExtensao = “Terça Feira”;
break;
Outro comando condicional presente no JavaScript é o case 3:
“switch”. Com este comando, podemos selecionar uma operação diaPorExtensao = “Quarta Feira”;
a partir de diversas possibilidades. Adiante, apresentamos um break;
exemplo do uso do comando switch para identificar qual é o case 4:
dia da semana, de acordo com o seu número. diaPorExtensao = “Quinta Feira”;
break;
<HTML> case 5:
<HEAD> diaPorExtensao = “Sexta Feira”;
<TITLE>Meu script de comparacao</TITLE> break;
</HEAD> case 6:
<BODY> diaPorExtensao = “Sábado”;
<SCRIPT LANGUAGE=”JAVASCRIPT” TYPE=”TEXT/ break;
JAVASCRIPT”> default:

diaDaSemana = prompt(“Informe o dia da </SCRIPT>
semana”); </BODY>
</HTML>
Estruturas de Repetição <HTML>

<HEAD>
<TITLE>Script de Repeticao</TITLE>
Comandos de repetição são utilizados para repetir uma </HEAD>
determinada parte de código do script em um número finito <BODY>
de vezes; para que uma estrutura de repetição possa ser criada, <SCRIPT LANGUAGE=”JAVASCRIPT” TYPE=”TEXT/
JAVASCRIPT”>
ela sempre necessita de três informações:  
</SCRIPT>
• Uma função deve ter um único objetivo (Se a função deve
</HEAD>
<BODY> fazer uma soma, ela não deve fazer uma multiplicação ou
<script> uma média além da soma);
var retorno;
• Por convenção, o nome das funções sempre deve iniciar
//Retorna da funcao somar atribuido a com a primeira letra maiúscula, sem o uso de underline
variavel retorno
(“_”) para separar nomes compostos. Ainda, para os nomes
retorno = Somar(2,3);
compostos, cada novo nome deve ter a sua inicial mai-
//Exibicao da variavel retorno atraves da úscula. Exemplo de nome de função: CalcularImposto,
funcao ExibeAlerta... ValidarCpf, ...;
ExibeAlertaParametro(retorno);
</script> • O nome da função sempre deve ter um verbo e refletir
</BODY>
sobre o objetivo da função.
</HTML>
O código de exemplo da página anterior mostra três fun- Orientação a Objetos em JavaScript
ções que foram criadas no cabeçalho do script. É importante
perceber que apenas uma função criada não executa processa- Orientação a objetos é um paradigma de programação,
mento algum. Ela somente irá executar processamento a partir baseado na composição e interação de objetos para formar o
do momento em que for chamada pelo script. Ainda no exemplo programa. Assim, um objeto pode ser entendido como uma
anterior, podemos perceber que as funções criadas foram cha- abstração computacional de algo real. Exemplos de objetos
madas no corpo da página html através de outro script. podem ser um monitor, uma caneta, um cliente, um pedido,
uma página html, etc.
Funções devem ser utilizadas de forma massiva nos siste-
mas para tornar o código dos mesmos mais organizado e legível,
Cada objeto é formado por propriedades e métodos. As
entretanto, deve-se sempre seguir algumas regras no momento
propriedades definem as características de um objeto, enquanto
da criação da função:
que os métodos definem as ações de um objeto. Como exemplo, Objeto Descrição

podemos citar um monitor, visto que ele pode possuir como
Documet Objeto que armazena as características e
propriedades o tamanho, a cor, a resolução, etc. Por outro lado,
métodos relacionados com a página html.
também pode possuir como método a sua capacidade de ligar,
desligar, alterar o brilho, alterar a nitidez, etc. Window Este objeto representa uma janela do navegador
que possui uma página aberta.
A descrição de um objeto em uma linguagem de progra- Date Objeto que permite obter a data atual e também
mação é definida através de uma classe, enquanto que o objeto realizar operações com datas.
em si é a criação desta classe em memória para que ela possa Array O objeto Array é utilizado para armazenar
ser utilizada durante o programa. múltiplos valores em uma única variável.
Nem todas as linguagens são orientadas a objetos, entre- Style O objeto Style permite o acesso às propriedades
tanto, todas as linguagens modernas e atuais implementam os CSS de um determinado objeto html.
conceitos de orientação a objetos, inclusive o JavaScript. Math Objeto utilizado para trabalhar com funções
matemáticas.
Nesse curso, não iremos criar objetos próprios para serem
utilizados, contudo, iremos utilizar objetos que já são criados String Objeto que permite armazenar uma cadeia de
pelo próprio JavaScript. caracteres e também realizar operações sobre
strings.
No JavaScript, para acessarmos as propriedades e métodos XmlHttpRequest Este objeto permite comunicação assíncrona
de um objeto utilizamos o ponto (.) ao lado direito do objeto com o servidor através do uso do javascript. Com
em questão. Um exemplo de objeto é o próprio “document”, isso, é possível enviar e receber informações do
o qual já foi utilizado anteriormente. Assim, quando estamos servidor sem a necessidade de recarregar toda a
utilizando o comando “document.write()” estamos utilizando página.
o objeto “document”, o qual representa o documento html,
também estamos utilizando o seu método “write”, o qual tem
a capacidade de escrever aquilo que passamos para ele no cor-
po do documento. A seguir, apresentamos uma tabela com os
principais objetos do JavaScript:
Eventos <HTML>
<HEAD>
<TITLE>Meu primeiro evento</TITLE>
Eventos são ações executadas mediante determinada ati- <SCRIPT LANGUAGE=”JAVASCRIPT” TYPE=”TEXT/
vidade executada pelo usuário ou pelo próprio sistema. Estes JAVASCRIPT”>
eventos podem ser disparados quando o usuário clicar sobre um 
programa execute algum procedimento sempre que o evento </SCRIPT>
</HEAD>
for diasparado. <BODY>
<FORM id=”cadastro”>
Um exemplo disso, é disparar uma mensagem quando <INPUT type=”BUTTON” id=”bt1” value=”Clicar”
o usuário clicar sobre um botão, ou então alterar informações onClick=”exibeAlerta()”>
da tela conforme o usuário for deslocando o cursor do mouse </FORM>
sobre a mesma. </BODY>
</HTML>
Os eventos gerados pelo JavaScript podem ser capturados

O exemplo citado apresenta o Handler “onClick”, de
pelo uso de Handlers, os quais representam o evento no código,
forma que quando for clicado no botão será executada a função
permitindo fazer uma associação do handler com a função a
“exibeAlerta”.
ser executada.
A tabela seguinte apresenta diversos handlers que podem
ser empregados em um script JavaScript.
Uma situação muito importante, que precisa ser conside-

rada quanto ao uso de JavaScript, e que pode ser resolvida com
o uso de eventos, é o caso de quando o script precisa acessar um
Handler Tipo de O que trata recurso html que ainda não tenha sido processado.
Objeto
onAbort Janela O usuário encerrou o carregamento da Esta situação acontece, porque tanto o HTML como o
página. JavaScript são linguagens processadas e, por isso, se um script
onBlur Janela, O usuário deixou o objeto. tentar acessar um recurso que ainda não tenha sido interpretado
formulário pelo navegador, este irá retornar uma falha de execução. Dessa
onChange Formulário O usuário alterou o objeto. forma, o exemplo de script a seguir não funcionará.
onClick Mouse, O usuário clicou em um objeto. <HTML>
formulário <HEAD>
onError Janela O script encontrou um erro. <TITLE>Meu primeiro evento</TITLE>
onfocus Janela, O usuário tornou um objeto ativo. JAVASCRIPT”>
formulário 
onMouseover Mouse O cursor se deslocou sobre o objeto. </SCRIPT>
</HEAD>
onMouseout Mouse O cursor se deslocou para fora de um
<BODY>
objeto. <div id=”objetodiv”>
onSelect Formulário O usuário selecionou o conteúdo de um </div>
objeto. </BODY>
</HTML>
onSubmit Formulário O usuário enviou um formulário.
onUnload Janela O usuário saiu da janela. Este código deveria escrever o texto: “conteúdo...”, no
navegador, quando a página fosse carregada, porém, isso não
irá acontecer, pois a div com id, chamada “objetodiv”, será
carregada somente depois do script já ter sido executado. Isso Aplicação de CSS com JavaScript
acontece, porque o script está acima do local de criação da div.
Já, o seguinte exemplo irá funcionar corretamente.
Conforme foi visto no capítulo anterior, a formatação de
<HTML> uma página html não é feita pelo html, mas sim pelo CSS. Até
<HEAD> o momento, foi apresentada apenas uma maneira de inserir CSS
<TITLE>Meu primeiro evento</TITLE> em uma página: Definindo a estrutura do CSS e vinculando a
<SCRIPT LANGUAGE=”JAVASCRIPT” TYPE=”TEXT/ mesma a um determinado elemento, seja através do CSS in-line,
JAVASCRIPT”> incorporado ou linkado. Nessas situações, o CSS sempre tem a
 podemos inserir o CSS de forma dinâmica na página, criando
</SCRIPT> efeitos bastante interessantes em uma página, principalmente
</HEAD>
quando o seu uso estiver associado a captura de eventos em
<BODY onload=”executa()”>
<div id=”objetodiv”> JavaScript. Para utilizar CSS com JavaScript, devemos utilizar
</div> o objeto “style” associado ao elemento html em questão.
</BODY>
</HTML> O objeto “style” apresenta propriedades que são próprias
do CSS. A seguir temos o exemplo de uso deste objeto.
Este exemplo funcionará, visto que a escrita do conteúdo
está encapsulada em uma função, logo, essa função somente será <html>
executada quando o evento “onLoad” do corpo da página for <head>
disparado. O evento “onLoad” é disparado somente depois que <script type=”text/javascript”
language=”javascript”>
todo o conteúdo da página html terminar de ser interpretado e 
</script>
</head>
<body onload=”inicializa()”>
<div id=”quadrado”></div>
</body>
</html>
Síntese
Neste capítulo aprendemos sobre o JavaScript, sua história
e como ele pode ser utilizado nas páginas, com o objetivo de am-
pliar as funcionalidades das mesmas. Desse modo, aprendemos
que o JavaScript surgiu com a empresa Netscape, não possuindo
relação com a linguagem Java; bem como, o mesmo é utilizado
para proporcionar maior interação entre as páginas e o usuário;
Aprendemos, também, sobre a estrutura do JavaScript, a

qual apresenta os seguintes detalhes:
• A linguagem é padronizada, mas sempre interpretada pelo

browser;
• A linguagem de programação é fracamente tipada;
• Possui as mesmas estruturas de repetição, condições e ex-

pressões de qualquer linguagem de programação moderna;
Além disso, vimos a interação existente entre o JavaScript

e os elementos Html e CSS. Assim, com o JavaScript é possível
acessar as estruturas de CSS e Html da página modificando o
seu conteúdo durante a própria navegação. Já, o JavaScript nos
permite inclusive criar elementos em tempo de execução e não
apenas modificar os mesmos.
Questões para
recapitularmos!
1. Por que, apesar do Java Script ser um
padrão aberto, as funcionalidades
nem sempre funcionam da mesma
forma em diferentes navegadores?
2. Construa um script Java Script que

solicite, através do prompt, o nome
do usuário e, após, exiba uma men-
sagem de boas-vindas contendo o
nome do usuário na própria página
html.
3. Construa uma página html com

dois campos de input que permi-
tem ao usuário inserir um número
de colunas e, também outro campo
que permita inserir um número de
linhas. A partir desta informação,
construa um script Java Script que
desenhe uma tabela html de forma
dinâmica, com o número de linhas
e colunas relativas a informação di-
gitada pelo usuário.
4. Pesquise na internet o algoritmo
utilizado para validar um núme-
ro de cpf. Com base na pesquisa,
construa um script Java Script para
implementar esta regra de validação.
Logo, construa uma página Html
com um campo onde possa ser in-
formado um número de cpf e aplique
o script criado neste campo para
verificar se o cpf informado é válido.
5. Crie um formulário html com os

seguintes campos:
• Nome;
• Idade;
• Telefone;
• E-mail;
No evento de submit deste formu-

lário construa um script java script para
tornar o campo “Nome” e “E-mail” obri-
gatórios.
RECURSOS
AVANÇADOS DO
JAVASCRIPT
Agora que entendemos como programar com
JavaScript em uma página web, chegou o
momento de percebermos todo o potencial que
esta linguagem possui, demonstrando por que
ela é uma das linguagens de programação mais
utilizadas no mundo atual.
DOM e Manipulação de Elementos pode ser realizado de diversas formas através do uso de métodos do objeto “docu-
ment”, conforme veremos a seguir:
DOM é a sigla em inglês para Do-
document.getElementById(“Nome do id”): Esse método retorna um objeto da
cument Object Model. Este objeto de
árvore DOM, conforme o id fornecido para o mesmo. O objeto retornado pode ter as
modelo de documento define uma hie-
suas propriedades alteradas de acordo com a sua necessidade. Como exemplo, temos:
rarquia dos elementos html de forma que
os mesmos possuam um relacionamento, <html>
o qual pode ser manipulado através do <head>
Java Script. O relacionamento destes ob- <script type=”text/javascript” language=”javascript”>
jetos forma uma árvore de relacionamen- function Executar()
tos conhecida como árvore DOM, como {
exemplo, temos: var objeto = document.getElementById(“quadrado”);

objeto.style.position = “absolute”;
 }
<html> </script>
<head> </head>
<title>My Document</title> <body onLoad=”executar()”>
</head> <div id=”quadrado”></div>
<body> </body>
<h1>Header</h1> </html>
<p>
Paragraph
</p> Nesse modelo, estamos obtendo a div de id “quadrado” e alterando a proprie-
</body> dade CSS“position” através do JavaScript.
</html>
document.getElementsByTagName(“Nome da tag”): Esse método retorna
Através do Java Script podemos ma- um array de objetos da árvore DOM de acordo com o nome da tag fornecido para o
nipular o conteúdo desta árvore de forma mesmo. Da mesma forma que o método anterior, podemos alterar as propriedades
dinâmica. Tal processo de manipulação de todos os elementos retornados pelo array. Exemplo:
<html>
<head>
<script type=”text/javascript”
function executar()
{
var objeto = document.
getElementsByTagName(“p”);
var i;

for (i=0;i<objeto.length;i++)
{
alert(objeto[i].innerHTML);
}
}
</script>
</head>
<body onLoad=”executar()”>
<p>Paragrafo 1...</p>
</body>
</html>
Nesse exemplo estão sendo selecionados todos os pará-

grafos e, através de um laço no vetor retornado, é exibido o
conteúdo de cada um dos parágrafos.
document.getElementsByName(“Valor da propriedade
Name”): Esse método retorna um array de objetos da árvore
DOM, de acordo com o nome do elemento. Assim, da mesma
forma que o método anterior, podemos alterar as propriedades document.getElementsByClassName(“Nome da classe”):

de todos os elementos retornados pelo array. Exemplo: Esse método retorna um array de objetos da árvore DOM,
conforme a classe atribuída ao elemento. Da mesma forma que
<html> o método anterior, podemos alterar as propriedades de todos
<head> os elementos retornados pelo array. Exemplo:
<html>
function executar()
<head>
{
getElementsByName(“par”);
function executar()
var i;
{

getElementsByClassName(“p1”);
{
var i;

}
}
{
</script>
</head>
}
}
<p name=”par”>Paragrafo 1...</p>
</script>
<p name=”par”>Paragrafo 2...</p>
</head>
</body>
<p class=”p1”>Paragrafo 1...</p>
</html>
</body>
</html>
Nesse exemplo, serão retornados apenas os elementos que objeto.activeElement: Esta propriedade retorna o elemento
possuírem a classe de nome “p1” para o array, já, o elemento da árvore DOM que está selecionado no momento. Exemplo:
com classe “p2”, não será considerado.
<html>
objeto.innerHTML: Essa propriedade permite aplicar <head>
um conteúdo textual e de html a um determinado elemento.
Por exemplo, podemos definir o conteúdo de uma DIV dina- function AchaElemento()
micamente através desta propriedade. No entanto, devemos {
observar que esta propriedade existe apenas para os elementos var objeto = document.
que permitem a inclusão de conteúdo html. Exemplo: activeElement;

<html> alert(“O elemento ativo: id = “
<head> + objeto.id);
<script type=”text/javascript” }
language=”javascript”> </script>
function executar() </head>
{ <body>
var objeto = document. <input type=”text” id=”ele1”
getElementsById(“elemento”); onfocus=”AchaElemento()”></input>
<input type=”text” id=”ele2”
objeto.innerHTML = “<b>Um texto onfocus=”AchaElemento()”></input>
dinamico</b>”; <input type=”text” id=”ele3”
} onfocus=”AchaElemento()”></input>
</script> <input type=”button” id=”botao”
</head> value=”Clique aqui”
<body onLoad=”executar()”> onclick=”AchaElemento()”></input>
<div id=”elemento”></div> </body>
</body> </html>
</html>
document.hasFocus: Esta propriedade permite identificar </body>

o documento ou qualquer elemento dentro do mesmo, possuindo </html>
foco no momento. Além disso, essa propriedade sempre retor-
nará um valor booleano. A propriedade “createElement” cria, dinamicamente, um
elemento HTML, enquanto que o método “createTextNode”
Ademais, podemos manipular a árvore DOM com outras cria, também de forma dinâmica, um elemento de tipo texto,
propriedades as quais permite adicionar, selecionar e remover como por exemplo um texto de parágrafo, um conteúdo de uma
elementos da árvore de forma dinâmica. Adiante, será apre- célula, etc. Nesse caso, foi criado um parágrafo (tag p) e um
sentado um exemplo de código JavaScript, o qual realiza estas conteúdo para este parágrafo (texto “conteúdo do parágrafo”).
operações. O próximo passo será associar o conteúdo do parágrafo com o
próprio parágrafo, pois no momento foram apenas criados os
<html> elementos. Isso pode ser feito através do método “appendChild”,
<head> aplicado no parágrafo criado. Dessa forma, o conteúdo estará
<script type=”text/javascript” sendo associado ao mesmo. Ao final de todo o processo, o pa-
language=”javascript”> rágrafo criado estará sendo associado à página html através do
function CarregaDinamicamente()
{
método “appendChild”, aplicado ao corpo da página.
var novoParagrafo = document.
createElement(“p”); Funções Anônimas
var conteudo = document.
createTextNode(“conteudo do paragrafo”);
O JavaScript, além de ser uma linguagem com carac-
terísticas de orientação a objetos, também é uma linguagem
novoParagrafo.appendChild(conteudo);

funcional, onde podem ser atribuídas funções para a execução
document.getElementsByTagName(“body”)[ de cada regra do sistema. Para garantir este título a linguagem,
0].appendChild(novoParagrafo); existe um recurso conhecido como função anônima.
}
</script> Uma função anônima permite que a mesma seja criada
</head>
sem um nome e que a possa ser atribuída a uma variável como se
<body onLoad=”CarregaDinamicamente()”>
fosse um objeto qualquer. Estas funções podem ser definidas em Quando executada essa função, o sistema irá exibir uma
qualquer local no código Java Script, ainda permitem proteger mensagem com o valor “5”, pois quando a variável “obj” for uti-
variáveis contra o mal uso. Exemplo de uma função anônima: lizada, o seu comportamento será a execução da função criada
e atribuída à variável.
<html>
<head> Um outro exemplo de uso de funções anônimas é o de
atribuir uma função de forma dinâmica a um evento de objetos.
var obj = (function() { Dessa maneira, quando criamos um objeto, em diversos casos
temos a necessidade de atribuir um evento e ao mesmo tempo
var a, b, c; uma função. Para realizar esta ação, podemos fazer da seguinte
a = 2; forma:
b = 3;
c = a + b; <html>
<head>
return c; <script type=”text/javascript”
})(); language=”javascript”>

function ExecutaFuncao() function ExecutaFuncao()
{ {
alert(obj); var botao = document.
} createElement(“button”);
botao.style.width=”100px”;
</script> botao.style.height=”100px”;
</head>
<body onLoad=”ExecutaFuncao()”> botao.onclick = function (){
alert(“cliquei no botao”);
</body> };
</html>
document.getElementsByTagName(“body”)
[0].appendChild(botao);
}
</script> linhas de execução independentes da linha de execução padrão

</head> do programa. Ou seja, é possível executar diversas ações ao
<body onLoad=”ExecutaFuncao()”>
mesmo tempo. Isso pode ser útil, por exemplo, nos casos onde é

</body> preciso exibir a hora atual, sendo incrementada a cada segundo,
</html> enquanto é realizada a navegação na página com o uso de outras
rotinas também em javascript.
Nesse exemplo, criamos um botão e, ao mesmo foi atribu-
ída uma função anônima para que quando o botão for clicado, setTimeOut:
logo será exibida uma mensagem de alerta.
Sintaxe: setTimeout(função, tempo);
Interagindo com o Tempo
Função: É a função que será executada apenas uma vez
conforme o intervalo de tempo;
No JavaScript é possível programarmos a execução de
uma determinada função após um determinado tempo, o qual Tempo: Intervalo de tempo em milissegundos, o qual
é especificado em milissegundos (1000 milissegundos = 1 se- define o momento em que a função será executada.
gundo). Esta função pode ser programada para ser executada
apenas uma vez ou então, pode ser executada em intervalos de É importante observar que este intervalo de tempo é ini-
tempo pré-determinados em milissegundos até ser solicitada a ciado no momento em que a rotina é chamada pelo javascript.
sua interrupção. Exemplo:
Para executar o código javascript somente uma vez, deve <html>

ser empregada a função “setTimeout”. Para executar o código <head>
<script>
diversas vezes, deve ser utilizada a função “setInterval” para function carrega()
iniciar a sua execução e a função “clearInterval” para concluir {
a execução. setTimeout(function(){
var p = document
O uso deste tipo de função permite ao programador criar .getElementById(“paragrafo”);
p.innerHTML = “Ola Mundo”; Sintaxe: clearInterval(valor);

},2000);
}
Valor: Valor retornado pela rotina setInterval;
</script>

</head> Este script vai escrever o termo “Ola Mundo”, de forma
<body onload=”carrega()”> repetida, e a cada segundo, até que o usuário clique no botão
<p id=”paragrafo”></p> “Fim”.
</body>
</html> <html>
<head>
Nesse exemplo, o sistema irá escrever “Ola Mundo” dois <script>
segundos depois da página ser carregada no navegador. var linhaExecucao;

function inicio()
setInterval e clearInterval: {
linhaExecucao =
Estas duas rotinas funcionam em conjunto. A rotina setIn- setInterval(function(){
terval inicia a execução de uma rotina repetindo a mesma a cada var p = document.
intervalo informado e retornando um valor, indicando a linha getElementById(“paragrafo”);
de execução criada. Para que seja possível parar esta execução, p.innerHTML += “Ola Mundo<br>”;
},1000);
é necessário utilizar a função clearInterval, passando por parâ- }
metro o valor retornado anteriormente pela função setInterval.
function finaliza()
Sintaxe: setInterval(função, tempo); {
clearInterval(linhaExecucao);
}
Função: código a ser executado a cada período;
</script>

Tempo: tempo para repetição da execução; </head>
<body>
<input type=”button” onclick=”inicio()” value=”Inicio”>

<html>
</input> <head>
<script>
<input type=”button” onclick=”finaliza()” value=”Fim”>
</input>
<p id=”paragrafo”></p> function posiciona()
</body> {
</html> navigator.geolocation.
getCurrentPosition(showPosition);
}
Rotinas de Geolocalização
function showPosition(position) {
var latlon = position.coords.
Com o HTML5 é possível utilizar a API de Geolocali- latitude + “,” +
zação, a qual permite obtermos informações sobre a localização position.coords.longitude;
atual, como latitude, longitude, altura, velocidade de movimen-
tação, entre outras funcionalidades. var url = “http://maps.google.
com/maps?q=” + latlon;

Essa API utilizará recursos de GPS ou triangulação, window.location = url;
conforme a disponibilidade dos mesmos, sendo que inicialmente }
sempre será utilizado triangulação, pelo fato de ser mais rápido </script>
para o browser obter esta informação, melhorando o desempenho
da aplicação. Porém, a tendência da localização por triangulação </head>
é ser menos precisa que a do GPS. <body onload=”posiciona()”>
</body>
Para ser possível utilizar a API de geolocalização é neces- </html>
sário aceitar a pergunta do navegador, que solicita a obtenção
das informações de localização. Exemplo:
Substituindo os Cookies • removeItem(chave): exclui um valor do Storage;
• clear(): limpa o storage.

Como vimos anteriormente, os cookies são uma maneira
de salvar informação no navegador, entretanto, esta maneira
A diferença entre os dois é que o sessionStorage apenas
de armazenar informação possui limitações de quantidade de
armazena os dados durante a sessão do usuário, caso ele feche o
informação e, também, apresenta dificuldade em ler e escrever
navegador ou a aba, seus dados serão excluídos. Enquanto que
as informações.
o localStorage não possui expiração definida. Exemplo:
Para auxiliar na tarefa de salvar e recuperar informações <html>
locais, o HTML 5 apresenta um recurso chamado de Storage <head>
API. <script>
var linhaExecucao;
A API Storage permite duas formas de armazenamento
function gravar()
de dados no lado do cliente:
{
sessionStorage.
• sessionStorage; setItem(“nome”,”Joao da Silva”);
}
• localStorage.
function ler()
{
O sistema de localStorage e sessionStorage fazem parte
var retorno;
da API Storage. Seu tipo de armazenamento é de chave: valor, retorno = sessionStorage.
sendo a chave sempre uma string. O objeto desta API apresenta getItem(“nome”);
4 métodos: alert(retorno);
}
• getItem(chave): obtém um valor armazenado no Storage; </script>

</head>
• setItem(chave, valor): armazena um valor no Storage; <body>
<input type=”button” onclick=”gravar()” </script>

value=”Grava Informacao” > </i>
<input type=”button” onclick=”ler()” </head>
value=”Ler Informacao” > </button> <body>
</body> <input type=”button” onclick=”desenhar()”
</html> value=”Desenhar” >
<canvas id=”desenho” width=”400”
height=”400”></canvas>
Canvas API </body>
</html>
O HTML 5 trouxe consigo uma API gráfica interpre-

Além disso, com o Canvas é possível desenhar na página
tada sem o uso de plugins, a qual é manipulada através da tag
e atualizar, dinamicamente, estes desenhos através de scripts
canvas. Esta API permite desenhar na tela do navegador através
conforme a necessidade do usuário. Esta possibilidade permite
do javascript.
inúmeros usos desta API, substituindo os atuais plugins como o
Flash pelo Canvas. A seguir, veremos um exemplo de desenho
Para iniciar um desenho, devemos incluir no documento
construído com o Canvas.
html a tag canvas, que delimita a área do desenho e no javascript,
desse modo, a fim de inicializar o canvas através do método
<html>
getContext. <head>
<script>
<html> function desenhar()
<head> {
<script> var context;
function desenhar() context = document.getElementById
{ (“desenho”).getContext(“2d”);
var context;
context = document. //iniciar o desenho
getElementById(“desenho”). context.beginPath();
getContext(“2d”);
} //posicionar o cursor para o
inicio do desenho <html>

context.moveTo(150,50); <head>
<script>
//desenho das linhas var context;
context.lineTo(220,250);
context.lineTo(50,125); function desenhar()
context.lineTo(250,125); {
context.lineTo(80,250); context = document.
context.lineTo(150,50); getElementById(“desenho”).getContext(“2d”);

//pintar o desenho de amarelo setInterval(desenhaAnimacao,200);
context.fillStyle=”#ff0”; }
context.fill();
function desenhaAnimacao()
//pintar as bordas de vermelho {
context.strokeStyle=”#f00”; context.clearRect(0,0,960,480);
context.stroke(); context.translate(30,30);
} context.rotate(0.1);
</script> context.beginPath();
context.moveTo(10,0);
</head> context.lineTo(20,30);
<body> context.lineTo(0,30);
<input type=”button” onclick=”desenhar()” context.closePath();
value=”Desenhar” > context.stroke();
<canvas id=”desenho” width=”400” }
height=”400”></canvas> </script>
</body>
</html> </head>
<body onload=”desenhar()”>
O Canvas também permite movimentar e criar animações <canvas id=”desenho” width=”960”
height=”480”></canvas>
nos objetos da tela. Analise o exemplo que segue: </body>
</html>
Nesse exemplo, estamos criando um desenho customizado.

Logo, o método beginPath() define ao Canvas, que iniciare-
mos o desenho usando as APIs do PATH, as quais podem ser
associadas a um “lápis” na tela.
O moveTo() move nosso “lápis” para o ponto 10,0(x,y).

A partir do ponto 10,0, desenhamos uma linha no método
lineTo() para o ponto 20,30, Nesse momento, é como se fosse
desenhada uma linha no mesmo. O mesmo fazemos depois para
o ponto 0,30. O método closePath() fecha automaticamente
nosso desenho para o ponto inicial, no caso 10,0.
Logo, o método stroke() finaliza o desenho. Se esse mé-

todo não for chamado no final, o desenho não aparecerá na tela.
Isso, porque o método lineTo() apenas adiciona as coordenadas
numa fila, que depois são finalmente desenhadas com o stroke().
Já, o método translate() move o canvas inteiro para a

posição x,y passada nos argumentos. E o rotate() gira o canvas
inteiro para o ângulo passado (em radianos).
Essas duas chamadas dos métodos devem ser colocadas

antes de beginPath(). Se forem colocadas depois do stroke(),
nada vai acontecer, porque as transformações com translate() e
rotate() só afetam os próximos desenhos.
Síntese
Neste capítulo aprendemos que o JavaScript
possui recursos avançados que permitem desenvolver
aplicações web de maior complexidade, com recursos
como funções anônimas, manipulação da árvore DOM,
e novas funcionalidades do Html 5, que funcionam em
conjunto com o JavaScript, como a biblioteca Canvas
e a geolocalização.
Questões para
recapitularmos!
1. Explique qual a importância da ár-
vore DOM.
2. Com o uso das funções de controle

de tempo, construa um relógio digi-
tal para controlar as horas, minutos
e segundos. Quando o programa
iniciar, ele deve buscar a hora atual e
começar a controlar o tempo a partir
deste horário.
3. Crie uma página html com um bo-

tão, que quando acionado, exiba para
o usuário a sua localização através
da latitude e longitude.
4. Implemente o exemplo de canvas

apresentado no conteúdo e analise
o resultado.
5. Crie um formulário html com os
seguintes campos:
• Nome;
• Idade;
• Telefone;
• E-mail;
Crie um script Java Script que salve

todas as informações digitadas neste
formulário, e outro script que carregue
estas mesmas informações quando o
usuário voltar a acessar o formulário.
FRAMEWORKS
JAVASCRIPT
Você deve ter percebido que apesar do
JavaScript ser uma linguagem poderosa, ao
mesmo tempo é uma linguagem complexa e
com muitos detalhes. Para facilitar o nosso
trabalho como desenvolvedores foram criados
frameworks javascript que fazem o trabalho
complexo por nós, simplificando a atividade de
desenvolvimento.
Conceito Para que possa ser utilizado um framework, o primeiro

passo será estudá-lo para analisar se as funcionalidades forne-
cidas por ele atendem a necessidade da aplicação que está sendo
Os Frameworks JavaScript nos proporcionam a redução
desenvolvida. Neste ponto, devemos observar que é possível
da necessidade de construirmos todas as funcionalidades que
utilizar muitos frameworks ao mesmo tempo, pois cada um
precisamos, de forma manual, para o nosso sistema, pois o
deles apresenta características específicas de acordo com a fun-
mesmo já apresenta os recursos prontos. Além de possuir os
cionalidade proposta por ele.
recursos prontos, o framework também simplifica a maneira
como programamos em JavaScript, podendo fornecer algumas
Após escolher o framework é preciso obtermos o mesmo
vantagens conforme listado:
e deixá-lo junto a aplicação, assim, podemos referenciá-lo na
página ou então através da própria internet. Conforme com o
• Simplificação da forma de utilizar JavaScript;
framework, o mesmo poderá ser composto por um ou vários
arquivos do tipo javascript e CSS.
• Novos recursos e elementos visuais;
Um exemplo de framework é o Jquery, o qual pode ser
• Simplifica a interação com o usuário e também os recursos
obtido no endereço http://code.jquery.com/jquery-2.1.1.js. Após
do servidor;
fazer o download do arquivo “Jquery-2.1.1.js” devemos referen-
ciar o mesmo na página html, como o exemplo que segue, com
• Torna o desenvolvimento em JavaScript independente de
o intuito de que seja possível utilizar o mesmo. Esse mesmo
browser, visto que a maioria dos frameworks apresenta as
procedimento deve ser feito para qualquer outro framework que
suas funcionalidades de forma independente de browser
desejamos utilizar.
(crossbrowser);
<html>
• Redução de incompatibilidades; <head>
<script src=”Jquery-2.1.1.js”></script>
• Reaproveitamento de código. </head>
</body>
</html>
Biblioteca Modernizr if (Modernizr.canvas){

div.innerHTML += “Canvas = ON”;
}
else{
div.innerHTML += “Canvas = OFF”;
}
}
</script>
</head>

O Modernizr é uma biblioteca de detecção que permite <input type=”button” onclick=”verificaCanvas()”
verificar o suporte da maioria das características do HTML5 e value=”Verifica Canvas”></input>
<div id=”resultado”>
CSS3. O download da biblioteca pode ser obtido no endereço </div>
web http://modernizr.com/. </body>
</html>
O Modernizr é um script JavaScript que roda automati-
camente, assim que o mesmo é adicionado no head do docu-
Framework JQuery
mento. No seguinte exemplo a biblioteca está sendo utilizada
para verificar se o navegador apresenta suporte a API Canvas
do HTML5.
<html>
<head> O Framework Jquery é uma biblioteca cross-browser, de-
<script src=”modernizr.js”></script>
senvolvida para simplificar a programação de uma página web.
language=”javascript”> Ela foi criada por John Resig em 2006 e, atualmente, segundo
function verificaCanvas() consulta realizada na Wikipedia, ela é empregada em 77% dos
{ 10 mil sites mais visitados no mundo.
var div = document.
getElementById(‘resultado’);
Essa biblioteca apresenta uma série de funcionalidades, senta comentários no código, possuindo redução de espaços e
das quais pode-se citar: nome de variáveis para que o arquivo seja menor, possibilitando
melhor desempenho.
• Resolução de incompatibilidades entre navegadores;
A versão descompactada, por sua vez, apresenta comen-
• Redução significativa de código; tários no código, o que permite um melhor entendimento do
que as rotinas do framework se propõe.
• Reutilização de código.
Além disso, também existe a versão 1.x e a versão 2.x.
Altamente expansível e com diversas funcionalidades Ambas versões possuem as mesmas funcionalidades, porém a
adicionais: versão 2.x não possui compatibilidade com navegadores antigos
(internet explorer 6, 7 e 8).
• jQuery UI para elementos de interface;
A seguir, podemos observar um exemplo de código. Logo,
• jQuery Mobile para desenvolvimento mobile. o código comentado demonstra como a ação é feita com JavaS-
cript sem o uso do framework jQuery.
Apresenta grande facilidade de uso dos recursos Ajax e
manipulação DOM através dos seletores. <html>
<head>
<script src=”Jquery-2.1.1.js”></script>
Permite a implementação de recursos de CSS nas versões <script>
1, 2 e 3. function executa()
{
O jQuery pode ser acessado pelo site http://jquery.com/ //document.
e o download pode ser feito no endereço http://jquery.com/ getElementById(“teste”).value = 5;
download/. Na página de download existem quatro versões que $(“#teste”).val(5);
}
podem ser feitas. Existe a versão compactada (compressed) e </script>
descompactada (uncompressed). A versão compactada também </head>
é conhecida como versão de produção. Essa versão não apre-
<body onload=”executa()”> Seletor por Classe: Permite a seleção de elementos através

<input type=”text” id=”teste”></input> da propriedade class dos elementos, retornando um array de
</body>
elementos. Exemplo:
</html>
Html:
Seletores JQuery
<td class=“celula”></td>
O jQuery apresenta uma forma de selecionar os elementos, JavaScript:

muito dinâmica e simplificada, sendo muito semelhante aos
document.getElementsByClassName(“célula”)
seletores de CSS, mas com recursos mais avançados. Agora,
serão apresentados alguns dos seletores que podem ser empre-
Jquery:
gados com jQuery.
$(“.celula”)
Seletor por Id: Permite a seleção através do Id de um
elemento. Exemplo: Seletor por Elemento: Permite a seleção de elementos
através do nome do elemento, retornando um array de elemen-
Html: tos. Exemplo:
<td id=”célula”></td>
Html:
JavaScript: <td></td>
document.getElementById(“célula”)
JavaScript:
Jquery: document.getElementsByTagName(“td”)
$(“#celula”)
Jquery:
$(“.td”)
Seletor Múltiplo: O seletor múltiplo permite a combinação <html>

de diversos elementos e diversos tipos de seletores ao mesmo <head>
<script>
tempo, retornando um array com os elementos selecionados.
$(document).ready(function(){
//Aqui devem ser programados os
Além dos seletores antes apresentado, existem diversos demais eventos . . .
outros que podem ser utilizados. Para saber mais sobre estes })
seletores, devemos acessar a documentação do jQuery, por meio </script>
do endereço http://api.jquery.com/category/selectors/. <head>
<body>
</body>
Eventos JQuery </html>
Internamente, ao evento “ready” podem ser adicionados

O uso do jQuery permite ampliar a quantidade e tipos de
demais eventos e códigos em JavaScript. Estes eventos podem
eventos que já eram disponibilizados no JavaScript. O primei-
ser adicionados neste local, também com o emprego de funções
ro evento a ser considerado com o jQuery é o evento “ready”.
anônimas vistas anteriormente. Agora, segue exemplo de como
Esse evento é muito importante, pois o mesmo será disparado
programar no evento “ready”.
quando a página concluir a criação da árvore DOM, contendo
os elementos da página, diferentemente do evento “onLoad” do <html>
JavaScript clássico, o qual é executado quando a página concluí <head>
o carregamento de todos os elementos, inclusive o seu conteúdo, <script>
$(document).ready(function(){
como imagens, tornando a execução das instruções contidas no
evento “ready” muito mais rápida do que o “load”. Logo a seguir, //Aqui foi escrita uma mensagem no
temos o exemplo de como utilizar o evento ready: corpo da página
$(“body”).text(“O documento esta
carregado”);
$(“#minhacamada”).click(function(e){
alert(“evento de clique executado no
elemento de id ‘minhacamada’ com
função anonima...”);
}); Eventos de teclado

})
</script> keydown() Executado no momento em que uma tecla é
<head> pressionada, independente de se soltar ou manter a
<body> tecla pressionada.
</body>
</html> keypress() Executado quando uma tecla é pressionada. É executado
uma vez se a tecla é pressionada e liberada. Executado
Adiante, será apresentada uma tabela com outros eventos diversas vezes se a tecla for pressionada e mantida.
que podem ser utilizados com jQuery. keyup() Executado no momento em que uma tecla é liberada
após ser pressionada.
Eventos de Mouse
Eventos combinados de teclado e mouse
click() Evento gerado quando se produz um click em um
focusin() Evento executado quando um elemento ganha o foco.
elemento da página.
Este foco pode ser causado pelo clique do mouse ou
dblclick() Evento gerado quando se produz um duplo clique sobre pela tabulação do teclado.
um elemento.
focusout() Este evento ocorre quando um elemento perde o foco,
hover() Executada quando o mouse entra e sai de cima de um podendo ser perdido pelo uso do mouse ou tabulação
elemento. do teclado.
mousedown() Executado quando o usuário pressiona o botão do focus() Executado quando um elemento ganha o foco.
mouse.
Funcionalidades do JQuery
mouseup() Executado quando o usuário solta o botão do mouse.
mouseenter() Executado quando o mouse for situado sobre o emento.
Além dos novos eventos e seletores, o jQuery apresenta
mouseleave() Executado quando o mouse sai de cima de um inúmeras facilidades que podem ser empregadas no desenvolvi-
elemento. mento em JavaScript. Dentre essas facilidades, está a execução
mousemove() Executado quando o mouse é movimentado sobre o de rotinas Ajax e também facilitadores relativos a manipula-
elemento. ção de elementos. O uso de recursos Ajax será visto em outra
mouseout() Executado quando o mouse sai do elemento. disciplina, enquanto que agora serão apresentados alguns dos
recursos que facilitam a programação em JavaScript. $.unique(array): Retorna um array de elementos somente
com elementos únicos.
$.trim(str): Este comando remove espaços na esquerda e
na direita de uma strings. Exemplo: $.type(objeto): Determina o tipo do elemento. Exemplo:
<script> <script>
var nome = “ Juliano “; if ($.type(true) == “boolean”)
nome = $.trim(nome); {
</script> document.write(“Este tipo é booleano”);
}
</script>
$.inArray(valor, array): Retorna a primeira ocorrência do
valor passado, que for encontrada no vetor passado. Exemplo: .val(): Retorna o valor (conteúdo) de um determinado
objeto.
<script>
var nomes = new Array(); .text(): Seta o valor para um determinado objeto. Exemplo:
var valorEncontrado;
<script>
nomes[0] = “José”; var conteudo = $(“camponome”).val();
nomes[1] = “Carlos”; $(“p”).text(conteudo);
nomes[2] = “Cassio”; </script>
valorEncontrado = $.inArray(“Carlos”,nomes); .css(): Atribui ou permite a leitura de um determinado va-
lor de uma propriedade CSS do elemento em questão. Exemplo:
alert(valorEncontrado);
<script>
</script>
//lendo a cor de fundo de um paragrafo para uma
variável
$.isArray(objeto): Retorna verdadeiro se o objeto passado Var corDeFundo;
for um array JavaScript. corDeFundo = $(“p”).css(“background-color”);
</script>
Biblioteca jQuery UI Grupo Nome Descrição

Draggable Cria elementos possíveis de serem arrastados pela
(arrastar) interface.
Droppable Cria elementos para receber os elementos
Componentes
(soltar) arrastáveis.
Resizable Cria elementos cujas dimensões podem ser
O jQuery UI é uma biblioteca JavaScript, criada em 2007 (dimensionar) controladas pelo usuário.
por um grupo de desenvolvedores que, atualmente, possuem Selectable Cria elementos que possam ser selecionados pelo
como gerente de projeto Richard D. Worth. (selecionar) usuário, seja individualmente ou em grupos.
Sortable Cria elementos que possam ser ordenados pelo
A biblioteca jQuery UI foi criada com o objetivo de ser (ordenar) usuário com ação de arrastar e soltar.
utilizada em conjunto com a biblioteca jQuery, objetivando a Accordion Cria o efeito acordeão, para ocultar/mostrar
criação de elementos para interfaces de usuários ricos. conteúdo.
Autocomplete Apresenta ao usuário uma lista de sugestões de
Essa biblioteca permite ao desenvolvedor criar elementos palavras, à medida que ele digita em um campo
de interface com o usuário, com um mínimo de código e sintaxe texto.
semelhante a biblioteca jQuery. Button Possibilidade de criar vários tipos de botões.
Datepicker Cria uma janela popup para seleção da data a ser
Widgets
A biblioteca jQuery UI, bem como uma vasta documen- digitada, em um campo destinado a coletar uma
tação da mesma podem ser encontrados no site http://jqueryui. data.
com/. Dialog Cria vários tipos de janelas de diálogo, como janelas
modais.
Os elementos que fazem parte da biblioteca jQuery UI Progressbar Cria uma barra indicativa do andamento de uma
foram classificados de acordo com as suas funcionalidades, o tarefa.
que pode ser observado na tabela seguinte. Slider Cria um botão arrastável em uma guia para seleção
de um valor compreendido em determinada faixa.
Tabs Cria uma interface cuja navegação é feita com o uso
de abas.
<html>
Color Animation Este efeito tem por objetivo animar as cores de um
<head>
elemento.
<title>jQuery UI Datepicker - Default
Toggle class Esses efeitos destinam-se a animar elementos functionality</title>
Add class baseados na manipulação dos seus atributos de <link rel=”stylesheet” href=”jquery-ui.css”>
classe. <script src=”jquery-1.10.2.js”></script>
Remove class
<script src=”jquery-ui.js”></script>
Swich class <script>
Efeitos
Effect Aplica em um elemento uma série de efeitos de $(function() {

animação padrão da biblioteca jQuery, tais como os $(“#datepicker” ).datepicker();
efeitos de esmaecimento, pulsação, balanço, sacudir, });
etc. </script>
</head>
Toggle Aplica um dos efeitos padrão da biblioteca jQuery,
<body>
com a finalidade de alternar entre ocultar e exibir
<p>Date: <input type=”text” id=”datepicker”></p>
um conteúdo.
</body>
Hide Efeito destinado a ocultar um conteúdo. </html>
Show Efeito destinado a mostrar um conteúdo.
Position Destina-se a controlar e manipular o Framework Bootstrap
Utilidades
posicionamento de elementos na interface.
Widgets Destina-se à criação de widgets personalizados.
A seguir, segue exemplo extraído da própria documenta-

ção, o qual demonstra a utilização do jQuery UI para o elemento
datepicker.
Com a utilização cada vez maior de dispositivos mobile de O respectivo framework não se resume a formatação da
tela pequena (como smatphones e tables) para acessar a internet, exibição dos elementos em tela, mas ele também emprega um
a preocupação dos web designers em conseguir criar um website conceito de colunas para ajustar e posicionar os elementos em
que exibisse as suas informações de forma eficiente e com uma tela, sendo um bom framework também para ajustar o layout e
boa usabilidade em telas menores passou a ser cada vez maior. posicionamento dos elementos em tela.
Antes do surgimento do Bootstrap, os websites precisavam Toda a documentação de como utilizar este framework
ter toda a sua programação do CSS adaptada, de forma manual, em língua portuguesa pode ser acessada no endereço http://
para que os sites pudessem ser visualizados corretamente nestes getbootstrap.com.br/.
dispositivos.
O Bootstrap foi lançado como sendo o primeiro fra-

mework de front-end (para a interface), com a característica
mobile first, ou seja, a sua preocupação principal era garantir
uma boa experiência de uso do website em dispositivos móveis.
Este framework foi desenvolvido pelo Twitter, o qual

contribui constantemente com novos componentes visuais para
a web, e lançado com código aberto para que todos pudessem
utilizá-lo.
O framework baseia-se no uso de CSS e JavaScript, através

do emprego de classes pré-definidas e que podem ser atribuídas
aos componentes da página html. Automaticamente, com o
emprego destas classes , o layout passa a ser exibido conforme
as regras definidas pelo framework.
Síntese
Neste capítulo aprendemos que, mesmo que o Ja-
vaScript seja padrão, ele funciona de forma diferente nos
browsers e, para isso, podemos utilizar frameworks e bi-
bliotecas javaScript;
Essas mesmas bibliotecas ampliam e facilitam o uso

do JavaScript, reduzindo a sua complexidade;
Passamos a conhecer a biblioteca Modernizr para

identificar os recursos da linguagem suportados pelo na-
vegador, a fim de realizarmos esta incompatibilidade de
forma eficiente e garantirmos uma página de qualidade
para o usuário.
Vimos que a biblioteca Jquery surgiu para facilitar

a programação JavaScript, apresentando as seguintes ca-
racterísticas:
• O Jquery é um framework JavaScript amplamente

utilizado pelo mundo;
• Ele possui recursos prontos que aumentam a pro-
dutividade e agilidade para o desenvolvimento
web;
• Padroniza e resolve problemas de compatibilidade

entre navegadores;
Vimos também a biblioteca jQuery UI, que permite

criar recursos visuais complexos de forma rápida, com os
seguintes detalhes:
• Este framework apresenta diversos recursos visu-

ais, permitindo a criação de interfaces web ricas;
• Os seus componentes já estão prontos, sendo ne-

cessário apenas integrar as suas funcionalidades
para a página a ser criada;
• Também resolve problemas de compatibilidade

entre os navegadores.
Questões para
recapitularmos!
1. Qual a importância dos frameworks
javascript no que diz respeito a com-
patibilidade dos recursos do Java
Script entre múltiplos navegadores?
2. Explique a funcionalidade da bi-

blioteca Modernizr.
3. Qual a diferença entre os fra-

meworks jQuery e jQuery UI?
4. Qual é o grande problema que o

Twitter Bootstrap se propõe a re-
solver?
REFERÊNCIAS
Breitmann, Karin Koogan. Web semântica: a internet do futuro

– Rio de Janeiro: LTC, 2005
Kalbach, James. Design de navegação; tradução: Eduardo Ke-

ssler Piveta. – Porto Alegre: Bookman, 2009
Modernzr: http://www.modernizr.com/ Acesso em março de

2017
NEGRINHO, Tom; Smith, Dori. JavaScript: Para a World

Wide Web. 4 ed. Rio de Janeiro: Campus, 2001
Pilgrim, Mark. HTML 5: entendendo e executando. – Rio de

Janeiro, RJ: Alta Books, 2011.
SILVA, Maurício Samy. HTML 5: a linguagem de marcação

que revolucionou a web. 1 ed.. São Paulo: Novatec, 2011.
Silva, Mauricio Samy. jQuery UI: Componentes de interface

rica. – São Paulo, SP: Novatec, 2012.

Programação WEB

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Programação WEB

Uploaded by

Copyright:

Available Formats

PROGRAMAÇÃO WEB

JULIANO PAULO MENZEN

Tabelas 31 Aplicação de CSS com JavaScript 99 Claudino José Meneguzzi Júnior

A LINGUAGEM CSS 53 Biblioteca jQuery UI 129 Caiani Martins

Conceito 54 Framework Bootstrap 130

Nesta nossa disciplina de Programação Web, vamos deixar de ter uma

Além de aprendermos sobre como tudo começou, vamos compreen-

Depois de estudarmos e aplicarmos tudo isso, ao final da discipli-

Então, alunos, agora vamos navegar em nosso estudo!!!

Na verdade, nem sempre foi assim, há pouco tempo,

A resposta que você receberá é a de que eles não ti-

Provavelmente, ele irá lhe responder Introdução à Internet

Arpanet foi a primeira rede operacional

terpretam o que a informação significa. cializações de cada equipamento. Num

Outra tendência da web 3.0, é a in-

Em cada um dos casos a internet

• A internet é uma rede de computadores que teve o

• Inicialmente ela tinha apenas objetivos militares e aca-

• A internet não se restringe apenas a websites, mas sim

• A partir de 1991 foi definida a linguagem HTML, a

2. Explique por que a internet foi divi-

3. Quem criou o protocolo HTTP e

Por hipertexto, entendemos como sendo todo o conteúdo

A linguagem HTML é uma linguagem de marcação,

<html> e </html>: São as tags que

maroon #800000 Nota 1: Como o objetivo primor-

Tags para inclusão de títulos

Sempre que um conteúdo textual, como um documento

Para representar estes títulos em um documento descrito

O texto inserido entre estas tags será interpretado pelo

Tag para inclusão de parágrafos e quebra de linhas

Para incluir uma imagem dentro do documento html,

<html> São as propriedades da tag img que permitem a inclusão

Width: Permite definir em pixels a largura relativa ao

Height: Permite definir em pixels a altura relativa ao

devemos observar que esta propriedade <html>

Meta Tags e Caracteres Especiais Para definir o idioma principal da

Para informar palavras chaves para o mecanismo de busca:

<meta name=”keywords” content=”css, html, jvascript,

A seguir temos um exemplo completo, onde são aplicadas

As listas permitem estruturar e agrupar um conjunto de

Uma tabela é uma representação matricial de um conjunto

Table: Esta tag serve de container para a construção da

Caption: Esta tag permite definir um título para a tabela; </tr>

<table border=”1”> </tr>

<html> <form name=”cadastro” method=”GET”

<form name=”cadastro” method=”GET” action=”http://www. <form name=”cadastro” method=”GET” action=”http://www.

”observacoes”></textarea></td> Inclusão de Elementos de Áudio e Vídeo

<video width=”320” height=”240” controls>

A tag vídeo necessita da tag source, com a qual podem ser

Width: Define a largura em pixels do vídeo a ser exibido;

Height: Define a altura em pixels do vídeo a ser exibido;

Controls: Se incluída esta propriedade, o vídeo libera os

Src: Define o caminho do vídeo a ser exibido;

Type: Define o tipo de codificação do vídeo exibido.

A tag áudio também foi adicionada no html 5 e permite

A tag áudio necessita da tag source, com a qual podem

Controls: Se incluída esta propriedade, o vídeo libera os

Src: Define o caminho do vídeo a ser exibido;

Type: Define o tipo de codificação do vídeo exibido.

• A linguagem HTML é uma linguagem de marcação,

• O objetivo principal do HTML é estruturar o conteúdo

• O emprego do HTML deve seguir a sua sintaxe, para

• Quando utilizamos HTML, devemos nos preocupar