Scribd
Upload
35 views50 pages

Sameer Kumar Web File

The document contains the practical file of Sameer Kumar submitted for the Bachelor of Computer Applications degree. It consists of 37 practicals covering various HTML tags and concepts. Each practical has the source code and output for the specific tag or concept covered in that practical, for example creating headings using <h1>-<h6> tags, adding paragraphs using <p> tags, creating ordered and unordered lists using <ol> and <ul> tags.

Uploaded by

joy8193k
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
35 views50 pages

Sameer Kumar Web File

The document contains the practical file of Sameer Kumar submitted for the Bachelor of Computer Applications degree. It consists of 37 practicals covering various HTML tags and concepts. Each practical has the source code and output for the specific tag or concept covered in that practical, for example creating headings using <h1>-<h6> tags, adding paragraphs using <p> tags, creating ordered and unordered lists using <ol> and <ul> tags.

Uploaded by

joy8193k
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 50

SAMEER KUMAR

(GU-2023-1341)

Practical File

HTML CODES

In the fulfilment of the requirements

for the degree of

BACHELOR OF COMPUTER APPLICATIONS

Submitted By: Submitted To:

Sameer kumar Mrs. Raj Kamal Kaur Grewal

BCA 1(B)

GU-2023-1341

GNA SCHOOL OF COMPUTATIONAL SCIENCES

GNA UNIVERSITY PHAGWARA, PUNJAB

Batch 2023-2026

1
SAMEER KUMAR
(GU-2023-1341)

ACKNOWLEDGEMENT

I would like to sincerely thank my teacher Mrs. Raj Kamal Grewal for
providing all the necessary resources and facilities in the university, without
those resources this practical would not have been completed.

Also, my parents & family friends support played a big role for me. I think them
all and wish that they will keep supporting me like this.

I did this practical not only to get marks but also to improve my technical
knowledge. During this practical, I acquired many valuable skills, and i hope
that these will help me in my future carrer.

2
SAMEER KUMAR
(GU-2023-1341)

Index

Sr. No. Practical Name


1. To Create And Save A HTML File
2. To Create A Heading Via <Head> Tag
3. To Create Multiple Headings Using <H1>-<H6>Tags
4. To Create A Paragraph Via <P>Tag
5. To Demonstrate The Difference Of <Pre>And <P>Tag
6. To Illustrate The Use Of <Div>Tag
7. To Illustrate The Use Of <Font>Tag
8. To Illustrate The Use Of<Ol>Tag (Type 1)
9. To Illustrate The Use Of<Ol>Tag (Type 2)
10. To Illustrate The Use Of<Ol>Tag (Type 3)
11. To Illustrate The Use Of<Ul>Tag (Type 1)
12. To Illustrate The Use Of<Ul>Tag (Type 2)
13. To Illustrate The Use Of<Ul>Tag (Type 3)
14. To Add An Image Via <Img>Tag
15. To Add An Image Via <Img> Tag From Drive
16. To Add Border Style To An Image
17. To Illustrate The Use Of Anchor Tag
18. To Illustrate The Use Of Anchor Tag In A Paragraph
19. To Illustrate The Use Of Formatting Tags
20. To Illustrate The Definition Tag
21. To Illustrate Te Table Tag
22. To Illustrate The Border In Table Tag
23. To Illustrate The Add Column In Table Tag
24. To Illustrate Inline CSS In HTML On <H1> Tag
25. To Illustrate Inline CSS In HTML On <Body> Tag
26. To Illustrate Inline CSS In HTML On <P> Tag
27. To Illustrate Inline CSS In HTML On <P> Tag In Italic Font
28. To Illustrate The Internal CSS In HTML On <P> Tag
29. To Illustrate The Internal CSS In HTML On <P> Tag With
Background Color
30. To Illustrate The External CSS In HTML On <P> Tag With
Link Tag
3
SAMEER KUMAR
(GU-2023-1341)

31. To Illustrate The Use Of <Form> Tag In HTML


32. To Illustrate Frame Tag In HTML With Rows Frameset
33. To Illustrate Frame Tag In HTML With Cols Frameset
34. Wac To Make A Resume
35. To Illustrate Span Tag In Html
36. A Webpage In Html To Show All The Text Color , Background
Color And Font Elements
37. To Illustrate Frame Tag In HTML With Rows Frameset Filled

****Practical-01****

4
SAMEER KUMAR
(GU-2023-1341)

(T0 Create And Save A HTML File)

1. Click on start and search for Notepad.

2. Open Notepad.

3. Write The Source Code.

5
SAMEER KUMAR
(GU-2023-1341)

Source Code:
<html>

<head>

<title>Introduction to HTML</title>

</head>

<body>

<h1>Sameer kumar Welcome you to HTML.</h1>

</body>

</html>

4.Saving the HTML file with .html extension.

Output:

****Practical-02****

6
SAMEER KUMAR
(GU-2023-1341)

(To Create A Heading Via <head>Tag)

Source Code:
<!DOCTYPE>
<html>
<head>
<title>Introduction to HTML</title>
</head>
<body>
<h1>This is a Heading.</h1>
</body>
</html>

Output:

7
SAMEER KUMAR
(GU-2023-1341)

****Practical-03****

(To Create Multiple Heading Using <h1>-<h6>Tags)

Source code:
<!DOCTYPE>
<html>
<head>
<title>Introduction to HTML</title>
</head>
<body>
<h1>This is a Biggest Heading.</h1>
<h2>This is a Bigger Heading.</h2>
<h3>This is a Normal Heading.</h3>
<h4>This is a Small Heading.</h4>
<h5>This is a smaller Heading.</h5>
<h6>This is a Smallest Heading.</h6>
</body>
</html>

Output:

8
SAMEER KUMAR
(GU-2023-1341)

****Practical-04****

(To Create Paragraph Via <p> Tag)

Source Code:
<!DOCTYPE>
<html>
<head>
<title>Introduction to HTML</title>
</head>
<body>
<h1>This is a Heading.</h1>
<p>The HyperText Markup Language or HTML is the standard markup language for
documents designed to be displayed in a web browser. It defines the meaning
and structure
of web content. It is often assisted by technologies such as Cascading Style
Sheets (CSS) and scripting languages such as JavaScript.</p>
</body>
</html>

Output:

9
SAMEER KUMAR
(GU-2023-1341)

****Practical-05****

(To Demonstrate The Difference Of <pre> And <p> Tag)

Source Code:
<!DOCTYPE>
<html>
<head>
<title>Introduction to HTML</title>
</head>
<body>
<h2>Difference Between Pre And P Tags.</h2>
<pre>
Text in pre element
is displayed in a fixed width
font,and it preserves
both spaces and
line breaks
</pre>
<br>
<p>
Text in pre element is
dispayed in a fixed width font
and it preserves both
spaces and line breaks
</p>
</body>
</html>

Output:

10
SAMEER KUMAR
(GU-2023-1341)

****Practical-06****

(To Illustrate The use Of <div> Tag)

Source Code:
<!DOCTYPE>
<html>
<head>
<title>Introduction to HTML</title>
</head>
<body>
<h2>Division Tag.</h2>
<div style="border:4px solid red;padding:30px;">
<p>
The div tag defines a division or a section in an HTML document.
</p>
</div>
<br>
<div style="border:4px dotted black;padding:30px;">
<p>
The div tag defines a division or a section in an HTML document.
</p>
</div>
<br>
<div style="border:4px dashed pink;padding:30px;">
<p>
The div tag defines a division or a section in an HTML document.
</p>
</div>
<br>
<div style="border:4px double blue;padding:30px;">
<p>
The div tag defines a division or a section in an HTML document.
</p>
</div>
</body>
</html>

11
SAMEER KUMAR
(GU-2023-1341)

Output:

12
SAMEER KUMAR
(GU-2023-1341)

****Practical-07****

(To Illustrate The Use of <font> Tag)

Source Code:

