Para compreender como a web funciona, é essencial entender a relação entre o servidor e o cliente (navegador). O protocolo HTTP é a base dessa comunicação. Abaixo, apresentamos um exemplo de um servidor simples construído em Python utilizando sockets para servir arquivos HTML manualmente.

import socket

def rodar_servidor():
    # Criação do socket TCP/IP
    servidor = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
    servidor.bind(('127.0.0.1', 9000))
    servidor.listen(10)
    
    print("Servidor aguardando conexões na porta 9000...")

    while True:
        conexao, cliente_endereco = servidor.accept()
        solicitacao = conexao.recv(4096)
        
        # Resposta padrão HTTP
        conexao.send(b'HTTP/1.1 200 OK\r\n\r\n')
        
        try:
            with open("index.html", "rb") as arquivo:
                dados_html = arquivo.read()
                conexao.send(dados_html)
        except FileNotFoundError:
            conexao.send(b"<h1>Erro: Arquivo index.html nao encontrado.</h1>")
            
        conexao.close()

if __name__ == "__main__":
    rodar_servidor()

Estrutura Fundamental do HTML

O HTML (HyperText Markup Language) é uma linguagem de marcação que utiliza tags para estruturar o conteúdo de uma página web. Uma página básica divide-se em duas seções principais dentro da tag <html>:

• Head: Contém metadados, títulos, links para CSS e scripts JS que não são visíveis diretamente na área de conteúdo.
• Body: Engloba todo o conteúdo visual que será renderizado para o usuário.

Metadados e Configurações de Cabeçalho

As tags <meta> definem informações sobre o documento:

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

<!-- Redirecionamento automático após 5 segundos -->
<meta http-equiv="refresh" content="5;URL=https://www.exemplo.com">

<!-- SEO: Palavras-chave e descrição -->
<meta name="keywords" content="HTML, Web, Programação">
<meta name="description" content="Guia técnico sobre tags HTML">

Categorização de Elementos HTML

Os elementos no HTML são geralmente classificados em dois tipos baseados em seu comportamento de exibição:

1. Elementos de Bloco (Block-level)

Ocupam toda a largura disponível e sempre começam em uma nova linha.

• <h1> a <h6>: Cabeçalhos hierárquicos.
• <p>: Parágrafos de texto.
• <div>: Divisor de seção genérico.
• <hr>: Linha horizontal temática.
• <ul>, <ol>, <li>: Estruturas de listas.

2. Elementos Enline (Inline-level)

Ocupam apenas a largura necessária e não forçam uma nova linha.

• <a>: Links e âncoras.
• <span>: Conteúdo genérico em linha.
• <img>: Incorporação de imagens.
• <b>, <i>, <u>: Estilização básica de texto (negrito, itálico, sublinhado).

Trabalhando com Mídia e Links

Imagens

A tag <img> requer o atributo src para o caminho da imagem e alt para texto alternativo (acessibilidade).

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

Hiperlinks e Âncoras

O atributo href define o destino do link. O atributo target="_blank" abre o link em uma nova aba.

<a href="https://www.google.com" target="_blank">Visitar Google</a>

<!-- Âncora interna -->
<a href="#secao-contato">Ir para Contato</a>
...
<div id="secao-contato">Informações de Contato</div>

Listas e Tabelas

Tipos de Listas

<!-- Lista Não Ordenada -->
<ul>
    <li>Item A</li>
    <li>Item B</li>
</ul>

<!-- Lista Ordenada -->
<ol type="1" start="5">
    <li>Primeiro item da sequência</li>
    <li>Segundo item da sequência</li>
</ol>

Estrutura de Tabelas

<table border="1">
    <thead>
        <tr>
            <th>Produto</th>
            <th>Preço</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Monitor</td>
            <td>R$ 800</td>
        </tr>
    </tbody>
</table>

Formulários e Entrada de Dados

A tag <form> é o container para coleta de dados. O atributo action define para onde enviar os dados e method define o método HTTP (GET ou POST).

Elementos de Input

<form action="/processar" method="POST">
    <!-- Texto e Senha -->
    <label for="user">Usuário:</label>
    <input type="text" id="user" name="usuario" placeholder="Digite seu nome">
    
    <input type="password" name="senha">

    <!-- Seleção Única (Radio) -->
    <input type="radio" name="genero" value="m"> Masculino
    <input type="radio" name="genero" value="f"> Feminino

    <!-- Seleção Múltipla (Checkbox) -->
    <input type="checkbox" name="termos" value="aceito"> Aceito os termos

    <!-- Botões -->
    <input type="submit" value="Enviar">
    <input type="reset" value="Limpar">
</form>

Seleção e Áreas de Texto

<!-- Menu Dropdown -->
<select name="estado">
    <option value="sp">São Paulo</option>
    <option value="rj" selected>Rio de Janeiro</option>
</select>

<!-- Área de texto multilinha -->
<textarea name="comentario" rows="5" cols="40"></textarea>

Regras de Aninhamento

1. Evite colocar elementos de bloco (como <div>) dentro de elementos inline (como <span>).
2. A tag de parágrafo <p> não deve conter outros elementos de bloco ou outros parágrafos.
3. Para que os dados de um formulário sejam enviados corretamente, os campos de entrada devem possuir o atributo name, que servirá como chave para o valor enviado ao servidor.