INST > contents > Writing web pages in HTML

Introduction to writing web pages in HTML

This introduction guides you through writing your own web pages in HTML. It does this by showing you simple web pages each with only a few things on them, so you can see clearly how the HTML works, and then use the HTML on your own pages.

For the best possible future compatibility, here we comply with the XHTML standards.

This page provides examples and suggestions for exercises in:

A good idea to learn the various tags and techniques is to build up your own web page, and it will be a natural exercise that after you have looked at how to achieve some effect in HTML you will want to practise on your own page or pages. At the end, there is some reference material.

It is assumed that you're using Windows, or some window system that looks like Windows, and a reasonably recent version of Microsoft's Internet Explorer (which will be referred to as Explorer) or Mozilla Firefox. If you aren't, you will need to take account of that. It is also assumed that you are familiar with Windows, perhaps through using software such as word processing. Try bookmarking this page. In Explorer, this involves selecting Add to Favorites under the Favorites menu. In Firefox, from the Bookmarks menu choose Bookmark this page. You can do this to any other pages you want to return easily to.


Exercises


Looking at the Source HTML

The first thing you should do is learn how to look at the source code for any page. The source code consists of the characters that are stored on the Web server, and sent across the Internet when you ask for a particular page. Your browser (Firefox, Explorer, or whatever else you have) takes that source code, in HTML, and displays it as in the proper way.

In Firefox, under the "View" menu, you will find the option "Page Source". In Explorer, under the "View" menu, you will find the option "Source". Try clicking on that now, and another window will appear in which you will see the HTML code which was written to make the page look and behave as it does. Firefox will open a special window with colour-coded HTML in it. Explorer will probably open a Notepad window with the HTML in it. This allows you to edit the page, but you're not editing the actual page itself, just your own copy of it. That does mean that you can save it easily if you want.

"HTML" stands for HyperText Markup Language.
As you see, in HTML there are two kinds of thing: plain text, much of which is displayed in the window; and many "tags" like this <p>. Each tag starts with the < character and finishes with the > character. When the browser display a page normally, the tags are not shown in the normal window, only in the window to view the source. Tags are like instructions to the browser software.

When you have finished looking at the page source, Close that Source window, by clicking on the X in the top right corner.


Changing the browser's view

The next thing to notice and remember is that when you change the size of the browser window, the text is adjusted so that it fits into the window. The same thing happens if you change the size of the font that the browser is using to display the text (under the View menu) This is completely independent of the HTML that you write.

To try this out you will need your browser window to be "restored" - that is, not full-screen. If it is full-screen, click on that button next to the X in the top right of the window, and the window will shrink to cover only part of the screen. Then change the size of the window by dragging one of the sides or corners. For the font, under the View menu the Text Size item allows you to select different sizes, which is useful for those with better or worse eyesight than average.

The lesson to be learned from this is that you should not try to dictate exactly how your web pages should be displayed. You never know which hardware and software will be used. The HTML introduced here, and the style of writing HTML, is about as safe as it can be in many different settings. On the whole, the fancier things are, or the cleverer you try to be, the more likely it is that your page will display properly only on some versions of some browsers.


Try it - saving pages from the Web onto your computer

This is such a valuable skill that it is worth learning it straight away. Follow this link to a page which tells you what to do. (All links are followed in the normal way by clicking on them.)

Then return to this page - easy if you've bookmarked it, or else use the browser's back button or Go menu.


Basic HTML tags

Now here are some pages which illustrate the basic techniques needed to start your own web page. Select each one in turn, and for each one View the (Page) Source in the same way as before. Then Close the page source window, and click on the browser's Back button to return to this page.


Try it - starting your own web page

Now that you have seen the most basic tags, you should use a plain text editor (perhaps Notepad) and with a blank page. Put in the basic tags as you have seen them, and a few words. If you have trouble remembering the basic tags, you can copy and paste from the View Source window. Then save, note where you have saved it, and open the file you saved with your browser. From the Explorer File menu select Open, from the Firefox File menu select Open File, then Browse from the box.

You can switch between the browser and the editor in several ways in Windows - clicking in the respective windows (if not maximised); clicking on the task bar (bottom of screen), or using Alt+Tab.

Make some additions or changes to your page in the editor window. Save in the editor, then reload the page in the browser. You should see the results. If something doesn't seem to work, compare your new file very carefully with the examples given. you go. Put in some headings and paragraphs into your file.


Colours on web pages

Now's the time to make your page look prettier. First, have a look at how colours are done on the page that is linked from here: (remember to View the (Page) Source)

Try it

Then add some colour to your own page, but remember that we are writing American here and colour is spelled "color".


Making links to other web pages

This is the one most important thing about web pages. If there weren't links, HTML would just be yet another way of displaying text cleverly. Links make the Web what it is. So have a look at how links are done on these pages.

As before, for each one, View the (Page) Source, then Close the page source window, and come Back to this page.

Try it

Then add some links to your page. Any favourite web sites? Web directories (Yahoo etc.)? Search engines (AltaVista, Google, etc.)? Businesses relevant to you? Entertainment (BBC etc.)? In this way you can make your web pages more interesting and more useful. Look at other people's web pages for examples.

To do links between your own pages, you'll have to have at least two pages on the go. Create a second one if you haven't already, and link from one to the other.

If you've tried all of these so far, you will have got the idea. Include any of the following on your page as and when you see fit.


Images on web pages

Pages often look more interesting with some graphics on them. Graphics are held as separate files, which the web page asks for. Here are pages to help you with images:

This page has no images, to help it load quickly.


Generally useful HTML tags

There are several more widely used HTML tags that are very helpful in achieving the effect you want. In each case here, have a look at the page and the page source.


Making links within a web page

Sometimes you just need a long web page, because all the page belongs together, like an article. In this case, you may be able to help your readers find what they are looking for within a page, using a contents list at the top of the page. That is what I have done for this page, near the top. The example here is a purely artificial one to show you the techniques.


Escape sequences

You can't use just plain > or < when writing HTML. This is how to get those, and lots of other useful characters like accented letters.


Tables

Using the old table attributes:

Simple tables These are much more elegant than using PRE tags to set things out.
Complex tables They do take a little thinking, but you can achieve almost any effect you want to.
Page tables Tables can be, and are often used, for laying out whole web pages.
Table borders and spacings To make your tables look right, there are several options here you need to choose carefully from.
1, 2, 3, 4, 5 Miscellaneous examples of (intricate) table layout.

Using only "style" attribute

Simple tables For simple tables, using the style attribute is only a little more complex.
Complex tables Similar ideas but reworked.
Margin, border, padding Here is the detail on how to control tables with style.

Reference material


My concluding note is to recommend that you keep learning by keeping viewing the page source whenever you see something on a web page that you don't know how to do yourself. Keep your pages as simple as you can, consistent with your objectives, and always test your pages before publication on a range of different browsers and versions.

page maintained by and © Simon Grant, edition 2006-11-06