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

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 identifica