HTML Tutorial !

First project under B,O,V, ”Beyond Our Vision”
Wednesday, May 24, 2006

This tutorial is written by Saima Yousaf and few very good friends of mine. They helped me with this document and fixed my English errors too. I would really like to mention their names. They are: Adrijana from Mesidonia, Cy from USA, Jacki from USA, Doreen and her husband from Canada. I would like to say "Thanks" to Mighty Allah, and all of my family/friends who prayed for me and encouraged me in every way.

HTML Tutorial

In this tutorial you will get a basic understanding of HTML "Hypertext Markup Language".

I am sure that if you learn these commands you will be able to build your own homepage all by yourself.

All you have to do is just go and start learning step by step. Later on you can enhance your skills with more practice. If you wonder what purposes a website can serve, then I have some very simple answers for you. Are you thinking to start your own business? Want to share your views and thoughts or stuff that interests you? Do you want to share these with your friends or even globally? You can do all thiese things. Just start building your own website and fill that site with whatever stuff you want to share with others.

So let's start learning HTML.

Contents

Chapter 1: Introduction
Chapter 2: Basic structure
Chapter 3: Headings
Chapter 4: Horizontal Ruled Lines
Chapter 5: Paragraphs
Chapter 6: Common text formatting tags
Chapter 7: Font size
Chapter 8: ALIGN attributes
Chapter 9: Line breaks
Chapter 10: Lists
Chapter 11: EXTENDED FONTS
Chapter 12: Links
Chapter 13: Sending email through the website
Chapter 14: Address Footer
Chapter 15: Graphics
Chapter 16: Selecting colors for backgrounds and fonts
Chapter 17: Clean Codes
Chapter 18: Div Tag
Chapter 19: Tables
Chapter 20: Embedding a sound file
Chapter 21: Meta Tags
Chapter 22: FTP Explorer
Chapter 23: Adding Counters & Adding Guestbooks
Chapter 24: Useful Tips
Chapter 25: Color Codes


CHAPTER 1

Introduction:

HTML:
What is HTML? HTML stands for Hypertext Markup Language, or simply put, it's a format that tells the computer how to display your website.

Web sites and Web pages are written in HTML code or tags. With HTML code you have the ability to bring together a lot of elements all in one place. For instance, text, pictures, sounds, and links. The HTML document is a plane text document, with special tags and coding, that you can create for your website.

BROWSERS:
These are programs that interpret html tags and display the results on a display screen. For instance, when you click or hit "enter" on any link in your browser, then "Internet Explorer" or what ever other browser you are using, will interpret the HTML coding and then display the results onto your screen.

TEXT EDITOR:
Any program in which we can write plain text. These include programs like "Notepad" etc., that can save our files to ASCII standard text or in other words, in plane text.

URL:
"Uniform Resource Locator" It can be the address of your website, links to images, graphics, email addresses, sounds files, or downloads. If someone asks, "What is the URL of your website?", then you will give him your website address or URL.

For instance, in my case it is:
www.beyondourvision.com
Many times you may have seen that there are links to different images. It may read, "click here if like to see my picture". This is a link. Or you may read, "Download my favorite music". That is a link as well. All of these links are URL's.

GETTING A HOST:

You must get a host if you want others to be able to see your website. For instance, if you want to build your own home and you have all of the material but you don't have any land to build it on, then others can not visit your home. It must be located on some land. Web hosting is kind of like this. You must get an account where you can upload all of your material so others can visit your website. There are a few web hosting companies where you don't have to pay anything and can get an account for free.

DOMAIN:

Domain is just like your home address given by you.
For instance, in your website you like to write down some stories, so you may want to give your website this domain.
www.AwesomeStories.com

TAGS:

When you place a certain thing within pointed brackets ("<" and ">"), you are making something known as an HTML tag. For example the <b> tag is saying to start bold text, while the </b> tag is saying to stop bold text. All tags that start with a slash ("/") are known as closing tags. Many opening tags require a following closing tag, but not all do. Tags make up the entire structure of an HTML document. For example:

<b>This Text is in Bold</b>
This Text is in Bold

In this example, we put "/" before the "b" and then the ">" sign to close this tag. In other words, we can say tags tell a web browser how to display the HTML codes contained within the website.

CHAPTER 2

Basic Structure:

HTML documents are based on 4 parts. Many people write their HTML tags mostly in Notepad. I prefer you to use Notepad and not to try using Frontpage or other HTML editors. If you want to be a good web designer, you must get a proper hold of your own errors and find a way to fix them. Using Notepad is the best way to learn this process. Four elements form the basic structure of HTML. I will explain them one by one.

<Html>
<head>
<title>
<body>

Explanation.

1. <html>
Write html tags at the top of Notepad because we all know we are writing HTML here. But we must tell our machine that we are working in an HTML atmosphere. To do this, we have to write this tag first.

2. <head>
We then come to <head>. Since we are learning the basics of HTML here, I won't go deeper here. The only thing I would like to add is that in this section we write things which no one can see while they are visiting your website. All of the information we write here is for the server. For instance, as we put our title tag into the <head>. It will not appear on the display screen but it will appear in that title bar.

3. <title>
In this section we have to write down a title of our own choice which we would like to give to our website. For instance, my website title is
<title>beyond our vision</title>
Anything that you think will describe your website can be written down here. The text we write here will display in the title bar of the browser window. I therefore suggest you to keep your title short.

4. <body>
This is the largest part of your html document. Here you put all of the things that you want others to see when they visit your website. Others can view whatever you write down here. For instance. graphics, stories, music files, and stuff of your interest can be placed here.

LET'S GET STARTED:

First, I would like you to create a new folder and name that folder "HTML". Now put the entire file that you are going to work on right now into that folder. Ok, now I want you to open your Notepad and write your very first HTML page. Start typing,

<html>
<head>
<title> it's my first try </title>
</head>
<body>
My name is Sams and I am trying to teach myself the basics of html.
</body>
</html>

Ok. Now I want you to save this file in your HTML folder. Next open that file again and save it with the HTML filename extension. For example, you can give this file the name "learn.html" and save it in the same folder. Hurray, now your first page is ready. Just open up your learn.html extension file in your web browser. You will see that all the tags are gone but the line you wrote in <body> is going to be there. That is how it works.

CHAPTER 3

You can give different headings to different section of your page. Headings are some of the most important tags within the body of your HTML document. You will usually use a heading to tell what the following section of your page is about. There are six levels of headings, from heading 1 through heading 6.

<h1></h1> This is for largest heading.
<h6></h6>This is for smallest heading.

Example:

Try typing.

<html>
<head>
<title> I am trying headings </title>
</head>
<body>
<h1> heading one.</h1>
<h2> heading two.</h2>
<h3> heading three.</h3>
<h4> heading four.</h4>
<h5> heading five.</h5>
<h6> heading six.</h6>
</body>
</html>

Now you can save this page with heading.html extension and then open up that html file and see how things are there, be sure to check that the starting tag and ending tags have the same heading level. Remember headings have nothing to do with headers


CHAPTER 4

Horizontal Ruled Lines:

Horizontal Ruled Lines are used to separate different areas of a web page, or in other words this insert a straight line. The tag for a horizontal ruled line is <hr>. The horizontal ruled line does not have a closing tag. You may also add certain attributes to the <hr>tag, such as different sizes and widths. Example of horizontal ruled lines is:

<hr width="50%">
<hr noshade>
<hr size="7">

Which will look like this:




By increasing the size we can increase the thickness of the line, and increasing the number of width can shrink or expand the horizontal line in the page. We may also use several attributes within one tag.

<hr width="50%" size="10" noshade>


CHAPTER 5

Paragraphs:

You will often use paragraphs in HTML, just as you do when you write stories. The opening tag for a paragraph is <p> and the closing is </p>. The closing tag for a paragraph is not always necessary but I recommend using it anyway. It will help you out when you want to learn XHTML. Now we are going to use the paragraph tag.

For example:

<html>
<head>
<title> I am trying paragraph tags </title>
</head>
<body>
Ok, this time I am going to try a paragraph tag which will insert a blank line.
<p>
That is how it works. I think html is not that hard to learn. It's fun to learn html.
</p>
</body>
</html>

Which will look like this:
Ok, this time I am going to try a paragraph tag which will insert a blank line.

That is how it works. I think html is not that hard to learn. It's fun to learn html.

Ok. You can save this file with the name of "paragraph.html". When you look at it in your browser, you will get a better idea about how the paragraph tag works. You will find a blank line before each new paragraph.

CHAPTER 6

Common text formatting tags:

You can make your website more attractive if you use text attribute formats. This will help ensure that your website will not look dull and boring. HTML can tell a web browser to display certain portions of text in Italic or bold styles, or even in a combination of styles. The four most commonly used styles are very simple:

Boldface:
Everything between <B> and </B> is boldfaced.

Italics:
Everything between <I> and </I> is italicized.

Underline:
Everything between <U> and </U> is underlined. I recommend not to use the underline tag because links are always underlined, and your text and links can become very mixed up. Your website visitors will get confused between text and links.

Now try this:

<html>
<head>
<title>Trying text formatting.</title>
</head>
<body>
<b>This is in bold format </b>

And we can combine 2 tags in this case.
<i><b>This is Bold AND Italic</b></i>

Another example,

<i>My</i>
<b>name </b>
<tt>is</tt>
<u>Saima</u>
</body>
</html>

Now you can save this file with the name of "fonts.html" into the HTML folder you have created. Let me describe here how these sentences will appear in your HTML page:

My name is Saima

The first word "My" is italicized, "name" is in bold, "is" in typewriter format and "Saima" is underlined.

CHAPTER 7

Font size:

You can change the font size if you want to put something in a larger font to emphasize part of your website. Or you can change only one sentence by simply enlarging the font size. For instance, write down, "I am from Pakistan." Then try different font sizes. For this you must open your previous Notepad file that we were working on and type the font size tag in the body.

First Example:

<font size="+1">I am from Pakistan</font>

Will look like:

I am from Pakistan

You may find it difficult the first time but after a few attempts you will find it easier. I am going to put this same sentence into different font sizes.

<font size="+1">I</font>
<font size="+2">am</font>
<font size="+3">from</font>
<font size="+4">Pakistan</font>

Use a minus sign ("-") if you want to decrease the size of the font.

<font size="-1">It's a small font size</font>

Will look like:

It's a small font size

You can save this file into your html folder with the name of "fontsize.html" and then you can check out your work.

CHAPTER 8

ALIGN attributes:

This attribute is used to align something from the left margin, from the center, or from the right margin. The align attribute is placed in the opening tag, before the start of any paragraph or any sentence. For example, if you want to start your heading from the left side of your page then try this:

<h1 align="center"> Oh this time I am writing in the center</h1>

<h1 align="right">This time it is aligned to the right</h1>

Ok, now I would like you to open Notepad and start writing this:

<html>
<head>
<title>Align attributes</title>
</head>
<body>
<h1 align="center">My Poems</h1>
<p align="left">
What ever I am going to write here it will start from the left side.
</p>
<h2 align="right">I am learning fast!</h2>
</body>
</html>

Will look like this:

My Poems

What ever I am going to write here it will start from the left side.

I am learning fast!

You can save this file with the name of "align.html" and then you can open it in your web browser to check out your work.

Chapter 9

Line breaks:

If you want to have the text BREAK (go to another line), then you use the <br> tag. This tag has no closing tag. For example:

My name is Sams.<br>

Now, whatever you write next is going to be in the beginning of the next line. If you want to add more than one line, then you have to write down <br> several times. For example, if you want to insert three lines it would be:

<br><br><br>

Now you can try your own skills. Write down:

<html>
<head>
<title>Line breaks</title>
</head>
<body>
<h1 align="right">Body goes here.</h1>
<hr>
<h3 align=center>Headings are cool!</h3>
<p><b>Bold text is fun!</b></p>
<br>
<br>
<u>Underline is cool too!</u>
<br>
I am trying to learn HTML.<br>
<br>
<br>
Ok that is the example, how to insert line breaks in your page.<br>
</body>
</html>

Which would look like this:

Body goes here.


Headings are cool!

Bold text is fun!



Underline is cool too!
I am trying to learn HTML.


Ok that is the example, how to insert line breaks in your page.

You can save this file with the name of "linebreaks.html" and put it in your same folder named HTML as before. It's good to review your skills.

CHAPTER 10

LIST:

Lists are easy to format in Html and handy for creating different types of things, such as an index, a table of contents, chapters, etc.

There are three types of lists.

Unordered list OR Bullet list
Ordered List OR Number list
Definition list

The first two are very similar, while definition lists have a different setup and structure.

1. The Unordered list or Bullet list.

Bullets are generally a small black circle. If you want to insert a bullet before each item of your list, then you must use these HTML tags: <ul> and the closing tag is </ul>. Within these tags, another tag, <li>, begins each list item. You can also use the closing tag </li>, although it is not necessary. I recommend using the closing </li> tags as I have done in this example:

<ul>
<li>Pakistan</li>
<li>Japan</li>
<li>England</li>
<li>America</li>
<li>Canada</li>
<li>Saudia</li>
</ul>

Which would look like:

  • Pakistan
  • Japan
  • England
  • America
  • Canada
  • Saudia

2. The ORDERED LIST:

The Ordered List, also known as the Numbered List, is similar in structure to the unordered list, except that each list item has a number in front of it, instead of a bullet. Also, the opening tag for the list is <ol> instead of <ul>, and the closing tag is </ol> Within the list we still use the same tags. Notice the number before each list item. Now here is the HTML code.

<ol>
<li>Pakistan</li>
<li>Japan</li>
<li>England</li>
<li>America</li>
<li>Canada</li>
<li>Saudia</li>
</ol>

Which would look like:

  1. Pakistan
  2. Japan
  3. England
  4. America
  5. Canada
  6. Saudia

3. The Definition List:

