Curso Completo de HTML5

1. Introdução ao HTML5

O que é HTML5?

HTML5 (HyperText Markup Language 5) é a quinta versão da linguagem de marcação HTML, usada para estruturar e apresentar conteúdo na web. É a base de todas as páginas web modernas.

HTML5 trouxe muitas melhorias, incluindo novos elementos semânticos, suporte nativo para áudio e vídeo, e APIs JavaScript mais poderosas.

Por que aprender HTML5?

É a base de toda a web moderna
Fácil de aprender e usar
Compatível com todos os navegadores
Essencial para desenvolvimento web
Trabalha em conjunto com CSS e JavaScript

Quiz Rápido:

O que significa HTML?

Home Tool Markup Language HyperText Markup Language High Tech Modern Language

2. Estrutura Básica do HTML5

Documento HTML Básico

Todo documento HTML5 segue uma estrutura padrão:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Minha Primeira Página</title>
</head>
<body>
    <h1>Olá, Mundo!</h1>
    <p>Esta é minha primeira página HTML5.</p>
</body>
</html>
            

Exemplo Prático:

Explicação dos Elementos:

<!DOCTYPE html> - Declara que é um documento HTML5
<html> - Elemento raiz do documento
<head> - Contém metadados sobre o documento
<body> - Contém o conteúdo visível da página

3. Elementos Fundamentais

Tags e Elementos

HTML usa tags para criar elementos. As tags são escritas entre colchetes angulares:

<tag>conteúdo</tag>

Elementos Mais Comuns:

<!-- Cabeçalhos -->
<h1>Título Principal</h1>
<h2>Subtítulo</h2>
<h3>Título de Seção</h3>

<!-- Parágrafos -->
<p>Este é um parágrafo de texto.</p>

<!-- Quebra de linha -->
<br>

<!-- Linha horizontal -->
<hr>
            

Exemplo Prático:

Use h1 para o título principal da página, h2 para seções principais, h3 para subseções, e assim por diante.

4. Formatação de Texto

Elementos de Formatação

<!-- Texto em negrito -->
<strong>Texto importante</strong>
<b>Texto em negrito</b>

<!-- Texto em itálico -->
<em>Texto enfatizado</em>
<i>Texto em itálico</i>

<!-- Texto sublinhado -->
<u>Texto sublinhado</u>

<!-- Texto riscado -->
<s>Texto riscado</s>

<!-- Texto pequeno -->
<small>Texto pequeno</small>

<!-- Texto marcado -->
<mark>Texto destacado</mark>
            

Exemplo Prático:

Use <strong> e <em> para dar significado semântico. Use <b> e <i> apenas para estilo visual.

5. Listas

Lista Não Ordenada (ul)

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
            

Lista Ordenada (ol)

<ol>
    <li>Primeiro item</li>
    <li>Segundo item</li>
    <li>Terceiro item</li>
</ol>
            

Lista de Definição (dl)

<dl>
    <dt>HTML</dt>
    <dd>Linguagem de marcação para web</dd>
    <dt>CSS</dt>
    <dd>Linguagem de estilo para web</dd>
</dl>
            

Exemplo Prático:

6. Links e Navegação

Links Básicos

<!-- Link externo -->
<a href="https://www.google.com">Ir para Google</a>

<!-- Link interno -->
<a href="#secao1">Ir para Seção 1</a>

<!-- Link para email -->
<a href="mailto:contato@exemplo.com">Enviar Email</a>

<!-- Link para telefone -->
<a href="tel:+5511999999999">Ligar</a>
            

Atributos Importantes

<!-- Abrir em nova aba -->
<a href="https://www.exemplo.com" target="_blank">Link Externo</a>

<!-- Título do link -->
<a href="#" title="Descrição do link">Link com Título</a>

<!-- Download de arquivo -->
<a href="arquivo.pdf" download>Baixar PDF</a>
            

Exemplo Prático:

7. Imagens e Mídia

Elemento img

