Scribd
Upload
103 views

Radhe

Uploaded by

kumarayush221104
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
103 views

Radhe

Uploaded by

kumarayush221104
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 17

SESSION 2023-2024

PROJECT ON – HTML LANGUAGE


Performa of the Project Comple on Cer ficate
This is to cer fy that the Project work done at NIELIT, New Delhi, Titled
“HTML Language” BY Mr. Radhe Mohan (NIELIT Registra on No.
1568222) in par al fulfilment of NIELIT ‘O’ Level Examina on has been
found sa sfactory. This report has not been submi ed for any other examina on
and does not form part of any other course undergone by the candidate.

It is further cer fying that he has appeared in all the four modules of NIELIT
‘O’ Level Examina on.

Signature
Name:

(Ins tute PROV No./FULL No.)


(or)
Head of the Organiza on/Division:
Name of the Organiza on: Global Ins tute of IT And Management
Address: Dwarikapuri, Opp. Dis Hospital Mainpuri Pin. 205001
(or)
Name of the Guide/Supervisor: Mr. Vimlesh Mohan Agnihotri (Director)
Qualifica on: (M.Sc. Computer Applica on)
(Self-a ested copy of the qualifica on of the guide/Supervisor to be a ached)
Hyper Text Markup Language (HTML)
1. Introduction
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 contents the
web browser can display them correctly. HTML can also be used to add metainformation 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, Music ML, 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 theW3C 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. However,
in recent years, the W3C (in collaboration with another organization,
the WHATWG), has been working on a brand-new version of HTML, HTML5. Currently
(2011), HTML5 is still a draft specification, and is not yet an official standard. However, 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:
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.

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

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
extension.)

 Output:-1
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:-2
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:-3
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 hypertext 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:-4
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:-5
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:-6
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:-7
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><b><u> “O” level student's result sheet
<p> Name Modules Grade Result
Radhe Mohan M1 A Pass
M2 B Pass
M3 C Pass
M4 D Pass
</pre>
</body>
</html>
 Output:-8
“O” level student's result sheet
Name Modules Grade Result
Radhe Mohan M1 A Pass
M2 B Pass
M3 C Pass
M4 D 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:-9
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:-10
/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:-11
 PROJECT -12
#Using a Background Image.
<html>
<head>
<title>web page</title>
</head>
<body background=d:\nielit.jpg>
</body>
</html>
 Output:-11

 PROJECT -13
<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:-11

 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="[email protected]">contact me</a>
</body>
</html>
 Output:-14

studentnielit

contact 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:-15
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:-16
Create table using Tag.

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

digital
Course CCC CCC+ BCC
ECC ACC
digital Course
CCC CCC+ BCC
ECC ACC
 PROJECT -18
#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:-18

 PROJECT -19
#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:-19
 PROJECT -20

#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....
</TEXT AREA>
</FORM></body>
</html>
 Output:-20

 PROJECT -21
#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:-21
 PROJECT -22
#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:-22

 PROJECT -23
#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:-23
 PROJECT -24
<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:-

You might also like