Scribd
Upload
3 views4 pages

Lab 1-1

This document is a laboratory manual for a Web Engineering course at the National University of Computer and Emerging Sciences. It outlines the objectives and instructions for setting up the VS Code environment, creating HTML files, and developing simple web pages through various tasks such as designing a student portal form and a personal profile webpage. The manual is intended for students in the Spring 2025 semester, guided by lab instructor Sana Ejaz.

Uploaded by

sana ejaz
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views4 pages

Lab 1-1

This document is a laboratory manual for a Web Engineering course at the National University of Computer and Emerging Sciences. It outlines the objectives and instructions for setting up the VS Code environment, creating HTML files, and developing simple web pages through various tasks such as designing a student portal form and a personal profile webpage. The manual is intended for students in the Spring 2025 semester, guided by lab instructor Sana Ejaz.

Uploaded by

sana ejaz
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

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 https://code.visualstudio.com/.


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 index.html.
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 index.html 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
https://via.placeholder.com/150).
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

You might also like