Kingsford Church of Christ

 To Know Christ And To Make Him Known ABOUT US
Logged in as guest [Log in Register Reset Password]

   

The following is a tutorial to help understand how to write content for pages in this web site. This does not apply to content for comments, just for regular content pages. Much of this text involves examples. In each example, the text that you would type in appears on the left, and what it would look like appears on the right.

If you simply type text, it will be wrapped into a paragraph the full width of the screen.

Here is a long line of text with blank lines in it which are ignored. Any spacing that you use to try to line things up will disappear.
Here is a long line of text

with blank lines in it which are ignored. Any spacing
      that you use to try to line things up
      will disappear.
More often you will want to mark text as being in paragraphs. This is done with <p>

Here is the first paragraph. There are enough words in it so that it will wrap and you can see that it wraps at a different place. Having very long lines can be had to read so paragraphs deliberately wrap on lines of a manageable length.

In this demonstration, the width of a paragraph has been set to be shorter than normal to make the difference more obvious.


<p>
  Here is the first paragraph.  There are enough
  words in it so that it will wrap and you can see
  that it wraps at a different place.  Having very
  long lines can be had to read so paragraphs
  deliberately wrap on lines of a manageable length.
<p>
  In this demonstration, the width of a paragraph
  has been set to be shorter than normal to make
  the difference more obvious.
</p>
Notice that the end of a paragraph is marked either by the start of a new paragraph, or </p>. The pattern of of a tag with a '/' at the front is the normal way for marking the end of a tagged section of text.

Making text bold, italics, emphasised, or underlined can be done with the tags <b>, <i>, <em>, <u>.

This word is bold while this one is set in an italic font. We can ask to emphasise a section of text or underline some of what we write.

These can be combined for bold, italic, underlined text.


<p>
This <b>word</b> is bold while this <i>one</i>
is set in an italic font.  We can ask to
<em>emphasise a section of text</em> or
<u>underline</u> some of what we write.
<p>
These can be combined for <b><i><u>bold,
italic, underlined text</u></i></b>.
The size and colour of text can be changed with the <font> tag. The size is a small number where '3' is normal sized, and 4, 5, 6 etc are successively larger fonts. and 2, 1, 0 are smaller. A colour (which must be spelt 'color') can be given using any common color name.

Normal, size 4 size 5 in red text. Use numbers less than two to shrink your text.

You can even get precise control of colour with if you know the exact colour code that you want.


<p>
Normal, <font size=4>size 4</font>
<font size=5 color=red>size 5 in red</font>
text.  Use numbers <font size=2>less than
two</font> to <font size=1>shrink your
text</font>.
<p>
You can even get precise control of
colour with if you  <font color=#4e6c58>know
the exact colour code</font> that you want.
</p>
Some time you might want text to align to the right, or to be centered. This can be achieved with the 'class' attribute of a normal paragraph (<p>) tag.

This is a right justified paragraph that probably looks funny. but might be useful sometimes.

We have a special class called 'by' which makes a right justified paragraph which appears immediately after the preceding paragraph, so as to provide a 'by line'.

A quotable quote

There are some alive today who deserve death, and other dead today who deserve life. You cannot give one, don't be to hasty in giving the other

-Gandalf, from Tolkein's Lord of the Rings


<p class=right>This is a right justified
paragraph that probably looks funny. but
might be useful sometimes.</p>
<p>
  We have a special class called 'by' which
  makes a right justified paragraph which
  appears immediately after the preceding
  paragraph, so as to provide a 'by line'.

<p class=center><u>A quotable quote</u></p>
<p>
There are some alive today who deserve death,
and other dead today who deserve life.
You cannot give one, don't be to hasty
in giving the other
<p class=by>-<em>Gandalf, from
Tolkein's Lord of the Rings</em><p>
Probably the most common structure for text after the paragraph is the list. HTML allows for 3 sorts of list, know that the unordered list, the ordered list and the definition list. These are enclosed in <ul>, <ol> and <dl> respectively. An unordered list uses bullets to mark each entry. An ordered list uses numbers. And a definiton list allows you to give your own tag for each entry in the list.

With in the first two lists, we use the <li> to identify list items. Just as with paragraphs, The start of a new list item finishes the previous list item.

