Introduction to HTML

Part of this chapter is based on tutorials by Django Girls Tutorial : https://tutorial.djangogirls.org

What's a template, you may ask?

A template is a file that we can re-use to present different information in a consistent format – for example, you could use a template to help you write a letter, because although each letter might contain a different message and be addressed to a different person, they will share the same format.

A Django template's format is described in a language called HTML.

What is HTML?

HTML is a code that is interpreted by your web browser – such as Chrome, Firefox or Safari – to display a web page for the user.

HTML stands for "HyperText Markup Language". HyperText means it's a type of text that supports hyperlinks between pages. Markup means we have taken a document and marked it up with code to tell something (in this case, a browser) how to interpret the page. HTML code is built with tags, each one starting with<and ending with>. These tags represent markup elements.

Your first template!

Creating a template means creating a template file. Everything is a file, right? You have probably noticed this already.

Templates are saved in myfirstgame/templates/myfirstgame directory. So first create a directory calledtemplatesinside your myfirstgame directory. Then create another directory called myfirstgame inside your templates directory:

myfirstgame
└───templates
    └───myfirstgame

(You might wonder why we need two directories both called myfirstgame – as you will discover later, this is simply a useful naming convention that makes life easier when things start to get more complicated.)

And now create a index.htmlfile (just leave it blank for now) inside the myfirstgame/templates/myfirstgame directory.

See how your website looks now by going to http://127.0.0.1:8000/

No error anymore! Congratulations :) However, your website isn't actually publishing anything except an empty page, because your template is empty too. We need to fix that.

Add the following to your template file:

<!DOCTYPE html>
<html>
  <head>
        <title>Welcome to Text-Based Adventure Game in Django</title>
  </head>
  <body>
    <h1>Welcome to Text-Based Adventure Game in Django</h1>
  </body>
</html>

So how does your website look now? Visit http://127.0.0.1:8000/ to find out, and you should see the following:It worked! Nice work there :)

<html> tag is always the beginning of a web page. </html> is a closing tag that has to be at the end of the web page.

Inside <html>, it has two sections:

  • <head> and its closing tag </head>
  • <body> and its closing tag </body>

<!DOCTYPE html> tells the browser what version the

Head and body

Each HTML page is also divided into two elements: head and body.

  • head is an element that contains information about the document that is not displayed on the screen.

  • body is an element that contains everything else that is displayed as part of the web page.

We use<head>to tell the browser about the configuration of the page, and<body>to tell it what's actually on the page.

For example, we can see the following displayed when you visit http://127.0.0.1:8000/:

  • The web page title element is inside the<head>
  • <h1> is a title that is inside the <body>

Notice how the browser has understood that "Welcome to Text-Based Adventure Game in Django" is the title of your page? It has interpreted<title>Welcome to Text-Based Adventure Game in Django</title>and placed the text in the title bar of your browser (it will also be used for bookmarks and so on).

Probably you have also noticed that each opening tag is matched by a closing tag, with a/, and that elements are nested (i.e. you can't close a particular tag until all the ones that were inside it have been closed too).

It's like putting things into boxes. You have one big box,<html></html>; inside it there is<body></body>, and that contains still smaller boxes:<p></p>.

You need to follow these rules of _closing _tags, and of _nesting _elements – if you don't, the browser may not be able to interpret them properly and your page will display incorrectly.

Customize your template

You can now have a little fun and try to customize your template! Here are a few useful tags for that:

  • <h1>A heading</h1> for your most important heading
  • <h2>A sub-heading</h2> for a heading at the next level
  • <h3>A sub-sub-heading</h3> …and so on, up to <h6>
  • <p>A paragraph of text</p>
  • <em>text</em> emphasizes your text
  • <strong>text</strong> strongly emphasizes your text
  • <br> goes to another line (you can't put anything inside br and there's no closing tag)
  • <a href="https://djangogirls.org">link</a> creates a link
  • <ul><li>first item</li><li>second item</li></ul> makes a list, just like this one!
  • <div></div> defines a section of the page

Here's an example of a full template, copy and paste it into myfirstgame/templates/myfirstgame/post_list.html:

<!DOCTYPE html>
<html>
  <head>
    <title>Welcome to Text-Based Adventure Game in Django</title>
  </head>
  <body>
    <h1>Welcome to Text-Based Adventure Game in Django</h1>
    <h2>Come back soon when we add more functionality</h2>
    <p>This is a <em>choose your own adventure game</em>.</p>
  </body>
</html>

Yaaay! But so far, our template only ever displays exactly the same information– whereas earlier we were talking about templates as allowing us to display different information in the same format.

Our next steps are to create models and forms to handle players entering things like their names, and instructions during game play.

results matching ""

    No results matching ""