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 metainformation to a webpage. Meta information is usually not shown by web browsers
and isdata
about
the web page, e.g., the name of the person who created the page. CascadingStyle Sheets
(CSS) is used to style HTML elements while JavaScript is used to manipulateHTML elements
and CSS styles
2. HTML History
The first version of HTML was written by Tim Berners-Lee in 1993. Since then, therehave been
many different versions of HTML. The most widely used version throughoutthe 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 astandard markup language that is used
to create other markup languages. Hundreds ofXML 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 acrossapplications. This makes XML potentially very powerful, and it's no surprise that
theW3C would create an XML version of HTML (again, called XHTML). XHTML becamean
official standard in 2000, and was updated in 2002. XHTML is very similar toHTML, but has
stricter rules. Strict rules are necessary for all XML languages, becausewithout it, interoperability
between applications would be impossible. You'll learn moreabout 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 isthe way
of the future. Therefore,
HTML5 is the primary language taught in thiscourse
3. HTML Versions
Since the early days of the web, there have been many versions of HTML:
AD
Download to read ad-free.
Version Year
HTML 1991HTML 2.0 1995HTML 3.2 1997HTML 4.01 1999XHTML 2000HTML5 2014
4. Tags
HTML tags are the hidden
keywords
within a web page that define how your web browsermust format and display the content.Most
tags must have two parts, an opening and a closing part. For example, <html> is theopening tag
and </html>is the closing tag. Note that the closing tag has the same text asthe opening tag, but
has an additional forward-slash ( / ) character. I tend to interpret thisas 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, scriptsand links
to follow, and other commands to browsers.
<head>
<title>HTML Tags - Head Tag</title>
</head>4.3. Title TagBrief description of the web page.<title> ………………..</title>
AD
Download to read ad-free.
4.4. Body tagBody 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 theimage:
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.
AD
Download to read ad-free.
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.
AD
Download to read ad-free.
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.
AD
Download to read ad-free.
Project :-3Make 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
AD
Download to read ad-free.
Project :4Paragraph 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 aswell. <br>When you get a lot of pages you can assemble into a directory and can
give it is a shapeof 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 ofwebsite.
AD
Download to read ad-free.
Project : 5List 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 business2.
internet and web designing3.
c language4.
introduction to ict
AD
Download to read ad-free.
project : 6list 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
AD
Download to read ad-free.
Project :7List 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 outlineI.
three level outline
AD
Download to read ad-free.
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
ResultDharm chand M1 B passM2 C passM3 C passM4 B pass</pre></body></html>Output :-
O level student's result sheetName Modules Grede ResultDharmchand M1 B passM2 C
passM3 C passM4 B pass
AD
Download to read ad-free.
Project : 9Character 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 underlinethis is
subscript
this is
superscript
this is strikethrough
AD
Download to read ad-free.
Project :10compact 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:-/pdisplay the directories and files
page-wise./wdisplay the directories and files width-wise.
AD
Download to read ad-free.
Project :11Font 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 Electronicsand Information Technology.
AD
Download to read ad-free.
Project :12Using a Background Image.<html><head><title>web page</title></head><body
background=d:\nielit.jpg></body></html>Output :-
AD
Download to read ad-free.
Project :13Text 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 righti am in the center.i am in the left.
AD
Download to read ad-free.
Project :14Link 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
