Custom Search

HTML Lesson 2

by Caroline Seawright

 

Time for HTML Lesson 2, the next step in my little HTML Lesson Articles!

Adding Text

<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
  My text to be written here.
  </body>
</html>

From Lesson 1, you can see where I've put the text - in between the two body tags. If it's outside these tags, it will mess up some browsers, so your page won't work on them.

Want to make your text bold, italic or underlined? (Though I'd avoid using underline completely - this makes people think that the underlined is a link! They will try to click on it, and it can be annoying if they really wanted to see a page about it!!!)

  <b>Text to be bold</b>
  <i>Text to be italic</i>
  <u>Text to be underlined</u>

You can make a word all three if you want! Just remember, if you start with one tag, end it last. Don't mess up the order of the tags, because it can do silly things in some browsers, and you might end up with all the rest of your text bold, or italic!!

Try like this:

  <b><i>This text is bold and italic</i></b>

See how bold is on the outside, and italic is on the inside? This is how HTML should always work - it's called nesting. First in, last out... or, first started, last ended!

Now what if you want to do more than one sentence, and use paragraphs, or have content that you want to place one under the other, like in a list?

To make a paragraph break, use this:

  <p>
  1st paragraph goes here.
  </p><p>
  2nd paragraph goes here.
  </p>

HTML can be done without the closing tag, but apparently HTML in the future will require it. So it's better to get accustom to using it now, right?

For a line break, use this:

  1st item goes here.<br>
  2nd item goes here.

Here is what the two will look like:

Paragraph BreakLine Break
1st paragraph goes here.

2nd paragraph goes here.

1st item goes here.
2nd item goes here.

There are other forms of lists, too!

If you want a list, with dots put next to the words (note: the text will be further across than the rest of your text!), or numbers, here is what we can use:

  <ul>
  <li>1st item</li>
  <li>2nd item</li>
    <ul>
    <li>1st sub-item of 2nd item</li>
      <ul>
      <li>1st sub-item of ...</li>
      </ul>
    <li>2nd sub-item of 2nd item</li>
    </ul>
  </ul>

Here's how this will look:

  • 1st item
  • 2nd item
    • 1st sub-item of 2nd item
      • 1st sub-item of ...

    • 2nd sub-item of 2nd item

Notice how we are nesting the unordered list (ul) tags? See how the list tag adds the dot?

When doing this, make sure that you don't mix up where you're starting and ending your list, and where you're putting your sub-lists! Play around with the code, and see what you can do with it, and see what you can't! Try taking away the <li></li> tags, and see what happens. Add text after the list, then try taking away a closing </ul> tag and see how that affects your page!

Another type of list is an ordered list. This is exactly the same as the above list, but do it like this:

  <ol>
  <li>1st item</li>
  <li>2nd item</li>
    <ol>
    <li>1st sub-item of 2nd item</li>
      <ol>
      <li>1st sub-item of ...</li>
      </ol>
    <li>2nd sub-item of 2nd item</li>
    </ol>
  </ol>

Here's how this will look:

  1. 1st item
  2. 2nd item
    1. 1st sub-item of 2nd item
      1. 1st sub-item of ...

    2. 2nd sub-item of 2nd item

Ordered lists are somewhat restrictive, as you can see. It doesn't do things like 1.1 or 1.1.1, so you'll have to try other things to get around that.

But here are some things that you can do to the lists!

  <ol type="a">

  1. This starts with an a, not a number.

  <ol type="A">

  1. This starts with an A, not a number.

  <ol type="I">

  1. This starts with roman numeral I, not a number.

  <ol type="i">

  1. This starts with roman numeral i, not a number.

  <ol start="7">

  1. This starts at 7.
  2. This is now 8.
  <ul type="square">

  • This starts with an square, not a dot.

  <ul type="circle">

  • This starts with an circle, not a dot.

Play around, and do a 'mix and match' with the codes. See what happens if you use them together, or one at a time. Have fun and see what you can and can't do with it!

Want to do different colours in your text? It's quite easy, using a <font></font> tag!

Remember in Lesson 1 how you got hex colour values, or used names? Remember how you set the text attribute in the body tag? You use this to change little bits of your text colour... or even the whole page, but that defeats the purpose of the body tag:

  This is normal text. <font color="green">Coloured bits here.</font> Normal colour again.

This is how it will look:

This is normal text. Coloured bits here. Normal colour again.

Try it out, and see how it works with lists, and the <li>...</li> tags! Play around with colours... you can even make different letters different colours! Have fun with it!

Before Lesson 2 ends, here is one last little thing: alignments!

You can align your text left, right or centered in various different ways. Here are some of them:

<div align="center">Div Center Alignment</div>
<p align="center">Paragraph Break Center Alignment</p>

Div Center Alignment
Div Center Alignment

Paragraph Break Center Alignment

Paragraph Break Center Alignment

<div align="left">Div Left Alignment</div>
<p align="left">Paragraph Break Left Alignment</p>

Div Left Alignment
Div Left Alignment

Paragraph Break Left Alignment

Paragraph Break Left Alignment

<div align="right">Div Right Alignment</div>
<p align="right">Paragraph Break Right Alignment</p>

Div Right Alignment
Div Right Alignment

Paragraph Break Right Alignment

Paragraph Break Right Alignment

See the differece? Div align is for when you do not want a paragraph break around the alignment... P align is for when you do want some space!

Have a look at what the alignments can do, when you're writing normal text, adding them in. (See how the left aligned doesn't look any different from the normal text? The only things that I've used that need to be aligned left are images! I'll show you an example below, of a left aligned image. Use: <img src="myimage.gif" border=0 alt="Left Aligned Image" align="left"> The alignment can be center, left or right!)

Div Center Alignment
Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text.

Paragraph Break Center Alignment Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text.

Div Left Alignment
Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text.

Paragraph Break Left Alignment Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text.

Div Right Alignment
Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text.

Paragraph Break Right Alignment Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text.

Left Aligned Image Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text. Here is my normal text.

End of Lesson 2

Go on to HTML Lesson 3 for more!

That's it for this lesson! I hope this helps! ^_^


© Caroline 'Kunoichi' Seawright 2000 - present

If you enjoyed this page, please join my Egyptology & Archaeology Essays Mailing List.

Or contact me on Twitter:

comments powered by Disqus