This is the first step in learning how to build just about anything for the web, so let's start. In fact we will start at the top of this page.
The first thing in html are the 'tags' - these are the '<' and '>' signs that enclose instructions that tell your browser what to do with the text following and/or give information to search engines.
The first line indicates that the document is written in html/xhtml to W3C standard. Followed by the address of the W3C section governing that code standard.
The next set of tags describe the start of the 'head' area of the script; Everything in this section, until '/head' (/ = end) gives information to search engines and your browser of what the document contains. 'Title' is what shows at the top of your screen as the page description. 'link' gives the contact details for the author. 'meta' elements give information for search engines so that the site can be put into its correct section of their listings.
The most interesting element is the last one, link rel="stylesheet", as this stipulates that the basic information for producing the page comes from a file called "style.css". This is instructing the browser that the page is formed from another file and is a cascading style sheet (css). [See section on CSS]
The sections you should concentrate on, when starting, are the title, author and contact details. Everything else can be left until you have built your site.
The next section is the bit that you do need to get to know:
You can see, from the image, that the first tag includes the element name 'body' - this is where the actual content of your web pages goes. The next tag encloses a block formatting description 'center' (see note in HTML code appendix), this means that everything after will be placed at the middle of the viewable area. In this case it is the first image on the page - the logo. In the next tag is the image source (the file where the picture is held)
[*** In the published version the source will read something like http://www.wildepages.com/images/wpc_wbnf.gif as the source file is loaded to the server and not on a local machine, so needs the full path ***]
The bits after detail the size of the image, whether it has a border or not (and if so what size in pixels), where any text would be aligned and most importantly something called 'alt'. The alt (alternative) is what you see if you hover your mouse pointer over the picture - so, if for some reason the picture does not show on their browser, your visitor knows what he/she is missing. [Search engine 'spiders' or 'bots' cannot see pictures, so the alt description tells them what is on the page too.]
Moving on, the next tags include an block format instruction 'h2'. 'h(#)' is a text size and boldness pre-definition with size range from h1 to h6, with 1 being the largest.
The first bit of text is then written for the body of the page. At this point you should have noticed that some tags, at the end of instruction lines, include the '/' and some do not. Confusing, I know, but the rule of thumb is: If it's an instruction to the browser rather than a description, it must be closed when no longer required. Failure to close instructions can produce frustrating and/or hilarious results when you pre-view your page locally!
The balance of the page follows these guidelines. For a description of the various instructions that can be enclosed in tags, and what they are, see the HTML appendix. This list can be printed for quick reference.
Now Jump to Javascript code basics , CSS code basics , Basic W3C coding conventions or Code examples for you to cut and paste.
Alternatively, click on a link below to navigate the site.
| Contents | Code index page | Exit Here | Contact: |
Created on November 9, 2002
copyright©2002 Wilde Pages Ltd.,
except for JavaScript's where authorship / ownership acknowledged.