HTMLcode

HTML CHARACTERS

✔ checkmark

☑ (checkmark in box)

Alternative "bullets":

&diams; solid diamond

&loz; open diamond (lozenge)

’ curly apostrophe [right single quote?]

Character Set HTML Codes Collection

BOLD

<b></b>

BODY STYLE

MARGINS

PARAGRAPH STYLE

LINKS

COLOR:

(lighter blue)

EMAIL:

CENTER

________________________________________

TABLES

<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)

<tr>

</tr>

</table>

ALIGN and VALIGN IN HTML5:

ADD ROW

<tr>

</tr>

ONE-CELL BORDER: make nested table or

ROW HEIGHT

________________________________________

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>

HORIZONTAL RULES

"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

OPTIONS FOR align are left|right|middle|top|bottom

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>

<caption align="bottom"><i>CAPTIONTEXT</i></caption>

<tbody>

<tr>

</tr>

</tbody>

</table>

<figcaption>Caption goes here</figcaption>

</figure>

or just allowfullscreen??

________________________

ORDERED LIST

<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>

</dl>

REDIRECT CODE - for Passthrough Page - in <head>:

________________________________________

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

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

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

<option value="">TOPCHOICETEXT</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

<tbody>

<tr>

<td colspan="2" style="background-color:rgb(71,169,75);color:rgb(255,255,255)"><b> Investigation</b></td>

</tr>

<tr>

</td>

<td><br>LINK<font size="5">0-0. TITLE</font></a><br>

DescriptiveSentence.

</td>

</tr>

<tr>

</td>

</tr>

</tbody>

</table>

TG INVESTIGATION

<tbody>

<tr>

</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

<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)

(Small version)

________________________________________

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>

/?page=

/resource/resmgr/Images/

/resource/resmgr/img-articles/

/resource/resmgr/pdf-articles/

/resource/resmgr/Docs/

________________________________________

LOCCNA

bgcolor="#4B8A08"

________________________________________

DOES NOT WORK IN GOOGLE SITES:

Hanging indent:

or both these

PAGE BREAKS

[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:

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