Tutorials Bugs Masterclass Free stuff Test pages Proposals

Basic concepts

Advanced concepts

RichInStyle.com HTML 4 guide - Beginning HTML

Contents

Getting started

Example web page

HTML concepts

Tags

Elements

Attributes

Attribute values and quote marks

Anatomy of a web page

Item 1 - the <HTML> tag

Item 2 - the <HEAD> tag

Item 3 - the <TITLE> tag

Item 4 - the </HEAD> tag

Item 5 - the <BODY> tag

Item 6 - the <H1> tag

Item 7 - the </H1> tag

Item 8 - the <P> tag

Item 9 - the </P> tag

Item 10 - the </BODY> tag

Item 11 - the </HTML> tag

Getting started

HTML is simply human-readable text. See below for an example of a web page.

Example web page

<HTML>
  <HEAD>
    <TITLE>
      My first web page
    </TITLE>
  </HEAD>
  <BODY>
    <H1>
      About me
    </H1>
    <P>
      I live in New Hampshire.
    </P>
  </BODY>
</HTML>

And that would be displayed similar to that below:

About me

I live in New Hampshire.

I will explain what each of the lines means one by one, but first note the following: that the indentation makes no difference to the page, but is merely there to make it easier to read - the following would have the same effect:

<HTML><HEAD><TITLE>My first web page</TITLE></HEAD><BODY><H1>About me</H1><P>I live in leafy New Hampshire.</P></BODY></HTML>

In addition, case is unimportant in HTML - you can equally well place your markup in lowercase or a combination of upper and lowercase.

HTML concepts

Tags

Any piece of text enclosed in < and > is called a tag. This distinguishes it from normal text. A tag is an instruction to the web browser that will not appear on screen. It does not matter whether tags are in upper or lower case.

Most opening tags will have a closing tag. Closing tags look the same as opening tags but has a / to mark it as closing. For example, here is a hypothetical opening tag: <atag>, and here is its closing tag: </atag>.

Elements

A tag is a marker, an element is an actual thing. For example, given this:

<B>bold text</B>

the <B> and </B> are open and closing B tags, but the 'bold text' as a whole is the B element.

Usually, the start and end of an element is marked by a tag, but this is not necessarily so - sometimes these are implied

For example, the HTML element (which is simply the element that contains the whole of a web page) is implied. This means that even if you don't have the opening or closing tag, since every web page, by definition, includes the HTML element, the element's presence is implied.

Similarly, for paragraphs (the P element), although you may not omit the opening tag, you may omit the closing tag, since if you have:

<P>
Paragraph
<P>
Next paragraph

then the P tag by starting the second paragraph implies the end of the first paragraph.

Attributes

An attribute is something that gives the browser extra information about the element. Attributes are only specified on opening tags, since there is no point in telling the browser something about a tag that is being closed.

For example, <BODY bgcolor="white">, bgcolor is BODY's attribute. Attributes usually have values, e.g., <TAG attribute="value">, but not in all cases - e.g., <TABLE border>.

Attribute values and quote marks

Attribute values (e.g., white in bgcolor="white") must be enclosed in matching quotes (" " or ' ') unless they only contain a-z, A-Z, 0-9, -, and '.'. However, since they are always valid if included but sometimes invalid if not included, it is recommended that you always use quote marks.

To illustrate, <P style=color: red> is not valid, since the attribute value contains spaces and a colon, but <BODY bgcolor=red>, is, since it does not.

Anatomy of a web page

This section introduces you to the most important concepts introduced in the small piece of HTML above.

Item 1 - the <HTML> tag

The first line of any web page should (but need not) be this tag.

Item 2 - the <HEAD> tag

Next comes this tag. It contains any content that is not displayed as part of the body of the document.

Item 3 - <TITLE>

Between the <TITLE> and </TITLE> tags come the document's title. E.g., <TITLE>Introduction</TITLE>. The TITLE will be displayed at the top of the screen in the application's title bar. Every document MUST have a title.

Item 4 - </HEAD>

This is to say that the HEADer is over.

Item 5 - <BODY>

This says that now you want to put the BODY. Inside the BODY comes things like paragraphs, lists and headings.

Item 6 - <H1>

This is to say that you want a heading now. The H stands for heading, and 1 for the size of the heading. There are 6 sizes of heading from H1 down to H6.

Item 7 - </H1>

This says that the heading is over. If you did not tell the browser this, it would think everything was a header, and display everything in the huge header font.

Item 8 - <P>

This says that now we want a paragraph. Without this tag, there would be no space between paragraphs.

Item 9 - </P>

Now our paragraph is over.

Line 10 - </BODY>

Now our BODY is over.

Line 11 - </HTML>

Now the HTML file is finished.

Now that I've introduced you to the basic concepts of HTML, I suggest that you try making a page of your own. Try starting with the basic page above, and then save it (you shouldn't use a word processor to do this, because it will save it with all kinds of irrelevant formatting information - instead use a text editor such as Notepad) and load it up in your web browser. Be sure to give it a name ending in '.html' or '.htm' - e.g., myfile.html.

Once you are totally happy with what has been discussed so far, you should continue with the next section, which considers individual elements.