05 Criação e formatação de páginas web com HTML

Prévia do material em texto

Criação e formatação de páginas 
web com HTML
Apresentação
O Hypertext Markup Language (HTML) é uma linguagem de marcação de hipertexto voltada para a 
estruturação de documentos que são apresentados em um navegador web. Na prática, isso significa 
que a linguagem HTML é utilizada para construir os mais diversos sites para a internet. A linguagem 
HTML utiliza um conjunto de elementos agrupados por funções, denoninados tags, que mantêm 
uma estrutura básica para utilização desses elementos e possibilitam a exibição do conteúdo e a 
utilização de recursos de hipermídia, como textos, links, imagens, tabelas, vídeos, entre outros.
Nesta Unidade de Aprendizagem, você vai conhecer as principais características do processo de 
criação de páginas web a partir das tags da linguagem HTML.
Bons estudos.
Ao final desta Unidade de Aprendizagem, você deve apresentar os seguintes aprendizados:
Reconhecer as declarações de documentos HTML.•
Identificar e aplicar as tags do HTML.•
Criar páginas web com HTML.•
Desafio
O seu professor lançou os seguintes desafios para a turma: 
1 - Qual é a função do doctype em um documento HTML? 
2 - Quais são os oito tipos de doctype que podem ser encontrados nos documentos atuais e a 
característica de cada um?
Infográfico
Neste infográfico é mostrada a estrutura básica de um código HTML.
A imagem a seguir possui audiodescrição. Para acessar o recurso, clique aqui
 
https://creator-files.plataforma.grupoa.education/undefined/REVISADO_9202_Audiodescricao_Infografico-2025-10-27T18:00:35-03:00.docx
Conteúdo do Livro
HTML, ou HyperText Markup Language, é a base desenvolvimento web moderno. Criado por Tim 
Berners-Lee no início da década de 1990, HTML é uma linguagem de marcação utilizada para 
estruturar e formatar o conteúdo das páginas da web. Sua função principal é definir elementos 
como títulos, parágrafos, imagens, links e outros componentes essenciais que compõem uma 
página web. Com o HTML, os desenvolvedores podem criar documentos acessíveis e bem 
organizados.
No contexto do desenvolvimento web, o HTML é frequentemente combinado com outras 
tecnologias, como CSS (Cascading Style Sheets) e JavaScript, para enriquecer a apresentação visual e 
interatividade das páginas. Enquanto o HTML se concentra na estrutura e semântica do conteúdo, 
o CSS permite estilizar elementos e definir layout, enquanto o JavaScript adiciona funcionalidades 
dinâmicas e interativas.
Neste capítulo sobre Criação e Formatação de páginas HTML, você aprenderá diversos conceitos e 
aplicabilidade sobre desenvolvimento utilizando HTML, bem com sua importância. Em seguida, 
você conhecerá as principais tags HTML e seu modo de utilização. Por fim, serão apresentados 
alguns exemplos de website básico com as principais tags HTML.
Os elementos gráficos deste capítulo possuem audiodescrição. Para acessar o recurso, 
clique aqui
https://creator-files.plataforma.grupoa.education/undefined/REVISADO_9202_Audiodescricao_Conteudo_Livro-2025-10-27T18:41:51-03:00.docx
FERRAMENTAS DE 
DESENVOLVIMENTO 
WEB
OBJETIVOS DE APRENDIZAGEM
 > Reconhecer o papel do HTML na confecção de páginas web.
 > Identificar as principais tags HTML.
 > Criar páginas web utilizando HTML.
