Scripts and Tricks for Webpages

To Force Out of a Frameset

To force a page out of a frameset [other websites have linked to us from their framesets and tried to keep us in their frames], add this JavaScript in the header part of the page...

<SCRIPT LANGUAGE="JavaScript">
if (window != top) top.location.href = location.href;
</SCRIPT>

Try the bottom example in this frameset.

Tables

When using older Netscape browsers, empty cells look funny
lower cell is empty lower cell has a non-breaking space
   

Background colors and patterns
<TD BACKGROUND="FINE_SPECKLED.GIF"> <TD BGCOLOR="#ADEAEA">
   

Non-breaking text in a cell
text breaks use the <NOBR> and </NOBR> tags
it is to dry for me to see why any fool is not here today yet I do not see the bee. You can see where problems using this can arise. it is to dry for me to see why any fool is not here today yet I do not see the bee. You can see where problems using this can arise.

Non-wrapping text in a cell [BORDERCOLOR="#FF0000"]
text breaks use the <TD NOWRAP> tag
it is to dry for me to see why any fool is not here today yet I do not see the bee. You can see where problems using this can arise. it is to dry for me to see why any fool is not here today yet I do not see the bee. You can see where problems using this can arise.

CELLSPACING="0" CELLPADDING="20" BGCOLOR="#007fff"

CELLSPACING="0" CELLPADDING="10" [no border]
Do colors go across the borders?
It depends upon the browser.

Autoplay for CD-ROM

To make a CD-ROM automatically open an html file, you need to add two files to the root directory of the CD-ROM. These are the...

shelexec.exe
autorun.inf

Edit the inf file using notepad and alter it to point to the appropriate html file.

Redirecting

For an example, click on this KGS redirect page

The script is below:

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<HTML>
<HEAD>
<META name="Author" content="Don Chesnut">
<META name="Description" content="The Kentucky Geological Survey">
<META name="KeyWords" content="kentucky, geological, geology, survey, fossils, rocks, minerals">
<META http-equiv="Refresh" content="5; URL=http://www.uky.edu/kgs/">
<META http-equiv="Pragma" content="no-cache">
<META http-equiv="Redirect" content="http://www.uky.edu/kgs/">
<TITLE>The Kentucky Geological Survey Redirect Page</TITLE>
</HEAD>
<BODY text="#000000" bgcolor="#F7D2A2" link="#0000EE" vlink="#551A8B" alink="#FF0000">
<P>
&nbsp;
<CENTER>
<TABLE COLS=1 NOSAVE >
<TR>
<TD ALIGN=CENTER VALIGN=TOP NOSAVE>
<B><FONT face="Arial,Helvetica"><FONT color="#CC6600"><FONT size=+2>The Kentucky
Geological Survey</FONT></FONT></FONT></B>
</TD>
</TR>
</TABLE>
</CENTER>
<CENTER>
<FONT face="Arial,Helvetica">The Kentucky Geological Survey</FONT> <BR>
&nbsp;
<P>
<FONT size=+1>The Whatchamacallit Page has moved to a different
location.</FONT><FONT size=+1></FONT>
<P>
<FONT size=+1>Standby while we take you to</FONT> <BR>
<FONT size=+1><A href="http://www.uky.edu/kgs/">http://www.uky.edu/kgs/</A></FONT>
<P>
Please add a new bookmark to our site
<P>
If your browser doesn't update within 10 seconds, click on the above link.
</CENTER>
</BODY></HTML>

Text

Text appearances [browser dependant]
<STRIKE> and </STRIKE> here is some text
<FONT FACE="Arial"> and </FONT> Text
<CITE> and </CITE> Citation, some text
<CODE> and </CODE> Code, some text
<DFN> and </DFN> Definition, some text
<EM> and </EM> Emphasis, some text
<KBD> and </KBD> Keyboard, some text
<SAMP> and </SAMP> Sample, some text
<STRONG> and </STRONG> Strong, some text
<VAR> and </VAR> Variable, some text
<BLINK> and  </BLINK> Blink
<TT> and </TT> typewriter
<SUB> and </SUB> text2
<SUP> and </SUP> text2

Font Colors, Non HexaDecimal
<FONT COLOR="Black"> Black
<FONT COLOR="White"> White
<FONT COLOR="red"> Red
<FONT COLOR="green"> Green
<FONT COLOR="blue"> Blue
<FONT COLOR="yellow"> Yellow
<FONT COLOR="gray"> Gray
<FONT COLOR="maroon"> Maroon
<FONT COLOR="olive"> Olive
<FONT COLOR="navy"> Navy
<FONT COLOR="purple"> Purple
<FONT COLOR="lime"> Lime
<FONT COLOR="aqua"> Aqua
<FONT COLOR="teal"> Teal
<FONT COLOR="fuchsia"> Fuchsia
<FONT COLOR="Silver"> Silver

Lists

<OL START=4>
  1. one
  2. two
  3. three
  4. four
<OL TYPE=A>
  1. one
  2. two
  3. three
  4. four
<OL TYPE=a>
  1. one
  2. two
  3. three
  4. four
<OL TYPE=I>
  1. one
  2. two
  3. three
  4. four
<OL TYPE=i>
  1. one
  2. two
  3. three
  4. four
<LI>

<LI TYPE=square>

<LI TYPE=circle>

<LI TYPE=disc>

  • one
  • two
  • three
  • four
variety in one list ,
may not work in
Netscape
  • one
  • two
  • three
  • four
Definition list
Coal
an organic rock
formed primarily
from peat
<UL> to indent text,
don't use <LI>,
authoring packages may force <LI>
  • Well, what do you know
    about that? There is no
    dot unless using some authoring software, which may add the <LI> tag.
<UL>
<BR><IMG...>text
</UL>

don't use <LI>

  • Some will force a <LI> tag
    one
    two
    three
    four

Images

Now this is a gif aligned to the right ALIGN="Right" so that when text is added, it is wrapped around the image just as in wordprocessors that you use everyday around the office and other places. You can also show the image to the right. In AOLPress use the "float image" items right or left.

You can break out of this space by using the <BR CLEAR=left> tag which causes
the text to jump below the image. You can use left, right or all for this parameter.

Use the space in between these images to place text if you would like to do this. I aligned them left and right and used a break clear "all."

In this example, I used the HSPACE=20 parameter on the left image to keep the text from abutting with the image. One can use the VSPACE=20 parameter for the part of the text that wraps under the image as well.

 

Alignment tags [used on first, blue image]
left Text
right Text
top Text
absmiddle Text
absbottom Text
texttop Text
middle Text
baseline Text
bottom Text
VSPACE adjusts the amount of horizontal space between the image and the text. It works on both the upper and lower part of the image. [VSPACE=20] Here is some text that wraps to the bottom of the image
HSPACE adjusts the amount of horizontal space between the image and the text. It works on both the left and right side of the image. [HSPACE=30] Here is some text that wraps to the bottom of the image
LOWSRC tag allows the user to view a low resolution image while the higher image loads, then the low res image is replaced by the high-resolution image. The tag has to show the path to the low-res image. The example will not work on this page because the high-res image is already loaded. Look at HTML view to see how this is set up.

Horizontal Rules

<HR SIZE=1 WIDTH="100">

<HR SIZE=10 WIDTH="100">

<HR WIDTH="50%">

<HR NOSHADE SIZE=10 WIDTH="100">

Forms

Put this in the html... 

  <form action="http://www.uky.edu/cgi-bin/AnyForm.cgi" method="POST">
  <input type=hidden name="AnyFormMode" value="Mail">
  <input type=hidden name="AnyFormTo" value="youremailaddress@uky.edu">
 
  Enter here:
  <input type=text name="Input Field">
 
  <input type=submit value="Submit">
  </form>

The following are various types of input...

The following are various types of input for forms
<INPUT TYPE="text" NAME="textfield" VALUE='Please fill this in' SIZE="25" MAXLENGTH="25">
<INPUT TYPE="password" NAME="password" SIZE="25" MAXLENGTH="8"> [puts in ***]
<TEXTAREA NAME="textarea" ROWS="2" COLS="18" WRAP></TEXTAREA>
<INPUT TYPE="checkbox" NAME="kids" VALUE="one">1
<BR><INPUT TYPE="checkbox" NAME="kids" VALUE="two" CHECKED>2
<BR><INPUT TYPE="checkbox" NAME="kids" VALUE="three">3 		1
2
3
<INPUT TYPE="radio" NAME="sex" VALUE="male">Male
<INPUT TYPE="radio" NAME="sex" VALUE="female" CHECKED>Female 		Male Female
<SELECT NAME="age" SIZE="3">
<OPTION>0-5  [SIZE= the number of lines displayed]
<OPTION>6-10
<OPTION>11-16
<OPTION SELECTED>17-35
<OPTION>&gt;36</SELECT>
<INPUT TYPE="file" ENCTYPE="multipart/form-data" NAME="resume" SIZE="25">
<INPUT TYPE=submit VALUE="Send">
<INPUT TYPE=reset VALUE="Clear">
<INPUT SRC="BLUE BLANK.GIF" NAME="send" TYPE="image" WIDTH="77" HEIGHT="32">

Forms

Cascading Style Sheets

Example using link to css sheet and classes

To use a standard style sheet , type the following in the <HEAD> part of the page... 

<LINK REL=stylesheet TYPE="text/css" 
HREF=../stylesheets/ourstandardstyle.css>

The *.css is a text only document (saved as plain text) with no html tags... 

H1{text-align: center; font-style: italic}
P{color: #FF0000}

You can also set unique styles to individual pages by typing in the <HEAD> part... 

<STYLE>
P.important{font-style: italic; color: #FF0000}
</STYLE>

in the body... 

<P CLASS=important>

You can use DIV styles to control a series of traits. For instance in the <HEAD>... 

DIV.butter{background: #FFFF10; font-style: italic}

and in the body... 

<DIV CLASS="butter">
This style controls the background color and the font 
style which would ordinarily be controlled by a style 
for each.</DIV>

This style controls the background color and the font style which would ordinarily be controlled by a style for each.

You can define the style of an element in the body by using the tag, STYLE="__"... 

<H1 STYLE="font-style: italic; color: #9900CC">something here

something here

Hide style scripts from older browsers by using the following tags in the <HEAD>... 

<STYLE>
<!--
some script
-->
</STYLE>

To affect all similar elements within a page, one can place an element style in the <HEAD>... 

<STYLE>
H3 {font-style: italic}
</STYLE>

One can also transform case all text of a particular style using one of the following... 

H2{text-transform: uppercase}
H2{text-transform: capitalize}
H2{text-transform: lowercase}

One can change alignment of all text of a particular style using one of the following... 

H2{text-align: center}
H2{text-align: left}
H2{text-align: right}
H2{text-align: justify}

One can change font of all text of a particular style using one of the following.. You can also specify a second, common font, in case the first is not available... 

H2{font-family: "Old English Text MT","Arial"}

or instead of a specific font, you can use a font type... 

H2{font-family: "serif"}
H2{font-family: "sans-serif"}
H2{font-family: "monospace"}
H2{font-family: "cursive"}
H2{font-family: "fantasy"}

Or an in-line style change...

One can change font size of all text of a particular style using one of the following. It can be in points, pixels or descriptive parameters... 

P{font-size: 14pt}
P{font-size: 18px}
P{font-size: xx-small}
P{font-size: x-small}
P{font-size: small}
P{font-size: medium}
P{font-size: large}
P{font-size: x-large}
P{font-size: xx-large}

One can change color of all text of a particular style using one of the following... 

H2{color: #FF0000}

One can change line spacing of all text of a particular style using one of the following. Put in the number of times larger you want to make the line spacing... 

P{line-height: 2}

One can add an indent of the first line of all text of a particular style using one of the following, in either pixels or percentages... 

P{text-indent: 40px}
P{text-indent: 10%}

One can change the margins for every element using the following... 

P{margin-left: 60px; margin-right: 20px; margin-top: 25px; margin-bottom: 30px}

One can add a background color or background image to any element of a particular style... 

H2{background: #FF0000}
H2{background: url("clouds.gif")}

One can add a border to every element that uses a specific tag by using the following parameters, as well as color...

border style

thickness 

H2{border: solid thin #FF0000}

<H4 STYLE="border: double medium #FF0000">

<H4 STYLE="border: ridge medium #FF0000">

<H4 STYLE="border: groove medium #FF0000">

<H4 STYLE="border: inset medium #FF0000">

<H4 STYLE="border: outset medium #FF0000">

One can wrap text around images by using the following in the <HEAD> part... 

IMG{float: left}

and then in the body... 

<IMG SRC="picture.gif">

One can change the bullet style of lists in the <HEAD> part of the page... 

OL{list-style: lower-roman}
UL{list-style: square}
UL{list-style: square; color: #FF0000; font-style: italic}

These are the names of the bullet styles...

One can have different styles for nested lists such as this example.

One can change appearance of unvisited or visited links. To remove the underline from a link, set text-decoration to none.... 

A:link{color: #FF0000; text-decoration: none; background: #FF0000}
A:visited{color: #FFFF10;  font-style: italic}

One can also use the FLOAT feature in styles to cause text to wrap around objects as in the following examples [browser dependant]...

This is a sample paragraph with a big floating "T" on the left, with all this text wrapped around it. It takes several lines of text to fully demonstrate that the content is really wrapping around the text element. Only the latest browsers support this style.

This example should work in the latest versions of both Internet Explorer and Netscape. It was created with this style: 

                    {float       : left;
                     font-size   : 36pt;
                     font-style  : italic;
                     font-weight : bold}

This text is not in the table.

Item one Item two
Item three Item four

Nor is this text in the table, but it wraps around the table much like a floating image by using the float style in the tables tag. You can see how the text wraps under the table when it is long enough to to wrap off the screen in one of these very long non-sensical sentences. Here is the tag...

<table border="1" style="float:left">

 

Meta Tags 

<META NAME="keywords" CONTENT="fossils, rocks, minerals, kentucky">
<META NAME="description" CONTENT="information and pictures of fossils in Kentucky">
<META NAME="author" CONTENT="Don Chesnut">
<META NAME="copyright" CONTENT="2000 Kentucky Geological Survey">

if you don't want robots to index your site (such as a family webpage), use... 

<META NAME="robots" CONTENT="NOINDEX">

if you don't want robots to index your site or any links on the page, use... 

<META NAME="robots" CONTENT="NOINDEX, NOFOLLOW">

Date Modified

In order to show the Date Modified automatically, insert the following...

<script language="JavaScript" type="text/javascript">
<!--
document.write("Last Modified " + document.lastModified)
// -->
</script>