PRACTICAL FILE
Computer Science & Engineering
SUBJECT NAME - Web Technology
NAME
:
RAGHAV GANDOTRA
BRANCH
:
CSE
SEM
:
4 th
ROLL NO
:
22124
Certificate
Certified that this Practical entitled “Web Technology” submitted by RAGHAV
GANDOTRA Roll No. 22124, students of Computer Science & Engineering
Department, Dronacharya College of Engineering, Gurgaon in the partial
fulfilment of the requirement for the award of Bachelors of Technology
(Computer Science & Engineering) Degree of MDU, Rohtak, is a record of
student’s own study carried under my supervision & guidance.
Signature
Signature
Ashima Mehta
Amar Saraswat
HOD CSE
Sr. No Practical Name
1
2
Write a simple HTML code for
writing Headings on a web page
Write a simple HTML code for
writing Text Elements on a web
page.
Page No. Date
1
2
Sign
3
4
5
6
7
8
9
10
Write a simple HTML code for
implementing styles on a web page.
Write a simple HTML code for
implementing physical styles on a
web page.
Write a simple HTML code for
implementing logical styles on a web
page.
Write a simple HTML code to add
Ordered, Unordered and Definition
list on a web page.
Write a simple HTML code to add an
image and its attributes on a web
page.
Write a simple HTML code to add an
file download option on a web page.
Write a simple HTML code to add an
hyperlink on a web page.
Write a simple HTML code to
implement navigation frame on a
web page.
Navigationframe.htm
3
4
5
6
7
8
9
10
`Web Technology
Practical 1
Write a simple HTML code for writing Headings on a web page
<!DOCTYPE html>
<html>
<head>
<title>Heading elements</title>
</head>
<body>
<h1>This is main heading of page. </h1>
<p>h1 is the most important heading, which is used to display the keyword
of page </p>
<h2>This is first sub-heading</h2>
<p>h2 describes the first sub heading of page. </p>
<h3>This is Second sub-heading</h3>
<p>h3 describes the second sub heading of page.</p>
<p>We can use h1 to h6 tag to use the different subheading
with their paragraphs ifrequired.</p>
</body>
</html>
OUTPUT
Practical 2
Write a simple HTML code for writing Text Elements on a web page
1 | Page
RAGHAV GANDOTRA
RollNo.:22124
Web Technology
<Html>
<Head>
<title>Example of Paragraph tag</title>
</Head>
<Body>
<p>
<!-- It is a Paragraph tag for creating the paragraph -->
<b> HTML </b> stands for <i> <u> Hyper Text Mark-up
Language. </u> </i> It is used to create a web pages and appli
cations. This languageis easily
understandable by the user and also be
modifiable. It is actually a Ma rkup language, hence it provides a
flexible way for designing theweb pages along with the text.
</p>HTML file
is made up of different elements. <b> An element </b> is a c ollection of <i>
start tag, end tag,
attributes and the text between them</i></p>
</Body>
</Html>
OUTPUT
Web Technology
Practical 3
Write a simple HTML code for implementing styles on a web page
<!DOCTYPE html>
<html>
<head>
<title>Practical 3</title>
</head>
<body style="background-color:powderblue;">
<h1 style="background-color:powderblue;">This is a heading</h1>
<p style="background-color:tomato;">This is a paragraph.</p>
<h2 style="color:blue;">This is a heading</h2>
<p style="color:red;">This is a paragraph.</p>
<h3 style="font-family:verdana;">This is a heading</h3>
<p style="font-family:courier;">This is a paragraph.</p>
2 | Page
RAGHAV GANDOTRA
RollNo.:22124
<h4 style="font-size:300%;">This is a heading</h4>
<p style="font-size:160%;">This is a paragraph.</p>
<h5 style="text-align:center;">Centered Heading</h5>
<p style="text-align:center;">Centered paragraph.</p>
</body>
</html>
OUTPUT
Practical 4
Write a simple HTML code for implementing physical styles on a web page
<!DOCTYPE html>
<html>
<head>
<title>Practical 4</title>
</head>
<body style="background-color:powderblue;"><tt>teletypestyle</tt> text should
be
used<big><big> sparingly</big></big>.Otherwise, drink
<strike>lots</strike> 1x10<sup>6</sup>d rops of
H<sub><small><small>2</small></small></sub>O.</body>
</html>
3 | Page
RAGHAV GANDOTRA
RollNo.:22124
Web Technology
OUTPUT
Web Technology
Practical 5
Write a simple HTML code for implementing logical styles on a web page
<!DOCTYPE html>
<html>
<head>
<title>Practical 5</title>
</head>
<body>
<h1> Logical Tags </h1>Welcome to <abbr title="ABCD"> GFG</abbr> <br>This
is <acronym title="ABCD">GFG</acronym>
<br>
<address> ABCD, 5th & 6th Floor, Royal Kapsons</address> <br><cite> ABCD <
/cite> is my favourite website. <br>A
Computer Science portal for geeks. It contains well written, well thought
and wellexplained computer science and
programming articles, and
quizzes.</blockquote><del> This contains deleted content.</del><ins> Newly
inserted
content.</ins>
<p><dfn> ABCD </dfn> is a Computer Science portal for geeks. It contains w
ellwritten, well thought and well
explained computer science and
programming articles,and quizzes.</p><k bd> ABCD - This is a Keyboard input
</kbd>
<pre> Dear User,Congratulations !!We are delighted to inform you that you
are going to be part of GfG journey.Thanks,GfG TeamThis is a predefine formatt
ed text </pre>
</body>
</html>
4 | Page
RAGHAV GANDOTRA
RollNo.:22124
OUTPUT
Practical 6
Write a simple HTML code to add Ordered, Unordered and Definition list on a web page
<!DOCTYPE html>
<html>
<head>
<title>Practical 6</title>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</body>
</html>
5 | Page
RAGHAV GANDOTRA
RollNo.:22124
Web Technology
OUTPUT
6 | Page
RAGHAV GANDOTRA
RollNo.:22124
Web Technology
Practical 7
Write a simple HTML code to add an image and its attributes on a web page
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 100%;
}
</style>
<title>Practical 7</title>
</head>
<body> <img src="html5.gif" alt="HTML5 Icon" width="128" height="128"> <img sr
c="html5.gif" alt="HTML5 Icon"
style="width:128px;height:128px;">
</body>
</html>
OUTPUT
7 | Page
RAGHAV GANDOTRA
RollNo.:22124
Web Technology
Practical 8
Write a simple HTML code to add an file download option on a web page
<!DOCTYPE html>
<html>
<head>
<title>Program no 8</title>
</head>
<body><a href="/images/myimage.jpg">Download</a></body>
</html>
OUTPUT
Practical 9
8 | Page
RAGHAV GANDOTRA
RollNo.:22124
Web Technology
Write a simple HTML code to add a hyperlink on a web page
<!DOCTYPE html>
<html>
<head>
<title> Program no 9</title>
</head>
<body> <a href="https://ggnindia.dronacharya.info/">Visit College Website!</a>
</body>
</html>
OUTPUT
After Clicking Link
9 | Page
RAGHAV GANDOTRA
RollNo.:22124
Web Technology
Practical 10
Write a simple HTML code to implement navigation frame on a web page.
Navigationframe.html
Frame 1 HTML file
<!DOCTYPE html>
<html>
<head>
<title>frame 1</title>
</head>
<body>
This is the Frame 1<br>
</body>
</html>
Frame 2 HTML file
<!DOCTYPE html>
<html>
<head>
<title>frame 2</title>
</head>
<body>
This is the Frame 2
</body>
</html>
Main HTML file
<!DOCTYPE html>
<html>
<head>
<title>Program no 10</title>
</head>
<frameset cols = "50%,50%">
<frame name = "left" src = "frame1.html"/>
<frame name = "left" src = "frame2.html"/>
</frameset>
</html>
10
RAGHAV GANDOTRA
RollNo.:22124
| Page
Web Technology
Practical 10
OUTPUT
11
RAGHAV GANDOTRA
RollNo.:22124
Web Technology
| Page
12
RAGHAV GANDOTRA
RollNo.:22124
