Using Attributes
Adding Colour
We are going to add colour to our page by extending the <body> attribute as follows;
<body bgcolor="black", text="red">
(note the spelling of the word color). By doing this we have added two attributes to the <body> tag and given a value to each attribute. Be careful with syntax; all values should be inside double quote marks, and separaed by commas. There are no spaces between the equals signs and the words.
Not all colour names will work The suggested list of keyword color names is: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.
Heres an example;
<html>
<head>
<title>My First Page</title>
</head
<body bgcolor="teal", text="fuchsia">
<h1>Here it is...</h1>
<p>My first ever web page.</p>
<h2>This is what heading 2 looks like</h2>
<p>This is another paragraph. </p>
</body>
</html>
Bold and Italic Text
These tags work alongside the other tags to change their appearance. Bold text is represented by the <strong> tag, and italic text is represented by <em> (emphasis). The tags <b> and <i> can be used but they are outdated and <strong> and <em> are preferred. Here's an example;
<p>The <strong>cat</strong> sat on the <em>mat</em>.</p>
The cat sat on the mat.
The word cat is inside the <strong> tag (<strong>cat</strong>) and so will appear in bold type. The word mat is inside the <em> tag (<em>mat</em>) and so will appear in italics.
Block and Inline
The bold and italic text tags, <strong> and <em> do not force a new line to start when they are used. They are known as inline tags. The tags <h1> and <p> are called block tags. They always start on a new line, and whatever tag comes after them will start on a new line.
More Colour
The colour definitions you used before set the colours for the whole page. You can add colour to individual elements by adding an attribute to individual tags. For example
<h2 style="color:silver">This is what heading 2 looks like</h2>
Be careful with your typing. Make sure you use double quotes around the value, and separate the two halves of the value with a colon. The change of color only lasts until the closing tag. The next paragraph will still have black letters (the default colour) unless you specify a different colour.
Dividing Your Page into Sections
If you have a lot of information on your page it can get a bit confusing to read. To make it easier to understand, we divide the page into sections by using a horizontal rule. A horizontal rule is a line drawn horizontally across your page. It acts as a divider between sections of text. You create a horizontal rule by using the <hr /> tag. Here is a horizontal rule;
The <hr /> tag is different to the others you have seen so far. There is only one part to the tag not two. This is a special type of tag called a unary tag (the word unary relates to the number one in the same way that the word binary relates to the number two). Unary tags always have a space and a forward slash after the name of the tag.
Tag pairs act as containers for the content that you write. With a unary tag thee is no need to provide any content, and so no need for two tags to show where the content starts and ends. The other unary tag you should know is the line break, or <br /> tag. This tag causes a new line of text to start. It is usually used when you are typing up a paragraph, and you want to start a new line but not a new paragraph (when you start a new paragraph there is a bigger space between the lines.
Here's an updated version of the page from lesson 1
<html>
<head>
<title>My First Page</title>
</head>
<body bgcolor="teal", text="fuchsia">
<h1>Here it is...</h1>
<p>My first ever web page.</p>
<hr />
<h2 style="color:silver">This is what heading 2 looks like</h2>
<p >This is another <strong>paragraph</strong>.<br />
This line is in the <em>same paragraph</em></p>
<hr />
</body>
</html>
You can see this page here