0% acharam este documento útil (0 voto)

6 visualizações17 páginas

Introdução ao HTML e URLs em Web Design

O documento apresenta uma introdução ao HTML, detalhando sua definição, sintaxe, características e aplicações. Ele aborda a estruturação de páginas web, uso de URLs absolutas e relativas, e a criação de links internos, além de exemplos práticos de navegação e uso de favicons. Também discute a tag <picture> para imagens responsivas e a interatividade em imagens com a tag <map>.

Enviado por

kensley oliveira

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato DOCX, PDF, TXT ou leia on-line no Scribd

0% acharam este documento útil (0 voto)

6 visualizações17 páginas

Introdução ao HTML e URLs em Web Design

Enviado por

kensley oliveira

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato DOCX, PDF, TXT ou leia on-line no Scribd

HTML - HyperText Markup Language; CSS – Cascading Style Sheet; JavaScript

Definição  Organização: <div>, <span>, <section>, <article>  Menos flexível se o site mudar de domínio ou estrutura.

HTML (HyperText Markup Language) é a linguagem padrão usada ✅ URL Relativo

para criar páginas e conteúdo na web. Ela estrutura textos, imagens,
Aplicações
 Refere-se a arquivos no mesmo domínio ou diretório.
links, vídeos e outros elementos, organizando o conteúdo visualizado
 Desenvolvimento de websites e blogs.  Mais fácil de manter em projetos locais ou hospedagem
nos navegadores. interna.
 Criação de interfaces web.
 Pode ser:
 Documentação online.
Sintaxe o Relativo ao mesmo diretório (./)
 Estruturação de sistemas e aplicativos web.
A sintaxe do HTML é baseada em tags (ou "etiquetas") que o Relativo ao diretório pai (../)
delimitam os elementos do conteúdo. As tags são envolvidas por
 Ideal para links internos ao site.
sinais de menor e maior (por exemplo: <p>). Muitas têm uma tag de Exemplo Simples
abertura (<tag>) e uma tag de fechamento (</tag>). <!DOCTYPE html>
<p>Este é um parágrafo.</p> <html lang="pt-BR"> 🧩 3. Funcionalidades / Usos Comuns
<head> Tipo de URL Funcionalidade comum
<meta charset="UTF-8"> Absoluto Acessar recursos externos, links para outros sites
Características
<title>Minha Página</title>
 Hierárquico: Os elementos podem conter outros Navegação dentro do mesmo site, carregamento
</head> Relativo
elementos (estrutura em árvore). de imagens e scripts locais
<body>
 Independente de plataforma: Funciona em todos os
<h1>Bem-vindo ao meu site!</h1>
navegadores. 🧾 4. Sintaxe
<p>Este é um exemplo básico de HTML.</p>
 Textual: Facilita leitura e edição por humanos. <a href="[Link] o site</a> ✅ URL Absoluto:
 Extensível com CSS e JavaScript: Para estilização e </body> <a href="[Link] página
interatividade. </html> externa</a>
<img src="[Link] alt="Logo">

Propriedades 🔗 URL ABSOLUTO E RELATIVO

✅ URL Relativo:
 Semântico: Utiliza tags com significado próprio (ex: 🌐 1. Definição

<header>, <footer>, <article>). Tipo de URL Definição
<a href="[Link]">Sobre</a>
 Modular: Pode ser combinado com outras tecnologias (ex: Endereço completo que inclui protocolo,
URL Absoluto 
CSS, JS, APIs). domínio e caminho do recurso.
<a href="produtos/[Link]">Camisa</a>
 Interpretado: Não é compilado; é lido diretamente pelo Caminho parcial para um recurso, relativo à
URL Relativo 
navegador. localização atual do documento HTML. <a href="../[Link]">Voltar à Home</a>
⚙️2. Características e Propriedades 
Funcionalidade das Tags ✅ URL Absoluto <img src="imagens/[Link]" alt="Logo Local">
 Estrutura: <html>, <head>, <body>  Contém protocolo (http/https), domínio e caminho
 Texto: <h1> a <h6>, <p>, <strong>, <em> completo. 5. Aplicação Prática
 Listas: <ul>, <ol>, <li>  Funciona em qualquer lugar da web. 📁 Estrutura de diretório exemplo:
 Links e mídia: <a>, <img>, <video>, <audio>  Usado para links externos, imagens de outro site, APIs /meu-site/

 Formulários: <form>, <input>, <label>, <button> etc. │

HTML - HyperText Markup Language; CSS – Cascading Style Sheet; JavaScript

├── [Link] 📌 Sintaxe: </a>

├── [Link] <a href="[Link] target="_blank">
├── [Link] <img src="[Link]" alt="Logotipo da empresa" width="150">
🎯 Vantagens do <picture>:
├── imagens/ </a>
 Otimiza performance (carrega imagens menores em telas
│ └── [Link]
menores).
├── produtos/ 🧩 Explicação:
 Melhora responsividade.
│ └── [Link]  <a href="...">: link de destino.
 Permite trocar formatos (ex: .webp para navegadores
 target="_blank": abre o link em uma nova aba (opcional).
🔗 Exemplos de aplicação: modernos e .jpg para compatibilidade).
 <img> dentro da tag <a>: torna a imagem clicável.
📌 Também é possível usar formatos modernos:
URL Relativo
 <picture>

<a href="[Link]">Sobre</a> 2. Usando <picture> para Imagens Adaptáveis (Responsivas) <source srcset="[Link]" type="image/webp">

<a href="produtos/[Link]">Camisa</a> A tag <picture> permite carregar imagens diferentes com base no <source srcset="[Link]" type="image/jpeg">

<img src="imagens/[Link]" alt="Logo"> tamanho da tela, tipo de dispositivo ou resolução (ideal para design <img src="[Link]" alt="Imagem em vários formatos">
responsivo e performance). </picture>

URL Absoluto 📌 Sintaxe básica: LINK’s INTERNOS EM HTML

<picture> ✅ 1. Definição
<a href="[Link] para o Google</a> <source srcset="[Link]" media="(min-width: 800px)"> Links internos em HTML permitem a navegação dentro da mesma
<img src="[Link] alt="Logo Externo"> <source srcset="[Link]" media="(min-width: 500px)"> página, direcionando o usuário a uma seção específica do
<img src="[Link]" alt="Imagem adaptável"> documento. São criados usando a tag <a> com o atributo href
</picture> apontando para um id presente em um elemento do próprio HTML.
🆚 6. Comparação: Tabela Resumo
Critério URL Absoluto URL Relativo

Contém domínio? Sim Não 🧩 2. Sintaxe

Funciona externamente? Sim Não 👉 Link (origem):

🧩 Explicação:
<a href="#idDoElemento">Texto do Link</a>
Sensível à estrutura de  <source>: define condições para carregamento da imagem
Não Sim Obs.: O caractere # é o que diz ao navegador: “Este link
pastas? (ex: resolução).
não leva a uma nova página, e sim a uma âncora (id)
Facilidade de manutenção  media: usa media queries CSS para definir regras.
Baixa Alta dentro da página atual.”
local  srcset: define o caminho da imagem a ser carregada.
👉 Referência (destino):
https://  <img>: imagem padrão usada como fallback.
imagens/ <h2 id="idDoElemento">Título da Seção</h2>
Exemplo [Link]/
[Link]
[Link]
✅ Exemplo completo com link + imagem responsiva: 🌟 3. Características
<a href="[Link] target="_blank"> Característica Descrição
<picture> Direciona o usuário dentro da mesma
🔗 1. Combinar Imagens com Links (Imagem clicável) <source srcset="[Link]" media="(min-width: 800px)"> Navegação interna
página
Você pode usar a imagem dentro da tag <a> para que, ao clicar nela, <source srcset="[Link]" media="(min-width: 500px)">
Baseado em id A âncora é definida usando o atributo id
o usuário seja redirecionado a outra página ou site. <img src="[Link]" alt="Logotipo OpenAI Responsivo">
Compatível com Usar id é a forma moderna e
</picture>
HTML - HyperText Markup Language; CSS – Cascading Style Sheet; JavaScript

HTML5 recomendada <a href="#contato">Contato</a>

Sem recarregar a A navegação é instantânea, sem novo </nav>

✅ Exemplo 2: Link com botão e rolagem suave
página carregamento <section id="inicio">
<style>
<h2>Início</h2>
Pode ser estilizado Pode ser personalizado com estilos html {
<p>Bem-vindo ao nosso site.</p>
com CSS visuais scroll-behavior: smooth;
</section>
}
</style>
🧱 4. Propriedades e Elementos Envolvidos <section id="servicos">
<button onclick="[Link]='#inicio'">Voltar ao Início</button>
Elemento / Atributo Função <h2>Serviços</h2>
<h1 id="inicio">Início da Página</h1>
<a> Cria o link de navegação <p>Oferecemos diversos serviços web.</p>

href="#algumId" Aponta para a âncora com id=algumId </section>

✅ Exemplo 3: Estrutura completa com menu e seções <section id="contato">
id="algumId" Define a âncora de destino
<!DOCTYPE html> <h2>Contato</h2>
scroll-behavior <html lang="pt-BR">
Propriedade opcional para suavizar a rolagem <p>Envie sua mensagem!</p>
(CSS) <head> </section>
<meta charset="UTF-8"> </body>
<title>Exemplo de Links Internos</title> </html>
5. Aplicações
<style>
 Menus de navegação em uma única página (como
html {
portfólios, landing pages). 🚫 Forma obsoleta (não recomendada):
scroll-behavior: smooth;
 Sumário de conteúdos (índice em artigos, FAQ, ou e- 
}
books online). <a name="sobre"></a>
nav {
 Botões de "voltar ao topo". <h2>Seção Sobre</h2>
position: fixed;
 Navegação em páginas de documentação ou relatórios ⚠️ Embora ainda funcione, name foi substituído por id e não é mais
top: 0;
longos. recomendado no HTML5.
background: #f0f0f0;
 Sites do tipo “One Page” (com várias seções em uma width: 100%;
🧷 1. FAVICON
única página). padding: 10px;
✅ Definição:
}
Favicon (do inglês favorite icon) é o ícone pequeno exibido na aba
section {
🧪 6. Exemplos práticos
do navegador, barra de favoritos ou ao lado do nome do site.
padding: 100px 20px;
✅ Exemplo 1: Navegação interna básica
Geralmente tem o formato .ico, .png ou .svg.
border-bottom: 1px solid #ccc;

margin-top: 60px;
<a href="#sobre">Ir para Sobre</a>
}
<a href="#contato">Contato</a>
🧾 Sintaxe:
</style>

<link rel="icon" type="image/png" href="caminho/[Link]">
</head>
<h2 id="sobre">Sobre</h2>
<body>
<p>Este site fala sobre HTML.</p>
⭐ Características:
<nav>
<h2 id="contato">Contato</h2>
<a href="#inicio">Início</a> |  Tamanho padrão: 16x16 ou 32x32 pixels.
<p>Entre em contato pelo formulário abaixo.</p>
<a href="#servicos">Serviços</a> |  Formatos mais comuns: .ico, .png, .svg.
HTML - HyperText Markup Language; CSS – Cascading Style Sheet; JavaScript

 Pode haver múltiplos favicons para diferentes 🧾 Sintaxe: <area shape="rect" coords="34,44,270,350" href="[Link]"
dispositivos/resoluções. <img src="[Link]" usemap="#mapaExemplo" alt="Mapa"> alt="Sala">
<map name="mapaExemplo">
🔧 Propriedades (atributos da tag <link>): <area shape="rect" coords="34,44,270,350" href="[Link]"

Atributo Descrição alt="Área 1"> <area shape="circle" coords="400,150,50" href="[Link]"

<area shape="circle" coords="400,150,50" href="[Link]" alt="Jardim">
rel Tipo de relação (deve ser icon)
alt="Área 2">
type Tipo MIME do arquivo (ex: image/png)
</map> 
href Caminho para o arquivo do ícone <area shape="poly" coords="100,100,200,100,150,200"
⭐ Características: href="[Link]" alt="Garagem">
🧭 Aplicações:  As áreas são definidas por <area>, dentro da tag <map>. </map>
 Personalização da aba do navegador  É possível criar áreas retangulares, circulares ou
🔍 Dica: Use ferramentas como Image Map Generator para gerar
 Identidade visual do site poligonais.
coordenadas facilmente.
 Facilidade de identificação entre várias abas  Permite criar interatividade em imagens sem JavaScript.

 Exibição nos favoritos, histórico e atalho do celular (PWA)  Utilizado principalmente para navegação gráfica.

💡 Exemplo prático: ✅ Resumo comparativo

<!DOCTYPE html> 🔧 Propriedades (atributos principais): Item Favicon <map> (Mapa de imagem)

<html lang="pt-BR"> 📌 Na <map>: Ícone da aba do

