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!
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:
The new files that we will work with can be in two folders:
project/generator/templates/: ContainsHTMLtemplates rendered by Django.project/static/: Holds static files such asCSSandJavaScriptfor 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.
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.
-
Load Static Files and DOCTYPE Declaration: Begin by loading static files and declaring the document type.
- The
{% load static %}tag enables the use of Django's static file handling in the template. This enables the application to access thestaticfolder we saw earlier. - The
<!DOCTYPE html>declaration defines the document type and version ofHTML. - The
<html lang="en">tag specifies the language of the document, which is important for accessibility and SEO.
- The
-
Head Element: Next, add the
headelement, which contains metadata about the document.- 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
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.
- The
<div class="tabs">element acts as a container for the tab buttons. - Each
<button>element represents a tab. Theonclickattribute calls theopenTabfunction 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.
Finally, let's add the script tag at the end of the body to include the JavaScript file and ensure everything is well organized.
-
Script Tag: Add the
scripttag to include theJavaScriptfile.This
scripttag links theJavaScriptfile using Django's{% static %}template tag, ensuring the scripts are correctly loaded. -
Verify Structure: Ensure all elements are correctly nested and organized within the
HTMLstructure. 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.
