align attribute
align ="left"
align ="center"
align ="right"
Usage in many tags - Div, span, td, ....
(blockquote) tag
Text indented L and R
(Center)
whatever is enclosed - this text, a table, ....
CSS positioning
With the latest version of CSS, it it possible to eliminate tables that are now
often used to hold page elements in place, and instead place each element
using CSS. Unfortunately, this only works in the latest browsers - Netscape 6.0 and Explorer 5.0 or later.
(Div) tag
Division - to control the display of a large section
Many attributes possible - align=, etc. Used to control display of several paragraphs, tables, or other elements at one time. Use (span) for short lines of text.
tag frame / frameset () -
Don't use frames! They're are a bit complex to manage, and introduce new problems when a user attempts to navigate.
(nobr) tag = no break - keep enclosed text
on 1 line, and don't wrap.
non-breaking space . . .= . . & nbsp;
(p) tag = paragraph - Inserts space before and after a block of text.
(p) attributes are.... align="L,R,center,justify"
(pre) tag = pre formatted - display text exactly as is with spaces and tabs
tag (span) - attributes . . . . . . . . . .
For controlling a partial line of text. To control a larger section of a document use (div.)Many attributes can be used.
Designing with color
A nice, uncluttered design, good content, and some color - is sometimes all a Web page needs to look attractive. For design ideas, look at other sites, magazine covers, catalogs, even food packaging. Then find similar colors on the
Web-safe color chart
When you're ready to assign colors in your Html file, consider these guidelines.....
For readability, use dark text on a light (pastel) background.
Use only 2 or 3 colors on a page. Using too many is confusing.
background attribute
background ="File.Jpg"
background ="File.Gif"
Usage in many tags - Body, td, .......
attribute bgcolor . . . . . . . . . .
= "" Can be used in many tags: body, td,....
color attribute
Change color of content enclosed by tag
color="violet" color name
color="#RRGGBB" Hexidecimal
Usage in many tags - Font, div, span, body, table, .......
Best to use the standard 216 "Web safe" colors which appear nearly identical
on most computer screens. All are named. Avoid "#RRGGBB" why ?
Or use only 00,33,66,99,CC,FF.
CSS styles . . . . . . . . . .
Cascading style sheets are a powerful tool to perform many functions For example, CSS can replace (font) tags - which will some day be eliminated. However, some CSS features only work in the latest browsers.
Use the (em) tag for .. emphasis (italic)
(font) tag
orange text set via (font)
align="" - center,left,right
color=" - color name or "#RRGGBB"
face="" - Use sans-serif or a specific font that is "proportional" (variable width),
and a True Type font which appears very similar on Mac or IBM)
size ="" - 4 = 4 pixels (72= 1 inch)
size ="" - +1 = +20%
Usage .......
Graphic images - especially large ones that may take a long time to load over a dial up phone line - should be avoided unless absolutely necessary. If used, warn the user by telling them the file size and estimated load time. (Use a JavaScript "mouseover".) JPG formated files are for photo-quality images, and are especially large files. GIF files are for simpler drawings and logos in which only areas of "flat" color are used. GIF files are generally much smaller.
Image (img) tag attributes .......
src="Directory\FileName.gif (or jpg)"
alt="Image of ?? "
border =""(pixels)
height="" PLUS width="" (pixels or % of screen) )
makes page load text only first - quickly, then images later !!
align="left,right" ( of text block)
valign="top,middle,bottom,texttop" ( relative to inline text )
vspace="" hspace="" (border in pixels)
You want to build a Web page. You've thought about it's function and sketched it's design.
Should you start coding from scratch? Or copy existing code? From which Html modules? Where are they, and what's in each one? Were they tested? Is their code general enough that you can
use it "as is" without having to carefully strip out a lot of it?
Wouldn't it be nice to have all the good, reuseable code you need - in a single module? That was our goal. Please let us know if you found this template useful, by sending an Email to TCernosek@EarthLink.Net We welcome all suggestions.
Start your word processor. Open and name a blank document.
Cut and paste from this document thru " end body end html ".
(See the "Reuseable code" links at the top of this doc).
Replace all "??" and modify as needed.
Use the remainder of this document as a reference.
Good coding practices
Build your Web page in small steps and test often. First, build only the basic page structure. (No color, no content, just the tables.) Test in several browsers, preferably Netscape 4.7 (which is very picky), then in a relatively old version of Internet Explorer (Version 5.0 or older - which a lot of people still use.) Add a little more code, and test again.........
Copy pre-existing code - that already works. ( Such as this template )
Indent code for readability.
Keep it simple and obvious.
Use comments, but keep them to the right, out of the way.
XHTML
Xhtml follows some strict coding rules for a reason. Modern browsers are complex, and a little slow, partly because they have to check for all the ways you can misuse and mis-code your Html. This is especially a problem on small, hand-held devices that may have a "stripped-down" browser.
In addition, the WWW consortium has decided that Html 4.0 - the latest version - is the end of the line. Xhtml is the next step, and someday we may all be forced to use it. Why not start now, as we did in this template, by following a few simple rules.....
Tags must be nested properly, A... B...../B .../A
Use closing tags.
Use lowercase text for tags, attributes, and values.
Put tag attributes in quotes, followed by a single space, before listing the next attribute.
(head) tag
=""
=""
(Head) may contain these tags ..........
(base target="main" ) (always load into same frame ?? )
(base) ( file location of all URLs in document)
(basefont)
(link) ( to CSS, prev page="file.html", next page="file.html" )
(meta http-equiv="" ( auto refresh ? etc. ))
(meta) name="" (author, copyright, keywords for search)
(script) callable JavaScript, VBSscript functions (/)
(style) ( cascading style sheets will someday replace
many tags like font, color, etc. )
(title)
Only commonly used tags and attributes are listed.
Most attributes should be accessible by JavaScript.
Tag Attributes (ALL CAPS = REQUIRED)
-ALL- id class style
a href name target
applet height width
body background bgcolor text
button name type value
div align
font color face size
form ACTION method name target
h1-6 align
head
hr align size width
img align ALT border height SRC width
input (varies with type)
li value
meta CONTENT name
p align
script language src TYPE
select multiple name size
span
textarea COLS name ROWS
table align bgcolor border cellpadding cellspacing width
tr align bgcolor valign
td align bgcolor colspan height rowspan valign
Full CSS capability requires Netscape 6.0 or Explorer 5.0.
When designing a Web page for a known audience using only current browsers, it would be very nice to control how the whole document displays - from the Html Head section. You can save a lot of repetetive (font) tags by first calling an external CSS file like this....
.... (head) (style) (link href="Standard.css" rel="stylesheet")
This external file is loaded by the browser when your Web page is rendered, then LOCAL CSS rules embedded in your Html code can be used to selectively override the external rules.
In the Head of this document, a few style rules are listed which work in relatively old browsers like Netscape 4.7 and IE 5.0. If your Web page will be viewed by a modern browser, you could use many other style rules - externally or internally - which in earlier browsers are unreliable......
.
body {background-color: cornsilk; } - unreliable
table {border: solid 1px black; } - no effect
table {width:100%; } - unreliable
td {color:red; } - works, but has side effects
td {padding:5px; } - no effect
td {text-align:left; } - works, but kills (center)
hr {text-align:center; color:darkgreen; } - no effect
p:first-line {font-weight:bold;} - untested
CSS has many other powerful capabilities, such as precise positioning of page elements without using complex tables , .......
