A great way to understand web page markup is to play with it. (If you're experienced editing HTML by hand you can ignore this.) This page gives you access to two files that you can experiment with to get a grasp of what happens. The markup (HTML) included here may be enough for a lot of web sites! Enjoy.

Understanding Markup

Last edited 2005-11-08

St Heliers Bay in the morning

This page is based on emails and computer sessions I've had over the years. I've found that a lot of people find the thought of web page editing intimidating. An easy start like this lets them realise how easy it really is. This is a do-it-yourself experience, no further support is offered.

These basics also give you a great springboard to evaluating other people's work!

Nested Brackets

Web pages are made up of "nested bracketed sections". The most familiar brackets might be (), [] and {}. In HTML, the language of web pages, they look like <b></b> or <html></html>. This opens up the possibility of a large number of bracket types, which are called tags.

Few Tags

I've found that you need very few tags to do a good job.

Basic Structure

The basic structure of a web page is:

<html>

  <head>

  </head>

  <body>

  </body>

</html>

Where <html> defines the whole page, <head> defines some stuff you can't see but is useful and <body> defines the bits you do see.

Do It

It takes time to wade through all the tags and decide which ones are useful. The example here gives what I need for most work.

To explore how markup works save these two files in the same file directory (folder)

on your computer.

Point at ExploreMarkup.htm in your file browser and double click. Your browser should open up showing the page.

Then play with it. Edit the source file, save your changes then see what happens in the browser. There are descriptions in the file and you can build it into whatever you want. It's not hard.

For an editor use a simple text editor like Notepad, or whatever you prefer. Use browser refresh to see the changes.