Writing and formating text

School of Geography, University of Leeds


Any text you want to display, you place between the <BODY></BODY> tags of your html file.

Web browsers don't pay any attention to the layout of text as you type it in the file.
(check out the source code of this page!).

Browsers format the layout so that the text wraps onto a new line at the edge of their windows. The tags were originally designed to give the browsing person control over what the content looked like. Being academics, the originators of the html were more interested in content than controlling display. This situation is getting better now, but we can still leave the browser to work out positioning if we want.

You can force formatting when you need to.

There will be times when you want drop to a new line, or put the text in a bold font etc. This you do using tags. The basic tags you'll want are...

<BR> Breaks the text, and drops the next text to a new line.
<P></P> Goes round a new paragraph, leaving a blank line above and below it.
<I></I> Puts the text between the tags in italics
<B></B> Puts the text between the tags in bold
<HR> Puts a horizontal line across the screen.

Notice that the break, line, and paragraph tags don't need closing, but it is now good practice to close paragraph tags.


You can make text headings...

The browser decides what size headings should be and how much space to put around them, for example...

<H4>Heading size 5 </H4>

<H4>Heading size 4 </H4>


<H3>Heading size 3 </H3>


<H2>Heading size 2 </H2>


<H1>Heading size 1 </H1>


Note that different browsers will give text different sizes. Compare this page in Firefox and Internet Explorer, for example. You should always check your pages with both these popular browsers to make sure they work for both.


You can control fonts...

The <FONT></FONT> tag also allows you to choose the relative size, style, and color (US spelling) of your text. However, this is no longer standard practice. Don't use it unless you really have to, because sooner or later it won't work. It's just mentioned here as you are likely to see it. If you want to format text, you should now use Stylesheets, which we'll come on to later.

<FONT size = +0 color = red face = arial> Red </FONT>

<FONT size = +1 color = lime> Lime </FONT>

<FONT size = +2 color = cyan face = serif> Cyan </FONT>

Note that, as with most tags, the main part of the tags are in upper case, while the subsequent attributes are lower case.

You can also pick from Black, Navy, Silver, Gray, Olive, White, Yellow, Maroon, Blue, Green, Purple, Teal, Fuchsia, and Aqua, or you can get a graphics package that supplys you with the red-blue-green levels for any colour in hexadecimal codes (for example, <FONT color=#FF0066> : don't worry if you don't get this, you can find a list of codes for most colours here).


You can setup lists...

You use the <UL></UL> tags to start and end lists and the <LI></LI> tags around each item

<UL>
<LI>Item</LI>
<LI>Item</LI>
</UL>

Gives you...

or <OL></OL> instead of the UL tags for 'ordered' (numbered) lists.


You can put symbols like > into the text...

Obviously if < and > are used in the tags, you can't just put them in if you want a "less than" or "greater than " symbol. There are a set of codes for symbols that might confuse the browser. If you view the source for this page you may see some of them depending how smart your source viewer is (some automatically replace these codes even when viewing the page source). The codes you are most likely to need are...

&#38; or &amp; ampersand
&#62; or &gt; greater than
&#60; or &lt; less than
&#160; or &nbsp; a 'non-breaking space' that doesn't let the line wrap down to the next line at that point

You can find a full list of codes here.

Try experiment with text formatting in your 'index.html', you should have enough information to put together the text part of a homepage.


Go on to producing graphics.

[School of Geography homepage] [Leeds University homepage]