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):
Once you’ve typed it out, save it as
If you’re using Notepad:
- Select File > Save As… from the menu and find the Web folder you created inside your Documents folder.
- Enter the filename as basic.html.
- Select UTF-8 from the Encoding drop-down list.
- Click Save.
If you’re using TextEdit on a Mac, first make sure that you’re in plain text mode, then:
- Select File > Save As… from the menu.
- Find the Sites folder, enter the filename as basic.html.
- Select Unicode (UTF-8) from the Plain Text Encoding drop-down list.
- Click Save.
- 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.
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.
<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:
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:
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
a elements for? Any guesses? All will be revealed in good time.