Basic HTML Tutorial

So, you want to make a
Web Page!4.81
by Joe Barta - pagetutor.com
(Reprinted with permission)
Just a note - although this tutorial is geared towards those using Windows95/98/Me/2000/XP etc. and a modern web browser (Internet Explorer, Netscape Navigator, AOL, etc), the lessons contained in this tutorial are applicable to nearly anyone, no matter what you happen to be using.

Hello. My name is Joe [image] and I'm going to give you a few simple lessons on how to make a Web Page. I must warn you though, this is for "all wet behinda ears" Newbies. If you're at all experienced at this sort of thing, you'll probably find this tutorial a bit of a yawner.

You'll be happy to learn that it's really pretty simple. The basic idea is this... A web page is nothing more than a file, a HTML file to be exact. It's called HTML because web page documents have the file extension .html or .htm. HTML stands for Hyper Text Mark-up Language. (If you are unclear about this file extension stuff, then you really are newbie!! Take a quick detour for a few ramblings on the subject).

Let's get started. First, if you have any of them fancy HTML editors and have an inkling to break em in now... forget it. The worst way to learn is to use one of those things. (Although there are a few that you will find helpful, they'll only help you once you learn the basics, so don't even worry about it now.) What's the best way to learn HTML?? Notepad**.
Joe,

Just wanted to drop you a line to let you know how much I enjoyed your tutorials. After reading your tutorials, I bailed on my old web site which was done with *** and started my own from scratch with notepad. It was like crawling out of a 5 gallon bucket. I now can do exactly what I want.

Thanks,
Mike
I know, I know, you got this 9 megabyte Wunder Wizzard that says it's gonna make putting up a web page as easy as scratching your head. Just trust me on this one. K? K.

Another tool you'll need is a browser to view your web pages. Netscape Navigator is what I use. If you're using some flavor of Windows, then Internet Explorer (also a browser) should be on your system somewhere.

If you're using an online service such as America Online, MSN etc, you can still easily make a web page using these tutorials. The lessons are applicable no matter what you are using. Also, just because you're using AOL (or some other online service), that doesn't mean you have to use their tools... you are welcome to use whatever you want. WebTV'ers - I don't know anything about WebTV, but I do know that people have been able to make web pages with it. You might want to look for some WebTV specific sites to learn how they do it. Then you can come back here and go through these lessons.

** FAQ: What the heck is Notepad and where do I get it?

A: Notepad is the default Windows text editor. On most Win9X systems, click your Start button and choose Programs then Accessories. It should be a little blue notebook. For our purposes, ANY text editor will do nicely. You can go to most any shareware/freeware site and pick yourself up a zippy new text editor, many of them being free. For the time being though, Notepad will do quite nicely.

Right from the outset, you will be doing yourself a very big favor if you toddle on over to www.notetab.com and pick yourself up a free copy of NoteTab Light (Win95/98). It can be used as a simple Notepad replacement, or with a little fiddling, can be one of the most powerful text manipulation tools in the world. I give this wonderful free editor my personal "two-thumbs-up" and wholeheartedly encourage you to try it out and and learn how to use it. I've tried quite a few editors and this is what I use every day.

Mac Users: SimpleText is the default text editor on the Mac. Mac users eventually might want to download BBedit Lite, a more powerful, and free mac text editor.

One thing you should avoid though is to use a word processor for authoring your HTML docs. For one, these are not very well suited for HTML authoring and two, unless you know what you're doing, your file won't save as a plain text html file, it will probably save in the word processor format and won't render in a browser.

And one more thing (again) at least while you're learning... put away Composer, put away Front Page, put away Sooper Dooper Web Page Cruncher. Just follow along with Notepad. Trust me. Would I lie? ;-)

With that out of the way I can say with confidence that you are less than 5 minutes away from making your first web page! So... off to Lesson 1.

NEXT >>

So, you want to make a Web Page!

Lessons: Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

Upload Your Pages Color Chart Practice Exercises Color Picker
Index & Quick Reference Barebones HTML Guide Table of Contents
Print version available PageTutor.com membership

Tutorial reprinted with permission, courtesy PageTutor.com


What the hex is a hex code?

Let's learn a little about these "hex codes". In our everyday life we use a decimal (base 10) number system. We use the following numbers...

0-1-2-3-4-5-6-7-8-9

Somewhere along the line, computer people decided that certain things would be easier to do if they used a hexidecimal (base 16) number system...

0-1-2-3-4-5-6-7-8-9-A-B-C-D-E-F

Since we don't have a unique symbol for 10, 11, 12 etc, we use letters to represent those values. Here is a chart showing the hexidecimal equivalents from 0-255...

 0   = 00    51  = 33    102 = 66    153 = 99    204 = CC
 1   = 01    52  = 34    103 = 67    154 = 9A    205 = CD
 2   = 02    53  = 35    104 = 68    155 = 9B    206 = CE
 3   = 03    54  = 36    105 = 69    156 = 9C    207 = CF
 4   = 04    55  = 37    106 = 6A    157 = 9D    208 = D0
 5   = 05    56  = 38    107 = 6B    158 = 9E    209 = D1
 6   = 06    57  = 39    108 = 6C    159 = 9F    210 = D2
 7   = 07    58  = 3A    109 = 6D    160 = A0    211 = D3
 8   = 08    59  = 3B    110 = 6E    161 = A1    212 = D4
 9   = 09    60  = 3C    111 = 6F    162 = A2    213 = D5
 10  = 0A    61  = 3D    112 = 70    163 = A3    214 = D6
 11  = 0B    62  = 3E    113 = 71    164 = A4    215 = D7
 12  = 0C    63  = 3F    114 = 72    165 = A5    216 = D8
 13  = 0D    64  = 40    115 = 73    166 = A6    217 = D9
 14  = 0E    65  = 41    116 = 74    167 = A7    218 = DA
 15  = 0F    66  = 42    117 = 75    168 = A8    219 = DB
 16  = 10    67  = 43    118 = 76    169 = A9    220 = DC
 17  = 11    68  = 44    119 = 77    170 = AA    221 = DD
 18  = 12    69  = 45    120 = 78    171 = AB    222 = DE
 19  = 13    70  = 46    121 = 79    172 = AC    223 = DF
 20  = 14    71  = 47    122 = 7A    173 = AD    224 = E0
 21  = 15    72  = 48    123 = 7B    174 = AE    225 = E1
 22  = 16    73  = 49    124 = 7C    175 = AF    226 = E2
 23  = 17    74  = 4A    125 = 7D    176 = B0    227 = E3
 24  = 18    75  = 4B    126 = 7E    177 = B1    228 = E4
 25  = 19    76  = 4C    127 = 7F    178 = B2    229 = E5
 26  = 1A    77  = 4D    128 = 80    179 = B3    230 = E6
 27  = 1B    78  = 4E    129 = 81    180 = B4    231 = E7
 28  = 1C    79  = 4F    130 = 82    181 = B5    232 = E8
 29  = 1D    80  = 50    131 = 83    182 = B6    233 = E9
 30  = 1E    81  = 51    132 = 84    183 = B7    234 = EA
 31  = 1F    82  = 52    133 = 85    184 = B8    235 = EB
 32  = 20    83  = 53    134 = 86    185 = B9    236 = EC
 33  = 21    84  = 54    135 = 87    186 = BA    237 = ED
 34  = 22    85  = 55    136 = 88    187 = BB    238 = EE
 35  = 23    86  = 56    137 = 89    188 = BC    239 = EF
 36  = 24    87  = 57    138 = 8A    189 = BD    240 = F0
 37  = 25    88  = 58    139 = 8B    190 = BE    241 = F1
 38  = 26    89  = 59    140 = 8C    191 = BF    242 = F2
 39  = 27    90  = 5A    141 = 8D    192 = C0    243 = F3
 40  = 28    91  = 5B    142 = 8E    193 = C1    244 = F4
 41  = 29    92  = 5C    143 = 8F    194 = C2    245 = F5
 42  = 2A    93  = 5D    144 = 90    195 = C3    246 = F6
 43  = 2B    94  = 5E    145 = 91    196 = C4    247 = F7
 44  = 2C    95  = 5F    146 = 92    197 = C5    248 = F8
 45  = 2D    96  = 60    147 = 93    198 = C6    249 = F9
 46  = 2E    97  = 61    148 = 94    199 = C7    250 = FA
 47  = 2F    98  = 62    149 = 95    200 = C8    251 = FB
 48  = 30    99  = 63    150 = 96    201 = C9    252 = FC
 49  = 31    100 = 64    151 = 97    202 = CA    253 = FD
 50  = 32    101 = 65    152 = 98    203 = CB    254 = FE
                                                 255 = FF

Below is a little widget that will convert any number back and forth from base 10 (our number system) to base 16 (hexidecimal). Type a decimal number in the left box and click the top button to conver to hexidecimal. Or, type a hex number in the right box and click the bottom button.

So when someone talks about a "hex code" or "hexadecimal number" or if you see cryptic color codes like 09EC0A, CCFFCC, 00AACC, etc., this is what they're talking about and where it comes from.

Taking it a little further, your computer understands colors in terms of red, green and blue values...

RED - GREEN - BLUE

or

R-G-B

Each of those can have a value from 0 to 255. 0 being the absence of color, 255 being full color. Using that scale, we get the following values...

 RED= 255-0-0
 GREEN= 0-255-0
 BLUE= 0-0-255
 BLACK= 0-0-0
 WHITE= 255-255-255

Since we have 3 colors, each with a value that can range from 0 to 255 we have 16,777,216 possible color combinations (256 ³). So, that's how we get 16.7 million colors. Black and white are not considered "colors". White is total saturation of all 3 colors and black is the total absence of any color (at least as far as your computer is concerned).

If we replace the decimal number with it's hexadecimal equivalent we start to get something that looks a little more like those "hex codes".

 RED= FF-0-0
 GREEN= 0-FF-0
 BLUE= 0-0-FF
 BLACK= 0-0-0
 WHITE= FF-FF-FF

If we then use 00 for 0, and 01 for 1, etc., and if we get rid of the dashes(-), we then got ourselves some genuwine color codes!

 RED= FF0000
 GREEN= 00FF00
 BLUE= 0000FF
 BLACK= 000000
 WHITE= FFFFFF

Here are a few random examples of hex color codes...

200-0-0 | C8-00-00 | C80000
255-255-0 | FF-FF-00 | FFFF00
0-102-204 | 00-66-CC | 0066CC
191-128-210 | BF-80-D2 | BF80D2
32-136-23 | 20-88-17 | 208817
231-156-3 | E7-9C-03 | E79C03
0-128-128 | 00-80-80 | 008080
71-64-7 | 47-40-07 | 474007

Notice when the red, green and blue values are equal, the result is a shade of gray...

210-210-210 | D2-D2-D2 | D2D2D2
170-170-170 | AA-AA-AA | AAAAAA
117-117-117 | 75-75-75 | 757575
60-60-60 | 3C-3C-3C | 3C3C3C

Well, I hope that helped you understand a little about "hex codes" and how they put color in your page. The more you understand how all this stuff works, the more control you'll have in your web page. You won't be limited to what some silly HTML editor will let you do. You can do just about anything you want.

Joe Barta
pagetutor.com


Bare Bones HTML Guide

-- THE BARE BONES GUIDE TO HTML --

Version 4.0 Formatted -- February 1999

The latest version of this document is available at http://werbach.com/barebones/, where you will also find the text version, translations, and background materials.

The Bare Bones Guide to HTML lists all the tags that current browsers are likely to recognize. I have included all the elements in the official HTML 4.0 recommendation with common attributes, as well as Netscape and Microsoft extensions. This document is a quick reference, not a complete specification; for official information about HTML and its development, see the World Wide Web Consortium site at http://www.w3.org/MarkUp/.

The Guide is designed to be as concise as possible, and therefore it doesn't go into any detail about how to use the various tags. A few tags link to notes that address frequently-asked questions. If you're looking for more detailed step-by-step information, see my WWW Help Page.

