Scribd
Upload
56 views39 pages

Muhammad Aamir 2023 CS 566

This document provides an introduction to HTML and CSS. It begins with an overview of websites and webpages. It then covers HTML basics like structure, elements, and attributes. Examples are given to demonstrate headings, paragraphs, images, tables, forms, and hyperlinks. The document concludes with an introduction to CSS, explaining why it was created and its basic syntax of selectors, properties, and values.

Uploaded by

aamirali1061a
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
56 views39 pages

Muhammad Aamir 2023 CS 566

This document provides an introduction to HTML and CSS. It begins with an overview of websites and webpages. It then covers HTML basics like structure, elements, and attributes. Examples are given to demonstrate headings, paragraphs, images, tables, forms, and hyperlinks. The document concludes with an introduction to CSS, explaining why it was created and its basic syntax of selectors, properties, and values.

Uploaded by

aamirali1061a
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/ 39

University of Engineering and Technology

Lahore,Narowal Campus
(UET)

Lab Manual

Department: Computer Science


Course: ICT

Submitted by: Muhammad Aaamir


2023-CSE-566
Submitted to : Mam Rabia sana & Mam Fatima
Introduction of HTML
[Hyper Text Markup Language]
Objectives:
- Website introduction
- Webpage introduction
- HTML Basics
- Brackets installation
- How to create html file
- HTML Attributes
- Simple webpage creation
- HTML Forms

Website:
A website is a collection of interlinked web pages with a common domain name. The website
can be made by any individual, group, or company. All the websites together constitute the world
wide web.
The website can be of several types, like an e-commerce website, social media website, or a blog
website, and every website has a different role, but one thing is common that every website has
several linked web pages.

Languages need for Web development


HTML, CSS, JavaScript etc. But initially, a developer needs to command over HTML, which is
the basic requirement to develop a website.

HTML basic Structure


