A História da Internet

Prévia do material em texto

PROGRAMAÇÃO WEB
JULIANO PAULO MENZEN
2PROGRAMAÇÃO WEB
SUMÁRIO
CENTRO UNIVERSITÁRIO UNIFTEC
Rua Gustavo Ramos Sehbe n.º 107. 
Caxias do Sul/ RS 
REITOR
Claudino José Meneguzzi Júnior
PRÓ-REITORA ACADÊMICA
Débora Frizzo
PRÓ-REITOR ADMINISTRATIVO
Altair Ruzzarin
DIRETORA DE EDUCAÇÃO A DISTÂNCIA (NEAD)
Lígia Futterleib
Desenvolvido pelo Núcleo de Educação a 
Distância (NEAD)
Designer Instrucional 
Sabrina Maciel
Diagramação, Ilustração e Alteração de Imagem
Igor Zattera
Revisora
Caiani Martins
A HISTÓRIA DA INTERNET 4
Introdução à Internet 5
As fases da Internet 8
A LINGUAGEM HTML 12
Mais um pouco de história 13
Tags Estruturais 15
Formatação de Texto e Imagens 17
Tags para inclusão de títulos 18
Tag para inclusão de parágrafos e quebra de linhas 19
Tags para destacar textos 21
Tag para alterar a fonte de um texto 23
Tag para inclusão de imagens em uma página 23
Tag para adicionar separação de textos em documento 25
Meta Tags e Caracteres Especiais 26
Hyperlinks e Âncoras 28
Listas 30
Tabelas 31
Formulários HTML 35
Inclusão de Elementos de Áudio e Vídeo 40
NOÇÕES DE DESIGN 46
Noções de Design 47
Arquitetura de Informação 47
Usabilidade 48
Aprendizagem 48
Eficiência	 48
Memorização 48
Robustez 48
Satisfação 48
Acessibilidade 49
Layout 50
A LINGUAGEM CSS 53
Conceito 54
Forma	de	Aplicação	e	Precedências	do	CSS	 54
Tags adicionais de HTML para iteração com o CSS 56
Seletores 56
Unidade de Medida em CSS 59
Estilos para Formatação de Texto 60
Fluxo de Página 66
JAVASCRIPT 81
Um pouco de História 82
Estrutura de um Programa JavaScript 83
Variáveis, Atribuições e Operações 87
Interagindo com o Usuário 89
Comandos Condicionais e Expressões 91
Estruturas de Repetição 93
Funções 94
Orientação a Objetos em JavaScript 95
Eventos 97
Aplicação de CSS com JavaScript 99
RECURSOS AVANÇADOS DO JAVASCRIPT 104
DOM e Manipulação de Elementos 105
Funções Anônimas 109
Interagindo com o Tempo 111
Rotinas de Geolocalização 113
Substituindo os Cookies 114
Canvas API 115
FRAMEWORKS JAVASCRIPT 121
Conceito 122
Biblioteca Modernizr 123
Framework JQuery 123
Eventos JQuery 126
Funcionalidades do JQuery 127
Biblioteca jQuery UI 129
Framework Bootstrap 130
3PROGRAMAÇÃO WEB
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!!!
4PROGRAMAÇÃO WEB
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.
5PROGRAMAÇÃO WEB
Provavelmente, ele irá lhe responder 
que a internet era bem diferente daquilo 
que estamos acostumados a ver. Ela era 
lenta, as páginas exibiam poucos recursos, 
praticamente apenas texto e imagens e 
nós não podíamos ver ou escrever para 
os nossos amigos na rede social, por um 
motivo muito simples: as redes sociais não 
existiam!
Outro aspecto curioso que você vai 
ouvir deles é que a internet não estava dis-
ponível a qualquer momento e em qualquer 
lugar. Para podermos utilizar a famosa 
rede das redes, precisávamos de uma li-
nha telefônica e mesmo assim, tínhamos 
a necessidade de discar para um provedor 
de acesso com os famosos modens e o seu 
barulhinho inconfundível. Se você não 
teve a oportunidade de escutar o barulho, 
neste link você poderá ouvi-lo ou então 
sentir saudades dessa época, caso tenha 
passado por ela.
A partir de agora, vamos entender 
como todas estas situações apresentadas 
foram se transformando para que a internet 
pudesse chegar ao ponto que chegou nos 
dias atuais.
Introdução à Internet
Antes de aprendermos a criar os fa-
mosos websites, vamos estudar um pouco 
a história e entender como tudo começou.
A Internet é uma rede de compu-
tadores que começou através de pesquisas 
militares durante a Guerra Fria, na déca-
da de 1960. Nesse período, existiam dois 
blocos com políticas e ideologias comple-
tamente contrárias, que eram os Estados 
Unidos e a União Soviética. 
Estes dois blocos exerciam uma forte 
inf luência em todo o mundo e qualquer 
inovação, como mecanismo ou tecnologia, 
poderia proporcionar a um bloco liderar 
esta disputa. Nesse complexo momen-
to em que vivia o mundo, o governo dos 
Estados Unidos temia um ataque as suas 
bases militares pelo governo Russo. Um 
ataque a essas bases poderia trazer à tona 
informações sigilosas, como também po-
deria destruir para sempre informações 
contidas naquele local.
https://www.youtube.com/watch?v=mui1YXZBm1k
6PROGRAMAÇÃO WEB
Por conta disso, foi idealizado um 
modelo de comunicação que permitisse 
que as informações fossem armazenadas 
e descentralizadas. Com isso, se uma base 
americana fosse atingida, as informações 
deste local não seriam perdidas. Este 
modelo de comunicação descentralizada 
foi batizado de ARPANET, criado pela 
ARPA. 
A ARPANET funcionava por meio 
de um sistema de chaveamento de paco-
tes. Esse sistema fazia a transmissão de 
dados em rede de computadores onde as 
informações eram divididas em peque-
nos pacotes, os quais possuíam trechos 
de dados, informações do destinatário e 
informações que permitiam a construção 
do conteúdo original na sua chegada. 
Apesar de o governo americano fa-
zer todo esse investimento, com medo 
de sofrer um ataque Russo, esse nunca 
aconteceu. No entanto, a partir dessa ação, 
surgiu um dos maiores meios de comuni-
cação do século 20/21, onde, em apenas 
Quatro anos, conseguiu atingir em torno 
de 50 milhões de pessoas.
Saindo dos Estados Unidos e viajan-
do até o Reino Unido, em 1965, o Natio-
nal Physical Laboratory, comandado por 
Donald Davies, propôs uma rede nacional 
de dados também baseada em troca de 
pacotes. Esta rede foi construída e passou 
a se chamar Mark I. No ano de 1976, 
haviam 12 computadores e 75 terminais 
interligados pela rede.
Por volta da década de 70, uma rede 
de pesquisa francesa chamada CYCLA-
DES, dirigida por Luis Pouzin, apresentou 
um novo modelo de rede como alternati-
va a rede americana ARPANET. Sendo 
essa, a primeira rede a fazer com que os 
próprios equipamentos conectados à rede 
fossem responsáveis pelo transporte das 
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.
7PROGRAMAÇÃO WEB
Desta maneira,com o surgimento 
de redes em diversas partes do mundo e 
cada uma com diferentes métodos de co-
municação, passou a ser necessário algo 
que pudesse unificar estas redes. Com isso, 
membros da DARPA e da Universidade de 
Stanford, iniciaram em 1973 um trabalho 
de reformulação, onde todas as diferenças 
entre os protocolos de rede pudessem ser 
escondidas através do uso de um protocolo 
inter-redes comuns. Com esta definição, os 
responsáveis pela comunicação passaram a 
ser os dispositivos conectados e não a rede. 
Na verdade, o mesmo conceito proposto 
pela francesa CYCLADES.
A especificação deste modelo resul-
tou no primeiro uso do termo “internet”, 
como abreviação de “internetworking” e 
a partir disso, diversos padrões de redes 
passaram a empregar o seu uso. 
Com a função da rede reduzida ape-
nas para a transferência de dados, tor-
nou-se possível a junção de praticamente 
todas as redes, independentemente de 
suas características. Esse novo padrão de 
transferência de dados entre redes ficou 
conhecido como TCP.
Em 1978, surgiu o protocolo TCP/
IP, onde cada dispositivo conectado à rede 
passou a receber um endereço único, para 
que este dispositivo pudesse ser identifi-
cado na rede e pudesse receber os paco-
tes de rede destinados a ele. Assim, em 
1983, o protocolo TCP/IP passou a ser 
o único protocolo empregado pela rede 
ARPANET.
Com a ligação de diversas redes por 
meio deste novo protocolo, surgiu o ter-
mo backbone, o qual representa grandes 
computadores conectados entre si, os quais 
distribuem a comunicação de grandes f lu-
xos de dados entre diferentes regiões, uti-
lizando como canais de comunicação fibra 
ótica, satélites ou ondas de rádio.
No ano de 1992, Tim Bernes Lee 
criou a World Wide Web, surgindo, a 
partir de então, o protocolo HTTP, que 
permite a transferência de informações em 
formato textual através de uma linguagem 
de hipertexto conhecida como HTML.
A partir da World Wide Web e, 
juntamente, com o interesse comercial 
na rede, a década de 90 foi responsável 
pela popularização da internet, de forma 
que no ano de 2003 haviam cerca de 600 
milhões de pessoas conectadas, enquanto 
que em 2007 este número já estava em 1 
bilhão e 234 milhões de usuários, segundo 
a Internet World Estatistics.
Nas terras tupiniquins a internet 
teve início em 1988, e servia apenas para 
ligar universidades brasileiras com univer-
sidades americanas. Em 1989 o governo 
brasileiro iniciou um projeto chamado 
de Rede Nacional de Ensino e Pesquisa 
(RNP), que existe ainda hoje, e tem por 
objetivo organizar uma rede acadêmica de 
alcance nacional.
 O primeiro backbone brasileiro en-
trou em funcionamento em 1991, ligan-
do apenas universidades, mas em 1995, o 
governou abriu o backbone para fornecer 
conectividade a provedores de acesso co-
merciais.
Atualmente, a internet no Brasil é 
gerenciada pelo NIC.br, a qual pode ser 
acessado em http://www.nic.br. Além de 
http://www.nic.br
8PROGRAMAÇÃO WEB
gerenciar e regulamentar a internet no 
Brasil, a entidade possui muita informação 
sobre a internet, seu funcionamento e dicas 
de como fazer bom uso deste recurso.
Se você tiver interesse, acesse os en-
dereços a seguir e assista aos vídeos. Tenho 
certeza que será uma ótima experiência 
para você!
• Como funciona a Internet ? Pro-
tocolo IP;
• Como funciona a Internet ? Siste-
mas Autonômos;
• Como funciona a Internet ? DNS.
As fases da Internet
Você deve estar lembrado da intro-
dução deste capítulo, em que falamos que a 
internet nem sempre foi como é hoje. Real-
mente os primórdios da internet lembram 
muito pouco da internet atual. Veja com 
os seus próprios olhos como era a primeira 
página da internet acessando aqui.
Além da evolução da tecnologia que 
levou ao surgimento da internet, o seu 
próprio uso passou por evoluções. Assim, 
estas evoluções estão diretamente associa-
das à melhoria dos meios de comunica-
ção e acesso, além do aumento do poder 
de processamento dos computadores e ao 
massivo uso da rede.
Nos primórdios da internet, haviam 
poucas pessoas responsáveis por inserir 
conteúdos na rede. Estas pessoas adiciona-
vam os conteúdos manualmente, criando 
páginas web que hoje são conhecidas como 
páginas estáticas. Quem acessava a internet 
nesta época, apenas podia acessar e ver os 
conteúdos adicionados por estas pessoas, 
ou seja, não havia muita interação.
No final da década de 90 e nos 
primeiros anos após a virada do século, 
iniciou-se uma mudança na forma de uso 
da web. A partir daí, os próprios usuá-
rios da web deixaram de apenas acessar 
e visualizar os conteúdos, mas também 
passaram a contribuir com os conteúdos 
da internet. Ou seja, a internet passou a 
ser muito mais participativa passando a 
ser realmente uma ferramenta de inte-
gração entre todos. Exemplo disso, são os 
sites de e-commerce, blogs e redes sociais. 
Agora, tente imaginar uma rede social 
sem usuários cadastrados ou um blog sem 
uma pessoa que adicionasse conteúdo ao 
mesmo. 
Já, no ano de 2004, estas diferen-
ças de uso da Web foram classificadas. 
Tim O’Reilly, em sua O’Reilly Media 
Web 2.0 Conference eram as versões da 
Web, dividindo a mesma em três versões: 
Web 1.0, as quais foram os primórdios da 
internet, uma internet estática onde pou-
cos produziam conteúdo; Web 2.0, a qual 
estamos vivendo no momento presente, 
onde todos contribuem para a formação do 
conteúdo da internet e ainda a Web 3.0, 
que é conhecida como a web semântica 
ou internet das coisas.
Para ser possível compreender o 
conceito da web semântica, precisamos 
entender o conceito da web atual, o qual 
pode ser chamado de web sintática. Na 
web sintática, os computadores fazem a 
apresentação da informação, mas não in-
https://www.youtube.com/watch?v=HNQD0qJ0TC4&list=PLQq8-9yVHyOZaK8rXJ0S-dui4r_YiXu9s&index=4
https://www.youtube.com/watch?v=HNQD0qJ0TC4&list=PLQq8-9yVHyOZaK8rXJ0S-dui4r_YiXu9s&index=4
https://www.youtube.com/watch?v=C5qNAT_j63M&index=5&list=PLQq8-9yVHyOZaK8rXJ0S-dui4r_YiXu9s
https://www.youtube.com/watch?v=C5qNAT_j63M&index=5&list=PLQq8-9yVHyOZaK8rXJ0S-dui4r_YiXu9s
https://www.youtube.com/watch?v=ACGuo26MswI&list=PLQq8-9yVHyOZaK8rXJ0S-dui4r_YiXu9s&index=6
http://info.cern.ch/hypertext/WWW/TheProject.html
9PROGRAMAÇÃO WEB
terpretam o que a informação significa. 
Esta interpretação cabe aos seres humanos. 
Na web semântica, esta interpretação passa 
a ser realizada também pelos computado-
res. Pode-se exemplificar a situação com 
um mecanismo de busca. No mecanismo 
de busca, quando informarmos um termo 
para pesquisa contendo algumas palavras, 
o mecanismo irá buscar as páginas que 
apresentarem maior relevância com as 
palavras informadas, mas não irá buscar 
as páginas pelo significado das palavras, 
as quais podem ser uma pergunta, por 
exemplo. Na web semântica, se pergun-
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-
cializações de cada equipamento. Num 
automóvel, por exemplo, a internet estará 
conectada ao mesmo, já fornecendo infor-
mações sobre a trafegabilidade das vias. 
Enquanto que a geladeira pode verificar o 
conteúdo da mesma ou temperatura, ainda, 
informar ao seu dono sobre a necessidade 
de compra de produtos. 
Em diversos televisores esta ten-
dência já uma realidade. Nestes casos, o 
usuário pode ver filmes e informações 
existentes na Web, diretamente pelo te-
levisor.
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 dofinal 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.
12PROGRAMAÇÃO WEB
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. 
13PROGRAMAÇÃO WEB
Esta marcação é feita através de elementos 
conhecidos como Tags. Esse processo de 
marcação da linguagem, em nada tem a 
ver com uma linguagem de programação, 
como PHP, Java ou JavaScript, as quais 
têm por objetivos gerenciar comportamen-
tos e ações através de instruções baseadas 
em lógica algorítmica.
Mais um pouco de história
Desde o surgimento do HTML até 
o momento presente, o HTML passou 
por uma série de versões, as quais vamos 
ver agora:
• HTML: A web que conhecemos 
hoje, foi inventada em 1992 por 
Tim Berners-Lee. Ela surgiu com 
a pesquisa de Tim para descobrir um 
método que permitisse aos cientistas 
do mundo inteiro compartilhar, ele-
tronicamente, seus textos e pesqui-
sas, ainda, que permitisse interligar 
estes documentos. Antes, em 1990, 
foi criado o primeiro protótipo de 
navegador, o qual se chamava Nexus 
e era executado em computadores da 
empresa NeXT, a qual Steve Jobs 
foi o fundador.
Além do navegador, ele implemen-
tou um novo protocolo de comu-
nicação que ficou conhecido como 
HTTP, que permitia transferir do-
cumentos no formato HTML, o 
qual também foi uma especificação 
criada por TIM, mas baseada no 
formato de marcação SGML.
• HTML+: A partir de uma lista 
de discussão eletrônica, criada em 
1991, Dave Regett, da HP, passou 
a desenvolver pesquisas para a im-
plementação de novos recursos da 
linguagem HTML, passando a ser 
chamada de HTML+, sendo essa 
versão publicada no ano de 1993. 
Assim, a partir dessa definição, con-
vencionou-se que as definições do 
HTML não se destinam a determi-
nar a aparência, assim como nomes, 
formatações, entre outras, de uma 
página Web. Estas funções sempre 
devem ficar a cargo do programa 
responsável por renderizar as pági-
nas web. No ano de 2003, surgiu o 
navegador de texto chamado Lynx, e 
em 2004 surgiu o navegador Mosaic. 
Entretanto, como esta nova lingua-
gem não despertou muito interesse 
das grandes empresas, as pesquisas 
e evolução da plataforma acabaram 
sendo lentas.
• HTML 2.0: Com a criação de novos 
navegadores, a internet tornou-se 
um caos, pois cada fabricante passou 
a definir as suas próprias formas de 
marcação. Com isso, neste mesmo 
ano foi criada a IETF (Força Tarefa 
para a Engenharia da Internet), que 
tinha por objetivo analisar e definir 
um padrão único para o HTML. 
Nessa época, a predominância de 
navegador web era da Mosaic, que 
logo após se tornou o Netscape. 
Esse sucesso deveu-se ao Netscape 
funcionar em dispositivos precários. 
Apesar da Netscape ter contribuído 
de forma considerável para a difusão 
da internet, na época ela se isolou, 
criando a sua própria definição de 
HTML e não participando de dis-
cussões da comunidade.
14PROGRAMAÇÃO WEB
Em outubro de 1994, foi criado 
o World Wide Web Consortion 
(W3C), formado por empresas, ins-
tituições e pesquisadores com o ob-
jetivo de desenvolver a web, criando 
normas e especificações aplicáveis 
aos diversos setores e segmentos da 
web, desde fabricantes de tecnolo-
gias e softwares a fornecedores.
No ano de 1995, iniciou-se o desen-
volvimento de novas marcações para 
o HTML, priorizando-se a inclusão 
de elementos de apresentação, indo 
de encontro às definições iniciais do 
HTML. Mais adiante, em setembro 
desse mesmo ano, foi publicada a 
versão 2.0 do HTML.
• HTML 3.0: Ainda, em 1995, Dave 
Ragget lançou a proposta da versão 
3.0 do HTML. Nessa versão passou 
a ser criada uma marcação específica 
para estilização, bem como o sur-
gimento de marcações para tabelas, 
formulários e notas de rodapé. Nessa 
mesma época a Netscape adicio-
nou a funcionalidade de Frames no 
HTML do seu navegador. Nesse 
mesmo ano surgiu a versão 2.0 no 
navegador Internet Explorer da Mi-
crosoft.
• HTML 3.2: A versão 3.2 foi endos-
sada pelo W3C em janeiro de 1997 
como uma recomendação oficial, 
apresentando os recursos de tabelas 
e applets.
• HTML 4.0: Em dezembro de 1997 
o W3C definiu a versão 4.0 como 
sendo a versão oficial do HTML.
• HTML 4.01: Em dezembro de 
1999 o W3C publicou as definições 
para o HTML 4.01, o qual passou 
a ser a versão oficial, inclusive até 
os dias de hoje, trabalhando para-
lelamente com a versão 5.0, ainda 
não concluída.
• HTML 5: Em maio de 2007 o W3C 
passou a estudar a implementação de 
uma nova versão do HTML, cha-
mada de HTML 5. Esse estudo foi 
inicialmente baseado no trabalho 
realizado pelo grupo WHATWG 
(Web Hypertext Application Tech-
nology Working Group), formado 
pelas empresas Apple, Mozilla e 
Opera. Com base nesses estudos 
surgiram novos elementos e estru-
turas para tornar a interpretação das 
páginas mais semântica para o na-
vegador, além de adicionar diversos 
recursos que antes eram somente 
possíveis com o emprego de plugins 
ao navegador, não sendo recursos 
nativos e padrões da web. Confi-
ra neste link as funcionalidades do 
HTML 5.0, que já estão disponíveis 
em cada um dos navegadores exis-
tentes no mercado.
http://html5test.com/
15PROGRAMAÇÃO WEB
Tags Estruturais
Um documento html refere-se a um 
arquivo de texto que deve ser salvo no sis-
tema de arquivos com a extensão “.html” 
ou “.htm”.
 Para que este arquivo possa ser in-
terpretado corretamente pelo navegador 
web, é preciso que o mesmo possua um 
conjunto de tags de marcação específica. 
 Uma Tag é uma palavra reservada 
