Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Exploring some HTML Attributes and Learning with Examples

In this article I will cover the basics about HTML Attributes. I will discuss how to use the different types of attributes and write some examples to demonstrate the functionality.

Introduction

In this tutorial I will explain about the HTML attributes. By this you can change the appearance of particular elements or change in behavior of elements. You can change the color of paragraph, heading or change in font style. You can hyper link the particular element.

What is HTML Attributes

Attributes is soothing which is associated with elements and provide additional information about the element such as how to particular element appears and behave on the web page. Element can have one or more attribute in it’s start tag.

How to Write HTML Attributes

Attributes must be specify in the “Start Tag” and having pair of parts that is “Name” and “Value”. Attribute name and value are separated with equal (=) sign and value is always written within the double inverted comma(“ ”) which generally used but it can be write in single inverted comma (‘ ’) also.

Let’s explore the attributes with some examples:

Listing 1: Simple script to change the paragraph background color in Red.

<!DOCTYPE html>
<html>
<head>
	<title>MrBool Development Tutorial</title>
</head>
<body>
<p style="background-color:red;">This paragraph  background color is red?</p>
</body>
</html>

Output:

Above figure is the output of the red color background color of paragraph using attribute

Figure 1: Above figure is the output of the red color background color of paragraph using attribute.

In the above example we use the attribute with <p> tag. By using this complete paragraph background appear in red color. we can change it in other color also like orange, pink, yellow etc. for the changing color you can write direct color name like (red, orange etc) or you can write Hexadecimal number also such as:

White: #ffffff
Black: #000000 (zeros)
Red: #ff0000
Blue: #0000ff
Green: #00ff00
Yellow: #ffff00

Each color has it’s own hexadecimal number. In this article you can see all hexadecimal code of colors.

HTML Title Attribute:

You can use <h2>, <h3>, <h4>, <h5> and <h6> tags. This is used to change headlines appearances.

Listing 2: Simple script to add a tiny text pop-up to any HTML element.

<!DOCTYPE html>
<html>
<head>
	<title>MrBool Development Tutorial</title>
</head>
<body>
<h2 title="Hello, how are you!">Mr.bool Heading </h2>
</body>
</html>

Output:

Above figure is the output to pop-up to HTML headline

Figure 2: Above figure is the output to pop-up to HTML headline.

When you move your mouse over the element than appear extra piece of information. In the above script when you move your mouse” Mr.bool Heading” than you appear information "Hello, how are you!"

Alignment Attributes:

You can set your alignment such as left alignment, right alignment or center alignment. If you will not set any alignment than it will automatically set left alignment otherwise you set your alignment.

Center Alignment Attribute

Listing 3: Simple script for set Center Alignment Attribute.

<!DOCTYPE html>
<html>
<head>
	<title>MrBool Development Tutorial</title>
</head>
<body>
<h1 align="center">Mr.bool Centered Heading</h1>
</body>
</html>

Output:

Above figure is the output of Center Alignment Attribute

Figure 3: Above figure is the output of Center Alignment Attribute.

In the above script you can align the element in center

Left Alignment Attribute

Listing 4: Simple script for set left Alignment Attribute.

<!DOCTYPE html>
<html>
<head>
	<title>MrBool Development Tutorial</title>
</head>
<body>
<h2 align="left">Left-aligned heading</h2>
</body>
</html>

Output:

Above figure is the output of left Alignment Attribute

Figure 4: Above figure is the output of left Alignment Attribute.

Right Alignment Attribute

Listing 5: Simple script for set right Alignment Attribute.

<!DOCTYPE html>
<html>
<head>
	<title>MrBool Development Tutorial</title>
</head>
<body>
<h2 align="right">right-aligned heading</h2>
</body>
</html>

Output:

Above figure is the output of right Alignment Attribute

Figure 5: Above figure is the output of right Alignment Attribute

Hyperlink Attribute:

In html links are define as <a> and link address is specified by the herf attribute or in other words we can say that any links are hyper link with herf attribute.

Listing 6: Simple script for hyperlink with herf attributes.

<!DOCTYPE html>
<html>
<head>
	<title>MrBool Development Tutorial</title>
</head>
<body>
<a href="http://www.mrbool.com">This is Mrbool link</a>
</body>
</html>

Output:

Above figure is the output for link the element

Figure 6: Above figure is the output for link the element.

When we will click on “This is Mr.bool link” then it will open the “mrbool” website.

Attribute value should be always in quote. in some rare case attribute value itself contain Double quote in that case you should use single quote.eg name='Tom "Special Char"' Attribute names and attribute values are the case insensitive.

Conclusion

We have covered the some basic attributes in this topic, Similarly you can explore more attributes and write some examples. Go through the above examples and let us know if you have any questions. We at Mrbool always ready to answer your queries.



I am having total 7+ years of experience in developing applications using C#, VB.NET, ASP.NET, Silverlight, WCF, SQL Server and Oracle. I am holding a M.Tech degree in Intelligent systems. For more information, visit my Linkedin p...

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login