Computer HTML

UNIGLOBE SECONDARY SCHOOL
Kamaladi Ganesthan, Kathmandu
LAB REPORT 6:Html
SUBMITTED BY: SUBMITTED TO:
NAME: Nish Adhikari
GRADE: XI (J1) (Mr.SanjogSir / Binaya Sir)
KATHMANDU, NEPAL
2023
A Project On
HTML And CSS
Submitted as a partial fulfillment of requirement of the curriculum of

GRADE-XI (Computer Science) under NEB
Submitted By:
Nish Adhikari
Under Supervision Of
Sanjog Bhandari/Binaya Adhikai
Acknowledgement
I Nish Adhikari, would like to express my deep appreciation and gratitude to my subject
teacher and lecturer Mr. Sanjog &Binaya, Sir for their constant help, advice, information and
encouragement in this project.
I feel immense pleasure to present my project after a long work. Besides my effort, the help
and guideline given by many others hasn’t been unnoticed. I express my gratitude to all those
countless people for the support for me in doing this project.
I express my thanks to Uniglobe Secondary School / College for it has been a source of the
creation of this project and the support, valuable information, resources and guidance given
to me to do this project.
I am also grateful and indebt of my beloved friends for their immeasurable help, support and
encouragement from the beginning to the
End of the project without whom this project would not have been a reality.
Last but not the least I would like to thank my parents, family members, friends, this College
and other who help me for their guidance
And support.
-Nish Adhikari
Objective
Objective is a specific result that a person, a system aims to achieve within a time frame and
with avid able resources. In general, objectives are more specific and easier to measure than
goals. Objectives are basic tools that underlie all planning and strategic activities. They serve
as a basic forecasting policy and evaluating performance.
The main objectives of the project are as follows;
1. To improve my skills in Html.

2. To improve knowledge in Html.
3. Too familiar with Html tags.
4. To improve skill in making project reports.
Background Theory (Html)
1. What is HTML? Write the basic structure of HTML.
HTML is a standard markup language to develop webpages. Hypertext is used for organizing
information and linking the related documents together by using words or links. Such links
are called hyperlinks.
All basic structure of HTML codes start from <html> tag and ends to </html> tag it has two
sections <head> and <body> the head gives the information about title of the web page and
the body contents actual information of the web page
2. What is a listing? Explain different types of listing.
Ans HTML lists are used to present a list of information in a well formed and semantic way.
There are three different types of list in HTML and each one has a specific purpose and
meaning.
● Ordered list: The <ol> tag defines an ordered list which makes a list of items using
the numbers or characters. The <li> sub tag defines the list of items.
Example:
<html>
<head><title>Ordered list</title></head>
<body >
<ol type=a start =1>
<li>Coke</li>
<li>Slice</li>
<li>Fanta</li>
</ol>
</body>
</html>
● Unordered List: The <ul> tag defines an unordered list which makes a bulleted list of
items. The <li> sub tag defines the list of items.
Example:
<html>
<head><title>Unordered list</title></head>
<body>
<ul type= square>
<li>Coke</li>
<li>Fanta</li>
<li>Sprite</li>
</ul>
</body>
</html>
5
● Definition list: This list is not common as compared to the other list. The <dl> tag
defines definition list, <dt> defines definition term and <dd> defines definition
description.
Example:
<html>
<head><title>Definition list</title></head>
<body>
<dl>
<dt>Nepal
<dd>Nepal is famous for natural beauty.
<dt> India
<dd> India is famous for food and culture
<dt> japan
<dd> Japan is famous for science and technology
</dl>
</body>
</html>
3. What is hyperlink? Explain different types of hyperlink used in HTML.
A hyperlink is a link between two files and it is defined by anchor <a> tag in html. The
attribute href (hyperlink reference) helps to create a link between two files.
External Hyperlink:
<html>
<head><title>Hyperlink</title></head>
<body vlink=”blue” alink=”yellow”>
<h1> Hyperlink to external webpage</h1>
<a href=”eg1.html”>click to open</a>
<h1>Hyperlink to complete url which opens on new window</h1>
<a href=”https://www.google.com” target=”_blank”>Search for google</a>
<h1>Hyperlink to download file</h1>
<a href=”p1.jpg” download><image=”p1.jpg” height=40 width=80></a>
</body>
</html>
6
Internal Hyperlink:
<html>
<head><title>Hyperlink between top and bottom</title></head>
<body>
<a href=”#bot”>Goto Bottom</a>
<a name=”top”>Top of the page</a>
<br><br><br><br><br>
<a name=”bot”> Bottom of the page</a>
<a href=”#top”>Goto Top</a>
</body>
</html>
4.Write the use of <table> tag and explain different attributes of <table>
tag with examples.
Ans HTML table tag is used to display data in tabular form (row * column). There can
be many columns in a row.
We can create a table to display data in tabular form, using <table> element, with the
help of <tr> , <td>, and <th> elements.
In Each table, table row is defined by <tr> tag, table header is defined by <th>, and
table data is defined by <td> tags.
HTML tables are used to manage the layout of the page e.g. header section,
navigation bar, body content, footer section etc. But it is recommended to use div tag
over the table to manage the layout of the page .
5. Write the use of <a> tag and explain different attributes of <a> tag with
examples.
Ans Tag and attribute are two concepts related to HTML. The main difference between tag and
attribute is that a tag is a way of representing an HTML element in the program, while an attribute is
a way of describing the characteristics of an HTML element.
7
6. What is <img> tag? Explain different attributes of <img> tag with examples.
Ans: <img> tag is a HTML tag that is used to insert an image in a webpage. The <img> tag
species space on the webpage and the attribute src defines the reference image.
Attribute Descriptions of the attribute

