<node>BackGround
<node>Gradient
<node>Sound
<node>body
<node>Form
<node>checkboxes
<node>controls
<node>combo select
<node>dynamic
<node>grouping
<node>Events
<node>mouseover
<node>onblur
<node>onchange
<node>onclick
<node>onkey
<node>Labels
<node>TextArea
<node>multipleSections
<node>radio button
<node>submit buttons
<node>sample
<node>text
<node>textarea
<node>FORMATING
<node><LI> Replacement
<node>Colors
<node>frames
<node>Icon Address bar
<node>iframe
<node>img
<node>map
<node>META Tag Basics
<node>Meta tag caching
<node>META: What is it used for?
<node>Refreshing Using the META Tag
<node>ROBOTS
<node>ScreenEffects
<node>Printing
<node>SetTimeout
<node>special Characters
<node>both
<Treepad version 3.0>
dt=
<node>HTML Code
0
<end node> 5P9i0s8y19Z
dt=
<node>BackGround
1
bgproperties="fixed"
background="images/pic.jpg"
background-color:white;opacity:.5;filter:alpha(opacity=50);
<end node> 5P9i0s8y19Z
dt=
<node>Gradient
2
Create a Gradient Background Effect
You can use the style tag to create a gradient background effect within your web page. This effect can be used for your entire web page background, or within your table cells.
To use the gradient effect as your web page background, use the following BODY tag:
<body style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#C0CFE2', startColorstr='#FFFFFF', gradientType='0');">
To use the gradient effect within your tables, place the following code within your table tag:
style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#C0CFE2', startColorstr='#FFFFFF', gradientType='0');"
Although you can edit the gradient colors indicated in red, keep in mind, in order for the effect to display properly, you must use a light color and a darker color.
<end node> 5P9i0s8y19Z
dt=
<node>Sound
2
http://www.inquiry.com/techtips/web_pro/answer.asp?pro=web_pro&docID=538
===
Q & A – BGSOUND, EMBED, META: Playing a background sound
Applies to These Versions Categories
Version Numbers Not Applicable Sound
Tags
——————————————————————————–
How do I get sound to play on my Web site?
First, your sound should be in a format that the maximum number of browsers can use. The principal cross-platform sound formats are .au, .wav. and .ra. A good place to visit to find sound conversion tools is MAZ Sound Tools Page, at http://www.th-zwickau.de/~maz. (It takes a while to load, but it's worth the wait.)
As with graphics, you need to keep the file size in mind. The larger the file, the longer it will take to download. I recommend lowering the sample-rate of the sound (if you haven't already done so) to 22 kHz, 16 or even 8 kHz. The lower the quality, the faster the sound will load (although it will sound concomitantly worse). You will have to make your own judgements when you reach this point. Try not to make the sound too annoying-that's a sure way to keep people from coming back to visit your site.
There are three ways to get sounds to play in the background of your page: Via the META tag, the BGSOUND tag, or by using EMBED.
Using META to play sounds
<META HTTP-EQUIV=REFRESH CONTENT="15; URL=http://www.projectcool.com/sounds/demo.au">
This tag lives in the HEAD section of the document. The number next to CONTENT tells the server how many seconds to wait before sending the sound-file to your browser. Don't make it one second, otherwise the sound will play before your page has completely loaded. The URL should show the full-path (yes, it should also include http://… even if it's in the same directory). Also, pay strict attention to where the quotes and spaces are (an extra or missing quote and the file will not be loaded).
Using BGSOUND to play sounds
<BGSOUND SRC="http://www.projectcool.com/sounds/demo.au" LOOP=3>
This tag lives in the BODY of the document and only works with Microsoft's browser (Internet Explorer 2.0 or greater). The SRC can be either relative or full-path. The loop attribute defines how many times you want the sound to play; to play it continuously define LOOP=INFINITE.
Using EMBED to play sounds
<EMBED SRC="http://www.best.com/~paz/homie/sounds/giggle.au" AUTOSTART="TRUE" VOLUME=50%>
This tag lives in the BODY of the document and is supported by both Netscape and Microsoft IE. The SRC can be either relative or full-path. AUTOSTART will determine whether you want the file to begin playing after it has loaded. Volume can be defined from 0-100% (don't set it at 100 unless you want to loose some friends). This tag is actually quite flexible, it also allows for the user to determine where,within the sound file, it begins to play.
<end node> 5P9i0s8y19Z
dt=
<node>body
1
Block elements
P paragraphs
The paragraph element requires a start tag, but the end tag can always be omitted. Use the ALIGN attribute to set the text alignment within a paragraph, e.g. <P ALIGN=RIGHT>
UL unordered lists
These require start and end tags, and contain one or more LI elements representing individual list items.
OL ordered (i.e. numbered) lists
These require start and end tags, and contain one or more LI elements representing individual list items.
DL definition lists
These require start and end tags and contain DT elements that give the terms, and DD elements that give corresponding definitions.
PRE preformatted text
Requires start and end tags. These elements are rendered with a monospaced font and preserve layout defined by whitespace and line break characters.
DIV document divisions
Requires start and end tags. It is used with the ALIGN attribute to set the text alignment of the block elements it contains. ALIGN can be one of LEFT, CENTER or RIGHT.
CENTER text alignment
Requires start and end tags. It is used to center text lines enclosed by the CENTER element. See DIV for a more general solution.
BLOCKQUOTE quoted passage
Requires start and end tags. It is used to enclose extended quotations and is typically rendered with indented margins.
FORM fill-out forms
Requires start and end tags. This element is used to define a fill-out form for processing by HTTP servers. The attributes are ACTION, METHOD and ENCTYPE. Form elements can't be nested.
ISINDEX primitive HTML forms
Not a container, so the end tag is forbidden. This predates FORM and is used for simple kinds of forms which have a single text input field, implied by this element. A single ISINDEX can appear in the document head or body.
HR horizontal rules
Not a container, so the end tag is forbidden. attributes are ALIGN, NOSHADE, SIZE and WIDTH.
TABLE can be nested
Requires start and end tags. Each table starts with an optional CAPTION followed by one or more TR elements defining table rows. Each row has one or more cells defined by TH or TD elements. attributes for TABLE elements are WIDTH, BORDER, CELLSPACING and CELLPADDING.
——————————————————————————–
<end node> 5P9i0s8y19Z
dt=
<node>Form
1
See Java-Forms also
<form name=myform action="" method=post>
<INPUT TYPE = "hidden" SIZE = 0 maxlength= 30 NAME = "Info">
<input type = "submit" value = "Send" name="submit">
<end node> 5P9i0s8y19Z
dt=
<node>checkboxes
2
javascript
if(document.frmInput.iunderstand.checked==false){
error_message = error_message + '*You have NOT read the Affidavit. Please do so and check the box after reading.\n';
error = 1;
}
<input type='checkbox' value='o_prop_tax' name='select[0]' checked>Property Taxes<br>
<input type='checkbox' value='o_insure' name='select[1]' checked>Insurance<br>
<p><input type='checkbox' value='email_note' name='email_note' >Notify me by email if someone views my Rental.</p>
ARRAY CHECK BOXES
function showBoxes(frm){
var verify = frm['regOpt[]'];
if(verify[0].checked==true){
for (var i = 1; i < verify.length; i++) {
verify[i].checked=false;
}
}
}
<tr><td width=34 align=right><input type=checkbox name=regOpt[] value=1 onclick='showBoxes(this.form);'></td>
<td align=left class=tableSubHead>
<b>Main Conference: July 15th, 16th and 17th , 2010 (does not include Pre-Sessions)</b> $429 on/before June 19; $459 after June 19
</td><tr><td width=34 align=right><input type=checkbox name=regOpt[] value=2 onclick='showBoxes(this.form);'></td>
<td align=left class=tableSubHead>
<b>1/2 day only Thursday July 15th (does not include Welcome Reception)</b> $149 on/before June 19; $179 after June 19
</td><tr><td width=34 align=right><input type=checkbox name=regOpt[] value=3 onclick='showBoxes(this.form);'></td>
<td align=left class=tableSubHead>
<b>Friday, July 17th only</b> $280 on/before June 19; $310 after June 19
</td><tr><td width=34 align=right><input type=checkbox name=regOpt[] value=5 onclick='showBoxes(this.form);'></td>
<td align=left class=tableSubHead>
<b>1/2 day only Saturday, July 17th</b> $149 on/before June 19; $179 after June 19
</td></table>
<end node> 5P9i0s8y19Z
dt=
<node>controls
2
<end node> 5P9i0s8y19Z
dt=
<node>combo select
3
<select size="3">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
function message(form){
var value = form.payment.options[form.payment.selectedIndex].value;
var message="";
if(value=="PHONE"){
message="Complete your order by scrolling to the bottom of this page and clicking the NEXT button.\n\n That will complete your order and provide you with your order number and total.\n\n I accept Visa or MasterCard.\n\n Call Denise at 970-454-2152 or cell phone at 970-590-2162.\n\n I will need your order # and the total amount of your order. Please provide me with your credit card number, expiration date, and the last 3 digits of the number on the back of your card.\n\n I also need the billing address of the credit card if you did not provide it on the order form. If for some reason I am unable to take your call, please leave me a message and I'll call you back as soon as possible. You may leave this information on my answering machine.\n\n Please call between 7:30am and 9:30pm (Mountain Standard Time) 9:30am and 11:30pm (Eastern Standard Time).\n\n Thank You.";
}
if(value=="CHECK"){
message="You have selected pay by check";
}
if(value=="MONEY ORDER"){
message="You have selected MONEY ORDER";
}
if(value=="PAYPAL"){
message="If you are paying by credit card with our secure online page, we accept Visa, MasterCard, Discover and American Express.\n\nIf you do not receive a confirmation email after completing the credit card payment, we will not be notified either. Contact us to confirm your order.";
}
alert (message);
}
*************
<select name="payment" class="small" id="payment" onChange="message(this.form);">
<option value="uncola" selected>Select Payment Option Here</option>
<option value="CHECK">Check (via mail)</option>
<option value="MONEY ORDER">Money Order
(via mail)</option>
<option value="PAYPAL" >Credit Card</option>
<option value="PAYPAL" >PAY PAL</option>
<option value="PHONE">Credit Card (via Phone)</option>
</select>
[example 2]
How do I find the value of a SELECT element?
Apr 17th, 2000 16:04
Martin Honnen,
NN6 and IE4+ provide a
value
property for SELECT elements thus
document.formName.selectName.value
is sufficient with these browsers. For other browsers and cross browser
code use
var select = document.formName.selectName;
var value = select.options[select.selectedIndex].value
__________________________________
[select name='navi' onChange="go()">
function go()
{
box = document.forms[0].navi;
destination = box.options[box.selectedIndex].value;
if (destination) location.href = destination;
}
____________________________________________________
Where: qxq-features.php
<script language="JavaScript">
function bookmark(){
var select = document.titles.title;
var value = select.options[select.selectedIndex].value;
if (value!=0) location.href = "features.php#"+value;
}
</script>
<end node> 5P9i0s8y19Z
dt=
<node>dynamic
4
Create Dynamic Combobox using php and onselection change values of another dynamic Combobox
http://stackoverflow.com/questions/11451150/create-dynamic-combobox-using-php-and-onselection-change-values-of-another-dynam
want to Create HTML Dynamic Combobox which populate using php scripting from db and onselection change values of another dynamic Combobox. Initially 2nd combobox should be invisible and on selection of 1st combobox make 2nd combobox visible related with similar data. for example, I have this table :
Category Name
Airport ABC
Airport XYZ
College a1
College b1
College b2
busstop a
busstop b
busstop c
busstop d
So, 1st Combobox will contain Unique Category listing (like: Airport, College, busStop) and on the base of this selection enable 2nd combobox with related values like if user selected Airport then 2nd combobox will contain only (ABC, XYZ).
I basically want to do this with only HTML,JAVASCRIPT AND PHP only.
any suggestions are appreciated..
php javascript html combobox
share|improve this question
asked Jul 12 '12 at 11:47
anand
2518
Here is a basic example with what you want. Test it and come back if you have problems implementing this. – Ovidiu Jul 12 '12 at 11:54
Hi ovidiu, I think you forgot to give some link .. – anand Jul 12 '12 at 12:33
plus2net.com/php_tutorial/ajax_drop_down_list.php – sorry 🙂 – Ovidiu Jul 12 '12 at 12:38
@ovidiu, its very nice example but with ajax. I do not want to use ajax. if you have any other example then it really will be useful.. please let me know. Thanks .. – anand Jul 12 '12 at 13:06
I don't have an example without ajax. But to do it without, you need to submit the selection from first dropdown, pass it as a get/post then on reload fill the second one based on passed value. No need for javascript then. – Ovidiu Jul 12 '12 at 13:22
2 Answers
active oldest votes
up vote 2 down vote accepted
With the following snippet I make the assumption you have an array filled with your database rows as objects, which I will name $results;
edit: How to get your query objects: http://www.php.net/manual/en/mysqli-result.fetch-object.php
I start with gathering the data for creating the comboboxes:
$combobox_data = array();
$results = mysqli_query("SELECT * FROM TABLE");
//create a multi dimensional array with names per category
while($row = mysqli_fetch_object($results)){
$combobox_data[$row->Category][] = $row->Name;
}
$category_combobox_html = "";
$name_combo_boxes_html = "";
//create category combo_box
foreach($combobox_data as $category=>$names){
//Add category option to category combo-box
$category_combobox_html .= '<option value="'.$category.'">'.$category.'</option>';
//Create Names combo-box for this category
$name_combo_boxes_html .= '<select id="'.$category.'" name="'.$category.'" class="hidden_combobox">';
//loop names, to add Names in the combo-box for this category
foreach($names as $name){
$name_combo_boxes_html .= '<option value="'.$name.'">'.$name.'</option>';
}
//end your combo box for this category
$name_combo_boxes_html .= '</select>';
}
your css
<style type="text/css" media="screen">
.hidden_combobox{
display:none;
}
</style>
your html
<select name="categories" id="categories">
<?php echo $category_combobox_html; ?>
</select>
<?php echo name_combo_boxes_html ;?>
your javascript
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
//when you select something from category box
$("#categories").change(function(){
//get selected category
var selectedValue = $(this).find(":selected").val();
//hide all nameboxes
$('.namebox').each(function(){
$(this).hide();
});
//show combobox for this select
$('#'+selectedValue).show();
});
</script>
Your result will be this:
All name comboboxes will be hidden unless you select a category which matches the combo_box
<select name="categories" id="categories">
<option value="Airport">Airport</option>
<option value="College">College</option>
<option value="busstop">busstop</option>
</select>
<select id="Airport" name="Airport" class="namesbox hidden_combobox">
<option value="ABC">ABC</option>
<option value="XYZ">XYZ</option>
</select>
<select id="College" name="College" class="namesbox hidden_combobox">
<option value="a1">a1</option>
<option value="b1">b1</option>
<option value="b2">b2</option>
</select>
<select id="busstop" name="busstop" class="namesbox hidden_combobox">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">d</option>
</select>
<end node> 5P9i0s8y19Z
dt=
<node>grouping
4
<html>
<body>
<select>
<optgroup label="Numbers">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</optgroup>
<optgroup label="Letters" disabled="true">
<option value="4">A</option>
<option value="5">B</option>
<option value="6">C</option>
</optgroup>
</select>
</body>
</html>
<end node> 5P9i0s8y19Z
dt=
<node>Events
3
<end node> 5P9i0s8y19Z
dt=
<node>mouseover
4
onmouseover="this.style.cursor='hand'"
<end node> 5P9i0s8y19Z
dt=
<node>onblur
4
onblur=window.close()
onblur="myOnblur(getElementById(id).value);" onchange="myOnchange(getElementById(id).value);" onclick="myOnclick(getElementById(id).value);" onkey="myOnKey(getElementById(id).value);"
<end node> 5P9i0s8y19Z
dt=
<node>onchange
4
<select name="sort" onChange="submit();">
<select name="sort" onChange="submit();">
<form method=post action="propsearch.php" name="propsearchform" id="propsearchform"><table cellspacing=1 cellpadding=2><tr align=left><td> <b>Counties:</b></td></tr><tr align=center><td><select name="counties[]" multiple size=8><option value='ALL' selected>All Counties</option><option value='Alameda'>Alameda</option><option value='Alpine'>Alpine</option><option value='Amador'>Amador</option><option value='Butte'>Butte</option><option value='Calaveras'>Calaveras</option><option value='Colusa'>Colusa</option><option value='Contra Costa'>Contra Costa</option><option value='Del Norte'>Del Norte</option><option value='El Dorado'>El Dorado</option><option value='Fresno'>Fresno</option><option value='Glenn'>Glenn</option><option value='Humboldt'>Humboldt</option><option value='Imperial'>Imperial</option><option value='Inyo'>Inyo</option><option value='Kern'>Kern</option><option value='Kings'>Kings</option><option value='Lake'>Lake</option><option value='Lassen'>Lassen</option><option value='Los Angeles'>Los Angeles</option><option value='Madera'>Madera</option><option value='Marin'>Marin</option><option value='Mariposa'>Mariposa</option><option value='Mendocino'>Mendocino</option><option value='Merced'>Merced</option><option value='Modoc'>Modoc</option><option value='Mono'>Mono</option><option value='Monterey'>Monterey</option><option value='Napa'>Napa</option><option value='Nevada'>Nevada</option><option value='Orange'>Orange</option><option value='Placer'>Placer</option><option value='Plumas'>Plumas</option><option value='Riverside'>Riverside</option><option value='Sacramento'>Sacramento</option><option value='San Benito'>San Benito</option><option value='San Bernardino'>San Bernardino</option><option value='San Diego'>San Diego</option><option value='San Francisco'>San Francisco</option><option value='San Joaquin'>San Joaquin</option><option value='San Luis Obispo'>San Luis Obispo</option><option value='San Mateo'>San Mateo</option><option value='Santa Barbara'>Santa Barbara</option><option value='Santa Clara'>Santa Clara</option><option value='Santa Cruz'>Santa Cruz</option><option value='Shasta'>Shasta</option><option value='Sierra'>Sierra</option><option value='Siskiyou'>Siskiyou</option><option value='Solano'>Solano</option><option value='Sonoma'>Sonoma</option><option value='Stanislaus'>Stanislaus</option><option value='Sutter'>Sutter</option><option value='Tehama'>Tehama</option><option value='Trinity'>Trinity</option><option value='Tulare'>Tulare</option><option value='Tuolumne'>Tuolumne</option><option value='Ventura'>Ventura</option><option value='Yolo'>Yolo</option><option value='Yuba'>Yuba</option></select><div class='alertlight' style='width:200px'>(Hold down CTRL on a PC or Apple on a Mac to make multiple selections.)</div></td></tr><tr align=left><td><p style='padding:5px;'><b>Property Type:</b></p><input type=checkbox name="ranches" id="ranches" value='x' checked>Cattle Ranches<br><input type=checkbox name="equestrian" id="equestrian" value='x' checked>Equestrian Ranches<br><input type=checkbox name="agriculture" id="agriculture" value='x' checked>Farms and Orchards<br><input type=checkbox name="vineyards" id="vineyards" value='x' checked>Vineyards<br><input type=checkbox name="water" id="water" value='x' checked>Water – Ocean, Rivers, Lakes<br><input type=checkbox name="duckclub" id="duckclub" value='x' checked>Duck Club<br><input type=checkbox name="recreation" id="recreation" value='x' checked>Recreation – Hunting and Timber<br><input type=checkbox name="land" id="land" value='x' checked>Land<br><input type=checkbox name="commercial" id="commercial" value='x' checked>Commercial<br><input type=checkbox name="resranchette" id="resranchette" value='x' checked>Ranchette and Residential<br></td></tr><tr align=left><td><p style='padding:5px;'><b>Parcel Range:</b></p></td></tr><tr align=left><td><table cellspacing=0 cellpadding=0 width=100%><tr align=left><td><input onClick="if(this.checked) { allparcels.checked=false; }" type="checkbox" name="0-10" id="0-10" value='x'>Under 10 acres </td><td><input onClick="if(this.checked) { allparcels.checked=false; }" type="checkbox" name="10-50" id="10-50" value='x'>10-50 acres </td></tr><tr align=left><tr align=left><td><input onClick="if(this.checked) { allparcels.checked=false; }" type="checkbox" name="50-100" id="50-100" value='x'>50-100 acres </td><td><input onClick="if(this.checked) { allparcels.checked=false; }" type="checkbox" name="100-200" id="100-200" value='x'>100-200 acres </td></tr><tr align=left><tr align=left><td><input onClick="if(this.checked) { allparcels.checked=false; }" type="checkbox" name="200-500" id="200-500" value='x'>200-500 acres </td><td><input onClick="if(this.checked) { allparcels.checked=false; }" type="checkbox" name="500-1000000" id="500-1000000" value='x'>Over 500 acres </td></tr><tr align=left></tr></table></td></tr><tr align=right><td colspan=2><input type=checkbox name='allparcels' id='allparcels' value='x' onClick="if(this.checked) { document.getElementById('0-10').checked=true;document.getElementById('10-50').checked=true;document.getElementById('50-100').checked=true;document.getElementById('100-200').checked=true;document.getElementById('200-500').checked=true;document.getElementById('500-1000000').checked=true; }" checked>All Parcel Sizes</td></tr></td></tr><tr align=left><td><p style='padding:5px;'><b>Price Range:</b></p></td></tr><tr align=left><td><table cellspacing=0 cellpadding=0 width=100%><tr align=left><td><input onClick="if(this.checked) { allprices.checked=false; }" type="checkbox" name="0-200000" id="0-200000" value='x'>Under $200,000 </td><td><input onClick="if(this.checked) { allprices.checked=false; }" type="checkbox" name="200001-400000" id="200001-400000" value='x'>$200,000-$400,000 </td><tr align=left><td><input onClick="if(this.checked) { allprices.checked=false; }" type="checkbox" name="400001-800000" id="400001-800000" value='x'>$400,000-$800,000 </td><td><input onClick="if(this.checked) { allprices.checked=false; }" type="checkbox" name="800001-1000000" id="800001-1000000" value='x'>$800,000-$1 million </td><tr align=left><td><input onClick="if(this.checked) { allprices.checked=false; }" type="checkbox" name="1000000-2000000" id="1000000-2000000" value='x'>$1 million-$2 million </td><td><input onClick="if(this.checked) { allprices.checked=false; }" type="checkbox" name="2000000-100000000" id="2000000-100000000" value='x'>Over $2 million </td><tr align=left><td><input onClick="if(this.checked) { allprices.checked=false; }" type="checkbox" name="auction" id="auction" value='x'>Auctions </td></tr></table></td></tr><tr align=right><td colspan=2><input type=checkbox name='allprices' id='allprices' value='x' onClick="if(this.checked) {document.getElementById('0-200000').checked=true;document.getElementById('200001-400000').checked=true;document.getElementById('400001-800000').checked=true;document.getElementById('800001-1000000').checked=true;document.getElementById('1000000-2000000').checked=true;document.getElementById('2000000-100000000').checked=true; }" checked>All Prices</td></tr></td></tr><tr align=center><td><div class="searchbutton" onclick="document.getElementById('quicktext').value='';document.forms['propsearchform'].submit();"> </div></td></tr></table></div><br><br><h7><b>Quick Search:</b></h7><br><p style="text-align:left;"><font style="font-size:9pt;">Enter the name of a property or word describing the type of property you're looking for.</font></p><div style="width:99%;" class=paper><table cellspacing=0 cellpadding=0><tr height='50px' align=left><td><input style='height:30px;width:225px;font-size:100%;' type=text name="quicktext" id="quicktext" value=""></td><td><div class="searchbutton" style='margin-left:5px;' onclick="document.forms['propsearchform'].submit();"> </div></td></tr></table></form></td></tr></table><div style='clear:both;'></div><br><br><br></td></tr><tr valign=bottom align=center bgcolor='#e6dac6'><td style="padding-right:5px;border-bottom:#614f35 3px solid;"><table style="width:95%;font-size:95%;" cellspacing=1 cellpadding=1><tr valign=top align=center><td><img src="images/homepage2_2014.png" style="width:950px;border:none;"></td></tr></table></td></tr></table></div><table width='1000px' cellspacing=0 cellpadding=0 style='margin:0px'><tr align=left><td><div style='margin:5px;float:right;'><a href="http://www.LandProsSystems.com" target="_blank" title="LandProsSystems.com"><img alt="powered by Land Pros" src="http://landpros.com/images/poweredby_landpros_logo.png"></a></div><div class='login'><a href='http://www.californiaoutdoorproperties.com/login.php'><b>Login</b></a></div></td></tr><tr align=center><td><div id='footer'><a href="index.php">Home</a> <a href="propsearch.php?justlisted=90">Properties</a> <a href="auction.php">Auction</a> <a href="sell.php">Sell</a> <a href="buy.php">Buy</a> <a href="agents.php">Agents</a> <a href="aboutus.php">About Us</a> <a href="contact.php">Contact</a> <a href="sitemap.html">Site Map</a></div></td></tr><tr align=center><td>
<end node> 5P9i0s8y19Z
dt=
<node>onclick
4
onclick="location.href='calendarShow.php'"
<td class=clk onclick="window.open('calendarShow.php','new','width=800,height=700');" onmouseover="this.style.cursor='hand'">
[COMBO CHANGE]
var value = document.mainForm.payment.options[document.mainForm.payment.selectedIndex].value;
var message="";
if(value=="PHONE"){
message="Complete your order by scrolling to the bottom of this page and clicking the "NEXT" button. That will complete your order and provide you with your order number and total.\n I accept Visa or MasterCard.\n Then call Denise at 970-454-2152 or on her cell phone at 970-590-2162. I will need your order # and the total amount of your order. Please provide me with your credit card number, expiration date, and the last 3 digits of the number on the back of your card. I also need the billing address of the credit card if you did not provide it on the order form. If for some reason I am unable to take your call, please leave me a message and I'll call you back as soon as possible. You may leave this information on my answering machine./n/n Please call between 7:30am and 9:30pm (Mountain Standard Time) 9:30am and 11:30pm (Eastern Standard Time)./n Thank You.";
}
if(value=="CHECK"){
message="You have selected pay by check";
}
if(value=="MONEY ORDER"){
message="You have selected MONEY ORDER";
}
if(value=="PAY PAL"){
message="If you are paying by credit card with our secure online page, we accept Visa, MasterCard, Discover and American Express.\n\nIf you do not receive a confirmation email after completing the credit card payment, we will not be notified either. Contact us to confirm your order.";
}
alert (message);
<end node> 5P9i0s8y19Z
dt=
<node>onkey
4
onkeyup will return the key that has been pressed while filling text box. Onkeypress and onkeydown will not
window.event.keyCode == returns ascii value of the key pressed
<end node> 5P9i0s8y19Z
dt=
<node>Labels
3
<lable>test</label>
[Change Text]
See textarea to see a method
<end node> 5P9i0s8y19Z
dt=
<node>TextArea
3
[maxlength]
<textarea cols="60" rows="5" onkeypress="if (this.value.length > 100) { return false; }"></textarea>
[counter]
<label id="count"></label>
<br><textarea name="comment" rows="3" cols="50" onkeypress="document.getElementById('count').innerHTML=this.value.length"></textarea>
<end node> 5P9i0s8y19Z
dt=
<node>multipleSections
2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Kendall Printing Quote Form</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<SCRIPT language="JavaScript">
<!–
var reWhitespace = /^\s+$/;
var reEmail = /^.+\@.+\..+$/;
var reInteger = /^\d+$/;
var reSignedInteger = /^(\+|-)?\d+$/;
var sec1, sec2, sec3, sec4, sec5;
var Header1, Header2, Header3, Header4, Header5;
var defaultEmptyOK = false
function warnEmpty (theField, s)
{
theField.style.backgroundColor='#ff3333';
alert(s);
return false;
}
function warnInvalid (theField, s)
{
theField.style.backgroundColor='#ff3333';
alert(s);
return false;
}
function isSignedInteger (s)
{ if (isEmpty(s))
if (isSignedInteger.arguments.length == 1) return defaultEmptyOK;
else return (isSignedInteger.arguments[1] == true);
else {
return reSignedInteger.test(s);
}
}
function isPositiveInteger (s)
{ var secondArg = defaultEmptyOK;
if (isPositiveInteger.arguments.length > 1)
secondArg = isPositiveInteger.arguments[1];
return (isSignedInteger(s, secondArg)
&& ( (isEmpty(s) && secondArg) || (parseInt (s) > 0) ) );
}
function checkPositiveInteger (theField, s, emptyOK)
{
if ((emptyOK == true) && (isEmpty(theField.value))) return true;
if (isPositiveInteger(theField.value.replace(",","")))
return true;
else
return warnInvalid(theField, s);
}
function isEmpty(s)
{ return ((s == null) || (s.length == 0));
}
function isWhitespace (s)
{
return (isEmpty(s) || reWhitespace.test(s));
}
function isEmail (s)
{ if (isEmpty(s))
if (isEmail.arguments.length == 1) return defaultEmptyOK;
else return (isEmail.arguments[1] == true);
else {
return reEmail.test(s)
}
}
function checkEmail (theField, s, emptyOK)
{ if (checkEmail.arguments.length == 1) emptyOK = defaultEmptyOK;
if ((emptyOK == true) && (isEmpty(theField.value))) return true;
else if (!isEmail(theField.value, false))
return warnInvalid (theField, s);
else return true;
}
function checkString (theField, s, emptyOK)
{
if (checkString.arguments.length == 2) emptyOK = defaultEmptyOK;
if ((emptyOK == true) && (isEmpty(theField.value))) return true;
if (isWhitespace(theField.value))
return warnEmpty (theField, s);
else return true;
}
function validatePage5(){
df=document.forms[0];
if(!checkString(df.ContactName,'Contact Name is Required', false))return false;
if(!checkString(df.Phone,'Phone is Required', false))return false;
if(!checkString(df.Fax,'Fax is Required', false))return false;
if(!checkString(df.Email,'Email is Required', false))return false;
if(!checkEmail(df.Email,'Email must be in the correct format', true))return false;
return true;
}
function init(){
sec1 = document.getElementById('Section1');
sec2 = document.getElementById('Section2');
sec3 = document.getElementById('Section3');
sec4 = document.getElementById('Section4');
sec5 = document.getElementById('Section5');
Header1 = document.getElementById('Header1');
Header2 = document.getElementById('Header2');
Header3 = document.getElementById('Header3');
Header4 = document.getElementById('Header4');
Header5 = document.getElementById('Header5');
}
function hideAllDivs(){
sec1.style.display='none';
sec2.style.display='none';
sec3.style.display='none';
sec4.style.display='none';
sec5.style.display='none';
// also grey all headers
Header1.style.color='#cccccc';
Header1.style.fontWeight='500';
Header2.style.color='#cccccc';
Header2.style.fontWeight='500';
Header3.style.color='#cccccc';
Header3.style.fontWeight='500';
Header4.style.color='#cccccc';
Header4.style.fontWeight='500';
Header5.style.color='#cccccc';
Header5.style.fontWeight='500';
}
function showStep1(){
hideAllDivs();
sec1.style.display='block';
Header1.style.color='#ffffff';
Header1.style.fontWeight='900';
}
function showStep2(){
hideAllDivs();
sec2.style.display='block';
Header2.style.color='#ffffff';
Header2.style.fontWeight='900';
}
function showStep3(){
hideAllDivs();
sec3.style.display='block';
Header3.style.color='#ffffff';
Header3.style.fontWeight='900';
}
function showStep4(){
hideAllDivs();
sec4.style.display='block';
Header4.style.color='#ffffff';
Header4.style.fontWeight='900';
}
function showStep5(){
hideAllDivs();
sec5.style.display='block';
Header5.style.color='#ffffff';
Header5.style.fontWeight='900';
}
//–>
</script>
<style type="text/css">
input.blue{background-color:#0066cc;color:#dddddd;font-weight:900}
</style>
</head>
<body bgcolor="#eeeeee" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="init()">
<table width="599" height="23" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#0066CC">
<tr>
<td width="109" height="20" align="center"><font style="color:#ffffff;background-color:#0066cc;font-weight:900" ID="Header1">Job
Overview</font></td>
<td width="121" align="center"><font style="color:#cccccc;background-color:#0066cc;font-weight:500" ID="Header2">Paper
& Ink</font></td>
<td width="103" align="center"><font style="color:#cccccc;background-color:#0066cc;font-weight:500" ID="Header3">Finishing</font></td>
<td width="119" align="center"><font style="color:#cccccc;background-color:#0066cc;font-weight:500" ID="Header4">Special
Instr</font></td>
<td width="147" align="center"><font style="color:#cccccc;background-color:#0066cc;font-weight:500" ID="Header5">Shipping
/ Contact</font></td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" align="center"><tr><td valign='top'><form name='form1' method='post' action='quote_form_action.asp' onSubmit="return validatePage5()">
<div ID="Section1" style="visibility:visible;height:0;">
<table width="600" height="467" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#eeeeee">
<tr>
<td height="26" colspan="4" align="center" bgcolor="#CCCCCC"><strong> </strong>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="25%" height="25"> </td>
<td align="center"><strong>Job Overview</strong></td>
<td width="25%" align="right"><strong> Step 1 of 5 </strong></td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="35" height="19"> </td>
<td colspan="2" align="center"><font color="#3366ff">*</font><font size="2"> indicates a required field</font></td>
<td width="35"> </td>
</tr>
<tr>
<td height="26"> </td>
<td width="149">Project Title:</td>
<td width="384" align="left"><input name="ProjectTitle" type="text" id="ProjectTitle" value="" size="30" style="background-color:#ffffff" onFocus="this.style.backgroundColor='#ffffff'"></td>
<td> </td>
</tr>
<tr>
<td height="27"> </td>
<td>Quantity:</td>
<td align="left"><input name="Quantity" type="text" id="Quantity" size="5" value="" style="background-color:#ffffff" onFocus="this.style.backgroundColor='#ffffff'"></td>
<td> </td>
</tr>
<tr>
<td height="28"> </td>
<td># of pages:</td>
<td><input name="NumberPages" type="text" id="NumberPages" size="5" style="background-color:#ffffff" onFocus="this.style.backgroundColor='#ffffff'"></td>
<td> </td>
</tr>
<tr>
<td height="27"> </td>
<td>Flat size:</td>
<td><input name="FlatSize" type="text" id="FlatSize"></td>
<td> </td>
</tr>
<tr>
<td height="29"> </td>
<td>Finished size:</td>
<td><input name="FinishedSize" type="text" id="FinishedSize3"></td>
<td> </td>
</tr>
<tr>
<td height="27"> </td>
<td>Cover:</td>
<td align="left"><input name="Cover" type="checkbox" id="Cover" value="Self-Cover">
self cover
<input name="Cover" type="checkbox" id="Cover" value="Plus Cover">
plus cover</td>
<td> </td>
</tr>
<tr>
<td height="26"> </td>
<td valign="top">Media Supplied:</td>
<td align="left"><textarea name="MediaSupplied" cols="35" id="MediaSupplied"></textarea></td>
<td> </td>
</tr>
<tr>
<td height="145"> </td>
<td height="145"> </td>
<td align="right"> </td>
<td> </td>
</tr>
<tr>
<td height="24"> </td>
<td> </td>
<td align="right"><input class='blue' type="button" name="Button2" value="Next" onClick="showStep2()" ></td>
<td> </td>
</tr>
<tr>
<td height="19"> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
<div ID="Section2" style="display:none">
<table width="600" height="467" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#eeeeee">
<tr bgcolor="#CCCCCC">
<td height="23" colspan="4" align="center"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="25%" height="23"> </td>
<td align="center"><strong>Paper & Ink</strong></td>
<td width="25%" align="right"><strong> Step 2 of 5 </strong></td>
</tr>
</table></td>
</tr>
<tr>
<td width="34" height="19"> </td>
<td colspan="2" align="center"><font color="#3366ff">*</font><font size="2"> indicates a
required field</font></td>
<td width="35"> </td>
</tr>
<tr>
<td height="125"> </td>
<td colspan="2" valign="top"><table width="409" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="72" height="26"><strong>Paper: </strong></td>
<td width="56"><u>Text</u></td>
<td width="153"><input name="Paper_Text_Stock" type="text" id="Paper_Text_Stock"></td>
<td width="128">stock & wt </td>
</tr>
<tr>
<td height="27"> </td>
<td> </td>
<td><input name="Paper_Text_Color" type="text" id="Paper_Text_Color"></td>
<td>color</td>
</tr>
<tr>
<td height="19"> </td>
<td colspan="3"><hr size="1"></td>
</tr>
<tr>
<td height="27"> </td>
<td><u>Cover</u></td>
<td><input name="Paper_Cover_Stock" type="text" id="Paper_Cover_Stock"></td>
<td>stock & wt</td>
</tr>
<tr>
<td height="26"> </td>
<td> </td>
<td><input name="Paper_Cover_Color" type="text" id="Paper_Cover_Color"></td>
<td>color</td>
</tr>
</table>
</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td colspan="2"> </td>
<td> </td>
</tr>
<tr>
<td width="34" height="232"> </td>
<td colspan="2" valign="top"><table width="494" height="232" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="44" height="26"><strong>Ink: </strong></td>
<td width="43"><u>Text</u></td>
<td width="72">Colors:</td>
<td width="286">
<select name="Ink_Text_Colors" id="Ink_Text_Colors">
<option value="None " selected>None </option>
<option value="1 Color – Black Only ">1 Color – Black Only </option>
<option value="1 Color ">1 Color </option>
<option value="2 Colors ">2 Colors </option>
<option value="3 Colors ">3 Colors </option>
<option value="(4/C)Process ">(4/C)Process </option>
<option value="(4/C)Process + 1 PMS ">(4/C)Process + 1 PMS </option>
<option value="(4/C)Process + 2 PMS ">(4/C)Process + 2 PMS </option>
<option value="(4/C)Process + 3 PMS ">(4/C)Process + 3 PMS </option>
<option value="(4/C)Process + 4PMS ">(4/C)Process + 4PMS </option>
<option value="Other ">Other </option>
</select></td>
<td width="49"> </td>
</tr>
<tr>
<td height="27"> </td>
<td> </td>
<td>Bleeds</td>
<td><input type="radio" name="Ink_Text_Bleeds" value="1">
Yes / No
<input name="Ink_Text_Bleeds" type="radio" value="0" checked></td>
<td> </td>
</tr>
<tr>
<td height="27"> </td>
<td> </td>
<td>Coverage:</td>
<td>
<select name="Ink_Text_Coverage" id="Ink_Text_Coverage">
<option value="Heavy">Heavy</option>
<option value="Light">Light</option>
<option value="Medium" selected>Medium</option>
</select></td>
<td> </td>
</tr>
<tr>
<td height="27"> </td>
<td> </td>
<td>Coating: </td>
<td><select name="Ink_Text_Coating" id="Ink_Text_Coating">
<option value="No Special Coating" selected>No Special Coating
<option value="Varnish/Flood">Varnish/Flood
<option value="Varnish/Spot">Varnish/Spot
<option value="Aqueous Coating">Aqueous Coating
<option value="UV Gloss">UV Gloss
<option value="UV Dull">UV Dull
<option value="Matte Laminate">Matte Laminate
<option value="Gloss Laminate">Gloss Laminate
</select>
</td>
<td> </td>
</tr>
<tr>
<td height="19"> </td>
<td colspan="3"><hr size="1">
</td>
<td> </td>
</tr>
<tr>
<td height="27"> </td>
<td><u>Cover</u></td>
<td>Colors: </td>
<td><select name="Ink_Cover_Colors" id="Ink_Cover_Colors">
<option value="None " selected>None </option>
<option value="1 Color – Black Only ">1 Color – Black Only </option>
<option value="1 Color ">1 Color </option>
<option value="2 Colors ">2 Colors </option>
<option value="3 Colors ">3 Colors </option>
<option value="(4/C)Process ">(4/C)Process </option>
<option value="(4/C)Process + 1 PMS ">(4/C)Process + 1 PMS </option>
<option value="(4/C)Process + 2 PMS ">(4/C)Process + 2 PMS </option>
<option value="(4/C)Process + 3 PMS ">(4/C)Process + 3 PMS </option>
<option value="(4/C)Process + 4PMS ">(4/C)Process + 4PMS </option>
<option value="Other ">Other </option>
</select></td>
<td> </td>
</tr>
<tr>
<td height="26"> </td>
<td> </td>
<td>Bleeds</td>
<td><input type="radio" name="Ink_Cover_Bleeds" value="1">
Yes / No
<input name="Ink_Cover_Bleeds" type="radio" value="0" checked></td>
<td> </td>
</tr>
<tr>
<td height="29"> </td>
<td> </td>
<td>Coverage:</td>
<td><select name="Ink_Cover_Coverage" id="Ink_Cover_Coverage">
<option value="Heavy">Heavy</option>
<option value="Light">Light</option>
<option value="Medium" selected>Medium</option>
</select></td>
<td> </td>
</tr>
<tr>
<td height="24" colspan="2"> </td>
<td valign="top">Coating:</td>
<td>
<select name="Ink_Cover_Coating" id="Ink_Cover_Coating">
<option value="No Special Coating" selected>No Special Coating
<option value="Varnish/Flood">Varnish/Flood
<option value="Varnish/Spot">Varnish/Spot
<option value="Aqueous Coating">Aqueous Coating
<option value="UV Gloss">UV Gloss
<option value="UV Dull">UV Dull
<option value="Matte Laminate">Matte Laminate
<option value="Gloss Laminate">Gloss Laminate
</select>
</td>
<td align="right"> </td>
</tr>
</table></td>
<td width="35"> </td>
</tr>
<tr>
<td> </td>
<td width="217"><input type="button" name="Button4" class='blue' value="Previous" onClick="javascript:showStep1()"></td>
<td width="314" align="right"><input type="button" class='blue' name="Button3" value="Next" onClick="javascript:showStep3()"></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td align="right"> </td>
<td> </td>
</tr>
</table>
</div>
<div id="Section3" style="display:none">
<table width="600" height="467" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#eeeeee">
<tr bgcolor="#CCCCCC">
<td height="23" colspan="4" align="center"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="25%" height="23"> </td>
<td align="center"><strong>Finishing</strong></td>
<td width="25%" align="right"><strong> Step 3 of 5 </strong></td>
</tr>
</table></td>
</tr>
<tr>
<td width="34"> </td>
<td colspan="2" align="center"><font color="#3366ff">*</font><font size="2"> indicates a
required field</font></td>
<td width="34"> </td>
</tr>
<tr>
<td> </td>
<td colspan="2"><strong>Proofs: </strong>
<input name="Proofs" type="checkbox" id="Proofs" value="Digital Color Proof">
Digital Color Proof
<input name="Proofs" type="checkbox" id="Proofs" value="PlotterProof">
Plotter Proof </td>
<td> </td>
</tr>
<tr>
<td height="19"> </td>
<td colspan="2" valign="top"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td colspan="2" valign="top"><strong>How would you like your document bound?</strong></td>
<td> </td>
</tr>
<tr>
<td height="26"> </td>
<td colspan="2"><input name="Binding" type="checkbox" id="Binding" value="Saddlebind">
Saddlebind
<input name="Binding" type="checkbox" id="Binding" value="Perfect Bind">
Perfect Bind
<input name="Binding" type="checkbox" id="Binding" value="Wire0">
Wire-0 <br>
<input name="Binding" type="checkbox" id="Binding" value="Spiral">
Spiral
<input name="Binding" type="checkbox" id="Binding" value="Corner Staple ">
Corner Staple
<input name="Binding" type="checkbox" id="Binding" value="Looseleaf ">
Looseleaf</td>
<td> </td>
</tr>
<tr>
<td height="19"> </td>
<td colspan="2"> </td>
<td> </td>
</tr>
<tr>
<td height="22"> </td>
<td colspan="2"><strong>Other options:</strong></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td colspan="2"><input name="OtherOptions" type="checkbox" id="OtherOptions" value="Diecut">
Diecut
<input name="OtherOptions" type="checkbox" id="OtherOptions" value="Perf / Score ">
Perf/Score
<input name="OtherOptions" type="checkbox" id="OtherOptions" value="Numbering">
Numbering
<input name="OtherOptions" type="checkbox" id="OtherOptions" value="Fold">
Fold
<input name="OtherOptions" type="checkbox" id="OtherOptions" value="Padding">
Padding</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td colspan="2"> </td>
<td> </td>
</tr>
<tr>
<td height="149"> </td>
<td> </td>
<td align="right"> </td>
<td> </td>
</tr>
<tr>
<td height="24"> </td>
<td width="326"><input type="button" name="Button" class='blue' value="Previous" onClick="javascript:showStep2()"></td>
<td width="206" align="right"><input type="button" class='blue' name="Button" value="Next" onClick="javascript:showStep4()"></td>
<td> </td>
</tr>
<tr>
<td height="21"> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
<div ID="Section4" style="display:none">
<table width="600" height="467" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#eeeeee">
<tr bgcolor="#CCCCCC">
<td height="23" colspan="4" align="center"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="25%" height="23"> </td>
<td align="center"><strong>Special Instructions</strong></td>
<td width="25%" align="right"><strong> Step 4 of 5 </strong></td>
</tr>
</table></td>
</tr>
<tr>
<td width="35" height="19"> </td>
<td colspan="2" align="center"><font color="#3366ff">*</font><font size="2"> indicates a
required field</font></td>
<td width="34"> </td>
</tr>
<tr>
<td height="19"> </td>
<td width="156"> </td>
<td width="375" align="right"> </td>
<td> </td>
</tr>
<tr>
<td height="186"> </td>
<td valign="top">Special Instructions</td>
<td align="left" valign="top"><textarea name="SpecialInstructions" cols="40" rows="8" id="textarea2"></textarea></td>
<td> </td>
</tr>
<tr>
<td height="177"> </td>
<td> </td>
<td align="right"> </td>
<td> </td>
</tr>
<tr>
<td height="24"> </td>
<td><input type="button" name="Button" value="Previous" class='blue' onClick="javascript:showStep3()"></td>
<td align="right"><input type="button" name="Button" value="Next" class='blue' onClick="javascript:showStep5()"></td>
<td> </td>
</tr>
<tr>
<td height="19"> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
<div ID="Section5" style="display:none">
<table width="600" height="467" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#eeeeee">
<tr bgcolor="#CCCCCC">
<td colspan="4" align="center"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="25%"> </td>
<td align="center"><strong>Shipping / Contact Information</strong></td>
<td width="25%" align="right"><strong> Step 5 of 5 </strong></td>
</tr>
</table></td>
</tr>
<tr>
<td width="36"> </td>
<td width="149"> </td>
<td width="382"> </td>
<td width="33"> </td>
</tr>
<tr>
<td height="27"> </td>
<td valign="top">Packaging:</td>
<td><select name="Packaging" id="Packaging">
<option selected>select
<option value="Bulk">Bulk
<option value="Shrinkwrap">Shrinkwrap
<option value="Band">Band
</select>
Number Per Package
<input name="NumberPerPackage" type="text" id="NumberPerPackage" size="8">
</td>
<td> </td>
</tr>
<tr>
<td height="25"> </td>
<td valign="top">Shipping Method:</td>
<td><input type="radio" name="ShippingMethod" value="UPS">
UPS
<input type="radio" name="ShippingMethod" value="USPS">
USPS <input type="radio" name="ShippingMethod" value="FedEx">
Fed Ex
<input type="radio" name="ShippingMethod" value="CustomerPickup">
Customer Pickup<br>
</td>
<td> </td>
</tr>
<tr>
<td height="27"> </td>
<td valign="top">Account #:</td>
<td><input name="AccountNumber" type="text" id="AccountNumber"></td>
<td> </td>
</tr>
<tr>
<td height="26"> </td>
<td>Req. Delivery Date:</td>
<td><input name="RequestedDeliveryDate" type="text" id="RequestedDeliveryDate">
(mm/dd/yyyy)</td>
<td> </td>
</tr>
<tr>
<td height="26"> </td>
<td>Contact Name:<font color="#3366FF">*</font></td>
<td><input name="ContactName" type="text" id="ContactName"></td>
<td> </td>
</tr>
<tr>
<td height="31"> </td>
<td>Company Name:</td>
<td><input name="CompanyName" type="text" id="CompanyName">
</td>
<td> </td>
</tr>
<tr>
<td height="26"> </td>
<td>Deliver To:</td>
<td><input name="DeliverTo" type="text" id="DeliverTo">
(department or individual)</td>
<td> </td>
</tr>
<tr>
<td height="30"> </td>
<td>Delivery Address:</td>
<td><input name="Address" type="text" id="Address"></td>
<td> </td>
</tr>
<tr>
<td height="27"> </td>
<td>City, State, Zip:</td>
<td><input name="City" type="text" id="City" size="20" value="">
<select name="State" id="State">
<option value="">select</option>
<option value="AL">AL</option>
<option value="AK">AK</option>
<option value="AZ">AZ</option>
<option value="AR">AR</option>
<option value="CA">CA</option>
<option value="CO">CO</option>
<option value="CT">CT</option>
<option value="DE">DE</option>
<option value="DC">DC</option>
<option value="FL">FL</option>
<option value="GA">GA</option>
<option value="HI">HI</option>
<option value="ID">ID</option>
<option value="IL">IL</option>
<option value="IN">IN</option>
<option value="IA">IA</option>
<option value="KS">KS</option>
<option value="KY">KY</option>
<option value="LA">LA</option>
<option value="ME">ME</option>
<option value="MD">MD</option>
<option value="MA">MA</option>
<option value="MI">MI</option>
<option value="MN">MN</option>
<option value="MS">MS</option>
<option value="MO">MO</option>
<option value="MT">MT</option>
<option value="NE">NE</option>
<option value="NV">NV</option>
<option value="NH">NH</option>
<option value="NJ">NJ</option>
<option value="NM">NM</option>
<option value="NY">NY</option>
<option value="NC">NC</option>
<option value="ND">ND</option>
<option value="OH">OH</option>
<option value="OK">OK</option>
<option value="OR">OR</option>
<option value="PA">PA</option>
<option value="RI">RI</option>
<option value="SC">SC</option>
<option value="SD">SD</option>
<option value="TN">TN</option>
<option value="TX">TX</option>
<option value="UT">UT</option>
<option value="VT">VT</option>
<option value="VA">VA</option>
<option value="WA">WA</option>
<option value="WV">WV</option>
<option value="WI">WI</option>
<option value="WY">WY</option>
</select>
<input name="Zip" type="text" id="Zip" size="10"></td>
<td> </td>
</tr>
<tr>
<td height="23"> </td>
<td>Phone:<font color="#3366ff">*</font></td>
<td><input name="Phone" type="text" id="Phone"></td>
<td> </td>
</tr>
<tr>
<td height="24"> </td>
<td>Fax:<font color="#3366ff">*</font></td>
<td align="left"><input name="Fax" type="text" id="Fax"></td>
<td> </td>
</tr>
<tr>
<td height="22"> </td>
<td>Email:<font color="#3366ff">*</font></td>
<td align="left"><input name="Email" type="text" id="Email" style="background-color:#ffffff" onFocus="this.style.backgroundColor='#ffffff'" size="35"></td>
<td> </td>
</tr>
<tr>
<td height="21"> </td>
<td colspan="2">Note: standard quote deviation is 5% over and 5% under for
any job</td>
<td> </td>
</tr>
<tr>
<td height="39"> </td>
<td> </td>
<td align="right"> </td>
<td> </td>
</tr>
<tr>
<td height="24"> </td>
<td><input type="button" name="Button" value="Previous" class='blue' onClick="javascript:showStep4()"></td>
<td align="right"><input type="submit" name="Submit" class='blue' value="Submit Form" ></td>
<td> </td>
</tr>
<tr>
<td height="19"> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div></form>
</td></tr></table>
</body>
</html>
<end node> 5P9i0s8y19Z
dt=
<node>radio button
2
<input type='radio' name='radio1' value='choice1'>
ARRAY RADIO BUTTON CHECK
function getRadioValue(idOrName) {
var value = null;
var element = document.getElementById(idOrName);
var radioGroupName = null;
// if null, then the id must be the radio group name
if (element == null) {
radioGroupName = idOrName;
} else {
radioGroupName = element.name;
}
if (radioGroupName == null) {
return -1;
}
var radios = document.getElementsByTagName('input');
for (var i=0; i<radios.length; i++) {
var input = radios[ i ];
if (input.type == 'radio' && input.name == radioGroupName && input.checked) {
value = input.value;
break;
}
}
if(value==null)value=-1;
return value;
}
if(getRadioValue("ses0")==-1){
error_message = error_message + '*Session 1 Option has not been checked.\n';
error = 1;
}
if(getRadioValue("ses1")==-1){
error_message = error_message + '*Session 2 Option has not been checked.\n';
error = 1;
}
<tr><td class=tableSubHead colspan=2>Thursday – Session 1: 3:00-4:00 PM <br><input type=radio name=session[1] id=ses0 value='T4' />T4<span style='margin-left:10px;'></span>
<input type=radio name=session[1] id=ses0 value='T5' />T5<span style='margin-left:10px;'></span>
<input type=radio name=session[1] id=ses0 value='T6' />T6<span style='margin-left:10px;'></span>
<input type=radio name=session[1] id=ses0 value='T7' />T7<span style='margin-left:10px;'></span>
<input type=radio name=session[1] id=ses0 value='T8' />T8<span style='margin-left:10px;'></span>
<input type=radio name=session[1] id=ses0 value='T9' />T9<span style='margin-left:10px;'></span>
<input type=radio name=session[1] id=ses0 value='T10' />T10<span style='margin-left:10px;'></span>
<input type=radio name=session[1] id=ses0 value='None Requested' />None Requested<span style='margin-left:10px;'></span>
<td width=4%> </td>
</tr><tr><td class=tableSubHead colspan=2>Friday – Session 2: 7:30-8:30 AM <br><input type=radio name=session[2] id=ses1 value='F11' />F11<span style='margin-left:10px;'></span>
<input type=radio name=session[2] id=ses1 value='F12' />F12<span style='margin-left:10px;'></span>
<input type=radio name=session[2] id=ses1 value='F13' />F13<span style='margin-left:10px;'></span>
<input type=radio name=session[2] id=ses1 value='F14' />F14<span style='margin-left:10px;'></span>
<input type=radio name=session[2] id=ses1 value='F15' />F15<span style='margin-left:10px;'></span>
<input type=radio name=session[2] id=ses1 value='None Requested' />None Requested<span style='margin-left:10px;'></span>
=====================================================================================================================
What size pizza?<P>
<INPUT TYPE=RADIO NAME="pizzasize" VALUE="S" >small<BR>
<INPUT TYPE=RADIO NAME="pizzasize" VALUE="M" CHECKED >medium<BR>
<INPUT TYPE=RADIO NAME="pizzasize" VALUE="L" >large<P>
<INPUT TYPE=SUBMIT VALUE="submit">
</FORM>
******************** with check *****************
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive 5">
<title>Contact us</title>
<script Language="JavaScript">
function SubmitForm(){
if (validRadio()==false) return false;
if (validText()==false) return false;
return true;
}
function validText(){
var box=document.ContactUs.Comment.value;
if(box=='') {
alert('Please Enter in a comment.');
return false;
}
return true;
}
function validRadio(){
var result = true;
var radioSelected=false;
var num=document.ContactUs.default1.length;
alert(num);
for (var i=0; i<num; i++){
if (document.ContactUs.default1[i].checked==1) {
radioSelected = true;
}
}
if (radioSelected==false){
alert('Please select an option .');
//formField.focus();
result = false;
}
return result;
}
</script>
</head>
<body bgcolor="#ffffff">
<form name="ContactUs" ENCTYPE="text/plain" method="post" action="mailto:davchurcon@comcast.net?subject='Submit Construction'" onSubmit="return SubmitForm()">
Area the Comment is on:
<p><input type="radio" value="register" name="default1">Registering<br>
<input type="radio" value="PlacingARental" name="default1">Placing A Rental<br>
<input type="radio" value="UpdatingAnExistingRental" name="default1">Updating an Existing Rental<br>
<input type="radio" value="ResizingPhotos" name="default1">Resizing photos<br>
<input type="radio" value="UploadingNewPictures" name="default1">Uploading New Pictures/Captions<br>
<input type="radio" value="UpdatingPhotos" name="default1">Updating Photos/Captions<br>
<input type="radio" value="Other" name="default1">Other</p>
<p>Description:</p>
<p> <textarea name="Comment" cols="80" rows="10"></textarea></p>
<p><input type="submit" name="submit1" value=" S E N D N O W "></p>
</form>
<p></p>
</body>
</html>
<end node> 5P9i0s8y19Z
dt=
<node>submit buttons
2
<form action="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi">
<label for="yourin">Your input: <input type="text" name="yourinput" id="yourin">
</label>
<input type="image" src="submit.gif"
name="Send" value="Send" alt="Send"
onmouseover="this.src='go.gif'"
onmouseout="this.src='submit.gif'">
</form>
**************************************************
<script type="text/javascript" language="JavaScript">
<!–
//——————————–/
// CODE BY JOE CRAWFORD
// http://artlung.com/
//
// This code is a means of using
// image as a replacement
// for a submit button, which
// allows for validation to
// take place
//———————————/
function validate_and_submit_Form() {
if (document.forms[0].bar.value != 'cat')
{ alert ('You didn\'t change dog to cat!'); }
else
{ document.forms[0].submit() }
}
//–>
</script>
<form method="GET" action="../">
<p>
This form will only submit if you change <strong>dog</strong> to
<strong>cat</strong>
</p>
<input type="text" value="dog" name="bar">
<br>
<a href="javascript:validate_and_submit_Form();"><img
src="/images/go.gif" alt="Go" width="100" height="49" border="0"></a>
</form>
<end node> 5P9i0s8y19Z
dt=
<node>sample
3
<SCRIPT TYPE="text/javascript">
<!–
// copyright 1999-2001 Idocs, Inc. http://www.idocs.com/tags/
// Distribute this script freely, but keep this
// notice with the code.
var resetRolls = new Object();
function resetimage(src)
{
this.src=src;
this.confirm=true;
this.alt="Reset";
this.write=resetimage_write;
}
function resetimage_write()
{
document.write('<A ');
if (this.rollover)
{
if (! this.name)
{
alert('to create a rollover you must give the image a name');
return;
}
resetRolls[this.name] = new Object();
resetRolls[this.name].over = new Image();
resetRolls[this.name].over.src=this.rollover;
resetRolls[this.name].out = new Image();
resetRolls[this.name].out.src=this.src;
document.write(
' onMouseOver="if (document.images)document.images[\'' +
this.name + '\'].src=resetRolls[\'' + this.name + '\'].over.src"' +
' onMouseOut="if (document.images)document.images[\'' +
this.name + '\'].src=resetRolls[\'' + this.name + '\'].out.src"'
);
}
document.write(' HREF="javascript:');
if (this.confirm)
document.write('if(confirm(\'Are you sure you want to reset?\'))');
document.write(
'document.forms[' +
(document.forms.length – 1) + '].reset();void(0);">');
document.write('<IMG SRC="' + this.src + '" ALT="' + this.alt + '"');
document.write(' BORDER=0');
if (this.name)document.write(' NAME="' + this.name + '"');
if (this.height)document.write(' HEIGHT=' + this.height);
if (this.width)document.write(' WIDTH=' + this.width);
if (this.otheratts)document.write(' '+ this.otheratts);
document.write('></A>');
}
//–>
</SCRIPT>
************************************
<FORM ACTION="../cgi-bin/mycgi.pl">
<INPUT NAME="query">
<INPUT TYPE=IMAGE SRC="go2.gif" HEIGHT=22 WIDTH=50 ALT="go!" BORDER=0>
<SCRIPT TYPE="text/javascript">
<!–
var ri = new resetimage("reset.gif");
ri.write();
//–>
</SCRIPT>
<NOSCRIPT><INPUT TYPE=RESET></NOSCRIPT>
</FORM>
<FORM ACTION="../cgi-bin/mycgi.pl">
email: <INPUT NAME="email">
<SCRIPT TYPE="text/javascript">
<!–
var sr = new submitroll("submit.out.gif","submit.over.gif","mysubmit");
sr.write();
//–>
</SCRIPT>
<NOSCRIPT>
<INPUT TYPE=SUBMIT VALUE="Go!">
</NOSCRIPT>
</FORM>
————————
<SCRIPT TYPE="text/javascript">
<!–
// copyright 1999-2001 Idocs, Inc. http://www.idocs.com/tags/
// Distribute this script freely, but keep this
// notice with the code.
var submitRolls = new Object();
function submitroll(src, oversrc, name)
{
this.src=src;
this.oversrc=oversrc;
this.name=name;
this.alt="Submit Query";
this.write=submitroll_write;
}
function submitroll_write()
{
var thisform = 'document.forms[' + (document.forms.length – 1) + ']';
submitRolls[this.name] = new Object();
submitRolls[this.name].over = new Image();
submitRolls[this.name].over.src = this.oversrc;
submitRolls[this.name].out = new Image();
submitRolls[this.name].out.src = this.src;
document.write
(
'<A onMouseOver="if (document.images)document.images[\'' + this.name + "'].src=submitRolls['" + this.name + '\'].over.src"' +
' onMouseOut="if (document.images)document.images[\'' + this.name + "'].src=submitRolls['" + this.name + '\'].out.src"' +
' HREF="javascript:'
);
if (this.sendfield)
{
if (! this.sendvalue)
this.sendvalue = 1;
document.write(thisform, ".elements['", this.sendfield, "'].value='", this.sendvalue, "';");
}
document.write(thisform + '.submit();void(0);"');
if (this.msg)document.write(' onClick="return confirm(\'' , this.msg, '\')"');
document.write('>');
document.write('<IMG SRC="' + this.src + '" ALT="' + this.alt + '" BORDER=0 NAME="' + this.name + '"');
if (this.height)document.write(' HEIGHT=' + this.height);
if (this.width)document.write(' WIDTH=' + this.width);
if (this.otheratts)document.write(' ' + this.otheratts);
document.write('></A>');
if (this.sendfield)
{
document.write('<INPUT TYPE=HIDDEN NAME="' + this.sendfield + '">');
document.forms[document.forms.length – 1].elements[this.sendfield].value='';
}
}
//–>
</SCRIPT>
<end node> 5P9i0s8y19Z
dt=
<node>text
2
html5: <input type="password" name="password" placeholder="password" required>
<input type='text' name='city' value='$city' size=25 maxlength=25><BR>
[place text right]
style="text-align: right"
[using arrays]
document.getElementById('text_focus').focus()"
javascript "text box array" read value
function showcalendar(quantityid){
show_calendar('document.getElementById(22)', '')
alert(document.getElementById(22).value);
alert(document.frmInput.shit.value);
alert(document.frmInput.getElementsByName(DEL)[22]);
alert(document.frmInput.getElementById(22).value);
document.frmInput.DEL[quantityid].value=document.frmInput.daterequested.value;
}
UPDATE orderquantity SET prodquantity=32767,unitprice=0.09,pronumber='777-990',deliverydate=,urlid='0' WHERE quantityid=5
<end node> 5P9i0s8y19Z
dt=
<node>textarea
2
<textarea name='longadd' cols=70 rows=20>None</textarea>
<end node> 5P9i0s8y19Z
dt=
<node>FORMATING
1
[SUPPERSCRIPTING]
<SUP><SMALL>TM</SMALL></SUP>
<end node> 5P9i0s8y19Z
dt=
<node><LI> Replacement
2
Replacing Your Standard Bullets With Graphic Bullets
You can use graphic bullets to replace the standard text bullets by using the "Definition List" tag. <DL>
List Item one
List Item two
List Item three
List Item four
<DL>
<DD><IMG SRC="yourimage.gif">List Item one</DD>
<DD><IMG SRC="yourimage.gif">List Item two</DD>
<DD><IMG SRC="yourimage.gif">List Item three</DD>
<DD><IMG SRC="yourimage.gif">List Item four</DD>
</DL>
<end node> 5P9i0s8y19Z
dt=
<node>Colors
2
Literal Color RGB Literal Color RGB
"black" "#000000"
"silver" "#C0C0C0"
"grey" "#808080"
"white" "#FFFFFF"
"maroon" "#8E236B"
"red" "#FF0000"
"purple" "#800080"
"fuchsia" "#FF00FF"
"lime" "#32CD32"
"green" "#00FF00"
"olive" "#808000"
"yellow" "#FFFF00"
"navy" "#000080"
"blue" "#0000FF"
"teal" "#008080"
"cyan" "#00FFFF"
black, silver, grey, white, maroon, red, purple, fuchsia, lime, green, olive, yellow, navy, blue, teal, cyan
****
<div style='border:solid windowtext .5pt;padding:1.0pt 4.0pt 1.0pt 4.0pt;
background:#EFEFFF;mso-shading:windowtext;mso-pattern:gray-20 blue'>
<end node> 5P9i0s8y19Z
dt=
<node>frames
1
Frames
Frames are a way to subdivide the screen into distinct, addressable sections. The frame setup information is contained in a special page of the form:
<html>
<head>
<title>title of entire framed document</title>
</head>
<frameset rows|cols="pixels|#%|*,pixels|#%|*,…" frameborder="yes|no" framespacing="pixels" border="pixels" bordercolor="RGB|literal">
<frame src="url" name="frame_name" frameborder="pixels" framecolor="RGB|literal" marginheight="pixels" marginwidth="pixels" scrolling"yes|no" noresize>
…
…
<noframes>
Message for browsers without frames capabilities.
</noframes>
</frameset>
</html>
The FRAMESET tag replaces the body tag.
ROWS or COLS determines whether the screen is divided into either rows or columns. The parameter for the ROWS and COLS attribute may be either a set number of pixels (for frames containing set data that must be displayed at all times), or a percent of the screen (with the % sign), or an asterisk (*) which indicates that the frame will use the remainder of the window. Each FRAMESET is limited to either rows or columns. To create a screen with both rows and columns, nest FRAMESETs.
FRAMEBORDER determines if the overall FRAMESET has borders.
FRAMESPACING sets the distance between frames.
BORDER sets the width of the FRAMESET border.
BORDERCOLOR sets the color.
There must be a <FRAME> or <FRAMESET> tag for each of the numbers in the ROWS or COLS attribute. The <FRAME> tag sets various attributes for the frame, loads contents and names the frame for later reference by TARGET attributes.
SRC is the URL for the page that will be initially loaded into the frame.
NAME sets a name which can be used by the TARGET attribute of hyperlinks.
FRAMEBORDER sets the width of the border of the individual frame.
FRAMECOLOR sets the color of the border of the individual frame.
MARGINHEIGHT sets the distance between the top and bottom border of the frame and the information inside.
MARGINWIDTH sets the distance between the left and right side borders of the frame and the information inside.
SCROLLING determines if scroll bars will be allowed. Setting SCROLLING to no may cause information in the frame to be inaccessible.
NORESIZE prevents the user from changing the size of the frame.
The <NOFRAMES> tags enclose text that will be shown to users of browsers without frames capabilities. Although this is rare with current browsers, a message should be included. A non-frames alternative page should also be considered.
There are several design considerations when creating a framed page. Some people still use browsers which do not support frames and these users will not be able to view your site, or you will have to maintain parallel sites for framed and non-framed pages. The frames themselves take up valuable screen real estate limiting the amount of information that can be presented at any time. Persons using large fonts on their browsers or small screen sizes may be forced to constantly scroll vertically and horizontally to access the content, and, if you disable scrolling, may not be able to access some content. Screens with large number of frames look messy and are hard to navigate. Finally, if a link set its TARGET attribute to _top, the new page will break out of your frameset. Unless frames provide added functionality, they should be avoided. This page is set up with frames so that the Table of Contents would always be visible. The code for the htmltutr.htm page is:
<html>
<head>
<title>An HTML Tutorial</title>
</head>
<frameset ROWS="150,*">
<frameset COLS="45%,*">
<frame frameborder="1" src="htmltutrtitle.htm" title="tutorial title" name="title" noresize scrolling="no">
<frame frameborder="0" src="htmltutrtoc.htm" title="table of contents" name="toc" noresize>
</frameset>
<frame SRC="htmltutrmain.htm" title="Tutorial" NAME="main">
<noframes>
<P>
Your browser is unable to read this frames-formatted site.
If you wish to access all of the capabilities of this site,
you will need to upgrade your browser.
If you need assistance completing this upgrade,
you may need to contact your network consultant,
or your Internet Service Provider's Technical Support Desk.
To view the main Tutorial document click <a href="htmltutrmain.htm">here</a>.
</noframes>
</frameset>
</html>
<end node> 5P9i0s8y19Z
dt=
<node>Icon Address bar
1
How to display your web site logo on the address bar and in the favorites list
See Also
Why use the same old icons when you can use thumbnails?
Place your own bitmap on Internet Explorer's toolbar
Forget the association
Windows programs heaven
Adjust the size and spacing of your icons
How to change folder icons
Want to make your web site standout in crowded favorites lists in browsers and address bars? How about displaying your logo next to links to your site.
First, you have to create a logo for your site; a very tiny logo to be specific. The size of the logo should be 16×16 pixels and it should be saved as a Windows icon file (logo.ico for example). If your image editor doesn't support saving files in Windows icon format, you can use the following online tool or download an icon editor from a shareware site.
Source Image :
Preview:
Once you have an icon file with your logo, you're ready to take the final step. Following methods will work in Explorer 5.x and higher without having any negative effects on other browsers.
Method 1
This is the easiest method to implement and it will work regardless of the particular page on your site users choose to add to their favorites list. Don't worry if you don't have access to your web site root; take a look at the next method.
If you have access to the root of your web site, simply save your icon file as "favicon.ico" there. For example, if your web site is "www.chami.com", your icon file should be available at "www.chami.com/favicon.ico". The web browser will look for favicon.ico whenever your site is added to the favorites list and if it is found at the root of your web site, the icon will appear next to the link to your site.
Method 2
If you don't have access to the root of your web site, you have to add the following tag to your web page so that the browser will know where to look for your icon. Unlike before, this time you can save the icon under any name ending with ".ico" We'll use the name "logo.ico" and assume that your web site is under the directory "~your_directory".
<LINK REL="SHORTCUT ICON"
HREF="/~your_directory/logo.ico">
Listing #1 : HTML code. Download logo.htm (0.2 KB).
NOTE: Above tag should be inserted in-between the <HEAD> and </HEAD> tags.
By the way, you can specify multiple logos for multiple pages using the second method. Simply save your icons using unique names, such as logo1.ico, logo2.ico, logo3.ico for example, and replace "logo.ico" in the above HTML code with the name of the icon you want to use for any particular page.
<end node> 5P9i0s8y19Z
dt=
<node>iframe
1
ul>
<li><a href="http://softwarewebdesign.com" target="iframed">software</a></li>
<li><a href="http://wolterfamily.org" target="iframed">Wolter</a></li>
<li><a href="http://sellhay.com" target="iframed">hay</a></li>
</ul>
<iframe style="Position:relative;left:25px;height: 800px; width: 800px; border: 1px solid black;" src="LoginScreen.php" name="iframed" id="iframed" allowtransparency="true" frameborder="0"></iframe>
And these are the properties allowed in the starting iframe tag. You may notice that most of these are extremely similar to normal FRAME coding.
src Specified the URL of the document to be displayed in the frame.
src="FileName.html"
name Specifies the name of the frame for the purpose of linking and targeting.
name="MyIframe"
width
height Specifies the width/height of the iframe space in pixels or percentages.
width="200" height="100"
align Aligns the iframe to the left, center, or right side of the page.
align="center"
noresize Kills the visitors ability to resize the iframe borders manually.
noresize="noresize"
scrolling Indicates the ability of a scrollbar to appear (or not) with a value of yes, no, or auto.
scrolling="auto"
frameborder Carries a value of 0 or 1 depending if you want a border to appear around the iframe or not.
frameborder="1"
marginwidth
marginheight Specifies the width/height of the margin in pixels.
marginwidth="1" marginheight="1"
vspace
hspace Specifies the verticle/horizontal margin space in pixels.
vspace="1" hspace="1"
You don't have to use ALL of these properties. Most of the time, you will use the first four : SRC, NAME, WIDTH, and HEIGHT.
The space between the opening and closing iframe tags is used just like the NOFRAMES tag in frames and the default text in the TEXTAREA tag. The text you enter within this area will be shown on the webpage IF the visitor's browser does not support the IFRAME tag.
The next part is linking. Iframes behave the exact same way as regular frames when it comes to linking. The Iframe has a NAME property assigned to it, the link tags get a TARGET property in them.
<end node> 5P9i0s8y19Z
dt=
<node>img
1
http://www.inquiry.com/techtips/web_pro/answer.asp?pro=web_pro&docID=556
===
Q & A – IMG: How do I use images on my Web site?
Applies to These Versions Categories
Version Numbers Not Applicable Basics
Graphics
Tags
——————————————————————————–
How do I use images on my Web site?
THE BASICS
The <IMG SRC> tag is an HTML tag that calls images in an HTML document.
The anatomy of an <IMG SRC> tag is:
<IMG SRC="image location">
and example:
<IMG SRC="picopaz.GIF">
MORE BASICS
There are many attributes to this tag; some of them and their uses are listed below, along with an example. These attributes are to be inserted in the <IMG SRC> tag as follows:
<IMG SRC="location" ATTRIBUTE="definition" >
See the examples below to get more of a feel of how to use these attributes within the <IMG SRC> tag.
ALT
Alternate is a place to type text so that a person viewing your page without a graphical browser will see your description of the picture.
Example: <IMG SRC="picopaz.GIF" ALT="picture of paz">
BORDER
Border can be defined in the form of a number to denote how thick you would like it to be in pixels. If you do not want a border at all you can define BORDER=0.
HEIGHT
Height, the image's height in pixels. See WIDTH, below, for more information.
WIDTH
Width, the image's width in pixels. There are a couple of ways to use this attribute, along with its cohort HEIGHT. The most commonly used way is to define the image's dimensions in pixels so that Netscape will leave a space for the image and and give the user accessing the page something to read while the image is loading. Another way to use these attributes is to distort a GIF by either making it proportionally larger, smaller or disproportionally representing it — see the example below.
ALIGN
Align can be defined as: LEFT, RIGHT or CENTER. This attribute allows you to define where the image will allign itself on your page horizontally.
VALIGN
Vertical Alignment can be defined as TOP, BOTTOM or CENTER. This attribute allows you to define where the image will allign itself on your page vertically.
HSPACE
Horizontal Spacing will allow you to determine how much horizontal space you want on both the left and right of your image in pixels.
VSPACE
Horizontal Spacing will allow you to determine how much horizontal space you want on both the top and bottom of your image in pixels.
LOWSRC
Low Resolution Source, can define the location of another image that is at its lowest resolution. The low-resolution image will load first, and the high-quality image will load on top of that.
Example: <IMG SRC="picopaz.GIF" LOWSRC="lowres.GIF">
This attribute is only necessary if you have large graphics that would, on their own, take quite a bit of time to load.
EXAMPLES
<IMG SRC="picopaz.GIF" BORDER=5 > <IMG SRC="picopaz.GIF" BORDER=0 HEIGHT=60 WIDTH=90 > <IMG SRC="picopaz.GIF" ALIGN=RIGHT VALIGN=BOTTOM> text<IMG SRC="picopaz.GIF" HSPACE=20>text
BEYOND THE BASICS
Usage of the <BR CLEAR=ALL> tag
<IMG SRC="picopaz.GIF" ALIGN=RIGHT>
Here is your text; notice the image location and what the insertion of a <BR CLEAR=ALL> tag can do to the location of your text.
<IMG SRC="picopaz.GIF" ALIGN=RIGHT><BR CLEAR=ALL>
Here is your text; notice the image location and what the insertion of a <BR CLEAR=ALL> tag can do to the location of your text.
When you begin adding attributes to <IMG SRC>, the element begins to behave differently in relation to other elements on your page. The key is to use the difference to your advantage instead of letting it wreak havoc on your site; to save you hours, days and weeks of frustration. The examples to the right introduce you to the <BR CLEAR=ALL> tag and how it affects the text around your image.
Another nifty thing you could do is turn your image into a link. So when a user clicks on the image it can take them to a different page, location or site. The anatomy of a link containg an image is:
<A HREF="location"><IMG SRC="picture.gif"></A>
Example: <A HREF="http://www.best.com/~paz"><IMG SRC="picopaz.GIF"></A>.
Written by inquiry.com Staff on 3/11/97.
<end node> 5P9i0s8y19Z
dt=
<node>map
1
Specifies the coordinates that define the corners of the shape. The coordinates depend on the shape specified in the shape attribute:
Shape Coordinates
rect coords="x1,y1,x2,y2"
(The top left and bottom right corners of the rectangle)
circle coords="x,y,r"
(The centre and radius of the circle)
poly coords="x1,y1,x2,y2,x3,y3,…"
(The corners of the polygon)
START WITH TOP LEFT HAND CORNER OF IMAGE.
example using rectangle 126w x 29 h
cords=top, left, width, height
<img src='images/MorePhotosButton.gif' usemap='#ImageMap1' width="106" height="29">
<map name="ImageMap1">
<area shape="rect" coords="0,0,60,29" href="gallery.html">
<area shape="rect" coords="61,0,85,29" href="gallery2.html">
<area shape="rect" coords="86,0,106,29" href="gallery.html">
</map>
=========================
<img src="images/08_01_01.jpg" width="684" height="441" border="0" align="top" usemap="#ImageMap1"></a></p>
..
<map name="ImageMap1">
<area shape="rect" coords="11, 85, 101, 110" href="01_0_Directory.htm">
<area shape="rect" coords="10, 118, 102, 146" href="02_01_EntryScn.htm">
<area shape="rect" coords="9, 152, 101, 178" href="03_01_ComIndv.htm">
<area shape="rect" coords="8, 185, 101, 214" href="04_1_Reservations.htm">
<area shape="rect" coords="9, 254, 103, 281" href="06_0_Roster.htm">
<area shape="rect" coords="501, 172, 6028, 192" href="08_01_03.htm">
<area shape="rect" coords="373, 173, 495, 189" href="08_01_02.htm">
<area shape="rect" coords="438, 49, 591, 70" href="#Nextpage1">
<area shape="rect" coords="124, 76, 184, 99" href="#Nextpage1">
<area shape="rect" coords="193, 76, 292, 100" href="#Nextpage1">
<area shape="rect" coords="295, 77, 406, 99" href="#Nextpage1">
<area shape="rect" coords="194, 105, 217, 134" href="#Nextpage1">
<area shape="rect" coords="598, 52, 659, 69" href="#Nextpage1">
<area shape="rect" coords="125, 147, 188, 177" href="08_01_01.htm">
</map></body>
The different regions of the image are described using a MAP element. The map describes each region in the image and indicates where it links. The basic format for the MAP element is as follows:
<MAP NAME=" name ">
<AREA [SHAPE=" shape "] COORDS="x,y,…" [HREF=" reference "] [NOHREF]>
</MAP>
The name specifies the name of the map so that it can be referenced by an IMG element. The shape gives the shape of this area. Currently supported shapes include rectangles (RECT), polygons (POLY), circles (CIRCLE), and default (DEFAULT), but the syntax is defined in a way that allows other shapes to be added. If the SHAPE tag is omitted, SHAPE="RECT" is assumed. The COORDS tag gives the coordinates of the shape, using image pixels as the units. For a rectangle, the coordinates are given as "left,top,right,bottom". The rectangular region defined includes the lower right corner specified (i.e. to specify the entire area of a 100-by-100-pixel image, the coordinates would be "0,0,99,99"). Circles are defined as a center point and then a radius (a total of three numbers).
The NOHREF tag indicates that clicks in this region should perform no action. An HREF tag specifies where a click in that area should lead. Note that a relative anchor specification will be expanded using the URL of the map description as a base, rather than using the URL of the document from which the map description is referenced. If a BASE tag is present in the document containing the map description, that URL will be used as the base.
An arbitrary number of AREA tags may be specified. If two areas intersect, the one that appears first in the map definition takes precedence in the overlapping region. For example, a button bar in a document might use a 160-by-60-pixel image and appear like this:
<MAP NAME="buttonbar">
<AREA SHAPE="RECT" COORDS="10,10,49,49" HREF="about_us.html">
<AREA SHAPE="RECT" COORDS="60,10,99,49" HREF="products.html">
<AREA SHAPE="RECT" COORDS="110,10,149,49" HREF="index.html">
<AREA SHAPE="RECT" COORDS="0,0,159,59" NOHREF>
</MAP>
<IMG SRC="../images/tech/bar.gif" USEMAP="#buttonbar">
<end node> 5P9i0s8y19Z
dt=
<node>META Tag Basics
1
http://www.inquiry.com/techtips/web_pro/answer.asp?pro=web_pro&docID=2642
===
Q & A – META Tag Basics
Applies to These Versions Categories
Version Numbers Not Applicable Tags
——————————————————————————–
What HTML tag can I use to control how long a page will be displayed before taking the viewer to another page?
The following META tag can be added to your HTML pages and will take the user to any URL you choose after a specified number of seconds.
<META HTTP-EQUIV="REFRESH" CONTENT="5; URL=http://www.dbbasics.com">
The "Content" item specifies the number of seconds to wait. The "URL" item determines which URL the user will be taken to.
Written by Charles C. Caison, Jr. on 2/9/99.
<end node> 5P9i0s8y19Z
dt=
<node>Meta tag caching
2
Q & A – Meta tag caching
Applies to These Versions Categories
Version Numbers Not Applicable Tags
——————————————————————————–
How can I stop a dynamic document from caching?
I have seen two meta http-equivs used. Which of the following is better? What are the differences?
<META HTTP-EQUIV="Expires" CONTENT="Tue, 04 Dec 1993 21:29:02 GMT">
and this:
<Meta http-equiv="Pragma" Content="no-cache">
Your browser caches files, sounds and images by placing a copy of them in a folder or directory on your local drive. Caching exists so that when a user hits the back button or visits the same site on several occasions, the browser can display the page without having to make repeated calls to the server to display the same file or image.
Sometimes people don't want their page cached because it may be updated frequently (if cached, the user would continue to see the old version) or because the page contains sensitive information.
Since different browsers support different HTTP protocols, you'd have to use all three META tags below to stop a page from caching. Even then, if the user has an older browser, you have no way of ensuring that the file is not being cached.
<META HTTP-EQUIV="Cache-Control" CONTENT="no cache">
<META HTTP-EQUIV="Pragma" CONTENT="no cache">
<META HTTP-EQUIV="Expires" CONTENT="0">
In a test I conducted, Netscape was able to cache files with each method.
For more information visit:
http://vancouver-webpages.com/META/
http://www.ics.uci.edu/pub/ietf/http/
Written by inquiry.com Staff on 6/4/97.
<end node> 5P9i0s8y19Z
dt=
<node>META: What is it used for?
2
Q & A – META: What is it used for?
Applies to These Versions Categories
Version Numbers Not Applicable Tags
——————————————————————————–
What is the <META> tag used for?
The <META> tag lives in the HEAD of a document and is really used to send a message to a server. It tells the server to do certain things. For example:
Motion (Client Pull)
The meta tag can be used to pull, or call, another page from the server. For example, if you used this line of text in the head of your document called mydoc.html. In about 15 seconds, the viewer of mydoc.html will be taken to the specified URL (in this case Netscape).
<META HTTP-EQUIV="Refresh" CONTENT="15; URL=http://www.netscape.com">
Where CONTENT tells the browser how long to wait before pulling the next file specified in URL. Take a look at a poem called "Stood Up" I wrote using the META tag for dramatization.
Document Information (useful to search engines)
Many search engines look for the meta tag to see certain keywords for example:
<META NAME="description" CONTENT="inquiry.com is a free service for software developers, providing information on software products, development techniques, and emerging technologies.">
<META NAME="keywords" CONTENT="software development, programming, vb, visual basic, java, c, c++, sql">
The meta tag can be used to provide information about a document. It's especially useful if several people edit the same website:
<META NAME="Author" CONTENT="Web Pro">
<META NAME="Version" CONTENT="3">
<META NAME="Posted" CONTENT="July 31, 1996">
Where NAME can contain any name relative to the values in CONTENT. View the source of our home page and see how we used the META tag.
Sound
The META tag can also be used to include sounds on a web page.
<META HTTP-EQUIV=REFRESH CONTENT="15; URL=http://www.projectcool.com/sounds/demo.au">
Where CONTENT tells the server how many seconds to wait before sending the sound file the browser (don't make it one second, otherwise the sound will play before your page has completely loaded); URL contains the full-path (yes, it should also include http://.. even if it's in the same directory). If you are interested in finding out about where to get sounds or other ways to add sounds to your page, use the search engine to find my tip on adding sound.
Note that you should pay strict attention to where the quotes and spaces in the above examples as an extra or missing quote and the file will not be loaded.
Written by inquiry.com Staff on 3/11/97.
<end node> 5P9i0s8y19Z
dt=
<node>Refreshing Using the META Tag
2
Q & A – Refreshing Using the META Tag
Applies to These Versions Categories
Version Numbers Not Applicable Tags
——————————————————————————–
What HTML tag do I use to have the screen refresh every two minutes?
The following META tag will work. The value of the CONTENT parameter will determine the number of seconds to wait before refreshing. Put this tag in the <HEAD> section.
<META HTTP-EQUIV="REFRESH" CONTENT="120">
Written by Charles C. Caison, Jr. on 2/9/99.
<end node> 5P9i0s8y19Z
dt=
<node>ROBOTS
2
Robots.txt and meta tags
——————————————————————————–
Introduction
The robots.txt file
The meta element
The robots meta tag
The decription and keywords tags
Further information
For relevant URIs see http://web-support.csx.cam.ac.uk/websupport/Servers.html#robots. For help contact web-support@ucs.cam.ac.uk.
——————————————————————————–
Introduction
The Computing Service has purchased Ultraseek, a commercial search engine from Infoseek, to set up a searchable site-wide index of web servers. The aim is to avoid people needing to know which of the 200+ server Department and College servers include the information they want. Additionally, it is possible for servers around the University to use the search engine to provide them with a "search this server" facility, looking only at information on the particular server. We will index all "official" web servers in the cam.ac.uk domain, unless there are good reasons why we should not. For full details about how Ultraseek works and what it will index, see http://software.infoseek.com/products/ultraseek/ultrafeatures.htm.
The information below is an adaptation of the standard W3C recipe for creating a robots.txt file (see http://info.webcrawler.com/mak/projects/robots/norobots.html for formal definition). It is desirable to exclude search engines from indexing cgi scripts and server logs (as it will pick up links to files long since moved or gone). It is recommended to exclude search engines from indexing files that are being worked on, hold sensitive information with restricted access or (possibly) personal information.
If you do not exclude the directories, restricted access information will be indexed by Ultraseek because it is a local computer so it has access to the files. The links in the search results that are for restricted access cannot be followed by computers outside the cambridge domain, but the first block of text will be produced as part of the search results. If the information is particularly sensitive you may wish to insert a META tag for the description to override this (see below). Once the search engine is working and available, check that your robots.txt is working as expected, e.g. by a search quoting "+site:www.whatever.cam.ac.uk" (i.e. limit search to your site) and a term that should match some of the hidden pages (with a + prefix to make a match mandatory, e.g. "+site:www.cam.ac.uk +usage" to see if the main server usage stats are correctly excluded).
It might also be useful to have a spring clean and remove redundant information before indexing! A robots.txt file will apply to all robots, so it would be most instructive to set User-agent: *. If however you wish to apply different restrictions just to the site wide search engine, the User agent name is Ultraseek (webmaster@ucs.cam.ac.uk)
The robots.txt file
When a robot visits a Web site, say http://www.example.com/, it firsts checks for http://www.example.com/robots.txt. All major search engines will observe robots.txt. If it can find this document, it will analyse its contents to see if it is allowed to retrieve the document. You can create a customised robots.txt file to apply to all or only specific robots, and to disallow access to specific directories or files. The robots.txt file is simply a text file and must be at the root level in your server.
If you want to give any robot access to a restricted set of files:
User-agent: *
Disallow: /Architext/
Disallow: /bin/
Disallow: /cgi/
Disallow: /Excite/
Disallow: /includes/
Disallow: /tmp/
Disallow: /~
Disallow: /stats/
Here is a sample robots.txt file that prevents any robot from visiting the entire site except for the CS Ultraseek robot
User-agent: Ultraseek (webmaster@ucs.cam.ac.uk) # CS search robot
Disallow: /Architext/
Disallow: /bin/
Disallow: /cgi/
Disallow: /Excite/
Disallow: /includes/
Disallow: /tmp/
Disallow: /~
Disallow: /stats/
# tell all others to go away
User-agent: *
Disallow: /
The Robot will simply look for a "/robots.txt" URI at the top level on your site, where a site is defined as an http server running on a particular host and port number. Look at the robots.txt file at these locations for approaches to limiting access:
Site URI URI for robots.txt
http://www.w3.org/ http://www.w3.org/robots.txt
http://w3.org/ http://w3.org/robots.txt
http://www.cam.ac.uk/ http://www.cam.ac.uk/robots.txt
The single "/robots.txt" at the top level on a site is the only one that is used by robots. A robot will never look at "robots.txt" files in directories. If you want your users to be able to create their own "robots.txt", you will need to merge them all into a single "/robots.txt". If you don't want to do this, your users might want to use the robots meta tag instead (see below).
Some tips: URI's are case-sensitive, and "/robots.txt" string must be all lower-case. Blank lines are not permitted.
There must be exactly one "User-agent" field per record. The robot should be liberal in interpreting this field. A case-insensitive substring match of the name without version information is recommended.
If the value is "*", the record describes the default access policy for any robot that has not matched any of the other records. It is not allowed to have multiple such records in the "/robots.txt" file.
The "Disallow" field specifies a partial URI that is not to be visited. This can be a full path, or a partial path; any URI that starts with this value will not be retrieved. For example,
Disallow: /help disallows both /contact.html and /help/index.html, whereas
Disallow: /help/ disallows /help/index.html but allows /contact.html.
An empty value for "Disallow" indicates that all URIs can be retrieved. At least one "Disallow" field must be present in the robots.txt file.
The meta element
Note: Not all web search engines use description and keyword meta tags, notably Excite, Northern Light, Google and Lycos do not. Meta tags will boost the rankings in Infoseek and Inktomi-mediated searches (Inktomi is used by Snap, HotBot and Yahoo). All major search engines will observe the robots meta tag.
The robots meta tag
The robots meta tag allows HTML authors to tell visiting robots whether a single document may be indexed or used to harvest more links. No server administrator action is required. The meta elements work in tandem with a robots.txt file, though, with the robots.txt as the first line of exclusion. Only if a robot is allowed to look at files can the robots meta element be observed.
The content of the robots meta tag contains directives separated by commas. The currently defined directives are: [NO]INDEX and [NO]FOLLOW (the [] means optional). The INDEX directive specifies if an indexing robot should index the page. The FOLLOW directive specifies if a robot is to follow links on the page. The defaults are INDEX and FOLLOW. The values ALL and NONE set all directives on or off: ALL=INDEX,FOLLOW and NONE=NOINDEX,NOFOLLOW.
Some examples:
<meta name="robots" content="index,follow">
<meta name="robots" content="noindex,follow">
<meta name="robots" content="index,nofollow">
<meta name="robots" content="noindex,nofollow">
Note the "robots" name of the tag and the content are case insensitive.
You obviously should not specify conflicting or repeating directives such as:
<meta name="robots" content="INDEX,NOINDEX,NOFOLLOW,FOLLOW,FOLLOW">
The description and keywords meta tags
In the absence of other information, robots will index all the text in a document (but not HTML tags) including ALT tags but excepting comments, and will use the first few words as a summary to describe your page in the search results. If your page is of suitable construction for this system to give a clear idea of the contents, then nothing else is necessary, although you may wish to add some keywords, especially if your page is in a specialist area. If the page does not contain any descriptive text, such as a frameset or a page with description in an imagemap, then add a META tag containing a description to ensure the search engine indexes it and presents suitable text when it is shown as a result.
You can use the HTML description META tag to specify the summary text that will appear in a search results list. The keyword META tag allows you to add further keywords (up to 1000 characters) for indexing that are not in the description or in the page text itself (if they are, they will be indexed already). The robots META tag allows you to control if and how Ultraseek indexes your page. The META tags must be placed within the HEAD portion of your web page. Do not use any HTML tags within the META tag itself.
Suppose your page contains:
<meta name="description" content="Xsoft specializes in software products that help organizations improve how they create and use documents.">
<meta name="keywords" content="document management Xerox">
Ultraseek will do two things with these tags:
1.It will index both fields as words, so a search on either XSoft or "document management" will match.
2.It will show the "description" with the search results. Instead of showing the first few of lines of the page as the summary, it would be listed as follows:
XSoft Home Page
XSoft specializes in software products that help organizations improve how they create and use documents. http://www.xsoft.com/
Note that the description and keywords META tags should not contain any HTML formatting information.
Further information
Search Engine Watch, information for webmasters
*********************
No Index
< META name="Robots" content="noindex,nofollow" >
. . . Robots (spiders) are automated scripts and programs that visit websites and attempt to index (spider) all links and content that they find on your webpages. They follow all the links on your site until there's no more, indexing everything it finds. To stop this from happening robots (spiders) must be guided or instructed in which pages to index and search. This tag will allow you to control which pages the robot can spider, and which it will ignore. There may be certain webpages or directories (Example: CGI or JAVA Scripts) you may have that you do not want indexed in the search engines. Using the robots tag, you can define which pages to follow, which to index and which to ignore completely. The "content" can be any one of or combination of the four commands
noindex, NOINDEX prevents anything on the page from being indexed
index,
nofollow, NOFOLLOW prevents the crawler from following the links on the page and indexing the linked pages
or follow
Server Side Robots (robots.txt) Usage
User-agent: AGENT
Disallow: /PATH/. . .
The robots.txt file is a plain text file placed into your web (site) root directory such that any user or client can access it by going to www.yoursite.com/robots.txt or www.paidserver.com/yoursite/robots.txt. If you are not allowed or unable to create a file to this location, you'll need to implement the META Robots Tag instead.
AGENT represents the name of a search engine Agent or use an asterisk (*) to represent all agents. PATH represents a relative path you do not want to be accessed.
<end node> 5P9i0s8y19Z
dt=
<node>ScreenEffects
2
<meta http-equiv="window-target" content="_top">
Page Enter-Blend (2 sec.) <meta http-equiv="Page-Enter" content="blendTrans(Duration=2.0)">
Page Exit-Box In (2 sec.) <meta http-equiv="Page-Exit" content="revealTrans(Duration=2.0,Transition=0)">
Site Enter-Box Out (2 sec.) <meta http-equiv="Site-Enter" content="revealTrans(Duration=2.0,Transition=1)">
Site Exit-Circle In (2 sec.) <meta http-equiv="Site-Exit" content="revealTrans(Duration=2.0,Transition=2)">
Circle Out <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=3)">
Wipe Up <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=4)">
Wipe Down <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=5)">
Wipe Right <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=6)">
Wipe Left <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=7)">
Vertical Blinds <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=8)">
Horizontal Blinds <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=9)">
Checkerboard Across <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=10)">
Checkerboard Down <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=11)">
Random Dissolve <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=12)">
Split Vertical In <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=13)">
Split Vertical Out <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=14)">
Split Horizontal In <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=15)">
Split Horizontal Out <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=16)">
Strips Right Down <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=17)">
Strips Right Up <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=18)">
Strips Left Down <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=19)">
Strips Left Up <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=20)">
Random Bars Horizontal <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=21)">
Random Bars Vertical <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=22)">
Random <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=23)">
<end node> 5P9i0s8y19Z
dt=
<node>Printing
1
CSS and Printing
By Joe Burns
Use these to jump around or read it all…
[Page Break]
[The Format]
[Setting A Specific Page Break]
I get a lot of questions asking if there are ways to "force" people's browsers to do certain things. The events most often asked for are to force a browser to bookmark the page, to set user preferences, and this one: How can I force a person's browser to print my page?
The short and truthful answer is that you can't. There's no command or tag, to my knowledge, that produces a print when your page loads. There are just too many factors involved. Is the user's printer turned on? Can the Web page fit nicely in the print space set by the viewer? And most importantly: Does the viewer want to print your page? It would cheese me if I logged into your page and all of a sudden my printer was humming.
Update! As of 10/99 there is still no way to force a printer to print a page; however, you can initiate a print request. See the tutorial.
You can take some control when the user decides he or she does want to print your page. Through the magic of Style Sheets, you can now make a point of indicating where the pages will break during the print process.
As of 12/21/98, this CSS2 command is supported only by Internet Explorer browsers version 4 and above.
——————————————————————————–
Page Break
There are two commands you're worried about here:
page-break-after
page-break-before
You can pretty much pick out what each does. The first sets the printing page break just before the element, the second sets the page break just after.
Each command has, in theory anyway, four attributes:
always | auto | left | right
always tells the browser to break the print page after this element always.
auto is the default. You're telling the browser to do what it would do anyway: Page break where the page ends.
left is not supported by any browser yet. It is used if your printer will print both sides of a page, like a manuscript. If the page is a left-facing page, use this attribute.
right is what you use if it's a right-facing page.
——————————————————————————–
The Format
Here's what it looks like in your page's <HEAD> tags:
<STYLE TYPE="text/css">
H2 {page-break-before: always}
</STYLE>
That format will produce a print page break before each H2 on the page. Would you like to try it out? This page has four H2 headings. Go ahead and print the page. Each H2 will use a new page and will act as the Header for the printed page. Remember, though, that you have to be using Internet Explorer 4 or better.
——————————————————————————–
Setting A Specific Page Break
Maybe it's better not to have every H2 break the page. Maybe you'd like a page break at a specific point to keep a particular look. You do that by setting up a class of page breaks.
You can set up the class on any HTML command, but I think the best method is to set up the class within a <BR> or <P> command. That way there's some white space where the page can break. Here's a look at the format (this will sit between your <HEAD> tags):
<STYLE TYPE="text/css">
P.breakhere {page-break-before: always}
</STYLE>
This then will be the activator for the page break:
<P CLASS="breakhere">
You can set up as many different classes as you'd like as long as you keep following the same format as above.
——————————————————————————–
And That's That…
This is another one of those commands that I would use if there's a need for it, regardless of the type of browser the viewer is running. Those that understand the command get the effect, and those that don't just get a straight page print. Either way, the user gets a nice print of the page. It's just that in one of the prints, you're able to set a few parameters.
Enjoy!
<end node> 5P9i0s8y19Z
dt=
<node>SetTimeout
1
<HTML>
<HEAD>
<TITLE>COMPUTER USERS GROUP OF GREELEY</TITLE>
</HEAD>
<BODY TEXT="#000000" VLINK="#FF0000" LINK="#0000FF">
<BODY BACKGROUND=brick.gif>
<body onload=setTimeout("location.href='http://www.cugg.org'",4000)>
<B><CENTER><IMG SRC="blueline.gif"><BR><H1>COMPUTER USERS GROUP OF GREELEY</H1><H3>Greeley, Colorado</H3><IMG SRC=blueline.gif></CENTER>
<BR><BR><BR>
<IMG SRC="ball1.gif">
<A HREF=http://www.cugg.org>We have moved to a new Location. </A><IMG SRC=update.gif> Please Set your bookmark. The new page will load in 4 seconds.<BR>
</BODY>
</HTML>
<end node> 5P9i0s8y19Z
dt=
<node>special Characters
1
Character Numeric Symbolic Character Numeric Symbolic
< < < > > >
& & & " " "
non-breaking space ¢ ¢ ¢
£ £ £ ¥ ¥ ¥
® ® ® © © ©
™ ™ ™(NS6,IE5,OP5) ° ° °
¼ ¼ ¼ ½ ½ ½
¾ ¾ ¾ ± ± ±
÷ ÷ ÷ × × ×
ñ ñ ñ Ñ Ñ Ñ
¡ ¡ ¡ ¿ ¿ ¿
<p>< how dow you do ></p>
Description Char Code Entity
_____________________________________________
Quotation " " "
Ampersand & & &
Less-than sign < < <
Greater-than sign > > >
at symbol @ @
Euro € €
Dagger † †
0/00 ‰ ‰
Trademark ™ ™
Angle quote mark, left « « «
Angle quote mark, right » » »
Inverted exclamation ¡ ¡ ¡
Inverted question mark ¿ ¿ ¿
Cent sign ¢ ¢ ¢
Pound sign £ £ £
Currency sign ¤ ¤ ¤
Yen sign ¥ ¥ ¥
Broken vertical bar ¦ ¦ ¦
Section sign § § §
Copyright sign © © ©
Circled R registered sign ® ® ®
Middle dot · · ·
Fraction 1/4 ¼ ¼ ¼
Fraction 1/2 ½ ½ ½
Fraction 3/4 ¾ ¾ ¾
Superscript 1 ¹ ¹ ¹
Superscript 2 ² ² ²
Superscript 3 ³ ³ ³
Degree sign ° ° °
Multiplication sign × × ×
Division sign ÷ ÷ ÷
Plus-or-minus sign ± ± ±
Quotation " " "
Ampersand & & &
Less-than sign < < <
Greater-than sign > > >
Non-breaking space
Inverted exclamation ¡ ¡ ¡
Cent sign ¢ ¢ ¢
Pound sign £ £ £
Currency sign ¤ ¤ ¤
Yen sign ¥ ¥ ¥
Broken vertical bar ¦ ¦ ¦
Section sign § § §
Spacing diaresis ¨ ¨ ¨
Copyright sign © © ©
Feminine ordinal indicator ª ª ª
Angle quotation mark, left « « «
Negation sign ¬ ¬ ¬
Soft hyphen
Circled R registered sign ® ® ®
Spacing macron ¯ ¯ &hibar;
Degree sign ° ° °
Plus-or-minus sign ± ± ±
Superscript 1 ¹ ¹ ¹
Superscript 2 ² ² ²
Superscript 3 ³ ³ ³
Spacing acute ´ ´ ´
Micro sign µ µ µ
Paragraph sign ¶ ¶ ¶
Middle dot · · ·
Spacing cedilla ¸ ¸ ¸
Masculine ordinal indicator º º º
Angle quotation mark, right » » »
Fraction 1/4 ¼ ¼ ¼
Fraction 1/2 ½ ½ ½
Fraction 3/4 ¾ ¾ ¾
Inverted question mark ¿ ¿ ¿
Capital A, grave accent À À À
Capital A, acute accent Á Á Á
Capital A, circumflex accent   Â
Capital A, tilde à à Ã
Capital A, dieresis (umlaut) Ä Ä Ä
Capital A, ring Å Å Å
Capital AE diphthong (ligature) Æ Æ Æ
Capital C, cedilla Ç Ç Ç
Capital E, grave accent È È È
Capital E, acute accent É É É
Capital E, circumflex accent Ê Ê Ê
Capital E, dieresis (umlaut) Ë Ë Ë
Capital I, grave accent Ì Ì Ì
Capital I, acute accent Í Í Í
Capital I, circumflex accent Î Î Î
Capital I, dieresis (umlaut) Ï Ï Ï
Capital Eth, Icelandic Ð Ð Ð
Capital N, tilde Ñ Ñ Ñ
Capital O, grave accent Ò Ò Ò
Capital O, acute accent Ó Ó Ó
Capital O, circumflex accent Ô Ô Ô
Capital O, tilde Õ Õ Õ
Capital O, dieresis (umlaut) Ö Ö Ö
Multiplication sign × × ×
Capital O, slash Ø Ø Ø
Capital U, grave accent Ù Ù Ù
Capital U, acute accent Ú Ú Ú
Capital U, circumflex accent Û Û Û
Capital U, dieresis (umlaut) Ü Ü Ü
Capital Y, acute accent Ý Ý Ý
Capital THORN, Icelandic Þ Þ Þ
Small sharp German sz ligature ß ß ß
Small a, grave accent à à à
Small a, acute accent á á á
Small a, circumflex accent â â â
Small a, tilde ã ã ã
Small a, dieresis (umlaut) ä ä ä
Small a, ring å å å
Small ae diphthong (ligature) æ æ æ
Small c, cedilla ç ç ç
Small e, grave accent è è è
Small e, acute accent é é é
Small e, circumflex accent ê ê ê
Small e, dieresis (umlaut) ë ë ë
Small i, grave accent ì ì ì
Small i, acute accent í í í
Small i, circumflex accent î î î
Small i, dieresis (umlaut) ï ï ï
Small eth, Icelandic ð ð ð
Small n, tilde ñ ñ ñ
Small o, grave accent ò ò ò
Small o, acute accent ó ó ó
Small o, circumflex accent ô ô ô
Small o, tilde õ õ õ
Small o, dieresis (umlaut) ö ö ö
Division sign ÷ ÷ ÷
Small o, slash ø ø ø
Small u, grave accent ù ù ù
Small u, acute accent ú ú ú
Small u, circumflex accent û û û
Small u, dieresis (umlaut) ü ü ü
Small y, acute accent ý ý ý
Small thorn, Icelandic þ þ þ
Small y, dieresis (umlaut) ÿ ÿ ÿ
***************************************
horizontal tab ‘ ‘ left curly quote mark
line feed ’ ’ right curly quote mark/apostrophe
carriage return “ “ left curly quote marks
space ” ” right curly quote marks
! ! exclamation point • • bullet
" " " straight quote marks – – “en” (short) dash
# # hash mark/number sign – — “em” (long) dash
$ $ dollar sign ˜ ˜ tilde
% % percent sign ™ ™ trademark
& & & ampersand š š
' ' straight quote mark/apostrophe › ›
( ( left parenthesis œ œ small oe ligature
) ) right parenthesis Ÿ Ÿ capital Y, umlaut
* * asterisk non-breaking space
+ + plus sign ¡ ¡ ¡ inverted exclamation point
, , comma ¢ ¢ ¢ cent sign
– - hyphen £ £ £ pound sterling sign
. . period/dot ¤ ¤ ¤ general currency sign
/ / slash ¥ ¥ ¥ yen sign
0 0 zero ¦ ¦ ¦ broken vertical bar
&brkbar;
1 1 one § § § section sign
2 2 two ¨ ¨ ¨ umlaut/dieresis
¨
3 3 three © © © copyright symbol
4 4 four ª ª ª feminine ordinal
5 5 five « « « left angle quote marks
6 6 six ¬ ¬ ¬ not sign
7 7 seven soft hyphen
8 8 eight ® ® ® registered symbol
9 9 nine ¯ ¯ ¯ macron accent
&hibar;
: : colon ° ° ° degree sign
; ; semi-colon ± ± ± plus or minus
< < < less than sign ² ² ² superscript 2
= = equals sign ³ ³ ³ superscript 3
> > > greater than sign ´ ´ ´ acute accent
? ? question mark µ µ µ micro sign (Greek mu)
@ @ commercial “at” sign ¶ ¶ ¶ paragraph sign
A A capital A · · · middle dot
B B capital B ¸ ¸ ¸ cedilla
C C capital C ¹ ¹ ¹ superscript 1
D D capital D º º º masculine ordinal
E E capital E » » » right angle quote marks
F F capital F ¼ ¼ ¼ fraction one-fourth
G G capital G ½ ½ ½ fraction one-half
H H capital H ¾ ¾ ¾ fraction three-fourths
I I capital I ¿ ¿ ¿ inverted question mark
J J capital J À À À capital A, grave accent
K K capital K Á Á Á capital A, acute accent
L L capital L Â Â Â capital A, circumflex accent
M M capital M Ã Ã Ã capital A, tilde
N N capital N Ä Ä Ä capital A, umlaut/dieresis
O O capital O Å Å Å capital A, ring
P P capital P Æ Æ &Aelig; capital AE ligature, dipthong
Q Q capital Q Ç Ç Ç capital C, cedilla
R R capital R È È È capital E, grave accent
S S capital S É É É capital E, acute accent
T T capital T Ê Ê &Ecicr; capital E, circumflex accent
U U capital U Ë Ë Ë capital E, umlaut/dieresis
V V capital V Ì Ì Ì capital I, grave accent
W W capital W Í Í Í capital I, acute accent
X X capital X Î Î Î capital I, circumflex accent
Y Y capital Y Ï Ï Ï capital I, umlaut/dieresis mark
Z Z capital Z Ð Ð Ð capital Eth, Icelandic
Đ
[ [ left square bracket Ñ Ñ Ñ capital N, tilde
\ \ backslash Ò Ò Ò capital O, grave accent/null set
] ] right square bracket Ó Ó Ó capital O, acute accent
^ ^ caret Ô Ô Ô capital O, circumflex accent
_ _ underscore bar Õ Õ Õ capital O, tilde
` ` grave accent Ö Ö Ö capital O, umlaut/dieresis mark
a a small a × × × multiplication sign
b b small b Ø Ø Ø capital O, slash
c c small c Ù Ù Ù capital U, grave accent
d d small d Ú Ú Ú capital U, acute accent
e e small e Û Û Û capital U, circumflex accent
f f small f Ü Ü Ü capital U, umlaut/dieresis mark
g g small g Ý Ý Ý capital Y, acute accent
h h small h Þ Þ Þ capital Thorn, Icelandic
i i small i ß ß ß small sz ligature, German
j j small j à à à small a, grave accent
k k small k á á á small a, acute accent
l l small l â â â small a, circumflex accent
m m small m ã ã ã small a, tilde
n n small n ä ä ä small a, umlaut/dieresis mark
o o small o å å å small a, ring
p p small p æ æ æ small ae ligature, dipthong
q q small q ç ç ç small c, cedilla
r r small r è è è small e, grave accent
s s small s é é é small e, acute accent
t t small t ê ê ê small e, circumflex accent
u u small u ë ë ë small e, umlaut/dieresis mark
v v small v ì ì ì small i, grave accent
w w small w í í í small i, acute accent
x x small x î î î small i, circumflex accent
y y small y ï ï ï small i, umlaut/dieresis mark
z z small z ð ð ð small eth, Icelandic
{ { left curly brace ñ ñ ñ small n, tilde
| | solid vertical bar ò ò ò small o, grave accent
} } right curly brace ó ó ó small o, acute accent
~ ~ tilde ô ô ô small o, circumflex accent
box õ õ õ small o, tilde
‚ ‚ comma ö ö ö small o, umlaut/dieresis mark
ƒ ƒ florin ÷ ÷ ÷ division sign
„ „ ø ø ø small o, slash/null set
… … ellipsis ù ù ù small u, grave accent
† † dagger ú ú ú small u, acute accent
‡ ‡ double dagger û û û small u, circumflex accent
ˆ ˆ circumflex accent ü ü ü small u, umlaut,dieresis mark
‰ ‰ permil ý ý ý small y, acute accent
Š Š þ þ þ small thorn, Icelandic
‹ ‹ ÿ ÿ ÿ small y, umlaut/dieresis mark
ΠΠcapital OE ligature
<end node> 5P9i0s8y19Z
dt=
<node>both
2
$newstring=substr($teaser,25,1);$acii=ord($newstring);
echo "<p>$newstring=======$ascii";
The 160 is a space problem for browsers
Code Entity Hex Character Description
—— ————– — ——— ———————————–
� %00 Unused
%01 Unused
%02 Unused
%03 Unused
%04 Unused
%05 Unused
%06 Unused
%07 Unused
%08 Unused
%09 Horizontal tab
%0A Line feed
%0B Unused
%0C Unused
%0D Carriage return
%0E Unused
%0F Unused
%10 Unused
%11 Unused
%12 Unused
%13 Unused
%14 Unused
%15 Unused
%16 Unused
%17 Unused
%18 Unused
%19 Unused
%1A Unused
%1B Unused
%1C Unused
%1D Unused
%1E Unused
%1F Unused
%20 Space
! %21 ! Exclamation mark
" " %22 " Quotation mark
# %23 # Number sign
$ %24 $ Dollar sign
% %25 % Percent sign
& & %26 & Ampersand
' %27 ' Apostrophe
( %28 ( Left parenthesis
) %29 ) Right parenthesis
* %2A * Asterisk
+ %2B + Plus sign
, %2C , Comma
- %2D – Hyphen
. %2E . Period (fullstop)
/ %2F / Solidus (slash)
0 %30 0 0
1 %31 1 1
2 %32 2 2
3 %33 3 3
4 %34 4 4
5 %35 5 5
6 %36 6 6
7 %37 7 7
8 %38 8 8
9 %39 9 9
: %3A : Colon
; %3B ; Semi-colon
< < %3C < Less than
= %3D = Equals sign
> > %3E > Greater than
? %3F ? Question mark
@ %40 @ Commercial at
A %41 A A
B %42 B B
C %43 C C
D %44 D D
E %45 E E
F %46 F F
G %47 G G
H %48 H H
I %49 I I
J %4A J J
K %4B K K
L %4C L L
M %4D M M
N %4E N N
O %4F O O
P %50 P P
Q %51 Q Q
R %52 R R
S %53 S S
T %54 T T
U %55 U U
V %56 V V
W %57 W W
X %58 X X
Y %59 Y Y
Z %5A Z Z
[ %5B [ Left square bracket
\ %5C \ Reverse solidus (backslash)
] %5D ] Right square bracket
^ %5E ^ Caret
_ %5F _ Horizontal bar (underscore)
` %60 ` Acute accent
a %61 a a
b %62 b b
c %63 c c
d %64 d d
e %65 e e
f %66 f f
g %67 g g
h %68 h h
i %69 i i
j %6A j j
k %6B k k
l %6C l l
m %6D m m
n %6E n n
o %6F o o
p %70 p p
q %71 q q
r %72 r r
s %73 s s
t %74 t t
u %75 u u
v %76 v v
w %77 w w
x %78 x x
y %79 y y
z %7A z z
{ %7B { Left curly brace
| %7C | Vertical bar
} %7D } Right curly brace
~ %7E ~ Tilde
%7F Unused
€ %80 Unused
%81 Unused
‚ %82 Unused
ƒ %83 Unused
„ %84 Unused
… %85 Unused
† %86 Unused
‡ %87 Unused
ˆ %88 Unused
‰ %89 Unused
Š %8A Unused
‹ %8B Unused
Π%8C Unused
%8D Unused
Ž %8E Unused
%8F Unused
%90 Unused
‘ %91 Unused
’ %92 Unused
“ %93 Unused
” %94 Unused
• %95 Unused
– %96 Unused
— %97 Unused
˜ %98 Unused
™ %99 TM TM TM TM TM
š %9A Unused
› %9B Unused
œ %9C Unused
%9D Unused
ž %9E Unused
Ÿ %9F Unused
[3.2] %A0 Non-breaking space
¡ ¡ [3.2] %A1 ¡ Inverted exclamation
¢ ¢ [3.2] %A2 ¢ Cent sign
£ £ [3.2] %A3 £ Pound sterling
¤ ¤ [3.2] %A4 ¤ General currency sign
¥ ¥ [3.2] %A5 ¥ Yen sign
¦ ¦ [3.2] %A6 ¦ Broken vertical bar
§ § [3.2] %A7 § Section sign
¨ ¨ [3.2] %A8 ¨ Umlaut (dieresis)
© © [3.2] %A9 © Copyright
ª ª [3.2] %AA ª Feminine ordinal
« « [3.2] %AB « Left angle quote, guillemotleft
¬ ¬ [3.2] %AC ¬ Not sign
[3.2] %AD Soft hyphen
® ® [3.2] %AE ® Registered trademark
¯ ¯ [3.2] %AF ¯ Macron accent
° ° [3.2] %B0 ° Degree sign
± ± [3.2] %B1 ± Plus or minus
² ² [3.2] %B2 ² Superscript two
³ ³ [3.2] %B3 ³ Superscript three
´ ´ [3.2] %B4 ´ Acute accent
µ µ [3.2] %B5 µ Micro sign
¶ ¶ [3.2] %B6 ¶ Paragraph sign
· · [3.2] %B7 · Middle dot
¸ ¸ [3.2] %B8 ¸ Cedilla
¹ ¹ [3.2] %B9 ¹ Superscript one
º º [3.2] %BA º Masculine ordinal
» » [3.2] %BB » Right angle quote, guillemotright
¼ ¼ [3.2] %BC ¼ Fraction one-fourth
½ ½ [3.2] %BD ½ Fraction one-half
¾ ¾ [3.2] %BE ¾ Fraction three-fourths
¿ ¿ [3.2] %BF ¿ Inverted question mark
À À %C0 À Capital A, grave accent
Á Á %C1 Á Capital A, acute accent
  %C2  Capital A, circumflex accent
