HTML Guide
HTML is an abbreviation for Hypertext Markup Language, and is used to format web content for web browsers such as Microsoft Internet Explorer, Firefox, Opera, Safari, and many others. Browsers can display content that contains no HTML - plain text files, for example - but HTML 'markup' provides a way to structure and present your content, and to add images, links to other pages, and a whole variety of other things to improve the user experience.
The basic structure for HTML markup consists of elements, and <tags> are used to write those elements and hide them from view. A web page normally contains two sections: the head and the body. Your web content goes into the body. All pages created with la.plume micro CMS are automatically given a head and body. This guide is concerned only with HTML for use in the body (entered into the "Content" box of the 'backend' admin page).
Useful HTML elements
Paragraphs
The most basic element is the paragraph, as follows:
<p>Some text that is 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.
Note! la.plume micro CMS normally 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.
Note! 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 invalid HTML markup:
<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 produce a fruity 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>
Note! The list element can be used in combination with other elements (or series of elements) that tend to repeat. For example, each item in the list might contain a heading followed by a paragraph or two.
Links to other pages
Links (hyperlinks) can be inserted that open other pages when clicked. As with the other HTML elements described above, they have an opening tag <a> and a closing tag </a>. To link to another page, the opening tag must contain an href attribute, and some anchor text is required between the tags, as in the following examples:
<a href="http://www.example.com/">anchor text</a> <a href="./my-page">my page</a>
The 'anchor text' can be anything you like, or an image instead of text.
Images
The HTML <img> tag (for images) has no closing tag, but it does require an src attribute (short for 'source') pointing to where the image is located. If you're using la.plume micro CMS, the following markup will locate and load an image correctly:
<img src="img/imagename.jpg" alt="">
Of course 'imagename.jpg' must be replaced with the real image filename. The alt attribute (short for 'alternative') must be included, but it can be left empty. It's designed to be an alternative text description for the image and is there for users with text-only browsers, so it's good practice to enter something descriptive, eg:
<img src="img/lewishamilton.jpg" alt="Lewis Hamilton">
Images can be put into paragraphs and lists but not into a heading. To 'float' an image left with text flowing to its right, add the following style:
...image.jpg" style="float:left; margin-right:20px;" alt...
Note! If you're using la.plume micro CMS with the default layout (this one), the maximum width of an image is 640 pixels. A wider image will not fit.
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.
Note! 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.
The layout of this page is achieved with just three divs, named "wrap", "content", and "menu". A fourth div is used to emphasise sections of text inside a bordered box with a pale background. By itself, putting content inside a div does nothing at all. The design is achieved by giving either an id or a class to a div, and then styling the id or class in the stylesheet. For example (in the stylesheet):
#content .box {
clear: left;
margin: 15px 0 15px 0;
padding: 8px 15px 15px 15px;
background: #fff;
border: 1px solid #ddd;
border-radius: 15px;
-moz-box-shadow: inset 0 0 30px 5px #f4f4f4;
-webkit-box-shadow: inset 0 0 30px 5px #f4f4f4;
box-shadow: inset 0 0 30px 5px #f4f4f4;
}
The "content" div begins with a hash # symbol (because there's only one 'content' div in the page, so it's given an id), and the "box" div begins with a dot . (because it occurs several times in the page, so it's given a class).
To include the "box" div in the page, the HTML markup is as follows:
<div class="box"> Some text that is in the div. </div>
For more about stylesheets see the CSS Beginner Tutorial at HTML Dog »
HTML tables
Traditionally, HTML tables have been used to lay out the design of web pages, but this practice is now considered outdated and technically unsound (even though it still works well). From a purist's point of view, an HTML table should be used only for its intended purpose: to present tabular data.
Tables can be used with la.plume micro CMS by entering the appropriate HTML. An example is illustrated in the thumbnail gallery. More about HTML tables: EchoEcho »
Comments
good
I don't know if it's just me or if everybody else experiencing issues with your website. It looks like some of the text within your content are running off the screen. Can someone else please provide feedback and let me know if this is happening to them as well? This might be a problem with my internet browser because I've had this happen previously. Appreciate it
This is not an issue that has ever been reported and I can't think of a reason why it would happen. Most of the text is normal HTML paragraphs. I suppose it's possible that some of the code sections inside <pre> tags might run off if your browser font size is set large.
Patrick
Hi there,
I'm using la.plume 4.2
When I create or edit post, I cannot input the symbol (back slash).
I have to use the HTML code of & # 9 2 ;
Is 6.2 fixed it?
You are better using the HTML code for special characters but I will have a look at this for 6.2.
Patrick
Hello! I like your CMS - is it possible to create subpages - e.g. - html guide 1, html guide 2, etc. and submenu elements? Regards! Kiril
Hello Kiril, and thanks.
I assume you mean a submenu that flies out when you put the cursor over a primary menu item. That is not possible without making the system much more complex. The menu is a single html list. What you could do instead is write a submenu at the top of 'html guide 1', html guide 2' etc. The markup would need to be all on the first line, with no line breaks.
There is a simple version of this idea on the thumbnail gallery pages, eg: here.
Patrick
Comments are not updated. What's wrong?
After adding a comment I get:
"Comment submitted. Please note: comments are pre-moderated. Thank you."
I get an e-mail with the comment but in the admin the comments remain empty.
please help me.
Nothing is wrong. It's exactly as stated: comments are pre-moderated. You receive the email and decide whether or not to publish it with copy and paste then 'Update comments', just as you would publish the pages.