Introduction to HTML

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 (that's the HTML we mentioned in the first chapter, How the Internet works).

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 blog/templates/blog directory. So first create a directory called templates inside your blog directory. Then create another directory called blog inside your templates directory:

blog
└───templates
    └───blog

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

And now create a post_list.html file (just leave it blank for now) inside the blog/templates/blog directory.

See how your website looks now: http://127.0.0.1:8000/

If you still have an error TemplateDoesNotExist, try to restart your server. Go to the command line, stop the server by pressing Ctrl+C (Control and C keys together) and start it again by running a python manage.py runserver command.

Figure 11.1

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.

Open the new file in the code editor, and add the following:

blog/templates/blog/post_list.html

<!DOCTYPE html>
<html>
<body>
    <p>Hi there!</p>
    <p>It works!</p>
</body>
</html>

So how does your website look now? Visit it to find out: http://127.0.0.1:8000/

Figure 11.2

It worked. Nice work there! :)

  • The line <!DOCTYPE html> is not a HTML tag. It only declares the document type. Here, it informs the browser that document type is HTML5. This is always the beginning of any HTML5 file.
  • The most basic tag, <html>, is always the beginning of html content and </html> is always the end. As you can see, the whole content of the website goes between the beginning tag <html> and closing tag </html>
  • <p> is a tag for paragraph elements; </p> closes each paragraph

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, you can put a web page title element inside the <head>, like this:

blog/templates/blog/post_list.html

<!DOCTYPE html>
<html>
    <head>
        <title>Ola's blog</title>
    </head>
    <body>
        <p>Hi there!</p>
        <p>It works!</p>
    </body>
</html>

Save the file and refresh your page.

Figure 11.3

Notice how the browser has understood that "Ola's blog" is the title of your page? It has interpreted <title>Ola's blog</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://learningequality.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
  • <nav></nav> defines a set of navigation links
  • <article></article> specifies independent, self-contained content
  • <section></section> defines a section in a document
  • <header></header> specifies a header for a document or section
  • <main></main> specifies the main content of a document
  • <aside></aside> defines some content aside from the content it is placed in (like a sidebar)
  • <footer></footer> defines a footer for a document or section
  • <time></time> defines a specific time (or datetime)

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

blog/templates/blog/post_list.html

<!DOCTYPE html>
<html>
    <head>
        <title>My blog</title>
    </head>
    <body>
        <header>
            <h1><a href="/">My Blog</a></h1>
        </header>

        <article>
            <time>published: 14.06.2014, 12:14</time>
            <h2><a href="">My first post</a></h2>
            <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        </article>

        <article>
            <time>published: 14.06.2014, 12:14</time>
            <h2><a href="">My second post</a></h2>
            <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut f.</p>
        </article>
    </body>
</html>

We've created one header section and two article section here.

  • The header element contains the title of our blog – it's a heading and a link
  • The two article elements contain our blog posts with a published date in a time element, a h2 element with a post title that is clickable and a p (paragraph) element for text of our blog post.

It gives us this effect:

Figure 11.4

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.

What we really want to do is display real posts added in our Django admin – and that's where we're going next.

One more thing: share!

It'd be good to see all this out and live on the Internet, right? Let's push code to Github as a feature branch:

Commit, and push your code to GitHub

First off, let's see what files have changed since we last pushed:

command-line

$ git status

Make sure you're in the django-tutorial directory and let's tell git to include all the changes in this directory:

command-line

$ git add .

Before we upload all the files, let's check what git will be uploading (all the files that git will upload should now appear in green):

command-line

$ git status

We are making an update to our code - commonly for a repository that only you are contributing to, you might just push the code directly to the main branch, but more often you will be submitting code updates via pull requests. To do that, let's make a feature branch:

$ git checkout -b blog-feature

This tells git to check out and create a new branch called blog-feature. We could have done this in two steps:

$ git branch blog-feature
$ git checkout blog-feature

Which would have the same effect. We are now on a feature branch, and ready to save the staged changes into the commit history on this new feature branch.

We're almost there, now it's time to tell it to save this change in its history. We're going to give it a "commit message" where we describe what we've changed. You can type anything you'd like at this stage, but it's helpful to type something descriptive so that you can remember what you've done in the future.

command-line

$ git commit -m "Changed the HTML for the site."

Make sure you use double quotes around the commit message.

Once we've done that, we upload (push) our changes up to GitHub:

command-line

$ git push

Open a pull request on Github

When you push a new branch to Github as we did above, it will show output with a URL that you can open that will quickly allow you to make a Pull Request against the default branch of the repository.

Open the link and create the pull request against your default main branch. For more detailed information on creating a pull request, see the Github documentation. For the title and description, give a short summary of the changes you are making with this update.

When you have created the pull request, review your own code in the Github UI. You have been testing your code locally, so it is likely that it is working as intended, but there may be things you will notice in your code that you didn't see when using your IDE. Check for typos, incorrect logic, and make sure the changes you are making match up to what you think you are changing and the description you gave in the Pull Request.

When you are satisfied, approve your Pull Request and merge it. It's also a good idea to delete the feature branch blog-feature when prompted to in the Github UI, to prevent your remote repository from becoming cluttered with feature branches.

Update your code locally

Now that we have merged our Pull Request, we want to make sure our local version of the repository is up to date with the 'remote' - the version on Github. To do this, we change branch back to main:

$ git checkout main

And then pull from remote:

$ git pull

This will update your local copy of the main branch with the latest changes. We can now remove the local copy of the feature branch too:

$ git branch -d blog-feature

Because all commits from blog-feature are now part of main, git will happily delete this branch without any warning.

results matching ""

    No results matching ""