[Dúvida] como junta o codigo html com o python? | Python: crie a sua primeira aplicação

Oii, tudo bem?

Boa pergunta, Marden! Vamos lá entender como o Python pode se “juntar” ao HTML.

1. O que são HTML e Python no contexto web:

HTML: é usado pra estruturar páginas na internet (títulos, botões, parágrafos etc.).
Python: é uma linguagem de programação que pode rodar “por trás das cortinas”, cuidando da lógica da sua aplicação (cálculos, acesso a banco de dados, regras de negócio etc.).

O HTML sozinho não “conversa” diretamente com o Python. Pra juntar os dois, precisamos de uma ponte, que normalmente é um framework web.

2. Como o Python se conecta ao HTML

Existem alguns caminhos principais:

Gerando HTML com Python
Você escreve código Python que cria páginas HTML. Um exemplo é usar o módulo http.server (mais simples, mas pouco usado em projetos grandes).
Frameworks Web (o mais comum e recomendado):
- Flask: ótimo para começar, simples e direto.
- Django: mais completo, usado em projetos grandes.

Esses frameworks permitem que você crie rotas (endereços, como /home) que devolvem páginas HTML. Dentro do HTML, você pode até misturar variáveis vindas do Python.

3. Exemplo prático com Flask:

Imagina que você quer mostrar uma lista de nomes feita em Python dentro de uma página HTML:

Arquivo app.py

from flask import Flask, render_template

app = Flask(__name__)

@app.route("/")
def home():
    nomes = ["Ana", "Bruno", "Carlos"]
    return render_template("index.html", lista=nomes)

if __name__ == "__main__":
    app.run(debug=True)

Arquivo templates/index.html

<!DOCTYPE html>
<html>
<head>
    <title>Minha Página</title>
</head>
<body>
    <h1>Lista de nomes:</h1>
    <ul>
        {% for nome in lista %}
            <li>{{ nome }}</li>
        {% endfor %}
    </ul>
</body>
</html>

O Python (app.py) cria a lista e envia para o HTML.
O HTML (index.html) recebe essa lista e mostra na tela.

4. Resumindo:

O HTML mostra o que o usuário vê.
O Python faz a lógica por trás.
Frameworks como Flask ou Django são usados como ponte entre eles.

Esse é um exemplo simples pra você ter uma ideia de como acontece, vou deixar a documentação abaixo pra você dar uma olhadinha.

Bons estudos!

Conteúdos relacionados

Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!