This type of list is a little bit complicated but still very easy to use. This list starts with the <dl> opening tag, and ends with the </dl> closing tag. This list has two other tags known as <dt> for "definition term" and <dd> for "definition definition". These two tags do not need closing tags. Don't get confused. When you practice more with these tags, you would find it is simple and easy'

Example of a definition list. Here is the HTML code for this Definition List:

<dl>
<dt>Jaws
<dd> A screen reader, by which a blind person can run the computer.
<dt>Html
<dd>HTML stands for hyper text markup language.
<dt>Tom Cruze
<dd>A famous film actor.
</dl>

Which would look like:

Jaws
A screen reader, by which a blind person can run the computer.
Html
HTML stands for hyper text markup language.
Tom Cruze
A famous film actor.

Now, open Notepad and write down, the following:

<html>
<head>
<title>Definitions</title>
</head>
<body>
<ul>
<li>Pakistan</li>
<li>Japan</li>
<li>England</li>
</ul>

Here is another type of list.

<ol>
<li>Pakistan</li>
<li>Japan</li>
<li>England</li>
</ol>

And here is one more.

<dl>
<dt>Jaws
<dd> A screen reader, by which a blind person can run a computer.
</dl>
</body>
</html>

Ok. Save this file with the name of "definition.html" in the HTML folder. You can check out your work now by opening this file in your web browser.


CHAPTER 11

EXTENDED FONTS:

If you like to use different font styles instead of Italicized or Boldface for making your text, you can do so. You can use other fonts like Verdana, Arial, and many more. And you can get them by using this tag:

FACE="font_name" is the attribute that is used with the <FONT> tag.

The most commonly used fonts are Verdana, Arial, Helvetica, Impact, Comic Sans MS, and a few others. For this to work correctly, the font that you specify must be installed on the computer that is used to view your web page. If it is not, a default font will be used instead of the one you have specified.

Example of Extended Fonts

Start typing:

<html>
<head>
<title>Font styles</title>
</head>
<body>
<font size="+2" face="Verdana">Verdana</font>
<br>
<font size="+2" face="Arial">Arial</font>
<br>
<font size="+2" face="Helvetica">Helvetica</font>
<br>
<font size="+2" face="Impact">Impact</font>
<br>
<font size="+2" face="Comic Sans MS">Comic Sans MS</font>
<br>
</body>
</html>

Which should look like this:

Verdana
Arial
Helvetica
Impact
Comic Sans MS

You can save that file with the name of "style.html" in the HTML folder and you can check out your work with your web browser. So this is how you can pick out the font you want to use for writing your website.

Note: If you don't see one or more of the above then it means your browser probably does not support the extended fonts because that font(s) is not installed on your computer.

Chapter 12

Links:

Without links, your website would seem somewhat incomplete. It's easy to add them with HTML tags. To add a link you will use tags like in this example:

If you would like to put my homepage link into your homepage, use:
<a href="http://www.glowinginspiration.com">Visit glowinginspiration.com</a>

"<a href=" is opening portion of the tag and "</a>" is the closing tag. Whatever appears between these two tags will become underlined and colored in most cases. If you click on the text, it will send the browser to the location specified within the quotes. Let me give you little more description so you don't get confused. The first part of tag starts from "<a" and that indicates its anchor. "HREF" stands for "Hypertext Reference," which is another way of saying "the location of the file I want to load". Most anchors are in the form of '<a href="url">' where url is the location of the resource to which you want the link to point. http stands for "HyperText Transfer Protocol," which is a technical way of describing how computers move Web data back and forth.

In other words, if we want to put the yahoo website address in our homepage, then it is going to be done like this:


<a href="http://www.yahoo.com">Go to Yahoo</a>

Which will look like this:
Go to Yahoo

As I mentioned earlier, href is giving the idea of location, http is telling what data to retrieve and then the domain, www.yahoo.com, tells where to go. Whatever you write after the domain will appear as text on your homepage. Let me give you another example. Suppose you want to embed my homepage link into your homepage. It would be done like this:

<a href="http://www.beyondourvision.com">beyondourvision.com</a>

So in your page it will appear like:
glowinginspiration.com

Now we come to another way of linking the pages. For instance, perhaps you have a website and there is another HTML page where you write about your life and you would like people to visit that page also. In that case, the tags linking your visitors to that page are going to be like this example:

<a href="life.html">My Life</a>

Which will look like:
My Life

When others click on the text "My life", they will land on that particular page where you have written about your life.

If you want to open up the link in another window then you have to use these tags like this example:

<a href=http://www.beyondourvision.com/ target="_blank">glowinginspiration.com</a>

Which will look like this:
beyondourvision.com

In this case, your website will remain open, and there is going to be a new window appear which will contain my homepage. But do not use this tag unless it is necessary, because its quiet annoying if viewers who click each link on your homepage have another browser window open for each click.

CHAPTER 13

Sending email through the website:

I think it's a wonderful idea to put your email address in your website. Your friends can send you an email while visiting your website to let you know that you did a great job. Others can give you comments or they may want to ask for some pertinent information. If so, they can send you an email right from your website. If you want others to be able to send you an email, then you can do so by using these tags:

<a href="mailto: sams@hotmail.com">send me an email</a>

Which would look like this:
send me an email

When people click or press "Enter" on that particular link, and if they are using an email client like "outlook express" or "eudorea", they will automatically get an open message where they can send you an email. You can also add the subject line and even insert a line in the body of the email. Let me give you a little example here.

<a href="mailto:sams@hotmail.com?subject=Hi">Send email to author</a>

Which would look like this:
Send email to author

If you want to send email more to more than one address, then you can try these tags:
<a href="mailto:sams@hotmail.com,tom@hotmail.com?subject=Hi>Send an e-mail to Sam and Tom</a>

Which would look like this:
Send an e-mail to Sam and Tom

For instance, if you want to send a carbon copy of this email to another person as well as the direct recipients, then the tags would look like this:
<a href="mailto:
sams@hotmail.com,
tom@hotmail.com
?cc=jacki@hotmail.com &subject=Hi">
Send email to Sams, Tom, CC to Jacki</a>

Which would look like this:
Send email to Sams, Tom, CC to Jacki

Suppose you want to insert something into the body part, then you have to add those tags as well:

<a href="mailto:
sams@hotmail.com,
tom@hotmail.com
?cc=jacki@hotmail.com
&subject=Hi
&body=Hi there, I think I deserve a dinner at your place."> Send email to Sams, Tom, CC to Jacki</a>

Which would look like this:
Send email to Sams, Tom, CC to Jacki

You can try these tags and check out your work.

CHAPTER 14

Address Footer:

It's a good idea to keep your footer brief and informative. It is at the bottom of the page and gives some idea to the visitor concerning what the author and website are all about. It can also provide the information about when this page was created and when it was last updated. You can also put the title of the webpage there, your email address, and the URL as well. The URL is helpful if someone is going to print the page. He will get some brief information about the website, as well as the author. The tags used for this particular information are <address>and </address>. Let's write something using these tags.

<address>
<b>Beyond Our Vision</b>
<br>
Last updated Fifth July 2005
<br>
Web page by Saima Yousaf
<br>
Email address:
<br>
saimayousaf@myrealbox.com
<br>
The url is:
<br>
www.beyondourvision.com
</address>

Which will look like:<

Beyond Our Vision
Last updated Fifth July 2005
Web page by Saima Yousaf
Email address:
saimayousaf@myrealbox.com
The url is:
www.beyondourvision.com

It's a very good idea to add this tag at the end of the website so people will have more information; especially if they show a printout of your website to their friends.

CHAPTER 15

IMAGES OR GRAPHICS:

Graphics are used as often as hyperlinks but before using graphics you should know which format you must pick. For my graphics, I like to provide the format and another useful attribute. I do this for people who use text browsers or screen readers. Otherwise, these people are not able to recognize that a graphic is loading. But do not use a lot of graphics because graphics take time to load. This is especially annoying for people who use slow speed, dial-up connections. Here is some additional description to make it clearer.

1. Format:
There are several formats in which you can save your image file. These include: gif, jpg, tif, bmp, etc. I prefer the gif format.

2. Gif:
The standard format that can be displayed within a webpage is a gif graphic. The gif compresses the picture information (reduces the file size) and translates into binary code that can be sent over the internet. Gif compression is the most effective lossless compression for graphics.

Suggestion:
Keep the total file size of all images on your web less that 100K. Keep graphic or images no wider than 200 pixels.


3. External images:
Rather than displaying all of the images on your web page, consider have them linked to external images that are downloaded only when viewers click on a hypertext item.

4. IMG:
Images are placed in Web documents using the IMG tag. This tag is empty and therefore has no closing tag. The basic form of the image tag is "<img" but just like <a>, <img> by itself is pointless. It will do nothing. You need to let the browser know where to find the image that it's supposed to place in the document

5. SRC
In order to make the IMG tag work, you need to use an attribute. Src stand for "source", as in, "the source of this graphic". Thus, a typical image tag will take the form:
<IMG SRC="URL of graphic">

URLs to refer to the graphic file.
Images can be placed almost anywhere within the body of the document. They can be between paragraphs, within paragraphs, in list items or definition lists; even within headings. Placing images within links is also possible. To do so, merely place the img tag within the anchor. For example:

<a href="http://www.beyondourvision.com">
<img src=bear.gif"></A>

As you can see, if you include text within the anchor container, then it will be a part of the anchor along with the image. Let's write some text as well,

<a href="http://www.beyondourvision.com>
<img src=bear.gif"> Press enter on bear</a>

ALT:
The ALT attribute is used to define "alternate text" for an image. Alt improves the display and usefulness of your document for people who are stuck with text-only browsers, such as lynx, or who have the image loading feature turned off. Since these users cannot see graphics, the browser will substitute a marker such as "image" for any image tag. This is, in effect, a placeholder, but a frustrating, one, since there is no way for the user to tell what the image is, or what it says, or what its purpose is. However, if an alt tag has been defined, the browser will display that text instead of the placeholder. This makes the display a lot nicer and more useful for users who can't see the graphics. It does not effect Users who can see the graphics. A common trick to make the image placeholder disappear in text-only browsers it is to set the alt text to be a single space:

<IMG SRC="bear.gif" ALT=" ">

Align:

As was pointed out in Example 1, a lot of vertical space can be wasted when graphics are integrated into paragraph. This is because ordinary HTML 2.0 does not support anything which allows for multiple lines of text flowing pass a graphic. However, the text can be shifted within the vertical space which is created by the graphic. In addition, by having the text line with up with the bottom of the graphic, you can align it to either the top or the middle of the graphic. This is accomplished using the align attribute, as in the following example:

<IMG SRC="bear.gif" ALIGN="top">

This will cause the top of any text on the same line as that graphic to be aligned with the top of the graphic. There's also an align middle option which aligns the baseline with the middle of the graphic. And of course align="bottom", which is the default display strategy for most browsers. If your image is in the same directory as your HTML file, just use the image file name and not the full path name. For example, if your file name is welcome.jpg, you can use

<img src="welcome.jpg">

If you want to put a background image on your page, then you have to do as follows. For example, if you have kitten.jpg in the same directory as your HTML file, to this:

<body background="kitten.jpg">

This will load it as your page background image.

Aligning Images with Text:
You may have noticed by now that if you load an image without any alignment, it will take up almost all of the room and only allow you to have one line of text next to it. If you are confused, here's an example:

<img src="cat.jpg">Here is an image<br>

Isn't it cool?

If you want to be able to have the text start at the Top, next to the image, you must use the align attribute.

Example:

<img src="cat.jpg" align="left">Here is an image<br>

Isn't it cool?

Horizontal rule:
If you want the horizontal rule to fall below the Image, you can add the <br clear="all"> tag between the images.

For example:

<img src="cat.gif" align="left">this is a big image.
<br clear="all"><hr>

This is also useful in other instances; such as when you want the text to fall bellow the image.

CHAPTER 16

Selecting colors for background and fonts.


You can add different colors for your backgrounds, for links for visited links and the text colors as well. But make sure to pick a good combination so that your color contrast always looks good and easy to read. You can write down colors by name, like red, black etc. But it always better to write down their x values instead of their names. This is how it works.

<BODY BGCOLOR="#000000" TEXT="#FFFFCC" LINK="#33CCFF" VLINK="#FF6666">

This will provide a black background, pale yellow text, light aqua blue for unvisited hypertext links, and red for visited hypertext links. Try typing this:

<html>
<head>
<title>Title goes here</title>
</head>
<body bgcolor="#FFFFFF" link="#FF0000" vlink="#00FF00">
<body>
<h1 align=right>Body goes here</h1>
<a href="http://www.beyondourvision.com">
Go to Beyond Our Vision</a>
That is what it looks like.
</body>
</html>

You can now save your work with the name of "background.html" and keep it into your HTML folder to check your work.

Text Color:
You can change the color of the text by setting the
COLOR="font_color" attribute in the <FONT> tag. The color is usually set by using the hexadecimal system, (#000000 black to #FFFFFF white)
But you can also set the color for newer browsers by using the simple word of the color.

Example of Text Color

<font color="Blue">Hey I'm Blue!</font><br>
<font size="+2" face="Impact" color="Green">Hey I'm green and in Impact Font!</font><br>
<font color="Red">Hey I'm red!</font>

Which would look like:
Hey I'm Blue!
Hey I'm green and in Impact Font!
Hey I'm red!

Try it yourself!

You may wish to change the words within the tags just to try it out. Try typing this:

<html>
<head>
<title>Fonts and Colors Are Cool</title>
</head>
<body>
<font color="Yellow" face="Arial">Hey I'm Yellow Text... Change my color!</font><br>
<font size="+2" color="purple">Hey I'm Purple!</font><br>
</body>
</html>

Which would look like this:
Hey I'm Yellow Text... Change my color!
Hey I'm Purple!

You can save your work in your html folder and then check out the color of your fonts.

CHAPTER 17

Clean Code:

If you are writing an HTML document, sometimes you may want to put little reminders to yourself within your code so that you will be able to interpret your coding better. A comment will not appear in a web browser when the page is displayed. It is only visible when the source code is viewed. You start commented text with "<!--" and end it with"-->". (For blind folks, please read this code letter by letter with your cursor).

Try it out:

<html>
<head>
<title>TITLE HERE</title>
</head>
<body>
<!-- No one will see this really long comment I have typed right here unless they decide to view the source. I just want to write down when this page was last updated, and it was on March 3 2005.-->
The above line will not appear in your html page even though it's in the body.
</body>
</html>

Which would look like:
The above line will not appear in your html page even though it's in the body.

You can now save your work in your html folder and check it out all by yourself.

CHAPTER 18

DIV tag:

The center tag pretty much explains itself! The opening tag is <center> and the closing center tag is </center>. Whatever you put between will be centered on the current line.

Example of the CENTER tag


<center><h1>My heading is in Center!!!</h1></center>

But recently the W3C (the group that decides on HTML standards) has recommended that when writing HTML, you use <div align="center">centered text</div>

This is the new standard instead of using the center tag. Although div does not work in many older web browsers, it works in virtually all recent versions of popular web browsers. The neat thing about div is that you can align both left and right in addition to center.

CHAPTER 19

Tables:

Although tables are not that easy to learn and have some complexity, with lots of practice I am sure that you will get a better hold on these tags. Tables can change your overall website lay out, and you can try lots of different things while using them

Basics table tags.

1. Tables:
These start usually with <table> and ends up with </table>

2. Table Borders:
This is useful if you like to align text. If you don't use this attribute it will not show any border at all. In other words, this attribute can insert a line around your table. If you select the border value="0" then it will not show any border line. When you do not use the border attribute the table border will become invisible. The tag used for the border attribute is:

<table border="0">

And you can change the value of zero too. It all depends on how thick you want your border to be in your page.


border="1" is a thin border, while border="2" is a little thicker.

3. Table rows:
The tag used to represent table rows is
<tr> and it ends up with </tr>

4. Table data:
We can put data in tables without using these tags.
<td> starts the data and it ends with </td>
In other words, these are table cells.

5. Table headings:
We can also use table headings if we want something to be centered and maybe even bold as well. The tags used for this purpose start with <th> and end with </th>

6. Table Alignments
We can align any item we want to show in our tables and for this we have to use these tags:

<td align="left">aligns all elements to the left side of the cell (this is the default setting)
<td align="right"> aligns all elements to the right side cell
<td align="center"> aligns all elements to center of the cell
<td valign="top"> aligns all elements to the top of the cell.
<td valign="bottom"> aligns all elements to the bottom of the cell.
<td valign="middle"> aligns all elements to the middle of the cell. (this is the default setting)

You can combine these attributes:

<td align="left" valign="bottom">

This HTML will produce a cell with items aligned along the left and bottom of the cell.

Here is another example.

<table border="2">
<tr>
<th>Heading 1</th><th>Heading 2</th><th>Heading 3</th>
</tr>
<tr>
<td>Cell A</td><td>Cell B</td><td>Cell C</td>
</tr>
<tr>
<td>Cell D</td><td>Cell E</td><td>Cell F</td>
</tr>
</table>

Which would look like:
Heading 1Heading 2Heading 3
Cell ACell BCell C
Cell DCell ECell F

7. Rows and Columns
Here is what we can do if we use the colspan and row span attributes in the<td>...</td> tags.

<table border>
<tr>
<td>Row 1 Col 1</td>
<td align="center" colspan=2>Row 1 Col 2-3</td>
</tr>
<tr>
<td>Row 2 Col 1</td>
<td>Row 2 Col 2</td>
<td>Row 2 Col 3</td>
</tr> <tr>
<td>Row 3 Col 1</td>
<td>Row 3 Col 2</td>
<td>Row 3 Col 3</td>
</tr>
</table>

Which would look like:
Row 1 Col 1 Row 1 Col 2-3
Row 2 Col 1 Row 2 Col 2 Row 2 Col 3
Row 3 Col 1 Row 3 Col 2 Row 3 Col 3

** Note the attribute for the second cell of the first row spans 2 columns. We have also aligned the text in the center of this cell. Now that we have had a cell span two columns, let's make a cell that spans two rows.

<table border="1">
<tr>
<td>Row 1 Col 1</td>
<td align="center" colspan=2>Row 1 Col 2-3</td>
</tr>
<tr>
<td>Row 2 Col 1</td>
<td valign="top" row span=2>Row 2 Col 2</td>
<td>Row 2 Col 3</td>
</tr>
<tr>
<td>Row 3 Col 1</td>
<td>Row 3 Col 3</td>
</tr>
</table>

Which would look like:
Row 1 Col 1 Row 1 Col 2-3
Row 2 Col 1 Row 2 Col 2 Row 2 Col 3
Row 3 Col 1 Row 3 Col 3

In other words, colspan or rowspan can increase the number of columns and rows in the table.

8. Cellpadding & cellspacing
Now let's add some more things to our table. Some browsers allow you to specify other settings for the lines that make up the table. These are the attributes for the table tag:

<table border="X" cellpadding="Y" cellspacing="Z">

where X is the width (in pixels) of the outer border of the table. The attribute cellpadding specifies how much empty "space" exists between items in the cells and the walls of the cells. High values for Y will make the cells larger, thereby "padding" the cell. The attribute cellspacing specifies (in pixels) the width between the inner lines that divide the cells.

Modify your <table> tag to read:

<table border="3" cellpadding="4" cellspacing="8">

The <caption> tag places a string of text (centered to the width of the table) as a title or caption for the table. Modify the lines of your table as follows:

<table border="3" cellpadding="4" cellspacing="8">
<caption><b><font size="+1">
Friends Names</font></b></caption>

You can include HTML inside the <caption> tag; just make sure that it is within the <table>...</table>

9. Colors:
We can also change the heading colors in the tables, so let's try:

<table>
<th><font color="#EE8844">Friends</font></th>
<th><font color="#EE8844">Date of birth</font></th>
</tr>
</table>

Which will look like:
Friends Date of birth

Now we will try to change the background of the cells and lot more, so here is the example:

<th><font color="#EE8844">Friends</font></th>
<th><font color="#EE8844">Date</font></th>
<th><font color="#EE8844">Months and Years </font></th>

Which will look like:
Friends Date Months and Years

Now add the attribute to color those cells grey, that is color number #A8A8A8:

Here we change the background color":
<th bgcolor="#A8A8A8">
<font color="#EE8844">FRIENDS</font></th>
<th bgcolor="#A8A8A8">
<font color="#EE8844">Date</font></th>
<th bgcolor="#A8A8A8"><font color="#EE8844">
Addresses and Telephone Nos.<sup>3</sup>
</font></th>

Which will look like:
FRIENDS Date Addresses and Telephone Nos.3

Now, find the two tags that format the row labels and add the same color tag so that they read:

<td bgcolor="#A8A8A8" rowspan=4>
<font color="#EE8844">
<i>Friends<br>
Best Friends</i>
</font></td>
<td bgcolor="#A8A8A8" rowspan=2>
<font color="#EE8844">
<i>Are Awesome</i>
</font></td>

10. Use table in lists.
We can use tables in making our lists. Its pretty handy if we want to save a lot of space of our page, so here's how it's done. Look for the <up>...</ul> list under the References heading and replace all of it with:

<table border="0" cellpadding="2" cellspacing="2">
<tr>
<td valign="top">
<ul>
<li>
<a href="http://www.glowinginspiration.com">
Go to Glowinginspiration</a>
<li>
<a href="http://www.yahoo.com">Go to Yahoo</a>
<li>
<a href="http://www.google.com">Go to Google</a>
<li>
<a href="http://www.hotmail.com">Go To Hotmail Page</a>
<li>
<a href="http://www.audio-tips.com">Go to Audio tips</a>
<li>
<a href="http://www.singingfish.com">Singing fish</a>
</ul>
</td>
<td valign="top">
<ul>
<li>
<a href="http://www.novelguide.com/">Novel Guide</A>
<li>
<a href="http://ecards.fares.net/">Ecards</A>
<li>
<a href="http://www.bbc.co.uk/email/news">
Get BBC news daily </a>
<li>
<a href="http://www.mygoldenhosting.com">
My Golden Hosting">get an account for your website"</a>
<li>
<a href="http://library.advanced.org/17457/">
Volcanoes Online</a>
<li>
<a href="http://www.scholarships.com/">
Scholarships </a>
</ul>
</td>
</table>

Which would look like:

You can save your work and then check it out.

CHAPTER 20

Embedding a sound File:

If you want to put your favorite songs on your website, or you want to play a welcome message for your viewer, then you can try these tags. When doing so, there are few things you must keep in your mind, which I will describe here. Be sure to make your files small in size so they wont take much time while loading. You can include sound on your page in 2 different ways. The first method is to assign a link to your file or welcome message. If someone wants to listen, they can simply click that link. The second method is to use the <EMBED> tag. This tag supports many common file formats such as .wav, .mid, .mp3, and .au. Here is the basic structure of the tag:

<embed src="filename.ext" width="x" height="x" autoplay="x" hidden="x" loop="x" volume="x"></embed>

If you want the file to automatically play when the web page is loaded, set autoplay="true". If you do not want the file to automatically start, set autoplay="false". If you want the control box to be hidden, use the hidden="true" attribute. Normally the file will stop playing after it is completed the first time, so if you want it to start over again once it is done, use the attribute loop="true". You can set the volume setting with the volume attribute, a value from 1 to 100 (default 50). The control box size that plays the sound can vary from browser to browser, but some versions of Netscape won't show the box at all unless you specify a size (145 and 60 are usually good).

Example of the embed tag:

NOTE: Because this embed tag was not set to autoplay="true", you will need to click the play button to play the sound file. You may use multiple embed tags within one page, but it is recommended to never set more than one on autoplay. It is also not recommended to use .wav or .au files in the embed tag, because they are very large and take a few minutes to download. (.mp3 also falls into the category of "too large to use".) You may wish to change the words within the tags just to try it out.

Try typing this:

<html>
<head><title>Little Joe's Sound Page</title></head>
<body>
<embed src="pop.wav" width="145" height="60" autoplay="true"></embed>
Let's play pop music
</body>
</html>

Chapter 21

META TAGS:

As we all know, whenever we search for some information we go to different search engines. All we do is type in the key words or some specific phrase and that is it. We get lots of results. But do you know how this thing works in search engines? They simply pick up the information from the search data, and how they manage their search data uses Meta tags. These are tags where the web designer puts pertinent information regarding their website. Viewers cannot see this information unless they look at the source code. Now that you know the purpose of Meta tags, we will use two different Meta attributes.

Example 1:

<Meta name="description" content="Description of page goes here">

Example 2:

<Meta name="keywords" content="Keywords go here">

Now we are going to add the description and key word. For instance in my case it would be:

<html>
<head>
<title>Beyond our vision</title>
<meta name="description" content="This page has a lot of information for blind people. Related with organizations, blind schools, courses, homepages, mailing lists Pakistan and Islam. There are a lot of fun parts in this website too">
</head>
<body>
I now used Meta tags in my html page for the first time.
</body>
</html>

Remember, your meta tags will not be visible when anyone views your page but the tags can be viewed in the source code.

The other way to use meta tags is:

<META name="keywords" content="Organizations, Resources, E/learning, Courses, For blind and visually impaired people >

You can write any description that explains the purpose of your homepage.

Chapter 22

FTP EXPLORER:

Now the time comes where you have to upload your page so others can see your effort. For this you must get an ftp client and you can easily find these using search engines. In my case, I use ftp explorer so I am going to tell you how to get that client and which edit fields you have to fill in.

Step1:
Go to www.ftpx.com
The name of the file is "ftpx.exe".
Download it and press "Enter" on the filename in order to set it up.

Step2:
Now you must setup an account in this ftp client so that you can upload your pages.

Step 3:
Open the FTP explorer and press the "Add button". Press "Tab" as many times as necessary in order to reach this particular button. Press "Enter" and fill in your edit fields. "Alt-a" is another way to press the "add" button without pressing the tab key.

Step 4:
In the Profile field, write any thing that can describe your homepage, like in my case, I simply wrote down "Beyond Our Vision". This will be the name that appears in the connections list when you open ftp explorer.

Step 5:
Press "Tab" and you will hear "Host Address". Write your url here.

Step 6:
Press Tab" until you reach the "Login" edit field. Then press "Delete" first to remove anonymous (if applicable). Next write down your user name that has been given to you by your hosting company; in other words, where you are getting your account hosted.

Step 7:
Press tab once again and you will hear "Password" (provided, of course, that you have sound setup on your PC). Now write down your password that was given to you by your host.

Step 8:
Press "Tab" if you have an initial path, then you have to write down that path here. For instance, when I first got an account from angelfire.com, I had to write down the initial path.

Step 9:
Press "Tab" until you reach the description field. In this field, you can write anything that describes your page. In my case I wrote "Saima's homepage".

Step 10:
Press "Tab" until you get to the "Save" button and then press "Enter" or the spacebar.

Step 11
Now whenever you have to go to your account, you only have to open ftp explorer and press "Enter" on your profile name that appears in the list. Remember to make sure your connection is established before using your account.

Step 12:
Once you're logged in, you get a tree view of all the folders. Tab to where it says "list view" to read what each folder contains.

Step 13:
You can create a shortcut on your desktop for easy access by highlighting the account in ftp explorer and pressing "Alt-t" or tabbing to the "create shortcut" button.

Shortcut Keys:
A list of shortcut keys in the "connect dialog" of ftp explorer follows:

  • alt-b presses the "browse button", where you can pick the folder on your computer to which you wish to download files;

  • alt-c goes to the connect button and presses it;
  • alt-d goes to the description field
  • alt-e goes to the attempts field;
  • alt-f toggles the "use firewall checkbox". It willl check it if unchecked, and uncheck it if it's already checked;
  • alt-h goes to the host address field;
  • alt-i goes to the initial path field;
  • alt-l goes to the logon field;
  • alt-m goes to the "use pasv mode checkbox and toggles it. This may be needed with a firewall or certain broadband connections;
  • alt-n goes to the "profile name" field;
  • alt-p goes to the password field;
  • alt-o goes to the port field. Normally this will not need to be changed;
  • alt-r goes to the remove button and presses it. You'll be asked to confirm the removal;
  • alt-s goes to the "cache data between sessions" checkbox and toggles it. For example, it will check it if unchecked, or uncheck it if already checked;
  • alt-t goes to the "create shortcut" button and presses it;
  • alt-u goes to the anonymous checkbox;
  • alt-v goes to the save button and presses it;
  • alt-w goes to the downloads path, where you pick the folder on your computer to which you wish to download files.
    • alt-b brings up a list of folders on your machine from which you may choose;
  • alt-y goes to the retry delay field.

In order to access other commands available in ftp explorer, dismiss the "connect dialog" which appears on startup (unless you choose not to have it do so) and use the alt keys to access the menus.

In order to upload your file, press alt-f, then u for upload; provided you have sufficient administrative permissions to do so. Pressing "Enter" on a filename in the list view will download it to your computer. Pressing "Delete" when a file is highlighted will delete it; again, providing you have sufficient administrative permissions to do so. If you have any question related FTP explorer you can email to Jackie McBride
E-mail Address(es):
abletec@surfbest.net

Chapter 23

Adding Counters:

These are an interesting feature to put on your homepage. They can give you not only information how many people are visiting your website daily, but you can also get information about which country they are from, at what time they visited your homepage, and which search engine they used. To add a counter to your page you can get it from different places. They provide you some HTML codes which you have to paste into your homepage. It is up to you where you would like that counter to appear. For instance, at the top, in the middle, or at the end of the page. If your page is hosted by your ISP, contact them to see if they offer a free counter to you. If your page is located on a free hoster, they may offer a free counter to you also.

Adding Guestbooks:

This is another feature you are really going to enjoy including in your homepage. For instance, if you want to know what others are saying about your homepage, then add a guest book. When you view your guestbook, you will find comments left by the people who have signed your guestbook. They may also provide information about their address, home page url, where they found your page from, where they live, and any comments they have about your page. For this to work, you must look for a free Guestbook and paste the code provided by them into your page. This is done just like if have a counter on your homepage. There are a few sites which provide free guest books and free counters. In my case I had tried www.angelfire.com. But you can use a search engine to find one.

Chapter 24

Useful tips:

  1. Always maximize Notepad before writing your HTML codes.
  2. Go into the menu of Notepad, by pressing Alt and O, and check the option of "Word wrap". You can do that by simply press "Enter" on "Word Wrap". This will toggle it on and off. Make sure that word wrap is off.
  3. Write down your HTML codes in small letters.
  4. Choose good color contrast for your homepage, so people will find it easy to read. For instance, white background and black text, or black background with white text.
  5. Do not use tables and frames in your homepage if your visitors are using screen-readers because it's quiet annoying.
  6. Do not use many graphics, because it takes a lot of time in uploading and downloading. Your viewer might become annoyed with this.
  7. Always be specific while writing your Meta tags.
  8. Do not forget to give your homepage this extention"index.html". Your main page always must be with this extension.
  9. Whenever you give your other html page any name like "mylife.html", always remember to not leave any spaces in your name. Then upload your page.
  10. Always pick a domain name that is easy to remember for your viewer and for yourself too.
  11. Always keep your entire HTML file in one folder. This makes it easy for you to upload and you do not need to give another path while uploading them.
  12. If you find any error in your homepage, then go back and check your work by pressing Alt and V to view the menu of your homepage. This will take you to your source where you will find all of your html codes.
  13. Always check your work or any tag that you think it is not working. Check letter by letter, because sometimes we miss the < or > sign or forget the quotation marks ". So make sure by going letter by letter so you can find out where the fault is.
  14. Free web hosts URL:
  15. You can also subscribe in this group
    blindwebbers-subscribe@yahoogroups.com

Basic Tags:

<html></html>
Creates an HTML document

<head></head>
Sets off the title and other information that isn't displayed on the Web page itself

<body></body>
Sets off the visible portion of the document

Header Tags

<title></title>
Puts the name of the document in the title bar

Body Attributes

  • <body bgcolor="?">
    Sets the background color, using name or hex value
  • <body text="?">
    Sets the text color, using name or hex value
  • <body link="?">
    Sets the color of links, using name or hex value
  • <body vlink="?">
    Sets the color of followed links, using name or hex value
  • <body alink="?">
    Sets the color of links on click

Text Tags

  • <pre></pre>
    Creates preformatted text
  • <hl></hl>
    Creates the largest headline
  • <h6></h6>
    Creates the smallest headline
  • <b></b>
    Creates bold text
  • <i></i>
    Creates italic text
  • <tt></tt>
    Creates teletype, or typewriter-style text
  • <cite></cite>
    Creates a citation, usually italic
  • <em></em>
    Emphasizes a word (with italic or bold)
  • <strong></strong>
    Emphasizes a word (with italic or bold)
  • <font size="?"></font>
    Sets size of font, from 1 to 7)
  • <font color="?"></font>
    Sets font color, using name or hex value

Links

  • <a href="URL"></a>
    Creates a hyperlink
  • <a href="mailto:EMAIL"></a>
    Creates a mailto link
  • <a name="NAME"></a>
    Creates a target location within a document
  • <a href="#NAME"></a>
    Links to that target location from elsewhere in the document Formatting
  • <p></p>
    Creates a new paragraph
  • <p align="?">
    Aligns a paragraph to the left, right, or center
  • <br>
    Inserts a line break
  • <blockquote>...</blockquote>
    Indents text from both sides
  • <dl></dl>
    Creates a definition list
  • <dt>
    Precedes each definition term
  • <dd>
    Precedes each definition
  • <ol></ol>
    Creates a numbered list
  • <li></li>
    Precedes each list item, and adds a number
  • <ul></ul>
    Creates a bulleted list
  • <div align="?">
    A generic tag used to format large blocks of HTML, also used for stylesheets

Graphical Elements

  • <img src="name">
    Adds an image
  • <img src="name" align="?">
    Aligns an image: left, right, center; bottom, top, middle
  • <img src="name" border="?">
    Sets size of border around an image
  • <hr>
    Inserts a horizontal rule
  • <hr size="?">
    Sets size (height) of rule
  • <hr width="?">
    Sets width of rule, in percentage or absolute value
  • <hr noshade>
    Creates a rule without a shadow

