Editing in a page in html
This page provides guidance for BEC staff on adding content using html rather than the WYSIWYG editor in IE6.
The new bectek site follows current best practice and has been written in xhtml, a stricter version of html, in which all content should be placed in appropriate tag containers such as paragraph or lists. So, when you are placing or editing content in the Content Management System (cms) using xhtml, you must make sure that each piece of text you enter in the "body" field is enclosed by suitable tags. (You can relax though about the "title", "menu title" and "summary" fields as these items will be tagged and styled automatically by the page templates.)
(x)html tags work in pairs for all but a couple of exceptions. So to instruct the browser to display a piece of text in a particular way you need to enclose it in opening and closing tags. The closing tag mirrors the opening tag except that it has a forward slash after the opening chevron.
1. The tag pair you will be using most of the time is the <p></p> or paragraph tags which separate paragraphs by one and a half to two lines depending on the browser.
The following code in the "body" field in the cms:
<p>First paragraph of text</p>
<p>Second paragraph of text</p>
Produces this result when the page is published:
First paragraph of text
Second paragraph of text
2. Within a paragraph, if you need to force a single line break - for example to provide address details - you use the exceptional <br /> tag. It's exceptional because it has no closing tag but instead closes itself with a space and a forward slash before the closing chevron.
The following code in the "body" field in the cms:
<p>First line of the address<br />
second line of the address<br />
third line of the address</p>
produces this result when published:
First line of the address
second line of the address
third line of the address
3. You can also use tags for formatting text for effects such as bold <b></b> and italic <i></i>. (In xhtml bold <b> and italic <i> are both deprecated because they are not semantic tags and strong <strong> and emphasis <em> are preferred, but the way you put them in place is exactly the same.) If you want to use both together, then you just nest them logically as you would brackets in algebra.
The following code in the "body" field in the cms:
<p>Here is a passage with some text in just <b>bold</b> and some in both <b><i>bold and italic.</i></b>
produces the following when published:
Here is a passage with some text in just bold and some in both bold and italic.
4. The second most useful tag set after the paragraph is the one for lists. It is just a tad more complicated because it has two elements, the list tags and the nested list item tags. So, with a list you open and close the list tags <ul></ul> and between them place the tagged list items<li></li>. If you want unnumbered lists with bullet disks you use <ul></ul> tags. If instead you want numbered (ordered) lists, open and close with <ol></ol>.
The following code in the "body" field in the cms:
<ul>
<li>first bullet point</li>
<li>second bullet point</li>
<li>third bullet point</li>
</ul>
produces this when the page is published:
- first bullet point
- second bullet point
- third bullet point
6. The table tags work with three components - the table tags <table></table>, enclosing the table row tags <tr></tr> which enclose the table cell (detail) tags <td></td>. In terms of rows and columns for the table, the <tr></tr> pairs provide the rows and the <td></td> pairs provide the columns. If you want a cell to span two columns you need to provide a qualifying parameter for the <td> tag. In the example below the table has two rows and two columns but in the lower row the cell spans both columns. Parameters for tags use "=" for programmers' "is" and the value of the parameter has to be between double inverted commas.
The following code in the "body" field in the cms:
<table>
<tr>
<td>first cell top row</td>
<td>second cell top row</td>
</tr>
<tr>
<td colspan="2">bottom row cell spanning two columns</td>
</tr>
</table>
produces this when the page is published:
| first cell top row |
second cell top row |
| bottom row cell spanning two columns |
7. If you want to insert a link to another site you need to use anchor tags <a></a> around the text link with a hypertext reference - href - parameter which gives the URL information.
The following code in the "body" field in the cms:
<p>This links to the <a href="http://www.inchbaldem.com">Inchbald Early Music</a> site.</p>
produces this when published:
This links to the Inchbald Early Music site.