BBA5thsemLab-File.ppt created by student

ST. ANDREWS INSTITUTE
OF TECHNOLOGY AND MANAGEMENT
Gurgaon Delhi (NCR)
Approved by AICTE, Govt. of India, New Delhi
Affiliated to Maharshi Dayanand University ‘A’
Grade State University, accredited by NAAC
Session: 2021 - 2024
Bachelor of Business Administration Semester 05
Subject Name - COMPUTER NETWORKING AND INTERNET
BBAN - 504 Practical File
Submitted To:
DR. RINKU
(Asst. Professor)
Submitted by:
Name – Raj
College Roll No. – 218005
BBA 5th Sem

LIST OF EXPERIMENTS
S. No. Title Date Remark
1. A program to illustrate body and pre tags
2. A program to illustrate text font tag
3. A program to illustrate comment, h1...h6 and div tag
4. A program to illustrate text formatting tags
5. A program to illustrate order list tag
6. A program to illustrate unorder list tag
7. A program to illustrate nested and difination
8. A program to illustrate image tag
9. A program to illustrate hyperlink tag
10. A program to illustrate table tag
11. A program to illustrate frame tag
12. A program to illustrate form tag
13. A program to illustrate span tag
14. A program to illustrate css
15. A program to illustrate embedded multimedia

EXPERIMENT 1
TITLE: A PROGRAM TO ILLUSTRATE BODY AND PRE TAGS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name=Mviewport" content="width=device-width, initial-scale=1.0">
<title>Body and Pre Tags Example</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph of regular text inside the body tag.</p>
<pre>
This is preformatted text.
It preserves spaces,
line breaks,
and other formatting.
</pre>
</body>
</html>
Output
This is a Heading
This is a paragraph of regular text inside the body tag.
This is preformatted text.
It preserves spaces,
line breaks,
and other formatting.

EXPERIMENT 2
TITLE: A PROGRAM TO ILLUSTRATE TEXT FONT TAG
<!DOCTYPE html>
<html lang="en">
<head>
<title>Font Tag Example</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>
This is a paragraph of text with different font styles using the <code><font></code> tag.
</p>
<p>
<font size="4" color="blue" face="Arial">This text is blue, Arial font, and size 4.</font>
</p>
<p>
<font size="3" color="green" face="Verdana">This text is green, Verdana font, and size 3.</font>
</p>
<p>
<font size="2" color="red" face="Courier New">This text is red, Courier New font, and size
2.</font>
</p>
</body>
</html>

Output
This is a Heading
This is a paragraph of text with different font styles using the <font> tag.
This text is blue, Arial font, and size 4.
This text is green, Verdana font, and size 3.
This text is red, Courier New font, and size 2.

EXPERIMENT 3
TITLE: A PROGRAM TO ILLUSTRATE COMMENT, H1...H6 AND DIV TAG
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML
Example with Comments, Headings, and Div</title>
</head>
<body>

<h1>Main Heading (h1)</h1>
<p>This is a paragraph of text below the main heading.</p>
<h2>Subheading (h2)</h2>
<p>This is another paragraph of text below the subheading.</p>
<div style="border: 2px solid #ccc; padding: 10px; margin-top: 20px; width: 300px">
<h3>Section Heading (h3)</h3>
<p>This is a paragraph inside a <code><div></code> element.</p>
</div>
<h4>Subsection Heading (h4)</h4>
<p>This is a paragraph below the subsection heading.</p>
<h5>Minor Heading (h5)</h5>
<p>This is a paragraph below the minor heading.</p>
<h6>Micro Heading (h6)</h6>
<p>This is a paragraph below the micro heading.</p>
</body>
</html>

Output
Main Heading (hi)
This is a paragraph of text below the main heading.
Subheading (h2)
This is another paragraph of text below the subheading
Section Heading (h3)
This is a paragraph inside a <div> element.
Subsection Heading (h4)
This is a paragraph below the subsection heading. Minor
Heading (h5)
This is a paragraph below the minor heading.
Micro Heading (h6)
This is a paragraph below the micro heading.

EXPERIMENT 4
TITLE: A PROGRAM TO ILLUSTRATE TEXT FORMATTING TAGS
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Example with Text Formatting Tags</title>
</head>
<body>
<h1>Text Formatting Tags Example</h1>
<p><strong>Bold Text:</strong> This is an example of <strong>bold text</strong>.</p>
<p><em>Italic Text:</em> This is an example of <em>italic text</em>.</p>
<p><u>Underlined Text:</u> This is an example of <u>underlined text</u>.</p>
<p><s>Strikethrough Text:</s> This is an example of <s>strikethrough text</s>.</p>
<p><mark>Highlighted Text:</mark> This is an example of <mark>highlighted text</mark>.</p>
<p><sub>Subscript Text:</sub> This is an example of subscript text (e.g., H<sub>2</sub>O).</p>
<p><sup>Superscript Text:</sup> This is an example of superscript text (e.g., x<sup>2</sup>).</p>
<p><code>Code Text:</code> This is an example of <code>code text</code>.</p>
<p><kbd>Keyboard Input:</kbd> This is an example of <kbd>keyboard input</kbd>.</p>
<p><abbr title="HyperText Markup Language">HTML</abbr>: This is an example of an abbreviation
with a title attribute.</p>
<p><a href="#link">Link:</a> This is an example of a link.</p>
<p><blockquote>Blockquote:</blockquote> This is an example of a blockquote.</p>
<p><cite>Citation:</cite> This is an example of a citation.</p>
<p><q>Inline Quote:</q> This is an example of an inline quote.</p>
<p><small>Small Text:</small> This is an example of <small>small text</small>.</p>
<p><big>Big Text:</big> This is an example of <big>big text</big>.</p>
</body>
</html>

Output
Text Formatting Tags Example
Bold Text: This is an example of bold text.
Italic Text: This is an example of italic text.
Underlined Text: This is an example of underlined text.
Strikethrough Text: This is an example of a trike through text.
Highlighted Tex| This is an example of highlighted text.
Subscript Text This is an example of subscript text (e.g.. H2O).
Superscript Text: js au example of superscript text (e.g.. x2).
Code Text: This is an example of code text.
Keyboard Input: This is ail example of keyboard input.
HTML: This is an example of an abbreviation with a title attribute.
Link: This is an example of a link.
Blockquote:
This is an example of a blockquote.
Citation: This is an example of a citation.
‘'Inline Quote:” This is an example of an inline quote.
Small Text: This is an example of small text.
Big Text: This is an example of big text.

EXPERIMENT 5
TITLE: A PROGRAM TO ILLUSTRATE ORDER LIST TAG
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ordered List Example</title>
</head>
<body>
<h1>Ordered List Example</h1>
<p>This is an example of using the <code><ol></code> (ordered list) tag in HTML.</p> <ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>Fourth item</li>
</ol>
<p>You can also nest ordered lists to create a hierarchical structure:</p>
<ol>
<li>Parent item <ol>
<li>Nested item 1</li>
</ol>
</li>
<li>Another parent item</li>
<li>Yet another parent item</li>
</ol>
</body>
</html>

Output
Ordered List Example
This is an example of using the <ol> (ordered list) tag in HTML
1. First item
2. Second item
3. Third item
4. Fourth item
You can also nest ordered lists to create a hierarchical structure:
1. Parent item
1. Nested item 1
2. Nested item 2
2. Another parent item
3. Yet another parent item

EXPERIMENT 6
TITLE: A PROGRAM TO ILLUSTRATE UNORDER LIST TAG
<!DOCTYPE html>
<html lang="en">
<head>
<title>Unordered List Example</title>
</head>
<body>
<h1>Unordered List Example</h1>
<p>This is an example of using the <code><ul></code> (unordered list) tag in HTML.</p> <ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>Fourth item</li>
</ul>
<p>You can also nest unordered lists to create a hierarchical structure:</p>
<ul>
<li>Parent item <ul>
</ul>
</li>
<li>Another parent item</li>
<li>Yet another parent item</li>
</ul>
</body>
</html>

