This page is dedicated to all those newbies out there! Not that I’m an expert, it’s just that I’d like to save you a lot of the time involved in hunting and pecking through web searches in your desire to learning to create your own web pages. Below you’re find links and information on most the common programming standards and layout issues.

The world has definitely moved away from using tables whenever possible. Tables are still used but usually reserved for display tabular lists of data. The links below will teach you how to code using a text editor and surprisingly it isn’t that hard. The most common notepad editors are: MS NotePad (not recommend), Notepad++, TextPad For Windows and jEdit. The later three are programmers text editors and numerous features geared around variety languages. The section below on MS Expression Web (EW) will give you a graphical approach, but I can’t stress enough what a benefit it will be to learn how to hand code first, as even with graphical tools, you still must be able to make manual adjusts to the code. Be sure to keep those Cheat Sheets as mentioned below close by.

Publishing - Local Web Servers

Not all features will show up when you open a page in a browser. This is because they must exist on either an Apache (Unix based) or Windows based Internet Information Server (IIS) web server. The server can exist on your local hard drive or one that is provided by the ISP hosting your domain. Adobe DreamWeaver and Microsoft Expression Web are the two most popular commercial web site creation and publishing programs. The most common Apache server programming language is "PHP", which is pretty easy to learn. Windows IIS supports the more robust but more complicated "ASP" DotNet. Hands down ASP is pretty limitless on what it can do.

Apache Server

Publishing to local drive during development using XAMPP Apache Server. There is also WampServer but I like the Apache Server from Apache Friends better as their support page has a wealth of easy to follow getting started information. (More information about Apache server here PHP vs. ASP for passwword protection)

Windows Internet Information Server (IIS)

(More information coming soon.)

IIS on Windows 7

Using DIV Elements, not tables

CSS Guidelines

If you’re new to CSS, before you dive any further into this page, make sure you have watched the videos in the previous section.

HTML Guidelines

Certain features in your web page will not work unless you are looking at the published page. This means that you will need to copy your initial site and all ongoing modifications to your own domain. Filezila is the most common, all I use the paid for version of IPSwtich. Just as a linked CSS file quickly allows you to make universal changes to your site, an “IncludeFile” take it to the next level.

Code Comment Tags

Every language has special codes that you can place before and after any text within your code that you want to comment out.

  • HTML: Place the code or text between the opening <!-- and closing --> comment tag elements.
  • CSS: Place the code or text between the opening /* and closing */ commnet tab elements
  • CSS embedded style: each line must start with //
  • Java Script Block: /* */
  • Java Script Line: //
  • ASPX: <%-- --%>

Reference Documents

Cool Tools

Web Graphics

Learning MS Expression Web

Favorite Scripts

Favorite Sites

Captain Ken's Code Treasure Chest (give links to each of my testing/works examples)

HTML Tips

General Tips

Scanner Tips

One source of large (oversize) files is scanned images such as color photographs. People don't realize that a scanner set at 300dpi (or higher) creates very large images (that load very slow). However, on the internet, these images will look the same as one scanned at 72dpi.

  1. Set the scanner at 72 dpi (or to 100 dpi if 72 is not an option) and the file size will be about 20 or 30K instead of 150K+ (and the image screen size will be smaller :)
    Note: Some scanners yield a dark image that can be corrected with a 'gamma correction' option in your graphic's program.
  2. Use a graphics program to 'crop' the image. (or maybe the scanner software will allow you to crop). In other words, cut off any 'dead area on the edges of the pictures"
    Note: A popular freeware program is available at Irfanview . This program also has 'gamma correction' (under color enhancement) for those dark pictures.
  3. Save 'color photographs' with the JPEG format (.jpg extension). Color photos compress better and also render better quality as JPEG images. (.gif format works best for line art)
    Note: some scanners will only save as .bmp so you may also need a graphics program to convert the images (Many accomplish this conversion by use of the 'file /save as' option that allows you to 'save as' .jpg).
  4. Depending on the 'content' of the photo, it may be desirable to use the 'resize' option in your graphics program to further reduce the file size. MAKE sure the graphics program is set to 'Maintain the Aspect Ratio'.
  5. In some cases, additional reduction in file size is possible with an 'optimize' program. There are online sites that will 'read your image' and then optimize it ( One Example). However, this procedure is usually not necessary if the previous tips are successful in reducing the file size. (Recently some of the 'good' graphics programs have started to include a graphics optimizing capability ;) Footnote for Resolution: For images intended for the printer, higher resolution may be desirable. Hewlett Packard® (HP at home, Volume 8, 1999) has an article on scanning tips that contains this useful table: The higher the resolution of your scan, the larger the file size for the image. Use this table to determine the best scan resolution for your photos.
The higher the resolution of your scan, the larger the file size for the image.
Use this table to determine the best scan resolution for your photos.
WHEN USED SCAN RESOLUTION FORMAT
On-Screen (Web, E-mail) 72 or 100 dpi, 8 bit JPEG
To Print Snapshot 200 dpi or 300 dpi, 30 bit TIFF
EnLarge Snapshot
or Print Large Photo		 Maximum resolution, 30 bit TIFF

A Few 'Entities'

A Few Entities

Note: Entities are not same as tags.
They start with a & and end with a ;

Example - type: 0.02 &cent; 0.02 ¢ (will display)

By Name By Number Result:
&amp; &#38; &
&lt; &#60; <
&gt; &#62; >
&nbsp; &#160;   (blank space)
&cent; &#162; ¢
&euro; &#8364; €
&pound; &#163; £
&copy; &#169; ©
&reg; &#174; ®
&trade; &#8482; ™
&plusmn; &#177; ±
&deg; &#176; °
&frac14; &#188; ¼
&frac12; &#189; ½
&frac34; &#190; ¾

Hint: Use the < and > entities to show the HTML tags inside a web page i.e. when the
code in these pages displays the HTML tags it was done with the &lt; and &gt; entities

For more entities, try W3 Org html 4.01 entities

Wingdings Font Faces

<font size="6" color="red" face="wingdings"> J K L </font>

Will display:
J K L

Here are some wingding results:

A= A a= a 1= 1
B= B b= b 2= 2
C= C c= c 3= 3
D= D d= d 4= 4
E= E e= e 5= 5
F= F f= f 6= 6
G= G g= g 7= 7
H= H h= h 8= 8
I= I i= i 9= 9
J= J j= j 0= 0
K= K k= k -= -
L= L l= l == =
M= M m= m ~= ~
N= N n= N != !
O= O o= o @= @
P= P p= p #= #
Q= Q q= q $= $
R= R r= r %= %
S= S s= s ^= ^
T= T t= t &= &
U= U u= u *= *
V= V v= v (= (
W= W w= w )= )
X= X x= x _= _
Y= Y y= y += +
Z= Z z= z ?= ?
:= : ;= ; "= "
Ideas for the site or problems with the site. please let me know!