<!DOCTYPE>
<html>
<head>
<title>Introduction to HTML</title>
</head>
<body>
<h2>Font Tag.</h2>
<font color="Red"size="4px">
<p>
This tag is used to stylize the Font.
</p>
</font>
<font color="Yellow"size="5px">
<p>
This tag is used to stylized the Font.
</p>
</font>
<font color="Blue"size="6px">
<p>
This tag is used to stylized the Font.
</p>
</font>
<font color="Brown"size="7px">
<p>
This tag is used to stylized the font.
</p>
</font>
</body>
</html>

13
SAMEER KUMAR
(GU-2023-1341)

Output:

14
SAMEER KUMAR
(GU-2023-1341)

****Practical-08****

(To Illustrate The Use Of <ol> Tag(Type-1))

Source Code:
<!DOCTYPE>
<html>
<head>
<title>Introduction to HTML</title>
</head>
<body>
<h2>Ordered List.</h2>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>
</body>
</html>

Output:

15
SAMEER KUMAR
(GU-2023-1341)

****Practical-09****

(To Illustrate The Use Of <ol> Tag(Type-2))

Source Code:
<!DOCTYPE>
<html>
<head>
<title>Introduction to HTML</title>
</head>
<body>
<h2>Ordered List.</h2>
<ol>
<li value=6>Item 7</li>
<li>Item 4</li>
<li>Item 9</li>
<li>Item 2</li>
</ol>
</body>
</html>

Output:

16
SAMEER KUMAR
(GU-2023-1341)

****Practical-10****

(To Illustrate The Use Of <ol> Tag(Type-3))

Source Code:
<!DOCTYPE>
<html>
<head>
<title>Introduction to HTML</title>
</head>
<body>
<h2>Ordered List.</h2>
<ol type="I">
<li>Item 7</li>
<li>Item 4</li>
<li>Item 9</li>
<li>Item 2</li>
</ol>
</body>
</html>

Output:

17
SAMEER KUMAR
(GU-2023-1341)

****Practical-11****

(To Illustrate The Use Of <ul> Tag(Type-1))

Source Code:
<!DOCTYPE>
<html>
<head>
<title>Introduction to HTML</title>
</head>
<body>
<h2>Unordered List.</h2>
<ul>
<li>Item 7</li>
<li>Item 4</li>
<li>Item 9</li>
<li>Item 2</li>
</ul>
</body>
</html>

Output:

18
SAMEER KUMAR
(GU-2023-1341)

****Practical-12****

(To Illustrate The Use Of <ul> Tag(Type 2))

Source Code:
<!DOCTYPE>
<html>
<head>
<title>Introduction to HTML</title>
</head>
<body>
<h2>Unordered List.</h2>
<ul type="Circle">
<li>Item 7</li>
<li>Item 4</li>
<li>Item 9</li>
<li>Item 2</li>
</ul>
</body>
</html>

Output:

19
SAMEER KUMAR
(GU-2023-1341)

****Practical-13****

(To Illustrate The Use Of <ul> Tag(Type 3))

Source Code:
<html>
<head>
<title>Ordered lists</title>
</head>
<body>
<h1>List of cources in GNA</h1>
<ul type=square>
<li>BCA</i>
<li>B.Tech</li>
<li>H.M</li>
<li>B.com</li>
</ul>
</body>
</html>

Output:

20
SAMEER KUMAR
(GU-2023-1341)

****Practical-14****

(To Add An Image Via <img> Tag from a link)

Source code:
<html>
<body>
<h1>Lotus plants are adapted to grow in the flood plains of slow-moving rivers
and delta areas. Stands of lotus drop hundreds of thousands of seeds every
year to the bottom of the pond</h1>
<img src="https://w7.pngwing.com/pngs/371/963/png-transparent-high-definition-
television-display-resolution-nelumbo-nucifera-lotus-television-sacred-lotus-
flower.png">
</body>
</html>

Output:

21
SAMEER KUMAR
(GU-2023-1341)

****Practical-15****

(To Add An Image Via <img> Tag)

Sourca Code:
<html>
<head>
<title>Image Tag</title>
</head>
<body>
<h1>Hacking krega apun</h1>
<img
src="https://wpsecurityninja.com/wp-content/uploads/2019/06/hacker.jpg"height=
"400"yellow="480"border="5px">
</body>
</html>

Output:

22
SAMEER KUMAR
(GU-2023-1341)

****Practical-16****

(To Add A Border To An Image)

Source Code:
<html>
<head>
<title>Image Tag</title>
</head>
<body>
<h2>Adding borders in the image</h2>
<img
src="https://wpsecurityninja.com/wp-content/uploads/2019/06/hacker.jpg"height=
"400"white="480"border=8"px">
</body>
</html>

Output:

23
SAMEER KUMAR
(GU-2023-1341)

****Practical-17****

(To Illustrate The Use Of Anchor Tag)

Source code:
<html>
<head>
<title>Anchor Tag</title>
</head>
<body>
<h1>This is a Link</h1>
<a href="https://www.wikipedia.org/">Click here to visit the site</a>
</body>
</html>

24
SAMEER KUMAR
(GU-2023-1341)

Output:

****Practical-18****

(To Illustrate The Use Of Anchor Tag In A Paragraph)

Source Code:
<html>
<head>
<title>Anchor Tag</title>
</head>
<body>
<h1>Anchor Tag Within A Paragraph</h1>
<p>
Web technology refers to the means by which computers communicate with each
other using markup

25
SAMEER KUMAR
(GU-2023-1341)

languages and multimedia packages. It gives us a way to interact


with hosted information, like websites. Web technology involves the use of
hypertext markup
language (HTML) and cascading style sheets (CSS).
<a href="https://www.w3schools.com/css/css_intro.asp">CSS</a>you can find
about css from this link
</p>
</body>
</html>

Output:

****Practical-19****

(To Illustrate The Use Of Formatting Tags)

Source Code:
<!DOCTYPE>
<html>
<head>
<title>Introduction To HTML</title>
</head>
<body>
<h1>Formatting Tags</h1>
<b>This is Bold tag</b><br>
<strong>This is Strong tag</strong><br>
<i>This is Italic tag</i><br>

26
SAMEER KUMAR
(GU-2023-1341)

<em>This is Emphasize tag</em><br>


<small>This is Small tag</small><br>
<big>this is Big tag</big><br>
<mark>This is mark tag</mark><br>
<p>This is Delete<del>Tag<del></p><br>
<ins>This is insert tag</ins><br>
<p>This is <sub>Subscript</sub></p> <br>
<p>This is <sup>Superscript</sup></p><br>
<kbd>this is Keyboard Typed Text tag</kbd><br>
<s>this is Strike Text tag</s><br>
<code>This is Machine Format Text tag</code><br>
<tt>This is tt tag</tt><br>
</body>
</html>

Output:

27
SAMEER KUMAR
(GU-2023-1341)

****Practical-20****

28
SAMEER KUMAR
(GU-2023-1341)

(To Illustrate The Definition Tag)

Source Code:
<!DOCTYPE>
<html>
<head>
<title>Definition Tag</title>
</head>
<body>
<p><dfn>Web Designing</dfn>Web designing is the process of planning,
conceptualizing, and implementing the plan for designing a website in a
way that is functional and offers a good user experience. User experience is
central to the web designing process.</p>
<br>
<p><dfn>Web Technology</dfn>Web technology refers to the means by which
computers communicate with each other using markup
languages and multimedia packages. It gives us a way to interact with hosted
information, like websites. Web technology involves the
use of hypertext markup language (HTML) and cascading style sheets (CSS).</p>
</body>
</html>

Output:

****Practical-21****

29
SAMEER KUMAR
(GU-2023-1341)

(To Illustrate Te Table Tag)

Source Code:
<html>
<head>
<title>Table Tag</title>
</head>
<body>
<table>
<tr><th>First Name</th><th>Reg. No.</th><th>Class</th>
</tr>
<tr><td>Sameer Kumar </td><td>1341</td><td>BCA 1st(GNA)</td></tr>
<tr><td>Umesh</td><td>1332</td><td>BCA 1st(GNA)</td></tr>
<tr><td>Yausaf Kailey</td><td>1335</td><td>BCA 1st(GNA)</td></tr>
<tr><td>Sahil Kumar Lakha</td><td>1311</td><td>BCA 1st(GNA)</td></tr>
<tr><td>Sourav Rattu</td><td>1326</td><td>BCA 1st(GNA)</td></tr>
</table>
</body>
</html>

