Hello World: Lesson 3 - Essential Formatting Part I
Headings
You should have your first Web page by now, but it doesn't exactly look
very exciting. No doubt you've seen or heard about multimedia, with full
motion video and audio across the Internet, or at least the possibility
of viewing graphics. These will come. Many of the fundamentals of good
design, however come from using text creatively and, while HTML isn't
a particularly complex language, it does provide some useful tags to present
text in different formats.
The first of these you've already encountered - headings - but their
significance can't be underestimated. There are six levels of heading
tag in HTML, from H1 to H6. These effectively alter the size of text in
relation to the main body text and so are handy for instant emphasis.
Headings are contained between the tags <Hn> and </Hn>,
where n is a number between one and six. Place these tags on either side
of the text you want to make into a header and your page will have immediate
impact.
Paragraphs, blockquotes and lines
More effects are provided by two essential tags that crop up frequently
on most of the pages you'll design with these tutorials, the BLOCKQUOTE
and Paragraph tags. What these tags do is to create paragraphs and indent
them, making text easier to read. You should note that while the <BLOCKQUOTE>
tag must be followed by </BLOCKQUOTE> surrounding the text you want
to indent, you can easily create a paragraph simply by typing <P>
with no final tag at the end of a paragraph (though you can use </P>
if you wish , reflecting its importance as the single most used HTML instruction.
If you want to create a line break without a space, use the break tag
<BR> which functions very much like the Paragraph tag.
You may also need to use <P> to format blocks of text, for example
to right justify on the page or line up on the centre. You do this with
the ALIGN attribute followed by LEFT, RIGHT or CENTER, for example:
<P ALIGN=CENTER>Centre Stage</P>
Lines are another useful device for breaking up a page. To create these,
you use the tag <HR> (HR stands for Hard Return) to create a line
across the page. There are various attributes that can be assigned to
the HR tag to control width and length, but we'll deal with these in depth
later.
Exercise
<HTML>
<HEAD>
<TITLE>The Hello World Web Site - Basic text formatting</TITLE>
</HEAD>
<BODY>
<HR>
<CENTER><H1>Hello World! - Headers, Lines and Paragraphs</H1></CENTER>
<HR><P>
<H2>Simple Text Effects</H2><P>
<BLOCKQUOTE>
Here's your first sample of a second-level heading. Notice that it's smaller
than the main title at the top of the page. Also, the use of blockquotes
means that this whole paragraph is indented, making it simpler to read.
<P>
As with a word processor, however, the most important means by which
you divide text is via paragraphs. Running text on without a convenient
break can be very hard going on the eyes. The paragraph tag is also useful
for centring text like so:
<P ALIGN=CENTER>Making a phrase the centre of attention.<P>
And don't forget the humble line for a quick - but effective - way of
highlighting parts of your page. </BLOCKQUOTE><P>
<HR>
</BODY>
</HTML>
To see how your first Web page should look, click here.
When you've finished, click on the Back button at the top of your browser
to return to this page.
|
