🌐 Virtual Laboratory: Introduction to HTML

Undergraduate Computer Networks Course | Interactive Learning Environment

🎯 Laboratory Objectives

Upon completion of this virtual laboratory, students will be able to:

1. Understand HTML Structure

Explain the basic structure of HTML documents and the role of DOCTYPE, html, head, and body elements.

2. Apply HTML Tags

Use common HTML tags including headings, paragraphs, lists, links, images, and tables correctly.

3. Create Forms

Design interactive forms using various input types and understand form attributes.

4. Build Web Pages

Construct semantic HTML documents following web standards and best practices.

5. Validate HTML

Check HTML code for errors and ensure compliance with W3C standards.

6. Understand DOM

Visualize and comprehend the Document Object Model tree structure.

📚 Theory and Fundamentals

What is HTML?

HTML (HyperText Markup Language) is the standard markup language for documents designed to be displayed in a web browser. It defines the structure and content of web pages using a system of tags and attributes. HTML is not a programming language; it is a markup language that uses "markup" to annotate text, images, and other content for display in a Web browser.

Key Concept: HTML documents are composed of HTML elements represented by tags, written using angle brackets. Tags such as <img> and <input> introduce content into the page directly. Other tags like <p> surround and provide information about document text and may include other tags as sub-elements.

HTML Document Structure

<!DOCTYPE html> <html> <head> <title>Page Title</title> <meta charset="UTF-8"> </head> <body> <h1>Main Heading</h1> <p>Paragraph content...</p> </body> </html>

Essential HTML Elements

📰

Headings

<h1> to <h6>

📝

Paragraphs

<p>

🔗

Links

<a>

🖼️

Images

<img>

📋

Lists

<ul>, <ol>, <li>

📊

Tables

<table>, <tr>, <td>

📮

Forms

<form>, <input>

🏗️

Semantic

<header>, <nav>, <main>

Common Attributes

Attribute Description Example
class Specifies one or more class names for an element <div class="container">
id Specifies a unique id for an element <div id="header">
style Specifies inline CSS styles <p style="color:red;">
href Specifies the URL of a link <a href="https://example.com">
src Specifies the source of an image or media <img src="photo.jpg">
alt Specifies alternative text for images <img alt="Description">

🔬 HTML Code Simulator Interactive

Write HTML code in the editor below and see the live preview instantly. Experiment with different tags and attributes!

📝 HTML Editor
👁️ Live Preview

🌳 DOM Tree Visualizer

Visualize how the browser interprets your HTML as a Document Object Model (DOM) tree structure.

document
<html>
<head>
<title> My First Page </title>
<body>
<h1> Welcome to HTML! </h1>
<p> This is a paragraph. </p>
<a> Click here </a>

🛠️ Practical Exercises

Exercise 1: Personal Profile Page

Easy

Create a simple personal profile page using the following requirements:

  • Use proper HTML5 document structure
  • Include a main heading with your name
  • Add a paragraph describing yourself
  • Include an unordered list of your hobbies
  • Add a link to your favorite website

Exercise 2: Course Registration Form

Medium

Design a course registration form with the following elements:

  • Text input for student name (required)
  • Email input field with validation
  • Radio buttons for selecting course (CS, EE, ME)
  • Dropdown menu for semester selection
  • Checkbox for terms and conditions
  • Submit and Reset buttons

Exercise 3: Data Table with Semantics

Medium

Create a student grade table using semantic HTML:

  • Use <thead>, <tbody>, and <tfoot>
  • Include columns: Student ID, Name, Subject, Grade
  • Add at least 5 rows of data
  • Use <th> for header cells
  • Add a caption describing the table

Exercise 4: Semantic Blog Layout

Hard

Build a complete blog page using semantic HTML5 elements:

  • <header> with navigation menu (<nav>)
  • <main> containing <article> with <section>s
  • <aside> for sidebar content
  • <footer> with copyright information
  • Proper use of heading hierarchy (h1-h3)

🧠 Knowledge Check

1. What does HTML stand for?

A) Hyper Text Making Language
B) HyperText Markup Language
C) High Tech Modern Language
D) Hyper Transfer Markup Language

2. Which tag is used to define the main content of an HTML document?

