HTML Pages and Links

Plain text can give a visitor a message. A study task page can also have a heading, a list, and links. HTML, short for Hypertext Markup Language, describes that page structure.

Continue in the same web-app folder and environment from the walking skeleton.

HTML Document Structure

An HTML element describes a part of the content. For example:

<h1>Study tasks</h1>
<p>Choose a task to work on.</p>

The opening tag <h1> and closing tag </h1> surround the main heading. The p element describes a paragraph. The words between the tags are its content. A link such as <a href="/about">About this application</a> adds a quoted destination attribute. Lists surround each item with li tags and the complete collection with ul tags. A separate title element, such as <title>My study page</title>, supplies the browser tab’s title.

Replace the contents of main.py with this application:

from fastapi import FastAPI
from fastapi.responses import HTMLResponse

app = FastAPI()

@app.get("/tasks")
def show_tasks():
    return HTMLResponse(
        """
        <!doctype html>
        <html lang="en">
          <head>
            <meta charset="utf-8">
            <title>Study tasks for students</title>
          </head>
          <body>
            <h1>Study tasks</h1>
            <p>Choose a task to work on.</p>
            <ul>
              <li>T01: Read the article (reading)</li>
              <li>T02: Practise loops (practice)</li>
            </ul>
            <a href="/about">About this application</a>
          </body>
        </html>
        """
    )

@app.get("/about")
def about():
    return HTMLResponse(
        """
        <!doctype html>
        <html lang="en">
          <head>
            <meta charset="utf-8">
            <title>About this application</title>
          </head>
          <body>
            <h1>About this application</h1>
            <p>A small study task application written in Python.</p>
            <a href="/tasks">Back to tasks</a>
          </body>
        </html>
        """
    )

Three quotation marks start and end each multiline Python string. Everything between them, including the HTML tags, belongs to that string. HTMLResponse tells the browser to interpret the returned content as HTML.

Look at the document returned by show_tasks. <!doctype html> identifies it as HTML. The html element surrounds the document, and lang="en" identifies its language. The head holds information about the page: meta specifies UTF-8 encoding and title supplies the browser tab’s title. The content displayed in the page belongs inside body.

Save main.py and wait for Uvicorn’s automatic reload. If you stopped the server, start it again from the activated terminal in web-app:

uvicorn main:app --reload

Visit or refresh http://127.0.0.1:8000/tasks. Locate Study tasks for students and Study tasks in the browser. Which came from title, and which came from h1?

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Study tasks for students</title>
  </head>
  <body>
    <h1>Study tasks</h1>
    <p>Two tasks are listed.</p>
  </body>
</html>

HTML Source and the Displayed Page

Use the browser’s View page source command through its menu or context menu. It shows the returned HTML, including tags. The page itself displays the headings, paragraphs, and lists those tags describe.

The Python function runs on the server. Its HTMLResponse contains a string, and the browser receives that string as HTML. Viewing the source does not expose the Python function.

Links and GET Requests

The a element creates a link. Its href attribute gives the destination; the text between the tags gives the visible link text:

<a href="/about">About this application</a>

The path /about refers to the same server. The diagram below shows how clicking the link sends a GET request that selects about and receives the second page.

Follow the About this application and Back to tasks links. Each click starts a new request; it does not continue execution inside the function that returned the previous page.

Compare the link above with <a href="/missing">About this application</a>. The visible words are the same, but this destination would request /missing. The application has no route for that path, so it would return 404.

Practise these tags and attributes with small edits to the HTML string in main.py.

Combine the heading, list, and link patterns in a task page.

So far, the task titles have been written directly in HTML strings. The next chapter displays values supplied by Python dictionaries instead.

Check Your Understanding

1. An unordered list should contain three task items. How many ul elements and how many li elements does it need? Explain which element surrounds the complete collection.
2. The /about page contains the link <a href="/tasks">About this application</a>. What request does clicking it make, and which function in this chapter’s application handles that request? Explain the role of the visible link text.
3. Why does View page source show <h1>Study tasks</h1> but not the Python statement return HTMLResponse(...)? Describe what the server sends and what the browser displays.