HTML Practical File

INDEX
Sr. No. Topics Signature

1. Write a HTML program to
demonstrate use of Heading
tag.

demonstrate Text Styles.
3. Write a HTML program to set

background image.
4. Write a HTML program for the
demonstration of Unordered
List and Ordered List.
5. Write a HTML program for the
demonstration of Definition
List.
6. Write a HTML program using
Hyperlinks to navigate from
one page to another.
Hyperlinks to navigate within
the same page.
8. Write a HTML program for
time-table using tables.
frame tag.
create a form.
HTML Basics
Welcome to HTML Basics. This workshop leads you through the basics of Hyper Text Markup Language (HTML).
HTML is the building block for web pages. You will learn to use HTML to author an HTML page to display in a
web browser.
Objectives:
By the end of this workshop, you will be able to:
 Use a text editor to author an HTML document.
 Be able to use basic tags to denote paragraphs, emphasis or special type.
 Create hyperlinks to other documents.
 Create an email link.
 Add images to your document.
 Use a table for layout.
 Apply colors to your HTML document.
Prerequisites:
You will need a text editor, such as Notepad and an Internet browser, such as Internet Explorer or Netscape.
Q: What is Notepad and where do I get it?
A: Notepad is the default Windows text editor. On most Windows systems, click your Start button and choose
Programs then Accessories. It should be a little blue notebook.
Mac Users: SimpleText is the default text editor on the Mac. In OSX use Text Edit and change the following
preferences: Select (in the preferences window) Plain text instead of Rich text and then select Ignore rich text
commands in HTML files. This is very important because if you don't do this HTML codes probably won't work.
One thing you should avoid using is a word processor (like Microsoft Word) for authoring your HTML
documents.
What is an html File?

HTML is a format that tells a computer how to display a web page. The documents themselves are plain text
files with special "tags" or codes that a web browser uses to interpret and display information on your computer
screen.
 HTML stands for Hyper Text Markup Language
 An HTML file is a text file containing small markup tags
 The markup tags tell the Web browser how to display the page
 An HTML file must have an .htm or .html file extension
HTM or HTML Extension?

When you save an HTML file, you can use either the .htm or the .html extension. The .htm extension comes
from the past when some of the commonly used software only allowed three letter extensions. It is perfectly
safe to use either .html or .htm, but be consistent. mypage.htm and mypage.html are treated as different files
by the browser.
How to View HTML Source

A good way to learn HTML is to look at how other people have coded their html pages. To find out, simply click
on the View option in your browsers toolbar and select Source or Page Source. This will open a window that
shows you the actual HTML of the page. Go ahead and view the source html for this page.
HTML Tags
What are HTML tags?

 HTML tags are used to mark-up HTML elements
 HTML tags are surrounded by the two characters < and >
 The surrounding characters are called angle brackets
 HTML tags normally come in pairs like <b> and </b>
 The first tag in a pair is the start tag, the second tag is the end tag
 The text between the start and end tags is the element content
 HTML tags are not case sensitive, <b> means the same as <B>
Logical vs. Physical Tags

In HTML there are both logical tags and physical tags. Logical tags are designed to describe (to the browser) the
enclosed text's meaning. An example of a logical tag is the <strong> </strong> tag. By placing text in between
these tags you are telling the browser that the text has some greater importance. By default all browsers make
the text appear bold when in between the <strong> and
</strong> tags.
Physical tags on the other hand provide specific instructions on how to display the text they enclose. Examples
of physical tags include:
 <b>: Makes the text bold.
 <big>: Makes the text usually one size bigger than what's around it.
 <i>: Makes text italic.
Physical tags were invented to add style to HTML pages because style sheets were not around, though the
original intention of HTML was to not have physical tags. Rather than use physical tags to style your HTML
pages, you should use style sheets.
Why Use Lowercase Tags?

You may notice we've used lowercase tags even though I said that HTML tags are not case sensitive.
<B> means the same as <b>. The World Wide Web Consortium (W3C), the group responsible for developing
web standards, recommends lowercase tags in their HTML 4 recommendation, and XHTML (the next generation
HTML) requires lowercase tags.
Tag Attributes
Tags can have attributes. Attributes can provide additional information about the HTML elements on your page.
The <tag> tells the browser to do something, while the attribute tells the browser how to do it. For instance, if
we add the bgcolor attribute, we can tell the browser that the background color of your page should be blue,
like this: <body bgcolor="blue">.
This tag defines an HTML table: <table>. With an added border attribute, you can tell the browser that the table
should have no borders: <table border="0">. Attributes always come in name/value pairs like this:
name="value". Attributes are always added to the start tag of an HTML element and the value is surrounded by
quotes.
Quote Styles, "red" or 'red'?

Attribute values should always be enclosed in quotes. Double style quotes are the most common, but single
style quotes are also allowed. In some rare situations, like when the attribute value itself contains quotes, it is
necessary to use single quotes:
name='George "machine Gun" Kelly'
Note: Some tags we will discuss are deprecated, meaning the World Wide Web Consortium (W3C) the
governing body that sets HTML, XML, CSS, and other technical standards decided those tags and attributes
are marked for deletion in future versions of HTML and XHTML. Browsers should continue to support
deprecated tags and attributes, but eventually these tagsare likely to become obsolete and so future
support cannot be guaranteed.
For a complete list of tags, visit W3C.org.
Basic HTML Tags
The most important tags in HTML are tags that define headings, paragraphs and line breaks.
Basic HTML Tags
Tag Description
<html> Defines an HTML document
<body> Defines the document's body

<h1> to <h6> Defines header 1 to header 6
<p> Defines a paragraph
<br> Inserts a single line break
<hr> Defines a horizontal rule
 be displayed like this.
this.</p>
Notice you don't see the text between the tags . If you look at the source code, you would
see the comment. To view the source code for this page, in your browser window, select View and then
select Source.
Note: You need an exclamation point after the opening bracket <!-- but not before the closingbracket --
>.
HTML automatically adds an extra blank line before and after some elements, like before and after a
paragraph, and before and after a heading. If you want to insert blank lines into your document, use the
<br> tag.
PRACTICAL 1
Write a HTML program to demonstrate use of Heading tag.
<html>
<head>
<title>Creating Definition List</title>
</head>
<body>
<h1 align=”center”>Definition List</h1>
<dl>
<dt>CSE
<dd>Computer Science & Engineering
<dt>ECE
<dd>Electronics & Communication Engineering
<dt>IT
<dd>Information Technology
<dt>EEE
<dd>Electrical & Electronics Engineering
<dt>CE
<dd>Civil Engineering
</dl>
</body>
</html>
OUTPUT:
PRACTICAL 2
Write a HTML program to demonstrate Text Styles.
<html>
<head>
<title>TEXT STYLE TAG DEMO</title>
</head>
<body>
I am writing how to use <i>Italic Tag.</i> <br><br>
I am writing how to use <b>Bold Tag.</b> <br><br>
I am writing how to use <u>Underline Tag.</u> <br><br>
I am writing how to use <s>Strike Tag.</s> <br><br>
I am writing how to use Superscript tag like x<sup>2</sup> <br><br>
I am writing how to use subscript tag like H<sub>2</sub>O <br><br>
</body>
</html>
OUTPUT:
PRACTICAL 3
Write a HTML program to set background image.
<HEAD>
<HEAD>
<TITLE>BACKGROUND IMAGE DEMO </TITLE>
</HEAD>
<BODY Background = " C:\Users\ADMIN\Downloads\image.jfif">
<centre>
<b>
<FONT Size = 5> NATRAJ PUBLISHING HOUSE </FONT><BR><BR>
BIG BASICS OF COMPUTER<BR><BR>
DATA STRUCTURES<BR><BR>
DATABASE MANAGEMENT SYSTEMS<BR><BR>
PROGRAMMING IN C<BR><BR>
PROGRAMMING IN C++<BR><BR>
</b>
</center>
</BODY>
</HEAD>
OUTPUT:
PRACTICAL 4
Write a HTML program for the demonstration of Unordered List and
Ordered List.
<html>
<head>
<title>Ordered List</title>
</head>
<body>
<h1> UNORDERED LIST </h1>
<ul>
<li>Ms-Word
<li>Ms-Excel
<li>Ms-Powerpoint
<li>Ms-Access
</ul>
<h1> ORDERED LIST </h1>
<ol type = A>
<li>Ms-Word
<li>Ms-Excel
<li>Ms-Powerpoint
<li>Ms-Access
</ol>
</body>
</html>
OUTPUT:
PRACTICAL 5
Write a HTML program for the demonstration of Definition List.
<html>
<head>
<title>Creating Definition List</title>
</head>
<body bgcolor=”pink”>
<h1 align=”center”>Definition List</h1>
<dl>
<dt>CSE<dd>Computer Science & Engineering
<dt>ECE<dd>Electronics & Communication Engineering
<dt>IT<dd>Information Technology
<dt>EEE<dd>Electrical & Electronics Engineering
<dt>CE<dd>Civil Engineering
</dl>
</body>
</html>
OUTPUT:
PRACTICAL 6
Write a HTML program using Hyperlinks to navigate from one page to another.
<html>
<head>
<title>EXTERNAL LINK DEMO</title>
</head>
<body>
<A Href = "mypage.html">Visit my Home page.</A>
</body>
</html>
MYPAGE
<html>
<head>
<title>NPH SITE</title>
</head>
<body>
<centre>
</body>
</html>
OUTPUT:
PRACTICAL 7
Write a HTML program using Hyperlinks to navigate within the same page.
<html>
<head>
<title>Internal Linking </title>
</head>
<body>
<center>
<h1>Linking to a section in a page</h1>
CHAPTER 1 <BR><BR>
CHAPTER 2 <BR><BR>
<A Name = "C3">CHAPTER 3 </A><BR><BR>
CHAPTER 4 <BR><BR>
CHAPTER 5 <BR><BR>
CHAPTER 6 <BR><BR>
CHAPTER 7 <BR><BR>
CHAPTER 8 <BR><BR>
CHAPTER 9 <BR><BR>
CHAPTER 10 <BR><BR>
</center>
<A Href = "#3"> Go to CHAPTER 3</A>
</body>
</html>
OUTPUT:
PRACTICAL 8
Write a HTML program for time-table using tables.
<html>
<head>
<title>Timetable</title>
</head>
<body>
<h1 align="center"><font color="Salmon">Timetable of III CSE</font></h1><br>
<table align="center" border="2" cellspacing="0" cellpadding="15">
<tr align="center" valign=="middle">
<th>DAY</th>
<th>I</th>
<th>II</th>
<th rowspan="7"><b>T<br>E<br>A<br><br>B<br>R<br>E<br>A<br>K</b></th>
<th>III</th>
<th>IV</th>
<th rowspan="7"><b>L<br>U<br>N<br>C<br>H<br><br>B<br>R<br>E<br>A<br>K</ b></th>
<th>V</th>
<th>VI</th>
<th>VII</th>
</tr>
<tr align="center">
<th>MON</th>
<td>IS</td>
<td>WT</td>
<td>SEM</td>
<td>OOAD</td>
</tr>
<td>SCI</td>
<td>C#</td>
<td>COMP</td>
<tr align="center">
<th>TUE</th>
<td>AP</td>
<td>AP Lab</td>
<td colspan="2">AP Lab</td>
<td>WT</td>
<td>IS</td>
<td>OOAD</td>
</tr>
<tr align="center">
<th>WED</th>
<td>WT</td>
<td>IS</td>
<td>C#</td>
<td>SCI</td>
<td colspan="3">MOOC'S</td>
</tr>
<tr align="center">
<th>THU</th>
<td>IS</td>
<td>LIB</td>
<td>OOAD</td>
<td>WT</td>
<td colspan="3">WT Lab</td>
</tr>
<tr align="center">
</tr>
<th>FRI</th>
<td>AP</td>
<td>AP</td>
<td>C#</td>
<td>OOAD</td>
<td colspan="3">C# Lab</td>
<tr align="center">
<th>SAT</th>
<td>OOAD</td>
<td>SCI</td>
<td>WT</td>
<td>SEM</td>
<td>AP</td>
<td>AP</td>
<td>C#</td>
</tr>
</table>
</body>
</html>
OUTPUT:
PRACTICAL 9
Write a HTML program using frame tag.
<html>
<frameset cols = 250,*>
<frame src = "list.html" name = "menu">
<frame src = "mypage.html”> name = "main">
</frameset>
</html>
LIST
<html>
<head>
<title>Ordered List</title>
</head>
<body>
<ol type = A>
<li>Ms-Word
<li>Ms-Excel
<li>Ms-Powerpoint
<li>Ms-Access
</ol><br><br>
<ol type = i>
<li>Ms-Word
<li>Ms-Excel
<li>Ms-Powerpoint
<li>Ms-Access
</ol><br><br>
</body>
</html>
MYPAGE
<html>
<head>
<title>NPH SITE</title>
</head>
<body>
<centre>
</center>
</body>
</html>
OUTPUT:
PRACTICAL 10
Write a HTML program to create a form.
<html>
<head>
<title>Registration</title>
</head>
<body bgcolor=lightblue>
<h1 align=center><u>Registration Form</u></h1>
<br><br><br>
<div>
<strong>
First Name &nbsp <input type=text value=" " name="txt1"><br><br> Last Name &nbsp <input
type=text value=" " name="txt2"><br><br> UserName &nbsp <input type=text value=""
name="txt3"><br><br> Password &nbsp <input type=password value="" name="pwd1"><br>
Confirm Password &nbsp <input type=password value="" name="pwd2"><br><br> Address

&nbsp <textarea rows=3 cols=60></textarea><br><br>
Date of Birth &nbsp dd<select name="sel1">
<option>--</option>
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
</select>
mm<select name="sel2">
<option>--</option>
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
yyyy<select name="sel3">
<option> </option>
<option>1987</option>
</select><br><br> Sex &nbsp
<input name="rb1" type="radio" value="radiobutton">Male
<input name="rb1" type="radio" value="radiobutton">Female
<br><br>
Martial Status &nbsp
<input name="rb2" type="radio" value="radiobutton">Single
<input name="rb2" type="radio" value="radiobutton">Married
<br><br>
Mobile Number &nbsp <input type=text name="txt4"><br><br> Branch &nbsp
<input name="rb3" type="radio" value="radiobutton">CSE
<input name="rb3" type="radio" value="radiobutton">IT
<input name="rb3" type="radio" value="radiobutton">ECE
<input name="rb3" type="radio" value="radiobutton">EEE
<input name="rb3" type="radio" value="radiobutton">MECH
<br><br>
Languages Known &nbsp
<input name="cb1" type="checkbox" value="checkbox">English
<input name="cb1" type="checkbox" value="checkbox">Telugu
<input name="cb1" type="checkbox" value="checkbox">Hindi
<input name="cb1" type="checkbox" value="checkbox">Kannada
<input name="cb1" type="checkbox" value="checkbox">Tamil
<br><br>
<center>
<input type=submit value="SUBMIT" name="btn1">&nbsp
<input type=reset value="CANCEL" name="btn1">
</center>
</strong>
</body>
</html>
OUTPUT:

HTML Practical File

Uploaded by

Copyright:

Available Formats

HTML Practical File

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Practical File

Uploaded by

Copyright:

Available Formats

INDEX

Sr. No. Topics Signature

2. Write a HTML program to

3. Write a HTML program to set

 Use a text editor to author an HTML document.

 Be able to use basic tags to denote paragraphs, emphasis or special type.

 Create hyperlinks to other documents.

 Create an email link.

 Add images to your document.

 Use a table for layout.

 Apply colors to your HTML document.

Q: What is Notepad and where do I get it?

What is an html File?

 HTML stands for Hyper Text Markup Language

 An HTML file is a text file containing small markup tags

 An HTML file must have an .htm or .html file extension

HTM or HTML Extension?

How to View HTML Source

What are HTML tags?

 HTML tags normally come in pairs like <b> and </b>

Logical vs. Physical Tags

 <b>: Makes the text bold.

 <i>: Makes text italic.

Why Use Lowercase Tags?

Quote Styles, "red" or 'red'?

name='George "machine Gun" Kelly'

For a complete list of tags, visit W3C.org.

Basic HTML Tags

Basic HTML Tags

<html> Defines an HTML document

<body> Defines the document's body

<p> Defines a paragraph

<br> Inserts a single line break

<hr> Defines a horizontal rule

<!--> Defines a comment

<h6> This is a heading</h6>

<h5 align="left">I can align headings </h5>

<h5 align="center">This is a centered heading </h5>

<h5 align="right">This is a heading aligned to the right </h5>

<p align="left">This is a paragraph</p>

<p align="center">this is another paragraph</p>

This Code Would Display

<p>This <br> is a para<br> graph with line This

graph with line breaks

The <br> tag has no closing tag.

This Code Would Display

<hr width="50%" align="center">

This Code Would Display

<title>Creating Definition List</title>

<h1 align=”center”>Definition List</h1>

<dd>Computer Science & Engineering

<dd>Electronics & Communication Engineering

<dd>Electrical & Electronics Engineering

<title>TEXT STYLE TAG DEMO</title>

I am writing how to use <i>Italic Tag.</i> <br><br>

I am writing how to use <b>Bold Tag.</b> <br><br>

I am writing how to use <u>Underline Tag.</u> <br><br>

I am writing how to use <s>Strike Tag.</s> <br><br>

I am writing how to use Superscript tag like x<sup>2</sup> <br><br>