Basic HTML Cheat Sheet for Joomla Users
- Introduction - Why would I need to edit HTML, avoiding HTML was why I chose Joomla - is there an easier option?
- How to View Source Code in Joomla
- Tables in a Mess
- All the text has gone big
- Problems Pasting From MS Word in Joomla, Wordpress or Drupal
- Multiple Spaces getting Deleted- JCE / Joomla
- Can't insert Cursor Before/After an Image, a Table or a List
- Bold Italic Underline
- Paragraphs v. Line Breaks
- Linking to other pages
- Inline CSS... Style=""
- Margins & Padding on images
- Align (Float) Making Text Flow Around Images
- Making Text Start Again Below an Image
- Lists (bullets & numbers)
- More resources for HTML & CSS
Content Management Systems, like Joomla, allow site administrators to maintain websites without knowing HTML & CSS, but this doesn't change the fact that websites are all still based on HTML & CSS and subject to all of the quirks and challenges they present. No CMS will give you an environment as easy to use and as bullet proof as MS Word without severely sacrificing power and flexibility (since the minute they let you do stuff, they also let you break stuff).
Joomla currently sits at the sweet spot between ease of use versus power and flexibility, which is why it is the most popular CMS in use today. WordPress is a great alternative for those wanting something simpler but less flexible, or Drupal is a great alternative for those with a web development background wanting something more powerful.
If you're new to working with websites, try to stick with the basics unless you're keen to learn HTML & CSS in depth. Joomla can give people a false sense of confidence that "It's just like using Word". Whilst Joomla makes simple things like editing text and inserting images quite easy, it won't be long before you discover that more advanced tasks (or even trouble-shooting simple things) are more like programming than using the sorts of software that most people are used to.
The content below is for those who are happy to stick to the basics, but who are keen to try and fix the most simple and common HTML problems themselves, and there are some links at the end to more advanced resources.
Caution: when working in source code, copy it into a raw text editor first (like notepad) as a temporary backup, since a single mistake can break the whole page.
Common Problems in Joomla, Wordpress, Drupal or other CMSs
- Nested tables, merged cells, or adjacent tables becoming a complete mess.
Solution: start again. Whilst this may sound flippant, it is often the easiest solution since text editors in content management systems aren't really designed for formatting complex nested tables (tables inside tables) and it's easy to end up with a bit of a mess. They often can't be repaired without delving into the source code which can get quite confusing even for experienced coders unless you're using a tool that formats code in an easy to read hierarchy. (which most Joomla editors don't do).
Whilst it is a good rule of thumb to never paste from MS Word, complex tables can be an exception PROVIDED you use the "Paste From Word" button on the toolbar in JCE (if you use TinyMCE as your text editor instead of JCE then you may not have this button. It looks like a clipboard with the MS Word "W" logo on it). If you have dreamweaver this is much better than Word for formatting complex tables, and you will be able to paste directly from Dreamweaver without problems.
The Paste From Word button strips out the worst of the MS Word styling code (which was never designed to work in websites). If you accidentally paste content from Word without using this button, you will probably get a page that has ongoing technical glitches and formatting problems.
- All the text has gone big (or just some of it).
Cause: The text has accidentally gone inside a heading style tag. Refer to the section on headings below, and you'll find that a heading tag is wrapping around all of the big text. Solution 1: If it's just a small section, just select it and choose "paragraph" from the styling drop down box in the tool bar. Solution 2: If it affects the whole page, and you don't want to reset the whole lot using the first method, then you'll need to look at the code. Move the closing tag (eg </h2> back to the location where the heading should end (or delete BOTH the opening and matching closing heading tags, and reapply using the toolbars just to the bit you want formatted.
Another common cause of this is where your whole page is a single paragraph. This commonly occurs when pasting large blocks of text from other locations, and the blocks of text that look like paragraphs are in fact just separated by 2 line breaks in a row rather than paragraph tags. This is fine and the fix takes about 10 seconds, & it's not related to any of the "paste from word" type problems where you've accidentally pasted incompatible styling code.
Then when you change a paragraph style (eg into a heading), it changes the whole page instead of just the 'paragraph' that you wanted to change, because the whole page is a single paragraph.
The solution is to go to the start of each block of text and simply press enter, this will change them into true separate paragraphs. (Alternatively you can insert <p> (paragraph) tags manully into the source code: refer to the section below on paragraph tags.
- Page has become completely glitchy and unpredictable when trying to format it. Problems Caused by Pasting Formatted Content (eg MS Word)
If you're page is behaving erratically and formatting never applies properly, you've probably pasted formatted content from another formatted location (eg another website with different stylesheets or from MS Word). The styling code from the original location is messing up the styling code from your site. Look at the source code & if you see a stack of styling code (eg things like generator = word, or mso.normal & things like that, then that's what came across when you pasted from Word.
Copy / paste the whole lot into a raw text editor (one that doesn't allow any formatting - like notepad),
Then "select all" in joomla & delete it.
Then paste back in from Notepad (or other raw text editor),
Re apply your formatting manually.
- More than 1 space in a row getting turned into a single space.
Solution: See the "Extra Spaces" topic below.
- Can't get the cursor to go before or after an image, a list or a table.
Solution, go into the code and insert an empty paragraph <p></p> or a linebreak <br /> (see relevant sections below), and then you'll be able to get the cursor into the desired position.
Another potential cause might be that you have a table or image aligned (floated) left or right, in which case the next character would naturally appear beside the item (if there's space available) rather than below it. To fix this, go into the source code and type <br clear="all" /> after the item, so that anything after that point sits below the item not beside it.
Common HTML Tags Explained. Absolute Beginners Guide for Joomla Users
<span style="text-decoration: underline;">Underline</span>
<span style=""> is a general way of putting any css styling inline into text </span>
The old <b></b> <u></u> <i></i> tags will still work even though they've technically been dropped.
HTML source code ignores all whitespace (ie more than 1 space in a row, or linebreaks in source code view to allow you to format source code in an easy to read way.
To put more than one space in a row, use the html code for a non-breaking space which is "& n b s p;" (goes in the source code & without spaces between each character like I've done here)
Most editors are designed to get around this problem. In JCE, if it is stripping out even manually inserted extra non breaking spaces, Go to Components >> JCE >> configuration >> encoding (change it from utf to named).
<p>Paragraphs live inside tags like this</p>
Text doesn't need to live in paragraphs, and paragraphs typically have an extra margin above and below them compared to text that's not wrapped in paragraph tags. This is handy to know where you have 3 seemingly identical blocks of text say in a table, but one of them sits lower than others - because it is in a paragraph and the others aren't. Simply remove the tags and it will look like the others.
Most html tags follow the pattern: <start of tag> content here </end of tag>. Note the / (divided by) symbol at the start of the closing tag.
<br /> is a line break (Press Shift+Enter to insert one). It doesn't need a separate closing tag (technically you could write it as <br></br> but a single self closing tag like you see at the start of this line is sufficient. Words after a BR tag are technically in the same paragraph (or heading) which is important to know when applying any styling that affects whole paragraphs, or headings. Line breaks have a shorter gap than new paragraphs.
Example: in the "Common Problems" bullet points above, there is a <br /> tag at the end of each bold line (rather than pressing "enter" which would have created a new bullet)
Shift+Enter will create a <br /> line break
<br clear="all" /> is a line break with a "clear" command, that lets you start typing again on a new line below an aligned image. If the image is aligned left or right (which normally causes text to flow around the image) then this lets you put text below the image, without having to type a bunch of new paragraphs (which would sometimes result in different results on different sized monitors.)
<a href="/index.php?option=com_content&view=article&id=1&Itemid=1" target="_blank">Words or Image to be Linked Go Here</a>
- a stands for Anchor (link), note the closing tag at the end of the linked text (called anchor text).
- href stands for the "hypertext reference" (the destination page) It will start with http:// if linking to an external site. Note the quote marks.
- target="_blank" only needed if you want the destination page to open in a new window or tab.
Linking to Joomla Pages, or linking directly to articles
Example: index.php?option=com_content&view=article&id=51&Itemid=99 is the most common type of Joomla link.
In this example:
51 is the article ID of the article you wish to link to (see far right column in list of articles under Content: article Manager to see the article ID of each article.)
99 is the menu item ID (the ID of the menu link that creates the page) You can delete the whole blue section if you need to link to an article that doesn't have a corresponding menu item. This Itemid=## section only controls which modules or template get used on the resulting page. The article that gets shown (or other content) is solely determined by the preceeding parts of the link (so you can manipulate the Itemid= part of a link to invoke different modules that appear on another page you want to mimic.
Style="styling rules go here" allows you to insert CSS inline into most html tags (as opposed to putting it in a separate stylesheet). The border & margin properties in the images example below server as a good demonstration and the syntax is explained in the 5th bullet point below as it would be used inside an image tag, but you can insert this inside the opening tags of paragraphs, divs, images, span, links, tables, lists, headings etc...
Use span to insert CSS styling into a single word, or string of words that don't form a whole paragraph.
The links at the end of this document point to some more cheat sheets on html & CSS.
<img style="margin: 0px 9px 9px 0px; border: 1px solid #b7b7b7;" alt="Image Description Here" height="300" width="400" align="left" src="/images/stories/03.jpg" />
Like line breaks, image tags are self closing with the "/" sign simply placed at the end of the first (and only) set of < > brackets
Parts of an image tag style=""
- img: says an image starts here
- margin: spacing in pixels (on the outside of the image border) that pushes other content away from the image. The four different margins (in this case 0px, 9px, 9px, 0px) are clockwise from top: (Top, Right, Bottom, Left)
Note: you will sometimes see less than 4 margin dimensions:
If theres only 1: then it's for ALL SIDES
If there's 2: then the first is TOP+BOTTOM, 2nd is LEFT+RIGHT
If there's 3: then the first is TOP, 2nd is LEFT+RIGHT, 3rd is BOTTOM
- Padding follows the same syntax as margins, but padding refers to the spacing on the inside of the border.
- alt: a way of telling search engines and people who use screen readers what the image is.
- Style="Css-Property1: Attributes; CSS-Property2: attributes; etc..." (CSS-Property1 & Attributes etc are hypothetical examples and should be replaced with real CSS properties & attributes like border, padding, margin, color etc...)
Style="" allows you to insert CSS rules inline into the code. Each rule starts with a property (eg margin, or border etc..) followed by a colon, followed by the attributes, followed by a semicolon, then the next property.
- Height & Width: in pixels. Not strictly necessary if the image is presented in it's original dimensions, but can be used to scale the presentation of images on the fly (ie to display it on the page in different dimensions to the true dimensions of the file), but still helpful even if using the true file dimensions as it helps the page layout to display correctly, by loading correctly sized image place holders, in place of the images, in the short space of time before all images have loaded. Eg for users on dialup, if none of your images have dimensions included in the HTML, then the layout of the page will jump all over the place as each image loads.
- Align: Aligning an image left or right will make the text flow around an image. Otherwise the image behaves as if it were a single, very tall, letter or character in the flow of text.
- src: the relative path to the image file (relative to the location of the file that creates the page). If you want to type the full www address path of the image, be sure to include http://
Heading styling will be different for each site. Below are the 6 HTML heading styles for this site (the tags are all the same, but the visual appearance will be different). <h1> is the biggest at the top of your heading hierarchy, right down to <h6> which is the smallest level subheading.
Search engines take a lot more notice of true HTML headings like these, but don't try and trick search engines by putting lots H1 headings on a single page, or putting whole paragraphs into headings or Google may treat the page as "search engine spam" and penalise your rankings.
<h1>Heading level 1 Style</h1>
<h2>Heading level 2 Style</h2>
<h3>Heading level 3 Style</h3>
<h4>Heading level 4 Style</h4>
<h5>Heading level 5 Style</h5>
<h6>Heading level 6 Style</h6>
Anything you want to appear in a grid (images or text) will need to go in tables (unless you understand divs & css).
See comment above about paragraphs having different spacing to normal body text. This is a common issue with tables, where some text is in paragraphs (inside the table) and other bits of text aren't, and the paragraph text sits lower than equivalent text in other columns.
Table coding can get very messy, avoid trying to format complex tables in Joomla if you can, or just try and rely on the formatting options built into the toolbar buttons in the editor (the JCE editor is much better than the default TinyMCE editor in this department), but understanding the code can get you out of a few problems.
|<table border="0" style="width: 100%;">||Tables start with a <table> tag
Widths can be in Percent or pixels, and can be applied to the whole table or individual td cells.
|<tbody>||Followed by a <tbody>tag|
New row: <tr> (stands for "Table Row"
Vertical Alignment can only be applied to rows or cells, not the whole table.
|<td style="width: 45px;">Words in top left cell go here</td>||New Cell <td></td> (stands for "table data")|
|<td>Words in top right cell go here</td>||New Cell <td></td>|
|</tr>||End of row </tr>|
|<tr valign="top">||New row: <tr>|
|<td>Words in bottom left cell go here</td>||New Cell <td></td>|
|<td>Words in bottom right cell go here</td>||New Cell <td></td>|
|</tr>||End of row </tr>|
|</tbody>||End of Table Body|
|</table>||End of Table|
- Point 1 goes Here
- Point 2 goes Here
- Point 3 goes Here
|<ul>||Start Unordered List|
|<li>Point 1 goes Here</li>||List item 1|
|<li>Point 2 goes Here</li>||List item 2|
|<li>Point 3 goes Here</li>||List item 3|
|</ul>||End Unordered list|
Numbered (ordered) lists <ol>
- Point 1 goes Here
- Point 2 goes Here
- Point 3 goes Here
Would use the same code as the first example but you'd substitute <ol> ... </ol> (ordered list) for <ul> ... </ul>