Apostila HTML e CSS Impressionador Oficial

Prévia do material em texto

Curso Completo de HTML e CSS da Hashtag 
Programação
HTML e CSS
IMPRESSIONADOR
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
SUMÁRIO
MÓDULO 2 BOA VINDAS E CONFIGURAÇÕES INICIAIS
01
02
03
O QUE É DESENVOLVIMENTO WEB
BAIXANDO E CONFIGURANDO NOSSO EDITOR DE CÓDIGOS
2 DICAS PARA TODO PROGRAMADOR
005
009
019
2
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
MÓDULO 3 INTRODUÇÃO AO HTML
01
02
03
04
O QUE É HTML
ESTRUTURA DE UM DOCUMENTO HTML
ELEMENTOS DE TEXTO
ÊNFASE, IMPORTÂNCIA E FORMATAÇÃO DE TEXTOS
027
028
036
046
05 LISTAS ORDENADAS E NÃO ORDENADAS 053
06 HIPERLINKS 057
07 IMAGENS E SEUS ATRIBUTOS NO HTML 069
08 FERRAMENTAS DO PROGRAMADOR 073
09
10
11
12
DESAFIO 1 – APRESENTANDO O DESAFIO
DESAFIO 1 – CONSTRUINDO O DESAFIO DO ZERO
DESAFIO 2 – HOME DO HASHTAG TRENAMENTOS
DESAFIO 2 – CRIANDO O CABEÇALHO
075
078
085
087
13 DESAFIO 2 – CRIANDO A SEÇÃO HERO 094
14 DESAFIO 2 – CRIANDO A SEÇÃO CONTEÚDOS GRATUITOS 097
15 DESAFIO 2 – CRIANDO A SEÇÃO DIFERENCIAIS 102
16 DESAFIO 2 – CRIANDO A SEÇÃO O QUE FALAM 108
17 DESAFIO 2 – CRIANDO A SEÇÃO NA MÍDIA 110
18 DESAFIO 2 – CRIANDO A SEÇÃO BLOG DA HASHTAG 111
19 DESAFIO 2 – CRIANDO A SEÇÃO COM AJUDAR 116
20 DESAFIO 2 – CRIANDO A SEÇÃO MINICURSO 118
21 DESAFIO 2- CRIANDO O RODAPÉ 119
SUMÁRIO
MÓDULO 4 INTRODUÇÃO AO CSS
3
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
01
02
03
04
O QUE É CSS
AS TRÊS FORMAS DE ESCREVER CSS
SELETORES NO CSS
COMBINANDO SELETORES
127
128
138
143
05 ESTILIZANDO TEXTOS 146
06 TRABALHANDO COM CORES 151
07 ESTILIZANDO HIPERLINKS 156
08 DESAFIO 1 – FORMATANDO UMA PÁGINA EM HTML 159
09
10
11
12
DESAFIO 1 – RESOLVENDO O DESAFIO
DESAFIO 2- FORMATANDO A HOME DA HASHTAG
DESAFIO 2 – FORMATANDO O CABEÇALHO
DESAFIO 2 – FORMATANDO A SEÇÃO HERO
161
166
167
170
13 DESAFIO 2 – FORMATANDO A SEÇÃO CONTEÚDOS GRATUITOS 172
14 DESAFIO 2 – FORMATANDO A SEÇÃO DIFERENCIAIS 173
15 DESAFIO 2 – FORMATANDO A SEÇÃO O QUE FALAM 179
16 DESAFIO 2 – FORMATANDO A SEÇÃO NA MÍDIA 180
17 DESAFIO 2 – FORMATANDO A SEÇÃO BLOG HASHTAG 181
18 DESAFIO 2 – FORMATANDO A SEÇÃO COMO AJUDAR 184
19 DESAFIO 2 – FORMATANDO A SEÇÃO MINICURSO 186
20 DESAFIO 2 – FORMATANDO O RODAPÉ 187
MÓDULO 5 APROFUNDANDO NO HTML
01
02
03
04
APRESENTAÇÃO DO MÓDULO
CITAÇÕES, ABREVIAÇÕES E DETALHES DE CONTATO
CÓDIGOS E DATAS
ENTRANDO MAIS A FUNDO NA ESTRUTURA DOS DOCUMENTOS
190
191
195
198
05 FORMULÁRIOS 201
06 TABELAS 206
SUMÁRIO
MÓDULO 5 APROFUNDANDO NO HTML
4
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
07
08
09
10
IFRAMES
DESAFIO 1 – APRESENTANDO O DESAFIO
DESAFIO 1 – CONSTRUINDO JUNTOS
DESAFIO 2 – EXPLICANDO AS NOVIDADES
212
216
217
225
11 DESAFIO 2 – COMPLETANDO O CABEÇALHO 226
12 DESAFIO 2 – COMPLETANDO A SEÇÃO HERO 227
13 DESAFIO 2 – COMPLETANDO A SEÇÃO CONTEÚDOS GRATUITOS 230
14 DESAFIO 12– COMPLETANDO A SEÇÃO DIFERENCIAIS 232
15
16
17
18
DESAFIO 2 – COMPLETANDO A SEÇÃO O QUE FALAM E NA MÍDIA
DESAFIO 2- COMPLETANDO A SEÇÃO BLOG DA HASHTAG
DESAFIO 2 – COMPLETANDO A SEÇÃO COMO AJUDAR
DESAFIO 2 – COMPLETANDO A SEÇÃO MINICURSO
234
236
237
238
19 DESAFIO 2 – COMPLETANDO O RODAPÉ 240
Módulo 2
BOAS VINDAS E CONFIGURAÇÕES INICIAIS
BOAS VINDAS E CONFIGURAÇÕES INICIAIS
BOAS VINDAS E CONFIGURAÇÕES INICIAIS
5
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Módulo 2 – O que é Desenvolvimento Web (1 / 4)
000 000
6
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
O desenvolvimento web é o processo de criar e manter sites e aplicativos que você acessa na internet. Envolve coisas como projetar 
como o site vai parecer, escrever o código para torná-lo funcional, cuidar do armazenamento de informações e garantir que ele 
funcione bem em diferentes tipos de computadores e navegadores.
Existem duas partes principais no desenvolvimento web:
• Front-end: É a parte visível do site, onde você interage. Envolve o layout, cores e botões que você vê ao navegar em um site.
• Back-end: É a parte invisível que faz o site funcionar nos bastidores. Aqui, são tratadas coisas como armazenamento de dados, 
autenticação e lógica do servidor, usando linguagens de programação e bancos de dados.
Além disso, é importante configurar um banco de dados para armazenar informações do site, como dados de usuários, produtos ou 
conteúdo.
• Banco de Dados: O banco de dados é uma parte crucial do desenvolvimento web. É onde todas as informações do site, como 
dados de usuários, produtos ou conteúdo, são armazenadas e gerenciadas.
Essas três partes juntas completam o processo de desenvolvimento web, que abrange desde o planejamento inicial até a 
manutenção contínua do site.
Módulo 2 – O que é Desenvolvimento Web (2 / 4)
000 000
7
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Páginas Estáticas:
Páginas estáticas são páginas da web que contêm conteúdo fixo e não mudam a menos que um desenvolvedor intervenha 
manualmente para fazer alterações no código-fonte. Essas páginas são rápidas para carregar, pois o conteúdo permanece 
inalterado e pode ser facilmente cacheado pelos servidores web. São relativamente simples de criar, uma vez que não envolvem a 
complexidade de um banco de dados ou de lógica de programação para gerar conteúdo dinâmico. Isso as torna adequadas para 
sites pequenos ou que não precisam de atualizações frequentes. Exemplos comuns de páginas estáticas incluem páginas de 
informações, como páginas de contato, currículos ou sites de portfólio pessoal.
Páginas Dinâmicas:
Páginas dinâmicas, por outro lado, exibem conteúdo que pode ser gerado ou atualizado em tempo real com base em interações do 
usuário ou dados armazenados em um banco de dados. Essas páginas são altamente interativas e permitem recursos como 
formulários, login de usuário, carrinhos de compras em lojas online e comentários em blogs. Elas são capazes de exibir conteúdo 
personalizado para diferentes usuários, com base em preferências ou informações de perfil. A criação de páginas dinâmicas é mais 
complexa, envolvendo programação e o uso de linguagens como PHP, Python, Ruby, JavaScript e bancos de dados para gerenciar 
informações em tempo real. São ideais para sites maiores, como redes sociais, lojas online, portais de notícias, onde o conteúdo 
precisa ser atualizado constantemente.
Módulo 2 – O que é Desenvolvimento Web (3 / 4)
000 000
8
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Front-end, também conhecido como desenvolvimento front-end ou programação front-end, refere-se à parte de 
um site ou aplicativo web que os usuários finais veem e interagem diretamente. É a interface do usuário e a 
experiência visual que um site proporciona. O front-end é construído principalmente com três tecnologias 
principais:
HTML (HyperText Markup Language): O HTML é a espinha dorsal de uma página web. Ele é usado para estruturar 
o conteúdo da página, como texto, imagens, links e outros elementos. Cada elemento HTML é marcado com tags, 
como <div>, <p>, <img>, e assim por diante. Essas tags definem a estrutura e a hierarquia da página.
CSS (Cascading Style Sheets): O CSS é usado para estilizar e formatar a página web. Ele controla o layout, as cores, 
as fontes e o posicionamento de todos os elementos HTML em uma página. Com CSS, você pode definir o aspecto 
visual do site, tornando-o atraente e acessível.
JavaScript: O JavaScript é uma linguagem de programação que adiciona interatividade e dinamismo a uma 
página web. Com JavaScript, você pode criar efeitos de animação, validar formulários, responder a eventos do 
usuário e atualizar o conteúdo da página em tempo real. Ele permite que as páginas web se comportem de 
maneira mais semelhante a aplicativos de desktop.
Em resumo, o front-end é a camada de um site que lida com a apresentação e a interação com o usuário. O HTML 
estrutura o conteúdo, o CSS estiliza e formata a página, e o JavaScript adiciona interatividade e funcionalidade 
dinâmica. Juntos, essas tecnologias permitem que os desenvolvedores criem interfacesde usuário atraentes e 
funcionais para os visitantes da web.
Módulo 2 – O que é Desenvolvimento Web (4 / 4)
000 000
9
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Existem vários tipos de desenvolvedores, cada um com habilidades e responsabilidades específicas. Aqui estão alguns dos tipos 
mais comuns de desenvolvedores:
Desenvolvedor Front-End: Os desenvolvedores front-end são responsáveis pela criação da interface do usuário de um site ou 
aplicativo web. Eles usam tecnologias como HTML, CSS e JavaScript para desenvolver a parte visível e interativa de uma página 
web. Esses desenvolvedores garantem que o site seja atraente, responsivo e fácil de usar.
Desenvolvedor Back-End: Os desenvolvedores back-end trabalham na parte do servidor de um site ou aplicativo. Eles lidam com 
o processamento de dados, a lógica de negócios e a comunicação com bancos de dados. Linguagens como PHP, Python, Ruby, 
Java e Node.js são comumente usadas no desenvolvimento back-end.
Desenvolvedor Full-Stack: Um desenvolvedor full-stack é alguém que possui habilidades tanto de front-end quanto de back-end 
e pode trabalhar em todas as camadas de um projeto web. Eles têm um amplo conhecimento das tecnologias e geralmente 
podem gerenciar um projeto por completo, desde a criação da interface do usuário até a configuração do servidor.
Desenvolvedor de banco de dados: Especializado em projetar e gerenciar bancos de dados, garantindo a eficiência e segurança 
no armazenamento de informações. Trabalha em conjunto com desenvolvedores back-end. Os desenvolvedores de banco de 
dados podem usar sistemas de gerenciamento de bancos de dados (SGBDs) como MySQL, PostgreSQL, SQL Server ou Oracle.
Módulo 2 – Baixando e Configurando nosso editor de códigos (1 / 10)
000 000
10
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Visual Studio Code
O Visual Studio Code (VS Code) é um editor de código amplamente utilizado para desenvolver sites e aplicativos web usando HTML 
e CSS. Ele oferece uma interface amigável e funcionalidades que facilitam a escrita e edição de código, como realce de sintaxe, 
sugestões de código e integração com extensões que agilizam o desenvolvimento web. O VS Code é altamente personalizável e é 
uma escolha popular entre desenvolvedores front-end devido à sua eficiência e suporte à comunidade.
Baixando o VS Code
1. Acesse o Site Oficial: Abra seu navegador da web e vá para o site oficial do Visual Studio Code em 
https://code.visualstudio.com/.
2. Download: Clique no botão "Download" de acordo com o sistema operacional do seu computador na página inicial do site. No 
nosso caso estaremos instalando para Windows.
https://code.visualstudio.com/
Módulo 2 – Baixando e Configurando nosso editor de códigos (2 / 10)
000 000
11
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
3. Baixe o Arquivo de Instalação: O navegador irá baixar um arquivo de instalação com extensão ".exe". Aguarde até que o 
download seja concluído.
4. Inicie o Instalador: Após o download, clique duas vezes no arquivo ".exe" baixado para iniciar o instalador do VS Code.
5. Aceite os Termos de Uso: Você verá uma tela inicial do instalador. Clique em "Next" (Próximo) para continuar.
6. Selecione as Opções de Instalação: Escolha o local onde deseja instalar o VS Code e selecione as opções adicionais, como 
adicionar ícones à área de trabalho e associar arquivos ".code" ao VS Code. Em seguida, clique em "Next" (Próximo).
7. Selecione Componentes Adicionais (Opcional): O instalador pode oferecer a opção de instalar componentes adicionais, 
como o Git. Se desejar, selecione as opções desejadas e clique em "Next" (Próximo).
Ao chegar na tela ao lado, você poderá adicionar a opção de adicionar a 
ação "Abrir com Code" que permite que você abra pastas ou arquivos 
diretamente no Visual Studio Code (VS Code) a partir do menu de 
contexto (clique com o botão direito do mouse) do Windows Explorer 
ou do gerenciador de arquivos do seu sistema operacional. Isso é 
particularmente útil quando você está trabalhando em projetos e 
deseja abrir pastas ou arquivos específicos diretamente do explorador 
de arquivos do seu sistema operacional, economizando tempo e 
simplificando o processo de desenvolvimento.
Módulo 2 – Baixando e Configurando nosso editor de códigos (3 / 10)
000 000
12
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
8. Inicie a Instalação: Clique em "Install" (Instalar) para iniciar o processo de instalação.
9. Conclua a Instalação: Após a conclusão da instalação, clique em "Finish" (Concluir) para fechar o instalador.
Agora você tem o Visual Studio Code instalado em seu computador Windows e pode começar a usá-lo para desenvolver projetos 
HTML e CSS.
Agora você irá abrir o menu iniciar do seu computador, pesquisar por VS Code e inicializar o programa.
Módulo 2 – Baixando e Configurando nosso editor de códigos (4 / 10)
000 000
13
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
As extensões no Visual Studio Code (VS Code) são módulos de software adicionais que você pode instalar para estender a funcionalidade 
padrão do editor.
Para instalar extensões no VS Code, você pode seguir estes passos:
1. Abra o VS Code.
2. Vá para a seção "Extensões" no menu lateral esquerdo (ícone de quebra-cabeça).
3. Pesquise a extensão desejada na barra de pesquisa.
4. Clique em "Instalar" na extensão que deseja adicionar.
5. Depois de instalada, você pode configurar e usar a extensão conforme necessário.
As extensões tornam o VS Code altamente flexível e adaptável às suas necessidades de desenvolvimento, permitindo que você crie um 
ambiente de desenvolvimento personalizado e eficiente.
Módulo 2 – Baixando e Configurando nosso editor de códigos (5 / 10)
000 000
14
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
As extensões no Visual Studio Code (VS Code) são módulos de software adicionais que você pode instalar para estender a funcionalidade 
padrão do editor.
Para instalar extensões no VS Code, você pode seguir estes passos:
1. Abra o VS Code.
2. Vá para a seção "Extensões" no menu lateral esquerdo (ícone de quebra-cabeça).
3. Pesquise a extensão desejada na barra de pesquisa.
4. Clique em "Instalar" na extensão que deseja adicionar.
5. Depois de instalada, você pode configurar e usar a extensão conforme necessário.
As extensões tornam o VS Code altamente flexível e adaptável às suas necessidades de desenvolvimento, permitindo que você crie um 
ambiente de desenvolvimento personalizado e eficiente.
Extensões
• Auto Rename Tag: Esta extensão é útil ao trabalhar com HTML/XML. Ela permite que você renomeie uma tag de abertura e a tag de 
fechamento correspondente automaticamente, economizando tempo e evitando erros de digitação.Exemplo: Ao renomear a tag 
<div> para <section>, a extensão também renomeará automaticamente a tag de fechamento </div> para </section>.
Módulo 2 – Baixando e Configurando nosso editor de códigos (6 / 10)
000 000
15
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
• Prettier: O Prettier é uma extensão de formatação de código que ajuda a manter seu 
código HTML, CSS e JavaScript bem formatado e consistente. Ele reformata 
automaticamente seu código de acordo com as convenções de estilo configuradas, 
facilitando a legibilidade e a colaboração em equipes.
• Color Highlight: Com esta extensão, os códigos de cores (por exemplo, #FF0000 para 
vermelho) no seu CSS ou HTML são realçados com a cor correspondente, permitindo 
uma rápida visualização das cores usadas em seu código.
• Live Server: O Live Server é uma extensão que cria um servidor web local diretamente 
do VS Code. Isso permite que você visualize e teste seu site ou aplicativo web em 
tempo real enquanto faz alterações no código, facilitando o desenvolvimento e a 
depuração. Basta clicar com o botão direito do mouse em um arquivo HTML e 
selecionar "Open with Live Server" para abrir o site no navegador. As alterações no 
código HTML são refletidas automaticamente no navegador sem a necessidade de 
atualizaçõesmanuais.
Módulo 2 – Baixando e Configurando nosso editor de códigos (7 / 10)
000 000
16
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
• HTML CSS SUPPORT: Esta extensão aprimora o suporte do VS Code para HTML e CSS, 
fornecendo sugestões de código, realce de sintaxe e atalhos para facilitar a escrita e a 
edição de código HTML e CSS. Ao digitar um seletor CSS em uma regra de estilo dentro 
de uma tag HTML, a extensão oferece sugestões automáticas de classes e IDs 
existentes.
• Image Preview: Com essa extensão, você pode visualizar imagens diretamente no 
Visual Studio Code sem a necessidade de abrir um visualizador de imagens separado. 
Basta clicar com o botão direito do mouse em um arquivo de imagem e selecionar 
"Image Preview" para ver a imagem.
• One Monokai Theme: Esta é uma extensão de tema que altera a aparência do VS Code. 
O "One Monokai Theme" aplica um esquema de cores específico ao VS Code, 
proporcionando uma experiência de desenvolvimento visualmente agradável.
Módulo 2 – Baixando e Configurando nosso editor de códigos (8 / 10)
000 000
17
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Agora vamos precisar modificar algumas configurações das extensões e para isso 
clicaremos no ícone de engrenagem:
Vamos perquisar por Default for e adicionar o Prettier como formatação padrão do nosso VS Code.
A configuração padrão do Prettier envolve as opções de 
formatação que são aplicadas automaticamente quando você 
executa o Prettier em seu código sem personalizar essas opções. 
As configurações padrão incluem coisas como a quantidade de 
indentação, estilo de quebra de linha e estilo de citação.
Módulo 2 – Baixando e Configurando nosso editor de códigos (9 / 10)
000 000
18
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
A próxima configuração é a format on save, Essa opção permite que o editor formate automaticamente o código no 
arquivo atual sempre que você o salva:
Auto on save:
Nas configurações padrão do VS Code, a ação "Salvar" ocorre automaticamente quando você:
- Altera o foco para outra janela ou aplicativo, ou seja, quando você muda para outra janela ou programa fora do VS Code.
- Fecha o arquivo ou o editor no VS Code.
Módulo 2 – Baixando e Configurando nosso editor de códigos (10 / 10)
000 000
19
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Tab size (tamanho de tabulação) refere-se ao número de espaços em branco que uma tecla "Tab" representa em um 
editor de código. Isso afeta a quantidade de espaço que é inserida quando você pressiona a tecla "Tab" ou quando o editor 
de código converte uma tabulação em espaços em branco.
A configuração do "tab size" é importante porque afeta a formatação e a legibilidade do seu código, bem como a 
consistência entre diferentes desenvolvedores que trabalham no mesmo projeto. A maioria dos editores de código 
modernos, incluindo o Visual Studio Code (VS Code), permite que você configure o tamanho da tabulação de acordo com 
suas preferências.
Por padrão, o tamanho de tabulação no VS Code é geralmente definido como 4 espaços, mas você pode personalizá-lo
Módulo 2 – 2 Dicas para todo programador (1 / 7)
000 000
20
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Fazer pesquisas no Google é uma prática essencial para programadores, pois os ajuda a acessar informações atualizadas, 
resolver problemas de maneira eficiente, aprender continuamente e se adaptar a um campo em constante evolução. Em vez
de tentar memorizar tudo, os programadores são incentivados a desenvolver habilidades de pesquisa e a aproveitar os recursos
online para se tornarem programadores mais eficazes e bem-sucedidos.
Fazer pesquisas no Google e não depender da memorização absoluta de todas as informações é uma prática importante e 
benéfica para os programadores por várias razões:
• Volume de Informações: A área da programação é vasta e está em constante evolução. Seria impossível memorizar todas
as linguagens de programação, bibliotecas, frameworks, comandos e técnicas disponíveis. Usar o Google permite acessar
rapidamente informações atualizadas.
• Eficiência: Em vez de gastar tempo tentando lembrar detalhes específicos ou sintaxes complexas, os programadores
podem usar o Google para obter respostas rápidas e continuar trabalhando de forma mais eficiente.
• Resolução de Problemas: A capacidade de pesquisa é uma habilidade valiosa na solução de problemas. Programadores
frequentemente enfrentam desafios complexos que exigem a busca de soluções online, aprendizado com a experiência de 
outros desenvolvedores e adaptação a problemas únicos.
Módulo 2 – 2 Dicas para todo programador (2 / 7)
000 000
21
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
• Aprendizado Contínuo: A programação é uma disciplina que requer aprendizado contínuo. Os programadores estão
constantemente explorando novas tecnologias e abordagens. A pesquisa online facilita a aprendizagem de novos conceitos e 
técnicas.
• Compartilhamento de Conhecimento: O compartilhamento de informações na comunidade de desenvolvedores é fundamental. Ao 
usar o Google e participar de fóruns, grupos de discussão e comunidades online, os programadores contribuem para um ecossistema
de compartilhamento de conhecimento.
• Redução de Erros: Ao verificar informações e sintaxes online, os programadores podem reduzir erros em seus códigos. Isso ajuda a 
manter a qualidade do código e a evitar problemas que podem surgir devido a erros humanos.
• Adaptação às Mudanças: A tecnologia muda rapidamente. O que era verdade hoje pode não ser verdade amanhã. Usar o Google 
permite que os programadores se adaptem às mudanças e adotem as melhores práticas mais recentes.
• Aprimoramento da Criatividade: Livres da necessidade de memorizar detalhes técnicos, os programadores podem se concentrar
mais na solução de problemas criativos e na inovação em seus projetos.
Módulo 2 – 2 Dicas para todo programador (3 / 7)
000 000
22
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Boas práticas para criar perguntas eficazes em pesquisas no Google em programação HTML e CSS:
1. Seja específico: Torne a pergunta precisa e específica.
2. Use termos-chave: Inclua palavras-chave relevantes em sua pergunta.
3. Use palavras de ação: Comece com palavras como "como" ou "o que é" para indicar que você está procurando uma explicação ou
solução.
4. Seja claro e conciso: Mantenha a pergunta simples e direta.
5. Use aspas para pesquisa exata: Se você procura uma frase específica, coloque-a entre aspas.
6. Evite perguntas genéricas: Evite perguntas amplas e vagas.
7. Revise os resultados: Ajuste sua pergunta com base nos resultados da pesquisa.
8. Use fontes confiáveis: Prefira fontes confiáveis, como documentação oficial e fóruns respeitados.
9. Seja paciente e aprenda com exemplos: Às vezes, encontrar a resposta certa leva tempo. Compreenda exemplos e raciocínios por
trás das soluções encontradas.
10. Pergunte em Inglês (se souber): Se você tem conhecimento em inglês, considere fazer suas perguntas em inglês ao usar o Google. 
Muitos recursos, tutoriais e documentações de alta qualidade estão disponíveis em inglês, o que pode ampliar seu acesso a 
informações úteis e soluções. Além disso, ajuda a se comunicar com a ampla comunidade global de desenvolvedores que 
compartilha informações em inglês.
Módulo 2 – 2 Dicas para todo programador (4 / 7)
000 000
23
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Pesquisar através de documentações CSS (Cascading Style Sheets) e HTML (Hypertext Markup Language) é fundamental para 
programadores por várias razões importantes:
• Precisão e Conformidade: As documentações são fontes oficiais e confiáveis de informações sobre as linguagens CSS e HTML. Ao 
usá-las, você garante que seu código siga as melhores práticas e padrões definidos. Isso ajuda a evitar erros e problemas de 
compatibilidade em diferentes navegadores.
• Acesso a Recursos: As documentações contêm uma vasta quantidade de informações sobre propriedades, elementos, atributose 
valores disponíveis em CSS e HTML. Isso significa que você pode descobrir recursos e funcionalidades que talvez não conhecesse de 
outra forma, permitindo que você crie páginas web mais ricas e interativas.
• Exemplos e Tutoriais: As documentações geralmente incluem exemplos de uso de propriedades e elementos, juntamente com 
descrições detalhadas. Isso é especialmente útil para aprender como aplicar estilos específicos ou criar elementos complexos em seu
código.
• Evolução das Tecnologias: As linguagens HTML e CSS estão em constante evolução. As documentações são atualizadas
regularmente para refletir as últimas mudanças e adições às linguagens. Ao consultá-las, você pode estar ciente das novidades e 
adotar as práticas mais recentes.
• Resolução de Problemas: Quando você enfrenta um problema ou desafio específico em seu código, 
as documentações podem ser uma fonte valiosa para entender como as coisas funcionam e encontrar soluções. Você pode procurar i
nformações sobre a propriedade ou elemento em questão e encontrar exemplos de uso e explicações detalhadas.
Módulo 2 – 2 Dicas para todo programador (5 / 7)
000 000
24
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
• Compatibilidade entre Navegadores: As documentações muitas vezes incluem informações sobre a compatibilidade das 
propriedades e elementos em diferentes navegadores. Isso ajuda os desenvolvedores a lidar com desafios de compatibilidade e a 
aplicar soluções específicas quando necessário.
• Aprendizado Contínuo: Para programadores, o aprendizado contínuo é essencial. As documentações proporcionam um ambiente
de aprendizado rico, onde você pode aprofundar seu conhecimento e habilidades em CSS e HTML, independentemente do seu nível
de experiência.
• Referência Rápida: As documentações são uma referência rápida e conveniente que você pode consultar sempre que tiver dúvidas
ou precisar de informações específicas. Elas estão disponíveis online e offline, o que facilita o acesso às informações quando
necessário.
As documentações oficiais do CSS e do HTML são mantidas por organizações de padronização e desenvolvimento web respeitadas. Aqui 
estão as principais fontes de documentação oficial para CSS e HTML:
Documentação Oficial do HTML (HTML5):
•W3C HTML Specification (Especificação HTML do W3C): O World Wide Web Consortium (W3C) é a organização de padronização da 
web e mantém a especificação oficial do HTML. Você pode encontrar a especificação HTML completa no site do W3C. Aqui está o link: 
W3C HTML Specification
Documentação Oficial do CSS (CSS3):
•W3C CSS Specification (Especificação CSS do W3C): O W3C também mantém a especificação oficial do CSS. Ela descreve todas as 
propriedades CSS, valores e comportamentos padrão. Você pode encontrar a especificação CSS completa no site do W3C. Aqui está o 
link: W3C CSS Specification
https://www.w3.org/TR/html52/
https://www.w3.org/Style/CSS/Overview.en.html
Módulo 2 – 2 Dicas para todo programador (6 / 7)
000 000
25
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Outras Referências Úteis:
• MDN Web Docs: Embora não seja a fonte oficial, o Mozilla Developer Network 
(MDN) fornece uma excelente documentação e tutoriais para HTML, CSS e muitas outras tecnologias web. 
É amplamente respeitado pela comunidade de desenvolvedores. Você pode encontrar a documentação do HTML aqui: MDN HTML 
Docs e a documentação do CSS aqui: MDN CSS Docs.
• W3Schools: O W3Schools é um recurso popular para aprender HTML, CSS 
e muitas outras linguagens web. Embora não seja a fonte oficial, 
é frequentemente usado por desenvolvedores iniciantes para aprender conceitos básicos e exemplos práticos. Aqui está o 
link: W3Schools HTML Tutorial e W3Schools CSS Tutorial.
Lembre-se de que a documentação oficial é a fonte mais confiável para informações técnicas detalhadas. No entanto, muitos
desenvolvedores também acham útil usar recursos como o mDN Web Docs, que oferece explicações detalhadas e exemplos práticos
em um formato acessível.
https://developer.mozilla.org/en-US/docs/Web/HTML
https://developer.mozilla.org/en-US/docs/Web/HTML
https://developer.mozilla.org/en-US/docs/Web/CSS
https://www.w3schools.com/html/
https://www.w3schools.com/css/
Módulo 2 – 2 Dicas para todo programador (7 / 7)
000 000
26
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
"QUEBRAR A CABEÇA"
Enfrentar desafios complexos e resolver problemas difíceis é uma parte fundamental da jornada de aprendizado e crescimento de um 
programador. Isso significa dedicar tempo e esforço para compreender profundamente os conceitos e tecnologias envolvidos. Às vezes, 
pode ser uma tarefa árdua e exigente, mas os benefícios são inegáveis.
Ao "quebrar a cabeça" na programação, você está fortalecendo suas habilidades de resolução de problemas e desenvolvendo um 
conhecimento sólido. Cada desafio superado é uma oportunidade para aprender algo novo e aplicar esse conhecimento em projetos
futuros.
A resolução de problemas também promove a criatividade. Você precisa pensar de forma inovadora para encontrar soluções eficazes, 
muitas vezes fora dos padrões convencionais. Essa capacidade de pensar fora da caixa é um dos traços distintivos dos programadores
experientes.
Além disso, a sensação de satisfação pessoal ao superar um desafio difícil é incomparável. A confiança em suas habilidades cresce a 
cada obstáculo superado, e essa confiança é um ativo valioso em sua carreira de programador.
No mundo real da programação, você frequentemente enfrentará problemas complexos e situações desafiadoras. Portanto, a prática
constante de resolver desafios difíceis prepara você para essas circunstâncias. Isso o torna um profissional competente e confiável, capaz
de lidar com projetos complexos e contribuir de maneira significativa para a equipe e a empresa.
Em última análise, "quebrar a cabeça" na programação é uma parte intrínseca do processo de crescimento profissional e pessoal. É uma
jornada que recompensa aqueles que estão dispostos a enfrentar desafios, aprender com eles e continuar progredindo em direção à 
excelência na programação.
Módulo 3
INTRODUÇÃO AO HTML
INTRODUÇÃO AO HTML
INTRODUÇÃO AO HTML
27
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Módulo 3 – O que é HTML? (1 / 1)
000 000
28
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
HTML, que significa Hypertext Markup Language (Linguagem de Marcação de Hipertexto), é a linguagem de marcação usada para 
criar a estrutura e o conteúdo básico de páginas da web. Em outras palavras, é a linguagem que os desenvolvedores web usam para 
criar os elementos fundamentais de uma página web, como títulos, parágrafos, imagens, links e formulários.
• Hypertext (Hipertexto): O termo "hipertexto" refere-se a um tipo de texto que contém links para outros documentos, recursos ou
partes do mesmo documento. No contexto da web, hipertexto permite a navegação não linear, onde você pode clicar em links para 
acessar informações relacionadas em diferentes partes de um documento ou em documentos separados.
• Markup (Marcação): A "marcação" em HTML refere-se ao processo de adicionar códigos e tags especiais para definir a estrutura e o 
formato do conteúdo em um documento. As tags são usadas para identificar elementos específicos, como cabeçalhos, parágrafos, 
links, imagens, etc. A marcação define como o conteúdo deve ser apresentado e interligado.
• Language (Linguagem): HTML é uma linguagem de marcação que os desenvolvedores web usam para criar e estruturar
documentos na web. É uma linguagem específica para definir a estrutura e o conteúdo de páginas da web, permitindo que os
navegadores interpretem e exibam essas páginas de maneira consistente.
Em resumo, "HTML" - "Hypertext Markup Language" é uma linguagem que permite a criação de documentos hipertexto na web, onde o 
conteúdo é estruturado e formatado usando tags de marcação que definem como o conteúdo deve ser exibido e interligado por meio
de links. É a linguagem fundamental da web que possibilita a criação de páginas da internetcom texto, imagens, links e outros 
elementos.
Módulo 3 – Estrutura de um documento HTML (1 / 8)
000 000
29
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Antes de começar a usar o editor VS Code, é altamente recomendável que 
você crie pastas organizadas para o curso. Você pode criar uma pasta para 
cada módulo ou aula específica. Isso ajudará você a manter um controle 
claro do conteúdo das aulas e a construir seus códigos de maneira 
organizada.
A organização em pastas é especialmente importante porque permite que 
você tire o máximo proveito da extensão Live Server no VS Code. Essa 
extensão permite visualizar sua página HTML no navegador em tempo real 
enquanto trabalha nela. Organizando seus arquivos em pastas separadas, 
você evita conflitos entre as páginas HTML e torna mais fácil usar o Live 
Server para visualização ao vivo.
Agora, abra o Visual Studio Code (VS Code) e, com o VS Code aberto, 
selecione a opção "Open Folder" para abrir a pasta que você criou 
anteriormente.
Módulo 3 – Estrutura de um documento HTML (2 / 8)
000 000
30
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Vamos criar um arquivo HMTL chamado index.html no VS Code, e para criar você clicará no ícone a seguir, e nomeará de 
index e utilizará a extensão ".html" :
A extensão ".html" indica que um arquivo é um documento HTML (Hypertext Markup Language). Então um arquivo com 
a extensão ".html" contém código HTML que define a estrutura e o conteúdo de uma página da web.
O nome "index" é uma convenção que se desenvolveu ao longo do tempo para identificar o arquivo principal de um site, 
a página inicial. Essa prática facilita a organização, a previsibilidade e a compatibilidade na construção de sites e na 
configuração de servidores web. Embora não seja estritamente necessário nomear o arquivo principal dessa forma, é uma 
prática recomendada para manter a consistência e facilitar o gerenciamento de sites na web.
Módulo 3 – Estrutura de um documento HTML (3 / 8)
000 000
31
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
O ponto de exclamação (!) seguido de um espaço + Enter ou Tab é frequentemente usado como um atalho para inserir 
um modelo básico de documento HTML, chamado de "esqueleto HTML" ou "boilerplate HTML".
Ao utilizar esse atalho, o editor pode automaticamente preencher o documento com o seguinte código:
Módulo 3 – Estrutura de um documento HTML (4 / 8)
000 000
32
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Vamos analisar cada parte da estrutura inicial do nosso documento HTML, e o que cada parte significa:
<!DOCTYPE html>: Esta é uma declaração que informa ao navegador que o documento está escrito em HTML5, a versão mais 
recente da linguagem HTML.
<html lang="en">: Aqui, começamos o documento HTML. A tag <html> é o elemento raiz de uma página da web e contém todo o 
conteúdo da página. O atributo lang (idioma) é definido como "en" para indicar que o idioma da página é o inglês (English). Você 
pode substituir "en" pelo código de idioma apropriado para sua página.
<head>: Dentro da tag <html>, temos a tag <head>. A seção do cabeçalho (<head>) é usada para incluir informações sobre o 
documento que não são diretamente visíveis na página, são as configurações da nossa página. Aqui estão as partes dentro do 
<head>:
• <meta charset="UTF-8" />: Essa meta tag define o conjunto de caracteres usado no documento como UTF-8, que é um padrão 
amplamente aceito para codificar caracteres em várias línguas.
• <meta name="viewport" content="width=device-width, initial-scale=1.0" />: Esta meta tag é comumente usada para tornar 
as páginas da web responsivas. Ela define a largura da viewport (a área visível da página) como igual à largura do dispositivo e 
define a escala inicial para 1.0.
• <meta http-equiv="X-UA-Compatible" content="ie=edge" />: Esta meta tag é usada para configurar o modo de 
compatibilidade do Internet Explorer. Nesse caso, está definida para "ie=edge", o que indica que o documento deve ser exibido 
no modo de edge (borda) do IE, que é o modo mais recente e compatível.
• <title>Document</title>: A tag <title> define o título da página, que é exibido na barra de título do navegador ou na guia da 
página.
<body></body>: Aqui é onde você coloca o conteúdo visível da página, como texto, imagens, links e outros elementos. O conteúdo 
que você deseja que os visitantes vejam quando acessam sua página deve ser colocado entre as tags <body>...</body>.
Módulo 3 – Estrutura de um documento HTML (5 / 8)
000 000
33
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Uma tag em HTML é uma marcação usada para definir elementos e estruturar o conteúdo de uma página da web. A 
sintaxe básica de uma tag HTML é a seguinte:
• <NomeDaTag>: É o nome da tag que define o elemento. Exemplos comuns incluem <p> para parágrafos, <a> para links 
e <img> para imagens.
• Aqui vai o conteúdo da tag: É o conteúdo que está contido dentro da tag e pode variar dependendo do tipo de tag. 
Por exemplo, em uma tag <p>, o conteúdo seria um parágrafo de texto, enquanto em uma tag <a>, o conteúdo seria o 
texto do link.
• </NomeDaTag>: É a tag de fechamento que indica o término do elemento. Geralmente, os elementos HTML são 
abertos com uma tag de abertura e fechados com uma tag de fechamento correspondente.
Atributos em HTML são informações adicionais que você pode incluir em uma tag para fornecer detalhes específicos 
sobre como um elemento deve se comportar ou ser exibido. Os atributos geralmente são especificados na forma de pares 
chave-valor e são colocados dentro da tag, com o formato:
Módulo 3 – Estrutura de um documento HTML (6 / 8)
000 000
34
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
DevTools
DevTools (F12) é um conjunto de ferramentas de desenvolvimento integradas aos navegadores que permite aos 
desenvolvedores inspecionar, depurar e otimizar páginas da web em tempo real. Pressionar a tecla F12 ou a tecla "F12" no 
teclado do seu computador em um navegador da web abre a ferramenta de desenvolvedor ou a inspeção de elementos. 
Esta é uma ferramenta poderosa que permite aos desenvolvedores e usuários examinarem o código-fonte, os estilos, os 
recursos da página e depurar problemas em uma página da web. O processo para abrir a inspeção de elementos pode 
variar ligeiramente dependendo do navegador que você está usando, mas geralmente é semelhante em todos os 
principais navegadores.
Depois de abrir a inspeção de elementos, você verá uma janela ou painel que permite inspecionar o código-fonte HTML, 
os estilos CSS, os recursos da página, depurar JavaScript e muito mais. Você pode clicar nos elementos na página para ver 
seu código-fonte, estilos e propriedades.
Módulo 3 – Estrutura de um documento HTML (7 / 8)
000 000
35
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Vamos clicar na funcionalidade "Go Live" no Visual Studio Code (VS Code), que é habilitada pela extensão "Live Server". 
Ela permite transformar seu ambiente de desenvolvimento em um servidor web local temporário. Dessa maneira, você 
poderá ver os arquivos do seu projeto diretamente no navegador, possibilitando a visualização e interação com sua 
página da web em tempo real, sem a necessidade de configurar um servidor web externo.
Módulo 3 – Estrutura de um documento HTML (8 / 8)
000 000
36
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Agora vamos criar a nossa primeira página web, e utilizaremos uma tag <h1> e a <p>.
A tag <h1> em HTML é usada para criar um cabeçalho de nível 1 em uma página da web. Esse cabeçalho é geralmente 
usado para o título principal ou o cabeçalho mais importante em uma página, e normalmente é exibido com uma 
formatação de texto maior e mais enfatizado do que o restante do conteúdo.
A tag <p> em HTML é usada para definir um parágrafo de texto em uma página da web. Ela é uma das tags mais básicas 
e comuns em HTML e é usada para organizar e estruturar o conteúdo textual de uma página.
Módulo 3 – Elementos de texto (1 / 10)
000 000
37
HTMLE CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
HEADINGS
Os cabeçalhos (headings) em HTML são elementos usados para estruturar o conteúdo de uma página da web, 
fornecendo títulos e sub-títulos que ajudam a organizar e hierarquizar o texto. Os cabeçalhos são representados pelas 
tags <h1>, <h2>, <h3>, <h4>, <h5> e <h6>, onde <h1> é o mais importante e <h6> é o menos importante. Aqui estão as 
regras e diretrizes para o uso correto de cabeçalhos em HTML:
• Hierarquia: Os cabeçalhos devem ser usados em uma ordem hierárquica, onde <h1> é o nível mais alto de título e <h6> 
é o nível mais baixo. Isso significa que você não deve pular níveis; por exemplo, não deve usar um <h3> diretamente 
após um <h1>, a menos que haja um contexto muito específico que justifique isso.
• Semântica: Os cabeçalhos devem ser usados de maneira semântica, ou seja, eles devem refletir a estrutura e o 
significado do conteúdo. O <h1> deve ser usado para o título principal da página, o <h2> para os títulos de seções 
importantes, e assim por diante.
• Único <h1>: Cada página deve ter um e apenas um <h1> que representa o título principal da página. O <h1> geralmente 
é o título da página ou o nome do artigo.
• Subtítulos: Use os cabeçalhos <h2>, <h3>, <h4>, <h5> e <h6> para criar uma hierarquia de subtítulos que dividem o 
conteúdo em seções menores. Cada nível subsequente indica uma subseção mais detalhada da anterior.
• Estilo: O estilo (como fonte, cor e tamanho) dos cabeçalhos pode ser controlado por meio de CSS (Cascading Style 
Sheets). Evite usar tags de estilo inline, como <h1 style="font-size: 24px;">, sempre que possível, e use CSS externo ou 
interno para estilizar os cabeçalhos de maneira consistente em toda a sua página ou site.
Atalhos VS Code
O atalho "Copiar linha para cima" é 
Shift + Alt + ↑, e ele duplica a linha 
atual (ou linhas selecionadas) 
acima do cursor. Isso é útil para 
criar cópias de linhas ou blocos de 
código.
O atalho "Mover linha para cima" é 
Alt + ↑, e ele move a linha atual (ou 
linhas selecionadas) para cima, 
acima do cursor. É útil para 
reorganizar o código alterando a 
ordem das linhas.
000 000
38
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Módulo 3 – Elementos de texto (2 / 10)
Módulo 3 – Elementos de texto (3 / 10)
000 000
39
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Agora vamos aplicar esses elementos dentro do nosso arquivo index.html. Para isso, vamos alterar a tag <title> para 
"Elementos de Texto com a Hashtag" e dentro do elemento <body> vamos adicionar os elementos de headings e um 
elemento <p>, que é usado para criar parágrafos de texto em uma página da web.
Módulo 3 – Elementos de texto (4 / 10)
000 000
40
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Além das diretrizes básicas de hierarquia de cabeçalhos que mencionei anteriormente, é importante entender como aplicar a 
hierarquia de títulos e subtítulos de maneira eficaz em páginas da web. Aqui estão algumas considerações adicionais sobre a 
hierarquia de subtítulos:
• Consistência: A consistência na aplicação da hierarquia de cabeçalhos é fundamental. Isso significa que você deve seguir um 
padrão claro e consistente ao usar os diferentes níveis de cabeçalhos em sua página. Por exemplo, se você usar um <h2> para os 
subtítulos de seções, mantenha esse padrão em todo o site.
• Clareza: Os cabeçalhos e subtítulos devem ser escolhidos de forma a tornar o conteúdo claro e compreensível para os leitores. Eles 
devem refletir a estrutura lógica do conteúdo e ajudar os usuários a navegarem e entenderem o que está na página.
• Contexto: Lembre-se de que os cabeçalhos e subtítulos devem fazer sentido no contexto do conteúdo. Eles devem resumir ou 
descrever o que os leitores encontrarão na seção que segue o cabeçalho. Evite usar cabeçalhos que não estão relacionados ao 
conteúdo ou que não têm um propósito claro.
• Uso Responsivo: Considere como sua hierarquia de cabeçalhos se comporta em dispositivos móveis. Às vezes, é necessário ajustar 
o tamanho e o estilo dos cabeçalhos para garantir que eles ainda sejam legíveis em telas menores.
• Navegação: A hierarquia de cabeçalhos também desempenha um papel importante na navegação do site. Muitas vezes, os 
navegadores e mecanismos de busca usam os cabeçalhos para criar uma tabela de conteúdo ou uma lista de links que ajudam os 
usuários a navegar rapidamente por uma página.
• SEO (Search Engine Optimization): O uso apropriado de cabeçalhos e subtítulos pode melhorar a otimização de mecanismos de 
busca de uma página. Os mecanismos de busca tendem a dar mais peso aos cabeçalhos, portanto, escolher títulos e subtítulos 
relevantes e descritivos pode beneficiar o SEO do seu site.
Módulo 3 – Elementos de texto (5 / 10)
000 000
41
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
O <h3> é geralmente usado para representar títulos de seções ou subseções que são menos importantes, então vamos aplicar logo 
abaixo do elemento <h2> e cada elemento terá um <p> com conteúdo.
Módulo 3 – Elementos de texto (6 / 10)
000 000
42
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
O <h4> é útil quando você tem seções ou subseções de um conteúdo que precisam ser organizadas e diferenciadas 
hierarquicamente, mas que não são tão importantes quanto os títulos de níveis mais altos. Então vamos criar esse elemento após o 
primeiro elemento <h3>.
Módulo 3 – Elementos de texto (7 / 10)
000 000
43
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Os elementos <h5> e <h6> em HTML são usados para criar cabeçalhos de nível 5 e 6, respectivamente, em uma página da web. 
No entanto, esses níveis de cabeçalho são geralmente usados com menos frequência em comparação com os níveis de 
cabeçalho mais altos, como <h1>, <h2>, <h3>, e até mesmo <h4>. A frequência de uso dos elementos <h5> e <h6> depende da 
estrutura e da complexidade do conteúdo da página.
Aqui estão algumas diretrizes gerais sobre o uso de <h5> e <h6>:
• Uso Raro: Os <h5> e <h6> são normalmente usados raramente em uma página da web. Eles representam níveis de 
importância relativamente baixa em comparação com os títulos de níveis mais altos e são usados para subdivisões muito 
específicas ou detalhes menos relevantes.
• Organização de Detalhes: Os <h5> e <h6> podem ser usados para organizar detalhes dentro de seções ou subseções. Por 
exemplo, se você estiver escrevendo um artigo acadêmico ou técnico com muitos subdetalhes, pode usar esses níveis de 
cabeçalho para hierarquizar essas informações.
• Maior Profundidade: À medida que você avança para níveis de cabeçalho mais baixos, a profundidade da hierarquia 
aumenta. Isso significa que o <h6> é usado para subdivisões dentro das subdivisões do <h5>.
Módulo 3 – Elementos de texto (8 / 10)
000 000
44
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
O elemento <span> em HTML é uma tag genérica usada para aplicar estilos ou manipular partes específicas do texto dentro de um 
bloco de texto maior, sem afetar o layout geral do documento. Ele não impõe uma quebra de linha antes ou depois do conteúdo 
marcado, tornando-o ideal para aplicar formatação ou comportamento a partes específicas do texto.
O <span> não adiciona significado semântico ao conteúdo; ele é usado principalmente para fins de formatação e estilo. Portanto, é 
importante usá-lo com moderação e em conformidade com as diretrizes de acessibilidade.
Então nesse momento iremos aplicar esses elementos no nosso index.html:
Módulo 3 – Elementos de texto (9 / 10)
000 000
45
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
A diferença mais notável é que o <p> é usado para agrupar parágrafos completos de texto, enquanto o <span> é usado para 
estilizar ou manipular partes específicas de texto dentro de um bloco de texto maior. Em termos de comportamento padrão, o <p> 
introduz espaços em branco adicionais para separar parágrafos, enquanto o <span> não adiciona espaços em branco extras e não 
cria quebras de linha.
A diferença na página será mais perceptível quandovocê usar o <p> para criar parágrafos, pois ele adicionará quebras de linha 
entre eles, tornando o conteúdo mais estruturado. O <span>, por outro lado, é mais útil para personalizar partes específicas do 
texto dentro de um parágrafo ou bloco de texto maior, sem quebrar o fluxo do texto. Portanto, a diferença visual pode ser sutil, 
dependendo de como são usados e estilizados.
Módulo 3 – Elementos de texto (10 / 10)
000 000
46
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
O <span> também pode funcionar como uma "caixa" invisível que envolve e isola a parte do texto que você deseja tratar de 
maneira diferente, seja para aplicar estilos ou para manipulação específica no código ou no layout da página. É uma forma de 
segmentar partes específicas do conteúdo dentro de elementos de bloco, como parágrafos, para aplicar personalizações ou 
comportamentos específicos apenas a essas partes.
Módulo 3 – Ênfase, Importância e Formatação de textos (1 / 7)
000 000
47
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Uma característica notável dos cabeçalhos (headings) é que eles já vêm por padrão em negrito. Isso significa que, quando você 
usa uma tag de cabeçalho, como <h1>, <h2>, <h3>, <h4>, <h5>, ou <h6>, o texto contido dentro delas é exibido em negrito no 
navegador, sem a necessidade de aplicar estilos adicionais.
Mas você pode usar diversos elementos e técnicas para enfatizar, dar importância e formatar textos de maneira a tornar o 
conteúdo de outros elementos html. E vamos abordar esses conceitos nesse momento, recapitulando sobre o elemento <span>.
Lembrando que O elemento <span> é uma tag genérica usada para aplicar estilos ou manipular partes específicas do texto sem 
afetar o layout geral. Ele não possui uma formatação padrão, mas pode ser estilizado com CSS. Então ele é um elemento muito útil 
para formatar textos específicos. Mas se eu quisesse aplicar o estilo de negrito sem utilizar o CSS, isso seria possível?
Existem duas formas de aplicarmos o negrito utilizando elementos html (tags).
1. <b> (Bold):
• O elemento <b> é usado para aplicar formatação em negrito ao texto.
• Ele não implica uma forte ênfase semântica no conteúdo que está envolto, apenas indica que o texto deve ser exibido em 
negrito.
• O uso do <b> é principalmente estilístico e visual, e não transmite a ideia de que o texto seja necessariamente mais importante 
ou enfatizado do que o texto ao seu redor.
Módulo 3 – Ênfase, Importância e Formatação de textos (2 / 7)
000 000
48
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
2. <strong> (Strong Importance):
• O elemento <strong> é usado para indicar ênfase forte em um texto.
• Ele transmite uma ênfase semântica, significando que o texto dentro dele é de grande importância no contexto da página ou 
documento.
• Embora o <strong> também aplique formatação em negrito por padrão, sua principal função é indicar a importância do texto 
para leitores, mecanismos de busca e tecnologias assistivas.
Em resumo, enquanto o <b> é usado principalmente para fins de formatação visual em negrito, o <strong> é usado para indicar 
ênfase semântica e importância real do conteúdo. Portanto, ao escolher entre esses elementos, é importante considerar o 
significado que você deseja transmitir. O <strong> é geralmente preferido quando se deseja destacar a importância do texto, 
especialmente para acessibilidade e otimização de mecanismos de busca.
Módulo 3 – Ênfase, Importância e Formatação de textos (3 / 7)
000 000
49
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Podemos também utilizar outros dois elementos para formatar textos e aplicar o estilo de itálico neles:
1. <i> (Italics):
• O elemento <i> é usado para aplicar formatação em itálico ao texto.
• Ele não implica uma ênfase semântica no conteúdo que está envolto, apenas indica que o texto deve ser exibido em itálico.
• O uso do <i> é principalmente estilístico e visual, e não transmite a ideia de que o texto seja necessariamente mais importante ou 
enfatizado do que o texto ao seu redor.
2. <em> (Emphasis):
• O elemento <em> é usado para indicar ênfase ou destaque em um texto.
• Ele transmite uma ênfase semântica, significando que o texto dentro dele é enfatizado ou destacado no contexto da página ou 
documento.
• O <em> também aplica formatação em itálico por padrão, mas sua principal função é indicar a ênfase no texto para leitores, 
mecanismos de busca e tecnologias assistivas.
Módulo 3 – Ênfase, Importância e Formatação de textos (4 / 7)
000 000
50
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Os elementos HTML <b>, <i>, <em> e <strong> são aplicados a texto dentro de outros elementos HTML para alterar a formatação 
ou a ênfase do texto.
Lembre-se de que a escolha entre esses elementos deve ser baseada na intenção semântica do texto que você deseja destacar ou 
enfatizar. O <em> e o <strong> são especialmente úteis quando você deseja transmitir ênfase ou importância semântica, enquanto 
o <b> e o <i> são mais usados para formatação visual em negrito e itálico.
Agora vamos conhecer outras tags que utilizamos para formatar textos dentro da nossa estrutura html.
A tag <code> em HTML é usada para representar um trecho de código, como código de programação ou marcação, dentro de um 
documento HTML. Ela preserva espaços em branco, tabulações e quebras de linha no código. Isso significa que o texto dentro de 
<code> é exibido exatamente como foi digitado, sem quebras automáticas de linha ou formatação automática.
Módulo 3 – Ênfase, Importância e Formatação de textos (5 / 7)
000 000
51
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
A tag <blockquote> é um elemento HTML usado para designar um bloco de texto que é uma citação de outra fonte. Quando você 
usa a tag <blockquote>, o navegador geralmente adiciona recuo ou outro estilo para destacar visualmente o texto citado. Ela é 
comumente usada em páginas da web para indicar que uma seção específica de texto é uma citação.
Lembrando que na criação de páginas da web, existem muitas tags que você pode usar para formatar e organizar texto. Não 
vamos cobrir todas elas aqui, pois algumas são pouco usadas. No entanto, não se preocupe, você sempre pode pesquisar por uma 
tag específica quando precisar dela. Isso torna a criação de páginas da web mais flexível e fácil de aprender à medida que você 
avança. Fique à vontade para explorar e descobrir as tags que melhor se adequam ao seu projeto!
Módulo 3 – Ênfase, Importância e Formatação de textos (6 / 7)
000 000
52
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
A tag <br> é usada em HTML para criar uma quebra de linha, o que significa que ela força o conteúdo seguinte a ser exibido em 
uma nova linha, sem criar um novo parágrafo. Esta tag é um exemplo de uma tag vazia, o que significa que não possui um 
elemento de fechamento correspondente. Em outras palavras, você não precisa escrever </br>.
A diferença entre <br> e <br /> é principalmente uma questão de convenção e compatibilidade com diferentes versões de HTML. 
Ambas as formas são válidas em HTML5 e HTML4.
• <br>: Esta é a forma mais comum e amplamente aceita. É conhecida como uma "tag não fechada" ou "tag vazia". Ela funciona 
bem em todos os navegadores modernos.
• <br />: Esta forma é conhecida como uma "tag auto-fechada". Ela é mais comumente usada em XHTML e em XML, seguindo a 
sintaxe XML rigorosa, que exige que as tags sejam fechadas explicitamente com uma barra antes do símbolo >. Em HTML5, é 
aceita, mas não é estritamente necessária.
Módulo 3 – Ênfase, Importância e Formatação de textos (7 / 7)
000 000
53
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
A tag <hr> em HTML é usada para criar uma linha horizontal, geralmente para separar conteúdo em uma página da web. "HR" 
significa "horizontal rule" (regra horizontal) e é uma tag vazia, o que significa que não possui um elemento de fechamento.
A tag <sup> em HTML é usada para criar texto sobrescrito, o que significa que o texto dentro dessa tagé exibido acima da linha de 
texto normal. Isso é frequentemente usado para indicar expoentes em fórmulas matemáticas, abreviações ou notas de rodapé.
A tag <sub> em HTML é usada para criar texto subscrito, o que significa que o texto dentro dessa tag é exibido abaixo da linha de 
texto normal. Isso é frequentemente usado para representar fórmulas químicas, notas de rodapé, datas e outras informações em 
que o texto precisa ser exibido ligeiramente abaixo do texto principal.
Módulo 3 – Listas ordenadas e não ordenadas (1 / 4)
000 000
54
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Ao criar páginas da web, é fundamental apresentar informações de maneira organizada e estruturada. As listas em HTML são uma 
maneira eficaz de alcançar esse objetivo, permitindo que você agrupe e formate informações de maneira fácil de ler e entender. 
Existem dois tipos principais de listas em HTML: listas ordenadas e listas não ordenadas.
Listas Ordenadas (OL - Ordered Lists):
As listas ordenadas são usadas quando a ordem dos itens é importante e precisa ser mantida. Elas são frequentemente usadas 
para criar listas numeradas ou com marcadores em sequência.
A tag <li> em HTML é usada para definir um item de lista. Quando usada em uma lista ordenada (<ol>) a tag <li> é usada para 
definir cada item da lista e, por padrão, eles são automaticamente numerados em ordem crescente.
A tag <li> é uma tag de conteúdo de bloco, o que significa que ela cria um bloco de texto separado para cada item da lista.
Módulo 3 – Listas ordenadas e não ordenadas (2 / 4)
000 000
55
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Para visualizarmos no navegador, vamos adicionar alguns itens à lista ordenada e verificar como ela é estruturada na nossa página 
da web.
Listas Não Ordenadas (UL - Unordered Lists):
As listas não ordenadas são usadas quando a ordem dos itens não é importante. Elas são frequentemente usadas para criar listas 
de itens que não têm uma sequência específica.
Quando usamos a tag <ul> para iniciar a lista não ordenada e a tag <li> para cada item da lista. Os itens geralmente são marcados 
com pontos ou círculos, mas a aparência exata pode variar de acordo com o estilo da página.
Nesse exemplo, usamos a tag <ol> para iniciar a lista ordenada e 
também a tag <li> para cada item da lista. Os itens são 
automaticamente numerados em ordem crescente, mas você pode 
personalizar o tipo de marcação (números, letras, algarismos romanos) 
usando atributos específicos.
Ambos os tipos de listas, ordenadas e não ordenadas, desempenham um papel importante na 
criação de páginas da web bem estruturadas. Ao escolher entre eles, considere se a ordem dos 
itens é relevante para a compreensão do conteúdo. Se a ordem for importante, use uma lista 
ordenada; caso contrário, opte por uma lista não ordenada. Essas ferramentas simples tornam a 
organização e apresentação de informações em uma página da web mais claras e acessíveis aos 
usuários.
Módulo 3 – Listas ordenadas e não ordenadas (3 / 4)
000 000
56
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Listas de Descrição (<dl> - Description Lists):
As listas de descrição em HTML são usadas para criar listas de termos e suas descrições associadas. Isso é especialmente útil 
quando você deseja fornecer informações detalhadas sobre vários itens ou conceitos em uma página da web.
Tag <dl> (Description List):
• A tag <dl> é usada para iniciar uma lista de descrição.
• Ela envolve todo o conjunto de termos e suas descrições associadas.
•Tag <dt> (Description Term):
•A tag <dt> é usada para definir um termo ou título na lista de descrição.
•Ela deve ser colocada dentro da tag <dl>.
•Cada termo é frequentemente estilizado de maneira específica para indicar que é o termo associado a uma descrição.
Tag <dd> (Description Description):
• A tag <dd> é usada para fornecer a descrição associada ao termo definido pela tag <dt>.
• Ela deve ser colocada dentro da tag <dl>.
• A descrição é geralmente exibida após o termo e pode ser estilizada de forma diferente, como texto normal.
Módulo 3 – Listas ordenadas e não ordenadas (4 / 4)
000 000
57
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
As listas de descrição em HTML são uma maneira semântica e organizada de apresentar informações que exigem a 
correspondência entre termos e suas descrições. Elas são especialmente úteis quando se deseja criar conteúdo educacional, 
explicativo ou técnico. Cada par de <dt> e <dd> está associado a um único termo e sua descrição, e você pode ter quantos pares 
desejar em uma lista de descrição.
Módulo 3 – Hiperlinks (1 / 12)
000 000
58
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Hiperlinks, também conhecidos como links, são elementos fundamentais em HTML que permitem que você crie conexões entre 
páginas da web, recursos, documentos e outros tipos de conteúdo na internet. Eles permitem que os usuários naveguem de uma 
página para outra, cliquem em imagens ou texto para acessar informações adicionais e explorem a web de forma interativa.
Hiperlinks podem ser divididos em dois tipos principais com base em seu destino:
• Links Internos: São hiperlinks que apontam para recursos dentro do mesmo site ou domínio. Eles são frequentemente usados 
para navegação interna, como links para outras páginas do mesmo site.
• Links Externos: São hiperlinks que apontam para recursos em outros sites ou domínios. Eles são usados para direcionar os 
usuários para recursos externos à página atual.
Ambos os tipos de hiperlinks desempenham um papel vital na criação de sites interativos e na conectividade da web como a 
conhecemos. Eles são a espinha dorsal da navegação na web, permitindo que os usuários explorem uma ampla variedade de 
informações e recursos online.
Módulo 3 – Hiperlinks (2 / 12)
000 000
59
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
A criação de um hiperlink em HTML envolve o uso da tag <a> (anchor) e do atributo href (hiperlink reference).
Tag <a> (Anchor):
• A tag <a> é usada para criar hiperlinks em HTML.
• Ela envolve o conteúdo que deve ser clicável (geralmente texto, imagens ou outros elementos).
• A tag <a> possui o atributo href, que especifica o destino do hiperlink, ou seja, para onde o usuário será levado quando clicar no 
link.
Atributo href (Hiperlink Reference):
• O atributo href é usado para definir o URL (Uniform Resource Locator) ou o caminho para o recurso vinculado.
• Pode ser um URL absoluto (começando com "http://" ou "https://") ou um URL relativo (relativo à localização atual do documento 
HTML).
Texto ou Conteúdo do Hiperlink:
• O texto ou conteúdo dentro da tag <a> é o que os usuários veem como o link clicável.
• É importante escolher um texto descritivo que indique para onde o link levará ou qual é o seu propósito.
http://
https://
Atalho "Windows + 
V"No Windows, o atalho "Windows + 
V" abre o histórico de área de 
transferência, permitindo acessar e 
colar itens copiados anteriormente, 
facilitando a seleção e colagem de 
itens copiados recentemente em 
um computador com Windows.
000 000
60
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Módulo 3 – Hiperlinks (3 / 12)
Módulo 3 – Hiperlinks (4 / 12)
000 000
61
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
O atributo href (Hiperlink Reference) é um dos elementos mais essenciais e versáteis em HTML. Ele desempenha um papel crucial 
na criação de hiperlinks, que são os elementos que permitem a navegação na web, conectando páginas da web, recursos e 
documentos em toda a internet. O href é usado dentro da tag <a> (anchor) para especificar o destino de um hiperlink.
URL Absoluto vs. URL Relativo:
O atributo href pode conter um URL absoluto ou um URL relativo. Um URL absoluto é uma referência completa que inclui o 
esquema (como "http://" ou "https://"), o nome de domínio (por exemplo, "www.exemplo.com"), e o caminho completo para o 
recurso (por exemplo, "/pagina.html"). Já um URL relativo é uma referência que é relativa à localização atual do documentoHTML. 
Por exemplo, se o documento HTML está em "https://www.exemplo.com/pasta/", um URL relativo como "../outrapasta/arquivo.html" 
apontaria para "https://www.exemplo.com/outrapasta/arquivo.html".
http://www.exemplo.com/
https://www.exemplo.com/pasta/
https://www.exemplo.com/outrapasta/arquivo.html
Módulo 3 – Hiperlinks (5 / 12)
000 000
62
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Alvos de Hiperlink:
Além de definir o destino do hiperlink, o href pode incluir um atributo target, que controla como o link é aberto:
▪ _blank: Abre o hiperlink em uma nova janela ou guia do navegador.
▪ _self: Abre o hiperlink na mesma janela ou guia em que o link foi clicado (comportamento padrão).
▪ _top: Abre o hiperlink na janela superior, substituindo todas as molduras ou frames existentes.
▪ _parent: Abre o hiperlink na janela pai, quando a página HTML está em um conjunto de frames ou iframes.
Cada um desses valores para o atributo target controla o comportamento de exibição do hiperlink, oferecendo flexibilidade na 
forma como as páginas da web são abertas e exibidas para os usuários.
Quando navegamos em um site ou lemos um artigo longo, muitas vezes nos deparamos com o desafio de encontrar 
informações específicas em uma página extensa. É aí que entra o atributo id em HTML, uma ferramenta poderosa que facilita a 
navegação interna e melhora a experiência do usuário.
Módulo 3 – Hiperlinks (6 / 12)
000 000
63
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
O que é o atributo id?
O atributo id é um identificador exclusivo que pode ser atribuído a elementos HTML, como parágrafos, títulos, imagens ou 
qualquer outro elemento da página. Esse identificador único é como um "rótulo" que você cola em um elemento para identificá-lo 
de maneira única.
Por que usar o atributo id para navegar dentro de uma página?
• Facilita a Navegação: Quando você atribui um id a um elemento específico, como um título importante ou uma seção 
relevante, você cria um ponto de referência na página. Isso permite que os visitantes cliquem em links ou botões que 
direcionam para esse id, fazendo com que o navegador role automaticamente para o elemento desejado. É como ter um guia 
interno que ajuda os usuários a encontrar rapidamente o que estão procurando.
• Melhora a Experiência do Usuário: A navegação interna proporcionada pelo id melhora a experiência do usuário, 
economizando tempo e esforço. Os visitantes podem pular diretamente para a seção de seu interesse, sem a necessidade de 
percorrer toda a página.
• Índices e Menus de Navegação: O id é frequentemente usado em índices, tabelas de conteúdo e menus de navegação interna. 
Isso permite que os visitantes acessem facilmente diferentes partes da página, tornando a estrutura do conteúdo mais acessível.
Módulo 3 – Hiperlinks (7 / 12)
000 000
64
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
LOREM IPSUM
Lorem Ipsum é um texto fictício e padrão da indústria de impressão e editoração. Ele é 
usado como espaço reservado para preencher o layout de um documento ou site antes 
que o conteúdo real seja inserido. O Lorem Ipsum tem sido usado desde o século XVI e é 
uma série de palavras e frases em latim aparentemente aleatórias, que não têm 
significado real. A ideia por trás do Lorem Ipsum é que ele se parece com texto real, mas 
não distrai o leitor com o conteúdo real enquanto o layout e o design estão sendo 
criados.
A aplicabilidade do Lorem Ipsum no HTML está relacionada ao desenvolvimento de sites 
e ao design gráfico. Aqui estão algumas maneiras como ele é usado:
Layout e Design: Ao criar um site ou documento, os designers geralmente usam o 
Lorem Ipsum para preencher áreas de texto e verificar como o layout ficará quando o 
conteúdo real for inserido. Isso ajuda a ajustar o design, como fontes, tamanhos de texto, 
espaçamento e alinhamento.
Teste de Funcionalidade: Em estágios iniciais de desenvolvimento de sites, o Lorem 
Ipsum pode ser usado para testar a funcionalidade do site antes que o conteúdo real 
esteja disponível. Isso permite verificar se links, menus e outros elementos interativos 
estão funcionando corretamente.
Apresentações e Protótipos: Em apresentações de design ou protótipos de sites, o 
Lorem Ipsum é usado para simular como o conteúdo será distribuído na página. Isso 
ajuda os clientes e partes interessadas a visualizar o design final.
Preenchimento de Espaço Reservado: Quando o conteúdo real ainda não está pronto, 
mas o layout precisa ser concluído, o Lorem Ipsum é usado para preencher o espaço 
reservado nos elementos HTML, como parágrafos, divs ou caixas de texto.
Módulo 3 – Hiperlinks (8 / 12)
000 000
65
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
No Visual Studio Code, a combinação de teclas "Ctrl + Shift + P" é usada para abrir a paleta de comandos. Isso permite que 
você execute rapidamente comandos, extensões ou ações específicas no Visual Studio Code. Você pode digitar o nome do 
comando desejado na paleta de comandos e, em seguida, selecionar o comando relevante para executá-lo.
A paleta de comandos é uma ferramenta poderosa para acessar rapidamente recursos e funcionalidades no Visual Studio 
Code, especialmente quando você não deseja navegar pelos menus ou barra de ferramentas. É uma maneira eficiente de 
realizar tarefas e personalizar sua experiência de desenvolvimento no editor de código.
E pesquise por Emmet Wrap with Abbreviation:
A funcionalidade "Wrap with Abbreviation" (Envolva com Abreviação) no Emmet permite que você envolva rapidamente 
elementos HTML ou XML selecionados com uma abreviação especificada. É uma funcionalidade que economiza tempo e 
simplifica o processo de envolvimento de elementos no desenvolvimento web.
Módulo 3 – Hiperlinks (9 / 12)
000 000
66
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Para usar o "Wrap with Abbreviation" no Emmet, você irá clicar no ícone de engrenagem "Configure Keybinding":
• Você pode criar uma associação de tecla personalizada (keybinding):
• Clique com o botão direito do mouse sobre ela e escolha "Add Keybinding" (Adicionar Associação de Tecla).
• Ou clique duas vezes no atalho que você deseje substituir.
Módulo 3 – Hiperlinks (10 / 12)
000 000
67
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Certifique-se de criar atalhos que ainda não estão em uso, pois o próprio VS 
Code indicará se a combinação de teclas que você está tentando criar já está 
atribuída a outra funcionalidade.
Após criado o seu atalho do "Wrap with Abbreviation" no Emmet:
1. Selecione o Conteúdo: Primeiro, selecione os elementos HTML que você deseja envolver com uma abreviação. Isso pode 
ser texto, tags ou qualquer parte do seu código.
2. Ative o Emmet: Assim que fizer a seleção, ative o Emmet usando o atalho de teclado que criou ou o padrão do VS Code. Isso 
abrirá a entrada de abreviação do Emmet.
3. Digite a Abreviação: Na entrada de abreviação do Emmet, digite a abreviação para a estrutura HTML desejada na qual você 
deseja envolver o conteúdo selecionado. Por exemplo, se você deseja envolver o conteúdo com uma tag <b>, você pode 
digitar b ou qualquer outra abreviação válida.
4. Pressione "Tab" ou "Enter": Após inserir a abreviação, basta pressionar a tecla "Tab" ou "Enter", e o Emmet envolverá o 
conteúdo selecionado com a estrutura HTML especificada. O resultado será gerado instantaneamente.
Módulo 3 – Hiperlinks (11 / 12)
000 000
68
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Deixar um link vazio com o atributo href definido como # é uma prática comum em HTML, e isso é feito por várias razões:
Comportamentos JavaScript: Às vezes, os desenvolvedores usam links com href="#" como marcadores ou gatilhos para 
comportamentos JavaScript específicos. Quando o usuário clica no link, um script JavaScript pode ser ativado para executar 
uma ação, como mostrar ou ocultar conteúdo, abrir um menu suspenso, ou realizar uma animação na página.
Manter o Comportamento Padrão: Quando você cria um link vazio com #, ele não leva o usuário auma nova página ou 
recarrega a página atual. Isso é útil quando você deseja manter o comportamento padrão da página enquanto implementa 
interações adicionais por meio de JavaScript.
Espaço Reservado para Futuros Links: Às vezes, os desenvolvedores deixam links com # como espaços reservados para 
futuros links que podem ser adicionados posteriormente. Isso pode ser útil quando você está desenvolvendo um site e planeja 
adicionar links em um estágio posterior do projeto.
Acessibilidade: Ao adicionar um link com href="#", você fornece um elemento de foco para usuários que navegam na página 
usando tecnologias de assistência, como leitores de tela. Isso pode melhorar a acessibilidade da sua página.
É importante observar que, quando se usa um link vazio com #, é uma boa prática incluir comentários no código HTML 
explicando a finalidade do link, para que outros desenvolvedores entendam sua intenção e para que o código seja mais legível.
Módulo 3 – Hiperlinks (12 / 12)
000 000
69
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Para praticarmos a criação de hiperlinks e a navegação entre páginas HTML, vamos criar uma nova página chamada 
'contato.html'. Em seguida, adicionaremos uma âncora que levará a um link para o nosso arquivo 'index.html'.
Vamos adicionar um link ao nosso arquivo index.html:
E com isso conseguiremos que esses elementos de âncora permitem a navegação entre diferentes páginas HTML. O usuário 
pode acessar facilmente as páginas "contato.html" ou "index.html" ao clicar nos links correspondentes. Cada link levará o 
usuário para a página especificada no atributo href.
Módulo 3 – Imagens e seus atributos no HTML (1 / 4)
000 000
70
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
A tag <img> em HTML é usada para incorporar imagens em uma página da web, e você pode especificar a origem (source) da 
imagem de duas maneiras:
Usando um arquivo dentro do projeto: Você pode carregar uma imagem que está localizada no mesmo diretório ou em um 
subdiretório do seu projeto HTML. Para fazer isso, você especifica o caminho relativo para o arquivo de imagem no atributo src 
(source) da tag <img>.
Nesse caso, "Logo Hashtag.jpg" é o nome do arquivo de imagem no mesmo diretório onde o arquivo HTML está localizado. 
Você pode usar caminhos relativos para acessar imagens em diferentes pastas do projeto, por exemplo: <img 
src="imagens/imagem.jpg" alt="Descrição da imagem">.
Usando um link externo (URL): Você também pode incorporar imagens que estão hospedadas em servidores da web ou em 
qualquer outro local online, fornecendo o URL da imagem no atributo src.
Nesse caso, a imagem é carregada diretamente do URL especificado. Isso é útil quando você deseja exibir imagens de fontes 
externas, como imagens de um site de terceiros.
Módulo 3 – Imagens e seus atributos no HTML (2 / 4)
000 000
71
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
O atributo alt em HTML é usado com a tag <img> para fornecer um texto alternativo (alternative text) para uma imagem. Este 
texto alternativo é exibido quando a imagem não pode ser carregada pelo navegador ou quando um leitor de tela é usado por 
usuários com deficiência visual. Independentemente da origem da imagem, você deve fornecer um texto alternativo 
significativo usando o atributo alt para garantir a acessibilidade da sua página.
Certifique-se de que o valor do atributo alt descreva adequadamente o conteúdo ou o propósito da imagem, para que os 
usuários que não podem ver a imagem ainda entendam o que ela representa.
Aqui estão alguns pontos importantes sobre o atributo alt:
• Acessibilidade: O atributo alt é essencial para tornar uma página da web acessível a todos os usuários, incluindo aqueles 
com deficiência visual. Quando uma imagem não pode ser exibida, o texto alternativo fornece uma descrição da imagem 
para que os usuários saibam o que deveria estar lá.
• SEO (Search Engine Optimization): Os mecanismos de busca usam o texto alternativo para entender o conteúdo da 
imagem, o que pode afetar a classificação da página nos resultados de pesquisa. Portanto, é importante usar o alt de forma 
descritiva e relevante para a imagem.
• Exibição em Leitores de Tela: Leitores de tela, que são usados por pessoas cegas ou com deficiência visual, leem o texto 
alternativo em voz alta. Isso permite que esses usuários compreendam o conteúdo da imagem.
• Imagens Decorativas: Em casos de imagens puramente decorativas, que não têm um significado funcional na página, você 
pode usar alt="" (uma string vazia) para indicar que a imagem é decorativa e não requer uma descrição.
• Texto Descritivo: O texto alternativo deve ser uma descrição precisa do conteúdo da imagem. Tente fornecer informações 
relevantes que ajudem os usuários a entenderem o contexto da imagem. Evite usar "imagem" ou "foto" como texto 
alternativo, a menos que seja apropriado.
Módulo 3 – Imagens e seus atributos no HTML (3 / 4)
000 000
72
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
A tag <img> possui alguns atributos opcionais, como:
width (largura) e height (altura): Esses atributos permitem definir a largura e a altura da imagem em pixels. Eles são opcionais, 
mas úteis para controlar o tamanho da imagem na página.
Quando você define um valor apenas para um dos atributos width (largura) ou height (altura) em uma tag <img>, o navegador 
normalmente ajustará automaticamente o valor não especificado para manter a proporção original da imagem. Isso significa 
que a imagem será redimensionada de forma proporcional para que nem a largura nem a altura pareçam distorcidas.
Módulo 3 – Imagens e seus atributos no HTML (4 / 4)
000 000
73
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
A tag <figure> em HTML é usada para encapsular elementos que representam uma figura ou ilustração em um documento, 
como uma imagem, gráfico, diagrama, vídeo, entre outros. O elemento <figure> é frequentemente usado em conjunto com a 
tag <figcaption> para fornecer uma legenda ou descrição associada à figura.
• <figure>: Este elemento é usado para envolver a figura ou ilustração em questão. Pode conter qualquer elemento ou 
conteúdo multimídia que represente uma figura no contexto do documento. A tag <figure> é usada para criar um 
agrupamento semântico que indica que os elementos dentro dela estão relacionados como uma figura.
• <figcaption>: Este elemento é usado para fornecer uma legenda ou descrição para a figura encapsulada pela tag <figure>. A 
tag <figcaption> geralmente é colocada dentro da tag <figure>. A legenda ajuda a descrever ou explicar a figura, tornando-a 
mais compreensível para os leitores.
A tag <figure> envolve uma imagem com a descrição fornecida no atributo alt. A tag <figcaption> é usada para fornecer uma 
legenda explicativa para a imagem.
O uso dos elementos <figure> e <figcaption> ajuda a criar uma estrutura semântica para figuras em seu conteúdo, tornando-o 
mais acessível e compreensível para os leitores, além de melhorar a indexação de conteúdo por mecanismos de busca.
Módulo 3 – Ferramenta do Programador (1 / 2)
000 000
74
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
A ferramenta do programador, também conhecida como DevTools ou Console do navegador, é uma poderosa ferramenta de 
desenvolvimento incorporada nos navegadores da web, como Google Chrome, Mozilla Firefox, Microsoft Edge e outros. Ela é 
usada por desenvolvedores web para depurar, testar e analisar páginas da web, elementos HTML, CSS e scripts JavaScript. A 
ferramenta do programador geralmente é acessada pressionando a tecla F12 ou usando o atalho de teclado Ctrl + Shift + I (ou 
Cmd + Option + I no macOS).
Ou você pode acessar através das configurações do navegador, como imagem abaixo:
Módulo 3 – Ferramenta do Programador (2 / 2)
000 000
75
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Aqui estão algumas das principais funcionalidades da ferramenta do programador:
• Console: A aba Console permite que você veja mensagens de erro, depure código 
JavaScript,execute comandos interativos e registre informações de depuração.
• Elements (Elementos): Esta aba permite inspecionar e modificar o HTML e o CSS 
de uma página em tempo real. Você pode selecionar elementos na página e ver 
suas propriedades, estilos e eventos associados.
• Network (Rede): A aba Network exibe todas as solicitações feitas pelo navegador 
ao carregar uma página, incluindo solicitações HTTP, recursos como imagens, 
scripts e arquivos CSS. Isso é útil para otimizar o desempenho da página.
• Sources (Fontes): Esta aba permite depurar código JavaScript. Você pode definir 
pontos de interrupção, inspecionar variáveis, rastrear a execução do código e até 
mesmo editar scripts em tempo real.
• Application (Aplicação): A aba Application fornece informações sobre cookies, 
armazenamento local, armazenamento de sessão e outras informações 
relacionadas à aplicação web.
• Emulação de Dispositivo: Permite simular diferentes dispositivos móveis e 
tamanhos de tela para verificar como uma página se comporta em dispositivos 
variados.
Módulo 3 – Desafio 1 – Apresentando o Desafio (1 / 3)
000 000
76
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Desafio de HTML: Crie uma Página de Anúncio de Smart TV
Parabéns, você chegou a um momento emocionante em nosso curso de HTML para 
iniciantes! Agora que exploramos conceitos e elementos fundamentais, é hora de 
aplicar tudo o que aprendemos na prática. Para isso, lançaremos o nosso primeiro 
desafio emocionante: a criação de uma página web que anuncia uma Smart TV.
Uma Oportunidade de Colocar em Prática Seus Conhecimentos
Este desafio não apenas testará suas habilidades recém-adquiridas, mas também o 
levará a um cenário real de desenvolvimento web. Você aprenderá a criar uma página 
atraente que não só informa, mas também cativa o público.
Elementos-Chave a Serem Abordados
Nesta tarefa, você usará elementos HTML essenciais, como títulos, listas e formatação 
de texto para criar uma página de anúncio convincente. Além disso, praticará a 
organização de conteúdo com seções bem definidas.
Módulo 3 – Desafio 1 – Apresentando o Desafio (2 / 3)
000 000
77
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Nesta aula você precisa fazer o download do arquivo que está em nossa plataforma. Feito o download, você terá um arquivo 
imagem-smart-tv.png que é a imagem que utilizará no seu site, e também as instruções dentro do arquivo desafio-1.txt, com 
todos os requisitos para montar a sua página.
Após a leitura, você irá criar um arquivo chamado desafio1.html e iniciar a estrutura do desafio. Lembre-se de utilizar a extensão 
Live Server para acompanhar o desenvolvimento do seu site no navegador e caso sinta dificuldades retorne as aulas ou tire suas 
dúvidas no suporte da plataforma. Mas lembre-se que é um momento de quebrar a cabeça e pesquisar.
Módulo 3 – Desafio 1 – Apresentando o Desafio (3 / 3)
000 000
78
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
• Destaque para Acessibilidade e Estilo
Não esqueceremos a importância da acessibilidade. Você garantirá que a imagem tenha um texto alternativo apropriado e que o 
conteúdo seja estruturado de forma clara para todos os visitantes.
• Conteúdo Estratégico para uma Venda Eficiente
Ao criar esta página, pense em como destacar as características importantes da Smart TV. Você ajudará os potenciais 
compradores a tomar decisões informadas.
• Um Espaço para a Criatividade
Embora tenhamos algumas diretrizes a seguir, lembre-se de que a criatividade é bem-vinda. Personalize a página, escolha a 
imagem e a marca da Smart TV, e dê seu toque especial ao texto.
• Compartilhe Seu Progresso e Aprendizado
Depois de concluir o desafio, compartilhe sua criação com seus colegas do curso. Não se esqueça de aproveitar a oportunidade 
para aprender uns com os outros e trocar ideias.
Este desafio não é apenas um teste de suas habilidades em HTML, mas também uma chance de demonstrar sua criatividade. 
Estou ansioso para ver o que você criará e como aplicará tudo o que aprendeu. Boa sorte e divirta-se construindo a página de 
anúncio da Smart TV!
Módulo 3 – Desafio 1 – Construindo o desafio do zero (1 / 7)
000 000
79
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Vamos iniciar o Desafio criando o arquivo chamado desafio-1.html e iniciando um documento do tipo HTML. Você pode utilizar o 
atalho ( ! ) para construir a estrutura inicial do HTML e iremos adicionar a tag title e adicionaremos o título da nossa página.
Seguindo o passo a passo da instruções do arquivo desafio-1.txt, vamos adicionar a imagem e um título a nossa página, para isso 
vamos relembrar os conceitos os elementos que iremos utilizar:
• <figure>: Este elemento envolve a imagem da Smart TV e sua legenda, fornecendo uma estrutura semântica para conteúdo 
relacionado.
• <img src="imagem-smart-tv.png" alt="Smart TV" width="400px" />: Insere uma imagem com o atributo src especificando o 
caminho da imagem, o atributo alt fornece um texto alternativo (importante para acessibilidade) e o atributo width define a 
largura da imagem.
• <figcaption>Smart TV da marca XYZ</figcaption>: Aqui está a legenda da imagem.
• <h1>Smart TV 75" da marca XYZ</h1>: Cria o título principal da página.
Módulo 3 – Desafio 1 – Construindo o desafio do zero (2 / 7)
000 000
80
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Nesse momento teremos a estrutura do nosso desafio da seguinte maneira:
Agora está na hora de adicionarmos o link, utilizando a tag <a>, com o atributo href vazio, pois será um link que não encaminhará 
o usuário a outra lugar.
Módulo 3 – Desafio 1 – Construindo o desafio do zero (3 / 7)
000 000
81
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Agora vamos construir a próxima seção que é a seção de Preço. O título deve ser "Preço" e os textos da seção "R$ 4.999 ou 12xR$ 
416,58" e "Desconto de 10% no PIX", sendo que queremos dar importância ao texto "R$ 4.999" e apenas deixar em negrito o texto 
"Desconto de 10%".
E vamos criar uma separação horizontal entre a seção de preço e a de condições, utilizando a tag <hr />:
Módulo 3 – Desafio 1 – Construindo o desafio do zero (4 / 7)
000 000
82
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Analisando a estrutura de elementos do slide anterior, vamos relembrar os conceitos das tags 
utilizadas e como elas estão estruturando a nossa página web.
• <h2>Preço</h2>: Define o título da seção de preço.
• <p><strong>R$ 4.999</strong> ou 12xR$ 416,58</p>: Formata o preço em negrito com <strong>.
• <p><b>Desconto de 10%</b> no PIX</p>: Define o desconto de 10% em negrito com <b>.
• <hr />: Insere uma linha horizontal para separar as seções.
A próxima seção que iremos construir será a seção de Condições. Vamos criar os elementos para que 
essa seção tenha o título "Condições" e os textos "Parcelamento sem juros" e "Frete grátis", sendo 
que o "sem juros" deverá estar em itálico, utilizando a tag <i> e o "Frete grátis" deverá receber uma 
ênfase, que podemos utilizar a tag <em> para isso.
Entre as seções condições e de características também iremos utilizar a tag <hr /> para criar uma 
separação horizontal entre elas.
Módulo 3 – Desafio 1 – Construindo o desafio do zero (5 / 7)
000 000
83
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
A nossa última seção será a de Características. O título da seção é "Características" e nela teremos três sub-seções, são elas: "Inteligência 
Artificial & Smart", "Imagem" e "Conexões".
Em cada seção vamos colocar uma lista não ordenada com 4 itens em cada uma delas. Os itens das listas são esses (4 itens para cada sub-seção):
Alexa
Google Assistente
Game Optimizer
Configuração da família
4K UHD
Processador XYZ
HDR
HDMI 2.0
3 Entradas HDMI 2.0
2 Entradas USB
1 Bluetooth In/Out
1 Saída digital óptica
Módulo 3 – Desafio 1 – Construindo o desafio do zero (6 / 7)
000 000
84
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Vamos entender os elementos utilizados para construir a seção de Característicase o que cada parte está fazendo:
• <h2>Características</h2>: Aqui, estamos criando um título de nível 2, indicando que estamos começando uma nova seção na 
página, que se concentra nas características da Smart TV.
• <h3>Inteligência Artificial & Smart</h3>: Dentro da seção de características, usamos um título de nível 3 para criar uma 
subseção com o nome "Inteligência Artificial & Smart". Isso ajuda a organizar e estruturar as informações.
• <ul>: Abrimos uma lista não ordenada (<ul>) para listar as características da subseção "Inteligência Artificial & Smart". Listas não 
ordenadas são usadas quando você deseja apresentar itens sem uma ordem específica, como uma lista de recursos.
• <li>Alexa</li>: Usando o elemento <li>, listamos o primeiro item das características, que é "Alexa". Repetimos esse processo para 
listar os outros itens, como "Google Assistente", "Game Optimizer" e "Configuração da família".
• <h3>Imagem</h3>: Continuamos com a próxima subseção, "Imagem", usando novamente um título de nível 3.
• <ul>: Abrimos uma nova lista não ordenada para as características da subseção "Imagem". Aqui, listamos itens relacionados à 
qualidade da imagem, como "4K UHD", "Processador XYZ", "HDR" e "HDMI 2.0".
• <h3>Conexões</h3>: Finalmente, introduzimos a terceira subseção, "Conexões", com um título de nível 3.
• <ul>: Abrimos outra lista não ordenada para listar as características de conexões da Smart TV, que incluem "3 Entradas HDMI 
2.0", "2 Entradas USB", "1 Bluetooth In/Out" e "1 Saída digital óptica".
Essa estrutura de títulos de diferentes níveis (<h2>, <h3>) e listas não ordenadas (<ul>) ajuda a organizar as informações de forma 
hierárquica e legível, tornando a página mais clara para os visitantes. Cada subseção agrupa características relacionadas, o que 
facilita a leitura e compreensão do conteúdo.
Módulo 3 – Desafio 1 – Construindo o desafio do zero (7 / 7)
000 000
85
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
A estrutura final do nosso arquivo HTML e a interface visual final do nosso site terá essas estruturas:
Módulo 3 – Desafio 2 – Home da Hashtag Treinamentos (1 / 2)
000 000
86
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Desafio 2: Construindo a Home da Hashtag Treinamentos
Olá, caros alunos! Chegamos ao emocionante Desafio 2, no qual construiremos a página inicial (Home) do site da Hashtag 
Treinamentos (Hashtag Treinamentos | Cursos de Excel, VBA, Python e mais!). Este desafio é uma oportunidade empolgante para 
aplicar tudo o que você aprendeu até o momento no módulo de Introdução ao HTML. Vamos criar o esqueleto básico da página 
inicial, e à medida que avançamos nos módulos seguintes, aprimoraremos e adicionaremos recursos adicionais.
Quando e Como
Vamos concluir este desafio ao final do Módulo 6, quando já teremos explorado os conceitos mais avançados de HTML e CSS. Por 
enquanto, nosso objetivo é criar a estrutura básica da Home da Hashtag Treinamentos, utilizando apenas o conhecimento que 
adquirimos até este ponto. Se surgir a necessidade de incluir elementos que ainda não foram abordados em nossas aulas, 
simplesmente coloque um placeholder, como <p>VÍDEO</p>, para representar esses elementos que serão substituídos nas 
próximas etapas.
https://www.hashtagtreinamentos.com/
Módulo 3 – Desafio 2 – Home da Hashtag Treinamentos (2 / 2)
000 000
87
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
O Gabarito
O resultado desse Desafio 2 será um site que reflete a Home da Hashtag Treinamentos usando apenas os conceitos que 
estudamos até agora. Se você precisar relembrar ou revisitar algum tópico, não hesite em voltar às aulas ou consultar o arquivo 
"elementos.txt" que fornecemos.
Divirta-se!
Lembre-se de que a programação e a criação de páginas web são uma jornada empolgante e criativa. Este desafio oferece a você 
a oportunidade de aplicar seus conhecimentos, desenvolver suas habilidades e criar algo incrível. Divirta-se ao construir a Home 
da Hashtag Treinamentos e esteja preparado para aprimorá-la à medida que avançamos em nosso curso. Se tiver alguma dúvida, 
nossa comunidade está aqui para ajudar. Boa sorte e aproveite!
Faça os downloads dor arquivos para instruções e links necessários para construir a página!
Módulo 3 – Desafio 2 – Criando o Cabeçalho (1 / 7)
000 000
88
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
O que é a Seção de Cabeçalho?
Em HTML, a seção de cabeçalho, é uma parte essencial de uma página da web que engloba elementos como o título da página, 
logotipos, menus de navegação, informações de contato e outras informações que geralmente aparecem na parte superior de 
uma página.
Elementos Comuns na Seção de Cabeçalho:
• Título da Página: O título da página, que aparece na barra de título do navegador, ajuda os visitantes a entender o conteúdo 
da página.
• Logotipo: Empresas e sites frequentemente exibem seus logotipos no cabeçalho, reforçando sua marca.
• Navegação: Menus de navegação são colocados no cabeçalho para facilitar a experiência do usuário na exploração do site.
• Informações de Contato: Algumas páginas incluem detalhes de contato no cabeçalho, como números de telefone ou links 
para formulários de contato.
• Redes Sociais: Ícones ou links para redes sociais permitem que os visitantes compartilhem e se conectem com a organização.
Por que a Seção de Cabeçalho é Importante?
A seção de cabeçalho desempenha um papel crítico na usabilidade e identidade visual de um site. Ela fornece aos visitantes 
informações essenciais e cria uma base para uma experiência de usuário consistente. Além disso, é comum que o cabeçalho seja 
compartilhado em várias páginas, mantendo a coesão visual e de navegação em todo o site.
Módulo 3 – Desafio 2 – Criando o Cabeçalho (2 / 7)
000 000
89
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Vamos iniciar criando um arquivo HTML chamado home-hashtag.html. Dentro desse arquivo teremos toda a estrutura da nossa 
página. Lembrando que para iniciarmos um documento html, podemos utilizar o atalho ( ! ) no Visual Studio Code e teremos a 
estrutura básica do nosso arquivo.
E adicionaremos o título da nossa página dentro da tag title:
Lembre-se de utilizar a extensão Live Server para acompanhar como a estrutura da sua página dentro do navegador.
Módulo 3 – Desafio 2 – Criando o Cabeçalho (3 / 7)
000 000
90
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Nesse momento vamos construir a estrutura do cabeçalho, contendo todos os 
elementos da página inicial do Hashtag Treinamentos. E vamos relembrar os 
conceitos dos elementos e suas estruturas.
Vamos construir o código HTML que cria a estrutura básica do cabeçalho do site da 
Hashtag Treinamentos, com um logotipo no topo e um menu de navegação que 
permite aos visitantes acessar diferentes partes do site. A utilização de listas não 
ordenadas (<ul>) e itens de lista (<li>) é uma abordagem comum para a criação de 
menus de navegação em HTML, tornando a navegação do site mais organizada e 
intuitiva para os usuários.
Para colocarmos o logo, vamos copiar o endereço da imagem do próprio site da 
Hashtag Treinamentos, clicando com o botão direito do mouse em cima do logo e 
colocarmos no nosso arquivo html utilizando a tag img :
• <img src="https://www.hashtagtreinamentos.com/wp-
content/uploads/2022/05/Logo-Hashtag-Original-100x45px.png.webp" 
alt="Logo da Hashtag">
Este é um elemento de imagem (<img>) que exibe o logotipo da Hashtag 
Treinamentos. O atributo src define o caminho da imagem, e o atributo alt fornece 
um texto alternativo que é exibido se a imagem não puder ser carregada. O logotipo 
é um link para a página inicial do site.
Módulo 3 – Desafio 2 – Criando o Cabeçalho (4 / 7)
000 000
91
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Agora vamos crias os próximos elementos que serão links que encaminham o usuário as páginas de cada item. Para isso 
precisamos utilizar as listas:
• <ul>: Este elemento cria uma lista não ordenada (<ul>), que será usada para criar o menu denavegação do site.
• <li>: Cada item de menu é representado por um elemento de lista (<li>) dentro da lista não ordenada.
• <a href="https://www.hashtagtreinamentos.com/curso-de-excel-online">Curso de Excel</a>: Este é um link de âncora 
(<a>) que aponta para a página do "Curso de Excel" no site da Hashtag Treinamentos. O atributo href define o URL de 
destino e o texto entre as tags <a> é o texto visível do link.
A estrutura se repete para outros itens do menu, como "Curso de Power BI," "Curso de Python," "Outros Cursos," "Para 
empresas," "Blog" e "Contato." Cada um deles é um link para diferentes seções do site.
Para saber para qual página cada link encaminha, você pode utilizar a ferramenta do programador, DevTools (F12), o primeiro 
ícone representa a seleção dos elementos da página:
Módulo 3 – Desafio 2 – Criando o Cabeçalho (5 / 7)
000 000
92
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Para os itens "Outros Cursos" e "Contato," há submenus aninhados. Isso é representado pela criação de outra lista não ordenada 
(<ul>) dentro de um item de lista (<li>). Esses submenus contêm links adicionais para páginas relacionadas.
Então a estrutura do cabeçalho será:
Módulo 3 – Desafio 2 – Criando o Cabeçalho (6 / 7)
000 000
93
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Continuando com a estrutura:
Módulo 3 – Desafio 2 – Criando o Cabeçalho (7 / 7)
Comentários no HTML
Os caracteres <!-- e --> (CTRL + ;)são usados 
em HTML para criar comentários. Os 
comentários são trechos de texto que não 
são renderizados na página pelo 
navegador, mas servem para incluir notas 
ou explicações que podem ser lidas por 
desenvolvedores ou mantenedores do 
código. Eles são úteis para documentar o 
HTML, tornando-o mais compreensível e 
facilitando a colaboração em projetos.
000 000
94
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Módulo 3 – Desafio 2 – Criando a Seção Hero (1 / 3)
O que é uma Seção "Hero"?
Uma seção "hero" é a área proeminente que você geralmente encontra no topo de muitas páginas web. Ela é projetada para 
chamar a atenção do visitante e transmitir informações importantes ou cativantes de forma impactante. Essa seção é chamada 
de "hero" porque desempenha um papel heróico ao fazer uma primeira impressão notável. Vamos explorar suas características 
típicas:
• Imagem ou Vídeo de Destaque: A seção "hero" geralmente apresenta uma imagem de fundo ou vídeo impactante e relevante.
• Título e Subtítulo Impactantes: Inclui um título grande e chamativo, muitas vezes acompanhado por um subtítulo informativo.
• Chamada para Ação (CTA): Geralmente contém um botão de ação (CTA) que incentiva os visitantes a tomar ações específicas.
• Conteúdo de Destaque: Além do título, pode destacar elementos de conteúdo relevantes, como depoimentos ou números.
• Design Responsivo: Deve ser responsivo, ajustando-se a diferentes tamanhos de tela sem perder qualidade visual.
• Simplificação da Navegação: Pode incluir links ou botões para facilitar a navegação nas áreas importantes do site.
• Foco na História ou na Marca: Muitas vezes, conta a história da empresa, destaca os valores da marca ou transmite uma 
mensagem poderosa.
Por que é Importante Aprender sobre Seções "Hero"?
As seções "hero" desempenham um papel crucial na criação de uma primeira impressão marcante em uma página web. Elas são 
usadas em sites de empresas, páginas de produtos, eventos e muito mais. A compreensão dessas seções é fundamental para 
criar designs atraentes e envolventes.
000 000
95
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Módulo 3 – Desafio 2 – Criando a Seção Hero (2 / 3)
Vamos construir a nossa seção Hero, com os elementos da página da Hashtag Treinamentos:
000 000
96
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Módulo 3 – Desafio 2 – Criando a Seção Hero (3 / 3)
• Vamos analisar as estruturas utilizadas para criarmos nosso seção Hero:
• <!-- Seção Hero --> é um comentário que descreve o início da seção "hero" para fins de documentação e entendimento.
• <h1> contém o título principal da seção "hero."
• <p> inclui um parágrafo com informações adicionais ou descritivas.
• Os dois <a> (âncoras ou links) direcionam os visitantes para páginas específicas quando clicados. O primeiro link leva para 
"Cursos Hashtag Treinamentos," e o segundo para "Cursos Hashtag Programação."
• <p> adicionaremos por enquanto o texto "VÍDEO".
000 000
97
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Módulo 3 – Desafio 2 – Criando a Seção Conteúdos Gratuitos (1 / 5)
Agora vamos iniciar a próxima seção de Conteúdos Gratuitos:
Vamos começar com os elementos da imagem da seta e o título (h2):
000 000
98
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Módulo 3 – Desafio 2 – Criando a Seção Conteúdos Gratuitos (2 / 5)
Adicionaremos a próxima imagem e um subtítulo que será responsável pelos itens dos Treinamentos:
E iniciaremos a lista de cursos com logotipos, utilizando as âncoras para criarmos os links e as imagens:
000 000
99
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Módulo 3 – Desafio 2 – Criando a Seção Conteúdos Gratuitos (3 / 5)
E agora vamos adicionar a lista para plataformas digitais, elas estarão dentro de uma lista e vamos utilizar as âncoras para 
criarmos os links e as imagens de cada elemento:
000 000
100
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Módulo 3 – Desafio 2 – Criando a Seção Conteúdos Gratuitos (4 / 5)
Nesse momento vamos estruturar o segundo subtítulo da seção que será Programação, e para isso também utilizaremos a 
tag <h3> e as âncoras de links com suas respectivas imagens:
E assim como estruturamos os links paras mídias sociais e suas imagens, faremos nesse momento, mas com os endereços da 
Programação.
000 000
101
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Módulo 3 – Desafio 2 – Criando a Seção Conteúdos Gratuitos (5 / 5)
000 000
102
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Módulo 3 – Desafio 2 – Criando a Seção Diferenciais (1 / 6)
000 000
103
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
A próxima seção que vamos criar é a de Diferenciais: Vamos iniciar adicionando o título a seção e o primeiro texto:
Módulo 3 – Desafio 2 – Criando a Seção Diferenciais (2 / 6)
000 000
104
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
No código acima, a seção Diferenciais, possui uma estrutura de elementos "Foco no Mercado" que apresenta informações 
sobre o foco dos materiais de treinamento da Hashtag Treinamentos no mercado de trabalho. Os comentários explicam o 
propósito de cada elemento no código.
Módulo 3 – Desafio 2 – Criando a Seção Diferenciais (3 / 6)
000 000
105
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
No código abaixo, vamos criar a estrutura dos elementos do "Nível Impressionador" que apresenta informações sobre o nível de 
treinamento oferecido pela Hashtag Treinamentos, destacando a jornada desde o início até o "Nível Impressionador".
Módulo 3 – Desafio 2 – Criando a Seção Diferenciais (4 / 6)
000 000
106
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
E por último faremos a mesma criação de estrutura para os elementos da estrutura de "+84.600 alunos formados" destaca o 
número de alunos que a Hashtag Treinamentos formou e fornece informações sobre o impacto positivo de seus cursos.
Módulo 3 – Desafio 2 – Criando a Seção Diferenciais (5 / 6)
000 000
107
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Continuando a nossa seção de diferenciais, vamos adicionar uma tag <h3> e dentro desse elemento vamos adicionar uma 
âncora que direciona o usuário a um link.
E abaixo dessa estrutura adicionaremos as imagens de diversas logomarcas de empresas e os links das imagens estão 
disponíveis na plataforma Hashtag, dentro dessa aula:
Módulo 3 – Desafio 2 – Criando a Seção Diferenciais (6 / 6)
000 000
108
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Módulo 3 – Desafio 2 – Criando a Seção O que falam (1 / 2)
000 000
109
HTML E CSSIMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
A seção "O que falam sobre a Hashtag Treinamentos" refere-se a depoimentos em vídeo de alunos ou clientes. Ela inclui 
ícones, títulos, marcadores para botões de navegação e um link para "Veja mais depoimentos" no YouTube. No entanto, 
partes do código estão marcadas como "BOTÃO ESQUERDA," "BOTÃO DIREITA," e "BOTÕES DE NAVEGAÇÃO," pois 
esses elementos de interface são implementados usando CSS e JavaScript para criar uma experiência interativa de 
navegação de depoimentos.
Módulo 3 – Desafio 2 – Criando a Seção O que falam (2 / 2)
000 000
110
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Módulo 3 – Desafio 2 – Criando a Seção Na mídia (1 / 1)
000 000
111
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Neste código, a seção "Na mídia" destaca a presença da Hashtag Treinamentos em várias mídias, como Globo News e O 
Globo. Ela inclui ícones, títulos e links para os artigos ou conteúdos relacionados à empresa na mídia.
Módulo 3 – Desafio 2 – Criando a Seção Blog da Hashtag (1 / 5)
000 000
112
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Essa é uma seção do site que destaca os últimos posts do Blog da Hashtag 
Treinamentos. A seção inclui informações sobre cada post, como título, data de 
postagem, categoria, uma imagem de destaque e uma breve descrição do 
conteúdo.
Cada entrada do post consiste em:
• Título do Post: O título do post é uma chamada atraente para o conteúdo 
que será apresentado.
• Data e Categoria: A data de postagem e a categoria em que o post se 
encaixa, permitindo aos visitantes saber quando foi publicado e em qual 
área do conhecimento se encaixa.
• Imagem de Destaque: Cada post é representado por uma imagem de 
destaque que dá uma prévia visual do conteúdo do post.
• Descrição do Post: Uma breve descrição ou resumo do conteúdo do post é 
fornecido para dar aos visitantes uma ideia do que podem esperar 
encontrar.
Cada entrada de post é acompanhada por um link que leva os visitantes 
diretamente ao post completo no blog, permitindo que eles leiam o conteúdo 
completo. Essa seção é uma maneira eficaz de destacar os últimos conteúdos 
do blog e incentivar os visitantes a explorarem o blog da Hashtag 
Treinamentos.
Módulo 3 – Desafio 2 – Criando a Seção Blog da Hashtag (2 / 5)
000 000
113
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Módulo 3 – Desafio 2 – Criando a Seção Blog da Hashtag (3 / 5)
000 000
114
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Módulo 3 – Desafio 2 – Criando a Seção Blog da Hashtag (4 / 5)
000 000
115
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Módulo 3 – Desafio 2 – Criando a Seção Blog da Hashtag (5 / 5)
000 000
116
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Módulo 3 – Desafio 2 – Criando a Seção Como ajudar (1 / 2)
000 000
117
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
A próxima seção que vamos criar é a Como ajudar: Nesta seção, a Hashtag Treinamentos apresenta informações sobre 
como seus cursos e treinamentos podem ajudar os alunos a se 
destacarem no mercado de trabalho, tornando-se referências em suas 
áreas de atuação. Eles enfatizam sua experiência e sucesso na formação 
de mais de 84.600 alunos em diversos programas. Também fornecem 
links para obter mais informações sobre seus cursos e treinamentos.
Módulo 3 – Desafio 2 – Criando a Seção Como ajudar (2 / 2)
000 000
118
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Módulo 3 – Desafio 2 – Criando a Seção Como ajudar (1 / 1)
000 000
119
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Nesse trecho de código HTML, temos a "Seção Minicurso", onde a Hashtag Treinamentos oferece aos visitantes a oportunidade 
de se inscrever e receber um minicurso gratuitamente. Aqui está a explicação dos elementos presentes:
Módulo 3 – Desafio 2 – Criando o Rodapé (1 / 6)
000 000
120
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
O rodapé de uma página web é uma seção localizada na parte inferior da página e tem várias funções importantes. Ele é geralmente 
projetado para fornecer informações adicionais e recursos úteis aos visitantes do site. Aqui estão algumas das principais funções e 
elementos comuns encontrados em um rodapé:
• Informações de Contato: O rodapé costuma conter informações de contato, como endereço de e-mail, número de telefone e 
endereço físico da empresa ou organização. Isso permite que os visitantes entrem em contato facilmente.
• Links de Navegação: Muitas vezes, o rodapé inclui links para seções importantes do site, como "Sobre Nós", "Produtos", "Serviços", 
"Blog" e "Perguntas Frequentes". Esses links ajudam os visitantes a navegar pelo site de maneira mais eficaz.
• Links para Políticas: É comum encontrar links para políticas importantes, como "Política de Privacidade" e "Termos de Uso". Esses 
links são fundamentais para a transparência e a conformidade legal.
• Links de Redes Sociais: O rodapé geralmente inclui ícones ou links para as páginas de redes sociais da empresa, como Facebook, 
Twitter, LinkedIn e Instagram. Isso permite que os visitantes se conectem nas redes sociais da empresa.
• Direitos Autorais: O rodapé costuma conter uma declaração de direitos autorais que informa aos visitantes que o conteúdo do 
site está protegido por direitos autorais e quem detém os direitos.
• Logotipo da Empresa: O logotipo da empresa é frequentemente exibido no rodapé para ajudar a reforçar a marca e fornecer uma 
identificação visual.
• Outras Informações: Dependendo do site, o rodapé pode conter informações adicionais, como prêmios, selos de segurança, 
certificações, parceiros, selos de qualidade e muito mais.
O conteúdo específico e o design do rodapé podem variar amplamente de um site para outro, dependendo dos objetivos e 
necessidades da empresa ou organização. O objetivo principal é tornar o site mais informativo, acessível e fácil de usar para os 
visitantes, garantindo que eles possam encontrar as informações de que precisam. Além disso, o rodapé desempenha um papel 
fundamental na credibilidade e profissionalismo de um site, transmitindo confiança aos visitantes.
Módulo 3 – Desafio 2 – Criando o Rodapé (2 / 6)
000 000
121
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Vamos iniciar a estrutura do rodapé com os seguintes elementos:
• <img>: Este elemento <img> exibe o logotipo da Hashtag. O atributo src especifica o URL da imagem, enquanto o atributo alt 
fornece um texto alternativo que é exibido se a imagem não puder ser carregada. Nesse caso, o texto alternativo é "Logo da 
Hashtag".
• <p>: São elementos de parágrafo HTML. Os três parágrafos a seguir ao logo representam informações no rodapé:
• "Fale Conosco"
• "Cursos Online"
• "Carol | Assistente de Suporte"
Módulo 3 – Desafio 2 – Criando o Rodapé (3 / 6)
000 000
122
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
A tag SVG (Scalable Vector Graphics) é usada para criar imagens ou gráficos vetoriais escaláveis em páginas da web. Em vez de serem 
baseados em pixels, como imagens regulares, os gráficos SVG são criados com vetores, o que significa que são formados por 
equações matemáticas, linhas e formas. Isso permite que sejam ampliados ou reduzidos sem perder qualidade ou ficar pixelados. O 
SVG é especialmente útil para ícones, logotipos e ilustrações em websites, pois eles sempre ficam nítidos e bem definidos, 
independentemente do tamanho em que são exibidos. Isso ajuda a melhorar a qualidade visual das páginas da web.
Você pode utilizar o DevTools(F12) para inspecionar os elementos e copiar todo o código svg para adicionar as imagens como 
elemento svg diretamente:
Módulo 3 – Desafio 2 – Criando o Rodapé (4 / 6)
000 000
123
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Vamos adicionar todos os elementos svg com os elementos copiados e também as demais informações de cada elemento:
Módulo 3 – Desafio 2 – Criando o Rodapé (5 / 6)
000 000
124
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Módulo 3 – Desafio 2 – Criandoo Rodapé (6 / 6)
000 000
125
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
E com essas últimas linhas de código, criamos a estrutura da nossa página web e 
finalizamos o Desafio 2 com SUCESSO!!
Módulo 4
INTRODUÇÃO AO CSS
INTRODUÇÃO AO CSS
INTRODUÇÃO AO CSS
126
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Módulo 4 – O que é CSS (1 / 1)
000 000
127
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
CSS, que significa "Cascading Style Sheets" em inglês, é uma linguagem de marcação usada para controlar a apresentação e o 
estilo de elementos em documentos HTML (Hypertext Markup Language). Em outras palavras, o CSS é usado para definir como os 
elementos HTML devem ser exibidos em uma página da web, incluindo coisas como cores, fontes, espaçamento, posicionamento e 
muito mais.
O CSS separa a estrutura e o conteúdo de uma página web (geralmente definidos em HTML) da forma como essa página é estilizada 
e apresentada. Isso é benéfico porque permite que os desenvolvedores alterem o design de uma página sem ter que reescrever 
todo o conteúdo HTML. Além disso, o CSS permite criar layouts responsivos, adaptando a aparência da página de acordo com o 
tamanho da tela ou o dispositivo em que está sendo visualizada.
Os estilos em CSS são definidos por meio de regras que selecionam elementos HTML e especificam como eles devem ser estilizados. 
Essas regras podem ser aplicadas diretamente no documento HTML usando tags <style>, incorporadas em um arquivo CSS externo 
vinculado ao documento ou ainda podem ser definidas inline diretamente nos elementos HTML.
Style sheets, ou folhas de estilo em português, referem-se a documentos ou arquivos que contêm regras de estilo para controlar a 
apresentação de elementos em uma página da web. As folhas de estilo são usadas principalmente em conjunto com a linguagem 
de marcação HTML (Hypertext Markup Language) para definir o layout, cores, fontes, tamanhos e outros aspectos visuais de uma 
página da web.
As folhas de estilo podem ser escritas em diferentes linguagens, sendo o CSS (Cascading Style Sheets) a mais comum e amplamente 
utilizada. O CSS permite que os desenvolvedores definam estilos de maneira eficiente e flexível, separando a estrutura e o conteúdo 
da página da formatação e do estilo. Isso facilita a manutenção, o design responsivo e a consistência visual em um site.
Módulo 4 – As três formas de escrever CSS (1 / 10)
000 000
128
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Folhas de estilo, ou "style sheets", são utilizadas para controlar a apresentação e o estilo dos elementos em uma página da web. Elas 
desempenham um papel fundamental na criação de designs atraentes e na formatação consistente de páginas da web.
Existem três principais abordagens para aplicar folhas de estilo:
Estilos Embutidos (Inline Styles): Com estilos embutidos, você define estilos diretamente nos elementos HTML usando o atributo 
"style". Isso significa que os estilos são específicos para o elemento em que são definidos e se sobrepõem a quaisquer estilos 
externos ou internos. Embora seja útil para situações muito específicas, o uso excessivo de estilos embutidos pode tornar o código 
HTML menos legível e mais difícil de manter.
Estilos Internos (Internal Styles): Os estilos internos são definidos em um bloco <style> dentro do documento HTML, normalmente 
na seção <head>. Os estilos internos afetam todos os elementos que correspondem às regras definidas no documento. Isso permite 
um controle mais amplo, mas ainda se aplica apenas à página atual.
Estilos Externos (External Styles): Os estilos externos são definidos em um arquivo CSS separado e, em seguida, vinculados ao 
documento HTML usando a tag <link>. Essa é a abordagem mais comum e recomendada para projetos de desenvolvimento web. 
Os estilos externos podem ser reutilizados em várias páginas, promovendo a consistência visual em todo o site e tornando a 
manutenção mais eficiente.
Módulo 4 – As três formas de escrever CSS (2 / 10)
000 000
129
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Para entendermos melhor essas três maneiras, vamos criar um arquivo index.html com o elemento h1, com conteúdo "Meu título 
com formatação diferente" e uma tag p, "Um textinho qualquer".
Vamos utilizar a extensão Live Server, para observar o comportamento dos nosso elementos dentro do navegador.
Módulo 4 – As três formas de escrever CSS (3 / 10)
000 000
130
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
O primeiro comportamento será o conceito de style inline, no qual o nosso estilo será aplicado através da propriedade style a linha 
do elemento que vamos estilizar, nesse caso será o elemento H1.
Podemos também alterar outras propriedades de outros elementos, como o p, diretamente em seu elemento:
Módulo 4 – As três formas de escrever CSS (4 / 10)
000 000
131
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
A propriedade font-size do CSS define o tamanho da fonte de um elemento. Ela pode ser especificada em várias unidades, cada 
uma adequada para diferentes contextos. Aqui está uma visão geral rápida dos valores que você pode definir:
Valores Absolutos
• px (pixels): Define um tamanho fixo. Ex: font-size: 16px;
• pt (points): Muito usado em documentos impressos. Ex: font-size: 12pt;
• cm (centimeters), mm (millimeters), in (inches): Menos comuns, usados para tamanhos físicos. Ex: font-size: 2cm;
Valores Relativos
• em: Relativo ao tamanho da fonte do elemento pai. Ex: font-size: 1.5em;
• rem: Relativo ao tamanho da fonte da raiz (elemento <html>). Ex: font-size: 1rem;
• %: Relativo ao tamanho da fonte do elemento pai. Ex: font-size: 100%;
• vw (viewport width), vh (viewport height): Relativo às dimensões da janela de visualização. Ex: font-size: 5vw;
Palavras-chave
• xx-small, x-small, small, medium, large, x-large, xx-large: Tamanhos pré-definidos pelo navegador.
• larger, smaller: Ajusta o tamanho da fonte relativamente ao tamanho da fonte do elemento pai.
Módulo 4 – As três formas de escrever CSS (5 / 10)
000 000
132
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Usar CSS inline, ou seja, diretamente no atributo style de elementos HTML, geralmente não é considerado uma boa prática por 
várias razões. Primeiramente, a manutenção do código torna-se difícil. CSS inline espalha estilos diretamente no HTML, o que 
dificulta localizar e alterar estilos posteriormente, especialmente em projetos grandes. Isso pode levar a inconsistências e tornar a 
manutenção complexa. Além disso, o uso de CSS inline resulta em muita repetição de código, pois o mesmo estilo pode precisar ser 
aplicado a muitos elementos, aumentando o tamanho do HTML e dificultando alterações globais. Outra questão é a separação de 
preocupações. Boas práticas de desenvolvimento web recomendam manter a estrutura (HTML), apresentação (CSS) e 
comportamento (JavaScript) separados. CSS inline viola essa separação, misturando apresentação e estrutura.
Em termos de desempenho e caching, estilos CSS em arquivos separados podem ser cacheados pelo navegador, melhorando o 
desempenho da página. CSS inline não pode ser cacheado da mesma forma, o que pode aumentar o tempo de carregamento da 
página. A reutilização de estilos também é prejudicada. Estilos definidos inline não podem ser facilmente reutilizados em outros 
elementos ou páginas, ao contrário de estilos em arquivos CSS externos, que permitem aplicar as mesmas regras a múltiplos 
elementos e páginas com facilidade. Além disso, o uso de ferramentas de desenvolvimento, como pré-processadores (SASS, LESS), 
frameworks (Bootstrap, Tailwind), e práticas como BEM (Block Element Modifier), é dificultado ou impossível com CSS inline. A 
depuração de estilos inline pode ser mais complexa, já que os estilos não são centralizados e podem ser sobrepostos por estilos em 
cascata (CSS).
A responsividade também é um desafio com CSS inline. Gerenciar estilos responsivos diretamente no HTML é impraticável, 
enquanto arquivos CSS separados permitem o uso eficientede media queries e outras técnicas responsivas. Um exemplo 
comparativo ilustra isso: ao usar CSS inline, você pode ter um código HTML como <div style="color: red; font-size: 20px;">Texto em 
vermelho</div>, repetido várias vezes. Com CSS externo, você pode centralizar esses estilos em um arquivo styles.css e aplicar uma 
classe aos elementos, como <div class="text-red">Texto em vermelho</div>, tornando o código mais limpo e fácil de manter. 
Utilizar um arquivo CSS externo melhora a manutenção, reutilização e separação de preocupações, facilitando o desenvolvimento e 
a escalabilidade do projeto.
Módulo 4 – As três formas de escrever CSS (6 / 10)
000 000
133
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
A segunda forma de escrevermos CSS que vamos ver é o CSS interno, no qual construímos a estilização também dentro do arquivo 
html, porém toda a estilização ficará dentro do elemento <style></style>.
CSS interno refere-se à prática de incluir estilos CSS diretamente dentro do arquivo HTML, mas em um bloco <style> no cabeçalho 
do documento. Esta abordagem, situada entre o CSS inline e o CSS externo, pode ser útil em certas situações específicas. A principal 
vantagem do CSS interno é a facilidade de implementação, especialmente para páginas pequenas. Ele permite adicionar estilos de 
forma rápida e centralizada, sem precisar criar múltiplos arquivos. Diferente do CSS inline, onde os estilos estão espalhados pelos 
elementos HTML, o CSS interno centraliza todos os estilos em um só lugar no cabeçalho do documento, tornando-os mais fáceis de 
gerenciar e editar. Além disso, elimina a necessidade de múltiplos arquivos, simplificando a estrutura do projeto quando você não 
quer ou não pode criar arquivos separados.
Módulo 4 – As três formas de escrever CSS (7 / 10)
000 000
134
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Por outro lado, o CSS interno apresenta algumas desvantagens, especialmente em termos de manutenção e escalabilidade. Em 
projetos maiores, ou quando há necessidade de reutilização de estilos entre várias páginas, ele pode se tornar difícil de gerenciar, 
pois alterações nos estilos exigem que você edite cada página HTML individualmente. Também não segue completamente o 
princípio de separação de preocupações, que recomenda manter o conteúdo (HTML), a apresentação (CSS) e o comportamento 
(JavaScript) em arquivos separados para facilitar a manutenção e a clareza do código. Em termos de desempenho, embora melhor 
do que o CSS inline, o CSS interno impede o cache de estilos entre diferentes páginas, o que pode levar a um desempenho inferior 
comparado ao uso de um arquivo CSS externo, que pode ser cacheado pelo navegador.
Quando Usar CSS Interno
O CSS interno pode ser uma boa escolha quando você está criando uma página única ou um protótipo rápido, e não espera 
reutilizar esses estilos em outras páginas. Também pode ser útil em situações onde é necessário modificar estilos rapidamente sem 
a complexidade de configurar arquivos CSS externos. No entanto, para projetos maiores e mais complexos, o uso de CSS externo é 
geralmente preferível para manter o código organizado, escalável e de fácil manutenção.
Módulo 4 – As três formas de escrever CSS (8 / 10)
000 000
135
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
A terceira forma de escrever CSS e que iremos adotar em nosso curso é o CSS externo, e para isso vamos criar um arquivo novo com 
extensão .css, chamado style, que será nosso arquivo padrão de CSS.
Agora vamos Definir seus estilos dentro do arquivo CSS, escrevendo todas as regras de estilo que desejamos aplicar ao seu HTML.
Agora vamos vincular o arquivo CSS ao HTML: 
No documento HTML em que deseja aplicar os estilos, adicione um elemento <link> dentro da seção <head> para vincular o arquivo 
CSS externo. O atributo href deve apontar para o caminho do seu arquivo CSS.
Módulo 4 – As três formas de escrever CSS (9 / 10)
000 000
136
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
CSS externo refere-se à prática de escrever estilos CSS em um arquivo separado (.css) e vinculá-lo ao documento HTML por meio do 
elemento <link> no cabeçalho do HTML. Esta abordagem é considerada uma prática recomendada na maioria dos cenários de 
desenvolvimento web devido a várias vantagens que oferece.
A principal razão para usar CSS externo é a separação de preocupações, um conceito fundamental no desenvolvimento web. A 
separação de preocupações significa que diferentes aspectos de um projeto web, como conteúdo (HTML), apresentação (CSS) e 
comportamento (JavaScript), devem ser mantidos separados para facilitar a manutenção, escalabilidade e colaboração entre os 
membros da equipe.
Ao utilizar CSS externo, você mantém todos os estilos em um arquivo separado, tornando-os reutilizáveis e facilmente aplicáveis a 
várias páginas. Isso promove uma melhor organização do código, facilitando a manutenção e evitando a repetição desnecessária de 
estilos. Por exemplo, se você tiver um estilo que se aplica a vários elementos em diferentes páginas do seu site, só precisa definir 
esse estilo uma vez no arquivo CSS externo e ele será aplicado automaticamente em todas as páginas que o utilizam.
Outra vantagem significativa do CSS externo é o desempenho. Os navegadores podem armazenar em cache arquivos CSS externos, 
o que significa que eles só precisam ser baixados uma vez e podem ser reutilizados em várias páginas do mesmo site ou em visitas 
subsequentes à mesma página. Isso resulta em tempos de carregamento mais rápidos para os usuários e uma experiência de 
navegação mais suave.
Além disso, o CSS externo facilita a colaboração entre os membros da equipe de desenvolvimento. Como os estilos estão em um 
arquivo separado, várias pessoas podem trabalhar no mesmo projeto simultaneamente sem interferir no trabalho umas das outras. 
Isso é especialmente útil em equipes grandes ou projetos complexos.
Módulo 4 – As três formas de escrever CSS (10 / 10)
000 000
137
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
O uso de CSS externo é preferível porque:
• Promove a separação de preocupações, facilitando a manutenção e a organização do código.
• Permite a reutilização de estilos em várias páginas.
• Melhora o desempenho do site, graças ao caching de arquivos CSS pelos navegadores.
• Facilita a colaboração entre membros da equipe de desenvolvimento.
Essas vantagens tornam o CSS externo uma escolha recomendada na maioria dos projetos de desenvolvimento web.
Módulo 4 – Seletores no CSS (1 / 5)
000 000
138
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Seletores CSS
Seletores CSS são padrões que definem quais elementos HTML serão estilizados por determinadas regras CSS. Eles são usados para 
segmentar elementos específicos em uma página da web com base em seus tipos, classes, IDs, atributos e relações com outros 
elementos. Os seletores são combinados com declarações CSS para aplicar estilos aos elementos correspondentes.
Existem vários tipos de seletores CSS, cada um direcionando diferentes elementos HTML de maneiras específicas. Aqui estão alguns 
dos tipos mais comuns de seletores CSS:
• Seletores de Tipo: Direcionam elementos com base em seus tipos HTML.
Os Seletores de Tipo são utilizados para direcionar elementos HTML com base em seus tipos específicos. Cada elemento HTML tem 
um tipo associado a ele, como <h1>, <p>, <div>, <a>, entre outros. Esses seletores visam todos os elementos que correspondem ao 
tipo especificado.
Por exemplo:
• h1 seleciona todos os elementos <h1> na página.
• p seleciona todos os elementos <p> na página.
• div seleciona todos os elementos <div> na página.
Esses seletores são úteis quando você deseja aplicar um estilo específico a um tipo particular de elemento em toda a sua página. Por 
exemplo, você pode querer definir o tamanho da fonte para todos os cabeçalhos <h1> como 24px ou a cor do texto para todos os 
parágrafos <p> como cinza.
Módulo 4 – Seletores no CSS (2 / 5)
000 000
139
HTML E CSS IMPRESSIONADORI HASHTAG PROGRAMAÇÃO
Uma possível desvantagem dos seletores de tipo é que eles são muito genéricos e aplicam estilos a todos os elementos de um tipo 
específico na página. Isso pode levar a estilos indesejados ou não intencionais se não forem usados com cuidado.
Por exemplo, se você definir um estilo para todos os elementos <p> em sua página, isso afetará todos os parágrafos, mesmo aqueles 
dentro de áreas específicas da página que você não pretendia estilizar dessa maneira. Isso pode resultar em uma perda de controle 
sobre o design da página e tornar a manutenção mais difícil, especialmente em projetos grandes.
Além disso, os seletores de tipo não são tão flexíveis quanto outros tipos de seletores mais específicos, como seletores de classe ou 
seletores de ID. Eles aplicam estilos com base apenas no tipo de elemento, o que pode limitar a capacidade de estilizar elementos 
de maneira mais granular e seletiva.
Portanto, enquanto os seletores de tipo são úteis para aplicar estilos básicos a elementos específicos em uma página, é importante 
usá-los com cautela e considerar se outros seletores mais específicos podem ser mais apropriados para o seu caso de uso específico. 
Isso pode ajudar a evitar problemas de estilo indesejados e facilitar a manutenção do código CSS.
Módulo 4 – Seletores no CSS (3 / 5)
000 000
140
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
O seletor de ID é um tipo de seletor CSS que é usado para direcionar um elemento específico na página com base em seu ID único. 
Cada elemento HTML pode ter um ID único atribuído a ele usando o atributo id. O seletor de ID é representado pelo símbolo # 
seguido pelo nome do ID.
A hierarquia do seletor de ID em relação a outros seletores é determinada pela especificidade do seletor. A especificidade é uma 
maneira de determinar qual regra CSS deve ser aplicada a um elemento quando várias regras têm estilos conflitantes.
O seletor de ID é altamente específico porque seleciona um elemento com base em seu ID único, o que significa que ele tem 
precedência sobre outros seletores menos específicos, como seletores de classe, seletores de tipo e seletores de atributo.
Por exemplo, se você tiver uma regra CSS para um elemento específico com um seletor de ID e outra regra para o mesmo elemento 
com um seletor de classe, a regra com o seletor de ID terá precedência e será aplicada ao elemento, mesmo que a regra com o 
seletor de classe venha depois no código CSS.
Portanto, ao usar seletores de ID em seu CSS, você pode garantir que certos estilos sejam aplicados apenas a elementos específicos 
na página, tornando-os úteis para estilizar elementos exclusivos e individualizados. No entanto, é importante usar os seletores de ID 
com moderação e evitar seu uso excessivo, já que eles podem diminuir a reutilização de estilos e complicar a manutenção do código 
CSS.
Módulo 4 – Seletores no CSS (4 / 5)
000 000
141
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
O seletor de classe é um dos seletores mais comuns e poderosos em CSS. Ele é usado para direcionar elementos que possuem uma 
classe específica atribuída a eles no HTML. As classes são atributos que podem ser aplicados a vários elementos HTML e podem ser 
reutilizadas em diferentes partes do documento ou em várias páginas.
O seletor de classe é representado por um ponto . seguido pelo nome da classe desejada.
O seletor de classe oferece flexibilidade e reutilização, permitindo que você aplique o mesmo estilo a vários elementos sem precisar 
repetir o código CSS. Além disso, você pode aplicar várias classes a um único elemento, permitindo uma combinação de estilos.
A hierarquia do seletor de classe em relação a outros seletores é determinada pela especificidade do seletor. Em geral, os seletores 
de classe têm uma especificidade menor do que os seletores de ID, o que significa que eles têm menos precedência. No entanto, 
eles têm uma precedência maior do que os seletores de tipo e seletores universais.
Módulo 4 – Seletores no CSS (5 / 5)
000 000
142
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Atalho - Comentário
O atalho "CTRL + ;" é usado para comentar ou descomentar rapidamente uma linha de código CSS em 
alguns editores de texto. Ele adiciona ou remove os caracteres de comentário ("/" e "/") de uma linha de 
código, permitindo que você ative ou desative a linha de forma rápida e conveniente durante o 
desenvolvimento. Isso ajuda a economizar tempo e reduzir erros de digitação ao trabalhar com estilos CSS.
Módulo 4 – Combinando Seletores (1 / 3)
000 000
143
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Quando você está inspecionando um elemento em uma página da web usando as ferramentas de desenvolvedor do seu 
navegador (geralmente acessíveis pressionando F12 ou clicando com o botão direito em um elemento e selecionando "Inspecionar" 
ou "Inspecionar elemento"), você pode visualizar os estilos aplicados a esse elemento na guia "Elementos" ou "Inspector".
Aqui está como você pode fazer isso:
• Abra as Ferramentas de Desenvolvedor: Pressione F12 no seu teclado ou clique com o botão direito em qualquer parte da 
página da web e selecione "Inspecionar" ou "Inspecionar elemento" no menu contextual.
• Selecione o Elemento Desejado: Use o seletor de elementos na parte superior das ferramentas de desenvolvedor para selecionar 
o elemento que você deseja inspecionar. Basta clicar no elemento na página da web ou usar os botões de seta para navegar pela 
estrutura HTML.
• Visualize os Estilos Aplicados: Na guia "Elementos" ou "Inspector", você verá o HTML do elemento selecionado e também a seção 
"Styles" (ou "Estilos" em alguns navegadores). Nesta seção, você verá todos os estilos CSS aplicados ao elemento, incluindo estilos 
herdados e estilos de CSS externos ou embutidos.
• Você pode ver os estilos que são aplicados diretamente ao elemento (estilos inline), bem como os estilos que são herdados de 
elementos pai ou definidos em folhas de estilo externas.
• Cada regra de estilo exibe o seletor CSS que a originou, juntamente com as propriedades e valores associados.
• Navegue pelos Estilos: Você pode clicar nos estilos individuais para vê-los mais detalhadamente e até mesmo modificar 
temporariamente os valores para ver como isso afeta a aparência do elemento em tempo real.
• Use as Ferramentas de Desenvolvedor para Depurar: Além de visualizar os estilos, as ferramentas de desenvolvedor também 
oferecem outras funcionalidades úteis, como a capacidade de editar HTML e CSS em tempo real, depurar JavaScript, analisar o 
desempenho da página e muito mais.
Módulo 4 – Combinando Seletores (2 / 3)
000 000
144
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Os seletores de descendência são simplesmente usados para direcionar elementos que são descendentes de outros elementos em 
HTML. Eles permitem estilizar elementos específicos que estão aninhados dentro de outros elementos.
Por exemplo, se você tem um elemento filho (como <span>) que está dentro de um elemento pai (como <p>), você pode usar um 
seletor de descendência para estilizar esse elemento filho específico apenas quando ele estiver dentro do elemento pai.
Isso é feito escrevendo o seletor do elemento pai, seguido de um espaço e, em seguida, o seletor do elemento filho. Por exemplo, p 
span irá direcionar todos os elementos <span> que estão dentro de elementos <p>.
Essa abordagem é útil quando você precisa aplicar estilos específicos a elementos que estão organizados dentro de uma estrutura 
hierárquica em sua página da web. É uma maneira eficiente e precisa de estilizar elementos específicos em relação aos seus pais.
Módulo 4 – Combinando Seletores (3 / 3)
000 000
145
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
O seletor span.span-textinho é um exemplo de seletor de classe combinado com um seletor de tipo. Ele direciona especificamente 
os elementos <span> que também têm a classe "span-textinho" atribuída a eles.
• span é o seletor de tipo, que direciona todos os elementos<span> na página.
• .span-textinho é o seletor de classe, que direciona todos os elementos que possuem a classe "span-textinho".
Juntos, span.span-textinho direciona apenas os elementos <span> que também possuem a classe "span-textinho".
Usar um seletor como span.span-textinho é útil quando você deseja aplicar estilos específicos apenas a elementos <span> que 
tenham uma determinada classe. Isso oferece várias vantagens:
• Precisão na Estilização: Ao usar um seletor de classe combinado com um seletor de tipo, você pode aplicar estilos apenas a 
elementos <span> que atendam a critérios específicos, como ter uma determinada classe atribuída a eles. Isso evita que outros 
elementos <span> na página sejam afetados pelos mesmos estilos.
• Reutilização de Estilos: Atribuir uma classe específica a elementos <span> permite reutilizar estilos em vários lugares da sua 
página ou em várias páginas do seu site. Isso promove a consistência visual e facilita a manutenção do código CSS.
• Separação de Preocupações: Ao separar a seleção de elementos do estilo aplicado a eles, você adota uma prática conhecida 
como separação de preocupações. Isso torna seu código CSS mais organizado e legível, facilitando a compreensão e a 
manutenção futura.
• Especificidade Controlada: Usar um seletor de classe combinado com um seletor de tipo oferece um nível de especificidade 
controlada ao aplicar estilos. Isso significa que você pode direcionar com precisão os elementos desejados sem precisar recorrer a 
seletores mais genéricos ou complexos.
Módulo 4 – Estilizando textos (1 / 5)
000 000
146
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Conseguimos através da ferramenta do desenvolvedor (F12) na opção de selecionar um elemento, verificar as formatações que o 
elemento selecionado possui, exemplo se queremos verificar a formatação padrão de um H1.
E através disso podemos alterar algumas propriedades dentro do nosso arquivo CSS, nesse exemplo vamos modificar o tamanho e o 
tipo da fonte desse elemento:
Módulo 4 – Estilizando textos (2 / 5)
000 000
147
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Quando desejamos utilizar a mesma estilização para vários elementos a forma simples que podemos fazer é da seguinte maneira:
• Eficiência: Ao agrupar seletores, você pode aplicar as mesmas propriedades de estilo a vários elementos de uma só vez. Isso reduz 
a quantidade de código CSS necessário, tornando-o mais eficiente e fácil de gerenciar.
• Consistência: Usar o mesmo estilo de fonte em diferentes tipos de elementos (como títulos <h1>, <h2>, <h3> e parágrafos <p>) 
cria uma sensação de uniformidade visual em toda a página ou site. Isso é importante para garantir uma experiência do usuário 
coesa e profissional.
• Manutenção Simplificada: Se você precisar fazer alterações nos estilos de fonte mais tarde, agrupar os seletores permite que você 
faça essas alterações em um único lugar, em vez de ter que atualizar cada seletor individualmente. Isso simplifica o processo de 
manutenção e ajuda a evitar erros.
• Legibilidade: Ao agrupar seletores relacionados juntos, você torna seu código CSS mais legível e fácil de entender para outros 
desenvolvedores que possam estar trabalhando no mesmo projeto. Isso facilita a colaboração e o entendimento do código.
Módulo 4 – Estilizando textos (3 / 5)
000 000
148
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
A propriedade CSS font-style é usada para definir o estilo da fonte de um elemento de texto. Ela pode ter três valores principais:
• normal: Este é o valor padrão. A fonte é exibida no estilo normal, sem itálico ou obliquidade.
• italic: Este valor faz com que o texto seja exibido em itálico. Isso é geralmente uma versão inclinada da fonte, projetada para 
enfatizar palavras ou frases.
• oblique: Similar ao itálico, mas nem todas as fontes suportam este estilo. Quando a fonte não possui uma variante itálica, o estilo 
oblique é usado para inclinar a fonte na direção especificada.
Essa propriedade é especialmente útil para adicionar ênfase ou estilo visual a certos trechos de texto em uma página da web. Por 
exemplo, você pode usar font-style: italic; para destacar citações ou termos técnicos, enquanto o valor font-style: normal; é 
frequentemente usado para texto comum.
A propriedade CSS font-weight é usada para definir a espessura ou a "grossura" da fonte de um elemento de texto. Ela pode ser 
definida usando diferentes valores numéricos ou palavras-chave, que indicam a intensidade da espessura da fonte.
Alguns valores comuns para font-weight incluem:
• normal: Este é o valor padrão, que indica uma espessura de fonte normal.
• bold: Este valor indica uma fonte mais pesada ou em negrito.
• lighter: Este valor indica uma fonte mais leve do que o normal.
• bolder: Este valor indica uma fonte mais pesada do que o normal.
Além disso, existem valores numéricos que podem ser usados para definir a espessura da fonte com mais precisão. Por exemplo, 
font-weight: 400; é equivalente a normal, enquanto font-weight: 700; é equivalente a bold.
Essa propriedade é comumente usada para dar destaque a certos elementos de texto em uma página da web, como títulos, 
subtítulos ou partes importantes do conteúdo. A escolha da espessura da fonte pode afetar significativamente a aparência e a 
legibilidade do texto em uma página.
Módulo 4 – Estilizando textos (4 / 5)
000 000
149
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
A propriedade CSS line-height é usada para definir a altura da linha em um elemento de texto. Ela especifica a altura que uma linha 
de texto deve ter, o que afeta o espaçamento entre as linhas de texto dentro desse elemento.
Você pode definir o valor da propriedade line-height de várias maneiras:
• Valor fixo: Você pode especificar um valor em pixels, ems ou qualquer outra unidade de medida para definir a altura da linha de 
forma fixa.
• Valor unitário: Você pode especificar um valor unitário semelhante a 1.5, 1.2, etc. Isso multiplica o tamanho atual da fonte para 
determinar a altura da linha.
• Valor percentual: Você pode especificar um valor percentual que define a altura da linha em relação ao tamanho da fonte. Por 
exemplo, line-height: 150%; define a altura da linha como 150% do tamanho da fonte atual.
• Normal: Você também pode usar o valor normal, que define a altura da linha automaticamente com base no tamanho da fonte 
atual.
Controlar a altura da linha é importante para garantir uma boa legibilidade e aparência estética do texto em uma página da web. 
Uma linha muito apertada pode tornar o texto difícil de ler, enquanto uma linha muito espaçada pode desperdiçar espaço e tornar o 
texto mais difícil de seguir. A propriedade line-height permite ajustar o espaçamento entre as linhas para atender às necessidades 
específicas de design e legibilidade.
Módulo 4 – Estilizando textos (5 / 5)
000 000
150
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
A propriedade CSS text-transform é usada para especificar a transformação de texto em um elemento de texto. Ela permite 
modificar a capitalização do texto em um elemento, alterando como as letras são exibidas.
Existem várias opções para a propriedade text-transform:
• none: Este é o valor padrão. Ele não aplica nenhuma transformação de texto.
• capitalize: Transforma o primeiro caractere de cada palavra para maiúsculas.
• uppercase: Transforma todo o texto em letras maiúsculas.
• lowercase: Transforma todo o texto em letras minúsculas.
• initial: Define a propriedade como seu valor padrão.
• inherit: Herda o valor da propriedade de seu elemento pai.
Essa propriedade é útil para aplicar consistência na capitalização do texto em uma página da web. Por exemplo, você pode usar 
text-transform: uppercase; para garantir que todos os títulos sejam exibidos em letras maiúsculas, independentemente de como 
são escritos no HTML. Isso pode ser especialmente útil para garantir que o estilo do texto seja consistente em todo o site, 
independentemente de como o texto foi digitadooriginalmente.
Módulo 4 – Trabalhando com cores (1 / 5)
000 000
151
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
A propriedade CSS color é usada para definir a cor do texto de um elemento. Ela permite especificar a cor do texto usando uma 
variedade de formatos de cor, como nomes de cores, valores hexadecimais, valores RGB ou valores HSL.
Por exemplo, você pode definir a cor do texto para vermelho usando diferentes métodos:
• Nome da cor: color: red;
• Valor hexadecimal: color: #FF0000;
• Valor RGB: color: rgb(255, 0, 0);
• Valor HSL: color: hsl(0, 100%, 50%);
A propriedade color é amplamente usada para personalizar a aparência do texto em uma página da web. Você pode usá-la para 
garantir que o texto seja legível e se destaque do fundo, além de criar uma estética visual atraente para o seu conteúdo.
Módulo 4 – Trabalhando com cores (2 / 5)
000 000
152
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Vamos explorar cada método para definir a cor do texto em CSS com mais detalhes:
• Nome da Cor:
• Esta abordagem permite definir a cor do texto usando um nome de cor pré-definido, como "red", "blue", "green", entre outros.
• Essa é uma maneira simples e fácil de especificar a cor do texto, especialmente para cores comuns amplamente reconhecidas.
• No entanto, a gama de cores disponíveis é limitada aos nomes de cores definidos na especificação CSS, o que pode restringir 
as opções de cor.
• Valor Hexadecimal (Hex):
• O valor hexadecimal é uma representação numérica da cor que utiliza uma combinação de seis dígitos hexadecimais (0-9 e A-
F) para representar a intensidade de vermelho, verde e azul (RGB).
• Cada par de dígitos hexadecimais representa a intensidade de uma das cores primárias (R, G, B), em ordem. Por exemplo, 
"#FF0000" representa a cor vermelha pura, enquanto "#0000FF" representa a cor azul pura.
• Este método oferece uma ampla gama de cores disponíveis e é comumente usado devido à sua precisão e flexibilidade.
Módulo 4 – Trabalhando com cores (3 / 5)
000 000
153
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
• Valor RGB (Red Green Blue):
• O valor RGB permite definir a cor do texto especificando a intensidade de vermelho, verde e azul em uma escala de 0 a 255 
para cada cor.
• Por exemplo, rgb(255, 0, 0) representa a cor vermelha pura, onde o primeiro valor (255) é a intensidade de vermelho, seguido 
pela intensidade de verde (0) e azul (0).
• Essa abordagem fornece controle granular sobre a cor, permitindo ajustes precisos na intensidade de cada cor primária para 
obter a cor desejada.
• Valor HSL (Hue Saturation Lightness):
• O valor HSL representa a cor em termos de matiz (tonalidade), saturação e luminosidade.
• O matiz define a tonalidade da cor (0 a 360 graus), a saturação determina a pureza ou a quantidade de cinza na cor (0% a 
100%), e a luminosidade indica a claridade da cor (0% é preto, 100% é branco).
• Por exemplo, hsl(0, 100%, 50%) representa a cor vermelha pura, onde 0 é a tonalidade do vermelho, 100% é a saturação 
máxima e 50% é a luminosidade média.
• Este método oferece uma abordagem intuitiva para definir cores com base em características perceptuais, como matiz, 
saturação e luminosidade.
Módulo 4 – Trabalhando com cores (4 / 5)
000 000
154
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
O Visual Studio Code possui uma funcionalidade que exibe uma prévia da cor quando você digita um valor de cor CSS. Quando você 
digita uma cor em qualquer lugar que aceite código CSS, como em um arquivo CSS, HTML ou em uma propriedade CSS dentro de 
um arquivo HTML, o Visual Studio Code automaticamente exibe uma caixa de cor ao lado do valor da cor que você digitou.
Essa caixa de cor fornece uma representação visual da cor que você especificou, permitindo que você visualize rapidamente como 
será a cor no seu código. Além disso, você pode clicar na caixa de cor para abrir um seletor de cores mais avançado, que permite 
escolher a cor de uma paleta de cores ou inserir um valor hexadecimal, RGB ou HSL diretamente.
Essa funcionalidade é útil para facilitar a seleção e visualização de cores enquanto você escreve código CSS, tornando mais fácil 
escolher as cores desejadas e garantir uma aparência visual consistente em seu projeto.
Módulo 4 – Trabalhando com cores (5 / 5)
000 000
155
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Quando você está aplicando transparência a uma cor usando o modelo de cores RGB no CSS, você está na verdade adicionando um 
quarto valor à função rgba() (Red Green Blue Alpha), que representa a transparência da cor.
Por exemplo, se você tem a cor vermelha pura e deseja torná-la semi-transparente, você pode adicionar um valor de transparência 
(alfa) ao final da função rgba(). Este valor de transparência é um número entre 0 e 1, onde 0 representa total transparência 
(totalmente transparente ou invisível) e 1 representa opacidade total (totalmente sólido ou opaco).
Por exemplo:
• rgba(255, 0, 0, 0.5) representa a cor vermelha com 50% de transparência.
• rgba(0, 0, 255, 0.2) representa a cor azul com 20% de transparência.
Isso permite que você crie efeitos de transparência em elementos HTML, permitindo que o conteúdo subjacente seja parcialmente 
visível através da cor aplicada. Essa técnica é útil para criar sobreposições, sombreamentos suaves e outros efeitos visuais em 
elementos da página da web.
Módulo 4 – Estilizando hiperlinks (1 / 3)
000 000
156
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
A propriedade CSS text-decoration é usada para adicionar decorações visuais ao texto, como sublinhado, tachado, sublinhado duplo 
ou remoção da decoração padrão.
Alguns valores comuns para a propriedade text-decoration incluem:
• none: Remove todas as decorações de texto, como sublinhado ou tachado. Este é o valor padrão.
• underline: Adiciona uma linha abaixo do texto, geralmente indicando que é um link.
• overline: Adiciona uma linha sobre o texto.
• line-through: Adiciona uma linha no meio do texto, geralmente para indicar que foi riscado.
• underline overline: Adiciona uma linha abaixo e outra acima do texto.
• inherit: Herda a propriedade text-decoration do elemento pai.
Essa propriedade é frequentemente usada para estilizar links (<a>), mas também pode ser aplicada a qualquer elemento de texto 
para adicionar ou remover decorações conforme necessário. Por exemplo, você pode usar text-decoration: none; para remover 
sublinhados padrão de links ou text-decoration: line-through; para riscar o texto.
Você também pode especificar estilos de linha mais complexos, como dotted, dashed, wavy, entre outros, que controlam a 
aparência da linha de decoração.
Aqui está uma explicação desses valores adicionais:
• dotted: Adiciona uma linha pontilhada sob o texto.
• dashed: Adiciona uma linha tracejada sob o texto.
• wavy: Adiciona uma linha ondulada sob o texto.
Esses estilos de linha podem ser úteis para criar efeitos visuais mais interessantes em textos decorados, adicionando variedade aos 
sublinhados padrão. Por exemplo, você pode usar text-decoration: dotted; para adicionar um sublinhado pontilhado a um link.
Módulo 4 – Estilizando hiperlinks (2 / 3)
000 000
157
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
A propriedade text-decoration-line é uma versão mais específica da propriedade text-decoration, introduzida no CSS3, que 
permite definir apenas o estilo de linha de texto, como sublinhado, tachado, linha sobre o texto, entre outros.
Alguns valores possíveis para a propriedade text-decoration-line incluem:
• none: Remove todas as decorações de texto, como sublinhado ou tachado. Este é o valor padrão.
• underline: Adiciona uma linha abaixo do texto, geralmente indicando que é um link.
• overline: Adiciona uma linha acima do texto.
• line-through: Adiciona uma linha no meio do texto, geralmente para indicar que foi riscado.
• underline overline: Adiciona uma linha abaixo e outra acima do texto.
A principal diferença entre text-decoration e text-decoration-line éque text-decoration pode aceitar valores adicionais, como 
line-through e underline, enquanto text-decoration-line apenas aceita esses valores específicos relacionados à linha do texto.
Essa propriedade é útil quando você precisa definir apenas o estilo da linha de texto sem afetar outras decorações, como cores ou 
estilo de linha. Por exemplo, você pode usar text-decoration-line: underline; para adicionar sublinhado a um texto sem afetar 
outras decorações existentes.
Módulo 4 – Estilizando hiperlinks (3 / 3)
000 000
158
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
A propriedade text-decoration-color é usada para definir a cor da linha de decoração aplicada a um texto decorado, como um link 
ou texto com sublinhado. Ela permite especificar uma cor diferente da cor do texto para a linha de decoração.
Alguns pontos importantes sobre text-decoration-color:
• Valor Padrão: Se não for especificado, o valor padrão é geralmente a cor atual do texto (currentColor).
• Cor Personalizada: Você pode definir a cor da linha de decoração para ser diferente da cor do texto, fornecendo um valor de cor 
válido, como um nome de cor, valor hexadecimal, valor RGB ou valor HSL.
• Herança de Cor: Por padrão, a cor da linha de decoração é herdada do elemento pai, a menos que seja explicitamente definida 
em um elemento filho.
Essa propriedade é útil quando você deseja personalizar a cor da linha de decoração, tornando-a mais visível ou contrastante com o 
texto. Por exemplo, você pode usar text-decoration-color: blue; para aplicar uma linha de decoração azul a um link, mesmo que o 
texto seja de outra cor. Isso pode ajudar a destacar os links em uma página da web.
Módulo 4 – Desafio 1 – Formatando uma página em HTML (1 / 2)
000 000
159
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
No módulo anterior, você aprendeu os fundamentos 
essenciais de HTML, construindo uma página da web 
básica. Agora, é hora de dar um passo adiante e adicionar 
estilo à sua criação. Estamos prontos para explorar o 
mundo do CSS (Cascading Style Sheets) e transformar sua 
página HTML em algo visualmente atraente e profissional.
O CSS é uma linguagem de estilo que permite controlar a 
apresentação de elementos HTML em uma página da web. 
Com o CSS, podemos definir cores, fontes, margens, 
tamanhos e muitos outros aspectos visuais que tornam sua 
página única e cativante.
Seu desafio hoje é aplicar o CSS à página HTML que você 
desenvolveu anteriormente. Você terá a oportunidade de 
experimentar diferentes propriedades CSS, criar layouts 
interessantes e personalizar completamente a aparência 
da sua página.
Ao final deste desafio, você não apenas terá uma 
compreensão mais profunda do CSS, mas também terá 
uma página da web visualmente atraente e pronta para 
impressionar.
Módulo 4 – Desafio 1 – Formatando uma página em HTML (2 / 2)
000 000
160
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Todas as orientações para o seu desafio estão dentro do arquivo desafio-1.txt
Módulo 4 – Desafio 1 – Resolvendo o Desafio (1 / 5)
000 000
161
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Para iniciarmos o nosso desafio vamos criar um arquivo com extensão .css e linkar dentro do nosso arquivo html:
Agora vamos seguir as instruções do arquivo desafio-1.txt e ir adicionando as estilização dentro do nosso CSS, a primeira 
delas é que a fonte de todos os textos da página deverá ser Montserrat e, caso o navegador não consiga carregar, deverá 
usar uma fonte sans-serif.
Módulo 4 – Desafio 1 – Resolvendo o Desafio (2 / 5)
000 000
162
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Para iniciarmos o nosso desafio vamos criar um arquivo com extensão .css e linkar dentro do nosso arquivo html:
Vamos alterar o tamanho dos textos da página de acordo com a tabela --->
Dentro do CSS vamos aplicar os seguintes seletores e propriedades:
O próximo passo é que a legenda da imagem deverá ter 12px de tamanho e deverá estar em itálico.
Módulo 4 – Desafio 1 – Resolvendo o Desafio (3 / 5)
000 000
163
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
O link de compra deverá estar na cor #c44105 com
24px de tamanho, negrito e com um sublinhado duplo:
Os itens de lista deverão estar na cor #035276 e em itálico.
Módulo 4 – Desafio 1 – Resolvendo o Desafio (4 / 5)
000 000
164
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Vamos realçar o texto '75"' que está dentro do H1 com a cor #0588c4.
Os dois realces que fizemos na seção de Preço deverão ter a cor #0588c4. (Existem várias formas certas de fazer isso). Você 
pode trocar os códigos em HTML, só lembre de não perder a parte semântica do que tínhamos construído.
Módulo 4 – Desafio 1 – Resolvendo o Desafio (5 / 5)
000 000
165
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
E por último do nosso desafio 1 , os dois realces da seção de Condições deverão estar na cor #0588c4 e o realce do frete grátis 
deverá adicionar um sublinhado também. Lembre de não perder a parte semântica do HTML aqui também.
Módulo 4 – Desafio 2 – Formatando a Home da Hashtag (1 / 1)
000 000
166
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
No módulo anterior, você aprendeu os fundamentos do HTML e criou a estrutura básica do site da Hashtag. Agora, é hora de 
avançar e dar vida a esse site com um toque de estilo utilizando CSS (Cascading Style Sheets).
O CSS é a linguagem de estilo que nos permite controlar a aparência visual dos elementos HTML em uma página web. Com 
o CSS, podemos definir cores, tipos de fontes, espaçamentos, tamanhos e muitos outros aspectos visuais, transformando seu 
site simples em algo visualmente impressionante.
O desafio de hoje é aplicar CSS ao site da Hashtag que você desenvolveu. Vamos utilizar como base o site da Hashtag 
Treinamentos (https://www.hashtagtreinamentos.com/) e, através da ferramenta do desenvolvedor (F12), pegar as 
informações necessárias do layout utilizado, como fontes, cores, tamanhos e outras propriedades.
O objetivo para o Desafio 2 nesse módulo (Introdução ao CSS) é estilizar o esqueleto básico da Home da Hashtag 
Treinamentos que criamos ao final do módulo de Introdução ao HTML.
Como ainda não vimos tudo o que precisamos para concluir o desafio, vamos formatar apenas as coisas que já aprendemos.
Vamos precisar consultar MUITO o site da Hashtag. Essa vai ser uma ótima hora para se familiarizar com as Ferramentas do 
Programador. Vamos utilizá-las o tempo todo para entender o que está acontecendo no site que vamos reproduzir.
Ao completar este desafio, você não apenas melhorará suas habilidades em CSS, mas também terá uma transformação 
visual no seu site!
https://www.hashtagtreinamentos.com/
Módulo 4 – Desafio 2 – Formatando o cabeçalho (1 / 3)
000 000
167
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Nessa aula vamos iniciar os primeiros passos para estilizar o cabeçalho do seu site da Hashtag, o primeiro passo é criar um arquivo CSS e 
adicionar o seu link dentro do arquivo HTML.
Os primeiros elementos nos quais vamos trabalhar serão as nossas listas dentro do cabeçalho. Inicialmente vamos adicionar uma classe 
para as listas que estão com uma hierarquia maior, ou seja, as listas filhas do ul principal, que estão circuladas em amarelo:
Vamos adicionar a classe item-lista-cabecalho nessas li em destaque abaixo:
Módulo 4 – Desafio 2 – Formatando o cabeçalho (2 / 3)
000 000
168
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Com o auxílio da ferramenta do desenvolvedor, vamos selecionar os elementos e verificar as 
informações dos elementos.
O próximo passo é colocarmos a estilização do elemento, dentro do arquivo CSS.
• Selecionando Descendentes: Quando escrevemos .item-lista-cabecalho a no CSS, estamos 
dizendo ao navegador para selecionar todos os elementos <a> que estão dentro (descendentes 
de) de elementos <li class="item-lista-cabecalho">.
• Herança de Estilos: Agora, vamos abordar a lógica por trás disso. Imagine que você tenha estilizado 
os elementos <li>, definindo suacor de fundo, tamanho da fonte, etc. Por padrão, os elementos <a> 
dentro desses <li> não herdarão esses estilos automaticamente. No entanto, se quisermos que 
esses links também tenham os mesmos estilos que seus elementos pai (<li>), precisamos dizer 
explicitamente ao navegador para fazer isso.
• Transmitindo Estilos: Ao escrever .item-lista-cabecalho a no CSS, estamos basicamente dizendo:
"Para todos os elementos <a> que estão dentro de elementos <li>, aplique os estilos que definimos 
para os elementos <li>". Isso garante que os links herdem os estilos de seus itens de lista pai, 
proporcionando uma aparência uniforme e consistente dentro da lista.
Módulo 4 – Desafio 2 – Formatando o cabeçalho (3 / 3)
000 000
169
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Quando se trata de estilizar texto em um site, a escolha da fonte desempenha um papel crucial na aparência e na legibilidade do 
conteúdo. É por isso que frequentemente recorremos ao uso da propriedade font-family em estilos mais globais ou em diversos 
elementos de uma vez só.
• Consistência Visual: Ao definir a propriedade font-family em um nível mais global, como no seletor do corpo (body), você estabelece 
uma fonte padrão que será aplicada a todo o texto no site, a menos que seja especificado de outra forma. Isso ajuda a garantir uma 
aparência visual consistente em todas as páginas e elementos.
• Facilidade de Manutenção: Usar font-family de forma global simplifica a manutenção do site. Se você decidir alterar a fonte em algum 
momento, pode fazer isso em um único lugar (por exemplo, no seletor do corpo), e essa alteração será refletida em todo o site. Isso é 
especialmente útil em sites maiores, nos quais a consistência visual é essencial e a atualização de estilos pode se tornar trabalhosa se 
aplicada individualmente a cada elemento.
• Eficiência de Código: Reduzir a repetição de código é uma prática recomendada em desenvolvimento web. Ao aplicar a font-family 
em um nível mais global, você evita a necessidade de repetir a mesma declaração de estilo em vários elementos. Isso resulta em um 
código mais limpo e conciso, facilitando a leitura e a manutenção no longo prazo.
• Coerência na Experiência do Usuário: Uma fonte consistente em todo o site contribui para uma experiência de usuário coesa e 
profissional. Os visitantes do seu site podem se sentir mais confiantes e engajados quando a aparência do texto é uniforme e fácil de ler 
em todos os dispositivos e páginas.
Portanto, ao utilizar a propriedade font-family em estilos mais globais ou em diversos elementos de uma vez só, você não apenas melhora 
a consistência visual e a eficiência de código do seu site, mas também proporciona uma experiência de usuário mais agradável e 
profissional.
Módulo 4 – Desafio 2 – Formatando a Seção Hero (1 / 2)
000 000
170
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Agora vamos começar a estilização da seção Hero do nosso site, e vamos continuar utilizando a ferramenta do desenvolvedor para 
verificar os estilos aplicados para adicionarmos as propriedades dentro do nosso arquivo CSS.
O primeiro passo será adicionarmos a cor padrão do site nos elementos de forma global, então vamos adicionar a propriedade e 
valor nos elemetos:
Módulo 4 – Desafio 2 – Formatando a Seção Hero (2 / 2)
000 000
171
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Os próximos elementos que vamos começar sua estilização serão os botões da nossa seção, apenas nesse momento não vamos 
alterar a cor do texto que é branco e teríamos dificuldade de encontrar esses elementos nesse momento. Nesse elementos vamos 
adicionar classes também, lembrando que esses "botões" na verdade são elementos âncoras, em forma de botão por conta de 
estilização do CSS.
Módulo 4 – Desafio 2 – Formatando a Seção Conteúdos Gratuitos (1 / 3)
000 000
172
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Nesse momento vamos estilizar a nossa seção de conteúdos gratuitos, e através da ferramenta do desenvolvedor conseguimos 
verificar algumas das propriedades que vamos criar no nosso arquivo de estilização CSS.
O primeiro elemento que vamos inspecionar é o título dessa seção, e já conseguimos observar que ele não está em negrito e que e 
existe um trecho de seu texto realçado. Vamos adicionar ao elemento h2 a classe="gratuito-h2".
Módulo 4 – Desafio 2 – Formatando a Seção Conteúdos Gratuitos (2 / 3)
000 000
173
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Agora vamos criar a estilização do nosso span que está realçado dentro do nosso subtítulo h2. Para isso vamos criar uma classe para 
nosso span chamada "gratuito-realce". E podemos criar de duas formas:
Os próximos elementos que vamos modificar será os <h3> de Treinamento e Programação, vamos adicionar a mesma classe para 
eles, chamada "gratuito-h3" e aplicar os estilos.
Módulo 4 – Desafio 2 – Formatando a Seção Conteúdos Gratuitos (3 / 3)
000 000
174
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Nesse momento vamos trabalhar nas listas de cada um dos elemento h3 dessa seção. Vamos adicionar a classe="gratuito-link-lista" 
em todos os elementos de âncora que pertence a lista abaixo, tanto para o <h3> Treinamentos quanto o <h3> Programação.
Módulo 4 – Desafio 2 – Formatando a Seção Diferenciais (1 / 4)
000 000
175
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Agora vamos estilizar a nossa seção diferenciais utilizando a ferramenta do desenvolvedor verificaremos algumas das propriedades, o 
primeiro elemento que vamos inspecionar é o título dessa seção, e já conseguimos observar suas características. Vamos adicionar ao 
elemento h2 a classe="diferenciais-h2".
Vamos controlar o realce do elemento strong:
O próximo elemento que vamos inspecionar é o parágrafo e vamos adicionar uma classe chamada "diferenciais-p" e estilizar com a 
seguinte propriedade:
Módulo 4 – Desafio 2 – Formatando a Seção Diferenciais (2 / 4)
000 000
176
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Para estilizarmos os elementos <h3> dessa seção, vamos adicionar uma classe="diferenciais-h3" e as seguintes propriedades:
Dentro das configurações globais do nosso arquivo CSS, ou seja, as primeiras linhas de estilização, vamos subir o estilo 
aplicado para o elemento h1 e também criar um estilo padrão para elementos do tipo parágrafo:
Módulo 4 – Desafio 2 – Formatando a Seção Diferenciais (3 / 4)
000 000
177
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Conseguimos nesse momento verificar, que os elementos strong não utilizam o valor de 700, ou seja, que o font-weight desse 
elementos é um pouco mais suave, possuindo o valor de 600. Para isso vamos comentar uma especificação do nosso arquivo CSS e 
adicionar essa propriedade em nossa estrutura global. Além de colocarmos nosso elemento h2 também como padrão.
Módulo 4 – Desafio 2 – Formatando a Seção Diferenciais (4 / 4)
000 000
178
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Dentro dessa seção teremos mais um elemento <h3>, porém vamos estilizar ele com valores diferentes, então vamos localizar ele em 
nosso arquivo html e adicionar uma classe chamada "diferenciais-h3-empresas".
E para finalizar vamos criar a estilização para o realce dessa âncora, que está localizada dentro desse elemento h3.
Módulo 4 – Desafio 2 – Formatando a Seção o que Falam (1 / 1)
000 000
179
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
A seção o que falam possui poucos elementos nesse momento para estilizarmos, o que vamos adicionar é no elemento <h2> um span 
no texto que precisa estar em realce e esse span receberá uma classe chamada "oque falam-realce".
Observando o layout do site em relação aos nossos botões, vamos retornar na seção HERO e adicionar uma nova classe chamada 
botão, e também vamos colocar essa classe no botão da nossa seção o que falam, para padronizar algumas propriedades e valores, e 
quando falamos em padronizar é porque vamos utilizar essa classe na nossa estrutura global:
Seção Hero
Seção O que FalamMódulo 4 – Desafio 2 – Formatando a Seção na Mídia (1 / 1)
000 000
180
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Nesta seção da mídia, à medida que avançamos no desenvolvimento do nosso projeto, estamos começando a padronizar alguns 
estilos dentro do nosso arquivo CSS. Isso significa que estamos definindo estilos globais e específicos da seção para garantir 
consistência e coesão no design do nosso site. Como resultado, podemos observar que não será necessário criar nenhuma nova classe 
ou realizar estilizações adicionais, pois já implementamos as características corretas do layout dentro desta seção específica.
• Padronização de Estilos: Uma prática comum no desenvolvimento web é estabelecer estilos padronizados que se aplicam a todo o 
site ou a seções específicas. Isso é alcançado através da definição de estilos globais para elementos comuns, como tipografia, cores, 
espaçamento, etc., e também através da criação de estilos específicos para cada seção do site.
• Eficiência no Desenvolvimento: Ao padronizar os estilos dentro de uma seção da mídia, estamos economizando tempo e esforço 
no desenvolvimento. Em vez de criar novas classes ou estilizações para cada elemento individual, podemos reutilizar estilos 
existentes que já foram cuidadosamente projetados e implementados. Isso não apenas agiliza o processo de desenvolvimento, mas 
também reduz a probabilidade de erros e inconsistências no design.
• Consistência Visual: Manter uma aparência visual consistente é essencial para a experiência do usuário. Ao padronizar os estilos 
dentro de uma seção, garantimos que todos os elementos dentro dessa área do site sigam as mesmas diretrizes de design. Isso cria 
uma experiência coesa e profissional para os visitantes, aumentando a credibilidade e a usabilidade do site.
• Facilidade de Manutenção: Uma vez que os estilos foram padronizados e implementados, a manutenção do site se torna mais 
simples e eficiente. Futuras atualizações ou ajustes no design podem ser feitos de forma rápida e fácil, pois já temos uma estrutura 
sólida de estilos estabelecida. Isso permite que nossa equipe de desenvolvimento trabalhe de forma mais ágil e produtiva, focando 
em melhorias e novos recursos.
Módulo 4 – Desafio 2 – Formatando a Seção Blog da Hashtag (1 / 3)
000 000
181
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Na seção do blog, podemos observar que não será necessário realizar estilizações adicionais ao nosso elemento h2, pois já 
implementamos as características corretas do layout dentro do nosso projeto.
Agora precisamos modificar alguns elementos dentro dos posts. Lembrando que todos os posts receberão as mesmas classes e 
características.
Módulo 4 – Desafio 2 – Formatando a Seção Blog da Hashtag (2 / 3)
000 000
182
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Os primeiros elementos que vamos alterar é o primeiro parágrafo dos posts, vamos adicionar a classe "blog-postadoem" em todos 
os primeiros parágrafos de cada um dos posts. E adicionar a estilização para a classe e também para âncora dentro do elemento.
Depois vamos modificar o elemento âncora, que representa o título do nosso post. Vamos adicionar uma nova classe a esse 
elemento, chamado "blog-titulopost"
Módulo 4 – Desafio 2 – Formatando a Seção Blog da Hashtag (3 / 3)
000 000
183
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
E o último elemento do nosso post é mais um parágrafo, e vamos adicionar a classe "blog-descricaopost".
Verifique se aplicou todas as classes á todos os elementos de cada um dos posts da nossa seção Blog.
Módulo 4 – Desafio 2 – Formatando a Seção Como ajudar (1 / 2)
000 000
184
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Nessa seção vamos começar com o elemento h2, no qual possui um texto com realce. Primeiro vamos adicionar um elemento span e 
colocar o conteúdo realçado dentro dele e também colocar uma classe chamada "comoajudar-realce".
Os próximos elementos serão os itens de lista dessa seção. Desta vez, vamos colocar uma classe no elemento pai, o nosso elemento 
<ul>, ou seja, nossa lista não ordenada. A classe será "comoajudar-lista".
Módulo 4 – Desafio 2 – Formatando a Seção Como ajudar (2 / 2)
000 000
185
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Os parágrafos dessa seção também possuem o valor de font-size: 19px, e para adicionarmos essa característica todos eles receberam 
uma classe chamada "comoajudar-paragrafo"
Para as demais características vamos utilizar os elementos filhos das classe e colocar as novas propriedades:
Módulo 4 – Desafio 2 – Formatando a Seção Minicurso (1 / 1)
000 000
186
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Na seção Minicurso, como temos elementos de formulário no qual ainda não vamos alterar a estilização, vamos aplicar apenas as 
alterações no elemento do h2, para isso vamos adicionar a classe "minicurso-realce" e a seguinte estilização.
A partir dessa seção, conseguimos verificar que essa é uma estrutura que estamos repetindo em alguns elementos, então vamos 
refatorar o nosso CSS, e as classes que vamos deixar padronizadas como "realce-semibold".
Módulo 4 – Desafio 2 – Formatando a Seção Rodapé (1 / 2)
000 000
187
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Na nossa última seção Rodapé vamos estilizar os primeiros três parágrafos, porém cada um deles receberá uma classe e uma 
estilização:
A classe "rodape-titulo" nós vamos replicar, ou seja, adicionar essas classes em alguns outros elementos dessa seção:
Módulo 4 – Desafio 2 – Formatando a Seção Rodapé (2 / 2)
000 000
188
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Podemos verificar que já existem estruturas com a estilização global. E para finalizarmos o nosso rodapé é estilizar os nossos links:
Vamos adicionar a esses elementos a classe "rodape-link" e vamos alterar a sua cor.
Módulo 5
APROFUNDANDO NO HTML
APROFUNDANDO NO HTML
APROFUNDANDO NO HTML
189
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Módulo 5 – Apresentando o módulo (1 / 1)
000 000
190
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Bem-vindo ao módulo "Aprofundando no HTML"! Vamos explorar aspectos avançados do HTML, capacitando você com 
conhecimentos sobre tags e componentes essenciais para a criação de páginas web robustas e dinâmicas.
Temas abordados:
• Tags Avançadas e Componentes:
• Citações: Uso das tags <blockquote> e <q> para citações.
• Abreviações: Utilização da tag <abbr> para definir abreviações e acrônimos.
• Detalhes de Contato: Apresentação de informações de contato com <address>.
• Códigos: Exibição de código com <code>, <pre>, e <samp>.
• Datas: Marcação de datas e horários com <time>.
• Estruturas de Documento: Organização semântica com <header>, <footer>, <article>, <section>, e <aside>.
• Componentes:
• Formulários: Criação de formulários eficientes usando <form>, <input>, <textarea>, e <button>.
• Tabelas: Construção de tabelas acessíveis com <table>, <thead>, <tbody>, <tfoot>, <tr>, <th>, e <td>.
• Iframes: Incorporação de conteúdo externo com <iframe>.
• Paginação: Implementação de paginação para melhorar a navegação.
• Carrossel: Criação de carrosséis de imagens e conteúdo.
Este módulo visa elevar suas habilidades de HTML, permitindo a criação de páginas web sofisticadas, funcionais e acessíveis. 
Prepare-se para aprimorar seu domínio dessa linguagem essencial!
Módulo 5 – Citações, Abreviações e Detalhes de contato (1 / 4)
000 000
191
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Tags de citação ou avançadas são mecanismos usados em linguagens de marcação e em sistemas de gerenciamento de conteúdo 
para identificar e formatar trechos específicos de texto. Eles são amplamente utilizados para melhorar a organização, a legibilidade e a 
semântica de documentos e páginas web. Vou detalhar cada um desses conceitos:
Tags de Citação
As tags de citação são usadas para marcar citações de outras fontes, diferenciando-as do texto principal. Elas ajudam a indicar que o 
conteúdo foi retiradode outra obra, garantindo a atribuição adequada e ajudando a evitar plágio. Em HTML, por exemplo, temos duas 
tags principais de citação:
• <blockquote>: Usada para citações longas. O conteúdo dentro dessa tag é geralmente exibido com uma indentação.
• <cite>: Usada para citar a fonte de uma obra. É geralmente usada junto com <blockquote> ou para referenciar títulos de obras em 
textos.
Módulo 5 – Citações, Abreviações e Detalhes de contato (2 / 4)
000 000
192
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
A tag <blockquote> pode incluir o atributo cite para fornecer a URL da fonte da citação. Este atributo não é exibido na página, mas 
pode ser útil para SEO, metadados e para fornecer informações adicionais sobre a origem da citação. Aqui está um exemplo de como 
usar o atributo cite com a tag <blockquote>:
A tag <q> em HTML é usada para delimitar citações curtas, incorporadas diretamente no texto. Esta tag é diferente da tag 
<blockquote>, que é usada para citações mais longas e que normalmente são exibidas como um bloco separado do texto principal. 
As citações dentro da tag <q> são geralmente exibidas entre aspas pelo navegador. Assim como a tag <blockquote>, a tag <q> 
também pode usar o atributo cite para fornecer a URL da fonte da citação.
Módulo 5 – Citações, Abreviações e Detalhes de contato (3 / 4)
000 000
193
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Tags de abreviação em HTML são usadas para indicar abreviações ou acrônimos no texto. Essas tags fornecem informações adicionais 
sobre a abreviação, geralmente na forma de um texto expandido que descreve o que a abreviação significa. Isso melhora a 
acessibilidade e a clareza do conteúdo, especialmente para leitores que podem não estar familiarizados com a abreviação.
A tag <abbr> é usada para marcar abreviações. Você pode usar o atributo title para fornecer a forma completa da abreviação, que 
aparecerá como uma dica (tooltip) quando o usuário passar o mouse sobre a abreviação.
Neste exemplo, "HTML" é a abreviação de "HyperText Markup Language ". Quando o usuário passa o mouse sobre "HTML", a forma 
completa é exibida como uma dica.
Módulo 5 – Citações, Abreviações e Detalhes de contato (4 / 4)
000 000
194
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Em HTML, há tags específicas que ajudam a estruturar e formatar detalhes de contato de maneira clara e semântica. Essas tags 
são úteis para fornecer informações de contato, como nomes, endereços, números de telefone e outras informações pessoais ou 
organizacionais.
A tag <address> é usada para definir informações de contato de um autor ou proprietário de um documento ou artigo. É uma 
tag semântica que indica que o conteúdo dentro dela é uma seção de detalhes de contato.
• Acessibilidade: Usar a tag <address> melhora a semântica e a acessibilidade do seu documento, indicando claramente que o 
conteúdo é uma seção de informações de contato.
Módulo 5 – Códigos e Datas (1 / 3)
000 000
195
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Tags de código são usadas em HTML para exibir blocos de código ou trechos de código em uma página da web. Elas ajudam a 
formatar e destacar o código para facilitar a leitura e a compreensão por parte dos desenvolvedores e usuários. As duas tags 
principais para exibir código em HTML são <code> e <pre>, com finalidades ligeiramente diferentes.
A tag <code> é usada para envolver pequenos trechos de código incorporados no texto. Ela é ideal para destacar palavras-
chave, variáveis, funções ou outros elementos de código em um parágrafo ou frase.
A tag <pre> é usada para exibir blocos de código pré-formatados, mantendo a formatação original, como espaços em branco e 
quebras de linha. É útil para exibir trechos de código que precisam manter a formatação exata, como blocos de código HTML, 
CSS, JavaScript ou qualquer outra linguagem de programação.
Módulo 5 – Códigos e Datas (2 / 3)
000 000
196
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
A tag <var> em HTML é usada para definir uma variável em um contexto matemático ou em um texto técnico. Ela é usada para 
indicar que o conteúdo dentro da tag representa uma variável ou um argumento em uma equação, fórmula ou expressão 
matemática.
A tag <samp> em HTML é usada para definir uma amostra de saída de um programa de computador ou de um script. Ela é 
comumente usada para exibir o resultado de um código de programação ou de um comando de terminal, destacando-o como 
saída do sistema.
A tag <kbd> em HTML é usada para definir o texto que representa entrada do teclado, como teclas pressionadas ou atalhos de 
teclado. Ela é comumente usada para mostrar ao usuário as teclas que ele deve pressionar para realizar uma determinada ação.
Módulo 5 – Códigos e Datas (3 / 3)
000 000
197
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
As tags de data em HTML são usadas para representar datas e horários de maneira semântica, permitindo que os navegadores e 
mecanismos de busca compreendam o significado dos dados de data em uma página da web. 
A tag <time> é usada para representar datas e/ou horários específicos. Ela pode incluir um ou mais dos seguintes atributos: 
datetime, pubdate e aria-hidden.
Módulo 5 – Entrando mais a fundo na estruturas dos documentos (1 / 3)
000 000
198
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Tags semânticas são elementos HTML que adicionam significado estrutural ao conteúdo de uma página da web, facilitando a 
compreensão tanto para os navegadores quanto para os desenvolvedores e usuários. Aqui estão alguns exemplos de tags 
semânticas avançadas e suas funções:
• <header>: Encontrado no topo da página ou de cada seção principal, o cabeçalho contém informações importantes, como o 
título da página, logotipo e possivelmente links de navegação.
• <main>: Esta tag é essencial para definir o conteúdo principal da página. Ele contém o núcleo do conteúdo que os visitantes 
estão procurando, como artigos, postagens de blog, produtos em uma loja online, etc.
• <footer>: Localizado no final da página, o rodapé contém informações adicionais, como links de contato, políticas de 
privacidade, direitos autorais e outras informações relevantes. É uma parte importante para a conclusão da experiência do 
usuário na página.
• <nav>: Embora seja encontrado no topo ou no cabeçalho da página em muitos sites, a seção de navegação é considerada 
menos crucial do que o <main> e <footer>, pois fornece acesso a outras partes do site, mas não é o foco principal do 
conteúdo.
• <article>: Usado para conteúdo independente e autocontido, como postagens de blog ou notícias, o <article> é importante, 
mas pode não estar presente em todas as páginas de um site, dependendo do tipo de conteúdo que está sendo exibido.
• <section>: Embora a tag <section> seja usada para agrupar conteúdo relacionado semanticamente, ela pode ser vista como 
menos essencial na estrutura geral de um site. No entanto, é útil para organizar o conteúdo em partes distintas, como 
capítulos de um livro ou seções de uma página.
Módulo 5 – Entrando mais a fundo na estruturas dos documentos (2 / 3)
000 000
199
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Uma <div> em HTML é um elemento de divisão genérico que é usado para agrupar e estruturar outros elementos HTML em 
uma página da web. O nome "div" é uma abreviação de "divisão". A tag <div> não possui significado semântico específico e é 
frequentemente usada como um contêiner genérico para outros elementos, permitindo aos desenvolvedores agrupar e estilizar 
partes específicas de uma página da web.
Principais Características da <div>:
• Semântica Neutra: Ao contrário de tags como <header>, <footer>, <nav>, etc., que têm significado semântico específico, a 
<div> não tem significado inerente. Ela é usada principalmente para fins de organização e estilização.
• Versatilidade: A <div> pode ser usada em uma variedade de contextos e para diversos fins. Por exemplo, ela pode ser usada 
para criar layouts de página,agrupar elementos para estilização com CSS, ou envolver partes específicas do conteúdo para 
manipulação com JavaScript.
• Bloco de Construção: A <div> é frequentemente usada como um bloco de construção básico para criar estruturas mais 
complexas em uma página da web. Por exemplo, um desenvolvedor pode usar várias <div>s para criar colunas em um layout 
de página.
Módulo 5 – Entrando mais a fundo na estruturas dos documentos (3 / 3)
000 000
200
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
CONSIDERAÇÕES FINAIS
• Semântica Adequada: Use as tags semânticas de acordo com a função semântica do conteúdo. Por exemplo, o <header> 
deve ser usado apenas para o cabeçalho da página, não para cabeçalhos de seções individuais.
• Organização Lógica: Organize o conteúdo da página de forma lógica e hierárquica. Use as tags semânticas para refletir a 
estrutura lógica do conteúdo da página.
• Acessibilidade: Certifique-se de que a estrutura da sua página é acessível a todos os usuários, incluindo aqueles que usam 
tecnologias assistivas. Use as tags semânticas de forma apropriada para melhorar a acessibilidade do seu site.
• Manutenção e Legibilidade do Código: Evite o uso excessivo de <div>s aninhadas e estruturas complicadas que possam 
tornar o código difícil de manter e entender. Mantenha o código limpo e organizado.
Módulo 5 – Formulários (1 / 5)
000 000
201
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Um formulário em HTML é um elemento de marcação usado para criar campos interativos em uma página da web, onde os 
usuários podem inserir e enviar informações. Ele permite que os visitantes forneçam dados, como texto, números, seleções de 
opções, caixas de seleção e botões de rádio.
Os formulários HTML são criados usando a tag <form> e contêm vários elementos de entrada, como <input>, <textarea>, 
<select>, entre outros. Quando o usuário preenche os campos e clica no botão de envio dentro do formulário, os dados são 
geralmente enviados para um servidor web para processamento adicional.
Os formulários HTML são uma parte essencial do desenvolvimento da web, pois são usados em uma variedade de cenários, 
desde simples caixas de pesquisa até formulários de registro complexos.
A tag <form> é usada para criar um formulário em uma página da web. Ela envolve um conjunto de elementos de entrada, 
como campos de texto, botões de rádio, caixas de seleção e botões de envio.
• action: Este atributo especifica para onde os dados do formulário serão enviados quando o usuário clicar no botão de envio. 
Pode ser um URL relativo ou absoluto.
• method: Este atributo especifica como os dados do formulário serão enviados. Ele pode ter um dos dois valores: "get" ou 
"post". Quando definido como "get", os dados são anexados à URL como parâmetros de consulta. Quando definido como 
"post", os dados são enviados no corpo da solicitação HTTP.
Módulo 5 – Formulários (2 / 5)
000 000
202
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
• Elementos de entrada: Dentro da tag <form>, você pode incluir diversos elementos de entrada, como <input>, <textarea>, <select>, 
etc. Esses elementos coletam informações dos usuários.
A tag <input> é um dos elementos mais versáteis em HTML, usada para criar diversos tipos de campos de entrada em formulários. Aqui 
estão mais detalhes sobre a tag <input>:
• type: Este é um atributo obrigatório que define o tipo de campo de entrada que o elemento <input> representa. Existem vários valores 
possíveis para o atributo "type", incluindo:
• text: Cria um campo de texto simples onde os usuários podem digitar texto.
• password: Cria um campo de senha onde os caracteres digitados são ocultados.
• checkbox: Cria uma caixa de seleção que permite aos usuários selecionar uma ou mais opções.
• radio: Cria um botão de rádio que permite aos usuários selecionar apenas uma opção de um conjunto de opções.
• submit: Cria um botão de envio que envia o formulário quando clicado.
• file: Cria um campo de entrada para selecionar arquivos para upload.
• email, number, date, url, entre outros: Esses tipos específicos de entrada fornecem validação e comportamento específicos para 
tipos específicos de dados.
• name: Este atributo é usado para identificar o campo quando o formulário é enviado para o servidor. Cada campo de entrada deve ter 
um nome exclusivo dentro do formulário.
• id: O atributo "id" é opcional, mas útil para associar um rótulo (usando a tag <label>) a um campo de entrada. Também é útil para 
selecionar e manipular o campo usando JavaScript ou CSS.
• value: Este atributo define o valor inicial do campo de entrada. Para campos de texto, é o texto predefinido. Para caixas de seleção e 
botões de rádio, é o valor que será enviado para o servidor se o campo estiver marcado.
• placeholder: Este atributo é opcional e fornece um texto de exemplo que desaparece quando o usuário começa a digitar no campo. 
Ele é útil para fornecer dicas sobre o que deve ser inserido no campo.
• required: Este atributo é usado para tornar um campo obrigatório. Se presente, o formulário não pode ser enviado até que o campo 
seja preenchido.
Módulo 5 – Formulários (3 / 5)
000 000
203
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
• name: Cada elemento de entrada dentro do formulário deve ter um atributo "name" que identifica o campo no servidor quando o 
formulário é enviado. Isso é usado para acessar os dados enviados pelo usuário.
A tag <label> em HTML é usada para associar um rótulo descritivo a um elemento de entrada, como um campo de texto, uma caixa de 
seleção ou um botão de opção. Aqui estão alguns detalhes sobre a tag <label>:
• For: O atributo "for" da tag <label> especifica qual elemento de entrada ela está associada. O valor do atributo "for" deve ser o mesmo 
que o valor do atributo "id" do elemento de entrada. Isso conecta o rótulo ao campo de entrada e oferece alguns benefícios 
importantes, como:
• Quando um usuário clica no rótulo, o navegador coloca o foco no campo de entrada associado.
• Torna os formulários mais acessíveis, facilitando a seleção do campo de entrada para usuários que usam tecnologias assistivas, 
como leitores de tela.
• Conteúdo: O conteúdo dentro da tag <label> é o texto descritivo que será exibido na interface do usuário.
Módulo 5 – Formulários (4 / 5)
000 000
204
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Vamos utilizar de exemplo para construirmos o nosso formulário, o Newsletter do site da Hashtag:
Então vamos adicionar um novo input que será responsável pelo email.
O atributo placeholder em HTML é usado em elementos de entrada, como <input> e <textarea>, para fornecer um texto de exemplo ou 
uma dica sobre o tipo de informação que se espera que seja inserida nesse campo.
O texto fornecido no atributo placeholder geralmente dá uma pista ao usuário sobre o formato ou o tipo de informação que deve ser 
inserido no campo. Por exemplo, um campo de entrada de data pode ter um placeholder como "DD/MM/AAAA", enquanto um campo de 
entrada de e-mail pode ter um placeholder como "exemplo@dominio.com".
Módulo 5 – Formulários (5 / 5)
000 000
205
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Quando um botão está vinculado ao envio (submit) de um formulário em HTML, significa que clicar nesse botão irá enviar os dados 
preenchidos no formulário para o servidor especificado na tag <form>. Isso é útil para permitir que os usuários enviem os dados do 
formulário quando estiverem prontos.
Normalmente, um botão vinculado ao envio de um formulário é do tipo <input> com o atributo type definido como "submit" ou 
"button", ou do tipo <button> com o atributo type definido como "submit".
Se o botão estiver fora da tag <form>, ele não será automaticamente vinculado ao envio do formulário, a menos que seja feito por meio 
de JavaScript.
Módulo 5 – Tabelas (1 / 6)
000 000
206
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Uma tabela em HTML é uma estrutura organizada de linhas e colunas usada para exibir dados de forma tabularem uma 
página da web. Ela é criada usando a tag <table> e consiste em várias outras tags que definem partes diferentes da tabela. 
Aqui estão os elementos principais de uma tabela em HTML:
• <table>: Esta é a tag principal que envolve toda a tabela. Ela contém todas as outras tags que definem a estrutura da tabela.
• <tr>: Esta é a tag que define uma linha da tabela. Ela deve ser usada dentro da tag <table>. Cada linha da tabela contém 
uma ou mais células.
• <td>: Esta é a tag que define uma célula de dados em uma tabela. Ela deve ser usada dentro da tag <tr>. O conteúdo de 
cada célula é exibido dentro dela.
• <th>: Similar à tag <td>, <th> define uma célula de cabeçalho em uma tabela. É usada dentro da tag <tr> para criar uma 
linha de cabeçalho. O texto dentro de uma célula de cabeçalho é geralmente exibido em negrito e centralizado por padrão.
• Atributos de estilização: Você pode usar atributos de estilo, como border, cellpadding, cellspacing, entre outros, na tag 
<table> para controlar a aparência e o espaçamento da tabela.
Módulo 5 – Tabelas (2 / 6)
000 000
207
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Dentro de uma tabela HTML, a tag <caption> é usada para fornecer um título ou uma legenda descritiva para a tabela. Esta tag 
é opcional e deve ser colocada imediatamente após a tag de abertura <table> e antes das tags de <thead>, <tbody>, <tfoot> 
ou qualquer outra tag de conteúdo da tabela.
Agora vamos construir algumas linhas dentro da nossa tabela, e usaremos a tag <tr> (table row). Dentro de uma linha da 
tabela precisamos adicionar outro elemento, a tag <td> (table data), que é o local para adicionar os dados.
Módulo 5 – Tabelas (3 / 6)
000 000
208
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Vamos continuar adicionando informações e analisando o comportamento dos nossos elementos dentro da nossa tabela:
Para melhorarmos nossa estrutura de tabela, vamos retirar a legenda armazenada na caption, e adicionar um elemento <tbody>.
A tag <tbody> em HTML é usada para agrupar o conteúdo das células de uma tabela que contêm os dados principais da tabela. Ela é 
usada em conjunto com as tags <table> e <tr>, que definem a estrutura geral da tabela e suas linhas, respectivamente.
Módulo 5 – Tabelas (4 / 6)
000 000
209
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
A tag <thead> em HTML é usada para definir o cabeçalho de uma tabela. Ela agrupa as linhas de uma tabela que contêm os títulos das 
colunas ou outras informações importantes relacionadas ao conteúdo da tabela.
O uso da tag <thead> é uma prática recomendada em HTML, pois ajuda a melhorar a acessibilidade da tabela e fornece um contexto 
claro para os leitores de tela e outros dispositivos assistivos. Além disso, contribui para a semântica do código HTML, tornando-o mais 
compreensível tanto para os desenvolvedores quanto para os motores de busca.
Dentro da tag <thead>, cada linha (<tr>) geralmente contém células de cabeçalho (<th>) que representam os títulos das colunas da 
tabela.Então será usada em conjunto com a tag <th>, que representa as células de cabeçalho em uma tabela HTML. A tag <thead> 
agrupa todas as linhas que contêm os cabeçalhos das colunas, e esses cabeçalhos são definidos com a tag <th>.
Módulo 5 – Tabelas (5 / 6)
000 000
210
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
A tag <tfoot> em HTML é usada para definir o rodapé de uma tabela. Ela agrupa as linhas que contêm informações de rodapé, como 
totais, sumários ou outras informações relevantes para o conteúdo da tabela.O uso da tag <tfoot> é útil para fornecer informações de 
resumo ou totais no final de uma tabela, ajudando a destacar os resultados mais importantes.
A tag <colgroup> em HTML é usada para agrupar uma ou mais colunas de uma tabela HTML. Ela é útil quando você deseja aplicar 
estilos ou atributos a várias colunas de uma vez, em vez de ter que aplicá-los individualmente a cada célula de uma coluna.
Módulo 5 – Tabelas (6 / 6)
000 000
211
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
A tag <tfoot> em HTML é usada para definir o rodapé de uma tabela. Ela agrupa as linhas que contêm informações de rodapé, como 
totais, sumários ou outras informações relevantes para o conteúdo da tabela.O uso da tag <tfoot> é útil para fornecer informações de 
resumo ou totais no final de uma tabela, ajudando a destacar os resultados mais importantes.
Aqui, a tag <colgroup> está sendo usada para definir um grupo de colunas em uma 
tabela HTML. Dentro dessa tag, são definidas três colunas usando as tags <col>.
• A primeira coluna (<col>) está recebendo um estilo específico de background 
(background-color: red;). Isso significa que todas as células dessa coluna terão um 
fundo vermelho.
• As duas colunas subsequentes (<col>) não têm estilos ou atributos específicos 
definidos. Isso significa que elas não terão nenhuma formatação adicional aplicada a 
elas, então seguirão o estilo padrão definido pela tabela ou qualquer outro estilo CSS 
aplicado globalmente.
O uso de <colgroup> e <col> é útil para aplicar estilos ou atributos a várias colunas de 
uma vez, em vez de ter que aplicá-los individualmente a cada célula de uma coluna. Isso 
pode ajudar a simplificar o código HTML e tornar a formatação mais consistente em uma 
tabela.
Módulo 5 – Iframe (1 / 4)
000 000
212
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
O conceito de "embedar" está intimamente relacionado ao uso do elemento <iframe> em HTML.
O elemento <iframe> é uma ferramenta fundamental para incorporar conteúdo de outras fontes em uma página da web. Ele permite 
que você "embede" documentos HTML completos ou qualquer outro tipo de conteúdo, como vídeos, mapas, widgets de mídia social, 
entre outros.
Ao utilizar <iframe>, você está essencialmente incorporando um documento HTML externo dentro do documento atual. Isso é muito 
útil para integrar conteúdos de diferentes fontes em uma única página da web.
Por exemplo, se você quiser "embedar" um vídeo do YouTube em sua página, você pode usar um <iframe> com o código fornecido 
pelo YouTube para incorporar o vídeo diretamente em sua página. Da mesma forma, se você quiser "embedar" um mapa do Google, 
você pode usar um <iframe> com o código fornecido pelo Google Maps para incorporar o mapa em sua página.
Portanto, o elemento <iframe> é uma ferramenta poderosa para o processo de "embedar" conteúdo de fontes externas em uma 
página da web, permitindo uma integração flexível e eficiente de diferentes tipos de mídia e conteúdo.
O elemento <iframe> em HTML (Inline Frame) é usado para incorporar outro documento HTML dentro do documento atual. Esses 
documentos podem ser de qualquer tipo, incluindo HTML, XML, SVG e até mesmo arquivos de vídeo ou áudio.
Módulo 5 – Iframe (2 / 4)
000 000
213
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Quando você usa o elemento <iframe> em HTML e define o atributo src com um URL específico, o navegador realmente carrega e 
exibe o conteúdo desse URL dentro da janela do <iframe>, assim como um navegador separado faria. No entanto, há algumas 
diferenças importantes a serem observadas:
• Contido dentro da página pai: O conteúdo carregado dentro do <iframe> está contido dentro da página pai. Isso significa que, 
embora o conteúdo seja exibido dentro do <iframe>, ele faz parte da página principal e não é um navegador independente.
• Limitações de segurança: Devido às políticas de segurança do navegador, o conteúdo dentro do <iframe> tem algumas restrições.
Por exemplo, scripts dentro do <iframe> geralmente têm um escopo restrito e não podem interagir livremente com a página pai.
• Controle de tamanho: Você pode definir o tamanho do <iframe> usando os atributos width e height. Isso permite que você 
controle o espaço ocupado pelo conteúdo carregado dentro do <iframe> dentro da página pai.
Módulo 5 – Iframe (3 / 4)
000 000
214
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Um exemplo são os vídeos de youtube que carregamos na página da Hashtag,que são no formato de iframe.
Módulo 5 – Iframe (4 / 4)
000 000
215
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
• src: Especifica o URL do recurso a ser incorporado no <iframe>. Por exemplo: <iframe src="pagina.html"></iframe>.
• width: Define a largura do <iframe>. Pode ser especificado em pixels (por exemplo, <iframe width="500">) ou em porcentagem do 
tamanho da janela do navegador (por exemplo, <iframe width="50%">).
• height: Define a altura do <iframe>. Assim como o atributo width, pode ser especificado em pixels ou em porcentagem (por 
exemplo, <iframe height="300"> ou <iframe height="50%">).
• frameborder: Controla a exibição da borda ao redor do <iframe>. Um valor de "0" remove a borda, enquanto "1" a exibe. Exemplo: 
<iframe frameborder="0"></iframe>.
• scrolling: Define se barras de rolagem são exibidas dentro do <iframe>. Valores possíveis são "yes" para exibir barras de rolagem, 
"no" para ocultá-las e "auto" para exibir barras de rolagem apenas quando necessário. Exemplo: <iframe scrolling="no"></iframe>.
• sandbox: Este atributo permite restringir o comportamento do documento incorporado usando uma lista de restrições. Isso é útil 
para evitar ataques de scripts maliciosos. Exemplo: <iframe sandbox="allow-same-origin allow-scripts"></iframe>.
• name: Define um nome para o <iframe>, que pode ser usado como o alvo para links de destino. Exemplo: <iframe 
name="meu_iframe"></iframe>.
• allowfullscreen: Permite ou nega ao documento dentro do <iframe> a capacidade de entrar no modo de tela cheia. Exemplo: 
<iframe allowfullscreen></iframe>.
Módulo 5 – Desafio 1 - Apresentando o Desafio (1 / 1)
000 000
216
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Seja bem-vindo ao Desafio 1 do módulo "Aprofundando no HTML". Este desafio é uma oportunidade para você colocar em prática os 
conhecimentos adquiridos até agora e enfrentar novos desafios.
Para começar, você precisará baixar o arquivo "desafio-1.html" da pasta "Do zero". Dentro deste arquivo, você encontrará todas as 
informações necessárias para realizar as tarefas propostas.
Prepare-se para aplicar conceitos de semântica HTML, estilização inline, abreviações, citações com links, manipulação de código CSS, 
criação de tabelas e formulários HTML, entre outras habilidades.
Dentro do arquivo, encontrará instruções detalhadas sobre como aplicar cada elemento no desafio.
Módulo 5 – Desafio 1 - Construindo juntos (1 / 7)
000 000
217
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Seguindo as instruções do desafio, através do arquivo desafio-1.txt,e a primeira tarefa é que vamos precisar dividir a nossa página de 
acordo com a estrutura que aprendemos até aqui. Logo, teremos que introduzir as três grandes seções de uma página, além das 
seções menores.
A primeira tag semântica que vamos utilizar é para o Cabeçalho, nossa tag <header>. O nosso cabeçalho será composto pelas 
seguintes estruturas:
O nosso elemento header, irá ser aplicado envolvendo o elemento svg e a ul, que possui links de navegação
Módulo 5 – Desafio 1 - Construindo juntos (2 / 7)
000 000
218
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Entendendo como o nosso cabeçalho está estruturado, e como adicionamos o elementos header para melhorar sua semântica, 
também vamos adicionar a tag nav, para envolver nossos links de navegação que o nosso cabeçalho possui.
Agora está na hora de localizarmos na estrutura do nosso site o que se refere ao nosso Rodapé e adicionaremos o elemento footer.
Módulo 5 – Desafio 1 - Construindo juntos (3 / 7)
000 000
219
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Agora que adicionamos as tags que representam nosso cabeçalho e nosso rodapé, sabemos que todo o restante do conteúdo será 
envolvido em uma tag main, e vamos começar a adicionar as seções que cada parte representa.
Para identificar cada seção, vamos utilizar os elementos de h2 que estão separando os nossos conteúdos, exceto pela primeira seção 
que irá iniciar no elemento do h1. E todos os demais h2 serão envolvidos por uma tag section.
Módulo 5 – Desafio 1 - Construindo juntos (4 / 7)
000 000
220
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
O próximo passo é que a logo da MDN deverá ter 150px de largura, mas como será a única estilização que vamos fazer na página, 
não é necessário criar um arquivo css para isso. Vamos utilizar a estilização inline, dentro do elemento svg e adicionar a propriedade 
width.
A seguir vamos seguir a instrução: No primeiro parágrafo que mencionarmos "HTML" ou "CSS", você deverá criar uma abreviação 
com o nome completo da linguagem.
Módulo 5 – Desafio 1 - Construindo juntos (5 / 7)
000 000
221
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Coloque o ano de criação do HTML dentro de uma tag que os computadores consigam entender.
Agora vamos adicionar um citação com o link da citação junto ao elemento de parágrafo, vamos adicionar um elemento âncora 
que envolva a citação e adicionar também a tag adequada para citação, nesse caso <cite>:
Módulo 5 – Desafio 1 - Construindo juntos (6 / 7)
000 000
222
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Agora vamos colocar em todas as tags em HTML para 
serem exibidas na página final da forma correta, isto é, 
como um código.
E na segunda citação da página, você deverá usar uma 
citação inline. Utilizando a tag <q>.
A próxima modificação será referente ao código em CSS dentro 
da página que deverá ser retratado exatamente do jeito que ele 
seria visualizado dentro de um arquivo CSS.
Logo no parágrafo seguinte, fazemos uma referência ao código 
em CSS. Retrate o seletor como se fosse uma variável.
Módulo 5 – Desafio 1 - Construindo juntos (6 / 7)
000 000
223
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Nesse momento vamos transformar o modelo de tabela 
em uma tabela HTML.
Vamos utilizar a tag Iframe para criarmos o contexto de 
navegação para referenciar um site, assim como fizemos no 
exemplo da aula.
Módulo 5 – Desafio 1 - Construindo juntos (7 / 7)
000 000
224
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Substitua os parágrafos utilizados para retratar o 
formulário pelo formulário em si.
E para finalizar a página use a forma adequada de retratar 
informações de contato.
Módulo 5 – Desafio 2 - Explicando as novidades (1 / 1)
000 000
225
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Neste módulo "Aprofundando no HTML", você já percorreu um caminho significativo de aprendizado, explorando as 
nuances e capacidades avançadas que o HTML oferece. Agora, chegou o momento de colocar em prática tudo o que foi 
absorvido. Este é o Desafio 2, uma oportunidade para consolidar seus conhecimentos ao aplicar as tags e componentes 
avançados aprendidos, aprimorando a página que você construiu até o momento.
O desafio é claro: transformar a Home da Hashtag, respeitando a estrutura e o conteúdo da página real, enquanto 
incorpora os seguintes focos do módulo:
Citações, Abreviações e Detalhes de Contato
• blockquote, q, cite e address
Códigos e Datas
• code, pre, var, kbd, samp e time:
Estrutura dos Documentos
• header, nav, main, article, aside, section e footer:
• div e span:
Formulários
Tabelas
iFrames
Ao longo deste desafio, sua tarefa é integrar essas diversas tags e componentes na página da Home da Hashtag. A meta é 
não apenas aplicar esses elementos, mas também assegurar que a página resultante seja funcional, esteticamente 
agradável e fiel à estrutura original.
Este é o momento de demonstrar seu domínio do HTML, transformando o conhecimento teórico em prática efetiva. 
Mergulhe no desafio, explore sua criatividade e técnica, e veja a página ganhar vida com uma nova profundidade e 
riqueza de detalhes.
Divirta-se e bom trabalho!
Módulo 5 – Desafio 2 - Completando o Cabeçalho (1 / 1)
000 000
226
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
No HTML, a semântica é fundamental para organizar o conteúdo de uma página de forma que seja compreensível tanto para 
humanosquanto para máquinas, como motores de busca e leitores de tela. Então vamos envolver nosso cabeçalho na tag header 
e a lista de navegação em nav.
Módulo 5 – Desafio 2 - Completando a Seção Hero (1 / 3)
000 000
227
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
A primeira tag semântica que vamos adicionar nessa aula é a tag main, que envolverá todo o conteúdo do nosso site com 
exceção do nosso cabeçalho, que já utilizamos a tag header para identificar, e o nosso rodapé.
Agora vamos adicionar a tag section para envolver toda a nossa seção Hero. Lembrando que cada seção do nosso site, depois 
colocaremos dentro um tag section, para separar seus conteúdos semanticamente.
Módulo 5 – Desafio 2 - Completando a Seção Hero (2 / 3)
000 000
228
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Muitas estruturas vão estar relacionadas a construção do CSS, mas conseguimos observando o site, entender como alguns 
elementos estão estruturados, que no caso da seção hero, conseguimos verificar que as informações estão em um bloco separado 
do vídeo. Vamos utilizar a estrutura de uma div, pois ela é um bloco genérico.
Módulo 5 – Desafio 2 - Completando a Seção Hero (3 / 3)
000 000
229
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Vamos substituir a imagem que está representando o vídeo da nossa seção, pelo elemento que aprendemos no módulo que é o 
Iframe, e para termos todas as informações dele correta, vamos utilizar a ferramenta do desenvolvedor e copiar a referência do 
elemento e substituir no nosso arquivo HTML.
Módulo 5 – Desafio 2 - Completando a Seção Conteúdos Gratuitos (1 / 2)
000 000
230
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
A primeira modificação que vamos na nossa seção conteúdos 
gratuitos, é envolver todos os seus elementos dentro da tag 
section, para definirmos e separar de forma semântica a nossa 
seção.
Observar dentro da seção os elementos que estão agrupados e 
envolve-los em uma div, cada grupo terá um elemento div 
encapsulando.
O bloco de Treinamentos também será encapsulado por uma 
div, assim como o da Programação.
Módulo 5 – Desafio 2 - Completando a Seção Conteúdos Gratuitos (2 / 2)
000 000
231
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Dentro do bloco de Treinamentos e Programação, vamos também encapsular as âncoras, lembrando que cada um 
desses blocos será feito o mesmo processo :
Módulo 5 – Desafio 2 - Completando a Seção Diferenciais (1 / 2)
000 000
232
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Como fizemos nas demais seções, vamos envolver toda 
a nossa seção diferencias dentro de um elementos 
section, e depois analisaremos quais elementos estão 
estão agrupados e quais outras mudanças vamos 
precisar realizar nessa seção.
Dentro dessa seção, teremos 5 subdivisões que criaremos 
utilizando o elemento div, para envolver cada uma delas.
Módulo 5 – Desafio 2 - Completando a Seção Diferenciais (2 / 2)
000 000
233
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Continuando com as subdivisões da seção: Vamos envolver todas as imagens das empresas em 
uma única div.
Módulo 5 – Desafio 2 - Completando a Seção O que falam e Na mídia (1 / 2)
000 000
234
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Nessa aula vamos modificar as seções O que falam e 
Na mída, o primeiro passo é envolver cada uma das 
seções por uma tag section.
Agora vamos começar as subdivisões na seção o que 
falam:
Módulo 5 – Desafio 2 - Completando a Seção O que falam e Na mídia (2 / 2)
000 000
235
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Agora vamos começar as subdivisões na seção na mídia:
Módulo 5 – Desafio 2 - Completando a Seção Blog da Hashtag (1 / 1)
000 000
236
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Na seção do Blog da Hashtag, vamos englobar toda a seção dentro da tag section, e depois observar as suas subdivisões, 
que no caso dessa seção, conseguimos visualizar através de caixas bem definidas de cada Post.
Cada post será envolvido por uma div.
Módulo 5 – Desafio 2 - Completando a Seção Como ajudar (1 / 1)
000 000
237
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Na seção Como ajudar, vamos encapsular a seção inteira dentro da tag section, e verificar que ela possui um bloco já definido pelo 
elemento <ul> que engloba toda a sua lista, e vamos criar uma subdivisão para os elementos de parágrafos ficarem agrupados:
Módulo 5 – Desafio 2 - Completando a Seção Minicurso (1 / 2)
000 000
238
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Até o momento aprendemos tags importantes para estruturar o HTML, na seção minicurso vamos utilizar a tag form para 
modificarmos os nossos campos de entrada Nome e E-mail, além de lembrando que essa seção será encapsulado primeiramente 
por uma tag section.
Vamos criar nosso formulário com a palavra form, e substituir alguns dos elementos, criando dois inputs com suas respectivas 
labels.
Módulo 5 – Desafio 2 - Completando a Seção Minicurso (2 / 2)
000 000
239
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
O próximo passo é envolver cada um dos nossos inputs e 
labels dentro de uma div.
E para finalizar a nossa seção minicurso, vamos adicionar um 
botão de envio dentro do nosso formulário.
Módulo 5 – Desafio 2 - Completando o Rodapé (1 / 3)
000 000
240
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Agora que finalizamos o header/cabeçalho e todas as seções do nosso main, vamos adicionar ao nosso rodapé, a tag footer que 
encapsulará todos os elementos do rodapé.
E vamos analisar no site da Hashtag, como estão agrupados os elementos desse footer, para sabermos quais tags unir com uma div, 
ou com uma tag semântica que aprendemos ao longo desse módulo.
Módulo 5 – Desafio 2 - Completando o Rodapé (2 / 3)
000 000
241
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
A primeira parte será dividir em subdivisões utilizando a tag div, com exceção a estrutura Newsletter que será um formulário e para 
isso utilizaremos a tag form.
Módulo 5 – Desafio 2 - Completando o Rodapé (3 / 3)
000 000
242
HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
Agora para finalizarmos o nosso rodapé, vamos refatorar os elementos do Newsletter e modificar para um formulário.
	Slide 1
	Slide 2
	Slide 3
	Slide 4
	Slide 5
	Slide 6
	Slide 7
	Slide 8
	Slide 9
	Slide 10
	Slide 11
	Slide 12
	Slide 13
	Slide 14
	Slide 15
	Slide 16
	Slide 17
	Slide 18
	Slide 19
	Slide 20
	Slide 21
	Slide 22
	Slide 23
	Slide 24
	Slide 25
	Slide 26
	Slide 27
	Slide 28
	Slide 29
	Slide 30
	Slide 31
	Slide 32
	Slide 33
	Slide 34
	Slide 35
	Slide 36
	Slide 37
	Slide 38
	Slide 39
	Slide 40
	Slide 41
	Slide 42
	Slide 43
	Slide 44
	Slide 45
	Slide 46
	Slide 47
	Slide 48
	Slide 49
	Slide 50
	Slide 51
	Slide 52
	Slide 53
	Slide 54
	Slide 55
	Slide 56
	Slide 57
	Slide 58
	Slide 59
	Slide 60
	Slide 61
	Slide 62
	Slide 63
	Slide 64
	Slide 65
	Slide 66
	Slide 67
	Slide 68
	Slide 69
	Slide 70
	Slide 71
	Slide 72
	Slide 73
	Slide 74
	Slide 75
	Slide 76
	Slide 77
	Slide 78
	Slide 79
	Slide 80
	Slide 81
	Slide 82
	Slide 83
	Slide 84
	Slide 85
	Slide 86
	Slide 87
	Slide 88
	Slide 89
	Slide 90
	Slide 91
	Slide 92
	Slide 93
	Slide 94
	Slide 95
	Slide 96
	Slide 97
	Slide 98
	Slide 99
	Slide 100
	Slide 101
	Slide 102
	Slide 103
	Slide 104
	Slide 105
	Slide 106
	Slide 107
	Slide 108
	Slide 109
	Slide 110
	Slide 111
	Slide 112
	Slide 113
	Slide 114
	Slide 115
	Slide 116
	Slide 117
	Slide 118
	Slide 119
	Slide 120
	Slide 121
	Slide 122
	Slide 123
	Slide 124
	Slide 125
	Slide 126
	Slide 127
	Slide 128
	Slide 129
	Slide 130
	Slide 131
	Slide 132
	Slide 133
	Slide 134
	Slide 135
	Slide 136
	Slide 137
	Slide 138
	Slide 139
	Slide 140
	Slide 141
	Slide 142
	Slide 143
	Slide 144
	Slide 145
	Slide 146
	Slide 147
	Slide 148
	Slide 149
	Slide 150
	Slide 151
	Slide 152
	Slide 153
	Slide 154
	Slide 155
	Slide 156
	Slide 157
	Slide 158
	Slide 159
	Slide 160
	Slide 161
	Slide 162
	Slide 163
	Slide 164
	Slide 165
	Slide 166
	Slide 167
	Slide 168
	Slide 169
	Slide170
	Slide 171
	Slide 172
	Slide 173
	Slide 174
	Slide 175
	Slide 176
	Slide 177
	Slide 178
	Slide 179
	Slide 180
	Slide 181
	Slide 182
	Slide 183
	Slide 184
	Slide 185
	Slide 186
	Slide 187
	Slide 188
	Slide 189
	Slide 190
	Slide 191
	Slide 192
	Slide 193
	Slide 194
	Slide 195
	Slide 196
	Slide 197
	Slide 198
	Slide 199
	Slide 200
	Slide 201
	Slide 202
	Slide 203
	Slide 204
	Slide 205
	Slide 206
	Slide 207
	Slide 208
	Slide 209
	Slide 210
	Slide 211
	Slide 212
	Slide 213
	Slide 214
	Slide 215
	Slide 216
	Slide 217
	Slide 218
	Slide 219
	Slide 220
	Slide 221
	Slide 222
	Slide 223
	Slide 224
	Slide 225
	Slide 226
	Slide 227
	Slide 228
	Slide 229
	Slide 230
	Slide 231
	Slide 232
	Slide 233
	Slide 234
	Slide 235
	Slide 236
	Slide 237
	Slide 238
	Slide 239
	Slide 240
	Slide 241
	Slide 242