na linguagem disposta entre os sinais de 
maior “>” e menor “<”. A seguir, um exem-
plo de tag HTML.
<html>
Essas tags, em sua grande maioria, 
são compostas por uma tag de abertura, 
um conteúdo utilizado para ser estrutu-
rado pela mesma, seguido de uma outra 
de fechamento. Desse modo, essa tag de 
fechamento é igual a de abertura, porém, 
precedida do caractere barra “/”. Somente 
as tags que não possuem conteúdo não 
necessitam de fechamento, por exemplo:
<title>Este é um título</title>
<br>
Para que uma página html possa ser 
criada, é preciso que a página contenha 
um conjunto de tags básicas, conhecidas 
como tags estruturais, conforme pode ser 
observado no exemplo a seguir:
<!DOCTYPE html>
<html>
 <head>
 <title></title>
 </head>
 <body>
 </body>
</html>
Cada uma das tags, antes citadas, 
possuem um significado, o qual será de-
talhado:
 <!DOCTYPE html>: Essa tag não 
faz parte do documento html, mas tem 
por objetivo informar o navegador queo 
documento descrito na página está cons-
truído com o uso de html versão 5;
 <html> e </html>: São as tags que 
contém em seu interior todo o documen-
to escrito na linguagem html. Qualquer 
página html deve conter estas tags;
 <head> e </head>: Essas tags re-
presentam a estrutura de cabeçalho do 
documento. Dentro deste bloco de tags 
devem estar contidas apenas as que pos-
suem instruções que devem ser seguidas 
pelo navegador, como inclusão de arqui-
vos complementares, descrição de scripts, 
regras, entre outros. Alem disso, não de-
vem ser inseridas tags de estruturação e 
formatação de texto neste local;
 <title> e </title>: Essas tags têm por 
objetivo definir o título do documento 
16PROGRAMAÇÃO WEB
html que será exibido na guia do navega-
dor;
 <body> e </body>: Essas tags re-
presentam o corpo do documento html. 
É dentro deste bloco de tags que serão 
adicionados todos os elementos e conteúdo 
que compõem a página html.
 Observação: O documento HTML 
deve ser estruturado conforme apresen-
tado, porém, se algumas destas tags não 
forem adicionadas ou colocadas em ordem 
diferente da apresentada, o resultado vi-
sualizado no navegador, possivelmente, 
será o mesmo, visto que o motor de ren-
derização do navegador interpreta as tags 
conforme elas aparecem no documento. 
Entretanto, o posicionamento incorreto 
das tags tornará a renderização da página 
mais lenta e também ocasionará erros de 
execução de rotinas Java Script.
 Agora, implemente o exemplo an-
terior em um arquivo html e execute este 
arquivo no navegador de sua preferência, 
analisando o resultado. Se tudo foi imple-
mentado de forma correta, então, o resul-
tado deverá ser uma página em branco.
 A tag <body> permite a inclusão 
de propriedades. Essas propriedades são 
características que podem ou não ser adi-
cionadas à tag, as quais complementam 
a funcionalidade original da tag. Assim, 
determinadas tags somente funcionam de 
forma correta, quando tiverem as suas pro-
priedades adicionadas. Respectivamente, 
essas propriedades sempre são um conjunto 
formado por chave e valor, onde o valor 
deve ser adicionado sempre entre aspas 
duplas. Exemplo:
Background=”imagem.png”
Algumas das propriedades que po-
dem ser adicionadas a tag <body> são:
Backbround: Esta propriedade per-
mite vincular uma imagem de fundo para 
a página html;
Bgcolor: Esta propriedade permite 
definir uma cor de fundo para a página 
html. Esta cor pode ser definida como uma 
cor sólida através do seu nome em inglês, 
ou então através de um valor hexadecimal;
Text: Esta propriedade permite 
definir a cor das letras da página html, 
sendo preenchida da mesma forma que a 
propriedade bgcolor.
Exemplo:
<!DOCTYPE html>
<html>
 <head>
 <title></title>
 </head>
 <body background=”imagem.png” 
 text=”red”>
 </body>
</html>
Observação: Estas propriedades da 
tag <body> funcionarão nos testes, entre-
tanto, as mesmas não são mais suportadas 
pelo html 5.
17PROGRAMAÇÃO WEB
Cor Nome da 
Cor 
Representação 
Hexadecimal 
 black #000000	
 silver #C0C0C0	
 gray #808080	
 white #FFFFFF	
 maroon #800000	
 red #FF0000	
 purple #800080	
 fuchsia #FF00FF	
 green #008000	
 lime #00FF00	
 olive #808000	
 yellow #FFFF00	
 navy #000080	
 blue #0000FF	
 teal #008080	
 aqua #00FFFF	
Tabela de cores básicas
Uma tabela de cores completa pode ser encontrada neste link.
Formatação de Texto e Imagens 
 Agora que já conseguimos definir 
a estrutura básica de uma página html, 
podemos começar a inserir conteúdo na 
mesma. Para isso, utilizamos um conjunto 
de tags que tem por objetivo estruturar e 
organizar os textos inseridos na página 
web.
 Nota 1: Como o objetivo primor-
dial do HTML é estruturar o conteúdo 
da página, não existem muitas tags que 
apliquem formatação de texto. Esta tarefa 
de formatação foi amplamente desconti-
nuada com o HTML 5, deixando a tarefa 
para o CSS, o qual será visto no próximo 
capítulo.
 Como estamos dando os primei-
ros passos com a programação web, neste 
momento utilizaremos algumas tags de 
formatação de texto em HTML para ter-
mos a possibilidade de adicionar algum 
conteúdo da página.
 Nota 2: Todos os exemplos de có-
digo que serão vistos a partir de agora não 
apresentam acentuação propositalmente, 
pois em momento oportuno serão apre-
sentadas maneiras de adicionar acentos e 
caracteres especiais no hml.
http://www.w3.org/TR/css3-color/#html4
18PROGRAMAÇÃO WEB
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>
19PROGRAMAÇÃO WEB
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>
20PROGRAMAÇÃO WEB
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>
 <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 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>
 Origem: Wikipedia, a enciclopedia livre.
 </p>
 </body>
</html>
21PROGRAMAÇÃO WEB
Pela imagem mostrada, podemos 
observar que quando adicionada a tag <br> 
ocorre de forma forçada a quebra da linha 
no texto. Assim, a maior diferença do uso 
da tag <br> em relação a tag <p> é a sua 
função semântica para o navegador e não 
apenas o espaçamento diferenciado entre 
as linhas conforme pode ser observado.
 Aidentificação semântica permite 
ao navegador saber que aquele conteúdo 
que está envolvido em uma tag do tipo 
<p> é um parágrafo, enquanto que se o 
texto apenas for inserido e adicionadas 
tags do tipo <br> para fazer a sua quebra, 
apesar de visualmente entendermos que 
se tratam de parágrafos, o navegador não 
terá este entendimento, provocando, assim, 
possíveis divergências de renderização e 
dificuldade da página ser reconhecida da 
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 
são as seguintes:
• Texto em Negrito: Tag <b>. Exem-
plo:
<html>
 <head>
 </head>
 <body>
 <h1>Residuo eletronico</
h1>
 <p>
 <b>Residuo computacional</b> 
 tambem conhecido 
 como Residuo eletronico 
 ou lixo eletronico.... 
 </p>
 <p>
 Origem: Wikipedia, a 
 enciclopedia livre.
 </p>
 </body>
</html>
• Texto em Itálico: Tag <i>. Exemplo:
<html>
 <head>
 </head>
 <body>
 <h1>Residuo eletronico</h1>
 <p>
 <i>Residuo computacional</i>
 tambem conhecido como 
 Residuo eletronico ou 
 lixo eletronico.... 
 </p>
 <p>
 Origem: Wikipedia, a 
 enciclopedia livre.
 </p>
 </body>
</html>
22PROGRAMAÇÃO WEB
• Texto Sublinhado: Tag <u>. Exemplo:
<html>
 <head>
 </head>
 <body>
 <h1>Residuo eletronico</h1>
 <p>
 <u>Residuo computacional</u>
 tambem conhecido como 
 Residuo eletronico ou 
 lixo eletronico.... 
 </p>
 <p>
 Origem: Wikipedia, a 
 enciclopedia livre.
 </p>
 </body>
</html>
• Texto Riscado: Tag <s>. Exemplo:
<html>
 <head>
 </head>
 <body>
 <h1>Residuo eletronico</h1>
 <p>
 <s>Residuo computacional</s>
 tambem conhecido como 
 Residuo eletronico ou 
 lixo eletronico.... 
 </p>
 <p>
 Origem: Wikipedia, a 
 enciclopedia livre.
 </p>
 </body>
</html>
Devemos observar que estes ele-
mentos de formatação também podem ser 
aplicados de forma combinada, conforme 
segue exemplo:
<html>
 <head>
 </head>
 <body>
 <h1>Residuo eletronico</h1>
 <p>
 <b><i>Residuo 
 computacional</i></b> 
 tambem conhecido como 
 <u>Residuo eletronico 
 ou <s>lixo eletronico</s></u>
 ... 
 </p>
 <p>
 Origem: Wikipedia, a 
 enciclopedia livre.
 </p>
 </body>
</html>
23PROGRAMAÇÃO WEB
Tag para alterar a fonte de um texto
Para alterar características da fonte de um determinado 
bloco de texto em uma página, deve-se aplicar a tag <font>. Essa 
tag permite, através do emprego de suas propriedades, alterar 
a família da fonte, bem como o seu tamanho e cor, conforme 
segue no exemplo:
<html>
 <head>
 </head>
 <body>
 <h1>Residuo eletronico</h1>
 <p>
 Residuo computacional tambem conhecido 
 como Residuo eletronico ou lixo eletronico.... 
 </p>
 <p>
 <font size=”1” color=”red” face=”verdana”>
 Origem: Wikipedia, a enciclopedia livre.
 </font>
 </p>
 </body>
</html>
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, 
não havendo, também, necessidade de inclusão de todas as pro-
priedades de uma única vez. A seguir, observe o detalhamento 
de cada uma das propriedades.
 Face: Permite definir as fontes que podem ser aplicadas 
ao elemento. Pode ser aplicada mais de uma fonte, desde que o 
respectivo nome seja separado por vírgula;
 Size: Permite definir o tamanho da fonte. Nessa proprie-
dade é aceito um valor de um a sete, sendo que o valor padrão 
é três;
 Color: Permite aplicar uma cor ao texto. Pode ser aplica-
da uma cor sólida ou uma em formato hexadecimal, conforme 
tabela 1 deste documento.
Tag para inclusão de imagens em uma página
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:
24PROGRAMAÇÃO WEB
<html>
 <head>
 </head>
 <body>
 <h1>Residuo eletronico</h1>
 <p>
 Residuo computacional tambem conhecido 
 como Residuo eletronico ou lixo 
 eletronico.... 
 </p>
 <img src=”monitor.jpg” alt=”Monitor jogado 
 na rua” width=”200” height=”200”>
 <p>
 <font size=”1” color=”red” face=”verdana”>
 Origem: Wikipedia, a enciclopedia livre.
 </font>
 </p>
 </body>
</html>
São as propriedades da tag img que permitem a inclusão 
e gestão da imagem no local adicionado. A seguir, temos as 
funções de cada uma das propriedades:
 Src: Esta propriedade é a responsável por permitir adi-
cionar a imagem a tag. Podendo ser adicionadas imagens per-
tencentes ao próprio site ou, então, ser adicionadas imagens 
referenciadas de outros websites. Visto que, quando se adiciona 
uma imagem do site, deve-se apenas mencionar o seu diretório, 
assim como o nome, a partir da página atual, enquanto que para 
uma imagem referenciada de outro site, deve-se informar a url 
completa da imagem. Exemplo.
 Alt: Esta propriedade permite adicionar um texto al-
ternativo à imagem para as situações em que a imagem não 
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, 
http://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/Monitor_in_gutter.jpg/220px-Monitor_in_gutter.jpg
25PROGRAMAÇÃO WEB
devemos observar que esta propriedade 
não altera o tamanho físico da imagem, 
apenas o tamanho para a exibição. Já, 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 visuali-
zado.
Tag para adicionar separação de 
textos em documento
 Para adicionarmos uma separação 
de textos ou áreas em um documento, po-
demos empregar a tag <hr>. Este elemento 
html, normalmente, não é utilizado, mas 
para o início dos nossos estudos poderá 
ser útil.
<html>
 <head>
 </head>
 <body>
 <h1>Residuo eletronico</h1>
 <p>
 Residuo computacional tambem conhecido como Residuo 
 eletronico ou lixo eletronico.... 
 </p>
 <img src=”monitor.jpg” alt=”Monitor jogado na rua” width=”200” height=”200”>
 <hr>
 <p>
 <font size=”1” color=”red” face=”verdana”>
 Origem: Wikipedia, a enciclopedia livre.
 </font>
 </p>
 </body>
</html>
26PROGRAMAÇÃO WEB
Meta Tags e Caracteres Especiais 
No html temos um elemento cha-
mado META. Este elemento destina-se 
a fornecer informações adicionais sobre o 
documento. Também, para cada tipo de 
informação, usamos um atributo e, as-
sim, há uma variedade enorme desses ele-
mentos que podem ser inseridos na seção 
head da página, não havendo um limite 
de elementos que podem ser inseridos e 
nem ordem de inserção. Alguns são de uso 
quase generalizado e úteis para qualquer 
página, enquanto que outros são bastante 
específicos.
 Agora serão analisados os principais 
elementos metas que podem ser inseridos 
em uma página web.
 Identificando o autor da página:
<meta name=”author” content=”Ftec 
Faculdades”/>
Para definir o idioma principal da 
página:
<meta name=”language” content=”pt-
br” />
Para fornecer uma descrição da 
página:
<meta name=”description” 
content=”Materia sobre htm da 
disciplina de programação web.” />
 Nota: É recomendado o emprego 
desta tag, pois a descrição informada é exi-
bida como o descritivo exibido ao usuário, 
por meio do mecanismo de busca quando 
a mesmafor localizada por tal. Para deixar 
com que o mecanismo de busca escolha a 
melhor descrição, deve-se descrever esta 
tag da seguinte forma:
<meta name=”description” content=”none”/>
27PROGRAMAÇÃO WEB
Para atualizar a página de tempos em tempos. 
No exemplo, a atualização ocorre a cada 5 segundos:
<meta http-equiv=”refresh” content=”5” />
 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.
<html>
 <head>
 <title>Pagina de programacao web</title>
 <meta name=”author” content=”Ftec 
 Faculdades” />
 <meta name=”language” content=”pt-br” />
 <meta name=”description” content=”Materia 
 sobre htm da disciplina de programação 
 web.” />
 <meta http-equiv=”refresh” content=”5” />
 <meta name=”keywords” content=”css, html, 
 jvascript, ftec” />
 </head>
 <body>
 
 </body>
</html>
Até o momento, todos os códigos html dos exemplos não 
possuíam acentuação de forma proposital, pois se fosse tentar 
adicionar qualquer tipo de acentuação, a mesma não seria exi-
bida no documento, sendo exibido em lugar disso, um caractere 
não identificado.
Existem duas maneiras de resolver esta situação em páginas 
html. Na primeira, podemos utilizar uma tag meta, identifican-
do qual página de código deve ser interpretada pelo navegador. 
Neste caso, o recomendado é utilizar a página utf-8. Exemplo:
<html>
 <head>
 <title>Pagina de programacao web</title>
 <meta name=”author” content=”Ftec 
 Faculdades” />
 <meta name=”language” content=”pt-br” />
 <meta name=”description” content=”Materia 
 sobre htm da disciplina de programação 
 web.” />
 <meta http-equiv=”refresh” content=”5” />
 <meta name=”keywords” content=”css, html, 
 jvascript, ftec” />
 <meta http-equiv=”content type” 
 content=”text/html” charset=”utf-8” />
28PROGRAMAÇÃO WEB
 </head>
 <body>
 <h1>Resíduo Eletrônico</h1>
 </body>
</html>
A segunda for-
ma de inserir caracteres 
acentuados é através do 
emprego de entidades 
html, com o intuito de 
codificar estes caracte-
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
© Copyright &copy; &#169;
® Marca Registrada &reg; &#174;
< Menor que &lt; &#60;
> Maior que &gt; &#62;
& E comercial &amp; &#38;
ç Cedilha &ccedil; &#231;
ã Acento &atilde; &#227;
<html>
 <head>
 <title>Pagina de programacao web</title>
 <meta http-equiv=”content type” 
content=”text/html” charset=”utf-8” />
 </head>
 <body>
 <h1>Resíduo Eletrônico</h1>
 <p>
 &copy;&lt;teste&gt;
 </p>
 </body>
</html>
Neste link você poderá acessar uma lista de caracteres 
especiais que podem ser adicionados em uma página html. 
Hyperlinks e Âncoras 
 A internet que conhecemos atualmente, tem como uma 
de suas principais características a possibilidade de navegação 
entre as páginas da internet. A partir desse conceito, foi possível 
http://www.lsi.usp.br/~help/html/iso.html
29PROGRAMAÇÃO WEB
criar hipertextos e interligar os mesmos, 
criando, dessa forma, uma teia mundial 
de informações.
 O elemento utilizado para este re-
curso é conhecido como elemento âncora, 
o qual destina-se a marcar um conteúdo 
qualquer de um documento, seja ele um 
texto, uma imagem ou uma animação, 
com o qual o usuário poderá interagir, de 
forma que a partir desta iteração o mesmo 
possa navegar para um outro conteúdo na 
web. Como em:
<a href=”http://www.ftec.com.br”>Site 
da Ftec</a>
 No exemplo, quando clicarmos so-
bre o termo “Site da Ftec”, seremos redire-
cionados para o endereço web, contido na 
propriedade “href ”. Além da propriedade 
href, existem outras propriedades, apre-
sentadas a seguir:
 Name: Identifica um determinado 
ponto do documento que poderá ser utili-
zado como destino de um link. Esta pro-
priedade permite a navegação interna na 
página, de forma que, se clicado sobre um determinado link, irá se mover na própria 
página, posicionando o cursor no local destinado desta propriedade, por exemplo:
<html>
 <head>
 <title>Pagina de programacao web</title>
 <meta http-equiv=”content type” content=”text/html” 
 charset=”utf-8” />
 </head>
 <body>
 <h1>Resíduo Eletrônico</h1>
 <p>
 <a href=”#destino”>Clique aqui</a>
 </p>
 <p>paragrafo 1....</p>
 <p>paragrafo 2....</p>
 <p>paragrafo 3....</p>
 <p>paragrafo 4....</p>
 <p>
 <a name=”destino”></a>
 </p>
 </body>
</html>
No exemplo citado, quando o usuário clicar no hiperlink com o texto “Clique 
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”.
 Target: Define de que forma o documento referenciado pelo hiperlink será 
aberto no navegador. Para esta propriedade, podem ser utilizados os seguintes valores:
30PROGRAMAÇÃO WEB
_blank: o documento é aberto em uma nova janela;
_parent: o documento é aberto na janela pai do docu-
mento atual;
_self: o documento abre na mesma janela do documento;
_top: o documento abre no corpo da janela do documento 
atual.
<html>
 <head>
 <title>Pagina de programacao web</title>
 <meta http-equiv=”content type” 
 content=”text/html” charset=”utf-8” />
 </head>
 <body>
 <h1>Resíduo Eletrônico</h1>
 <p>
 <a href=”#destino” target=”_blank”> 
 Clique aqui</a>
 </p>
 </body>
</html>
Listas
As listas permitem estruturar e agrupar um conjunto de 
itens com características semelhantes. Estas listas podem ser 
conjuntos ordenados, os quais recebem uma marca de ordenação 
sequencial, que pode ser alfabética, numérica ou ainda, podem 
ser listas não ordenadas.
 Uma lista ordenada é representada pela tag <ol>, enquanto 
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 
tag <li>. Exemplo de uma lista ordenada:
<html>
 <head>
 <title>Pagina de programacao web</title>
 <meta http-equiv=”content type” 
 content=”text/html” charset=”utf-8” />
 </head>
 <body>
 <h1>Lista de frutas</h1>
 <ol>
 <li>Maça</li>
 <li>Laranja</li>
 <li>Melância</li>
 </ol>
 </body>
</html>
31PROGRAMAÇÃO WEB
Exemplo de uma lista não ordenada:
<html>
 <head>
 <title>Pagina de programacao web</title>
 <meta http-equiv=”content type” 
 content=”text/html” charset=”utf-8” />
 </head>
 <body>
 <h1>Lista de frutas</h1>
 <ul>
 <li>Maça</li>
 <li>Laranja</li>
 <li>Melância</li>
 </ul>
 </body>
</html>
Para as listas ordenadas, pode-se optar em definir o valor 
inicial da ordenação. Para isso, utilizamos a propriedade “start”, 
conforme pode-se observar no exemplo:
<html>
 <head>
 <title>Pagina de programacao web</title>
 <meta http-equiv=”content type” 
 content=”text/html” charset=”utf-8” />
 </head>
 <body>
 <h1>Lista de frutas</h1>
 <ol start=”4”>
 <li>Maça</li>
 <li>Laranja</li>
 <li>Melância</li>
 </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;
32PROGRAMAÇÃO WEB
 Caption: Esta tag permite definir um título para a tabela;
 Tr: Define a linha de uma tag;
 Th: Define uma célula para o título de uma coluna;
 Td: Define uma célula de uma coluna;
<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>
 </tr>
 <tr>
 <td>1</td>
 <td>José Silva</td><td>12/11/1979</td>
 </tr>
 <tr>
 <td>2</td>
 <td>Antonio Oliveira</td>
 <td>01/01/1990</td>
 </tr>
 <tr>
 <td>3</td>
 <td>Carlos Silveira</td>
 <td>27/08/1966</td>
 </tr>
 </table>
 </body>
</html>
Além das tags apresentadas, existem diversas propriedades 
que podem ser empregadas na construção de tabelas. Segue uma 
lista das propriedades mais utilizadas:
 Border: Permite definir se uma tabela deve possuir borda. 
Esta propriedade pode possuir valor “0” ou “1” para desativar 
ou ativar as bordas, respectivamente. Esta propriedade pode ser 
aplicada à tag table.
33PROGRAMAÇÃO WEB
 <table border=”1”>
 <tr>
 <th>Código</th>
 <th>Nome</th>
 <th>Data de Nascimento</th>
 </tr>
 <tr>
 <td>1</td>
 <td>José Silva</td>
 <td>12/11/1979</td>
 </tr>
 <tr>
 <td>2</td>
 <td>Antonio Oliveira</td>
 <td>01/01/1990</td>
 </tr>
 </table
Cellpadding: Define o espaçamento em pixels entre o 
conteúdo de uma célula e as suas bordas. Esta propriedade pode 
ser aplicada à tag table.
<table border=”1” cellpadding=”10”>
 <tr>
 <th>Código</th>
 <th>Nome</th>
 <th>Data de Nascimento</th>
 </tr>
 <tr>
 <td>1</td>
 <td>José Silva</td>
 <td>12/11/1979</td>
 </tr>
 <tr>
 <td>2</td>
 <td>Antonio Oliveira</td>
 <td>01/01/1990</td>
 </tr>
 </table>
Cellspacing: Define o espaçamento em pixels entre as 
células de uma tabela. Essa propriedade pode ser aplicada às 
tag th ou td.
<table border=”1” cellspacing=”10”>
 <tr>
 <th>Código</th>
 <th>Nome</th>
 <th>Data de Nascimento</th>
 </tr>
 <tr>
 <td>1</td>
 <td>José Silva</td>
 <td>12/11/1979</td>
 </tr>
 <tr>
 <td>2</td>
 <td>Antonio Oliveira</td>
 <td>01/01/1990</td>
 </tr>
 </table>
34PROGRAMAÇÃO WEB
Width: Define a largura da tabela em percentual. Se in-
formado 100%, a tabela irá ocupar toda a largura do documento 
no navegador. Esta propriedade pode ser aplicada na tag table 
e na tag td ou th.
 <table border=”1” width=”50%”>
 <tr>
 <th width=”20%”>Código</th>
 <th width=”60%”>Nome</th>
 <th width=”30%”>Data de Nascimento</th>
 </tr>
 <tr>
 <td>1</td>
 <td>José Silva</td>
 <td>12/11/1979</td>
 </tr>
 <tr>
 <td>2</td>
 <td>Antonio Oliveira</td>
 <td>01/01/1990</td>
 </tr>
 </table>
Bgcolor: Esta propriedade define a cor de fundo de uma 
tabela, linha ou célula, podendo ser aplicada às tags table, tr, 
th e td.
 <table border=”1” width=”50%”>
 <tr>
 <th width=”20%”>Código</th>
 <th width=”60%”>Nome</th>
 <th width=”30%”>Data de Nascimento</th>
 </tr>
 <tr bgcolor=”blue”>
 <td>1</td>
 <td>José Silva</td>
 <td>12/11/1979</td>
 </tr>
 <tr>
 <td bgcolor=”red”>2</td>
 <td>Antonio Oliveira</td>
 <td>01/01/1990</td>
 </tr>
 </table>
35PROGRAMAÇÃO WEB
Rowspan: Esta propriedade permite mesclar células entre 
linhas da tabela. O valor atribuído a ela refere-se à quantidade de 
células que serão mescladas, devendo esta ser aplicada à tag td.
 Colspan: Essa propriedade permite mesclar células en-
tre colunas da tabela. O valor atribuído refere-se à quantidade 
de células que serão mescladas, devendo esta propriedade ser 
aplicada à tag td.
 <table border=”1”>
 <tr>
 <td colspan=”3”>1</td>
 <td>4</td>
 </tr>
 <tr>
 <td>5</td>
 <td rowspan=”3”>6</td>
 <td>7</td>
 <td>8</td>
 </tr>
 <tr>
 <td>9</td>
 <td>11</td>
 <td>12</td>
 </tr>
 <tr>
 <td>13</td>
 <td>15</td>
 <td>16</td>
 </tr>
 </table>
Nota: As tabelas permitem, além de exibir dados em for-
mato tabular, organizar e estruturar o conteúdo de elementos 
de uma página. Dentro de uma determinada célula de tabela 
podem ser adicionados quaisquer outros elementos, inclusive, 
outras tabelas. Atualmente, essa aplicação para as tabelas tem 
sido menos utilizada, dando lugar ao conceito de sites tableless.
Formulários HTML
 Em diversas situações existe a necessidade de enviar in-
formações da página web para o servidor, onde a mesma está 
hospedada. Esta atividade está presente em situações bastante 
comuns, como, por exemplo, no cadastramento de um cliente 
em um e-commerce ou ainda, na própria compra de um item 
pela internet, que exige que a página envie para o servidor as 
informações relativas à compra que está sendo efetuada.
 Para ser possível utilizar este recurso, devemos utilizar 
a tag form, e dentro desta tag devem ser adicionadas todas as 
demais tags que recebem informações do usuário. Assim, essa 
tag necessita de três propriedades a serem descritas:
 Name: Define o nome do formulário;
 Method: Define a forma de envio do formulário para o 
servidor. Podem ser empregados dois valores: GET e POST. 
Quando empregado GET, as informações são enviadas para 
36PROGRAMAÇÃO WEB
o servidor através da URL da página. No caso do POST, as 
informações são enviadas de forma oculta, garantindo mais 
segurança para o processo de envio.
 Action: Local onde deve ser inserida a url contendo o 
endereço do servidor que processa a página html.
<html>
 <head>
 <title>Pagina de programacao web</title>
 <meta http-equiv=”content type” 
 content=”text/html” charset=”utf-8” />
 </head>
 <body>
 <form name=”cadastro” method=”GET” 
 action=”http://www.ftec.com.br/processa.aspx”>
 <!--
 Local onde serão adicionados os 
 elementos do formulário
 -->
 </form>
 </body>
</html>
No interior da tag form, podem ser inseridas tags que 
permitem aos usuários adicionar informações no formulário. 
Além disso, todas essas tags necessitam da propriedade name 
para permitir que o campo possa ser identificado no servidor.
• Tipo Input: A tag do tipo input permite a inclusão de 
textos ou seleções pelo usuário. Esta tag possui a proprie-
dade type, a qual permite criar variações de tipos para 
este campo e também possuem a propriedade value, a 
qual define um valor padrão para cada tag.
• Tipo Text: Define um campo do tipo texto.
<form name=”cadastro” method=”GET” 
action=”http://www.ftec.com.br/processa.aspx”>
 <input type=”text” value=”usuario”></input>
</form>
• Tipo Password: Define um campo do tipo password, sem 
permitir visualizar o seu conteúdo;
<form name=”cadastro” method=”GET” 
action=”http://www.ftec.com.br/processa.aspx”>
 <input type=”text” value=”usuario”></input>
 <input type=”password” value=”usuario”></input>
</form>
• Tipo Radio: Permite selecionar uma opção dentre várias. 
Para ser possível fazer esta seleção, todos os itens devem 
possuir o mesmo valor para a propriedade name.
<form name=”cadastro” method=”GET” action=”http://www.
ftec.com.br/processa.aspx”>
 <input type=”text” value=”usuario”></input>
 <input type=”password”></input>
 <input type=”radio” name=”sexo” value=”m”>Masculino</input>
37PROGRAMAÇÃO WEB
 <input type=”radio” name=”sexo” value=”f”>Feminino</input>
</form>
• 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”>
 <input type=”text” value=”usuario”></input>
 <input type=”password”></input>
 <input type=”radio” name=”sexo” value=”m”>Masculino</input>
 <input type=”radio” name=”sexo” value=”f”>Feminino</input>
 <input type=”checkbox” value=”email”>Contato por email</input>
 <input type=”checkbox” value=”telefone”>Contato por telefone </input>
</form>
• Tipo Hidden: Permite adicionar um valor para um campo 
oculto;
<form name=”cadastro” method=”GET” action=”http://www.
ftec.com.br/processa.aspx”>
 <input type=”text” value=”usuario”></input>
 <input type=”password”></input>
 <input type=”radio” name=”sexo” value=”m”>Masculino</input>
 <input type=”radio” name=”sexo” value=”f”>Feminino</input>
 <input type=”checkbox” value=”email”>Contato por email</input>
 <input type=”checkbox” value=”telefone”>Contato 
 por telefone </input>
 <input type=”hidden” name=”codigo” value=”1”></ 
 input>
</form>
• Tipo Select: Este campo permite criar uma caixa de seleção 
com valores definidos. Para criar os elementos de seleção 
desta tag, devem ser empregadas tags do tipo option.
<form name=”cadastro”method=”GET” action=”http://www.
ftec.com.br/processa.aspx”>
 <input type=”text” value=”usuario”></input>
 <input type=”password”></input>
 <input type=”radio” name=”sexo” 
 value=”m”>Masculino</input>
 <input type=”radio” name=”sexo” 
 value=”f”>Feminino</input>
 <input type=”checkbox” value=”email”>Contato por 
 email</input>
 <input type=”checkbox” value=”telefone”>Contato 
 por telefone </input>
 <input type=”hidden” name=”codigo” value=”1”></ 
 input>
 <select name=”uf”>
 <option>SP</option>
 <option>SC</option>
 <option>RJ</option>
 <option>RS</option>
 </select>
</form>
• Tipo TextArea: Este campo permite incluir uma caixa 
de texto para digitação.
38PROGRAMAÇÃO WEB
<form name=”cadastro” method=”GET” action=”http://www.
ftec.com.br/processa.aspx”>
 <input type=”text” value=”usuario”></input>
 <input type=”password”></input>
 <input type=”radio” name=”sexo” 
 value=”m”>Masculino</input>
 <input type=”radio” name=”sexo” 
value=”f”>Feminino</input>
 <input type=”checkbox” value=”email”>Contato por 
email</input>
 <input type=”checkbox” value=”telefone”>Contato 
por telefone </input>
 <input type=”hidden” name=”codigo” value=”1”></
input>
 <select name=”uf”>
 <option>SP</option>
 <option>SC</option>
 <option>RJ</option>
 <option>RS</option>
 </select>
 <textarea name=”observacoes”>
 
 </textarea>
</form>
• Tipo Submit: Este botão, quando clicado, envia a infor-
mação para o servidor;
• Tipo Reset: Este botão, quando clicado, limpa as infor-
mações dos campos do formulário, restaurando os valores 
padrões aos campos.
<form name=”cadastro” method=”GET” action=”http://www.
ftec.com.br/processa.aspx”>
 <input type=”text” value=”usuario”></input>
 <input type=”password”></input>
 <input type=”radio” name=”sexo” 
 value=”m”>Masculino</input>
 <input type=”radio” name=”sexo” 
 value=”f”>Feminino</input>
 <input type=”checkbox” value=”email”>Contato por 
 email</input>
 <input type=”checkbox” value=”telefone”>Contato 
 por telefone </input>
 <input type=”hidden” name=”codigo” value=”1”></ 
 input>
 <select name=”uf”>
 <option>SP</option>
 <option>SC</option>
 <option>RJ</option>
 <option>RS</option>
 </select>
 <textarea name=”observacoes”>
 
 </textarea>
 <input type=”submit” value=”enviar”></input>
 <input type=”reset” value=”limpar cadastro”></ 
 input>
</form>
O exemplo a seguir, ilustra um formulário completo, 
estruturado com o uso de tabelas.
39PROGRAMAÇÃO WEB
<html>
 <head>
 <title>Pagina de programacao web</title>
 <meta http-equiv=”content type” 
 content=”text/html” charset=”utf-8” />
 </head>
 <body>
 <form name=”cadastro” method=”GET” 
 action=”http://www.ftec.com.br/processa. 
 aspx”>
 <table>
 <tr>
 <td>Nome:</td>
 <td><input type=”text” 
 value=”usuario”></input></td>
 </tr>
 <tr>
 <td>Senha</td>
 <td><input 
 type=”password”></input></td>
 </tr>
 <tr>
 <td>Sexo</td>
 <td>
 <input type=”radio” 
 name=”sexo” 
 value=”m”>Masculino 
 </input>
 <input type=”radio” 
 name=”sexo” 
 value=”f”>Feminino 
 </input>
 </td>
 </tr>
 <tr>
 <td>Contato</td>
 <td>
 <input 
 type=”checkbox” 
 value=”email”>Contato 
 por email</input>
 <input 
 type=”checkbox” 
 value= 
 ”telefone”> Contato por 
 telefone </input>
 </td>
 </tr>
 <tr>
 <td>UF</td>
 <td>
 <select name=”uf”>
 <option>SP 
 </option>
 <option>SC 
 </option>
 <option>RJ 
 </option>
 <option>RS 
 </option>
 </select>
 <td>
 </tr>
 <tr>
 <td>Observacoes</td>
 <td><textarea name= 
40PROGRAMAÇÃO WEB
 ”observacoes”></textarea></td>
 </tr>
 </table>
 <input type=”submit” value=”Enviar”></ 
 input>
 <input type=”reset” value=”Limpar”></ 
 input>
 </form>
 </body>
</html>
Inclusão de Elementos de Áudio e Vídeo
 Até alguns anos atrás, não existia uma maneira padro-
nizada de exibir vídeos e áudios pelo navegador. Tudo era feito 
com plugins específicos de cada fabricante. Por exemplo, o 
Youtube utilizava o f lash.
 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;
41PROGRAMAÇÃO WEB
 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.
46PROGRAMAÇÃO WEB
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.
47PROGRAMAÇÃO WEB
Noções de Design
Web design é uma vertente do de-
sign gráfico voltada para a criação de we-
bsites e documentos para o ambiente on-
line, valendo-se de alguns preceitos como 
arquitetura da informação, usabilidade, 
acessibilidade, layout, entre outros. O ob-
jetivo do design voltado para web é expor 
da forma mais ágil, atrativa e simples um 
produto ou informação aos usuários que 
visitarem aquele site.
Arquitetura de Informação
Arquitetura de Informação é a téc-
nica que empregamos para dar forma a 
produtos e experiências de informação, de 
modo a suportar a facilidade de acesso ao 
conteúdo e a usabilidade. 
Sem um bom entendimento do 
propósito e das informações que irão ser 
dispostas no site, não poderemos realizar 
um bom trabalho quanto à usabilidade, 
acessibilidade e ao próprio layout da página 
(arte) em si. 
Boas práticas em arquitetura levam 
em conta, por exemplo: analisar como seria 
o tipo de navegação do usuário que irá 
acessar o site; fortalecer os mecanismos 
de busca dentro do próprio site para que 
se necessário, o usuário tenha facilidade 
ao fazer suas pesquisas, principalmente 
quando o conteúdo apresentado for ex-
tenso; rotular e particionar o conteúdo de 
maneira a tornar a navegação do usuário 
mais intuitiva e natural; evitar ao máximo 
que o usuário tenha que descer muitos 
níveis dentro do site para encontrar o que 
deseja. O ideal é que tenhamos sempre 
que possível 3 níveis de navegação. Por 
exemplo: 
Home > Categorias de Produtos > 
Detalhes de um produto
48PROGRAMAÇÃO WEB
Usabilidade
A usabilidade é um atributo de qua-
lidade de um produto que permite medir o 
grau de facilidade que um usuário tem ao 
utilizar uma interface. Também é empre-
gada para se referir ao conjunto de métodos 
destinados a melhorar a utilização de um 
produto ou aplicação, seja ela qual for. A 
usabilidade é definida em 5 dimensões:
Aprendizagem
Quão fácil é para os usuários reali-
zarem tarefas básicas no primeiro contato 
com a interface ou web site?
Eficiência
Depois dos usuários se tornarem 
experientes na utilização da interface ou 
website, quão rápido conseguem realizar 
as tarefas?
Memorização
Depois de um longo período de 
ausência, quão facilmente os usuários 
conseguem restabelecer o seu nível de 
proficiência?
Robustez
Quantos erros cometem os usuários, 
quão graves são esses erros, e qual a faci-
lidade com que conseguem se recuperar 
deles? 
No caso de um website, as infor-
mações são encontradas? O acesso a essas 
informações é simples? (Note que a usa-
bilidade tem uma grande relação com a 
arquitetura da informação).
Satisfação
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 
49PROGRAMAÇÃO WEB
que tentamos tratar essas necessidades, 
aliadas ao objetivo de um projeto, falamos 
em acessibilidade. 
Quando se trata de acessibilidade, 
principalmente com relação a sites gover-
namentais, a primeira noção que nos vem 
à mente é um conjunto de ferramentas que 
facilitem a navegação para pessoas com 
algum tipo de necessidade especial, por 
exemplo, uma pessoa cega, ou que seja 
extremamente leiga quanto ao funciona-
mento da internet. 
No entanto, acessibilidade engloba 
variadas ferramentas e boas práticas pa-
ralelas a essas, empregadas no caso acima, 
como o crescimento da utilização de celu-
lares para navegar na web, que necessita 
de adaptação de conteúdo, visto que, se 
tratando de um website convencional, a 
navegação é dificultada por cortar o con-
teúdo ou apresentá-lo de forma que não 
propícia à navegação mobile. Dessa for-
ma, utilizando o design responsivo, que se 
adapta naturalmente ao tamanho de tela 
e a capacidade do dispositivo móvel do 
usuário, acaba sendo natural que o usuário 
clara, o que a empresa tem para oferecer 
e o que os usuários podem fazer no site, 
as pessoas desistem.
Se os usuários se perdem num websi-
te, desistem. Se a informação contida num 
website é de difícil leitura e não responde 
às questões-chave dos utilizadores, eles 
desistem. É irreal pensar que um usuário 
irá ler um manual para aprender a navegar 
em um determinado site ou plataforma. 
Existem numerosas alternativas online; 
desistir e abandonar o site é a primeira de-
fesa que um usuário tem quando encontra 
dificuldades de sua utilização.
Acessibilidade
Quando nós publicamos na internet 
um website, é nossa a responsabilidade 
atender as necessidades do usuário e que 
ele possa usá-lo de forma clara. Entre esses 
usuários, é possível que existam pessoas 
com necessidades específicas, que este-
jam navegando através de um dispositivo 
móvel, ou que dispõem de uma conexão 
precária com a internet. Assim, sempre 
50PROGRAMAÇÃO WEB
ros de colunas de texto e outros aspectos 
relevantes.
O layout de uma página vai depen-
der da criatividade e do conteúdo que vai 
conter. Por esse motivo, muitas vezes o 
cliente dá indicações precisas ao designer, 
para que ele possa, através da arquitetura 
de informação, técnicas de usabilidade e 
acessibilidade, trabalhar no layout. Desse 
modo, o layout consiste em um rascunho, 
esboço ou projeto, um trabalho prévio que 
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 
evoluído, quando o projeto já está em uma 
fase mais avançada.
opte, mais comumente, em retornar ao 
segundo site para novas visitas. 
Outro fator importante que está li-
gado a acessibilidade é a visibilidade de 
um site perante aos mecanismos de busca(Google, por exemplo). Para tal, é neces-
sário um uso aprofundado de algumas 
técnicas de programação para tornar o 
site mais acessível a esses mecanismos e 
melhorar o seu ranking nas pesquisas.
Layout
Layout é uma palavra inglesa, que 
significa plano, arranjo, esquema, design 
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.
Questões para recapitularmos!
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?
53PROGRAMAÇÃO 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. 
54PROGRAMAÇÃO WEB
Conceito
Com a evolução da internet, as pá-
ginas web tinham a necessidade de atrair 
mais atenção do usuário, de modo que ele 
obtivesse uma experiência mais satisfatória 
na absorção do conteúdo apresentado, seja 
ele qual for. Uma das peças responsáveis 
por trazer essa melhor visualização de 
páginas HTML foi a linguagem CSS - 
Cascading Style Sheets ou folhas de estilo 
em camadas.
Por meio do CSS é possível mani-
pular tanto visual (a maneira como são 
impressos os elementos no navegador), 
quanto estruturalmente (como o elemento 
se comporta em relação ao demais ele-
mentos da página) às propriedades dos 
elementos HTML. A seguir vemos um 
exemplo de como é a estrutura CSS e outro 
exemplo prático do seu uso.
propriedade: valor;
 seletor {
 propriedade: valor;
 }
color: red;
font-size: 10px;
Forma de Aplicação e 
Precedências do CSS
 Como vimos, os estilos sempre de-
vem estar associados a algum elemento 
do HTML. A forma como nós fizemos 
esta associação depende do resultado que 
queremos obter ao final do desenvolvi-
mento. Nós podemos aplicar o CSS de 
três formas, conforme veremos a seguir.
Estilos locais (in-line) 
Neste modelo, o estilo é aplica-
do diretamente à TAG HTML e deve 
ser utilizado dentro do atributo HTML 
“style”, junto com a TAG desejada. Esta 
utilização deve ser evitada de modo geral, 
ou ter uma utilização muito pontual, pois 
por ser inserida diretamente na tag, não 
permite nenhuma reutilização, levando, 
por exemplo, a um arquivo mais extenso 
e de maior dificuldade na hora da manu-
tenção. Exemplo:
<p style=”color:red; margin-left:20px;”> 
Este é um parágrafo vermelho</p>
Estilo Incorporado
Nesta forma de incluir CSS no 
HTML todos os estilos são inseridos em 
um único local da página. Estes CSSs 
devem ser incluídos sempre no cabeçalho 
(head)1 da página HTML, dentro de uma 
TAG style. Exemplo:
<head>
 <style type=”text/css”>
 p {
 color: red;
 margin-left: 20px;
 }
 </style>
