HTML ATTRIBUTES
Attributes in HTML are the characteristics of the elements that are used in the HTML tags. These attributes provide additional information about the HTML tags more like describing words.
HTML allows placing of static or animated data like tables and images in the page as well which can be inserted into a webpage using the <img> tag for images and <table> tag for tables.
Attributes like height, weight, border, alignment, spacing etc, allow us to control these features of the data.
For example:
<!DOCTYPE html>
<html>
<head>
<title> Working with images </title>
</head>
<body style="background-image:url(texture.gif);">
<b>Controlling Image Sizes</b>
<img height ="400" width="400" src="car.jpg" >
<img style="border-width:3px;" src="javac.gif">
<img src="https://picsum.photos/400">
<img alt="The Cat" src="cat.jpg">
<a href="file_name.html">click here to view the file</a>
</body>
</html>
The attributes are as follows:
-
BORDER - Used in
<img>tag, it specifies the size of the border to place around the image. The output image will have a border thickness of 3 pixels around it.
-
STYLE - is used in
<body>tag to add different styles to an attribute, like colors, fonts, images and more. In the above example, the background of the webpage is set to a textured image. - SRC - Used with
<img>tag, SRC stands for source or the path of the image file that we are linking to the webpage. We take the source path of the image saved on the local system and write it in the src. Src attribute can take two paths.
Absolute path - We need to give the complete path of the file from the root folder
Relative path - We need to give path of the image relative to the file it is used in
-
ALIGN ATTRIBUTE - Used in
<img>tag, align is used to specify where the image will be displayed on the webpage. In the above example, the height and width attributes are used to set image size to 400 pixels -
ALT ATTRIBUTE - Used in
<img>tag, alt indicates the text which appears when we hover the mouse on the image/link. Also, if due to some reasons the image is not displayed, then the text in the alt attribute is displayed as an alternative.
-
HREF ATTRIBUTE - when using the anchor
<a>tag for creating links, the document to be navigated needs to be specified. By using the<a href>attribute, the next navigable webpage or image can be specified. In the above example, Click here to view the file turns into a link and when clicked, it leads to filename.html.
The Style Attribute
<!DOCTYPE html>
<html>
<head>
<body>
<h2>Trying html Style Attribute </h2>
<img style="border:2px solid red;" src="road.jpg">
<a href="file_name.html" style="text-decoration:none">click here to view the file</a>
<p style="color:purple;">This is paragraph text</p>
</body>
</html>
