Design Tips

Make sure that when you use heading tags they are significantly different from one another; a gap of 2 is usually satisfactory. Heading sizes that are not significantly different will detract from the impact of your information rather than enhance it.

headings

Advanced Features

Heading tags are are a convenient easily implemented coding feature as well as being important for search engines. You can gain more control of their appearance by adding a styling to it e.g.

<h1 style="font-size: 32pt;">

will make an <h1> a heading that is 32pt high.

Valid XHTML 1.0 Transitional

Adding Page Content

Now that you have created a blank html file you can begin creating your page's content.

The first step in this process is to enter all of your raw information between pairs of block level element tags and that is the focus of this section.

  1. All pages should have a heading so people will know where they are. This heading will generally match the title you used in the <head> portion of your .html file.

    Between the body tags insert an open heading 1 tag <h1>, a page title and closed heading 1 tag </h1>:

    <html>
    <head>
    <title>Bob's World of Trees</title>
    </head>
    <body>
    <h1>Bob's World of Trees</h1>
    </body>
    </html>

    The <h1> tag is an example of a "block-level element".

    There are 6 different heading levels with <h1> being the largest and <h6> the smallest. To see their relative sizes try inserting a series of pairs of tags one after the other with the same text in between e.g.:

    <body>
    <h1>h1 heading size</h1>
    <h2>h2 hea...
    <h6>h6 heading size</h6>
    </body>

  2. The bulk of your content will be in paragraphs and will occur between <p> and </p> tags.

    Enter a pair of paragraph tags below your <h1> tag and enter some content between them.

    <body>
    <h1>Bob's World of Trees</h1>
    <p>Trees are awesome. They are mostly green but sometimes in Autumn they go red, or, orange or yellow. They sometimes smell quite nice but they can have prickles so watch where you put your nose.</p>
    </body>

    Paragraph tags are another example of a "block-level element".

  3. Use heading and paragraph tags to enter and organise your site content (you may want to just enter your headings, summarize your paragraphs and come back later to flesh them out if you are working under a time constraint).

    IMPORTANT: your browser will not pay attention to any formatting in your document unless it is created by a tag. This means it will ignore blank lines made by pressing enter, it will ignore tabbed spaces and it will also ignore all spaces after the first.

  4. Save the document now!!!
  5. Start your browser click: File→ Open→ Browse and choose your .html file.

    Your Web page should now contain all of your information formatted in the way you specified.

Next section: Adding Some Style →