Tuesday, May 16, 2017

Html Attributes

Hello guys!!..Morning,welcome you all to this new tutorial.In this tutorial am gonna be going through the various HTML attributes that is available in HTML.
In the previous tutorials we have seen few HTML tags and their usages like heading tags <h1>, <h2>, paragraph tag <p> and other tags,we  used them so far in their simplest form,but most of these HTML tags have attributes,which are additional information added to them.

An attribute is used to define the characteristics of a HTML element and is placed inside the element's opening tag.Also take note that all attributes are made up of two parts which are the name and the value,you will understand better as we move further.

The name is the property you wanna set.For example,the div <div> element  can carry an attribute whose name is align,which can be used to indicate the alignment of the div on the page.

On the other hand the value is what you want the value of the property to be set to and it is always been put within quotations.The example below shows the three values of the align attribute which are left, center and right.

<!doctype html>
<html>
<head>
<title>Tutorial on align attribute</title>
</head>
<body>
<div align="left">This div element is left aligned</div>
<div align="center">This div element is center aligned</div>
<div align="right">This div element is aligned to the right</div>
</body>
</html>
you can try the above code out on your text editor for clearer understanding and also feel free to ask questions on the comment box if you having issues,promise that your questions will be attended to.Now lets move to few more attributes.

Core Attributes
I know you must be wondering what i mean by core attributes,HTML actualy has four core attributes that can be used on the majority of HTML elements, although not all of them.Below is the list of the core HTML attributes.

Id
Title
Class
Style

The Id Attribute
The id attribute of a HTML tag can be used to uniquely identify any element within a HTML page.There are two primary reasons why you might wanna use an Id attribute on an element:

The first reason is if an element carries an  Id attribute as a unique identifier, it is possible to identify just that particuler elementt and its content.

The second reason is if you have two or more elements of the same name within HTML page,you can use the Id attribute to distinguish between the elements that have the  same name.Example on how to use the Id attribute is shown below

Example
<!doctype html>
<html>
<head>
<title>Tutorial on Id attribute</title>
</head>
<body>
<div Id="Container">This div element is left aligned</div>
<div Id="nav menu">This div element is center aligned</div>
</body>
</html>

You can also try the above code out for better understanding.Now we move on the title attribute

The Title Attribute
The title  attribute gives a suggested title to the HTML element.The syntax for a title attribute is similar to that of the Id attribute.

The behavior of this attribute will depend upon the element that carries it,an example is shown below.

Example
<!doctype html>
<html>
<head>
<title>Tutorial on title attribute</title>
</head>
<body>
<a title="home" href="#" target="_blank">Homepage</a>
</body>
</html>
The above example illustrates a HTML link which has a title attribute added to it.We gonna talk about HTML links properly in a different tutorial.

You can try the above code out using your text editor and feel free to ask questions.

The Class Attribute
The class attribute is used to associate an element with a style sheet,and it specifies the class of the element.You will learn more about how a class attribute is used when i start droping tutorails on CSS.But for now you have to take this basic knowledge into your brain.

Example
<!doctype html>
<html>
<head>
<title>Tutorial on class attribute</title>
</head>
<body>
<div class="main menu">Home</div>
</body>
</html>

Now am gonna talk about the final core HTML attribute,the rest of the other HTML attributes will be discussed in my next tutorial.

The Style Attribute
The style attribute allows you to specify a CSS rule or CSS rules within an element..An example is shown below.

Example
<!doctype html>
<html>
<head>
<title>Tutorial on style attribute</title>
</head>
<body>
<div style="float:left; clolor::red; font-size:2px;">Home</div>
</body>
</html>

You can try the above code out for better understanding.alright thats it for this tutorial,see you in the next tutorial.Will talk about the rest of the HTML attributes in the next tutorial.Bye for now

Links to previous tutorials on HTML : Html IntroductionHtml TagsHtml Document StructureThe Doctype Declaration , Html Basic Tags , Html Basic Tags2 , Html Elements


Share:

0 comments:

Post a Comment