How to create web pages, part 2

[ACC Home] [Help] [Information] [Site Index]

[Samma information på svenska]

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 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>.


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:

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


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> 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>


Large text

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


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.


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.


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>


CNN home page

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


Other file in my directory

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


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.


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.

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>


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

<!-- comment, which is not displayed in the web browser -->


That's right! Nothing.


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

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


List of points:

Another example:

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


Numbered list of points:
  1. First point.
  2. Second point.
  3. Third point.


The swedish characters Åäö can be typed directly into the file, or as the codes below:
Å - &Aring;
Ä - &Auml;
Ö - &Ouml;
å - &aring;
ä - &auml;
ö - &ouml;

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