Some interesting facts about lists.
  • You don't need to close each list time, just start the next one.

  • Though it is possible the change various aspects of the format of a list, it is normally best not to.

    The site will define a style for each sort of list, and if every page on the site simply follows the same style, it will look more uniform.

  • You can have multiple paragraphs in a list item, as the previous list item shows. In fact it is best always to use paragraph tags inside a list to make sure the formatting looks right. The first entry in this list don't have a paragraph tag and looks odd

Some reasons to use numbered lists:

  1. The items follow a specific order.

  2. You want to refer to items by number later in the text

  3. You think digits look nice than bullets.

Actually, point 3 isn't a very good one. You should be thinking about what your audience will like, not what you like.

Some interesting facts about lists.
<ul>
<li>You don't need to close each list time,
    just start the next one.
<li><p>Though it is possible the change various
    aspects of the format of a list, it is
    normally best not to.
    <p>
    The site will define a style for each sort
    of list, and if every page on the site
    simply follows the same
    style, it will look more uniform.
<li><p>You can have multiple paragraphs in a
    list item, as the previous list item shows.
    In fact it is best always to use paragraph
    tags inside a list to make sure the formatting
    looks right.  The first entry in this list
    don't have a paragraph tag and looks odd
</ul>
Some reasons to use numbered lists:
<ol>
<li><p>The items follow a specific order.
<li><p>You want to refer to items by number 
       later in the text
<li><p>You think digits look nice than bullets.
</ol>
Actually, point 3 isn't a very good one.  You should be
thinking about what your audience will like, not what
you like.

Definition lists (sometimes known as description lists) do not use the <li> tag as the list items have to parts, a tag and a definition. So we use <dt> for the tag, and <dd> for the the definition. It is perfectly legal to close each section with e.g. </dd>, but it is not necessary
Unordered list

Also known as a bullet list, every item in the list is tagged the same way.

Ordered list

Like an unordered list, but using numbers (or letters or similar) to differentiate the list items.

Definition list

Allows you to give a word (or other text) for each tag, then content for the item as normal

Sometimes the extra spacing in a DL is not welcome, so we can define a DL to be compact.

Time:
Now.
Place:
Here.
Reason:
Because.
Cost:
Free.
Priority:
High.
Note that if the tag is too long, you don't want to use a compact dl.
Very long tag that is really too long
Information

<dl>
 <dt>Unordered list
      <dd><p>Also known as a bullet list, 
          every item in the list is tagged
          the same way.
 <dt>Ordered list
      <dd><p>Like an unordered list, but
          using numbers (or letters or similar)
          to differentiate the list items.
 <dt>Definition list
      <dd><p>Allows you to give a word (or other
          text) for each tag, then content for
          the item as normal
</dl>
<p>
Sometimes the extra spacing in a DL is not
welcome, so we can define a DL to be compact.
<dl class=compact>
 <dt>Time:<dd>Now.
 <dt>Place:<dd>Here.
 <dt>Reason:<dd>Because.
 <dt>Cost:<dd>Free.
 <dt>Priority:<dd>High.
</dl>
Note that if the tag is too long, you don't 
want to use a compact dl.
<dl class=compact>
  <dt>Very long tag that is really 
     too long<dd>Information
</dl>

If you have uploaded and image file and want it to appear in the page, the easiest thing to do is to use the special <?image()?> tag. It will display the image on the right hand side of the page, and make it a little less than half the width of the available space.

Put the 'image' tag first, then put text after it. The text will appear to the left of the image.


<?image()?>
<p>
Put the 'image' tag first, then put text
after it.  The text will appear to the
left of the image.

If you have multiple images then each <?image()?> will display a different image, however you cannot be sure what order they will appear in. To select a specific image, you can give its name.

This will display the image called NamePlate.jpg. Note that as we asked for the image after entering some text, that text is not to the left of the image.

This will display the image called
<b>NamePlate.jpg</b>.
<? image("NamePlate.jpg")?>
Note that as we asked for the image
<b>after</b> entering some text, that
text is not to the left of the image.
  

Latest Updates
The Torch
Upcoming Events
Recent News
All content copyright and available under a Creative Commons Attribution-Noncommercial-Share Alike 2.5 Australia License unless otherwise stated.