HTML Guide
HTML is the 'markup' language for documents written for web browsers. It describes the structure of a web page but not necessarily its appearance – that is normally done with stylesheets referenced in the HTML documents. HTML consists of <tags> surrounded by angle brackets and is easy to learn.
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.
superMicro CMS automatically inserts paragraph opening and closing tags round a section of text when a blank line exists above and below it. Unless you want a paragraph with a particular CSS class, for example:
<p class="metadata">text</p>
In which case, use the tags. Otherwise there is no need to use any.
Headings (or headers) (view)
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 closing tag </h1>. Preferably, a web page contains only one h1 heading to define the topic. Lower level headings can be repeated for sections or sub-sections of content.
superMicro 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>
For a formatted list use:
<ul class="listing">
<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>
Or an ordered (numbered) list:
<ol> <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> </ol>
Add a link to an internal page
Website on Apache web server:
<a href="./my-page">link text</a>
Website on On Microsoft-IIS (Windows) or NGINX:
<a href="./my-page.php">link text</a>
Add the above HTML code into the page, substituting your page name for "my-page" and the required link text for "link text". Always use the leading dot as shown in the example.
More about internal linking here »
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 be in the img folder. Add an image with:
<img src="img/imagename.jpg" alt="" width="740" height="600"> (number of pixels)
The maximum width of an image is normally 740 pixels (including borders), but see see here for images up to 1200 pixels wide.
Add a horizontal rule (line)
<hr> full width example or <hr class="section"> shorter double line example
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> normally italics <strong>bold text</strong> <b>bold text</b> <strike>strike text</strike> <u>underlined text</u> <span>styled text</span> coloured
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="bg2">
Some text. "bg1", "bg2", "bg3" and "bg4" give different coloured boxes.
</div>
Leave a blank line above and below the text, as above.
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, edit the top of the stylesheets to include more sets.
More information about HTML at TutorialRepublic »
