OK, so I wanted to post my HTML Tutorial from long ago, to show my grandson, but this webpage-maker software wiped out a LOT of the formatting.   The first section, is just copy & pasted from the website I'd originally posted.   

Since it's no longer formatted properly, it's gonna be confusing when I keep saying "as you can see ...", when there's nothing there but plain text. For that reason, I copy and Pasted the actual HTML code from my original pages - in the dark section at the bottom.  If you paste that code into a blank web page, it should show you all the correctly formatted information, in a helpful way for beginners. 

I hate the way web pages are made nowadays, but this code is helpful, if you prefer to do it yourself, without so many hands "Helping" you make your webpage.


file:///E:/HTML/Karen's%20HTML/how_to.html


How To - HTML   (Some of it, anyway.   : )

I'm no longer working on it, but it is far enough to be useful for a beginner.   : )

For all text contained herein, I will use < brackets > with a space on either end to show what the Code looks like.

There should be NO SPACES between the < and your HTML code >, as it will not work.



UNORDERED LISTS


When you Open < UL > an Unordered List, the text will skip down a line, then Indent the text in the List.

When you Close < /UL > an Unordered List, the text will skip down a line, then Stop Indenting the Text, thereafter.

This list is an Unordered List:

CODE for this Unordered List looks like:

(Remember, there should be NO SPACES between the < and your HTML code >).

< UL >

< LI > Cofffee

< LI > Cream

< LI > Sugar

< /UL >

Note that the code < LI > just means "List Item" in all Lists. All it does is break the line to start on the next line, with either a Dot, or a sequential Number or Letter, as dictated by the "TYPE" of List you choose. (See ORDERED LISTS).


Top of the Page



ORDERED LISTS


The great thing about an "Ordered List", is that you only write the list, it numbers the items for you.


When you Open < OL > an Ordered List, the text will skip down a line, then Indent the text until you Close < /OL > the Ordered List.

When you Close < /OL > the Ordered List, the text will skip down a line, then Stop Indenting the Text, thereafter.

This list is an Ordered List:

CODE for this Ordered List looks like:

(Remember, there should be NO SPACES between the < and your HTML code >).

< OL >

< LI >Coffee

< LI >Cream

< LI >Sugar

< /OL >

In "Ordered Lists", you can choose the number of a list item yourself. (The default starting number is "1". )

In this Example, we "Set" the first two items values at 30, then 40.

The second two items were allowed to just continue from 40.

CODE for this Ordered List looks like:

(Remember, there should be NO SPACES between the < and your HTML code >).

< OL >

< LI VALUE="30" > Coffee

< LI VALUE="40" >Cream

< LI > Sugar

< LI > Toast

< /OL >

Now that you have mastered that, we will get fancy.

In this Example, we will "Set" the items to be listed as Alphabetical, rather than Numerical.

CODE for this Ordered List looks like:

(Remember, there should be NO SPACES between the < and your HTML code >).

< OL TYPE="a" >

< LI > Coffee

< LI > Cream

< LI > Sugar

< /OL >

* To select a list with Upper Case letters, Roman Numerals, etc, Use the following codes:

< OL TYPE="A" > will list using Upper Case Letters.

< OL TYPE="I" > will list in Roman Numerals.

When using the OL TYPE for Uppercase Alphabet (A, B, C, ...), adding the code < START=3 > will start the list with "C".

When using the OL TYPE for lowercase Roman Numerals, < START=3 > will start the list with "iii", etc.

EXAMPLE:

CODE for this Ordered List looks like:

(Remember, there should be NO SPACES between the < and your HTML code >).

< OL TYPE=A START=3 >

< LI > Coffee

< LI > Cream

< LI > Sugar

< LI > Toast

< /OL >


Top of the Page



DROP DOWN LISTS


OK, Drop Down Lists are pretty cool, but you have to have them link to something, or send information to someone.

I am including an example of one, so once you get good, and know how to do the other half, you can make the code.

If you're ready to tackle this, you don't need me to show you the code, you can "View Source", and get it from there.   : )

Grocery List

   Eggs   Milk   Bread   Juice   Paper Towels   Water  





Top of the Page



INDENTING TEXT, SPACING, etc.


