Introdução ao HTML

O HTML (HyperText Markup Language) é a espinha dorsal da World Wide Web, sendo a linguagem de marcação fundamental para criar páginas web. Se você está interessado em criar seu próprio site ou entender como a estrutura das páginas da web funciona, o HTML é o ponto de partida essencial. Neste artigo, vamos explorar os conceitos básicos do HTML para ajudá-lo a começar sua jornada no mundo empolgante do desenvolvimento web.

O que é HTML?

HTML é uma linguagem de marcação que permite estruturar o conteúdo de uma página da web. Usando uma série de elementos e tags, você pode organizar texto, imagens, links e outros tipos de mídia em um formato compreensível para navegadores da web. Cada elemento HTML é rodeado por tags angulares, como <tag>, indicando ao navegador como o conteúdo deve ser interpretado.

Estrutura Básica do HTML

Antes de começar a criar conteúdo web, é importante entender a estrutura básica de um documento HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Título da Página</title>
</head>
<body>
    <h1>Meu Primeiro Título</h1>
    <p>Este é um parágrafo de texto.</p>
</body>
</html>
  • <!DOCTYPE html>: Declara o tipo de documento e versão do HTML que está sendo usada.
  • <html>: Elemento raiz que envolve todo o conteúdo da página.
  • <head>: Contém informações sobre o documento, como título da página e referências a arquivos de estilo (CSS).
  • <body>: Contém o conteúdo visível da página, como texto, imagens e links.
  • <h1>: Representa um cabeçalho de nível 1; existem <h2>, <h3>, etc., para cabeçalhos de níveis inferiores.
  • <p>: Define um parágrafo de texto.

Elementos e Atributos HTML

Os elementos HTML podem ser combinados para criar estruturas mais complexas. Além disso, os elementos podem ter atributos que fornecem informações adicionais sobre eles. Por exemplo:

<a href="https://www.exemplo.com">Este é um link</a>
<img src="imagem.jpg" alt="Descrição da Imagem">
  • <a>: Cria um link para outra página ou recurso web. O atributo href especifica o destino do link.
  • <img>: Incorpora uma imagem na página. O atributo src contém o caminho para a imagem, e o atributo alt fornece um texto alternativo para acessibilidade.

Listas, Tabelas e Formulários

O HTML permite criar listas ordenadas e não ordenadas, tabelas e formulários interativos:

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

<table>
    <tr>
        <td>Coluna 1</td>
        <td>Coluna 2</td>
    </tr>
</table>

<form>
    <label for="nome">Nome:</label>
    <input type="text" id="nome" name="nome">
    <input type="submit" value="Enviar">
</form>
  • <ul>: Cria uma lista não ordenada.
  • <li>: Define um item da lista.
  • <table>: Cria uma tabela.
  • <tr>: Define uma linha na tabela.
  • <td>: Define uma célula na tabela.
  • <form>: Cria um formulário. Os elementos <label>, <input>, e <button> são frequentemente usados em formulários para criar campos de entrada e botões de envio.

Este é apenas um mergulho superficial no vasto oceano do HTML. À medida que você avança, descobrirá mais elementos, atributos e técnicas para criar páginas web interativas e visualmente atraentes. Ao praticar e experimentar, você ganhará confiança para explorar tópicos mais avançados, como CSS (Cascading Style Sheets) para estilizar suas páginas e JavaScript para adicionar interatividade dinâmica.