Fundamentos de HTML para Desenvolvimento Web

O desenvolvimento web inicia-se com o entendimento do protocolo HTTP e da estrutura básica das páginas. Um servidor simples em Python ilustra esse fluxo:

import socket

server = socket.socket()
server.bind(("127.0.0.1", 8080))
server.listen(5)

while True:
    client, addr = server.accept()
    request = client.recv(8192)
    response = b"HTTP/1.1 200 OK\r\n\r\n<h1>Olá, mundo!</h1>"
    client.send(response)
    client.close()

O navegador envia uma requisição via HTTP → o servidor processa e responde com conteúdo HTML → o navegador interpreta e renderiza a página.

O que é HTML?

  • HTML (HyperText Markup Language) é uma linguagem de marcação usada para estruturar conteúdos na web.
  • Não é uma linguagem de programação, mas sim um conjunto de regras que os navegadores seguem para exibir páginas.
  • Arquivos HTML geralmente têm extensão .html ou .htm.

Estrutura Básica de um Documento HTML


<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Exemplo de Página</title>
</head>
<body>
  <!-- Conteúdo visível aqui -->
</body>
</html>
  • `` declara que o documento segue o padrão HTML5.
  • A tag <html> envolve todo o conteúdo da página.
  • <head> contém metadados (não visíveis ao usuário), como codificação e título.
  • <body> abriga o conteúdo principal exibido no navegador.

Importante: Para páginas em português ou outros idiomas latinos, use <meta charset="UTF-8"> para evitar problemas de acentuação.

Sintaxe de Tags HTML

  • Tags são delimitadas por < >, como <p> ou <div>.
  • A maioria das tags tem abertura e fechamento: <tag>conteúdo</tag>.
  • Algumas são autocontidas: <br />, <img src="foto.jpg" />.
  • Podem conter atributos: id, class, style, etc.

Atributos Comuns

  • id: identificador único no documento.
  • class: usado para aplicar estilos CSS (pode ser repetido).
  • style: define estilos inline (não recomendado para projetos grandes).

Comentários em HTML

<!-- Este é um comentário invisível no navegador -->

Tags Comuns no <head>

Tag Função
<title> Título exibido na aba do navegdaor.
<style> Define estilos CSS internos.
<script> Inclui ou referencia código JavaScript.
<link> Vincula arquivos externos, como folhas de estilo.
<meta> Fornece metadados sobre a página.

Exemplos de Meta Tags

<!-- Redirecionamento após 3 segundos -->
<meta http-equiv="refresh" content="3;url=https://exemplo.com">

<!-- Codificação de caracteres -->
<meta charset="UTF-8">

<!-- Compatibilidade com versões do Internet Explorer -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!-- SEO: palavras-chave e descrição -->
<meta name="keywords" content="html, web, desenvolvimento">
<meta name="description" content="Introdução ao HTML para iniciantes.">

Tags Comuns no <body>

Texto e Formatação

<p>Parágrafo normal.</p>
<b>Negrito</b> | <i>Itálico</i> | <u>Sublinhado</u> | <s>Tachado</s>
<h1>Título Principal</h1>
<h2>Subtítulo</h2>
<br> <!-- Quebra de linha -->
<hr> <!-- Linha horizontal -->

Caracteres Especiais

Símbolo Código HTML
Espaço &nbsp;
> &gt;
< &lt;
& &amp;
© &copy;
® &reg;

Blocos e Linhas: <div> vs <span>

  • <div>: elemento de bloco (começa em nova linha).
  • <span>: elemento inline (flui com o texto).
  • Ambos são semanticamente neutros — usados principalmente para estilização com CSS.

Regra de aninhamento: Elementos inline não devem conter elementos de bloco. Por exemplo, um <p> não pode ter outro <p> ou <div> dentro.

Imagens

<img src="imagem.jpg" alt="Descrição alternativa" title="Dica ao passar o mouse" width="300">

O atrbiuto alt é essencial para acessibilidade e SEO.

Hiperlinks

<a href="https://exemplo.com" target="_blank">Visite nosso site</a>
  • href: URL de destino (absoluto, relativo ou âncora como #topo).
  • target="_blank": abre em nova aba.

Listas

Não ordenadas:

<ul type="circle">
  <li>Item A</li>
  <li>Item B</li>
</ul>

Ordenadas:

<ol type="A" start="1">
  <li>Primeiro</li>
  <li>Segundo</li>
</ol>

Definição:

<dl>
  <dt>Termo</dt>
  <dd>Descrição do termo.</dd>
</dl>

Tabelas

<table border="1">
  <thead>
    <tr>
      <th>ID</th>
      <th>Nome</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Ana</td>
    </tr>
  </tbody>
</table>

Atributos úteis: rowspan, colspan, width (melhor controlado com CSS).

Formulários

Usados para coletar dados do usuário e enviá-los ao servidor.

<form action="/submit" method="POST">
  <label for="email">E-mail:</label>
  <input type="email" id="email" name="email" required>

  <select name="pais">
    <option value="br">Brasil</option>
    <option value="pt">Portugal</option>
  </select>

  <textarea name="comentario" rows="4"></textarea>

  <input type="submit" value="Enviar">
</form>

Tipos Comuns de <input>

Tipo Exemplo
text <input type="text">
password <input type="password">
email <input type="email">
checkbox <input type="checkbox" checked>
radio <input type="radio" name="sexo" value="m">
file <input type="file">
submit <input type="submit" value="Enviar">

Atributos Importantes

  • name: chave usada no envio dos dados ao servidor.
  • value: valor associado ao campo.
  • checked: marca checkbox/radio como selecionado.
  • required, disabled, readonly: controlam comportamento.

Outros Elementso de Formulário

  • <label for="id">: associa rótulo a um campo (melhora acessibilidade).
  • <textarea>: entrada de texto multilinha.
  • <select> com <option>: menu suspenso.

Tags: HTML CSS Web Development HTTP frontend

Publicado em 9-23 06:28

Tags em Destaque

©2026 Doido Dev