</head>
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, 
uma página HTML é lida pelo navegador de maneira descendente (de 
cima para baixo), de modo que ao incluirmos o CSS no topo evitamos o 
chamado FOUC (flash of unstyled content - lampejo de conteúdo não 
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.
55PROGRAMAÇÃO WEB
<html>
 <head>
 <link rel=”stylesheet” href=”arquivo.css” 
 type=”text/css”/>
 <style>
 div {
 background-color: #000000; 
 }
 </style>
 </head>
 <body>
 <div style=”background-color: #ffff00”></div>
 </body>
</html>
No “arquivo.css” temos:
 div {
 background-color: blue;
 }
Para que o browser decida qual regra irá aplicar, ele segue 
algumas regras gerais de precedência. A seguir é apresentada 
sua ordem de relevância onde, por exemplo, um estilo in-line 
tem mais “força” que um estilo externo. 
1. Estilo In-line;
2. Estilo In-page;
Estilo Linkado ou Externo
Nesta forma de inclusão do CSS, todo o estilo é escrito em 
um ou mais arquivos (.css) externos à página HTML, sendo os 
mesmos referenciados através da TAG <link/> no cabeçalho da 
página. Esta maneira de aplicar estilos a uma página apresenta 
vantagens sobre as demais por permitir que uma mesma folha 
de estilo seja aplicada a diversas páginas HTML, e permitindo 
também que estes estilos fiquem salvos no cache2 do navegador, 
por exemplo.
<head>
 <link rel=”stylesheet” href=”arquivo.css” type= 
 ”text/css”/>
</head>
Precedência	de	Estilos
As três formas de aplicação de estilos que vimos ante-
riormente (in-line, in-page, externo) podem ser inclusas na 
mesma página, referindo-se ao mesmo elemento. Quando isso 
ocorre, qual das formas de aplicação irá, efetivamente, estilizar 
o elemento? Exemplo:
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 
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.
56PROGRAMAÇÃO WEB
3. Folha de Estilo Externa (linkada);
4. Estilo padrão do navegador.3
Tags adicionais de HTML para 
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 
neste caso, a tag <p>, que representa um 
parágrafo, contém todo o conteúdo do 
mesmo. Para resolver este tipo de situação, 
existe uma tag HTML chamada “Span”, 
que tem por objetivo permitir o incluso de 
CSS para partes do código que não são 
gerenciadas por um elemento HTML. 
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, 
o que varia de browser para browser. As propriedades iniciais do browser 
são sobrepostas naturalmente por qualquer uma das 3 precedências apre-
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.
<p> Este é um texto em <span style=”font-style:italic”> italico </span></p>
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 
conteúdo de acordo com o seu objetivo de negócio.
<div>
 <h3> Ultimanoticia </h3>
 <p>conteúdo de um paragrafo </p>
</div>
Seletores
Quando fazemos uso de um estilo in-page ou externo na nossa página, ne-
cessitamos de uma forma para conciliarmos nossas regras de CSS com os elementos 
presentes na página. Isso se faz através do uso de seletores CSSs, sendo os principais:
57PROGRAMAÇÃO WEB
SELETOR DE TIPO
Um seletor de tipo combina com 
qualquer instância de um determinado tipo 
de elemento. Veja no exemplo, que este 
tipo de seletor permite aplicarmos o estilo 
com a própria tag. Aqui, estamos dizendo 
que todo o parágrafo terá cor vermelha.
 p { 
 color:red;
 }
SELETOR DESCENDENTE
Neste seletor, podemos escolher um 
ou mais elementos que estão dentro de 
outro elemento para aplicar o estilo. Ou 
seja, que são descendentes do elemento 
principal. 
 p span {
 color: blue; 
 }
Para esse trecho de código apre-
sentado, atribuímos a cor de texto azul a 
todas as tags span que estão dentro de pa-
rágrafos (p). Sendo possível selecionarmos 
com ainda mais especificidade, escrevendo 
mais elementos, como: 
Neste exemplo, atribuímos um ta-
manho de fonte de 14px(pixels) a todas 
tags span que estão dentro de link (a), 
situados em parágrafos (p), dentro de uma 
tag div.
 div p a span {
 font-size: 14px;
 }
Não há um limite para esta utili-
zação, porém, o uso em demasia, tanto 
de seletores de tipo simples quanto de 
descendência, acaba necessitando de um 
maior processamento do navegador para 
organizar a página e localizar o elemento 
a ser estilizado, o que por sua vez, torna 
a impressão da página mais lenta. Assim, 
recomendamos que ao invés de utilizar 
seletores de tipo em uma descendência, 
usemo-nos seletores de classe ou ID ,sem-
pre que for possível e que um seletor de 
descendência não possua mais que 4 níveis. 
Exemplo:
 p span {
 color: blue;
 }
Se possível, opte por estes:
 texto span {
 color: blue;
 }
Na página teremos:
<p class=”texto”>este texto tem uma 
palavra em <span>azul</span></p> 
<p class=”texto”>este texto tem 
uma palavra em <span class=”span-
texto”>azul</span></p>
SELETOR DE ID
Aplicamos um seletor de ID a um 
elemento, especificado na página, atra-
vés do atributo ID=”nome_id”; todo ID 
é único, podendo ser utilizado somente 
58PROGRAMAÇÃO WEB
uma vez no mesmo documento. Exemplo:
Na página temos:
<p id=”texto”>Meu texto com ID</p>
No arquivo CSS temos:
 #texto {
 Font-weight: bold:
 }
Perceba que dentro do arquivo CSS 
a diferenciação de um seletor de ID é feita 
através do caractere “#”, antes do nome 
do seletor.
SELETOR DE CLASSE
Aplicamos um seletor de classe a 
todo e qualquer elemento especificado 
na página pelo atributo class=”nome_da_
class”. A grande vantagem do uso de sele-
tores de classe é que ela pode ser utilizada 
sem restrições dentro de um mesmo do-
cumento. Fazendo com que o uso de CSS, 
por meio de classes, torne o código mais 
“reciclável”, já que pode ser usado mais 
de uma vez na página permitindo que se 
digite menos códigos. Exemplo:
Na página:
<div class=”content”> </div>
No arquivo CSS:
 .content{
 width:200px; 
 }
Note que dentro do arquivo CSS 
a diferenciação de um seletor de classe é 
feita pelo caractere “.” antes do nome do 
seletor.
SELETOR UNIVERSAL
Este seletor é usado como o nome 
sugere, para atribuir propriedades a todos 
os elementos da página. Ele é definido por 
um asterisco antes das chaves que abrem e 
fecham a declaração. Exemplo de arquivo 
CSS:
 *{
 margin:0;
 }
As boas práticas nos recomendam 
não atribuir muitas propriedades para este 
tipo de seletor, pois ele também interfere 
no carregamento da página; normalmen-
te é usado para zerar margens e padding 
(espaçamento interno) dos elementos.
PSEUDO-CLASSES
Pseudo-classes são tipos de classes 
especiais que NÃO são definidas pelo 
desenvolvedor (já são pré-definidas). São 
mais utilizadas para atribuir propriedades 
que destacam links (TAGs [a]) novos ou já 
visitados, para alterar as propriedades de 
um elemento quando o cursor do mouse 
estiver sobre ele, entre outros. O seletor 
de pseudo-classe é escrito com o nome do 
elemento ou seletor + dois pontos + nome 
da pseudo-classe. Exemplo:
 a:hover {
 color: blue;
 }
59PROGRAMAÇÃO WEB
Outras pseudo-classes de links:
• Com o seletor a:link, estilizamos 
apenas os links não-visitados, ou 
seja, links no seu estado normal.
• Com o seletor a:visited, estilizamos 
apenas links visitados, ou seja, que 
já foram clicados.
• Com o seletor a:hover, estilizamos 
links quando o mouse está em cima 
do mesmo. Com essa pseudo-classe 
podemos fazer diversos efeitos in-
teressantes. Também, podendo ser 
aplicada a qualquer elemento, não 
apenas em links, o que a torna ainda 
mais útil.
• Com o seletor a:focus, estilizamos 
links quando os selecionamos com 
o teclado, através da tecla Tab. Essa 
pseudo-classe é útil para estilizar 
links para pessoas que possuem ha-
bilidade limitada e não conseguem 
utilizar o mouse, por exemplo.
• Com o seletor a:active, estilizamos 
um link quando o mouse está sendo 
clicado ou se pressionarmos a tecla 
“Enter”, ativando o link.
Unidade de Medida em CSS
As unidades de medida de compri-
mento CSS referem-se às medidas na ho-
rizontal ou na vertical (e em sentido mais 
amplo, em qualquer direção).
O formato para declarar o valor de 
uma unidade de medida CSS é um número 
com ou sem ponto decimal, podendo ser 
precedido por um sinal ‘-’ (menos), sen-
do o sinal ‘+’ (mais) o valor “default” e, 
imediatamente, seguido por uma unidade 
identificadora. A unidade identificadora 
é opcional quando se declara um valor ‘0’ 
(zero) e para algumas propriedades em 
específico.
Algumas das propriedades CSS 
permitem que sejam declarados valores 
negativos para unidades de medida. A 
adoção de valores negativos pode dificultar 
a formatação dos elementos e devem ser 
usados com cautela. Se valores negativos 
não forem suportados pela aplicação de 
usuário, eles serão convertidos para o va-
lor mais próximo suportado (e isso pode 
tornar-se desastroso para um layout).
UNIDADE DE MEDIDA RELATIVA
 A unidade de medida relativa é 
aquela tomada em relação a uma outra 
medida. Folhas de Estilo em Cascata que 
usam unidades de comprimento relati-
vas são mais apropriadas para ajustes de 
uso em diferentes tipos de mídia. (Por 
exemplo, de uma tela de monitor para uma 
impressora laser).
O valor é tomado em relação a:
• em: ao tamanho da fonte (‘font-si-
ze’) herdado;
• ex: a altura da letra x (xis) da fonte 
herdado;
• px: ao dispositivo de exibição medi-
da, mais comumente usada);
60PROGRAMAÇÃO WEB
• %: a uma medida previamente de-
finida (normalmente relacionada ao 
elemento pai).
UNIDADE DE MEDIDA – PIXEL
A unidade de medida de compri-
mento pixel é relativa à resolução do dis-
positivo de exibição (a tela de um monitor, 
por exemplo). A mais simples definição 
de pixel seria:
Pixel é o menor elemento em um 
dispositivo de exibição, ao qual é possível 
atribuir-se uma cor.
Considere um dispositivo de exi-
bição construído com uma densidade de 
90 dpi (dpi = dots per inch = pontos por 
polegada). Por definição, a referência pa-
drão para pixel é igual a um ponto no 
dispositivo citado. Daí, pode-se concluir 
que 1 pixel naquele dispositivo de exibição 
é igual a 1/90 inch = 0,28 mm.
Para uma densidade de 300 dpi 1 
pixel é igual a 1/300 inch = 0,085mm.
Assim, pixel é uma medida ligada a 
resolução do dispositivo de exibição.
UNIDADE DE MEDIDA ABSOLUTA
É aquela que não está referenciada a 
qualquer outra unidade e nem é herdada. 
São unidades de medida de comprimento, 
definidas nos sistemas de medidas pela 
física e são conhecidos como “centímetros, 
polegadas etc. São indicadas para serem 
usadas quando as mídias de exibição são 
perfeitamente conhecidas.
• pt: ponto 
• pc: pica 
• mm: milímetro 
• cm: centímetro 
• in: polegada
Estilos para Formatação de Texto
 Até o momento, entendemos como 
podemos estruturar e organizar o CSS 
dentro da nossa página. A partir de agora, 
precisamos conheceras propriedades do 
CSS que nos permitem aplicar formatações 
aos textos da nossa página.
Propriedade Color:
A propriedade color é utilizada para 
definir uma cor para um texto. Em CSS, 
uma cor de fonte pode ser definida de três 
maneiras:
• Com um valor em hexadecimal, 
como #ffff00 (vermelho);
• Com um valor em RGB, como rgb 
(255,255,0) (vermelho);
• Com um nome, como red;
61PROGRAMAÇÃO WEB
<html>
 <head>
 <style>
 .texto-1{
 color:red;
 }
 .texto-2{
 color:#0000ff;
 }
 .texto-3{
 color:rgb(0,255,0);
 }
 </style>
 </head>
 <body>
 <p class=”texto-1”>cor vermelha</p>
 <p class=”texto-2”>hexadecimal da cor azul</p>
 <p class=”texto-3”>RGB da cor vermelha</p>
 </body>
</html>
Propriedade Text-align:
A propriedade text-align faz exatamente o que o nome 
sugere: alinha o texto da mesma forma que ocorre com os edi-
tores de texto. Assim como na maioria dos editores de texto, 
existem quatro tipos de alinhamento para textos em HTML, 
com CSS:
• text-align: center: centraliza o texto.
• text-align: left: alinha o texto à esquerda.
• text-align: right: alinha o texto à direita.
• text-align: justify: ajusta o texto ao espaço determinado, 
ajustando os espaços entre fontes e entre palavras.
<html>
<head>
 <style>
 .esquerda{
 text-align:left;
 }
 .central{
 text-align:center;
 }
 .direita{
 text-align:right;
 }
 .justificado{
 text-align:justify;
 }
 </style>
</head>
<body>
 <p class=”esquerda”>alnhamento a esquerda</p>
 <p class=”central”>centralizado</p>
 <p class=”direita”>alinhamento a direita</p>
 <p class=”justificado”>este paragrafo esta usando 
62PROGRAMAÇÃO WEB
 um alinhamento justificado. Isso fara com que o texto 
 se adapte ao container onde estiver inserido 
 (note como o espacamento entre as letras e 
 palavras varia)</p>
</body>
</html>
Propriedade Text-transform:
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 CSS:
• uppercase: transforma o texto em questão para maiúsculas.
• lowercase: transforma o texto para minúsculas.
• capitalize: transforma cada primeira letra das palavras do 
texto em maiúscula.
<html>
<head>
 <style>
 .texto-1{
 text-transform:uppercade;
 }
 .texto-2{
 text-transform:lowercase;
 }
 .texto-3{
 text-transform:capitalize;
 }
 </style>
</head>
<body>
 <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 
 palavra ser maiuscula</p>
</body>
</html>
Propriedade Letter-spacing:
Esta propriedade nos permite definir o espaçamento entre 
as letras de um texto na página.
<html>
<head>
 <style>
 .texto-1{
 letter-spacing:-2px;
 }
 </style>
</head>
<body>
 <p class=”texto-1”>texto com espacamento 
 reduzido</p>
</body>
</html>
63PROGRAMAÇÃO WEB
Propriedade Word-spacing:
Como o nome sugere, essa propriedade define o espaça-
mento entre as palavras de um texto.
<html>
<head>
 <style>
 .texto-1{
 word-spacing:30px;
 }
 </style>
</head>
<body>
 <p class=”texto-1”>espacamento entre palavras 
 ampliado</p>
</body>
</html>
Propriedade Text-shadow:
Esta propriedade permite especificarmos uma sombra 
para o texto. Ela é composta por dois valores obrigatórios e 
dois valores opcionais. O valor padrão desta propriedade é none 
(neste caso, sem sombra):
Sintaxe:
• h-shadow: sombra horizontal (valores positivos aplicam 
a sombra à direita do texto, valores negativos aplicam a 
esquerda do texto);
• v-shadow: sombra vertical (valores positivos aplicam a 
sombra abaixo do texto, valores negativos aplicam acima 
do texto);
• blur: desfoque (quanto maior o valor, maior o desfoque); 
• color: cor da sombra;
 text-shadow: 2px 3px 5px rgb(0,0,0);
Propriedade Text-decoration:
Esta propriedade especifica uma decoração para o texto, 
normalmente usada para sublinhar. Possui os seguintes valores:
• none: nenhum (valor padrão de texto); 
• underline: sublinhado4 ;
• overline: sobrelinhado;
• line-through: riscado.
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.
64PROGRAMAÇÃO WEB
<html>
<head>
 <style>
 .texto-1{
 text-decotarion:none;
 }
 .texto-2{
 text-decotarion:underline;
 }
 .texto-3{
 text-decotarion:overline;
 }
 .texto-4{
 text-decotarion:line-through;
 }
 </style>
 </head>
<body>
 <p class=”texto-1”>texto normal</p>
 <p class=”texto-2”>texto sublinhado</p>
 <p class=”texto-3”>texto sobrelinhado</p>
 <p class=”texto-4”>texto riscado</p>
</body>
</html>
Propriedade Font-Family:
Com esta propriedade nós podemos especificar uma fa-
mília de fontes a ser atribuída ao documento ou determinado 
bloco de texto. Exemplo:
 p{
 font-family: “Times New Roman”, Times, serif;
 }
No exemplo, utilizamos a família “Times New Roman5” 
a fim de aplicar esta fonte à página. Nesse caso, o navegador 
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 
navegador: por este motivo esta propriedade deve ser descrita, 
sempre iniciando pela fonte desejada, seguida de uma ou mais 
fontes genéricas similares com a desejada. Garantindo, assim, 
que o navegador sempre chegue a um resultado, no mínimo, 
próximo ao desejado.
Propriedade Font-size:
Especifica o tamanho da fonte. Pode ser atribuído uma 
medida tanto relativa, quanto absoluta. Quando este valor não 
é setado pelo desenvolvedor acaba sendo orientado pelas pro-
priedades padrões do navegador.
<html>
<head>
 <style>
 .texto-1{
 /*Tamanho defindo pelo navegador*/
 }
5 Se o nome de uma família de fonte possuir mais de uma palavra, deve ser descrito entre aspas.
65PROGRAMAÇÃO WEB
 .texto-2{
 font-size:50%; /*Porcentagem em relacao ao valor 
 padrao do navegador*/
 }
 .texto-3{
 font-size:10pt; /*Tamanho definido por pontos. 
 10pt equivalr a 13 px aproxximadamente*/
 }
 </style>
</head>
<body>
 <p class=”texto-1”>tamanho da fonte</p>
 <p class=”texto-2”>tamanho da fonte</p>
 <p class=”texto-3”>tamanho da fonte </p>
</body>
</html>
Propriedade Font-weight:
Com esta propriedade nós especificamos o peso do tipo 
(caracteres da fonte). Podendo ser atribuídos valores como:
• ligther
• normal
• bold 
• bolder
A propriedade font-weight pode ser atribuída numerica-
mente através dos valores 100, 200, 300, 400, 500, 600, 700, 
800, 900. O valor 400 refere-se ao estilo normal e 700 o valor 
referente a bold.
<html>
 <head>
 <style>
 .texto-1{
 font-weight:bold;
 }
 .texto-2{
 font-weight:400;
 }
 </style>
 </head>
 <body>
 <p class=”texto-1”>peso da fonte em 700 ou 
 bold</p>
 <p class=”texto-2”>peso da fonte em 400 ou 
 normal</p>
 </body>
</html>
Propriedade Font-style:
Usado para alterar o estilo de renderização da fonte. Possui 
três valores:
66PROGRAMAÇÃO WEB
• Normal: o texto é renderizado normalmente.
• Itálico: o texto é renderizado em itálico.
• Oblique: o texto é renderizado relativamente “deitado” 
(valor similar ao itálico, porém menos suportado).
<html>
 <head>
 <style>
 .texto-1{
 font-style:normal;
 }
 .texto-2{
 font-style:italic;
 }
 .texto-3{
 font-style:oblique;
 }
 </style>
 </head>
 <body>
 <p class=”texto-1”>estilo normal</p>
 <p class=”texto-2”>estilo italico</p>
 <p class=”texto-2”>estilo obliquo</p>
 </body>
</html>
Fluxo de Página
O conhecimento do f luxo de página no CSS é um dos 
aspectos mais importantes no desenvolvimento de bons layouts. 
Trata-se de um conceito básico, porém às vezes pouco estudado 
no momento de manipularmos nossos elementos html, através 
de CSS.
Sabemos que as páginas web são codificadas em HTML e 
os elementos aparecem no código em uma determinada posição. 
O navegador, no momento que interpreta o código HTML da 
página, vai imprimindo os elementos, na tela, de acordo coma sua ordem na página (como as palavras neste texto) e as pro-
priedades estruturais padrão de cada TAG (como o elemento 
fica disposto na página).
A disposição padrão (display) dos elementos e a posição 
destes no código resulta na visualização dos elementos de uma 
forma específica. Esta forma de disposição e visualização é o 
que chamamos de f luxo de página. 
Com relação ao fluxo da página (disposição e visualização) 
existem 3 tipos de elementos.
67PROGRAMAÇÃO WEB
ELEMENTOS INLINE
Possuem a propriedade CSS display:inline; como padrão, 
ocupam somente a largura necessária para exibir seu próprio 
conteúdo. Só podem conter informações ou outros elementos 
“inline”. Diferente dos elementos nível de bloco, os elementos 
inline não começam em nova linha. Ficando dispostos lado a 
lado, até ocuparem toda largura disponível na página.
Exemplos de elementos (TAGs) inline:
• a
• img
• input
• label
• span
ELEMENTOS DE BLOCO
Possuem a propriedade CSS display:block; como padrão, 
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-
pre começam em nova linha. Um elemento que venha antes ou 
depois de um elemento de bloco é renderizado acima ou abaixo 
do elemento de bloco, nunca ao lado. Elementos de bloco podem 
conter elementos inline e outros elementos de bloco.
Exemplos de elementos (TAGs) de bloco:
• div 
• h1
• h2
• ul
• li
• p (a TAG p é inicialmente usada como um “bloco” de texto)
ELEMENTOS DE CABEÇALHO
Possuem a propriedade CSS display:none; como padrão, 
são definidos como elementos invisíveis, porque estão no do-
cumento, mas o usuário não os vê. Exemplos de elementos 
(TAGs) de bloco:
• meta
• link
• style
• title
68PROGRAMAÇÃO WEB
Todo elemento presente na página pode ter sua renderi-
zação padrão alterada através da propriedade “display”, o que 
interfere no f luxo da página.
PROPRIEDADE DISPLAY
A propriedade display determina como um elemento se 
comporta no fluxo da página, assim, por meio desta propriedade, 
podemos alterar o modo de renderização padrão dos elementos 
descritos no f luxo da página. Exemplo:
display: block;
Os valores mais usados são:
Inline: Como mencionado anteriormente, elementos com 
display inline se comportam como palavras em um arquivo 
de texto, colocando-se lado a lado até ocuparem toda largura 
disponível. Elementos inline são f lexíveis quanto a sua altura e 
largura, sempre forçando a visualização de TODO seu conteúdo. 
Um elemento inline pode receber propriedades como margem 
e espaçamento interno, assim como elementos de bloco.
<div>
 <span>ESSE E NOSSO PRIMEIRO SPAN</span>
 <a href=””>seguido de um link</a>
 <span>esse é nosso segundo span</span>
</div>
Block: Elementos com display block sempre promovem 
uma quebra de linha no f luxo da página. Um bloco contém 
um espaço em branco tanto em cima quanto embaixo e não 
permite outros elementos HTML ao lado, exceto quando tiver 
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 
quando possuírem altura e largura definidas por alguma medida 
específica, o que pode ocasionar o “vazamento” do conteúdo 
para fora do bloco, ou, que o bloco corte parte do conteúdo que 
ficará escondida durante a visualização da página.
Table: Display table força o elemento a se comportar como 
uma tabela html, transformando o elemento em um elemento 
de bloco, também provocando uma quebra de linha acima e 
abaixo de si mesmo. A maior diferença entre um elemento 
com display table e outro com display block é que uma tabela 
sempre irá acomodar todo seu conteúdo ou elementos filhos em 
seu interior. Não permitindo “vazamentos”, além disso, mesmo 
que tenha uma altura e largura definida a tabela irá crescer (se 
o conteúdo exceder seu tamanho) de acordo com a necessidade 
de seu conteúdo.
None: Quando atribuímos esta propriedade a um ele-
mento, ou ele já a possui por padrão, ele deixa de fazer parte 
do f luxo da página, atuando como se não existisse. Um ponto 
importante sobre display none:
69PROGRAMAÇÃO WEB
Mesmo que um elemento esteja com display none, ele será 
lido pelo navegador e inf luenciará o carregamento da página. 
Dessa forma, sempre que for possível remova os elementos da 
página, ao invés de atribuir display none a elementos que não 
serão usados ou não irão inf luenciar na renderização da página. 
Inline-Block E Inline-Table: Ambos se comportam como 
elementos de bloco com relação a suas dimensões e aninhamento 
(relação entre elemento pai e elemento filho), porém, coloca-se 
como elementos inline no f luxo da página (ou seja, na mesma 
linha do conteúdo adjacente).
<html>
 <head>
 <style>
 div{
 width:50px; height:50px; 
 margin:0px; display:inline-table;
 {
 .box-1{
 background-color:red;
 }
 .box-2{
 background-color:blue;
 }
 .box-3{
 background-color:green;
 }
 </style>
 </head>
 <body>
 <div class=”box-1”></div>
 <div class=”box-2”></div>
 <div class=”box-2”></div>
 </body>
</html>
POSITION
A propriedade position trabalha juntamente com proprie-
dades de coordenadas (top, left, right ou bottom) para diagramar 
e também para posicionar elementos no f luxo da página. Logo, 
os quatro principais valores de posicionamento são:
Position static: Este é o posicionamento padrão que o 
browser atribui a todos os elementos. Como o nome sugere, 
nada acontece ao f luxo da página; permanecendo o elemento 
em sua posição original dentro do f luxo.
Position fixed: Quando atribuímos um valor diferente de 
static ao posicionamento de um elemento, iremos precisar de um 
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 
superior esquerdo da tela. Se atribuirmos os valores que seguem:
 div {
 display: block;
 position: fixed;
 top:0;
 left:0;
 } 
70PROGRAMAÇÃO WEB
No referido exemplo, a div irá colar ao canto superior 
esquerdo da tela. Mesmo que a página seja rolada o elemento 
irá ficar fixo ao canto.
Position Relative: Este valor posiciona o elemento em 
relação a si mesmo dentro do f luxo da página; seguindo a regra 
de que todo elemento precisa de um ponto de referência para 
iniciar seu cálculo de coordenadas e, ao contrário do que muitos 
pensam, esse ponto não é o ponto central do elemento, o ponto 
base é o canto superior esquerdo do elemento, e ele começará a 
contar a partir dali. Consequentemente, pelo fato de posicionar-
-se em relação a si mesmo, um elemento com position relative 
se comporta de maneira similar a um position static, diferindo 
somente no fato de que o position relative pode inf luenciar o 
posicionamento de seus elementos filhos. Quando se deseja 
manter o elemento em seu local de origem no f luxo da página, 
não há necessidade de setar coordenadas, tendo em vista que o 
valor das mesmas é zero por padrão.
<html>
<head>
 <style>
 div {
 width:50px; 
 height:50px;
 margin:0px; 
 position:relative;
 }
 .box-1{
 background-color:red;
 }
 .box-2{
 background-color:blue;
 position:absolute;
 top:-10px;
 lef:-10px;
 }
 .box-3{
 background-color:green;
 }
 </style>
</head>
<body>
 <div class=”box-2”></div>
 <div class=”box-2”></div>
 <div class=”box-3”></div>
</body>
</html>
Position Absolute: Ao contrário de um position relative, 
um elemento com position absolute adota como referência o 
canto superior esquerdo de seu elemento pai, ou do elemento 
diretamente anterior a ele, e que tiver um position diferente 
de static, saindo do f luxo da página. Por ficar fora do f luxo da 
página, elementos com esse tipo de posicionamento não irão 
ocupar espaço dentro do elemento pai. Quando não houver 
nenhum elemento com position setado, na árvore de elementos 
precedentes a este elemento, ele irá se orientar pelo body, mesmo 
que seja o último elemento descrito no código HTML. Só é 
necessáriosetar duas coordenadas para cada elemento. Uma no 
eixo X (left e right) e uma no eixo Y (top e bottom).
71PROGRAMAÇÃO WEB
<html>
<head>
 <style>
 div {width:50px; height:50px;margin:0px;}
 .box-1{
 background-color:red;
 }
 .box-2{
 background-color:blue;
 position:absolute;
 top:20px;
 lef:20px;
 }
 .box-3{
 background-color:green;
 }
 </style>
</head>
<body>
 <div class=”box-1”></div>
 <div class=”box-2”></div>
 <div class=”box-3”></div>
</body>
</html>
FLOAT
Float é uma propriedade que retira o elemento do f lu-
xo da página e força-o a se posicionar à esquerda ou à direita 
da página, dependendo do valor setado. A propriedade f loat 
deve ser atribuída a elementos com position relative ou static. 
Quando dois ou mais elementos estiverem f lutuando, eles irão 
se acomodar lado a lado, enquanto houver espaço, prosseguindo 
logo abaixo. Desse modo, possui três valores:
• left
• right
• none (padrão)
<html>
 <head>
 <style>
 div {width:50px; 
height:50px;margin:0px;float:left;}
 .box-1{
 background-color:red;
 }
 .box-2{
 background-color:blue;
 }
 .box-3{
 background-color:green;
 }
 .box-4{
 background-color:cyan;
 }
 .box-5{
 background-color:yellow;
 }
 .box-6{
 background-color:black;width:80px;
72PROGRAMAÇÃO WEB
 height:80px;
 float:nome;
 }
 </style>
 </head>
 <body>
 <div class=”box-1”></div>
 <div class=”box-2”></div>
 <div class=”box-3”></div>
 <div class=”box-4”></div>
 <div class=”box-5”></div>
 <div class=”box-6”></div>
 </body>
</html>
A propriedade CLEAR é usada para controlar o com-
portamento dos elementos que seguem aos elementos f loat no 
documento.
Por padrão, o elemento subsequente a um f loat, ocupa o 
espaço livre ao lado do elemento f lutuado. 
A propriedade clear pode assumir os valores left, right, 
both (ambos) ou none. A regra geral é: se clear for, por exem-
plo, definido both para um box, a margem superior deste box 
será posicionada sempre abaixo da margem inferior dos boxes 
f lutuados que estejam antes dele no código (ocasionando uma 
espécie de quebra de linha).
<html>
<head>
 <style>
 div {width:50px; 
height:50px;margin:0px;float:left;}
 .box-1{
 background-color:red;
 }
 .box-2{
 background-color:blue;
 }
 .box-3{
 background-color:green;
 }
 .box-4{
 background-color:cyan;
 float:nome;
 clear:left;
/*O estilo clear permite limpar a flutuação de um 
element que vier antes o depois de determinado 
element, proporcionando uma especie de quebra de 
pagina*/
 }
 .box-5{
 background-color:yellow;
 }
 .box-6{
 background-color:black;width:80px;heigh
t:80px;
 }
 </style>
</head>
<body>
73PROGRAMAÇÃO WEB
 <div class=”box-1”></div>
 <div class=”box-2”></div>
 <div class=”box-3”></div>
 <div class=”box-4”></div>
 <div class=”box-5”></div>
 <div class=”box-6”></div>
</body>
</html>
Propriedades para Formatação de Elementos de Bloco
Assim como elementos inline, elementos de bloco podem 
receber propriedades que irão inf luenciar sua apresentação e 
comportamento:
• width: especifica a largura de um elemento.
• max-width: especifica a largura máxima de um elemento.
• min-width: especifica a largura mínima de um elemento.
• height: especifica a altura de um elemento .
• max-height: especifica a altura máxima de um elemento.
• min-height: especifica a altura mínima de um elemento.
A largura e a altura de um elemento podem conter, ao 
invés de uma medida absoluta ou uma medida relativa, o valor 
auto. Esse valor sugere que o elemento irá tomar um tamanho 
necessário para acomodar seu conteúdo. 
border: ajusta a largura, a cor e estilo da borda de todos 
os lados de um elemento. Sintaxe:
propriedade: largura estilo cor;
Exemplo:
border: 2px solid rgb(0,0,0);
As definições de valores podem ser atribuídas separada-
mente para cada lado no elemento através da adição de sufixos 
à propriedade:
• border-top
• border-right
• border-bottom
• border-left
Os estilos de borda mais comuns são: 
• solid (borda lisa)
• dashed (tracejada)
• dotted (pontilhada)
74PROGRAMAÇÃO WEB
<html>
 <head>
 <style>
 div {
 width:100px; 
 height:100px;
 background-color:red;
 margin:0px 0px 20px 20px;
 }
 .box-1{
 border:5px solid #ff0;
 }
 .box-2{
 border-bottom: 10px solid blue;
 }
 .box-3{
 border-bottom: 5px solid blue;
 border-top: 5px dashed black;
 border-left: 5px dotted blue;
 border-right: 5px dashed red;
 } 
 </style>
 </head>
 <body>
 <div class=”box-1”></div>
 <div class=”box-2”></div>
 <div class=”box-3”></div>
 </body>
</html>
margin6 : especifica uma margem para cada lado de um 
elemento.
padding: especifica o espaçamento interno para cada lado 
de um elemento.
Essas duas propriedades seguem o mesmo padrão na hora 
de serem aplicadas a um elemento:
 » podendo receber o valor auto;
 » podendo ter somente um valor, que será atribuído a todos 
os lados do elemento;
 » podendo ter dois valores, que serão atribuídos da seguinte 
forma; o primeiro valor para os lados superior e inferior 
e, o segundo valor para os lados direito e esquerdo;
 » podendo ter 4 valores, que serão atribuídos aos lados 
do elemento no sentido horário; topo, direito, inferior e 
esquerdo; 
 » podendo tratar cada lado separadamente através de sufixos 
com a propriedade border.
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.
75PROGRAMAÇÃO WEB
<html>
 <head>
 <style>
 div {
 width:100px; 
 height:100px;
 background-color:red;
 }
 .box-1{
 margin:0px 0px 20px 20px;
 }
 .box-2{
 background-color:blue;
 margin: 20px 100px;
 }
 .box-3{
 margin-left: 50px;
 } 
 </style>
 </head>
 <body>
 <div class=”box-1”></div>
 <div class=”box-2”></div>
 <div class=”box-3”></div>
 </body>
</html>
Background-Color: Atribui uma cor de fundo ao elemen-
to, cobrindo todo seu interior; usa os mesmos valores que a cor 
de texto. Um background por padrão leva o valor transparente 
na maioria dos elementos.
Background-Image: Atribui uma imagem de fundo ao 
elemento.
<html>
<head>
 <style>
 .box-1{
 width:300px;
 height:250px;
 margin:20px 10px;
 background-color:green;
 background-image:url(http://www.teste. 
 com.br/imagem.png);
 }
 </style>
</head>
<body>
 <div class=”box-1”></div>
</body>
</html>
Background-Repeat: Ajusta o tipo de repetição que a 
imagem de fundo usará. É possível que seja atribuída, como 
imagem de fundo de um elemento, uma imagem menor que o 
próprio elemento, isso faz com que por padrão, a imagem seja 
repetida até cobrir todo fundo do elemento. Sendo possível 
alterar este padrão com a respectiva propriedade:
• repeat: a imagem irá repetir em ambas as direções;
76PROGRAMAÇÃO WEB
• repeat-x: a imagem irá repetir somente no eixo x (hori-
zontalmente);
• repeat-y: a imagem irá repetir somente no eixo y (ver-
ticalmente);
• no-repeat: a imagem não irá ser repetida.
<html>
<head>
 <style>
 div{
 width:300px;
 height:250px;
 margin:20px 10px;
 background-color:green;
 background-image:url(http://www.teste. 
 com.br/imagem.png);
 }
 .box-1{
 background-repeat:no-repeat;
 }
 .box-2{
 background-repeat:repeat-x;
 }
 </style>
</head>
<body>
 <div class=”box-1”></div>
 <div class=”box-2”></div>
</body>
</html>
Background-Position: Posiciona através de coordenadas 
onde ficará a primeira aplicação de uma imagem de fundo. Ao 
contrário da propriedade position, esta propriedade pega o ponto 
central do elemento como referência. Podendo receber valores 
numéricos para X e Y ou apresentar os seguintes valores:
• Para o eixo x: left, center, right;
• Para o eixo Y: top, center, bottom;
Para esta propriedade devem ser atribuídos valores para 
x e y. Se o valor for igual para ambos eixos, então é possível 
declarar somente um valor, como no caso do valor center ou 
uma medida numérica.
<html>
<head>
 <style>
 div{
 width:300px;height:250px;
 margin:20px 10px;
 background-color:green;
 background-image:url(http://www.teste. 
 com.br/imagem.png);
 background-repeat:no-repeat;
 }
 .box-1{
 background-position:110px center;
 }
77PROGRAMAÇÃO WEB
 .box-2{
 background-position:-93px -30px;
 }
 </style>
</head>
<body>
 <div class=”box-1”></div>
 <div class=”box-2”></div>
</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.
Questões para recapitularmos!
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:
81PROGRAMAÇÃO WEB
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:
82PROGRAMAÇÃO WEB
• O JavaScript é uma linguagem in-
terpretada7 pelo navegador;
• O JavaScript não é Java;
• Apresenta similaridades com a lin-
guagem Java e C++ na sua sintaxe;
• Apesar de ser padronizado, cada 
navegador pode apresentar carac-
terísticas implementadas de forma 
diferente;
• O JavaScript permite aumentar a 
iteração entre o usuário e as páginas 
web;
• O script pode ser incluído na própria 
página html ou em arquivo próprio;
• O conteúdo do script não é exibido 
para o usuário, mas pode ser facil-
mente recuperado pelo usuário, pois 
o seu código não é escondido pelo 
navegador;
7 Linguagem Interpretada: É a linguagem de programação onde o código 
fonte é executado por um interpretador, não sendo executado diretamente 
pelo sistema operacional.
• Permite que o conteúdo das páginas 
seja criado conforme a interação do 
usuário com a página;
• Apesenta recursos para acessar ou-
tros, dinamicamente, no servidor 
(ajax);
• Possui recursos para trabalhar com 
expressões regulares, validações de 
campos, recursos de data e hora, 
e manipulação de tempos, ainda, 
muitos outros que serão tratados 
neste capítulo.
Um pouco de História
A linguagem JavaScript foi inicial-
mente criada pela Netscape, sendo origi-
nalmente chamada de Mocha e, poste-
riormente, chamada de LiveScript, sendo 
lançada no ano de 1995. Mais adiante, o 
seu nome foi rebatizado para JavaScript. 
Isso se deve ao fato de que em 1995 a lin-
guagem de programação Java foi lançada 
e, para aproveitar o sucesso desta lingua-
gem, o LiveScript passou a ser chamado 
de JavaScript.
83PROGRAMAÇÃO WEB
Dessa maneira, a linguagem JavaS-
cript se tornou um padrão no desenvolvi-
mento para web. Entretanto, inicialmente 
foi bastante denegrida pelos profissionais, 
pois o público alvo da linguagem era um 
público leigo. Foi somente a partir do uso 
de recursos AJAX9 que o JavaScript se 
consolidou e recebeu mais atenção dos 
profissionais. A partir disso, observou-se 
uma grande proliferação de Frameworks 
e Bibliotecas JavaScript10 , além do surgi-
mento de novas práticas de programação, 
melhorando, assim, o uso do JavaScript.
Atualmente, qualquer website de-
senvolvido profissionalmente apresenta 
recursos que envolvem o uso de JavaScript.
9 Ajax: Abreviatura de Asynchronous JavaScript and XML. Este termo 
refere-se ao uso das tecnologias JavaScript, CSS, XML e Html para permitir 
a criação de solicitações assíncronas ao servidor, evitando a necessidade de 
submeter o conteúdo de toda uma página e, consequentemente, carregar 
toda a página html no retorno. O emprego deste recurso permite a criação 
de páginas mais interativas com o usuário.
10 Frameworks e Bibliotecas JavaScript: são conjuntos de funcionalidades 
implementadas em JavaScript que podem ser incorporadas a uma aplicação 
web, através do vínculo do arquivo JavaScript da biblioteca/framework em 
questão, com a página html. Estas bibliotecas normalmente apresentam 
objetivos específicos, como novos objetos de interface ou facilidades para 
a programação. Exemplos de framework são o Jquery, ExtJs, AngularJs e 
vários outros.
Rapidamente, o JavaScript obteve 
uma grande aceitação como uma lingua-
gem “client-side”, por conta disso, a Mi-
crosoft lançou a sua própria linguagem 
de scripts, sendo esta compatível com o 
JavaScript. O nome desta linguagem foi 
JScript, a qual muitas vezes é confundida 
com o próprio JavaScript, entranto, ape-
sar de ser compatível com o JavaScript, 
esta linguagem apresenta características 
próprias, fazendo com que determinados 
recursos desta não sejam compatíveis com 
o JavaScript.
O primeiro navegador que teve su-
porte ao JavaScript foi o navegador Netsca-
pe 2.0, da própria Netscape, enquanto que 
o JScript teve a sua primeira aparição no 
navegador Internet Explorer 3.0 em 1996.
Em novembro de 1996, a Netscape 
submeteu o JavaScript ao Ecma Inter-
nacional8 para tornar a linguagem um 
padrão industrial, que resultou no padrão 
JavaScript conhecido como ECMAScript.
8 Ecma Internacional: Associação fundada em 1961 dedicada a padro-
nização de sistemas de informação. Abreviação de European Computer 
Manufacturees Association.
Estrutura de um Programa 
JavaScript
Um script criado em JavaScript pode 
ser inserido em uma página HTML de 
três formas: no corpo da página HTML, 
no cabeçalho da página HTM ou, então, 
em um arquivo próprio, sendo apenas re-
ferenciado na página.
Para permitir uma boa separação 
e identificação dos códigos do sistema, 
manter os scripts em um arquivo separado 
é sempre o padrão recomendado e que 
deve ser seguido, mas para fins didáticos, 
serão apresentadas as três formas de uso 
neste material.
Tanto na inclusão do Script no corpo 
da página como no cabeçalho é neces-sário inserir o script dentro da tag html 
“<script>”. Tudo o que estiver contido 
dentro do bloco de código desta tag, será 
interpretado pelo navegador como sendo 
um script JavaScript.
84PROGRAMAÇÃO WEB
Para este tipo de inclusão dos scripts e para garantir que 
os mesmos não sejam exibidos na página, é recomendado que 
o script seja inserido em um bloco de comentário do HTML. 
Isso é necessário, pois o JavaScript pode estar desabilitado no 
navegador ou, então, o navegador pode não possuir suporte ao 
JavaScript.
Veja a seguir dois exemplos de script, um inserindo o script 
no corpo da página e o outro inserindo o mesmo no cabeçalho 
da página.
<HTML>
<HEAD>
 <TITLE>Meu primeiro script</TITLE>
</HEAD>
<BODY>
 <SCRIPT LANGUAGE=”JAVASCRIPT” TYPE=”TEXT/
JAVASCRIPT”>
 <!-- 
 
 document.write(“Olá mundo!”);
 
 -->
 </SCRIPT>
</BODY>
</HTML>
<HTML>
<HEAD>
 <TITLE>Meu primeiro script</TITLE>
 <SCRIPT LANGUAGE=”JAVASCRIPT” TYPE=”TEXT/
JAVASCRIPT”>
 <!-- 
 
 document.write(“Olá mundo!”);
 
 -->
 </SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
Para o caso da inclusão do script em um arquivo separado, 
neste arquivo basta ser inserido o script, enquanto que na página 
html deve ser feita a referência a este arquivo, conforme segue 
o exemplo de código.
function OlaMundo()
{
 document.write(“Olá mundo!”);
}
85PROGRAMAÇÃO WEB
<HTML>
<HEAD>
 <TITLE>Meu primeiro script</TITLE>
 <SCRIPT language=”javascript” scr=”arquivo.js”></
SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML
O primeiro bloco representa o arquivo “arquivo.js”, o 
qual contém o script JavaScript, enquanto que o segundo bloco 
apresenta a forma como este arquivo deve ser relacionado na 
página HTML. 
Na página HTML podem ser relacionados diversos ar-
quivos JavaScript.
Caso este exemplo seja executado, no momento ele não 
irá apresentar nada na página do navegador, pois foi criada uma 
função JavaScript, assunto que ainda não foi apresentado.
Além de ser necessário sabermos o local onde o script pode 
ser inserido no documento, existem alguns outros detalhes que 
devem ser considerados para a linguagem:
• O JavaScript é uma linguagem case sensitive, ou seja, a 
linguagem diferencia letras maiúsculas de letras minús-
culas. Se a escrita de um comando JavaScript não seguir 
esta regra, o mesmo não funcionará;
• Ao final de cada linha de instrução da linguagem, deve 
ser informado um ponto e vírgula (“;”);
• O JavaScript é uma linguagem fracamente tipada, não 
sendo necessário declarar as suas variáveis. Isso será visto 
em detalhes no próximo tópico.
Um ponto muito importante que deve ser considerado 
quando se programa em JavaScript é como identificar se o script 
funcionou corretamente ou apresentou algum problema. Existem 
diversas técnicas para identificar estas situações, entretanto, 
todas estão relacionadas ao uso do Browser para identificar a 
execução do mesmo.
 Para isso, a maneira mais simples é utilizar o console do 
navegador para verificar as possíveis falhas do script. Logo, o 
código exibido terá o seguinte resultado no browser:
<HTML>
<HEAD>
<TITLE>Meu primeiro script</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE=”JAVASCRIPT” TYPE=”TEXT/JAVASCRIPT”>
 <!-- 
 
 document.write(“Olá mundo!”);
86PROGRAMAÇÃO WEB
 -->
</SCRIPT>
</BODY>
Caso o termo “document.write...” fosse escrito como 
“Documento.write...”, o resultado no navegador seria apenas 
uma página em branco. Nesse caso, possivelmente teríamos 
dificuldade em encontrar a falha. Para auxiliar nisso, pode-
mos utilizar o console do Firefox, o qual é acessado através do 
seguinte caminho:
Quando acessado este recurso, será exibida a seguinte 
informação:
Neste console serão exibidas mensagens conforme a execu-
ção da nossa página. Estas mensagens nos permitem identificar 
como está sendo realizada a execução da página pelo navega-
dor. Caso desejemos limpar o console, devemos clicar no botão 
“Limpar”, disponibilizado na tela. No caso da falha destacada 
anteriormente, temos a seguinte informação no console:
87PROGRAMAÇÃO WEB
Procure sempre utilizar o console do navegador para iden-
tificar possíveis falhas de execução dos scripts JavaScript.
Variáveis, Atribuições e Operações
Um dos recursos disponíveis em todas as linguagens de 
programação é a possibilidade de armazenar uma informação 
em uma área reservada de memória. Nesse conceito, a infor-
mação armazenada nesta área é identificada pelo termo “valor”, 
enquanto que a área de memória é referenciada por nós, através 
de uma “variável”.
Estas variáveis podem armazenar qualquer tipo de valor, e 
no caso do JavaScript, por ser uma linguagem fracamente tipada, 
onde o tipo de informação armazenado não é explicitado como 
ocorre em linguagens de programação, como o Java ou C++. 
O tipo da variável é assumido de acordo com o valor que 
é atribuído à mesma. O tipo é muito importante, pois mais 
adiante iremos perceber que determinadas operações podem ser 
realizadas somente para determinados tipos de valor.
No JavaScript, para utilizamos uma variável, o primeiro 
passo é declarar a mesma linguagem e, após, atribuir um valor 
a mesma, de acordo com a necessidade. A declaração da variável 
é feita por meio da palavra reservada “var”, seguida do nome 
da variável.
A seguir, mostramos a tabela com os tipos de dados 
possíveis de serem utilizados no JavaScript:
<HTML>
<HEAD>
 <TITLE>Meu primeiro script</TITLE>
</HEAD>
<BODY>
 <SCRIPT LANGUAGE=”JAVASCRIPT” TYPE=”TEXT/
JAVASCRIPT”>
 <!-- 
 var nome;
 var idade;
Tipo Descrição Exemplo
Number Permite armazenar qualquer 
valor do tipo numérico, podendo 
ser um valor inteiro ou decimal.
3.675
1
3
String Representa uma cadeia de 
caracteres, sempre entre aspas 
duplas (“).
“esta é uma 
string”
Boolean Verdadeiro ou falso True
False
Null Valor vazio, sem significado
Object Qualquer valor associado a um 
objeto
Function Permite armazenar uma função 
em uma variável.
88PROGRAMAÇÃO WEB
 nome = “João Pedro”;
 idade = 20;
 
 document.write(“Olá, me chamo “ + 
nome); 
 document.write(“<br>”);
 document.write(“Tenho “ + idade + “ anos”);
 -->
 </SCRIPT>
</BODY>
</HTML>
O código anterior apresenta um exemplo de declaração 
e uso de variáveis. A variável “nome” recebe uma string, en-
quanto que a variável idade recebe um valor numérico. A partir 
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 
escrever informações no navegador. Neste momento, é impor-
tante saber que tal comando aceita apenas escrita de valores 
do tipo string, e caso algum valor do tipo numérico seja usado 
com esse comando, o mesmo será, automaticamente, convertido 
para uma string.
Como quem renderiza a informação deste comando é o 
próprio navegador, então, se na string forem inseridos comandos 
html, estes serão interpretados e exibidos. No exemplo citado a 
quebra de linha será interpretada pelo navegador, como podemos 
observar na imagem. 
Para ser possível 
utilizar as variáveis em 
uma linguagem de 
programação, deve-se, 
acima de tudo, saber 
como atribuir valores 
a estas variáveis. 
Até agora, já vimos como realizar tal atribuição pelo sinal 
de igual (=), porém existem ainda outras formas de fazermos 
estas atribuições, conforme segue a tabela.
Atribuição O que faz
X = y Define	x	com	o	valor	de	y
X += y O mesmo que x = x + y
X -= y O mesmo que x = x – y
X *= y O mesmo que x = x * y
X /= y O mesmo que x = x / y
X %= y O mesmo que x = x % y
89PROGRAMAÇÃO WEB
Além das variáveis e atribuições, uma linguagem de pro-
gramação sempre necessita que sejam realizadas operações entre 
valores e variáveis. Estas operações podem ser matemáticas, 
lógicas ou envolvendo caracteres (strings) ou datas. Para um 
bom entendimento, observe a lista de operações matemáticas 
que podem ser feitas pelo JavaScript.
Interagindo com o Usuário
Existem diversas maneiras de interagirmos ou obtermos 
informações do usuário através do JavaScript.Algumas das 
formas são mais simples e rápidas de serem utilizadas, enquanto 
Operador O que faz
X + y (numérico) Soma x e y
X + y (strings) Contatena x e y. Exemplo: x = “Joao”, y = “ 
Pedro”. X + y = “Joao” + “ Pedro” = “Joao 
Pedro”. 
X - y Subtrai y de x
X * y Multiplica x e y
X / y Divide x e y
X % y Resto da divisão de x e y
X++, ++x Incrementa x em um.
X--. --x Decrementa x em um.
-x Inverte o sinal de x.
que outras são mais complexas. Inicialmente, serão abordadas 
técnicas simples de fazer esta interação e nos próximos tópicos 
serão vistas formas mais complexas e corretas de fazer isso.
Para obtermos uma informação do usuário, podemos uti-
lizar o “prompt”. Através deste, é possível que o usuário informe 
um valor qualquer que possa ser utilizado no script.
Um aspecto importante que deve ser considerado, é que 
qualquer informação obtida da interface com o usuário sempre 
será do tipo caractere (strings). Caso, desejemos utilizar esta 
informação como um valor numérico, a mesma deve ser con-
vertida para número, por meio de uma função específica.
<HTML>
<HEAD>
 <TITLE>Meu primeiro script</TITLE>
</HEAD>
<BODY>
 <SCRIPT LANGUAGE=”JAVASCRIPT” TYPE=”TEXT/
JAVASCRIPT”>
 <!-- 
 var nome;
 var idade;
 nome = prompt(“Informe o seu nome”);
 idade = prompt(“Informe a sua idade”);
 idade = Number(idade);
 
90PROGRAMAÇÃO WEB
 document.write(“Olá, me chamo “ + 
 nome); 
 document.write(“<br>”);
 document.write(“Tenho “ + idade + “ anos”);
 -->
 </SCRIPT>
Após o usuário informar o nome e clicar sobre o botão 
“OK”, o valor informado será atribuído a variável “nome”. Caso 
seja clicado no botão “Cancelar”, o valor retornado para a va-
riável será “null”.
Já, no caso da idade, quando for informado um valor para 
a idade, o mesmo será tratado como uma string e, posterior-
mente, deverá ser convertido através do comando “Number”, 
visto no exemplo anterior.
Para retornar uma informação para o usuário, podemos 
empregar dois comandos no momento. É possível utilizar a 
função “alert”, a qual retorna uma mensagem na tela, exigindo 
que o usuário pressione “ok” para que a mensagem possa ser 
fechada, ou então, podemos utilizar o comando “document.
write”, que, como visto anteriormente, tem a função de escrever 
alguma coisa no corpo do documento html, aceitando inclusive 
comandos html.
A função “alert” não tem o seu uso recomendado para a 
iteração em websites com o usuário, todavia, ela deve ser uti-
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>
 <TITLE>Meu primeiro script</TITLE>
</HEAD>
<BODY>
 <SCRIPT LANGUAGE=”JAVASCRIPT” TYPE=”TEXT/
JAVASCRIPT”>
 <!-- 
 var nome;
 var idade;
 nome = prompt(“Informe o seu nome”);
 idade = prompt(“Informe a sua idade”);
 idade = Number(idade);
 
 alert(“Olá, me chamo “ + nome); 
 alert(“Tenho “ + idade + “ anos”);
 -->
 </SCRIPT>
</BODY>
</HTML>
91PROGRAMAÇÃO WEB
Comandos Condicionais e Expressões
Os comandos condicionais são comandos que permitem 
que um determinado bloco de código seja executado somente 
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 
irá retornar um resultado que poderá ser verdadeiro ou falso.
No JavaScript o comando condicional mais comum é o 
“if ” (SE), que apresenta a seguinte sintaxe:
if (expressão)
{
 //Codigo executado quando a expressão for verdadeira
}
Else
{
 //Codigo executado quando a expressão for falsa
}
Uma expressão lógica é uma expressão que permite a re-
alização de operações de comparação entre outras expressões, 
as quais podem ser novamente expressões lógicas, ou então, 
expressões matemáticas.
Os operadores necessários para as comparações lógicas 
são apresentados na tabela a seguir:
Comparação O que faz
X == y Retorna verdadeiro se x e y são iguais
X != y Retorna verdadeiro se x e y não são iguais
X > y Retorna verdadeiro se x é maior que y
X >=y Retorna verdadeiro se x é maior que ou igual a y
X < y Retorna verdadeiro se x é menor que y
X <= y Retorna verdadeiro se x é menor que ou igual a y
X && y Retorna verdadeiro se x e y são ambas 
verdadeiras
X || y Retorna verdadeiro se x ou y é verdadeira
!x Retorna verdadeiro se x é falsa
<HTML>
<HEAD>
 <TITLE>Meu script de comparacao</TITLE>
</HEAD>
<BODY>
 <SCRIPT LANGUAGE=”JAVASCRIPT” TYPE=”TEXT/
JAVASCRIPT”>
 <!--
 var valor1;
 var valor2;
 
 valor1 = prompt(“Informe o valor 1”);
 valor2 = prompt(“Informe o valor 2”);
 
 valor1 = Number(valor1);
 valor2 = Number(valor2);
92PROGRAMAÇÃO WEB
 if (valor1 < valor2)
 {
 document.write(valor1 + “ < “ + valor2);
 }
 else
 {
 document.write(valor1 + “ > “ + valor2);
 }
 -->
 </SCRIPT>
</BODY>
</HTML>
Outro comando condicional presente no JavaScript é o 
“switch”. Com este comando, podemos selecionar uma operação 
a partir de diversas possibilidades. Adiante, apresentamos um 
exemplo do uso do comando switch para identificar qual é o 
dia da semana, de acordo com o seu número.
<HTML>
<HEAD>
 <TITLE>Meu script de comparacao</TITLE>
</HEAD>
<BODY>
 <SCRIPT LANGUAGE=”JAVASCRIPT” TYPE=”TEXT/
JAVASCRIPT”>
 <!--
 var diaDaSemana;
 var diaPorExtensao;
 
 diaDaSemana = prompt(“Informe o dia da 
 semana”);
 
 diaDaSemana = Number(diaDaSemana);
 
 switch (diaDaSemana) {
 case 0:
 diaPorExtensao = “Domingo”;
 break;
 case 1:
 diaPorExtensao = “Segunda 
 Feira”;
 break;
 case 2:
 diaPorExtensao = “Terça Feira”;
 break;
 case 3:
 diaPorExtensao = “Quarta Feira”;
 break;
 case 4:
 diaPorExtensao = “Quinta Feira”;
 break;
 case 5:
 diaPorExtensao = “Sexta Feira”;
 break;
 case 6:
 diaPorExtensao = “Sábado”;
 break;
 default:
 diaPorExtensao = “Dia Invalido”;
 }
 alert(diaPorExtensao);
 -->
 </SCRIPT>
</BODY>
</HTML>
93PROGRAMAÇÃO WEB
Estruturas de Repetição
Comandos de repetição são utilizados para repetir uma 
determinada parte de código do script em um número finito 
de vezes; para que uma estrutura de repetição possa ser criada, 
ela sempre necessita de três informações:
• o início do processo de repetição;
• o código a ser repetido;
• a condição de término da repetição.
No JavaScript existem pelo menos três tipos de comandos 
de repetição que precisam ser conhecidos neste momento:
For: Nesse tipo de estrutura de repetição a definição do 
início, condição de término e incremento são definidos no início 
da estrutura.
While: Nesse tipo de estrutura de repetição a condição 
de término é definida no início da repetição, de forma que se 
a condição não for atendida, o bloco de código da estrutura de 
repetição nunca será executado;
Do-while: Neste tipo de estrutura de repetição a condição 
de término é definida no final do bloco de código, de forma 
que se a condição não for atendida o programa irá executar o 
bloco de código pelo menos uma vez.
<HTML>
<HEAD>
 <TITLE>Script de Repeticao</TITLE>
</HEAD>
<BODY>
 <SCRIPT LANGUAGE=”JAVASCRIPT” TYPE=”TEXT/
JAVASCRIPT”>
 <!-- 
 var i;
 
 //Sintaxe do comando for
 for (i = 0; i < 10; i++)
 {
 document.write(“Estou executando uma 
 repeticao”);
 }
 
 //Sintaxe do comando while
 i = 0; //Necessario inicializar a variavel 
 contadora antes;
 while (i < 10)
 {
 document.write(“Estou executando uma 
 repeticao”);
 i++; //Necessario incrementar o 
 contado no bloco de codigo;
 }
 
 //Sintaxe do comando do-while
 i = 0; //Necessario inicializar a variável
 do{
 document.write(“Estou executando uma 
repeticao”);
94PROGRAMAÇÃO WEB
 i++; //Necessario incrementar o contado 
no bloco de codigo;
 }
 while (i < 10);
 
 -->
 </SCRIPT>
</BODY>
</HTML>
Funções
Uma função é um bloco de programa encapsulado sob um 
nome, o qual pode ser executado quantas vezes forem necessárias, 
sem a necessidade de reescrever todoo bloco de código, sendo 
essencial apenas chamar a identificação deste bloco, ou seja, o 
nome. Em determinadas linguagens de programação também 
existem as sub-rotinas, as quais executam uma ação semelhante 
com a das funções.
Uma função pode receber parâmetros de entrada e poderá 
também retornar um resultado. Além disso, uma função também 
pode ter variáveis declaradas em seu interior, mas neste caso 
é importante ressaltar que uma variável criada dentro de uma 
função, apenas poderá ser utilizada nesta função, não possuindo 
valor ou conteúdo fora dela. Enquanto que uma variável decla-
rada fora da função pode ser utilizada em seu interior.
<HTML>
<HEAD>
<TITLE>Exemplos de funcoes</TITLE>
 
 <SCRIPT LANGUAGE=”JAVASCRIPT” TYPE=”TEXT/JAVASCRIPT”>
 <!-- 
 
 function ExibeAlerta() //Funcao sem 
 parametros de entrada
 {
 alert(“Alerta gerado pela funcao”);
 //Esta funcao nao apresenta nenhum 
 retorno de informacao
 }
 
 function ExibeAlertaParametro(mensagem)
 {
 alert(mensagem);
 }
 
 function Somar(valor1, valor2) //Funcao com 
 dois parametros
 {
 var resultado;
 
 //A Soma é armazenada na variavel 
 resultado
 resultado = valor1 + valor2; 
 
 //O retorno do resultado é feito 
 através da palavra
 //return;
 return resultado;
95PROGRAMAÇÃO WEB
 }
 -->
 </SCRIPT>
</HEAD>
<BODY>
 <script>
 var retorno;
 //Retorna da funcao somar atribuido a 
 variavel retorno
 retorno = Somar(2,3);
 //Exibicao da variavel retorno atraves da 
 funcao ExibeAlerta...
 ExibeAlertaParametro(retorno);
 </script>
</BODY>
</HTML>
O código de exemplo da página anterior mostra três fun-
ções que foram criadas no cabeçalho do script. É importante 
perceber que apenas uma função criada não executa processa-
mento algum. Ela somente irá executar processamento a partir 
do momento em que for chamada pelo script. Ainda no exemplo 
anterior, podemos perceber que as funções criadas foram cha-
madas no corpo da página html através de outro script. 
Funções devem ser utilizadas de forma massiva nos siste-
mas para tornar o código dos mesmos mais organizado e legível, 
entretanto, deve-se sempre seguir algumas regras no momento 
da criação da função:
• Sempre criar funções pequenas (com pouco código);
• Uma função deve ter um único objetivo (Se a função deve 
fazer uma soma, ela não deve fazer uma multiplicação ou 
uma média além da soma);
• Por convenção, o nome das funções sempre deve iniciar 
com a primeira letra maiúscula, sem o uso de underline 
(“_”) para separar nomes compostos. Ainda, para os nomes 
compostos, cada novo nome deve ter a sua inicial mai-
úscula. Exemplo de nome de função: CalcularImposto, 
ValidarCpf, ...;
• O nome da função sempre deve ter um verbo e ref letir 
sobre o objetivo da função.
Orientação a Objetos em JavaScript
Orientação a objetos é um paradigma de programação, 
baseado na composição e interação de objetos para formar o 
programa. Assim, um objeto pode ser entendido como uma 
abstração computacional de algo real. Exemplos de objetos 
podem ser um monitor, uma caneta, um cliente, um pedido, 
uma página html, etc.
Cada objeto é formado por propriedades e métodos. As 
propriedades definem as características de um objeto, enquanto 
96PROGRAMAÇÃO WEB
que os métodos definem as ações de um objeto. Como exemplo, 
podemos citar um monitor, visto que ele pode possuir como 
propriedades o tamanho, a cor, a resolução, etc. Por outro lado, 
também pode possuir como método a sua capacidade de ligar, 
desligar, alterar o brilho, alterar a nitidez, etc.
A descrição de um objeto em uma linguagem de progra-
mação é definida através de uma classe, enquanto que o objeto 
em si é a criação desta classe em memória para que ela possa 
ser utilizada durante o programa.
Nem todas as linguagens são orientadas a objetos, entre-
tanto, todas as linguagens modernas e atuais implementam os 
conceitos de orientação a objetos, inclusive o JavaScript.
Nesse curso, não iremos criar objetos próprios para serem 
utilizados, contudo, iremos utilizar objetos que já são criados 
pelo próprio JavaScript.
No JavaScript, para acessarmos as propriedades e métodos 
de um objeto utilizamos o ponto (.) ao lado direito do objeto 
em questão. Um exemplo de objeto é o próprio “document”, 
o qual já foi utilizado anteriormente. Assim, quando estamos 
utilizando o comando “document.write()” estamos utilizando 
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:
Objeto Descrição
Documet Objeto que armazena as características e 
métodos relacionados com a página html.
Window Este objeto representa uma janela do navegador 
que possui uma página aberta.
Date Objeto que permite obter a data atual e também 
realizar operações com datas.
Array O objeto Array é utilizado para armazenar 
múltiplos valores em uma única variável.
Style O objeto Style permite o acesso às propriedades 
CSS de um determinado objeto html.
Math Objeto utilizado para trabalhar com funções 
matemáticas.
String Objeto que permite armazenar uma cadeia de 
caracteres e também realizar operações sobre 
strings.
XmlHttpRequest Este objeto permite comunicação assíncrona 
com o servidor através do uso do javascript. Com 
isso, é possível enviar e receber informações do 
servidor sem a necessidade de recarregar toda a 
página.
97PROGRAMAÇÃO WEB
Eventos
Eventos são ações executadas mediante determinada ati-
vidade executada pelo usuário ou pelo próprio sistema. Estes 
eventos podem ser disparados quando o usuário clicar sobre um 
botão, movimentar o mouse, e o sistema terminar de carregar 
a página em questão e diversas outras maneiras.
Os eventos são de extrema importância, pois podemos 
associar a eles funções ou comandos JavaScript para que o 
programa execute algum procedimento sempre que o evento 
for diasparado.
Um exemplo disso, é disparar uma mensagem quando 
o usuário clicar sobre um botão, ou então alterar informações 
da tela conforme o usuário for deslocando o cursor do mouse 
sobre a mesma.
Os eventos gerados pelo JavaScript podem ser capturados 
pelo uso de Handlers, os quais representam o evento no código, 
permitindo fazer uma associação do handler com a função a 
ser executada.
<HTML>
<HEAD>
 <TITLE>Meu primeiro evento</TITLE>
 <SCRIPT LANGUAGE=”JAVASCRIPT” TYPE=”TEXT/
JAVASCRIPT”>
 <!-- 
 
 function exibeAlerta()
 {
 alert(“Eu cliquei no botao!”)
 }
 -->
 </SCRIPT>
</HEAD>
<BODY>
 <FORM id=”cadastro”>
 <INPUT type=”BUTTON” id=”bt1” value=”Clicar” 
onClick=”exibeAlerta()”>
 </FORM>
</BODY>
</HTML>
O exemplo citado apresenta o Handler “onClick”, de 
forma que quando for clicado no botão será executada a função 
“exibeAlerta”.
A tabela seguinte apresenta diversos handlers que podem 
ser empregados em um script JavaScript.
98PROGRAMAÇÃO WEB
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 
recurso html que ainda não tenha sido processado. 
Esta situação acontece, porque tanto o HTML como o 
JavaScript são linguagens processadas e, por isso, se um script 
tentar acessar um recurso que ainda não tenha sido interpretado 
pelo navegador, este irá retornar uma falha de execução. Dessa 
forma, o exemplo de script a seguir não funcionará.
<HTML>
<HEAD>
 <TITLE>Meu primeiro evento</TITLE>
 <SCRIPT LANGUAGE=”JAVASCRIPT” TYPE=”TEXT/
JAVASCRIPT”>
 <!-- 
 objetodiv.innerHTML = “conteudo...”;
 -->
 </SCRIPT>
</HEAD>
<BODY>
 <div id=”objetodiv”>
 </div>
</BODY>
</HTML>
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á 
 Handler Tipo de 
Objeto
O que trata
onAbort Janela O usuário encerrouo carregamento da 
página.
onBlur Janela, 
formulário
O usuário deixou o objeto.
onChange Formulário O usuário alterou o objeto.
onClick Mouse, 
formulário
O usuário clicou em um objeto.
onError Janela O script encontrou um erro.
onfocus Janela, 
formulário
O usuário tornou um objeto ativo.
onLoad Janela O objeto concluiu o carregamento.
onMouseover Mouse O cursor se deslocou sobre o objeto.
onMouseout Mouse O cursor se deslocou para fora de um 
objeto.
onSelect Formulário O usuário selecionou o conteúdo de um 
objeto.
onSubmit Formulário O usuário enviou um formulário.
onUnload Janela O usuário saiu da janela.
99PROGRAMAÇÃO WEB
carregada somente depois do script já ter sido executado. Isso 
acontece, porque o script está acima do local de criação da div. 
Já, o seguinte exemplo irá funcionar corretamente.
<HTML>
<HEAD>
 <TITLE>Meu primeiro evento</TITLE>
 <SCRIPT LANGUAGE=”JAVASCRIPT” TYPE=”TEXT/
JAVASCRIPT”>
 <!-- 
 function executa()
 {
 objetodiv.innerHTML = “conteudo...”;
 }
 -->
 </SCRIPT>
</HEAD>
<BODY onload=”executa()”>
 <div id=”objetodiv”>
 </div>
</BODY>
</HTML>
Este exemplo funcionará, visto que a escrita do conteúdo 
está encapsulada em uma função, logo, essa função somente será 
executada quando o evento “onLoad” do corpo da página for 
disparado. O evento “onLoad” é disparado somente depois que 
todo o conteúdo da página html terminar de ser interpretado e 
carregado pelo navegador.
Aplicação de CSS com JavaScript
Conforme foi visto no capítulo anterior, a formatação de 
uma página html não é feita pelo html, mas sim pelo CSS. Até 
o momento, foi apresentada apenas uma maneira de inserir CSS 
em uma página: Definindo a estrutura do CSS e vinculando a 
mesma a um determinado elemento, seja através do CSS in-line, 
incorporado ou linkado. Nessas situações, o CSS sempre tem a 
necessidade de ser criado de forma “fixa” na página.
Outra forma de inserir CSS em um elemento html, acon-
tece através do seu uso integrado ao JavaScript. Nessa situação, 
podemos inserir o CSS de forma dinâmica na página, criando 
efeitos bastante interessantes em uma página, principalmente 
quando o seu uso estiver associado a captura de eventos em 
JavaScript. Para utilizar CSS com JavaScript, devemos utilizar 
o objeto “style” associado ao elemento html em questão.
O objeto “style” apresenta propriedades que são próprias 
do CSS. A seguir temos o exemplo de uso deste objeto.
<html>
 <head>
 <script type=”text/javascript” 
language=”javascript”>
 <!--
 function inicializa()
 {
100PROGRAMAÇÃO WEB
 quadrado.style.position = 
“absolute”;
 quadrado.style.width = “100px”;
 quadrado.style.height = “100px”;
 quadrado.style.top = “200px”;
 quadrado.style.left = “10px”;
 quadrado.style.backgroundColor = 
“red”;
 }
 -->
 </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.
104PROGRAMAÇÃO WEB
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. 
105PROGRAMAÇÃO WEB
DOM e Manipulação de Elementos
DOM é a sigla em inglês para Do-
cument Object Model. Este objeto de 
modelo de documento define uma hie-
rarquia dos elementos html de forma que 
os mesmos possuam um relacionamento, 
o qual pode ser manipulado através do 
Java Script. O relacionamento destes ob-
jetos forma uma árvore de relacionamen-
tos conhecida como árvore DOM, como 
exemplo, temos:
<!-- My document -->
<html>
 <head>
 <title>My Document</title>
 </head>
 <body>
 <h1>Header</h1>
 <p>
 Paragraph
 </p>
 </body>
</html>
Através do Java Script podemos ma-
nipular o conteúdo desta árvore de forma 
dinâmica. Tal processo de manipulação 
pode ser realizado de diversas formas através do uso de métodos do objeto “docu-
ment”, conforme veremos a seguir:
document.getElementById(“Nome do id”): Esse método retorna um objeto da 
árvore DOM, conforme o id fornecido para o mesmo. O objeto retornado pode ter as 
suas propriedades alteradas de acordo com a sua necessidade. Como exemplo, temos:
<html>
 <head>
 <script type=”text/javascript” language=”javascript”>
 function Executar()
 {
 var objeto = document.getElementById(“quadrado”);
 
 objeto.style.position = “absolute”;
 }
 </script>
 </head>
 <body onLoad=”executar()”>
 <div id=”quadrado”></div>
 </body>
</html>
Nesse modelo, estamos obtendo a div de id “quadrado” e alterando a proprie-
dade CSS“position” através do JavaScript.
document.getElementsByTagName(“Nome da tag”): Esse método retorna 
um array de objetos da árvore DOM de acordo com o nome da tag fornecido para o 
mesmo. Da mesma forma que o método anterior, podemos alterar as propriedades 
de todos os elementos retornados pelo array. Exemplo:
106PROGRAMAÇÃO WEB
<html>
 <head>
 <script type=”text/javascript” 
 language=”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>
 <p>Paragrafo 2...</p>
 <p>Paragrafo 3...</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 mesma107PROGRAMAÇÃO WEB
forma que o método anterior, podemos alterar as propriedades 
de todos os elementos retornados pelo array. Exemplo:
<html>
 <head>
 <script type=”text/javascript” 
 language=”javascript”>
 function executar()
 {
 var objeto = document. 
 getElementsByName(“par”);
 var i;
 
 for (i=0;i<objeto.length;i++)
 {
 alert(objeto[i].innerHTML);
 }
 }
 </script>
 </head>
 <body onLoad=”executar()”>
 <p name=”par”>Paragrafo 1...</p>
 <p name=”par”>Paragrafo 2...</p>
 <p>Paragrafo 3...</p>
 </body>
</html>
document.getElementsByClassName(“Nome da classe”): 
Esse método retorna um array de objetos da árvore DOM, 
conforme a classe atribuída ao elemento. Da mesma forma que 
o método anterior, podemos alterar as propriedades de todos 
os elementos retornados pelo array. Exemplo:
<html>
 <head>
 <script type=”text/javascript” 
 language=”javascript”>
 function executar()
 {
 var objeto = document. 
 getElementsByClassName(“p1”);
 var i;
 
 for (i=0;i<objeto.length;i++)
 {
 alert(objeto[i].innerHTML);
 }
 }
 </script>
 </head>
 <body onLoad=”executar()”>
 <p class=”p1”>Paragrafo 1...</p>
 <p class=”p1”>Paragrafo 2...</p>
 <p class=”p2”>Paragrafo 2...</p>
 </body>
</html>
108PROGRAMAÇÃO WEB
Nesse exemplo, serão retornados apenas os elementos que 
possuírem a classe de nome “p1” para o array, já, o elemento 
com classe “p2”, não será considerado.
objeto.innerHTML: Essa propriedade permite aplicar 
um conteúdo textual e de html a um determinado elemento. 
Por exemplo, podemos definir o conteúdo de uma DIV dina-
micamente através desta propriedade. No entanto, devemos 
observar que esta propriedade existe apenas para os elementos 
que permitem a inclusão de conteúdo html. Exemplo:
<html>
 <head>
 <script type=”text/javascript” 
 language=”javascript”>
 function executar()
 {
 var objeto = document. 
 getElementsById(“elemento”);
 
 objeto.innerHTML = “<b>Um texto 
 dinamico</b>”;
 }
 </script>
 </head>
 <body onLoad=”executar()”>
 <div id=”elemento”></div>
 </body>
</html>
objeto.activeElement: Esta propriedade retorna o elemento 
da árvore DOM que está selecionado no momento. Exemplo:
<html>
 <head>
 <script type=”text/javascript” 
 language=”javascript”>
 function AchaElemento()
 {
 var objeto = document. 
 activeElement;
 
 alert(“O elemento ativo: id = “ 
 + objeto.id);
 }
 </script>
 </head>
 <body>
 <input type=”text” id=”ele1” 
 onfocus=”AchaElemento()”></input>
 <input type=”text” id=”ele2” 
 onfocus=”AchaElemento()”></input>
 <input type=”text” id=”ele3” 
 onfocus=”AchaElemento()”></input>
 <input type=”button” id=”botao” 
 value=”Clique aqui” 
 onclick=”AchaElemento()”></input>
 </body>
</html>
109PROGRAMAÇÃO WEB
document.hasFocus: Esta propriedade permite identificar 
o documento ou qualquer elemento dentro do mesmo, possuindo 
foco no momento. Além disso, essa propriedade sempre retor-
nará um valor booleano.
Ademais, podemos manipular a árvore DOM com outras 
propriedades as quais permite adicionar, selecionar e remover 
elementos da árvore de forma dinâmica. Adiante, será apre-
sentado um exemplo de código JavaScript, o qual realiza estas 
operações.
<html>
 <head>
 <script type=”text/javascript” 
 language=”javascript”>
 function CarregaDinamicamente()
 {
 var novoParagrafo = document. 
 createElement(“p”);
 var conteudo = document. 
 createTextNode(“conteudo do paragrafo”);
 novoParagrafo.appendChild(conteudo);
 
 document.getElementsByTagName(“body”)[ 
 0].appendChild(novoParagrafo);
 }
 </script>
 </head>
 <body onLoad=”CarregaDinamicamente()”> 
 </body>
</html>
A propriedade “createElement” cria, dinamicamente, um 
elemento HTML, enquanto que o método “createTextNode” 
cria, também de forma dinâmica, um elemento de tipo texto, 
como por exemplo um texto de parágrafo, um conteúdo de uma 
célula, etc. Nesse caso, foi criado um parágrafo (tag p) e um 
conteúdo para este parágrafo (texto “conteúdo do parágrafo”). 
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 
elementos. Isso pode ser feito através do método “appendChild”, 
aplicado no parágrafo criado. Dessa forma, o conteúdo estará 
sendo associado ao mesmo. Ao final de todo o processo, o pa-
rágrafo criado estará sendo associado à página html através do 
método “appendChild”, aplicado ao corpo da página.
Funções Anônimas
O JavaScript, além de ser uma linguagem com carac-
terísticas de orientação a objetos, também é uma linguagem 
funcional, onde podem ser atribuídas funções para a execução 
de cada regra do sistema. Para garantir este título a linguagem, 
existe um recurso conhecido como função anônima.
Uma função anônima permite que a mesma seja criada 
sem um nome e que a possa ser atribuída a uma variável como se 
110PROGRAMAÇÃO WEB
fosse um objeto qualquer. Estas funções podem ser definidas em 
qualquer local no código Java Script, ainda permitem proteger 
variáveis contra o mal uso. Exemplo de uma função anônima:
<html>
 <head>
 <script type=”text/javascript” 
 language=”javascript”>
 var obj = (function() {
 
 var a, b, c;
 a = 2;
 b = 3;
 c = a + b;
 
 return c;
 })();
 
 function ExecutaFuncao()
 {
 alert(obj);
 }
 </script>
 </head>
 <body onLoad=”ExecutaFuncao()”>
 
 </body>
</html>
Quando executada essa função, o sistema irá exibir uma 
mensagem com o valor “5”, pois quando a variável “obj” for uti-
lizada, o seu comportamento será a execução da função criada 
e atribuída à variável.
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. 
Dessa maneira, quando criamos um objeto, em diversos casos 
temos a necessidade de atribuir um evento e ao mesmo tempo 
uma função. Para realizar esta ação, podemos fazer da seguinte 
forma:
<html>
 <head>
 <script type=”text/javascript” 
 language=”javascript”>
 
 function ExecutaFuncao()
 {
 var botao = document. 
 createElement(“button”);
 botao.style.width=”100px”;
 botao.style.height=”100px”;
 
 botao.onclick = function (){
 alert(“cliquei no botao”);
 };
 
 document.getElementsByTagName(“body”) 
 [0].appendChild(botao);
 }
111PROGRAMAÇÃO WEB
 </script>
 </head>
 <body onLoad=”ExecutaFuncao()”>
 
 </body>
</html>
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, 
logo será exibida uma mensagem de alerta.
Interagindo com o Tempo
No JavaScript é possível programarmos a execução de 
uma determinada função após um determinado tempo, o qual 
é especificado em milissegundos (1000 milissegundos = 1 se-
gundo). Esta função pode ser programada para ser executada 
apenas uma vez ou então, pode ser executada em intervalos de 
tempo pré-determinados em milissegundos até ser solicitada a 
sua interrupção.
Para executar o código javascript somente uma vez, deve 
ser empregada a função “setTimeout”. Para executar o código 
diversas vezes, deve ser utilizada a função “setInterval” para 
iniciar a sua execução e a função “clearInterval” para concluir 
a execução.
O uso deste tipo de função permite ao programador criar 
linhas de execução independentes da linha de execução padrão 
do programa. Ou seja, é possível executar diversas ações ao 
mesmo tempo. Isso pode ser útil, por exemplo, nos casos onde é 
preciso exibir a hora atual, sendo incrementada a cada segundo, 
enquanto é realizada a navegação na página com o uso de outras 
rotinas também em javascript.
setTimeOut:
Sintaxe: setTimeout(função, tempo);
Função: É a função que será executada apenas uma vez 
conforme o intervalo de tempo;
Tempo: Intervalo de tempo em milissegundos, o qual 
define o momento em que a função será executada.
É importante observar que este intervalo de tempo éini-
ciado no momento em que a rotina é chamada pelo javascript. 
Exemplo:
<html>
 <head>
 <script>
 function carrega()
 {
 setTimeout(function(){
 var p = document 
 .getElementById(“paragrafo”);
112PROGRAMAÇÃO WEB
 p.innerHTML = “Ola Mundo”;
 },2000);
 }
 </script>
 
 </head>
 <body onload=”carrega()”>
 <p id=”paragrafo”></p>
 </body>
</html>
Nesse exemplo, o sistema irá escrever “Ola Mundo” dois 
segundos depois da página ser carregada no navegador.
setInterval e clearInterval:
Estas duas rotinas funcionam em conjunto. A rotina setIn-
terval inicia a execução de uma rotina repetindo a mesma a cada 
intervalo informado e retornando um valor, indicando a linha 
de execução criada. Para que seja possível parar esta execução, 
é necessário utilizar a função clearInterval, passando por parâ-
metro o valor retornado anteriormente pela função setInterval.
Sintaxe: setInterval(função, tempo);
Função: código a ser executado a cada período;
Tempo: tempo para repetição da execução;
 Sintaxe: clearInterval(valor);
Valor: Valor retornado pela rotina setInterval;
Este script vai escrever o termo “Ola Mundo”, de forma 
repetida, e a cada segundo, até que o usuário clique no botão 
“Fim”.
<html>
 <head>
 <script>
 var linhaExecucao;
 
 function inicio()
 {
 linhaExecucao = 
 setInterval(function(){
 var p = document. 
 getElementById(“paragrafo”);
 p.innerHTML += “Ola Mundo<br>”;
 },1000);
 }
 
 function finaliza()
 {
 clearInterval(linhaExecucao);
 }
 </script>
 
 </head>
 <body>
113PROGRAMAÇÃO WEB
 <input type=”button” onclick=”inicio()” value=”Inicio”> 
 </input>
 <input type=”button” onclick=”finaliza()” value=”Fim”> 
 </input>
 <p id=”paragrafo”></p>
 </body>
</html>
Rotinas de Geolocalização
Com o HTML5 é possível utilizar a API de Geolocali-
zação, a qual permite obtermos informações sobre a localização 
atual, como latitude, longitude, altura, velocidade de movimen-
tação, entre outras funcionalidades.
Essa API utilizará recursos de GPS ou triangulação, 
conforme a disponibilidade dos mesmos, sendo que inicialmente 
sempre será utilizado triangulação, pelo fato de ser mais rápido 
para o browser obter esta informação, melhorando o desempenho 
da aplicação. Porém, a tendência da localização por triangulação 
é ser menos precisa que a do GPS.
Para ser possível utilizar a API de geolocalização é neces-
sário aceitar a pergunta do navegador, que solicita a obtenção 
das informações de localização. Exemplo:
<html>
 <head>
 <script>
 
 function posiciona()
 {
 navigator.geolocation. 
 getCurrentPosition(showPosition);
 }
 
 function showPosition(position) {
 var latlon = position.coords. 
 latitude + “,” + 
 position.coords.longitude;
 var url = “http://maps.google. 
 com/maps?q=” + latlon;
 
 window.location = url;
 }
 </script>
 
 </head>
 <body onload=”posiciona()”>
 </body>
</html>
114PROGRAMAÇÃO WEB
Substituindo os Cookies
Como vimos anteriormente, os cookies são uma maneira 
de salvar informação no navegador, entretanto, esta maneira 
de armazenar informação possui limitações de quantidade de 
informação e, também, apresenta dificuldade em ler e escrever 
as informações.
Para auxiliar na tarefa de salvar e recuperar informações 
locais, o HTML 5 apresenta um recurso chamado de Storage 
API.
A API Storage permite duas formas de armazenamento 
de dados no lado do cliente:
• sessionStorage;
• localStorage.
O sistema de localStorage e sessionStorage fazem parte 
da API Storage. Seu tipo de armazenamento é de chave: valor, 
sendo a chave sempre uma string. O objeto desta API apresenta 
4 métodos:
• getItem(chave): obtém um valor armazenado no Storage;
• setItem(chave, valor): armazena um valor no Storage;
• removeItem(chave): exclui um valor do Storage;
• clear(): limpa o storage.
A diferença entre os dois é que o sessionStorage apenas 
armazena os dados durante a sessão do usuário, caso ele feche o 
navegador ou a aba, seus dados serão excluídos. Enquanto que 
o localStorage não possui expiração definida. Exemplo:
<html>
 <head>
 <script>
 var linhaExecucao;
 
 function gravar()
 {
 sessionStorage. 
 setItem(“nome”,”Joao da Silva”);
 }
 
 function ler()
 {
 var retorno;
 retorno = sessionStorage. 
 getItem(“nome”);
 alert(retorno);
 }
 </script>
 
 </head>
 <body>
115PROGRAMAÇÃO WEB
 <input type=”button” onclick=”gravar()” 
 value=”Grava Informacao” > </i>
 <input type=”button” onclick=”ler()” 
 value=”Ler Informacao” > </button>
 </body>
</html>
Canvas API
O HTML 5 trouxe consigo uma API gráfica interpre-
tada sem o uso de plugins, a qual é manipulada através da tag 
canvas. Esta API permite desenhar na tela do navegador através 
do javascript.
Para iniciar um desenho, devemos incluir no documento 
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 
getContext.
<html>
 <head>
 <script>
 function desenhar()
 {
 var context;
 context = document. 
 getElementById(“desenho”). 
 getContext(“2d”);
 }
 </script>
 
 </head>
 <body>
 <input type=”button” onclick=”desenhar()” 
 value=”Desenhar” > 
 <canvas id=”desenho” width=”400” 
 height=”400”></canvas>
 </body>
</html>
Além disso, com o Canvas é possível desenhar na página 
e atualizar, dinamicamente, estes desenhos através de scripts 
conforme a necessidade do usuário. Esta possibilidade permite 
inúmeros usos desta API, substituindo os atuais plugins como o 
Flash pelo Canvas. A seguir, veremos um exemplo de desenho 
construído com o Canvas.
<html>
 <head>
 <script>
 function desenhar()
 {
 var context;
 context = document.getElementById 
 (“desenho”).getContext(“2d”);
 
 //iniciar o desenho
 context.beginPath();
 
 //posicionar o cursor para o 
116PROGRAMAÇÃO WEB
 inicio do desenho
 context.moveTo(150,50);
 
 //desenho das linhas
 context.lineTo(220,250);
 context.lineTo(50,125);
 context.lineTo(250,125);
 context.lineTo(80,250);
 context.lineTo(150,50);
 
 //pintar o desenho de amarelo
 context.fillStyle=”#ff0”;
 context.fill();
 
 //pintar as bordas de vermelho
 context.strokeStyle=”#f00”;
 context.stroke();
 }
 </script>
 
 </head>
 <body>
 <input type=”button” onclick=”desenhar()” 
 value=”Desenhar” > 
 <canvas id=”desenho” width=”400” 
 height=”400”></canvas>
 </body>
</html>
O Canvas também permite movimentar e criar animações 
nos objetos da tela. Analise o exemplo que segue:
<html>
 <head>
 <script>
 var context;
 
 function desenhar()
 {
 context = document. 
 getElementById(“desenho”).getContext(“2d”);
 
 setInterval(desenhaAnimacao,200);
 }
 
 function desenhaAnimacao()
 {
 context.clearRect(0,0,960,480);
 context.translate(30,30);
 context.rotate(0.1);
 context.beginPath();
 context.moveTo(10,0);
 context.lineTo(20,30);
 context.lineTo(0,30);
 context.closePath();
 context.stroke();
 }
 </script>
 
 </head>
 <body onload=”desenhar()”>
 <canvas id=”desenho” width=”960” 
 height=”480”></canvas>
 </body>
</html>
117PROGRAMAÇÃO WEB
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 coordenadasnuma 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.
121PROGRAMAÇÃO WEB
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.
122PROGRAMAÇÃO WEB
Conceito
Os Frameworks JavaScript nos proporcionam a redução 
da necessidade de construirmos todas as funcionalidades que 
precisamos, de forma manual, para o nosso sistema, pois o 
mesmo já apresenta os recursos prontos. Além de possuir os 
recursos prontos, o framework também simplifica a maneira 
como programamos em JavaScript, podendo fornecer algumas 
vantagens conforme listado:
• Simplificação da forma de utilizar JavaScript;
• Novos recursos e elementos visuais;
• Simplifica a interação com o usuário e também os recursos 
do servidor;
• Torna o desenvolvimento em JavaScript independente de 
browser, visto que a maioria dos frameworks apresenta as 
suas funcionalidades de forma independente de browser 
(crossbrowser);
• Redução de incompatibilidades;
• Reaproveitamento de código.
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 
desenvolvida. Neste ponto, devemos observar que é possível 
utilizar muitos frameworks ao mesmo tempo, pois cada um 
deles apresenta características específicas de acordo com a fun-
cionalidade proposta por ele.
Após escolher o framework é preciso obtermos o mesmo 
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 
framework, o mesmo poderá ser composto por um ou vários 
arquivos do tipo javascript e CSS.
Um exemplo de framework é o Jquery, o qual pode ser 
obtido no endereço http://code.jquery.com/jquery-2.1.1.js. Após 
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 
o intuito de que seja possível utilizar o mesmo. Esse mesmo 
procedimento deve ser feito para qualquer outro framework que 
desejamos utilizar.
<html>
 <head>
 <script src=”Jquery-2.1.1.js”></script>
 </head>
 <body onload=”inicializa()”>
 </body>
</html> 
123PROGRAMAÇÃO WEB
Biblioteca Modernizr
O Modernizr é uma biblioteca de detecção que permite 
verificar o suporte da maioria das características do HTML5 e 
CSS3. O download da biblioteca pode ser obtido no endereço 
web http://modernizr.com/.
O Modernizr é um script JavaScript que roda automati-
camente, assim que o mesmo é adicionado no head do docu-
mento. No seguinte exemplo a biblioteca está sendo utilizada 
para verificar se o navegador apresenta suporte a API Canvas 
do HTML5.
<html>
 <head>
 <script src=”modernizr.js”></script>
 <script type=”text/javascript” 
 language=”javascript”>
 function verificaCanvas()
 {
 var div = document. 
 getElementById(‘resultado’);
 if (Modernizr.canvas){
 div.innerHTML += “Canvas = ON”;
 }
 else{
 div.innerHTML += “Canvas = OFF”;
 }
 }
 </script>
 </head>
 
 <body onload=”inicializa()”>
 <input type=”button” onclick=”verificaCanvas()” 
 value=”Verifica Canvas”></input>
 <div id=”resultado”>
 </div>
 </body>
</html>
Framework JQuery
O Framework Jquery é uma biblioteca cross-browser, de-
senvolvida para simplificar a programação de uma página web. 
Ela foi criada por John Resig em 2006 e, atualmente, segundo 
consulta realizada na Wikipedia, ela é empregada em 77% dos 
10 mil sites mais visitados no mundo.
124PROGRAMAÇÃO WEB
Essa biblioteca apresenta uma série de funcionalidades, 
das quais pode-se citar:
• Resolução de incompatibilidades entre navegadores;
• Redução significativa de código;
• Reutilização de código.
Altamente expansível e com diversas funcionalidades 
adicionais:
• jQuery UI para elementos de interface;
• jQuery Mobile para desenvolvimento mobile.
Apresenta grande facilidade de uso dos recursos Ajax e 
manipulação DOM através dos seletores.
Permite a implementação de recursos de CSS nas versões 
1, 2 e 3.
O jQuery pode ser acessado pelo site http://jquery.com/ 
e o download pode ser feito no endereço http://jquery.com/
download/. Na página de download existem quatro versões que 
podem ser feitas. Existe a versão compactada (compressed) e 
descompactada (uncompressed). A versão compactada também 
é conhecida como versão de produção. Essa versão não apre-
senta comentários no código, possuindo redução de espaços e 
nome de variáveis para que o arquivo seja menor, possibilitando 
melhor desempenho.
A versão descompactada, por sua vez, apresenta comen-
tários no código, o que permite um melhor entendimento do 
que as rotinas do framework se propõe.
Além disso, também existe a versão 1.x e a versão 2.x. 
Ambas versões possuem as mesmas funcionalidades, porém a 
versão 2.x não possui compatibilidade com navegadores antigos 
(internet explorer 6, 7 e 8).
A seguir, podemos observar um exemplo de código. Logo, 
o código comentado demonstra como a ação é feita com JavaS-
cript sem o uso do framework jQuery.
<html>
 <head>
 <script src=”Jquery-2.1.1.js”></script>
 <script>
 function executa()
 {
 //document.
getElementById(“teste”).value = 5;
 $(“#teste”).val(5);
 }
 </script>
 </head>
 
http://jquery.com/ 
http://jquery.com/download/
http://jquery.com/download/
125PROGRAMAÇÃO WEB
 <body onload=”executa()”>
 <input type=”text” id=”teste”></input>
 </body>
</html> 
Seletores JQuery
O jQuery apresenta uma forma de selecionar os elementos, 
muito dinâmica e simplificada, sendo muito semelhante aos 
seletores de CSS, mas com recursos mais avançados. Agora, 
serão apresentados alguns dos seletores que podem ser empre-
gados com jQuery.
Seletor por Id: Permite a seleção através do Id de um 
elemento. Exemplo:
Html: 
 <td id=”célula”></td>
JavaScript:
 document.getElementById(“célula”)
Jquery: 
 $(“#celula”)
Seletor por Classe: Permite a seleção de elementos através 
da propriedade class dos elementos, retornando um array de 
elementos. Exemplo:
Html: 
 <td class=“celula”></td>
JavaScript:
 document.getElementsByClassName(“célula”)
Jquery: 
 $(“.celula”)
Seletor por Elemento: Permite a seleção de elementos 
através do nome do elemento, retornandoum array de elemen-
tos. Exemplo:
Html: 
 <td></td>
JavaScript:
 document.getElementsByTagName(“td”)
Jquery: 
 $(“.td”)
126PROGRAMAÇÃO WEB
Seletor Múltiplo: O seletor múltiplo permite a combinação 
de diversos elementos e diversos tipos de seletores ao mesmo 
tempo, retornando um array com os elementos selecionados.
Além dos seletores antes apresentado, existem diversos 
outros que podem ser utilizados. Para saber mais sobre estes 
seletores, devemos acessar a documentação do jQuery, por meio 
do endereço http://api.jquery.com/category/selectors/.
Eventos JQuery
O uso do jQuery permite ampliar a quantidade e tipos de 
eventos que já eram disponibilizados no JavaScript. O primei-
ro evento a ser considerado com o jQuery é o evento “ready”. 
Esse evento é muito importante, pois o mesmo será disparado 
quando a página concluir a criação da árvore DOM, contendo 
os elementos da página, diferentemente do evento “onLoad” do 
JavaScript clássico, o qual é executado quando a página concluí 
o carregamento de todos os elementos, inclusive o seu conteúdo, 
como imagens, tornando a execução das instruções contidas no 
evento “ready” muito mais rápida do que o “load”. Logo a seguir, 
temos o exemplo de como utilizar o evento ready:
<html>
 <head>
 <script>
 $(document).ready(function(){
 //Aqui devem ser programados os 
 demais eventos . . . 
 })
 </script>
 <head>
 <body>
 </body>
</html>
Internamente, ao evento “ready” podem ser adicionados 
demais eventos e códigos em JavaScript. Estes eventos podem 
ser adicionados neste local, também com o emprego de funções 
anônimas vistas anteriormente. Agora, segue exemplo de como 
programar no evento “ready”.
<html>
 <head>
 <script>
 $(document).ready(function(){
 
 //Aqui foi escrita uma mensagem no 
 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...”);
127PROGRAMAÇÃO WEB
 });
 })
 </script>
 <head>
 <body>
 </body>
</html>
Adiante, será apresentada uma tabela com outros eventos 
que podem ser utilizados com jQuery.
Eventos de Mouse
click() Evento gerado quando se produz um click em um 
elemento da página.
dblclick() Evento gerado quando se produz um duplo clique sobre 
um elemento.
hover() Executada quando o mouse entra e sai de cima de um 
elemento.
mousedown() Executado quando o usuário pressiona o botão do 
mouse.
mouseup() Executado quando o usuário solta o botão do mouse.
mouseenter() Executado quando o mouse for situado sobre o emento.
mouseleave() Executado quando o mouse sai de cima de um 
elemento.
mousemove() Executado quando o mouse é movimentado sobre o 
elemento.
mouseout() Executado quando o mouse sai do elemento.
Eventos de teclado
keydown() Executado no momento em que uma tecla é 
pressionada, independente de se soltar ou manter a 
tecla pressionada.
keypress() Executado quando uma tecla é pressionada. É executado 
uma vez se a tecla é pressionada e liberada. Executado 
diversas vezes se a tecla for pressionada e mantida.
keyup() Executado no momento em que uma tecla é liberada 
após ser pressionada.
Eventos combinados de teclado e mouse
focusin() Evento executado quando um elemento ganha o foco. 
Este foco pode ser causado pelo clique do mouse ou 
pela tabulação do teclado.
focusout() Este evento ocorre quando um elemento perde o foco, 
podendo ser perdido pelo uso do mouse ou tabulação 
do teclado.
focus() Executado quando um elemento ganha o foco.
Funcionalidades do JQuery
Além dos novos eventos e seletores, o jQuery apresenta 
inúmeras facilidades que podem ser empregadas no desenvolvi-
mento em JavaScript. Dentre essas facilidades, está a execução 
de rotinas Ajax e também facilitadores relativos a manipula-
ção de elementos. O uso de recursos Ajax será visto em outra 
disciplina, enquanto que agora serão apresentados alguns dos 
128PROGRAMAÇÃO WEB
recursos que facilitam a programação em JavaScript.
$.trim(str): Este comando remove espaços na esquerda e 
na direita de uma strings. Exemplo:
<script>
 var nome = “ Juliano “;
 nome = $.trim(nome);
</script>
$.inArray(valor, array): Retorna a primeira ocorrência do 
valor passado, que for encontrada no vetor passado. Exemplo:
<script>
 var nomes = new Array();
 var valorEncontrado;
 
 nomes[0] = “José”;
 nomes[1] = “Carlos”;
 nomes[2] = “Cassio”;
 valorEncontrado = $.inArray(“Carlos”,nomes);
 alert(valorEncontrado);
 
</script>
$.isArray(objeto): Retorna verdadeiro se o objeto passado 
for um array JavaScript.
$.unique(array): Retorna um array de elementos somente 
com elementos únicos.
$.type(objeto): Determina o tipo do elemento. Exemplo:
<script>
 if ($.type(true) == “boolean”)
 {
 document.write(“Este tipo é booleano”);
 }
</script>
.val(): Retorna o valor (conteúdo) de um determinado 
objeto.
.text(): Seta o valor para um determinado objeto. Exemplo:
<script>
 var conteudo = $(“camponome”).val();
 $(“p”).text(conteudo);
</script>
.css(): Atribui ou permite a leitura de um determinado va-
lor de uma propriedade CSS do elemento em questão. Exemplo:
<script>
 //lendo a cor de fundo de um paragrafo para uma 
 variável
 Var corDeFundo;
 corDeFundo = $(“p”).css(“background-color”);
</script>
129PROGRAMAÇÃO WEB
Biblioteca jQuery UI
O jQuery UI é uma biblioteca JavaScript, criada em 2007 
por um grupo de desenvolvedores que, atualmente, possuem 
como gerente de projeto Richard D. Worth.
A biblioteca jQuery UI foi criada com o objetivo de ser 
utilizada em conjunto com a biblioteca jQuery, objetivando a 
criação de elementos para interfaces de usuários ricos.
Essa biblioteca permite ao desenvolvedor criar elementos 
de interface com o usuário, com um mínimo de código e sintaxe 
semelhante a biblioteca jQuery.
A biblioteca jQuery UI, bem como uma vasta documen-
tação da mesma podem ser encontrados no site http://jqueryui.
com/.
Os elementos que fazem parte da biblioteca jQuery UI 
foram classificados de acordo com as suas funcionalidades, o 
que pode ser observado na tabela seguinte.
Grupo Nome Descrição
Co
m
po
ne
nt
es
Draggable 
(arrastar)
Cria elementos possíveis de serem arrastados pela 
interface.
Droppable 
(soltar)
Cria elementos para receber os elementos 
arrastáveis.
Resizable 
(dimensionar)
Cria elementos cujas dimensões podem ser 
controladas pelo usuário.
Selectable 
(selecionar)
Cria elementos que possam ser selecionados pelo 
usuário, seja individualmente ou em grupos.
Sortable 
(ordenar)
Cria elementos que possam ser ordenados pelo 
usuário com ação de arrastar e soltar.
W
id
ge
ts
Accordion Cria o efeito acordeão, para ocultar/mostrar 
conteúdo.
Autocomplete Apresenta ao usuário uma lista de sugestões de 
palavras, à medida que ele digita em um campo 
texto.
Button Possibilidade de criar vários tipos de botões.
Datepicker Cria uma janela popup para seleção da data a ser 
digitada, em um campo destinado a coletar uma 
data.
Dialog Cria vários tipos de janelas de diálogo, como janelas 
modais.
Progressbar Cria uma barra indicativa do andamento de uma 
tarefa.
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.
130PROGRAMAÇÃO WEB
Ef
ei
to
s
Color Animation Este efeito tem por objetivo animar as cores de um 
elemento.
Toggle class Esses efeitos destinam-se a animar elementos 
baseados na manipulação dos seus atributos de 
classe.
Add class
Remove class
Swich class
Effect Aplica em um elemento uma série de efeitos de 
animação padrão da biblioteca jQuery, tais como os 
efeitos de esmaecimento, pulsação, balanço, sacudir, 
etc.
Toggle Aplica um dos efeitos padrão da biblioteca jQuery, 
com a finalidade de alternar entre ocultar e exibir 
um conteúdo.
Hide Efeito destinado a ocultar um conteúdo.
Show Efeito destinado a mostrar um conteúdo.
U
til
id
ad
es Position Destina-sea controlar e manipular o 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.
<html>
<head>
 <title>jQuery UI Datepicker - Default 
functionality</title>
 <link rel=”stylesheet” href=”jquery-ui.css”>
 <script src=”jquery-1.10.2.js”></script>
 <script src=”jquery-ui.js”></script>
 <script>
 $(function() {
 $(“#datepicker” ).datepicker();
 });
 </script>
</head>
<body>
 <p>Date: <input type=”text” id=”datepicker”></p>
</body>
</html>
Framework Bootstrap
131PROGRAMAÇÃO WEB
Com a utilização cada vez maior de dispositivos mobile de 
tela pequena (como smatphones e tables) para acessar a internet, 
a preocupação dos web designers em conseguir criar um website 
que exibisse as suas informações de forma eficiente e com uma 
boa usabilidade em telas menores passou a ser cada vez maior.
 Antes do surgimento do Bootstrap, os websites precisavam 
ter toda a sua programação do CSS adaptada, de forma manual, 
para que os sites pudessem ser visualizados corretamente nestes 
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.
 O respectivo framework não se resume a formatação da 
exibição dos elementos em tela, mas ele também emprega um 
conceito de colunas para ajustar e posicionar os elementos em 
tela, sendo um bom framework também para ajustar o layout e 
posicionamento dos elementos em tela.
 Toda a documentação de como utilizar este framework 
em língua portuguesa pode ser acessada no endereço http://
getbootstrap.com.br/.
http://getbootstrap.com.br/
http://getbootstrap.com.br/
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?
135PROGRAMAÇÃO WEB
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.
	A história da internet
	Introdução à Internet
	As fases da Internet
	A Linguagem HTML
	Mais um pouco de história
	Tags Estruturais
	Formatação de Texto e Imagens 
	Tags para inclusão de títulos 
	Tag para inclusão de parágrafos e quebra de linhas
	Tags para destacar textos
	Tag para alterar a fonte de um texto
	Tag para inclusão de imagens em uma página
	Tag para adicionar separação de textos em documento
	Meta Tags e Caracteres Especiais 
	Hyperlinks e Âncoras 
	Listas
	Tabelas
	Formulários HTML
	Inclusão de Elementos de Áudio e Vídeo
	Noções de design
	Noções de Design
	Arquitetura de Informação
	Usabilidade
	Aprendizagem
	Eficiência
	Memorização
	Robustez
	Satisfação
	Acessibilidade
	Layout
	A Linguagem CSS
	Conceito
	Forma de Aplicação e Precedências do CSS
	Tags adicionais de HTML para iteração com o CSS
	Seletores
	Unidade de Medida em CSS
	Estilos para Formatação de Texto
	Fluxo de Página
	JavaScript
	Um pouco de História
	Estrutura de um Programa JavaScript
	Variáveis, Atribuições e Operações
	Interagindo com o Usuário
	Comandos Condicionais e Expressões
	Estruturas de Repetição
	Funções
	Orientação a Objetos em JavaScript
	Eventos
	Aplicação de CSS com JavaScript
	Recursos Avançados do JavaScript
	DOM e Manipulação de Elementos
	Funções Anônimas
	Interagindo com o Tempo
	Rotinas de Geolocalização
	Substituindo os Cookies
	Canvas API
	Frameworks JavaScript
	Conceito
	Framework Modernizr
	Framework JQuery
	Eventos JQuery
	Funcionalidades do JQuery
	Framework JQuery UI
	Framework Bootstrap