INTRODUCTION

I was in some difficulty when I started trying to write HTML coding for constructing a website from scratch. Yes, lots of books were and are available about HTML, written by experts who are red-hot on the refinements of the system, its history and structure. But they are so expert most have forgotten the difficulties they had come up against when they had first been exploring the language.

A common approach was (and still is, both in print and online) to go through each of the capabilities of the system, explaining exactly how the vital wording and punctuation must be included, usually including a miniature program to show how each one functions. But it is inevitably less than obvious how these components are to be joined together to make a sensible, useful whole.

What follows is different. In Chapter One a simple one-page website is constructed incorporating all the basic essentials of the compulsory heading plus some text and a picture. HTML elements are introduced as they are needed, explained in context.

Chapter Two then tackles refinements to that specimen page, setting out the text and image sizes, colours, alignments, decorations and so on. The first run-through uses in-line CSS. Having introduced the concepts there is then a minor adjustment to form an internal style sheet.

Those foundations having been laid, it is then possible to consider the needs of a multi-page website, deliberately complicated by being shared between two directories. Though the material may be slightly fanciful, Chapters Three to Seven set out realistic coding procedures, quickly including an external style sheet to carry some CSS across the whole site. Again, it is programming in context, easily transferable to your needs.

Chapter Eight includes details of a few elements which are likely to be useful but which did not happen to fit happily into the scheme of the earlier Chapters. It finishes with some considerations involved in uploading the material onto the World Wide Web.

Like most constructive pursuits, creating a website from scratch can be immensely satisfying, fulfilling for its own sake, and useful too presumably. So good luck with your endeavours, whatever they are.

<<<<<<<<<<+>>>>>>>>>>

CHAPTER 1
Welcome!

Example first: explanations as we go along.

Get ready to type in some simple text-only text. Please use the simplest program you can for this job: word processors are rather too clever and automatically put in extras that we don't want. But if you do use a word processor be sure to "Save as text only (*.txt) " when the time comes.
Reserve yourself some place on your computer to store your new programs by setting up a new folder (or 'directory'). You can name it whatever you like: perhaps ProgramOne.
Type in the listing that follows - more or less! Where "Mike Hosken" appears you will put in your own name of course. Find yourself one of your photos and copy it into your new folder/directory. Use the name of your picture in place of beechwoods.jpg.

So here goes -

<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>My First Trial Website</title>
<meta name="description" content="My first exploration with writing html.">
</head>
<body>
<div>
My name is<br>
Mike Hosken<br><br>
This is in my local nature reserve<br>
<img src="beechwoods.jpg" width="600">
</body>
</html>

SPECIAL NOTE: There are two deliberate mistakes in that listing. We'll be using it later to learn how to find errors and set about correcting them. But just for the moment, it's a workable website listing. Meanwhile -

Everything inside the < > angle brackets is html code, giving instructions to the computer when the website comes to be displayed by your (or anyone's) browser program: none of it will be visible. Incidentally, in case you're wondering, html stands for HyperText Markup Language: it can deal with text and lots of other things, as we'll see.
Some <elements> enclose bits of code: they start off with something like <word> and end with the same thing plus a forward slash , </word>
<!DOCTYPE html> is compulsory, including that ! exclamation mark. It simply but vitally tells the computer to interpret what follows as html (actually html5 which is the current version: earlier editions had different openings).
<html lang="en"> is not strictly necessary but under some circumstances it may be suggested that you add it, so it's a good habit to acquire and that’s where it goes. It just tells any visitor that the main text language is good old English.
<head> marks the start of the compulsory top component consisting of things the computer needs to know plus some helpful info such as the title that WILL appear - as the title of the web page.
Type in <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> just as it stands: we don't want our text appearing in Japanese or Egyptian characters!
<title>My First Trial Website</title> but feel totally free to substitute your own choice of title.
<meta name="description" content="My first exploration with writing html."> again has freedom to word the content just as you think fit. It's not compulsory anyway.
But </head> certainly IS compulsory to finish off that section.
<body> marks the start of the actual website material - the stuff that WILL be displayed.
It is sometimes convenient to have different sections within the website, perhaps for coding or for display purposes: although that's hardly the case I've included it just as an example - <div> - short for division.
At last we reach the material that you actually want to be displayed on your website. <br> moves the text on to the next row: you can think of it as a line break or as a blank row. (Your listing does not have to have a new line after every <br>. Just please yourself.)
What about <img src="beechwoods.jpg" width="600">? Well, img src is the coding abreviation for image source and must be followed by the name of your photo inside inverted commas. Then there must be at least one space (more if you want - even a new line!) before the width is specified again in inverted commas. We'll come to more details about images later on, but meanwhile we can think of the standard webpage as being something like "1500" wide, so "600" is a bit less that half that width. As we'll see later, we could have specified a height too, or instead. But if only one dimension is specified the photo will be shown with its original aspect ratio/shape/proportions..
So our modest first effort is completed and must be closed off with </body> and </html>.

GENERAL:

All html5 coding is to be typed in lower case - NO CAPITAL LETTERS, though the initial DOCTYPE seems to be optional. Virtually all measures must be inside "double inverted commas". But you can please yourself as to how your listing is set out: any extra spaces and blank lines are ignored, so use them to help make your listing easy on the eye. A bit further on we'll discover that -
</body></html>
- is pefectly OK on one line if that's what you want, for example. There are some conventions but they are totally optional: you are in charge of your website. If you want to see how other folk do it you can, with most browsers, “View page source” (Ctrl+U perhaps) while displaying their website: it reveals some astonishing listings.

Phew! Now then, all that work must be saved as a text file. So "save as" all your work with a new name, MyFirst perhaps with no spaces but numbers are OK, My1st perhaps, but vitally with .html on the end. (Actually just .htm will work alright.)

OK. Now the climax. Open your files directory where you can see this new file listed. When you double-click on it your computer will recognise the .html suffix as being a web page and select your default 'browser' to open and interpret it. The result will be your own personalised first web-page version of –

The display.

OK, so that has worked. Don't think much of it though. Lots of improvements are needed, which we'll be having a look at in Chapter 2.

Indeed it has worked, but is it good, valid, universally acceptable html5? No: remember those deliberate errors? Use your browser to find https://validator.w3.org/#validate_by_upload. When it comes up click where it says "No file chosen": your file list will be displayed. You may have to move through the file structure tree to find your new folder but then it will include your new MyFirst.html or whatever. Double-click on the file name and MyFirst.html will appear in W3C's box. Then just click on the oval "Check" box.

O dear! THREE errors! I had said I had included TWO errors. Let's see:

"An img element must have an alt attribute." It's a sort of compulsory refinement. Under some circumstances which we needn't go into, the actual picture isn't needed or can't be shown. So the coding should include alt= alternative text which can be shown when necessary. I'll complete my <img src="beechwoods.jpg" width="600"> like this: <img src="beechwoods.jpg" width="600" alt="Walkers in the beech woods."> but you can add whatever is suitable to go with your image.
"End tag for body seen, but there were unclosed elements." As noted earlier, some <word> elements must be closed with </word>. The Validator has found </body> too soon - because -
"Unclosed element div." <div> had been included further up in the body and it needs a </div> to close it before body can legitimately be closed.

I'll add </div> just before </body> to clear BOTH the other errors.

Re-save the file. Now go back to the Validator. The quickest way is to use the left arrow to get back to the previous display. Your file will again be there in the box for the W3C Markup Validation Service. Click on "Check" again. Result, "Document checking completed. No errors or warnings to show." Hooray!

Again just for curiosity's sake, we're all familiar with www for the world-wide web. W3 is the shorthand, with C for Consortium which designs and monitors the web. If W3C says it's OK, it's OK!

Anyway, how have you got on? Ready for Chapter2 with those promised "lots of improvements"? If so, click here.

<<<<<<<<<<+>>>>>>>>>>

INTRODUCTION

CHAPTER 1 Welcome!

CHAPTER 1
Welcome!