Output:

****Practical-22****
30
SAMEER KUMAR
(GU-2023-1341)

(To Illustrate The Border In Table Tag)

Source Code:
<!DOCTYPE>

<html>
<head>
<title>Table Tag</title>
</head>
<body>
<table border="1px">
<tr><th>First Name</th><th>Reg. No.</th><th>Class</th>
</tr>
<tr><td>Sameer Kumar</td><td>1341</td><td>BCA 1st(GNA)</td></tr>
<tr><td>Umesh</td><td>1332</td><td>BCA 1st(GNA)</td></tr>
<tr><td>Yausaf Kailey</td><td>1335</td><td>BCA 1st(GNA)</td></tr>
<tr><td>Sahil Kumar Lakha</td><td>1311</td><td>BCA 1st(GNA)</td></tr>
<tr><td>Sourav Rattu</td><td>1326</td><td>BCA 1st(GNA)</td></tr>
</table>
</body>
</html>

Output:

****Practical-23****
31
SAMEER KUMAR
(GU-2023-1341)

(To Illustrate The Add Column In Table Tag)

Source Code:
<html>

<head>
<title>Table Tag</title>
</head>
<body>
<table border="1px">
<tr><th>First Name</th><th>Reg. No.</th><th>Class</th><th>phone Number</th>
</tr>
<tr><td>Sameer Kumar</td><td>1326</td><td>BCA 1st(GNA)</td><td>1234567892</tr>
<tr><td>Umesh</td><td>1332</td><td>BCA 1st(GNA)</td><<td>0987654321</td></tr>
<tr><td>Yausaf Kailey</td><td>1335</td><td>BCA
1st(GNA)</td><td>2345678901</td></tr>
<tr><td>Sahil Kumar Lakha</td><td>1311</td><td>BCA
1st(GNA)</td><td>5678901234</td></tr>
<tr><td>Sourav Rattu</td><td>1316</td><td>BCA
1st(GNA)</td><td>0987656789</td></tr>
</table>
</body>
</html>

Output:

****Practical-24****

32
SAMEER KUMAR
(GU-2023-1341)

(To Illustrate Inline CSS In HTML On <h1> Tag)

Source Code:
<html>
<head>
<title>Inline CSS</title>
</head>
<body>
<h1 style="color:red;padding:20px;">Definition Of CSS</h1>
<p>Cascading Style Sheets (CSS) is a style sheet language used for describing
the presentation
of a document written in a markup language such as HTML or XML (including XML
dialects
such as SVG, MathML or XHTML).</p>
</body>
</html>

Output:

****Practical-25****

(To Illustrate Inline CSS In HTML On <body> Tag)


33
SAMEER KUMAR
(GU-2023-1341)

Source Code:
<html>
<head>
<title>Inline CSS</title>
</head>
<body style="background-color:black;">
<h1 style="color:red;padding:20px;">Definition Of CSS</h1>
<p style="color:white;">Cascading Style Sheets (CSS) is a style sheet language
used for describing the presentation
of a document written in a markup language such as HTML or XML (including XML
dialects
such as SVG, MathML or XHTML).</p>
</body>
</html>

Output:

****Practical-26****

(To Illustrate Inline CSS In HTML On <p> Tag)

34
SAMEER KUMAR
(GU-2023-1341)

Source Code:
<html>
<head>
<title>Inline CSS</title>
</head>
<body>
<h1>Definition Of CSS</h1>
<p style="color:brown;">Cascading Style Sheets (CSS) is a style sheet language
used for describing the presentation
of a document written in a markup language such as HTML or XML (including XML
dialects
such as SVG, MathML or XHTML).</p>
</body>
</html>

Output:

****Practical-27****

(To Illustrate Inline CSS In HTML On <p> Tag in Italic Font)

35
SAMEER KUMAR
(GU-2023-1341)

