34

PUBLISHING ON THE WEB: AN INTRODUCTION

34.1 INTRODUCTION
In the previous lesson we had discussed about the concept of World Wide Web (WWW). Web
page design is exciting and can provide an interesting challenge for any body. In this lesson we
will introduce you to the concept of web page designing. You will come to know that with its
rapid growth, Internet or web has given access to more and more users. However each and every
user accesses or uses the web in a different way than the other. As per statistics, more women
and children are using the web and in different ways than the male users. The development of
web page is for a specific audience. Hence, it is essential for a web designer to know who the
audience are. For example if you teach high school mathematics, your primary audience is your
class and secondary audience are other students, colleagues, parents, and your local community.
With Internet and web pages both the organisation and the individual involved will gain mileage.
For an organisation, this would provide i) a low cost information distribution system, ii) make
database available for others to use, and maintain the security, iii) collect information provided
by others on Internet to expand and improve service to a target audience, and iv) provide low-
cost training. On the other hand for an individual it would mean i) get acquainted with new
technology, ii) learn new skills, iii) receive low cost training and other information, and iv) get
connected with other web creators with ease.
34.2 OBJECTIVES
After going through this lesson you should be in a position to
λ explain the concepts of the Internet and web publishing
λ access Internet
λ design web pages
λ work with HTML
34.3 WEB PUBLISHING
When you browse the Internet you will come across quite often the word home page. Home page
is the entry or starting point of a website. It is more or less in the format of the contents of a book
or magazine. In other words it is the welcome page of the website you are visiting, which in most
cases gives an overview of what the website contains. One should not be surprised to see only
one page in a website. Website can have one or more than one page, or a few long ones,
depending on it’s design. But normally the website contains more than one page. Web pages vary
in their look and content, but most of them follow a traditional book or magazine format. At the
top of the page resides the master head or heading or banner graphic giving the main theme of
the page. Then there is a list of items, such as subjects, with a brief description. The items listed
are either hot or cold. When we say they are hot, it means they are linked to other pages within
the same website or to other websites. These links are highlighted words in the body of the text,
or in a list, or they can even be the images that link to other content. But how you will know the
text is hot or cold. Usually the hot text appears in different colour from the rest of the text –
usually in blue and underlined. When one moves the cursor over this text or graphics link, it will
change from an arrow to a hand shape. And when you click on the hot text or image, you will be
taken to the linked web page or website. Once you come back to a page with a link you have
already visited, the hot text or hypertext words will appear in a different colour other than blue,
so you know you have already visited there. But that does not prevent you from visiting the link
again and again, you can certainly go there as many times, as you like. As the information and
links are not static, don’t feel surprised if the page looks different and the information has
changed, when you visit a site, next time. The Internet is a dynamic medium of communication
for displaying information. To encourage visitors to return to a site, it is very much required to
change the look and feel of the web pages from time to time.
(a) Planning Cycle
Web planning involves a structured approach involving conceptualization of design and
organizing the web developer and information resources required making the designing a reality.
If the design is for a large and complex site, it is always advisable to note down all the planning,
preferably in a notebook. This note book can be used as a guide to deliver all the raw material
needed for web designing such as: HTML, Java scripts, graphics, text, animation and icons, etc.
You should also get ready with the policies and guidelines to be followed for developmental
activities to give the web sites a professional touch.
This requires careful planning. Create the sketch of the site, before the actual development work
takes place. This will help to reduce the re-work while development is on. Basically this will act
as a site roadmap to be followed by the web designer to create the actual web sites. The most
critical part a web page is its content. While working on content for a web page, it is necessary to
take the target audience into consideration. Collect all the materials such as brochure, contact
information, review, lessons, teaching material, quiz, FAQ’s, photographs etc. It is not necessary
to use all of them in one go, but they will be handy when something needs to be changed.
Once the conceptualization, collection of materials and creation of roadmap of the site is ready, it
is time to decide how you are going to publish your site or how the web users will come to know
about your site. Take the help of promotional Internet sites, professional organizations etc.
(b) Design Cycle
Now let us look how user designs the web page from an information design perspective pointed
view and not from a graphics design. Web page contents should not have more graphic page. In
fact, the basic idea about a web page is information sharing enhanced by other elements such as
graphics, animation, etc.
(c) Design Basics
Following are some basic steps to be followed while creating web pages.
λ Create a Welcom/Index/first page of your web site.
λ Avoid use of heavy graphics in the first page from the user’s point of view.
λ Page should be descriptive and interactive both as per requirements.
Some minimum technical requirements might include:
λ Fast loading of pages
λ Presentation with clarity and readability - with or without graphics
λ Validation of the contents
λ Easy and clear navigation
λ Instruction on how to use the site.
Identify and address all potential problems such as:
λ Slow connections
λ Physical constraints of the user such as sight or hearing impaired visitors
λ Platform support
λ Browser support etc.
34.4 HTML (HYPERTEXT MARKUP LANGUAGE)
So far we have discussed the points you should be careful about while designing a web page. But
what language we should use for creating web pages? HTML or Hyper Text Markup Language
is used for creating web pages. Although HTML stands for HyperText Markup Language, it is
not a programming language like Java. The basic function of the HTML is to describe the
standard (—) how a browser should display text and multimedia elements such as graphics,
animation, etc. It works on a limited number of tags and is not difficult to learn and use. Let us
learn how it works.
How HTML works
λ The HTML is platform independent that is computer and computer operating system on
which it is running. It means that HTML uses a small number of tags to create Web page.
Any Web server regardless of their location and operating system can publish these web
pages. These web pages can also be viewed or displayed by any Web browser regardless of
the platform on which it is running.
λ As we have discussed, HTML works on tags. These HTML tags control the page structure
and the style sheet controls the details about page layout and their presentation. In other
words, HTML style sheet provides consistency and creativity to create professional quality
web pages.
λ The basic structure of using tag is <tag_name> some text </tag_name>. For example, the
tag for making text bold is <b> this is bold </b>. And when displayed in a browser it will
be displayed, as this is bold.
λ Web page is made up of two sections: head and body. Each of these sections is enclosed
within a pair of <html> tags. The head section describes the page content while the body
section defines the web page look and feel. Most of HTML tags are used in the body
section, whereas the number of tags is limited in the head section. The standard web page
structure in HTML is
<html>
<head>
<title>Title of the page is given here</title>
</head>
<body>
web page contents goes here
</body>
 </html>
IN-TEXT QUESTION 34.1
1. State whether the following statements are True or False
(a) Hyper Text Makeup Language is used for creating web pages.
(b) The HTML is platform independent.
(c) Hyper Text Markup Language is a programming language like Java.
(d) All web page starts with a welcome page.
(e) Web page is made up of two sections head and body.
(f) Use of heavy graphics will lead to slow loading of pages.
(g) Web pages can not be descriptive and interactive.
34.5 GETTING STARTED WITH HTML
Before you actually start using HTML, you need certain things such as:
(a) Text Editor
To create an HTML document, a text editor is required. Any text editor, which can save the file
in plain ASCII format, is good enough for creating HTML file. You can use right from MS-DOS
editor “EDIT” to Microsoft Word for creating HTML document.
(b) Web Browser
After creating an HTML document, it is required to be viewed in a browser to see how it looks.
There are several browsers available for viewing HTML documents such as Netscape Navigator,
NCSA Mosaic, Microsoft Internet Explorer, WebExplorer etc. But most popular among them are
Microsoft Internet Explorer and Netscape Navigator. However, it is advisable to use at least two
browsers to experiment with the look and feel of the developed web pages.
(c) Graphics Tool
Internet supports only GIF (Graphics File Format). Any other graphics file such as BMP, PCX,
etc needs to be converted in GIF format to be used in Internet. So you must use graphics software
that are capable of creating GIF graphics file. There are a number of graphics packages available
such as Adobe PhotoShop, Adobe Illustrator, etc, which support GIF file.
(d) Content
The actual contents of a web page are - all of the words, images, and links, which a web user can
read and interact with. So all your content should be well documented and well researched before
they are put in the web page. All graphics, Icons, etc. should be of correct impact.
(e) Hyperlink
Hyperlink is used to link between pages. A well-designed web page should have proper and
meaningful links to other documents or web pages. The hyperlink can be a highlighted text in the
document or images in the document.
34.6 USING HTML TAGS
The HTML document uses HTML tags, be it in the beginning of the document or end of it.
These tags tell a Web browser where the HTML in the document begins and ends. The HTML
document starts with a tag called <HTML> and ends with a tag </HTML>. i.e.
<HTML>
<HTML>
</HTML>
The first tag <HTML> indicates the beginning of the HTML document and the last tag
</HTML> indicates the end of the document. Within these two resides the body of the HTML
which defines the look and feel of the web page.
All the HTML tags end with the same tag name, but with a prefix of ‘/’ with the tag name such
as </HTML>.
(a) Head
The second tag in the HTML document is <HEAD>. This tag contains all header information
about the document such as document title, author name, etc. It ends with </HEAD>.
(b) Title
This appears within the Head tag structure. This is where the title of the web page should be
given, which will appear at the top of the browser’s title bar, and also in the history list. The title
of the document should be logically related to the content of the web page, and must be short but
informative enough about the web page. As a norm, there should only be one title per document.
(c) Body
The actual works lies in the Body of the document. This appears after the Head tags. Between the
Body tags, remains all the stuff that gets displayed in the browser window like all of the text,
graphics, and links.
(d) Headings
As we know, the entire HTML document contains information that appears in different parts or
section titles.
There are a total of six levels of headings, from Heading 1 through Heading 6. They are marked
as H1 for heading one and H6 for heading six. Heading 1 (H1) is “most important” and Heading
6 (H6) is “least important” in an HTML document. Given below are the structure of all six
heading tags:
<H1>Heading 1</H1>
<H2>Heading 2</H2>
<H3>Heading 3</H3>
<H4>Heading 4</H4>
<H5>Heading 5</H5>
<H6>Heading 6</H6>
A heading in an HTML document always begins at the margin of a line. It also forces a line
break at the end of the heading. In other words, there cannot be two headings on the same line.
(e) Paragraphs
Paragraphs are treated as the most basic structures in HTML. Presetting information in
paragraphs is quite common in Web pages. Paragraph tags are <P> for beginning of the
paragraph and </P> for the end. In other words in HTML creation, the beginning of a paragraph
is marked by <P>, and the end by </P>.
(f) Lists
As the name suggests, lists is the index of items to be appeared in a web page in a specific
format. There are three types of lists, namely Unordered, Ordered and Definition lists. Out of
these three most widely used lists are un-ordered and Ordered list. Let us discuss them one by
one.
(i) Unordered lists
While reading Microsoft Word you have known the ‘Bullet List’. It is a list of items, where each
listed item is preceded by a ‘bullet’ (a small black circle). In HTML, this bulleted list is termed
as ‘Unordered list’.
Unordered list starts with a tag <UL> and ends with a tags </UL>. Now all the items to be listed
start with an HTML tag <LI>, which stands for “List Item.” <LI> has a corresponding closing
tag </LI>, but this closing tag is not compulsory to be given. There is no limitation to the
number of list of items. Here is an example of Unordered List of items;
<UL>
<LI>Windows95
<LI>MS-DOS
<LI>Graphics
<LI>Animation
<LI>Internet
</UL>
And the result will be:
λ Windows95
λ MS-DOS
λ Graphics
λ Animation
λ Internet
Almost anything can be put into a list item — line breaks, entire paragraphs, images, links, or
even other lists.
(ii) Ordered lists
In HTML, both unordered and ordered list looks similar and same set of rules applies to both of
them. However, the differences between both of them is that instead of using <UL> and </UL>,
an ordered list is contained within the tags <OL> and </OL> and the list items are preceded by
numbers such as 1,2,3 and so on instead of a ‘Bullet’. However, when an ordered list is displayed
in a Web browser, it uses an automatically generated sequence of items.
Here is an example of Ordered List of items;
<OL>
<LI>Windows95
<LI>MS-DOS
 <LI>Graphics
