Lab Practical 1: Hello World Html Program

  1. Title:- To write a program for showing Hello World on the web browswer

  2. Outcome:-

Must be able to learn to basic html tags

  1. Description about experiment** : -**

Html program that shows hello world in the browser

Syntax & keywords: -

Syntax: -

…

Keywords: - <!Doctype>
  1. Solution of the instant problem

4.1 Algorithm

Step 1: Open the text editor of your choice

Step 2: Write the html code in a file

Step 3: Open the file in the browser

4.2. Program


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple HTML Page</title>
</head>
 <body>
 <h1>Hello World!</h1>
 <p>This is a simple paragraph.</p>
 </body>
</html>

4.3 Result with screen sort.

Simple HTML Page

Hello World!

This is a simple paragraph.

Lab Practical 2: Using Headings and paragraphs

  1. Title:- To write a program for Using Headings and paragraphs

  2. Outcome:-

Must be able to learn to basic html tags

  1. Description about experiment** : -**

Html program that shows headings and paragraphs in the browser

Syntax & keywords: -

Syntax: -

…

Keywords: - <!Doctype>
  1. Solution of the instant problem

4.1 Algorithm

Step 1: Open the text editor of your choice

Step 2: Write the html code in a file

Step 3: Open the file in the browser

4.2. Program

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple HTML Page</title>
</head>
<body>
    <h1>Heading Level 1</h1>
    <p>This is a paragraph of text.</p>
    
    <h2>Heading Level 2</h2>
    <p>Another paragraph goes here.</p>
    
    <h3>Heading Level 3</h3>
    <p>And yet another paragraph.</p>
    
    <h4>Heading Level 4</h4>
    <p>One more paragraph for this heading.</p>
    
    <h5>Heading Level 5</h5>
    <p>Another small paragraph.</p>
    
    <h6>Heading Level 6</h6>
    <p>The last paragraph on this page.</p>
</body>
</html>

4.3 Result with screen sort.

Simple HTML Page

Heading Level 1

This is a paragraph of text.

Heading Level 2

Another paragraph goes here.

Heading Level 3

And yet another paragraph.

Heading Level 4

One more paragraph for this heading.

Heading Level 5

Another small paragraph.

Heading Level 6

The last paragraph on this page.

Lab Practical 3: Create html page using headings, paragraphs and text formatting tags within the paragraph

  1. Title:- To Create html page using headings, paragraphs and text formatting tags within the paragraph

  2. Outcome:-

Must be able to learn to basic html tags

  1. Description about experiment** : -**

Html program that shows headings and paragraphs in the browser

Syntax & keywords: -

Syntax: -

…

Keywords: - <!Doctype>
  1. Solution of the instant problem

4.1 Algorithm

Step 1: Open the text editor of your choice

Step 2: Write the html code in a file

Step 3: Open the file in the browser

4.2. Program

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meaningful HTML Page</title>
</head>
<body>
    <h1>Welcome to Our Website</h1>
    
    <p>
       Somthing goes here <strong>This is a strong text.</strong> some other thing goes here
        <em>This is emphasized text.</em> something goes here <sub>subscript</sub> et <sup>superscript</sup> end.
    </p>
    
    <h2>About Us</h2>
    
    <p>
        We are a <u>company</u> dedicated to providing high-quality <abbr title="World Wide Web">WWW</abbr> solutions.
    </p>
    
    <h2>Our Services</h2>
    
    <p>
        <strong>Web Design:</strong> Creating beautiful and responsive websites.<br>
        <strong>Content Creation:</strong> Crafting engaging and informative content.<br>
        <strong>SEO:</strong> Optimizing websites for search engines.
    </p>
    
    <h2>Contact Information</h2>
    
    <p>
        Email: <a href="mailto:info@example.com">info@example.com</a><br>
        Phone: +1 (123) 456-7890<br>
        Website: <a href="https://www.example.com">www.example.com</a>
    </p>
</body>
</html>

4.3 Result with screen sort.

Meaningful HTML Page

Welcome to Our Website

Somthing goes here This is a strong text. some other thing goes here This is emphasized text. something goes here subscript et superscript end.

About Us

We are a company dedicated to providing high-quality WWW solutions.

Our Services

Web Design: Creating beautiful and responsive websites.
Content Creation: Crafting engaging and informative content.
SEO: Optimizing websites for search engines.

Contact Information

Email: info@example.com
Phone: +1 (123) 456-7890
Website: www.example.com

Lab Practical 4: Create HTML page using tags such as mark, bold, italic, underline, abbreviation, inserted, deleted tags

  1. Title:- To Create HTML page using tags such as mark, bold, italic, underline, abbreviation, inserted, deleted tags

  2. Outcome:-

Must be able to learn to basic html tags

  1. Description about experiment** : -**

Html program that shows text formatting in the browser

Syntax & keywords: -

Syntax: -

…

Keywords: - <!Doctype>
  1. Solution of the instant problem

4.1 Algorithm

Step 1: Open the text editor of your choice

Step 2: Write the html code in a file

Step 3: Open the file in the browser

4.2. Program

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text Formatting Example</title>
</head>
<body>
    <h1>Text Formatting Examples</h1>
    
    <p>
        This is a <mark>highlighted</mark> text. You can use the <mark>mark</mark> element to highlight important words or phrases.
    </p>
    
    <p>
        <strong>This is bold text.</strong> You can use the <strong>strong</strong> element to make text bold.
    </p>
    
    <p>
        <em>This is italicized text.</em> You can use the <em>em</em> element to italicize text.
    </p>
    
    <p>
        <u>This is underlined text.</u> You can use the <u>u</u> element to underline text.
    </p>
    
    <p>
        <abbr title="Hypertext Markup Language">HTML</abbr> is an abbreviation. You can use the <abbr>abbr</abbr> element with a "title" attribute to define abbreviations.
    </p>
    
    <p>
        <ins>This is inserted text.</ins> You can use the <ins>ins</ins> element to indicate text that has been inserted into a document.
    </p>
    
    <p>
        <del>This is deleted text.</del> You can use the <del>del</del> element to indicate text that has been removed or deleted from a document.
    </p>
</body>
</html>

4.3 Result with screen sort.

Text Formatting Example

Text Formatting Examples

This is a highlighted text. You can use the mark element to highlight important words or phrases.

This is bold text. You can use the strong element to make text bold.

This is italicized text. You can use the em element to italicize text.

This is underlined text. You can use the u element to underline text.

HTML is an abbreviation. You can use the abbr element with a “title” attribute to define abbreviations.

This is inserted text. You can use the ins element to indicate text that has been inserted into a document.

This is deleted text. You can use the del element to indicate text that has been removed or deleted from a document.

Lab Practical 5: Create HTML page using anchor and hyperlink tags.

  1. Title:- To Create HTML page using using anchor and hyperlink tags.

  2. Outcome:-

Must be able to learn to basic html tags

  1. Description about experiment** : -**

Html program that shows links in the browser

Syntax & keywords: -

Syntax: -

…

Keywords: - <!Doctype>
  1. Solution of the instant problem

4.1 Algorithm

Step 1: Open the text editor of your choice

Step 2: Write the html code in a file

Step 3: Open the file in the browser

4.2. Program

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meaningful HTML Page with Links</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            margin: 20px;
            padding: 20px;
        }

        p {
            font-size: 16px;
            line-height: 1.5;
            color: #333;
        }

        a {
            text-decoration: none;
            color: #0078d4;
        }

        a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <h1>Welcome to Our Website</h1>
    
    <p>
        Welcome to our website! Here are some important links to various sections of our site:
    </p>
    
    <a href="#about" target="_self">About Us</a><br>
    <a href="#services" target="_self">Our Services</a><br>
    <a href="#contact" target="_self">Contact Us</a><br>
    
    <h2 id="about">About Us</h2>
    
    <p>
        We are a company dedicated to providing high-quality services to our clients. <a href="#contact" target="_self">Contact us</a> to learn more.
    </p>
    
    <h2 id="services">Our Services</h2>
    
    <p>
        Explore our wide range of services:<br>
        <a href="web-design.html" target="_blank">Web Design</a><br>
        <a href="content-creation.html" target="_blank">Content Creation</a><br>
        <a href="seo-services.html" target="_blank">SEO Services</a>.
    </p>
    
    <h2 id="contact">Contact Us</h2>
    
    <p>
        You can reach us via email at <a href="mailto:info@example.com" target="_self">info@example.com</a> or by phone at +1 (123) 456-7890.
    </p>
</body>
</html>

4.3 Result with screen sort.

Meaningful HTML Page with Links

Welcome to Our Website

Welcome to our website! Here are some important links to various sections of our site:

About Us
Our Services
Contact Us

About Us

We are a company dedicated to providing high-quality services to our clients. Contact us to learn more.

Our Services

Explore our wide range of services:
Web Design
Content Creation
SEO Services.

Contact Us

You can reach us via email at info@example.com or by phone at +1 (123) 456-7890.

Lab Practical 6: Create HTML page using ordered and unordered list tags.

  1. Title:- To Create HTML page using using list tags.

  2. Outcome:-

Must be able to learn to basic html tags

  1. Description about experiment** : -**

Html program that shows list in the browser

Syntax & keywords: -

Syntax: -

…

Keywords: - <!Doctype>
  1. Solution of the instant problem

4.1 Algorithm

Step 1: Open the text editor of your choice

Step 2: Write the html code in a file

Step 3: Open the file in the browser

4.2. Program

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meaningful HTML Page with Lists</title>
</head>
<body>
    <h1>Welcome to Our Website</h1>
    
    <p>
        Welcome to our website! Here's some information about our services and offerings:
    </p>
    
    <h2>About Us</h2>
    
    <p>
        We are a company dedicated to providing a wide range of services to our clients. Our key offerings include:
    </p>
    
    <ul>
        <li>Web Design</li>
        <li>Content Creation</li>
        <li>SEO Services</li>
    </ul>
    
    <h2>Our Team</h2>
    
    <p>
        Meet our talented team members who work diligently to deliver the best results:
    </p>
    
    <ul>
        <li>
            <h3>John Doe</h3>
            <p>Web Designer</p>
        </li>
        <li>
            <h3>Jane Smith</h3>
            <p>Content Creator</p>
        </li>
        <li>
            <h3>David Johnson</h3>
            <p>SEO Specialist</p>
        </li>
    </ul>
    
    <h2>Contact Us</h2>
    
    <p>
        If you have any questions or need assistance, feel free to reach out to us:
    </p>
    
    <ul>
        <li>Email: <a href="mailto:info@example.com">info@example.com</a></li>
        <li>Phone: +1 (123) 456-7890</li>
    </ul>
</body>
</html>

4.3 Result with screen sort.

Meaningful HTML Page with Lists

Welcome to Our Website

Welcome to our website! Here’s some information about our services and offerings:

About Us

We are a company dedicated to providing a wide range of services to our clients. Our key offerings include:

Our Team

Meet our talented team members who work diligently to deliver the best results:

Contact Us

If you have any questions or need assistance, feel free to reach out to us:

Lab Practical 7: Create HTML page using description list tags.

  1. Title:- To Create HTML page using description list tags.

  2. Outcome:-

Must be able to learn to basic html tags

  1. Description about experiment** : -**

Html program that shows description list in the browser

Syntax & keywords: -

Syntax: -

…

Keywords: - <!Doctype>
  1. Solution of the instant problem

4.1 Algorithm

Step 1: Open the text editor of your choice

Step 2: Write the html code in a file

Step 3: Open the file in the browser

4.2. Program

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meaningful HTML Page with Description Lists</title>
</head>
<body>
    <h1>Welcome to Our Website</h1>
    
    <p>
        Welcome to our website! Here's some information about our services and offerings:
    </p>
    
    <h2>About Us</h2>
    
    <p>
        We are a company dedicated to providing a wide range of services to our clients. Our key offerings include:
    </p>
    
    <dl>
        <dt>Web Design</dt>
        <dd>Creating stunning and responsive websites.</dd>
        
        <dt>Content Creation</dt>
        <dd>Developing engaging and informative content.</dd>
        
        <dt>SEO Services</dt>
        <dd>Optimizing websites for search engines.</dd>
    </dl>
    
    <h2>Our Team</h2>
    
    <p>
        Meet our talented team members who work diligently to deliver the best results:
    </p>
    
    <dl>
        <dt>John Doe</dt>
        <dd>Web Designer</dd>
        
        <dt>Jane Smith</dt>
        <dd>Content Creator</dd>
        
        <dt>David Johnson</dt>
        <dd>SEO Specialist</dd>
    </dl>
    
    <h2>Contact Us</h2>
    
    <p>
        If you have any questions or need assistance, feel free to reach out to us:
    </p>
    
    <dl>
        <dt>Email</dt>
        <dd><a href="mailto:info@example.com">info@example.com</a></dd>
        
        <dt>Phone</dt>
        <dd>+1 (123) 456-7890</dd>
    </dl>
</body>
</html>

4.3 Result with screen sort.

Meaningful HTML Page with Description Lists

Welcome to Our Website

Welcome to our website! Here’s some information about our services and offerings:

About Us

We are a company dedicated to providing a wide range of services to our clients. Our key offerings include:

Web Design
Creating stunning and responsive websites.
Content Creation
Developing engaging and informative content.
SEO Services
Optimizing websites for search engines.

Our Team

Meet our talented team members who work diligently to deliver the best results:

John Doe
Web Designer
Jane Smith
Content Creator
David Johnson
SEO Specialist

Contact Us

If you have any questions or need assistance, feel free to reach out to us:

Email
info@example.com
Phone
+1 (123) 456-7890

Lab Practical 8: Create HTML Table with thead, tbody, tfoot, and captio

  1. Title:- To Create HTML Table with thead, tbody, tfoot, and captio

  2. Outcome:-

Must be able to learn to basic html tags

  1. Description about experiment** : -**

Html program that table in the browser

Syntax & keywords: -

Syntax: -

…

Keywords: - <!Doctype>
  1. Solution of the instant problem

4.1 Algorithm

Step 1: Open the text editor of your choice

Step 2: Write the html code in a file

Step 3: Open the file in the browser

4.2. Program

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meaningful HTML Page with Tables</title>

</head>
<body>
<table>
<caption>Table Title</caption> <!--| caption is the first child of table |-->
 <thead> <!--======================| thead is after caption |-->
 <tr>
 <th>Header content 1</th>
 <th>Header content 2</th>
 </tr>
 </thead>
 <tbody> <!--======================| tbody is after thead |-->
 <tr>
 <td>Body content 1</td>
 <td>Body content 2</td>
 </tr>
 </tbody>

</body>
</html>

4.3 Result with screen sort.

Meaningful HTML Page with Tables
Table Title
Header content 1 Header content 2
Body content 1 Body content 2

Lab Practical 9: Create HTML page using table tags

  1. Title:- To Create HTML page using table tags.

  2. Outcome:-

Must be able to learn to basic html tags

  1. Description about experiment** : -**

Html program that table in the browser

Syntax & keywords: -

Syntax: -

…

Keywords: - <!Doctype>
  1. Solution of the instant problem

4.1 Algorithm

Step 1: Open the text editor of your choice

Step 2: Write the html code in a file

Step 3: Open the file in the browser

4.2. Program

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meaningful HTML Page with Tables</title>
    <style>
        table {
            width: 80%;
            border-collapse: collapse;
            margin: 20px auto;
        }

        th, td {
            padding: 8px 12px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }

        th {
            background-color: #f2f2f2;
        }

        tr:hover {
            background-color: #f5f5f5;
        }

     
    </style>
</head>
<body>
    <h1>Product Catalog</h1>
    
    <table>
        <tr>
            <th>Product ID</th>
            <th>Product Name</th>
            <th>Price</th>
            <th>Stock</th>
        </tr>
        <tr>
            <td>101</td>
            <td>Widget A</td>
            <td>$10.99</td>
            <td>50</td>
        </tr>
        <tr>
            <td>102</td>
            <td>Widget B</td>
            <td>$12.49</td>
            <td>30</td>
        </tr>
        <tr>
            <td>103</td>
            <td>Widget C</td>
            <td>$8.99</td>
            <td>75</td>
        </tr>
    </table>
</body>
</html>

4.3 Result with screen sort.

Meaningful HTML Page with Tables

Product Catalog

32

Product ID Product Name Price Stock
101 Widget A $10.99 50
102 Widget B $12.49 30
103 Widget C $8.99 75

Lab Practical 10: Create HTML page using div and span tags

  1. Title:- To Create HTML page using div and span tags

  2. Outcome:-

Must be able to learn to basic html tags

  1. Description about experiment** : -**

Html program that table in the browser

Syntax & keywords: -

Syntax: -

…

Keywords: - <!Doctype>
  1. Solution of the instant problem

4.1 Algorithm

Step 1: Open the text editor of your choice

Step 2: Write the html code in a file

Step 3: Open the file in the browser

4.2. Program

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meaningful HTML Page with Divs and Spans</title>
    <style>
        /* Style for div elements */
        .section {
            background-color: #f2f2f2;
            padding: 20px;
            margin: 10px;
            border: 1px solid #ccc;
        }

        /* Style for span elements */
        .highlight {
            color: red;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>Welcome to Our Website</h1>
    
    <div class="section">
        <h2>About Us</h2>
        <p>
            <span class="highlight">We are a company</span> dedicated to providing high-quality services to our clients. 
            Our team consists of experts in various fields who work together to deliver outstanding results.
        </p>
    </div>
    
    <div class="section">
        <h2>Our Services</h2>
        <ul>
            <li>Web Design</li>
            <li>Content Creation</li>
            <li><span class="highlight">SEO Services</span></li>
        </ul>
    </div>
    
    <div class="section">
        <h2>Contact Us</h2>
        <p>
            You can <span class="highlight">contact us</span> via email at 
            <a href="mailto:info@example.com">info@example.com</a> or by phone at 
            <span class="highlight">+1 (123) 456-7890</span>.
        </p>
    </div>
</body>
</html>

4.3 Result with screen sort.

Lab Practical 11: Create HTML page that demonstrates various HTML form tags and their properties:

  1. Title:- To Create HTML page that demonstrates various HTML form tags and their properties:

  2. Outcome:-

Must be able to learn to basic html tags

  1. Description about experiment** : -**

Html program that table in the browser

Syntax & keywords: -

Syntax: -

…

Keywords: - <!Doctype>
  1. Solution of the instant problem

4.1 Algorithm

Step 1: Open the text editor of your choice

Step 2: Write the html code in a file

Step 3: Open the file in the browser

4.2. Program

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Form Example</title>
</head>
<body>
    <h1>Contact Us</h1>
    
    <form action="submit.php" method="post">
        <fieldset>
            <legend>Contact Information</legend>
            <label for="name">Name:</label>
            <input type="text" id="name" name="name" required><br>

            <label for="email">Email:</label>
            <input type="email" id="email" name="email" required><br>

            <label for="phone">Phone:</label>
            <input type="tel" id="phone" name="phone"><br>

            <label for="message">Message:</label><br>
            <textarea id="message" name="message" rows="4" cols="50" required></textarea><br>
        </fieldset>

        <fieldset>
            <legend>Additional Information</legend>
            <label>Gender:</label>
            <input type="radio" id="male" name="gender" value="male">
            <label for="male">Male</label>
            <input type="radio" id="female" name="gender" value="female">
            <label for="female">Female</label><br>

            <label>Hobbies:</label>
            <input type="checkbox" id="hobby1" name="hobbies" value="reading">
            <label for="hobby1">Reading</label>
            <input type="checkbox" id="hobby2" name="hobbies" value="sports">
            <label for="hobby2">Sports</label>
            <input type="checkbox" id="hobby3" name="hobbies" value="music">
            <label for="hobby3">Music</label><br>

            <label for="country">Country:</label>
            <select id="country" name="country">
                <option value="usa">United States</option>
                <option value="canada">Canada</option>
                <option value="uk">United Kingdom</option>
                <option value="other">Other</option>
            </select><br>

            <label for="newsletter">Subscribe to Newsletter:</label>
            <input type="checkbox" id="newsletter" name="newsletter" checked><br>
        </fieldset>

        <input type="submit" value="Submit">
    </form>
</body>
</html>

4.3 Result with screen sort.

HTML Form Example

Contact Us

Contact Information





Additional Information