Fundamentos de HTML e Protocolo HTTP: Estrutura, Tags e Modelo de Requisição-Resposta

Estrutura Básica do HTML

O HTML (HyperText Markup Language) utiliza uma estrutura hierárquica de tags para definir o conteúdo de uma página web. Os editores modernos oferecem atalhos como Ctrl + / para comentar linhas inteiras e Ctrl + Shift + / para comentários em bloco.


<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <title>Documento Exemplo</title>
</head>
<body>
    <h1>Título Principal</h1>
    <p>Conteúdo da página.</p>
</body>
</html>

A tag <html> envolve todo o documento. O <head> contém metadados não visíveis na página, como codificação e o título exibido na aba do navegador. O <body> encapsula todo o conteúdo visual renderizado.

Tags do Cabeçalho (head)

Estilos Internos e Externos

A tag <style> permite definir CSS diretamente no documento, enquanto <link> importa folhas de estilo externas.

<head>
    <style>
        .texto-verde { color: green; }
    </style>
    <link rel="stylesheet" href="tema.css">
</head>

Tags do Corpo (body)

Títulos e Formatação de Texto

As tags de heading variam de <h1> (mais importante) a <h6> (menos importante). Para formatação, utilizamos <strong> (negrito semântico), <em> (ênfase/itálico), <u> (sublinhado) e <del> (texto riscado).

Parágrafos e Quebras

A tag <p> define parágrafos. Para separar conteúdos, usamos <hr> (linha horizontal) e <br> (quebra de linha). Ambas são tags de fechamento automático.

Elementos de Bloco vs. Inline

Elementos de Bloco: Ocupam toda a largura disponível e iniciam em uma nova linha (ex: <div>, <p>, <h1>-<h6>, <ul>, <table>). Podem conter outros elementos de bloco ou inline.

Elementos Inline: Ocupam apenas a largura do seu conteúdo e não forçam quebras de linha (ex: <span>, <a>, <img>, <strong>). Não devem conter elementos de bloco.

A Tag span

O <span> é um contêiner inline semântico neutro, utilizado para agrupar pequenas porções de texto para estilização via CSS ou manipulação via JavaScript.

<p>Status do sistema: <span style="color: red; font-weight: bold;">Crítico</span>.</p>

Imagens e Links

A tag <img> exibe imagens. O atributo src define o caminho, alt fornece texto alternativo, e title exibe um tooltip. Definir apenas width ou height mantém a proporção original.

<img src="foto.jpg" alt="Descrição da imagem" title="Detalhes" width="400">

A tag <a> cria hiperlinks. O atributo href define o destino (URL ou âncora interna com #id), e target="_blank" abre o link em uma nova aba.

<a href="https://www.example.com" target="_blank">Acessar Example</a>
<a href="#rodape">Ir para o Rodapé</a>

Entidades HTML (Símbolos Especiais)

Caracteres reservados ou ausentes no teclado devem ser inseridos via entidades:

Espaço não quebrável:  
Menor que / Maior que: < / >
E comercial: &
Símbolos monetários: € (€), £ (£)
Direitos autorais / Marca registrada: © / ®
Operadores matemáticos: × (×), ÷ (÷)

Protocolo HTTP

Conceito e Origem

O HTTP (HyperText Transfer Protocol) é um protocolo da camada de aplicação projetado para padronizar a comunicação entre clientes (navegadores) e servidores. Sem essa padronização, os navegadores não saberiam como interpretar os dados brutos recebidos via TCP.

Existem duas variantes principais:

HTTP: Transmite dados em texto plano, operendo geralmente na porta 80.
HTTPS: Adiciona uma camada de criptografia TLS/SSL, operando na porta 443.

Nota: Arquivos abertos localmente no navegador utilizam o protocolo file://, enquanto aplicações de comunicação em tempo real frequentemente utilizam ws:// ou wss:// (WebSockets).

Características Fundamentais

Modelo Requisição-Resposta: O cliente sempre inicia a comunicação; o servidor apenas reage.
Baseado em TCP/IP: Opera na camada de aplicação, dependendo do TCP para transporte confiável.
Stateless (Sem Estado): O servider não retém informações sobre requisições anteriores do mesmo cliente por padrão.
Conexões Curtas: A conexão TCP é tipicamente encerrada após a troca de dados (embora o keep-alive mitigue isso).

Estrutura da Requisição HTTP

Uma requisição é composta por:

Linha Inicial: Método, caminho do recurso e versão do protocolo.
Cabeçalhos: Pares chave-valor com metadados.
Linha em Branco: Separador obrigatório (\r\n).
Corpo (Opcional): Dados enviados (comum em POST/PUT).

Método	Descrição	Possui Corpo
GET	Solicita a leitura de um recurso.	Não
POST	Envia dados para criar um novo recurso.	Sim
PUT	Substitui completamnete um recurso existente.	Sim
PATCH	Aplica modificações parciais a um recurso.	Sim
DELETE	Remove um recurso.	Não

Cabeçalhos de Requisição Comuns: Host (domínio alvo), Content-Type (formato do corpo), User-Agent (identificação do cliente), Authorization (credenciais), Accept (formatos aceitos na resposta).

Estrutura da Resposta HTTP

A resposta do servidor segue um formato similar:

Linha de Status: Versão do protocolo, código de status e mensagem textual.
Cabeçalhos: Metadados sobre a resposta.
Linha em Branco.
Corpo: O recurso solicitado (HTML, JSON, imagem, etc.).

Cabeçalhos de Resposta Comuns: Content-Type, Content-Length, Server, Location (para redirecionamentos), Set-Cookie (para gerenciamento de estado).

Códigos de Status

Categoria	Significado
1xx	Informativo (processamento contínuo).
2xx	Sucesso (requisição recebida e compreendida).
3xx	Redirecionamento (ação adicional necessária).
4xx	Erro do Cliente (requisição inválida ou não autorizada).
5xx	Erro do Servidor (falha ao processar uma requisição válida).

Exemplos Notáveis: 200 (OK), 201 (Created), 301 (Moved Permanently), 304 (Not Modified), 400 (Bad Request), 401 (Unauthorized), 403 (Forbidden), 404 (Not Found), 500 (Internal Server Error), 502 (Bad Gateway).

Implementando um Servidor HTTP com Python

Para que um navegador exiba corretamente os dados, o servidor TCP deve formatar a resposta seguindo o padrão HTTP:

import socket

def executar_servidor_web():
    servidor = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
    servidor.bind(('127.0.0.1', 8080))
    servidor.listen(5)
    print("Aguardando conexões na porta 8080...")

    while True:
        conexao, endereco_cliente = servidor.accept()
        dados_recebidos = conexao.recv(1024).decode('utf-8')
        print(f"Requisição recebida de {endereco_cliente}")
        
        # Construção da resposta HTTP
        conteudo_html = "<h1>Servidor Python Funcionando!</h1>"
        resposta = (
            "HTTP/1.1 200 OK\r\n"
            "Content-Type: text/html; charset=UTF-8\r\n"
            f"Content-Length: {len(conteudo_html)}\r\n"
            "Connection: close\r\n"
            "\r\n"
            f"{conteudo_html}"
        )
        
        conexao.sendall(resposta.encode('utf-8'))
        conexao.close()

if __name__ == "__main__":
    executar_servidor_web()

Exemplos de Requisições Raw

Requisição GET

GET /api/users HTTP/1.1
Host: jsonplaceholder.typicode.com
User-Agent: CustomClient/1.0
Accept: application/json

Requisição POST

POST /api/posts HTTP/1.1
Host: jsonplaceholder.typicode.com
Content-Type: application/json
Content-Length: 52

{"title": "Novo Post", "body": "Conteudo", "userId": 1}

Tags: HTML HTTP Protocolo de Rede Requisição-Resposta Socket Python

Publicado em 6-5 23:19 por Thomas

Doido Dev