DS - ebook - DS_ Programação em Novas Tecnologias (Web) [2024] (1)

Prévia do material em texto

Técnico em 
Desenvolvimento de 
Sistemas 
 
Programação em Novas 
Tecnologias (Web) 
Witalo Diego Matias Nunes 
 
https://etepac.com/
https://www.instagram.com/etepacead/
https://www.youtube.com/c/EDUCAPE
 
 
 
 
 
 
 
 
 
 
 
Curso Técnico em 
Desenvolvimento de Sistemas 
 
Programação em Novas 
Tecnologias (Web) 
Witalo Diego Matias Nunes 
 
Escola Técnica Estadual Professor Antônio Carlos Gomes da Costa 
 
Educação a Distância 
 
Recife 
 
1.ed. | fevereiro 2024 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Secretária de Educação e Esportes de Pernambuco 
Ivaneide de Farias Dantas 
 
Secretária-executiva de Educação Integral e 
Profissional 
Ana Cristina Cerqueira Dias 
 
Gerente-geral de Educação Profissional 
Maria do Socorro Rodrigues dos Santos 
 
Gestora de Educação a Distância 
Ana Pernambuco de Souza 
 
Equipe de Gestão ETEPAC 
Arnaldo Luiz da Silva Junior 
Gustavo Henrique Tavares Ribeiro 
Maria do Rosário Costa Cordouro de Vasconcelos 
 
Professor Autor 
Witalo Diego Matias Nunes 
 
Revisão 
Witalo Diego Matias Nunes 
 
Coordenação de Curso 
José Américo Teixeira de Barros 
 
Coordenação Design Educacional 
Hugo Cavalcanti 
 
Design Educacional 
Fábia Barbosa 
Helisangela Maria Andrade Ferreira 
Jailson Miranda 
José Eilton dos Santos Costa 
Raissa Saldanha Lima Pinto 
Washington Ferreira 
Wilma Cavalcante 
 
Diagramação 
Washington Ferreira da Silva 
 
Catalogação e Normalização 
Hugo Cavalcanti (Crb-4 2129) 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Sumário 
Introdução ................................................................................................................................... 7 
1.Competência 01 | : Reconhecer os fundamentos da Web ........................................................... 8 
1.1 A história da web ........................................................................................................................................8 
1.2 Como funciona a Web .................................................................................................................................8 
1.3 A web nos dias de hoje ............................................................................................................................ 13 
1.4 Segurança da Web ................................................................................................................................... 14 
1.4.1 Criptografia ........................................................................................................................................... 14 
1.4.2 Autenticação e Autorização .................................................................................................................. 15 
1.4.3 Proteção contra Ataques ...................................................................................................................... 15 
1.4.4 Atualizações de Segurança .................................................................................................................... 15 
1.4.5 Segurança em Camadas (Defense in Depth) ......................................................................................... 15 
1.4.6 Privacidade dos Dados .......................................................................................................................... 16 
1.4.7 Educação e Conscientização ................................................................................................................. 16 
1.5 Tecnologias Emergentes .......................................................................................................................... 16 
1.5.1 Inteligência Artificial (IA) ....................................................................................................................... 16 
1.5.2 Realidade Virtual (VR) e Realidade Aumentada (AR) ............................................................................ 17 
1.5.3 Internet das Coisas (IoT) ....................................................................................................................... 17 
1.5.4 Blockchain ............................................................................................................................................. 17 
1.5.5 Computação em Nuvem (Cloud Computing) ........................................................................................ 17 
2.Competência 02 | Preparar o ambiente de desenvolvimento Web ........................................... 19 
2.1 Introdução ao desenvolvimento web ...................................................................................................... 19 
2.2 Editores de texto ...................................................................................................................................... 20 
2.2.1 Principais características dos editores de texto .................................................................................... 21 
2.3 Ambiente de desenvolvimento integrado IDE ......................................................................................... 22 
2.3.1 Visual Studio (VS) .................................................................................................................................. 22 
2.3.2 IntelliJ IDEA............................................................................................................................................ 22 
2.3.3 Eclipse ................................................................................................................................................... 22 
2.3.4 NetBeans ............................................................................................................................................... 23 
2.3.5 PyCharm ................................................................................................................................................ 23 
2.3.6 Sublime Text .......................................................................................................................................... 23 
2.3.7 Por que escolher uma IDE? ................................................................................................................... 23 
2.4 Ferramentas de Debugging e Inspeção .................................................................................................... 24 
2.5 Ferramentas de Gerenciamento de Pacotes ........................................................................................... 24 
2.6 Servidores Locais e Ambientes de Testes ................................................................................................ 25 
2.7 Extensões e Plugins .................................................................................................................................. 25 
2.8 Controle de Versão e Colaboração .......................................................................................................... 26 
2.8.1 Sistemas de Controle de Versão ........................................................................................................... 26 
2.8.1.1 Git ....................................................................................................................................................... 26 
2.9 Colaboração e Plataformas de Desenvolvimento .................................................................................... 27 
2.9.1 GitHub ................................................................................................................................................... 27 
2.9.2 GitLab .................................................................................................................................................... 27 
3.Competência 03 | Identificar a linguagem HTML5 .................................................................... 28 
 
 
 
 
 
 
3.1 O que é HTML? .........................................................................................................................................28 
3.2 Fundamentos do HTML ............................................................................................................................ 29 
3.3 Estrutura básica do HTML ........................................................................................................................ 30 
3.4 Metadados em HTML ............................................................................................................................... 32 
3.5 O HTML 5 .................................................................................................................................................. 33 
3.5.1 Simplificação e Clareza .......................................................................................................................... 33 
3.5.2 Foco na Semântica ................................................................................................................................ 34 
3.5.3 Suporte à Diversidade de Dispositivos .................................................................................................. 34 
3.5.4 Eliminação de Dependências em Plugins .............................................................................................. 34 
3.5.5 Interatividade e API JavaScript .............................................................................................................. 35 
3.5.6 Padrões Abertos e Acessibilidade ......................................................................................................... 35 
3.6 Estrutura do HTML 5 ................................................................................................................................ 35 
3.6.1 Elementos estruturais principais do HTML5 ......................................................................................... 35 
3.7 Semântica no HTML5 ............................................................................................................................... 36 
3.7.1 Vantagens da Semântica ....................................................................................................................... 36 
3.7.2 Elementos Semânticos .......................................................................................................................... 37 
3.8 Formulários aprimorados HTML5 ............................................................................................................ 38 
3.8.1 Elementos de formulários aprimorados ............................................................................................... 38 
3.8.2 Validação de formulário ........................................................................................................................ 39 
3.9 Multimídia e gráficos em HTML5 ............................................................................................................. 41 
3.9.1 Multimídia ............................................................................................................................................. 41 
3.9.2 Gráficos ................................................................................................................................................. 42 
3.10 Geolocalização e armazenamento em HTML5 ...................................................................................... 43 
3.10.1 Geolocalização .................................................................................................................................... 43 
3.10.2 Armazenamento Local ........................................................................................................................ 44 
3.11 O futuro do HTML5 ................................................................................................................................ 44 
4.Competência 04 | Identificar a linguagem CSS3 ........................................................................ 46 
4.1 História do CSS ......................................................................................................................................... 46 
4.1.2 CSS1 e CSS2 ........................................................................................................................................... 47 
4.1.3 Enfim o CSS3 ......................................................................................................................................... 47 
4.2 Sintaxe Básica do CSS ............................................................................................................................... 48 
4.2.1 Seletores CSS3 ....................................................................................................................................... 49 
4.3.2 Sombras CSS .......................................................................................................................................... 51 
4.3.3 Transformações 2D e 3D ....................................................................................................................... 51 
4.3.4 Transições CSS3 ..................................................................................................................................... 51 
4.3.5 Animações CSS3 .................................................................................................................................... 52 
4.3.6 Fontes da Web (Web Fonts) ................................................................................................................. 52 
4.3.7 Flexbox e Grid Layout ............................................................................................................................ 52 
4.3.8 Filtros CSS .............................................................................................................................................. 53 
4.3.9 Variáveis CSS ......................................................................................................................................... 53 
4.3.10 Texto Multicoluna ............................................................................................................................... 54 
4.4 Layout Responsivo ................................................................................................................................... 54 
4.4.1 Media Queries ....................................................................................................................................... 54 
4.4.2 Largura da Tela e Layouts Responsivos ................................................................................................. 55 
4.4.3 Orientação da Tela e Dispositivos Móveis ............................................................................................ 56 
4.5 Boas Práticas de Desenvolvimento CSS3 ................................................................................................. 57 
4.5.1 Mantenha seu CSS Organizado ............................................................................................................. 57 
4.6 Exemplos práticos e estudo de caso em CSS3 ......................................................................................... 59 
 
 
 
 
 
 
4.6.1 Exemplo 1: Layout Responsivo.............................................................................................................. 59 
4.6.2 Exemplo 2: Animações e Transições ..................................................................................................... 61 
4.6.3 Exemplo 5: Uso de Fontes Web e Ícones Personalizados ..................................................................... 62 
5. Competência 05| Desenvolver um projeto nas linguagens HTML5 e CSS3 ................................ 65 
5.1 Planejamento e Estruturação do Projeto ................................................................................................. 65 
5.1.1 Definição do Propósito do Site ..............................................................................................................65 
5.1.2 Levantamento de Requisitos e Conteúdo ............................................................................................. 65 
5.1.3 Hierarquia de Navegação e Arquitetura de Informação ....................................................................... 66 
5.2.1 Codificação em HTML5 e Estruturação do Conteúdo ........................................................................... 68 
5.3.1 Página inicial (index.html) ..................................................................................................................... 71 
5.3.2 Páginas da sessão de conteúdo ............................................................................................................ 72 
5.3.3 Páginas de Galerias e Portfólio ............................................................................................................. 75 
5.3.4 Páginas de notícias ................................................................................................................................ 77 
5.3.5 Página de Formulário de Contato ......................................................................................................... 79 
5.3.6 Página Sobre Nós ................................................................................................................................. 80 
Conclusão................................................................................................................................... 83 
Referências ................................................................................................................................ 84 
Minicurrículo do Professor ......................................................................................................... 85 
 
 
 
 
 
 
 
 
 
 
7 
Introdução 
Olá, Estudante! 
 
Antes de começar esta disciplina, quero te fazer uma pergunta: O que você pensa sobre 
a internet para os próximos 10 anos? 
Pois bem! Esta pergunta é um tanto quanto pretensiosa, certo? Confesso que também 
acho. 
Quando analisamos a linha do tempo da evolução da internet, podemos entender que 
dos primórdios até os dias de hoje, muitas mudanças radicais aconteceram. Portanto, pode ser difícil 
prever o que ocorrerá em uma década. 
Há 50 anos, os principais meios de comunicação via sistemas eram o telégrafo e o 
telefone. Os computadores já existiam, mas eram máquinas gigantescas, desenvolvidas inicialmente 
para realizar cálculos e armazenar dados. 
Neste tempo os EUA e a União Soviética, personagens da Guerra Fria, travaram um 
conflito político-ideológico e por conta deste evento, os americanos buscaram maneiras de proteger 
suas informações e comunicações. 
Deste modo, um ano após o lançamento do satélite russo Sputnik 1, nasceu a DARPA 
(Defense Advanced Research Projects Agency). Esta agência, criada por militares e pesquisadores 
norte-americanos, têm até hoje o papel de fazer investimentos essenciais em tecnologias inovadoras 
para a segurança nacional. Dentre estas tecnologias, temos a nossa querida Internet. 
Mas você sabe o que é a Internet e quais são as novas tecnologias disponíveis 
atualmente? 
Nesta disciplina você irá conhecer um pouco deste assunto, entendendo o seu 
funcionamento e suas tecnologias mais recentes. 
Vamos começar? 
 
 
 
 
 
 
 
8 
1.Competência 01 | : Reconhecer os fundamentos da Web 
 
Olá, estudante! Seja bem-vindo à primeira Unidade da nossa disciplina. Nesta unidade 
você irá conhecer um pouco de história e dos fundamentos da web, ou seja, irá entender como a web 
funciona. Vamos nessa? 
 
1.1 A história da web 
 
A história da web tem sua origem em um momento um pouco mais remoto do que 
convencionalmente as pessoas conhecem e acredita-se que tudo começou no final da década de 60, 
quando já havia pequenas demonstrações de que era possível a troca de informações entre 
computadores. 
No entanto, em 1990, Tim Berners-Lee criou a World Wide Web (web). Timothy, seu 
primeiro nome, é um físico britânico, cientista da computação e professor do MIT (Massachusetts 
Institute of Technology) e atualmente, diretor da W3C (World Wide Web Consortium). 
Porém, antes de Tim conceber a web, dois caras tiveram um papel crucial, sendo Vinton 
Cerf e Bob Kahn. Eles foram responsáveis por criar protocolos de comunicação, utilizados pelos 
computadores para que pudesse ocorrer a troca de informações. 
Estes protocolos são fundamentais para a comunicação entre máquinas computacionais 
e a partir de então a web pôde se constituir. Ao longo deste e-book conversaremos um pouco mais 
sobre isso. 
Legal, não é mesmo? Já aqui no Brasil, a história da web é um pouquinho mais recente. 
Com a chegada da internet em escala comercial em 1995 e um ano depois com a chegada dos 
provedores, o serviço começou as suas operações e deslanchou com a popularização dos 
computadores domésticos. Hoje, o NIC.br (Núcleo de Informação e Coordenação ponto BR), estima 
que 142 milhões de brasileiros acessam a web diariamente. 
 
1.2 Como funciona a Web 
 
 
 
 
 
 
 
9 
 
Para entender a Web, é preciso entender primeiro um pouco de como funcionam os 
computadores. 
Os computadores são máquinas modernas e que possuem alto poder de processamento. 
Com estas é possível efetuar cálculos, criar imagens incríveis e passear virtualmente pelo mundo. Por 
mais incrível que pareça, cada uma dessas tarefas é resultado de uma sucessão de zeros e uns. 
Você pode estar pensando, como assim? Lembre-se de que os computadores são na sua 
essência máquinas binárias, produzindo resultados através do sistema binário. 
 
 
Deste modo, para nós humanos seria muito difícil enviar instruções e receber resultados 
desta forma, afinal, não temos a mesma capacidade de processamento de um computador. Por isso, 
um conjunto de códigos específicos foram criados, facilitando a nossa comunicação com o 
computador. Este conjunto composto de palavras, símbolos e regras é a linguagem de programação. 
Esta linguagem é usada para criar diversas aplicações, mas isso exige conhecimento 
específico e ao mesmo tempo amplo, pois a falta de visão geral das tecnologias e protocolos 
envolvidos neste processo comprometem o seu desenvolvimento. Veja na imagem abaixo a ilustração 
deste contexto: 
 
DICA IMPORTANTE: 
Que tal pesquisar um pouco mais sobre o importante consórcio W3C? 
https://w3c.br/sobre-o-w3c/ 
 
 
Conheça o sistema binário: 
https://blog.betrybe.com/tecnologia/codigo-binario/ 
 
https://w3c.br/sobre-o-w3c/
https://blog.betrybe.com/tecnologia/codigo-binario/
https://blog.betrybe.com/tecnologia/codigo-binario/
 
 
 
 
 
 
10 
 
Figura 1 Exemplo de tecnologias ligadas ao desenvolvimento web 
Fonte: SW Agência 
Descrição: Notebook ao centro representando o ambiente desenvolvimento e ao seu redor, balões coloridos com 
diversas tecnologias ligadas ao desenvolvimento web (PHP, JAVA, JS, .NET, XML, DATABASE...). 
 
Você percebeu como é importante entender um pouco mais sobre os computadores? 
Agora que você conhece um pouco mais sobre este assunto, explicarei como a Web funciona, 
realmente. 
Para compreender melhor, vamos fazer uma analogia, ou seja, imagine que a Web é uma 
rodovia onde em um dos extremos temos o cliente e no outro extremo, o servidor. O cliente é um 
dispositivo eletrônico que se comunica com servidor, como por exemplo, o smartphone e o servidor, 
um computador que armazena sites, arquivos e dados. Na prática, o usuário utiliza o dispositivo para 
requisitar alguma informação e o servidor responde. Veja a figura 2 abaixo: 
 
 
 
 
 
 
 
