Módulo 1: Introdução ao HTML

O que é HTML?

HTML, que significa HyperText Markup Language (Linguagem de Marcação de Hipertexto), é a linguagem padrão usada para criar e estruturar páginas da web. Ele fornece a base sobre a qual os navegadores interpretam e exibem o conteúdo. HTML utiliza uma série de "tags" para definir a estrutura e o conteúdo das páginas.

História e Importância

  • História: HTML foi desenvolvido por Tim Berners-Lee em 1991. A primeira versão do HTML era bastante simples e permitia a criação de documentos com links e formatação básica. Desde então, o HTML evoluiu significativamente, com a introdução de novas versões e recursos.

  • Importância: HTML é fundamental para a web moderna. Sem HTML, não haveria páginas da web estruturadas. Ele serve como o esqueleto dos sites, permitindo a adição de textos, imagens, vídeos e links de forma organizada.

Estrutura Básica de um Documento HTML

Um documento HTML típico possui uma estrutura básica que inclui uma série de tags e elementos que definem o conteúdo e a estrutura da página. Aqui está a estrutura fundamental:

Tags e Elementos

Tags Essenciais

  • <html>: Define o início e o fim de um documento HTML. Deve envolver todo o conteúdo da página.

  • <head>: Contém metadados sobre o documento, como o título e links para arquivos de estilo e scripts.

  • <body>: Contém o conteúdo visível da página, incluindo texto, imagens, e outros elementos.

  • <title>: Define o título da página, que aparece na aba do navegador.

Elementos de Estrutura

  • <header>: Representa a área de cabeçalho de um documento ou seção. Normalmente contém informações introdutórias ou de navegação.

  • <nav>: Define uma seção de navegação com links para outras partes do site.

  • <main>: Define o conteúdo principal da página, excluindo cabeçalhos, rodapés e navegação.

  • <footer>: Representa a área de rodapé de um documento ou seção. Normalmente contém informações de contato, direitos autorais, etc.

Criando Seu Primeiro Documento HTML

Agora, vamos criar seu primeiro documento HTML. Siga os passos abaixo:

  1. Abra um editor de texto: Pode ser qualquer editor de texto simples, como Notepad (Windows), TextEdit (Mac), ou um editor de código como Visual Studio Code ou Sublime Text.

  2. Crie um novo arquivo: Salve o arquivo com a extensão .html, por exemplo, index.html.

  3. Copie e cole o código HTML fornecido acima na área de edição do seu arquivo.

  4. Salve o arquivo e abra-o em um navegador da web para ver o resultado.

Exemplo Prático

Vamos criar uma página HTML simples para um blog pessoal:

Neste exemplo, criamos um layout básico com um cabeçalho, uma área principal de conteúdo e um rodapé fixo. Sinta-se à vontade para modificar o código e experimentar diferentes estilos!

Se precisar de mais detalhes ou tiver alguma dúvida sobre este módulo, estou à disposição para ajudar!

Segue para os proximos modulos.