Introdução
O desenvolvimento web refere-se à construção e criação de sites (coleção 
de páginas da web relacionadas). Para criar um site, precisamos de algumas 
linguagens que são utilizadas para projetar sua estrutura e aprimorar sua 
aparência e suas funções. O desenvolvimento web é feito principalmente em 
duas partes: desenvolvimento front-end (aparência e organização) e desenvolvi-
mento back-end (procedimentos, dados e banco de dados). O HTML (HyperText 
Markup Language, ou linguagem de marcação de hipertexto) é usado na parte 
front-end para criar o esqueleto ou estrutura da página da web.
O HTML foi desenvolvido por Tim Berners Lee em 1993. É uma linguagem 
que os navegadores da web entendem e é usada para exibir texto, imagens, 
áudio e vídeo na web.
Criação e 
formatação de 
páginas web 
com HTML
Victor de Andrade Machado
Neste capítulo, você vai apreender a construir páginas HTML entendendo 
seus conceitos e importância no desenvolvimento web. Além disso, vai identifi-
car as principais tags utilizadas na construção de sites, bem como os elementos 
que fazem parte da organização das páginas. Por fim, serão apresentados alguns 
exemplos mais completos de páginas em HTML utilizando as tags apresentadas 
e suas formatações adequadas.
Importância e conceitos do HTML
HTML é a linguagem de construção básica de qualquer site que vemos na 
internet. Portanto, é importante e amplamente utilizado. A versão mais recente 
do HTML é o HTML5. Essa linguagem de marcação é suportada por quase todos 
os navegadores e plataformas. É importante considerar algumas diferenças 
entre linguagem de marcação e hipertexto (Miletto; Bertagnolli, 2014):
 � Linguagem de marcação: é um sistema para anotar um documento a fim 
de diferenciar facilmente as informações extras contidas nele. Pense 
nisso como as notas extras que um professor pode escrever ao corrigir 
provas com uma caneta vermelha, junto com correções de ortografia, 
pontuação ou conteúdo. No HTML, você utilizará as chamadas tags, 
responsáveis por iniciar parágrafos, listas, tabelas, quebras de linhas 
e diversas outras marcações.
 � Hipertexto: um texto codificado para conter links para outros textos. 
É isso que torna possível criar links para páginas. O hipertexto pode 
ser mais do que apenas texto; pode significar imagens, vídeo e som. 
Você ativa hiperlinks clicando neles com o mouse. Pense nisso como um 
método para vincular e fazer referências cruzadas de coisas diferentes. 
Você pode ser completamente estático ou tão dinâmico quanto desejar 
com o hipertexto.
Esses dois elementos se unem para formar a linguagem de marcação de 
hipertexto, ou HTML.
Evolução do HTML
A primeira versão oficial do HTML (HTML 1.0, em 1993) era bastante simples, 
oferecendo apenas elementos básicos para formatação de textos, criação de 
Criação e formatação de páginas web com HTML2
links e inclusão de imagens. Esse conjunto inicial de funcionalidades permitiu 
a criação das primeiras páginas web estáticas (Miletto; Bertagnolli, 2014).
A versão 2.0 consolidou os elementos da versão inicial e adicionou no-
vos recursos, como formulários. Essa versão foi padronizada pela Internet 
Engineering Task Force (IETF), o que ajudou a unificar as práticas de desen-
volvimento web.
A World Wide Web Consortium (W3C) assumiu a responsabilidade de desen-
volver o HTML a partir da versão 3.2. Essa versão trouxe avanços significativos, 
incluindo suporte para tabelas, scripts (por meio do JavaScript) e a capacidade 
de aplicar estilos aos elementos HTML (Sanders, 2012).
Mais tarde, o HTML 4.01 foi um marco importante na padronização da web, 
introduzindo atributos que melhoraram a acessibilidade e a separação entre 
conteúdo e apresentação. Ele incentivou o uso de Cascading Style Sheets (CSS) 
para estilização, promovendo uma web mais organizada e fácil de manter 
(Sanders, 2012). Dentro dessa versão, houve três variantes principais:
 � HTML 4.01 Strict: utilizado para renderizar as tags da versão 4, não 
aceitando tags de versões anteriores.
 � HTML 4.01 Transitional: conta com os recursos do 4.01 Strict, mas aceita 
também tags antigas.
 � HTML 4.01 Frameset: utilizado quando o documento contém molduras 
("frames"). Esse doctype consiste no mesmo que o Transitional mais 
os elementos relacionados com as molduras.
A evolução continuou com o XHTML, que trouxe suporte a XML, dessa vez 
com quatro variantes:
 � XHTML 1.0 Strict: equivalente ao HTML 4.01 Strict, mas com suporte 
a XML.
 � XHTML 1.0 Transitional: equivalente ao HTML 4.01 Transitional, mas 
com suporte a XML.
 � XHTML 1.1: baseado no XHTML 1.0 Strict, mas permitindo a integração 
de módulos adicionais.
 � XHTML Mobile 1.0: utilizado para sites com suporte a dispositivos móveis 
