Lenny
Press "X" to admire hat
In this lesson, I'm going to expand on tags - mostly by expanding the tags themselves and adding attributes to them, expanding the library of tags that you know and thus can use (including a couple of common ones, like hyperlinks and fonts) and explaining the proper way to use special characters in text between tags.
In case you missed it: Lesson 1 - The Basics
If you're having troubles with Nvu, then please ask in the Nvu Help Thread, or read Lesson 1 if you just need to know where to enter the code.
----------
Tag Attributes
In Lesson 1, we learnt what a tag is - a start tag, some element content, and an end tag. The tags we looked at were basic tags - headers, bold, paragraphs. If you know how, you can add things within the start tag which will allow you greater customisation and control of the element content.
Let's go back to the simple page we made in Lesson 1:
Open Nvu or your text editor, and add in an lines of code in the body section using the header (to remind yourself, look at the last section of Lesson 1). I've bolded and underlined my addition.
I want my heading to be in the center of the page, how would I do this? By adding an attribute to the Header1 start tag!
So, to make my heading centred, I need to align it to the centre, just as I would in Word (again, bolded and underlined):
Notice how centre is spelt the American way? Alas, all parts of HTML code are spelt the American way - center and color are the two most common things you'll use. Remember them.
An attribute provides additional information about an HTML element, and is always declared in the start tag. They come in a name and value pair - attribute name="value". Always remember your "quote marks" around the value, and always use the lower case.
Some attributes provide more options than others. The simple options for <h1>, <div> and <p>, for instance, allow you to align what is between them, and little else. If you contain text within <font> tags, however, you can do a whole lot more, such as change the font color, face (font) and size.
You can also use attributes within the <body> tags. Let's say I want a green page. In my start <body> tag, I need to set my bgcolor to green:
I can make it yellow, red, pink, purple, black, blue - any colour I like, as long as I know the name for it (which I will cover in the fifth and final lesson). Within the <body> tags, I can also change the page properties - margins and padding are just two of them.
Another thing to remember - a tag can have as many attributes as is needed.
-----
More Tags to Play With
Before I go onto entities, here are some more tags for you to play with:
<big> - Defines big text
<em> - Defines emphasized text
<small> - Defines small text
<strong> - Defines strong text
<sub> - Defines subscripted text
<sup> - Defines superscripted text
<ins> - Defines inserted text
<del> - Defines deleted text
Rather than me explain what each does, I want you to try them out on bits of text, and see for yourself.
-----
Entities
Some characters in HTML, such as the angle brackets (< >), have special functions, and so can't be used normally in text. Instead, a character entity is used. A character entity is a short code that relates to a character. It contains an ampersand (&), an entity name or number, and a semicolon (; ).
To get the < in text, then, I must use the character entity: < or <, both followed by a semicolon. The first one, <, uses an entity name - "less than" (lt). The second, <, uses the entity number - "#60".
Some of the more common entities you might use:
A non-breaking space, for those of you who are interested, is used for multiple spaces - if you enter fifteen spaces, fourteen will be deleted and only one will be shown. If you use the entity code for fifteen non-breaking spaces, however, fifteen spaces will be shown.
-----
The Anchor Tag - Hyperlinks
The anchor tag is used when you want to link to another page, or to a specific section within the current page.
The basic code used to link to a webpage is:
You should notice the attribute within the anchor tag - href="url".
You can also set the page to open in a new window, using the target attribute. To open in a new window, the target must be a blank page:
An anchor, as I said above, can also point to a section within the current page itself. At the bottom of each Chrons page, you'll see a link, "Top", which, when clicked, takes you to the top of the page. This is done using anchors.
You must first set your anchor and name it. This can be done anywhere in the <body> tags using the code:
...where "label" is what you want to name your anchor.
To then link to your anchor, you start the same way as a normal hyperlink, but rather than a full URL, the value in the href attribute is the label you want to jump to, preceded by a #:
Have a play with it, and everything else covered in this lesson - if you can, add the new tags into a page made with what we did in Lesson 1.
----------
And that's that for this week. Sorry if the end seems a bit rushed, but I need to get to bed so I'm not tired during work tomorrow.
Again, if you have questions please ask them, and if you're having a problem with your code, please post the code in QUOTE tags along with your problem.
Next week I'll look at Frames, Tables and Lists.
Happy HTMLing!
In case you missed it: Lesson 1 - The Basics
If you're having troubles with Nvu, then please ask in the Nvu Help Thread, or read Lesson 1 if you just need to know where to enter the code.
----------
Tag Attributes
In Lesson 1, we learnt what a tag is - a start tag, some element content, and an end tag. The tags we looked at were basic tags - headers, bold, paragraphs. If you know how, you can add things within the start tag which will allow you greater customisation and control of the element content.
Let's go back to the simple page we made in Lesson 1:
Open Nvu or your text editor, and add in an lines of code in the body section using the header (to remind yourself, look at the last section of Lesson 1). I've bolded and underlined my addition.
I want my heading to be in the center of the page, how would I do this? By adding an attribute to the Header1 start tag!
So, to make my heading centred, I need to align it to the centre, just as I would in Word (again, bolded and underlined):
Notice how centre is spelt the American way? Alas, all parts of HTML code are spelt the American way - center and color are the two most common things you'll use. Remember them.
An attribute provides additional information about an HTML element, and is always declared in the start tag. They come in a name and value pair - attribute name="value". Always remember your "quote marks" around the value, and always use the lower case.
Some attributes provide more options than others. The simple options for <h1>, <div> and <p>, for instance, allow you to align what is between them, and little else. If you contain text within <font> tags, however, you can do a whole lot more, such as change the font color, face (font) and size.
You can also use attributes within the <body> tags. Let's say I want a green page. In my start <body> tag, I need to set my bgcolor to green:
I can make it yellow, red, pink, purple, black, blue - any colour I like, as long as I know the name for it (which I will cover in the fifth and final lesson). Within the <body> tags, I can also change the page properties - margins and padding are just two of them.
Another thing to remember - a tag can have as many attributes as is needed.
-----
More Tags to Play With
Before I go onto entities, here are some more tags for you to play with:
<big> - Defines big text
<em> - Defines emphasized text
<small> - Defines small text
<strong> - Defines strong text
<sub> - Defines subscripted text
<sup> - Defines superscripted text
<ins> - Defines inserted text
<del> - Defines deleted text
Rather than me explain what each does, I want you to try them out on bits of text, and see for yourself.
-----
Entities
Some characters in HTML, such as the angle brackets (< >), have special functions, and so can't be used normally in text. Instead, a character entity is used. A character entity is a short code that relates to a character. It contains an ampersand (&), an entity name or number, and a semicolon (; ).
To get the < in text, then, I must use the character entity: < or <, both followed by a semicolon. The first one, <, uses an entity name - "less than" (lt). The second, <, uses the entity number - "#60".
Some of the more common entities you might use:
A non-breaking space, for those of you who are interested, is used for multiple spaces - if you enter fifteen spaces, fourteen will be deleted and only one will be shown. If you use the entity code for fifteen non-breaking spaces, however, fifteen spaces will be shown.
-----
The Anchor Tag - Hyperlinks
The anchor tag is used when you want to link to another page, or to a specific section within the current page.
The basic code used to link to a webpage is:
You should notice the attribute within the anchor tag - href="url".
You can also set the page to open in a new window, using the target attribute. To open in a new window, the target must be a blank page:
An anchor, as I said above, can also point to a section within the current page itself. At the bottom of each Chrons page, you'll see a link, "Top", which, when clicked, takes you to the top of the page. This is done using anchors.
You must first set your anchor and name it. This can be done anywhere in the <body> tags using the code:
...where "label" is what you want to name your anchor.
To then link to your anchor, you start the same way as a normal hyperlink, but rather than a full URL, the value in the href attribute is the label you want to jump to, preceded by a #:
Have a play with it, and everything else covered in this lesson - if you can, add the new tags into a page made with what we did in Lesson 1.
----------
And that's that for this week. Sorry if the end seems a bit rushed, but I need to get to bed so I'm not tired during work tomorrow.
Again, if you have questions please ask them, and if you're having a problem with your code, please post the code in QUOTE tags along with your problem.
Next week I'll look at Frames, Tables and Lists.
Happy HTMLing!
