OpenDocs

HTML5

Html

HyperText Markup Language

O HTML (HyperText Markup Language) é a linguagem de marcação padrão para criar páginas web. Ele usa "tags" para estruturar o conteúdo.

Um documento HTML básico é composto por uma estrutura hierárquica que define o tipo de documento, o cabeçalho (informações para o navegador, não visíveis na página) e o corpo (o conteúdo visível).

Tags Principais

  • !DOCTYPE html: Declara o tipo de documento e a versão do HTML (HTML5).
  • html: O elemento raiz que envolve todo o conteúdo da página.
  • head: Contém metadados, links para CSS, título da página, etc.
  • title: Define o título da página que aparece na aba do navegador.
  • body: Contém todo o conteúdo visível: textos, imagens, links, etc.

<!DOCTYPE html >
<html lang="pt-br" >
<head >
<meta> meta charset="UTF-8" >
<meta> name="viewport" content="width=device-width, initial-scale=1.0" >
</head >
<body >
<h1> Olá, Mundo! </h1>
<p> Este é o corpo da minha página web. </p>
</body >
</html>

Principais Tags e suas funções

HTML fornece várias tags para estruturar texto e definir hierarquia de títulos.

Usar as tags corretas ajuda na legibilidade e na acessibilidade (leitores de tela). A hierarquia de títulos vai de <h1> (mais importante) a (menos importante) <h6>.

Tags para Links, imagens, videos e audios

<a>: href (destino do link), target (onde abrir o link, ex: _blank para nova aba)

<img>: src (caminho da imagem), alt (texto alternativo para acessibilidade e SEO), width, height.

<video>: src (caminho do video), alt (texto alternativo para acessibilidade e SEO), width, height.

<audio>: src (caminho do audio), alt (texto alternativo para acessibilidade e SEO), width, height.

<a href="/https://github.com/G-Glass/Pon-Doc" >Sataca.dev </a>
<video src="/home/meuvideo.mp4" > Video </video>
<audio src="/home/memusic.mp4" > audio </video>
<img src="/home/minhafoto.png" > </video>

Formulários em HTML

Formulários são essenciais para interagir com o usuário e coletar dados (logins, pesquisas, uploads). O elemento principal é o <form>.

<form action="/submit-page" method="POST">
<!-- Campos do formulário vão aqui -->
</form>

action: A URL para onde os dados serão enviados quando o formulário for submetido.

method: O método HTTP usado para enviar os dados (GET ou POST).

Elementos de formuário

<input type="...">: O elemento mais versátil. O atributo type define o tipo de campo.type="text": Campo de texto simples (padrão).

  • type="text": Campo de texto simples (padrão).
  • type="password": Campo de senha (caracteres mascarados).
  • type="submit": Botão para enviar o formulário.
  • type="checkbox": Caixa de seleção (múltipla escolha).
  • type="radio": Botão de opção (apenas uma escolha possível em um grupo).
  • type="email", type="number", type="date", etc.

<button>: Um botão clicável (pode ser usado para submit, reset ou ações JavaScript).

<label>: Define um rótulo para um <input>. É crucial para acessibilidade. O atributo for deve corresponder ao id do input relacionado.

<textarea>: Um campo para entrada de texto em múltiplas linhas (como comentários).

<label for="nome">Nome:</label>
<input type="text" id="nome" name="nome_usuario">
<button type="submit">Enviar Dados</button>

HTML Semântico (HTML5)

O HTML Semântico é a prática de usar tags que descrevem com precisão o significado do conteúdo, em vez de apenas como ele deve parecer visualmente. Isso melhora a acessibilidade (leitores de tela) e o SEO (otimização para motores de busca).

Tags Semânticas Principais:

  • <header>-Define o cabeçalho de uma seção ou página (logotipo, menu de navegação).
  • <nav>-Define uma seção de links de navegação.
  • <main>- Define o conteúdo principal e único da página (deve haver apenas um por página).
  • <article> Define conteúdo independente e autossuficiente (ex: um post de blog, uma notícia).
  • <section>-Define uma seção temática de conteúdo.
  • <aside>- Define conteúdo relacionado, mas secundário (ex: barras laterais, anúncios).
  • <footer>-Define o rodapé de uma seção ou página (direitos autorais, links de contato).
<body>
<header>
<h1>Meu Site Semântico</h1>
</header>
<nav>
<a href="/">Home</a> | <a href="/blog">Blog</a>
</nav>
<main>
<article>
<h2>Título do Artigo</h2>
<p>Conteúdo principal do artigo...</p>
</article>
</main>
<footer>
<p>© 2024 Direitos Reservados</p>
</footer>
</body>

OpenDoc

Expandindo conhecimentos web

Desenvolvido por:
Sataca.Dev