HTML 5
-
Introdução ao HTML3 Tópicos|1 Teste
-
Configuração do Ambiente de Desenvolvimento3 Tópicos|1 Teste
-
Estrutura Básica de um Documento HTML2 Tópicos|1 Teste
-
Elementos HTML5 Tópicos|1 Teste
-
Atributos HTML2 Tópicos|1 Teste
-
Links HTML3 Tópicos|1 Teste
-
Imagens HTML2 Tópicos|1 Teste
-
Tabelas HTML3 Tópicos|1 Teste
-
Formulários HTML5 Tópicos|1 Teste
-
Elementos Semânticos HTML52 Tópicos|1 Teste
-
Multimídia HTML52 Tópicos|1 Teste
-
Compreendendo Iframes em HTML51 Tópico|1 Teste
-
Gráficos HTML51 Tópico|1 Teste
-
APIs HTML5 e JavaScript2 Tópicos|1 Teste
-
Acessibilidade HTML2 Tópicos|1 Teste
-
SEO e HTML2 Tópicos|1 Teste
-
Boas Práticas e Convenções em HTML2 Tópicos|1 Teste
-
Publicando seu site na web2 Tópicos|1 Teste
-
Projeto Final1 Tópico
-
Encerramento
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!