Scribd
Upload
32 views

HTML PRACTICAL New

The document discusses various HTML tags used to format text and create lists. It explains heading, paragraph, horizontal rule, bold, italic, underline, strikethrough, monospaced, superscript, and subscript tags. It also covers unordered lists using bullet points and ordered lists using numeric or alphabetic ordering. The type and start attributes are described for customizing list formatting and numbering.

Uploaded by

govind717w76
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
32 views

HTML PRACTICAL New

The document discusses various HTML tags used to format text and create lists. It explains heading, paragraph, horizontal rule, bold, italic, underline, strikethrough, monospaced, superscript, and subscript tags. It also covers unordered lists using bullet points and ordered lists using numeric or alphabetic ordering. The type and start attributes are described for customizing list formatting and numbering.

Uploaded by

govind717w76
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 45

Program 1

HTML Headings

These tags help us to give headings to the content of a webpage. These tags are mainly written inside
the body tag. HTML provides us with six heading tags from <h1> to <h6>. Every tag displays the heading
in a different style and font size.

Source Code

<html>

<head>

<title>My First Web Page </title>

</head>

<body>

<h1> Army Public School , Varanasi </h1>

<h2> Army Public School , Varanasi </h2>

<h3> Army Public School , Varanasi </h3>

<h4> Army Public School , Varanasi </h4>

<h5> Army Public School , Varanasi </h5>

<h6> Army Public School , Varanasi </h6>

</body>

</html>
Output

Army Public School , Varanasi

Army Public School , Varanasi

Army Public School , Varanasi

Army Public School , Varanasi

Army Public School , Varanasi

Army Public School , Varanasi

Program 2

HTML Paragraph

These tags help us to write paragraph statements in a webpage. They start with the <p> tag and ends
with <p>. Here the <br> tag is used to break line and acts as a carriage return. <br> is an empty tag.

Source Code

<html>

<head>
<title>Line Break Example</title>

</head>

<body>

<p>Hello<br />

You delivered your assignment ontime.<br />

Thanks<br />

Mahnaz</p>

</body>

</html>

Output

Hello
You delivered your assignment on time.
Thanks
Mahnaz

Program 3
HTML Horizontal Lines

The <hr> tag is used to break the page into various parts, creating horizontal margins with help of a
horizontal line running from left to right hand side of the page.

This is also an empty tag and doesn’t take any additional statements.

Source Code

<html>

<head>

<title>Horizontal Line Example</title>

</head>

<body>

<p>This is paragraph one and should be on top</p>

<hr/>

<p>This is paragraph two and should be at bottom</p>

</body>

</html>

Output

This is paragraph one and should be on top


This is paragraph two and should be at bottom

Program 4 HTML - Formatting

Source Code

Bold Text

Anything that appears within <b>...</b> element, is displayed in bold as shown below .

<html>

<head>

<title>Bold Text Example</title>

</head>

<body>

<p>The following word uses a <b>bold</b> typeface.</p>

</body>

</html>

This will produce the following result −

The following word uses a bold typeface.


Italic Text

Anything that appears within <i>...</i> element is displayed in italicized as shown below −

Example

<html>

<head>

<title>Italic Text Example</title>

</head>

<body>

<p>The following word uses an <i>italicized</i> typeface.</p>

</body>

</html>

This will produce the following result –

The following word uses an italicized typeface

(iii)

Underlined Text

Anything that appears within <u>...</u> element, is displayed with underline as shown below

<html>

<head>

<title>Underlined Text Example</title>

</head>
<body>

<p>The following word uses an <u>underlined</u> typeface.</p>

</body>

</html>

This will produce the following result –

The following word uses an underlined typeface.

(iv)

Strike Text

Anything that appears within <strike>...</strike> element is displayed with strikethrough, which is a thin
line through the text as shown below −

<!DOCTYPE html>

<html>

<head>

<title>Strike Text Example</title>

</head>

<body>

<p>The following word uses a <strike>strikethrough</strike> typeface.</p>

</body>
</html>

This will produce the following result −

The following word uses a strikethrough typeface.

(v)

Monospaced Font

The content of a <tt>...</tt> element is written in monospaced font. Most of the fonts are known as
variable-width fonts because different letters are of different widths (for example, the letter 'm' is wider
than the letter 'i'). In a monospaced font, however, each letter has the same width.

Example

<!DOCTYPE html>

<html>

<head>

<title>Monospaced Font Example</title>

</head>

<body>

<p>The following word uses a <tt>monospaced</tt> typeface.</p>

</body>

</html>
This will produce the following result –

The following word uses a monospaced typeface.

(vi) Superscript Text

The content of a <sup>...</sup> element is written in superscript; the font size used is the same size as
the characters surrounding it but is displayed half a character's height above the other characters.

Example

<html>

<head>

<title>Superscript Text Example</title>

</head>

<body>

<p>The following word uses a <sup>superscript</sup> typeface.</p>

</body>

</html>

The following word uses a superscript typeface.

(vii) Subscript Text


The content of a <sub>...</sub> element is written in subscript; the font size used is the same as the
characters surrounding it, but is displayed half a character's height beneath the other characters.

<html>

<head>

<title>Subscript Text Example</title>

</head>

<body>

<p>The following word uses a <sub>subscript</sub> typeface.</p>

</body>

</html>

This will produce the following result –

The following word uses a subscript typeface.

Examples of Physical Character Tags

<B> Indicates that the text should be bold. </B>


<I> Indicates that the text should be italic. </I>

Indicates that the text should be used with a font such as Courier that
<TT> </TT>
allots the same width to each character.

Indicates that the text should be displayed in a big font. Available in


<BIG> </BIG>
HTML 3.0 or higher.

Indicates that the text should be displayed in a small font. Available in


<SMALL> </SMALL>
HTML 3.0 or higher.

Indicates that the text should be displayed as a subscript, in a smaller


<SUB> font if possible. Available in HTML 3.0 or higher. </SUB>

Indicates that the text should be displayed as a superscript, in a


<SUP> </SUP>
smaller font if possible. Available in HTML 3.0 or higher.

Indicates that the text should be displayed underlined. Not all


<U> </U>
browsers support this tag.

Logical Tags

Logical tags are used to indicate to the visually impaired that there is some emphasizes on the text. Each
browser has its own technique as to how to indicate to its viewer that the text between the tags are
different.
The syntax or format for using a LOGICAL TAG is as follows:
<Tag Name> Character/s to be formatted. </Tag Name>

Examples of Logical Character Tags

Indicates that characters should be emphasized in some way.


<EM> </EM>
Usually displayed in italics.

Emphasizes characters more strongly than <EM>. Usually


<STRONG> </STRONG>
displayed in a bold font

Indicates a sample of code. Usually displayed in a Courier font or a


<CODE> </CODE>
similar font that allots the same width to each character.

Used to offset text that the user should enter. Often displayed in a
<KBD> Courier font or a similar font that allots the same width to each </KBD>
character.

<VAR> Indicates a variable. Often displayed in italics or underlined. </VAR>


<CITE> Indicates short quotes or citations. Often italicized by browsers. </CITE>

Program 5

Unordered HTML List

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

The list items will be marked with bullets (small black circles) by default:

The type Attribute

You can use type attribute for <ul> tag to specify the type of bullet you like. By default, it is a disc.
Following are the possible options −

<ul type = "square">

<ul type = "disc">

<ul type = "circle">

<html>

<head>

<title>HTML Unordered List</title>

</head>
<body>

<ul type = "square">

<li>Beetroot</li>

<li>Ginger</li>

<li>Potato</li>

<li>Radish</li>

</ul>

</body>

</html>

Output

Beetroot

Ginger

Potato

Radish

Program 6

Ordered List

<html>

<head>

<title>HTML Ordered List</title>

</head>
<body>

<ol>

<li>Beetroot</li>

<li>Ginger</li>

<li>Potato</li>

<li>Radish</li>

</ol>

</body>

</html>

Output

Beetroot

Ginger

Potato

Radish

The type Attribute

You can use type attribute for <ol> tag to specify the type of numbering you like. By default, it is a
number. Following are the possible options −

<ol type = "1"> - Default-Case Numerals.

<ol type = "I"> - Upper-Case Numerals.

<ol type = "i"> - Lower-Case Numerals.


<ol type = "A"> - Upper-Case Letters.

<ol type = "a"> - Lower-Case Letters.

The start Attribute

You can use start attribute for <ol> tag to specify the starting point of numbering you need. Following
are the possible options −

<ol type = "1" start = "4"> - Numerals starts with 4.

<ol type = "I" start = "4"> - Numerals starts with IV.

<ol type = "i" start = "4"> - Numerals starts with iv.

<ol type = "a" start = "4"> - Letters starts with d.

<ol type = "A" start = "4"> - Letters starts with D.

<html>

<head>

<title>HTML Ordered List</title>

</head>

<body>

<ol type = "i" start = "4">

<li>Beetroot</li>

<li>Ginger</li>

<li>Potato</li>

<li>Radish</li>

</ol>
</body>

</html>

Output

Beetroot

Ginger

Potato

Radish

Program 7

HTML Definition Lists

HTML and XHTML supports a list style which is called definition lists where entries are listed like in a
dictionary or encyclopaedia. The definition list is the ideal way to present a glossary, list of terms, or
other name/value list.

Definition List makes use of following three tags.

<dl> − Defines the start of the list

<dt> − A term

<dd> − Term definition

</dl> − Defines the end of the list


<html>

<head>

<title>HTML Definition List</title>

</head>

<body>

<dl>

<dt><b>HTML</b></dt>

<dd>This stands for Hyper Text Markup Language</dd>

<dt><b>HTTP</b></dt>

<dd>This stands for Hyper Text Transfer Protocol</dd>

</dl>

</body>

</html>

Output

HTML

This stands for Hyper Text Markup Language

HTTP

This stands for Hyper Text Transfer Protocol


Program 8

HTML Nested List

A list within another list is termed as nested list. If you want a bullet list inside a numbered list then such
type of list will called as nested list.

<html>

<head>

<title>Nested list</title>

</head>

<body>

<p>List of Indian States with thier capital</p>

<ol>

<li>Delhi

<ul>

<li>NewDelhi</li>

</ul>

</li>

<li>Haryana

<ul>

<li>Chandigarh</li>

</ul>

</li>

<li>Gujarat

<ul>

<li>Gandhinagar</li>
</ul>

</li>

<li>Rajasthan

<ul>

<li>Jaipur</li>

</ul>

</li>

<li>Maharashtra

<ul>

<li>Mumbai</li>

</ul>

</li>

<li>Uttarpradesh

<ul>

<li>Lucknow</li></ul>

</li>

</ol>

</body>

</html>

Output
Program 9

HTML – Tables

Simple Table

<html>
<head>

<title>HTML Tables</title>

</head>

<body>

<table border = "1">

<tr>

<td>Row 1, Column 1</td>

<td>Row 1, Column 2</td>

</tr>

<tr>

<td>Row 2, Column 1</td>

<td>Row 2, Column 2</td>

</tr>

</table>

</body>

</html>

Output
Table Heading

<html>

<head>

<title>HTML Table Header</title>

</head>

<body>

<table border = "1">

<tr>

<th>Name</th>

<th>Salary</th>

</tr>

<tr>

<td>Ramesh Raman</td>

<td>5000</td>

</tr>

<tr>

<td>Shabbir Hussein</td>

<td>7000</td>

</tr>

</table>
</body>

</html>

(iii ) Cellpadding and Cellspacing Attributes

<html>

<head>

<title>HTML Table Cellpadding</title>

</head>

<body>

<table border = "1" cellpadding = "5"

cellspacing = "5">

<tr>

<th>Name</th>

<th>Salary</th>

</tr>

<tr>

<td>Ramesh Raman</td>

<td>5000</td>

</tr>

<tr>

<td>Shabbir Hussein</td>

<td>7000</td>
</tr>

</table>

</body>

</html>

Colspan and Rowspan Attributes

<html>

<head>

<title>HTML Table Colspan/Rowspan</title>

</head>

<body>

<table border = "1">

<tr>

<th>Column 1</th>

<th>Column 2</th>

<th>Column 3</th>

</tr>

<tr>

<td rowspan = "2">Row 1 Cell 1</td>

<td>Row 1 Cell 2</td>


<td>Row 1 Cell 3</td>

</tr>

<tr>

<td>Row 2 Cell 2</td>

<td>Row 2 Cell 3</td>

</tr>

<tr>

<td colspan = "3">Row 3 Cell 1</td>

</tr>

</table>

</body>

</html>

(v)

Tables Backgrounds

You can set table background using one of the following two ways −

bgcolor attribute − You can set background color for whole table or just for one cell.

background attribute − You can set background image for whole table or just for one cell.

You can also set border color also using bordercolor attribute.

Note −The bgcolor, background, and bordercolor attributes deprecated in HTML5. Do not use these
attributes.

<html>
<head>

<title>HTML Table Background</title>

</head>

<body>

<table border = "1" bordercolor = "green" bgcolor = "yellow">

<tr>

<th>Column 1</th>

<th>Column 2</th>

<th>Column 3</th>

</tr>

<tr>

<td rowspan = "2">Row 1 Cell 1</td>

<td>Row 1 Cell 2</td>

<td>Row 1 Cell 3</td>

</tr>

<tr>

<td>Row 2 Cell 2</td>

<td>Row 2 Cell 3</td>

</tr>

<tr>

<td colspan = "3">Row 3 Cell 1</td>

</tr>

</table>
</body>

</html>

(vi)

<html>

<head>

<title>HTML Table Background</title>

</head>

<body>

<table border = "1" bordercolor = "green" background = "/images/test.png">

<tr>

<th>Column 1</th>

<th>Column 2</th>

<th>Column 3</th>

</tr>

<tr>

<td rowspan = "2">Row 1 Cell 1</td>

<td>Row 1 Cell 2</td><td>Row 1 Cell 3</td>

</tr>

<tr>

<td>Row 2 Cell 2</td>


<td>Row 2 Cell 3</td>

</tr>

<tr>

<td colspan = "3">Row 3 Cell 1</td>

</tr>

</table>

</body>

</html>

(vii) Table Height and Width

<html>

<head>

<title>HTML Table Width/Height</title>

</head>

<body>

<table border = "1" width = "400" height = "150">

<tr>

<td>Row 1, Column 1</td>

<td>Row 1, Column 2</td>

</tr>
<tr>

<td>Row 2, Column 1</td>

<td>Row 2, Column 2</td>

</tr>

</table>

</body>

</html>

(viii) Table Caption

<html>

<head>

<title>HTML Table Caption</title>

</head>

<body>

<table border = "1" width = "100%">

<caption>This is the caption</caption>

<tr>

<td>row 1, column 1</td><td>row 1, columnn 2</td>

</tr>

<tr>
<td>row 2, column 1</td><td>row 2, columnn 2</td>

</tr>

</table>

</body>

</html>

(ix) Table Header, Body, and Footer

Tables can be divided into three portions − a header, a body, and a foot. The head and foot are rather
similar to headers and footers in a word-processed document that remain the same for every page,
while the body is the main content holder of the table.

The three elements for separating the head, body, and foot of a table are −

<thead> − to create a separate table header.

<tbody> − to indicate the main body of the table.

<tfoot> − to create a separate table footer.

A table may contain several <tbody> elements to indicate different pages or groups of data.

But it is notable that <thead> and <tfoot> tags should appear before <tbody>

<html>

<head>

<title>HTML Table</title>

</head>

<body>

<table border = "1" width = "100%">


<thead>

<tr>

<td colspan = "4">This is the head of the table</td>

</tr>

</thead>

<tfoot>

<tr>

<td colspan = "4">This is the foot of the table</td>

</tr>

</tfoot>

<tbody>

<tr>

<td>Cell 1</td>

<td>Cell 2</td>

<td>Cell 3</td>

<td>Cell 4</td>

</tr>

</tbody>

</table>

</body>
</html>

Program 10

HTML Image

HTML img tag is used to display image on the web page. HTML img tag is an empty tag that contains
attributes only, closing tags are not used in HTML image element.

Attributes of HTML img tag

1) src

It is a necessary attribute that describes the source or path of the image. It instructs the browser where
to look for the image on the server.

The location of image may be on the same directory or another server.

2) alt

The alt attribute defines an alternate text for the image, if it can't be displayed. The value of the alt
attribute describe the image in words.

3) width
It is an optional attribute which is used to specify the width to display the image. It is not recommended
now. You should apply CSS in place of width attribute.

4) height

The HTML height attribute also supports iframe, image and object elements. It is not recommended
now. You should apply CSS in place of height attribute.

Example 1

<img src="good_morning.jpg" alt="Good Morning Friends"/>

Example 2

<img src="E:/images/animal.png" height="180" width="300" alt="animal image">

Use <img> tag as a link

We can also link an image with other page or we can use an image as a link. To do this, put <img> tag
inside the <a> tag.

Example:

<a href="https://www.google.co.in"><img src="robot.jpg" height="100" width="100"></a>


<html>

<head>

<title>Set Image Alignment</title>

</head>

<body>

<p>Setting image Alignment</p>

<img src = "myimage.jpeg" alt = "Test Image" border = "3" align = "right"/>

</body>

</html>

<html>

<head>

<title>Set Image Alignment</title>

</head>
<body>

<p>Setting image Alignment</p>

<img src = " F:\Data 6\myimage2.jpg " alt = "Test Image" border = "3" align = "right"/>

</body>

</html>

Program 11

Creating Links in HTML

A link or hyperlink is a connection from one web resource to another.

Anything between the opening <a> tag and the closing </a> tag becomes the part of the link that the
user sees and clicks in a browser.

HTML Link Syntax

Syntax Explanation:

href : The href attribute is used to specify

the destination address of the link used.

Text link : The text link


is the visible part of the link.

Examples

<a href="https://www.google.com/">

Google Search

</a>

<a href="https://www.apsvaranasi.org/">

APS Varanasi

</a>

<a href="images/kites.jpg">

<img src="kites-thumb.jpg" alt="kites">

</a>

An absolute URL is the URL that includes every part of the URL format, such as protocol, host name, and
path of the document, e.g., https://www.google.com/, https://www.example.com/form.php, etc.

While, relative URLs are page-relative paths, e.g., contact.html, images/smiley.png, and so on. A relative
URL never includes the http:// or https:// prefix.

Setting the Targets for Links

The target attribute tells the browser where to open the linked document. There are four defined
targets, and each target name starts with an underscore(_) character:

_blank — Opens the linked document in a new window or tab.

_parent — Opens the linked document in the parent window.

_self — Opens the linked document in the same window or tab as the source document. This is the
default, hence it is not necessary to explicitly specify this value.

_top — Opens the linked document in the full browser window.


Examples

<a href="/about-us.php" target="_top">

About Us

</a>

<a href="https://www.google.com/" target="_blank">

Google

</a>

<a href="images/sky.jpg" target="_parent">

<img src="sky-thumb.jpg" alt="Cloudy Sky">

</a>

By default, links will appear as follow in most of the browsers:

An unvisited link is underlined and blue.

A visited link is underlined and purple.

An active link is underlined and red.

However, you can overwrite this using CSS.

Program

<html>

<head>

<title>Creating Links in HTML</title>


</head>

<body>

<p><a href="https://www.google.com/" target="_blank">Google Search</a></p>

<p>

<a href="myimage2.jpg">

<img src="myimage.jpg" alt="Animal">

</a>

</p>

<p><a href="https://cbse.nic.in/">CBSE </a></p>

