concept

These instructional materials are designed to be followed step by step. It is about doing, rather than blah blah blahing. It is about being shown what is to be done, and then how. The learner learns by copying the code for the presented html elements. HTML is very simple, yet unforgiving. You must use tags, commas, spaces, inverted commas, and sometimes even lower case letters, with absolute precision. The smallest error can change your page into an unidentifyable mess. Before saving your most recent code, in order to view it with your browser, change the name slightly i.e index1.html, so that if you have made some mistake, you can return to your original and start again. I wrote these pages on yahoo geocities. This allowed me to preview all of my pages before saving. Ignore the code that yahoo has added to the start and finish of my html code. Look out for the <!--comments tags>, which appear only in the source code, and are not visible on the web page itself. This is where explanations are made about the tags. Some of these comment tags will tell you to ignore sections of the code until later i.e in earlier modules you are learning basics, and not how to do links tags etc, so ignore the links tags.

We will cover all of the tags at the appropriate time. This is part of the design concept behind these tutorials. The tutorials progress step by step, and each contains a whole concept in itself. The aim is to avoid distraction and confusion by only including the tags which you need to learn for that module, and keeping all blah blah to a minimum. HTML is really simple, when presented intuitively, especially spacially-intuitively. Tags should be shown analogous to how the HTML elements those tags produce will appear on the page. A lot of frustration is avoided by presenting tags in a way that corresponds to how they are used, where their form reflects their function, where the way they look in the html code reflects how they 'look' in the actual web page itself.

This is especially the case with learning about tables, and framesets. I myself spent many many hours of frustration trying to understand HTML code that bore no intuitive relation to the web pages it produced. Tables are the most challenging and useful of HTML elements. Tables are the means to determining the layout of your web page. Tables are used to structure the content of your web presentation, to make it look on the screen how it does in the plans you make on paper.

Remember to write your code as elegantly as possible, with page breaks in your html code text where they appear in the web presence itself i.e the web page, and with comment tags for each design element. This makes it easier to search for errors, to make changes, and to cut and paste your code. It is quicker to cut and paste elements rather than write them out individually. Minor changes can be made after cutting and pasting similar sorts of code.

The tags used are grouped as thematically as possible. We begin with the basic structure of any HTML page. Remember that all of the pages within your website must be saved in the same folder. And remember that each folder must have one and only one file that is named index.html. This will be the home page for your website. Save all of your files as .html files, in the folder containing the index.html file. Then open them with your browser. (Pull down the File menu, Open, Browse, and click on the .html files you want to view using your browser They will then be shown off-line, as they would appear online).

I have provide NAKED versions of the tables tutorials, in which all distracting tags have been removed, so that you can see only the actual tags which the tutorials are mainly about, i.e the <table>, <tr>, and <td> tags.

Note that the same HTML code will be be presented differently by different browsers, and by different versions of the same browser. The majority of users have Microsoft Explorer as their browser. Only around 10% of users, i.e Apple Macintosh users, use Netscape. I have designed my webpage with Microsoft Explorer in mind. If you view my pages using Netscape, it may appear different to how I intended. It is common practise to design the same web page for different browsers, to allow for the differences. This is done by viewing your HTML code using various browsers, and adjusting colors etc to account for the differences, so that the pages appear more or less the same to all users, independant of what browser they are using. I haven't had the resources to do so myself. I would appreciate any feedback or help regarding this limitation of my website.

Once you have mastered the tags and the elements of each tag you should practise planning your page layouts on paper, and thinking through how you will get what you have on paper to appear the same on the screen.

Remember also that many users will be using a screen much smaller than the one you design your web page on. Many designers limit limit their web pages to a maximum of 600*800 resolution, as some users have older laptops or monitors with only a 600 by 800 resolution, i.e a 12 inch screen. They simply place their web page content in a table that is 600 by 800. I have designed this for a minimum screen size of 14". I apologize to those people with a screen smaller than 14".

I have also put together a tutorial on cascading style sheets. You can take a look by clicking HERE

Click here to continue