Introdução ao HTML
Você pode se perguntar: o que é um template?
Template é um arquivo que nós podemos reutilizar para apresentar diferentes informações em um formato consistente – por exemplo, você pode usar um template para te ajudar a escrever uma carta, pois mesmo que cada carta contenha mensagens diferentes e possa estar endereçada a pessoas diferentes, elas compartilharão o mesmo formato.
O formato do template do Django é descrito em uma linguagem chamada HTML (esse é o mesm HTML que mencionamos no primeiro capítulo -- Como a Internet funciona).
O que é HTML?
HTML é um código interpretado pelo seu navegador - como Chrome, Firefox ou Safari - para exibir uma página web ao usuário.
HTML significa "HyperText Markup Language". HiperText significa que é um tipo de texto que suporta hiperlinks entre páginas. Marcação nada mais é que marcar um documento com códigos que dizem para alguém (nesse caso, o navegador web) como a página deverá ser interpretada. Códigos em HTML são feitos com tags, cada uma começando com <
e terminando com >
. Estas tags representam elementos de marcação.
Seu primeiro template!
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
. Então, crie um diretório chamado templates
dentro do diretório do seu blog. Em seguida, crie outro diretório chamado blog
dentro do diretório templates:
(Você deve estar se perguntando porque nós precisamos de dois diretórios chamados blog
- como você descobrirá mais para frente, essa é uma convenção que facilita a nossa vida quando as coisas começam a ficar mais complicadas.)
E agora nós criamos o arquivo post_list.html
(deixe-o em branco por enquanto) dentro do diretório blog/templates/blog
.
Veja como o nosso site está agora: http://127.0.0.1:8000/
Se você ainda tem um erro
TemplateDoesNotExist
, tente reiniciar o seu servidor. Entre na linha de comando, interrompa o servidor pressionando Ctrl+C (Control seguido da tecla C, juntas) e reinicie-o rodandopython manage.py runserver
.
Acabaram-se os erros! Uhuu :) Entretanto, nosso site não mostra nada a não ser uma página em branco. Isso acontece porque o nosso template está vazio. Precisamos consertar isso.
Abra o novo arquivo no editor de código e adicione o seguinte:
Como está o nosso site agora? Visite a página descobrir: http://127.0.0.1:8000/
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. Todo o conteúdo de um website se encontra entre a tag de início<html>
e a tag de fim</html>
<p>
é a tag que inicia um parágrafos;</p>
determina o fim de um parágrafo
"Head" e "body"
Cada página HTML também é dividida em dois elementos: head (cabeçalho) 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 da web.
Nós usamos a tag <head>
para dizer ao navegador quais são as configurações da página. Por sua vez, a tag <body>
diz ao navegador qual é o conteúdo de fato da página.
Por exemplo, você pode incluir o elemento título de uma página web dentro da tag <head>
. Veja:
Salve o arquivo e atualize a página.
Viu como o navegador entendeu que "Ola's blog" é o título da página? Ele interpretou <title>Ola's blog</title>
e colocou o texto na barra de título do seu navegador (o texto também será usado nos 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 específica antes que todas as outras tags dentro dela estejam fechadas).
É como colocar coisas dentro de caixas. Você tem uma grande caixa, <html></html>
; dentro dela há <body></body>
, e esta contém caixas ainda menores: <p></p>
.
Você precisa seguir essas regras de fechamento de tags, e de aninhamento de elementos - se não fizer isso, o navegador provavelmente não interpretará seu código da maneira correta e sua página será exibida incorretamente.
Personalize seu template
Agora você pode se divertir um pouco tentando personalizar o seu template! Aqui estão algumas tags úteis para isso:
<h1>Um título</h1>
para o título da seção principal exibido na página<h2>Um sub-título</h2>
para um título um nível abaixo<h3>Um sub-sub-título</h3>
... e por aí vai, até<h6>
<p>Um parágrafo de texto</p>
<em>texto</em>
enfatiza seu texto<strong>text</strong>
enfatiza fortemente seu texto<br>
quebra a linha (você não pode digitar nada dentro da tag br e ela não possui uma tag de fechamento correspondente)<a href="https://djangogirls.org">link</a>
cria um link<ul><li>primeiro item</li><li>segundo item</li></ul>
cria uma lista, exatamente como essa!<div></div>
define uma seção da página
Aqui vai um exemplo de um template completo; copie e cole dentro de blog/templates/blog/post_list.html
:
Nós criamos três seções div
aqui.
O primeiro elemento
div
possui o título do nosso blog - é um título que contêm um linkOs outros dois elementos
div
possuem nossas postagens com a data de publicação,h2
com o título clicável da postagem e doisp
s (parágrafos) de texto, um para a data e outro para o texto da postagem.
Isso nos dá o seguinte efeito:
Uhuu! Mas, até o momento, nosso template mostra sempre a mesma informação - sendo que, anteriormente, nós falávamos sobre templates como uma maneira para exibir informações diferentes em um mesmo formato.
O que nós realmente queremos fazer é exibir as postagens reais que foram adicionadas no Django admin - e isso é o que faremos em seguida.
Mais uma coisa: implantação (deploy)!
Seria bom ver tudo isto na Internet, certo? Vamos fazer mais um deploy no PythonAnywhere:
Commit, e dê push para subir seu código no GitHub
Antes de tudo, vamos ver que arquivos foram modificados desde que nós fizemos a última implantação (execute esses comandos localmente, não no PythonAnywhere):
Assegure-se de que você está no diretório djangogirls
e vamos dizer ao git
para incluir todas as mudanças feitas nele:
Observação:
..--all
significa que ogit
também vai reconhecer se você tiver excluído arquivos (por padrão, ele só reconhece arquivos novos/modificados). Lembre-se também (do capítulo 3) que.
significa o diretório atual.
Antes de fazermos o upload de todos os arquivos, vamos verificar quais deles o git
enviará (todos os arquivos marcados para upload pelo git
aparecerão em verde):
Estamos quase lá! Agora é hora de dizer ao git para salvar essa modificação em seu histórico. Daremos a ele uma "mensagem de commit" em que descrevemos as modificações que foram feitas. Você pode escrever o que quiser agora, mas é mais útil escrever algo descritivo que te ajude no futuro a lembrar das coisas que fez.
Observação: Certifique-se de que você usou aspas duplas para delimitar a mensagem do commit.
Uma vez feito isso, faremos o upload (push) das nossas mudanças para o Github:
Baixe seu novo código no PythonAnywhere e recarregue o seu aplicativo da web
Abra a página de consoles do PythonAnywhere e vá para o seu console do Bash (ou inicie um novo). Em seguida, execute:
Você precisará substituir <your-pythonanywhere-domain>
com o seu subdomínio PythonAnywhere, sem os colchetes angulares (< >). O nome do seu subdomínio normalmente é o mesmo nome de usuário do seu PythonAnywhere, mas em alguns casos este pode ser um pouco diferente (por exemplo, se o nome possuir letras maísculas). Sendo assim, caso o comando não funcione, utilize o comando ls
(lista de arquivos) para encontrar o seu subdomínio/nome da pasta e então execute cd
para acessá-lo.
Agora veja o seu código ser baixado. Se você quiser verificar se ele chegou, você pode pular para a **página "Arquivos"**e visualizar seu código no PythonAnywhere (você pode acessar outras páginas do PythonAnywhere a partir do botão de menu na página do console).
Finalmente, pule para a aba "Web" page e aperte Reload em sua aplicação.
Sua atualização deve estar no ar! Vá em frente e atualize seu site no navegador. As alterações devem estar visíveis. :)
Last updated