source: website-new/preview/text_formatting.shtml @ 1184

Last change on this file since 1184 was 1182, checked in by Dominic Hargreaves, 13 years ago

.html -> .shtml so we don't XBitHack (link updating in next commit)

File size: 5.1 KB
Line 
1<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
2<html lang="en-gb">
3<head>
4          <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5          <title>OpenGuides - Text Formatting Help</title>
6          <link rel="stylesheet" type="text/css" href="css/openguides.css">
7          <link rel="stylesheet" media="all" type="text/css" href="css/dropdown.css">
8               
9                <!--[if lte IE 6]>
10                <link rel="stylesheet" media="all" type="text/css" href="css/dropdown_ie.css">
11                <![endif]-->
12
13</head>
14<body>
15
16        <!--#include virtual="includes/header.inc" -->
17
18        <!--#include virtual="includes/sidebar.shtml" -->
19 
20       
21        <div style="text-align: center"> 
22                <div id="main_text">
23                         <!-- ENTER SOME CONTENT!-->
24                         
25                         
26<h1>How to style your text</h1> 
27<h2>General</h2>
28
29<ul>
30<li>To create plain text, just type. You can make a paragraph break by adding a
31blank line.</li>
32<li>For preformatted text, you can use the <a
33href="http://www.htmlhelp.com/reference/html40/block/pre.html">HTML "pre"
34tag</a>. You should rarely need this.</li>
35<li>For <b>bold</b> text, wrap it with three apostrophes on either side
36<code>'''like this'''</code>, or if you wish, use HTML
37<code>&lt;b&gt;like this&lt;/b&gt;.</li>
38
39<li>For <i>italic</i> text, wrap it with two apostrophes on either side
40<code>''like this''</code>, or if you wish, use HTML
41<code>&lt;i&gt;like this&lt;/i&gt;.</li>
42<li>To create a block of indented text, start a line with a colon (:).</li>
43</ul>
44<p>
45To create a horizontal line, type 4 or more dash (-) characters, like this:
46<code>----</code>
47
48</p>
49<h2>Links</h2>
50<p>
51You can link to a guide page by putting two square brackets around one or more
52words <code>&#91;&#91;like this]]</code>. It'll be displayed <a
53href="#">like this</a> (although this demo link doesn't go anywhere, while
54yours will).
55</p>
56<p>
57If you add a link to a page that hasn't been created yet, it'll appear in
58square brackets with a question-mark link [like this]<a href="#">?</a>. You can
59then follow the link to create and edit the page.
60</p>
61<p>
62
63You can also give the link a title, which will be displayed instead of the
64full name of the page you're linking to. Do this by adding a pipe
65symbol (|) after the page name in the link, and then typing your title:
66<code>[[like this|test link]]</code>. The resulting link will be displayed
67as <a href="#">test link</a>.
68</p>
69<p>
70You can make a link to another site by just typing the web address:
71<code>http://london.openguides.org/</code> (which would produce <a
72href="http://london.openguides.org/">http://london.openguides.org/</a>).
73If you want, you can give the link a title, like this:
74<code>[http://london.openguides.org/ example link]</code>. It would appear
75as <a href="http://london.openguides.org/">[example link]</a>.
76If a URL contains a pipe character (|) you will need to enter it as
77
78&quot;%7c&quot; instead, since the pipe character has a special meaning in
79links (as above).
80</p>
81<h2>Headings</h2>
82<p>
83Wrap text in equals (=) signs to make headings.
84</p>
85<p>
86<code>&#61; Heading size 1 =</code><br>
87<code>&#61;= Heading size 2 ==</code><br>
88<code>&#61;== Heading size 3 ===</code><br>
89
90<code>&#61;=== Heading size 4 ====</code><br>
91<code>&#61;==== Heading size 5 =====</code><br>
92<code>&#61;===== Heading size 6 ======</code><br>
93</p>
94<p>
95This is what's produced by the above:
96</p>
97<h1>Heading size 1</h1>
98<h2>Heading size 2</h2>
99<h3>Heading size 3</h3>
100<h4>Heading size 4</h4>
101
102<h5>Heading size 5</h5>
103<h6>Heading size 6</h6>
104<p>
105Note the spaces between the equals signs and the actual text of the heading.
106Also, if your numbers of equals signs are unbalanced it either won't work or
107won't work like you expected, so be careful.
108</p>
109<h2>Lists</h2>
110<p>
111Unordered lists:
112</p>
113<p>
114<code>&#42; First-level unordered list item</code><br>
115<code>&#42;&#42; Second-level unordered list item</code>
116
117</p>
118<p>
119This produces:
120</p>
121<ul>
122  <li>First-level unordered list item
123  <ul>
124    <li>Second-level unordered list item</li>
125  </ul></li>
126</ul>
127<p>
128At present, only one level of nesting is supported. Ordered lists and
129definition lists have not been implemented yet.
130</p>
131
132<h2>Images</h2>
133<p>
134To display an image, use HTML's "img" tag, as in the example below. Please
135note that the image may need to be stored on a webserver somewhere,
136as many OpenGuides sites don't offer photo hosting yet.
137</p>
138<p>
139<code>&lt;img src="http://openguides.org/img/example_image.png"
140width="150" height="150" alt="Example Image"&gt;</code>
141</p>
142<p>
143Will produce this:
144</p>
145<p>
146<img src="img/example_image.png" width="150" height="150" alt="Example Image">
147</p>
148<p>
149Whilst specifying the width and height of the image is optional, please make
150sure that you always include the "alt" description text for the image, so that
151people reading the site with text-only browsers aren't adversely affected.
152If you want the image to "float" on the left or the right of the page, you
153can use <a href="http://www.w3.org/Style/CSS/">
154<acronym title="Cascading Stylesheets">CSS</acronym></a>,
155but that's too big a topic to get into here.
156
157</p>                     
158
159
160                         
161                         <!-- OK YOU CAN STOP NOW -->
162                </div>
163        </div>
164<!-- end content -->
165
166                <!--#include virtual="includes/footer.inc" -->
167
168</body>
169</html>
170
Note: See TracBrowser for help on using the repository browser.