Introduction to Web Page Designing

THE INTERNET
The Interest is a worldwide, noncommercial, freely accessible network of computer networks. It’s the mother of all computer networks.

The Internet was first started in 1969 at Department of Defense (DoD) with only four computers. Originally conceived as ARPANET (Advanced Research Projects Administration Network), it was developed to experiment with networks and to share resources among DoD-funded research contractors. As ARPANET matured, universities everywhere were clamoring to sign up. It eventually evolved into two formidable military and nonmilitary computer networks with thousands of smaller networks joining in.

ARPANET aged rapidly under the weight of new technology and the volume of traffic it was managing. The National Science Foundation (NSF) finally came to the rescue, assigning five supercomputers to handle the ever-increasing load. In 1990 when ARPANET ended its reign, NSFNET took over.

Today, NSFNET is phasing itself out, with a variety of commercial and noncommercial networks taking up the cyberspace slack. New networks sponsored by local phone companies and regional providers are springing up around the globe, constantly expanding the scope of Internet traffic. In a short quarter of a century, the Internet has grown from just four-computers in the DoD’s into an worldwide presence of incalculable importance.

WEB Top

The World Wide Web (WWW) is a vast, ever-expanding collection of online documents and information formatted in Hypertext Markup Language (HTML) distributed over the Internet. The Web includes shopping malls filled with virtual retail outlets, private and public repositories of software, libraries, magazines, newspapers, online cafes and meeting spots, forums, and much more.

The Web is exploding in popularity because of its simple, graphical nature and easy accessibility. Before 1989 only a relatively small community of individuals had the skill to understand and use the Internet. But when the Web was born, suddenly anyone could do it. Instead of cryptic commands, the Web employed simple point and-click techniques already used in standard online help screens. That is, you could click a visible link and “jump” to the referenced document regardless of its location.

WORKING OF THE WEB Top

The Web is a compendium of virtually countless Web-formatted (HTML) documents, known as Web pages (the terms document and page are often interchangeable). Web documents live on computers that run HTTP (Hypertext Transfer Protocol) servers. Most HTTP (Web) servers are hosted on UNIX machines; however personal computers (PCs) and Macintosh computers are also used. To access a Web server and display a Web page, you need client software known as a Web browser; Browsers are so named because they are easy-to-use programs that allow you to freely browse Web pages for hours at a time.

Web links (also known as hypertext, hyperlinks, hotspots, and jumps) are visually distinctive words, phrases, and graphics located on Web pages. In most browsers links are colored (often blue) and/or underlined. When you select a link on a Web page, the file referenced in the link is downloaded from the server to your computer. Web pages can have any number of links embedded in them, creating an endless web of documents to sample.

Web Page

A Web page is simply a document written in the Web-formatting language, HTML. It can be one to many screens in length. Now a days that the commercial nature of the Web is being exploited, Web pages are also used to advertise products, companies, and services. Most corporations are scrambling to create a strong Web presence in an effort to lure even a small percentage of the Web citizenry to their goods.

HOME PAGE

Some Web documents are described using the generic term home page. The most commonly referenced home page is the opening document to particular Web site, signifying the top of the site hierarchy and providing a generalized table of contents in the form of links.

Most browsers allow to you select a default home page marking a consistent starting place for all of your Web-browsing adventures. Popular default home pages are documents containing a buffet of topics that link all over the Web. For e.g. The Netscape home page.

Elements of a Web Page

Most Web pages contain three main components formatted in HTML they are
• Text
• Graphics,
• And links.

TEXT

The text is simple 7-bit ASCII, which is best represented by the keys available on a standard keyboard. It’s important to note that many browsers don’t support the extended 8-bit ASCII character set. The extended set includes special characters such as umlauts and trademark symbols, and varies from font to font, and computer to computer. HTML does provide special codes known as character entities that theoretically offer you 8-bit ASCII characters; however, they don’t always display correctly on some browsers

GRAPHICS

Because the web invites the use of graphics, most Web pages contain one or more graphic files. There are two ways that the Web traditionally displays graphics: external and inline. An external graphic is associated with a link; it displays only when you click the link. Inline graphics are automatically downloaded as part of the Web page.

LINKS AND URLS

