Bringing Characters and Stories into HTML
Bringing Characters and Stories into HTML
This part of the assignment focuses on integrating the characters and stories you’ve developed into your web page. You’ll learn how to use different HTML tags to structure your story content effectively and begin exploring CSS to add style to your page.
Activity 1: Adding Content to Your HTML Document
Using the HTML document structure you created in Part 2, it’s time to add your character and story. Here’s how you can bring your story to life with HTML:
- Add an
<h1>tag to give your page a title that reflects your story or character’s name. - Use
<p>tags to insert paragraphs of your story into the body of your document. - If you have images of your character or related to your story, include them using
<img>tags. Remember to use thealtattribute to describe the image content. - Organize any lists of character traits or story elements using
<ul>(unordered list) or<ol>(ordered list) tags, with each item in the list wrapped in an<li>tag.
Example of adding a character description:
<h1>John Doe: The Adventurer</h1>
<img src="john-doe.png" alt="John Doe in adventure attire">
<p>John Doe is an intrepid explorer with a love for uncovering hidden treasures.</p>
<h2>Character Traits</h2>
<ul>
<li>Brave</li>
<li>Curious</li>
<li>Resourceful</li>
</ul>
Activity 2: Introduction to CSS
Now that your story content is in place, let’s make it visually appealing with some basic CSS styling. You can start by adding a <style> section within the <head> of your document. Here are a few simple styles to begin with:
- Change the background color of your page.
- Set the font family for your text to make it more readable or thematic.
- Adjust the size and color of your headings and paragraphs.
Example of basic CSS styling:
<style>
body {
background-color: #f0f8ff;
font-family: 'Arial', sans-serif;
}
h1, h2 {
color: #333;
}
p {
color: #666;
}
</style>
This simple styling can significantly impact the look and feel of your story page, making it more engaging and enjoyable to read.
Reflection
After completing these activities, reflect on how the addition of content and styling has transformed your HTML document. Consider how the structure you’ve built supports your story and characters, and how CSS can further enhance your narrative’s presentation.
