You can place your order for this powerful new learning tool at any time. Simply select the link below, fill in the appropriate shipping information, and pay using PayPal. Your book-on-DVD will be shipped to you by Canada Post as quickly as possible.

Section 1: Your first HTML (Web) page

To start it is important you understand HTML page, html page and web page all mean the same thing. We can add XHTML to this list as well. All of these names are simply human names for any file whose name ends with .html (or the less common .htm). A web browser (IE, Firefox, Safari, Opera, etc.,) will try to read and open any file whose name ends with .html or .htm. An html file is a plain text file whose name ends with .html or .htm. There is nothing in an html file that cannot be typed from a standard keyboard.

An html file consists of two major parts: a head and a body. The head contains information that does not appear directly in a browser window. The body contains instructions for everything that is supposed to appear in a browser window.

HTML element

starts with <html> and ends with </html>
required
The closing </html> is always the last code in a web page file
The opening <html> is close to the first code in a web page file (see below)

HEAD element

Starts with <head> and ends with </head>
Required
Contains information that can be useful to the browser
May contain instructions about what some or all of the information on the page looks like or what it does
Must contain the page title.
- Starts with <title> and ends with </title>
- Title element is required.
- Title appears in the "title bar" of the browser, the words that appear in the bar at the top of the browser are the words written in the title in the head of an html document
- The title is the information that starts the description of a page in a search engine. It is what most search engines use to identify the pages of a site.

Every html document is required to have a title. It is the first thing that a potential user or customer of your site will learn about your site. If your pages are going to be part of a public site you should be careful what you put in the title. If you work through the exercises in this book, I suggest each page have a title that shows what part of the book it came from: perhaps the number of the chapter and section and perhaps a number to indicate which file you are working on (something like chap03file08 or Chap_3file_8).

Other elements

An html file, a web page, has a pair of codes that are used to open and close the file. In addition we need code at the beginning of the file to tell the browser (and other tools, like a code validator) what set of rules, what standard, was used to write the file. That information is provided to you in the templates available in the Chapter 1 folder of this book. (The file is called StrictTemplate.html This file should work well with any browser. As explained in the prep01.txt file, Internet Explorer, at least to version 7, does not work as a browser should with standard XHTML Strict files. There is a second template that is a standard XHTML Strict file which will work with all browsers including Internet Explorer. You can use either one or both in your work. Internet Explorer 8 is much more compliant with XHTML and CSS.

You can open either or both templates in a text editor or in a browser. If you open the template file in a browser, then select View | Source in the browser to look at the code. Or look at this copy of the Strict Template file.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml/DTD/xhtml1-strict.dtd">

<head>

<title>Title</title>

</head>

<body>

<p>Put your text in paragraphs like this one.</p>

</body>

</html>

You will know a lot more about this information in a lesson or two than you do right now. Probably right now it looks a little strange.

Remember that everything that is in an html file can be typed from a standard keyboard.
Look for pieces of information that start with an angle bracket < ("less than" sign) and end with an angle bracket > ("greater than" sign). All of those pieces of information are html codes.
- individually these are called tags or codes
- they represent XHTML elements
- strictly speaking an element is the pair of tags and the content written between them
Notice most of the html codes occur in pairs. There is one code that is <code word> and another that is </code word>. The "<...>" marks the start of an instruction, the "</...>", the one with the forward slash, marks the end of an instruction.
- Each web page built on this template starts with a DOCTYPE declaration which is discussed below.
- Each web page then has the opening <html> code (or some longer variation as we see here. <html xmlns="http://www.w3.org/1999/xhtml"> And each web page ends with </html>. The closing code is always the same, it never changes.
- The head part of the document starts with <head> and ends with </head>
- The title part in the head starts with <title> and ends with </title>
- And so on.
- You should be able to identify the pairs of codes now.
Most elements have a start and a stop, a beginning and an end. Codes that always occur in pairs with information in between the pair of codes are called "container codes" or "container elements" (they contain information). Every container code starts with one that looks like <...> and ends with one that looks like </...>.
The first code in the file is the one that starts <!DOCTYPE. Every web page must have one. The DOCTYPE declaration tells the browser what standard was used to write the code on the page. In this case it was the xhtml11-strict.dtd: the XHTML version 1.0 Strict document type.
At least two other elements in the head are not paired. Any element that does not have a closing partner, any element that is not a container element, is called either an "empty" element or a "self-closing" element. Notice that both the meta element and the link element end with />. Empty elements all have the same basic structure and all must be closed as you will learn in Chapter 3.