Links are the transporters of the Web. They seem to effortlessly transport you from one Web document to another regardless of the physical distance. In actuality, links contain addresses of the Web files they’re referencing. When you click the link, the address is accessed and the referenced file is downloaded from the server to your screen.
In the HTML world, a Web address is known as a Uniform Resource Locator, or URL.

When you view a Web page in a browser, you see all three elements (the links are usually underlined and in a different color).

http://www.imagewebsolutions.com/

BROWSER

A Web browser is software program that allows you to easily display Web pages and navigate the Web.

The first graphical browser, Mosaic, was developed in Illinois at the National Center for Supercomputing Applications (NCSA). Each browser displays Web-formatted documents a little differently. As with all commercial software, every program has its own special features.
The two basic categories of Web browser are:

• Text-only
• Graphical.

Text-only browsers: A text-only browser such as Lynx allows you to view Web pages without showing art or page structure. Essentially, you look at ASCII text on a screen. The advantage of a text-only browser is that it displays Web pages very fast. There’s no waiting for multimedia downloads.

Graphical browsers: To enjoy the multimedia aspect of the Web, you must use a graphical browser such as Netscape Navigator or NCSA Mosaic. Graphical browsers can show pictures, play sounds, and even run video clips. The drawback is that multimedia files, particularly graphics, often take a long time to download. Graphical browsers tend to be significantly slower than their text-only counterparts. And this waiting time can be stretched even further with slow connections or heavy online traffic.

A BRIEF HISTORY OF HTML

Interest in and use of the World Wide Web has been expanding at a phenomenal rate. As the Web grows, so must its vehicle of communication, HTML. The HTML 2.0 specification is dated November 1995. Since then, the HTML 3.0 draft specification expired on September 28, 1995, without becoming recommended, and HTML 3.2 became a W3C (World Wide Web Consortium) Recommendation on January 14, 1997. Now we have the public draft for HTML 4.0, announced on July 8, 1997. This draft is almost certain to undergo changes before being accepted by the W3C as a Proposed Recommendation–if it does, indeed, ever become a recommendation.

In addition to this official work on HTML, the browsers have been making their own additions to HTML. Some changes were eventually adopted into W3C HTML Recommendations; others remain proprietary coding aspects that only the individual browsers recognize. The browsers’ versions of HTML changed, too, in a game of marketing and programming one-upmanship, hoping to lock Web developers into using one browser or the other exclusively.

WHAT’S DIFFERENT IN HTML 4.0

The changes that took place between HTML 3.2 and HTML 4.0 are: HTML 4.0 introduces eight new elements, deprecates ten (more about deprecation in a bit), and makes obsolete three more. Frames, formerly only found in the browser versions of HTML, join the official fold. Tables provide better tabular presentation; forms more readily respond to the needs of the disabled; style sheets provide for better formatting and presentation; and multimedia, scripting, and printing are improved. And, as if that weren’t enough, HTML 4.0 uses a different character-encoding format that expands the number of alphabets and languages able to implement Web documents.

OVERVIEW OF HTML

Hypertext Markup Language (HTML) is used for creating hypertext on the Web. Markup languages are a special type of computer languages which are meant for classifying the parts of a document according to their function indicating which part of the document is a title, a subheading, the name of the author etc. In other words the main goal of HTML is to define the different parts of your page so that the document (page) becomes platform - independent and can be displayed on many different kinds of platforms. HTML gives users a way to identify the structural parts of a document. Tags are a kind of HTML commands. A tag is a unit of markup, a set of symbols defined in HTML to have special meaning. They are preceded and followed by angle brackets (&lt ;) & (>).

Tags are of 2 kinds.
1. Start tags - used to begin an effect.
2. End tags - used to end an effect.

<B> is a start tag for giving a bold effect to the text. and
</B>is an end tag for the same bold effect <B> Bold text </B>
Learning HTML involves finding out what tags are used to mark the parts of a document and how these tags are used to format a document.
HTML is not a page layout language but rather a language used to mark the structural parts of a document - parts such as paragraphs, lists, headings, block quotations and others. Based on the identification of these documents parts, the programs that render HTML documents (Web browsers) display the HTML in a readable form. This organization allows for a separation of a document’s structural specification in the HTML code from its formatted appearance in an HTML browser.
There are many WYSIWYG (What You See Is What You Get) editors available. These editors allow you to create your document normally as they would appear in a browser and produce HTML code when saved. They let you embed images, movies, sounds and animations inside the document. The more popular WYSIWYG editors are:-

