Lesson 1 HTML

7/30/2019 Lesson 1 HTML

1/7

LESSON ONE - INTRODUCING HTML

You may read the following sections in their entirety

or use these choices to go directly to a section.

|Understanding HTML| |Different Versions of HTML| |The Netscape Problem|

|HTML software to assist in web page design|

UNDERSTANDING HTML

HTML stands for HyperText Markup Language.

H yperT ext

M arkup

L anguage

LET'S BREAK THIS DOWN A LITTLE FURTHER

HYPER

You may have heard the expression "hyper" in describing someone. In simplest terms, it means

active, kind of "all over the place". The word "Hyper" as part of HTML is similar in context. Itsimply means that when you are on the internet using a browser such as Netscape Navigator or

Internet Explorer, you can in fact, go "all over the place". In browsing through the World Wide

Web (WWW), if you see something you like, you can go immediately to it. There is no set orderto do things in. Hyper is the opposite of "linear". Linear means that there is a certain order you

must follow such as "you must do this before you can do that". Programming languages such as

BASIC and FORTRAN are linear. HTML does not hold to that and allows you to jump to anypage on the WWW and at any time. Thus the word HYPER refers to the idea that the text in

HTML is not linear.

TEXT

We are working with text only files. More on that in Lesson Two.

MARKUP

"Markup" comes from the fact that in order to create web pages, we will be typing in the text and

then "marking up" the text. If you are familiar with WordPerfect, consider this example. Supposeyou just typed a document in WordPerfect. If you choose REVEAL CODES from the VIEW


2/7

menu, the monitor screen or Window splits into two parts. The top half of the screen shows the

text you typed in and the bottom half shows the same text but with the words marked up with"codes" or "tags". For example, suppose you typed the following three lines in WordPerfect:

Hi, this is bold

This is italics

These words are centered

If you choose REVEAL CODES, you would see the following on the bottom half of your screenin one version of WordPerfect:

[Bold On]Hi, this is bold[Bold off][HRt]

[HRt][Italic On]This is italics[Italic Off][HRt]

[HRt]

[Just:Center]These words are centered[HRt]

In other words, the text has been marked up with codes or tags as indicated between the [ ]

symbols. Each [HRt] indicates that the ENTER key was pressed. [Bold On] means that

everything after this tag is bolded. The [Bold Off] tag simply says that bolding is to end here.

Unless you choose REVEAL CODES, you won't see these tags. All word processors have codesthat tell the computer how to display the document, how to print it out, etc.

In HTML, WordPerfect tags or the tags from any other word processor won't work. HTML

has its own set of tags to mark up text. If you want something bolded or centered, you have toindicate so with HTML tags. WordPerfect automatically puts the tags in for you. In HTML, youmust put in the tags yourself. If you want to see the tags for this page, just choose VIEW from

the menu bar of your browser and then choose SOURCE or DOCUMENT SOURCE.

LANGUAGE

"Language" means that we are using a language with all its syntax. Note that HTML is not aprogramming language such as BASIC or FORTRAN. These are linear programming languages

and are based on a whole different set of rules and are far more complicated to learn. The HTML

language is easy to learn (trust me).

|top| |bottom|

DIFFERENT VERSIONS OF HTML

HTML 1.0


3/7

The original version of HTML was HTML 1.0. It had very limited features which greatly limited

what you could do in designing your web pages.

HTML 2.0

HTML 2.0 then arrived and included all the features of HTML 1.0 plus several new features forweb page design. Until January, 1997, HTML 2.0 was the standard in web page design.

HTML 3.0

HTML 2.0 served its purpose very well, but many people designing web pages (called HTML

authors or webmasters) wanted more control over their web pages and more ways to mark up

their text and enhance the appearance of their websites. Netscape, the leading browser at thattime, introduced new tags and attributes called the Netscape Extension Tags. Other browsers

tried to duplicate them but Netscape did not fully specify their new tags and so these extension

tags did not work in most other browsers. It led to considerable confusion and problems when

HTML authors used these tags and attributes and then saw that they didn't work as expected inother browsers.

At about that time, an HTML working group, led by Dave Raggett, introduced the HTML3.0 draft which included many new and useful enhancements to HTML. However, most

browsers only implemented a few elements from this draft. The phrase "HTML 3.0 enhanced"

quickly became popular on the web but it more often than not referred to documents containingbrowser specific tags (discussed below in "The Netscape Problem" section), instead of referring

to documents adhering to the HTML 3.0 draft. This was one of the reasons why the draft was

abandoned.HTML 3.0 is now an expired draft. Another reason why HTML 3.0 did not make it

was because it was so "big". Future versions were now to be introduced in a more "modular"way so that browsers can implement them modular by modular or bit by bit.

HTML 3.2 (WILBUR)

As more browser-specific tags were introduced, it became obvious that a new standard was

needed. For this reason, the Word Wide Web Consortium (W3C), founded in 1994 to developcommon standards for the evolution of the World Wide Web, drafted the WILBUR standard,

which later became known asHTML 3.2. HTML 3.2 captures the recommended practice as of

early 1996 and became the official standard in January, 1997. Most, if not all, popular browsers

in use today fully support HTML 3.2.

HTML 4.0 (COUGAR)

In the early days,HTML 4.0 was code-named COUGAR. This version introduces newfunctionality, most of which comes from the expired HTML 3.0 draft. This version became a

recommendation in December, 1997 and a standard as of April, 1998. Explorer has done a verygood job in implementing the many features of HTML 4.0. Unfortunately, Netscape has not keptpace. The latest version of Netscape Communicator still does not recognize the many tags and

attributes introduced with HTML 4.0. This means that a web page that involves HTML 4.0

specific tags will look great in Explorer but can look disastrous in Netscape.


4/7

XHTML 1.0

You would think that the next major version after HTML 4.0 would be HTML 5.0 and with itwould come a bunch of new tags that would do all sorts of wonderful things. That would be a

good guess - but it would also be a wrong guess. The next version of HTML after HTML 4 is

XHTML.

XHTML stands for EXtensible HyperText Markup Language.

EXtensible

Hyper

Text

Markup

Language

XHTML 1.0 is not bringing with it a lot of new tags. The purpose of XHTML is to address the

new browser technologies that is sweeping the world. Today web pages are being viewed inbrowsers through cell/mobile phones, cars, televisions, plus a host of hand-held wireless devicesand communicators. Alternate ways to access the internet are continually being introduced. In

many cases, these devices will not have the computing power of a desktop or notebook computer

and so will not be able to accommodate poor or sloppy coding practices. XHTML is designed toaddress these technologies. XHTML also begins to address the need for those with disabilities

(such as the blind and visually impaired) to access the internet. Thus web pages written in

XHTML will allow them to be viewed on a wide range of browsers and internet platforms.

XHTML 1.0 is the result of the hard working World Wide Web Consortium (the W3C) to bring

some sort ofstandard to provide rich high quality web pages through these varied devices.

XHTML became an official W3C recommendation in January, 2000. XHTML is now a webstandard and is the next generation of HTML.

|top| |bottom|

THE NETSCAPE PROBLEM

As stated above, in the early days of HTML, Netscape created a number of its own tags(extension tags) to HTML 2.0 that were not part of the official HTML 2.0 version. In other

words, Netscape created a number of additional tags that would work beautifully in Netscape,but were not supported by other browsers such as Internet Explorer. Many of these extension

tags did not even make it into HTML 3.2. This means that if you were using Netscape extensiontags, while they may create good looking web pages in Netscape, the same pages viewed in

Explorer would look entirely different and in fact give results that you did not want.

This Netscape problem also illustrates the case for the need of a standard language that can be

used by all browsers. Imagine what will happen if each browser were allowed to develop its own


5/7

tags. You will simply end up with all browser specific web pages. It would become impossible

to design web pages that will work in all browsers. We need continuity and we need a standardlanguage for all browsers. Netscape has argued that their extension tags will not shut down or

hang up other browsers. Thus if another browser does not recognize a Netscape extension tag, it

will simply ignore it - as if it didn't exist. Therefore if you centered text on a web page using a

Netscape extension tag, then the text simply wouldn't be centered in these other browsers. WhileI have concentrated on the Netscape problem, the same arguments can also be stated for Explorer

browsers for they too had their own extensions.

So what do we have here? Well, in summary, we have:

1. HTML 2.0 tags2. HTML 3.2 tags3. HTML 4.0 tags4. Netscape extensions5. Explorer extensions

Sounds confusing? Well it really isn't that bad. Basic web page design is, in fact, easy to learn. In

this course we will be designing web pages using HTML 3.2 standard code because HTML 3.2tags and attributes are accepted by most, if not all, versions of the most popular browsers in use

today. I am assuming that you will want as many people as possible to be able to read your web

pages. You can create excellent web pages using HTML 3.2 content. Using Netscape extensiontags that are not part of HTML 3.2 simply means that many of these tags will only work when

viewed in Netscape. Similarly if you use Explorer extension tags that are not part of HTML 3.2

then many of these tags will only work when viewed in Explorer. Even if 80% of the people use

high level browsers that can view your web pages in the way you want them viewed, it stillmeans that 20% or several million viewers will not be able to view your web pages in the way

you want them viewed. We need to keep these things in mind when designing web pages. And ifyou are planning to make some money with your website, you certainly do not want to leave outany potential customers. You want the widest possible audience.

We will also study a number of Netscape and Explorer extension tags because you should beaware of what they are. Some of you may also want the control that these extension tags give -

even if it means shutting out a portion of the audience on some of your web pages. At one time

Netscape browsers dominated the browser market. Then Explorer started to take a larger share ofthe market at the expense of Netscape. Today, Explorer dominates the market and appears to be

the browser of choice for most people.

|top| |bottom|

HTML SOFTWARE TO ASSIST IN WEB PAGE DESIGN

Should I not simply use one of the programs on the market that makes up web pages for me? Youcould. While all of them will give a basic home page, a number of them are limited in what they


6/7

can do. Many do not, for example, give you all the features of HTML. However, I am also sure

that there are programs on the market (and new programs coming out all the time) that doincorporate most of the features of the various versions of HTML. Still, in order to get maximum

use out of these programs, you need to understand HTML and what it can do for you in the

design of web pages. It would be good to know what will work in most browsers and what won't

work. It would be good to know what tags are browser specific or what tags will work only in ahigh level browser. If you understand the basics of HTML, you will have a much better

understanding of what you are trying to accomplish with these market programs. You could also

use an HTML program to assist you with some of the basic stuff and then code the rest yourselfwith your knowledge of HTML. Someday you may want to experiment with some of these

programs. There is no doubt that learning the basics of the HTML language is necessary to fully

understand these web page design programs. Knowing HTML will allow you to tweak and finetune a web page to perfection.

To illustrate what I am trying to say, here are three unsolicited testimonials I received. This firstone is from Karen who lives in the state of Georgia, USA. She writes: "I can't thank you enough

for taking the time to explain HTML. I'm off work due to an illness. Being bored out of my mindI decided to try to create a web page without any knowledge of HTML. The programs I used did

the basics, but I found them confusing because I lacked the knowledge of HTML. So I wentsurfing and found your website. I must say that I am impressed. After going through all the

lessons, I've got some great ideas and can't wait to get started on my own page. I decided to

dump the programs and do all the coding myself. When I finish my web page there will be a noteof thanks and link to your website. My greatest appreciation, Karen."

Here is an email I received from Brenda who lives in Illinois. She writes: "I have printed all ofthe pages of your lessons and am impressed at the level of information it contains. I can actually

understand what you are talking about although I am brand new to HTML. I am teaching myself

how to create my company web page using FrontPage and I have an embarrassingly simple webpage on Geocities. Some trouble has occurred in FrontPage with extensions and color changes,

hence I am trying to learn HTML to correct them. Thank you so much for taking the time to

create these lessons. They are fabulous! Brenda."

Our third email is from Sharon who lives in Pennsylvania, USA. She writes: "After being

overwhelmed by HomeSite, and constrained by templates on free space websites, this is exactlywhat I was looking for. You write in a wonderfully clear, concise way, that's easy to follow.

Your problems are instructive, and the pace is perfect. THANK YOU!"

I have also received many other e-mails from people expressing similar view points. I'm notadvocating that we "dump" these programs. For some people they are very essential in designing

websites and in updating them. But the point to be made is that it is better to take some time and

learn HTML first. Then if you do run into some problems with these programs, you will knowhow to correct them.

So now sit back, relax, and learn a whole new language called HTML. You will be happy youdid.


7/7

|Back to the top of the page|

|Return to Home Page| |Return to Alternate Home Page| |Send me to Lesson Two|

The information contained in these free 21 lessons is Copyright , Brantford Educational Services, 1997 -

2007 by local and international copyright laws. All rights reserved. It is therefore illegal to copy these lessons

into another website. If you find a copyright violation, please report it [email protected]
http://www.htmltutorials.ca/index.htmhttp://www.htmltutorials.ca/index.htmhttp://www.htmltutorials.ca/index.htmhttp://www.htmltutorials.ca/altern.htmhttp://www.htmltutorials.ca/altern.htmhttp://www.htmltutorials.ca/altern.htmhttp://www.htmltutorials.ca/lesson2.htmhttp://www.htmltutorials.ca/lesson2.htmhttp://www.htmltutorials.ca/lesson2.htmmailto:[email protected]:[email protected]:[email protected]:[email protected]://www.htmltutorials.ca/lesson2.htmhttp://www.htmltutorials.ca/altern.htmhttp://www.htmltutorials.ca/index.htm

Lesson 1 HTML

Documents

Transcript of Lesson 1 HTML