Tutorial do AfroPython
  • Sobre
  • Introdução
  • Codenvy
    • O que é o Codenvy
    • Crie uma conta
    • Complete o cadastro
    • Dashboard
  • Como funciona a internet?
  • Introdução a linha de comando
    • O que é a linha de comando?
    • Conhecendo a linha de comando
    • Seu primeiro comando (YAY!)
    • O básico
      • Pasta atual
      • Criando uma pasta
      • Listando arquivos e pastas
      • Entrando nas pastas
      • Exercite-se!
      • Limpando
      • Resumo
  • Editor de Código
    • Porque precisamos de um editor de código?
  • Introdução ao Python
    • Strings
    • Erros
    • Variáveis
    • A função print
    • Listas
    • Dicionários
    • Resumo até agora
    • Fazendo comparações
    • Booleanos
    • Salve o código!
      • if...elif...else
      • E se não?
      • Resumo
    • Suas próprias funções
    • Laços de repetição
    • Resumo
  • Django, o que é?
    • Por que você precisa de um framework?
    • O que acontece quando alguém solicita um site do seu servidor?
  • Seu primeiro projeto Django
    • Configurando
    • Instalando o banco de dados
  • Modelos do Django
    • Objetos
    • Modelo do Django
      • Criando uma aplicação
      • Criando um modelo
      • Criando tabelas
  • Administração
  • URLs
    • O que é uma URL?
    • Como funcionam as URLs no Django?
    • Sua primeira URL Django
    • blog.urls
  • Views
    • blog/views.py
  • Introdução a HTML
    • Seu primeiro template!
    • Head & Body
    • Customize seu template
  • QuerySet e ORM do Django
    • O que é um QuerySet?
    • O shell do Django
      • Todos os objetos
      • Criando um objeto
      • Adicionando objetos
      • Filtrar objetos
      • Ordenando objetos
  • Dados dinâmicos no template
    • QuerySet
  • Templates
    • O que são tags de template
    • Modelo de lista de post de exibição
  • CSS - Deixe mais bonito!
    • Vamos usar o Bootstrap!
    • Arquivos estáticos no Django
    • Seu primeiro arquivo CSS!
  • Estendendo templates
  • Amplie sua aplicação
  • Formulários
  • URLs e Views
  • Template
  • Salvando o formulário
  • Validação de formulários
  • Editando o formulário
  • Segurança
  • O que vem depois!
Powered by GitBook
On this page

Was this helpful?

  1. Introdução a HTML

Seu primeiro template!

PreviousIntrodução a HTMLNextHead & Body

Last updated 6 years ago

Was this helpful?

Criar um template significa criar um arquivo de template. Tudo é um arquivo, certo? Provavelmente você já deve ter notado isso.

Os templates são salvos no diretório blog/templates/blog. Então, crie um diretório chamado templates dentro do diretório do seu blog. Em seguida, crie outro diretório chamado blog dentro da diretório templates:

blog
└───templates
    └───blog

(Você deve estar se perguntando porque nós precisamos de dois diretórios chamados blog - como você descobrirá mais para frente, essa é uma simples e útil convenção que facilita a vida quando as coisas começarem a ficar mais complicadas.)

E agora crie o arquivo post_list.html (deixe-o em branco por agora) dentro do diretório blog/templates/blog.

Veja como o nosso site está se parecendo agora:

Se ocorrer um erro de TemplateDoesNotExists tente reiniciar o seu servidor. Abra a Command Pallete pelo ícone no menu lateral, procure por Restart Server e aperte Enter.

Acabaram-se os erros! Parabéns :) Entretanto, nosso site não mostra nada a não ser uma página em branco. Isso porque o nosso template está vazio. Então precisamos consertar isso. Adicione a seguinte linha dentro do template:

blog/templates/blog/post_list.html

<html>
    <p>Oi</p>
    <p>Tudo funcionando por aqui :)</p>
</html>

Como nosso site se parece agora? Entre no site para descobrir.

Funcionou! Bom trabalho :)

  • A tag mais básica, <html>, estará sempre no começo de qualquer página da web, assim como, </html> sempre estará no fim. Como você pode ver, todo o conteúdo de um website se encontra entre a tag de início <html> e entre a tag de fim </html>

  • <p> é a tag que denomina parágrafos; </p> determina o fim de cada parágrafo

Passo 1
Passo 2