0% Concluído
0/0 Steps
  1. Introdução ao HTML
    3 Tópicos
    |
    1 Teste
  2. Configuração do Ambiente de Desenvolvimento
    3 Tópicos
    |
    1 Teste
  3. Estrutura Básica de um Documento HTML
    2 Tópicos
    |
    1 Teste
  4. Elementos HTML
    5 Tópicos
    |
    1 Teste
  5. Atributos HTML
    2 Tópicos
    |
    1 Teste
  6. Links HTML
    3 Tópicos
    |
    1 Teste
  7. Imagens HTML
    2 Tópicos
    |
    1 Teste
  8. Tabelas HTML
    3 Tópicos
    |
    1 Teste
  9. Formulários HTML
    5 Tópicos
    |
    1 Teste
  10. Elementos Semânticos HTML5
    2 Tópicos
    |
    1 Teste
  11. Multimídia HTML5
    2 Tópicos
    |
    1 Teste
  12. Compreendendo Iframes em HTML5
    1 Tópico
    |
    1 Teste
  13. Gráficos HTML5
    1 Tópico
    |
    1 Teste
  14. APIs HTML5 e JavaScript
    2 Tópicos
    |
    1 Teste
  15. Acessibilidade HTML
    2 Tópicos
    |
    1 Teste
  16. SEO e HTML
    2 Tópicos
    |
    1 Teste
  17. Boas Práticas e Convenções em HTML
    2 Tópicos
    |
    1 Teste
  18. Publicando seu site na web
    2 Tópicos
    |
    1 Teste
  19. Projeto Final
    1 Tópico
  20. Encerramento
Módulo 3, Tópico 2
Em andamento

Tags HTML, cabeçalho e corpo

Roger.Santos 01/07/2024
Módulo Progresso
0% Concluído

Título da Aula: Estrutura Básica de um Documento HTML (Tags HTML, cabeçalho e corpo)

Introdução

Olá e bem-vindo de volta à nossa jornada de aprendizado de HTML! Na aula anterior, falamos sobre a importância do Doctype em um documento HTML. Hoje, vamos mergulhar mais fundo na estrutura básica de um documento HTML, focando nas tags HTML, cabeçalho e corpo. Então, vamos começar!

Corpo da Aula

Um documento HTML é composto por uma série de elementos, cada um representado por uma tag ou um conjunto de tags. Esses elementos são organizados em uma estrutura de árvore conhecida como a “Árvore DOM” (Document Object Model). No topo desta árvore está o elemento <html>, que contém todos os outros elementos da página.

Dentro do elemento <html>, geralmente encontramos dois elementos principais: <head> e <body>.

O elemento <head> contém metadados sobre o documento. Metadados são informações sobre a página que não são exibidas ao usuário, mas são importantes para o navegador e para os mecanismos de busca. Aqui estão alguns dos elementos que você pode encontrar dentro do <head>:

  • <title>: Define o título da página, que é exibido na barra de título do navegador ou na guia da página.
  • <meta>: Pode definir vários tipos de metadados, como a codificação de caracteres da página, a descrição da página para mecanismos de busca, palavras-chave para mecanismos de busca e instruções de viewport para dispositivos móveis.
  • <link>: Usado para vincular a folhas de estilo externas e outros recursos.
  • <style>: Usado para incluir CSS diretamente na página.
  • <script>: Usado para incluir JavaScript diretamente na página ou para vincular a scripts externos.

O elemento <body> contém o conteúdo da página que é exibido ao usuário. Isso inclui texto, imagens, links, tabelas, formulários e muito mais. Cada tipo de conteúdo é representado por um tipo específico de elemento, e vamos explorar muitos desses elementos nas próximas aulas.

Aqui está um exemplo de como um documento HTML5 completo pode parecer:

<!DOCTYPE html>
<html>
<head>
    <title>Título da Minha Página</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Olá, mundo!</h1>
    <p>Bem-vindo à minha página web.</p>
</body>
</html>

Conclusão

E aí está! Agora você tem uma compreensão mais profunda da estrutura de um documento HTML e do papel das tags HTML, cabeçalho e corpo. Na próxima aula, vamos começar a explorar os diferentes tipos de elementos HTML que você pode usar para adicionar e formatar conteúdo em suas páginas web. Até lá, continue praticando a criação de documentos HTML e experimente adicionar diferentes elementos ao cabeçalho e ao corpo!