HTML(HyperText Markup Language.) HTML stands for HyperText Markup Language.

H yper T 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. It simply 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 order to 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 any page 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. These files do not require a PDF to excel converter and are pretty straightforward. More on text only files 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. Suppose you just typed a document in WordPerfect. If you choose REVEAL CODES from the VIEW 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 screen in 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 codes that 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 to indicate so with HTML tags. WordPerfect automatically puts the tags in for you. In HTML, you must 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 a programming 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). So HTML is the basic language for creating web pages on a website and eventually you will want your own website host to experiment with and to upload your web pages to.

DIFFERENT VERSIONS OF HTML HTML 1.0 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 for web 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 that time, 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 in other browsers. At about that time, an HTML working group, led by Dave Raggett, introduced the HTML 3.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 containing browser 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 develop common standards for the evolution of the World Wide Web, drafted the WILBUR standard, which later became known as HTML 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 new functionality, 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 very good job in implementing the many features of HTML 4.0. Unfortunately, Netscape has not kept pace. The latest version of Netscape Communicator still doesnot 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. XHTML 1.0 You would think that the next major version after HTML 4.0 would be HTML 5.0 and with it would 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 in browsers through cell/mobile phones, cars, televisions, plus a host of hand-held wireless devices and 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 to address 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 of standard to provide rich high quality web pages through these varied devices. XHTML became an officialW3C recommendation in January, 2000. XHTML is now a web standard and is the next generation of HTML.

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 extension tags, 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. These problems illustrate 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 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 standard language 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. While I have concentrated on the Netscape problem, the same arguments can also be stated for Explorer browsers for they too have their own extensions that are not supported by Netscape and other browsers such as Firefox

So what do we have here? Well, in summary, we have: 1. 2. 3. 4. 5. HTML 2.0 tags HTML 3.2 tags HTML 4.0 tags Netscape extensions 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.2 tags 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 extension tags 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 still means 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 if you are planning to make some money with your website, you certainly do not want to leave out any potential customers. You want the widest possible audience. We will also study a number of Netscape and Explorer extension tags because you should be aware of what they are. Like having the right appliance parts for the job, the same can be said of tags. 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 of the market at the expense of Netscape. Today, Explorer dominates the market and appears to be the browser of choice for most people. More on Netscape in the next section. NETSCAPE NO LONGER SUPPORTED In 1999, AOL acquired Netscape Communications Corporation. At one time, Netscape was regarded as the leader in web browsing. Soon after AOL's acquisition, the Netscape suite also became known as Mozilla. The first Mozilla-based Netscape browser was version 6 and it was released in 2000. AOL continue to support, develop and release new versions. There was also still much effort within AOL to revive Netscape Navigator. However, these efforts have not been successful in gaining market share from Microsoft's very popular Internet Explorer.

The bottom line is that due to time and cost, AOL has not been able to get the Netscape browser developed to a point many of its fans expect it to be. As a result, it is the end of the development of Netscape branded browsers. As of February 1, 2008, there is no more support for Netscape web browsers. That is, there is no more active product support for Navigator 9, or any previous Netscape Navigator browser. This includes Netscape v1-v4.x, Netscape v6, Netscape v7 Suite, Netscape Browser v8, and Netscape Navigator/Messenger 9. These browsers will still be around for long time yet as people will continue to use them and you can still download them. It is just that the support is no longer there. That is, there are no more updates on security patches and no more active product support. In other words, there will be no more security updates to keep us safe on the web with Netscape browsers. So what does all this mean? The Netscape team fully stands behind the great work being done by the Mozilla Foundation and recommends that you download Mozilla Firefox and give it a try. Mozilla Firefox is a current web browser that is very secure and it has the look and feel people have grown accustomed to with Netscape. You can even add Netscape themes and extensions. There are many surfers surfing with Firefox. It is a popular browser with many good features. If you are serious in creating a personal or business website or creating websites for others, you may wish to download a copy of Firefox. It is recommended that you view your web pages in both Explorer and Mozilla. Sometimes a web page can look great in one browser but not so great in another browser. So it is good to check your work in various browsers such as Explorer, Netscape and Firefox. You can download your free copy of Firefox from www.mozilla.com. Having said that the Mozilla Foundation supports Mozilla Firefox, now when I open Netscape I get a pop-up window that says "Netscape and AOL support migrating to the Flock browser. It also goes on to say in the popup window that Flock is secure, reliable... and fun. Like Firefox, the award winning Flock browser is also powered by Mozilla and built for the way you use the web today. Flock is the evolution of the same technology that Netscape was built on and is available in a variety of languages. It also states that the team that builds Netscape is largely still together and is the same team that brings you the Flock browser today. If you would like to learn more about the Flock browser or to download your own copy, visit the Flock website at www.flock.com. Note: These lessons address Internet Explorer, Firefox and Netscape. However, if you are using Flock, the results will be the same as in Firefox.