• Adobe PageMill
• Claris home page
• Front Page
• Web Weaver
• Hot Metal Pro
• Clarisworks
• Golive pro
• Netscape composer

SGML - ORGANISATION

HTML is defined using the Standard Generalized Mark-up Language (SGML), an ISO standard. SGML itself is a meta language (”a language to define languages”). The goal behind SGML is to help format information online for efficient electronic distribution, search and retrieval in a way that is independent on the appearance details of the document. Since HTML is one member of SGML, we will look into the different parts of SGML to understand the Web Language:

An SGML processing involves:

Data of the document, which consists of the contents of a document, whether it is text or Multimedia as well as any information about the information itself.
Tags in HTML document which identify it’s structure: the headings, subheadings, paragraphs, lists and other components.
The format of a document is it’s final appearance, after the merging of data, structure and how the formatting should be done.
All these parts are separable: document data can be created without worrying about the structure; structure can be added without worrying about it’s formatting and so on.
Using SGML as a data-encoding standard is also beneficial because it is an international standard not tied to any one vendor.

PHILOSOPHY OF HTML

SGML is used to define HTML at all its levels. HTML, follows the same philosophy of data, structure, and format independence of SGML. Although HTML is not as complicated as some computer programming languages, writing HTML requires authors to follow specific rules to “tag” or “mark” the parts of the document. This marking sets HTML apart from free-form prose or text created in a word processors. In fact, the whole idea of marking up a text to express its structure comes from a very different approach than the what-you-see-is-what-you-get (WYSIWYG) word processors. In a WYSIWYG word processor, authors concentrate on a document’s data, structure, and format all at once.

Why worry so much about a document’s structure when a WYSIWYG word processor can show right away what a document looks like?

The answer lies in the relationship between HTML and all the possible hypertext browsers that might read it. Using HTML, a developer carefully defines the structure of a document so that any present browser can read it and display it in a way that is best for that browser.

THE PURPOSE BEHIND HTML

HTML, similar to a computer-programming language, requires you to express your thoughts in a specific structure in order for the “computer” to understand. While HTML is not complicated as some computer-programming languages, writing HTML requires that you should follow specific rules to “tag” or “mark” the parts of your document. This marking distinguishes HTML free from prose or text created in a word processor. The whole idea of marking up a text to express its structure represents a very different approach from the What-You-See-Is-what-you-Get (WYSIWYG) word processing that is employed in many desktop systems. In WYSIWYG word processing, you concentrate on a document’s appearance.

Why would you want to worry so much about a document’s structure, when a WYSIWYG word processor can show you-right away-what a document looks like? The answer lies in the relationship between HTML and all the possible hypertext browsers that might read it. Using HTML, you carefully define the structure of a document so that any browser can read it and display it in a way that is best for that browser.

The result of this browser-independent characteristic of HTML is that it enables developers to express their thoughts in a structure that any Web Browser will be able to interpret and display. This makes it possible to develop information in HTML and not have to create a separate version of it for the LYNX browser and another for Cello and still another for NETSCAPE or Mosaic.

BENEFITS OF HTML

HTML files are compatible with any browser, as they are in ASCII text format.(The ASCII text does not have control characters or embedded binary codes, so that you can edit and read it in any word processor).

Another benefit derives from the markup philosophy of HTML. HTML is defined by Standard Generalized Markup language (SGML), an international standard(ISO 8879) for text information processing. SGML itself is a meta language. The goal behind SGML is to help format information online for efficient electronic distribution, search and retrieval in a way that is independent of the appearance details of a document’s appearance; the writing and production of documents can be edited.

DRAWBACKS OF HTML

Although HTML might sound great at this point, offering so many benefits, the bad news (at least according to some people) is the way an HTML document looks.

