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.