HTML5 ATTRIBUTES CHAPTER 5



FIFTH TUTORIAL ON HTML ATTRIBUTES


HTML Attributes

 

Attributes provide additional information about HTML elements.

  • All HTML elements can have attributes
  • Attributes provide additional information about an element
  • Attributes are always specified in the start tag
  • Attributes usually come in name/value pairs like: name="value"

The href Attribute

HTML links are defined with the <a> tag. The link address is specified in the href attribute:

Example


<!DOCTYPE html>
<html>
<body>

<h2>The href Attribute</h2>
<p>HTML links are defined with the a tag. The link address is specified in the href attribute:</p>

<a href="https://unknownprogramming.blogspot.com/">This is a link</a>

</body>
</html>
OUTPUT

                    The href Attribute


HTML links are defined with the a tag. The link address is specified in the href attribute:
This is a link

You will learn more about links and the <a> tag later in this tutorial.
The src Attribute

HTML images are defined with the <img> tag.
The filename of the image source is specified in the src attribute:

 

Example


<!DOCTYPE html>
<html>
<body>

<h2>The src Attribute</h2>
<p>HTML images are defined with the img tag, and the filename of the image source is specified in the src attribute:</p>

<img src="img_girl.jpg" width="500" height="600">

</body>
</html>




OUTPUT

The src Attribute

HTML images are defined with the img tag, and the filename of the image source is specified in the src attribute:













The width and height Attributes


HTML images also have width and height attributes, which specifies the width and height of the image:
<!DOCTYPE html>
<html>
<body>

<h2>Size Attributes</h2>
<p>Images in HTML have a set of size attributes, which specifies the width and height of the image:</p>

<img src="img_girl.jpg" width="500" height="600">

</body>
</html>
OUTPUT
Size Attributes
Images in HTML have a set of size attributes, which specifies the width and height of the image:
















The alt Attribute

The alt attribute specifies an alternative text to be used, if an image cannot be displayed.
The value of the alt attribute can be read by screen readers. This way, someone "listening" to the webpage, e.g. a vision impaired person, can "hear" the element.
<!DOCTYPE html>
<html>
<body>

<h2>The alt Attribute</h2>
<p>The alt attribute should reflect the image content, so users who cannot see the image gets an understanding of what the image contains:</p>

<img src="img_girl.jpg" alt="TEMPLE" width="500" height="600">

</body>
</html>
OUTPUT

 

TEMPLE

If we try to display an image that does not exist, the value of the alt attribute will be displayed instead.

The style Attribute


The style attribute is used to specify the styling of an element, like color, font, size etc.

<!DOCTYPE html>
<html>
<body>

<h2>The style Attribute</h2>
<p>The style attribute is used to specify the styling of an element, like color:</p>

<p style="color:red">This is a red paragraph.</p>

</body>
</html>


OUTPUT

The style Attribute
The style attribute is used to specify the styling of an element, like color:
This is a red paragraph.

The lang Attribute


The language of the document can be declared in the <html> tag.
The language is declared with the lang attribute.
Declaring a language is important for accessibility applications (screen readers) and search engines:


 <!DOCTYPE html>
<html lang="en-US">
<body>

...

</body>
</html>



The first two letters specify the language (en). If there is a dialect, add two more letters (US).

The title Attribute


Here, a title attribute is added to the <p> element. The value of the title attribute will be displayed as a tooltip when you mouse over the paragraph:

<!DOCTYPE html>
<html>
<body>

<h2 title="I'm a header">The title Attribute</h2>

<p title="I'm a tooltip">
Mouse over this paragraph, to display the title attribute as a tooltip.
</p>

</body>
</html>

OUTPUT

The title Attribute
Mouse over this paragraph, to display the title attribute as a tooltip.



created by: unknown programmer



Popular posts from this blog

HTML5 COMMENTS & CSS CHAPTER 8

Image
EIGHTH TUTORIAL ON HTML COMMENTS & CSS HTML comments are not displayed in the browser, but they can help document your HTML source code. HTML Comment Tags You can add comments to your HTML source by using the following syntax: <!-- Write your comments here --> With comments you can place notifications and reminders in your HTML: <!DOCTYPE html> <html> <body> <!-- This is a comment --> <p>This is a paragraph.</p> <!-- Comments are not displayed in the browser --> </body> </html> OUTPUT This is a paragraph. Comments are also great for debugging HTML, because you can comment out HTML lines of code, one at a time, to search for errors: <!DOCTYPE html> <html> <body> <!-- Do not display this at the moment <img border="0" src="pic_trulli.jpg" alt="Trulli"> --> </body> HTML  Styles – CSS ...
Read more

HTML FORMS INPUT TYPES CHAPTER 25 PART THREE

Image
25 th TUTORIAL ON HTML FORMS INPUT TYPES PART THREE HTML Input Types This chapter describes the different types for the HTML  <input>  element.   HTML Input Types Here are the different input types you can use in HTML: <input type="button"> <input type="checkbox"> <input type="color"> <input type="date"> <input type="datetime-local"> <input type="email"> <input type="file"> <input type="hidden"> <input type="image"> <input type="month"> <input type="number"> <input type="password"> <input type="radio"> <input type="range"> <input type="reset"> <input type="search"> <input type="submit"> <input type="tel"> <input type="text">...
Read more

HTML5 ELEMENTS CHAPTER 4

Image
FOURTH TUTORIAL IS HTML ELEMENTS HTML  Elements An HTML element usually consists of a  start  tag and an  end  tag, with the content inserted in between: < tagname > Content goes here... < /tagname > The HTML  element  is everything from the start tag to the end tag: < p > My first paragraph. < /p > Start tag         Element content         End tag <h1>                      My First Heading                  </h1> <p>                        My first paragraph.        ...
Read more