 |
| HTML and CSS tutorial for beginners in English |
Hello friends, welcome to KTL's HTML and CSS tutorial. Today we will study lesson 5.
In our previous lesson, we have studied header tags.
Today, we will see what are attributes and how they are used.
What are attributes?
Attributes are used to provide additional information about an element. An attribute has a name and its value. We will see some commonly used HTML attributes.1. href:
<a> tag is used to create a hyperlink in a web page. On clicking this link another web page is displayed. We mention name of linked web page in "href" attribute.
For example <a href=“page-2.html”>Next Page</a>
Here clicking on link opens page-2.html and the text displayed for this link is "Next Page".
Note that attribute is always given in an opening tag. We will see more about link tag in the lesson for link.
2. src, width, height:
<img> tag is used to insert an image in a web page. This tag has attributes like width, height, and an attribute called src. For example,
<img src=“mango.jpg” style=“width:Xpx; height:Ypx;">
Attribute "src" is used to mention the name of image which is to be displayed, width and height are used to mention dimensions of the image. We will study more about image tag in the lesson for image.
3. style
This attribute is used to format text. It gives information about color, font, font size etc of text.
4.lang
We know <html> tag. Attribute "lang" is used in <html> tag to specify language. For example <html lang="en-US">.
More about "style" attribute
Let us consider an example of style attribute. This will make concept of attributes more clear.Let us begin. Open a Notepad file and begin to write today's HTML script. Copy all program from Lesson-04.
Change <h1> tag as follows:
<h1 style="color:blue;">Earth - My planet</h1>
Here h1 is the tag and style is attribute. We have defined color red. Therefore "blue" is the value for attribute "color". Carefully observe how an attribute is written.
<element attribute="attribute:value";>
Always remember this format.
 |
| Figure 5-1. HTML style attribute |
Click on figure 5-1 for PDF file of source code. Save this script as "Lesson-05". Save this also as "Lesson-05.html". In windows explorer double click on HTML document. Output is displayed. Heading is displayed in red color.
 |
| Figure 5-2. HTML style attribute |
We have learned to use attribute in a tag. We will learn more about style attribute in our CSS lesson.
Important Points:
1. Attribute gives more information about an element.2. Attribute is written in opening tag of an element.
3. Value for an attribute is written in double quotes.
Lesson-04 Lesson-06