A) <content>
B) <main> and <body>
C) <body>
D) <section>

3. What is the correct HTML element for inserting a line break?

A) <lb>
B) <break>
C) <br>
D) <newline>

4. Which attribute is used to specify alternative text for an image?

A) title
B) alt
C) description
D) text

5. What is the purpose of the <!DOCTYPE html> declaration?

A) To link to external CSS files
B) To declare the document type and HTML version
C) To start the JavaScript execution
D) To create a comment

⚗️ Detailed Laboratory Procedure

Pre-Lab Requirements: Before starting this laboratory, ensure you have a modern web browser installed (Chrome, Firefox, Safari, or Edge) and a text editor (VS Code, Sublime Text, or Notepad++ recommended). Familiarize yourself with basic computer operations and file management.

Phase 1: Preparation and Setup (15 minutes)

1 Environment Setup 5 min

Open this virtual laboratory in your web browser. Alternatively, create a working folder on your computer named "HTML_Lab" where you will save all your exercise files. Open your preferred text editor.

2 Browser Configuration 5 min

Open your web browser and enable developer tools (usually F12 or Ctrl+Shift+I). Familiarize yourself with the Elements tab, which shows the rendered HTML structure. This will be useful for debugging.

3 Understanding the Interface 5 min

Explore this virtual laboratory interface. Locate the HTML Code Simulator, theory sections, and exercise areas. Understand how to switch between different templates (Basic, Forms, Tables, Media).

Phase 2: Basic HTML Structure (30 minutes)

4 Creating Your First HTML Document 10 min

In the simulator, clear the editor and type the basic HTML5 structure:

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

Click "Run Code" and observe the blank page. Check the browser tab title.

5 Adding Content Elements 10 min

Inside the <body> tag, add the following elements one by one, running the code after each addition:

  • A main heading (<h1>) with text "HTML Laboratory"
  • A subheading (<h2>) with your name and student ID
  • Two paragraphs (<p>) describing what you expect to learn
  • A horizontal rule (<hr>) to separate sections

Observe how each element renders differently in the browser.

6 Text Formatting 10 min

Create a new paragraph and experiment with text formatting tags:

  • <strong> or <b> for bold text
  • <em> or <i> for italic text
  • <mark> for highlighted text
  • <del> for deleted text
  • <sub> and <sup> for subscript and superscript

Document your observations about visual differences between semantic tags (<strong>) and presentational tags (<b>).

Phase 3: Links and Images (25 minutes)

7 Creating Hyperlinks 10 min