Função Áreas clicáveis em uma imagem
<head> Atributo Descrição navegador
<meta charset="UTF-8"> name Nome do mapa (referenciado em usemap) Tag usada <link rel="icon"> <map>, <area> e usemap
<title>Minha Página</title> Identidade visual,
📌 Na <area>:
<link rel="icon" type="image/png" href="imagens/meu- Aplicação Navegação gráfica
Atributo Descrição favoritos
[Link]">
shape Tipo da forma: rect, circle, poly, default Compatível
</head> Sim Sim
coords Coordenadas da forma (depende do tipo) com HTML5?
<body>
<h1>Bem-vindo ao site!</h1> href Link ao clicar na área

</body> alt Texto alternativo CSS – Cascading Style Sheet

</html> ✅ 1. Definição – CSS Externo

🧭 Aplicações: CSS Externo é uma forma de aplicar estilos a páginas HTML

utilizando um arquivo .css separado. Esse arquivo contém apenas
 Mapas geográficos clicáveis
regras de estilo, e é vinculado às páginas HTML por meio da tag
2. <map> – Mapas de Imagem  Imagens com múltiplos links (como organogramas,
<link> no cabeçalho do documento.
diagramas)
✅ Definição:  Menus gráficos em páginas antigas ou interativas
A tag <map> é usada para criar áreas clicáveis dentro de uma ✅ 2. Sintaxe do CSS Externo
imagem, chamadas de hotspots (pontos interativos). Ela define um 💡 Exemplo prático: No arquivo CSS externo ([Link]):
mapa de imagem que é referenciado por uma imagem com o <img src="[Link]" alt="Planta Baixa" usemap="#planoMap"> body {
atributo usemap. <map name="planoMap"> background-color: #f0f0f0;

font-family: Arial, sans-serif;

HTML - HyperText Markup Language; CSS – Cascading Style Sheet; JavaScript

} <html lang="pt-br">
h1 { <head>
text-align Alinhamento do texto text-align: center;
color: navy; <meta charset="UTF-8">
Espaço externo do
text-align: center; margin margin: 20px; <title>Exemplo com CSS Externo</title>
elemento
} <link rel="stylesheet" href="[Link]">
No arquivo HTML ([Link]): Espaço interno (entre borda </head>
padding padding: 10px;
<!DOCTYPE html> e conteúdo) <body>
<html lang="pt-br"> border Borda do elemento border: 1px solid black; <h1>Bem-vindo!</h1>
<head> <p>Este é um exemplo de uso de CSS externo
<meta charset="UTF-8"> em um site HTML</p>
✅ 5. Aplicações do CSS Externo
<title>Exemplo de CSS Externo</title> </body>
Aplicação Objetivo
<link rel="stylesheet" href="[Link]"> </html>
Sites grandes e com Centralizar e padronizar estilos para
</head>
muitas páginas todo o site
<body> Estrutura de Diretórios
<h1>Olá, mundo!</h1> Web design Aplicar media queries e estilos meu-site/
</body> responsivo adaptativos em um só lugar ├── [Link]
</html> Permitir que designers e ├── [Link]
Projetos
desenvolvedores trabalhem ├── [Link]
colaborativos
separadamente ├── css/
✅ 3. Características do CSS Externo
Melhorar SEO e Arquivos CSS em cache reduzem o │ └── [Link]
Característica Descrição
performance tempo de carregamento das páginas ├── js/
Separação de conteúdo e O HTML contém apenas conteúdo; o
│ └── [Link]
estilo CSS define o design visual
├── img/
Um único arquivo CSS pode ser ✅ 6. Exemplo Prático Completo │ ├── [Link]
Reutilização
reutilizado em várias páginas Arquivo: [Link] │ └── [Link]
Atualizações de estilo são feitas em um body { └── fonts/
Facilidade de manutenção
único local background-color: #222; └── [Link]
color: #eee;
Leitura mais limpa do O HTML fica mais legível, pois não
font-family: 'Segoe UI', sans-serif;
código carrega regras de estilo embutidas
}
O CSS pode ser armazenado em cache
Melhoria de desempenho h1 {
pelo navegador
color: #ffcc00;
📄 Explicação de Cada Pasta e Arquivo
}
p{ Pasta/Arquivo Descrição
✅ 4. Propriedades Comuns Utilizadas
Propriedade Descrição Exemplo font-size: 18px; [Link] Página inicial (home) do site

color Cor do texto color: blue; line-height: 1.6; [Link] Página "Sobre"
} [Link] Página "Contato"
background: #fff
background Cor ou imagem de fundo Arquivo: [Link]
url([Link]); css/ Pasta para arquivos de estilo (CSS)
<!DOCTYPE html>
font-family Fonte utilizada font-family: 'Verdana'; css/[Link] Estilos externos utilizados em todas as páginas
HTML - HyperText Markup Language; CSS – Cascading Style Sheet; JavaScript

