National University of Computer and Emerging Sciences
Laboratory Manual
for
Web Engineering
(SL3003)
Lab Instructor Sana Ejaz
Section 6C 1,2
Semester Spring 2025
Department of Computer Science
FAST-NU, Lahore, Pakistan
Page 1 of 4
Lab 1: Introduction to HTML
Objectives
Understand the basic structure of an HTML document.
Use fundamental HTML elements like forms, headings, paragraphs, and lists to create simple
web pages.
Develop and test HTML code using a text editor and browser.
Instructions:
Setting up the VS Code Environment
Step 1: Install Visual Studio Code
1. Download Visual Studio Code from [Link]
2. Install it by following the instructions for your operating system (Windows, macOS, or Linux).
Step 2: Install Live Server Extension
1. Open VS Code and go to the Extensions view by clicking on the Extensions icon in the Activity
Bar (or press Ctrl+Shift+X).
2. Search for Live Server in the search bar.
3. Click on the Install button next to the Live Server extension.
4. Once installed restart your VS Code.
Step 3: Create Your First HTML File
1. Open VS Code and create a new folder for your lab work.
2. Inside the folder, create a new file named [Link].
3. Write a basic HTML template in the file:
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lab 1</title>
</head>
<body>
<h1>Welcome to Web Engineering Lab</h1>
</body>
</html>
Page 2 of 4
Step 4: Launch Live Server
1. Right-click on the [Link] file in the Explorer and select Open with Live Server.
2. Your default web browser will open, displaying the content of the HTML file.
3. Now, any changes you make to the file will automatically update in the browser.
If above does not work Look for the "Go Live" Button
In the bottom-right corner of VS Code, there should be a "Go Live" button in the status bar.
If you see it, click on it. This will start the Live Server and open your HTML file in the default
browser.
Task 1: Create a Student Portal Form
Design a simple HTML form to collect basic student information. The form should include:
A heading: "Student Portal"
Fields:
o Full Name (text input)
o Roll Number (text input)
o Program (dropdown with options like BSSE, BSCS, BSIT)
o Email Address (email input)
o Password (of type password ******)
o Submit button
Use semantic HTML elements where possible i.e.: div, heading, p, etc.
Task 2: Create a Personal Profile Webpage
Create a basic personal profile webpage. The page should include:
A title: "My Profile"
Content:
1. A heading with your name.
2. A paragraph about yourself (e.g., hobbies, favorite subjects, or career goals).
3. An unordered list of at least three favorite programming languages or tools.
4. An image representing yourself (can be a placeholder like
[Link]
5. A link to your favorite website (e.g., Google or GitHub)
Page 3 of 4
Task 3: Course Registration Page
Create a simple course registration page using the following elements:
Requirements:
1. Heading: Add a title like "Course Registration".
2. Form Fields:
o Student Name: Text input field.
o Gender: Use radio buttons (Male, Female, Other).
o Courses Offered: Provide a list of courses using checkboxes (e.g., Web Development,
Mobile App Development, AI, Data Science).
3. Display Table:
o At the bottom of the form, include a table listing the courses offered.
o The table should have three columns: Course Code, Course Name, and Credits.
Example:
Course Code Course Name Credits
CS101 Web Engineering 3
CS102 Data Science 4
CS103 Artificial Intelligence 4
CS104 Mobile App Development 3
Page 4 of 4