HTMLcode

Colors /-\ Image /-\ Breaks, Rules, Lists /-\ Tables /-\ Audio/Video

PARAGRAPH
    MARGIN
<p style="margin-right:25%">
<p style="margin-right:20%;margin-left:20%"><br><br>
    STYLE
style="font-size:20px;font-style:italic;font-weight:bold;text-align:right;color:red;font-family:arial;"
________________________________________
TABLES
<table border="1" style="border-collapse:collapse;" width="50%" align="right" cellpadding="10" cellspacing="0"  bgcolor=#ffffff>
<tr>
<td width=75%>ooo</td>
<td>ooo</td>
</tr>
</table>
See OTHER bgcolors
OTHER styles: border-top:5px solid green;border-color:rgb(200, 200, 200); border-width:1px;padding:10px;text-align:center; vertical-align:middle
ADD ROW
<tr>
<td>ooo</td>
<td>ooo</td>
</tr>

FOR 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 /-\ Image /-\ Breaks, Rules, Lists /-\ Tables /-\ Audio/Video
________________________________________
IMAGE SYNTAX
<img style="border:1px solid black;margin: 10px 20px">
[for margin, one value specifies equal margin on every side
 two values specify the top/bottom & right/left
 three values specify the top, right/left, bottom
 four values specify the top, right, bottom, left
 There is also
 margin-top: 10px; padding-top: 5px]
OLD--white space around image: hspace="10" vspace="10"

CAPTIONS
<table width="98%"><tbody><tr><td style="text-align:center"><a href="URL"><img alt="ALT" src="sourceURL" border="0" width="98%"></a></td>
</tr><tr><td style="font-size:11px;font-style:italic;text-align:center;"><i>CAPTIONTEXT</i></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??
Colors /-\ Image /-\ Breaks, Rules, Lists /-\ Tables /-\ Audio/Video
________________________________________
BOLD
<b></b> or <span style="font-weight:bold;"></span>

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;

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-->
Colors /-\ Image /-\ Breaks, Rules, Lists /-\ Tables /-\ Audio/Video
________________________________________
COLORS [Google html color codes]
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
________________________________________
MORE IMAGE SYNTAX:
[[IMAGE||imagepath||alignment||width||ALT||CAPTION||LINK]]
example:
[[IMAGE||/images/filename-glry.jpg||right||400||ALT||caption||/images/filename.jpg]]

Image widths Generated by Kepler CMS:
Gallery:
-full
-hpfeat 490
-thm  117/98
Other:
-br 600   
-br2 1024
-brp 1024
-brp2 3000
-ci 563
-ci2 250
-cilarge2 700
-glry 400
-glrthm 120x90

VIDEO SYNTAX
^^file^^
File: videos/00000.mov
Description: Play animation (00 Mb)

^^file^^
File: videos/00000.mov
Description: Play animation (00 Mb)

^^file^^
File: videos/00000.mov
Description: Play animation (00 Mb)

YouTube Code
^^file^^
Link: http://www.youtube.com/watch?v=1-0-HKHjsPY&NR=1
Description: Play (on YouTube) TitleOfVideo

Size of screenshot needed for Gallery: 600 x 338 pixels
________________________________________
Featured News image size: 305x210
Normal News icon: 101x101
IMAGE with CAPTION
<table align="right" width=50%><caption align="bottom"><i><font size="2">CAPTION</font></i></caption><tr><td>IMAGE</td></tr></table>
or
<p style="font-style:italic;font-size:10px;text-align:center">caption</p>
________________________________________
GSS

INVESTIGATION
<table width="100%">
<tbody>
<tr>
<td colspan="2" style="background-color:rgb(71,169,75);color:rgb(255,255,255)"><b>&nbsp;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&amp;cht=d&amp;chdp=sites&amp;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&amp;sig=tVOiClDplhG5kn14uuuEyn36bqU" data-igsrc="http://35.gmodules.com/ig/ifr?mid=35&amp;synd=trogedit&amp;url=http%3A%2F%2Fwww.gstatic.com%2Fsites-gadgets%2Fembed%2Fembed.xml&amp;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&amp;h=30&amp;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&amp;synd=trogedit&amp;url=http%3A%2F%2Fwww.gstatic.com%2Fsites-gadgets%2Fembed%2Fembed.xml&amp;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&amp;h=30&amp;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=&quot;window.open(document.referrer+'?tmpl=/system/app/templates/print/&amp;showPrintDialog=1')&quot;   style=&quot;border#58none#59&quot; src=&quot;http#58//cdn.printfriendly.com/pf-button.gif&quot; alt=&quot;Print Friendly and PDF&quot;/>;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>

Colors /-\ Image /-\ Breaks, Rules, Lists /-\ Tables /-\ Audio/Video
________________________________________
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>

Kepler Audio or video popup code:
<a href="/files/mws/00000.mp3"  onclick="window.open (this.href, 'child', 'height=20,width=300'); return false"> <img src="/images/mws/00000.jpg" align="right" alt="ttttt" border="0"></a>
   Example
<a href="/files/mws/audio/stardate/sd20110421BasketOPlanets.mp3"  onclick="window.open (this.href, 'child', 'height=20,width=300'); return false">Basket of Planets </a>

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

________________________________________
alternative "bullets"
&diams;  solid diamond
&loz;    open diamond (lozenge)
________________________________________
GOOGLE SITES
GSS images displayed on page should be 700 pixels wide at most - or set width="100%"
________________________________________
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">&nbsp;</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: <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>
FOR CONVERSION to PDF in Dreamweaver, use
<font color="white">p style="page-break-before: always"</font><br>
and global changes -
    add "<" before "p style="
    and ">.</p>" before "</font>"

________________________________________
Kepler Staging Steps

<> Make Discovery Table rows with system parameters
<> Make new discovery pages with interactive, parameter tables,
     light curves  (no interactive is yet possible for binaries)
<> Locate on Home page interactive starfield w/ short descriptive blurbs.
<> Put graphics/movies with credit & captions in Galleries
<> Make News item with artwork & links
<> Make Featured Item graphic and stage Featured Item for home page

ftp: kepler.arc.nasa.gov  kepler  deethkepler2010!
CMS: Agould - k[deeth-1]pl[deeth-1]r88!
________________________________________
IPS
<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"

Comments