WEB PAGE BASIC CODE:
<html>
<head>
<title>web page title</title>
</head>
<body>
everything else goes here
</body>
</html>
Web Page Margins for the <body> tag
Attributes:
leftmargin="X"
topmargin="X"
marginwidth="X"
marginheight="X"
text="X" (text color *)
link="X" (link color *)
vlink="X" (followed link color *)
alink="X" (link color on click *)
X = a value.
* you only use these if you want
to change the default standards.
example:
<body leftmargin="10" topmargin="10" marginwidth="10" marginheight="10">
BOLD: <B> </B>
<B>example</B> = example
ITALIC: <I> </I>
<I>example</I> = example
UNDERLINE: <U> </U>
<U>example</U> = example
example combined with above:
<U><B><I>example</I></B></U> = example
TELETYPE: <TT> </TT>
<TT>example</TT> = example
BLOCK QUOTATION:
<blockquote> X </blockquote>
Indents text on both sides.
X = your text
HEX VALUE COLORS
Colors are specified by using hex values.
Here are a few examples:
FFFFFF = (white)
000000 = black
0000FF = blue
FF0000 = red
FFFF00 = yellow (yellow)
00CC00 = green
FF9900 = orange
9900CC = purple
(Note: above, the 0's are zeros not letter O's)
BACKGROUND COLOR ATTRIBUTE:
bgcolor="#X"
X = a hex value
example: (hex value FFFFFF = white)
bgcolor="#FFFFFF"
BACKGROUND IMAGE: background="X"
X = an image file
example: background="picture.jpg"
(For instance, include this attribute
in BODY or Table tags.)
CENTER: <center> </center>
<center>example</center>
FONT: <font> </font>
Attributes:
size="X" (X = a number)
color="#X" (X = a hex value)
face="X" (X = a font(s))
example: (hex value 000000 = black)
<font size="3" color="#000000">example</font>
LINE: <HR>
Attributes:
align="X"
width="X"
size="X"
noshade
X = a value
example:
<HR width="100" align="center">
makes this short centered line...
COMMENT: <!-- X -->
Used for comments in your code that
you do not want to appear on the web page.
X = your hidden text
<!-- example -->
NUMBERED LIST:
<OL>
<LI> X
</OL>
Substitute X for whatever text you want.
example: This code...
<OL>
<LI> X
<LI> X
<LI> X
</OL>
... makes this list:
- X
- X
- X
(Makes rearranging long lists easy,
you won't have to renumber.)
BULLETED LIST:
(same principle as above)
<UL>
<LI> X
</UL>
DESCRIPTIVE LIST INDENTED:
(same principle as above)
<DL>
<DD> X
</DL>
DESCRIPTIVE LIST NOT INDENTED:
(same principle as above)
<DL>
<DT> X
</DL>
SPECIAL CHARACTERS:
< = <
> = >
& = &
⁄ = ⁄
" = "
© = ©
® = ®
° = °
PARAGRAPH: <P> </P>
Attributes:
align="left"
align="right"
align="center"
align="justify"
example:
<P>paragraph text here</P>
HEADER: <HX> </HX>
Sizes: X = 1 - 6
(1 = largest, 6 = smallest)
<H2>example></H2> = example
LINK: <A HREF="X"> XX </A>
X = file name
XX = the text to click on
This code...
Click <A HREF="apple.htm"> here </A> to
see an apple.
...makes this...
Click here to see an apple.
(Note: active links usually default to
blue automatically.)
When needed, ../ = backup one directory.
example:
Click <A HREF="../apple.htm"> here </A> to
see an apple.
Target Attribute:
Tells where to load the link.
target="_top" (entire window / removes frames)
target="_blank" (opens a new window)
target="_self" (over current window)
target="_parent" (frameset's parent window)
target="X" (X = frame name *)
* See FRAMES for naming a specific Frame.
LINK ANCHOR (two parts)
(link to a specific place on a page)
Name: <A NAME="X"></a>
Link: <A HREF="#X">XX</A>
X = a value
XX = the text to click on
Place the NAME code on the page
specifically where you want to link to.
example:
Put this in your code
<a name="example"></a>
specifically where you want to link to.
(Substituting "example" for whatever you want)
(Notice nothing goes between >< )
Then this would be the link code to get
to that specific place on the page:
<A HREF="#example">click here</A>
or if its on another page:
<A HREF="apple.htm#word">click here</A>
Change "click here" to whatever you want.
LINE BREAK: <BR>
A line break without paragraph spacing.
NON-BREAKING SPACE:
(Adds an extra space.)
example:
In your code type...
For more space.
To get this...
For more space.
|
MAIL TO LINK
This code creates an email link:
<A HREF="mailto:you@mail.com">Click here</A> to email me.
It will appear like:
Click here to email me.
Change the email address.
Change "click here" to whatever you want.
IMAGES: <IMG SRC="X">
X = an image file name
Attributes:
alt="X"
width="X"
height="X"
border="X"
hspace="X"
vspace="X"
align="middle"
align="top"
align="bottom"
align="left"
align="right"
X = a value
example: This code...
<IMG SRC="apple.gif" alt="an apple">
...makes this appear:
If you move your mouse over the image,
you should see the ALT text appear.
BASIC TABLE:
<TABLE>
<TR>
<TD>
content
</TD>
</TR>
</TABLE>
TABLE <TABLE> </TABLE>
(creates the table)
Attributes:
width="X"
height="X"
border="X"
align="left"
align="right"
align="center"
bgcolor="#X"
background="X"
cellspacing="X" (space between cells)
cellpadding="X" (space inside border)
X = a value
TABLE HEADER: <TH> </TH>
(creates a cell with bold centered text)
Attributes:
width="X"
height="X"
colspan="X"
rowspan="X"
align="center"
align="left"
align="right"
valign="top"
valign="middle"
valign="bottom"
bgcolor="#X"
background="X"
X = a value
TABLE ROW <TR> </TR>
(creates a row across the table)
Attributes:
align="center"
align="left"
align="right"
valign="top"
valign="middle"
valign="bottom"
bgcolor="#X"
X = a value
TABLE CELL: <TD> </TD>
(creates a cell, in a row)
Attributes:
width="X"
height="X"
colspan="X" (column span *)
rowspan="X" (row span *)
align="center"
align="left"
align="right"
valign="top"
valign="middle"
valign="bottom"
bgcolor="#X"
background="X"
nowrap (prevents text from wrapping to fit)
X = a value
* - if more than one
FRAMES: <frameset> </frameset>
(Replaces the <body> tag in a frames document; can also be nested in other framesets.)
FRAME ROWS: <frameset rows="X,X">
(Defines the rows within a frameset, using number in pixels, or percentage of width, or * for remaining space.) X = value.
FRAME COLUMNS: <frameset cols="X,X">
(Defines the columns within a frameset, using number in pixels, or percentage of width, or * for remaining space.) X = value.
SINGLE FRAME: <frame>
(Defines a single frame — or region — within a frameset.)
NO FRAMES: <noframes> </noframes>
(Defines what will appear on browsers that don't support frames.)
Frame Attributes: (Shown within a tag.)
<frame src="X">
(Specifies which HTML document should be displayed.)
X = URL.
<frame name="X">
(Names the frame, or region, so it may be targeted by other frames.)
X = name.
<frame marginwidth=X>
(Defines the left and right margins for the frame; must be equal to or greater than 1.)
X = value.
<frame marginheight=X>
(Defines the top and bottom margins for the frame; must be equal to or greater than 1.)
X = value.
<frame scrolling=X>
(Sets whether the frame has a scroll bar; value may equal "yes," "no," or "auto." The default, as in ordinary documents, is auto.)
X = value.
<frame noresize>
(Prevents the user from resizing a frame.)
Example:
To breakup your entire web site into 2 frames, like this site with a top main section where all of the site's pages load, and a small lower section which contains the primary links on this site, your home page (index.html) would simply be coded as follows:
<HTML>
<HEAD>
<TITLE>Your site name here</TITLE>
</HEAD>
<frameset rows="*,30">
<frame src="index2.html" name="main" marginwidth="0" marginheight="0" scrolling="auto" noresize frameborder=0>
<frame src="links.htm" name="linkarea" marginwidth="5" marginheight="5" scrolling="no" noresize frameborder=0>
</frameset>
<noframe>If you see this message your web browser probably doesn't support frames.</noframe>
</HTML>
In this example, the lower row (grey area) is only 30 pixels high and the remaining space above it is used for all of the site's pages. The file index2.html would be the page that first loads in the main section when someone accesses the web site and the file links.htm would be what loads on the bottom. The links in the file links.htm are targeted to load into the frame named "main" (see LINKS for targets). If you want to have two columns, instead of two rows like this web site, use cols="X,X" in place of rows="X,X".
FORMS
Below, substitute NAME for whatever you want, and X = value. For functional forms, you'll have to run a CGI script. The HTML just creates the appearance of a form.
FORM: <form></form>
(Creates all forms.)
SCROLLING MENU:
<select multiple name="NAME" size=X></select>
(Creates a scrolling menu. Size sets the number of menu items visible before you need to scroll.)
MENU ITEM: <option>
(Sets off each menu item.)
PULLDOWN MENU:
<select name="NAME"></select>
(Creates a pulldown menu.)
TEXT BOX:
<textarea name="NAME" cols=X rows=X></textarea>
(Creates a text box area. Columns set the width; rows set the height.)
CHECK BOX:
<input type="checkbox" name="NAME">
(Creates a checkbox. Text follows tag.)
RADIO BUTTON:
<input type="radio" name="NAME" value="X">
(Creates a radio button. Text follows tag.)
1 LINE TEXT AREA:
<input type=text name="NAME" size=X>
(Creates a one-line text area. Size sets length, in characters.)
SUBMIT BUTTON:
<input type="submit" value="NAME">
(Creates a Submit button.)
SUBMIT BUTTON IMAGE:
<input type="image" border=0 name="NAME" src="X.gif">
(Creates a Submit button using an image.)
RESET BUTTON:
<input type="reset">
(Creates a Reset button.)
|