utilizando XHTML.
Criação e formatação de páginasweb com HTML 3
Por fim, o HTML5 representou uma revolução na maneira como as páginas 
web eram desenvolvidas. Essa versão introduziu novos elementos semânticos, 
como , , e , que melhoraram a estrutura e 
a acessibilidade das páginas (Miletto; Bertagnolli, 2014). Na atual versão 5.0, 
o HTML é simplesmente declarado como "DOCTYPE html".
Além disso, o HTML5 incorporou suporte nativo para áudio e vídeo, eli-
minando a necessidade de plugins externos como o Flash. Também trouxe 
avanços significativos em Application Programming Interfaces (APIs), que 
permitiram o desenvolvimento de aplicações web mais ricas e interativas.
Uma vez que todos os arquivos HTML são escritos em texto ASCII 
(American Standard Code for Information Interchange), você pode 
usar qualquer editor de texto para escrever uma página. Você não precisa de 
ferramentas sofisticadas e pode visualizar os resultados do seu trabalho em 
qualquer navegador, porque tem suporte universal, o que é uma das vantagens 
mais significativas que existe no uso de HTML.
Cada arquivo HTML contém vários elementos aninhados, junto com as 
chamadas tags (Figura 1), que serão estudadas um pouco mais adiante. Prati-
camente qualquer pessoa pode escrever um arquivo .HTML com um editor de 
texto básico e depois carregá-lo na internet para começar a criar seu próprio 
site. Em seguida, os servidores de dados da web precisam saber o que fazer 
com os arquivos que você carrega e como enviá-los ao computador do cliente 
para entendê-los. É para isso que o código do HTML é usado para decidir. 
É o que mantém tudo unido (Harold, 2010). 
Figura 1. Estrutura básica de um HTML.
Criação e formatação de páginas web com HTML4
O HTML permitiu a interoperabilidade entre diferentes sistemas 
e dispositivos. A mesma página web pode ser visualizada em um 
computador, tablet ou smartphone, adaptando-se às diversas telas e resoluções.
A evolução do HTML impulsionou o desenvolvimento de outras tecnologias 
web, como CSS e JavaScript, que juntos formam a base do desenvolvimento 
web moderno. O HTML5, em particular, possibilitou a criação de aplicações web 
complexas e interativas, rivalizando com as aplicações desktop tradicionais.
De modo geral, o HTML transformou a maneira como consumimos e compar-
tilhamos informações, impactando setores como educação, comércio, entreteni-
mento e comunicação. A web, construída sobre HTML, tornou-se uma ferramenta 
indispensável na vida cotidiana. Na próxima seção, veremos as principais tags 
HTML e suas funções e características para geração de páginas web.
Principais tags do HTML
As tags HTML são elementos de marcação utilizados para definir e estruturar 
o conteúdo de uma página web. Elas são compostas por um nome de tag, 
delimitado por colchetes angulares “”. Normalmente, uma tag HTML possui 
uma tag de abertura e uma tag de fechamento (Miletto; Bertagnolli, 2014). 
 A tag de abertura indica o início de um elemento e a tag de fechamento 
indica o fim desse elemento, sendo que a tag de fechamento é precedida 
por uma barra “/”.
A tag de parágrafo, por exemplo, coloca seu conteúdo em pequenos 
parágrafos organizados, enquanto a tag de cabeçalho coloca as palavras 
como um título adequado em uma página. Você deve iniciar uma tag, incluir 
o conteúdo de texto simples no meio e, em seguida, fechar a tag para que o 
computador saiba que você terminou de usar essa tag (Miletto; Bertagnolli, 
2014). Vejamos a seguir as principais tags utilizadas em HTML e seu exemplo 
de uso, começando pela estrutura básica.
 � : declara o tipo de documento e a versão de HTML 
utilizada. Por exemplo, indica que o documento 
está em HTML5.
 � : tag-raiz que encapsula todo o conteúdo da página. Deve conter 
os elementos e .
Criação e formatação de páginas web com HTML 5
 � : contém metadados sobre o documento, como título, links 
para estilos, scripts e informações de codificação.
 � : contém todo o conteúdo visível da página, como textos, ima-
gens, vídeos e links, caracterizado como o “corpo” de sua página HTML.
Além das tags estruturais básicas, existem as mais específicas, examinadas 
caso a caso a seguir. 
Tags de texto
As tags de texto são fundamentais no desenvolvimento de páginas web, 
pois permitem a formatação e organização do conteúdo textual de maneira 
eficiente. O uso correto dessas tags não apenas garante uma apresentação 
visualmente agradável, mas também melhora a acessibilidade e a otimização 
para motores de busca (search engine optimization – SEOs). Vamos começar 
pelas tags relacionadas a textos (Harold, 2010):
 � : tag que indica o início do trecho que define um parágrafo.
 � a : tags de cabeçalho, usadas para definir títulos e subtítulos. 
A é a “mais importante” e a é a “menos importante”.
 � : insere uma quebra de linha no local de uso.
 � : define um texto em negrito, indicando maior importância.
 � : define o texto em itálico, indicando ênfase.
A Figura 2 mostra um exemplo de utilização dessas tags relacionadas a 
textos.
Figura 2. Utilização de tags HTML para textos.
Criação e formatação de páginas web com HTML6
Agora veja na Figura 3 o resultado da página sendo exibida em um nave-
gador web.
Figura 3. Resultado da codificação mostrada na Figura 2.
Tags de imagem e mídia em HTML
As tags de imagem e mídia em HTML são utilizadas para inserir elementos 
visuais e auditivos nas páginas web, permitindo aos desenvolvedores en-
riquecer o conteúdo e proporcionar uma experiência mais interativa aos 
usuários (Miletto; Bertagnolli, 2014). Cada uma dessas tags tem uma função 
específica, sendo essenciais para a criação de páginas dinâmicas e atrativas. 
A seguir, são mostradas as principais tags a serem utilizadas em imagens e 
mídias em HTML.
 � A tag é utilizada para inserir imagens nas páginas web. Ela 
não possui uma tag de fechamento e requer pelo menos um atributo 
obrigatório, que é src, especificando o caminho para a imagem a ser 
exibida. O atributo alt também é recomendado para descrever o 
conteúdo da imagem, importante para acessibilidade e para casos em 
que a imagem não pode ser exibida.
 � A tag é utilizada para incorporar arquivos de áudio nas páginas 
web. Ela suporta diferentes formatos de áudio e pode incluir controles 
de reprodução, como play, pause e volume.
 � A tag é usada para incorporar arquivos de vídeo nas pági-
nas web. Ela suporta vários formatos de vídeo e também pode incluir 
controles de reprodução para permitir que os usuários controlem a 
reprodução do vídeo (play, pause, volume, entre outros).
Criação e formatação de páginas web com HTML 7
A Figura 4 mostra um exemplo de código utilizando essas três tags de 
imagem e mídia.
Figura 4. Utilização de tags HTML para imagem e mídia.
A Figura 5 mostra o resultado das tags utilizadas na Figura 4.
Figura 5. Resultado da codificação da Figura 4.
Criação e formatação de páginas web com HTML8
Tags de link e navegação
As tags de link e navegação em HTML são fundamentais para criar interati-
vidade e facilitar a navegação dentro das páginas web. Elas permitem aos 
desenvolvedores criar links entre diferentes documentos e seções da mesma 
página e facilitar a organização e acessibilidade do conteúdo (Miletto; Bertag-
nolli, 2014). Veja a seguir as principais tags relacionadas com links e navegação 
em páginas web.
 � A tag , ou âncora, é essencial para criar links de navegação entre 
páginas web ou dentro da mesma página. Ela pode ser usada para 
direcionar o usuário para outros documentos, recursos, seções da 
mesma página, ou para enviar e-mails.
 � A tag define uma seção de links de navegação dentro da página. 
É utilizada para agrupar links que direcionam o usuário para diferentes 
partes do site ou para diferentes seções da mesma página. Seu principal 
uso é organizar esses links para a geração de menu em sua página.
Veja na Figura 6 um exemplode utilização de tags de link e navegação.
Figura 6. Utilização de tags HTML para link e navegação.
A Figura 7 mostra o resultado da codificação em um navegador web.
Criação e formatação de páginas web com HTML 9
Figura 7. Resultado de tags HTML para link e navegação.
Tags de lista
As tags de link e navegação em HTML são fundamentais para criar interatividade 
e facilitar a navegação dentro das páginas web. Elas permitem aos desenvolve-
dores criar links entre diferentes documentos e seções da mesma página, além 
de facilitar a organização e acessibilidade do conteúdo (Miletto; Bertagnolli, 
2014). As principais e mais usuais tags de listas são mostradas a seguir:
 � As tags (unordered list) e (ordered list) são utilizadas para 
criar listas de itens. A cria listas não ordenadas (com marcadores) 
e a cria listas ordenadas (numeradas).
 � A tag é usada para definir itens dentro de listas ( ou ). 
Cada representa um item da lista.
A Figura 8 apresenta exemplos de código utilizando tag de listas.
Figura 8. Utilização de tags HTML para listas.
Criação e formatação de páginas web com HTML10
O resultado da utilização das tags da Figura 8 são exibidas em um nave-
gador na Figura 9, a seguir.
Figura 9. Utilização de tags HTML para listas mostrado em navegador web.
Tags de tabela
As tags de tabela em HTML são utilizadas para organizar dados em um formato 
tabular, facilitando a exibição de informações estruturadas e comparativas. 
Elas permitem criar tabelas com linhas e colunas, onde os dados podem 
ser apresentados de maneira clara e ordenada (Miletto; Bertagnolli, 2014). 
As principais tags para exibição e construção de tabela são mostradas a 
seguir: 
 � : define a tabela como um todo.
 � : define uma linha na tabela.
 � : define uma célula de cabeçalho de tabela (opcional dentro de 
).
 � : define uma célula de tabela (obrigatório dentro de ).
Veja na Figura 10 um exemplo de uso de tags de tabela.
Criação e formatação de páginas web com HTML 11
Figura 10. Utilização de tags HTML para tabela.
A Figura 11 mostra o resultado do código da tabela em um navegador 
para internet.
Figura 11. Exibição do resultado do HTML para tabela.
Tags semânticas
As tags semânticas em HTML5 são usadas para definir a estrutura e o signi-
ficado do conteúdo, proporcionando uma melhor organização e acessibili-
dade (Miletto; Bertagnolli, 2014). Veja a seguir as principais tags semânticas 
utilizadas em HTML5.
 � : define o cabeçalho de um documento ou seção.
 � : define o rodapé de um documento ou seção.
 � : define uma seção genérica em um documento.
 � : define um conteúdo independente e autocontido.
 � : define conteúdo relacionado ao conteúdo principal, como 
uma barra lateral.
Criação e formatação de páginas web com HTML12
As tags semânticas foram introduzidas com o HTML5 para melhorar a 
acessibilidade e a SEO (otimização para motores de busca). Antes do 
HTML5, muitos desenvolvedores usavam para tudo, resultando em "div-
-ite", uma prática que tornava o código menos legível e menos acessível. As tags 
semânticas, como e , ajudam a resolver esse problema, 
ao proporcionar uma estrutura mais clara e intuitiva para o conteúdo da web.
Veja na Figura 12 um exemplo de código usando essas tags semânticas.
Figura 12. Utilização de tags semânticas em HTML.
Na Figura 13, a seguir, é apresentado em um navegador o resultado da 
codificação utilizada na Figura 12.
Figura 13. Resultado da utilização de tags semânticas em HTML.
Criação e formatação de páginas web com HTML 13
Agora que exploramos as principais tags HTML e entendemos suas funções 
e importâncias, estamos prontos para ver como elas podem ser aplicadas na 
prática. Na próxima seção, veremos exemplos de construção de sites usando 
HTML, em que combinaremos essas tags para criar páginas web um pouco 
mais completas, bem estruturadas e funcionais. Isso nos permitirá consolidar 
o conhecimento adquirido e entender melhor como essas tags trabalham 
juntas para formar a base da web.
Criação de páginas web usando HTML
Vamos criar dois exemplos completos e explicativos de páginas web em HTML 
usando as tags que examinamos anteriormente. Cada exemplo incluirá uma 
introdução, o código HTML relevante e comentários explicativos para cada 
parte do código. 
Página simples com estrutura básica
Neste exemplo, vamos criar uma página web simples que inclui um cabeça-
lho, uma navegação, uma seção principal com texto e imagem e um rodapé. 
Utilizaremos as tags de estrutura básica, de link e navegação e de imagem 
(Figura 14).
Criação e formatação de páginas web com HTML14
Figura 14. Código simples em HTML utilizando as principais tags sintáticas e semânticas.
Vejamos um pouco mais detalhadamente as tags utilizadas nesse nosso 
primeiro exemplo:
Criação e formatação de páginas web com HTML 15
 � : declara o tipo de documento como HTML5, garan-
tindo compatibilidade e interpretação correta pelo navegador.
 � : define o idioma da página como português 
do Brasil.
 � : contém metadados da página, como o conjunto de caracteres 
() e o título da página ().
 � : define o cabeçalho da página com o título principal utili-
zando .
 � : define a seção de navegação que contém uma lista não ordenada 
() de links () para diferentes seções da página.
 � : define seções distintas da página com um identificador 
(id) único para cada uma.
 � : inclui uma imagem na seção "Início" utilizando um URL externo. 
O atributo alt fornece uma descrição alternativa para a imagem, o que 
é importante para a acessibilidade e para casos em que a imagem não 
pode ser carregada.
 � : define o rodapé da página, que geralmente contém infor-
mações de direitos autorais ou de contato.
É possível carregar imagens externas como a que está sendo usada neste 
exemplo. É importante considerar a origem e o direito de uso dessas ima-
gens. Sempre forneça o atributo alt para todas as imagens para garantir 
acessibilidade (Harold, 2010). O HTML suporta vários tipos de formatos de 
imagem, como JPEG, PNG, GIF, entre outros. A escolha do formato depende das 
necessidades de qualidade, tamanho de arquivo e suporte de transparência 
(Miletto; Bertagnolli, 2014). A Figura 15 exibe o resultado do código sendo 
mostrado no navegador. 
Criação e formatação de páginas web com HTML16
Figura 15. Resultado exibido no navegador.
A seguir, veremos outro exemplo de construção de site usando HTML, no 
qual inserimos tags e listas.
Página web com tabela e listas
Neste exemplo, vamos criar uma página web que inclui um cabeçalho, uma 
navegação, uma seção com uma tabela para exibir dados e uma lista de itens. 
Utilizaremos as tags de tabela e lista, além das tags de estrutura básica e 
navegação (Figura 16).
Criação e formatação de páginas web com HTML 17
Figura 16. Código em HTML utilizando as principais tags estruturais, lista e tabela.
(Continua)
Criação e formatação de páginas web com HTML18
Figura 16. Código em HTML utilizando as principais tags estruturais, lista e tabela.
Vejamos a seguir alguns comentários a respeito desse código:
 � : contém o título principal da página.
 � : contém a lista de navegação com links para diferentes seções 
da página.
 � : seção que contém uma tabela para 
exibir informações estruturadas.
 � : define a tabela. Dentro dela, temos para linhas, 
para cabeçalhos de colunas e para células de dados.
 � : seção que contém listas de itens.
 � : define uma lista não ordenada com itens .
 � : define uma lista ordenada com itens .
 � : contém informações de rodapé da página.
