Sample page with Default UCLO Style applied:
[Begin of file /inc/samples_xhtml.inc
.]
This page presents a collection of XHTML element samples together with the respective code. It serves as a reference for page development and is used for verification of code rendering by browsers during CSS style sheet development.
The code samples can be used for cut and paste when creating new pages and all of them work in Firefox and Internet Explorer 6 and 7.
An extensive XHTML and CSS reference can be found at www.w3schools.com.
Detailed explanations on the use of XHTML elements can be found on the Wikipedia page "HTML Element".
Although the Wikipedia page is for HTML 4.01, most of it does apply to XHTML 1.0 as well.
In the examples below,
Plain XHTML Elements
shows how elements without additional formatting code are rendered,
while
XHTML Elements with Additional Style Attributes
use additional
id
, class
and/or style
attributes
to achieve the desired layout style for an element.
TAG SAMPLES AND CODE:
<h1 id="a_headers"> Header 1 </h1> <h2> Header 2 </h2> <h3> Header 3 </h3> <h4> Header 4 </h4> <h5> Header 5 </h5> <h6> Header 6 </h6>
Example paragraph to show how it is formatted. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec sit amet turpis. Donec interdum, turpis hendrerit semper ultrices, sapien risus ornare arcu, id porttitor lacus pede pretium metus. Duis in velit quis arcu eleifend semper. Nam urna pede, mattis non, mollis eu, blandit in, ipsum. Mauris pharetra. Cras feugiat volutpat odio. Nulla ac justo vitae lorem ultrices rhoncus.
<p> Lorem ipsum dolor sit amet, consectetuer... </p>
These elements are presentational:
Bold text.
<b>Bold text.</b>
Italic text.
<i>Italic text.</i>
Teletype style.
<tt>Teletype style.</tt>
Small text.
<small>Small text.</small>
Big text.
<big>Big text.</big>
Text with xsubscript.
Text with x<sub>subscript</sub>.
Text with xsuperscript.
Text with x<sup>superscript</sup>.
Strong text.
<strong>Strong text.</strong><br />
Emphasized text.
<em>Emphasized text.</em><br />
Definition: Megabyte - defines the first instance of a term.
Definition: <dfn>Megabyte</dfn> - defines the first instance of a term.<br />
Abbrevation: abbr.
Abbrevation: <abbr title="abbreviation">abbr.</abbr><br />
Acronym: XHTML
Acronym: <acronym title="Extensible Hypertext Markup Language">XHTML</acronym><br />
One inch is 2.5 2.54 cm.
One inch is <del>2.5</del> <ins>2.54</ins> cm.
The <q>
tag is used for short inline quotations.
The <blockquote>
tag is used for longer quotations,
i.e. complete paragraphs or groups of paragraphs and no inline elements
are allowed inside it.
The attribute cite="<URI>"
can be used with
both <q>
and <blockquote>
tags,
and <URI>
must be a fully qualified
Uniform Resource Identifier. Note that the <URI>
will not be visible.
To display the source of a quote place it inside
<cite>
tags.
The source can be just text (a book reference for example), or a link
to the URI of the quoted source.
Short quotation:
A penguin walks into a bar...
(from
http://leftjustified.net/journal/2005/01/07/table-q/).
<p> Short quotation: <q cite="http://leftjustified.net/journal/2005/01/07/table-q/"> A penguin walks into a bar... </q> (from <cite> <a href="http://leftjustified.net/journal/2005/01/07/table-q/"> http://leftjustified.net/journal/2005/01/07/table-q/ </a> </cite> ). </p>
Blockquote example:
The
<cite>
tag also has a hidden feature: it enables you or someone else to automatically extract a bibliography from your documents.From HTML and XHTML, The Definitive Guide, by Chuck Musciano & Bill Kennedy, O'Reilly 2002 .
<blockquote> <p> The <code><cite></code> tag also has a hidden feature: it enables you or someone else to automatically extract a bibliography from your documents. </p> <p> From <cite> HTML and XHTML, The Definitive Guide, by Chuck Musciano & Bill Kennedy, O'Reilly 2002 </cite>. </p> </blockquote>
Another blockquote example:
The following article was taken from "The Observatory", December 1892, No.195, pp.441:
Discovery of a New Comet in Andromeda
We have had very little decent weather for observing in London of late, but I make a practice of never missing an opportunity.
Sunday, November 6th, was far from clear, and did not improve as the night deepened, so that after looking at Jupiter and a few double stars and finding the seeing unsatisfactory, I made up my mind to close observing at 11.30 P.M.
Ever since the temporary star appeared in M 31, I have taken an observation of that nebula at every chance I have had in case any further outbreak took
...
myself, and gathered a large number of facts for our instruction.
EDWIN HOLMES.
(This article is published with permission from the editors of The Observatory.)
<p> The following article was taken from <cite>"The Observatory", December 1892, No.195, pp.441</cite>: </p> <blockquote cite="The Observatory, December 1892, No.195, pp.441"> <p> <b>Discovery of a New Comet in Andromeda</b> </p> <p> We have had very little decent weather for observing in London of late, but I make a practice of never missing an opportunity. </p> <p> Sunday, November 6th, was far from clear, and did not improve as the night deepened, so that after looking at Jupiter and a few double stars and finding the seeing unsatisfactory, I made up my mind to close observing at 11.30 P.M. </p> <p> Ever since the temporary star appeared in M 31, I have taken an observation of that nebula at every chance I have had in case any further outbreak took </p> <p> ... </p> <p> myself, and gathered a large number of facts for our instruction.<br /><br /> </p> <p> EDWIN HOLMES. </p> </blockquote> <p><small> (This article is published with permission from the editors of <a href="http://www.ulo.ucl.ac.uk:/obsmag/">The Observatory</a>.) </small></p>
This is user keyboard input (inline element).
This is <kbd>user keyboard input</kbd> (inline element).
This is computer code
, i.e. a source code snippet (inline element).
This is <code> computer code</code>, i.e. a source code snippet (inline element).
This is a source code variable counter_value=5 (inline element).
This is a source code variable <var> counter_value=5 </var> (inline element).<br />
This is sample output from a program or script (inline element).
This is<samp> sample output </samp> from a program or script (inline element).
For blocks of code use the <pre>
-tag:
<pre>-tag Example This is text inside <pre></pre>-tags. It renders in fixed-pitch font, and preserves spaces and line breaks. The line below is 80 characters wide. 01234567890123456789012345678901234567890123456789012345678901234567890123456789 The line below is 100 characters wide. 0123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789 The line below is 120 characters wide. 012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
To display (X)HTML code samples, pointed brackets and quotes ("<
",
">
" and ""
") must be written as their
character entities ("<
", ">
" and
""
"). This can be accomplished in a terminal window
by piping the code through the following script:
#!/bin/bash # # html2txt.sh # cat -E | sed -e 's/</\</g' -e 's/>/\>/g' -e 's/"/\"/g' -e 's/\$//g' #
The script opens a pipe and waits for the original code as input. The resulting output can then be pasted into the XHTML document.
Ctrl-D
will exit the script.
Using this method, the original XHTML-code from the previous paragraph can be converted and displayed:
<p> <code>Ctrl-D</code> will exit the script. </p>
And taking the display of code one step further:
To display the code that was used
to display the original code, all "&
" characters need to
be replaced by "&
", which could be done using the
following script:
#!/bin/bash # # code2code.sh # cat -E | sed -e 's/&/\&/g' -e 's/</\</g' -e 's/>/\>/g' -e 's/"/\"/g' -e 's/\$//g' #
Applying this to the example yields:
<pre> <p> <code>Ctrl-D</code> will exit the script. </p> </pre>
Note that above scripts only work for (X)HTML code; other source code might need more modifications to display properly.
<dl> <dt> Definition Term 1 (inline elements only) </dt> <dd> Definition of Term 1 (block elements allowed) </dd> <dt> Definition Term 2a </dt> <dt> Definition Term 2b </dt> <dd> Definition of Terms 2a and 2b </dd> <dt> Definition Term 3 </dt> <dd> Definition 1 of Term 3 </dd> <dd> Definition 2 of Term 3 </dd> <dd> Definition 3 of Term 3 </dd> </dl>
CSS styling of definition lists appears to be very inconsistent across browsers and it seems to be best to keep it simple. While they can be very useful (see www.maxdesign.com.au for a good discussion and nice ideas) one should always consider the use of tables as an alternative.
Unordered list with five levels:
<ul> <li> Level 1 <ul> <li> Level 2 <ul> <li> Level 3 <ul> <li> Level 4 <ul> <li> Level 5 </li> </ul> </li> </ul> </li> </ul> </li> <li> Level 2 </li> </ul> </li> </ul>
Ordered list with default numbering:
<ol> <li> List Item Level 1 <ol> <li> List Item Level 2 <ol> <li> List Item Level 3 <ol> <li> List Item Level 4 </li> </ol> </li> </ol> </li> </ol> </li> <li> List Item Level 1 <ol> <li> List Item Level 2 </li> </ol> </li> <li> List Item Level 1 </li> </ol>
The <hr />
tag creates a horizontal rule.
In XHTML 1.0 strict it has no attributes and rule appearance is
controlled by CSS styles only.
<hr />
Block element. Use for contact information. Only
inline elements are permitted.
Insert a new line with <br />
.
Use of
email address obfuscation
is highly recommended.
<address> Author of this document:<br /> <a href="mailto:%74%73%40%75%6C%6F%2E%75%63%6C%2E%61%63%2E%75%6B">Thomas Schlichter</a> </address>
Below are examples of images without links and of different sizes. The standard formatting does not support captions, and image information is added using paragraphs.
All image code is placed outside of paragraphs.
Image 600x450:
Images 320x240 and 240x180:
Images 160x120, 120x90 and 80x60:
XHTML code sample for adding an image:
<img src="/inc/img/placeholder_160x120.jpg" width="160" height="120" alt="Image of placeholder 160x120" />
While tables are easy to comprehend visually even if they are just a collection of rows and columns, correct semantic formatting and additional information is required to enable screen readers to render a table in a meaningful way for users with visual impairments. For this reason all table examples below provide a summary, a table header and footer (useful for long tables in particular), and column and/or row headers (<th> elements).
The border and width definitions make for a better display in plain XHTML style and should always be provided. Definitions of widths must be in per cent rather than pixels to allow tables to grow when fonts are scaled.
Note that the general formatting of a table is usually applied to the table itself using optional attributes, while CSS styles are used to define the appearance of the various table elements. This way a table still diplays correctly without CSS styling.
Tables are centered by default.
Some examples follow below:
Col 1 Header (20%) | Col 2 Header (40%) | Col 3 Header (40%) |
---|---|---|
Col 1 Footer (20%) | Col 2 Footer (40%) | Col 3 Footer (40%) |
Row 1 Col 1 Data | Row 1 Col 2 Data | Row 1 Col 3 Data |
Row 2 Col 1 Data | Row 2 Col 2 Data | Row 2 Col 3 Data |
<table border="1" width="100%" summary="Replace_with_brief_summary_of_table" title="Replace_with_table_title" > <caption> Table with Top Header, 100% width, three columns (20, 40 and 40 per cent wide), header and footer. </caption> <col width="20%" /> <col width="40%" /> <col width="40%" /> <thead> <tr> <th scope="col"> Col 1 Header (20%) </th> <th scope="col"> Col 2 Header (40%) </th> <th scope="col"> Col 3 Header (40%) </th> </tr> </thead> <tfoot> <tr> <th> Col 1 Footer (20%) </th> <th> Col 2 Footer (40%) </th> <th> Col 3 Footer (40%) </th> </tr> </tfoot> <tbody> <tr> <td> Row 1 Col 1 Data </td> <td> Row 1 Col 2 Data </td> <td> Row 1 Col 3 Data </td> </tr> <tr> <td> Row 2 Col 1 Data </td> <td> Row 2 Col 2 Data </td> <td> Row 2 Col 3 Data </td> </tr> </tbody> </table>
Row 1 Header | Row 1 Col 2 Data | Row 1 Col 3 Data |
---|---|---|
Row 2 Header | Row 2 Col 2 Data | Row 2 Col 3 Data |
<table border="1" width="80%" summary="Replace_with_brief_summary_of_table" title="Replace_with_table_title" > <caption> Table with Left Header, 80% width, and three columns (20, 40 and 40 per cent wide). </caption> <col width="20%" /> <col width="40%" /> <col width="40%" /> <tbody> <tr> <th scope="row"> Row 1 Header </th> <td> Row 1 Col 2 Data </td> <td> Row 1 Col 3 Data </td> </tr> <tr> <th scope="row"> Row 2 Header </th> <td> Row 2 Col 2 Data </td> <td> Row 2 Col 3 Data </td> </tr> </tbody> </table>
Col 1 Header (20%) | Col 2 Header (40%) | Col 3 Header (40%) |
---|---|---|
Col 1 Footer (20%) | Col 2 Footer (40%) | Col 3 Footer (40%) |
Row 1 Header | Row 1 Col 2 Data | Row 1 Col 3 Data |
Row 2 Header | Row 2 Col 2 Data | Row 2 Col 3 Data Text link to begin of tables section. |
<table border="1" width="95%" summary="Replace_with_brief_summary_of_table" title="Replace_with_table_title" > <caption> Table with Top and Left Header, 95% width, three columns (20, 40 and 40 per cent wide), header and footer. </caption> <col width="20%" /> <col width="40%" /> <col width="40%" /> <thead> <tr> <th scope="col"> Col 1 Header (20%) </th> <th scope="col"> Col 2 Header (40%) </th> <th scope="col"> Col 3 Header (40%) </th> </tr> </thead> <tfoot> <tr> <th> Col 1 Footer (20%) </th> <th> Col 2 Footer (40%) </th> <th> Col 3 Footer (40%) </th> </tr> </tfoot> <tbody> <tr> <th scope="col"> Row 1 Header </th> <td> Row 1 Col 2 Data </td> <td> Row 1 Col 3 Data </td> </tr> <tr> <th scope="col"> Row 2 Header </th> <td> Row 2 Col 2 Data </td> <td> Row 2 Col 3 Data <a href="#a_tables"> Text link to begin of tables section. </a> </td> </tr> </tbody> </table>
This TEXT LINK is embedded in a paragraph to show its inline behaviour and this sentence is repeated three times. This Text Link is embedded in a paragraph to show its inline behaviour and this sentence is repeated three times. This text link is embedded in a paragraph to show its inline behaviour and this sentence is repeated three times.
<a href=""></a>
<ul> <li> <a href="#a_links_ul"> Level 1 </a> <ul> <li> <a href="#a_links_ul"> Level 2 </a> </li> </ul> </li> </ul>
The same image examples as shown earlier, but now all link to a large size image.
As actual image captions are not supported in XHTML 1.0 strict, image information is added using paragraphs.
Image 600x450:
Images 320x240 and 240x180:
Images 160x120, 120x90 and 80x60:
XHTML code sample for adding an image:
<a href="/inc/img/placeholder_1024x768.jpg" title="Larger image..." > <img src="/inc/img/placeholder_160x120.jpg" width="160" height="120" alt="Image of placeholder 160x120" /> </a>
Clearers prevent floats and text from getting mixed up. After a clearer the rendering starts all over again, with the upper left corner after the clearer as the starting point.
Code for a clearer:
<div class="cb-clear-both"> </div>
Extra vertical spacing can be added by inserting a line break:
<br />
To prevent decoration of elements in unorderd lists use
<ul class="cb-nodec">
:
<ul class="cb-nodec"> <li> Level 1 <ul> <li> Level 2 <ul> <li> Level 3 <ul> <li> <a href="#a_ul_nodec"> Level 4 </a> <ul> <li> Level 5 </li> </ul> </li> </ul> </li> </ul> </li> <li> Level 2 </li> </ul> </li> </ul>
To place a caption below an image the image code must be enclosed by
<div>
tags with class="img"
and
style="width: (image_width + 6)px;"
.
The caption itself must be enclosed in
<span>
tags:
<div class="img" style="width: 166px;"> <a href="/inc/img/placeholder_1024x768.jpg" title="Larger image..." > <img src="/inc/img/placeholder_160x120.jpg" width="160" height="120" alt="Image of placeholder 160x120" /> <span> Image with link to larger version and caption. </span> </a> </div>
To display the image in the center change class="img"
to class="img-centered"
.
<div class="img-centered" style="width: 166px;"> <a href="/inc/img/placeholder_1024x768.jpg" title="Larger image..." > <img src="/inc/img/placeholder_160x120.jpg" width="160" height="120" alt="Image of placeholder 160x120" /> <span> Centered image with link to larger version and caption. </span> </a> </div>
The <div class="img-centered" ...>
can
also be used to display several individual images next to each other
and center the group. The group must be followed by a "Clearer".
<div class="img-centered" style="width: 350px;"> <div class="img" style="width: 166px; float: left; margin-right: 10px;"> <a href="/inc/img/placeholder_1024x768.jpg" title="Larger image..." > <img src="/inc/img/placeholder_160x120.jpg" width="160" height="120" alt="Image of placeholder 160x120" /> <span> Image with link to larger version and caption. </span> </a> </div> <div class="img" style="width: 166px; float: left;"> <a href="/inc/img/placeholder_1024x768.jpg" title="Larger image..." > <img src="/inc/img/placeholder_160x120.jpg" width="160" height="120" alt="Image of placeholder 160x120" /> <span> Image with link to larger version and caption. </span> </a> </div> </div> <div class="cb-clear-both"> </div>
The individual images must be floated and need the addition of a right margin for all but the last image.
The width of the
<div class="img-centered" style="width: 350px;">
element calculates as follows:
width="width_img_1 + 6px + margin_1 + ... + width_img_n + 6px + (8px extra) " which for the above example is: 160px + 6px + 10px + 160px +6px = 350px
To place an image in the upper left corner of a text
section and allow paragraphs to flow around it,
change class="img"
to class="img-ulc"
.
For the upper right corner
change class="img"
to class="img-urc"
.
The text flow can be reset with a "Clearer":
<div class="cb-clear-both"> </div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec sit amet turpis. Donec interdum, turpis hendrerit semper ultrices, sapien risus ornare arcu, id porttitor lacus pede pretium metus. Duis in velit quis arcu eleifend semper. Nam urna pede, mattis non, mollis eu, blandit in, ipsum. Mauris pharetra. Cras feugiat volutpat odio. Nulla ac justo vitae lorem ultrices rhoncus.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec sit amet turpis. Donec interdum, turpis hendrerit semper ultrices, sapien risus ornare arcu, id porttitor lacus pede pretium metus. Duis in velit quis arcu eleifend semper. Nam urna pede, mattis non, mollis eu, blandit in, ipsum. Mauris pharetra. Cras feugiat volutpat odio. Nulla ac justo vitae lorem ultrices rhoncus.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec sit amet turpis. Donec interdum, turpis hendrerit semper ultrices, sapien risus ornare arcu, id porttitor lacus pede pretium metus. Duis in velit quis arcu eleifend semper. Nam urna pede, mattis non, mollis eu, blandit in, ipsum. Mauris pharetra. Cras feugiat volutpat odio. Nulla ac justo vitae lorem ultrices rhoncus.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec sit amet turpis. Donec interdum, turpis hendrerit semper ultrices, sapien risus ornare arcu, id porttitor lacus pede pretium metus. Duis in velit quis arcu eleifend semper. Nam urna pede, mattis non, mollis eu, blandit in, ipsum. Mauris pharetra. Cras feugiat volutpat odio. Nulla ac justo vitae lorem ultrices rhoncus.
<div class="img-ulc" style="width: 166px;"> <a href="/inc/img/placeholder_1024x768.jpg" title="Larger image..." > <img src="/inc/img/placeholder_160x120.jpg" width="160" height="120" alt="Image_of_placeholder_160x120" /> <span> Caption </span> </div> <p> Lorem ipsum ... </p> <div class="cb-clear-both"> </div> <div class="img-urc" style="width: 166px;"> <a href="/inc/img/placeholder_1024x768.jpg" title="Larger image..." > <img src="/inc/img/placeholder_160x120.jpg" width="160" height="120" alt="Image_of_placeholder_160x120" /> <span> Caption </span> </a> </div> <p> Lorem ipsum ... </p> <p> Lorem ipsum ... </p> <p> Lorem ipsum ... </p>
For comparison, the example is repeated without a "Clearer":
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec sit amet turpis. Donec interdum, turpis hendrerit semper ultrices, sapien risus ornare arcu, id porttitor lacus pede pretium metus. Duis in velit quis arcu eleifend semper. Nam urna pede, mattis non, mollis eu, blandit in, ipsum. Mauris pharetra. Cras feugiat volutpat odio. Nulla ac justo vitae lorem ultrices rhoncus.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec sit amet turpis. Donec interdum, turpis hendrerit semper ultrices, sapien risus ornare arcu, id porttitor lacus pede pretium metus. Duis in velit quis arcu eleifend semper. Nam urna pede, mattis non, mollis eu, blandit in, ipsum. Mauris pharetra. Cras feugiat volutpat odio. Nulla ac justo vitae lorem ultrices rhoncus.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec sit amet turpis. Donec interdum, turpis hendrerit semper ultrices, sapien risus ornare arcu, id porttitor lacus pede pretium metus. Duis in velit quis arcu eleifend semper. Nam urna pede, mattis non, mollis eu, blandit in, ipsum. Mauris pharetra. Cras feugiat volutpat odio. Nulla ac justo vitae lorem ultrices rhoncus.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec sit amet turpis. Donec interdum, turpis hendrerit semper ultrices, sapien risus ornare arcu, id porttitor lacus pede pretium metus. Duis in velit quis arcu eleifend semper. Nam urna pede, mattis non, mollis eu, blandit in, ipsum. Mauris pharetra. Cras feugiat volutpat odio. Nulla ac justo vitae lorem ultrices rhoncus.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec sit amet turpis. Donec interdum, turpis hendrerit semper ultrices, sapien risus ornare arcu, id porttitor lacus pede pretium metus. Duis in velit quis arcu eleifend semper. Nam urna pede, mattis non, mollis eu, blandit in, ipsum. Mauris pharetra. Cras feugiat volutpat odio. Nulla ac justo vitae lorem ultrices rhoncus.
<div class="img-ulc" style="width: 166px;"> ... </div> <p> Lorem ipsum ... </p> <div class="img-urc" style="width: 166px;"> ... </div> <p> Lorem ipsum ... </p> ...
To group content in a visually distinct way it can be enclosed in
<div class="group"><div>
-tags. The final
line in such a group must be a "Clearer".
Inline code in a paragraph.
Link to "Groups".
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec sit amet
turpis. Donec interdum, turpis hendrerit semper ultrices, sapien risus ornare
arcu, id porttitor lacus pede pretium metus. Duis in velit quis arcu eleifend
semper. Nam urna pede, mattis non, mollis eu, blandit in, ipsum. Mauris
pharetra. Cras feugiat volutpat odio. Nulla ac justo vitae lorem ultrices
rhoncus.
A line of code.
<div class="group"> <div class="img-ulc" style="width: 166px;"> <a href="/inc/img/placeholder_1024x768.jpg" title="Larger image..." > <img src="/inc/img/placeholder_160x120.jpg" width="160" height="120" alt="Image of placeholder 160x120" /> <span> Image with link to larger version and caption. </span> </a> </div> <p> <code>Inline code in a paragraph.</code> <a href="#a_groups">Link to "Groups".</a> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec sit amet turpis. Donec interdum, turpis hendrerit semper ultrices, sapien risus ornare arcu, id porttitor lacus pede pretium metus. Duis in velit quis arcu eleifend semper. Nam urna pede, mattis non, mollis eu, blandit in, ipsum. Mauris pharetra. Cras feugiat volutpat odio. Nulla ac justo vitae lorem ultrices rhoncus. </p> <pre> A line of code. </pre> <div class="cb-clear-both"> </div> </div>
For more distinct group display two colour-variations of the
group
class are available:
group-grey
and group-blue
:
Inline code in a paragraph.
Link to "Groups".
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec sit amet
turpis. Donec interdum, turpis hendrerit semper ultrices, sapien risus ornare
arcu, id porttitor lacus pede pretium metus. Duis in velit quis arcu eleifend
semper. Nam urna pede, mattis non, mollis eu, blandit in, ipsum. Mauris
pharetra. Cras feugiat volutpat odio. Nulla ac justo vitae lorem ultrices
rhoncus.
A line of code.
Note that as of 14/04/2008 a right-floated image inside a div can trigger a left-margin bug in IE7 (but not in IE6). It has been fixed in the CSS but requires some unusual formattings. Details are noted in the css file.
Inline code in a paragraph.
Link to "Groups".
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec sit amet
turpis. Donec interdum, turpis hendrerit semper ultrices, sapien risus ornare
arcu, id porttitor lacus pede pretium metus. Duis in velit quis arcu eleifend
semper. Nam urna pede, mattis non, mollis eu, blandit in, ipsum. Mauris
pharetra. Cras feugiat volutpat odio. Nulla ac justo vitae lorem ultrices
rhoncus.
A line of code.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec sit amet turpis. Donec interdum, turpis hendrerit semper ultrices, sapien risus ornare arcu, id porttitor lacus pede pretium metus. Duis in velit quis arcu eleifend semper. Nam urna pede, mattis non, mollis eu, blandit in, ipsum. Mauris pharetra. Cras feugiat volutpat odio. Nulla ac justo vitae lorem ultrices rhoncus.
To distinguish content as a warning it can be enclosed in
<div class="warning"><div>
-tags.
To ensure that all content is contained in the group place a "Clearer"
on the last line.
WARNING: Under no circumstances look at the sun through an unfiltered telescope.
<div class="warning"> <p> <b>WARNING:</b> Under no circumstances look at the sun through an unfiltered telescope. </p> </div>
Inline code in a paragraph.
Link to "Groups".
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec sit amet
turpis. Donec interdum, turpis hendrerit semper ultrices, sapien risus ornare
arcu, id porttitor lacus pede pretium metus. Duis in velit quis arcu eleifend
semper. Nam urna pede, mattis non, mollis eu, blandit in, ipsum. Mauris
pharetra. Cras feugiat volutpat odio. Nulla ac justo vitae lorem ultrices
rhoncus.
A line of code.
<div class="warning"> <div class="img-ulc" style="width: 166px;"> <a href="/inc/img/placeholder_1024x768.jpg" title="Larger image..." > <img src="/inc/img/placeholder_160x120.jpg" width="160" height="120" alt="Image of placeholder 160x120" /> <span> Image with link to larger version and caption. </span> </a> </div> <p> <code>Inline code in a paragraph.</code> <a href="#a_groups">Link to "Groups".</a> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec sit amet turpis. Donec interdum, turpis hendrerit semper ultrices, sapien risus ornare arcu, id porttitor lacus pede pretium metus. Duis in velit quis arcu eleifend semper. Nam urna pede, mattis non, mollis eu, blandit in, ipsum. Mauris pharetra. Cras feugiat volutpat odio. Nulla ac justo vitae lorem ultrices rhoncus. </p> <pre> A line of code. </pre> <div class="cb-clear-both"> </div> </div>
Links containing images inside tables need the special attribute
class="cb-noborder"
to prevent the display of the dashed
bottom border.
<table ... <td> Row 1 Col 2 Data<br /> <a href="/inc/img/placeholder_1024x768.jpg" class="cb-noborder" title="Larger image..." > <img src="/inc/img/placeholder_80x60.jpg" width="80" height="60" alt="Image of placeholder 80x60" /> </a><br /> More Row 1 Col 2 Data </td> ...
The contact information for UCLO is formatted as a table with
the special attribute class="cb-ulo-contact"
Telephone: | +44 (0) 208 238 8870 |
---|---|
Fax: | +44 (0) 208 238 8872 |
Email: | Secretary AT UCLO |
Address: |
UCL Observatory 553 Watford Way Mill Hill Park LONDON NW7 2QS |
Location: |
Map Travelling to UCLO |
Staff: | Staff Profiles |
<table class="cb-ulo-contact" width="70%" summary="Contact Details for UCL Observatory" title="UCLO Contact Information" > <caption> UCLO Contact Information: </caption> <col width="30%" /> <col width="70%" /> <tbody> <tr> <th> Telephone: </th> <td> +44 (0) 208 238 8870 </td> </tr> <tr> <th> Fax: </th> <td> +44 (0) 208 238 8872 </td> </tr> <tr> <th> Email: </th> <td> <address> <a href="mailto:%73%65%63%72%65%74%61%72%79%40%75%6C%6F%2E%75%63%6C%2E%61%63%2E%75%6B"> Secretary AT UCLO</a> </address> </td> </tr> <tr> <th> Address: </th> <td> UCL Observatory<br /> 553 Watford Way<br /> Mill Hill Park<br /> LONDON<br /> NW7 2QS<br /> <br /> </td> </tr> <tr> <th> Location: </th> <td> <a href="http://maps.google.co.uk/maps?f=q&hl=en&geocode=&q=university+of+london+observatory&sll=51.613646,-0.241528&sspn=0.008954,0.01987&ie=UTF8&t=h&om=1&z=16&iwloc=A"> Map</a><br /> <br /> <a href="/find-us/"> Travelling to UCLO</a><br /> <br /> </td> </tr> <tr> <th> Staff: </th> <td> <a href="/contact/staff-dir/"> Staff Profiles </a> </td> </tr> </tbody> </table>
Listing of archives held at Gospel Oak (boxes ULO-57 to ULO-84), compiled in March 2007.
Item | Volume and Number | Date | Notes, Comments, Authors, Ref. No. |
---|---|---|---|
Item | Volume and Number | Date | Notes, Comments, Authors, Ref. No. |
Astrophysical Journal | Vols. 428-437 | 20/06/1994 - 20/12/1994 | Missing: Vol. 437 No. 2 Part 2 (20/12/1994) |
Built: | 1901 |
---|---|
Aquired: | 1938 |
Refurbished: | 1994 |
Optics: | Twin Grubb Refractor |
Aperture: | 18" / 24" (450mm / 600mm) |
Focal Length: | 276" (7000mm) |
Detector 24": | EEV 1200 x 800 pixel CCD |
Detector 18": | visual |
Additional Instrumentation: | N/A |
CCD Field of view: | 12.6 x 8.4 arcmin |
Controls: | Manual plus digital slew |
Drive: | Electric stepper motor |
Mount: | German Equatorial |
The code below shows table, image and enclosing div. Note that the CSS style sheet defines both table and image width in per cent, not pixels.
<div class="cb-telescope-info"> <table width="100%" summary="Radcliffe Telescope Specifications" title="Radcliffe Specs" > <caption> Radcliffe Telescope Specifications: </caption> <col width="55%" /> <col width="45%" /> <tbody> <tr> <th> Built: </th> <td> 1901 </td> </tr> <tr> <th> Aquired: </th> <td> 1938 </td> ... <tr> <th> Mount: </th> <td> German Equatorial </td> </tr> </tbody> </table> <a href="/inc/img/placeholder_1024x768.jpg"> <img src="/inc/img/placeholder_300x600.gif" alt="Image of the Radcliffe Telescope, view from East." title="Larger image..." /> </a> <div class="cb-clear-both"> </div> <p> <a href="/telescopes/radcliffe/" title="Go to Radcliffe page..." > More Radcliffe information... </a> </p> </div> <!-- cb-telescope-info -->
<form id="pnf" method="get" action="http://www.google.com/search" > <fieldset> <input type="hidden" name="ie" value="iso-8859-1" /> <input type="hidden" name="oe" value="iso-8859-1" /> <input type="hidden" name="hq" value="inurl:www.ulo.ucl.ac.uk/" /> <input type="hidden" name="filter" value="0" /> <label class="fw-no-display" for="pnf-entry-field"> Enter terms for UCLO site search: </label> <input id="pnf-entry-field" title="Enter search terms here" accesskey="4" type="text" value="UCLO_site_search" alt="Search Google" name="q" size="40" maxlength="255" /> <input id="pnf-search-button" title="Start UCLO site search" type="submit" name="sa" value="Search" /> <label class="fw-no-display" for="pnf-search-button"> Press Enter or click Search Button to start UCLO site search </label> </fieldset> </form>
[End of file /inc/samples_xhtml.inc
.]
UCL Observatory - 553 Watford Way - Mill Hill - London - NW7 2QS
University College London - Gower Street - London - WC1E 6BT
Copyright © UCL Observatory (ULO/UCLO/UCL) 1999-2018