à à %C3 à Capital A, tilde
Ä Ä %C4 Ä Capital A, dieresis or umlaut mark
Å Å %C5 Å Capital A, ring
Æ Æ %C6 Æ Capital AE dipthong (ligature)
Ç Ç %C7 Ç Capital C, cedilla
È È %C8 È Capital E, grave accent
É É %C9 É Capital E, acute accent
Ê Ê %CA Ê Capital E, circumflex accent
Ë Ë %CB Ë Capital E, dieresis or umlaut mark
Ì Ì %CC Ì Capital I, grave accent
Í Í %CD Í Capital I, acute accent
Î Î %CE Î Capital I, circumflex accent
Ï Ï %CF Ï Capital I, dieresis or umlaut mark
Ð Ð %D0 Ð Capital Eth, Icelandic
Ñ Ñ %D1 Ñ Capital N, tilde
Ò Ò %D2 Ò Capital O, grave accent
Ó Ó %D3 Ó Capital O, acute accent
Ô Ô %D4 Ô Capital O, circumflex accent
Õ Õ %D5 Õ Capital O, tilde
Ö Ö %D6 Ö Capital O, dieresis or umlaut mark
× × [3.2] %D7 × Multiply sign
Ø Ø %D8 Ø Capital O, slash
Ù Ù %D9 Ù Capital U, grave accent
Ú Ú %DA Ú Capital U, acute accent
Û Û %DB Û Capital U, circumflex accent
Ü Ü %DC Ü Capital U, dieresis or umlaut mark
Ý Ý %DD Ý Capital Y, acute accent
Þ Þ %DE Þ Capital THORN, Icelandic
ß ß %DF ß Small sharp s, German (sz ligature)
à à %E0 à Small a, grave accent
á á %E1 á Small a, acute accent
â â %E2 â Small a, circumflex accent
ã ã %E3 ã Small a, tilde
ä ä %E4 ä Small a, dieresis or umlaut mark
å å %E5 å Small a, ring
æ æ %E6 æ Small ae dipthong (ligature)
ç ç %E7 ç Small c, cedilla
è è %E8 è Small e, grave accent
é é %E9 é Small e, acute accent
ê ê %EA ê Small e, circumflex accent
ë ë %EB ë Small e, dieresis or umlaut mark
ì ì %EC ì Small i, grave accent
í í %ED í Small i, acute accent
î î %EE î Small i, circumflex accent
ï ï %EF ï Small i, dieresis or umlaut mark
ð ð %F0 ð Small eth, Icelandic
ñ ñ %F1 ñ Small n, tilde
ò ò %F2 ò Small o, grave accent
ó ó %F3 ó Small o, acute accent
ô ô %F4 ô Small o, circumflex accent
õ õ %F5 õ Small o, tilde
ö ö %F6 ö Small o, dieresis or umlaut mark
÷ ÷ [3.2] %F7 ÷ Division sign
ø ø %F8 ø Small o, slash
ù ù %F9 ù Small u, grave accent
ú ú %FA ú Small u, acute accent
û û %FB û Small u, circumflex accent
ü ü %FC ü Small u, dieresis or umlaut mark
ý ý %FD ý Small y, acute accent
þ þ %FE þ Small thorn, Icelandic
ÿ ÿ %FF ÿ Small y, dieresis or umlaut mark
<end node> 5P9i0s8y19Z
dt=
<node>other
2
https://www.utexas.edu/learn/html/spchar.html
HTML Entities and/or ISO Latin-1 codes can be placed in source code like any other alphanumeric characters to produce special characters and symbols that cannot be generated in HTML with normal keyboard commands.
For example, to render Düsseldorf the HTML source should read
Düsseldorf or Düsseldorf
While many similar lists are available on the Web (run your favorite search engine using "ISO Latin" or "HTML Entities"), none I've seen account for the standard character sets of different operating systems (e.g. Windows vs. DOS vs. Macintosh, etc.); this list should produce the same results on all platforms.
Punctuation
HTML Entity
(case sensitive)
ISO Latin-1 code
name or meaning
–
– – en dash
–
— — em dash
¡
¡ ¡ inverted exclamation
¿
¿ ¿ inverted question mark
"
" " quotation mark
“
“ “ left double curly quote
”
” ” right double curly quote
'
' apostrophe (single quote)
‘
‘ ‘ left single curly quote
’
’ ’ right single curly quote
«
» «
» «
» guillemets (used as quotation marks in some languages, e.g., French)
(Its there, but you can't see it!) non-breaking space
Symbols
&
& & ampersand
¢
¢ ¢ cent
©
© © copyright
÷
÷ ÷ divide
>
> > greater than
<
< < less than
µ
µ µ micron
·
· · middle dot
¶
¶ ¶ pilcrow (paragraph sign)
±
± ± plus/minus
€
€ € Euro
£
£ £ British Pound Sterling
®
® ® registered
§
§ § section
™
™ ™ trademark
¥
¥ ¥ Japanese Yen
°
° ° Degree
Diacritics
á
Á á
Á á
Á lower-case "a" with acute accent
upper-case "A" with acute accent
à
À à
À à
À lower-case "a" with grave accent
upper-case "A" with grave accent
â
 â
 â
 lower-case "a" with circumflex
upper-case "A" with circumflex
å
Å å
Å å
Å lower-case "a" with ring
upper-case "A" with ring
ã
à ã
à ã
à lower-case "a" with tilde
upper-case "A" with tilde
ä
Ä ä
Ä ä
Ä lower-case "a" with diaeresis/umlaut
upper-case "A" with diaeresis/umlaut
æ
Æ æ
Æ æ
Æ lower-case "ae" ligature
upper-case "AE" ligature
ç
Ç ç
Ç ç
Ç lower-case "c" with cedilla
upper-case "C" with cedilla
é
É é
É é
É lower-case "e" with acute accent
upper-case "E" with acute accent
è
È è
È è
È lower-case "e" with grave accent
upper-case "E" with grave accent
ê
Ê ê
Ê ê
Ê lower-case "e" with circumflex
upper-case "E" with circumflex
ë
Ë ë
Ë ë
Ë lower-case "e" with diaeresis/umlaut
upper-case "E" with diaeresis/umlaut
í
Í í
Í í
Í lower-case "i" with acute accent
upper-case "I" with acute accent
ì
Ì ì
Ì ì
Ì lower-case "i" with grave accent
upper-case "I" with grave accent
î
Î î
Î î
Î lower-case "i" with circumflex
upper-case "I" with circumflex
ï
Ï ï
Ï ï
Ï lower-case "i" with diaeresis/umlaut
upper-case "I" with diaeresis/umlaut
ñ
Ñ ñ
Ñ ñ
Ñ lower-case "n" with tilde
upper-case "N" with tilde
ó
Ó ó
Ó ó
Ó lower-case "o" with acute accent
upper-case "O" with acute accent
ò
Ò ò
Ò ò
Ò lower-case "o" with grave accent
upper-case "O" with grave accent
ô
Ô ô
Ô ô
Ô lower-case "o" with circumflex
upper-case "O" with circumflex
ø
Ø ø
Ø ø
Ø lower-case "o" with slash
upper-case "O" with slash
õ
Õ õ
Õ õ
Õ lower-case "o" with tilde
upper-case "O" with tilde
ö
Ö ö
Ö ö
Ö lower-case "o" with diaeresis/umlaut
upper-case "O" with diaeresis/umlaut
ß
ß ß ess-tsett
ú
Ú ú
Ú ú
Ú lower-case "u" with acute accent
upper-case "U" with acute accent
ù
Ù ù
Ù ù
Ù lower-case "u" with grave accent
upper-case "U" with grave accent
û
Û û
Û û
Û lower-case "u" with circumflex
upper-case "U" with circumflex
ü
Ü ü
Ü ü
Ü lower-case "u" with diaeresis/umlaut
upper-case "U" with diaeresis/umlaut
ÿ
ÿ ÿ lower-case "y" with diaeresis/umlaut
´
` ´
` acute accent with no letter
grave accent/reversed apostrophe with no letter
Notes:
1.The " entity was mistakenly omitted from the HTML 3.2 specification. While use of " generates error reports when validating against 3.2, browsers have continued to recognize the entity and its use is generally safe (sticklers may wish to use " instead). The omission has been corrected in the HTML 4.0 specification.
2.The non-breaking space ( or ) can be used not only to prevent the separation of words by line wraps, but also to force a space equal in size to a keyboard/spacebar space (useful for indentation or wider word separation) or to "hold" space in the empty cell of a table (as in the table above).
3.The middle dot (· or ·) can be used as a bullet and embedded anywhere in text. Because it is equal in size to a period, however, it may be necessary to apply <B> </B> or tags to enhance its graphic effect (use of <FONT SIZE="x"> </FONT> or <BIG> </BIG> elements is not recommended, as these will alter the character's vertical spacing relative to other characters in the same line).
™ TM
© © ! ! _ _ Û Û
® ® " " ` ` ž ž Ü Ü
# # a a Ÿ Ÿ Ý Ý
" " $ $ b b Þ Þ
& & % % c c ¡ ¡ ß ß
< < & & d d ¢ ¢ à à
> > ' ' e e £ £ á á
À À ( ( f f ¤ ¤ â â
Á Á ) ) g g ¥ ¥ ã ã
  * * h h ¦ ¦ ä ä
à à + + i i § § å å
Ä Ä , , j j ¨ ¨ æ æ
Å Å - – k k © © ç ç
Æ Æ . . l l ª ª è è
Ç Ç / / m m « « é é
È È 0 0 n n ¬ ¬ ê ê
É É 1 1 o o ë ë
Ê Ê 2 2 p p ® ® ì ì
Ë Ë 3 3 q q ¯ ¯ í í
Ì Ì 4 4 r r ° ° î î
Í Í 5 5 s s ± ± ï ï
Î Î 6 6 t t ² ² ð ð
Ï Ï 7 7 u u ³ ³ ñ ñ
Ð Ð 8 8 v v ´ ´ ò ò
Ñ Ñ 9 9 w w µ µ ó ó
Õ Õ : : x x ¶ ¶ ô ô
Ö Ö ; ; y y · · õ õ
Ø Ø < < z z ¸ ¸ ö ö
Ù Ù = = { { ¹ ¹ ÷ ÷
Ú Ú > > | | º º ø ø
Û Û ? ? } } » » ù ù
Ü Ü @ @ ~ ~ ¼ ¼ ú ú
Ý Ý A A ? ½ ½ û û
Þ Þ B B € € ¾ ¾ ü ü
ß ß C C ¿ ¿ ý ý
à à D D ‚ ‚ À À þ þ
á á E E ƒ ƒ Á Á ÿ ÿ
å å F F „ „ Â Â
æ æ G G … … Ã Ã
ç ç H H † † Ä Ä
è è I I ‡ ‡ Å Å
é é J J ˆ ˆ Æ Æ
ê ê K K ‰ ‰ Ç Ç
ë ë L L Š Š È È
ì ì M M ‹ ‹ É É
í í N N Œ Œ Ê ?
î î O O Ë Ë
ï ï P P Ž Ž Ì Ì
ð ð Q Q Í Í
ñ ñ R R Î Î
ò ò S S ‘ ‘ Ï Ï
ó ó T T ’ ’ Ð Ð
ô ô U U “ “ Ñ Ñ
õ õ V V ” ” Ò Ò
ö ö W W • • Ó Ó
ø ø X X – – Ô Ô
ù ù Y Y — – Õ Õ
ú ú Z Z ˜ ˜ Ö Ö
û û [ [ ™ ™ × ×
ý ý \ \ š š Ø Ø
þ þ ] ] › › Ù Ù
ÿ ÿ ^ ^ œ œ Ú Ú
<end node> 5P9i0s8y19Z
dt=
<node>Tables
1
How to Build a Table in HTML
<table border=1 cellspacing=0 cellpadding=0 style='border-collapse:collapse;
border:none;mso-border-alt:solid windowtext .5pt;mso-padding-alt:0in 5.4pt 0in 5.4pt'>
Table Tags:
<table></table> for the table
<tr></tr> for table rows
<th></th> for table header cells
<td></td> for table data cells
Simple Table Code
<table>
<tr>
<td>cell one</td>
<td>cell two</td>
<td>cell three</td>
</tr>
<tr>
<td>cell four</td>
<td>cell five</td>
<td>cell six </td>
</tr>
</table>
Table Rows
These attributes affects the content of all the cells in the row. Values in the <tr> tags override those in the <table> tag. Likewise <tr> values can be overridden in the <td> tag values. You can also override these attributes in individual cells. *the baseline attribute aligns data cell contents with the baseline of the top line of text in adjoining cells.
<table><tr></tr></table>
You create table rows inside the table tags and then table cells inside the row tags:
<table><tr><td>cell content</td></tr></table>
<tr> attributes include:
align=left, right, center
valign=top, bottom, baseline
bgcolor=#rrggbb
border color=#rrggbb
bordercolorlight=#rrggbb
bordercolordark=#rrggbb
nowrap>
Table Headers and Table Data
<th> table header and <td> table data tags are placed inside the table tags and bracket your designated content. The attributes of these tags tell the browser how to arrange the content within each individual cell. These attributes can override both the <table> and <tr> attributes.
<td> attributes
<td
align=left, right, center
valign=top, bottom, baseline
background=image.gif *IE
bgcolor=#rrggbb
border color=#rrggbb
bordercolorlight=#rrggbb
bordercolordark=#rrggbb
nowrap
colspan=n
rowspan=n
width=n, n%
height=n, n%>
Alignment:
Tables are rectangular objects which are aligned on the page relative to the alignment of the current text flow. You can <center></center> a table for instance, or use <div align=right></div> .
You can align text relative to the table as you can with image/text relationships:
<table align=right> or <table align=left> ***this is different than aligning a data or header cell’s content using <td align=right>, for instance.
Table Width and Height
<table width=n height=n> sets the measurements of the table in pixels or percentages of the screen size. This may be overridden if cell content is too large.
Cell Spacing Attribute
<table cellspacing=n> designates the spacing between cells in pixel numbers
the default is 2 pixels
Cell Padding Attribute
<table cellpadding=n> designates the padding around all four sides of the contents of the cell in pixels. By default, its one pixel.
Bgcolor and Background Attributes:
<table bgcolor=#rrggbb> will set the table’s bg color different than that of the web page.
<table background=image.gif> will set the table’s bg image, although it looks slightly different in Netscape when compared to IE.
IE support for border color:
<table border color= #rrggbb bordercolorlight= #rrggbb bordercolordark= #rrggbb> to set 3d appearance of table borders.
Border Frame and Rules Attributes:
<table border=n> sets the thickness of the table and cell borders in pixels
<table frame=above, below, lhs, rhs, hsides, vsides> works only in IE, drawing designated lines on the various sides of a table–
Cols Attribute
<table cols=n> tells the browser how many columns to expect and aids in loading time of especially long tables
Hspace and Vspace attributes
<table hspace=n> designates breathing space around the table on its sides in pixel measurements
<table vspace=n> designates breathing space on the top and bottom of a table in pixel measurements
Default Vertical Alignment for Table contents
<table valign=top, bottom> in IE only will set the vertical alignment within all the table’s cells
Missing Features:
You can align a cell’s contents on an individual basis, but not between cells.
Netscape and IE give you the ability to set the thickness of table and cell borders in different ways–Netscape, the border size is global. In IE, you can vary the rule widths between header, body, and footer of a table.
Except in IE, html tables don’t have running headers or footers
************************************************************************************************
Tables take the general form:
<TABLE BORDER=3 CELLSPACING=2 CELLPADDING=2 WIDTH="80%">
<CAPTION> … table caption … </CAPTION>
<TR><TD> first cell <TD> second cell
<TR> …
…
</TABLE>
The attributes on TABLE are all optional. By default, the table is rendered without a surrounding border. The table is generally sized automatically to fit the contents, but you can also set the table width using the WIDTH attribute. BORDER, CELLSPACING and CELLPADDING provide further control over the table's appearence. Captions are rendered at the top or bottom of the table depending on the ALIGN attribute.
Each table row is contained in a TR element, although the end tag can always be omitted. Table cells are defined by TD elements for data and TH elements for headers. Like TR, these are containers and can be given without trailing end tags. TH and TD support several attributes: ALIGN and VALIGN for aligning cell content, ROWSPAN and COLSPAN for cells which span more than one row or column. A cell can contain a wide variety of other block and text level elements including form fields and other tables.
The TABLE element always requires both start and end tags. It supports the following attributes:
align
This takes one of the case insensitive values: LEFT, CENTER or RIGHT. It specifies the horizontal placement of the table relative to the current left and right margins. It defaults to left alignment, but this can be overridden by an enclosing DIV or CENTER element.
width
In the absence of this attribute the table width is automatically determined from the table contents. You can use the WIDTH attribute to set the table width to a fixed value in pixels (e.g. WIDTH=212) or as a percentage of the space between the current left and right margins (e.g. WIDTH="80%").
border
This attribute can be used to specify the width of the outer border around the table to a given number of pixels (e.g. BORDER=4). The value can be set to zero to suppress the border altogether. In the absence of this attribute the border should be suppressed. Note that some browsers also accept <TABLE BORDER> with the same semantics as BORDER=1.
cellspacing
In traditional desktop publishing software, adjacent table cells share a common border. This is not the case in HTML. Each cell is given its own border which is separated from the borders around neighboring cells. This separation can be set in pixels using the CELLSPACING attribute, (e.g. CELLSPACING=10). The same value also determines the separation between the table border and the borders of the outermost cells.
cellpadding
This sets the padding in pixels between the border around each cell and the cell's contents.
The CAPTION element has one attribute ALIGN which can be either ALIGN=TOP or ALIGN=BOTTOM. This can be used to force the caption to be placed above the top or below the bottom of the table respectively. Most user agents default to placing the caption above the table. CAPTION always requires both start and end tags. Captions are limited to plain text and text-level elements as defined by the %text entity. Block level elements are not permitted.
The TR or table row element requires a start tag, but the end tag can always be left out. TR acts as a container for table cells. It has two attributes:
align
Sets the default horizontal alignment of cell contents. It takes one of the case insensitive values: LEFT, CENTER or RIGHT and plays the same role as the ALIGN attribute on paragraph elements.
valign
This can be used to set the default vertical alignment of cell contents within each cell. It takes one of the case insensitive values: TOP, MIDDLE or BOTTOM to position the cell contents at the top, middle or bottom of the cell respectively.
There are two elements for defining table cells. TH is used for header cells and TD for data cells. This distinction allows user agents to render header and data cells in different fonts, and enables speech based browsers to do a better job. The start tags for TH and TD are always needed but the end tags can be left out. Table cells can have the following attributes:
nowrap
The presence of this attribute disables automatic word wrap within the contents of this cell (e.g. <TD NOWRAP>). This is equivalent to using the entity for non-breaking spaces within the content of the cell.
rowspan
This takes a positive integer value specifying the number of rows spanned by this cell. It defaults to one.
colspan
This takes a positive integer value specifying the number of columns spanned by this cell. It defaults to one.
align
Specifies the default horizontal alignment of cell contents, and overrides the ALIGN attribute on the table row. It takes the same values: LEFT, CENTER and RIGHT. If you don't specify an ALIGN attribute value on the cell, the default is left alignment for <td> and center alignment for <th> although you can override this with an ALIGN attribute on the TR element.
valign
Specifies the default vertical alignment of cell contents, overriding the VALIGN attribute on the table row. It takes the same values: TOP, MIDDLE and BOTTOM. If you don't specify a VALIGN attribute value on the cell, the default is middle although you can override this with a VALIGN attribute on the TR element.
width
Specifies the suggested width for a cell content in pixels excluding the cell padding. This value will normally be used except when it conflicts with the width requirements for other cells in the same column.
height
Specifies the suggested height for a cell content in pixels excluding the cell padding. This value will normally be used except when it conflicts with the height requirements for other cells in the same row.
Tables are commonly rendered in bas-relief, raised up with the outer border as a bevel, and individual cells inset into this raised surface. Borders around individual cells are only drawn if the cell has explicit content. White space doesn't count for this purpose with the exception of .
The algorithms used to automatically size tables should take into account the minimum and maximum width requirements for each cell. This is used to determine the minimum and maximum width requirements for each column and hence for the table itself.
Cells spanning more than one column contribute to the widths of each of the columns spanned. One approach is to evenly apportion the cell's minimum and maximum width between these columns, another is to weight the apportioning according to the contributions from cells that don't span multiple columns.
For some user agents it may be necessary or desirable to break text lines within words. In such cases a visual indication that this has occurred is advised.
The minimum and maximum width of nested tables contribute to the minimum and maximum width of the cell in which they occur. Once the width requirements are known for the top level table, the column widths for that table can be assigned. This allows the widths of nested tables to be assigned and hence in turn the column widths of such tables. If practical, all columns should be assigned at least their minimum widths. It is suggested that any surplus space is then shared out proportional to the difference between the minimum and maximum width requirements of each column.
Note that pixel values for width and height refer to screen pixels, and should be multiplied by an appropriate factor when rendering to very high resolution devices such as laser printers. For instance if a user agent has a display with 75 pixels per inch and is rendering to a laser printer with 600 dots per inch, then the pixel values given in HTML attributes should be multiplied by a factor of 8.
<end node> 5P9i0s8y19Z
dt=
<node>border
2
" BORDERCOLOR="#C6C6C6
style='border-color:black;border-collapse:collapse;mso-border-alt:solid windowtext .5pt;mso-padding-alt:0in 5.4pt 0in 5.4pt'>
<end node> 5P9i0s8y19Z
dt=
<node>cells
2
[background image]
<h4>Cell backgrounds:</h4>
<table border="1">
<tr>
<td bgcolor="red">First</td>
<td>Row</td>
</tr>
<tr>
<td
background="../images/bgdesert.jpg">
Second</td>
<td>Row</td>
</tr>
</table>
<end node> 5P9i0s8y19Z
dt=
<node>Video
1
[mp4]
html5
<video controls="controls" height="320">
<source src="/wp-content/uploads/2016/test.mp4" type="video/mp4" />
</video>
<video width="640" height="360" poster="__POSTER__.jpg" controls="controls">
<source src="/wp-content/uploads/2016/test.mp4" type="video/mp4" />
<source src="__VIDEO__.webm" type="video/webm" />
<source src="__VIDEO__.ogv" type="video/ogg" /><!–[if gt IE 6]>
<object width="640" height="375" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"><!
[endif]–><!–[if !IE]><!–>
<object width="640" height="375" type="video/quicktime" data="/wp-content/uploads/2016/test.mp4"><!–<![endif]–>
<param name="src" value="/wp-content/uploads/2016/test.mp4" />
<param name="autoplay" value="false" />
<param name="showlogo" value="false" />
<object width="640" height="380" type="application/x-shockwave-flash"
data="__FLASH__.swf?image=__POSTER__.jpg&file=/wp-content/uploads/2016/test.mp4">
<param name="movie" value="__FLASH__.swf?image=__POSTER__.jpg&file=__VIDEO__.mp4" />
<img src="__POSTER__.jpg" width="640" height="360" />
<p>
<strong>No video playback capabilities detected.</strong>
Why not try to download the file instead?<br />
<a href="__VIDEO__.mp4">MPEG4 / H.264 “.mp4” (Windows / Mac)</a> |
<a href="__VIDEO__.ogv">Ogg Theora & Vorbis “.ogv” (Linux)</a>
</p>
</object><!–[if gt IE 6]><!–>
</object><!–<![endif]–>
</video>
<div style="margin:0 0 25px 25px">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" width="480" height="300">
<param name="wmode" value="transparent">
<param name="flashvars" value="file=http://www.tcccorp.net/video/0724VersionQT.flv&image=images/homepagevideoshot.jpg" />
<param name="movie" value="video/mediaplayer.swf" />
<embed src="video/mediaplayer.swf" width="480" height="300" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="file=http://www.tcccorp.net/video/0724VersionQT.flv&image=images/homepagevideoshot.jpg" /></object>
</div>
<end node> 5P9i0s8y19Z
dt=
<node>Embed
2
<OBJECT ID="Player"
WIDTH="320"
HEIGHT="300"
CLASSID="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95"
CODEBASE="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,7,1112"
STANDBY="Loading Windows Media Player components…"
TYPE="application/x-oleobject"
ALIGN="bottom"
VIEWASTEXT>
<PARAM NAME="FileName" VALUE="missionProduce.wmv">
<PARAM NAME="AutoStart" VALUE="1">
<PARAM NAME="AutoSize" VALUE="1">
<PARAM NAME="ShowStatusBar" VALUE="1">
<PARAM NAME="DisplaySize" VALUE="0">
<PARAM NAME="SendPlayStateChangeEvents" VALUE="1">
<PARAM NAME="EnableContextMenu" VALUE="0">
<PARAM NAME="ShowControls" VALUE="1">
<EMBED TYPE="video/x-ms-asf-plugin" PLUGINSPAGE="http://www.microsoft.com/windows/mediaplayer/download/default.asp" SRC="missionProduce.wmv" WIDTH="320px" HEIGHT="300px" SHOWCONTROLS="1" SHOWPOSITIONCONTROLS="0" SHOWSTATUSBAR="1" ALIGN="bottom" AUTOSIZE="1" DISPLAYSIZE="0"></EMBED>
</OBJECT>
<OBJECT
ID="mediaPlayer"
CLASSID="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95"
CODEBASE="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701"
STANDBY="Loading Microsoft Windows Media Player components…"
TYPE="application/x-oleobject">
<PARAM NAME="fileName" VALUE="THIS IS WHERE YOU PUT THE MUSIC/VIDEO LINK">
<PARAM NAME="animationatStart" VALUE="true">
<PARAM NAME="transparentatStart" VALUE="true">
<PARAM NAME="autoStart" VALUE="true">
<PARAM NAME="showControls" VALUE="true">
<PARAM NAME="ShowDisplay" VALUE="true">
</OBJECT>
[Drop down Menus]
<param name="wmode" value="transparent" />
to the <object> and/or
wmode="transparent"
to the <embed> has solved the problem.
<end node> 5P9i0s8y19Z
dt=
<node>flash
2
[show static image]
<object>
<param name="flashvars" value="file=http://www.tcccorp.net/video/0724VersionQT.flv&image=images/municipal-button.jpg" />
<embed src="video/mediaplayer.swf" width="480" height="300" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="file=http://www.tcccorp.net/video/0724VersionQT.flv&image=images/municipal-button.jpg" /></object>
Parameters
Name Description
Parameter name Parameter description
flv The URL of the FLV video to be played.
width Forces the video width.
height Forces the video height.
autoplay 1 to auto-play
autoload 1 to automatically load
buffer The number of seconds to buffer. By default set to 5.
config The URL of the configuration text file, similar to flv_config.txt
configxml The URL of the configuration XML file, similar to flv_config.xml
title The title shown before loading the video
margin The margin of the video with respect to the Flash object. (useful for skins).
srt 1 to use SRT subtitles (the file must be at the same place as the video and have the same name, with .srt extension)
showstop 1 to show the STOP button.
showvolume 1 to show the VOLUME button.
showtime 1 to show the TIME button
loop 1 to loop.
startimage The URL of the JPEG file (not progressive) to be shown before loading the video
skin The URL of the JPEG file (not progressive) to load
playercolor The background color of the player bar (not the flash)
loadingcolor The color of loading bar
bgcolor The background color
bgcolor1 The first color of the background gradient
bgcolor2 The second color of the background gradient
buttoncolor The color of the buttons
buttonovercolor Hover color of buttons
slidercolor1 The first color of the bar gradient
slidercolor2 The second color of the bar gradient
sliderovercolor Hover color of the bar
loadonstop 0 to stop the video loading by cliking on STOP button
phpstream 1 to use php stream
Keyboard shortcuts
<end node> 5P9i0s8y19Z
dt=
<node>flv
2
[NOTE]
The move path reqiures ../ to make it find movie. the image or swf path does not require such logic
<div style="margin:25px 0 0px 0px;">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" width="200" height="200">
<param name="wmode" value="transparent">
<param name="flashvars" value="file=../videos/boc.flv&image=images/homepagevideoshot.jpg" />
<param name="movie" value="../videos/mediaplayer.swf" />
<embed src="../videos/mediaplayer.swf" width="200" height="200" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="file=../videos/boc.flv&image=images/homepagevideoshot.jpg" /></object>
</div>
[Greeley Chamber]
$movie="../videos/GreatFromGroundUp.flv";$img="../videos/greeley.jpg"; ?>
<div style="margin:25px 0 0px 0px;">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" width="200" height="200">
<param name="wmode" value="transparent">
<param name="flashvars" value="file=<?php echo $movie; ?>&image=<?php echo $img; ?>" />
<param name="movie" value="../videos/mediaplayer.swf" />
<embed src="../videos/mediaplayer.swf" width="200" height="200" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="file=<?php echo $movie; ?>&image=<?php echo $img; ?>" /></object>
</div>
<end node> 5P9i0s8y19Z
dt=
<node>sound
2
Can be above body
<bgsound src="../SoundBites/stdatas[1].wav" loop="1">
<end node> 5P9i0s8y19Z