<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
</body>
</html>
Example Explained

 The <!DOCTYPE html> declaration defines that this document is an HTML document
 The <html> element is the root element of an HTML page
 The <head> element contains meta information about the HTML page
 The <title> element specifies a title for the HTML page (which is shown in the browser's
title bar or in the page's tab)
 The <body> element defines the document's body, and is a container for all the visible
contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.

What is an HTML Element?

An HTML element is defined by a start tag, some content, and an end tag:

<tagname> Content goes here... </tagname>

The HTML element is everything from the start tag to the end tag:

HTML Page Structure:

Headings, Paragraph and background color:


Source Code:
<html><head>
<title> Web Page </title>
</head>
<body style="background-color: aqua;">
<h1> Scholar’s Haven HOTEL </h1>
<p>it is delicious hotel</>
</body>
</html>
Output:

Text Formattjng:
In Text formattjng we have P, B, I, Strong, Big, Em, Small, Sub, Sup
We can write program.
<!DOCTYPE html>
<html>
<head>
<title> Formattjng Page </title>
</head>
<body style="background-color: aqua;">

<p><b>Welcome to Bold Text</b></p>


<p><strong>Welcome to strong text</strong></p>
<p><big>Welcome to big text</big></p>
<p><em>Welcome to emphasized text</em></p>
<p><i>Welcome to italic text</i></p>
<p><small>Welcome to small text</small></p>
<p><u>Welcome to underline text</u></p>
<p>Welcome<sub>Electrical Department</sub><sup
>instjtute</sup></p>

</body>
</html>
Output:
Text Alignment:
<!DOCTYPE html>
<html>
<head>
<title> Text Alignment</title>
</head>
<body>

<h1 style="text-align: center;">Welcome to Cs Department</h1>


</body>
</html>

Output:

Number List in HTML:


<!DOCTYPE html>
<html lang="en">
<head>
<title>page</title>
</head>
<body>
<ol>
<li>Lab Manual</li>
<li>Html</li>
<li>Computer Science</li>
</body>
</html>
Output:
Number Style in HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>page</title>
</head>
<body>
<ol type="i">
<li>Lab Manual</li>
<li>Html</li>
<li>Computer Science</li>
</ol>
<ol type="a">
<li>Web Engineeing</li>
<li>CSS</li>
</ol>
</body>
</html>
Output:

HTML UNORDERED LIST:


<!DOCTYPE html>
<html lang="en">
<head>
<title>page</title>
</head>
<body>
<ul>
<li>Lab Manual</li>
<li>Html</li>
<li>Computer Science</li>
</ul>
<ul>
<li>Web Engineering</li>
<li>CSS</li>
</ul>
</body></html>
Output:

Horizontal Lines in HTML:


<!DOCTYPE html>
<html lang="en">
<head>
<title>page</title>
</head>
<body>
<p>This is the fjrst paragraph</p>
<hr/>
<p>Welcome to the class</p>
<hr/>
<p>This is the class </p>
</body></html>

Output:

Hyperlink in HTML:
<!DOCTYPE html>

<html lang="en">
<head>
<title>page</title>
</head>
<body>
<a href="www.google">Google</a>

</body></html>
Output:

Hyperlink in HTMT:
<html>

<body>

<h1><b><font face="Times New Roman" color="#FF00FF">Welcome to our

company</font></b></h1>

<p><b><font face="Times New Roman" color="#008000"><a

href="about.htm">About</a></font></b></p>

<p><b><font face="Times New Roman" color="#008000"><a

href="product.htm">Product</a></font></b></p>

<p><b><font face="Times New Roman" color="#008000"><a

href="contact.htm">Contact</a></font></b></p>

</body>

</html>

OUTPUT:

IMAGES IN HTML
<html>
<body>
<img src="myimage.jpg" tjtle="This is my fmowers image" alt="This is my image" align="top"
width="300" height="300"/>
</body>
</html>

OUTPUT:

Tables in Html:
HTML tables enable to efgectjvely present large amounts of data in rows and
columns.

Table Structure
A table is basically a rectangle containing rows and columns. The places where the
columns and
rows intersect are called cells. Each cell can hold Web page content.

Cell Spanning
Cells can span two or more columns or rows to form bigger containers for data.
For example, a table may include a tjtle cell at the top that spans multjple columns
across the table, or one that extends downward across several rows.

Table Elements
Tables are defjned with the <table> tag.
A table is divided into rows with the <tr> tag, and each row is divided into data
cells with the <td> tag. The <td> stands for "table data," which is the content of a
data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal
rules, tables, etc.

<!DOCTYPE html>
<html lang="en">
<head>
<title>page</title>
</head>
<body>
<body>
<tr>
<th>Name</th>
<th>Address</th>
<th>City</th>
</tr>
<tr>
<td>Umar</td>
<td>Multan</td>
<td>Multan</td>
</tr>
</body>
</body></html>

Output:

FORMS IN HTML:
A form allows a user to enter data that is sent to a server for processing. It is a
sectjon of a document containing normal content, markup, special elements
called controls (checkboxes, radio butuons, menus, etc.), and labels on those
controls.
The most important form element is the input element. It is used to select user
informatjon. It can vary in many ways, depending on the type aturibute and can
be
of type text fjeld, checkbox, password, radio butuon, submit butuon, and more.
<form>
Input element
</form>

<!DOCTYPE html>
<html lang="en">
<head>
<title>page</title>
</head>
<body>
<form actjon=“ ">
First name: <input type="text" name="fjrstname"><br>
Last name: <input type="text" name="lastname">
</form>

</body></html>

OUTPUT:

Password Filled
<!DOCTYPE html>
<html lang="en">
<head>
<title>page</title>
</head>
<body>
<form actjon=“ ">
Username: <input type="text" name="user"><br>
Password: <input type="password" name="password">
</form>
</body></html>

OUTPUT:
Checkbox :
<!DOCTYPE html>
<html lang="en">
<head>
<title>page</title>
</head>
<body>
<form action="">
<input type="checkbox" name="myclass" value="web">Web Engineering<br>
<input type="checkbox" name="myclass" value="CS">Computer Science
</form>
</body>
</html>

Output:

Radio Button:
<!DOCTYPE html>
<html lang="en">
<head>
<title>page</title>
</head>
<body>
<form action="">
<input type="radio" name="myradio" value="male">Male<br>
<input type="radio" name="myradio" value="female">Female
</form>
</body>
</html>

Output:
Form Drop down:
<!DOCTYPE html>
<html lang="en">
<head>
<title>page</title>
</head>
<body>
</body>
<form actjon=””>
<select name=”Subject”>
<optjon value=”web”>Web Engineering</optjon>
<optjon vale=”pm”>Project Management</optjon>
<optjon value=”cs”>Computer Science</optjon>
<optjon value=”c++”>C++>/optjon>
</select>
</form>
</html>

Output:

Form Submit Butuon:


<!DOCTYPE html>
<html lang="en">
<head>
<title>page</title>
</head>
<body>
</body>
<form actjon=””>
<input type=”butuon” value=”Welcome”>
</form>
</html>

Output:

Border around information:


<form actjon=””>
<fieldset>
<border>Personal Informatjon</border><br>
Name: <input type=”text” size=”30”><br>
E-mail:<input type=”text” size=”30”><br>
Date of birth: <input type=”text” size=”10”><br>
</fieldset>
</form>

Output:

Form post Method


<html>
<body>
<form actjon=””>
Name:<br>
<input type=”text” name=”myname” value=”enter name”><br>
E-mail:<br>
<input type=”text” name=”myemail” value=”enter email”><br>
Comment:<br>
<input type=”text” name=”comment” value=”place a comment”><br>
<input type=”submit” value=”submit”><br>
<input type=”reset” value=”rest”<br>
</form>

Output:
CSS (Cascading Style Sheets)
Introductjon
• A language that use to defjne styles against any HTML element.
• CSS stands for cascading style sheet.
• CSS describes how HTML elements are to be displayed on screen, paper, or
in other media.
• CSS saves a lot of work. It can control the layout of multjple web pages all
at once.
• External stylesheets are stored in CSS fjles.

Why Use CSS ?


CSS Solved a Big Problem

• HTML was NEVER intended to contain tags for formattjng a web page!

• HTML was created to describe the content of a web page, like:

• <h1>This is a heading</h1>

• <p>This is a paragraph.</p>

• When tags like <font>, and color atuributes were added to the HTML 3.2

specifjcatjon, it started a nightmare for web developers. Development of

large websites, where fonts and color informatjon were added to every

single page, became a long and expensive process.

• To solve this problem, the World Wide Web Consortjum (W3C) created CSS.

• CSS removed the style formattjng from the HTML page!

CSS Syntax:
The Style sheets are made up of rules. Each rule has three parts

Selector (body) -tells the browser which part of the document is afgected by the

rule

property (foreground, color, background color) -specifjes what aspect of the

layout is
being set

Value (Color name or color number) the value for the style property

CSS Syntax (cont.)

• The selector points to the HTML element you want to style.

• The declaratjon block contains one or more declaratjons separated by

semicolons.

• Each declaratjon includes a CSS property name and a value, separated by a

colon.

• A CSS declaratjon always ends with a semicolon, and declaratjon blocks are

surrounded by curly braces.

CSS Syntax Example:


<!DOCTYPE html>

<html>

<head>

<style>

p{

color: red;

text-align: center;

</style>

</head>

<body>

<p>Hello World!</p>

<p>These paragraphs are styled with CSS.</p>

</body>
</html>

Output:

Insertjng a Style Sheet:


There are three ways of insertjng a style sheet:
• External style sheet
• Internal style sheet
• Inline style
External Style Sheet:
• With an external style sheet, you can change the look of an entjre website
by changing just one fjle.
• An external style sheet can be writuen in any text editor. The fjle should not
contain any html tags. The style sheet fjle must be saved with a .css
extension.
External Style Sheet
(example)
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1> mystyle.css
<p> This is a paragraph</p> body{
</body> background-color: red}
</html> h1{color:navy;
margin-lef:20px;}
Output:

Internal Style Sheet


• An internal style sheet may be used if one single page has a unique style.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-lef: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
OUTPUT:
Inline Stylesheet CSS
• An inline style may be used to apply a unique style for a single element.
• To use inline styles, add the style aturibute to the relevant element. The
style aturibute can contain any CSS property.
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;margin-lef:30px;">This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
OUTPUT:

CSS
Example (with a Navigatjon bar)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<tjtle>Introductjon to CSS</tjtle>
<style type="text/css">
body {
font-family: Georgia, "Times New Roman", Times, serif;
color: purple;
background-color: #d8da3d
}
h1 {
font-family: century gothic, Geneva, Arial, SunSans-Regular, sans-serif }
</style>
</head>
<body>
<ul class="navbar">
<li><a href="index.html">Home page</a>
<li><a href="product.html">Product</a>
<li><a href="services.html">Services</a>
<li><a href="contact.html">Contact</a>
</ul>
<h1>kaims Instjtute </h1>
<p>Welcome to our instjtute</p>
<p><h3>The Department of Electronic & Computer Systems Engineering</h3></p>
</body>
</html>

OUTPUT:
CSS Links
A:link
Defjnes the style for normal unvisited links.
A:visited
Defjnes the style for visited links.
A:actjve
Defjnes the style for actjve links.
A link becomes actjve once you click on it.
A:hover
Defjnes the style for hovered links.
A link is hovered when the mouse moves over it.
CSS
Link-Underline
<style type="text/css">
A:link {text-decoratjon: none}
A:visited {text-decoratjon: none}
A:actjve {text-decoratjon: none}
A:hover {text-decoratjon: underline; color: red;}
</style><a href="">kaims</a>
Underline/Overline
<style type="text/css">
A:link {text-decoratjon: none}
A:visited {text-decoratjon: none}
A:actjve {text-decoratjon: none}
A:hover {text-decoratjon: underline overline; color: red;}
</style><a href="">kaims</a>

Size Changing Links


<style type="text/css">
A:link {text-decoratjon: none}
A:visited {text-decoratjon: none}
A:actjve {text-decoratjon: none}
A:hover {font-size:24; font-weight:bold; color: red;}
</style><a href="#">kaims</a>

Background Colored Link


<style type="text/css">
A:link {background: #FFCC00; text-decoratjon: none}
A:visited {background: #FFCC00; text-decoratjon: none}
A:actjve {background: #FFCC00; text-decoratjon: none}
A:hover {background: #FFCC00; font-weight:bold; color: red;}
</style><a href="">kaims</a>

Lab 26
CSS List
list-style type
Defjnes the look of the bullets used in the list

list-style image
custom graphic for bullets

list-style positjon
Ofen the text in a list is longer than one line.

list-style positjon:outer
lets the second line align with the fjrst line. That is: the
bullet is to the lef of both lines.
list-style positjon:inner
lets the second line align with the bullet.
CSS
Layers
 Pieces of HTML that are placed on top of the regular page with pixel
precision
 To create a layer assign the positjon aturibute to the style
 The positjon itself is defjned with the top and lef propertjes
 The lef and top propertjes defjnes the exact positjon of the layer
 The Top layer is defjned with the z-index aturibute
positjon:absolute
If the positjon is absolute it will be calculated from the upper lef corner of the
page - unless the layer is defjned inside another layer, in which case it will be
calculated from the upper lef corner of the parent layer.

positjon:relatjve
If the positjon is relatjve it will be relatjve to the positjon of the tag that carries the
style.

Hidden Layer
visibility property that allow to create invisible layers.
<div style="positjon:relatjve; visibility:hidden;">NFC IET</div>

<head>
<body>
<div style="background-color:green;
width:100px;
height:100px;
positjon:relatjve;
top:10px;
lef:80px;
z-index:2;">
</div>
<div style="background-color:blue;
width:100px;
height:100px;
positjon:relatjve;
top:-60px;
lef:35px;
z-index:1;">
</div>
</body>
</html>
OUTPUT:

The CSS Box Model


In CSS, the term "box model" is used when talking about design and layout.

The CSS box model is essentially a box that wraps around every HTML element. It consists of:
content, padding, borders and margins. The image below illustrates the box model:

 Content - The content of the box, where text and images appear
 Padding - Clears an area around the content. The padding is transparent
 Border - A border that goes around the padding and content
 Margin - Clears an area outside the border. The margin is transparent

 The box model allows us to add a border around elements, and to define space between
elements.

<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: lightgrey;
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
</style>
</head>
<body>
<h2>Demonstrating the Box Model</h2>

<p>The CSS box model is essentially a box that wraps around every HTML element. It
consists of: borders, padding, margins, and the actual content.</p>

<div>This text is the content of the box. We have added a 50px padding, 20px margin and
a 15px green border. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

</body>
</html>
OUTPUT:
HOTEL WEBSITE:
LOGIN PAGE SOURCE CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LOGIN IN PAGE </title>
</head>
<style>
body{
background-image:url(sign\ in.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 80% 100%;
}
</style>
<body>
<!-- header -->
<header>

<a href="#">LOGIN</a>
<a href="signup.html">SIGNUP</a>
</header>
<!-- login in form -->
<h1 style="color: brown;">
Login In Your Account
</h1>
<h2 style="color:red ;">LOG IN</h2>

<form action="">

<label for="name" style="color:red ;">EMAIL</label>


<input id="name" type="email" placeholder="Type Your Email"><br>
<label for="name" style="color:red;"">PASSWORD</label>
<input id="name" type="password" placeholder="Type your
PASSWORD"><br>
<button style="color: blue;">
Submit
</button>
</form>

<h3 style="color: brown;">


Don't have an account <b>?</b> click here to register <a
href="signup.html"> Signup page</a>
</h3>
<br><br>
<!-- footer -->
<footer style="color: brown;">
All Right Reserved 2023
</footer>
</body>
</html>
OUTPUT:

SIGN UP PAGE CODE:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title >SIGN UP PAGE </title>
<style>
body{
background-image:url(sign\ up.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
</style>
</head>
<body>
<!-- header -->
<header>

<a href="login.html">LOGIN</a>
<a href="#">SIGNUP</a>
</header>
<!-- registeration form -->
<h1 style="color: greenyellow;" >
Register Your Self
</h1>
<h2 style="color:red;">SIGN UP</h2>

<form action="">
<label for="name" style="color:red;">NAME</label>
<input id="name" type="text" placeholder="Type Your Name"><br>
<label for="name" style="color: red;">EMAIL</label>
<input id="name " type="email" placeholder="Type Your Email"><br>
<label for="name" style="color: red;" >PASSWORD</label>
<input id="name" type="password" placeholder="Type your
PASSWORD"><br>
<label for="name" style="color: red;">CONFIRM PASSWORD</label>
<input id="name" type="password" placeholder="Type password again">
<br>
<button style="color: blue;">
Submit
</button>
</form>
<h3 style="color:brown;">
Alreday have an account <b>?</b> click here to <a href="login.html">
login</a>
</h3>
<br><br>
<!-- footer -->
<footer style="color: brown;">
All Right Reserved 2023
</footer>
</body>
</html>

OUTPUT:
FRONT PAGE CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hotel booking</title>
<link rel="stylesheet" href="style.css">

</head>
<body>
<header class="header">
<a href="image.jpg" id="logo"><img src="image.jpg" style="border-radius:
50%;" alt="" ></a>
<nav class="navbar">
<a href="homepage.html">home</a>
<a href="about-us.html">about us</a>
<a href="login.html">Login</a>
<a href="booking.html">bookings</a>
<a href="contact-us.html">contact</a>
</nav>
<div class="icons">

<div class="fas fa-user" id="myuser"></div>


<div class="fas fa-search" id="serach-bar"></div>
<div class="fas fa-bars" id="menu-bars"></div>
</div>
<div class="search-box">
<input type="search" placeholder="search here">
</div>

</header>
<!-- background image -->

<div class="main-background">
<div class="main-text">
<h2 style="color:white;">Scholar's Haven Hotel</h2>
</div>

</div>
<!-- background image ended -->
<div class="award-winning-hotel">
<h1>award <span>winning</span> hotels</h1>
<div class="main-hotel">
<div class="inner-award">
<img src="imgaes/award1.png" alt="">
<h2>middle town</h2>
<p>We fill the space content. High-quality, beautiful, solid and
pleasant to the touch. Furniture and decoration of concrete? You to us.</p>
</div>
<div class="inner-award">
<img src="imgaes/award 2.png" alt="">
<h2>middle town</h2>
<p>We fill the space content. High-quality, beautiful, solid and
pleasant to the touch. Furniture and decoration of concrete? You to us.</p>

</div>
<div class="inner-award">
<img src="imgaes/award 3.png" alt="">
<h2>middle town</h2>
<p>We fill the space content. High-quality, beautiful, solid and
pleasant to the touch. Furniture and decoration of concrete? You to us.</p>

</div>
<div class="inner-award">
<img src="imgaes/award4.png" alt="">
<h2>middle town</h2>
<p>We fill the space content. High-quality, beautiful, solid and
pleasant to the touch. Furniture and decoration of concrete? You to us.</p>

</div>
<div class="inner-award">
<img src="imgaes/award5.png" alt="">
<h2>middle town</h2>
<p>We fill the space content. High-quality, beautiful, solid and
pleasant to the touch. Furniture and decoration of concrete? You to us.</p>
</div>
<div class="inner-award">
<img src="imgaes/award6.png" alt="">
<h2>middle town</h2>
<p>We fill the space content. High-quality, beautiful, solid and
pleasant to the touch. Furniture and decoration of concrete? You to us.</p>

</div>
</div>

</div>
<!-- award winning ended -->
<!-- roomes -->
<div class="our-rooms">
<h1>Our <span>rooms</span></h1>
<div class="inner-rooms">
<div class="room-box">
<img src="imgaes/award1.png" alt="">
<div class="beds">
<span>1 bed</span><i class="fas fa-bed"></i>
</div>
<div class="book-room-btn">
<a href="#" class="book-room">Book now</a>
</div>
</div>

<div class="room-box">
<img src="imgaes/award1.png" alt="">
<div class="beds">
<span>1 bed</span><i class="fas fa-bed"></i>
</div>
<div class="book-room-btn">
<a href="#" class="book-room">Book now</a>
</div>
</div>

<div class="room-box">
<img src="imgaes/award1.png" alt="">
<div class="beds">
<span>1 bed</span><i class="fas fa-bed"></i>
</div>

<div class="book-room-btn">
<a href="#" class="book-room">Book now</a>
</div>

</div>
</div>
</div>

<!-- roomes ended -->


<div class="second-background">
<div class="second-text">
<h1>winter</h1>
<h2>weather</h2>
</div>
</div>

<!-- our gallery -->

<div class="gallery">
<h1>Our <span>gallery</span></h1>
<div class="main-gallery">
<div class="inner-gallery">
<img src="imgaes/award1.png" alt="">

</div>
<div class="inner-gallery">
<img src="imgaes/award1.png" alt="">

</div>
<div class="inner-gallery">
<img src="imgaes/award1.png" alt="">
</div>
<div class="inner-gallery">
<img src="imgaes/award1.png" alt="">
</div>
<div class="inner-gallery">
<img src="imgaes/award1.png" alt="">
</div>
<div class="inner-gallery">
<img src="imgaes/award1.png" alt="">
</div>
</div>
</div>

<script src="script.js"></script>
</body>
</html>
OUTPUT:

HOMEPAGE SOURCE CODE:


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

</head>
<style>
body{
background-image:url(all.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
</style>
<body>
<!-- header -->
<header>
<a href="#">HOME</a>
<br>
<video width="320" height="240" controls autoplay muted>
<source src="simple.mp4" >
</video>

<!-- full size image...!>


<!-- CATAGORIES -->
<h2 style="color: brown;">What You Can Get From Here</h2>
<ul>
<li>CHICKEN </li>
<li>BIRYANI </li>
<li>VEGETABELS</li>
<a href="https://travelpakistani.com/blogs/top-10-most-popular-pakistani-
foods/133" style="color: rgb(142, 165, 42);" > VIEW MORE</a>

<h2 style="color:darkred ;">BIRYANI</h2>


<img src="chikn biryani-.jpg" width="200" height="150">
<img src="white-biryani.jpg" width="200" height="150">
<img src="pulao-biryan.jpg" width="200" height="150">
<img src="tahari-dish.jpg" width="200" height="150"> <a
href="https://hinzcooking.com/12-pakistani-rice-dishes-for-dinner-lunch/"
style="color: brown;">VIEW MORE</a>

<h2 style="color:darkred ;" >CHICKEN</h2>


<img src="chikn khrahi.jpg" width="200" height="150" id="img1">
<img src="methi-chicken.jpg" width="200" height="150" id="img1">
<img src="chicken-curry.jpg" width="200" height="150" id="img1">
<img src="chiken.jpg" width="200" height="150" id="img1">
<a href="https://recipe52.com/chicken-gravy-recipes-easy/" style="color:
brown;">VIEW MORE</a>
<h2 style="color:darkred;">VEGETABELS</h2>
<img src="BINDI.jpg" width="200" height="150">
<img src="MIX SABZI.jpg" width="200" height="150">
<img src="mix-veg-masala.jpg" width="200" height="150">
<img src="veg-kadai-1.jpg" width="200" height="150">
<a href="https://www.mirchitales.com/25-pakistani-vegetarian-recipes-you-have-to-
make/" style="color: brown;">VIEW MORE</a>

<!-- Footer -->


<footer style="color:yellow;">
FOR ALL OTHER
<a href="https://recipe52.com/chicken-gravy-recipes-easy/" style="color:
brown;">VISIT TO THIS LINK</a>
</footer>
</ul>
<br><br>
<!-- footer -->
<footer style="color: red;" >
All Right Reserved 2023
</footer>

</body>
</html>

OUTPUT:
BOOKING PAGE CODE:
<!DOCTYPE html>
<html>
<head>
<title>Booking</title>
<style>
.test2{
color:white;
}
</style>
</head>
<style>
body{
background-image:url(hotebook.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
h1{
border-width: 3px;
border-style: dashed;
width:200px;
height: 100px;
text-align: center;
}

</style>
<body>
<header>
<a href="#"></a>
</header>
<h1 style="text-align:center; color: blue;" id1="name" >Room Booking</h1>
<form action="booking_process.php" method="post" style="color:red ;">
<label for="name" >Name:</label>
<input type="text" id="name" name="name"placeholder="Type Your NAME"
required><br><br>

<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Type Your Email"
required><br><br>

<label for="checkin">Check-in Date:</label>


<input type="date" id="checkin" name="checkin" required><br><br>
<label for="checkout">Check-out Date:</label>
<input type="date" id="checkout" name="checkout" required><br><br>

<label for="roomtype">Room Type:</label>


<select id="roomtype" name="roomtype">
<option value="single" style="color: brown;">Single</option>
<option value="double">Double</option>
<option value="suite">Suite</option>
</select><br><br>
<button style="color: blue;">
Submit
</button>
</body>
</html>
OUTPUT:

You might also like