Writing your own Web Page, Design Tutorial

A Free Crash Course in Web Design using Web Standards

by Phil Markey

In this course I'm going to teach you how to build a whole Web site and build it correctly, then we're going to style it all to look every bit as professional as any other site on the WWW. But we don't stop there! Then I'm going to show you how to optimise your site for search engines. Then, would you believe! I'm going to tell you the secrets to getting your site popular and positioned in the top 10 search results on search engines. Maybe even get it to the no. 1 position on search engines.
I'm going to teach you all this totally FREE of charge. But we don't stop there! I'm then going to teach you how to drive traffic to your site and earn money from it. Furthermore, I'm going to advise you of the easiest ways to do all this and, where possible, how you can do it all yourself without spending money. Why would I do all this for Free? Well! Why not? Look! If you want to there will be a Paypal donations button on a page a little further on. You are not obliged to, but if you like what you've learned then you may make a small donation if you wish.

What are we waiting for? Let's get started...

Lesson 1

Your Web page is written in plain text and is therefore written using a tool for handling plain text. You might have seen that your word processing software i.e. MS Word has a capability for writing HTML. You DON'T want to use this! These types of text editors are not plain text, and I want to show you how a Web page is really written. This was the only way, other than Telnet that there was for writing a Web page when I first started out as a Web developer, which was right back in the very beginning of the creation of the World Wide Web back in 1994.

Therefore, go and open Notepad or TextEdit on the Mac or some other basic plain text editor in your computer, and without further ado were going to get stuck-in and start writting out our Web page.
Write this:

HTML stands for HyperText Markup Language The HyperText part is one of the reasons why the World Wide Web took off and became so popular. " HyperText " refers to the clickable text links in documents that allows you to jump to another document somewhere on the Web. We'll deal with links later! The Markup part is the concept you need to grasp right now. These are the " tags " that are placed on either side of an element on your page. An element could be anything - paragraph of text, image, heading etc. etc.. What you have just written above is the opening tag of 2 tags that enclose or wrap your whole Web page document.
You now need to copy and paste that a few lines further down the page. Then add a " / " after the " < " and before the the " h ".
Like this:

You now have the opening tag and the closing tag for the whole HTML document. The closing tag defines where the instructions for that tagged eliminate ends. An end tag is defined by the " / " after the " < ".

TIP - To Copy some text use your mouse to highlight your text (Left click and scroll). Then using your keyboard hold down the Ctrl key and while doing that hit the letter C on your keyboard. Now key down your page and place your mouse cursor where you want to paste your word or words on the page, and hold down the Ctrl key and while doing that hit the letter V on your keyboard.

Now there are two parts to a document. The HEAD and the BODY. You, as a human will only have noticed the BODY part. The HEAD part is equally as important, as this carries all the information that the Web Browser software or a search engine spider or any on-line software will need to read to know how to display your document. All these tags that we're creating now are compulsory and must be included in your document. All have an opening tag and a closing tag.
So lets get writing:

Now you'll see that we've written the opening and closing HEAD tags inside the opening and closing HTML tags. Inside the opening and closing HEAD tags we've written opening and closing TITLE tags. Notice, all these are wrappers containg blocks of other tags and text. This is Markup. It's telling the browser what to do with each eliment that we're writing. You can write whatever you like within the TITLE tags for now, we'll come back to that later. Also notice the opening and closing BODY tags. That is where we're going to add all the visible eliments of your document. We'll also come back to this later.

Now I want you to add this to the very top of your document before the opening HTML tag. Notice you also have to change the <html> tag in this version.
Write this:

I'm not going to explain what this is! Much! I want to keep it all simple! You need this in your document to validate the version of the HTML code that you're writing. Modern Web Browsers use this to know how to display it all. You're writing HTML version XHTML 1.0 which is the standard used in most business Web documents today. XHTML documents need to be well-formed, they can be parsed using standard XML parsers - unlike HTML, which requires a lenient HTML-specific parser. There is no closing tag for this tag. There are several DOCTYPE tags. You can learn all about these from the W3C. Remember to close that browser window when you're done to come back here and finish this free course.

You could have written this DOCTYPE below, which is HTML version 4.01 which is a much more loose and forgiving of mistakes version. But, like I said, I want you to learn to write properly from the outset. So don't write this.

I shall later teach you how to write HTML 5, which is not necessarily a better version than this, but is more useful for on-line gaming and perhaps works better in mobile devices.

Now there are several other tags that have no closing tag in this HTML version. You're going to need these later for what I'm going to teach you. Therefore, you can add these to your document now and we'll come back later to add information to these tags. All will become clear later! These tags are placed between the opening and closing HEAD tags.
So add all the bits that I've highlighted :

You now have a template HTML document with all the necessary tags. Time to save this document in your computer. But before we do that. More typing! Between the opening and closing BODY tags
Write this:

You've just written opening and closing paragraph tags with text between them. So that text is now contained within a paragraph and will be the only thing visible in the browser window out of all of this code you've been writing.

Now save your file: Make a new folder called " Webdesign " within " My Documents " or elsewhere in your computer. Then make a new folder called " html " within the " Webdesign " folder.
Now in Notepad click on File - Save As save your document in your new " html " folder as file name " index.html " and Save as type All files

Now go to that file inside that " html " folder in your computer and click to open it. This will invoke your default Web Browser to open up and display your new Web page.

If all went well you would have seen a rather ugly Hello world! written in the top left-hand of your browser window. Don't worry about the ugliness of this, we'll make everything look good much later on.

Your new Web page is only in your own computer. It is not up on the Web and nobody else will be able to see it. We'll come to the uploading of your site to the Web much later on. Right now we're building and testing your Web site in your own computer only.

TIP - Go ahead and save another copy of your page as template.html You then don't need to rewrite all that again for your next page, you can simply copy all your info for your new page straight into your template.

The default Web browser that has just opened to display your document is most likely Microsoft Internet Explorer. This ships as part of the Windows operating system, if you're using Microsoft Windows. The Microsoft Internet Explorer Web browser is NOT a good browser for you to be using to test your Web pages. It's not a good browser to use on-line for your day-to-day browsing either! It is the most widely used Web browser, this is simply because it is shipped with your operating system. You are making Web Standards Compliant Web pages, i.e. pages that are built to Internationally excepted standards to display correctly in any browser on any platform on any computer anywhere in the world. Microsoft, being a major corporation have their own ideas for how pages should be made and much of these are not Web standards. I can't emphasise this enough! Your Web pages need to be built to Web standards. Standards set by the W3C org. You should still be making pages that display perfectly in the Internet Explorer browser as well. After all, that is the most commonly used Web browser. But you must also have your pages displaying correctly in all or any Web browsers. Building to Web standards will make your pages display 100% correctly in any browser including Microsoft IE.

TIP - I recommend that you bookmark this page right now. Ctrl D or add to bookmarks or favourites. Then if you're installing a new browser then this page link will also show up in the new browser's bookmarks.

Any professional Web designer would have all the commonly used Web browsers installed in his computer. They can then test their pages in all the browsers before going live with the page. For you right now I need you to have at least one Web standards compliant browser. The best one for assisting you in your designing is Firefox. Firefox was developed by the Mozilla Foundation. The Mozilla Foundation is a not-for-profit corporation dedicated to the public benefit. The Firefox browser was developed around Web standards for using Web standards. This also happens to be by far the best browser for your everyday use. Everybody ought to have the Firefox browser installed as their default browser. You can run Firefox and your existing browser as well. It won't effect that. On installing, Firefox can duplicate all your stored preferences and bookmarks from your current browser to give you a seamless transition, so you can try it and if you still prefer your old browser (which you won't!) then you can always go back to that. Anyway, I need you to have a Web standards compliant browser so go and download Firefox Now! It's totally Free of charge. You've bookmarked this page right? So we'll carry on where we left off later after you've installed it.

Go and install that, then I'll see you again for the next lesson, which is where we'll add a title, add headings and paragraphs, add emphasis to your text, add images, add links to other pages, and use various kinds of lists.

Go to Lesson Two

All the best,

Phil Markey
Retired Professional Web Developer