,
,Unit 2 Introduction To HTML: Structure
Unit 2 Introduction To HTML: Structure
Unit 2 Introduction To HTML: Structure
Structure
2.0 Introduction
2.1 Objectives
2.2 What is HTML?
2.3 Basic Tags of HTML
2.3.1 HTML Tag
2.3.2 TITLE Tag
2.3.3 BODY Tag
2.4 Formatting of Text
2.4.1 Headers
2.4.2 Formatting Tags
2.4.3 PRE Tag
2.4.4 FONT Tag
2.4.5 Special Characters
2.5 Working with Images
2.6 META Tag
2.7 Summary
2.8 Solutions1 Answers
2.0 INTRODUCTION
You would by now have been introduced to the Internet and the World Wide Web
(often just called the Web) and how it has changed our lives. Today we have access to
a wide variety of information through Web sites on the Internet. We can access a Web
site if we have a connection to the Internet and a browser on our computer. Popular
browsers are Microsoft Internet Explorer, Netscape Navigator and Opera. When you
connect to a Web site, your browser is presented with a file in a special format by the
Web server on the remote computer. The contents of the file are stored in a special
format using Hyper Text Markup Language, often called HTML This format is
rendered, or interpreted, by the browser and you then see the page of the web site
from your computer.
HTML is one language in a class of markup languages, the most general form of
which is Standard Generalized Markup Language, or SGML. Since SGML is
complex, HTML was invented as a simple way of creating web pages that could be
easily accessed by browsers. HTML is a special case of SGML.
HTML consists of tags and data. The tags serve to define what kind of data follows
them, thereby enabling the browser to render the data in the appropriate form for the
user to see. There are many tags in HTML, of which the few most important ones are
introduced in this unit. HTML files usually have the extension ".htmWor ".htmln.
If you want to create Web pages, you need a tool to write the HTML code for the
page. This can be a simple text editor if you are hand-coding HTML. You also have
sophisticated HTML editors available that automate many (though not all) of the
tasks of coding HTML. You also need a browser to be able to render your code so
that you can see the results.
2.1 OBJECTIVES
After going through this unit you should be able to learn:
basic concepts of HTML;
basic tags of HTML;
30
how to control text attributes such as the font; Introduction to
HTML
how to work with images in HTML; and
significance of Meta Tag
The unit covers only the simpler concepts of HTML and does not by any means deal
with the subject comprehensively.
HTML allows Web page publishers to create complex pages of text and images that
can be viewed by anyone on the Web, regardless of what kind of computer or browser
is being used. Despite what you might have heard, you don't need any special
sofhvare to create an HTML page; all you need is a word processor (such as
Microsoft Word) and a working knowledge of HTML. Fortunately, the basics of
HTML are easy to master. However, you can greatly relieve tedium and improve
your productivity by using a good tool. A simple tool is Microsoft Frontpage that
reduces the need to remember and type in HTML tags. Still, there can always be
situations where you are forced to handcode certain parts of the web page.
HTML is just a series of tags that are integrated into a document that can have text,
images or multimedia content. HTML tags are usually English words (such as
blockquote) or abbreviations (such as p for paragraph), but they are distinguished
from the regular text because they are placed in small angle brackets. So the
paragraph'tag is <p>, and the blockquote tag is <blockquote>. Some tags dictate how
the page will be formatted (for instance, <p> begins a new paragraph), and others
dictate how the words appear (<b> makes text bold). Still others provide information
- such as the title - that doesn't appear on the page itself. The first thing to remember
about tags is that they travel in pairs. Most of the time that you use a tag - say
<blockquote> -you must also close it with another tag - in this case, (/blockquote>.
Note the slash - / - before the word "blockquote"; that is what distinguishes a closing
tag from an opening tag.
The basic HTML page begins with the tag <html> and ends with </html>. In
between, the file has two sections - the header and the body.
The header - enclosed by the <head> and </head> tags - contains information about a
page that will not appear on the page itself, such as the title. The body - enclosed by
<body> and (/body> - is where the action is. Everything that appears on the page is
contained within these tags.
31
Scripting Languages Static Pages
Static pages, as the name indicates, comprise static content (text or images). So you
can only see the contents of a web page without being able to have any interaction
with it.
Dynamic Pages
Dynamic pages are those where the content of the web page depend on user input. So
. interaction with the user is required in order to display the web page. For example,
consider a web page which requires a number to be entered from the user in order to
find out if it is even or odd. When the user enters the number and clicks on the
appropriate button, the number is sent to the web server, which in turn returns the
result to the user in an HTML page.
Consider the example shown in Fig. 2.1. Type the code specified in the figure in a
text editor such as notepad and save it as "figl .htmlV.To render the file and see your
page you can choose one of two ways: 1) Find the icon of the html file you just made
(figl .htm) and double click on it. Or- 2) In Internet Explorer, click on Filelopen File
and point to the file (figl.htm).
CHTML,
<!- - This is a comment - > -
<HEAD>
(TITLE> IGNOU 4llTLE>
</HEAD>
<BODY>
This is my first web page.
4J3ODY>
Every HTML, document is segregated into a EIEAD and BODY. The information
about the document is kept within <HEAD> tag. The BODY contains the page
content.
The bulk of the page will be within the BODY tag, as shown in Figure.2.1.
Here the document has been given the title IGNOU. It is a good practice to give a title
to the document created.
What you have made here is a skeleton HTML document. This is the minimum
required information for a web document and all web documents should contain these
basic components. Secondly, the document title is what appears at the very top of the
browser window.
Whenever you make a change to your document, just save it and hit the
ReloadIRefresh button on your browser. In some instances just hitting the
ReloadIRefresh button doesn't quite work. In that case hit Reload/Refresh while
holding down the SHIFT key.
d. ALINK: It indicates the colour of the active hyperlink. An active link is the one
on which the mouse button is pressed.
e. VLINK: It indicates the colour of the hyperlinks after the mouse is clicked on it.
f. TEXT: It is used for speci&ing the colour of the text displayed on the page.
<TITLE> IGNOU</TITLE>
Scripting Languages <BODY BGCOLOUR="#1234567" TEXT = "#FFOOOOn>
Welcome to IGNOU
</BODY>
</HTML>
The values specified for BGCOLOUR and TEXT tags indicate the colour of the
a
background of the page and that of the text respectively. These are specified in
hexadecimal format. The range of allowable values in this format is from "#000000"
'to ''#FFFFFF9. Theu#" symbol has to precede the value of the colour so as to indicate
to the browser that has to be interpreted as a hexadecimal value. In this six digit
value, the first two digits specify the concentration of the colour red, the next two
digits specify the concentration of the colour green and the last two digits specify the
concentration of the colour blue. So the value is'a combination of the primary colours
red, green and blue and that is why it is called RGB colour. If we specify the value
"ffFFOOOO", the colour appears to be red.'"#000000" gives black and "#FFFFFFWgives
the colour white. You also have the option of specifying the colour by giving its
name, like:
. <BODY TEXT = "WHITEy5.
You can also specify a background image instead. (Note that the image should be in
the same folder as your HTML file. More on this below).
<HTML>
'>
<BODY BACKGROUND="swirlies.gif
Welcome to INDIA
</BODY >
</HTML>
<TITLE> IGNOU</TITLE>
Header Level 2
Head- Levd 3
H e ~ d sL
r svsl4
%
&r -
1 5
There is no predefined sequence for using the different levels of the header tags nor
any restrictions on which one can be used. So the user has the option of using any
level of header tag anywhere in the document. If you want to center text on a page,
use the CENTER tag. The text written between <CENTER> and 4CENTER> tag
gets aligned in the center of the HTML page. As seen in Figure 2.4, the maximum
size of the text is displayed using the <HI> tag. So the size goes in decreasing order
with the increasing order of the level (i.e. From <HI> to <H6>).
(TITLE> I G N O U a T L E >
-
u so-.dor.d . on. of tho pr-u
to b -wu..~-#
Qaa.d~m.be-
=or- r- IONOW, MCA I . on- DTIU br.t p r o m - - . off-^.^ c o n - - n l - n r &-r o &- . a d m e .o t o -dju.t it
b ~ e pn- d d e d
don - m u l e
* -.*
F o r s o n r r d m c r . 4 courrr. o f f - r - d b y IONOU c-n b- . r r m on I t - -.-b-it-. A r a d m t h
n-dbw D T . - - ~ d l 6- Molrnrdon rr=-dlna r&d..ion +o &a n o m e .-r.t-r.
II. r r b . l r a .
-. d r o
a. BOLD: The text can be displayed in boldface by writing it in between the <B>
and </B> tags.
b. ITALICS: It starts with <I> and ends with (/I>tag. It is used to display the text in
italics.
c. UNDERLINE: It is used for underlining the text to be displayed. The <U> tag is
- used for this purpose. These tags can be nested. So in order to see the text in
boldface, in italics and underlined, it should be placed between the <B><I><U>
and </U></I></B> tags. Note that the closing tags are written in reverse order,
because any tag used within some other tag should be closed first.
36
d. PARAGRAPH: If you want to display the text in the form of paragraphs, then the Intrc~ductionto
<P> tag should be used.
e. TT: The <TT> tag is used for displaying text in a fixed width font similar to that
f. STRIKE: If you want the text to be marked with a strikethrough character, place
it within the <S> and <IS> tags.
g. STRONG: There are certain text-based browsers that do not render the text as
boldfaced. So you can use the <STRONG> tag instead of the <B> tag. This
displays the text to stand out in the most appropriate manner for the browser.
h. EM: Just as the <STRONG> tag corresponds to the <B> tag, the <EM> can be
used instead of the <I> tag. The reason for using it is the same as for the
<STRONG> tag. The <EM> tag is used for emphasizing the text in the manner
most appropriate to the browser.
i. BR: This tag is used for inserting a line break. The text written after the <BR> tag
is displayed from the beginning of the next line onwards. This tag does not need a
corresponding terminating tag.
j. HR: This tag puts a horizontal line on the page. It has the following attributes:
ALIGN: It is used for aligning the line on the page. The possible values of
this attribute are LEFT, RIGHT, and CENTER. It is useful when the width of
the line is less than the width of the page.
NOSHADE: This attribute is used to prevent any shading effect.
SIZE: It is used for specifying the thickness of the line.
WIDTH: You can set the width of a line using this attribute. The value can be
specified either in pixels or as a percentage of the width of the page, e.g.,
<HR WIDTH = "30%">.
k. BLOCKQUOTE: This tag indents the left margin of the text. It is used for
displaying the text as quoted text as shown in Figure 2.5.
I. ADDRESS: This tag, as shown in Figure 2.5, displays the text in italics.
m. CITE: The text placed in between the <CITE> and </CITE> tags is rendered in
italics by the browser.
This tag is used to present the text exactly as written in the code, including
whitespace characters. It is terminated by a </PRE> tag. Consider the example shown
in Figure 2.6 to understand how this tag works.
<TITLE>IGNOU</TITLE>
IGNOU also offers a virtual campus. Studying through the virtual campus is a new
concept in the field of education and this is the first such experiment in India.
Scripting Languages
@ Satellite based interactive tele-conferencing sessions.
Viewing recorded video sessions.
Computer based tutorials on CD-ROM.
As shown in Figure 2.6, the format of the text presented in the browser remzins the
same as written in the code.
If we do not use the <PRE> tag, the browser condenses the white space when
presenting the text on the web page.
<HTML>
<HEAD>
</HEAD>
<BODY BGCOLOUR="#FFFFFF">
<CENTER>
4CENTER>
</BODY>
</HTML>
Jntl-oduction to
HTML
welcome toINDIA
welcome to I N DI A
welcome to I NDIA
Let us look at the syntax of the <FONT> tag with its different attributes.
<FONT FACE = "name" SIZE = n colour = #RGB >
c. COLOUR: With this attribute you can change the desired font colour. The values
can be specified either by using the hexadecimal format as already described, i.e.,
#RGB, c)r by the name of the colour. The hex code of the colour has been
explained earlier in this unit. As shown in Figure 2.7, the value of the colour
attribute in the third line has been specified as "Blue". So the text present in the
code between the <FONT> and </FONT> tags appears in blue. By default the
colour of the text is black. If we specie the text colour in the <FONT> tag then
this value overrides the colour value, if any, specified in the <BODY> tag.
<BODY BGCOLOUR="#FFFFFF'5
This is
Used for blank space.
Scripting Languages
+4
-
-nus
c I,
Is ~
> is the Greater Than symbol <BR>
& is the ampersand symbol <BR>
" is the quotation mark symbol <BR>
à is small a, grave accent symbol <BR>
À is capital a, grave accent symbol <BR>
ñ is small n, tilde symbol <BR>
Ñ is capital n, tilde symbol <BR>
ü is the umlaut small u symbol <BR>
Ü is the umlaut <BR>
 is the symbol Delta<BR>
&# 188; is the quarter symbol <BR>
&#I 89;is the hay symbol <BR>
</BODY>
</HTML>
I.
L r r * lh-
& 1s nmpcr.-d
r ~
U.ed for
m
symbol
. - t .,-~
.-be1
" 1. quormflen rnlrk .ymbOl
Is S I I. pram
~
0 1. D c h 'ymL.01
Y- u purncr symbol
1s hdf'symbol
Special Character
bol ~
a C E o N symbol
.
A 1. capad ''rave .ccent 'ymb0l
n .1 rmrll n, hlds .ymbOl
I?
*
zs clp.trl n. hlda symbol
I. d l " t Md u -bol
U .I d l " t . d u .ymbol
bl& .p.sc
The special characters shown in Figure 2.8 are some of the most frequently used
characters displayed on web pages. Each of the special characters can be displayed by
using its character sequence after the "&". These can be seen in the following Table
Character Symbol
"
Less-than symbol
Greater-than symbol
Quotation Mark
umlaut capital U
One Fourth
If you want more spaces, you must use tlie space character ( ). If you hit Return
(or Enter) while you are typing, the browser will interpret that as a space unless there
is already a space there.
Consider another example, which shows how to display multiple blank lines. Code a
space character with a line break for each blank line you want.
<TITLE>IGNOUdTITLE>
<BODY RGCOLOUR="#FFFFFF">
Welcome to <BR>
You specify an image with tlie <IMG> (image) tag. Earlier in this unit, displaying the
images on a page was explained using the BACKGROUND attribute of the <BODY>
tag, which displays the image as the background image. Background images make the
page heavy and hence the page takes a considerable amount of time to load. But the
<1MG>tag can be used for displaying an image with the desired height and width. Let
us look at an cxa~nple(Figure 2.9).
Scripting Languages <BODY BGCOLOUK="#FFFFFFM>
<IMG SRC="image.gif' WIDTH=130 HEIGHT=lO 1 ALT = "IMAGE IS
TURNED OFF" ALIGN = "BOTTOM" BORDER = 2> This text is placed at the
nliddle of the image.
</BODY>
</HTML>
b. WIDTI-I: This is used for specifying the desired width of the image.
c. HEIGHT: This is used for specifying the desired height of the image.
<BODY BGCOLOUR="#FFFFFFW>
<IMG SRC="image.gifl WIDTH=130 HEIGHT=10 1 BORDER=I O>
</BODY>
e. ALT: Another IMG attribute that is important is ALT. ALT is sort of a substitute
for the image that is displayed or used when the user is using a browser that does
riot display images. Someone may be using a text only browser, he may have
image loading turned off for speed or he may be using a voice browser (a browser
where the web page is read out). In those cases, that ALT attribute could be very
important to your visitor as it could be used (given the proper text) to describe the
image that is not on the screen.
Check Your Progress 3
Create yoitr own1 background with a paint program using the following steps:
Save the simple htrnl file that you have just created and open it with your web
browser. What do you see? When you are finished, return to this page and
2.6 METATAG
You might be aware of, and perhaps may have used, search engines such as Google to
look for web pages on a topic of interest. The META Tag comes in useful if you want
your web page to be easily locatable by search engines. When you enter a search
string, the search engine shows web pages containing that string, provided the web
page has used those in META tag appropriately. The search engine interacts with the
META tag of the HTML page in order to find the required string. Information inside
a Meta element should be such as to describe the document. Consider the following
example (Figure 2.10).
qITLE>IGNOU<ITITLE>
<META NAME="authorMCONTENT="IGNOU">
<META NAME="description " CONTENT="This website shows you the
different courses offered by
The meta attributes of this document identify the author and courses offered.
~dcnhfj=
the author and courses offered
The CONTENT attribute provides the list of words in the form of a sentence to the
search engine. So if someone searches for oneof the keywords listed by you in the
META tag, then your web site would also appear in the result of the search. It is
usefit1 to include h4ETA tags that include as many keywords as possible. This makes
the web page more likely to show up in a search.
You can also specify keywords by separating them by commas as shown in the
following code fragment of Figure 2.10.
Consider another example shown in Figure 2.1 1. This example demonstrates how to
redirect a user if your site address has changed.
<HTML>
<HEAD>
<TITLE>IGNOUaITLE>
<META HTTP-EQUIV="Refresh"
CONTENT="5;URL.;http://www.ignou.ac.in">
</HEADS
<BODY>
<P>
Sorry! We have moved! The new URL is: www.ignou.ac.in
. .
<P>
You will be redirected tothe new address in five seconds.
4p>
</BODY>
</HTML>
Now let us consider an example that makes use of almost all the tags explained so far.
Case Study: Design a single page web site for a store listing the products and
services offered. The store sells computers and related products. The site should
contain images explaining the products graphically.
<P ALIGN="CENTER"> </P>
<B><I><U><FONT SIZE=S><P ALIGN="CENTER">ABC Products</P> </FONT>
<IB><IO><II><P>ABC store sells the latest in computers and computer products.
Besides, we also stock stationery.</P>
<P ALIGN="CENTER><HR></P>
<B><U><P>Product 1.</P>
</U><IB><P><JMG SRC="Image l .giff WIDTH= 127 HEIGHT= 102></P>
<P>This is a notebook. It has 200 pages. Each page has three columns with a heading
for date, name and address. Its cost is Rs. 100 only.</P>
<P ALIGN="CENTER"><HR></P>
<B><U><P>Product 2.</P>
<N><IB><P><IMG SRC="Image2.giff WIDTH=127 HEIGHT=102></P>
<P>This is a computer. It has 5 12 MB RAM with a 2.3 GHz processor and an 80 GB
HDD. Its cost is Rs. 30,000 only. It is pre-loaded with Windows 2003. You can buy
Microsoft Office software too h m us.</P></BODY>
2.7 SUMMARY
In this unit we have learnt how to create simple HTML pages. The contents of the
page have to be written within the BODY tag. The HEAD tag includes the title of the
document. An important part of displaying a page is the proper formatting of the text.
There exist many tags to do this job. The headers of the sections and sub-sections of
the document can be displayed using the header tags (<HI> to <H6>). The <P> tag is
used to demarcate a paragraph. The <B>, <I> and <U> tags are used to mark the text
as bold,. italics and underlined respectively. The <STRONG> and <EM> tags are used
to emphasize the text in bold and italics. The <BLOCKQUOTE> tag indents the left
mbrgin of the text. The <ADDRESS> tag displays the text in italics. Any text placed
between the <CITE> and </CITE> tags, is rendered in italics bythe browser. You can
display the text exactly as written in the code using the <PRE> tag. The size, colour
Scripting Languages
display the text exactly as written in the code using the <PRE> tag. The size, colour
and the type of the font can be specified using the <FONT> tag. The <IMG> tag is
used for inserting images in the document. We have also looked at the very useful
<META> tag. This tag is used to redirect the users to other pages, and to provide
information about the page.
References: INTERNET & WORLD WIDE WEB BY DEITEL, DEITEL & NIETO
HANDS ON HTML BY GREG ROBERTSON
<FONT FACE="Arial,sans-serift>67.00%</FONT>
<FONT FACE="Arial,sans-serif'>
Father'sName:Mr: Shyam mehta
Date ofBirth:23 Jan, 1976.</FONT>
<FONT FACE="Arial,sans-serift>
Address:A2-8Ib,East Of kailash,NewDelhi.
Tel:29090909,922010101O</FONT>
<FONT FACE="Arial,sans-serift>,
Email:ram@hotmail.com
Marital Status:Single
Interests and activities: Troubleshooting hardware and software problems.
<BODY LINK="#ffffOOM
VLlNK="#ffM99"BGCOLOUR="#ffffff'>
<U><B><FONTFACE="TimesNew Roman,serif'>Job:Software Engineer
</FONT></B><N>
<FONT FACE="TimesNew Roman,serif'>
Scripting ~ a n i u a ~ e s
The requirementfor the job is that the person should be B.E./M.E/M.C.A having
an aggregate score of 70% or above. Thejob is project based, so it would be for
% year only initially.'/4 ofthe salary would be deducted towards income tax,PF
and other statutory deductions.
</PRE>
<B><FONT SIZE=4><FONTFACE="Arial,sans-
serif' > R ~ ~ < / F O N P < / F O N P < / B > < / P >
<B><U><FONTSIZE=3><FONTFACE="Arial,
sans-serif'>Qualification</FONT></FONT><~>
<FONT FACE="Arial,sans-serif'><B>Title</B></FONT>
&n bsp;
&n bsp;&n bsp;
<FONT FACE="Arial,sans-serif'><B>Authority</B></FONT>
<FONT FACE="Arial,sans-serif'><B>Division
%</B></FONT>
<FONT FACE="Arial,sans-serif'><B>Year</B></FONT>
<BR>
<FONT FACE="Arial,sans-serif'> l O</FONT>
 
<FONT FACE="Arial,sans-serif'>CBSEBoard</FONT>
<FONT FACE="Arial,sans-serif'>60.00%4FONT>
&~~b~~~.
<FONT FACE="Arial,sans-serif'>l994</FONT>
<BR><FONT FACE="Arial,sans-serif'>12 </FONT>
&~bsp; &~~bsp;
 
<FONT FACE="Arial,sans-serif'>CBSEBoard</FONT>
&~~bsp;
&n bsp;
<FONT FACE="A~~~I,
sans-serif'>67.00%</FONP
Introduction to
 :
<FONT FACE="Arial,sans-serif'>1996</FONT>
 :
<BR><FONTFACE="Arial,sans-serif'>B.E.</FONT>
 :     &
nbsp;  : 
<FONT FACE="Arial,sans-serifl>Delhi
University</FONT>
    &
nbsp;  
<FONT FACE="Courier.monospace">I<JFONT><FONTFACE="Arial,sans-
Division</FONT>
 :     &
nbsp;     &n
bsp;  
<FONT FACE="Arial,sans-serif1>
1999</FONT>
<BR><RR><B><U><FOIVTSIZE=3><FONTFACE=l1Arial,
sans-
serif'>Personal
Details</FONT></FONT></U></B>
<FONT FACE="Arial,sans-serif1>
Email:ram@hotmail.com
<TITLE>IGNOU</TITLE>
<BODY BGCOLOUR="#FFFFFF">
<IMG SRC="abc.jpgM WIDTH=]30 HEIGHT=l01 ALT = " IMAGE IS
TURNED OFF"ALIGN = "MIDDLE"BORDER = 2> This text is placed at the
middle 'ofthe image.
Scripting Languages
Check Your Progress 4
<P ALIGN="CENTER"> </P>
<B><I><U><FONT SIZE=4><P ALIGN="CENTER">IGNOU</P>
</I></U>~/FONT><FONTSlZE=2><P>IdB>ndira <B>G</B>andhi
<B>N</B>ational <B>O</B>pen University is a very old and reputed
University. IGNOU offers various types of courses that are both academic and
technical. </P>
<P> </P>