Cor ou imagem de
background background: #f2f2f2;
/* === Rodapé === */ fundo
js/ Scripts JavaScript
footer { font-size Tamanho da fonte font-size: 18px;
Arquivo com lógica e interação (eventos,
js/[Link] text-align: center;
validações etc.) padding Espaço interno padding: 10px;
}
Imagens usadas no site (logo, banners, ícones margin Espaço externo margin: 15px;
img/
etc.) border Borda do elemento border: 2px dashed green;
CLASSE DE ESTILO
Fontes personalizadas (usadas com @font-face text-align Alinhamento do texto text-align: center;
fonts/ ✅ 1. Definição – Classe de Estilo (CSS Class)
no CSS)
Uma classe de estilo em CSS é uma forma de aplicar um conjunto
de regras de estilo a um ou mais elementos HTML. Classes ✅ 5. Aplicações Comuns das Classes
📌 Como Vincular no HTML permitem reutilização, modularidade e personalização no design Aplicação Finalidade
👉 CSS da página.
Estilizar múltiplos
Ex: vários botões, caixas de texto, títulos
<link rel="stylesheet" href="css/[Link]"> elementos
👉 JavaScript ✅ 2. Sintaxe da Classe em CSS Criar componentes visuais Como cards, menus, alertas, banners
<script src="js/[Link]"></script> 📌 No CSS: Aplicar estilos
👉 Imagem .nome-da-classe { propriedade: valor; } Como erro, sucesso, alerta etc.
condicionais
<img src="img/[Link]" alt="Logo do site"> 📌 No HTML:
Bootstrap, Tailwind, Bulma usam
👉 Fonte Personalizada (no CSS) <tag class="nome-da-classe">Texto</tag> Trabalhar com frameworks
extensivamente classes CSS
@font-face {
✅ 6. Exemplos Práticos
font-family: 'MinhaFonte';
✅ 3. Características da Classe de Estilo 🟨 CSS ([Link])
src: url('../fonts/[Link]') format('truetype');
Característic .titulo-destaque {
} Descrição
a color: darkblue;
body {
Reutilizável Pode ser aplicada a vários elementos HTML font-size: 24px;
font-family: 'MinhaFonte', sans-serif;
Modular Separa o estilo do conteúdo text-transform: uppercase;
}
}
Pode combinar várias classes em um mesmo
Flexível .texto-importante {
elemento
✅ Dicas Finais
background-color: #fff3cd;
 Nomeie arquivos e pastas com letras minúsculas e sem O nome da classe pode ser qualquer palavra (sem
Nome livre border-left: 5px solid orange;
espaços. espaços e com letra inicial)
padding: 10px;
 Sempre teste caminhos relativos (ex: ../img/[Link]) ao Prioridade É substituída por seletores mais específicos ou por !
font-style: italic;
mudar a estrutura. média important
}
 Use um arquivo CSS principal e adicione comentários .botao-verde {
para organização: background-color: green;
/* === Cabeçalho === */ color: white;
header { ✅ 4. Propriedades Comuns Usadas em Classes padding: 8px 16px;
background-color: #333; border-radius: 6px; }
Propriedade Descrição Exemplo
color: #fff; 🟨 HTML ([Link])
color Cor do texto color: red;
} <!DOCTYPE html>
HTML - HyperText Markup Language; CSS – Cascading Style Sheet; JavaScript

<html lang="pt-br"> background-color: lightgreen;

<head> }
<meta charset="UTF-8"> </style>
<title>Exemplo de Classe de Estilo</title>
<div class="exemplo1">content-box</div>
<link rel="stylesheet" href="[Link]">
<div class="exemplo2">border-box</div>
</head> 📐 Diferença visual entre content-box e border-box:
🧱 Boas práticas:
<body> width: 200px;
Usar border-box globalmente:
<h1 class="titulo-destaque">Título Principal</h1> padding: 10px;
<p class="texto-importante">Este parágrafo contém *{
border: 5px solid;
uma informação importante.</p> box-sizing: border-box;
box-sizing Tamanho real do elemento
<button class="botao-verde">Clique aqui</button> }
content-
</body> 200px + 10px + 10px + 5px + 5px = 230px Isso evita bugs e inconsistências no layout, especialmente ao usar
box
padding e border.
</html>
border-box 200px total, com padding e borda dentro da largura

✅ 7. Dica Avançada: Usar Múltiplas Classes

DIV
💡 Aplicações práticas:
<p class="texto-importante negrito sublinhado">Texto ✅ 1. Definição

com várias classes combinadas.</p>

 border-box é amplamente usado em layouts modernos O elemento <div> (de "division") é um container genérico em bloco
responsivos, pois evita que padding e borda "estiquem" o no HTML usado para agrupar elementos e aplicar estilos ou scripts.
No CSS: tamanho do elemento. Por si só, ele não tem estilo visual ou semântica, servindo apenas
.negrito {  Muito usado com frameworks CSS como Bootstrap e para estruturação do conteúdo.
font-weight: bold; Tailwind.
}  Com border-box, você tem mais controle do layout ao
🧾 2. Sintaxe
definir larguras fixas.
<div>
.sublinhado {

text-decoration: underline; 🧪 Exemplo:
} </div>
<style>
Também pode conter atributos:
.exemplo1 {
<div id="cabecalho" class="container">
Box-sizing em CSS box-sizing: content-box;
<p>Bem-vindo!</p>
✅ Definição: width: 200px;
</div>
A propriedade box-sizing define como o tamanho total de um padding: 20px;
elemento HTML é calculado: se ele inclui ou não o padding e a borda
border: 5px solid black;
dentro da largura e altura especificadas.
🎯 3. Características
background-color: lightblue;
 Elemento de bloco: Ocupa toda a largura da linha.
}
🔍 Características:  Genérico: Usado quando não há outro elemento mais
.exemplo2 {
Valor Comportamento semântico adequado.
box-sizing: border-box;
content-
Padrão: largura/altura não incluem padding/borda.
 Altamente personalizável via CSS e JavaScript.
box width: 200px;
 Sem conteúdo visual por padrão.
border-box largura/altura incluem padding e borda. padding: 20px;
border: 5px solid black;
 Pode conter qualquer outro elemento HTML dentro dele.
inherit Herda o valor do elemento pai.
HTML - HyperText Markup Language; CSS – Cascading Style Sheet; JavaScript

<style> Item Resumo

.box { Elemento <div>
width: 300px;
Tipo Bloco genérico
background: #eee;
Uso Agrupamento e estruturação de conteúdo
padding: 10px;
Personalização Altamente customizável com CSS e JS
border: 1px solid #ccc;
🎨 4. Propriedades (CSS Comuns para <div>)
} <section>, <article>, <main>, quando há significado
As propriedades CSS mais aplicadas a <div> são: Alternativas
</style> semântico
Propriedade Descrição
<div class="box">
width, height Define largura e altura
<h3>Caixa com CSS</h3>
Seletor em CSS (Cascading Style Sheets)
background-color Cor de fundo <p>Usando uma classe para estilizar.</p>
border Borda da div </div>
margin, padding Espaçamentos externo e interno 🔹 Exemplo 3: Layout com Flexbox ✅ 1. Definição:

display Pode ser block, flex, grid, etc. <style> Um seletor em CSS é a parte da regra CSS que especifica quais
.container { elementos HTML serão afetados pelas declarações de estilo
Posicionamento absoluto, relativo
position display: flex; (como cor, tamanho da fonte, margens etc.).
etc.
gap: 10px;
float, clear Controle de fluxo de elementos
}
🧱 2. Sintaxe:
text-align Alinhamento de texto .item {
seletor {
flex: 1;
propriedade: valor;
background-color: #f2f2f2;
5. Aplicações Comuns }
padding: 20px;
 Criar layouts responsivos com CSS Grid ou Flexbox. Exemplo:
}
 Agrupar seções visuais de uma página. p{
</style>
 Aplicar estilos personalizados a grupos de elementos. color: blue;
<div class="container">
font-size: 16px;
 Controlar visibilidade via JavaScript (mostrar/ocultar). <div class="item">Coluna 1</div>
}
 Criar componentes reutilizáveis com frameworks (React, <div class="item">Coluna 2</div>
Nesse exemplo, o seletor p aplica as propriedades aos parágrafos
Vue, etc.). <div class="item">Coluna 3</div>
(<p>).
</div>
🔹 Exemplo 4: Mostrar/Ocultar com JavaScript
💡 6. Exemplos Práticos
<button 🎯 3. Características:
🔹 Exemplo 1: Div simples com estilo
onclick="[Link]('info').[Link]='none'">Esco  Define alvo do estilo (quais elementos receberão o estilo).
<div style="background-color: lightblue; padding: 20px;">
nder</button>  Pode ser simples ou composto, combinado com
<h2>Seção de Destaque</h2>
<div id="info"> classes, IDs, atributos ou estruturas hierárquicas.
<p>Este é um exemplo de conteúdo dentro de uma div
estilizada.</p>
<p>Este conteúdo pode ser escondido com JavaScript.</p>  Trabalha com o conceito de especificidade.
</div>  Pode usar pseudo-classes ou pseudo-elementos.
</div>

📌 Resumo
🔹 Exemplo 2: Div com CSS externo
HTML - HyperText Markup Language; CSS – Cascading Style Sheet; JavaScript

📌 🔹 Seletor de tipo 🔹 Sintaxe

h2 { margin: <valor>;
color: darkgreen; Ou usando propriedades individuais:
} margin-top: <valor>;
🔹 Seletor de classe margin-right: <valor>;
.card { margin-bottom: <valor>;
box-shadow: 2px 2px 10px gray; margin-left: <valor>;
} Atalhos com múltiplos valores:
🔹 Seletor de ID margin: 10px; /* todos os lados */
4. Tipos e Propriedades de Seletores: #cabecalho { margin: 10px 20px; /* vertical | horizontal */
Tipo Exemplo O que faz background-color: #f0f0f0; margin: 10px 20px 30px; /* top | horizontal | bottom */

Seleciona todos os elementos } margin: 10px 20px 30px 40px;/* top | right | bottom | left */
Seletor de tipo h1 🔹 Seletor com pseudo-classe
<h1>
button:hover {
Seleciona todos os elementos 🔹 Características
Seletor de classe .destaque background-color: blue;
com class="destaque"  Espaçamento externo: afasta o elemento de outros elementos
color: white;
Seleciona o elemento com vizinhos.
Seletor de ID #menu }
id="menu"  Não afeta o conteúdo interno (para isso, usa-se o padding).
🔹 Seletor com atributo
Seleciona todos os elementos
input[required] {
 Aceita valores negativos, mas pode causar sobreposição.
Seletor universal *
da página
border: 2px solid red;  Pode ser definido com:
Seleciona <input>s com } o Unidades fixas: px, em, rem, etc.
Seletor de atributo input[type="text"]
type="text"
o Porcentagem: relativa ao elemento pai.
Seletor
div p Seleciona <p> dentro de <div> 📘 Resumo Visual (Mindmap Estilo): o Palavra-chave: auto (comum para centralização
descendente
Seletor CSS horizontal).
Aplica estilo quando o mouse ├── Tipo (h1, p)
Pseudo-classe a:hover
passa sobre <a> ├── Classe (.nome)
🔹 Propriedades Relacionadas
Estiliza a primeira linha de um ├── ID (#nome)
Pseudo-elemento p::first-line Propriedade Descrição
parágrafo ├── Universal (*)
├── Atributo ([type="text"]) margin-top Espaço externo no topo

├── Combinado (div p, ul > li) margin-right Espaço externo à direita

🛠 5. Aplicações Práticas:
├── Pseudo-classe (:hover, :nth-child) margin-bottom Espaço externo abaixo
 Personalização de layout e cores.
└── Pseudo-elemento (::before, ::first-letter) margin-left Espaço externo à esquerda
 Criação de temas (dark mode, por exemplo).
MARGIN margin Atalho para as quatro acima
 Responsividade com :nth-child(), :hover, @media.
🔹 Definição
 Interação visual sem JavaScript.
margin é uma propriedade do CSS que define o espaço externo ao
 Acessibilidade visual com foco em :focus, :active. 🔹 Aplicações
redor de um elemento HTML. Ele empurra o conteúdo para longe
 Criar espaçamento entre blocos de conteúdo.
dos elementos vizinhos.
 Centralizar elementos horizontalmente com margin: 0 auto;.
6. Exemplos de Uso:
HTML - HyperText Markup Language; CSS – Cascading Style Sheet; JavaScript

 Evitar que elementos fiquem colados. 🔧 Propriedades Relacionadas

 Melhorar layout e legibilidade da página. Padding (preenchimento interno) no CSS Propriedade Função
 Compor o modelo de caixa (box model) em conjunto com margin Espaço externo ao redor da borda do elemento
padding, border e width. ✅ Definição Define a borda do elemento (espessura, estilo,
border
Padding é uma propriedade do CSS usada para criar espaço interno cor)
🔹 Exemplos entre o conteúdo de um elemento HTML e sua borda (border). Ele
é usada para arredondar os cantos de um
"empurra" o conteúdo para dentro, criando um espaço acolchoado border-radius
1. Espaçamento externo simples elemento
.box { dentro do elemento.
Pode alterar o comportamento do padding (ex:
margin: 20px; box-sizing
content-box ou border-box)
} 🧬 Sintaxe padding-top Espaço interno no topo do elemento
2. Centralizar um div horizontalmente padding: valor;
padding-right Espaço interno à direita do elemento
.container { Ou, para controle individual:
width: 300px; padding-
padding-top: valor; Espaço interno abaixo do conteúdo
margin: 0 auto; bottom
padding-right: valor;
} padding-left Espaço interno à esquerda do conteúdo
padding-bottom: valor;
3. Margens diferenciadas por lado padding-left: valor;
.card { Atalho com múltiplos valores: 📌 Aplicações
margin: 10px 15px 20px 25px; /* topo, direita, padding: cima direita baixo esquerda;
 Criar espaçamento interno para melhorar o layout e a
baixo, esquerda */ Exemplo Equivalente a
leitura.
}
padding: 10px; Todos os lados com 10px  Evitar que o texto ou imagem fique colado à borda.
4. Uso com valor negativo
Cima/baixo 10px, esquerda/direita  Dar mais "respiro" visual aos elementos.
.image { padding: 10px 20px;
20px
margin-top: -10px;  Controlar melhor o tamanho e visual de botões, inputs,
} Cima 10px, esquerda/direita 20px, divs, etc.
padding: 10px 20px 30px;
baixo 30px

padding: 10px 20px 30px Cima 10px, direita 20px, baixo 30px,
🔹 Visual no Box Model ✅ Exemplos de Uso
40px; esquerda 40px
+------------------------------+ 1. Padding uniforme
| margin | <div style="padding: 20px; background-color: lightblue;">
| +----------------------+ | ✳️Características Texto com espaçamento interno de 20px
| | border | |  Não afeta a borda externa do elemento, apenas o espaço </div>
| | +---------------+ | | interno. 2. Padding individual por lado
| | | padding | | |  Pode ser definido em: <div style="padding-top: 10px; padding-right: 20px; padding-bottom:
| | | +--------+ | | | 30px; padding-left: 40px;">
o px, em, %, rem, vh, vw, etc.
| | | | content| | | | Padding individual
 Aceita valores diferentes para cada lado (top, right, bottom,
| | | +--------+ | | | </div>
left).
| | +---------------+ | | 3. Combinado com box-sizing
| +----------------------+ |
 Funciona em todos os elementos do HTML.
div {
+------------------------------+ box-sizing: border-box;
HTML - HyperText Markup Language; CSS – Cascading Style Sheet; JavaScript

padding: 20px;  O float remove o elemento do fluxo normal do documento. </div>

width: 300px;  Elementos posteriores podem ocupar o espaço ao lado do 📌 Exemplo 3: Usando clear
} elemento flutuante. <div style="float: left;">Elemento flutuante</div>
<div style="clear: both;">Este começa abaixo do flutuante</div>
 Pode causar colapsos de altura em contêineres se não for
📊 Visual Gráfico (Explicativo) usado com clearfix.
+-----------------------------+  Muitas vezes usado para criar layouts de colunas ou 🧹 Dica importante: Clearfix (evita bugs de contêiner colapsado)
| Margin | efeitos de texto com imagens. .clearfix::after {
| +-----------------------+ | content: "";
| | Border | | display: table;
⚙️Propriedades relacionadas:
| | +-----------------+ | | clear: both;
 clear: impede que elementos flutuem ao lado de outros
| | | Padding | | | }
elementos flutuantes.
| | | +----------+ | | | <div class="clearfix">
 overflow: frequentemente usado para conter elementos
| | | | Content | | | | <div style="float: left;">Caixa A</div>
flutuantes dentro de contêineres.
| | | +----------+ | | | <div style="float: right;">Caixa B</div>
| | +-----------------+ | |  display: influência como o elemento será tratado no layout. </div>
| +-----------------------+ |  position: embora não diretamente ligado, afeta o
+-----------------------------+ comportamento visual de elementos flutuantes.

FLOAT
💡 Aplicações comuns: Sombras nas bordas em CSS (box-shadow)
✅ Definição:
A propriedade float é usada para alinhar um elemento à esquerda  Imagens com texto ao redor. ✅ Definição:

(left) ou à direita (right) dentro de seu contêiner, permitindo que o A propriedade box-shadow em CSS permite adicionar sombras ao
 Layouts de colunas simples (antes do flexbox e grid).
conteúdo flua ao redor desse elemento. redor das bordas de um elemento, criando profundidade e efeitos
 Menus laterais ou barras laterais (sidebar).
visuais que destacam caixas, botões e seções da interface.
 Elementos decorativos posicionados no canto da página.
🧩 Sintaxe:
seletor { 🔣 Sintaxe:
✅ Exemplos de uso:
float: valor; box-shadow: [offset-x] [offset-y] [blur-radius] [spread-radius] [color]
📌 Exemplo 1: Imagem flutuando à esquerda
} [inset];
<p>
 offset-x: deslocamento horizontal da sombra (positivo para
<img src="[Link]" style="float: left; margin: 10px;"
a direita).
🎯 Valores possíveis: width="150" />
 offset-y: deslocamento vertical da sombra (positivo para
Valor Descrição Este texto flui ao redor da imagem que está à esquerda.
baixo).
left O elemento flutua à esquerda. </p>
 blur-radius: raio de desfoque (opcional).
right O elemento flutua à direita. 📌 Exemplo 2: Criando colunas
<div style="width: 100%;">
 spread-radius: espalhamento da sombra (opcional).
none Valor padrão. O elemento não flutua.
<div style="float: left; width: 50%; background-color:  color: cor da sombra.
inherit Herda o valor do elemento pai.
lightblue;">Coluna 1</div>  inset: torna a sombra interna ao invés de externa
<div style="float: left; width: 50%; background-color: (opcional).
🧬 Características: lightgreen;">Coluna 2</div>
HTML - HyperText Markup Language; CSS – Cascading Style Sheet; JavaScript

.botao:hover {
⭐ Características: box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
🔹 Propriedades Relacionadas
 É uma propriedade visual (estética), não afeta o layout }
Propriedad
real. Função
e
 Pode aplicar várias sombras separadas por vírgulas. 🧠 Dica avançada: position Define o tipo de posicionamento do elemento.
 Aceita valores negativos para offset e spread. Para criar efeitos de neumorfismo (estilo suave com sombras
Define a distância do topo ou base do contêiner
 Aceita transparência (rgba, hsla). internas e externas): top / bottom
pai posicionado.
 Compatível com todos os navegadores modernos. .neumorfismo {
Define a distância da esquerda ou direita do
background: #e0e0e0; left / right
contêiner pai posicionado.
box-shadow: 8px 8px 15px #bebebe,
🔧 Propriedades relacionadas: Controla a ordem de empilhamento
-8px -8px 15px #ffffff; z-index
 border: a borda do elemento (sem sombra). border-radius: 10px;
(profundidade).

 box-shadow: cria sombra ao redor da caixa. }

 text-shadow: sombra em textos. 🔹 Aplicações Comuns
 filter: drop-shadow(): alternativa para imagens e SVGs. POSICIONAMENTO – ABSOLUTO DE DIV’s  Posicionar menus dropdown ou tooltips.
🔹 Definição  Criar camadas sobrepostas (como modais, caixas de
position: absolute é uma propriedade CSS que retira o elemento do diálogo).
💡 Aplicações comuns:
fluxo normal da página e permite posicioná-lo manualmente com as  Posicionar elementos decorativos.
 Destacar botões ao passar o mouse.
propriedades top, right, bottom, e left.
 Criar cartões e caixas flutuantes (efeito 3D).  Usar em animações e efeitos visuais.

 Sombra interna para efeito de “encaixe”.  Layouts mais flexíveis com elementos flutuantes (embora
🔹 Sintaxe hoje se recomende flexbox ou grid).
 Melhorar a acessibilidade visual e o foco de elementos.
.divExemplo {
position: absolute;
🔹 Exemplo de Uso
🧪 Exemplos de uso: top: 50px;
✅ HTML
Exemplo 1: Sombra externa simples left: 100px;
<div class="container">
.caixa { }
<div class="caixa">Caixa Absoluta</div>
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);
</div>
}
🔹 Características
Exemplo 2: Sombra interna (inset)
 Remove o elemento do fluxo normal do layout (não afeta ✅ CSS
.caixa-interna {
nem é afetado por outros elementos). .container {
box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.4);
 É posicionado em relação ao ancestral mais próximo position: relative;
}
com position: relative, absolute, fixed, ou sticky. width: 400px;
Exemplo 3: Múltiplas sombras
.cartao {
 Caso não haja nenhum ancestral posicionado, será em height: 200px;
relação ao elemento <body> (janela de visualização). background-color: #ccc;
box-shadow: 2px 2px 5px rgba(0,0,0,0.2),
 Pode sobrepor outros elementos. }
-2px -2px 5px rgba(255,255,255,0.4);
}  Pode ser usado com z-index para controlar a
.caixa {
Exemplo 4: Com botão hover sobreposição.
HTML - HyperText Markup Language; CSS – Cascading Style Sheet; JavaScript

position: absolute; 🧠 Características height: 150px;

top: 20px;  O elemento permanece no fluxo normal do documento, background-color: coral;
left: 50px; mas pode ser deslocado visualmente. }
width: 100px;  O espaço original ocupado pelo elemento não é </style>
height: 50px; alterado — ou seja, ele ainda "ocupa" o lugar original. </head>
background-color: red;  Serve de referência para posicionamento absoluto de <body>
color: white; <div class="box">DIV com position: relative</div>
elementos filhos (com position: absolute).
text-align: center; </body>
line-height: 50px; </html>
⚙️Propriedades Comuns com position: relative
} Exemplo 2: Elemento filho com position: absolute dentro de pai
Explicação: Essas propriedades definem o deslocamento: com relative
 .container tem position: relative, então a .caixa será  top: desloca o elemento para baixo se positivo. <!DOCTYPE html>
