_______ _______ _______ |~~~ | | ~~~ | | ~~~| |~~~~~ | | ~~~~~ | | ~~~~~| |~~~ | | ~~~ | | ~~~| |~~~ | | ~~~ | | ~~~| |~~~~~ | | ~~~~~ | | ~~~~~| |_______| |_______| |_______| |
Formatting |
_______ _______ _______ |~~~ | | ~~~ | | ~~~| |~~~~~ | | ~~~~~ | | ~~~~~| |~~~ | | ~~~ | | ~~~| |~~~ | | ~~~ | | ~~~| |~~~~~ | | ~~~~~ | | ~~~~~| |_______| |_______| |_______| |
HTML (or rather, the browser) interprets anything which isn't a tag, just as text. It also decides that carriage returns (or line breaks) and/or multiple spaces should just turn into one space (see exercise for 'real' html).
Stories are usually divided into chapters and paragraphs.
Chapters usually have a title. The letters in the title are often bigger than the letters in the story, and after the title there is often a bit of empty space before the text begins. Sometimes we have several 'subtitles', like in this web course. Look at the top of this page: first there is the title of the course ('Learning to write a web page'), then the title of the step we are learning about ('Formatting'), and later on in the text there are the smaller subtitles ('Subdividing a text', and 'Chapters', etc.).
Titles are also called headings, which explains the naming of HTML headings; there is <h1>, <h2>, <h3>, <h4>, <h5> and <h6>, getting smaller and smaller. h1 is what I used for the title 'Learning to write a web page', and then smaller and smaller for subtitles and subs-of-subtitles etc..
A paragraph of a story is a self-contained part of the story, which starts on a new line, and has a clear end (e.g. by an empty line). In HTML this is done with the paragraph tags: <p> and </p>. 'p' for 'paragraph'; that's easy, isn't it? When you use the paragraph tags, you get a paragraph, separated from the rest of the story by empty lines at the top and the bottom.
A whole paragraph can be put centrally in a window by adding align="center" inside the paragraph tag ("left" and "right" can be used, too).
| Click | here | to see an example of a heading and some paragraphs, in the box below. |
Sometimes, you will want to start on a new line but not start a new paragraph (so you don't want a completely empty line). You can get this with the line break tag: <br />. This is one of the so-called empty tags, which do not have a proper closing tag; they are closed by putting a space and a slash inside the opening tag.
| Click | here | to see an example of how to use a line break, in the box below. |
You can draw lines in your documents with the <hr /> tag. This is an empty tag. The plain tag gives a line across the width of the screen:
A way to get a solid stripe is to use the 'noshade' parameter (or attribute, as it is properly called). <hr noshade="noshade" /> gives:
The horizontal rule can also be given a fixed width, e.g. width="50%" or width="200". The first example gives a rule across half the width of the window, the second a rule of 200 pixels (dots on a computer screen). The rule can also be given thickness with the size attribute, e.g. size="10". Note that the values for a tag attribute always have double quotes around them.
| Click | here | to see examples of the described horizontal rules, in the box below. |
It is possible to display a piece of text exactly as you have typed it into your web page, including empty spaces (line breaks etc.). This may be useful if you are including a poem with short lines, for instance. It is done with the <pre> and </pre> tags. These are the ones I have used in the exercises in the previous steps of this course. It is commonly displayed with a different letter type (see font), which makes it look like it was typed in on a type-writer. So it really stands out in your page.
It is also possible to change a small piece of text into this 'type-written' style by enclosing it within the <tt> and </tt> tags (tt stands for 'tele-type', a term to do with old telex machines).
| Click | here | to see examples of preformatted and typed text, in the box below. |
Similarly to preformatted text, you can make a quote (something somebody said, or something else, usually more than one sentence) stand out from the rest of the text by enclosing it within <blockquote> and </blockquote>. A blockquote has the same letters as the rest of the text, but has a larger margin on the left.
| Click | here | to see an example of a blockquote, in the box below. |
Once you get the hang of writing web pages, your product will get longer and longer, bigger and bigger. When you make something which is longer than the size of a browser window, you will get a scroll bar on the right-hand side, which you can drag up and down your page to show the parts which don't fit in directly. Also, when you include pictures (and some other things) which may be wider than the browser window, you get a scroll bar at the bottom of the window.
At some point, you may decide that it would be better to completely divide your product over more than one page. Making smaller pages will feel logical (you may have different chapters of a book in separate pages, for instance), and a separate, smaller, page will not take as long to load in the browser. Nice for your readers!
Once you have decided to subdivide your web page into more pages, you may (or will!) have to jump from one page to the next (and back again). For this, you use hyperlinks, which are described elsewhere.
What do we need? HTML and the .html file Tags Formatting Head and body
Size and shape Colour Colour table Colour wheels Pictures
Special characters Special characters table Hyperlinks Combining and nesting tags Lists
Tables Frames Style sheets Maps Forms Scripts Publicising (meta tags) Bits and pieces
| Course created by Maria Turkenburg | TurkenburkiePower!!!©2001-2005 |