OLA 1: HTML

Course: CSCI 4410/5410 Web Technologies

Instructor: Dr. Xin Yang
Due date: 11:59 pm Feb 12th, 2026 (Thursday)

Objective:

In this assignment, you will create a personal webpage using an industry-inspired workflow: (1) plan your structure, (2) build your HTML, and (3) reflect on what changed and why. The goal is to showcase your understanding of basic HTML components, including <!DOCTYPE>, <html>, <head>, <body>, <meta>, <title>, <p>, <img>, <a>, <ul>, <ol>, <li>, <table>, <tr>, <th>, <td>, <thead>, <tbody>, <b> or <strong>, <i> or <em>, <mark>, and HTML comments .

Workflow Steps (3 Stages)

You must submit all three stages:

Stage 1: Plan the Outline of Structure
Stage 2: HTML implementation (personal webpage)
Stage 3: Reflection: what changed and why

Stage 1: Plan the Outline of Structure (20 points)

Before writing code, plan the structure of your personal webpage (this is how web developers work in industry).

What to submit

• Option A: A clear photo of a hand-drawn outline, OR
• Option B: A text file named outline.txt

Outline requirements

Your outline must show the order of your webpage and include:

• A top title area (H1)
• All content sections required (each will have a heading)

Example outline (text)

Top
- H1: My Personal Homepage

Section 1: About Me
- 1 paragraph with formatting

Section 2: Image
- Image + alt + source/credit (if needed) 
+ short explanation what the image represents and why it is meaningful to you.

Section 3: Lists
- UL + OL + nested list + short explanation what lists will be

Section 4: Favorites Table
- thead + tbody + rowspan/colspan + short explanation describing what the lists contain

Section 5: External Link
- link to a meaningful website + short explanation describing what the link is.

Stage 2: HTML implementation (personal webpage) (70 points)

Step 1: Create Your First Webpage

Here is the basic HTML structure:

			<!DOCTYPE HTML>
			<html charset="UTF-8">
			<head>
   				 <meta charset="UTF-8">
    				 <meta name="viewport" content="width=device-width, initial-scale=1.0">
   				 <title> </title>
			</head>
			<body>
				
			</body>
			</html>

Step 2: Complete Webpage

Your webpage should include the following components:

1. Title

Add a title to your webpage in the head section (e.g., "John Doe's Homepage").

2. Introduction Paragraph

Please write a paragraph to introduce yourself. In your paragraph, include details such as your name, where you're from, your academic interests, and what you're passionate about. You can also mention your hobbies, goals, or anything that helps others get to know you better. This is your chance to share a little bit about yourself with your webpage visitors, so feel free to include any interesting personal information you'd like to highlight!

3. Image

Please display an image that represents something you love or find meaningful, such as your favorite photo, artwork, or a picture of a place you like. You can resize the image using the width and height attributes to adjust its dimensions to fit your webpage properly. You may use an online image or a local file (if using a local image, make sure to upload it with your submission). If you use an image from the internet or download it from a website, make sure to give credit to the original creator and follow copyright rules by mentioning where the image is from.

4. Hyperlink

Please add a hyperlink to your favorite website. A hyperlink allows users to navigate to another webpage when they click on the link. Ensure the link is clearly labeled and directs to an external website of your choice.

5. List

Please create a bulleted list of your hobbies, interests, or foods you enjoy. You can include any activities, sports, interests, or foods that you like. Be sure to use a different bullet style other than the default one.

6. Table

Please include a table that lists your favorite movies, books, songs, TV shows, or any other things that you love. For example:

Movie Title	Director	Year
The God Father	Francis Ford Coppola	1972
Forrest Gump	Robert Zemeckis	1994

7. Bookmark

Please add a bookmark at the bottom of your webpage to allow users to quickly navigate back to the top of your webpage. This will improve the user experience, especially for longer pages.

8. Headings

Please use different heading tags (e.g., <h1>, <h2>, etc.) to separate each part of your webpage. Use headings with varying levels of importance.

9. Text Formatting

Please apply formatting (e.g., bold, italic, marked) to highlight important content or sections of your webpage.

10. Comments

Please add the necessary comments to your webpage, explaining different sections or components.

Stage 3: Reflection (10 points)

At the bottom of your Stage 1 outline, include a section titled Reflection Answer each question in 2–3 sentences:

What changed between your Stage 1 outline and your final HTML? Why did you change it?
What was the hardest part to implement correctly, and why?
Describe one mistake you made and how you fixed it.

Submit

Submit the following to D2L:

• Stage 1 + Stage 3: Photo of your outline OR outline.txt (includes the Reflection section)
• Stage 2: ola1.html
• If you used a local image, submit the image file too.

Grading

Stage	Component	Description	Points
Stage 1	Structure Outline	Hand-drawn or text outline showing planned HTML structure	20
Stage 2	HTML Implementation	Personal webpage implementation (see components below)	70
	Title	Title added in the <head> section and matches page content	5
	Introduction Paragraph	Personal introduction with meaningful content	8
	Image	Image included with proper source and credit (if required)	8
	Hyperlink	External hyperlink correctly labeled and working	8
	List	Bulleted list of hobbies, interests, or foods	8
	Table	Table with rows and columns listing favorites	10
	Bookmark	Working bookmark linking bottom of page to top	8
	Headings	Proper use of multiple heading levels	5
	Text Formatting	Use of bold, italic, and marked text	5
	Comments	HTML comments explaining page sections	5
Stage 3	Reflection	Clear reflection explaining changes and decisions	10
	Total		100

If you have any questions, please feel free to reach out to me at Xin.Yang@mtsu.edu or stop by my office in ROTC annex 113E.