Reference: HTML-Cheatsheet.txt
Web Page Developement Notes
===============================================================
R U S S H O W E L L W E B P A G E R E F E R E N C E
===============================================================
Table of Contents
1. How to Open an HTML document
2. Tips:
Naming your Home Page
Using Width & Height for Images
3. Font Name List
4. Special Characters
5. Standard 16 Colors
6. Basic Tags
7. Header Tags
8. Body Attributes
9. Text Tags
10. Sample - Technicolor Font Tags
11. Links
12. Formatting Paragraphs
12. Graphical Elements
13. Definition Lists
14. Ordered Lists
15. Unordered Bulleted Lists
16. Graphical Elements
17. Adding/Aligning Images
18. Interlace an Image
19. Horizontal Rules
20. Tables
21. Table Attributes
22. Frames
23. Frames Attributes
24. Sample - Frames: Top, Bottom, Left & Right Sides.
25. Forms
26. Comment Tags
27. Counters
28. Counter Provider Sites
29. Web Site Counter: Lynn Cooper
30. Helpful SubRoutines
Centered Images
Dividing Lines
Centered Links
31. Inserting A Link To A Sound File
Embedding A Link To A Sound File
32. Online Help
33. Graphical Image Cams
34. Free Hosting Providers
35. HTML Graphics Resources on the Web
Bullets, Backgrounds, Bars and Buttons
36. HTML UseNet Groups (Support and NewsLetter Groups)
37. Java (also Java Script, a scaled-down version)
38. VRML (Virtual Reality Modeling Language)
39. Netscape Navigator Home Page
40. Download MS-Word Internet Assistant
41. Most Excellent Web Design Resources
42. End of File
=============================================================== 1.
Open HTML Documents with:
"C:\Program Files\Internet Explorer\IEXPLORE.EXE"
How To Associate Filenames:
1. Open Windows Explorer (File Manager Program)
2. Single Left Click on an HTML file.
3. Click on View from the upper menu bar.
4. Choose Folder Options
5. Click on the File Types tab.
6. Press the letter "H" to scroll down to the H files.
Choose HTML document.
7. Click on Edit and set the application association to:
"C:\Program Files\Internet Explorer\IEXPLORE.EXE"
============================================================== 2.
Tips:
The main page on your WebSite should be called index.html.
This is standard for most WebSite Providers.
Many host providers are case-sensitive, so make sure your links
maintain proper filenames.
Some browsers don't know how to handle files that end with the
.HTM extension. and prefer to see .HTML, instead.
Webpages will load faster if you specify width and height in the
tag.
============================================================== 3.
The standard default font size is 3.
Change the default font size with (? = 1-7)
Set Type Font Style:
Joseph and the amazing
T
E
C
H
N
I
C
O
L
O
R
dreamtag
Will give you:
Joseph and the amazing T E C H N I C O L O R dreamtag
============================================================== 11.
Links
----------------
TIP!
In your link text, don't ask the reader to "click on" something,
because some of them won't have mice or other "clickable" devices.
The verbs of choice are "select" and "choose."
----------------
Creates a hyperlink
Creates a mailto link
Links to that target location from elsewhere in the document
Creates a target location within a document
Example:
Place this tag at the beginning of the document
End Of Page
When the tag above is clicked on, you will be sent to wherever the following tag is.
End Of Page
Link to A Target Location within a Page:
This will link to the WebPage-MessageBoard.html Page
and then proceed to the UpcomingEvents section:
Upcoming Events
Link Font Color
sets the default font color
sets the color of unvisited links
sets the color of visited links
sets the color of links on click
changes font color
returns font to default color
============================================================== 12.
Formatting
Creates a new paragraph
Aligning Text
aligns a paragraph to the left
aligns a paragraph to the right
centers a paragraph
Hint: Use Definition Lists to indent text.
Line breaks: Inserts a line break
Blockquote
Left & Right Margin Indent
indents text on both sides
returns the text to normal margins
============================================================== 13.
Creates a definition list
Hint: Use Definition Lists to indent text.
Precedes each definition term
Precedes each definition
Definition Lists
(Use definition lists to indent text)
opens a Definition List
precedes each Defined Term
precedes each Definition
closes the Definition List
The HTML for a simple list would go something like this:
Larpy
Of or pertaining to a lack of physical fitness. Larpy
people may not be obese, but their muscles have atrophied.
A larpy person might sit at a computer 15 hours a day.
Lascivious
Characterized by or expressing lust. People seeking
lascivious conversation often turn to AOL chat rooms.
And would look like this:
Larpy
Of or pertaining to a lack of physical fitness. Larpy
people may not be obese, but their muscles have
atrophied. A larpy person might sit at a computer 15
hours a day.
Lascivious
Characterized by or expressing lust. People seeking
lascivious conversation often turn to AOL chat rooms.
The
tag is only rarely used for its intended purpose.
More often, you'll spot it indenting text, staggering paragraphs,
and generally pushing text around. Take this example:
He avoided that side of the street.
And who could blame him?
The birds in the trees were merciless.
And his long, curly hair was a plum target for pecking.
Which displays like this:
He avoided that side of the street.
And who could blame him?
The birds in the trees were merciless.
And his long, curly hair was a plum target for pecking.
============================================================== 14.
Ordered Lists
creates a numbered list
precedes each list item
closes the numbered list
Three things I know to be true:
A cucumber and marmalade sandwich tastes better than it sounds.
A mountain bike never belongs in the back seat of my mom's sedan.
A head of lettuce isn't a good commuting snack.
Netscape has created list tags that use letters or Roman numerals instead.
These extensions aren't supported by all browsers, though,
so some of your readers may see plain ol' numbers.
Here's how the lists break down:
makes numbers (1, 2, 3)
makes uppercase letters (A, B, C)
makes lowercase letters (a, b, c)
makes uppercase Roman numerals (I, II, III)
makes lowercase Roman numerals (i, ii, iii)
If you really wanted to, you could combine these tags to create
something that looks like an outline:
Never give bell peppers on the first date
Intention could be misinterpreted
Widely known as lusty vegetable
Viewed by some as symbol of warfare
And it should look like this:
I. Never give bell peppers on the first date
A. Intention could be misinterpreted
1. Widely known as lusty vegetable
2. Viewed by some as symbol of warfare
Apples
Berries
Cherries
Change Starting Number
Creates a numbered list
makes numbers (1, 2, 3)
makes uppercase letters (A, B, C)
makes lowercase letters (a, b, c)
makes uppercase Roman numerals (I, II, III)
makes lowercase Roman numerals (i, ii, iii)
Precedes each list item, and adds a number
============================================================== 15.
Unordered Bulleted Lists
Creates a bulleted list
makes round bullet symbols
makes hollow square symbols
makes solid square symbols
A generic tag used to format large blocks of HTML,
also used for stylesheets
============================================================== 16.
Graphical Elements
Pages load faster if you specify width & height.
Most browsers won't display the entire page until they've
calculate the height and width of all the images.
Adds an image
Aligns an image with text: top, middle, bottom.
Text will appear to the right of the image in the position specified.
NOTE: You cannot use both "top,middle,bottom" and "left,right"
Wrap text around an image: left or right
Text will wrap around the image in the position specified.
Stop Text Wrap with either:
or
NOTE: You cannot use both "top,middle,bottom" and "left,right"
Sets size of border around an image.
To remove an existing border, replace ? with zero.
Add Space Around an Image.
If the images does not appear, the Web browser will display the text you specified.
Wrapping text (aligning text) around an image
aligns an image to the left side of the page
aligns an image to the right side of the page
aligns text along the top of an image
aligns text along the bottom of an image
aligns text to the middle of an image
So, for instance, you can lead a paragraph off with the image, aligned left:
But sometimes you'll want the text to begin above the image and wrap around it.
In this case, you can integrate the image into the paragraph:
This is an ant, sitting on his butt.
Some days he sits on his butt for
hours upon hours, letting the other ants do all the work.
Some people (and ants) would say he is lazy.
But the truth is that this ant thinks he's a penguin,
in which case it would be OK to sit on his tookus all day
while the other ants (or penguins, in his world) scurry
around securing food for the winter.
This is an ant, sitting on his butt. Some days he sits
on his butt for hours upon hours, letting the other ants
do all the work.
Also:
============================================================== 17.
Adding/Aligning Images
places an image
aligns an image (Left, Right, Top, Middle, Bottom)
The easiest place to save the image is in the same folder
or directory as your HTML source file, which is where the browser
will automatically look for it.
If you have many images to organize, you may want to place them
in a single folder, called "images" or "stuff,"
then place that folder (or directory) in the same directory as your HTML file.
My image is called "monkey.gif," and it's in a folder called "stuff,"
which is in the same folder on our server as this HTML file.
The HTML for my monkey image will read like this:
also:
============================================================== 18.
Interlace an Image
You can interlace a GIF image.
An interlaced GIF image first appears blurry and then gradually sharpens
as it transfers to a computer.
Noninterlaced images must fully transfer to a computer before appearing on the screen.
Use Paint Shop Pro:
1. Load image
2. Click "File" and choose "Save As"
3. Click "Options"
4. Click "Interlaced"
5. Click "OK" to confirm
6. Click "Save" to save your change.
7. Click "Yes" to replace the original image.
============================================================== 19.
Horizontal Rules: Bars across the screen
Inserts a horizontal rule
Sets size (height) of rule
Sets width of rule, in percentage or absolute value
Displays the line as a solid line (instead of appearing etched into the screen)
Example:
A
============================================================== 20.
Tables
Reasons For Using Tables:
1. Display List of Information
2. Create Newspaper Columns
3. Create Borders
4. Control Web Page Layout
Creates a table
Sets off each row in a table (Table Row)
Sets off each cell in a row (Table Data)
Sets off the Table Header (a normal cell with bold, centered text)
Creates an empty cell within a Table.
Spanning Text Across Multiple Rows or Columns:
(# = Number of Columns to Span)
or
(# = Number of Columns to Span)
Center a Table by placing center tags before & after the table tags.
Data
***********************************************
*** S A M P L E ***
***********************************************
Spanning Text Across Columns
Add a caption to summarize the information in the table.
Place the
tag directly below the
tag.
Example:
Season Pass Prices
Sets amount of space between table cells
Sets amount of space between a cell's border and its contents
Sets width of table in pixels or as a percentage of document width
Align Data Horizontally within a Cell
or
Sets alignment for cell(s) (left, center, or right)
Align Data Vertically within a Cell
or
Sets vertical alignment for cell(s) (top, middle, or bottom)
Spanning cells is useful if you want to display a title across the top
or down the side of your table.
Span cells across columns:
In the
or
tag for the cell you want to span across columns,
type ColSpan=# replacing # with the number of columns you want
the cell to span across.
Example:
Product List and Prices
Span cells down rows:
In the
or
tag for the cell you want to span down rows,
type RowSpan=# replacing # with the number of rows you want
the cell to span down.
Example:
Product List and Prices
Sets number of columns a cell should span
Sets number of rows a cell should span (default=1)
Prevents the lines within a cell from being broken to fit
============================================================== 22.
Frames
Replaces the tag in a frames document;
can also be nested in other framesets
But sometimes you'll want the text to begin above the image and wrap around it.
In this case, you can integrate the image into the paragraph:
also: