|
| H T M L |
|
| HyperText Markup Language |
|
|
 |
|
| This document takes 25 to 35 minutes to read |
|
|
HTML is the backbone of the Internet. Different specifications (such as XML) will come and go, but HTML and its related specifications are here to stay. HTML is a necessity when working with the World Wide Web on any level, whether you are a professional Web Developer or a weekend warrior. HTML gets the job done. This tutorial was written with the idea to cover everything possible, from the ground up. HTML is the starting point, so here we go.
Before we begin creating HTML markup code, there are a few bases we have to cover. These bases cover things such as document location and referencing, methods of navigation, image types, code editors, and the HTML document itself. We’ll begin with an explanation of the types of referencing your links will use.
Where is it?
In order to understand how to find the document you created and to provide accurate linking information, it is critical that you understand how information is addressed on the Internet. The basic addressing form on the Internet is the Uniform Resource Locator (URL) method. Basically, the URL of a document is its location on the Internet. There are two different ways to address a file or link, those ways being the Relative and Absolute URLs.
The Absolute URL
An absolute URL is the complete address of a file. It contains all the information needed to find a resource on the Internet. That is, it takes the form of a complete URL statement. Examine the below example of a complete (absolute) URL.
https://www.WalkTheGeek.com/start/index.html
The statement above references a file named index.html in the folder 'start' on the WalkTheGeek.com domain, on the World Wide Web (WWW). The https:// statement tells you that the file is of type Http, which stands for Hyper Text Transfer Protocol. Every Html document you access on the Internet will be transferred using this transfer method. There are other types of file transfer available, but for the time being we'll concentrate on this method.
The Relative URL
A relative URL usually contains only the file name of the document or resource you wish to retrieve. The relative URL is used to retrieve a file that resides in the same folder or server as the Html document you've just loaded. Examine the below example to get a feel for what a relative URL is. We'll assume that this URL is a link from an Html document that resides in a folder which is one level above the 'start' folder.
/start/index.html
The referenced file is still index.html in the folder 'start', but the domain and transfer protocol have been left out. The document that index html will have been referenced from would be one folder level above 'start'. Notice that a slash was used before 'start'. This is used to tell you and your browser that the file index.html is in the folder 'start', which is one level below the folder that the original document was in. Examine another example of a relative URL.
index.html
This relative URL tells you that the file being referenced, which is again index.html, is in the same folder as the document which the link was started from. Notice that no slashes were used, only the filename. This is because the original file and the file being referenced (index.html) reside in the same folder.
|
|
|
|
Of Elements, Attributes, and Event Handlers
Within your Html document are three major types of statements, those three being Elements, Attributes, and Event Handlers. Used together, there are no limits to the content and functionality you can incorporate into your web page. The statement below is a BODY Element with link color attributes and an onLoad Event Handler. See the discussion below the example for a more in depth explanation of each.
<BODY VLINK="Red" ALINK="Blue" onLoad="JScriptFunction() ; return true">
Elements
The Element is the basis of everything you'll do in Html. For the purpose of discussion, we'll use the BODY Element in our example. Each Element is enclosed in less-than (<) and greater-than (>) characters. The opening Element is <BODY>. The closing Element, </BODY> (which is not shown), has a slash in it which indicates the end of the BODY Element instructions.
Attributes
The attribute is an extra specification that defines the finer behavior of the element the Element has been stated for. Some extra information the attribute of a Element provides are a NAME, alignment information, and coloring. You'll learn more about attributes as we explore the Html language. In the above example, the VLINK and ALINK attributes are for the coloring of a link that has been visited (VLINK), and an active link (ALINK). Almost every attribute used has the name of the attribute followed by an equals sign (=). The value itself is enclosed within quotes after the equals sign. In the above example the values attributes are 'Red', and 'Blue'.
Event Handlers
The event handler in the above example is the onLoad event handler. By 'onLoad' we mean that when the document loads, the value in quotes will be executed. That is, the JavaScript function that has been assigned the name JScriptFunction() will be executed when the page has finished loading into the browser. A JavaScript function can be recognized by the opening and closing brackets after the function name. There is close to fifty different event handlers that can be used within your document. More will be said on that in a later chapter. For now, all you need to know is the general functionality of an event handler so the following examples and discussions will make sense and the learning process will be easier.
The HTML Document
Html documents are essentially text files that point to the location of images, sounds, and other data. Your browser reads these files and displays the content according to the rules and instructions you set within the text. This process is known as rendering. The browser reads the text through a browser component known as a rendering engine and displays the instructions accordingly. There is a very detailed and specific way to present these instructions, which is what this book is all about. The structure of an Html document is fairly simple and intuitive, and is common across the vast expanse of the Internet.
The Html document is divided into two major parts - the HEAD and the BODY. The practice is to place formatting information and instructions within the document HEAD and the content of the document within the BODY. Each are nested within the opening and closing HTML Elements. To illustrate this, examine the document example below.
Line 1 - <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Final//EN">
Line 2 - <HTML>
Line 3 - <HEAD>
Line 4 - <TITLE>Document Example<TITLE>
Line 5 - </HEAD>
Line 6 - <BODY>
Line 7 - Document content goes here
Line 8 - </BODY>
Line 9 - </HTML>
You see now the basic components of the Html document. This is where you'll start for every document you make. An infinite variety of configurations can be gleaned from this simple jumping point. We'll now examine the individual components of the above document. It should be noted that you wouldn't include the line numbers in your actual Html document; it is used here only for the example.
Line 1
On line 1 you see a cryptic and slightly unintelligible statement. This is the Html way of specifying the version of Html to be used while rendering the document content. In the earlier releases of the Html language this was changing for every version dreamed up. Since the Html language is now complete, this is the only statement you need to know. All Html documents are started with this statement. The !DOCTYPE HTML PUBLIC phrase at the beginning of the statement tells the browser that this is a document of type Html, which is available for public use. That is, every computer on the internet. The wording directly after states that the Html code conforms to the W3C (World Wide Web Consortium) specifications. The 'DTD HTML 4.0 Final' portion tells the browser that the version of the language being used is the final draft of the language, HTML version 4. Finally, the EN states that the content of the document is written in the English language.
Line 2 and 9
These lines tell the browser that the text between is the Html content and instructions to be used to render the page.
Line 3 and 5
These lines are known as the document HEAD. Between these two Elements, you'll place formatting information that will be used for the entire document, such as font type, color, and size.
Line 4
On line four you'll see the opening and closing TITLE Elements. This Element set is used to display a title of your choosing on your browser's title bar, the text given being 'Document Example'. The title bar is the blue stripe at the top of your browser window which probably has something written on it right now. The title content is placed within the opening (<TITLE>) and closing (</TITLE>) Elements, describing the content of your page or displaying your web site name.
Line 6 and 8
This is region is known as the document BODY. In the document BODY are the instructions and content you wish to display. The BODY may be as large or as small as you like, depending of course on how much content you wish to display.
Line 7
This is the document content region. Place anything you like here. Your imagination is your only limit.
|
|
|
|
The BODY of Your Document
The main content portion of your future documents is contained within two Elements - the opening (<BODY>) and closing (</BODY>) Html BODY Elements. Everything that is to be displayed as your document content is nested within these two Elements. There are many attributes that would prove invaluable that you know now, at the beginning of the discussions and examples regarding Html Elements and attributes. The full list of attributes used by the BODY Element is listed below. It is not required that you understand them all, merely that you understand that they exist. Full explanations of each attribute and their uses will be addressed in later chapters.
 ALINK="#RRGGBB" or a color in quotes, such as "RED", "BLUE" or "YELLOW" - This attribute sets the color of the element to which it was invoked, this case being the text color of the ALINK (Active Link). The color can be defined using a proper color name such as "RED" or with an #RGB (Red-Green-Blue) value.
BACKGROUND="URL" - This attribute defines the absolute or relative location of the image to be used for the BACKGROUND of the document.
BGCOLOR="#RRGGBB" or a color in quotes, such as "RED", "BLUE" or "YELLOW" - This attribute sets the color of the element to which it was invoked, this case being the color of the background of the document. The color can be defined using a proper color name such as "RED" or with an #RGB (Red-Green-Blue) value.
BGPROPERTIES="FIXED" - This attribute will cause the background image to be fixed and unmoving within the document. That is, as you scroll down within the document, the text and images will move but the background image will stay in the same location. The text and images will seem to float over the background image.
CLASS=" ... " - This attribute indicates the style 'class' applicable to the Element to which it has been assigned, the style 'class' being a function of a style sheet. For example, assume the style class 'relaxed' includes text with a font size of 8, and the style class 'active' includes text with a font size of 12. Using the CLASS="relaxed" attribute with a Element will cause the text within that Element to be displayed with a font size of 8. Using the CLASS="active" attribute with a Element will cause the text within that Element to be displayed with a font size of 12.
ID=" ... " - The ID attribute is used to assign a unique ID selector (identification) to the Element in which it is invoked. A style may be assigned to that ID, which will effect only that one instance of the attribute.
LEFTMARGIN="n" - This attribute defines the width of the margin of blank space along the left of the entire document, and is measured in pixels.
LINK="#RRGGBB" or a color in quotes, such as "RED", "BLUE" or "YELLOW" - This attribute sets the color of the element to which it was invoked, this case being the text color of a hyperlink. The color can be defined using a proper color name such as "RED" or with an #RGB (Red-Green-Blue) value.
SCROLL="YES" or "NO" - This attribute will indicate whether scrolling is permitted within the document.
STYLE=" ... " - Used to specify which style sheet commands to apply to the instance of the STYLE attribute invoked within the Element.
TEXT="#RRGGBB" or a color in quotes, such as "RED", "BLUE" or "YELLOW" - This attribute sets the color of the element to which it was invoked, this case being the document text color. The color can be defined using a proper color name such as "RED" or with an #RGB (Red-Green-Blue) value.
TITLE=" ... " - The TITLE attribute is used to display a note or information in a popup window pertaining to the object to which it was assigned. The popup window is invoked by holding the mouse pointer over the object.
TOPMARGIN="n" - This attribute defines the width of the margin of blank space along the top of the entire document, and is measured in pixels.
VLINK="#RRGGBB" or a color in quotes, such as "RED", "BLUE" or "YELLOW" - This attribute sets the color of the element to which it was invoked, this case being the text color of the hyperlinks that have already been visited (Visited Link). The color can be defined using a proper color name such as "RED" or with an #RGB (Red-Green-Blue) value. .
Each of these attributes is used in accordance with another Element and its related attributes. For example, the LINK, VLINK, and ALINK Elements are used with the Anchor Element. The attributes stated in the BODY Element control the colors of the active, visited, and normal states of a link. The color of text within a P Element is controlled using the TEXT attribute of the BODY Element. You'll learn about all these Elements in the subsequent discussions of each of the major Elements used in creating your Html document.
Including Colors
Colors are stated by specifying the weight of each of the colors Red, Green, and Blue. That is, assigning a value of, say 255 to red, and zero to both green and blue will display a color of red. Adding more weight to the green and blue and increasing or decreasing the weight of the red will give you a different color. Using this type of palette, there are literally millions of colors you can choose from (about 16 million). There are three different ways of stating the color of an Html element. They are:
Decimal RGB - This method uses decimal values between 0 and 255 and percenElementes to assign color weights to the R (Red), G (Green), and B (Blue) values. The color is stated as rgb(R value, G value, B value), or rgb(RGB). It is a good practice to have a space between each value within the brackets to allow the browser to distinguish which weight of each color to display.
Hexadecimal #RRGGBB - This method uses the hexadecimal (base 16) numbering system. Valid characters are 0 to 9, and A to F, representing the decimal numbers zero to fifteen (sixteen characters in total). A pound symbol must be inserted previous to the actual number values, which tells the browser that the following values are in the hexadecimal numbering system. Since the color weights are in RRGGBB pairs, no spaces are required between values. The values are placed between quotes when stated.
Named Colors - Netscape has released a list of common colors that have been named. That is, the color 'red' may be stated instead of the hexadecimal '#FF0000' or decimal rgb(255 0 0). The named color is still stated within quotes.
You may use any method that is comfortable to you, all are valid. A full list of named colors with decimal and hexadecimal number values may be found in the appendices near the end of this book.
Including Text
Text is the next topic to be discussed. There are very few web pages that don't include text in some form, so it is very important you know and understand how text is rendered. There are many ways you may display text, the basic form being to just type text within the document body. It will be rendered and displayed starting at the top left corner of your browser. If you try an example of this yourself, you'll see that the text is bland, unpositionable, and in the default style of your browser, whatever that may be. This is not what the makers of Html intended! Text should be rich, vibrant and exciting to the user. It should reflect your personality and tastes, and present what you have to say with a creative flair.
The P Element
We'll begin by introducing the P Element. The P stands for Paragraph, and is presented within your document code as a P within the less-than and greater-than characters (<P>). The closing paragraph statement is the same, but with a slash before the P (</P>). The paragraph Element obviously states the beginning and end of a paragraph, as in the example code which follows.
<P> - - - Paragraph text here - - - </P>
You may apply style sheet rules to the P Element, adding different styles of text, indentation, and coloring. More on Style Sheet rules in a later chapter. The P Element is the base you'll start with in creating your textual display.
|
|
|
|
The BR Element
The BR Element is a line break Element. That is, the BR stands for 'Break', and is used to insert the effect of carriage returns and spaces within the paragraph text, making it is a useful tool to break up groups of text into logical paragraphs. The following example will insert a line break after the first sentence.
<P>
Paragraph text.<BR>
Paragraph Text
</P>
You see that the one BR Element inserted within the P Element broke the text into two lines. Use two BR Elements to create a one-line space between lines, as shown below.
<P>
Paragraph text.<BR><BR>
Paragraph Text
</P>
The DIV Element
The DIV Element is used, with its basic attributes, to incorporate alignment attributes to your text and images. This Element is used to indicate logical divisions within a document, and can be used to specify alignment, line wrapping, and style sheet attributes. The most common use of this Element is to implement its array of simple alignment properties. A full list of its attributes is as follows.
ALIGN="LEFT, RIGHT, CENTER or JUSTIFY" - This attribute specifies whether the contents of the section in which ALIGN is invoked will align with the LEFT or RIGHT margins, are evenly spaced between them (CENTER), or if the text stretches between the left and right margins (JUSTIFY).
CLASS=" ... " - This attribute indicates the style 'class' applicable to the Element to which it has been assigned, the style 'class' being a function of a style sheet. For example, assume the style class 'relaxed' includes text with a font size of 8, and the style class 'active' includes text with a font size of 12. Using the CLASS="relaxed" attribute with a Element will cause the text within that Element to be displayed with a font size of 8. Using the CLASS="active" attribute with a Element will cause the text within that Element to be displayed with a font size of 12.
DATAFLD=" ... " - This attribute is used to specify the existing column from which will be used as the source of data.
DATAFORMATAS="TEXT, HTML, or NONE" - This attribute is used to specify processed data will appear. That is, the 'format' to be used in displaying the data.
DATASRC=" ... " - This attribute specifies the location of the data to be used, displayed, or acted upon.
ID=" ... " - The ID attribute is used to assign a unique ID selector (identification) to the Element in which it is invoked. A style may be assigned to that ID, which will effect only that one instance of the attribute.
NOWRAP - This attribute is used to specify whether or not the word wrapping feature will or will not be used on the contents of the cell.
STYLE=" ... " - Used to specify which style sheet commands to apply to the instance of the STYLE attribute invoked within the Element.
TITLE=" ... " - The TITLE attribute is used to display a note or information in a popup window pertaining to the object to which it was assigned. The popup window is invoked by holding the mouse pointer over the object.
The following example will align a paragraph of text with the right edge of the window. The P Element is used to encapsulate the text.
<DIV ALIGN="RIGHT">
<P> - - - Insert Text Here - - - </P>
</DIV>
H1, H2, H3, H4, H5, H6 - The Heading Level Elements
The Hn Element is used to display text in different sizes. The H stands for 'Heading', and is available from Heading 1, which is the largest, to Heading 6, which is the smallest. As with all Html Elements, the Hn Element is enclosed within less-than and greater-than characters (<Hn>). See the example below to get a feel for the sizes of each heading level.
- This is Heading Level One -
- This is Heading Level Two -
- This is Heading Level Three -
- This is Heading Level Four -
- This is Heading Level Five -
- This is Heading Level Six -
Use the various heading levels for (you guessed right) paragraph headings.
|
|
|
|
Html Character Entities
In using the Html language, you may have a use for special characters not available from your keyboard. Characters that don't have a key on your keyboard can be displayed through the use of Html Character Entities. A Character Entity is the Html way of specifying these non-keyed characters. A special form of coding is typed instead of the character itself. The browser reads these codes and displays the appropriate character in its place within your Html document. Consider the following example of a character entity.
& amp;
This character entity would show up in your browser as an ampersand, or 'and' symbol. Notice that the character entity starts with an ampersand and ends with a semicolon. All character entities have this practice in common. It is what tells the browser that the text is to be considered a character entity, and should be rendered as such. A full list of Html Character Entities can be found in the appendices at the back of this book.
Now that you've been introduced to the Html language, you have an idea what it can do. We've only just begun. You've learned how to create paragraphs, how to break and size paragraph text, draw horizontal rules and color them, and how to insert any of the six heading levels. You have much more to look forward to as we jump into using lists and bullets with the Elements and Attributes you just learned here.
Using Lists
The time will come when you'll need to put something in a list, and to make it beautiful you'll want numbers and bullets, all types. Well, you're in luck. The Html language provides for a large variety of bulleted and numbered lists, in ordered and unordered fashions. That is, numbered lists (ordered) and bulleted lists (unordered). Using these lists involves the introduction of three more Elements - the UL, OL, and LI Elements. In the discussion below, we'll examine these Elements in depth, then illustrate the examples with samples of code.
The UL Element
The 'UL' in the UL Element stands for Unordered List. That is, the list is defined with bullets instead of numbers. The bullets may be squares, discs, or circles, depending of course on your preference and use. The color of the bullet may also be specified. Again, this depends upon your tastes. The attributes of the UL Element are as follows.
CLASS=" ... " - This attribute indicates the style 'class' applicable to the UL Element, the style 'class' being a function of a style sheet.
COMPACT - This attribute will display the unordered list in a compacted form, if supported by the browser.
ID=" ... " - The ID attribute is used to assign a unique ID selector (identification) to the UL Element. A style may then be assigned to that ID, which will effect only that one instance of the attribute.
SRC="URL" - This attribute defines the absolute or relative location (URL) of an image to be used as the 'bullet' of the unordered list.
START="number" - This attribute is used to tell the browser at which number it should start the numbered bullets. This is convenient when a list must be interrupted by text or notes.
STYLE=" ... " - Used to specify which style sheet commands to apply to the instance of the STYLE attribute invoked within the Element.
TITLE=" ... " - The TITLE attribute is used to display a note or information in a popup window. The popup window is invoked by holding the mouse pointer over the object.
TYPE=" ... " - This attribute defines the bullet type to be used. Valid types are DISC, CIRCLE, or SQUARE.
Now that you know the attributes associated with an Unordered List, it is time to look at an Ordered List.
The OL Element
The 'OL' in the OL Element stands for Ordered List. An ordered list is defined with numbers or number characters for each point of the list. The numbers may be upper or lower case versions of the following: '1' (the number one) for Arabic numbers, 'i' (lower case i) for lower case Roman Numerals, 'I' (upper case i) for upper case Roman Numerals, 'a' (lower case A) for lower case letters, and 'A' (upper case A) for upper case letters. The OL Element has many attributes, which are listed below.
CLASS=" ... " - This attribute indicates the style 'class' applicable to the OL Element, the style 'class' being a function of a style sheet. For example, assume the style class 'relaxed' includes text with a font size of 8, and the style class 'active' includes text with a font size of 12. Using the CLASS="relaxed" attribute with a Element will cause the text within that Element to be displayed with a font size of 8. Using the CLASS="active" attribute with a Element will cause the text within that Element to be displayed with a font size of 12.
COMPACT - This attribute will cause the order list to be appear in a compacted form, if supported by the browser.
ID="n" - The ID attribute is used to assign a unique ID selector (identification) to the OL Element. A style may be assigned to that ID, which will affect only that one instance of the attribute.
START=" ... " - This attribute is used to define the value at which the order list should start. For example, you may want to break up a lengthy list between two pages for readability. You would use this attribute to start the second list at the value at which the first was left off.
STYLE=" ... " - Used to specify which style sheet commands to apply to the instance of the STYLE attribute invoked within the Element.
TITLE=" ... "The TITLE attribute is used to display a note or information in a popup window pertaining to the OL Element. The popup window is invoked by holding the mouse pointer over the object.
TYPE=" ... " - This attribute defines the numbering style for the ordered list. Use '1' for Arabic numbers, 'i' for lower case Roman Numerals, 'I' for upper case Roman Numerals, 'a' for lower case letters, and 'A' for upper case letters.
The LI Element
Now that you know the differences between the Order List and the Unordered List, we'll now delve into the LI Element. The LI in the LI Element stands for List Item, and is used with both the UL and the OL Element to specify the individual items within the list. The li Element has many attributes of its own, as shown below.
CLASS=" ... " - This attribute indicates the style 'class' applicable to the LI Element, the style 'class' being a function of a style sheet. For example, assume the style class 'relaxed' includes text with a font size of 8, and the style class 'active' includes text with a font size of 12. Using the CLASS="relaxed" attribute with a Element will cause the text within that Element to be displayed with a font size of 8. Using the CLASS="active" attribute with a Element will cause the text within that Element to be displayed with a font size of 12.
ID="n" - The ID attribute is used to assign a unique ID selector (identification) to the LI Element. A style may be assigned to that ID, which will affect only that one instance of the attribute.
STYLE=" ... " - Used to specify which style sheet commands to apply to the instance of the STYLE attribute invoked within the Element.
TITLE=" ... "The TITLE attribute is used to display a note or information in a popup window pertaining to the LI Element. The popup window is invoked by holding the mouse pointer over the object.
TYPE=" ... " - This attribute defines the type of button created, of which there are three kinds for unordered lists: DISC, SQUARE, and CIRCLE. For ordered lists, use: '1' for arabic numbers, 'a' for lowercase letters, 'A' for upper case letters, 'i' for lower case Roman Numerals, and 'I' for upper case Roman Numerals.
VALUE=" ... " - This attribute sets the beginning number of an ordered list, and is not used in unordered lists.
You would have noticed by now that the attributes of each Element are, for the most part, the same. This is part of the beauty of Html. The same attributes can be assigned to different Elements in order to achieve the desired result.
Making Your Lists
You've studied the three Elements which can be used to make your list, you know and understand them, so now it's time to make a list. We'll start with the Ordered List (OL). Examine the code example below. You'll recognize the OL and LI Elements. Notice their placement and order. The discussion below the example will take you step by step through the list.
<OL TYPE="A">
<LI>List Item Number One
<LI>List Item Number Two
<LI>List Item Number Three
</OL>
This example will build an Ordered List with three items that are 'numbered' with sequential capital letters. The TYPE="A" attribute tells the browser to render the list in capital letters. The three LI Elements tell the browser that there are three list items to be rendered, and the OL tells the browser to watch for valid Ordered List bullet types. The closing Element (</OL>) must be inserted at the end of the list. Try leaving it out and add text below the list. You'll see that the text below the list will be aligned with the indented portion of the list. This alignment holds true for images and other included objects. The closing OL Element is crucial to the desired flow of your page. Examine the Unordered List below. You'll see that the bullets are colored red, and are of the square type. Again, there are three list items within the UL Elements. The amount of list items is unlimited, as long as the list items are nested within the opening and closing OL or UL Elements.
<UL TYPE="SQUARE" COLOR="RED">
<LI>List Item Number One
<LI>List Item Number Two
<LI>List Item Number Three
</UL>
Specified as a style sheet property, the indentation of the list can be controlled. More will be said on Style Sheets and their uses in a later chapter. As you use the examples, the lists will become easier until you can type out a list with ease, efficiency and accuracy.
|
|
|
|
Including Images
In almost every web page you'll encounter, there will be included images within the text. This is the greatest selling feature of the Internet: vibrant, colorful images. In working the Internet, you've probably downloaded some images. You also may have noticed that the file name extensions had varied somewhat. The extension of the image tells you the format of the image. The images may be in one of three commonly accepted formats - GIF, JPG (or JPEG), and BMP.
The GIF Image
'GIF' stands for Graphics Interchange Format. The GIF image is probably the most common image format the Internet has to offer. An advanElemente of using a GIF image is that it has a high rate of compression, making it quick to download. A disadvanElemente is that it has a palette of only 256 colors. This disadvanElemente may be realized when you need to match an image color with, say, the background of your page, which may be displayed at a higher color palette due to your system display settings. The GIF image may not be able to match the precise color of the background. It is the common practice to use GIF images for icons, buttons, and smaller images within your document.
A major advanElemente of using a GIF image format is the Animated GIF. With an animated GIF, you can create simple animated pictures such as a ball bouncing, a flag waving, or a car spinning its wheels. You are limited only by your imagination and your artistic capabilities. The animated GIF works like a movie camera - a series of pictures, each slightly different, gives the impression of movement. There are dozens of very high quality programs available for purchase or for free download from the Internet that will allow you to create your own Animated GIF images.
The JPG or JPEG Image
'JPEG' stands for Joint Photographic Experts Group. The JPG image is the next most common file format. It has the highest rate of compression of the three image formats discussed here, making it ideal for downloading large picture quality images. It has a larger palette and a higher rate of compression than the GIF image. You would normally use the JPG file format for large, high quality images within your document.
The IMG Element
In order to include an image into your document, you must first learn a new Element and its attributes - the IMG Element. This is a fairly easy Element to understand and use. You'll be using it a lot in your future application of the Html language. The Element is used the same regardless of file format, and since the statement itself is such a small one, it has very little overhead, making it possible to include many images without creating a long download time for your initial Html document. Of course, the size of the images will come into play, but they aren't downloaded until the Html document containing your instructions to download the images has itself completely downloaded.
Since the IMG Element is used so often and is such a prominent feature of your web page, it must be versatile and powerful as well as easy to use. In order to fill this tall order, the makers of the Html language have included the following attributes of the IMG Element.
ALIGN="LEFT, RIGHT, TOP, MIDDLE or BOTTOM" - This Element is used to define how the image will be aligned within the document. ALIGN="LEFT" will align the image flush to the left side of the document, ALIGN="RIGHT" will align the image flush to the right side of the document. The ALIGN="TOP" and ALIGN="BOTTOM" will align the images flush with the top and bottom of the document.
BORDER="n" - This attribute is used to define the thickness of the border around the displayed image. The default is zero, and the border will be displayed in the default color of normal text within the document unless specified.
CLASS=" ... " - This attribute indicates the style 'class' applicable to the Element to which it has been assigned, the style 'class' being a function of a style sheet.
DATAFLD=" ... " - This attribute indicates the location of an existing column, the contents of which may be called or acted upon.
DATASRC=" ... " - This attribute defines the location of the tabular data to be bound.
DYNSRC=" ... " - This attribute defines the absolute or relative location of a 'dynamic' file, such as video or sound file.
HEIGHT="n" - This attribute specifies the HEIGHT, measured in pixels, of the object to which it has been assigned.
HSPACE="n" - This attribute will set the amount of blank space, measured in pixels, on either side of the object.
ID="n" - The ID attribute is used to assign a unique ID selector (identification) to the Element in which it is invoked. A style may then be assigned to that ID, which will effect only that one instance of the Element.
ISMAP - This attribute is used to indicate that the image is to function as a clickable image map.
LOWSRC="URL" - This attribute is used to define the absolute or relative location of a lower resolution version of the image.
LOOP="n" or "INFINITE" - where INFINITE is the default value This attribute defines the number of times the file, such as a sound file, will be run. A value of INFINITE will play continuously.
NAME=" ... " - This Element is used to mark a location within a document with a unique name. This named location can then be quickly moved to by means of a hyperlink using the HREF="#URL" attribute. Note the pound (#) sign before the URL. The pound sign used in this way indicates to the browser that the target location has been defined by the NAME=" ... " attribute.
SRC="URL" - This attribute defines the relative or absolute location (URL) of the image to be embedded.
START="FILEOPEN" or "MOUSEOVER" - This attribute is used to define the action that will trigger the file. For example, a movie file with the START="FILEOPEN" attribute will begin playing immediately after the movie file is finished downloading. A value of START="MOUSEOVER" will play the movie only when the mouse pointer is positioned over the image.
STYLE=" ... " - Used to specify which style sheet commands to apply to the instance of the STYLE attribute invoked within the Element.
TITLE=" ... " - The TITLE attribute is used to display a note or information in a popup window pertaining to the object to which it was assigned. The popup window is invoked by holding the mouse pointer over the object.
USEMAP="URL" - This attribute is used to specify the relative or absolute (URL) location of the client-side image map.
VRML=" ... " - This attribute defines the absolute or relative location (URL) of a VRML World to be embedded within the document.
VSPACE="n" - This attribute defines the amount of blank space to be displayed at the top and bottom of the object, and is measured in pixels.
WIDTH="n" - This attribute defines the width of the image, and is measured in pixels. The image will be made larger or smaller to fit into the area specified. To display the image as it was intended, specify the actual intended width of the image.
This complete list of attributes gives you an idea of the power of the IMG Element. It is versatile as well as easy to use. Some of the attributes listed here will not be discussed until a later chapter. Don't worry, we’ll get to them.
Now that you're familiar with the attributes of the IMG Element, we'll go over some examples of document code. Examine the below example.
<IMG SRC="image.gif" HEIGHT="300" WIDTH="300" ALIGN="LEFT">
In the above example, you'll see that the file to download is the GIF file called 'image.gif', given by the SRC= attribute. The height of the area the image is to take is 300 pixels, defined by the HEIGHT attribute. The width is also 300 pixels, stated by the WIDTH attribute. It is a good idea to include the actual height and width of the image to be downloaded. This makes the browser ender the page more quickly because it doesn't have to wait for the image to download to determine its size. Leaving these attributes out will make the browser have to redraw the page as the image finishes loading, making it necessary to reorganize the other content of the page to fit the image. The image will be aligned along the left edge of the document, as specified by the ALIGN="LEFT" attribute.
An interesting thing to note is that the IMG Element doesn't require a closing Element, such as </IMG>. The information for the image is totally encapsulated within the opening IMG Element, requiring no closing Element to define the image.
Examine another example, seen below. This example will download an image called logo.jpg which is 400 pixels in width and 350 pixels in height. It will be aligned along the right edge of the document and have a border around it which is 25 pixels wide. The color of the border will be the color of the text within the document, called the foreground color.
<IMG SRC="logo.jpg" HEIGHT="350" WIDTH="400" ALIGN="RIGHT" BORDER="25">
Lets examine yet another example.
<IMG SRC="BANNER.BMP" HEIGHT="40" WIDTH="50" ALIGN="RIGHT" BORDER="10" TITLE="This is the image called banner.bmp">
This instance of the IMG Element will download an image called banner.bmp which is 40 pixels in height and 50 pixels in width. It will align along the right hand side of the document, have a border of 10 pixels, and have a popup window displayed when you hold the mouse pointer over it. The text of the popup window is defined using the TITLE attribute, and will be 'This is the image called banner.bmp'.
|
|
|
|
Using Hyper Links
If you've ever surfed the web, you'll have probably clicked on a link. Links are what makes the internet world go 'round, enabling you and your users to navigate in an orderly fashion the gigabytes of information the internet has to offer. A link may be a link to another document, an image file, or any other file your browser supports. Links are defined using the A Element, called the Anchor Element. A link may be from one document to another, a specific place within the same document, or a specific place within a different document. The A Element is a very commonly used Element, and is a key element to the structure and functionality of your web page. The full list of attributes used with the anchor Element are listed below.
ACCESSKEY=" ... " - Assigns a key sequence to the link. That is, a letter is assigned that would activate the link. For example, you could assign the letter "I" to activate a link to the 'Index' page.
CHARSET=" ... " - This attribute specifies character encoding. The default is 'ISO-8859-1' for languages that use the english alphabet. The entire list of character sets are defined in RFC2045, a summary of which is available in the appendices at the back of this book.
CLASS=" ... " - This attribute indicates the style 'class' applicable to the A Element, the style 'class' being a function of a style sheet.
COORDS="x1,y1,x2,y2" - This attribute defines a clickable area within a document. The co-ordinates are measured in pixels from the top left corner of the document.
HREF="URL" - This attribute is used to specify the location of a relative or absolute location (URL) of a file to which you want to provide a hyperlink. A hyperlink can point to a different document, another location within the same document, or to any image or program file the browser or operating system supports.
ID=" ... " - The ID attribute is used to assign a unique ID selector (identification) to the Element in which it is invoked. A style may be assigned to that ID, which will affect only that one instance of the attribute.
NAME=" ... " - This Element is used to mark a location within a document with a unique name. This named location can then be quickly moved to by means of a hyperlink using the HREF="#URL" attribute. Note the pound (#) sign before the URL. The pound sign used in this way indicates to the browser that the target location has been defined by the NAME=" ... " attribute.
REL=" ... " - This attribute is used to specify a relationship hyperlink.
REV=" ... " - This attribute is used to specify a reverse relationship hyperlink.
SHAPE="RECT, CIRCLE, or POLY" - This attribute is used to define the shape of the clickable area. RECT is used for rectangles and squares, CIRCLE is obviously for circles, and POLY is for any polygon with three or more points, including squares.
STYLE=" ... " - Used to specify which style sheet commands to apply to the instance of the STYLE attribute invoked within the Element.
TABINDEX="n" - This attribute defines the 'tabbing order' of the document. For example, assume a document has ten fields, numbered one to ten, which require your input. The first field, with TABINDEX="1", is the active field. Pressing the tab key would move the cursor to TABINDEX="2", regardless of its physical location within the document.
TARGET=" ... " - This attribute indicates the name of the frame in which the linked document, image, or program file will be loaded. Frame names are defined with the FRAME Element.
TITLE=" ... " - The TITLE attribute is used to display a note or information in a popup window pertaining to the link. The popup window is invoked by holding the mouse pointer over the link area.
Now that you have an understanding of the attributes and ease of use of the anchor Element, we'll examine the anchor Element in depth. As I mentioned earlier, there are several ways in which an anchor Element may be used. The URL may be a relative or an absolute address, depending on your needs and preference. We'll discuss each of the methods in detail below.
The Anchor Element Linking to Another Document
When used as a link to another document, the A Element is simple to use. There is really nothing to it. You simply state the A Element with a reference, via the HREF attribute, to the page you wish to provide a link, as with the example below.
<A HREF="https://www.WalkTheGeek.com/index.html">WalkTheGeek.Com</A>
In order to describe the link, text of your choosing is placed between the opening and closing A Elements. The browser, specifying the text as a link, will underline the text. When the mouse is positioned over the link, the mouse pointer will turn into a hand with a pointed index finger.
Lets try another example using some of the above attributes to let you get a feel for the A Element. The below example will provide a link to the menu.html document on the WalkTheGeek.com web site. When the mouse pointer is held over the link, a popup window will display the text specified with the TITLE attribute. The document name of the link is specified as 'link' by the NAME attribute. An access key of 't' is specified by the ACCESSKEY attribute, so when the user presses the 'alt' and the 't' keys together, the link will be activated. On the Macintosh computer, the ‘apple’ key replaces the ‘alt’. Mac users will know what I'm talking about. The text that will be displayed as the link will be 'WalkTheGeek.Com'.
<A HREF="menu.html" TITLE="Visit WalkTheGeek Today" ACCESSKEY="t" NAME="link">WalkTheGeek.Com</A>
The Anchor Element Linking to a Place Within the Same Document
It is possible, using the NAME or ID attributes and the Anchor Element, to navigate to a specific place within the same document as the link. You would normally use this function for navigating through a large document that would require that you scroll a long way down to find the information you're looking for. This is a method that provides ease of use for the user. The links for this method are normally placed at the beginning of the long document. As you see below, this variation of the Anchor Element is easy to use and relatively simple. It does, however, require that you place a NAME="FLOW" or ID="FLOW" attribute somewhere within the document. The text for the NAME attribute may be any you choose, with an eye for something practical. The NAME attribute may be in any Element which supports the NAME attribute, the most common being the P Element. Examine the example below.
<A HREF="#FLOW">For Flow</A>
You see now how simple it is to use this variation of the Anchor Element. You may also use any of the other attributes with it, as shown below.
<A HREF="#FLOW" TITLE="Added for Flow" ACCESSKEY="f">For Flow</A>
The Anchor Element Linking to a Different Frame or Window
Using the Anchor Element and the TARGET attribute, it is possible to link to a different frame within the same window, or to a different window. You'll learn more about how to create and work with frames and windows in another chapter. For now, all you need to know is that a frame is a portion of a window that has its own Html document which includes instructions for that frame. The frame or frames take up a certain amount of window space. A link may specify that the target of the link be a different frame by specifying the NAME of the frame. It is assumed in the below example that a frame has been created that has been assigned a name of 'CONTENT' by using the NAME attribute.
<A HREF="index.html" TARGET="CONTENT">WalkTheGeek.Com</A>
The above example will open an Html document called 'index.html' in the frame that has been specified as the CONTENT frame using the TARGET attribute.
|
|
|
|
An Image as the Link
You might have seen, in using the Internet, an image that has been used a link. Using the Anchor and IMG Elements in this way gives a professional, pleasing appearance to your web page. Simply nest the IMG Element within the opening and closing Anchor Elements. The below sample of code will use an image called link.gif, defined with the IMG Element, as a link to a web page called index.html.
<A HREF="index.html"><IMG SRC="link.gif"></A>
Drawing from the knowledge you absorbed from a previous section, you'll see that the IMG Element is nested between the Anchor Elements. Simple. As you use this Element, you'll see that a border has been drawn around your image. The color for this border is defined using attributes within the BODY Element. The attributes are ALINK, VLINK, and LINK. The VLINK stands for 'Visited Link', the ALINK for 'Active Link', and the LINK for the color of a first time, unused link. The colors are specified within the BODY Element using decimal, hexadecimal or named color values. If you don't want the border around your link image to show in the final version, set the VLINK, ALINK, and LINK colors to the same color as the background of your document. The border will still be there, but it will be invisible. A drawback to this method is that any normal text links won't show up either.
The Complete HTML Document
Since you've now covered the basic Elements and attributes involved in building a functional and valid Html document, we'll present and discuss an Html document in its entirety. This is far more simple than it sounds! The below Html document presents in a finished form all of the Elements you've learned to date. Examine it closely, and then we'll discuss it.
<HTML>
<HEAD>
<TITLE>Your first HTML Document</TITLE>
</HEAD>
<BODY LINK="BLUE" VLINK="RED" ALINK="PINK" BGCOLOR="LIGHTBLUE">
<FONT FACE="ARIAL, 'TIMES NEW ROMAN' " COLOR="BLACK">
<DIV align="center">
<H1>My First Html Document</H1>
</DIV>
<HR WIDTH="100%" COLOR="BLUE">
<P>
This is my first Html Document. I plan to make many more in the future, each being more complete and functional than the one previous. I love my DHTML book, and I couldn't have done all that I have without it. I don't know what I'd do without it. I plan to carry it with me where ever I go. Yes I do, I love this book of mine.
</P>
<HR WIDTH="100%" COLOR="BLUE">
<DIV ALIGN="CENTER">
<H3>Some Links</H3>
<A HREF="LINK ONE.HTML">Link Number One</A><BR>
<A HREF="LINK TWO.HTML">Link Number Two</A><BR>
<A HREF="LINK THREE.HTML">Link Number Three</A><BR>
</DIV>
<HR WIDTH="100%" COLOR="BLUE">
</FONT>
</BODY>
</HTML>
This simple document is a good jumping point into the Html language. We'll start by explaining the code by Element groups and their functionality.
Document Example Summary
You'll see at the top of the example that the obligatory !DOCTYPE Element has been inserted. Remember that every Html document must start with this line. Memorize it. It may be the only truly cryptic command in the entire Html language. Notice that directly after is the <HTML> Element, which is again present in its closing form (</HTML) at the bottom of the example. Everything within your document must be nested within the opening and closing HTML Elements. Next you'll see the HEAD of the document, with the TITLE Elements nested within. Remember that the content within the TITLE Elements will be displayed at the top of the browser, on the blue title bar. If no text is specified or if the TITLE Elements are left out, the browser will display the file name of the document being displayed.
Now that we've gone through the HEAD of the document, we'll begin to explain the BODY of the document. All content that will be displayed will be nested within the opening and closing BODY Elements. The BODY Element is referred to as the container for the entire document. You'll learn more about containers when we delve into the Document Object Model and JavaScript. You'll see that within the BODY Element are several attributes that set the colors of the Visited Link (VLINK), the Active Link (ALINK), and the Normal State Link (LINK). The background color of the entire document is set using the BGCOLOR attribute. All colors are named colors, but may be any color and method you choose. Remember from a previous chapter that there are three different methods in which to state a color, those methods being Decimal RGB, Hexadecimal #RRGGBB, and named colors.
You'll see stated next the FONT Element and its attributes. Used at the top of the document in this way, the settings you specify will be used until a closing FONT Element is specified. Notice the closing FONT Element at the bottom of the document, just above the closing BODY Element. This indicates that the FONT attributes you specify will be valid for the entire document. The FONT FACE specified is for a default font of Arial, with a second font of 'Times New Roman' specified. When more than one font is specified, the font names must be separated, or delimited, with a comma. The second font will be used when the first is unavailable, for any reason. Remember that a font name that has spaces in the name must be enclosed within single quotes in order for the browser to display text in the proper, intended font. Leaving out the single quotes will cause the browser to look for fonts that have been named with the individual names of the font you specified, in this case being the nonexistent fonts 'Times', 'New', and 'Roman'. Accuracy counts when stating font names. A misspelled font name is the same as a nonexistent font. The color of the text to be used is stated with the COLOR attribute as the named color BLACK. This may be left out when stated as BLACK, because the default for most browsers is to render the displayed text within the document as black in color.
The line below the FONT Element uses the DIV Element. Notice that the ALIGN attribute has been used, set in this case to CENTER. Since the Div Element is primarily an alignment Element for the Element or Elements nested within its opening and closing Elements, note the location of its closing Element and the Element contained within. In this case, it's the Heading Level One (<H1>) Element. Used in this way, the text between the opening and closing H1 Elements will be centered on the screen when the page is rendered.
After the closing DIV Element comes a Horizontal Rule (<HR>) Element. A BLUE line will be displayed which will reach across 100% of the window area.
Next is a P Element, which signifies the beginning of a block of text. The text is included exactly as you wish it to be displayed when the browser renders the page. The closing P Element contains the block of text. Another DIV Element follows, which contains the Heading Level Three (<H3>) Element, centering it in the page. This time the Div Element is used to center the H3 text as well as the text descriptions of three Anchor Elements. The Elements point to 'Link One.html', 'Link Two.Html', and 'Link Three.Html'. You may replace these links with documents of your own in order to make the page functional, if you wish.
Finally, the Div Element is closed, followed by another BLUE Horizontal Rule, reaching across 100% of the window area. It should be noted that when the window is resized, the rule will still cover 100% of the window width. If an absolute value in pixels was specified as the width of the rule, the rule would not resized.
So there is your first Html document, explained and presented as it would appear in actual practice. We'll now expand on your Html knowledge, introducing the more advanced methods and practices that will make your Html document sizzle and be both aesthetically and functionally pleasing.
|
|
|
|
Using Tables
Tables are used widely within the Internet to create an ordered, finished, and professional look and feel to your web page. A table is an orderly, logically separated element of a web page. It is used to encase text and images and to display data from a database. In order to understand what a table is and how it works, examine the four new Elements, listed below.
The TABLE Element
The TABLE Element and its attributes are the starting point into working with tables. The TABLE Element is the first Element you'll state when building your table. It attributes are listed below.
ALIGN="LEFT, RIGHT, or CENTER" - This attribute defines whether the entire table will be positioned flush with the right (ALIGN="RIGHT) or left (ALIGN="LEFT") side of the document or existing item. The ALIGN="CENTER" attribute will place the table equidistant from the left and right sides of the document or existing item.
BACKGROUND="URL" - This attribute allows the absolute or relative location (URL) of a background image to be specified.
BGCOLOR="#RRGGBB" - or a color in quotes, such as "RED", "BLUE" or "YELLOW". This attribute sets the color of the element to which it was invoked, this case being the background color of the table. It can be applied to anything that can be colored, such as text, borders, or backgrounds. The color can be defined using a proper color name such as "RED" or with an #RGB (Red-Green-Blue) value.
BORDER="n" - This attribute is used to define the thickness, measured in pixels, of the border of the table.
BORDERCOLOR="#RRGGBB" - or a color in quotes, such as "RED", "BLUE" or "YELLOW". This attribute sets the color of the element to which it was invoked, this case being the bordercolor of the table. It can be applied to anything that can be colored, such as text, borders, or backgrounds. The color can be defined using a proper color name such as "RED" or with an #RGB (Red-Green-Blue) value.
BORDERCOLORDARK="#RRGGBB" - or color in quotes, such as "RED, "BLUE" or "YELLOW". This attribute sets the color of the element to which it was invoked, this case being the darker of the two colors used to create the raised '3D' effect of the border around the cells of the table. It can be applied to anything that can be colored, such as text, borders, or backgrounds. The color can be defined using a proper color name such as "RED" or with an #RGB (Red-Green-Blue) value.
BORDERCOLORLIGHT="#RRGGBB" - or a color in quotes, such as "RED", "BLUE" or "YELLOW". This attribute sets the color of the element to which it was invoked, this case being the lighter of the two colors used to create the raised '3D' effect of the border around the cells of the table. It can be applied to anything that can be colored, such as text, borders, or backgrounds. The color can be defined using a proper color name such as "RED" or with an #RGB (Red-Green-Blue) value.
CELLPADDING="n" - This attribute defines the space, measured in pixels between the cell content and the cell wall.
CELLSPACING="n" - This attribute is used to define the space, measured in pixels, between individual cells.
CLASS=" ... " - This attribute indicates the style 'class' applicable to the Element to which it has been assigned, the style 'class' being a function of a style sheet. For example, assume the style class 'relaxed' includes text with a font size of 8, and the style class 'active' includes text with a font size of 12. Using the CLASS="relaxed" attribute with a Element will cause the text within that Element to be displayed with a font size of 8. Using the CLASS="active" attribute with a Element will cause the text within that Element to be displayed with a font size of 12.
COLS="n" - This attribute defines the number of columns to be used within the table.
FRAME="VOID, BORDER, ABOVE, BELOW, HSIDES, VSIDES, LHS, RHS, or BOX" - This attribute defines the appearance of the borderlines around the table. FRAME="VOID" will not display borderlines. FRAME="BOX" or "BORDER" is the default, and indicates borderlines around the entire table. FRAME="ABOVE" will put a line along the top edge. FRAME="BELOW" will draw a line on the bottom edge. FRAME="HSIDES" will draw a line on the top and bottom edges. FRAME="LHS" will draw a line on the left hand side. FRAME="RHS" will draw a line on the right hand side. FRAME="VSIDES" will draw lines will draw lines along the right and left edges.
ID="n" - The ID attribute is used to assign a unique ID selector (identification) to the Element in which it is invoked. A style may be assigned to that ID, which will affect only that one instance of the attribute.
RULES="NONE, ROWS, COLS, GROUPS, or ALL" - This attribute will define where lines appear inside the table. RULES="NONE" won't draw anything. RULES="ROWS" will put lines between rows. RULES="COLS" will put lines between columns. RULES="ALL" will draw lines in all possible ways. RULES="GROUPS" will draw lines between the areas specified by the TFOOT, THEAD, TBODY, and COLGROUP Elements.
STYLE=" ... " - Used to specify which style sheet commands to apply to the instance of the STYLE attribute invoked within the Element.
TITLE=" ... " - The TITLE attribute is used to display a note or information in a popup window pertaining to the object to which it was assigned. The popup window is invoked by holding the mouse pointer over the object.
WIDTH="n" - This attribute defines the width, measured in pixels, of the table.
The TR Element
The TR Element stands for Table Row, and is used to define the rows within a table. It is nested within the opening and closing TABLE Elements. Examine its attributes to get a feel for what this Element can do.
ALIGN="LEFT, RIGHT, CENTER, JUSTIFY, or CHAR" - This attribute defines how the TEXT within the table row will align with the edges of the table cells.
BGCOLOR="#RRGGBB" - or a color in quotes, such as "RED, "BLUE", or "YELLOW". This attribute sets the color of the element to which it was invoked, this case being background color of the table cell. It can be applied to anything that can be colored, such as text, borders, or backgrounds. The color can be defined using a proper color name such as "RED" or with an #RGB (Red-Green-Blue) value.
BORDERCOLOR="#RRGGBB" - or a color in quotes, such as "RED", "BLUE", or "YELLOW". This attribute sets the color of the element to which it was invoked, this case being border color to be used for the cell. It can be applied to anything that can be colored, such as text, borders, or backgrounds. The color can be defined using a proper color name such as "RED" or with an #RGB (Red-Green-Blue) value.
BORDERCOLORDARK"#RRGGBB" - or a color in quotes, such as "RED", "BLUE" or "YELLOW". This attribute sets the color of the element to which it was invoked, this case being the darker of the two colors used to create the raised '3D' effect of the border around the cells of the table. It can be applied to anything that can be colored, such as text, borders, or backgrounds. The color can be defined using a proper color name such as "RED" or with an #RGB (Red-Green-Blue) value.
BORDERCOLORLIGHT="#RRGGBB" - or a color in quotes, such as "RED", "BLUE" or "YELLOW". This attribute sets the color of the element to which it was invoked, this case being the lighter of the two colors used to create the raised '3D' effect of the border around the cells of the table. It can be applied to anything that can be colored, such as text, borders, or backgrounds. The color can be defined using a proper color name such as "RED" or with an #RGB (Red-Green-Blue) value.
CHAR=" ... " - This attribute defines the character upon which the contents of the cell will align, the default being the decimal point.
CHAROFF="n" - This attribute defines the number of characters, measured from the left, upon which the contents of the cell will align.
CLASS=" ... " - This attribute indicates the style 'class' applicable to the Element to which it has been assigned, the style 'class' being a function of a style sheet. For example, assume the style class 'relaxed' includes text with a font size of 8, and the style class 'active' includes text with a font size of 12. Using the CLASS="relaxed" attribute with a Element will cause the text within that Element to be displayed with a font size of 8. Using the CLASS="active" attribute with a Element will cause the text within that Element to be displayed with a font size of 12.
ID="n" - The ID attribute is used to assign a unique ID selector (identification) to the Element in which it is invoked. A style may be assigned to that ID, which will affect only that one instance of the attribute.
NOWRAP - This attribute disables the word-wrapping feature.
STYLE=" ... " - Used to specify which style sheet commands to apply to the instance of the STYLE attribute invoked within the Element.
TITLE=" ... " - The TITLE attribute is used to display a note or information in a popup window pertaining to the object to which it was assigned. The popup window is invoked by holding the mouse pointer over the object.
VALIGN="TOP, BOTTOM, MIDDLE, or BASELINE" - This attribute defines the vertical alignment of the contents of the cell.
|
|
|
|
The TD Element
The TD Element stands for Table Data, and is used to specify the columns within a table. It is nested within the opening and closing TR Elements, which are themselves nested within the opening and closing TABLE Elements. You may specify as many columns within your table as you have a use for. The attributes of the TD Element are listed below.
AXIS=" ... " - This attribute is used to define an abbreviated cell name.
AXES=" ... " - This attribute will list AXIS values which pertain to that cell.
ALIGN="LEFT, RIGHT, CENTER, JUSTIFY, or CHAR" - This attribute defines how the table header will align with the edges of the table cells.
CHAR=" ... " - This attribute is used to define the character upon which the contents of the cell, or column, will align.
CHAROFF="n" - This attribute defines the number of characters, measured from the left hand side of the cell or column, upon which the cell contents will align.
CLASS=" ... " - This attribute indicates the style 'class' applicable to the Element to which it has been assigned, the style 'class' being a function of a style sheet. For example, assume the style class 'relaxed' includes text with a font size of 8, and the style class 'active' includes text with a font size of 12. Using the CLASS="relaxed" attribute with a Element will cause the text within that Element to be displayed with a font size of 8. Using the CLASS="active" attribute with a Element will cause the text within that Element to be displayed with a font size of 12.
COLSPAN="n" - This attribute specifies that the data of the cell will apply to more than one column.
BACKGROUND="URL" - This attribute defines the absolute or relative location (URL) of the back ground image to be used.
BGCOLOR="#RRGGBB" - or a color in quotes, such as "RED", "BLUE" or "YELLOW". This attribute sets the color of the element to which it was invoked, this case being the background color of the table cell. It can be applied to anything that can be colored, such as text, borders, or backgrounds. The color can be defined using a proper color name such as "RED" or with an #RGB (Red-Green-Blue) value.
BORDERCOLOR="#RRGGBB" - or a color in quotes, such as "RED, "BLUE" or "YELLOW". This attribute sets the color of the element to which it was invoked, this case being the bordercolor of the table cell. It can be applied to anything that can be colored, such as text, borders, or backgrounds. The color can be defined using a proper color name such as "RED" or with an #RGB (Red-Green-Blue) value.
BORDERCOLORDARK="#RRGGBB" - or a color in quotes, such as "RED", "BLUE" or "YELLOW". This attribute sets the color of the element to which it was invoked, this case being the darker of the two colors used to create the raised '3D' effect of the border around the cells of the table. It can be applied to anything that can be colored, such as text, borders, or backgrounds. The color can be defined using a proper color name such as "RED" or with an #RGB (Red-Green-Blue) value.
BORDERCOLORLIGHT="#RRGGBB" - or color in quotes, such as "RED", "BLUE" or "YELLOW". This attribute sets the color of the element to which it was invoked, this case being the lighter of the two colors used to create the raised '3D' effect of the border around the cells of the table. It can be applied to anything that can be colored, such as text, borders, or backgrounds. The color can be defined using a proper color name such as "RED" or with an #RGB (Red-Green-Blue) value.
ID="n" - The ID attribute is used to assign a unique ID selector (identification) to the Element in which it is invoked. A style may be assigned to that ID, which will affect only that one instance of the attribute.
NOWRAP - This attribute is used to disable the word-wrapping feature within the cell.
ROWSPAN="n" - This attribute will indicate that a table cell will occupy more than one row of the table.
STYLE=" ... " - Used to specify which style sheet commands to apply to the instance of the STYLE attribute invoked within the Element.
TITLE=" ... " - The TITLE attribute is used to display a note or information in a popup window pertaining to the object to which it was assigned. The popup window is invoked by holding the mouse pointer over the object.
VALIGN="TOP, MIDDLE, BOTTOM, or BASELINE" - This attribute specifies the vertical alignment of the contents of the cell.
Making Your Tables
As you've seen from the above attribute and Element listings, there are many nuances to a table, which you'll learn in the discussions below. We'll begin by explaining the Elements themselves, in more detail. The TABLE Element is used to encapsulate the entire table, which will consist mainly of TR and TD Elements. TH Elements are optional, used to specify a heading to a table. You may use other means to achieve the effect the TH Element displays, if you choose. The TR Element is used to specify the rows of the table. Placing two TD Elements within the opening and closing TR Elements will result in a table with two columns and one row. If three TD Elements are placed within the TR Elements, the table will have three columns. You see now how it works.
Each of the blocks of your table specified by the TD Element is called a cell. Each cell has its own set of properties (attributes) which can be set for one cell or for all cells, depending on what Element the attribute is specified in. If the attribute for say, a background color, is set within the TR Element, that color is used for the entire row, spanning across the cells specified by the TD Element. If the color is set as an attribute of the TD Element, that color is set only for that instance of the TD Element. If the color value was stated in the TABLE Element, the color is used for the entire table.
We'll begin the following example by first explaining it, briefly. This table will have a blue borders around the cells and rows one pixel in width. The background is specified as white. There will be two rows to the table, with four columns within each row. That is, there will be two sets of opening and closing TR Elements. Nested within each of the TR Elements will be four TD Elements.
<TABLE BORDER="1" BORDERCOLOR="BLUE" BGCOLOR="WHITE" CELLPADDING="4" CELLSPACING="5">
<TR ALIGN="CENTER">
<TD>Row 1, Column 1</TD>
<TD>Row 1, Column 2</TD>
<TD>Row 1, Column 3</TD>
<TD>Row 1, Column 4</TD>
</TR>
<TR ALIGN="CENTER">
<TD>Row 2, Column 1</TD>
<TD>Row 2, Column 2</TD>
<TD>Row 2, Column 3</TD>
<TD>Row 2, Column 4</TD>
</TR>
</TABLE>
You see from the above example how easy a simple table can be to implement. As you see in the TABLE Element, the border is colored blue by using a valid named color from the appendices at the back of this book. The width of the border is specified by using the BORDER attribute as being one pixel in width. Using a border width and color setting in the TABLE Element will draw lines around every cell of the table. The background for the table was set, using the BGCOLOR attribute, to 'white', another named color. The background color of the cell isn't affected by the BGCOLOR attribute set within the BODY Element - it is independent to the table area. The amount of space between the cells content and the cell borderline is referred to as the padding of the cell. The CELLPADDING attribute was used to set this property, which in this case was set to 4 pixels.. When spaces are required between the individual cells, the CELLSPACING attribute is set. In this case, the value was set to five pixels, so there will be a gap between each cell five pixels in width.
Notice that a width hasn't been specified for the individual cells. When no width values have been defined, the width of the table is the width of the combined table cells. The width of the cells themselves, with no widths stated, is the width of the content of the cell. That is, if the content of the cell is twenty characters wide, the cell will expand to accommodate the content. The width of the column of cells, then, becomes the width of the cell that has the widest content region.
|
|
|
|
Nesting Your Tables
Suppose that you want a border to be displayed around your table, but don't want each individual cell to be bordered by a line. In this case, you would have to nest a table within a table. Examine the example which follows.
<TABLE BORDER="1" BORDERCOLOR="BLUE" BGCOLOR="WHITE" CELLPADDING="10" CELLSPACING="0">
<TR>
<TD>
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0">
<TR ALIGN="CENTER">
<TD>Row 1, Column 1</TD>
<TD>Row 1, Column 2</TD>
<TD>Row 1, Column 3</TD>
<TD>Row 1, Column 4</TD>
</TR>
<TR ALIGN="CENTER">
<TD>Row 2, Column 1</TD>
<TD>Row 2, Column 2</TD>
<TD>Row 2, Column 3</TD>
<TD>Row 2, Column 4</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
From the above example, you can clearly see the two tables, one nested within the other. The first table has been set with the border and background attributes, and the second has been set with those same attributes set to zero. The effect of this nesting is that the table will be rendered with a border around the outside of the table, but with no borders within the table. Notice that the second, inner table is nested within the opening and closing TD Elements of the first, outer table - the inner table is the data of the first table's TD Element, that Element being nested within the opening and closing TR Elements. Note also that the first table is completed with a closing </TABLE> Element, before closing first the TD, then the TR, then the TABLE Element of the first table set.
Within a table, values are inherited. That is, if one table has been set to say, have borders, the table nested within that table would show borders as well. This is known as the Bubbling Order or Inheritance of the document. In order for the second table to not have borders, you would have to explicitly state that the table is to not have borders by setting the BORDER attribute to zero. The same goes for the CELLPADDING and CELLSPACING attributes given in the example. The values were stated once for the container around the inner table (the outer table), but in order for the inner table to not reflect these attribute values, they must be stated for that table.
There are many options for the coloring and type of border you'll be able to specify for your table. For instance, you'll be able to create a raised, 3D effect around your table by specifying the BORDERCOLORLIGHT and BORDERCOLORDARK attributes. These two colors, used together, will give your table a 'buttonized' look to it. Obviously, you would use a lighter color for the BORDERCOLORLIGHT attribute, and a darker color for the BORDERCOLORDARK attribute. The light color will be displayed at the top and left hand side of the table, and the dark color will be displayed at the bottom and right hand side of the table. We'll delve deeper into the bordering options for your table when we explore Cascading Style Sheets together.
Examine the following example, which utilizes the TH Element to provide a header for the four columns and two rows of data.
<TABLE BORDER="1" BORDERCOLOR="BLUE" BGCOLOR="WHITE" CELLPADDING="4" CELLSPACING="5">
<TR ALIGN="center">
<TH COLSPAN="4">This is a Table Header</TH>
</TR>
<TR ALIGN="CENTER">
<TD>Row 1, Column 1</TD>
<TD>Row 1, Column 2</TD>
<TD>Row 1, Column 3</TD>
<TD>Row 1, Column 4</TD>
</TR>
<TR ALIGN="CENTER">
<TD>Row 2, Column 1</TD>
<TD>Row 2, Column 2</TD>
<TD>Row 2, Column 3</TD>
<TD>Row 2, Column 4</TD>
</TR>
</TABLE>
The TH heading is nested within the TR Element in the same place as you would put the TD Element. The opening and closing Elements are enclosing the text to be used for the heading. Notice that the TH Element was nested within its own TR Elements, signifying a new table row. Notice also the COLSPAN attribute which, stated here, tells the browser to render the header across the four columns of the row, giving the impression that the header is applicable to all four columns of data.
|
|
|
|
Including Images in Your Table
Including an image within your table is as simple as nesting the image within the opening and closing TD Elements. The image itself becomes the table data, as follows.
<TABLE BORDER="1" BORDERCOLOR="BLUE" BGCOLOR="WHITE" CELLPADDING="4" CELLSPACING="5">
<TR ALIGN="CENTER">
<TD><IMG SRC="image.gif"></TD>
</TR>
</TABLE>
You may use any image wish, as well as OBJECTs like Java CLASS files and plugin files such as MacroMedia Flash. More on embedding OBJECTs in the next chapter.
The EMBED Element
This Element is used to place, or embed, an object such as a sound or image file into your Html document. Any application can be incorporated into your web page using this Element. This Element has been replaced with the higher functionality and customization properties that can be implemented with the OBJECT Element. Browsers still support this Element to ensure compatibility with older web pages which still use this Element. See the list of attributes below to get a feel for the Element, and its implementation.
ACCESSKEY=" ... " - Assigns a key sequence to the element. That is, a letter is assigned that would activate that object. For example, you could assign the letter "I" to activate a link to the 'Index' page.
ALIGN="LEFT, RIGHT, CENTER, ABSBOTTOM, ABSMIDDLE, BASELINE, BOTTOM, TEXTTOP, or TOP" - This attribute defines how the embedded item is positioned with respect to the document borders or surrounding content. The embedded object can be positioned to float between the edges of the frame either to the LEFT, RIGHT, or evenly centered (CENTER). ALIGN="TOP" and ALIGN="TEXTTOP" are practically interchangeable and will align the item with the top of the existing item. ALIGN="ABSMIDDLE" lines up the middle of the embedded item with the middle of the existing item. ALIGN="ABSBOTTOM" will align the bottom of the embedded item with the bottom of the existing item. ALIGN="BOTTOM" and ALIGN="BASELINE" are practically interchangeable and will align the bottom of the item with the bottom of the existing item.
ALT=" ... " - This attribute is used to specify the alternative text to be displayed if the object being embedded isn't available.
BORDER="n" - This attribute is used to specify, in pixels, the width of the border that is to be displayed around the embedded object.
CLASS=" ... " -This attribute indicates the style 'class' applicable to the Element to which it has been assigned, the style 'class' being a function of a style sheet.
FRAMEBORDER="YES, or NO" - This attribute lets you specify whether or not the embedded object should have borders.
HEIGHT="n" - This attribute specifies the HEIGHT, measured in pixels, of the object to which it has been assigned.
HIDDEN - This attribute is used to specify whether the embedded object is hidden or visible.
HSPACE="n" - This attribute is used to specify the amount of area that is to be displayed around the left and right sides of the embedded object.
ID=" ... " - The ID attribute is used to assign a unique ID selector (identification) to the Element in which it is invoked. A style may be assigned to that ID, which will affect only that one instance of the attribute.
NAME=" ... " - This Element is used to mark a location within a document with a unique name. This named location can then be quickly moved to by means of a hyperlink using the HREF="#URL" attribute. Note the pound (#) sign before the URL. The pound sign used in this way indicates to the browser that the target location has been defined by the NAME=" ... " attribute.
OPTIONAL PARAM=" ... " - This attribute indicates the operating options to be used when the embedded object has been activated. For example, AUTOSTART can be used with *.MPEG movies.
PALLETTE="#RRGGBB|#RRGGBB" - This attribute sets the color of the element to which it was invoked, this case being the color of the foreground and background for the embedded OBJECT. It can be applied to anything that can be colored, such as text, borders, or backgrounds. The color can be defined using a proper color name such as "RED" or with an #RGB (Red-Green-Blue) value.
PLUGINSPAGE="URL" - This attribute is used to specify the location of the page of the plugin being embedded.
PLUGINURL="URL" - This attribute is used to specify the location of the plugin being embedded.
SRC="URL" - This attribute is used to define the relative or absolute location (URL) of the object to be embedded.
STYLE=" ... " - Used to specify which style sheet commands to apply to the instance of the STYLE attribute invoked within the Element.
TITLE=" ... " - The TITLE attribute is used to display a note or information in a popup window pertaining to the object to which it was assigned. The popup window is invoked by holding the mouse pointer over the object.
TYPE=" ... " - This attribute is used to set the MIME type of the application being embedded. A complete list of MIME types is available in the appendices located at the back of this book.
UNITS="PIXELS, or EN" - This attribute is used to define the measurement option being used. That is, the HEIGHT="n" and WIDTH="n" attributes can be measured in pixels (UNITS="PIXELS), or in 'EN spaces' (UNITS="EN"). The default is for the value to be represented in PIXELS.
VSPACE="n" - This attribute is used to define the amount of space that is to be displayed around the top and bottom of the embedded object.
WIDTH="n" - This attribute specifies the width, measured in pixels, in which the embedded object will be presented.
|
|
|
|
The PARAM Element
The PARAM Element specifies the operating parameters of an embedded object. An object can be an ActiveX control, a movie file, sound file, or any other program file the browser supports. The PARAM Element is used within the OBJECT or APPLET Elements to give more functionality and customization options to the embedded object. Examine its attributes, listed below.
DATAFLD=" ..." - This attribute is used to select a column from a black of table data.
DATASRC=" ... " - This attribute is used to specify the location of table data to be bound, or used by, the document.
DATAFORMATAS="TEXT, or HTML" - This attribute is used to set the type of the data arriving from the data source. The options are TEXT or HTML.
NAME=" ... " - This Element is used to mark a location within a document with a unique name. This named location can then be quickly moved to by means of a hyperlink using the HREF="#URL" attribute. Note the pound (#) sign before the URL. The pound sign used in this way indicates to the browser that the target location has been defined by the NAME=" ... " attribute.
TITLE=" ... " - The TITLE attribute is used to display a note or information in a popup window pertaining to the object to which it was assigned. The popup window is invoked by holding the mouse pointer over the object.
TYPE=" ... " - This attribute is used to define the MIME type of the data found at the specified URL, and is used with the VALUETYPE="REF" attribute.
VALUE=" ... " - This attribute is used to define the value, or option, to be used with the embedded object.
VALUETYPE="REF, OBJECT, or DATA" - This attribute defines the kind of value that is passed to the embedded object. The values are:
VALUETYPE="REF" - indicates a URL to be used with the embedded object.
VALUETYPE="OBJECT" - specifies that the VALUE= attribute specifies the location of the desired data.
VALUETYPE="DATA" - specifies that the VALUE= attribute has been set to a plain text string, which is used for the passing of alphanumeric data to the object.
Another way to include application files in your web page is to embed them using the EMBED Element. This Element offers more functionality and customization options than does the APPLET Element, and is fairly easy to use. Examine the chunk of sample code which follows.
<EMBED NAME="movie1" SRC="movie.mpeg" HEIGHT="300" WIDTH="400">This is a Movie File</EMBED>
The file to be run is the movie file 'movie.mpeg', identified by the NAME attribute as 'movie1'. The height of the area to be taken within your web page is 300 pixels high by 400 pixels wide. Notice the text between the opening and closing EMBED Elements. This text is included to allow for browsers which cannot run the application you specified, or that don't recognize the EMBED Element. Either way, the browser won't run the file being run. This gives some explanation of what was supposed to be in the place the non-functional embedded application.
Drop Down Lists
In your exploration of the internet, you've probably encountered a form of some kind which uses those cool drop down lists or scrolling menus, the kind that allow you to make a selection within the list. Well, you're about to find out how to make them. They're relatively simple to make, and don't take up much space in your document. In fact, that's their biggest feature - they don't take up space, because they're not like a UL list where all options are displayed. A drop down list may be only one line in height until you click on it and activate the drop down feature, which may be as long as you have a use for. To construct your drop down list, you must first learn some new Elements and attributes, which are listed below.
The SELECT Element
This Element is used to construct a drop down list. This Element provides selection and identification to your list. User typically make a selection from the list defined by this Element. The OPTION Element is used to provide the individual list items. The attributes of the SELECT Element are as follows.
ACCESSKEY=" ... " - Assigns a key sequence to the element. That is, a letter is assigned that would activate that object. For example, you could assign the letter "I" to activate a link to the 'Index' page.
CLASS=" ... " - This attribute indicates the style 'class' applicable to the Element to which it has been assigned, the style 'class' being a function of a style sheet. For example, assume the style class 'relaxed' includes text with a font size of 8, and the style class 'active' includes text with a font size of 12. Using the CLASS="relaxed" attribute with a Element will cause the text within that Element to be displayed with a font size of 8. Using the CLASS="active" attribute with a Element will cause the text within that Element to be displayed with a font size of 12.
DATAFLD=" ... " - This attribute allows the selection, or identification, of a column of table data.
DISABLED - This attribute will disable access to the selection list.
ID=" ... " - The ID attribute is used to assign a unique ID selector (identification) to the Element in which it is invoked. A style may be assigned to that ID, which will affect only that one instance of the attribute.
MULTIPLE - This attribute allows more than one selection from the list at one time.
NAME=" ... " - This Element is used to mark a location within a document with a unique name. This named location can then be quickly moved to by means of a hyperlink using the HREF="#URL" attribute. Note the pound (#) sign before the URL. The pound sign used in this way indicates to the browser that the target location has been defined by the NAME=" ... " attribute.
READONLY - This attribute will disallow any changes to the input from the selection list.
SIZE="n" - This attribute defines the number of items which will be displayed in the selection list box. Scroll bars will automatically be used if necessary.
STYLE=" ... " - Used to specify which style sheet commands to apply to the instance of the STYLE attribute invoked within the Element.
TABINDEX="n" - This attribute defines the 'tabbing order' of the document. For example, assume a document has ten fields, numbered one to ten, which require your input. The first field, with TABINDEX="1", is the active field. Pressing the tab key would move the cursor to TABINDEX="2", regardless of its physical location within the document.
TITLE=" ... " - The TITLE attribute is used to display a note or information in a popup window pertaining to the object to which it was assigned. The popup window is invoked by holding the mouse pointer over the object.
|
|
|
|
The OPTION Element
The OPTION Element is used to define the individual list items of the SELECT list. It is nested within the opening and closing SELECT Elements. A closing OPTION Element is not necessary. The attributes of the OPTION Element are listed below.
CLASS=" ... " - This attribute indicates the style 'class' applicable to the Element to which it has been assigned, the style 'class' being a function of a style sheet.
DISABLED=" ... " - This attribute will disable access to the input method in which it is used.
ID="n" - The ID attribute is used to assign a unique ID selector (identification) to the Element in which it is invoked. A style may be assigned to that ID, which will affect only that one instance of the attribute.
SELECTED - This attribute will define the default or preselected item of the list. For example, in a list with the options being 'Black', 'Red, or 'Green', having SELECTED="Black" will cause the 'Black' list item to be automatically selected when the page loads.
TITLE=" ... " - The TITLE attribute is used to display a note or information in a popup window pertaining to the object to which it was assigned. The popup window is invoked by holding the mouse pointer over the object.
VALUE=" ... " - This attribute is used to specify which data is sent to the form processor if you choose the selection list item.
Constructing Your List
You begin building your list by first specifying the SELECT Element and its attributes. The OPTION Elements are nested within the opening and closing SELECT Elements, as in the sample code that follows.
<SELECT NAME="LINGOS">
<OPTION VALUE="1">PERL
<OPTION VALUE="2">JAVA
<OPTION VALUE="3" SELECTED>HTML
</SELECT>
In the above example, the NAME of the list is 'LINGOS' (slang for 'languages', obviously). You see three OPTION Elements, which specify the list items, those items being PERL, JAVA, and HTML. Notice the SELECTED attribute in the HTML OPTION Element. The SELECTED attribute, used this way, indicates that the 'HTML' will show up as the selected item when the browser renders the list. The VALUE attributes stated here indicate the values that will be sent to the server to be processed. That is, if you choose 'PERL', the value sent to the server is '1'. If you select 'JAVA', the value sent to the server is '2', and so on. CGI scripts at the server then act upon the values. CGI scripts are beyond the scope of this book. Your list may be as long as you have a use for.
Input Elements
In using the Internet, you've no doubt come across a form that asked you for information. Several options might have been presented to check radio buttons or to check boxes. You then clicked a button which no doubt said 'SUBMIT' on it. This is what we'll be discussing in this chapter - Submit and Reset buttons, check boxes, and radio buttons. Radio Buttons and Check Boxes are types of input elements. They are defined using the INPUT Element and its attributes, a full list of which follows.
The INPUT Element
The INPUT Element is used within the FORM Element to include items selected from lists and checked in radio and check boxes. The VALUE information is then sent to the server by clicking a 'SUBMIT' button. If you made a mistake or wanted to start over, you would click a 'RESET' button. Both the 'SUBMIT' and 'RESET' buttons are types of input elements. Examine the full list of attributes available to the INPUT Element, listed below.
ALIGN="LEFT, RIGHT or CENTER" - This attribute defines the alignment of a graphical 'submit' button. ALIGN="LEFT" will align the button flush to the left side of the document, ALIGN="RIGHT" will align the button flush to the right side of the document. The ALIGN="TOP" and ALIGN="BOTTOM" will align the buttons flush with the TOP and BOTTOM of the document.
ACCEPT=" ... " - This attribute defines the MIME format of acceptable data. A full list of MIME types is available in the appendices at the back of this book.
ACCESSKEY=" ... " - Assigns a key sequence to the element. That is, a letter is assigned that would activate that object. For example, you could assign the letter "I" to activate a link to the 'Index' page.
CHECKED - This attribute is used to set the default option of a radio button or checkbox to true, or 'checked'.
CLASS=" ... " - This attribute indicates the style 'class' applicable to the Element to which it has been assigned, the style 'class' being a function of a style sheet. For example, assume the style class 'relaxed' includes text with a font size of 8, and the style class 'active' includes text with a font size of 12. Using the CLASS="relaxed" attribute with a Element will cause the text within that Element to be displayed with a font size of 8. Using the CLASS="active" attribute with a Element will cause the text within that Element to be displayed with a font size of 12.
DATAFLD=" ... " - This attribute is used to select a column from previously existing tabular data.
DATASRC=" ... " - This attribute defines the location of tabular data to be bound.
DISABLED - This attribute will disable the instance of the input method used. Will disable a 'Submit' button, for example.
ID=" ... " - The ID attribute is used to assign a unique ID selector (identification) to the Element in which it is invoked. A style may be assigned to that ID, which will effect only that one instance of the attribute.
MAXLENGTH="n" - This attribute is used to specify the maximum number of characters that can be entered into a field, and is used with either the TEXT or PASSWORD input methods.
NAME=" ... " - This Element is used to mark a location within a document with a unique name. This named location can then be quickly moved to by means of a hyperlink using the HREF="#URL" attribute. Note the pound (#) sign before the URL. The pound sign used in this way indicates to the browser that the target location has been defined by the NAME=" ... " attribute.
NOTAB - This attribute removes the input item from the tabbing order.
READONLY - This attribute specifies that changes to the input method data will be disallowed.
SIZE="n" - This attribute defines the width of the input method, and is measured in characters. It is used with either the TEXT or PASSWORD input methods.
SRC="URL" - This attribute specifies the absolute or relative location (URL) of the image to be used for the submit button, and can only be invoked if the TYPE="IMAGE" statement is used.
STYLE=" ... " - Used to specify which style sheet commands to apply to the instance of the STYLE attribute invoked within the Element.
TABINDEX="n" - This attribute defines the 'tabbing order' of the document. For example, assume a document has ten fields, numbered one to ten, which require your input. The first field, with TABINDEX="1", is the active field. Pressing the tab key would move the cursor to TABINDEX="2", regardless of its physical location within the document.
TITLE=" ... " - The TITLE attribute is used to display a note or information in a popup window pertaining to the object to which it was assigned. The popup window is invoked by holding the mouse pointer over the object.
TYPE=" ... " - This attribute defines the type of button created. Valid TYPEs are: SUBMIT, RESET, BUTTON, TEXT, PASSWORD, RADIO, CHECKBOX, IMAGE, and HIDDEN.
USEMAP="URL" - This attribute defines the relative or absolute URL of the image to use with the form.
VALUE=" ... " - This attribute sets the default input method of POST or GET, and is required when the input TYPE is set to radio or checkbox.
So there are the attributes to be used with the INPUT Element. We'll begin first by constructing some radio buttons and checkboxes.
|
|
|
|
The TEXTAREA Element
The TEXTAREA Element is used to give the user a larger input field than the TEXT type of the INPUT Element. The contents of the TEXTAREA field are submitted to the server as NAME / VALUE pairs, where the VALUE is the content of the text box, to be acted upon by CGI scripts. This Element defines a multiple line input field within a form, and is placed within the FORM Elements. Text entered between the opening and closing TEXTAREA Elements will be the default value. That is, it will be the text displayed before changes are made, if any. Examine the TEXTAREA attributes, given below.
ACCESSKEY=" ... " - Assigns a key sequence to the element. That is, a letter is assigned that would activate that object. For example, you could assign the letter "I" to activate a link to the 'Index' page.
CLASS=" ... " - This attribute indicates the style 'class' applicable to the Element to which it has been assigned, the style 'class' being a function of a style sheet. For example, assume the style class 'relaxed' includes text with a font size of 8, and the style class 'active' includes text with a font size of 12. Using the CLASS="relaxed" attribute with a Element will cause the text within that Element to be displayed with a font size of 8. Using the CLASS="active" attribute with a Element will cause the text within that Element to be displayed with a font size of 12.
COLS="n" - This attribute defines the width, measured in the number of characters, of the textarea field.
DATAFLD=" ... " - This attribute selects a column from a previously identified source of table data.
DATASRC=" ... " - This attribute is used to define the location of the table data to be bound to the document.
DISABLED - This attribute indicates that the textarea field has been disabled.
ID="n" - The ID attribute is used to assign a unique ID selector (identification) to the Element in which it is invoked. A style may be assigned to that ID, which will affect only that one instance of the attribute.
NAME=" ... " - This Element is used to mark a location within a document with a unique name. This named location can then be quickly moved to by means of a hyperlink using the HREF="#URL" attribute. Note the pound (#) sign before the URL. The pound sign used in this way indicates to the browser that the target location has been defined by the NAME=" ... " attribute.
READONLY - This attribute disallows changes to the contents of the input field.
ROWS="n" - This attribute defines the height, measured in characters, of the input field.
STYLE=" ... " - Used to specify which style sheet commands to apply to the instance of the STYLE attribute invoked within the Element.
TABINDEX="n" - This attribute defines the 'tabbing order' of the document. For example, assume a document has ten fields, numbered one to ten, which require your input. The first field, with TABINDEX="1", is the active field. Pressing the tab key would move the cursor to TABINDEX="2", regardless of its physical location within the document.
TITLE=" ... " - The TITLE attribute is used to display a note or information in a popup window pertaining to the object to which it was assigned. The popup window is invoked by holding the mouse pointer over the object.
WRAP - Enables word wrapping within the TEXTAREA element.
Using the TEXTAREA Element
As you've seen from above, the TEXAREA Element is nested within the opening and closing FORM Elements, and emulates the action of the TEXT type of the INPUT Element. Examine the sample code below.
<TEXTAREA COLS="50" ROWS="10" NAME="textBox" TABINDEX="3">
This is a TEXTAREA Box
</TEXTAREA>
As you can see. the width of this box, defined with the COLS attribute, will be 50 characters wide. The height of the box is specified using the ROWS attribute, and is 10 characters high. Notice that this box has been named with the NAME attribute. Also note that the TABINDEX attribute has been set to a value of three, indicating that it the third in the tabbing order. The text between the opening and closing Elements will appear as the default text within the text box.
|
|
|
|
Using Forms
The FORM Element is used to encapsulate the various controls used in the online form. That is, it contains the entire range of INPUT buttons, radio buttons and checkboxes. It can also be used to encapsulate elements of the BUTTON Element. The form data is submitted to the server to be acted upon by CGI (Common Gateway Interface) scripts, which are beyond the scope of this book. The form data comprises the individual NAME / VALUE pairs of the form elements nested within the opening and closing FORM Elements. You may include as many form buttons, boxes and text areas as you have a use for. There is no limit, really, which makes the online form so popular and widely implemented. The attributes of the FORM Element are listed below.
ACCEPT-CHARSET=" ... " - This attribute is used to define the character encoding to be used for input. The default is a comma delimited file, represented by ACCEPT-CHARSET="ISO-8859-1". A full listing of character sets can be found in RFC2045, a summary of which can be found in the appendices at the back of this book.
ACCEPT=" ... , ... " - This attribute specifies a list of MIME types used to encode or decode to data correctly.
ACTION="URL" - This attribute is used to define the location of the CGI script or executable program which will be used to process the form data.
CLASS=" ... " - This attribute indicates the style 'class' applicable to the Element to which it has been assigned, the style 'class' being a function of a style sheet.
ENCTYPE=" ... " - This attribute is used to define the MIME formatting which will be used to submit data from the form to be processed on by the CGI script. The default is 'application/x-www-form-urlencoded'. When the data to be returned includes files (of any kind), use 'multipart/form-data'.
ID=" ... " - The ID attribute is used to assign a unique ID selector (identification) to the Element in which it is invoked. A style may be assigned to that ID, which will affect only that one instance of the attribute.
METHOD="POST or GET" - This attribute is used to specify in what format the data is to be sent to the form processor. POST will send the data as the standard, or default, input for that program. GET will send the form data as an environment variable.
NAME=" ... " - This Element is used to mark a location within a document with a unique name. This named location can then be quickly moved to by means of a hyperlink using the HREF="#URL" attribute. Note the pound (#) sign before the URL. The pound sign used in this way indicates to the browser that the target location has been defined by the NAME=" ... " attribute.
STYLE=" ... " - Used to specify which style sheet commands to apply to the instance of the STYLE attribute invoked within the Element.
TARGET=" ... " - This attribute indicates the name of the frame in which the linked document, image, or program file will be loaded. Frame names are defined with the FRAME Element.
TITLE=" ... " - The TITLE attribute is used to display a note or information in a popup window pertaining to the object to which it was assigned. The popup window is invoked by holding the mouse pointer over the object.
Constructing Your Forms
We'll begin by building a simple form with only three controls - a single line text area, a submit button, and a reset button. Examine the sample below.
<FORM NAME="form1" METHOD="get" ACTION="https://www.WalkTheGeek.com/cgi-bin/control">
<INPUT NAME="text" TYPE="text">
<INPUT NAME="reset" TYPE="reset">
<INPUT NAME="submit" TYPE="submit">
</FORM>
From the above example, you can see that there are three form controls used to send data to a CGI script located at 'https://www.WalkTheGeek,com/cgi-bin/control', as specified by the ACTION attribute. There the data will be acted upon and perhaps a reply will be sent back to the browser to be displayed in some way. The data is sent in the 'GET' method, as defined by the METHOD attribute, meaning that the form data will be sent as an appendage to the URL specified by the ACTION attribute. That is, the URL and the form data will be separated by a question mark (?). You may have noticed that many search engines on the Internet use this type of data transfer. Your query is sent to their computers, with a reply sent back that matches your search string. Using combinations of the various form controls, a very functional and aesthetically pleasing form may be constructed that is intuitive and easy to use for the user.
Examine another instance of a form control, located below. This form will use the method of 'POST', which means that the data will be sent to the server's CGI script in the form of a transaction message body, which is similar to a mail message. The location (URL) of the CGI script is still stated with the ACTION attribute. This form will have a textarea that is 30 characters wide and 10 characters high. Below the text box will be three radio buttons and two check boxes. A reset and submit button will be located below the text box, radio buttons, and checkboxes.
<FORM NAME="form1" METHOD="get" ACTION="https://www.WalkTheGeek.com/cgi-bin/control"><BR>
<TEXTAREA NAME="textbox" COLS="30" ROWS="10"></TEXTAREA><BR>
<INPUT NAME="radio1" TYPE="radio" VALUE="radio-a">Radio One<BR>
<INPUT NAME="radio2" TYPE="radio" VALUE="radio-b">Radio Two<BR>
<INPUT NAME="radio3" TYPE="radio" VALUE="radio-c">Radio Three<BR>
<INPUT NAME="checkbox1" TYPE="checkbox" VALUE="checkbox-a">CheckBox One<BR>
<INPUT NAME="checkbox2" TYPE="checkbox" VALUE="checkbox-b">CheckBox Two<BR>
<INPUT NAME="reset" TYPE="reset">
<INPUT NAME="submit" TYPE="submit">
</FORM>
You see in the above example that the form controls can be used in any order you wish. Notice that BREAK (<BR>) statements were used to position the individual form controls on their own line, except for the reset and submit buttons, which are on the same line. Any HTML Elements and attributes you have a use for may be used inside the opening and closing FORM Elements, as long as they don't interfere with the form controls themselves.
|
|
|
|
Using Event Handlers
An Event Handler is used to perform an action which you specify after a specific event has occurred. Assume that an onClick event handler has been specified for a particular Html element. When you use the mouse pointer to click on that object, a 'Click' event occurs, executing a function that has been previously defined. Using JavaScript Functions and DOM statements as the 'action' part of an event handler statement, you can add life to your web page by defining actions to be carried out whenever the user does a specific thing.
There seems to be an event handler for every conceivable action that can occur within your Html page. Examine the full list of event handlers, with a brief explanation, listed below.
onAbort - This event handler fires when the image or object being downloaded is aborted before the image has fully downloaded.
onAfterUpdate - This event handler fires after the data being referenced is updated.
onBeforeUnload - This event handler fires before the data being referenced is unloaded, to be replaced by other data or no data.
onBeforeUpdate - This event handler fires before the data being referenced is updated.
onBlur - This event handler fires when the 'focus' of the page moves to another object within your page. When this occurs, the previously 'focused' object is said to be 'blurred'.
onBounce - This event handler will execute the instruction(s) when the scrolling text of a marquee has reached the edge of the element area.
onChange - This event handler will execute the instruction(s) when a change has been made to the object to which it has been assigned. A change can be the typing of new characters, or even a change of focus from the default focus point.
onClick - This event handler fires when the object it has been assigned to is clicked on with the mouse.
onDataAvailable - This event handler fires when the data has arrived from a data source for an element. That is, when it has become available for display within your web page.
onDataSetChanged - This event handler fires when the data for an element has been changed or the new data is complete or ready.
onDataSetComplete - This event handler fires when the transfer of data from a data source to an element has completed.
onDblClick - This event handler fires when the object it has been assigned to is double-clicked with the mouse.
onDragDrop - This event handler fires when the user lets go of, or 'drops', an element from the desktop into a window or frame.
onDragStart - This event handler fires when the user selects and drags a draggable element.
onError - This event handler fires when an error has occurred in a script. With this event handler, you can define a specific action to be taken when a known error occurs.
onErrorUpdate - This event handler fires when an error has occurred in the transition from a data bound object to a data source.
onFilterChange - This event handler fires when a filter state has changed or a filter transition has completed.
onFinish - This event handler fires when the MARQUEE text has finished its loop.
onFocus - This event handler fires when the object it has been assigned to is 'focused' on. That is, when it becomes the active element of the page.
onHelp - This event handler fires when the user has chosen 'help' from the browser menu or has pressed the F1 key.
onKeyDown - This event handler fires when a key on the keyboard has been depressed down. The activating key can be defined using the 'fromCharCode' and 'charCodeAt' JavaScript methods, or the ACCESSKEY Html attribute.
onKeyPress - This event handler fires when a key on the keyboard is pressed. The activating key can be defined by using the 'fromCharCode' and 'charCodeAt' JavaScript methods, or the ACCESSKEY Html attribute.
onKeyUp - This event handler fires when a key on the keyboard is released. The activating key can be assigned using the 'fromCharCode' and 'charCodeAt' JavaScript methods, or the ACCESSKEY Html attribute.
onLoad - This event handler fires when the document has finished loading into the browser, hence the wording 'onLoad'.
onMouseDown - This event handler fires when a button on the mouse has been pressed down.
onMouseMove - This event handler fires when the mouse is moved in any way within the entire document after it has finished loading.
onMouseOut - This event handler fires when the mouse pointer passes over and away from the object to which it has been assigned. That is, when it moves out of the area taken by that object within the Html page.
onMouseOver - This event handler fires when the mouse pointer passes over the object to which it has been assigned.
onMouseUp - This event handler fires when a button on the mouse has been pressed, then released.
onMove - This event handler fires when the user has moved the browser window.
onReadyStateChange - This event handler fires when the object has changed its ready state.
onReset - This event handler fires when the event it has been assigned to has been activated. That is, when the FORM has been reset due to the pressing of a 'reset' button, for example.
onResize - This event handler fires when the user has resized a window or object. Resizing a window frame will activate this event.
onRowEnter - This event handler fires when data in a row of cells has been changed.
onRowExit - This event handler fires when the data in a row of cells is about to be changed.
onScroll - This event handler fires when the user moves the element's scrollbar.
onSelect - This event handler fires when the area has been selected. When the text inside a text area field is selected, for example.
onSelectStart - This event handler fires when the user has started to select the element, changing the 'focus' of the page to that element.
onStart - This event handler fires when the MARQUEE element has finished loading, and has started scrolling.
onSubmit - This event handler fires when the FORM it has been assigned to has been submitted.
onUnload - This event handler fires when the document is 'unLoaded'. That is, when you leave the current page.
Now that you know what actions are available to you through event handlers, you can see that with some thought that there are many ways you can incorporate them into your web page. We'll begin by using what must be the most common event handler used within today's web pages, the 'onClick' event handler. It fires when the user clicks on the page object that it has been assigned to. Examine the below example.
onClick="eventHandlerAction() ; return true"
This event handler statement will execute the instructions defined by the 'eventHandlerAction()' JavaScript Function, which you see here enclosed within quotes, as is the common and legal practice. The 'return true' part of the statement is stated here to return a 'true' value to the script, stating that the event handler, and thus the JavaScript Function, has been executed with no problems. A JavaScript function is a series of statements that describe what is to happen when the script is executed. More on JavaScript and JavaScript Functions in a later section of this book. For now, what you need to understand is that the Event Handler is the key to executing advanced JavaScript Functions. The JavaScript Function can be constructed to do just about anything you can dream up, including changing images, colors, and borders.
The Event Handler is usually stated in the form of an attribute to an Html Element, as follows.
<IMG SRC="button.jpg" WIDTH="30" HEIGHT="30" onClick="changeIt() ; return true">
This example wil execute the 'changeIt()' JavaScript function when the user clicks on the 'button.jpg' image, as defined by the SRC attribute of the IMG Element. JavaScript functions are usually plain language descriptions of what the script is intended to do. In this case, the function may be to change the 'button.jpg' image to a different image.
You may have noticed the somewhat strange way I've capitalized the words that make up my event handler function names. This is mainly to accentuate the words within the function. It is easier to see the individual wording of the function name, and thus its intended use, if you capitalize the second word within the function name. 'changeIt()' is easier to read than 'changeit(), for example. As you progress through this book, you'll see that some of the function names can be fairly long and complicated. In short, using capitalization in this way makes it easier for you to read the function.
The capitalization of a function doesn't change or effect the execution of the function itself. What may effect the execution of the function is the use of a different capitalization scheme of the function or event handler within a script. That is, the 'changeIt()' JavaScript function is different than the 'changeit()' JavaScript function, as seen in the eyes of a script. The same letter must be capitalized throughout your script, or the script will see the words as separate entities, causing errors to be thrown and headaches to ensue.
|
|
|
|
| | |
