What this session is about

Now that you know how to make a simple page, I figure you'll want to spruce it up a little. By the end of this session I hope you'll understand how to...

• Add Headings
• Add line returns to pages
• Create Lists

To view this page as a video, download this file (15.6mb), you'll need quicktime.

Headings

Headings are cool and for two different reasons. Firstly they both make the text bold and then make it larger, secondly search engines like Google know that they are headings and use that to index your pages. Heading tags are always written as an "h" followed by a number from 1 - 6, the lower the number the more important he heading and the bigger and bolder the text.

Tag	Effect		Tag	Effect
<h1>	Huge, just Huge		<h4>	Bigger and bolder
<h2>	Very big and very bold		<h5>	A little bigger and bolder
<h3>	Quite big and bold		<h6>	Not much bigger or bolder

Line Returns

For those that have never heard of Line Returns before, they're simply new lines. When you hit the return key or enter key on your keyboard and start a new line, you have created a line return. If you've experimented with HTML a little you'll know that this... Produces this Not really what we want is it? That is because HTML requires you to put in special tags to tell it when to start a new line. They are <br /> tags. You have almost certainly noticed that this tag looks a little different, it's got the opening bracket, the tag name but then, it's got a space and a slash.

Because we are using the latest standard called "XHTML", any tag that is just a tag is written like this. <br /> tags are just a tag, there is no closing tag as there is with all those we have looked at so far. If we had a tag called "fred" and fred didn't have a closing tag, we would write fred like so - <fred />

So, our above example should be written as... And it will produce this

Lists

Last but not least, I would like to introduce you to lists. We've all used lists for various things, possibly a todo list or perhaps a shopping list maybe even a list of the reasons you're cool. There's a list at the very top of the page telling us what the page is about. A list is also really really easy to make. Which creates...

Each list first of all sits inside <ul> tags. ul stands for "Unordered List", if you want to make an Ordered list, use the <ol> tag instead, it will replace the bullet points with numbers. Inside a list, each item on the list is created by putting in a pair of <li> tags. In this case, li stands for "List Item", so hopefully it's fairly easy to understand. The text inside the <li> tags is the text to the right of the bullet point or number.

The <li> tags are said to be "nested" inside the <ul> tags. What's really cool is you can nest a list inside a list!