How to create your first web page: Part 1

[TOP]

Outline for Part 1:

• First Steps
• ...a new Heading
• Marking up text
• Playing Tag
• Common HTML tags
• What is HTML for?
• Advantages of end-user control
• Summary – Web page basics

[TOP]

First Steps

Introductory material for beginning web page writers is everywhere on the Internet – this article will of course cover much the same ground as any other. Here, however, I will emphasize and explain issues that I myself found confusing when I started writing for the web, and recommend some approaches that I have found to work in practice. Moreover, I'll tell you how to do it at zero - or very low - initial cost.

You may find that my approach suits you, or not. If not, I'll give you some links to other introductory material, which may suit you better, and which I'd recommend you check out, anyway; looking at a new topic from two or three different viewpoints helps understanding. It's quite a lengthy article – there's a lot to cover, so I've broken it up into three separate areas, each made up of small sections; this is the first area. Shall we begin?

I suspect you use a computer (!), so I am going to assume that you have some idea of how to use a word processor. With a word processor, you are able to format text for publication – that is, adjust and control its presentation. It is possible to emulate the appearance of a book, newspaper, memo, fax and so on. To format text in a word processor, typically you would select the text and then apply some effect to it – for example, make it bold or italic, or set, for example…

[TOP]

...a new Heading

This 'select and apply' system is, once you are used to it, a very simple and logical way to work; not many people go back to a typewriter (a historical personal text printing machine, for those who don't know!) after learning to use a word processor.

But go back – back in time, in your imagination, fifty years or so. What if you had to submit some text to a printer then – perhaps your latest advertising material? Or perhaps an article of some sort? A catalog? How would you have instructed the printer:

1. what was to be a new heading
   

2. or a new paragraph
   

3. where the illustration should go
   

4. what color everything should be printed in?
   

[TOP]

Marking up text

Well, what you probably would come up with is the idea of putting instructions in the actual text as to what the printer should do. For example, you might write at the beginning of a heading, 'heading'. Of course you'd have to tell the printer where the heading ended – so you'd have an 'end heading' as well. You might want bigger and smaller headings, so you could call them 'heading size 1', 'heading size 2' and so on.

Moreover, you'd have to make it clear to the printer which parts were instructions as to how to print the material and which parts were the material to be printed, otherwise your instructions would perhaps get printed instead of the text. Imagine a book on 'how to submit material for printing' to see some interesting possibilities for getting it wrong.

So, you'd perhaps decide to put your instructions within some sort of symbol that isn't used often in the text. Brackets would be a good idea, perhaps, but which sort? How about '<' and '>'? These are usually only used in mathematical formulas to indicate 'less than' and 'greater than', so as long as there was no math in your text, you'd be OK [NOTE 1] . So: let's mark some text up to see if it would work. You would type:

<heading 3>Does it work?<end of heading 3><paragraph>This is a test of marking up text with a control language<end of paragraph>

Now if the printer followed the instructions what would we get? We'd get from the printer:

Does it work?
This is a test of marking up text with a control language

It seems to work fine. You'll note that this is still a 'select and apply' system – except that you're telling someone else (the printer) what to select and what effect to apply. Moreover, this is still the system used for control of printing in many fields [NOTE 2] . A system of conventions to control printing is called a mark-up language. There is an international specification for mark-up called the Standard Generalized Markup Language, abbreviated to SGML.

[TOP]

Playing Tag

A simplified and also slightly extended variant of this is used to control how pages appear on the web, and this variant is called Hyper-Text Markup Language or HTML. And that's what you use to write a web page. Why 'hyper' text? Because, as I'm sure you're aware (!), web documents can have links in them that, when you click on them or otherwise select them, take you somewhere else. These are properly called hyperlinks. Let's see what HTML looks like. Here's a heading:

<h3>HTML works!</h3>

which produces:

HTML works!

Here you can see what I was leading up to above. The mark-up for a heading is the letter h together with a size, h1 for example. These markup elements are then distinguished from normal text by being enclosed in the pointy brackets to give <h1> (or <h2> up to <h6>), for heading sizes 1, 2… 6 respectively. The 'end of heading' mark-up is the same sign, but with a slash '/' in front of it. These groups are called mark-up tags. Let's do the heading and some paragraph text:

<h3>HTML works well!</h3> <p>This text will be printed in the body font for the document. This will be too, and so will this. And here is yet more text of some sort. To change the topic a bit, here is some different text - well, it is similar of course, but it could be about something else.</p>

This produces:

HTML works well!
This text will be printed in the body font for the document. This will be too, and so will this. And here is yet more text of some sort. To change the topic a bit, here is some different text - well, it is similar of course, but it could be about something else.

What if you wanted to break a line? Well, we use a 'break the line' instruction! This is <br> and unlike the tags for heading or body, it doesn't need an ending with a slash – obviously! This single style of tag is called an empty tag. How does it work? We'll add a <br> to the text (I've emphasised it to make it obvious – it won't be emphasised in the editor):

<h3>HTML still works well!</h3> <p> This text will be printed in the body font for the document. This will be too, and so will this. And here is yet more text of some sort.<br>To change the topic a bit, here is some different text - well, it is similar of course, but it could be about something else.</p>

This HTML produces:

HTML still works well!
This text will be printed in the body font for the document. This will be too, and so will this. And here is yet more text of some sort.
To change the topic a bit, here is some different text - well, it is similar of course, but it could be about something else.

[TOP]

Common HTML tags

There are many other tags – I have just listed those I use almost every time I write something, and all these types of tags have been used somewhere in the HTML version of this document. There's quite a lot more to some of them than I have shown. For example, the image tag <img> obviously needs to be told where the image is and so on. This is done by means of additional instructions placed between the opening and closing brackets of the tag – these are known as attributes. But the table above will do for now, as an introduction to the commonly used tags.

[TOP]

What is HTML for?

Now, the next question you may ask is 'Well, how do I control the size, font and appearance (bold, italic or whatever) of the text? Do I have some mark-up tags for that?' At this point I'll tell you that there are some very major differences of opinion or 'philosophical differences' on 'how it all works', with associated 'parties' and much hot air.

Let's go back to the printer. When you submitted your work to the printer, you'd mark it up with instructions as to what was a heading, the body, where the pictures should go and what its caption was, and so on. You'd also perhaps express a preference for the sort of font you wanted, and what color things should be. But it was the printer's job to set the text so that it would be legible, and look good on the page.

They would select the font sizes depending on the conventions for the medium; and if the text were for a newspaper article, or a magazine, perhaps it would be set in narrow columns – because that's the format used. What you specified was the structural mark-up, not generally the formatting mark-up. If you have ever written for publication, then you'll know that that's still how it is, most of the time – the house rules are what control presentation, and all the editor usually wants from you is bare text, with headings and illustration marked up clearly.

Because of the advent of advanced text processing with the personal computer, people have gotten used to having much more control than this when they print on their personal printer. But this control is not natural to HTML. HTML was designed to specify structure, not formatting. The browser that you use to view the marked-up material – technically, the 'user-agent' – decides for itself how to present it, depending on what the user has set as their defaults on their own machine. You specify what the structure of the document is, and it (the 'user-agent' or browser) selects and applies formatting based on that specification – together with any other instructions it has been given.

[TOP]

Advantages of end-user control

To see why this it's done this way, think about the heading we mentioned. There are 6 sizes of heading available, with heading 1 biggest, and heading 6 smallest – all different than the body text (usually emboldened). Now, I'm using a 17” screen at 1152 by 864 to read and write this material. That's for various reasons, but it means that the standard size of text in web pages is rather small – often too small for comfort. So what I do is set the default text size to be bigger – and that automatically sets all the headings bigger in the same ratio, too. Very convenient!

For older people, who often have lost a little of their visual acuity, the ability to enlarge the text may be critical to their being able to read it comfortably. The same applies the other way round – many people have their screens set to 640 by 480, and some hand-held computers only allow 640 by 200 or less. These users can shrink the size of the text to get more on screen if they want, and the headings will adjust automatically.

But next time you get to a highly-formatted, black background, bells, whistles and brass knobs web page - try resizing the page or the text. You'll be amazed how often you can't! It's your computer, why are they trying to take control of it away from you? If your web page is intended to sell something, or offer a service, or even be enjoyably readable, you'd be well advised to allow people to adjust their text to their own needs.

You can add formatting, though. There are HTML extensions that allow you to:

• Fix the size of the text in points

• Specify particular fonts

• Use other advanced techniques (like JavaScript - later!!) to print part of your page
  

Many more restrictions and controls over formatting and presentation are available – at the moment. Should you use them? I'll leave the decision up to you: I'll just say that I stick to the original plan and intention of the designers of HTML, and don't normally adopt these other techniques (but see this note [NOTE 3] ). This gets round problems such as:

1. What happens if you specify a font – but the font doesn't exist on the user's machine?

2. What happens if you specify 'red text on a green background' for that '1960's psychedelic' effect – but the user is red/green colorblind (up to 10 % of males are, to some extent!)
   

I'll also point out that these formatting controls in HTML will be made obsolete in the near future – the proper way to control presentation is via a stylesheet, and we will introduce these a little later.

[TOP]

Summary – Web page basics

• The structure of web pages is specified by means of a mark-up language

• The mark-up language is called HTML – the hyper-text mark-up language

• Many elements of HTML consist of an opening instruction and a closing instruction. The closing instruction is the same as the opening one but is prefixed with a slash '/'

• Other elements are singular, 'empty' and don't have a closing tag

• The appearance and formatting of a page is best controlled with a stylesheet – which we'll look at later.

Footnotes

 [Note 1] You'd have to come up with some idea to enable math symbols to be printed, of course: maybe you'd decide to do something like prefix the bracket symbol with another rarely used symbol such as & (ampersand) to indicate 'print the bracket symbol'. Hint: check it out!

 [Note 2] It may be of interest to note that this is how most early word processors actually worked, before graphical screen displays were introduced to personal computing by the Apple Macintosh. With a text-only screen, you couldn't see the final output. Mark-up instructions were placed in the text to give the hoped-for effects, which you'd see (maybe - if you got it right!) only when you printed it out.

 [Note 3] No, I'll tell you straight - I'm a structuralist - I prefer to keep the HTML clean of formatting. But you do what you like - I know you will, anyway, whatever I say. And there isn't always a free choice. If you want your documents to retain some formatting in old browsers, you must use the old formatting instructions, so there's some in this text...