11 
 
Figura 2 Fluxograma de solicitação e resposta entre cliente e servidor 
Fonte: autor 
Descrição: Um círculo à esquerda com a palavra “cliente” em seu centro e outro círculo à direita com a palavra 
“servidor” ao centro. Os círculos estão interligados com duas setas, sendo da esquerda para a direita a solicitação e da 
direita para a esquerda, a resposta. 
 
Noentanto, para que a comunicação aconteça nesta estrada (web), é preciso respeitar 
algumas regras e entender que outras coisas muito importantes são necessárias, a começar pela 
conexão com a internet. 
A conexão permite que dados sejam enviados e recebidos entre os dispositivos, havendo 
interação e comunicação. E para que esta comunicação aconteça de forma correta, é preciso respeitar 
algumas regras, como já dito anteriormente. Certo, quais são as regras? 
As regras são mais conhecidas em termos técnicos como protocolos, que definem como 
os dados trafegam pela web. Neste sentido, o conjunto de protocolos mais importante é o TCP/IP 
(protocolo de controle de transmissão/protocolo de internet). Mas não é só isto. Outros protocolos 
importantes estão envolvidos na transmissão de dados na web e para entender mais, convido você a 
estudar o material do link abaixo. 
 
Bacana, não é mesmo? A Web de fato é um mundo fascinante e repleto de detalhes. Daí 
eu lhe faço uma outra pergunta: O que acontece quando digitamos uma URL (Uniform Resource 
Locator), ou seja, um endereço no navegador web? 
Acesse o link abaixo: 
https://developer.mozilla.org/pt-
BR/docs/Learn/Getting_started_with_the_web/How_the_Web_works 
 
 
https://developer.mozilla.org/pt-BR/docs/Learn/Getting_started_with_the_web/How_the_Web_works
https://developer.mozilla.org/pt-BR/docs/Learn/Getting_started_with_the_web/How_the_Web_works
 
 
 
 
 
 
12 
 
 
Para responder a esta pergunta, acesse o fórum da Unidade 1 do nosso AVA e poste a sua 
resposta, combinado? Neste fórum iremos discutir em conjunto com os outros colegas e professores. 
Pois bem. Para ajudar um pouco na construção desta resposta, analise a figura 3 abaixo. 
 
Figura 3 - Funcionamento da requisição de uma página web 
Fonte: www.devmedia.com.br 
Descrição: Usuário representado por um avatar, acessa uma página web através do navegador em um computador e o 
servidor encontra a página solicitada, retornando à informação após interpretar a solicitação. 
 
Perceba que o usuário acessa um link no navegador. Em seguida, o browser entende a 
solicitação feita e envia ao servidor. Este encontra a página solicitada e processa a informação, 
transmitindo de volta para o navegador. Desta forma, o usuário recebe a informação solicitada na 
tela do computador. 
Bem, há de concordar que ao menos em tese, o funcionamento da web é perfeitamente 
compreensível, apesar da complexidade técnica envolvida, certo? 
Deste modo, explore o último tópico desta Unidade, pois será discutido um assunto muito 
importante que é a web nos dias de hoje. 
 
 
 
 
 
 
 
 
13 
 
1.3 A web nos dias de hoje 
 
Nos tópicos anteriores foi visto um pouco da história, do funcionamento e dos métodos 
envolvidos relativos à existência da web. 
Já neste tópico, serão explorados temas acerca da web nos dias de hoje, onde será 
identificado versões da web e suas funcionalidades. Também será discutido um pouco do que o futuro 
reserva para os usuários da web. 
Neste sentido, deixando um pouco do passado para trás e retomando o uso da web no 
início dos anos 2000, surgiu a Web 2.0, caracterizada pela existência das redes sociais, onde os 
usuários geram conteúdo, marcando uma mudança muito importante na rede mundial de 
computadores, deixando as páginas estáticas de lado e dando vezes as páginas dinâmicas. 
Páginas dinâmicas são aquelas em que os usuários as usam de forma interativa, havendo 
“diálogo” entre as partes. Um exemplo clássico desta relação é a postagem de um conteúdo em uma 
mídia social, permitindo likes e comentários. 
Mas o que são páginas estáticas? Estas páginas são formatos de conteúdo fixo, que não 
se moldam em relação ao usuário e que não fornecem ferramentas interativas. Apesar de serem 
simples, estas páginas ainda são bastante utilizadas na web para fornecer conteúdo informativo onde 
não exija interação, como por exemplo, sites institucionais. 
Ainda sobre a web 2.0, além das redes sociais, outras ferramentas dinâmicas foram 
desenvolvidas, como blogs e wikis. Os blogs são plataformas destinadas à publicação de conteúdos, 
com todo o aparato administrativo que possibilita ao próprio usuário gerenciar todo o serviço. Já os 
wikis, são coleções de páginas interligadas, onde cada uma delas pode ser visitada e editada, 
garantindo uma participação colaborativa. A Wikipédia é sem dúvida a maior representante wiki que 
se conhece. 
Na sequência, surge a Web 3.0. 
 
 
 
 
 
 
14 
 
 
 
 
1.4 Segurança da Web 
 
A segurança na web é uma preocupação crucial, dado o aumento das atividades online e 
a dependência cada vez maior da internet. Diversos desafios e ameaças surgem constantemente, 
exigindo medidas robustas para proteger informações sensíveis, dados pessoais e sistemas. 
Deste modo, é preciso entender alguns aspectos essenciais da segurança da web, 
concorda? 
 
1.4.1 Criptografia 
 
A criptografia desempenha um papel fundamental na segurança online. Ela é usada para 
proteger a comunicação entre um navegador e um servidor. Protocolos como o SSL (Secure Sockets 
Layer) e o TLS (Transport Layer Security) garantem que os dados transmitidos sejam codificados e 
seguros contra interceptação por terceiros. 
 
Quer conhecer a web 3.0? 
Acesse este link: https://mittechreview.com.br/nao-e-mais-sobre-o-futuro-
da-web-3-0-ela-ja-esta-entre-nos/ 
 
Atenção! 
Estude os materiais complementares no AVA, pois algumas questões da 
Atividade da Unidade serão baseadas neles. 
 
https://mittechreview.com.br/nao-e-mais-sobre-o-futuro-da-web-3-0-ela-ja-esta-entre-nos/
https://mittechreview.com.br/nao-e-mais-sobre-o-futuro-da-web-3-0-ela-ja-esta-entre-nos/
 
 
 
 
 
 
15 
1.4.2 Autenticação e Autorização 
 
Mecanismos de autenticação, como senhas fortes, autenticação de dois fatores (2FA), 
biometria e certificados digitais, ajudam a garantir que apenas usuários autorizados tenham acesso a 
determinados recursos ou informações. Já a autorização controla o que os usuários autenticados 
podem fazer dentro de um sistema. 
 
1.4.3 Proteção contra Ataques 
 
Diversas técnicas são empregadas para proteger contra ataques cibernéticos, incluindo 
firewalls, sistemas de detecção e prevenção de intrusões (IDS/IPS), anti-malware e antivírus. Estes 
mecanismos visam evitar ou detectar atividades maliciosas e proteger os sistemas contra invasões. 
 
1.4.4 Atualizações de Segurança 
 
Manter sistemas e softwares atualizados é crucial para garantir a segurança. Atualizações 
frequentes corrigem vulnerabilidades conhecidas e melhoram a resiliência contra ameaças 
emergentes. Isso se aplica não apenas aos sistemas operacionais, mas também a aplicativos, plugins 
e softwares de terceiros. 
 
1.4.5 Segurança em Camadas (Defense in Depth) 
 
A abordagem de segurança em camadas envolve a implementação de várias medidas de 
segurança em diferentes níveis do sistema. Isso cria barreiras adicionais para os invasores, uma vez 
que, mesmo se uma camada for comprometida, outras camadas de defesa permanecem intactas. 
 
 
 
 
 
 
 
 
 
16 
1.4.6 Privacidade dos Dados 
 
A proteção da privacidade dos dados é essencial. A conformidade com regulamentos, 
como o GDPR (Regulamento Geral de Proteção de Dados) na União Europeia e LGPD (Lei Geral de 
Proteção de Dados Pessoais) no Brasil, exigem que as organizações coletem, processem e armazenem 
dados pessoais de forma segura e transparente, respeitando os direitos de privacidade dos 
indivíduos. 
 
 
1.4.7 Educação e Conscientização 
 
A educação e a conscientização dos usuários são fundamentais para a segurança na web. 
Treinamentos sobre boas práticas de segurança, como evitar phishing, senhas fortes, cuidados ao 
compartilhar informações pessoais e identificação de possíveis ameaças, são essenciais para reduzir 
o risco de violações de segurança. 
Desta forma, é fácil entender que a segurança na web é um esforço contínuo que exige a 
implementaçãode medidas proativas e a adaptação constante às ameaças em evolução. Com a 
crescente interconectividade, é fundamental que indivíduos e organizações priorizem a segurança 
online para proteger informações críticas e garantir uma experiência segura na internet. 
 
1.5 Tecnologias Emergentes 
 
As tecnologias emergentes moldam e transformam constantemente o cenário da web e 
da computação, impactando diversos setores e revolucionando a forma como interagimos com a 
tecnologia. Portanto, serão exploradas a seguir as tecnologias emergentes mais significativas. 
 
1.5.1 Inteligência Artificial (IA) 
 
A Inteligência Artificial envolve a criação de sistemas que podem aprender, raciocinar, e 
executar tarefas de forma autônoma. Algoritmos de machine learning e deep learning, juntamente 
 
 
 
 
 
 
17 
com redes neurais artificiais, permitem que a IA seja aplicada em reconhecimento de padrões, 
assistentes virtuais, diagnósticos médicos, automação de processos, entre outros. 
 
1.5.2 Realidade Virtual (VR) e Realidade Aumentada (AR) 
 
A Realidade Virtual (VR) cria um ambiente completamente simulado, enquanto a 
Realidade Aumentada (AR) sobrepõe elementos virtuais ao ambiente físico. Ambas têm aplicações 
em jogos, educação, treinamento, design industrial e experiências imersivas. 
 
1.5.3 Internet das Coisas (IoT) 
 
A Internet das Coisas se refere à conexão de dispositivos físicos à internet, permitindo a 
troca de dados e automação de tarefas. Isso inclui desde eletrodomésticos inteligentes até sistemas 
industriais, desencadeando avanços em casas inteligentes, cidades inteligentes e indústria 4.0. 
 
1.5.4 Blockchain 
 
O Blockchain é uma tecnologia de registro distribuído que oferece um sistema seguro e 
descentralizado para transações. É conhecido principalmente pelo uso em criptomoedas, como o 
Bitcoin, mas possui aplicações em contratos inteligentes, votação eletrônica, cadeias de suprimentos 
e muito mais. 
 
1.5.5 Computação em Nuvem (Cloud Computing) 
 
Embora não seja mais tão "emergente", a computação em nuvem continua a evoluir, 
oferecendo maior escalabilidade, flexibilidade e acessibilidade. Serviços de nuvem como AWS, Azure 
e Google Cloud estão impulsionando inovações em IA, análise de dados, armazenamento e 
desenvolvimento de aplicativos. 
 
 
 
 
 
 
18 
Então, caro estudante, diante dessas explanações sobre tecnologias emergentes, foque 
na próxima Unidade e entenda como preparar um ambiente de desenvolvimento web. 
 
 
 
 
 
 
 
19 
2.Competência 02 | Preparar o ambiente de desenvolvimento Web 
Nesta segunda Unidade você irá entender como preparar o ambiente de 
desenvolvimento web, focando inicialmente nas linguagens HTML e CSS. No entanto, o ambiente que 
aqui será estudado poderá atender a outras linguagens de desenvolvimento, abrindo espaço para 
novos horizontes no mundo da programação para a web. 
 
2.1 Introdução ao desenvolvimento web 
 
Voltando um pouco ao conteúdo deste e-book, lembre-se que foi visto na primeira 
Unidade como a web funciona, explicando a forma de como as informações trafegam e chegam ao 
final do processo ao usuário. 
Deste modo, como estudante da área de desenvolvimento, é preciso que você entenda 
como iniciar de fato a programação e para isso será necessário preparar o ambiente, beleza? 
Quando se fala de ambiente de desenvolvimento, é preciso compreender que está se 
falando sobre tudo que é necessário para criar um programa, um site ou uma simples página web, 
por exemplo. 
Fazendo um comparativo, quando alguém necessita escrever um livro, geralmente se usa 
o editor de texto (Word, Write, Google Docs...). Quando é preciso criar planilhas financeiras, utiliza-
se de editores de planilhas (Excel, Calc...), correto? 
E por que é assim? Bem, o usuário tem total liberdade de fazer suas escolhas, é possível 
escrever livros e criar planilhas de formas mais arcaicas, ou seja, de forma que exija mais trabalho. 
No entanto, os editores conseguem automatizar diversas funções como sugerir, corrigir e 
complementar, tornando o trabalho muito mais rápido e menos maçante. 
E com a programação não é diferente. O programador tem a possibilidade de criar códigos 
em editores muitos simples e limitados como por exemplo o bloco de notas. No entanto, é possível 
também utilizar editores bem mais aperfeiçoados e desenvolvidos para este fim, como o Notepad++, 
Visual Studio Code, entre outros. 
 
 
 
 
 
 
 
20 
2.2 Editores de texto 
 
Se o seu desejo é desenvolver de forma mais rápida, chegou a hora. Como já explicado, 
os editores oferecem opções que tornam a criação mais ágil e neste sentido, o editor escolhido é o 
Notepad++. 
O Notepad++ é um editor relativamente simples, mas que possui muitas ferramentas 
interessantes. Para começar, seu código fonte é aberto e suporta nativamente cerca de 80 linguagens 
de programação diferentes. 
Assim, quando você está desenvolvendo algo em HTML, por exemplo, o editor consegue 
sugerir as tags e ainda, colorir o código automaticamente, facilitando a interpretação. 
Veja o exemplo na figura 4 abaixo: 
 
 
Figura 4 – Sugestão de tag no Notepad++ 
Fonte: autor 
Descrição: Tela do programa Notepad++ com o menu de ferramentas no topo e ao centro, um código fonte. 
 
Neste exemplo, ocorre a sugestão da tag <title>, responsável por definir o título que 
aparece na aba do navegador. Quando ocorre a sugestão, basta pressionar o enter e o programa 
autocompleta, acelerando a codificação e evitando erros de digitação. 
 
 
 
 
 
 
21 
 
 
Talvez você esteja se perguntando o que é tag, certo? Tenha calma, este assunto será 
abordado na próxima Unidade. 
Bem, apesar da escolha do Notepad++ como editor padrão para a nossa disciplina, você 
está livre para escolher o que melhor convier. 
 
2.2.1 Principais características dos editores de texto 
 
Apesar das particularidades de cada editor, a grande maioria possui recursos semelhantes 
e na tabela abaixo estão listados alguns. 
Recurso Função 
Sugestão de tag Sugere a tag da respectiva 
linguagem quando se digita as letras 
iniciais. 
Autocompletar Completa de forma 
automática uma expressão no código que 
está sendo escrito. 
Plugins Permite a edição de plugins 
especiais para ativar novas funções. 
Seleções múltiplas Permite selecionar de 
diversas formas dentro do código fonte. 
Renomeação em lote Possibilita renomear de uma 
única vez diversos termos. 
Tabela 1 – Recursos dos editores 
Fonte: autor 
Descrição: Tabela de recursos dos editores de texto e suas funções 
Faça aqui o download do Notepad++ 
https://notepad-plus-plus.org/downloads/v8.5.7/ 
https://notepad-plus-plus.org/downloads/v8.5.7/
 
 
 
 
 
 
22 
 
Lembre-se que estas são apenas algumas características. É importante que você se 
aprofunde um pouco mais neste sentido, fazendo pesquisas e com isso, decidir qual editor se adequa 
melhor a necessidade. 
 
2.3 Ambiente de desenvolvimento integrado IDE 
 
As IDEs (Integrated Development Environments) são ambientes completos para o 
desenvolvimento de software, oferecendo uma série de recursos integrados para ajudar os 
desenvolvedores durante o processo de codificação. Abaixo, estão listadas algumas das principais 
IDEs usadas no desenvolvimento web: 
 
2.3.1 Visual Studio (VS) 
 
O Visual Studio, desenvolvido pela Microsoft, é uma das IDEs mais completas e populares. 
Oferece suporte a várias linguagens de programação, incluindo C#, F#, .NET, Python, JavaScript e 
muitas outras. Sua versão voltada para o desenvolvimento web, o Visual Studio Code, é amplamente 
usado devido à sua leveza, vasta gama de extensões e integração com Git. 
 
2.3.2 IntelliJ IDEA 
 
Especialmente projetado para desenvolvedores Java, o IntelliJ IDEA é conhecido por sua 
alta qualidade e eficiência. Oferece suporte a uma ampla gama de frameworks e tecnologias, como 
Spring, Java EE e até mesmo JavaScript, HTML e CSS.2.3.3 Eclipse 
 
 
 
 
 
 
 
23 
O Eclipse é uma IDE de código aberto amplamente utilizada e altamente configurável. É 
comumente usado para desenvolvimento em Java, mas possui um ecossistema de plugins que o torna 
adaptável a diversas outras linguagens e propósitos. 
 
2.3.4 NetBeans 
 
Essa IDE é uma plataforma modular escrita em Java, com um foco considerável no 
desenvolvimento Java, mas também oferece suporte a outras linguagens como PHP e C/C++. É 
conhecida por sua simplicidade e eficiência. 
 
2.3.5 PyCharm 
 
Desenvolvido pela JetBrains, o PyCharm é uma IDE focada em Python. Possui recursos 
avançados de análise de código, depuração, testes e integração com frameworks populares como 
Django e Flask. 
 
2.3.6 Sublime Text 
 
Embora seja mais um editor de texto avançado do que uma IDE completa, o Sublime Text 
oferece muitas funcionalidades essenciais para desenvolvimento web. É leve, altamente 
personalizável e tem um ecossistema de plugins bem extenso. 
 
2.3.7 Por que escolher uma IDE? 
 
As IDEs oferecem uma variedade de recursos, como realce de sintaxe, depuradores 
integrados, gerenciamento de projetos, refatoração de código, controle de versão e muito mais. Elas 
são particularmente úteis para projetos complexos, oferecendo um ambiente integrado para o 
desenvolvimento ágil, tornando o processo de desenvolvimento mais eficiente e produtivo. 
 
 
 
 
 
 
 
24 
No entanto, a escolha da IDE pode variar de acordo com as preferências pessoais, a 
linguagem de programação utilizada e a natureza do projeto. A importância fundamental é encontrar 
uma ferramenta que se adeque ao fluxo de trabalho do desenvolvedor e possa melhorar a 
produtividade e a qualidade do código desenvolvido. 
 
2.4 Ferramentas de Debugging e Inspeção 
 
Identificar e corrigir problemas de código é essencial no desenvolvimento web. 
Ferramentas de debugging e inspeção ajudam os desenvolvedores a compreenderem e corrigirem 
erros com eficiência. 
Alguns exemplos destas ferramentas: 
- Chrome DevTools: Oferece recursos avançados para inspecionar elementos da página, 
monitorar o desempenho, debugar JavaScript e editar estilos em tempo real. 
- Firebug: Uma extensão do navegador, anteriormente para o Firefox e agora disponível 
para outros navegadores, que fornece funcionalidades avançadas de inspeção e depuração. 
- Ferramentas de Desenvolvedor do Firefox, Safari, Edge etc.: Cada navegador oferece 
suas próprias ferramentas integradas para desenvolvimento, permitindo inspeção, depuração e 
otimização de aplicativos web. 
 
2.5 Ferramentas de Gerenciamento de Pacotes 
 
Sistemas de gerenciamento de pacotes simplificam a instalação, atualização e remoção 
de bibliotecas e dependências do projeto. 
 
- NPM (Node Package Manager): É um dos gerenciadores de pacotes mais populares, 
especialmente na comunidade JavaScript. Permite instalar e gerenciar bibliotecas e ferramentas para 
projetos Node.js. 
 
- Yarn: Desenvolvido pelo Facebook, o Yarn é uma alternativa ao NPM, oferecendo 
desempenho melhorado e outras funcionalidades. 
 
 
 
 
 
 
25 
 
2.6 Servidores Locais e Ambientes de Testes 
 
Dispor de um ambiente de testes local é crucial para o desenvolvimento e o 
aprimoramento de aplicações web. 
 
- Servidores Locais: Ferramentas como XAMPP, WAMP e MAMP oferecem ambientes 
locais que combinam Apache, MySQL e PHP (ou outras linguagens), permitindo o desenvolvimento 
de aplicações web em um ambiente simulado. 
 
- Docker: Oferece containers virtualizados que podem conter todos os componentes 
necessários para um aplicativo. É útil para garantir a consistência do ambiente de desenvolvimento e 
a portabilidade do aplicativo. 
 
2.7 Extensões e Plugins 
 
As extensões e plugins adicionam funcionalidades extras aos editores de código e 
navegadores, facilitando tarefas específicas. 
- Extensões do VS Code: Oferecem suporte para diferentes linguagens, depuração 
avançada, formatação de código e integração com serviços de terceiros. 
 
- Extensões do Chrome: Desde ferramentas de desenvolvimento até bloqueadores de 
anúncios, as extensões do Chrome podem ajudar os desenvolvedores a aprimorar sua experiência de 
navegação e desenvolvimento. 
Legal, não é mesmo? 
As ferramentas de desenvolvimento desempenham um papel vital na eficiência e 
qualidade do trabalho dos desenvolvedores web. A escolha e a familiarização com as ferramentas 
certas para o trabalho podem melhorar significativamente a produtividade e a qualidade das 
aplicações desenvolvidas. Saiba também que a constante evolução e inovação nessas ferramentas 
 
 
 
 
 
 
26 
também exigem que os desenvolvedores estejam sempre atualizados para aproveitar ao máximo as 
mais recentes e avançadas funcionalidades disponíveis. 
 
2.8 Controle de Versão e Colaboração 
 
Dada a complexidade e tamanho dos projetos de desenvolvimento de software nos dias 
de hoje, é importantíssimo pensar em como controlar e manter as versões de modo colaborativo. 
Deste modo, o controle de versão e as ferramentas de colaboração são fundamentais 
para o desenvolvimento de softwares e afins. Neste capítulo, serão abordados os sistemas de 
controle de versão e as plataformas de colaboração mais utilizadas, destacando sua importância e 
impacto no desenvolvimento de aplicações web. 
 
2.8.1 Sistemas de Controle de Versão 
 
2.8.1.1 Git 
 
O Git é o sistema de controle de versão mais popular e amplamente utilizado na indústria 
de desenvolvimento de software. Desenvolvido por Linus Torvalds, é conhecido por sua velocidade, 
eficiência e flexibilidade. Permite que os desenvolvedores acompanhem as alterações no código-
fonte, revertam para versões anteriores, gerenciem branches e facilitem a colaboração em equipe. 
 
- Branching e Merging: O Git facilita a criação de ramificações (branches) para desenvolver 
recursos independentes, permitindo a fusão (merging) dessas ramificações de volta ao código 
principal de maneira segura. 
 
- GitHub e GitLab: Plataformas que fornecem serviços baseados no Git, oferecendo 
repositórios remotos, ferramentas de colaboração, rastreamento de problemas (issues), integração 
contínua e muito mais. 
 
 
 
 
 
 
 
27 
- Fluxos de Trabalho Git: Estratégias como GitFlow, Feature Branching e outros fluxos de 
trabalho são comumente adotados para organizar o desenvolvimento de forma eficiente. 
 
2.9 Colaboração e Plataformas de Desenvolvimento 
 
2.9.1 GitHub 
 
O GitHub é uma plataforma baseada na web que utiliza o Git para hospedar repositórios 
de código-fonte. É um dos maiores repositórios de código aberto do mundo, permitindo que 
desenvolvedores colaborem em projetos, contribuam com código, revisem alterações e gerenciem 
problemas (issues) de forma colaborativa. 
 
- Colaboração em Equipe: Recursos como pull requests, revisão de código, comentários, 
wiki, e gerenciamento de projetos tornam o trabalho em equipe mais fluido e eficaz. 
 
- Integração Contínua e Implantação Contínua (CI/CD): Plataformas como GitHub Actions 
permitem a automação de testes, compilação e implantação de código diretamente do repositório. 
 
2.9.2 GitLab 
 
Similar ao GitHub, o GitLab oferece recursos completos para gerenciamento de ciclo de 
vida do desenvolvimento de software, com a vantagem adicional de permitir a instalação local, 
garantindo controle total sobre os dados e processos de desenvolvimento. 
 
- CI/CD Integrado: Oferece ferramentas para CI/CD, permitindo a automatização de 
tarefas e garantindo a entrega contínua. 
 
- Gestão de Recursos: Possui funcionalidades para gerenciamento de projetos, 
rastreamento de problemas, wiki, análise de código, entre outros. 
 
 
 
 
 
 
 
28 
 
 
 
3.Competência 03 | Identificar a linguagem HTML5 
 
Neste Unidade você aprenderá a identificar a linguagem HTML, bem como conhecer um 
pouco deste vasto universo do desenvolvimento de websites. Ainda nesta terceirasemana, serão 
explorados diversos códigos, exemplificando na prática os recursos disponíveis nesta linguagem. 
Você está pronto? Vamos lá! 
 
3.1 O que é HTML? 
 
Muitos acreditam que HTML é uma linguagem de programação, mas na verdade não é. 
Como assim, professor? É isso mesmo. HTML é uma linguagem de marcação, sendo um padrão para 
a criação de páginas web. 
Em inglês, HTML significa Hyper Text Markup Language e quando se traduz para o 
português, tem-se linguagem de marcação de hipertexto. 
Esta linguagem é responsável por definir a estrutura e o significado de cada elemento que 
compõe o conteúdo de uma página. 
Para avançarmos um pouco mais no assunto, preciso lembrar de uma informação muito 
importante que foi estudada lá na Unidade 1, que é o protocolo. 
Por quê? É simples. Ao desenvolver uma página web em HTML, esta página precisa 
funcionar corretamente em qualquer sistema operacional ou dispositivo que possua um navegador. 
Para que isto ocorra, o protocolo entra e desempenha um papel muito importante, que é 
“regrar” o funcionamento. 
Quer conhecer um pouco mais do GitHub? 
Acesse: https://www.hostinger.com.br/tutoriais/o-que-github 
 
https://www.hostinger.com.br/tutoriais/o-que-github
 
 
 
 
 
 
29 
Neste caso, os protocolos que são utilizados automaticamente quando se acessa um site 
são o HTTP (Hypertext Transfer Protocol) e o HTTPS (Hyper Text Transfer Protocol Secure). Estes 
protocolos são responsáveis por garantir a padronização da comunicação entre os dispositivos, não 
importando qual sistema operacional ou navegador está se usando. 
Analise a figura 5 abaixo: 
 
 
Figura 5 – Funcionamento do protocolo HTTP 
Fonte: autor 
Descrição: Em um retângulo, no lado esquerdo um computador representando o usuário acessando um site. Ao centro, 
um globo representando a internet e a direita, um conjunto de computadores representando um servidor. Os três 
objetos estão interligados entre setas, demonstrando a requisição HTTP e a resposta HTML. 
 
Conforme a figura 5, um usuário acessa um site, requisitando o protocolo HTTP pelo 
navegar e através da internet faz o contato com os servidores e em seguida acontece a resposta 
HTML, devolvendo ao usuário a informação antes requisitada. 
Portanto, na prática, quando você abre o navegador e digita uma URL, a comunicação 
entre as partes (cliente e servidor) acontece dessa forma, legal né? 
Agora que você domina um pouco o HTML, vamos começar a brincadeira de trabalhar 
com códigos! 
 
3.2 Fundamentos do HTML 
 
Assim como toda linguagem de computador, a linguagem de marcação HTML possui uma 
forma de ser escrita para que funcione corretamente e seja entendida pelos dispositivos. 
 
 
 
 
 
 
 
 
 
30 
Esta forma de escrever também pode ser chamada de sintaxe. Deste modo, analise o 
pequeno trecho de código HTML abaixo: 
 
<p class="estilo"> Esta é a linguagem HMTL</p> 
Quadro 01 – Sintaxe do código HTML 
Fonte: autor 
Descrição: Código fonte demonstrando a sintaxe da linguagem HTML. 
 
Perceba que neste trecho de código existe uma composição de elementos específicos, 
sendo: 
1. Tag de abertura: Trata-se do nome do elemento, no caso p, entre os sinais de menor (<) e 
maior (>). 
2. Tag de fechamento: Semelhante a tag de abertura com o sinal de barra (/), determinando o 
final do elemento construído. 
3. Conteúdo: É o conteúdo do elemento. Neste caso, o conteúdo é a frase “Esta é a linguagem 
HTML”. 
4. Atributo: O atributo nem sempre é obrigatório, mas pode fazer parte do elemento, atribuindo 
comportamento ou uma característica adicional. Neste caso, está sendo atribuída uma classe, 
ou seja, um estilo. 
Ainda sobre o atributo, é importante entender que ele sempre deve ter um espaço entre 
ele e o nome do elemento, o nome do atributo seguido por um sinal de igual e aspas de abertura e 
fechamento, envolvendo todo o valor do atributo. 
 
3.3 Estrutura básica do HTML 
 
Para criar de fato uma página HTML, é preciso, além de conhecer a sintaxe, saber como 
estruturar um arquivo HTML. Este momento é muito importante, pois será possível agregar um 
conjunto de elementos de forma combinada a fim de se criar uma página web funcional. 
 
 
 
 
 
 
 
 
 
 
31 
Deste modo, analise o trecho de código abaixo: 
 
<!DOCTYPE html> 
<html> 
 <head> 
 <meta charset="utf-8" /> 
 <title>Minha primeira página HTML</title> 
 </head> 
 <body> 
 <p>Olá, mundo!</p> 
 </body> 
</html> 
Quadro 02 – Estrutura básica do código HTML 
Fonte: autor 
Descrição: Código fonte demonstrando a estrutura básica da linguagem HTML. 
 
Neste trecho de código tem-se: 
1. O tipo de documento <!DOCTYPE html>: A função deste primeiro objeto na página HTML é 
informar ao dispositivo que está carregando a página de que se trata de um conteúdo HTML. 
2. O elemento <html></html>: Este elemento tem fundamental importância na estrutura, pois 
comporta todo o conteúdo da página e é conhecido como elemento raiz. 
3. O elemento <head></head>: Este elemento determina a seção do código onde todo o 
conteúdo que não é visível para o visitante, incluindo palavras-chaves para que apareçam nos 
sites de buscas, por exemplo. 
4. O elemento <meta charset="utf-8" />: Elemento que tem a função de definir o tipo de 
codificação utilizada. 
5. O elemento <title></title>: Este elemento define o título da página, que aparece na barra do 
navegador. 
6. O elemento <body></body>: Este elemento determina a seção do código que irá mostrar ao 
usuário durante a visitação da página, como imagens, texto, vídeos e qualquer outro objeto 
compatível. 
Bacana, não é mesmo? Com esta estrutura básica é possível construir páginas incríveis e 
acrescentar centenas e até milhares de linhas de código. 
 
 
 
 
 
 
32 
Deste modo, pare para pensar. Em um arquivo com milhares de linhas de código, como 
fazer para identificar trechos, para posteriormente ajustar ou corrigir uma falha, por exemplo? É 
simples! Assim como nas outras linguagens, é possível inserir comentários sem que o usuário veja. 
Observe o exemplo abaixo: 
 
<p>Isto é um parágrafo</p> 
<!--Isto é um comentário!--> 
Quadro 03 – Parágrafo em HTML 
Fonte: autor 
Descrição: Código fonte demonstrando a criação de um parágrafo em HTML. 
 
Você percebeu a diferença entre um elemento e um comentário? Tenho certeza que sim! 
O comentário é composto por <!—e !-->. 
Portanto, à medida que a página vai sendo criada, comentários podem ser adicionados, 
servindo de guia e de explicação. Esta medida permite que o desenvolvedor identifique mais 
rapidamente as partes do código, encontrando problemas mais facilmente. 
 
3.4 Metadados em HTML 
 
Basicamente, os metadados em HTML são um conjunto de informações inseridas em uma 
página web. Estas informações são responsáveis por permitir, por exemplo, que sites de busca 
encontrem a página, com base nas palavras-chave inseridas. 
Mas não é somente isso. Estes metadados podem definir alguns comportamentos 
interessantes, aprimorando a experiência do usuário. É possível por exemplo determinar que o site 
seja responsivo, ou seja, que se adeque em função do tamanho da tela e das propriedades do 
navegador. 
 
Neste sentido, saiba também que para implementar este conjunto de informações se faz 
necessário escrever dentro da tag <head>, ok? 
Veja um exemplo de metadados em uma página HTML: 
 
<!DOCTYPE html> 
 
 
 
 
 
 
33 
<html> 
 <head> 
 <meta charset="UTF-8"> 
 <meta name="description" content="Free Web tutorials"> 
 <meta name="keywords" content="HTML, CSS, JavaScript"> 
 <meta name="author" content="John Doe"> 
 <meta name="viewport" content="width=device-width, initial-
scale=1.0"> 
 <title>Minha primeira página HTML</title> 
 </head> 
 <body> 
 <p>Olá, mundo!</p> 
 </body> 
</html> 
Quadro 04 – Metadados em HTML 
Fonte: autor 
Descrição: Código fonte demonstrando a criação de metadados em HTML.3.5 O HTML 5 
 
3.5 O HTML 5 
 
Agora que você conhece um pouco dos fundamentos do HTML, vamos mergulhar na 
versão mais atual desta linguagem! 
A primeira coisa a entender é a filosofia do HTML5, sendo fundamental para compreender 
a natureza e os princípios orientadores dessa versão da linguagem de marcação HyperText Markup 
Language. 
HTML5 não é apenas uma linguagem, mas uma abordagem revolucionária para o 
desenvolvimento web. Neste tópico, exploraremos a filosofia subjacente ao HTML5 e como ela tem 
impactado a forma como criamos e interagimos com conteúdo na web. 
 
3.5.1 Simplificação e Clareza 
 
Um dos princípios essenciais da filosofia do HTML5 é a simplificação. Os criadores do 
HTML5 buscaram simplificar a linguagem de marcação, tornando-a mais limpa, clara e fácil de 
entender. Eles eliminaram elementos obsoletos e redundantes e promoveram o uso de uma estrutura 
 
 
 
 
 
 
34 
mais semântica. Isso significa que o código HTML5 é mais intuitivo, o que facilita a criação e a 
manutenção de páginas web. 
 
3.5.2 Foco na Semântica 
 
A semântica é outro pilar importante da filosofia do HTML5. Isso significa que os 
elementos HTML5 são projetados para transmitir significado, tornando o conteúdo da página mais 
compreensível tanto para os desenvolvedores como para os navegadores. 
O uso adequado de elementos como “<header>“, “<nav>“, “<article>“ e “<footer>“ torna 
mais fácil identificar a estrutura e o propósito do conteúdo, melhorando a acessibilidade e a 
otimização para mecanismos de busca. 
 
3.5.3 Suporte à Diversidade de Dispositivos 
 
A web moderna é acessada por uma ampla variedade de dispositivos, desde 
computadores desktop até smartphones e dispositivos de assistência. A filosofia do HTML5 abraça 
essa diversidade e incentiva o desenvolvimento de páginas web responsivas e flexíveis. A capacidade 
de criar layouts adaptáveis e compatíveis com dispositivos móveis tornou-se um dos principais 
objetivos do HTML5. 
 
3.5.4 Eliminação de Dependências em Plugins 
 
O HTML5 também se esforçou para eliminar a necessidade de plugins de terceiros, como 
o Adobe Flash e o Java Applets. Em vez disso, o HTML5 introduziu elementos nativos para a exibição 
de multimídia, como as tags “<video>” e “<audio>”. Isso tornou a experiência do usuário mais segura, 
eficiente e menos dependente de software externo. 
 
 
 
 
 
 
 
 
 
35 
3.5.5 Interatividade e API JavaScript 
 
A filosofia do HTML5 incentiva a criação de páginas web altamente interativas e 
dinâmicas. Integra-se estreitamente com JavaScript, oferecendo APIs nativas para interações mais 
sofisticadas. Isso inclui recursos como manipulação de elementos do DOM, acesso a dispositivos, 
geolocalização e muito mais, permitindo a criação de aplicativos web avançados. 
 
3.5.6 Padrões Abertos e Acessibilidade 
 
HTML5 abraça a ideia de padrões abertos e acessibilidade. Ao aderir a padrões web 
abertos, como o W3C (World Wide Web Consortium), ele promove a interoperabilidade e a inovação. 
Além disso, fornece recursos para melhorar a acessibilidade da web, tornando o conteúdo disponível 
para uma ampla gama de usuários, incluindo aqueles com deficiências. 
 
3.6 Estrutura do HTML 5 
 
Apesar de semelhante, a estrutura do HTML5 se diferencia das versões anteriores. Agora, 
os elementos de estruturação ajudam a dividir o conteúdo em partes distintas de maneira mais 
organizada, o que não só torna o código mais legível para desenvolvedores, mas também proporciona 
uma melhor experiência para os usuários finais. 
 
 
3.6.1 Elementos estruturais principais do HTML5 
 
1. “<header>”: O elemento <header> é utilizado para representar o cabeçalho da página ou de 
uma seção. Pode conter elementos como logotipos, títulos e menus de navegação. 
2. “<nav>”: O elemento <nav> é destinado a agrupar links de navegação. Isso inclui menus de 
navegação principal, links para outras partes do site ou até mesmo links de navegação de 
paginadores. 
 
 
 
 
 
 
36 
3. “<section>”: O elemento <section> é usado para agrupar conteúdo relacionado em uma 
página. Ele ajuda a dividir o conteúdo da página em seções temáticas distintas. 
4. “<article>”: O elemento <article> é projetado para conteúdo independente e autônomo. Isso 
pode incluir postagens de blog, notícias, comentários ou qualquer conteúdo que possa ser 
republicado em outro contexto 
5. “<aside>”: O elemento <aside> é utilizado para conteúdo relacionado, mas que não é 
essencial para a compreensão do conteúdo principal. Isso pode incluir barras laterais, 
anúncios ou conteúdo relacionado. 
6. “<footer>”: O elemento <footer> representa o rodapé da página ou de uma seção. 
Geralmente contém informações de contato, links para políticas de privacidade e direitos 
autorais. 
 
3.7 Semântica no HTML5 
 
A semântica no HTML5 refere-se à atribuição de significado aos elementos HTML, 
tornando a estrutura do documento mais clara e compreensível para navegadores, mecanismos de 
busca e pessoas com deficiência. 
 
3.7.1 Vantagens da Semântica 
 
1. Acessibilidade: A semântica adequada torna o conteúdo mais acessível a pessoas com 
deficiência visual, pois os leitores de tela podem interpretar a estrutura da página. 
2. SEO: Mecanismos de busca utilizam a semântica para entender a relevância do conteúdo. O 
uso de elementos corretos, como títulos, pode melhorar a classificação nos resultados de 
pesquisa. 
3. Manutenção: Código semântico é mais fácil de entender e manter. Isso ajuda 
desenvolvedores a colaborar de maneira mais eficaz e aprimora a escalabilidade. 
4. Compreensão: A semântica torna o código mais legível e compreensível para 
desenvolvedores, facilitando a colaboração e a depuração. 
 
 
 
 
 
 
 
37 
3.7.2 Elementos Semânticos 
 
HTML5 introduziu uma série de elementos semânticos que auxiliam na representação do 
significado do conteúdo. Alguns exemplos incluem: 
 
1. “<header> e <footer>”: Indicam o início e o fim de um conteúdo, seja na página como um 
todo ou em uma seção específica. 
2. “<nav>”: Define uma seção de navegação. 
3. “<article>”: Representa uma peça de conteúdo autônoma e autocontida. 
4. “<section>”: Agrupa conteúdo relacionado. 
5. “<figure> e <figcaption>”: Usados para marcar imagens e fornecer descrições. 
6. “<time>”: Utilizado para representar datas e horários 
 
 
 
 
 
Perceba que a estrutura e semântica desempenham um papel crucial no HTML5. Eles não 
apenas simplificam o desenvolvimento web, mas também melhoram a experiência do usuário e a 
acessibilidade. 
Ao utilizar os elementos de estruturação e atribuir significado apropriado aos elementos, 
os desenvolvedores podem criar páginas web mais compreensíveis, beneficiando tanto os visitantes 
quanto os mecanismos de busca. É essencial dominar esses conceitos ao trabalhar com HTML5 para 
criar conteúdo web de alta qualidade. 
 
Quer conhecer mais elementos semânticos presentes no HTML? 
Acesse o link: https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element 
 
https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element
 
 
 
 
 
 
38 
3.8 Formulários aprimorados HTML5 
 
Os formulários aprimorados são uma das características mais notáveis e úteis do HTML5. 
Esta versão da linguagem de marcação introduziu várias melhorias nos formulários web, tornando a 
coleta de dados mais eficiente e melhorando a experiência do usuário. 
Neste tópico, exploraremos os recursos e as melhorias dos formulários no HTML5. 
 
 
3.8.1 Elementos de formulários aprimorados 
 
O HTML5 apresenta diversos elementos de formulário que simplificam a criação de 
formulários web mais amigáveis e ricos em recursos. Alguns dos elementos de formulário 
aprimorados mais importantes incluem: 
 
 
1. <input type="date">, <input type="time"> e <input type="datetime-local"> 
Esses tipos de entrada permitem que os usuários selecionem datas, horas ou data e hora 
a partir de controles nativosde seleção. Isso simplifica a entrada de dados e evita erros de 
formatação. 
 
2. <input type="email"> e <input type="url"> 
Esses tipos de entrada validam automaticamente os endereços de e-mail e URLs inseridos 
pelos usuários, ajudando a garantir que os dados fornecidos sejam formatados corretamente. 
 
3. <input type="number"> e <input type="range"> 
Esses tipos de entrada facilitam a coleta de números, permitindo que os usuários 
escolham valores em uma faixa específica. O tipo range cria um controle deslizante que permite aos 
usuários selecionar valores dentro de um intervalo predefinido. 
 
4. <input type="search"> 
 
 
 
 
 
 
39 
Esse tipo de entrada é projetado para campos de pesquisa e oferece recursos adicionais, 
como sugestões de pesquisa e opções de preenchimento automático. 
 
5. <input type="color"> 
Permite aos usuários escolher uma cor usando uma interface gráfica. Isso é 
particularmente útil em aplicações que envolvem seleção de cores, como paletas de cores. 
 
6. <input type="file"> 
Permite que os usuários façam o upload de arquivos diretamente em um formulário. 
 
 
3.8.2 Validação de formulário 
 
 
O HTML5 também introduziu recursos de validação de formulários que facilitam a 
verificação de dados inseridos pelos usuários. Alguns dos atributos de validação incluem: 
 
1. required 
O atributo required pode ser aplicado a campos de formulário, tornando-os obrigatórios. 
Se um usuário tentar enviar o formulário sem preencher um campo obrigatório, uma mensagem de 
erro será exibida automaticamente. 
 
2. pattern 
O atributo pattern permite que você defina um padrão de entrada específico para um 
campo. Isso é útil para validar entradas, como números de telefone ou códigos postais, de acordo 
com um formato específico. 
 
3. min e max 
Esses atributos definem um valor mínimo e máximo aceitável para campos numéricos, 
como <input type="number"> e <input type="range">. 
 
 
 
 
 
 
40 
4. maxlength 
O atributo maxlength permite limitar o número máximo de caracteres que um usuário 
pode inserir em um campo de texto. 
Deste modo, veja um exemplo de um formulário básico em HTML5: 
 
<!DOCTYPE html> 
<html> 
<head> 
 <title>Formulário Básico</title> 
</head> 
<body> 
 
<h2>Formulário Básico</h2> 
 
<form id="meuFormulario" action="#" method="post"> 
 
 <!-- Campo de Nome --> 
 <label for="nome">Nome:</label> 
 <input type="text" id="nome" name="nome" required> 
 <br><br> 
 
 <!-- Campo de E-mail --> 
 <label for="email">E-mail:</label> 
 <input type="email" id="email" name="email" required> 
 <br><br> 
 
 <!-- Campo de Idade --> 
 <label for="idade">Idade:</label> 
 <input type="number" id="idade" name="idade" min="18" max="99" 
required> 
 <br><br> 
 
 <!-- Botão de Envio --> 
 <input type="submit" value="Enviar"> 
</form> 
</body> 
 
 
 
 
 
 
 
41 
Quadro 05 – Formulário em HTML 
Fonte: autor 
Descrição: Código fonte demonstrando a criação de um formulário em HTML. 
 
Neste exemplo, foi criado um formulário simples com três campos: Nome, E-mail e Idade. 
Note que o atributo “required“ foi utilizado para indicar que esses campos são obrigatórios. 
 
3.9 Multimídia e gráficos em HTML5 
 
O HTML5 trouxe avanços significativos no que diz respeito a multimídia e gráficos na web. 
Foi introduzido elementos nativos que permitem a incorporação de áudio, vídeo e gráficos 
diretamente em páginas web, reduzindo a dependência de plugins de terceiros, como o Adobe Flash. 
Neste tópico, exploraremos como o HTML5 melhorou a integração de multimídia e 
gráficos na web. 
 
3.9.1 Multimídia 
 
1. <video> 
A tag <video> é usada para incorporar conteúdo de vídeo diretamente em uma página 
web. Ela suporta uma variedade de formatos de vídeo, como MP4, WebM e Ogg, permitindo que os 
desenvolvedores escolham o formato mais apropriado para seus públicos e dispositivos. O suporte a 
legendas e faixas de áudio múltiplas oferece uma experiência de visualização mais rica. 
Exemplo de uso da tag <video>: 
<video controls> 
 <source src="video.mp4" type="video/mp4"> 
 <source src="video.webm" type="video/webm"> 
 Seu navegador não suporta vídeo HTML5. 
</video> 
Quadro 06 – Tag vídeo em HTML 
Fonte: autor 
Descrição: Código fonte demonstrando a inserção de um vídeo em HTML. 
 
 
 
 
 
 
 
 
 
 
 
42 
 
 
2. <audio> 
A tag <audio> permite a incorporação de arquivos de áudio em uma página web. Ela 
suporta formatos como MP3, WAV e Ogg. A capacidade de reproduzir faixas de áudio diretamente 
na página é útil para sites de música, podcasts e aplicativos que exigem áudio. 
Exemplo de uso da tag <audio>: 
 
<audio controls> 
 <source src="audio.mp3" type="audio/mpeg"> 
 <source src="audio.ogg" type="audio/ogg"> 
 Seu navegador não suporta áudio HTML5. 
</audio> 
Quadro 07 – Tag áudio em HTML 
Fonte: autor 
Descrição: Código fonte demonstrando a inserção de um áudio em HTML. 
 
 
 
3.9.2 Gráficos 
 
1. <canvas> 
A tag <canvas> permite a criação de gráficos, animações e jogos diretamente na página 
web usando JavaScript. É uma ferramenta poderosa para desenvolvedores que desejam criar 
conteúdo gráfico personalizado. Com o canvas, é possível desenhar formas, linhas, imagens e até 
mesmo criar animações interativas. 
2. SVG (Scalable Vector Graphics) 
O HTML5 também suporta a incorporação de gráficos vetoriais escaláveis usando a 
tecnologia SVG. Os gráficos SVG são baseados em XML e oferecem a capacidade de criar imagens 
nítidas e escaláveis que se adaptam a diferentes tamanhos de tela. Isso é particularmente útil para 
ícones e gráficos que precisam manter a qualidade em dispositivos de alta resolução. 
 
 
 
 
 
 
 
 
 
 
43 
Exemplo de uso de SVG: 
 
<svg width="100" height="100"> 
 <circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" 
fill="red" /> 
</svg> 
Quadro 08 – Gráfico SVG em HTML 
Fonte: autor 
Descrição: Código fonte demonstrando a inserção de um gráfico SVG em HTML. 
 
Neste sentido, você notou a evolução promovida pelo HTML5? Tenho certeza que sim! 
Com elementos nativos como <video>, <audio> e <canvas>, os desenvolvedores podem 
criar experiências ricas e interativas diretamente nas páginas web, sem depender de plugins externos. 
Isso não apenas simplifica o desenvolvimento, mas também melhora a acessibilidade e a 
compatibilidade com dispositivos diversos. Além disso, o suporte a gráficos vetoriais escaláveis com 
SVG torna a web mais adaptável a uma variedade de tamanhos de tela, oferecendo qualidade visual 
consistente em dispositivos de diferentes resoluções. 
O HTML5 abriu novas possibilidades para a criação de conteúdo multimídia e gráficos na 
web. 
 
3.10 Geolocalização e armazenamento em HTML5 
 
O HTML5 trouxe avanços significativos no que diz respeito à geolocalização e ao 
armazenamento local, proporcionando uma base sólida para o desenvolvimento de aplicativos e 
recursos web baseados em localização e para a capacidade de armazenamento local de dados. 
 
3.10.1 Geolocalização 
 
A capacidade de determinar a localização geográfica de um dispositivo ou usuário é uma 
característica importante em muitos aplicativos e serviços web. 
O HTML5 introduziu a API de Geolocalização, que permite que páginas web acessem as 
coordenadas geográficas do usuário, desde que o usuário conceda permissão. 
 
 
 
 
 
 
44 
Principais recursos da API de Geolocalização: 
- “navigator.geolocation”: O objeto global navigator contém a API de Geolocalização. Ele 
fornece métodos como getCurrentPosition() para obter a localização atual do dispositivo e 
watchPosition() para rastrear mudanças na posição. 
 
3.10.2 Armazenamento Local 
 
Os mecanismos de armazenamento local disponíveis na versão atual do HTML, permitem 
que aplicativos web armazenem dados no dispositivo do usuário. Isso é útil para armazenar 
preferências do usuário, cache dedados e informações temporárias. 
As principais opções de armazenamento local incluem: 
1. localStorage 
O localStorage é um armazenamento de pares chave-valor que persiste mesmo após o 
fechamento do navegador. É útil para armazenar pequenas quantidades de dados. 
2. sessionStorage 
O sessionStorage é semelhante ao localStorage, mas os dados são destruídos quando a 
sessão do navegador é encerrada. Isso é útil para armazenar informações temporárias que não 
precisam ser mantidas entre sessões. 
 
3.11 O futuro do HTML5 
 
Até o meu último corte de conhecimento em janeiro de 2022, o HTML5 já era amplamente 
adotado e estabelecido como a linguagem de marcação predominante na web. No entanto, o 
desenvolvimento de tecnologias web é um campo em constante evolução. Portanto, é interessante 
discutir as tendências e direções que poderiam impactar o futuro do HTML5. Vamos lá? 
Bem, dentre os potenciais desenvolvimentos futuros do HTML5, podemos elencar os 
seguintes tópicos: 
 
 
 
 
 
 
 
 
 
45 
I- HTML6 ou Evolução para Padrões Posteriores 
A contínua evolução do HTML e dos padrões da web é uma possibilidade. Novas versões, 
como o HTML6, poderiam trazer recursos adicionais, melhorias na semântica, reforço na segurança 
e avanços na interatividade. 
II- Integração com Tecnologias Emergentes 
Com o crescente uso de Internet das Coisas (IoT), realidade virtual (VR), realidade 
aumentada (AR) e inteligência artificial (IA), espera-se que o HTML5 evolua para integrar-se mais 
profundamente com essas tecnologias, oferecendo suporte nativo a recursos como sensores, 
dispositivos de realidade aumentada e interfaces de voz. 
III- Maior Foco em Acessibilidade e Padrões Web 
A ênfase contínua na acessibilidade e na conformidade com padrões web é provável. O 
desenvolvimento centrado na acessibilidade pode ser um aspecto crítico, garantindo que o HTML5 e 
futuras versões sejam mais acessíveis e utilizáveis por todos os usuários, independentemente das 
suas capacidades. 
IV- Otimização para Dispositivos Móveis e Navegação por Toque 
Com o aumento do uso de dispositivos móveis, a otimização e aprimoramento da 
experiência de navegação em telas sensíveis ao toque podem ser um ponto chave para o HTML5. 
Elementos e recursos voltados para interações táteis e otimização para telas menores podem ser 
mais aprofundados. 
V- Maior Segurança e Privacidade 
Dada a crescente preocupação com a segurança e a privacidade dos dados na web, o 
HTML5 poderia evoluir para incluir mais recursos e práticas para proteger a segurança e a privacidade 
do usuário, com implementações mais rigorosas de políticas de segurança, prevenção de 
rastreamento e aprimoramento na proteção de dados. 
VI- Desenvolvimento de Novas APIs 
A evolução do HTML5 pode incluir o desenvolvimento de novas APIs para oferecer 
funcionalidades avançadas aos desenvolvedores, como acesso a sensores do dispositivo, dados de 
saúde e integração com outras tecnologias emergentes. 
 
 
 
 
 
 
 
46 
Por fim, estas previsões sobre o futuro do HTML5 são baseadas nas tendências e nas 
necessidades percebidas até o momento. Contudo, o desenvolvimento tecnológico é dinâmico, e 
novas direções e inovações podem surgir a qualquer momento. 
A evolução do HTML5 dependerá, em grande parte, das necessidades emergentes da web 
e dos avanços tecnológicos no campo do desenvolvimento web. 
 
4.Competência 04 | Identificar a linguagem CSS3 
 
O CSS (Cascading Style Sheets) é uma linguagem fundamental para o desenvolvimento de 
páginas da web nos dias de hoje. Ele desempenha um papel crucial na criação da aparência e do 
design de um site, tornando-o atraente, responsivo e interativo. 
O CSS3 é uma evolução significativa desse padrão, trazendo inúmeras melhorias e 
recursos que permitem aos desenvolvedores web criar experiências mais ricas e envolventes para os 
usuários. 
Ao longo desta Unidade, identificaremos como o CSS3 tem transformado a forma como 
se planeja e estiliza páginas da web, proporcionando um maior controle sobre o layout, animações, 
efeitos visuais e muito mais. 
 
4.1 História do CSS 
 
Para compreender o significado e a importância do CSS3 (Cascading Style Sheets 3), é 
essencial voltar no tempo e explorar um pouco da história do CSS. O CSS desempenha um papel 
fundamental no desenvolvimento de páginas da web, permitindo que os desenvolvedores controlem 
a apresentação e o estilo de documentos HTML. O CSS3, como a terceira grande versão dessa 
linguagem, representa uma evolução significativa em relação às suas versões anteriores. 
Deste modo, o conceito de estilos para a web surgiu com a criação da própria World Wide. 
Inicialmente, os estilos eram incorporados diretamente no HTML, o que tornava o código complexo 
e pouco maleável. Isso levou à necessidade de separar o conteúdo da apresentação, dando origem à 
ideia de uma linguagem de estilo independente: o CSS. 
 
 
 
 
 
 
47 
O primeiro rascunho oficial do CSS foi proposto por Håkon Wium Lie e Bert Bos em 1994, 
e em 1996, o CSS1 se tornou uma recomendação do W3C (World Wide Web Consortium). Com o 
CSS1, os desenvolvedores puderam finalmente aplicar estilos de maneira mais eficiente e consistente 
em suas páginas da web. 
 
4.1.2 CSS1 e CSS2 
 
Embora o CSS1 tenha sido uma revolução na época, ele ainda tinha suas limitações. A 
especificação era relativamente simples, o que restringia as capacidades de design das páginas web. 
O CSS2, introduzido em 1998, trouxe avanços significativos. Ele introduziu suporte para 
posicionamento, impressão e mídia, tornando-se uma ferramenta mais versátil para os 
desenvolvedores. 
No entanto, o desenvolvimento da web estava avançando rapidamente, e a demanda por 
mais recursos de design e formatação aumentou. Isso levou à necessidade de uma nova versão do 
CSS que pudesse acompanhar as demandas de uma web cada vez mais sofisticada. 
 
4.1.3 Enfim o CSS3 
 
O CSS3, a terceira iteração da linguagem de estilo, foi desenvolvido para preencher essa 
lacuna. A primeira versão de trabalho do CSS3 foi lançada em 1999, mas sua adoção generalizada 
ocorreu mais tarde, à medida que os navegadores começaram a implementar seus recursos. 
Uma das mudanças mais notáveis com o CSS3 foi a decisão de dividir a especificação em 
módulos individuais, em vez de lançar uma única versão monolítica. Cada módulo abordava um 
conjunto específico de recursos, como cores, tipografia, layout, transformações e animações. Isso 
permitiu que os desenvolvedores adotassem apenas as partes do CSS3 que eram relevantes para seus 
projetos, legal né? 
Portanto, o CSS3 tem passado por diversas atualizações e refinamentos, tornando-se uma 
parte vital do desenvolvimento web moderno. Os recursos avançados do CSS3 permitem que os 
desenvolvedores criem layouts complexos, animações impressionantes e efeitos visuais ricos, 
tornando a web mais interativa e atraente para os usuários. 
 
 
 
 
 
 
48 
Nos próximos tópicos será abordado a sintaxe e os seletores do CSS3, permitindo uma 
compreensão mais aprofundada desta linguagem de estilo. 
 
4.2 Sintaxe Básica do CSS 
 
Para aproveitar ao máximo o CSS3 e suas capacidades avançadas de estilização, é 
essencial compreender a sintaxe e os seletores que compõem esta linguagem de estilo. Aqui, 
exploraremos a estrutura fundamental do CSS3 e os diferentes tipos de seletores que você pode 
utilizar para direcionar elementos HTML em suas páginas da web. 
A sintaxe do CSS3 é relativamente simples, consistindo em uma regra de estilo que define 
como um elemento HTML deve ser estilizado. Cada regra é composta por um seletor e um conjunto 
de propriedades e valores. Aqui está um exemplo básico de uma regra CSS3: 
 
seletor { 
 propriedade: valor; 
} 
Quadro 09 – Sintaxe básica do CSS 
Fonte: autor 
Descrição: Código fonte demonstrando a sintaxe básica do CSS. 
 
Perceba neste exemplo que se tem: 
Seletor: O seletor identificao elemento HTML que você deseja estilizar. Pode ser um 
elemento HTML específico, uma classe, um ID, ou até mesmo um pseudo-elemento. 
Propriedade: A propriedade especifica qual aspecto do elemento será estilizado, como a 
cor do texto, a largura da borda, o tamanho da fonte, etc. 
Valor: O valor é a configuração que a propriedade receberá. Por exemplo, a cor do texto 
pode ser definida como "azul" ou "#00F" para azul. 
 
 
 
 
 
 
 
 
 
 
49 
4.2.1 Seletores CSS3 
 
O CSS3 oferece uma variedade de seletores para escolher, permitindo direcionar 
elementos de maneiras específicas. Alguns dos seletores mais comuns incluem: 
Seletores de Tipo: Esses seletores direcionam elementos com base em seu tipo. Por 
exemplo, o seletor “p” se aplica a todos os parágrafos em um documento. 
Seletores de Classe: Os seletores de classe começam com um ponto seguido do nome da 
classe. Por exemplo, “.destaque” se aplicaria a todos os elementos com a classe "destaque". 
Seletores de ID: Os seletores de ID começam com uma hashtag seguida do nome do ID. 
Por exemplo, “#cabecalho” se aplica a um elemento com o ID "cabecalho". 
Seletores de Descendência: Você pode direcionar elementos filhos específicos dentro de 
outros elementos usando seletores de descendência. Por exemplo, “ul li” se aplicaria a todos os 
elementos “li” que são filhos de uma lista “ul”. 
Seletores de Pseudo-classes: Os seletores de pseudo-classe permitem direcionar 
elementos em estados específicos, como “:hover” (quando o mouse está sobre o elemento) ou “:nth-
child(n)” (o enésimo elemento filho). 
Seletores de Atributo: Você pode direcionar elementos com base em seus atributos, 
como “[href]” para elementos com um atributo “href”. 
Seletores de Elemento Universal: O seletor “*” se aplica a todos os elementos na página. 
Veja o exemplo de código CSS abaixo, aplicando as regras citadas: 
 
/* Estilizando todos os elementos de parágrafo */ 
p { 
 font-size: 16px; 
 color: #333; 
} 
 
/* Estilizando elementos com a classe "destaque" */ 
.destaque { 
 background-color: yellow; 
 font-weight: bold; 
} 
 
 
 
 
 
 
50 
 
/* Estilizando o elemento com o ID "cabecalho" */ 
#cabecalho { 
 text-align: center; 
 font-size: 24px; 
} 
 
/* Estilizando links quando o mouse está sobre eles */ 
a:hover { 
 color: #FF0000; 
} 
Quadro 10 – Seletores em CSS 
Fonte: autor 
Descrição: Código fonte demonstrando a criação de seletores em CSS. 
 
Bacana! Agora você vai entender que funcionam as propriedades do CSS. 
 
4.3 Propriedades do CSS3 
 
O CSS3 oferece uma ampla gama de propriedades de estilo avançadas que permitem aos 
desenvolvedores web criar designs ricos e sofisticados para suas páginas. Estas propriedades 
estendem significativamente a capacidade de controle sobre a aparência dos elementos HTML. 
4.3.1 Gradientes Lineares e Radiais 
As propriedades ‘linear-gradient” e “radial-gradient” permitem criar fundos de 
elementos com transições suaves de cores. Isso é útil para criar botões elegantes, cabeçalhos degradê 
e muito mais. 
 
