|INTRODUCTIONS > Web A1
How to create your first web page: Part 1
This series tells you how, using free-of-cost tools, you can actually create a web page for yourself, put it up on the Internet for others to see, and change it when it becomes necessary with a little bit about some of the contentious issues you will sooner or later encounter.
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
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:
what was to be a new heading
or a new paragraph
where the illustration should go
what color everything should be printed in?
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
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
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
<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>
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.
|What's it do? What's it for? And notes...
Set headings of different sizes. h1 is biggest, h2 smaller, and so on down to h6 the smallest.
<h1> <h2> <h6>
</h1> </h2> </h6>
Mark the beginning and end of a paragraph. The closing tag is optional, but recommended for best results in different browsers.
Insert a table (of whatever sort). Various options are possible.
Insert an element in a table stands for 'table item define'. The closing tag is optional, but recommended for best results in different browsers.
Inset a row in a table stands for 'table row'. The closing tag is optional, but recommended for best results in different browsers.
Insert an ordered list of items (1, 2, 3 ). The ordering can be of various types. The numbering is automatically incremented for each item of the list.
Insert a bulleted list (unordered list). Different bullets can be used. Bulleting is also automatic; if a new item is added in the list it will be bulleted accordingly.
Insert a list item in either type of list. The closing tag is optional, but recommended for best results in different browsers. It will be numbered or bulleted depending on the type of list.
Mark a block quotation this is for quoted material and insets both the left and right margins of the block
Mark preformatted text that will not be treated as containing instructions. I have used this above where I show the text with the HTML tags so that the browser doesn't act on them. It normally uses a typewriter font.
Draw a horizontal rule (line). Used to mark off sections of a document.
Show an image on the page. Singular tag.
Make the line break rather than continue. Singular tag.
Add a comment or reminder that will not be shown to the reader by the browser. Leave a space at each end of the comment text for reliable results.
<!-- comment text -->
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.
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.
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.
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
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:
What happens if you specify a font but the font doesn't exist on the user's machine?
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.
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.
[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...
||<|Up|?|^|Menu|Search/Map|Translate|> | GOTO
Entire Site Copyright ę 2001 J. Roberts and AhISee.com - All Rights Reserved.
Problems, questions or comments about the content? Go to the contacts page
Problems, questions or comments about this web site? Send mail to our webmaster