WHAT DO I NEED TO BEGIN DESIGNING A HOME PAGE? YOU NEED A FOLDER (also called a DIRECTORY) You should set up a folder or directory to hold only your HTML files (also called documents) for the web pages you are designing. Work in that folder only. If you are doing all these lessons, you may also wish to set up a separate folder to hold all my examples for testing in your browser. The best way to learn is by doing so when I give you an example or a problem for you to work on, be sure to try it out to see what it would look like on the web through your browser. You can then alter the example to experiment with different effects. In any event, you need some place to put your work. If you do not know how to create a folder, be sure to call someone who does know and can tell you how to do it. YOU DO NOT NEED TO BE CONNECTED TO THE INTERNET You can write and design your HTML pages (that is, your web pages) off-line. If all you are doing is designing and creating web pages, you do not need to go on the internet. If you have a regular telephone dial up connection, and there is only one telephone line in your house, there is no need to tie up the line.

YOU NEED A BROWSER Internet Explorer and Firefox are among today's most popular browsers for viewing web pages and for surfing the internet. Netscape Navigator (also called Netscape Communicator) is still being used by many surfers but, as stated in Lesson One, it is no longer supported by AOL. That is, there will be no more browser updates, updates on security patches, etc. There are other browsers also but they are not nearly as popular as Explorer and Firefox. In addition, today, web pages are being viewed in browsers through cell/mobile phones, cars, televisions, plus a host of hand-held wireless devices and communicators. YOU NEED A WORD PROCESSOR You need a simple word processor such as NotePad or WordPad. These simple word processors are also called text editors and are ideal for creating web pages. Now you can also use word processors such as WordPerfect or Microsoft Word or Works but they are not simple text editors. They include a lot of formatting which we do not want. For these and other reasons, many webmasters like using NotePad which can be found in the Accessories folder (also known as the Accessories "Group"). In Windows, for example, NotePad is found by clicking on "Start", then choosing "Programs" (or All Programs), then choosing "Accessories" and finally choosing NotePad. That is: Start --> Programs --> Accessories --> NotePad As we will see later in this lesson, there are good reasons for using a text editor such as NotePad for creating web pages. Sometimes the coding for a web page can become so big that it will no longer fit into NotePad. In this case, you will need to switch to another text editor to complete the page. When you are faced with this situation,WordPad is the answer. It allows for much larger files and is also located in the Accessories folder. You may wish to try WordPad sometime. It has a few more features than NotePad and so you may prefer to use WordPad instead of NotePad. From here on in I will be referring to NotePad as the text editor of choice. Of course if you wish, you can use any text editor or word processor. In summary, you basically: 1. 2. 3. 4. create your web page in a text editor such as NotePad (typing in all the text and tags) save your web page as an HTML file using any appropriate name load the HTML file into the browser to see how your web page looks and works switch back to NotePad to make any corrections, changes, etc.

YOU NEED TO HAVE BOTH YOUR BROWSER AND NOTEPAD ACTIVELY RUNNING To design a web page, you need to have BOTH your browser AND NotePad active at the same time. In other words, while you are working with one, the other is sitting there in the background. This way you can quickly SWITCH back and forth between them. If you do not know how to have both your browser and NotePad running at the same time, be sure to ask someone who does know.

PLACING THE NOTEPAD ICON ON YOUR DESKTOP You can have the NotePad icon placed directly on your desktop. This way you can click on the icon and instantly load NotePad without having to locate it through the Start menu. If you do not know how to do this, here are the steps.

1. First make sure that you can see the desktop or at least part of it. When you turn on the computer, the desktop is the first thing you see after the computer finishes booting. If you have another program covering up the desktop, then minimize or close it so that you can see the desktop. 2. Choose Start --> Programs --> Accessories. You will now see NotePad in the folder list. 3. Click with your right mouse button on the name NotePad. That is, right-click on NotePad. This will bring up another menu list. 4. From this menu list, choose Create Shortcut. 5. Go back to the Accessories folder and you will now see Notepad(2) in the list, likely at the bottom of the list. This time move the cursor over the name NotePad(2). Now click and hold down the left mouse button (do not release the button). Now drag the name Notepad(2) onto the desktop. That is, drag the shortcut Notepad(2) from the Accessories list onto the desktop. 6. You now have an icon on your desktop with Notepad(2) written below it. If you double click on this icon, NotePad immediately opens up. 7. You can now rename the icon to simply NotePad or Notepad by right-clicking on the icon and from the pop-up menu, choose Rename. You can then type in the name you want. 8. The above procedure can be used to place a shortcut on the desktop for any application. NAMING YOUR WEB PAGE When you save your web page for the first time, you need to give it a name. You not only have to give it a name but you also need to add a suffix (an extension) to the name. THE NAME: If you are not running at least Windows 95, your file name is limited to a maximum of 8 characters. Otherwise the name can be longer. Since most people today are using at least Windows 95, this is not an issue. It is strongly recommended that you do not use spaces in the file name. Browsers will replace the space with a coding such as %20 so that the name "my web page" will look like "my%20web%20page" which is confusing and does not look good. We do not want strange symbols in our file names and so it is best to avoid spaces in the name. THE SUFFIX: The suffix is an extension to the name and declares the kind of document that it is. In HTML, the suffix is either ".htm" or ".html". "Htm" or "html" tells the browser you are working with HTML files - that is, an HTML document. You must use ".htm" if you are not running Windows 95 or higher. Again, this is no longer an issue and so you can use either .htm or .html for the file extension. So if "homepage" is the name of the HTML document (your web page), you can have either homepage.htm OR homepage.html SAVING YOUR WEB PAGE (YOUR HTML FILE OR DOCUMENT) This section may be better understood when we do an actual example in the next lesson, but here is a summary on saving a web page. IF YOU ARE USING ONLY NOTEPAD, WORDPAD or a similar text editor:

Choose File from the menu bar, then from the drop down menu, choose Save As. In the Save As dialog window, make sure in NotePad that the Save as type box reads All Files. In the case of WordPad, it should be Text Document.

In the File name box, type in a suitable file name along with an extension (either .htm or .html). Click on OK and the file (the web page) is saved. In the case of WordPad you may be told that saving the file will remove all formatting. That is okay because we do not want any formatting saved with the file.

IF YOU ARE USING WORDPERFECT, WORD, WORKS (or any popular word processor): In lesson one, I gave an example in WordPerfect of what happens when you chose REVEAL CODES. In the lower half of the screen, you see your text all marked up with WordPerfect tags. If you need to review this, just click here on Lesson One. Well, it doesn't matter which word processor you use, it will have its own set of tags or codes which lets it know what the margins are, what is bolded, underlined, when the ENTER key has been pressed, and so on. If you save your HTML web page as a normal document file, all these little tags or codes are saved as well. In HTML, we don't want that. You must save your work asTEXT ONLY files. HTML browsers can read only text. If you don't save as TEXT ONLY, you will be saving a lot more than text. You will also be saving margin settings, bold, italics, indents, etc. When you are ready to save your HTML document or file, you must first choose SAVE AS ... from the FILE menu. Then, besides choosing a suitable file name, you must make sure to also choose TEXT ONLY, ASCII TEXT DOS, MSDOS TEXT, PLAIN TEXT, or just TEXT your processor will have one of these options or a similar option. You can then click on "OK" to save your HTML file. SERVER REQUIREMENTS FOR NAMING HOME PAGES When you design a website, generally you have a "home page" plus other pages that are linked to this home page. A home page is then your main page that contains information about you, your business or organization, plus a menu of choices for linking to your other pages or to other websites. For this section, I will use the Brant FreeNet as an example. What I say here is true for most, if not all, companies that provide internet services. One of my connections to the internet is through the Brant FreeNet, a non-profit organization. Now, anyone with Brant FreeNet who wants to set up a Home Page is strongly encouraged to name it index.htm. If you plan to have other pages connected to your home page, you can give it any name you like and with either the .htm or .html extension. But for the home page, it should be index.htm. The reason for this is that index.htm is the default name for any home page on line with the Brant FreeNet. This means that if someone is visiting one of your other pages, and would like to see your home page, all they have to do is erase the file name in the address location line, press the ENTER key, and your home page will be displayed. If you don't name your home page index.htm, the browser will not be able to locate your home page and the viewer will receive an error message. The same is true if you are visiting another web page anywhere on the World Wide Web (WWW). If you want to see a home page, just erase the name and you should be connected to the home page. For example, let's suppose one address from a web page is: http://www.bfree.on.ca/comdir/retire/buchanan/Lifelease.htm If you were to erase the file name in the address location line so that it looks like: http://www.bfree.on.ca/comdir/retire/buchanan/ you will be connected to their home page which is: http://www.bfree.on.ca/comdir/retire/buchanan/index.htm Each internet service provider or host has its own default file name for home pages. Some may state that it is to be index.htm. Others may state that it must be index.html and still others will allow it to be either index.htm or index.html. There may also be a few providers that have another name instead of index. If you do not know what you should name your home page, ask the internet company who is going to host your website. Also, the next time you are surfing the WWW, try the above method to see if you can connect to someone's home page.

LOADING YOUR WEB PAGE INTO YOUR BROWSER Once you have saved your web page (your HTML file or document), you need to SWITCH over to your browser which is running in the background. Once you activate your browser, choose File from the menu bar, and then choose Open or Open File or Open File in Browser (one of them should be in the File menu). You will then need to locate your web page, click on the file name and then click the OK button. Your HTML file will appear in the browser. You can only observe your file in the browser - you cannot edit in the browser. Once you have seen how your web page looks in the browser, you can then SWITCH back to Notepad to continue working and editing. NOTE: (1) If you want to LOAD an HTML file for the first time into Notepad, and the name does not show up in the correct folder in the dialog window, choose All Files (*.*) in the Files of type box and the name should then appear. In the case of WordPad, it must be All Documents (*.*). Click on the name and then on the Open button. (2) If you use a word processor other than Notepad or WordPad, you may first need to CLOSE the HTML file before it can be loaded into your browser. With Notepad and WordPad this is not necessary.

HTML TAGS HTML works in a very straightforward manner. You type in your text and your tags. To get large print, centered text, bold text, text in italics, indented sentences, colored text, etc., is nothing more than inserting tags around your text. These tags are more accurately called ELEMENTS and you should think of these elements as describing the meaning of the text they contain, rather than how the enclosed text should be displayed. This concept is called content-based markup, as opposed to presentational markup. We will get more into this in Lesson Four when we study web page design. Because we don't want the tags (elements) to appear in the browser, we need a way to tell the browser that something is a tag - and this is easy to do. To tell the browser that something is a tag, you simply place "less than" and "greater than" symbols around them. The LESS THAN symbol is "<" and the GREATER THAN symbol is ">". These symbols are also called "Angle Brackets". Thus we have an opening angle bracket "<" and a closing angle bracket ">" around each tag. I have also heard them called "pointed brackets".

<BR>, <P> and <HR> TAGS <BR> <BR> tells your browser to go to the beginning of the next line. BR stands for line BReak. <BR> acts in the same way as the ENTER key on your keyboard. When you press the ENTER key, the cursor goes to the beginning of the next line. With <BR>, the browser is also told to go to the beginning of the next line. Remember that when you save an HTML document, you are saving it as TEXT ONLY which means that no codes are saved and so your browser will not know when to end a line and continue on to the next line. The <BR> tag does this for you. <P> <P> for Paragraph tells your browser to insert a blank or empty line and then begin a new line (a new paragraph). <BR> tells the browser when a line has ended while <P> tells the browser to leave a blank line and begin a new paragraph.

<HR> <HR> puts a line across the page. HR stands for Horizontal Rule. The two lines you see below were put there with <HR> tags.

<HTML> and </HTML> tags Before we can try out the <BR>, <P>, and <HR> features, we first need to learn how to set things up properly in an HTML document (or file as it is also called). Every HTML document should first be declared that it is in fact an HTML document. When the document is completed we also need to indicate this. You do this with the tags <HTML> and </HTML>. Recall that HTML stands for HyperText Markup Language which is the language of web page design. <HTML> is the beginning tag and </HTML> is the ending tag. The forward slash before the tag (</ >) cancels the effect of the tag. This is true for all tags that affect text. Thus <HTML> tells the browser that what follows is an HTML document and </HTML> tells the browser that the HTML document is completed. You can therefore think of the <HTML> and </HTML> tags as "containers", containing the entire HTML document. Therefore HTML is called a container element. You should use the HTML element for each of your web pages.

CORRECT USE OF TAGS We have "beginning" or "opening" tags (such as <HTML>) and we have "ending" or "closing" tags (such as </HTML>). Many elements consist of an opening tag and a closing tag. An element that has an opening and closing tag is referred to as a container element because anything contained between these tags are affected by the element. Closing Tags cannot be placed just anywhere. Use the "Last In = First Out" principle or "LIFO". That is, the "Last" tag "In" must be the "First" tag "Out". Another way of stating this is that the last tag activated must be the first tag terminated. An example of a correct sequence of tags is: <tag1><tag2> statements </tag2></tag1> In this example, <tag1> is activated first, and then <tag2>. Thus <tag2> must be terminated first with </tag2> followed by the termination of <tag1> (</tag1>). In other words, tags are closed in reverse order to the way they are opened. Thus the first tag opened must be the last tag closed. An example of an incorrect placement of tags is: <tag1><tag2> statements </tag1></tag2> In this example, the last tag opened (<tag2>) is not the first tag closed. That is, these tags overlap. </tag2> must come before </tag1>. Therefore this example does not satisfy the LIFO principle. Container tags cannot overlap each other. If you do not place tags properly, your web page simply won't work. The following is another example of a correct use of tags:

<tagA><tagC><tagB><tagD> statements </tagD></tagB></tagC></tagA> <HEAD>, </HEAD>, <TITLE>, </TITLE>, <BODY> and </BODY> tags In this section we will study the HEAD, TITLE and BODY container elements and we will learn about these tags (most people still refer to "elements" as "tags") by studying the following web page (HTML document). It is good to be actively involved in each lesson, so please SWITCH to NOTEPAD, and type in the following HTML web page. After you have typed it in, you will save the document and then view it in your browser. Here is the web page. Please type: <HTML> <HEAD> <TITLE>WEB PAGE DESIGN - BASIC TAGS</TITLE> </HEAD> <BODY> Hi, my name is Darshana.<BR> This is my first attempt at a Web page.<HR> Here is a riddle for you. <P>Why did the lobster blush?<HR> Because it saw the salad dressing.<BR><BR><HR> </BODY> </HTML> Before we study this web page, let's save it. Here are the steps if the coding was typed into NotePad: 1. From NotePad's File menu, choose Save As. This will display the Save As dialog window. 2. In the Save As dialog window, click into the Save as type box and choose All Files. 3. In the File name box, type in the name riddle.htm. You can of course enter any suitable name and also the extension .html instead of .htm. 4. Everything else can be left as is and so click on OK. The web page is now saved. Now lets see what the web page looks like in your browser. Here are the steps: 1. Open your browser. 2. From the File menu choose Open or Open File (whatever your browser says). 3. Browse to the folder where the web page is saved. When you find the file, click on the name and then click on Open. If you get an Open window, click on OK. You should now see your riddle web page. This is what you should see in your browser: Hi, my name is darshana. This is my first attempt at a Web page.

