HTML HTML stands for HyperText Markup Language. HYPER 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 Internet Explorer, you can in fact, go "all over the place". 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. 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". 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. 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 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. 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. 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 official W3C recommendation in January, 2000. XHTML is now a web standard and is the next generation of HTML. 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". 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> <HTML> and </HTML> tags The HTML element was discussed above in detail so here is a brief summary as it relates to this web page example. The first line in the coding reads <HTML>. It tells the browser that what follows is an HTML document. It is called the opening HTML tag. The last line in our coding reads </HTML>. It tells the browser that the HTML document is finished. It is called the closing HTML tag. These opening and closing HTML tags make up the HTML element of our web page.

<HEAD> and </HEAD> tags Next comes the HEAD element which, like the HTML element, also has an opening and closing tag. Each web page must have the HEAD element. Statements (or tags) that give information to a person visiting your website, or information such as those needed for a Search Engine are placed between the <HEAD> and </HEAD> tags. Thus the HEAD part of a document provides information about the document. You do not see this information displayed in your browser. It can be seen by choosing Source, or Page Source or Document Source from the View menu of your browser (one of these choices should be in the browser's View menu). The HEAD tag must not contain any text or normal markup tags. If it does, the browser will assume that it is in the BODY part of the document (studied below). The HEAD element can actually be omitted, but only if you group all the tags that go in it at the top of the document. To avoid any potential problems, I would suggest that you include the HEAD element in your own documents. If fact, the latest web standard (XHTML) demands that it be included. If you go back to my home page and choose Source from the View menu, you will see other statements between the <HEAD> and </HEAD> tags. Take me back there now. We will study these statements in a future lesson when we learn how to get your web pages on the World Wide Web. <TITLE> and </TITLE> tags One of the statements that must be included between the <HEAD> and </HEAD> tags is the TITLE of your web page. The title in our example (line 3) is "WEB PAGE DESIGN - BASIC TAGS". Notice that this title is placed by the browser at the very top of the screen - above the menu choices. The TITLE of your web page must occur between the <TITLE> and </TITLE> tags and you are only allowed one TITLE element per page. The information you provide in the title is also used to label the bookmark entry for your web page. That is, when a visitor bookmarks your site (adds it to their favorites list), it is the title that appears in the list. Most search engines also use the title in search engine results. Therefore you should take time to make up a good descriptive title for each of your web pages. You will notice that each of my lessons has its own title that describes the general content of the lesson. In general, the title should be short. Most search engines insist on a short title and a general rule of thumb is no more than 75 characters including spaces. Because we do not want the title to be displayed on the browser screen, the <TITLE> and </TITLE> tags must be placed between the <HEAD> and </HEAD> tags. <BODY> and </BODY> tags After the title comes the main body of your Web page. It contains all the text and tags. It is the part that will be displayed on the browser screen. Thus the BODY element contains the actual contents of the document. Of course the tags will not be displayed on the browser screen. The tags only tell the browser how to display the information. The body of each of your Web pages is declared through the BODY element. <BODY> tells your browser that what follows is to be the body of the Web page and </BODY> tells the browser that the body part of the page has ended. Thus the <BODY> and </BODY> tags are container tags, containing the body of your document. The BODY tag can actually be left out. If you place all the HEAD elements first, the browser will know where the actual body begins. I believe it is still a good rule to include the BODY tag - and the latest web standard (XHTML) demands that it be included. I also like the idea of declaring things for what they are. This way there will be no confusion for any HTML version that relies on these declarations. Now here is the above HTML document again only this time I numbered the lines in the BODY element for discussion purposes. Below the coding are the results once again when viewed in the browser. Below the results is a discussion of the BODY part of the document and some questions for you to answer. <HTML> <HEAD> <TITLE>the title or name of your page goes here </TITLE> </HEAD> <BODY> . . all your web page work goes here in this section . . </BODY> </HTML>