GGSIPU BCA 107 Web Technologies by Sanjeev Yadav IBM

Introduction
Welcome to the Pure HTML Long Weekend Challenge! Before we make things look pretty with CSS or interactive with JavaScript, we need to master the skeleton of the web. Your challenge this weekend is to build a complete, text-based webpage using only the structural tags below.

Step 1: The Skeleton
Every HTML page needs a foundation.
Example 1: The Basic Structure

<!–>

<!DOCTYPE html>
<html>
<head>
    <title>My Weekend Project</title>
</head>
<body>
    <!-- All your content goes here -->
</body>
</html>

Student Action: Open Notepad or your code editor and type this out. Do not copy-paste! Muscle memory is key.

Step 2: Headings and Text
HTML uses 6 levels of headings (<h1> to <h6>) and paragraph tags (<p>) to organize text logically.
Example 2: Text Formatting

<!–>

<h1>My Favorite Hobbies</h1>
<h2>Why I love them</h2>
<p>This weekend, I am building my first pure HTML page to showcase what I enjoy doing in my free time.</p>

Student Action: Create an <h1> for your page title, and write a short <p> explaining what your page is about.

Step 3: Getting Organized with Lists
We use Unordered (bulleted) and Ordered (numbered) lists to group related items.
Example 3: Unordered List

<!–>

<h3>Things I need to learn:</h3>
<ul>
    <li>HTML tags</li>
    <li>Folder structure</li>
    <li>File saving</li>
</ul>

Student Action: Add a list (ordered or unordered) of your top 3 favorite movies, books, or games to your page.

Step 4: Connecting the Web (Links)
The web is all about connections. We create hyperlinks using the anchor <a> tag.
Example 4: Adding a Hyperlink

<!–>

<p>Check out our college website: <a href="https://ggsipu.dspsr.in/">DSPSR</a></p>

Student Action: Add at least two links to your page pointing to your favorite websites or coding resources.

Step 5: Adding Media (Images)
A page needs visuals! The <img> tag is unique because it is self-closing and relies on attributes to work.
Example 5: Inserting an Image

<!–>

<img src="my-photo.jpg" alt="A picture of me coding" width="300">

Student Action: Save a .jpg or .png file in the exact same folder as your HTML file and display it on your page. Don’t forget the alt text!

Step 6: Structuring Data (Tables)
Tables are excellent for displaying rows and columns of rigid data.
Example 6: A Basic Table

<!–>

<table border="1">
    <tr>
        <th>Day</th>
        <th>Activity</th>
    </tr>
    <tr>
        <td>Saturday</td>
        <td>Writing HTML code</td>
    </tr>
    <tr>
        <td>Sunday</td>
        <td>Testing links and images</td>
    </tr>
</table>

Student Action: Create a table showing your study schedule or a timetable for this long weekend.

The Long Weekend Challenge!

Your Task: Combine all 6 examples above to create a comprehensive “Personal Bio” or “My Top 10 Things” webpage. To pass this challenge, your final .html file must include:

1. A proper HTML skeleton.

2. At least two heading levels and descriptive paragraphs.

3. One ordered or unordered list.

4. Two working hyperlinks.

5. One image that loads correctly (check your file paths!).

6. A data table with at least 3 rows.