How to create web pages, part 2

More html tags

On this page, explanations to some html tags are given. The page is not perfect regarding examples etc., but at least it is an attempt at an simple explanation.

html

html pages begins with <html> and ends with </html>, to inform the web browser that the page that is being loaded is an html page.

head, title

Surrounding the title of the page you must have the <head> and the </head> tags. So, to create a title you write this:
<head><title>This is the title of the page</title></head>.

body

To change the background or color of the text on the page the tag <body> is used. It comes directly after the <html> tag or directly after the </title> tag. Right before the html page is ended with the </html> tag, the </body> tag is inserted to terminate the body.

body can tage several arguments. Here are some of them:
background - defines a picture to be used as background on the page. If you have a picture in the directory ~/public_html/pictures/ that you want to use as background, do this:
<body background="~/pictures/background.gif">
bgcolor - defines background color.
text - defines text color.
link - defines link text color.
vlink - defines color of links to visited pages.
alink - defines color of active links.
Example of how it can look:
<body background="~/pictures/picture.gif" bgcolor="#ffffff" text="#000000" link="#00ffff" vlink="#a62a2a" alink="#000000">

br, p

<br> is used to create forced line breaks (newlines), and <p> is used to delimit paragraphs. <p> must be terminated with </p>. Example:

<p> This is a paragraph. I'm inserting newlines using br:<br> Here is a new row. To terminate the paragraph, I use /p: </p>

Becomes:

This is a paragraph. I'm inserting newlines using br:
Here is a new row. To terminate the paragraph, I use /p:

<hr> inserts a horizontal bar, like this:

center

<center> centers everything between <center> and </center>

h1 to h6

<h1> to <h6> sets the size of the text. 1 is the largest, and 6 is the smallest. An example:
<h1>Large text</h1>

becomes:
Large text
As you can see, an newline is automatically inserted before <h1> and after </h1>.

font

The bad thing about <h1> and so on is that the text is placed on a row of its own. If you want to have different sizes on the text on one row, you use <font>. Examples:

Here comes <font size="+4">some bigger text</font> that becomes normal again.

becomes:

Here comes some bigger text that becomes normal again.

One can also change the color of the text with <font>. Example:

The text can be <font color="red">red</font> if you want it to.

becomes:

The text can be red if you wants it to.

a href

Links are created using <a href>. They must be terminated by </a>. Example:

<a href="http://www.cnn.com/">CNN home page</a>

becomes:

CNN home page

<a href="annanfil.html">Other file in my directory</a>

becomes:

Other file in my directory

<a href="annankatalog/">Subdirectory to this directory</a>

becomes:

Subdirectory to this directory

The example above does so that the web server automatically tries to respond with the page index.html from the new directory. If it doesn't exist, a list of files in that directory is shown instead.

img

To insert pictures in a page, you can write like this:

<img src="/images/logo/acc_small.gif">

or like this:

<img src="http://www.cnn.com/TECH/9703/04/clinton.cloning/clinton.jpg">

or like this:

<img align="bottom" width="230" border="0" src="/images/logo/acc_small.gif" alt="a boring picture">

As you can see, the img tag takes some arguments:
align: bottom, top, middle
right -- The image is placed to the right of the surrounding text, which fills the space to the left of the image.
left -- The image is placed to the left of the surrounding text, which fills the space to the right of the image.
border: the thickness of the frame surrounding the picture. 0 = no frame.
height, width: height and/or width given in percent or pixels
hspace, vspace: empty space surrounding the picture, horizontal (above and below) and/or vertical (on the sides).
alt: the text that is displayed if the web browser can't find the image, or if the web browser id set not to display images.

Image-links
If you want an image to be a link, you write:

<a href="http://www.cnn.com/"><img src="/images/logo/acc_small.gif"></a>

comments

If you want to place comments in html documents, that are not displayed in the web browser, you do like this:



becomes:

That's right! Nothing.

lists

To make lists you use the tags <ul>, <li> and <ol>. Example:

List of points:<br> <ul> <li>First point. <li>Second point. <li>Third point. </ul>

becomes:

List of points:

First point.
Second point.
Third point.

Another example:

Numbered list of points:<br> <ol> <li>First point. <li>Second point. <li>Third point. </ol>

becomes:

Numbered list of points:

First point.
Second point.
Third point.

åäö

ÅÄÖ
The swedish characters Åäö can be typed directly into the file, or as the codes below:
Å - Å
Ä - Ä
Ö - Ö
å - å
ä - ä
ö - ö

Links

Here are some links to places with more info on html coding:

Publicera information på WWW (HTML-kurs) (in swedish)
Svenska Skoldatanätet - Publicera information på WWW - Appendix A - förklaringar till alla tags (in swedish).

And here you can find background pictures etc.:

Background Colors
Background Shop
Backgrounds and Textures