<LI>Animation
<LI>Internet
</OL>
And the result will be:
1. Windows95
2. MS-DOS
3. Graphics
4. Animation
5. Internet
As in the case of unordered list, almost anything can be put into a list item — line break, entire
paragraphs, images, links, or even other lists. They can also be nested as unordered lists.
Unordered lists can be nested in ordered lists, vice versa. For example;
<UL>
<LI>Rakesh
<LI>Harish
<LI>Manoj
<LI>Swati
<LI>Reena
<OL>
<LI>21 yrs.
<LI>20 yrs.
<LI>25 yrs.
<LI>19 yrs.
<LI>20 yrs.
</OL>
</UL>
This will result in
λ Rakesh
λ Harish
λ Manoj
λ Swati
λ Reena
1. 21 yrs.
 2. 20 yrs.
3. 25 yrs.
4. 19 yrs.
5. 20 yrs.
34.7 CHARACTER STYLE TAGS
In addition to the above there can also be character style tags used for bold, italics, underline etc.
They are sometimes called forced style tags, because their very nature forces a certain style on
the character. The three most commonly used character style tags are:
(a) Boldface
This tag is used to make characters boldface. The tags used are <B> and </B>. And everything
between <B> and </B> is boldfaced. For example,
<B> This is a Web Page</B> will result in This is a Web Page.
(b) Italics
HTML tags <I> and </I> are used to put the characters in Italics. Everything between <I> and
</I> is italicized. For example,
<I> This is a Web Page</I> will result in This is a Web Page.
(c) Underline
As the name suggests, the Underline tags <U> and </U> are used to put character in underlined
format. That means everything between <U> and </U> should be underlined. For example,
<U> This is a Web Page</U> will result in This is a Web Page.
34.8 THE HTML ANCHOR OR LINKS
As we have already discussed, a well-designed web page will have links to other pages and even
to the outside world. These links can be a word within the text or an image in the document and
they can appear anywhere in the HTML document. The links in HTML document starts with a
tag <A> and ends with </A>. However, the <A> tags are not used alone, but this will contain
attribute like HREF.. HREF
HREF stands for “Hypertext REFerence”, which indicates the location of the file to be linked to
current page. The links are in the form of <A HREF=”URL or the address of the file”>, where
URL is the location of the resource to which the file to be linked. For example, the National
Open School Web server is at “http://www.nos.edu/”. A sentence, which contained a link to that
address, would look something like below:
For further information, please check out the <A HREF=”http://www.nos.edu/”>National Open
School Web server</A>.
The words between <A> and </A> the open and close of the anchor (“National open School Web
server”) will be displayed as a hyperlink. Here is how it will look like National Open School
Web server! Clicking that link from a Web browser will load the National Open School Web
server’s main or index page.
(a) IMG
Till now we have discussed how to create and format text in an HTML document. Image also
plays an important role in Web page creation. Images are inserted in Web documents using the
IMG tag <IMG> and this tag has no closing tag such as </IMG>. However an <IMG> tag
requires the location of the images file that is supposed to be placed in the document. This does
not essentially mean that the said image file will be included in the HTML file. Visually, images
are part of a Web page, but in reality an HTML file and any graphics it refers to are all separate
files. All the referred graphics files are stored as individual files in the web server and they don’t
have to be in the same directory as the HTML document. But it is a good practice to put all the
graphics files in a separate folder or directory preferably by images directory for easy location
and manipulation.
But <IMG> tags alone does not help to place images in the HTML document. For <IMG> tags to
work, you need another attribute called ‘SRC’. This attribute, which stands for ‘source’ or
‘source of this graphics’ points to location of the graphics file. The source can either be a URL
giving path for outside server or a path in the same server where the graphics file is stored. When
this attribute is used along with <IMG> tags, a typical image tag will look like;
<IMG SRC=”URL/ path of graphic file”>
In other words, if there is a graphics file called ‘welcome.gif’ in NOS web server’s graphics
folder than the above image tags will look like
<IMG SRC=” htttp://www.nos.edu/graphics/welcome.gif”>
The browser will put the graphic ‘welcome.gif’ wherever an image tag occurs in the document.
Browser will treat this as another piece of text.
Images can be placed almost anywhere within the body of the document, they can be between
words, paragraphs, within paragraphs, in list items or even a link.
IN-TEXT QUESTION 34.2
1. Fill in the blanks
(a) To create HTML document, a ________ is required.
(b) HTML tags <I> and </I> are used to put the characters in _______.
(c) Internet supports only ________graphics files format.
(d) __________starts with a tag <UL> and ends with a tag </UL>.
(e) _________ is used to link between pages.
34.9 WHAT YOU HAVE LEARNT
In this lesson you learnt the concept of web page designing. You learnt that you can create a web
page through html. Before creating a web page you should be clear about its purpose and client
groups. Hence, planning cycle, design cycle and design basics are important.
34.10 TERMINAL QUESTIONS
1. What are the basic steps to be followed while creating web pages. Explain in brief.
2. What are the steps you need while starting HTML?.
3. Explain the following
(a) Character style tags
(b) Ordered lists
(c) Paragraphs
 (d) Headings
34.11 FEEDBACK TO IN-TEXT QUESTIONS
IN-TEXT QUESTION 34.1
1. (a) False (b) True (c) False (d) True (e) True (f) True (g) False
IN-TEXT QUESTION 34.2
1. (a) Text editor (b) Italics (c) GIF (d) Unordered list (e) Hyperlink