Table of Contents

  1. INTRODUCTORY MATERIAL
    • What is unique about this guide
    • Which HTML tags are included
    • How this document is formatted (including a description of symbols and abbreviations)
  2. HTML TAGS
    • basic elements (all HTML documents should have these)
    • structural definition (appearance controlled by the browser's preferences)
    • presentation formatting (author specifies text appearance)
    • links, graphics, and sounds
    • positioning
    • dividers
    • lists
    • backgrounds and colors
    • special characters
    • forms
    • tables
    • frames
    • scripts and java
    • miscellaneous

    Important: If you are not clear about the differences between the various versions of HTML, I suggest that you read my discussion of the development of HTML, or the World Wide Web Consortium HTML activity statement.

BASIC ELEMENTS
 | Document Type | <HTML></HTML> | (beginning and end of file)
 | Title | <TITLE></TITLE> | (must be in header)
 | Header | <HEAD></HEAD> | (descriptive info, such as title)
 | Body | <BODY></BODY> | (bulk of the page)

STRUCTURAL DEFINITION
 | Heading | <H?></H?> | (the spec. defines 6 levels)
 | Align Heading | <H? ALIGN=LEFT|CENTER|RIGHT></H?> |
 | Division | <DIV></DIV> |
 | Align Division | <DIV ALIGN=LEFT|RIGHT|CENTER|JUSTIFY></DIV>
4.0 | Defined Content | <SPAN></SPAN> |
 | Block Quote | <BLOCKQUOTE></BLOCKQUOTE> | (usually indented)
4.0 | Quote | <Q></Q> | (for short quotations)
4.0 | Citation | <Q CITE="URL"></Q> |
 | Emphasis | <EM></EM> | (usually displayed as italic)
 | Strong Emphasis | <STRONG></STRONG> | (usually displayed as bold)
 | Citation | <CITE></CITE> | (usually italics)
 | Code | <CODE></CODE> | (for source code listings)
 | Sample Output | <SAMP></SAMP> |
 | Keyboard Input | <KBD></KBD> |
 | Variable | <VAR></VAR> |
 | Definition | <DFN></DFN> | (not widely implemented)
 | Author's Address | <ADDRESS></ADDRESS> |
 | Large Font Size | <BIG></BIG> |
 | Small Font Size | <SMALL></SMALL> |
4.0 | Insert | <INS></INS> | (marks additions in a new version)
4.0 | Time of Change | <INS DATETIME=":::"></INS> |
4.0 | Comments | <INS CITE="URL"></INS> |
4.0 | Delete | <DEL></DEL> | (marks deletions in a new version)
4.0 | Time of Change | <DEL DATETIME=":::"></DEL> |
4.0 | Comments | <DEL CITE="URL"></DEL> |
4.0 | Acronym | <ACRONYM></ACRONYM> |
4.0 | Abbreviation | <ABBR></ABBR> |

PRESENTATION FORMATTING
 | Bold | <B></B> |
 | Italic | <I></I> |
4.0* | Underline | <U></U> | (not widely implemented)
 | Strikeout | <STRIKE></STRIKE> | (not widely implemented)
4.0* | Strikeout | <S></S> | (not widely implemented)
 | Subscript | <SUB></SUB> |
 | Superscript | <SUP></SUP> |
 | Typewriter | <TT></TT> | (displays in a monospaced font)
 | Preformatted | <PRE></PRE> | (display text spacing as-is)
 | Width | <PRE WIDTH=?></PRE> | (in characters)
 | Center | <CENTER></CENTER> | (for both text and images)
N1 | Blinking | <BLINK></BLINK> | (the most derided tag ever)
 | Font Size | <FONT SIZE=?></FONT> | (ranges from 1-7)
 | Change Font Size | <FONT SIZE="+|-?"></FONT> |
 | Font Color | <FONT COLOR="#$$$$$$"></FONT> |
4.0* | Select Font | <FONT FACE="***"></FONT> |
N4 | Point size | <FONT POINT-SIZE=?></FONT> |
N4 | Weight | <FONT WEIGHT=?></FONT> |
4.0* | Base Font Size | <BASEFONT SIZE=?> | (from 1-7; default is 3)
MS | Marquee | <MARQUEE></MARQUEE> |

POSITIONING
N3 | Multi-Column | <MULTICOL COLS=?></MULTICOL> |
N3 | Column Gutter | <MULTICOL GUTTER=?></MULTICOL> |
N3 | Column Width | <MULTICOL WIDTH=?></MULTICOL> |
N3 | Spacer | <SPACER> |
N3 | Spacer Type | <SPACER TYPE=HORIZONTAL|VERTICAL|BLOCK> |
N3 | Size | <SPACER SIZE=?> |
N3 | Dimensions | <SPACER WIDTH=? HEIGHT=?> |
N3 | Alignment | <SPACER ALIGN=LEFT|RIGHT|CENTER> |
N4 | Layer | <LAYER></LAYER> |
N4 | Name | <LAYER ID="***"></LAYER> |
N4 | Location | <LAYER LEFT=? TOP=?></LAYER> |
N4 | Rel. Position | <LAYER PAGEX=? PAGEY=?></LAYER> |
N4 | Source File | <LAYER SRC="***"></LAYER> |
N4 | Stacking | <LAYER Z-INDEX=?></LAYER> |
N4 | Stack Position | <LAYER ABOVE="***" BELOW="***"></LAYER> |
N4 | Dimensions | <LAYER HEIGHT=? WIDTH=?></LAYER> |
N4 | Clipping Path | <LAYER CLIP=,,,></LAYER> |
N4 | Visible? | <LAYER VISIBILITY=SHOW|HIDDEN|INHERIT></LAYER>
N4 | Background | <LAYER BACKGROUND="$$$$$$"></LAYER> |
N4 | Color | <LAYER BGCOLOR="$$$$$$"></LAYER> |
N4 | Inline Layer | <ILAYER></ILAYER> | (takes same attributes as LAYER)
N4 | Alt. Content | <NOLAYER></NOLAYER> |

LINKS, GRAPHICS, AND SOUNDS
 | Link Something | <A HREF="URL"></A> |
 | Link to Location | <A HREF="URL#***"></A> | (if in another document)
 |  | <A HREF="#***"></A> | (if in current document)
4.0* | Target Window | <A HREF="URL" TARGET="***"></A> |
4.0* | Action on Click | <A HREF="URL" ONCLICK="***"></A> | (Javascript)
4.0* | Mouseover Action | <A HREF="URL" ONMOUSEOVER="***"></A> | (Javascript)
4.0* | Mouse out Action | <A HREF="URL" ONMOUSEOUT="***"></A> | (Javascript)
 | Link to Email | <A HREF="mailto:@"></A> |
N, MS | Specify Subject | <A HREF="mailto:@?SUBJECT=***"></A> | (use a real question mark)
 | Define Location | <A NAME="***"></A> |
 | Display Image | <IMG SRC="URL"> |
 | Alignment | <IMG SRC="URL" ALIGN=TOP|BOTTOM|MIDDLE|LEFT|RIGHT>
N1 | Alignment | <IMG SRC="URL" ALIGN=TEXTTOP|ABSMIDDLE|BASELINE|ABSBOTTOM>
 | Alternate | <IMG SRC="URL" ALT="***"> | (if image not displayed)
 | Dimensions | <IMG SRC="URL" WIDTH=? HEIGHT=?> | (in pixels)
 |  | <IMG SRC="URL" WIDTH=% HEIGHT=%> | (as percentage of page width/height)
 | Border | <IMG SRC="URL" BORDER=?> | (in pixels)
 | Runaround Space | <IMG SRC="URL" HSPACE=? VSPACE=?> | (in pixels)
N1 | Low-Res Proxy | <IMG SRC="URL" LOWSRC="URL"> |
 | Imagemap | <IMG SRC="URL" ISMAP> | (requires a script)
 | Imagemap | <IMG SRC="URL" USEMAP="URL"> |
MS | Movie Clip | <IMG DYNSRC="***" START="***" LOOP=?> |
MS | Background Sound | <BGSOUND SRC="***" LOOP=?|INFINITE> |
 | Client-Side Map | <MAP NAME="***"></MAP> | (describes the map)
 | Map Section | <AREA SHAPE="DEFAULT|RECT|CIRCLE|POLY" COORDS=",,," HREF="URL"|NOHREF>
N1 | Client Pull | <META HTTP-EQUIV="Refresh" CONTENT="?; URL=URL">
N2 | Embed Object | <EMBED SRC="URL"> | (insert object into page)
N2 | Object Size | <EMBED SRC="URL" WIDTH=? HEIGHT=?> |
4.0 | Object | <OBJECT></OBJECT> |
4.0 | Parameters | <PARAM> |

DIVIDERS
 | Paragraph | <P></P> | (closing tag often unnecessary)
 | Align Text | <P ALIGN=LEFT|CENTER|RIGHT></P> |
N | Justify Text | <P ALIGN=JUSTIFY></P> |
 | Line Break | <BR> | (a single carriage return)
 | Clear Textwrap | <BR CLEAR=LEFT|RIGHT|ALL> |
 | Horizontal Rule | <HR> |
 | Alignment | <HR ALIGN=LEFT|RIGHT|CENTER> |
 | Thickness | <HR SIZE=?> | (in pixels)
 | Width | <HR WIDTH=?> | (in pixels)
 | Width Percent | <HR WIDTH="%"> | (as a percentage of page width)
 | Solid Line | <HR NOSHADE> | (without the 3D cutout look)
N1 | No Break | <NOBR></NOBR> | (prevents line breaks)
N1 | Word Break | <WBR> | (where to break a line if needed)

LISTS
 | Unordered List | <UL><LI></UL> | (before each list item)
 | Compact | <UL COMPACT></UL> |
 | Bullet Type | <UL TYPE=DISC|CIRCLE|SQUARE> | (for the whole list)
 | Bullet Type | <LI TYPE=DISC|CIRCLE|SQUARE> | (this & subsequent)
 | Ordered List | <OL><LI></OL> | (before each list item)
 | Compact | <OL COMPACT></OL> |
 | Numbering Type | <OL TYPE=A|a|I|i|1> | (for the whole list)
 | Numbering Type | <LI TYPE=A|a|I|i|1> | (this & subsequent)
 | Starting Number | <OL START=?> | (for the whole list)
 | Starting Number | <LI VALUE=?> | (this & subsequent)
 | Definition List | <DL><DT><DD></DL> | (<DT>=term, <DD>=definition)
 | Compact | <DL COMPACT></DL> |
 | Menu List | <MENU><LI></MENU> | (before each list item)
 | Compact | <MENU COMPACT></MENU> |
 | Directory List | <DIR><LI></DIR> | (before each list item)
 | Compact | <DIR COMPACT></DIR> |

BACKGROUNDS AND COLORS
 | Tiled Bkground | <BODY BACKGROUND="URL"> |
MS | Watermark | <BODY BGPROPERTIES="FIXED"> |
 | Bkground Color | <BODY BGCOLOR="#$$$$$$"> | (order is red/green/blue)
 | Text Color | <BODY TEXT="#$$$$$$"> |
 | Link Color | <BODY LINK="#$$$$$$"> |
 | Visited Link | <BODY VLINK="#$$$$$$"> |
 | Active Link | <BODY ALINK="#$$$$$$"> |
 | (More info at http://werbach.com/web/wwwhelp.html#color)

SPECIAL CHARACTERS
 | Special Character | &#?; | (where ? is the ISO 8859-1 code)
 | < | &lt; |
 | > | &gt; |
 | & | &amp; |
 | " | &quot; |
 | Registered TM | &#174; |
 | Registered TM | &reg; |
 | Copyright | &#169; |
 | Copyright | &copy; |
 | Non-Breaking Space | &nbsp; |
 | (Complete list at http://www.uni-passau.de/%7Eramsch/iso8859-1.html)

FORMS
Define Form | <FORM ACTION="URL" METHOD=GET|POST></FORM>
4.0* | File Upload | <FORM ENCTYPE="multipart/form-data"></FORM>
Input Field <INPUT TYPE="TEXT|PASSWORD|CHECKBOX|RADIO|
FILE|BUTTON|IMAGE|HIDDEN|SUBMIT|RESET">
Field Name | <INPUT NAME="***">
Field Value | <INPUT VALUE="***">
Checked? | <INPUT CHECKED> | (checkboxes and radio boxes)
Field Size | <INPUT SIZE=?> | (in characters)
Max Length | <INPUT MAXLENGTH=?> | (in characters)
4.0 | Button | <BUTTON></BUTTON>
4.0 | Button Name | <BUTTON NAME="***"></BUTTON>
4.0 | Button Type | <BUTTON TYPE="SUBMIT|RESET|BUTTON"></BUTTON>
4.0 | Default Value | <BUTTON VALUE="***"></BUTTON>
4.0 | Label | <LABEL></LABEL>
4.0 | Item Labelled | <LABEL FOR="***"></LABEL>
Selection List | <SELECT></SELECT>
Name of List | <SELECT NAME="***"></SELECT>
# of Options | <SELECT SIZE=?></SELECT>
Multiple Choice | <SELECT MULTIPLE> | (can select more than one)
Option | <OPTION> | (items that can be selected)
Default Option | <OPTION SELECTED>
Option Value | <OPTION VALUE="***">
4.0 | Option Group | <OPTGROUP LABEL="***"></OPTGROUP>
Input Box Size | <TEXTAREA ROWS=? COLS=?></TEXTAREA>
Name of Box | <TEXTAREA NAME="***"></TEXTAREA>
N2 | Wrap Text | <TEXTAREA WRAP=OFF|HARD|SOFT></TEXTAREA>
4.0 | Group elements | <FIELDSET></FIELDSET>
4.0 | Legend | <LEGEND></LEGEND> | (caption for fieldsets)
4.0 | Alignment | <LEGEND ALIGN="TOP|BOTTOM|LEFT|RIGHT"></LEGEND>

TABLES
Define Table | <TABLE></TABLE>
4.0* | Table Alignment | <TABLE ALIGN=LEFT|RIGHT|CENTER>
Table Border | <TABLE BORDER></TABLE> | (either on or off)
Table Border | <TABLE BORDER=?></TABLE> | (you can set the value)
Cell Spacing | <TABLE CELLSPACING=?>
Cell Padding | <TABLE CELLPADDING=?>
Desired Width | <TABLE WIDTH=?> | (in pixels)
Width Percent | <TABLE WIDTH=%> | (percentage of page)
4.0* | Table Color | <TABLE BGCOLOR="$$$$$$"></TABLE>
4.0 Table Frame <TABLE FRAME=VOID|ABOVE|BELOW|HSIDES|LHS|RHS|
VSIDES|BOX|BORDER></TABLE>
4.0 | Table Rules | <TABLE RULES=NONE|GROUPS|ROWS|COLS|ALL></TABLE>
MS | Border Color | <TABLE BORDERCOLOR="$$$$$$"></TABLE>
MS | Dark Border | <TABLE BORDERCOLORDARK="$$$$$$"></TABLE>
MS | Light Border | <TABLE BORDERCOLORLIGHT="$$$$$$"></TABLE>
Table Row | <TR></TR>
Alignment | <TR ALIGN=LEFT|RIGHT|CENTER|MIDDLE|BOTTOM>
Table Cell | <TD></TD> | (must appear within table rows)
Alignment | <TD ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM>
No linebreaks | <TD NOWRAP>
Columns to Span | <TD COLSPAN=?>
Rows to Span | <TD ROWSPAN=?>
4.0* | Desired Width | <TD WIDTH=?> | (in pixels)
N3 | Width Percent | <TD WIDTH="%"> | (percentage of table)
4.0* | Cell Color | <TD BGCOLOR="#$$$$$$">
Header Cell | <TH></TH> | (same as data, except bold centered)
Alignment | <TH ALIGN=LEFT|RIGHT|CENTER|MIDDLE|BOTTOM>
No Linebreaks | <TH NOWRAP>
Columns to Span | <TH COLSPAN=?>
Rows to Span | <TH ROWSPAN=?>
4.0* | Desired Width | <TH WIDTH=?> | (in pixels)
N3 | Width Percent | <TH WIDTH="%"> | (percentage of table)
4.0* | Cell Color | <TH BGCOLOR="#$$$$$$">
4.0 | Table Body | <TBODY>
4.0 | Table Footer | <TFOOT></TFOOT> | (must come before THEAD>
4.0 | Table Header | <THEAD></THEAD>
Table Caption | <CAPTION></CAPTION>
Alignment | <CAPTION ALIGN=TOP|BOTTOM|LEFT|RIGHT>
4.0 | Column | <COL></COL> | (groups column attributes)
4.0 | Columns Spanned | <COL SPAN=?></COL>
4.0 | Column Width | <COL WIDTH=?></COL>
4.0 | Width Percent | <COL WIDTH="%"></COL>
4.0 | Group columns | <COLGROUP></COLGROUP> | (groups column structure)
4.0 | Columns Spanned | <COLGROUP SPAN=?></COLGROUP>
4.0 | Group Width | <COLGROUP WIDTH=?></COLGROUP>
4.0 | Width Percent | <COLGROUP WIDTH="%"></COLGROUP>

FRAMES
4.0* | Frame Document | <FRAMESET></FRAMESET> | (instead of <BODY>)
4.0* | Row Heights | <FRAMESET ROWS=,,,></FRAMESET> | (pixels or %)
4.0* | Row Heights | <FRAMESET ROWS=*></FRAMESET> | (* = relative size)
4.0* | Column Widths | <FRAMESET COLS=,,,></FRAMESET> | (pixels or %)
4.0* | Column Widths | <FRAMESET COLS=*></FRAMESET> | (* = relative size)
4.0* | Borders | <FRAMESET FRAMEBORDER="yes|no"></FRAMESET>
4.0* | Border Width | <FRAMESET BORDER=?></FRAMESET> |
4.0* | Border Color | <FRAMESET BORDERCOLOR="#$$$$$$"></FRAMESET>
N3 | Frame Spacing | <FRAMESET FRAMESPACING=?></FRAMESET> |
4.0* | Define Frame | <FRAME> | (contents of an individual frame)
4.0* | Display Document | <FRAME SRC="URL"> |
4.0* | Frame Name | <FRAME NAME="***"|_blank|_self|_parent|_top>
4.0* | Margin Width | <FRAME MARGINWIDTH=?> | (left and right margins)
4.0* | Margin Height | <FRAME MARGINHEIGHT=?> | (top and bottom margins)
4.0* | Scrollbar? | <FRAME SCROLLING="YES|NO|AUTO"> |
4.0* | Not Resizable | <FRAME NORESIZE> |
4.0* | Borders | <FRAME FRAMEBORDER="yes|no"> |
4.0* | Border Color | <FRAME BORDERCOLOR="#$$$$$$"> |
4.0* | Unframed Content | <NOFRAMES></NOFRAMES> | (for non-frames browsers)
4.0 | Inline Frame | <IFRAME></IFRAME> | (takes same attributes as FRAME)
4.0 | Dimensions | <IFRAME WIDTH=? HEIGHT=?></IFRAME> |
4.0 | Dimensions | <IFRAME WIDTH="%" HEIGHT="%"></IFRAME> |

SCRIPTS AND JAVA
 | Script | <SCRIPT></SCRIPT> |
 | Location | <SCRIPT SRC="URL"></SCRIPT> |
 | Type | <SCRIPT TYPE="***"></SCRIPT> |
 | Language | <SCRIPT LANGUAGE="***"></SCRIPT> |
4.0* | Other Content | <NOSCRIPT></NOSCRIPT> | (if scripts not supported)
 | Applet | <APPLET></APPLET> |
 | File Name | <APPLET CODE="***"> |
 | Parameters | <APPLET PARAM NAME="***"> |
 | Location | <APPLET CODEBASE="URL"> |
 | Identifier | <APPLET NAME="***"> | (for references)
 | Alt Text | <APPLET ALT="***"> | (for non-Java browsers)
 | Alignment | <APPLET ALIGN="LEFT|RIGHT|CENTER"> |
 | Size | <APPLET WIDTH=? HEIGHT=?> | (in pixels)
 | Spacing | <APPLET HSPACE=? VSPACE=?> | (in pixels)
N4 | Server Script | <SERVER></SERVER> |

MISCELLANEOUS
 | Comment | <!-- *** --> | (not displayed by the browser)
 | Prologue | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
 | Searchable | <ISINDEX> | (indicates a searchable index)
 | Prompt | <ISINDEX PROMPT="***"> | (text to prompt input)
 | Send Search | <A HREF="URL?***"></a> | (use a real question mark)
 | URL of This File | <BASE HREF="URL"> | (must be in header)
4.0* | Base Window Name | <BASE TARGET="***"> | (must be in header)
 | Relationship | <LINK REV="***" REL="***" HREF="URL"> | (in header)
N4 | Linked File | <LINK TYPE="***" SRC="***"></LINK> |
 | Meta Information | <META> | (must be in header)
 | Style Sheets | <STYLE></STYLE> | (implementations vary)
4.0 | Bidirect Off | <BDO DIR=LTR|RTL></BDO> | (for certain character sets)

Copyright ©1995-2000 Kevin Werbach. Redistribution is permitted, so long as there is no charge and this document is included without alteration in its entirety. This Guide is not a product of Bare Bones Software. More information is available at http://werbach.com/barebones.
Valid HTML 4.0!

Intro | Notes

So, you want to make a Web Page!


+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ T H E B A R E B O N E S G U I D E T O H T M L by Kevin Werbach Version 4.0 -- January 1999 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ This document is available at , where you will also find the HTML formatted version, translations, and background materials. The Bare Bones Guide to HTML lists all the tags that current browsers are likely to recognize. I have included all the elements in the official HTML 4.0 recommendation with common attributes, as well as Netscape and Microsoft extensions. This document is a quick reference, not a complete specification; for official information about HTML and its development, see the World Wide Web Consortium site at . The Guide is designed to be as concise as possible, and therefore it doesn't go into any detail about how to use the various tags. For links to some good step-by-step HTML guides, see . FORMATTING OF THIS DOCUMENT ---------------------------------------------------------------------------- This document looks best displayed in a monospaced font. For clarity, I have separated out tag attributes onto separate lines. Generally, multiple attributes can be applied to the same tag. Tags are listed in upper case for ease of reading, although most tags are not case sensitive. SYMBOLS USED ---------------------------------------------------------------------------- URL URL of an external file (or just file name if in the same directory) ? Arbitrary number (i.e. means

,

,

, etc.) % Arbitrary percentage (i.e.
means
, etc.) *** Arbitrary text (i.e. ALT="***" means fill in with text) $$$$$$ Arbitrary hex (i.e. BGCOLOR="#$$$$$$" means BGCOLOR="#00FF1C", etc.) ::: Arbitrary date (i.e. DATETIME=":::" means "1994-11-05T08:15:30" etc.) @ Email address (i.e. "mailto:@" means "mailto:kevin@werbach.com" etc.) ,,, Comma-delimited (i.e. COORDS=",,," means COORDS="0,0,50,50", etc.) | Alternatives (i.e. ALIGN=LEFT|RIGHT|CENTER means pick one of these) COMPATIBILITY (remember, HTML is evolving and browser implementations vary) ---------------------------------------------------------------------------- (no notation) In the HTML 3.2 spec.; should work on all browsers 4.0 Introduced in HTML 4.0 recommendation N1 Netscape extension introduced with Navigator version 1.0 or 1.1 N2 Netscape extension introduced with Navigator version 2.0 N3 Netscape extension introduced with Navigator version 3.0 N4 Netscape extension introduced with Navigator/Communicator version 4.0 MS Microsoft Internet Explorer extension * Netscape extension now included in the HTML 4.0 specification =========================================================================== =========================================================================== GENERAL (all HTML documents should have these) ---------------------------------------------------------------------------- Document Type (beginning and end of file) Title (must be in header) Header (descriptive info, such as title) Body (bulk of the page) STRUCTURAL DEFINITION (appearance controlled by the browser's preferences) ---------------------------------------------------------------------------- Heading (the spec. defines 6 levels) Align Heading Division
Align Division
4.0 Defined Content Block Quote
(usually indented) 4.0 Quote (for short quotations) 4.0 Citation Emphasis (usually displayed as italic) Strong Emphasis (usually displayed as bold) Citation (usually italics) Code (for source code listings) Sample Output Keyboard Input Variable Definition (not widely implemented) Author's Address
Large Font Size Small Font Size 4.0 Insert (marks additions in a new version) 4.0 Time of Change 4.0 Comments 4.0 Delete (marks deletions in a new version) 4.0 Time of Change 4.0 Comments 4.0 Acronym 4.0 Abbreviation PRESENTATION FORMATTING (author specifies text appearance) ---------------------------------------------------------------------------- Bold Italic 4.0* Underline (not widely implemented) Strikeout (not widely implemented) 4.0* Strikeout (not widely implemented) Subscript Superscript Typewriter (displays in a monospaced font) Preformatted
        (display text spacing as-is)
         Width
   (in characters)
       Center
  (for both text and images)
N1     Blinking             (the most derided tag ever)
       Font Size               (ranges from 1-7)
         Change Font Size
         Font Color
4.0*     Select Font
N4       Point size
N4       Weight
4.0*   Base Font Size     (from 1-7; default is 3)
MS     Marquee

POSITIONING
----------------------------------------------------------------------------

N3     Multi-Column
N3       Column Gutter
N3       Column Width
N3     Spacer
N3       Spacer Type
N3       Size
N3       Dimensions
N3       Alignment
N4     Layer
N4       Name
N4       Location
N4       Rel. Position
N4       Source File
N4       Stacking
N4       Stack Position
N4       Dimensions
N4       Clipping Path
N4       Visible?
N4       Background
N4       Color
N4     Inline Layer        (takes same attributes as LAYER)
N4     Alt. Content

LINKS, GRAPHICS, AND SOUNDS
----------------------------------------------------------------------------
       Link Something
         Link to Location   (if in another document)
                               (if in current document)
4.0*     Target Window
4.0*     Action on Click        (Javascript)
4.0*     Mouseover Action   (Javascript)
4.0*     Mouse out Action    (Javascript)
       Link to Email
         Specify subject   (use a real ?)
       Define Location
       Display Image
         Alignment
N1       Alignment
         Alternate          ***  (if image not displayed)
         Dimensions                (in pixels)
                               (as percentage)
         Border                            (in pixels)
         Runaround Space          (in pixels)
N1       Low-Res Proxy
         Imagemap                (requires a script)
         Imagemap
MS       Movie Clip
MS     Background Sound
       Client-Side Map     (describes the map)
       Map Section
N1     Client Pull
N2     Embed Object        (insert object into page)
N2       Object Size
4.0    Object
4.0      Parameters

DIVIDERS
----------------------------------------------------------------------------
       Paragraph
            (closing tag often unnecessary)
         Align Text

N        Justify Text

       Line Break
               (a single carriage return)
         Clear Textwrap

       Horizontal Rule

         Alignment

         Thickness
      (in pixels)
         Width
     (in pixels)
         Width Percent
     (as a percentage of page width)
        Solid Line
      (without the 3D cutout look)
N1     No Break                (prevents line breaks)
N1     Word Break                     (where to break a line if needed)

LISTS  (lists can be nested)
-----------------------------------------------------------------------------
       Unordered List
      (
  •  before each list item)
         Compact

         Bullet Type
          (for the whole list)

      •   (this & subsequent)
       Ordered List
              (
      •  before each list item)
         Compact

         Numbering Type
                  (for the whole list)

          1.       (this & subsequent)
         Starting Number
                           (for the whole list)

            1.              (this & subsequent)
       Definition List
                (
              =term,
              =definition)
         Compact

       Menu List
            2.   (
            3.  before each list item)
         Compact
       Directory List
            4.     (
            5.  before each list item)
         Compact

BACKGROUNDS AND COLORS
----------------------------------------------------------------------------
       Tiled Bkground
MS       Watermark
       Bkground Color    (order is red/green/blue)
         Text Color
         Link Color
         Visited Link
         Active Link
(More info at )

SPECIAL CHARACTERS  (these must all be in lower case)
----------------------------------------------------------------------------
       Special Character &#?;            (where ? is the ISO 8859-1 code)
       <                 <
       >                 >
       &                 &
       "                 "
       Registered TM     ®
       Registered TM     ®
       Copyright         ©
       Copyright         ©
       Non-Breaking Spc
(Complete list at )

FORMS  (generally require a script on your server)
----------------------------------------------------------------------------
       Define Form

4.0*     File Upload

       Input Field
         Field Name
         Field Value
         Checked?           (checkboxes and radio boxes)
         Field Size              (in characters)
         Max Length         (in characters)
4.0    Button
4.0      Button Name
4.0      Button Type
4.0      Default Value
4.0    Label
4.0      Item Labelled
       Selection List
         Name of List
         # of Options
         Multiple Choice
         Name of Box
N2       Wrap Text
4.0    Group elements

4.0    Legend                (caption for fieldsets)
4.0      Alignment

TABLES
----------------------------------------------------------------------------
       Define Table

4.0*     Table Alignment
         Table Border
                  (either on or off)
         Table Border
                (you can set the value)
         Cell Spacing
         Cell Padding

         Desired Width
                         (in pixels)
         Width Percent
                         (percentage of page)
4.0*     Table Color

4.0      Table Frame

4.0      Table Rules

MS       Border Color

MS       Dark Border

MS       Light Border

       Table Row
         Alignment
       Table Cell                  (must appear within table rows)
         Alignment
         No linebreaks
         Columns to Span
         Rows to Span
4.0*     Desired Width         (in pixels)
N3       Width Percent         (percentage of table)
4.0*     Cell Color
       Header Cell            (same as data, except bold centered)
         Alignment
         No Linebreaks
         Columns to Span
         Rows to Span
4.0*     Desired Width         (in pixels)
N3       Width Percent         (percentage of table)
4.0*     Cell Color
4.0    Table Body
4.0    Table Footer         (must come before THEAD>
4.0    Table Header
       Table Caption
         Alignment
4.0    Column                   (groups column attributes)
4.0      Columns Spanned
4.0      Column Width
4.0      Width Percent
4.0    Group columns       (groups column structure)
4.0      Columns Spanned
4.0      Group Width
4.0      Width Percent

FRAMES  (define and manipulate specific regions of the screen)
----------------------------------------------------------------------------
4.0*   Frame Document                (instead of )
4.0*     Row Heights              (pixels or %)
4.0*     Row Heights          (* = relative size)
4.0*     Column Widths            (pixels or %)
4.0*     Column Widths        (* = relative size)
4.0*     Borders
4.0*     Border Width
4.0*     Border Color
N3       Frame Spacing
4.0*   Define Frame                 (contents of an individual frame)
4.0*     Display Document
4.0*     Frame Name
4.0*     Margin Width          (left and right margins)
4.0*     Margin Height        (top and bottom margins)
4.0*     Scrollbar?
4.0*     Not Resizable
4.0*     Borders
4.0*     Border Color
4.0*   Unframed Content        (for non-frames browsers)
4.0    Inline Frame       (takes same attributes as FRAME)
4.0      Dimensions
4.0      Dimensions

SCRIPTS AND JAVA
----------------------------------------------------------------------------
       Script
         Location
         Type
         Language
4.0*   Other Content        (if scripts not supported)
       Applet
         File Name
         Parameters
         Location
          Identifier              (for references)
         Alt Text                  (for non-Java browsers)
         Alignment
         Size               (in pixels)
         Spacing           (in pixels)
N4     Server Script

MISCELLANEOUS
----------------------------------------------------------------------------
       Comment                 (not displayed by the browser)
       Prologue
       Searchable                 (indicates a searchable index)
         Prompt               (text to prompt input)
       Send Search        (use a real question mark)
       URL of This File   (must be in header)
4.0*   Base Window Name (must be in header)
       Relationship       (in header)
N4     Linked File
       Meta Information              (must be in header)
       Style Sheets         (implementations vary)
4.0    Bidirect Off      (for certain character sets)

============================================================================
Copyright (c) 1995-1999 Kevin Werbach.  Redistribution is permitted, so long
as there is no charge and this document is included without alteration in
its entirety.  This Guide is not a product of Bare Bones Software.  More
information is available at .


216 Color Chart

 So, you want to make a Web Page!
WEB SAFE COLOR CHART
This file is 41Kb and fairly complicated for the browser to display, so give it a few seconds to load.

Netscape's 216 colors:
For a GIF image of the 216 color chart click here.
For an explanation of where all these colors come from, go here.

330000 | 333300 | 336600 | 339900 | 33CC00 | 33FF00 | 66FF00 | 66CC00 | 669900 | 666600 | 663300 | 660000 | FF0000 | FF3300 | FF6600 | FF9900 | FFCC00 | FFFF00
330033 | 333333 | 336633 | 339933 | 33CC33 | 33FF33 | 66FF33 | 66CC33 | 669933 | 666633 | 663333 | 660033 | FF0033 | FF3333 | FF6633 | FF9933 | FFCC33 | FFFF33
330066 | 333366 | 336666 | 339966 | 33CC66 | 33FF66 | 66FF66 | 66CC66 | 669966 | 666666 | 663366 | 660066 | FF0066 | FF3366 | FF6666 | FF9966 | FFCC66 | FFFF66
330099 | 333399 | 336699 | 339999 | 33CC99 | 33FF99 | 66FF99 | 66CC99 | 669999 | 666699 | 663399 | 660099 | FF0099 | FF3399 | FF6699 | FF9999 | FFCC99 | FFFF99
3300CC | 3333CC | 3366CC | 3399CC | 33CCCC | 33FFCC | 66FFCC | 66CCCC | 6699CC | 6666CC | 6633CC | 6600CC | FF00CC | FF33CC | FF66CC | FF99CC | FFCCCC | FFFFCC
3300FF | 3333FF | 3366FF | 3399FF | 33CCFF | 33FFFF | 66FFFF | 66CCFF | 6699FF | 6666FF | 6633FF | 6600FF | FF00FF | FF33FF | FF66FF | FF99FF | FFCCFF | FFFFFF
0000FF | 0033FF | 0066FF | 0099FF | 00CCFF | 00FFFF | 99FFFF | 99CCFF | 9999FF | 9966FF | 9933FF | 9900FF | CC00FF | CC33FF | CC66FF | CC99FF | CCCCFF | CCFFFF
0000CC | 0033CC | 0066CC | 0099CC | 00CCCC | 00FFCC | 99FFCC | 99CCCC | 9999CC | 9966CC | 9933CC | 9900CC | CC00CC | CC33CC | CC66CC | CC99CC | CCCCCC | CCFFCC
000099 | 003399 | 006699 | 009999 | 00CC99 | 00FF99 | 99FF99 | 99CC99 | 999999 | 996699 | 993399 | 990099 | CC0099 | CC3399 | CC6699 | CC9999 | CCCC99 | CCFF99
000066 | 003366 | 006666 | 009966 | 00CC66 | 00FF66 | 99FF66 | 99CC66 | 999966 | 996666 | 993366 | 990066 | CC0066 | CC3366 | CC6666 | CC9966 | CCCC66 | CCFF66
000033 | 003333 | 006633 | 009933 | 00CC33 | 00FF33 | 99FF33 | 99CC33 | 999933 | 996633 | 993333 | 990033 | CC0033 | CC3333 | CC6633 | CC9933 | CCCC33 | CCFF33
000000 | 003300 | 006600 | 009900 | 00CC00 | 00FF00 | 99FF00 | 99CC00 | 999900 | 996600 | 993300 | 990000 | CC0000 | CC3300 | CC6600 | CC9900 | CCCC00 | CCFF00

These are the grays:

000000 | 333333 | 666666 | 999999 | CCCCCC | FFFFFF

These are the closest (more or less) to the 16 basic Windows colors:

000000 | 000099 | 009900 | 009999 | 990000 | 990099 | 999900 | CCCCCC | 999999 | 0000FF | 00FF00 | 00FFFF | FF0000 | FF00FF | FFFF00 | FFFFFF

So, you want to make a Web Page!


Basic HTML Tutorial - About Files

a bit about FILES

On your computer, everything is stored as a file.
Every file has a file extension that tells the world what kind of a file it is.

file name ---> diary.txt <--- file extension

A file is simply a packet of information such as a picture or a document. If you want to organize your files and put them into nice neat little groups, you'd use some folders (or directories). Folders don't come with file extensions because because they're not files.

If your file extensions are not all showing, you can do the following to make them all magically appear...

Windows95 Windows98
  1. In any window (like the one above) click View.
  2. Click Folder Options...
  3. Click the View tab
  4. Click the circle for Hidden files/Show all files
  5. Click OK
  1. In any window (like the one above) click View.
  2. Click Options...
  3. Click the View tab
  4. Click Show all files
  5. Make sure the Hide MS-DOS File Extensions box is not checked.
  6. Click OK

.txt is a plain old text file;
.gif, .jpg and .bmp are image files;
.mpg and .avi are movie files;
.doc and .wri are formatted documents;
.exe is an application or program;
and .html or .htm are commonly known as HTML files. They are the backbone of Web Pages. You will be making a few very soon and you'll be surprised at how easy it is!

Now let's get back to the tutorial!

So, you want to make a Web Page!


Handy Dandy Font Viewer

 So, you want to make a Web Page!
Handy Dandy Font Viewer

The <FONT> tag gives us some flexibility in HTML page design. An interesting use of fonts can add a little zip to a page. This little widget will help you see how different fonts, at different sizes look through your browser.

Remember- a visitor to your page will be able to see your font choices only if they have that font installed on their computer. Remember also you can specify more than one font. This way you increase the probability that everyone will see your handiwork as you intended it to be seen.

Another thing to keep in mind are potential problems with font names. There is no clearinghouse for font names. You may have a font called KewlFont on your system that looks very nice. Someone down the street may make a font of naked lady sillouettes and call it KewlFont. Now let's suppose I have that naked lady font on my system and I look at your page and you've specified KewlFont. Well, all I would see is a bunch of naked ladies. Now, on one level, that's kinda cool. On another level it's a problem. So, be judicious in your use of fonts.

Open the Handy Dandy Font Viewer

FAQ: Can I somehow embed a font or force a download of my font so my visitors automatically get the font I'm using?
A: For all practical purposes... no. The only way that they will see the font you specify is if they have that font on their system. There are some emerging web technologies that actually do embed special fonts in a web page, but these are very rarely used, not very widely supported and generally a pain in the butt. You can always offer a simple link to your font. Your visitors can download & install it if they wish.

So, you want to make a Web Page!


Handy Dandy Font Viewer

Select a font: Or type one in:      bgcolor: text color:


Practice exercises - intro

Practice Exercises
A companion to the PageTutor lessons

I've always been a firm believer in the concept of "learn by doing". Knowledge ain't worth a hill of beans unless you can apply that knowledge in a practical way. The best way to do that is to practice what you've learned… take that knowledge and put it to real-world use. What you'll find here are practice exercises that will put to use what you've learned...

You will make a simple page from scratch and upload it to a server so it is viewable from the rest of the world. You'll then go on to make a few basic pages that will utilize some of the basic HTML knowledge you have acquired.

Again, I can't stress enough... your proficiency with HTML is directly proportional to the amount you practice authoring with it (and toying around with Composer, MSWord or Front Page is not HTML practice). So, that said, let's get a little practice...

Exercises - page 1 >>

So, you want to make a Web Page!


Practice exercises - part 1

Exercises So, you want to make a Web Page!

Exercise 1:
Make a simple page (the "My big ole bad page!" from Lesson 1 will do nicely). Now upload it to either your personal ISP space, the space you've rented on a server, or one of the free web hosts…

  • Geocities
  • Tripod
  • FortuneCity

(There are dozens of others floating around, but these are the biggies. All give you plenty of space plus lots of extras.)

Uploading your nifty new web page to a web server is often one of the more confusing tasks for the budding web author. There is no easy way to learn except to simply fumble though it the best you can. While the basic principle is the same, specific procedures can vary from person to person so instructions aimed at one person may actually confuse another. Still, some step by step instruction would be nice, even if it only covers most circumstances. I've put together a piece called Upload Your Pages. I'm pretty sure it will help you.

As I said, this is often a hurdle for people, so we're going to kick it hard and first while we've got the energy. Keep at it until you get it. The goal is to get the page (text only is fine for now) on the Internet and know the URL for it. Don't move on until you've tackled this exercise.

Exercise 2:
Got the page up? Good. Next task is to put an image in that page and get it uploaded as well. You can use one of the images out of the tutorial. The page with the image should be viewable on the Internet. Tackle this exercise before moving on to the next.

Exercise 3:
Make a page with a heading. Make the heading kinda large, bold, italic and center it across the top of the page...

Meet Jack

VIEW IT

Then add Jack...

Meet Jack
Jack
VIEW IT

Write a short paragraph or two telling a little about Jack. In your description, highlight something in italics...

Meet Jack
Jack
This is Jack. He's an odd little boy that just got an empty box for his birthday. He may look happy, but he's a little disappointed. Now he'll have to put a few things in the box.
VIEW IT

Using an unordered bulleted list, list the things that Jack would most like to put in the box...

Meet Jack
Jack
This is Jack. He's an odd little boy that just got an empty box for his birthday. He may look happy, but he's a little disappointed. Now he'll have to put a few things in the box.

Jack would really like...

  • Roller blades
  • Magic tricks
  • Anything Pokemon
  • A motorized Lego set
VIEW IT

<< Exercises - intro Exercises - page 2 >>

So, you want to make a Web Page!


Practice exercises - part 2

Add a link to toysrus.com and etoys.com.

Meet Jack
Jack
This is Jack. He's an odd little boy that just got an empty box for his birthday. He may look happy, but he's a little disappointed. Now he'll have to put a few things in the box.

Jack would really like...

  • Roller blades
  • Magic tricks
  • Anything Pokemon
  • A motorized Lego set

You can get all this (and more) at an online toy store. Two very popular ones are toysrus.com and eToys.

VIEW IT

Upload this page and Jack and make sure the image shows up and the links work as expected.

Add a horizontal line and a little copyright statement. From the listing of special characters find the code for the copyright symbol and insert it as shown (Use slightly smaller text for this line). Insert your name in place of "John Q. Webmaster" and make it an email link to you. Make sure it works and actually sends email to you...

Meet Jack
Jack
This is Jack. He's an odd little boy that just got an empty box for his birthday. He may look happy, but he's a little disappointed. Now he'll have to put a few things in the box.

Jack would really like...

  • Roller blades
  • Magic tricks
  • Anything Pokemon
  • A motorized Lego set

You can get all this (and more) at an online toy store. Two very popular ones are toysrus.com and eToys.

© 2000 John Q. Webmaster. All rights reserved.
VIEW IT

As a finishing touch, add a counter. Quite often, whoever is hosting your pages (be it your Internet Service Provider, a paid web hosting company, or a free web host) will have a free counter available for your use. Alternatively, there are many third parties that offer free counters and even full blown statistical services. For our purposes though, a simple counter will suffice. You can pick one up quickly and easily at fastcounter. Installing the counter is a simple matter of inserting a snippet of code into your page. Just follow the instructions they provide. It's very simple...

Meet Jack
Jack
This is Jack. He's an odd little boy that just got an empty box for his birthday. He may look happy, but he's a little disappointed. Now he'll have to put a few things in the box.

Jack would really like...

  • Roller blades
  • Magic tricks
  • Anything Pokemon
  • A motorized Lego set

You can get all this (and more) at an online toy store. Two very popular ones are toysrus.com and eToys.

© 2000 John Q. Webmaster. All rights reserved.
VIEW IT

And that's it for that exercise. Upload the page, make sure everything looks right and works as expected. Pat yourself on the back... ya done good!

<< Exercises - page 1 Exercises - page 3 >>

So, you want to make a Web Page!


Practice exercises - part 3

Exercise 4:
Next we'll post a simple online resume. It's good layout practice. Start with your name, address and phone number. Use an alternate typeface such as Arial or Verdana...

John Q. Smith
10255 Billings Road, Waxahachie TX 75165
972-555-8643

VIEW IT

Using a definition list as a basic layout tool, list an Objective and your Experience...

John Q. Smith
10255 Billings Road, Waxahachie TX 75165
972-555-8643

Objective
A management position in a leading family resaurant chain.
Experience
1997-present
Senior Assistant Manager, Great Steaks Steakhouse. Duties include all operational tasks, personnel, ordering and all local advertising and promotional events. Due to extensive local promotion and community involvement, our store's regional sales volume rank has increased from 11 to number 1 and profit margins have increased by 22%.
1994-1997
Line cook and eventual crew chief at Pablo's Mexican restaurant.
1992-1994
Mays department store, sales clerk.
VIEW IT

Lastly add Education and Interests...

John Q. Smith
10255 Billings Road, Waxahachie TX 75165
972-555-8643

Objective
A management position in a leading family resaurant chain.
Experience
1997-present
Senior Assistant Manager, Great Steaks Steakhouse. Duties include all operational tasks, personnel, ordering and all local advertising and promotional events. Due to extensive local promotion and community involvement, our store's regional sales volume rank has increased from 11 to number 1 and profit margins have increased by 22%.
1994-1997
Line cook and eventual crew chief at Pablo's Mexican restaurant.
1992-1994
Mays department store, sales clerk.
Education
1992-1996
B.A. Business Administration and Food Service Management from Central Texas University
1992
Valedictorian - West End high School
Interests
Big Brothers of Texas, white water rafting, personal computers, primitive camping, gourmet cooking.
VIEW IT

And that's it! Upload it and you're done.

<< Exercises - page 2 Exercises - page 4 >>

So, you want to make a Web Page!


Practice exercises - part 4

Exercise 5:
Choose one of the following animals...

  • Alligator
  • Giant Panda
  • Toucan
  • Portuguese Man-of-War
  • Dodo Bird

...and write a brief page on it. Include a couple headings, modest description, hunt down a couple pictures and include a few links to other relevant web sites. Find a nice background image and alter the text and link colors a little if you wish. At the bottom of the page include an email image link to back to yourself... find one of those cheesy little folding envelope animations or whip something up yourself. Place all the images in a sub-directory named "images". Re-create this sub-directory at your server, upload everything and test to make sure all is working as expected.

I know I take a little liberty with you when I suggest "finding" this or "hunting down" that. Understand that part of your web authoring experience will include tapping into the enormous resources available on the Internet. Learning how to look around for things will greatly add to your ability. While much of what you will find is public domain or completely free for the taking, some artwork comes with conditions for re-use, and a few folks would rather you not use their stuff at all. As part of your training, I want you to get a little experience tracking down a particular something that you need… like a nice background image or an image of a Dodo Bird. One source of leads is PageTutor's Web Resources section. There you will find links to many types of resources on the Internet.

<< Exercises - page 3

So, you want to make a Web Page!


Frequently Asked Questions

FAQs presented/answered in these tutorials

So, you want to make a Web Page!

  • What the heck is Notepad and where do I get it?
  • I've seen pages where the background is fixed and the page just scrolls over it. How can I do that?
  • How do I find out the WIDTH and HEIGHT of an image?
  • As soon as I upload my stuff to the Web, all my image links are broken. I used relative URLs and I definitely uploaded them because I can see them there with my FTP program. What gives?
  • How can I specify a Subject for my email message?
  • How can I get rid of the underline in my links?
  • How do you get rid of that ugly blue border around an image link?
  • How do I link to a _____ file so people can download it?
  • How do I make a link open in a new browser window?
  • In Netscape my image links have these little blue dashes next to them. Also I keep getting spaces between them and I want them to be flush up against each other. I don't understand... it works right in Explorer.
  • Can you recommend any good free HTML editors?
  • Can I somehow embed a font or force a download of my font so my visitors automatically get the font I'm using?
  • OK, I made my page. Now how do I get it onto the Internet?

Excellent HTML FAQs on the Web
FAQ = Frequently Asked Question

Web Design Group - Web Authoring FAQ

irt.org HTML FAQ

Scott Brady's "Unofficial" Official alt.html FAQ

John Gann's Just the FAQs please

Also learn to use the Power Search at DejaNews. DejaNews (or Deja.com as they call themselves now) is a storehouse of all past USENET (newsgroups) discussions. Any question you may have about web page authoring has almost definitely been discussed before in alt.html and a handful of other similar groups. Do a little searching and you'll find information on pert near anything.

So, you want to make a Web Page!


Basic HTML Tutorial - Fixed background

 FIXED BACKGROUND EXAMPLE - This effect is Internet Explorer specific. Unless you're using Explorer (or one of it's variations) you'll just get a regular background.

In CONGRESS, July 4, 1776,

The Unanimous Declaration Of The Thirteen United States Of America

When in the Course of human events, it becomes necessary for one people to dissolve the political bands which have connected them with another, and to assume among the Powers of the earth, the separate and equal station to which the Laws of Nature and of Nature's God entitle them, a decent respect to the opinions of mankind requires that they should declare the causes which impel them to the separation.

We hold these truths to be self-evident, that all men are created equal, that they are endowed by their Creator with certain unalienable Rights, that among these are Life, Liberty, and the pursuit of Happiness.

That to secure these rights, Governments are instituted among Men, deriving their just powers from the consent of the governed.

That whenever any Form of Government becomes destructive of these ends, it is the Right of the People to alter or to abolish it, and to institute new Government, laying its foundation on such principles and organizing its powers in such form, as to them shall seem most likely to effect their Safety and Happiness. Prudence, indeed, will dictate that Governments long established should not be changed for light and transient causes; and accordingly all experience hath shown, that mankind are more disposed to suffer, while evils are sufferable, than to right themselves by abolishing the forms to which they are accustomed. But when a long train of abuses and usurpations, pursuing invariably the same Object, evinces a design to reduce them under absolute Despotism, it is their right, it is their duty, to throw off such Government, and to provide new Guards for their future security.

Such has been the patient sufferance of these Colonies; and such is now the necessity which constrains them to alter their former Systems of Government. The history of the present King of Great Britain is a history of repeated injuries and usurpations, all having in direct object the establishment of an absolute Tyranny over these States. To prove this, let Facts be submitted to a candid world.

He has refused his Assent to Laws, the most wholesome and necessary for the public good.

He has forbidden his Governors to pass Laws of immediate and pressing importance, unless suspended in their operation till his Assent should be obtained; and when so suspended, he has utterly neglected to attend to them.

He has refused to pass other Laws for the accommodation of large districts of people, unless those people would relinquish the right of Representation in the Legislature, a right inestimable to them and formidable to tyrants only.

He has called together legislative bodies at places unusual, uncomfortable, and distant from the depository of their public Records, for the sole purpose of fatiguing them into compliance with his measures.

He has dissolved Representative Houses repeatedly, for opposing with manly firmness his invasions on the rights of the people.

He has refused for a long time, after such dissolutions, to cause others to be elected; whereby the Legislative powers, incapable of Annihilation, have returned to the People at large for their exercise; the State remaining in the mean time exposed to all the dangers of invasion from without, and convulsions within.

He has endeavoured to prevent the population of these States; for that purpose obstructing the Laws of Naturalization of Foreigners; refusing to pass others to encourage their migrations hither, and raising the conditions of new Appropriations of Lands.

He has obstructed the Administration of Justice, by refusing his Assent to Laws for establishing Judiciary powers.

He has made Judges dependent on his Will alone, for the tenure of their offices, and the amount and payment of their salaries.

He has erected a multitude of New Offices, and sent hither swarms of Officers to harass our People, and eat out their substance.

He has kept among us, in times of peace, Standing Armies without the Consent of our legislatures.

He has affected to render the Military independent of and superior to the Civil power.

He has combined with others to subject us to a jurisdiction foreign to our constitution, and unacknowledged by our laws; giving his Assent to their Acts of pretended Legislation:

For quartering large bodies of armed troops among us:

For protecting them, by a mock Trial, from Punishment for any Murders which they should commit on the Inhabitants of these States:

For cutting off our Trade with all parts of the world:

For imposing Taxes on us without our Consent:

For depriving us in many cases, of the benefits of Trial by Jury:

For transporting us beyond Seas to be tried for pretended offences:

For abolishing the free System of English Laws in a neighbouring Province, establishing therein an Arbitrary government, and enlarging its Boundaries so as to render it at once an example and fit instrument for introducing the same absolute rule into these Colonies:

For taking away our Charters, abolishing our most valuable Laws, and altering fundamentally the Forms of our Governments:

For suspending our own Legislatures, and declaring themselves invested with power to legislate for us in all cases whatsoever.

He has abdicated Government here, by declaring us out of his Protection and waging War against us.

He has plundered our seas, ravaged our Coasts, burnt our towns, and destroyed the Lives of our people.

He is at this time transporting large armies of foreign mercenaries to compleat the works of death, desolation and tyranny, already begun with circumstances of Cruelty & perfidy scarcely paralleled in the most barbarous ages, and totally unworthy the Head of a civilized nation.

He has constrained our fellow Citizens taken Captive on the high Seas to bear Arms against their Country, to become the executioners of their friends and Brethren, or to fall themselves by their Hands.

He has excited domestic insurrections amongst us, and has endeavoured to bring on the inhabitants of our frontiers, the merciless Indian Savages, whose known rule of warfare, is an undistinguished destruction of all ages, sexes and conditions.

In every stage of these Oppressions We have Petitioned for Redress in the most humble terms: Our repeated Petitions have been answered only by repeated injury. A Prince, whose character is thus marked by every act which may define a Tyrant, is unfit to be the ruler of a free people.

Nor have We been wanting in attention to our British brethren. We have warned them from time to time of attempts by their legislature to extend an unwarrantable jurisdiction over us. We have reminded them of the circumstances of our emigration and settlement here. We have appealed to their native justice and magnanimity, and we have conjured them by the ties of our common kindred to disavow these usurpations, which would inevitably interrupt our connections and correspondence. They too have been deaf to the voice of justice and of consanguinity. We must, therefore, acquiesce in the necessity, which denounces our Separation, and hold them, as we hold the rest of mankind, Enemies in War, in Peace Friends.

We, therefore, the Representatives of the united States of America, in General Congress, Assembled, appealing to the Supreme Judge of the world for the rectitude of our intentions, do, in the Name, and by Authority of the good People of these Colonies, solemnly publish and declare, That these United Colonies are, and of Right ought to be Free and Independent States; that they are Absolved from all Allegiance to the British Crown, and that all political connection between them and the State of Great Britain, is and ought to be totally dissolved; and that as Free and Independent States, they have full Power to levy War, conclude Peace, contract Alliances, establish Commerce, and to do all other Acts and Things which Independent States may of right do. And for the support of this Declaration, with a firm reliance on the Protection of Divine Providence, we mutually pledge to each other our Lives, our Fortunes and our sacred Honor.

John Hancock

New Hampshire
Josiah Bartlett
William Whipple
Mathew W. Thornton

Massachusetts-Bay
Samule Adams
John Adams
Robert Treat Paine
Elbridge Gerry

Rhode Island
Stephen Hopkins
William Ellery

Connecticut
Roger Sherman
Samuel Huntington
William Williams
Oliver Wolcott

Georgia
Button Gwinnett
Lyman Hall
Geo. Walton

Maryland
Samuel Chase
William Paca
Thomas Stone
Charles Carroll Of Carrollton

Virginia
George Wythe
Richard Henry Lee
Thomas Jefferson
Benjamin Harrison
Thomas Nelson, Jr.
Francis Lightfoot Lee
Carter Braxton

New York
William Floyd
Philip Livingston
Francis Lewis
Lewis Morris

Pennsylvania
Robert Morris
Benjamin Rush
Benjamin Franklin
John Morton
George Clymer
James Smith
George Taylor
James Wilson
George Ross

Delaware
Caesar Rodney
George Read
Thomas M'Kean

North Carolina
William Hooper
Joseph Hewes
John Penn

South Carolina
Edward Rutledge
Thomas Heyward, Jr.
Thomas Lynch, Jr.
Arthur Middleton

New Jersey
Richard Stockton
John Witherspoon
Francis Hopkins
John Hart
Abraham Clark

So, you want to make a Web Page!


Internet Hyper-Glossary
This piece originally appeared on Windows95.com
(which became WinFiles.com which was assimilated by CNet/Download.com)

To help those of you who are wondering what all those acronyms and funny-sounding words used by "computer types" really mean when they talk about the Internet, I've put together this simple glossary of common Internet terms. Some of the terms here may help you. As the Internet develops (and as more funny-sounding words are used), I'll be sure to keep this glossary up-to-date.

The glossary items are listed in alphabetical order, with hyperlinks embedded in the definitions. If there's an Internet term in a definition that you don't understand, you can probably link directly to another definition that explains it.

Acceptable Use Policy (AUP)
This refers to policies that restrict the way in which a network may be used. Usually, a network administrator makes and enforces decisions dealing with acceptable use.

Address
See either IP Address or Email Address.

Address Mask
The address mask is used to identify the parts of an IP address that correspond to the different sections (separated by dots). It's also known as the "subnet mask" since the network portion of an address can be determined by the encoding inherent in an IP address.

Advanced Research Projects Agency Network (ARPANET)
A pioneering long-haul network funded by what's now-called DARPA (formerly known as ARPA). It was the foundation on which the Internet was built.

Agent
The part of a system that performs information preparation and exchange on behalf of an application.

Alias
A type of nickname (usually short and easy to remember) that refers to a type of network resource. Aliases are used so you won't have to remember the long and difficult names typical of network resources.

Anonymous FTP
By using the word "anonymous" as your user ID and your email address as the password when you login to an FTP site, you can bypass local security checks and gain limited access to public files on the remote computer. This type of access is available on most FTP sites, but not all.

Application
Sometimes known as a client or an "app" it's a program that performs a specific function. FTP, Mail, Gopher, Mosaic, and Telnet clients are the most common examples of Internet applications.

Archie
You'll usually hear this term referred to in the phrase archie search. Archie is a way of automatically gathering, indexing and sometimes even retrieving files on the Internet. Most good archie clients are able to FTP files once you've found the information you're looking for.

Archive
A collection of files stored on an Internet machine. FTP sites are known as archives.

ARPANET
See Advanced Research Projects Agency Network.

Asynchronous Transfer Mode
A transfer method that dynamically allocates bandwidth using a fixed-size packet, or cell. Also known as fast packet.

ATM
See Asynchronous Transfer Mode.

AUP
See Acceptable Use Policy.

Authentication
Any process that ensures that users are who they say they are. When you type your name and password, you are authenticated and allowed access.

Bandwidth
This refers to the difference (measured in Hz), between the highest and lowest frequencies of a transmission. Most people loosely refer to bandwidth as the amount of data that can be transferred over a network connection.

BBS
See Bulletin Board System.

Berkeley lnternet Name Domain
An early version of a DNS server developed by the University of California at Berkeley. Most Internet hosts run a version of BIND.

Bitnet
An computer network devoted to academic use that provides email and file transfer services using a store-and-forward protocol. It is based on the IBM Network Job Entry protocols. A more recent version of Bitnet (known as Bitnet-II) encapsulates the Bitnet protocol within IP packets.

Bounce
If you send email and it fails to arrive at its intended recipient for any reason (incorrect user name, network failure, etc.), the message "bounces" and returns to you. The subject line in a bounced message usually says something like: Undeliverable Mail or Message Undeliverable.

BTW
Acronym meaning By The Way. Seen mostly in IRC sessions.

Bulletin Board System
A computer which typically provides email services, file archives, and announcements of interest to the bulletin board system's operator (known as a sysop). BBS's started out as hobbies for computer enthusiasts, and were mostly accessible by modem. Recently, however, more and more BBS's are being connected to the Internet.

CCIRN
See Coordinating Committee for Intercontinental Research Networks.

CCITR
See Comite Consultatif International de Telegraphique et Telephonique.

CERT
See Computer Emergency Response Team.

Challenge-Handshake Authentication Protocol (CHAP)
An authentication method that can be used when connecting to an Internet Service Provider. CHAP allows you to login to your provider automatically, without the need for a terminal screen. It is more secure than the Password Authentication Protocol (another widely used authentication method) since it does not send passwords in text format.

CHAP
See Challenge-Handshake Authentication Protocol.

Chat
Another term for IRC . Also, an acronym meaning Conversational Hypertext Access Technology.

CIX
An acronym meaning Commercial Internet Exchange.

Client
In Internet terms, it's an application that performs a specific function, such as Telnet or FTP. It's the front-end to an Internet process. In more general terms, a client is computer system or process that requests a service of another computer system or process. The much talked about client-server architecture refers to a workstation requesting the contents of a file from a server.

Comité Consultatif International de Telegraphique et Telephonique (CCITT)
French for International Telephone and Telegraph Advisory Council.. It's an organization that plays a major role in the United National International Telecommunications Union (ITU). The CCITT is responsible for making technical recommendations about communications systems worldwide. Every four years, CCITT updates the standards, most recently in 1996.

Computer Emergency Response Team (CERT)
The CERT was formed by DARPA in November 1988 in response to the Internet worm incident. CERT exists to facilitate Internet-wide response to computer security events involving Internet hosts and to conduct research targeted at improving the security of existing systems. They maintain an archive of security-related issues on their FTP server at ftp.cert.org, their email address is cert@cert.org, and their 24-hour telephone Hotline for reporting Internet security issues is (412) 268-7090.

Coordinating Committee for Intercontinental Research Networks (CCIRN)
A committee that provides a forum for North American and European network research organizations to cooperate and plan.

Corporation for Research and Educational Networking (CREN)
An organization formed in October 1989, when Bitnet and CSNET were combined. CSNET is no longer around, but CREN still operates Bitnet.

Cracker
Substantially different from hackers, crackers are users who try to gain illegal access to computers. They are usually malicious in their intentions.

Cyberspace
The world of computers and the society that gathers around them, as referred to by William Gibson in his fantasy novel Neuromancer. It now loosely refers to the online world and even more loosely to the Internet.

Data Encryption Key (DEK)
Much like an actual key used for locking and re-opening doors, DEKs are used for the encryption and decoding of message text, sometimes in the form of a digital signature.

Data Encryption Standard (DES)
A standardized encryption method widely used on the Internet.

Datagram
A block of data that is "smart" enough (actually, which carries enough information) to travel from one Internet site to another without having to rely on earlier exchanges between the source and destination computers (not to be confused with a Candygram).

DDN
See Defense Data Network.

DECnet
The proprietary network protocol designed by Digital Equipment Corporation.

Dedicated Line
A communications line that is used solely for computer connections. If you buy an additional phone line for your modem, that's a dedicated line. There are other types of dedicated lines (such as T3s and T1s) that are used for larger network entities.

Defense Data Network (DDN)
A global communications network that serves the US Department of Defense. It is made up of a network called MILNET, other portions of the Internet, and classified networks which are not part of the Internet. The DDN is used to connect military installations and is managed by the Defense Information Systems Agency. It was originally developed by DARPA.

Dialup
A widely-used method of accessing the Internet. A dialup connection uses regular phone lines to connect one computer to another via modem.

Distributed Computing Environment (DCE)
An architecture based on standard programming interfaces, conventions, and server functionalities used for distributing applications transparently across networks. The DCE is controlled and promoted by the Open Software Foundation (OSF), a consortium of vendors including DEC, IBM and Hewlett Packard.

DNS
See Domain Name Service.

Domain
A "logical" region of the Internet. People sometimes refer to them loosely as "sites." Generally, a domain corresponds to an IP address or an area on a host.

Domain Name System (DNS)
The DNS is a static, hierarchical name service used with TCP/IP hosts, and is housed on a number of servers on the Internet. Basically, it maintains a database for figuring out and finding (or resolving) host names and IP addresses on the Internet. This allows users to specify remote computers by host names rather than numerical IP addresses (if you've used UNIX, you may have heard the DNS referred to as the BSD UNIX BIND service). For example, go to a DOS prompt in Windows 95, the % prompt in UNIX, or use a ping client for Windows 3.1 or Mac, and type ping www.winfiles.com. This will check the DNS server you have configured, look up the numerical IP address for www.winfiles.com, and then ping that server's IP address. The advantage of the DNS is that you don't have to remember numerical IP addresses for all the Internet sites you want to access.

Dot Address (or Dotted Decimal Notation)
The common notation for IP addresses of the form 1.2.3.4; where each number represents one byte in the four-byte IP address.

Electronic Frontier Foundation (EFF)
A foundation that addresses social and legal issues arising from the impact of computers on society.

Electronic Mail (Email)
A method by which computer users can exchange messages with each other over a network. Email is probably the most widely-used communications tool on the Internet. There are many quirky conventions to Email, but most entail a To:, From:, and Subject: line. One of email's advantages is its ability to be forwarded and replied to easily. If an email is badly received by a group or user, the sender is likely to get flamed.

Email
See Electronic Mail.

Email Address
Your email address is made up of several parts. By convention, addresses use lowercase letters with no spaces. The first part of the address, the username, identifies a unique user on a server. The @ (pronounced at) separates the username from the host name. The host name uniquely identifies the server computer and is the last part of the Internet email address (for example, our webmaster's email address is webmaster@winfiles.com). Large servers, such as those used at universities or large companies sometimes contain multiple parts, called subdomains. Subdomains and the host name are separated by a period (but it's pronounced dot). The three-letter suffix in the host name identifies the kind of organization operating the server (some locations use a two-letter geographical suffix). The most common suffixes are: .com (commercial), .edu (educational), .gov (government), .mil (military), .net (networking), and .org (non-commercial). More suffixes are under consideration. Addresses outside of the U.S. sometimes use a two-letter suffix that identifies the country in which the server is located. Some examples are: .jp (Japan), .nl (The Netherlands), .uk (United Kingdom), .ca (Canada), and .tw (Taiwan).

Encryption
The basis of network security. Encryption encodes network packets to prevent anyone except the intended recipient from accessing the data.

Ethernet
A standard and probably the most popular connection type for Local Area Networks (LANs). It was first developed by Xerox, and later refined by Digital, Intel and Xerox (see also DIX). In an Ethernet configuration, computers are connected by coaxial or twisted-pair cable where they contend for network access using a Carrier Sense Multiple Access with Collision Detection (CSMA/CD) paradigm. Ethernet can transfer information at up to 10 Megabit-per-second (Mb/s).

FAQ
Acronym for Frequently Asked Questions. FAQs are widely available on the Internet and usually take the form of large, instructional text files. They are written on a wide variety of topics, and are usually the most up-to-date source for specialized information.

Federal Networking Council (FNC)
A collection of federal agencies that have heavy interests in federal networks using TCP/IP and the Internet. Representatives from DoD, DOE, DARPA, NSF, NASA and HHS are the major members of the FNC.

File Transfer Protocol (FTP)
The most widely-used way of downloading and uploading (getting and putting) files across an Internet connection. The File Transfer Protocol is a standardized way to connect computers so that files can be shared between them easily. There is a set of commands in FTP for making and changing directories, transferring, copying, moving, and deleting files. Formerly, all FTP connections were text based, but graphical applications are now available that make FTP commands as easy as dragging and dropping. Numerous FTP clients exist for a number of platforms.

Finger
A UNIX command that shows information about a user or group of users on the Internet. When executed, the Finger command usually returns the user's real name, whether or not they have unread mail, and the time and date of their last login. Finger also displays two files (if they exist) located in the home directory of the user you fingered. These two files (the .PLAN and the .PROJECT files.) are simply ASCII text files that can be entered by the user to display any information upon being fingered.

Flame
A negative response to an email message or newsgroup posting. If you post an article or send an email to an audience that deems your message inappropriate, expect to get flamed. The most common recipients of flames are users who post commercial messages in public forums, those who post adult material in non-adult areas of the Internet, and users who post or send make racial or gender-biased comments. The worst sort of flame is known as a mail-bomb, which occurs when the user being flamed open his or her email and receives a flood of letters with unusually long file attachments that make his or her computer crash.

Follow-up
A reply to an email or newsgroup posting that continues the conversation or idea, known as a thread.

Freenet
A network system made up of community-based bulletin board systems with email, information services, interactive communications, and conferencing. They are usually funded and operated by individuals or organizations much like public television. Freenet providers are part of the National Public Telecomputing Network (NPTN), a Cleveland-based organization that works to make computer networking services as freely available as public libraries.

FTP
See File Transfer Protocol.

Gateway
A kind of "go-between" device or program that passes information between networks that normally couldn't communicate. What used to be called a gateway is now called a router. Not to be confused with a protocol converter.

Gopher
An information search and retrieval tool used widely for research. Gopher information is stored hierarchically on computers across the Internet. It uses a simple protocol that allows a client to access information from a multitude of numerous Gopher servers at one time, creating what's known as gopher space. The most common search tools in gopher are Veronica and Jughead. Gopher clients exist for most platforms.

Hacker
A computer user who works to understand the ins and outs of computers, networks, and the Internet in general. Hackers are generally benign, and are not to be confused with the more malicious crackers.

Host
A computer that is attached to a network or the Internet. Hosts allow users on client machines to connect and share files or transfer information. Individual users communicate with hosts by using client application programs.

Host Address
The address of a host computer on the Internet.

Hostname
The name given a host computer connected to the Internet.

HTML
See HyperText Markup Language.

Hypermedia
The combination of hypertext and multimedia in an online document.

Hypertext
A type of text that allows embedded links to other documents. Clicking on or selecting a hypertext link displays another document or section of a document. Most World Wide Web documents contain hypertext.

Hypertext Markup Language (HTML)
The standard way to mark text documents for publishing on the World Wide Web. HTML is marked-up using tags surrounded by brackets. To see what tagged HTML text looks like, select the View Source feature from the menus in the program you are using to view this document now, and you'll see a display of the HTML text used to create this page.

IMHO
Acronym for In My Humble Opinion. Generally seen in IRC, email, or Usenet postings.

Integrated Services Digital Network (ISDN)
A relatively new technology which combines voice and digital network services in a single medium. ISDN makes it possible for communications carriers to offer their customers digital data services as well as voice connections through a single line. CCITT defines the standards relating to ISDN.

International Organization for Standardization (ISO)
An organization of 89 member countries (founded in 1946) responsible for setting world standards in many electronics areas. Members of the ISO are the national standards organizations of the member countries.

Internet
A large, uncontrolled, unadministered, anarchic cyber-state that will soon take over the world! Basically, it's just everyone's computers hooked together. It's not a corporation, organization, or entity in itself. When you connect to the Internet, you actually become part of it. Always capitalized, the word Internet can also be referred to colloquially as the "Net."

Internet Assigned Numbers Authority (IANA)
The central registry for various Internet protocol parameters, such as port, protocol and enterprise numbers, and options, codes and types. The currently assigned values are listed in the Assigned Numbers document. If you'd like more information or want to request a number assignment, you can email IANA at iana@isi.edu.

Internet Protocol (IP)
An industry standard, connectionless, best-effort packet switching protocol used as the network layer in the TCP/IP Protocol Suite.

Internet Protocol Address (IP Address)
The 32-bit address defined by the Internet Protocol. Every resource on the Internet has a unique numerical IP address, represented in dotted decimal notation. IP addresses are the closest thing the Internet has to phone numbers. When you "call" that number (using any number of connection methods such as FTP, HTTP, Gopher, etc.) you get connected to the computer to which that IP address is assigned.

Internet Service Provider (ISP)
An ISP is a company that maintains a network that is linked to the Internet via a dedicated communication line, usually a high-speed link known as a T1. An ISP offers use of its dedicated communication lines to companies or individuals (like me) who can't afford $1,300 a month for a direct connection. Using a modem, you can dial up to a service provider whose computers will connect you to the Internet, typically for a fee.

Internet Society (ISOC)
A non-profit, professional organization that supports the technical evolution of the Internet and stimulates the interest of members of the scientific and academic communities, industry, and the public regarding technology and the applications of the Internet. The ISOC also promotes the development of new applications for the Internet by publishing a quarterly newsletter, the Internet Society News, and by and holding an annual conference, called INET.

InterNIC
Meaning Internet information Center, InterNIC is the combined name for the providers of registration, information, and database services to the Internet. InterNIC is who you contact if you want to register a domain name on the Internet.

IP
See Internet Protocol.

IP Address
See Internet Protocol Address.

IRC
The world-wide party line of the '90s. IRC allows multiple users to converse in real time on different channels. Channels (which have a # sign preceding their name) vary in traffic and content. Channel operators (or Ops) moderate the conversation, and have the ability to "kick" people from channels, or even ban them if their actions warrant it. IRC clients are available for nearly all platforms.

ISDN
See Integrated Services Digital Network.

ISO
See International Organization for Standardization.

ISOC
See Internet Society.

LAN
Acronym for Local Area Network. LANs are now commonplace in most businesses, allowing users to send email and share resources such as files, printers, modems, etc. Currently, most larger companies are connection their LANs to the Internet, allowing users to connect to resources within or outside the LAN.

Leased Line
A dedicated, full-time connection used to link a user or network to an Internet Service Provider or another network.

Listserv
An automated mailing list distribution system. Listservs exist for a multitude of professional, educational, and special interest groups. Usually, you have to send an email to a Listserver with the subject SUBSCRIBE listname or something to that effect. You are then subscribed to that mailing list and (depending on the service) will receive regular mail from a single source or from all members who send email to the Listserver. Listserv was originally designed for the Bitnet/EARN network.

Lurking
Non-active participation on the part of a subscriber to an mailing list, a Usenet newsgroup, and IRC channel, a video connection, or any other Internet communication device. If you're "lurking," you're generally just listening to the discussion. It's usually best to lurk if you're a beginner or if you are new to a communication group. This allows you to get up to speed on the history or acceptable behavior of the group.

Mail Reflector
A program that distributes files or information in response to requests sent via email. Many Listservs have mail reflectors. You can request documents of a reflector by sending message with the subject SEND document name or a similar command. Mail reflectors are also being used to provide FTP-like services for users with limited Internet access.

Mailing List
A list of email addresses used to forward messages to groups of people. When you subscribe to a mailing list, you receive all mail sent to that list (see also Listserv).

MIME Encoding
See Multipurpose Internet Mail Extensions Encoding.

Mirror Site
Due to the popularity of some FTP and Web sites, mirror sites came into existence. They are areas on a computer that "mirror" or contain an exact replica of the directory structure of another computer. If you have trouble getting connected to an FTP site, for example, because of the high amount of traffic, you can usually connect to a mirror site that contains the same information on a different computer. Mirror sites are usually updated once a day.

Moderator
The person who manages moderated mailing lists, newsgroups, or online discussion forums for services such as AOL, CompuServe, or the Microsoft Network.

Mosaic
A graphical browser for the World Wide Web that supports hypermedia. The NCSA (National SuperComputer Association) invented the Mosaic browser, which quickly became the industry standard. Netscape Communications Corporation later invented the Netscape Navigator, which has redefined the content on the Web. Other major companies entered the browser market with little success, until Microsoft launched their Internet Explorer which now contends with Navigator as the browser of choice. The term Mosaic is sometimes used incorrectly as a synonym for the World Wide Web.

MUD
Acronym for Multi-User Dungeon or Domain. MUDs are role-playing games that take place on a computer. Users can Telnet to a MUD host, and create a character. MUDs can be action, adventure, or fantasy games, and allow you to save your character for future play. Some MUDs have thousands of registered characters, and most foster a community or culture of their own. These are highly-addictive areas of the Internet, and users can spend many hours enthralled in this type of activity.

Multipurpose Internet Mail Extensions Encoding (MIME Encoding)
MIME is a standardized method for organizing divergent file formats. The method organizes file formats according to the file's MIME type. When Internet (usually email) software retrieves a file from a server, the server provides the MIME type of the file, and the file is decoded correctly when transferred to your machine.

Netiquette
The combination of the words Net and etiquette, this refers to the proper behavior on a network, and more generally the Internet. The key element in Netiquette is remembering that actual people are on the other end of a computer connection, and offensive comments or actions are just as offensive even if you can't see your recipient.

Network File System (NFS)
A protocol developed by Sun Microsystems. NFS allows a computer to access and use files over a network as if they were local. This protocol has been incorporated into the products of more two-hundred companies, and is now a de facto Internet standard.

Network News Transfer Protocol (NNTP)
An industry standard protocol for the distribution, inquiry, retrieval, and posting of news articles.

NFS
See Network File System.

NNTP
See Network News Transfer Protocol.

Open Systems Interconnection (OSI)
A suite of protocols, designed by ISO committees to be the international standard computer network architecture.

OSI
See Open System Interconnection.

Packet
The common term for the standard unit of data sent across a network.

Packet Internet Gopher (PING)
The simplest way to test or time the response of an Internet connection. A PING sends a request to an Internet host and waits for a reply called (yep, you guessed it), a PONG. When you PING an address, you get a response telling you the number of seconds it took to make the connection. PING clients exist for a number of platforms, or you can use a UNIX or Windows 95 prompt to issue a PING command directly.

PAP
See Password Authentication Protocol.

Password Authentication Protocol (PAP)
One of the many authentication methods that can be used when connecting to an ISP. PAP allows you to login automatically, without having to use a terminal window to type in your username and password. One warning about PAP: passwords are sent over the connection in text format, which means there is no protection if someone is "listening-in" on your connection.

Point Of Presence (POP)
An installation of telecommunications equipment, usually digital leased lines and multi-protocol routers.

Point-to-Point Protocol (PPP)
A protocol that provides a method for transmitting packets over serial point-to-point links. PPP is one of the most popular methods for dialup connections to the Internet, since it allows you to use other standard protocols (such as IPX, TCP/IP, and Netbeui) over a standard telephone connection, but it can also be used for LAN connections.

POP
See either Point Of Presence or Post Office Protocol.

Post Office Protocol (POP)
A protocol designed to allow single users to read mail from a server. There are three versions: POP, POP2, and POP3. When email is sent to you, it is stored on the server until accessed by you. Once you are authenticated, the POP is used to transmit the stored mail from the server to your local mailbox on your client machine.

Posting
The sending of an article to a Usenet newsgroup or the placing of a message on a BBS.

PPP
See Point-to-Point Protocol.

Protocol
Simply, the "language" spoken between computers to help them exchange information. More technically, it's a formal description of message formats and the rules that two computers must follow to exchange those messages. Protocols can describe low-level details of machine-to-machine interfaces (like the order in which bits and bytes are sent across a wire) or high-level exchanges between allocation programs (the way in which two programs transfer a file across the Internet).

Read the Flippin' Manual (RTFM)
An acronym used to respond to a simple or commonly asked question.

Request For Comments (RFC)
A document series, begun in 1969, which describes the Internet suite of protocols and related experiments. Not all (actually, very few) RFCs describe Internet standards, but all Internet standards are written up as RFCs.

RFC
See Request for Comments.

Router
A device that forwards traffic between networks. Forwarding decisions are made based on network layer information and routing tables, often constructed by routing protocols.

Serial Line lnternet Protocol (SLIP)
Similar to PPP, SLIP is another standard protocol used to run TCP/IP over serial lines, such as telephone circuits or RS-232 cables. Unlike PPP, however, SLIP does not work on a LAN connections. SLIP used to be the most popular way for dialup users to access the Internet, but PPP quickly overcame SLIP because of its ease of use and integration into many client operating systems.

Server
Simply, a computer that provides resources, such as files or other information. Common Internet servers include file servers and name servers Domain Name Service.

Service Provider
See Internet Service Provider.

SIG
Acronym for Special Interest Group. SIGs sponsor a variety of Listservs, IRC channels, and Internet sites. Also a nickname for a Signature.

Signature
An ASCII text file that can be automatically attached to the bottom of a piece of email or newsgroup posting that identifies the sender. Many signatures (or sigs) use symbols and characters to create images or words to make the sig more interesting.

Simple Mail Transfer Protocol (SMTP)
A protocol used to transfer email. SMTP transfers mail from server to server, and the end user must use POP (see also Post Office Protocol) to transfer the messages to their machine.

Simple Network Management Protocol (SNMP)
Developed to manage nodes on an IP network, SNMP is an Internet standard protocol. It can be used to manage wiring hubs, video toasters, CD ROM jukeboxes, and many other devices.

SLIP
See Serial Line Internet Protocol.

Smiley
The use of punctuation marks and other symbols or characters to portray moods when typing, especially in email messages and IRC. Here's an example of a simple smiley: :) . If you don't see it, tilt your head to the left and look at it. The colon makes the eyes and the parenthesis makes the smiley mouth. The smile means happiness (like if someone says something funny) or it often denotes sarcasm. Other combinations of characters can express many other emotions. You may also hear them referred to as emoticons.

SRI
A research institute based in California that runs the Network Information Center (NISC).

Subnet Mask
See Address Mask.

T1
One of AT&T's terms used to denote the type of connection of a host to the Internet. A T1 transmits a DS-1 formatted digital signal at 1.544 megabits per second.

T3
One of AT&T's terms used to denote the type of connection of a host to the Internet. A T3 transmits a DS-3 formatted digital signal at 44.746 megabits per second - about 40 times the speed of a T1.

TCP/IP
See Transmission Control Protocol/Internet Protocol.

TCP/IP Stack
To properly use the TCP/IP protocol, PCs require a TCP/IP stack. This consists of TCP/IP software, sockets software (such as WINSOCK.DLL for Windows machines), and hardware driver software (known as packet drivers). Windows 95 comes with Microsoft's own built-in TCP/IP stack, including version 1.1 of Microsoft's WINSOCK.DLL and packet drivers.

Telnet
The Internet standard protocol to connect to remote terminals. Telnet clients are available for most platforms. When you Telnet to a UNIX site, for example, you can issue commands at the prompt as if the machine were local.

TN3270
A slight variation of Telnet used to connect the user to an IBM mainframe. TN3270 clients exist for most platforms.

Token Ring
A type of LAN in which networked computers are wired into a ring. Each computer (or node) is in constant contact with the next node in the ring. A control message, called a token, is passed from one node to another, allowing the node with the token to send a message out to the network. If the ring is "broken" by one computer losing contact, the network can no longer communicate. The IEEE 802.5 token ring standard is the most common.

Topology
The layout of all the computers on a network and the links that join them.

Transmission Control Protocol/Internet Protocol (TCP/IP)
TCP/IP is the standard communications protocol required for Internet computers. To communicate using TCP/IP, PCs need a set of software components called a TCP/IP stack. Macintoshes typically use a proprietary software package called MacTCP. Most UNIX systems are built with TCP/IP capabilities.

UNIX-to-UNIX Copy (UUCP)
Originally, UUCP was a program that allowed UNIX systems to transfer files over phone lines. Currently, the term is used to describe the protocol that passes news and email across the Internet.

Usenet
Usenet groups are more commonly known as newsgroups. There are thousands of groups hosted on hundreds of servers around the world, dealing with various topics. Newsreader software is required to properly download and view articles in the groups, but you can usually post an article to a group simply by emailing to it.

UUCP
See UNIX-to-UNIX Copy.

Veronica
A search engine (not unlike Archie) that is built into Gopher. It allows searches of all gopher sites for files, directories and other resources.

Universal Resource Locator (URL)
More commonly referred to as the URL, the Universal Resource Locator refers to the entire address that is recognized "universally" as the address for an Internet resource. Each resource on the Internet has a unique URL. URLs begin with letters that identify the resource type, such as http, ftp, gopher, etc. These types are followed by a colon and two slashes. Next, the computer's name is listed, followed by the directory and filename of the remote resource. For example, the URL for this glossary is http://www.winfiles.com/glossary.html.

W3
See World Wide Web.

WAIS
See Wide Area Information Service.

White Pages
Databases containing email addresses, telephone numbers, and postal addresses of Internet users. You can search the Internet White Pages to find information about particular users.

WHOIS
An Internet program (related to Finger and the White Pages) that lets you enter an Internet entity (such as domains, networks, and hosts) and display information such as a person's company name, address, phone number and email address.

Wide Area Information Service (WAIS)
A distributed information service and search engine that allows natural language input and indexed searching. Many Web search utilities use a WAIS engine.

Winsocks
Stands for Windows Sockets. Winsocks is a set of specifications or standards for programmers creating TCP/IP applications for use with Windows.

World Wide Web (WWW or W3)
The Web is a collection of online documents housed on Internet servers around the world. The concept of the Web was created by researchers at CERN in Switzerland. Web documents are written or coded in HTML. To access these documents, you have to use a Web browser. When these browsers access (or hit) a page, the server uses the HyperText Transfer Protocol (HTTP) to send the document to your computer.

Worm
A computer program that replicates itself and is self-propagating. While viruses are designed to cause problems on a local system and are passed through boot sectors of disks and through files, worms are designed to thrive in network environments. Network worms were first defined by Shoch & Hupp of Xerox in ACM Communications (March 1982). The most famous (or infamous) worm was the Internet Worm of November 1988. It successfully propagated itself on over 6,000 systems across the Internet.

WWW
See World Wide Web.

So, you want to make a Web Page!


Grey Matter Web Pro

Overheard in alt.html...

> I'd like create a web site, but I dont know which
> software to choose... so, which one is the best?

The best software for creating web content is Grey Matter Web Pro. It's very powerful, works with any computing platform, and is free -- with a lifetime of upgrades included. It's very flexible and highly customizable, too. In fact, it's been said that no two installations of it are exactly the same, it's that flexible.

Getting started with Grey Matter Web Pro is easy. All you have to do is install the required information files -- they're available all over the web for free -- and start working. Like any other powerful software, you'll have to spend some time working with it to become really good at it, but you can start now and have your first simple page done in just a few minutes.

Grey Matter Web Pro works in conjunction with your favorite text editor and web browser, or any number of text editors and browsers that you might install and use on your machine. It can handle any tasks you might throw at it, and adapts to almost any situation.

Probably the most popular source of information files for Grey Matter Web Pro is http://www.pagetutor.com/ --thousands of people get their information files there, and the guy who is in charge of maintaining it is a regular contributor to this group. The links to the information files are near the bottom of the index page, on the left-hand side. A good one to start with is:

http://www.pagetutor.com/pagetutor/makapage/index.html

Hope this helps! Have fun, and let us know how you do with it.

---- Art Sackett ----
Independent Web Developer
http://www.artsackett.com

So, you want to make a Web Page!


Bare Bones HTML Guide - Intro

The Bare Bones Guide to HTML

I N T R O D U C T I O N

Credit where credit is due

Many people have provided suggestions and assistance as the Bare Bones Guide to HTML has developed. My thanks go out to everyone who has contributed to the effort.

| UP to Gateway Page || Plain Text | Formatted || Kevin's Home Page |

What is unique about this guide

Several people have created excellent HTML guides and made them available on the Web -- who needs another one?

This document is designed to serve a particular niche. It is intended as a concise "cheat sheet" that you can use to look up the correct forms of tags as you are creating Web pages. Other HTML guides provide significantly more descriptive material about how to use particular tags or how HTML works in general. If you are a beginner, you might try one of those guides first.

There are also several style guides that focus more on how to write pages that look good and work on different browsers. I encourage you to read one or more of them if you are planning on creating Web pages; far too many people ignore the fact that their pages are going to be read by other people and that there are better and worse ways of doing things.

My WWW Help Page has links to numerous other sites that provide information on HTML and Web page design. It's a good place to start if you have specific questions that go beyond the "bare bones" information provided here.

This guide is designed for people who know enough not to need step-by-step instructions, but who haven't memorized the exact format of every HTML tag yet. If you want a "quick reference" that you can glance at without having to read through additional descriptive material, this guide is for you.

| UP to Gateway Page || Plain Text | Formatted || Kevin's Home Page |

Which tags are included

The other distinguishing aspect of this guide is what it includes. The Bare Bones Guide to HTML is intended to include all of the tags in common usage on Web pages today. Specifically, the Guide lists the following:

  • HTML 4.0 tags
  • Netscape and Microsoft extensions to HTML

The development of HTML has been a confusing process, as attempts to adopt formal standards have often been overrun by developments in the marketplace. The World Wide Web Consortium (W3C) is the official standards body for HTML. The current W3C recommendation is HTML 4.0.

In its Position Statement on HTML, W3C recommends that information providers use the HTML 4.0 specification, but that tools also be backward-compatible with earlier versions. Therefore, version 4.0 of the Bare Bones Guide to HTML includes all the HTML 4.0 tags, but distinguishes tags introduced in version 4.0 from those in version 3.2 as well.

I have also included all of the Netscape and Microsoft extensions to HTML, with the exception of some server interaction tags such as server push animation. Some of these extensions will not display properly if people viewing your pages are using another browser, so you should think about your audience before deciding whether to use them.

| UP to Gateway Page || Plain Text | Formatted || Kevin's Home Page |

FORMATTING OF THIS DOCUMENT

For clarity, I have separated out different attributes that can be applied to the same tag onto separate lines. Generally, multiple attributes can be combined in the same tag.

Tags are listed in upper case for ease of reading, although most tags are not case sensitive.

SYMBOLS USED

URL    URL of an external file (or just file name if in the same directory)
?      Arbitrary number (i.e. <H?> means <H1>, <H2>, <H3>, etc.)
%      Arbitrary percentage (i.e. <HR WIDTH="%"> means <HR WIDTH="50%">, etc.)
***    Arbitrary text (i.e. ALT="***" means fill in with text)
$$$$$$ Arbitrary hex (i.e. BGCOLOR="#$$$$$$" means BGCOLOR="#00FF1C", etc.)
:::    Arbitrary date (i.e. DATETIME=":::" means "1994-11-05T08:15:30" etc.)
@      Email address (i.e. "mailto:@" means "mailto:kevin@werbach.com" etc.)
,,,    Comma-delimited (i.e. COORDS=",,," means COORDS="0,0,50,50", etc.)
|      Alternatives (i.e. ALIGN=LEFT|RIGHT|CENTER means pick one of these)

COMPATIBILITY

(remember, HTML is evolving and browser implementations vary)
     (no notation) In the HTML 3.2 spec.; should work on all browsers
4.0  Introduced in HTML 4.0 recommendation
N1   Netscape extension introduced with Navigator version 1.0 or 1.1
N2   Netscape extension introduced with Navigator version 2.0
N3   Netscape extension introduced with Navigator version 3.0
N4   Netscape extension introduced with Navigator/Communicator version 4.0
MS   Microsoft Internet Explorer extension
*    Netscape extension now included in the HTML 4.0 specification

| UP to Gateway Page || Plain Text | Formatted || Kevin's Home Page |

Version History

Version 4.0 -- January 1999.

  • Updated everything to comply with the HTML 4.0 specification.
  • Redesigned the layout of the main index page.
  • Combined the tables and formatted versions, since all major browsers now support tables.

Version 3.0 -- July 21, 1996.

  • Updated everything to conform to the HTML 3.2 specification.
  • Added a new section for Java tags supported by HTML 3.2
  • Revised the introductory material and annotations.
  • Redesigned the layout of the "tables" version, in order to make it easier to read.
  • All major browsers now support tables, so to save time I have decided to eliminate the separate non-table "HTML" version of the Guide, and to rename the "tables" version as the "formatted" version. Users who cannot view this version can still use the "plain text" version.
  • Added the new tags implemented by beta versions of Netscape Navigator 3.0 up to 3.0b5, including:
    • table cell colors
    • multi-column text
    • spacers
    • frame border control
    • strikeout via the <S> tag and underlining via the <U> tag. These were in HTML 3.0 but not HTML 3.2, so I list them as Netscape extensions.
    • the FACE attribute for the <FONT> tag (originally a Microsoft extension)
  • Fixed more typos.

Version 2.0 -- October 7, 1995. Lots of changes and corrections in this version.

  • Rewrote the introductory material and compatibility table language
  • Added + notation for Netscape extensions that have been adopted by most major browsers. This notation is by nature approximate; it represents my judgment about which tags have are widely supported even though they are not (and may never be) in HTML 3.0.
  • Added ,,, notation in table of symbols for comma-delimited lists.
  • Restructured the Hard Formatting and Soft Formatting sections into Presentation Formatting and Structural Definition. This change makes clear the important distinction between presentation-based and structural markup. A few tags have been moved around as a result of this change, and the <ADDRESS> tag has been moved up from Miscellaneous into Structural Definition.
  • Eliminated the Alignment section by shifting the tags listed there into either Structural Definition or Presentation Formatting. Although this results in the Netscape <CENTER> tag being split up from the other alignment tags, it allows the alignment attributes of tags such as <P> and <H?> to be associated with the underlying tags they operate on. This change is consistent with the HTML 3.0 philosophy of handling alignment through attributes to existing tags rather than through dedicated tags.
  • Added listing for Netscape client pull animation (this has been around since Netscape 1.1, but was not listed in the Guide).
  • Support for new Netscape anML 3.0 tags implemented in Netscape 2.0:
    • Frames (added a whole new section)
    • Embedded Objects (in Links and Graphics)
    • Divisions (in Structural Definition)
    • Font Color (in Presentation Formatting)
    • Big/Small font size (in Structural Definition)
    • Superscript/Subscript (in Presentation Formatting)
    • File Upload (in Forms)
    • Text wrap (in Forms)
    • Target Windows (in Links and Graphics) and Base Target (in Miscellaneous)
    • Client-side imagemaps (in Links and Graphics)
  • Removed <XMP> tag, because I have been convinced that it is archaic.
  • Moved prologue tags to Miscellaneous section, to indicate that they are not required and reduce confusion.
  • Fixed listing for <NOBR> container by adding a closing tag
  • Changed "outline type" to "numbering type" for Netscape extension to ordered lists, in order to avoid confusion about what this attribute does.
  • Changed wording of <P> tag description to indicate that it is "usually" rendered as a double return.
  • Changed notation for hex triplet from $$$ to $$$$$$ to indicate that six characters are required to reference the three hex values.
  • improved consistency of column alignment in the text version.

Version 1.22 -- August 18, 1995. Added a tag and some attributes that had been accidentally omitted from the forms section, and corrected the listing of which color tags are in the HTML 3.0 spec.

Version 1.21 -- July 26, 1995. Removed the archaic <NEXTID> tag and added some annotations to the HTML and table versions.

Version 1.2 -- July 25, 1995. Several revisions to improve compliance with the official HTML specifications, and to acknowledge more widespread implementation of certain HTML 3.0 tags.

Version 1.1 -- July 19, 1995. Cleaned up a number of things in the introductory material, and correctly specified the ISO 8859-1 character set instead of ASCII.

Version 1.03 -- July 12, 1995. Updated copyright notices to eliminate confusion with Bare Bones Software. Added Netscape relative font sizing tag, and changed the link to the list of ASCII symbol codes.

Version 1.02 -- April 24, 1995. Corrected some additional typos, fixed the link to this version history, and added the standard copyright and registered TM codes to go along with the Netscape versions.

Version 1.01 -- April 11, 1995. Fixed a couple minor typos and ambiguities pointed out by helpful folks, including some errors in the list tags section.

Version 1.0 HTML -- April 6, 1995. Has some additional introductory material, but the text is otherwise identical to version 1.0. Formatted for WWW viewing, with assistance from John Berkin.

Version 1.0 -- April 2, 1995. Corrected some errors pointed out by other people, and made some minor revisions to the introduction and the formatting of certain sections.

Version 0.9b -- March 30, 1995. First public version. Posted on comp.infosystems.www.providers.

| UP to Gateway Page || Plain Text | Formatted || Kevin's Home Page |

Copyright ©1995-1999 Kevin Werbach.
Last updated February 1, 1999.

So, you want to make a Web Page!


Basic HTML Tutorial - Lesson 1

Just like 'follow the bouncing ball', power up Notepad and start with this...

<HTML>
</HTML>

Each one of those is called a tag. There is a starting tag and a closing tag. To make a closing tag just add a / to the starting tag. Most, but not all tags have a closing tag. Think of tags as talking to the browser, or better yet giving it instructions. What you have just told the browser (more or less) is this is the start of a HTML document (<HTML>) and this is the end of a HTML document (</HTML>). Now we need to put some stuff into it.

Every HTML document needs a pair of HEAD tags.

<HTML>
<HEAD>
</HEAD>
</HTML>

The only thing we have to concern ourselves with in the HEAD tags (for now) are the TITLE tags.

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
</HTML>

And the bulk of the page is going to be within the BODY tags.

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>

Oh, and one more thing, give your document a title, and put something in the body.

<HTML>
<HEAD>
<TITLE>My big ole bad page!</TITLE>
</HEAD>
<BODY>
Hello Joe!
</BODY>
</HTML>

Now save it, not as a text document, but as a html document. Save it as page1.html in a new folder somewhere. If yer a little fuzzy about how to do this then here's what you do... In your Notepad window click File then Save As.
You will be presented with a dialog box. Make a new folder by clicking this -> New Folder icon
Name it whatever you want. Then double click on it to open it up. Where it says File name: type in page1.html Where it says Save as type: make sure it says All Files(*.*)
Hit return and you're done!

Congratulations! You are the proud parent of a fully functional Web Page! You could upload it to a server and the whole world can see your creation! If you are using Internet Explorer or Netscape, the file you made might look something like this...

HTML file icons
(if your icon is a little different, it's no biggie)

You should be able to double click on it now and see the results of your handiwork.

Next order of business is to start putting some neato stuff in your page.

The best way to use this tutorial is to run Notepad and two instances of your web browser. One browser window containing this tutorial and the other containing your new page. Just toggle between the three windows. You can open a second instance of your browser in one of two ways- 1) Find the icon of the html file you just made (page1.html) and double click on it. Or- 2) In your browser, click on File/Open File (or something similar to that) and browse to the file (page1.html).

Two quick points before we go on to lesson 2. One, what you made is a skeleton HTML document. This is the minimum required information for a web document and all web documents should contain these basic components. And two, the document title is what appears at the very top of the browser window.

<< BACK NEXT >>

So, you want to make a Web Page!


Basic HTML Tutorial - Lesson 2

To keep things a little cleaner I am only going to write what is in the <BODY> tags. I will omit the <HTML>, <HEAD> & <TITLE> tags. Needless to say, keep these in your document.

<BODY>
</BODY>

Type something really cool.

<BODY>
Something really cool
</BODY>

Something really cool

Whenever you make a change to your document, just save it, then hit the Reload button on your browser. In some instances just hitting the reload button doesn't quite do the trick... in that case hit Reload while holding down the SHIFT key.

I think the first thing we are going to learn is how to change background colors.

<BODY BGCOLOR="#CCFFCC">
Something really cool
</BODY>

Something really cool

CCFFCC is computerese for light green. Here are a few more.

The topic of colors and browsers is rather interesting. Some other time, I encourage you to come back to this section and learn a little about "web safe colors".

You can specify a background image instead. (Note, the image should be in the same folder as your HTML file. More on this below.)

<BODY BACKGROUND="swirlies.gif">
Something really cool
</BODY>

Here's the background image

In order for the image to show up, the browser has to be able to find it. For now, we want the image to be in the same folder as your HTML document (page1.html). The easiest way to do this is to right click on the swirlies image above and choose Save Image As (or some variant thereof). Browse to wherever you put page1.html and save the image there. Later we'll get into this stuff in a little more detail.

It's probably pretty obvious that the image is tiled. If you use a long skinny image you can get an effect like this...

<BODY BACKGROUND="bluebar.gif">
Something really cool
</BODY>

Here's the background image

(It's actually 1700x4, but I have compressed it here to 560x4 so it will fit on everyones screen)>

FAQ: I've seen pages where the background is fixed and the page just scrolls over it. How can I do that?

A: Simple... add BGPROPERTIES=FIXED to the BODY tag...

<BODY BACKGROUND="mybackground.gif" BGPROPERTIES=FIXED>

Keep in mind this little doodad is Internet Explorer specific. That is, only people using Internet Explorer or IE based browsers will be able to see it. Here is an example.

<< BACK NEXT >>

So, you want to make a Web Page!


Basic HTML Tutorial - Lesson 3

Let's go back to a plain old screen.

<BODY>
Something really cool
</BODY>

Something really cool

We can make things bold.

<BODY>
Something really <B>cool</B>
</BODY>

Something really cool

What we are (more or less) telling the browser is: at the <B> start making things bold, and at the </B> stop making things bold.

The same principle applies to italics...

<BODY>
Something <I>really</I> <B>cool</B>
</BODY>

Something really cool

...and underlining.

<BODY>
<U>Something</U> <I>really</I> <B>cool</B>
</BODY>

Something really cool

Back again to a plain screen.

<BODY>
Something really cool
</BODY>

Something really cool

We can use tags in combination if we want to.

<BODY>
Something really <I><B>cool</B></I>
</BODY>

Something really cool

This is an example of nested tags. If you are going to use tag pairs in combination (which you will probably be doing quite a bit), then to avoid confusing the browser, they should be nested, not overlapping. Let me illustrate...

   <THIS><THAT>cool</THIS></THAT> Overlapping tags.... bad
   <THIS><THAT>cool</THAT></THIS> Nested tags.... good

<< BACK NEXT >>

So, you want to make a Web Page!


Basic HTML Tutorial - Lesson 4

A very useful type of text effect is the mono-spaced font, or Typewriter Text.

<BODY>
<TT>Something really cool</TT>
</BODY>

Something really cool

Each letter uses the same amount of horizontal space...

This is regular type -> iiiiiiiiii
oooooooooo
mmmmmmmmmm
This is monospaced type ->     iiiiiiiiii
oooooooooo
mmmmmmmmmm

We can change the font size too... It's pretty easy!

First add the <FONT> tags...

<BODY>
Something really <FONT>cool</FONT>
</BODY>

Then specify a SIZE attribute.

<BODY>
Something really <FONT SIZE=6>cool</FONT>
</BODY>

Something really cool

Fonts come in 7 sizes:

teeny tiny | small | regular | extra medium | large | real big & | yelling!
1 | 2 | 3 | 4 | 5 | 6 | 7

Two things I want to discuss now. First, a <TAG> tells the browser to do something. An ATTRIBUTE goes inside the <TAG> and tells the browser how to do it.
Second point is about defaults. As you probably know, the default value is a value that the browser assumes if you have not told it otherwise. A good example is the font size. The default font size is 3 (usually). If you say nothing it will be 3. If you make faces at your computer it will still be 3.

Every browser has a default font setting - font name, size and color. Unless you have messed with it the default is probably Times New Roman 12pt (which translates into 3 for our purposes) and it's black. Of course we can specify font names other than the defaults. Like ARIAL and COMIC SANS.

<BODY>
Something really <FONT FACE="ARIAL">cool</FONT>
</BODY>

Something really cool

The font will only display if your viewer has that font installed on their computer. Let me repeat... If the person looking at the page doesn't have installed on their computer the font you specify, then they will only see the default font. So be very judicious in your use of fonts. Arial and Comic Sans MS are pretty widely distributed with Windows. So is Impact!. You can hedge your bets a little by specifying more than one font. (Yes! You can do that!). Just do something like this...

<FONT FACE="ARIAL, HELVETICA, LUCIDA SANS">Hidee Ho</FONT>.

For lunkheads like me that might not understand that right away, here's what's happening- The browser looks for ARIAL. If it finds it, it uses it. If not, it goes on to HELVETICA. If it can't find that, it looks for LUCIDA SANS. And if it can't find that it uses the default font.

What are some common fonts that are pretty safe bets?

Andale Mono Arial Arial Black
Comic Sans MS Courier New Georgia Impact
Times New Roman Trebuchet MS Verdana

To see how various fonts might look through your browser, you might want to use the Handy Dandy Font Viewer.

<< BACK NEXT >>

So, you want to make a Web Page!


Basic HTML Tutorial - Lesson 5

Now I guess is a good time to yap a bit about syntax. You notice here and there I use quotation marks, these are important. Whenever you have an ATTRIBUTE="value", the value should really be in quotes. It's a good habit to get into. (as you work through these tutorials you'll see it's a habit that I haven't quite developed completely :-)

You have no idea how many times I made a page and it was all screwed up... I mean all screwed up because of a single missing or misplaced quotation mark or a missing space or a missing greater than > sign . Someday we will be separated from this kind of coding, but for now we just have to be careful. Another thing is my use of CAPITAL LETTERS for most of my marking up. This is just personal preference. I find that the tags stand out more when using all caps. You could just as well use <font> instead of <FONT>. You can even use <fOnT> if that's what trips yer trigger. HTML is largely case INsensitive.

Alright, back to the fun stuff...

You can change the font color if you like.

<BODY>
Something really <FONT COLOR="#FF0000">cool</FONT>
</BODY>

Something really cool

We can, of course use more than one ATTRIBUTE in a <FONT> tag...

<BODY>
Something really <FONT COLOR="#FF0000" FACE="ARIAL" SIZE="7">cool</FONT>
</BODY>

Something really cool

Oh boy we're on a roll now!

<BODY BGCOLOR="#FFFFFF">
Something really <U><I><B><FONT COLOR="#FF0000"
FACE="ARIAL" SIZE="7">cool</FONT></B></I></U>
</BODY>

Something really cool

I feel the need to point out once again that multiple tags should be nested.

<TAG3><TAG2><TAG1>Hooha!</TAG1></TAG2></TAG3>

It doesn't matter which tag is first. It's not like if you want to make something red and bold you have to do one or the other first. You can do them in any order you want. Such as...

<TAG2><TAG1><TAG3>Hooha!</TAG3></TAG1></TAG2>

The fastest way to confuse the browser, not to mention yourself is to overlap the tags...

<TAG3><TAG2><TAG1>Hooha!</TAG3></TAG1></TAG2>

(I couldn't think of a way to explain it so I hope the use of examples makes it clear.)

<< BACK NEXT >>

So, you want to make a Web Page!


Basic HTML Tutorial - Lesson 6

Another occasionally useful tag worth mentioning are section headings. While they're a little obsolete in today's very graphic web, they are still a handy little thing to have in your toolbox. They come in sizes 1-6.

<H1>Something really cool</H1>
<H2>Something really cool</H2>
<H3>Something really cool</H3>
<H4>Something really cool</H4>
<H5>Something really cool</H5>
<H6>Something really cool</H6>

Something really cool

Something really cool

Something really cool

Something really cool

Something really cool
Something really cool

A useful heading attribute is ALIGN... fairly self-explanatory.

<H2 ALIGN="left">Something really cool<H2>
<H2 ALIGN="center">Something really cool<H2>
<H2 ALIGN="right">Something really cool<H2>

Something really cool

Something really cool

Something really cool

One more thing and we'll wrap up this lesson. The browser has default settings for text color, link color, active link color and visited link color in addition to the background color. The defaults are...

Text is usually black
Links are usually blue
Active link is usually red
Visited link is usually purple

You can change these if you need to (notice I said need to). The whole world has gotten used to links being blue. Why confuse us?

You can change these defaults for the entire document in the <BODY> tag.

<BODY BGCOLOR="#00000" TEXT="#FFFF66" LINK="#00FF66"
VLINK="#00BB33" ALINK="#00CCFF">
Something really cool
</BODY>

Something really cool
I know that we have not gotten into how to make links, so that information is not shown above (why muddy the water?) This is simply to show you how to make the color changes when you do learn how to make links.

You can see that the background is now black and the text is now yellow.
Links are now neon green
Visited links are darker green
And active links are sky blue.

I've written a neat little HTML & JavaScript widget called Color Picker that makes it easy (and kind of fun) to experiment with different color settings. With it, you can not only pick colors, but you can choose different fonts and font sizes, switch to bold or italic, and even easily experiment with different background images. The <BODY> tag is automagically generated for you.

There! You now know just about everything that has to do with manipulating the text in your document. You can now make Big red letters or small bold letters You can use other Fonts, or monospaced fonts.
You could even make a rollercoaster!

(Coding for the roller coaster is here if you want to see it.)

Before we wrap up this lesson, there's one little thing I want to bring to your attention. You can view the HTML code of any page you happen to be viewing by choosing View/Document Source in your browser. Your browser may word this a little differently, but nearly all browsers have this facility. So, as you surf along and you run into a really neat page and you find yourself thinking "How'd they do that?", the answer is only a couple clicks away.

<< BACK NEXT >>

So, you want to make a Web Page!


Basic HTML Tutorial - Lesson 7

I think we'll start by learning something about the way a browser works.

First an example...

<BODY>
Something really cool
like an icecube!
</BODY>

Something really cool like an icecube!

<BODY>
Hey!
What's
going
on
here??
</BODY>

Hey! What's going on here??

The browser doesn't recognize formatting. Unless you tell it otherwise, it just displays the characters in a steady stream. If you want to start a new line you have to use a line break.

<BODY>
Hey!
<BR>What's
<BR>going
<BR>on
<BR>here??
</BODY>

Hey!
What's
going
on
here??

<BR> basically says - start a new line.

Can you use the <BR> tag to skip a line? Sure.

<BODY>
<BR>What's
<BR>going
<BR>
<BR>on
<BR>
<BR>here??
</BODY>

What's
going

on

here??

Skip lots of lines? You betcha.

<BODY>
<BR>What's
<BR>going
<BR>
<BR>on
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>here??
</BODY>

What's
going

on

here??

<< BACK NEXT >>

So, you want to make a Web Page!


Basic HTML Tutorial - Lesson 8

Let's go back to our simple page.

<BODY>
Something really cool
</BODY>

Something really cool

This is the paragraph tag. Think of a paragraph as a block of text.

<BODY>
<P>Something really cool</P>
</BODY>

Something really cool

By itself it doesn't do much. Although with most browsers, starting a new paragraph does have the effect of skipping a line.

<BODY>
<P>Something really cool</P>
<P>like an icecube</P>
</BODY>

Something really cool

like an icecube

So, what else is this <P> tag good for? Well, it's great for aligning stuff.

<BODY>
<P ALIGN="left">Something really cool</P>
<P ALIGN="center">like an icecube</P>
<P ALIGN="right">or a popsicle</P>

<P ALIGN="left">
Something really cool
<BR>like an icecube
<BR>or a popsicle
</P>

<P ALIGN="center">
Something really cool
<BR>like an icecube
<BR>or a popsicle
</P>

<P ALIGN="right">
Something really cool
<BR>like an icecube
<BR>or a popsicle
</P>
</BODY>

Something really cool

like an icecube

or a popsicle

Something really cool
like an icecube
or a popsicle

Something really cool
like an icecube
or a popsicle

Something really cool
like an icecube
or a popsicle

Something about the <P> tag... although in the examples above I used a closing tag (</P>), it is not entirely necessary. Nearly all browsers will assume that when a new <P>aragraph has begun, the old one must have ended. So...

<P>Some stuff
<P>More stuff

is the same as...

<P>Some stuff</P>
<P>More stuff</P>

And one more thing before we move on, earlier we were talking about centering things. There's another way to center something that should definitely be in your bag of tricks. It's pretty self-explanatory. You can center one word or your whole page. Everything betwen the <CENTER> tags gets centered.

<BODY>
<CENTER>Something really cool</CENTER>
</BODY>

Something really cool

<< BACK NEXT >>

So, you want to make a Web Page!


Basic HTML Tutorial - Lesson 9

Have a look at this...

<BODY>
Something        really        cool
</BODY>

Something really cool

The browser won't recognize more than 1 space. I know at first this might all seem pretty stupid for it to be this way, but really, it's better like this. It gives you absolute control over the document's appearance.

There is a nifty little code that means "space" to the browser -> &nbsp;

Try this instead...

<BODY>
Something&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
really&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
cool
</BODY>

Something really cool

The & means we are beginning a special character the ; means ending a special character and the letters in between are sort of an abbreviation for what it's for. There are quite a few of these special characters. Here are six more. (Note- these should always be lower case)

     &nbsp;     non-breaking space
     &lt;       < less-than symbol
     &gt;       > greater-than symbol
     &amp;      & ampersand
     &quot;     " quotation mark
     &shy;       soft hyphen

You don't need to use them all the time, just when typing the real character would confuse the browser. How do you know when that is? No hard and fast 'rule' that I can think of. It will just come with a little practice and a few screw-ups.

By the way, some thoughts on mistakes & screw-ups. There are those that are of the opinion that mistakes are bad. They are afraid to try anything new for fear of messing it up. Making the same mistake over and over might be a little dumb, but especially while you are learning, don't be afraid to screw everything all up. Mistakes are our friends :-) If you are not screwing something up then you are not learning anything and probably not doing anything. Remember, messing things up is a perfectly acceptable part of learning!

OK, enough babbling. There are other special characters too. You'll probably hardly ever use them but I want you to know they are there.

Let's go over the last couple points real quick because if you're at all like me, it will get confusing. The browser will dispay your text in a steady stream unless you tell it otherwise with line breaks, etc. It will reduce any empty areas to 1 space. If you want more spaces, you must use the space code (&nbsp;). Here's a tidbit that we didn't cover... If you hit Return (or Enter) while you are typing, most browsers will interpret that as a space... unless there is already a space there.

One more quick example.

<BODY>
Something<BR>really<BR>cool<BR>
like<BR>an<BR>icecube!
</BODY>

Something
really
cool
like
an
icecube!

Pretty clear?? I hope so. I gave it my best shot!

<< BACK NEXT >>

So, you want to make a Web Page!


Basic HTML Tutorial - Lesson 10

Let's get into putting images into a web page. We're going to use this one. Once again, right click to save it off this page or copy it from the pics folder.

You specify an image with the <IMG> (image) tag.

<BODY>
<IMG>
</BODY>

We must also specify the source and the size.

<BODY>
<IMG SRC="chef.gif" WIDTH=130 HEIGHT=101>
</BODY>

FAQ: How do I find out the WIDTH and HEIGHT of an image?
A: Well, there's a couple different ways. One way is to load it in a graphics viewer/editor. An outstanding (and free) viewer that I use is Irfan View. A very popular graphics editor is Paint Shop Pro. This is time limited shareware but it is one fine editor. There is an older version that I VERY highly recommend for beginning web designers, and this version does not time out. It is available here.

Another method is to use a text or html editor that imports the size when you insert the image. I use NoteTab, and an image tag of my design is built for me when I simply drag the filename on to the current file. I can insert an image in about 6 tenths of a second :-) (I told you NoteTab was my favorite!)

Let me make the point that not only does the source specify what image, it also specifys where is the image. The above source, "chef.gif", means that the browser will look for the image named chef.gif in the same folder (or directory) as the html document itself. Below are a few diagrams.

SRC="chef.gif" means that the image is in the same folder as the html document calling for it.
SRC="images/chef.gif" means that the image is one folder down from the html document that called for it. This can go on down as many layers as necessary.
SRC="../chef.gif" means that the image is in one folder up from the html document that called for it.
SRC="../../chef.gif" means that the image is two folders up from the html document that called for it.
SRC="../images/chef.gif" means that the image is one folder up and then another folder down in the images directory.
SRC="../../../other/images/chef.gif" I'm not even going to try and put this into words. I hope you get the drift.

There is another way that this can be done. All references to images can have as their source the complete URL. For example: http://www.hair.net/~squiggie/LottzaStuff/other/images/chef.gif

Why, you ask, does it make so much more sense to use relative (partial) URLs as opposed to absolute (complete) URLs?? Because you can build your site locally and all the links will work. When your pages are done, you just upload the whole pile to your server and everything will work just fine. In addition, it is easier for the browser to get the images and your page will load faster. Is there ever a reason to use an absolute URL? Sure, if the image resides on a completely different server.

FAQ: As soon as I upload my stuff to the Web, all my image links are broken. I used relative URLs and I definitely uploaded them because I can see them there with my FTP program. What gives?
A: Sounds like a case problem. To a Windows based system, Chef.gif is the same as CHEF.GIF is the same as chef.gif. Put that image on a (often) UNIX server and they become 3 distinct filenames. You're telling the server to look for Chef.gif, but all it can find is CHEF.GIF.
The fix? Always use lower case filenames. Make this a definite habit and you'll never get bit by the case bug.
Another really good habit is to avoid spaces in your web filenames. Swap an underscore_ for any spaces. Change My Mommy.gif to my_mommy.gif.

<< BACK NEXT >>

So, you want to make a Web Page!


Basic HTML Tutorial - Lesson 11

Another IMG attribute that deserves mention is ALT...

<IMG SRC="chef.gif" WIDTH=130 HEIGHT=101 ALT="Chef">

ALT is sort of a substitute for the image when the user is using a browser that isn't (for whatever reason) displaying images. Someone may be using a text only browser, he may have image loading turned off for speed or he may be using a screen reader (a browser where the web page is read aloud). In those cases, that ALT attribute could be very important to your visitor.

Something really neato you should know about images and their size.

Try this...

<BODY>
<IMG SRC="chef.gif">
</BODY>

As you can see, the browser figures out how big the image is all by itself. Why bother with dimensions then? Because with dimensions, the browser can simply reserve a space for the image, then load the rest of page. Once the entire page loads it can go back and fill in the images. Without dimensions, when it runs into an image, the browser has to pause loading the page, load the image, then continue loading the page. All in all, the browser functions much better with image dimensions.

Well Joe, that's all well and good <yawn>, but what's the neato part??

Check this out...

<BODY>
<IMG SRC="chef.gif" WIDTH=300 HEIGHT=101>
</BODY>

<BODY>
<IMG SRC="chef.gif" WIDTH=40 HEIGHT=200>
</BODY>

You can specify whatever dimensions you want and override the proper dimensions. Still foggy on the neato part?
Well, look at this little red dot -> It's a 1x1 square. Lookie what I can do with it though...

<BODY>
<P ALIGN="center"><IMG SRC="red_dot.gif" WIDTH=500 HEIGHT=1>
<P ALIGN="center"><IMG SRC="red_dot.gif" WIDTH=500 HEIGHT=2>
<P ALIGN="center"><IMG SRC="red_dot.gif" WIDTH=500 HEIGHT=8>
<P ALIGN="center"><IMG SRC="red_dot.gif" WIDTH=2 HEIGHT=200>
</BODY>

Pretty nifty huh?

<< BACK NEXT >>

So, you want to make a Web Page!


Basic HTML Tutorial - Lesson 12

Let's learn about links.

It's really very simple. We'll make a link to Yahoo.
Start with this...

<BODY>
Go to Yahoo!
</BODY>

Go to Yahoo!

Then add a pair of anchor tags.

<BODY>
Go to <A>Yahoo!</A>
</BODY>

Go to Yahoo!

Add the URL and you're done! URL Stands for Uniform Resource Locator. That's a big fancy phrase that the computer people came up with. They tend to do that a lot. A URL is just an address.

<BODY>
Go to <A HREF="http://www.yahoo.com/">Yahoo!</A>
</BODY>

Go to Yahoo!

Let's do one more.

<BODY>
Go to Netscape!
</BODY>

Go to Netscape!

<BODY>
Go to <A HREF="http://home.netscape.com/">Netscape!</A>
</BODY>

Go to Netscape!

<< BACK NEXT >>

So, you want to make a Web Page!


Basic HTML Tutorial - Lesson 13

An email link works the same way. We just use an email address instead of a page address.

<BODY>
Send me <A HREF="mailto:forrest@bubbagump.com">Mail!</A>
</BODY>

Send me Mail!

FAQ: How can I specify a Subject for my email message?
A: Very easily, but there's a catch. You can add a subject to the link as follows...

<A HREF="mailto:forrest@bubbagump.com?subject=Hey Bubba!">

... but, be advised that floating around out there is the occasional email client that doesn't know what to do with that subject. For those people the email may appear to be sent, but in reality it may simply disappear into oblivion. If this rare glitch is a concern to you, then don't specify a subject.

FAQ: How can I get rid of the underline in my links?
A: Well, technically that can't be done with HTML. But, it can using Style Sheets. If you put the following between the HEAD tags of your document, any browser supporting Style Sheets should render all the links on a page without an underline...

<STYLE TYPE="text/css"><!--
a:link, a:visited, a:active {text-decoration:none}
--></STYLE>

That's just dandy, but what if I just want to get rid of the underline on only one or two links?

You can use a STYLE suggestion within the link itself...

<A HREF="mailto:forrest@bubbagump.com" STYLE="text-decoration:none">Mail!</A>

We can make an image a link if we want. Using the 'Go to Netscape!' example above we simply substitute an <IMG> tag for the word Netscape!

<BODY>
Go to <A HREF="http://home.netscape.com/"><IMG SRC="chef.gif"
WIDTH=130 HEIGHT=101></A>
</BODY>

Go to

FAQ: How do you get rid of that ugly blue border around an image link?
A: Simple... add BORDER=0 to the IMG tag. (See below.)

<BODY>
Go to <A HREF="http://home.netscape.com/"><IMG SRC="chef.gif"
WIDTH=130 HEIGHT=101 BORDER=0></A>
</BODY>

Go to

<< BACK NEXT >>

So, you want to make a Web Page!


Basic HTML Tutorial - Lesson 14

FAQ: How do I link to a _____ file so people can download it?

A: Simple, just link to it. Let's suppose you have a few Microsoft Word documents that you would like to offer. Just link to them...

<A HREF="myresume.doc">Download my resume</A>
<BR><A HREF="mybio.doc">Download my autobiography</A>

Download my resume
Download my autobiography

You may wonder how to be sure the file gets saved to disk rather than being displayed or loaded or whatever. In short you have little control over what happens when a user downloads a file. Most people know how to right click and Save To Disk. Others may have a plugin to handle the file. Just let people manage that part by themselves. Your job is simply to offer it for download.

If the file is a lengthly file (200+Kb) or a collection of files, you may wish to zip them and offer the zip file for download instead.

FAQ: How do I make a link open in a new browser window?

A: Well, first of all, this can be done easily by your visitor if he wishes. All he has to do is right click on the link and choose "Open In New Window".

If we figure that you want to force this action for whatever reason, you can add TARGET="_blank" to the link...

Go to <A HREF="http://home.netscape.com/" TARGET="_blank">Netscape!</A>

There's more on targets in Frames Tutor.

One more note about links... It is perfectly acceptable to link to someones page(s) without asking. Links are what makes the Web the Web.

Now that you've learned how to make links, I'm going to tell you about one of my pet peeves. I hate searching for information on widgets and all I get are pages with 14 dozen LINKS to widget sites and nothing else. I follow some of those links and I get MORE LINKS to more widget link sites... but never any blinkin widgets! :-(

If you're making a page, of course include links if you think it adds value, but try to refrain from having a page that consists of nothing more than links and links that link to even more links!

<< BACK NEXT >>

So, you want to make a Web Page!


Basic HTML Tutorial - Lesson 15

Before we go on, we need to go over something. When you include images on your page, remember that they contain a lot of data and therefore can be slow to load. One way to reduce the size (by size I mean Kb) is to reduce the dimensions. Cutting the length and width in half results in an image only 1/4 the size in Kb. Also you can reduce the number of colors. For example:

Dimensions 310 x 304 # of colors- 238 Size - 69 Kb
Dimensions 207 x 203 # of colors- 238 Size- 34 Kb | Dimensions 207 x 203 # of colors- 48 Size - 19 Kb

All image editing was done with Paint Shop Pro.
(An older, non time limited version is available here. Even though it's older and not as fancy
as the latest version, it is a GREAT graphics editor - PERFECT for new web authors.)

Now granted, the first one is a larger, nicer and better quality picture, but think of it this way... if your page takes forever to load, your visitors will probably leave and they won't see anything.

Just to see how much images can be reduced, try GIFWorks...

Click here to go to GIFWorks

GifWorks is a really nifty online GIF editor and optimizer. You don't need to download a thing. You can send it an image and optimization is just one of the many things it can do. While you're there, you can check out their other neat tools or browse their vast image collection. Go ahead and give it a whirl.

<< BACK NEXT >>

So, you want to make a Web Page!


Basic HTML Tutorial - Lesson 16

Another option that can be used if you want to offer a lot of imagery is to provide thumbnails that link to larger versions of the image. Let's suppose that I want to offer three very nice pictures of let's say a few of my cars (I wish).

Click on the thumbnail to see a larger image

The first thing you need to do is fire up your image editor and make smaller versions of your images. It would also help to reduce the color depth. This bit about making a smaller version is very important. I have seen many instances of someone trying to make a thumbnail by simply reducing its dimensions in the <IMG> tag. All this does is cram the full image into a smaller space. What you need to do is create a smaller copy of the image and use that as a link to the big image.

Let's do one. I think we'll use the Corvette (that's the blue one if there's anyone out there that for some silly reason doesn't know). Put the full sized image and the small image in your working folder. Once again, Netscape users right-click & Save Image As. (everyone else, it's something similar)

Start with your <IMG> tag.

<BODY>
<IMG SRC="car1-sm.gif" WIDTH=90 HEIGHT=62>
</BODY>

Add your <A> tags.

<BODY>
<A><IMG SRC="car1-sm.gif" WIDTH=90 HEIGHT=62></A>
</BODY>

And add the URL of the big picture and bingo, you're done!

<BODY>
<A HREF="car1.jpg"><IMG SRC="car1-sm.gif" WIDTH=90 HEIGHT=62></A>
</BODY>

You can, if you want, get rid of the blue border. Although, you may wish to keep it so that your viewers know that it is a link. It's up to you.

<BODY>
<A HREF="car1.jpg"><IMG SRC="car1-sm.gif" WIDTH=90 HEIGHT=62 BORDER=0></A>
</BODY>

<< BACK NEXT >>

So, you want to make a Web Page!


Basic HTML Tutorial - Lesson 17

FAQ: My image links have these little blue dashes next to them. Also I keep getting spaces between them and I want them to be flush up against each other. I don't understand... it works right in Browser B.

A: Some browsers (most browsers?) interpret a carriage return between images as a space. A few browsers don't. It's that simple. The little blue dash is simply the link underlining an empty space. The cure is to eliminate carriage returns right before or right after the image.

This is the markup for the above images:

<CENTER> <A HREF="myhome.html"> <IMG SRC="myhome.gif" WIDTH="66" HEIGHT="23" BORDER="0" ALT="Home"> </A> <A HREF="mailto:me@my.house"> <IMG SRC="myemail.gif" WIDTH="66" HEIGHT="23" BORDER="0" ALT="Email"> </A> <A HREF="mylinks.html"> <IMG SRC="mylinks.gif" WIDTH="66" HEIGHT="23" BORDER="0" ALT="Links"> </A> </CENTER>

If we were to change it to this we would eliminate the little blue dashes:

<CENTER> <A HREF="myhome.html"><IMG SRC="myhome.gif" WIDTH="66" HEIGHT="23" BORDER="0" ALT="Home"></A> <A HREF="mailto:me@my.house"><IMG SRC="myemail.gif" WIDTH="66" HEIGHT="23" BORDER="0" ALT="Email"></A> <A HREF="mylinks.html"><IMG SRC="mylinks.gif" WIDTH="66" HEIGHT="23" BORDER="0" ALT="Links"></A> </CENTER>

Another adjustment and the spaces disappear too:

<CENTER> <A HREF="myhome.html"><IMG SRC="myhome.gif" WIDTH="66" HEIGHT="23" BORDER="0" ALT="Home"></A><A HREF="mailto:me@my.house"><IMG SRC="myemail.gif" WIDTH="66" HEIGHT="23" BORDER="0" ALT="Email"></A><A HREF="mylinks.html"><IMG SRC="mylinks.gif" WIDTH="66" HEIGHT="23" BORDER="0" ALT="Links"></A> </CENTER>

Is this a pain in the butt? Only if you don't understand what's happening and how to fix it. Is Browser A a crappy browser? Not necessarily, it's just different than Browser B. Browsers sometimes do different things with the same markup.

Another way to link is to link not just to a page, but to a specific part of a page. Click here to be magically transported to where we first talked about URLs. Since it would be kind of hard to have you build an example, I'll just do the best I can to explain how it's done.

First start with the spot you want people to be transported to. Pick a word and wrap it in the <A> tags.

<A>Add</A> the URL and you're done!

Next give that spot a NAME.

<A NAME="upabit">Add</A> the URL and you're done!

What you have done is marked that spot. Now that spot can be referenced and linked to.

Start building the link.

Click <A>here</A> to be magically transported...

Add the document to be referenced...

Click <A HREF="lesson12.html">here</A> to be magically transported...

And lastly, add the anchor NAME like so...

Click <A HREF="lesson12.html#upabit">here</A> to be magically transported...

And that's all there is to it! Not exactly brain surgery is it??

<< BACK NEXT >>

So, you want to make a Web Page!


Basic HTML Tutorial - Lesson 18

We've covered a lot so far. Text & font manipulation, images, links. As far as the basics go, there's not a whole heck of a lot more.

I think I'm going to take this time to tell you about screen resolution. The screen I work on is 640 pixels by 480 pixels. That means that the screen is divided into 640 dots (pixels) horizontally and 480 dots vertically. Most people use 800x600, some use 1024x768 and some even use a higher resolution. What does this have to do with anything? It has a lot to do with how your pages will look to them. Here are a couple screen shots of my old homepage at different resolutions.

640×480 | 800×600 | 1024×768

It is a very good idea to check your page at other resolutions. Your carefully crafted layout might fall apart at other resolutions. Especially if you design your page at a higher resolution. View your creation at a lower res and you might be surprised. For Windows95 users, there is a handy little MS Powertoy called Quickres that lets you easily switch screen resolutions.

What resolution to design for is an ongoing debate. The ideal is not to design for ANY particular resolution at all. Ideally your pages should be presentable at all resolutions. Since idealistically this is possible and realistically it's not, a nice compromise is to design for a minimum horizontal resolution of about 560, then test your layout at a few different resolutions. While this is a fine compromise, it's still not enough for some folks. Some are content in the knowledge that since "most" people run at 800x600, that's what they will design for. Just be careful when you're page layout is as fragile as a house of cards. The more you fiddle with exact layout, the less dependable that layout will be. Your finely crafted page may fall apart for more people than you realize. Web page layout is not an exact thing even under the best of circumstances... keep it loose, keep if flexible, test your pages with a couple browsers and at a few resolutions.

Now we are going to look at a couple formatting tools availble to you. First one is <BLOCKQUOTE>. In most browsers it pulls your margins in from both sides. (I don't know if that's the proper terminology but if you understand what I mean I guess it's close enough).

<BODY>
<BLOCKQUOTE>
WE THE PEOPLE of the United States, in order to form a more perfect
Union, establish Justice, insure domestic Tranquility, provide for the
common defense, promote the general Welfare, and secure the Blessings
of Liberty to ourselves and our Posterity, do ordain and establish this
Constitution for the United States of America.
</BLOCKQUOTE>
</BODY>

WE THE PEOPLE of the United States, in order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common defense, promote the general Welfare, and secure the Blessings of Liberty to ourselves and our Posterity, do ordain and establish this Constitution for the United States of America.

I'm sure when <BLOCKQUOTE> was first devised it had a loftier purpose, such as quoting profound bits of prose from authors I've never even heard of. But here in the trenches it serves a more mundane purpose... easy indenting.
It's important to note that although most browsers render blockquoted text by indenting it, that's not specifically what it's designed to do. It's conceivable that some future browser may render blockquoted text in some other way (such as red italics). That said however, for the time being, it is perfectly safe to indent blocks of text with <BLOCKQUOTE>.

<< BACK NEXT >>

So, you want to make a Web Page!


Basic HTML Tutorial - Lesson 19

Another very useful little tool is a LIST. There are ORDERED lists and UNORDERED lists.

    This is an ordered list
    1. something big
    2. something small
    3. something short
    4. something tall
            This is an unordered list
    • something red
    • something blue
    • something old
    • something new

First, we will build an UNORDERED list. It's mind-numbingly simple... really.

Start with this...

<BODY>
What I want for Christmas
</BODY>

What I want for Christmas

(Technically we have not started to build the list yet. This is just a sort of heading.)

Add a pair of unordered list tags.

<BODY>
What I want for Christmas
<UL>
</UL>
</BODY>

What I want for Christmas

Add a list item.

<BODY>
What I want for Christmas
<UL>
<LI>a big red truck
</UL>
</BODY>

What I want for Christmas
  • a big red truck

Add a few more...

<BODY>
What I want for Christmas
<UL>
<LI>a big red truck
<LI>a real fast speedboat
<LI>a drum set
<LI>a BB gun
<LI>a Melanie Griffith
</UL>
</BODY>

What I want for Christmas
  • a big red truck
  • a real fast speedboat
  • a drum set
  • a BB gun
  • a Melanie Griffith

Bingo! You made a list!

How to make an ordered list? Easy! Change the <UL> tag to <OL>.

<BODY>
What I want for Christmas
<OL>
<LI>a big red truck
<LI>a real fast speedboat
<LI>a drum set
<LI>a BB gun
<LI>a Melanie Griffith
</OL>
</BODY>

What I want for Christmas
  1. a big red truck
  2. a real fast speedboat
  3. a drum set
  4. a BB gun
  5. a Melanie Griffith

<< BACK NEXT >>

So, you want to make a Web Page!


Basic HTML Tutorial - Lesson 20

Another type of list is a definition list.

aardvark
A burrowing, ant-eating African mammal. And, as everyone knows, the first word in every self-respecting dictionary. Did you know there's such a thing as an aardwolf?

Start with this...

<BODY>
<DL>
</DL>
</BODY>

Then add a definition title...

<BODY>
<DL>
<DT>10th Amendment
</DL>
</BODY>

10th Amendment

And a definition item.

<BODY>
<DL>
<DT>10th Amendment
<DD>The powers not delegated to the United States by the
    Constitution, nor prohibited by it to the States, are
    reserved to the States respectively, or to the people.
</DL>
</BODY>

10th Amendment
The powers not delegated to the United States by the Constitution, nor prohibited by it to the States, are reserved to the States respectively, or to the people.

As a finishing touch I like to make the definition title bold. It's not required, but I think it looks much better that way.

<BODY>
<DL>
<DT><B>10th Amendment</B>
<DD>The powers not delegated to the United States by the
    Constitution, nor prohibited by it to the States, are
    reserved to the States respectively, or to the people.
</DL>
</BODY>

10th Amendment
The powers not delegated to the United States by the Constitution, nor prohibited by it to the States, are reserved to the States respectively, or to the people.

<< BACK NEXT >>

So, you want to make a Web Page!


Basic HTML Tutorial - Lesson 21

Another little widget that you will find yourself using a lot is the Horizontal Rule.

<BODY>
<HR>
</BODY>

We have a few options available to us...

<BODY>
<HR WIDTH=20%>
<HR WIDTH=50%>
<HR WIDTH=100%>
<HR WIDTH=20>
<HR WIDTH=50>
<HR WIDTH=100>
</BODY>

This one is pretty self explanatory.

<BODY>
<HR WIDTH=60% ALIGN="left">
<HR WIDTH=60% ALIGN="right">
<HR WIDTH=60% ALIGN="center">
</BODY>

We can control the thickness of the line...

<BODY>
<HR WIDTH=60% SIZE=1>
<HR WIDTH=60% SIZE=3>
<HR WIDTH=60% SIZE=8>
<HR WIDTH=60% SIZE=15>
</BODY>

And we can make it a solid line.

<BODY>
<HR WIDTH=60% SIZE=1 NOSHADE>
<HR WIDTH=60% SIZE=3 NOSHADE>
<HR WIDTH=60% SIZE=8 NOSHADE>
<HR WIDTH=60% SIZE=15 NOSHADE>
</BODY>

<< BACK NEXT >>

So, you want to make a Web Page!


Basic HTML Tutorial - Lesson 22

Remember when I said that the browser doesn't understand formatting, it just displays text in a steady stream? Kind of like this...

<BODY>
                ///\\___
                (@ @)
     +----oOO----(_)-----------+
     |      BARRY GOLDWATER    |
     |           for           |
     |        President        |
     +-----------------oOO-----+
               |__|__|
                || ||
               ooO Ooo
</BODY>

///\\___ (@ @) +----oOO----(_)-----------+ | BARRY GOLDWATER | | for | | President | +-----------------oOO-----+ |__|__| || || ooO Ooo

Well, with the <PRE> (preformat) tag, we can put a stop to that and have things displayed the way we type them.

<BODY>
<PRE>
                ///\\___
                (@ @)
     +----oOO----(_)-----------+
     |      BARRY GOLDWATER    |
     |           for           |
     |        President        |
     +-----------------oOO-----+
               |__|__|
                || ||
               ooO Ooo
</PRE>
</BODY>

                ///\\___
                (@ @)
     +----oOO----(_)-----------+
     |      BARRY GOLDWATER    |
     |           for           |
     |        President        |
     +-----------------oOO-----+
               |__|__|
                || ||
               ooO Ooo

Notice that a monospaced font is used.

The last tag we're going to discuss is a comment.

<BODY>
<!--This is a comment-->
This is not
<P>A comment can be placed anywhere in the document and the browser
will ignore everything inside the brackets. You can insert hidden
messages, <!--Hi Mom!--> notes to yourself, <!--Pick up milk--> or
write a helpful message to someone looking at the source of your
page.<!--Copy anything off me and you're dead meat!-->
</BODY>

This is not

A comment can be placed anywhere in the document and the browser will ignore everything inside the brackets. You can insert hidden messages, notes to yourself, or write a helpful message to someone looking at the source of your page.

Just to be absolutely clear, the comment must start with <!-- and end with -->
You can (usually) even put other html tags in a comment and they will be ignored. The browser will just keep ignoring everything until it sees a -->

<< BACK NEXT >>

So, you want to make a Web Page!


Basic HTML Tutorial - Lesson 23

Well, that about does it! You now know all the basic tags you'll need to create a web page! Aren't there more tags? Oh yeah. Lots more. But rest assured you've got most of the basic weaponry you'll need. After you tinker with these main tags awhile, you may want to look at some of my other slightly more advanced tutorials: Table Tutor, Form Tutor and Frames Tutor. They will give you a few more really neat things to have in your bag of web publishing tricks. Beyond that, there are quite a few redundant tags, that is tags that in theory have a specialized use, but in practice, duplicate more common tags presented here. There are a few outdated tags, and a few that have such a limited use, it wasn't even worth it to go over them. Plus there are a few browser-specific tags (tags that only work in one browser).

Lately there has been a push to separate structural markup (paragraphs, lists, tables etc) and presentational markup (colors, fonts etc.). The result, in part, has been the introduction of style sheets (CSS). While understanding style sheets is not at all necessary for making web pages, it is a related area where you might wish to expand your studies. The members section of PageTutor.com has a nice CSS Primer that will get you started with stylesheets.

One of the neatest things you can do with a web page is to make it DO stuff. You can investigate the wonderful world of JavaScript and learn to write mini programs that you can insert in your pages. It's a little bit more complex than HTML, but I've written JavaScript Tutor, and that will give you a solid start on some of the basics. In addition there are dozens of "copy-n-paste" javascript sites that offer code for the taking.

I mentioned at the beginning of this tutorial some of my thoughts on HTML editors. In my opinion the best editors to use are not the big clunky wizard types. You know, the ones that say you don't need to know a lick of HTML to author a page. The problem is, a large number of the pages I see that have been put together with these programs look as if the author didn't know a lick of HTML. Not only that, if a problem arises, a person with a basic knowledge of HTML is going to solve that problem a heck of a lot faster than a person who has been leaning on one of those page maulers.

Most experienced authors use some sort of text-based editors. What these editors do is pop in a set of tags for you with a simple click. They make it so you don't have to manually type in color codes, LEFT, RIGHT, CENTER or whatever. You have absolute control over your page design. I once heard the phrase "text editor on steroids" to desribe one. That's about what they are. Several good (and free) ones that come to mind are listed in my Short List of Free HTML Editors. What they all have in common is that you must know some HTML. They will make your coding easier. They don't attempt to do it for you. What do I use? Lately I've been using NoteTab almost exclusively.

Once you have made your pages you will need to upload them to a server. The server is a computer that is running a server program that doles out documents to whoever requests them. For a little bit of guidance on putting your pages on the Web, have a look at Uploading Your Pages.

And before I go, I must say something about web page style and content. Better yet, I think I'll defer to Jeffrey Glover's Top 10 ways to tell if you have a sucky homepage.

Good luck and happy HTML'ing!
- Joe Barta

<< BACK NEXT >>

So, you want to make a Web Page!


Basic HTML Tutorial - Lesson 24

So, you want to make a Web Page!
Lesson 24 - Last one!
Practice, practice, practice. Practice Lessons...Now that you've completed this section, you should really get some practice putting some of this stuff to work.

Here are some excellent materials that you may want to have a look at.

Table Tutor, Form Tutor and Frames Tutor
When you're past the basics and are ready to add a few high octane components to your web page, these three tutorials will take you step by step through the tags.
The HTML Reference Library
An outstanding html guide and reference source in windows HELP format. (Note that you must have Internet Explorer 4 installed for this latest version of the HTML Library to work.)
Beginner's Guide to HTML
A good concise guide that explains the basics very well. I keep a copy and still refer to it on occasion.
Other outstanding HTML & web authoring sites:
The Web Developer's Virtual Library
irt.org
HTML Goodies
Webmonkey
CNET Builder.com
The World Wide Web Consortium

If you need stuff for your pages...
- like backgrounds, bullets, images, sounds, JavaScript or whatever, come by our Web Page Resources section. Help yourself to armloads of stuff!

Got a question?
"How do I fit a thigamajig around a whatchamacallit and put in one of those doohickeys?" Almost without exception your question has already been asked... and already been answered. Look here for FAQs (Frequently Asked Questions) from this tutorial, and links to other excellent HTML FAQ lists.

Got any suggestions? Let's hear 'em.

If you would like to add a link to the pagetutor.com site, you are welcome to use one of the following. Just copy the code, paste it into your page and you're all set.

  <A HREF="http://www.pagetutor.com/"><IMG
  SRC="http://www.pagetutor.com/tack/ptlogos/ptlogo1.gif"
  WIDTH="190" HEIGHT="42" BORDER="0" ALT="pagetutor.com"></A>

  <A HREF="http://www.pagetutor.com/"><IMG
  SRC="http://www.pagetutor.com/tack/ptlogos/ptlogo2.gif"
  WIDTH="190" HEIGHT="42" BORDER="0" ALT="pagetutor.com"></A>

  <A HREF="http://www.pagetutor.com/"><IMG
  SRC="http://www.pagetutor.com/tack/ptlogos/ptlogo3.gif"
  WIDTH="104" HEIGHT="24" BORDER="0" ALT="pagetutor.com"></A>

  <A HREF="http://www.pagetutor.com/"><IMG
  SRC="http://www.pagetutor.com/tack/ptlogos/ptlogo4.gif"
  WIDTH="104" HEIGHT="24" BORDER="0" ALT="pagetutor.com"></A>

<< BACK

So, you want to make a Web Page!


Meet Jack


Meet Jack

This is Jack. He's an odd little boy that just got an empty box for his birthday. He may look happy, but he's a little disappointed. Now he'll have to put a few things in the box.


Meet Jack

This is Jack. He's an odd little boy that just got an empty box for his birthday. He may look happy, but he's a little disappointed. Now he'll have to put a few things in the box.

Jack would really like...

  • Roller blades
  • Magic tricks
  • Anything Pokemon
  • A motorized Lego set


Meet Jack

This is Jack. He's an odd little boy that just got an empty box for his birthday. He may look happy, but he's a little disappointed. Now he'll have to put a few things in the box.

Jack would really like...

  • Roller blades
  • Magic tricks
  • Anything Pokemon
  • A motorized Lego set

You can get all this (and more) at an online toy store. Two very popular ones are toysrus.com and eToys.


Meet Jack

This is Jack. He's an odd little boy that just got an empty box for his birthday. He may look happy, but he's a little disappointed. Now he'll have to put a few things in the box.

Jack would really like...

  • Roller blades
  • Magic tricks
  • Anything Pokemon
  • A motorized Lego set

You can get all this (and more) at an online toy store. Two very popular ones are toysrus.com and eToys.

© 2000 John Q. Webmaster. All rights reserved.


John Q. Smith
10255 Billings Road, Waxahachie TX 75165
972-555-8643


John Q. Smith
10255 Billings Road, Waxahachie TX 75165
972-555-8643

Objective
A management position in a leading family resaurant chain.
Experience
1997-present
Senior Assistant Manager, Great Steaks Steakhouse. Duties include all operational tasks, personnel, ordering and all local advertising and promotional events. Due to extensive local promotion and community involvement, our store's regional sales volume rank has increased from 11 to number 1 and profit margins have increased by 22%.
1994-1997
Line cook and eventual crew chief at Pablo's Mexican restaurant.
1992-1994
Mays department store, sales clerk.


John Q. Smith
10255 Billings Road, Waxahachie TX 75165
972-555-8643

Objective
A management position in a leading family resaurant chain.
Experience
1997-present
Senior Assistant Manager, Great Steaks Steakhouse. Duties include all operational tasks, personnel, ordering and all local advertising and promotional events. Due to extensive local promotion and community involvement, our store's regional sales volume rank has increased from 11 to number 1 and profit margins have increased by 22%.
1994-1997
Line cook and eventual crew chief at Pablo's Mexican restaurant.
1992-1994
Mays department store, sales clerk.
Education
1992-1996
B.A. Business Administration and Food Service Management from Central Texas University
1992
Valedictorian - West End high School
Interests
Big Brothers of Texas, white water rafting, personal computers, primitive camping, gourmet cooking.


My Home


My Links


Basic HTML Tutorial - Netscape's 216 colors

 So, you want to make a Web Page!
Netscape's (web safe) 216 colors
Just a quick note: The topics covered below are not exceptionally important to making web pages. A perfectly good web page can be made without ever learning about this stuff. It is just a little sidetrack that you might say is for somewhat "advanced" HTML students. If you are just learning HTML authoring, I would recommend going back to the tutorial and not cluttering your head with this stuff. Believe me, you have plenty to learn as it is. Once you have a few basic skills under your belt, you can come back here and learn about some of the "finer points".

In addition, nowadays, most people are running their computers using thousands or millions of colors. Color issues that were relevant several years ago are almost non-existant today. Still, the following piece will give you useful knowledge on the topic of colors... knowledge that might be useful in a variety of applications.

Have you ever been surfing along and noticed that some images look pretty crappy? Like all full of speckles? If so, then you have fallen victim to the CLUT. (Keep in mind this was written in 1996. Unless you're using a VERY old box, you probably haven't seen any "speckles". That said, read on.)

Now, before I go any further, let me warn you that I'm really not all that much of a computer geek, so I can only explain things as I understand them. That means I know what I'm talking about... most of the time. That said, let me try to tell you about the how's and why's of computer displays and colors... as I understand it.

* * *

Most computers can run in one of 3 (maybe more) color modes-

  1. 256 color
  2. high color (64,000 colors)
  3. and true color (16.7 million colors)

If you are in true color mode your computer is configured to display up to 16.7 million distinct colors. That gives you a couple million shades of red alone. It's kind of nice because feathered edges look feathered, photographs look fantastic and nice backgrounds actually look nice!

There is a price to pay however. Your poor computer has to work extra hard trying to display everything. Consequently things tend to work a little slower and often a little jerkier. But I gotta admit, images look very good.

If you want to give your processor a bit of a break, you can set your computer to display 64,000 colors rather than 16.7 million. This is the high color mode. Although there is a huge difference between 16.7 million and 64,000 to your computer, the difference is hardly noticeable to your average run-of-the-mill human. You get nice looking images, nicely feathered edges and there's not much in the way of jerkiness or slowness in your display.

Now if your like me, and super high image quality takes a back seat to speed, and you want your display to take up as little resources as possible, or if you have an older computer, you putz around in 256 color mode. All this means is your computer says "Listen, I know that there are 16.7 million colors. But what I'm going to do is only use 256 at a time. If I have to display an image that technically has 80,000 colors in it, I'm just going to try and find the closest 256 colors and just use them. Deal with it."

Now let's take that one step further. Let's suppose your computer is in 256 color mode and you're running Netscape. Netscape says, "I am taking over your colors. Since you only have 256 colors to play with, I am assigning a permanent value to 216 of them. The remaining 40 can be used any way you want." The end result is Netscape dithers all images to those 216 colors.

Dithering is when your computer takes a couple colors it has and tries to blend them to make a color that it doesn't have. This "dithering" is why images are sometimes speckled.

Why does it do this?? Let's suppose you have a web page with two pictures on it. One picture contains 150 distinct colors. The second picture contains another 150 distinct colors. If you display them together then all of a sudden your computer has to deal with 300 separate colors, not to mention the colors for your taskbar and buttons, etc. This throws a serious monkeywrench into the 256 color idea. So what Netscape does is say "Here are the 216 colors we will use for ALL images. Everything gets dithered to these colors."

Netscape's 216 colors

This group of colors is called a CLUT. As far as I know, all browsers have one. However, I don't know if all browsers use the same colors in their clut, or how colors and cluts and such work on operating systems other than Windows. (Hey, I warned you that I didn't know everything)

About Netscape's Colors (part 2) >>

So, you want to make a Web Page!


Basic HTML Tutorial - Netscape's 216 colors - part 2

Gradient 1 - 1021 colors | Gradient 2 - 66 colors

If both of the above images look about the same, then you are running a 256 color display and Netscape is dithering the image on the left to it's 216 colors. If the image on the left looks smooth but the image on the right looks all speckled, then you are running a high or true color display. The image on the left is a few simple gradients, saved in a low compression jpg format. In true color mode the gradient is very smooth and in high color mode it is still quite smooth (although the number of distinct colors falls to 419). The image on the right is a screen capture of the left image through 256 color mode.

I know its tempting to say phooey on anyone using only 256 colors, but keep in mind that a lot of people do just that. If your image is a photograph in jpg format there's not too much you can do. Photographs are simply going to look a little worse to those running 256 colors.

Photo 1 - 20186 colors | Photo 2 - 61 colors

Once again, if the images look about the same then you are in 256 color mode. If the image on the left looks significantly better than the image on the right then you are in high or true color mode. If this is the case then the image on the right is how people running 256 colors will see your picture. But, like I said, with photographs, there's not a whole heck of a lot you can do.

It's a very similar situation using gif images. Even though a gif image can only contain 256 colors, if they are not Netscape's colors, the image will get dithered... ...except when you view a single image through the browser. By that I mean not an image in a web page, but viewing the image directly. As an exercise, right click on the image Ball 1 and choose View Image (Netscape only). What you will then see is the browser displaying the image directly and not by way of a web page. Since the browser knows that no other image will be coming down the pike, it will relax it's 216 color rule and allow your computer to display whatever 256 colors it wants to.

Ball 1 - 232 colors | Ball 2 - 62 colors

One area where we can make a difference, is in drawings. Anything that doesn't contain a lot of gradients. Below are a couple of good examples.

Flag 1 - 18 colors | Flag 2 - 28 colors | Flag 3 - 9 colors

Button 1 - 18 colors | Button 2 - 12 colors | Button 3 - 5 colors

We have Image 1 and Image 2 just like the ones before. (depending on your browser and it's configuration). But now we have this third image. The third one should look just fine to everyone. It is nice and smooth even at 256 colors.

<< About Netscape's Colors (part 1) About Netscape's Colors (part 3) >>

So, you want to make a Web Page!


Basic HTML Tutorial - Netscape's 216 colors - part 3

I did this by using a Netscape pallet in my graphics editor. You can do this too. If you load this image...

...into most any graphics editor you can make a color pallet from it. (Consult your graphic editor's instructions if you don't know how to do this). Then you're ready to go! You can import an existing picture and substitute the closest Netscape color for all the colors in the image. As you can see from the images above, the results are well worth the two minutes (at most) it takes to do this. If you are starting a new image, you can start with the Netscape colors. If your major areas are already done in Netscape's colors, and if you switch to 16.7 million colors for some further editing, when you go to substitute Netscape's colors back in, your image will look pretty much the way you intended. Plus it will look that way to everyone.

If you want to delve a little further into Netscape's browser clut, here's how they came up with the 216 colors. In our everyday life we use a decimal (base 10) number system. We use the following numbers...

0-1-2-3-4-5-6-7-8-9

Somewhere along the line, computer people decided that certain things would be easier to do if they used a hexidecimal (base 16) number system...

0-1-2-3-4-5-6-7-8-9-A-B-C-D-E-F

Since we don't have a unique symbol for 10, 11, 12 etc, we use letters to represent those values. Below are both number systems counting to our 50...

dec:  0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
hex:  0 1 2 3 4 5 6 7 8 9  A  B  C  D  E  F 10 11 12 13 14

dec:  21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37
hex:  15 16 17 18 19 1A 1B 1C 1D 1E 1F 20 21 22 23 24 25

dec:  38 39 40 41 42 43 44 45 46 47 48 49 50
hex:  26 27 28 29 2A 2B 2C 2D 2E 2F 30 31 32

So when someone talks about a "hex code" or "hexadecimal number" or if you see cryptic color codes like 09EC0A, CCFFCC, 00AACC, etc., this is what they're talking about and where it comes from. Taking it a little further, your computer understands colors in terms of red, green and blue values...

RED - GREEN - BLUE

or

R-G-B

Each of those can have a value from 0 to 255. 0 being the absence of color, 255 being full color. Using that scale, we get the following values...

 RED= 255-0-0
 GREEN= 0-255-0
 BLUE= 0-0-255
 BLACK= 0-0-0
 WHITE= 255-255-255

Since we have 3 colors, each with a value that can range from 0 to 255 we have 16,777,216 possible color combinations (256 ³). So, that's how we get 16.7 million colors.

If we replace the decimal number with it's hexadecimal equivalent we start to get something that looks a little more like those "hex codes".

 RED= FF-0-0
 GREEN= 0-FF-0
 BLUE= 0-0-FF
 BLACK= 0-0-0
 WHITE= FF-FF-FF

If we then use 00 for 0, and 01 for 1, etc., and if we get rid of the dashes(-), we then got ourselves some genuwine color codes!

 RED= FF0000
 GREEN= 00FF00
 BLUE= 0000FF
 BLACK= 000000
 WHITE= FFFFFF

Now, how did Netscape go about choosing which colors to use? Rather than using 256 values for each of the three colors, they only use 6. Namely 0, 51, 102, 153, 204 and 255. If we translate those numbers into their hexadecimal equivalents we get 00, 33, 66, 99, CC and FF. Since that is six different values for each of 3 colors, there are 216 possible color combinations (6 ³).

If you go back to the color chart you saw before, you'll see a rendering of all these color combinations.

One last item. If a person is running a 256 color display and you have chosen a background color that is something other than one of Netscape's 216, then there is a very good chance that Netscape will instead pick the closest match from it's own colors. Sometimes this is not a good thing. I have seen pages where this left the text almost unreadable. Once again, I know it may be tempting to say 'too bad' to those of us in 256 color land. But...as I said before, there are a lot of us. And if your goal is to design smart looking web pages, then you might want to consider spending the extra couple minutes to fine tune your graphics so you look good to everyone.

"And that's all I have to say about that." - Forrest Gump

<< About Netscape's Colors (part 2)

So, you want to make a Web Page!


Bare Bones HTML Guide - Notes

The Development of HTML

HTML is the markup language used to create World Wide Web documents. Although official HTML specifications have been in development for some time, individual Web browsers may recognize proprietary tags that are not included in the specifications. When most people ask for a list of "all the HTML tags" they generally want to know which tags they can include in their pages with reasonable certainty that people viewing those pages will see what the author wants. The Bare Bones Guide to HTML is designed to meet this need. I have attempted to include all of the tags supported by major browsers today, but there are a number of nuances that make this an inherently imprecise process.

The official standards body for HTML is the World Wide Web Consortium (W3C). The W3C has issued several versions of the HTML specification, including HTML 2.0, HTML 3.0, HTML 3.2, and most recently HTML 4.0. At the same time, however, browser manufacturers, such as Netscape and Microsoft, have often developed their own "extensions" to HTML outside of the standards process and incorporated them into their browsers. In some cases, such as Netscape's <CENTER> tag, these extensions have become incorporated into the official standard.

HTML 2.0, which codified the current state of HTML as of June, 1994, is the baseline standard that all browsers today -- including text-based browsers -- should support. HTML 2.0 reflects the original conception of HTML as a device-independent markup language for displaying the organization of information, rather than specifying exactly how pages should be displayed. If you want to be sure that all users will be able to view everything on your pages, use only HTML 2.0 tags.

The HTML 3.0 draft, issued in 1995, attempted to build upon HTML 2.0 with the addition of features such as tables and greater control of text flow around graphics. Although some HTML 3.0 features were widely adopted by browser developers, many were not. In some cases, alternative approaches implemented by browser developers became more widespread than the "official" tags. The HTML 3.0 draft has now expired, and is therefore no longer an official standard.

In January 1997, W3C adopted the HTML 3.2 recommendation, which was designed to reflect and standardize generally-accepted practices. Therefore, HTML 3.2 includes the HTML 3.0 tags that were adopted by browser developers such as Netscape and Microsoft, as well as widely-supported extensions to HTML.

HTML 4.0, the current standard, became a W3C recommendation in April 1998. This version includes a number of new formatting elements, changes related to scripts and style sheets, and several modifications to make Web pages more accessible to people with disabilities. The current versions of major browsers should support all, or virtually all, these tags.

For the future, W3C is working to refomulate HTML in the context of the extensible markup language (XML), a broader and more flexible standard. For more information, see the current W3C working draft, adopted in December 1998.

There are also some Netscape and Microsoft extensions to HTML that were not incorporated into the official HTML standard. By popular request, they are listed in the Bare Bones Guide to HTML. In deciding whether to use any of the tags listed as Netscape or Microsoft extensions, remember that people using other browsers may not see your pages rendered the way you intend.

Back to the Guide

Prologue

The prologue item should go at the very beginning of your file. The prologue is not required for browsers to recognize an HTML document, although this can provide browsers and people reading your HTML source file with an indication of which tags it includes. The exact syntax of the prologue varies depending on which version of the HTML DTD (document type definition) you are using. I've included the prologue to use if your document conforms to HTML 4.0; don't use this if you include Netscape or Microsoft extensions.

Back to the Guide

<XMP>

Earlier version of HTML also included the <XMP> (example) tag, and some people still use it to display un-rendered HTML syntax on a page. However, browsers handle <XMP> inconsistently, and the tag is listed as obsolute in the current HTML specification. The <PRE> tag should be used instead.

Back to the Guide

<BLOCKQUOTE>

The suggested rendering of the <BLOCKQUOTE> tag is to indent the left and right margins, and this tag is frequently used to achieve indenting (which HTML 2.0 does not support directly) rather than for quoted material. Be aware that not all browsers display the tag this way, although more browsers seem to be indenting it as time goes on.

Back to the Guide

Alignment Tags

The HTML 4.0 specification includes both the alignment attributes for paragraph and header tags, and the <CENTER> tag originally developed by Netscape. These days, the main area in which <CENTER> is necessary is in situations (such as centering a table in Netscape Navigator), where a browser doesn't recognize the alignment attributes.

The biggest problem with <CENTER> is that it implies a paragraph break around the centered material, but browsers that don't recognize the <CENTER> tag will simply ignore it, and thus not render the document the way the author intended it. As more browsers today recognize the alignment tags, using <P ALIGN=CENTER></P> will increasingly be preferable to the nonstandard <CENTER> tag.

Back to the Guide

The <P> Tag

Most HTML tags are "containers;" they have a beginning and an ending tag, with text in the middle (e.g. <B>This is in boldface</B>). The <P> tag, by contrast, was originally defined as a standalone tag that marked the space between paragraphs. The problem with this approach is that it didn't allow for features such as centering and right-aligned paragraphs, because there was no way to mark the beginning and end of the text to be aligned. Consequently, the HTML 3.0 proposal from its early days has defined <P> as a container tag, so that paragraphs should be represented as <P>Here's some text</P>, and the opening <P> tag can contain alignment and other attributes. The closing </P> tag can often be left off when you are not setting the alignment of a paragraph, although using it may make the boundaries of paragraphs cleaner in your HTML source file.

Back to the Guide

Color Tags

Color values are entered in the form of a hexadecimal triplet specifying red, green, and blue values. My WWW Help Page has a section of links to utilities that can generate these codes for you.

Back to the Guide

Copyright © 1995-1999 Kevin Werbach.
Last updated February 1, 1999.

So, you want to make a Web Page!


RED GREEN BLUE
Background
Text
Link
Visited Link
Active Link
Font/Size:
Bold Italic
Choose a background image (optional):

Instructions:

This widget will help you fine tune the hex color codes for your web page. First choose whether you wish to play with the Background Color, Text Color, Link Color, Visited Link Color or Active Link Color and check the appropriate round radio button on the left side. Then either click the little arrow buttons next to the value you want to manipulate, or choose from one of the colors in the color chart.

Beside each hex color value you'll find two up arrows (one big and one small) and two down arrows (again one big and one small). The small arrows increment the color by 1 and the big arrow increments the color by 8.

Change the font and font size if you wish, along with rendering bold and italic. When you're done you can copy the current BODY tag that's generated in the right frame and paste it in your page.

You can choose a background image from your hard drive and have have it displayed in the right frame. Just click "Browse", choose an image, then click the Set Background button. To clear the background image just clear the file input box and click Set Background again.

All in all it's fairly easy to use. If you're a little lost, just play with it for a while and all will be clear. And, if you'd like a little background on "hex codes", what they are and where they come from, click here.
ColorPicker v 2.0 by Joe Barta
pagetutor.com


Basic HTML Tutorial - Paint Shop Pro and IrfanView

Paint Shop Pro

It's not an overstatement to say that Paint Shop Pro is the Great Grandaddy and Godfather of web graphics. The non-expiring fully functional shareware version of PSP3 helped fuel the growth of the WWW by placing powerful graphics editing and conversion capability into the hands of millions. After a modest 2 Mb download... you were a web artist.

It's no secret that only a small percentage of all copies were actually paid for. It's also not a stretch to assume that the folks over at JASC knew that, but allowed their editor to be distributed far and wide anyway. Surely they were looking for exposure and were willing to let us share in the benefits. So, I believe that I speak for millions when I say to JASC... Thank-you.

Well, Paint Shop Pro is up to version 7 now. It's a 30-day time-limited demo. The full version is only $99. It's a powerhouse of an application and dollar for dollar, it easily ranks at the top of any list. Read all about it here.

If you're rather new at graphics work and are looking for something a little less whiz-bang, yet still very powerful, you should grab yourself a copy of Paint Shop Pro version 3. This is the one that put PSP on the map. I have a copy of the old non-expiring version here (It says you have 30 days, but it will continue to work after the 30 days)...

psp312-32.zip Screenshot

I use it all the time and recommend it very highly. With it you can dig right into your images on a pixel level. You'll learn about colors, color depth, palettes, basic image editing, plus you can effortlessly convert between many popular image formats. After you become familiar with version 3, the latest version will be that much easier to use.

While I strongly recommend you start off with Paint Shop Pro version 3, I also have a copy of a non-expiring version 4. You can get it here.

IrfanView is the graphics viewer that I use. It's fast, handles all major image formats (and quite a few not-so-major ones), it does slide shows, killer batch conversions, thumbnail browsing, it plays videos and sounds AND it's FREEWARE. (Well, postcardware. Send the kid a postcard and he's happy). Hook your images up to this thing, doubleclick on the icon and it pops open in a flash.

Visit his site and download it.

So, you want to make a Web Page!


Basic HTML Tutorial - Paint Shop Pro and IrfanView

Paint Shop Pro v3 screenshot:

Paint Shop Pro v3 screenshot

So, you want to make a Web Page!


Basic HTML Tutorial - Quickres

For Windows95 only. (NOT Windows 98/NT*)

At this writing, Quickres seems to be only available from the Microsoft site as part of the MS Powertoys for Win95 package. Since most of the powertoys have a certain amount of usefulness, you may want to grab the whole thing (209Kb). Here is the MS Powertoy web page...

MS Powertoys at www.microsoft.com

For the Quickres component by itself (39Kb), the following FTP Search should take you to several download locations...

Quickres (quik_res.exe)

Installing it can be a little annoying. First double click on quik_res.exe. It will barf up two files - Quickres.exe and Quickres.inf. You may be able to use Quickres.exe right out of the package (that is, without installing it with Quickres.inf). You can try, it won't hurt anything. When the program starts up, it will deposit a little monitor in your tray area. Left click on it once and a menu will pop up.

If it seems that you must install it for it to work, right click on Quickres.inf and choose install or active install. This is where the tricky part is. The install script may not be able to "find" the program, so you'll have to help it along. Just fiddle with it for a bit.. it'll go.

Installing it will place a shortcut in your start-up folder so unless you want this little bad boy starting up all the time, move the shortcut to somewhere else. Also, there is no "Exit" command. The thing has no off switch. To shut it down you'll have to CTRL+ALT+DEL and choose Quickres from the menu.

* With Windows98 you can change the monitor resolution easily. Right click on the desktop and choose Properties. Choose the Settings tab and select a desktop area.

So, you want to make a Web Page!


Basic HTML Tutorial - Index & Quick Reference

So, you want to make a Web Page!
INDEX
& Quick Reference
Basic Document Structure Basic Text Formatting
Structural Formatting Images Links Miscellaneous
Basic Document Structure
Go
<HTML>
<HEAD>
<TITLE>My big ole bad page!</TITLE>
</HEAD>
<BODY>
Hello Joe!
</BODY>
</HTML>

Basic Text Formatting
Go | Make text bold: <B>Sample</B>
Go | Make text italics: <I>Sample</I>
Go | Make text underlined: <U>Sample</U>
Go | Monospaced text: <TT>Sample</TT>
Go | Change font size (sizes:1-7) <FONT SIZE=5>Sample</FONT>
Go | Change the font name (face) <FONT FACE="fontname1,fontname2,etc">Sample</FONT>
Go | Change the font color <FONT COLOR="#0000FF">Sample</FONT>
Go | Section headings (1-6): <H1>Sample</H1> Align the section heading: <H1 ALIGN="center">Sample</H1>
Go | Change text, link, etc color for whole page <BODY BGCOLOR="#123456" TEXT="#23456A" LINK="#3456AB" VLINK="#456ABC" ALINK="#56ABCD">
Go | The Handy Dandy Font Viewer (intro page), Open viewer directly
Go | The rollercoaster!

Structural Formatting
Go | Line breaks <BR>
Go Multiple line breaks:
<BR>
<BR>
<BR>
Go | New paragraph <P>
Go | New paragraph + ALIGN <P ALIGN="left|center|right">
Go | Old style centering: <CENTER>Sample</CENTER>
Go Horizontal Rule (plain default): <HR>
With a few parameters: <HR ALIGN="left" WIDTH=90% SIZE=1 NOSHADE>
Go | Pull in your margins with Blockquote: <BLOCKQUOTE>Sample</BLOCKQUOTE>
Go Ordered(<OL>) and Unordered(<UL>) lists:
<OL>
<LI>List item
</OL>
Go Definition list (bold tags optional):
<DL>
<DT><B>Definition title</B>
<DD>Definition item
</DL>
Go Preformat tag:
<PRE>
Sample
   Sample
      Sample
</PRE>

Images
Go | Inserting an image (gif or jpg): <IMG SRC="myimage.gif" WIDTH=123 HEIGHT=456 ALT="My Image">
Go | Specify background image (gif or jpg): <BODY BACKGROUND="mybackground.gif">
Go | Fixed background images (IE specific): <BODY BACKGROUND="mybackground.gif" BGPROPERTIES=FIXED>
Go | Save an image off of a page
Go | Image sources (SRC) explained in detail.
Go | About image sizes
Go | Using thumbnails
Go | Make lines out of a 1x1 dot
Go | The incredible GIFWorks
Go | Get Paint Shop Pro and IrfanView!

Links
Go Add a relative link <A HREF="page.html">My page</A>
Add an absolute link: <A HREF="http://www.yahoo.com/page.html">Yahoo's page</A>
Go Link to a particular section of a page:
<A HREF="page.html#cheesewiz">About Cheese Wiz</A>
Go Add an email link:
<A HREF="mailto:scottie@enterprise.com">Email Scottie</A>
Go Making an image a link:
<A HREF="page.html"><IMG SRC="mypic.gif" WIDTH=123 HEIGHT=456></A>
Go Get rid of the blue border around an image link
<IMG SRC="myimage.gif" WIDTH=123 HEIGHT=456 ALT="My Image" BORDER=0>
Go Absolute vs Relative URLs

Miscellaneous
Go | Upload your pages to the Web.
Go | Specify background color: <BODY BGCOLOR="#123456">
Go | Specify background image (gif or jpg): <BODY BACKGROUND="mybackground.gif">
Go Fixed background images (IE specific):
<BODY BACKGROUND="mybackground.gif" BGPROPERTIES=FIXED>
Go | Color Picker
Go | Tags in combination - Overlapping vs Nested tags
Go | More about Overlapping vs Nested tags
Go | About Netscape's 216 colors
Go | Netscape's 216 color chart (image)
Go | Netscape's 216 color chart (page)
Go | Space code (special character for a space) &nbsp;
Go Six main special characters:
&nbsp;     non-breaking space
&lt;       < less-than symbol
&gt;       > greater-than symbol
&amp;      & ampersand
&quot;     " quotation mark
&shy;       soft hyphen
Go | A whole bucketful of special characters
Go | About screen resolution
Go | Comment tag: <!-- This is a comment -->
Go | Save document as an HTML file
Go | View the source [image] of any HTML document and see how they did stuff.
Go | About files & file extensions
Go | Quickres
Go | Joe's Short List of FREE HTML Editors

So, you want to make a Web Page!


Basic HTML Tutorial - Special Characters

 So, you want to make a Web Page!
Special Characters
This list has been shamelessly copied from the HTML Quick Reference Guide.

ISO Latin-1 characters

&Agrave;  À  capital A, grave accent      &iuml;    ï  small i, diæresis/umlaut
&agrave;  à  small a, grave accent        &ETH;     Ð  capital Eth, Icelandic
&Aacute;  Á  capital A, acute accent      &eth;     ð  small eth, Icelandic
&aacute;  á  small a, acute accent        &Ntilde;  Ñ  capital N, tilde
&Acirc;   Â  capital A, circumflex        &ntilde;  ñ  small n, tilde
&acirc;   â  small a, circumflex          &Ograve;  Ò  capital O, grave accent
&Atilde;  Ã  capital A, tilde             &ograve;  ò  small o, grave accent
&atilde;  ã  small a, tilde               &Oacute;  Ó  capital O, acute accent
&Auml;    Ä  capital A, diæresis/umlaut   &oacute;  ó  small o, acute accent
&auml;    ä  small a, diæresis/umlaut     &Ocirc;   Ô  capital O, circumflex
&Aring;   Å  capital A, ring              &ocirc;   ô  small o, circumflex
&aring;   å  small a, ring                &Otilde;  Õ  capital O, tilde
&AElig;   Æ  capital AE ligature          &otilde;  õ  small o, tilde
&aelig;   æ  small ae ligature            &Ouml;    Ö  capital O, diæresis/umlaut
&Ccedil;  Ç  capital C, cedilla           &ouml;    ö  small o, diæresis/umlaut
&ccedil;  ç  small c, cedilla             &Oslash;  Ø  capital O, slash
&Egrave;  È  capital E, grave accent      &oslash;  ø  small o, slash
&egrave;  è  small e, grave accent        &Ugrave;  Ù  capital U, grave accent
&Eacute;  É  capital E, acute accent      &ugrave;  ù  small u, grave accent
&eacute;  é  small e, acute accent        &Uacute;  Ú  capital U, acute accent
&Ecirc;   Ê  capital E, circumflex        &uacute;  ú  small u, acute accent
&ecirc;   ê  small e, circumflex          &Ucirc;   Û  capital U, circumflex
&Euml;    Ë  capital E, diæresis/umlaut   &ucirc;   û  small u, circumflex
&euml;    ë  small e, diæresis/umlaut     &Uuml;    Ü  capital U, diæresis/umlaut
&Igrave;  Ì  capital I, grave accent      &uuml;    ü  small u, diæresis/umlaut
&igrave;  ì  small i, grave accent        &Yacute;  Ý  capital Y, acute accent
&Iacute;  Í  capital I, acute accent      &yacute;  ý  small y, acute accent
&iacute;  í  small i, acute accent        &THORN;   Þ  capital Thorn, Icelandic
&Icirc;   Î  capital I, circumflex        &thorn;   þ  small thorn, Icelandic
&icirc;   î  small i, circumflex          &szlig;   ß  small sharp s, German sz
&Iuml;    Ï  capital I, diæresis/umlaut   &yuml;    ÿ  small y, diæresis/umlaut

Additional characters from ISO 8859-1

&#160; &nbsp;     non-breaking space          &#177; &plusmn; ± plus-or-minus sign
&#161; &iexcl;  ¡ inverted exclamation mark   &#178; &sup2;   ² superscript two
&#162; &cent;   ¢ cent sign                   &#179; &sup3;   ³ superscript three
&#163; &pound;  £ pound sign                  &#180; &acute;  ´ acute accent
&#164; &curren; ¤ general currency sign       &#181; &micro;  µ micro sign
&#165; &yen;    ¥ yen sign                    &#182; &para;   ¶ pilcrow (paragraph sign)
&#166; &brvbar; ¦ broken (vertical) bar       &#183; &middot; · middle dot
&#167; &sect;   § section sign                &#184; &cedil;  ¸ cedilla
&#168; &uml;    ¨ umlaut/dieresis             &#185; &sup1;   ¹ superscript one
&#169; &copy;   © copyright sign              &#186; &ordm;   º ordinal indicator, male
&#170; &ordf;   ª ordinal indicator, fem      &#187; &raquo;  » angle quotation mark, right
&#171; &laquo;  « angle quotation mark, left  &#188; &frac14; ¼ fraction one-quarter
&#172; &not;    ¬ not sign                    &#189; &frac12; ½ fraction one-half
&#173; &shy;     soft hyphen                 &#190; &frac34; ¾ fraction three-quarters
&#174; &reg;    ® registered sign             &#191; &iquest; ¿ inverted question mark
&#175; &macr;   ¯ macron                      &#215; &times;  × multiply sign
&#176; &deg;    ° degree sign                 &#247; &div;    ÷ division sign

So, you want to make a Web Page!


Suggestion Box

About the tutorials and the web site...

What's good?
What's bad?

What is over-explained?
What is under-explained?

What more would you like to see?
What could you do without?

Tell me.

jbarta@pagetutor.com

So, you want to make a Web Page!


Template_nsb

A ll the king's horsthe kings men couldn't put Humpty Dumpty together a ga in. A ll the king's horses a nd A ll the kings men couldn't put Humpty Dumpty together a ga in. A ll the king's horses a nd A ll. A ll thether a ga in. A ll the king's d A ll the kings men couldn't put Humpty Dumpty together ga in. A ll the king's horses a nd A llkings men couldn't put Humpty Dumpty king's horses a nd A ll the kings men couldn't put Humpty Dumpty together a ga in. A ll the king's horses a nd A ll the kings men couldn't put Humptes a nd A ll the kings men couldn't put Humpty Dumpty together a nd A ll the kings men couldn't put Humpty Dumpty together a ga in. A ll the king's horses a nd A ll the kings men couldn't put Humpty Dumpty togetoget the kings men couldn't put Humpty.

DumptDumpty togetrses a nd A ll the kings men couldn't put Humpty Dhorses a nd A ll the kings men couldn't put Humpty Dumpty together a ga in. A ll the king's horses a nd A ll the kings men couldn't put Humpty Dumpty togy t a ga in. A ll the king's horses a nd A ll the gs men couldn't put Humpty Dumpty together a ga in. A ll the king's horses a ng's A ll the kings men couldn't put Humpty Dumpty togetherogether a ga in. A ll the king's horses a nd A ll the kings men couldn't put A ll a ga in. A ll the king's horses a nd A ll the kings men couldn't put Humpty Dumpty together a ga s horsesn. A ll the king's horses a nd A ll the kings men couldn'ta the king's.

<< BACK NEXT >>

So, you want to make a Web Page!


Site Map

Table of Contents

• Print Versions - PageTutor & Javascript Tutor available in book form
• PageTutor Membership Information

So, you want to make a Web Page!
    Introduction
    Lesson 1: getting started, saving as html
    Lesson 2: background colors, background images
    Lesson 3: bold, italic, underlining, nesting tags
    Lesson 4: monospaced font, font size, font face
    Lesson 5: font color, more about nesting tags
    Lesson 6: section headings, link colors
    Lesson 7: line breaks
    Lesson 8: paragraph tag & paragraph aligning, centering
    Lesson 9: the "space code", special characters
    Lesson 10: inserting images, relative paths
    Lesson 11: ALT attribute, image dimensions, colored lines
    Lesson 12: simple links
    Lesson 13: email links, image links
    Lesson 14: more on linking
    Lesson 15: about image filesizes, the GIF Optimizer
    Lesson 16: making & using thumbnails
    Lesson 17: more on images, image filesizes, thumbnails, anchors
    Lesson 18: screen resolution, blockquote
    Lesson 19: ordered & unordered lists
    Lesson 20: definition lists
    Lesson 21: horizontal rules
    Lesson 22: preformating, comments
    Lesson 23: final thoughts
    Lesson 24: more resources, PageTutor buttons
    Index and Quick Reference
    Quickres
    Color Picker
    Handy Dandy Font Viewer
    About Netscape's 216 colors
    Special Characters
    About files
    Fixed background image
    GIFWorks
    Upload your page to the Web
    About Paint Shop Pro and IrfanView
    Download Paint Shop Pro version 3
    Color Charts:
      Netscape's 216 colors (image)
      Netscape's 216 colors (page)
    Practice Exercises

Frequently Asked Questions - Someone else has probably already asked your question.

Bare Bones Guide to HTML (by Kevin Werbach)

Grey Matter Web Pro - the high-tech web editor

Internet Hyper-Glossary - lots of Internet terminology defined

Suggestion Box

Online Resources for Web Authors
    Graphics & Clipart
    Javascript
    CGI
    HTML
    Tools
    Services
    Flash
    Sounds
    Java
    Miscellaneous
    Submit Resource

Joe's Short List of Free HTML Editors

How to keep an idiot busy

So, you want to make a Web Page!


Basic HTML Tutorial - Upload your pages

So, you want to make a Web Page!
Upload your pages

First off, understand that the procedure for getting your pages on the Internet can vary greatly. Your circumstances might be a little different than what I outline here. Also know that this is notoriously confusing for beginners. It may be a lot of stumbling around at first. But, you will get it. Just keep at it and don't give up.

One more thing before we begin. Your ISP probably already has help pages set up for uploading your pages. Look at their web site first and see what you can find. Needless to say, follow their instructions over mine.

That said, the first thing you'll need is an FTP program. FTP stands for File Transfer Protocol and it is the method we use to transfer files from place to place on the Internet. An FTP program (or FTP client) simply puts a nice graphical interface to an old command-line protocol. What we'll use for this example is a great little freebie called FTP Explorer. (For Win95/98)

FTP Explorer

Download it and install it before you go any further.

Another thing you'll need is your server's FTP address, your login name and your password. Your login name and password you should already know - that's probably the login & password you use to connect to the internet. You can get your server's FTP address from your Internet Service Provider. If your ISP is excellent.net, then the FTP address is probably ftp.excellent.net. Double check with your ISP just the same though. Your server might also require that you place all web documents in a directory of a special name. That name can be public_html, www, public or something else. Get this info also from your ISP.

As soon as you crank up FTP Explorer you'll get the Connect dialog:

Plug in the following information...

  • Profile Name: Just a label for the list of sites at left. This can be anything you wish.
  • Host Address: This is your server's FTP address that I told you to get.
  • Login: your login name.
  • Password: your password.

Don't worry about the rest for now. After you add this info, hit Add. You'll then see your brand new profile at the left. Highlight it and hit the Connect button.

Hopefully all went well up til now and you're connecting to the server. As soon as you're connected, you should see something like this. (It's very possible that the contents of this directory are different than what is shown here. It's also possible that yours is completely empty.)

Just so we're on the same page, make sure you've chosen the "Details" view. (circled above)

Upload (part 2) >>

So, you want to make a Web Page!


Basic HTML Tutorial - Upload your pages - part 2

So, you want to make a Web Page!
Upload your pages - part 2

Our first order of business is to make our web directory. (You needed to ask your ISP what this was remember? Also it's very possible that in your situation this step is not even necessary.) For this exercise we'll call it www. So, what we want to do is Make Directory www.

Right click in the right window and choose New/Folder:

Then rename it to www (or whatever the proper name is.)

Now double click on that new folder to get into it:

<< Upload (part 1) Upload (part 3) >>

So, you want to make a Web Page!


Basic HTML Tutorial - Upload your pages - part 3

So, you want to make a Web Page!
Upload your pages - part 3

To upload a file, press the button with the blue up-arrow. This will open an Upload dialog:

Now browse to the files you want to upload:

Select the file and press the Open button. The file will automagically be uploaded to the server:

Now let's try to figure out what your web page URL is. In a simple world it would be...

http://www.excellent.net/~bigjoe/page1.html

Some servers use a slightly different name for user's web pages so your URL might be something like...

http://members.excellent.net/~bigjoe/page1.html

Once again, this info can be had from your ISP.

And that's about it. Learning to do this can be a little rough at first. It's all new. Rest assured though, soon you'll be able to do it with your eyes closed.

<< Upload (part 2)

So, you want to make a Web Page!


My big ole bad page!

 Hello Joe!