Scribd
Upload
15 views19 pages

EXPIREMENT HTML

Bca html 1st sem experiments

Uploaded by

Mamta nagar
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
15 views19 pages

EXPIREMENT HTML

Bca html 1st sem experiments

Uploaded by

Mamta nagar
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/ 19

EXPIREMENT-1

QUESTION:

Design your first webpage displaying a big heading and small paragraph using HTML?

 CODE:

<!DOCTYPE html>

<html>

<head>

<title>My First Webpage</title>

</head>

<body>

<h1>Welcome to My First Webpage</h1>

<p>This is a small paragraph describing the content of my first webpage. I'm excited to
start my journey in web development!</p>

</body>

</html>

 SCREENSHOT OF CODE AND ITS RESULT:

Code:
Result:
EXPIREMENT-2

QUESTION:

Design a web page displaying “My first web page by adding following tags including font
change, color change and changed font size using HTML?

 CODE:

<!DOCTYPE html>

<html>

<head>

<title>

My First Webpage

</title>

</head>

<body>

<h1 style="font-family: Arial; color: blue; font-size: 38px;">

My First Webpage

</h1>

<p style="font-family: Verdana; color: red; font-size: 28px;">

This is a small paragraph describing the content of my first webpage. I'm excited to start my
journey in web development!

</p>

</body>

</html>
 SCREENSHOT OF CODE AND ITS RESULT:
Code:

Result:
EXPIREMENT-3
QUESTION:

Write a HTML program to display text using different attributes like left alignment, center
alignment, center alignment, and style attribute (to and color).

 CODE:

<!DOCTYPE html>

<html>

<head>

<title>Text Alignment and Styling</title>

</head>

<body>

<h2 style="color: blue; text-align: left;">Left aligned text</h2>

<p style="color: blue; text-align: left;">This is a left-aligned text with blue color style.</p>

<h2 style="color: green; text-align: center;">Center aligned text</h2>

<p style="color: green; text-align: center;">This is a center-aligned text with green color
style.</p>

<h2 style="color: red; text-align: right;">Right aligned text</h2>

<p style="color: red; text-align: right;">This is a right-aligned text with red color
style.</p>

</body>

</html>
 SCREENSHOT OF CODE AND ITS RESULT:
Code:

Result:
EXPIREMENT-4
QUESTION:

Write a HTML program to display text using different formatting styles like bold text, italic
text, underlined text, strike text, monospaced font, superscript text, subscript text, inserted
text, inserted text, deleted text, large text, smaller text, and grouping content?

 CODE:

<!DOCTYPE html>

<html>

<head>

<title>Text Formatting Styles</title>

</head>

<body>

<!-- Bold Text -->

<p><b>This is bold text.</b></p>

<!-- Italic Text -->

<p><i>This is italic text.</i></p>

<!-- Underlined Text -->

<p><u>This is underlined text.</u></p>

<!-- Strikethrough Text -->

<p><s>This is strikethrough text.</s></p>

<!-- Monospaced Font -->

<p><tt>This is monospaced text.</tt></p>

<!-- Superscript Text -->

<p>This is superscript text: H<sup>2</sup>O</p>

<!-- Subscript Text -->

<p>This is subscript text: CO<sub>2</sub></p>

<!-- Inserted Text -->

<p><ins>This is inserted text.</ins></p>


<!-- Deleted Text -->

<p><del>This is deleted text.</del></p>

<!-- Large Text -->

<p><big>This is large text.</big></p>

<!-- Smaller Text -->

<p><small>This is smaller text.</small></p>

<!-- Grouping Content -->

<div>

<h2>Grouped Content</h2>

<p>This is a paragraph inside a div element.</p>

</div>

</body>

</html>
 SCREENSHOT OF CODE AND ITS RESULT:
Code:
Result:
EXPIREMENT-5
QUESTION:

Write a program using different phrase tags like; emphasized text, marked text, strong text,
text abbreviation, acronym element, text direction, special terms, quoting text, short
quotations, text citation, computer code, keyboard text, programing variables, program
output, and address text.

 CODE:

<!DOCTYPE html>

<html>

<head>

<title>Phrase Tags Example</title>

</head>

<body>

<!-- Emphasized Text -->

<p><em>This is emphasized text.</em></p>

<!-- Marked Text -->

<p><mark>This is marked text.</mark></p>

<!-- Strong Text -->

<p><strong>This is strong text.</strong></p>

<!-- Text Abbreviation -->

<p>The abbreviation for HyperText Markup Language is <abbr title="HyperText


Markup Language">HTML</abbr>.</p>

<!-- Acronym Element -->

<p>The acronym for World Health Organization is <acronym title="World Health


Organization">WHO</acronym>.</p>
<!-- Text Direction -->

<p><bdo dir="rtl">This text is displayed right-to-left.</bdo></p>

<!-- Special Terms -->

<p><dfn title="Definition">HTML</dfn> is the standard markup language for creating


web pages.</p>

<!-- Quoting Text -->

<p>He said, <q>HTML is easy to learn.</q></p>

<!-- Short Quotations -->

<p><q>To be, or not to be, that is the question.</q></p>

<!-- Text Citation -->

<p><cite>Shakespeare</cite> wrote many famous plays.</p>

<!-- Computer Code -->

<p>To print "Hello, World!" in Python, use <code>print("Hello,


World!")</code>.</p>

<!-- Keyboard Text -->

<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy text.</p>

<!-- Programming Variables -->

<p>The value of <var>x</var> is 10.</p>

<!-- Program Output -->

<p>The program output is: <samp>Hello, World!</samp></p>


<!-- Address Text -->

<address>

Written by Kislay Rai.<br>

Visit us at:<br>

Example.com<br>

Box 564, GBU LAND<br>

India

</address>

</body>

</html>
 SCREENSHOT OF CODE AND ITS RESULT:

Code:
Result:
EXPIREMENT:6
QUESTION:

Write an HTML code to display your education details in tabular format.

 CODE:

<!DOCTYPE html>

<html>

<head>

<title>Education Details</title>

</head>

<body>

<h1>My Education Details</h1>

<table border="1">

<tr>

<th>Degree</th>

<th>Institution</th>

<th>Year of Passing</th>

<th>Grade</th>

</tr>

<tr>

<td>Tenth</td>

<td>Uma public school</td>

<td>2021-22</td>

<td>b+</td>

</tr>

<tr>

<td>twelth</td>

<td>Azad public school </td>


<td>2023-24</td>

<td>b+</td>

</tr>

<tr>

<td>Graduation </td>

<td>perusing from gautam buddha University </td>

<td>2024- first year</td>

<td> </td>

</tr>

</table>

</body>

</html>
 SCREENSHOT OF CODE AND ITS RESULT:

Code:
Result:

You might also like