HTML is fun, but sometimes trying, if you want to space items more than one space.

No matter how many spaces or Tabs you put in between your words, it only recognizes one space!


There are several ways to work around this:   You can use < PRE > and < /PRE > to make your Text any way you want, but it will lose all the other formatting.


< PRE >


      This is how my words look using < PRE > at the top,  and < /PRE > at the bottom of this section.


Note that while the lettering is not pretty, I can    SP  A  C      E   my letters any way I want.


The down side is that this does not word wrap, which you need to keep in mind, so People do not have to Scroll to the side to finish a sentence.  I really HATE that!




You can use Tabs.


You can line up Columns Column number 2 Column number 3


Columns can be odd Lengths & still line up with Tabs


< /PRE >

-----------------------------------------------------

Another option for an occasional gap of several spaces is to use   & nbsp;   without the spaces   (this makes a gap of several spaces, but you can not use it like a Tab.   It will not line up columns, etc).


For small gaps like between Phone: and (207):

Phone:   (207) 286-3581

Fax:   (207) 286-2061   (Note how the two Items are equally spaced, but not aligned like columns).

Simply type the code like this:   without the spaces in the   & nbsp;


Phone: & nbsp; (207) 286-3581

Fax: & nbsp; (207) 286-2061


You can use & nbsp; side by side, for bigger gaps like this one:           which used 5


-----------------------------------------------------

A "Definition List" is Great, if you want a Q & A type format, with a Question Asked, and an Idented Answer given.

This list is similar to the Lists above, but this time, you alternate the start of the List Items using < DT > or < DD >, rather than < LI >.

Why is the Lake Blue?

The Lake is Blue because it reflects the Blue Sky above it.

Why did the Chicken Cross the Road?

Silly Question, move along!   : )

CODE for this Definition List looks like:

(Remember, there should be NO SPACES between the < and your HTML code >).

< DL >

< DT > Why is the Lake Blue?

< DD >The Lake is Blue because it reflects the Blue Sky above it.

< DT > Why did the Chicken Cross the Road?

< DD > Silly Question, move along! & nbsp; : )

< /DL >

This list is a "Definition List" using "dl" with "/dl".

This time, you write the list, but alternate using "dt" with "/dd".

("dt" being the "Term", and "/dd" being the indented "Definition")

This is a "Nested List". (2 or more lists within one main list.)

The ingredients:

The procedure:

Notes:

The recipe may be improved by adding raisins.


Top of the Page



COLORS


Colors are a simple way to make some items POP out.


You can choose the Same color, in more than one way.   You can either Type out RED, as your color selection, or you can specify exactly which shade of Red you want - If you know the code for it.


There seem to be an infinite number of shades of Colors, but all use a simple 6-Digit code of Letters and Numbers to specify which shades you will get.   I will list the majors below:


WHITE = "#FFFFFF"  WHITE = "#FFFFFF"


  SILVER = "#C0C0C0"  SILVER = "#C0C0C0"


  GRAY = "#808080"  GRAY = "#808080" 


  BLACK = "#000000"  BLACK = "#000000" 


  MAROON = "#800000"  MAROON = "#800000" 


  RED = "#FF0000"  RED = "#FF0000" 


  PURPLE = "#800080"  PURPLE = "#800080" 


FUCHSIA = "#FF00FF" FUCHSIA = "#FF00FF" 


  GREEN = "#008000"  GREEN = "#008000"


  LIME = "#00FF00"  LIME = "#00FF00"


  OLIVE = "#808000"  OLIVE = "#808000"  


  YELLOW = "#FFFF00" YELLOW = "#FFFF00"


  NAVY = "#000080"  NAVY = "#000080"


  BLUE = "#0000FF"  BLUE = "#0000FF" 


  TEAL = "#008080"  TEAL = "#008080" 


  AQUA = "#00FFFF"  AQUA = "#00FFFF" 



Note how some of the colors do not show up well with this background. Bear that in mind when choosing your Background colors as well as the text fonts.


I can't see any real pattern here, so it's often easier to type the color Name, rather than memorizing the color codes.


FUCHSIA is the color for this example.

"#FF00FF" is the color Code for this example.


