Sumanti Soren (Regd No 1821382)
Madhusmita Jena (Regd No 1821227)
Aparajita Samal (Regd No 1821437)
Swapna Soren (Regd No 1821143)
ADMISSION MODE: DIRECT
PERFORMA OF THE PROJECT COMPLETION CERTIFICATE
This is to certify that the Project work done at NIELIT, New Delhi, Titled “HTML Language” BY
Sumanti Soren (Regd No 1821382) ,Madhusmita Jena (Regd No 1821227) ,Aparajita Samal
(Regd No 1821437) ,Swapna Soren (Regd No 1821143) , in partial fulfillment of NIELIT „O‟
Level Examination has been found satisfactory. This report has not been submitted for any other
examina-tion and does not form part of any other course undergone by the candidate. It is further
certifies that he/she has appeared in all the four modules of NIE-LIT „O‟ Level Examination.
Name of the Guide/Supervisor: Ashmita Ghatani
NIELIT,Bhubaneswar
HYPER TEXT MARKUP LANGUAGE (HTML)
1. INTRODUCTION
Hypertext Markup Language (HTML) is a markup language for creating a webpage. Web
Pages are usually viewed in a web browser. They can include writing, links, pictures, and even
sound and video. HTML is used to mark and describe each of these kinds of con-tent so the web
browser can display them correctly. HTML can also be used to add meta information to a
webpage. Meta information is usually not shown by web browsers and is data about the web page,
e.g., the name of the person who created the page. Cascading Style Sheets (CSS) is used to style
HTML elements while JavaScript is used to manipulate HTML elements and CSS styles
OBJECTIVE
To understand the basic concepts and structure of HTML.
To learn the use of different HTML tags and attributes.
To create simple and attractive web pages using HTML.
To understand the implementation of tables, lists, hyperlinks, images, and forms.
To develop practical skills in web page design using a text editor and web browser.
2. HTML History
The first version of HTML was written by Tim Berners-Lee in 1993. Since then, there have been
many different versions of HTML. The most widely used version throughout the 2000's was
HTML 4.01, which became an official standard in December 1999.
Another version, XHTML, was a rewrite of HTML as an XML language. XML is a standard
markup language that is used to create other markup languages. Hundreds of XML languages are
in use today, including GML (Geography Markup Language), MathML, MusicML, and RSS
(Really Simple Syndication). Since each of these languag-es was written in a common language
(XML), their content can easily be shared across applications. This makes XML potentially very
powerful, and it's no surprise that the W3C would create an XML version of HTML (again,
called XHTML). XHTML became an official standard in 2000, and was updated in 2002.
XHTML is very similar to HTML, but has stricter rules. Strict rules are necessary for all XML
languages, because without it, interoperability between applications would be impossible. You'll
learn more about the differences between HTML and XHTML in Unit 2.
Most pages on the Web today were built using either HTML 4.01 or XHTML 1.0. How-ever, in
recent years, the W3C (in collaboration with another organization,
the WHATWG), has been working on a brand new version of HTML, HTML5. Current-ly
(2011), HTML5 is still a draft specification, and is not yet an official standard. How-ever, it is
already widely supported by browsers and other web-enabled devices, and is the way of the
future. Therefore, HTML5 is the primary language taught in this course.
3. HTML Versions
Since the early days of the web, there have been many versions of HTML:
Version Year
HTML 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML5 2014
4. Tags
HTML tags are the hidden keywords within a web page that define how your web browser
must format and display the content.
Most tags must have two parts, an opening and a closing part. For example, <html> is the
opening tag and </html>is the closing tag. Note that the closing tag has the same text as
the opening tag, but has an additional forward-slash ( / ) character. I tend to interpret this
as the "end" or "close" character.
4.1. HTML Tag
HTML tags contain HTML elements, and give a command to browsers to read the docu-
ment as an HTML document.
<html>… ..................... </html>
4.2. Head Tag
Head tags define general information about the document, page title, meta-tags, scripts
and links to follow, and other commands to browsers.
<head>
<title>HTML Tags - Head Tag</title>
</head>
4.3. Title Tag
Brief description of the web page.
<title> .......................... </title>
4.4. Body tag
Body tags identify the content of a web page.
<body>………………… </body>
5. HTML Attributes
All HTML elements can have attributes
Attributes provide additional information about an element
Attributes are always specified in the start tag
Attributes usually come in name/value pairs like: name="value"
5.1 The href Attribute
HTML links are defined with the <a> tag. The link address is specified in
the href attribute:
5.2. The src Attribute
HTML images are defined with the <img> tag.
The filename of the image source is specified in the src attribute:
5.3. The width and height Attributes
Images in HTML have a set of size attributes, which specifies the width and height of the
image:
5.4. The alt Attribute
The alt attribute specifies an alternative text to be used, when an image cannot be dis-
played. The alt attribute is also useful if the image does not exist:
5.5. The style Attribute
The style attribute is used to specify the styling of an element, like color, font, size etc.
Required Software
Software :- Notepad , Notepad++, Editplus, bluefish, terminal.
OS:- windoswXP,7,8,10, Linux, Mac OSX
PROJECT 1.
Make simple web page using HTML .
<html>
<head>
<title>web page</title>
</head>
<body> This is a web page.</body>
</html>
(Note:- write the HTML code using Notepad software and save the file using .HTML ex-
tension.)
Output :-
This is a web page.
PROJECT 2.
Make a web page using body attribute.
<html>
<head>
<title>web page</title>
</head>
<body text=”red” bgcolor=”yellow”> This is a web page.</body>
</html>
Output :-
This is a web page.
PROJECT :-3
Make a web page using heading tag.
<html>
<head>
<title>web page</title>
</head>
<body ><h1> This is 1st Heading</h1>
<h2> This is 2nd Heading</h2>
<h3> This is 3rd Heading</h3>
<h4> This is 4th Heading</h4>
<h5> This is 5th Heading</h5>
<h6> This is 6th Heading</h6></body>
</html>
Output :-
This is 1st Heading
This is 2nd Heading
This is 3rd Heading
This is 4th Heading
This is 5th Heading
This is 6th Heading
PROJECT :4
Paragraph tag <P> and line break tag <BR>
<html>
<head>
<title>web page</title>
</head>
<body >
<P> HTML stands for hyper text markup language. It is supposed super set of SGML.
<p> you can create web page using HTML language. It is easy to learn and interesting as
well. <br>
When you get a lot of pages you can assemble into a directory and can give it is a shape
of website.
</body>
</html>
Output :-
HTML stands for hyper text markup language. It is supposed super set of SGML.
you can create web page using HTML language. It is easy to learn and interesting as well.
When you get a lot of pages you can assemble into a directory and can give it is a shape of
website.
PROJECT : 5
List tag
number tag<OL>
<html>
<head>
<title>web page</title>
</head>
<body >
O Level course divided in to four modules.
<ol><li>it tools and business
<li>internet and web designing
<li>c language
<li> introduction to ict
</ol>
</body>
</html>
Output :-
O Level course divided in to four modules.
1. it tools and business
2. internet and web designing
3. c language
4. introduction to ict
PROJECT : 6
list tag using unnumbered tag <ul>
<html>
<head>
<title>web page</title>
</head>
<body >
Part of computer hardware.
<ul><li>monitor
<li>mouse
<li>keyboard
<li>CPU
</ul>
</body>
</html>
Output :-
Part of computer hardware.
monitor
mouse
keyboard
CPU
PROJECT :7
List tag using type and start attribute
<html>
<head>
<title>web page</title>
</head>
<body >
<ol START ="51">
<li>one level outline.
<ol type="A"><li>two level outline
<ol type= "I"><li>three level outline
</ol>
</body>
</html>
Output :-
51. one level outline.
A. two level outline
I. three level outline
PROJECT : 8
preformatted text using <pre> tag.
<html>
<head>
<title>web page</title>
</head>
<body >
<pre>
<p> O level student's result sheet
<p> Name Modules Grede Result
Dharm chand M1 B pass
M2 C pass
M3 C pass
M4 B pass
</pre>
</body>
</html>
Output :-
O level student's result sheet
Name Modules Grede Result
Dharm chand M1 B pass
M2 C pass
M3 C pass
M4 B pass
PROJECT : 9
Character formatting tag.
<html>
<head>
<title>web page</title>
</head>
<body >
<p> this is <b>Bold</b>
<p> this is <i>italic</i>
<p>this is <u> underline</u>
<p>this is <sub>subscript</sub>
<p>this is <sup>superscript</sup>
<p>this is <strike>strikethrough</strike>
</body>
</html>
Output :-
this is Bold
this is italic
this is underline
this is subscript
this is superscript
this is strikethrough
PROJECT :10
compact Attribute.
<html>
<head>
<title>web page</title>
</head>
<body >
<dl compact>
<dt>/p
<dd> display the directories and files page-wise.
<dt>/w
<dd> display the directories and files width-wise.
</dl>
</body>
</html>
Output:-
/p
display the directories and files page-wise.
/w
display the directories and files width-wise.
PROJECT :11
Font Tag
<html>
<head>
<title>web page</title>
</head>
<body >
<font color="red" size="8" face=" times new roman">
National Institute of Electronics and Information Technology.
</body>
</html>
Output :-
National Institute of Electronics
and Information Technology.
PROJECT :12
Using a Background Image.
<html>
<head>
<title>web page</title>
</head>
<body background=d:\[Link]>
</body>
</html>
Output :-
PROJECT :13
Text Alignment Attribute
<html>
<head>
<title>web page</title>
</head>
<body>
<p align="right">i am in the right
<p align="center"> i am in the center.
<p align="left"> i am in the left.
</body>
</html>
Output :-
i am in the right
i am in the center.
i am in the left.
PROJECT :14
Link using Anchor <A> tag.
<html>
<head>
<title>web page</title>
</head>
<body>
<a href=[Link] studentnielit</a>
<p><a href=[Link] <img src=d:/[Link]></a>
<p><a href="dharmchand40@[Link]">contact me</a>
</body>
</html>
Output :-
studentnielit
contect me
PROJECT :15
Change the height of Horizontal rule
<html>
<head>
<title>web page</title>
</head>
<body>
<p> this is a Normal Rule
<hr>
<p> this is a 100 pixel thick horizontal
<hr size="10">
</body>
</html>
Output :-
this is a Normal Rule
this is a 100 pixel thick horizontal
PROJECT :16
Create table using <Table> Tag.
<html>
<head>
<title>web page</title>
</head>
<body>
<table border="1">
<tr bgcolor="red"><td>Course</td><td>duration</td>
</tr>
<tr bgcolor="green">
<td>O Level></td><td>1year</td>
<tr bgcolor="green"><td>A level</td><td>1year</td></tr>
</body>
</html>
Output :-
Course duration
O Level> 1year
A level 1year
PROJECT: 17
Create a table using rowspan and colspan attribute.
<html>
<head>
<title>web page</title>
</head>
<body>
<table border="1">
<tr bgcolor="red"><td rowspan="3"> <b>digital Course</b></td>
</tr>
<tr bgcolor="green">
<td>CCC</td><td>CCC+</td><TD>BCC</TD>
<tr bgcolor="green"><td>ECC</td><td>ACC</td></tr></table>
<P>
<P><table border="1">
<tr bgcolor="red"><td colspan="3"> <b>digital Course</b></td>
</tr>
<tr bgcolor="green">
<td>CCC</td><td>CCC+</td><TD>BCC</TD>
<tr bgcolor="green"><td>ECC</td><td>ACC</td></tr></table>
</body>
</html>
Output :-
digital Course CCC CCC+ BCC
ECC ACC
digital Course
CCC CCC+ BCC
ECC ACC
PROJECT : 18
Marked text using <mark> tag
<html>
<head>
<title>web page</title>
</head>
<body>
This is <mark>marked tag</mark>
</body>
</html>
Output :-
This is marked tag
PROJECT :-19
HTML colors
<html>
<head>
<title>web page</title>
</head>
<body>
<font color="red">this is red color</font>
<p>
<font color="green"> this is green color</font>
<p><font color="maroom" >this is maroom color</font>
<p><font color="lime"> this is lime color
</font>
</body>
</html>
Output :
this is red color
this is green color
this is maroom color
this is lime color
PROJECT:-20
Marquee tag
<html>
<head>
<title>web page</title>
<head>
<body>
<marquee><b>NIELIT</b></marquee>
</body>
</html>
Output :-
NIELIT
(Note:-the word,” NIELIT” run right to left alignment)
PROJECT :-21
Create form using <form> tag .
A. Input tag
<html>
<head>
<title>web page</title>
<head>
<body>
<form>First Name:<input type="text" name="first name"/>
<p>
Last Name:<input type="text" name="last name"/></form>
</body>
</html>
Output :-
First Name:
Last Name:
PROJECT :-22
Form tag with password control
<html>
<head>
<title>web page</title>
<head>
<body>
<form>User ID:<input type="text" name="User ID"/>
<p>
Password:<input type="password" name="password"/></form>
</body>
</html>
Output :-
nielit123
User ID:
****
Password:
PROJECT :-23
Form create using multiple line text.
<html>
<head>
<title>web page</title>
<head>
<body>
<form>description:<P>
<textarea rows="5"cols="50" name="Description"/>
enter the description here....
</TEXTAREA>
</FORM></body>
</html>
Output :-
description:
enter the description here....
PROJECT:24
Form tag using checkbox control and radio button control.
<html>
<head>
<title>web page</title>
<head>
<body>
<form>choose your course:
<p><input type="checkbox"value="on">O Level<p>
<input type="checkbox" value="on"> A Level
<p>Select your Qualification
<p><input type="radio" value="on">12th
<p><input type="radio" value="on">Graduation
<p><input type="radio" value="on">Master graduation
</FORM></body>
</html>
Output :-
choose your course:
O Level
A Level
Select your Qualification
12th
Graduation
Master graduation
PROJECT :25
Form tag using select box control
<html>
<head>
<title>web page</title>
<head>
<body>
<form>choose your gender:
<select name="dropdown">
<option value="Male" selected>Male</option>
<option value="female">Female</option></select>
<p>choose your country:
<select name="dropdown">
<p><option value="India">India</option>
<option value="Other">Other</option>
</select>
</FORM></body>
</html>
Output :-
choose your gender:
choose youre country:
PROJECT :- 26
Form tag using file upload button.
<html>
<head>
<title>web page</title>
<head>
<body>
<form>
<input type="file" name="fileupload"accept="image/*"/>
</FORM></body>
</html>
Output :-
PROJECT:-27
<html>
<head>
<title>web page</title>
<head>
<body>
<form>
<input type="submit" name="submit"value="submit"/><p>
<input type="reset" name="reset"value="reset"/><p>
<input type="button" name="OK"value="OK"/><p>
</FORM></body>
</html>
Output :_