Retornando páginas HTML em requisições Flask | Blog da TreinaWeb                               [   ![TreinaWeb Cursos](https://www.treinaweb.com.br/assets/images/treinaweb-logo@2x.png)     ](https://www.treinaweb.com.br "TreinaWeb Cursos")       

  [ Cursos      ](https://www.treinaweb.com.br/cursos) [ Cursos      ](javascript:) [    Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) 

 [    Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) 

 [    Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) 

 [    Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) 

 [    Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) 

 [    Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) 

 [    IA ](https://www.treinaweb.com.br/categoria/ia) 

 [    E mais ](https://www.treinaweb.com.br/categoria/e-mais) 

 [    Infra ](https://www.treinaweb.com.br/categoria/infra) 

 [ Ver todos    ](https://www.treinaweb.com.br/cursos) 

 [Todos os cursos](https://www.treinaweb.com.br/cursos) [Formações](https://www.treinaweb.com.br/formacoes) [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) [Direto ao ponto](https://www.treinaweb.com.br/direto-ao-ponto) [Quanto custa?](https://www.treinaweb.com.br/planos) [Vantagens](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) [Artigos](https://www.treinaweb.com.br/blog)            [Login](https://www.treinaweb.com.br/login)  [ Matricule-se ](https://www.treinaweb.com.br/checkout/pagamento/plano/anual) 

  O que você quer aprender?   Tudo Cursos Formações Direto ao ponto  Artigos      

        Sugestões:- [ CSS ](https://www.treinaweb.com.br/blog/posts?q=css)
- [ Oracle ](https://www.treinaweb.com.br/blog/posts?q=oracle)
- [ Rails ](https://www.treinaweb.com.br/blog/posts?q=rails)
- [ Python ](https://www.treinaweb.com.br/blog/posts?q=python)
- [ Mobile ](https://www.treinaweb.com.br/blog/posts?q=mobile)
- [ Lógica ](https://www.treinaweb.com.br/blog/posts?q=logica)
- [ Angular ](https://www.treinaweb.com.br/blog/posts?q=angular)
- [ Flutter ](https://www.treinaweb.com.br/blog/posts?q=flutter)
- [ React ](https://www.treinaweb.com.br/blog/posts?q=react)
- [ Laravel ](https://www.treinaweb.com.br/blog/posts?q=laravel)
- [ Banco de Dados ](https://www.treinaweb.com.br/blog/posts?q=banco-de-dados)
- [ Django ](https://www.treinaweb.com.br/blog/posts?q=django)
- [ Flask ](https://www.treinaweb.com.br/blog/posts?q=flask)
- [ AWS ](https://www.treinaweb.com.br/blog/posts?q=aws)
- [ HTML5 ](https://www.treinaweb.com.br/blog/posts?q=html5)
- [ Ruby ](https://www.treinaweb.com.br/blog/posts?q=ruby)

  [ Python ](https://www.treinaweb.com.br/blog/categoria/python)   [ Flask ](https://www.treinaweb.com.br/blog/categoria/flask) #  Retornando páginas HTML em requisições Flask 

 Agora que já sabemos criar nossa primeira aplicação com Flask, veremos neste artigo como retornar arquivos HTML nos métodos do nosso projeto.

  [](https://www.treinaweb.com.br/blog/autor/fagner-pinheiro "Fagner Pinheiro")   7 anos atrás

 Receba nossos conteúdos    Enviar  

### Você sabia que a TreinaWeb é a **mais completa
 escola para desenvolvedores**  do mercado? 

O que você encontrará aqui na TreinaWeb?

 ![Mentoria de carreira](https://www.treinaweb.com.br/assets/images/mentoria-verde-icone.svg) **Mentoria** 
 de carreira

 ![Suporte com professores](https://www.treinaweb.com.br/assets/images/suporte-verde-icone.svg)  **Suporte 
 direto**  com 
 os professores

 ![Plano de estudo](https://www.treinaweb.com.br/assets/images/plano-verde-icone.svg)  **Plano de 
 estudos**  simples 
 e direto

 ![Projetos voltados ao mercado de trabalho](https://www.treinaweb.com.br/assets/images/mercado-verde-icone.svg) Projetos voltados 
 ao  **mercado de 
 trabalho**

 [ Matricule-se agora mesmo ](https://www.treinaweb.com.br/checkout/pagamento/plano/anual) 

  1. [Artigos](https://www.treinaweb.com.br/blog)
2. Retornando páginas HTML em requisições Flask

  Sabemos que a principal forma que os usuários possuem para interagir com nossas aplicações web, são utilizando páginas HTML. No Flask, isso não é diferente.

Vimos no [artigo anterior](https://www.treinaweb.com.br/blog/criando-primeira-app-com-flask/ "artigo anterior") como criar nossa primeira app, porém estávamos retornando uma string como resposta de uma requisição. Sendo assim, neste artigo veremos como retornar páginas HTML através dos métodos da nossa aplicação Flask.

 [ ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/10/E-BOOK-GRATUITO-HTML.jpg) ](https://www.treinaweb.com.br/ebook/guia-HTML/)

## Respondendo requisições com HTML

O primeiro passo para retornar uma página HTML como resposta de uma requisição no Flask, é criar o diretório que armazenará estes arquivos. Para isso, criamos um diretório chamado “templates” dentro do projeto. É lá que serão armazenados os arquivos HTML do projeto:

![](https://dkrn4sk0rn31v.cloudfront.net/2019/10/15112020/Screen-Shot-2019-10-15-at-11.02.38.png)![](https://dkrn4sk0rn31v.cloudfront.net/2019/10/15112030/Screen-Shot-2019-10-15-at-11.03.00.png)Agora, dentro do diretório “templates”, podemos criar os arquivos HTML do nosso projeto:

![](https://dkrn4sk0rn31v.cloudfront.net/2019/10/15112141/Screen-Shot-2019-10-15-at-11.21.28.png)

Por fim, para retornar a página `index.html`nos métodos do nosso projeto Flask, utilizamos o método `render_template()`, como podemos ver abaixo:

```python

from flask import Flask, render_template

app = Flask(__name__)

@app.route("/teste")
def index():
  return render_template('index.html')

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

```

 ![Nest.js -  Autenticação e Autorização]() 

##### Curso Nest.js - Autenticação e Autorização

 [ Conhecer o curso ](https://www.treinaweb.com.br/curso/nestjs-autenticacao-e-autorizacao) 

Com isso, ao acessar a rota `127.0.0.1:5000/teste`, teremos o seguinte retorno:

![](https://dkrn4sk0rn31v.cloudfront.net/2019/10/15112151/Screen-Shot-2019-10-15-at-11.09.22.png)

Vale lembrar que, por padrão, o Flask irá procurar o arquivo `index.html`no diretório `templates` do projeto. Caso você queira criá-lo em um diretório com outro nome, você deve passá-lo como parâmetro do construtor do Flask:

```python
from flask import Flask, render_template

app = Flask(__name__, template_folder='templates_folder')

@app.route("/teste")
def index():
  return render_template('index.html')

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

```

Isso fará com que todos os templates sejam buscados no diretório `templates_folder`do seu projeto (ou qualquer nome que você preferir).

## Concluindo…

Como dito acima, as páginas HTML são os principais meios de interação entre um usuário e uma aplicação web. Saber como retorná-las é de extrema importância para qualquer desenvolvedor.

Além disso, o Jinja2 possui diversos recursos para trabalhar com este tipo de arquivo, e é exatamente isso que veremos no próximo artigo desta trilha :)

 [ ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/06/BANNER-AULA-GRATUITA-1700x850-1.jpg) ](https://www.treinaweb.com.br/lp/aula-gratis/)

- [ #Python ](https://www.treinaweb.com.br/blog/tag/python)
- [ #Flask ](https://www.treinaweb.com.br/blog/tag/flask)
- [ #Primeira App Flask ](https://www.treinaweb.com.br/blog/tag/primeira-app-flask)

#### Autor(a) do artigo

  ![Fagner Pinheiro]()  

##### Fagner Pinheiro

 Professor na TreinaWeb e graduado em Sistemas de Informação pelo Instituto Federal da Bahia. Apaixonado por desenvolvimento web, desktop e mobile desde os 12 anos de idade. Já utilizou todos os sistemas operacionais possíveis, mas hoje se contenta com o OSX instalado em seu desktop. Quando não está trabalhando, é IGL e Awper do time de CS:GO da Treinaweb. Até passou em uma peneira do Cruzeiro, mas preferiu estudar Python.

 [ Todos os artigos ](https://www.treinaweb.com.br/blog/autor/fagner-pinheiro) 

#### Artigos **relacionados** [ Ver todos ](https://www.treinaweb.com.br/blog/posts)

- [](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end "Desenvolvimento Back-end")  ![Desenvolvimento Back-end]()#####  [ Guia do framework NestJS ](https://www.treinaweb.com.br/blog/guia-do-framework-nestjs) 

     Neste guia do framework NestJS vamos fazer um compilado de tópicos úteis sobre o framework, desde cr...
- [](https://www.treinaweb.com.br/blog/categoria/desenvolvimento "Desenvolvimento")  ![Desenvolvimento]()#####  [ O que são aplicações SPA? ](https://www.treinaweb.com.br/blog/o-que-sao-aplicacoes-spa) 

     Neste artigo, vamos abordar o que são as aplicações baseadas em tecnologias SPA e o porquê de estas...
- [](https://www.treinaweb.com.br/blog/categoria/desenvolvimento "Desenvolvimento")  ![Desenvolvimento]()#####  [ O que é HATEOAS? ](https://www.treinaweb.com.br/blog/o-que-e-hateoas) 

     HATEOAS é um componente que faz parte da arquitetura REST, cujo objetivo é ajudar os clientes a cons...
- [](https://www.treinaweb.com.br/blog/categoria/ferramentas "Ferramentas")  ![Ferramentas]()#####  [ Tw Dev Server - como ele pode te ajudar a estudar programação? ](https://www.treinaweb.com.br/blog/tw-dev-server-como-ele-pode-te-ajudar-a-estudar-programacao) 

     Aprenda a utilizar o Tw Dev Server como servidor de arquivos estáticos e como simulador de back end...
- [](https://www.treinaweb.com.br/blog/categoria/python "Python")  ![Python]()#####  [ Utilizando o Redis como Cache em um projeto Django ](https://www.treinaweb.com.br/blog/utilizando-o-redis-como-cache-em-um-projeto-django) 

     Neste artigo veremos como utilizar o Redis como Cache de aplicações Django.
- [](https://www.treinaweb.com.br/blog/categoria/javascript "Javascript")  ![Javascript]()#####  [ O que há de novo no React 16? ](https://www.treinaweb.com.br/blog/o-que-ha-de-novo-no-react-16) 

     O React, agora em sua versão 16, foi totalmente reescrito. Veja as melhorias e o que há de novo.
- [](https://www.treinaweb.com.br/blog/categoria/machine-learning "Machine Learning")  ![Machine Learning]()#####  [ Desenvolva uma Inteligência Artificial que reconhece cores diretamente no navegador com TensorFlow.js ](https://www.treinaweb.com.br/blog/desenvolva-uma-inteligencia-artificial-que-reconhece-cores-diretamente-no-navegador-com-tensorflow-js) 

     Aprenda a trabalhar com Machine Learning diretamente no navegador usando o TensorFlow.js
- [](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end "Desenvolvimento Back-end")  ![Desenvolvimento Back-end]()#####  [ Entendendo o MTV do Django ](https://www.treinaweb.com.br/blog/entendendo-o-mtv-do-django) 

     Veja neste artigo como funciona o padrão de projeto utilizando em projetos Django, o MTV.
- [](https://www.treinaweb.com.br/blog/categoria/node-js "Node")  ![Node]()#####  [ Utilizando template engine EJS com Node.js ](https://www.treinaweb.com.br/blog/utilizando-template-engine-ejs-com-node-js) 

     Neste artigo vamos aprender a utilizar a Template Engine EJS com Node.js e também alguns recursos in...
- [](https://www.treinaweb.com.br/blog/categoria/csharp "C#")  ![C#]()#####  [ .NET Core 3.0 - Razor Components ](https://www.treinaweb.com.br/blog/net-core-3-0-razor-components) 

     Conheça as aplicações Razor Components que serão adicionadas no .NET Core 3.0.
- [](https://www.treinaweb.com.br/blog/categoria/csharp "C#")  ![C#]()#####  [ Implementando o protocolo tus em uma aplicação ASP.NET Core ](https://www.treinaweb.com.br/blog/implementando-o-protocolo-tus-em-uma-aplicacao-asp-net-core) 

     Realizar o upload de grandes arquivos pode ser uma dor de cabeça, mas o protocolo tus foi criado par...
- [](https://www.treinaweb.com.br/blog/categoria/react "React")  ![React]()#####  [ Ciclo de vida de componentes funcionais no React ](https://www.treinaweb.com.br/blog/ciclo-de-vida-de-componentes-funcionais-no-react) 

     Como funciona o ciclo de vida de componentes funcionais no React para manipular a inicialização, atu...

###### ![TreinaWeb](https://www.treinaweb.com.br/assets/images/treinaweb-logo@2x.png)
 Escola online para desenvolvedores 

- [    ](https://github.com/treinaweb)
- [    ](https://www.facebook.com/TreinaWeb/)
- [    ](https://www.instagram.com/treinaweb/)
- [    ](https://twitter.com/treinaweb)
- [    ](https://www.youtube.com/user/TreinaWeb)
- [    ](https://www.linkedin.com/company/treinaweb)

###### Inscreva-se e receba nossos lançamentos, promoções e novidades

  Nome:    E-mail:    Inscreva-se  

  fechar    ### Qual o número do seu WhatsApp?

### Quais são as suas áreas de interesse?

       Base para Devs         Front-end   

       Back-end         Mobile   

       Bancos de Dados         Cloud   

       IA         E mais   

  Enviar  

   Cursos       [    Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) [    Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) [    Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) [    Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) 

 [    Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) [    Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) [    IA ](https://www.treinaweb.com.br/categoria/ia) [    E mais ](https://www.treinaweb.com.br/categoria/e-mais) 

 [    Infra ](https://www.treinaweb.com.br/categoria/infra) 

  A empresa       [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) [ O que os alunos dizem? ](https://www.treinaweb.com.br/depoimentos) [ Política de Privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) [Termos de uso](https://www.treinaweb.com.br/termos-de-uso) [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) 

 [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) [Cursos para empresas](https://www.treinaweb.com.br/empresas) [Artigos](https://www.treinaweb.com.br/blog) [Contato](https://www.treinaweb.com.br/contato) 

 [Contato](https://www.treinaweb.com.br/contato) [Artigos](https://www.treinaweb.com.br/blog) Baixe nosso aplicativo - [](https://apps.apple.com/us/app/treinaweb/id1322729447)
- [](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile)

###### Aceitamos as principais formas de pagamento

- 
- 
- 
- 
- 
- 
- 
- 

###### Seus dados e compra estão 100% seguros

 [](javascript:) [](https://transparencyreport.google.com/safe-browsing/search?url=www.treinaweb.com.br) 

     Av. Paulista, 1765, Conj 71 e 72 - Bela Vista - São Paulo - SP - 01311-200 © 2004 - 2026 TreinaWeb Tecnologia LTDA - CNPJ: 06.156.637/0001-58
