HTML Tutorial For Beginners. Tables, Frames, Lists, Forms and CSS.

Table of Contents

Home
HTML
Free Web Hosting
Getting Started
Cut and Paste
View Page
HTML Comments
Under Construction

HTML Basics
Forms Tutorial
Simple Program
Horizontal Rule
HTML Commands
Lists Tutorial
Hyper-Links Tutorial

Frames Tutorial
HTML
Tables Tutorial
STYLE SHEETS
Resources

This tutorial is a work in progress. Please report any errors in this tutorial, especially spelling and grammar, to my e-mail.

HTML is an acronym for Hypertext Markup Language. An acronym is a fancy word for initials, but you hopefully already knew that.

You don't need Internet access, but you will need an Internet web browser. You also don't have to be a computer genius to learn HTML. That includes any one that can not make the clock on their VCR stop blinking. With some repetition, and maybe a few expletives every one can learn HTML.

Table of Contents

HTML is not case sensitive. <CENTER> is the same as <center>. It is good practice to use one style all the time because it is easier to edit HTML pages.

You will need a text editor. HTML-Kit is easy to use, and it is FREE. Get HTML-Kit. All HTML files should be saved as FILENAME.HTM, or FILENAME.HTML. It makes no difference which extension is chosen.

Cut And Paste

I assume most every one is familiar with cut and paste so I'll be brief. Hold the left mouse button and highlight the text that is to be moved. Right click the highlighted text.

To permanently remove text, select the CUT option. To use the text in another part of a document or a different document select COPY.

Insert the cursor in the document, right click and PASTE.

Table of Contents

Free Web Hosting

You may sign up for a FREE account with one of the major web hosting providers. However, you will have to tolerate their annoying pop-up advertisement banners.

A few major providers of free web hosting.

Yahoo Geocities

Table of Contents

Viewing HTML Files

Create a folder for your HTML files with Windows Explorer. From the START menu select RUN. Type EXPLORER and select OK

To preview a web page in a web browser by naming the HTML file, for example, my_web_page.html, save it to the folder that you place your work.

Select the FILE menu on your web browser and select OPEN. On the dialogue box select BROWSE and go to the folder where you saved the HTML file.

That process is for opening HTML files using Internet Explorer, but opening files with Netscape is similar to Internet Explorer, and Mozilla.

Table of Contents

<!--This is an HTML comment-->

<BODY>

My Web Page

<!--Comments are not visible in the BODY-->

</BODY>

You may use comments any where in the BODY. Every thing that is placed between those brackets will not be visible. Select VIEW then PAGE SOURCE or VIEW SOURCE from your web browser. You can steal ideas and use them as your own.

Important

You cannot use comments within other comments.

 -->

You could type <!--You are a dummy--> and 
they wouldn't see it. I wouldn't advise that though. If 
you forget to include one of the comment tags, or the
 exclamation point it would become very visible.

Table of Contents

Important

This is HTML code for a basic web page. Every HTML page should have these tags. The META and BASE tags are optional but search engines use META tags to index your web site.


EXAMPLE

<HTML>

<HEAD>

<TITLE></TITLE>

</HEAD>

<BODY>

Your page is between these two tags.

<!--This is a comment. It isn't visible-->

</BODY>

</HTML>

Click HERE to see it.

The HTML tag begins the web page. TITLE is the name of your web page. The TITLE /TITLE tags will be visible in the upper left-hand corner of your Web browser.

The HEAD/HEAD tags may used for Cascading Style Sheets. The BODY tag comes after the HEAD/HEAD tags. The body is the visible portion of the HTML document. Every thing placed between the BODY /BODY tags will be visible on the screen. The BODY tag must end with /BODY then /HTML and that ends the document.

The BASE tag holds the URL, which may be numerals or letters.

Table of Contents

Create a program to place your name on a web page.

Example

<HTML>

<META NAME="author" CONTENTS="Tim Robertson">

<BASE HREF="http://www.oocities.org/tarob01/"> 

<HEAD>

<TITLE>My First Web Page</TITLE>

</HEAD>

<BODY>

<CENTER>Hello, my name is Tim!</CENTER>

</BODY>

</HTML>

Click HERE to see it.

<CENTER></CENTER> Centers text or images. It may 
come before or after HTML tags.

Example

<CENTER><P>Hello<P></CENTER>

<BGCOLOR="#FFFFFF"> Defines background color. An attribute of 
<BODY> <P> <TABLE> and <TD> 

Example

<BODY BGCOLOR="#FFFFFF">
<P BGCOLOR="#FFFFFF">

Save this file as MY_WEB_PAGE.html or something more glamorous. Open Microsoft Internet Explorer and go to the FILE menu. Select OPEN then BROWSE. Select the folder where you saved MY_WEB_PAGE.html and open the file.

Table of Contents

META tags contain information that search engines use to index your web page. In other words, META tags help other people find your web site. META tags should be placed between the HEAD tags, and immediately before or after the TITLE

The META Description tag should contain about fifteen-twenty words that describe your web site. It's important to carefully select the words you use in this tag. For example, Google emphasizes this and the TITLE tag more than Yahoo and other search engines. You should be precise and use lively, content related words or phrases in this tag.

Yahoo emphasizes KEYWORDS, while Google mostly ignores it. Keyword searches on Yahoo and Google will likely return very different results. Do your homework, and plan ahead when selecting words for your DESCRIPTION, TITLE and KEYWORDS. Keep in mind that most people never look beyond the first page of search results, so if your page isn't listed on page one then you still have work to do.

If you have any images on your web site then utilize the ALT tag and keyword or phrase your image name. Many search engines also index image tag contents and use the information in searches. For example, if your web site is called Wacky Widgets, then name your image wacky_widget.gif

META tags are written as <META NAME= CONTENT=>

<META NAME="Author" CONTENT="Tim Robertson">

<META NAME="Description" CONTENT="HTML Tutorial">

<META NAME="Keywords" CONTENT="HTML Tutorial">

Always separate keywords with a coma.

META Refresh-Redirect

Table of Contents

<CENTER></CENTER> Centers text or images.
<BR> Line break. 
<p></p> New paragraph.
<STRIKE></STRIKE> 

<H?></H?> The H tag increases text size. The 
value is an integer between 1-6. 1 is the largest and 6 is 
the smallest. 

<BIG></BIG> 
<SMALL></SMALL> 
<EM></EM> Emphasizes text. 
<I></I> Italicizes text 
<TT></TT> Typewriter text.
<BLINK></BLINK> Blinking text. 
<BLOCKQUOTE></BLOCKQUOTE> Indents and formats text.
<ALT> The ALT attribute is used to supply a text 
label for images. Without it the image is inaccessible 
to people who can't see the image.
ALT="This is a photo of me"

Table of Contents

Yet another innovation from MICROSOFT, and as far as I know it works only in MIE and NETSCAPE 7. It's some times regarded as an evil tag because it's often over used.

<MARQUEE></MARQUEE> What ever text you place between these tags will scroll from left to right. See the example below.

<MARQUEE> attributes. Did you really think that MICROSOFT would stop with only scrolling text? When they do some thing, they do it all the way. I almost forgot, for all you NETSCAPE users, just scroll on down to the next section in the tutorial.

Attributes are defined with an identifier. In this example, the identifier is behavior.

<MARQUEE ^IDENTIFIER 
BEHAVIOR="scroll, slide, or alternate">

Code for a simple MARQUEE

<MARQUEE><MARQUEE>

The scroll attribute moves text from one side of the screen to the other in an infinite loop, such as the example below.

Click HERE to see it.

Return to Table of Contents

The Internet is a collection of individual pages connected by hyper links. You have two web pages. The first is a biographical page and the second is pictures. Hyper-links will connect these two, or a thousand more pages.

Example

<A HREF="http://www.yoursite.com">Games</A>

The Hyper-link above will send the person who clicks Games to www.yoursite.com, which is not a real address, at least I think it isn't a real site. So, please do not click it. If it is real, then you have not wasted any time by clicking it.

The Games text is the only word that will be visible on the screen, because it is not enclosed within the <> brackets. Whatever page you want to connect to is what you include in the tags.


<A HREF="http://www.yoursite.com">Games</A>

