Scribd
Upload
71 views

Tutorial 6 Web and Design

This document summarizes a student's web development tutorial on creating a hotel reservation form using HTML. The tutorial included learning how to insert bullets in HTML, and use tags like <dt>, <dl>, and <dd>. The student implemented a multi-section form with fields for personal details, account details, and room details. CSS styling was also added to layout and style the form elements. The student concluded they learned how to create a web form with HTML from references on the W3 schools website.

Uploaded by

Uthayakumar Gangezwer
Copyright
© © All Rights Reserved
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
71 views

Tutorial 6 Web and Design

This document summarizes a student's web development tutorial on creating a hotel reservation form using HTML. The tutorial included learning how to insert bullets in HTML, and use tags like <dt>, <dl>, and <dd>. The student implemented a multi-section form with fields for personal details, account details, and room details. CSS styling was also added to layout and style the form elements. The student concluded they learned how to create a web form with HTML from references on the W3 schools website.

Uploaded by

Uthayakumar Gangezwer
Copyright
© © All Rights Reserved
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 10

Informatics Institute of Technology

Department of Computing
(B.Eng.) in Software Engineering

Module: 4COSC0011C Web Design & Development

Module Leader: Ms. Janani Harischandra

Tutorial NO-06

d Date of Submission -16.11.2019

Student ID-2019100

Student UoW ID - W1761186

Student First Name - Gangezwer

Student Surname - Uthayakumar

1
Contents
Introduction-------------------------------------------------------------------------------------------------------------3
Implementation and output-----------------------------------------------------------------------------------------4
Conclusion----------------------------------------------------------------------------------------------------------------9
References---------------------------------------------------------------------------------------------------------------10

2
INTRODUCTION

*In this part i am going to give an introduction to above tutorial which I did
in the web development tutorial.so basically in the above tutorial I tried to
create a hotel reservation form with a help of html langague.

*So in this tutorial I learned to insert a bullets in html and learned to put
some new tags like <dt>,<dl>,<dd>.

3
IMPLEMENTATION & OUTPUT

HTML Code (this may include internal/inline css and JavaScript embedded)

<!DOCTYPE html>
<html lang="en">

<head>

<title>Hotel Reservation</title>
<link rel="stylesheet" href="tutorial6gangez.css">

</head>

<body>
<h2>Hotel Reservation System</h2>

<form action="#" method="get">

<fieldset>

<legend>Personal Details</legend>

<div class="row">
<div class="col-25">
<label for="fname">
First Name :
</label>
</div>
<div class="col-75">
<input type="text" id="fname"
name="fname" placeholder="gangezwer" required>
</div>
</div>

<div class="row">
<div class="col-25">
<label for="sname">
Surname :
</label>
</div>
<div class="col-75">
<input type="text" id="sname"
name="sname" placeholder="uthayakumar" required>
</div>
</div>

4
</fieldset>

<fieldset>

<legend>Account Details</legend>

<div class="row">
<div class="col-25">
<label for="email">
Email :
</label>
</div>
<div class="col-75">
<input type="email" id="email"
name="email" [email protected]" required>
</div>
</div>

<div class="row">
<div class="col-25">
<label for="upass">Password :
</label>
</div>
<div class="col-75">
<input type="password" id="upass"
name="upass" placeholder="example : ilovemywife1234" required>
</div>
</div>

</fieldset>

<fieldset>

<legend>Room Details</legend>

<div class="row">
<div class="col-25">
<label for="hotel">Hotel : </label>
</div>
<div class="col-75">
<select id="hotel" name="hotel"
required>
<option
value="hotel1">Heritance Kandalama</option>
<option value="hotel2">Aliya
Resort & Spa</option>
<option value="hotel3">Liyya
Water Villas</option>
</select>
</div>
</div>

<div class="row">
<div class="col-25">
<label for="roomtype">Room Type :
</label>
</div>
5
<div class="col-75">
<input type="radio" id="roomtype"
name="roomtype" value="single" checked> Single Room
<input type="radio" id="roomtype"
name="roomtype" value="double"> Double Room
</div>
</div>

<div class="row">
<div class="col-25">
<label for="comments">Any Comments :
</label>
</div>
<div class="col-75">
<textarea id="comments"
name="comments" placeholder="Any comments">
</textarea>
</div>
</div>

</fieldset>

<input type="reset" value="reset">


<input type="submit" value="submit">

</form>

</body>

</html>

CSS of above web page


* {
box-sizing: border-box;
}
html{
background: #FFF;
padding: 2%;
font-family: Arial, Helvetica, sans-serif;
}
h2{
margin-left: 30px;
}
form{
width: 80%;
background-color: #1E90FF;
padding: 20px;
border-radius: 15px;
}
fieldset{
border: 2px solid #fff;
padding: 10px;
border-radius: 15px;
margin-bottom:10px;
}

6
legend{
color: #fff;
}
label {
padding: 12px 12px 12px 0;
display: inline-block;
color: #fff;
}
input[type=text], input[type=password], input[type=email], select,
textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
input[type=submit]{
padding:10px;
font-weight: bold;
color: #fff;
background: #1E90FF;
border: 2px solid #fff;
}
input[type=reset]{
padding:10px;
font-weight: bold;
color: #1E90FF;
background: #FFF;
border: 2px solid #1E90FF;
}
input[type=submit]:hover{
background: #004f9c;
}
input[type=reset]:hover{
border: 2px solid #fff;
}
.col-25 {
float: left;
width: 25%;
margin-top: 6px;
}

.col-75 {
float: left;
width: 75%;
margin-top: 6px;
}
.row:after {
content: "";
display: table;
clear: both;
}

@media screen and (max-width: 600px) {


.col-25, .col-75, input[type=submit] {
width: 100%;
margin-top: 0;
}
7
}

8
CONCLUSION
So from this above tutorial I learned to create a form on the web page with a help of html language .

9
REFERENCES

So to do this work I got references from the website W3 schools.

10

You might also like