Scribd
Upload
18 views25 pages

Class 11 computer science

This lab report provides an introduction to HTML, detailing its structure, functions of various HTML tags, and examples of web pages created using these tags. It covers topics such as HTML elements, attributes, and the latest version, HTML5, along with practical examples for creating lists, inserting images, audio, hyperlinks, tables, and forms. Additionally, it introduces Cascading Style Sheets (CSS) and demonstrates how to apply styles to HTML elements.

Uploaded by

NR Books
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
18 views25 pages

Class 11 computer science

This lab report provides an introduction to HTML, detailing its structure, functions of various HTML tags, and examples of web pages created using these tags. It covers topics such as HTML elements, attributes, and the latest version, HTML5, along with practical examples for creating lists, inserting images, audio, hyperlinks, tables, and forms. Additionally, it introduces Cascading Style Sheets (CSS) and demonstrates how to apply styles to HTML elements.

Uploaded by

NR Books
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/ 25

A Practical Lab report on "Web technology –I(HTML)"

Grade 11 (Science)
ANGELS’ HEART SS/COLLEGE

Department of Computer Science

Submission Date:05-12-2024
Submitted To: Sunil Pandit
Prepared by:
Name: Alisha Dangol
Roll. No. : 4
Faculty/section: Science
Page no. 1

Table of contents
Introduction to HTML ………………………………………………
Functions of basic HTML tags
WEB PAGE 1: HTML page to show basic HTML tag to display
Hello……..
WEB PAGE 2: Webpage to show basic tags <br>,<hr>,<p>………
WEB PAGE 3: Webpage to show heading tags [h1-h6]
WEB PAGE 4: Webpage to show HTML Formatting tags……
WEB PAGE 5: Webpage to format text using marque tag…….
WEB PAGE 6: Webpage to highlight the text using mark tag….
WEB PAGE 7: Webpage to make a list (ordered list)…….
WEB PAGE 8: Webpage to make a list (unordered list)…..
WEB PAGE 9: Webpage to insert image ……
WEB PAGE 10: Webpage to insert audio…..
WEB PAGE 11: Webpage to show hyperlink…..
WEB PAGE 12: Webpage to insert simple table….
WEB PAGE 13: Webpage to insert colspan table….
WEB PAGE 14: Webpage to insert rowspan table…..
WEB PAGE 15: Webpage to make form….
WEB PAGE 16: Webpage to use select and choose tag….
INTRODUCTION TO CASCADING STYLE SHEET (CSS)….
WEB PAGE 17: Code of cascading style sheet…….
Page no. 2

Introduction to HTML

HTML stands for hypertext markup language. It is used to design the


front end position of web pages using mark up language . HTML is
the combination of hypertext and markup language. Hypertext defines
the text of documentation within the tag which defines the structure of
webpages. HTML describes the structure of web pages semantically
and originally includes cues for the appearance of the document.
HTML elements are building blocks of HTML pages with HTML
constructs images and other objects such as interactive forms
embedded into the rendered page .

HTML Tag
HTML tag is a special word enclosed inside the angular brackets()
which has specific meaning and the function in the HTML. It defines
that how web browser will format and display the content with the
help of tags , a web browser can distinguish between on HTML
content and a simple content HTML tags contain three main parts :
opening tag and closing tag but some HTML tags are enclosed tags .
for example :<html> , <p> ,<img> etc . There are two types of tags .
they are as follows

1.Paired tags
Paired tags are a set of two tags with same name in each paired tag
set , one is on the opening tag and the other one is the closing tag .
The closing tag has a (/) slash . It means that the tag is closed now . It
ensures that the effect of the website when the tags would be
limited to only content between them.
EXAMPLE : <html> </html> , <b> </b> etc
Page no. 3

2. Unpaired Tags
Unpaired tags are single tags with no closing tag. These tags are
called singular tag , non-container Tag or empty tag because they do
not contain any content .
Example: <br>, <hr>,<img> etc
Some common tags: body, syntax, background , bgcolor , text etc

HTML Tag Attributes


HTML tag attributes are additional properties of any tags placed
inside the element’s opening tag ; all attributed are made up of two
parts : a name and a value. The name is the property you want to set.
For Example ; The paragraph <p> element in the example of an
attribute whose name is align , which you can use to indicate the
alignment of paragraph on the page , the value is what you want be
value of the property to be set and always put with in quotation.

HTML 5

HTML 5 is the latest version of html . The update improved the


language’s functionally enabling the use of feature that previously
required additional software like browser plugins , it also added the
ability to create application using HTML that function offline here are
some of the tags that HTML added to the language , it has improved
the markup available for documents and has introduced application
programming interfaces (API) And document object model(DOM):
Page no .4

<video> Auto play buffer , control , height , loop , preload , poster ,


SRC, width etc

HTML Tags and their functions

a) <!DOCTYPE html> : declares the html version


b) <html>: wraps the entire html document
c) <head>: contains metadata like title , character set , styles and
scripts
d) <title>: sets the document title
e) <body>: contains the main content of the html document
f) <h1>to<h6>: define heading , where <h1> is the largest and
<h6>is the smallest.
g) <p>: represents paragraphs of text.
h) <a>: creates hyperlinks , linking to another document or
resource.
i) <img>: embeds images
j) <ul> : define unordered list
k) <ol>: define ordered list
l) <li>: represents list items within <ul>or<ol>
m) <div>: groups content for styling or layout purposes .
n) <span>: applies styles to inline elements
o) <br>: inserts a line break within text .
p) <hr>: represents a horizontal rule or line
q) <strong> and <em>: Emphasis text with strong and
emphasized importance respectively
r) <input>: creates input fields for forms.
s) <form>: wraps form elements for user input.
t) <table>,<tr>,<td>,<th>: constructs tables , rows and cells for
tabular data
Page no. 5

u) <iframe>:Embeds external content , like a webpage or video


within the current document.d
Page no. 6

Web page 1: HTML page to show basic


HTML tag to display hello
CODE:
<html>
<body bgcolor=”green”>
Hello
</body>
</html>

Screenshot of output from browser


Page no 7

Web page 2: Web page to show basic tags


(<br>,<hr>,<p>)
CODE:
<html>
<title>line and paragraph breaking</title>
<body bgcolor ="pink" text ="brown">
GREETINGS TO EACH AND EVERYONE
<br>
<hr>I AM A STUDENT OF GRADE-11 SCIENCE<p>
nice to meet you
</body>
</html>
Screenshot of output from browser
Page no.8

Web page 3 : Webpage to use heading


tags(h1-h6)

CODE:
<html>
<title>heading tags</title>
<body bgcolor = "sky blue" text="white">
<h1>GOOD MORNING </h1>
<h2>GOOD EVENING</h2>
<h3>GOOD AFTERNOON</h3>
<h4> HAVE A NICE DAY</h4>
<h5>THANK YOU </h5>
</h6>YOU'R WELCOME </h6>
</body>
</html>
Screenshot of output from browser
Page no . 9

Web page 4 : Webpage to show HTML


formatting tags
CODE:
<html>
<title>formatting tags</title>
<body bgcolor="orange" text ="red">
<b>bold text</b>
<br>
<i>italic text</i>
<br>
<u>underlined text</u>
<br>
<s>strike through text</s>
<br>
subscript. H<sub>2</sub>O
<br>
supscript.a<sup>2</sup>+b<sup>2</sup>
Screenshot of output from browser
Page no 10

Web page 5: Webpage to format text using marquee


tag
The marquee tag is a non-standard HTML element
that makes text or images scroll automatically across
the screen
CODE:
<html>
<title>formatting tags </title>
<body bgcolor="grey">
<marquee>are you here?<marquee>
</body>
</html>
Screenshot of output from browser
Page no 11
Web page 6: Webpage to highlight the text using
mark tag
CODE:
<html>
<title>formatting tags </title>
<body bgcolor="sky blue">
<mark>hi ..its me</mark>
<br>
<mark>how are you?</mark>
<br>
<mark>I am fine too</mark>
</body>
</html>
Screenshot of output from browser
Page no.12
Web page 7: Webpage to make a list (ordered list)
CODE:
<html>
<body bgcolor="yellow" text="red">
<h1 align="center">list of fruits</h1>
<ol type=1 start=1>
<li>apple</li>
<li>banana</li>
<li>mango</li>
</ol>
</body>
</html>
Screenshot of output from browser
Page no .13
Web page 8: Web page to make a list(unordered list)
CODE:
<html>
<body bgcolor="yellow" text="red">
<h1 align="center">list of students</h1>
<ul type="disc">
<li>Ram</li>
<li>Hari</li>
<li>Sita</li>
</ul>
</body>
</html>
Screenshot of output from browser
Page no.14
Web page 9: Webpage to insert image
CODE:
<html>
<title>image html</title>
<body bgcolor="blue">
<img src="pikachu.jpg"height=150 width=150>
</body>
</html>
Screenshot of output from browser
Page no. 15
Web page 10: Webpage to insert audio
CODE:
<html>
<body>
<div id=1>
<audio src="song1.mp3"controls>
</div>
<div id =2>
<audio src="song2.mp3"controls>
</div></body>
</html>
Screenshot of output from browser
Page no 16
Web page 11: Webpage to show hyperlink
CODE:
<html>
<title>hyperlink<title>
<body bgcolor="pink">
<h1 align="center"><u><i>LIST OF TOP
WEBSITES</h1></u></i>
<ol type=1 start=1>
<li>google<a href="https://www.google.com"></li>
<li>facebook<a
href="https://www.facebook.com"></li>
</body>
</html>
Screenshot of output from browser
Page no 17
Web page 12: Webpage to insert table
CODE:
<html>
<title>table</title>
<body>
<h1 align="center">list of students</h1>
<table border="2px"height=150 width=150 align="center">
<tr align="center"><th>SN.</th>
<th>NAME</th>
<th>class</th>
<th>roll no.</th></tr>
<tr align="center"><td>1</td>
<td>Ram</td>
<td>11</td>
<td>1</td></tr>
<tr align="center"><td>2</td>
<td>shyam</td>
<td>11</td>
<td>2</td></tr>
<tr align="center"><td>3</td>
<td>hari</td>
<td>11</td>
<td>4</td></tr>
</table>
</body>
</html>
Screenshot of output from browser
Page no 18
Web page 13: Webpage to insert colspan table
CODE:
<html>
<title>table with colspan</title>
<body>
<table border="2px"height=150 width=150 align="center">
<tr align="center"><td colspan=4>list of students</td></tr>
<tr align="center"><th>SN.</th>
<th>NAME</th>
<th>class</th>
<th>roll no.</th></tr>
<tr align="center"><td>1</td>
<td>Ram</td>
<td>11</td>
<td>1</td></tr>
<tr align="center"><td>2</td>
<td>shyam</td>
<td>11</td>
<td>2</td></tr>
<tr align="center"><td>3</td>
<td>hari</td>
<td>11</td>
<td>4</td></tr>
</table>
</body>
</html>Web page

Screenshot of output from browser


Page no 19
Web page 14:Webpage to insert rowspan table
CODE:
<html>
<title>table with rowspan</title>
<body>
<table border="2px"height=150 width=150 align="center">
<tr align="center"><td rowspan=5>list of students</td></tr>
<tr align="center"><th>SN.</th>
<th>NAME</th>
<th>class</th>
<th>roll no.</th></tr>
<tr align="center"><td>1</td>
<td>Ram</td>
<td>11</td>
<td>1</td></tr>
<tr align="center"><td>2</td>
<td>shyam</td>
<td>11</td>
<td>2</td></tr>
<tr align="center"><td>3</td>
<td>hari</td>
<td>11</td>
<td>4</td></tr>
</table>
</body>
</html>
Screenshot of output from browser
Page no. 20
Web page 15: Webpage to make form
CODE:
<html>
<title>forms</title>
<body bgcolor="grey"><fieldset><legend align="center">please fill the form
</legend>
<form>
<h1 align="center">registration form </h1>
first name<input type="text" placeholder="input your first name here">< br>
last name<input type="text" placeholder="input your last name here"><br>
email<input type="email"placeholder="input your email here"><br>
password<input type="password"placeholder="input your password
here"><br>
phone number<input type="number"placeholder="input phone number
here"><br>
gender<input type="radio"name="gender">male
<input type="radio"name ="gender">female<br>
hobbies<input type="checkbox">reading
<input type ="checkbox">swimming
<input type="checkbox">playing<br>
<input type="submit"value="register">
<input type="reset" value="reset values">
</form>
</fieldset>
</body>
</html>
Screenshot of output from browser
Page no. 21
Web page 16: Webpage to use select and choose tag
CODE:
<html>
<title>select choose </title>
country<select>
<option>Nepal</option>
<option>India</option>
<option>USA</option>
<option>China</option>
</select>
</body>
</html>
Screenshot of output from browser
Page no 22
Web page 17: Cascading style sheet(CSS)
# Features of Cascading Style Sheet(CSS)
 To add effect to HTML
 To make dynamic web pages
 To create attractive animation effects

Three ways of adding CSS to HTML:


1. Inline CSS method.
In this method ,CSS code are directly inserted inside any tag with
style attribute.
Example:<p style =color:red”>
<h2 style=”text align:center”>
Internal CSS method
2.In this method CSS codes are written inside style 1 style tag either
within <head>or <body>tag.
External CSS has three parts(components):
Selector(normally tag,class or id )
Property(attributes of tag, class id)
Value
# Syntax of Internal CSS
Selector{
Property 1: value 1;
Property 2: value 2;}
Three ways to use selectors
Page no 23

1.Tag only write selector tag,eg:-P{}


2.Id write #before id name,eg:-P{}
3.Class write before classname, P{}
Page no 24

Web page 18: Code of cascading style sheet


CODE:
<html>
<head>
<style>
body{
background-color:orange;
}
h2{
text-align:center;
color:blue;
background-color:yellow;
padding:20;
margin-right:80px;
}
h1{
color:sky blue;
margin-left:40px;
}
</style></head>
<body>
<h1>hello class 11 science</h1>
<h2>we are grade 11 learner</h2>
<p style="color:green">this is a paragraph </p>
</body>
</html>

SCREENSHOT OF OUTPUT FROM BROWSER

You might also like