(3 - user rating)

User Rating: 2 / 5

Star ActiveStar ActiveStar InactiveStar InactiveStar Inactive
 

Images are a big part of any Web page. It helps to drive your point across and helps to get your site visitor's attention.

How do you insert images into your page?

You must use this code:

<img src="imagefile.jpg" alt="image on your site" width="100" height="100">

HTML for Beginners: Images (Part 6)

The <img> tag introduces an image, the attribute src or source allows you to point to your image file. The alt attribute stands for alternative text. This is what shows up when the image cannot be shown for some reason (slow Internet connection or server is not responding). The width and height attributes determine the dimensions of the image.

Take a note that you should use the full URL of the image if it is not hosted on the same directory as your HTML document. For example:

<img src="http://www.whereisyourimage.net/imagefile.jpg" alt="image on another site" width="100" height="100">

The alt attribute

It is very important that you should fill in the alt attribute. At the very least, it would give people an idea what the image is all about, even if they are not able to see it.

However, the alt attribute, which is most often mistakenly called the alt tag, also serves other purposes.

For example:

  1. A blind person accessing your Web site via a screen reader will hear the alt attribute, allowing him or her to "see" the image you have included in your page.
  2. Text-based browsers and search engine spiders will be able to read the alt attribute.

Speaking of search engines, the alt attribute can also help to make your page or at least your image rank higher in search engine results pages. There is even speculation among SEO professionals that putting your keywords in the alt text actually has more weight than putting your keywords in the title or header tags. Also, image search services, such as Google Images, Yahoo Image Search and Bing Images, use the alt attribute.

The width and height attributes

When inserting an image, it would be a good practice to specify the width and height of the image. This way, the browser will know just how much space to leave for your image. This means that even though your image does not load right away, the page will still be properly laid out as if the image has already completely loaded.

It is also important to use the right proportions so that your image does not look distorted. For example, if you have an image that is 200 pixels wide and 200 pixels high, specifying a width and height of 200 pixels and 100 pixels respectively will result in the page showing a deformed image.

Align your images

It is also important to align your images. For example, you can have an image displayed at the center of the paragraph, or you could have it flushed to the right.

You could do this using the align attribute.

  • To align your images to the left, use <img align="left">
  • To align your images to the right, use <img align="right">
  • To align your images to the middle, use <img align="middle">
  • To align your images to the top, use <img align="top">
  • To align your images to the bottom, use <img align="bottom">

The align attribute for the <img> tag, however, has already been deprecated in HTML 4.01, and if you are using HTML 5, it is not supported anymore.

You could still, however, use CSS to align your images by using the following syntax:

<img style="float:right">

in order to align your image to the right.

Adding links to your images

Sometimes, you will want to use an image to link to another content. It could be another page or perhaps you would want to give people a larger view of the image you have used for your page.

You can add a link to your image by using this syntax:

<a href="page.html"><img src="image.jpg" alt="image with link" width="100" height="100"></a>

That sounds simple enough. But what if you need to add two or more links to a single image? How do you do that?

Though it’s a bit outdated, you want to at least know about how you can create such things. An image map is what you would call a single image that has many hyperlinked areas. For example, if you have an image of a face and you would want to link the eyes to a page you call eye.html and the lips to lip.html, you would need to create an image map.

To create an image map, you would need to get the coordinates of your hot spots. Hot spots are those areas that are clickable within your image. To get the coordinates, you can use an image processing software or an online tool such as the Poor Person's Image Mapper.

Once you know the coordinates, you can now insert an image map into your page. You can use the following syntax:

<img src="face.jpg" usemap = #face>

<map name=face>

<area shape=rect coords=0,0,129,129 href="eye.html">

<area shape=rect coords=130,130,159,159 href="lip.html">

</map>

In this image map, the rectangular area within the coordinates (0, 0) and (129, 129) is clickable and linked to the eye.html page.

Similarly, the rectangular area within the coordinates (130, 130) and (159, 159) is also clickable, but this time it is linked to the lip.html page.

There are other shapes that you could use:

<area shape=circle coords=0,0,129,129 href="url">

and

<area shape=polygon coords= 0,0,129,129 .., xn,yn Href="url">

So that’s how you add images to your site.

Read more http://www.webdesign.org/html-for-beginners-images-part-6.22322.html

Comments   

