Scribd
Upload
50 views

Project on HTML Savita Yadav

This document is a comprehensive project on HTML, detailing its introduction, history, versions, tags, attributes, and elements. It includes practical projects demonstrating various HTML functionalities such as creating simple documents, tables, lists, and forms. The document serves as an educational resource for understanding HTML and its applications in web development.

Uploaded by

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

Project on HTML Savita Yadav

This document is a comprehensive project on HTML, detailing its introduction, history, versions, tags, attributes, and elements. It includes practical projects demonstrating various HTML functionalities such as creating simple documents, tables, lists, and forms. The document serves as an educational resource for understanding HTML and its applications in web development.

Uploaded by

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

‘O’ LEVEL PROJECT

PROJECT ON – HTML
LANGUAGE

STUDENT’S NAME:SAVITA YADAV


REGISRATION NO:1536408
ADMISSION MODE:DIRECT
HTML PROJECT
1. Introduction
Hypertext Markup Language(HTML) is a markup
language for creating a webpage . Webpage 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 content 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 .

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 languages. XML is a standard markup language that is
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 languages 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 HTML and
XHTML in unit 2.

3. HTML Version
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
HTML 5 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.
Tags are mainly two type :-
●Container Tags :- It have start tag and end tag both in
pairs.
Like: <html>.....................<html>
<p>..........................</p>
●Empty Tags :- Itave the start tag only and not have any
content.
Like: <br> or </br>
<hr>or </hr>
4.1. Html Tag
HTML tags contain HTML elements, and give a command to
browsers to read the document as an HTML document.
<html>.....................................</html>
4.2. The <!DOCTYPE> Declaration
The <!DOCTYPE> declaration represents the document
type, and helps browsers to display web pages correctly.
It must only appear once, at the top of the page (before any
HTML tags).
The <!DOCTYPE> declaration is not case sensitive.
The <!DOCTYPE> declaration for HTML5 is:<!DOCTYPE
html>
4.3. Head Tags
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 Tags</title>
</head>
4.4. Title Tags
Brief description of the web page.
<title>................................</title>
4.5. Body tags
Body tags identify the content of a content of a web page.
<body>...............................</body>
5. HTML Attributes
 All HTML elements can have attribute.
 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> tags.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 displayed. 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.

6. HTML Elements
An HTML element is defined by a start tag, some
content, and an end tag.
<tagname>Content goes here......
</tagname>
Examples of some HTML elements:
<h1>My First Heading</h1>
<p>My first paragraph.</p>
Start Tag Element Content End Tag
<h1> My First Heading </h1>
<p> My first paragraph </p>
<br> None None

6.1. Nested HTML Elements


HTML elements can be nested (this means that
elements can contain other elements).
All HTML documents consist of nested HTML
elements.
The following example contains four HTML element
(<html>,<body>,<h1> and <p>):
Example:-
<!DOCTYPE>
<html>
<body>
<h1>My First Heading </h1>
<p>My first paragraph.</p>
</body>
</html>

Output:-
My First Heading
My first paragraph

6.2 Empty HTML Elements


HTML elements with no content are called empty
elements.
The <br> tag defines a line break, and is an empty
element without a closing tag:

Example:-
<!DOCTYPE html>
<html>
<body>
<p>This is a <br> paragraph with
a line bread.</p>
</body>
</html>
Output:-
This is a
paragraph with a line bread.

Required Software for creating HTML


document
Editors:Notepad++,Sublime,Vscode,NetBeans,CoffeeCup,
Adobe Dreamweaver etc.
OS: Windows XP,7,8,10,11 , Linux,MAC OS X, Ubuntu etc.

PROJECT 1.
Creating a simple HTML document with paragraph heading
tags(First open the notepad++ then write this code and save
file with html extension file)

<!DOCTYPE>
<html>
<head>
<title>Simple HTML document</title>
</head>
<body>
<h1>This is a Heading 1 </h1>
<h2>This is a Heading 2</h2>
<h3>This is a Heading 3</h3>
<h4>This is a Heading 4</h4>
<h5>This is a Heading 5</h5>
<h6>This is a Heading 6</h6>
<p>Welcome to the world of HTML.</p>
<p>HTML stand for Hyper Text Markup Language.</p>
</body>
</html>

Output :-

This is a Heading 1
This is a Heading 2
This is a Heading 3

This is a Heading 4
This is a Heading 5
This is a Heading 6

Welcome to the world of HTML.


HTML stand for Hyper Text Markup Language.

PROJECT 2.
Creating a HTML document using text formatting with
background color.
<!DOCTYPE>
<html>
<head>
<title>Text formatting with background color</title>
</head>
<body style="background-color:powderblue">
<p><b>This text is bold</b></p>
<p><strong>This is a strong</strong></p>
<p><i>This text is italic</i></p>
<p><em>This text is emphasized</em></p>
<p><u>This text is underline</u></p>
<p><ins>This text is inserted<ins></p>
<p>HTML <small> HTML </small> formatting</p>
<p>HTML <mark>Marked </mark>formatting</p>
<p>MY computer price is <del>48000</del>45000</p>
<!--- Subscripted and Superscripted text-->
<p>CO<sub>2</sub>and X<sup>2</sup></p>
</body>
</html>

Output:-
This text is bold
This is a strong
This text is italic
This text is emphasized
This text is underline
This text is inserted
HTML Marked formatting
HTML HTML formatting
MY computer price is 4800045000
CO2and X2

PROJECT 3.
Creating a HTML table using internal css(style tag).
<!DOCTYPE>
<html>
<head>
<title>HTML tables</title>
<style>
table{
font-family:arial,sans-serif;
border-collapse:collapse;
width:100%;
}
td,th{
border:1px solid#dddddd;
text-align:left;
padding:8px;
}
tr:nth-child(even){
background-color:#dddddd;
}
</style>
</head>
<body>
<h2>HTML Table</h2>
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro Commercial</td>
<td>Francisco Chang</td>
<td>Maxico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Ronald Mendel</td>
<td>Austria</td>
</tr>
</table>
</body>
</html>

Output:-

HTML Table
Company Contact Country
Alfreds Futterkiste Maria Anders Germany
Centro Commercial Francisco Chang Maxico
Ernst Handel Ronald Mendel Austria

PROJECT 4.
Creating a HTML list (ordered or unordered)
<!DOCTYPE>
<html>
<head>
<title>HTML Lists</title>
</head>
<body>
<h2>An Unordered List</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<h2>An Ordered List</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>

Output:-
An Unordered List
•Coffee
•Tea
•Milk

An Ordered List
1.Coffee
2.Tea
3.Milk

PROJECT 5.
Text Alignment Attribute
<!DOCTYPE>
<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 6.
Link using Anchor <A> tag.
<!DOCTYPE>
<html>
<head>
<title>Web page</title>
</head>
<body>
<a href=http://student.nielit.gov.in/>studentnielit</a>
<p><a href=https://www.google.com/>Google Link</a>
</body>
</html>

Output:-
studentnielit
Google Link

PROJECT 7.
Create Horizontal Rule and HTML colors.
<!DOCTYPE>
<html>
<head>
<title>Web page</title>
</head>
<body>
<p>This is a Normal rule</p>
<hr>
<p>This is a 20pixel thick horizontal</p>
<hr size="20">
<font color="red">This is a red color</font>
<p><font color="green">This is a green color</font>
<p><font color="blue">This is a blue color</font>
<p><font color="lime">This is a lime color</font>
</body>
</html

Output:-
This is a Normal rule

This is a 20pixel thick horizontal

This is a red color


This is a green color
This is a blue color
This is a lime color
PROJECT 8.
Create a table using rowspan and colspan attribute.
<!DOCTYPE>
<html>
<head>
<title>Web page</title>
</head>
<body>
<table border="1">
<tr bgcolor="red"><td rowspan="2"><b>diginal
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:-
CCC CCC+ BCC
digital Course
ECC ACC

digital Course

CCC CCC+ BCC


ECC ACC

PROJECT 9.
Create a Form using <form> tag with password control,multiple
line text, checkbox and radio button control,select box.
<!DOCTYPE>
<html>
<head>
<title>Web page</title>
</head>
<body>
<form>
<caption><b>MAKE A FORM</b></caption>
<p>First Name:<input type="text" name="first name"/>
<p>Last Name:<input type="text"name="last name"/>
<p>User ID:<input type="text" name="user ID"/>
<p>Phone Number:<input type="text" name="phone"/>
<p>Password:<input type="password" name="password"/>
<p>Description:</p>
<textarea rows="5" cols="50" name="Description"/>
Enter the description here.....
</textarea><br><br>
Choose your course:<br>
<input type="checkbox"value="on">O Level<br>
<input type="checkbox"value="on">A Level<br>
Select your Qualification:<br>
<input type="radio"value="on">12th<br>
<input type="radio"value="on">Graduation<br>
<input type="radio"value="on">Master graduation<br><br>
Choose your Gender:
<select name="dropdown">
<option value="Male" selected>Male</option>
<option value="Female">Female</option>
<option value="others">Others</option></select><br>
Choose your Country:
<select name="dropdown">
<option value="India">India</option>
<option value="China">China</option>
<option value="Pakistan">Pakistan</option>
<option value="Japan">Japan</option>
<option value="America">America</option>
</select><br><br>
<input type="Submit" name="Submit" Value="submit"/>
<input type="Reset" name="Reset" value="reset"/>
<input type="Button" name="OK" value="OK"/>
</form>
</body>
</html>

Output:-

MAKE A FORM
First Name:
Last Name:
User ID:
Phone Number:
Password:
Description
Enter the description here..............

Choose your course:


O Level
A Level
Select your Qualification:
12th
Graduation
Master graduation
Choose your Gender: Male ▼
Choose your Country: India ▼

Submit Reset OK

PROJECT 10.
<!DOCTYPE>
<html>
<head>
<title>Project 10 </title>
<style type=text/css>
.leftdiv
{
float: left;
background-color:blue;
}
.middlediv
{
float: left;
background-color:green;
}
.rightdiv
{
float: left;
background-color:black;
}
div{
padding : 1%;
color: white;
background-color:grey;
width:15%;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="leftdiv">
<h2> Left Side </h2>
<p>Div tag is used for group many
HTML tag like table, list, paragraph
in web page.Mostly div tag used for
a web page to partition or make a
section for content or HTML tags.
</p>
</div>
<div class="middlediv">
<h2> Middle Side </h2>
<p>Div tag is used for group many
HTML tag like table, list, paragraph
in web page.Mostly div tag used in empty
web page to partition or make section
for content or HTML tags.
</p>
</div>
<div class="rightdiv">
<h2> Right Side </h2>
<p>Div tag is used for group many
HTML tag like table, list, paragraph
in web page.Mostly div tag used for
a web page to partition or
make a section for content or HTML tags.
</p>
</div>
</body>
</html>

Output:-

Left Side Middle Side Right Side


Div tag is used for group Div tag is used for group Div tag is used for group
many HTML tag like many HTML tag like many HTML tag like
table, list, paragraph in table, list, paragraph in table, list, paragraph in
web page.Mostly div tag web page.Mostly div tag web page.Mostly div tag
used for a web page to used in empty web page used for a web page to
partition or make a to partition or make partition or make a
section for content or section for content or section for content or
HTML tags. HTML tags. HTML tags.
PROJECT 11.
Create Html tag using Pre tag.
<!DOCTYPE>
<html>
<head>
<title>Project 11 </title>
</head>
<h1 style="background-color:red"><b>This is a
Poem</b></h1>
<p><pre style="background-color:powderblue;color:#ff0000;
font-family:Algerian;font-size:20px;">
Close your eyes and you can see
the way the world's suppose to be
Sunrise on a clear blue sky
fields of daisies, soft butterflies

Tall trees, leaves glistening with dew


streams and rivers flowing thru
Birds singing and flying high
gentle breezes with cloudless skies

Snow caps on the mountain tops


valleys of green that never stop
Ocean waves and pure white sand
animals grazing on the land

Feel the wind in your hair


smell the flowers, blooms everywhere
See the beauty, today is new
Enjoy nature-God's gift to you
</pre>
</p>
</body>
</html>

Output:-
This is a Poem
Close your eyes and you can see
the way the world's suppose to be
Sunrise on a clear blue sky
fields of daisies, soft butterflies

Tall trees, leaves glistening with dew


streams and rivers flowing thru
Birds singing and flying high
gentle breezes with cloudless skies

Snow caps on the mountain tops


valleys of green that never stop
Ocean waves and pure white sand
animals grazing on the land
Feel the wind in your hair
smell the flowers, blooms everywhere
See the beauty, today is new
Enjoy nature-God's gift to you

PROJECT 12.
<!DOCTYPE>
<html>
<head>
<title>Project 12 </title>
<style type=text/css>
.leftdiv{
float: left;
background-color:red;
}
.middlediv{
float: left;
background-color:black;
}
.rightdiv
{
float: left;
background-color:purple;
}
div{
padding : 1%;
color:white;
background-color:grey;
width:10%;
border: 2px solid black;
}
table{
font-family:arial,sans-serif;
width:50%;
}
td,th{
border:2px solid#dddddd;
text-align:left;
padding:8px;
}
tr:nth-child(even){
background-color:lime;
}
</style>
</head>
<body>
<h1><font color="blue">This is a body of the web document 1
<hr></h1>
<h2><font color="lime">This is a body of the web document
2<hr></h2>
<h3><font color="green">This is a body of the web document
3<hr></h3>
<h4><font color="red">This is a body of the web document
4<hr></h4>
<h5><font color="black">This is a body of the web document
5<hr></h5>
<h6>This is a body of the web document 6<hr></h6>
<p>This is the content</p>
<br><i>This text is italic.</i>
<br><em>This is emphasized.</em>
<br><b>This text is Bold</b>
<br>This<sup>text is superscript</sup>
<br>H<sub>2</sub>O
<br><small>This is some smaller</small>
<br><Big>This is some bigger</Big>
<br><mark>This is a mark</mark>
<p>My favorite color is <del>blue</del> red.</p>
<p>The following word uses a<strike> Strikethrough</strike>
typeface.</p><br>
<a href="http://google.com" target="_blank">Google
Website</a>
<img src="Image.png" height="200" border="10"
align="center">
<p><pre style="background-color:powderblue;color:#ff0000;
font-family:Algerian;font-size:20px;">
Close your eyes and you can see
the way the world's suppose to be
Sunrise on a clear blue sky
fields of daisies, soft butterflies

Tall trees, leaves glistening with dew


streams and rivers flowing thru
Birds singing and flying high
gentle breezes with cloudless skies

Snow caps on the mountain tops


valleys of green that never stop
Ocean waves and pure white sand
animals grazing on the land

Feel the wind in your hair


smell the flowers, blooms everywhere
See the beauty, today is new
Enjoy nature-God's gift to you
</pre><br><br>
<h1>Example of TD Rowspan attribute</h1>
<table border="1">
<tr>
<th>Student</th>
<th>Fees Amount</h1>
<th>Course</th>
</tr>
<tr>
<td>Manish</td>
<td>5000</td>
<td rowspan="2">Java</td>
</tr>
<tr>
<td>Puneet</td>
<td>4000</td>
</tr>
</table><br>
<h2>An Unordered List</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<h2>An Ordered List</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol type="A" start="5">
<li>RAM</li>
<li>ROM</li>
<li>PROM</li>
</ol>
<form>
<h2>HTML Form</h2>
First Name:-
<input type="text" name="Fname"><br><br>
Last Name:-
<input type="text" name="Lname"><br><br>
Password:-
<input type="password" name="psw"><br><br>
User ID:-
<input type="text" name="user ID"/><br><br>
Select your Qualification:-<br>
<input type="radio"value="on">12th<br>
<input type="radio"value="on">Graduation<br>
<input type="radio"value="on">Master graduation<br><br>
Choose your Gender:-
<select name="dropdown">
<option value="Male" selected>Male</option>
<option value="Female">Female</option>
<option value="others">Others</option></select><br><br>
<input type="Submit" name="Submit" Value="submit"/>
<input type="Reset" name="Reset" value="reset"/>
<input type="Button" name="OK" value="OK"/>
</form>
<div class="leftdiv">
<h2> Left Side </h2>
<p>Div tag is used for group many
HTML tag like table, list, paragraph
in web page.Mostly div tag used for
a web page to partition or make a
section for content or HTML tags.
</p><br>
</div>
<div class="middlediv">
<h2> Middle Side </h2>
<p>Div tag is used for group many
HTML tag like table, list, paragraph
in web page.Mostly div tag used in empty
web page to partition or make section
for content or HTML tags.
</p>
</div>
<div class="rightdiv">
<h2> Right Side </h2>
<p>Div tag is used for group many
HTML tag like table, list, paragraph
in web page.Mostly div tag used for
a web page to partition or
make a section for content or HTML tags.
</p>
</div><br><br>
</body>
</html>
Output:-

This is a body of the web document 1

This is a body of the web document 2

This is a body of the web document 3

This is a body of the web document 4

This is a body of the web document 5

This is a body of the web document 6

This is the content


This text is italic.
This is emphasized.
This text is Bold
Thistext is superscript
H2O
This is some smaller
This is some bigger
This is a mark
My favorite color is blue red.
The following word uses a Strikethrough typeface.
Google Website

Close your eyes and you can see


the way the world's suppose to be
Sunrise on a clear blue sky
fields of daisies, soft butterflies

Tall trees, leaves glistening with dew


streams and rivers flowing thru
Birds singing and flying high
gentle breezes with cloudless skies

Snow caps on the mountain tops


valleys of green that never stop
Ocean waves and pure white sand
animals grazing on the land

Feel the wind in your hair


smell the flowers, everywhere
See the beauty, today is new
Enjoy nature-God's gift to you
Example of TD Rowspan attribute
Fees
Student Course
Amount

Manish 5000
Java
Puneet 4000

An Unordered List
• Coffee
• Tea
• Milk
An Ordered List
1. Coffee
2. Tea
3. Milk
E.RAM
F. ROM
G.PROM

HTML Form
First Name:-

Last Name:-

Password:-

User ID:-
Select your Qualification:-
12th
Graduation
Master graduation

Male
Choose your Gender:-

Submit Reset OK

Left Side Middle Side Right Side


Div tag is used for group Div tag is used for group Div tag is used for group
many HTML tag like many HTML tag like many HTML tag like
table, list, paragraph in table, list, paragraph in table, list, paragraph in
web page.Mostly div tag web page.Mostly div tag web page.Mostly div tag
used for a web page to used in empty web page used for a web page to
partition or make a to partition or make partition or make a
section for content or section for content or section for content or
HTML tags. HTML tags. HTML tags.

You might also like