Be sure to ALWAYS surround the URL with quotation marks. Was that simple or what?

We now jump to linking elements of the same web page. For example, this web page is filled with hyper-links. They allow you to move from one section to the next, and then back. How do you do this for your own page? First, you have to know what sections you want to link together, then make hyper-links.


Example

Insert the BASE URL above the HEAD tag.

<BASE HREF="http://www.oocities.org/tarob01/Tutorial.html">

THEN

<A NAME=""></A> Insert this hyper-link into the
location of the web page that you want to go. This won't be 
visible on a web page.

<A NAME="#"></A> This hyper-link will be visible.

<A NAME="TABLE_OF_CONTENTS"></A>
<A NAME="#TABLE_OF_CONTENTS">Table Of Contents</A>
                   Must insert a pound sign #

Images as hyper-links

Using images as hyper-links is an attractive alternative to standard text.

Important

The default value for image attributes is null or zero. If you do not include a value then there will be no border and the image will remain the original size.

Select an image <IMG SRC="name_of_image.gif">

Place the <IMG SRC=""> tag where the text normally
goes in a hyperlink.

<A HREF=""><IMG SRC=""></a>

The <IMG SRC=""> tag has several attributes.

<IMG SRC="URL" ALT="description" BORDER="integer" 

HEIGHT="integer" WIDTH="integer">

Table of Contents

STYLE tags may be declared between the HEAD tags, an external STYLE sheet, or in line with document tags in the BODY. If it's declared between the HEAD tags, or an external STYLE sheet, it will affect the entire web page, unless specifically overridden in individual tags.

An external style sheet may be written in any text editor. Save the file with the .css extension, not HTML. The main advantage of a style sheet is uniformity. If you have several web pages that need to be similarly designed then a style sheet is probably best.

 
EXAMPLE

