Basic
structure:
headings, paragraphs and lines
Headings
(<Hx> and </Hx>)
Headings serve as the titles of sections in a document, or of the whole document. There are six levels of header tags,
numbered 1 through 6, with 1 being the largest and the
boldest. In general, the first header in each document should be tagged with a large header, such as <H1>.
I often use <H2> since I find <H1>
a little too large as displayed in most browsers.
The syntax of the header tag is:
<Hx>Here is
My Header</Hx>
The x in the tags must be a number, 1 through 6 (and be
sure that both x's are the same number!) So, if you used the
header <H1>, it
would appear as:
Here is My Header
If, however, you used a higher numbered header like <H3> instead, you'd
get something like:
Here is My Header
In many documents, the first header you use at the top of
your web page will be identical to the title. For larger
documents, subheaders such as <H3>
can be used within the document to designate the start of a
new subject. Headers 1, 2 and 3 are
by far the most useful, for headers
4, 5, and 6 are usually too small: people
don't realise they're the titles of document sections!
Paragraph and line break Tags
HTML documents ignore <ENTER>: if you want to start a new line or a new paragraph, you need to say so by using the right tag. So, the following text:
Welcome to our
School Home Page.
This site is under construction.
would appear like this in a Web browser:
Welcome to our School Home Page. This site is under construction.
To just start a new line within the same paragraph, you use the tag <BR>. To start a new paragraph (i.e. a new line with a little space between it and the previous paragraph), you use the container tag <P> at the start of the paragraph and </P> at the end.
Originally the paragraph tag was just <P> with no end tag. It was changed already in version 2 of HTML, so that people could add attributes to it, such as alignment: <P align="center"> to center the text of the whole paragraph, for instance.
So, our HTML document with paragraph tags:
<P>Welcome to our School Home Page.</P><P>This site is under construction.</P>will appear as
Welcome to our School Home Page.
This site is under construction.
With a line Break Tag <br> in the middle instead of a paragraph tag:
<P>Welcome
to our School Home Page.<BR>This site is under
construction.</P>
it will look like this:
Welcome to our School Home Page.
This site is under construction.
Centering Text
The original HTML specification, believe it or not, had no way to center text. Netscape came up with the <CENTER> tag, which quickly became the de facto standard although it was never adopted into the HTML standard. To use it, you put
<CENTER> </CENTER> around the text you want centered. Of course the text has to be a paragraph: you can't center part of a line!
Version 2 of the HTML code already solved this problem by adding the "align" parameter to the paragraph tag, like this:
<P align="center">your paragraph</P>
You can align a paragraph to the right or to the left as well as to the center. This is why the committee that decides on the HTML standard never accepted the <CENTER> tag: they feel it's unnecessary. However, it's become so accepted that even Microsoft Internet Explorer understands it, even though it's a Netscape tag!
Horizontal Rules
The <HR> tag produces a horizontal line the width of the browser window. It's often used as a way to break up information in your document. You've already seen them in this tutorial too.
The basic <HR> command produces a line the width of the browser window, and 2 pixels (dots) wide, like this:
You can make the line as long or short as you want, by telling the browser what percentage of the screen width you want it to be: for instance
<HR WIDTH=50%>
tells the browser to draw a line half the width of the current window: like this:
At 10%, it would look like
and so on. You can also specify width in pixels, e.g. <HR width=300> but there is rarely a good reason to do so and since you don't know the size of the window that any particular user is running the browser in, the results can be very different from expected.
You can also change how thick the line is. The attribute for thickness (unfortunately!) is "size". Size is measured in pixels (screen dots). So
<HR WIDTH=50% SIZE=20>
gives you:
The final attribute for the <HR> command is "noshade". This has the opposite effect to what you would expect: it makes the line a not-very-pretty shaded grey, instead of the background color. (In fact the word "noshade" refers to the lack of shading and highlighting around the edges of the line, which gives the 3-D effect in a "shaded" line.) In addition, if your line is thick you'll notice that the ends are rounded:
<HR WIDTH=50% SIZE=20 NOSHADE>
gives you:
There is no closing tag for a horizontal rule, so you only need to have one <HR> tag for each time you want to use it.
|
 |
 |
 |
 |
