Remember the basic idea we learned in the first activity about the format of HTML code... there are things in pointy brackets ('tags') which tell the browser where to start and stop doing something, and there's 'normal' text which will show up on the website. For example, <p> marks the start of a paragraph, </p> marks the end of the paragraph.         So:

<p> MISS Benfield </p> <p> Mr. Galvin </p> <p> Mr. Passi </p>

Will show up on the website as:

MISS Benfield

Mr. Galvin

Mr. Passi


Now let's see some other tags we can use!

Try this:

1. Make a new blank page on your website called "HTML 2", add a text box, and type a sentence (anything you like).

2. Now use the toolbar (the buttons which appear at the top when you click in a text box) to make one of the words bold, and another word italic, the same as you would in Word.

3. Click on the HTML button in the toolbar, and look at the 'tags' (the bits in <pointy brackets>) and see if you can work out what the tags are for bold and italic.

4. Leave your sentence on your website for marking. Like the other HTML activity, it can be deleted at the END of semester (keep it until then!).

So now we can kind of see how HTML works... When we look at our HTML code, there are 'tags' which mark when we want to do something (start a new line, make the text bold, and so on), and 'normal' text which just appears on the website for people to read. People who see your website will see the 'normal' text in your HTML code, but they won't be able to see the tags. 

As we saw when we made a link using HTML, there can be more than just a letter or two inside the pointy brackets, there can also be an 'attribute'. One of the attributes we used was 'name'. So we can see a whole 'element' if we look at our example from the previous activity:

<p> <a name="link destination"> T </a> </p>

That whole line is an 'element', with a 'start tag' <p>, an 'end tag' </p>.

But if you look carefully, the element 'content' (<a name="link destination"> T </a>), is ALSO an element. It has a start tag and an end tag, and also the content "T". This is called 'nesting' - putting a complete element inside another element. 

Vocab summary:

  • Start tag - shows where something (a paragraph, bold text, a link, etc) starts happening. eg <p>
  • Attribute - included in the start tag, it allows us to be more specific about how we want to use the tag. For example the <a> tag is for 'anchor', used mainly for linking. We used the attribute 'name' to mark a spot and give it a name, and we used the attribute 'href' to make a link.
  • End tag - shows where something (a paragraph, bold text, a link, etc) stops happening. eg </p>
  • Content - everything between a start and end tag pair (this can be empty if we put nothing between the tags).
  • Element - a start and end tag pair, and the content between them.
  • Nesting - putting one complete element inside another one.
Formatting conventions (There's some example code with this formatting in HTML Activity 2):
  • Use lower-case letters for the tags
  • When nesting anything complex, each new start tag appears on a new line
  • Indent lines to show that the tag on that line is nested in the one above
We'll use all this to make a table in HTML Activity 2 - give it a try!  (^_^)