Formatting Content

When you add or edit a story, you enter the text into the Body section of the edit page.

If you just type plain text, it will appear on your web page as it is. However, you can also use markup to add features such as bold or italic text, lists, links and images.

The markup is based on HTML. The default input format is Filtered HTML, which we will assume you are using here. There are modules available which allow you to format your pages in different ways (for example, using Wiki style formatting), which are discussed at the end of this article.

If you don't know HTML

HTML uses a simple syntax to format text. It uses tags, which are keywords surrounded by angle brackets. It is easiest to explain with a few examples, below.

Text formatting

If you want to add bold text, use the strong tag, For example if yoy type this into your story body:

This is bold text.

you will get this on your web page:

This is bold text.

The tag indicates the start of the bold text, the tag indicates the end of the bold text. You must always add tags in matching pairs, a start tag and an end tag.

In a similar way, you can use the tag to create italic (emphasised) text:

This is italic text.

gives you:

This is italic text.

There are also lesser used text formatting tags. cite marks up text as a citation (it often appears similar to the em tag on the web page). code displays text is a fixed pitch font (such as Courier), and is useful for displaying code listings, scripts and columns of numbers.

Lists

You can add lists to your pages very easily, using the ul (unordered list, or bulleted list) and li (list item) tags. Try this:

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

and your webpage will show:

Item 1
Item 2
Item 3

Alternatively use ul (ordered list, or numberedlist) and li (list item) tags to give automatic numbering of items. Try this:

<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>

and your webpage will show:

Item 1
Item 2
Item 3

There is also the option of using a definitions list, based on dl, dt and dd tags. Refer to one of the many online HTML tutorials if you are interested in these, but generally they are used less often than the other lists.

Links

You can use HTML anchor tags to create hyperlinks. For example

Click <a href="http://www.cookiewiki.com">here</a> for cookiewiki.

Produces:

Click here for cookiewiki.

Hopefully this is fairly clear. The text inside the anchor tags (“here” in this case) is the link text. The href value is the URL the text links to (in this case the cookiewiki URL). This must be a valid URL, and it must be enclosed in quotes.

If you already know HTML

If you know HTML none of the above should be news to you. Basically, within the body of your article you should enter a valid HTML fragment, ie something which could legally be included as is inside div block.

Your HTML options will be limited to the tags discussed above (they are listed in the description of the Filtered HTML input format in the edit page).

Other features of Filtered HTML

A few other things happen behind the scenes when you use this input format.

Anything which Drupal recognises as a URL or email address is automatically converted to a hyperlink. This means that www.cookiewiki.com becomes a hyperlink just by typing it in.
Line breaks are converted to br tags, paragraph breaks are converted to p tags. In other words, it will generate HTML which shows your lines and paragraphs as you expect (much the same as any wiki, blog or forum system you can think of).
“Dangerous” features like Javascript or embedded PHP are removed.
Trailing tags are ignored, so if the body opens up a bold section and fails to close it, it won't make the rest of your page appear in bold text.

Full HTML mode

In the Input format of the content editor, you can select Full HTML as an alternative to Filtered HTML. This allows you to use all HTML tags. Apart from that, it is identical to Filtered HTML.

To use this mode, you do need to understand a bit about HTML, and we aren't going to try to teach you that in the next couple of paragraphs! If you are interested in using more advanced HTML formatting, there are many excellent tutorials on the web.

The main reasons you might want to use full HTML mode are:

To use headings in your content. Filtered HTML doesn't allow h1, h2 etc tags, full HTML does. You should note that the page title uses h1, so you should use h2 as your first level of subheadings, h3 as the next level.
To use HTML tables.
To include images, using the img tag. In order to display images, obviously, you must upload the image to your web space. If you create a folder called for example “myimages” at the top level of your webspace, you would then locate your images using “/myimages/image1.png” or similar in the img tag.

Full HTML gives people slightly more opportunities to mess up, though it still excludes javascript and PHP code to avoid malicious script exploits. If your users (or even you) are not competent and trusted HTML coders, it should not be used. By default it is permitted for the administrator but not for any other users.

Other markup methods

There are alternative methods of marking up pages which might be preferable. These are generally contributed modules, which need to be downloaded from drupal.com and installed on your Drupal site. Look for Filters/editors in the contributed modules area.

One example is the Texy! filter. After installing the module, Texy! format becomes available as a format. This allows similar sort of markup to the HTML filter, but with a different syntax which some users mighty find more intuitive.

With this filter for example, text enclosed by **double asterisks** is marked up as bold.

Underlined text
*************

is marked up as a section heading, etc

This can be quicker to type, and more intuitive for anyone who doesn't already know HTML. Texy! is just one of many available filters. There are also several WYSIWIG editors around which allow you to enter text using a word processor style edit box.

It is really just a case of trying some of the available options and deciding which you prefer for your site.