Introduction and Overview

Welcome to the first lesson of our course on building a Short Story Generation Web Application. In this lesson, we will focus on setting up the basic HTML structure for our application using Django. This foundational step is crucial, as it lays the groundwork for the entire web application. By the end of this lesson, you will have a well-structured HTML document that serves as the backbone of our AI Short Story Generator. Let's dive in and start building!

Project File Structure

Before we start building the HTML for our story generation interface, let's take a moment to understand how our Django project is organized. A clear file structure helps us stay organized as our project grows in complexity.

Here's the structure we'll be working with:

project/
├── generator/
│   ├── __init__.py
│   ├── admin.py
│   ├── apps.py
│   ├── models.py
│   ├── views.py
│   ├── urls.py
│   └── templates/
│       └── index.html
└── static/
    ├── data/
    │   └── story_prompt_template.txt
    ├── style.css
    └── script.js

The new files that we will work with can be in two folders:

  • project/generator/templates/: Contains HTML templates rendered by Django.
  • project/static/: Holds static files such as CSS and JavaScript for the frontend UI.

With this structure in mind, you'll find it easier to understand where each part of the code lives as we build out the HTML and connect it to our Django backend.

Creating the Basic HTML Document Structure

Let's start by setting up the basic HTML structure in the generator/templates/index.html file. This will serve as the foundation for our web application.

  1. Load Static Files and DOCTYPE Declaration: Begin by loading static files and declaring the document type.

    {% load static %}
<!DOCTYPE html>
<html lang="en">
    • The {% load static %} tag enables the use of Django's static file handling in the template. This enables the application to access the static folder we saw earlier.
    • The <!DOCTYPE html> declaration defines the document type and version of HTML.
    • The <html lang="en"> tag specifies the language of the document, which is important for accessibility and SEO.

  2. Head Element: Next, add the head element, which contains metadata about the document.

    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI Short Story Generator</title>
    <link rel="stylesheet" href="{% static 'style.css' %}">
</head>
    • The <meta charset="UTF-8"> tag sets the character encoding for the document, ensuring it can display all characters correctly.
    • The <meta name="viewport" content="width=device-width, initial-scale=1.0"> tag ensures the page is responsive and displays correctly on all devices.
    • The <title> tag sets the title of the page, which appears in the browser tab.
    • The <link> tag links the CSS file using Django's {% static %} template tag, ensuring the styles written in static/styles.css are applied to the page.

  3. Body Element: Add the body element, which will contain the content of the page.

    <body>
</body>

    The <body> tag is where all the visible content of the page will go. For now, it's empty, but we'll be adding more elements soon.

Adding Tab Navigation

Now, let's create a tab navigation system within the body element. This will allow users to switch between different sections of the application.

Tabs Container: Start by creating a div with the class tabs to hold the navigation buttons.

<div class="tabs">
    <button class="tab-button" onclick="openTab('generate')">Generate Story</button>
    <button class="tab-button" onclick="openTab('history')">View History</button>
</div>
  • The <div class="tabs"> element acts as a container for the tab buttons.
  • Each <button> element represents a tab. The onclick attribute calls the openTab function with the respective tab ID, allowing users to switch between tabs. We will create this function in the next units of this course.

Next, we'll build the story generation inside the generate div with form elements and layout to allow users to input story prompts and generate stories.

Generate Tab Content: Create a div with the ID generate to hold the content for the "Generate Story" tab.

<div id="generate" class="tab-content">
    <div class="container">
        <h1>AI Short Story Generator</h1>
        <input type="text" id="prompt" placeholder="Enter your story theme...">
        <label for="tone">Tone (Optional):</label>
        <select id="tone">
            <option value="">None</option>
            <option value="Mysterious">Mysterious</option>
            <option value="Adventurous">Adventurous</option>
            <option value="Humorous">Humorous</option>
            <option value="Inspirational">Inspirational</option>
        </select>
        <button id="generate-button" onclick="generateStory()">Generate Story</button>
        <p id="loading-message" style="display: none;">Generating story... Please wait.</p>
        <div id="story-container"></div>
    </div>
</div>
  • The <h1> element serves as the title for the tab.
  • The <input> element allows users to enter a story theme.
  • The <select> element provides a dropdown menu for selecting the tone of the story.
  • The <button> element triggers the generateStory function to generate a story. We will create this function in the next units of this course.
  • The <p> element displays a loading message while the story is being generated.
  • The <div id="story-container"> is where the generated story will be displayed.

Now, let's create the history div to include elements for viewing past stories.

History Tab Content: Create a div with the ID history to hold the content for the "View History" tab.

<div id="history" class="tab-content" style="display:none;">
    <div class="container">
        <h1>Story History</h1>
    </div>
</div>
  • The <h1> element serves as the title for the tab.
  • We will create content inside this div like buttons and inputs in a future unit, for now we will leave it with only the title.
  • The style="display:none;" attribute ensures this tab is initially hidden.
Finalizing the HTML Structure and Summary

Finally, let's add the script tag at the end of the body to include the JavaScript file and ensure everything is well organized.

  1. Script Tag: Add the script tag to include the JavaScript file.

    <script src="{% static 'script.js' %}"></script>

    This script tag links the JavaScript file using Django's {% static %} template tag, ensuring the scripts are correctly loaded.

  2. Verify Structure: Ensure all elements are correctly nested and organized within the HTML structure. This is crucial for the application to function properly.

In summary, we've set up the basic HTML structure for our AI Short Story Generator application using Django's template system. This includes creating a tab navigation system, developing content for the "Generate Story" and "View History" tabs, and linking the necessary CSS and JavaScript files. In the upcoming practice exercises, you'll have the opportunity to reinforce these concepts and ensure your HTML structure is ready for further development.

Next
Sign up
Join the 1M+ learners on CodeSignal
Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal