Writing your own Web Page, Layout Tutorial

A Free Crash Course in Web Design using Web Standards

by Phil Markey

Welcome back to my Free Web design tutorial using Web standards

In lesson one we started from scratch building the basics of a Web page. Now I'm going to teach you the essential parts to the overall layout of the content of your document.

I left you on the last lesson with you downloading and installing the Firefox Web standards browser. You should have this set as your default browser for viewing Web pages. This is the browser that you are now going to be using to test the pages you make. If you didn't download and install the Firefox browser then do so now!

The first thing you're going to need is some content. Some words organised in paragraphs with a main page-heading and a sub-heading. Your main page-heading is typically the larger words at the top of the page explaining what your article is about. A title. The sub-heading would be in a smaller text under the main heading, and would describe your document still further. Most people don't bother with a sub heading for their document, but I'm telling you that this is quite an import thing for you to add. I'll explain why later. So force yourself to write a sub heading and use words similar to but not the same as your main heading to further define what the document you're writing is about.

Now, if you don't already have the content (words and pictures) for your document then go and open your favourite word processor and write one. Ideally, this should have 4 or 5 paragraphs of text. Each paragraph having about 50 to 500 words. You might have a few one-liners of only a few words. That's alright too, but still try to have 4 or 5 larger paragraphs of text. If you already have many many paragraphs of text for online article then you might want to break this down over several pages linked together using hyperlinks very much like I've done with this Web design tutorial that you're now reading. I say this because you really don't want to be building one enormous page, as that would take a very long time to download over the Internet. This leads me to the point of download times and visitors responses.

People are very impatient and they won't wait more than a few seconds to download your page and quickly scan over it to see if this is what they were looking for. Therefore, your page must open almost instantly in their browser, and you should have a descriptive summary in the very first paragraph of what they're going to be able to read in the rest of your document. This very first paragraph summary should also include all the important keyword phrases that best describe your document. We'll come back to the importance of doing this a little later on when we talk about search engine optimisation (SEO). All will become much clearer later, and you will be re-writing your document over again. But for now I just need you to write out your 4 or 5 paragraphs of text and get it somewhat right with the headings, first paragraph, size of page etc.

Lesson 2

Open your plain text editor (Notepad) and open the index.html page that you made in lesson one. I'm going to show how some of the more important tags work. There are many many tags for doing all kinds of things. You can learn more about all the tags from the W3C online documentation. Remember to click back in that browser window when you're done to come back here and finish this free course.

Three kinds of lists

I want you to write between the start and finish BODY tags.
HTML supports three kinds of lists. The first kind is a bulletted list, often called an unordered list. It uses the <ul> and <li> tags. The opening and closing <ul> defines the list and each <li> is a list item, for instance:

Save your page, then open it in Firefox and take a look at what you've done. The second kind of list is a numbered list, often called an ordered list. It uses the <ol> and <li> tags, for instance:

Save your page, then open it in Firefox and take a look. The third and final kind of list is the definition list. This allows you to list terms and their definitions. This kind of list starts with a <dl> tag and ends with </dl> Each term starts with a <dt> tag and each definition starts with a <dd>. For instance:

There are 6 HEADING tags. Write out these:

Save your page, then open it in Firefox and take a look.

TIP - Go ahead and save yet another copy of your page as layout-template.html You then have a little library of code that you can then pull what you want out and plug straight into any document you're making that needs that code. This is how I've always done it. It saves you hours of hand coding each time.

You can now delete all those lists and headings you've just made in your index.html page, and now I want you to copy and paste your article that you wrote in your word processor program. The copy and paste technique works across programs. Paste it in-between the BODY tags.

Now add the tags; H1, H2, and Paragraphs:

Save your page, then open it in Firefox and take a look. You've now formatted your document as an HTML document. It looks pretty ugly eh! In the next lesson I'm going to teach you how to style it all beautifully. There are a couple of things left to teach you yet in this lesson. I'm sure there are places in each of your paragraphs that you like to stop and add a carriage return to start again on the next line. To do this you add a line break tag. A line break tag has no end tag in this html version. You simply add a <br /> wherever you want the line of text to break.
Example:

These next tags that I'm going to teach you are not really necessary. I say that because these tags have the function to add style to individule words, and all styles can and should be added to your document using cascading style sheets, which I will teach you in the next lesson. That said, it's a good idea to NOT rely on style sheets to add these following styles (Especially the B and EM tags). The reason being that search engines put emphasis on words that are tagged as bold text and you want to take advantage of that as best you can.

This last part of today's lesson is very important!
You've noticed that html relies on tags. Tags use <> to identify themselves to the browser. If you wanted to use <> to enclose your word for any reason <my word> then your word would become invisible on the page because the browser would have thought it was a tag and omitted it from view. Therefore, if you are ever using any special characters in your page (characters that are used in Markup) then you will have to replace them with the special character equivalent. See the examples below:

You may be wondering why this is so important when your page looks just the same whether you add the special characters or not. The thing is when you get more advanced with your Web development then you'll be writing code which utilises code that has to work the way it's supposed to and if it's written wrong then it simply won't work, and without learning this lesson now you won't know why you're getting page errors. Your Firefox browser has some very useful tools for troubleshooting errors on the page, but we don't need to look at those just yet.
You'd be surprised just how many Web sites there are out there that have errors in them. Surely, if you're going to write a Web page you'd prefer to have written it correctly wouldn't you? Especially when you don't have to go out of your way to write it correctly from the outset. So you've got your paragraphs of text & your headers copied into your page now, and you've checked through it to make sure you've added all the special characters? Your page looks ugly but you're confident that you've written it correctly? Well, lets test it to make sure! Open up the HTML Validator at W3C org Right click that link and open in a new window. We're going to validate your page using " Validate by File Upload ". Browse your computer to find the index.html page that you've just made and click Check. If you've any errors it will tell you where to find them. Fix them and test it again. Try making a deliberate mistake with one of those special characters, see the error message you get.

Why is my page so ugly? Your page is pure HTML and text. We use cascading style sheets to change how each of these tags display. Why not just have each tag display it's own style from the outset and save having to write a style sheet? Imagine that you have 1000 pages and you want to change the style of each & every page. Imagine the work! With a style sheet all you need to do is change one style sheet and that will change all your pages instantly. In lesson three I'm going to teach you the power of style sheets.

Go to Lesson Three

All the best,

Phil Markey
Retired Professional Web Developer