HR {color: #FFFF00;}
P {margin-right: 20px;}
BODY {background-image: url("myImage.gif");}

Save this file and insert a link in the HEAD section.

<HEAD>
<LINK REL="stylesheet" TYPE="text/css" HREF="URL" />
</HEAD>

OR

<HEAD>
<STYLE TYPE="text/css">
       <!--
         HR {color: #FFFF00;}
         P {margin-right: 20px;}
        -->
 <!--Surround the code with an HTML comment tag-->
</STYLE>
</HEAD>
    
OR

Insert in HTML tags. 
<P STYLE="MARGIN-RIGHT: 20px;">

What do all hyper-links have in common? They are underlined. Here is the CSS HTML code to remove underlined hyper-links.

EXAMPLE

<HEAD>
<STYLE TYPE="text/css">
     <!--
        A { TEXT-DECORATION: none; } 
        -->
</STYLE>
</HEAD>

Additional attributes

<STYLE>
     <!-- 
P {TEXT-DECORATION:underline OR overline OR linethrough
                   OR blink;}
     -->

</STYLE>

It is not necessary to add semi-colons for only one item in a bracket, i.e. A{text-decoration:none;} However, it is a good idea to always use them.

Table of Contents

<BODY> attributes affect your web page visuals. COLOR is one attribute. Some times you can write the name of the color but you probably will need a Hexadecimal code for a better selection.

A Hexadecimal chart can be found here.

#FFFFFF Hexadecimal codes require a pound sign.

<HTML>

<BODY BG COLOR="white" TEXT="purple" LINK="red"

ALINK="black" VLINK="orange">

</BODY>

</HTML>

Use different colors than the ones I chose. If you do not then you will have a funky looking page.

BGCOLOR= sets the color of the background. 

TEXT= sets all text on the entire page. 

LINK= is the color the HYPERLINK will be 
before it is clicked. 

ALINK= is the color the HYPERLINK will 
turn while it is being clicked. 

VLINK= is the color the HYPERLINK will 
turn after it is clicked.

Table of Contents

What is a Table? The answer is not in your kitchen. An HTML Table is a way of providing information and selections to your Web Page visitors in an organized fashion.

Example

<CAPTION>My First Table</CAPTION> This tag is optional. What ever you place between these tags will appear directly above your Table.

<CAPTION>My First Table</CAPTION>

<TABLE> 

<TR> 

<TD> HELLO 

</TD> 

<TD> GOODBYE 

</TD> 

</TR> 

</TABLE>

You can have as many cells <TD></TD> and rows <TR></TR> as necessary. It is arbitrary.

Your code should look like this.

<CAPTION>My First Table</CAPTION>

<TABLE BORDER="1" CELLSPACING="10" CELLPADDING="10"> 

<TR> Table Row number one

<TD> HELLO

</TD> End table CELL no.one

<TD> GOODBYE

</TD> End table CELL no. two

</TR> End table Row number one

</TABLE> Ends table.

Click HERE to see how it looks. Experiment with it to gain some practice.

What do you notice about this TABLE? One cell is longer than the other one. If you said it looks sloppy, then you are very observant. When table cells do not contain the approximate same amount of data or letters, do not use a border. Click HERE to see the same TABLE with out a BORDER.

That looks much better. One side does not appear longer than the other, even though one side actually is longer. The only thing that was changed was BORDER="1" to BORDER="0".

BORDER= Defines how large the table border should be. The higher the integer, the greater the increase in size. BORDER="0" is the default value for the border tag and will have no border.

CELLPADDING= CELLPADDING is one word. It defines how much room is between the text inside the cell and the border.

CELLSPACING= CELLSPACING defines how much room there should be between the borders of cells. The larger the integer, the greater the increase in the size of the padding or space between cells.

A TABLE with hyper-links

TABLE cells can be hyper-linked with other web pages. Click on one of the words in the TABLE example. What happened? Nothing, because the cells are not linked with another web page.

EXAMPLE

<CAPTION>My First Table</CAPTION>

<TABLE BORDER="1" CELLSPACING="10" CELLPADDING="10">

<TR>

<TD> <A HREF="http://www.oocities.org/tarob01/">HELLO</A>

This links the HELLO cell with my homepage. 

</TD> 

<TD><A HREF="http://www.yahoo.com">GOODBYE</A>

This links the GOODBYE cell with Yahoo!

</TD> 

</TR>

</TABLE>

Click HERE too see it.

TABLE alignment is an attribute of the TABLE tag.

<CAPTION> My First Table</CAPTION>

<TABLE> 

<TR>

<TD ALIGN="X"> X may be "CENTER" "RIGHT" OR "LEFT" 

</TD>  

</TR>

</TABLE>

The CENTER attribute value places text or images in the center of the TABLE cell. The RIGHT attribute value places text or images on the right side of the TABLE cell. The LEFT attribute value places text or images on the left side of the TABLE cell.

VALIGN (no spacing) is VERTICAL alignment. VALIGN is declared after ALIGN. The attributes for VALIGN are BOTTOM, TOP or MIDDLE. These attributes will place the cell's contents in either the TOP BOTTOM portion of the cell.

TABLES are difficult to understand, so practice with these examples several times if you have to, and also practice writing your own code. After all, these are just the very basics of HTML Tables. I hate cliches', but practice makes perfect

Multi row TABLE example.

<TABLE BORDER="2"> 

<TR>TABLE row no.1

<TD BGCOLOR="BLUE"> 

</TD>

<TD BGCOLOR="GREEN"> 

</TD>

</TR> 

<TR> 

<TD BGCOLOR="ORANGE"> 

</TD> 

<TD BGCOLOR="RED"> 

</TD> 

</TR> 

</TABLE>

This TABLE will have two rows, four cells, and a BORDER. Each TABLE cell will be a different color. Manipulate the code by changing the BORDER and COLOR values. Cut and Paste this code into a blank document and view the outcome.

This is how it will look.

HELLO	HELLO
HELLO	HELLO

This is the same TABLE, but it does not have a BORDER.

HELLO	HELLO
HELLO	HELLO

Table of Contents

Forms transmit information and may be placed any where in the <BODY></BODY>. This is a FORM that will send an e-mail address to specified e-mail account.

<FORM METHOD="post" ACTION="mailto:tarob01@yahoo.com">

The first line begins a new FORM. What ever is typed in the text box will be sent to my e-mail address through the "Action" command. There is no spacing and always surround the text with quotation marks.


<INPUT TYPE="text" NAME="name_goes_here" SIZE="25">

This command means that "text" will be entered into the box. NAME is abitrary. If you were asking for a visitors e-mail address to start a newsletter, you might decide to use "newsletter" in the NAME="" field. Size means the size the actual text box will be. In this case it will be "25". Meaning the text box can hold 25 characters or letters. You can make it hold 50 characters or even a 100 if you want to. All of these values are arbitrary. Please remember to end your Form with the </FORM> tag!


<FORM METHOD="post" ACTION="mailto:tarob01@yahoo.com">

<INPUT TYPE="text" NAME="newsletter" SIZE="25">

</FORM>

You need a larger area than the above e-mail text box? Well, that can be achieved very easily. Look below.

Example

<FORM METHOD="post" ACTION="mailto:tarob01@yahoo.com">

<TEXTAREA NAME="suggestions"rows=5 COLS=25>

</TEXTAREA>

</FORM>

Where suggestions has replaced newsletter. The above text box will accept "5" rows or lines of text, each line holding "25" characters for a total of "125" characters. You can set the rows and characters to values to suit your needs. The text area box allows visitors to send you comments and suggestions or anything else for that matter, textually speaking, right to your e-mail.

You are going to need a way for your visitor to send the above information to your e-mail address. Here is how to transmit the information.


Example

<INPUT TYPE="submit">

<INPUT TYPE="reset"> This will create "submit" and "clear"

(reset) buttons underneath the textbox. It's actually pretty cool

looking. 


<FORM METHOD="post" ACTION="mailto:tarob01@yahoo.com">

<INPUT TYPE="text" NAME="newsletter" size="25">

<INPUT TYPE="submit">

<INPUT TYPE="reset">

</FORM>

Table of Contents

Important

You may separate text or images on a Web page with the HR tag. This command places a Horizontal line across the screen.

<HR SIZE=5 NOSHADE WIDTH=100%>

This places a black horizontal line across the entire screen. SIZE and WIDTH are arbitrary attributes. The WIDTH attribute determines the horizontal length of the line while SIZE determines the thickness.

<HR SIZE=5 NOSHADE WIDTH=50%>

Table of Contents

There are two basic kinds of lists. Ordered and unordered lists. Just like there are ordered and unordered people. Below is an example of each list. The lists I mean, not the people!

Unordered List

<H3>My List</H3>  

<UL> 

<LI>Hi, my name is Tim 

<LI>Hello, my name is Tim

<LI>Hey there, my name is Tim 

</UL>

When using a list, you do not have to include </LI> tag endings. However, XHTML requires that every document be well-formed. So, it is good practice not to leave any open tags in your document. Always close all tags. <LI></LI>

Here's what it will look like on the screen. There will be Bullets or dots in front of the items.

My List

Hi, my name is Tim!
Hello, my name is Tim!
Hey there, my name is Tim!

Ordered List

<H3>My List</H3>

<OL> 

<LI>Hi</LI>

<LI>Hello</LI>

<LI>Hey there</LI>

</OL>End of Ordered list

Here's what it will look like on the screen. There will be no bullets, only numbers. Again, it will not be red unless you make it red, or blue or green or purple or whatever color you choose to make it.

My List

Hi
Hello
Hey there

Nested List

How do you place a list inside of another list? Very simple. Here is how you can easily srtructure a document for better presentation.

<UL>
<LI>
<LI>
<OL>
<LI>
<LI>
</OL>
<LI>
</UL>

Here is what the code will look like on a web page.

Item one
Item two

Item three
Item four
Item five

Item six

Definition List

Defintion lists are used to place information in a hierarchy when you do not want bulleted or numbered items.

For example, the information to the right is a person's grocery list and bills. It is the same as an ordered or un-ordered list, except there are no bullets or numbers.

Definition List

<DL>
<DT>Grocery List</DT>
<DD>Milk</DD>
<DD>Butter</DD>
<DD>Potato Chips<DD>
<DD>Pepsi</DD>
<DD>Hot Dogs</DD>
<DT>Monthly Bills</DT>
<DD>Phone</DD>
<DD>Cable</DD>
<DD>Rent</DD>
<DD>Car Payment</DD>
<DD>Utility</DD>
</DL>

Grocery List: Milk; Eggs; Butter; Potato Chips; Pepsi; Hot Dogs
Monthly Bills: Phone; Cable; Rent; Car Payment; Utility

Cut and paste this code in your HTML document and you're all set.

There is no limit to how large a list can be. They may be 1-infiniti.

Table of Contents

The FRAMES tutorial will be the most difficult to learn, because it's the most difficult to write. What is a FRAME? A FRAME is a collection of several different web pages on the same page. Let me explain.

All Framed pages require a separate instructional code sheet to hold several different pages together. I just call it a Frame page. It's not visible to the Web visitors. Think of a picture frame with several different pictures in inside. That is a web page FRAME, it holds several Web pages together just as a picture frame does. You can see several different web pages at the same time in the same FRAME.

Note: Columns are vertical and Rows are horizontal


Example

This is a FRAME page. Here is the code sheet. 

<HTML> 

<BODY>

<FRAMESET COLS="50%,50%"> Divides screen in to two 

columns. Each page is 50% of its normal size. 

<FRAME SRC="yourpage.html"> This is the page (URL) 

that will be visible on the left side of the screen. FRAMES 

are read from left to right.

<FRAME SRC="anotherpage.html"> This is the URL that 

will be on the right-hand side of the screen

</FRAMESET> Ends the Frame

</BODY>

</HTML>

Important

To make the a FRAME page you need to make at least two pages. The FRAME page itself, and the two pages that will be on the left and right sides of the screen.

The Frame page isn't visible. Only yourpage.html and anotherpage.html are visible. You can abbreviate the URL if you want, but if it's not in the same directory you will have to list the full URL.

i.e. http://www.yourpage.com and http://www.anotherpage.com. I recommend typing the full URL, at least unless you are comfortable with directory pathways. Always include the </FRAMESET> tag. Then finish with </HTML> and you've written your first FRAME page. Remember that's three <HTML></HTML> pages to write for this FRAME example.

This is an example of a Frame.


<HTML>

<BODY>

<FRAMESET COLS="25%,75%"> Divides screens in to
                                right and left columns. 

<FRAME SRC="NavigationalBar.html" NAME="SideNavBar"> 
This is the page
on the left side.

<FRAMESET ROWS="15%,85%"> 
Divides column number two
in to two rows.                             

<FRAME SRC="Top_NavBar.html" NAME="Top_NavBar> 
This is the page for the 
top row of column two.                           

<FRAME SRC="tarob0l.html" NAME="Main_Page> 
This page will show up
under row number one.
                                                
</FRAMESET>

</FRAMESET>

<NOFRAMES> 
This page uses Frames. 
<A HREF="URL GOES HERE">
Please go here.</a>

</NOFRAMES>

</BODY>

</HTML>

Some people rarely upgrade their web browsers and continue to use old versions of MIE and Netscape. Netscape will no longer be upgraded or supported by the developer, so it's best to switch to MIE or Mozilla.

Old web browsers cannot read a FRAME page. The <NOFRAME> tags set up a link to allow people with old web browsers to go to the full page. So, be sure to include <noframe> tags if you use frames.

Note: Frames are not supported by all web browsers. I don't remember exactly, but I think only browsers 2.0 and greater have the capacity to support FRAMES. There is a way to handle that problem though <NOFRAMES></NOFRAMES> which is in the example above. More information is available [here]. Please, ask me for assistance and I'll try to help.

Name is used for linking pages together. For example, if you had a link on the Navigational Bar.html that opened a new page for bicycles. When the person clicked on it, it would open that page in the same window. Remember from the example above that the navigational bar is only 25% of the page, so when the bicycle page opened it would be really scrunched into that page. The NAME tag solves that by allowing you to target where you want the hyper-link to open.

Here's some friendly advice.

Fewer people are using FRAME pages. A lot of people tend to overuse frames, and that drags down the appearance of their page. Usually two frames are enough for any normal Web site. It's a judgement call as to how many Frames that you want. Remember, it is your visitors who count, not you unfortunately. If your in doubt go with the "no more than two rule."

Table of Contents

Internet Archives

http://www.oocities.org/tarob01/

Table of Contents