Lesson 2 - Attributes
Tags & Attributes, Fonts & Colors
Besides tags, there are a handful of attributes that can be assigned to the tags. Attributes are added to the tags inside the bracket and set to a specific value, which is enclosed in quotes.
Align Attributes
There is the align attribute:
- <p align="center"> will align the paragraph to the center of the page.
- <p align="right"> will align it to the right side of the screen.
Notice that the attribute is formatted like this:
- First, the name of the attribute: align.
- Then, an equal sign: =.
- And finally, the value you want, enclosed in quotes: "center".
There are no spaces between any of these: align="center". There is, however, a space between the tag and the attribute: <p align="center">.
Width, Height and Size Attributes
There are width and size attributes:
You can change the size of the horizontal rule by adding width and size attributes. Notice that all the attribute values are enclosed in quotes:
<hr align="center" width="400" size="5">
In this case, the line will be 400 pixels across the screen (a 15" screen is about 700 pixels wide) and 5 pixels thick.
Various attributes can be added to the tags in any order.
<hr align="center" width="500" size="20">
works the same as:
<hr width="500" align="center" size="20">
Open your text editor and try different combinations in your firstpage.html from Lesson 1.
Try different sizes and alignments on the horizontal rule:
<p>The acme seed company provides
<i>high-quality seeds</i>
guaranteed to
<b>improve your IQ scores!</b></p>
<hr align="center" width="400" size="10">
</body>
</html>
|
Remember, before you can see the effect of your code, you'll need to:
- save your text (as firstpage.html).
- Then, open a browser (Explorer, Netscape, Mozilla) and open your firstpage.html.
Color Attributes
There are color attributes:
You can also add color to your page using attributes. First, you'll have to find the special codes, called hexadecimal codes that will translate into colors. Try this Webmonkey site to get a color code for the background of your page. Use a soft, light color so that the text will show up easily. Then, try typing this attribute to your <body> tag (right after the closing </head> tag):
<body bgcolor="#CCFF66">
Notice that there is no space between the attribute bgcolor, the equal sign, or the value. The value, as always, is enclosed in quotation marks. In the case of color attribute, the value always begins with the number symbol (#).
Try making this change in your <body> tag. Save the page and Reload it in the browser. Do you like this color?
You can also change the text colors with these codes:
<body bgcolor=#00ff00 text="#ffffff">
This will change the background again, plus change the color of all the text. Save and Reload to see the changes.
You can also change the color of links. You can squeeze all this information into the same <body> tag:
<body bgcolor="#FFCCCC" text="#000000" link="#990000" alink="#009900" vlink="#330033">
Here's what the different <body> attributes represent:
- text = is the base text color on the page.
- link = is the color of the link text on the page.
- vlink = is the color of an already visited link.
- alink = makes the link text blink another color when activating.
Your line of code is going to set the text to black, the links to bright red, the activated link to dark green, and the visited link to dark purple. Of course, since you don't have any links on your page yet, you won't see any of these link color changes.
Notice also that it makes no difference if you type those color values in capital or small letters as long as you have the # symbol and the surrounding quotation marks.
But, what if you don't want to change all the text? You just want to change the color on the first heading, maybe to a bright red color.
First, change your <body> tag back to a softer color and take out the text attribute:
<body bgcolor="#ffff66">
Font Attributes
There are font attributes to change the size of the text:
The default display of font in this course is size 2. Here are samples of text sizes:
- 1 point - Small, isn't it?
- 2 point - A little bigger.
- 3 point - This is the default size, no need to code it!
- 4 point - growing up a bit.
- 5 point - getting bigger.
- 6 point - look mommy!
- 7 point - Wowee!!!
Note: The original way to assign font sizes using Font tag is deprecated in the latest versions of HTML (HTML 4 and XHTML). Style sheets (CSS) will be used to define the layout and display properties of HTML elements. You'll be introduced to style sheets in Lesson13.
There are a couple of sites on the Boogie Jack website that will let you play around with colors to set for your background and text colors:
- The Color Machine allows you to change the background color of the page until you find that 'just right' color. You can change the background color by clicking the color adjuster buttons for red, green and blue, adding either big steps (+50) or tiny steps (+1).
- The Color Schemer helps you find complimentary colors for your background and text colors.
For both of these, you need to have a JavaScript enabled browser. If your browser is too old, it probably won't work.
Summary - Tags and Attributes
Tags are the elements which form the basic building blocks for your website. For example:
- <head>
- <body>
- <p>
- <br>
- <hr>
- <h4>
- <h6>
The format to remember for these tags is that many of these tags are "container tags", meaning that they need to have a closing tag:
Some tags such as <br> and <hr> don't require a closing tag. They do not contain any text. They are used for formatting the page.
Attributes can be added inside the brackets of the tag to specify what you want the browser to do with those tag elements. For example,
- size=
- align=
- color=
- bgcolor=
- width=
The format for attributes is to:
- put space after the tag,
- list the attribute, followed by an equal sign (no spaces!),
- list the value, enclosed in quotes (no spaces!), and
- close the tag bracket (no spaces!).
The order of the attributes makes no difference.
<body bgcolor="#FFCCCC" text="#000000">
works the same as:
<body text="#000000" bgcolor="#FFCCCC">.
The hexadecimal color codes can be either capital letters or lower case.
This is the end of Lesson 2. Please go to the next lesson.
|
