Learn HTML and CSS: An Absolute Beginner’s Guide

The Most Basic Web Page in the World

Actually, that heading’s a bit of a misnomer: we’ve already shown you the most basic page — the one without any content. However, to start to appreciate how everything fits together, you really need to see a simple page with some actual content on it. Let’s have a go at it, shall we?

Open your text editor and type the following into a new, empty document (or grab the file from the code archive if you don’t feel like typing it out):

<!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">    
 <head>    
   <title>The Most Basic Web Page in the World</title>    
   <meta http-equiv="Content-Type"    
       content="text/html; charset=utf-8"/>    
 </head>    
 <body>    
   <h1>The Most Basic Web Page in the World</h1>    
   <p>This is a very simple web page to get you started.    
       Hopefully you will get to see how the markup that drives    
       the page relates to the end result that you can see on    
       screen.</p>    
   <p>This is another paragraph, by the way. Just to show how it    
       works.</p>    
 </body>    
</html>

Once you’ve typed it out, save it as basic.html.

If you’re using Notepad:

  1. Select File > Save As… from the menu and find the Web folder you created inside your Documents folder.
  2. Enter the filename as basic.html.
  3. Select UTF-8 from the Encoding drop-down list.
  4. Click Save.

If you’re using TextEdit on a Mac, first make sure that you’re in plain text mode, then:

  1. Select File > Save As… from the menu.
  2. Find the Sites folder, enter the filename as basic.html.
  3. Select Unicode (UTF-8) from the Plain Text Encoding drop-down list.
  4. Click Save.
  5. TextEdit will warn you that you’re saving a plain text file with an extension other than .txt, and offer to append .txt to the end of your filename. We want to save this file with an .html extension, so click the Don’t Append button, and your file will be saved.

Caution: The Importance of UTF-8

If you neglect to select UTF-8 when saving your files, it’s likely that you won’t notice much of a difference. However, when someone else tries to view your web site (say, a Korean friend of yours), they’ll probably end up with a screen of gobbledygook. Why? Because their computer is set up to read Korean text, and yours is set up to create English text. UTF-8 can handle just about any language there is (including some quite obscure ones) and most computers can read it, so UTF-8 is always a safe bet.

Next, using Windows Explorer or Finder, locate the file that you just saved, and double-click to open it in your browser. The figure below shows how the page displays.

Displaying a basic page

Analyzing the Web Page

We’ve introduced two new elements to our simple page: a heading element, and a couple of paragraph elements, denoted by the <h1> tag and <p> tags, respectively. Do you see how the markup you’ve typed out relates to what you can see in the browser? The figure below shows a direct comparison of the document displays.

Comparing the source markup with the view presented in the browser

The opening <h1> and closing </h1> tags are wrapped around the words “The Most Basic Web Page in the World,” making that the main heading for the page. In the same way, the p elements contain the text in the two paragraphs.

Important: A Case of Keeping Low

The tags are all lowercase. All of our attribute names will be in lowercase, too. Many older HTML documents include tags and attributes in uppercase, but this isn’t allowed in XHTML.

Headings and Document Hierarchy

In the example above, we use an h1 element to show a major heading. If we wanted to include a subheading beneath this heading, we would use the h2 element. A subheading under an h2 would use an h3 element, and so on, until we get to h6. The lower the heading level, the lesser its importance and the smaller the font size (unless you have re-styled the headings with CSS, but more of that later in this article.

With headings, an important and commonsense practice is to ensure that they do not jump out of sequence. In other words, you should start from level one, and work your way down through the levels in numerical order. You can jump back up from a lower-level heading to a higher one, provided that the content under the higher-level heading to which you’ve jumped does not refer to concepts that are addressed under the lower-level heading. It may be useful to visualize your headings as a list:

  • First Major Heading
    • First Subheading
    • Second Subheading
      • A Sub-subheading
  • Another Major Heading
    • Another Subheading

Here’s the XHTML view of the example shown above:

<h1>First Major Heading</h1>    
<h2>First Subheading</h2>    
<h2>Second Subheading</h2>    
<h3>A Sub-subheading</h3>    
<h1>Another Major Heading</h1>    
<h2>Another Subheading</h2>

Paragraphs

Of course, no one wants to read a document that contains only headings — you need to put some text in there. The element we use to deal with blocks of text is the p element. It’s not difficult to remember, as p is for paragraph. That’s just as well, because you’ll almost certainly find yourself using this element more than any other. And that’s the beauty of XHTML: most elements that you use frequently are either very obvious, or easy to remember once you’re introduced to them.

For People Who Love Lists

Let’s imagine that you want a list on your web page. To include an ordered list (the HTML term for a numbered list) of items, we use the ol element. An unordered list — known as bullet points to the average person — makes use of the ul element. In both types of list, individual points or list items are specified using the li element. So we use ol for an ordered list, ul for an unordered list, and li for a list item. Simple.

To see this markup in action, type the following into a new text document, save it as lists.html, and view it in the browser by double-clicking on the saved file’s icon:

<!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">    
   <head>    
     <title>Lists – an introduction</title>    
     <meta http-equiv="Content-Type"    
         content="text/html; charset=utf-8"/>    
   </head>    
   <body>    
     <h1>Lists – an introduction </h1>    
     <p>Here’s a paragraph. A lovely, concise little paragraph.</p>    
     <p>Here comes another one, followed by a subheading.</p>    
     <h2>A subheading here</h2>    
     <p>And now for a list or two:</p>    
     <ul>    
       <li>This is a bulleted list</li>    
       <li>No order applied</li>    
       <li>Just a bunch of points we want to make</li>    
     </ul>    
     <p>And here’s an ordered list:</p>    
     <ol>    
       <li>This is the first item</li>    
       <li>Followed by this one</li>    
       <li>And one more for luck</li>    
     </ol>    
   </body>    
 </html>

How does it look to you? Did you type it all out? Remember, if it seems like a hassle to type out the examples, you can find all the markup in the code archive, as I explained in the preface. However, bear in mind that simply copying and pasting markup, then saving and running it, doesn’t really give you a feel for creating your own web site — it really will pay to learn by doing. Even if you make mistakes, it’s still a better way to learn (you’ll be pleased when you can spot and fix your own errors yourself). When displayed in a browser, the above markup should look like the page shown below.

There are many, many different elements that you can use on your web page, and we’ll learn more of them as our web site development progresses. As well as the more obvious elements that you’ll come across, there are others that are not immediately clear-cut: for example, what would you use div, span, or a elements for? Any guesses? All will be revealed in good time.

Using unordered and ordered lists to organize information

Go to page: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

No Reader comments

Comments on this post are closed.