Fossman Media | HTML Docs

01

layout.html

layout.html can be thought of as parent for each of the html templates which contain the content for each page of the application which will extend this document. Content defined in this document will be repeated for each page of the application, eliminating the need for redundant code. For example, the header, footer and meta data that applies to the entire application.

Add the following to layout.html
Take note of the placeholders highlighted in blue below. Any content on other pages of the application that are also within these tags will be added to extend this document. In the example below, there is one for the head and another for the body.

Indentation in this document is not as important as in the Python documents. As it's main purpose is to make the document more readable for the developer of the application.

Anything placed inside of this doucment will apply to all pages within the application.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

        <!-- Title -->
        <title>Example | {{ title }}</title>
        
        <!-- Favicons -->
        <link rel="icon" type="image/x-icon" href="favicon.png">

        <!-- Viewport -->
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- External Style Sheets (all pages) -->
        <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/fonts.css') }}">
        <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/styles.css') }}">
        <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/quries.css') }}">
        <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/animations.css') }}">

        <!--Description Tags-->
        <meta name="description" content="content_discription_here">
        <meta name="keywords" content="keyword1_here, keyword2_here, keyword3_here">

        <!-- Global Meta Tags -->
        <meta name="revised" content="Weekday, Month Day, Year, Time am/pm">
        <meta name="url" content="https://example.com">
        <meta name="author" content="Developer Name">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="coverage" content="Worldwide">
        <meta name="distribution" content="Global">
        <!-- place holder (head)-->
        {% block head %}{% endblock head %}
    </head>

    <body>
        <!-- main container -->
        <div id="container_main">
            <div class="feature">
                <header>
                    <div class="header-container">
                        <div class="header-container-left">
                            <img src="/static/images/logo.png">
                            <h1>
                                Flask App | {{ title }}
                            </h1>
                        </div>
                        <div class="header-container-right">
                            <a href="{{ url_for('index') }}">HOME</a>
                            <a href="{{ url_for('services') }}" >SERVICES</a>
                            <a href="{{ url_for('contact') }}">CONTACT</a>
                            <a href="#top">PAGE TOP</a>
                        </div>
                    </div>
                </header>
                <div class="feature-center">
                    {% block feature_center %}{% endblock feature_center %}
                </div>
            </div>
            <div class="container">
                <!-- place holder (body)-->
                {% block content %}{% endblock content %}
            </div>
            <footer>
                <h4>
                    Please help support free and open-source software.
                </h4>
            </footer>
        </div>
    </body>
</html>

02

index.html

index.html is the home page of the application. When someone visits the application in a browser, this will be the page that is indexed by the search engine and the one the user lands on when navigating to the application in a browser. This document also contains structured data used by search engines to understand how the application is laid out and the type of content it contains.

{% extends "layout.html" %}
instructs the browser to append the content in this document to the layout.html document

{% block head %} & {% endblock head%}
all content within these tags will be appended to the head section of the layout.html document, within the tags that were created in layout.html of the same name.

{% block content %} & {% endblock content%}
all content within these tags will be appended to the body section of the layout.html document, within the tags that were created in layout.html of the same name.

{% extends "layout.html" %}

{% block head %}
<!-- Local Meta Tags -->
<meta name="url" content="https://example.com">
<meta name="robots" content="index, follow">
<meta name="googlebot" content="index, follow">
<!-- Local Styles -->
<style>
</style>
{% endblock head%}

{% block feature_center %}
<h4>
    Home Page<br>Feature Section<br>100% screen width/height
</h4>
{% endblock feature_center %}

{% block content %}
<h4>
    Home Page<br>Main Content Goes Here
</h4>
{% endblock content %}

03

services.html

services.html in this example of an additional page of the application that can be used to present services that may be available from the developers of the application itself. This page is included in this example because it is not only common, but serves as a good example of how to add an additional page which is an extension of the layout.html document.

Copy and paste the following into services.html

{% extends "layout.html" %}

{% block head %}
<!-- Local Meta Tags -->
<meta name="url" content="https://example.com/services">
<meta name="robots" content="noindex, follow">
<meta name="googlebot" content="noindex, follow">
<!-- Local Styles -->
<style>
</style>
{% endblock head%}

{% block feature_center %}
<h4>
    Services Page<br>Feature Section<br>100% screen width/height
</h4>
{% endblock feature_center %}

{% block content %}
<h4>
    Services Page<br>Main Content Goes Here
</h4>
{% endblock content %}

04

contact.html

The purpose of this document is just as it sounds. It is used to show the contact information that belong to the owners of the application. The example below also includes a contact form that uses contact_form.php to send the data that is sent in the form to a specific email address.

Copy and paste the following into contact.html

{% extends "layout.html" %}

{% block head %}
<!-- Local Meta Tags -->
<meta name="url" content="https://example.com/contact">
<meta name="robots" content="noindex, follow">
<meta name="googlebot" content="noindex, follow">
<!-- Local Styles -->
<style>
</style>
{% endblock head%}

{% block feature_center %}
<h4>
    Contact Page<br>Feature Section<br>100% screen width/height
</h4>
{% endblock feature_center %}

{% block content %}
<h4>
    Contact Page<br>Main Content Goes Here
</h4>
{% endblock content %}

<div class="form-container">
    <form method="POST" action="contact_form.php">
        <fieldset>
            <legend>
                Contact Form
            </legend>
            <div class="form-fields">
                <label>Name / Alias</label>
                <input type="text" name="name" required placeholder="your name">
                <label>Contact Information
                <input type="text" name="mail" required placeholder="phone/email"><
                <label>Subject</label>
                <input type="text" name="subject" required placeholder="subject of the message">
                <label>Message</label>
                <textarea name="message" required placeholder="Message"></textarea>
                <button type="submit" name="submit" class="btn2">SEND MESSAGE</button>
            </div>
        </fieldset>
    </form>
</div>

05

form_passed.html

This document is loaded and shown to the user of the application after a form has been submitted and the data has been sent successfully. This action will occur when all the requirements have been satisfied outlined in the forms.py document. For example, the number of characters used in each field of the form.

Copy and paste the following into form_passed.html

{% extends "layout.html" %}

{% block head %}
<!-- Local Meta Tags -->
<meta name="url" content="https://example.com/contact/form_passed">
<meta name="robots" content="noindex, follow">
<meta name="googlebot" content="noindex, follow">
<!-- Local Styles -->
<style>
</style>
{% endblock head%}

{% block feature_center %}
<h4>
    Form Passed Page<br>Feature Section<br>100% screen width/height
</h4>
{% endblock feature_center %}

06

form_error.html

If the user of the application is looking at this page on their screen, something went wrong and the data in the form could not be sent. This problem will most likely occur if the guidelines in forms.py or contact_form.php have not been met

Copy and paste the following into form_error.html

{% extends "layout.html" %}

{% block head %}
<!-- Local Meta Tags -->
<meta name="url" content="https://example.com/contact/form_error">
<meta name="robots" content="noindex, follow">
<meta name="googlebot" content="noindex, follow">
<!-- Local Styles -->
<style>
</style>
{% endblock head%}

{% block feature_center %}
<h4>
    Form Error Page<br>Feature Section<br>100% screen width/height
</h4>
{% endblock feature_center %}

HTML DOCUMENTS

01