Django tutorial for beginners [step by step] part 2

django
Published: 3 months, 1 week ago   436


Fermesk Rashidi

Creating a template in Django 

Hey, guys welcome to tutorial part 2. In this tutorial, we're going to show you how to create a template in the Django project and do some basic HTML code.

Before the creating template file, It's important to give you some explanations about the backend and frontend of web development and HTML codes. When we talk about the Frontend of the Web, we mean the part that is visible and users interact with. Everything you see on a website is a collection of HTML, CSS, and JavaScript that are all controlled by your web browser. Such as pages, menus, buttons, fonts, contact forms and..., etc.

As you know Django is a backend framework. A "backend" generally consists of three parts: a server, an application, and a database. For example, if you want to buy a ticket from a website, you usually open the site and interact with Frontend. When you enter the information, the related function stores that information in the database on the server. 

For creating a template, click on the icon that marked with a red circle. Give your project this title: source/templates/mytemplates.html then click on "create new file. Be sure to include the HTML extension at the end of the title to convert the text format to an HTML document. An HTML file will be created in the template folder. We are going to create simple HTML codes in this file. 

creating an HTML template

creating an HTML template

Here is your template file in the template folder.

HTML template

template 

Write HTML code

HTML stands for Hyper Text Markup Language. HTML technically is not a programming language, but a markup language. HTML helps you define the overall structure and structure of your web page(frontend) using tags and where the menu, footer, header, and form should be. For example, you want to build a house. The first step is to build the skeleton and overall shape of the building using cement, concrete, rebar, and so on. In fact, first, you build the overall structure of the building, and then, using paint and plaster to design it. Web design with HTML is exactly the same. 

HTML tags

HTML tags are markups. Each of these tags has a specific meaning and has features such as changing the appearance of texts, creating different lists, and linking pages. The type of tags in HTML is diverse and constantly improving in new versions. Some of them are not very popular and are rarely used by web designers. For example, the meter tag, which is for measurement, is rarely used by site designers. 

The first sentence of each HTML document is <! DOCTYPE html>. This section actually tells you this is an HTML page. If you take a look at the template we created, you will see the  <! DOCTYPE html> in the first line. So keep in mind that we always put it in the first line of our code.  The second main element of any HTML page is <html> and <html /> tags, which we use to start writing HTML. From now on, all the contents of an HTML page will be written between these two tags. Tags are elements that have different functions. HTML uses tags to place different elements and each user uses them according to what they want to create.

The head and body tags are among the main HTML tags that include sub-tags, elements, and internal content of a web page. 

  •  The title tag is required to display the page title in the browser, this is the text that displays in the browser tab for each page. 
<head>
  <title>HTML basics</title>
</head>

 

  •  The h1 tag indicates the headers that can have values ​​up to h6, the larger the numerical values ​​in front of h, the less important the text inside the tag, for example, the h1 tag is more important than the h3 tag!
<body>
    <h1>This is Heading</h1>
    <h2>This is heading 2</h2>
    <h3>This is Heading 3</h3>
    <h4>this is heading 4</h4>
    <h5>This is heading 5</h5>
    <h6>This is heading 6</h6>   
</body>
  • The p tag in HTML code indicates a paragraph, we said that HTML is a markup language and p in this markup represents a paragraph.
<body>
  <p>This is paragraph. A paragraph is one of most used elements in an HTML page</p>
</body>
  • The ul tag in HTML codes showing a list. each item in this tag starts with  <li> tags.
<ul>
      <li>Banana</li>
      <li>Orange</li>
      <li>Apple</li>
</ul>  
  • The <a> tag is for the link referencing, as you can see the in code component, by this tag we have referenced the python.org website.
    <a target="_blank" href="https://www.python.org/">This is link. click here</a>
  • The <img> tag is for the images. This tag, unlike the other tags, doesn't have an ending part. 
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f8/Python_logo_and_wordmark.svg/500px-Python_logo_and_wordmark.svg.png">

All of the HTML codes above in single HTML file are like this:

<!DOCTYPE html>
<html>
<head>
  <title>HTML basics</title>
</head>

<body>
    <h1>This is Heading</h1>
    <h2>This is heading 2</h2>
    <h3>This is Heading 3</h3>
    <h4>this is heading 4</h4>
    <p>This is paragraph. A paragraph is one of most used elements in an HTML page</p>
    
    <h2>Below is Unordered HTML List</h2>
    <ul>
      <li>Banana</li>
      <li>Orange</li>
      <li>Apple</li>
    </ul>  

    <a target="_blank" href="https://www.python.org/">This is link. click here</a>
    <p>Anohter paragraph</p>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f8/Python_logo_and_wordmark.svg/500px-Python_logo_and_wordmark.svg.png">

</body>
</html>

How it looks like in the browser

Here is a screenshot of  HTML codes we wrote together in the browser. If you're thinking of becoming a more serious web developer regardless of backend or frontend development, learning HTML and CSS makes it easier for you to start since HTML is very easy to learn and as a result continuing the journey of web development wouldn't be exhausting and boring. It is one of the basic and essential languages in programming.

HTML

HTML template

This is the end of the Django tutorial part 2, I hope you find it useful. I'll see you in the next part. have fun :)

django tutorial for beginners [step by step] part 1
Django tutorial for beginners [step by step] part 3
doprax

Open Cloud Platform

  • Easy Deployment
  • Free SSL
  • Custom Domain
  • Import from github
  • and more
Get started now

Related