Introduction To HTML

·        HTML

·        Different versions of HTML

·        Netscape and Explorer Extensions

·        Requirements for Designing a Web page

·        Steps in Designing a Web Page 

 

HTML

HTML is the short form for Hyper Text Markup Language.  It is a collection of platform-independent styles, indicated by markup tags, which define the various components of a World Wide Web (WWW) document. Tim Berners-Lee while at CERN, the European Laboratory for Particle Physics in Geneva, invented HTML.

H yper

T ext

M arkup

L anguage

 

HYPER

Hyper simply means active, kind of "all over the place".  Programming languages such as BASIC and FORTRAN are linear i.e it requires to follow certain path/rute/order, you can't jump from one point to another, you are always required to do a certain thing before you can go to another.  The word "Hyper" as part of World Wide Web (WWW) means that when you are on the internet using a browser jump to any page on WWW. You need not to follow a certain rute. In browsing through the if you see something you like, you can go immediately to it. There is no set order to follow.

 

TEXT

Design of a web page is always in a text file.

 

MARKUP

"Markup" means that in order to create web pages, we first type the text and then "mark up" the text.  . All word processors have codes or tags that tell the computer how to display the document for view or print. In other words, the text has been marked up with codes or tags. Suppose we type a document of following lines in MS Word or WordPerfect.

 

This is a Course on Web Design.

This is a Course on Web Design.

This is a Course on Web Design.

 

If we choose REVEAL CODES from the VIEW menu, we will see the codes as

[Bold On] This is a Course on Web Design. [Bold off][HRt]
[Just:Center] This is a Course on Web Design. [HRt]
[Italic On] This is a Course on Web Design. [Italic Off][HRt]

This shows that the text has been marked up with tags or codes. The tags or codes are  indicated between the [  ] symbols. [Bold On] means that the text written after this tag is bolded. The [Bold Off] tag means that there is no boldening of the text beyond this. [HRt] indicates the use of ENTER key. Similarly [Italic On], [Italic Off] and  [Just:Center] tags are used to write a text in italics or to center a text. All this has been done by the Word Processor for us.

 

If we want bold text or centered text, we have to put HTML tags to do that. The HTML tags tell browsers to show the text bold or centered.   Word Processors automatically put these tags, but in HTML, we have to put in the tags ourselves.

In HTML, the tags from a word processor don't work. Just see below how HTML tags are written.

<STRONG>This is a Course on Web Design. </STRONG>

<I> This is a Course on Web Design. </I>

<CENTER> This is a Course on Web Design. </CENTER>

 

Logically these tags are similar to what we have seen above for a word processor. In this course, we will learn how to put tags to make the web page as per our requirement.

 

LANGUAGE

"Language" means that we are using a language with all its syntax.  The HTML language is easy to learn, but it is different than a programming language such as BASIC or FORTRAN.

We need a standard language for all browsers.

 

2. DIFFERENT VERSIONS OF HTML

HTML is a language under construction. HTML has evolved fast over the years. Started with HTML 1.0 version, presently HTML 4.0 version is in use.

 

HTML 1.0

HTML 1.0 is the original version of HTML that had very limited features.

 

HTML 2.0

HTML 2.0 includes all the features of HTML 1.0 plus a number of other additional features for web design. Mostly all the browsers today support HTML 2.0.

 

HTML 3.0

To enhance the appearance of the websites, Netscape introduced new tags and attributes (called Netscape Extension Tags) to mark up the text. But these extension tags did not work in most other browsers. This led to considerable confusion and problems for HTML authors.

 

Dave Raggett, the leader of a HTML working group, introduced the HTML 3.0 draft which included new enhancements to HTML. However, most browsers only implemented a few elements from this draft as it was very big. It was not meant for implementation   in  "modular" way so the browsers could not implement them  bit by bit.

 

HTML 3.2 (WILBUR)

The Word Wide Web Consortium (W3C), founded in 1994 developed common standards for the evolution of the World Wide Web, drafted the WILBUR standard, known as HTML 3.2 and became the official standard in January 1997. The W3C is an international industry consortium and is jointly hosted by the Massachusetts Institute of Technology Laboratory for Computer Science (MIT/LCS) in the United States; the Institut National de Recherche en Informatique et en Automatique (INRIA) in Europe; and the Keio University Shonan Fujisawa Campus in Asia. Membership is open to any organization that signs a membership agreement (W3C cannot take individual memberships).

 

HTML 4.0 (COUGAR)

HTML 4.0 was derived mostly from the expired HTML 3.2 draft and became the official standard in April, 1998. HTML 4.0 is the current version of HTML. In the early days it was code-named COUGAR.

HTML 4.0 has introduced new functionality through defining new tags and offers web page designers major advances in designing websites, separating a document's structure from its presentation. It has extended old tags to offer more flexibility when working with forms and tables. We will study the new tags in  Chapter .

Features of HTML 4.0

·         Enhanced tables and forms

·         Supports frames, style sheets, scripting, embedded objects, etc.

·         Improved support for mixed direction text and accessibility for people with disabilities

·         the capability to manage web pages for different languages

·         Framework for Dynamic HTML page creation

 

3. NETSCAPE AND EXPLORER EXTENSIONS

Without waiting for the outcome of the slow process of W3C, the Microsoft and Netscape added their own extensions in order to attract users. Netscape, used to be a very popular browser, has created a number of additional tags that work beautifully in Netscape. However, Netscape’s tags are not all supported by other browsers. This means that if you are using Netscape extension tags to create a web page, while they may create good looking web pages in Netscape, the same pages on another browser will look different.  Therefore if you highlighted  the text at a particular position on a web page using a Netscape extension tag, then the text simply wouldn't be highlighted and positioned at that place in the other browsers. 

This Netscape problem illustrates the case for the need of a standard language that can be used by all browsers.  HTML 4.0 will solve this problem.

 

Today all popular browsers accept HTML 2.0. In our study of web design, we will use this version of HTML and HTML 4.0 as well. HTML 4.0 tags are "higher level" tags that will only work in "higher level" browsers. When designing web pages, you should keep in mind the aim of your website. If you are planning to make some money with your website, you want the widest possible audience and certainly do not want to leave out any potential customers. 80% of people on the WWW today use high-level browsers, but several million viewers will not be able to view the page correctly as you wish.

 

The best way to learn is by doing. In the course, we will give you a lot to do yourself. When we give you an example or a problem, try it out yourself to see what it would look like through your browser.

 

4. REQUIREMENTS FOR DESIGNING A HOME PAGE

 

1.  A DIRECTORY (also called a FOLDER)

You should set up a directory or folder to keep only your HTML files for the web pages you are designing. Work in that directory only. 

 

2. HAVE YOUR MODEM DISCONNECTED

You do not need to be connected by modem to your server to design your web page. You can design your HTML pages off-line. When you load the browser, a little dial-up window opens up to dial the server. Simply click CANCEL, and choose to work off-line.

 

3. YOU NEED A BROWSER

Internet Explorer and Netscape Navigator are among today's most popular browsers. There are other less popular browsers.

 

4. YOU NEED A WORD PROCESSOR

HTML document is a plain-text file that can be created using any text editor. You need a word processor such as Microsoft Word or Microsoft Works.  NOTEPAD is a simple "text editor" that loads almost instantly, quickly loads and saves any file and thus is very convenient to use. They can be found in the ACCESSORIES directory. To find NOTPAD in Windows 95, choose "START", then "PROGRAMS", then "ACCESSORIES" and then NOTEPAD.

 

If the web page becomes so big that it will no longer fit into NOTEPAD, switch to another text editor such as WORDPAD.

 

5.  RUN BOTH YOUR BROWSER AND NOTEPAD SIMULTANEOUSLY

Keep BOTH your browser AND NOTEPAD active at the same time. This way you can quickly SWITCH back and forth between them. To have open a NOTPAD as explained above, then open the browser or vice versa.

 

5. STEPS IN CREATING A WEB PAGE

 

All web sites are made using the following steps.

1. Do all typing work in a text editor such as NOTEPAD or WORDPAD.

Include all the tables and images required in the page. You have to put all the tags for text, tables, images and other things.  You need not to put the actual images on the page. You have to put the correct HTML tags  (its size, spacings, location, border, etc) to position the image at the desired position. We will separately learn about images and image tags. In this Course, you will know how to get free Image Software that will be needed to manipulate the images.

 

Similarly, you don’t have to draw the actual table. You have to put HTML tags (size of the table, number of rows and columns, border, color, etc) to tell the browser about the desired information on the table. We will separately learn tables in detail.

 

2. Save your work in an HTML file using any appropriate name as index.html, page1.html, company.html, etc.

 

If you are using a text editor such as NOTPAD, simply type the file name and click on "OK". If you are using a WORDPAD or other word processor, save as "text only" file. If you don't save as " text only" document, you will be saving text, in addition to many codes and tags for margin settings, bold, upper case letters, italics, underlines, etc. The browsers do not read these codes and tags. Browsers understand only text documents.

To save your HTML file, first choose SAVE AS from the FILE menu. Then, choose a suitable file name and also choose TEXT ONLY, ASCII TEXT DOS, or MSDOS TEXT, or a similar option. Then click on "OK" to save your file.

 

File Name:

Type in a name for your file (up to 8 characters for IBM and IBM compatibles

and not running at least Windows 95).

Suffix:

Put a suffix to the file name. The suffix is an extension to the name and declares the kind of document. 

Add the extension ".htm" for IBM and IBM compatibles not running at least Windows 95, OR ".html" for MAC, UNIX, AMIGA computers and Windows 95 or higher users.

 

Example:

If  "home" is the name of the HTML document, we use:

home.html for MAC, UNIX and AMIGA computers, and running at least Windows 95 on IBM and IBM compatibles.

home.htm for IBM and IBM compatibles not running at least Windows 95.

 

3. Load the HTML file into the browser to view your web page. To load the file into the browser, you need to enter the correct address (location) of the HTML file. For this, choose File from the menu bar, and then choose Open or Open File or show ALL FILES. You will then need to locate your file, click on the file name and then click the O.K.  or Open  button. The name and location of your HTML file will appear in the browser at the address bar. Once the file name appears in the address bar of the browser, just enter to view the web page you have created.

4. Switch back to NOTEPAD to make any corrections and changes. You can only observe your file in the browser - you cannot edit in the browser. Steps 1-4 are repeated many times until you are satisfied with the design of your web page.

5. Once you are satisfied with the design of your page, you have to put the file on the serve. You may need to contact a local Internet provider that will put your files on a server. You may have to pay a fee for this. In this Course you will know where to find a free server to host your web site.