</body>

</html>

Program 12

Program to implement font and basefont tag

HTML: <basefont> tag

Description

The HTML <basefont> tag defines the default font-family, font-size and color for the text in the HTML
document.
Since this tag was removed in HTML5, it is recommended that you use CSS properties such as font, font-
family, font-size and color to format the text in the document

WARNING: The <basefont> tag has been removed in HTML5. Use CSS instead.

Syntax

In HTML, the syntax for the <basefont> tag is: (example that defines the base font as red, uses to the
font-family Verdana, Geneva, sans-serif and has a size of 12)

<head>

<basefont color="red" face="Verdana, Geneva, sans-serif" size="12">

</head>

Attributes

Attribute Description

Color of text in either hexadecimal (ie: #RRGGBB format) or named color (ie: black, red,
color
white)

face Font to use for text. Listed as one or more font names (comma separated)

Font size expressed as either a numeric or relative value.

size Numeric values range from 1 to 7 (1 is the smallest, 7 is the largest, 3 is the default).
Relative values can be values such as +1 or -2, increasing by one font size or decreasing
by 2 font sizes, respectively.

Note

The HTML <basefont> element is found within the <head> tag.

The <basefont> tag is obsolete in HTML5. Use CSS instead to format the text. The CSS equivalents would
be color, font, font-family, font-size, etc
Browser Compatibility

The <basefont> tag has basic support with the following browsers:

Internet Explorer (IE)

Edge

Edge Mobile

Following are some specifications about the <base> tag

Display None (empty tag)

Start tag/End tag Only start-tag

Usage Font styling

(i)

<!DOCTYPE html>

<html>

<head>

<title>Basefont tag</title>

<basefont color="blue" size="5" face="arial">

</head>

<body>

<h2>Example of Basefont tag</h2>

<p>The basefornt tag is not supported in HTML5 use CSS to style the document</p>
</body>

</html>

(ii)

Right way is to Use CSS to set the base font:

<html>

<head>

<style>

p{

font-size: 20px;

color: #67dfee;

font-family: Helvetica;

</style>

</head>

<body>

<h2>CSS to Style the document</h2>

<p>This is Paragraph</p>

</body>

</html>

Program 13

HTML: <font> tag

The HTML <font> tag defines the font size, color and face of text in the HTML document.
Since this tag was removed in HTML5, it is recommended that you use CSS properties such as font, font-
family, font-size and color to format the text in the document.

Syntax

<font size=" " color=" " face=" "> Content....</font>

Following are some specifications about the HTML <font> tag

Display Inline

Start tag/End tag Both Start and End tag

Usage Font Style

Note

The HTML <font> element is found within the <body> tag.

The <font> tag is obsolete in HTML5. Use CSS instead to format the text. The CSS equivalents would
be color, font, font-family, font-size, etc.

Browser Compatibility

The <font> tag has basic support with the following browsers:

Chrome

Android

Firefox (Gecko)

Firefox Mobile (Gecko)

Internet Explorer (IE)

Edge Mobile

Opera

Opera Mobile
Safari (WebKit)

Safari Mobile

Example

<html>

<head>

<title>Font Tag</title>

</head>

<body>

<h2>Example of font tag</h2>

<p>This is normal text without any font styling</p>

<p>

<font color="blue">Text with normal size and default face</font>

</p>

<p>

<font size="5" color="green">Text with Increased size and default face</font>

</p>

<p>

<font color="red" face="cursive">Text with Changed face</font>

</p>

</body>

</html>
Using CSS

The same effect can be achieved using CSS properties as in below example:

<!DOCTYPE html>

<html>

<head>

<title>Font Tag</title>

</head>

<body>

<h2>Change font using CSS</h2>

<p>This is normal text without any font styling</p>

<p style="color: blue;">Text with normal size and default face</p>

<p style="font-size: 25px; color: green;">Text with Increased size and default face </p>

<p style="font-family: cursive; color: red;">Text with Changed face</p>

</body>

</html>

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy