Creating the layout.html file

Now inside the templates directory, we will proceed to create the layout.html file.

This file defines the layout of the pages, like the Navigation bar, which should be the same for the pages. Thus all such info will be coded in this file.

This file will be imported into other HTML files, as the layout is the same for all the web pages we will be using.

Note:

We could embed Python-Flask code snippets into an HTML file using {{ }}.

For example, consider the code-snippet that we will be using in layout.html file.

<link href="{{ url_for('static', filename='css/main.css') }}" rel="stylesheet">

Here, url_for() generates a URL to the given endpoint. So here, we are linking the CSS file Image-Classification-App/static/css/main.css in the current file layout.html. In HTML, we use the href attribute to specify the URL of the page we want to link. So here, we are linking the file path Image-Classification-App/static/css/main.css to the layout.html file by writing <link href="{{ url_for('static', filename='css/main.css') }}" rel="stylesheet"> in the layout.html file.
vi is used to:
- create and edit the file, if the file doesn't exist.
- edit the file, if the file already exists.
If we want to create and/or edit the file named myFile, we use vi myFile.
To exit from the file, we click esc key and type :wq and hit on enter key. In :wq, w means save, and q means quit.

INSTRUCTIONS

This file layout.html should be created inside Image-Classification-App/templates. So make sure you are in the Image-Classification-App/templates. You could check your present working directory using the command:
```
pwd
```
This command should output the path:
```
/home/$USER/Image-Classification-App/templates
```
If the path displayed is not the same as the above, switch to the Image-Classification-App using
```
cd ~
cd Image-Classification-App/templates
```
Create the file named layout.html using the vi command inside the Image-Classification-App/templates/ directory.
Press i key on your keyboard, to switch to insert mode in the file.

Copy-paste the below code for the layout HTML page:

<!doctype HTML>
    <html lang="en">
      <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Required CDNs for Fonts and Bootstrap -->
        <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,600' rel='stylesheet'>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"                               integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

        <!-- Required Linking to the CSS file main.css we created -->
        <link href="{{ url_for('static', filename='css/main.css') }}" rel="stylesheet">
     </head>

     <body>

        <header>
            <h1 class="title"><b>Image Classification App</b></h1>
        </header>

        <div class="container-fluid">
            {% block content %}
            {% endblock %}
        </div>

        <!-- Other required CDNs -->
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

      </body>
</html>

Observe the following lines from the above code:

<link href="{{ url_for('static', filename='css/main.css') }}" rel="stylesheet">.

Here we are linking the main.css file(which we created in the Image-Classification-App/static/css/ directory) to the layout.html file so that the stylings will be applied to all the HTML files, since the layout.html file will be linked to all the other HTML files too.
```
{% block content %}
{% endblock %}
```
This is the place where we display the content from the other HTML files, wherever this layout.html is imported.

Now, click on esc button on your keyboard.
Then, type :wq and then hit on enter key on your keyboard. This returns you to your console.

Get Hint See Answer

Note - Having trouble with the assessment engine? Follow the steps listed here

Project - How to Deploy an Image Classification Model using Flask

Creating the layout.html file

XP

Loading comments...