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:
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 tag is saying to start bold text, while the 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:
This Text is in Bold
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.

<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
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.
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,

it’s my first try

My name is Sams and I am trying to teach myself the basics of 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 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.

This is for largest heading.

This is for smallest heading.
Example:
Try typing.

I am trying headings

heading one.

heading two.

heading three.

heading four.

heading five.

heading six.

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

. The horizontal ruled line does not have a closing tag. You may also add certain attributes to the

tag, such as different sizes and widths. Example of horizontal ruled lines is:

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.

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

and the closing is

. 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:

I am trying paragraph tags

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.

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 and is boldfaced.
Italics:
Everything between and is italicized.
Underline:
Everything between and 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:

Trying text formatting.

This is in bold format
And we can combine 2 tags in this case.
This is Bold AND Italic
Another example,
My
name
is
Saima

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:
I am from Pakistan
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.
I
am
from
Pakistan
Use a minus sign (“-“) if you want to decrease the size of the font.
It’s a small font size
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:

Oh this time I am writing in the center

This time it is aligned to the right

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

Align attributes

My Poems

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

I am learning fast!

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
tag. This tag has no closing tag. For example:
My name is Sams.
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
several times. For example, if you want to insert three lines it would be:

Now you can try your own skills. Write down:

Line breaks

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.

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:

and the closing tag is

. Within these tags, another tag,

, begins each list item. You can also use the closing tag

, although it is not necessary. I recommend using the closing

tags as I have done in this example:

Pakistan
Japan
England
America
Canada
Saudia

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

, and the closing tag is

Within the list we still use the same tags. Notice the number before each list item. Now here is the HTML code.

Pakistan
Japan
England
America
Canada
Saudia

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

opening tag, and ends with the

closing tag. This list has two other tags known as

for “definition term” and

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:

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.

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:

Definitions

Pakistan
Japan
England

Here is another type of list.

Pakistan
Japan
England

And here is one more.

Jaws: A screen reader, by which a blind person can run a computer.

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 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:

Font styles

Verdana

Arial

Helvetica

Impact

Comic Sans MS

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:
Visit glowinginspiration.com
“” 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 “‘ 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:

Go to Yahoo
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:
beyondourvision.com
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:
My Life
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:
glowinginspiration.com
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:
send me an email
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.
Send email to author
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:

Send email to Sams, Tom, CC to Jacki
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:
Send email to Sams, Tom, CC to Jacki
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

and

. Let’s write something using these tags.

Beyond Our Vision

Last updated Fifth July 2005

Web page by Saima Yousaf

Email address:

saimayousaf@myrealbox.com

The url is:

www.beyondourvision.com

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 “, 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:

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:

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,
Press enter on bear
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:

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:

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

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:

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:
Here is an image
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:
Here is an image
Isn’t it cool?
Horizontal rule:
If you want the horizontal rule to fall below the Image, you can add the
tag between the images.
For example:
this is a big image.

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.

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:

Title goes here

Body goes here

Go to Beyond Our Vision
That is what it looks like.

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 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
Hey I’m Blue!
Hey I’m green and in Impact Font!
Hey I’m red!
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:

Fonts and Colors Are Cool

Hey I’m Yellow Text… Change my color!
Hey I’m Purple!

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 ““. (For blind folks, please read this code letter by letter with your cursor).
Try it out:

TITLE HERE

The above line will not appear in your html page even though it’s in the body.

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

and the closing center tag is . Whatever you put between will be centered on the current line.
Example of the CENTER tag

My heading is in Center!!!

But recently the W3C (the group that decides on HTML standards) has recommended that when writing HTML, you use

centered text

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

and ends up with

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:

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

and it ends up with4. Table data:
We can put data in tables without using these tags.

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

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

tags.

starts the data and it ends with

and end with

aligns all elements to the left side of the cell (this is the default setting)

aligns all elements to the right side cell

aligns all elements to center of the cell

aligns all elements to the top of the cell.

aligns all elements to the bottom of the cell.

aligns all elements to the middle of the cell. (this is the default setting)
You can combine these attributes:

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

Heading 1	Heading 2	Heading 3
Cell A	Cell B	Cell C
Cell D	Cell E	Cell F

Which would look like:
Heading 1
Heading 2
Heading 3
Cell A
Cell B
Cell C
Cell D
Cell E
Cell F
7. Rows and Columns
Here is what we can do if we use the colspan and row span attributes in the

…

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

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.

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

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:

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

tag to read:

The

Sets off each row in a table
•

Sets off each cell in a row
•

Sets off the table header (a normal cell with bold, centered text)
Table Attributes
•

Sets width of border around table cells
•

Sets amount of space between table cells
•

Sets amount of space between a cell’s border and its contents
•

Sets width of table – in pixels or as a percentage of document width
•

Sets alignment for cell(s) (left, center, or right)
•

Sets vertical alignment for cell(s) (top, middle, or bottom)
•

Sets number of columns a cell should span
•

Sets number of rows a cell should span (default=1)
•

Prevents the lines within a cell from being broken to fit
Frames
•
Replaces the tag in a frames document; can also be nested in other framesets
•
Defines the rows within a frameset, using number in pixels, or percentage of width
•
Defines the columns within a frameset, using number in pixels, or percentage of width
•
Defines a single frame – or region – within a frameset
•
Defines what will appear on browsers that don’t support frames
Frames Attributes
•
Specifies which HTML document should be displayed
•
Names the frame, or region, so it may be targeted by other frames
•
Defines the left and right margins for the frame; must be equal to or greater than 1
•
Defines the top and bottom margins for the frame; must be equal to or greater than 1
•
Sets whether the frame has a scrollbar; value may equal “yes,” “no,” or “auto.” The default, as in ordinary documents, is auto.
•
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.
•

Creates all forms
•
Creates a scrolling menu. Size sets the number of menu items visible before you need to scroll.>
•

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

Share this post:

X (Twitter) Facebook LinkedIn Email WhatsApp