Wednesday, October 26, 2011

HTML attributes 1

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 left

Centered title

Title 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 :

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

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites More