menu

HTML Guide

Useful HTML elements

Paragraphs

The most basic element is the paragraph, as follows:

<p>Some text in the paragraph.</p>

Paragraphs have an opening tag <p> and a closing tag </p>. Note the forward slash in front of the letter p in the closing tag.

la.plume micro CMS auto-inserts paragraph opening and closing tags whenever a blank line is entered between two sections of text.

Headings (or headers)

HTML provides six levels of headings (in order of importance):

<h1>Header 1 tags</h1>
<h2>Header 2 tags</h2>
<h3>Header 3 tags</h3>
<h4>Header 4 tags</h4>
<h5>Header 5 tags</h5>
<h6>Header 6 tags</h6>

As with paragraphs, headings have an opening tag <h1> and a closing tag </h1>. Preferably, a web page would contain only one h1 heading to define its topic, but lower level headings can be repeated for sections and sub-sections of content. See the different headings  »

la.plume micro CMS auto-inserts an h1 heading when a page is created - the second line entered into the "Content" box.

HTML elements are often used in combination, but not paragraphs and headings. A paragraph is a paragraph and a heading a heading. Don't put a heading inside a paragraph (or vice versa). The following - a heading inside a paragraph - is not valid:

<p>Paragraph text <h2>Heading</h2> more paragraph text.</p>
Lists

HTML authors often use unordered lists to create, for example, a series of bullet points. The following markup will create a list:

<ul>
<li>Oranges originated in south east Asia.</li>
<li>The lemon is a hybrid in cultivated plants.</li>
<li>Banana plants are of the family Musaceae.</li>
<li>The apple is the fruit of the apple tree.</li>
<li>Cultivation of pears extends to antiquity.</li>
</ul>
Add a link to an internal page
<a href="./my-page">my link text</a>

Add the above HTML code into the page, substituting your page name for "my-page" and the required link text for "my link text". Always use the leading dot as shown in the example.

Add a link to an external page
<a href="https://www.example.com/">link text</a>

Add the above HTML code into the page, substituting the real page address for "https://www.example.com/" and the required link text for "link text".

Images

Images should normally be in the img folder. Add an image with:

<img src="img/imagename.jpg" alt="">

The maximum width of an image is 640 pixels or 860 pixels depending whether the wide page option is selected.

Images can be given borders or 'floated' left within the text. The stylesheet already provides two options for styling images: add border and float left (or both together).

To add a border to an image:

<img src="img/imagename.jpg" alt="" class="border">

To float an image to the left so that text wraps around it:

<img src="img/imagename.jpg" alt="" class="left">

To do both at once:

<img src="img/imagename.jpg" alt="" class="left border">
To add a horizontal rule (line)
<hr>

Add the above HTML code into the page, leaving an empty line above and below.

Styling text with HTML

HTML includes a range of tags that are used to format text in various ways:

<i>italic text</i>
<em>emphasised text</em>
<strong>bold text</strong>
<b>bold text</b>
<small>small text</small>
<big>big text</big>
<strike>strike text</strike>
<u>underlined text</u>
<span>styled text</span>

These tags can be used in combination, provided they are 'nested' correctly:

<i><strong>italic bold text</strong></i>

The appearance of text enclosed by such tags can be controlled in the stylesheet, according to how each is styled. The green text on this page is produced with:

<span>span tags</span>
<span><strong>span and strong tags</strong></span>

Page structure (layout)

The primary means of achieving a design layout for a web page is with the div element, which has an opening tag <div> and a closing tag </div>. A div is a rectangle of space on the page, often referred to as a 'box', into which content is entered. By using divs in combination and putting divs inside other divs, complex page layouts can be achieved.

A div should not be put inside a paragraph or heading, or any of the 'styling' tags listed above, but it can be put inside a list.

To make a "box" like the one above the HTML markup is:

<div class="box">
Some text in the div.
</div>
Validate your HTML

Check for markup errors by entering your page's web address into the W3C Markup Validator.

Foreign characters

The default font for the public pages is Open Sans, a (free) Google web font. Latin and Latin Extended characters are supported. To use the full range of Cyrillic, Cyrillic Extended, Greek, or Greek Extended characters you may need to edit the first line of the stylesheets to include additional sets.


More information about HTML at w3schools.com »

Downloads since Sept 2011: 18,224