Tables

  • <table></table>
    Creates a table
  • <tr></tr>
    Sets off each row in a table
  • <td></td>
    Sets off each cell in a row
  • <th></th>
    Sets off the table header (a normal cell with bold, centered text)

Table Attributes

  • <table border="#">
    Sets width of border around table cells
  • <table cellspacing="#">
    Sets amount of space between table cells
  • <table cellpadding="#">
    Sets amount of space between a cell's border and its contents
  • <table width="#" or "%">
    Sets width of table - in pixels or as a percentage of document width
  • <tr align="?"> or <td align="?">
    Sets alignment for cell(s) (left, center, or right)
  • <tr valign="?"> or <td valign="?">
    Sets vertical alignment for cell(s) (top, middle, or bottom)
  • <td colspan=#>
    Sets number of columns a cell should span
  • <td rowspan=#>
    Sets number of rows a cell should span (default=1)
  • <td nowrap>
    Prevents the lines within a cell from being broken to fit

Frames

  • <frameset></frameset>
    Replaces the <body> tag in a frames document; can also be nested in other framesets
  • <frameset rows="value,value">
    Defines the rows within a frameset, using number in pixels, or percentage of width
  • <frameset cols="value,value">
    Defines the columns within a frameset, using number in pixels, or percentage of width
  • <frame>
    Defines a single frame - or region - within a frameset
  • <noframes></noframes>
    Defines what will appear on browsers that don't support frames