Add navigation to your page:

  • Create an absolute link to your university website using <a href="URL">
  • Create a relative link (simulate by linking to #section1)
  • Create an email link using mailto: protocol
  • Add the target="_blank" attribute to open links in new tabs
  • Style links using title attributes for tooltips

Test all links and observe browser behavior.

8 Embedding Images 10 min

Practice image insertion:

  • Use <img> tag with src attribute pointing to an online image URL
  • Always include descriptive alt text for accessibility
  • Set width and height attributes (try 300px width)
  • Create a figure with <figure> and <figcaption>
  • Intentionally break the src URL to see the alt text display
9 Image Mapping (Optional Advanced) 5 min

If time permits, research and implement a simple image map using <map> and <area> tags to create clickable regions on an image.

Phase 4: Lists and Tables (30 minutes)

10 Creating Lists 10 min

Add organized content using lists:

  • Create an unordered list (<ul>) of laboratory equipment
  • Create an ordered list (<ol>) of experimental steps
  • Change the list style type using type attribute (for <ol>: 1, A, a, I, i)
  • Create a nested list (list inside a list item)
  • Create a description list (<dl>) with terms and definitions
11 Building Data Tables 15 min

Construct a complex table:

  • Create a 4x4 table with border attribute
  • Use <thead>, <tbody>, and <tfoot> for structure
  • Implement colspan to merge cells horizontally
  • Implement rowspan to merge cells vertically
  • Add <caption> for table title
  • Style with <th> for headers vs <td> for data

Create a timetable or grade sheet as your table content.

12 Table Accessibility 5 min

Add scope attributes to header cells (<th scope="col"> or scope="row">) to improve screen reader accessibility. Verify the table structure in browser developer tools.

Phase 5: Forms and Input Elements (35 minutes)

13 Basic Form Structure 10 min

Create a comprehensive form:

  • Wrap content in <form> tags with action="#" and method="POST"
  • Add text inputs with name, id, and placeholder attributes
  • Use <label> tags with for attribute linked to input id
  • Group related fields using <fieldset> and <legend>
14 Input Types Exploration 15 min

Implement various input types:

  • type="password" for sensitive data
  • type="email" with required attribute
  • type="number" with min, max, and step attributes
  • type="date" for date selection
  • type="color" for color picker
  • type="range" for slider input
  • Radio buttons (type="radio") for single selection
  • Checkboxes (type="checkbox") for multiple selections

Test each input type and observe the specialized keyboards/interfaces on mobile devices if available.

15 Form Submission 10 min

Complete the form functionality:

  • Add <select> dropdown with <optgroup> for categorization
  • Add <textarea> for multiline text input
  • Create Submit and Reset buttons
  • Add form validation attributes: required, pattern, minlength
  • Test form submission and observe URL changes with GET vs POST

Phase 6: Semantic HTML5 (25 minutes)

16 Semantic Structure 15 min

Rebuild your page using semantic elements:

  • Replace generic <div> containers with semantic alternatives
  • Use <header> for introductory content
  • Use <nav> for navigation links
  • Use <main> for dominant content (only one per page)
  • Use <article> for self-contained content
  • Use <section> for thematic groupings
  • Use <aside> for tangentially related content
  • Use <footer> for footer information
17 Accessibility Check 10 min

Verify accessibility features:

  • Check heading hierarchy (h1 → h2 → h3, no skips)
  • Ensure all images have alt attributes
  • Verify all form inputs have associated labels
  • Use <time> with datetime attribute for dates
  • Check color contrast (if CSS is applied)

Phase 7: Validation and Testing (20 minutes)

18 Code Validation 10 min

Copy your HTML code and validate it using the W3C Markup Validation Service (validator.w3.org). Document any errors or warnings received and correct them. Common issues include:

  • Missing alt attributes on images
  • Unclosed tags
  • Deprecated attributes
  • Improper nesting of elements
19 Cross-Browser Testing 10 min

If possible, test your HTML page in different browsers (Chrome, Firefox, Edge, Safari). Note any rendering differences. Use browser developer tools to inspect the DOM structure and verify it matches your intended hierarchy.

Phase 8: Documentation and Submission (30 minutes)

20 Saving Your Work 10 min

Organize your files:

  • Save each exercise as separate .html files with descriptive names (ex1_profile.html, ex2_form.html, etc.)
  • Create a main index.html linking to all exercises
  • Take screenshots of each rendered page
  • Save validation reports from W3C validator
21 Report Compilation 20 min

Following the report guidelines in the next section, compile your laboratory report. Include code listings, screenshots, observations, and conclusions from each phase of the experiment.

Post-Lab: After completing all procedures, review your understanding by attempting the Knowledge Check quiz. If you score below 80%, review the theory section and repeat relevant experiments.

📋 Comprehensive Laboratory Report Guidelines

Important: Your laboratory report is a formal document that demonstrates your understanding of HTML concepts and your ability to apply them. Follow these guidelines carefully to ensure your report meets academic standards.

Report Structure and Format

Physical Format

  • Paper size: A4 (210 × 297 mm)
  • Margins: 2.5 cm on all sides
  • Font: Times New Roman or Arial, 12 pt
  • Line spacing: 1.5 lines
  • Page numbers: Bottom center, starting from introduction
  • File naming: RollNo_Name_HTML_Lab.pdf

Digital Submission

  • PDF format only (no Word documents)
  • Include all source code as appendix
  • Attach HTML files in separate zip folder
  • Submit via Learning Management System
  • Due date: One week after lab session
  • Late submission penalty: 10% per day

Required Report Sections

1. Cover Page (Page 1)

The cover page must include:

  • University/College name and logo
  • Department of Computer Science/Electrical Engineering
  • Course title: Computer Networks
  • Course code: [Your course code]
  • Experiment title: "Introduction to HTML - Virtual Laboratory"
  • Student name and roll number
  • Group/section number
  • Date of experiment and submission date
  • Instructor name and signature space

2. Abstract/Summary (Page 2)

Write a concise summary (150-200 words) covering:

  • Purpose of the laboratory exercise
  • Key HTML concepts explored
  • Main experiments conducted
  • Significant findings or challenges
  • Conclusion about HTML's role in web development
💡
Tip: Write the abstract last, after completing all other sections. It should stand alone and give readers a complete overview of your work.

3. Table of Contents (Page 3)

Include auto-generated or manually created table of contents listing:

  • All major sections with page numbers
  • List of figures (screenshots, diagrams)
  • List of tables (data tables, comparison tables)
  • List of code listings (appendix items)

4. Introduction (Pages 4-5)

The introduction should establish context and objectives:

4.1 Background

Explain what HTML is, its history (Tim Berners-Lee, 1991), and its evolution through versions (HTML 2.0, 4.01, XHTML, HTML5). Discuss the importance of HTML in the context of computer networks and the World Wide Web.

4.2 Relevance to Course

Connect HTML to the Computer Networks curriculum. Explain how understanding HTML structure aids in understanding HTTP protocols, web servers, and client-server architecture.

4.3 Laboratory Objectives

List the specific objectives as stated in the Objectives section of this manual. Rewrite them in past tense as you will have completed them by report writing time.

4.4 Scope

Define the boundaries of this laboratory: what was covered (basic HTML) and what was not covered (CSS, JavaScript, server-side programming).

5. Theory and Principles (Pages 6-10)

This section demonstrates your theoretical understanding:

5.1 HTML Document Structure

Explain the document type declaration, root element, head section (metadata, title, links), and body section. Include a diagram showing the hierarchy.

5.2 HTML Elements and Tags

Classify HTML elements:

  • Block-level vs. inline elements
  • Container elements vs. empty elements
  • Semantic vs. presentational elements

5.3 Attributes and Values

Explain the concept of attributes, global attributes (class, id, style, title), and element-specific attributes. Discuss the importance of attribute values in quotes.

5.4 Forms and Data Collection

Detail how HTML forms work, the client-server interaction model, and form validation concepts.

5.5 HTML5 Semantic Elements

Explain the purpose of semantic markup, accessibility benefits, and SEO implications.

6. Equipment and Software (Page 11)

List all tools and technologies used:

Category Item/Software Version/Specification Purpose
Hardware Computer/Workstation [Your system specs] Development platform
Operating System Windows/Linux/macOS [Version] System environment
Web Browser Chrome/Firefox/Edge [Version] Rendering and testing
Text Editor VS Code/Notepad++/Sublime [Version] Code editing
Validator W3C Markup Validation Service Online Code validation
Virtual Lab HTML Virtual Laboratory v1.0 Interactive simulation

7. Experimental Procedure (Pages 12-20)

This is the core of your report. For each exercise (1-4), include:

Exercise X: [Title]

Aim: State the specific goal of this exercise

Theory: Brief theoretical background specific to this exercise

Procedure: Step-by-step methodology followed

Code Listing: Complete, well-commented HTML code

Output/Screenshot: Visual evidence of successful execution

Observations: What you observed during execution

Result: Whether the exercise was successful

Code Documentation Standards:

  • Include comments explaining major sections (<!-- Header Section -->)
  • Explain choice of specific tags or attributes
  • Highlight any innovative solutions or workarounds
  • Note any deviations from standard procedure and reasons

Screenshot Requirements:

  • Full browser window showing rendered page
  • File size: Minimum 800x600 pixels, 150 DPI
  • Format: PNG for clarity or JPEG for photos
  • Caption: Figure X.Y: [Descriptive caption]
  • Numbering: Chapter. Figure (e.g., Figure 7.1, 7.2)

8. Observations and Data Analysis (Pages 21-25)

Present systematic observations:

8.1 Validation Results

Create a table showing W3C validation results for each exercise:

Exercise Errors (Initial) Warnings Status (Final) Common Issues
1. Profile Page [Number] [Number] Valid/Invalid [Description]
2. Registration Form [Number] [Number] Valid/Invalid [Description]
3. Data Table [Number] [Number] Valid/Invalid [Description]
4. Blog Layout [Number] [Number] Valid/Invalid [Description]

8.2 Browser Compatibility

If tested on multiple browsers, create a compatibility matrix:

  • Rendering consistency across browsers
  • Feature support differences
  • Performance observations

8.3 Learning Observations

Document key learning moments:

  • Most challenging concept mastered
  • Common mistakes made and corrected
  • Differences between expected and actual output
  • Insights about semantic vs. non-semantic markup

9. Results and Discussion (Pages 26-28)

Interpret your findings:

9.1 Achievement of Objectives

Map each laboratory objective to evidence in your work:

  • Objective 1 (HTML Structure): Demonstrated in Exercise 1 and 4
  • Objective 2 (HTML Tags): Demonstrated in all exercises
  • Continue for all objectives...

9.2 Analysis of Results

Discuss:

  • Why certain tags were chosen over alternatives
  • Effectiveness of semantic markup in Exercise 4
  • Form validation behavior and user experience
  • Accessibility features implemented and their importance

9.3 Limitations

Honestly state any limitations:

  • Features not implemented due to time constraints
  • Browser-specific issues encountered
  • Validation errors that were difficult to resolve

10. Conclusion (Page 29)

Summarize your learning experience:

  • Restate the main purpose and whether it was achieved
  • Highlight the most important skill acquired
  • Connect theoretical knowledge to practical application
  • State the value of HTML in modern web development
  • Personal reflection on the learning process

Length: 300-400 words

11. References (Page 30)

List all sources using IEEE or APA format:

  • Textbooks (HTML & CSS: Design and Build Websites by Jon Duckett, etc.)
  • Online documentation (MDN Web Docs, W3Schools, W3C specifications)
  • Academic papers on web accessibility or semantic markup
  • Course lecture notes (if referenced)

Minimum 5 references required. Ensure all URLs are accessible and dated.

12. Appendices (Pages 31+)

Include supplementary materials:

Appendix A: Complete Source Code

Full code for all exercises in monospace font, properly formatted and commented.

Appendix B: Validation Reports

Screenshots or PDF exports of W3C validation results for each file.

Appendix C: Additional Screenshots

Any additional screenshots not included in the main body.

Appendix D: Glossary

Definitions of technical terms used in the report (optional but recommended).

Grading Rubric and Evaluation Criteria

Laboratory Report Grading Rubric (Total: 100 Points)
Section
Points
Criteria for Full Marks
Format & Organization
10
Proper formatting, page numbers, table of contents, professional appearance
Introduction & Theory
15
Clear objectives, comprehensive theory, proper citations, context established
Procedure Documentation
10
Clear, reproducible steps, proper sequence, safety considerations noted
Code Quality
15
Valid HTML, proper indentation, comments, semantic markup, no errors
Screenshots & Evidence
10
Clear, labeled screenshots showing all required functionality
Observations & Analysis
15
Detailed observations, validation results, thoughtful analysis
Conclusion & References
10
Meaningful conclusion, proper citation format, adequate references
Timeliness & Presentation
10
Submitted on time, professional presentation, complete appendices
TOTAL
100
Academic Integrity Notice:

Plagiarism in laboratory reports is a serious offense. This includes:

  • Copying code from classmates or online sources without attribution
  • Using screenshots from other students' work
  • Paraphrasing theory sections from Wikipedia or textbooks without citation
  • Submitting work done by others

Penalty: Zero marks for the assignment and disciplinary action as per university policy.

Report Writing Tips for Success

✓
Start Early: Begin writing your report while conducting experiments. Memory fades quickly, and immediate documentation is more accurate.
✓
Be Specific: Instead of "The code worked," write "The form validation successfully prevented submission when the email field contained invalid syntax."
✓
Show Your Work: Include failed attempts and corrections. This demonstrates problem-solving skills and deepens understanding.
✓
Use Visuals: Screenshots, diagrams, and tables convey information more effectively than paragraphs of text.
✓
Proofread: Spelling and grammar errors detract from technical credibility. Use spell-check and have a peer review your report.

Submission Checklist

Before submitting, verify that you have included:

Final Review: Read your report as if you were grading it. Does it clearly demonstrate that you understand HTML concepts? Can someone reproduce your work using only your procedure section? If yes, you are ready to submit!