src=”URL” URL or path of image source file.
height=N Height of image in pixel
width=N Width of image in pixels.
border=N Image border in pixels
vspace=N Vertical Space around the image in pixels
hspace Horizontal space around the image in pixel
align=top\bottom\middle\right Image alignment
title=title of the image Comment on the picture area
alt= alternate text Display error message
Example:
<html>
<head><title>Image Insert</title></head>
<body>
<imgsrc=”1.jpg” height=50 width=50 align=right border=5><br>
<imgsrc=”1.jpg” height=50 width=50 hspace=40 vspace=20><br>
<imgsrc=”1.jpg” height=50 width=50 title=”welcome” alt=”refresh your page”><br>
</body>
</html>
7. What is CSS? Write different methods of using CSS in HTML.
Ans Cascading Style Sheets (CSS) is a markup language responsible for how your web pages will look
like. It controls the colors, fonts, and layouts of your website elements.
1.Internal CSS
2.External CSS
3.Inline CSS
8. What is form? Explain different tags used in form.
8
Form is a graphical interface on web page for the users to enter data. The data is spent to the
web server for further processing or storing. A form has many elements depending on input
data types.
<input> tag: This sub tag is an important form element to enter text , number, password, file,
etc. The attribute type specifies the different input fields such as textbox, checkbox, radio
button, file browser, command buttom, submit button,etc.
<select> tag: It provides users to select options from the given list of items. The <select> tag
is used to create a list, the sub tag<option> defines the item of the list and the attribute size
defines the number of items visible at a time.
<textarea> tag: It allows users to type multiple lines of text on a form. The <textarea> tag is
used to define a text area with two attributes: rows define number of characters in row and
cols define the number of characters in columns. For example:
Comments:<textarea rows=3 cols=20 name=”text”>You can write comments</textarea>
<button> tag: It allows users to create a clickable button. It is better to use <button> tag than
using <input type=”button”> because users can put text or picture using tags like
<b>,<i>,<u>etc.
<optgroup> tag: It allows users to make a group of related options in a <select> tag. It is a
useful tag when listing items related to different groups. The attribute label defines the name
for the group.
<fieldset> tag: It allows users to make a group of related elements on form. It creates a line
of boxes around the related elements of the form. The <legend> tag is used to define a
caption for the <fieldset> element.
<level> tag: The label tag specifies a label for elements such as <input>, <select>,
<textarea>, etc. Newer version HTML5 recommends using <label> tag for the element of
form as a good programming practice.
9. What is the use of frameset tag and frame tag in HTML? Explain with examples.
Ans To use frames on a page we use <frameset> tag instead of <body> tag. The <frameset> tag
defines how to divide the window into frames. The rows attribute of <frameset> tag defines
horizontal frames and cols attribute defines vertical frames.
10. Write in short: web page, web site, web server, web browser, search engine
Web page: Webpage is the collection of electronic documents provided by the website to the
user on the internet. We can post the information in the form of text, pictures, audio, video
etc. A web page is developed by using a special type of programming language called
HTML.
Web site: A collection of web pages is called a web site. A website is a collection of web
pages and related content that is identified by a common domain name and published on at
9
least one web server. Examples of notable websites are Google, Facebook, Amazon,
and Wikipedia.
Web server: A web server is software and hardware that uses HTTP (Hypertext Transfer
Protocol) and other protocols to respond to client requests made over the World Wide Web.
The main job of a web server is to display website content through storing, processing and
delivering web pages to users.
Web browser: Web browser is an application software for accessing the information on the
World Wide Web. It helps to insert, update and retrieve different forms of information such as
text, graphics, animations, audio, video etc. from the client site to the server site and vice
versa.
Search engine: Search engine is a wave application or website which helps to sort the
information from the World Wide Web. The search results are presented in the lines of search
engine result pages the sourced information contains webpage links, pictures, video, articles,
research, papers, groups, etc.
Lab work
Heading Tags
<html>
<head><title> First page</title></head>
<body>
<h1>MY NAME IS NISH</h1>
<h2>MY NAME IS NISH </h2>
</body>
</html>
10
Formatting tags
<!DOCTYPE html>
<html lang="en">
<head><title>remaining formatting tags</title></head>
<body>
<hr>
<h3>formatted Text</h3>
<pre>
Name: __________
11
Class : __________
Teacher: _________ Signature: ________
</pre>
<br>
<h3>Different hr properties</h3>
<hr>
<hr size="5">
<hr size="5" color="#f25b50">
<hr size="5" color="#f25b50" width="50%">
<hr size="5" color="#f25b50" width="35%" align="left">
<hr size="5" color="red" width="60%" align="right">
<hr size="5" color="#f25b50" width="40%" align="right">
<hr size="5" color="red" width="20%" align="right">
</body>
</html>
OUTPUT
12
Formatting tags and body tag attributes
<!DOCTYPE html>
<html>
<head><title>Remaining formatting tags</title></head>
<body text="red" bgcolor="#b1faf1" background="back.jpg">
<h3>Superscript and subscript tags</h3>
1. a<sup>3</sup> + b<sup>3</sup><br>
2. a<sup>2</sup> + b<sup>2</sup> + c<sup>2</sup><br>
3. H<sub>2</sub>O<br>
4. H<sub>2</sub>SO<sub>4</sub><br>
<hr>
<em>Emphasize the text</em><br>
<strong>Emphasize the text</strong>
</body>
</html>
13
Listing: Bullets and Numbering
Ordered list:
<!DOCTYPE html>
<html lang="en">
<head><title>Bullets and Numbering</title></head>
<body>
<h2>Bullets and numbering</h2>
<h3>Ordered List: Numbering</h3>
<u><h3>Names</h3></u>
<ol type="1">
<li>Ram</li>
<li>Shyam</li>
<li>Hari</li>
<li>Tina</li>
<li>Mina</li>
</ol>
<u><h3>Games</h3></u>
<ol type="a">
<li>Football</li>
<li>Cricket</li>
<li>Hockey</li>
<li>Basketball</li>
<li>Table Tennis</li>
</ol>
<u><h3>Sports Person</h3></u> <ol type="i">

