AY WEB DESIGNING TUTORIAL

WELCOME TO AY WORLD ABOUT PHOTO BEST OF FOOTBALL CONTACT FAVORITE LINK My Photos My Files Blog HTML TUTORIAL

Backgrounds / Fonts & Text / Accents / Lists/ Images / Links / Tables / Frames / Forms /

Introduction This is a simple tutorial where you basically teach yourself and work at your own pace. All I do is provide you with the coding examples and definitions. It's totally free.

HTML (Hyper Text Markup Language), is the programming language used to create your Web Pages for publication on the Internet. It's not like learning to speak Greek. It's not a complex beast, or a monster. HTML is your friend. It's basically very simple and anyone can do it. Depending on your level of enthusiasm, you can actually publish your first Web Pages in just a day or two. This tutorial will walk you through all the basics and some advanced HTML in several easy steps that will have you beating up your keyboard programming web pages like an expert in no time. Armed with the tricks and code samples you'll find here you will be limited only by your own imagination. So whether you just want to design your own home page or make the big leap to a full blown Web Site you will be able to do it your way. You may want to print this tutorial for later reference while working as it will make it much easier to go through it.

The following is a short list of things you will need to get started.

Getting Started

A simple Text Editor, such as Notepad, or Wordpad (Later you can use an HTML Editor if you like)
A Web Browser (Microsoft Internet Explorer or Netscape Navigator, versions 4.0 of each recommended)
A genuine Desire to learn HTML (Work at your own pace!)
A couple of hours to start (A fresh pot of Java will help)

The Basics HTML is made up of numerous "TAGS" which are always included between the "less than" < or "greater than" > brackets. The text that is in between these brackets tells your Web Browser what to do, and how to recognize and display the content of your Web Page. Your Web Page content is determined solely by your imagination, and your creative use of these "Tags". This tutorial will walk you through these tags in the simplest way possible so that you can quickly get a basic working knowledge of HTML and be on your way to creating your own web pages in short order. More about that later. First you must understand your Browser. The Browsers Your Browser is also your friend. It's what you use to surf the net, and to view your HTML work offline before you publish your Web Pages on the Net. Web Browsers are free! So there's no excuse for using a lame old Browser anymore. Before you get serious with this tutorial, check out your Browser. If you are not using the lastest versions of Microsoft Internet Explorer or Netscape Communicator you are missing a lot when you are surfing the Web. Stop now and go get the latest version of your preference. Recommended Browsers

Microsoft Internet Explorer 6.0
Mozilla

If you've got a good browser already, you can upgrade later, so for now if you are viewing this in your browser move on. If you are viewing this in your Internet Service Provider's window you may want to switch to viewing it in your browser's window as it will be helpful to you at later references here.

Requirements All HTML documents require the minimum "tagging" in order to function in your Browser. The minimum HTML document looks like this:

<HTML>	This tells your browser that it is reading an HTML document and begins the document
<HEAD>	This begins your HTML document heading
<TITLE>	This begins your HTML document title
</TITLE>	This ends your document's title
</HEAD>	This ends your documents heading (The title is allways included within the "head" tags)
<BODY>	The "body" of your document. All of the content of your web page is within the "body" tags
</BODY>	End of body (end of content)
</HTML>	End of HTML document (end of your web page)

This snippet of code will show only a blank gray page. There is no content within the "<BODY> & </BODY>" tags. And a gray background is simply the "default" background when none is specified in your HTML code. Stay with me now. All HTML Tags are surrounded by these brackets and all sections of an HTML document are noted by a beginning and an ending. The end of the "<TITLE>" is designated by the "/" charactor "</TITLE>". It is very important to understand that their is a certain "hierarchy" of HTML tags which must be followed. Note that the <BODY> and </BODY> tags are all included within the <HTML> and </HTML> tags. And note that the <HEAD> and </HEAD> tags are also nested within the <HTML> and </HTML> tags. Notice further that the <HEAD> & </HEAD> tags are before the "BODY" tags, and that the "TITLE" tags are nested within the "HEAD". All tags on your page should be nested according to their hierarchy. It gets easy just keep going. Example of good HTML hierarchy vs. bad:

Good HTML Hierarchy	Bad HTML Hierarchy
<HTML>	<HTML>
<HEAD>	<HEAD>
<TITLE>	<TITLE>
</TITLE>	</HEAD>
</HEAD>	</TITLE>
<BODY>	<BODY>
</BODY>	</HTML>
</HTML>	</BODY>

Can you see the good vs. the bad? Don't worry if you do not yet understand it all. Just make a mental note to yourself about "Hierarchy" and proper "Nesting" of your HTML tags.Top of Page?

HTML Tags Now get ready to make your first HTML page. Open up your text editor, wordpad, notepad, or what ever. Create an empty file folder somewhere on your system. Make it easy to get to for faster work, and give the file folder a name. "MyFiles" or whatever you want. In your text editor start with a blank page and type in the minimum requirements as shown above in the first example. You should have this: <HTML> <HEAD> <TITLE> </TITLE> </HEAD> <BODY> </BODY> </HTML>

Got it? Good. Now add some new stuff to what you've already got. (The new code is in Blue). <HTML> <HEAD> <TITLE> My first web page</TITLE> </HEAD> <BODY> This is my first web page </BODY> </HTML>Save this in your file folder that you created a minute ago. Give it a name, and save it as an HTML document. Say "Mypage.html". (Windows 3.1 users save it as "Mypage.htm". Skip the last "l".) Now open your browser. Click "Open" Select the file folder you created. Open "Mypage.html" in your browser because you have just created your first Web Page. Congradulations!

Fonts and Text There are seven different font sizes to choose from, size 7 being the largest and size 1 being the smallest. The same color codes that you used in the Backgrounds section apply to font colors. Again the old six digit RGB codes. The actual font faces that you can use are limited to whatever fonts you have on your system for your viewing purposes. A Ha! But not for your Web Site programming purposes! Yes, you can program a font on your web page that you don't even have on your sytem and when somebody who does have that font visits your web page they will see it. But it also works the other way around. If you use some rare and obscure font face on your web pages that your viewers don't have they won't see it. Most Browsers will display your text, but they will do it in the default font face, (usually boring old Times New Roman). Y O U C A N G R E A T L Y E N H A N C E The look and feel of your Web Pages with fonts & text.Now let's add some contrast to "MyPage.html". Open up your text editor again and open your web page in the editor.