Frames Attributes

  • <frame src="URL">
    Specifies which HTML document should be displayed
  • <frame name="name">
    Names the frame, or region, so it may be targeted by other frames
  • <frame marginwidth=#>
    Defines the left and right margins for the frame; must be equal to or greater than 1
  • <frame marginheight=#>
    Defines the top and bottom margins for the frame; must be equal to or greater than 1
  • <frame scrolling="VALUE">
    Sets whether the frame has a scrollbar; value may equal "yes," "no," or "auto." The default, as in ordinary documents, is auto.
  • <frame noresize>
    Prevents the user from resizing a frame

Forms For functional forms, you'll have to run a CGI script. The HTML just creates the appearance of a form.

  • <form></form>
    Creates all forms
  • <select multiple name="NAME" size="?"></select>
    Creates a scrolling menu. Size sets the number of menu items visible before you need to scroll.>
  • <option>
    Sets off each menu item
  • <select name="NAME"></select>
    Creates a pulldown menu
  • <option>
    Sets off each menu item
  • <textarea name="NAME" cols="40" rows="8"></textarea>
    Creates a text box area. Columns set the width; rows set the height.
  • <input type="checkbox" name="NAME">
    Creates a checkbox. Text follows tag.
  • <input type="radio" name="NAME" value="x">
    Creates a radio button. Text follows tag
  • <input type=text name="foo" size="20">
    Creates a one-line text area. Size sets length, in characters.
  • <input type="submit" value="NAME">
    Creates a Submit button
  • <input type="image" border="0" name="NAME" src="name.gif">
    Creates a Submit button using an image
  • <input type="reset">
    Creates a Reset button

Chapter 25

Color Codes:

  • White = FFFFFF
  • Red = FF0000
  • Green = 00FF00
  • Blue = 0000FF
  • Magenta = FF00FF
  • Cyan = 00FFFF
  • Yellow = FFFF00
  • Black = 000000
  • Aquamarine = 70DB93
  • Baker's Chocolate = 5C3317
  • Blue Violet = 9F5F9F
  • Brass = B5A642
  • Bright Gold = D9D919
  • Brown = A62A2A
  • Bronze = 8C7853
  • Bronze II = A67D3D
  • Cadet Blue = 5F9F9F
  • Cool Copper = D98719
  • Copper = B87333
  • Coral = FF7F00
  • Corn Flower Blue = 42426F
  • Dark Brown = 5C4033
  • Dark Green = 2F4F2F
  • Dark Green Copper = 4A766E
  • Dark Olive Green = 4F4F2F
  • Dark Orchid = 9932CD
  • Dark Purple = 871F78
  • Dark Slate Blue = 6B238E
  • Dark Slate Grey = 2F4F4F
  • Dark Tan = 97694F
  • Dark Turquoise = 7093DB
  • Dark Wood = 855E42
  • Dim Grey = 545454
  • Dusty Rose = 856363
  • Feldspar = D19275
  • Firebrick = 8E2323
  • Forest Green = 238E23
  • Gold = CD7F32
  • Goldenrod = DBDB70
  • Grey = C0C0C0
  • Green Copper = 527F76
  • Green Yellow = 93DB70
  • Hunter Green = 215E21
  • Indian Red = 4E2F2F
  • Khaki = 9F9F5F
  • Light Blue = C0D9D9
  • Light Grey = A8A8A8
  • Light Steel Blue = 8F8FBD
  • Light Wood = E9C2A6
  • Lime Green = 32CD32
  • Mandarian Orange = E47833
  • Maroon = 8E236B
  • Medium Aquamarine = 32CD99
  • Medium Blue = 3232CD
  • Medium Forest Green = 6B8E23
  • Medium Goldenrod = EAEAAE
  • Medium Orchid = 9370DB
  • Medium Sea Green = 426F42
  • Medium Slate Blue = 7F00FF
  • Medium Spring Green = 7FFF00
  • Medium Turquoise = 70DBDB
  • Medium Violet Red = DB7093
  • Medium Wood = A68064
  • Midnight Blue = 2F2F4F
  • Navy Blue = 23238E
  • Neon Blue = 4D4DFF
  • Neon Pink = FF6EC7
  • New Midnight Blue = 00009C
  • New Tan = EBC79E
  • Old Gold = CFB53B
  • Orange = FF7F00
  • Orange Red = FF2400
  • Orchid = DB70DB
  • Pale Green = 8FBC8F
  • Pink = BC8F8F
  • Plum = EAADEA
  • Quartz = D9D9F3
  • Rich Blue = 5959AB
  • Salmon = 6F4242
  • Scarlet = 8C1717
  • Sea Green = 238E68
  • Semi-Sweet Chocolate = 6B4226
  • Sienna = 8E6B23
  • Silver = E6E8FA
  • Sky Blue = 3299CC
  • Slate Blue = 007FFF
  • Spicy Pink = FF1CAE
  • Spring Green = 00FF7F
  • Steel Blue = 236B8E
  • Summer Sky = 38B0DE
  • Tan = DB9370
  • Thistle = D8BFD8
  • Turquoise = ADEAEA
  • Very Dark Brown = 5C4033
  • Very Light Grey = CDCDCD
  • Violet = 4F2F4F
  • Violet Red = CC3299
  • Wheat = D8D8BF
  • Yellow Green = 99CC32

Acknowledgement

This tutorial is written by Saima Yousaf and few very good friends of mine. They helped me with this document and fixed my English errors too. I would really like to mention their names. They are: Adrijana from Mesidonia, Cy from USA, Jacki from USA, Doreen and her husband from Canada. I would like to say "Thanks" to Mighty Allah, and all of my family/friends who prayed for me and encouraged me in every way.

My homepage is:
www.beyondourvision.com

My email address is:
beyondourvision@gmail.com