Retornando páginas HTML em requisições Flask \| TreinaWeb               Promoção no ar   Matricule-se agora e garanta **54% de desconto**  

  Termina em   Tempo restante da oferta: 13 Horas 

 08 Min 

 38 Seg 

   Tempo restante da oferta: 13 08 38 

  [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) 

   [                ](https://www.treinaweb.com.br)  Explorar  

 [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) 

     [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) Retornando páginas HTML em requisições Flask  [ 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.

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

  ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/10/15161010/app-flask-html5.png)  

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()

```

[  ![Ruby on Rails Intermediário](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/ruby-on-rails.svg)   Curso Ruby on Rails Intermediário Conhecer o curso ](https://www.treinaweb.com.br/curso/ruby-on-rails-intermediario)

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

 ![Fagner Pinheiro](//secure.gravatar.com/avatar/e622f7c7d686a0b11f8d977ce9725b67?d=mm)

## 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)  

## Continue estudando

 Transforme leitura em prática com os cursos e formações da TreinaWeb.

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

  Continue lendo

## Artigos relacionados

- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/05/NEST-JS-UPLOAD-ARQUIVOS-400x280.png)  [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 

     3 anos atrás

    ##  [ 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 criar um projeto básico até autenticação.

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/08/28112233/capa-SPA-400x280.png)  [ Desenvolvimento ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento) 

     7 anos atrás

    ##  [ 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 fazerem tanto sucesso nos dias atuais.

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/06/o-que-e-hateoas-400x280.png)  [ Desenvolvimento ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento) 

     6 anos atrás

    ##  [ 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 consumirem uma API sem a necessidade de conhecimento prévio.

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/06/tw-dev-server-400x280.png)  [ Ferramentas ](https://www.treinaweb.com.br/blog/categoria/ferramentas) 

     7 anos atrás

    ##  [ 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 com API e banco de dados para facilitar seus estudos.

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/05/16092331/DJANGO-REDIS-400x280.png)  [ Python ](https://www.treinaweb.com.br/blog/categoria/python) 

     8 anos atrás

    ##  [ 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.

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2017/11/06145813/react-16-400x280.jpg)  [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 

     9 anos atrás

    ##  [ 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.

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/01/03075049/Inteligência-Artificial-Selecionando-Cores-400x280.png)  [ Machine Learning ](https://www.treinaweb.com.br/blog/categoria/machine-learning) 

     7 anos atrás

    ##  [ 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

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/03/18113452/MTV-DJANGO-400x280.png)  [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 

     7 anos atrás

    ##  [ 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.

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/08/EJS-400x280.png)  [ Node ](https://www.treinaweb.com.br/blog/categoria/node-js) 

     5 anos atrás

    ##  [ 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 interessantes desta ferramenta.

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/02/18175820/RAZOR-COMPONENTS-400x280.png)  [ C# ](https://www.treinaweb.com.br/blog/categoria/csharp) 

     8 anos atrás

    ##  [ .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.

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/03/29132239/PROTOCOLO-TUS-400x280.png)  [ C# ](https://www.treinaweb.com.br/blog/categoria/csharp) 

     8 anos atrás

    ##  [ 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 para facilitar este processo.

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/01/CICLO-VIDA-REACT-400x280.jpg)  [ React ](https://www.treinaweb.com.br/blog/categoria/react) 

     4 anos atrás

    ##  [ 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, atualização e limpeza de um componente React

     Ler artigo

## Um ano de acesso total para você viver de programação.

 Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho.

- **1 ano** de acesso a **todos os cursos**
- Cursos novos **toda semana**
- Suporte **direto com professores**
- Plano de carreira **personalizado**
- **Certificados digitais** inclusos
- **Aplicativos** para Android e iOS, com **acesso offline**

    **Garantia incondicional de satisfação** 

 Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro.

### Acesso completo a todos os cursos e dezenas de Formações.

 12 meses 

  Economize R$ 840,00  54% OFF 

 de 12x R$ 129,00 por apenas

 12x  R$ 59,00

 sem juros no cartão de crédito ou R$ 599,00 à vista

  Oferta termina em  **13h 08min 38s**

- Acesso imediato e ilimitado durante 1 ano.
- Plano de carreira personalizado.
- Suporte direto com professores.
- E muito mais!

 [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26)

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

 Escola online de programação, tecnologia e IA.

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

## Inscreva-se em nossa newsletter

Receba lançamentos, promoções e novidades.

   Seu nome     Seu WhatsApp     Seu melhor e-mail   Inscrever-se 

## 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)
- [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos)

## Conteúdo

- [ 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)
- [ Planos ](https://www.treinaweb.com.br#assinatura)
- [ Depoimentos ](https://www.treinaweb.com.br#depoimentos)
- [ Comunidade ](https://www.treinaweb.com.br#comunidade)
- [ Corpo docente ](https://www.treinaweb.com.br#docente)

## A empresa

- [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre)
- [ Perguntas frequentes ](https://www.treinaweb.com.br#faq)
- [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb)
- [ Cursos para empresas ](https://www.treinaweb.com.br/empresas)
- [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso)
- [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco)
- [ Artigos ](https://www.treinaweb.com.br/blog)
- [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers)
- [ Contato ](https://www.treinaweb.com.br/contato)
- [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade)
- [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso)

## Baixe nosso aplicativo

 [   Disponível na **App Store**  ](https://apps.apple.com/us/app/treinaweb/id1322729447) [   Disponível no **Google Play**  ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) 

  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
