Site hosted by Angelfire.com: Build your free website today!
Contents

* Getting started
* DOCTYPE declaration
* META & TITLE tags
* Colour & layout
- Text organization * Images
* Tables
* Validation

[Home]
Well, let us begin looking at block-level elements. Remember: these can contain inline elements as well as other block-level elements.
You have to scroll down to see the material, because this text you are reading right now is contained in a table's data cell, and you are not allowed to use plain headers within a data cell [that's what header cells are for.. see the Tables section for more]. And how am I supposed to show you headers if I cannot use them here?
Here's some more HTML information that you probably should have: HTML is non-case sensitive and non-white-space sensitive. The former means that you CaN tYPe yOuR tAgS lIkE tHIs fOr AlL iT caReS. The latter means that no matter how many times you press space, it will collapse it into one single space. One way to get around that is the <PRE> tag. You just type <PRE> then your code with all sorts of fancy spacing then </PRE> and your formatting will be saved [It will also automagically add two blank spaces before and after the preformatted text]. The downside to PRE, though, is that it renders everything in a monospaced font but you can get around that using stylesheets [see CSS tips for more]:
  T h i s   is   w ha t    t h e <P R E > 
tag   p r o duce s  in  m y  co l our   s c hem e
[No, the spacing won't look like *that* - I did that ;)]
The first tag we're going to look at is the <H#> tag. H stands for Header and # can be any number from 1 to 6. Let me demonstrate:
<H1>This is a level-1 header</H1>

This is a level-1 header

<H2 ALIGN="center">This is a level-2 header aligned in the center</H2>

This is a level-2 header aligned in the center

<H3 ALIGN="right">This is a level-3 header aligned right</H3>

This is a level-3 header aligned right

<H4>This is a level-4 header</H4>

This is a level-4 header

<H5>This is a level-5 header</H5>
This is a level-5 header
<H6>This is a level-6 header</H6>
This is a level-6 header
Note that if you want to A NAME your header [see Anchor tag section], you MUST place the <A NAME="headername"> tag after the <H#> tag and the </A> tag before the </H#> tag. Also, see all that blank space? I didn't do it [I swear! :)]. As soon as you start a header, it automagically leaves two blank spaces above and below itself.

Okay, so how do you align a block of text on the page in a way other than `left'? You know that you cannot just TAB over [there was a TAB tag in development, but they canned it for some strange reason], so what do you do?
Let's start with the easy stuff. The easiest alignment is that in the center:
<CENTER>This text is centered</CENTER>
This text is centered
Note that as soon as you close the CENTER tag, it automatically breaks the line for you. This tag is being pushed out by the much more user-friendly <P ALIGN="center">, which defines a new paragraph aligned in the center - it automagically breaks two lines and when you close it [<P>] it breaks another two lines, so subsequent text starts two lines after it:
<P ALIGN="center">This is user-friendly centered text</P>

This is user-friendly centered text

See? You can also use the <P> tag to align things on the right:
<P ALIGN="right">This text is aligned right</P>

This text is aligned right

P can also justify text for you:
<P ALIGN="justify">This text is justified</P>

This text is justified. Boy, it's so justified. I know it doesn't look like that yet, but if I type some more in here, at least three lines then you'll see that it is, in fact justified. Do not try and bend the spoon. That's impossible. Instead, only try to realize the truth.

...or you can leave it alone and simply open it with <P> and close it with </P> and it will default to the left. Neat, huh?
There is another way to align blocks of text on a page. It's called DIV and it's the block-level equivalent of SPAN, only DIV is more powerful - it can include other SPAN tags, or other DIV tags, or P tags, or even TABLEs. I make extensive use of DIV [because it only causes one line break instead of two, unlike P], but be warned! WebTV doesn't understand DIV. Here are examples of DIV at work:
<DIV ALIGN="left">This text is aligned left</DIV>
This text is aligned left
<DIV ALIGN="center">This text is aligned in the center</DIV>
This text is aligned in the center
<DIV ALIGN="right">This text is aligned right</DIV>
This text is aligned right
<DIV ALIGN="justify">This text is justified</DIV>
This text is justified. Oh no, here we go again. I have to type a bunch of nonsense so you can see just how justified this text is. Well you're probably wondering `What truth?' - There is no spoon. If you haven't seen The Matrix, this won't make much sense to you. Just ignore it :)

See? If you view the source for this page, you will see that I had to include a BR tag before I started typing this comment, because DIV only breaks one line.

Now let's talk about block-level quotations. The tag used in these is BLOCKQUOTE and you should use it whenever you're citing a source and your citation is more than 4 lines in length. Or you can use it to simulate a TAB effect :) See for yourself:
<BLOCKQUOTE>This is a block quotation</BLOCKQUOTE>
This is a block quotation. I suppose I should type a whole bunch of words here so you can see what it looks like when you use more than the standard `this is that' thing. Blah, blah. The truth is out there. Follow the white rabbit. Blah, blah. Okay, this should be enough
Note that I did not use any line breaks - as soon as you `activate' BLOCKQUOTE, it automagically breaks two lines, `tabs' over twice and justifies. As soon as you close the tag, it breaks two lines again and returns you to your previous positioning in the document. The beauty of it all is that you can use BLOCKQUOTE within BLOCKQUOTE within BLOCKQUOTE. However, if you use it for things other than long citations, you may confuse your blind visitors, who will think it is a long citation because that is its function. Also note that BLOCKQUOTE cannot be used if you are in a paragraph [don't ask me why]
All right, before we move on to learn about lists, this is how you make a Horizontal Rule [HR]:
<HR SIZE="#" WIDTH="x%" ALIGN="center/left/right">
This is a size 1 rule that spans 100% of the page
This is a size 2 rule that spans 50% of the page, aligned in the center
This is a size 3 rule that spans 20% of the page and aligns right

This is a size 4 rule that spans 5% of the page and aligns left
...and so on up to SIZE 8. Well, let's learn about lists now. No, you can't make vertical rules. It would be nice though :).
[Previous page] [Next page]