FRONT-END-DESIGN

Prévia do material em texto

1 
 
 
 
 
 
 
 
 
2 
 
SUMÁRIO 
1 INTRODUÇÃO ..................................................................................... 7 
2 EVOLUÇÃO HISTÓRICA DO HTML ................................................... 8 
2.1 História do HTML .......................................................................... 8 
2.2 Diferenças entre as versões HTML ............................................. 13 
2.2.1 HTML versus HTML5 ................................................................... 13 
2.2.2 HTML versus XHTML ................................................................... 14 
2.2.3 HTML5 versus XHTML ................................................................. 16 
2.3 Mudanças do HTML5 .................................................................. 17 
2.3.1 Semântica .................................................................................... 18 
2.3.2 Áudio e vídeo ............................................................................... 21 
2.3.3 Gráficos e efeitos em 3D .............................................................. 23 
2.3.4 Atributos HTML ............................................................................ 23 
2.3.5 Geolocalização ............................................................................. 24 
2.3.6 Armazenamento de dados ........................................................... 24 
2.3.7 APIs para comunicação ............................................................... 25 
2.3.8 Integração .................................................................................... 25 
3 FOLHA DE ESTILO EM CASCATAS (CSS) ...................................... 27 
3.1 Conceito de CSS ......................................................................... 27 
3.1.1 Funcionamento e vantagens do CSS ........................................... 28 
3.1.2 Regra de estilização ..................................................................... 29 
3.2 Leiautes em HTML com CSS ...................................................... 30 
3.2.1 Importação de folhas de estilo ..................................................... 31 
3.2.2 Tipografia ..................................................................................... 34 
 
3 
 
3.2.3 Background .................................................................................. 35 
3.2.4 Dimensão de elementos .............................................................. 36 
3.2.5 Posicionamento ............................................................................ 39 
4 TRABALHANDO COM LINKS E FORMULÁRIOS ............................. 41 
4.1 Desenvolvimento de páginas HTML com links e âncoras ........... 41 
4.1.1 Links relativos .............................................................................. 41 
4.1.2 Links absolutos ............................................................................ 42 
4.1.3 Links para e-mails ........................................................................ 43 
4.1.4 Links em imagens ........................................................................ 43 
4.1.5 Atributo target ............................................................................... 43 
4.2 Desenvolvimento de páginas HTML com formulários ................. 44 
4.2.1 Tag <form> ................................................................................... 45 
4.2.2 Diferentes componentes de um formulário................................... 46 
4.2.2.1 Tag input ................................................................................... 46 
4.2.2.2 Tipo text, email e password ....................................................... 47 
4.2.2.3 Tipo checkbox e radio ............................................................... 49 
4.2.2.4 Tipos hidden e file ..................................................................... 50 
4.2.2.5 Tipos button e submit ................................................................ 51 
4.2.2.6 Tag <select> ............................................................................. 52 
4.2.2.7 Tag <textarea> .......................................................................... 53 
5 TRABALHANDO COM LISTAS E TABELAS ..................................... 54 
5.1 Listas HTML ................................................................................ 54 
5.1.1 Lista ordenada em HTML ............................................................. 55 
5.1.2 Lista não ordenada em HTML ...................................................... 58 
5.1.3 Lista de descrição HTML ............................................................. 60 
 
4 
 
5.2 Tabelas em HTML ....................................................................... 60 
5.3 Páginas Web com listas e tabelas .............................................. 67 
6 MANIPULANDO BROWSER OBJECT MODEL, COOKIES E 
TEMPORIZADORES EM JAVASCRIPT ............................................................... 70 
6.1 Browser object model .................................................................. 70 
6.2 Objetos do BOM .......................................................................... 72 
6.2.1 Objeto document .......................................................................... 75 
6.2.2 Objeto frames ............................................................................... 75 
6.2.3 Objeto history ............................................................................... 76 
6.2.4 Objeto screen ............................................................................... 76 
6.2.5 Objeto navigator ........................................................................... 76 
6.2.6 Objeto location ............................................................................. 77 
6.3 Cookies e temporizadores em JavaScript ................................... 78 
7 COMPONENTES DO REACT ........................................................... 82 
7.1 Renderização de componentes ................................................... 84 
7.2 Props ........................................................................................... 85 
7.2.1 Props entre componentes ............................................................ 87 
7.3 Criação de página com componentes do React .......................... 88 
8 Objetos nativos do JavaScript ........................................................... 94 
8.1 Objetos nativos ........................................................................... 94 
8.2 Tipos de objetos nativos ............................................................. 96 
8.2.1 Objeto global ................................................................................ 97 
8.2.2 Objetos fundamentais .................................................................. 98 
8.2.3 Objetos de números e datas ...................................................... 100 
8.2.4 Objetos de processamento de texto ........................................... 100 
 
5 
 
8.2.5 Objetos de coleção .................................................................... 100 
8.2.6 Objetos de dados estruturados .................................................. 101 
8.2.7 Objetos de controle de abstrações ............................................. 101 
8.2.8 Objetos de reflexão .................................................................... 101 
8.3 Aplicação de objetos nativos em códigos JavaScript ................ 102 
8.3.1 Math ........................................................................................... 102 
8.3.2 Date ........................................................................................... 104 
8.3.2.1 RegExp ................................................................................... 106 
9 DOM: DOCUMENT OBJECT MODEL ............................................. 109 
9.1 Definição ...................................................................................110 
9.2 Estrutura da árvore DOM .......................................................... 112 
9.2.1 Acessando o DOM ..................................................................... 113 
9.2.2 Propriedades fundamentais e tipos de dados ............................ 116 
9.3 Interfaces do DOM: HTML, CSS e Core ................................... 117 
10 INTRODUÇÃO AO REDUX .......................................................... 119 
10.1 Conceitos básicos Do redux ..................................................... 119 
10.1.1 Estados de um componente ..................................................... 120 
10.1.2 Arquitetura Flux ........................................................................ 122 
10.2 Principais características do Redux .......................................... 124 
10.2.1 Action ....................................................................................... 124 
10.2.2 Store ........................................................................................ 125 
10.2.3 Reducer.................................................................................... 126 
10.2.4 Conexão entre componente e Redux ....................................... 127 
10.3 Aplicação do Redux com o React ............................................. 129 
10.3.1 Exemplo de aplicação .............................................................. 130 
 
6 
 
11 HERANÇA .................................................................................... 134 
11.1 Object.prototype........................................................................ 134 
11.2 Métodos associados ao protótipo de objeto .............................. 138 
11.2.1 Método hasOwnProperty.......................................................... 138 
11.2.2 Método isPrototypeOf .............................................................. 139 
11.2.3 Método propertyIsEnumerable ................................................. 140 
11.2.4 Método toString e toLocaleString ............................................. 141 
11.2.5 Método valueOf ........................................................................ 141 
11.3 Aplicações com herança ........................................................... 142 
12 CONHECENDO O REACT ........................................................... 145 
12.1 Função JSX .............................................................................. 147 
12.2 Página HTML usando React e JSX .......................................... 150 
12.3 Configurando o ambiente .......................................................... 153 
13 EVENTOS NO REACT ................................................................. 154 
13.1 Eventos React e DOM .............................................................. 154 
13.1.1 Eventos DOM ........................................................................... 155 
13.1.2 Arquitetura de eventos DOM .................................................... 157 
13.1.3 Eventos React .......................................................................... 158 
13.2 Passagem de parâmetros para manipuladores de eventos ...... 160 
13.3 Exemplos de aplicações ........................................................... 164 
14 REFERÊNCIAS BIBLIOGRÁFICAS ............................................. 167 
 
 
 
 
 
 
7 
 
1 INTRODUÇÃO 
 
Prezado aluno! 
 
O Grupo Educacional FAVENI, esclarece que o material virtual é 
semelhante ao da sala de aula presencial. Em uma sala de aula, é raro – quase 
improvável - um aluno se levantar, interromper a exposição, dirigir-se ao professor 
e fazer uma pergunta, para que seja esclarecida uma dúvida sobre o tema tratado. 
O comum é que esse aluno faça a pergunta em voz alta para todos ouvirem e todos 
ouvirão a resposta. No espaço virtual, é a mesma coisa. Não hesite em perguntar, 
as perguntas poderão ser direcionadas ao protocolo de atendimento que serão 
respondidas em tempo hábil. 
Os cursos à distância exigem do aluno tempo e organização. No caso da 
nossa disciplina é preciso ter um horário destinado à leitura do texto base e à 
execução das avaliações propostas. A vantagem é que poderá reservar o dia da 
semana e a hora que lhe convier para isso. 
A organização é o quesito indispensável, porque há uma sequência a ser 
seguida e prazos definidos para as atividades. 
Bons estudos! 
 
 
 
 
 
 
 
 
 
 
 
 
8 
 
2 EVOLUÇÃO HISTÓRICA DO HTML 
HTML, ou Hyper-Text Markup Language, é o que cria a estrutura básica da 
World Wide Web. HTML consiste em marcadores codificados chamados tags, que 
cercam e diferenciam trechos de texto, indicando a função e a finalidade do que 
está marcado. Algumas tags especificam como as informações são exibidas no 
documento, enquanto outras criam links entre documentos e, ainda, outras, 
conteúdo na Internet. HTML5 é a última revisão do padrão HTML desenvolvida pelo 
World Wide Web Consortium. 
2.1 História do HTML 
Em 1980, nasceram os princípios fundamentais do HTML a partir de um 
primitivo modelo de hipertexto conhecido como Enquire, escrito em linguagem 
Pascal, no CERN (Conseil Européen pour la Recherche Nucléaire — Organização 
Europeia para a Pesquisa Nuclear), por meio das pesquisas de Tim Berners-Lee, 
que, na época, trabalhava na divisão de computação da instituição (Figura 1). 
Com o auxílio de Robert Cailliau, em 1990, Tim Berners-Lee construiu o 
primeiro navegador/editor, chamado de WorldWideWeb, e criou o protocolo HTTP 
(HyperText Transference Protocol — Protocolo de Transferência de Hipertexto) 
para distribuir conteúdo na rede. O HTTP era alimentado com uma nova linguagem 
de marcação, o HTML — baseado no SGML (Standard Generalized Markup 
Language), uma linguagem amplamente aceita para a estruturação de documentos 
e da qual o HTML herdou as tags de título, cabeçalho e parágrafo. A grande 
novidade foi (a) marcação a com o elemento href, que permitia a ligação (link) entre 
vários documentos (SAGA, 2020) 
 
 
 
 
 
9 
 
Figura 01 - Esta máquina NeXT foi usada por Tim Berners-Lee, em 1990, 
para executar o primeiro servidor Web. 
 
Fonte: History... ([2018], documento on-line). 
O programador Marc Andreessen, que logo fundaria Netscape, inicia o 
projeto de seu próprio navegador: o Mosaic. Em dezembro de 1992, Andreessen, 
participando de uma lista de discussão mundial (WWW-talk) para difundir as 
propostas de Lee sobre o HTML, propôs a implementação de uma tag para 
imagens: a tag img (FLATSCHART, 2011). 
Um documento chamado “Hypertext Markup Language” foi publicado em 
1993 pela IETF (Internet Engineering Task Force). Nesse mesmo ano, o navegador 
Mosaic foi lançado, permitindo a exibição de imagens, listas e formulários 
(FLATSCHART, 2011). 
Em 1994, realizou-se, em Genebra, a primeira conferência mundial sobre 
Web, a World Wide Web Conference, da qual surgiu a especificação HTML 2.0. 
Marc Andreessen e Jim Clark fundaram a Netscape Communications, apontando 
para o nascimento do primeiro navegador de alcance global. No final de 1994, foi 
criado o W3C (World Wide Web Consortium — Consórcio World Wide Web) para 
coordenar o desenvolvimento de padrões abertos para a Web (FLATSCHART, 
2011). 
 
10 
 
Com a criação do W3C, o desenvolvimento do HTML mudou de local 
novamente. Uma primeira tentativa abortada de estender o HTML em 1995, 
conhecida como HTML 3.0, abriu caminho para uma abordagem mais pragmática, 
conhecida como HTML 3.2, que foi concluída em 1997. O HTML 4.01 se seguiu no 
final de 1999 (RAGGETT, 1997; RAGGETT; LE HORS; JACOBS, 1999). 
No ano seguinte, a associação ao W3C decidiu parar de desenvolver HTML 
e, em vez disso, começou a trabalhar em um equivalente baseado em XML, 
chamado XHTML. Esse esforço começou com uma reformulação do HTML 4.01 em 
XML, conhecido como XHTML 1.0, que não adicionou novos recursos – exceto a 
nova serialização –, e foi concluído em 2000(PEMBERTON et al., 2000). Após o 
XHTML 1.0, o foco do W3C passou a facilitar para outros grupos de trabalho 
estenderem o XHTML, sob a bandeira da Modularização XHTML. Paralelamente, o 
W3C também trabalhou em uma nova linguagem que não era compatível com as 
linguagens HTML e XHTML anteriores, denominada XHTML 2.0 (BIRBECK et al., 
2010). 
Na época em que a evolução do HTML foi interrompida, em 1998, partes da 
API para HTML desenvolvidas pelos fornecedores de navegadores foram 
especificadas e publicadas sob o nome DOM Nível 1 (em 1998) e DOM Nível 2 
Principal e DOM Nível 2 HTML (a partir de 2000 e culminando em 2003). Esses 
esforços acabaram com algumas especificações do Nível 3 do DOM publicadas em 
2004, mas o grupo de trabalho foi fechado antes que todos os rascunhos do Nível 
3 fossem concluídos (WOOD et al., 1998; LE HORS et al., 2000; LE HORS et al., 
2004). 
Em 2003, a publicação do XForms, uma tecnologia que foi posicionada 
como a próxima geração de formulários da Web, despertou um interesse renovado 
na evolução do próprio HTML, em vez de encontrar substitutos para ele. Esse 
interesse nasceu da constatação de que a implantação do XML como tecnologia da 
Web limitava-se a tecnologias totalmente novas (como RSS e Atom posterior), em 
vez de substituir as tecnologias implantadas existentes (como HTML) (DUBINKO et 
al., 2000). 
 
11 
 
Uma prova de conceito para mostrar que era possível estender os 
formulários do HTML 4.01 para fornecer muitos dos recursos introduzidos pelo 
XForms 1.0, sem exigir que os navegadores implementassem mecanismos de 
renderização incompatíveis com as páginas da Web em HTML existentes, foi o 
primeiro resultado disso. O interesse foi renovado. Nessa fase inicial, enquanto o 
rascunho já estava disponível ao público, e eram solicitadas sugestões de todas as 
fontes, a especificação estava sob os direitos autorais da Opera Software 
(HICKSON, 2005). 
A ideia de que a evolução do HTML deveria ser reaberta foi testada em um 
workshop do W3C, em 2004, onde foram apresentados alguns dos princípios 
subjacentes ao trabalho em HTML, bem como a proposta preliminar, cobrindo 
apenas recursos relacionados a formulários. A proposta foi rejeitada com o 
argumento de que ela conflitava com a direção escolhida anteriormente para a 
evolução da Web. A equipe e os membros do W3C votaram para continuar 
desenvolvendo substituições baseadas em XML (JACOBS; WALSH, 2004). 
Pouco tempo depois, Apple, Mozilla e Opera anunciaram conjuntamente 
sua intenção de continuar trabalhando no esforço sob o guarda-chuva de um novo 
local chamado WHATWG (Web Hypertext Application Technology Working Group 
— Grupo de Trabalho de Tecnologia de Aplicações de Hipertexto para Web). Uma 
lista de discussão pública foi criada, e o rascunho foi movido para o site WHATWG. 
Os direitos autorais foram posteriormente alterados para pertencerem em conjunto 
aos três fornecedores e permitirem a reutilização da especificação (WEB 
HYPERTEXT APPLICATION TECHNOLOGY WORKING GROUP, 2019). 
O WHATWG foi baseado em vários princípios fundamentais, em particular 
que as tecnologias precisam ser compatíveis com versões anteriores, que 
especificações e implementações precisam corresponder, mesmo que isso 
signifique alterar a especificação em vez das implementações, e que as 
especificações precisam ser detalhadas o suficiente para que as implementações 
possam alcançar interoperabilidade completa sem engenharia reversa (WEB 
HYPERTEXT APPLICATION TECHNOLOGY WORKING GROUP, 2019). 
 
12 
 
O último requisito, em particular, exigia que o escopo da especificação 
HTML incluísse o que havia sido especificado anteriormente em três documentos 
separados: HTML 4.01, XHTML 1.1 e HTML nível 2 do DOM. Também significava 
incluir significativamente mais detalhes do que anteriormente havia sido 
considerado a norma (WEB HYPERTEXT APPLICATION TECHNOLOGY 
WORKING GROUP, 2019). 
Em 2006, o W3C manifestou interesse em participar do desenvolvimento do 
HTML 5.0 e, em 2007, formou um grupo de trabalho encarregado de trabalhar com 
o WHATWG no desenvolvimento da especificação HTML. Apple, Mozilla e Opera 
permitiram ao W3C publicar a especificação sob os direitos autorais do W3C, 
mantendo uma versão com uma licença menos restritiva no site WHATWG (WEB 
HYPERTEXT APPLICATION TECHNOLOGY WORKING GROUP, 2019). 
Por vários anos, os dois grupos trabalharam juntos sob o mesmo editor: Ian 
Hickson. Em 2011, os grupos chegaram à conclusão de que tinham objetivos 
diferentes: o W3C queria traçar uma linha para os recursos de uma Recomendação 
HTML 5.0, enquanto o WHATWG desejava continuar trabalhando em um padrão 
para HTML, mantendo continuamente a especificação e adição de novos recursos. 
Em meados de 2012, uma nova equipe de edição foi introduzida ao W3C para cuidar 
da criação de uma Recomendação HTML 5.0 e preparar um Rascunho de Trabalho 
para a próxima versão HTML (HICKSON et al., 2014). 
Em 28 de outubro de 2014, o W3C publicou o HTML5 como uma 
recomendação. O HTML passou a ser um ambiente para a execução de aplicativos 
complexos, em vez de uma linguagem de marcação simples como costumava ser. 
Os desenvolvedores começaram a aproveitar esses recursos em vez de plug-ins, 
como o Adobe Flash ou o Silverlight, da Microsoft, menos conhecido, o que levou 
ao abandono gradual do suporte a plug-ins pelos fabricantes de navegadores 
(HICKSON et al., 2014). 
Novas versões do HTML passaram a ser recomendadas pelo W3C. Em 1 
de novembro de 2016, o W3C publicou o HTML 5.1, como uma recomendação 
(FAULKNER et al., 2016a). Em 18 de agosto de 2016, o W3C publicou o Primeiro 
Projeto Público de Trabalho do HTML 5.2 (FAULKNER et al., 2016b). Em 14 de 
 
13 
 
dezembro de 2017, o W3C publicou o HTML 5.2, como uma recomendação 
(FAULKNER et al., 2017). No mesmo dia, 14 de dezembro de 2017, o W3C também 
publicou o Primeiro Rascunho Público de Trabalho do HTML 5.3 (AAS et al., 2017). 
2.2 Diferenças entre as versões HTML 
As versões do HTML representam aprimoramentos padronizados na 
linguagem fundamental da World Wide Web. À medida que as novas tecnologias 
são desenvolvidas, assim como métodos mais eficientes para alcançar os 
resultados desejados das páginas da Web, desenvolvedores e administradores 
adotam padrões de linguagem aceitos e os designam usando números para trazer 
ordem e uniformidade à Web (SAGA, 2020) 
Os termos HTML, XHTML e HTML5 são frequentemente usados em web 
design. A maioria das pessoas iniciantes em web design geralmente acha esses 
termos confusos e não sabe qual linguagem dessas três aprender. A confusão é 
compreensível, porque todas elas são linguagens de marcação e essencialmente 
servem ao mesmo objetivo (SAGA, 2020) 
 
2.2.1 HTML versus HTML5 
O HTML5 foi desenvolvido por um grupo conhecido como WHATWG, com 
o objetivo de aprimorar as versões HTML anteriores e resolver alguns problemas de 
compatibilidade entre navegadores. Usaremos 'HTML' para se referir às versões 
anteriores ao HTML5 (WEB HYPERTEXT APPLICATION TECHNOLOGY 
WORKING GROUP, 2019). As principais diferenças entre HTML e HTML5 são as 
seguintes: 
 
 O HTML5 oferece melhor suporte para várias formas de mídia, como 
