Physical Address
304 North Cardinal St.
Dorchester Center, MA 02124
What was this all about?
This first activity was our entry point into web development. It was all about learning the absolute basics of HTML (HyperText Markup Language)—the code used to build and structure every single webpage you see online. Think of HTML like the skeleton of a website.
Our goal was simple: create several small, basic webpages and then link them all together on one main page.
Showing the Final Look (The Output)
This screenshot shows the main page I built to bring all the exercises together.
As you can see, the page is clearly organized:
- A list of links: These links take you to the six individual exercises I created. I made them open in a new tab so they don’t cover up the main page.
- Embedded Previews: Right below the links, I used a special technique to show a live preview of what each of those separate pages looks like without having to click away. This makes it easy to see all the work at a glance!
The whole point here was to demonstrate that I could create simple content and organize it well on a main page.
Taking a Peek at the Code
This next picture is a screenshot of the actual HTML code I wrote for that main index page. This is the “behind the scenes” part.
Let’s break down a few important sections of this code:
1. Creating the Navigation List (Lines 30-36)
- The Goal: I needed a simple, bulleted list of links.
- The Code: I used the
<ul>tag (which stands for Unordered List) to start the list and<li>(which stands for List Item) for each link. - The Magic Link Tag: For each item, I used the
<a>tag (the Anchor tag, which makes links) and thehrefattribute to tell the browser where to go (e.g.,activity1/basic1.html). - The New Tab Trick: I also added
target="_blank". This is what forces the link to open in a completely new browser tab, which is great for user experience!
2. Embedding the Previews (Lines 41 onwards)
- The Goal: I wanted the output of the small exercise pages to appear directly inside the main page.
- The Code: I used the
<iframe>tag. This is a special tag that essentially creates a little “window” inside your webpage and loads another entire webpage into it. - The Result: This allowed me to showcase all my work on one scrolling page, making the presentation clean and organized.
What I Took Away From This Activity
This project was fundamental. Here are the three most important things I learned:
- The HTML Skeleton: I got comfortable with the essential tags every page needs:
<html>(tells the browser it’s HTML),<head>(where settings go, like the page title), and<body>(where all the visible content goes). - Linking is Key: I mastered the simple but powerful
<a>tag. Learning how to connect multiple pages usinghrefis what truly makes a collection of documents a “website.” - Organizing Content: I learned how lists (
<ul>,<ol>) and embedding content (<iframe>) are used to create structure and a good layout, making the website easy for visitors to use and navigate.