CODE for Colored Fonts looks like:

(Remember, there should be NO SPACES between the < and your HTML code >).



< FONT COLOR=FUCHSIA > FUCHSIA is the color for this example. < /FONT >

< FONT COLOR= "#FF00FF" > "#FF00FF" is the color Code for this example.< /FONT >


Note how typing the word FUCHSIA got me the same color as typing in the actual Color Code "#FF00FF".



Top of the Page



BACKGROUNDS



Colors are a simple way to make some Backgrounds Stand Out.



You can either select a background Picture, as the majority of this site uses, or you can just select a Solid Color for your Background, as this Table uses.



Just as we covered in Font Colors, You can choose the Same color, in more than one way.   You can either Type out RED, as your color selection, or you can specify exactly which shade of Red you want - If you know the code for it.



There seem to be an infinite number of shades of Colors, but all use a simple 6-Digit code of Letters and Numbers to specify which shades you will get.   I will list the majors below:



WHITE = "#FFFFFF"  WHITE = "#FFFFFF"


  SILVER = "#C0C0C0"  SILVER = "#C0C0C0"


  GRAY = "#808080"  GRAY = "#808080" 


  BLACK = "#000000"  BLACK = "#000000" 


  MAROON = "#800000"  MAROON = "#800000" 


  RED = "#FF0000"  RED = "#FF0000" 


  PURPLE = "#800080"  PURPLE = "#800080" 


FUCHSIA = "#FF00FF" FUCHSIA = "#FF00FF" 


  GREEN = "#008000"  GREEN = "#008000"


  LIME = "#00FF00"  LIME = "#00FF00"


  OLIVE = "#808000"  OLIVE = "#808000"  


  YELLOW = "#FFFF00" YELLOW = "#FFFF00"


  NAVY = "#000080"  NAVY = "#000080"


  BLUE = "#0000FF"  BLUE = "#0000FF" 


  TEAL = "#008080"  TEAL = "#008080" 


  AQUA = "#00FFFF"  AQUA = "#00FFFF" 





Note how some of the colors do not show up well with the White background above. (The white letters are still there, they just disappear with a White background). Bear that in mind when choosing your Background colors as well as your text font colors.



I can't see any real pattern here, so it's often easier to type the color Name, rather than memorizing the color codes.



YELLOW is the Background Color for this section of the Table.

"#FFFF00" is the color "Code" for YELLOW.


CODE for Colored Backgrounds looks like:

(Remember, there should be NO SPACES between the < and your HTML code >).



Type < BGCOLOR=YELLOW > where YELLOW is the Background Color you want for your page, or

Type < BGCOLOR="#FFFF00" > where YELLOW is the Background Color you want for your page.


Note how typing the word YELLOW will get me the same color as typing in the actual Color Code "#FFFF00".



Colors are a simple way to make your Backgrounds Stand Out, however you should use them sparingly, as they can also be a distraction, and make your text harder to read.. Look at the RED section above, with a LIME Font color. It is very difficult to read.


Top of the Page



FONTS


We learned about Colored Fonts, but we can also change the STYLE of the lettering, in several ways.

This font will appear to you in whatever Font you have selected on your Browser, because I did Not specify which font to use.

I specified for this text to appear as "Copperplate Gothic Bold".

I specified for this text to appear as "Garamond".

I specified for this text to appear as "Charlemagne".

I specified for this text to appear as "Cottonwood".

I specified for this text to appear as "Arial Black".

I specified for this text to appear as "Lucida Handwriting".

I specified for this text to appear as "Arioso".

The Arioso text probably appears to you as just plain text (unless you happen to have installed that font on to your computer, too : )


Your computer can only display the fonts it knows (has stored on it), so you need to Remember that your Specified Font may not always show up to your readers as you imagine.

If you specify a Font which is not standard on all computers (Like Times New Roman, etc), they may see plain text.


Bear this in mind when selecting your Fonts.


CODE for Specified Fonts looks like:

(Remember, there should be NO SPACES between the < and your HTML code >).


EXAMPLE CODES FROM ABOVE:

< FONT FACE="Arial Black">I specified for this text to appear as "Arial Black".< /FONT>

< FONT FACE="Copperplate Gothic Bold">I specified for this text to appear as "Copperplate Gothic Bold".< /FONT>, Etc.

(To get names for different fonts, look in WORD, or some other Word Processing software which allows you to change fonts).



*********************************************


This text is all "Garamond", but you can change many features within this same Font,

by using the Bold, Italic, Underline and Font Size specification Codes.

You can even use them together for Bold, Italic, Underline and Font Size all in one section of Text.


EXAMPLE CODES FROM ABOVE:

< FONT FACE="Garamond" >This text is all "Garamond", but you can change many features within this same Font,

by using the < B>Bold< /B>, < I>Italic< /I>, < U>Underline< /U> and < FONT SIZE=+3>Font Size< /FONT> specification Codes.< /FONT>


You can even use them together for < B>Bold, < I>Italic, < U>Underline and < FONT SIZE=+3>Font Size< /U>< /I>< /B>< /FONT> all in one section of Text.


NOTE how each start of a Change like BOLD "< B>" must also have a corresponding Close BOLD "< /B>" to end the change, or it will simply continue on, until it reaches the next Close BOLD "< /B>", or the end of the Page.

Look for the Close BOLD "< /B>" (or whatever else you used), if you find an entire section has changed, when you did not intend it.


Top of the Page



TABLES


This is a Table


Type

Numbering style


1

arabic numbers

1, 2, 3, ...

a

lower alpha

a, b, c, ...

A

upper alpha

A, B, C, ...

i

lower roman

i, ii, iii, ...

I

upper roman

I, II, III, ...




This is a Single Table wide, with a Yellow Background, a Narrow, Uncolored Border, and No extra space around the Text.




Code For the Yellow Table:

< TABLE ID=1 WIDTH=100%>< TABLE BORDER="2" CELLPADDING="0" BGCOLOR=YELLOW>< TR>

< TH>< TD WIDTH=100%> Text goes here... then close out the Table with: < /TH> < /TR>< /TD>< /TABLE>




This Table has a LIME Background, a Wide, Uncolored Border ( TABLE BORDER="6"), and Some space ( CELLPADDING="3") around the Centered (TR ALIGN=CENTER VALIGN=TOP) Text.




Code For the LIME Table:

< TABLE ID=1 WIDTH=100%>< TABLE BORDER="6" CELLPADDING="3" BGCOLOR=LIME>

< TR ALIGN=CENTER VALIGN=TOP>< TH>< TD WIDTH=100%>

Text goes here... then close out the Table with: < /TH> < /TR>< /TD>< /TABLE>



Note the first two tables were touching, but this next one is not. Just type Line Breaks < BR>< BR> for

as many lines you want to skip down between tables (One < BR> = One Line).




This Centered Table has an AQUA Background, a VERY Wide, BLUE Border (BORDERCOLOR=BLUE), Lots of space around the Text, and only occupies about 50% of the width of the screen.



Code For the AQUA Table:

< CENTER>

< TABLE ID=1 BORDER="10" BORDERCOLOR=BLUE CELLPADDING="10" BGCOLOR=AQUA>

< TR>< TH>< TD WIDTH=350> Text goes here... then close out the Table with:< /TH>

< /TR>< /TD>< /TABLE>< /CENTER>



*********************************



These Tables are Stacked, & Side By Side, with No Background colors. < BR>

(Note how you can alter Fonts within the same Table.) < BR>

You can also insert line Breaks < BR>, at your convenience.






CODE for above: < TABLE ID=5 BORDER=1 WIDTH=100% CELLPADDING="10">

< TH COLSPAN=5>< FONT FACE="Garamond" SIZE=4> Text goes here. < /FONT>< BR>

< FONT FACE="ARIAL" COLOR=GREEN>(< I>Text goes here< /I>.) < /FONT>< BR>

Text goes here. < BR>< /TH> < /TR>< /Table>






Some can be links.

Employee Directory

Contacts

Job Descriptions

Destiny


Width Code for ^:

< TD WIDTH=23%>

< TD WIDTH=23%>

< TD WIDTH

=8%>

< TD WIDTH=23%>

< TD WIDTH=23%>


Finance


Legal


Personnel


< TD WIDTH=32%>