áudio e vídeo, fornecendo tags para elas. O HTML não contém essas 
tags e conta com plug-ins de terceiros. 
 
14 
 
 O HTML não permite que o JavaScript seja executado no navegador. 
O HTML5 resolveu esse problema introduzindo a API JS Web 
Worker. Agora, devido ao suporte nativo ao JavaScript, as páginas 
da Web podem ser mais bem-projetadas, usando scripts de front-end 
para aprimorar a experiência do usuário. 
 O HTML5 inclui novos atributos de entrada, como e-mail, URLs, data 
e hora, pesquisa, etc. 
 O HTML5 é independente do dispositivo e tem melhor 
compatibilidade com o navegador do que as versões HTML 
anteriores. 
 O HTML5 apresenta melhores regras de análise (a análise é o 
processamentode texto) e maior flexibilidade dessa análise do que 
o HTML. 
 O HTML5 também facilita a localização do local sem plug-ins de 
terceiros. 
 O HTML5 também contém suporte nativo para gráficos vetoriais, 
portanto não há necessidade de software de terceiros, como o Adobe 
Flash. 
 
Em resumo, o HTML5 é apenas uma versão melhor do HTML, com recursos 
e funcionalidades adicionais (SAGA, 2020) 
 
2.2.2 HTML versus XHTML 
XHTML é uma família de tipos e módulos de documentos atuais e futuros, 
que reproduzem e estendem o HTML 4. Os tipos de documento da família XHTML 
são baseados em XML. XHTML 1.0 é o primeiro tipo de documento na família 
XHTML, uma reformulação dos três tipos de documentos HTML 4, como aplicativos 
do XML 1.0. Ele deve ser usado como uma linguagem para conteúdo compatível 
 
15 
 
com XML e, se algumas diretrizes simples forem seguidas, operar em agentes de 
usuário compatíveis com HTML 4 (PEMBERTON et al., 2000). 
XHTML foi desenvolvido como uma extensão para HTML. Não há muitas 
diferenças entre HTML4 e XHTML, sendo este último basicamente uma versão mais 
rígida do primeiro. As principais diferenças entre HTML e XHTML são as seguintes: 
 
 O HTML4 permite que alguns elementos omitam a tag final. As tags 
finais são adicionadas ao fechar uma parte do texto, como um 
parágrafo. Eles geralmente são simbolizados com uma barra 
invertida (por exemplo, a tag de abertura de um parágrafo é <p>, 
enquanto a tag final é </p>). XHTML requer que todos os elementos 
incluam a tag final. 
 O HTML4 permite a sobreposição de certos elementos. XHTML não 
permite que nenhum elemento se sobreponha. 
 Os valores dos atributos (como tamanho da fonte) devem ser citados 
em XHTML, mesmo que sejam numéricos. O HTML não inclui 
valores entre aspas para atributos 
 Os atributos não podem ser minimizados em HTML. 
 Há uma pequena diferença na maneira como os elementos vazios 
são manipulados. 
 
Embora as diferenças acima sejam as mais importantes, também existem 
outras muito sutis, mas são realmente raras. Você sempre pode verificar a 
documentação do XHTML para obter mais informações. O argumento é que o 
XHTML foi projetado para resolver alguns problemas em HTML, incorporando 
alguns recursos do XML (SAGA, 2020) 
 
 
16 
 
2.2.3 HTML5 versus XHTML 
Como XHTML e HTML são praticamente os mesmos, as diferenças entre 
XHTML e HTML5 são as mesmas que as existentes entre HTML4 e HTML5. No 
entanto, a seguir, estão algumas das diferenças mais sutis entre HTML5 e XHTML 
(PIETERS, 2014): 
 
 Enquanto XHTML faz distinção entre maiúsculas e minúsculas, o 
HTML5 não (HTML também não faz distinção entre maiúsculas e 
minúsculas). 
 O HTML5 tem um tipo de documento muito mais simples que o 
XHTML e o HTML (o DOCTYPE diz ao navegador como interpretar 
os dados). 
 O HTML5 é compatível com todos os navegadores, enquanto o 
XHTML não. 
 O HTML5 é mais brando, seguindo os passos do HTML4, do que o 
XHTML. 
 O HTML5 é mais adequado para dispositivos móveis, como tablets e 
telefones, enquanto o XHTML é mais adequado para telas de 
computador. 
 
Como conclusão, todas as três são linguagens de marcação com apenas 
alguns recursos presentes em cada um que não estão presentes nos outros. 
Embora o XHTML tenha sido projetado para ser uma versão melhor do HTML4, 
incorporando alguns recursos do XML, o HTML5 acabou sendo muito melhor do 
que os dois e é, de longe, a linguagem de marcação mais usada atualmente devido 
à adição de muitos recursos importantes. O principal argumento é que todos eles 
são apenas versões diferentes do padrão HTML das linguagens de marcação, mas 
com estilos e recursos sintáticos diferentes. Se você é iniciante em web design, 
HTML4 e XHTML não são recomendados, e faria sentido aprender primeiro o 
 
17 
 
HTML5 por causa de sua compatibilidade aprimorada e seu uso generalizado 
(SAGA, 2020) 
2.3 Mudanças do HTML5 
O W3C projetou o padrão HTML5 com vários objetivos: substituir plug-ins 
de multimídia proprietários por padrões abertos, permitindo que os aplicativos da 
Web comportem-se mais como aplicativos nativos, adicionando recursos para 
serviços baseados em localização e fazendo alterações na sintaxe que separa o 
conteúdo da apresentação (SAGA, 2020) 
O HTML5 foi feito para ser simples, implicando em uma sintaxe 
extremamente mais simples e limpa. A simples declaração do tipo de documento 
(DOCTYPE) foi apenas mais uma das facilidades incluídas na nova versão. Agora, 
você precisa inserir apenas um < ! DOCTYPE html > no início do seu documento, 
e tudo estará pronto. Além disso, a sintaxe da HTML5 é compatível também com a 
HTML4 e XHTML1. 
A linguagem apresenta, também, um elemento novo, o <canvas>, 
responsável por substituir muitas das implementações antes feitas em Flash. Isso 
faz muitos desenvolvedores considerarem que esse já se encontra obsoleto e 
futuramente morto (SAGA, 2020) 
A extensão de tags a um tool de novos e interessantes recursos fez uma 
grande diferença na linguagem. Tags como: <header> e <footer>, que estendem a 
funcionalidade de tabelas agora para a página como um todo <section>, <article> e 
<nav> que permitem marcar áreas específicas dos layouts, <vídeo> e <áudio>, para 
uma inclusão melhorada de conteúdos multimídia nas páginas, e <menu> e 
<figure>, para bem arranjar textos, imagens e menus, trazem todo um conjunto de 
implementações e funcionalidades bem-pertinentes para a Web de hoje (SAGA, 
2020) 
Além disso tudo, a remoção de outros recursos, como as tags <center>, 
<big>, <font>, etc., fazem com que a responsabilidade do CSS aliada à nova 
linguagem só aumente, otimizando o desenvolvimento front-end (SILVA, 2011). 
 
18 
 
Como em todas as atualizações anteriores do padrão HTML, os 
navegadores HTML5 são compatíveis com versões anteriores. As páginas mais 
antigas continuam sendo exibidas em novos navegadores, e não será necessário 
reescrever nenhum documento existente. 
O novo padrão é vasto. Por essa razão, o W3C dividiu essas novidades em 
oito áreas tecnológicas. Isso ajuda na homologação do padrão e suporte dos 
fabricantes, que estão sendo feitos em porções (SAGA, 2020) 
2.3.1 Semântica 
Trata-se de um grande desafio para os mecanismos de busca da atualidade 
classificar a importância e relevância das informações contidas nas páginas. Com 
esse intuito, novas tags foram criadas, dando maior importância semântica aos 
textos. Essas tags se comportam como a tradicional tag <div>, que leva este nome 
por dividir o texto em blocos, até então anônimos. Agora, os mesmos podem ser 
classificados, seguindo as principais possibilidades (Figura 2): 
 
 <section> — apresenta a sessão, o tema da qual os artigos têm em 
 comum; 
 <nav> — trata-se dos elementos para a navegação do visitante, 
basicamente o menu; 
 <article> — contém o texto do artigo, o conteúdo propriamente dito; 
 <aside> — informações relacionadas às do artigo, mas que precisam 
 ser separadas do contexto, como notas de rodapé; 
 <header> — contém o cabeçalho; 
 <footer> — contém o rodapé do artigo; 
 <time> — armazena a data e hora daquela informação; 
 <mark> — serve para marcar parte do texto, colocando-o em 
destaque ou para uma referência. 
 
 
 
19 
 
 
Figura 02 - Exemplo de disposição das tags 
 
Fonte: Poyatos (2014, documento on-line). 
Quando tratamos do uso de formulário, a tag <input> já é amplamente 
atualizada para caixas de texto, botões de seleção e de acionamento. Entretanto, 
quando fosse necessário validar uma informação em uma caixa de texto, longos 
trechos de codificação JavaScript faziam-se necessários. 
Destacam-se, portanto, alguns tipos novos e interessantes para a tag 
<input>. Vários foram criados e já possuem validação nativa por parte do navegador 
Web (Figura 3). 
 
 
 
 
 
 
 
 
 
 
20 
 
 
Figura 3 - Exemplo de codificação JavaScript 
 
Fonte: Poyatos (2014, documentoon-line). 
 
O exemplo utiliza os tipos email, number e date, embora existam 
outros. Repare, também, nos novos atributos placeholder e required.O placeholder 
é responsável por exibir mensagens, como marca d'água na caixa de texto que se 
encontra vazia. Já o required (linha 11) quer dizer obrigatório, ou seja, exige o 
preenchimento da caixa de texto, impedindo o formulário de ser submetido enquanto 
a condição não for satisfeita. 
O exemplo faz uso, também, dos novos atributos min e max (linha 13),úteis 
para se estabelecer intervalos de números para o tipo number (Figura 4). 
 
 
 
 
 
 
 
 
 
 
 
21 
 
 
 
Figura 04 - Exemplo anterior em execução. Novos tipos de caixa de texto 
validados nativamente. 
 
Fonte: Poyatos (2014, documento on-line) 
2.3.2 Áudio e vídeo 
O novo recurso mais comentado do HTML5 é o suporte nativo para 
reprodução de áudio e vídeo no navegador. Os navegadores atuais contam com 
plug-ins, como Adobe Flash, Apple QuickTime e Microsoft Silverlight, para 
reproduzir conteúdo multimídia. Para usuários de desktop, esses plug-ins 
funcionam bem e são relativamente transparentes de usar; para o crescente número 
 
22 
 
de usuários que deseja assistir a vídeos em seus iPhones, iPads ou Blackberries, 
não há plug-ins disponíveis. O HTML5 resolveu o problema do plug-in, exigindo 
suporte interno para vídeo em navegadores e permitindo que os designers insiram 
as tags <video> e <audio> em suas páginas. Essas tags contêm informações que 
o navegador pode usar para interpretar e renderizar o conteúdo multimídia (SILVA, 
2011). 
Observe o exemplo a seguir, que demonstra o uso do elemento audio: 
 
<audio src="som.mp3"> 
</audio> 
 
Somente isso, simples e direto, sem necessidade de plug-ins, Flash, Quick 
Time, Windows Media Player e qualquer outro sistema a ser considerado quando 
se pretende incorporar som em uma página Web. Basta declarar o caminho para o 
arquivo de som no atributo src do elemento. O som é reproduzido com as 
funcionalidades nativas do navegador. 
O elemento audio admite os seguintes atributos: atributos globais, src, 
controls, crossorigin, preload, autoplay, mediagroup, loop e muted (HICKSON et al.; 
SILVA, 2011). 
O atributo src destina-se a indicar o caminho para o arquivo de som a ser 
incorporado na página. 
O atributo controls destina-se a fazer com que o navegador renderize os 
controles nativos para o usuário interagir com som. Esse atributo é de uso 
obrigatório, salvo nos casos em que pretendemos criar controles personalizados. 
O atributo crossorigin destina-se a indicar a origem do arquivo de som a ser 
incorporado na página. Os valores possíveis são Anonymus e use-credentials 
(SAGA, 2020) 
O atributo preload destina-se a indicar como o autor espera que seja o 
carregamento do som na página, tendo em vista otimizar a experiência do usuário. 
 
 
23 
 
2.3.3 Gráficos e efeitos em 3D 
O elemento canvas é outro novo recurso do HTML5. Os desenvolvedores 
podem combinar gráficos vetoriais, imagens, áudio e vídeo em um espaço 
predefinido na página. Esses elementos podem ser programados via JavaScript, e 
os usuários poderão interagir com eles via mouse e teclado. A renderização será 
realizada ao lado do cliente, garantindo um processamento mais suave e menos 
gargalos na rede. O elemento canvas pode conter coisas tão simples, quanto formas 
ou linhas geométricas, e coisas tão complexas, quanto jogos e modelos em 
camadas que podem ser manipulados pelo usuário (SILVA, 2011). 
É necessário que o desenvolvedor faça uma análise criteriosa para uso 
desse elemento. Não devemos usá-lo se houver um elemento mais apropriado. Por 
exemplo: para marcar o cabeçalho ou o topo de um site, ainda que ele tenha sido 
projetado com uso maciço de imagens, talvez seja mais apropriado o uso do 
elemento h1 devidamente estilizado, e não o canvas. 
 
2.3.4 Atributos HTML 
Novos atributos foram introduzidos pela HTML5, vários existentes foram 
redefinidos e muitos elementos tiveram a lista de atributos suportados ampliada. A 
HTML4.01 prevê 118 atributos, e a HTML5 expandiu essa lista. 
Existem atributos que são globais, ou seja, comuns a todos os elementos 
da HTML. Um deles é o accesskey, que se destina a definir uma tecla de atalho 
para ativar ou dar foco ao elemento quando o usuário navega com auxílio do 
teclado. O atributo class destina-se a definir uma classe para o elemento com a 
finalidade de servir de referência para estilização e scripts. Por fim, o atributo 
contenteditable foi inventado pela Microsoft e implementado em seus navegadores 
desde a versão 5, reconhecido e adotado pela HTML5. Admite os valores true, false 
e inherit, que definem se o conteúdo do elemento é editável ou não, ou se sua 
 
24 
 
condição de edição é herdada. A edição se faz no próprio agente de usuário que 
renderiza o conteúdo (SILVA, 2011). 
 
2.3.5 Geolocalização 
Geolocalização é uma funcionalidade que, apesar de ter sido lançada no 
ano de 2008, ganhou destaque e começou a ser difundida na mesma época em que 
a HTML5 ganhou seu espaço e começou a ser estudada e aplicada pela 
comunidade de desenvolvimento Web. Talvez essa coincidência tenha sido a 
responsável pela ideia de que a geolocalização tenha sido criada pelo HTML5 
(SILVA, 2011). 
Os recursos de geolocalização do HTML5 são de particular interesse de 
desenvolvedores e usuários de dispositivos móveis. A localização geográfica foi 
definida como "a arte de descobrir onde você está no mundo e (opcionalmente) 
compartilhar essas informações com as pessoas em quem você confia". Ao incluir 
ferramentas para localização geográfica no navegador, o HTML5 facilita a criação 
de aplicativos que sabem onde os usuários estão, o que está por perto e como eles 
podem chegar aonde querem ir. Os aplicativos podem incluir mapas e orientações, 
compras e entretenimento e ferramentas de redes sociais. Embora existam 
preocupações legítimas de privacidade com esses recursos, deve-se observar que 
a especificação de design atual exige que os usuários escolham explicitamente 
permitir que os aplicativos de localização geográfica saibam onde estão (SILVA, 
2011). 
2.3.6 Armazenamento de dados 
O HTML5 também tem suporte para bancos de dados SQL ao lado do 
cliente e cache offline. Isso é particularmente importante para usuários móveis, pois 
a maioria tem conectividade e largura de banda limitadas em seus dispositivos. Um 
exemplo desse conceito de “aplicativo em cache local” seria um conjunto de 
 
25 
 
calendários que permite que os usuários baixem seus dados atuais, façam ajustes 
em seus dispositivos móveis e, posteriormente, carreguem na próxima vez que 
houver uma conexão disponível. Os aplicativos podem armazenar gráficos e 
códigos no dispositivo local, garantindo tempos de carregamento rápidos e tráfego 
de rede mínimo (SILVA, 2011). 
2.3.7 APIs para comunicação 
Outro novo recurso do padrão HTML5 é a capacidade de criar aplicativos 
da Web que se comportam mais como locais. Alguns recursos, como gerenciamento 
de arquivos de arrastar e soltar e armazenamento local, permitirão que os 
desenvolvedores criem aplicativos baseados na Web, que se integram 
perfeitamente ao computador do usuário. Com HTML5, os usuários podem fazer 
upload e download de arquivos simplesmente arrastando-os para a janela do 
navegador (SILVA, 2011). 
 
2.3.8 Integração 
Um dos grandes problemas no envio de arquivos pela Web (upload) foi 
finalmente resolvido com o chamado xmlHttpRequest ao se enviar arquivos muito 
grandes, não se tinha uma ideia de progresso desse envio (VAN KESTEREN, 
2012). 
O mérito é de um novo evento incluído na API, onprogress, especificamente 
no atributo upload. O mesmo recebe um objeto que possui o atributo 
lengthComputable, que traz informações de progresso que podem ser exibidas em 
uma barra de progresso (novidade também a tag <progress>, específica para esse 
fim)(SILVA, 2011). 
A integração homem-máquina também recebeu novidades. O recurso de 
drag 'n’ drop (arrastar-e-soltar), tão utilizado em interfaces gráficas dos sistemas 
operacionais, agora pode ser utilizado em páginas e aplicações Web. Um elemento 
 
26 
 
pode ser considerado dragable (“arrastável”), podendo, até mesmo, transportar 
informações contidas nele para outros elementos (que chamaremos aqui de “alvo”). 
Muitos são os recursos trazidos pela tecnologia HTML5 e pela nova geração 
de navegadores Web. Portanto, muitas são as oportunidades de seu uso, que 
podem ir desde experiências mais ricas de navegação e interatividade em um 
website até avançadíssimos jogos eletrônicos baseados em Web. Animações e 
streaming de áudio e vídeo, antes possíveis apenas pelo plug-in proprietário Adobe 
Flash, agora são realidade de forma nativa. 
Tratando em particular dos jogos eletrônicos, WebSockets ou SSE trazem 
uma troca de informações ágil, essencial para partidas com múltiplos jogadores. 
Animações realizadas usando Canvas, webGL ou recursos do CSS3, 
acompanhados por uma envolvente trilha sonora reproduzida pelo novo suporte de 
streaming de áudio, utilizando-se dos eventos de toque em tela, acelerômetro e 
recurso de drag 'n’ drop, farão os jogos eletrônicos baseados em Web alcançarem 
patamares possíveis outrora apenas por jogos instaláveis em sistemas operacionais 
(SAGA, 2020) 
Fallbacks e condicionais, verificando a existência da API (como em muitos 
exemplos citados neste capítulo), farão com que até mesmo visitantes oriundos de 
navegadores mais antigos possam acessar sua página ou aplicação, embora não 
tenham a mesma experiência. Frameworks como o Modernizr (SILVA, 2011) 
auxiliam nos fallbacks e podem providenciar polyfills, que são a possibilidade de 
preencher a falta de suporte a alguns recursos da HTML5 por outros mais antigos 
ou plug-ins (SAGA, 2020) 
Os novos recursos podem ser muito úteis em layout responsivo – trata-se 
de criar versões do website planejadas para vários tamanhos de tela e 
processadores, ou seja, em um único código, criar páginas que se adaptem às telas 
que vão desde pequenos smartphones até televisores de muitas polegadas. 
 
 
 
 
 
27 
 
3 FOLHA DE ESTILO EM CASCATAS (CSS) 
3.1 Conceito de CSS 
Arquivos CSS permitem uma melhor organização do código fonte de 
páginas da internet, armazenando a maior parte de códigos referentes à aparência 
da página. 
CSS — do inglês, cascading style sheet, ou, na tradução, “folha de estilo 
em cascatas” — é um formato de arquivos que permite o armazenamento de estilos 
para documentos Web. Arquivos CSS foram projetados para trabalhar em conjunto 
com os HTML (Figura 5), separando o armazenamento do conteúdo de páginas 
HTML dos códigos relacionados à aparência e ao estilo, como tamanho de textos, 
espaçamentos, fontes e cores de elementos. Tal separação tem por objetivo facilitar 
a edição e manutenção de Websites com uma grande quantidade de páginas em 
que o leiaute é mantido. 
 
Figura 05 - Trabalho do CSS em conjunto com o HTML. 
 
Fonte: Jossnat/Shutterstock.com. 
 
28 
 
3.1.1 Funcionamento e vantagens do CSS 
Para que você possa compreender como CSS funciona, é necessário, 
primeiramente, entender como um navegador lê uma página HTML. Segundo How 
CSS... (2019), o carregamento de uma página ocorre em seis etapas: (i) o 
navegador (browser) carrega o documento HTML de um servidor na Internet ou de 
um arquivo local; (ii) a seguir, converte o documento HTML em um modelo de objeto 
de documento (DOM); (iii) são carregados recursos vinculados, como imagens, 
vídeos incorporados e folhas de estilo CSS; (iv) é feita a análise do arquivo CSS, 
levando-se em consideração os seletores e as regras de estilo que devem ser 
aplicadas a eles, como elementos, classes, IDs e assim por diante; (v) a árvore de 
renderização DOM é construída usando a estrutura do HTML e os estilos obtidos 
no arquivo CSS; e (vi) a página completa é, por fim, exibida na tela. A Figura 2, a 
seguir, mostra um esquema desse processo. 
 
Figura 06 - Diagrama que ilustra como um navegador lê uma página 
HTML com arquivos CSS vinculados. 
 
Fonte: How CSS... (2019, documento on-line, tradução nossa). 
Na prática, um navegador carrega os dados e a estrutura da página no 
arquivo HTML. Depois, analisa arquivos CSS vinculados, buscando formatações e 
estilos que devem ser aplicados para visualização final do site na tela do 
 
29 
 
computador. Por fim, ele junta todas as informações disponíveis em um documento 
armazenado na memória do computador (DOM) e exibe a página formatada. 
 
3.1.2 Regra de estilização 
A linguagem CSS permite a manipulação de estilos de arquivos por meio 
da chamada regra de estilização (SILVA, 2015). Nessa regra, uma formatação de 
estilos é composta por um seletor seguido por uma ou mais declarações separadas 
por ponto e vírgula. Declarações CSS, por sua vez, são compostas por uma 
determinada propriedade e um valor que pode ser aplicado a ela, conforme 
esquema da Figura 07. 
 
Figura 07 - Representação de uma declaração CSS: colore textos 
presentes em tags <p> na cor azul. A indentação do bloco é opcional, 
i.e. todo o comando pode ser escrito em uma única linha: p { color: blue }. 
 
Fonte: How CSS... (2019, documento on-line, tradução nossa). 
 
Seletores indicam elementos em que as regras CSS serão aplicadas na 
marcação HTML. Um exemplo simples de aplicação da linguagem CSS seria a 
 
30 
 
alteração de textos de uma página (armazenados na tag <p>) para a cor azul. No 
exemplo anterior, a propriedade color (cor) foi aplicada a todos os textos presentes 
em tags <p>, recebendo o valor blue (azul). 
 
3.2 Leiautes em HTML com CSS 
Há três formas de se realizar declarações CSS (MARIANO; MELO-
MINARDI, 2017), apresentadas no Quadro 1, a seguir. 
 
 
 
Fonte: Adaptado de Mariano e Melo-Minardi (2017). 
 
 
31 
 
Um navegador define o estilo aplicado de acordo com a ordem de prioridade 
em que a declaração foi aplicada (efeito cascata). Por exemplo, declarações inline 
têm prioridade sobre as incorporadas, que têm prioridade sobre as importadas. 
Declarações dos tipos inline e incorporadas são realizadas diretamente no arquivo 
HTML e, por isso, devem ser evitadas (SAGA, 2020) 
Se nenhuma declaração for aplicada a um determinado elemento, o 
navegador carrega sua folha de estilos-padrão. Por exemplo, se apenas um texto 
for inserido na tag <body>, o navegador define por padrão que a cor do texto deve 
ser preta (color: black) e fundo deve ser branco (background- -color: white). 
 
3.2.1 Importação de folhas de estilo 
Agora, você verá, na prática, como criar sua primeira folha de estilos e 
vinculá-la a um arquivo HTML. Primeiro, crie o arquivo HTML com o seguinte 
conteúdo (nomeie o arquivo como “index.html”): 
 
<!DOCTYPE html> 
<html> 
 <head> 
 <title>Minha primeira página HTML + CSS</title> 
 <!-- importando arquivos CSS --> 
 <link rel="stylesheet" href="estilo.css"> 
 </head> 
 
<body> 
 <p>Meu texto</p> 
 <p class="azul">Estilo múltiplo</p> 
 <p id="vermelho">Estilo único</p> 
 <p class="azul">Estilo múltiplo</p> 
</body> 
 
32 
 
</html> 
 
 
Observe que, na linha 7, é realizada uma referenciação a um arquivo 
denominado “estilo.css”. Este, ainda não criado, armazenará todas as declarações 
do tipo CSS. Para que o navegador compreenda que a tag <link> é interligada a um 
arquivo de folhas de estilo, é necessário adicionar o atributo rel que deve receber o 
valor stylesheet, além de um atributo href com o nome do arquivo CSS (desde que 
os arquivos HTML e CSS estejam na mesma pasta – caso contrário, é necessário 
indicar o endereço completo). 
Crie, agora, o arquivo CSS com o seguinte conteúdo: 
 
* { 
 margin: 0; 
 padding: 0; 
}body { 
 background-color: black; 
} 
 
p { 
 color: green; 
} 
 
.azul { 
color: cyan; /* azul ciano */ 
} 
 
#vermelho { 
 color: red; 
 
33 
 
} 
 
Esses códigos utilizam diversos seletores. O primeiro é o seletor universal 
(*), que é usado para aplicar estilos a elementos de qualquer tipo. Nesse 
caso, você usou o seletor universal para remover margens inseridas por padrão em 
certos tipos de navegadores. O próximo seletor foi usado na tag body, que armazena 
todo o corpo da página, ou seja, o conjunto de códigos que gera elementos visuais. 
Na tag body, foi inserida a propriedade background-color, que altera a cor do plano de 
fundo para preto. A seguir, a propriedade color com diferentes valores é aplicada a 
três seletores: tag <p>, classe “azul” e id “vermelho”. Ao executar o arquivo HTML em 
um navegador, a seguinte página da Figura 8 será carregada. 
 
Figura 8 - Observe que a cor de fundo do <body> foi alterada para preto. A 
cor verde é aplicada apenas ao primeiro parágrafo. Nos itens seguintes, são 
aplicados os atributos class (usado mais de uma vez) e id (usado apenas uma 
vez).As propriedades aplicadas por último sobrepõem-se às aplicadas primeiro 
(efeito cascata). 
 
Fonte: Mariano e Melo-Minardi (2017). 
 
 
34 
 
3.2.2 Tipografia 
As propriedades tipográficas permitem a formatação dos textos em uma 
determinada página. Em geral, elas iniciam pelos prefixos “font-” ou “text-”, como a 
propriedade font-size, que define o tamanho da fonte a ser utilizada, ou a 
propriedade text-align, que define o alinhamento do texto (alinhado à direita, à 
esquerda ou centralizado). 
No Quadro 2, a seguir, você pode ver algumas das propriedades mais 
utilizadas para formatação de textos. 
 
 
 
35 
 
 
Fonte: Mariano e Melo-Minardi (2017). 
3.2.3 Background 
O advento da popularização de Internet banda larga, aliado ao uso de folhas 
de estilo, permitiu uma evolução no uso de backgrounds, também conhecidos como 
planos de fundo (ADAMS et al., 2009). 
A propriedade background permite diversas configurações de planos de 
fundo, como definição de cor ou, até mesmo, inserção e posicionamento de 
imagens. 
No Quadro 3, a seguir, você pode ver algumas das propriedades para 
definição de backgrounds. 
 
 
 
36 
 
 
Fonte: Mariano e Melo-Minardi (2017). 
3.2.4 Dimensão de elementos 
CSS fornece uma série de propriedades para definição de margens e 
espaçamentos, como bordas (border), margens internas (padding), margens 
externas (margin), além das propriedades de altura (height) e largura (width) (Figura 
09). Tais propriedades podem ser aplicadas a diversos tipos de tags, como 
divisórias (<div>), imagens (<img>), dentre outras. 
 
37 
 
 
 
Figura 09 - Margens e bordas. 
 
Fonte: Mariano e Melo-Minardi (2017). 
A linguagem CSS permite uma grande gama de unidades de medida para 
expressar comprimento, como ponto (pt), paica (pc), centímetro (cm), 
milímetro (mm) e polegada (in). Além disso, há unidades que dependem do tamanho 
da fonte, como as de medida em e ex. Entretanto, CSS possui uma unidade de 
medida própria, o px, que se deriva do pixel, que a menor unidade de medida de 
uma imagem digital. As unidades baseadas em pixels são bastante utilizadas, por 
exemplo, na resolução de monitores, como o HD (1280 x 720 pixels), Full HD ou 
FHD (1920 x 1080 pixels), 4K ou Ultra HD (3840 x 2160 pixels) e 8K (7680 x 4320 
pixels). Quanto maior a resolução, maior a quantidade de pixels que a tela terá e, 
consequentemente, melhor qualidade de imagem (SAGA, 2020) 
Tamanhos também podem ser representados em porcentagens (%), o que 
tem uma grande utilidade para as chamadas páginas que se adequam ao design 
responsivo (aquelas que se ajustam ao tamanho da tela de quem acessa o site). 
No Quadro 4, a seguir, você verá algumas propriedades para definições de 
tamanhos e espaçamentos. 
 
 
38 
 
 
 
39 
 
 
Fonte: Mariano & de Melo-Minardi (2017). 
3.2.5 Posicionamento 
CSS permite a definição de posicionamento de um elemento pela 
propriedade position, que pode receber três possíveis valores: fixed, relative e 
absolute (Figura 10). O valor relative posiciona elementos com base em seu canto 
superior esquerdo. Sendo assim, elementos relative são inseridos abaixo de outros 
 
40 
 
elementos relative. Por padrão, novos elementos declarados recebem essa 
configuração. 
 
Figura 10 - Quadrados vermelho e azul (Div 1 e Div 2) declarados usando 
a propriedade position com valores relative e absolute. Observe que absolute força o 
quadrado azul a sobrepor o quadrado vermelho. 
 
Fonte: Mariano e Melo-Minardi (2017). 
A posição de elementos do tipo fixed e absolute pode ser definida com base 
em quatro propriedades: (i) top: distância do elemento até o topo da página; (ii) right: 
distância do elemento até a margem direita; (iii) bottom: distância do elemento até a 
parte inferior da página; e (iv) left: distância do elemento até a margem esquerda. 
 
 
41 
 
4 TRABALHANDO COM LINKS E FORMULÁRIOS 
4.1 Desenvolvimento de páginas HTML com links e âncoras 
HTML permite que páginas sejam interligadas por meio dos chamados links 
(SILVA, 2015). A tag âncora <a> é a responsável por isso, recebendo, no atributo 
href, o endereço para o qual o link deve apontar, conforme exemplo a seguir: 
 
<a href="#">Eu sou um link</a> 
 
Por padrão, a maior parte dos navegadores exibe links de texto sublinhados 
e na cor azul, exceto quando uma configuração diferente nas folhas de estilo CSS 
especifique outra configuração para a apresentação visual de um link. 
 
4.1.1 Links relativos 
Links relativos apontam para arquivos locais, ou seja, um arquivo presente 
no mesmo dispositivo do arquivo HTML em questão. Nos exemplos a seguir, você 
verá a criação de duas páginas HTML: página 1 e página 2. Ambas apresentam 
apenas um título indicando seu nome e um link para a página oposta. 
Exemplo : 
<h1>Eu sou a página 1</h1> 
<a href="pagina2.html">Link para a página 2</a> 
 
 
 
42 
 
O link da página 1 recebe como atributo o valor “pagina2.html”. Observe que 
o valor deve ser exatamente igual ao nome do arquivo, incluindo a extensão .html. 
Nesse caso, o arquivo da página 2 deve estar no mesmo diretório do arquivo da 
página 1. 
Observe, agora, a criação do arquivo “pagina2.html”. 
 
<h1>Eu sou a página 2</h1> 
<a href="pagina1.html">Link para a página 1</a> 
 
 
 
A página 2 apresenta um link que aponta para a página 1. Ao executar as 
páginas no navegador, é possível alternar de uma para outra, clicando nos links 
criados. 
 
4.1.2 Links absolutos 
Links absolutos apontam para endereços externos. O valor de href deve 
conter um protocolo de acesso, como http ou https seguido por duas barras, e o 
endereço para o qual o link deve apontar. 
 
<a href="https://www.google.com.br">Google</a> 
 
 
43 
 
4.1.3 Links para e-mails 
Links também podem apontar para endereços de e-mail. Para isso, utilize a 
palavra mailto seguida de dois-pontos e um endereço de e-mail. Nesse caso, o 
navegador chamará o programa-padrão de envio de e-mails do computador, 
informando que a mensagem deve ser enviada ao e-mail indicado. 
 
<a href="mailto:pessoa@sagah.com.br">Contato por e-mail</a> 
 
4.1.4 Links em imagens 
Links podem ser combinados com imagens. Nesse caso, o código HTML da 
imagem deve ser inserido dentro da tag âncora <a> no lugar do texto. 
 
<a href="#"> 
<img src="..."> 
</a> 
 
4.1.5 Atributo target 
O atributo target indica o contexto de navegação que determinado link 
deve carregar (nova aba, nova janela ou frame). No Quadro 5, a seguir, estão os 
valores que podem ser atribuídos ao target. 
 
 
 
 
 
 
 
44 
 
Quadro 05 - Valores que podem ser atribuídos ao target 
 
Fonte: Mariano & de Melo-Minardi (2017). 
4.2 Desenvolvimento de páginas HTML com formulários 
Nos primeiros anosda Internet, as páginas Web eram estáticas, permitindo 
ao usuário apenas a leitura de informações. Com a evolução da tecnologias e 
linguagens de desenvolvimento Web, foi possível que usuários não apenas lessem, 
mas, também, enviassem informações. Um exemplo, disso são os chamados 
formulários (Figura 11). 
Formulários permitem que usuários interajam com sistemas Web 
(MARIANO; MELO-MINARDI, 2017), estabelecendo conexão entre cliente e 
servidor, por meio do envio de informações a serem processadas por linguagens de 
programação back-end. 
 
Figura 11 - Criando formulários HTML. 
 
Fonte: photovibes/Shutterstock.com. 
 
45 
 
Formulários têm muitas utilidades, como em páginas de contato, que 
permitem que o usuário do site envie informações para o criador (Figura 12). 
 
Figura 12 - Exemplo de formulário para envio de e-mail. 
 
Fonte: Mariano e Melo-Minardi (2017). 
4.2.1 Tag <form> 
Formulários podem ser criados com a tag <form>, que recebe diversos 
atributos (<FORM>..., 2019), dentre eles: 
 
 name — nome que identifica o formulário; 
 action — endereço para onde o formulário deve ser enviado; 
 method — post ou get ( quadro abaixo ); 
 enctype — valor usado como identificador de duas partes para 
formatos transmitidos na Internet (usado para o método post). Pode 
receber os valores: application/x-www-form-urlencoded 
(valor padrão), multipart/form-data (para envio de arquivos) e 
multipart/form-data (para HTML5). 
 
 
46 
 
No exemplo a seguir, você verá como um formulário é criado. O atributo 
action recebe a página para a qual o formulário será enviado (aqui denominada como 
“processa_formulario.php”). O método utilizado foi o post, e o nome do formulário é 
“meu_formulario”. 
 
<form action="processa _ formulario.php" method="post" 
name="meu _ formulario"> 
[...] 
</form> 
 
Quadro 06 - Métodos POST e GET 
 
Fonte: Mariano e Melo-Minardi (2017). 
4.2.2 Diferentes componentes de um formulário 
 
Formulários são componentes HTML que recebem informações. A principal 
tag utilizada por um formulário é a tag <input>, que contém diversos tipos. Além 
disso, formulários também podem receber campos como <button> ou, até mesmo, 
<label> para identificar rótulos. 
 
4.2.2.1 Tag input 
A tag <input> permite a inserção de dados em formulários e pode receber 
como atributos: 
 
 
47 
 
 name — nome do formulário que será usado para processamento em 
linguagens back-end; 
 value — atributo que recebe o valor-padrão a ser exibido no 
formulário; 
 placeholder — texto que aparece dentro de caixas de texto; 
 type — identificação do tipo de campo; 
 
O Quadro 07, a seguir, mostra os tipos de input de formulários. 
 
Fonte: Mariano e Melo-Minardi (2017). 
4.2.2.2 Tipo text, email e password 
Os campos text, email e password são bastante parecidos (Figura 3). A 
principal diferença é que email verifica se o valor digitado corresponde a um e-mail 
(busca pelo símbolo de @), e o password criptografa os valores digitados (oculta 
caracteres). 
 
<form action="#" method="post" name="formulario"> 
<h1>Text</h1> 
<p> 
<input type="text" name="texto" placeholder="Digite um 
 
48 
 
nome"> 
</p> 
<h1>Email</h1> 
<p> 
<input type="email" name="email" placeholder="Digite um 
e-mail"> 
</p> 
<h1>Senha</h1> 
<p> 
<input type="password" name="senha" placeholder="Digite 
a senha"> 
</p> 
</form> 
 
O atributo placeholder exibe uma mensagem que desaparece quando se 
clica no campo. 
 
Figura 13 - Text, email e password. 
 
Fonte: Mariano e Melo-Minardi (2017). 
 
49 
 
4.2.2.3 Tipo checkbox e radio 
Os campos checkbox e radio são dois tipos de campos de marcação (Figura 
abaixo). A principal diferença entre eles é que grupos de campos checkbox podem 
ser marcados múltiplas vezes, enquanto os de radio só permitem a escolha de um. 
 
<form action="#" method="post" name="formulario"> 
<h1>Checkbox</h1> 
<p> 
<input type="checkbox" name="nome _ unico1" value="1" /> 
<label>1</label> 
</p> 
<p> 
<input type="checkbox" name="nome _ unico1" value="2" /> 
<label>2</label> 
</p> 
<h1>Radio</h1> 
<p> 
<input type="radio" name="nome _ unico2" value="1" /> 
<label>1</label> 
</p> 
<p> 
<input type="radio" name="nome _ unico2" value="2" /> 
<label>2</label> 
</p> 
</form> 
 
Para que sejam identificados como um grupo, devem receber o mesmo 
valor no campo name. 
 
 
 
50 
 
Figura 14 - checkbox e radio. 
 
Fonte: Mariano e Melo-Minardi (2017). 
 
4.2.2.4 Tipos hidden e file 
Campos do tipo hidden ocultam informações (Figura 5). Podem ser utilizados 
para armazenar códigos de identificação ou qualquer outra informação que não 
deve ser exibida para o usuário. 
O tipo file permite o envio de arquivos. 
 
<form action="#" method="post" name="formulario"> 
<h1>Arquivo</h1> 
<p> 
<input type="file" name="arquivo"> 
<input type="hidden" value="codigo _ secreto _ 123"> 
</p> 
</form> 
 
51 
 
 
Figura 15 - Envio de arquivos. 
 
Fonte: Mariano e Melo-Minardi (2017). 
4.2.2.5 Tipos button e submit 
Botões button e submit permitem a execução de ações (Figura abaixo). 
Entretanto, o botão do tipo submit é especial, pois é por meio dele que o formulário 
é enviado. 
 
<form action="#" method="post" name="formulario"> 
<h1>Botões</h1> 
<p> 
<input type="button" value="Botão comum"> 
<input type="submit" value="Enviar"> 
</p> 
</form> 
 
 
O atributo value é quem define o valor do texto que será exibido no botão. 
Ao clicar em enviar, a página é redirecionada para onde o atributo action do <form> 
indicar. 
 
 
 
 
52 
 
 
Figura 16 - Botões. 
 
Fonte: Mariano e Melo-Minardi (2017). 
 
4.2.2.6 Tag <select> 
As tags <select> (Figura 7) permitem que o usuário selecione entre uma série 
de opções determinadas pelas tags <option>. 
 
<form action="#" method="post" name="formulario"> 
<h1>Select</h1> 
<p> 
<select name="selecione"> 
<option value="1">1</option> 
<option value="2">2</option> 
</select> 
</p> 
</form> 
 
Observe que a tag <option> recebe o atributo value que define o valor a ser 
enviado, seguido por um valor que será mostrado para o usuário. 
 
 
 
53 
 
Figura 17 - Select. 
 
Fonte: Mariano e Melo-Minardi (2017). 
 
4.2.2.7 Tag <textarea> 
Tags do tipo <textarea> (Figura 18) são parecidas com <input> do tipo text, 
servindo para receber valores em texto. A principal diferença é que <textarea> 
permite que o valor da caixa seja alterado. 
 
<form action="#" method="post" name="formulario"> 
<h1>Textarea</h1> 
<p> 
<textarea cols="50" rows="10"></textarea> 
</p> 
</form> 
 
O tamanho de áreas de texto pode ser alterado por meio dos atributos cols 
(número de colunas) e rows (número de linhas). 
 
 
 
 
 
 
54 
 
Figura 18 - Textarea. 
 
Fonte: Mariano e Melo-Minardi (2017). 
5 TRABALHANDO COM LISTAS E TABELAS 
É comum criarmos conteúdo da Web procurando maneiras de organizar as 
informações para as tornar mais legíveis. Uma forma de organizar o texto é por meio 
de listas e tabelas. Existem dois tipos de listas: ordenada (numerada, com letras, 
etc.) e não ordenada (com marcadores). Tabelas podem ser utilizadas tanto para 
organizar informações como a própria estrutura da página Web. 
 
5.1 Listas HTML 
As listas HTML são usadas para especificar listas de informações, podendo 
conter um ou mais elementos dessa lista. Existem três tipos diferentes de listas em 
HTML (RAGGETT; LE HORS, JACOBS, 1999a, documento on-line): 
 
 ordenada ou numerada (ol); 
 não ordenada ou com marcadores (ul); 
 de descrição ou de definições (dl). 
 
55 
 
5.1.1 Lista ordenada em HTML 
Lista ordenada em HTML, ou lista numerada, exibe elementos em formato 
numerado e utiliza a tag HTML <ol> é. Podemos usar a lista de pedidos para 
representar itens no formato de pedido numérico ou alfabético – ou em qualquer 
formato em que um pedido seja enfatizado. Pode haverdiferentes tipos de lista 
numerada (RAGGETT; LE HORS, JACOBS, 1999a, documento on-line): 
 
 número indo-arábico (1, 2, 3); 
 número romano maiúsculo (I II III); 
 número romano minúsculo (i ii iii); 
 alfabeto maiúsculo (ABC); 
 alfabeto minúsculo (abc). 
 
Para representar diferentes listas ordenadas, existem cinco tipos de 
atributos na tag <ol>, conforme Quadro 8, a seguir. 
 
Quadro 8 - Tipos de listas ordenadas 
 
Fonte: Adaptado de Raggett, Le Hors e Jacobs (1999a, documento on-line). 
No Quadro 9, vemos um exemplo da lista ordenada em HTML que exibe 
quatro tópicos. Aqui não estamos definindo type="1" porque é o tipo-padrão. 
 
 
56 
 
 
Quadro 9 - Lista ordenada com tópicos padrão (números indo-arábicos) 
 
Fonte: Adaptado de Raggett, Le Hors e Jacobs (1999a, documento on-line). 
Agora, no Quadro 3, é exibido um exemplo da lista em número romano em 
maiúsculas, usando o tipo “I”. 
 
Quadro 10 - Lista ordenada com tópicos tipo “I” (números romanos 
maiúsculos) 
 
Fonte: Adaptado de Raggett, Le Hors e Jacobs (1999a, documento on-line). 
O atributo start é usado com a tag <ol> para especificar onde iniciar os itens 
da lista, conforme os tipos apresentados no Quadro 11, a seguir. 
 
 
 
 
 
 
 
57 
 
Quadro 11 - Tipos do atributo start 
 
Fonte: Adaptado de Raggett, Le Hors e Jacobs (1999a, documento on-line). 
Veja o exemplo do Quadro 5, a seguir. 
 
Quadro 12 - Veja o exemplo do Quadro 5, a seguir. 
 
Fonte: Adaptado de Raggett, Le Hors e Jacobs (1999a, documento on-line). 
O atributo reversed é um booleano da tag HTML <ol> e uma novidade da 
versão HTML5. Se você usar o atributo invertido com tag, numerará a lista em ordem 
decrescente (7, 6, 5, 4, ..., 1), como mostra o Quadro 13. 
 
 
 
 
58 
 
Quadro 13 - Lista com atributo reversed 
 
Fonte: Adaptado de Smith (2012, documento on-line). 
5.1.2 Lista não ordenada em HTML 
Lista não ordenada HTML, ou lista com marcadores, usa a tag HTML <ul> e 
exibe elementos no formato com marcadores. Podemos usar uma lista não 
ordenada em que não precisamos exibir itens em nenhuma ordem específica. 
Existem quatro tipos de lista com marcadores, como mostrado no Quadro 14 
(RAGGETT; LE HORS, JACOBS, 1999, documento on-line): 
 
 disco; 
 círculo; 
 quadrado; 
 nenhum. 
 
Quadro 14 - Tipos de marcadores em listas não ordenadas (listas com 
marcadores). 
 
Fonte: Raggett, Le Hors e Jacobs (1999a, documento on-line). 
 
59 
 
 
 
A seguir, no Quadro 15, há um exemplo de lista não ordenada HTML da 
opção type="square". 
 
Quadro 15 - Exemplo de lista não ordenada com marcadores do tipo 
square 
 
Fonte: Raggett, Le Hors e Jacobs (1999a, documento on-line). 
O atributo type não é suportado no HTML5. Em vez do tipo, pode-se usar a 
propriedade CSS do tipo de estilo de lista. A seguir, no Quadro 16, é apresentado o 
exemplo para mostrar a propriedade CSS da tag ul. 
 
Quadro 16 - Exemplo de propriedade CSS do tipo de marcador para itens 
dentro da tag ul 
 
Fonte: Raggett, Le Hors e Jacobs (1999a, documento on-line). 
 
60 
 
5.1.3 Lista de descrição HTML 
Lista de descrição HTML, ou lista de definições, exibe elementos no formato 
de definição, como no dicionário. As tags <dl>, <dt> e <dd> são usadas para definir 
a lista de descrição (RAGGETT; LE HORS, JACOBS, 1999a, documento on-line): 
As três tags da lista de descrição HTML são as seguintes (Quadro 17): 
 
 tag <dl> define a lista de descrição; 
 tag <dt> define o termo de dados; 
 tag <dd> define a definição de dados (descrição). 
 
Quadro 17 - Tags da lista de descrição HTML 
 
Fonte: Raggett, Le Hors e Jacobs (1999a, documento on-line). 
5.2 Tabelas em HTML 
A tag da tabela HTML é usada para exibir dados em forma de tabela 
(linha×coluna), podendo haver muitas colunas seguidas (PRESCOTT, 2015). 
Podemos criar uma tabela para exibir dados em forma de tabela, usando o 
elemento <table>, com a ajuda dos <tr>, <td> e <th>. 
 
61 
 
Em cada tabela, a linha é definida pela tag <tr>, o cabeçalho por <th>, e os 
dados pelas tags <td>. Observe a descrição de cada um desses elementos no 
Quadro 18, a seguir. 
 
Quadro 18 - Descrição dos elementos de tabela HTML 
 
 
Fonte: Adaptado de Raggett, Le Hors e Jacobs (1999b, documento on-line). 
A seguir, veja um exemplo das tags da tabela HTML. 
 
Código: 
 
<table> 
<tr> 
<th>Nome</th> 
<th>Sobrenome</th> 
<th>Peso</th> 
</tr> 
<tr> 
<td>Sonoo</td> 
<td>Jaiswal</td> 
 
62 
 
<td>60</td> 
</tr> 
<tr> 
<td>James</td> 
<td>William</td> 
<td>80</td> 
</tr> 
<tr> 
<td>Swati</td> 
<td>Sironi</td> 
<td>82</td> 
</tr> 
<tr> 
<td>Chetna</td> 
<td>Singh</td> 
<td>72</td> 
</tr> 
</table> 
 
Saída: 
 
 
 
Na tabela HTML do exemplo anterior, existem cinco linhas e três colunas 
= 5 × 3 = 15 valores. 
Há duas maneiras de especificar borda para tabelas HTML: por atributo 
 
63 
 
de borda da tabela em HTML ou por propriedade border em CSS. Não é mais 
recomendada a utilização da maneira por atributo em HTML, e sim por propriedades 
CSS (PRESCOTT, 2015). 
 
Código: 
 
<style> 
table, th, td { 
border: 1px solid black; 
} 
</style> 
 
Você pode recolher todas as bordas em uma por meio da propriedade 
border-collapse. 
 
Código: 
 
<style> 
table, th, td { 
border: 2px solid black; 
border-collapse: collapse; 
} 
</style> 
 
Saída: 
 
 
 
 
64 
 
Você pode especificar o preenchimento para o cabeçalho e os dados da 
tabela de duas maneiras: pelo atributo cellpadding da tabela em HTML ou 
preenchendo a propriedade CSS. O atributo cellpadding da tag da tabela HTML está 
obsoleto desde a versão do HTML5. Nesse caso, é recomendável usar CSS. Então, 
veremos o código do CSS (PRESCOTT, 2015): 
 
Código: 
 
<style> 
table, th, td { 
border: 1px solid pink; 
border-collapse: collapse; 
} 
th, td { 
padding: 10px; 
} 
</style> 
 
Saída: 
 
 
 
Podemos especificar a largura da tabela HTML usando a propriedade CSS 
width, em pixels ou porcentagem. 
 
 
65 
 
Código: 
 
table{ 
width: 100%; 
} 
 
Se você deseja fazer uma célula abranger mais de uma coluna, é possível 
usar o atributo colspan. Ele dividirá uma célula/linha em várias colunas, e o número 
de colunas depende do valor do atributo colspan. Vamos ver o exemplo que abrange 
duas colunas. 
 
