Chapter 3: A Basic Web-Page


In this, magnificent chapter you actually get to get your hands dirty (unless your keyboard/mouse is clean...) and play with some HTML. Don't panic though, you don't need to download anything. I've programmed a little yet extremely efficient if I say so myself application that will give you everything you need right here! </showing off>

A Basic Web-page

First thing's first, I'll show you a very simple, working web-page and explain everything for you.

  <title>About our work</title>
  <p>Hello visitors! Our products are of poor quality. Please visit the competition.</p>

The <html> Tag

Okay, so as you can see, the above page is made up of four different types of tag. The page first opens with the <html> tag. This tag tells the browser that everything following is HTML, all the way up to the closing </html> tag at the end. There is only ever one HTML tag (including it's closing tag) on any web-page.

The <head> and <title> Tags

After this we have the <head> tag, which defines the header section. The header section of the page is invisible to the user and contains no paragraphs, no bullet points, no images etc. The header section is used for telling the browser about the page and it's content. Here, we're telling the browser that the title of this page is "About our Work".

If you right click and click 'View Source' on this page of the tutorials, you'll see that the <title> tag for this page is "Chapter 3 - A Basic Web-Page, Website Building Tutorials, Sckewi's 'Web' Site". You may also see that the browser has put that text on the left of the bar at the top of this window.

In later chapters I will show you that the <head> section can also be used for including CSS in your document, though for now, let's stick with HTML.

The <body> and <p> Tags

After the <head> section, we have the <body> section. The code for the structure, and the content of the web-page that the visitor can see goes here. In this demonstration web-page I've put in a single, polite paragraph of text. When a visitor comes to this page it will be the only thing they see on the web-page itself.

Have a go!

Anyways, enough of talking, let's put it in action! And once you're confident, this chapter's quiz awaits patiently...