Step 1 -- HTML and the basics of a web page.
What a web page is.
If you create a .txt document in Notepad and call it up with a web browser, the browser will display the file as plain ugly text. Here is an example. How does a browser make a document look like a web page? The document will have <tags> embedded in the text to "mark up" the text with formatting commands that the browser will understand and interpret. A markup language is a very common way of creating a document and stands at the opposite end of the document tool spectrum from the WYSIWYG (what you see is what you get) editors such as Microsoft Word. It is favored by those who are typesetting books, for example, because of the complete control the author has.
If the .txt document you saw above has a few tags embedded and is renamed to have a .html or .htm extension the page will (begin to) look like a web page. See it here. It doesn't look a whole lot better, but now it is a genuine web page. Look at the notes below to see what tags were added and what they do. Once the tags make sense, try creating a simple web page with your name and a few details you might want public. Here is the file that actually produces the web page, stored as a .txt file so you can see the html. Use your back button on the browser to return here.
HTML versus XHTML
We will refer to HTML throughout these pages but the pages actually describe XHTML. XHTML 1.0 is almost the same as the latest HTML 4.01 and is likely to be the new path that HTYML development takes. XHTML 2.0 is almost available but anything described here will likely work in the future. There is some discussion of an HTML 5.0.
In addition to getting to choose between HTML and XHTML, the web page author can also choose between transitional and strict versions. What these choices are about is warning your web browser about what to expect in a web page so it can display the pages in the best possible way. Check out the compliance section (step 9) for more details.
Necessary tools
To create a web page, all you need is a plain-text editor, like Notepad or BBedit, and a place to put your web pages. While you are practicing, you can put the pages in a folder on your computer and click on the page to display it. We will set up the pages so that the whole collection can be dragged to your actual website location when you are ready to make it public.
To start, set your folder options so that extensions are displayed, and when you save a file be certain that it has either the extension .html or .htm in its name.
The basic tags
Below is the XHTML code that generated the dull page mentioned earlier. The code we will use is going to be strict XHTML 1.0. XHTML 2.0 is now available but nothing presented here should change much with XHTML 2.0.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>My dull example</title>
</head>
<body>
<p>See, this is just a </p>
<h1> SIMPLE </h1>
<p>text file.
Notice the spacing and layout,
which is NOW NOT exactly as it appears in the file.
</p>
</body>
</html>
Now, here is what you should notice in the code
- The parts of the file that are important to us now are the tags. These are the words enclosed in brackets, like <html>.
- At the top of the HTML code, before the html tag,are several additional lines of text. The purpose of this text is to let the browser know which of the many versions of HTML or XHTM you are using so it can do the best possible display of your page.
- Spacing in the web file is irrelevant to the appearance of the text on the displayed page. The whole file could be written as one long line.
- The key tags are <html> <head> <title>My dull example</title> </head> <body> </body> </html>
- Look closely at the tags and you will see that they are nested. The opening <html> and closing </html> hold the HTML document. Inside this you will find a head and a body. Inside the head, you will find a title, one that does not appear on the actual web page display, but elsewhere in the browser window.
- Almost every <tag> you encounter will have a corresponding closing </tag>. In the limited cases where no closing tag is needed, some special notation is required in the latest HTML and XHTML specifications to show this.
- What you place inside the opening and closing body tags is what will appear on the displayed page.
- Important! Note that in XHTML, all tags must be lowercase.
Testing the page
Type up a page similar to this one using a text editor. Copy the first two lines and the meta line exactly as you see it. Save the file under the name index.html (explanation later) and double-click on the file to display it.
I have put the basic required tags in a text file.
Paragraphs, headings and the basic layout
Block elements
The simplest web page will consist of a series of block elements like
- paragraphs denoted by <p>text goes here</p>. Within a paragraph your text spacing doesw not matter. Multiple spaces and new lines are reduced to a single space.
- headings denoted by <h1>heading goes here</h1> with h1 through h6 defined.
- ordered and unordered lists denoted by <ol>list items go here</ol> and <ul>list items go here</ul>. These will be discussed later.
- tables beginning and ending with a <table> tag. The structure is a bit more complex and will be discussed in step 8.
- preformatted text denoted by <pre>text goes here</pre> puts text on the page with the spacing you have created.
Browsers adopt the simple procedure of placing one block after another down the page. That is, each element follows the next with some spacing between successive blocks. The spacing will be explained as we look at margins and padding later, but for now just accept the default values.
So, if we were to imagine a page with say two levels of headings and paragraphs of text, the HTML structure might look like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>My dull example</title>
</head>
<body>
<h1>The first main heading </h1>
<h2>sub heading</h2>
<p>a paragraph of text</p>
<p>a paragraph of text</p>
<p>a paragraph of text</p>
<h2>sub heading</h2>
<p>a paragraph of text</p>
<h1>The second main heading </h1>
<h2>sub heading</h2>
<p>a paragraph of text</p>
<p>a paragraph of text</p>
</body>
</html>
Take a look at how the actual page is displayed. You see that all of the fine indenting in the HTML did nothing for us. Those indents were strictly for the benefit of the reader of the HTML code. Very useful for the editor of the page, but maybe not what was expected. The display, however, just did what was implied in the discussion of blocks -- the blocks just march down the page, one after another, like this:
This illustrates a very important idea in the current thinking of HTML and XHTML -- that structure, like the blocks above, and the style of the content should be rigorously separated. That turns out to make it easier to keep web pages consistent and reasonably good looking even if you aren't a great graphic designer.
Tags that do not create blocks
Some tags do not create block elements. The tags <em> ... </em> and <strong> ... </strong> will italicize or bold, respectively, the enclosed text but not separate it from previous text in a new block. Such tags are called inline tags.
One further sort of inline tag is <br> which causes an immediate new line but without the spacing that comes with a new block. <br> is peculiar, but not unique, in that it also has no closing tag. The latest HTML and the newer XHTML both require that such empty tags contain their own match, i.e. write it like this: <br />. A space before the / is required in strict XHTML.