<li>Messi</li>
14
<li>Ronaldo</li>
<li>Neymar</li>
<li>Bruno</li>
<li>Woods</li>
</ol>
</body> </html>
Unordered List
<!DOCTYPE html>
<html lang="en">
<head><title>Bullets and Numbering</title></head>
<body>
<h2>Bullets and numbering</h2>
<h3>UnOrdered List: Bullets</h3>
<u><h3>Names</h3></u>
<ul type="disc">
<li>kunjan</li>
15
<li>rohit</li>
<li>Hari</li>
<li>Tina</li>
</ul>
<u><h3>Sports</h3></u>
<ul type="square">
<li>Cricket</li>
<li>Football</li>
<li>Hockey</li>
<li>Badminton</li>
</ul>
<u><h3>Movies</h3></u>
<ul type="circle">
<li>Endgame</li>
<li>KGF</li>
<li>Spiderman 1</li>
<li>Bahubali</li>
<li>HULK</li>
</ul>
</body>
</html>
16
17
Images and Marquee
<!DOCTYPE html>
<html lang="en">
<head><title>Images</title></head>
<body>
<p>Football
</p>
<img src="21.jpg" width="200" height="200">
<p><b>The game has ancient origins, but in the late 19th century, Walter Camp helped
shape football—the
American <br>kind—into the sport we know today.
The game has ancient origins, but in the late 19th century, Walter Camp helped shape
football—the
American kind—into the sport we know today.</b></p>
<img src="29.jpg" width="200" height="200">
</body>
</html>
18
Hyperlinks
<!DOCTYPE html>
<html>
<head><title>Hyperlinks</title></head>
<body>
<hr>
<h2>Social sites</h2>
<ul>
<a href="https://www.facebook.com/"><li>Facebook</li></a>
<a href="https://www.youtube.com/watch"><li>YouTube</li></a>
19
<a href="https://www.instagram.com/"><li>Instagram</li></a>
</ul>
<hr>
<h2>Social site links</h2>
<ul>
<a href="https://www.facebook.com/"><li>Facebook</li></a>
<a href="https://www.youtube.com/watch"><li>YouTube</li></a>
<a href="https://www.instagram.com/"><li>Instagram</li></a>
</ul>
</body>
</html>
Forms
<!DOCTYPE html>
<html>
<head><title>Forms in HTML</title></head>
<body>
<h2>Student's Information Form</h2>
<form>
<fieldset>
20
<legend>Student's Information Form</legend>
First Name : <input type="text" name="fname" placeholder="First
Name"><br><br> Last Name : <input type="text" name="lname"
placeholder="Last Name"><br><br> Gender : <input type="radio"
name="gender">Male
<input type="radio" name="gender">Female<br><br>
Email : <input type="email" name="email" placeholder="Email"><br><br>
Upload Photo :<input type="file" name="photo" placeholder="Upload
Photo"><br><br>
Hobbies : <input type="checkbox" name="hobbies">football
<input type="checkbox" name="hobbies">Reading Books
<input type="checkbox" name="hobbies">Drawing
<input type="checkbox" name="hobbies">Cooking food<br><br> Personal
Information : <br><br>
<textarea cols="30" rows="6" placeholder="Type your personal data"></textarea>
<br><br>
</fieldset>
</form>
</body>
</html>
21
Table
<!DOCTYPE html>
<html>
<style>
table, th, td {
border:1px solid black;
</style>
<body>
<h2>A basic HTML table</h2>
<table style="width:100%">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
22
<td>Blue ben</td>
<td>Rang Shah</td>
<td>Mexico</td>
</tr>
</table>
</body>
</html>
23
<table>
<tr>
<th colspan="2">Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>43</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>57</td>
</tr>
</table>
-Photo Gallery
<html>
<head>
<style>
div.gallery {
border: 1px solid #ccc;
div.gallery:hover {
border: 1px solid #777;
24
}
div.gallery img {
width: 100%;
height: auto;
div.desc {
padding: 15px;
text-align: center;
*{
box-sizing: border-box;
.responsive {
padding: 0 6px;
float: left;
width: 24.99999%;
@media only screen and (max-width: 700px) {
.responsive {
width: 49.99999%;
margin: 6px 0;
25
}
@media only screen and (max-width: 500px) {
.responsive {
width: 100%;
.clearfix:after {
content: "";
display: table;
clear: both;
</style>
</head>
<body>
<h2>Responsive Image Gallery</h2>
<h4>Resize the browser window to see the effect.</h4>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="img_5terre.jpg">
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
26
</div>
</div>
<a target="_blank" href="img_forest.jpg">
<img src="img_forest.jpg" alt="Forest" width="600" height="400">
</a>
</div>
</div>
<a target="_blank" href="img_lights.jpg">
<img src="img_lights.jpg" alt="Northern Lights" width="600" height="400">
</a>
</div>
</div>
<a target="_blank" href="img_mountains.jpg">
<img src="img_mountains.jpg" alt="Mountains" width="600" height="400">
</a>
27
</div>
</div>
<div class="clearfix"></div>
<div style="padding:6px;">
<p>This example use media queries to re-arrange the images on different screen sizes: for screens
larger than 700px wide, it will show four images side by side, for screens smaller than 700px, it will
show two images side by side. For screens smaller than 500px, the images will stack vertically
(100%).</p>
<p>You will learn more about media queries and responsive web design later in our CSS
Tutorial.</p>
</div>
</body>
</html>
28
The End
29

Computer HTML

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Computer HTML

Uploaded by

Copyright:

Available Formats

UNIGLOBE SECONDARY SCHOOL

Kamaladi Ganesthan, Kathmandu

LAB REPORT 6:Html

SUBMITTED BY: SUBMITTED TO:

NAME: Nish Adhikari

GRADE: XI (J1) (Mr.SanjogSir / Binaya Sir)

HTML And CSS

Submitted as a partial fulfillment of requirement of the curriculum of

The main objectives of the project are as follows;

1. To improve my skills in Html.

1. What is HTML? Write the basic structure of HTML.

3. What is hyperlink? Explain different types of hyperlink used in HTML.

<body vlink=”blue” alink=”yellow”>

<h1> Hyperlink to external webpage</h1>

<a href=”eg1.html”>click to open</a>

<h1>Hyperlink to complete url which opens on new window</h1>

<a href=”https://www.google.com” target=”_blank”>Search for google</a>

<h1>Hyperlink to download file</h1>

<a href=”p1.jpg” download><image=”p1.jpg” height=40 width=80></a>

<head><title>Hyperlink between top and bottom</title></head>

<a href=”#bot”>Goto Bottom</a>

<a name=”top”>Top of the page</a>

<a name=”bot”> Bottom of the page</a>

<a href=”#top”>Goto Top</a>

Attribute Descriptions of the attribute

<imgsrc=”1.jpg” height=50 width=50 align=right border=5><br>

<imgsrc=”1.jpg” height=50 width=50 hspace=40 vspace=20><br>

<imgsrc=”1.jpg” height=50 width=50 title=”welcome” alt=”refresh your page”><br>

7. What is CSS? Write different methods of using CSS in HTML.

8. What is form? Explain different tags used in form.

Comments:<textarea rows=3 cols=20 name=”text”>You can write comments</textarea>

<head><title> First page</title></head>

<h1>MY NAME IS NISH</h1>

<h2>MY NAME IS NISH </h2>

<h3>MY NAME IS NISH </h3>

<h4>MY NAME IS NISH </h4>

<h5>MY NAME IS NISH </h5>

<h6>MY NAME IS NISH </h6>

Teacher: _________ Signature: ________

<u><h3>Sports Person</h3></u> <ol type="i">

<img src="21.jpg" width="200" height="200">

American <br>kind—into the sport we know today.

American kind—into the sport we know today.</b></p>

<img src="29.jpg" width="200" height="200">

<h2>Social site links</h2>

border:1px solid black;

<h2>A basic HTML table</h2>

border: 1px solid #ccc;

border: 1px solid #777;

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

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

<h2>Responsive Image Gallery</h2>

<h4>Resize the browser window to see the effect.</h4>

<a target="_blank" href="img_5terre.jpg">

<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">

<div class="desc">Add a description of the image here</div>

<a target="_blank" href="img_forest.jpg">

<img src="img_forest.jpg" alt="Forest" width="600" height="400">

<div class="desc">Add a description of the image here</div>

<a target="_blank" href="img_lights.jpg">

<img src="img_lights.jpg" alt="Northern Lights" width="600" height="400">

<div class="desc">Add a description of the image here</div>

Teacher: _ Signature: