Scribd
Upload
59 views

Lab01 HTML

The document provides instructions for a lab assignment on basic HTML. Students are asked to create a simple personal website with three pages - a home page, a projects page listing software projects, and a contact page. The document provides details on setting up the files and directories and includes examples of the code needed to build out the home and projects pages according to the specified structure.

Uploaded by

jl289173
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
59 views

Lab01 HTML

The document provides instructions for a lab assignment on basic HTML. Students are asked to create a simple personal website with three pages - a home page, a projects page listing software projects, and a contact page. The document provides details on setting up the files and directories and includes examples of the code needed to build out the home and projects pages according to the specified structure.

Uploaded by

jl289173
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

KK24603: WEB ENGINEERING

Faculty of Computing and Informatics


Semester 2 2020/2021
LAB 1: BASIC HTML
Reference HTML Tags can be found here https://www.w3schools.com/tags/
1. For WAMP your project should be created in C:\wamp64\www
2. For XAMP your project should be created in C:\xampp\htdocs

Task 1: HTML Text Editor


1. Download notepad++ (https://notepad-plus-plus.org/)
2. Download sublime++ (https://www.sublimetext.com/download)

Task 2: HTML Page and Fundamentals

You are required to build a simple personal web site that describes yourself with fundamental
HTML elements. Your web site should consist of three simple web pages, which are Home,
My Software Projects, and Contact Me. The hyperlinks among these pages are illustrated as
below:

Home
(index.html)

My Software Projects Contact Me


(projects.html) (contact.html)
Instructions:
3. Create a folder named “Lab01” in your wamp/xamp directory.
4. Inside the “Lab01” folder, create the Home Page and named it as “index.html”.
a. You should apply the new HTML 5 structural and fundamental elements to answer this
practice. For example: the <header>,<nav>, <main> and <footer> tags.
b. Create a menu hyperlinks to the specific html file name “index.html”, “projects.html”
and “contact.html”
c. Create a folder named “images” inside “Lab01” to store all your images.

1
5. The index.html page should display the following contents:

The index.html page

6. Open the “index.html” file, define the html header and body elements as following. Then,
complete the page by adding the HTML5 structural elements.
<!DOCTYPE html>
<html>
<head>
<title>My Personal Site</title>
</head>
<body>
<header>
<h1>Welcome to My Personal Site</h1>
</header>
<nav>
<b><a href="index.html">Home</a> &nbsp;
<a href="projects.html">My Software Projects</a> &nbsp;
<a href="contact.html">Contact</a></b>
</nav>
<main>
<h2>About Me</h2>
<img src="images/avatar.png" alt="avatar image"
style="width:200px;height:200px;">
<p>I am a 2<sup>nd</sup> year Software Engineering student
in Faculty of Computing and Informatics, UMS.</p>
<p>This is my first website</p>
</main>
<footer>
<br>
<small><i>Copyright &copy; 2021 Your Name Here</i></small>
</footer>
</body>
</html>

2
7. Then, create the Contact Me page as below. The page design layout should be consistent
with index.html page structure.

The contact.html page

8. Create the My Software Project page by referring to Task 3 below (next page). The page
design layout should be consistent with index.html page structure.

3
Task 3: HTML Table

Continue with your Lab01, create your My Software Project page to display the list of software
projects that you have developed before. In this Hands-on practice, you will code the table and
its associated attributes that you have learned in the class.

The projects.html page

4
Task 4: HTML Form Basic

Continue with your Lab01, create a new html page and named it as “review_form.html”. In this
Hands-On practice, you will code HTML5 form controls as you configure a software review form
that accepts a name, email address, software rating value and review from a website visitor.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Software Review Form</title>
<meta charset="utf-8">
</head>
<body>
<h1>Software Review Form</h1>
<p>Send us your review of our software. Required fields marked with an
asterisk *</p>
<form method="post" action="review_action.php">

<p><label for="userName">*Name:</label>
<input type="text" name="userName" id="userName" required="required"
placeholder="your first and last name"></p>
<p><label for="userEmail">*E-mail:</label>
<input type="email" name="userEmail" id="userEmail" required="required"
placeholder="[email protected]"></p>
<p><label for="userRating">Software Rating (1 - 10):</label>
<input type="range" name="userRating" id="userRating" min="1" max="10"></p>
<p><label for="userReview">*Review:</label>
<textarea name="userReview" id="userReview" rows="2" cols="20"
required="required"></textarea></p>
<p><label for="recommend">*Recommend to others?:</label><input
type="checkbox" name="recommend" value="yes"></p>
<input id="mySubmit" type="submit" value="Submit">
</form>
</body>
</html>

The review_form.html page

You might also like