HTML ATTRIBUTE:
HTML attributes are special words which provide additional information about he elements or attributes are the modifier of the HTML element.
Each element or tag can have attribute which defines the behavior of that element.
Attributes should always be applied with start tag
The Attributes should always be applied with its name and value pair.
The Attributes name and values are case sensitive, and it is recommended by W3C that it should be written in Lowercase only.
You can add multiple attributes in one html element but need to give space between two attributes.
Syntax:
<element attribute_name="value">content</element>
Example:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>This is Style attribute</h1>
<p style="height: 40px; color: blue">It will add style property in element</p>
<p style="color: red">It will change the color of content</p>
</body>
</html>
Output:
<p style="height40px; color: blue">It will add style property in element</p>
In the above statement, we have used paragraph tags in which we have applied style attributes. This attribute is used for applying CSS property on any HTML element It provides height to paragraph element of 40px and turns it color to blue.
<p style="color: red">It will change the color of content</p>
In the above statement we have again used style attribute in paragraph tag which turns its color Red.
The Title attribute in HTML:
The title attribute is used as text tooltip in most of the browsers. It display its txt when user move the cursor over a link or any text. You can use it with any text or link to show the description about that link or text. In our example we are taking this with paragraph tag and heading tag.
Example:-
with<h1> tag:
<h1 titile="This is heading tag">Example of title attribute</h1>
With <p> tag:
<p title="This is paragraph tag"> Move the cursor over the heading and paragraph and you will see a description as a tooltip</p>
Code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 title="This is a heading tag">Example of title attribute</h1>
<p title="This is paragraph tag">Move the cursor over the heading and paragraph, and you will see a description as a tooltip</p>
</body>
</html>
The href attribute in HTML:
The href attribute is the main attribute of <a> anchor tag. This attribute gives the link address which is specified in that link. The href attribute provides the hyperlink and if it is blank the it will remain in same page.
Example:
With link address:
<a href="https://www.shaahnawaz.com/html-anchor"> This is a Link </a>
And without link address:
<a href="#">This is a link</a>
Output:-
The src Attribute:
The src attribute is one of the important and required attribute of <img> element. It is source for the image which is required to display on bowser. This attribute can contain image in same directory or another directory. The image name or source should be correct else browser will not display the image.
Example:
<img src="logo2.png" height="400" width="600">
Output:
Quotes: Single quotes or double quotes:- In this chapter you have seen that we have used attribute with double quotes but some people might use single quotes in html. So use of single quotes with html attributes is also allowed. The following both statements are absolutely fine.
<a href="https://www.shaahnawaz.com">A link to HTML</a>
<a href='https://www.shaahnawaz.com'>A link to HTML</a>
In HTML5 you can also omit use of quotes around attribute values.
<a href=https://www.shaahnawaz.com>A link to HTML</a>
Styles Attribute:
Html document on to the browser can be a tedious task if the given HTML document is not attractive. The styles in HTML are rules for making the web pages more attractive, engaging and presentable.
Styles Importance:
- Provides better formatting and an aesthetic look to the web pages.
- Web Pages can be well-structured as per the developer's preference.
- There is a greater consistency in the design of the web page.
- Provides an engaging and aesthetic user experience.
1. Inline Style:
In inline styling, the properties of CSS are mentioned within the style attribute of the element that needs to be formatted. The style attribute supports multiple properties that are mentioned as "property's name: value";
Example:
<!DOCTYPE html>
<html>
<head>
<title>Mohammad Shahnawaz</title>
</head>
<body>
<h1 style="text-align: center;"><u><i> Welcome to shaahnawaz.com</u></i></h1>
<h2 style="text-align: center;"><u>About Us</u></h2>
<p style="text-align: center; color: blue; font-size: 20px; font-family: cursive;">We continuously work hard to bring you the best trainers to enable your smooth learning at your home as per your convenience. This is the reason why most of the shaahnawaz students get placed in top in Big Data just after the training.
</p>
</body>
</html>
Output:
2. Internal Style sheet in HTML:
HTML Internal style sheets are embedded within the document that needs to be styled. It is coded in the <style> element within the<head> section.
Example:
<!DOCTYPE html>
<html>
<head>
<title> shaahnawaz.com</title>
<style type="text/css">
he, h2{text-align: center; }
p{
text-align: center; color: blue; font-size: 20px; font-family: cursive;
}
</style>
</head>
<body>
<h1><u><i>Welcome to shaahnawaz.com</i></u></h1>
<h2><u>About Us</u></h2>
<p>We continuously work hard to bring you the best trainers to enable your smooth learning at your home as per your convenience. This is the reason why most of the shaahnawaz students get placed in top in Big Data just after the training.
</p>
</body>
</html>
Output:
3. External Style Sheet:
An External style sheet in HTML contains all the styling attributes in a separate document (extension .css). This document is linked to the HTML documents that need those rules of style. There are two ways of linking the style sheet.
(a) The <link>tag within<head> section. We will be linking style.css
h1,h2{
text-align: center;
}
p{
text-align: center; color: blue; font-size:20px; font-family: cursive;
}
<!DOCTYPE html>
<html>
<head>
<title>shaahnawaz.com</title>
<link rel="stylesheet" type="text/css" href="style.css">
</style>
<body>
<h1><u><i>Welcome to shaahnawaz.com</i></u></h1>
<h2><u>About Us</u></h2>
<p>We continuously work hard to bring you the best trainers to enable your smooth learning at your home as per your convenience. This is the reason why most of the shaahnawaz students get placed in top in Big Data just after the training.
</p>
</body>
</html>
(b) Importing the HTML style sheet
Styles can be applied using the '@import' keyword, followed by the URL of the CSS file. The browser is instructed to load the CSS file using this keyword
Example:
Styles can also be applied using the '@import' keyword, followed by the URL of the CSS file. The browser is instructed to load the CSS
for example:
Code-
<!DOCTYP html>
<html>
<head>
<title>shaahnawaz.com</titl>
<style type="text/css">
@import url("style.css");
</style>
</head>
<body>
<h1><u><i>Welcome to shaahnawaz.com</i></u></h1>
<h2><u>About Us</u></h2>
<p>We continuously work hard to bring you the best trainers to enable your smooth learning at your home as per your convenience. This is the reason why most of the shaahnawaz students get placed in top in Big Data just after the training.
</p>
</body>
</html>
0 comments:
Post a Comment