Lesson 1: Html Basics

No expensive software is needed to create stunning web pages. What is needed however is a good imagination and an ability to visualise your ideas. To do this effectively you have to know the limitations of html and the internet in general. Keeping file sizes and loading times to a minimum are essential as many people still have slow connections to the net. Understanding how the different browsers interpret html is also of great value. The two major browsers are Internet Explorer(Used by most people) and Netscape Navigator. In this tutorial I will do my best to keep the code crossbrowser compatible but I do lean more towards IE 5 as it has the best support for html, stylesheets and Dhtml. Read more about all these markup languages and more at WC3's website. WC3 is the organisation that attempts to control the standards for internet languages.

Lets get started: Any html editor will do, Evrsoft supplies an excellent editor for free which you can download from here or if you wish notepad or any other text editor will do, just make sure you save the file with a .html extension.

All html documents are enclosed in tags. In fact the whole document is displayed using various tags which the browser will interpret and display.
The most important of these tags is the tag which encloses all the other tags and elements within the document. As with most tags once opened it has to be closed. This is done by adding a backslash like this:
After the tags come the tags which contains the </span> tags and other elements which we will cover in later lessons. The title tags as the name suggests contains the title of the document.<br> So our document will look something like this:</p> <p></p> <div class="tag"> <html><br> <head><br> <title>My Homepage


The result of this is the title of your document being displayed in the top left hand corner of your browser. Lets proceed and put some content in our page.
All the content you want to be displayed is placed between tags. So anything that you write between body tags will be displayed in the browser. Some formatting tags are needed to display your document the way you want it to be seen. Two of the most important are the
tags which will give you a line break (Note they do not need to be closed) and the

tags which will result in a paragraph.( It is good practise to close p tags but very few people do.) Lets have a look at our resulting document:


My Homepage


This is my first web page!


A simple line break
in html.


Click here to see how it should look.
Hardly awe inspiring stuff so lets jazz it up a bit by inserting a background colour and changing the font sizes. To insert a background colour we add this line to the body tag: bgcolor="blue" so the body tag should look like:
( Note the spelling of colour. All tags are spelt in Americanese! )
Other elements can also be inserted in the body tag but we will cover this in a later lesson.
There are several ways of manipulating font sizes and colours but for now we will concentrate on the font tags. (It should be noted that font tags are slowly being phased out and replaced by style sheets which we will cover at a later stage.)
The basic layout of the font tag is as follows
so our resulting code will look like this:


My Homepage


This is my first web page!


A simple line break
in html.


The document should look like this

It is best to experiment with different colour combinations because some backgrounds will make some font colours illegible. Next lesson I will show you:

 

Click Here For Lesson Two      Return To Internet Works