<HTML> <HEAD> <TITLE>My first web page</TITLE> </HEAD> <BODY BACKGROUND="Images/blue.gif"> <FONT SIZE=5 COLOR=#FF0000 FACE="Arial">This is my first web page</FONT> </BODY> </HTML>Simple as that! *NOTE* Your visitors to your web page may have limited or completely different font sets than what you have programmed and may not be able to "read" your fonts, but you can give them multiple choices. They are in a prioritized order. Their browser will look for the first one in the order and display the content in that font if they have it. If not the browser will look for the second, the third choice, etc. Give multiple fonts choices like so:

Accents Are you still with me? Good. Go and get a great cup of coffee and sit down. In this section I'll cover other ways to dynamically enhance the text content of your web pages by using the following tags: <B></B> - Bold
<I></I> - Italics
<EM></EM> - Emphasis, Emphasize the text
<STRONG></STRONG> - Strong - Strongly emphasize the text
<U></U> - Underline the text (Is not recognized by Netscape Navigator 2.0)
<CENTER></CENTER> - Center the text on the page
<STRIKE></STRIKE> - Strike Through Text You can not only use these tags to accent the appearance of the text content of your web pages, but you can use them together. That is you can use more than one on any given word or line or paragraph. You can use them pretty much any way you want. All that you need to remember is the Nesting rule. When you use these tags together you must keep them contained in a "nested" format.

<P><FONT SIZE=2 COLOR=#800000 FACE="Arial"><B><STRONG><EM>This is proper nesting</EM></STRONG></B></FONT> <P><FONT SIZE=2 COLOR=#800000 FACE="Arial"><B><STRONG><EM>This is not nested at all</B></EM></STRONG>Here's a couple more accents for you. <BLOCKQUOTE></BLOCKQUOTE> - Blockquote, automatically indents a block of text
<H1></H1> - Heading of the first priority
<H2></H2> - Heading of the second priority
<H3></H3> - Heading of the third priority
<HR SIZE=5> - Horizontal Rule (Size= 5 Pixels in Height, You can specify any size)
<P ALIGN=RIGHT> - Paragraph Align - You can align Paragraphs to the left, right, and center *NOTE* You do not have to end the <P ALIGN> tag or the <HR> tag. Try some of this stuff out, you'll see how versatile the uses for it can be. open up that old text editor and practice with it a while. Create a whole new page as follows. <HTML> <HEAD><TITLE>My Second Web Page</TITLE></HEAD> <BODY BGCOLOR=#FFFFFF><CENTER><H1>The Anatomy of a good Web Page</H1></FONT></CENTER> <P><HR SIZE=5> <P><FONT SIZE=4 COLOR=#000000 FACE="Arial"><B><STRONG><EM>The Heading</EM></STRONG></B> <BR><FONT SIZE=2 COLOR=#0000FF FACE="Book Antigua"><BLOCKQUOTE>The heading is a very important section of an HTML document even though the heading contains information that won't even be displayed on the Web page itself.</BLOCKQUOTE></FONT> <P><H2><I><U>The Title</U></I></H2> <BR><Font SIZE=2 COLOR=#000000 FACE="Book Antigua">The Title of an HTML document (Web Page) is <B><I>nested</I></B> within the head tags. <P ALIGN=RIGHT><H3><B>The Body</B></H3 <P ALIGN=RIGHT><BLOCKQUOTE>The Body contains all content for the Web Page that will be viewed. It is where I put all of my neat stuff of whatever it is that I want to appear on my HTML document.</BLOCKQUOTE> <P><HR SIZE=15> </BODY> </HTML>Get that all typed into your text editor and then save it as whatever name you want.html (save it as an HTML document). Save it in the same file folder as your other page. Then open it up in your browser and view it!

Lists There are several kinds of "Lists" that you can use for different purposes. I will use a series of Lists to describe them. Lists can contain whatever type of information that you want them to. And with just a little imagination and creativity, lists can be useful for an infinite number of purposes on the World Wide Web. This is an "Ordered List"

This is list item # 1
List item # 2
List item # 3, etc.

This is an "Un-ordered List"

List item # 1
List itm # 2, etc.

This is a "Definition List" This Definition Title # 1 Definition Data, This is the Definition of Definition Title # 1 Browser: What I use to see what's on the net. Text Editor or HTML Editor: What I use to program stuff for view on the net in someone else's browser. There are more kinds of Lists. Now here's how you do it.

