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