HTML Notes

HTML (HyperText Markup Language)
HTML (HyperText Markup Language) is the lingua franca of the Internet. It is not a language per se, so you don't need any prior programming experience, though common sense is very much a required attribute! HTML is very simple, trust me.
What is HyperText?
Hypertext means that some text in the HTML document carries a link to a different location. Such links can be present either on the same page or some other page located on another computer page. On clicking this 'hot spot', the viewer is transferred to that location.
What is Markup?
Markup means that specific portions of a document are marked up to indicate how they should be displayed in the browser.
HTML carries information about the web page though, the display of the document is solely dependent on the browser. For this reason, you should test your HTML code in the two most used browsers, Internet Explorer from Microsoft and Netscape Communicator from Netscape. With HTML you can embed various objects such as images, video, sound in your pages.
HTML Lesson 1
Introduction
HTML stands for HyperText Markup Language. HTML is basically a text file that is marked up with codes that are called tags. These tags tell web browsers what to do with the web page elements. Without these tags the browser would only display text files. Tags There are two kinds of tags in HTML, container tags and empty tags. Then there are tag attributes in which they enhance the way the tag displays the content on the page. All tags consist of either <> or </>, these are called angle brackets. These tell the browser that the text between them is an HTML command and tell the browser how to display the content. Container Tags need both an opening tag <> and a closing tag </>. These tell the browser when to begin a command and when to end it. Most tags are comprised of container tags.
Empty Tags are made up of just the opening tag, the closing tag is not needed. The three most common empty tags are <HR> horizontal rule, <BR> line break, and <P> paragraph. The <P> can be used as an empty tag or a container tag with the closing tag being </P>. It is considered more proper to use the paragraph tags as container tags. Attributes are added to a tag to enhance the way the tag displays the content on the page. They are made up of three components, the name of the attribute, the = sign and the value of the attribute. Attributes are optional. Basic Structure Tags are the tags required by the browser , without them the browser will not recognize the file as being an HTML file and the if the page loaded it would not be displayed properly. These tags are the <HTML> <HEAD> <TITLE> and <BODY> tags. When using FrontPage or AceHTML these tags are automatically included in any new page. <HTML> This is the first tag on the page and it tells the web browser that it is an HTML document. Then at the very end of the page the </HTML> tag is displayed to tell the browser that the document is finished. <HEAD> This tag holds the page title, meta tags, javascript, style sheets. When this information is finished it would end with the </HEAD> tag. <TITLE> This tag tells the browser the name of the page. This will be displayed in the browsers title bar. The end tag for this is </TITLE> <BODY>This tag will hold all the information you want displayed on the page. When you have finished entering your data you want displayed you would end it with </BODY>. Putting all the basic structure tags together your page would look as follows: <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> </BODY> </HTML> Paragraphs are created by using the <P> tag, it is not mandatory to use the end tag </P> but it will assist you in easily recognizing where a paragraph begins and ends when editing a page. You enter the <P> tag just before your paragraph and then the </P> tag at the end of your paragraph. If you enter more than one paragraph on a page a double space will be left between each paragraph.
You can align your paragraphs by using attributes. The alignment attributes are Left, Right, Center and Justify. These attributes would be entered as follows: <P ALIGN=LEFT> <P ALIGN=RIGHT> <P ALIGN=CENTER> <P ALIGN=JUSTIFY> If no attribute is included it will default to left. When ending any one of these attributes the end tag still remains at </P>. You can also center a paragraph by using the <CENTER></CENTER> tags if you wish. Blockquoting is similar to using the tab function on the keyboard. It will indent your text. The start tag is <BLOCKQUOTE> and the end tag is </BLOCKQUOTE>. You can even use a series of blockquotes enabling you to indent the text as many times as you need. Line Breaks are accomplished using the <BR> tag. It is similar to the paragraph tag except that it leaves only a single line instead of a double line. This tag is an empty tag so it does not require an end tag to use it. Headings are used to create titles and arrange information. Headings create a bold text in six sizes. <H1> being the largest and <H6> being the smallest. The tags for each size is as follows: <H1>Your text</H1> <H2>Your text</H2> <H3>Your text</H3> <H4>Your text</H4> <H5>Your text</H5> <H6>Your text</H6> You can align the headings in the same manner as aligning paragraphs although justify probably wouldn't really work for a title. Coding a heading with an alignment attribute would look as follows: <H1 ALIGN=CENTER>Your text</H1> Lists are useful to provide information in a structured format. There are three kinds of lists, ordered, which numbers the list items chronologically; unordered, which lists the items in a bulleted fashion; and the definition list which produce term/definition pairs. Ordered List start tag is <OL> and end tag is </OL> and each item in the list will begin with <LI>. An ordered list will look as follows: <OL> <LI> Item one <LI> Item two <LI> Item three
<OL> <LI> Item A <LI> Item B <LI> Item C </OL> <LI> Item four <LI> Item five </OL> and will look as follows when seen in the web browser 1. Item one 2. Item two 3. Item three
1. Item A 2. Item B 3. Item C
4. Item four 5. Item five The ordered list has the following attributes: 1 Numbers (default) A Uppercase letters a Lowercase letters I Uppercase Roman Numerals i Lowercase Roman Numerals The tag with attributes will look like this: <OL TYPE="I"> Unordered List start tag is <UL> and end tag is </UL> and each item in the list will begin with <LI>. An unordered list will look as follows: <UL> <LI> Item one <LI> Item two <LI> Item three <UL> <LI> Item A <LI> Item B <LI> Item C </UL> <LI> Item four <LI> Item five </UL>
and will look as follows when seen in the web browser

Item one Item two Item three o Item A o Item B o Item C Item four Item five
The unordered list has the following attributes: Disc - Bullet in the shape of a disc Square - Bullet in the shape of a square Circle - Bullet in the shape of a circle The tag with attributes will look like this: <UL TYPE="Disc"> Definition List start tag is <DL> and end tag is </DL>. Each term is started with <DT> and each definition is started with <DD> Example of a definition list: <DL> <DT>FrontPage<DD>A Web Editor <DT>Windows<DD>An Operating System <DT>Paintshop Pro<DD>A Graphics Editor </DL> and it would look like this in your web browser:
FrontPage A Web Editor Windows An Operating System Paintshop Pro A Graphics Editor
Menu List start tag is <MENU> and the end tag is </MENU>. Even though the start tag and end tag are different this list looks identical to the bulleted list. Example of a Menu list: <MENU> <LI>eggs</LI> <LI>bacon</LI> <LI>toast</LI> <LI>orange juice</LI> <LI>coffee</LI> </MENU> will come out like this in the browser:
eggs bacon toast orange juice coffee
Directory List start tag is <DIR> and the end tag is </DIR> and as with the Menu List it will produce the same list as the bulleted list. Horizontal Rule is used to separate parts of a web page. The tag for the horizontal rule is <HR> and it is an empty tag so it does not need an end tag. The attributes of the horizontal rule are as follows:
SIZE this adjusts the thickness of the rule WIDTH this adjusts the width of the rule, can be specified as a percentage of the screen or absolute ALIGN aligns to the left, right or center of the page NOSHADE removes the 3D look the horizontal rule usually has
Examples <HR SIZE=10>
<HR WIDTH=50%>
<HR WIDTH=100>
<HR ALIGN=RIGHT WIDTH=50%>
<HR NOSHADE>
HTML Elements
HTML elements exist on many levels. Everything you see in front of you, the paragraph texts, the Tizag banner, and the navigation links on the left are all elements of this web page. An element in HTML is a loose term that describes each individual piece of your web page. An element consists of three basic parts: an opening tag, the element's content, and finally, a closing tag.
1. <p> - opening paragraph tag 2. Element Content - paragraph words 3. </p> - closing tag
Every (web)page requires four critical elements: the html, head, title, and body elements.
The <html> Element...</html>

<html> begins and ends each and every web page. Its sole purpose is to encapsulate all the HTML code and describe the HTML document to the web browser. Remember to close your HTML documents with the corresponding </html> tag at the bottom of the document. If you haven't already, open up Notepad or Crimson Editor and have a new, blank document ready to go. Copy the following HTML code into your text editor.
HTML Code:
<html> </html>
Now save your file by Selecting Menu and then Save. Click on the "Save as Type" drop down box and select the option "All Files". When asked to name your file, name it "index.html", without the quotes. Double check that you did everything correctly and then press save. Now open your file in a new web browser so that you have the ability to refresh your page and see your changes. If you opened up your index.html document, you should be starring at your very first blank (white) web page!
The <head> Element

The <head> element is "next" as they say. As long as it falls somewhere between your <html> tag and your web page content (<body>), you're golden. The head functions "behind the scenes." Tags placed within the head element are not directly displayed by web browsers. We will be placing the <title> element here and we'll talk about the other possible elements in later lessons. Other elements used for scripting (Javascript) and formatting (CSS) will eventually be introduced and you will have to place them within your head element. For now, your head element will continue to lay empty except for the title element that will be introduced next. Here's a sample of the initial set up.
HTML Code:
<html> <head> </head> </html>
As of yet, we still have nothing happening on the web page. All we have so far is a couple of necessary elements that describe our document to the web browser. Content (stuff you can see) will come later.
The <title> Element

Place the <title> tag within the <head> element to title your page. The words you write between the opening and closing <title></title> tags will be displayed at the top of a viewer's browser. Here's the html code:
HTML Code:
<html> <head> <title>My WebPage!</title> </head> </html>
Save the file and open it in your browser. You should see "My WebPage!" in the upper-left, as the window's title. Name your webpage as you please, just keep in mind, the best titles are brief and descriptive.
The <body> Element

The <body> element is where all content is placed. (Paragraphs, pictures, tables, etc). As the menu on the left suggests, we will be looking at each of these elements in greater detail as the tutorial progresses. For now, it is only important to understand that the body element will encapsulate all of your webpage's viewable content.
HTML Code:
<html> <head> <title>My WebPage!</title> </head> <body> Hello World! All my content goes here! </body> </html>
Beginning HTML Tags!

A web browser reads an HTML document top to bottom, left to right. Each time the browser finds a tag, it is displayed accordingly (paragraphs look like paragraphs, tables look like tables, etc). Tags have 3 major parts: opening tag(s), content(s), and closing tag(s). Recall that a completed tag is termed an element. By adding tags to an HTML document, you signal to the browser "Hey look, I'm a paragraph tag, now treat me as such."
Advertise on Tizag.com
As you will learn, there are probably hundreds of HTML Tags. Tables, images, lists, forms, and everything else being displayed on an web page requires the use of a tag or two.
HTML Code:
<openingtag>Content</closingtag> <p>A Paragraph Tag</p>
Tags should be lower-case letters if you plan on publishing your work. This is the standard for XHTML and Dynamic HTML. Here's quick look at some HTML tags.
HTML Tags:
<body>Body Tag (acts as a content shell) <p>Paragraph Tag</p> <h2>Heading Tag</h2> <b>Bold Tag</b> <i>Italic Tag</i> </body>
Tags Without Closing Tags

There are a few tags that do not follow the mold above. In a way, they still have the 3 parts (opening/closing and content). These tags however do not require a formal </closingtag> but rather a modified version. The reason being that these tags do not really require any content. Rather some of them just need a source URL and this is enough information for the web browser to display the tag properly (image tags). Let's take a look at a line break tag.
HTML Code:
<br />
To tell the browser we want to place a line break (carriage return) onto the site, it is not necessary to type <br>linebreak</br>. If every line break tag needed all three components as other do, life would become redundant real quick. Instead the better solution was to combine the
opening and closing tags into a single format. Other tags have also been modified such as the image tag and input tag.
HTML Code:
<img src="../mypic.jpg" /> -- Image Tag <br /> -- Line Break Tag <input type="text" size="12" /> -- Input Field
Display:
--Line Break--
As you can see from the above image tag, your browser is completely capable of interpreting this tag so long as we tell the browser where the image is located using the src attribute. More on attributes in the next lesson.
HTML - Formatting Elements w/ Tags

As you begin to place more and more elements onto your web site, it will become necessary to make minor changes to the formatting of those elements. In our HTML Attributes lesson we discussed ways to add some flavor with attributes and align elements within other elements. Several tags exist to further amplify text elements. These formatting tags can make text bold, italic, sub/superscripted, and more.
Bold, Italic and More
HTML Code:
<p>An <p>An <p>An <p>An <p>An <p>An <p>An <p>An example example example example example example example example of of of of of of of of <b>Bold Text</b></p> <em>Emphasized Text</em></p> <strong>Strong Text</strong></p> <i>Italic Text</i></p> <sup>superscripted Text</sup></p> <sub>subscripted Text</sub></p> <del>struckthrough Text</del></p> <code>Computer Code Text</code></p>
HTML Formatting:
An example of Bold Text An example of Emphasized Text An example of Strong Text An example of Italic Text An example of superscripted Text An example of subscripted Text An example of struckthrough Text An example of Computer Code Text
All of these tags add a pinch of flavor to paragraph elements. They can be used with any text type element.
HTML - Formatting Tag Usage

These tags should be used sparingly. And what we mean by that is that you should only use them to bold or italicize one or two words in your elements at a time. If you wish to bold an entire paragraph a better solution would involve Cascading Style Sheets, and you should consult how to do that in our CSS Tutorial. Ultimately the decision is yours, the web developer. Being a voice of experience, keep the use of these tags quick and sparse.
Div Element(s)/tag
The <div> tag is nothing more than a container for other tags. Much like the body tag, Div elements are block elements and work behind the scenes grouping other tags together. Use only the following attributes with your div element, anything else should be reserved for CSS. (CSS Tutorial)

id width height title style
For the purpose of this example, we have included the style attribute in order to color our div tag in order to bring a stronger visualization for our viewers.
HTML Code:
<body> <div style="background: green"> <h5 >SEARCH LINKS</h5> <a target="_blank" href="http://www.google.com">Google</a> </div> </body>
HTML Div Element:

SEARCH LINKS Google
Above is a great visual about how a div plays the role of a container for other HTML elements, applying a background color/image is the only real way to visualize your div tags.
HTML - Div Layouts

When HTML first began, web creators only had two choices. A table layout, or frames. The div element provides a 3rd alternative, since a div can contain any/every other type of html element within its beginning and ending tag.
HTML Code:
<div id="menu" align="right" > <a href="">HOME</a> | <a href="">CONTACT</a> | <a href="">ABOUT</a> </div> <div id="content" align="left" bgcolor="white"> <h5>Content Articles</h5> <p>This paragraph would be your content paragraph with all of your readable material.</p> </div>
HTML Div Layout:

This paragraph would be your content paragraph with all of your readable material. Advanced web developers find div elements to be far easier to work with than tables, adding more content or more links to our previous example might demonstrates why a div is simpler to work with. Let's add a "LINKS" page to our menu, and another article of content below the existing content.
HTML Code:
<div id="menu" align="right" > <a href="">HOME</a> | <a href="">CONTACT</a> | <a href="">ABOUT</a> | <a href="">LINKS</a> </div> <div id="content" align="left" > <h5>Content Articles</h5> <p>This paragraph would be your content paragraph with all of your readable material.</p> <h5 >Content Article Number Two</h5> <p>Here's another content article right here.</p> </div>
HTML Div Layout II:

HOME | CONTACT | ABOUT | LINKS Content Articles
This paragraph would be your content paragraph with all of your readable material.
Content Article Number Two
Here's another content article right here.
Ordered and unordered Lists

There are 3 different types of lists. A <ol> tag starts an ordered list, <ul> for unordered lists, and <dl> for definition lists. Use the type and start attributes to fine tune your lists accordingly.

<ul> - unordered list; bullets <ol> - ordered list; numbers <dl> - definition list; dictionary
HTML Ordered Lists

Use the <ol> tag to begin an ordered list. Place the <li> (list item) tag between your opening <ol> and closing </ol> tags to create list items. Ordered simply means numbered, as the list below demonstrates.
HTML Code:
<h4 align="center">Goals</h4> <ol> <li>Find a Job</li> <li>Get Money</li> <li>Move Out</li> </ol>
Numbered list:
Goals
1. Find a Job 2. Get Money 3. Move Out
Start your ordered list on any number besides 1 using the start attribute.
HTML Code:
<h4 align="center">Goals</h4> <ol start="4" > <li>Buy Food</li> <li>Enroll in College</li> <li>Get a Degree</li> </ol>
Numbered List Start:

Goals
4. Buy Food 5. Enroll in College 6. Get a Degree
Nothing fancy here, start simply defines which number to begin numbering with.
HTML Ordered Lists Continued

There are 4 other types of ordered lists. Instead of generic numbers you can replace them with Roman numberals or letters, both capital and lower-case. Use the type attribute to change the numbering.
HTML Code:
<ol <ol <ol <ol type="a"> type="A"> type="i"> type="I">
Ordered List Types:

Lower-Case Letters a. Find a Job b. Get Money c. Move Out Upper-Case Letters A. Find a Job B. Get Money C. Move Out Lower-Case Numerals Upper-Case Numerals i. ii. Find a Job Get Money Move Out I. II. Find a Job Get Money Move Out
iii.
III.
HTML Unordered Lists

Create a bulleted list with the <ul> tag. The bullet itself comes in three flavors: squares, discs, and circles. The default bullet displayed by most web browsers is the traditional full disc.
HTML Code:
<h4 align="center">Shopping List</h4> <ul> <li>Milk</li> <li>Toilet Paper</li> <li>Cereal</li> <li>Bread</li> </ul>
Unordered Lists:
Shopping List

Milk Toilet Paper Cereal Bread
Here's a look at the other flavors of unordered lists may look like.
HTML Code:
<ul type="square"> <ul type="disc"> <ul type="circle">
Unordered List Types:

type="square"

type="disc"

type="circle"
o o o o
HTML Definition Term Lists

Make definition lists as seen in dictionaries using the <dl> tag. These lists displace the term word just above the definition itself for a unique look. It's wise to bold the terms to displace them further.

<dl> - defines the start of the list <dt> - definition term <dd> - defining definition
HTML Code:
<dl> <dt><b>Fromage</b></dt> <dd>French word for cheese.</dd> <dt><b>Voiture</b></dt> <dd>French word for car.</dd> </dt>
HTML Code:
Fromage French word for cheese. Voiture French word for car.
HTML Forms
HTML forms are used to pass data to a server. A form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more. A form can also contain select lists, textarea, fieldset, legend, and label elements. The <form> tag is used to create an HTML form: <form> . input elements . </form>
HTML Forms - The Input Element

The most important form element is the input element. The input element is used to select user information. An input element can vary in many ways, depending on the type attribute. An input element can be of type text field, checkbox, password, radio button, submit button, and more. The most used input types are described below.
Text Fields
<input type="text" /> defines a one-line input field that a user can enter text into: <form> First name: <input type="text" name="firstname" /><br />
Last name: <input type="text" name="lastname" /> </form> How the HTML code above looks in a browser: First name: Last name: Note: The form itself is not visible. Also note that the default width of a text field is 20 characters.
Password Field
<input type="password" /> defines a password field: <form> Password: <input type="password" name="pwd" /> </form> How the HTML code above looks in a browser: Password: Note: The characters in a password field are masked (shown as asterisks or circles).
Radio Buttons
<input type="radio" /> defines a radio button. Radio buttons let a user select ONLY ONE of a limited number of choices: <form> <input type="radio" name="sex" value="male" /> Male<br /> <input type="radio" name="sex" value="female" /> Female </form> How the HTML code above looks in a browser: Male Female
Checkboxes
<input type="checkbox" /> defines a checkbox. Checkboxes let a user select ONE or MORE options of a limited number of choices. <form> <input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br /> <input type="checkbox" name="vehicle" value="Car" /> I have a car </form> How the HTML code above looks in a browser: I have a bike I have a car
Submit Button
<input type="submit" /> defines a submit button. A submit button is used to send form data to a server. The data is sent to the page specified in the form's action attribute. The file defined in the action attribute usually does something with the received input: <form name="input" action="html_form_action.asp" method="get"> Username: <input type="text" name="user" /> <input type="submit" value="Submit" /> </form> How the HTML code above looks in a browser: Username: If you type some characters in the text field above, and click the "Submit" button, the browser will send your input to a page called "html_form_action.asp". The page will show you the received input.
HTML Form Tags

Tag Description
<form> <input />
Defines an HTML form for user input Defines an input control
<textarea> Defines a multi-line text input control <label> <fieldset> <legend> <select> Defines a label for an input element Defines a border around elements in a form Defines a caption for a fieldset element Defines a select list (drop-down list)
<optgroup> Defines a group of related options in a select list <option> <button> Defines an option in a select list Defines a push button
HTML - Checkbox Forms

Checkboxes are another type of <input /> form. We set the type attribute to check and we also must set a name and value attribute for them to be at all helpful.
HTML Code:
<p>Please select every sport that you play.</p> Soccer: <input type="checkbox" name="sports" value="soccer" /><br /> Football: <input type="checkbox" name="sports" value="football" /><br /> Baseball: <input type="checkbox" name="sports" value="baseball" /><br /> Basketball: <input type="checkbox" name="sports" value="basketball" />
Checkboxes:
Please select every sport that you play. Soccer: Football:
Baseball: Basketball:
Checkboxes are used for instances where a user may wish to select multiple options, a sort of check all that apply question.
HTML Checkboxes Selected

It is possible to precheck the input boxes for your viewers using the checked attribute. Simply set the checked attribute to yes or no.
HTML Code:
<p>Please select every sport that you play.</p> Soccer: <input type="checkbox" checked="yes" name="sports" value="soccer" /> <br /> Football: <input type="checkbox" name="sports" value="football" /> <br /> Baseball: <input type="checkbox" name="sports" value="baseball" /> <br /> Basketball: <input type="checkbox" checked="yes" name="sports" value="basketball" />
Checked Checkboxes:
Please select every sport that you play. Soccer: Football: Baseball: Basketball:
HTML - Radio Forms

Radios are types of input forms that allow a user to pick an either/or type of selection. In order to achieve this, we must properly name each radio button selection accordingly. These types of forms must be named.
HTML Code:
Italian: <input type="radio" name="food" /> Greek: <input type="radio" name="food" /> Chinese: <input type="radio" name="food" />
Radios:
Italian: Greek: Chinese:
By naming these three radios "food" they are identified as being related by the browser and we achieve this either or effect (only being able to make one selection). We can further expand this idea and name two different sets of radios.
HTML Code:
Italian: <input type="radio" name="food" /> Greek: <input type="radio" name="food" /> Chinese: <input type="radio" name="food" /> Male: <input type="radio" name="gender" /> Female: <input type="radio" name="gender" />
Multiple Radios:
Italian: Greek: Chinese: Male: Female:
Here we have two sets of radio selections contained within the same form.
HTML - Radio Checked

By using the checked attribute, we can tell our form to automatically "check" a default radio.
HTML Code:
Italian: <input type="radio" name="food" checked="yes" /> Greek: <input type="radio" name="food" /> Chinese: <input type="radio" name="food" />
Default Italian:
HTML Code:
Italian: <input type="radio" name="food" /> Greek: <input type="radio" name="food" checked="yes" /> Chinese: <input type="radio" name="food" />
Default Greek:
HTML Code:
Italian: <input type="radio" name="food" /> Greek: <input type="radio" name="food" /> Chinese: <input type="radio" name="food" checked="yes" />
Default Chinese:
HTML - Textareas
Textareas retrieve "blog" type information from the user. Paragraphs, essays, or memos can by cut and pasted into textareas and submitted. Textareas have an opening and a closing tag, any words placed between them will appear inside your text area.
HTML Code:
<textarea>Text Area!</textarea>
Default Textarea:
Text Area!
HTML - Text area Cols and Rows

Adjusting the size of the appearance of the text area requires two attributes, cols and rows. Use a numeric value for each attribute and the larger the value the larger the field will appear.
HTML Code:
<textarea cols="20" rows="10">Text Area!</textarea> <textarea cols="40" rows="2">Text Area!</textarea> <textarea cols="45" rows="5">Text Area!</textarea>
Bigger Text Areas:
Text Area!
Text Area!
Text Area!
A text area could take up an entire page if required.
HTML - Textarea Wrap

The wrap attribute refers to how the text reacts when it reaches the end of each row in the text field. Wrapping can be one of three settings:

soft hard off
Soft forces the words to wrap once inside the text area but when the form is submitted, the words will no longer appear as such (Line breaks will not be added). Hard wraps the words inside the text box and places line breaks at the end of each line so that when the form is submitted it appears exactly as it does in the text box. Off sets a textarea to ignore all wrapping and places the text into one ongoing line.
HTML Code:
<textarea cols="20" rows="5" wrap="hard"> As you can see many times word wrapping is often the desired look for your textareas. Since it makes everything nice and easy to read. </textarea>
Text Area Wrapping:

As you can see many w rapping is often the everything nice and e
HTML Code:
<textarea cols="20" rows="5" wrap="off"> As you can see many times word wrapping is often the desired look for your textareas. Since it makes everything nice and easy to read. </textarea>
No Wrapping:
As you can see many w rapping is often the everything nice and e
HTML - Textarea Readonly

Settting a yes or no value for the readonly attribute determines whether or not a viewer can manipulate the text inside the text field.
HTML Code:
<textarea cols="20" rows="5" wrap="hard" readonly="yes"> As you can see many times word wrapping is often the desired look for your text areas. Since it makes everything nice and easy to read. </textarea>
Read Only Textareas:

As you can see many is often the desired lo nice and easy to read
Now you may not change the text inside the text area. However, you can still highlight or Ctrl-C and copy the texts.
HTML - Disabled
As the readonly attribute disables text manipulation, we can take things one step further by setting the disabled attribute. This grays out the textarea altogether and inhibits any change in the text as well as text highlighting.
HTML Code:
<textarea cols="20" rows="5" wrap="hard" disabled="yes"> As you can see many times word wrapping is often the desired look for your text areas. Since it makes everything nice and easy to read. </textarea>
Disabled Textareas:
As you can see many is often the desired lo nice and easy to read
HTML - Upload Forms

Use an upload form to allow users to upload pictures, movies, or even their own webpages. An upload form is another type of input form, simply set the type attribute to file.
HTML Code:
<input type="file" />
Upload Form:
Max File Size
To limit the size of the file being uploaded and saving you precious webserver space. We make use of a hidden input field and set a few specific attributes.
HTML Code:
<input type="hidden" name="MAX_FILE_SIZE" value="500" /> < input type="file" />
Max File Size:
The value specified is the maximum allowable KB to be uploaded via this form. A value of 100 will allow a file up to 100kb.
HTML - Selection Forms and Drop Down Lists

Drop down lists are the basic selection forms. You have probably seen them already on the internet, maybe filling out a personal profile and selecting the state in which you live. Drop down lists have several options a user can select.
HTML Code:
<select> <option>California -- CA</option> <option>Colorado -- CO</option> <option>Connecticut -- CN</option> </select>
Drop Down List:

By default the first coded <option> will be displayed or selected as the default. We can change this using the selected attribute.
HTML Code:
<select> <option>California -- CA</option> <option>Colorado -- CO</option> <option selected="yes">Conneticut -- CN</option> </select>
Drop Down List:
HTML - Selection Forms

We use the size attribute to break out from the single displayed drop down list.
HTML Code:
<select size="3"> <option>California -- CA</option> <option>Colorado -- CO</option> <option>Connecticut -- CN</option> </select>
Selection Forms:
HTML - Selecting Multiples
We can further add to our selection forms by adding the multiple attribute. This allows the user to select more than one entry from your selection forms. Obviously this attribute does not work with the single drop down lists.
HTML Code:
<select multiple="yes" size="3"> <option>California -- CA</option> <option>Colorado -- CO</option> <option>Connecticut -- CN</option> </select>
Multiple Selections:
Now the user may select any or all states that apply to them.
HTML - Submit Buttons

Submission buttons are a type of <input /> tag. Set the type attribute to submit. This creates a special type of button in your forms that will perfom the form's set action. We learned about the action attribute in our HTML Forms lesson.
HTML Code:
<input type="submit" value="Submit" /><br /> <input type="submit" value="Send" /><br /> <input type="submit" value="Submit Form" /><br />
Submit Buttons:
Notice that in the above example we also changed what was written on our button using the value attribute. This can be changed to any value you wish.
Form Submission - Action

For a submission button to accomplish anything it must be placed inside of a form tag with an action and a method. The action is always set to a server side scripting file such as a PHP, PERL, or ASP file. Another choice may be to set the action to mailto followed by an email address, and the form will be emailed to the specified address. Mailto has been depreciated, however for the purpose of this example and to get a feel for form submission, it will work great in our example.
HTML Code:
<form method="post" action="mailto:youremail@youremail.com" > First:<input type="text" name="First" size="12 maxlength="12" /> Last:<input type="text" name="Last" size="24" maxlength="24" /> <input type="submit" value="Send Email" /> </form>
Form Action:
First: Last:
Fill out the above form and as your mail program opens, you can change the email address to your email and then send yourself the results of your form.
HTML Reset Buttons

Reset buttons exist to reset the fields of your form. These are handy for very large forms and the user is having difficulty or simply needs to start filling in the form from scratch.
HTML Code:
<input type="reset" value="Reset" /> <input type="reset" value="Start Over" />
Reset Button:
HTML Reset in Action

To actually make submit and reset buttons function with your other input fields. They need to be placed within a form tag. HTML Forms has some great examples of how to use the form tag properly.
HTML Code:
<form action="myphp.php" method="post"> <input type="text" size="12" maxlength="12" /> <input type="text" size="24" maxlength="24" /> <input type="reset" value="Reset" /> </form>
Reset Forms:
Fill out some information in the field boxes and press reset to experience a reset form!
HTML - Hidden Field

Hidden fields are not displayed by the browser, there are a number of uses for them. When dealing with forms you will usually find yourself using some sort of database mechanism: MySQL, SQL Server, or maybe justa plain text file. In any case use hidden forms to pass along information to your database that may have already been received from the user. In this rare case, a hidden form field may come in handy.
A hidden HTML field is used to pass along variables w/ values from one form to another page without forcing the user to re-enter the information. Use the type attribute to specify a hidden field.
HTML Code:
<input type="hidden" />
Hidden Fields:
There is no display of your hidden field in the box because the browser is told to hide them from view. Our field above is incomplete and pretty much useless as it is. Adding a name and a value attribute will change this.
HTML - Name and Value the Fields

Naming your fields can be accomplished in two different ways discussed previously. Use the id or name attribute to specify a name for your hidden field.
HTML Code:
<input type="hidden" id="age" name="age" value="23" /> <input type="hidden" id="DOB" name="DOB" value="01/01/70" /> <input type="hidden" id="admin" name="admin" value="1" />
Above we have demonstrated 3 possible hidden fields that you may want to pass along some form at some point, especially if you have any kind of user base where returning users must log in. The admin field could be used to check some sort of user level entry of a returning user; 1 being administrator and 0 being non-administrator access. Use hidden fields when you have variables you want to pass from one form to another without forcing the user to re-type information over and over again.
Frames syntax: overview

HTML Frames
Frames allow for multiple ".html" documents to be displayed inside of one browser window at a time. This means that one page has no content on it, but rather tells the browser which web pages
you would like to open. With the addition of CSS and PHP, frames have become outdated, but if you wish to use them, read on.
Frames - A Generic Frame Page

Frames are most typically used to have a menu in one frame, and content in another frame. When someone clicks a link on the menu that web page is then opened on the content page. Here is a classic example of a basic "index" frameset with a menu on the left and content on the right.
HTML Code:
<html> <head> </head> <frameset cols="30%,*"> <frame src="menu.html"> <frame src="content.html"> </frameset> </html>
Frame Set:
Here's the example: Frame Index

frameset - The parent tag that defines the characteristics of this frames page. Individual frames are defined inside it. frameset cols="#%, *"- Cols(columns) defines the width that each frame will have. In the above example we chose the menu (the 1st column) to be 30% of the total page and used a "*", which means the content (the 2nd column) will use the remaining width for itself. frame src="" -The location of the web page to load into the frame.
A good rule of thumb is to call the page which contains this frame information "index.html" because that is typically a site's main page.
Adding a Banner or Title Frame

Add a row to the top for a title and graphics with the code as follows:
HTML Code:
<html><head></head> <frameset rows="20%,*">
<frame src="title.html"> <frameset cols="30%,*"> <frame src="menu.html"> <frame src="content.html"> </frameset> </html>
frameset rows="#%, *"- rows defines the height that each frame will have. In the above example we chose the new title (the 1st row) to be 20% of the total page height and used a "*", which means that menu and content (which are the 2nd row) will use the remaining height.
FrameBorder and FrameSpacing

You probably noticed those ugly gray lines that appear between the frames. It is possible to remove these and manipulate the spacing between frames with frameborder and framespacing. These attributes appear within the frameset tag. Note: Framespacing and border are the same attribute, but some browsers only recognize one or the other, so use both, with the same value, to be safe.

frameborder="#" - A zero value shows no "window" border. border="#"- Modifies the border width, used by Netscape. framespacing="#" -Modifies the border width, used by Internet Explorer.
Here's an example of the same frameset without the borders.
HTML Code:
<html><head></head> <frameset border="0" frameborder="0" framespacing="0" rows="20%,*"> <frame src="title.html"> <frameset border="0" frameborder="0" framespacing="0" cols="30%,*"> <frame src="menu.html"> <frame src="content.html"> </frameset> </html>
Frame Borders:
Here's a visual:Visual
Frame Name and Frame Target

How nice would it be to make each menu link load into the content page? We do this by naming each frame and setting the correct base target inside menu.html.
HTML Code:
<html><head></head> <frameset rows="20%,*"> <frame name="title" src="title.html"> <frameset cols="30%,*"> <frame name="menu" src="menu.html"> <name="content" src="content.html"> </frameset> </html>
HTML Code:
<html> <head> <base target="content"> </head> ... </html>
Frame Target:
Here's the Visual: Visual
We first named the content frame "content" on our frame page and then we set the base target inside menu.html to point to that frame. Our frame page is now a perfectly functional menu & content layout!
Noresize and Scrolling

It's possible to further customize the <frame> tag using the noresize and scrolling="" attributes.
HTML Code:
<html><head></head> <frameset border="2" frameborder="1" framespacing="2" rows="20%,*"> <frame src="title.html" noresize scrolling="no"> <frameset border="4" frameborder="1" framespacing="4" cols="30%,*"> <frame src="menu.html" scrolling="auto" noresize> <frame src="content.html" scrolling="yes" noresize> </frameset> </html>
Noresize and Scrolling:

Here's the Visual: Visual

noresize - Do not let the frames be resized by the visitor. scrolling="(yes/no)"- Allow scrolling or not inside a frame.
We set the scrolling for our content frame to yes to ensure our visitors will be able to scroll if the content goes off the screen. We also set the scrolling for our title banner to no, because it does not make sense to have a scrollbar appear in the title frame.
As there is no formal standard for frames, it is rather hard to say exactly what is correct syntax. We only have Netscape's frames howto as a guideline. Also, each site discussing frames appears to use different terms. This site is no exception :-), although I hope that the terminology used here is clear enough.
Introduction
The term frames is used as a shorthand for "a technique to display multiple documents at once". This technique is only useful when the browser is running on a graphical display. Other platforms, such as a speech browser, or a console-mode browser, either do not know the concept of "multiple displays" or have only limited screen space. Thus, other terms and descriptions will focus on graphical browsers.
Terminology
A browser displays a document in a window. A frame is a (rectangular) region in the window. It can have a name, so it can be addressed or targeted by links in documents. If a screen is divided into regions, each one is a frame, and the particular combination of frames is called the frameset. To use frames, one document must define the frameset, so that other documents can be displayed in each frame. This document is called the frameset document, or just frameset for short. When a document displayed in a frame is itself a frameset document, the frames are said to nest.
Frame-related HTML elements

There are three new HTML elements which are used to set up a frameset document.

The FRAMESET element defines a row or a column in a frameset. The FRAME element specifies a document that is to be displayed in a frame. The NOFRAMES element is used to indicate content that should be displayed when the browser used is unable to display frames.
Targeting frames
When a frame has a name, it is possible to target it with a link. This is done using the TARGET attribute. Normally, a link in a document will, when followed, update the frame that the document is in. But when the link uses the TARGET attribute to specify another frame, that frame will be updated instead.
Assorted attributes
Various browsers have implemented other attributes for the FRAMESET and FRAME elements to "enhance" frame display, remove scrollbars or dividing lines and similar things. Their support is limited and their value is IMO questionable. They are included here for completeness, but authors should be aware that their use can cause serious problems.
Frames syntax: the FRAMESET element

A frameset document uses the FRAMESET element instead of the standard HTML element BODY. The element specifies either a series of rows or columns. Inside the FRAMESET opening and closing tags, each row or column is set up using the FRAME element. To set up a combination of columns and rows, use FRAMESET instead of FRAME.
Syntax for FRAMESET

The FRAMESET element has required opening and closing tags. It has two attributes, ROWS and COLS. One, and only one, of these must be used in every FRAMESET tag. The syntax for both attributes is the same, but using ROWS defines a series of rows, and COLS defines a series of columns.
Defining rows or columns

In the ROWS or COLS attribute, the width (or height) of each row or column is specified as a series of comma-separated values. A value can be given in pixels or as a percentage. Percentages are given as n%, where n is a number between 0 and 100. Numbers are assumed to be pixel values. Relative values can also be given, using the special * value. The width or height of columns whose value is given using * is determined after pixel width and percentage widths have been allocated. Using * just once means "remaining space should be assigned to this frame." If it is used multiple times in a series, the remaining space is divided equally between all the frames in question. If a number is put before the *, then it is interpreted as a relative weight. Examples
<FRAMESET ROWS="100,200">
This specifies two rows. The first row (upper row) is 100 pixels high and the second, lower row is 200 pixels high. If the display is more than 300 pixels high, the rows are both resized proportionally.
<FRAMESET COLS="50%,50%">
Here two equal-sized columns are specified. This is equal to <FRAMESET COLS="*,*">.
<FRAMESET COLS="33%,33%,*">
This is the recommended way to specify three columns. If COLS="33%,33%,33%" was used instead, there would have been a 1% of screen space unallocated, which would mean that one (randomly chosen) column would be slightly wider. Because now * is used for the third column, this one will be slightly wider.
<FRAMESET ROWS="100,*,2*">
Three rows are defined. The first one is 100 pixels high. The height of the other two is determined next. The remaining space is divided into three portions, of which the second row gets one, and the third row gets two. Note that, if the values given do not match the browser window sizes, or are invalid (for example, a series of percentages that exceeds 100) the browser resizes all values proportionally to make them "fit".
Structure of a frameset document

The frameset document, which contains the FRAMESET element(s) used to set up the frameset, differs from a normal HTML 3.2 document in one aspect: it does not have a BODY section. The FRAMESET element replaces BODY. The HEAD section of the document is still according to HTML 3.2 rules.
<HTML> <HEAD> <TITLE>A sample frameset document</TITLE> </HEAD> <FRAMESET ROWS="*,*"> <FRAME SRC="foo.html" NAME=foo> <FRAME SRC="bar.html" NAME=bar> <NOFRAMES> <BODY> ... </BODY> </NOFRAMES> </FRAMESET> </HTML>
The above is an example of a very simple frameset, that consists only of two equally-sized rows. The upper row is named "foo", and the lower row is named "bar". Note that the NOFRAMES section of the document contains a BODY element. This can be used to include an entire document, so that if support for frames is disabled, or not present at all, the viewer gets alternative content. In most examples, everything other than FRAME and FRAMESET elements will be omitted for brevity.
Using frames: Combining rows and columns

The simplest way to get a combination of rows and columns is to first set up the "outermost" set of rows or columns, and then replace the FRAME element in the row (or column) which should get the "innermost" set with a nested FRAMESET element. To illustrate this, the following example will define a frameset with two columns. The rightmost column will consist of two rows. First, define a frameset with two columns:
<FRAMESET COLS="*,*"> <FRAME SRC="leftmost.html" NAME=left> <FRAME NAME=right> </FRAMESET>
The SRC attribute on the second frame has been omitted, because it will be replaced in a minute. The definition of the two rows which should go on the right goes as follows:
<FRAMESET ROWS="25%,75%"> <FRAME SRC="top.html" NAME=topright> <FRAME SRC="bottom.html" NAME=bottomright> </FRAMESET>
Nesting this last frameset in the first is a matter of replacing the "right" frame definition with the definition of the frameset:
<FRAMESET COLS="*,*"> <FRAME SRC="leftmost.html" NAME=left> <FRAMESET ROWS="25%,75%"> <FRAME SRC="top.html" NAME=topright> <FRAME SRC="bottom.html" NAME=bottomright> </FRAMESET> </FRAMESET>
Frames syntax: the FRAME element

Inside a FRAMESET element, the FRAME element is used to specify the name of a frame, and the first document that should be displayed there. This element must be used for each row or column, as specified in the surrounding FRAMESET element.
Syntax of FRAME
The syntax of this element is very simple:
<FRAME SRC="url" NAME="string">
The required SRC attribute can be an absolute or a relative URL for the document to be displayed initially. The optional NAME attribute should provide a name for this frame. Names are case sensitive, and may consist only of letters and digits. They should be unique in a frameset, so that each frame can be identified by its name without conflicts.
Frames syntax: the NOFRAMES element

If a browser does not support frames, it will ignore the FRAMESET and FRAME elements that define the frameset. To provide alternative content, text that should be displayed (typically the BODY part of a normal HTML document) must be enclosed in <NOFRAMES> and </NOFRAMES>. This element goes inside the outermost FRAMESET tag. An example of its usage is:
<HTML> <HEAD> <TITLE>A frameset document which has a noframes alternative</TITLE> </HEAD> <FRAMESET ROWS="*,*"> <FRAME SRC="foo.html" NAME=foo> <FRAME SRC="bar.html" NAME=bar> <NOFRAMES> <BODY> This is the noframes alternative section. Any block-level HTML element may be used here. </BODY> </NOFRAMES> </FRAMESET> </HTML>
Using frames: Targeting other frames

Once you have set up a frameset, the next task is to determine which links should update which frames. Typically there is some distinction between the frames; for example, one is a table of contents, and the other presents documents chosen from there. Or, one presents a question and the other gives the correct answer. Normally, links in a document in a frame update the contents of that frame. To have a link update another frame, use the TARGET attribute. The value of this attribute should be the name of the frame that should be updated. In the simple example given in the index, a link in frame "foo" that should update frame "bar" could be written as
<A HREF="other-document.html" TARGET=bar>this other document</A>
Targeting multiple frames at once
It is not possible directly to update multiple frames at once. This is why I stress that the purpose of all frames should be determined at the very beginning. Multiple frames can only be updated at once if they are in the same row or column of a "super" frameset. For example, in the following frameset only one frame can be updated at a time.
<FRAMESET COLS="*,*"> <FRAME SRC="leftmost.html" NAME=left> <FRAMESET ROWS="25%,75%"> <FRAME SRC="top.html" NAME=topright> <FRAME SRC="bottom.html" NAME=bottomright> </FRAMESET> </FRAMESET>
Because there is no way to address the rightmost column (the one containing the two rows), the two frames in there cannot be updated. Had this frameset been written as
<FRAMESET COLS="*,*"> <FRAME SRC="leftmost.html" NAME=left> <FRAME SRC="rightmost.html" NAME=right> </FRAMESET>
where the file "rightmost.html" contained a frameset definition such as

<FRAMESET ROWS="25%,75%"> <FRAME SRC="top.html" NAME=topright> <FRAME SRC="bottom.html" NAME=bottomright> </FRAMESET>
then the entire right half of the window could have been updated at once with just TARGET=right.
Using the special target values

As explained in the TARGET syntax definition, there are four special values. The "_top" value If this value is used, following the link will remove all currently existing framesets. This is useful for when the linked document has its own frameset, or it is an outside link. It's considered bad manners to "frame" someone else's site like this. And if the linked document has a frameset itself, the resulting nesting could be less than pleasant. The "_parent" value When using the second way described above to use nested framesets, updating the "right" frame can also be done by a link in one of the two documents in the innermost frames, if it uses "_parent" as value for TARGET. The "_self" value
This value is only useful if this document contains a BASE element that specifies a default value for TARGET. This value overrides that; the link will update the frame that the document is in. The "_blank" value With this value, a new unnamed browser window is created. This may be useful in certain circumstances. If you want to be able to update the new window using frames and TARGET, you should instead use a new, unique name.
Definition and Usage of <NOFRAME> tag