0 #318 hwrstosy 2019-03-30 01:07
http://cialisckajrhd.com - canada pharmacy online viagra professional canada drugs laws
Quote | Report to administrator
0 #317 wgloche 2019-03-30 00:58
http://genericcilaken.com/ - buy cialis online over the counter viagra canada drugs online
Quote | Report to administrator
0 #316 grsgoara 2019-03-29 15:21
http://buyjeacialonline.com/ - online canadian pharmacy buy viagra online prescription drugs online
Quote | Report to administrator
0 #315 hfgFoesk 2019-03-27 12:51
http://viagenericahecv.com - online pharmacy canada buy cheap viagra buy cialis online safely
Quote | Report to administrator
0 #314 bbtPhype 2019-03-27 10:54
http://viagraocns.com/# - canada online pharmacy cheapest viagra prices best place to buy cialis online forum
Quote | Report to administrator
0 #313 ggeBoymn 2019-03-27 05:46
http://menedkkr.com/# - where to buy cialis over the counter viagra brand best canadian pharmacy
Quote | Report to administrator
0 #312 gsfNeunc 2019-03-26 18:03
http://viagraveikd.com/# - online pharmacy reviews viagra reviews canadian online pharmacy
Quote | Report to administrator
0 #311 hrskeync 2019-03-26 07:58
http://valcialisns.com/ - canada drugs online review viagra australia generic viagra names
Quote | Report to administrator
0 #310 ylmloche 2019-03-26 01:31
https://saresltd.com/kamagra/ - canada drugs review cheap viagra 100mg costco online pharmacy
Quote | Report to administrator
0 #309 hwfAnema 2019-03-25 18:44
http://hopcialisraj.com/ - buy cialis online cheap viagra online buy cialis without prescription
Quote | Report to administrator
0 #308 hsfgoara 2019-03-25 15:07
https://saresltd.com/cialis/ - canada drugs reviews discount viagra buy cialis online overnight shipping
Quote | Report to administrator
0 #307 bgsHeexy 2019-03-24 15:52
http://cialisgretkjss.com/# - generic viagra review tadalafil dosage best canadian online pharmacy
Quote | Report to administrator
0 #306 bfgphype 2019-03-24 10:25
http://viagranerrds.com/# - viagra online canadian pharmacy viagra brands generic name for viagra
Quote | Report to administrator
0 #305 qazphype 2019-03-23 23:58
http://cialisserfher.com/# - generic viagra india buy online viagra walmart pharmacy online
Quote | Report to administrator
0 #304 tbjBoymn 2019-03-23 10:06
http://erectiledysfunctionmedicinesus.com/# - buy cialis online viagra in canada online pharmacy india
Quote | Report to administrator
0 #303 bsistosy 2019-03-22 05:40
http://viagrapfhze.com/# - when will viagra go generic cheap generic viagra generic viagra online
Quote | Report to administrator
0 #302 wbfHeexy 2019-03-21 17:26
http://viagracefo.com/# - canadian pharmacy review viagra price buy cialis cheap
Quote | Report to administrator
0 #301 bgfFoesk 2019-03-21 06:39
http://cialisovnnc.com/# - ordering drugs from canada cialis prescription online prescription
Quote | Report to administrator
0 #300 bsfPhype 2019-03-20 18:42
http://canadiannowv.com/# - canadian pharmacy cialis buying viagra buy generic cialis
Quote | Report to administrator
0 #299 tgnBoymn 2019-03-20 05:35
best fruits for keto diet keto diet definition what can't you eat on a keto diet
Quote | Report to administrator
0 #298 gbykeync 2019-03-19 07:41
http://cialiscials.com/# - when does viagra go generic cheap generic viagra where to buy cialis over the counter
Quote | Report to administrator
0 #297 bgjNeunc 2019-03-19 04:20
http://viagraoahvfn.com/# - mail order prescription drugs from canada viagra story online pharmacy india
Quote | Report to administrator

Add comment


YOUR SUCCESS IS OUR SUCCESS

 

 

OUR BUSINESS MANAGEMENT

Maecenas et faucibus arcu. Quisque congue diam ac vulputate finibus. Fusce sed neque dictum, porta sapien quis, vehicula orci.

management1 f9b07

CHAIRMAN

Lorem ipsum dolor sit amet cursus consectetur adipiscing elit curabitur maximus augue consectetur.

management2 b741d

DIRECTOR

Lorem ipsum dolor sit amet cursus consectetur adipiscing elit curabitur maximus augue consectetur.

management3 b694d

PRESIDENT

Lorem ipsum dolor sit amet cursus consectetur adipiscing elit curabitur maximus augue consectetur.

management4 b4f56

MANAGER

Lorem ipsum dolor sit amet cursus consectetur adipiscing elit curabitur maximus augue consectetur.

management5 daffa

SUPERVISOR

Lorem ipsum dolor sit amet cursus consectetur adipiscing elit curabitur maximus augue consectetur.

management6 00f9d

ACCOUNTANT

Lorem ipsum dolor sit amet cursus consectetur adipiscing elit curabitur maximus augue consectetur.

management7 5e1be

LAWYER

Lorem ipsum dolor sit amet cursus consectetur adipiscing elit curabitur maximus augue consectetur.

management8 2fab9

TEAM LEADER

 

Lorem ipsum dolor sit amet cursus consectetur adipiscing elit curabitur maximus augue consectetur.

$489.00 each Cyford PBX Phone System
5 5 1 Product
Item not sold anymore
$489.00 each Cyford PBX Phone System
5 5 1 Product
Item not sold anymore
$489.00 each Cyford PBX Phone System
5 5 1 Product
Item not sold anymore
$489.00 each Cyford PBX Phone System
5 5 1 Product
Item not sold anymore