HTML(Hypertext Markup Language)
1. Font color, size and face
<html>
<head>
<title>font
</title>
</head>
<body>
<font
color="orange" size="5" face="Comic Sans
MS">Fun orange Comic Sans text</font>
</body>
</html>
<html>
<head>
<title>Bold, Underline, Italic and break
tag</title>
</head>
<body>
Normal text<br>
<b>Bold
text</b><br>
<u>Underline
text</u><br>
<i>Italic
text</i><br>
</body>
</html>
3.
3. Heading tag
<html>
<head>
<title>Heading
tag</title>
</head>
<body>
Normal text<br>
<h1>heading
1</h1>
<h2>heading
2</h2>
<h3>heading
3</h3>
<h4>heading
4</h4>
<h5>heading
5</h5>
<h6>heading
6</h6>
</html>
Lab assignment 1: Write an HTML program to describe what the Web is and how it works. Use headings, formatting tags, and a background color.
<head>
<title>Web
Technology</title>
</head>
<body bgcolor="sky
blue">
<h1>Chapter 6: Web
Technology</h1>
<font
color="Pink" size="5" face="Comic Sans MS">
<b><u>Web
Technology</u></b>
</font>
<p><b>What
is the Web?</b><br>
The
<i>web</i> is a place on the internet where
we
find websites. <u>Web pages</u> show words, pictures, and
buttons.</p>The
Web, short for the World Wide Web, is a vast system of
interlinked
documents, media, and resources accessed over the internet
through
web browsers. It allows people to view and interact with
webpages
using technologies like HTML, CSS, and JavaScript, all
connected
by hyperlinks and identified through URLs. Unlike the internet
—which
is the underlying global network of computers—the Web is the
information
layer that sits on top of it, making it easy for users to navigate,
share
information, communicate, and access services ranging from news
and
entertainment to education and commerce.
A computer asks for a
page and a server sends it.
A
browser shows the page so you can see it.</p>The Web works through
a
set of simple but powerful technologies that let your device request and
display
information from computers around the world:
browser.
2.
Your browser sends a request over the internet to the server that hosts
the
website.
3.
Servers use the HTTP or HTTPS protocol to receive the request and
send
back the appropriate files—usually HTML, CSS, JavaScript, and
media.
4.
Your browser interprets these files:
CSS adds design and layout,
JavaScript adds interactivity.
5.
The browser then renders the webpage, showing you text, images,
buttons,
forms, and everything else you interact with.
6.
When you click or navigate, this process repeats, allowing you to move
smoothly
between connected pages across the global network.
You can
<i>create</i> stories, games, and art that
friends
can visit and enjoy!</p>
Learning
how the Web works—and how to build for it—lets you turn your
ideas
into real, interactive experiences that anyone can access. You can
create
stories, games, artwork, and entire worlds that friends, family, or
even
people across the globe can visit and enjoy right from their browsers.
It’s
a way to share your creativity, build useful tools, express yourself, and
even
develop skills that can grow into future opportunities in technology,
design,
or storytelling. The Web gives you a platform where imagination
becomes
something others can explore.
</body>
</html>
Lab assignment 2:Make a HTML document which shows following contents:
(a+b)2 =
a2+ 2ab + b2
(a-b)2 =
a2-2ab + b2
(a+b)3=
a3-3a2b + 3ab2+ b3
(a-b)3=
a3-3a2 b + 3ab2 -b3
(a+b)4=a4+4a3b+6a2b2+4ab3+b4
2H2+O2→2H2O
CH4+O2→CO2+2H2O
Zn+H2SO4→ZnSO4+H2↑
H2SO2 +
2NaOH→Na2SO4 +2H 2O
2N2 +
5O2→2Na2O5
<head>
<title>
Lab Assignment 2 </title>
</head>
<body>
(a+b)<sup>2</sup> =
a<sup>2</sup>+ 2ab + b<sup>2</sup>
<br>
(a-b)<sup>2</sup> =
a<sup>2</sup>-2ab + b<sup>2</sup>
<br>
(a+b)<sup>3</sup>=
a<sup>3</sup>-3a<sup>2</sup>b +
3ab<sup>2</sup>+ b<sup>3</sup>
<br>
(a-b)<sup>3</sup>=
a<sup>3</sup>-3a<sup>2</sup> b +
3ab<sup>2</sup> -b<sup>3</sup>
<br>
(a+b)<sup>4</sup>=a<sup>4</sup>+4a<sup>3</sup>b+6a<sup>2</sup>b<sup>2</sup>+4ab<sup>3</sup>+b<sup>4</sup>
<br>
2H<sub>2</sub>+O<sub>2</sub>→2H<sub>2</sub>O
<br>
CH<sub>4</sub>+O<sub>2</sub>→CO<sub>2</sub>+2H<sub>2</sub>O
Zn+H<sub>2</sub>SO<sub>4</sub>→ZnSO<sub>4</sub>+H<sub>2</sub>↑
<br>
H<sub>2</sub>SO<sub>2</sub>
+ 2NaOH→Na<sub>2</sub>SO<sub>4</sub> +2H
<sub>2</sub>O
2N<sub>2</sub> +
5O<sub>2</sub>→2Na<sub>2</sub>O<sub>5</sub>
</body>
</html>
<Head>
<Title>
table</Title>
</Head>
<Body Bgcolor="Gold">
<Table
Border="2" >
<Tr >
<Th> Mark-Sheet </Th>
</tr>
<Tr bgcolor="blue">
<Th> Name </Th>
<Th> Percentage</Th>
<Th> Division</Th>
</Tr>
<Tr >
<Td align = Left> Rajesh
</Td>
<td align = Left> 80</Td>
<td align = Center> 1st</Td>
</Tr>
<Tr>
<Td align =
Left> Sanjana</Td>
<Td align =
Left> 85 </Td>
<Td align =
Center> 1st</Td>
</Tr>
<Tr>
<Td align =
Left> Shristi</Td>
<Td align =
Left> 75</Td>
<Td align =
Center> 1st </TD>
</Tr>
</Table>
</Body>
</HTML>
Lab assignment 4:Table
<head>
<title> menu
table</title>
</head>
<body bgcolor="sky
blue">
<table
border="1">
<tr>
<th colspan="2"><font
color="white">Menu</font></th>
</tr>
<tr bgcolor="#CCCCCC">
<td>Momo</td>
<td>Rs.165</td>
</tr>
<tr bgcolor="#E6E6E6">
<td>Pizza</td>
<td>Rs.345</td>
</tr>
<tr bgcolor="#CCCCCC">
<td>Coke/fanta/sprite</td>
<td>Rs.60</td>
</tr>
</table>
</body>
</html>
<HTML>
<HEAD>
<TITLE>LAB work</TITLE>
</HEAD>
<BODY>
<H1><MARQUEE><p style="color:GREEN">ROSE BUD SCHOOL</p></MARQUEE></H1>
<img src="image.jpg" alt="Girl in a jacket" width="100" height="100">
<br>
<a href="https://www.rosebudschoolnepal.org//">rosebud school website</a>
</BODY>
</HTML>
Lab assignment 6
<html>
1.
Unordered List (<ul>)
An
unordered list shows items with bullets (no specific order).
Example
<html>
<head>
<title>lab
assignment</title>
</head>
<body>
<h3>Fruits</h3>
<ul>
<li>Apple
<li>Banana
<li>Orange
</ul>
</body>
</html>
Types of
Unordered Lists
You
can change bullet styles using the `type` attribute.
|
Type
Value |
Bullet
Style |
|
disc`
(default) |
● |
|
circle |
○ |
|
square |
■ |
Example
with Types
<ul
type="circle">
<li>HTML
<li>CSS
<li>JavaScript
</ul>
2. Ordered List (<ol>)
An
ordered list shows items in a specific order, usually with numbers.
Example
<html>
<head>
<title>lab
assignment</title>
</head>
<body>
<h3>Steps
to Make Tea</h3>
<ol>
<li>Boil water
<li>Add tea leaves
<li>Add sugar and milk
<li>Serve hot
</ol>
</body>
</html>
Types of Ordered
Lists
|
Type
Value |
Format |
|
`1`
(default) |
1,
2, 3 |
|
`A` |
A,
B, C |
|
`a` |
a,
b, c |
|
`I` |
I,
II, III |
|
`i` |
i,
ii, iii |
Example
with Types
<ol
type="A">
<li>Maths
<li>Science
<li>English
</ol>
3. Starting
Number in Ordered List
You
can start counting from a different number using `start`.
<ol
start="5">
<li>Chapter Five
<li>Chapter Six
</ol>
Lab assignment 8:Form
<html>
<head>
<title>Registration Form</title>
</head>
<body bgcolor="yellow">
<h2>Registration Form</h2>
<form>
Name:
<input type="text" name="name">
<br><br>
Contact Number:
<input type="number" name="number">
<br><br>
Email:
<input type="email" name="email">
<br><br>
Gender:
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
<input type="radio" name="gender" value="other"> Other
<br><br>
Course:
<select name="course">
<option value="Science">Science</option>
<option value="Management">Management</option>
<option value="Humanities">Humanities</option>
</select>
<br><br>
<input type="checkbox"> I agree to the terms
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
