2 O-Level-Project-Html-Programe

10MoARcPSD142725493
o Level Project HTML Programe

10MoARcPSD142725493
STUDENT'S NAME: DHARM CHANDRA

REGISTRATION NO: 1127697
ADMISSION MODE: DIRECT
Down1oaded by miya axe (miyaxe8027@crodity.com)

10MoARcPSD142725493
Performa of the Project Completion Certificat e
This is t o cert ify t hat t he Project work done at NIELIT, New Delhi, Tit led
" HTM L Language" BY M r./ M s. DHARM CHANDRA (NIELIT Registrat ion No.
_1127697 ) in part ial fulf illment of NIELIT 'O' Level Examinat ion has been
found sat isfact ory. This report has not been submit t ed for any ot her
examina- t ion and does not form part of any ot her course undergone by t he
candidat e
It is furt her cert ifies t hat he/ she has appeared in all t he four modules of
NIE- LIT 'O' Level Examinat ion.
Signat ure
Name:
(Inst it ut e PROV No./ FULL
No.) (or)
Head of t he Organizat ion/
Division: Name of t he Organizat
ion:
Address:
(or)
Name of t he Guide/ Supervisor : M r. Ashok Kumar
Qualif icat ion : PGDCA, M sc. (CA)
(Self at t est ed copy of t he qualificat ion of t he guide/ Supervisor t o be at t ached)

10MoARcPSD142725493
Hyper Text Markup Language (HTML)
1. Introduction
[1]
Hypertext Markup Language (HTML) is a markup language for creating a webpage.
WebPages 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
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:

10MoARcPSD142725493
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>

10MoARcPSD142725493
4.4. Body tag

Body tags identify the content of a web page.
<body>………………… <zbody>
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 namezvalue 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.

10MoARcPSD142725493
Required Software
Software :- Notepad , Notepad++, Editplus, bluefish, terminal.
OS:- windoswXP,7,8,lO, Linux, Mac OSX
PROJECT l.
Make simple web page using HTML .
<html>
<head>
<title>web page<Ztitle>
<Zhead>
<body> This is a web page.<Zbody>
<Zhtml>
(Note:- write the HTML code using Notepad software and save the file using .HTML ex-
tension.)
Output :-
This is a web page.

10MoARcPSD142725493
Project 2.
Make a web page using body attribute.
<html>
<head>
<Zhead>
<body text="red" bgcolor="yellow"> This is a web page.<Zbody>
<Zhtml>
Output :-
This is a web page.

10MoARcPSD142725493
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 3 r d Heading
This is 4t h Hea ding
Thi s i s 5t h Headi ng
Thi s i s 6t h Headi ng

10MoARcPSD142725493
Project :4
Paragraph tag <P> and line break tag <BR>
<html>
<head>
<Zhead>
<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.
<Zbody>
<Zhtml>
Output :-
HTM L st ands for hyper t ext markup language. It is supposed super set of
SGM L.
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.

10MoARcPSD142725493
Project : 5
List tag number tag<OL>
<html>
<head>
</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

10MoARcPSD142725493
project : 6
list tag using unnumbered tag <ul>
<html>
<head>
</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

10MoARcPSD142725493
Project :7
List tag using type and start attribute
<html>
<head>
</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

10MoARcPSD142725493
project : 8
preformatted text using <pre> tag.
<html>
<head>
<Zhead>
<body >
<pre>
<p> o level student's result sheet
<p> Name Modules Grede Result
Dharm chand Ml B pass
M2 c pass
M3 c pass
M4 B pass
<Zpre>
<Zbody>
<Zhtml>
output :-
o level student's result sheet
Name Modules Grede Result
Dharm chand Ml B pass
M2 c pass
M3 c pass
M4 B pass

10MoARcPSD142725493
Project : 9
Character formatting tag.
<html>
<head>
</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
superscript
this is
this is striketh ro ugh

10MoARcPSD142725493
Project :10
compact Attribute.
<html>
<head>
</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.

10MoARcPSD142725493
Project :11
Font Tag
<html>
<head>
<Zhead>
<body >
<font color="red" size="8" face=" times new roman">
National Institute of Electronics and Information Technology.
<Zbody>
<Zhtml>
Output :-
National Institute of Electronics

and Information Technology.

10MoARcPSD142725493
Project :12
Using a Background Image.
<html>
<head>
<Zhead>
<body backgrounded:vnielit.jpg>
<Zbody>
<Zhtml>
Output :-

10MoARcPSD142725493
Project :13
Text Alignment Attribute
<html>
<head>
<Zhead>
<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.
<Zbody>
<Zhtml>
Output :-
i am in the right
i am in the center.
i am in the left.

10MoARcPSD142725493
Project :14
Link using Anchor <A> tag.
<html>
<head>
</head>
<body>
<a href=http://student.nielit.gov.in/> studentnielit</a>
<p><a href=http://student.nielit.go v.in/> <img src=d:/nielit.jpg></a>
<p><a href="dharmchand40@gm ail.com">contact me</a>
</body>
</html>
Output :-
st udent nielit
contect me
10MoARcPSD142725493

10MoARcPSD142725493
Project :15
Change the height of Horizontal rule
<html>
<head>
<Zhead>
<body>
<p> this is a Normal Rule
<hr>
<p> this is a 100 pixel thick horizontal
<hr size="10">
<Zbody>
<Zhtml>
Output :-
this is a Normal Rule
this is a 100 pixel thick horizontal

10MoARcPSD142725493
Project :I6
Create table using <Table> Tag.
<html>
<head>
<title>web page<ltitle>
<lhead>
<body>
<table border="I">
<tr bgcolor="red"><td>Course<ltd><td>duration<ltd>
<ltr>
<tr bgcolor="green">
<td>O Level><ltd><td>Iyear<ltd>
<tr bgcolor="green"><td>A level<ltd><td>Iyear<ltd><ltr>
<lbody>
<lhtml>
Output :-
Course duration
O Level> Iyear
A level Iyear

10MoARcPSD142725493
Project: 17
Create a table using rowspan and colspan attribute.
<html>
<head>
</head>
<body>
<table border="1">
<tr bgcolor="red"><td rowspan="3"> <b>digital Course</b></td>
</tr>
<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>
<td>CCC</td><td>CCC+</td><TD>BCC</TD>
<tr bgcolor="green"><td>ECC</td><td>ACC</td></tr></table>
</body>
</html>

10MoARcPSD142725493
Output :-
digital Course CCC CCC+ BCC

ECC ACC
digital Course
CCC CCC+ BCC
ECC ACC
Project : 18
Marked text using <mark> tag
<html>
<head>
<Zhead>
<body>
This is <mark>marked tag<Zmark>
<Zbody>
<Zhtml>
Output :-
This is marked t ag

10MoARcPSD142725493
Project :-19
HTM L colors
<html>
<head>
<Zhead>
<body>
<font color="red">this is red color<Zfont>
<p>
<font color="green"> this is green color<Zfont>
<p><font color="maroom" >this is maroom color<Zfont>
<p><font color="lime"> this is lime color
<Zfont>
<Zbody>
<Zhtml>
Output :
this is red color this
is green color this is
maroom color this is
lime color

10MoARcPSD142725493
Project:-20
Marquee tag
<html>
<head>
<head>
<body>
<marquee><b>NIELIT</b></marquee>
</body>
</html>
Output :-
NIELIT
(Not e:-t he w ord," NIELIT" run right to left alignment)

10MoARcPSD142725493
Project :-21
Create form using <form> tag .
A. Input tag
<html>
<head>
<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:

10MoARcPSD142725493
Project :-22
Form tag with password control
<html>
<head>
<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:

10MoARcPSD142725493
Project :-23
Form create using multiple line text.
<html>
<head>
<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....

10MoARcPSD142725493
Project:24
Form tag using checkbox control and radio button control.
<html>
<head>
<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

10MoARcPSD142725493
Project :25
Form tag using select box control
<html>
<head>
<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 :-
Male
choose your gender:
India
choose youre country:

10MoARcPSD142725493
Project :- 26
Form tag using file upload button.
<html>
<head>
<head>
<body>
<form>
<input type="file" name="fileupload"accept="image/*"/>
</FORM></body>
</html>
Output :-
10MoARcPSD142725493

10MoARcPSD142725493
Project:-27
<html>
<head>
<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 :_
submit
reset

2 O-Level-Project-Html-Programe

Uploaded by

Copyright:

Available Formats

You might also like

2 O-Level-Project-Html-Programe

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

2 O-Level-Project-Html-Programe

Uploaded by

Copyright:

Available Formats

10MoARcPSD142725493

o Level Project HTML Programe

STUDENT'S NAME: DHARM CHANDRA

Down1oaded by miya axe (miyaxe8027@crodity.com)

Performa of the Project Completion Certificat e

(Inst it ut e PROV No./ FULL

Head of t he Organizat ion/

Division: Name of t he Organizat

Name of t he Guide/ Supervisor : M r. Ashok Kumar

Qualif icat ion : PGDCA, M sc. (CA)

(Self at t est ed copy of t he qualificat ion of t he guide/ Supervisor t o be at t ached)

Down1oaded by miya axe (miyaxe8027@crodity.com)

Hyper Text Markup Language (HTML)

Another version, XHTML, was a rewrite of HTML as an XML language. XML is a

Down1oaded by miya axe (miyaxe8027@crodity.com)

HTML 2.0 1995

HTML 3.2 1997

HTML 4.01 1999

4.1. HTML Tag

4.2. Head Tag

4.3. Title Tag

Down1oaded by miya axe (miyaxe8027@crodity.com)

4.4. Body tag

• All HTML elements can have attributes

5.1 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

5.4. The alt Attribute

5.5. The style Attribute

Down1oaded by miya axe (miyaxe8027@crodity.com)

Make simple web page using HTML .

<body> This is a web page.<Zbody>

This is a web page.

Down1oaded by miya axe (miyaxe8027@crodity.com)

Make a web page using body attribute.

<body text="red" bgcolor="yellow"> This is a web page.<Zbody>

This is a web page.

Down1oaded by miya axe (miyaxe8027@crodity.com)

Make a web page using heading tag.

<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>

This is 1st Heading

Down1oaded by miya axe (miyaxe8027@crodity.com)

Paragraph tag <P> and line break tag <BR>

Down1oaded by miya axe (miyaxe8027@crodity.com)

List tag number tag<OL>

O Level course divided in to four modules.

<ol><li>it tools and business

<li>internet and web designing

<li> introduction to ict

O Level course divided in to four modules.

1. it tools and business