Section 4. Use Attributes and Values

4. Use Attributes and Values

BEFORE YOU BEGIN

2 Use HTML Tags

SEE ALSO

5 About Using Special Characters

6 About Proper HTML Coding

To give you more control over how your pages look and work, you can use what are called attribute s and value s along with tags. An attribute modifies the tag and gives you options about how the tag should function. So, for example, a FACE attribute lets you specify what font should be used on a web page. A value is paired with an attribute, and lets you further customize the attributefor example, to specify the size of a font that you're choosing.

KEY TERMS

Attribute A modification of an HTML tag that lets you choose options over how that tag should be usedfor example, by choosing a font to display on a web page.

4. Use Attributes and Values

KEY TERM

Value A piece of information paired with an attribute that lets you customize how the attribute is used.

In this task, you'll learn how to use attributes and valuesspecifically, how to use them to change the font on a web page. As in the previous tasks , we'll be doing it in Notepad.

1.	Start the Tag You can't use an attribute by itself; it has to work in concert with a tag. So before using the attribute, start the tag. In our instance, we're going to specify how text should be displayed on a web page using the <FONT> tag. The <FONT> tag gives you control over how text is displayed on a page. By itself, however, the tag doesn't do anythingif you use the tag pair <FONT > and </FONT> around text, the browser in normal circumstances won't do anything special to the text. The tag needs an attribute in order to work. Start the tag as you normally would any tag, by typing <FONT . Don't put in the closing bracket > yet, though, because before we close it, we're going to add an attribute.
2.	Add an Attribute The attribute FACE , when used in concert with the tag <FONT> , will let you tell browsers to display text on a page using a specific font. Attributes are placed inside the opening tag, and are separated from the tag name by a space, like this: <FONT FACE> . So type that into Notepad.
3.	Add Text Follow the tag and attribute by text. This is the actual content of your web page.
4.	Add a Value You might have noticed something odd about our <FONT FACE> tag and attribute. Taken together, they still don't tell the browser what font to display. There are many fonts that can be displayed on a browser, and the browser as yet doesn't know which browser font to display, because we haven't yet told it which specific font to display. To handle this kind of problem, attributes can use values, which define exactly how the attribute should be used. In our example, we want our text to be displayed using the Verdana font. In that case, we'd use the value of Verdana. To add a value, you use the = sign, followed by a pair of quotation marks, and inside the quotation marks you place the value, and then close it all off with an ending bracket, like this: ="Verdana"> . So here's how the tag and attribute would look, along with the closing tag. It's making the text " Here's the text " appear in the Verdana font. <FONT FACE="Verdana">Here's the text.</FONT> NOTE Although many tags use attributesin fact, often require themnot all tags can use attributes. For example, the comment tag <! --- --- > can't use attributes. When you use the comment tag, all the text after the tag will not be displayed in a browser. It's often used by HTML coders to remind themselves why they coded a page in a certain way.
5.	Use Multiple Attributes There will be times when you will want to use more than one attribute per tag. For example, when placing an image on a page, you'll want to detail the location where it can be found on the Web, and you might also want to use attributes for where it should be placed on the page and how large it should be. And in our example, displaying text, you might want to not only use a particular font, but you might also want to say how large that font should be, and also what color to make the text. In those cases, you'll use more than one attribute per tag, and each attribute may have an associated value. It doesn't matter what order you put the attributes in. But you have to follow the same syntax for multiple attributes that you do for a single attribute. So first comes the tag, then a space, then the attribute and its value if there is one, then a space and the next attribute and value if there is one, and so on. Turning back to our example, let's say we want to have text displayed in the Verdana font, be colored red, and be large- sized . You'd add each of those attributes inside the opening tag, one after another. Here's what the entire tag, along with its attribute and multiple values, would look like: <FONT FACE="Verdana" COLOR="Red" SIZE="6">Here's the text.</FONT> NOTE An HTML tag, along with one or more attributes and their associated values, can be quite long. When you create an HTML tag and use attributes and values along with it, the entire result is called a string.
6.	Follow the Proper Syntax Make sure you follow the proper syntax. If you look at the tag, attribute, and value, you'll get a sense of the proper way to string them all together. To drive it home, here is the basic syntax for using tags, values, and attributes: An attribute is separated from its tag by a space. A value is connected to its attribute by an equal = sign. Values are surrounded by quotation "" marks. Attributes and values go only in the opening tag. They are never used in the closing tag. So, for example, when you close the <FONT> tag, it's always with </FONT> and never includes attributes such as FACE , or values such as "Verdana" .

TIP

As you've learned, tags aren't case sensitivethey can be either upper- or lowercase. However, some values are case sensitivefor example, filenames or URLs. So as a rule, get into the habit of typing in values using the proper caseeven better yet, get in the habit of using lowercase.