Introduction to online publishing

Creating web pages with the XHTML markup language

Web pages are written with the XHTML markup language (eXtensible HyperText Mark-up Language). A web page written in XHTML consists of various elements that demarcate different structures in the text, such as headings and sub-headings. See below for an example of how to mark up the main heading of a web page with the element h1 (heading 1):

<h1>Santa's Little Helper</h1>

XHTML pages are normal text files where the XHTML elements are added into the text to define the structure of the web page for the browser. When a user reads a web page, the browser interprets the XHTML code to show the correct page structure.

The XHTML mark-up language also enables you to link different contents to the page. You can create links to other web pages, or to e.g. image, video clip or sound files. This means that you do not store the image files etc on the web page itself, as you do with e.g. word processors; with web pages, image files and other contents are stored as separate files and referred to with the XHTML code. The text ‘Take a look at my photos!’ in the following example will show as a link from a web page to another called photos.htm:

<a href="photos.htm">Take a look at my photos!</a>

Though XHTML may sound complicated at first, appearances deceive: XHTML is very simple as languages go, and you only need to know a few basic elements of it to create a web page of your own. You can also use the web pages of others as example; you can see the code of any web page by clicking on the ‘View source’ or similar command in the browser. With Firefox, for example, you can view the code by opening View and selecting Page Source.

When creating web pages, you should keep structure and layout separate. It is best to use so-called CSS stylesheets for the layout instead of writing it into the XHTML code. The CSS stylesheets can be compared to stylesheets with slideshows or word processors; you define the layout in one stylesheet file and link the style to the web page. Read more about this topic in the page on Using stylesheets – CSS.

On the coming pages, we will discuss how you can make your own web page by modifying an XHTML model page, but please read about the tools you will need for making web pages first.

Tools for creating web pages

The best way to start creating web pages is by using a text editor such as Notepad or emacs, so that you learn the basics of the XHTML language. If you know the basics, you will be able to avoid or solve many problems with web publishing. In addition, knowing the basics of the XHTML language will allow you to modify web pages with most programs suited for text editing.

When you have advanced further in producing web pages, you can learn about web-page editors, programs for creating larger web sites. Web-page editors contain many accessories for e.g. writing XHTML code and the feature of modifying web pages in wysiwyg (What You See Is What You Get) mode. If you use the wysiwyg mode, you do not have to see any XHTML code at all.

Many programs are able to store files in HTML or XHTML format (HTML is a predecessor to XHTML), but it not recommended that you use word processors to edit web pages because they seldom follow the standard for XHTML code.

Larger web sites are usually updated with content-management and publishing systems that run on servers. The Flamma intranet at the University of Helsinki, for example, is a content management system with a large number of content producers. Blogs and wikis are publication systems that operate under the same principle.