Experiment 1: HTML Headings

Objective

Demonstrate hierarchical content organization using HTML heading elements (h1-h6).

Procedure

Create a basic HTML document structure
Implement six heading levels using <h1> to <h6>
Observe default browser styling differences

Code Implementation

<h1>Main Title (h1)</h1>
<h2>Section Heading (h2)</h2>
<h3>Subsection (h3)</h3>
<h4>Sub-subsection (h4)</h4>
<h5>Minor Heading (h5)</h5>
<h6>Meta Heading (h6)</h6>

Key Concepts

Semantic HTML structure
Accessibility considerations
SEO implications

Experiment 2: HTML Lists

Objective

Implement ordered and unordered lists to present structured information.

Procedure

Create unordered list with <ul>
Create ordered list with <ol>
Implement nested list structures

Code Implementation

<!-- Unordered List -->
<ul>
  <li>Web Technologies
    <ul>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </li>
</ul>

<!-- Ordered List -->
<ol type="A">
  <li>First Item</li>
  <li>Second Item</li>
</ol>

Key Concepts

List type attributes
Nested list structures
Semantic content grouping

Experiment 3: Traditional Newspaper Layout

Objective

Learn how to create a simple newspaper layout using HTML tables to structure content.

Procedure

Create a table structure using <table>
Define table headers using <th> for headings like headline and date
Use <tr> for table rows and <td> for data cells

Code Implementation

<table border="1" width="100%">
    <tr>
        <th>Headline</th>
        <th>Date</th>
    </tr>
    <tr>
        <td>Breaking News: WebTech Lab!</td>
        <td>2025-02-05</td>
    </tr>
</table>

Key Concepts

HTML table structure
Table headers and rows
Use of <th> and <td> tags

Experiment 4: Image Tag

Objective

Learn how to display images using the <img> tag in HTML.

Procedure

Use the <img> tag to display images.
Define the image source with the src attribute.
Set the image width and height.

Code Implementation

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

    <h2>Displaying an Image with Content</h2>
    <p>Below is an example of displaying an image using the <img> tag.</p>

    <img src="https://onedaystudy.online/uploaded_files/aAqgsiCaLauYwljIEuGH.png" alt="Sample Image" width="350" height="200">

    <p>This is a sample image demonstrating the use of the <img> tag in HTML.</p>

</body>
</html>

Key Concepts

Image source and alternative text.
Setting image size with width and height.
Importance of accessibility with the alt text.

Experiment: Using Anchor Tag for Menus

Objective

Learn how to use the <a> tag to create navigation menus in HTML.

Procedure

Use the <a> tag to create links.
Provide the href attribute to specify the destination.
Style the menu for better presentation.

Code Implementation

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Menu Navigation</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        .menu {
            background-color: #333;
            padding: 10px;
        }
        .menu a {
            color: white;
            text-decoration: none;
            padding: 10px 15px;
            display: inline-block;
        }
        .menu a:hover {
            background-color: #575757;
        }
    </style>
</head>
<body>

    <h2>Website Navigation Menu</h2>
    <div class="menu">
        <a href="home.html">Home</a>
        <a href="about.html">About</a>
        <a href="services.html">Services</a>
        <a href="contact.html">Contact</a>
    </div>

    <p>Click on the menu items to navigate to different sections of the website.</p>

</body>
</html>

Key Concepts

Using the <a> tag to create hyperlinks.
Setting up navigation menus with anchor links.
Adding hover effects for better user experience.

Experiment 6: Image Map

Objective

Learn how to use an image map to create clickable areas within an image that correspond to different links.

Procedure

Use the <map> tag to define clickable areas.
Use the <area> tag to define each clickable region and its corresponding link.
Use coords to specify the coordinates of the clickable areas on the image.

Code Implementation

<img src="image.jpg" usemap="#equipmentMap" alt="Sports Equipment" width="600" height="400">
<map name="equipmentMap">
    <area shape="rect" coords="30,50,100,100" href="bat.htm" alt="Bat">
    <area shape="rect" coords="120,50,190,100" href="ball.htm" alt="Ball">
    <area shape="rect" coords="200,50,270,100" href="st.htm" alt="Stump">
</map>

Key Concepts

Image maps with clickable areas using the <map> and <area> tags
Defining coordinates for clickable areas with coords
Creating interactive content using image maps

Experiment 7: Frames for City Details

Objective

Create frames to display information about various cities and allow interaction between the frames.

Procedure

Use the <frameset> tag to create a layout with multiple frames.
Include a frame for city list navigation and another frame for showing city details.
Use target attribute to load content into the city details frame.

Code Implementation

<frameset rows="30%,70%">
    <frame src="city_list.htm" name="cityList">
    <frame src="default_city.htm" name="cityDetails">
</frameset>

Key Concepts

Using <frameset> to organize content into multiple frames
Linking frames together using target
Displaying different content for each city in a dedicated frame

Experiment 8: Restaurant Food Form

Objective

Learn how to create a form using checkboxes to allow users to select multiple food items from a restaurant menu.

Procedure

Create a form using the <form> tag.
Use <input type="checkbox"> to allow users to select multiple food options.
Provide a submit button to send the selected options.

Code Implementation

<form action="" method="POST">
    <label>Pizza</label>
    <input type="checkbox" name="food" value="Pizza">
    
    <label>Pasta</label>
    <input type="checkbox" name="food" value="Pasta">
    
    <label>Burger</label>
    <input type="checkbox" name="food" value="Burger">
    
    <input type="submit" value="Submit">
</form>

Key Concepts

Using checkboxes in a form to allow multiple selections
Creating a form submission to process selected food items
Utilizing name and value attributes in form controls

Experiment 9: Auto Reload Page

Objective

Learn how to automatically reload a webpage every 5 seconds using the meta tag.

Procedure

Use the <meta> tag with the http-equiv="refresh" attribute to refresh the page.
Set the content attribute to define the time interval for the refresh.

Code Implementation

<meta http-equiv="refresh" content="5">

Key Concepts

Using the <meta> tag for auto-refreshing the page
Setting the content attribute to specify the time interval
Page auto-reloading techniques

Experiment 10: CSS Styling

Objective

Learn how to style a webpage using CSS to change the background color, font, and paragraph appearance.

Procedure

Set a background color using the background-color property.
Change the font family using the font-family property.
Style paragraphs with line-height and font-size.

Code Implementation

<style>
body {
    background-color: lightblue;
    font-family: Arial, sans-serif;
}

p {
    font-size: 18px;
    line-height: 1.5;
}
</style>

Key Concepts

Setting the background-color property in CSS
Customizing the font using font-family
Improving paragraph readability with line-height