Semana 1 - HTML e Estrutura de Páginas

📑 Sumário da Aula

📌 Tópico 1 - O que é HTML?
🧱 Tópico 2 - Estrutura Básica do HTML
📝 Tópico 3 - Títulos, Parágrafos e Span
🌐 Tópico 4 - Imagens e Links
📋 Tópico 5 - Listas
📊 Tópico 6 - Tabelas no HTML
📨 Tópico 7 – Formulários no HTML

📌 Tópico 1 - O que é HTML?

HTML significa HyperText Markup Language, ou Linguagem de Marcação de Hipertexto. Ela é usada para estruturar o conteúdo de páginas da web, como títulos, parágrafos, imagens, links e muito mais.

Todo site acessado na internet tem como base o HTML no seu front-end, independentemente da linguagem de backend usada.

🧱 Tópico 2 - Estrutura Básica do HTML


<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Minha Página</title>
  </head>
  <body>
    <h1>Olá, mundo!</h1>
    <p>Essa é uma página HTML básica.</p>
  </body>
</html>

Explicação:
- <!DOCTYPE html>: Indica que o documento é HTML5.
- <html>: Envolve todo o conteúdo da página.
- <head>: Contém informações sobre a página, como título e codificação.
- <body>: Contém o que é exibido no navegador.

📝 Tópico 3 - Títulos, Parágrafos e Span

Os títulos são definidos com as tags <h1> até <h6>. Eles ajudam a estruturar o conteúdo hierarquicamente.
- <h1>: Título principal
- <h2>: Subtítulo
- <h3> a <h6>: Títulos de menor relevância

Exemplo:

<h1>Meu Site</h1>
<h2>Sobre</h2>
<h3>Detalhes</h3>

A tag <p> é usada para parágrafos. Cada bloco de texto que você deseja destacar como um parágrafo deve ser colocado entre <p>.

<p>Este é um parágrafo explicativo sobre HTML.</p>

A tag <span> é usada para marcar pequenas partes de texto dentro de outros elementos (como <p>) sem quebrar o fluxo. Ideal para aplicar estilos.

<p>Exemplo com <span style="color:red;">texto destacado</span>.</p>

🌐 Tópico 4 - Imagens e Links

A tag <img> é usada para exibir imagens em uma página HTML. Os principais atributos são:

src: caminho da imagem (URL ou local)
alt: texto alternativo, mostrado se a imagem não carregar
width e height: controlam o tamanho (opcional)

Exemplo de código:
<img src="https://upload.wikimedia.org/wikipedia/commons/6/61/HTML5_logo_and_wordmark.svg" alt="Logo HTML5" width="150" />

Visualização real da imagem:
Logo HTML5

Já a tag <a> (de “anchor”, âncora) é utilizada para criar links clicáveis. O principal atributo é href, que define para onde o link vai.

📌 Tipos de links com <a>:

Link externo: Vai para outro site
Link interno: Vai para uma parte da mesma página
Abrir em nova aba: Usa target="_blank"
Link para e-mail: Usa mailto:
Link para telefone: Usa tel:

🧪 Exemplos:

<a href="https://www.google.com">Ir para o Google</a>

<a href="https://www.google.com" target="_blank">Abrir Google em nova aba</a>

<a href="#topico2">Voltar para Tópico 2</a>

<a href="mailto:contato@exemplo.com">Enviar e-mail</a>

<a href="tel:+5581999999999">Ligar agora</a>

💡 Você também pode estilizar links com CSS para mudar a cor, remover sublinhado, aplicar efeitos ao passar o mouse etc.

✅ Dicas importantes:
- Sempre use alt em imagens para acessibilidade.
- Em links externos, prefira target="_blank" para manter seu site aberto.
- Use âncoras #id para criar navegação interna fluida entre seções.

📋 Tópico 5 - Listas

Existem dois tipos principais de listas:
- <ul>: Lista não ordenada (com marcadores)
- <ol>: Lista ordenada (com números)
Cada item da lista é definido com a tag <li>

<ol>
<li>Primeiro</li>
<li>Segundo</li>
</ol>

📊 Tópico 6 - Tabelas no HTML

Tabelas são usadas para exibir dados organizados em linhas e colunas, como em planilhas. Elas são muito úteis para demonstrar informações de forma clara, como listas de produtos, notas de alunos, agendas, entre outros.

Uma tabela HTML é composta por algumas tags principais:

<table> – Define o início e o fim da tabela.
<tr> – Significa "table row" e define uma linha na tabela.
<th> – Significa "table header" e é usado para os títulos das colunas (cabeçalho).
<td> – Significa "table data" e representa os dados de cada célula.

🧪 Exemplo de código HTML:

  <table>
    <tr>
      <th>Produto</th>
      <th>Preço</th>
    </tr>
    <tr>
      <td>Caderno</td>
      <td>R$ 10,00</td>
    </tr>
    <tr>
      <td>Caneta</td>
      <td>R$ 2,50</td>
    </tr>
  </table>

👁️ Visualização prática:

Produto	Preço
Caderno	R$ 10,00
Caneta	R$ 2,50

✅ Dicas importantes:
- Use <th> para o cabeçalho e <td> para os dados.
- Use a classe table do Bootstrap para facilitar a estilização e tornar a tabela mais bonita automaticamente.
- Você pode aplicar estilos como table-striped, table-bordered e table-hover para melhorar a visualização.

📨 Tópico 8 – Formulários no HTML

O elemento <form> é usado para criar formulários interativos, permitindo que os usuários enviem dados ao servidor. Esses dados podem ser nomes, e-mails, mensagens, escolhas ou arquivos.

Os campos mais usados em formulários são: <input> para entrada de texto, <textarea> para textos longos, <select> para opções e <button> para o envio.

📌 Exemplo de Formulário Estilizado

📘 Explicações Detalhadas

<form>: agrupa todos os campos e define como os dados serão enviados.
<input type="text">: campo para texto curto.
<input type="email">: exige um formato válido de e-mail.
<textarea>: caixa de texto grande.
<select>: lista suspensa com várias opções.
<button>: botão que envia o formulário.

💡 Todos esses elementos podem ser combinados e estilizados com CSS e JavaScript para deixar o formulário mais interativo.