<!-- Imagem básica -->
<img src="imagem.jpg" alt="Descrição da imagem">

<!-- Imagem com dimensões -->
<img src="imagem.jpg" alt="Descrição" width="300" height="200">

<!-- Imagem responsiva -->
<img src="imagem.jpg" alt="Descrição" style="max-width: 100%; height: auto;">
            

Elemento figure

<figure>
    <img src="imagem.jpg" alt="Descrição da imagem">
    <figcaption>Legenda da imagem</figcaption>
</figure>
            

Exemplo Prático:

Sempre use o atributo "alt" para descrever suas imagens. Isso melhora a acessibilidade e SEO.

8. Tabelas

Estrutura Básica

<table>
    <thead>
        <tr>
            <th>Nome</th>
            <th>Idade</th>
            <th>Cidade</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>João</td>
            <td>25</td>
            <td>São Paulo</td>
        </tr>
        <tr>
            <td>Maria</td>
            <td>30</td>
            <td>Rio de Janeiro</td>
        </tr>
    </tbody>
</table>
            

Exemplo Prático:

Nome	Idade	Cidade
João	25	São Paulo
Maria	30	Rio de Janeiro

9. Formulários

Elementos de Formulário

<form action="/enviar" method="post">
    <!-- Campo de texto -->
    <label for="nome">Nome:</label>
    <input type="text" id="nome" name="nome" required>
    
    <!-- Campo de email -->
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
    
    <!-- Campo de senha -->
    <label for="senha">Senha:</label>
    <input type="password" id="senha" name="senha" required>
    
    <!-- Área de texto -->
    <label for="mensagem">Mensagem:</label>
    <textarea id="mensagem" name="mensagem" rows="4"></textarea>
    
    <!-- Botão de envio -->
    <button type="submit">Enviar</button>
</form>
            

Exemplo Prático:

Tipos de Input HTML5

<!-- Novos tipos do HTML5 -->
<input type="number" placeholder="Número">
<input type="date" placeholder="Data">
<input type="time" placeholder="Hora">
<input type="color" placeholder="Cor">
<input type="range" min="0" max="100">
<input type="url" placeholder="URL">
<input type="tel" placeholder="Telefone">
            

10. HTML5 Semântico

Elementos Semânticos

HTML5 introduziu novos elementos que dão significado ao conteúdo:

<header>
    <h1>Título do Site</h1>
    <nav>
        <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#sobre">Sobre</a></li>
            <li><a href="#contato">Contato</a></li>
        </ul>
    </nav>
</header>

<main>
    <section>
        <h2>Seção Principal</h2>
        <article>
            <h3>Artigo 1</h3>
            <p>Conteúdo do artigo...</p>
        </article>
    </section>
    
    <aside>
        <h3>Barra Lateral</h3>
        <p>Conteúdo relacionado...</p>
    </aside>
</main>

<footer>
    <p>© 2024 Meu Site. Todos os direitos reservados.</p>
</footer>
            

Estrutura Semântica:

Use elementos semânticos para melhorar a acessibilidade e SEO do seu site. Eles ajudam navegadores e leitores de tela a entender a estrutura do conteúdo.

11. Multimídia HTML5

Elemento Audio

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
    Seu navegador não suporta o elemento audio.
</audio>
            

Elemento Video

<video width="320" height="240" controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    Seu navegador não suporta o elemento video.
</video>
            

Elemento Canvas

<canvas id="meuCanvas" width="200" height="100">
    Seu navegador não suporta canvas.
</canvas>

<script>
var canvas = document.getElementById('meuCanvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#667eea';
ctx.fillRect(10, 10, 180, 80);
</script>
            

Exemplo Canvas:

12. Projeto Final

Vamos Criar uma Página Completa!

Agora que você aprendeu os conceitos básicos, vamos criar uma página web completa usando tudo que aprendemos:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meu Portfólio</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 0; padding: 20px; }
        header { background: #667eea; color: white; padding: 20px; text-align: center; }
        nav ul { list-style: none; padding: 0; }
        nav li { display: inline; margin: 0 10px; }
        nav a { color: white; text-decoration: none; }
        main { max-width: 800px; margin: 20px auto; }
        section { margin: 20px 0; }
        footer { text-align: center; margin-top: 40px; }
    </style>
</head>
<body>
    <header>
        <h1>João Silva</h1>
        <p>Desenvolvedor Web</p>
        <nav>
            <ul>
                <li><a href="#sobre">Sobre</a></li>
                <li><a href="#projetos">Projetos</a></li>
                <li><a href="#contato">Contato</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section id="sobre">
            <h2>Sobre Mim</h2>
            <p>Sou um desenvolvedor web apaixonado por criar experiências digitais incríveis.</p>
        </section>

        <section id="projetos">
            <h2>Meus Projetos</h2>
            <article>
                <h3>Site de E-commerce</h3>
                <p>Uma loja online completa com carrinho de compras.</p>
            </article>
        </section>

        <section id="contato">
            <h2>Entre em Contato</h2>
            <form>
                <label for="nome">Nome:</label>
                <input type="text" id="nome" required><br><br>
                
                <label for="email">Email:</label>
                <input type="email" id="email" required><br><br>
                
                <label for="mensagem">Mensagem:</label><br>
                <textarea id="mensagem" rows="4" cols="50"></textarea><br><br>
                
                <button type="submit">Enviar</button>
            </form>
        </section>
    </main>

    <footer>
        <p>© 2024 João Silva. Todos os direitos reservados.</p>
    </footer>
</body>
</html>
            

Resultado Final:

Quiz Final:

Qual elemento HTML5 é usado para definir o conteúdo principal de uma página?

🎉 Parabéns!

Você completou o curso de HTML5! Agora você conhece:

✅ Estrutura básica do HTML5
✅ Elementos fundamentais
✅ Formatação de texto
✅ Listas e links
✅ Imagens e mídia
✅ Tabelas e formulários
✅ HTML5 semântico
✅ Elementos multimídia
✅ Como criar uma página completa

Continue praticando! A melhor forma de aprender HTML5 é criando seus próprios projetos. Experimente combinar HTML5 com CSS e JavaScript para criar sites ainda mais incríveis!

Próximos Passos:

Aprenda CSS para estilizar suas páginas
Estude JavaScript para adicionar interatividade
Explore frameworks como Bootstrap ou React
Pratique criando projetos pessoais
Estude sobre acessibilidade e SEO

1. Introdução ao HTML5

O que é HTML5?

Por que aprender HTML5?

Quiz Rápido:

2. Estrutura Básica do HTML5

Documento HTML Básico

Exemplo Prático:

Olá, Mundo!

Explicação dos Elementos:

3. Elementos Fundamentais

Tags e Elementos

Elementos Mais Comuns:

Exemplo Prático:

Título Principal

Subtítulo

Título de Seção

4. Formatação de Texto

Elementos de Formatação

Exemplo Prático:

5. Listas

Lista Não Ordenada (ul)

Lista Ordenada (ol)

Lista de Definição (dl)

Exemplo Prático:

Lista Não Ordenada:

Lista Ordenada:

Lista de Definição:

6. Links e Navegação

Links Básicos

Atributos Importantes

Exemplo Prático:

7. Imagens e Mídia

Elemento img

Elemento figure

Exemplo Prático:

8. Tabelas

Estrutura Básica

Exemplo Prático:

9. Formulários

Elementos de Formulário

Exemplo Prático:

Tipos de Input HTML5

10. HTML5 Semântico

Elementos Semânticos

Estrutura Semântica:

11. Multimídia HTML5

Elemento Audio

Elemento Video

Elemento Canvas

Exemplo Canvas:

12. Projeto Final

Vamos Criar uma Página Completa!

Resultado Final:

João Silva

Sobre Mim

Meus Projetos

Site de E-commerce

Entre em Contato

Quiz Final:

🎉 Parabéns!

Próximos Passos: