text_formatting.html

---
title: Text Formatting Help
---

<h1>How to style your text</h1> 
<h2>General</h2>

<ul>
<li>To create plain text, just type. You can make a paragraph break by adding a
blank line.</li>
<li>For preformatted text, you can use the <a
href="http://www.htmlhelp.com/reference/html40/block/pre.html">HTML "pre"
tag</a>. You should rarely need this.</li>
<li>For <b>bold</b> text, wrap it with three apostrophes on either side
<code>'''like this'''</code>, or if you wish, use HTML
<code>&lt;b&gt;like this&lt;/b&gt;.</li>

<li>For <i>italic</i> text, wrap it with two apostrophes on either side
<code>''like this''</code>, or if you wish, use HTML
<code>&lt;i&gt;like this&lt;/i&gt;.</li>
<li>To create a block of indented text, start a line with a colon (:).</li>
</ul>
<p>
To create a horizontal line, type 4 or more dash (-) characters, like this:
<code>----</code>

</p>
<h2>Links</h2>
<p>
You can link to a guide page by putting two square brackets around one or more
words <code>&#91;&#91;like this]]</code>. It'll be displayed <a
href="#">like this</a> (although this demo link doesn't go anywhere, while
yours will).
</p>
<p>
If you add a link to a page that hasn't been created yet, it'll appear in
square brackets with a question-mark link [like this]<a href="#">?</a>. You can 
then follow the link to create and edit the page. 
</p>
<p>

You can also give the link a title, which will be displayed instead of the
full name of the page you're linking to. Do this by adding a pipe
symbol (|) after the page name in the link, and then typing your title:
<code>[[like this|test link]]</code>. The resulting link will be displayed
as <a href="#">test link</a>.
</p>
<p>
You can make a link to another site by just typing the web address:
<code>http://london.openguides.org/</code> (which would produce <a
href="http://london.openguides.org/">http://london.openguides.org/</a>). 
If you want, you can give the link a title, like this:
<code>[http://london.openguides.org/ example link]</code>. It would appear
as <a href="http://london.openguides.org/">[example link]</a>.
If a URL contains a pipe character (|) you will need to enter it as

&quot;%7c&quot; instead, since the pipe character has a special meaning in
links (as above).
</p>
<h2>Headings</h2>
<p>
Wrap text in equals (=) signs to make headings.
</p>
<p>
<code>&#61; Heading size 1 =</code><br>
<code>&#61;= Heading size 2 ==</code><br>
<code>&#61;== Heading size 3 ===</code><br>

<code>&#61;=== Heading size 4 ====</code><br>
<code>&#61;==== Heading size 5 =====</code><br>
<code>&#61;===== Heading size 6 ======</code><br>
</p>
<p>
This is what's produced by the above:
</p>
<h1>Heading size 1</h1>
<h2>Heading size 2</h2>
<h3>Heading size 3</h3>
<h4>Heading size 4</h4>

<h5>Heading size 5</h5>
<h6>Heading size 6</h6>
<p>
Note the spaces between the equals signs and the actual text of the heading.
Also, if your numbers of equals signs are unbalanced it either won't work or 
won't work like you expected, so be careful.
</p>
<h2>Lists</h2>
<p>
Unordered lists:
</p>
<p>
<code>&#42; First-level unordered list item</code><br>
<code>&#42;&#42; Second-level unordered list item</code>

</p>
<p>
This produces:
</p>
<ul>
  <li>First-level unordered list item
  <ul>
    <li>Second-level unordered list item</li>
  </ul></li>
</ul>
<p>
At present, only one level of nesting is supported. Ordered lists and
definition lists have not been implemented yet.
</p>

<h2>Images</h2>
<p>
To display an image, use HTML's "img" tag, as in the example below. Please
note that the image may need to be stored on a webserver somewhere,
as many OpenGuides sites don't offer photo hosting yet.
</p>
<p>
<code>&lt;img src="http://openguides.org/img/example_image.png"
width="150" height="150" alt="Example Image"&gt;</code>
</p>
<p>
Will produce this:
</p>
<p>
<img src="img/example_image.png" width="150" height="150" alt="Example Image">
</p>
<p>
Whilst specifying the width and height of the image is optional, please make 
sure that you always include the "alt" description text for the image, so that
people reading the site with text-only browsers aren't adversely affected.
If you want the image to "float" on the left or the right of the page, you
can use <a href="http://www.w3.org/Style/CSS/">
<acronym title="Cascading Stylesheets">CSS</acronym></a>, 
but that's too big a topic to get into here.

</p>