PROJE
CT
Submitted by:
Submitted to: Krisha
Maharjan IT Department
Chaman Singh Budhathoki
Abhusan Lal Shrestha
Grade:11(Eleven)
2024
Acknowledgement
We would like to express our special thanks of gratitude to our teacher
Dina Shrestha who gave us the golden opportunity to do this wonderful
project on the topic Web Technology, which also helped us in doing a lot
of Research and we came to know about so many new things we are
really thankful to her.
Secondly, we would also like to thank our group members and friends
who helped a lot in finalizing this project within the limited time frame.
Table of Content
Objective……………………………………
…1
Introduction………………………………2-
6
Html code(intro)………………………6-7
Html photo(intro)…………………….7-8
Html code (form)………………………….9
Html photo (photo……………………..10
Objectives
To learn HTML code & CSS code
To learn concept how to develop the report
To create a web page
To publish a web page
To insert graphic within a web page
To use cascading style sheets
To create a link within a web page
To create a table within a web page
To insert heading levels within a web page
To insert ordered and unordered lists within a web page
Introduction
Web technology encompasses all the tools, languages, protocols, and
software used to build, manage, and deliver content over the World Wide
Web. This includes technologies like HTML, CSS, JavaScript for front-
end development, as well as server-side scripting languages like PHP,
Python, and Ruby. Additionally, web technology encompasses databases,
web servers, APIs, and frameworks like React, Angular, and [Link].
Security protocols, such as HTTPS and SSL/TLS, are also crucial
components of web technology. Overall, web technology forms the
backbone of the internet, enabling the creation and dissemination of web
pages, applications, and services.
HTML
HTML, or Hypertext Markup Language, is the standard language used
to create and design web pages. It provides a structure for web
documents by using a system of tags and attributes. Here's a brief
overview of HTML tags and attributes:
1. **Tags**:
- Tags are the building blocks of HTML documents and are enclosed in
angle brackets `< >`.
- They define the structure and content of the web page.
- Tags are usually used in pairs: an opening tag and a closing tag.
- Some tags are self-closing and don't require a closing tag.
2. **Attributes**:
- Attributes provide additional information about HTML elements and
are specified within the opening tag.
- They are composed of a name and a value, separated by an equal
sign.
- Attributes modify the behavior or appearance of the HTML element.
Here are some common HTML tags and attributes:
- **<!DOCTYPE>**: Defines the document type and version of HTML.
- **<html>**: The root element of an HTML page.
- **<head>**: Contains meta-information about the HTML document,
such as title, links to stylesheets, and scripts.
- **<title>**: Sets the title of the HTML document displayed in the
browser's title bar or tab.
- **<body>**: Contains the visible content of the HTML document.
- **<h1> to <h6>**: Defines headings of different levels, with `<h1>`
being the highest level and `<h6>` the lowest.
- **<p>**: Defines a paragraph.
- **<a>**: Creates hyperlinks, linking to another webpage or resource.
Attributes include `href` for the URL and `target` to specify where to
open the link.
- **<img>**: Inserts an image into the HTML document. Attributes
include `src` for the image URL and `alt` for alternative text.
- **<div>**: Defines a division or section in an HTML document, often
used for grouping elements.
- **<span>**: Defines a section of text within a document.
- **<ul>**: Defines an unordered list.
- **<ol>**: Defines an ordered list.
- **<li>**: Defines a list item within `<ul>` or `<ol>`.
- **<table>**: Defines a table.
- **<tr>**: Defines a table row.
- **<td>**: Defines a table cell.
- **<form>**: Defines an HTML form for user input. Attributes include
`action` for the URL to submit the form to and `method` for the HTTP
method.
These are just a few examples of HTML tags and attributes. There are
many more available for various purposes in web development.
CSS
CSS stands for Cascading Style Sheets. It's a style sheet language used
for describing the presentation of a document written in a markup
language like HTML. CSS separates the content of a web page from its
visual representation, allowing developers to control aspects such as
layout, colors, fonts, and spacing.
Here are the main types of CSS:
1. **Inline CSS**: CSS rules applied directly to an HTML element
using the `style` attribute. For example:
```html
<p style="color: red; font-size: 16px;">This is a paragraph.</p>
```
2. **Internal CSS**: CSS rules placed within the `<style>` element in
the `<head>` section of an HTML document. For example:
```html
<head>
<style>
p{
color: blue;
font-size: 14px;
}
</style>
</head>
```
3. **External CSS**: CSS rules stored in a separate file with a .css
extension and linked to the HTML document using the `<link>` element.
For example:
```html
<head>
<link rel="stylesheet" type="text/css" href="[Link]">
</head>
```
CSS can also be categorized based on its purpose or usage, such as:
- **Embedded CSS**: CSS rules placed within the `<style>` element
directly within an HTML document.
- **Responsive CSS**: CSS that adjusts the layout and design of a
webpage based on the device's screen size, orientation, and resolution.
- **CSS Frameworks**: Pre-written CSS libraries that provide a
structure and predefined styles to build web pages more efficiently.
Examples include Bootstrap, Foundation, and Bulma.
- **CSS Preprocessors**: Tools like Sass and Less that extend the
functionality of CSS by introducing features like variables, nesting, and
mixins.
- **CSS Animations and Transitions**: CSS properties and techniques
used to create animations and transitions within web pages.
- **CSS Methodologies**: Guidelines and best practices for writing
CSS to improve code maintainability, scalability, and collaboration.
Examples include BEM (Block, Element, Modifier) and SMACSS
(Scalable and Modular Architecture for CSS).
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Himalayan Hotel Lazimpat</title>
<body style="background-color :powderblue;"
<style>
</style>
</head>
<body>
<header>
<h1> <marquee> WELCOME TO HIMALAYAN HOTEL </marquee> </h1>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#rooms">Rooms</a></li>
<li><a href="#gallery">Gallery</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#facilites">facilites</a></li>
</ul>
</nav>
</header>
<section id="about">
<h2>About Us</h2>
<p>Hotel Le Himalaya is a perfect relax station in between the
bustling tourist attraction at Lazimpat, Kathmandu. It is the most
convenient address and has easy access to the popular vinicities at
Kathmandu. The hotel built lavish in Himalayan style has an eye catching
traditional decoration and fine craftsmanship. The aims is to never
compromise in quality service. The humble and friendly staffs are always
dedicated to provide you best service they could. Also, can take any other
services making a call to the front desk any time.
The 60 rooms including one Studio Apartment and one Suite room are all
facilitated with modern up to date amenities. Cascading crystal
chandeliers, high coffered ceilings and unblemished stained-glass windows
are the inspiring interior feature here. The rooms are , with completely
decked out with plush contemporary decor and marble bathrooms.
The food served are hygienic and timely. The culinary chef use their best
skills to serve a delight on your table. You can enjoy the delicious
recipes of Indian, Continental and Chinese Cuisine.</p>
</section>
<section id="rooms">
<h2>Our Rooms</h2>
<p>
<ul> <li> Suite Room</li></ul>
<ul> <li> Honeymoon Suite</li></ul>
<ul> <li> Deluxe Room</li></ul>
</p>
</section>
<section id="gallery">
<h2>Gallery</h2>
<img src="[Link]"
</section>
<section id="contact">
<h2>Contact Us</h2>
<p>Have any Queries? Let us know. We will clear it for you at the
best.
<p> <h3>EMAIL</h3></p>
<li> info@[Link],</li>
<li> reservation@[Link]</li>
</p>
</section>
<section id="facilites">
<h2>Facilites</h2>
<P> Hotel Le Himalaya offers a wide range of facilities for all
guests. Being oriented to family vacations, we care about each guest. The
hotel reception is at your service 24h a day or have your luggage taken
care of 24h a day. If you are planning a romantic holiday or a business
trip, welcome to Hotel Le Himalaya where you will meet your expectations.
We do our best to make our guests happy!</p>
<footer>
<p>© 2024 Himalayan Hotel Lazimpat. All rights reserved.</p>
</footer>
<a href="[Link] here to fill
form </a>
</body>
</html>
WELCOME TO HIMALAYAN HOTEL
About
Rooms
Gallery
Contact
facilites
About Us
Hotel Le Himalaya is a perfect relax station in between the bustling tourist attraction at
Lazimpat, Kathmandu. It is the most convenient address and has easy access to the popular
vinicities at Kathmandu. The hotel built lavish in Himalayan style has an eye catching traditional
decoration and fine craftsmanship. The aims is to never compromise in quality service. The
humble and friendly staffs are always dedicated to provide you best service they could. Also, can
take any other services making a call to the front desk any time. The 60 rooms including one
Studio Apartment and one Suite room are all facilitated with modern up to date amenities.
Cascading crystal chandeliers, high coffered ceilings and unblemished stained-glass windows are
the inspiring interior feature here. The rooms are , with completely decked out with plush
contemporary decor and marble bathrooms. The food served are hygienic and timely. The
culinary chef use their best skills to serve a delight on your table. You can enjoy the delicious
recipes of Indian, Continental and Chinese Cuisine.
Our Rooms
Suite Room
Honeymoon Suite
Deluxe Room
Gallery
Contact Us
Have any Queries? Let us know. We will clear it for you at the best.
EMAIL
info@[Link],
reservation@[Link]
Facilites
Hotel Le Himalaya offers a wide range of facilities for all guests. Being oriented to family
vacations, we care about each guest. The hotel reception is at your service 24h a day or have
your luggage taken care of 24h a day. If you are planning a romantic holiday or a business trip,
welcome to Hotel Le Himalaya where you will meet your expectations. We do our best to make
our guests happy!
© 2024 Himalayan Hotel Lazimpat. All rights reserved.
Click here to fill form
<html>
<head>
<title> Hotel Booking Form </title>
<body style="background-color:powderblue;">
<center><b><h1>HOTEL BOOKING FORM </b></h1></center>
</style>
<fieldset>
<legend><b><i> Personal Details: </b></i></p></legend>
<label for="name"> Username: </label><input type="text" name="username"
id="name" required autofocus placeholder="Your username">
<label for="email"> Email: </label><input type="text" name="email" id="email"
required placeholder="Your Email">
<label for="phone"> Phone: </label><input type="tel" name="phone" id="phone"
required placeholder="Your phone number">
<select name="country" required>
<option value=""></option>
<option value="Nepal"> Nepal </option>
<option value="US"> US </option>
<option value="UK"> UK </option>
<option value="AUS"> AUS </option>
<option value="China">CHINA </option>
<option value="Korea"> Korea </option>
</select>
</fieldset>
<br>
<fieldset>
<legend><b><i> Booking Details: </b></i></p></legend>
<label for="date">Booking Date: </label><input id="date" type="date"
name="date">
<label for="Number of Guests"> Number of Guests: </label><input type="number"
name="number of guests" min="1" max="10">
<p>Do you require meals?</p>
<label for="Yes"> Yes: <input id:"Yes" type="radio" name="meals" value="yes">
<label for="No"> No: <input id:"No" type="radio" name="meals" value="no">
<br>
<br><label for="Balcony"> Do you require a balcony? </label><input
id="balcony" type="checkbox" name="balcony" value="Yes">
<p><input type="submit" value="Submit"/></p>
</fieldset>
<h1><center>THANK YOU </center></h1>
</body>
</head>
</html>
