NOS : Certificate in Computer Applications
| Home | Table of Contents |
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
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.
Some minimum technical requirements might include:
Identify and address all potential problems such as:
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
<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:
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
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