Sei sulla pagina 1di 32

STUDENT’S NAME: DHARM CHANDRA

REGISTRATION NO: 1127697


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 Mr./Ms. DHARM CHANDRA (NIELIT Registration No.
_1127697) 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.

Signature

Name:

(Institute PROV No./FULL No.)

(or)

Head of the Organization/Division:

Name of the Organization:

Address:

(or)

Name of the Guide/Supervisor: Mr. Ashok Kumar

Qualification : PGDCA, Msc. (CA)

(Self attested copy of the qualification of the guide/Supervisor to be attached)


Hyper Text Markup Language (HTML)

1. Introduction
Hypertext Markup Language (HTML) is a markup language[1] 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:
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:\nielit.jpg>

</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=http://student.nielit.gov.in/> studentnielit</a>

<p><a href=http://student.nielit.gov.in/> <img src=d:/nielit.jpg></a>

<p><a href="dharmchand40@gmail.com">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 :-

Male
choose your gender:

India
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 :_

submit

reset

Potrebbero piacerti anche