Código CSS: 
 
<style> 
table, th, td { 
border: 1px solid black; 
border-collapse: collapse; 
} 
th, td { 
padding: 5px; 
} 
</style> 
 
Código HTML: 
 
<table style=”width:100%”> 
<tr> 
<th>Nome</th> 
<th colspan=”2”>Telefone</th> 
</tr> 
<tr> 
 
66 
 
<td>João Silveira</td> 
<td>7503520801</td> 
<td>9555879135</td> 
</tr> 
</table> 
 
Saída: 
 
 
 
Se você deseja fazer uma célula abranger mais de uma linha, você pode 
usar o atributo rowspan. Ele dividirá uma célula em várias linhas. O número de linhas 
divididas dependerá dos valores das linhas. Vamos a um exemplo que abrange 
duas linhas. 
 
 
Código CSS: 
 
<style> 
table, th, td { 
border: 1px solid black; 
border-collapse: collapse; 
} 
th, td { 
padding: 10px; 
} 
</style> 
 
 
 
 
67 
 
Código HTML: 
 
<table> 
<tr> 
<th>Nome</th> 
<td>João Silveira</td> 
</tr> 
<tr> 
<th rowspan=”2”>Telefone</th> 
<td>7503520801</td> 
</tr> 
<tr> 
<td>9555879135</td> 
</tr> 
</table> 
 
Saída: 
 
 
 
5.3 Páginas Web com listas e tabelas 
Criar leiautes é a coisa mais importante no desenvolvimento de um site, pois 
garante que o site tenha uma aparência bem-organizada e o conteúdo pareça de 
fácil entendimento. Existem várias técnicas e estruturas disponíveis para criar 
leiautes. O leiaute baseado em tabela HTML é uma das maneiras mais fáceis de 
criar um leiaute, pois a tabela usa apenas linhas e formato baseado em coluna 
(FLATSCHART, 2011). 
 
68 
 
Uma tabela contém um conjunto de colunas e linhas de dados reais, e cada 
linha consisteem uma ou mais células. Dentro das células da tabela, você pode 
adicionar outras tags HTML, além do texto normal, como imagem, links, lista, tabelas, 
etc. Também é possível criar tabelas aninhadas, as quais podem levar a leiautes de 
tabelas complexas (FLATSCHART, 2011). 
Diferentes tipos de leiaute de páginas Web podem ser criados com tabelas. 
O exemplo a seguir usa uma tabela com 3 linhas e 2 colunas — a primeira e a 
últimas linhas abrangem duas colunas com o uso do atributo colspan (Figura 
abaixo). 
 
 
<html> 
<body> 
<table width="500" border="0"> 
<tr> 
<td colspan="2" style="background-color:#ccc;"> 
<h1>Título Principal da Página</h1> 
</td> 
</tr> 
<tr valign="top"> 
<td style="background-color:#ddd;width:100px;text-align:top;"> 
<b>Menu</b><br /> 
HTML<br /> 
CSS<br /> 
JavaScript 
</td> 
<td style="background-color:#eee;height:200px;width:400px;t 
ext-align:top;"> 
O conteúdo vai aqui.</td> 
</tr> 
<tr> 
 
69 
 
<td colspan="2" style="background-color:#ccc;text-align:center;"> 
Direitos reservados</td> 
</tr> 
</table> 
</body> 
</html> 
 
Figura 19 - Leiaute básico de duas colunas, um cabeçalho e um rodapé. 
 
Fonte: Codex (2017, documento on-line). 
Outros leiautes de páginas Web podem ser criados com tabelas, como 
leiaute de duas colunas com um cabeçalho, leiaute de duas colunas com cabeçalho, 
barra de navegação e rodapé ou um leiaute de três colunas. Poderá ser escolhida 
a forma que melhor se adequar ao seu projeto de página. 
 
 
 
 
70 
 
6 MANIPULANDO BROWSER OBJECT MODEL, COOKIES E 
TEMPORIZADORES EM JAVASCRIPT 
O browser object model não trata de um elemento padronizado, mas de livre 
implementação de cada um. Mesmo assim, há um grande denominador comum 
entre o modelo de cada navegador, e muitas funções estão presentes nos principais 
interpretadores disponíveis no mercado. Os objetos podem incluir desde 
temporizadores até lista de quadros da página, ou, ainda, o histórico do navegador. 
Por ser do topo da hierarquia de objetos em um navegador, o browser object model 
tem acesso a características próprias do navegador e da máquina que o utiliza, ao 
contrário do objeto document, vinculado diretamente à página em si. 
 
6.1 Browser object model 
O núcleo de uma implementação em JavaScript para navegadores observa 
o padrão ECMAScript, mas existem outras partes não incluídas nele e que são 
frequentes nesse tipo de sistema, como o browser object model (BOM) – ou modelo 
de objeto do navegador. Na verdade, o ECMAScript não restringe a implementação 
da linguagem que pode adicionar particularidades para além do núcleo padronizado 
(ECMA INTERNATIONAL, 2015). 
Os navegadores modernos mais se parecem com um sistema operacional 
básico do que com os primeiros navegadores unicamente destinados à exibição de 
um documento (FLANAGAN, 2013). 
Uma vez que o objeto é o tipo fundamental da linguagem JavaScript, é 
natural que os navegadores – que correspondem a uma parcela considerável dos 
ambientes hospedeiros – disponibilizem objetos, sejam controlados e se 
comuniquem por meio deles. 
O BOM é um objeto que abrange os elementos não pertencentes à página 
em si, como: janela, histórico, barra de endereço, barra de status e tantos outros. 
Assim como qualquer outro objeto, o BOM é um conjunto de chaves e valores que 
 
71 
 
representa as propriedades e os métodos do navegador. Já que o BOM não é 
padronizado pela linguagem, cada implementação pode desenvolver o seu próprio 
modelo de objeto. Devido a isso, deve-se ter bastante cuidado ao utilizar esse 
objeto, uma vez que o comportamento pode diferir de navegador para navegador. 
Na maioria dos navegadores, o BOM é acessível por meio de objeto denominado 
window, pelo qual grande parte das funcionalidades e propriedades é 
compartilhada, apesar de inexistir padronização (SAGA, 2020) 
O window pode ser referenciado pela palavra reservada this que, em outras 
implementações, costuma referir-se ao objeto global, como era o caso do 
interpretador Node.js. Dessa forma, todos elementos globais, sejam objetos, 
variáveis ou funções, são filhos do objeto global window e podem ser acessados 
diretamente pelo seu nome quando o contexto for o mesmo do global ou por meio 
da notação ponto em conjunto com o objeto window, como no seguinte exemplo 
(FLANAGAN, 2013). 
 
Exemplo : 
 
window.obj = { prop1: 1 } 
console.log(obj.prop1) // escreve 1 
console.log(window.obj.prop1) // escreve 1 
 
 
O objeto window assume todas as demais janelas abertas a partir dele como 
de mensagem – janelas de pop-up. Essas janelas adicionais estão associadas a 
window. Na verdade, são objetos membros dele e, como tal, fazem parte do BOM. 
O objeto modelo do navegador é o ponto de partida de um sistema Web 
para a linguagem JavaScript. Qualquer declaração de variável, objeto ou função 
será um elemento novo e inferior nessa hierarquia. 
Mesmo sem um padrão determinado, o BOM pode organizar os objetos 
filhos em seis categorias principais de objetos dependes, sem mencionar as 
propriedades e funções próprias desse. 
 
72 
 
6.2 Objetos do BOM 
Diretamente ligados ao objeto window, existem propriedades e métodos de 
manipulação da janela em si. 
O tamanho e a posição da janela e seu documento podem ser controlados 
por meio de funções de: 
 
 redimensionamento absoluto (resizeTo) ou relativo (resizeBy), para 
modificar largura e altura da janela, movendo o ponto da extremidade 
inferior direita; 
 mudanças de posição absoluta (moveTo) ou relativa (moveBy), a 
partir do ponto referente à extremidade superior esquerda da janela; 
 rolagem de página absoluta (scrollTo) ou relativa (scrollBy), para 
alterar a posição em que uma página maior que a tela é exibida. 
 
 
Também é possível abrir ou fechar novas janelas utilizando: 
 
 gerador de mensagens de alerta simples (alert), informando uma 
string a ser exibida em conjunto com um botão de finalização; 
 mensagens de confirmação (confirm), contendo botão de 
confirmação, que retornará true, e de cancelamento, que retornará 
false; 
 nova janela de diálogo para receber valores do usuário (prompt); 
 abertura de novas janelas ou abas (open) a depender de como o 
interpretador implementou a função, normalmente informando 
características como página, dimensões, entre outros; 
 fechamento da janela atual (close). 
 
 
73 
 
Outras funções comuns incluem, ainda, controle de foco, utilizando focus 
para direcioná-lo à janela, e blur, para tirá-lo da janela atual, além de interrupção de 
carregamento de página (stop). 
Obviamente, esses métodos e funções controlam uma série de 
propriedades, dentre as quais as mais frequentes estão no Quadro 19, a seguir. 
 
Quadro 19 - Propriedades do objeto window 
 
 
 
 
74 
 
 
Fonte: Adaptado de The Window... (2019). 
O objeto window é apenas o topo de uma hierarquia de outros objetos 
comuns nos navegadores. Deve-se frisar sempre que não há um padrão para essa 
implementação, mas existem muitos objetos em comum no BOM entre os 
navegadores. Os principais e mais comuns, podem ser vistos isoladamente na 
Figura 20, a seguir. 
 
Figura 20 - Principais objetos do BOM. 
 
Fonte: Lenz (2020) 
Cada um desses objetos apresentados expõe uma parte do navegador ou 
da página atual e apresenta suas próprias funções e propriedades. 
 
75 
 
6.2.1 Objeto document 
O objeto de maior importância no desenvolvimento Web, contém a página 
HTML carregada pela janela do navegador, sendo ela o foco principal não apenas 
do programador, mas do usuário. 
Assim como o BOM, o objeto document também é costumeiramente 
referenciado pelo seu acrônimo DOM (do inglês document object model). É por meio 
do DOM que se pode acessar e modificar o conteúdo da página que está sendo 
exibida pelo navegador (FLANAGAN, 2013). 
Como qualquer outro objeto, o DOM apresenta métodos e propriedades 
próprios. A sua estrutura