elemento { 
 background: linear-gradient(to right, #ff9900, #33cc33); 
} 
Quadro 12 – Propriedades em CSS 
Fonte: autor 
Descrição: Código fonte demonstrando a criação das propriedades em CSS. 
 
 
 
 
 
 
 
 
 
 
51 
4.3.2 Sombras CSS 
 
As sombras podem ser adicionadas a elementos com a propriedade “box-shadow”, 
permitindo criar efeitos de profundidade e destaque em caixas e texto. 
elemento { 
 box-shadow: 5px 5px 10px #888888; 
} 
Quadro 13 – Propriedade sombra em CSS 
Fonte: autor 
Descrição: Código fonte demonstrando a criação da propriedade sombra em CSS. 
 
 
 
4.3.3 Transformações 2D e 3D 
 
Com as propriedades “transform”, é possível aplicar rotações, escalas, translações e 
inclinações a elementos HTML. Isso é útil para criar animações e transformações visuais bem legais. 
 
elemento { 
 transform: rotate(45deg); 
} 
Quadro 14 – Transformações em CSS 
Fonte: autor 
Descrição: Código fonte demonstrando a criação de transformações em CSS. 
 
 
4.3.4 Transições CSS3 
 
A propriedade “transition” permite suavizar mudanças no estilo de elementos ao longo 
do tempo. Isso é essencial para criar animações e efeitos de hover atraentes. 
 
elemento { 
 transition: all 0.3s ease-in-out; 
} 
Quadro 15 – Transições em CSS 
Fonte: autor 
Descrição: Código fonte demonstrando a criação de transições em CSS. 
 
 
 
 
 
 
 
52 
4.3.5 Animações CSS3 
 
As animações CSS3 são criadas com a propriedade “@keyframes”, permitindo criar 
sequências de animações personalizadas em elementos HTML. 
 
@keyframes minhaAnimacao { 
 0% { transform: scale(1); } 
 100% { transform: scale(1.5); } 
} 
elemento { 
 animation: minhaAnimacao 2s infinite; 
} 
Quadro 16 – Animações em CSS 
Fonte: autor 
Descrição: Código fonte demonstrando a criação de animações em CSS. 
 
4.3.6 Fontes da Web (Web Fonts) 
 
A propriedade “@font-face” possibilita a incorporação de fontes personalizadas em uma 
página web. Isso garante consistência na aparência do texto, independentemente das fontes 
disponíveis no dispositivo do usuário. 
@font-face { 
 font-family: "MinhaFonte"; 
 src: url('minhafonte.woff'); 
} 
elemento { 
 font-family: "MinhaFonte", sans-serif; 
} 
Quadro 17 – Personalização de fontes em CSS 
Fonte: autor 
Descrição: Código fonte demonstrando a personalização de fontes em CSS. 
 
4.3.7 Flexbox e Grid Layout 
 
As propriedades “display: flex” e “display: grid” oferecem métodos avançados de layout. 
O Flexbox é ideal para criar layouts flexíveis, enquanto o Grid Layout permite criar grids complexos. 
 
 
 
 
 
 
53 
 
.container { 
 display: flex; 
 justify-content: center; 
 align-items: center; 
} 
Quadro 18 – Layouts flexíveis em CSS 
Fonte: autor 
Descrição: Código fonte demonstrando a criação de layouts flexíveis em CSS. 
 
 
4.3.8 Filtros CSS 
 
As propriedades de filtro, como “blur", “grayscale” e “sepia", permitem aplicar efeitos 
visuais a elementos, como desfoque ou transformações de cor. 
 
elemento { 
 filter: grayscale(50%); 
} 
Quadro 19 – Efeitos visuais (filtros) em CSS 
Fonte: autor 
Descrição: Código fonte demonstrando a criação de filtros em CSS. 
 
4.3.9 Variáveis CSS 
 
Com as variáveis CSS, você pode definir valores reutilizáveis para propriedades em todo 
o seu CSS, tornando-o mais organizado e fácil de manter. 
:root { 
 --cor-destaque: #ff9900; 
} 
elemento { 
 color: var(--cor-destaque); 
} 
Quadro 20 – Variáveis em CSS 
Fonte: autor 
Descrição: Código fonte demonstrando a criação de variáveis em CSS. 
 
 
 
 
 
 
 
 
54 
4.3.10 Texto Multicoluna 
 
A propriedade “column-count” permite criar layouts de texto em várias colunas, 
tornando a leitura de conteúdo longo mais agradável. 
elemento { 
 column-count: 3; 
} 
 
Essas são apenas algumas das propriedades avançadas oferecidas pelo 
CSS3. À medida que você explora e experimenta essas propriedades, você 
pode criar designs web atrativos. Combine-as com seletores criativos 
e você estará no caminho certo para criar páginas da web 
verdadeiramente excepcionais. 
 
No próximo tópico, discutiremos a importância das Media 
Queries e como elas permitem a criação de layouts responsivos e 
adaptáveis. 
Quadro 21 – Propriedade multicoluna em CSS 
Fonte: autor 
Descrição: Código fonte demonstrando a criação de multicoluna em CSS. 
 
4.4 Layout Responsivo 
 
O desenvolvimento de páginas da web deve levar em consideração a diversidade de 
dispositivos e tamanhos de tela que os usuários podem estar usando. Para garantir que o conteúdo 
seja exibido de maneira eficaz em todas as plataformas, o CSS3 introduziu um conceito fundamental: 
as Media Queries. Neste tópico, vamos explorar como as Media Queries são essenciais para criar 
layouts responsivos e adaptáveis em CSS3. 
 
4.4.1 Media Queries 
 
AsMedia Queries são regras condicionais em CSS3 que permitem aplicar estilos 
específicos com base nas características do dispositivo do usuário, como largura da tela, altura da 
 
 
 
 
 
 
55 
tela, orientação, resolução, entre outras. Isso significa que você pode criar layouts e estilos diferentes 
para diferentes situações. 
 
A estrutura básica de uma Media Query se parece com isto: 
@media (condição) { 
 /* Estilos a serem aplicados quando a condição é verdadeira */ 
} 
Quadro 22 – Estrutura básica de Media Query em CSS 
Fonte: autor 
Descrição: Código fonte demonstrando a criação da estrutura básica de Media Query em CSS. 
 
 
4.4.2 Largura da Tela e Layouts Responsivos 
 
Uma das aplicações mais comuns das Media Queries é criar layouts responsivos que se 
adaptam à largura da tela do dispositivo. Por exemplo, você pode definir um layout de duas colunas 
para telas largas e um layout de uma coluna para telas estreitas. 
 
 
/* Layout de duas colunas para telas largas */ 
@media (min-width: 768px) { 
 .coluna { 
 width: 50%; 
 float: left; 
 } 
} 
 
/* Layout de uma coluna para telas estreitas */ 
@media (max-width: 767px) { 
 .coluna { 
 width: 100%; 
 float: none; 
 } 
} 
Quadro 23 – Layout responsivo com Media Query em CSS 
Fonte: autor 
Descrição: Código fonte demonstrando a criação de layout responsivo com Media Query em CSS. 
 
 
 
 
 
 
56 
Neste exemplo, o CSS aplicará estilos diferentes com base na largura da tela. Quando a 
largura da tela for maior ou igual a 768 pixels, o layout de duas colunas será ativado; caso contrário, 
o layout de uma coluna será usado. 
 
4.4.3 Orientação da Tela e Dispositivos Móveis 
 
As Media Queries também podem ser usadas para ajustar o layout com base na 
orientação da tela. Isso é especialmente útil para dispositivos móveis, que podem ser usados tanto 
na vertical quanto na horizontal. 
 
 
/* Estilos diferentes para orientação vertical e horizontal */ 
@media (orientation: landscape) { 
 /* Estilos para tela na horizontal */ 
} 
 
@media (orientation: portrait) { 
 /* Estilos para tela na vertical */ 
} 
Quadro 24 – Orientação de tela com Media Query em CSS 
Fonte: autor 
Descrição: Código fonte demonstrando a criação de orientação de tela com Media Query em CSS. 
 
As Media Queries são uma ferramenta fundamental para o desenvolvimento de layouts 
responsivos e adaptáveis. Elas permitem que você crie designs flexíveis que se ajustam 
automaticamente ao ambiente do usuário, garantindo que seu conteúdo seja acessível e atraente em 
todas as plataformas. 
 
 
 
 
 
 
 
57 
 
 
4.5 Boas Práticas de Desenvolvimento CSS3 
 
O desenvolvimento com CSS3 pode ser uma tarefa poderosa e gratificante, mas, para 
manter a qualidade do código e a facilidade de manutenção, é essencial seguir boas práticas. 
Portanto, abordaremos neste tópico algumas das diretrizes recomendadas para um desenvolvimento 
eficiente e organizado com CSS3. 
4.5.1 Mantenha seu CSS Organizado 
 
Organização é a chave para um código CSS limpo e gerenciável. Aqui estão algumas dicas 
para manter seu CSS organizado: 
- Use uma estrutura de diretórios lógica para seus arquivos CSS. 
- Comente seu código para explicar seu propósito e uso. 
- Utilize a cascata de forma lógica, colocando regras mais específicas depois das gerais. 
Exemplo: 
 
/* Comentários explicativos */ 
.elemento { 
 /* Estilos gerais */ 
} 
 
.classe-especifica { 
 /* Estilos específicos */ 
} 
Quadro 25 – Organização em CSS 
Fonte: autor 
Descrição: Código fonte demonstrando a organização em CSS. 
Deste modo, convido-lhe a ler um pouco mais sobre este assunto no link 
abaixo: 
https://developer.mozilla.org/pt-
BR/docs/Web/CSS/CSS_media_queries/Using_media_queries 
 
https://developer.mozilla.org/pt-BR/docs/Web/CSS/CSS_media_queries/Using_media_queries
https://developer.mozilla.org/pt-BR/docs/Web/CSS/CSS_media_queries/Using_media_queries
 
 
 
 
 
 
58 
 
Ainda neste sentido, evite criar seletores muito específicos, pois eles podem tornar seu 
código mais difícil de manter. Em vez disso, use seletores mais genéricos e, quando necessário, 
adicione classes específicas aos elementos HTML. 
Exemplo: 
 
/* Evite seletores muito específicos */ 
#cabecalho .subtitulo h2 { 
 /* Estilos */ 
} 
 
/* Use classes específicas */ 
.titulo { 
 /* Estilos */ 
} 
Quadro 26 – Seletores genéricos em CSS 
Fonte: autor 
Descrição: Código fonte demonstrando o uso de seletores genéricos em CSS. 
 
Escolha nomes de classes e IDs descritivos que indiquem claramente a função do 
elemento. Isso torna seu código mais legível e compreensível. 
 
Exemplo: 
/* Nomeie classes e IDs de forma descritiva */ 
.botao-principal { 
 /* Estilos */ 
} 
 
#menu-navegacao { 
 /* Estilos */ 
} 
Quadro 27 – Nomes descritivos em CSS 
Fonte: autor 
Descrição: Código fonte demonstrando o uso de nomes descritivos em CSS. 
 
 
 
 
 
 
 
 
 
59 
 
Com relação às imagens, evite o uso excessivo. Opte por propriedades CSS3, como 
gradientes e sombras, em vez de imagens, para reduzir o tempo de carregamento da página. 
Deste modo, ao adotar as diretrizes mencionadas acima, você estará bem equipado para 
desenvolver estilos eficientes para suas páginas web. Lembre-se de que a prática constante e o 
aprendizado contínuo são essenciais para aprimorar suas habilidades de desenvolvimento CSS3. 
 
4.6 Exemplos práticos e estudo de caso em CSS3 
 
Para finalizar esta Unidade, alguns exemplos práticos serão explorados, a fim de simular 
situações reais e entender por completo como o CSS3 funciona. 
 
4.6.1 Exemplo 1: Layout Responsivo 
 
Um estudo de caso comum para demonstrar a capacidade do CSS3 em criar layouts 
responsivos é a adaptação de um site para diferentes dispositivos, como desktops, tablets e 
smartphones. 
Utilizando Media Queries e Grid/Flexbox Layout, é possível criar um design que se ajusta 
automaticamente à largura da tela, proporcionando uma experiência consistente e amigável para o 
usuário, independentemente do dispositivo que ele esteja utilizando. 
 
Veja o código: 
<!DOCTYPE html> 
<html> 
<head> 
 <title>Layout Responsivo</title> 
 <style> 
 /* Estilos padrão para todos os dispositivos */ 
 .coluna { 
 width: 100%; 
 float: left; 
 background-color: lightgray; 
 
 
 
 
 
 
60 
 padding: 20px; 
 box-sizing: border-box; 
 text-align: center; 
 margin-bottom: 20px; 
 } 
 
 /* Media Query para telas maiores que 768px */ 
 @media (min-width: 768px) { 
 .coluna { 
 width: 50%; 
 } 
 } 
 </style> 
</head> 
<body> 
 <div class="coluna"> 
 <h2>Coluna 1</h2> 
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing 
elit.</p> 
 </div> 
 <div class="coluna"> 
 <h2>Coluna 2</h2> 
 <p>Sed do eiusmod tempor incididunt ut labore et dolore magna 
aliqua.</p> 
 </div> 
</body> 
</html> 
Quadro 28 – Exemplo de layout responsivo em CSS 
Fonte: autor 
Descrição: Código fonte demonstrando um exemplo de layout responsivo em CSS. 
 
Neste exemplo simples, temos duas colunas lado a lado quando a largura da tela é maior 
que 768px e cada coluna ocupa 50% da largura. Quando a tela é menor que 768px, as colunas ocupam 
100% da largura, uma abaixo da outra. 
Você pode testar este código em um arquivo HTML e redimensionar a janela do 
navegador para ver a mudança de layout conforme a largura da tela é ajustada. 
 
 
 
 
 
 
61 
Essa é uma maneira básica de criar um layout responsivo usando Media Queries no CSS. 
Com ajustes adicionais e a combinação com outras propriedades CSS, é possível criar layouts mais 
complexos e adaptáveis a uma ampla gama de dispositivos. 
 
4.6.2 Exemplo 2: Animaçõese Transições 
 
Demonstrar como o CSS3 pode ser usado para criar animações e transições suaves é um 
estudo de caso poderoso. Por exemplo, uma galeria de imagens com efeitos de transição suaves ao 
passar o mouse por cima delas, ou botões que mudam de cor ou tamanho de forma animada ao 
serem clicados. Isso ilustra como o CSS3 pode adicionar dinamismo e interatividade ao design web, 
sem a necessidade de JavaScript. 
Veja o código: 
<!DOCTYPE html> 
<html> 
<head> 
 <title>Animações e Transições - Botões</title> 
 <style> 
 /* Estilos dos botões */ 
 .botao { 
 display: inline-block; 
 padding: 10px 20px; 
 text-align: center; 
 text-decoration: none; 
 background-color: #3898cc; 
 color: #fff; 
 border-radius: 5px; 
 transition: background-color 0.3s ease; 
 } 
 
 /* Efeito de transição para mudança de cor ao passar o mouse 
*/ 
 .botao:hover { 
 background-color: #202020; 
 } 
 </style> 
 
 
 
 
 
 
62 
</head> 
<body> 
 <a href="#" class="botao">Botão 1</a> 
 <a href="#" class="botao">Botão 2</a> 
</body> 
</html> 
Quadro 29 – Exemplo de animações e transições em CSS 
Fonte: autor 
Descrição: Código fonte demonstrando um exemplo de animações e transições em CSS. 
 
Neste código, foram criados dois botões simples que têm uma transição suave de cor de 
fundo quando o mouse passa sobre eles. O efeito de transição é controlado pela propriedade 
transition que especifica a mudança suave de cor (background-color) durante um período de 0,3 
segundos, com uma função de temporização (ease). 
Ao passar o mouse por cima dos botões, você notará a transição suave de cor de fundo, 
dando a sensação de interatividade e dinamismo. 
Você pode testar este código em um arquivo HTML e passar o mouse sobre os botões 
para observar o efeito de transição. Esse é um exemplo simples de como as transições em CSS3 
podem ser usadas para adicionar interatividade visual aos elementos da página. 
 
4.6.3 Exemplo 5: Uso de Fontes Web e Ícones Personalizados 
 
Este exemplo demonstra como incorporar fontes web e ícones personalizados em uma 
página. Aqui foram utilizadas fontes do Google Fonts e ícones da biblioteca Font Awesome para 
ilustrar essa funcionalidade. 
 
<!DOCTYPE html> 
<html> 
<head> 
 <title>Uso de Fontes Web e Ícones Personalizados</title> 
 <!-- Link para fonte do Google Fonts --> 
 <link rel="stylesheet" 
href="https://fonts.googleapis.com/css2?family=Roboto&display=swap"> 
 <!-- Link para a biblioteca de ícones Font Awesome --> 
 
 
 
 
 
 
63 
 <link rel="stylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/5.15.4/css/all.min.css"> 
 
 <style> 
 body { 
 font-family: 'Roboto', sans-serif; /* Usando a fonte do 
Google Fonts */ 
 text-align: center; 
 } 
 
 .icone-personalizado { 
 font-size: 48px; 
 color: #3498db; 
 } 
 </style> 
</head> 
<body> 
 <h1>Exemplo de Fontes Web e Ícones Personalizados</h1> 
 <p>Usando fonte do Google Fonts e ícones da biblioteca Font 
Awesome.</p> 
 
 <i class="fas fa-globe icone-personalizado"></i> <!-- Ícone da 
Font Awesome --> 
 
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
</body> 
</html> 
Quadro 30 – Exemplo de fontes e ícones em CSS 
Fonte: autor 
Descrição: Código fonte demonstrando um exemplo de fontes e ícones em CSS. 
 
Perceba no exemplo que foi integrada a fonte "Roboto" do Google Fonts ao definir font-
family: 'Roboto', sans-serif; no CSS. Além disso, utilizou-se um ícone da biblioteca Font Awesome ao 
adicionar a tag <i> com a classe fas fa-globe, que representa o ícone de um globo terrestre. 
Esse código pode ser colocado em um arquivo HTML e aberto em um navegador. Ele 
exibirá um cabeçalho com o texto "Exemplo de Fontes Web e Ícones Personalizados", seguido por um 
 
 
 
 
 
 
64 
ícone do globo terrestre e um parágrafo com um texto de exemplo. Certifique-se de ter uma conexão 
com a internet para carregar corretamente as fontes e a biblioteca de ícones. 
Esse exemplo ilustra como é fácil incorporar fontes web e ícones personalizados em uma 
página HTML, permitindo a personalização do design e a utilização de recursos visuais exclusivos. 
Estes exemplos práticos e estudos de caso demonstram a aplicação do CSS3 em diferentes 
áreas do desenvolvimento web, mostrando como as capacidades avançadas dessa linguagem de 
estilo podem ser usadas para criar designs modernos, interativos e funcionais. Esses casos reais 
ilustram o poder do CSS3 e seu impacto na experiência do usuário na web. 
Deste modo, chegamos ao fim desta Unidade! Agora é hora de descansar um pouco e se 
preparar para a última unidade desta disciplina. 
 
 
 
 
 
 
 
65 
5. Competência 05| Desenvolver um projeto nas linguagens HTML5 e CSS3 
Sem dúvidas, a última Unidade desta disciplina será o ponto mais alto, a culminância de 
todo o assunto até aqui estudado, pois um projeto que envolve HTML5 e CSS3 deverá ser 
desenvolvido. 
Você está pronto? O projeto consistirá em vários tópicos, cada uma com funcionalidades 
específicas e design cuidadosamente elaborado. 
Então, vamos lá! 
 
5.1 Planejamento e Estruturação do Projeto 
 
5.1.1 Definição do Propósito do Site 
Identifique o objetivo principal do site: é um portfólio, um blog, um site institucional? 
5.1.2 Levantamento de Requisitos e Conteúdo 
Para o levantamento de requisitos e conteúdo de um projeto web com 5 páginas 
utilizando HTML5 e CSS3, é importante seguir algumas etapas: 
Levantamento de Requisitos: 
1. Objetivos do Site: 
Qual o propósito principal do site? 
Quais resultados esperados com a criação do site? 
2. Público-Alvo: 
Quem são os usuários-alvo do site? 
Quais são suas necessidades e expectativas ao acessar o site? 
3. Funcionalidades Necessárias: 
Quais funcionalidades o site deve ter? Exemplos: formulários, galerias de imagens, seções 
interativas, etc. 
4. Tecnologias a Serem Utilizadas: 
Além de HTML5 e CSS3, há outras tecnologias a serem integradas, como JavaScript, 
frameworks, bibliotecas etc.? 
Levantamento de Conteúdo: 
 
 
 
 
 
 
66 
1. Identificação das 5 Páginas: 
Liste as 5 páginas que farão parte do site, como página inicial, serviços, portfólio, blog, 
contato, etc. 
2. Conteúdo para Cada Página: 
Descreva o conteúdo básico que será apresentado em cada página. 
Para a página inicial, quais são os principais destaques e informações a serem 
apresentadas? 
Para as páginas específicas, como serviços, portfólio ou blog, quais são os detalhes e 
categorias de conteúdo a serem abordados? 
3. Elementos Multimídia e Gráficos: 
Liste imagens, vídeos ou outros elementos multimídia que serão necessários em cada 
página. 
Considere o tipo de conteúdo visual que complementará o texto e a funcionalidade de 
cada página. 
4. Requisitos de Navegação e Usabilidade: 
Planeje a estrutura de navegação entre as páginas. 
Considere a usabilidade do site, garantindo uma experiência de usuário intuitiva e 
eficiente. 
5. Conteúdo Dinâmico e Atualizações Futuras: 
Avalie se o site precisará de conteúdo dinâmico, como um blog com postagens regulares, 
e como esse conteúdo será gerenciado. 
6. Requisitos de SEO: 
Identifique palavras-chave e estratégias de otimização de conteúdo para melhorar a 
visibilidade do site nos mecanismos de busca. 
Ao realizar esse levantamento detalhado de requisitos e conteúdo, você terá uma base 
sólida para começar a estruturar e criar o projeto web, garantindo que atenda às necessidades dos 
usuários e cumpra seus objetivos. 
 
5.1.3 Hierarquia de Navegação e Arquitetura de Informação 
 
 
 
 
 
 
 
67 
Ao estabelecer a hierarquia de navegação e a arquitetura de informação para um projeto 
web com 5 páginas,é essencial criar uma estrutura lógica e intuitiva para os usuários. Aqui estão 
algumas etapas para essa definição: 
Hierarquia de Navegação: 
1. Mapa do Site (Sitemap): 
Crie um mapa visual ou listagem hierárquica de todas as páginas do site, mostrando a 
relação entre elas. 
Identifique a página inicial e as principais páginas de navegação. 
2. Menu de Navegação Principal: 
Defina os itens do menu principal, considerando a relevância e frequência de acesso das 
páginas. 
Garanta que o menu seja claro, conciso e de fácil compreensão para os usuários. 
3. Navegação Contextual ou Secundária: 
Para páginas específicas, como o portfólio, serviços ou blog, planeje uma navegação 
secundária ou contextual para acessar categorias ou subseções. 
Arquitetura de Informação: 
1. Organização e Agrupamento de Conteúdo: 
Agrupe páginas ou seções relacionadas para facilitar a localização do conteúdo. 
Mantenha uma lógica clara na disposição das páginas, evitando submenus 
excessivamente profundos. 
2. Rotas de Navegação Alternativas: 
Considere a inclusão de links internos para guiar os usuários para outras seções relevantes 
dentro das páginas. 
Utilize elementos visuais ou de design para destacar caminhos de navegação alternativos. 
3. Priorização do Conteúdo: 
Dê destaque às páginas ou seções mais importantes, colocando-as em posições 
estratégicas na hierarquia de navegação. 
5.2 Desenvolvimento das Páginas 
 
 
 
 
 
 
 
68 
5.2.1 Codificação em HTML5 e Estruturação do Conteúdo 
 
Ao realizar a codificação em HTML5 e estruturar o conteúdo para um projeto web com 5 
páginas, é fundamental seguir as melhores práticas e utilizar as tags semânticas do HTML5 para uma 
organização clara e acessível do conteúdo. Aqui estão os passos essenciais: 
Estruturação do Conteúdo: 
1. Criar Arquivos HTML Separados para Cada Página: 
Crie um arquivo HTML distinto para cada página do seu site. 
2. Utilizar Tags Semânticas do HTML5: 
Faça uso adequado de tags semânticas como <header>, <nav>, <main>, <section>, 
<article>, <footer>, entre outras, para estruturar o conteúdo de forma significativa. 
3. Organização Hierárquica do Conteúdo: 
Estruture o conteúdo de cada página de forma hierárquica, dividindo-o em seções lógicas 
e identificáveis. 
Elementos Essenciais do HTML5: 
1. Definir o Doctype e Codificação: 
Inicie cada arquivo HTML com <!DOCTYPE html> para definir que se trata de um 
documento HTML5 e especifique a codificação usando <meta charset="UTF-8">. 
2. Estrutura Básica de uma Página HTML: 
Cada página deve conter elementos básicos como <html>, <head> (com metadados, 
títulos e links para estilos e scripts), e <body> (onde todo o conteúdo visível do site será colocado). 
3. Conteúdo Semântico: 
Utilize tags semânticas para diferenciar entre cabeçalhos (<h1>, <h2>, etc.), parágrafos 
(<p>), listas (<ul>, <ol>, <li>), entre outros. 
4. Incorporação de Elementos Multimídia: 
Integre imagens <img>, vídeos <video> ou áudios <audio> quando necessário, utilizando 
os atributos adequados para descrição e acessibilidade. 
5. Links e Navegação: 
Use <a> para criar links internos e externos, garantindo uma navegação suave entre as 
páginas. 
 
 
 
 
 
 
69 
Uso de Classes e IDs: 
1. Identificar Elementos com Classes e IDs: 
Aplique classes e IDs de forma lógica e significativa para estilização posterior com CSS, 
quando necessário. 
2. Separar Estilo e Estrutura: 
Mantenha o CSS separado do HTML, colocando-o em arquivos externos para uma melhor 
organização e manutenção. 
Ao seguir esses passos durante a codificação em HTML5 e a estruturação do conteúdo, 
você estará criando uma base sólida para o desenvolvimento do seu projeto web, o que facilitará a 
estilização e o funcionamento do site utilizando CSS3 e outras tecnologias complementares. 
5.2.2 Estilização com CSS3 
Ao estilizar um projeto web com CSS3, é crucial utilizar as capacidades avançadas dessa 
linguagem para criar um design atrativo e responsivo. Verifique os passos abaixo: 
 
Organização do CSS: 
1. Criar um Arquivo CSS Externo: 
Separe o código CSS em um arquivo externo para melhor organização e facilidade de 
manutenção. Conecte esse arquivo HTML usando <link> na seção <head>. 
2. Comentários e Organização: 
Utilize comentários para explicar seções específicas de código e organizar estilos por 
seções (por exemplo, cabeçalho, navegação, conteúdo, rodapé). 
Utilização de Recursos Avançados do CSS3: 
1. Seletores Avançados: 
Faça uso de seletores avançados, como seletores de descendentes, seletores de classes, 
pseudo-classes e pseudo-elementos para estilizar elementos de forma mais específica. 
2. Layout Responsivo: 
Utilize técnicas como Flexbox e Grid Layout para criar layouts responsivos que se ajustem 
automaticamente a diferentes tamanhos de tela. 
3. Estilização de Tipografia: 
 
 
 
 
 
 
70 
Aproveite recursos de CSS3 para estilizar fontes, tamanhos de texto, espaçamento entre 
letras e linhas (por exemplo, font-family, font-size, line-height, letter-spacing). 
4. Estilização de Elementos Visuais: 
Aplique estilos a elementos visuais como cores, fundos, bordas, sombras, gradientes e 
transições para criar uma estética visual atraente. 
5. Animações e Transições: 
Utilize propriedades como animation e transition para criar animações suaves e 
transições de elementos, proporcionando uma experiência interativa e dinâmica aos usuários. 
Ao seguir esses passos e utilizar as capacidades avançadas do CSS3 de forma eficiente, 
você poderá criar um design visualmente atraente e responsivo para seu projeto web, 
proporcionando uma experiência de usuário de alta qualidade. 
5.2.3 Implementação de Funcionalidades Específicas 
Integre formulários de contato, galerias de imagens, carrosséis, menus de navegação 
interativa, entre outros elementos dinâmicos. 
Faça uso de recursos avançados do HTML5, como tags de vídeo, áudio e elementos de 
formulário, quando apropriado. Veja aqui alguns passos: 
1. Formulários e Validação: 
1. Estruturação de Formulários: 
Utilize HTML5 para criar formulários estruturados e semânticos, aproveitando os novos 
tipos de campos disponíveis (como <input type="email">, <input type="tel">, etc.). 
2. Validação de Dados: 
Implemente validações de entrada de dados usando recursos nativos do HTML5 para 
garantir que os dados enviados pelos usuários sejam corretos e seguros. 
3. Elementos Multimídia: 
1. Incorporação de Vídeos e Áudios: 
Utilize tags <video> e <audio> do HTML5 para incorporar conteúdo multimídia, 
considerando diferentes formatos e codecs para garantir a compatibilidade. 
2. Controles e Personalização: 
Implemente controles personalizados para vídeos e áudios, se necessário, usando 
JavaScript e CSS para criar uma experiência de usuário mais interativa. 
 
 
 
 
 
 
71 
4. Animações e Efeitos Visuais: 
1. CSS3 para Animações: 
Utilize propriedades do CSS3, como animation e transition, para criar animações e efeitos 
visuais elegantes em elementos do site. 
2. Bibliotecas de Animação: 
Considere o uso de bibliotecas JavaScript, como GreenSock (GSAP) ou Anime.js, para criar 
animações complexas com mais facilidade. 
5.3 Começando o projeto 
Nos tópicos anteriores desta Unidade, foram tratados todos os assuntos e sessões que 
serão relevantes para o projeto. No entanto, a partir de agora, o projeto tomará corpo, na prática. 
Deste modo, observe atentamente cada detalhe nos tópicos a seguir, pois a junção de 
todos os “esqueletos”, ou seja, códigos base, darão toda a sustentabilidade necessária para que este 
projeto flua corretamente. 
Está pronto para mergulhar na codificação? 
 
5.3.1 Página inicial (index.html) 
 
Sem dúvida, a página inicial é a página mais importante do projeto, pois é o cartão de 
visita, concorda? 
Deste modo, preste bastante atenção no código exemplo, disponibilizado abaixo, pois ele 
é a primeira parte do esqueleto para que você implemente o projetodo seu jeito: 
 
<!DOCTYPE html> 
<html lang="pt-br"> 
 
<head> 
 <meta charset="UTF-8"> 
 <meta name="viewport" content="width=device-width, initial-
scale=1.0"> 
 <title>Página Inicial - Meu Site</title> 
 <link rel="stylesheet" href="styles.css"> 
 <!-- Adicione outros metadados, como descrição, palavras-chave, 
etc., conforme necessário --> 
</head> 
 
 
 
 
 
 
 
72 
<body> 
 <header> 
 <nav> 
 <ul> 
 <li><a href="index.html">Início</a></li> 
 <li><a href="servicos.html">Serviços</a></li> 
 <li><a href="portfolio.html">Portfólio</a></li> 
 <li><a href="contato.html">Contato</a></li> 
 <!-- Adicione links para outras páginas do site no 
menu de navegação --> 
 </ul> 
 </nav> 
 </header> 
 
 <main> 
 <section class="hero"> 
 <h1>Bem-vindo ao Meu Site</h1> 
 <p>Um lugar incrível para descobrir e explorar.</p> 
 <a href="servicos.html" class="btn">Nossos Serviços</a> 
 </section> 
 
 <section class="about"> 
 <h2>Sobre Nós</h2> 
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing 
elit. Nulla vitae justo nec nisi dapibus varius.</p> 
 <!-- Adicione mais informações sobre a empresa ou projeto 
--> 
 </section> 
 
 <!-- Outras seções e conteúdos podem ser adicionados conforme 
necessário --> 
 </main> 
 
 <footer> 
 <p>&copy; 2023 Meu Site. Todos os direitos reservados.</p> 
 </footer> 
</body> 
 
</html> 
 Quadro 31 – Exemplo da página index.html do projeto 
Fonte: autor 
Descrição: Código fonte demonstrando um exemplo da página principal do projeto. 
 
5.3.2 Páginas da sessão de conteúdo 
 
As páginas de sessão de conteúdo são aquelas que estão linkadas à página principal, ou 
seja, são aquelas que detalham um determinado conteúdo ou sessão da página. 
 
 
 
 
 
 
73 
Como exemplo, serão disponibilizados códigos base da sessão “Serviços” e “Contato”. 
Estes códigos, assim como o código da página principal, devem servir de parâmetro para 
que você implemente e desenvolva de acordo com o seu próprio projeto, ok? 
 
Ficou com dúvida? Envie a sua pergunta para o fórum de dúvidas desta Unidade! 
 
Exemplo de servicos.html: 
 
<!DOCTYPE html> 
<html lang="pt-br"> 
 
<head> 
 <meta charset="UTF-8"> 
 <meta name="viewport" content="width=device-width, initial-
scale=1.0"> 
 <title>Nossos Serviços - Meu Site</title> 
 <link rel="stylesheet" href="styles.css"> 
 <!-- Adicione outros metadados, como descrição, palavras-chave, 
etc., conforme necessário --> 
</head> 
 
<body> 
 <header> 
 <!-- Menu de navegação (mesmo para todas as páginas) --> 
 </header> 
 
 <main> 
 <section class="services"> 
 <h1>Nossos Serviços</h1> 
 <p>Aqui estão os serviços que oferecemos:</p> 
 <ul> 
 <li>Serviço 1</li> 
 <li>Serviço 2</li> 
 <li>Serviço 3</li> 
 <!-- Adicione uma lista de serviços oferecidos --> 
 </ul> 
 </section> 
 
 <section class="pricing"> 
 <h2>Nossos Preços</h2> 
 <p>Veja nossos planos e preços:</p> 
 <ul> 
 <li>Plano A</li> 
 <li>Plano B</li> 
 <li>Plano C</li> 
 
 
 
 
 
 
74 
 <!-- Adicione detalhes sobre os planos e preços --> 
 </ul> 
 </section> 
 
 <!-- Outras seções de conteúdo sobre os serviços --> 
 </main> 
 
 <footer> 
 <!-- Rodapé (mesmo para todas as páginas) --> 
 </footer> 
</body> 
 
</html> 
Quadro 32 – Exemplo da página servicos.html do projeto 
Fonte: autor 
Descrição: Código fonte demonstrando um exemplo da página de serviços do projeto. 
 
Exemplo de contato.html 
<!DOCTYPE html> 
<html lang="pt-br"> 
 
<head> 
 <!-- Meta tags, título e link para folha de estilos --> 
</head> 
 
<body> 
 <header> 
 <!-- Menu de navegação --> 
 </header> 
 
 <main> 
 <section class="contact"> 
 <h1>Entre em Contato</h1> 
 <p>Entre em contato conosco:</p> 
 <form action="/enviar-contato" method="post"> 
 <label for="name">Nome:</label> 
 <input type="text" id="name" name="name" required> 
 
 <label for="email">Email:</label> 
 <input type="email" id="email" name="email" required> 
 
 <label for="message">Mensagem:</label> 
 <textarea id="message" name="message" 
required></textarea> 
 
 <button type="submit">Enviar</button> 
 </form> 
 </section> 
 </main> 
 
 
 
 
 
 
75 
 
 <footer> 
 <!-- Rodapé --> 
 </footer> 
</body> 
 
</html> 
Quadro 33 – Exemplo da página contato.html do projeto 
Fonte: autor 
Descrição: Código fonte demonstrando um exemplo da página de contato do projeto. 
 
Lembre-se de personalizar o conteúdo de cada página, bem como criar as que forem 
necessárias e verificar os detalhes do formulário de contato. Além disso, adapte as classes e IDs 
conforme necessário para estilização com CSS. 
Deste modo, o próximo passo é conhecer os modelos referentes às sessões de conteúdo 
mais específicas, como galerias e portfólio. 
 
5.3.3 Páginas de Galerias e Portfólio 
 
Nestas páginas, concentramos esforços em criar galerias de imagens e exibir um portfólio 
de projetos. Faremos uso de recursos avançados de CSS3 para animações e transições suaves, dando 
vida à apresentação visual. 
Exemplo de galeria.html 
<!DOCTYPE html> 
<html lang="pt-br"> 
 
<head> 
 <meta charset="UTF-8"> 
 <meta name="viewport" content="width=device-width, initial-
scale=1.0"> 
 <title>Galeria de Imagens - Meu Site</title> 
 <link rel="stylesheet" href="styles.css"> 
 <!-- Adicione outros metadados, como descrição, palavras-chave, 
etc., conforme necessário --> 
</head> 
 
<body> 
 <header> 
 <!-- Menu de navegação (mesmo para todas as páginas) --> 
 </header> 
 
 
 
 
 
 
 
76 
 <main> 
 <section class="gallery"> 
 <h1>Galeria de Imagens</h1> 
 <div class="gallery-images"> 
 <img src="imagem1.jpg" alt="Descrição da Imagem 1"> 
 <img src="imagem2.jpg" alt="Descrição da Imagem 2"> 
 <img src="imagem3.jpg" alt="Descrição da Imagem 3"> 
 <!-- Adicione imagens e suas descrições para a galeria 
--> 
 </div> 
 </section> 
 
 <!-- Mais seções de galerias ou outros conteúdos relacionados 
--> 
 </main> 
 
 <footer> 
 <!-- Rodapé (mesmo para todas as páginas) --> 
 </footer> 
</body> 
 
</html> 
Quadro 34 – Exemplo da página galeria.html do projeto 
Fonte: autor 
Descrição: Código fonte demonstrando um exemplo da página da galeria do projeto. 
 
 
 
 
 
Exemplo de portifólio.html 
<!DOCTYPE html> 
<html lang="pt-br"> 
 
<head> 
 <!-- Meta tags, título e link para folha de estilos --> 
</head> 
 
<body> 
 <header> 
 <!-- Menu de navegação --> 
 </header> 
 
 <main> 
 <section class="portfolio"> 
 <h1>Portfólio 2</h1> 
 
 
 
 
 
 
77 
 <div class="project"> 
 <img src="projeto1.jpg" alt="Projeto 1"> 
 <h2>Projeto 1</h2> 
 <p>Descrição do Projeto 1.</p> 
 </div> 
 <div class="project"> 
 <img src="projeto2.jpg" alt="Projeto 2"> 
 <h2>Projeto 2</h2> 
 <p>Descrição do Projeto 2.</p> 
 </div> 
 <!-- Adicione informações sobre diferentes projetos --> 
 </section><!-- Mais seções de conteúdo do portfólio --> 
 </main> 
 
 <footer> 
 <!-- Rodapé --> 
 </footer> 
</body> 
 
</html> 
Quadro 35 – Exemplo da página portifolio.html do projeto 
Fonte: autor 
Descrição: Código fonte demonstrando um exemplo da página de portfólio do projeto. 
 
E aí, tudo tranquilo nesta parte do projeto? Espero que sim! Nestes dois códigos 
fornecidos acima, tem-se exemplos básicos de uma página de galeria e portfólio, dando possibilidades 
para que você implemente no projeto. 
Pronto para a próxima sessão? 
 
5.3.4 Páginas de notícias 
 
Você concorda que todo site deve conter informações atualizadas, seja no formato 
comum de notícias ou tipo um blog? Pois bem, agora você vai ver um exemplo de uma página 
exemplo de blog. 
 
Exemplo de blog.html 
<!DOCTYPE html> 
<html lang="pt-br"> 
 
 
 
 
 
 
 
78 
<head> 
 <meta charset="UTF-8"> 
 <meta name="viewport" content="width=device-width, initial-
scale=1.0"> 
 <title>Blog - Meu Site</title> 
 <link rel="stylesheet" href="styles.css"> 
 <!-- Adicione outros metadados, como descrição, palavras-chave, 
etc., conforme necessário --> 
</head> 
 
<body> 
 <header> 
 <!-- Menu de navegação (mesmo para todas as páginas) --> 
 </header> 
 
 <main> 
 <section class="blog"> 
 <h1>Blog</h1> 
 <article class="post"> 
 <h2>Título do Post 1</h2> 
 <p>Publicado em: <time datetime="2023-11-28">28 de 
Novembro de 2023</time></p> 
 <p>Conteúdo do post 1.</p> 
 </article> 
 
 <article class="post"> 
 <h2>Título do Post 2</h2> 
 <p>Publicado em: <time datetime="2023-11-25">25 de 
Novembro de 2023</time></p> 
 <p>Conteúdo do post 2.</p> 
 </article> 
 
 <!-- Adicione mais posts conforme necessário --> 
 </section> 
 </main> 
 
 <footer> 
 <!-- Rodapé (mesmo para todas as páginas) --> 
 </footer> 
</body> 
 
</html> 
Quadro 36 – Exemplo da página blog.html do projeto 
Fonte: autor 
Descrição: Código fonte demonstrando um exemplo da página de blog do projeto. 
 
Neste exemplo, cada postagem é representada por um elemento article. Cada article 
contém um título (<h2>), data de publicação (<time>), e conteúdo (<p>). A estrutura pode ser 
 
 
 
 
 
 
79 
expandida e estilizada de acordo com a complexidade e o design desejado para a página de blog 
(notícia). 
Certifique-se de personalizar o conteúdo, como títulos, datas e textos de postagens, e 
estilizar com CSS para atender ao visual desejado para seu blog. Além disso, considere adicionar 
funcionalidades extras, como comentários ou navegação entre páginas de postagens, dependendo 
das necessidades do seu blog. 
 
5.3.5 Página de Formulário de Contato 
 
A página de formulário tem o papel de permitir que o usuário entre em contato. Veja o 
exemplo do código: 
<!DOCTYPE html> 
<html lang="pt-br"> 
 
<head> 
 <meta charset="UTF-8"> 
 <meta name="viewport" content="width=device-width, initial-
scale=1.0"> 
 <title>Contato - Meu Site</title> 
 <link rel="stylesheet" href="styles.css"> 
 <!-- Adicione outros metadados, como descrição, palavras-chave, 
etc., conforme necessário --> 
</head> 
 
<body> 
 <header> 
 <!-- Menu de navegação (mesmo para todas as páginas) --> 
 </header> 
 
 <main> 
 <section class="contact-form"> 
 <h1>Entre em Contato</h1> 
 <p>Use o formulário abaixo para nos enviar uma 
mensagem:</p> 
 <form action="enviar.php" method="POST"> 
 <label for="name">Nome:</label> 
 <input type="text" id="name" name="name" required> 
 
 <label for="email">Email:</label> 
 <input type="email" id="email" name="email" required> 
 
 <label for="message">Mensagem:</label> 
 
 
 
 
 
 
80 
 <textarea id="message" name="message" 
required></textarea> 
 
 <button type="submit">Enviar Mensagem</button> 
 </form> 
 </section> 
 </main> 
 
 <footer> 
 <!-- Rodapé (mesmo para todas as páginas) --> 
 </footer> 
</body> 
 
</html> 
Quadro 37 – Exemplo da página formulariocontato.html do projeto 
Fonte: autor 
Descrição: Código fonte demonstrando um exemplo da página de formulário de contato do projeto. 
 
Neste exemplo, o formulário é representado por um elemento <form>, com campos para 
nome, email e mensagem. O atributo action no elemento <form> deve ser substituído pelo URL do 
script que processará os dados do formulário. O método usado para enviar os dados é POST, mas 
pode ser alterado para GET conforme a necessidade. 
 
Lembre-se de ajustar os campos do formulário conforme suas necessidades específicas. 
Além disso, para que o contato realmente seja estabelecido, é crucial criar um script de back-end 
para processar os dados do formulário (como enviar um email) ou armazená-los em um banco de 
dados. Essa lógica de back-end geralmente é feita com PHP, Node.js, Python, entre outras linguagens, 
dependendo do ambiente de desenvolvimento escolhido. 
 
5.3.6 Página Sobre Nós 
 
Por fim, chegamos à última página que deve ser desenvolvida no projeto, a página “sobre 
nós”! 
Veja o exemplo abaixo da página sobrenos.html: 
 
<!DOCTYPE html> 
<html lang="pt-br"> 
 
 
 
 
 
 
81 
 
<head> 
 <meta charset="UTF-8"> 
 <meta name="viewport" content="width=device-width, initial-
scale=1.0"> 
 <title>Sobre Nós - Meu Site</title> 
 <link rel="stylesheet" href="styles.css"> 
 <!-- Adicione outros metadados, como descrição, palavras-chave, 
etc., conforme necessário --> 
</head> 
 
<body> 
 <header> 
 <!-- Menu de navegação (mesmo para todas as páginas) --> 
 </header> 
 
 <main> 
 <section class="about-us"> 
 <h1>Sobre Nós</h1> 
 <p>Somos uma equipe apaixonada por criar soluções 
inovadoras.</p> 
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing 
elit. Sed euismod nulla et turpis tincidunt, eget tristique justo 
sodales. Ut ut velit eros. Vestibulum tristique augue vel leo cursus 
auctor. Duis ullamcorper elit quis elit eleifend, in consequat libero 
aliquam.</p> 
 <p>Fusce vehicula velit non ipsum accumsan, sit amet 
consectetur elit molestie. Suspendisse potenti. Morbi sit amet neque 
vitae eros pretium ullamcorper.</p> 
 <!-- Adicione informações sobre a empresa, equipe, 
valores, etc. --> 
 </section> 
 </main> 
 
 <footer> 
 <!-- Rodapé (mesmo para todas as páginas) --> 
 </footer> 
</body> 
 
</html> 
Quadro 37 – Exemplo da página sobrenos.html do projeto 
Fonte: autor 
Descrição: Código fonte demonstrando um exemplo da página sobre nós do projeto. 
 
Neste exemplo, a página "Sobre Nós" contém uma breve descrição sobre a equipe ou 
empresa. Você pode inserir informações como missão, visão, valores, história da empresa, membros 
da equipe, entre outros detalhes relevantes. 
 
 
 
 
 
 
82 
Certifique-se de personalizar o conteúdo para refletir as informações específicas sobre a 
equipe ou empresa que deseja compartilhar. Além disso, estilize a página usando CSS para garantir 
que ela se alinhe visualmente com o restante do site. 
Então, caro estudante. O que achou deste modelo de projeto? 
Seguindo todos os tópicos propostos nesta Unidade, tem-se informações suficientes para 
desenvolver o projeto. Lembrando que é de suma importância ter todo o entendimento necessário 
das Unidades anteriores, pois nelas, fundamenta-se o conteúdo necessário. 
 
Importante! Na videoaula desta 5ª Unidade, farei um resumo e darei algumas dicas 
importantes para o projeto. 
 
 
 
 
 
 
 
 
 
83 
Conclusão 
Prezado Estudante, 
Durante as cinco Unidadesda disciplina Programação em Novas Tecnologias Web, você 
teve a oportunidade de explorar os conceitos fundamentais das linguagens HTML5 e CSS3. Além 
disso, abordamos o funcionamento da web e sua história, proporcionando uma base importante para 
a compreensão do tema. 
É crucial entender que os estudos realizados até o momento são apenas o começo de sua 
jornada, uma vez que as linguagens computacionais estão sujeitas a mudanças e atualizações 
contínuas durante sua evolução. 
Por fim, o conteúdo deste ebook visa introduzi-lo tecnicamente nesse empolgante campo 
profissional, apresentando de forma didática informações que podem contribuir para o início ou 
aprimoramento de sua carreira na área de informática, especialmente no desenvolvimento de 
aplicações para a web. 
Desejo-lhe muito sucesso e aguardo por futuras oportunidades de aprendizado juntos. 
 
 
 
 
 
 
 
84 
Referências 
BARROS, Thiago. Internet completa 44 anos; relembre a história da web. 2013. Disponível em: 
<https://www.techtudo.com.br/noticias/2013/04/internet-completa-44-anos-relembre-historia-da-
web.ghtml> Acesso em: 10 ago. 2023. 
EDITORA ATENA. Tudo o que você usa foi pensado por alguém: Conheça a história da internet. 2022. 
Disponível em: <https://www.atenaeditora.com.br/blog/tudo-o-que-voce-usa-foi-pensado-por-
alguem-conheca-a-historia-da-internet> Acesso em 04 set. 2023. 
HOSTINGER TUTORIAIS. O Que é um Ambiente de Desenvolvimento? Como ele Difere de um 
Ambiente de Desenvolvimento Integrado (IDE)?. 2023. Disponível em: 
<https://www.hostinger.com.br/tutoriais/ambiente-de-desenvolvimento> Acesso em: 01 out. 2023 
MOZILLA. HTML: Linguagem de Marcação de Hipertexto. 2023. Disponível em: 
<https://developer.mozilla.org/pt-BR/docs/Web/HTML> Acesso em: 03 set. 2023. 
SILVA, M. S. Fundamentos de HTML5 e CSS3. 1ª. ed. [S.l.]: Novatec, v. I, 2015. 
W3 SCHOOLS. Aprenda a Codificar. 2023. Disponível em <https://www.w3schools.com/> Acesso em 
10 nov. 2023. 
 
https://www.hostinger.com.br/tutoriais/ambiente-de-desenvolvimento
https://developer.mozilla.org/pt-BR/docs/Web/HTML
https://www.w3schools.com/
 
 
 
 
 
 
85 
 
Minicurrículo do Professor 
 
Witalo Diego Matias Nunes 
 
Pós-graduado em Docência para a Educação Profissional e Tecnológica pelo Instituto 
Federal do Espírito Santo (IFES) e graduado em Gestão da Tecnologia da Informação pela 
Universidade do Sul de Santa Catarina (UNISUL), é professor da Escola Técnica Estadual Professor 
Antônio Carlos Gomes - ETEPAC do curso de Desenvolvimento de Sistemas EAD. 
Possui experiência como consultor em informática desde 1999, atuando nos campos de 
redes, sistemas operacionais e helpdesk.