« Basic HTML: I :: Main :: Referrers »

Basic HTML: II

By Rudolf Ammann :: May 26, 2003

This is the second part of the introduction to HTML, a little bit more complete than the first.

A complete HTML page consists of at least the following things, as illustrated in the code below:

  1. A starting and a closing html tag at the beginning and the end of the document, respectively.
  2. In between the starting and the closing html tags, the document breaks down into two main sections: Head and Body: the Head section mostly contains information about the page, whereas the Body section contains the page itself. Both Head and Body each have an opening and a closing tag.
  3. The Head must at least contain the document title, which appears inside the opening and closing title tag.
  4. The most basic elements in the Body are headings and paragraphs: both these elements have tags: headings have H tags, paragraphs have P tags. Every heading must be placed in an opening and a closing H tag, every paragraph must be placed in an opening and closing P tag. The first of the three paragraphs in the example below also contains a hyperlink.

<html>

<head>
<title>Lipsum</title>
</head>

<body>

<h1>Lorem ipsum dolor sit amet</h1>

<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce hendrerit neque ut dui. Etiam ut elit ut pede fringilla molestie <a href="http://www.google.com">ligula eu ipsum</a>. Donec sit amet augue nec odio luctus vehicula. Cras tempus. Pellentesque nisl ligula, eleifend at, dignissim ut, nonummy sit amet, sem. Nulla gravida. Suspendisse potenti. Sed urna. Sed convallis fermentum nunc.</p>

<p>
In laoreet, pede sit amet imperdiet semper, lectus nulla lacinia ante, ac ultrices lectus ligula ac elit. Maecenas sed nibh ut pede nonummy facilisis. Donec scelerisque, enim at elementum rutrum, erat urna vestibulum dolor, eu tempus odio lectus at nibh. Sed vitae purus. Proin lacinia lectus ac velit. Suspendisse quis lacus. Sed tincidunt, justo sit amet euismod vestibulum, erat nibh mollis ligula, in laoreet magna ante id mi. Nunc urna. </p>

<p>
Praesent tempor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis sed orci. Donec nunc. Quisque nec odio et elit mattis facilisis. Nulla et felis. Nulla sed enim non nibh aliquam accumsan. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer nibh nibh, sollicitudin id, tempus non, aliquam eu, quam. Aenean condimentum enim in eros. Donec id mauris.</p>

</body>

</html>

In a browser, the above example looks like this.

To find out more about HTML, take a look at NCSA's A Beginner's Guide to HTML!

Comments