An example of an "Ordered List"<OL> - (Starts Ordered List) <LI> - (List Item # 1) <LI> - (List Item # 2) <LI> - (etc., etc.) </OL>- (Ends the Ordered List) When you make an "Ordered List" with the <OL> tags most Browsers interpret the command and automatically assign each List Item a number by default starting with # 1. However, it is also possible to define what is used to "Order" the List. You can use Upper case letters, Lower case letters, and even Roman Numerals. No matter which you use, you must remember to Begin the list and then End the list. Here's how you define the format of the list.<OL TYPE=A> - (Automatically labels list Item # 1 as List Item # A) then A, B, C, etc. <OL TYPE=a> - (Automatically labels list Item # 1 as List Item # a) then a, b, c, etc. <OL TYPE=I>- (Automatically labels list Item # 1 as List Item # I) then I, II, III, IV, etc. You can also use a new list to pick up where you left off on a previous list, that is you can define what number or letter to start with like so:<OL TYPE=1 START=6>- This starts the new list at # 6 and goes from there. "Unordered Lists" Unordered Lists follow the exact concept of the Ordered Lists exept that by default instead of showing each List Item being auto numbered the List Items are marked by a

- "Bullet"

The coding is simple, just use the tags<UL> <LI> <LI> </UL>This is a "MENU" List · Menu Item # 1 · Menu Item # 2 Again, Menu Lists are simple. Just use the <MENU><LI></MENU> tags. This is a "Directory List" · Directory Item # 1 · Directory Item # 2, etc. Use the <DIR><LI></DIR> tags. Last but not least, Definition Lists<DL> - (Begins Definition List) <DT> - (Definition Title # 1, what will be defined) <DD> - (Definition Data, the definition itself) <DT> - (Definition Title # 2) <DD> - (Definition # 2) </DL>- (Ends Definition List) You can also "nest" lists inside of lists. The old Hierarchy rule applies. Try one. Put this in your text editor.<HTML> <HEAD> <Title>My Nested Lists</TITLE></HEAD> <BODY BGCOLOR=#FFFFFF> <CENTER> <FONT SIZE=6 COLOR=#0000FF FACE="Arial"><My List Of Lists!</B>></FONT> <P></CENTER> <HR SIZE=5> <P><FONT SIZE=3 COLOR=#000000 FACE="Book Antigua"> <OL TYPE=I><U>Exciting Things at WilRose.com</U> <OL TYPE=A> <LI>Basic HTML Tutorial <OL TYPE=1> <LI>Background Images <LI>Fonts and Text <LI>And Much More! </OL> <LI>WRnetRadio <OL TYPE=1> <LI>Blooze & Boogie Radio Show <LI>Keepin' it Country Radio Show <LI>Groovin' R & B Radio Show </OL> <LI>DigiJam <LI>Software reviews <LI>Downloads to jam live on the net <LI>Latest electronic Music software </OL> </OL> <LI>Everything else on the Internet </OL> </BODY> </HTML> And there you have it. Open your text editor and practice the different kinds of lists. Try them all. Be creative and use multiple accents, fonts, font colors and whatever else you come up with.

Images Imagery made easy! These days there are literally dozens of different Image Formats that can be used in hundreds and thousands of ways. For the purpose of this tutorial we'll use the K.I.S.S rule. (Keep It Simple Stupid). There are only two main Image formats to worry about here and they are: ".gif" - Simple Imagery and animation and ".jpg" - photos and photo quality.

Don't be fooled by the term "Photo Quality". On the Web photo quality is not necessarily the best way to go. It's all a matter of memory space and download time. You don't want a simple image to take several seconds to a minute to download, you will lose your visitors. On the Web, small is better. Click on the Image above with your right mouse button and save it just like that background image. Again, save it your sub-folder "Images". Save it as "Cool.gif". We'll use it shortly. While you're at it, save these three below as well. Save them as "Back.gif", "Home.gif", and "Next.gif". We'll use them too! The HTML for programming Images is slightly more complex than simple text, fonts, accents and so on but only because with images you have other attributes to think of such as the Image Width, Height, Border, and File Address. The following HTML tags are used for simple images: <IMG - Tells the Browser that the Object is a Image file WIDTH - Specifies the Image width in # of pixels HEIGHT - Specifies the Image height in # of pixels BORDER - Specifies the size of the Image border around it in thickness of # of pixels SRC - Declares the file path to the Address of the Image to be displayed ALT=" ">Alternate text to be displayed in old browsers that don't do images

Open up your text editor and get busy with this code:<HTML> <HEAD> <TITLE>My Cool Web Page</TITLE></HEAD> <BODY BACKGROUND="Images/blue.gif"> <CENTER><IMG WIDTH=450 HEIGHT=70 SRC="Images/Cool.gif" ALT="My Cool Web Page"></CENTER> <P><HR SIZE=5> <P><CENTER><FONT SIZE=5 COLOR=#0000FF FACE="Arial"><B> My First "Cool" Web Page</B></FONT></CENTER> </BODY> </HTML>

Open that up in your Browser and check it out! Now that's a cool page! Notice that there may be an annoying little 1 pixel wide BORDER around the Image. Some Browsers do that by default, always blue and always 1 pixel unless you specify otherwize. If you like you can eliminate it by simply inserting the "BORDER" attribute. <CENTER><IMG WIDTH=450 HEIGHT=70 BORDER=0 SRC="Images/Cool.gif" ALT="Image without border"></CENTER>Or you can specify the width of the border and the color of the border around the image by just declaring how many pixels wide you want it to be. BORDER=5 will give you a border that is 5 pixels wide top, bottom, left, and right of the image, and BORDER COLOR=#000000 SIZE=10 will give you a black border that is 10 pixels wide That first example displayed the image "centered at the very top of the page. Open up your text editor and remove the <CENTER> and the </CENTER> tags from around the Image line. Then put lots and lots of text on your page. Any text. Anything you want, just put a lot of it on there, say enough to fill up half a screen or so. And then go view it. Go ahead! I'll wait here. I'm still waiting,.............................. OK! The whole picture changed didn't it? Now leave all your text where it is but eliminate the Horizontal Rule. Add the following ALIGN=LEFT attribute to your Image tags, just like below. <HTML> <HEAD> <TITLE>My Cool Web Page</TITLE></HEAD> <BODY BACKGROUND="Images/blue.gif"> <IMG ALIGN=LEFT WIDTH=450 HEIGHT=70 SRC="Images/Cool.gif" ALT="My Cool Web Page"> <P><CENTER><FONT SIZE=5 COLOR=#0000FF FACE="Arial"><B> My First "Cool" Web Page, (and all my other text)</B></FONT></CENTER> </BODY> </HTML>The ALIGN=LEFT attribute causes the image to align left and all the text wraps to the right of the image. There are other attributes that cause text do strange things, but if you are creative you can use these to your advantage. ALIGN=RIGHT - causes the image to align to the right side of the page, and of the text goes left. ALIGN=MIDDLE - Causes text to align to the center of the image. Try all of these out and get comfortable with them. Try it several ways before you move on here. Next step, snatch this image! All you will see is it's border. I planned it that way. It's a "Transparent .gif" Image. Very useful for spacing and arranging the imagery and layout of your web pages. Again, Save it in your "Images" sub-folder as "Trans.gif". And snatch the one next to it as well. Save it as "CD.gif". Now insert that into your "My Cool Page" as follows: <HTML> <HEAD> <TITLE>My Cool Web Page</TITLE></HEAD> <BODY BACKGROUND="Images/blue.gif"> <CENTER><IMG WIDTH=450 HEIGHT=70 BORDER=0 SRC="Images/Cool.gif" ALT="My Cool Web Page"></CENTER> <P><HR SIZE=5> <P><CENTER><FONT SIZE=5 COLOR=#0000FF FACE="Arial"><B><P><IMG ALIGN=LEFT WIDTH=100 HEIGHT=98 BORDER=0 SRC="Images/CD.gif" ALT="CD.gif"> <IMG ALIGN=LEFT WIDTH=100 HEIGHT=98 BORDER=0 SRC="Images/Trans.gif" ALT="Transparent .gif"> <FONT SIZE=3 COLOR=#0000FF FACE="Arial"><B>My really Cool Web Page is full of all kinds of really cool stuff like Images, and lots of text with great information about what it is I feel like putting here! </B></FONT></BODY> </HTML>This considerably changes the appearance of the page by keeping the text from crunching up against the image. It keeps the text much more readable. It's valuble little trick to remember when you're creating your web pages. You can easily create your own ".gif" images with most any graphics software that you may already have on your system. Paint Shop Pro is a good one that's easy to work with at any level. Microsoft Image Composer is my favorite, but it's pretty advanced and may take you a while to figure out how to use it. ".jpg" are normally scanned photo images, though they don't have to be. The ".jpg" image file format is normally used for photos or photo quality needs and take up considerably more memory space and take longer to download into your browser for viewing. The only difference in the coding to use .jpg images is the format at the end of the Image's address. <IMG WIDTH=100 HEIGHT=200 BORDER=0 SRC="Images/MyPhoto.jpg"> Then there are animated .gif images. You need special animation software to create them but there are several great "shareware" programs out there and they are inexpensive, easy to find, and easy to use. Practice your use of Images and all the different aspects of it before you go to the next section. You can't get enough practice! Here are a few more pieces of Imagery to practice with, save them to your "Images" sub-folder. Notice the names of the image files and their sizes will appear as the "Alternate Text" when you roll your mouse over them. But you can name them whatever you want. *NOTE: If you are using an old Browser, like Netscape 3.0, you may not see some of these images because of the long file names. Netscape 3.0 for example will not display images with file names more than 8 charactors. Some of these file names are longer. (Comingsoon.gif), etc. I left them long to encourage you to get a newer Browser if you don't have one already.

Links

All that other stuff was pretty cool, but now we're getting to the Fun part! When you get done with this section you'll be able to put links, links, and more links! all over your web pages! That's right! Keyword being pages. Up until now you've been limited to the current page you were working on, but shortly you'll be completely unrestricted and have virtually unlimited access the world! There are two kinds of Links. the Anchor Link, and the Hypertext Link. We'll talk about Anchors first. An Anchor is a link to a different section within a page. Very useful on extremely long pages like this one. It saves you from going nutso scrolling up and down with your mouse or your arrow keys. The Anchor link has two parts. the Anchor itself, and the Link to the Anchor The spot you want the page to jump to when the link is clicked, that is the very Paragrah that should suddenly be on top of the Browser window when the link is clicked is the Anchor. In order to make it the Anchor you have to give it an Anchor Name.

<A NAME="MyAnchor"></A>- Desired place on the page here At the place on the page where the Link is to be placed that it will jump to the Anchor, (the destination). "<A NAME="MyAnchor"></A>", the code looks like this:<A HREF="#MyAnchor">MyAnchor</A>- Takes you to <A NAME="MyAnchor"></A>

It's really very simple.

Tables

I put the "Tables" section toward the end of this tutorial because they are rather complex to understand at first, they take longer to work with, but tables are the most versatile and useful of all these HTML tags. There are many tags and variable attributes that you can use within the "<TABLE>" & "</TABLE>" tags. But first, a quick run down of just the basics. (Inside a TABLE.

<TABLE> - Begins the Table

<TR> - Begins the first Table Row

<TD> - Begins the cell containing the Table Data

</TD> - Ends the cell containing the Table Data

</TR> - Ends the first Table Row

</TABLE> - Ends the Table

This exmple is the minimum requirements for your table to work. It shows a simple Table with one Table Row, and one Table Data cell that is presently empty.

Fire up that old text editor and create your first table page something like this:<HTML>
<HEAD>
<TITLE>My First Table Page</TITLE></HEAD> <BODY BGCOLOR=#000000>
<H1>My First Table Page</H1> <TABLE>
<TR>
<TD><FONT SIZE=3 COLOR=#FF0000 FACE="Arial">This is my text in a Table Data Cell</TD>
<TD><FONT SIZE=3 COLOR=#00FF00 FACE="Arial">This is my text in my second Table Data cell</TD>
</TR>
</TABLE> </BODY>
</HTML>

Other useful things to know about Tables:

You can change the background colors of individual cells
You can use background images instead of colors in each individual cell
You can specify the width and height of the entire table, or any cell in both # of pixels, or % of the screen size
You can use Tables to force or manipulate text wrapping around images
You can put Images in any table data cell
You can specify Table Headings, columns, rows, cellpadding, cellspacing, and more
You can use Tables to control how your pages looks at any screen resolution

Start with the standard document requirements, and include the "Table" Tags.<HTML>
<HEAD>
<TITLE>My First Table</TITLE></HEAD>
<BODY BGCOLOR=#00EEEE><TABLE> </TABLE></BODY>
</HTML>Now let's create some columns and rows inside the table.<HTML>
<HEAD>
<TITLE>My First Table</TITLE></HEAD>
<BODY BGCOLOR=#00EEEE> <TABLE><TR><TD>1-A</TD><TD>1-B</TD><TD>1-C</TD><TD>1-D</TD></TR> <TR><TD>2-A</TD><TD>2-B</TD><TD>2-C</TD><TD>2-D</TD></TR> <TR><TD>3-A</TD><TD>3-B</TD><TD>3-C</TD><TD>3-D</TD></TR> <TR><TD>4-A</TD><TD>4-B</TD><TD>4-C</TD><TD>4-D</TD></TR> </TABLE> </BODY>
</HTML>Notice when you view it that you see only the series of numbers and letters. Now add a "BORDER" to your table.

<HTML>
<HEAD>
<TITLE>My First Table</TITLE></HEAD>
<BODY BGCOLOR=#00EEEE> <TABLEBORDER="1"> <TR><TD>1-A</TD><TD>1-B</TD><TD>1-C</TD><TD>1-D</TD></TR> <TR><TD>2-A</TD><TD>2-B</TD><TD>2-C</TD><TD>2-D</TD></TR> <TR><TD>3-A</TD><TD>3-B</TD><TD>3-C</TD><TD>3-D</TD></TR> <TR><TD>4-A</TD><TD>4-B</TD><TD>4-C</TD><TD>4-D</TD></TR> </TABLE> </BODY>
</HTML>

View this and you'll see an entirely different effect. You can add Headings to each column by simply including this little snippet of code:

<HTML>
<HEAD>
<TITLE>My First Table</TITLE></HEAD>
<BODY BGCOLOR=#00EEEE> <TABLE BORDER="1"><TR><TH>A</TH><TH>B</TH><TH>C</TH><TH>D</TH></TR> <TR><TD>1-A</TD><TD>1-B</TD><TD>1-C</TD><TD>1-D</TD></TR> <TR><TD>2-A</TD><TD>2-B</TD><TD>2-C</TD><TD>2-D</TD></TR> <TR><TD>3-A</TD><TD>3-B</TD><TD>3-C</TD><TD>3-D</TD></TR> <TR><TD>4-A</TD><TD>4-B</TD><TD>4-C</TD><TD>4-D</TD></TR> </TABLE> </BODY>
</HTML>

OK, now you're beginning to cook with fire. Let's go in a little deeper now. You can further manipulate the appearance of your tables with a few more neat little options.
Add Spacing and Padding to your table data cells.

<HTML>
<HEAD>
<TITLE>My First Table</TITLE></HEAD>
<BODY BGCOLOR=#00EEEE> <TABLE BORDER="1" CELLSPACING="5" CELLPADDING="5" > <TR><TH>A</TH><TH>B</TH><TH>C</TH><TH>D</TH></TR> <TR><TD>1-A</TD><TD>1-B</TD><TD>1-C</TD><TD>1-D</TD></TR> <TR><TD>2-A</TD><TD>2-B</TD><TD>2-C</TD><TD>2-D</TD></TR> <TR><TD>3-A</TD><TD>3-B</TD><TD>3-C</TD><TD>3-D</TD></TR> <TR><TD>4-A</TD><TD>4-B</TD><TD>4-C</TD><TD>4-D</TD></TR> </TABLE> </BODY>
</HTML>

Now add a "CAPTION" to your table to cue in the world to what it's all about.

<HTML>
<HEAD>
<TITLE>My First Table</TITLE></HEAD>
<BODY BGCOLOR=#00EEEE> <TABLE BORDER="1" CELLSPACING="5" CELLPADDING="5"><CAPTION>My Table is Growing Fast</CAPTION><TR><TH>A</TH><TH>B</TH><TH>C</TH><TH>D</TH></TR> <TR><TD>1-A</TD><TD>1-B</TD><TD>1-C</TD><TD>1-D</TD></TR> <TR><TD>2-A</TD><TD>2-B</TD><TD>2-C</TD><TD>2-D</TD></TR> <TR><TD>3-A</TD><TD>3-B</TD><TD>3-C</TD><TD>3-D</TD></TR> <TR><TD>4-A</TD><TD>4-B</TD><TD>4-C</TD><TD>4-D</TD></TR> </TABLE> </BODY>
</HTML>

Now let's "center" the table and define it's width. You can easily define the width and height of your tables to manipulate the screen appearance like so:

<HTML>
<HEAD>
<TITLE>My First Table</TITLE></HEAD>
<BODY BGCOLOR=#00EEEE> <CENTER><TABLE BORDER="1" CELLSPACING="5" CELLPADDING="5" WIDTH="75%"> <CAPTION>My Table is Growing Fast</CAPTION> <TR><TH>A</TH><TH>B</TH><TH>C</TH><TH>D</TH></TR> <TR><TD>1-A</TD><TD>1-B</TD><TD>1-C</TD><TD>1-D</TD></TR> <TR><TD>2-A</TD><TD>2-B</TD><TD>2-C</TD><TD>2-D</TD></TR> <TR><TD>3-A</TD><TD>3-B</TD><TD>3-C</TD><TD>3-D</TD></TR> <TR><TD>4-A</TD><TD>4-B</TD><TD>4-C</TD><TD>4-D</TD></TR> </TABLE> </CENTER></BODY>
</HTML>

We be Smokin' Now! OK, now add some "Row Headings".

<HTML>
<HEAD>
<TITLE>My First Table</TITLE></HEAD>
<BODY BGCOLOR=#00EEEE> <CENTER> <TABLE BORDER="1" CELLSPACING="5" CELLPADDING="5" WIDTH="75%"> <CAPTION>My Table is Growing Fast</CAPTION> <TR><TH>A</TH><TH>B</TH><TH>C</TH><TH>D</TH></TR> <TH>Row # 1</TH><TR><TD>1-A</TD><TD>1-B</TD><TD>1-C</TD><TD>1-D</TD></TR> <TH>Row # 2</TH><TR><TD>2-A</TD><TD>2-B</TD><TD>2-C</TD><TD>2-D</TD></TR> <TH>Row # 3</TH><TR><TD>3-A</TD><TD>3-B</TD><TD>3-C</TD><TD>3-D</TD></TR> <TH>Row # 4</TH><TR><TD>4-A</TD><TD>4-B</TD><TD>4-C</TD><TD>4-D</TD></TR> </TABLE> </CENTER> </BODY>
</HTML>

View it. There are times when you may want to align the data in the headings or the table data cells to the left or right in order to accomplish certain desired effects. Let's align the row headings to the right just so you can see the example of how it works.

<HTML>
<HEAD>
<TITLE>My First Table</TITLE></HEAD>
<BODY BGCOLOR=#00EEEE> <CENTER> <TABLE BORDER="1" CELLSPACING="5" CELLPADDING="5" WIDTH="75%"> <CAPTION>My Table is Growing Fast</CAPTION> <TR><TH>A</TH><TH>B</TH><TH>C</TH><TH>D</TH></TR> <TH ALIGN="RIGHT">Row # 1</TH> <TR><TD>1-A</TD><TD>1-B</TD><TD>1-C</TD><TD>1-D</TD></TR> <TH ALIGN="RIGHT">Row # 2</TH> <TR><TD>2-A</TD><TD>2-B</TD><TD>2-C</TD><TD>2-D</TD></TR> <TH ALIGN="RIGHT">Row # 3</TH> <TR><TD>3-A</TD><TD>3-B</TD><TD>3-C</TD><TD>3-D</TD></TR> <TH ALIGN="RIGHT">Row # 4</TH> <TR><TD>4-A</TD><TD>4-B</TD><TD>4-C</TD><TD>4-D</TD></TR> </TABLE> </CENTER> </BODY>
</HTML>

You can use the ALIGN="LEFT", CENTER, or RIGHT to align any Row or Column Headings or the content of any Table Data Cell. Use them however you see fit. Use your imagination. You can also specify the width of each column by just adding the "WIDTH" attribute to the top cell of the column and the entire column will follow that lead. Width can be expressed in % or in # of pixels. For example, insert this code into your Column Headings on your fast growing table: <TR>
<TH WIDTH="20%" > A</TH> <TH WIDTH="20%" > B</TH>
<TH WIDTH="20%" > C</TH> <TH WIDTH="20%" > D</TH>
</TR>

Insert an Image into your table data cell like so:<TR><TD><IMG WIDTH=58 HEIGHT=34 BORDER=0 SRC="Images/Back.gif"></TD></TR><(B>It's just as simple and easy as that! You can also span rows or columns with any data cell, you need only use the "COLSPAN" or the "ROWSPAN" attributes in the <TD> tag. If you want your top row to span the width of the entire table simply tell it to. Add the following lines to your "Fast Growing Table" as the very first Table Row (<TR>). <TR><TD COLSPAN=5>Spanning the columns!</TD></TR> Use the "Rowspan attribute the same way to span as many of your table rows as you desire. Some other notes on TABLES: Change the background colors of each table row or each individual table data cell, column, or row. Although be aware that in older versions of both Netscape Navigator and Microsoft Internet Explorer, this will not work. <TR><TD BGCOLOR="red"><FONT COLOR="black">Text data in table data cell</FONT></TD></TR> Use the color codes, color names, declare the background color or image for each individual cell, by rows, by columns, however you want it! When it comes to versatility, you just cannot beat tables. And you cannot practice using them enough either. the more you use them, the more tricks you'll learn for newer ways to use them. You can use the "BORDER attribute to create a frame for the photo of your happy smiling face on your homepage! Now go practice!

Frames Frames are one of the coolest things you can do with your web pages, but beware! If you are planning on registering your site with the major Search Engines, your pages will not be indexed properly because of the fact that your information will be on at least 2 different pages. Frames is actually displaying more than one page at a time on the same screen. It can be 2 pages, it can be 10 pages. The use of Frames simply divides your browser's window into sections. You specify whether it is divided into rows, or colums, or both. The idea is that one frame controls what appears on the rest of the screen. For our purposes here we'll start out simple with a top Frame (Row) that controls what appears in the bottom of the screen.

Get out the old text editor again, grab a steaming hot cup of Java (We'll do java later), this may take a while. Step # 1: Create 3 separate pages that are simple, and fast, and save them in the same file folder called "Frames". Save the 3 pages as Alice.html, Carol.html, and Denise.html. They should simply look like this: <HTML>
<HEAD>
<TITLE>Alice</TITLE> (and Carol and Denise, respectively)
</HEAD>
<BODY BGCOLOR=#FFFFFF>
<H1>Alice</H1> (and Carol and Denise, respectively)
</BODY>
</HTML> You can put whatever text and content on these pages that you want, change the colors, that's up to you. Step # 2: Create a new page now called "Navigate.html" like so: <HTML>
<HEAD>
<TITLE>Navigate</TITLE>
</HEAD>
<BODY BGCOLOR=#FFFFFF>
<H1>My Frames</H1>
<P><FONT SIZE=3 COLOR='000000 FACE="Arial">My girlfriends (Use boyfriends if you prefer!)
<BR><A HREF="Alice.html" TARGET=Window>Alice</A>
<A HREF="Carol.html" TARGET=Window>Carol</A>
<A HREF="Denise.html" TARGET=Window>Denise</A>
</BODY>
</HTML> Step # 3: Create another page called "Window.html". Make sure that all 5 pages are in the same file folder called "Frames". Window.html should look like this: <HTML>
<HEAD>
<TITLE>Window</TITLE>
</HEAD>
<BODY BGCOLOR=#FFFFFF>
<H1>My Girlfriends!</H1>
</BODY>
</HTML> Step # 4: Create a brand new document and name it "Girlfriends.html". It should look like this and use the <FRAMESET> and </FRAMESET> tags. <HTML>
<HEAD>
<TITLE>Girlfriends</TITLE></HEAD> <FRAMESET ROWS="80,*"> - (specifies 80 pixels height and the " * "= the rest of the screen)     <FRAME SRC="Navigate.html" NAME="Navigate">      <FRAME SRC="Window.html" NAME="Window"> </FRAMESET> <BODY> </BODY>
</HTML>Step # 5: Got all that? Good! Now just open up "Girlfriends.html" in your browser and click to your heart's content. You've made your first Frames pages! You can also use a screen percentage to declare the height of the Top, Navigation frame. You could use for example, <FRAMESET COLS=15%, 85%> The * - asterix tells the browser "The rest of the screen" is to be used to display the other page in what's left of the window after the Navigation page's reserved space. You can also declare that the navigation frame be in Columns rather than rows, left or right on the screen. To build a Frames layout with the navigation frame on the left of the screen simply use this sytax: <HTML>
<HEAD>
<TITLE>Girlfriends</TITLE></HEAD> <FRAMESET COLS="100,*"> - (specifies 100 pixels width and the " * "= the rest of the screen)     <FRAME SRC="Navigate.html" NAME="Navigate">      <FRAME SRC="Window.html" NAME="Window"> </FRAMESET> <BODY> </BODY>
</HTML>Of course you can adjust the width in pixels or in percentages any way you see fit to get the right look and feel for your pages. A little bit of "tweeking" goes a long way. To divide up your screen even more, you can set up Frameset tags nested inside other Frameset tags. The following example shows how to set up a frames display that gives you the title frame on top, a navigation frame to the left, and the main display fram in the middle, lower-right. <HTML>
<HEAD>
<TITLE>Girlfriends</TITLE></HEAD> <FRAMESET ROWS="100,*">      <FRAME SRC="Navigate.html" NAME="Navigate"> <FRAMESET COLS="100,*">      <FRAME SRC="Alice.html" NAME="Alice">      <FRAME SRC="Window.html" NAME="Window"> </FRAMESET> </FRAMESET> <BODY> </BODY>
</HTML>You can also choose from a few more options to customize your frames layout by limiting or eliminating the viewers ability to scroll or resize the frames. To eliminate the "scrollbars" simply include the "SCROLLING=NO" attribute in the FRAME Tags. <FRAME SRC="BlahBlah.html" NAME="Blah" SCROLLING="NO"> To control the size and prevent a user from resizing your frames just include the NORESIZE attribute. <FRAME SRC="BlahBlah.html" NAME="Blah" SCROLLING="NO" RESIZE="NO"> Many older browsers do not support frames at all, so it's a good idea to always include the use of the <NOFRAMES> and the </NOFRAMES> tags. What these tags do is present at least a few readable lines to viewers who are still using browsers without frames capability. Use them like this: <HTML>
<HEAD>
<TITLE>Girlfriends</TITLE></HEAD> <FRAMESET ROWS="100,*">      <FRAME SRC="Navigate.html" NAME="Navigate"> <FRAMESET COLS="100,*">      <FRAME SRC="Alice.html" NAME="Alice">      <FRAME SRC="Window.html" NAME="Window"> </FRAMESET> </FRAMESET><NOFRAMES> <BODY BGCOLOR=#FFFFFF> Sorry, you are using a non-frames capable browser. You should get a real browser, they're all free now! </BODY>
</HTML>Frames provide a great degree of versatility for your web page design, but keep in mind that they'll not do you any good with Search Engines, and there is still a lot of people without frames capable browsers and many who simply keep their frames viewing switched off.

Forms

Make yourself a file folder called "Forms". You'll need it for this section. Forms require a minimum of this much code:<FORM>
</FORM>Forms can do two basic things, they can send data to a CGI Script (Common Gateway Interface) to process the information or they can have the data emailed directly to you. The most simple type of FORM is a "mailto:" form. Make yourself a brand new page and save it in your Forms file folder as "Form1.html". It should look like this:

Now we have to tell the browser what to do with this data the form collects, and where to send it. In a simple "mailto:" form we must include these attributes inside the <FORM> tag itself like so:

<HTML>
<HEAD>
<TITLE>My Form</TITLE></HEAD>
<BODY BGCOLOR=#FFFFFF> <FORM METHOD="POST" ACTION="mailto:You@youremail.address" > </FORM> </BODY>
</HTML>* Note that Microsoft Internet Explorer version 3.0 does not support mailto: forms, it does however support forms sent to a CGI Script. In this example all you have to do is stick your email address in after "mailto:", but the rest of the line must be entered exactly as shown for it to work.

Now add the following code to gather more information from your viewer: <HTML>
<HEAD>
<TITLE>My Form</TITLE></HEAD>
<BODY BGCOLOR=#FFFFFF> <FORM METHOD="POST" ACTION="mailto:You@youremail.address"><INPUT TYPE="hidden" NAME="form_name" VALUE="Form1"> <P>Enter your name: <BR><INPUT TYPE="text" NAME="name" SIZE="35"> <P>Enter your email address: <BR><INPUT TYPE="text" NAME="email" SIZE="35"> <P><INPUT TYPE="submit" VALUE="Send it now"></FORM> </BODY>
</HTML>

The <FORM> tag must contain the ACTION and the METHOD attributes in order to function. The ACTION attribute for example can be used to define the link to, or the destination / location of the CGI Server handling the actual form processing. While the METHOD Attribute can be used to declare that the method is "GET" or "POST". It would always be METHOD="POST" for email method. In the examples above, the
<INPUT TYPE="text" - indicates that it is a text type of input
NAME="email" - names that particular input line so that you know what it is when the email comes to you
SIZE="35"> - Declares that the text input line will be 35 columns, or charactors in length.
The Submit Button - sends the information to wherever you directed ot to. You can make your text input lines as long or as short as you want to suit your needs for the type of information you are asking for. You can also limit the actual size of the text input box, but extend the possible number of charactors your visitors can input with the use of the MAXLENGTH attribute like so: <INPUT TYPE="text" NAME="MyInput" SIZE="40" MAXLENGTH="75">

You can also assign a value that it will start with. <INPUT TYPE="text" NAME="MyInput" SIZE="40" MAXLENGTH="75" VALUE="My Input Starts Hree:">

Other types of forms input are the CHECKBOX and the RADIO BUTTON.

Radio Button Check Box

We'll try the Radio Buttons first. Text Editor time again! <HTML>
<HEAD>
<TITLE>My Form</TITLE></HEAD>
<BODY BGCOLOR=#FFFFFF> <FORM METHOD="POST" ACTION="mailto:You@youremail.address"><P>Pick you favorite Blues Artist: <BR><INPUT TYPE="RADIO" NAME="BluesArtist" VALUE="Stevie Ray Vaughn">Stevie Ray Vaughn <BR><INPUT TYPE="RADIO" NAME="BluesArtist" VALUE="Johnny Lang">Johnny Lang <BR><INPUT TYPE="RADIO" NAME="BluesArtist" VALUE="B.B. King">B.B. King <P><INPUT TYPE="SUBMIT" VALUE="Choose Now"></FORM> </BODY>
</HTML>Now see the slight differences when using CHECKBOX input. <HTML>
<HEAD>
<TITLE>My Form</TITLE></HEAD>
<BODY BGCOLOR=#FFFFFF> <FORM METHOD="POST" ACTION="mailto:You@youremail.address
ENCTYPE="application/x-www-form-urlencoded"><P>Pick the Blues Artists that you like: <BR><INPUT TYPE="CHECKBOX" NAME="Stevie Ray Vaughn" VALUE="yes">Stevie Ray Vaughn <BR><INPUT TYPE="RADIO" NAME="Johnny Lang" VALUE="yes">Johnny Lang <BR><INPUT TYPE="RADIO" NAME="B.B. King" VALUE="yes">B.B. King <P><INPUT TYPE="SUBMIT" VALUE="Choose Now"></FORM> </BODY>
</HTML>In the two examples shown here, the differences are that for the CHECKBOX input type, the NAME changes and the VALUE stays the same. In the RADIO BUTTON input type, the VALUE can change, but the NAME stays the same. If your visitor checks the RADIO BUTTON for B.B. King in the example above, it would return to you like this: BluesArtist=B.B. King In the CHECKBOX example it would return whatever number they selected, if all were selected your return message would be something like this: Stevie Ray Vaughn=yes
Johnny Lang=yes
B.B. King=yes

Another type of forms input is the TEXTAREA. This lets your users input just about anything, even their entire life story if you want. By using these tags you can create a box where clients can input a paragraph or two of info to you.
The tags are <TEXTAREA> and </TEXTAREA>

Example:<HTML>
<HEAD>
<TITLE>My Form</TITLE></HEAD>
<BODY BGCOLOR=#FFFFFF> <FORM><P>Tell me your comments: <BR><TEXTAREA NAME="comments" ROWS="10" COLS="30"> </TEXTAREA></FORM> </BODY>
</HTML>This creates a TEXTAREA input box that is 10 ROWS in height and 30 COLUMNS in width. You can make them as large or as small as needed for your specific purpose by changing the ROWS= and the COLS= attributes. You can also go one step further and define how the typed input text will wrap within the box by using the WRAP=PHYSICAL or the WRAP=VIRTUAL attributes within the <TEXTAREA> tag. The WRAP=PHYSICAL attribute means that the text inside the input box will wrap, and will also be sent that way. Whereas the WRAP=VIRTUAL attribute means that the text in the box will wrap in appearance but will be sent in one long continuous string. In the <TEXTAREA> tag the WRAP attribute looks like this:<TEXTAREA NAME="comments" ROWS="10" COLS="30" WRAP=PHYSICAL>,..... or<TEXTAREA NAME="comments" ROWS="10" COLS="30" WRAP=VIRTUAL>Use your imagination with all this great stuff and there are no limits to what you can do with it.

Another useful type of forms input is called the Pull Down List. Only instead of using the INPUT TYPE tag we use the <SELECT> and the </SELECT> tags.

What is your favorite ice cream flavor?

<FORM> <SELECT NAME="Favorite Ice Cream"> </SELECT> </FORM>Add some options to select from: <FORM> <SELECT NAME="Favorite Ice Cream"><OPTION VALUE="Rocky Road">Rocky Road <OPTION VALUE="Chocolate Marshmellow">Chocolate Marshmellow <OPTION VALUE="Chocolate Chip">Chocolate Chip <OPTION VALUE="Amaretto">Amaretto </SELECT> </FORM>You can select the initial choice to be displayed in the Pull Down List by simply inserting the SELECTED attribute into the OPTION LINE of the item of your choice, and by default it will show in the option window area when your web page loads. <FORM> <SELECT NAME="Favorite Ice Cream"><OPTION VALUE="Rocky Road"> <OPTION VALUE="Chocolate Marshmellow" SELECTED> <OPTION VALUE="Chocolate Chip"> <OPTION VALUE="Amaretto"></SELECT> </FORM>We can also turn this into a SCROLLING LIST by simply adding the SIZE attribute to the <SELECT> tag. But along with that add several more options to your list. <FORM> <SELECT NAME="Favorite Ice Cream" SIZE=4> <OPTION VALUE="Rocky Road"> <OPTION VALUE="Chocolate Marshmellow" SELECTED> <OPTION VALUE="Vanilla Nut Crunch"> <OPTION VALUE="Strawberry Delite"> <OPTION VALUE="Peach Swirl"> <OPTION VALUE="Mint Pecan"> <OPTION VALUE="Heavenly Hazelnut"><OPTION VALUE="Chocolate Chip"> <OPTION VALUE="Amaretto"></SELECT> </FORM>And last but not least one simple one that I seem to have left out is the RESET button. Usually used with the SUBMIT button as a way for your visitors to clear the form and start all over again. When used with the SCROLLING LIST above it should look like this: <FORM> <SELECT NAME="Favorite Ice Cream" SIZE=4> <OPTION VALUE="Rocky Road"> <OPTION VALUE="Chocolate Marshmellow"SELECTED> <OPTION VALUE="Vanilla Nut Crunch"> <OPTION VALUE="Strawberry Delite"> <OPTION VALUE="Peach Swirl"> <OPTION VALUE="Mint Pecan"> <OPTION VALUE="Heavenly Hazelnut" <OPTION VALUE="Chocolate Chip"> <OPTION VALUE="Amaretto"><P>Submit it now <BR><INPUT TYPE="SUBMIT" VALUE="Submit it now"> <P>Clear the form and start all over <BR><INPUT TYPE="RESET" VALUE="Clear the form"></SELECT> </FORM>Your options select for a pull down list or a scrolling list can be as long as you want, and is better than separate text input lines when there is many things to choose from as it will save a great deal of space on your web page. Again a little creativity goes a long, long way. Now, go practice all of these input types and then go build your web forms with confidence!