Visual editors, such as the one that comes with Plone, make creating webpages a whole lot simpler than having to learn the ways of HTML. Still, some basic knowledge of HTML can really be a boon when trying to get your page layout to look just the way you want it to.

Basics of HTML

HTML uses what are called tags to give a document its layout and some of its formatting. All HTML tags are denoted by the "greater than" and "less than" symbols, sometimes referred to as "angle brackets". Here are some examples:

<p>This is a paragraph of text</p>

<p>An image can be displayed like this: <img src="../../logo.jpg" /></p>

Notice that text is contained within the HTML tags. You can always tell where a tag ends because you'll see the same tag with a forward slash like this: </p>

You can use the page text to help orient yourself when looking at a large HTML document, as it can be confusing at first with all the tags alongside your page content.

Things to Look For

One of the most common problems in page layouts is that you either have too little or too much spacing between paragraphs or headers. No matter how many times you keep pushing enter or delete or starting over, you still can't get the spacing quite right. Look at the HTML code of the page and be on the lookout for:

• Empty paragraphs - They look like this <p>&nbsp;</p>
• A line break - They look like this <br /> or <br>
• Other troublemakers - <blockquote></blockquote> OR <div></div>

Those are fairly easy to spot when they're all by themselves. Things get a bit more tricky when content you DO want to keep is wrapped inside an HTML tag you didn't intend on. Here's an example:

<div class="portal-content">
<p>Some text I'd like to keep, but for some reason there's some 
extra blank space above this paragraph</p>
</div>

Notice that the paragraph you want to keep is wrapped inside a <div> tag. If you want to get rid of the tag, you must remove both the start <div> and the end </div>. The result would then be:

<p>Some text I'd like to keep, but for some reason 
there's some extra blank space above this paragraph</p>

Signal-to-Noise

Most of the examples above have been very simple. A page with many elements (i.e. lots of formatting) will look much more confusing at first. One reason is that many of the tags will contain attributes, which basically add to the amount of characters you must scan over to find the part of the document you're trying to troubleshoot. For the most part, you can ignore those tag attributes (unless you know some things about them and how Plone uses them).

Attributes look like this:

<p class="align-left">Some text here with an image next to it
<img src="../../logo.jpg" alt="Our Logo" class="image-inline" id="news-item" /> 
</p>

Most browsers support text searching, which can be a convenient way of find the part of the page you're trying to edit. I use the keyboard shortcut: crtl+f to initiate a search.

A List of Common HTML Tags

Below is a list of common tags you're likely to encounter when troubleshooting a page in Plone:

• <p> Beginning of a paragraph
• </p> End of a paragraph
• <br /> or <br> A line break
• <strong> or <b> Start of bold text
• </strong> or </b> end of bold text
  
• <h2> A heading
• </h2> End of a heading
• <h3> A subheading
• </h3> End of a subheading
• <a> Beginning of a link, usually with tag attributes like this: <a href="http://www.site.org">
• </a> End of a link
  
• <img> An image, usually with tag attributes like this: <img src="http://www.site.org" class="image-inline" />
• <ul> Beginning of a bulleted list
• <li> An item in a list
• </ul> End of a bulleted list
• <ol> Beginning of a numbered list
• </ol> End of a numbered list