Successfully viewed webpage in browser at each stage
Webpage1.html
3
Formatted paragraphs, headings, bullets, and hyperlinks using HTML tags
Webpage2.html
2
Added color using BGCOLOR attribute in HTML
Webpage3.html
1
Used IMG tag to display title graphic on Apollo webpage
Webpage4.html
0
Understand the website creation process and ready for advanced training
Complete!
📋 Task Completion Process
Save all files on CodeHS.com: Store all Apollo Webpage files in your CodeHS account for easy access and version control.
Create and edit via CodeHS.com: Use the CodeHS platform's built-in text editor to write and modify your HTML code.
Organize your files: Keep your HTML document and all source files (images, etc.) in the same CodeHS folder. Check the checkbox when you complete each task.
Get teacher verification: After marking a task complete, ask your teacher to review your work on-screen and confirm completion with their signature.
🚀 Countdown Card 4: Creating Your First Webpage
Save as: Webpage1.html
📚 Required Basic HTML Tags
These tags provide the basic structure of every webpage:
<HTML> </HTML>Begins and ends a webpage document
<HEAD> </HEAD>Creates a header section for metadata
<TITLE> </TITLE>Displays title in browser's title bar
<BODY> </BODY>Contains all visible content (text and images)
👨💻 Step-by-Step Instructions
🌐 Platform: CodeHS.com
You'll be using the CodeHS platform to create, save, and edit all your webpages throughout this project.
Log into CodeHS.com: Open your browser and navigate to CodeHS.com. Sign in with your student account credentials.
Create a new HTML file: In CodeHS, create a new HTML file. You can do this by clicking "New File" and naming it Webpage1.html
Create your project folder: In CodeHS, organize your work by creating a folder named "Apollo Webpage" to store all your project files.
Type the HTML code: Carefully type the following code in the CodeHS text editor (use ALL CAPS for HTML tags):
<HTML>
<HEAD>
<TITLE>Apollo 11 Moon Landing: Everything You Need to Know - BBC Newsround</TITLE>
</HEAD>
<BODY>
Apollo 17 Mission Log
Mission Overview
Launched with a Saturn V rocket on December 7, 1972.
Landed on the moon on December 11, 1972.
The Lunar Module blasted from the moon on December 14, 1972.
Linked up with the Command Module near midnight in December 1972 and began the long trip home to Earth.
Splashdown took place on December 19, 1972.
Link to NASA.
</BODY>
</HTML>
Save your file: In CodeHS, save your file as Webpage1.html in your "Apollo Webpage" folder.
View your webpage: Use CodeHS's preview feature or open the file in a browser to see your webpage. Notice how the text appears without formatting—we'll fix that in the next card!
Answer questions: Complete the worksheet questions for Countdown Card 4.
💡 Important Reminders:
Type HTML tags in ALL CAPS
Every opening tag needs a closing tag
Save frequently in CodeHS to avoid losing work
Check for typos—HTML is case-sensitive!
👁️ What Your Webpage Will Look Like
Preview of Webpage1.html:
Apollo 17 Mission Log Mission Overview Launched with a Saturn V rocket on December 7, 1972. Landed on the moon on December 11, 1972. The Lunar Module blasted from the moon on December 14, 1972. Linked up with the Command Module near midnight in December 1972 and began the long trip home to Earth. Splashdown took place on December 19, 1972. Link to NASA.
⚠️ Notice: Everything runs together with no formatting!
✨ Countdown Card 3: Formatting with HTML
Save as: Webpage2.html
🤔 The Problem
When you viewed Webpage1.html, you probably noticed it was hard to read because there were no line breaks. Even though you pressed Enter to create new paragraphs in the text editor, the webpage displayed everything as one continuous block of text.
🔑 The Solution:
In HTML, you must use tags to define EVERYTHING. Want paragraphs? Use tags. Want bullets? Use tags. Want headings? Use tags. This is what coding a webpage means!
📝 New HTML Tags You'll Learn
<P> </P>Creates a paragraph with spacing
<H2> </H2>Creates a large heading (size 2)
<CENTER> </CENTER>Centers content horizontally
<HR>Inserts a horizontal line (no closing tag)
<B> </B>Makes text bold
<UL> </UL>Creates an unordered (bulleted) list
<LI> </LI>Creates a list item (bullet point)
<BR>Inserts a line break (no closing tag)
<A HREF="url"> </A>Creates a clickable hyperlink
👨💻 Step-by-Step Instructions
🌐 Working in: CodeHS.com
Open your existing file: In CodeHS, navigate to your "Apollo Webpage" folder and open Webpage1.html
Save as new file: Immediately save it as Webpage2.html (this preserves your original file as backup)
Add formatting tags: Update your code to match the version below. Red text shows NEW HTML tags, and blue text shows new content to add:
<HTML>
<HEAD>
<TITLE>Apollo 17 Mission Log</TITLE>
</HEAD>
<BODY>
<CENTER><P><H2>Apollo 17 Mission Log</P></H2></CENTER><HR><B><P>Mission Overview</P></B><UL><LI>Launched with a Saturn V rocket on December 7, 1972.</LI><LI>Landed on the moon on December 11, 1972.</LI><LI>Lunar Module blasted from the moon on December 14, 1972.</LI><BR><LI>Linked up with the Command Module near midnight in December 1972 and began the long trip home to Earth.</LI><BR><LI>Splashdown took place on December 19, 1972.</LI><BR><LI><A HREF="http://www.nasa.gov/">Link to NASA.</A></LI></UL>
</BODY>
</HTML>
Save in CodeHS: Save your updated Webpage2.html file.
Preview your webpage: Use CodeHS's preview feature to view your formatted webpage. Notice how much better it looks with proper formatting!
🎯 What You've Accomplished:
Created centered headings with proper sizing
Added a horizontal line for visual separation
Formatted text with bold styling
Built a bulleted list for better organization
Created a clickable hyperlink to NASA
👁️ What Your Webpage Will Look Like
Preview of Webpage2.html:
Apollo 17 Mission Log
Mission Overview
Launched with a Saturn V rocket on December 7, 1972.
Landed on the moon on December 11, 1972.
Lunar Module blasted from the moon on December 14, 1972.
Linked up with the Command Module near midnight in December 1972 and began the long trip home to Earth.
✅ Much better! Now it has structure and organization!
🎨 Countdown Card 2: Adding Color to Your Webpage
Save as: Webpage3.html
🖌️ Why Add Color?
Your first two webpages were black text on white background—pretty boring! Now you'll learn how to use HTML attributes to add color to your webpage. You can control the background color, text color, and even link colors.
🔑 Understanding Attributes & Values:
Attribute: An additional characteristic you want the webpage to have (like BGCOLOR for background color)
Value: A number or word assigned to an attribute (like BLACK or 000000)
Example:<BODY BGCOLOR=BLACK> or <BODY BGCOLOR=000000>
🎨 Color Attributes You'll Use
BGCOLORSets the background color of the page
TEXTSets the color of regular text
LINKSets the color of unvisited hyperlinks
VLINKSets the color of visited hyperlinks
💡 Pro Tip: You can use color names (BLACK, RED, BLUE) or hex codes (000000, FF0000, 0000FF).
For more color options, visit HTML color charts online.
👨💻 Step-by-Step Instructions
🌐 Working in: CodeHS.com
Open previous file in CodeHS: Navigate to your "Apollo Webpage" folder and open Webpage2.html
Save as new file: Immediately save it as Webpage3.html
Modify the BODY tag: Find the line that says <BODY> and replace it with the following colorized version:
<HTML>
<HEAD>
<TITLE>Apollo 17 Mission Log</TITLE>
</HEAD>
<BODY BGCOLOR=BLACK TEXT=YELLOW LINK=WHITE VLINK=BLUE>
<CENTER><P><H2>Apollo 17 Mission Log</P></H2></CENTER>
<HR>
<B><P>Mission Overview</P></B>
<UL>
<LI>Launched with a Saturn V rocket on December 7, 1972.</LI>
<LI>Landed on the moon on December 11, 1972.</LI>
<LI>Lunar Module blasted from the moon on December 14, 1972.</LI><BR>
<LI>Linked up with the Command Module near midnight in December 1972 and began the long trip home to Earth.</LI><BR>
<LI>Splashdown took place on December 19, 1972.</LI><BR>
<LI><A HREF="http://www.nasa.gov/">Link to NASA.</A></LI>
</UL>
</BODY>
</HTML>
Save your work: Save Webpage3.html in CodeHS.
Preview the results: Use CodeHS's preview feature or open in a browser. Your webpage should now have:
Black background
Yellow text
White unvisited links
Blue visited links
🎨 Experiment with Colors!
Try different color combinations to see what looks good. Remember: your text color should contrast well with your background for readability!
👁️ What Your Webpage Will Look Like
Preview of Webpage3.html:
Apollo 17 Mission Log
Mission Overview
Launched with a Saturn V rocket on December 7, 1972.
Landed on the moon on December 11, 1972.
Lunar Module blasted from the moon on December 14, 1972.
Linked up with the Command Module near midnight in December 1972 and began the long trip home to Earth.
✅ Now it has color! Black background with yellow text creates a space-themed look!
🖼️ Countdown Card 1: Adding Images
Save as: Webpage4.html
📸 Why Images Matter
Images enhance webpages by making them more interesting, colorful, and professional. Images can serve as background color, decorative elements, or even clickable links to other pages.
⚡ Important Image Guidelines:
Use compressed formats: JPEG and GIF files load faster than TIFF or PNG
Keep files small: Smaller images = faster loading times
Same folder rule: Images must be in the same CodeHS folder as your HTML file
Case-sensitive names: File names must be typed EXACTLY as saved
🏷️ The Image Tag
<IMG SRC="filename">Displays an image on the webpage
SRC="filename"Specifies where the image file is located
WIDTH="number"Sets the width of the image in pixels
HEIGHT="number"Sets the height of the image in pixels
Upload image to CodeHS: First, save the title.gif image (shown below) to your computer by right-clicking it and selecting "Save Image As". Then upload it to your "Apollo Webpage" folder in CodeHS (make sure it's in the same folder as your HTML files).
👇 Right-click this image and save it as "title.gif"
File name: title.gif | Dimensions: 627 x 148 pixels
Open previous file: In CodeHS, open Webpage3.html
Save as new file: Immediately save it as Webpage4.html
Find and delete text heading: Locate this line in your code:
Delete this entire line—we're replacing it with an image!
Add the image tag: In place of the deleted line, add this new image tag right after the <BODY> tag:
<HTML>
<HEAD>
<TITLE>Apollo 17 Mission Log</TITLE>
</HEAD>
<BODY BGCOLOR=BLACK TEXT=YELLOW LINK=WHITE VLINK=BLUE>
<IMG SRC="title.gif" WIDTH="627" HEIGHT="148">
<HR>
<B><P>Mission Overview</P></B>
<UL>
<LI>Launched with a Saturn V rocket on December 7, 1972.</LI>
<LI>Landed on the moon on December 11, 1972.</LI>
<LI>Lunar Module blasted from the moon on December 14, 1972.</LI><BR>
<LI>Linked up with the Command Module near midnight in December 1972 and began the long trip home to Earth.</LI><BR>
<LI>Splashdown took place on December 19, 1972.</LI><BR>
<LI><A HREF="http://www.nasa.gov/">Link to NASA.</A></LI>
</UL>
</BODY>
</HTML>
Save your work: Save Webpage4.html in CodeHS.
Preview and verify: Use CodeHS's preview feature to view your webpage. You should see the title.gif image displayed at the top of your page instead of the text heading!
🎯 Congratulations! You've Completed:
✅ Created HTML structure with required tags
✅ Formatted text with headings, paragraphs, and lists
✅ Added color to background, text, and links
✅ Incorporated images into your webpage
You now understand the fundamentals of creating webpages with HTML! 🚀
You're ready to continue your web development journey with more advanced training on CodeHS.com!
👁️ What Your Final Webpage Will Look Like
Preview of Webpage4.html in browser:
🌐 Apollo 17 Mission Log - Webpage4.html
Mission Overview
Launched with a Saturn V rocket on December 7, 1972.
Landed on the moon dashed #666;">
🖼️ IMAGE: title.gif
Apollo 17 Mission Log
(627 x 148 pixels)
Mission Overview
Launched with a Saturn V rocket on December 7, 1972.
Landed on the moon on December 11, 1972.
Lunar Module blasted from the moon on December 14, 1972.
Linked up with the Command Module near midnight in December 1972 and began the long trip home to Earth.
