MyBlogHelp– A Blog for Digital Marketing, Affiliate Marketing, Organic Lead Generation.
  • Home
  • About
  • Contact
  • Privacy
  • Sitemap
  • BLOG
  • AFFILIATE MARKETING
    • LeadsArk
  • MORE
    • MAKE MONEY
      • ONLINE BUSINESS
      • ADSENSE
      • AFFILIATE MARKETING
    • BLOGGING
      • SEO
      • BlogSpot
      • WORPRESS
      • GOOGLE
      • COMPUTER TIPS
    • WEB DESIGN
      • HTML
      • CSS
      • BOOTSTRAP
      • JAVASCRIPT
      • JQUERY
    • WEB DESIGN
      • HTML
      • CSS
      • BOOTSTRAP
      • JAVASCRIPT
      • JQUERY
    • WEB DEVELOPMENT
      • PHP
      • WORDPRESS
  • DOWNLOADS
    • Blogger Template
    • Wordpress Theme
    • PDF

Monday, December 3, 2018

How to use Image Tag in HTML?

 MyBlogHelp     December 03, 2018     html     No comments   

Introduction of HTML Images

Images on webpage should be attractive and beautiful. You can add an image on the webpage using HTML. For this, you will have to use <img> tag. The <img> tag provides many attributes from which you can control the presentation of the image.

Syntax and Attribute of <img> tag

<img src=”url” alt=“text”><img>

<img> tag is an empty tag because it is without closing/end tag. It    contains attributes only.

src:- src attribute specifies the URL (web address) and Path of the image.

alt:- alt attribute provides an alternate text instead of image, if the user unable to view image because of slow connection.

width:- With this attribute, you can set the width of the image.

height:- With this attribute you can set the height of the image.

style:- With this attribute you can apply CSS rules on the images.

Including images in web page

You can use <img> tag to include images in any webpage as mentioned above. The use of src attribute with <img> tag is necessary. All the attributes are optional. Example of this tag is below.





The above script will generate the output on the web page as below.


html-img-tag

Setting alternative text with images

Because of some reason, if the image is not shown then alternate text display in that place. These attributes are also used to tell the search engines about what the image is about to. An example of this is given below.




      If there is no picture load due to any reason, then alternate text will be shown in this way.


html-img-alt

Setting height & width of images

You use height and width attributes to set height and width. Their values will be in integers.



        The above script will generate the given webpage.


html-img-height-weight

Setting border of images

You can also set the border of the image, for this, you use the border attribute. This attribute has the value border size.



        The script above will generate the given web page.

html-img-border

Making image a link

You can even make a link for the image. By doing so, whenever a person clicks on an image, a new webpage will open. For this you write <img> tag in <a> tag. Instead of text in the anchor tag you define the <img> tag.
An example of this is given below.



This script generate the the output as below.

html-img-link

The above example shows an image where you can open the link to click on image.

Hopefully, this "HTML Tutorial - Image” would be helpful for you. If it's so please help your friends and other bloggers to share this post on social media. If you have any question related to the post, please comment on the comment box and also follow this website for more information about the blogging and SEO tips. 


Previous:- How to use Table Tag in HTML?          Next:- How to use List in HTML?      
  



  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 Comments:

Post a Comment

Thank you for reading this post. Please do not enter any spam link in the comment box.

Followers

Blog Archive

  • ►  2020 (4)
    • ►  October (1)
    • ►  September (1)
    • ►  August (2)
  • ►  2019 (52)
    • ►  December (1)
    • ►  November (2)
    • ►  October (1)
    • ►  August (1)
    • ►  July (1)
    • ►  May (11)
    • ►  April (10)
    • ►  March (6)
    • ►  February (3)
    • ►  January (16)
  • ▼  2018 (54)
    • ▼  December (27)
      • How to use html5 nav tag?
      • How to install Google Fonts on your Blogger Blog?
      • How to use section tag in html5?
      • How to use meter tag in html5?
      • How to use time tag in html5?
      • How to use header tag in HTML5?
      • How to use figure tag in html5?
      • How to use aside tag in html5?
      • How to use details Tag in HTML5?
      • How to use wbr tag in html5?
      • How to use article tag in HTML 5 ?
      • How to use menu tag in html?
      • How to use base tag in HTML?
      • How to use HTML hr and br Tag?
      • How to use HTML address tag?
      • How to use HTML Meta Tags?
      • How to use HTML script & noscript Tag?
      • How to use DOCTYPE declaration in HTML?
      • How to use Form Tag in HTML?
      • How to use Block and Inline Tags in HTML?
      • How to use Lists in HTML?
      • How to use Image Tag in HTML?
      • How to use Table Tag in HTML?
      • How to use anchor Tag in HTML?
      • How to Format & Style in HTML?
      • How to use Heading in HTML?
      • What is Attribute in HTML?
    • ►  November (5)
    • ►  May (5)
    • ►  April (4)
    • ►  February (3)
    • ►  January (10)
  • ►  2017 (17)
    • ►  December (9)
    • ►  November (8)

Popular Posts

  • How to use the main tag in html5?
  • How to use keygen tag in html5?
  • How to use html5 mark tag to highlight text?
  • How to start Online Business without money from home?
  • What is a search engine?

Contact Us

Name

Email *

Message *

About MyBlogHelp

Most of the posts, we share on this blog related to Affiliate Marketing, Organic Lead Generation, Digital Marketing, Social Media Marketing, Make Money Online, SEO, and web design.

Featured Post

LeadArk - Affiliate Marketing | Qualified Organic Lead Generation | LeadsArk Review

Copyright © MyBlogHelp– A Blog for Digital Marketing, Affiliate Marketing, Organic Lead Generation.
Design by Md. Abdussamad | MyBlogHelp.com