Paragraphs and Headings
|
| ||||
| ||||
|
|
Our document, as noted previously, is comprised of a heading and two
paragraphs. HTML has elements specifically designed to denote headings
and paragraphs. Paragraphs are simply denoted by the P
element. Headings are a bit more complicated, as you can have as many as
six levels of headings. These are represented by the H1,
H2, H3, H4, H5 and
H6 elements. The following example shows paragraphs and
multiple levels of headings in action:
<H1>Memo: Designing ACC's Website</H1> <P>Here are some notes on designing AcmeComCorp's Website.</P> <H2>Learning good HTML</H2> <P>The level of HTML knowledge in this company is terrible. We should all go over to the HTML with Style and get up to date with our HTML if we're going to design a proper Website.</P> <H2>Thinking of something more original</H2> <P>Can't you people think of something less boring? Even our competitors, may their name remain unuttered, have more interesting things to say about themselves.</P>
Now let's mark up our text with the appropriate tags and insert it into our HTML document:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"> <HTML> <HEAD> <TITLE>Acme Computer Corp.: Who We Are</TITLE> </HEAD> <BODY> <H1>Acme Computer Corp.</H1> <P>Acme Computer Corporation is a technology-based company that seeks to offer its customers the latest in technological innovation. Our products are created using the latest breakthroughs in computers and are designed by a team of top-notch experts.</P> <P>We are based in Acmetown, USA, and have offices in most major cities around the world. Our goal is to have a global approach to the future of computing. Have a look at our product catalog for some examples of our innovative approach.</P> </BODY> </HTML>
That's it! We're finished! The above is a complete, valid HTML document. You can take a break and have a look at how your browser renders it.
You might have noticed that this page is not the pinnacle of Web design, for various reasons. However, it's a start, and what you've learned today are things you'll need for every single HTML document you ever design. In our next tutorial, in two weeks time, we'll explore the concept of hypertext links and insert some in our document. And since we'll need to link with something, we'll create a product catalog for Acme as well.