Output
Unordered List Example
This is an example of using the <ul> (unordered list) tag in HTML
• First item
• Second item
• Third item
• Fourth item
You can also nest unordered lists to create a hierarchical structure:
• Parent item
o Nested item 1 o Nested item 2
• Another parent item
• Yet another parent item

EXPERIMENT 7
TITLE: A PROGRAM TO ILLUSTRATE NESTED AND DIFINATION
<!DOCTYPE html>
<html lang="en">
<head>
<title>Nested and Definition List Example</title>
</head>
<body>
<h1>Nested and Definition List Example</h1>
<h2>Nested Lists:</h2>
<ul>
<li>Fruits
<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Bananas</li>
</ul>
</li>
<li>Vegetables
<ul>
<li>Carrots</li>
<li>Broccoli</li>
<li>Spinach</li>
</ul>
</li>
</ul>
<h2>Definition List:</h2>
<dl>
<dt>HTML</dt>

<dd>HyperText Markup Language - used for structuring content on the web.</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets - used for styling the presentation of web pages.</dd>
<dt>JavaScript</dt>
<dd>A programming language that enables interactive web pages.</dd>
</dl>
</body>
</html>
Output
Nested and Definition List Example
Nested Lists:
• Fruits
o Apples o Oranges o Bananas
• Vegetables
o Carrots o Broccoli o Spinach
Definition List:
HTML
HyperText Markup Language - used for structuring content on the web.
CSS - -
Cascading Style Sheets - used for styling the presentation of web pages
JavaScript
A programming language that enables interactive web pages.

EXPERIMENT 8
TITLE: A PROGRAM TO ILLUSTRATE IMAGE TAG
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Tag Example</title>
</head>
<body>
<h1>Image Tag Example</h1>
<p>This is an example of using the <code><img></code> (image) tag in HTML.</p>
<img src="https://via.placeholder.com/400" width= 200px height= 200px alt="Placeholder
Image">
</body>
</html>
Output
Image Tag Example
This is an example of using the <img> (image) tag in HTML.

EXPERIMENT 9
TITLE: A PROGRAM TO ILLUSTRATE HYPERLINK TAG
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hyperlink Tag Example</title>
</head>
<body>
<h1>Hyperlink Tag Example</h1>
<p>This is an example of using the <code><a></code> (anchor) tag in HTML to
create hyperlinks.</p>

<p>Visit the <a href="https://www.example.com" target="_blank">Example
Website</a>.</p>

<p>Go to the <a href="#section">Next Section</a> on this page.</p>

<p>Contact us via <a href="mailto:info@example.com">email</a>.</p>

<p>Download the <a href="example.pdf" download>Example PDF</a>.</p>
<h2 id="section">Next Section</h2>
<p>This is the content of the next section on the page.</p>
</body>
</html>

Output
Hyperlink Tag Example
This is an example of using the <a> (anchor) tag in HTML to create hyperlinks
Visit the Example Website.
Go to the Next Section on this page.
Contact us via email.
Download the Example PDF.
Next Section
This is the content of the next section on the page.

EXPERIMENT 10
TITLE: A PROGRAM TO ILLUSTRATE TABLE TAG
<!DOCTYPE html>
<html lang="en">
<head>
<title>Table Tag Example</title>
</head>
<body>
<h1>Table Tag Example</h1>
<p>This is an example of using the <code><table></code> tag in HTML to create a simple
table.</p>
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>30</td>
<td>Los Angeles</td>

</tr>
<tr>
<td>Bob Johnson</td>
<td>22</td>
<td>Chicago</td>
</tr>
</tbody>
</table>
</body>
</html>
<style> table { width: 50%;
border-collapse: collapse;
margin-top: 20px;
}
th, td {
border: 1px solid #ddd;
padding: 8px; text-align: left;
}
th {
background-color: #f2f2f2;
}
</style>

Output
Table Tag Example
This is an example of using the <table> tag in HTML to create a simple table
Name Age City
John Doe 25 New York
Jane Smith 30 Los Angeles
Bob Johnson 22 Chicago

EXPERIMENT 11
TITLE: A PROGRAM TO ILLUSTRATE FRAME TAG
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>IFrame Example</title>
</head>
<body>
<h1>The iframe element</h1>
<iframe src="frame1.html"></iframe>
</body>
</html>
<style> iframe { width: 100%;
height: 300px; /* Adjust the height as needed */ border: 1px solid #ccc; margin-
bottom: 10px;
}
</style>

Frame 1 Frame 2 Frame 3
<body> <body> <body>
<div> <div> <div>
<h2>This is first <h2>This is Second <h2>This is Third
frame</h2> frame</h2> frame</h2>
</div> </div> </div>
</body> </body> </body>
</html> </html> </html>
<style> <style> <style>
div{ div{ div{
background-color: background-color: background-color:
#e7eceb; #e3e9e9; #cfd8cf;
height: 500px; height: 500px; height: 500px;
} } }
</style> </style> </style>
Output

EXPERIMENT 12
TITLE: A PROGRAM TO ILLUSTRATE FORM TAG
<!DOCTYPE html>
<html lang="en">
<head>
<title>Form Tag Example</title>
</head>
<body>
<h1>Form Tag Example</h1>
<form action="/submit-form" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required> <br>
<label for="gender">Gender:</label>
<select id="gender" name="gender">
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>
<br>
<label>Interests:</label>

<input type="checkbox" id="interest1" name="interests" value="coding">
<label for="interest1">Coding</label>
<input type="checkbox" id="interest2" name="interests" value="reading">
<label for="interest2">Reading</label>
<br>
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" cols="50"></textarea>
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Output

EXPERIMENT 13
TITLE: A PROGRAM TO ILLUSTRATE SPAN TAG
<!DOCTYPE html>
<html lang="en">
<head>
<title>Span Tag Example</title>
</head>
<body>
<h1>Span Tag Example</h1>
<p>This is a <span class="highlight">highlighted</span> text.</p>
<p>This is an <span class="italic">italic</span> text.</p>
<p>This is a <span class="highlight italic">combined</span> example.</p> </body>
</html>
<style>
.highlight { color: red; font-weight: bold;
}
.italic {
font-style: italic;
}
</style>

Output
Span Tag Example
This is a highlighted text.
This is an italic text.
This is a combined example.

EXPERIMENT 14
TITLE: A PROGRAM TO ILLUSTRATE CSS
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Example</title>
</head>
<body>
<h1 class="center">CSS Example</h1>
<p>This is a simple example illustrating the use of CSS for styling HTML elements. The text in this
paragraph has increased line-height for better readability.</p>
<p class="highlight">This paragraph has a background color to highlight its content.</p>
</body>
</html>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
color: #333;
margin: 20px;
}
h1 {
color: #484c50;
}
p {
line-height: 1.6;
}
.highlight {
background-color: #5e5e5a;

color: white;
}
.center {
text-align: center;
}
</style>
Output
CSS Example
ThisisasimpleexampleillustratingtheuseofCSSforstylingHTMLelements.Thetextinthisparagraphhasincreasedline-heightforbetterreadability.
Thisparagraphhasabackgroundcolortohighlightitscontent.

EXPERIMENT 15
TITLE: A PROGRAM TO ILLUSTRATE EMBEDDED MULTIMEDIA
<!DOCTYPE html>
<html lang="en">
<head>
<title>Embedded Multimedia Example</title>
</head>
<body>
<h1>Embedded Multimedia Example</h1>
<h2>Audio Example</h2>
<audio controls>
<source src="sample-audio.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
<h2>Video Example</h2>
<video width="400" height="300" controls>
<source src="sample-video.mp4" type="video/mp4">
Your browser does not support the video element.
</video>
</body>
</html>

Output
Embedded Multimedia Example
Audio Example
► 0:00/0:00 4) :

BBA5thsemLab-File.ppt created by student

Recommended

Recommended

More Related Content

Similar to BBA5thsemLab-File.ppt created by student

Similar to BBA5thsemLab-File.ppt created by student (20)

Recently uploaded

Recently uploaded (20)

BBA5thsemLab-File.ppt created by student