The <noframes> tag is a fallback tag for browsers that do not support frames. It can contain all the HTML elements that you can find inside the <body> element of a normal HTML page. The <noframes> element can be used to link to a non-frameset version of the web site or to display a message to users that frames are required. The <noframes> element goes inside the <frameset> element. Example:<html> <frameset cols="25%,50%,25%"> <frame src="frame_a.htm" /> <frame src="frame_b.htm" /> <frame src="frame_c.htm" /> <noframes><body>Sorry, your browser does not handle frames!</body> </noframes> </frameset> </html>
iframe
An iframe is used to display a web page within a web page. Syntax for adding an iframe:
<iframe src="URL"></iframe>
The URL points to the location of the separate page.
iframe - Set Height and Width

The height and width attributes are used to specify the height and width of the iframe.
The attribute values are specified in pixels by default, but they can also be in percent (like "80%").
Example
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
iframe - Remove the Border

The frameborder attribute specifies whether or not to display a border around the iframe. Set the attribute value to "0" to remove the border:
Example
<iframe src="demo_iframe.htm" frameborder="0"></iframe>
Use iframe as a Target for a Link

An iframe can be used as the target frame for a link. The target attribute of a link must refer to the name attribute of the iframe:
Example
<iframe src="demo_iframe.htm" name="iframe_a"></iframe> <p><a href="http://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>
Cascading Style Sheets
A style sheet is made up of style rules that tell a browser how to present a document. There are various ways of linking these style rules to your HTML documents, but the simplest method for starting out is to use HTML's STYLE element. This element is placed in the document HEAD, and it contains the style rules for the page. Note that while the STYLE element is a good method of experimenting with style sheets, it has disadvantages that should be considered before one uses this method in practice. The advantages and disadvantages of the various methods are discussed in the section on linking style sheets to HTML. Each rule is made up of a selector--usually an HTML element such as BODY, P, or EM--and the style to be applied to the selector. There are numerous properties that may be defined for an element. Each property takes a value, which together with the property describes how the selector should be presented. Style rules are formed as follows:
selector { property: value }
Multiple style declarations for a single selector may be separated by a semicolon:

selector { property1: value1; property2: value2 }
As an example, the following code segment defines the color and font-size properties for H1 and H2 elements:
<HEAD> <TITLE>CSS Example</TITLE> <STYLE TYPE="text/css"> H1 { font-size: x-large; color: red } H2 { font-size: large; color: blue } </STYLE> </HEAD>
The above style sheet tells the browser to show level-one headings in an extra-large, red font, and to show level-two headings in a large, blue font. The CSS1 Specification formally defines all properties and values available. The properties and values are also given in the CSS Properties section of this site. This tutorial is intended as a very basic introduction to Cascading Style Sheets and should provide enough information to allow you to experiment with a few of your own styles. For a more in-depth look at Cascading Style Sheets, read the following sections:
Linking Style Sheets to HTML CSS Properties
Linking Style Sheets to HTML

There are many ways to link style sheets to HTML, each carrying its own advantages and disadvantages. New HTML elements and attributes have been introduced to allow easy incorporation of style sheets into HTML documents.

Linking to an External Style Sheet Embedding a Style Sheet Importing a Style Sheet Inlining Style The CLASS Attribute The ID Attribute The SPAN Element The DIV Element A Note about Validation
Linking to an External Style Sheet

An external style sheet may be linked to an HTML document through HTML's LINK element:
<LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen> <LINK REL=StyleSheet HREF="color-8b.css" TYPE="text/css" TITLE="8-bit Color Style" MEDIA="screen, print"> <LINK REL="Alternate StyleSheet" HREF="color-24b.css" TYPE="text/css" TITLE="24-bit Color Style" MEDIA="screen, print"> <LINK REL=StyleSheet HREF="aural.css" TYPE="text/css" MEDIA=aural>
The <LINK> tag is placed in the document HEAD. The optional TYPE attribute is used to specify a media type--text/css for a Cascading Style Sheet--allowing browsers to ignore style sheet types that they do not support. Configuring the server to send text/css as the Content-type for CSS files is also a good idea. External style sheets should not contain any HTML tags like <HEAD> or <STYLE>. The style sheet should consist merely of style rules or statements. A file consisting solely of
P { margin: 2em }
could be used as an external style sheet.
The <LINK> tag also takes an optional MEDIA attribute, which specifies the medium or media to which the style sheet should be applied. Possible values are

screen, for presentation on non-paged computer screens; print, for output to a printer; projection, for projected presentations; aural, for speech synthesizers; braille, for presentation on braille tactile feedback devices; tty, for character cell displays (using a fixed-pitch font); tv, for televisions; all, for all output devices.
Multiple media are specified through a comma-separated list or the value all. Netscape Navigator 4.x incorrectly ignores any linked or embedded style sheets declared with MEDIA values other than screen. For example, MEDIA="screen, projection" will cause the style sheet to be ignored by Navigator 4.x, even if the presentation device is a computer screen. Navigator 4.x also ignores style sheets declared with MEDIA=all. The REL attribute is used to define the relationship between the linked file and the HTML document. REL=StyleSheet specifies a persistent or preferred style while REL="Alternate StyleSheet" defines an alternate style. A persistent style is one that is always applied when style sheets are enabled. The absence of the TITLE attribute, as in the first <LINK> tag in the example, defines a persistent style. A preferred style is one that is automatically applied, such as in the second <LINK> tag in the example. The combination of REL=StyleSheet and a TITLE attribute specifies a preferred style. Authors cannot specify more than one preferred style. An alternate style is indicated by REL="Alternate StyleSheet". The third <LINK> tag in the example defines an alternate style, which the user could choose to replace the preferred style sheet. Note that current browsers generally lack the ability to choose alternate styles. A single style may also be given through multiple style sheets:
<LINK REL=StyleSheet HREF="basics.css" TITLE="Contemporary"> <LINK REL=StyleSheet HREF="tables.css" TITLE="Contemporary"> <LINK REL=StyleSheet HREF="forms.css" TITLE="Contemporary">
In this example, three style sheets are combined into one "Contemporary" style that is applied as a preferred style sheet. To combine multiple style sheets into a single style, one must use the same TITLE with each style sheet. An external style sheet is ideal when the style is applied to numerous pages. With an external style sheet, an author could change the look of an entire site by simply changing one file. As
well, most browsers will cache an external style sheet, thus avoiding a delay in page presentation once the style sheet is cached. Microsoft Internet Explorer 3 for Windows 95/NT4 does not support BODY background images or colors from linked style sheets. Given this bug, authors may wish to provide another mechanism for including a background image or color, such as embedding or inlining the style, or by using the BACKGROUND attribute of the BODY element.
Embedding a Style Sheet

A style sheet may be embedded in a document with the STYLE element:
<STYLE TYPE="text/css" MEDIA=screen> <!-BODY { background: url(foo.gif) red; color: black } P EM { background: yellow; color: black } .note { margin-left: 5em; margin-right: 5em } --> </STYLE>
The STYLE element is placed in the document HEAD. The required TYPE attribute is used to specify a media type, as is its function with the LINK element. Similarly, the TITLE and MEDIA attributes may also be specified with STYLE. Very old browsers such as Netscape 2.0, unaware of the STYLE element, would normally show its contents as if they were part of the BODY, thus making the style sheet visible to the user. To prevent this, the contents of the STYLE element may be contained within an SGML comment (), as in the preceding example. This use of comment tokens to hide the style sheet from old browsers should only be used in HTML, where the comment tokens are actually part of the style sheet. In XHTML, the comment tokens would be a real XML comment, and the style sheet would be hidden from browsers that treat the document as XML. An embedded style sheet should be used when a single document has a unique style. If the same style sheet is used in multiple documents, then an external style sheet would be more appropriate.
Importing a Style Sheet

A style sheet may be imported with CSS's @import statement. This statement may be used in a CSS file or inside the STYLE element:
<STYLE TYPE="text/css" MEDIA="screen, projection">  </STYLE>
Note that other CSS rules may still be included in the STYLE element, but that all @import statements must occur at the start of the style sheet. Any rules specified in the style sheet itself override conflicting rules in the imported style sheets. For example, even if one of the imported style sheets contained DT {background: aqua}, definition terms would still have a yellow background. The order in which the style sheets are imported is important in determining how they cascade. In the above example, if the style.css imported style sheet specified that STRONG elements be shown in red and the punk.css style sheet specified that STRONG elements be shown in yellow, then the latter rule would win out, and STRONG elements would be in yellow. Imported style sheets are useful for purposes of modularity. For example, a site may separate different style sheets by the selectors used. There may be a simple.css style sheet that gives rules for common elements such as BODY, P, H1, and H2. In addition, there may be an extra.css style sheet that gives rules for less common elements such as CODE, BLOCKQUOTE, and DFN. A tables.css style sheet may be used to define rules for table elements. These three style sheets could be included in HTML documents, as needed, with the @import statement. The three style sheets could also be combined via the LINK element.
Inlining Style
Style may be inlined using the STYLE attribute. The STYLE attribute may be applied to any BODY element (including BODY itself) except for BASEFONT, PARAM, and SCRIPT. The attribute takes as its value any number of CSS declarations, where each declaration is separated by a semicolon. An example follows:
<P STYLE="color: red; font-family: 'New Century Schoolbook', serif"> This paragraph is styled in red with the New Century Schoolbook font, if available.</P>
Note that New Century Schoolbook is contained within single quotes in the STYLE attribute since double quotes are used to contain the style declarations. Inlining style is far more inflexible than the other methods. To use inline style, one must declare a single style sheet language for the entire document using the Content-Style-Type HTTP header extension. With inlined CSS, an author must send text/css as the Content-Style-Type HTTP header or include the following tag in the HEAD:
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
Inlining style loses many of the advantages of style sheets by mixing content with presentation. As well, inlined styles implicitly apply to all media, since there is no mechanism for specifying the intended medium for an inlined style. This method should be used sparingly, such as when a style is to be applied on all media to a single occurrence of an element. If the style should be applied to a single element instance but only with certain media, use the ID attribute instead of the STYLE attribute.
The CLASS Attribute

The CLASS attribute is used to specify the style class to which the element belongs. For example, the style sheet may have created the punk and warning classes:
.punk { color: lime; background: #ff80c0 } P.warning { font-weight: bolder; color: red; background: white }
These classes could be referenced in HTML with the CLASS attribute:

<H1 CLASS=punk>Proprietary Extensions</H1> <P CLASS=warning>Many proprietary extensions can have negative side-effects, both on supporting and non-supporting browsers...
In this example, the punk class may be applied to any BODY element since it does not have an HTML element associated with it in the style sheet. Using the example's style sheet, the warning class may only be applied to the P element. A good practice is to name classes according to their function rather than their appearance. The warning class in the previous example could have been named red, but this name would become meaningless if the author decided to change the style of the class to a different color, or if the author wished to define an aural style for those using speech synthesizers. Classes can be a very effective method of applying different styles to structurally identical sections of an HTML document. For example, this page uses classes to give a different style to CSS code and HTML code.
The ID Attribute
The ID attribute is used to define a unique style for an element. A CSS rule such as
#wdg97 { font-size: larger }
may be applied in HTML through the ID attribute:
<P ID=wdg97>Welcome to the Web Design Group!</P>
Each ID attribute must have a unique value over the document. The value must be an initial letter followed by letters, digits, or hyphens. The letters are restricted to A-Z and a-z. Note that HTML 4 allows periods in ID attribute values, but CSS1 does not allow periods in ID selectors. Also note that CSS1 allows the Unicode characters 161-255 as well as escaped Unicode characters as a numeric code, but HTML 4 does not allow these characters in an ID attribute value. The use of ID is appropriate when a style only needs to be applied once in any document. ID contrasts with the STYLE attribute in that the former allows medium-specific styles and can also be applied to multiple documents (though only once in each document).
The SPAN Element

The SPAN element was introduced into HTML to allow authors to give style that could not be attached to a structural HTML element. SPAN may be used as a selector in a style sheet, and it also accepts the STYLE, CLASS, and ID attributes. SPAN is an inline element, so it may be used just as elements such as EM and STRONG in HTML. The important distinction is that while EM and STRONG carry structural meaning, SPAN has no such meaning. It exists purely to apply style, and so has no effect when the style sheet is disabled. Some examples of SPAN follow:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <HTML> <HEAD> <TITLE>Example of SPAN</TITLE> <META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css"> <STYLE TYPE="text/css" MEDIA="screen, print, projection"> <!-.firstwords { font-variant: small-caps } --> </STYLE> </HEAD> <BODY> <P><SPAN CLASS=firstwords>The first few words</SPAN> of a paragraph could be in small-caps. Style may also be inlined, such as to change the style of a word like <SPAN STYLE="font-family: Arial"> Arial</SPAN>.</P>
The DIV Element
The DIV element is similar to the SPAN element in function, with the main difference being that DIV (short for "division") is a block-level element. DIV may contain paragraphs, headings, tables, and even other divisions. This makes DIV ideal for marking different classes of containers, such as a chapter, abstract, or note. For example:
<DIV CLASS=note> <H1>Divisions</H1> <P>The DIV element is defined in HTML 3.2, but only the ALIGN attribute is permitted in HTML 3.2. HTML 4.0 adds the CLASS, STYLE, and ID attributes, among others.</P> <P>Since DIV may contain other block-level containers, it is useful for marking large sections of a document, such as this note.</P> <P>The closing tag is required.</P> </DIV>
CSS Properties
Font Properties
Font Family Syntax: font-family: [[<family-name> | <generic-family>],]* [<family-name> | <generic-family>] Possible Values: <family-name>
Any font family name may be used
<generic-family>

serif (e.g., Times) sans-serif (e.g., Arial or Helvetica) cursive (e.g., Zapf-Chancery) fantasy (e.g., Western)
monospace (e.g., Courier)

Syntax: font-style: <value> Possible Values: normal | italic | oblique
Font Style
Syntax: font-variant: <value> Possible Values: normal | SMALL-CAPS Font Weight Syntax: font-weight: <value> Possible Values: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Font Variant
Font Size Syntax: font-size: <absolute-size> | <relative-size> | <length> | <percentage> Possible Values:
<absolute-size>
o
xx-small
| x-small | small | medium | large |
x-large | xx-
large

<relative-size> o larger | smaller <length> <percentage> (in relation to parent element)
Syntax: font: <value> Possible Values: [ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <lineheight> ]? <font-family>
Font
Color and Background Properties

Color The color property allows authors to specify the color of an element. See the Units section for color value descriptions. Some example color rules include:
H1 { color: blue } H2 { color: #000080 } H3 { color: #0c0 }
Syntax: background-color: <value> Possible Values: <color> | transparent
Background Color
The background-color property sets the background color of an element. For example:
BODY { background-color: white } H1 { background-color: #000080 }
Syntax: background-image: <value> Possible Values: <url> | none
Background Image
The background-image property sets the background image of an element. For example:
BODY { background-image: url(/images/foo.gif) } P { background-image: url(http://www.htmlhelp.com/bg.png) }
Background Repeat Background Attachment Background Position Syntax: background-position: <value>

Possible Values: [<percentage> | <length>]{1,2} | [top | center | bottom] || [left | center | right]
The background-position property gives the initial position of a specified background image. This property may only be applied to block-level elements and replaced elements. (A replaced element is one for which only the intrinsic dimensions are known; HTML replaced elements include IMG, INPUT, TEXTAREA, SELECT, and OBJECT.) The easiest way to assign a background position is with keywords: Horizontal keywords (left, center, right) Vertical keywords (top, center, bottom)
Syntax: background: <value> Possible Values: <background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position>
Background
The background property is a shorthand for the more specific background-related properties. Some examples of background declarations follow:
BODY BLOCKQUOTE P TABLE { { { { background: background: background: background: white url(http://www.htmlhelp.com/foo.gif) } #7fffd4 } url(../backgrounds/pawn.png) #f0f8ff fixed } #0c0 url(leaves.jpg) no-repeat bottom right }
Text Properties

Syntax: word-spacing: <value> Possible Values: normal | <length>
Word Spacing
The word-spacing property defines an additional amount of space between words. The value must be in the length format; negative values are permitted. Examples:
P EM { word-spacing: 0.4em } P.note { word-spacing: -0.2em }
Letter Spacing Text Decoration Vertical Alignment
Syntax: vertical-align: <value> Possible Values: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage>
The vertical-align property may be used to alter the vertical positioning of an inline element, relative to its parent element or to the element's line. (An inline element is one which has no line break before and after it, for example, EM, A, and IMG in HTML.) The value may be a percentage relative to the element's line-height property, which would raise the element's baseline the specified amount above the parent's baseline. Negative values are permitted. The value may also be a keyword. The following keywords affect the positioning relative to the parent element:

baseline (align baselines of element and parent) middle (align vertical midpoint of element with baseline plus half the x-height--the height of the letter "x"--of the parent) sub (subscript) super (superscript) text-top (align tops of element and parent's font) text-bottom (align bottoms of element and parent's font)
The keywords affecting the positioning relative to the element's line are

top (align top of element with tallest element on the line) bottom (align bottom of element with lowest element on the line)
The vertical-align property is particularly useful for aligning images. Some examples follow:
IMG.middle { vertical-align: middle } IMG { vertical-align: 50% } .exponent { vertical-align: super }
Syntax: text-transform: <value> Possible Values: none | capitalize | UPPERCASE | lowercase
Text Transformation
The text-transform property allows text to be transformed by one of four properties:

capitalize (capitalizes first character of each word) uppercase (capitalizes all characters of each word) lowercase (uses small letters for all characters of each word) none (the initial value)
Examples:
H1 { text-transform: uppercase } H2 { text-transform: capitalize }
Syntax: text-align: <value> Possible Values: left | right | center | justify Text Indentation Syntax: text-indent: <value> Possible Values: <length> | <percentage> Line Height Syntax: line-height: <value> Possible Values: normal | <number> | <length> | <percentage>
Text Alignment
The line-height property could be used to double space text:

P { line-height: 200% }
Box Properties

Top Margin Syntax: margin-top: <value>

Possible Values: <length> | <percentage> | auto Right Margin Possible Values: <length> | <percentage> | auto Bottom Margin Possible Values: <length> | <percentage> | auto Left Margin Possible Values: <length> | <percentage> | auto Margin Possible Values: <length> | <percentage> | auto Top Padding Syntax: padding-top: <value> Possible Values: <length> | <percentage> Right Padding Possible Values: <length> | <percentage> Bottom Padding Possible Values: <length> | <percentage>
Left Padding Possible Values: <length> | <percentage> Padding Possible Values: <length> | <percentage> Top Border Width Syntax: border-right-width: <value>
Possible Values: thin | medium | thick | <length> Right Border Width Possible Values: thin | medium | thick | <length>
Bottom Border Width Possible Values: thin | medium | thick | <length> Left Border Width Possible Values: thin | medium | thick | <length> Border Width Possible Values: thin | medium | thick | <length> Border Color Syntax: border-color: <value>
Possible Values: <color>{1,4} Border Style Syntax: border-style: <value> Possible Values: [ none | dotted | dashed | solid | double | groove | ridge | inset | outset ]{1,4} Top Border Syntax: border-top: <value> Possible Values: <border-top-width> || <border-style> || <color> Right Border Possible Values: <border-top-width> || <border-style> || <color> Bottom Border Possible Values: <border-top-width> || <border-style> || <color> Left Border Possible Values: <border-top-width> || <border-style> || <color> Border Syntax: border: <value> Possible Values: <border-width> || <border-style> || <color>Width Height Syntax: hight: <value> Possible Values: <length> | <percentage> | auto Float The float property allows authors to wrap text around an element Syntax: float: <value> Possible Values: left | right | none Clear Syntax: clear: <value> Possible Values: none | left | right | both
Classification Properties
Display The display property is used to define an element with one of four values:

block (a line break before and after the element) inline (no line break before and after the element) list-item (same as block except a list-item marker is added) none (no display)
Syntax: display: <value> Possible Values: block | inline | list-item | none
Whitespace The white-space property will determine how spaces within the element are treated. This property takes one of three values:
normal (collapses multiple spaces into one) pre (does not collapse multiple spaces) nowrap (does not allow line wrapping without a <BR> tag)
Syntax: white-space: <value> Possible Values: normal | pre | nowrap List Style Type Syntax: list-style-type: <value> Possible Values: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
The list-style-type property specifies the type of list-item marker, and is used if liststyle-image is none or if image loading is turned off. Examples:
LI.square UL.plain OL OL OL OL OL OL { { { { { list-style-type: list-style-type: list-style-type: list-style-type: list-style-type: square } none } upper-alpha } decimal } lower-roman } /* A B C D E etc. */ /* 1 2 3 4 5 etc. */ /* i ii iii iv v etc. */
Syntax: list-style-image: <value> Possible Values: <url> | none
List Style Image
The list-style-image property specifies the image that will be used as list-item marker when image loading is turned on, replacing the marker specified in the list-style-type property. Examples:
UL.check { list-style-image: url(/LI-markers/checkmark.gif) } UL LI.x { list-style-image: url(x.png) }
List Style Position List Style Syntax: list-style: <value>

Possible Values: <list-style-type> || <list-style-position> || <url>
The list-style property is a shorthand for the list-style-type, list-style-position, and liststyle-image properties. Examples:
LI.square UL.plain UL.check OL OL OL { { { { { list-style: list-style: list-style: list-style: list-style: square inside } none } url(/LI-markers/checkmark.gif) circle } upper-alpha } lower-roman inside }
Units

Length Units Percentage Units Color Units URLs
Length Units
A length value is formed by an optional + or -, followed by a number, followed by a two-letter abbreviation that indicates the unit. There are no spaces in a length value; e.g., 1.3 em is not a valid length value, but 1.3em is valid. A length of 0 does not require the two-letter unit identifier. Both relative and absolute length units are supported in CSS1. Relative units give a length relative to another length property, and are preferred since they will better adjust to different media. The following relative units are available:

em (ems, the height of the element's font) ex (x-height, the height of the letter "x") px (pixels, relative to the canvas resolution)
Absolute length units are highly dependent on the output medium, and so are less useful than relative units. The following absolute units are available:

in (inches; 1in=2.54cm) cm (centimeters; 1cm=10mm) mm (millimeters) pt (points; 1pt=1/72in) pc (picas; 1pc=12pt)
Percentage Units
A percentage value is formed by an optional + or -, followed by a number, followed by %. There are no spaces in a percentage value. Percentage values are relative to other values, as defined for each property. Most often the percentage value is relative to the element's font size.
Color Units
A color value is a keyword or a numerical RGB specification. The 16 keywords are taken from the Windows VGA palette: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. RGB colors are given in one of four ways:

#rrggbb (e.g., #00cc00) #rgb (e.g., #0c0) rgb(x,x,x) where x is an integer between 0 and 255 inclusive (e.g., rgb(0,204,0)) rgb(y%,y%,y%) where y is a number between 0.0 and 100.0 inclusive (e.g., rgb(0%,80%,0%))
The examples above all specify the same color. Douglas R. Jacobson has also developed a handy quick reference RGB Color Chart (61 kB).
URLs
A URL value is given by url(foo), where foo is the URL. The URL may be optionally quoted with either single (') or double (") quotes and may contain whitespace before or after the (optionally quoted) URL. Parentheses, commas, spaces, single quotes, or double quotes in the URL must be escaped with a backslash. Partial URLs are interpreted relative to the style sheet source, not to the HTML source. Note that Netscape Navigator 4.x incorrectly interprets partial URLs relative to the HTML source. Given this bug, authors may wish to use full URLs where possible. Examples:
BODY BODY BODY BODY BODY { { { { { background: background: background: background: background: url(stripe.gif) } url(http://www.htmlhelp.com/stripe.gif) } url( stripe.gif ) } url("stripe.gif") } url(\"Ulalume\".png) } /* quotes in URL escaped */
Lesson 10: Tables

Tables are used when you need to show "tabular data" i.e. information that is logically presented in rows and columns.
Is it difficult?
Building tables in HTML may at first seem complicated but if you keep cool and watch your step, it is actually strictly logical - just like everything else in HTML. Example 1:
<table> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> <tr> <td>Cell 3</td> <td>Cell 4</td> </tr> </table>
Will look like this in the browser:

Cell 1 Cell 2 Cell 3 Cell 4
What's the difference between <tr> and <td>?

As you will see from the above example, this is probably the most complicated HTML example we have given you so far. Let's break it down and explain the different tags: 3 different elements are used to insert tables:

The opening tag <table> and the closing tag </table> starts and ends the table. Logical. <tr> stands for "table row" and starts and ends horizontal rows. Still logical. <td> is short for "table data". This tag starts and ends each cell in the rows of your table. All simple and logical.
Here is what happens in Example 1: the table starts with a <table>, followed by a <tr>, which indicates the beginning of a new row. Two cells are inserted in this row: <td>Cell 1</td> and
<td>Cell 2</td>.
The row is hereafter closed with a </tr> and a new row <tr> begins immediately after. The new row also contains two cells. The table is closed with </table>. Just to make it clear: rows are horizontal lines of cells and columns are vertical lines of cells:
Cell 1 and Cell 2 form a row. Cell 1 and Cell 3 form a column. In the above example, the table has two rows and two columns. However, a table can have an unlimited number of rows and columns. Example 2:
<table> <tr> <td>Cell <td>Cell <td>Cell <td>Cell </tr> <tr> <td>Cell <td>Cell <td>Cell <td>Cell </tr> <tr> <td>Cell <td>Cell <td>Cell <td>Cell </tr> </table> 9</td> 10</td> 11</td> 12</td> 5</td> 6</td> 7</td> 8</td> 1</td> 2</td> 3</td> 4</td>

Cell 1 Cell 2 Cell 3 Cell 4 Cell 5 Cell 6 Cell 7 Cell 8 Cell 9 Cell 10 Cell 11 Cell 12
Are there any attributes?

Of course there are attributes. For example, the border attribute is used to specify the thickness of the border around your table: Example 3:
<table border="1"> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> <tr> <td>Cell 3</td> <td>Cell 4</td> </tr> </table>

The thickness of the border is specified in pixels (See lesson 9) As with images, you can also set the width of a table in pixels - or alternatively in percentage of the screen: Example 4:
<table border="1" width="30%">
This example will be displayed in the browser as a table with the width of 30% of the screen. Try it yourself.
More attributes?
There are lots of attributes for tables. Here are two more:
align: specifies the horizontal alignment of the content in the entire table, in a row or in a single cell. For example, left, center or right. valign: specifies the vertical alignment of the content in a cell. For example, top, middle or bottom.
Example 5:
<td align="right" valign="top">Cell 1</td>
The two attributes colspan and rowspan are used when you want to create fancy tables.
Colspan
is short for "column span". Colspan is used in the <td> tag to specify how many columns the cell should span: Example 1:
<table border="1"> <tr> <td colspan="3">Cell 1</td> </tr> <tr> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> </table>
Will look like this in the browser: Cell 1 Cell 2 Cell 3 Cell 4 By setting colspan to "3", the cell in the first row spans three columns. If we instead had set colspan to "2", the cell would only have spanned two columns and it would have been necessary to insert an additional cell in the first row so that the number of columns will fit in the two rows. Example 2:
<table border="1"> <tr> <td colspan="2">Cell 1</td>
<td>Cell 2</td> </tr> <tr> <td>Cell 3</td> <td>Cell 4</td> <td>Cell 5</td> </tr> </table>
Will look like this in the browser: Cell 1 Cell 2
Cell 3 Cell 4 Cell 5
What about rowspan?

As you might already have guessed, rowspan specifies how many rows a cell should span over: Example 3:
<table border="1"> <tr> <td rowspan="3">Cell 1</td> <td>Cell 2</td> </tr> <tr> <td>Cell 3</td> </tr> <tr> <td>Cell 4</td> </tr> </table>
Will look like this in the browser: Cell 2 Cell 1 Cell 3 Cell 4 In the example above rowspan is set to "3" in Cell 1. This specifies that the cell must span over 3 rows (its own row plus an additional two). Cell 1 and Cell 2 are thereby in the same row, while Cell 3 and Cell 4 form two independent rows.
HTML - Layout
HTML layout is very basic. Not many options exist with the body tag alone. Tables on the other hand are the bread and butter of HTML layouts. Any element may be placed inside of a table including tables themselves.
HTML Code:
<table id="shell" bgcolor="black" border="1" heigh="200" width="300"> <tr><td> <table id="inner" bgcolor="white" heigh="100" width="100"> <tr><td>Tables inside tables!</td></tr> </table> </td></tr></table>
Tables inside tables:

Tables inside tables!
The white table (identified as inner) exists inside of the (shell) table, the black one. A light bulb should be going off inside of your head as you explore how this system will allow for the creation of limitless layouts.
HTML - Standard Layout

A fairly standard layout consists of a banner near the top, navigation, and your content or display box. These are the backbone to any great website.
HTML Code:
<table cellspacing="1" cellpadding="0" border="0" bgcolor="black" id="shell" height="250" width="400"> <tr height="50"><td colspan="2" bgcolor="white"> <table title="Banner" id="banner" border="0"> <tr><td>Place a banner here</td></tr> </table> </td></tr> <tr height="200"><td bgcolor="white"> <table id="navigation" title="Navigation" border="0"> <tr><td>Links!</td></tr> <tr><td>Links!</td></tr> <tr><td>Links!</td></tr>
</table> </td><td bgcolor="white"> <table title="Content" id="content" border="0"> <tr><td>Content goes here</td></tr> </table> </td></tr></table>
Basic Layout:
Place a banner here
Links! Links! Links! Content goes here
This approach is basic yet organized. Often times websites become too complex for the viewer to follow. The code becomes complex rather fast, you will need to be sure to properly assign height and width values to your tables as well. The more specific you are about heights and widths, the less debugging you will have to perform.
HTML Code:
<table id="shell" title="Shell" height="250" width="400" border="0" bgcolor="black" cellspacing="1" cellpadding="0"> <tr height="50"><td bgcolor="white"> <table title="banner" id="banner"> <tr><td>Banner goes here</td></tr> </table> </td></tr> <tr height="25"><td bgcolor="white"> <table title="Navigation" id="navigation"> <tr><td>Links!</td> <td>Links!</td> <td>Links!</td></tr> </table> </td></tr> <tr><td bgcolor="white"> <table title="Content" id="content"> <tr><td>Content goes here</td></tr> </table> </td></tr></table>
Basic Layout 2:
Banner goes here Links! Links! Links! Content goes here
The code is quite a lot to look at, break it up and organize it in your own way to make things easier for you.
HTML Image Maps

Image maps are images with clickable areas (sometimes referred to as "hotspots") that usually link to another page. If used tastefully, image maps can be really effective. If not, they can potentially confuse users. To create an image map:
1. First, you need an image. Create an image using the usual method (i.e. via an image editor, then save as a gif or jpeg into your website's image folder). 2. Use the HTML map tag to create a map with a name. Inside this tag, you will specify where the clickable areas are with the HTML area tag 3. Use the HTML img tag to link to this image. In the img tag, use with the usemap attribute to define which image map to use (the one we just specified).
Image Map Example

HTML Code:
<img src ="/pix/mueller_hut/mueller_hut_t.jpg" width="225" height="151" border="0" alt="Mueller Hut, Mount Cook, and I" usemap ="#muellermap" /> <map id ="muellermap" name="muellermap"> <area shape ="rect" coords ="90,80,120,151" href ="javascript:alert('Me');" alt="Me" /> <area shape ="poly" coords ="55,55,120,80,90,80,90,100,70,100,20,80,55,55" href ="http://en.wikipedia.org/wiki/Mount_Cook" alt="Mount Cook" />
<area shape ="poly" coords ="145,80,145,100,215,90,215,80,180,60,145,80" href ="http://www.natural-environment.com/places/mueller_hut.php" alt="Mueller Hut" /> </map>
This results in:
OK, compared to our previous lessons, this code is looking quite complex. However, once you really study it, it is not that complex. All we are doing, is specifying an image, then we are creating a map with coordinates. The hardest part is getting all the coordinates right. In our example, we use the area in conjunction with the shape and coord attributes. These accept the following attributes:
Defines a shape for the clickable area. Possible values: shape

default rect circle poly
Specifies the coordinates of the clickable area. Coordinates are specified as follows: coords

rect: left, top, right, bottom circle: center-x, center-y, radius poly: x1, y1, x2, y2, ...
You can use the above attributes to configure your own image map with as many shapes and clickable regions as you like.
Lesson 9: Images
Wouldn't it be great if you could have an image of actor and music legend David Hasselhoff right in the centre of your page?
That sounds like a bit of a challenge...

Maybe, but in fact it is pretty easy to do. All you need is an element: Example 1:
<img src="david.jpg" alt="David" />
would look like this in the browser:
All you need do is first tell the browser that you want to insert an image (img) and then where it is located (src, short for "source"). Do you get the picture? Notice how the img element is opened and closed using the same tag. Like the <br /> tag, it is not tied to a piece of text. "david.jpg" is the name of the image file you want to insert in your page. ".jpg" is the file type of the image. Just like the extension ".htm" shows that a file is an HTML document, ".jpg" tells the browser that a file is a picture. There are three different types of image file types you can insert into your pages:

GIF (Graphics Interchange Format) JPG / JPEG (Joint Photographic Experts Group) PNG (Portable Network Graphics)
GIF images are usually best for graphics and drawings, while JPEG images are usually better for photographs. This is for two reasons: first, GIF images only consist of 256 colours, while JPEG images comprise of millions of colours and second, the GIF format is better at compressing simple images, than the JPEG format which is optimized for more complex images. The better the compression, the smaller the size of the image file, the faster your page will load. As you probably know from your own experience, unnecessarily 'heavy' pages can be extremely annoying for the user. Traditionally, the GIF and JPEG formats have been the two dominant image types, but lately, the PNG format has become more and more popular (primarily at the expense of the GIF format). The PNG format contains in many ways the best of both the JPEG and GIF format: millions of colours and effective compressing.
Where do I get my images from?
To make your own images, you need an image editing program. An image editing program is one of the most essential tools you need to create beautiful websites. Unfortunately, no good image editing programs comes with Windows or other operating systems. Thus, you might consider investing in either Paint Shop Pro, PhotoShop or Macromedia Fireworks, which are three of the best image editing programs currently on the market. However, as we said before, it will not be necessary to buy expensive programs to complete this tutorial. For now, you can download the excellent image editing program IrfanView which is socalled freeware and therefore costs nothing. Or you can just borrow images from other sites by downloading them. But please be careful not to violate copyrights when downloading pictures. Still, it's useful to know how to download pictures, so here's how you do it:
1. Right-click on an image on any image on the Internet. 2. Choose "Save picture as..." in the menu that appears. 3. Choose a location for the image on your computer and press "Save".
Do this with the image below and save it on your computer at the same location as your HTML documents. (Notice that the logo is saved as a PNG file: logo.png):
Now you can insert the image into one of your own pages. Try it yourself.
Is that all I need to know about images?

There are a few more things you should know about images. First, you can easily insert pictures located in other folders, or even pictures that are located on other websites: Example 2:
<img src="images/logo.png" />
Example 3:
<img src="http://www.html.net/logo.png" />
Second, images can be links: Example 4:

<a href="http://www.html.net"> <img src="logo.png" /></a>
will look like this in the browser (try clicking on the image):
Are there any other attributes I should know about?

You always need to use the attribute src, which tells the browser where the image is located. Besides that, there are a number of other attributes which can be useful when inserting images. The alt attribute is used to give an alternate description of an image if, for some reason, the image is not shown for the user. This is especially important for users with impaired vision, or if the page is loaded very slowly. Therefore, always use the alt attribute: Example 5:
<img src="logo.gif" alt="HTML.net logo" />
Some browsers let the text of the alt attribute appear as a small pop-up box when the user places their cursor over the picture. Please note that when using the alt attribute, the aim is to provide an alternative description of the picture. The alt attribute should not be used to create special pop-up messages for the user since then visually impaired users will hear the message without knowing what the picture is. The title attribute can be used to add information to the image: Example 6:
<img src="logo.gif" title="Learn HTML from HTML.net" />
If you, without clicking, place the cursor over the image, you will see the text "Learn HTML from HTML.net" appear as a pop-up box. Two other important attributes are width and height: Example 7:
<img src="logo.png" width="141px" height="32px" />
will look like this in the browser:
The width and height attributes can be used to set the height and width of an image. The value that is used to set the width and height is pixels. Pixels are the units of measurement used to measure the resolution of screens. (The most common screen resolution is 1024x768 pixels). Unlike centimetres, pixels are relative units of measurement which depend on the resolution of the screen. To a user with a high screen resolution, 25 pixels may correspond to 1 centimetre, while the same 25 pixel in a low screen resolution may correspond to 1.5 centimetres on the screen. If you do not set the width and height, the image will be inserted in its actual size. But with width and height you can manipulate the size: Example 8:
<img src="logo.gif" width="32px" height="32px" />
will look like this in the browser:
However, it is worth keeping in mind that the actual size in kilobytes of the image file will remain the same so it will take the same time to load the image as it did before, even though it appears smaller on the screen. Therefore, you should never decrease the image size by using the width and height attributes. Instead, you should always resize your images in an image editing program to make your pages lighter and faster.
HTML Lesson 2
Click here for Formatting Images Cick here for Linking
Formatting Text
Formatting text allows you to change the text on your page to your preference. When you are formatting the text you are formatting the words or letters rather than formatting the paragraph. The most commonly used text formatting tags are: <B> Bold which would be coded as <P><B>This will produce a bold type print</B></P> This will produce a bold type print <I> Italic which would be coded as <P><I>This will produce a italic type print</I></P> This will produce a italic type print <U> Underline which would be coded as <P><U>This will produce a underlined text</U></P> This will produce a underlined text Other less common tags are as follows. Some of them have been deprecated by HTML 4.01 standard. <BLINK> produces blinking text and is considered highly unprofessional <CITE> is used to display program code <EM> usually appears as an italicized text <STRIKE> will add a strikethrough to the text <STRONG> this will usually display as bold print <SUB> subscript text <SUP> superscript text <TT> fixed width font <VAR> for displaying variables and arguments
Font Styles and Sizes
The tag for your font styles and sizes is start <FONT> and end </FONT>. This tag allows you to determine the color, style and size of your text. The attributes for the Font tag are as follows:
SIZE Text size ranges from 1 to 7, with 1 being the smallest and 7 being the largest. The size of the font on a page can be determined in two ways.
You can add the <BASEFONT> tag to the header of the document, which is between the <HEAD> and </HEAD> tags. This will produce a default font size for the entire document. The <BASEFONT> tag is not a required tag and if you don't use it the page will default to the web browser's default font size. The tag would be written as follows <BASEFONT SIZE=3> any number from 1 to 7 can replace the 3. The most common default size is 3 for most web browsers. Or you can use the <FONT> tag which can be coded in two different ways. The <FONT> tag determines an area of the page to be a specified size. Anything between the start tag <FONT> and the end tag </FONT> will be displayed according to the attributes in the <FONT> tag. There are two ways to code the size attribute with the <FONT> tag. The first way would be to add the SIZE=3 where 3 would be the number or size you want your text to be displayed between 1 and 7. And this is coded with the as <FONT SIZE=3>. The second way to code the <FONT> tag is to use the plus or minus sign. <FONT SIZE=+1> would tell the browser that the font size is 1 step larger than the basefont. COLOR In my opinion the color of the text is the most important part of creating a well designed web page. The combination of your background and your text needs to be well balanced and very easy to read. If that is not the case you will probably lose visitors to your site. My personal opinion is that in most cases a dark background does not do a page justice. There are exceptions but most I have viewed with dark background and light text are not impressive. Also a white background in my opinion for some people is extremely hard to read. I recommend in most cases to use a very light, soothing background with colored text that compliments the background. Another thing to remember is that quite often people think that using a different shade of the same color as your background makes good web design, in truth it makes poor web design and the text becomes hard to read for many people. My opinions come from studying colors in relation to disabilities, the two colors that are in my opinion friend colors are blue and green. They are often called calming colors and a clear sheet of plastic with one of these colors helps the dyslexic person to concentrate on the pages and learn to read. They are also known to help other disabilities. It is wise to plan your background and text to compliment each other.
R 00 33 66 99 CC FF
G 00 33 66 99 CC FF
B 00 33 66 99 CC FF
The table on the left is a list of the safe recommended RGB values for adding color to your web page. You are not limited to having to use these numbers, they are just the numbers deemed as safe. To create a color from the list you would combine one value from each column on the list. Using 000000 will produce black while using FFFFFF will produce white.
The color attribute will be coded as <FONT COLOR="#000000"> and the end tag would be </FONT> If you wanted the entire document to have the same color you could would add the attribute to the <BODY> tag. The tag would look as follows: <BODY TEXT="000000">
FACE Although you might find a font that you would like to use on your page, you have to realize that unless it is a font that exists on the viewers computer they are not going to see the font and their computer will most likely convert it to a font supplied on that computer. The face attribute would be added to the <FONT> tag as follows:
<FONT FACE ="Times New Roman"> and would end with </FONT> This attribute can also be added to the <BASEFONT> tag. Putting all three attributes together in one tag would be done as follows: <FONT FACE="Times New Roman" COLOR="#000000" SIZE=4>
Images
Images are used to enhance your page. Adding color and scenery to a page can make it more appealing to the viewers. But you don't want to overdo the images because they can also take away from your page and chase people away. Images are displayed on a page using the <IMG> tag and SRC attribute. Below are samples of how to use the <IMG> tag and SRC attribute. To display an image that is present within the same folder as your document.
<IMG SRC="backgrnd.jpg"> To display an image that is in a sub folder from the document you are coding. <IMG SRC="images/backgrnd.jpg"> To display an image that is in another site. Please do note that in order to do this you must get the permission of the website owner to hotlink to an image within their site. If you do not get the permission to hotlink from their site you will be stealing bandwidth and this makes you a thief. Please ALWAYS get permission of the owner to hotlink from their site. <IMG SRC="http://www.anothersite.com/folder/image.jpg"> The best way to explain the other attributes for the <IMG> tag is to display them with a graphic. Below you will find samples of the other attributes, the flags default height is 50 and width is 68.
With this I adjusted the width to 100 the code for the above display is <IMG SRC="images/cf2.gif" width="100" height="50">
The above image has the height enlarged to 75 the code for this display is <IMG SRC="images/cf2.gif" width="68" height="75">
The above image has been given a border thickness of 10 the code for this display will be <IMG border="10" SRC="images/cf2.gif"> This image has been aligned to the left. The code used for this is <IMG SRC="images/cf2.gif" align="left">. Do notice how each line of the text is being displayed beside the image. This is not always the case when displaying images on a page. With some coding only one line of text would be displayed beside the graphic.
This graphic has been aligned to the right. The code used for this is <IMG SRC="images/cf2.gif" align="right">. Again you will see that the lines of text are being displayed beside the image. This is another in which the alignment allows for the lines text to be displayed beside the image.
This image has been aligned to the top. The code used for this is <IMG SRC="images/cf2.gif" align="top">. Now what the alignment has done is the first line of text is aligned to the top of the image. Any other lines after that are below the image.
This image has been aligned to the middle. The code used for this is <IMG SRC="images/cf2.gif" align="middle">. The first line of text has been placed in the middle of the height of the image and all other lines of text are below the image.
This image has been aligned to the bottom. The code used for this is <IMG SRC="images/cf2.gif" align="bottom">. The first line of text has been placed at the bottom of the height of the image and all other lines of text are below the image. This image has been aligned to the left and given horizontal spacing of 10. The code used for this is <IMG SRC="images/cf2.gif" align="left" hspace="10"> Notice the space between the image and the text, this is what the horizontal spacing does to the graphic. This would help with an image that is not transparent. This image has been aligned to the left and given the vertical spacing of 10. The code used for this is <IMG SRC="images/cf2.gif" align="left" hspace="10"> Notice the space between the image and the vertical space from the text. The vertical spacing leaves a specific amount of space between the image and the text around the image. This would come in handy especially with a graphic that is not transparent. The text and the image would not look like they run into each other. Another attribute that can be used with the <IMG> tag and SRC attribute is the ALT attribute. This is where you can place text onto the graphic. When your page is displayed on a website, if someone places their mouse on top of the image a message can be displayed. This is done with the following code. Notice I also added the hspace and vspace. <IMG SRC="images/cf2.gif" align="left" hspace="10" vspace="10" alt="This is a message on an image">
Linking
A URL (Uniform Resource Locator) is simply an address of a document on the internet. It's structure is made up of four parts, protocols, host name, folder name and file name. Protocol = http:// Host Name = www.askmaggymae.com Folder Name - there is not always a folder name present in the URL. It would depend on if you sorted your files into folders. With AMM almost all pages are within the main web, then I created folders for the images, downloads and music for the site. Another thing to consider is there may be more than one folder name in the URL. Because AMM uses so many graphics due to screenshots, the folder holding the images has subfolders making it easier for me to find a graphic if I need it. File Name = the name of the file you want to display with the link. Putting these together you would get: http://askmaggymae.com/images/AMMbanner.gif That link would provide the path for the banner which is displayed on all of the pages in the AMM website. It consists of the protocol (http://), the host name (www.askmaggymae.com), the folder name (/images) and the file name (/AMMbanner.gif) But when you are coding your page the above is not enough to tell the browser what it is supposed to do with that line. Linking also needs a tag and attribute. The tag for linking is the <A> tag and the attribute is HREF and finally the end tag is </A>. There are several ways to create links, below will show you each of them. If you are linking to another page within your own web, and the page you are linking to is within the same folder your link would appear as follows: <A HREF="newpage.htm">Text to display the link</A> If you are linking to another page within your web and it is in a subfolder of the folder your page you are working with is your link would appear as follows: <A HREF="foldername/newpage.htm">Text to display the link</A> If you are linking to another page within your web but the page you are working on is within a subfolder and the page you want to link to is in another subfolder (there is no direct link) then your link would appear as follows: <A HREF="../foldername/filename.htm">Text to display the link</A>
The ../ is telling the browser to go up one level (or up one folder) then the folder name and filename. There could end up being more than one of these depending on the folders. Now with any of the above, you could just use the full path to the page that you wish to link to. If you are linking to a page that is not within your web, but on the internet at another site your link would appear as follows: <A HREF="http://www.websitename.com">Text to display the link</A> You could also add a folder name and file name if it was necessary. You can also link to a certain area within a page. This type of link would use the NAME attribute. <A NAME="MARK"> would create what is called an anchor that is named MARK. Placing this on your page just before the area you want to link to. If you are linking to this from another page your link would be coded as: <A HREF="URLtothepage#MARK">Text to display</A> and if the link you are creating is within the same page as the anchor then your link would be coded as" <A HREF="#MARK">Text to display</A>. This is a very handy tool if you have pages that are very long. You can place an anchor in several places of the document and then create a list of links like a table of contents where you can place each link that will take the user to each anchor. You can use an image as a link instead of using text. To place an image instead of text you would use the following code: <A HREF="http://askmaggymae.com"><IMG SRC="http://askmaggymae.com/images/AMMbanner.gif"> And finally you can create a link to an email address. To do this you would use the mailto: protocol instead of the http: protocol. Your link would look as follows: <A HREF="mailto:maggy@shaw.ca">Email Maggy</A>
HTML Lesson 3
Tables
Anyone who has managed an MSN Group quickly learns that if they want a site that looks good they have to somehow use tables to give their custom pages backgrounds. Unfortunately, those who have been in the position of helping others to learn about tables has fallen into the habit of providing an easy way out instead of taking the time and patience to teach someone how to create the tables themselves. Far too many
have provided templates and generators instead of giving of themselves to teach the individuals how to create their tables. Even I have gone and took the lazy way out many times. Offering to create pages, making templates, but I learned that this is not truly helping the other person, it is instead hindering their ability to learn how to do it for themselves. The real reward is taking the time to walk a person through each step to creating their first page. To watch and let them struggle with the small details that mean so much to the outcome of a page. To feel their excitement when that one thing that they struggled with has finally been beaten. To know that you have taught someone something that they can be proud of because they have conquered something that they never dreamed they would ever accomplish. When you won't let them give up because giving up means you have failed to teach them something that is so vital to a successful page. It is then that you can say, I have contributed to this person and I have helped them be a success, and it was worth every second I put into it. That is the true reward, the satisfaction of knowing that you contributed to the success of another. Personally speaking I would never want to have to build tables in a text editor. The building of a table is so complex that the use of a web editor and the ability to switch back and forth from the HTML to the Browser to the web editor window makes building tables so much easier than coding a table manually. Below you will find the HTML tags and attributes that are used to build tables. First your basic tags used are as follows:
<TABLE> </TABLE> These are the tags that tell the browser that a table is about to start and where it will end. The table tag can have attributes added to it to compliment the table's appearance. These tags are start and end tags for the column headings with a table. These are the start and end tags for creating rows within the table. These are the start and end tags for creating the columns within the table
<TH> </TH>
<TR> </TR> <TD> </TD>
The above tags is what creates a basic table without any attributes. <CAPTION> </CAPTION> You can use these tags to create a title for your table. Only one caption tag is allowed per table.
The coding to make your basic table using all of the tags above would be coded as follows:
<TABLE><CAPTION>Your Basic Table</CAPTION> <TR> <TH>First Column</TH><TH>Second Column</TH> </TR> <TR> <TD>R1 C1</TD><TD>R1 C2</TD> </TR> <TR> <TD> R2 C1</TD><TD>R2 C2</TD> </TR> </TABLE> And the coding above would make the table seen below.
Your Basic Table First Column Second Column R1 C1 R2 C1 R1 C2 R2 C2
Adding Attributes to your table

This is where creating tables becomes so complex, there are so many attributes that can be added to your table to create a an effect that is eye catching and therefore keeps the viewers interested. I will start with the attributes that cover the entire table then go on to individual cell attributes. Table Attributes Borders The default border is zero leaving no border as shown in the table above. You can create a border for your table any size you wish, but you do want to make it look nice. The attribute for border is BORDER="5" with the 5 being whatever number you prefer. The table tag with the border attribute would look like <TABLE BORDER="5"> You can also add color to your border but it is browser specific, not all browsers support the colored border. Also with the colored border you can create a light and dark border giving it a 3D effect. A table given all of these attributes would be coded as follows:
<TABLE BORDER="5" BORDERCOLOR="#111111" BORDERLIGHT="#C0C0C0" BORDERDARK="#808080">
Width seems to be an attribute that is hard for the new user to understand. Using the width attribute you can determine the width of the table so that it can expand across the whole page or a smaller width. Width can be determined in both pixels and percentage.
Adding the attribute to the table tag would look like <TABLE WIDTH="100%"> or <TABLE WIDTH="200"> Height can also be added to the table if you wish. This is not an attribute that is used often but it can be used. The coding for it would look like <TABLE HEIGHT="100%"> or <TABLE HEIGHT="300"> Again you can use either percentage or pixels. Background Color will add background color to your entire table. You can choose to do this or choose to add different colors to cells discussed later, or you can do both. Adding the attribute to the table tag would look like <TABLE BGCOLOR="##EFEFEF"> You can also add an image as the background to your table, to accomplish this your code would look like <TABLE BACKGROUND="url to your image"> Cellpadding With cellpadding you will set the amount of space between the border and the contents within a cell. The tag and attribute will look like <TABLE CELLPADDING="20"> Cellspacing With cellspacing you will set the amount of space between the cells in a table. The tag and attribute will look like <TABLE CELLSPACING="20"> Alignment This will align the entire table on the page, left, right or center. The tag and attribute will look like <TABLE ALIGN="CENTER"> Below you will see the code used to produce the table shown after the code. <TABLE BORDER="10" CELLPADDING="5" CELLSPACING="5" BORDERCOLOR="#111111" WIDTH="50%" BORDERCOLORLIGHT="#0000FF" BORDERCOLORDARK="#000080" BGCOLOR="#A7C5CD" HEIGHT="50" ALIGN="CENTER"> <TR> <TD WIDTH="33%"> </TD> <TD WIDTH="33%"> </TD> <TD WIDTH="34%"> </TD> </TR> <TR> <TD WIDTH="33%"> </TD> <TD WIDTH="33%"> </TD> <TD WIDTH="34%"> </TD> </TR> <TR> <TD WIDTH="33%"> </TD> <TD WIDTH="33%"> </TD> <TD WIDTH="34%"> </TD> </TR> </TABLE>
If you changed the BGCOLOR in the above and added the background="images/backgrnd.jpg" (using an image in the AMM web) you will see the same table as above only with a background as shown below.
Cells Even cells have attributes that will change the way a table will be displayed. Below you will find the tags and attributes that are used to design the individual cells of a table. Alignment you can align your content in a cell vertically or horizontally or both. When aligning horizontally the attributes will be left, right or center; when aligning vertically the attributes will be top, bottom or middle. The tag and attributes for these are <TD ALIGN="CENTER" VALIGN="MIDDLE"> Width and Height are used in the same manner as width and height for the table. Again height is not an attribute used often. The tag and attributes for these are <TD WIDTH="25%" HEIGHT="25%"> or <TD WIDTH="100" HEIGHT="100"> Cell Span is joining cells together to make a larger cell. You can join cells horizontally, vertically, or both. The tag and attribute for horizontal cell span is <TD COLSPAN="2"> with the 2 making the column spread across two columns and the tag and attribute for the vertical cell span is <TD ROWSPAN="2"> with the 2 making the row spread across two rows. Background You can add a colored background or an image to each individual cell within a table. To create a background color you would use this coding <TD BGCOLOR="##EFEFEF"> and to add a background image you would use this coding <TD BACKGROUND="url to your image"> Taking the same table as shown under table attributes without the background. Below you will see <TABLE BORDER="10" CELLPADDING="5" CELLSPACING="5" BORDERCOLOR="#111111" WIDTH="50%" BORDERCOLORLIGHT="#0000FF" BORDERCOLORDARK="#000080" BGCOLOR="#A7C5CD" HEIGHT="50" ALIGN="CENTER"> <TR>
<TD WIDTH="75%" COLSPAN="2" BGCOLOR="#EFEFEF" ALIGN="CENTER" VALIGN="TOP"> </TD> <TD WIDTH="34%" ROWSPAN="2" VALIGN="BOTTOM"> </TD> </TR> <TR> <TD WIDTH="33%" ROWSPAN="2"> </TD> <TD WIDTH="33%"> </TD> </TR> <TR> <TD WIDTH="33%"> </TD> <TD WIDTH="34%"> </TD> </TR> </TABLE>
This cell is spanned over two columns and the background color has been changed and has been horizontally aligned to center and vertically aligned to the top.
This cell has no extra attributes This cell is spanned over two rows
This cell is spanned over two rows and vertically aligned to the bottom of the cell This cell has no extra attributes
This cell has no extra attributes
And finally any content that you add to the cell you will have to format as shown in the previous lessons.
HTML Lesson 4
Forms
A form used in HTML is used to send information to a destination. HTML is used to create the forms but to perform the action that will be taken requires other program languages like java, C or perl. You can place several forms within one HTML page but
you cannot nest your forms. Below you will find each of the tags and attributes that can be placed within a form. <FORM> </FORM> You form but begin with the <FORM> tag and end with the </FORM> tag. There are 3 attributes that are used with the <FORM> tag, they are ACTION, METHOD and ENCTYPE. ACTION Attribute instructs the browser where it should send the data collected on the form. You can tell the browser to just send the data to your email or you can us a program to send your data. You would need some knowledge in programming in the other language to use them for your data. METHOD Attribute explains how the information will be sent, either POST or GET. ENCTYPE Attribute will determine the format the information will be sent. You get three choices applications/x-www-form-urlencoded (default), multipart/formdata and text/plain. applications/x-www-form-urlencoded - this will send the data converting the spaces to the "&" sign and non-alphanumeric characters to the "%" sign. It will also be mailed as an attachment. multipart/formdata - this value should be used when the form is set up to accept files. I don't suggest using this as we all know files can contain viruses. text/plain - this will send the form data in plain text displaying each field of the form on a separate line.
Form Fields
<INPUT> This tag is used to specify the kind of field that will be placed on the form. The fields used are buttons, check boxes, images, one-line text fields, passwords and radio buttons. Then there are attributes that can be used for with the <INPUT> tag. Attributes ALIGN - alignment can be set to left, right, center and justify CHECKED - Default check this field COLS - set the width of a text area MAXLENGTH - set the maximum number of characters allowed in a text field NAME - sets the name of the field ROWS - sets the amount of rows allowed in the text area SIZE - sets the size of the field in characters VALUE - sets the default value to be displayed on the form when viewed SRC - used with the IMAGE input to specify the url to use for the image TYPE - specifies the type of field being used
BUTTON FIELD is used with scripts like JavaScript. Although the button will look similar to the Reset and Submit buttons it does not work the same way. <INPUT TYPE="button" NAME="ADD" VALUE="ADD"> CHECK BOX provides the user with selectable boxes. The tag used is <INPUT TYPE="CHECKBOX"> By using the CHECKED attribute it sets the default box to be chosen. When using the CHECK BOX Field you are enabling the user to check off more than one choice. <FORM> <INPUT TYPE="CHECKBOX" NAME="1" CHECKED> ONE <INPUT TYPE="CHECKBOX" NAME="2" CHECKED> TWO <INPUT TYPE="CHECKBOX" NAME="3"> THREE </FORM> ONE TWO THREE
SELECTION FIELDS The Selection field allows for a number of options to choose from. This field will require the use of the <SELECT> tag and the <OPTION> tag. The Selection field using just one default selection. If the user was to select a different number the defaulted selection would not be submitted. <SELECT NAME="Amount"> <OPTION> One <OPTION> Two <OPTION SELECTED> Three <OPTION> Four </SELECT
The Selection field using more than one selection using the MULTIPLE attribute. The multiple attribute allows the user filling out the form to choose from 0-all of the options in the list. <SELECT NAME"Amount" MULTIPLE> <OPTION SELECTED> One <OPTION> Two <OPTION SELECTED> Three <OPTION> Four </SELECT>
HIDDEN These fields are much like the text fields only they are not seen by the user filling out the form. It is used to submit information that has not been entered by the
person filling in the form. The Hidden tag will look like <INPUT TYPE="Hidden"> and use the Name attribute and the Value attribute. What the line below will do is add a subject line to the data being sent. The person filling out the form will never see this but the recipient of the form will have this field added to their information received along with the senders own data that was entered. <INPUT TYPE="hidden" NAME="Subject" VALUE="Form Submit"> IMAGE BUTTON You can use an image for a button instead of using the plain buttons created with the SUBMIT or RESET or BUTTON types. <FORM> <INPUT TYPE="image" NAME="submit" SRC="images/write2me.gif" ALT="Submit"> </FORM>
PASSWORD FIELD will work like a text field only you cannot see the text that you type. The tag used is <INPUT TYPE="PASSWORD"> <FORM> <INPUT TYPE="PASSWORD" NAME="Password" SIZE=20> </FORM>
RADIO BUTTON is similar to the CHECK BOX as it provides one a selection to choose from. The tag used is <INPUT TYPE="RADIO"> It will use the CHECKED attribute to specify the default choice. The RADIO BUTTON does not allow more than one choice. If the Radio Buttons are not all named the same they will not work properly, therefore setting a value for them will allow you to distinguish which button has been chosen. <FORM> <INPUT TYPE="RADIO" NAME="choose" VALUE="One"> One <INPUT TYPE="RADIO" NAME="choose" VALUE="Two" CHECKED> Two <INPUT TYPE="RADIO" NAME="choose" VALUE="Three"> Three </FORM>
One
Two
Three
RESET & SUBMIT BUTTONS are used to either reset the form, deleting any data that has been entered or to submit the form, sending the data to the url specified in the ACTION attribute. Although the TYPE will either be "RESET" or "SUBMIT" the VALUE attribute can be set to any desired text. <FORM> <INPUT TYPE="RESET" VALUE="Reset"> <INPUT TYPE="SUBMIT" VALUE="Submit"> <INPUT TYPE="RESET" VALUE="Clear Form"> <INPUT TYPE="RESET" VALUE="Send"> </FORM>
TEXT FIELD allows the field to have a single-line entry The tag used is <INPUT TYPE="TEXT"> The attributes that can be used to control the field are VALUE, SIZE and MAXLENGTH. <FORM> <INPUT TYPE="text" NAME="Text" SIZE=20 MAXLENGTH="20" VALUE="Type here"> </FORM>
Type here
TEXT AREA allows you to create a field in which a large amount of text can be entered. This field uses the <TEXTAREA> tag with the ROWS and COLS attributes to determine the width and length of the text field. <TEXTAREA ROWS="5" COLS="50" NAME="OPINION"> Enter your opinion in this area </TEXTAREA>
Enter your opinion in this area
Organizing Forms
By using the <FIELDSET> and the <LEGEND> tags you can organize parts of your form. The <FIELDSET> tag groups data fields that you select into one group, it creates a box around the fields you have specified to be included in the group. The <FIELDSET> must begin with the <LEGEND> tag to provide a title for the group. <FORM> <FIELDSET> <LEGEND>Personal Information</LEGEND> Name: <INPUT TYPE="text" NAME="Name" Size="20"><BR> Address: <INPUT TYPE="text" NAME="Address" Size="30"><BR> City: <INPUT TYPE="text" NAME="City" Size="20"><BR> Province: <INPUT TYPE="text" NAME="Province" Size="20"><BR> Postal Code: <INPUT TYPE="text" NAME="PostalCode" Size="7"><BR> </FIELDSET> <TEXTAREA ROWS=4 COLS=40 NAME="Comments">Enter your comments here</TEXTAREA> </FORM>
Personal Information Name: Address: City: Province: Postal Code:
Enter your comments here
Click here to see a simple form created to email me.
HTML Lesson 5
Frames
Ask Maggy Mae is created using frames. Frames divides the browser into several web pages. On Ask Maggy Mae there are 3 pages displayed each time you click. When you enter the site you have the logo on the top, which is one page; the navbar on the left side, which is a second page; and the front page on the right which will change each time you click on a link on the navbar.
Using frames makes it much easier to add pages to Ask Maggy Mae. At the moment there are 122 pages on the site. I chose to use frames to make my work much simpler. My considerations were, changing the logo, the constantly adding new pages which could end up costing me many hours of senseless programming to change the navigation menu on each page every time I added or even deleted a page from the site. I did consider doing away with frames because the navbar I use is created in such a manner that editing would not be difficult but because the navbar is a JavaScript navbar I reconsidered in the case of those who do not have JavaScript enabled browsers and use the backup navbar I've included in my site. There really isn't a lot of work to creating a frames page, but it is very important to make sure the links within the frames are created properly. Tags & Attributes The basic tags and attributes you will need to know in order to use frames are as follows.
<FRAMESET> </FRAMESET> ROWS <FRAMESET> tag establishes frames within the HTML document, it will end with the </FRAMESET> tag. will set the size for rows in either pixels, percentage or "*" can be used to signify remaining space. will set the size for columns in either pixels, percentage or "*" can be used to signify remaining space This tag is used to identify the frame's characteristics and load the initial content. identifies the page that will be loaded into the frame this will label a frame so it can be referred to from other frames or windows. sets a section of the HTML document that will be visible to a browser that does not support frames. Basically it will tell the person that the page is a frames page and their browser does not support it.
COLS
<FRAME> SRC="url" NAME
<NOFRAMES>
Below you will see the basic HTML code for a frames page that is set up with a the frames in rows. You can also set the frames so they are in columns with the COLS attribute. <HTML> <HEAD> <TITLE>Sample Frames Page</TITLE>
</HEAD> <FRAMESET ROWS="128,*"> <FRAME NAME="header" SRC="url for top frame"> <FRAME NAME="main" SRC="url for bottom frame"> </FRAMESET> </HTML> You can add formatting to your basic frames page to create a design that suits you. The attributes listed below should only be used within the <FRAME> tag.
FRAMEBORDER=? NORESIZE SCROLLING="?" allows you to set the border around the frame or remove it stops visitors from being able to resize the frame allows or stops the visitor from scrolling the frame, the values are Yes or No and Auto sets the margin height (in pixels) above and below the content within the frame sets the margin width (in pixels) before and after the content within the frame sets the color of the frame border (if you have chosen to have a border)
MARGINHEIGHT=?
MARGINWIDTH="?"
BORDERCOLOR="?"
The HTML code below is the code used to create the frames page for this sample created originally for the MSN Tutorial on adding music to your site using frames. My pages have been created with FrontPage so I removed the Meta Tag lines to show just the frames coding. This sample shows all of the attributes except FRAMEBORDER and BORDERCOLOR. <html> <head> <title>Ask Maggy Mae</title> </head> <frameset rows="128,*"> <frame name="header" scrolling="no" noresize target="main" src="musicpage.htm" marginwidth="0" marginheight="0"> <frame name="main" src="AMMQuilt.htm"> <noframes> <body> <p>This page uses frames, but your browser doesn't support them.</p> </body> </noframes> </frameset> </html>
Navigation There are two ways to set your navigation of your frames page. Either your visitors can click in one frame and the result of that click will appear in another frame, or your visitors can click in one frame and the result of that click will appear in the same frame. I have used both these options when I created the frames page for Ask Maggy Mae. When going from one navbar to the other the click navigates the visitor within the same frame bringing up a new navbar that is not JavaScript, but when the visitor clicks on any of the links in the navbar other than switching navbars the click will result in a page opening in the frame beside the navbar. The top frame holding the Ask Maggy Mae logo never changes. This is where the use of TARGET="?" comes in. You will use the TARGET attribute to instruct the browser in which frame the click will open in.
HTML Lesson 6
Meta Tags
<META> tags are used to get your pages search engine ready. These tags are located within the <HEAD> tag. When you register with a search engine, they will crawl your site looking for information contained within the <HEAD> tag. Adding Keywords is very important, the search engine is going to be looking for the keywords in order to register your site. When someone does a search the search engine retrieves the information from the keywords submitted by a web page. The HTML code used to add keywords is as follows. <META name='keywords" content="enter as many keywords as you can into this area"> It is also important to add a description of your site. The description of your site is what the search engine will display when it retrieves the results from a search. The HTML code used to add a description is as follows. <META name="description" content="enter a description of your site here"> When using a web developing program to create your web you are provided with other <META> tags that are helpful. Those tags tell the browser information about the author, the program used, etc. You can see what FrontPage includes by viewing the FrontPage Lesson 1. To help you with <META> tags, Ask Maggy Mae also provides a Meta Tag Generator.
FTP
File transfer Protocol is what is used to transfer your web from your computer to you web space on the internet. There are many FTP programs that can be used. If you use FrontPage, you don't need another program in order to upload your files, FrontPage has a build in publishing tool. Another handy tool for uploading to your website is the use of My Network Places if you are using Windows XP. For Ask Maggy Mae, I use My Network Places when I want to quickly add a graphic so I can place it in a post on the forum. If you are not using Windows XP there is a tool that you can download from Ask Maggy Mae that works the same as My Network Places in XP. MSWebFolders can be installed into any of the previous Windows OS. I also use the My Network Places or the build in ftp in the IE browser to upload files to my Shaw webspace. To use the build in ftp all you need to do is enter the url for your ftp. Simply type ftp:// and then the url that you use for the file transfer. If you are not sure of your ftp url ask your web host. I have my shaw ftp saved in my favorites for easy access.
Lesson 1
Introduction
CSS stands for Cascading Style Sheets, they are used to add fonts, colors and spacing to your web pages. If you have written code in HTML you will know the work involved in setting up your fonts for paragraphs, headings, links, etc. All of this can be eliminated by using CSS. Adding a couple of lines of syntax to your web page and your formatting is complete. CSS is also very easy to change, if you want to change your formatting you simply change the few lines of CSS instead of having to go through your entire document to change all the coding. If you use an external style sheet then all of your web pages on your site can be changed simply by changing the one style sheet. Think of the time that would be saved by using an external style sheet to design your page! The one disadvantage to CSS is that not all browsers are supported by it, the older browsers may only support some CSS or none at all.
Syntax
Syntax is basically the rules you must follow when writing in any computer language. CSS has it's rules too. A style is made up of two parts, the selector and the declaration. If you have coded pages in HTML you will most likely recognize the selector, as it is an HTML tag. The declaration will determine what the selector should display. Your declaration is held between the { } symbols. For example: H1 {font-size 12pt; color: blue; font-family: arial}
The H1 is your HTML tag or your selector, the font size, color and family is your declaration. All declarations must be separated by a semi-colon.
Creating Style Sheets

Style Sheets can be applied in three different ways, they can be applied locally, internally and externally. You can even apply all three to your web pages, but there is a precedence. Creating Internal Style Sheets The internal style sheet are placed within an HTML page between the <HEAD> and </HEAD> tags. Naturally the formatting taking place in this case would only effect the page in which you are inserting the style sheet into. Below is an example of the code used within an HTML document and the sample page can be seen here. The internal Style sheet is best when creating individual web pages with a lot of text. <HTML> <HEAD> <TITLE>Cascading Style Sheets - Sample Page</TITLE> <STYLE> H1 {text-align: center; color: blue; font-family: arial} P {text-align: left; color: green; font-family: Verdana; font-size: 14pt} </STYLE> <BODY> <H1>Cascading Style Sheets - Sample Page</H1> <P>This page has been created to show how CSS works within a web page. The Title of the page has been centered with blue text and the font is arial size 14pt. This paragraph has been formatted using a left alignment, green text and size 14pt Verdana font.</P> </BODY> </HTML> Creating External Style Sheets The external Style Sheet is creating as a text file saved with the css extension. It is then linked to from the HTML document between the <HEAD> and </HEAD> tags using the <LINK> tag. The external Style Sheet can be used for all your pages in your web. When changes are needed for your web you only need to change the Style Sheet instead of each individual page in your web. If you are using FrontPage you can simply create a new page and view it via the HTML view, remove the provided code and enter your css code. When finished simply save the document when the Save As window pops up under Filename enter the name for your file then add the .css extension to it, under Save As Type use All Files. The next time you open that page in FrontPage you will not be given the option to change from HTML to Normal or Preview. When using notepad to create your css file save in the same manner as FrontPage. Below is an example of the code I used to create the page here. H1 {text-align: center; color: blue; font-family: arial} P {text-align: left; color: green; font-family: arial; font-size: 14pt} And the code used in the HTML page linking to the CSS page.
<HTML> <HEAD> <TITLE>External Style Sheets</TITLE> <LINK REL="stylesheet" TYPE="text/css" HREF="samplecss.css"> <BODY> <H1>External Style Sheet</H1> <P>This page uses an external style sheet</P> </BODY> </HTML> Creating Local Style Sheets And finally Local Style Sheets are used within HTML tags to render the style of a particular element on a web page. For those who do use FrontPage, when you view your document in the HTML view you could very well see that FrontPage uses Local Style Sheets at times. The syntax for Local Style Sheets is slightly different than when using the external and internal Style Sheets. The Style attribute will be placed inside the HTML tag that you are wanting to apply the style to. The one thing to remember is that with the local style sheet you are applying the code to just one tag, it will not affect anything else in the document, nor will it affect any other page in your web. Below is an example of a local style sheet and you can find the page using it here. <html> <head> <title>Applying Local Style Sheets</title> </head> <body> <P style="background-image: url('d156889.shared30.cdxsolutions.com/backgrnd.jpg'); font-face: arial; font-size: 14pt; color: #008080; text-align: center"> This paragaph has been formatted using a local style sheet. As you can see the font color is teal, the font size is 14 pt and font family is Arial. I have centered the text and used the AMM background.</P> <P> </P> <P>This paragraph is not affected by the local style sheet.</P> </body> </html>

HTML Notes

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Notes

Uploaded by

Copyright:

Available Formats

HTML (HyperText Markup Language)

and will look as follows when seen in the web browser

Examples <HR SIZE=10>

<HR ALIGN=RIGHT WIDTH=50%>

The <html> Element...</html>

The <head> Element

The <title> Element

The <body> Element

Beginning HTML Tags!

Tags Without Closing Tags

HTML - Formatting Elements w/ Tags

Bold, Italic and More

HTML - Formatting Tag Usage

id width height title style

HTML Div Element:

HTML - Div Layouts

HTML Div Layout:

HTML Div Layout II:

Here's another content article right here.

Ordered and unordered Lists

HTML Ordered Lists

Numbered List Start:

HTML Ordered Lists Continued

Ordered List Types:

HTML Unordered Lists

Milk Toilet Paper Cereal Bread

Unordered List Types:

Milk Toilet Paper Cereal Bread

Milk Toilet Paper Cereal Bread

Milk Toilet Paper Cereal Bread

HTML Definition Term Lists

HTML Forms - The Input Element

HTML Form Tags

<form> <input />

Defines an HTML form for user input Defines an input control

HTML - Checkbox Forms

HTML Checkboxes Selected

HTML - Radio Forms

HTML - Radio Checked

HTML - Text area Cols and Rows

Bigger Text Areas:

A text area could take up an entire page if required.

HTML - Textarea Wrap

soft hard off

Text Area Wrapping:

HTML - Textarea Readonly

Read Only Textareas:

HTML - Upload Forms

Max File Size:

HTML - Selection Forms and Drop Down Lists

Drop Down List:

Drop Down List:

HTML - Selection Forms

HTML - Submit Buttons

Form Submission - Action

HTML Reset Buttons

HTML Reset in Action

HTML - Hidden Field

HTML - Name and Value the Fields

Frames syntax: overview

Frames - A Generic Frame Page

Adding a Banner or Title Frame

FrameBorder and FrameSpacing