Here is a riddle for you. Why did the lobster blush? Because it saw the salad dressing.

DESIGNING YOUR WEB PAGES Just how should you design your web pages? Well, you should not design your pages only for appearance. You also need to design your pages for content. For example, you could add color to certain portions of text or you can highlight certain words with color to make them stand out. In your browser, it may look great. However, many people still use browsers that do not support coloring portions of text. So while it looks great in your browser, it will not give the same looks in other browsers, and text that you thought were highlighted by color will not be highlighted in these other browsers. Color is used to change the appearance of text. If a browser can't perform the appearance change, it has no way to determine an alternative. As a result the color attribute is simply ignored. Also, you may be able to fit a heading neatly on one line in your browser while in another browser, the font size could be a little bigger and the heading will not fit on one line. Or the reverse could be true, a heading may not fit on one line in your browser, but in another browser with a little smaller font size, it will fit into one line. Thus the appearance of the heading in your browser could be different in another browser. Also keep in mind that some browsers and servers do not support graphics. A user also has the option of turning off graphics to speed up the loading of web pages. Of course we still want our web pages to be pleasing to the eye but we need to keep in mind that how something looks in one browser could look entirely different in another browser. One person told me how surprised she was to see her web pages look so differently in another browser. She now designs her pages with this in mind. Consider this example: Suppose you want to have something printed by the browser in italics to set it apart from the rest of the text. Using the italics tag, you could tell the browser to "print these words in italics". But what if someone's browser does not support the italics tag? The browser will simply not be able to perform the requested "appearance" change and the tag will be ignored. The italics tag was originally a Netscape extension tag that was not recognized by a number of other browsers. Instead, it would be better to tell the browser to "emphasize" the text through the "emphasis tag". In most browsers, this would be italics but it could also be rendered as something else. In any event, the text will be emphasized in some manner. The same is true for bolding text. If you tell the browser to bold a portion of text to make it stand out from the rest of the text, you are assuming the browser will recognize the "boldface" tag. The boldface tag was also originally a Netscape extension tag and so not recognized by a number of browsers. Instead, it would be better to tell the browser to "strongly emphasize" the text. In most browsers this will be boldface, but it could also be something else. Now with the passing of time, browsers today do support the italics and bolding tags but there are still a number of other tags supported by some browsers and not by others. That is, there are still a number of tags out there that are browser specific. That is why you sometimes see a statement such as "This web page is best viewed in Internet Explorer." The "emphasis" and "strong emphasis" tags are "content based" markup tags and the above examples illustrate why you should use "content based" markup tags to mark up your text. Content based markup allows for browser independence. Knowing the meaning of a piece of text through a content based tag allows a browser to pick the best way possible to display the text on the platform it is running. Tags that are based on content and not on appearance are called LOGICAL TAGS. You are encouraged to use logical tags because the browser can then pick the best way to display the text on the screen.

If all this sounds too confusing, don't quit on me. Just follow through on the following examples involving logical tags. It should all become clear. Then I would suggest you come back and read again this introduction on "Designing Your Web Pages". HEADER TAGS Headings are controlled by HEADER tags. HEADER tags are logical tags and used extensively in HTML documents to display headings. HEADER tags not only make your headings larger (or smaller), they also bold the headings at the same time. There are only six HEADER tags and they range from H1 to H6. H1 produces the largest size heading and is called the "level 1 heading". H6 produces the smallest size heading and is called the "level 6 heading". To compare the different levels of headings, SWITCH to NOTEPAD and type in the following HTML document (this will also allow you to experiment with the document): <HTML> <HEAD> <TITLE>HEADING LEVELS</TITLE> </HEAD> <BODY> <H1>THIS IS H1.</H1> THIS IS NORMAL SIZE. <H2>THIS IS H2.</H2> THIS IS NORMAL SIZE. <H3>THIS IS H3.</H3> THIS IS NORMAL SIZE. <H4>THIS IS H4.</H4> THIS IS NORMAL SIZE. <H5>THIS IS H5.</H5> THIS IS NORMAL SIZE. <H6>THIS IS H6.</H6> THIS IS NORMAL SIZE.<HR> </BODY> </HTML> Now SWITCH to your browser and load the document. This is what you should see in the browser window: THIS IS H1. THIS IS NORMAL SIZE. THIS IS H2. THIS IS NORMAL SIZE. THIS IS H3. THIS IS NORMAL SIZE. THIS IS H4. THIS IS NORMAL SIZE.

THIS IS H5. THIS IS NORMAL SIZE. THIS IS H6. THIS IS NORMAL SIZE.

Note the following points: 1. <H1> gives the largest size heading while <H6> gives the smallest size heading. 2. In most browsers, the HEADER tags print the headings in boldface. A Level 1 heading (H1), because it is the largest heading, is considered to be the most prominent or most important heading. The Level 2 heading (H2) is the second most important heading. That is, it is more prominent than a Level 3 heading (H3) but less prominent than a Level 1 heading. 3. Good HTML form dictates that HEADER tags should be used in hierarchical order. Don't jump all over the place with your heading levels. For example, if you use a Level 2 heading for a title or heading, then the next size to use for a sub-title would be a level 3 heading. Study the above HTML document again and answer the following problems. The answers are given at the end of this lesson. Problem 1: Which heading size is closest to the normal size? Problem 2: Compare the document file with the results in your browser. Something does not seem to add up. From what you have learned so far in these lessons, state some of the inconsistencies. These will be fully explained in the answer section. EMPHASIZING TEXT There are two ways to emphasize text that I want to introduce here. These were alluded to at the beginning of this lesson under "Designing Your Web Pages". One is called ITALICS and the other is called BOLDFACE. Let's study both of them with the following example, which will also include the centering of the heading. Please SWITCH to NOTEPAD and type in the following HTML document: <HTML> <HEAD> <TITLE>OUTDOOR LIVING - ONTARIO</TITLE> </HEAD> <BODY> <H2 ALIGN="CENTER">OUTDOOR LIVING IN ONTARIO</H2> <H3>POINTS OF INTEREST</H3><HR> <P>Northern Ontario: <P><STRONG>Five Mile Lake Provincial Park</STRONG> <P><EM>1.5 square miles.</EM> Camping, fishing (<EM>walleye, northern pike, brook trout</EM>), canoeing, self-guided nature trails. <P><STRONG><EM>Recommended</EM></STRONG> <HR> </BODY></HTML> Now load the document into your browser and your web page should look like the following:

OUTDOOR LIVING IN ONTARIO POINTS OF INTEREST

Northern Ontario: Five Mile Lake Provincial Park 1.5 square miles. Camping, fishing (walleye, northern pike, brook trout), canoeing, self-guided nature trails. Recommended

<EM> = EMPHASIZE TEXT <EM> is used to emphasize text. It is a logical tag and so describes the meaning of the text to be displayed rather than how the text is to be displayed. In most browsers, the meaning is italics. However, if the browser doesn't support italics or the viewer changes the meaning, the browser will pick the best alternative way to display the text on the screen. <STRONG> = STRONGLY EMPHASIZE TEXT <STRONG> is also a logical tag. It is used to strongly emphasize text. <STRONG> is distinct from <EM>. In most browsers, STRONG is identical to boldface. If a browser does not recognize boldface or if the viewer changes the meaning of STRONG, then the browser will pick the best alternative from the platform it is running on. Using <B> for Boldface or <I> for Italics (Original Netscape Extension Tags) <STRONG> is accepted by all browsers as a way of strongly emphasizing text which in most cases is boldface. Instead of the <STRONG> and </STRONG> tags for strongly emphasizing text, you will sometimes see <B> and </B> for bolding text. While <STRONG> is a "Logical Style Command", <B> is not. <B> is a "Physical Style Command". A physical style command cannot be rendered differently. Therefore if a browser does not accept the <B> tag, then your text will simply not be bolded as the browser has no alternative way to display them on the screen. The same reasoning is also be applied for using the tag <I> to print in italics instead of the <EM> tag. Now if for some reason you want to ensure only italics or boldface and nothing else, then use the italic font <I> or the boldface font <B>. INTRODUCING TABLES I like tables and make good use of them. My main home page uses a table to point to each lesson and in Lesson Ten, I used a table to print all the colors and their codes. Tables are great for summarizing large amounts of information and for structuring data. Tables allow viewers to find what they need quickly and easily. Tables are part of HTML 3.2 specifications and most of the popular browsers now support them. This lesson is for those of you who want to incorporate a table into a web page and we will begin with a basic table and progress from there. In the next lesson we study some of the more advanced features of table design.

A BASIC TABLE Here is a basic table. Note that there is no border around the table and that there are no lines separating the data in the table. VOLUNTEER SCHEDULE 9 A.M. 12 P.M. 2 P.M. Mary Marcia NURSERY John SECURITY Kimberly George Ken Nancy Adam TICKETS Jacob Note that even though there are no lines to separate the items in the table and that some names are longer than others, everything still nicely lines up. I am going to build on this example and I would like you to follow along with me and also to do some of your own experimenting. So, SWITCH to NOTEPAD and type in the following HTML document that gives the above table. Once you have typed it in, SAVE the document, SWITCH back to your browser, and load the document to see the table. An explanation of the commands is given below the document. <HTML> <HEAD> <TITLE>VOLUNTEER SCHEDULE</TITLE> </HEAD> <BODY> <H3 ALIGN="CENTER"> <TABLE> <CAPTION><STRONG>VOLUNTEER SCHEDULE</STRONG></CAPTION> <TR> <TD> <TD>9 A.M. <TD>12 P.M. <TD>2 P.M. <TR> <TD><STRONG>NURSERY</STRONG> <TD>John <TD>Mary <TD>Marcia <TR> <TD><STRONG>SECURITY</STRONG> <TD>Kimberly <TD>George <TD>Ken <TR> <TD><STRONG>TICKETS</STRONG> <TD>Jacob <TD>Nancy <TD>Adam </TABLE></H3> </BODY></HTML>

THE BORDER ATTRIBUTE Now SWITCH to NOTEPAD and change the opening TABLE tag to: <TABLE BORDER="1"> After you have saved the change, load the web page into your browser. This is what you should see:

VOLUNTEER SCHEDULE 9 A.M. 12 P.M. NURSERY SECURITY TICKETS John Kimberly Jacob Mary George Nancy

2 P.M. Marcia Ken Adam

The table now has a border around the outside and each cell is separated from the other cells with borders. In some low level browsers, there will be no border around the empty cell. "Cells" are the individual rectangles in the table. The "1" in BORDER="1" is called the "value" of the BORDER attribute and here it specifies a border around the table 1 pixel wide. The quotation marks around the "1" are optional. If you want to have a wider border, then change the "1" to a bigger number. For example, change the "1" to a "10" so that we have a border of 10 pixels. Do this now to see the effect. Below is the output with a border width around the table of 10 pixels. Try different pixel widths to see if there is one you would like to use in your tables. Note: in some low level browsers, a wider border will only be placed on the right side of the table and on the bottom of the table. In other words, there will be no wide border around the top and left side of the table. VOLUNTEER SCHEDULE 9 A.M. 12 P.M. NURSERY SECURITY TICKETS John Kimberly Jacob Mary George Nancy

2 P.M. Marcia Ken Adam

The default value for BORDER is 1. Therefore <TABLE BORDER> would have a border 1 pixel wide. The HTML 3 draft did not include the values for the BORDER attribute and so browsers which use this table model might draw a border around your table for BORDER="0". Try BORDER="0" to see what happens to the table border. Note that the empty cell is different in appearance from the rest of the cells. If you want it to look like the rest of the cells, just place the space character in the cell. The invisible space character is the ampersand command "&nbsp;" and was studied in Lesson Five. Let's do this now. Go back to our HTML document in NOTEPAD and change the first <TD> tag that creates the empty cell to: <TD>&nbsp; Save this change, load the document into your browser and note that the browser now shows the empty cell with the same appearance as a non empty cell.

VOLUNTEER SCHEDULE 9 A.M. 12 P.M. NURSERY SECURITY TICKETS John Kimberly Jacob Mary George Nancy

2 P.M. Marcia Ken Adam

CELL SPACING and CELL PADDING Change the TABLE command in our HTML document to include the CELLSPACING attribute as in (also change the border value back to "1"): <TABLE BORDER="1" CELLSPACING="5"> The quotation marks around the value "5" are also optional. Now when you load this document into your browser, you should see:

VOLUNTEER SCHEDULE 9 A.M. NURSERY SECURITY TICKETS John Kimberly Jacob 12 P.M. Mary George Nancy 2 P.M. Marcia Ken Adam

Note that CELLSPACING affects the amount of spacing between cells. That is, the value in the CELLSPACING attribute indicates how many pixels of white space there should be between individual cells. Try different values for different effects. If you do not include a value, the default cell spacing value is 2 pixels. Note: in some low level browsers, the borders around adjacent cells will also be separated by the same number of pixels. This means that the borders will not look continuous. Tables will look their best in all browsers if you use a CELLSPACING value of "0". Now let's add the CELLPADDING attribute and change the cellspacing attribute to "2". Change the TABLE command to: <TABLE BORDER="1" CELLSPACING="2" CELLPADDING="5"> and this is what you should see:

VOLUNTEER SCHEDULE 9 A.M. 12 P.M. 2 P.M.

NURSERY SECURITY TICKETS

John Kimberly Jacob

Mary George Nancy

Marcia Ken Adam

TABLE HEADINGS (<TH>) and the "WIDTH" ATTRIBUTE The Table Header tag is often used when the cell's contents is a heading or label. For example, in our table, The times (9 A.M., 12 P.M., 2 P.M.) are headings for the columns, while NURSERY, SECURITY, and TICKETS are headings for the rows. To indicate these items as headings, you can use the Table Header tag (<TH>) instead of the Table Data tag (<TD>). A cell that contains a heading is called a "Header Cell". To see the effect of the header tag, change our HTML document to look like the following (I also changed the BORDER to "3", the CELLSPACING TO "0" and CELLPADDING to "3" - just so you can see the different effects of these attribute values on the table): <HTML> <HEAD> <TITLE>VOLUNTEER SCHEDULE</TITLE> </HEAD> <BODY> <H3 ALIGN="CENTER"> <TABLE BORDER="3" CELLSPACING="0" CELLPADDING="3"> <CAPTION><STRONG>VOLUNTEER SCHEDULE</STRONG></CAPTION> <TR> <TD>&nbsp; <TH>9 A.M. <TH>12 P.M. <TH>2 P.M. <TR> <TH>NURSERY <TD>John <TD>Mary <TD>Marcia <TR> <TH>SECURITY <TD>Kimberly <TD>George <TD>Ken <TR> <TH>TICKETS <TD>Jacob <TD>Nancy <TD>Adam </TABLE></H3> </BODY></HTML> This is what your table should now look like:

VOLUNTEER SCHEDULE 9 A.M. NURSERY SECURITY TICKETS John Kimberly Jacob 12 P.M. Mary George Nancy 2 P.M. Marcia Ken Adam

Note the headings in the header cells are strongly emphasized (normally in bold). For this reason I removed the STRONG tags from all the row and column headings. They became redundant. Note also that each heading is centered in its cell (for example, note how the label TICKETS is centered in the cell). This will become more noticeable in the next example. If you have more than one row in a cell, the headings will also be centered vertically. Now change the TABLE tag to include the WIDTH attribute. Change the TABLE tag to: <TABLE BORDER="3" CELLSPACING="0" CELLPADDING="3" WIDTH="100%"> Now load the web page and this is what you should see:

VOLUNTEER SCHEDULE 9 A.M. NURSERY SECURITY TICKETS John Kimberly Jacob Mary George Nancy 12 P.M. Ken Adam 2 P.M. Marcia

The table has been expanded to the width of the browser screen (100 per cent of the width of the screen). If this did not happen, then your browser does not recognize the WIDTH attribute in this situation. Notice again that the headings are emphasized and centered but the data in the cells are not centered. You can use any suitable percentage for the width or you can specify the width in pixels. If your browser did not accept the WIDTH attribute in the above example, try it again but specify the width in pixels this time. For example, try WIDTH="600" (no %) and see what happens. Specifying the width in pixels will give an exact width of the table which can't be changed. Specifying the width as a percent of the current screen is preferred because the table will be expanded or compressed to fit the width of the viewer's browser screen. Therefore using a percent will allow the table to be changed if the window is resized. Using pixels for the width means that if the viewer resizes the window to something smaller than the width you have specified, the view will not be able to see the entire table. PLACING AN IMAGE IN A CELL To place an image in a cell, you follow the same rules as for placing an image on a web page. The following example places a border 10 pixels wide around an image which is placed in a single cell table and also makes the image a link to my home page.

The BODY of the HTML document that gives this example is: <H3 ALIGN="CENTER"> <TABLE BORDER="10" CELLPADDING="0" CELLSPACING="0"> <TR> <TD><A HREF="index.htm"><IMG SRC="cross1.gif" ALIGN="CENTER" ALT="cross" WIDTH="90" HEIGHT="120" BORDER="0"></A> </TABLE></H3> Experiment with different attribute values. Add some cell padding and cell spacing. Place a border around the image as well as a border around the table, or experiment with the ALIGN attribute as in ALIGN="RIGHT" and ALIGN="LEFT" or remove the ALIGN attribute altogether. You can learn a lot from experimenting. For example, if you do not want the image to be a link, just remove the anchor tags and the HREF attribute as in: <TD><IMG SRC="cross1.gif" ALIGN="CENTER" ALT="cross" WIDTH="90" HEIGHT="120" BORDER="0"> If you use images in a table, be sure to specify the WIDTH and HEIGHT attributes in the IMG tag. This allows the browser to lay out the table in advance, so it can draw the table and place the text above and below the table before the image is loaded. Not using the WIDTH and HEIGHT attributes can cause unnecessary delays in displaying your web page. DELIVERY HTML documents can be delivered by the same means as any other computer file. However, they are most often delivered either by HTTP from a web server or by email. HTTP The World Wide Web is composed primarily of HTML documents transmitted from web servers to web browsers using the Hypertext Transfer Protocol (HTTP). However, HTTP is used to serve images, sound, and other content, in addition to HTML. To allow the Web browser to know how to handle each document it receives, other information is transmitted along with the document. This meta datausually includes the MIME type (e.g. text/html or application/xhtml+xml) and the character encoding (see Character encoding in HTML). In modern browsers, the MIME type that is sent with the HTML document may affect how the document is initially interpreted. A document sent with the XHTML MIME type is expected to be well-formed XML; syntax errors may cause the browser to fail to render it. The same document sent with the HTML MIME type might be displayed successfully, since some browsers are more lenient with HTML.

The W3C recommendations state that XHTML 1.0 documents that follow guidelines set forth in the recommendation's Appendix C may be labeled with either MIME Type. The current XHTML 1.1 Working Draft also states that XHTML 1.1 documents shouldbe labeled with either MIME type. HTML e-mail Most graphical email clients allow the use of a subset of HTML (often ill-defined) to provide formatting and semantic markup not available with plain text. This may include typographic information like coloured headings, emphasized and quoted text, inline images and diagrams. Many such clients include both a GUI editor for composing HTML e-mail messages and a rendering engine for displaying them. Use of HTML in e-mail is controversial because of compatibility issues, because it can help disguise phishing attacks, because it can confuse spam filters and because the message size is larger than plain text. Naming conventions The most common filename extension for files containing HTML is .html. A common abbreviation of this is .htm, which originated because some early operating systems and file systems, such asDOS and FAT, limited file extensions to three letters. HTML Application An HTML Application (HTA; file extension ".hta") is a Microsoft Windows application that uses HTML and Dynamic HTML in a browser to provide the application's graphical interface. A regular HTML file is confined to the security model of the web browser's security, communicating only to web servers and manipulating only webpage objects and site cookies. An HTA runs as a fully trusted application and therefore has more privileges, like creation/editing/removal of files and Windows Registry entries. Because they operate outside the browser's security model, HTAs cannot be executed via HTTP, but must be downloaded (just like an EXE file) and executed from local file system.