Tecnologias de Desenvolvimento FrontEnd para Web

Prévia do material em texto

para Web
Prof.ª Ana Paula Costacurta
Prof.ª Carla Dalzoto
Tecnologias de 
desenvolvimenTo 
FronTend
Indaial – 2023
1a Edição
Impresso por:
Elaboração:
Prof.ª Ana Paula Costacurta
 Prof.ª Carla Dalzoto
Copyright © UNIASSELVI 2023
 Revisão, Diagramação e Produção:
Equipe Desenvolvimento de Conteúdos EdTech
Centro Universitário Leonardo da Vinci – UNIASSELVI
Ficha catalográfica elaborada pela equipe Conteúdos EdTech UNIASSELVI
C397 CENTRO UNIVERSITÁRIO LEONARDO DA VINCI.
Núcleo de Educação a Distância. COSTACURTA, Ana Paula. 
Tecnologias de Desenvolvimento FrontEnd para Web. Ana Paula Costacurta. 
Carla Dalzoto. Indaial - SC: Arqué, 2023.
274p.
ISBN XXX-XX-XXX-XXXX-X
“Graduação - EaD”.
1. Desenvolvimento Front-End 2. Desenvolvimento Web 3. HTML 
CDD 005.12
Bibliotecário: João Vivaldo de Souza CRB- 9-1679
Acadêmico, bem-vindo ao estudo das tecnologias de desenvolvimento Front-
End para Web. Este material abrange conceitos básicos e intermediários para enriquecer 
seus conhecimentos sobre desenvolvimento web e evoluir na carreira de desenvolvedor 
web. Nosso objetivo é ensiná-lo a utilizar tecnologias como HTML, CSS, JavaScript, 
Bootstrap e React.JS, além de testar exemplos de uso delas. 
Na Unidade 1, abordaremos os elementos HTML, estilizado com CSS, estilização 
com framework bootstrap 5, criação de formulários web, formatação de layout dos 
campos com bootstrap e a publicar a página no GitHub Pages. 
Na Unidade 2, estudaremos sobre criando laços, interações, controle de fluxo, 
tratamento de erros, criaremos objetos com propriedades e métodos, aprenderemos a 
usar Array, Map e Set funções em JavaScript ES6+, conheceremos a biblioteca React.
JS e aprenderemos a aplicar funções em um formulário web, a criar renderizações dos 
elementos, componentes funcionais e componentes de classe no React.JS, além de ver 
os componentes integrados do DOM para manipulação dos componentes do documento 
através do JavaScript.
Aprenderemos também como testar os componentes utilizando ferramentas 
e roteiros prontos, criar ambiente, usar a biblioteca JEST MONGODB e a extensão do 
navegador para realização de testes.
Por fim, na Unidade 3, falaremos sobre o Micro Frontend, configurando uma 
aplicação de página única, criar rotas e armazenamento local. Também aprenderemos 
a criar um portal para disponibilizar os trabalhos de desenvolvimento realizado, criando 
assim um portfólio para divulgação do seu desenvolvimento como profissional.
Esperamos que este material o ajude a evoluir na sua carreira de desenvolvedor 
web e a divulgar o conhecimento adquirido por meio de um portfólio e currículo de 
desenvolvedor. 
Bons estudos!
Prof.ª Ana Paula Costacurta
Prof.ª Carla Dalzoto
APRESENTAÇÃO
GIO
Olá, eu sou a Gio!
No livro didático, você encontrará blocos com informações 
adicionais – muitas vezes essenciais para o seu entendimento 
acadêmico como um todo. Eu ajudarei você a entender 
melhor o que são essas informações adicionais e por que você 
poderá se beneficiar ao fazer a leitura dessas informações 
durante o estudo do livro. Ela trará informações adicionais 
e outras fontes de conhecimento que complementam o 
assunto estudado em questão.
Na Educação a Distância, o livro impresso, entregue a todos 
os acadêmicos desde 2005, é o material-base da disciplina. 
A partir de 2021, além de nossos livros estarem com um 
novo visual – com um formato mais prático, que cabe na 
bolsa e facilita a leitura –, prepare-se para uma jornada 
também digital, em que você pode acompanhar os recursos 
adicionais disponibilizados através dos QR Codes ao longo 
deste livro. O conteúdo continua na íntegra, mas a estrutura 
interna foi aperfeiçoada com uma nova diagramação no 
texto, aproveitando ao máximo o espaço da página – o que 
também contribui para diminuir a extração de árvores para 
produção de folhas de papel, por exemplo.
Preocupados com o impacto de ações sobre o meio ambiente, 
apresentamos também este livro no formato digital. Portanto, 
acadêmico, agora você tem a possibilidade de estudar com 
versatilidade nas telas do celular, tablet ou computador.
Preparamos também um novo layout. Diante disso, você 
verá frequentemente o novo visual adquirido. Todos esses 
ajustes foram pensados a partir de relatos que recebemos 
nas pesquisas institucionais sobre os materiais impressos, 
para que você, nossa maior prioridade, possa continuar os 
seus estudos com um material atualizado e de qualidade.
Acadêmico, você sabe o que é o ENADE? O Enade é um 
dos meios avaliativos dos cursos superiores no sistema federal de 
educação superior. Todos os estudantes estão habilitados a participar 
do ENADE (ingressantes e concluintes das áreas e cursos a serem 
avaliados). Diante disso, preparamos um conteúdo simples e objetivo 
para complementar a sua compreensão acerca do ENADE. Confira, 
acessando o QR Code a seguir. Boa leitura!
Olá, acadêmico! Para melhorar a qualidade dos materiais ofertados a você – 
e dinamizar, ainda mais, os seus estudos –, nós disponibilizamos uma diversidade de QR 
Codes completamente gratuitos e que nunca expiram. O QR Code é um código que permite 
que você acesse um conteúdo interativo relacionado ao tema que você está estudando. Para 
utilizar essa ferramenta, acesse as lojas de aplicativos e baixe um leitor de QR Code. Depois, 
é só aproveitar essa facilidade para aprimorar os seus estudos.
ENADE
LEMBRETE
Olá, acadêmico! Iniciamos agora mais uma 
disciplina e com ela um novo conhecimento. 
Com o objetivo de enriquecer seu conheci-
mento, construímos, além do livro que está em 
suas mãos, uma rica trilha de aprendizagem, 
por meio dela você terá contato com o vídeo 
da disciplina, o objeto de aprendizagem, materiais complementa-
res, entre outros, todos pensados e construídos na intenção de 
auxiliar seu crescimento.
Acesse o QR Code, que levará ao AVA, e veja as novidades que 
preparamos para seu estudo.
Conte conosco, estaremos juntos nesta caminhada!
QR CODE
SUMÁRIO
UNIDADE 1 — INTRODUÇÃO AO DESENVOLVIMENTO FRONT-END PARA WEB ..........1
TÓPICO 1 — INTRODUÇÃO À INTERNET: CONCEITOS FUNDAMENTAIS E 
COMPONENTES BÁSICOS ......................................................................... 3
1 INTRODUÇÃO .............................................................................................................. 3
2 FUNDAMENTOS DA INTERNET ...................................................................................4
2.1 COMO A WEB SURGIU E EVOLUIU ............................................................................................4
2.2 DESVENDANDO O ENDEREÇO WEB ........................................................................................6
2.3 HOSPEDAGEM DE SITES ............................................................................................................8
3 FUNDAMENTOS DO HTML: ESTRUTURAÇÃO DE PÁGINAS WEB ........................... 10
3.1 EVOLUÇÃO DO HTML ..................................................................................................................11
3.2 FUNCIONAMENTO DE NAVEGADORES E MOTORES DE BUSCA .................................... 13
3.3 COMO ESTRUTURAR UM SITE ................................................................................................ 16
4 INTRODUÇÃO A ESTRUTURA DO HTML .................................................................. 19
4.1 CRIANDO O PRIMEIRO ARQUIVO HTML ................................................................................. 19
4.2 ESTRUTURA BÁSICA DO DOCUMENTOS HTML ..................................................................22
4.3 SINTAXE DO ELEMENTO HTML .............................................................................................. 26
RESUMO DO TÓPICO 1 ................................................................................................. 31
AUTOATIVIDADE ..........................................................................................................32
TÓPICO 2 — HTML, FORMULÁRIOS E CSS:FUNDAMENTOS E ESTILIZAÇÃO ..........35 
1 INTRODUÇÃO ............................................................................................................35
2 INTRODUÇÃO AOS ELEMENTOS HTML ....................................................................35
2.1 ELEMENTO CABEÇALHO ......................................................................................................... 36
2.2 ELEMENTOS ESTRUTURAIS E ORGANIZADORES ............................................................. 40
2.3 MODELO DE OBJETOS DE DOCUMENTOS ..........................................................................47
3 INTRODUÇÃO AOS FORMULÁRIOS WEB .................................................................50
3.1 ESTRUTURA DOS FORMULÁRIOS .......................................................................................... 50
3.2 CRIANDO UM FORMULÁRIO DE LOGIN .................................................................................57
3.3 VALIDAÇÃO DOS DADOS DO FORMULÁRIO ....................................................................... 60
4 INTRODUÇÃO À ESTILIZAÇÃO .................................................................................66
4.1 SINTAXE DAS REGRAS DE ESTILO CSS ............................................................................... 66
4.2 SELETORES DE ELEMENTOS HTML EM CSS ..................................................................... 68
4.3 VALORES DE PROPRIEDADES DO CSS .................................................................................71
RESUMO DO TÓPICO 2 .................................................................................................87
AUTOATIVIDADE ..........................................................................................................88
TÓPICO 3 — ESTILIZAÇÃO COM FRAMEWORK BOOTSTRAP ..................................... 91
1 INTRODUÇÃO ............................................................................................................. 91
2 FRAMEWORK BOOTSTRAP 5: CONCEITOS E FUNDAMENTOS ............................... 91
2.1 INTRODUÇÃO AO FRAMEWORK BOOTSTRAP 5 ...................................................................92
2.2 CLASSES DO FRAMEWORK BOOTSTRAP 5 ........................................................................ 94
2.3 CASO DE USO BOOTSTRAP 5: CRIAR TELA DE CADASTRO DE USUÁRIO ...................97
3 BOOTSTRAP 5: CRIANDO FORMULÁRIOS .............................................................100
3.1 CLASSES DE ENTRADA DE DADOS DO BOOTSTRAP 5 ................................................. 100
3.2 CASO DE USO BOOTSTRAP 5: CRIAÇÃO TELA DE LOGIN ..............................................104
3.3 CRIANDO BOTÕES NO BOOTSTRAP 5..................................................................................113
4 VALIDANDO DE FORMULÁRIOS COM BOOTSTRAP .............................................. 116
4.1 MECANISMO DE VALIDAÇÃO DO BOOTSTRAP 5 ................................................................117
4.2 CASO DE USO: VALIDAÇÃO TELA DE LOGIN ......................................................................119
4.3 PUBLICAÇÃO DO PROJETO DE LOGIN NO GITHUB ........................................................122
LEITURA COMPLEMENTAR ....................................................................................... 125
RESUMO DO TÓPICO 3 ...............................................................................................128
AUTOATIVIDADE ........................................................................................................ 129
REFERÊNCIAS ............................................................................................................133
UNIDADE 2 — JAVASCRIPT MODERNO ..................................................................... 135
TÓPICO 1 — PROGRAMANDO EM JAVASCRIPT ........................................................ 137
1 INTRODUÇÃO .......................................................................................................... 137
2 FUNÇÕES ................................................................................................................ 137
2.1 ESCOPO E SHADOWING .........................................................................................................139
2.2 RETORNO DE FUNÇÕES ........................................................................................................140
2.3 FUNÇÃO ANÔNIMA E FUNÇÃO FLECHA.............................................................................142
3 MODELO DE OBJETOS DE DOCUMENTOS .............................................................143
3.1 HIERARQUIA DE NÓS ...............................................................................................................144
3.2 SELECIONANDO E MANIPULANDO ELEMENTOS DO OBJETO DOM ...........................145
3.3 GERENCIANDO ATRIBUTOS ..................................................................................................146
4 VISÃO GERAL DE FORMULÁRIOS WEB .................................................................. 147
4.1 ESTRUTURA ............................................................................................................................... 147
4.2 CAMPOS DE ENTRADA ...........................................................................................................148
4.3 ATRIBUTOS GLOBAIS E CONTROLE DE TEXTO .................................................................151
RESUMO DO TÓPICO 1 ............................................................................................... 153
AUTOATIVIDADE ........................................................................................................154
TÓPICO 2 — CRIANDO UM FORMULÁRIO WEB ......................................................... 157
1 INTRODUÇÃO .......................................................................................................... 157
2 INTRODUÇÃO BOOTSTRAP 5 ................................................................................. 157
2.1 CONTAINER ................................................................................................................................ 157
2.2 BREAKPOINTS .........................................................................................................................159
2.3 CLASSES ....................................................................................................................................160
3 ESTILIZADO FORMULÁRIOS COM BOOTSTRAP 5 .................................................161
3.1 GRUPO DE INPUTS ...................................................................................................................162
3.2 UNIÃO DE OBJETOS INDEPENDENTES ..............................................................................163
3.3 VALIDAÇÃO DO FORMULÁRIO WEB ...................................................................................165
4 ENVIANDO DADOS DO FORMULÁRIO WEB ............................................................ 166
4.1 FUNÇÃO PARA VALIDAÇÃO DOS CAMPOS ....................................................................... 167
4.2 MÉTODO DE ENVIO DOS DADOS .......................................................................................... 167
4.3 PUBLICAÇÃO DOS FORMULÁRIOS NO GITHUB ............................................................... 170
RESUMO DO TÓPICO 2 ............................................................................................... 173
AUTOATIVIDADE ........................................................................................................ 174
TÓPICO 3 — OBJETOS EM JAVASCRIPT ................................................................... 177
1 INTRODUÇÃO .......................................................................................................... 177
2 COLEÇÕES DE DADOS EM JAVASCRIPT ............................................................... 177
2.1 ARRAY ..........................................................................................................................................1772.2 MAP ........................................................................................................................................... 180
2.3 SET ..............................................................................................................................................182
3 TRABALHANDO COM OBJETOS .............................................................................184
3.1 CRIAÇÃO DE OBJETOS ..........................................................................................................184
3.2 PROPRIEDADES .......................................................................................................................186
3.3 DEFINIÇÃO DE MÉTODOS ...................................................................................................... 187
4 VSCODE PARA JAVASCRIPT ..................................................................................189
4.1 INSTALAÇÃO DO VSCODE .....................................................................................................189
4.2 CONFIGURANDO VSCODE ....................................................................................................189
4.3 MONTANDO UM AMBIENTE DE ESTUDO ...........................................................................190
LEITURA COMPLEMENTAR ....................................................................................... 192
RESUMO DO TÓPICO 3 ...............................................................................................194
AUTOATIVIDADE ........................................................................................................ 195
REFERÊNCIAS ............................................................................................................198
UNIDADE 3 — INTRODUÇÃO AO REACT JAVASCRIPT ............................................. 199
TÓPICO 1 — COMEÇANDO COM REACT JAVASCRIPT ..............................................201
1 INTRODUÇÃO ...........................................................................................................201
2 VISÃO GERAL ..........................................................................................................201
3 COMPONENTES E PROPS ...................................................................................... 202
4 ESTRUTURA ........................................................................................................... 204
5 INTRODUÇÃO JSX (JAVASCRIPT SYNTAX EXTENSION) .....................................207
5.1 O QUE É JSX? ........................................................................................................................... 207
5.2 POR QUE JSX? ........................................................................................................................ 207
5.3 SINTAXE JSX BÁSICA ............................................................................................................ 207
5.4 UMA PALAVRA DE CAUTELA ...............................................................................................208
5.5 APROFUNDANDO-SE NA JSX .............................................................................................209
5.5.1 JSX também é uma expressão ..................................................................................209
5.5.2 Especificando atributos com JSX .............................................................................209
5.5.3 JSX representa objetos ................................................................................................210
5.5.4 Manipulando filhos com JSX ........................................................................................211
6 INCORPORANDO JAVASCRIPT EM ATRIBUTOS JSX ........................................... 211
6.1 COMPREENDENDO OS ATRIBUTOS JSX .............................................................................212
6.1.1 Atribuindo expressões JavaScript a atributos JSX ................................................212
6.1.2 Um nome de classe dinâmica .....................................................................................212
6.2 INCORPORANDO FUNÇÕES EM ATRIBUTOS JSX ............................................................213
6.3 DOMINANDO FILHOS EM JSX ...............................................................................................214
6.3.1 Entendendo filhos em JSX ...........................................................................................214
6.3.2 Incorporando expressões como filhos JSX .............................................................214
6.3.3 JavaScript complexo como filhos JSX ....................................................................215
6.3.4 Renderização condicional de filhos JSX ..................................................................215
RESUMO DO TÓPICO 1 ............................................................................................... 217
AUTOATIVIDADE ........................................................................................................218
TÓPICO 2 — DADOS E STATUS .................................................................................. 219
1 INTRODUÇÃO ........................................................................................................... 219
2 EVENTOS ............................................................................................................... 220
3 MANIPULADORES ................................................................................................... 221
4 DADOS .................................................................................................................... 223
5 HOOKS .................................................................................................................... 225
6 ESTADOS ................................................................................................................227
RESUMO DO TÓPICO 2 ............................................................................................... 231
AUTOATIVIDADE ....................................................................................................... 232
TÓPICO 3 — NAVEGAÇÃO E ATIVOS REACT ............................................................ 233
1 INTRODUÇÃO .......................................................................................................... 233
2 NAVEGAÇÃO ........................................................................................................... 233
3 CRIANDO ROTAS .................................................................................................... 236
4 REQUISIÇÕES HTTP .............................................................................................. 242
5 USANDO ATIVOS .................................................................................................... 249
6 PRIMEIRO PROJETO UTILIZANDO REACT ............................................................ 254
LEITURA COMPLEMENTAR ...................................................................................... 264
RESUMO DO TÓPICO 3 ...............................................................................................270
AUTOATIVIDADE ........................................................................................................ 271
REFERÊNCIAS ............................................................................................................273
1
UNIDADE 1 — 
INTRODUÇÃO AO 
DESENVOLVIMENTO 
FRONT-END PARA WEB
OBJETIVOS DE APRENDIZAGEM
PLANO DE ESTUDOS
 A partir do estudo desta unidade, você deverá ser capaz de:
• compreender os conceitos fundamentais da internet, incluindo os principais 
componentes que a compõem;
• entender a evolução da web desde seu surgimento até os dias atuais;
• descrever o funcionamento de navegadores e motores de busca na internet;
•	 identificar	as	principais	ferramentas	e	técnicas	para	estruturar	um	site	utilizando	
HTML;
• praticar a criaçãode um arquivo HTML básico e publicá-lo em um servidor web;
• compreender a estrutura básica do documento HTML tradicional e seus principais 
elementos.
 A cada tópico desta unidade você encontrará autoatividades com o objetivo de 
reforçar o conteúdo apresentado.
TÓPICO 1 – INTRODUÇÃO À INTERNET: CONCEITOS FUNDAMENTAIS E COMPONENTES 
BÁSICOS
TÓPICO 2 – CRIANDO UM FORMULÁRIO WEB COM HTML 5 
TÓPICO 3 – INTRODUÇÃO AO JAVASCRIPT ES6+
Preparado para ampliar seus conhecimentos? Respire e vamos em frente! Procure 
um ambiente que facilite a concentração, assim absorverá melhor as informações.
CHAMADA
2
CONFIRA 
A TRILHA DA 
UNIDADE 1!
Acesse o 
QR Code abaixo:
3
INTRODUÇÃO À INTERNET: 
CONCEITOS FUNDAMENTAIS E 
COMPONENTES BÁSICOS
TÓPICO 1 — UNIDADE 1
1 INTRODUÇÃO 
A	sigla	HTML	significa	"Hypertext	Markup	Language",	em	português,	"Linguagem	
de	Marcação	de	Hipertexto".	É	a	linguagem	padrão	para	criação	de	páginas	web,	é	o	alicer-
ce	das	páginas	web,	permitindo	definir	a	estrutura	e	o	significado	do	conteúdo,	permitindo	
a	estruturação	do	conteúdo	e	a	definição	da	sua	apresentação	na	internet.	Ao	combiná-lo	
com	CSS	e	JavaScript,	é	possível	criar	páginas	mais	sofisticadas	e	dinâmicas.	
O	CSS	é	a	sigla	para	"Cascading	Style	Sheets",	que	em	português	significa	"Fo-
lhas	de	Estilo	em	Cascata".	Trata-se	de	uma	 linguagem	de	estilo	usada	para	definir	a	
apresentação	e	o	layout	de	uma	página	web,	incluindo	elementos	como	cores,	fontes,	
tamanhos,	posicionamento	e	outros	aspectos	visuais.	Com	o	CSS,	é	possível	separar	a	
estrutura	de	uma	página	 (definida	em	HTML)	da	sua	apresentação	visual,	permitindo	
assim	a	criação	de	páginas	mais	sofisticadas	e	de	fácil	manutenção.
JavaScript	é	uma	linguagem	de	programação	de	alto	nível	que	é	utilizada	para	
adicionar interatividade e dinamismo a páginas web. Ela permite que os desenvolvedo-
res criem animações, efeitos visuais, validação de formulários, interação com usuários e 
muitas outras funcionalidades que tornam as páginas web mais atraentes e interativas. 
Além	disso,	o	JavaScript	também	é	utilizado	em	diversos	outros	ambientes,	como	no	
desenvolvimento	de	aplicações	para	desktop,	dispositivos	móveis,	jogos,	entre	outros.
Neste	primeiro	 tema	de	aprendizagem	abordaremos	conceitos	 fundamentais	
sobre	a	internet,	como	a	história	da	web,	a	descoberta	de	páginas	e	a	criação	de	en-
dereços.	Além	disso,	serão	explicados	os	navegadores	e	a	hospedagem	de	conteúdo	
nos	servidores	web,	incluindo	uma	orientação	sobre	como	organizar	pastas	para	criar	
um	site	simples.	Também	será	abordado	o	funcionamento	do	servidor	de	localização	de	
domínio e dos motores de busca.
No tópico sobre HTML, serão apresentados os elementos básicos da linguagem, 
incluindo	a	sintaxe	e	as	diferenças	entre	as	versões	antigas	e	a	versão	HTML5.	Serão	
destacados	os	elementos	válidos	para	o	elemento	<head>	e	a	importância	da	utilização	
de metadados para as páginas web. Além disso, será abordada a evolução das versões 
da linguagem HTML. O objetivo é fornecer aos estudantes uma base sólida para que 
possam	criar	páginas	simples	com	clareza	e	eficácia,	utilizando	a	estrutura	básica	dos	
documentos HTML.
4
Para	demonstrar	na	prática	como	organizar	conteúdos	com	elementos	de	sepa-
ração,	criação	de	divisões,	 listas	e	inclusão	de	imagens,	será	apresentado	um	exemplo	
simples	de	uma	calculadora	em	uma	página	web.	Esse	exemplo	permitirá	que	os	estu-
dantes	 tenham	uma	compreensão	mais	 concreta	 sobre	 como	utilizar	 os	 conceitos	de	
HTML aprendidos anteriormente e como criar elementos interativos em uma página web. 
Com isso, além de entenderem como a internet funciona e como as páginas são 
criadas, os estudantes terão uma base sólida sobre a linguagem HTML e como estrutu-
rar	um	site	simples	de	forma	eficaz	e	atrativa.
A internet, a rede global de computadores, foi criada nos anos 1960 pelo Depar-
tamento	de	Defesa	dos	Estados	Unidos,	com	o	objetivo	de	compartilhar	informações	e	
recursos entre os pesquisadores. No entanto, foi só na década de 1990 que a web, que 
é	uma	das	aplicações	mais	populares	da	internet,	se	popularizou.	Desde	então,	a	web	
evoluiu	rapidamente,	permitindo	não	apenas	o	compartilhamento	de	informações,	mas	
também a comunicação em tempo real, a criação de comunidades online e o comércio 
eletrônico. Hoje em dia, a web é uma parte essencial da vida moderna e continua a evo-
luir rapidamente.
Perfeito, agora estamos prontos para embarcar em uma jornada através do 
tempo	e	conhecer	a	origem	da	web.	
2 FUNDAMENTOS DA INTERNET
Para	se	tornar	um	desenvolvedor	front-end	para	a	web,	é	essencial	possuir	ha-
bilidades que permitam a criação de sites modernos e interativos. Para tanto, é neces-
sário adquirir conceitos introdutórios sobre a web e a internet. Nesse sentido, é impor-
tante	explorar	a	história	da	criação	da	web	e	seu	desenvolvimento	ao	longo	do	tempo,	
compreendendo	sua	evolução	e	entendendo	as	tecnologias	utilizadas	no	desenvolvi-
mento de sites. 
Conhecer	a	história	da	web	permite	vislumbrar	tendências	futuras,	além	de	for-
necer	uma	base	sólida	para	o	aprendizado	de	tecnologias	mais	avançadas.	Por	 isso,	
esse	conhecimento	é	fundamental	para	quem	deseja	atuar	na	área	de	desenvolvimento	
front-end para a web.
2.1 COMO A WEB SURGIU E EVOLUIU
Em	1989,	a	Rede	Mundial	de	Computadores	(ou	WWW,	que	significa	“World	Wide	
Web”,	em	inglês),	conhecida	como	web,	foi	criada	no	Conselho	Europeu	para	Pesquisa	
Nuclear	(ou	CERN	que	significa	European	Organization	for	Nuclear	Research,	em	inglês)	
5
por	Tim	Berners-Lee	e	Robert	Cailliau,	com	a	finalidade	inicial	de	compartilhar	informa-
ções	entre	universidades	e	institutos	pelo	mundo	(CERN,	2022a).	Desde	então,	a	Web	se	
tornou	uma	plataforma	fundamental	para	o	compartilhamento	de	informações	e	recur-
sos entre usuários e instituições em todo o mundo, tendo uma arquitetura descentrali-
zada	e	distribuída	baseada	em	hiperlinks.
De	acordo	com	Relihan,	Cahill	e	Hinckey	(1994),	a	Web	é	um	sistema	de	hiper-
texto	distribuído	em	toda	a	Internet,	operando	na	base	cliente/servidor,	onde	os	clientes	
W3	(ou	WWW)	solicitam	representações	de	objetos	de	documentos	aos	servidores	W3.	O	
espaço	de	objeto	W3	é	formado	por	nós	e	partes	de	nós,	chamados	de	fragmentos,	que	
são	conectados	entre	si	por	hiperlinks.	A	web	é	composta	por	um	conjunto	de	páginas	
que	contêm	hipertexto	e	hipermídia,	como	texto,	gráficos,	vídeo,	som,	entre	outros,	e	os	
servidores	web	fornecem	essas	informações	em	hipertexto	para	os	navegadores	web	
(CERN,	2022b).
Embora muitas pessoas usem os termos internet e web de forma intercambi-
ável,	é	importante	destacar	que	eles	não	são	sinônimos.	Robbins	(2018)	ressalta	que	a	
internet é uma rede global de computadores interconectados, enquanto a web é ape-
nas	uma	das	várias	maneiras	pelas	quais	as	 informações	podem	ser	compartilhadas	
na internet. Compreender a diferença entre esses termos é essencial para entender a 
estrutura e o funcionamento da internet e da web.
Você sabia que pode conhecer o primeiro protótipo de navegador 
da web? Ele se chama WorldWideWeb e foi desenvolvido por Tim 
Berners-Lee em 1990, enquanto trabalhava no CERN (European 
Organization for Nuclear Research). Esse navegador foi o precursor 
dos navegadores modernos que utilizamos atualmente e pode ser 
acessado através do seguinte link: https://worldwideweb.cern.ch/.
O WorldWideWeb foi desenvolvido para ser utilizado em computa-
dores NeXT, uma linha de computadores pessoais criada por Steve 
Jobs depois que ele deixou a Apple em 1985. O navegador permitia 
que os usuários acessassem documentos usando hiperlinks, o que 
revolucionou a forma como as informações eram compartilhadas e 
acessadas na época.
CURIOSIDADE
Um	marco	importante	na	história	da	WWW	foi	a	criação	do	primeiro	servidor	web,	
em 1991, também por Tim Berners-Lee, que o desenvolveu em uma linguagem de pro-
gramação	chamada	Objective-C.	Esse	servidor	permitiu	que	a	primeira	página	web	do	
mundo fosse criada e acessada por outros computadores conectadosà internet. 
https://worldwideweb.cern.ch/
6
A	página,	que	pode	ser	vista	até	hoje	no	endereço:		<http://info.cern.ch/hyper-
text/WWW/TheProject.html>,	que	contém	informações	sobre	o	projeto	WWW,	incluindo	
sua	história,	sua	arquitetura	e	o	que	ele	pretendia	alcançar.	A	partir	daí,	a	web	começou	
a crescer rapidamente e evoluir, tornando-se uma ferramenta essencial para a comuni-
cação	e	o	compartilhamento	de	informações	em	todo	o	mundo.
Após a introdução sobre a web e a internet, é importante entender como as pá-
ginas web são acessadas na rede mundial de computadores. Isso pode ser feito através 
do endereço IP ou do domínio. Dessa forma, os usuários podem acessar as páginas web 
na	internet	sem	precisar	memorizar	números	complexos	de	endereçamento	IP.	
Entender	esses	conceitos	é	fundamental	para	a	configuração	de	servidores	e	
hospedagem	de	sites	na	internet.	Além	disso,	ter	conhecimento	sobre	como	funcionam	
os endereços IP e os nomes de domínio é importante para solucionar problemas de co-
nexão	à	internet	e	para	garantir	a	segurança	na	rede.	É	fundamental	manter	a	seguran-
ça	do	nome	de	domínio	e	do	servidor,	pois	uma	falha	de	segurança	pode	levar	à	invasão	
do site e comprometimento de informações sensíveis.
2.2 DESVENDANDO O ENDEREÇO WEB
O	protocolo	de	internet,	também	conhecido	como	Protocolo	da	internet	ou	(IP	
que	significa	Internet	Protocol,	em	inglês),	é	um	endereço	numérico	único	que	permite	a	
comunicação	entre	computadores	e	servidores	web.	Assim	como	o	CPF	identifica	cada	
pessoa de forma única, o IP é necessário para transmitir as informações de forma cor-
reta entre os dispositivos conectados na internet.
O	Localizador	Uniforme	de	Recursos	(ou	URL	que	significa	“Uniform	Resource	
Locator”.	em	inglês)	é	a	forma	mais	fácil	e	intuitiva	de	acessar	um	site	na	internet.	Ela	
é	composta	por	duas	partes	principais:	o	protocolo	de	transferência	de	hipertexto	e	o	
nome de domínio.
O	nome	de	domínio,	como	"google.com",	é	o	endereço	completo	que	identifica	
o site. Quando digitamos o nome de domínio no navegador, o Sistema de Nome de Do-
minio	(ou	DNS	que	significa	“Domain	Name	System”,	em	inglês)	faz	a	tradução	para	o	
endereço IP correspondente, permitindo que o navegador se conecte ao servidor web 
correto e carregue a página solicitada
Assim como a busca de contato na agenda telefônica, ao inserirmos a URL, o 
DNS é responsável por encontrar o endereço IP correspondente, permitindo o acesso 
à	página	web	desejada.	Agora	vamos	analisar	cada	uma	das	partes	da	sintaxe	da	URL	
para	entendermos	melhor	como	ela	é	estruturada.	
7
Vamos	utilizar	como	exemplo	a	URL	"https://www.exemplo.com.br/produtos/note-
book-i7".	A	partir	dessa	URL,	podemos	analisar	sua	estrutura	e	identificar	seus	componentes:
• Protocolo - "https":	 é	a	primeira	parte	da	URL	e	é	 responsável	por	especificar	a	
forma como as informações serão transmitidas. No caso da URL fornecida, o pro-
tocolo	é	o	Protocolo	de	Transferência	de	Hipertexto	Seguro	(ou	HTTPS	que	significa	
"Hypertext	Transfer	Protocol	Secure”,	em	inglês),	que	fornece	uma	camada	adicional	
de segurança na comunicação entre o navegador do usuário e o servidor web. Este 
protocolo criptografa as informações transmitidas entre o cliente e o servidor, tor-
nando-as mais seguras contra interceptações e violações de privacidade. Embora o 
protocolo	mais	comum	seja	o	Protocolo	de	Transferência	de	Hipertexto	(ou	HTTP	que	
significa	“Hypertext	Transfer	Protocol	-	HTTP”,	em	 inglês),	é	possível	utilizar	outros	
protocolos,	como	o	Protocolo	de	transferência	de	dados	(ou	FTP	que	significa	“File	
Transfer	Protocol”,	em	inglês)	para	transferência	de	arquivos	ou	o	Mailto	para	envio	
de	e-mails.	É	 importante	destacar	que	se	o	protocolo	não	for	 informado	na	URL,	o	
navegador irá automaticamente adicionar o HTTP como padrão.
• Subdomínio - "www”:	É	um	subdomínio	padrão	utilizado	em	muitos	sites,	geral-
mente	usado	para	diferenciar	a	versão	WWW	(World	Wide	Web)	de	um	site	das	outras	
versões	que	possam	existir,	como	a	versão	mobile	ou	a	versão	de	desenvolvimento.	
Esse subdomínio pode ser omitido em alguns casos, mas é comum encontrá-lo na 
maioria dos endereços URL.
• Domínio - "exemplo.com.br":	É	o	nome	que	identifica	um	site	na	internet.	É	forma-
do	por	duas	partes:	o	nome	escolhido	para	o	site,	que	é	conhecido	como	domínio	de	
segundo	nível	(ou	SLD	que	significa	“second-level	domain”,	em	inglês),	e	o	domínio	de	
alto	nível	(ou	TLD	que	significa	“top-level	domain”,	em	inglês),	que	indica	a	categoria	
ou	país	do	site.	No	caso	do	exemplo,	o	TLD	é	".com.br",	que	é	utilizado	para	sites	co-
merciais brasileiros.
• Caminho - "/produtos/notebook-i7":	É	a	parte	da	URL	que	identifica	o	diretório	e	o	
nome	do	arquivo	do	recurso	que	está	sendo	acessado	no	servidor	web.	No	exemplo,	o	
caminho	é	composto	por	diretório	(produtos)	e	o	nome	do	arquivo	(notebook-i7),	que	
indica	um	produto	específico	em	um	site	de	venda	de	eletrônicos,	por	exemplo.	Se	o	
caminho	não	for	especificado,	o	servidor	irá	buscar	por	um	arquivo	padrão,	como	o	
"index.html".
É importante lembrar que o registro do domínio deve ser feito para 
que o site possa ser encontrado na internet. Para os domínios com 
extensão ".BR", o registro pode ser realizado no site do Registro.br 
ou através de provedores de serviços. No momento do registro, é 
necessário informar um DNS próprio ou de algum provedor de hos-
pedagem para permitir o acesso ao site.
Saiba mais em: https://registro.br/dominio/regras/
IMPORTANTE
8
Com	o	conhecimento	adquirido	sobre	o	endereço	IP,	o	domínio	e	a	sintaxe	da	
URL,	temos	uma	base	sólida	para	compreender	os	processos	envolvidos	na	hospeda-
gem	de	sites	e	páginas	na	web.	Na	próxima	seção,	vamos	explorar	os	conceitos	fun-
damentais	da	hospedagem	de	sites	na	internet,	incluindo	o	papel	do	servidor	web	e	os	
diferentes	tipos	de	hospedagem	disponíveis.	Veremos	como	a	escolha	do	provedor	de	
hospedagem	pode	impactar	na	performance	e	segurança	do	seu	site,	além	de	discutir	
as	opções	de	hospedagem.	Aprenda	tudo	o	que	precisa	saber	para	garantir	que	seu	site	
esteja sempre disponível e acessível na web.
2.3 HOSPEDAGEM DE SITES
A	hospedagem	de	 sites	 é	 fundamental	 para	 que	uma	página	web	possa	 ser	
acessada	na	internet.	Através	de	um	serviço	de	hospedagem,	os	arquivos	e	dados	de	
um	site	são	armazenados	em	servidores	de	internet,	permitindo	que	usuários	de	qual-
quer	lugar	do	mundo	tenham	acesso	a	ele.	É	importante	conhecer	os	diferentes	tipos	
de	hospedagem	disponíveis	para	escolher	a	opção	mais	adequada	às	necessidades	do	
seu site.
De	acordo	 com	Robbins	 (2018),	 um	servidor	web	é	um	hardware	 com	aces-
so à internet e com um software instalado para aceitar solicitações HTTP, permitindo 
a	transferência	de	hipertexto.	Os	servidores	web	são	utilizados	para	várias	atividades,	
como envio e recebimento de e-mails, transferência de dados e criação ou publicação 
de	páginas.	Segundo	Netcraft	(2022),	os	servidores	web	mais	populares	em	2022	são	o	
Nginx	e	o	Apache.
A	hospedagem	de	sites	pode	ser	feita	 localmente	ou	na	nuvem.	Quando	en-
viamos	os	arquivos	do	site	para	o	servidor	web,	chamamos	essa	ação	de	hospedagem	
(ROBBINS,	2018).	Com	os	servidores	web,	é	possível	disponibilizar	vários	sites	em	uma	
mesma	máquina,	o	que	chamamos	de	hospedagem	virtual	(Virtual	Host,	em	inglês).	A	
configuração	pode	ser	baseada	em	IP	ou	em	nome,	sendo	que	a	primeira	opção	significa	
que	há	um	endereço	IP	diferente	para	cada	site,	e	a	segunda	opção	indica	que	há	vários	
nomes	para	cada	endereço	IP	(APACHE,	2022).
Você encontrará mais informações sobre como configurar o virtual 
host no Apache, incluindo detalhes e exemplos, no seguinte link: 
https://httpd.apache.org/docs/2.4/vhosts/index.html.
Este recurso pode ser útil para quem deseja aprofundar seus 
conhecimentos sobre a configuração do virtual host em um 
servidor web.
DICA
https://httpd.apache.org/docs/2.4/vhosts/index.html
9
Compreender	o	processo	de	hospedagem	de	sites	é	fundamental	para	quem	
deseja	ter	uma	presença	onlineconsistente.	Isso	porque	a	hospedagem	é	responsável	
por manter o seu site disponível na web, permitindo que ele seja acessado por qualquer 
pessoa	em	qualquer	 lugar	do	mundo.	Além	disso,	a	escolha	do	tipo	de	hospedagem	
adequado para o seu projeto pode impactar diretamente em sua performance, segu-
rança e escalabilidade.
Para	começar,	é	importante	entender	que	a	hospedagem	consiste	em	armaze-
nar os arquivos do seu site em um servidor web. Esse servidor é responsável por rece-
ber as requisições de acesso ao seu site e enviar os arquivos correspondentes para o 
navegador do usuário.
Existem	diversos	tipos	de	hospedagem	disponíveis	no	mercado,	cada	um	com	
características	específicas	que	os	tornam	mais	adequados	para	diferentes	tipos	de	pro-
jetos. Entre as opções mais comuns, podemos citar:
• Hospedagem compartilhada:	nesse	tipo	de	hospedagem,	vários	sites	são	armaze-
nados	no	mesmo	servidor,	compartilhando	recursos	como	espaço	em	disco,	memória	
e processamento. Essa é uma opção mais econômica e indicada para projetos meno-
res e com menos tráfego.
• Hospedagem VPS (ou	Virtual	Private	Server,	em	inglês)	é	uma	opção	intermediária	
entre	a	hospedagem	compartilhada	e	a	hospedagem	dedicada.	Nesse	caso,	o	ser-
vidor é dividido em várias máquinas virtuais, cada uma com seus próprios recursos. 
Isso	permite	um	maior	controle	e	flexibilidade	em	relação	aos	recursos	do	servidor,	
mas sem o custo de um servidor dedicado.
• Hospedagem dedicada:	nesse	tipo	de	hospedagem,	você	aluga	um	servidor	inteiro	
para	o	seu	projeto.	 Isso	significa	que	você	tem	total	controle	sobre	os	recursos	do	
servidor	e	pode	customizá-lo	de	acordo	com	as	suas	necessidades.	Essa	é	uma	op-
ção mais indicada para projetos de grande porte e com alto tráfego.
• Cloud hosting (ou	hospedagem	em	nuvem,	em	português):	essa	é	uma	opção	mais	
moderna,	que	utiliza	a	tecnologia	de	computação	em	nuvem	para	hospedar	sites.	
Nesse caso, os recursos são distribuídos entre diversos servidores, permitindo uma 
maior	escalabilidade	e	 redundância.	Essa	é	uma	opção	 indicada	para	projetos	que	
exigem	alta	disponibilidade	e	escalabilidade.
A	escolha	do	tipo	de	hospedagem	 ideal	para	o	seu	projeto	dependerá	de	di-
versos	fatores,	como	o	tamanho	do	seu	site,	o	tráfego	esperado,	as	necessidades	de	
segurança	e	desempenho,	entre	outros.	É	 importante	avaliar	com	cuidado	as	opções	
disponíveis	e	escolher	aquela	que	melhor	atende	às	suas	necessidades	e	orçamento.
10
Embora existam hospedagens gratuitas que possam ser usadas 
para testes, é importante lembrar que elas geralmente não são 
recomendadas para um site oficial devido a preocupações de 
segurança e credibilidade. 
No entanto, o provedor Hostinger oferece uma opção de hos-
pedagem gratuita disponível em <https://br.000webhost.com/>, 
que vem com algumas limitações que devem ser consideradas.
DICA
Os servidores web são os fornecedores dos serviços e os navegadores web são 
os clientes dos serviços que solicitam informações para os servidores. Agora vamos en-
tender	a	forma	de	busca	das	páginas	ou	sites	na	internet	realizado	pelo	motor	de	busca	
e	conhecer	melhor	os	navegadores	web.	
Finalizamos	nosso	primeiro	tópico	do	primeiro	tema	de	aprendizagem,	falamos	
sobre os conceitos básicos da internet, vamos relembrar rapidamente o que estudamos 
até	o	momento:	 conhecemos	sobre	a	 rede	de	alcance	mundial	 conhecida	por	www,	
o	conjunto	de	redes	de	computadores	conhecido	como	internet,	os	endereços	 IPs,	o	
nome	do	site	conhecido	como	domínio,	a	tradução	do	domínio	em	endereço	IP	realizado	
pelo	DNS,	a	sintaxe	de	uma	URL,	quais	os	tipos	de	hospedagens	de	sites	disponíveis	
atualmente	e,	por	fim,	entendemos	o	funcionamento	do	motor	de	busca	do	Google.	
No	 próximo	 tópico,	 daremos	 início	 à	 exploração	 da	 linguagem	HTML,	 funda-
mental para a criação de páginas web. Veremos a evolução da linguagem ao longo dos 
anos	e	sua	importância	na	construção	de	sites.	Além	disso,	abordaremos	conceitos	bá-
sicos	e	apresentaremos	exemplos	práticos	que	ajudarão	na	compreensão	da	estrutura	
e	sintaxe	do	HTML.
3 FUNDAMENTOS DO HTML: ESTRUTURAÇÃO DE 
PÁGINAS WEB
Desde sua criação em 1989 por Tim Berners-Lee, o HTML passou por diversas 
mudanças	e	melhorias	propostas	e	implementadas	por	diferentes	grupos	de	trabalho.	
Nesta	seção,	iremos	explorar	a	evolução	do	HTML,	desde	suas	primeiras	versões	até	as	
mais recentes, e como essas mudanças impactaram a criação de páginas web.
Como a base da criação de páginas na internet, o HTML é uma linguagem de 
marcação	que	define	a	estrutura	e	o	conteúdo	de	uma	página.	É	importante	entender	os	
elementos básicos do HTML e sua relação com navegadores e motores de busca. Além 
disso, você irá aprender sobre a estruturação de documentos HTML e como criar uma 
página	web	com	conteúdo	estruturado,	 seguindo	as	melhores	práticas	e	os	padrões	
atualmente	utilizados	na	web.
11
3.1 EVOLUÇÃO DO HTML
O	HTML	é	uma	linguagem	fundamental	para	a	criação	de	páginas	web	e	sua	his-
tória	é	marcada	por	mudanças	significativas	ao	longo	dos	anos.	Segundo	Ferreira	e	Eis	
(2010),	o	HTML	foi	criado	em	1989	por	Tim	Berners-Lee,	enquanto	em	1990	foi	lançado	
o	navegador	Mosaic	por	Marc	Andreessen,	que	impulsionou	a	popularização	do	HTML	
entre desenvolvedores e fabricantes de navegadores.
O HTML passou por diversas mudanças ao longo do tempo, com cada versão 
trazendo	novos	recursos	e	melhorias	em	relação	à	anterior.	A	padronização	do	HTML	
pelo	W3C,	a	partir	da	versão	3.2	em	1997,	foi	um	marco	importante	para	a	evolução	e	
ampla	utilização	da	linguagem.	Dentre	as	principais	versões	do	HTML,	destacam-se	o	
original, que foi a primeira versão criada por Tim Berners-Lee em 1989, o HTML+ em 
1993,	o	HTML	2.0	em	1995,	o	HTML	3.0	em	1997	e	o	HTML	4.01	em	1999,	que	é	ampla-
mente	utilizado	até	hoje.	
Em	2000,	foi	 lançada	a	versão	XHTML,	que	 reformulou	o	HTML	4.01	usando	a	
sintaxe	XML,	mas	não	teve	tanto	sucesso.	Em	2004,	foi	criado	o	grupo	de	trabalho	das	
tecnologias	de	aplicação	de	hipertexto,	 conhecido	pela	 sigla	em	 inglês	WHATWG	 (Web	
Hypertext	Application	Technology	Working	Group),	devido	à	insatisfação	com	a	nova	ver-
são	da	linguagem	de	marcação	para	hipertexto	extensível	(EXtensible	HyperText	Markup	
Language	–	XHTML)	que	estava	sendo	desenvolvida	pelo	W3C	(FERREIRA;	EIS,	2010).
Em	2006,	os	dois	grupos	demonstraram	interesse	em	trabalhar	juntos	no	de-
senvolvimento do HTML 5, que tem como objetivo principal a manipulação do elemento, 
permitindo	a	modificação	de	características	dos	objetos	por	meio	de	API.	Desde	2012,	o	
W3C	escolhe	os	pacotes	de	correção	de	erros	(patches)	do	WHATWG	(W3C.ORG,	2021).
Inicialmente, a linguagem HTML não foi criada para ser uma lingua-
gem de marcação para a World Wide Web (WWW). Em vez disso, Tim 
Berners-Lee a desenvolveu como uma linguagem de marcação para 
documentos acadêmicos e científicos. No entanto, ele percebeu 
rapidamente que o HTML poderia ser usado como uma linguagem 
de marcação para a WWW, o que acabou se tornando sua principal 
aplicação. Desde então, o HTML evoluiu bastante e se tornou funda-
mental para a criação de páginas web como conhecemos hoje.
CURIOSIDADE
Além das versões do HTML que já mencionamos, é importante destacar que a 
evolução do HTML não se limitou apenas à adição de novos recursos e tags. Também 
houve	uma	preocupação	crescente	em	relação	à	acessibilidade,	usabilidade	e	perfor-
mance da web.
12
A	versão	mais	recente	do	HTML	é	o	HTML5,	lançado	em	2014,	que	trouxe	muitos	
novos	recursos	e	melhorias	em	relação	às	versões	anteriores,	por	exemplo	melhorias	
em	relação	à	acessibilidade,	com	a	 inclusão	de	novas	tags	semânticas	que	ajudam	a	
indicar	o	conteúdo	de	uma	página	de	maneira	mais	clara	para	usuários	com	deficiências	
visuais.	Além	disso,	o	HTML5	também	trouxe	melhorias	em	relação	à	performance,	com	
recursos	como	o	armazenamento	local	e	a	possibilidade	de	se	usar	o	cache	do	navega-
dor	para	armazenar	recursos	estáticos,	como	imagens	e	arquivos	CSS.
Outra mudança importante na evolução do HTMLfoi a separação do conteú-
do da apresentação. Com a introdução do CSS, foi possível separar as informações de 
estilo	e	layout	da	página	do	conteúdo	em	si,	permitindo	maior	flexibilidade	no	design	e	
facilitando a manutenção do código. Essa separação também contribuiu para a criação 
de	sites	mais	acessíveis,	já	que	os	estilos	podem	ser	modificados	sem	afetar	o	conteúdo	
da página.
Em resumo, a evolução do HTML não se limitou apenas a adição de novas tags 
e recursos, mas também envolveu uma preocupação crescente com a acessibilidade, 
usabilidade e performance da web, bem como a separação do conteúdo da apresenta-
ção por meio do uso de CSS.
Para visualizar as mudanças e atualizações nas diferentes versões 
do HTML, é possível acessar o link https://www.w3.org/TR/?title=html, 
que apresenta uma lista de todas as especificações e rascunhos rela-
cionados ao HTML desenvolvidos pelo World Wide Web Consortium 
(W3C). Nesse link, é possível encontrar desde as primeiras versões 
experimentais do HTML até a versão mais recente, o HTML5, que 
trouxe importantes melhorias e novos recursos para a criação de 
páginas web.
DICA
Após	explorarmos	a	evolução	do	HTML	ao	longo	dos	anos,	é	importante	enten-
der como essa linguagem se relaciona com os navegadores e motores de busca. Como 
base	da	criação	de	páginas	na	internet,	o	HTML	é	responsável	por	definir	a	estrutura	e	o	
conteúdo de uma página, e é interpretado pelos navegadores para apresentar o conte-
údo aos usuários. Além disso, a forma como as páginas são estruturadas em HTML pode 
afetar sua visibilidade nos motores de busca, sendo importante considerar as boas prá-
ticas	de	SEO	(Search	Engine	Optimization)	na	criação	de	páginas	web.	Vamos	explorar	
essa	relação	mais	a	fundo	na	próxima	seção.
13
3.2 FUNCIONAMENTO DE NAVEGADORES E MOTORES DE 
BUSCA
Os	navegadores	web,	também	conhecidos	como	browsers,	são	programas	que	
permitem o acesso à internet em computadores e dispositivos móveis. De acordo com 
o	Statcounter	(2022),	o	Chrome	é	o	navegador	mais	popular	em	todo	o	mundo,	seguido	
pelo	Safari,	Edge	e	Firefox.
A interface do usuário de um navegador é composta por vários componentes 
principais, incluindo a barra de endereço, botões de navegação, menu do navegador, 
barra de favoritos e guias. Na Figura 1, podemos observar os principais componentes do 
navegador	Chrome,	que	é	um	dos	navegadores	mais	populares.
Figura 1 – Interface do navegador Chrome com indicação dos componentes
Fonte: a autora.
Após	conhecermos	os	componentes	da	interface	do	navegador,	podemos	en-
tender o funcionamento do navegador em si. Quando inserimos um endereço de página 
na	barra	de	endereço	do	navegador,	uma	solicitação	utilizando	o	Protocolo	de	Transfe-
rência	de	Hipertexto,	ou	HTTP	(Hypertext	Transfer	Protocol)	em	inglês,	é	enviada	para	
um	servidor	web	(MOZILLA.ORG,	2022a).
O servidor web receberá a solicitação e retornará os dados para o navegador, 
mas	eles	não	estarão	prontos	para	serem	exibidos	na	tela.	Serão	uma	mistura	de	textos	
e	 imagens	que	precisarão	ser	traduzidos	para	a	apresentação	na	tela	 (MOZILLA.ORG,	
2022a).
O	mecanismo	de	renderização	(rendering	engine)	do	navegador	é	responsável	
por	 realizar	essa	tradução.	Também	conhecido	como	mecanismo	de	 layout	ou	motor	
do	navegador,	ele	varia	de	acordo	com	o	navegador	utilizado.	Por	exemplo,	o	Blink	é	o	
mecanismo	de	renderização	multi	plataforma	desenvolvido	pelo	Google	e	utilizado	no	
navegador	Chrome	(MOZILLA.ORG,	2022a).
14
Para entender ainda mais sobre o funcionamento dos navegado-
res, recomendamos acessar o site disponível em: https://web.dev/
howbrowserswork/. Lá você encontrará informações detalhadas 
sobre os componentes dos navegadores, como eles trabalham 
juntos para processar e exibir conteúdo da web, e as tecnologias 
subjacentes que permitem essa interação. É uma leitura valiosa 
para desenvolvedores web que desejam otimizar seus sites para 
garantir uma experiência de usuário suave e consistente em to-
dos os navegadores.
DICA
Na tabela 1, podemos observar a comparação entre a situação de João indo ao 
mercado e o processo de acessar um site na internet. Assim como João precisa consul-
tar	a	localização	do	mercado	e	percorrer	um	caminho	para	chegar	até	ele,	ao	acessar-
mos um site precisamos digitar o endereço na barra de endereço do navegador e rea-
lizar	uma	requisição	ao	servidor	web	para	obter	as	informações	desejadas.	Além	disso,	
assim como a estrada que leva João ao mercado precisa estar em boas condições para 
garantir	uma	viagem	segura,	a	qualidade	da	conexão	com	a	internet	e	a	disponibilidade	
do	servidor	web	também	são	fatores	importantes	para	garantir	uma	boa	experiência	ao	
acessar um site.
Tabela 1 – Analogia de fazer compras com acesso site na internet
 Fonte: a autora.
SITUAÇÃO REAL ACESSO INTERNET
João navegador web
Estrada internet
Mercado servidor web
Produtos Arquivos componentes do site
Endereço do mercado domínio do site
Linguagem falada para fazer o pedido protocolos	http
Situação da estrada (boa ou ruim) qualidade da internet
GPS (consultar endereço) servidor DNS
Produtos chegam na residência o navegador monta e apresenta o site
Os arquivos que compõem um site podem ser divididos em dois tipos: códigos 
e	recursos.	Os	códigos	são	os	arquivos	hipertexto	que	contêm	a	estrutura,	o	estilo	e	o	
comportamento da página, enquanto os recursos são as imagens, áudios, vídeos, docu-
mentos e outros elementos que compõem o conteúdo da página.
15
Além	disso,	os	arquivos	de	código	geralmente	possuem	extensões	como	.html,	
.css	e	 .js,	enquanto	os	arquivos	de	recursos	podem	ter	uma	variedade	de	extensões,	
dependendo do tipo de arquivo.
Antes de começar a codificar o seu site, é importante fazer um 
planejamento adequado para garantir que ele atenda às suas 
necessidades e às dos usuários. O Mozilla Developer Network 
oferece um guia útil sobre o que você precisa considerar antes 
de criar seu site. O guia inclui dicas sobre como definir seus obje-
tivos, identificar seu público-alvo, escolher um nome de domínio, 
selecionar a tecnologia apropriada e muito mais. 
Para acessar o guia completo, visite o link: https://developer.mo-
zilla.org/pt-BR/docs/Learn/Getting_started_with_the_web/What_
will_your_website_look_like
DICA
O objetivo principal de criar um site é ser encontrado na internet pelos usuários. 
Por isso, é fundamental compreender como funciona o processo de busca nos motores 
de	busca,	como	o	Google,	para	que	seu	site	possa	ser	facilmente	localizado.
Ao	acessar	um	motor	de	busca,	como	o	Google,	por	meio	de	um	navegador,	es-
tamos	acessando	um	servidor	especializado	em	buscar	e	indexar	informações	de	outras	
páginas	da	 internet.	É	 importante	destacar	que	muitas	pessoas	confundem	o	motor	
de busca com o navegador, pois, em muitos casos, a página inicial do navegador é um 
motor	de	busca	(MOZILLA.ORG,	2022f).
Para	entender	melhor	como	funciona	o	motor	de	busca	do	Google,	é	necessário	
conhecer	as	etapas	do	processo.	A	primeira	etapa	é	a	descoberta	das	páginas	existen-
tes	na	web,	que	é	realizada	por	meio	da	descoberta	da	URL.	Na	segunda	etapa,	o	Google	
identifica	cada	página	encontrada,	 indexando	as	 informações.	Por	fim,	o	resultado	da	
pesquisa	é	exibido	no	navegador,	finalizando	a	busca.
 
Para	aumentar	as	chances	de	seu	site	ser	encontrado	na	busca,	é	possível	utili-
zar	metadados	no	cabeçalho	do	arquivo,	que	são	informações	utilizadas	pelo	otimizador	
do	mecanismo	de	busca	(Search	Engine	Optimization	-	SEO).	O	uso	de	palavras-chave	
em metadados pode ajudar a informar de forma concisa e precisa qual é o conteúdo 
oferecido pela página, tornando mais fácil para o motor de busca entender do que se 
trata o seu site e apresentá-lo de forma adequada nos resultados de pesquisa.
16
Se você deseja se aprofundar em SEO e aprender mais sobre como 
otimizar seu site para mecanismos de busca, recomendamos acessar 
o guia para iniciantes fornecido pela Google. Você pode acessar o guia 
que contém informações valiosas sobre comomelhorar o desempe-
nho de pesquisa do seu site e aumentar a visibilidade nos resultados 
do Google por meio do link: https://developers.google.com/search/
docs/fundamentals/seo-starter-guide?hl=pt-br
DICA
Para garantir que um site seja fácil de manter e acessar, é fundamental que 
seus	arquivos	estejam	organizados	em	uma	estrutura	de	diretórios	lógica	e	consistente.	
Essa	estrutura	ajuda	na	manutenção	do	site,	permitindo	que	as	atualizações	sejam	re-
alizadas	de	forma	mais	rápida	e	precisa.
Uma	vez	que	os	arquivos	estão	organizados	e	prontos,	eles	são	enviados	para	
um	servidor	web	que	os	armazena	e	os	disponibiliza	para	acesso	público	através	da	
internet.	Ter	uma	estrutura	de	diretórios	bem	definida	não	apenas	facilita	a	manutenção	
do site, mas também ajuda na sua usabilidade, pois permite que os visitantes encon-
trem	facilmente	o	que	estão	procurando.	Vamos	ver	na	próxima	seção	vamos	ver	uma	
opção de estruturação de um site.
3.3 COMO ESTRUTURAR UM SITE
A estruturação adequada de um site é essencial para garantir a facilidade de 
manutenção	e	acesso	aos	arquivos.	Isso	inclui	uma	organização	lógica	dos	diretórios	e	
arquivos	do	site,	bem	como	o	uso	de	técnicas	de	otimização	para	melhorar	sua	perfor-
mance	e	visibilidade	nos	mecanismos	de	busca.	Neste	contexto,	é	importante	entender	
como	a	estrutura	do	site	é	configurada	e	quais	são	as	boas	práticas	para	garantir	um	site	
eficiente	e	fácil	de	usar.
A	seguir,	vamos	explorar	alguns	conceitos	 importantes	sobre	páginas	e	sites	
na web, assim como a estrutura mínima de pastas que todos os sites devem ter. As 
páginas	são	arquivos	hipertexto	apresentados	pelo	navegador,	que	também	pode	in-
corporar recursos como estilo, scripts e mídias. Já os sites são conjuntos de páginas 
web	vinculados	por	meio	de	links	clicáveis,	chamados	hiperlinks.	Esses	links	podem	ser	
internos	(entre	páginas	do	mesmo	site)	ou	externos	(para	outras	páginas	da	internet),	e	
ainda	é	possível	criar	âncoras	que	apontam	para	uma	seção	específica	da	própria	página	
(MOZILLA.ORG,	2022e).
17
Hiperlinks, também conhecidos como links, são elementos em um 
documento eletrônico que permitem ao usuário acessar outros docu-
mentos ou recursos relacionados. Em português, o termo hiperlink é 
comumente traduzido como "hiperlink", "link" ou "ligação".
CURIOSIDADE
A	estrutura	das	pastas	de	um	site	é	fundamental	para	uma	organização	ade-
quada	dos	arquivos.	É	recomendável	ter	pastas	separadas	para	imagens,	estilos	e	ar-
quivos	JavaScript,	além	do	arquivo	de	entrada	do	site,	geralmente	chamado	index.html,	
que	fica	na	pasta	raiz	do	projeto.	(MOZILLA.ORG,	2022d).
As	páginas	da	web	podem	ser	classificadas	em	dois	tipos:	estáticas	e	dinâmicas.	
Páginas estáticas são aquelas que sempre apresentam as mesmas informações, enquan-
to	as	dinâmicas	são	geradas	por	programas	que	fornecem	informações	sob	demanda	ou	
contém	um	programa	para	gerar	o	conteúdo	(TANENBAUM;	WETHERALL,	2011).
Da	mesma	 forma,	 há	 servidores	 estáticos	 e	 dinâmicos.	 Servidores	 estáticos	
possuem	arquivos	que	não	mudam	durante	a	execução	e	são	enviados	para	o	navega-
dor	como	estão	hospedados.	Já	os	servidores	dinâmicos	exigem	um	servidor	de	apli-
cação e um banco de dados. Antes de enviar a página para o navegador, o servidor de 
aplicação	completa	a	página	com	dados	consultados	no	banco	de	dados	(MOZILLA.ORG,	
2022f).
Embora	os	websites	estáticos	sejam	mais	fáceis	de	configurar	para	iniciantes,	
existem	sistemas	de	gerenciamento	de	conteúdo	(ou	CMS	que	significa	“Content	Mana-
gement	System”,	em	inglês)	que	permitem	realizar	todas	as	ações	no	site	sem	conheci-
mento	de	linguagem	de	programação	e	marcação	(MOZILLA.ORG,	2022f).
Uma	outra	prática	comum	na	estruturação	de	um	site	é	a	utilização	de	URLs	
amigáveis	e	descritivas.	URLs	amigáveis	são	aquelas	que	utilizam	palavras-chave	rele-
vantes para o conteúdo da página, ao invés de códigos ou números gerados automati-
camente.	Isso	ajuda	na	usabilidade	do	site,	pois	facilita	a	identificação	do	conteúdo	da	
página pelos usuários e pelos motores de busca. Além disso, URLs amigáveis também 
contribuem	para	a	otimização	para	motores	de	busca	(ou	SEO	que	significa	“Search	En-
gine	Optimization”,	em	inglês)	do	site,	pois	os	motores	de	busca	consideram	a	relevância	
das	palavras-chave	na	URL	para	o	ranqueamento	nas	páginas	de	resultados.
18
SEO ou Search Engine Optimization é uma expressão em inglês que 
pode ser traduzida para o português como Otimização para Motores 
de Busca, também conhecida pela sigla SEO. Trata-se de um conjunto 
de técnicas e estratégias utilizadas para melhorar o posicionamen-
to de um site nos resultados de pesquisa de mecanismos de busca, 
como o Google, por exemplo. O objetivo do SEO é aumentar a visibi-
lidade e o tráfego orgânico de um site, tornando-o mais relevante e 
acessível para usuários que buscam por informações relacionadas ao 
conteúdo oferecido pelo site.
CURIOSIDADE
Outro ponto importante na estruturação de um site é o uso adequado das meta 
tags,	que	são	trechos	de	código	HTML	que	fornecem	informações	sobre	a	página,	como	
título,	descrição	e	palavras-chave.	Essas	informações	são	utilizadas	pelos	motores	de	
busca	para	indexar	e	exibir	a	página	nos	resultados	de	busca.	Portanto,	é	importante	
definir	corretamente	essas	meta	tags	para	garantir	que	o	conteúdo	da	página	seja	exi-
bido corretamente e que o site seja facilmente encontrado pelos usuários.
Por	fim,	é	 importante	ressaltar	que	a	estruturação	de	um	site	é	um	processo	
contínuo,	que	deve	ser	revisado	e	atualizado	regularmente.	À	medida	que	o	site	cresce	
e	evolui,	novas	pastas	e	páginas	podem	ser	adicionadas,	e	a	estrutura	existente	pode	
precisar	ser	reorganizada.	Além	disso,	é	importante	manter	a	consistência	na	estrutura	
e	na	nomenclatura	de	arquivos	e	pastas,	para	facilitar	a	manutenção	e	a	identificação	
dos arquivos. 
A estrutura básica de um site consiste em um conjunto de arquivos que são ar-
mazenados	em	um	servidor	web	e	acessados	por	meio	de	um	navegador.	O	documento	
HTML	é	o	principal	componente	desses	arquivos	e	define	a	estrutura	e	o	conteúdo	da	
página.	Para	criar	um	documento	HTML,	é	necessário	conhecer	a	linguagem	de	mar-
cação	HTML	e	suas	tags.	As	tags	são	usadas	para	definir	diferentes	tipos	de	elementos,	
como	títulos,	parágrafos,	imagens	e	links.
É	fundamental	compreender	que	o	HTML	é	apenas	uma	das	diversas	linguagens	
utilizadas	na	criação	de	um	site.	Para	além	do	HTML,	é	comum	utilizar	outras	tecnologias	
como	CSS	e	JavaScript	para	estilizar	e	adicionar	interatividade	ao	site.	Durante	o	processo	
de	criação,	é	imprescindível	considerar	a	experiência	do	usuário	e	garantir	que	a	navega-
ção	seja	intuitiva	e	fácil.	A	escolha	das	cores,	fontes	e	layout	também	influenciam	signifi-
cativamente	na	experiência	do	usuário	e	devem	ser	cuidadosamente	pensadas.	
Compreender a estrutura básica de um site e as ferramentas necessárias para 
sua	criação	é	apenas	o	primeiro	passo	para	desenvolver	uma	presença	online	eficaz.	É	
preciso	também	considerar	a	relevância	do	conteúdo,	a	otimização	para	os	motores	de	
busca	e	a	segurança	do	site.	Diante	disso,	vamos	mergulhar	no	vasto	mundo	da	criação	
de	sites,	iniciando	pelo	aprendizado	do	HTML.
19
4 INTRODUÇÃO A ESTRUTURA DO HTML 
O	HTML	(Hypertext	Markup	Language)	é	uma	linguagem	de	marcação	funda-
mental	para	o	desenvolvimento	de	páginas	na	web.	Ele	utiliza	elementos	para	definir	
e	organizar	o	conteúdo,	tornando	possível	a	estruturação	do	texto,	imagens,	vídeos	e	
outros tipos de mídia.
Cada elemento HTML é representado por uma tag que contém informações 
sobre o conteúdo, como sua função e a maneira como deve ser apresentado. Esses 
elementos	são	muito	importantes,	pois	fornecem	significado	semântico	para	a	página,	
permitindo que ela seja lida e interpretada pelos mecanismos de busca e pelos usuários 
com	deficiência	visual,	por	exemplo.
O HTML é uma linguagem em constante evolução, e a versão mais recente é o 
HTML5. Ela inclui muitos novos recursos e funcionalidades que ampliam as possibilida-des	de	criação	de	conteúdo	na	web,	como	tags	de	vídeo	e	áudio,	elementos	semânticos	
que	facilitam	a	acessibilidade	e	suporte	para	aplicativos	da	web.	Mas	antes	de	explorar	
esses	novos	recursos,	é	importante	conhecer	em	detalhes	os	elementos	HTML	tradicio-
nais	e	sua	importância	na	criação	de	uma	página	bem	estruturada.
4.1 CRIANDO O PRIMEIRO ARQUIVO HTML
Para começar a criar um site, precisamos criar um arquivo HTML. Um arquivo 
HTML	é	um	documento	de	texto	que	contém	código	HTML	(Hypertext	Markup	Langua-
ge)	que	define	a	estrutura	e	o	conteúdo	de	uma	página	da	web.	Ele	é	interpretado	pelos	
navegadores	da	web	para	exibir	o	conteúdo	na	tela	do	usuário.	O	código	HTML	consiste	
em	elementos	(tags)	que	indicam	ao	navegador	como	renderizar	o	conteúdo,	como	tí-
tulos,	parágrafos,	 imagens,	 links	e	outros	recursos	multimídia.	arquivo	HTML	é	a	base	
de	uma	página	da	web	e	pode	incluir	folhas	de	estilo	em	cascata	(CSS)	e	scripts	para	
fornecer	formatação	visual	e	interatividade	na	página.	É	a	estrutura	desse	arquivo	que	
define	como	o	conteúdo	será	apresentado	na	página,	incluindo	texto,	imagens,	vídeos,	
formulários e muito mais.
Para criar o nosso primeiro arquivo HTML, não será necessário incluir a estrutura 
básica	que	normalmente	é	utilizada	em	páginas	da	web,	 já	que	o	objetivo	neste	mo-
mento é apenas entender o processo de criação do arquivo e sua posterior publicação.
Para	criar	um	arquivo	HTML,	podemos	usar	qualquer	editor	de	texto,	como	o	
Bloco	de	Notas	ou	o	Sublime	Text.	Vamos	criar	agora	o	nosso	primeiro	arquivo	HTML,	
chamado	de	"index.html".	Este	arquivo	contém	apenas	a	frase	"Hello,	World!",	sem	ne-
nhum	elemento	HTML,	pois	o	objetivo	neste	momento	é	apenas	criar	o	documento	que	
será a porta de entrada do nosso site quando acessarmos a URL.
20
Para criar o arquivo no sistema operacional Windows 10, podemos abrir o Prompt 
de	Comando	pressionando	as	teclas	"Windows+R"	e	digitando	"cmd".	Com	o	Prompt	de	
Comando	aberto,	podemos	navegar	até	a	pasta	raiz	do	nosso	projeto	usando	o	coman-
do	"cd	<<caminho/nome>>".
Uma	vez	na	pasta	raiz,	digite	"notepad	index.html"	e	pressione	a	tecla	"Enter".	
Como	o	arquivo	"index.html"	ainda	não	existe	na	pasta,	uma	mensagem	perguntando	se	
deseja	criar	um	novo	arquivo	será	exibida.	Clique	em	"Sim"	e	o	Notepad	será	aberto	para	
que possamos editar o arquivo.
No	editor	de	texto,	digite	a	frase	"Hello,	World!"	e	salve	o	arquivo	pressionando	
"CTRL+S".	Feche	o	documento	e	navegue	até	a	pasta	raiz	do	projeto	no	Explorador	de	
Arquivos	do	Windows.	Clique	com	o	botão	direito	do	mouse	no	arquivo	"index.html"	e	
selecione	a	opção	"Abrir	com"	e	escolha	o	navegador	de	sua	preferência,	como	o	Google	
Chrome.
A estrutura básica de um documento HTML. Um arquivo HTML 
começa com a tag <html>, que é seguida pela tag <head>. O con-
teúdo do cabeçalho da página é definido entre as tags <head>. 
Em seguida, temos a tag <body>, que define o conteúdo principal 
da página. Todo o conteúdo que queremos exibir na página deve 
estar dentro das tags <body> e </body>.
IMPORTANTE
Pronto!	Criamos	nosso	primeiro	arquivo	HTML.	Agora	precisamos	publicar	a	pá-
gina,	o	que	pode	ser	feito	criando	um	GitHub	Pages	e	um	repositório	no	GitHub	com	o	
nome do seu projeto. Uma maneira fácil e gratuita de publicar uma página na internet, 
o	GitHub	Pages	é	uma	ótima	opção.	Ele	permite	criar	e	hospedar	um	site	diretamente	
do	seu	repositório	do	GitHub,	sem	a	necessidade	de	configurar	um	servidor	ou	comprar	
um domínio. Nesta seção, vamos mostrar passo a passo como publicar uma página no 
GitHub	Pages	a	partir	do	seu	repositório	do	GitHub.
Após	criar	sua	conta	no	GitHub	e	acessar	o	GitHub	Pages,	é	hora	de	criar	o	re-
positório	que	será	usado	para	hospedar	a	página.	O	nome	do	repositório	deve	seguir	o	
formato	<iniciaisseunome>.calculadorasimples.github.io,	onde	<iniciaisseunome>	deve	
ser	substituído	por	um	nome	de	sua	escolha.	Após	criar	o	repositório,	como	mostrado	
na	figura	2,	selecione	o	link	"Upload	files"	para	fazer	o	upload	dos	arquivos	da	sua	página.
21
Figura 2 – Tela repositório GitHub pages
Fonte: a autora.
Vamos	fazer	o	upload	do	arquivo	"index.html"	que	criamos	e	das	pastas	"script",	
"estilos"	e	"imagens".	Para	criar	essas	pastas	no	repositório,	basta	selecionar	a	opção	
"Criar	novo	arquivo"	(Add	file)	e	digitar	os	nomes	das	pastas	e	dos	arquivos,	como	"script/
script.js",	"estilos/estilo.css"	e	"imagens/icone.png".	Lembre-se	de	salvar	cada	arquivo	
em	branco	e	pressionar	o	botão	"Commit	changes"	no	final	da	página	para	enviar	as	al-
terações	para	o	repositório.	Dessa	forma,	o	seu	repositório	do	GitHub	ficará	semelhante	
à	tela	apresentada	na	figura	3.
Figura 3 – Tela do repositório do projeto com os arquivos incluídos no GitHub
Fonte: a autora.
22
Após concluirmos o upload da estrutura da página web, precisamos publicá-la 
para	que	possa	ser	acessada.	Para	isso,	selecione	a	opção	"Settings"	no	menu	localizado	
logo	após	o	nome	do	projeto	e,	na	seção	"Code	and	automation"	da	barra	lateral,	clique	
em	"Pages".	Em	seguida,	crie	as	GitHub	Pages	e	acesse	o	endereço	que	será	apresenta-
do	na	tela	para	visualizar	a	página	web	que	acabou	de	ser	criada.
Para criar um documento HTML bem estruturado e organizado, é importante seguir 
algumas boas práticas. Entre elas, destacam-se:
• Utilizar uma estrutura semântica: isso significa utilizar os elementos HTML ade-
quados para cada tipo de conteúdo. Dessa forma, além de facilitar a compreensão do 
código para outros desenvolvedores, também ajuda os mecanismos de busca a enten-
derem melhor o conteúdo da página.
• Utilizar comentários para organizar o código: inserir comentários no código é uma 
ótima maneira de identificar blocos de conteúdo e facilitar a leitura e manutenção do 
código.
• Utilizar indentação e espaços em branco: essa prática 
ajuda a tornar o código mais legível, organizado e fácil de ser 
editado.
• Validar o código: é importante sempre validar o código HTML 
para verificar se está seguindo os padrões estabelecidos e 
corrigir eventuais erros.
• Utilizar recursos externos: ao utilizar arquivos CSS, JavaS-
cript ou imagens externas, é importante especificar o cami-
nho absoluto ou relativo para garantir que os recursos sejam 
carregados corretamente.
Ao seguir essas boas práticas, é possível criar um documento 
HTML bem estruturado, organizado e eficiente.
BOAS PRÁTICAS
Parabéns!	Você	acaba	de	criar	o	seu	primeiro	documento	HTML,	armazená-lo	
no	repositório	na	nuvem	do	GitHub,	publicá-lo	e	testá-lo.	Agora,	é	hora	de	conhecer	a	
estrutura básica de um documento HTML tradicional. O código HTML é composto por 
elementos,	que	são	marcadores	utilizados	para	definir	o	tipo	de	conteúdo	que	será	exi-
bido na página.
4.2 ESTRUTURA BÁSICA DO DOCUMENTOS HTML
A estrutura básica dos documentos HTML independe da versão e é fundamen-
tal para a criação de qualquer página web. Todo documento HTML começa com a de-
claração do tipo de documento, que informa ao navegador qual é a versão do HTML 
utilizada	e	é	feita	com	a	tag	<!DOCTYPE>.	Em	seguida,	temos	a	tag	<html>,	que	envolve	
todo	o	conteúdo	da	página	e	indica	o	início	do	documento	HTML.	Dentro	da	tag	<html>,	
temos	as	tags	<head>	e	<body>.
23
1
2
3
4
5
6
7
8
9
<!DOCTYPE	…>
<html>
<head>
…
</head>
<body>
…
</body>
</html>
A	tag	<head>	é	onde	são	adicionadas	informações	sobre	a	página,	como	o	título,	
descrição,	palavras-chave	e	referências	a	arquivos	CSS	e	JavaScript.	Já	a	tag	<body>	é	
onde	o	conteúdo	da	página	é	colocado,	como	textos,	imagens,	vídeos,	tabelas,	formulá-
rios	e	outros	elementos	que	compõem	a	página.	No	quadro	1,	podemos	ver	um	exemplo	
de arquivo HTML que inclui a estrutura básica de um documento HTML tradicional, con-
tendo	os	elementos	estruturais	conhecidos	por tag HTML, o objetivo neste momento 
será	de	abordar	a	compreensão	da	finalidade	de	cada	linha	do	código	apresentado.
Quadro 1 – Trecho de código em HTML tradicional
Fonte: a autora.
Na	primeira	linha,	temos	o	<!DOCTYPE>	um	elemento	que	indica	ao	navegador	
qual	é	aversão	do	HTML	que	está	sendo	utilizada	na	página.	Ele	é	colocado	no	início	do	
documento	HTML,	antes	do	elemento	<html>.	Nas	primeiras	versões	do	HTML,	como	o	
HTML	4.01,	o	<!DOCTYPE>	era	necessário	para	especificar	a	DTD	(Document	Type	Defini-
tion)	que	o	documento	seguia,	o	que	garantia	que	o	navegador	renderizasse	o	conteúdo	
de acordo com as regras daquela versão do HTML.
Os	navegadores	ainda	entendem	o	Document	Type	Definition	(DTD)	declarado	no	
elemento	<!DOCTYPE>	do	HTML.	O	DTD	é	uma	declaração	que	define	a	sintaxe	do	docu-
mento	HTML	e	define	os	elementos	e	atributos	permitidos	no	documento.	Embora	o	uso	de	
DTD	seja	opcional	em	documentos	HTML5,	ele	ainda	é	amplamente	utilizado	em	versões	
anteriores	do	HTML.	No	quadro	2	está	um	exemplo	de	uso	do	elemento	<!DOCTYPE>	com	
um	DTD	(Document	Type	Definition)	especificado	para	a	versão	4.01	do	HTML.
Quadro 2 – Trecho de código em HTML tradicional
Fonte: a autora.
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE	HTML	PUBLIC	"-//W3C//DTD	HTML	4.01//EN"	
"http://www.w3.org/TR/html4/strict.dtd">
<html>
		<head>
				…
		</head>
		<body>
				….
				….
		</body>
</html>
24
Neste	exemplo,	estamos	utilizando	o	DTD	para	a	versão	4.01	do	HTML,	que	defi-
ne	as	regras	de	sintaxe	e	estruturação	para	o	documento.	O	DTD	é	especificado	na	de-
claração	do	elemento	<!DOCTYPE>,	onde	estamos	usando	a	referência	pública	do	DTD	e	
a	URL	para	seu	arquivo	de	definição.	Essa	declaração	ajuda	os	navegadores	a	interpretar	
corretamente	o	documento	HTML.	Se	o	DTD	não	for	especificado,	o	navegador	interpre-
tará	o	documento	HTML	de	acordo	com	suas	próprias	regras	e	configurações	internas,	o	
que	pode	levar	a	resultados	imprevisíveis.	É	importante	lembrar	que	o	uso	de	DTD	é	uma	
prática recomendada para garantir a validação do documento HTML e a compatibilidade 
entre os navegadores.
Com	o	HTML5,	o	<!DOCTYPE>	ainda	é	utilizado,	mas	a	sua	função	é	um	pouco	
diferente.	Ele	ainda	especifica	a	versão	do	HTML,	mas	a	DTD	não	é	mais	necessária.	Em	
vez	disso,	o	HTML5	define	um	conjunto	de	regras	que	o	navegador	deve	seguir	para	
renderizar	o	conteúdo,	 independentemente	da	DTD.	Portanto,	na	prática,	ao	utilizar	o	
<!DOCTYPE>	na	versão	HTML5,	estamos	apenas	indicando	qual	é	a	versão	do	HTML	que	
estamos	utilizando.	Um	exemplo	de	<!DOCTYPE>	para	o	HTML5	é:	<!DOCTYPE	html>.
A	instrução	“<!DOCTYPE	html>”	indica	para	o	navegador	que	o	documento	HTML	
deve	ser	renderizado	no	modo	de	padrões	completos	(ou	full	standards	mode),	que	se-
gue	as	especificações	do	HTML5.	Esse	modo	garante	que	o	documento	será	renderiza-
do	de	acordo	com	as	especificações	do	W3C,	sem	nenhuma	compatibilidade	com	ver-
sões anteriores do HTML. O modo de padrões completos é o modo padrão para a maioria 
dos navegadores modernos e é considerado o modo mais consistente e previsível para 
a	renderização	de	documentos	HTML.	
Caso	 não	 seja	 utilizado	 o	modo	 de	 padrão	 completo,	 o	 navegador	 entra	 em	
modo de compatibilidade (ou quirks mode, em inglês) é	um	modo	de	renderização	uti-
lizado	pelos	navegadores	para	renderizar	páginas	da	web	que	não	seguem	os	padrões	
atuais do HTML e CSS. Esse modo foi criado para garantir que os sites criados antes dos 
padrões	atuais	ainda	possam	ser	exibidos	corretamente	nos	navegadores	modernos,	
sem a necessidade de ajustes no código original.
No	entanto,	o	modo	quirks	pode	causar	problemas	de	compatibilidade	com	os	
navegadores modernos, principalmente em relação ao posicionamento de elementos e 
à formatação visual da página. Por isso, é recomendado que os desenvolvedores evitem 
o	uso	do	modo	quirks	e	sigam	as	normas	e	padrões	atuais	do	HTML	e	CSS.
Os	elementos	<html></html>,	presente	na	linha	2	e	10,	é	considerado	o	elemen-
to	raiz	de	um	documento	HTML,	uma	vez	que	todo	o	conteúdo	da	página	é	aninhado	
dentro	dele.	O	aninhamento,	por	sua	vez,	refere-se	à	inserção	de	elementos	HTML	den-
tro	de	outros	elementos	HTML	(MOZILLA.ORG,	2022g).
25
Nas	 linhas	3	e	5,	 encontramos	os	elementos	 <head>	 </head>,	 as	quais	 con-
têm	conteúdos	não	visíveis	para	o	usuário,	conhecidos	como	metadados.	O	elemento	
<head>	deve	estar	aninhado	dentro	do	elemento	<html>.	Entre	os	elementos	que	podem	
ser	utilizados	dentro	de	<head>	estão	<title>,	<base>,	<link>,	<style>,	<meta>,	<script>	e	
<noscript>	(MOZILLA.ORG,	2022g).
O	elemento	<title>,	presente	na	linha	4,	é	utilizado	para	indicar	o	título	da	página,	
que	aparecerá	na	aba	do	navegador	(MOZILLA.ORG,	2022g).
Entre	as	linhas	6	e	8,	encontramos	os	elementos	<body>	</body>,	que	contém	
todos os elementos HTML visuais que serão apresentados na página para os usuários, a 
partir	da	linha	7	(MOZILLA.ORG,	2022g).
No link https://developer.mozilla.org/pt-BR/docs/Web/HTML/
Quirks_Mode_and_Standards_Mode você pode aprender mais 
sobre os modos Quirks e Standards em HTML. Esse recurso 
é importante para entender como o navegador interpreta o 
código HTML e como isso pode afetar a exibição da página. É 
uma leitura útil para desenvolvedores web que desejam criar 
páginas web compatíveis e consistentes em diferentes navega-
dores e dispositivos.
DICA
Encerramos	aqui	o	terceiro	tópico	do	primeiro	tema	de	aprendizagem,	com	isso	
chegamos	ao	fim	do	nosso	primeiro	tema	de	aprendizagem,	vamos	relembrar	de	for-
ma	resumida	o	que	estudamos.	um	breve	histórico	da	evolução	da	 linguagem	HTML,	
conhecemos	uma	forma	de	estrutura	um	site,	criamos	um	documentos	“.html”	apenas	
com	texto	simples,	subimos	a	estrutura	do	site	no	repositório	GitHub	e	publicamos	a	
página	em	um	GitHub	Pages.	Vimos	também	os	elementos	principais	que	formam	a	
estrutura básica de um documento HTML. 
É	fundamental	destacar	que	a	estrutura	básica	dos	documentos	HTML	é	ape-
nas	o	ponto	de	partida	para	a	criação	de	uma	página	web	eficaz.	A	partir	dessa	estrutu-
ra,	é	possível	adicionar	uma	infinidade	de	elementos	e	personalizações	para	criar	uma	
experiência	única	e	agradável	para	o	usuário.	Com	esse	conhecimento	sólido,	podemos	
avançar	para	o	próximo	tema	de	aprendizagem,	onde	vamos	nos	aprofundar	ainda	mais	
na	linguagem	HTML	e	dar	início	aos	conteúdos	sobre	estilização	de	páginas	com	CSS.	
Com	isso,	estaremos	cada	vez	mais	preparados	para	criar	sites	de	qualidade	e	com	ex-
celente	experiência	para	os	usuários.
26
4.3 SINTAXE DO ELEMENTO HTML
Os elementos HTML são a base da construção de páginas web e podem ser 
utilizados	para	diversos	fins,	como	inserir	imagens,	texto,	parágrafos	e	outros	tipos	de	
conteúdo. Cada elemento é representado por uma tag, que indica ao navegador como o 
conteúdo	deve	ser	interpretado	e	exibido	ao	usuário.	
A	sintaxe	de	um	elemento	HTML	é	fundamental	para	que	a	página	seja	interpre-
tada	corretamente	pelo	navegador	e	exibida	de	forma	adequada	ao	usuário.	A	sintaxe	de	
um elemento HTML é um dos conceitos mais importantes para quem está aprendendo a 
desenvolver	páginas	web.	Ela	define	a	estrutura	básica	de	cada	elemento	e	é	composta	
por	tags	de	abertura	e	fechamento,	além	de	atributos.	Na	figura	4,	é	possível	visualizar	
um	exemplo	de	sintaxe	de	um	elemento	HTML.
Figura 4 – Elemento HTML
Fonte: https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics/
grumpy-cat-small.png. Acesso em: 11 dez. 2022.
As	tags	são	responsáveis	por	criar	e	definir	os	elementos	HTML	da	página,	com	
o	objetivo	de	organizar,	identificar	e	limitar	os	conteúdos	da	página.	Quando	falamos	em	
elementos HTML, estamos nos referindo às tags que os representam.
Existem	dois	 tipos	de	elementos	HTML:	 os	 elementos	 com	fechamento	e	 os	
elementos	de	autofechamento,	também	conhecidos	como	elementos	sem	fechamento	
automático.	O	elemento	HTML	com	fechamento	é	aquele	que	possui	conteúdo	e	é	con-
siderado o elemento HTML comum. Esse tipo de elemento apresenta uma tag de aber-
tura	(envolvida	por	parênteses	angulares	"<elemento>")	para	indicar	o	início	do	elemento	
e	uma	tag	de	fechamento	(inclui	a	barra	antes	do	nome	do	elemento)	para	indicar	o	fim	
do	elemento	após	o	conteúdo.	Na	figura	5,	apresentamos	um	exemplo	de	elemento	com	
fechamento.Os	elementos	HTML	de	auto	fechamento,	também	conhecidos	como	elementos	
vazios	ou	tags	void,	são	aqueles	que	não	possuem	conteúdo	interno.	Eles	são	represen-
tados	na	sintaxe	do	HTML	com	uma	barra	inclinada	após	o	nome	do	elemento,	como	
https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics/grumpy-cat-small.png
https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics/grumpy-cat-small.png
https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics/grumpy-cat-small.png
27
em	"<elemento	/>".	Esse	tipo	de	elemento	não	requer	um	elemento	de	fechamento	adi-
cional.	É	importante	ressaltar	que	a	utilização	correta	desses	elementos	é	fundamental	
para	garantir	a	validade	do	código	HTML	e	evitar	erros	de	sintaxe.
Ao	compreendermos	a	sintaxe	dos	elementos	HTML,	estamos	dando	um	impor-
tante passo na construção de uma página web. No entanto, para criar páginas web mais 
ricas em conteúdo e com funcionalidades mais avançadas, é necessário compreender 
também os atributos associados a esses elementos. Compreender os atributos nos per-
mite	adicionar	informações	adicionais	aos	elementos	HTML	e	personalizar	sua	apresen-
tação	e	comportamento.	Isso	pode	melhorar	significativamente	a	experiência	do	usuá-
rio, aumentando o engajamento com o conteúdo apresentado. Portanto, é fundamental 
dominar	os	atributos	HTML	para	criar	páginas	web	de	alta	qualidade	e	eficazes.
A	personalização	e	a	funcionalidade	de	um	site	dependem	dos	atributos	utiliza-
dos	em	cada	elemento.	Por	meio	dos	atributos,	é	possível	definir	características	como	
cor,	tamanho,	estilo,	 interatividade,	acessibilidade,	entre	outras.	Cada	elemento	HTML	
possui	atributos	específicos	que	são	próprios	dele,	mas	também	existem	atributos	glo-
bais que podem ser aplicados a qualquer elemento HTML, independentemente da ver-
são do HTML. 
Os atributos globais são uma ferramenta valiosa para os desenvolvedores web, 
pois	permitem	personalizar	e	adaptar	a	aparência	e	funcionalidade	dos	elementos	HTML	
de	maneira	mais	flexível.	Ao	adicionar	esses	atributos	a	elementos	específicos,	é	pos-
sível	criar	páginas	web	mais	dinâmicas	e	 interativas,	o	que	melhora	a	experiência	do	
usuário e fornece uma maior variedade de opções para apresentação e interação com o 
conteúdo	da	página.	Neste	contexto,	é	importante	destacar	os	elementos	globais	mais	
relevantes para a criação de páginas web, pois esses atributos são aplicáveis em todas 
as versões do HTML.
O atributo “class”	pode	ser	utilizado	em	todas	as	versões	do	HTML.	Ele	é	usado	
para	definir	uma	ou	mais	classes	para	um	elemento	HTML,	permitindo	que	o	estilo	seja	apli-
cado	a	esse	elemento	por	meio	de	folhas	de	estilo	CSS.	O	atributo	"class"	é	um	dos	atributos	
globais	do	HTML,	o	que	significa	que	pode	ser	utilizado	em	qualquer	elemento	HTML.
O atributo "id"	pode	ser	utilizado	em	todas	as	versões	do	HTML.	Ele	é	um	atri-
buto	global	que	é	usado	para	 identificar	um	elemento	exclusivamente	dentro	de	um	
documento	HTML.	Ele	é	usado	para	fins	de	script,	para	aplicação	de	estilos	em	CSS	e	
para	criação	de	âncoras	dentro	da	mesma	página.	No	entanto,	é	importante	lembrar	que	
o	valor	do	atributo	"id"	deve	ser	único	dentro	do	documento,	não	podendo	haver	mais	de	
um	elemento	com	o	mesmo	valor	de	"id".
O atributo "lang"	pode	ser	utilizado	em	todos	os	elementos	HTML	e	em	todas	
as	versões	do	HTML.	Ele	é	usado	para	especificar	o	 idioma	principal	do	conteúdo	de	
um elemento ou de um documento inteiro. Através desse atributo, os navegadores e 
28
mecanismos	de	busca	podem	entender	qual	 idioma	está	sendo	utilizado	na	página	e	
oferecer	uma	melhor	experiência	ao	usuário.	É	especialmente	útil	em	páginas	com	con-
teúdo	multilíngue,	pois	ajuda	os	navegadores	e	mecanismos	de	pesquisa	a	identificar	e	
o	atributo	title	pode	ser	utilizado	em	todos	os	elementos	HTML	e	em	todas	as	versões	
do HTML. 
O atributo “title”	 	é	utilizado	para	fornecer	 informações	adicionais	sobre	um	
elemento	HTML,	geralmente	exibido	em	uma	dica	de	ferramenta	quando	o	usuário	pas-
sa	o	mouse	sobre	o	elemento.	Ele	pode	ser	usado	em	elementos	como	links,	imagens,	
botões	e	outros	elementos	interativos.	O	suporte	para	o	atributo	“title”	é	amplo	e	con-
sistente em todos os principais navegadores.processar o idioma correto do conteúdo.
O atributo “style”	pode	ser	utilizado	em	todos	os	elementos	HTML	e	em	to-
das	as	versões	do	HTML.	Ele	permite	definir	estilos	de	formatação	para	um	elemento	
usando	CSS	embutido.	É	importante	notar	que	é	considerada	uma	boa	prática	separar	
a	estilização	do	HTML	e	utilizar	arquivos	externos	de	CSS	para	manter	a	consistência	e	
a manutenibilidade do código.
O uso excessivo ou desnecessário de atributos pode prejudicar 
a performance e acessibilidade da página. Portanto, é recomen-
dado que sejam utilizados somente os atributos necessários e 
que sejam escritos de forma clara e semântica, visando a melhor 
compreensão por parte dos usuários e ferramentas de leitura 
assistiva. Além disso, é importante lembrar que a escolha cor-
reta dos atributos pode contribuir para uma melhor indexação 
da página pelos mecanismos de busca, o que é essencial para a 
visibilidade do conteúdo na web.
IMPORTANTE
É	importante	notar	que	esses	atributos	podem	não	ser	mais	recomendados	ou	
suportados em versões mais recentes do HTML e é sempre recomendado usar as me-
lhores	práticas	de	codificação	e	se	manter	atualizado	com	as	especificações	do	HTML.	
Na	versão	HTML5	introduziu	novos	atributos	e	também	mudou	ou	removeu	alguns	dos	
atributos	das	versões	anteriores	do	HTML.	A	seguir,	alguns	exemplos	de	atributos	que	
foram substituídos ou removidos na versão HTML5:
•	 o	atributo	"bgcolor"	foi	substituído	pelo	uso	de	estilos	CSS;
•	 o	atributo	"border"	foi	substituído	pelo	uso	de	estilos	CSS;
•	 o	atributo	"align"	em	alguns	elementos	foi	substituído	pelo	uso	de	estilos	CSS;
•	 o	atributo	"valign"	em	alguns	elementos	foi	substituído	pelo	uso	de	estilos	CSS;
•	 o	atributo	"frame"	em	alguns	elementos	foi	removido;
•	 o	atributo	"rules"	em	alguns	elementos	foi	removido.
29
Também, vale lembrar que alguns desses atributos mencionados podem ser 
usados em navegadores mais antigos por questões de compatibilidade, mas em geral é 
recomendado	o	uso	de	estilos	CSS	para	definir	as	propriedades	visuais	dos	elementos.	A	
versão 5 do HTML incluiu vários novos atributos, alguns dos quais são:
• data-*:	permite	adicionar	dados	personalizados	a	um	elemento	HTML.
• placeholder:	fornece	um	texto	de	exemplo	dentro	de	um	campo	de	formulário	antes	
que o usuário insira algum dado.
• required:	 indica	 que	 um	 campo	 de	 formulário	 é	 obrigatório	 para	 ser	 preenchido	
antes do envio.
• autofocus:	define	que	um	campo	de	formulário	deve	receber	o	foco	automaticamente	
quando a página é carregada.
• contenteditable: permite que o usuário edite o conteúdo de um elemento HTML 
diretamente na página.
• draggable: indica se um elemento pode ser arrastado e solto em outra parte da página.
• aria-*:	adiciona	atributos	para	melhorar	a	acessibilidade	em	páginas	para	pessoas	
com	deficiência	visual	ou	auditiva.
Esses	 são	apenas	alguns	exemplos	de	atributos	adicionados	na	versão	5	do	
HTML. Lembrando que os elementos HTML são essenciais na construção de uma pági-
na	web	e	os	atributos	permitem	personalizá-la	de	maneira	flexível.	
As boas práticas para atributos de elementos HTML visam garantir a acessibilidade, a 
usabilidade e a manutenção do código da página web. Algumas dicas são:
• Use atributos semânticos: utilize atributos que descrevem claramente o conteúdo e 
a função do elemento, como "alt" para imagens e "title" para links.
• Evite atributos obsoletos: evite o uso de atributos que não são mais suportados pelo 
HTML atual, como o "bgcolor" e o "align".
• Utilize valores apropriados: utilize valores apropriados para os atributos, de acordo 
com o tipo de dado esperado. Por exemplo, o atributo "src" de uma imagem deve con-
ter a URL da imagem.
• Seja consistente:mantenha a consistência no uso dos atribu-
tos para elementos semelhantes, para facilitar a manutenção e 
a leitura do código.
• Priorize a acessibilidade: use atributos que facilitem a nave-
gação e a compreensão para pessoas com deficiência, como 
"aria-label" para descrever o propósito de um elemento para 
leitores de tela.
• Mantenha o código organizado: mantenha os atributos em 
ordem alfabética e em linhas separadas, para facilitar a leitura e 
a manutenção do código.
Ao seguir essas boas práticas, é possível criar páginas web aces-
síveis, de fácil manutenção e com um código limpo e organizado.
BOAS PRÁTICAS
30
Encerramos	nosso	primeiro	tema	de	aprendizagem,	foram	abordados	concei-
tos fundamentais sobre desenvolvimento front-end para web, incluindo a introdução 
à internet e seus componentes básicos, além da estruturação de páginas web com 
HTML	e	estilização	com	CSS.	Foi	explorado	também	o	framework	Bootstrap	5,	com	seus	
conceitos e fundamentos, bem como a criação de telas de cadastro de usuário e login, 
utilizando	suas	classes	e	mecanismos	de	validação.	Ao	longo	dos	tópicos,	foram	apre-
sentados	exemplos	práticos	e	casos	de	uso	para	consolidar	o	aprendizado.	Com	esses	
conhecimentos,	o	aluno	pode	dar	os	primeiros	passos	na	criação	de	páginas	web	res-
ponsivas e modernas. 
31
Neste tópico, você aprendeu:
•	 A	Web	é	um	conjunto	de	páginas	que	contém	hipertexto	e	hipermídias.	As	respostas	
que	o	servidor	web	envia	para	o	navegador	são	em	hipertexto.	Web	e	 internet	são	
coisas diferentes: Web é uma das formas que as informações podem ser transferidas 
na internet e a Internet é a rede mundial de computadores conectados que formam 
a teia mundial. 
•	 Os	sites	são	hospedados	no	servidor	web	de	um	provedor,	quando	digitamos	o	ende-
reço	no	navegador	o	servidor	DNS	realiza	a	tradução	para	o	endereço	IP	do	serviço.	
Para que seja possível acessar os sites é necessário registrar o domínio. 
•	 O	endereço	completo	de	acesso	ao	site	é	chamado	de	URL,	é	composto	por:	proto-
colo	de	comunicação	web	conhecido	por	HTTP	(para	páginas	sem	segurança),	sub-
domínio,	domínio	de	segundo	nível	(SLD),	domínio	de	alto	nível	(TLD)	que	no	Brasil	
normalmente	é	“.com.br”	e	o	caminho	composto	por	diretório	e	nome	do	arquivo.	
•	 Um	arquivo	HTML	é	um	documento	de	texto	que	contém	código	HTML	para	definir	a	
estrutura e conteúdo de uma página da web. Para criar um arquivo HTML, é necessá-
rio	usar	um	editor	de	texto,	como	o	Bloco	de	Notas	ou	o	Sublime	Text,	e	salvá-lo	com	
a	extensão	".html".	Para	publicar	a	página,	é	possível	usar	o	GitHub	Pages,	uma	plata-
forma	gratuita	que	permite	hospedar	um	site	diretamente	do	repositório	do	GitHub.
•	 A	estrutura	básica	do	documento	HTML	é	composta	por	três	elementos:	<!DOCTYPE>,	
<html>	e	<head>	e	<body>.	O	primeiro	elemento	indica	a	versão	do	HTML	utilizada	no	
documento,	enquanto	as	tags	<html>,	<head>	e	<body>	delimitam	o	conteúdo	da	pá-
gina e fornecem informações sobre a mesma.
• Elementos HTML são representados por tags, que indicam ao navegador como o 
conteúdo	deve	ser	interpretado	e	exibido.	Existem	dois	tipos	de	elementos:	com	fe-
chamento	e	de	autofechamento.	É	importante	utilizar	corretamente	os	elementos	de	
autofechamento	para	evitar	erros	de	sintaxe.
•	 Compreender	os	atributos	é	fundamental	para	personalizar	a	apresentação	e	com-
portamento	dos	elementos	HTML.	Atributos	globais,	como	"class",	 "id"	e	 "lang",	são	
ferramentas	valiosas	para	os	desenvolvedores	web	e	podem	ser	utilizados	em	qual-
quer elemento HTML.
RESUMO DO TÓPICO 1
32
AUTOATIVIDADE
1 Muito resumidamente, para mapear um domínio em um endereço IP, o navegador 
web	chama	um	procedimento	de	biblioteca	chamado	resolvedor,	passando	o	domí-
nio	como	um	parâmetro.	O	resolvedor	envia	uma	consulta	contendo	o	domínio	para	
um servidor DNS local, que procura o domínio e retorna uma resposta contendo o 
endereço	IP	para	o	resolvedor,	que	então	o	retorna	ao	chamador.	Sobre	a	tradução	
realizada	no	momento	que	acessamos	as	páginas	na	internet,	assinale	a	alternativa	
CORRETA:
a)	 (			)	 Quando	vamos	acessar	um	site	na	internet	normalmente	não	utilizamos	o	ende-
reço	IP,	utilizamos	o	que	chamamos	de	Identificador	Uniforme	de	Recursos	ou	
URI (Uniform Resource Identifier),	formada	por	duas	partes	principais:		protocolo	
e nome do site (domain name).
b)	 (			)	 O	nome	do	 site	 	 (domain name)	 é	 o	 endereço	completo	que	 identifica	o	 site,	
sendo	assim	não	é	necessário	realizar	a	tradução	para	o	endereço	IP,	pois	o	na-
vegador sabe o endereço do servidor web.
c)	 (			)	 Para	que	seja	possível	acessar	um	site	hospedado	em	um	servidor	web	é	neces-
sário	definir	um	endereço	numérico	IP	(Internet	Protocol)	para	o	serviço	web.	
d)	 (			)	 Podemos	comparar	esse	endereço	IP	com	o	nosso	CEP	é	o	DNS	é	como	os	cor-
reios, porque podemos ter um mesmo IP para várias máquinas, ou seja, não é 
único.
2	 “UNICEF	alerta	para	importância	do	projeto	de	lei	que	garante	acesso	à	internet	com	
fins	educacionais	a	alunos	e	professores	da	educação	básica	pública.	Com	a	pan-
demia, o País corre risco de regredir mais de duas décadas no acesso de meninas e 
meninos à educação. Investir em acesso à internet é fundamental para reverter esse 
quadro.”
Fonte:	https://www.unicef.org/brazil/comunicados-de-im-
prensa/unicef-alerta-para-	importancia-do-projeto-de-lei-
-que-garante-acesso-a-internet-com-fins-educacionais.	
Acesso	em:	15	dez.	2022.
Com	base	na	importância	da	internet	na	atualidade,	analise	as	sentenças	a	seguir:
I-	 Apesar	da	UNICEF	alertar	da	importância	do	projeto	de	lei,	atualmente	a	internet	é	
um	conjunto	de	páginas	de	hipertexto	apenas.  
33
II-	 A	rede	de	alcance	mundial	(World	Wide	Web	-	WWW),	também	chamada	de	Internet,	
foi proposta em 1969 por Tim Berners-Lee e Robert Cailliau, no CERN (European Or-
ganization	for	Nuclear	Research).	Originalmente,	a	web	não	foi	idealizada	para	com-
partilhamento	de	informações	e	com	o	tempo	foi	migrando	para	compartilhamento	
de dados apenas da educação.
III-	 Muitas	vezes	é	usada	a	palavra	web	para	se	referir	a	internet,	porém	é	importante	
saber que não são a mesma coisa. A Internet é um conjunto de redes de computa-
dores conectados entre si formando uma teia mundial e a web é uma das diversas 
formas que as informações podem ser transferidas pela internet. Os dois são impor-
tantes para a educação, pois sem internet a web não funciona.
Assinale a alternativa CORRETA:
a)	 (			)	 As	sentenças	I	e	II	estão	corretas.
b)	 (			)	 Somente	a	sentença	II	está	correta.
c)	 (			)	 As	sentenças	I	e	III	estão	corretas.
d)	 (			)	 Somente	a	sentença	III	está	correta.
3	 “No	HTML,	o	doctype	é	a	introdução	"<!DOCTYPE	html>"	encontrada	no	topo	de	todos	
os	documentos.	Seu	único	propósito	é	evitar	que	o	browser	mude	para	os	chamados	
“quirks	mode”	quando	renderizar	um	documento;	isto	é,	o	"<!DOCTYPE	html>"	doc-
type	garante	que	o	browser	faça	um	esforço	na	tentativa	de	seguir	as	especificações	
relevantes,	em	vez	de	usar	um	modo	de	renderização	diferente	e	que	seja	incompa-
tível	com	algumas	especificações.”
Fonte:	https://developer.mozilla.org/pt-BR/docs/Glossary/
Doctype.	Acesso	em:	15	dez.	2022.
De acordo com os princípios e as normativas elencadas no estatuto da ABEPRO, classi-
fique	V	para	as	sentenças	verdadeiras	e	F	para	as	falsas:
(			)	O	elemento	<!DOCTYPE	html>	não	é	uma	tag	do	HTML,	é	uma	instrução	para	o	na-
vegador	para	saber	com	a	versão	de	código	está	sendo	utilizada	e	entrar	no	modo	
standart.
(			)	Pode	ser	incluída	em	qualquer	linha	do	documento	HTML.
(			)	Nas	versões	anteriores	do	HTML,	essa	instrução	fazia	referência	a	definição	de	tipo	
de	documento	ou	DTD	(Document	Type	Definition),	que	especifica	as	regras	para	as	
linguagens	de	marcação	realizar	a	renderização	do	conteúdo	de	forma	correta.
Assinale a alternativa que apresenta a sequência CORRETA:
a)	 (			)	 V	–	F	–	F.
b)	 (			)	 V	–	F	–	V.
c)	 (			)	 F	–	V	–	F.
d)	 (			)	 F	–	F	–	V.
34
4	 Quando	 acessamos	 via	 navegador	 um	motor	 de	 busca,	 como	 o	 Google,	 estamosacessando	um	serviço	web	em	um	servidor	especializado	para	realizar	a	busca	de	
outras páginas na internet. Muitas pessoas confundem o motor de busca com o na-
vegador,	 pois	muitas	vezes	quando	abrimos	o	navegador	é	 a	primeira	página	que	
aparece é a página inicial de algum motor de busca. Disserte sobre o objetivo de se 
criar	uma	página	web	pensando	no	otimizador	de	mecanismo	de	busca	(SEO)	e	por-
que	é	importante	conhecer	o	funcionamento	do	motor	de	busca.
5	 Os	navegadores	são	os	clientes	que	fazem	solicitações	de	acesso	ao	servidores	web	
que	hospedam	uma	página	web,	já	aprendemos	que	os	sites	devem	ter	domínios	que	
apontam	para	o	endereço	IP	que	são	traduzidos	por	Servidor	DNS.	Neste	contexto,	
disserte	sobre	as	formas	de	disponibilizar	vários	sites	em	um	único	servidor	e	como	o	
navegador se comunica com servidor web.
35
HTML, FORMULÁRIOS E CSS: 
FUNDAMENTOS E ESTILIZAÇÃO
UNIDADE 1 TÓPICO 2 — 
1 INTRODUÇÃO 
Acadêmico,	no	segundo	tema	de	aprendizagem,	falaremos	sobre	a	estrutura	
dos	formulários	web.	Conheceremos	os	elementos	e	atributos	necessários	para	criação	
de um formulário, entendendo o funcionamento dos campos de entrada, atributos glo-
bais	e	controle	de	texto.	Para	consolidar	o	conteúdo,	colocaremos	em	prática	criando	
um	formulário	de	login	com	campos	de	entrada,	campos	de	seleção,	botão	e	links.
O estilo em cascata aplica formatação ao elemento HTML pai e também a todos 
os	elementos	filhos	aninhados.	Compreenderemos	a	linguagem	de	folha	de	estilo	CSS,	
a	sintaxe	básica	das	regras	CSS	e	colocaremos	em	prática	com	um	código	HTML	de	
exemplo	de	página	que	apresenta	uma	calculadora	simples.
Estudaremos	de	forma	breve	o	conteúdo	básico	sobre	o	framework	Bootstrap	5,	
para	criar	páginas	responsivas.	Compreenderemos	o	funcionamento	dos	layout	de	grid	
e	container,	utilizando	para	criar	um	formulário	de	cadastro.	Conheceremos	os	pontos	
de	 interrupções,	configuração	usada	para	dimensões	do	conteúdo	das	páginas	apre-
sentados	nos	dispositivos	ou	tamanho	diversos	de	telas.	Apresentaremos	as	principais	
classes	necessárias	para	estilização	de	formulários	de	exemplo.
Por	fim,	usaremos	o	 framework	Bootstrap	5,	 para	entender	o	 funcionamento	
dos	grupos	de	campos	de	entradas	e	a	união	de	objetos	independentes.	Conhecendo	
as principais classes necessárias para formatação de um formulário e campos para for-
necer	feedback	de	validação	de	campos	obrigatórios.
2 INTRODUÇÃO AOS ELEMENTOS HTML
Neste	tópico,	você	aprenderá	sobre	a	sintaxe	dos	elementos	HTML,	começando	
com a estrutura básica de um elemento e como os elementos HTML são usados para 
criar	conteúdo	na	web.	Abordaremos	os	elementos	de	cabeçalho,	organização	de	con-
teúdo, divisões e listas em HTML. Além disso, falaremos sobre a criação de conteúdo 
hipermídia	usando	elementos	de	âncora	e	imagens.	Com	essas	habilidades	básicas	em	
HTML,	você	poderá	criar	páginas	da	web	simples	e	funcionais.	Vamos	começar!
Neste	capítulo,	vamos	explorar	em	detalhes	como	escrever	corretamente	a	sin-
taxe	de	um	elemento	HTML,	incluindo	exemplos	práticos	e	dicas	úteis	para	garantir	que	
seu	código	seja	bem	formado	e	semântico.
36
2.1 ELEMENTO CABEÇALHO
O	elemento	<head>,	também	conhecido	como	elemento	cabeçalho	em	HTML,	
é fundamental para a estrutura de uma página web, pois contém informações cruciais 
para	o	seu	correto	funcionamento	e	apresentação	visual.	É	um	elemento	presente	em	
todas	as	versões	do	HTML	e	em	todas	as	páginas	web,	sendo	responsável	por	armazenar	
dados	como	o	título	da	página,	metadados,	links	para	arquivos	externos	e	informações	
importantes	para	mecanismos	de	busca.	A	correta	utilização	do	elemento	<head>	é	es-
sencial	para	a	construção	de	páginas	web	bem	estruturadas	e	com	bom	desempenho.
Dentro	 do	 elemento	 <head>,	 são	 incluídas	 diversas	 informações	 relevantes,	
como	o	título	da	página,	as	meta	tags	que	descrevem	o	conteúdo	da	página	e	auxiliam	
na	 indexação	pelos	motores	de	busca,	os	 links	para	arquivos	de	estilo	CSS	e	scripts	
JavaScript, entre outras. 
Por	conta	da	sua	importância,	é	fundamental	que	os	desenvolvedores	web	te-
nham	um	bom	conhecimento	sobre	o	elemento	<head>	e	saibam	como	utilizá-lo	corre-
tamente	a	fim	de	garantir	uma	experiência	de	navegação	adequada	para	os	usuários	e	
melhorar	a	visibilidade	da	página	nos	resultados	de	busca.	
Dentro	do	elemento	<head>,	é	comum	utilizar	vários	elementos	que	podem	ser	
utilizados	em	diferentes	versões	do	HTML.	Entre	os	elementos	mais	comuns,	indepen-
dentemente da versão do HTML, estão:
• <title>:	define	o	título	da	página	que	é	exibido	na	aba	do	navegador.
• <meta>:	define	informações	adicionais	sobre	a	página,	como	a	descrição,	palavras-
chave,	codificação	de	caracteres,	entre	outros.
• <link>:	define	a	relação	entre	a	página	atual	e	um	arquivo	externo,	como	um	arquivo	
CSS;
• <script>: define	um	script	em	JavaScript	para	ser	executado	na	página.
• <style>: define	um	estilo	CSS	para	ser	aplicado	na	página.
• <base>: define	uma	URL	base	para	todas	as	URLs	relativas	em	uma	página.
• <noscript>:	 define	um	conteúdo	alternativo	para	navegadores	que	não	suportam	
scripts ou que têm scripts desativados.
É	importante	destacar	que	nem	todos	os	elementos	mencionados	anteriormen-
te são obrigatórios e que outras tags também podem ser usadas dentro do elemento 
<head>.	Além	disso,	existem	diversas	práticas	recomendadas	para	a	utilização	efetiva	
do	<head>	em	uma	página	web.	Abaixo	estão	algumas	delas:
• Inclua um título descritivo: o título da página é um dos elementos mais importan-
tes	dentro	do	<head>,	pois	ele	é	exibido	nos	resultados	dos	mecanismos	de	busca	e	é	
muitas	vezes	a	primeira	coisa	que	os	usuários	veem	ao	acessar	a	página.	O	título	deve	
ser conciso e descritivo, informando ao usuário sobre o conteúdo da página.
37
• Utilize metadados relevantes: os metadados incluem informações adicionais so-
bre	a	página,	como	a	descrição	da	página	e	palavras-chave.	Essas	informações	aju-
dam	os	mecanismos	de	busca	a	entender	melhor	o	conteúdo	da	página	e	podem	
influenciar	na	classificação	da	página	nos	resultados	de	pesquisa.
• Referencie arquivos externos adequadamente:	as	folhas	de	estilo	e	scripts	são	
frequentemente	incluídos	em	páginas	web	através	de	referências	a	arquivos	exter-
nos.	 É	 importante	 garantir	 que	 esses	 arquivos	 sejam	 referenciados	 corretamente	
para	evitar	problemas	de	carregamento	da	página	ou	conflitos	de	código.
• Evite a inclusão de scripts desnecessários:	a	inclusão	de	scripts	no	<head>	pode	
retardar o carregamento da página. Portanto, é importante evitar a inclusão de scripts 
desnecessários	e,	quando	possível,	referenciá-los	no	final	da	página	ou	em	um	arqui-
vo	externo.
• Utilize o atributo "charset":	o	atributo	"charset"	especifica	o	conjunto	de	carac-
teres	utilizado	pelo	documento	HTML.	É	importante	incluí-lo	no	<head>	para	garantir	
que	o	conteúdo	da	página	seja	exibido	corretamente	em	todos	os	navegadores.
• Valide o código HTML: a validação do código HTML é importante para garantir que a 
página	seja	exibida	corretamente	em	todos	os	navegadores	e	dispositivos.	Existem	fer-
ramentas	online	gratuitas	que	podem	ajudar	a	verificar	se	o	código	HTML	está	correto.
• Atualize as informações do <head> regularmente: é importante manter as infor-
mações	do	<head>	atualizadas,	especialmente	se	houver	alterações	significativas	na	
página, como mudanças no conteúdo ou na estrutura.
Na	versão	HTML5,	foram	introduzidos	novos	elementos	que	podem	ser	utiliza-
dos	dentro	do	elemento	<head>,	tais	como:
• meta charset:	define	a	codificação	de	caracteres	utilizada	no	documento;
• meta name="viewport":	define	as	configurações	de	visualização	da	página	em	dis-
positivos móveis;
• link rel="stylesheet":	define	o	arquivo	de	estilo	externo	utilizado	na	página;
• script async e script defer:	definem	o	carregamento	assíncrono	ou	diferido	dos	
scripts	utilizados	na	página.
Esses	elementos	são	importantes	para	o	correto	funcionamento	e	visualização	
da	página,	além	de	contribuir	para	a	sua	otimização	e	desempenho.No	quadro	2,	apre-
sentamos	um	exemplo	de	código	em	HTML	que	ilustra	a	utilização	dos	elementos	<title>,	
<link>,	<meta>	e	<base>	dentro	do	<head>	de	uma	página	web.
Para	testar	o	código	em	seu	navegador,	você	pode	criar	um	arquivo	de	texto	
simples	utilizando	um	editor	de	texto	como	o	Bloco	de	Notas,	presente	em	sistemas	
operacionais	como	o	Windows	10.	Basta	copiar	e	colar	o	código	de	exemplo	no	arquivo	
de	texto,	salvar	com	a	extensão	".html"	e	abrir	o	arquivo	no	navegador	de	sua	preferên-
cia.	Assim,	você	poderá	visualizar	o	resultado	da	página	web	com	os	elementos	<title>	e	
<link>	corretamente	configurados.
38
Quadro 3 – Código em HTML 
Fonte: a autora.
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE	html>
<html>
<head>
<meta	charset="utf-8"	/>	//	Apenas	a	partir	da	versão	HTML5
<base	target="_blank"	href="file:///C:/Users/usuario/Documents/calculadorasimples.com/">
<title>	Calculadora	Simples	</title>
<link	rel=”icon”	type="image/png"	sizes="16x16"	href="imagens/calculadora.png">
</head>
<body>
<!–	tag	de	comentário:	incluir	elementos	que	serão	apresentados	na	tela	–>
</body>
</html>
O	código	do	quadro	3	é	um	exemplo	de	um	documento	HTML,	que	inclui	ele-
mentos	comuns	para	a	criação	de	uma	página	web.	A	primeira	linha	do	código	é	o	doc-
type	(tipo	de	documento),	que	indica	para	o	navegador	que	o	documento	segue	as	es-
pecificações	do	HTML	e	qual	versão	está	sendo	utilizada.	Neste	caso,	o	doctype	utilizado	
é a versão mais recente do HTML, que é a HTML5.
A	tag	<html>	é	o	elemento	principal	do	documento	e	envolve	todo	o	conteúdo	
da	página	web.	Dentro	do	elemento	<html>,	temos	o	elemento	<head>,	que	contém	in-
formações importantes sobre o documento, como o título da página, o ícone da página 
e	outras	informações	adicionais,	como	descrição	e	palavras-chave.
Dentro	do	elemento	<head>,	temos	a	tag	<meta	charset="utf-8"	/>,	que	é	uti-
lizada	para	definir	a	codificação	de	caracteres	utilizada	no	documento.	No	caso	deste	
exemplo,	a	codificação	escolhida	é	a	UTF-8,	que	é	capaz	de	representar	uma	grande	
variedade de caracteres de diferentes idiomas.
Também	dentro	do	elemento	<head>,	temos	o	elemento	<base	target="_blank"	
href="file:///C:/Users/usuario/Documents/calculadorasimples.com/">,	que	define	a	URL	
base	para	todas	as	URLs	relativas	no	documento.	Neste	exemplo,	a	URL	base	é	um	ar-
quivo local em um diretório do computador do usuário.
O	elemento	<title>	define	o	título	da	página,	que	é	exibido	na	aba	do	navegador	
quando a página é aberta. 
39
O	elemento	<link>	é	utilizado	para	definir	a	relação	entre	a	página	atual	e	um	ar-
quivo	externo,	como	um	arquivo	CSS.	Neste	caso,	o	atributo	"rel"	é	definido	como	"icon",	
indicando	que	o	arquivo	é	um	ícone	da	página,	o	atributo	"type"	define	o	tipo	de	arquivo	
como	imagem	PNG	e	o	atributo	"sizes"	define	o	tamanho	do	ícone.	O	atributo	"href"	es-
pecifica	o	caminho	do	arquivo	de	imagem.
A	última	seção	do	código	é	o	elemento	<body>,	que	contém	o	conteúdo	da	pági-
na	web	que	será	exibido	aos	usuários.	Neste	exemplo,	não	há	conteúdo	definido	dentro	
do	elemento	<body>,	apenas	um	comentário	para	fins	ilustrativos.
Para	testar	o	código	HTML	apresentado	no	quadro	3,	siga	os	passos	abaixo:
1.	 Crie	um	diretório	raiz	chamado	"calculadorasimples.com".
2.	Dentro	do	diretório	raiz,	crie	uma	pasta	chamada	"imagens".
3.	Acesse	o	site	https://www.flaticon.com/br/icone-gratis/calculadora_522506,	baixe	
o	ícone	de	tamanho	16px	e	salve-o	com	o	nome	"calculadora.png"	na	pasta	"imagens"	
criada no passo 2.
4.	Abra	um	novo	arquivo	de	texto,	cole	o	código	do	quadro	3	e	salve-o	com	o	nome	
"index.html"	na	pasta	raiz	criada	no	passo	1.
5.	 Verifique	o	caminho	completo	do	diretório	onde	você	salvou	o	seu	projeto	e	altere	o	
trecho	da	linha	5	que	vem	depois	de	"file:///"	no	quadro	3.	Por	exemplo,	se	o	diretório	
raiz	 for	 salvo	 em	 "C:/Users/usuario/Documents/calculadorasimples.com/",	 altere	 a	
linha	5	para:	"file:///C:/Users/usuario/Documents/calculadorasimples.com/".
6.	Clique	duas	vezes	no	arquivo	"index.html"	para	abri-lo	em	um	navegador	e	visualizar	
o resultado.
Para descobrir todos os tipos de links que podem ser utilizados 
no elemento <link>, uma boa opção é acessar o site https://
developer.mozilla.org/en-US/docs/Web/HTML/Link_types. 
Além disso, se você quer entender o que é um favicon, pode ler 
mais sobre o assunto no site https://developer.mozilla.org/en-
US/docs/Glossary/Favicon. 
Ambas as fontes são excelentes recursos para quem deseja se 
aprofundar na criação de páginas web e entender os detalhes 
técnicos envolvidos nesse processo.
DICA
40
O elemento <style> é utilizado para inclusão de estilos em uma 
página HTML e é estudado no momento do aprendizado sobre 
CSS. Já os elementos <script>, <noscript> e <template> são utili-
zados para trabalhar com scripts e comportamentos dinâmicos 
na página, e são estudados no momento em que estivermos 
aprendendo sobre JavaScript. Todos esses elementos são impor-
tantes para criar páginas web dinâmicas e interativas.
ESTUDOS FUTUROS
O	início	da	construção	de	uma	página	web	se	dá	pela	definição	de	seu	cabeça-
lho,	como	já	aprendemos	anteriormente.	Agora,	vamos	avançar	no	aprendizado	e	co-
nhecer	os	elementos	que	nos	permitem	organizar	os	conteúdos	das	páginas.	A	estru-
turação adequada dos conteúdos é essencial para a apresentação de uma página de 
forma clara e coesa, facilitando a compreensão do usuário e tornando a navegação mais 
agradável.
2.2 ELEMENTOS ESTRUTURAIS E ORGANIZADORES
Os	elementos	semânticos	são	utilizados	para	organizar	e	estruturar	o	conteúdo	
de	uma	página	HTML,	tornando-o	mais	claro	e	significativo	para	os	usuários	e	para	os	
motores	de	busca.	Cada	elemento	semântico	tem	um	propósito	específico	e	indica	ao	
navegador	o	significado	e	a	finalidade	do	conteúdo,	permitindo	que	ele	seja	exibido	de	
maneira	adequada	para	diferentes	dispositivos	e	aplicativos.	Além	disso,	a	utilização	de	
elementos	semânticos	facilita	a	manutenção	e	a	atualização	do	código	HTML,	tornan-
do-o mais legível e fácil de entender.
Ao	executar	o	código	HTML	apresentado	no	quadro	3	e	abrir	o	arquivo	"index.
html"	em	um	navegador,	a	página	exibida	será	semelhante	à	figura	5.	Nela,	é	possível	
notar	a	presença	da	imagem	do	favicon	na	aba	do	navegador	e	do	título	"Calculadora	
Simples"	na	parte	superior	da	janela	do	navegador.
Figura 5 – Aba do navegador quando executado o trecho de código do quadro 2
Fonte: a autora.
41
Um	elemento	semântico	em	HTML	é	um	tipo	de	tag	que	possui	um	significado	
e	uma	função	específica,	além	de	indicar	aos	navegadores	e	aos	mecanismos	de	busca	
qual é o propósito do conteúdo que está sendo apresentado na página. Esses elemen-
tos	são	importantes	porque	ajudam	a	organizar	o	conteúdo	do	site	de	uma	forma	lógica	
e	intuitiva,	facilitando	a	compreensão	do	usuário	e	melhorando	a	acessibilidade	e	usa-
bilidade do site.
Os	elementos	semânticos	também	ajudam	na	otimização	do	SEO	(Search	Engi-
ne	Optimization),	pois	indicam	aos	motores	de	busca	o	conteúdo	e	a	estrutura	do	site,	
o	que	pode	ajudar	a	melhorar	o	ranking	nas	pesquisas.	Além	disso,	a	utilização	desses	
elementos pode tornar o código HTML mais legível e fácil de ser mantido, especialmente 
quando	se	trata	de	projetos	grandes	e	complexos.
O	elemento	semântico	mais	conhecido	que	pode	ser	utilizado	em	todas	as	ver-
sões	do	HTML	é	o	<div>.	Embora	não	tenha	um	significado	semântico	específico,	ele	é	am-
plamente	utilizado	para	organizar	e	agrupar	conteúdo	em	seções	distintas	em	uma	página	
da	web.	Ele	pode	ser	estilizado	com	CSS	para	criar	diferentes	layouts	e	estilos	visuais.	O	
<div>	é	tão	versátil	que	é	frequentemente	referido	como	o	"canivete	suíço"	do	HTML.
Temos	também,	os	elementos	de	título	<h1>	até	<h6>	estão	disponíveis	em	to-
das	as	versões	do	HTML	e	podem	ser	utilizados	para	definir	os	títulos	e	subtítulos	das	
seções	da	página.	Esses	elementos	também	ajudam	a	organizar	o	conteúdo	de	uma	
forma	hierárquica	e	fornecem	informações	importantes	para	os	mecanismos	de	busca	
sobre a estruturada página.
As	versões	anteriores	do	HTML	não	possuíam	muitos	elementos	semânticos.	
Na	verdade,	a	maioria	dos	elementos	eram	utilizados	apenas	para	formatação	e	estilo,	
como	o	uso	de	tabelas	para	criar	layouts	e	atributos	de	estilo	em	linha.	Com	o	HTML5,	
houve	uma	grande	ênfase	na	semântica	e	na	estruturação	do	conteúdo.
Em	resumo,	a	grande	diferença	dos	elementos	semânticos	na	versão	HTML5	é	a	
ênfase na estruturação do conteúdo, permitindo que os desenvolvedores criem páginas 
web	mais	acessíveis,	compreensíveis	e	otimizadas	para	motores	de	busca.
Além	dos	elementos	<h*>	e	<div>,	que	são	amplamente	utilizado,	os	outros	cin-
co	elementos	semânticos	mais	comuns	em	todas	as	versões	do	HTML	são:
• <p>: utilizado	para	criar	parágrafos;
• <a>:	utilizado	para	criar	links;
• <img>:	utilizado	para	inserir	imagens;
• <ul> e <ol>:	utilizados	para	criar	listas	não	ordenadas	e	ordenadas,	respectivamente;
• <table>: utilizado	para	criar	tabelas.
• <form>:	utilizado	para	criar	formulários.
42
O	HTML5	introduziu	diversos	novos	elementos	semânticos	para	ajudar	a	orga-
nizar	o	conteúdo	de	uma	página	de	forma	mais	clara	e	significativa.	Alguns	exemplos	
desses novos elementos são:
• <header>: define	o	cabeçalho	da	página	ou	de	uma	seção;
• <nav>:	define	a	área	de	navegação	do	site;
• <article>:	define	um	conteúdo	independente	e	autossuficiente;
• <section>:	define	uma	seção	lógica	da	página;
• <aside>:	define	um	conteúdo	complementar	ou	relacionado	a	uma	seção;
• <footer>: define	o	rodapé	da	página	ou	de	uma	seção.
Esses	 elementos,	 juntamente	 com	 os	 elementos	 já	 existentes	 como	 <div>,	
<span>	e	<p>,	ajudam	a	criar	uma	estrutura	de	conteúdo	mais	clara	e	significativa,	o	que	
pode	melhorar	a	usabilidade	e	acessibilidade	da	página.
Quando	executarmos	os	códigos	do	quadro	em	ambas	as	versões,	poderemos	
ver	a	utilização	dos	elementos	HTML5	e	sua	comparação	com	o	uso	do	seu	antecessor.	
A	aparência	da	tela	que	o	navegador	irá	apresentar	será	semelhante	à	tela	apresentada	
na	figura	6.	A	principal	diferença	entre	os	códigos	é	a	forma	de	declaração	do	tipo	de	
documento	(doctype)	e	a	estruturação	dos	elementos	HTML.	
Figura 6 – Tela da página da calculadora
Fonte: a autora.
43
No	código	HTML	4.01,	a	declaração	do	doctype	é	explícita	e	utiliza	uma	sintaxe	
mais longa. Além disso, a estrutura do documento é baseada em divs, onde cada seção 
é	definida	com	uma	classe	para	aplicação	de	estilo.	
Já	no	código	HTML5,	a	declaração	do	doctype	é	mais	simples	e	direta.	A	estru-
tura	do	documento	é	baseada	em	elementos	semânticos,	como	<header>,	<nav>,	<sec-
tion>,	<article>,	<aside>,	<footer>,	etc.	Esses	elementos	permitem	que	o	conteúdo	seja	
estruturado	de	forma	mais	clara	e	semântica,	o	que	facilita	a	acessibilidade	e	indexação	
de conteúdo pelos motores de busca.
Além dos elementos estudados, foram utilizados caracteres especiais 
no quadro 3, como a string "&nbsp;" foi usada para adicionar espaços 
em branco quando necessário, e a string "&copy" foi utilizada para 
incluir o símbolo "©" de copyright no rodapé da página.
DICA
As tags de imagem e multimídia são elementos essenciais na construção de 
páginas web, permitindo a inclusão de elementos visuais e sonoros que aprimoram a 
experiência	do	usuário.	Além	dos	elementos	de	organização	e	divisão	já	vistos,	o	HTML	
oferece	várias	tags	para	exibição	de	imagens,	tais	como	a	<img>,	que	insere	imagens	
estáticas	na	página,	e	a	<picture>,	utilizada	para	definir	imagens	responsivas	com	vá-
rias	fontes,	escolhendo	a	melhor	opção	para	o	dispositivo	do	usuário.	Também	há	a	tag	
<svg>,	permitindo	a	exibição	de	gráficos	vetoriais	escaláveis.
44
Quadro 4 – Comparação código das versões antes e depois do HTML5
 HTML4 HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE	HTML	PUBLIC	"-//W3C//DTD	HTML	
4.01//EN"	 
"http://www.w3.org/TR/html4/strict.dtd">
<html>
				<head>
							….
</head
<body>
								<div	class="header">
												<h2>Título	Principal</div></h2>
								</div>
								<div	class="nav">
												<ul>
																<li><a	href="#">Home</a></li>
																<li><a	href="#">Sobre	nós</a></li>
																<li><a	href="#">Produtos</a></li>
																<li><a	href="#">Contato</a></li>
												</ul>
								</div>
								<div	class="aside">
												<h3>	AJUDA	</h1>
																<h4>	Como	usar	a	calculadora	</h4>
								</div>
								<div	class="section">
												<div	class="header">
																<h3>	CALCULADORA	</h3>
												</div>
												<div	class="article">
																<h4>	|_________|	</h4>
																<h4>	|	7	|	8	|	9	|	+|	</h4>
																<h4>	|	4	|	5	|	6	|	-&nbsp;|	</h4>
																<h4>	|	1	|	2	|	3	|	*|	</h4>
																<h4>	|	0	|	,&nbsp;&nbsp;|	=	|	/	|	</h4>
												</div>
												<div	class="footer">
																<h4>	Operações	Comuns:	</h4>
												</div>
								</div>
								<div	class="footer">
												<h5>Copyright	&copy	2023	</h5>
								</div>
				</body>
</html>
<!DOCTYPE	html>
<html>
				<head>
								…
				</head>
				<body>
								<header>
												<h2>Título	Principal	</h2>
								</header>
								<nav>
												<ul>
																<li><a	href="#">Home</a></li>
																<li><a	href="#">Sobre	nós</a></li>
																<li><a	href="#">Produtos</a></li>
																<li><a	href="#">Contato</a></li>
												</ul>
								</nav>
								<aside>
												<h3>	AJUDA	</h1>
																<h4>	Como	usar	a	calculadora	</h4>
								</aside>
								<section>
												<header>
																<h3>	CALCULADORA	</h3>
												</header>
												<article>
																<h4>	|_________|	</h4>
																<h4>	|	7	|	8	|	9	|	+|	</h4>
																<h4>	|	4	|	5	|	6	|	-&nbsp;|	</h4>
																<h4>	|	1	|	2	|	3	|	*|	</h4>
																<h4>	|	0	|	,&nbsp;&nbsp;|	=	|	/	|	</h4>
												</article>
												<footer>
																<h4>	Operações	Comuns:	</h4>
												</footer>
								</section>
								<footer>
												<h5>Copyright	&copy	2022	</h5>
								</footer>
				</body>
</html>
Fonte: a autora.
http://www.w3.org/TR/html4/strict.dtd
45
No	que	diz	 respeito	às	tags	de	multimídia	em	HTML,	destacam-se	a	<audio>,	
reproduzindo	arquivos	de	áudio,	como	música	ou	efeitos	sonoros,	e	a	<video>,	que	re-
produz	arquivos	de	vídeo,	como	filmes	ou	vídeos	curtos.	É	comum	utilizar	a	tag	<source>	
em	conjunto	com	<audio>	ou	<video>	para	especificar	diferentes	formatos	de	arquivo	e	
fornecer	fallbacks	para	navegadores	que	não	suportam	um	formato	específico.	Apenas	
a	tag	<video>	foi	introduzida	no	HTML5	e	não	é	suportada	em	versões	mais	antigas.	É	
importante	verificar	a	compatibilidade	das	tags	que	você	está	usando	com	a	versão	do	
HTML	em	que	você	está	trabalhando.
Vamos	 analisar	 um	 exemplo	 prático	 da	 utilização	 do	
elemento	<img>,	<div>,	<li>	em	HTML5,	que	pode	ser	visto	no	
Quadro	5.	Nesse	exemplo,	mostraremos	somente	a	parte	que	
está	alterada	em	relação	ao	código	HTML	do	Quadro	4.
Algumas boas práticas para utilizar os elementos estruturais e organizacionais do HTML 
de forma eficiente incluem:
• Utilizar corretamente os níveis de cabeçalho: use os elementos <h1> até <h6> 
para definir a hierarquia dos títulos na página. O título mais importante deve ser o 
<h1>, seguido pelo <h2> e assim por diante. Isso ajuda a organizar o conteúdo e facilita 
a leitura do usuário.
• Evitar o uso excessivo de elementos <div>: embora os elementos <div> sejam úteis 
para agrupar conteúdo, o uso excessivo pode tornar a estrutura do site confusa e difícil 
de entender. Em vez disso, use os elementos semânticos corretos para cada tipo de 
conteúdo.
• Incluir atributos alt em imagens: o atributo alt é usado para for-
necer uma descrição alternativa da imagem para usuários que uti-
lizam leitoresde tela. Certifique-se de incluir uma descrição clara e 
concisa para cada imagem.
• Manter a estrutura do HTML simples e organizada: evite o 
uso excessivo de tags aninhadas e mantenha a estrutura do có-
digo organizada. Isso ajuda a facilitar a manutenção do site 
no futuro.
• Validar o código HTML: verifique se o seu có-
digo HTML está correto e em conformidade com 
os padrões estabelecidos pela W3C. Isso ajuda a 
garantir que seu site seja compatível com diferentes 
navegadores e dispositivos.
Seguir essas boas práticas ajuda a tornar a estrutura e organiza-
ção do seu site mais clara, fácil de entender e acessível a todos os 
usuários.
BOAS PRÁTICAS
46
Quadro 5 – Código em HTML5
Fonte: a autora.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<section>
<header>
<h1>	|_________|	</h1>
</header>>
<article>
<img	src="imagens/sete.png"	height="50px">
<img	src="imagens/oito.png"	height="50px">
<img	src="imagens/nove.png"	height="50px">
<img	src="imagens/mais.png"	height="50px">
<br>
<img	src="imagens/quatro.png"	height="50px">
<img	src="imagens/cinco.png"	height="50px">
<img	src="imagens/seis.png"	height="50px">
<img	src="imagens/menos.png"	height="50px">
<br>
<img	src="imagens/um.png"	height="50px">
<img	src="imagens/dois.png"	height="50px">
<img	src="imagens/tres.png"	height="50px">
<img	src="imagens/multiplicacao.png"	height="50px">
<br>
<img	src="imagens/zero.png"	height="50px">
<img	src="imagens/virgula.png"	height="50px">
<img	src="imagens/igual.png"	height="50px">
<img	src="imagens/dividir.png"	height="50px">
<br>
</article>
<footer>
<h5>	Explicação	das	Operações	Comuns:	</h5>
<ol>
<li>	Soma	é	nun1+nun2	=	resultado	</li>
<li>	Subtração	é	nun1-num2	=	resultado	</li>
</ol>
</footer>
</section>
Após	executar	o	código	do	Quadro	5	no	navegador	para	testar	o	código	HTML,	
será	exibida	uma	tela	semelhante	à	apresentada	na	figura	7.
47
Figura 7 – Execução do código do quadro 5
Fonte: a autora.
Neste	tópico	aprendemos	sobre	os	principais	elementos	de	organização	e	di-
visão	em	HTML,	bem	como	sobre	a	 importância	das	tags	de	imagem	e	multimídia	na	
construção de páginas web. Com isso, podemos criar páginas mais estruturadas e ricas 
em conteúdo visual e sonoro.
2.3 MODELO DE OBJETOS DE DOCUMENTOS
O modelo de objetos de documentos (ou Document Object Model - DOM, em in-
glês)	é	uma	representação	hierárquica	ou	em	forma	de	árvore	de	um	documento	HTML.	
Ele permite a manipulação e interação com os elementos da página web através de uma 
abordagem	orientada	a	objetos,	tornando	possível	a	modificação	dinâmica	dos	elemen-
tos	através	da	linguagem	JavaScript	(MDN,	2023c).	Em	resumo,	o	DOM	é	uma	ferramen-
ta	essencial	para	a	construção	de	páginas	web	dinâmicas	e	interativas.
48
O DOM não deve ser confundido com o modelo de objetos do 
navegador (ou Browser Object Model - BOM, em inglês), que é 
usado para interagir com o próprio navegador, em vez de com 
o conteúdo da página. Alguns exemplos de recursos do BOM 
incluem os métodos console.log(), alert("") e prompt().
IMPORTANTE
O DOM é uma interface de programação de aplicativos (ou Application Program-
ming	Interface	-	API,	em	inglês)	porque	ele	fornece	uma	maneira	padronizada	para	que	
os desenvolvedores interajam com os elementos de uma página HTML ou XML por meio 
de um conjunto consistente de métodos e propriedades.
Esses	métodos	e	propriedades	são	definidos	na	especificação	do	DOM,	permi-
tindo	que	os	desenvolvedores	escrevam	código	que	possa	ser	executado	em	diferentes	
plataformas e navegadores da web. Como o DOM é uma API independente de lingua-
gem,	ele	pode	ser	usado	com	várias	linguagens	de	programação,	como	JavaScript,	Py-
thon	e	PHP.
Por	exemplo,	um	desenvolvedor	pode	usar	o	DOM	para	modificar	a	estrutura	e	
o conteúdo de uma página da web em tempo real, adicionando ou removendo elemen-
tos, alterando estilos e atributos, ou respondendo a eventos do usuário. Essa interação 
programática é possível porque o DOM representa a página da web como um conjunto 
de objetos, tornando-o mais fácil de manipular em um ambiente de programação. Para 
entender	melhor	o	funcionamento	do	DOM,	podemos	visualizar	um	trecho	de	código	
HTML no quadro 6.
Quadro 6 - Documento HTML
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE	html>
<html	lang="pt">
<head>
<title>Meu	Documento</title>
</head>
<body>
<h1>Meu	Cabeçalho</h1>
<a	href=”URL”>Meu	Link</a>
</body>
</html>
Fonte: a autora.
49
O documento HTML apresentado no quadro 6 pode ser representado pela árvo-
re DOM apresentada na Figura 8, que é composta por diversos objetos e dados funda-
mentais. Entre eles, destacam-se:
• Documento	 (ou	 Document,	 inglês):	 objeto	 raiz	 da	 representação	 do	 documento	
HTML, que contém todos os demais nós;
• Nós	(ou	Node,	inglês):	todos	os	objetos	do	documento	HTML,	incluindo	elementos,	
texto	e	comentários;
• Elemento	 (ou	Element,	 inglês):	 tipo	de	nó	que	 representa	 as	 tags	do	documento	
HTML,	como	<html>,	<body>	e	<div>;
• Atributos	(ou	Attribute,	inglês):	tipo	de	nó	que	representa	os	atributos	das	tags	do	
documento HTML, como id, class e src;
• Texto	(ou	Text,	inglês):	tipo	de	nó	que	representa	o	texto	que	fica	entre	as	tags	de	
abertura	e	fechamento,	como	o	conteúdo	de	um	parágrafo	ou	título.
Com o DOM, é possível acessar e manipular esses objetos e dados diretamente 
por meio de linguagens de programação, como JavaScript, facilitando a criação de apli-
cações	web	dinâmicas	e	interativas.
Figura 8 – Árvore DOM
Fonte: a autora.
50
Antes	de	prosseguirmos	com	o	conteúdo	sobre	formulários,	Para	ser	capaz	de	
realizar	alterações	nos	elementos	HTML	por	meio	do	JavaScript	e	validar	os	campos	
de	um	formulário,	é	fundamental	ter	um	conhecimento	sólido	dos	conceitos	 relacio-
nados ao DOM, que representa o documento HTML em forma de árvore de nós. Isso é 
fundamental para manipular e interagir com os elementos da página web, incluindo os 
widgets do formulário. 
Agora,	vamos	explorar	outro	importante	recurso	do	HTML:	os	formulários.	Eles	
são fundamentais para a interação do usuário com a página, permitindo que sejam en-
viadas	informações	para	o	servidor	e	realizadas	diversas	ações.	Acompanhe	o	próximo	
tópico	para	aprender	mais	sobre	como	utilizar	essa	ferramenta.
3 INTRODUÇÃO AOS FORMULÁRIOS WEB
Vamos	começar	a	explorar	uma	das	ferramentas	mais	poderosas	da	construção	
de páginas web: os formulários. Com eles, é possível criar uma interação direta entre o 
usuário e o site, permitindo o envio de informações e dados importantes. Neste tópico, 
veremos os requisitos básicos para a construção de formulários em HTML, sua estru-
tura,	estilo,	controles	e	entradas.	Além	disso,	aprenderemos	como	realizar	a	validação	e	
o	envio	dos	formulários	para	garantir	uma	experiência	de	uso	mais	fluida	e	segura	para	
os usuários.
Além disso, os formulários são uma das principais ferramentas para coletar in-
formações	 dos	 usuários	 em	um	website,	 seja	 para	 fins	 de	 pesquisa,	 cadastro,	 login,	
compra,	entre	outros.	Com	o	HTML,	é	possível	criar	formulários	personalizados	com	di-
versos	tipos	de	campos,	desde	campos	de	texto	simples	até	seletores	de	data,	botões	
de	rádio	e	caixas	de	seleção.	É	fundamental	que	os	desenvolvedores	web	tenham	co-
nhecimento	sobre	como	criar,	validar	e	enviar	formulários	em	HTML	para	proporcionar	
uma	experiência	positiva	aos	usuários	e	evitar	erros	e	problemas	no	envio	de	informa-
ções importantes.
3.1 ESTRUTURA DOS FORMULÁRIOS
Uma característica importante dos formulários em HTML é a capacidade de per-
mitir aos usuários inserir informações de maneira interativa e enviar esses dados para 
um	servidor.	Esses	dados	podem	ser	usados	para	diversos	fins,	como	criar	uma	conta,	
enviar uma mensagem ou efetuar uma compra online.
Para	construir	um	formulário	em	HTML,	é	necessário	utilizar	diversos	elemen-
tos,	como	campos	de	texto,	botões	e	menus.	Esses	elementos	são	agrupados	dentro	
da	tag	<form>,que	define	o	início	e	o	fim	do	formulário.	Entre	os	principais	atributos	do	
51
formulário,	destacam-se	o	method	e	o	action.	O	atributo	method	define	a	forma	como	
os dados serão enviados por meio do protocolo HTTP, enquanto o atributo action espe-
cifica	o	endereço	URL	para	onde	os	dados	serão	enviados.
No	Quadro	7,	é	possível	visualizar	a	estrutura	básica	de	um	formulário	em	HTML,	
que	pode	ser	expandida	e	personalizada	de	acordo	com	as	necessidades	do	desenvol-
vedor	e	do	usuário	final.
Quadro 7 – Esqueleto básico de um formulário HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE	html>
<html>
<head>
<meta	charset=utf-8	/>
<meta	name="viewport"	content="width=device-width,	initial-scale=1.0">
<title>Formulário</title>
</head>
<body>
<form	method=”#”	action=”#URL”>
… // Inserir os elementos de interação, também conhecidos como widgets.
</form>
</body>
</html>
Fonte: a autora.
O elemento HTML <form> não é o único elemento essencial na estrutura dos 
formulários.	Os	elementos	de	formulário	(ou		widgets,	em	inglês)	são	elementos	HTML	
que permitem aos usuários interagir com o formulário, inserindo, selecionando e en-
viando	informações.	Alguns	exemplos	de	dos	elementos	são:
• O elemento <input> é usado para criar vários tipos de controles de formulário, como 
caixas	de	texto,	caixas	de	seleção,	botões	de	rádio	e	mais.
• O elemento <select>	é	usado	para	criar	menus	suspensos	e	caixas	de	lista.
• O elemento <textarea> é	usado	para	criar	uma	entrada	de	texto	de	várias	linhas.
• O elemento <button> é usado para criar botões clicáveis.
• O elemento <label> é usado para fornecer um nome ou descrição para um controle 
de formulário.
Agora,	vamos	conhecer	alguns	dos	elementos	mais	comuns	utilizados	em	do-
cumentos HTML. Entender a função de cada elemento é fundamental para construir 
uma	página	web	funcional	e	estilizada	de	forma	adequada.	Com	o	conhecimento	desses	
elementos, é possível criar formulários, adicionar imagens, vídeos, áudio e muito mais. 
52
Além	 disso,	 esses	 elementos	 podem	 ser	 combinados	 e	 personalizados	 para	
criar	uma	experiência	única	para	o	usuário.	Vamos	mergulhar	nesse	universo	de	possi-
bilidades	e	aprimorar	ainda	mais	nossas	habilidades	em	HTML!
O	elemento	<input>	é	um	elemento	HTML	que	permite	ao	usuário	inserir	dados	
em	um	formulário	de	página	da	web.	É	utilizado	para	coletar	 informações	do	usuário,	
como	texto,	 senha,	 caixas	de	 seleção,	 botões	de	opção,	 arquivos	para	upload,	 entre	
outros.
O	elemento	<input>	possui	vários	atributos	que	ajudam	a	definir	o	tipo	de	en-
trada	e	as	opções	disponíveis	para	o	usuário.	Alguns	exemplos	de	tipos	de	entrada	são	
"text"	(para	texto),	"password"	(para	senhas),	"checkbox"	(para	caixas	de	seleção),	"radio"	
(para	botões	de	opção),	"file"	(para	upload	de	arquivos),	entre	outros.
É	importante	notar	que	o	elemento	<input>	não	possui	uma	tag	de	fechamento,	
pois	é	uma	tag	de	auto-fechamento,	ou	seja,	não	há	conteúdo	a	ser	exibido	entre	as	
tags	de	abertura	e	fechamento.	O	elemento	<input>	é	um	dos	elementos	mais	comuns	
usados em formulários de página da web e é fundamental para a coleta de informações 
e interação do usuário com o site.
Cada	elemento	de	formulário	em	HTML	possui	um	conjunto	específico	de	atri-
butos que determinam sua aparência e funcionalidade. Compreender como usar e per-
sonalizar	esses	widgets	é	essencial	para	criar	formulários	eficazes	e	amigáveis			ao	usu-
ário. Os atributos mais comuns incluem:
• name:	Define	o	nome	do	widget,	que	é	usado	para	identificá-lo	ao	enviar	os	dados	do	
formulário.
• id:	Define	um	identificador	único	para	o	widget,	que	é	usado	para	referenciar	o	widget	
em	scripts	e	folhas	de	estilo.
• value:	Define	o	valor	inicial	do	widget,	que	pode	ser	preenchido	automaticamente	ou	
ser	configurado	pelo	usuário.
• placeholder:	 Define	 o	 texto	 de	 espaço	 reservado	que	 aparece	dentro	 do	widget,	
dando ao usuário uma sugestão sobre o tipo de informação que deve ser inserido.
• required:	 Define	 se	 o	widget	 é	 obrigatório	 ou	 não,	 ou	 seja,	 se	 o	 usuário	 precisa	
preenchê-lo	para	enviar	o	formulário.
• disabled:	 Define	 se	 o	widget	 está	 desativado	 ou	não,	 ou	 seja,	 se	 o	 usuário	 pode	
interagir com ele ou não.
• readonly:	Define	se	o	widget	é	somente	leitura	ou	não,	ou	seja,	se	o	usuário	pode	ver	
e	copiar	o	valor,	mas	não	pode	modificá-lo.
• size:	Define	o	tamanho	do	widget	em	caracteres	ou	pixels,	dependendo	do	tipo	de	
widget.
53
• maxlength:	Define	o	número	máximo	de	caracteres	que	o	usuário	pode	inserir	no	
widget.
• min e max:	Definem	o	valor	mínimo	e	máximo	permitido	para	o	widget,	dependendo	
do tipo de widget.
• step:	Define	o	intervalo	entre	os	valores	permitidos,	para	widgets	de	tipo	numérico.
Esses são apenas alguns dos atributos mais comuns que podem ser usados em 
widgets	de	formulário	em	HTML.	A	escolha	e	a	combinação	adequada	desses	atributos	
podem	tornar	os	formulários	mais	eficientes	e	amigáveis			ao	usuário.
Para atribuir valores aos atributos de ID e name em elementos HTML, é recomendado 
seguir um padrão específico que evite o uso do camelCase. Em vez disso, o padrão mais 
recomendado é utilizar o sublinhado (_) como separador de palavras, escrevendo todas as 
letras em minúsculas, como em "nome_log".
A utilização desse padrão é importante porque ajuda a diferen-
ciar os nomes dos atributos dos nomes de classe do estilo CSS, 
que utilizam o traço (-) como separador de palavras. Isso torna o 
código HTML mais legível e fácil de entender, facilitando a manu-
tenção e o desenvolvimento do código, além de evitar conflitos 
de nomenclatura entre os elementos.
No entanto, é crucial lembrar que o nome do ID deve ser único 
dentro da página, para evitar problemas com a funcionalidade 
do código. Por isso, é necessário escolher um nome significativo 
e que não entre em conflito com outros IDs já existentes na 
página. Ao seguir essas práticas recomendadas, é possível es-
crever códigos HTML mais limpos e fáceis de trabalhar.
BOAS PRÁTICAS
O atributo "type" do elemento <input>	em	HTML	é	usado	para	definir	o	tipo	
de entrada que será aceita pelo campo de entrada. Ele é um atributo obrigatório para o 
elemento	e	seu	valor	pode	ser	um	dos	muitos	tipos	predefinidos	de	entrada,	como	"text",	
"password",	"number",	"email",	"date",	"checkbox",	"radio"	e	outros.
O tipo "text"	é	usado	para	campos	de	entrada	de	texto	simples,	enquanto	o	tipo	
"password"	é	usado	para	ocultar	os	caracteres	inseridos	pelo	usuário,	exibindo-os	como	
asteriscos	ou	pontos,	por	exemplo.	O	tipo	"number" é usado para campos de entrada 
numérica, enquanto o tipo "email" é usado para campos de entrada de endereços de 
e-mail,	verificando	se	o	endereço	inserido	está	no	formato	correto.
54
O tipo "checkbox"	 é	usado	para	criar	uma	caixa	de	seleção	que	permite	ao	
usuário selecionar uma ou mais opções de um conjunto de opções independentes. Já 
o tipo "radio"	é	usado	para	criar	uma	caixa	de	seleção	circular	que	permite	ao	usuário	
selecionar apenas uma opção entre um conjunto de opções dependentes.
O tipo "date"	é	usado	para	campos	de	entrada	de	data	e	hora,	enquanto	o	tipo	
"file" é usado para criar um botão de upload que permite ao usuário selecionar um ar-
quivo para ser enviado junto com o formulário.
Os atributos de cada tipo de entrada variam de acordo com o tipo selecionado, 
permitindo	personalizar	a	aparência	e	o	comportamento	do	campo	de	entrada.	É	 im-
portante	compreender	como	usar	esses	atributos	para	criar	formulários	mais	eficazes	e	
amigáveis			ao	usuário.	Os	elementos	<input>	são	considerados	um	dos	dos	mais	impor-
tantes e versáteis elementos de formulário em HTML. 
Para aprender mais sobre os elementos do formulário HTML, você 
pode consultar a documentação oficial da Mozilla sobre o elemento 
<input>. Este é um elemento fundamental para coletar informações 
do usuário em formulários da web. 
A documentação fornece uma visão geral completa dos atributos 
disponíveis para o elemento, bem como exemplos de uso e consi-derações de acessibilidade. O link para a documentação é: https://
developer.mozilla.org/pt-BR/docs/Web/HTML/Element/Input.
DICA
Nem todos os tipos de input são aceitos em todas as versões do HTML, alguns 
tipos de inputs foram adicionados em versões mais recentes do HTML e podem não ser 
suportados	em	navegadores	mais	antigos.	Por	exemplo,	o	tipo	"date"	foi	adicionado	no	
HTML5	e	pode	não	ser	suportado	em	navegadores	mais	antigos.	É	importante	verificar	a	
compatibilidade dos tipos de inputs com as versões do HTML e os navegadores em que 
o site será usado.
Os botões são elementos fundamentais em formulários e em interfaces de usu-
ário	em	geral.	Eles	permitem	aos	usuários	executarem	ações,	como	enviar	um	formulário,	
adicionar	um	item	ao	carrinho	de	compras,	realizar	uma	pesquisa,	entre	outras.	Existem	
vários tipos de botões em HTML, cada um com sua própria função e aparência. O atributo 
"type" do elemento <button>	é	usado	para	especificar	o	tipo	de	botão	que	será	criado.	
Existem	três	valores	possíveis	para	o	atributo	"type":	"submit",	"reset"	e	"button".
55
O valor "submit"	indica	que	o	botão	enviará	o	formulário	quando	clicado.	Ge-
ralmente,	esse	tipo	de	botão	é	usado	em	conjunto	com	o	elemento	"form"	para	enviar	
dados de formulário para um servidor.
O valor "reset" indica que o botão irá limpar todos os dados do formulário quan-
do clicado. Este tipo de botão é útil para permitir que o usuário limpe o formulário e 
comece	a	preenchê-lo	novamente.
O valor "button"	indica	que	o	botão	não	possui	uma	função	específica	definida.	
Esse tipo de botão pode ser usado em conjunto com JavaScript para adicionar uma 
funcionalidade	personalizada,	como	executar	uma	função	específica	quando	o	botão	é	
clicado.	O	atributo	"type"	do	elemento	"button"	é	opcional	e	se	não	for	especificado,	o	
valor	padrão	será	"submit".
Para melhorar a usabilidade e a experiência do usuário em uma página web, existem algu-
mas boas práticas que podem ser aplicadas aos botões. Algumas delas incluem:
• Escolha uma cor contrastante para o botão - Isso ajuda o botão a se destacar do 
resto do conteúdo na página e a torná-lo facilmente reconhecível para o usuário.
• Use um texto claro e objetivo - O texto no botão deve ser claro e conciso, e deve 
transmitir claramente a ação que será executada quando o botão for clicado.
• Evite botões excessivamente grandes ou pequenos - O tamanho do botão deve ser 
proporcional ao restante do conteúdo na página, para que ele não pareça despropor-
cionalmente grande ou pequeno.
• Use ícones quando apropriado - Ícones podem ajudar a melhorar a usabilidade dos 
botões, especialmente em dispositivos móveis.
• Alinhe os botões de maneira consistente - Ao colocar vários 
botões em uma página, é importante que eles estejam alinhados 
de maneira consistente para criar um design limpo e organizado.
• Posicione os botões em locais estratégicos - Coloque os bo-
tões em locais onde o usuário possa esperar encontrá-los, como 
na parte inferior da página ou próxima às opções de escolha.
• Faça testes de usabilidade - Antes de lançar um site, faça 
testes com usuários reais para garantir que os botões estejam 
bem posicionados e sejam facilmente utilizáveis.
BOAS PRÁTICAS
56
Para complementar seu conhecimento sobre os elementos do formulário em HTML, 
você pode consultar os seguintes links:
• <select>: https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/select
• <button> https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/button
• <textarea>: https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/textarea
• <form>: https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/form
Cada um desses elementos possui atributos e características específicas que podem 
ser úteis para tornar a experiência do usuário mais agradável e intuitiva ao preencher 
um formulário.
DICA
O	elemento	<select>	é	usado	em	HTML	para	criar	uma	caixa	de	seleção,	que	per-
mite	ao	usuário	escolher	uma	ou	várias	opções	de	um	conjunto	pré-definido	de	valores.	
É	especialmente	útil	para	formulários	que	necessitam	de	escolha	entre	várias	opções,	
como selecionar um estado civil, um país de origem, um produto em uma lista de op-
ções, entre outras possibilidades.
Para	criar	uma	caixa	de	seleção	com	o	elemento	"select",	é	necessário	definir	o	
elemento	pai	com	a	tag	<select>	e	adicionar	os	elementos	filhos	com	a	tag	<option>.	A	
tag	<option>	define	as	opções	disponíveis	para	escolha	na	caixa	de	seleção	e	deve	con-
ter	um	valor	atribuído	ao	atributo	"value"	e	um	texto	descritivo	para	o	usuário.
Aqui estão algumas boas práticas a serem consideradas ao usar o elemento 
select em um formulário HTML:
• Limite o número de opções: Selecione apenas as opções mais importantes e re-
levantes	para	os	usuários.	Se	houver	muitas	opções,	divida-as	em	várias	 listas	de	
seleção	ou	considere	o	uso	de	uma	caixa	de	pesquisa.
•	 Defina	um	valor	padrão:	Especifique	uma	opção	padrão	selecionada	na	lista.	Isso	
ajuda os usuários a entender o propósito da lista de seleção e evita erros de entrada 
de dados.
• Forneça uma etiqueta clara: Use uma etiqueta descritiva para a lista de seleção 
para ajudar os usuários a entender o que a lista representa e qual informação é espe-
rada deles.
• Organize as opções: Ordene as opções em ordem lógica ou alfabética para tornar a 
navegação fácil para o usuário.
• Evite o uso de barra de rolagem: Evite o uso de barras de rolagem (ou scrollbars, 
em	inglês)	na	lista	de	seleção.	Se	o	número	de	opções	for	grande,	divida	a	lista	em	
várias listas menores.
57
• Não use a lista de seleção para entrada de texto: Não use a lista de seleção para 
entrada	de	texto,	pois	é	mais	difícil	para	os	usuários	e	pode	ser	propenso	a	erros.
Seguindo essas boas práticas, é possível criar uma lista de seleção clara e fácil 
de usar para os usuários em seus formulários HTML.
Depois	de	adquirir	esse	conhecimento,	é	hora	de	colocá-lo	em	prática,	criando	
uma tela de login.
3.2 CRIANDO UM FORMULÁRIO DE LOGIN
Para	criar	uma	interface	de	login	amigável	e	eficiente,	vamos	utilizar	alguns	ele-
mentos	HTML	específicos.	Esses	elementos	serão	dispostos	em	conjunto	para	criar	o	
formulário	de	login	com	o	layout	apresentado	na	Figura	9.
Figura 9 – Layout tela de login
Fonte: a autora.
No	Quadro	8,	você	pode	ver	um	exemplo	de	formulário	HTML	que	implementa	
o	layout	apresentado	na	Figura	9.	É	importante	notar	que	este	é	apenas	um	exemplo	e	
que	o	código	pode	ser	adaptado	para	diferentes	finalidades	e	layouts,	dependendo	das	
necessidades do projeto.
58
Quadro 8 – Código HTML do formulário de login
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE	html>
<html>
<head>
<meta	charset=utf-8	/>
<meta	name="viewport"	content="width=device-width,	initial-scale=1.0">
<title>Formulário	de	Login</title>
</head>
<body>
<form	method="#"	action="#URL">
<h1>Login</h1>
<p>
<label	for="nome_login">Usuário:	</label>
<input	id="nome_login"	name="nome_login"	type="text"/>
</p>
<p>
<label	for="senha_login">Senha:	</label>
<input	id="senha_login"	name="senha_login"	type="password"/>
</p>
<p>
<label>
<input	type="checkbox"	name="manterlogado"	value="sim"	/>	Manter	logado
</label>
</p>
<p>	<button	type="submit"	>Login</button>	</p>
<p>	<a	href="#URL">Ainda	não	tem	conta?</a></p>
<p>	<a	href="#URL">Esqueceu	a	senha?</a></p>
</form>
</body>
</html>
Fonte: a autora.
Vamos analisar o código do Quadro 9 e entender os elementos de formulário 
HTML	que	foram	utilizados.	O	código	apresenta	um	formulário	de	login	básico	para	um	
site	ou	aplicativo.	O	formulário	tem	duas	caixas	de	texto	para	que	o	usuário	insira	seu	
nome	de	usuário	 e	 senha,	bem	como	uma	caixa	de	 seleção	que	permite	ao	usuário	
manter	sua	sessão	ativa	após	fazer	login.	Também	há	um	botão	"Login"	que	o	usuário	
pode clicar para enviar o formulário e efetuar o login.
O	elemento	<label>	é	usado	para	rotular	o	campo	de	entrada,	ajudando	o	usuário	
a	entender	o	que	precisa	serpreenchido.	O	elemento	<input>	é	o	campo	de	entrada	real,	
onde	o	usuário	pode	inserir	suas	informações	de	login,	como	nome	de	usuário	e	senha.	
59
Temos	dois	elementos	<a>	o	primeiro	que	será	utilizado	para	criar	um	link	para	
a	página	de	registro,	caso	o	usuário	ainda	não	tenha	uma	conta,	e	o	segundo	para	a	
página	de	reenvio	de	senha,	caso	o	usuário	tenha	esquecido	a	senha.	
Já	o	elemento	<button>	será	responsável	por	exibir	o	botão	de	login,	permitindo	
que o usuário envie seus dados e acesse o sistema.
O	"submit"	é	um	evento	que	ocorre	quando	um	formulário	HTML	é	enviado	pelo	
usuário.	Esse	evento	é	desencadeado	quando	o	usuário	clica	no	botão	"Enviar"	ou	pres-
sione	a	tecla	"Enter"	após	preencher	os	campos	do	formulário.	Quando	o	evento	"sub-
mit"	é	acionado,	o	navegador	reúne	todos	os	dados	do	formulário,	cria	uma	solicitação	
HTTP	e	envia	os	dados	para	o	servidor	especificado	no	atributo	"action"	do	formulário.
Normalmente, o servidor processa os dados do formulário e envia uma resposta 
de	 volta	 ao	 navegador,	 que	 pode	 ser	 exibida	 na	mesma	 página	 ou	 em	 uma	 página	
diferente,	 dependendo	 do	 que	 foi	 especificado	 no	 atributo	 "target"	 do	 formulário.	
É	 possível	 manipular	 o	 evento	 "submit"	 com	 JavaScript	 para	 validar	 os	 dados	 do	
formulário	antes	de	enviá-los	ao	servidor,	ou	para	executar	outras	ações	personalizadas	
no momento do envio.
Existem duas formas de utilizar o elemento <input>, como podemos ver no quadro 8. A 
primeira forma é usada na linha 12 com o elemento <label> e na linha 13 com o elemen-
to <input>. É importante observar que esses dois elementos estão relacionados pelo 
atributo "for" do elemento <label> e pelo atributo "id" do elemento <input>, ambos com 
o mesmo identificador "nome_login".
Já a segunda forma é utilizada nas linhas 20 e 21, onde o elemento 
<input> está aninhado dentro do elemento <label>. Nesse caso, o uso 
do atributo "for" no elemento <label> e do atributo "id" no elemento 
<input> é opcional.
Além disso, na linha 21 é utilizado o elemento <input> do tipo 
checkbox. 
Caso queira se aprofundar nesse assunto, é possível consultar 
mais informações, no link: https://developer.mozilla.org/pt-BR/
docs/Web/HTML/Element/Input/checkbox#valor.
IMPORTANTE
Existem	diversos	 atributos	 do	 elemento	 <form>	 que	 funcionam	 em	 todas	 as	
versões do HTML, alguns dos quais são:
60
• action:	especifica	o	URL	da	página	para	a	qual	os	dados	do	formulário	serão	envia-
dos após a submissão.
• method:	especifica	o	método	HTTP	utilizado	para	enviar	os	dados	do	formulário	(ge-
ralmente	GET	ou	POST).
• enctype:	específica	como	os	dados	do	formulário	são	codificados	antes	de	serem	
enviados	ao	servidor	 (por	exemplo,	application/x-www-form-urlencoded	ou	multi-
part/form-data).
Esses	são	apenas	alguns	exemplos	de	atributos	que	funcionam	em	todas	as	
versões	do	HTML,	mas	há	outros	atributos	que	também	podem	ser	usados,	dependendo	
da necessidade do desenvolvedor.
O atributo enctype funciona em todas as versões do HTML, mas a 
sintaxe pode variar um pouco. Na especificação do HTML 4, o valor 
padrão para o atributo “enctype” era “application/x-www-form-urlen-
coded”, enquanto na especificação do HTML 5 o valor padrão foi al-
terado para multipart/form-data.
O atributo "target" é utilizado para especificar o nome ou o ID do 
frame onde o resultado da submissão do formulário será exibido. 
Esse atributo foi introduzido na especificação do HTML 4 e continua 
a funcionar em todas as versões subsequentes do HTML, incluindo o 
HTML 5. Portanto, é um atributo que pode ser utilizado sem proble-
mas em qualquer versão do HTML.
IMPORTANTE
O	primeiro	tópico	do	segundo	tema	de	aprendizagem	foi	finalizado	com	suces-
so. De forma resumida, aprendemos sobre a estrutura de formulários, a representação 
da árvore DOM do documento HTML, os diferentes tipos de campos de entrada em for-
mulários,	os	atributos	globais	utilizados	em	formulários	e	como	controlar	a	entrada	de	
texto.	Com	esse	conhecimento,	 já	somos	capazes	de	estruturar	e	 incluir	campos	em	
nossos	formulários,	vamos	conhecer	como	enviar	os	dados	do	formulário.
3.3 VALIDAÇÃO DOS DADOS DO FORMULÁRIO
Quando	um	usuário	preenche	um	formulário	em	uma	página	web,	é	necessário	
que as informações contidas nele sejam enviadas para o servidor para que possam ser 
processadas	e	armazenadas.	Para	isso,	é	utilizado	o	método	de	envio	de	dados	de	for-
mulários	em	HTML.	Existem	dois	métodos	principais	para	enviar	dados	de	formulários:	o	
método	GET	e	o	método	POST.
61
O	atributo	“required”	é	utilizado	em	elementos	de	formulário	HTML,	como	inputs	
e	selects,	para	indicar	que	aquele	campo	é	obrigatório	e	deve	ser	preenchido	pelo	usu-
ário antes de submeter o formulário. Quando o atributo required é adicionado a um 
elemento, o navegador do usuário irá impedir a submissão do formulário caso o campo 
obrigatório	não	tenha	sido	preenchido.	Isso	ajuda	a	garantir	que	as	informações	neces-
sárias sejam fornecidas pelo usuário e evita que o servidor receba dados incompletos 
ou inválidos. 
Vamos	adicionar	o	atributo	required	nos	elementos	<input>	do	formulário	de	lo-
gin,	como	feito	nas	linhas	18	e	24	do	código,	no	Quadro	9,	para	indicar	que	esses	campos	
são obrigatórios e não podem ser enviados em branco.
Quadro 9 – Código HTML do formulário de login
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE	html>
<html>
<head>
<meta	charset=utf-8	/>
<meta	name="viewport"	content="width=device-width,	initial-scale=1.0">
<title>Formulário	de	Login</title>
</head>
<body>
<form	method="#"	action="#URL">
<h1>Login</h1>
<p>
<label	for="nome_login">Usuário:	</label>
<input	id="nome_login"	name="nome_login"	type="text"	required/>
</p>
<p>
<label	for="senha_login">Senha:	</label>
<input	id="senha_login"	name="senha_login"	type="password"	required/>
</p>
<p>
<label>
<input	type="checkbox"	name="manterlogado"	value="sim"	/>	Manter	logado
</label>
</p>
<p>	<button	type="submit"	>Login</button>	</p>
<p>	<a	href="#URL">Ainda	não	tem	conta?</a></p>
<p>	<a	href="#URL">Esqueceu	a	senha?</a></p>
</form>
</body>
</html>
Fonte: a autora.
62
Após	adicionar	o	atributo	"required"	nos	elementos	"input"	do	formulário,	clique	
no	botão	de	login	e	observe	as	mudanças	de	comportamento	no	preenchimento	dos	
campos	obrigatórios,	que	agora	não	podem	mais	ser	deixados	em	branco	ao	enviar	os	
dados	(Figura	10).
Figura 10 - Tela de login com campos obrigatórios
Fonte: a autora.
Agora,	vamos	criar	as	pastas	e	arquivos	restantes	para	finalizar	a	estrutura	do	
nosso	projeto.	A	organização	final	ficará	assim:
•	 login	(diretório	raiz	ou	nome	do	projeto)
◦ view
▪ cadastro.html
▪ home.html
▪ reset.html
◦	 index.html	(página	principal	que	tem	a	tela	de	login)
Serão abordados mais à frente diversos tópicos relacionados à pro-
gramação web, incluindo a criação de um arquivo JavaScript para 
validação de formulários, a obtenção de dados de um servidor e o 
armazenamento de dados do lado do cliente.
ESTUDOS FUTUROS
63
Vamos	agora	criar	a	página	“home.html”	com	o	código	do	Quadro	10,	para	po-
dermos	incluir	o	link	no	<form>	do	arquivo	“index.html	que”	é	nossa	tela	de	login.
Quadro 10 - Código da página home.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE	html>
<html>
 <head>
  <meta	charset=utf-8	/>
  <meta	name="viewport"	content="width=device-width,	initial-scale=1">
  <title>Tela	Principal</title>
 </head>
 <body>
  <div>
   	<h1>Login	realizado	com	sucesso!</h1>
  </div>
 </body>
</html>
Fonte: a autora.
Vamos	criar	agora	a	página	“reset.html”	utilizando	o	código	do	Quadro	11,	para	
que	possamos	incluir	o	link	do	botão	"Esqueci	minha	senha"	e	implementar	a	chamada	
do	arquivo	“cadastro.html”	incluindo	o	link	do	botão	"Ainda	não	tem	cadastro?".
Quadro 11 - Código da página reset.html
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE	html>
<html>
	<head>
		<meta	charset=utf-8	/>
		<meta	name="viewport"	content="width=device-width,initial-scale=1">
		<title>Recuperar	Senha</title>
	</head>
	<body>
		<div>
				<h1>Você	esqueceu	sua	Senha	?</h1>
		</div>
	</body>
</html>
Fonte: a autora.
64
Podemos	finalizar	o	nosso	projeto	incluindo	o	método	de	envio	dos	dados	para	o	
destino	e	o	link	da	página	de	destino.	Ao	clicar	no	botão	"Login",	os	dados	do	formulário	
serão	enviados	para	o	destino	especificado	no	atributo	 "action"	do	elemento	<form>,	
que	no	nosso	caso	é	"./home.html".	Esse	atributo	é	responsável	por	indicar	a	página	que	
receberá os dados do formulário após o envio.
É	importante	destacar	que,	na	web,	utilizamos	o	protocolo	HTTP	e	os	métodos	
são	as	formas	de	realizar	a	transmissão	dos	dados.	Os	métodos	mais	comuns	são	"GET"	
e	"POST".	Para	garantir	a	segurança	dos	dados	que	estão	sendo	enviados,	o	recomenda-
do	é	utilizar	o	método	"POST".	No	código	HTML	do	quadro	X,	utilizamos	o	atributo	"me-
thod"	para	indicar	o	método	de	envio	dos	dados.	No	nosso	exemplo,	estamos	utilizando	
o	método	"GET".	
Para compreensão, resumidamente a principal diferença entre os dois métodos 
é a visibilidade de como os dados serão enviados de uma janela para outra. No método 
GET	os	dados	serão	concatenados	na	forma	de	chave/valor	ao	final	da	URL	sendo	visível	
na barra de endereço do navegador. No método POST os dados são encapsulados no 
corpo	da	requisição,	sendo	assim	não	é	possível	visualizar	os	dados	na	barra	de	ende-
reço do navegador.
Quando a segurança dos dados que estão sendo enviados 
é essencial, é recomendado utilizar o método POST no pro-
tocolo HTTP. Para aprofundar o conhecimento sobre este 
protocolo, acesse o link: https://developer.mozilla.org/en-US/
docs/Web/HTTP/Basics_of_HTTP.
IMPORTANTE
65
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE	html>
<html>
<head>
<meta	charset=utf-8	/>
<meta	name="viewport"	content="width=device-width,	initial-scale=1.0">
<title>Formulário	de	Login</title>
</head>
<body>
<form	method="GET"	action="./home.html">
<h1>Login</h1>
<p>
<label	for="nome_login">Usuário:	</label>
<input	id="nome_login"	name="nome_login"	type="text"	required/>
</p>
<p>
<label	for="senha_login">Senha:	</label>
<input	id="senha_login"	name="senha_login"	type="password"	required/>
</p>
<p>
<label>
<input	type="checkbox"	name="manterlogado"	value="sim"	/>	Manter	logado
</label>
</p>
<p>	<button	type="submit"	>Login</button>	</p>
<p>	<a	href="./view/cadastro.html">Ainda	não	tem	conta?</a></p>
<p>	<a	href="./view/reset.html">Esqueceu	a	senha?</a></p>
</form>
</body>
</html>
Quadro 12 - Código HTML do formulário de login
Fonte: a autora.
Veja	no	quadro	12,	utilizamos	o	método	"GET",	para	isso	foi	 incluído	o	atributo	
method	para	enviar	o	formulário	HTML	da	tela	de	login	no	arquivo	index.html.	As	alte-
rações	de	direcionamento	para	a	página	 “view/home.html’	quando	acionado	o	botão	
login	estão	nas	linhas	13	e	o	direcionamento	para	página	de	“view/cadastro.html”	ao	ser	
acionado	o	link	“Ainda	não	tem	conta?”	e	“view/reset.html”	quando	for	acionado	o	link	
“Esqueceu	a	senha?”	pode	ser	visto	na	linha	37.
66
O local onde deve ser colocado a tag <script> deve ser analisado com 
cuidado, pois o navegador interpreta o JavaScript no momento que 
ele encontrar a tag <script>, deixando o carregamento da página 
mais lenta. Porém caso você precise do JS para montar a tela então 
seu script deve ficar no elemento <head>, caso contrário pode ficar 
no final do <body> antes da tag de fechamento </body>.
DICA
O	envio	de	dados	de	formulários	deve	ser	realizado	de	forma	segura	e	respon-
sável, assegurando a privacidade e segurança das informações dos usuários. Por isso, é 
importante	utilizar	métodos	de	envio	adequados,	como	o	POST,	e	também	criptografar	
os	dados.	Prosseguindo,	no	próximo	tópico,	aprenderemos	como	aplicar	estilos	aos	do-
cumentos e formulários HTML.
4 INTRODUÇÃO À ESTILIZAÇÃO
A	estilização	de	páginas	e	formulários	é	um	aspecto	crucial	na	criação	de	uma	
experiência	de	usuário	satisfatória.	Além	de	tornar	a	aparência	mais	atraente,	a	estiliza-
ção	também	pode	melhorar	a	usabilidade	dos	elementos	da	página,	como	a	legibilidade	
do	texto	e	a	organização	visual	dos	componentes.	
O CSS é uma ferramenta poderosa para alcançar esses objetivos, permitindo a 
definição	de	regras	de	estilo	que	podem	ser	aplicadas	de	forma	consistente	em	todo	o	
site	ou	formulário.	Com	um	conhecimento	sólido	em	CSS,	podemos	criar	 layouts	ele-
gantes	 e	 responsivos	 que	 se	 adaptam	a	 diferentes	 dispositivos	 e	 tamanhos	 de	 tela.	
Neste	tópico,	vamos	explorar	os	principais	conceitos	de	CSS	e	aprender	a	aplicá-los	de	
forma	eficaz	em	nossos	projetos	de	desenvolvimento	web.
4.1 SINTAXE DAS REGRAS DE ESTILO CSS
 A estrutura básica de uma regra CSS é composta por um seletor, seguido de 
chaves	e	uma	declaração	que	especifica	a	propriedade	e	o	valor	desejados.	O	seletor	
identifica	o	elemento	HTML	que	se	deseja	aplicar	a	estilização,	enquanto	a	declaração	
contém	a	propriedade	que	se	quer	modificar	e	o	valor	que	se	quer	atribuir	a	ela.	
Na	Figura	11,	temos	um	exemplo	de	regra	CSS	que	define	a	cor	do	elemento	<p>	
como	vermelho.	É	importante	ressaltar	que	uma	regra	CSS	pode	conter	uma	ou	mais	
declarações e que múltiplas regras podem ser aplicadas ao mesmo elemento HTML.
67
Figura 11 – Sintaxe das regras CSS
Fonte: https://bit.ly/42QFMg5. Acesso em: 14 dez. 2022.
A	 sintaxe	 de	 uma	 regra	CSS	 é	 composta	 por	 quatro	 elementos	 principais.	 O	
primeiro	elemento	é	o	seletor	(ou	selector,	em	inglês),	que	representa	o	elemento	HTML	
que	será	estilizado	com	a	regra	CSS.	Ele	pode	ser	um	nome	de	tag	HTML,	uma	classe,	
um ID ou até mesmo um seletor de atributos.
O	segundo	elemento	é	a	declaração	 (ou	declaration,	 inglês),	que	é	uma	 linha	
com	um	conjunto	de	regras	que	especificam	quais	as	propriedades	do	elemento	HTML	
serão	estilizadas	e	qual	o	valor	da	propriedade.
A	propriedade	(ou	property,	inglês)	é	o	terceiro	elemento	da	sintaxe	e	fica	do	lado	
esquerdo	do	valor	da	propriedade,	antes	dos	dois	pontos.	Ela	define	qual	a	propriedade	
do	elemento	HTML	que	se	deseja	afetar	com	a	 regra.	Existem	diversas	propriedades	
que	podem	ser	estilizadas,	como	cor,	tamanho,	fonte,	espaçamento	e	posicionamento,	
entre outras.
O	último	elemento	da	sintaxe	de	uma	regra	CSS	é	o	valor	da	propriedade	(ou	
property	value,	em	inglês),	que	fica	do	lado	direito	da	propriedade	após	os	dois	pontos.	
Ele	indica	a	escolha	da	aparência	da	propriedade	que	está	sendo	estilizada.	Por	exem-
plo,	se	a	propriedade	for	"cor"	e	o	valor	for	"vermelho",	o	texto	do	elemento	HTML	afetado	
será	exibido	na	cor	vermelha.
Com	esses	quatro	elementos,	podemos	definir	regras	CSS	para	personalizar	a	
aparência dos elementos HTML de nossas páginas e formulários.
Para	criar	regras	CSS	de	forma	correta,	é	importante	seguir	algumas	diretrizes	
básicas, tais como:
•	 Inserir	ponto	e	vírgula	(	;	)	ao	final	de	cada	declaração;
•	 Envolver	o	conjunto	de	declarações	com	chaves,	ou	seja,	utilizar	abre-chaves	(	{	)	para	
iniciar	o	conjunto	de	declarações	e	fecha-chaves	(	}	)	ao	final	da	última	declaração;
•	 Utilizar	vírgula	para	atribuir	o	mesmo	conjunto	de	regras	a	mais	de	um	seletor.
68
Ao criar regras de estilo CSS, é importante considerar alguns aspectos rele-
vantes,	como	a	propriedade	box-sizing,	que	pode	alterar	o	cálculo	do	tamanho	de	um	
elemento,	afetando	sua	largura,	altura	e	preenchimento.	
Além	disso,	é	possível	utilizar	diferentes	unidades	de	medida,	como	pixels,	em	e	
rem,	para	definir	valores	em	propriedades	CSS.	A	criação	de	animações	e	transições	em	
elementos	também	é	possível	por	meio	de	regras	de	estilo	CSS,	melhorando	a	experiên-
cia	do	usuário	e	deixando	a	página	mais	interativa.	
As	pseudo-classes	são	seletores	que	permitem	estilizar	elementos	em	um	es-
tado	específico,	como	quando	o	cursor	do	mouse	está	sobre	o	elemento	ou	quando	o	
elemento está sendo clicado. 
Por	fim,	as	variáveis	CSS	permitem	a	definição	de	valores	reutilizáveisem	uma	
página,	tornando	a	manutenção	do	código	mais	fácil	e	rápida.	Conhecendo	esses	as-
pectos	fundamentais	e	a	sintaxe	do	CSS,	é	possível	criar	regras	mais	complexas	e	apli-
cá-las	de	forma	eficiente	aos	elementos	HTML,	considerando	as	nuances	da	cascata,	
herança,	box	model,	posicionamento	e	responsividade.
Com	essas	informações	básicas	de	sintaxe	sobre	as	regras	de	estilo	CSS,	pode-
mos	avançar	no	aprendizado	e	entender	como	criar	regras	mais	complexas	e	aplicá-las	
de	forma	eficiente	aos	elementos	HTML,	utilizando	uma	variedade	de	seletores	de	ele-
mentos	e	considerando	as	diversas	nuances	do	CSS,	como	a	cascata,	herança,	box	mo-
del,	posicionamento	e	responsividade.	Com	esse	conhecimento,	podemos	criar	páginas	
web	atraentes	e	bem	estilizadas,	que	se	adaptam	a	diferentes	dispositivos	e	tamanhos	
de	tela,	proporcionando	uma	experiência	de	usuário	agradável	e	acessível.
4.2 SELETORES DE ELEMENTOS HTML EM CSS
Os	seletores	em	CSS	são	usados	para	 selecionar	 e	 estilizar	 elementos	HTML	
específicos	em	uma	página	web.	Eles	permitem	que	você	aplique	estilos	diferentes	para	
diferentes elementos, classes ou IDs. Os seletores são fundamentais para a criação de 
regras de estilo em CSS e são uma das ferramentas mais importantes para criar páginas 
web	atraentes	e	bem	estilizadas.	Nesta	seção,	vamos	explorar	os	diferentes	tipos	de	
seletores	em	CSS	e	como	usá-los	para	estilizar	seus	elementos	HTML.
69
Não existem seletores CSS específicos que funcionam apenas no 
HTML5. Os seletores CSS são independentes do tipo de documento 
HTML e podem ser aplicados em qualquer versão do HTML, incluindo 
o HTML5. No entanto, o HTML5 introduziu novos elementos, como 
o <nav>, <header>, <footer>, <article>, entre outros, que podem ser 
selecionados usando os seletores CSS padrão. Além disso, o HTML5 
também introduziu novos atributos, como data-*, que podem ser 
usados como seletor de atributos no CSS.
IMPORTANTE
Existem	diversos	tipos	de	seletores	em	CSS,	cada	um	com	sua	própria	função	e	
aplicação. Alguns dos principais tipos de seletores incluem:
• Seletores de elemento: selecionam elementos HTML com base no nome do ele-
mento,	como	"p"	para	parágrafos	ou	"h1"	para	títulos.
• Seletores de classe:	selecionam	elementos	HTML	que	possuem	um	valor	específico	
de	classe	atribuído,	indicado	com	um	ponto	seguido	do	nome	da	classe,	como	".des-
taque"	para	elementos	com	a	classe	"destaque".
• Seletores de ID:	selecionam	elementos	HTML	com	um	valor	específico	de	ID	atri-
buído,	indicado	com	um	hashtag	seguido	do	nome	do	ID,	como	"#cabecalho"	para	o	
elemento	com	o	ID	"cabecalho".
• Seletores de atributo: selecionam elementos HTML com base no valor de um atri-
buto	específico,	como	"[href]"	para	elementos	que	possuem	o	atributo	"href"	definido.
• Seletores de descendente: selecionam elementos HTML que são descendentes de 
outro	elemento,	indicado	com	um	espaço	entre	os	seletores,	como	"ul	li"	para	selecio-
nar	todos	os	elementos	"li"	que	são	descendentes	de	uma	lista	não	ordenada	"ul".
•	 Seletores	de	filho	direto:	selecionam	elementos	HTML	que	são	filhos	diretos	de	ou-
tro	elemento,	indicado	com	o	sinal	">"	entre	os	seletores,	como	"ul	>	li"	para	selecionar	
apenas	os	elementos	"li"	que	são	filhos	diretos	de	uma	lista	não	ordenada	"ul".
Esses	são	apenas	alguns	exemplos	de	seletores	em	CSS,	e	cada	um	tem	sua	
própria	sintaxe	e	aplicação	específica.	Combinar	diferentes	tipos	de	seletores	pode	ser	
uma	maneira	poderosa	de	 selecionar	 e	 estilizar	 elementos	HTML	de	 forma	precisa	 e	
eficiente.
70
O link https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors é 
uma ótima referência para quem deseja aprender mais sobre seletores em CSS. 
Lá você encontrará uma lista completa de todos os seletores dis-
poníveis, com exemplos de uso e explicações detalhadas. 
É importante lembrar que a escolha do seletor adequado pode 
facilitar muito a estilização dos elementos HTML, tornando o pro-
cesso mais eficiente e organizado. Portanto, é recomendável estu-
dar bem os seletores e praticar seu uso em projetos reais.
DICA
Uma	coisa	importante	a	mencionar	sobre	seletores	é	a	especificidade.	A	espe-
cificidade	dos	seletores	é	uma	das	características	mais	importantes	dos	seletores	em	
CSS.	É	usada	para	determinar	qual	regra	CSS	será	aplicada	a	um	elemento	específico	
quando	existem	várias	regras	que	podem	ser	aplicadas	ao	mesmo	elemento.
A	especificidade	é	 calculada	atribuindo	um	valor	 numérico	para	 cada	 seletor	
em	uma	regra,	sendo	que	quanto	mais	específico	for	um	seletor,	maior	será	o	seu	valor	
numérico.	Por	exemplo,	um	seletor	de	id	(#id)	tem	um	valor	numérico	maior	do	que	um	
seletor	de	classe	(.class),	e	um	seletor	de	elemento	(tag)	tem	o	menor	valor	numérico.
Quando várias regras se aplicam a um elemento, o navegador irá aplicar a regra 
com	a	especificidade	mais	alta.	Se	houver	mais	de	uma	regra	com	a	mesma	especifici-
dade, o navegador aplicará a regra que aparece por último no arquivo CSS.
A	especificidade	pode	ser	uma	fonte	comum	de	problemas	em	CSS,	especial-
mente	quando	desenvolvedores	 inexperientes	tentam	sobrescrever	estilos	existentes	
usando	seletores	muito	específicos	ou	!important.	É	importante	lembrar	que,	em	geral,	
é	melhor	evitar	o	uso	excessivo	de	!important	e,	em	vez	disso,	criar	uma	hierarquia	lógica	
de	seletores	para	evitar	conflitos.
O uso de "!important" pode ser considerado uma má prática de codificação, pois viola o 
princípio de cascata do CSS, que é a base para a organização e priorização das regras de 
estilo. Essa propriedade deve ser usada apenas quando outras alternativas, como a espe-
cificidade dos seletores, não funcionarem para alcançar o resultado desejado. Portanto, 
é importante manter um equilíbrio no uso da propriedade "!important" e seguir as boas 
práticas de codificação para tornar o código CSS mais legível e fácil de manter no futuro.
IMPORTANTE
71
A propriedade "!important" é uma declaração que pode ser adi-
cionada a uma regra CSS para indicar que aquela propriedade 
deve ter a mais alta prioridade e sobrepor todas as outras regras 
que possam estar afetando o mesmo elemento. Isso significa 
que, se uma propriedade tiver a declaração "!important", ela irá 
anular qualquer valor de propriedade atribuído anteriormente, 
independentemente da especificidade do seletor ou da ordem 
em que as regras são declaradas.
Ao	dominar	os	seletores	de	elementos	e	suas	especificidades,	você	terá	uma	
base sólida para aplicar as propriedades do CSS aos seus elementos HTML e criar pági-
nas	web	bem	estilizadas.	É	importante	lembrar	que	as	regras	CSS	também	são	afetadas	
por	outros	fatores,	como	a	ordem	em	que	as	regras	são	declaradas,	a	herança	de	pro-
priedades,	o	box	model	e	o	posicionamento	dos	elementos.	Portanto,	continue	apren-
dendo	e	aprimorando	seus	conhecimentos	em	CSS	para	se	tornar	um	desenvolvedor	
web	mais	habilidoso.
Vamos dar continuidade aos estudos em CSS e aprender sobre as proprieda-
des	CSS.	Com	elas,	podemos	adicionar	regras	específicas	aos	seletores	de	elementos,	
permitindo	criar	estilos	únicos	e	personalizados	para	nossas	páginas	web.	Combinar	os	
seletores	de	elementos	e	propriedades	do	CSS	permitirá	que	você	crie	layouts	atraentes	
e responsivos para seus projetos web.
4.3 VALORES DE PROPRIEDADES DO CSS
As	propriedades	do	CSS	são	usadas	para	estilizar	elementos	HTML	em	uma	pá-
gina	web.	Cada	propriedade	possui	um	valor	que	define	como	ela	deve	ser	aplicada	aos	
elementos	selecionados.	Os	valores	das	propriedades	do	CSS	podem	ser	definidos	em	
várias	unidades,	como	valores	numéricos,	palavras-chave,	cores,	entre	outros.	Entender	
e	saber	utilizar	corretamente	os	valores	das	propriedades	é	essencial	para	criar	estilos	
atraentes	e	funcionais	em	uma	página	web.	Neste	tópico,	vamos	explorar	os	diferentes	
tipos de valores que podem ser usados nas propriedades do CSS.
Existem	diversas	propriedades	CSS	disponíveis,	cada	uma	com	sua	função	es-
pecífica	 para	 estilizar	 elementos	HTML.	Algumas	 das	 propriedades	maisimportantes	
incluem:
• background: controla a cor, imagem de fundo e posição de um elemento.
• background-color:	definir	a	cor	de	fundo	de	um	elemento.
• color:	define	a	cor	do	texto	de	um	elemento.
• text-align: definir	o	alinhamento	horizontal	do	texto	dentro	de	um	elemento.
72
• line-height:	define	a	altura	da	linha	de	texto	em	relação	ao	tamanho	da	fonte.
• font-family:	especifica	a	fonte	utilizada	para	o	texto	do	elemento.
• font-size:	define	o	tamanho	da	fonte	do	elemento.
• margin: controla o espaço em torno do elemento.
• padding: controla o espaço interno do elemento.
• border: controla a aparência da borda do elemento.
• width:	especifica	a	largura	do	elemento.
• height:	especifica	a	altura	do	elemento.
• display:	controla	como	o	elemento	é	exibido	na	página	(por	exemplo,	se	é	exibido	
como	um	bloco,	como	um	inline	etc.).
Continuando nossa jornada pelas propriedades do CSS, é importante lembrar 
que	elas	são	essenciais	para	controlar	a	aparência	e	o	layout	de	uma	página	web.	Ex-
plorar	essas	propriedades	com	atenção	aos	detalhes	pode	levar	a	um	design	mais	sofis-
ticado e agradável. Vamos, então, aprofundar em algumas delas e entender como elas 
podem	ser	aplicadas	aos	elementos	HTML	para	criar	estilos	personalizados	para	nossas	
páginas web.
As propriedades do CSS são compatíveis com todas as versões do 
HTML, já que o CSS é uma linguagem separada que é usada para 
estilizar o HTML. No entanto, algumas propriedades podem ter 
suporte limitado em navegadores mais antigos. 
É importante considerar a compatibilidade com diferentes nave-
gadores ao escolher as propriedades do CSS para usar em um 
site. Existem várias ferramentas online disponíveis que podem 
ajudar a verificar a compatibilidade das propriedades do CSS com 
diferentes navegadores.
IMPORTANTE
A	propriedade	"background"	é	uma	das	mais	versáteis	do	CSS,	permitindo	a	de-
finição	de	diversas	características	visuais	para	o	plano	de	fundo	de	um	elemento	HTML,	
como	cor,	imagem,	gradiente,	repetição	e	posicionamento.	A	sintaxe	básica	da	proprie-
dade é: background: valor1 valor2 valor3 valor4 valor5;
Os valores aceitos para cada propriedade são:
• cor:	define	a	cor	de	fundo	do	elemento.	Pode	ser	especificada	como	um	nome	de	cor,	
um	valor	hexadecimal	ou	RGB.
• imagem: especifica	uma	imagem	para	ser	exibida	como	plano	de	fundo	do	elemento.
73
• repetição: determina como a imagem será repetida quando ela for menor do que o 
elemento	que	a	contém.	Os	valores	aceitos	incluem	"repeat"	(repete	a	imagem	nas	
direções	horizontal	e	vertical),	 "repeat-x"	 (repete	a	 imagem	apenas	na	direção	ho-
rizontal),	 "repeat-y"	 (repete	a	 imagem	apenas	na	direção	vertical)	 e	 "no-repeat"	 (a	
imagem	não	será	repetida).
• posição: define	onde	a	imagem	será	posicionada	dentro	do	elemento.	As	posições	
podem	ser	expressas	em	valores	absolutos	(como	"10px	20px")	ou	em	termos	de	pa-
lavras-chave	(como	"top	left"	ou	"center").
• tamanho:	determina	o	tamanho	da	imagem	de	fundo.	Pode	ser	especificado	como	
um	valor	absoluto	(como	"200px	100px")	ou	usando	palavras-chave	como	"auto"	ou	
"cover".
A	propriedade	"background"	também	suporta	a	definição	de	gradientes,	que	são	
transições	suaves	entre	duas	ou	mais	cores.	Existem	dois	tipos	de	gradientes	supor-
tados	pelo	CSS:	 linear	e	 radial.	A	propriedade	 "background"	é	bastante	útil	para	criar	
designs	interessantes	e	estilizados	em	uma	página	web.
Já	a	propriedade	“background-color”	é	usada	para	definir	a	cor	de	fundo	de	um	
elemento	em	CSS.	Ela	é	usada	para	definir	a	cor	de	fundo	de	um	elemento,	seja	ele	um	
bloco	de	texto,	uma	imagem,	uma	divião,	uma	tabela,	entre	outros.	A	sintaxe	básica	para	
definir	a	cor	de	fundo	de	um	elemento	é	a	seguinte: background-color: valor;.
O	valor	 pode	 ser	 especificado	 de	várias	maneiras,	 como	 o	 nome	 da	 cor	 (por	
exemplo,	 "red"	 para	vermelho),	 o	 código	 hexadecimal	 (por	 exemplo,	 "#FF0000"	 para	
vermelho)	ou	o	valor	RGB	(por	exemplo,	"rgb(255,	0,	0)"	para	vermelho).	A	propriedade	
background-color	 é	muito	 útil	 para	 criar	 fundos	 de	 cores	 personalizados	 e	 adicionar	
destaque aos elementos de uma página web.
A propriedade background-color é usada para definir apenas a cor de fundo de um ele-
mento, enquanto a propriedade background pode ser usada para definir várias caracte-
rísticas de fundo, como cor, imagem, posição, repetição e tamanho. 
Por exemplo, a declaração background: #FFFFFF url(bg.png) no-repeat top right; define a 
cor de fundo como branco (#FFFFFF), uma imagem de fundo chamada bg.png que não se 
repete (no-repeat) e a posição da imagem no canto superior direito (top right). 
Já a propriedade background-color define apenas a cor de fundo, igno-
rando as outras características definidas na propriedade background. 
É importante entender a diferença entre essas duas propriedades para 
criar estilos personalizados para seus elementos HTML.
IMPORTANTE
74
A	propriedade	“text-align”	é	usada	para	definir	o	alinhamento	horizontal	do	texto	
dentro de um elemento. Ela pode receber os seguintes valores:
• left:	alinha	o	texto	à	esquerda	do	elemento.
• right: alinha	o	texto	à	direita	do	elemento.
• center:	centraliza	o	texto	dentro	do	elemento.
• justify:	alinha	o	texto	justificado,	ou	seja,	estica	as	palavras	para	que	todas	as	linhas	
tenham	a	mesma	largura.
A	propriedade	“text-align”	pode	ser	aplicada	a	elementos	de	bloco,	como	pará-
grafos, títulos e divs. Ela também pode ser usada em conjunto com outras propriedades 
para	criar	layouts	complexos	e	responsivos.	Por	exemplo,	é	comum	usar	text-align:	cen-
ter	em	conjunto	com	margin:	0	auto	para	centralizar	um	elemento	na	página.
Vale	ressaltar	que	a	propriedade	text-align	afeta	apenas	o	alinhamento	horizon-
tal	do	texto.	Para	controlar	o	alinhamento	vertical,	é	necessário	usar	outras	proprieda-
des,	como	“line-height”,	“vertical-align”	ou	“display:flex”.
A	propriedade	“line-height”	define	a	altura	da	linha	de	texto	em	relação	ao	ta-
manho	da	fonte.	Ela	pode	ser	usada	para	controlar	o	espaçamento	entre	as	linhas	de	
texto	em	um	elemento,	como	um	parágrafo	ou	um	título.	
O	valor	da	propriedade	“line-height”	pode	ser	definido	de	várias	maneiras.	Ele	
pode	ser	especificado	como	um	valor	numérico,	que	será	multiplicado	pelo	tamanho	
da	fonte	atual	para	definir	a	altura	da	linha.	Também	pode	ser	especificado	como	uma	
porcentagem	do	tamanho	da	fonte,	ou	pode	ser	definido	como	um	valor	fixo	em	pixels	
ou outras unidades de medida.
Ao	ajustar	a	altura	da	linha,	a	propriedade	“line-height”	também	afeta	o	espaça-
mento	entre	as	letras	e	palavras	dentro	da	linha	de	texto.	Um	valor	muito	alto	pode	fazer	
com	que	o	texto	pareça	espalhado,	enquanto	um	valor	muito	baixo	pode	fazer	com	que	
as	linhas	de	texto	se	sobreponham,	dificultando	a	leitura.	Portanto,	é	importante	esco-
lher	um	valor	adequado	para	a	altura	da	linha	com	base	no	tamanho	e	estilo	da	fonte,	
bem como no tipo de conteúdo e na legibilidade desejada.
A	propriedade	“display”	do	CSS	determina	como	um	elemento	deve	ser	exibido	
na	página.	Existem	vários	valores	que	podem	ser	atribuídos	a	essa	propriedade,	cada	
um com sua própria funcionalidade. Alguns dos valores mais comuns da propriedade 
display	são:
75
• block:	o	elemento	é	exibido	como	um	bloco	e	ocupa	toda	a	 largura	disponível	no	
container	pai.	Qualquer	conteúdo	subsequente	é	exibido	em	uma	nova	linha	abaixo	
do	elemento.	Exemplos	de	elementos	que	possuem	o	valor	block	por	padrão	são	div,	
p	e	h1-h6.
• inline:	 o	 elemento	é	exibido	em	uma	 linha,	 ao	 lado	de	outros	elementos	 inline,	 e	
somente	ocupa	a	largura	necessária	para	exibir	seu	conteúdo.	Não	é	possível	definir	
altura	e	largura	em	elementos	com	valor	inline.	Exemplos	de	elementos	que	possuem	
o valor inline por padrão são span, a, strong e em.
• none: o	elemento	é	removido	do	fluxo	normal	da	página	e	não	é	exibido.	Essa	pro-
priedade pode ser usada para ocultar temporariamente um elemento ou criar um 
comportamento	de	alternância	entre	elementos	visíveis	e	invisíveis.
•	 flex:	o	elementoé	exibido	como	um	container	flexível,	permitindo	que	seus	filhos	
sejam	posicionados	de	forma	flexível.	Essa	propriedade	é	muito	útil	para	criar	layouts	
responsivos.
• grid:	o	elemento	é	exibido	como	um	container	de	grid,	permitindo	que	seus	filhos	
sejam	posicionados	em	células	de	um	grid	definido	pelo	desenvolvedor.	Assim	como	
flex,	é	uma	propriedade	muito	útil	para	criar	layouts	responsivos.
Esses	são	apenas	alguns	exemplos	de	valores	que	podem	ser	atribuídos	à	pro-
priedade	display.	Cada	um	desses	valores	tem	suas	próprias	implicações	no	layout	e	na	
aparência do elemento, por isso é importante entender como eles funcionam e quando 
devem ser usados.
Agora	que	já	vimos	várias	informações	sobre	as	propriedades	do	CSS,	é	hora	de	
colocar em prática o que aprendemos. Vamos aplicar o estilo CSS na nossa calculadora. 
Para	isso,	abra	um	editor	de	texto	simples,	como	o	bloco	de	notas	do	sistema	operacio-
nal Windows, e crie um novo arquivo. Em seguida, copie e cole o código do quadro 13 no 
arquivo	e	salve-o	com	extensão	".html".
Após salvar o arquivo, abra-o em um navegador para testar o código HTML e 
verificar	como	é	simples	aplicar	estilos	aos	elementos	HTML.	É	incrível	como	isso	pode	
mudar	completamente	a	aparência	de	uma	página	web!	Ao	executar	o	arquivo	no	nave-
gador, você verá a calculadora com o estilo aplicado, similar à tela da direita da Figura 12.
76
Quadro 13 - Código HTML do arquivo index.html estilizado
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE	html>
<html>
<head>
				<title>	Calculadora	</title>
<link	rel="stylesheet"	href="https://fonts.googleapis.com/css?family=Sofia">
				<style>
								body	{
												background-color:	rgba(0,	0,	0,	0.221);
												width:	100%;
 margin: 0 auto; 
												padding:	0	20px	20px	20px;
								}
				</style>
</head>
<body>
				<header	
style="font-size:	4rem;	
line-height:	0;	
letter-spacing: 
1px;text-align:	center;	
display:	flex;
height:	50px;	
padding-top:	20.15px;
background-color:	#db8e1a;">
								<h2	
style="	font-size:	2rem;	
flex:	1;	
text-transform:	uppercase;">
Título Principal 
</h2>
				</header>
 <nav 
	style="background-color:	#dd4646;
line-height:	1;
height:	1rem;
display:inline-block;	
padding:	1%;	
font-size:	3rem;
height:	inherit;	
width:	100%;
text-transform:	uppercase;				
color:	black;">
																<button	style="height:	2rem;width:	10rem;font-size:	1rem">Home</button>
77
44
45
46
47
48
49 
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
												<button	style="height:	2rem;width:	10rem;font-size:	1rem">Sobre</button>
												<button	style="height:	2rem;width:	10rem;font-size:	1rem">Produtos</button>
												<button	style="height:	2rem;width:	10rem;font-size:	1rem">Contato</button>
				</nav>
 <aside 
style="visibility:	hidden;
width:	100%;
letter-spacing:	1px;
text-align:	center;	
display:	block;
position:	fixed;
top: 0;
right:	0;
width:	180px;
height:	100%;
background-color:	#c4bce2;
padding:	50px;">
								<h3>	AJUDA	</h1>
												<h4>	Como	usar	a	calculadora	</h4>
				</aside>
 <section 
style="		background-color:	rgb(250,	250,	224);		
padding:	1rem;">
								<header
style="border:	0.5rem	outset	pink;
box-shadow:	0	0	0	1rem	skyblue;
	outline:	1rem	solid	skyblue;
border-radius:	5px;
margin: 2rem;
padding: 1rem;
outline-offset:	0.5rem;
max-width:	220px;
	background-color:	black;">
												<h2	style="color:white;text-align:	right;">1000,00	</h2>
								</header>
 <article 
style="max-width:	220px;
border:	0.5rem	outset	pink;
box-shadow:	0	0	0	1rem	skyblue;
outline:	1rem	solid	skyblue;
border-radius:	5px;
margin: 2rem;
padding: 1rem;
78
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
outline-offset:	0.5rem;">
												<img	src="imagens/sete.png"	height="50px">
												<img	src="imagens/oito.png"	height="50px">
												<img	src="imagens/nove.png"	height="50px">
												<img	src="imagens/mais.png"	height="50px">
												<br>
												<img	src="imagens/quatro.png"	height="50px">
												<img	src="imagens/cinco.png"	height="50px">
												<img	src="imagens/seis.png"	height="50px">
												<img	src="imagens/menos.png"	height="50px">
												<br>
												<img	src="imagens/um.png"	height="50px">
												<img	src="imagens/dois.png"	height="50px">
												<img	src="imagens/tres.png"	height="50px">
												<img	src="imagens/multiplicacao.png"	height="50px">
												<br>
												<img	src="imagens/zero.png"	height="50px">
												<img	src="imagens/virgula.png"	height="50px">
												<img	src="imagens/igual.png"	height="50px">
												<img	src="imagens/dividir.png"	height="50px">
												<br>
								</article>
 <footer 
style="font-size:	16px;
line-height:	2;
letter-spacing:	1px;
background-color:	#bfbaba;">
												<h5>	Explicação	das	Operações	Comuns:	</h5>
												<ol>
																<li>	Soma	é	nun1+nun2	=	resultado	</li>
																<li>	Subtração	é	nun1-num2	=	resultado	</li>
												</ol>
								</footer>
				</section>
 <footer 
style="font-size:	16px;
line-height:	2;
letter-spacing:	1px;
background-color:	#bfbaba;">
								<h5>Copyright	©	2022	-	autora	</h5>
				</footer>
</body>
</html>
Fonte: a autora.
79
O	elemento	<link>	é	uma	tag	HTML	que	permite	 incluir	 recursos	externos	em	
um	documento	HTML,	como	folhas	de	estilo,	ícones	de	favicon,	feeds	RSS,	arquivos	de	
script, e outros. Seu propósito principal é estabelecer a relação entre o documento atual 
e	o	recurso	externo,	usando	o	atributo	"rel".	Com	o	elemento	<link>,	é	possível	agregar	
funcionalidades	e	melhorar	o	design	da	página,	utilizando	recursos	que	estão	hospeda-
dos em outros servidores ou em outras partes do mesmo servidor.
Ao	utilizar	o	elemento	<link>	de	forma	correta	e	eficiente,	é	possível	melhorar	a	
qualidade	do	código	HTML	e	a	experiência	do	usuário	ao	navegar	na	página,	permitindo	
o carregamento rápido e a correta formatação de elementos visuais.
Figura 12 – Execução do código HTML do Quadro 9
Fonte: a autora.
Um	exemplo	prático	da	utilização	do	elemento	<link>	é	para	vincular	uma	folha	de	
estilo	CSS	ao	documento	HTML.	Para	isso,	basta	definir	o	valor	"stylesheet"	para	o	atributo	
"rel"	e	a	URL	da	folha	de	estilo	para	o	atributo	"href",	como	mostrado	no	exemplo	a	seguir:	
<link	rel="stylesheet"	href="style.css">.	Com	essa	simples	linha	de	código,	é	possível	aplicar	
estilos	visuais	à	página	e	personalizar	sua	aparência	de	forma	profissional.
O elemento <link> é suportado por todas as versões do HTML, incluindo 
as anteriores ao HTML5. É importante ressaltar que a utilização correta 
do elemento <link> pode melhorar significativamente o desempenho do 
site, já que permite que os recursos externos sejam carregados de forma 
assíncrona e em paralelo com o restante do conteúdo da página.
IMPORTANTE
80
O	elemento	<style>	é	usado	para	definir	um	estilo	em	linha	ou	incorporado	no	
documento	HTML.	Ele	é	usado	para	escrever	o	código	CSS,	que	é	responsável	por	defi-
nir	a	aparência	e	o	layout	de	uma	página	web.	O	elemento	<style>	é	colocado	dentro	da	
seção	<head>	do	documento	HTML	e	pode	incluir	uma	ou	várias	regras	de	estilo.
As	regras	de	estilo	são	escritas	usando	a	sintaxe	do	CSS	e	podem	ser	aplicadas	a	
qualquer elemento HTML na página. Cada regra de estilo é composta por um seletor, que 
identifica	os	elementos	aos	quais	a	regra	deve	ser	aplicada,	seguido	por	um	bloco	de	decla-
rações,	que	define	as	propriedades	CSS	que	devem	ser	aplicadas	a	esseselementos.
No	quadro	13,	o	código	utiliza	atributos	HTML	para	estilizar	os	elementos	da	pá-
gina,	sendo	utilizado	o	atributo	"style"	diretamente	nos	elementos	para	definir	as	regras	
das	propriedades	CSS,	o	que	é	conhecido	como	estilo	inline.	Podemos	notar	que	várias	
propriedades	são	aplicadas,	sendo	que	cada	uma	delas	tem	um	valor	específico	definido	
após	os	dois-pontos	(:).	É	importante	destacar	que	o	uso	excessivo	de	estilo	inline	pode	
tornar o código HTML confuso e difícil de ser mantido, sendo recomendado o uso de 
folhas	de	estilo	externas	para	separar	a	estrutura	do	conteúdo	e	facilitar	a	manutenção	
do código.
Style inline é uma forma de definir o estilo de um elemento HTML diretamente na tag, uti-
lizando o atributo "style". Por exemplo, podemos definir a cor do texto de um parágrafo 
como vermelha utilizando a seguinte tag: <p style="color: red;"> Este é um parágrafo com 
texto vermelho.</p>
No exemplo acima, o atributo "style" é utilizado para definir a cor do texto do parágrafo 
como vermelho. Esse método de definir estilos diretamente nos elementos é chamado 
de "style inline". No entanto, é importante lembrar que o uso excessivo de style inline 
pode tornar o código HTML confuso e difícil de gerenciar, tornando difícil a manutenção 
do site no futuro. Por isso, é recomendado que se utilize uma folha de estilo externa 
sempre que possível.
Uma boa prática é separar o estilo do atributo do elemento HTML, 
criando uma folha de estilo específica para o documento. Essa 
abordagem é mais recomendada, pois é mais flexível e fácil de 
gerenciar em comparação com a definição de estilos diretamen-
te nos elementos HTML. Além disso, também é possível subs-
tituir a folha de estilo padrão do Google ou de outro provedor, 
permitindo um controle completo sobre a aparência e a perso-
nalização de uma página web. 
Isso é feito por meio do uso da tag <link> na seção <head> 
do documento HTML, referenciando a folha de estilo deseja-
da com uma URL. Dessa forma, é possível centralizar todas 
as definições de estilo em um único local e aplicá-las a to-
dos os elementos HTML desejados.
ESTUDOS FUTUROS
81
Para	tornar	nosso	projeto	mais	organizado	e	facilitar	o	gerenciamento	do	códi-
go,	vamos	criar	uma	pasta	chamada	"styles"	dentro	do	diretório	raiz	"calculadorasimples.
com".	Dentro	dessa	pasta,	 criaremos	um	arquivo	chamado	 "styles.css"	utilizando	um	
editor	de	texto	simples,	como	o	bloco	de	notas	do	sistema	operacional	Windows.	Em	
seguida,	copiamos	as	regras	CSS	do	quadro	10	e	as	colamos	no	arquivo	"style.css",	que	
acabamos	de	criar.	É	importante	destacar	que	o	uso	de	uma	folha	de	estilo	separada	é	
uma	boa	prática	para	tornar	o	código	mais	flexível	e	fácil	de	gerenciar.
Na	folha	de	estilo	CSS	do	Quadro	14,	aplicamos	diversas	regras	de	estilo	a	di-
ferentes elementos HTML de uma página web. Algumas das regras aplicadas incluem:
•	 Definição	da	cor	de	fundo,	largura,	margem	e	preenchimento	do	corpo	da	página.
•	 Definição	da	fonte,	tamanho,	espaçamento	entre	 linhas,	espaçamento	entre	 letras,	
alinhamento	e	exibição	flexível	do	cabeçalho	da	página.
•	 Definição	da	cor	de	fundo,	espaçamento,	tamanho	da	fonte,	transformação	de	texto	
e altura do menu de navegação.
•	 Definição	da	altura,	visibilidade,	largura,	espaçamento	entre	letras,	alinhamento	e	po-
sição do painel lateral.
•	 Definição	da	cor	de	fundo,	espaçamento	e	cor	da	borda	dos	painéis,	assim	como	ta-
manho	da	borda,	borda	arredondada	e	distância	do	contorno.
•	 Definição	da	cor	de	fundo,	tamanho	do	espaçamento	e	linha	de	base	do	rodapé	da	
página.
Todas essas regras contribuem para a aparência e estilo visual geral da página 
web,	 e	 foram	cuidadosamente	 escolhidas	 para	 fornecer	 uma	 experiência	 de	 usuário	
agradável e coerente.
82
Quadro 14 - Arquivo de Folha de estilo
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
20
31
32
33
34
35
36
37
38
39
40
41
42
43
44
body	{
				background-color:	rgba(0,	0,	0,	0.221);
				width:	100%;
 margin: 0 auto; 
				padding:	0	20px	20px	20px;
}
header	{
				font-size:	4rem;	
				line-height:	0;	
				letter-spacing:	1px;
				text-align:	center;	
				display:	flex;
				height:	50px;	
				padding-top:	20.15px;
				background-color:	#db8e1a;
}
h2	{
				font-size:	2rem;	
				flex:	1;	
				text-transform:	uppercase;
}
nav	{
				background-color:	#dd4646;
				line-height:	1;
				height:	1rem;
				display:inline-block;	
				padding:	1%;	
				font-size:	3rem;
				height:	inherit;	
				width:	100%;
				text-transform:	uppercase;	
				color:	black;
}
nav	button	{
				height:	2rem;
				width:	10rem;
				font-size:	1rem;
}
aside	{
				visibility:	hidden;
				width:	100%;
				letter-spacing:	1px;
				text-align:	center;
83
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
				display:	block;
				position:	fixed;
 top: 0;
				right:	0;
				width:	180px;
				height:	100%;
				background-color:	#c4bce2;
				padding:	50px;
}
section	{
				background-color:	rgb(250,	250,	224);		
 padding: 1rem;
}
.Painel	{
				border:	0.5rem	outset	pink;
				box-shadow:	0	0	0	1rem	skyblue;
				outline:	1rem	solid	skyblue;
				border-radius:	5px;
 margin: 2rem;
 padding: 1rem;
				outline-offset:	0.5rem;
				max-width:	220px;
				background-color:	black;
}
.Painel	h2	{
				color:white;
				text-align:	right;
}
.PainelCentral{
				max-width:	220px;
				border:	0.5rem	outset	pink;
				box-shadow:	0	0	0	1rem	skyblue;
				outline:	1rem	solid	skyblue;
				border-radius:	5px;
 margin: 2rem;
 padding: 1rem;
				outline-offset:	0.5rem;
}
footer{
				font-size:	16px;
				line-height:	2;
				letter-spacing:	1px;
				background-color:	#bfbaba;
}
Fonte: a autora.
84
Na	folha	de	estilo	apresentada	no	Quadro	14	e	aplicado	no	código	html	do	Quadro	
15,	são	utilizados	diferentes	tipos	de	seletores	CSS	para	estilizar	os	elementos	HTML.
•	 O	seletor	"body"	é	utilizado	para	definir	estilos	que	serão	aplicados	ao	corpo	da	página	
HTML como um todo, como a cor de fundo e o espaçamento interno.
•	 O	seletor	"header"	é	utilizado	para	definir	estilos	específicos	para	o	cabeçalho	da	pá-
gina,	como	o	tamanho	da	fonte,	a	cor	de	fundo	e	o	espaçamento	interno.
•	 O	seletor	"h2"	é	utilizado	para	definir	estilos	específicos	para	todos	os	elementos	HTML	
do	tipo	"h2"	na	página,	como	o	tamanho	da	fonte,	a	flexibilidade	e	a	transformação	de	
texto.
•	 O	seletor	"nav"	é	utilizado	para	definir	estilos	específicos	para	a	barra	de	navegação,	
como	a	cor	de	fundo,	a	altura,	o	tamanho	da	fonte	e	a	transformação	de	texto.
•	 O	seletor	 "nav	button"	é	utilizado	para	definir	estilos	específicos	para	os	botões	da	
barra	de	navegação,	como	a	altura,	a	largura	e	o	tamanho	da	fonte.
•	 O	seletor	"aside"	é	utilizado	para	definir	estilos	específicos	para	a	barra	lateral,	como	a	
visibilidade,	o	alinhamento,	a	posição	e	a	cor	de	fundo.
•	 O	seletor	"section"	é	utilizado	para	definir	estilos	específicos	para	todas	as	seções	da	
página HTML, como a cor de fundo e o espaçamento interno.
•	 Os	seletores	".Painel"	e	".PainelCentral"	são	classes	CSS	que	foram	adicionadas	aos	
elementos	HTML	<div>	com	a	finalidade	de	estilizá-los	de	forma	específica,	como	a	
largura	máxima,	a	borda,	a	sombra	e	o	preenchimento.
•	 O	seletor	"footer"	é	utilizado	para	definir	estilos	específicos	para	o	rodapé	da	página,	
como	a	cor	de	fundo,	o	tamanho	da	fonte,	a	linha	de	altura	e	a	transformação	de	texto.
Esses	são	apenas	alguns	exemplos	de	seletores	CSS	que	podem	ser	utilizados	
para	estilizar	elementos	HTML	de	maneira	flexível	e	personalizada.
Quadro 15 - Código HTML do arquivo index.html estilizado
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE	html>
<html>
<head>
				<title>	Calculadora	</title>
				<link	rel="stylesheet"	href="styles/style.css"></head>
<body>
				<header>
								<h2>Título	Principal	</h2>
				</header>
				<nav>
												<button>Home</button>
												<button>Sobre</button>
												<button>Produtos</button>
												<button>Contato</button>
85
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
				</nav>
				<aside>
								<h3>	AJUDA	</h1>
												<h4>	Como	usar	a	calculadora	</h4>
				</aside>
				<section>
								<header	class="Painel">
												<h2>1000,00	</h2>
								</header>
								<article	class="PainelCentral">
												<img	src="imagens/sete.png"	height="50px">
												<img	src="imagens/oito.png"	height="50px">
												<img	src="imagens/nove.png"	height="50px">
												<img	src="imagens/mais.png"	height="50px">
												<br>
												<img	src="imagens/quatro.png"	height="50px">
												<img	src="imagens/cinco.png"	height="50px">
												<img	src="imagens/seis.png"	height="50px">
												<img	src="imagens/menos.png"	height="50px">
												<br>
												<img	src="imagens/um.png"	height="50px">
												<img	src="imagens/dois.png"	height="50px">
												<img	src="imagens/tres.png"	height="50px">
												<img	src="imagens/multiplicacao.png"	height="50px">
												<br>
												<img	src="imagens/zero.png"	height="50px">
												<img	src="imagens/virgula.png"	height="50px">
												<img	src="imagens/igual.png"	height="50px">
												<img	src="imagens/dividir.png"	height="50px">
												<br>
								</article>
								<footer>
												<h5>	Explicação	das	Operações	Comuns:	</h5>
												<ol>
																<li>	Soma	é	nun1+nun2	=	resultado	</li>
																<li>	Subtração	é	nun1-num2	=	resultado	</li>
												</ol>
								</footer>
				</section>
				<footer>
								<h5>Copyright	©	2022	-	autora	</h5>
				</footer>
</body>
</html>
Fonte: a autora.
86
Concluímos nossa introdução ao CSS, essencial para termos uma base sólida 
antes	de	começarmos	a	trabalhar	com	o	framework	Bootstrap	5.	Ao	compreender	as	
principais	propriedades	e	seletores	do	CSS,	poderemos	utilizar	as	funcionalidades	ofe-
recidas	pelo	Bootstrap	de	forma	mais	eficiente	e	entendermos	melhor	como	funcionam	
os	estilos	pré-definidos	que	serão	utilizados	em	nosso	projeto.	Com	o	conhecimento	
adquirido,	estamos	prontos	para	explorar	as	vantagens	do	Bootstrap	5	e	criar	páginas	
web	mais	sofisticadas	e	responsivas.
87
Neste tópico, você aprendeu:
•	 A	sintaxe	básica	de	uma	regra	CSS	é	composta	por	um	seletor,	chaves	e	declarações	
que	especificam	a	propriedade	e	o	valor	desejados.	O	seletor	 identifica	o	elemento	
HTML	a	ser	estilizado,	enquanto	a	declaração	contém	a	propriedade	a	ser	modificada	
e seu valor. 
• Uma regra CSS pode conter uma ou mais declarações, e múltiplas regras podem ser 
aplicadas	ao	mesmo	elemento	HTML.	A	sintaxe	de	uma	regra	CSS	é	composta	por	
quatro elementos principais: o seletor, a declaração, a propriedade e o valor da pro-
priedade.
•	 Para	criar	regras	CSS	corretamente,	é	importante	seguir	algumas	diretrizes	básicas,	
como	inserir	ponto	e	vírgula	ao	final	de	cada	declaração,	envolver	o	conjunto	de	de-
clarações	com	chaves	e	utilizar	vírgula	para	atribuir	o	mesmo	conjunto	de	regras	a	
mais de um seletor. 
•	 Os	seletores	em	CSS	permitem	selecionar	e	estilizar	elementos	HTML	específicos	em	
uma	página	web.	Existem	vários	tipos	de	seletores	em	CSS,	 incluindo	seletores	de	
elemento,	classe,	ID,	atributo,	descendente	e	filho	direto.	Algumas	das	propriedades	
CSS	mais	importantes	incluem	background,	background-color,	color,	text-align,	line-
-height,	font-family,	font-size,	margin,	padding,	border,	width,	height	e	display.
•	 A	propriedade	"background"	é	uma	das	mais	versáteis	do	CSS,	permitindo	a	definição	
de várias características visuais para o plano de fundo de um elemento HTML, como 
cor,	imagem,	gradiente,	repetição	e	posicionamento.	A	propriedade	"background-co-
lor"	é	usada	para	definir	a	cor	de	fundo	de	um	elemento	em	CSS,	e	pode	ser	especifi-
cada	de	várias	maneiras,	como	o	nome	da	cor,	o	código	hexadecimal	ou	o	valor	RGB.
•	 Formulários	são	utilizados	para	realizar	a	interação	com	os	usuários,	compreendemos	
a diferença entre os formulários web e uma página HTML tradicional. Os formulários 
enviam os dados coletados para um destino e o HTML é estático. Criamos um formu-
lário de login para compreender a forma de entrada de dados.
• Compreendemos o conceito do DOM, uma representação do documento HTML em 
forma de árvore de nós, que nada mais é uma forma de representar a página web 
no paradigma de orientação a objeto. Entendemos como selecionar e manipular os 
elementos	do	objeto	DOM	e	realizar	o	gerenciamento	dos	atributos	dos	elementos	
HTML.
RESUMO DO TÓPICO 2
88
AUTOATIVIDADE
1	 “O	uso	de	HTML	válido	para	metadados	de	páginas	garante	que	o	Google	possa	usar	
os	metadados	 conforme	 documentado.	 O	 Google	 tenta	 entender	 o	 HTML	mesmo	
quando ele é inválido ou inconsistente com o padrão HTML, mas os erros na mar-
cação podem causar problemas com a forma como seus metadados são usados na 
Pesquisa	Google.	O	principal	elemento	para	especificar	metadados	sobre	uma	página	
é	o	elemento	<head>	de	um	documento	HTML.	Se	você	usar	um	elemento	inválido	no	
elemento	<head>,	o	Google	ignorará	todos	os	elementos	que	aparecem	depois	dele.”	
Sobre	os	metadados	da	página	que	são	 incluídos	no	elemento	 <head>,	 assinale	a	
alternativa CORRETA:
Fonte: https://developers.google.com/search/docs/crawling-
indexing/valid-page-metadata.	Acesso	em:	15	dez.	2022.
a)	 (			)	 O	elemento	<link>	realiza	a	conexão	entre	dois	recursos,	podendo	ser	externos	
ou	hiperlinks.	Para	incluir	um	arquivo	.css	utilizamos	essa	tag.
b)	 (			)	 O	elemento	<script>	é	utilizado	apenas	para	incluir	diretamente	a	codificação	do	
script,	para	poder	colocar	um	arquivo	script	será	necessário	utilizar	o	elemento	
<link>.
c)	 (			)	 O	elemento	<meta>	é	um	elemento	genérico	que	faz	a	mesma	coisa	que	os	ele-
mentos	<base>,	<link>,	<script>,	<style>	e	<title>.
d)	 (			)	 O	elemento	<title>	dentro	da	tag	<head>	adiciona	um	título	no	corpo	documento	
HTML e é apresentado na tela pelo navegador..
2	 Muitos	 sites	 contêm	 código	 HTML	 como:	 <div	 id="nav">	 <div	 class="header">	 <div	
id="footer">	para	indicar	navegação,	cabeçalho	e	rodapé.	Em	HTML	existem	alguns	
elementos	semânticos	que	podem	ser	usados			para	definir	diferentes	partes	de	uma	
página	web.  Com	base	 nas	 definições	 dos	 elementos	 de	 separação	 de	 conteúdo,	
analise as sentenças a seguir:
Fonte: https://www.w3schools.com/html/html5_semantic_
elements.asp.	Acesso	em:	15	dez.	2022.
I-	 O	elemento	<section>	é	uma	seção	genérica,	geralmente	com	um	título.	Objetivo	
agrupar	conteúdos	semelhantes	e	não	independentes.
II-	 O	elemento	<nav>	é	uma	seção	da	página	que	aponta	para	outra	página	ou	outras	
áreas	da	página	(links	de	navegação).
III-	 O	elemento	<header>	inclui	um	conteúdo	introdutório	da	página	ou	seção.	Podendo	
ser	utilizando	os	elementos	<h1>,	<h2>,	<h3>,	<h4>,	<h5>	e	<h6>	para	mesma	função.
https://developers.google.com/search/docs/crawling-indexing/valid-page-metadata
https://developers.google.com/search/docs/crawling-indexing/valid-page-metadata
https://www.w3schools.com/html/html5_semantic_elements.asp
https://www.w3schools.com/html/html5_semantic_elements.asp
89
Assinale a alternativa CORRETA:
a)	 (			)	 As	sentenças	I	e	II	estão	corretas.
b)	 (			)	 Somente	a	sentença	II	está	correta.
c)	 (			)	 As	sentenças	I	e	III	estão	corretas.
d)	 (			)	 Somente	a	sentença	III	está	correta.
3	 “Em	CSS,	os	 seletores	 são	usados	 		para	direcionar	os	elementos	HTML	em	nossas	
páginas	da	web	que	queremos	estilizar.	Há	uma	grande	variedade	de	seletores	CSS	
disponíveis,	permitindo	uma	precisão	refinada	ao	selecionar	os	elementos	a	serem	
estilizados.”	 De	 acordo	 com	osconceitos	 sobre	 seletores	 de	 elementos	 do	HTML,	
classifique	V	para	as	sentenças	verdadeiras	e	F	para	as	falsas:
Fonte: https://developer.mozilla.org/pt-BR/docs/Learn/CSS/Building_
blocks/Selectors. Acesso em: 15 dez. 2022.
(   )	Podemos	criar	um	seletor	baseado	no	nome	do	elemento,	para	incluir	na	regra	de-
vemos	incluir	$	na	frente,	por	exemplo	regra	para	o	elemento	<p>	seria	$p	{	…	}.
(   )	Utilizando	#painel	como	seletor,	será	aplicado	a	regra	para	o	elemento	com	id	com	
valor painel.
(   )	O	seletor	baseado	no	atributo	do	elemento	deve	ser	incluído	na	regra	CSS	com	nome	
do	elemento	seguindo	de	chaves	contendo	o	atributo,	por	exemplo	para	acessar	o	
atributo	do	elemento	<img	src="myimage.png">	a	regra	ficaria	img{myimage.png}.
Assinale a alternativa que apresenta a sequência CORRETA:
a)	 (			)	 V	–	F	–	F.
b)	 (			)	 V	–	F	–	V.
c)	 (			)	 F	–	V	–	F.
d)	 (			)	 F	–	F	–	V.
4	 A	seguir	veremos	a	imagem	da	sintaxe	de	um	elemento	HTML:
 
Fonte: https://web.fe.up.pt/~ssn/disciplinas/cdi/imgs/element.png. Acesso em: 15 dez. 2022.
https://developer.mozilla.org/pt-BR/docs/Learn/CSS/Building_blocks/Selectors
https://developer.mozilla.org/pt-BR/docs/Learn/CSS/Building_blocks/Selectors
https://web.fe.up.pt/~ssn/disciplinas/cdi/imgs/element.png
90
Disserte	sobre	a	utilização	desse	elemento	e	sobre	os	componentes	presentes	no	ele-
mento da imagem.
5	 “Na	medida	que	se	aprende	mais	sobre	HTML	—	lendo	sobre	recursos,	observando	
exemplos,	etc.	—	é	normal	se	deparar	com	um	assunto:	a	importância	de	se	utilizar	
a	semântica	HTML	(as	vezes	chamada	de	POSH,	ou	Plain	Old	Semantic	HTML).	Esse	
assunto	significa	utilizar	corretamente	os	elementos	HTML,	cada	qual	com	seu	pro-
pósito,	o	máximo	que	for	possível.	Você	deve	estar	se	perguntando	porque	isso	é	tão	
importante.	Afinal,	é	possível	usar	uma	combinação	de	CSS	e	JavaScript	que	faz	com	
que qualquer elemento HTML se comporte da forma que você quiser.”
	 Neste	contexto,	disserte	sobre	os	benefícios	de	utilização	de	elementos	semânticos	
no HTML.
Fonte: https://developer.mozilla.org/pt-BR/docs/Learn/Accessibility/
HTML. Acesso em: 15 dez. 2022.
https://developer.mozilla.org/pt-BR/docs/Learn/Accessibility/HTML
https://developer.mozilla.org/pt-BR/docs/Learn/Accessibility/HTML
91
TÓPICO 3 — 
ESTILIZAÇÃO COM FRAMEWORK 
BOOTSTRAP
UNIDADE 1
1 INTRODUÇÃO
O	Bootstrap	é	um	framework	front-end	de	código	aberto	que	permite	o	desen-
volvimento	de	websites	e	aplicações	web	com	rapidez	e	eficiência.	Ele	foi	criado	pela	
equipe do Twitter e é usado por muitos desenvolvedores em todo o mundo.
O Bootstrap inclui um conjunto de ferramentas para a criação de designs res-
ponsivos	e	móveis,	como	grade	flexível,	componentes	de	interface	do	usuário	pré-pro-
jetados	e	CSS	pré-definido.	Essas	ferramentas	permitem	que	os	desenvolvedores	criem	
interfaces de usuário atraentes e funcionais com facilidade, sem precisar escrever có-
digo	CSS	ou	JavaScript	do	zero.
Além disso, o Bootstrap é compatível com a maioria dos navegadores e é alta-
mente	personalizável,	permitindo	que	os	desenvolvedores	adaptem	facilmente	o	design	
para	atender	às	necessidades	específicas	de	seus	projetos.	Como	resultado,	o	Bootstrap	
se tornou uma das ferramentas mais populares e úteis para desenvolvedores front-end 
e	é	amplamente	utilizado	em	projetos	web	de	todos	os	tipos	e	tamanhos.
2 FRAMEWORK BOOTSTRAP 5: CONCEITOS E 
FUNDAMENTOS
O	Bootstrap	5	é	a	versão	mais	recente	do	popular	framework	front-end	de	códi-
go	aberto,	Bootstrap.	Ele	foi	lançado	em	maio	de	2021	e	traz	várias	melhorias	e	recursos	
novos	em	relação	à	versão	anterior,	Bootstrap	4.
Uma	das	principais	mudanças	no	Bootstrap	5	é	a	remoção	do	jQuery	como	de-
pendência.	Agora,	o	Bootstrap	utiliza	apenas	JavaScript	nativo,	o	que	torna	as	páginas	
mais	leves	e	mais	rápidas.	Além	disso,	o	Bootstrap	5	também	apresenta	melhorias	no	
sistema	de	grade,	tornando-o	mais	flexível	e	fácil	de	usar.	Isso	permite	que	os	desenvol-
vedores	criem	layouts	mais	complexos	e	personalizados	com	menos	esforço.
Outras	melhorias	no	Bootstrap	5	 incluem	aprimoramentos	nos	componentes	
existentes,	como	o	menu	de	navegação,	o	carrossel	e	o	modal,	além	da	adição	de	no-
vos	componentes,	como	o	switch	e	o	toast.	A	personalização	também	foi	aprimorada,	
tornando mais fácil do que nunca ajustar as cores, fontes e estilos do Bootstrap para se 
adequar ao design do projeto.
92
Em	resumo,	o	Bootstrap	5	é	uma	atualização	importante	do	framework	front-
-end mais popular do mundo, que oferece aos desenvolvedores um conjunto de fer-
ramentas	ainda	mais	poderoso	e	flexível	para	criar	designs	responsivos	e	móveis	para	
websites e aplicativos web modernos.
2.1 INTRODUÇÃO AO FRAMEWORK BOOTSTRAP 5
O	framework	Bootstrap	5	oferece	uma	estrutura	invisível	que	ajuda	na	criação	
de	layouts	responsivos.	Para	construir	essa	estrutura,	podemos	utilizar	o	elemento	<div>	
e	três	classes	principais:	largura	fixa	(.container),	ponto	de	interrupção	(.container-«bre-
akpoint»)	e	fluida	(.container-fluid).
O	container	é	uma	classe	importante	do	framework	Bootstrap	5,	pois	permite	
criar	um	elemento	de	contêiner	que	agrupa	o	conteúdo	da	página	em	uma	largura	fixa	
ou	fluida,	além	de	controlar	o	comportamento	em	diferentes	tamanhos	de	tela.
Ao	utilizar	a	classe	.container-fluid,	o	container	ocupará	toda	a	largura	da	janela	
do navegador, sem limitações de largura. Já com a classe .container, temos um contai-
ner	de	largura	fixa	com	um	valor	padrão	de	100%	para	telas	menores	que	576px	e	uma	
largura	máxima	de	1140px	para	telas	maiores.
Outro recurso importante são as classes de ponto de interrupção, que permitem 
definir	diferentes	tamanhos	de	container	em	diferentes	tamanhos	de	tela,	conforme	de-
finido	nos	breakpoints.	Por	exemplo,	podemos	definir	a	classe	.container-sm	para	telas	
menores	que	576px,	.container-md	para	telas	maiores	que	576px	e	menores	que	768px,	
.container-lg	para	telas	maiores	que	768px	e	menores	que	992px,	e	assim	por	diante.
O	conceito	de	grid	também	é	fundamental	para	a	criação	de	layouts	responsi-
vos	com	o	framework	Bootstrap	5.	Em	resumo,	a	grid	é	composta	por	três	elementos	
principais:	colunas	dentro	de	linhas	e	linhas	dentro	de	containers.
O	container	é	o	elemento	mais	externo	da	grid	e	possui	diversas	classes	que	
determinam	sua	 largura	e	comportamento	em	diferentes	tamanhos	de	tela.	A	classe	
".container"	é	a	 largura	fixa	padrão,	que	mantém	o	conteúdo	centralizado	e	com	uma	
Para entender melhor como utilizar o container no seu projeto e 
aproveitar ao máximo seus recursos, recomendamos acessar o 
link https://getbootstrap.com/docs/5.0/layout/containers/ e con-
ferir a documentação oficial do Bootstrap 5.
DICA
93
largura	máxima	definida.	Já	a	classe	".container-fluid"	faz	com	que	o	container	ocupe	
toda	a	largura	da	janela,	adaptando-se	automaticamente	a	diferentes	tamanhos	de	tela.
Dentro	do	container,	podemos	criar	linhas	com	a	classe	".row",	que	contém	as	
colunas	do	layout.	As	colunas	são	definidas	com	a	classe	".col"	seguida	do	número	de	
colunas	que	ela	deve	ocupar	em	cada	tamanho	de	tela.	Por	exemplo,	uma	coluna	com	
a	classe	".col-12"	ocupará	12	colunas	em	telas	pequenas,	enquanto	uma	coluna	com	a	
classe	".col-md-6"	ocupará	6	colunas	em	telas	médias	ou	maiores.
O elemento <span> é semelhante ao elemento <div>, mas com 
uma diferença crucial: o elemento <div> é um elemento de nível 
de bloco, enquanto o elemento <span> é um elemento em linha.
Ao utilizar as classes do sistema de grid do Bootstrap 5, podemos 
criar layouts flexíveis e responsivos para nossos formulários e ou-
tros elementos na página. O uso correto dessas classes ajuda a 
ajustar o conteúdo da página para diferentes tamanhos de tela, 
permitindo uma melhor experiência para o usuário. 
Para saber mais sobre o sistema de grid do Bootstrap 5, confira o 
link: https://getbootstrap.com/docs/5.0/layout/grid/.
DICA
Os	pontos	de	interrupção	(breakpoints)	são	um	conceito	importante	no	design	
responsivo	e	determinam	como	o	layout	deve	se	comportar	em	diferentesdispositivos	
ou	tamanhos	de	tela.	No	Bootstrap	5,	existem	seis	pontos	de	interrupção,	também	co-
nhecidos	como	níveis	de	grade.	
A Tabela 2 apresenta esses pontos de interrupção e suas respectivas dimen-
sões	em	pixels.	É	importante	compreender	como	utilizar	esses	pontos	de	interrupção	
para	criar	layouts	que	se	adaptem	a	diferentes	dispositivos	e	tamanhos	de	tela.	
Tabela 2 – Níveis de grade
Fonte: Bootstrap (2023, s.p.).
Ponto de interrupção (Breakpoint) Infixo	de	classe Dimensões
Muito	pequeno	(Extra	small) - <576px
Pequena	(Small) sm ≥576px
Médio	(Medium) md ≥768px
Grande	(Large) lg ≥992	px
Extra	grande	(Extra	large) xl ≥1200px
Extra	extra	grande	(Extra	extra	large) xxl ≥1400px
94
Para mais informações sobre os pontos de interrupção do Boots-
trap 5, consulte a documentação oficial em: https://getbootstrap.
com/docs/5.0/layout/grid/#breakpoints. Lá você encontrará deta-
lhes sobre as dimensões de tela correspondentes a cada ponto de 
interrupção, além de exemplos de uso e dicas para adaptar seu 
layout em diferentes dispositivos. É importante dominar o uso dos 
breakpoints para garantir que seu site seja visualizado corretamen-
te em qualquer dispositivo e proporcionar a melhor experiência de 
usuário possível.
DICA
Ótimo!	Já	realizamos	a	introdução	ao	framework	Bootstrap	5	e	aos	seus	princi-
pais	conceitos.	Agora,	vamos	continuar	conhecendo	as	classes	principais	do	framework	
e	os	estilos	pré-definidos	disponíveis	para	utilização,	sem	a	necessidade	de	criar	regras	
CSS	do	zero.
2.2 CLASSES DO FRAMEWORK BOOTSTRAP 5
O	Bootstrap	5	possui	diversas	classes	para	estilização	de	elementos	HTML,	mas	
algumas das principais classes incluem:
• Classes de Grid: As classes .container, .row e .col são as principais classes de grid 
utilizadas	para	definir	a	estrutura	de	layout	do	site.
•	 Classes	de	Tipografia:	As	classes	.h1,	.h2,	.h3,	.h4,	.h5	e	.h6	são	utilizadas	para	de-
finir	os	tamanhos	de	cabeçalho,	enquanto	as	classes	.lead,	.text-muted	e	.text-justify	
são	utilizadas	para	estilizar	o	conteúdo	de	texto.
• Classes de Cores:	As	classes	.bg-primary,	.bg-secondary,	.bg-success,	.bg-danger,	
.bg-warning	e	.bg-info	são	utilizadas	para	definir	as	cores	de	fundo	dos	elementos.
• Classes de Botões:	 As	 classes	 .btn,	 .btn-primary,	 .btn-secondary,	 .btn-success,	
.btn-danger,	.btn-warning	e	.btn-info	são	utilizadas	para	estilizar	os	botões	do	site.
• Classes de Formulários:	As	classes	.form-control,	.form-label,	.form-check	e	.form-
select	são	utilizadas	para	estilizar	elementos	de	formulários	como	campos	de	entrada	
de dados, rótulos e botões de opção.
Há	uma	variedade	de	classes	no	Bootstrap	5	que	podem	ser	utilizadas	para	es-
tilizar	elementos	HTML,	sendo	que	as	mencionadas	anteriormente	são	apenas	algumas	
das mais importantes. Agora, vamos nos concentrar nas classes do sistema de grid para 
organizar	a	estilização	da	nossa	tela	de	cadastro	de	forma	eficiente	e	responsiva.	Nesta	
seção,	vamos	conhecer	três	classes	essenciais:	grid,	d-grid	e	d-flex.
A	classe	é	a	grid	é	um	dos	principais	recursos	do	framework	Bootstrap	5	para	
criação	de	layouts	responsivos	em	páginas	web.	Com	a	utilização	da	classe	grid,	é	pos-
sível	criar	um	sistema	de	colunas	e	linhas	que	se	ajustam	automaticamente	de	acordo	
95
com	o	tamanho	da	tela	em	que	a	página	é	exibida.	Na	classe	grid,	os	elementos	HTML	
são	organizados	em	um	sistema	de	grade	que	é	dividido	em	12	colunas.	As	colunas	
podem	ser	agrupadas	em	linhas,	permitindo	que	os	elementos	sejam	organizados	de	
forma	harmônica	e	equilibrada	na	página.
A	classe	grid	oferece	grande	flexibilidade,	permitindo	a	personalização	de	diver-
sos	pontos	de	interrupção	(breakpoints),	possibilitando	que	o	layout	da	página	se	adap-
te	a	diferentes	dispositivos,	como	desktops,	tablets	e	smartphones.	É	uma	ferramenta	
poderosa	para	criar	layouts	responsivos	e	flexíveis	em	páginas	web,	proporcionando	aos	
usuários	uma	experiência	mais	agradável	e	intuitiva.
O uso do grid no Bootstrap 5 é bastante simples. Primeiramente, precisamos 
adicionar	um	elemento	com	a	classe	"container"	para	envolver	as	suas	colunas.	Dentro	
deste	container,	podemos	criar	linhas	(elementos	com	a	classe	"row")	que,	por	sua	vez,	
contêm	as	suas	colunas	(elementos	com	a	classe	"col").
Podemos	definir	o	tamanho	de	cada	coluna	usando	as	classes	"col-{tamanho}"	
para	cada	ponto	de	interrupção	(breakpoint)	do	grid,	onde	"tamanho"	pode	ser	um	nú-
mero	de	1	a	12.	Por	exemplo,	"col-6"	define	uma	coluna	que	ocupa	6	espaços	de	grade	
em	todos	os	tamanhos	de	tela.	Para	ajustar	o	tamanho	de	uma	coluna	para	um	deter-
minado	ponto	de	interrupção,	você	pode	utilizar	a	classe	"col-{tamanho}-{breakpoint}".	
Por	exemplo,	 "col-6-md"	define	uma	coluna	que	ocupa	6	espaços	de	grade	em	telas	
maiores	que	768	pixels.
Além	disso,	é	possível	adicionar	outras	classes	de	modificação,	como	"offset-{-
tamanho}",	para	definir	um	espaço	em	branco	à	esquerda	da	coluna,	ou	"order-{ordem}",	
para	definir	a	ordem	de	exibição	da	coluna.
As	linhas	e	colunas	do	sistema	de	grid	do	Bootstrap	são	usadas	para	organizar	
e	estruturar	o	layout	de	uma	página	web.	As	linhas	definem	o	contêiner	que	agrupa	as	
colunas,	enquanto	as	colunas	são	os	blocos	de	construção	do	layout,	permitindo	que	o	
conteúdo seja dividido em várias áreas com larguras diferentes, dependendo da quan-
tidade de colunas que são atribuídas a cada uma delas. Dessa forma, é possível criar 
layouts	flexíveis	e	responsivos	que	se	adaptam	a	diferentes	tamanhos	de	tela.
Ambas as formas são aceitas no Bootstrap 5 para definir uma coluna 
com largura de 6 colunas em dispositivos com largura média. A ordem 
das classes não importa, pois o sistema de grid do Bootstrap usa o 
conceito de ordem flexível (flexbox), permitindo que as colunas sejam 
organizadas de forma dinâmica. Portanto, ambas as formas "col-6-md" 
e "col-md-6" funcionam corretamente.
CURIOSIDADE
96
Agora	vamos	conhecer	a	classe	d-grid,	uma	das	classes	de	display	que	per-
mite	a	criação	de	layouts	com	base	em	uma	grade	virtual,	similar	à	grade	utilizada	no	
sistema	de	grid	do	framework.	A	principal	diferença	é	que,	ao	contrário	do	sistema	de	
grid	convencional,	o	d-grid	permite	a	criação	de	layouts	bidimensionais,	com	elementos	
dispostos	tanto	em	linhas	quanto	em	colunas.
O	d-grid	é	particularmente	útil	para	a	criação	de	layouts	mais	complexos,	que	
exigem	uma	disposição	mais	livre	dos	elementos	na	página.	Com	essa	classe	de	display,	
é	possível	definir	não	apenas	a	posição	dos	elementos	na	página,	mas	também	o	tama-
nho	e	a	proporção	de	cada	um	deles,	criando	layouts	mais	dinâmicos	e	personalizados.
O	d-grid	utiliza	uma	sintaxe	própria	para	definir	a	disposição	dos	elementos	na	
página,	e	é	composto	por	diversas	classes	auxiliares,	que	permitem	a	criação	de	layouts	
responsivos	e	adaptáveis	a	diferentes	tamanhos	de	tela
Enquanto o sistema de grid padrão do Bootstrap funciona com base em uma 
grade	fixa,	onde	as	colunas	têm	largura	fixa	e	predefinida,	o	D-grid	permite	criar	grids	
dinâmicos	com	colunas	que	podem	ter	largura	e	altura	variáveis,	tornando	possível	criar	
layouts	mais	criativos	e	personalizados.
Outra diferença é que, enquanto o sistema de grid padrão é baseado em classes 
que	indicam	o	número	de	colunas	que	um	elemento	deve	ocupar	(por	exemplo,	"col-
6"	para	uma	coluna	que	ocupa	metade	da	largura	disponível),	o	D-grid	é	baseado	em	
classes	que	especificam	as	dimensões	de	uma	célula	da	grade	(por	exemplo,	"col-md-6	
row-md-2"	para	uma	célula	que	ocupa	metade	da	largura	do	grid	e	duas	linhas	de	altura	
em	dispositivos	médios).
O d-grid é uma evolução do sistema de grid do Bootstrap que permite 
maior flexibilidade e personalização na criação de layouts de página. 
No entanto, é importante lembrar que essa funcionalidade ainda está 
em desenvolvimento e pode sofrer alterações futuras.
IMPORTANTE
Por	fim,	abordaremos	a	classe	d-flex	que	é	uma	das	mais	utilizadas	no	Boots-
trap	5	para	a	criação	de	layouts	flexíveis	e	responsivos	em	páginas	web.	Ela	define	um	
elemento	como	flexível,permitindo	que	seus	filhos	sejam	organizados	em	linhas	ou	co-
lunas e distribuídos de maneira uniforme.
Com	a	classe	d-flex,	é	possível	criar	estruturas	de	 layout	que	se	adaptam	de	
acordo	com	o	tamanho	da	tela	do	usuário,	permitindo	uma	melhor	experiência	de	nave-
gação	em	diferentes	dispositivos,	como	desktops,	tablets	e	smartphones.
97
Além	disso,	a	classe	d-flex	também	oferece	outras	propriedades	que	podem	
ser	utilizadas	para	personalizar	ainda	mais	o	layout,	como	align-items,	justify-content,	
flex-wrap,	entre	outras.
É	importante	ressaltar	que	a	classe	d-flex	deve	ser	utilizada	em	conjunto	com	
outras classes do Bootstrap 5, como as classes de grid e as classes de estilo, para que o 
layout	seja	totalmente	responsivo	e	adaptável	em	diferentes	dispositivos.
É	 importante	 que	 além	de	 conhecermos	 a	 teoria	 do	 framework	Bootstrap	 5,	
também	possamos	compreender	sua	utilização	por	meio	de	exemplos	práticos.	Por	isso,	
vamos	colocar	a	mão	na	massa	e	estilizar	os	formulários	de	login	e	cadastro.
2.3 CASO DE USO BOOTSTRAP 5: CRIAR TELA DE 
CADASTRO DE USUÁRIO
Vamos iniciar a implementação da tela de cadastro de usuário com o objetivo 
de	alcançar	um	layout	semelhante	ao	apresentado	na	Figura	13.	Para	isso,	utilizaremos	
campos de formulário e classes do sistema de grid do Bootstrap 5.
Com	essa	abordagem	prática,	poderemos	experimentar	as	classes	e	recursos	
do	Bootstrap	5	em	tempo	real	e	ter	uma	melhor	compreensão	de	como	utilizá-los	para	
criar	layouts	responsivos	e	elegantes.	Vamos	lá!
Figura 13 - Layout tela de cadastro
Fonte: a autora.
Para	utilizar	o	framework	Bootstrap	5	em	nossos	projetos,	é	necessário	indicar	a	
folha	de	estilos	correspondente.	Uma	das	formas	mais	comuns	de	fazer	isso	é	através	da	
rede	de	distribuição	de	conteúdo	(ou	CDN		que	significa	“Content	Delivery	Network”,	em	
inglês),	que	possibilita	o	carregamento	remoto	do	framework	e	seus	componentes.	Essa	
98
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE	html>
<html	lang="pt-br">
<head>
<meta	charset=utf-8	/>
<meta	name="viewport"	content="width=device-width,	initial-scale=1">
<title>Formulário	de	Cadastro</title>
<link	href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"	
rel="stylesheet">
</head>
<body>
<form>
<div	class="container-sm”>
<div	class="row”>
<div	class="col-sm-10">
<h1>Cadastro</h1>	
</div>
abordagem apresenta diversas vantagens, como a facilidade de implementação, a garantia 
de	que	sempre	será	utilizada	a	versão	mais	atualizada	do	Bootstrap	e	a	possibilidade	de	
aproveitar os benefícios de escalabilidade e disponibilidade proporcionados por uma CDN.
Usar o Bootstrap CDN em vez de uma instalação local significa que o fra-
mework e seus componentes são carregados remotamente, sem a ne-
cessidade de baixar nenhum arquivo para o seu computador. Para usar 
o CDN, basta fornecer o link para o servidor no atributo href da tag <link>, 
juntamente com type="stylesheet". Também é recomendado sempre usar 
a versão ".min.css" do arquivo CSS, pois é uma versão mais compacta.
No entanto, é importante notar que ao implantar seu site, 
você deve mudar para o uso do arquivo local em seu pro-
jeto para evitar problemas com tempos de carregamento 
lentos ou erros em sua aplicação.
Para obter mais informações sobre o framework Bootstrap 5, confira 
o seguinte link: https://getbootstrap.com/docs/5.0/getting-started/
introduction/.
IMPORTANTE
No	quadro	16,	apresenta-se	um	exemplo	de	código	HTML	de	um	formulário	de	
cadastro	que	utiliza	o	Bootstrap	5.	Os	elementos	com	as	classes	do	Bootstrap	estão	
destacados	em	cinza	no	código.	O	código	utiliza	a	estrutura	de	grid	do	Bootstrap	para	
organizar	os	elementos	em	linhas	e	colunas,	garantindo	que	o	layout	do	formulário	se	
adapte	a	diferentes	tamanhos	de	tela.
Quadro 16 - Formulário de Cadastro em HTML
99
Fonte: a autora.
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
</div
<div	class="row”>
<div	class="col-sm-10">
<label>Nome:</label>	
<input	id="nome_pessoa"	type="text"	/>	
</div>
</div>
<div	class="row”>
<div	class="col-sm-10">	
<label>E-mail:</label>	
<input	id="nome_login"	type="email"/>	
</div>
</div>
<div	class="row">
															<div	class="col-sm-5">
<div	class="d-flex">
<div	class="row">
													<div	class="col-sm-5">	
<label>Senha:</label>	
<input	id="senha_login"	type="password"	/>	
</div>
<div	class="col-sm-5">	
<label>Confirme	a	Senha:</label>	
<input	id="conf_senha_login"	
type="password"	/>
</div>
							</div>
															</div>
</div>
</div>
<div	class=”row”>
											<div	class="d-grid">	
<div	class="row">
<div	class="col-sm-6">		
											<button>	Cadastrar	</button>
</div>
											</div>
												</div>
</div>
</div>
								</form>
</body>
</html>
100
Ao	utilizar	o	código	presente	no	Quadro	16	para	criar	um	arquivo	HTML,	teremos	
uma	tela	de	cadastro	com	um	layout	similar	ao	apresentado	na	Figura	14.	Esse	formu-
lário	permitirá	a	inserção	de	informações	como	nome,	e-mail,	senha	e	confirmação	de	
senha,	sendo	estilizado	com	as	classes	do	Bootstrap	5	para	torná-lo	mais	atraente	e	
responsivo.	Vale	ressaltar	que	a	utilização	da	estrutura	de	grid	do	Bootstrap	possibilita	a	
adaptação	do	layout	do	formulário	a	diferentes	tamanhos	de	tela,	proporcionando	uma	
melhor	experiência	ao	usuário.	Ademais,	é	importante	destacar	que	o	botão	"Cadastrar"	
poderá	ser	personalizado	com	as	classes	do	Bootstrap,	visando	melhorar	tanto	a	apa-
rência quanto a funcionalidade do formulário.
Figura 14 - Tela de cadastro com sistema de grids
Fonte: a autora.
Agora	que	já	conhecemos	as	principais	classes	do	sistema	de	grid	para	organi-
zar	a	estrutura	dos	conteúdos,	vamos	nos	aprofundar	nas	classes	destinadas	à	entrada	
de	dados	em	formulários,	que	permitem	estilizar	e	customizar	os	elementos	de	formu-
lários	para	garantir	uma	melhor	experiência	do	usuário.
3 BOOTSTRAP 5: CRIANDO FORMULÁRIOS
Neste	 tópico,	vamos	 explorar	 como	estilizar	 os	 formulários	 com	Bootstrap	5,	
aprenderemos	como	utilizar	as	classes	para	personalizar	a	aparência	dos	formulários	e	
como integrar validação de entrada de dados para tornar seus formulários mais robus-
tos	e	seguros.	Com	este	conhecimento,	você	poderá	criar	formulários	profissionais	e	de	
alta qualidade para suas aplicações web.
3.1 CLASSES DE ENTRADA DE DADOS DO BOOTSTRAP 5
As classes de entrada de dados do Bootstrap 5 são uma ferramenta essencial 
para o desenvolvimento de formulários web, oferecendo uma ampla variedade de op-
ções	de	personalização,	validação	de	dados	para	melhorar	 a	 experiência	 do	usuário.	
Essas	classes	de	entrada	de	dados	 incluem	diversos	tipos	de	campos,	 como	textos,	
senhas,	e-mails,	datas,	números,	entre	outros.	Além	disso,	também	é	possível	definir	
validações e formatos de apresentação para cada campo.
101
As	classes	de	entrada	de	dados	são	altamente	customizáveis,	permitindo	que	
os	desenvolvedores	personalizem	a	aparência	e	o	comportamento	dos	campos	de	for-
mulário de acordo com as necessidades do projeto. Com isso, é possível criar interfaces 
de usuário amigáveis e intuitivas, que facilitam a interação do usuário com o sistema.
As classes de entrada de dados do Bootstrap 5 incluem uma ampla variedade 
de	opções	para	criação	de	campos	de	formulário	personalizados.	Algumas	das	princi-
pais classes de entrada de dados disponíveis no Bootstrap 5 são:
• form-control: essa	classe	é	utilizada	para	definir	campos	de	texto,	como	inputs	e	
textareas.	Ela	é	aplicada	a	elementos	como	<input>,	<textarea>	e	<select>;
• form-select: essa	classe	é	utilizada	para	criar	campos	de	seleção,	como	dropdowns.	
Ela	é	aplicada	a	elementos	como	<select>;
• form-range:	essa	classe	é	utilizada	para	criar	campos	de	seleção	de	intervalo,	como	
sliders.	Ela	é	aplicada	a	elementos	como	<input	type="range">;
• form-check: essa	classe	é	utilizada	para	criarcampos	de	seleção,	como	checkboxes	
e	radio	buttons.	Ela	é	aplicada	a	elementos	como	<input	type="checkbox">	e	<input	
type="radio">;
•	 form-file:	essa	classe	é	utilizada	para	criar	campos	de	seleção	de	arquivos.	Ela	é	
aplicada	a	elementos	como	<input	type="file">;
•	 form-floating:	essa	classe	é	utilizada	para	criar	campos	de	formulário	com	labels	
flutuantes.	Ela	é	aplicada	a	elementos	como	<input>	e	<textarea>.
Essas são apenas algumas das principais classes de entrada de dados disponí-
veis	no	Bootstrap	5.	Cada	uma	delas	possui	diversos	atributos	e	opções	de	customiza-
ção,	permitindo	a	criação	de	campos	de	formulário	altamente	personalizados	e	adapta-
dos às necessidades do projeto.
A	classe	form-control	é	uma	das	classes	mais	utilizadas	no	Bootstrap	5	para	
criar	 campos	de	 texto	 personalizados	 em	 formulários	web.	Ao	 aplicá-la	 a	 elementos	
HTML, é possível criar campos de formulário visualmente atraentes e intuitivos para o 
usuário,	além	de	permitir	a	customização	de	diversos	aspectos	do	campo,	como	cor,	ta-
manho	e	tipo	de	fonte.	Para	utilizá-la,	basta	aplicá-la	a	elementos	HTML	como	<input>,	
<textarea>	e	<select>.	O	atributo	id	é	utilizado	para	associar	o	rótulo	do	campo	ao	seu	
respectivo input, permitindo que o usuário clique no rótulo para selecionar o campo.
Além	do	atributo	id,	é	comum	utilizar	o	atributo	name	para	identificar	os	campos	
de formulário e permitir que as informações sejam enviadas ao servidor. Para campos 
de	texto	que	precisam	ser	preenchidos	em	formatos	específicos,	como	datas	ou	núme-
ros,	o	Bootstrap	5	oferece	outras	classes	específicas,	como	form-control-date,	form-
-control-number, entre outras.
No	quadro	17,	você	encontra	um	exemplo	de	código	HTML	que	apresenta	um	
formulário	de	cadastro.	Foram	incluídas	classes	"form-control"	nos	elementos	<input>	
para	estilizá-los.	Os	elementos	com	as	classes	do	Bootstrap	estão	destacados	em	cinza	
102
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE	html>
<html	lang="pt-br">
<head>
<meta	charset=utf-8	/>
<meta	name="viewport"	content="width=device-width,	initial-scale=1">
<title>Formulário	de	Cadastro</title>
<link	href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"	
rel="stylesheet">
</head>
<body>
<form>
<div	class="container-sm”>
<div	class="row”>
<div	class="col-sm-10">
<h1	class="text-center">Cadastro</h1>	
</div>
</div
<div	class="row”>
<div	class="col-sm-10">
<label>Nome:</label>	
<input	class="form-control"	id="nome_pessoa"	name="nome_pessoa"	
type="text"	placeholder="Digite	seu	nome"/>	
</div>
</div>
<div	class="row”>
						<div	class="col-sm-10">	
<label>E-mail:</label>	
<input	class="form-control"	id="nome_login"	name="nome_login"	
type="email"	placeholder="Digite	seu	e-mail"/>	
</div>
</div>
<div	class="row">
<div	class="col-sm-5">
<div	class="d-flex">
<div	class="row">
<div	class="col-sm-5">	
<label>Senha:</label>	
no	código.	Embora	o	botão	"Cadastrar"	ainda	não	esteja	estilizado,	o	layout	do	formulá-
rio	já	é	adaptável	a	diferentes	tamanhos	de	tela	graças	à	estrutura	de	grid	do	Bootstrap.	
Além	disso,	cada	campo	de	entrada	possui	um	placeholder	 indicando	o	que	deve	ser	
preenchido	no	campo.
Quadro 17 - Formulário de Cadastro em HTML
103
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<input	class="form-control"	id="senha_login"	
name="senha_login"	type="password"	placeholder="Digite	a	senha"/>	
</div>
<div	class="col-sm-5">	
<label>Confirme	a	Senha:</label>	
<input	class="form-control"	id="conf_senha_
login"	name="conf_senha_login"	type="password"	placeholder="Digite	novamente	a	senha"/>
</div>
	</div>
					</div>
			</div>
</div>
<div	class=”row”>
														<div	class="d-grid">	
											<div	class="row">
<div	class="col-sm-6">		
<button>	Cadastrar	</button>
</div>
						</div>
					</div>
						</div>
	</div>
</form>
</body>
</html>
Fonte: a autora.
Na	Figura	 15,	é	possível	notar	claramente	as	alterações	 realizadas	no	formu-
lário através das classes do Bootstrap. Os campos de entrada agora possuem bordas 
arredondadas	 e	 dicas	 dentro	 dos	 inputs	 que	 auxiliam	na	 indicação	 do	 que	 deve	 ser	
preenchido.	Além	disso,	os	 labels	dos	campos	foram	posicionados	acima	dos	 inputs,	
melhorando	a	legibilidade	do	formulário	como	um	todo.
Figura 15 - Tela de cadastro com aplicação da classe form-control
Fonte: a autora.
104
3.2 CASO DE USO BOOTSTRAP 5: CRIAÇÃO TELA DE LOGIN
Uma das tarefas mais comuns no desenvolvimento de aplicativos web é a cria-
ção de telas de login. Uma tela de login bem projetada é essencial para a segurança de 
seu aplicativo, pois permite que os usuários se autentiquem de forma segura. 
Neste	tópico,	vamos	explorar	como	usar	o	Bootstrap	5	para	criar	uma	tela	de	
login	eficaz	e	atraente	para	seu	aplicativo	web.	Vamos	ver	como	criar	um	formulário	de	
login	com	campos	de	entrada	de	texto,	botões	e	opções	de	esquecimento	de	senha	e	
registro. 
Aprenderemos	como	personalizar	a	aparência	da	tela	de	login	usando	as	clas-
ses	do	Bootstrap	5	e	poderemos	criar	telas	profissionais	e	de	alta	qualidade	para	seus	
aplicativos	web,	aumentando	a	experiência	do	usuário.	O	resultado	do	layout	da	tela	de	
login pode ser visto na Figura 16. 
Figura 16 – Novo layout tela de login
Fonte: a autora.
Antes de prosseguirmos com a aplicação das novas classes, é importante dar 
uma	olhada	na	aparência	atual	da	tela	do	formulário	de	login	na	Figura	176	e	no	código	
HTML	correspondente	no	Quadro	18.	É	possível	observar	que	as	classes	do	Bootstrap	
já	foram	aplicadas	ao	formulário	de	cadastro	e	estão	destacadas	em	cinza	no	código.
Figura 17 – Tela de login com form-control
Fonte: a autora.
105
Ao	analisar	a	aparência	atual	do	formulário	de	login,	podemos	identificar	quais	
aspectos	precisam	ser	melhorados	e	quais	classes	do	Bootstrap	serão	úteis	para	alcan-
çar o resultado desejado. A análise prévia da aparência e do código permite que possa-
mos	identificar	com	clareza	quais	mudanças	precisam	ser	feitas	e	quais	classes	serão	
necessárias para atingir o resultado desejado.
Quadro 18 – Código da tela do formulário de login com form-control
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE	html>
<html>
		<head>
				<meta	charset=utf-8	/>
				<meta	name="viewport"	content="width=device-width,	initial-scale=1">
				<title>Formulário	de	Login</title>
				<link	href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"	
rel="stylesheet">
		</head>
		<body>
				<form	method="GET"	action="./home.html"	>
											<div	class="d-flex">
													<div	class="row">
															<div	class="col-sm-10">
																	<h1	class="text-center">Login</h1>
															</div>
													</div>
											</div>
											<div	class="d-flex">
													<div	class="row">	
															<div	class="col-sm-12">
																		<label>Usuário:	</label>
																		<input	class="form-control"	id="nome_login"	type="text"	required/>
																</div>
													</div>
													<div	class="row">	
																<div	class="col-sm-12">
																		<label>Senha:	</label>
																		<input	class="form-control"	id="senha_login"	type="password"	required/>
															</div>
													</div>
										</div>		
										<div	class="d-flex">
												<div	class="row">		
																	<div	class="col-sm-12">
																				<input	role="switch"	type="checkbox"	name="manterlogado"	value=""	/>
106
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
																				<label>	Manter	logado	</label>	
																</div>
													</div>
										</div>
										<div	class="d-flex">	
													<div	class="row"><div	class="col-sm-12">
																				<button	type="submit"	>Login</button>	
																	</div>
													</div>		
										</div>
										<div	class="d-flex">
													<div	class="row">		
															<div	class="col-sm-12">
																	<a	href="./view/cadastro.html">Ainda	não	tem	conta?</a>
																	<a	href="./view/reset.html">Esqueceu	a	senha?</a>
															</div>
													</div>
										</div>
					</form>
		</body>
</html>
Fonte: a autora.
Para	melhorar	a	aparência	e	a	funcionalidade	do	formulário	de	login,	o	Boots-
trap	oferece	diversas	classes	de	estilização.	Entre	elas,	destacam-se	a	form-check, 
que	permite	criar	caixas	de	seleção	e	botões	de	opção	estilizados,	e	a	form-switch, 
que	possibilita	criar	botões	de	alternância.	Já	as	classes	form-check-input e form-
-check-label	são	utilizadas	para	definir	a	aparência	e	o	comportamento	das	caixas	de	
seleção e dos botões de opção. E, as classes input-group e a input-group-text, que 
permitem	criar	campos	de	entrada	com	textos	ou	 ícones	complementares,	como	por	
exemplo	campos	de	busca	com	ícone	de	lupa	ao	lado.	
Com	essas	classes,	é	possível	personalizar	e	melhorar	a	funcionalidade	dos	for-
mulários	de	maneira	prática	e	eficiente.	Conhecer	o	funcionamento	de	cada	classe	é	
fundamental	para	utilizá-las	corretamente	e	obter	o	resultado	esperado.	Com	esse	co-
nhecimento,	podemos	aplicar	as	classes	de	estilização	do	Bootstrap	de	forma	adequada	
e obter um formulário de login com visual mais atrativo e funcional.
A classe “input-group” é usada para agrupar elementos de entrada dentro de 
uma	única	linha,	como	um	campo	de	texto	e	um	botão	de	ação,		formando	uma	unidade	
coesa	de	entrada	de	dados.	Os	elementos	em	um	"input-group"	são	combinados	usan-
do	classes	CSS	e	podem	ser	estilizados	para	criar	diferentes	tipos	de	entrada	de	dados.	
107
Por	exemplo,	pode-se	criar	um	"input	group"	com	um	campo	de	pesquisa	e	um	botão	
de	busca	ao	lado,	ou	um	"input-group"	com	um	botão	dropdown	e	um	campo	de	en-
trada	de	dados	para	escolher	opções.	Além	disso,	os	"input	groups"	também	podem	ser	
estilizados	para	diferentes	tamanhos	de	tela	e	apresentar	diferentes	tipos	de	feedback	
visual, como sucesso, aviso ou erro.
A classe "input-group-text"	é	utilizada	para	adicionar	um	texto	fixo	ou	um	
elemento	personalizado	no	 início	ou	no	final	de	um	elemento	de	entrada,	como	uma	
caixa	de	texto	ou	um	botão.	Por	exemplo,	é	possível	adicionar	o	símbolo	de	uma	moeda	
ou um ícone de calendário antes ou depois de um campo de entrada de data. 
Adicionar	classes	input-group	a	um	campo	de	entrada	pode	trazer	benefícios	
significativos	em	termos	de	usabilidade	e	experiência	do	usuário.	Essa	classe	permite	
adicionar	 elementos	 adicionais	 ao	 campo	de	entrada,	 como	 ícones,	 botões	 e	 textos,	
que	podem	tornar	o	formulário	mais	intuitivo	e	fácil	de	usar.	Além	disso,	a	classe	"inpu-
t-group-text"	pode	ser	usada	para	estilizar	elementos	de	entrada	de	forma	consistente	
com	outros	elementos	do	formulário.	Por	exemplo,	você	pode	adicionar	um	plano	de	
fundo ou bordas arredondadas a todos os campos de entrada usando essa classe.
Para aplicar essas classes em nossa tela de login, vamos adicioná-las aos ele-
mentos	<div	class="col-sm-*">	e	<label>,	essas	alterações	podem	ser	vistas	no	Quadro	
19. Isso permitirá que possamos ver as mudanças na aparência da tela de login e avaliar 
o impacto que as novas classes terão na usabilidade do formulário que podem ser ob-
servadas na Figura 18.
Quadro 19 – Código da tela do formulário de login com input-group e input-group-text
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE	html>
<html>
		<head>
				<meta	charset=utf-8	/>
				<meta	name="viewport"	content="width=device-width,	initial-scale=1">
				<title>Formulário	de	Login</title>
				<link	href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"	
rel="stylesheet">
		</head>
		<body>
				<div	class="d-flex	col-sm-12"	>
						<form	method="GET"	action="./home.html">
											<div	class="d-flex	col-sm-12"	>
													<div	class="row">
															<div	class="col-12-sm">
																	<h1	class="">Login</h1>
															</div>
													</div>					
108
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
											</div>
											<div	class="d-flex	col-sm-12">
													<div	class="row">	
															<div	class="col-sm-12	input-group">
																		<label	class="input-group-text"	for="nome_login">Usuário:	</label>
																		<input	class="form-control"	id="nome_login"	type="text"	required/>
																</div>
													</div>
													<div	class="row">	
																<div	class="col-sm-12	input-group">
																		<label	class="input-group-text"	for="senha_login"	>Senha:	</label>
																		<input	class="form-control"	id="senha_login"	type="password"	required/>
															</div>
													</div>
										</div>		
										<div	class="d-flex	col-sm-6">
													<div	class="row">		
																	<div	class="col-sm-12">
																				<input	role="switch"	type="checkbox"	name="manterlogado"	value=""	/>								
																				<label>	Manter	logado	</label>	
																</div>
													</div>
										</div>
										<div	class="d-flex	col-sm-12">	
													<div	class="row	">		
																	<div	class="col-sm-12">
																				<button	type="submit"	>Login</button>	
																	</div>
													</div>		
										</div>
										<div	class="d-flex	col-sm-12">
													<div	class="row">		
															<div	class="col-sm-12">
																	<a	href="./view/cadastro.html">Ainda	não	tem	conta?</a>
																	<a	href="./view/reset.html">Esqueceu	a	senha?</a>
															</div>
													</div>
										</div>
							</form>
				</div>
		</body>
</html>
Fonte: a autora.
109
Figura 18 – Tela de login com "input-group e "input-group-tex
Fonte: a autora.
Outra	 classe	 do	Bootstrap	 5	 que	 pode	 ser	 útil	 para	melhorar	 a	 aparência	 da	
nossa tela de login é a "justify-content-center".	Essa	classe	é	usada	para	centralizar	
elementos	horizontalmente	dentro	de	um	contêiner.	Essa	classe	pode	ser	aplicada	a	
qualquer elemento de nível de bloco que esteja dentro de um contêiner com a classe 
d-flex	(display	flex).	
Falando	em	centralização,	é	importante	destacar	que	o	alinhamento	correto	dos	
elementos é fundamental para a aparência e usabilidade de qualquer interface web. 
Por isso, a classe "justify-content-center" pode ser usada para garantir que os ele-
mentos	dentro	do	contêiner	de	login	estejam	alinhados	corretamente	e	ofereçam	uma	
aparência mais agradável e equilibrada.
Uma	forma	de	melhorar	o	visual	da	tela	de	login	é	aplicando	a	classe "contai-
ner"	junto	com	a	classe	"col-sm-8"	no	lugar	da	d-flex	da	linha	11	do	quadro	15,	definindo	
assim	uma	largura	fixa	para	o	conteúdo	e	centralizando	horizontalmente	na	página.	A	
class	"col-sm-8"	é	outra	classe	do	Bootstrap	que	define	a	largura	da	coluna,	neste	caso,	
ocupando 8 colunas de um total de 12 em telas pequenas (dispositivos com largura me-
nor	ou	igual	a	576	pixels),	permitindo	que	o	restante	da	tela	fique	em	branco.
Quando a classe “container” e "col-sm-8"	 são	utilizadas	em	conjunto	ga-
rantem	que	todos	os	elementos	filhos	do	contêiner	que	estejam	definidas	com	a	classe	
"d-flex"	e	a	classe	 “justify-content-center”	fiquem	centralizados	dentro	do	container.	
Deixando	um	espaço	 igual	à	esquerda	e	à	direita	de	cada	elemento.	 Isso	é	especial-
mente	útil	para	criar	layouts	equilibrados	e	centrados,	especialmente	em	telas	menores,	
onde	o	espaço	horizontal	pode	ser	limitado.
Ao	utilizar	a	classe	"container"	em	nosso	formulário	de	login,	podemos	ter	cer-
teza	de	que	todos	os	elementos	serão	exibidos	de	formaclara	e	organizada,	indepen-
dentemente	do	tamanho	da	tela	ou	do	dispositivo	utilizado	pelo	usuário.	Essa	classe	
ajuda	a	garantir	uma	aparência	consistente	e	profissional	em	todo	o	site,	melhorando	a	
experiência	do	usuário	e	aumentando	a	usabilidade	do	formulário	de	login.
110
Para	adicionar	um	toque	de	elegância,	podemos	utilizar	a	classe	"bg-primary".	
Essa	classe	define	a	cor	de	fundo	do	container	como	a	cor	primária	definida	no	tema	do	
Bootstrap. Ao aplicar essa classe em nosso formulário de login, podemos garantir que 
o fundo da tela esteja de acordo com o restante do site, criando uma aparência coesa 
e	harmoniosa.	A	classe	"bg-primary"	é	especialmente	útil	para	adicionar	um	toque	de	
personalidade ao formulário de login e torná-lo mais atraente visualmente, sem com-
prometer	a	legibilidade	do	texto	ou	a	funcionalidade	do	formulário.
Agora	é	hora	de	estilizar	o	checkbox	do	nosso	formulário	de	 login.	Para	 isso,	
podemos	utilizar	as	classes	"form-check" e "form-switch" do Bootstrap 5. A classe 
"form-check"	é	usada	para	estilizar	elementos	de	seleção	de	opção,	como	checkboxes	
e	radios,	aplicando	estilos	específicos,	como	rótulos	e	bordas	arredondadas.	Já	a	clas-
se	"form-switch"	é	usada	para	estilizar	elementos	de	seleção	de	opção	que	permitem	
alternar	entre	duas	opções,	como	switches.	Essa	classe	cria	o	estilo	de	um	botão	de	
alternância	no	formulário.	Ao	usar	essa	classe,	um	botão	deslizante	é	adicionado	para	
permitir	que	o	usuário	ative	ou	desative	uma	opção	específica.	É	uma	alternativa	mais	
moderna	ao	tradicional	elemento	de	entrada	do	tipo	checkbox.
Ao aplicar essas classes aos nossos aplicativos, podemos garantir que eles se-
jam	exibidos	de	forma	clara	e	organizada,	facilitando	a	seleção	das	opções	desejadas	
pelo	usuário.	Além	disso,	a	utilização	dessas	classes	ajuda	a	manter	a	consistência	vi-
sual do formulário e do site como um todo, aumentando a usabilidade e a qualidade da 
experiência	do	usuário.
A classe "form-check-input"	é	uma	classe	do	Bootstrap	que	define	um	estilo	
para	um	elemento	HTML	do	tipo	"input"	que	é	usado	em	formulários.	Quando	usada	em	
conjunto	com	a	classe	"form-check",	ela	adiciona	um	estilo	de	opção	de	seleção	ao	ele-
mento,	como	um	checkbox	ou	um	switch.	Essa	classe	é	útil	para	criar	opções	de	escolha	
em um formulário de maneira visualmente agradável e consistente. Além disso, a classe 
"form-check-input"	também	pode	ser	usada	para	estilizar	inputs	de	rádio	e	seleções	de	
múltipla	escolha.
A classe "form-check-label" é	 utilizada	 em	 conjunto	 com	 a	 classe	 "form-
-check-input"	para	criar	rótulos	(labels)	personalizados	para	inputs	de	tipo	checkbox	
ou radio button em um formulário HTML. Essa classe é aplicada a um elemento HTML 
(normalmente	um	<label>)	que	está	associado	ao	input	através	do	atributo	"for".	Quando	
o usuário clica no label, o input correspondente é selecionado ou deselecionado, como 
se o usuário tivesse clicado diretamente no input. 
No	quadro	20	é	possível	visualizar	o	código	HTML	da	tela	de	login	com	as	alte-
rações	marcadas	em	cinza.	Após	a	aplicação	das	classes	podemos	observar	a	mudança	
visual em nossa tela de login, que pode ser vista na Figura 19.
111
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE	html>
<html>
		<head>
				<meta	charset=utf-8	/>
				<meta	name="viewport"	content="width=device-width,	initial-scale=1">
				<title>Formulário	de	Login</title>
				<link	href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"	
rel="stylesheet">
		</head>
		<body>
				<div	class="container	col-sm-8	bg-primary">
						<div	class="row">
								<form	method="GET"	action="./home.html">
											<div	class="d-flex	col-sm-12		justify-content-center"	>
													<div	class="row">
															<div	class="col-12-sm	">
																	<h1	class="">Login</h1>
															</div>
													</div>
											</div>
											<div	class="d-flex	col-sm-12	justify-content-center">
													<div	class="row">	
															<div	class="col-sm-12	input-group">
																		<label	class="input-group-text"	for="nome_login">Usuário:	</label>
																		<input	class="form-control"	id="nome_login"	type="text"/>
																</div>
													</div>
													<div	class="row">	
																<div	class="col-sm-12	input-group">
																		<label	class="input-group-text"	for="senha_login"	>Senha:	</label>
																		<input	class="form-control"	id="senha_login"	type="password"/>
															</div>
													</div>
										</div>		
										<div	class="d-flex	justify-content-center	col-sm-4">
													<div	class="row">		
																	<div	class="col-sm-12	form-check	form-switch">
																				<input	class="form-check-input"	role="switch"	type="checkbox"	name="manterlogado"	
value=""	/>								
																				<label	class="form-check-label">	Manter	logado	</label>	
																</div>
													</div>
Quadro 20 – Código da tela do formulário de login com input-group e input-group-text
112
Fonte: a autora.
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
</div>
										<div	class="d-flex	col-sm-12		justify-content-center">	
													<div	class="row	">		
																	<div	class="col-sm-12">
																				<button	type="submit"	>Login</button>	
																	</div>
													</div>		
										</div>
										<div	class="d-flex	col-sm-12	justify-content-center">
													<div	class="row">		
															<div	class="col-sm-12">
																	<a	href="./view/cadastro.html">Ainda	não	tem	conta?</a>
																	<a	href="./view/reset.html">Esqueceu	a	senha?</a>
															</div>
													</div>
										</div>
							</form>
					</div>
				</div>
		</body>
</html>
As alterações no código e na aparência do formulário de login ajudam a torná-lo 
mais	atraente	e	fácil	de	usar,	aumentando	a	usabilidade	e	a	qualidade	da	experiência	do	
usuário.	É	importante	notar	como	a	utilização	das	classes	do	Bootstrap	5	pode	simplifi-
car	o	processo	de	estilização	de	formulários	e	outros	elementos	de	interface	do	usuário,	
facilitando a criação de designs modernos e responsivos em sites e aplicativos web.
Figura 19 - Tela de login com estilização dos campos de entrada
Fonte: a autora.
Com a aplicação das classes do Bootstrap 5 em nosso formulário de login, con-
seguimos	melhorar	significativamente	a	aparência	e	usabilidade	do	mesmo.	As	classes	
"input-group",	"bg-primary",	"form-check"	e	"form-switch"	nos	permitiram	criar	uma	in-
113
3.3 CRIANDO BOTÕES NO BOOTSTRAP 5
Seja para enviar um formulário, iniciar uma ação ou redirecionar para outra pági-
na, os botões são uma parte essencial da maioria das interfaces de usuário. E para criar 
botões modernos e responsivos em nossos projetos web, o Bootstrap 5 nos oferece 
uma série de classes e recursos úteis. Neste tópico, vamos iniciar aprendendo como 
criar	e	personalizar	botões	básicos	no	Bootstrap	5,	com	isso	já	será	possível	criar	botões	
atraentes	e	funcionais	para	nossos	projetos	web,	garantindo	uma	experiência	de	usuá-
rio	de	alta	qualidade	e	uma	interface	profissional.
O	Bootstrap	5	oferece	uma	variedade	de	classes	para	criar	botões	estilizados	e	
personalizados.	Algumas	das	principais	classes	incluem:
• btn: a classe base para criar um botão.
• btn-primary, btn-secondary, btn-success, btn-danger, btn-warning, btn-in-
fo e btn-light:	classes	para	criar	botões	com	cores	predefinidas.
• btn-outline-primary, btn-outline-secondary, btn-outline-success, btn-
-outline-danger, btn-outline-warning, btn-outline-info e btn-outline-light: 
classes	para	criar	botões	com	bordas	coloridas	e	texto	preenchido.
• btn-lg, btn-sm e btn-block:	classes	para	controlar	o	tamanho	do	botão.
• disabled: classe para desativar o botão.
Além	disso,	há	classespara	botões	de	ação,	botões	de	alternância	e	botões	com	
ícones	e	texto	personalizados.	Com	essas	classes,	é	possível	criar	uma	variedade	de	
botões	estilizados	e	personalizados	para	diferentes	necessidades	e	contextos.
terface mais clara e consistente, facilitando a navegação do usuário e aumentando a 
qualidade	da	experiência	de	uso.
Além	disso,	a	utilização	da	classe	"container"	em	conjunto	com	a	classe	"col-
-sm-8"	ajudou	a	criar	um	layout	equilibrado	e	centrado,	garantindo	que	nosso	formulário	
de	login	ficasse	visualmente	agradável	em	telas	de	diferentes	tamanhos	e	resoluções.
Ao	finalizar	este	tópico	de	estilização	de	formulários	com	Bootstrap	5,	fica	evi-
dente	o	poder	e	a	versatilidade	desse	framework,	que	permite	a	criação	de	interfaces	de	
usuário	modernas	e	responsivas	com	facilidade	e	eficiência.	Com	a	prática	e	o	aprimo-
ramento	contínuo	de	nossas	habilidades	em	Bootstrap	5,	podemos	criar	designs	cada	
vez	mais	atraentes	e	funcionais	para	nossos	projetos	web.
Agora	vamos	mergulhar	no	mundo	dos	botões	do	Bootstrap.	Os	botões	são	um	
elemento importante em qualquer interface de usuário, permitindo que os usuários in-
terajam com os elementos de forma intuitiva e fácil. Com as classes do Bootstrap, po-
demos	estilizar	nossos	botões	de	maneira	consistente	e	profissional,	garantindo	uma	
experiência	de	usuário	de	alta	qualidade.	Vamos	começar!
114
A	classe	"btn"	define	um	botão	básico	com	uma	cor	de	fundo	e	borda,	enquan-
to	a	classe	 "btn-success"	acrescenta	o	fundo	verde	específico	de	sucesso	ao	botão.	
Existem	outras	classes	de	cores	para	botões	no	Bootstrap,	como	"btn-primary"	(azul),	
"btn-danger"	(vermelho)	e	"btn-warning"	(amarelo).
Ao	aplicar	a	classe	"btn"	em	um	elemento	<a>,	por	exemplo,	estamos	transforman-
do-o	em	um	botão	estilizado	que	pode	ser	clicado	pelo	usuário.	É	possível	ainda	utilizar	
outras	classes	do	Bootstrap,	como	"btn-primary",	"btn-secondary",	"btn-danger"	e	muitas	
outras	para	modificar	a	aparência	do	botão	de	acordo	com	a	necessidade	do	projeto.
O	código	HTML	<a	class="btn"	href="#URL">Esqueceu	a	senha?</a>	é	um	link	de	
texto	"Esqueceu	a	senha?"	com	a	classe	"btn"	aplicada.	A	classe	"btn"	é	uma	classe	do	
Bootstrap	que	estiliza	o	elemento	como	um	botão,	adicionando	cores	de	fundo,	bordas,	
sombras e outros estilos visuais para torná-lo mais atraente e fácil de clicar. O atributo 
"href"	especifica	o	URL	para	onde	o	usuário	será	direcionado	quando	clicar	no	link.	Neste	
caso,	o	valor	"#URL"	é	apenas	um	exemplo	e	deve	ser	substituído	pelo	URL	correto	para	
a	página	de	redefinição	de	senha.
O	quadro	21	apresenta	as	alterações	realizadas	no	código	HTML	da	tela	de	login	
com a aplicação das classes de botões do Bootstrap. Já na Figura 20, é possível visua-
lizar	o	resultado	final	da	estilização	dos	botões	na	interface	da	tela	de	login.
Quadro 21 – Código da tela do formulário de login sem utilizar o framework Bootstrap 5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE	html>
<html>
		<head>
				<meta	charset=utf-8	/>
				<meta	name="viewport"	content="width=device-width,	initial-scale=1">
				<title>Formulário	de	Login</title>
				<link	href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"	
rel="stylesheet">
		</head>
		<body>
				<div	class="container	col-sm-8	bg-primary">
						<div	class="row">
								<form	method="GET"	action="./home.html">
											<div	class="d-flex	justify-content-center"	>
													<div	class="row">
															<div	class="col-12-sm">
																	<h1	class="">Login</h1>
															</div>
													</div>
											</div>
											<div	class="d-flex	justify-content-center">
115
Fonte: a autora.
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
													<div	class="row">	
															<div	class="col-sm-12	input-group">
																		<label	class="input-group-text"	for="nome_login">Usuário:	</label>
																		<input	class="form-control"	id="nome_login"	type="text"/>
																</div>
													</div>
													<div	class="row">	
																<div	class="col-sm-12	input-group">
																		<label	class="input-group-text"for="senha_login"	>Senha:	</label>
																		<input	class="form-control"	id="senha_login"	type="password"/>
															</div>
													</div>
										</div>		
										<div	class="d-flex	justify-content-center	col-sm-4">
													<div	class="row">		
																	<div	class="col-sm-12	form-check	form-switch">
																				<input	class="form-check-input"	role="switch"	type="checkbox"	name="manterlogado"	
value=""	/>								
																				<label	class="form-check-label">	Manter	logado	</label>	
																</div>
													</div>
										</div>
										<div	class="d-flex	justify-content-center">	
													<div	class="row	">		
																	<div	class="col-sm-12">
																				<button	class="btn	btn-success"	type="submit"	>Login</button>	
																	</div>
													</div>		
										</div>
										<div	class="d-flex	justify-content-center">
													<div	class="row">		
															<div	class="col-sm-12">
																	<a	class="btn	btn-primary"	href="./view/cadastro.html">Ainda	não	tem	conta?</a>
																	<a	class="btn	btn-primary"	href="./view/reset.html">Esqueceu	a	senha?</a>
															</div>
													</div>
										</div>
							</form>
				</div>
		</body>
</html>
116
Podemos	perceber	como	a	estilização	dos	botões	deixou	a	nossa	tela	de	 login	
mais	elegante	e	moderna.	Além	da	estilização	dos	botões,	as	alterações	aplicadas	nos	
campos	de	entrada	também	contribuíram	para	deixar	a	tela	de	login	mais	elegante	e	mo-
derna. Juntos, esses elementos criam uma interface atraente e intuitiva para os usuários.
Figura 20 - Tela de login com aplicação das class btn
Fonte: a autora.
Embora	 tenhamos	 estruturado	 e	 estilizado	 nossos	 formulários,	 ainda	 há	 um	
problema:	se	o	usuário	pressionar	o	botão	de	Login	sem	preencher	os	campos,	o	códi-
go não irá validar a ação e provavelmente gerará um erro na página. Para evitar isso, é 
importante	incluir	uma	validação	nos	campos	do	formulário	para	verificar	se	eles	estão	
em branco. 
Felizmente,	o	Bootstrap	5	possui	classes	prontas	para	nos	auxiliar	nessa	tarefa.	
Vamos	explorar	como	adicionar	a	validação	aos	nossos	formulários	para	evitar	possíveis	
problemas com ações indesejadas. Vamos aprender como aplicá-las ao nosso formulá-
rio para torná-lo ainda mais robusto e seguro.
4 VALIDANDO DE FORMULÁRIOS COM BOOTSTRAP
A validação de formulários é uma etapa importante no desenvolvimento de apli-
cações	web,	pois	ajuda	a	evitar	problemas	com	ações	indesejadas	e	melhora	a	experi-
ência	do	usuário.	Felizmente,	o	Bootstrap	5	possui	classes	prontas	para	auxiliar	nessa	
tarefa,	tornando	o	processo	de	validação	mais	simples	e	eficiente.	Nesta	seção,	vamos	
explorar	como	adicionar	a	validação	aos	nossos	formulários	usando	o	Bootstrap	5.
117
4.1 MECANISMO DE VALIDAÇÃO DO BOOTSTRAP 5
Entre suas diversas funcionalidades, o Bootstrap 5 possui um mecanismo de 
validação de formulários que permite ao desenvolvedor garantir que as informações 
inseridas	pelos	usuários	estejam	corretas	e	de	acordo	com	o	esperado.	Neste	contexto,	
é importante compreender como funciona o mecanismo de validação do Bootstrap 5 e 
como	utilizá-lo	em	seus	projetos.	Agora	iremos	explorar	em	detalhes	o	mecanismo	de	
validação do Bootstrap 5 e suas principais funcionalidades.
Para	realizar	a	validação	de	formulários	utilizando	o	Bootstrap	5,	as	classes	utili-
zadas	são	a	“has-validation”,	"needs-validation"	e	"invalid-feedback".	Quando	aplicamos	
essas	classes	ao	formulário	web,	será	habilitada	a	validação	automática	dos	campos	
utilizando	as	classes	de	validação	padrão	do	Bootstrap	no	 lugar	da	validaçãopadrão	
do	navegador.	É	possível	incluir	validação	nos	elementos	identificados	com	as	classes:	
".form-control",	".form-select"	e	".form-check".
A	 classe	 "has-validation"	 deve	 ser	 adicionado	 o	 elemento	 <div	 class=‘input-
-group”>	do	campo	que	necessita	de	validação,	 indicando	que	o	mecanismo	de	vali-
dação do formulário está ativo. Quando essa classe é adicionada, o Bootstrap adiciona 
automaticamente	as	classes	CSS	"is-valid"	ou	"is-invalid"	a	cada	campo	do	formulário,	
dependendo	 se	o	valor	 inserido	é	válido	ou	não.	 Isso	permite	que	o	Bootstrap	exiba	
mensagens	de	feedback	para	o	usuário	indicando	se	o	campo	foi	preenchido	correta-
mente	ou	não,	com	base	nas	regras	de	validação	definidas	no	HTML	ou	no	JavaScript	
do	formulário.	A	classe	"has-validation"	é	importante	para	garantir	que	o	mecanismo	de	
validação do Bootstrap esteja funcionando corretamente e que o usuário receba fee-
dback	imediato	sobre	seus	dados	de	entrada.
A	classe	“.needs-validation”	é	utilizada	para	indicar	que	um	formulário	precisa	
de validação. Quando essa classe é adicionada ao formulário, o Bootstrap 5 assume que 
os campos dentro dele precisam ser validados antes de serem enviados. Essa classe é 
usada	em	conjunto	com	outras	classes	de	validação,	como	.valid-feedback	e	.invalid-
-feedback,	para	fornecer	feedback	visual	ao	usuário	sobre	o	preenchimento	correto	ou	
incorreto dos campos. Em resumo, a classe .needs-validation é responsável por acionar 
o	mecanismo	de	validação	do	Bootstrap	5	para	o	formulário.	Ao	adicionar	a	classe	"ne-
eds-validation"	em	um	elemento	de	formulário	no	Bootstrap,	o	desenvolvedor	informa	
que	deseja	que	a	validação	seja	realizada	e	que	o	Bootstrap	deve	assumir	o	controle	
do	processo	de	validação.	Combinado	com	o	atributo	"novalidate",	 isso	permite	que	o	
desenvolvedor	personalize	a	validação	do	formulário	sem	depender	da	validação	padrão	
do navegador.
118
O	"novalidate"	é	um	atributo	HTML	que	pode	ser	adicionado	a	um	elemento	de	
formulário	<form>	para	desabilitar	a	validação	padrão	do	navegador.	Isso	significa	que	
o formulário não será validado automaticamente pelo navegador, permitindo que a va-
lidação seja controlada pelo desenvolvedor por meio de scripts ou bibliotecas, como o 
Bootstrap 5.
A	classe	“invalid-feedback”	é	uma	classe	de	estilo	do	Bootstrap	5	que	é	usada	
para	exibir	uma	mensagem	de	feedback	para	o	usuário	quando	o	valor	inserido	em	um	
formulário	é	inválido.	Por	exemplo,	se	o	usuário	não	preencher	um	campo	obrigatório,	a	
classe	.invalid-feedback	pode	ser	usada	para	exibir	uma	mensagem	de	erro	abaixo	do	
campo.	É	comumente	usado	em	conjunto	com	a	classe	“is-invalid”,	que	é	adicionada	
dinamicamente a um elemento do formulário quando ocorre um erro de validação.
A	classe	"valid-feedback"	é	utilizada	no	Bootstrap	para	fornecer	um	feedback	
visual	para	os	usuários	após	a	validação	de	um	formulário.	Quando	um	usuário	preenche	
corretamente	um	campo	que	antes	estava	inválido,	a	classe	"valid-feedback"	é	aplicada	
a	um	elemento	HTML	próximo	ao	campo,	geralmente	uma	tag	<span>	ou	<div>,	e	o	fee-
dback	visual	é	exibido,	indicando	que	o	campo	foi	preenchido	corretamente.
O	feedback	visual	pode	ser	uma	mensagem	simples	de	sucesso	ou	um	ícone,	
dependendo	da	 configuração	 definida	 pelo	 desenvolvedor.	 É	 importante	 notar	 que	 a	
classe	"valid-feedback"	só	é	aplicada	quando	a	validação	do	formulário	é	feita	correta-
mente.	Caso	contrário,	a	classe	"invalid-feedback"	é	aplicada	para	indicar	que	o	campo	
ainda está inválido e precisa ser corrigido.
Algumas boas práticas na validação de formulários incluem:
1. Usar mensagens claras e objetivas para descrever os erros de validação.
2. Validar no servidor e no cliente para garantir que os dados sejam corretos antes de 
serem processados e armazenados no banco de dados.
3. Usar expressões regulares para validar campos como e-mail, telefone e CEP.
4. Evitar a validação excessiva e limitar as validações somente ao que é necessário.
5. Garantir que as mensagens de erro sejam exibidas de forma clara e destacada no for-
mulário.
6. Testar a validação em diferentes navegadores e dispositivos para 
garantir que ela funcione corretamente em todos eles.
7. Considerar a acessibilidade ao desenvolver as mensagens de 
erro e torná-las legíveis por leitores de tela e outras tecnologias 
assistivas.
8. Realizar testes de segurança para garantir que os usuários 
não possam explorar falhas na validação para acessar dados 
ou executar ações não autorizadas.
BOAS PRÁTICAS
119
4.2 CASO DE USO: VALIDAÇÃO TELA DE LOGIN
A validação de formulários é uma etapa crucial no desenvolvimento de aplicações 
web, garantindo que os dados inseridos pelos usuários estejam corretos e coerentes 
com	as	 regras	de	negócio.	Neste	contexto,	o	Bootstrap	5	oferece	diversas	classes	e	
recursos	para	 simplificar	 a	validação	de	formulários,	 como	é	o	caso	da	tela	de	 login.	
Neste	caso	de	uso,	veremos	como	utilizar	esses	recursos	para	validar	um	formulário	de	
login	e	exibir	mensagens	de	erro	personalizadas.
Então, vamos aprimorar a validação dos dados inseridos antes de submeter o 
formulário	para	o	destino.	No	Quadro	22,	é	possível	visualizar	o	código	utilizado	para	a	
validação	da	tela	de	login,	as	inclusões	no	código	estão	destacadas	em	cinza.	A	adição	
da	validação	é	uma	forma	de	fornecer	um	feedback	ao	usuário	e,	utilizando	o	framework	
Bootstrap	5,	isso	é	bastante	simples.	Primeiramente,	adicionamos	o	atributo	"novalidate"	
e	 a	 classe	 ".needs-validation"	 no	 elemento	 <form>,	 o	 que	 desativa	 a	 ferramenta	 de	
feedback	do	navegador	e	sinaliza	que	é	necessária	a	validação	dos	campos	do	formulário.	
Segundo,	adicionar	a	classe	“is-invalid"	no	campo	que	deve	ser	validado	e	que	também	
devem	estar	com	o	atributo	“	required”.	Assim,	para	apresentar	o	feedback	de	validação	
ao	usuário,	devemos	criar	um	container	<div	class="invalid-feedback">	logo	abaixo	dos	
elementos	<input		class="form-control">	que	devem	ser	validados.	Os	elementos	<label>,	
<input	 	 type="text">	 e	 a	 mensagem	 de	 feedback	 do	 <div	 class="invalid-feedback">	
devem	estar	aninhados	dentro	do	container		<div	class="input-group	has-validation">.
Por	fim,	é	necessário	incluir	o	script	para	habilitar	a	validação	do	Bootstrap	no	
formulário,	vamos	incluir	o	exemplo	básico	fornecido	pela	documentação	do	Bootstrap,	
que	 habilita	 a	validação	 dos	 campos	 do	 formulário	 e	 exibe	mensagens	 de	validação	
para	o	usuário.	É	importante	incluí-lo	para	garantir	que	o	formulário	de	login	funcione	
corretamente.	 Faremos	 essa	 inclusão	 antes	 do	 fechamento	 do	 elemento	 <body>	
incluindo	a	tag	<script>,	faremos	neste	momento	dentro	do	arquivo	HTML.
A validação de formulários é uma prática essencial para garantir a integridade e 
a	precisão	dos	dados	que	são	inseridos	pelos	usuários.	Para	isso,	é	importante	realizar	a	
validação	tanto	no	lado	do	cliente,	utilizando	ferramentas	como	o	Bootstrap,	quanto	no	
lado do servidor. Isso é especialmente relevante porque a validação do lado do cliente 
pode ser facilmente manipulada ou desativada pelos usuários. 
Nesse	contexto,	é	fundamental	que	a	validação	seja	feita	também	no	lado	do	
servidor, para garantir que as informações inseridas sejam corretas e seguras. A seguir, 
vamos	explorar	um	caso	de	uso	de	validação	de	formulário	na	tela	de	login.
120
Quadro 22 – Código de validação da tela de login
1
2
3
4
5
6
7
8
9
10 
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE	html>
<html>
		<head>
				<meta	charset=utf-8	/>
				<meta	name="viewport"	content="width=device-width,	initial-scale=1">
				<title>Formulário	de	Login</title>
				<link	href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"	
rel="stylesheet">
		</head>
		<body>
				<div	class="container	col-sm-8	bg-primary">
						<div	class="row">
								<form	class="needs-validation"	method="GET"	action="./view/home.html"	novalidate><div	class="d-flex	justify-content-center"	>
													<div	class="row">
															<div	class="col-12-sm">
																	<h1	class="">Login</h1>
															</div>
													</div>
											</div>
											<div	class="d-flex	justify-content-center">
													<div	class="row">	
															<div	class="col-sm-12	input-group	has-validation">
																		<label	class="input-group-text"	for="nome_login">Usuário:	</label>
																		<input	class="form-control	is-invalid"	id="nome_login"	type="text"	required/>
																		<div	class="invalid-feedback">Informe	o	usuário.</div>
																</div>
													</div>
													<div	class="row">	
																<div	class="col-sm-12	input-group">
																		<label	class="input-group-text"for="senha_login"	>Senha:	</label>
																		<input	class="form-control	is-invalid"	id="senha_login"	type="password"	required/>
																		<div	class="invalid-feedback">Informe	a	senha.</div>
															</div>
													</div>
										</div>		
										<div	class="d-flex	justify-content-center	col-sm-4">
													<div	class="row">		
																	<div	class="col-sm-12	form-check	form-switch">
																				<input	class="form-check-input"	role="switch"	type="checkbox"	name="manterlogado"	
value=""	/>								
																				<label	class="form-check-label">	Manter	logado	</label>	
121
41
42
43
44
45
46
47
48
49
50 
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
																				</div>
															</div>
										</div>
										<div	class="d-flex	justify-content-center">	
													<div	class="row	">		
																	<div	class="col-sm-12">
																				<button	class="btn	btn-success"	type="submit"	>Login</button>	
																	</div>
													</div>		
										</div>																
										<div	class="d-flex	justify-content-center">
													<div	class="row">		
															<div	class="col-sm-12">
																	<a	class="btn	btn-primary"	href="./view/cadastro.html">Ainda	não	tem	conta?</a>
																	<a	class="btn	btn-primary"	href="./view/reset.html">Esqueceu	a	senha?</a>
															</div>
													</div>
										</div>
							</form>
				</div>
				<script>
(()	=>	{
 'use strict'
		//	Fetch	all	the	forms	we	want	to	apply	custom	Bootstrap	validation	styles	to
		const	forms	=	document.querySelectorAll('.needs-validation')
		//	Loop	over	them	and	prevent	submission
		Array.from(forms).forEach(form	=>	{
				form.addEventListener('submit',	event	=>	{
						if	(!form.checkValidity())	{
								event.preventDefault()
								event.stopPropagation()
						}
						form.classList.add('was-validated')
				},	false)
		})
})()
</script>
		</body>
</html>
Fonte: a autora.
122
A validação da tela de login é uma etapa crucial para garantir que o usuário 
insira	 informações	válidas	 e	 evitar	 problemas	no	armazenamento	ou	processamento	
desses	dados.	Ao	utilizar	recursos	do	framework	Bootstrap	5,	não	apenas	a	validação	
é	aprimorada,	mas	também	o	feedback	fornecido	ao	usuário	se	torna	mais	intuitivo	e	
amigável.	Com	isso	em	mente,	vamos	agora	visualizar	como	a	validação	é	apresentada	
na tela de login na Figura 21.
Figura 21 - Tela de login utilizando validação do bootstrap 5
Fonte: a autora.
Descubra como a validação de formulários pode ser mais simples e eficiente 
com o Bootstrap! Acesse agora o link: <https://getbootstrap.com/docs/5.3/
forms/validation/#custom-styles> e aprenda sobre os estilos personalizados 
de validação oferecidos pelo framework.
DICA
Além	disso,	é	importante	ressaltar	a	necessidade	de	realizar	tes-
tes	abrangentes	para	verificar	a	efetividade	da	validação	implementada	
na	tela	de	login	e	em	outros	formulários	do	sistema,	a	fim	de	garantir	a	
qualidade	e	a	segurança	da	aplicação.	É	recomendado	também	man-
ter-se	atualizado	sobre	as	melhores	práticas	e	tecnologias	disponíveis	
para	validação	de	formulários,	para	oferecer	uma	experiência	satisfa-
tória	e	segura	aos	usuários.	Por	fim,	iremos	publicar	nosso	projeto	de	
login	no	GitHub,	para	que	ele	possa	ser	disponibilizado	e	utilizado.
4.3 PUBLICAÇÃO DO PROJETO DE LOGIN NO GITHUB 
A	publicação	de	projetos	em	plataformas	de	hospedagem	de	código,	como	o	Gi-
tHub,	é	uma	prática	essencial	para	o	compartilhamento	e	a	colaboração	em	projetos	de	
software.	Além	disso,	a	disponibilização	do	código-fonte	de	um	projeto	permite	que	outros	
desenvolvedores	possam	estudá-lo,	melhorá-lo	e	utilizá-lo	em	seus	próprios	projetos.	
123
Nesse sentido, a publicação do projeto de login que desenvolvemos é uma etapa 
importante	para	que	outros	possam	ter	acesso	ao	código,	contribuir	com	melhorias	e	uti-
lizar	como	base	para	seus	próprios	projetos.	Nesta	seção,	veremos	o	passo	a	passo	para	
publicar	o	projeto	no	GitHub	e	torná-lo	disponível	para	a	comunidade	de	desenvolvedores.
Criar	uma	página	no	GitHub	Pages	é	uma	maneira	simples	e	rápida	de	dispo-
nibilizar	seus	formulários	online	através	de	uma	URL.	Para	isso,	é	necessário	criar	um	
repositório	no	GitHub	para	hospedar	os	arquivos	HTML	dos	formulários	de	login	e	ca-
dastro.	Para	auxiliar	nesse	processo,	a	tabela	3	apresenta	um	roteiro	com	os	passos	
necessários	para	realizar	a	publicação	dos	formulários.
É	 importante	destacar	que,	após	a	publicação,	é	recomendado	realizar	testes	
rigorosos	para	verificar	a	funcionalidade	dos	formulários	e	garantir	que	tudo	esteja	fun-
cionando	corretamente.	Além	disso,	é	fundamental	manter	os	arquivos	atualizados	e	
utilizar	as	melhores	práticas	para	garantir	a	qualidade	e	segurança	da	aplicação.
Com essas considerações em mente, vamos seguir os passos descritos na tabela 
3	para	publicar	nosso	projeto	de	login	no	GitHub	Pages	e	colocá-lo	em	funcionamento.
Tabela 3 – Roteiro para publicação dos formulários
Fonte: a autora.
Atividade Passo a passo
Acessar o 
github
Acesse	o	link:	https://github.com/.	Caso	não	tenha	conta,	será	necessário	criar.
Acesse o 
repositório
Na lateral superior direita da tela, acessar o ícone da conta e selecionar a 
opção	“Your	Repositories”
Criar no 
repositório
Clica	no	botão	“New”,	escolha	o	nome	do	repositório	e	clique	no	botão	“Create	
repository”.
Como	boa	prática,	escolha	um	padrão	para	nomes	de	repositório>.	Por	exemplo,	
«nomeRepositorio»_github_pages,	então 	um	repositório	com	o	nome	“login”,	
ficaria	“login_github_pages”.
Publicar os 
arquivos
Selecione	o	link	“uploading	an	existing	file”.
Selecionar os 
arquivos
Arraste	os	arquivos	ou	escolha	pelo	link	“choose	your	files”.	Realize	o	upload	dos	
arquivos:	index.html,	view/cadastro.html,	view/reset.html	e	view/home.html
Criar	GitHub	
Pages
Selecione	a	opção	“Settings”,	no	menu	lateral	esquerdo	selecione	“Pages”,	
busque	o	campo	“Build	and	deployment”,	clique	no	combobox	escrito	“None”	
abaixo	do	bloco	Brach	e	selecione	“main”	e	clique	no	botão	“Save”.
Aguarde 
liberação site
Aguarde		aproximadamente	1	minuto	para	criação	da	sua	página,	acessando	a	
opção	“Pages”	do	menu	lateral	para	verificar	se	já	foi	criada	a	página.
Acessando 
o site
Na	opção	“Pages”	do	Menu	“Setting”	aparecerá	um	campo	informando	“Your	
site	is	live	at”	e	o	link	para	seu	site.	Clique	sobre	o	link	e	será	direcionado	para	a	
página de login.
Teste o site
Agora	é	só	realizar	os	testes,	caso	necessário	realize	os	ajustes	que	achar	
necessário.
https://github.com/
124
"Para baixar o projeto já pronto e utilizar como exemplo em seus 
estudos ou projetos pessoais, basta acessar o repositório no 
GitHub pelo link: <https://github.com/profanapaulacostacurta/
loginexemplo_github_pages>. Lá, você encontrará todos os ar-
quivos necessários para implementar o formulário de login em 
sua própria aplicação, além de poder acessar a página publicada 
no GitHub Pages para ver como ficou o resultado final.
DICA
Encerramos	o	terceiro	tópico	doterceiro	tema	de	aprendizagem.	Ao	longo	desse	
conteúdo, aprendemos sobre os elementos e estrutura básica de um formulário, com-
preendemos	a	árvore	DOM	e	conhecemos	os	campos	de	entrada	de	formulários,	além	
dos	atributos	globais	mais	utilizados.	Em	seguida,	abordamos	a	estilização	de	páginas	
com	CSS	e	aprendemos	sobre	o	framework	Bootstrap	5,	utilizando	suas	classes	pré-
-configuradas	em	formulários.	Colocamos	em	prática	tudo	o	que	aprendemos,	criando	
grupos	de	inputs,	realizando	validação	de	campos	e	usando	o	método	de	envio	de	da-
dos. Finalmente, concluímos publicando nosso projeto de formulário de login em um 
repositório	do	GitHub	e	disponibilizando-o	no	GitHub	Pages.	Esperamos	que	esse	con-
teúdo	tenha	sido	útil	para	o	seu	aprendizado.
125
LEITURA
COMPLEMENTAR
Criar um site do GitHub Pages 
Documentação	do	GitHub	
GitHub	Pages	está	disponível	em	repositórios	públicos	com	GitHub	Free	e	Gi-
tHub	Free	para	organizações,	e	em	repositórios	públicos	e	privados	com	GitHub	Pro,	
GitHub	Team,	GitHub	Enterprise	Cloud	e	GitHub	Enterprise	Server.	Os	proprietários	da	
organização	podem	restringir	a	publicação	de	sites	do	GitHub	Pages	em	repositórios	
pertencentes	à	organização.	
Se	você	quiser	criar	um	site	do	GitHub	Pages	para	um	repositório	em	que	nem	
todos	os	arquivos	do	repositório	estejam	relacionados	ao	site,	você	poderá	configurar	
uma	fonte	de	publicação	para	seu	site.	Por	exemplo,	você	pode	ter	um	branch	e	uma	
pasta	dedicados	a	armazenar	os	arquivos	de	origem	do	site	ou	usar	um	fluxo	de	trabalho	
personalizado	do	GitHub	Actions	para	criar	e	implantar	os	arquivos	de	origem	do	site.	
Se	a	conta	que	é	o	proprietário	do	repositório	usar	o	GitHub	Free	ou	o	GitHub	Free	para	
organizações,	o	repositório	precisará	ser	público.	
Caso	deseje	criar	um	site	em	um	repositório	existente,	vá	para	a	seção	"Como	
criar	seu	site".
1. No canto superior direito de qualquer página, use o menu suspenso + e selecione 
New repository
2. Use o menu suspenso Owner e selecione a conta que você deseja que seja proprie-
tária do repositório.
126
3. Digite um nome para o repositório e uma descrição opcional. Se você estiver criando 
um	site	de	usuário	ou	de	organização,	seu	repositório	precisará	ser	chamado	̀ .github.
io`	ou	̀ .github.io`.	Se	o	nome	do	usuário	ou	da	organização	contiver	letras	maiúsculas,	
você precisará colocá-las em minúsculas. 
4.	Escolha	uma	visibilidade	do	repositório.
5.	 Selecione	Inicializar	este	repositório	com	um	README.	
6. Clique em Create repository
127
Antes	de	criar	seu	site,	você	deve	ter	um	repositório	para	seu	site	no	GitHub	En-
terprise	Cloud.	Se	você	não	estiver	criando	seu	site	em	um	repositório	existente,	confira	
"Criar	um	repositório	para	seu	site".
Crie	o	arquivo	de	entrada	para	seu	site.	GitHub	Pages	procurará	um	arquivo	in-
dex.html,	index.md	ou	README.md	como	o	arquivo	de	entrada	do	seu	site.
Se	a	sua	fonte	de	publicação	for	um	branch	e	uma	pasta,	o	arquivo	de	entrada	
precisará	estar	no	nível	superior	da	pasta	de	origem	no	branch	de	origem.	Por	exemplo,	
se	sua	fonte	de	publicação	for	a	pasta	/docs	no	branch	main,	seu	arquivo	de	entrada	
precisará	estar	localizado	na	pasta	/docs	em	um	branch	chamado	main.
Se	a	fonte	de	publicação	for	um	fluxo	de	trabalho	do	GitHub	Actions,	o	artefato	
que você implantar precisará incluir o arquivo de entrada na parte superior do artefato. 
Em	vez	de	adicionar	o	arquivo	de	entrada	ao	seu	repositório,	você	pode	optar	por	fazer	
com	que	o	fluxo	de	trabalho	de	GitHub	Actions	gere	o	arquivo	de	entrada	quando	o	
fluxo	de	trabalho	é	executado.	1.	Configure	a	sua	fonte	de	publicação.	Para	obter	mais	
informações,	confira	"Como	configurar	uma	fonte	de	publicação	para	seu	site	do	GitHub	
Pages".	1.	Abaixo	do	nome	do	repositório,	clique	em		Configurações.
Na	seção	"Code	and	automation"	da	barra	lateral,	clique	em	Pages.
Opcionalmente, para publicar um site de projeto de um repositório privado ou 
interno,	escolha	a	visibilidade	do	seu	site.	Em	"GitHub	Pages",	selecione	o	menu	suspen-
so	Visibilidade	do	GitHub	Pages	e	clique	em	uma	visibilidade.
Fonte: https://docs.github.com/pt/enterprise-cloud@latest/pages/getting-started-with-github-pages /
creating-a-github-pages-site. Acesso em: 15 dez. 2022. 
128
Neste tópico, você aprendeu:
•	 Conhecemos	o	framework	Bootstrap	5,	os	elementos	CSS	predefinidos	para	padro-
nizar	o	visual	das	telas	e	criando	páginas	responsivas,	realizamos	a	delimitação	do	
conteúdo	do	layout	e	a	utilização	dos	pontos	de	interrupção	(breakpoints)	para	definir	
o	comportamento	do	layout	em	tamanhos	de	telas	diferentes.	
•	 Para	usar	o	Bootstrap	5,	é	necessário	indicar	a	folha	de	estilos	correspondente.	Uma	
forma	comum	de	fazer	isso	é	através	da	CDN	do	Bootstrap,	que	possibilita	o	carrega-
mento	remoto	do	framework	e	seus	componentes.
•	 Compreendemos	as	principais	classes	do	framework	Bootstrap	5,	aplicando	no	for-
mulário	de	cadastro,	criamos	grupos	de	campos	de	entradas	e	realizamos	a	união	
de elementos independentes para formatar dois campos de entrada lado a lado na 
mesma	linha.	Conhecemos	a	validação	de	campos	de	entrada	utilizando	o	framework	
Bootstrap	5,	a	forma	de	sinalizar	para	a	página	quais	campos	devem	ser	validados	
utilizando	a	palavra	required na	classe	dos	elementos	<input>.	
•	 Bootstrap	5	possui	classes	prontas	para	auxiliar	na	validação	de	formulários	em	apli-
cações	web.	As	classes	utilizadas	para	validação	são:	"has-validation",	"needs-valida-
tion",	"invalid-feedback"	e	"valid-feedback".
•	 Encerrando,	aprendemos	a	publicar	um	formulário	no	repositório	Github	e	conhece-
mos	o	passo	a	passo	para	publicar	as	páginas	em	uma	página	no	Github	Pages.
RESUMO DO TÓPICO 3
129
AUTOATIVIDADE
1	 “Os	contêineres	são	um	bloco	de	construção	fundamental	do	Bootstrap	que	contém,	
preenche	e	alinha	seu	conteúdo	em	um	determinado	dispositivo	ou	área	de	visuali-
zação	do	usuário	(viewport).”	Os	contêineres	são	o	elemento	de	layout	mais	básico	no	
Bootstrap	e	são	necessários	ao	usar	nosso	sistema	de	grade	padrão.”	Sobre	definição	
de	containers	do	framework	Bootstrap	5,	assinale	a	alternativa	CORRETA:
Fonte:	BOOTSTRAP.	Containers.	Disponível	em:	https://ge-
tbootstrap.com/docs/5.3/layout/containers.	Acesso	em:	30	
jan. 2023.
a)	 (			)	 Existem	três	classes	principais:	largura	fixa	(.container)	e		fluida	(.container-fluid)	
Na	 versão	 fixa	 temos	 tamanhos	 que	 utilizam	 o	 breakpoints	 (.container-«bre-
akpoint»),	que	varia	de	“Extra	small”	com	dimensão	<	576px	até	“Extra	extra	lar-
ge”	com	dimensão	>=	1400px.
b)	 (			)	 São	três	os	principais	elementos	do	grid:	colunas,	linhas	e	tabelas.	A	classe	“.con-
tainer”	é	a	tabela	padrão,	que	possui	uma	largura	fixa,	utilizado	para	tornar	o	site	
responsivo	e	se	adaptar	ao	tamanho	da	tela.
c)	 (			)	 A	classe	col-«breakpoint»-«tamanho»	é	utilizado	para	preenchimento	(p	-	pad-
ding)		que	é	o	espaçamento	dentro	dos	limites	do	conteúdo.	Os	valores	que	po-
dem	ser	utilizados	de	breakpoint	são:	1	a	6	e	os	valores	possíveis	para	o	tamanho	
são: auto e numéricos de 0 a 5.
d)	 (			)	 Para	o	botão	de	controle	de	alternância	(Switch),	utilizamos	a	classe	.form-check	
para	agrupar	os	campos	<div>		e	<button>.	A	classe	utilizada	no	<div>	é	.form-
-check-input	e	para	o	<button>	é	.form-check-label.
2	 Com	framework	Bootstrap	podemos	estender	controles	de	formulários	e	adicionar	
texto,	botões	ou	grupos	de	botões	em	ambos	os	 lados	de	campos	de	entradas	de	
texto.	Existe	flexibilidade	também,	onde	podemos	aplicar	utilitários	de	exibição	para	
criar	um	container	e	itens	flexíveis	com	a	classe	d-flex.	Com	base	na	utilização	das	
classes do Bootstrap 5 para grupo e união de campos, analise as sentenças a seguir:
Fonte:	MDN.	Input	group.	Disponível	em:	https://getbootstrap.
com/docs/5.3/forms/input-group/.	Acesso	em:	30	jan.	2023.
I-	 Utilizando	as	classes	do	framework	Bootstrap,	é	possível	validar	os	campos	dos	for-
mulários	para	apresentar	feedback	ao	usuário,	para	incluir	a	validação	em	um	for-
mulário	usamos	o	atributo	“novalidate”	no	elemento<form>. 
II-	 A	classe	 .needs-validation	no	elemento	<form>,	 realiza	uma	marcação	do	campo	
indicando	que	deve	ser	realizada	a	validação	de	obrigatoriedade	do	campo.	Os	ele-
mentos	que	vão	ser	validados	devem	utilizar	as	classes	.form-control,	.form-select	
e	.form-check.
130
III-	 Um	container	utilizando	a	classe	.invalid-feedback	logo	abaixo	de	um	o	elemento	
<input>	é	utilizado	para	 indicar	que	caso	o	valor	do	campo	seja	 igual	ao	valor	do	
container	feedback	deixará	o	campo	em	vermelho.
Assinale a alternativa CORRETA:
a)	 (			)	 As	sentenças	I	e	II	estão	corretas.
b)	 (			)	 Somente	a	sentença	II	está	correta.
c)	 (			)	 As	sentenças	I	e	III	estão	corretas.
d)	 (			)	 Somente	a	sentença	III	está	correta.
3	 “Formulários	para	pagamentos	são	um	pouco	similares	a	pistas	de	obstáculos.	Cada	
impasse a se superar ou parede a se escalar desacelera o usuário, aumentando a 
probabilidade de desistência. Alguns obstáculos são evitáveis, como regras de for-
matação	arbitrárias	ou	exigências	na	criação	de	senhas.	Alguns	destes	–	como	erros	
de digitação – não são tão facilmente evitáveis assim.” Considerando os conceitos de 
validação	de	um	formulário	HTML	utilizando	framework	bootstrap	5,	classifique	V	para	
as sentenças verdadeiras e F para as falsas:
Fonte: JOTFORM.COM. Como criar um formulário de 
pagamento que seus clientes realmente preencheram 
por completo. Disponível em: https://www.jotform.com/pt/
blog/criar-formas-de-pagamento-inteligentes/. Acesso em 
27	abr.	2023.
(   )	A	classe	 "novalidate"	é	utilizada	para	desativar	a	validação	padrão	do	navegador,	
permitindo que a validação seja controlada pelo desenvolvedor por meio de scripts 
ou bibliotecas, como o Bootstrap 5.
(   )	A	classe	"is-valid"	é	utilizada	para	exibir	uma	mensagem	de	feedback	para	o	usuário	
quando o valor inserido em um formulário é inválido.
(   )	Algumas	boas	práticas	incluem	usar	mensagens	claras	e	objetivas,	validar	no	servi-
dor	e	no	cliente,	usar	expressões	regulares,	evitar	validação	excessiva	
Assinale a alternativa que apresenta a sequência CORRETA:
a)	 (			)	 V	–	F	–	F.
b)	 (			)	 V	–	F	–	V.
c)	 (			)	 F	–	V	–	F.
d)	 (			)	 F	–	F	–	V.
4	 “O	GitHub	Pages	 é	 um	 serviço	 de	 hospedagem	de	 site	 estático	 que	usa	 arquivos	
HTML,	CSS	e	JavaScript	diretamente	de	um	repositório	no	GitHub	e,	como	opção,	
executa	os	arquivos	por	meio	de	um	processo	e	publica	um	site”	Disserte	sobre	os	
três	principais	passos	que	devem	ser	executados	antes	de	acessar	o	site	pelo	 link	
fornecido	pelo	Github.
Fonte: GITHUB DOCS. Disponível em: https://docs.github.com/pt/
pages/getting-started-with- github-pages/about-github-pages. 
Acesso em: 30 jan. 2023.
https://www.jotform.com/pt/blog/criar-formas-de-pagamento-inteligentes/
https://www.jotform.com/pt/blog/criar-formas-de-pagamento-inteligentes/
131
5	 “O	Bootstrap	5	oferece	algumas	classes	para	estilizar	seus	formulários,	onde	os	ele-
mentos	dos	formulários	devem	ser	agrupados	pela	<div	class=”form-group”>	…	</div>	
que	criam	um	espaço	elegante	entres	os	 inputs.	Os	 inputs	por	sua	vez	recebem	o	
estilo da classe form-control que cria um elegante campo de digitação com um ta-
manho	de	 largura	de	 100%.”	Considerando	os	conceitos	de	grupos	de	campos	de	
entrada,	disserte	sobre	os	campos	necessários	para	agrupar	os	elementos	<input>,	
<label>	e	mensagem	de	erro	quando	o	campo	de	entrada	está	vazio.
Fonte: OLIVEIRA, A. Formulários com HTML 5 e BootStrap. 
Disponível em: https://www.blogson.com.br/formularios-com-html-
-5-e-bootstrap/. Acesso em: 30 jan. 2023.
132
133
REFERÊNCIAS
APACHE. Documentação do host virtual Apache.	Disponível	em:	https://httpd.
apache.org/docs/2.4/vhosts/index.html.		Acesso	em:	10	dez.	2022.
CERN	(a).	The birth of the Web.	Disponível	em:	https://home.web.cern.ch/science/
computing/	birth-web.	Acesso	em:	7	dez.	2022.
CERN	(b).	What is HyperText.		Disponível	em:	http://info.cern.ch/hypertext/WWW/
WhatIs.html.	Acesso	em:	7	dez.	2022.
FERREIRA, E.; EIS, D. HTML5:	Curso	W3C	Escritório	Brasil.		2010.	Disponível	em:	https://
www.w3c.br/pub/Cursos/CursoHTML5/html5-web.pdf.	Acesso	em:	22	nov.	2022.
MOZILLA.ORG.	What is a URL?	2022a.Disponível	em:	https://developer.mozilla.org/en-
US/docs/Learn/Common_questions/What_is_a_URL.	Acesso	em:	10	dez.	2022.
MOZILLA.ORG.	Como a Web funciona.	2022b.	Disponível	em:	https://developer.mozilla.
org/pt-BR/docs/Learn/Getting_started_with_the_web/How_the_Web_works.	
Acesso	em:	10	dez.	2022.
MOZILLA.ORG.	What is a Domain Name?	2022c.	Disponível	em:	https://developer.
mozilla.org/en-US/docs/Learn/Common_questions/What_is_a_domain_name.	
Acesso	em:	10	dez.	2022.
MOZILLA.ORG.	Lidando com arquivos.	2022d.	Disponível	em:	https://developer.
mozilla.org/pt-BR/docs/Learn/Getting_started_with_the_web/Dealing_with_files.	
Acesso	em:	10	dez.	2022.
MOZILLA.	ORG.	O que são hyperlinks? 2022e.	Disponível	em:	https://developer.
mozilla.org/pt-BR/docs/Learn/Common_questions/What_are_hyperlinks.	Acesso	
em:	10	dez.	2022.
MOZILLA.	ORG.	O que é um servidor web (web server)? 2022f. Disponível em: 
https://developer.mozilla.org/pt-BR/docs/Learn/Common_questions/What_is_a_
web_server.	Acesso	em:	11	dez.	2022.
MOZILLA.	ORG.	HTML básico.	2023g.	Disponível	em:	https://developer.mozilla.org/pt-
BR/docs/Learn/	Getting_started_with_the_web/HTML_basics.	Acesso	em:	11	dez.	
2022.
134
MOZILLA.	ORG.	HTML:	Linguagem	de	Marcação	de	Hipertexto. 2023h. Disponível em: 
https://developer.mozilla.org/pt-BR/docs/Web/HTML.	Acesso	em:	15	dez.	2022.
NETCRAFT. November 2022 Web Server Survey.	Disponível	em:		https://news.
netcraft.com/	archives/2022/11/10/november-2022-	web-server-survey.html.	Acesso	
em:	7	dez.	2022.	
MDN. Introduction to the DOM. Disponível	em:	https://developer.mozilla.org/en-US/
docs/	Web/API/Document_Object_Model/Introduction.	Acesso	em:	15	jan.	2023.
BOOTSTRAP. Documentos Bootstrap 5.3.0-alpha1.	Disponível	em:	https://
getbootstrap.com//docs/5.3/.	Acesso	em:	15	jan.	2023.
STATCOUNTER. Browser Market Share Worldwide.	Disponível	em:	https://
gs.statcounter.com/	browser-market-share#monthly-202211-202212-bar.	Acesso	em:	
6	dez.	2022.
TANENBAUM, A.; WETHERALL, D. Computer Networks.	5.	ed.	[S.l.]:	Prentice	Hall,	2011.
W3C.ORG.	HTML 5.3: W3C Working Group Note.	Disponível	em:	https://www.w3.org/
TR/2021/	NOTE-html53-20210128/.	Acesso	em:	10	dez.	2022.
135
JAVASCRIPT MODERNO
UNIDADE 2 — 
OBJETIVOS DE APRENDIZAGEM
PLANO DE ESTUDOS
 A partir do estudo desta unidade, você deverá ser capaz de:
• descrever o funcionamento de funções e métodos em JavaScript;
• compreender os principais conceitos e utilização de objetos em JavaScript;
•	 exemplificar	a	utilização	de	formulários	com	estilização	com	framework	Bootstrap	5;
•	 apresentar	ferramentas	de	desenvolvimento	web	e	editor	de	texto	VS	Code.
	 A	cada	tópico	desta	unidade	você	encontrará	autoatividades	com	o	objetivo	de	
reforçar	o	conteúdo	apresentado.
TÓPICO	1	–	PROGRAMANDO	EM	JAVASCRIPT	
TÓPICO	2	–	CRIANDO	FORMULÁRIO	WEB
TÓPICO	3	–	OBJETOS	EM	JAVASCRIPT
Preparado para ampliar seus conhecimentos? Respire e vamos em frente! Procure 
um ambiente que facilite a concentração, assim absorverá melhor as informações.
CHAMADA
136
CONFIRA 
A TRILHA DA 
UNIDADE 2!
Acesse o 
QR Code abaixo:
137
TÓPICO 1 — 
PROGRAMANDO EM JAVASCRIPT
UNIDADE 2
1 INTRODUÇÃO 
Acadêmico,	neste	Tema	de	Aprendizagem	1,	abordaremos	três	macroassuntos:	
Funções;	Modelo	de	Objeto	de	Documentos	(DOM);	e	Introdução	ao	mudo	dos	formulá-
rios	em	JavaScript.
No	subtema	2,	será	apresentado	a	sintaxe	de	definição	de	uma	função	de	de-
claração	e	aprenderemos	como	definir	e	chamar	as	funções.	Entenderemos	como	fun-
ciona	o	escopo	das	variáveis	e	como	visualizarmos	através	de	exemplos	como	acontece	
o	sombreamento	(shadowing)	dentro	de	uma	função.	Aprenderemos	como	realizar	re-
torno de valores em uma função, pois o escopo da função só existe durante sua execu-
ção.	Apresentaremos	o	básico	sobre	funções	anônimas	e	flecha	(arrow).
No	subtema	3,	aprenderemos	sobre	o	DOM	que	representaa	estrutura	do	HTML	
em	formato	de	árvore	de	nós.	Entenderemos	como	selecionar	e	manipular	os	elementos	
de	um	objeto	DOM,	por	último	apresentaremos	como	realizar	o	gerenciamento	de	atri-
butos	de	objetos	DOM.	
No	último	subtema,	falaremos	sobre	Estrutura	de	formulários	web,	conhecere-
mos	os	elementos	e	atributos	para	criação	de	um	formulário.	Entenderemos	o	funcio-
namento	dos	campos	de	entrada	e	atributos	globais	e	controle	de	texto.	Criaremos	um	
formulário	de	login	utilizando	campos	de	entrada,	campos	de	seleção,	botão	e	links.
2 FUNÇÕES 
Quando temos a necessidade de executar o mesmo código mais de uma vez, po-
demos	nos	beneficiar	com	a	utilização	da	criação	de	um	bloco	de	código	que	pode	ser	cha-
mado	de	forma	simplificada	todas	as	vezes	que	forem	necessárias,	chamado	de	funções.
Para	definir	uma	função	usamos	a	palavras	reservada	function e um par de parênte-
ses	“()”	após	o	nome	da	função.	O	código	que	será	executado	quando	a	função	for	chamada	
fica	dentro	do	bloco	de	par	de	chaves	“{}”.	Para	invocar	uma	função	já	declarada	é	necessário	
apenas	digitar	o	nome	da	função	seguindo	por	um	par	de	parênteses	“()”	(MDN,	2023a).
Na	figura	1,	podemos	conhecer	a	sintaxe	da	função	de	declaração	(function de-
claration).	Existem	algumas	variações	da	sintaxe,	que	são	muito	similares	à	da	função	
de	declaração,	por	isso	normalmente	não	é	feita	distinção	entre	os	tipos.	Essas	varia-
ções,	muitas	vezes,	são	chamadas	de:	funções	anônimas	(anonymous function),	fun-
ção	construtora	(constructor function)	e	função	flecha	(arrow function)	(MDN,	2023a).	
138
As funções anônimas e a função flecha veremos na sequência ainda 
nesse tema de aprendizagem. As funções construtoras estudaremos 
juntos com as classes no próximo tema de aprendizagem.
ESTUDOS FUTUROS
Figura 1 - Sintaxe de definição de uma função de declaração
Fonte: a autora
No	Quadro	1,	temos	o	código	da	definição	e	invocação	de	uma	função.	A	função	
abaixo,	apenas	exibe	um	alerta	na	tela	com	a	mensagem	“Olá”.
Quadro 1 - Definição e invocação da função
Fonte: a autora.
1
2
3
4
function	minhaFuncao()	{	// Definição da função
		alert('Olá');
}
minhaFuncao();	// Chamada ou Invocação da função
Algumas	funções	podem	exigir	parâmetros,	que	são	valores	que	são	incluídos	
dentro	 do	 par	 de	 parênteses	 após	 o	 nome	da	 função	 na	 declaração.	 Os	 parâmetros	
podem	ser	opcionais	e	quando	não	informados	pode	ser	definido	para	receber	um	valor	
padrão	(MDN,	2023a).	
No	quadro	2,	podemos	ver	um	exemplo	de	definição	e	chamada	das	funções	
com a passagem de parâmetros e sem informar parâmetros sendo opcionais pois foi 
definido	um	valor	padrão.
139
Aprofunde o conhecimento sobre parâmetros predefinidos no link: 
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/
Functions/Default_parameters.
DICA
Quadro 2 - Definição e invocação da função myFunction()
Fonte: a autora.
1
2
3
4
5
6
7
function	ola(nome	=	'Ana')	{ // Declaração da Função ola com valor Ana default
		console.log(‘Olá	‘	+	nome	+	‘!’);
}
// Chamada da função ola com passagem de parâmetros
ola('Maria'); // Saída no console -> Olá Maria!
// Chamada da função ola, sem passagem de parâmetro e uso do parâmetro padrão
ola();	 // Saída no console -> Hello Ana!
Uma boa prática para produzir código limpo, é utilizar prática de escre-
ver práticas compostas utilizando convenção de nomenclatura camel-
Case para variáveis e funções, que consistem em escrever a primeira 
palavra em minusculo e as demais palavras com a primeira em maiús-
culo e sem espaço entre as palavras. Variáveis globais e constantes a 
convenção é utilizar escrita toda em maiúscula.
IMPORTANTE
2.1 ESCOPO E SHADOWING 
As	variáveis	e	outros	itens	definidos	dentro	da	função	tem	seu	próprio	escopo,	
sendo	esses	inacessíveis	para	o	código	fora	da	função.	
O	escopo	pode	ser	definido	como:
É	o	contexto	atual	de	execução,	em	que	valores	e	expressões	são	
"visíveis"	ou	podem	ser	referenciadas.	Se	uma	variável	ou	outra	ex-
pressão	não	estiver	"no	escopo	atual",	então	não	está	disponível	para	
uso.	Os	escopos	também	podem	ser	em	camadas	em	uma	hierarquia,	
de	modo	que	os	escopos	dos	filhos	tenham	acesso	aos	escopos	dos	
pais,	mas	não	vice-versa	(MDN,	2023a,	s.p.).
140
O	escopo	global	é	o	mais	alto	nível,	quando	definidos	são	acessados	em	qual-
quer	lugar	do	código.	Quando	temos	as	mesmas	variáveis	no	escopo	global	e	no	escopo	
da	função	a	variável	que	está	dentro	da	função	sombreia	(shadowing)	a	variável	global	
(MDN,	2023a).
No	quadro	3,	temos	um	exemplo	de	código	JavaScript	para	entendermos	me-
lhor	o	escopo	global	e	shadowing.
Quadro 3 - Código JavaScript sobre escopo
Fonte: a autora.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const	x	=	1;	// todas as funções têm acesso
// Chamadas das funções
primeiraFuncao();
segundaFuncao();
imprimir("Imprimir	X:"+x);	// vai imprimir valor 1 e não o valor x da primeiraFuncao
function	primeiraFuncao()	{		// Declaração da primeira função
						const	y	=	2,	x	=4;
						imprimir("Imprimir	Y:"+y);
						imprimir("Imprimir	X:"+x); // vai imprimir valor 4 e não valor 1 da constante global
						imprimir(z); // ERRO: a primeiraFuncao não tem acesso a constantes z
}
function	segundaFuncao()	{	 // Declaração da segunda Função
						const	z	=	3;
						imprimir("Imprimir	Z:"+z);
						imprimir("Imprimir	X:"+x);	// vai imprimir o valor 1 da constante global
						imprimir(y);	// ERRO: a segundaFuncao não tem acesso a y
}
// Valores são passados como parâmetro para função imprimir, pois não tem acesso
function	imprimir(valor)	{ // a função imprimir não tem acesso as constantes y e z
 	console.log	("Valor:"+	valor);
}
2.2 RETORNO DE FUNÇÕES 
As	funções	executam	um	bloco	de	código	e	tudo	que	for	realizado	dentro	da	
função	não	 será	 acessível	 pelo	 resto	do	código,	 ou	 seja,	ficará	dentro	do	escopo	da	
função.	Algumas	funções	não	retornam	valor	e	outras	retornam	valores	ao	final	da	exe-
cução,	para	nas	funções	que	retornam	valor	utiliza-se	a	palavra	return para indicar o 
retorno	dos	valores	da	função	(MDN,	2023a).
141
Quadro 4 - Código da função que calcula fatorial
Fonte: a autora.
1
2
3
4
5
6
7
8
function	factorial(numero)	{ // Declaração da função fatorial
		var	x	=	numero;
		while	(x	>	1)	{
				numero	*=	x-1;
 x--;
		}
 return numero; // Retorno da Função
}
Lembrando	que	para	executar	uma	função	JavaScript	em	uma	página	HTML,	
implementamos	o	código	dentro	das	tags	“<script>”	e	“</script>”,	conforme	segue.
Fonte: a autora.
<html>
<script>
function	factorial(numero)	{ // Declaração da função fatorial
		var	x	=	numero;
		while	(x	>	1)	{
				numero	*=	x-1;
 x--;
		}
 return numero; // Retorno da Função
}
factorial(10);
</script>
<body>
</body
</html>
No	quadro	4,	temos	um	exemplo	de	código	de	uma	função	que	calcula	o	fatorial,	
para	entendermos	melhor	o	retorno	da	função.	
142
2.3 FUNÇÃO ANÔNIMA E FUNÇÃO FLECHA
O	que	é	chamado	de	função	anônima	é	uma	função	sem	nome	e	a	função	fle-
cha	possui	uma	sintaxe	mais	curta	que	a	função	de	declaração	(MDN,	2023a).	Na	figura	
2,	apresentamos	a	sintaxe	da	função	anônima,	a	recomendação	de	utilização	desse	tipo	
de	função	é	para	eventos	conforme	exemplo	do	quadro	5.
Figura 2 - Sintaxe da função anônima
Fonte: a autora.
Na	figura	3,	apresentamos	a	sintaxe	básica	da	função	flecha,	que	é	uma	simpli-
ficação	da	sintaxe	da	função	de	declaração.	
Quadro 5 - Código de exemplo da função anônima
Fonte: a autora.
1
2
3
meuBotao.onclick	=	function(a,	b)	{
			alert	(a	+	b);
}
Para conhecer a sintaxe avançada da função flecha, acessando o site no 
link: https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/
Functions/Arrow_functions#sintaxe 
DICA
143
Figura 3 - Sintaxe da função flecha
Fonte: a autora.
No	quadro	6,	podemos	ver	um	código	de	exemplo	da	função	flecha	e	a	compa-
ração	com	as	duas	outras	formas	de	declaração:	tradicional	e	anônima.
Quadro 6 - Exemplo de função flexa
Fonte:a autora.
1
2
3
4
5
6
7
8
9
10
11
function	comprimentar(nome)	{	// declaração da função
		return	'Olá,	'	+	nome	+'!';
}
var	comprimentar2	=	function	(nome)	{	// declaração de função anônima
		return	'Olá,	'	+	nome	+'!';
}
var	comprimentar3	=	(nome)	=>	'Olá,	'	+	nome	+'!';	//declaração da função flecha
// chamada das funções
console.log(comprimentar('Ana'));
console.log(comprimentar2('Joao'));
console.log(comprimentar3('Maria'));
3 MODELO DE OBJETOS DE DOCUMENTOS
O	modelo	de	objetos	de	documentos	(Document	Object	Model	-	DOM)	repre-
senta	um	documento	HTML	como	uma	hierarquia	ou	árvore	de	nós.	O	DOM	é	uma	re-
presentação	da	página	web	com	paradigma	orientação	a	objetos	que	pode	sofrer	modi-
ficação	com	a	linguagem	JavaScript	(MDN,	2023c).
144
Não confundir DOM com o modelo de objetos do navegador 
(Browser Object Model - BOM). O Bom é utilizado para intera-
gir com o navegador, podemos citar alguns métodos que são 
utilizados: console.log(), alert(“”) e prompt() .
DICA
3.1 HIERARQUIA DE NÓS
DOM	é	uma	interface	de	programação	de	aplicativo	(API)	independente	de	lin-
guagem	de	programação	para	HTML	e	XML.	Considere	o	trecho	de	um	documento	HTML	
apresentado	no	Quadro	7.
Quadro 7 - Documento HTML
Fonte: a autora.
1
2
3
4
5
6
7
8
9
<html	lang="pt">
		<head>
				<title>Meu	Documento</title>
		</head>
		<body>
				<h1>Meu	Cabeçalho</h1>
				<a	href=”URL”>Meu	Link</a>
		</body>
</html>
O	documento	HTML,	do	quadro	7,	possui	uma	árvore	DOM	(Figura	4),	na	qual	
temos	os	dados	e	objetos	fundamentais	do	DOM	(MDN,	2023c):
•	 Documento	(Document)	que	é	o	objeto	raiz	representação	do	documento	HTML.
•	 Nós	(Node)	são	todos	os	objetos	do	documento	HMTL.
•	 Elemento	(Element)	é	o	tipo	de	nó	que	representa	as	tag	do	documentos	HTML.
•	 Atributos	(Attribute)	é	o	tipo	de	nó	que	representa	os	atributos	das	tag do documentos 
HTML.
•	 Texto	(Text)	é	o	tipo	de	nó	que	representa	o	texto	que	fica	entre	a	tag	de	abertura	e	
tag	de	fechamento.
145
Figura 4 - Árvore DOM
Fonte: a autora.
3.2 SELECIONANDO E MANIPULANDO ELEMENTOS DO 
OBJETO DOM
Os	dados	da	árvore	DOM	podem	ser	 incluídos,	excluídos	ou	modificados	pelo	
JavaScript.	Vamos	conhecer	os	métodos	básicos	de	seleção	dos	elementos	e	manipu-
lação	de	elementos	na	Tabela	1,	os	métodos	apresentados	retornam	um	objeto	Element 
e	estão	disponíveis	apenas	no	objeto	document (MDN,	2023c).
Tabela 1 - Métodos de seleção e manipulação de elementos do documento
Fonte: adaptado de MDN (2023b).
Tipo Sintaxe Descrição
Seleção
document.getElementById(id) Seleção por Id
document.getElementsByName(nome)	 Seleção pelo nome
document.getElementsByTagName(nomeTag) Seleção pelo nome da tag
document.getElementsByClassName(nomeClass) Seleção pelo nome da classe
Manipulação document.createElement(htmltag) Criar	elementos
146
Vejas outros métodos que são utilizados com objeto document, no link: 
https://developer.mozilla.org/en-US/docs/Web/API/Document#instance_
methods
DICA
3.3 GERENCIANDO ATRIBUTOS 
No	carregamento	da	página	HTML,	o	navegador	gera	os	objetos	DOM	do	docu-
mento,	converte	os	atributos	dos	elementos	HTML	em	propriedades	de	objetos	DOM.	Os	
métodos	que	acessam	os	atributos	podem	ser	vistos	na	Tabela	2.
Tabela 2 - Métodos de acesso aos atributos de objetos DOM
Fonte: adaptado de MDN (2023b).
Objeto Sintaxe Descrição
Element
element.getAttribute(name) Seleção por Id
element.setAttribute(name,	value) Seleção pelo nome
element.hasAttribute(name) Seleção pelo nome da tag
element.removeAttribute(name) Seleção pelo nome da classe
element.attributes
Coleção	ativa	de	atributos	de	um	elemento	
(NamedNodeMap)
Document document.querySelector('#id') Seleciona o atributo pelo id
Vejas como manipular um NamedNodeMap, no link: 
https://developer.mozilla.org/en-US/docs/Web/API/NamedNodeMap
DICA
Colocaremos em prática a manipulação dos objetos Element e Document 
mais adiante.
ESTUDOS FUTUROS
https://developer.mozilla.org/en-US/docs/Web/API/Document#instance_methods
https://developer.mozilla.org/en-US/docs/Web/API/Document#instance_methods
https://developer.mozilla.org/en-US/docs/Web/API/NamedNodeMap
147
4 VISÃO GERAL DE FORMULÁRIOS WEB
Os	formulários	são	poderosos	para	realizar	a	interação	com	os	usuários,	inicia-
remos	nos	estudos	com	os	 requisitos	básicos,	 estrutura,	 estilo,	 controles	e	entradas	
para	construir	formulários	simples	em	HTML.	Finalizando,	estudaremos	como	realizar	a	
validação	e	envio	dos	formulários	(MDN,	2023b).
4.1 ESTRUTURA
Os	formulários	são	compostos	por	um	ou	mais	elementos	de	interação,	conhe-
cidos	por		widgets,	podendo	ser:	campos	de	texto	de	linha	única	ou	múltiplas	linhas,	cai-
xas	de	seleção,	botões,	menus,	ícones,	barra	de	rolagem,	checkboxes,	radio	buttons	e	
outros.	A	principal	diferença	de	um	documento	HTML	tradicional	para	um	formulário	em	
HTML	é	que	os	formulários	enviam	os	dados	coletados	para	um	destino	(MDN,	2023b).	
No	quadro	8,	visualizamos	o	esqueleto	básico	de	um	formulário	HTML.
Quadro 8 - Código HTML do formulário de login
Fonte: a autora.
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE	html>
<html>
		<head>
				<meta	charset=utf-8	/>
				<meta	name="viewport"	content="width=device-width,	initial-scale=1.0">
				<title>Formulário</title>
		</head>
		<body>
				<form	method=””	action=””>
						…	//	Aqui	que	serão	incluídos	os	widgets.
					</form>
		</body>
</html>
O	elemento	<form>	define	o	formulário,	um	formulário	sempre	deve	iniciar	com	
esse	elemento.	Os	principais	atributos	do	formulário	são:	method e action.	O	atributo	
method	define	a	forma	do	protocolo	HTTP	enviar	os	dados	e	o	atributo	action	informa	o	
endereço	URL	de	destino	do	dos	dados.
148
4.2 CAMPOS DE ENTRADA
Existem	vários	elementos	HTML,	vamos	entender	apenas	os	elementos	que	se-
rão	usados		no	formulário	de	login	apresentado	na	Figura	5.
Usaremos	os	seguintes	elementos:	<label>,	<input>,	<a>	e	<button>,	na	tabela	3	
possui	a	descrição	sobre	cada	elemento.
Figura 5 - Layout tela de login
Fonte: a autora.
Tabela 3 - Elementos do formulário de login
Fonte: adaptado de MDN (2023b).
Elemento Descrição
<label>
Rótulo	dos	campos	de	um	formulário.	O	atributo	for	é	utilizado	para	realizar	a	vin-
culação	com	um	campo	do	formulário,	o	valor	do	atributo	deve	ser	o	id	do	campo.	
<input>
Campos	de	um	formulário.	O	atributo	type	define	o	comportamento	do	campo.	Para	
criar	os	campos	utilizamos:		“text”	para	campo	texto,	“password”	para	campo	senha,	
“checkbox”	para	caixa	de	seleção	e	button	para	campo	botão.
<a>
Elemento	ancora,	utilizado	para	criação	de	um		link	ou	hiperlink.	O	atributo	href	é	
o	local	que	informamos	o	destino	que	o	link	irá	levar,	sendo	que	pode	ser	seção	da	
página,	URL,	telefone	e	email.
<button>
Elemento	botão	para	incluir	o	evento	de	envio	do	formulário.	Existem	três	tipos	de	
botão:	submit,	reset,	button.	O	atributo	type	do	botão	por	padrão	é	submit,	logo	caso	
não	seja	informado	o	atributo	terá	o	comportamento	submit.	Quando	informado	o	
atributo	type	igual	a	button,	podemos	criar	botões	personalizados,	sendo	necessário	
a	criação	do	comportamento	no	código	JavaScript.
149
Nos valores de atributos como ID e name, é recomendado que não 
se utilize o padrão camelCase, e sim utilizar o padrão separado por “_” 
entre as palavras todas escritas em minúsculo, por exemplo “nome_log” 
para diferenciar das classes que utilizam “-”.
DICA IMPORTANTE
Saiba mais sobre os assuntos abaixo: 
• Elemento input: https://developer.mozilla.org/pt-BR/docs/
Web/HTML/Element/Input
• Hiperlink: https://developer.mozilla.org/pt-BR/docs/Web/
HTML/Element/a
• Diferença entre <button> e <input>: https://developer.mozilla.
org/pt-BR/docs/Web/HTML/ Element/Input/button
• Input do tipo checkbox: https://developer.mozilla.org/pt-BR/
docs/Web/HTML/Element/Input/checkbox
DICA
Veremos os métodos GET e POST mais adiante.
ESTUDOS FUTUROS
No	Quadro	9,	visualizamos	um	formulário	HTML	com	implementação	do	layout	
apresentado	na	Figura	5.
150
Quadro 9 - CódigoHTML do formulário de login
Fonte: a autora.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE	html>
<html>
		<head>
				<meta	charset=utf-8	/>
				<meta	name="viewport"	content="width=device-width,	initial-scale=1.0">
				<title>Formulário	de	Login</title>
		</head>
		<body>
				<form	method="post"	action="">
						<h1>Login</h1>	
						<p>	
								<label	for="nome_login">Usuário:	</label>
								<input	id="nome_login"	name="nome_login"	type="text"/>
						</p>
						<p>	
								<label	for="senha_login">Senha:	</label>
								<input	id="senha_login"	name="senha_login"	type="password"/>
						</p>
						<p>		
								<label>	
												<input	type="checkbox"	name="manterlogado"	value="sim"	/>	Manter	logado							
								</label>
						</p>
						<p>	<button	type="submit"	>Login</button>	</p>
						<p>	<a	href="#URL">Ainda	não	tem	conta?</a></p>
							<p>	<a	href="#URL">Esqueceu	a	senha?</a></p>
				</form>
		</body>
</html>
Existem algumas formas de utilizar o <input>, duas formas foram utilizadas no quadro 9.
• A primeira forma é com o <label> na linha 12 e <input> na linha 13, vinculamos os dois 
elementos através do atributo for do elemento <label> que deve ter o mesmo identifi-
cador do id do <input>. 
• A segunda forma é com o <input> aninhado dentro do <label>, como 
está apresentado na linha 20 à 21. Desta maneira é opcional o atri-
buto for do <label> e o id do <input>.
Saiba mais sobre checkbox no link: https://developer.mozilla.org/
pt-BR/docs/Web/HTML/ Element/Input/checkbox#valor
DICA
151
4.3 ATRIBUTOS GLOBAIS E CONTROLE DE TEXTO
Cada	elemento	de	um	formulário	possui	seus	próprios	atributos,	mas	existem	
alguns	atributos	que	são	comuns	a	todos	os	elementos	de	formulário.	Na	Tabela	4,	apre-
sentamos	alguns	dos	atributos	comuns	e	suas	respectivas	descrições.
Tabela 4 - Atributos comuns para elementos do formulário
Fonte: adaptado de MDN (2023b).
Atributo Descrição
autofocus
Elemento	que	estará	em	foco,	valor	padrão	é	falso.	Somente	um	elemento	do	for-
mulário	por	estar	com	esse	atributo	ativo.
disable
Desabilita	a	interação	com	o	elemento,	se	o	elemento	não	possui	o	atributo	es-
pecificado,	adota	o	valor	padrão	que	é	falso	indicando	que	o	elemento	está	ativo.
name Indica	o	nome	do	elemento,	sendo	enviado	juntamente	com	os	dados	do	formulário.
value Valor	inicial	do	elemento.
Os	campos	textos	são	os	elementos	básicos	de	interação	de	um	formulário	e	
são	controles	simples	de	entrada	de	um	dado	não	formatado,	a	forma	de	definir	é	uti-
lizado	<input>.	É	possível	definir	vários	tipos	de	campos	textos,	mas	é	possível	definir	o	
comportamento	que	o	campo	assumirá	do	campo	através	do	atributo	type.	Assim	como	
os	formulários,	os	controles	de	texto	também	têm	comportamentos	comuns,	na	Tabela	
5	citamos	alguns.
Tabela 5 - Atributos comuns para os controles de texto
Fonte: adaptado de MDN (2023b).
Atributo Descrição
readonly
Não	pode	ser	modificado,	porém	o	valor	de	entrada	ainda	é	enviado	juntamente	
com	os	dados	do	formulário.	
disabled Mesmo	comportamento	do	readonly,	porém	os	dados	não	serão	enviados.
placeholder
Texto	que	descreve	de	forma	breve	o	campo	de	entrada,	apresentado	dentro	do	
campo.
size Definição	do	tamanho	físico	do	campo
maxlength Definição	de	máximo	de	caracteres	que	podem	ser	inseridos.
spellcheck Verificação	ortográfica,	caso	o	navegador	suporte.
hidden
Usado	para	criar	um	controle	do	formulário	com	dados	que	devem	ser	enviados	
para	o	servidor	mas	não	deve	ser	visto	pelo	usuário.
152
Veremos os métodos GET e POST mais adiante.
ESTUDOS FUTUROS
Saiba mais sobre:
• Atributos globais: 
https://developer.mozilla.org/pt-BR/docs/ Web/HTML/Global_attributes
• Controle de caixa de seleção e botões de opção: 
https://developer.mozilla.org/en-US/docs/Learn/Forms/Basic_native_
form_controls#checkable_items_checkboxes_and_radio_buttons
DICA
	Neste	tema	de	aprendizagem,	pudemos	compreender	melhor	conceitos	e	suas	
aplicações,	como	por	exemplo	funções,	DOM,	gerenciamento	de	atributos	e	seus	dife-
rentes	tipos,	e	um	breve	visualização	de	formulários	simples	e	seus	detalhes	como	cam-
po	de	entrada.	Nos	aprofundamos	um	pouco	mais	à	pontos	específicos	como	sintaxe	e	
definição	de	uma	função,	a	invocação	destas,	sua	atuação	e	importância	detalhada	nos	
códigos.	
https://developer.mozilla
153
Neste tópico, você aprendeu:
•	 Funções	facilitam	a	criação	de	trechos	de	códigos	executados	diversas	vezes.	Utili-
zamos o termo function()	para	definir	uma	função.	Conhecemos	a	sintaxe	básica	para	
definir	uma	função	de	declaração.	Entendemos	como	funciona	o	escopo	global	e	es-
copo de funções, visualizamos como ocorre o sombreamento (shawing)	das	variáveis	
dentro	do	bloco	das	funções.	
•	 Tudo	que	for	executado	e	variáveis	criadas	dentro	da	função	não	podem	ser	acessa-
das	pelo	resto	do	código,	por	isso	é	necessário	criar	retorno	da	função	caso	seja	ne-
cessário.	Visualizamos	os	conceitos	básicos	de	funções	anônimas	e	funções	flecha	
(arrow).
•	 O	DOM	é	a	representação	do	documento	HTML	em	forma	de	árvore,	representando	
a	página	web	no	paradigma	de	orientação	a	objeto.	Entendemos	como	selecionar	e	
manipular	os	elementos	do	objeto	DOM,	conhecemos	como	é	realizado	o	gerencia-
mento	dos	atributos	dos	elementos	HTML.	
•	 Formulários	 são	utilizados	 para	 realizar	 a	 interação	 com	os	 usuários,	 entendemos	
que	a	diferente	do	formulário	web	para	um	HTML	tradicional	é	que	o	primeiro	envia	os	
dados	coletados	para	um	destino.	Conhecemos	a	forma	que	é	realizada	a	entrada	de	
dados	e	criamos	um	formulário	de	login.
RESUMO DO TÓPICO 1
154
AUTOATIVIDADE
1	 “A	definição	de	uma	função	não	a	executa.	Definir	a	função	é	simplesmente	nomear	
a	função	e	especificar	o	que	fazer	quando	a	função	é	chamada.	Chamar	a	função	
executa	realmente	as	ações	especificadas	com	os	parâmetros	indicados.”	
Fonte:	MDN.	Funções.	Disponível	em:	https://developer.
mozilla.org/pt-BR/docs/Web/JavaScript/Guide/	Functions.	
Acesso	em:	30	jan.	2023.
Sobre	definição	e	chamada	de	função,	assinale	a	alternativa	CORRETA:
a)	 (			)	 Existindo	a	necessidade	de	executar	o	código	repetidas	vezes	e	em	várias	partes	
do	código,	pode-se	criar	funções.	As	chamadas	de	função	é	uma	forma	simpli-
ficada	de	executar	o	mesmo	código	várias	vezes	tantas	quanto	forem	necessá-
rias.
b)	 (			)	 Para	definir	uma	função	usamos	a	palavras	reservada	“fun”	e	um	par	de	colche-
tes	“{}”	após	o	nome	da	função.	O	código	que	será	executado	quando	a	função	
for	chamada	fica	dentro	do	bloco	de	parênteses	“()”.
c)	 (			)	 O	escopo	global	é	o	mais	baixo	nível,	quando	definidos	são	acessados	apenas	no	
lugar	do	código	que	foi	declarado.	Quando	temos	as	mesmas	variáveis	no	escopo	
global	e	no	escopo	da	função,	a	variável	global	sombreia	(shadowing)	a	variável	
da	função.
d)	 (			)	 Tudo	que	é	executado	dentro	da	função	pode	ser	acesso	pelo	resto	do	código,	ou	
seja,	ficará	no	escopo	global.	O	retorno	de	função	ao	final	da	execução	da	função	
é	opcional,	visto	que	o	resto	do	código	tem	acesso	ao	resultado	dos	valores	de	
operações realizadas dentro da função, o retorno da função é utilizado apenas 
para	facilitar	a	leitura	do	código.
2	 “O	DOM	(Document	Object	Model)	é	a	representação	de	dados	dos	objetos	que	com-
põem	a	estrutura	e	o	conteúdo	de	um	documento	na	Web.	Neste	guia,	apresentamos	
brevemente	o	DOM.”	
Fonte:	MDN.	Introdução ao DOM.	Disponível	em:	https://
developer.mozilla.org/pt-BR/docs/Web/	API/Document_
Object_Model/Introduction.	Acesso	em:	30	jan.	2023.
Com	base	nos	elementos	dos	modelos	de	objetos	de	documentos	 (DOM),	 analise	as	
sentenças a seguir:
155
I-	 O	DOM	é	uma	representação	da	página	web	com	paradigma	orientação	a	objetos	
que	pode	ser	alterado	com	JavaScript.		 
II-	 O	DOM	também	é	utilizado	para	interagir	com	o	navegador,	utilizando	os:	console.
log(),	alert(“”)	e	prompt().
III-	 O	DOM	é	gerado	no	carregamento	da	página	HTML,	onde	atributos	dos	elementos	
HTML	são	convertidosem	propriedades	dos	objetos	DOM.	Para	realizar	alterações	
nos	atributos	é	necessário	utilizar	os	métodos	disponíveis.
Assinale	a	alternativa	CORRETA:
a)	 (			)	As	sentenças	I	e	II	estão	corretas.
b)	 (			)	Somente	a	sentença	II	está	correta.
c)	 (			)	As	sentenças	I	e	III	estão	corretas.
d)	 (			)	Somente	a	sentença	III	está	correta.
3	 “Formulários	HTML	são	um	dos	principais	pontos	de	 interação	entre	um	usuário	e	
um	web	site	ou	aplicativo.	Eles	permitem	que	os	usuários	enviem	dados	para	o	web	
site.	Na	maior	parte	do	tempo,	os	dados	são	enviados	para	o	servidor	da	web,	mas	a	
página	da	web	também	pode	interceptar	para	usá-los	por	conta	própria.”	
Fonte:	MDN.	Meu primeiro formulário HTML.	Disponível	
em:	https://developer.mozilla.org/	pt-BR/docs/Learn/Forms/
Your_first_form.	Acesso	em:	30	jan.	2023.
De	acordo	os	conceitos	de	desenvolvimento	de	formulários	em	HTML,	classifique	V	para	
as	sentenças	verdadeiras	e	F	para	as	falsas:
(   )	Os	formulários	são	compostos	por	dois	ou	mais	elementos	de	interação,	conhecido	
por		widgets.	
(   )	A	principal	diferença	de	um	documento	HTML	tradicional	para	um	formulário	em	
HTML	é	que	os	formulários	enviam	os	dados	coletados	para	um	destino.
(   )	O	elemento	<form>	define	o	formulário,	mas	não	é	necessário	utilizar	este	elemento,	
podendo	utilizar	o	elemento	<div	type=”form”>.
Assinale	a	alternativa	que	apresenta	a	sequência	CORRETA:
a)	 (			)	 V	–	F	–	F.
b)	 (			)	 V	–	F	–	V.
c)	 (			)	 F	–	V	–	F.
d)	 (			)	 F	–	F	–	V.
4	 Os	campos	textos	são	os	elementos	básicos	de	 interação	de	um	formulário	e	são	
controles	simples	de	entrada	de	um	dado	não	formatado,	a	forma	de	definir	é	utili-
zado	<input>.	É	possível	definir	vários	tipos	de	campos	texto,	mas	é	possível	definir	
o	comportamento	que	o	campo	assumirá	do	campo	através	do	atributo	type.	Assim	
como	os	formulários,	os	controles	de	texto	também	têm	comportamentos	comuns.	
Disserte	sobre	o	funcionamento	de	três	atributos	globais	para	o	controle	de	textos.
156
5	 Com	base	na	imagem	abaixo,	disserte	sobre	os	elementos	que	devem	ser	utilizados	
e	como	é	o	funcionamento	desses	elementos.
157
CRIANDO UM FORMULÁRIO WEB
UNIDADE 2 TÓPICO 2 — 
1 INTRODUÇÃO 
Acadêmico,	neste	Tema	de	Aprendizagem	2,	abordaremos	três	macroassuntos:	
Conhecendo	o	framework	Bootstrap	5;	Estilizando	um	formulário	com	framework;	e	En-
viando	dados	do	formulário	web.
No	 subtema	2,	 conheceremos	 o	 básico	 sobre	 o	 framework	Bootstrap	 5	 para	
criar	páginas	responsivas.	Entenderemos	como	é	o	funcionamento	da	Grid	e	container,	
criando	um	formulário	estilizado	de	cadastro.	Conheceremos	os	pontos	de	interrupções	
que	são	as	dimensões	dos	dispositivos	ou	tamanho	de	telas.	Apresentaremos	as	princi-
pais	classes	necessárias	para	estilização	de	formulários	de	exemplo.
No	subtema	3,	aprofundaremos	na	estilização	com	framework	Bootstrap	5	en-
tendendo como funciona os grupos de campos de entradas e a união de objetos inde-
pendentes.	Conheceremos	as	classes	do	framework,	que	são	utilizadas	para	possibilitar	
feedback	de	validação	de	campos	obrigatórios.
No	último	subtema,	entenderemos	como	será	realizada	a	validação	utilizando	
uma	função	JavaScript.	Conheceremos	os	métodos	de	envio	dos	dados	e	realizaremos	
a	publicação	dos	formulários	criados	no	Github	Pages.
2 INTRODUÇÃO BOOTSTRAP 5
O	framework	Bootstrap	5	possui	classes	pré	definidas	para	criação	de	páginas	
responsivas,		chamado	de	Grid,	ou	seja,	o	framework	possui	elementos	CSS	predefini-
dos.	A	estrutura	é	composta	por	container,	 linhas	e	colunas,	a	hierarquia	de	maneira	
resumida	é	container	>	Linha	>	Colunas.	
2.1 CONTAINER
A	delimitação	do	conteúdo	do	layout	e	o	elemento	fica	invisível,	utilizamos	a	tag	
<div>	para	criar.	Existem	três	classes	principais:	largura	fixa	(.container)	e		fluida	(.contai-
ner-fluid)	Na	classe	fluida	o	container	irá	ocupar	toda	a	extensão	da	Janela	(viewport).	
Na	versão	fixa	temos	tamanhos	que	utilizam	os	breakpoints	(.container-«breakpoint»),	
onde	o	valor	padrão	é	a	classe	.container	com	dimensão	<576px>.
158
Saiba mais sobre o Container no link: https://getbootstrap.com/
docs/5.0/layout/containers/
DICA
Para	colocar	em	prática	o	que	estudamos,	vamos	conhecer	a	 implementação	
de	uma	tela	de	cadastro	de	usuário,	para	abri-la	deverá	acessar	o	link	“Ainda	não	tenho	
conta?”	definido	no	quadro	9	-	linha	25.	Iniciaremos	com	o	código	do	formulário	HTML	
da	tela	de	Cadastro,	com	o	layout	da	tela	apresentado	na	Figura	6.	
Figura 6 - Layout tela de cadastro
Fonte: a autora.
Para	 usar	 o	 framework	 precisamos	 indicar	 a	 folha	 de	 estilos,	 utilizaremos	 o	
Bootstrap	CDN	(Content	Delivery	Network),	que	realiza	o	carregamento	do	framework	e	
seus	componentes	de	forma	remota.	
Utilizando o Bootstrap CDN, ao invés do Bootstrap local, não é rea-
lizado o download do arquivo na máquina, por utilizar um servidor 
remoto basta informar o link do servidor CND no atributo href da tag 
<link> e no type=”stylesheet’. Também devemos utilizar sempre os 
CSS “.min.css” pois é uma versão mais compacta.
Saiba mais sobre o framework Bootstrap no link: https://getbootstrap.
com/docs/5.0/getting-started/introduction/.
IMPORTANTE
159
É	importante	entender	o	conceito	de	grid	antes	de	aplicar	o	estilo	no	formulário	
com	Layout	apresentado	na	figura.	Na	visão	geral	o	grid	possui	três	elementos	princi-
pais:	colunas	dentro	de	linhas	e	 linhas	dentro	de	containers.	A	classe	“.container”	é	o	
container	padrão,	que	possui	uma	largura	fixa,	utilizado	para	tornar	o	site	responsivo	e	
se	adaptar	ao	tamanho	da	tela.
O Elemento <span> é muito similar ao elemento <div>, a diferen-
ça entre ele é que o <div> é um elemento de nível de bloco e o 
<span> é um elemento em linha.
DICA
2.2 BREAKPOINTS 
Outro	conceito	importante,	é	os	pontos	de	interrupção	(breakpoints),	que	de-
terminam	como	o	layout	deve	se	comportar	em	diferentes	dispositivos	ou	tamanhos	de	
tela.	Na	Tabela	6,	estão	os	seis	pontos	de	interrupção	do	Bootstrap	5,	também	chamado	
de	níveis	de	grade	(BOOTSTRAP,	2023).
Tabela 6 - Níveis de grade 
Fonte: BOOTSTRAP (2023, s.p.).
Ponto de interrupção (Breakpoint) Infixo de classe Dimensões
Muito	pequeno	(Extra	small) - <576px
Pequena	(Small) sm ≥576px
Médio	(Medium) md ≥768px
Grande	(Large) lg ≥992	px
Extra	grande	(Extra	large) xl ≥1200px
Extra	extra	grande	(Extra	extra	large) xxl ≥1400px
Saiba mais sobre o breakpoint no link: 
https://getbootstrap.com/docs/5.0/layout/breakpoints/
DICA
https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/div
https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/div
160
2.3 CLASSES
Na	Tabela	7,	temos	a	explicação	das	classes	do	framework	Bootstrap,	que	utili-
zaremos	no	formulário	de	cadastro.	
Tabela 7 - Estilo da Tela de Cadastro
Atributo Descrição
col-«breakpoint»-«tamanho»
Colunas	do	grid	do	Bootstrap	para	montar	o	layout,	o	grid	contém	
12	colunas	por	linha,	ou	seja,	o	valor	deve	ser	entre		1	a	12.	Por	
exemplo,	para	a	coluna	ocupar	100%	utilizamos	o	valor	12,	se	
ocupar	50%	será	o	valor	6.	O	tamanho	das	colunas	irá	utilizar	a	
largura	da	janela	(viewpoint)	e	o	tamanho	que	é	a	quantidade	
de	colunas.	A	 largura	de	tabela	utiliza	os	valores	da	tabela	6,	
sendo assim as colunas são responsivas e alteram conforme a 
dimensão	da	janela.
p«lados»-«tamanho»
m«lados»y-«tamanho»
Preenchimento	 (p	 -	padding)	 	 é	 o	 espaçamento	dentro	dos	
limites	do	conteúdo	e	margem	(m	-	margin)	é	o	espaçamento	
fora	do	conteúdo.	Os	valores	que	podem	ser	utilizados	nos	la-
dos	podem	ser	vistos	na	tabela	X	e	os	valores	possíveis	para	o	
tamanho	são:	0	ao	5	e	auto.	Utilize	o	mx-center	para	centralizar	
o	elemento	na	coluna.
bg-«cor»
Cor	de	fundo	(bg	-	backgroud).	A	cor	utilizada	na	tela	de	cadastro	
foi	a	azul	(primary).	A	lista	de	valores	das	cores	são:		cinza	(se-
condary,	gray),	verde	(success),	azul	(primary	e	info),	alaranjado	
(warning),	vermelho	(danger),	claro	(light,	body	e	white),	preto	
(dark)	e	transparente	(transparent).
bg-opacity-50
Classe	para	dar	uma	opacidade	no	fundo,	os	valorespossíveis	
são:	10,	25,	50	e		75.
rounded
Formatação	das	bordas,	a	classe	rounded	é	usada	para	arre-
dondamento	das	bordas.	Além	desta	classe	temos	outras	para	
formatar:	a	espessura	da	linha,	cor	da	borda	e	arredondamento	
individual	dos	cantos.	
text-«formatacao»
text-white
Formatação	de	texto.	Pode	alterar	alinhamento,	cor,	tamanho,	
estilo	(negrito,	itálico,	tachado	etc.),	tipo	da	fonte	e	transformar	
em	maiúsculas/minúsculas.	
form-control
Controle	 textual	 de	 formulário	 para	 os	 elementos	 <input>	 e	
<textarea>.
form-check
form-check-input
form-check-label
Formatação	do	campo	de	checagem,	que	atribui	o	valor	ativo	ou	
inativo.	Duas	questões	são	importantes	de	mencionar:
1)	São	três	tipos	de	campos	dessa	classe:	
• Checkbox:	botão	de	caixa	de	seleção,	são	caixas	quadradas	
que	são	marcadas	e	podemos	selecionar	mais	de	uma.	
• Radio:	botão	de	opção,	são	bolinhas	para	selecionar	uma	
única	opção.	
• Switch:	Botão	de	entrada	de	controle	de	alternância	horizon-
tal	que	pode	ser	manipulado	entre	estados	ativo	e	desativo,	
que	são	representados	por	um	boolean	valor.
2)	Utiliza	a	classe	.form-check	para	agrupar	os	campos	<input>		
e	<label>.	A	classe	utilizada	no	<input>	é	 .form-check-input e 
para	o	<label>	é .form-check-label.
161
d-grid
O	prefixo	D-	indica	que	é	uma	classe	utilitária	de	exibição	do	
Bootstrap	5	que	 irá	afetar	diretamente	o	Display.	Usamos	na	
linha	37	do	quadro	9	para	centralizar	o	botão	Cadastrar.
d-flex
O	prefixo	D-	indica	que	é	uma	classe	utilitária	de	exibição	do	
Bootstrap	5	que	irá	afetar	diretamente	o	Display.	
https://getbootstrap.com/docs/5.3/utilities/flex/
input-group Classe	para	agrupar	campos	de	entrada	em	uma	só	linha.
input-group-text
Formatação	do	campo	texto	com	elemento	<label>,	com	essa	
classe	o	campo	fica	ao	lado	com	elemento	<input>.
btn
btn-«tipo»
Classe	para	alterar	cor	do	botão,	a	recomendação	é	utilizar	a	
classe	com	o	elemento	<button>.	A	classe	pode	ser	utilizada	em	
três	elementos:	<a>,	<button>	e	<input>.
Fonte: Adaptado de BOOTSTRAP (2023, s.p.).
Leia o guia das classes para aprofundamento:
• Display: https://getbootstrap.com/docs/5.0/layout/grid/
• Colunas: https://getbootstrap.com/docs/5.0/layout/columns/
• Espaços: https://getbootstrap.com/docs/5.0/utilities/spacing/
• Fundo: https://getbootstrap.com/docs/5.3/utilities/background/
• Borda: https://getbootstrap.com/docs/5.0/utilities/borders/
• Texto: https://getbootstrap.com/docs/5.3/utilities/text/
• Entrada: https://getbootstrap.com/docs/5.3/forms/form-control/#example
• Checkbox: https://getbootstrap.com/docs/5.3/forms/checks-radios/#without-labels
• Grupo Entradas: https://getbootstrap.com/docs/5.3/forms/input-group/#basic-example
• Botão: https://getbootstrap.com/docs/5.3/components/buttons/#button-tags
Veja alguns exemplos de utilização das classes do Bootstrap 5:
• Container: https://youtu.be/MmlilYsIKHg
• Display: https://jsbin.com/dunusik/edit?html,output
• Colunas: https://jsbin.com/mepuwam/edit?html,output
• Espaços: https://jsbin.com/huripip/edit?html,output
• Fundo: https://jsbin.com/vuyefom/edit?html,output
• Border:https://jsbin.com/rofosoz/edit?html,output
• Text: https://jsbin.com/xawatey/edit?html,output
• Botão: https://jsbin.com/fohicub/edit?html,output
• Checkbox: https://jsbin.com/yakudul/edit?html,output
DICA
3 ESTILIZADO FORMULÁRIOS COM BOOTSTRAP 5
Agora	que	já	conhecemos	algumas	classes	do	Bootstrap	5,	vamos	pôr	a	mão	na	
massa	e	estilizar	os	formulários	de	login	e	cadastro.
https://getbootstrap.com/docs/5.0/layout/grid/
https://getbootstrap.com/docs/5.0/layout/columns/
https://getbootstrap.com/docs/5.0/utilities/spacing/
https://getbootstrap.com/docs/5.3/utilities/background/
https://getbootstrap.com/docs/5.3/utilities/text/
https://getbootstrap.com/docs/5.3/forms/form-control/#example
https://youtu.be/MmlilYsIKHg
https://jsbin.com/mepuwam/edit?html,output
https://jsbin.com/huripip/edit?html,output
https://jsbin.com/vuyefom/edit?html,output
https://jsbin.com/rofosoz/edit?html,output
https://jsbin.com/xawatey/edit?html,output
https://jsbin.com/fohicub/edit?html,output
162
3.1 GRUPO DE INPUTS
No	quadro	10,	veja	na	linha	10,	o	container	principal	criado	para	aninhar	todos	os	
demais	elementos	do	formulário.	No	atributo	class deste primeiro container, temos uma 
lista	de	valores,	neste	atributos	podemos	utilizar	um	ou	mais	seletores.	Também	foram	
criados container, com tag	<div>,		para	agrupar	os	campos	label e input	(linhas	14	e	19),	
um container	para	agrupar	os	campos	senha	e	confirmação	de	senha	(linha	24)	e	outro	
container	para	o	botão	“Cadastrar”	(linha	32).	
Quadro 10 - Formulário de Cadastro HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE	html>
<html	lang="pt-br">
	<head>
		<meta	charset=utf-8	/>
		<meta	name="viewport"	content="width=device-width,	initial-scale=1">
		<title>Formulário	de	Cadastro</title>
		<link	href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"	
rel="stylesheet">
	</head>
	<body	>
	<div	class="container-sm	col-sm-7	py-5	my-5	bg-primary	text-white	rounded">
			<form>
				<h1	class="text-center">Cadastro</h1>	
				<div	class="col-sm-10	mx-auto	p-1">
						<label>Nome:</label>	
						<input	class="form-control	"	id="nome_pessoa"	name="nome_pessoa"	type="text"	
placeholder="Digite	seu	nome"/>	
				</div>
					<div	class="col-sm-10	mx-auto	p-1">	
						<label>E-mail:</label>	
							<input	class="form-control"	id="nome_login"	name="nome_login"	type="email"	
placeholder="Digite	seu	e-mail"/>	
					</div>
						<div	class="d-flex	col-sm-10	mx-auto	justify-content-center	gap-1">
						<div	class="col-sm-6	p-1">	
							<label>Senha:</label>	
							<input	class="form-control"	id="senha_login"	name="senha_login"	type="password"	
placeholder="Digite	a	senha"/>	
						</div>
						<div	class="col-sm-6	p-1">	
							<label>Confirme	a	Senha:</label>	
							<input	class="form-control"	id="conf_senha_login"	name="conf_senha_login"	
type="password"	placeholder="Digite	novamente	a	senha"/>							
163
29
30
31
32
33
34
35
36
37
					</div>
					</div>
					<div	class="d-grid	col-6	mx-auto	p-5">		
							<button	class="btn	btn-success">	Cadastrar	</button>
					</div>
				</form>
			</div>
	</body>
</html>
Fonte: a autora.
Código do quadro 10: https://jsbin.com/nojajoq/edit?html,output
DICA
3.2 UNIÃO DE OBJETOS INDEPENDENTES
Usaremos	algumas	classes	do	framework	diferentes	da	tela	de	cadastro,	para	
estilizar	o	formulário	de	login,	na	Figura	7	visualizamos	o	novo	Layout	da	tela	de	login	e,	
no	Quadro	11,	o	novo	código	HTML	do	formulário	de	login.		
Figura 7 - Novo layout tela de login
Fonte: a autora. 
164
Quadro 11 - Formulário de Cadastro HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE	html>
<html>
		<head>
				<meta	charset=utf-8	/>
				<meta	name="viewport"	content="width=device-width,	initial-scale=1">
				<title>Formulário	de	Login</title>
				<link	href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"	
rel="stylesheet">
		</head>
		<body>
				<div	class="container-sm	col-sm-6	py-1	my-5	bg-primary	text-white		bg-opacity-50	
rounded">
					<form	method="post"	action="">
						<h1	class="text-center	mb-4">Login</h1>
						<div	class="d-flex	justify-content-center	gap-1">
						<div	class="input-group	mb-3">	
								<label	class="input-group-text"	for="nome_login">Usuário*:	</label>
								<input	class="form-control"	id="nome_login"	name="nome_login"	type="text"/>
						</div>
						<div	class="input-group	mb-3">	
								<label	class="input-group-text"	for="senha_login">Senha*:	</label>
								<input	class="form-control"	id="senha_login"	name="senha_login"	
type="password"/>
						</div>
						</div>
						<div	class="form-check	form-switch	mb-3">		
								<input	class="form-check-input"	role="switch"type="checkbox"	
name="manterlogado"	value="sim"	/>								
								<label	class="form-check-label">	Manter	logado	</label>	
						</div>
						<div	class="d-flex	justify-content-center">	
								<button	class="btn	btn-success	mb-3"	type="submit"	>Login</button>	
							</div>
						<div	class="d-flex	justify-content-center">
								<a	class="btn"	href="#URL">Ainda	não	tem	conta?</a>
								<a	class="btn"	href="#URL">Esqueceu	a	senha?</a>
						</div>
				</form>
				</div>
		</body>
</html>
Fonte: a autora.
165
Código do Quadro 11: <https://jsbin.com/hutasit/edit?html,output>
Assista o vídeo para entender melhor o uso de múltiplas classes no link: 
https://youtu.be/PZYwZxDcs78.
DICA
3.3 VALIDAÇÃO DO FORMULÁRIO WEB 
Para	finalizar	o	nosso	formulário,	vamos	validar	os	dados	de	entrada	antes	de	
enviar	o	formulário,	também	é	necessário	implementar	a	chamada	da	tela	de	cadastro	
quando	é	acionado	o	link	“Ainda	não	tem	cadastro?”
A	validação	é	uma	forma	de	dar	feedback	ao	usuário,	para	incluir	a	validação	em	
um	formulário	utilizando	Bootstrap	adicionamos	os	atributo	“novalidate” no elemento 
<form>,	veja	na	linha	13	do	quadro	11,	que	realiza	a	desativação	da	ferramenta	de	fee-
dback	do	navegador.	Ainda	na	 linha	13,	 inclui	a	classe	 .needs-validation no elemento 
<form>,	 essa	 classe	 é	 apenas	 uma	marcação	 para	validação	 dos	 campos.	 Os	 estilos	
de	validação	estão	disponíveis	nos	elementos	com	class	 .form-control,	 .form-select e 
.form-check.
Nos	campos	do	quadro	11,	é	necessário	incluir	o	atributo	required	no	<input>	(li-
nhas	18	e	24),	um	container	com	a	classe	.invalid-feedback	para	cada	<input>	(linhas	19	
e	25),	classe	.has-validation no container group	que	aninha	o	grupo	de	campos	<input>,	
<layout>	e	container	de		feedback	(linha	16).		Para	entender	melhor,	veja	no	Quadro	11	
todas	as	validações	no	formulário	de	login.
Quadro 12 - Código de validação da tela de login
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE	html>
<html>
	<head>
		<meta	charset=utf-8	/>
		<meta	name="viewport"	content="width=device-width,	initial-scale=1">
		<title>Formulário	de	Login</title>
		<link	href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"	
rel="stylesheet">
	</head>
	<body>
		<div	class="container-sm	col-sm-6	py-1	my-5	bg-primary	text-white		bg-opacity-50	
rounded">
				<form	method="post"	class="needs-validation"	action="#"	novalidate>
						<h1	class="text-center	mb-4">Login</h1>
166
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
			<div	class="d-flex	justify-content-center	gap-1">
					<div	class="input-group	mb-3	has-validation">	
						<label	class="input-group-text"	for="nome_login">Usuário*:	</label>
						<input	class="form-control"	id="nome_login"	name="nome_login"	type="text"	
required/>
						<div	class="invalid-feedback">Informe	o	usuário.</div>
					</div>
					<div	class="input-group	mb-3	has-validation">	
						<label	class="input-group-text"	for="senha_login">Senha*:	</label>
						<input	class="form-control"	id="senha_login"	name="senha_login"	type="password"	
required/>
						<div	class="invalid-feedback">Informe	a	senha.</div>
					</div>
				</div>
				<div	class="form-check	form-switch	mb-3">		
					<input	class="form-check-input"	role="switch"	type="checkbox"	name="manterlogado"	
value=""/>								
					<label	class="form-check-label">	Manter	logado	</label>	
				</div>
				<div	class="d-flex	justify-content-center">	
					<button	class="btn	btn-success	mb-3"	type="submit"	>Login</button>	
				</div>
				<div	class="d-flex	justify-content-center">
					<a	class="btn"	href="#URL">Ainda	não	tem	conta?</a>
					<a	class="btn"	href="#URL">Esqueceu	a	senha?</a>
				</div>
			</form>
		</div>
		</body>
</html>
Fonte: a autora.
4 ENVIANDO DADOS DO FORMULÁRIO WEB
Agora	que	já	aprendemos	a	criar	um	formulário	e	definimos	quais	campos	serão	
validados,	chegou	o	momento	de	entender	como	os	dados	do	formulário	são	enviados	
para	o	destino.
Código do Quadro 12: <https://jsbin.com/fatecup/edit?html,output>
Saiba mais sobre validação de formulários no link: 
https://getbootstrap.com/docs/5.3/forms/validation/#custom-styles
DICA
https://jsbin.com/fatecup/edit?html,output
167
4.1 FUNÇÃO PARA VALIDAÇÃO DOS CAMPOS 
Ao	acionar	o	botão	“Login”,	irá	acionar	a	validação	dos	campos	definidos,	para	
isso	é	necessário	implementar	uma	função	que	será	executada	no	momento	do	clique.	
Definimos	com	<script>	no	fim	do	<body>,	a	função	JavaScript	para	validação	pode	ser	
vista	no	Quadro	13.
Quadro 13 - Função JavaScript de validação dos campos
Fonte: BOOTSTRAP (2023b, s.p.).
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
(()	=>	{
	'use	strict'
 //	Buscar	todos	os	form	deverá	aplicar	estilos	personalizados	de	validação	de	Bootstrap
	const	forms	=	document.querySelectorAll('.needs-validation')
 //retorna	uma	NodeList	estática	representando	os	elementos	classe	.needs-validation
 Array.from(forms).forEach(form	=>	{	//	Passe	por	cima	deles	e	impeça	a	submissão
		form.addEventListener('submit',	event	=>	{	
 //	adicionar	um	EventListener	chamado	sempre	que	o	evento	submit	for	acionado
			if	(!form.checkValidity())	{	//ao	enviar	o	formulário,	form.checkValidity()	será	chamado
				event.preventDefault()	//impedirá	que	o	evento	padrão	seja	considerado	normalmente
				event.stopPropagation()	//	impede	a	propagação	adicional	do	evento	atual.
			}
			form.classList.add('was-validated')	//	inclui	no	formulário	que	foi	realizada	a	validação
		},	false)
	})
})()
4.2 MÉTODO DE ENVIO DOS DADOS
Para	envio	dos	dados,	é	necessário	incluir	a	ação	no	<form>	com	o	atributo	ac-
tion="./home.html",	que	quando	acionado	o	botão	submit	é	direcionado	para	a	página	
home,	veja	no	Quadro	13	o	código	HTML	da	página	home.html.	
Para indicar como os dados são enviados, utiliza-se o atributo method, pois o 
protocolo	HTTP	possibilita	algumas	formas	para	transmissão	dos	dados,	sendo	normal-
mente	utilizados	os	métodos	“GET”	e	“POST”.
Conheça mais sobre o modo restrito no link: 
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/
Strict_mode
DICA
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Strict_mode
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Strict_mode
168
Conheça mais sobre o protocolo HTTP no link: 
https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP
DICA
Quadro 14 - Código da página home
Fonte: a autora.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE	html>
<html>
	<head>
		<meta	charset=utf-8	/>
		<meta	name="viewport"	content="width=device-width,	initial-scale=1">
		<title>Tela	Principal</title>
	<link	href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"	
rel="stylesheet">
	</head>
	<body>
		<div	class="container-sm	col-sm-6	py-1	my-5	bg-primary	text-white		bg-opacity-25	
rounded">
			<h1	class="text-center	mb-4">Login	realizado	com	sucesso!</h1>
		</div>
	</body>
</html>
Código do Quadro 14: <https://jsbin.com/fatecup/edit?html,output>
DICA
	No	Quadro	14,	é	utilizado	o	valor	"post"	do	atributo	method	para	enviar	o	formu-
lário	HTML	da	tela	de	login.	As	alterações	de	direcionamento	para	a	página	home.html	
no	click	do	botão	login	está	na	linha	13,	e	para	a	página	de	cadastro	para	quando	clicar	
no	link	“Ainda	não	tem	conta?”,	está	na	linha	37.
De	forma	resumida,	a	principal	diferença	entre	os	dois	métodos	é	a	visibilidade,	
em	que	o	método	GET	concatena	os	dados	na	forma	de	chave/valor	com	a	URL	e	o	mé-
todo	POST	encapsula	os	dados	no	corpo	da	requisição.	
https://jsbin.com/fatecup/edit?html,output
169
Quadro 15 - Código HTML do formulário de login
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE	html>
<html>
	<head>
		<meta	charset=utf-8	/>
		<meta	name="viewport"	content="width=device-width,initial-scale=1">
		<title>Formulário	de	Login</title>
		<link	href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"	
rel="stylesheet">
	</head>
	<body>
	<div	class="container-sm	col-sm-6	py-1	my-5	bg-primary	text-white		bg-opacity-50	
rounded">
		<form	method="post"	class="needs-validation"	action="./home.html"	novalidate>
			<h1	class="text-center	mb-4">Login</h1>
			<div	class="d-flex	justify-content-center	gap-1">
				<div	class="input-group	mb-3	has-validation">	
					<label	class="input-group-text"	for="nome_login">Usuário*:	</label>
					<input	class="form-control"	id="nome_login"	name="nome_login"	type="text"	required/>
					<div	class="invalid-feedback">Informe	o	usuário.</div>
				</div>
				<div	class="input-group	mb-3	has-validation">	
					<label	class="input-group-text"	for="senha_login">Senha*:	</label>
					<input	class="form-control"	id="senha_login"	name="senha_login"	type="password"	
required/>
					<div	class="invalid-feedback">Informe	a	senha.</div>
				</div>
			</div>
			<div	class="form-check	form-switch	mb-3">		
				<input	class="form-check-input"	role="switch"	type="checkbox"	name="manterlogado"	
value=""/>								
				<label	class="form-check-label">	Manter	logado	</label>	
			</div>			
			<div	class="d-flex	justify-content-center">	
				<button	class="btn	btn-success	mb-3"	type="submit"	>Login</button>	
			</div>
			<div	class="d-flex	justify-content-center">
				<a	class="btn"	href="cadastro.html">Ainda	não	tem	conta?</a>
				<a	class="btn"	href="#URL">Esqueceu	a	senha?</a>
			</div>
		</form>
	</div>
	<script	src="./scripts/validar.js"></script>
</body>
</html>
Fonte: a autora.
170
O local onde deve ser colocado a tag <script> deve ser analisado com 
cuidado, pois o navegador interpreta o JavaScript no momento que 
ele encontrar a tag, deixando o carregamento da página mais lenta. 
Porém caso você precise do JS para montar a tela então seu script 
deve ficar no <head> caso contrário pode ficar no final do <body> 
antes da tag de fechamento.
Código do Quadro 15: <https://jsbin.com/fatecup/edit?html,output>
DICA
Veremos mais adiante como obter dados de um servidor, como 
passar dados de uma página para outra e armazenamento de 
dados do lado do cliente.
ESTUDOS FUTUROS
4.3 PUBLICAÇÃO DOS FORMULÁRIOS NO GITHUB
Vamos	criar	uma	GitHub	Pages	para	disponibilizar	os	formulários	via	URL.	Para	
isso	devemos	criar	um	repositório	com	os	arquivos	html	do	formulário	de	login	e	cadas-
tro.	Na	Tabela	8,	temos	os	passos	necessários	para	publicação	das	páginas	HTML.
Tabela 8 - Passo a passo para publicação dos formulários
Atividade Passo a passo
Acessar	o	github
Acesse	o	link:	https://github.com/.	Caso	não	tenha	conta,	será	neces-
sário	criar.
Acesse o repositório
Na	lateral	superior	direita	da	tela,	acessar	o	ícone	da	conta										e	se-
lecionar	a	opção	“Your	Repositories”
Criar	no	repositório
Clica	no	botão	“New”,	escolha	o	nome	do	repositório	e	clique	no	botão	
“Create	repository”.
Como	boa	prática,	escolha	um	padrão	para	nomes	de	repositório>.	
Por	exemplo,	«nomeRepositorio»_github_pages,	então		um	repositório	
com	o	nome	“login”,	ficaria		“login_github_pages”.
Publicar	os	arquivos Selecione	o	link	“uploading	an	existing	file”.
Selecionar	os	arquivos
Arraste	os	arquivos	ou	escolha	pelo	link	“choose	your	files”.	Realize	o	
upload	dos	arquivos:	login.html,	cadastro.html	e	home.html
Criar	pasta	para	scripts
Selecione	o	botão	 “Add	file”	e	clique	em	 “Create	new	file”.	Digite	no	
campo	“Nome	your	file”	scripts/	e	automaticamente	já	vira	uma	pasta.	
Agora	digite	o	nome	do	arquivo	“validar.js”
https://jsbin.com/fatecup/edit?html,output
https://github.com/
171
Criar	o	arquivo	js
Copie	o	conteúdo	do	quadro	12	o	campo	“Edit	new	file”,	e	clique	no	
botão	“Commit	new	file”
Editar	home.html
Clicar	sobre	o	arquivo	“home.html”,	selecione	o	lápis	para	edição.	Altere	
o	nome	do	script	para	“inicio.hml”.	Altere	o	texto	do	<h1>	para	“Seja	Bem	
vindo!”	e	clique	em	“Commit	changes”.
Editar	arquivos	html
Clique	sobre	o	arquivo	“index.html”,	selecione	o	lápis	para	edição,	altere	
o	caminho	do	<script>	no	final	do	arquivo	para	src="scripts/validar.js".	
Altere	também	os	atributos	action	do	<form>	para	action="home.html"	
e	methodo=”get”.	Finalizando	e	clique	em	“Commit	changes”.	
Após	as	alterações	podem	demorar	um	minuto	para	atualizar	o	site.
Criar	GitHub	Pages
Selecione	a	 opção	 “Settings”,	 no	menu	 lateral	 esquerdo	 selecione	
“Pages”,	busque	o	campo	“Build	and	deployment”,	clique	no	combobox	
escrito	“None”	abaixo	do	bloco	Brach	e	selecione	“main”	e	clique		no	
botão	“Save”.
Aguarde liberação site
Aguarde	1	minuto	para	criação	da	sua	página,	acessando	a	opção	“Pa-
ges”	do	menu	lateral	para	verificar	se	já	foi	criada	a	página.
Acessando o site
Na	opção	“Pages”	do	Menu	“Setting”	aparecerá	um	campo	informan-
do	“Your	site	is	live	at”	e	o	link	para	seu	site.	Clique	sobre	o	link	e	será	
direcionado	para	a	página	de	login.
Teste o site
Agora	é	só	realizar	os	testes,	caso	necessário	realize	os	ajustes	que	
achar	necessário.	
Fonte: a autora.
Na	Figura	8,	podemos	ver	a	tela	do	repositório	do	projeto	do	formulário	 login	
exemplo.
Figura 8 - Tela GitHub do projeto Formulário Login Exemplo
Fonte: a autora.
172
Podemos	neste	tema	de	aprendizagem	compreender	de	forma	prática	a	criação	
de	formulário	à	sua	estilização	e	envio	destes.	Estudamos	conceitos	como	Bootstrap,	
da	estrutura	geral	à	conceitos	de	containers,	linhas,	colunas,	hierarquia,	vimos	de	forma	
detalhada	os	atributos	e	suas	descrições.	
Se quiser realizar o download do projeto, acesse o link: 
https://github.com/profanapaulacostacurta/loginexemplo_github_pages.git
DICA
173
Neste tópico, você aprendeu:
•	 Conhecemos	o	framework	Bootstrap	5,	que	possui	elementos	CSS	predefinidos	para	
padronizar	o	visual	das	telas	e	criar	páginas	responsivas.	Entendemos	como	é	rea-
lizada a delimitação do conteúdo do layout e a utilização dos pontos de interrupção 
(breakpoints)	para	definir	o	comportamento	do	layout.
•	 Apresentamos	sobre	as	principais	classes	do	framework	Bootstrap	5	e	utilizamos	em	
um	formulário	de	cadastro.	Conhecemos	como	criar	grupos	de	campos	de	entradas	e	
realizar união de elementos independentes, por exemplo dois campos de entrada na 
mesma	linha.
•	 Entendemos	 como	 realizar	 a	 validação	 de	 campos	 de	 entrada	 com	 o	 framework	
Bootstrap	5,	indicando	quais	campos	devem	ser	validado	com	a	palavra	required no 
<input>.	
•	 Aplicamos	os	métodos	de	envio	de	dados	de	formulários	em	uma	página	de	login	e	
criamos	a	função	em	JavaScript	que	realiza	a	validação	para	apresentação	da	men-
sagem	de	erro	na	tela.	
•	 Aprendemos	a	publicar	um	formulário	no	repositório	Github	e	conhecemos	o	passo	a	
passo	para	publicar	o	site	em	uma	Github	Pages.
RESUMO DO TÓPICO 2
174
AUTOATIVIDADE
1	 “Os	contêineres	são	um	bloco	de	construção	fundamental	do	Bootstrap	que	contém,	
preenche	e	alinha	seu	conteúdo	em	um	determinado	dispositivo	ou	área	de	visuali-
zação	do	usuário	(viewport).”	Os	contêineres	são	o	elemento	de	layout	mais	básico	no	
Bootstrap	e	são	necessários	ao	usar	nosso	sistema	de	grade	padrão.”	
Fonte:	BOOTSTRAP.	Containers.	Disponível	em:	https://
getbootstrap.com/docs/5.3/layout/containers.	Acesso	em:	
30	jan.	2023.
Sobre	definição	de	containers	do	framework	Bootstrap	5,	assinale	a	alternativa	CORRETA:
a)	 (			)	 Existem	três	classes	principais:	largura	fixa	(.container)	e		fluida	(.container-fluid).	
Na	 versão	 fixa	 temos	 tamanhos	 que	 utilizam	 o	 breakpoints	 (.container-«bre-
akpoint»),	que	varia	de	“Extra	small”	com	dimensão	<	576px	até	“Extra	extra	lar-
ge”	com	dimensão	>=	1400px.
b)	 (			)	 São	três	os	principais	elementos	do	grid:	colunas,	linhas	e	tabelas.	A	classe	“.con-
tainer”	é	a	tabela	padrão,	que	possui	uma	largura	fixa,	utilizado	para	tornar	o	site	
responsivo	e	se	adaptar	ao	tamanho	da	tela.
c)	 (			)	 A	classe	col-«breakpoint»-«tamanho»	é	utilizado	para	preenchimento	(p	-	pad-
ding)		queé	o	espaçamento	dentro	dos	limites	do	conteúdo.	Os	valores	que	po-
dem	ser	utilizados	de	breakpoint	são:	1	a	6	e	os	valores	possíveis	para	o	tamanho	
são:	auto	e	numéricos	de	0	a	5.
d)	 (			)	 Para	o	botão	de	controle	de	alternância	(Switch),	utilizamos	a	classe	.form-check	
para	agrupar	os	campos	<div>		e	<button>.	A	classe	utilizada	no	<div>	é	.form-
-check-input	e	para	o	<button>	é	.form-check-label.
2	 Com	framework	Bootstrap	podemos	estender	controles	de	formulários	e	adicionar	
texto, botões ou grupos de botões em ambos os lados de campos de entradas de 
texto.	Existe	flexibilidade	também,	onde	podemos	aplicar	utilitários	de	exibição	para	
criar	um	container	e	itens	flexíveis	com	a	classe	d-flex.	
Fonte:	MDN.	Input group.	Disponível	em:	https://
getbootstrap.com/docs/5.3/forms/input-group/.	Acesso	em:	
30	jan.	2023.
Com	base	na	utilização	das	classes	do	Bootstrap	5	para	grupo	e	união	de	campos,	ana-
lise as sentenças a seguir:
I-	 Utilizando	as	classes	do	framework	Bootstrap,	é	possível	validar	os	campos	dos	for-
mulários	para	apresentar	feedback	ao	usuário,	para	incluir	a	validação	em	um	for-
mulário	usamos	o	atributo	“novalidate”	no	elemento	<form>.
175
II-	 A	classe	 .needs-validation	no	elemento	<form>,	 realiza	uma	marcação	do	campo	
indicando	que	deve	ser	realizada	a	validação	de	obrigatoriedade	do	campo.	Os	ele-
mentos	que	vão	ser	validados	devem	utilizar	as	classes	.form-control,	.form-select	
e	.form-check.
III-	 Um	container	utilizando	a	classe	.invalid-feedback	logo	abaixo	do	elemento	<input>	
é	utilizado	para	indicar	que	caso	o	valor	do	campo	seja	igual	ao	valor	do	container	
feedback	deixará	o	campo	em	vermelho.
Assinale	a	alternativa	CORRETA:
a)	 (			)	 As	sentenças	I	e	II	estão	corretas.
b)	 (			)	 Somente	a	sentença	II	está	correta.
c)	 (			)	 As	sentenças	I	e	III	estão	corretas.
d)	 (			)	 Somente	a	sentença	III	está	correta.
3	 A	definição	do	destino	e	como	serão	enviados	os	dados	do	elemento	<form>	encon-
tra-se	nos	atributos	action	e	method	 respectivamente.	 	Mas	para	enviar	os	dados	
não	basta	saber	o	destino	e	o	método,	precisamos	conhecer	os	nomes	dos	campos	
que	irão	fornecer	os	dados.	Os	nomes	dos	campos	informam	ao	navegador	que	nome	
deve	utilizar	para	cada	parte	de	dados,	e	no	lado	do	servidor,	possibilita	que	o	servidor	
saiba	lidar	com	cada	pedaço	de	dados	pelo	nome.”	
Fonte:	MDN.	Meu primeiro formulário HTML:	Enviar	
os	dados	para	seu	servidor	web.	Disponível	em:	https://
developer.mozilla.org/pt-BR/docs/Learn/Forms/Your_first_
form#	enviar_os_dados_para_seu_servidor_web.	Acesso	
em:	30	jan.	2023.
Considerando	os	conceitos	de	envio	dos	dados	de	um	formulário	HTML,	classifique	V	
para	as	sentenças	verdadeiras	e	F	para	as	falsas:
(   )	Os	métodos	“GET”	e	“POST”	são	os	mais	comumente	utilizados	como	valor	do	atri-
buto	method	do	elemento	<form>,	para	indicar	qual	método	serão	enviados	os	da-
dos. 
(   )	A	principal	diferença	entre	os	métodos	“GET”	e	“POST”	é	a	visibilidade.	O	primeiro	
método	concatena	os	dados	na	forma	de	chave/valor	com	a	URL	e	o	segundo	mé-
todo	encapsula	os	dados	no	corpo	da	requisição.
(   )	Ao	acionar	o	botão	que	 irá	 realizar	o	 submit	do	formulário,	pode	ser	 incluído	um	
script	 para	 executar	 a	 validação.	 A	 recomendação	 é	 sempre	 deixar	 o	 elemento	
<script>	dentro	do	elemento	<head>.	
Assinale	a	alternativa	que	apresenta	a	sequência	CORRETA:
a)	 (			)	 V	–	F	–	F.
b)	 (			)	 V	–	F	–	V.
c)	 (			)	 F	–	V	–	F.
d)	 (			)	 V	–	V	–	F.
176
4	 “O	GitHub	Pages	 é	 um	 serviço	 de	 hospedagem	de	 site	 estático	 que	usa	 arquivos	
HTML,	CSS	e	JavaScript	diretamente	de	um	repositório	no	GitHub	e,	como	opção,	
executa	os	arquivos	por	meio	de	um	processo	e	publica	um	site”.
Fonte: GITHUB DOCS. Disponível em: https://docs.github.com/pt/
pages/getting-started-with- github-pages/about-github-pages. 
Acesso em: 30 jan. 2023.
Disserte	sobre	os	três	principais	passos	que	devem	ser	executados	antes	de	acessar	o	
site	pelo	link	fornecido	pelo	Github.
5	 “O	Bootstrap	5	oferece	algumas	classes	para	estilizar	seus	formulários,	onde	os	ele-
mentos	dos	formulários	devem	ser	agrupados	pela	<div	class=”form-group”>	…	</div>	
que	criam	um	espaço	elegante	entres	os	 inputs.	Os	 inputs	por	sua	vez	recebem	o	
estilo	da	classe	form-control	que	cria	um	elegante	campo	de	digitação	com	um	ta-
manho	de	largura	de	100%.”.
Fonte:	OLIVEIRA,	A.	Formulários com HTML 5 e BootStrap.	
Disponível	em:	https://www.blogson.com.br/formularios-
com-html-5-e-bootstrap/.	Acesso	em:	30	jan.	2023.
Considerando	os	conceitos	de	grupos	de	campos	de	entrada,	disserte	sobre	os	campos	
necessários	para	agrupar	os	elementos	<input>,	<label>	e	mensagem	de	erro	quando	o	
campo	de	entrada	está	vazio.
177
TÓPICO 3 — 
OBJETOS EM JAVASCRIPT
UNIDADE 2
1 INTRODUÇÃO 
Acadêmico,	neste	Tema	de	Aprendizagem	3,	abordaremos	sobre	três	macro	as-
suntos:	Coleções	de	dados,	trabalhar	com	objetos	e	conhecer	o	editor	de	texto	VS	Code.
No	subtema	2,	aprenderemos	sobre	as	formas	de	armazenar	e	organizar	os	da-
dos	utilizando	estruturas	de	dados	como	Array,	Map	e	Set.	Conheceremos	os	principais	
atributos	e	métodos	de	cada	objeto,	realizando	o	acesso	e	interação	dos	objetos.
No	subtema	3,	aprenderemos	como	realizar	a	criação	de	objetos	e	propriedade	
de	objetos.	Através	de	exemplos	entenderemos	como	definir	um	método	e	como	inicia-
lizar	os	objetos	utilizando	vários	tipos	de	dados.
No	subtema	4,	conheceremos	o	editor	de	texto	VS	Code	para	montar	um	am-
biente de estudos e facilitar a visualização das alterações conforme é realizada a codi-
ficação.	Aprenderemos	como	instalar	as	extensões	para	facilitar	o	desenvolvimento	em	
HTML,	CSS	e	JavaScript.
2 COLEÇÕES DE DADOS EM JAVASCRIPT
Coleções	são	formas	de	armazenar	e	organizar	dados	para	que	seja	usado	de	
maneira	mais	eficiente.	Até	o	ES6,	tínhamos	dois	tipos	para	lidar	com	as	coleções:	obje-
tos	e	arrays,	com	o	lançamento	do	ES6,	duas	novas	estruturas	de	dados	foram	dispo-
nibilizadas:	mapa	(Map)	e	conjuntos	(set).	Também	veremos	a	maneira	como	realizar	a	
interação	sobre	as	coleções.	
Para os três objetos temos algumas maneiras de realizar interação, sendo a 
mais simples e comum aos três objeto é iterator for…of.	Veremos	exemplo	de	utilização	
do	iterator	para	cada	um	dos	objetos.
2.1 ARRAY 
Array	é	uma	coleção	de	valores	ordenados	que	tem	um	índice	e	um	nome.	A	
diferença	do	array	para	os	objetos	em	JavaScript	é	que	o	segundo	armazena	elementos	
com	propriedades	variadas	e	os	nomes	dos	elementos	são	strings.
No	Quadro	15,	podemos	ver	exemplos	de	operações	básicas	com	objeto	array	
em	JavaScript.	
178
Quadro 16 - Operações básicas em objeto Array
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
//	Criação	de	array	com	elementos
var	nome	=	new	Array("Ana",	"João",	"Maria");
console.log("Tamanho	Nome",	nome.length);	//	retorna	3
var	sobrenome	=	Array("Silva","Santos","Prado");
console.log("Tamanho	Sobrenome",sobrenome.length);	//	retorna	3
var	idade	=	["10","42","92"];	//	Array	literal
console.log("Tamanho	Idade",nome.length);	//	retorna	3
//	Criação	de	array	sem	elementos
var	pessoa	=	new	Array(6);	//	cria	um	array	para	3	elementos
console.log("Tamanho	pessoa",pessoa.length);	//	retorna	6
var	estudante	=	Array(9);	//quando	é	apenas	um	número	cria	um	array	para	3	elementos
console.log("Tamanho	estudante",estudante.length);	//	retorna	9
var	funcionario	=	[15];	//cria	um	array	com	um	elemento	número	15
console.log("Tamanho	funcionario",funcionario.length);	//	retorna	1
//	produzem	exatamente	o	mesmo	efeito	dos	demais
var	chefe	=	[];	//cria	um	array	sem	elementos
chefe.length	=	5;	//	define	o	tamanho	do	array
console.log("Tamanho	chefe",chefe.length);	//	retorna	5
//	Cria	um	array	com	um	elemento
chefe	=	[20];	//cria	um	array	com	o	elemento	20
console.log("Tamanho	chefe",chefe.length);	//	retorna	1
//	Povoando	um	array	carro
var	carro	=	[];	
carro[0]	=	"March";
carro[1]	=	"Kicks";carro[2]	=	"Tiida";
carro[3]	=	"Logan";
console.log("Tamanho	carro",carro.length);	//	retorna	4
carro=	0;
console.log("Tamanho	carro",carro.length);	//	retorna	undefined
//	Interação	no	array	nome
for	(let	n	of	nome)	{		//	loop	igual	ao	for	(var	i	=	0;	i	<	nome.length;	i++)	{
		console.log("Valor	Nome:",	n);
}
sobrenome.forEach(function(fun)	{	//	loop	forEach
		console.log("Valor	Sobrenome:",fun);
});
idade.forEach(fun	=>	console.log("Valor	Idade:",fun));	//	função	arrow
//Métodos
//	concat()
nomesobrenome	=nome.concat(sobrenome);
nomesobrenome.forEach(p	=>	console.log("Valor	Pessoas:",p));	
Fonte: a autora.
179
Utilize o site onecompiler.com para executar seu JavaScript. Acesso ao código 
do Quadro 16 pelo link: <https://onecompiler.com/javascript/3yw6fjhy5>.
DICA
Os índices de arrays JavaScript iniciam no zero e não no 1, ou seja, 
o comprimento da propriedade length será um a mais que o maior 
índice armazenado no array.
IMPORTANTE
Na	Tabela	8,	vemos	a	explicação	das	operações	básicas	de	um	array	em	JavaScript.	
Tabela 8 - Operações básicas em objeto Array
Fonte: a autora.
Método Descrição
length retorna	a	quantidade	de	elementos	do	array
push() inclui	um	elemento	no	final	do	array
pop() exclui	um	elemento	no	final	do	array
shift() exclui	um	elemento	no	início	do	array
unshift() Inclui	um	elemento	no	início	do	array
slice	(início,	fim)
seleciona o fragmento do elemento somente com os elementos da posição 
dos	parâmetros	do	início	até	o	fim
concat() união dois arrays, retornando um novo array
sort() ordenar os elementos de um array
forEach() executa	uma	função	que	retorna	o	elemento	em	cada	item	do	array.
Saiba mais sobre Array no link: 
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/
Indexed_collections
DICA
180
2.2 MAP 
O	objeto	Map	em	JavaScript	é	um	mapa	de	duplas	chave/valor	e	as	chaves	po-
dem	ser	de	qualquer	tipo	não	somente	String	como	no	Objetos.	O	Map	mantém	a	ordem	
de entrada dos elementos e pode ser recuperado na ordem de inserção com um loop 
for…of.
No	Quadro	16,	mostramos	exemplos	de	operações	básicas	de	um	objeto	Map.
Quadro 17 - Operações básicas em objeto Array
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
//	Criar	um	Map
const	video	=	new	Map();
console.log('[1]	O	tamanho	do	map	é	video	=',	video.size);	//	retorna	0
const	texto	=	new	Map([
		['nome',	'Guia	Bootstrap	5'],
		['tipo',	'livro'],
		['autor',	'João	da	Silva'],
]);
console.log('[2]	O	tamanho	do	map	é	texto	=',	texto.size);	//	retorna	3
//Adicionar	valores	a	um	Map
video.set('nome',	'Efeito	Borboleta');
video.set('tipo',	'Filme');
video.set('autor',	'João	Silva');
console.log('[3]	O	tamanho	do	map	é	video	=',	video.size);	//	retorna	3
//Obter	valores	de	um	Map	Vídeo
console.log('[4]	Nome	video',	video.get('nome'));	//	retorna	Efeito	Borboleta
//Obter	valores	de	um	Map	Texto
console.log('[5]	Nome	texto',	texto.get('nome'));	//	retorna	Guia	Bootstrap	5
//Excluir	elementos	
texto.set('type',	'film');	//	inclui	o	elemento	com	chave	"type".
//	Propriedade	de	um	Map
console.log('[6]	O	tamanho	do	map	é',	texto.size);	//	O	tamanho	do	map	é	4
console.log('[7]	Existe	a	chave	tipo',video.has('tipo'));	//retorna	Existe	a	chave	tipo	true
texto.delete('type');	//	remove	o	elemento	com	chave	"type".
console.log('[8]	Existe	a	chave	type',video.has('type'));	//Existe	a	chave	type	false
//MapInterator
console.log('[9]	Texto',texto.keys());	//	[Map	Iterator]	{'nome',	'tipo',	'autor'}
console.log('[10]	Texto',texto.values());	//[Map	Iterator]	{'Guia	Bootstrap	5',	'livro',	'João	da	
Silva'}
console.log('[11]	Texto',texto.entries());	//[Map	Entries]	{['nome',	'Guia	Bootstrap	5'],['tipo',	
'livro'],['autor','João	da	Silva']
//Excluir	elementos 
texto.delete('tipo');	//	remove	o	elemento	com	chave	"tipo".
video.clear();	//	limpa	o	map,	removendo	todos	os	elementos
181
33
34
35
36
37
38
39
40
41
42
43
44
45
//MapInterator
console.log('[12]	Texto',texto.keys());	//	[Map	Iterator]	{'nome',	'autor'}
console.log('[13]	Texto',texto.values());	//	[Map	Iterator]	{'Guia	Bootstrap	5',	'João	da	Silva'	}
console.log('[14]	Texto',texto.entries());	//[Map	Entries]	{	[	'nome',	'Guia	Bootstrap	5'	],		[	
'autor',	'João	da	Silva'	]	}
//ForEach
texto.forEach(function(value,	key)	{
		console.log(key	+	'	=	'	+	value)	
})
//	retorna	lista	de	valores	(um	em	cada	linha):	nome	=	Guia	Bootstrap	5,	autor	=	João	da	
Silva
//	Interação	no	array	nome
for	(let	t	of	texto	)	{		//	loop	igual	ao	for	(var	i	=	0;	i	<	texto.size;	i++)	{
		console.log("Elementos:",	t);
}
Fonte: a autora.
Utilize o site onecompiler.com para executar seu JavaScript. Acesso o código 
do quadro 17 pelo link: https://onecompiler.com/javascript/3yw6en9k6
DICA
Na	Tabela	9,	vemos	a	explicação	das	operações	básicas	de	um	objeto	Map	em	
JavaScript.	
Tabela 9 - Operações básicas em objeto Map
Fonte: a autora.
Método Descrição
size retorna	quantidade	de	pares	chave/valor	do	objeto
clear() remove todos os elementos do objeto
delete(chave) exclui	o	objeto	associado	a	chave	informada	como	parâmetro.
has(chave) retorna true se o elemento existir ou falso se não existir no objeto
get(chave) retorna	valor	associado	a	chave	informada	como	parâmetro.
set(chave,	valor) Atribui	o	valor	para	chave	informada	no	objeto
keys() retorna	um	MapInterator	com	as	chaves	de	cada	elemento	do	objeto
values() retorna	um	MapInterator	com	os	valores	de	cada	elemento	do	objeto
entries() retorna	um	MapEntrie	com	um	Array	[Chave,	valor]	dos	elementos	do	objeto
forEach() Para	o	par	chave-valor	chamada	da	função	na	ordem	que	foram	inseridos.
182
Saiba mais sobre Map no link: 
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/
Keyed_collections#mapas
DICA
2.3 SET
O	objeto	Set	em	JavaScript	é	um	conjunto	de	valores,	onde	um	valor	só	pode	
ocorrer	uma	vez	e	permite	a	exclusão	pelo	seu	valor.	Da	mesma	forma	que	o	objeto	map,	
o	Set	também	mantém		a	ordem	de	inserção.	
No	Quadro	18,	mostramos	exemplos	de	operações	básicas	de	um	objeto	Set	em	
JavaScript.
Quadro 18 - Operações básicas com objeto Set
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//	Criação	do	Set
var	meuConjunto	=	new	Set();
console.log("[1]	Meu	Conjunto	Vazio:",	meuConjunto.size);	//	retorna	0
//	Povoando	o	Set
meuConjunto.add(1);
meuConjunto.add("2");
meuConjunto.add("texto");
meuConjunto.add(1);
console.log("[2]	Tamanho	Meu	Conjunto:",	meuConjunto.size);	//	retorna	3
console.log("[3]	Meu	Conjunto:",	meuConjunto);	//retorna	Set(3)	{	1,	'2',	'texto'	}
//incluindo	um	objeto	no	set
var	numero	=	{a:	1,	b:	2};
meuConjunto.add(numero);
meuConjunto.add({a:	1,	b:	2});	//		o	está	referenciando	outro	objeto
console.log("[4]	Meu	Conjunto:",	meuConjunto);	//	retorna	Set(5)	{	1,	'2',	'texto',	{	a:	1,	b:	2	},	{	a:	1,	b:	2	}	}
//Verificar	a	existência	de	um	valor
console.log("[5]	Tem	o	numero	1:",	meuConjunto.has(1));	//	retorna	true
console.log("[6]	Tem	o	numero	2:",	meuConjunto.has("2"));	//	retorna	true
console.log("[7]	Tem	o	numero	objeto:",	meuConjunto.has({a:	1,	b:	2}));		//	retorna	false
console.log("[8]	Tem	o	objeto	numero:",	meuConjunto.has(numero));		//	retorna	true
//Excluir	elementos	do	Set
meuConjunto.delete("2");	//	remove	string	2	do	set
console.log("[9]	Tem	o	string	2:",	meuConjunto.has("2"));				//	retorna	false,	2	já	foi	removido
console.log("[10]	Tamanho	do	meuConjunto:",meuConjunto.size);	//	retorna	4,	nós	simplesmente	
removemos um valor
183
25
26
27
28
29
30
31
32	
33
34
35
36
37
38
39
40
41
42
43
console.log("[11]	Meu	Conjunto:",	meuConjunto);	//	retorna	Set(4)	{	1,	'texto',	{	a:	1,	b:	2	},	{	a:	1,	b:	2	}	}
for	(let	item	of	meuConjunto)	console.log("[12]	Item	do	Meu	Conjunto:",item);
//	retorna	os	valores	em	ordem	(um	em	cada	linha)	:1,	texto,	{	a:	1,	b:	2	},	{	a:	1,	b:	2	}
for	(let	item	of	meuConjunto.keys())	console.log("[13]	Keys	do	Meu	Conjunto:",item);//	retorna	os	valores	em	ordem	(um	em	cada	linha)	:	1,	texto,	{	a:	1,	b:	2	},	{	a:	1,	b:	2	}
for	(let	item	of	meuConjunto.values())	console.log("[14]	Values	do	Meu	Conjunto:",item);
//	retorna	os	valores	em	ordem	(um	em	cada	linha)	:	1,		texto,	{	a:	1,	b:	2	},	{	a:	1,	b:	2	}
for	(let	[key,	value]	of	meuConjunto.entries())	console.log("[15]	Entries	do	Meu	Conjunto:",key);
//	retorna	os	valores	em	ordem	(um	em	cada	linha)	:	1,	texto,	{	a:	1,	b:	2	},	{	a:	1,	b:	2	}
const	meunumero	=	[2,3,4,4,2,3,3,4,4,5,5,6,6,7,5,32,3,4,5]	//	cria	um	array
console.log("[16]	Tamanho	meunumero",	meunumero.length);	//	retorna	19
var	novoArray	=	[...new	Set(meunumero)];	//	Converte	o	Set	para	Array
console.log("[17]	Novo	Array",	novoArray);	//	retorna	[2,	3,		4,	5,	6,	7,	32]
console.log("[18]	Tamanho	Novo	Array",	novoArray.length);	//	retorna	7
//	Iterar	entradas	set	com	forEach
meunumero.forEach(function(value)	{	
		console.log("[19-forEach]	Itens	Meunumero",value);	
});
//	retorna	os	valores	em	ordem	(um	em	cada	linha):	2,3,4,4,2,3,3,4,4,5,5,6,6,7,5,32,3,4,5
Fonte: a autora.
Use o objeto Set pode ser utilizado para remover elementos du-
plicados de um Array. O comando [v for (v of mySet)] foi removido, 
para converter um Set em Array utilizando [...mySet2].
Utilize o site onecompiler.com para executar seu JavaScript. Aces-
so ao código do Quadro 17 pelo link: <https://onecompiler.com/
javascript/3yw6hh7ng>.
DICA
Na	Tabela	10,	vemos	a	explicação	das	operações	básicas	de	um	objeto	Set	em	
JavaScript.	
184
Tabela 10 - Operações básicas com um objeto Set
Fonte: a autora.
Item Descrição
size propriedade	que	indica	a	quantidade	de	elementos	do	objeto
add(valor) adiciona o valor como um novo elemento no objeto
has(valor) retorna true se existir o elementos no objeto com o valor informado
delete(valor) exclui o elemento do objeto com o valor informado
[...meuConjunto] Converte	o	objeto	set	em	um	objeto	Array
new	Set(Array) Converte	o	objeto	Array	em	um	objeto	Set,	retirando	os	valores	repetidos.
forEach() Executa	um	loop,	uma	vez	para	cada	elemento	na	ordem	de	inserção.
keys() Não	existe	chave	como	no	objeto	Map,	é	apenas	um	alias	para	values()
values() retorna	os	valores	para	cada	elemento	no	objeto.
entries()
retorna	um	objeto	array	com	[valor,	valor],	como	no	Set	não	existe	chave	como	
em	Map,	para	manter	a	API	semelhante	e	retorna	o	valor	no	lugar	da	chave.
Saiba mais sobre Set no link: 
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/
Keyed_collections#conjuntos
DICA
3 TRABALHANDO COM OBJETOS
Um	objeto	é	uma	coleção	de	propriedades	que	são	associadas	a	um	valor	por	
um	nome	que	chamamos	de	chave	(key).	JavaScript	é	baseada	no	paradigma	orien-
tação	a	objeto.	Vamos	descrever	como	criar	os	objetos,	suas	propriedades	e	métodos.	
3.1 CRIAÇÃO DE OBJETOS 
Um	objeto	pode	ser	comparado	com	algo	da	vida	real,	por	exemplo	um	carro	
tem	suas	características	como	cor,	marca,	potência	etc.	As	propriedades	de	um	objeto	
em	JavaScript	descrevem	essas	características.	Para	criar	um	objeto,	podemos	utilizar	
um objeto inicializador ou criar a função construtora e depois instanciar o objeto com o 
operador	new.	
185
Quadro 19 - Inicializador de objetos
Fonte: a autora.
1
2
3
4
5
6
7
8
9
10
11
12
13
14 
15
16
var	objeto	=	{	propriedade_1:	"valor1",			//	pode	ser	um	identificador.
															2:												"valor2",																					//	ou	um	número
 		//	...,
														"propriedade	n":	"valor3"											//	ou	uma	string
	};	
var	carro	=	{	cor:	"branco",		
																				modelo:	"March",			
																				ano	:	"2016"
};
var	aluno	=	{	1:			"Ana",		
																					2:	"Maria",			
																					3	:	"João"
};
console.log("Objeto:	",	objeto);
console.log("Carro:	",carro);
console.log("Aluno:	",aluno);
Utilize o site onecompiler.com para executar seu JavaScript. Acesso 
ao código do Quadro 18 pelo link: 
<https://onecompiler.com/javascript/3ywbwmqu5>.
DICA
Outra	opção	é	criar	o	objeto	definido	através	de	uma	função	construtora	e	ins-
tanciar o objeto com operador new.	No	Quadro	20,	podemos	visualizar	um	exemplo	de	
função	construtora	e	a	criação	de	uma	instância.	
No	Quadro	19,	podemos	ver	a	utilização	de	um	inicializado.
https://onecompiler.com/javascript/3ywbwmqu5
186
Quadro 20 - Inicializador de objetos
Fonte: a autora.
1
2
3
4
5
6
7
8
9
10
11
12
13
14 
15
16
//Função	construtora	de	carro
function	carro	(	cor,	modelo,	ano,	dono){
				this.cor	=	cor;
				this.modelo	=	modelo;
				this.ano	=	ano;
				this.dono	=	dono;
}
//Função	construtora	de	Pessoa
function	pessoa	(nome,	cpf){
				this.nome	=	nome;
				this.cpf	=	cpf;
}
var	ana	=	new	pessoa("Ana	",	"123456789	");	//	Objeto	pessoa
//	uma	propriedade	pode	ser	um	objeto,	dono	recebe	o	objeto	pessoa.	
var	veiculo	=	new	carro("branco	",	"Nissan	March	",	"2019	",	"ana");	
Existe também o método de criação de objeto com Object.create, para 
entender melhor acesse o o link: https://developer.mozilla.org/pt-BR/
docs/Web/JavaScript/Guide/Working_with_Objects#criando_novos_
objetos
DICA
3.2 PROPRIEDADES
Uma	propriedade	de	um	objeto	em	JavaScript	é	implementada	por	um	variável	
vinculada	a	um	objeto.	O	acesso	às	propriedades	dos	objetos	podem	ser	feitos	de	duas	
formas:	pelo	nome	ou	pelo	índice	numérico.	
Porém,	o	índice	numérico	só	pode	ser	utilizado	quando	o	objeto	não	foi	definido	
pelo	nome	da	propriedade	ou	pela	função	construtora.	Por	exemplo,	se	iniciou	o	objeto	
usando	Carro[5]	=	“branco”	pode	ser	usado	carro[5]	para	acessar	a	propriedade,	mas	se	
iniciou	carro.cor	=	“branco”	só	pode	ser	acessado	pelo	nome	da	propriedade.	Formulá-
rios	também	podem	ser	acessados	pelo	índice	numérico,	porque	é	criado	uma	matriz	
em ordem de apresentação dos campos e pode ser acessado o atributo nome de um 
formulário	chamado	“cadastro”	por	“document.cadastro”,	“documento.form[“cadastro”]”	
ou	“document.forms[1]”.	
 
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Working_with_Objects#criando_novos_objetos
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Working_with_Objects#criando_novos_objetos
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Working_with_Objects#criando_novos_objetos
187
Vejamos	no	Quadro	20,	a	seguir,	com	exemplos	criação	e	acesso	às	proprieda-
des	de	um	objeto.	Ressaltando	que	as	funções	para	criação	dos	objetos	pessoa	e	carro	
estão	no	Quatro	20.
Quadro 21 - Inicializador de objetos
Fonte: a autora.
1
2
3
4
5
6
7
8
9
var	ana	=	new	pessoa(“Ana”,	“123456789”);	//	Objeto	pessoa	(função	criada	no	quadro	
anterior)
//	uma	propriedade	pode	ser	um	objeto,	dono	recebe	o	objeto	pessoa.	
var	veiculo	=	new	carro(“branco”,	“Nissan	March”,	“2019”,	ana);	(função	criada	no	quadro	
anterior)
//Descobrir	o	dono	do	veículo
console.log(“Proprietario:”,	veiculo.dono);
//	Para	alterar	uma	propriedade	já	definida
console.log(“Cor:”,	veiculo.cor);
veiculo.cor	=	“preto”;
console.log(“Cor:”,	veiculo.cor);
Depois de definido um objeto é possível adicionar uma propriedade 
nova, através da propriedade prototype. Veremos esse assunto mais 
adiante.
ESTUDOS FUTUROS
Utilize o site onecompiler.com para executar seu JavaScript. Acesso 
o código dos quadros 20 e 21 pelo link: https://onecompiler.com/
javascript/3ywd8z6et
DICA
3.3 DEFINIÇÃO DE MÉTODOS
Método	é	quando	uma	função	é	associada	a	um	objeto,	em	que	uma	proprie-
dade	do	objeto		é	uma	função.	Da	mesma	forma	que	definimos	uma	função,	utilizamos	
para	definir	um	método	e,	para	a	definição	de	uma	função	que	será	um	método,	preci-
samos	atribui-la	à	propriedade	de	um	objeto.	No	Quadro	21,	podemos	ver	a	definição	de	
um	método.
188
Quadro 22 - Definição de método
Fonte: a autora.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
//Definição	da	função	que	será	um	método	após	atribuição
function	dadosCarro(){
var	car	=	"Dados	do	veículo	->	Modelo:	"+	this.modelo+";	Cor:	"+		this.cor	+	";	Ano:	"	
+this.ano;
console.log(car);
}
function	dadosProprietario(){
		var	p	=	"Proprietário	do	veículo	"+	this.modelo+	"	é	";
		console.log	(p,	this.dono.dadosPessoais());
}
//	Definindo	atribuindo	a	função	a	propriedade	do	objeto	para	criar	o	método.
function	carro	(	cor,	modelo,	ano,	dono){
				this.cor	=	cor;
				this.modelo	=	modelo;
				this.ano	=	ano;
				this.dono	=	dono;
				this.dadosCarro	=	dadosCarro;
				this.dadosProprietario	=	dadosProprietario;
}
//	Definindo	o	método	diretamente	na	criação	do	objeto
var	pessoa	=	{	nome:"Ana",	
															cpf:	"12345678",
															dadosPessoais:	function()	{return	"Dados	Pessoais:	"+this.nome+"	-	CPF:	"+	
this.cpf;}
};
//Chamada	dos	métodos	dos	objetos
var	veiculo	=	new	carro("branco",	"Nissan	March",	"2019",	pessoa);
console.log("Proprietário:	:",	veiculo.dono);
veiculo.dadosCarro();
veiculo.dadosProprietario();
Utilize o site onecompiler.com para executar seu JavaScript. Acesso o código 
do quadro 22 pelo link: https://onecompiler.com/javascript/3ywdaccgq
DICA
189
4 VSCODE PARA JAVASCRIPT
Para	avançar	nos	estudos	precisamos	de	uma	ferramenta	que	nos	auxilie	nos	
testes	e	depuração	de	código.	O	VS	Code	é	um	editor	de	texto	leve	com	suporte	para	
JavaScript.
4.1 INSTALAÇÃO DO VSCODE 
Para	realizar	a	 instalação	no	Windows,	primeiro	realize	o	download	do	pacote	
zip	do	link:	<https://code.visualstudio.com/Download>	e	descompacte	o	pacote.	Abra	a	
pasta	compactada	e	acesso	o	arquivo	“Code.exe”,	será	aberta	a	tela	da	Figura	9.
Figura 9 - Tela inicial do VS Code
Fonte: a autora.
4.2 CONFIGURANDO VSCODE 
Vamos	instalar	o	pacote	de	idioma	em	português,	para	isso	precisamos	instalar	
extensões,	acesse	o	menu	Exibir	(View)	e	selecione	Extensões	(Extensions).
Para	instalar	o	pacote	de	idiomas	portugues,	digite	no	campo	“Search	Exten-
sions	in	Marketplace”	o	texto	“Portuguese	(Brazil)	Language	Pack”	(figura	10).
Clique	em	Instalar	(Install)	sobre	pacote	“Português	do	Brasil”	e	aguarde	a	fina-
lização,	então	será	apresentada	uma	tela	com	a	pergunta	se	deseja	alterar	o	idioma	e	
reiniciar	o	aplicativo	(Figura	10).	Clique	em	“Change	Language	and	Restart”	e	aguarde	
iniciar	o	VS	Code	novamente.
https://code.visualstudio.com/Download
190
Para	executar	nosso	projeto	HTML,	vamos	instalar	uma	extensão	“HTML	Play”	
para	visualizar	os	layout	durante	a	codificação.	Busque	a	extensão	da	mesma	forma	que	
foi	realizado	para	o	pacote	de	idioma.
Figura 10 - Tela de instalação de extensões
Fonte: a autora.
Figura 11 - Tela de pergunta sobre alteração do idioma
Fonte: a autora.
4.3 MONTANDO UM AMBIENTE DE ESTUDO 
Vamos	montar	um	ambiente	para	execução	do	nosso	formulário	de	login.	Para	
isso	crie	uma	pasta	chamada	“LoginExemplo”	em	seus	documentos.	Dentro	da	pasta	do	
projeto	crie	a	pasta	chamada	“client”	e	inclua	os	arquivos	do	projeto	do	formulário	de	
login	e	cadastro.	
Para baixar o projeto acesso o link:
https://github.com/profanapaulacostacurta/loginexemplo_github_pages
DICA
191
Para	executar	nosso	formulário	precisamos	abrir	a	pasta	do	projeto	no	VS	Code.	
Acesse	o	menu	“Arquivo”	e	selecione	“Abrir	Pasta	…”.	Selecione	a	pasta	“LoginExemplo”	
e	clique	no	botão	“Selecionar	Pasta”,	seu	projeto	aparecerá	no	Explorador	do	VS	Code.
Abra	o	arquivo	 “index.html”,	bastando	clicar	sobre	o	arquivo,	pressione	“CTR-
L+ALT+H”	que	 irá	aparecer	a	aba	“OUTPUT”	ao	 lado	da	 janela	do	código.	Assim,	con-
forme	forem	 realizadas	alterações	nos	arquivos	será	apresentado	o	Layout	das	telas	
conforme	Figura	12.
Figura 12 - Projeto LoginExemplo no VS Code
Fonte: a autora.
192
LEITURA
COMPLEMENTAR
USANDO FETCH API 
MDN	web	docs	
A	Fetch	API	fornece	uma	interface	JavaScript	para	acessar	e	manipular	partes	
do	protocolo,	 como	solicitações	e	 respostas.	Ele	 também	fornece	um	método	global	
fetch()	que	fornece	uma	maneira	fácil	e	lógica	de	buscar	recursos	de	forma	assíncrona	
na	rede.
Esse	tipo	de	funcionalidade	foi	obtido	anteriormente	usando	XMLHttpRequest.	
Fetch	fornece	uma	alternativa	melhor	que	pode	ser	facilmente	usada	por	outras	tecno-
logias,	como	Service	Workers.	Fetch	também	fornece	um	único	local	lógico	para	definir	
outros	conceitos	relacionados	a	HTTP,	como	CORS	e	extensões	para	HTTP.
A	especificação	fetch	difere	das	seguintes	maneiras	significativas:
•	 O	Promise	retornado	fetch()	não	rejeitará	o	status	de	erro	HTTP	mesmo	se	a	resposta	
for	um	HTTP	404	ou	500.	Em	vez	disso,	assim	que	o	servidor	responder	com	cabeça-
lhos,	o	Promise	será	resolvido	normalmente	(com	a	propriedade	“ok”	da	resposta	de-
finida	como	false	se	a	resposta	não	está	no	intervalo	de	200	a	299)	e	só	será	rejeitada	
em	caso	de	falha	na	rede	ou	se	algo	impedir	a	conclusão	da	solicitação.
•	 A	menos	que	fetch()	seja	chamado	com	a	credentials	opção	definida	como	include,	
fetch():
◦	 não	enviará	cookies	em	solicitações	de	origem	cruzada;
◦	 não	definirá	nenhum	cookie	enviado	de	volta	em	respostas	de	origem	cruzada;
◦	 a	partir	de	agosto	de	2018,	a	política	de	credenciais	padrão	foi	alterada	para	a	mes-
ma	origem.	O	Firefox	também	foi	modificado	na	versão	61.0b13).
Uma	solicitação	de	busca	básica	é	 realmente	simples	de	configurar.	Dê	uma	
olhada	no	seguinte	código:
1
2
3
fetch('http://example.com/movies.json')
			.then((response)	=>	response.json())
			.then((data)	=>	console.log(data));
http://example.com/movies.json
193
Na	linha	1,	estamos	buscando	um	arquivo	JSON	na	rede	e	imprimindo-o	no	con-
sole.	O	uso	mais	simples	de	fetch()	leva	um	argumento	—	o	caminho	para	o	recurso	que	
você	deseja	buscar	—	e	não	retorna	diretamente	o	corpo	da	resposta	JSON,	mas,	em	vez	
disso,	retorna	uma	promessa	que	resolve	com	um	Response	objeto.
O	Response	objeto,	por	sua	vez,	não	contém	diretamente	o	corpo	real	da	res-
posta	JSON,	mas	é	uma	 representação	de	toda	a	 resposta	HTTP.	Então,	para	extrair	
o	conteúdo	do	corpo	JSON	do	Response	objeto,	usamos	o	json()método,	que	retorna	
uma	segunda	promessa	que	resolve	com	o	resultado	da	análise	do	texto	do	corpo	da	
resposta	como	JSON.
Fonte: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API. Acesso em: 12 jan. 2023.
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
194
Neste tópico, você aprendeu:
•	 Conhecemos	o	objeto	Array	e	como	é	sua	estrutura,	realiza	o	armazenamento	com	
uma	chave	e	valor.	Os	nomes	dos	elementos	do	array	é	uma	String	e	o	valor	pode	ter	
elementos	com	propriedades	variadas.	
•	 Entendemos	como	o	objeto	Map	armazena	os	dados	na	ordem	de	entrada	dos	ele-
mentos,	é	um	mapa	que	utiliza	chave/valor	para	armazenamento	onde	a	chave	pode	
ser	de	qualquer	tipo	não	somente	string.
•	 O	objeto	Set	é	um	objeto	que	armazena	elementos	únicos,	ou	seja,	não	aceita	ele-
mentos	 iguais.	Mantém	o	 armazenamento	 na	 ordem	de	 entrada	 dos	 elementos	 e	
disponibiliza	método	para	a	conversão	para	um	Array.	Também	é	possível	utilizar	a	
conversão	de	um	Array	para	Set	para	eliminar	elementos	duplicados.	
• Aprendemos como criar objetos, criar um inicializador de objetos e uma classe cons-
trutora.	Entendemos	como	definir	as	propriedades	dos	objetos	e	como	atribuir	valo-
res.	Conhecemos	como	definir	métodos	e	visualizamos	exemplos	de	utilização.
•	 Para	facilitar	a	codificação	conhecemos	o	editor	de	texto	VS	Code,	aprendemos	a	rea-
lizar	a	instalação	do	aplicativo	e	configuração	das	extensões	necessárias	para	execu-
tar	um	projeto	Front-End		desenvolvido		HTML,	CSS	e	JavaScript.	Conhecemos	como	
visualizar	o	Layout	da	tela	conforme	codificamos	com	a	Extensão	HTML	Play.
RESUMO DO TÓPICO 3
195
AUTOATIVIDADE
1	 “Em	JavaScript,	a	maioria	das	coisas	são	objetos,	desde	os	principais	recursos	do	Ja-
vaScript,	como	arrays,	até	o	navegador	APIs	construído	sobre	o	JavaScript.	Também	
é	possível	criar	os	próprios	objetos	para	encapsular	funções	e	variáveis			relacionadas	
em	pacotes	eficientes	e	atuar	como	contêineres	de	dados	úteis.”	
Fonte:	MDN.	Introdução a objetos em Javascript.	
Disponível	em:	https://developer.mozilla.org/pt-BR/docs/Learn/JavaScript/Objects.	Acesso	em:	30	jan.	2023.
Com	base	no	uso	de	objetos	em	JavaScript,	analise	as	sentenças	a	seguir:
I-	 Antes	de	surgir	o	JavaScript	ES6,	existiam	dois	tipos	de	dados	para	lidar	com	as	co-
leções:	objetos	e	arrays.	Após	o	lançamento	do	ES6,	foram	adicionadas	duas	novas	
estruturas	de	dados:	mapa	(Map)	e	conjuntos	(Set).
II-	 Pode-se	utilizar	os	loops	for…of	e	for..	Each	para	as	três	coleções:	Array,	Map	e	Set	e	
os	três	objetos	retornam	um	Array	[chave,	valor].
III-	 É	possível	utilizar	o	atributo	length,	para	os	três	objetos:	Array,	Map	e	Set.	E	a	sintaxe	
é	Objeto.length()	que	retorna	a	quantidade	de	elementos	do	objeto.
Assinale	a	alternativa	CORRETA:
a)	 (			)	 As	sentenças	I	e	II	estão	corretas.
b)	 (			)	 Somente	a	sentença	I	está	correta.
c)	 (			)	 As	sentenças	I	e	III	estão	corretas.
d)	 (			)	 Somente	a	sentença	III	está	correta.
2	 “Arrays	são	geralmente	descritas	como	"lista	de	objetos";	elas	são	basicamente	obje-
tos	que	contêm	múltiplos	valores	armazenados	em	uma	lista.	Um	objeto	array	pode	
ser	armazenado	em	variáveis	e	ser	tratado	de	forma	muito	similar	a	qualquer	outro	
tipo	de	valor,	a	diferença	está	em	podermos	acessar	cada	valor	dentro	da	lista	indivi-
dualmente,	e	fazer	super	úteis	e	eficientes	coisas	com	a	lista,	como	laço	através	da	
lista	e	fazer	a	mesma	coisa	para	cada	valor.”
Fonte:	MDN.	Arrays.	Disponível	em:	https://developer.mozilla.
org/pt-BR/docs/Learn/JavaScript/First_steps/Arrays.	
Acesso	em:	30	jan.	2023.
196
Com	base	na	utilização	das	classes	do	Bootstrap	5	para	grupo	e	união	de	campos,	ana-
lise as sentenças a seguir:
I-	 Para	criar	um	Array	temos	apenas	uma	opção	que	é	a	utilização	do	operador	new	
Array(numero),	criando	um	Array	com	a	quantidade	de	elementos	igual	ao	número	
indicado.  
II-	 Utilizando	o	comando	var	carro	=	[],	cria	um	Array	vazio	e	deve	ser	utilizado	o	co-
mando	 carro.length	 =	 numero	 para	 indicar	 a	 quantidade	 de	 elementos	 antes	 de	
povoar	o	Array.
III-	 A	quantidade	de	elementos	ou	tamanho	de	um	Array	é	o	último	índice	+	1,	ou	seja,	
se	último	elemento	Carro[2]	onde	o	índice	é	2	esse	Array	tem	3	elementos	pois	o	
índice	começa	em	zero.
Assinale	a	alternativa	CORRETA:
a)	 (			)	 As	sentenças	I	e	II	estão	corretas.
b)	 (			)	 Somente	a	sentença	II	está	correta.
c)	 (			)	 As	sentenças	I	e	III	estão	corretas.
d)	 (			)	 Somente	a	sentença	III	está	correta.
3	 “Um	objeto	é	uma	coleção	de	dados	e/ou	funcionalidades	relacionadas	(que	geral-
mente	consistem	em	diversas	variáveis	e	funções	—	que	são	chamadas	de	proprie-
dades	e	métodos	quando	estão	dentro	de	objetos).	Vamos	trabalhar	com	um	exemplo	
para	entender	como	eles	são.”	
Fonte:	MDN.	O básico sobre objetos JavaScript.	
Disponível	em:	https://developer.mozilla.org/pt-BR/docs/
Learn/JavaScript/Objects/Basics.	Acesso	em:	30	jan.	2023.
(   )	Para	criar	um	objeto	em	JavaScript	só	é	possível	após	a	definição	da	função	cons-
trutora.
(   )	As	propriedades	de	um	objeto	em	JavaScript	é	implementada	por	uma	variável	de-
clarada	dentro	de	um	objeto.
(   )	Método	é	quando	uma	função	é	associada	a	um	objeto,	onde	uma	propriedade	do	
objeto	que	é	uma	função.
Assinale	a	alternativa	que	apresenta	a	sequência	CORRETA:
a)	 (			)	 V	–	F	–	F.
b)	 (			)	 V	–	V	–	V.
c)	 (			)	 F	–	V	–	F.
d)	 (			)	 F	–	F	–	V.
197
4	 “Em	JavaScript,	quase	tudo	é	um	objeto.	Todos	os	tipos	primitivos	-	com	exceção	
de	null	e	undefined	-	são	tratados	como	objetos.	Eles	podem	receber	propriedades	
(propriedades	atribuídas	de	alguns	tipos	não	são	persistentes),	e	possuem	todas	as	
características	de	objetos.”
Fonte: MDN. Trabalhando com objetos - Objetos: tudo. 
Disponível em: https://developer.mozilla.org/pt-BR/docs/Web/
JavaScript/Guide/Working_with_Objects. Acesso em: 30 jan. 2023.
Disserte	sobre	a	diferença	entre	função	construtora	e	métodos.
5	 Considere	o	trecho	de	código	escrito	em	JavaScript	do	quadro	abaixo:
Considerando	esse	contexto,	faça	o	que	se	pede	abaixo:
a)	Crie	a	função	construtora	do	objeto	aluno.
b)	Crie	a	função	construtora	do	objeto	disciplina,	sabendo	que	o	atributo	matriculado	é	
um	Array.
c)	Crie	o	Método	realizarMatricula(rgm)	do	objeto	disciplina.	Deve	ser	realizada	a	vali-
dação	para	verificar	se	todas	as	vagas	foram	preenchidas,	caso	tenha	vaga	inclui	o	
rgm	no	atributo	“matriculados”	e	apresenta	a	mensagem	"Matrícula	Realizada	com	
Sucesso!",	caso	não	tenha	vaga	apresente	a	mensagem	"Matrícula	não	realizada,	já	
foram	preenchidas	todas	as	vagas!"
d)	Qual	será	a	saída	no	console	do	comando	da	linha	11.
1
2
3
4
5
6
7
8
9
10
11
var	disciplina	=	new	disciplina	(1,	"Algoritimo",	3);
var	aluno1	=	new	aluno("Ana",	"Costa",	"a@gmail.com",	12345);
var	aluno2	=	new	aluno("Maria",	"Silva",	"m@gmail.com",	12346);
var	aluno3	=	new	aluno("João",	"Silva",	"j@gmail.com",	12347);
var	aluno4	=	new	aluno("Pedro",	"Santos",	"p@gmail.com",	12348);
//	Matrícula	dos	Alunos
console.log(disciplina.realizarMatricula(aluno1.rgm));	//	Matrícula	do	Aluno1
console.log(disciplina.realizarMatricula(aluno2.rgm));	//	Matrícula	do	Aluno2
console.log(disciplina.realizarMatricula(aluno3.rgm));	//	Matrícula	do	Aluno3
console.log(disciplina.realizarMatricula(aluno4.rgm));	//	Matrícula	do	Aluno4
console.log("Matriculados	na	",	disciplina.nome,	"são:	",disciplina.matriculados);
198
REFERÊNCIAS
MDN.	Funções - blocos de código reutilizáveis.	Disponível	em:	https://developer.
mozilla.org	/pt-BR/docs/Learn/JavaScript/Building_blocks/Functions.	Acesso	em:	10	
jan.	2023a.
MDN.	Formulários da Web - Trabalhando com dados do usuário. Disponível	em:	
https://developer.mozilla.org/pt-BR/docs/Learn/Forms.	Acesso:	15	jan.	2023b.
MDN.	Introduction to the DOM. Disponível	em:	https://developer.mozilla.org/en-US/
docs/	Web/API/Document_Object_Model/Introduction.	Acesso	em:	15	jan.	2023c.
BOOTSTRAP.	Documentos Bootstrap 5.3.0-alpha1.	Disponível	em:	https://
getbootstrap.com/.	Acesso	em:	15	jan.	2023a.
BOOTSTRAP.	Documentos:	Forms	-	Validation. Disponível	em:	https://getbootstrap.
com/docs/5.3/forms/validation/.	Acesso	em:	26	jan.	2023b.
199
INTRODUÇÃO AO REACT 
JAVASCRIPT
UNIDADE 3 — 
OBJETIVOS DE APRENDIZAGEM
PLANO DE ESTUDOS
 A partir do estudo desta unidade, você deverá ser capaz de:
• compreender os conceitos fundamentais do React e sua importância no 
desenvolvimento de aplicações web modernas;
• utilizar a JSX (JavaScript Syntax Extension) para renderizar componentes de forma 
declarativa e intuitiva;
•	 organizar	a	estrutura	de	um	projeto	utilizando	React	de	maneira	eficiente,	
facilitando o desenvolvimento e a manutenção do código;
• incorporar expressões e valores dinâmicos em atributos dos elementos JSX para 
personalizar a renderização dos componentes; 
• manipular eventos e gerenciar o estado de um componente de React;
• navegar entre diferentes páginas e fazer requisições HTTP em aplicações de React;
•	 utilizar	ativos,	como	imagens	e	estilos,	em	projetos	envolvendo	React;
• desenvolver o primeiro projeto utilizando React.
 A cada tópico desta unidade você encontrará autoatividades com o objetivo de 
reforçar o conteúdo apresentado.
TÓPICO 1 – COMEÇANDO COM REACT JAVASCRIPT
TÓPICO 2 – DADOS E STATUS
TÓPICO 3 – NAVEGAÇÃO E ATIVOS REACT
Preparado para ampliar seus conhecimentos? Respire e vamos em frente! Procure 
um ambiente que facilite a concentração, assim absorverá melhor as informações.
CHAMADA
200
CONFIRA 
A TRILHA DA 
UNIDADE 3!
Acesse o 
QR Code abaixo:
201
TÓPICO 1 — 
COMEÇANDO COM REACT JAVASCRIPT
UNIDADE 3
1 INTRODUÇÃO
Bem-vindo	a	este	tema	de	aprendizagem,	no	qual	você	será	apresentado	ao	
React e aprenderá os conceitos fundamentais para começar a desenvolver aplicações 
com esta biblioteca. Vamos começar com uma visão geral do React,	entendendo	sua	
importância e benefícios para o desenvolvimento web moderno.
Em	seguida,	exploraremos	o	conceito	de	componentes	e	props,	que	são	a	base	
da arquitetura do React.	Você	aprenderá	como	criar	e	usar	componentes	reutilizáveis,	
bem como passar dados para esses componentespor meio de props.
Posteriormente,	discutiremos	a	estrutura	de	um	projeto	utilizando	React,	dis-
cutindo as melhores práticas para organizar o código e facilitar a manutenção. Veremos 
como dividir o código em componentes menores e como estruturar as pastas do projeto 
de	forma	eficiente.
Por	fim,	apresentaremos	a	JSX,	uma	extensão	de	sintaxe	JavaScript usada para 
renderizar componentes declarativamente. Veremos como usar a JSX para criar ele-
mentos	e	incorporar	lógica	dinâmica,	permitindo	a	construção	de	interfaces	de	usuário	
interativas e customizadas.
2 VISÃO GERAL
O React é uma estrutura JavaScript desenvolvida pela Meta (antigo Facebook) 
para criar interfaces de usuário (UI) em aplicativos da web. Esta estrutura é apreciada 
por	sua	simplicidade,	flexibilidade	e	escalabilidade,	sendo	utilizada	por	grandes	empre-
sas	de	tecnologia	como	o	próprio	Facebook,	Instagram	e	Airbnb.
As	estruturas	e	bibliotecas	de	front-end,	como	o	React,	são	partes	essenciais	
do desenvolvimento web moderno. O React,	especificamente,	ganhou	popularidade	na	
comunidade JavaScript	por	sua	eficiência	no	desenvolvimento	de	aplicações	web.
Uma das grandes vantagens do React é oferecer uma abordagem modular e 
reutilizável	na	criação	de	aplicativos	da	web.	Isso	é	possível	por	meio	de	componentes,	
que são partes independentes de código que podem ser reunidas para formar uma in-
terface de usuário completa. Cada componente é responsável por um segmento espe-
cífico	da	interface	do	usuário	e	pode	ser	reutilizado	em	diferentes	seções	do	aplicativo.
202
Outro recurso relevante do React é o Virtual DOM (Document Object Model),	
o qual é uma representação em memória da estrutura da árvore DOM,	que	permite	ao	
React	alterar	somente	os	elementos	que	precisam	ser	atualizados,	tornando	a	interface	
de	usuário	mais	eficiente.
Além	disso,	o	React	suporta	a	renderização	do	lado	do	servidor,	o	que	torna	o	
carregamento	do	conteúdo	do	aplicativo	mais	rápido,	além	de	melhorar	a	otimização	
para	mecanismos	de	busca.	Por	fim,	com	o	React Native,	 é	possível	criar	aplicativos	
móveis para iOS e Android utilizando a mesma base de código do React.
Para trabalhar com React,	os	desenvolvedores	precisam	ter	conhecimento	em	
JavaScript,	HTML e CSS. Também é importante conhecer ferramentas como Node.js e 
npm (Node Package Manager). O Node.js permite escrever e executar código JavaS-
cript	em	um	servidor,	enquanto	o	npm	ajuda	a	instalar,	compartilhar	e	gerenciar	pacotes	
de código JavaScript.
3 COMPONENTES E PROPS
Agora que já entendemos um pouco de React,	vamos	entender	melhor	os	con-
ceitos de componentes e propriedades. Componentes são o alicerce do desenvolvi-
mento com React,	pois	eles	nos	permitem	construir	interfaces	de	usuário	modulares	e	
reutilizáveis.
No React,	um	componente	pode	ser	uma	função	ou	classe	que	retorna	uma	re-
presentação	visual	de	um	pedaço	específico	da	interface	de	usuário.	Você	pode	pensar	
em um componente como um bloco de construção que encapsula a lógica e a aparên-
cia de um trecho da página. Esse estilo modular facilita a manutenção e a organiza-
ção do código e promove a reutilização em várias partes do projeto. Existem dois tipos 
principais de componentes no React: os componentes de função e os componentes 
de classe.
Um componente de função é uma função JavaScript que retorna um elemen-
to JSX,	ou	seja,	a	representação	visual	do	componente.	Esses	componentes	são	mais	
simples de criar e geralmente são utilizados quando não há necessidade de armazenar 
um estado interno ou usar os métodos de ciclo de vida do React.
Já um componente de classe é uma classe JavaScript que estende a classe 
base Componente do React.	Esses	componentes	são	mais	poderosos	e	flexíveis,	pois	
podem armazenar um estado interno e têm acesso aos métodos de ciclo de vida do 
React.	Ao	criar	um	componente	de	classe,	você	precisará	implementar	um	método	ren-
der() que retorne a representação visual do seu componente.
Um dos recursos mais valiosos do React é a capacidade de passar dados para 
componentes	por	meio	de	propriedades,	também	conhecidas	como	props. As props são 
203
parâmetros	que	podem	ser	definidos	quando	você	usa	o	componente	no	código,	per-
mitindo	que	eles	recebam	informações	externas	e	se	configurem	de	maneira	dinâmica.
Quando um componente recebe props,	ele	pode	utilizar	esses	dados	para	per-
sonalizar sua apresentação e comportamento. Você pode utilizar alguns tipos de dados 
como props: strings,	objetos,	números,	booleanos	e	até	mesmo	funções.
Nos	componentes	de	função,	as	props podem ser acessadas como argumentos 
da	função.	Já	nos	componentes	de	classe,	você	pode	acessá-las	como	propriedades	
do objeto "this.props".
Utilizando os conceitos que acabamos de aprender sobre o React,	vamos	criar	
um exemplo para ajudar a entender melhor os componentes e propriedades (props).
Vamos considerar que você esteja criando uma aplicação de lista de tarefas. 
Cada tarefa pode ser representada por um componente. Para um componente de fun-
ção,	poderíamos	fazer	algo	assim	(Quadro	1):
Quadro 1 – Componente de função
function Tarefa(props) {
 return <li>{props.texto}</li>;
}
Fonte: a autora.
Nesse	 exemplo,	 Tarefa	 é	 um	 componente	 de	 função	 que	 recebe	 um	 objeto	
props	 como	argumento.	Este	objeto	contém	uma	propriedade	chamada	texto,	que	é	
usada para personalizar a apresentação do componente.
Agora,	suponha	que	queremos	criar	uma	 lista	de	tarefas.	Podemos	fazer	 isso	
usando o componente Tarefa que acabamos de criar (Quadro 2):
Quadro 2 – Lista de tarefas
Fonte: a autora.
function ListaDeTarefas() {
		const	tarefas	=	['Estudar	React','Fazer	exercícios','Ler	um	livro'];
 return (
 <ul>
						{tarefas.map((tarefa,	index)	=>	<Tarefa	key={index}	texto={tarefa}	/>)}
 </ul>
 );
}
204
Neste	 exemplo,	 ListaDeTarefas	 é	 outro	 componente	de	 função	que	 cria	 uma	
lista não ordenada (<ul>) de tarefas. Para cada tarefa em nosso array	tarefas,	criamos	
um	novo	componente	Tarefa,	passando	a	tarefa	atual	como	uma	prop chamada texto.
Feito	 isso,	 podemos	observar	 que	os	 componentes	 e	propriedades	do	React 
possibilitam a criação de interfaces de usuário modulares e reutilizáveis. O uso de com-
ponentes facilita a organização do código e permite a reutilização em várias partes do 
projeto.	As	propriedades,	por	sua	vez,	fornecem	uma	maneira	poderosa	de	personalizar	
a	apresentação	e	o	comportamento	dos	componentes.	Assim,	ao	entender	e	dominar	
esses	conceitos,	você	dará	um	grande	passo	para	se	tornar	um	desenvolvedor	eficiente	
em React.
4 ESTRUTURA
Agora que entendemos os conceitos de componentes e props,	 vamos	
abordar a estrutura básica de um projeto utilizando React. É importante compreender 
como organizar e estruturar os arquivos em um projeto com React para facilitar o 
desenvolvimento e a manutenção do código.
Para começarmos a desenvolver com React,	é	importante	entender	a	estrutura	
básica de um projeto típico. Um projeto com React geralmente possui uma pasta 
src (source)	 que	 contém	 todos	 os	 arquivos-fonte	 da	 aplicação.	 Dentro	 dessa	 pasta,	
encontramos o arquivo index.js,	que	é	o	ponto	de	entrada	principal	da	aplicação	com	
React.
Além	 disso,	 a	 estrutura	 de	 um	 projeto	 com	 React envolve a hierarquia de 
componentes.	Os	componentes	podem	ser	organizados	em	uma	estrutura	hierárquica,	
onde	um	componente	pai	pode	conter	um	ou	mais	componentes	filhos.	Essa	organização	
facilita	a	reutilização	e	a	manutenção	do	código,	uma	vez	que	os	componentes	podem	
ser isolados.
Em um típico projeto com React,	é	comum	encontrar	a	seguinte	estrutura	de	
diretórios (Quadro 3):
205
Quadro 3 – Estrutura de diretórios
Fonte: a autora.
meu-projeto/
 src/
 index.js
 App.js
 components/
 Componente1.js
 Componente2.js
 pages/
 Pagina1.js
 Pagina2.js
 assets/
 imagem.jpg
 estilo.css
 public/
 index.html
Imagine que você está construindo uma casa e precisa organizar todas as pe-
ças	 e	materiais	 necessários.O	 diretório	 do	 seu	projeto	 é	 como	uma	planta	 da	 casa,	
onde você pode encontrar todas as partes do seu aplicativo e os recursos que serão 
utilizados.
1. Diretório principal ("meu-projeto"):
	 O	diretório	principal,	chamado	"meu-projeto",	representa	a	base	do	projeto.	É	como	a	
casa	em	si,	que	abrigará	todas	as	outras	partes	do	aplicativo.	Neste	diretório,	estão	
contidos os principais diretórios: "src" e "public".
2. Diretório "src":
 O diretório "src"	 é	 a	 parte	 interna	 da	 casa,	 onde	 são	 colocadas	 todas	 as	 coisas	
necessárias para construir e executar o aplicativo. Ele contém arquivos e subdiretórios 
essenciais para o funcionamento do projeto. É neste diretório que a maior parte do 
trabalho de desenvolvimento ocorre.
3. Arquivo "index.js":
 O arquivo "index.js" pode ser comparado à planta elétrica da casa. Ele é o ponto de 
partida	 do	 aplicativo,	 responsável	 por	 definir	 as	 configurações	 iniciais	 e	 importar	
outros arquivos necessários. É neste arquivo que geralmente se inicia o processo de 
renderização do aplicativo utilizando React.
206
4. Arquivo "App.js":
 O arquivo "App.js"	representa	a	sala	principal	da	casa,	onde	ocorre	a	maior	parte	da	
interação do aplicativo. É neste arquivo que os componentes são criados e combinados 
para construir a interface do usuário. O "App.js" é responsável por estruturar a lógica 
e a aparência do aplicativo.
5. Pasta "components":
 A pasta "components" pode ser comparada a uma caixa de ferramentas dentro da 
casa. Ela armazena todos os componentes reutilizáveis do aplicativo. Dentro desta 
pasta,	é	comum	encontrar	arquivos	como	"Component1.js" e "Componente2.js",	que	
representam	 as	 ferramentas	 específicas	 que	 podem	 ser	 utilizadas	 em	 diferentes	
partes do aplicativo.
6. Pasta "pages":
 A pasta "pages"	 pode	 ser	 comparada	 aos	 quartos	 da	 casa,	 onde	 cada	 página	 do	
aplicativo	possui	seu	próprio	arquivo.	Os	arquivos,	como	"Página1.js" e "Pagina2.js",	
representam	esses	quartos,	onde	o	conteúdo	e	a	 lógica	específica	de	cada	página	
são colocados. Cada arquivo na pasta "pages" geralmente representa uma página 
distinta do aplicativo.
7. Pasta "assets":
 A pasta "assets"	 pode	 ser	 comparada	 à	 despensa	 da	 casa,	 onde	 são	 guardados	
todos os recursos e materiais necessários para o aplicativo. Esta pasta é utilizada 
para	armazenar	arquivos	estáticos,	como	imagens,	arquivos	de	estilo	CSS	e	outros	
recursos	que	o	aplicativo	possa	precisar.	Por	exemplo,	um	arquivo	como	"imagem.
jpg"	pode	representar	uma	imagem	a	ser	exibida	no	aplicativo,	enquanto	"estilo.css" 
contém instruções para estilizar a aparência do aplicativo.
8. Pasta "public":
 A pasta "public"	representa	a	entrada	da	casa,	onde	são	colocadas	coisas	que	são	
acessíveis diretamente pelo público. O arquivo "index.html" é como o tapete de boas-
vindas	na	porta	de	entrada,	sendo	o	arquivo	HTML principal do aplicativo. Esse arquivo 
geralmente contém um elemento <div>	com	um	ID	específico,	onde	o	aplicativo	com	
React será renderizado.
Em	resumo,	cada	elemento	da	estrutura	do	projeto	com	React possui um papel 
específico	e	contribui	para	a	organização	e	funcionamento	do	aplicativo.	Essa	estrutura	
permite uma maneira sistemática de armazenar os arquivos e componentes necessá-
rios para a construção e execução do aplicativo.
Ao iniciar um projeto com React,	é	comum	utilizar	ferramentas	como	o	Create 
React App (CRA),	que	já	estrutura	a	aplicação	inicial	automaticamente	e	configura	um	
ambiente de desenvolvimento pronto para uso.
207
Lembre-se de que a estrutura de um projeto com React pode variar dependen-
do	das	preferências	e	necessidades	específicas	de	cada	projeto.	É	importante	manter	
uma	organização	consistente	e	escalável,	garantindo	que	o	código	seja	de	fácil	com-
preensão e manutenção.
Na	próxima	seção,	vamos	explorar	a	sintaxe	JSX,	que	é	uma	extensão	do	Ja-
vaScript utilizada no React para renderizar componentes de forma declarativa e intuitiva.
5 INTRODUÇÃO JSX (JAVASCRIPT SYNTAX EXTENSION)
Caro	acadêmico,	prepare-se	para	continuar	com	o	aprendizado	do	React Ja-
vaScript enquanto nos aprofundamos em JSX ou JavaScript	Syntax	Extension.	Com	
um	pouco	de	paciência	e	prática,	você	 logo	descobrirá	que	a	JSX é uma ferramenta 
essencial em seu kit de ferramentas de programação React. 
5.1 O QUE É JSX?
JSX é uma extensão de sintaxe para JavaScript. Pode parecer muito com HTML,	
mas não se engane! É totalmente incorporada ao JavaScript e fornece uma maneira 
mais intuitiva e versátil de estruturar seus componentes React.
Embora não seja absolutamente necessário usar JSX	 ao	codificar	 com	React,	
isso	torna	a	tarefa	significativamente	mais	direta	e	agradável.	Ela	nos	permite	escrever	
nossos componentes de forma que se assemelhe à estrutura que eles terão no (Docu-
ment Object Model) DOM,	que	é	mais	fácil	para	a	maioria	das	pessoas	entender	e	trabalhar.
5.2 POR QUE JSX?
Aqui está a importância da JSX: ela nos permite escrever sintaxe semelhante à 
HTML diretamente em nosso código JavaScript.	Isso	significa	que	podemos	aproveitar	o	
poder do JavaScript para renderizar HTML dinamicamente em nossas páginas da web. 
A extensão reúne o melhor dos dois mundos: a expressividade do JavaScript com a 
sintaxe familiar do HTML.
Além	disso,	como	a	JSX está mais próxima do JavaScript do que do HTML,	po-
demos usar o poder do JavaScript	para	lógica,	loops,	condições	e	muito	mais	dentro	de	
nossa	marcação.	Isso	torna	nossos	componentes	mais	flexíveis	e	robustos.
5.3 SINTAXE JSX BÁSICA
Vamos dar uma olhada em um exemplo muito simples de sintaxe JSX (Quadro 4):
208
Quadro 4 – Sintaxe JSX
Fonte: a autora.
elemento	const	=	<h1>Olá,	mundo!</h1>;
No	 exemplo	 do	 Quadro	 4,	 o	 texto	 dentro	 dos	 colchetes	 angulares	 (`<h1>Olá, 
mundo!</h1>`)	pode	parecer	HTML,	mas	na	verdade	é	JSX.
O resultado dessa expressão JSX é um objeto JavaScript – um elemento React,	
para ser preciso – que representa um elemento HTML. React usará este objeto para 
construir um elemento HTML real no DOM.
Na JSX,	você	 também	pode	usar	 expressões	JavaScript colocando-as entre 
chaves	`{}`.	Por	exemplo	(Quadro	5):
Quadro 4 – Sintaxe JSX
Fonte: a autora.
const nome = 'Joao';
elemento	const	=	<h1>Olá,	{nome}</h1>;
No	Quadro	5,	 `{name}` é uma expressão JavaScript dentro da sintaxe JSX. O 
React avaliará essa expressão e incluirá o resultado no HTML	gerado,	portanto	o	HTML 
resultante	no	DOM	seria	`<h1>Olá, Joao</h1>`.
5.4 UMA PALAVRA DE CAUTELA
A JSX	também	tem	suas	peculiaridades,	que	exploraremos	ao	longo	deste	livro.	
Por	exemplo,	por	ser	mais	próxima	do	JavaScript do que do HTML,	a	JSX usa a con-
venção de nomenclatura do JavaScript	para	atributos	e	propriedades.	Isso	significa	que	
class se torna className,	tabindex se torna tabIndex e assim por diante.
À	medida	que	avançamos	em	nosso	aprendizado,	exploraremos	exemplos	mais	
complexos e descobriremos como a JSX forma a base da criação de componentes no 
React.	Lembre-se,	a	prática	é	fundamental,	portanto,	certifique-se	de	codificar	enquan-
to trabalha neste livro.
209
5.5 APROFUNDANDO-SE NA JSX
Após nossa introdução inicial à JSX,	vamos	nos	aprofundar	mais	nessa	parte	
integrante do React JavaScript.	Neste	subtema,	examinaremos	alguns	conceitos	mais	
avançados,	entenderemos	as	regras	da	JSX e até aprenderemos a lidar melhor com a 
JSX. Este subtema irá ampliar sua compreensão e equipá-lo com as ferramentas para 
usar a JSX	de	forma	mais	eficaz	em	seus	aplicativos	com	React.
5.5.1 JSX também é uma expressão
Em JavaScript,	as	expressões	são	trechos	de	código	que	produzem	um	valor.	
Por	exemplo,	`2	+	2`	é	uma	expressão	porque	é	avaliada	como	`4`.	O	que	também	acon-
tece	com	`user.firstName`	porque	é	avaliado	como	o	primeiro	nome	do	objeto	 `user`.	
Adivinha? Elementos JSX também são expressões!
Como a JSX compila em JavaScript,	você	pode	usar	elementos	JSX em qual-
quer lugar em que usaria expressões JavaScript.	Por	exemplo,	você	pode	atribuir	ele-
mentos JSX	a	variáveis,	passá-los	como	argumentos