HTML CHARACTERS
✔ checkmark
☑ (checkmark in box)
Alternative "bullets":
♦ solid diamond
◊ open diamond (lozenge)
’ curly apostrophe [right single quote?]
Character Set HTML Codes Collection
BOLD
<b></b>
<span style="font-weight:bold;"></span>
BODY STYLE
<body style="background-color:rgb(0,255,0);">
<body style="background-color:rgb(0,255,0); color:rgb(255,0,0); ">
MARGINS
<p style="margin-right:25%">
<p style="margin-right:20%;margin-left:20%"><br><br>
PARAGRAPH STYLE
<p style="font-size:20px;font-style:italic;font-weight:bold;text-align:right;color:red;font-family:arial;">
LINKS
COLOR:
<a href="URL" style="color: rgb(180,180,255)">TEXT</a>
(lighter blue)
EMAIL:
<a href="mailto:example@email.com">
CENTER
<div style="text-align: center;">
________________________________________
TABLES
<table border="1" width="100%" align="right" cellpadding="10" cellspacing="0">
<table border="1" width="85%" align="right" cellpadding="10" cellspacing="0" style="border-collapse:collapse;border-top:5px solid green;" bgcolor=#E3E4FA> (E3E4FA is lavender)
[CSS SYNTAX border-top: border-width border-style border-color|initial|inherit; and border-top-styles are: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;]
<table style="padding:10px;border-color:rgb(200, 200, 200); border-width:1px;float:right;" width="50%" align="right" cellpadding="10" cellspacing="0" border="1">
<table border="1" style="padding:10px;border-collapse:collapse;border-top:5px solid green;border-color:rgb(200, 200, 200); border-width:1px;float:right;" width="50%" align="right" cellpadding="10" cellspacing="0" bgcolor=#E3E4FA>
<tr>
<td width=75%>ooo</td>
<td>ooo</td>
</tr>
</table>
ALIGN and VALIGN IN HTML5:
<td style="text-align:center; vertical-align:top;">
ADD ROW
<tr>
<td>ooo</td>
<td>ooo</td>
</tr>
ONE-CELL BORDER: make nested table or
<td style="border: 1px solid black; background-color: rgb(231, 228, 211); width: 50%;" valign="top">
ROW HEIGHT
<tr style="height:2px;" >
________________________________________
COLORS
Light Colors:
Lavender #E3E4FA Lavender Blush #FDEEF4
Light Cyan #E0FFFF Light Goldenrod Yellow #FAF8CC
White #FFFFFF "Dark" Sea Green1 #C3FDB8
Darker Colors:
Red #FF0000 Cyan #00FFFF
Silver #C0C0C0 Blue #0000FF Grey #808080
Dk Blue #0000A0 Black #000000 Pink?? #FF0080
Orange #FFA500 Purple #800080 Brown #A52A2A
Yellow #FFFF00 Maroon #800000 Lime #00FF00
Green #008000 Fuchsia #FF00FF Olive #808000
Teal #008080 Aqua #00FFFF Maroon #800000
Navy #000080
BREAKS
br><br <br><br>
<BR CLEAR=left> <BR CLEAR=all>
HORIZONTAL RULES
<hr style="border-style:outset; border-width:10px; border-color:#0000ff; margin-left: 10px; margin-right: 10px;">
"outset" can be replaced by solid, double, dotted, dashed, groove, ridge, inset, outset
Default attributes:
display: block; margin-top: 0.5em; margin-bottom: 0.5em; margin-left: auto; margin-right: auto; border-style: inset; border-width: 1px;
________________________________________
IMAGE SYNTAX
<img src="ooo" style="margin: 3px 20px;vertical-align:middle;align=middle;border:1px solid black;">
OPTIONS FOR align are left|right|middle|top|bottom
OPTIONS FOR vertical-align are baseline|length|sub|super|top|text-top|middle|bottom|text-bottom|initial|inherit;
OPTIONS FOR margin, 1 value - all sides, 2 values - top/bottom & right/left, 3 values - top, right/left, bottom, 4 values - top, right, bottom, left
ALSO margin-top: 10px; padding-top: 5px
CAPTIONS
<div align="left"><a href="URL"><img alt="CAPTIONtxt" src="SOURCEurl" border="0" width="70%"></a><p><i>CAPTIONtxt</i></p></div>
<table style="margin:15px 15px" align="right" width="50%">
<caption align="bottom"><i>CAPTIONTEXT</i></caption>
<tbody>
<tr>
<td><a href="URL"><img alt="ALTtext" src="SOURCEurl" border="0" width="100%"></a></td>
</tr>
</tbody>
</table>
<figure>
<img src='image.jpg' alt='missing' />
<figcaption>Caption goes here</figcaption>
</figure>
<p><iframe width="95%" frameborder="0" src="//www.youtube.com/embed/wMG9UEs28Qk" allowfullscreen="true"></iframe></p>
or just allowfullscreen??
________________________
ORDERED LIST
<ol style="list-style-type:lower-alpha" start="2">
<li>texthere</li>
</ol>
also: upper-alpha, lower-roman, upper-roman
[default: arabic; start specification is a number (default is 1) but displays as corresponding type]
DEFINITION LIST
<dl>
<dt>oooo</dt><dd>oooo</dd>
<dt>oooo</dt><dd style="margin-right:30%">oooo</dd>
</dl>
REDIRECT CODE - for Passthrough Page - in <head>:
<meta http-equiv=refresh content="0"; URL=putURLhere">
<!--commentNotDisplayedInBrowser-->
________________________________________
Audio and video HTML5 code:
<video width="320" height="240" controls poster="URLofImageSameDimensionAsMovie"><source src="URLofMovie" type="video/mp4">Your browser does not support the video tag or the file format of this video.
</video>
[can add:] <source src="movie.ogg" type="video/ogg">
[can add:] autoplay="autoplay"
instead of controls
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
<source src="horse.wav" type="audio/wav">
Your browser does not support the audio element.
</audio>
________________________________________
Google Site Popups: (from http://www.goopal.org/Google-Sites-Embed/inline-javascript)
Button & 'Alert' Box
<form xmlns="http://www.w3.org/1999/xhtml"><input id="HelloWorld" onClick="alert('ALERTMESSAGE')" type="button" value="BUTTONTEXT"/></form>
Anchor & 'Alert' Box
<form xmlns="http://www.w3.org/1999/xhtml"><a href="#" id="HelloWorld" onClick="alert('ALERTMESSAGE')">ANCHORTEXT</a></form>
Confirmation Box
The confirmation Dialog Box Pops up from a webpage to display 2 options "OK" to continue or "Cancel".
<a href="http://www.goopal.org/" onclick="return (confirm('Follow this link?'))">Goopal - Google Sites Examples</a>
Selection Box & 'Alert' Box
<form xmlns="http://www.w3.org/1999/xhtml"><select height="50px" onChange="alert(this.options[this.selectedIndex].value)">
<option value="">TOPCHOICETEXT</option>
<option value="URL1">TEXT1</option>
<option value="URL2">TEXT2</option>
<option value="URL3">TEXT3</option>
<option value="URL4">TEXT4</option>
<option value="URL5">TEXT5</option>
</select>
</form>
________________________________________
DIGITAL SKY PASS
optional text: <font color="green"></font>
or style="color:rgb(56,118,29)"
or darker green: style="color:rgb(39,78,19)"
light green optional box: bgcolor="#F0FFF0"
light purple box: bgcolor="#E3E4FA"
For DS Users - light blue: table bgcolor="#F0FFFF"
________________________________________
GSS
images displayed on page should be 700 pixels wide at most - or set width="100%"
INVESTIGATION
<table width="100%">
<tbody>
<tr>
<td colspan="2" style="background-color:rgb(71,169,75);color:rgb(255,255,255)"><b> Investigation</b></td>
</tr>
<tr>
<td width="25%">
<img src="http://www.lawrencehallofscience.org/gss/images/googlesite/invlogo2.png" style="display:block;margin-right:auto;margin-left:auto;text-align:center" border="0" height="100" width="100">
</td>
<td><br>LINK<font size="5">0-0. TITLE</font></a><br>
DescriptiveSentence.
</td>
</tr>
<tr>
<td colspan="2" style="background-color:rgb(71,169,75);color:rgb(255,255,255)"> <br>
</td>
</tr>
</tbody>
</table>
TG INVESTIGATION
<table style="border-top:5px solid green;border-bottom:5px solid green" cellpadding="3" width="80%">
<tbody>
<tr>
<td bgcolor="green" width="2%"><br>
</td>
<td>
<div style="text-align: center;"><b>Investigation</b><br><font size="5"><b>TITLE</b></font><br></div>
<br>by oooooo<br><br>CONTENT
</td>
</tr>
</tbody>
</table>
Print Friendly
<table align="right">
<tbody>
<tr>
<td><img src="https://www.google.com/chart?chc=sites&cht=d&chdp=sites&chl=%5B%5BGoogle+Gadget%27%3D20%27f%5Cv%27a%5C%3D0%2710%27%3D119%270%27dim%27%5Cbox1%27b%5CF6F6F6%27fC%5CF6F6F6%27eC%5C0%27sk%27%5C%5B%22Embed+gadget%22%27%5D%27a%5CV%5C%3D12%27f%5C%5DV%5Cta%5C%3D10%27%3D0%27%3D120%27%3D27%27dim%27%5C%3D10%27%3D10%27%3D120%27%3D27%27vdim%27%5Cbox1%27b%5Cva%5CF6F6F6%27fC%5CC8C8C8%27eC%5C%27a%5C%5Do%5CLauto%27f%5C&sig=tVOiClDplhG5kn14uuuEyn36bqU" data-igsrc="http://35.gmodules.com/ig/ifr?mid=35&synd=trogedit&url=http%3A%2F%2Fwww.gstatic.com%2Fsites-gadgets%2Fembed%2Fembed.xml&up_embed_snippet=%3Cimg%20onclick%3D%22window.open(document.referrer%2B'%3Ftmpl%3D%2Fsystem%2Fapp%2Ftemplates%2Fprint%2F%26showPrintDialog%3D1')%22%20%20%20style%3D%22border%3Anone%3B%22%20src%3D%22http%3A%2F%2Fcdn.printfriendly.com%2Fpf-button.gif%22%20alt%3D%22Print%20Friendly%20and%20PDF%22%2F%3E&h=30&w=120" data-type="ggs-gadget" data-props="align:right;borderTitle:Embed gadget;height:30;igsrc:http#58//35.gmodules.com/ig/ifr?mid=35&synd=trogedit&url=http%3A%2F%2Fwww.gstatic.com%2Fsites-gadgets%2Fembed%2Fembed.xml&up_embed_snippet=%3Cimg%20onclick%3D%22window.open(document.referrer%2B'%3Ftmpl%3D%2Fsystem%2Fapp%2Ftemplates%2Fprint%2F%26showPrintDialog%3D1')%22%20%20%20style%3D%22border%3Anone%3B%22%20src%3D%22http%3A%2F%2Fcdn.printfriendly.com%2Fpf-button.gif%22%20alt%3D%22Print%20Friendly%20and%20PDF%22%2F%3E&h=30&w=120;mid:35;scrolling:no;showBorder:false;showBorderTitle:null;spec:http#58//www.gstatic.com/sites-gadgets/embed/embed.xml;up_embed_snippet:<img onclick="window.open(document.referrer+'?tmpl=/system/app/templates/print/&showPrintDialog=1')" style="border#58none#59" src="http#58//cdn.printfriendly.com/pf-button.gif" alt="Print Friendly and PDF"/>;width:120;wrap:false;" style="display:block;text-align:right;margin-left:auto;" class="igm" height="30" width="120"></td>
</tr>
</tbody>
</table>
________________________________________
"Join" button on GSS pages:
(Large version)
<div align="right"><a href="http://www.globalsystemsscience.org/order"><img src="http://www.lawrencehallofscience.org/gss/images/googlesite/join.png"></a></div>
(Small version)
<div align="right"><a href="http://www.globalsystemsscience.org/order"><img src="http://www.lawrencehallofscience.org/gss/images/googlesite/join_sm.png"></a></div>
________________________________________
IPS
style="text-align: center;"
IPS voices
<a href="/resource/resmgr/voices/0000" onclick="window.open (this.href, 'child', 'height=20,width=300'); return false">TITLE</a>
<a name="top"></a>
/?page=
/resource/resmgr/Images/
/resource/resmgr/img-articles/
/resource/resmgr/pdf-articles/
/resource/resmgr/Docs/
<hr noshade size="6" />
________________________________________
LOCCNA
bgcolor="#4B8A08"
________________________________________
DOES NOT WORK IN GOOGLE SITES:
Hanging indent:
<p style="padding-left:10pt; text-indent:-10pt">
or both these
<p style="margin-bottom: 0in">
<p style="margin-left:20pt">
PAGE BREAKS
<p style="page-break-after: always;">
<div style="page-break-before: always"> </div>
[Make sure you include some text between the <div> opening and closing tags, otherwise this may not work]
<p style="page-break-before: always">texthere</p>
IN header (CSS):
<style>
.break { page-break-before: always; }
h2 {font-size:60px}
</style>
IN body:
<p style="page-break-before: always">text</p>
or <div style="page-break-before: always">text</div>
KEPLER IMAGE SYNTAX:
[[IMAGE||imagepath||alignment||width||ALT||CAPTION||LINK]]
example:
[[IMAGE||/images/filename-glry.jpg||right||400||ALT||caption||/images/filename.jpg]]
CODE FOR INTRAPAGE NAVIGATION
<a name="characters"></a>
<p style="font-size:9px;font-style:italic;text-align:center;color:green;font-family:arial;">
<a href="#characters">Characters-Paragraphs-Div</a> | <a href="#tables">Tables</a> | <a href="#colors">Colors-Breaks-Rules</a> | <a href="#images">Images</a> | <a href="#lists">Lists-GooglePopUps</a> | <a href="#video">Audio/Video</a> |<a href="#projects">Projects</a> </p>