Html Tutorial – How to insert images in html
Jul 12, 2012, by admin
Adding images to your website or social networking profile is a great way to spruce up your page. HTML (HyperText Markup Language) comes with many web development features, but the code required for adding images is fairly straightforward.
Steps to insert images in html
1.Upload your image to a free image hosting website, such as Photobucket or Tinypic, that allows hotlinking. Hotlinking is linking to the image directly from the host website’s server; some websites have forbidden it because hotlinking uses their bandwidth and takes up space on their servers.
If you have a paid web hosting account, upload your image to that host instead. It will be more consistent than a free site.
2.Open a new document in a text editor (e.g., Notepad) or the page on your website/profile where you can alter the HTML.
3.Begin with the img tag. The img tag is empty, which means it doesn’t need a closing tag. However, for XHTML validity, you can add a space and slash before the greater-than sign.
<img />
4.There are many available features, but only one is absolutely essential: src. This is the location, or URL, of your image.
<img src=”URL of image” />
5.Next, you should add the alt attribute. This specifies alternate text, in case the image doesn’t load. The alternate text is also read to blind visitors who use screen readers.
If you hover your cursor over the image, the alternate text will show in a tooltip, but only in Internet Explorer. The cross-browser solution (works in Firefox et al.) is to use the title attribute in addition to alt. (Leave this out if you don’t want the image to have a tooltip.)
For example:
<img src=”URL of image” alt=”Just in case” title=”Tooltip”/>
6.Now, you could optionally indicate the size of your image, by using the height and width attributes, and specifying the pixels or percentage. Note that by changing the size like this, you’re only changing the size that the image will display. The browser still loads the actual size of the image, so if you have an unnecessarily large image, it’s better to resize it using a photo editing program or PicResize.com rather than just changing the display size.
<img src=”URL of image” alt=”Just in case” title=”Tooltip” height=”50%” width=”50%” />
<img src=”URL of image” alt=”Just in case” title=”Tooltip” height=”25px” width=”50px” />
