O que é HTML? - Mestres do WP

Aulas

Curso de HTML Básico – Aula 01 | O que é HTML?

2 anos atrás

Em primeiro lugar, nesta aula, vamos explorar os fundamentos do HTML e entender sua importância na construção de páginas da web. Enfim, o HTML (Hypertext Markup Language) é a linguagem padrão para estruturar e organizar o conteúdo de uma página na web. Dessa forma, ele fornece a estrutura básica necessária para criar e exibir informações de forma coerente e consistente em diferentes dispositivos e navegadores.

Definição do HTML como uma linguagem de marcação usada para estruturar o conteúdo de uma página da web:

O HTML, sigla para Hypertext Markup Language (Linguagem de Marcação de Hipertexto), é uma linguagem de marcação usada para estruturar e organizar o conteúdo de uma página da web. Enfim, o HTML fornece uma estrutura básica que define como o navegador exibe o conteúdo.

No HTML, utilizamos uma série de tags (também conhecidas como elementos) para delimitar e identificar diferentes partes do conteúdo. Enfim, cada tag desempenha uma função específica definindo como o texto, imagens, links e outros elementos exibidos e interagem com o usuário.

A linguagem HTML consiste em uma sintaxe simples, baseada em elementos e atributos. Logo, Os elementos são envolvidos por tags, que são representadas pelos sinais de menor que (<) e maior que (>). Por exemplo, a tag <p> é utilizada para marcar um parágrafo, enquanto a tag <img> é usada para inserir uma imagem na página.

Além das tags, o HTML também utiliza atributos para fornecer informações adicionais sobre os elementos. Enfim, você insere os atributos dentro das tags e eles contêm valores que definem características específicas, como o endereço de uma imagem ou a URL de um link.

A estrutura básica de um documento HTML inclui a tag como a raiz do documento, seguida pela seção que contém informações sobre o documento, como o título da página e links para estilos CSS. Enfim, você coloca o conteúdo real da página dentro da tag <body>, onde insere os elementos que serão exibidos aos usuários.

Ao usar o HTML corretamente e seguir as melhores práticas e padrões estabelecidos, você pode criar páginas da web bem estruturadas, semanticamente corretas e acessíveis aos usuários. Enfim, o HTML é a base fundamental para o desenvolvimento de sites e uma habilidade essencial para qualquer desenvolvedor web.

Estrutura básica de um documento HTML

Agora vamos explorar a estrutura básica de um documento HTML. Desse modo, é essencial entender a estrutura correta de um documento HTML para garantir que os navegadores interpretem corretamente as páginas da web e apresentem o conteúdo de forma adequada. Enfim, vamos examinar os elementos principais que compõem a estrutura de um documento HTML.

Tag HTML

A tag é a raiz de um documento HTML e envolve todo o conteúdo da página. Ela define o início do documento e seu final, e todos os outros elementos HTML devem estar contidos dentro desta tag.

Exemplo:

<!DOCTYPE html>
<html>
  <!-- Conteúdo da página -->
</html>

Tag Head

A tag <head> é usada para fornecer informações sobre o documento HTML. Ela não é visível na página, mas contém metadados, como o título da página, links para arquivos de estilo CSS, scripts JavaScript e outras informações relevantes.

Exemplo:

<head>
  <title>Título da Página</title>
  <link rel="stylesheet" href="estilos.css">
  <script src="script.js"></script>
</head>

Tag Body

A tag é usada para envolver todo o conteúdo visível da página. Então, é dentro desta tag que é inserido os elementos HTML para serem exibidos para os usuários, como texto, imagens, links, tabelas, formulários, entre outros.

<body>
  <h1>Título da Página</h1>
  <p>Este é um parágrafo de exemplo.</p>
  <img src="imagem.jpg" alt="Imagem de exemplo">
  <a href="https://www.exemplo.com">Link de exemplo</a>
</body>

Doctype

O doctype é uma instrução especial que você deve colocar no início do documento HTML para informar ao navegador qual versão do HTML está sendo utilizada. Então, ele ajuda a garantir a renderização correta da página e a interpretação correta do código.

<!DOCTYPE html>
<html>
  <!-- Conteúdo da página -->
</html>

Ao criar um documento HTML, você deve seguir a estrutura básica apresentada nesta aula. Enfim, a tag envolve todo o conteúdo, a tag contém informações sobre o documento e a tag abriga o conteúdo visível da página. Incluir o doctype adequado também é essencial para garantir a compatibilidade com os navegadores.

Lembre-se de que essa é apenas uma visão geral da estrutura básica de um documento HTML. Dessa forma, à medida que avançarmos no curso, você aprenderá a utilizar outros elementos e atributos para estruturar e estilizar seu conteúdo de forma mais detalhada e interativa.

Utilização de tags e elementos

Continuando, vamos explorar as diferentes tags e elementos HTML disponíveis e aprender como utilizá-los para estruturar e organizar o conteúdo de uma página da web. Enfim, cada tag e elemento tem uma finalidade específica e nos permite formatar o texto, adicionar imagens, criar listas, definir cabeçalhos, links e muito mais. Então, vamos conhecer algumas das tags HTML mais comuns e aprender como usá-las corretamente.

Títulos e Parágrafos

A tag <h1> é usada para definir o título principal da página. Existem também as tags<h2>, <h3> e assim por diante, para títulos secundários.

A tag <p> é usada para definir parágrafos de texto.

<h1>Título Principal</h1>
<h2>Título Secundário</h2>
<p>Este é um parágrafo de exemplo.</p>

Listas

Usamos a tag <ul> para criar uma lista não ordenada, onde apresentamos os itens com marcadores (pontos, quadrados, círculos, etc.). Usamos a tag <ol> para criar uma lista ordenada com itens são numerados.

A tag <li> utiliza-se a tag para cada item da lista.

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

Links

A tag <a> é usada para criar links. O atributo “href” especifica o endereço para onde o link aponta.

O texto entre as tags de abertura e fechamento do link aparece como o texto do link.

<a href="https://www.exemplo.com">Link de exemplo</a>

Imagens

A tag <img> é usada para inserir imagens na página. Desse modo, o atributo “src” especifica o caminho para a imagem e o atributo “alt” fornece uma descrição alternativa para a imagem.

<img src="caminho/para/imagem.jpg" alt="Descrição da imagem">

Divisões e Seções

Usamos a tag <div> para criar divisões genéricas na página, permitindo agrupar e estilizar elementos.

As tags <header>, <nav>, <main>, <footer> e outras usadas para estruturar seções específicas da página.

<div>
  <h1>Título da Divisão</h1>
  <p>Conteúdo da Divisão</p>
</div>

<header>
  <h1>Logo e Cabeçalho</h1>
</header>

<nav>
  <ul>
    <li>Item de Navegação 1</li>
    <li>Item de Navegação 2</li>
    <li>Item de Navegação 3</li>
  </ul>
</nav>

<main>
  <h1>Conteúdo Principal</h1>
  <p>

Texto principal da página</p>
</main>

<footer>
  <p>Rodapé da página</p>
</footer>

Em conclusão, estes são apenas alguns exemplos das tags HTML mais comuns. Conforme você avança no curso, aprenderá sobre mais tags e elementos que permitem criar páginas da web ricas e interativas. Enfim, lembre-se sempre de utilizar as tags corretas para cada tipo de conteúdo e seguir as boas práticas para obter páginas semanticamente corretas e acessíveis.