posicionada em relação a ele.  bottom: desloca para cima se positivo. <html lang="pt-br">

 .caixa será desenhada a 20px do topo e 50px da  left: desloca para a direita se positivo. <head>

esquerda do .container.  right: desloca para a esquerda se positivo. <meta charset="UTF-8">

🔹 Dica Visual (Z-index) <style>

.caixa { .pai {
💡 Aplicações Comuns position: relative;
position: absolute;
 Ajustar ligeiramente a posição de um bloco para alinhar width: 300px;
top: 0;
visualmente. height: 300px;
left: 0;
z-index: 10; /* Maior = mais "em cima" */
 Criar efeitos visuais ou animações. background-color: lightgray;

}  Servir como base para elementos posicionados com }

absolute ou fixed.
 Sobrepor elementos com z-index. .filho {
POSICIONAMENTO – RELATIVO DE DIV’s
position: absolute;
✅ Definição
top: 20px;
O posicionamento relativo (position: relative) é um tipo de 📌 Exemplos de Uso
right: 20px;
posicionamento CSS onde um elemento pode ser movido em Exemplo 1: Deslocar um DIV 20px para a direita e 10px para
width: 100px;
relação à sua posição original no layout natural da página. baixo
height: 100px;
<!DOCTYPE html>
background-color: blue;
<html lang="pt-br">
🧩 Sintaxe }
<head>
.elemento { </style>
<meta charset="UTF-8">
position: relative; </head>
<style>
top: 10px; <body>
.box {
left: 20px; <div class="pai">
position: relative;
} <div class="filho"></div>
top: 10px;
</div>
left: 20px;
</body>
width: 150px;
</html>
HTML - HyperText Markup Language; CSS – Cascading Style Sheet; JavaScript

  Validação de formulários
📝 Resumo  Requisições AJAX/Fetch
 Armazenamento local (localStorage, sessionStorage) Item Descrição
JavaScript  Interação com APIs externas Posiciona o elemento em relação a si mesmo
position: relative
🟨 1. Definição  Criação de animações no fluxo
JavaScript é uma linguagem de programação interpretada,  Controle de eventos do usuário (clique, tecla, etc.) Espaço ocupado Mantém o espaço original no layout
dinâmica e multiparadigma (suporta programação orientada a Visível no novo local, mas o layout “lembra” sua
objetos, funcional e imperativa). É utilizada principalmente para criar Comportamento
posição original
páginas web interativas, mas também é usada no back-end 🎯 6. Aplicações
Pequenos ajustes, base para absolute,
([Link]), aplicativos mobile, IoT e jogos.  Front-end de sites e sistemas web Usos principais
sobreposição de elementos
 Back-end com [Link]
- Subtração 10 - 2
🔤 2. Sintaxe Básica  Aplicativos mobile (React Native, Ionic)
* Multiplicação 4*5
// Comentário de uma linha  Desktop apps (Electron)
/ Divisão 20 / 4
/* Comentário  Desenvolvimento de jogos (Phaser, [Link])
% Módulo (resto) 10 % 3
de múltiplas linhas */  Automação de tarefas
let nome = "Maria"; ** Exponenciação 2 ** 3

[Link]("Olá, " + nome); ++ Incremento x++

🧾 7. Tipos de Variáveis
-- Decremento x--
var nome = "João"; // Escopo global ou de função (evite usar)
⭐ 3. Características let idade = 25; // Escopo de bloco (preferível)
 Interpretada (executada em tempo real) const PI = 3.14; // Constante (não pode ser reatribuída) 🔁 9. Operadores Lógicos
 Baseada em objetos Tipos primitivos: Operador Descrição Exemplo
 Tipagem dinâmica (não exige declarar o tipo da variável)  String – texto && E lógico a && b
 Alta integração com HTML/CSS  Number – números ` `
 Event-driven (baseada em eventos)  Boolean – verdadeiro ou falso ! NÃO lógico !a
 Suporte a funções de primeira classe  Undefined – não definido

 Assíncrona com promessas e async/await  Null – nulo

🧮 10. Operadores de Comparação
 Symbol – identificadores únicos
Operado
Descrição Exemplo
🧱 4. Propriedades  BigInt – números inteiros grandes r
 Executada no navegador (frontend) e no servidor ([Link]) Tipos de referência: == Igual (valor) 5 == '5' → true
 Case-sensitive (nome ≠ Nome)
 Object, Array, Function
=== Igual (valor e tipo) 5 === '5' → false
 Suporta funções anônimas e closures != Diferente 5 != 3
 Permite manipular o DOM (Document Object Model) ➕ 8. Operadores Aritméticos !== Diferente (tipo) 5 !== '5'
Operado > Maior que 7>3
Descrição Exemplo
r
5. Funcionalidades < Menor que 2<4
+ Adição / concat. 3+5
 Manipulação de elementos HTML e CSS >= Maior ou igual 5 >= 5
HTML - HyperText Markup Language; CSS – Cascading Style Sheet; JavaScript

[Link](objeto[chave]); Em HTML, os tipos de entrada (type) são atributos do

elemento <input> que definem como os dados serão
}
<= Menor ou igual 3 <= 8 inseridos pelo usuário: texto, número, data, email, etc.
Permite validar, controlar e coletar informações via
🧪 13. Funções formulários.
🔀 11. Estruturas Condicionais
function saudacao(nome) {
if (idade >= 18) {
return "Olá, " + nome; ✅ 2. SINTAXE
[Link]("Maior de idade");
}
<input type="tipo" name="nome" id="id" value="valor
} else if (idade > 12) {
// Arrow function padrão">
[Link]("Adolescente");
const soma = (a, b) => a + b; Exemplo:
} else {
// Função anônima <input type="email" id="email" name="email"
[Link]("Criança"); placeholder="Digite seu email">
const dobro = function(x) {
}
return x * 2;
// Operador ternário
};
let status = idade >= 18 ? "Adulto" : "Menor"; ✅ 3. TIPOS COMUNS DE INPUT
Tipo Descrição
💼 14. Exemplos de Uso (type)
🔁 12. Laços de Repetição (Loops)
Interação com HTML: text Campo de texto livre
// for
<button onclick="mostrarMensagem()">Clique aqui</button> passwor Campo de senha (oculta)
for (let i = 0; i < 5; i++) { d
<script>
[Link](i); email Validação de e-mail
function mostrarMensagem() {
}
alert("Você clicou no botão!"); number Apenas números
// while
} date Data (calendário)
let i = 0;
</script>
time Horário
while (i < 5) {
Manipulação de arrays:
[Link](i); checkbo Caixa de seleção
let frutas = ["maçã", "banana", "uva"]; x
i++;
[Link]("laranja"); radio Botões de opção única
}
[Link]([Link](", "));
// do...while range Controle deslizante (slider)
Objeto:
let j = 0; color Seleção de cor
let pessoa = {
do { file Upload de arquivo
nome: "Carlos",
[Link](j); hidden Valor oculto
idade: 30,
j++;
saudacao: function() { tel Número de telefone
} while (j < 5);
return "Olá, meu nome é " + [Link]; url Validação de link
// for...of (para arrays)
} submit Botão de envio
for (let item of lista) {
};
[Link](item); reset Botão de limpar formulário
[Link](
} search Campo de busca
// for...in (para objetos) button Botão genérico (sem ação
TIPO DE ENTRADA DE DADOS EM HTML
for (let chave in objeto) { padrão)
✅ 1. DEFINIÇÃO
HTML - HyperText Markup Language; CSS – Cascading Style Sheet; JavaScript

✅ 7. EXEMPLOS DE USO COM HTML + JAVASCRIPT <input type="number" id="idade" min="18"

max="99">
✅ 4. CARACTERÍSTICAS E PROPRIEDADES 🔹 Exemplo 1: Input de texto com validação
<button
Principais Atributos HTML: <input type="text" id="nome" placeholder="Digite onclick="verificarIdade()">Validar</button>
seu nome" required>
 name: nome do campo (usado no envio)
<button
<script>

 id: identificação única onclick="verificarNome()">Enviar</button> function verificarIdade() {

 value: valor padrão <script> const idade =

parseInt([Link]("idade").value);
function verificarNome() {
 placeholder: dica dentro do campo
if (idade >= 18 && idade <= 99) {
let nome =
 required: obrigatório [Link]("nome").value; alert("Idade aceita.");
 readonly: somente leitura if ([Link]() === "") { } else {
 disabled: desabilitado alert("Preencha o nome!"); alert("A idade deve estar entre 18 e 99.");

 min, max, step: para números, datas, range } else { }

 pattern: expressão regular alert("Olá, " + nome); }

 multiple: permite múltiplos valores (ex: file, email) } </script>

}
</script> 🔹 Exemplo 4: Checkbox e Radio
✅ 5. FUNCIONALIDADES E VALIDAÇÃO
Validação Automática (nativa): <p>Escolha seu gênero:</p>

O navegador valida entradas como email, url, number, 🔹 Exemplo 2: Email com verificação <input type="radio" name="genero"
required, pattern. value="Masculino"> Masculino
<input type="email" id="email"
Com JavaScript: placeholder="Digite seu email"> <input type="radio" name="genero"
value="Feminino"> Feminino
Você pode acessar e manipular campos com <button
[Link]() ou querySelector(): onclick="verificarEmail()">Verificar</button> <br>

let valor = [Link]("nome").value; <script> <input type="checkbox" id="termos"> Aceito os

termos
if (valor === "") { function verificarEmail() {
<br>
alert("Campo obrigatório!"); const email =
[Link]("email").value; <button onclick="enviar()">Enviar</button>
}
if (![Link]("@")) { <script>
alert("Email inválido!"); function enviar() {
✅ 6. APLICAÇÕES PRÁTICAS } else { const termos =
[Link]("termos").checked;
 Formulários de cadastro alert("Email válido!");
const genero =
 Validação de dados em tempo real } [Link]('input[name="genero"]:ch
ecked');
 Sistemas de upload de arquivos }
</script> if (!termos || !genero) {
 Interfaces com sliders ou cores
alert("Marque um gênero e aceite os termos.");
 Escolha de datas e horários
} else {
 Escolhas com checkboxes e radios 🔹 Exemplo 3: Número com limites
alert("Gênero: " + [Link]);
HTML - HyperText Markup Language; CSS – Cascading Style Sheet; JavaScript

}
}
</script>

✅ 8. CONCLUSÃO
O uso correto dos inputs HTML com JavaScript permite criar
interfaces ricas, interativas e seguras para entrada de dados.
Explorar diferentes types e combiná-los com JavaScript
oferece ao usuário uma experiência eficiente, além de
facilitar a validação antes de envio para o servidor.