HTML Attributes

 

HTML Attributes

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

The href Attribute

The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link goes to:

<a href="https://www.shop.com">visit our shop</a>


<!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://mundherohan.blogspot.com/">Visit My Website</a>


</body>

</html>

 


The src Attribute

The <img> tag is used to embed an image in an HTML page. The src attribute specifies the path to the image to be displayed:

<!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>

 

The width and height Attributes

The <img> tag should also contain the width and height attributes, which specifies the width and height of the image (in pixels):

<html>
<body>

<h2>Width and Height Attributes</h2>

<p>The width and height attributes of the img tag, defines the width and height of the image:</p>

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

</body>
</html>


 

The alt Attribute

The required alt attribute for the <img> tag specifies an alternate text for an image, if the image for some reason cannot be displayed. This can be due to slow connection, or an error in the src attribute, or if the user uses a screen reader.

<!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="Girl with a jacket" width="500" height="600">


</body>

</html>

 

The style Attribute

<!DOCTYPE html>
<html>
<body>

<h2>The style Attribute</h2>
<p>The style attribute is used to add styles to an element, such as color:</p>

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

</body>
</html>

Read More

Search This Blog

HTML Headings

  HTML Headings EX. Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6 HTML Headings HTML headings are defined with the  <h1>  to  <h6>  tags. <h1>  defines the most important heading.  <h6>  defines the least important heading. <!DOCTYPE html> <html> <body> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> </body> </html> Headings Are Important Search engines use the headings to index the structure and content of your web pages. Users often skim a page by its headings. It is important to use headings to show the document structure. <h1>  headings should be used for main headings, followed by  <h2>  headings, then the less important  <h3> , and so on. Bigger Headings Each HTML heading has a default size. However, y...

How To Make Html Page

  Learn HTML Using Notepad or TextEdit Web pages can be created and modified by using professional HTML editors. However, for learning HTML we recommend a simple text editor like Notepad (PC) or TextEdit (Mac). We believe in that using a simple text editor is a good way to learn HTML. Follow the steps below to create your first web page with Notepad or TextEdit. Step 1: Open Notepad (PC) Windows 8 or later: Open the  Start Screen  (the window symbol at the bottom left on your screen). Type  Notepad . Windows 7 or earlier: Open  Start  >  Programs >   Accessories >   Notepad Step 2: Write Some HTML < !DOCTYPE  html > < html > < body > < h1 >your heading < /h1 > < p >your paragraph here < /p > < /body > < /html >   Step 3: Save the HTML Page Save the file on your computer. Select  File > Save as  in the Notepad menu. Name the file  "index.htm"  and s...