Source Code:
<html>
<head>
<title>Inline CSS</title>
</head>
<body style="background-color:black;">
<h1 style="color:red;padding:20px;">Definition Of CSS</h1>
<p style="color:white;font-size:30px;font-style:italic;">Cascading Style
Sheets (CSS) is a style sheet language used for describing the presentation
of a document written in a markup language such as HTML or XML (including XML
dialects
such as SVG, MathML or XHTML).</p>
</body>
</html>

Output:

****Practical-28****

(To Illustrate The Internal CSS In HTML On <p> Tag)

36
SAMEER KUMAR
(GU-2023-1341)

Source Code:
<html>
<head>
<title>Internal CSS Example</title>
<style>
p{
color:blue;
font-size:20px;
}
</style>
</head>
<body>
<h1>Internal CSS</h1>
<p>With CSS, you can control the color, font, the size of text, the spacing
between elements, how elements are positioned and laid out,
what background images or background colors are to be used, different
displays for different devices and screen sizes, and much more!.
</p>
<p>The internal style sheet is used to add a unique style for a single
document. It is defined in <head> section of the HTML page inside
the tag.
</body>
</html>

Output

****Practical-29****

37
SAMEER KUMAR
(GU-2023-1341)

(To Illustrate The Internal CSS In HTML On <p> Tag With Background
Color)

Source Code:
<!doctype>
<html>
<head>
<title>Internal CSS Example</title>
<style>
p{
color:blue;
background-color:black;
font-size:20px;
}
</style>
</head>
<body>
<h1>Internal CSS</h1>
<p>With CSS, you can control the color, font, the size of text, the spacing
between elements, how elements are positioned and laid out,
what background images or background colors are to be used, different
displays for different devices and screen sizes, and much more!.
</p>
<p>The internal style sheet is used to add a unique style for a single
document. It is defined in <head> section of the HTML page inside
the tag.
</body>
</html>

Output:

****Practical-30****

38
SAMEER KUMAR
(GU-2023-1341)

(To Illustrate The External CSS In HTML On <p> Tag With Link Tag)

Source Code:

CSS:

p{

color:blue;

background-color:black;

font-size:20px;

HTML:

<!doctype>

<html>

<head>

<title>External CSS Example</title>

<link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

<h1>External CSS</h1>

<p>Paragraphs are the building blocks of papers. Many students define


paragraphs in terms of length: a paragraph is a group of at least

five sentences, a paragraph is half a page long, etc. In reality, though, the unity
and coherence of ideas among sentences is what

constitutes a paragraph.</p>

</body>

</html>

39
SAMEER KUMAR
(GU-2023-1341)

Output:

****Practical:31****

(To Illustrate The Use Of <form> Tag In HTML)


40
SAMEER KUMAR
(GU-2023-1341)

Source Code:
<html>
<title>Admission Form</title>
<body>
<h1>Admission Form Of GNA University</h1>
<form>
<lable for="fname">First Name:</lable>
<input type="text"id="fname"placeholder=SAMEER><br>
<lable for="lname">Last Name:</lable>
<input type="text"id="lname"placeholder=KUMAR><br>
<lable for="name">Father Name:</lable>
<input type="text"id="name"placeholder=SUNIL KUMAR><br>
<lable for="dobname">DOB:</lable>
<input type="text"id="dobname"placeholder=10/06/2005><br>
<lable for="contact">CONTACT:</lable>
<input type="text"id="contact"placeholder=9990008880><br><br>
<label for="course">Course:</label><br>
<label for="BCA1">BCA1</label>
<input type="Checkbox"id="BCA1"value="BCA1"checked><br>
<label for="BCA2">BCA2</label>
<input type="Checkbox"id="BCA2"value="BCA2"><br>
<label for="BCA3">BCA3</label>
<input type="Checkbox"id="BCA3"value="BCA3"><br>
<label for="gender"></label><br>
<h4>Gender</h4><br>
<label for="male">Male;</label>
<input type="radio"id="Male"value="Male"checked><br>
<label for="female">Female;</label>
<input type="radio"id="female"value="Female"><br><br>
<button type="Submit">Submit</button>
</form>
</body>
</html>

Output:

41
SAMEER KUMAR
(GU-2023-1341)

****Practical-32****

(To Illustrate Frame Tag in HTML With Rows Frameset)


42
SAMEER KUMAR
(GU-2023-1341)

Source Code:
<html>
<head>
<title>Frame tag</title>
</head>
<frameset rows="25%,50%,75%">
<frame src="frame1.html">
<frame src="frame2.html">
<frame src="frame3.html">
</frameset>
</html>

Output:

****Practical-33****

(To Illustrate Frame Tag in HTML With Cols Frameset)

43
SAMEER KUMAR
(GU-2023-1341)

Source Code:
<html>
<head>
<title>Frame tag</title>
</head>
<frameset cols="25%,50%,75%">
<frame src="frame1.html">
<frame src="frame2.html">
<frame src="frame3.html">
</frameset>
</html>

Output:

****Practical-34****

(Make Resume )
44
SAMEER KUMAR
(GU-2023-1341)

Source code:

<html>
<head>
<title>Resume</title>
<style>
body{
background-color:White;
}
h1{
color:Black;
}
</style>
</head>
<body>
<div>
<h1>Resume</h1>
<h2>Sameer Kumar</h2>
<p>GNA University<br>
Phagwara<br>
Punjab<br>
India<p>
<hr>
<br>
<h4>Education</h4>
<ul>

<li><a href="https://apsjalandhar.com/?
fbclid=IwAR1KRiI0oPDtyUwkE7rKf9tDEq24MwYmo8glALZ7GzFdZtCW5EQsKdxYhd0">Army
Public School,Jalandhar</a></li>
<li><a href="https://www.gnauniversity.edu.in">GNA University</a></li>
</ul>
<h4>Interests</h4>
<ul>
<li>Football</li>
<li>Cricket</li>
</ul>
<br>
<h4>Skills</h4>
<ul>
<li>C Programming</li>
<li>Python Programming</li>
<li>Communication Skills</li>
</ul>
<br>

45
SAMEER KUMAR
(GU-2023-1341)

</div>
</body>
</html>

Output:

****Practical-35****

(To Illustrate Span Tag In HTML)

46
SAMEER KUMAR
(GU-2023-1341)

Source code:
<html>
<head>
<title>Span Tag</title>
</head>
<body>
<h1>Span Tag</h1>
<p>
<span style="color:red;">Artificial Intelligence</span><br>
is the <span style="color:green;">simulation</span> of human intelligence<br>
processes by machines ,especially computer system.<br>
Specific applications of AI include expert system ,<br>
natural <span style="color:blue;">language processing</span>,<br>
speech recognition and machine vision.
</p>
</body>
</html>

Output:

****Practical-36****

47
SAMEER KUMAR
(GU-2023-1341)

(A Webpage In HTML To Show All The Text Color , Background Color


And Font Elements)

Source code:
<html>
<head>
<title>Show all the text color,background color,font</title>
<style>
body
{
background-color:brown;
}
</style>
<body>
<p style="font-family: Times New Roman">Introduction</p>
<p style="font-color:black">My name is Sameer</p>
<font face="Algerian">I study in GNA University</font><br>
<font size="26">It is located in hoshiarpur</font><br>
<font> There is various cources available</font><br>
</head>
</body>
</html>

Output:

****Practical -37****

48
SAMEER KUMAR
(GU-2023-1341)

(To Illustrate Frame Tag in HTML With Rows Frameset Filled)

Source code:
<html>
<head>
<title> Frame tag</title>
</head>
<frameset rows="25%, 50%,25%">
<frame src="file:///C:/Users/student.GU/Music/sameer(1341)%20files/external
%20css.html">
<frame
src="file:///C:/Users/student.GU/Music/sameer(1341)%20files/flower.html">
<frame src="file:///C:/Users/student.GU/Music/sameer(1341)%20files/frame%20gna
%20.html">
</frameset>
</html>

Output:

49
SAMEER KUMAR
(GU-2023-1341)

50

You might also like