<HTML>
<HEAD></HEAD>
<BODY>
<H1> Welcome to the world of virtual courses</H1>
<HR>
<H2>We hope you enjoy learning about the Web
and it’s Components</H2>
</BODY>
</HTML>
The “<” and “>” symbols that seem to dominate an HTML file are the beginnings and ending of the tags that mark a document’s structure. At first glance, an HTML file looks confusing; it’s hard to pick out the actual content of the document from all the tags used to define the document’s structure. With an understanding of what these tags do, however you’ll quickly find that the tags mark things that you are already familiar with: titles, headings, paragraphs, and lists. Once you know the meaning of the tags, the meaning of the document’s structure becomes clear, although the document’s appearance in any browser cannot be determined solely from the HTML file.

HTML EDITORS

HTML editors are application programs used for creating the web pages. The HTML editors can broadly be classified into two categories:

1. Text editors with toolbars
2. WYSIWYG editors

Text editors: Text editors with toolbars are similar to plain text editors in which you see and edit the raw HTML file. However these tools make the task of entering the HTML tags similar to providing simple user interface tools that place correctly formatted tags in the document automatically. Although these text editors can be helpful, you are still forced to look at raw HTML code without any idea of what it will look like or even if the code on the screen is valid HTML.

WYSIWYG editors: WYSIWYG editors are much more easy to create HTML documents. The principle on which these WYSIWYG editors work is “What You See Is What You Get” principle, i.e. these editors display exactly in the same format as it will be displayed in the Web browsers. The WYSIWYG editors are intelligent application program so the user creating HTML document does not have to type in the tags. The WYSIWYG editor itself adds these tags at the suitable places.

HTML Document Structure…

HTML files are just normal text files. they usually have the extension of .htm, .html, or .shtml. HTML documents have two (2) parts, the head and the body. The body is the larger part of the document, as the body of a letter you would write to a friend would be. The head of the document contains the document’s title and similar information, and the body contains most everything else.

Example of basic HTML document Structure…

<html>
<head><title>Title goes here</title></head>
<body>Body goes here</body>
</html>You may find it easier to read if you add extra blank lines such as follows… <html> <head>
<title>Title goes here</title>
</head> <body>
Body goes here
</body> </html>
Note: Extra spaces and line breaks (blank lines) will be ignored when the HTML is interpreted… so add them if you wish to do so.

Whatever falls between the TITLE tags will be the title of the document, when the page is viewed it is usually found in the title bar at the top of the screen. (On Windows Machines, this is to the left of the maximize/minimize buttons at the very top of the window.) [Note: You may NOT use other tags within the TITLE tags (Example: You cannot have the code read: <title><b>title goes here</b></title>.]

Whatever you place between the BODY tags will fall into the major area of the document window, and therefore it is the largest part of your HTML document.

VRML

VRML (Virtual Reality Modeling Language) is a 3-D graphics language used for displaying 3-dimensional objects on the World Wide Web. You can think of it as the 3-D equivalent of HTML. Files written in VRML have a .wrl extension (short for world). To view these files, you need a VRML browser or a VRML plug-in to a Web browser.. After downloading a VRML page, its contents can be viewed, rotated and manipulated. Simulated rooms can be “walked into.” The VRML viewer is launched from within the Web browser.

The first VRML viewer was WebSpace from SGI, whose Open Inventor graphics library was the basis for developing VRML. WebFX, WorldView and Fountain are other Windows viewers, and Whurlwind and Voyager are Mac viewers.

THE HTML DOCUMENT LIFE CYCLE

The life cycle of an HTML document includes:

1. Developing
2. Publishing
3. Testing
4. Maintaining.

Whether the HTML document is meant for the Internet, Intranet or for the personal use the above steps remain the same.

1. Developing Documents

Within the development phase are four sub processes:
• Planning
• Organizing
• Creating
• Testing

Within these phases are several smaller processes, as shown in figure.

a) Planning Documents

Before you start producing an HTML it is always essential to do some planning. In particular, you need to determine what information your visitors want and what your organization wants to provide and to reconcile these two points into a single list that accommodates both your visitors and your organization.

What Do Your Visitors Want?

You visit a web site usually when you have a reason for going there and normally have something specific in mind when you start.Thus, as you begin the planning phase, you’ll want to think about what visitors expect to see at your site. For example, they might want general information about you, your company, or your products and services. Or they might want specific information, such as contact names, troubleshooting advice, safety information, prices, schedules, order forms, and so on.

Fore More Information : Web Design India