Desenvolvimento Web: Começando com HTML para Iniciantes

#HTML

Introdução ao HTML

O HTML (HyperText Markup Language) é a linguagem padrão usada para criar páginas web. Ele permite estruturar o conteúdo e definir elementos como textos, links, imagens e muito mais.

Estrutura Básica de um Documento HTML

Todo documento HTML possui uma estrutura básica que inclui tags essenciais. Veja um exemplo simples:

html
Copiar código
<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Título da Página</title>
</head>
<body>
  <h1>Bem-vindo ao HTML</h1>
  <p>Esta é a estrutura básica de um documento HTML.</p>
</body>
</html>

<html>: Envolve todo o conteúdo da página.
<head>: Contém metadados e links para recursos externos.
<title>: Define o título da página no navegador.
<body>: Contém o conteúdo visível da página.

Os títulos são definidos com tags <h1> a <h6>, sendo <h1> o mais importante. Parágrafos são definidos com a tag <p>.

html
Copiar código
<h1>Título Principal</h1>
<h2>Subtítulo</h2>
<p>Este é um parágrafo explicativo.</p>

Links e Imagens

Links são criados com a tag <a> e imagens com a tag <img>.

html
Copiar código
<a href="https://www.exemplo.com">Visite nosso site</a>
<img src="imagem.jpg" alt="Descrição da imagem">

href: Atributo que define o destino do link.
src: Atributo que define o caminho da imagem.
alt: Atributo que fornece uma descrição da imagem para acessibilidade.

Listas

HTML permite criar listas ordenadas (<ol>) e não ordenadas (<ul>).

html
Copiar código
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<ol>
  <li>Primeiro item</li>
  <li>Segundo item</li>
  <li>Terceiro item</li>
</ol>

Tabelas

As tabelas são criadas com a tag <table> e organizadas em linhas (<tr>) e células (<td>).

html
Copiar código
<table>
  <tr>
      <th>Nome</th>
      <th>Idade</th>
  </tr>
  <tr>
      <td>Ana</td>
      <td>28</td>
  </tr>
  <tr>
      <td>João</td>
      <td>35</td>
  </tr>
</table>

Formulários permitem a interação do usuário com o site, capturando dados.

html
Copiar código
<form action="/submit" method="post">
  <label for="nome">Nome:</label>
  <input type="text" id="nome" name="nome">
  
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
  
  <input type="submit" value="Enviar">
</form>

action: Define para onde os dados do formulário serão enviados.
method: Define o método de envio (GET ou POST).

HTML Semântico

O HTML 5 introduziu elementos semânticos que ajudam a definir claramente a estrutura da página.

html
Copiar código
<header>
  <h1>Cabeçalho</h1>
</header>
<nav>
  <ul>
      <li><a href="#home">Início</a></li>
      <li><a href="#sobre">Sobre</a></li>
      <li><a href="#contato">Contato</a></li>
  </ul>
</nav>
<main>
  <section>
      <h2>Seção Principal</h2>
      <p>Conteúdo da seção principal.</p>
  </section>
  <article>
      <h2>Artigo Relacionado</h2>
      <p>Conteúdo do artigo.</p>
  </article>
</main>
<footer>
  <p>Rodapé da página</p>
</footer>

<header>: Cabeçalho da página ou seção.
<nav>: Área de navegação.
<main>: Conteúdo principal.
<section>: Seção do documento.
<article>: Conteúdo independente, como um artigo.
<footer>: Rodapé da página.

Compreender os fundamentos do HTML é crucial para qualquer desenvolvedor web. Este guia oferece uma visão geral dos elementos mais importantes e seus usos. Pratique criando suas próprias páginas e explore mais recursos para aprimorar suas habilidades.

Fontes de produção:

Ilustrações da capa: gerada por lexica.art

Conteúdo gerado por: ChatGPT e revisões humanas