A Figura 17 mostra o resultado dessa codificação em um navegador web. 
(Continuação)
Criação e formatação de páginasweb com HTML 19
Figura 17. Resultado da página web codificada na Figura 16.
A linguagem HTML não apenas define a estrutura básica de uma página, 
como também oferece a flexibilidade necessária para integrar diferentes 
tipos de conteúdo, como texto, imagens e links. A utilização adequada de 
atributos, como o alt para imagens, é crucial para melhorar a acessibilidade 
e a indexação de motores de busca. Além disso, a capacidade de incorporar 
imagens de fontes externas amplia as possibilidades de design e persona-
lização, desde que sejam respeitados os direitos autorais e as diretrizes de 
uso responsável na web.
Criação e formatação de páginas web com HTML20
Referências 
HAROLD, E. R. Refatorando HTML: como melhorar o projeto de aplicações web existentes. 
Porto Alegre: Bookman, 2010.
MILETTO, E. M.; BERTAGNOLLI, S. C. Desenvolvimento de software II: introdução ao 
desenvolvimento web com HTML, CSS, JavaScript e PHP. Porto Alegre: Bookman, 2014.
SANDERS, B. Smashing HTLM5: técnicas para a nova geração da web. Porto Alegre: 
Bookman, 2012.
Leituras recomendadas
ALVES, W. P. HTLM e CSS: aprenda a construir páginas web. São Paulo: Expressa, 2021.
ALVES, W. P. Projetos de sistemas web: conceitos, estruturas, criação de banco de dados 
e ferramentas de desenvolvimento. São Paulo: Érica, 2015.
TERUEL, E. C. HTML 5: guia prático. São Paulo: Érica, 2014.
Os links para sites da web fornecidos neste capítulo foram todos 
testados, e seu funcionamento foi comprovado no momento da 
publicação do material. No entanto, a rede é extremamente dinâmica; suas 
páginas estão constantemente mudando de local e conteúdo. Assim, os edito-
res declaram não ter qualquer responsabilidade sobre qualidade, precisão ou 
integralidade das informações referidas em tais links.
Criação e formatação de páginas web com HTML 21
Dica do Professor
No vídeo você vai se aprofundar na criação e formatação de páginas Web com HTML.
As imagens do vídeo a seguir possuem audiodescrição. Para acessar o recurso, 
clique aqui
Aponte a câmera para o código e acesse o link do conteúdo ou clique no código para acessar.
https://creator-files.plataforma.grupoa.education/undefined/REVISADO_9202_Audiodescricao_Dica_Professor-2025-10-27T19:08:48-03:00.docx
https://fast.player.liquidplatform.com/pApiv2/embed/cee29914fad5b594d8f5918df1e801fd/e4ef514693e1fcc71a5591fdef9b0ca8
Exercícios
1) Quais são as quatro TAGs básicas essenciais do HTML?
A) , , e .
B) , , e .
C) , , e .
D) , , e .
E) , , e .
2) Quais são as TAGs utilizadas como "cabeçalhos de título" dentro de um documento HTML?
A) As TAGs e .
B) As TAGs até .
C) As TAGs até .
D) As TAGs e .
E) As TAGs e .
3) São formatos de imagens que podem ser inseridos no HTML.
A) BMP, JPG e ODT.
B) DOC, XLS e PNG.
C) GIF, JPG e PNG.
D) GIF, PSD e CDR.
E) PNG, PIC e X32.
4) Qual a TAG indicada para uma quebra de linha dentro de um mesmo parágrafo?
A) .
B) .
C) .
D) .
E) .
5) Quais são os tipos de listas que podemos ter no HTML?
A) Do tipo simples e do tipo composta .
B) Do tipo ordenada e do tipo não ordenada .
C) Do tipo pequena e do tipo grande .
D) Do tipo inicial e do tipo final .
E) Do tipo horizontal e do tipo vertical .
Na prática
A criação de um site é muito importante, pois permite que pessoas e organizações se conectem 
com o mundo. Entre outras possibilidades, ele favorece a divulgação de informações com baixo 
custo e rompimento de fronteiras. 
Neste vídeo, você verá o passo a passo de um projeto de site sobre o casamento de Hayla e Pedro 
utilizando as principais tags do HTML.
As imagens do vídeo a seguir possuem audiodescrição. Para acessar o recurso, 
clique aqui
Aponte a câmera para o código e acesse o link do conteúdo ou clique no código para acessar.
https://creator-files.plataforma.grupoa.education/undefined/REVISADO_9202_Audiodescricao_Na_Pratica-2025-10-27T19:12:46-03:00.docx
https://fast.player.liquidplatform.com/pApiv2/embed//019a9db5-b05d-79f0-a814-ecaa10fcee63
Resumo da UA
Este resumo em áudio foi criado para facilitar sua compreensão e reforçar os principais conceitos 
apresentados. De forma rápida e direta, ele destaca os pontos-chave do conteúdo, ajudando você a 
revisar o que aprendeu.
Aproveite esse recurso para consolidar seus aprendizados. Bons estudos!
Saiba mais
Para ampliar o seu conhecimento a respeito desse assunto, veja abaixo as sugestões do professor:
HTML Básico: iniciando no desenvolvimento web com HTML
Aponte a câmera para o código e acesse o link do conteúdo ou clique no código para acessar.
Tags HTML: as principais tags para criar sua página HTML
Aponte a câmera para o código e acesse o link do conteúdo ou clique no código para acessar.
https://www.homehost.com.br/blog/tutoriais/html-basico/
https://www.homehost.com.br/blog/tutoriais/tags-html/