Post

O Que é HTML?

Postado em
Por Vagner Leite
3 min de leitura

Objetivo da Aula:

Nesta aula, você entenderá o que é HTML, a sua importância na construção de páginas web e como ele se integra no desenvolvimento frontend. Vamos explorar a estrutura básica de uma página HTML, aprendendo a criar um arquivo HTML do zero.

Conteúdo da Aula:

1. Introdução ao HTML

O que é HTML?

  • HTML (HyperText Markup Language) é a linguagem padrão utilizada para criar e estruturar conteúdo na web. É através do HTML que organizamos o conteúdo em uma página, como texto, imagens, links, vídeos, formulários, e muito mais.
  • HTML não é uma linguagem de programação, mas uma linguagem de marcação. Isso significa que o HTML utiliza tags (ou marcadores) para indicar ao navegador como o conteúdo deve ser exibido.

A Importância do HTML:

  • Sem HTML, não existiriam páginas web. Ele é a base sobre a qual todos os sites são construídos.
  • Todo desenvolvedor web, independentemente da especialização, precisa dominar HTML, pois ele forma a estrutura que outras tecnologias, como CSS e JavaScript, complementam.

História Breve do HTML:

  • HTML foi criado por Tim Berners-Lee em 1991 como uma forma simples de compartilhar documentos entre cientistas. Desde então, evoluiu para uma linguagem rica, capaz de suportar a criação de sites dinâmicos e complexos.
  • A versão mais atual do HTML é o HTML5, que trouxe novas tags e funcionalidades para melhorar a estruturação e a interatividade das páginas web.

2. Estrutura Básica de um Documento HTML

Tags HTML:

  • HTML utiliza tags para definir diferentes partes de uma página.
  • Uma tag HTML básica possui a seguinte estrutura: <tag>conteúdo</tag>.
    • A maioria das tags tem uma tag de abertura (<tag>) e uma tag de fechamento (</tag>).
    • Exemplo: <p>Este é um parágrafo.</p>.

Estrutura Básica de uma Página HTML:

  • Todo documento HTML tem uma estrutura básica que deve ser seguida. Vamos analisá-la:
1
2
3
4
5
6
7
8
9
10

<!DOCTYPE html>
<html>
  <head>
    <title>Título da Página</title>
  </head>
  <body>
    <h1>Olá, Mundo!</h1>
    <p>Bem-vindo ao meu primeiro site com HTML.</p>
  </body>
</html>

Explicando a Estrutura:

  1. <!DOCTYPE html>: Informa ao navegador que este é um documento HTML5.
  2. <html>: A tag raiz que envolve todo o conteúdo da página.
  3. <head>: Contém metadados sobre o documento, como o título e links para arquivos CSS.
  4. <title>: Define o título da página que aparece na aba do navegador.
  5. <body>: Contém todo o conteúdo visível da página, como textos, imagens, links, etc.

3. Criando Seu Primeiro Documento HTML

Passo a Passo:

  1. Configuração do Ambiente:
    • Abra o editor de texto (VS Code) e crie um novo arquivo chamado index.html.
    • Copie e cole a estrutura básica do HTML acima.
  2. Adicionando Conteúdo:
    • Dentro da tag <body>, adicione mais alguns elementos, como <h1>, <p>, e <a> (link):
    1
2
3
4
5

    <body>
  <h1>Meu Primeiro Site</h1>
  <p>Este é um parágrafo de exemplo.</p>
  <a href="https://www.example.com">Visite o Example.com</a>
</body>
  3. Salvando e Visualizando:
    • Salve o arquivo e abra-o no navegador.
    • Você verá o título na aba do navegador e o conteúdo na página.

4. Resumo e Conclusão

  • Recapitulando:
    • HTML é a base da web, usado para estruturar todo o conteúdo que vemos em uma página.
    • Aprendemos sobre a importância do HTML, a sua estrutura básica, e como criar um documento HTML simples.
  • Próximos Passos:
    • Na próxima aula, vamos aprofundar o entendimento das tags básicas de HTML, explorando como estruturar o conteúdo de maneira mais complexa e organizada.

Exercícios Práticos:

  1. Crie uma página HTML simples:
    • Crie uma nova página HTML chamada meusite.html.
    • Estruture-a usando o que aprendeu, adicionando um título, cabeçalhos, parágrafos, e um link para outro site.
    • Experimente alterar o conteúdo das tags e veja como o navegador renderiza a página.
  2. Exploração Extra:
    • Pesquise sobre outras tags básicas do HTML (como <em>, <strong>, <ul>, <ol>, <li>) e tente utilizá-las em sua página.

Essa aula fornece uma base sólida para entender o que é HTML e como ele funciona. Siga os exercícios práticos para reforçar o aprendizado e prepare-se para avançar nas próximas aulas!

voltar

ninja
ninja html
Esta postagem está licenciada sob CC BY 4.0 pelo autor.