How to create web pages

A web page is stored in a special kind of file, called a "html file". html files can be created in almost any program that can be used to edit text files. There are also some programs that help you create html files. The advantage with these programs is that the programs are often easy to use. The drawback is that they doesn't always generate correct html files. We recommend creating web pages by using a normal text editor, like vi, pico, Notepad in Windows 95, or such.

A html file contains "control codes" that decides how the page will look when watched with a web browser. These control codes are called "html tags". You don't have to learn more than 10 tags to be able to create a simple web page.

If you sit at home and create a web page, or are using a Internet connected, non-ACC, computer, you have to upload the file containing the web page to your ACC account. This is done using FTP (Currently only in Swedish).

The easiest way to create web pages is to log in on your ACC account and create the pages with one of the editors on the system. Then you don't have to mess with SFTP.

When you have created a web page and want to publish it, you must place the file(s) containing your web page on a special place. This special place is the directory ~/public_html on your ACC account (the "~" character means "home directory"). The directory ~/public_html is created with the command
mkdir ~/public_html. Anything that you put in this directory will be publicly available at https://www.accum.se/~your-username.

To enable the web server to send your web pages to people who want to look at it, you must make the directory public readble. This is done using the command below:
chmod 755 ~/public_html

The file that contains your home page must have a special name, index.html, so that the web server knows what web page to show if you have many files containing web pages. The files, like the directory, must be public readable, and files are made public readable using the commando
chmod 644 filename
where filename is replaced with the name of the file that you want to make public readable.

If you feel unsure abou this, you can always use the command fixchmod, that automatically sets the access permissions to the right values. In that way you don't have to use the chmod-commando. Just write fixchmod and it will take care of the rest.

If your page gets very big, you should split it into several smaller pages. This is done by simply creating several different html files containing the different pages. The file containing the main page must still have the name index.html, and from it you will link to the other files. Make sure you name the files in a smart manner, giving them names like about_me.html, links.html and so on.

You can also structure your pages by placing them in different directories depending on what information is contained in the different pages. For example, you can put all your link pages in the directory ~/public_html/links/ and your Spice-Girls-pages in the directory ~/public_html/spicegirls/ and so on... The main link page should then be placed in the file index.html in the link-directory, so that the web server can find it. A page containing links to your all your friends homepages can be called friends.html and be placed in the link-directory. And so on...

If you have a cgi-script that you want to be run some time, for example to manage a guest book or count the number of visits to your page, that script must be placed in the directory ~/public_html or a subdirectory to ~/public_html. cgi-scripts must be executable, and are set to be so by issuing the command
chmod 755 scriptname
where scriptname is replaced with the name of the containing the cgi-script.
The command fixchmod will do this automatically, if you think it seems to complicated to use chmod-commando.

Now, how can you make a cgi script run every time someone looks at a page? It's really rather simple. Just put the following line somewhere in your html file:
<!--#include virtual="scriptname.cgi"-->
and scriptname.cgi will be run when someone looks at the web page, and the text or html code that the script produces will end up on the web page. A short example:
This page has been visited <!--#include virtual="counter.cgi"--> times!
may result in this, depending on what counter.cgi produces:
This page has been visited 65 times!
It is possible to make cgi-scripts that produces html code saying that an image should be displayed. If counter.cgi in the example above is a script that displays the number of visitors by showing images of numbers, the result may look like this:
This page has been visited <img src="6.gif"><img src="5.gif"> times!
which will cause the web browser to load the images 6.gif and 5.gif and display them.

ACC has some scripts that our users can use on their web pages, for example a counter, that counts the number of visitors to a page. To use it in a web page, you write the following line in your html file:
This page has been visited <!--#exec cgi="/cgi-bin/scripts/acc_count"--> times!
if you want to use the script /cgi-bin/scripts/acc_count.

More information on counters can be found a counter.html.

For information on other cgi-scripts, see cgiscripts.html.sv (Swedish only).

There are several ways to accomplish password protected pages, but observe that implementing it using a CGI script is a common security hole since the password is stored in the log file of the web server.

A safer way is to use htaccess instead, which is explained on a separate page.

This is not intended to be a complete course in creating web pages, but is more intended as a introduction, to give you an idea about the basics in web page creating. The best way to learn coding html is to look at some html code from a page that has some feature that you want, and modify it to suit your needs.

A tag is a kind of control code that defines the look of the page. An example of a tag is <br>, which inserts a line break. Many tags can/shall also have arguments, for example the img tag, which is used to include pictures on a page. An example of how it can look is
<img src="picture.gif" alt="Picture" align="middle" width="200">

Tags must be surrounded by the characters < and > or they will not work! Some arguments to tags must be surrounded by quotes ("). If you do an error in a tag, your page will probably not look like you intended it to, even though some web browsers try to guess what you meant. Some tag must be terminated, for example the <center> tag, that centers text on a page. One writes <center> before the text one wants centered, and </center> after. The text between these two tags will be centered. One should also have <p> before a paragraph, and </p> after it. That's the way it's done on this page.

Some of the tags one can have in a html file are "mandatory". They should be in the file, if you want your page to be presented corrected to as many people as possible, regardless of what browser they use. These are, for example, <html>, <head> and <body>.

Here we shall go step-by-step to create a simple web page.

At the start of the file, we must have the tag <html>, to indicate that the file is a html file. Then we want a title on the page. The title is placed in the head of the page. Thus we need a head: <head>. The title is written within the <title> tag: <title>My homepage</title>. Now we are done with the head, so let's terminate it: </head>.

Now we write the actual page. It is places in the so called "body". Thus we enter the <body> tag, with a few arguments to indicate what colors we want on our page: <body bgcolor="#ffffff" text="#000000" link="#00ffff" alink="#000000">. Now we can enter the text that we want on the page. If we want a line break on a certain place in the text, we enter the <br> tag. Web browsers automatically optimizes the text on web pages so that it fills the width of the window, so trying to format the text by hand, by entering lots of <br> tags, is a waste of time. Besides, different people have different sizes on their windows, so a page that looks perfect to you may look not-so-perfect to another person, since that persons' web browser inserts line breaks in a different manner. Test it yourself by resizing your web browsers' window, and you'll see!

If you want pictures on your web page you insert them using a special tag: <img>. The <img> tag can have many different arguments, to specify the size of the image, the thickness of the frame around the picture, etc. We want a picture of ACC's logo on our page: <img src="/images/logo/acc_small.gif" alt="ACC's logo" width="200" align="middle"border="0">. This includes the picture /images/logo/acc_small.gif on the page, or alternatively the text "ACC's logo" if the web browser doesn't show images. The width of the image is 200 pixels, and it will be aligned to the middle.

To link to other pages or documents, you wirte something like this: <a href="http://www.cnn.com/">cnn</a>. This will create a link to www.cnn.com, called "cnn".
You can also have picture-links: <a href="http://www.lina.org/"><img src="/images/logo/acc_small.gif" alt="ACC's logo" width="200" align="middle" border="0"></a>.

At the bottom of the html file one must terminate the tags that were "opened" at the beginning of the file. This is done by entering </body> and </html>.

Here is what we have created so far:


<html>
<head>
<title>My homepage</title>
</head>

<body bgcolor="#ffffff" text="#000000" link="#00ffff" alink="#000000">
Hello and welcome to my homepage. Right now it doesn't contain any useful info, but just you wait until I've learnt more html!<br>
<br>
Here is a link to <a href="http://www.cnn.com/">cnn</a> where you can read the latest news..<br>
<br>
A picture of ACC's logo:
<img src="/images/logo/acc_small.gif" alt="ACC's logo" width="200" align="middle" border="0"><br>
Bye, and welcome back!
</body>
</html>

We have more info about html, and particularly some different tags, on another page.