Estrutura de um Documento HTML

Todo documento HTML segue uma estrutura padrão. A tag <head> contém metadados sobre a página: informações que não são exibidas diretamente, mas são importantes para o navegador. Isso inclui o título (que aparece na aba), a codificação de caracteres e links para arquivos externos. A tag <link> é usada dentro do <head> para conectar recursos como folhas de estilo (CSS).

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Título da Página</title>
    <!-- A tag <link> conecta um arquivo CSS externo à página -->
    <link rel="stylesheet" href="estilos.css">
</head>
<body>
    <h1>Olá, Mundo!</h1>
    <p>Este é o conteúdo da minha primeira página web.</p>
</body>
</html>

Tags para Formatar Texto

HTML oferece diversas tags para estruturar e formatar o texto, como títulos de diferentes níveis, parágrafos, negrito e itálico.

<h1>Título Principal (H1)</h1>
<h2>Subtítulo (H2)</h2>
<h3>Título de Seção (H3)</h3>
<h4>Título Menor (H4)</h4>
<h5>Título Mínimo (H5)</h5>
<p>Este é um parágrafo de exemplo. Podemos deixar um texto em <b>negrito</b>, 
<i>itálico</i>, ou <strong>forte importância</strong> e <em>ênfase</em>.</p>

Título Principal (H1)

Subtítulo (H2)

Título de Seção (H3)

Título Menor (H4)

Título Mínimo (H5)

Este é um parágrafo de exemplo. Podemos deixar um texto em negrito, itálico, ou forte importância e ênfase.

Imagens

A tag <img> é usada para incorporar imagens. O atributo src define o caminho da imagem e o alt fornece um texto alternativo para acessibilidade.

<img src="https://placehold.co/600x300/3b82f6/ffffff?text=Imagem+de+Exemplo" alt="Uma imagem de exemplo retangular com fundo azul e texto branco">

Uma imagem de exemplo retangular com fundo azul e texto branco

Links de Navegação

A tag <a> (âncora) cria hiperlinks para outras páginas ou recursos. O atributo href especifica o destino do link.

<p>Visite o <a href="https://www.google.com" target="_blank">Google</a> para pesquisar.</p>
<p><a href="#page-html">Ir para o topo desta página</a>.</p>

Visite o Google para pesquisar.

Ir para o topo desta página.

Vídeos e Áudios

As tags <video> e <audio> permitem incorporar conteúdo multimídia diretamente na página. O atributo controls exibe os controles padrão de reprodução.

<!-- Exemplo de Vídeo (usando um placeholder) -->
<video controls width="100%">
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  Seu navegador não suporta a tag de vídeo.
</video>

<!-- Exemplo de Áudio (usando um placeholder) -->
<audio controls class="w-full mt-4">
  <source src="https://www.w3schools.com/html/horse.ogg" type="audio/ogg">
  Seu navegador não suporta a tag de áudio.
</audio>

Listas

Use <ul> para listas não ordenadas (com marcadores) e <ol> para listas ordenadas (com números). Cada item da lista é definido pela tag <li>.

<h3>Lista de Compras (Não Ordenada)</h3>
<ul>
  <li>Café</li>
  <li>Leite</li>
  <li>Pão</li>
</ul>

<h3>Passos para Fazer Café (Ordenada)</h3>
<ol>
  <li>Ferver a água.</li>
  <li>Colocar o pó no coador.</li>
  <li>Despejar a água quente.</li>
</ol>

Lista de Compras (Não Ordenada)

Café
Leite
Pão

Passos para Fazer Café (Ordenada)

Ferver a água.
Colocar o pó no coador.
Despejar a água quente.

Tabelas

Tabelas são usadas para exibir dados em formato de grade. A estrutura básica inclui <table>, <tr> (linha), <th> (cabeçalho) e <td> (célula de dados).

<table>
  <thead>
    <tr>
      <th>Produto</th>
      <th>Preço</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Notebook</td>
      <td>R$ 4.500,00</td>
    </tr>
    <tr>
      <td>Mouse</td>
      <td>R$ 120,00</td>
    </tr>
  </tbody>
</table>

Produto	Preço
Notebook	R$ 4.500,00
Mouse	R$ 120,00

Tags Semânticas

HTML5 introduziu tags que dão significado estrutural ao conteúdo. Isso ajuda os navegadores, os mecanismos de busca (SEO) e as tecnologias assistivas a entenderem melhor a sua página.

<header>: Representa o cabeçalho da página ou de uma seção. Geralmente contém o logo, título e navegação.

<nav>: Define um conjunto de links de navegação.

