Olá leitores do blog Cursos Legais! É um prazer tê-los aqui para explorar o mundo do desenvolvimento web com HTML. Se você está pronto para aprender a criar páginas web incríveis, você está no lugar certo. Neste curso passo a passo, vamos cobrir desde os conceitos básicos até a construção de 10 exemplos práticos de código usando HTML.

Passo 1: Introdução ao HTML

HTML (Hypertext Markup Language) é a linguagem fundamental para criação de páginas web. Vamos começar nossa jornada pela compreensão dos conceitos básicos do HTML.

Passo 2: Estrutura Básica de uma Página HTML

Antes de mergulharmos nos exemplos de código, vamos entender a estrutura básica de uma página HTML:

html
<!DOCTYPE html>
<html>
<head>
    <title>Título da Página</title>
</head>
<body>
    <h1>Olá, Mundo!</h1>
    <p>Este é um parágrafo de exemplo.</p>
</body>
</html>

Passo 3: Cabeçalho, Parágrafos e Listas

Vamos começar a criar conteúdo com cabeçalhos, parágrafos e listas:

Exemplo 1: Cabeçalhos e Parágrafos

html
<!DOCTYPE html>
<html>
<head>
    <title>Cabeçalhos e Parágrafos</title>
</head>
<body>
    <h1>Título Principal</h1>
    <p>Este é um parágrafo de exemplo.</p>
    <h2>Subtítulo</h2>
    <p>Outro parágrafo de exemplo.</p>
</body>
</html>

Exemplo 2: Listas Não Ordenadas e Ordenadas

html
<!DOCTYPE html>
<html>
<head>
    <title>Listas</title>
</head>
<body>
    <h1>Listas</h1>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
    <ol>
        <li>Primeiro item</li>
        <li>Segundo item</li>
        <li>Terceiro item</li>
    </ol>
</body>
</html>

Passo 4: Links e Imagens

Vamos aprender a adicionar links e imagens em nossas páginas:

Exemplo 3: Links

html
<!DOCTYPE html>
<html>
<head>
    <title>Links</title>
</head>
<body>
    <h1>Links</h1>
    <a href="https://www.example.com">Visite o Example.com</a>
</body>
</html>

Exemplo 4: Imagens

html
<!DOCTYPE html>
<html>
<head>
    <title>Imagens</title>
</head>
<body>
    <h1>Imagens</h1>
    <img src="imagem.jpg" alt="Descrição da Imagem">
</body>
</html>

Passo 5: Tabelas e Formulários

Vamos explorar tabelas e formulários em HTML:

Exemplo 5: Tabela Simples

html
<!DOCTYPE html>
<html>
<head>
    <title>Tabela</title>
</head>
<body>
    <h1>Tabela Simples</h1>
    <table>
        <tr>
            <th>Nome</th>
            <th>Idade</th>
        </tr>
        <tr>
            <td>João</td>
            <td>25</td>
        </tr>
        <tr>
            <td>Maria</td>
            <td>30</td>
        </tr>
    </table>
</body>
</html>

Exemplo 6: Formulário de Contato

html
<!DOCTYPE html>
<html>
<head>
    <title>Formulário</title>
</head>
<body>
    <h1>Formulário de Contato</h1>
    <form>
        <label for="nome">Nome:</label>
        <input type="text" id="nome" name="nome"><br>
        <label for="email">E-mail:</label>
        <input type="email" id="email" name="email"><br>
        <input type="submit" value="Enviar">
    </form>
</body>
</html>

Passo 6: Estilos e Cores

Vamos aprender a adicionar estilos e cores aos elementos HTML:

Exemplo 7: Estilos CSS Internos

html
<!DOCTYPE html>
<html>
<head>
    <title>Estilos CSS</title>
    <style>
        h1 {
            color: blue;
        }
        p {
            font-size: 18px;
        }
    </style>
</head>
<body>
    <h1>Título com Estilo</h1>
    <p>Este é um parágrafo com estilo.</p>
</body>
</html>

Exemplo 8: Estilos CSS Externos

Crie um arquivo chamado "estilos.css" com o seguinte conteúdo:

css
h2 {
    background-color: yellow;
    padding: 10px;
}

E o HTML:

html
<!DOCTYPE html>
<html>
<head>
    <title>Estilos CSS Externos</title>
    <link rel="stylesheet" href="estilos.css">
</head>
<body>
    <h2>Subtítulo com Estilo</h2>
    <p>Parágrafo comum.</p>
</body>
</html>

Passo 7: Incorporando Vídeos e Áudios

Vamos incorporar vídeos e áudios em nossas páginas:

Exemplo 9: Vídeo Incorporado

html
<!DOCTYPE html>
<html>
<head>
    <title>Vídeo</title>
</head>
<body>
    <h1>Vídeo Incorporado</h1>
    <video width="640" height="360" controls>
        <source src="video.mp4" type="video/mp4">
        Seu navegador não suporta o elemento de vídeo.
    </video>
</body>
</html>

Exemplo 10: Áudio Incorporado

html
<!DOCTYPE html>
<html>
<head>
    <title>Áudio</title>
</head>
<body>
    <h1>Áudio Incorporado</h1>
    <audio controls>
        <source src="audio.mp3" type="audio/mpeg">
        Seu navegador não suporta o elemento de áudio.
    </audio>
</body>
</html>

Conclusão

Parabéns! Você concluiu este curso passo a passo sobre desenvolvimento com HTML. Esperamos que você tenha obtido uma compreensão sólida dos conceitos e recursos do HTML para criar páginas web incríveis.

Sobre o Autor

Este curso foi elaborado por Rodrigo Ferreira da Silva, um analista de desenvolvedor de sistemas e big data apaixonado por compartilhar conhecimento sobre programação e tecnologia.

Aproveite suas novas habilidades em desenvolvimento web e continue explorando o mundo da criação de páginas incríveis!

Mini Curso HMTL com exemplos