The attributes are used to personalize tags. What do i mean ? Somehow , someday you want to resize a image or a table or to change a font color. All these are possible with the help of the attributes.
The most tags have their own attributes. We will talk about this as we include in our talking a new tag. But now we will talk about a set of generic attributes which can be used with the majority of the tags.
Attributes are putted between the angular brackets (<>) of the opening tag.
THe "class" and "id" attributes in HTML
These two attributes are mostly the same. They have no straight role in the formatting of the elements but they are useful behind the scene with the help of CSS. We will talk their role at the right time when we study their syntax and their function in CSS.
The idea is that when you want to set a class of tags for being used later with the help of CSS, you can make the difference between two identical tags but with different attributes. Take a look at the next example :
<p id="italicparagraph">Paragraph type 1, italic </p> <p id="boldparagraph">Paragraph type 2, bold </p> |
Display
Paragraph type 1, italic Paragraph type 2, bold |
HTML - The "name" attribute
"name" is a bit different from "id" and "class". If you give a name to an element this one becomes a script variable for Javascript, ASP and PHP. Something that is very often meet in formulations and other interactive text fields.
<input type="text" name="TextField" /> |
Display
This attribute has no effect over the display of the text box, even if in the background it plays a very important role.
HTML - "title" attribute
This attribute is used rarely . He adds a title (a pop-up) to every element`s content. This attribute should not be forgotten. You can name almost everything however you want. The visualization appears when you need to stop with your mouse for a few second above the content.
<h2 title="I am a title attribute!!">A random title</h2> |
Display
A random title |
Pass with your mouse over the upper title so that you see the magic of the"title" attribute.This attribute will give yo your site a bit of interaction for those who visit you. Do not pass over this detail.
HTML - "align" attribute
If you want to align in a different way some elements of your page then you have at your disposition the "align" attribute. You can align to the left, right or the center of the page almost every element. By default elements will align to the left, excepting when it is specified an other alignment.
<h2 align="center">Centered title </h2> |
Display
Centered title |
Other examples:
<h2 align="left">Title aligned to the left </h2> <h2 align="center">Centered title </h2> <h2 align="right">Title aligned to the right </h2> |
Display
Title aligned to the leftCentered titleTitle aligned to the right |
The default values for the attributes
Most of the tags are attributed standard attributes. This means that if you do not specify an other attribute, the browser will do it for you. For example a paragraph will align by himself to the left, excepting when you specify in an other way; the same is with a table. As long as you practice you will understand many more things about the default values of some tags.
Generic attributes
You must keep in your mind that attributes are used to design the elements of
a web page. I have put here together some of the most commune attributes used in HTML :
a web page. I have put here together some of the most commune attributes used in HTML :
Attribute | Options | Function |
align | right, left, center | Horizontal alignment |
valign | top, middle, bottom | Vertical alignment |
bgcolor | numerical, hexadecimal, or RGB value | A background behind an element. |
background | URL | An image behind an element. |
id | Defined by user | Names an element which will be used with CSS. |
class | Defined by user | Classifies un element which will be used with CSS |
width | Numerical value | Specifies the width of a table, image or table box. |
height | Numerical value | Specifies the height of an table, |
title | Defined by user | "pop-up" a title for an element |
References from http://www.tutorialehtml.com
0 comments:
Post a Comment