What is an Attribute?
As mentioned before, elements gives structure to an HTML document which can be used to tell the browser how the document is to be displayed. such as <b> Text </b> which makes a text bold, additional information could be added to make it look more outstanding. such addition information is called an attribute
Example 1:
<p style=" background-color: blue; "> My First Text </p>
Attribute are always written with in an opening tag element with the name “style” followed by an equal sign and the attribute details written between the inverted commas. the style of the attribute is written followed by a colon and ends with a semi-colon, this is done using Styling-syntax (we’ll come to that later on) and each styling is separated with that semi-colon.
Example 2:
<p style=" background-color: blue; font-weight: normal; font: sans-serif; ">
My First Text </p>
So how do i use these attributes?
Ok, there are different attributes that can be used, but we’re going to learn with the attribute named “style” to add layout to your website.
Example 3:
<html>
<head>
<title>Working with Style</title>
</head>
<body style=" color : black; background-color: blue; font-weight: normal;
font: sans-serif; "> My First Text </body>
</html>
This will show a blue color background on your web page, go ahead and try this out for yourself and see the result, will explain in detail how the color code works with HTML and how you can apply it in your web pages to display nice and nifty layouts.
How did the page color change?
In the above lesson, we discussed about working with attributes and how you can put styles within your HTML elements, we used the attribute ” background-color: blue;” to specify the color of the background and placed it in the “body” tag. Now Color codes are derived from Hexadecimal number e.g( #FF0000) which has already be predefined for us to use, each number having a length of six alpha-numeric characters which defines the color number. each color has it’s own hexadecimal number but in our example above, you must have noticed with didn’t use any hexadecimal number instead we simply just added the English name of the color which is “blue” we could only do this because the name of the colors that are web safe has already been define, there are more than 1000 color codes, so if we know the English name instead of the hexadecimal number, we could use that.
Some Examples of Hexadecimal Color Codes are:
- White: #ffffff
- Black: #000000 (zeros)
- Red: #ff0000
- Blue: #0000ff
- Green: #00ff00
- Yellow: #ffff00
A Hexadecimal color code starts with a pound sign (#) followed by a six digits or letters. It is not easy knowing the hexadecimal color tied to a specific color, so to make it easier we have provided a Web Color Chart showing the list of Known HEX Color code: HEX Color Chart.
Can an element have more than one Attributes?
Yes it can, some elements can contain only one attributes while others can contain as many as possible. attributes can be used or applied to almost all HTML tags, even the inline elements such as <hr /> can have an attribute. Mostly we use attributes in the body tags but attributes can be applied almost anywhere in an HTML document, you just have to be creative when applying it. If this sounds confusing, it’s ok at first it would but as times goes by and as you learn more, you get to see that attributes can be even logical, then you can explore the possibilities and what it can do for you.
Where can i apply an attribute?
Well, you can apply your attributes in your HTML elements, it doesn’t have to have a particular tag before you can use an attribute. for instance, i can apply an attribute in this tag < div style=" color: red;" width=" 600px" height=" 100px" > Good Night!...</div> Div tags are used in grouping elements, we’ll come to that later on in our CSS Tutorial, once used it can enclose and group every other element within it. In this example above, i added extra attributes such as width and height, to specify the shape of the div tag, because div tag encloses like a box so i can shape it into any size i want by specifying the width and height.
Where are attributes placed?
Your attributes are placed immediately after the opening tag, more attributes can be added to the already existing ones that has been placed, after which you must close the opening tag and place a content that is to be displayed on the browser before ending with a closing tag. confused? see below
Example 4:
< div style=" color: red;" width=" 600px" height=" 100px" > Good Night!...</div>Notice that i have my opening tag to the left and my first attribute right after my opening tag, my content comes after i have closed my opening tag “Good Night!…” then finally i must place a closing tag to finalize the code.
It will look like this on a browser
| Back | Main: HTML Programming | Previous Lesson: More Samples on Elements | Next Lesson: Links |