< A HREF="/finance"> Finance< /A>


< TD WIDTH=32%>

< A HREF="/legal/"> Legal< /A>


< TD WIDTH=32%>

< A HREF="/personnel/"> Personnel< /A>



Even the "Top of the Page" link at the bottom of each section is a tiny Table.   : )

Code for it is :


< CENTER>

< TABLE ID=5 BORDER=3>

< TR ALIGN=CENTER VALIGN=TOP>

< TD WIDTH=125>< A HREF = "#top">Top of the Page < /A>

< /TR>< /TD>< /TABLE>< /CENTER>


Bear in mind this is only a "Link" to the top of the page. You still need the other half to make it work.

Links are next, so Scroll Down.



Top of the Page



LINKS


OK, Links are easy. I will provide several kinds of links, and you can just retype the correct address in them.

I do recommend going to the site with your browser, Then Copy & Paste the Link address, just to be sure.


WWW Links:

Great Works Internet

Yahoo

Destiny sites use an abbreviated address for other sites on Destiny. Take note of the address differences.

GWI Employee Handbook

Two things to note for WWW Links:

That allows you to write a discription, rather than just a link address, which may be meaningless to the user.


CODE for WWW Links look like:

(Remember, there should be NO SPACES between the < and your HTML code >).



< A HREF="http://www.gwi.net"> Great Works Internet< /A>

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

Note how the following Destiny Site uses an abbreviated "HREF" address.

Because we are already in Destiny, I do not need to use the entire address. (https://destiny.gwi.net/corporate/handbook/home.html)

< A HREF="/corporate/handbook/home.html"> GWI Employee Handbook< /A>

*********************************



Intra Page Links:


There are 2 parts to any Intra Page Link. One part is the section of the page you want to link To,

and the other is the place where you want to link From.


You can link to the same place, from several sites on your page, as I have with this page (using the "Top of the Page" link).

Or, you can have a specific link for only one place on the page, as I have done with the "Links" section, etc.


LINKS

Top of the Page

CODE for Intra Page Links look like:

(Remember, there should be NO SPACES between the < and your HTML code >).



< A HREF = "#anchor208">LINKS < /A> (This is the Code you use to say you want to go TO the Links section)

< A NAME = "#anchor208">LINKS < /A> (This is the Code you use AT the Links section, so it knows where to go.)

< A HREF = "#top">Top of the Page < /A> (This is the Code you use to say you want to go TO the Top of the Page)

< A NAME = "#top"> < /A> (This is the Code you use AT the Top of the Page, so it knows where to go.)

The < A NAME=... and < A HREF=... are the important parts of this code, along with the < /A>

(Always remember, when you Open an < A>, you must also close the < /A>)


Notice the Text between the   < A HREF=...   and the   < /A>   is underlined to show it is a link.

You can put any text you like between the   < A HREF=...   and the   < /A>  

Whatever lies between them will be the link.


ALSO NOTE: I could have named   "#top"   just plain   "top", or   "Bottom"   or "1234",   or anything else,

and it would still work, as long as the   < A NAME=...   and   < A HREF=...   matched.


You do not have to incorportate   "#anchor..."   into the code, either.

Just < A NAME="22">Insert text here, if you want < /A> and < A HREF="22"> Insert text here, if you want < /A> will work.



Top of the Page



EMAIL


Super Easy!


EMAIL:   Human Resources


CODE for Email Links look like:

(Remember, there should be NO SPACES between the < and your HTML code >).



EMAIL:   < A HREF="mailto:hr@gwi.net">Human Resources< /A>


Just replace the   hr@gwi.net   portion, with your email address (right after "mailto:...)

You may set the   Human Resources   to anything you want, as it is just the part you see on the page.

It doesn't get any easier that that.   : )


Top of the Page



PICTURES



Top of the Page



RCS



Top of the Page



TABLES


This is a Table


Type whatever in here

See, this one is Double wide


1

arabic numbers

1, 2, 3, ...

a

lower alpha

a, b, c, ...

A

upper alpha

A, B, C, ...

i

lower roman

i, ii, iii, ...

I

upper roman

I, II, III, ...




Last modified: May 19th, 2000


Top of the Page