You need just four items to create and put web pages on the Internet:
So, if you have Windows 95, Windows 98, or a later version of Windows, you already have all the software you'll need. You should find your ISP-specific information on their web site. If not, an E-mail or phone call to your ISP's help desk will get it for you.
The basic process for creating a web page is:
The basic framework for any web page is these few lines:
<HTML>
<HEAD>
<TITLE>Title of Your web page</TITLE>
</HEAD>
<BODY>
Contents of Your web page
</BODY>
</HTML>
Some general comments before we jump into writing HTML. Many servers run Unix. So file names may be case-sensitive when you try to view your files via the Internet, where Windows just didn't care. You can save yourself a lot of confusion and trouble by using only lowercase letters (a-z), numbers (0-9), and minus signs (-) in your file names. Then, if you write the rest of your HTML using uppercase letters (A-Z), the HTML tags and modifiers will stand out from the ordinary text.
The contents of your web page will be text mixed with HTML tags. Most HTML tags take the form <TAG>object</TAG> or <TAG MODIFIER(S)>object</TAG>
You may string HTML TAGs together like this: <TAG1>object1</TAG1> <TAG2>object2</TAG2>
Or you may embed HTML TAGs inside one other like this: <TAG1><TAG2>object1&2 </TAG2></TAG1>
It is very important to have <TAG> followed by the corresponding </TAG>. So I find it easiest to write HTML from the outside in:
The contents of your web page may be any desired mixture of:
Unless told otherwise, the browser will just concatenate text, ignoring tabs and multiple spaces. To end a line, put in a <BR> break tag. To end a line and force a blank line for spacing, put in a <P> paragraph tag. These tags do not have an object, so they do not require an ending </BR> or </P>.
You can emphasize text by making it a header. <H1>text</H1> makes the tallest, widest headers. <H2>text</H2> is a little smaller, going on down to <H6>text</H6> which is about the same size as regular text. Headers automatically put a blank line before the following text or images.
The two most-common types of lists are:
Unordered lists begin each entry with a bullet (circle, square, or
disk depending on the depth of sublists). The basic HTML is:
<UL>
<LI>first item
<LI>second item
...
</UL>
Ordered lists begin each entry with a number. The basic HTML is:
<OL>
<LI>first item
<LI>second item
...
</OL>
You can embed a .gif (GIF89a format) or a .jpg image into your web page with a <IMG SRC="url"> or <IMG SRC="url" ALT="description"> tag. The URL can be just filename.extension if the .gif or .jpg file will be in the same directory as the web page. .gif files are usually created with a paint program. .jpg files are usually scanned or downloaded from a digital camera. You can find large collections of images that you may use for free by searching the Internet for Clipart or "Clip Art".
Links are one of the most powerful and useful features of HTML. To link to another web page, use a <A HREF="url"> description </A> tag. To link to another spot within your own web page, use a <A HREF="#anchor"> description </A> tag. The target of the link, or "anchor", is marked with a <A NAME="anchor"> text/image </A> tag.
Once you are satisfied with the web page on your own computer, you need to ftp the web page and any associated files to your ISP's server. Using ftp in the MS-DOS window:
NOTE: There may be a delay between uploading your files and being able to browse them, if your ISP has to transfer the files between servers.
Now let's discuss:
Last time we discussed the <BR> break and <P> paragraph tags to add whitespace to your web page. You can break a web page into more distinct sections with the <HR> horizontal rule tag. This puts a thin black line across the page. <HR SIZE=n> puts an n-pixel-high shaded line across the page, while <HR SIZE=n NOSHADE> puts a solid black line across the page.
We have discussed using the <H1></H1> through <H6></H6> tags to create headers. You can also use the following tags to emphasize text in various ways. Your web page will usually look better if you use these effects in moderation, restricting yourself to maybe three or four of these tags, instead of going hog wild with them. The tags and their effects are:
<, >, &, and " have special meanings to browsers. To make them appear on your web page you must use the corresponding special characters <, >, &, and ". Another very useful special character is which forces a blank character on the web page. This is useful if you want to leave a cell of a table empty, for example. NOTE: these special characters must be entered in undercase, as shown above. Many thousands of additional characters are available by using special characters of the form &#n; where n is the ISO 8859-1 code number.
Three more types of lists that you can create are:
A definition list presents words or phrases and their definitions.
The basic HTML is:
<DL> start of definition list
<DT>first term
<DD>first definition
<DT>second term
<DD>second definition
...
</DL> end of definition list
A menu list offers the reader a series of choices. Each entry in the
menu is preceded by a circle. The basic HTML is:
<MENU> start of menu list
<LI>first choice
<LI>second choice
...
</MENU> end of menu list
A directory list offers the reader a directory of something. Each
entry in the directory is preceded by a circle. The basic HTML is:
<DIR> start of directory list
<LI>first item
<LI>second item
...
</DIR> end of directory list
If you have a lot of related information to present, you may want to put it in
a table. A table consists of a series of rows and columns. In writing the
HTML for a table we start at the top and work our way down row-by-row. Within
each row we start at the left and work our way right column-by-column. The
basic HTML for a table is:
<TABLE BORDER> start of the table (with borders)
<TR>
<TH>header for first column</TH>
<TH>header for second column</TH>
...
</TR>
<TR>
<TD>data for first row first column</TD>
<TD>data for first row second column</TD>
...
</TR>
<TR>
<TD>data for second row first column</TD>
<TD>data for second row second column</TD>
...
</TR>
...
</TABLE> end of the table
Now let's discuss:
You can flow text around an image if the image is narrower than the web page. To align text:
To put the image left of the text, use a
<IMG SRC="graphic location" ALIGN=LEFT> tag.
To put the image right of the text, use a
<IMG SRC="graphic location" ALIGN=RIGHT> tag.
We've talked about making a simple table. Our first enhancement will be to add a caption. The caption goes above the table if we put it in a <CAPTION>text</CAPTION> or <CAPTION ALIGN=TOP>text</CAPTION> tag. The caption goes below the table if we put it in a <CAPTION ALIGN=BOTTOM>text</CAPTION> tag.
We can put headers down the left-hand column of a table if we make the first entry for each row <TH>text</TH> instead of <TD>text</TD>.
We can make a header or data cell several columns wide by putting a COLSPAN=n modifier in the <TH> or <TD> tag. Similarly we can make a header or data cell several rows high by putting a ROWSPAN=n modifier in the <TH> or <TD> tag.
In generating a table, the browser usually determines the width of each column based on the widest cell in that column. Similarly the height of each row is set by the highest cell in that row. If the contents do not completely fill a cell, you can position them horizontally by putting an ALIGN=LEFT, ALIGN=CENTER, or ALIGN=RIGHT modifier in the <TH> or <TD> tag. Similarly, you can position the contents vertically by putting a VALIGN=TOP, VALIGN=MIDDLE, or VALIGN=BOTTOM modifier in the <TH> or <TD> tag.
Three factors that slow down the loading of a web page, as seen by the readers, are:
To solve the first problem, if possible include graphics on the same server as the web page, and preferably in the same directory.
To solve the second problem, consider incorporating "thumbnails" in your web page instead of the complete graphics. These can be created by almost any graphics program by resizing images and saving them under another name (for example, tfilename.extention). Put the thumbnails in your web page with links to the full-size images, thusly: <A HREF="full-size image"><IMG SRC="thumbnail"></A>
The reader can click on the thumbnail if they want to see the full-size image. If I take a normal-resolution (two stars) picture with my Polaroid PDC640 digital camera, the image takes about 50KB. If I convert it to a 72-pixel high thumbnail with Paint Shop Pro, the thumbnail takes about 2KB. Depending on how many pictures I have on a web page, this could speed loading by a factor of 10-15!
If you still want to use large graphics on your web page you can ease the browser's task by telling it how big the picture will be up front. Use an <IMG SRC="whatever" HEIGHT=y WIDTH=x> tag, where y and x tell how many pixels to reserve for the picture. Or use an <IMG SRC="whatever" HEIGHT=w% WIDTH=z%> tag where w and z are the percentage of the browser's window to reserve for the picture.
If the reader loads the entire web page, it will take almost exactly the same time with or without the HEIGHT and WIDTH modifiers. But instead of having to wait while each image is slowly painted on the screen, with these modifiers included the reader sees text quickly thrown onto the screen around empty boxes. Then the reader will see several boxes at a time being filled in. Thus the reader has the option of waiting for all the images to appear, or they can scan the web page and jump elsewhere immediately if they so desire. In either case, the reader's perception is that the web page loads faster than if you don't specify image sizes.
NOTE: You can get some really weird effects if you specify HEIGHT and WIDTH with a different aspect ratio than the actual image, because the browser will stretch/squeeze the picture to fit the box.
One of the best ways to enhance your design and writing skills is by studying and emulating works that you admire. Unlike most programs, where few people besides the original programmers get to see and study the source code, the HTML for web pages is available to everyone. All the browsers that I have used let you look at the source HTML. Just go up to the browser's taskbar and click on File. Look for a Source or HTML entry in the pulldown menu. If you don't find anything there, click on View and look for Source Document or something of that sort. When you click this secondary command you will get another window showing all the HTML for the web page. You can also save the web page to your computer, then use your editor's cut and paste functions to incorporate some of its ideas into your web page.
So far we've concentrated on content- getting ideas from your head into the heads of your readers. You may also want to add texture or color to your web page, to make it more visually interesting. Please use these effects in moderation, though, because something that looks "cool" on your own computer may look garish and unreadable when viewed:
You can use the BACKGROUND modifier in the BODY tag to create a
background image for your web page. The basic Hypertext Markup
Language (HTML) framework for your web page looks like:
<HTML>
<HEAD>
<TITLE>Title of Your web page</TITLE>
</HEAD>
<BODY BACKGROUND="filename.ext">
contents of your web page
</BODY>
</HTML>
This background image will be "tiled"- repeated horizontally and vertically as many times as needed- to fill the web page or browser window. A light image works best as background for dark text. A dark image works best as background for light text. If you want to use an image with a mixture of dark and light areas as a background, use a photo-editor program to reduce the contrast, then adjust the overall lightness/darkness to provide adequate contrast with your text.
Another technique to brighten up your web page(s) is to use colors. The <BODY> tag lets you set:
"Color" may be the name of a color, such as "black", "white", "blue", "yellow", "red", etc., or may describe the color content in the form "#rrggbb". The latter specifies the red (rr), green (gg), and blue (bb) content in hexadecimal, where 00 is none and ff is the maximum. In this color model, "#000000" results in black, and "#ffffff" results in white. The end of this document shows colors that are frequently used in web pages, along with their names and #rrggbb designations.
You can also set the background color of cells in tables using the BGCOLOR="color" modifier in <TH> and <TD> tags.
Depending on their displays and the color modes your readers have selected for their computers, they may have:
If your web page has more colors than the reader's computer will handle, their browser may lump similar colors together to stay within the display limits. Or their browser may texture an area with pixels of the available colors to come close to the desired color (similar to pointillism in painting). Either way, the web page will not look quite the way you intended. One good strategy is to deliberately limit the number of colors that you use on each web page. The "web-safe colors" use six reds, six greens, and six blues, for a total of 216 possible colors. In "#rrggbb" notation, rr, gg, and bb use just the values 00, 33, 66, 99, cc, and ff for web-safe colors.
The <FONT>text</FONT> tag lets you change the color, size, and typeface for a section of text. To set the color put a COLOR="color" modifier in the <FONT> tag. To set the size (height and width of text) put a SIZE modifier in the <FONT> tag. Browsers usually default to SIZE=3, but your readers may change this default depending on their vision and their monitor. You may set SIZE=1 (smallest) up through SIZE=7 (largest). Each increment in size is about 20% taller and wider than the one below it. Or you may use the SIZE=+n modifier (make text larger than the default) or SIZE=-n modifier (make text smaller than the default). You may also change the typeface with a FACE="typeface" modifier in the <FONT> tag, where "typeface" is the name of the desired font such as "Arial", "Courier New", etc. The problem with this last modifier is that the reader's computer must have the font installed, or the reader's browser will just use its default font.
It is all too easy to make one small mistake creating a web page, and get things badly balled up. Writing your web page from the outside in, and indenting your HTML for readability, will prevent most of these problems. But you can still get into trouble when adding to/ modifying your web pages. The following web sites will critique your web page(s) and suggest corrections and improvements. Some of them will give you "grades" showing how well you have followed the HTML standards and which aspects of your web page may be incompatible with certain browsers:
Most of the information for these articles came from:
| Blue=00 | Blue=33 | Blue=66 | Blue=99 | Blue=CC | Blue=FF | ||
| Red=00 | Green=00 | #000000 | #000033 | #000066 | #000099 | #0000CC | #0000FF |
| Green=33 | #003300 | #003333 | #003366 | #003399 | #0033CC | #0033FF | |
| Green=66 | #006600 | #006633 | #006666 | #006699 | #0066CC | #0066FF | |
| Green=99 | #009900 | #009933 | #009966 | #009999 | #0099CC | #0099FF | |
| Green=CC | #00CC00 | #00CC33 | #00CC66 | #00CC99 | #00CCCC | #00CCFF | |
| Green=FF | #00FF00 | #00FF33 | #00FF66 | #00FF99 | #00FFCC | #00FFFF | |
| Red=33 | Green=00 | #330000 | #330033 | #330066 | #330099 | #3300CC | #3300FF |
| Green=33 | #333300 | #333333 | #333366 | #333399 | #3333CC | #3333FF | |
| Green=66 | #336600 | #336633 | #336666 | #336699 | #3366CC | #3366FF | |
| Green=99 | #339900 | #339933 | #339966 | #339999 | #3399CC | #3399FF | |
| Green=CC | #33CC00 | #33CC33 | #33CC66 | #33CC99 | #33CCCC | #33CCFF | |
| Green=FF | #33FF00 | #33FF33 | #33FF66 | #33FF99 | #33FFCC | #33FFFF | |
| Red=66 | Green=00 | #660000 | #660033 | #660066 | #660099 | #6600CC | #6600FF |
| Green=33 | #663300 | #663333 | #663366 | #663399 | #6633CC | #6633FF | |
| Green=66 | #666600 | #666633 | #666666 | #666699 | #6666CC | #6666FF | |
| Green=99 | #669900 | #669933 | #669966 | #669999 | #6699CC | #6699FF | |
| Green=CC | #66CC00 | #66CC33 | #66CC66 | #66CC99 | #66CCCC | #66CCFF | |
| Green=FF | #66FF00 | #66FF33 | #66FF66 | #66FF99 | #66FFCC | #66FFFF | |
| Red=99 | Green=00 | #990000 | #990033 | #990066 | #990099 | #9900CC | #9900FF |
| Green=33 | #993300 | #993333 | #993366 | #993399 | #9933CC | #9933FF | |
| Green=66 | #996600 | #996633 | #996666 | #996699 | #9966CC | #9966FF | |
| Green=99 | #999900 | #999933 | #999966 | #999999 | #9999CC | #9999FF | |
| Green=CC | #99CC00 | #99CC33 | #99CC66 | #99CC99 | #99CCCC | #99CCFF | |
| Green=FF | #99FF00 | #99FF33 | #99FF66 | #99FF99 | #99FFCC | #99FFFF | |
| Red=CC | Green=00 | #CC0000 | #CC0033 | #CC0066 | #CC0099 | #CC00CC | #CC00FF |
| Green=33 | #CC3300 | #CC3333 | #CC3366 | #CC3399 | #CC33CC | #CC33FF | |
| Green=66 | #CC6600 | #CC6633 | #CC6666 | #CC6699 | #CC66CC | #CC66FF | |
| Green=99 | #CC9900 | #CC9933 | #CC9966 | #CC9999 | #CC99CC | #CC99FF | |
| Green=CC | #CCCC00 | #CCCC33 | #CCCC66 | #CCCC99 | #CCCCCC | #CCCCFF | |
| Green=FF | #CCFF00 | #CCFF33 | #CCFF66 | #CCFF99 | #CCFFCC | #CCFFFF | |
| Red=FF | Green=00 | #FF0000 | #FF0033 | #FF0066 | #FF0099 | #FF00CC | #FF00FF |
| Green=33 | #FF3300 | #FF3333 | #FF3366 | #FF3399 | #FF33CC | #FF33FF | |
| Green=66 | #FF6600 | #FF6633 | #FF6666 | #FF6699 | #FF66CC | #FF66FF | |
| Green=99 | #FF9900 | #FF9933 | #FF9966 | #FF9999 | #FF99CC | #FF99FF | |
| Green=CC | #FFCC00 | #FFCC33 | #FFCC66 | #FFCC99 | #FFCCCC | #FFCCFF | |
| Green=FF | #FFFF00 | #FFFF33 | #FFFF66 | #FFFF99 | #FFFFCC | #FFFFFF |
| Black Black |
Blue Blue |
Cyan Cyan |
Gray Gray |
Green Green |
Lime Lime |
Magenta Majenta |
Maroon Maroon |
| Navy Navy |
Olive Olive |
Purple Purple |
Red Red |
Silver Silver |
Teal Teal |
White White |
Yellow Yellow |
| AntiqueWhite AntiqueWhite |
Black Black |
CornSilk CornSilk |
DarkGray DarkGray |
DarkSlateGray DarkSlateGray |
DimGray DimGray |
Gainsboro Gainsboro |
Gray Gray |
| LightSlateGray LightSlateGray |
PapayaWhip PapayaWhip |
Silver Silver |
SlateGray SlateGray |
White White |
|||
| Beige Beige |
Bisque Bisque |
BlanchedAlmond BlanchedAlmond |
Brown Brown |
Burlywood Burlywood |
Chocolate Chocolate |
DarkKhaki DarkKhaki |
Khaki Khaki |
| Moccasin Moccasin |
Peru Peru |
SaddleBrown SaddleBrown |
SandyBrown SandyBrown |
Sienna Sienna |
Tan Tan |
Wheat Wheat |
|
| Crimson Crimson |
DarkRed DarkRed |
Firebrick Firebrick |
IndianRed IndianRed |
Maroon Maroon |
Red Red |
Tomato Tomato |
|
| Coral Coral |
DarkSalmon DarkSalmon |
DeepPink DeepPink |
HotPink HotPink |
LightCoral LightCoral |
LightPink LightPink |
LightSalmon LightSalmon |
Magenta Magenta |
| MistyRose MistyRose |
Pink Pink |
Salmon Salmon |
|||||
| DarkOrange DarkOrange |
Orange Orange |
OrangeRed OrangeRed |
PeachPuff PeachPuff |
||||
| DarkGoldenRod DarkGoldenRod |
Gold Gold |
Goldenrod Goldenrod |
LemonChiffon LemonChiffon |
PaleGoldenrod PaleGoldenrod |
Yellow Yellow |
||
| Aquamarine Aquamarine |
Chartreuse Chartreuse |
DarkGreen DarkGreen |
DarkOliveGreen DarkOliveGreen |
ForestGreen ForestGreen |
Green Green |
GreenYellow GreenYellow |
LawnGreen LawnGreen |
| LightGreen LightGreen |
Lime Lime |
LimeGreen LimeGreen |
MediumSeaGreen MediumSeaGreen |
MediumSpringGreen MediumSpringGreen |
Olive Olive |
OliveDrab OliveDrab |
PaleGreen PaleGreen |
| SeaGreen SeaGreen |
SpringGreen SpringGreen |
YellowGreen YellowGreen |
|||||
| Aqua Aqua |
Cyan Cyan |
DarkCyan DarkCyan |
DarkTurquoise DarkTurquoise |
LightCyan LightCyan |
LightSeaGreen LightSeaGreen |
MediumAquamarine MediumAquamarine |
MediumTurquoise MediumTurquoise |
| PaleTurquoise PaleTurquoise |
Teal Teal |
Turquoise Turquoise |
|||||
| Blue Blue |
CadetBlue CadetBlue |
CornflowerBlue CornflowerBlue |
DarkBlue DarkBlue |
DarkSlateBlue DarkSlateBlue |
DeepSkyBlue DeepSkyBlue |
DodgerBlue DodgerBlue |
Indigo Indigo |
| LightBlue LightBlue |
LightSkyBlue LightSkyBlue |
LightSteelBlue LightSteelBlue |
MediumBlue MediumBlue |
MediumSlateBlue MediumSlateBlue |
MidnightBlue MidnightBlue |
Navy Navy |
PowderBlue PowderBlue |
| RoyalBlue RoyalBlue |
SkyBlue SkyBlue |
SlateBlue SlateBlue |
SteelBlue SteelBlue |
||||
| BlueViolet BlueViolet |
DarkMagenta DarkMagenta |
DarkOrchid DarkOrchid |
DarkViolet DarkViolet |
Fuschia Fuschia |
Lavender Lavender |
MediumOrchid MediumOrchid |
MediumPurple MediumPurple |
| MediumVioletRed MediumVioletRed |
Orchid Orchid |
PaleVioletRed PaleVioletRed |
Plum Plum |
Purple Purple |
Thistle Thistle |
Violet Violet |
We'd like to thank all of the clients who chose dBi to test their products from 1995 to 2013. Below is a brief summary of our accomplishments during the 18 years we were in business.
From 1995 to 2001, under Don Bush's ownership and operation, dBi:
From 2002 to 2013, under John Barnes' ownership and operation, dBi: