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

Head & Body

PreviousSeu primeiro template!NextCustomize seu template

Last updated 6 years ago

Was this helpful?

Cada página HTML também é dividida em dois elementos: head (cabeça) e body (corpo).

  • head é um elemento que contém informações sobre o documento que não são mostradas na tela.

  • body é um elemento que contém tudo o que é exibido como parte de uma página de um site.

Nós usamos a tag <head> para dizer ao navegador sobre as configurações da página. Por sua vez, a tag <body> diz ao navegador o que há de verdade na página.

Por exemplo, você pode por o elemento título de uma página web dentro da tag <head>. Veja:

blog/templates/blog/post_list.html

<html>
    <head>
        <title>Blog do AfroPython</title>
    </head>
    <body>
        <p>Oi</p>
        <p>Tudo funcionando por aqui :)</p>
    </body>
</html>

Salve o arquivo e atualize sua página.

Viu como o navegador entendeu que "Blog do AfroPython" é o título da página? Ele interpretou <title>Blog do AfroPython</title> e colocou o texto na barra de título do seu navegador (e também será usado para os favoritos e outras coisas mais).

Provavelmente você já deve ter notado que cada tag de abertura casa com uma tag de fechamento, com uma /, e que os elementos estão aninhados (ex.: você não pode fechar uma tag em particular antes que todas as outras tags que estiverem dentro dela já estejam fechadas).

É como colocar coisas dentro de caixas. Você tem uma grande caixa, <html></html>; dentro dela há <body></body>, sendo que esta ainda contém caixas menors: <p></p>.

Você precisa seguir essas regras de fechamento de tags, e de aninhamento de elementos - se você não fizer isso, o navegador poderá não estar apto para interpretar seu código de maneira correta e sua página será exibida de maneira incorreta.

Passo 3