<main>: Especifica o conteúdo principal e único do documento. Só deve haver um por página.

<section>: Agrupa conteúdo relacionado tematicamente, geralmente com um cabeçalho próprio.

<article>: Representa um conteúdo independente e autocontido, como um post de blog ou notícia.

<aside>: Define um conteúdo à parte do principal, como uma barra lateral (sidebar).

<footer>: Representa o rodapé da página ou de uma seção, com informações de copyright, contato, etc.

<header>
  <h1>Logo da Empresa</h1>
  <nav>Menu de Navegação</nav>
</header>

<main>
  <section>
    <h2>Notícias Recentes</h2>
    <article>
      <h3>Título da Notícia 1</h3>
      <p>Conteúdo da notícia 1...</p>
    </article>
  </section>
</main>

<aside>
  <p>Conteúdo da barra lateral.</p>
</aside>

<footer>
  <p>Copyright © 2024</p>
</footer>

Logo da Empresa

Notícias Recentes

Título da Notícia 1

Conteúdo da notícia 1...

Formulários

Formulários coletam dados do usuário. A tag <form> agrupa elementos como <input>, <label>, <textarea> e <button>.

<form action="/processar-dados" method="post">
  <div>
    <label for="nome">Nome:</label>
    <input type="text" id="nome" name="usuario_nome">
  </div>
  <div>
    <label for="email">Email:</label>
    <input type="email" id="email" name="usuario_email">
  </div>
  <div>
    <label for="msg">Mensagem:</label>
    <textarea id="msg" name="usuario_msg"></textarea>
  </div>
  <button type="submit">Enviar</button>
</form>

iframe

A tag <iframe> permite incorporar outro documento HTML dentro da página atual, como um mapa do Google Maps ou um vídeo do YouTube.

<iframe 
    src="https://www.google.com/maps/embed?pb=..." 
    width="100%" 
    height="450" 
    style="border:0;" 
    allowfullscreen="" 
    loading="lazy">
</iframe>

Seletores CSS

Seletores são padrões que "selecionam" os elementos HTML que você deseja estilizar. Os mais comuns são por tag, classe (.nome-da-classe) e ID (#id-do-elemento).

/* Seletor de TAG: aplica a todos os <p> */
p {
  color: #333;
}

/* Seletor de CLASSE: aplica a elementos com class="destaque" */
.destaque {
  background-color: yellow;
  font-weight: bold;
}

/* Seletor de ID: aplica ao elemento com id="titulo-principal" */
#titulo-principal {
  border-bottom: 2px solid blue;
}

<h1 id="titulo-principal">Título com ID</h1>
<p>Um parágrafo normal.</p>
<p class="destaque">Um parágrafo com classe de destaque.</p>

Título com ID

Um parágrafo normal.

Um parágrafo com classe de destaque.

Pseudo-classes e Pseudo-elementos

Pseudo-classes definem um estado especial de um elemento (ex: :hover para quando o mouse está sobre ele). Pseudo-elementos estilizam uma parte específica de um elemento (ex: ::first-letter para a primeira letra).

/* Pseudo-classe: muda a cor do link quando o mouse passa por cima */
a:hover {
  color: red;
}

/* Pseudo-classe: estiliza o primeiro filho de uma lista */
li:first-child {
    font-weight: bold;
}

/* Pseudo-elemento: aumenta a primeira letra de cada parágrafo */
p::first-letter {
  font-size: 150%;
  color: #0056b3;
}

Passe o mouse sobre mim

Primeiro item (em negrito)
Segundo item

Este parágrafo terá sua primeira letra estilizada.

Box Model: Propriedades Principais

Todo elemento HTML é uma "caixa". O Box Model descreve como o conteúdo, preenchimento (padding), borda (border) e margem (margin) de um elemento funcionam juntos.

.caixa-exemplo {
  width: 300px;
  padding: 20px; /* Preenchimento interno */
  border: 5px solid #3b82f6; /* Borda */
  margin: 15px; /* Margem externa */
  background-color: #eff6ff;
}

Eu sou uma caixa!

Posicionamento de Elementos

A propriedade position controla como um elemento é posicionado no documento. Os valores mais comuns são static (padrão), relative, absolute, fixed e sticky.

.container-relativo {
  position: relative;
  height: 150px;
  background-color: #e0e0e0;
}

.box-absoluto {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 100px;
  height: 100px;
  background-color: #ef4444;
  color: white;
}

Container Relativo

Box Absoluto

Elementos Flexíveis (Flexbox)

Flexbox é um modelo de layout que permite alinhar e distribuir espaço entre itens em um container. É ativado com display: flex; no container pai.

.flex-container {
  display: flex;
  justify-content: space-around; /* Distribui os itens horizontalmente */
  align-items: center; /* Alinha os itens verticalmente */
  background-color: #dbeafe;
  height: 150px;
}

.flex-item {
  width: 80px;
  height: 80px;
  background-color: #3b82f6;
  color: white;
}

Item 1

Item 2

Item 3

Sintaxe e Uso em Páginas Web

JavaScript é uma linguagem de script que adiciona interatividade às páginas web. O código pode ser inserido dentro da tag <script>, geralmente no final do <body>.

<body>
  <!-- Conteúdo HTML -->
  <h1 id="titulo-js">Título Original</h1>
  <button onclick="mudarTitulo()">Clique em Mim</button>

  <script>
    // Função que será chamada pelo botão
    function mudarTitulo() {
      // Seleciona o elemento H1 pelo seu ID
      const titulo = document.getElementById('titulo-js');
      // Altera o texto do elemento
      titulo.textContent = 'Título Alterado pelo JS!';
    }
  </script>
</body>

Título Original

Manipulação Dinâmica de Elementos (DOM)

O DOM (Document Object Model) é uma representação da estrutura da página. JavaScript pode usá-lo para criar, remover ou modificar elementos e estilos dinamicamente.

// Seleciona a div que vai conter os novos elementos
const container = document.getElementById('dom-container');

const novoParagrafo = document.createElement('p');

novoParagrafo.textContent = 'Este parágrafo foi criado com JavaScript.';
novoParagrafo.classList.add('novo-estilo'); // Adiciona uma classe para estilização


container.appendChild(novoParagrafo);

.novo-estilo {
  color: green;
  border-left: 4px solid green;
  padding-left: 8px;
  font-style: italic;
}

Abaixo deste texto, um novo parágrafo será adicionado.

Validação de Dados em Formulários

JavaScript é essencial para validar os dados de um formulário no lado do cliente (no navegador) antes de enviá-los ao servidor, garantindo que os dados estejam corretos e completos.

const form = document.getElementById('form-validacao');
const emailInput = document.getElementById('email-validacao');
const mensagemErro = document.getElementById('erro-email');

form.addEventListener('submit', function(event) {

  event.preventDefault();


  if (!emailInput.value.includes('@')) {
    mensagemErro.textContent = 'Por favor, insira um e-mail válido.';
    emailInput.style.borderColor = 'red';
  } else {
    mensagemErro.textContent = ''; // Limpa a mensagem de erro
    emailInput.style.borderColor = 'green';
    alert('Formulário enviado com sucesso!');
  }
});

Atividade 1 - Criar uma Página Web Simples com HTML

Criar uma página da web informativa sobre a cientista Marie Curie. Você deverá usar apenas tags de texto e imagem em HTML para recriar a página a partir da nova imagem de referência abaixo, onde o conteúdo é apresentado de forma vertical. Lembre-se de ter um arquivo chamado index.html.

Conteúdo: Use o texto e a imagem fornecidos para preencher sua página.

Tags Permitidas: Você só pode usar as seguintes tags HTML:

<h1> para o título principal.
<h2> para os subtítulos.
<p> para os parágrafos.
<img> para a imagem.

Enviar tarefa

Atividade 2

Este é o espaço para a descrição do segundo exercício. Substitua este texto pelo enunciado da atividade que você deseja propor.

Atividade 3

Este é o espaço para a descrição do terceiro exercício. Substitua este texto pelo enunciado da atividade que você deseja propor.

Atividade 4

Este é o espaço para a descrição do quarto exercício. Substitua este texto pelo enunciado da atividade que você deseja propor.

Atividade 5

Este é o espaço para a descrição do quinto exercício. Substitua este texto pelo enunciado da atividade que você deseja propor.

Atividade 6

Este é o espaço para a descrição do sexto exercício. Substitua este texto pelo enunciado da atividade que você deseja propor.

Atividade 7

Este é o espaço para a descrição do sétimo exercício. Substitua este texto pelo enunciado da atividade que você deseja propor.

Atividade 8

Este é o espaço para a descrição do oitavo exercício. Substitua este texto pelo enunciado da atividade que você deseja propor.

Atividade 9

Este é o espaço para a descrição do nono exercício. Substitua este texto pelo enunciado da atividade que você deseja propor.

Atividade 10

Este é o espaço para a descrição do décimo exercício. Substitua este texto pelo enunciado da atividade que você deseja propor.