index   prev   next RISC OS Notes

HTML and CSS and Textile

# Textile Link to Textile Documentation Link to Textile Quickref Link to Textile ROOL forum doc <blockquote> some text here </blockquote> will show the text in a block with a grey background - used in ROOL forums for quoting parts of previous post <pre> <code> Any text you like </code> </pre> This will show an image in the forum post: <img src="" alt=""> This is how to show a link:- "description of url":

# - documentation sources

ADFS::HardDisc5.$.DOCZ.HTML jr website - lynx/Web Stuff comprehensive shortcuts eg ``pp ADFS::HardDisc5.$.APPZ.S1.!StrongED.Defaults.Modes.HTML.ModeFile F1 on any keyword opens entry in ADFS::HardDisc5.$.DOCZ.!Manuals.Root.StrongHTML

# - !DOCTYPE and encoding

note !DOCTYPE has a ! html5 :- <!DOCTYPE HTML> xhtml <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ""> < html xmlns="" xml:lang="en" lang="en">

# - hard spaces make hard cases ************************

html may fail if hard space is used instead of soft (xA0 - x20 - note SideDiff needs option set to detect A0) NOTE - copy and paste via NetSurf from brings in xA0s.

# - to format html code

link to: tick: Clean up Markup with HTML-Tidy tick: Show Source click: Check (reformatted html will be listed at bottom) save: page load into: StrongED extract: the reformatted listing change entities: &lt;, &gt;, &quot; to < > " save:

# - convert PDF to text

use pdftotext in ADFS::Panto.$.altAPPS.P2 command line program available from Martin Wuerthner

# - convert PDF or Word to html

1. Compose a new message in GMail. 2. Attach any PDF or Word document that you want to convert to HTML 3. Enter your own email address in the To: box and click send. 4. You instantly receive a message in your GMail Inbox folder. Open the message and click the "View as HTML" link next to your attachment. 5. Attachment appears as HTML in a browser. Save file

# - CSS warnings

names of classes must not start with a number eg .A1xx { color: red } not .1xx { color: red }

# - CSS centring a block

the CSS below is centres the spiral bound notebook on this page The hammered vellum paper background is attached to the body tag WARNING if you copy paste this you will get hex A0s instead of spaces body {background: url(img/bgpaper.jpg); font-size:15px; font-weight:500; padding: 0em 4em 1em 4em; } #pagebox {width:52em; margin-left: auto; margin-right:auto; } #page {padding: 1em 1em 1em 5em; margin: 0pt; width:46em; background: url(img/bgpage.gif); background: url(img/spiralbind.gif); background-repeat: repeat-y; }

# - CSS removing underlines and bullets

The following CSS aand html will remove underlines from links and bullets from unordered lists. CSS .plain {list-style: none;} .plain a:link {text-decoration: none;} html <ul class="plain"> ....

# - CSS header

<head> <title> CSS Examples Index </title> <LINK REL="StyleSheet" HREF="style.css" TYPE="text/css"> </head> NOTE- name of style sheet must not be same as the html page ie if page is fred.htm you cannot refer to fred.css in that page. AND - it must have a filetype of CSS !!!!! NOT TRUE - something funny going on - sometimes it do and sometimes it dont

# - CSS multiple style sheets with one html page

if the value of the rel attribute is "stylesheet" and there is no title then the stylesheet is persistent and will always be applied. There can be any number of such stylesheets. If the value of the rel attribute is "stylesheet" and there is a title then the stylesheet is preferred and will initially be applied. If there is more than one such stylesheet (with different titles) then the last specied is used and the others are ignored. If the value of the rel attribute is "alternate stylesheet" then the title attributes serves to group these styles together. So the user can select to apply a group of stylesheets in one go. To combine multiple/partial style sheets into one set the TITLE attribute taking one and the same value to the LINK element. The combined style will apply as a preferred style, e.g.: <LINK REL=Stylesheet HREF="default.css" TITLE="combined"> <LINK REL=Stylesheet HREF="fonts.css" TITLE="combined"> <LINK REL=Stylesheet HREF="tables.css" TITLE="combined">

# - CSS body selector cascade example

body {background-color:#FF8; } body {background:url(hvngate.jpg) top left; background-repeat:no-repeat;} With the above order the first body property is over-ridden and the browser behaves as if it were not coded. If the order is reversed then the yellow colour of the background peeps out when the browser window is enlarged. It could of course be coded:- body {background:url(hvngate.jpg) top left; background-repeat:no-repeat;} background-color:#FF8;

# - redirect

<head> <meta http-equiv="refresh" content="1;URL=index.html"> </head>

# - symbols and character entity set

look on jr web site lynx - web stuff - Elizabeth Castro book html and css appendix D

# - validate

use w3 on web but app !htmlcheck might be worth a look

# StrongED HTML Mode Shortcuts

Shortcuts modified from default html mode # JR added shortcuts for gaydon mags ``jrcss <link rel="stylesheet" href="../css/swiss.css" type="text/css"> ``jridx <a href="../mags.html">index of magazines</a> # document html 5 ``doc <!DOCTYPE html>\n<html>\n<head>\n<meta charset="UTF-8">\n<title>Bakehouse-Cyber</title>\n<link href="../css/testing.css" rel="stylesheet">\n</head>\n<body>\n\n\n</body>\n</html>\n<p>© JR 2013</p>\n # anchors ``ai <a href="\@">\@</a>\@ ``ae <a href="http://\@/\@">\@</a>\@ ``an <a name="\@">\@</a>\@ # break ``b <br />\@ # comment : ``! <!-- \@ -->\@ ``/* /* \@ */ # common characters ``> > ``< < ``& & (C) © (c) © ``" " # copyright ``C Copyright © Bakehouse-Cyber 2013\n ``c Copyright © jr, 2013\n # div ``dv0 <div>\@</div> ``dv1 <div>\@ ``dv2 </div>\@ ``dv3 <div>\N\N\@</div> ``dv4 </div><div> # forms ``form <form></form> ``fi <input> ``fsub <input type="submit" value="Submit\@"> \@ ``fre <input type="reset" value="Reset\@"> \@ # headings ``1 <h1>\@</h1>\n\@ ``2 <h2>\@</h2>\n\@ ``3 <h3>\@</h3>\n\@ ``4 <h4>\@</h4>\n\@ ``5 <h5>\@</h5>\n\@ ``6 <h6>\@</h6>\n\@ # images/pictures ``pi <img src="\@graphics/\@.gif">\@ ``pa <img src="\@graphics/\@.gif" alt="[\@]">\@ ``pl <img src="\@graphics/\@.gif" border=0>\@ # jscript ``js <script>\@</script> # lists ``ul <ul>\n\i <li>\@</li>\N\I</ul>\@ ``ol <ol>\n\i <li>\@</li>\N\I</ol>\@ ``li <li>\@</li>\@\n <li>+ <li>\@</li>\n\i<li>\@ </li>+ </li>\n\i<li>\@</li>\@ ``dl <dl>\n\i <dt>\@</dt>\n\i <dd>\@</dd>\@\n\i</dl>\@ ``dt <dt>\@</dt>\n\i <dd>\@</dd>\@ <dt>+ <dt>\@</dt>\n\i <dd>\@</dd>\n\i<dt>\@ </dt>+ </dt>\n\i <dd>\@</dd>\n\i<dt>\@</dt> <dd>+ <dd>\@</dd>\n\i<dt>\@</dt>\n\i<dd>\@ </dd>+ </dd>\n\i<dt>\@</dt>\n\i<dd>\@</dd>\@ # tables ``table <table align="\@" width="\@" border=\@>\n\i <tr>\@</tr>\n</table>\n ``tr <tr>\@</tr>\@ ``td <td>\@</td>\@ ``th <th>\@</th>\@ ``tf <tf>\@</tf>\@ <tr>+ <tr>\@</tr>\n\i<tr>\@ </tr>+ </tr>\n\i<tr>\@</tr> <td>+ <td>\@</td><td>\@ </td>+ </td><td>\@</td>\@ # text ``pp <p>\@</p>\@ ``p0 <p>\@</p> ``p1 <p> ``p2 </p> ``p3 <p>\N\@</p> ``p4 </p><p> ``i <i>\@</i>\@ # key one of the following characters and it will be converted its corresponding html entity code. Æ &AElig; Á &Aacute; Â &Acirc; À &Agrave; Å &Aring; Ã &Atilde; Ä &Auml; Ç &Ccedil; ¸ &Cedilla É &Eacute; Ê &Ecirc; È &Egrave; Ë &Euml; Í &Iacute; Î &Icirc; Ì &Igrave; Ï &Iuml; Ñ &Ntilde; Ó &Oacute; Ô &Ocirc; Ò &Ograve; Ø &Oslash; Õ &Otilde; Ö &Ouml; Ú &Uacute; Û &Ucirc; Ù &Ugrave; Ü &Uuml; Ý &Yacute; á &aacute; ´ &acute; â &acirc; æ &aelig; à &agrave; å &aring; ã &atilde; ä &auml; ¦ &brvbar; ç &ccedil; ¢ &cent; © &copy; ¤ &curren; ° &deg; ¨ &die; ÷ &divide; é &eacute; ê &ecirc; è &egrave; ð &eth; ë &euml; ¼ &frac14; ½ &frac12; ¾ &frac34; í &iacute; î &icirc; ¡ &iexcl; ì &igrave; ¿ &iquest; ï &iuml; « &laquo; ¯ &macr; — &mdash; – &ndash; µ &micro; · &middot;   &nbsp; ¬ &not; ñ &ntilde; ó &oacute; ô &ocirc; ò &ograve; ª &ordf; º &ordm; ø &oslash; õ &otilde; ö &ouml; ¶ &para; ± &plusmn; £ &pound; » &raquo; ® &reg; § &sect; ­ &shy; ¹ &sup1; ² &sup2; ³ &sup3; ß &szlig; × &times; ™ &trade; ù &ugrave; ú &uacute; û &ucirc; ¨ &uml; ü &uuml; ý &yacute; ¥ &yen; þ &thorn; ÿ &yuml;

© JR 2013