All you need do is first tell the browser that you want to insert an image (img) and then where it is located (src, short for "source"). Do you get the picture?
Notice how the img element is opened and closed using the same tag. Like the   tag, it is not tied to a piece of text.
There are three different types of image file types you can insert into your pages:

GIF (Graphics Interchange Format)
JPG / JPEG (Joint Photographic Experts Group)
PNG (Portable Network Graphics)

GIF images are usually best for graphics and drawings, while JPEG images are usually better for photographs. This is for two reasons: first, GIF images only consist of 256 colours, while JPEG images comprise of millions of colours and second, the GIF format is better at compressing simple images, than the JPEG format which is optimized for more complex images. The better the compression, the smaller the size of the image file, the faster your page will load. As you probably know from your own experience, unnecessarily 'heavy' pages can be extremely annoying for the user.
Traditionally, the GIF and JPEG formats have been the two dominant image types, but lately, the PNG format has become more and more popular (primarily at the expense of the GIF format). The PNG format contains in many ways the best of both the JPEG and GIF format: millions of colours and effective compressing.
Images are a staple of any web designer, so it is very important that you understand how to use them properly. In order to place an image onto a website, one needs to know where the image file is located within the file tree of the web server -- the URL (Unified Resource Locator).

Images are very important to beautify as well as to depicts many concepts on your web page. Its is true that one single image is worth than thuasands of words. So as a Web Developer you should have clear understanding on how to use images in your web pages.

Image Attributes:

Following are most frequently used attributes for <img> tag.

· width: sets width of the image. This will have a value like 10 or 20%etc.

· height: sets height of the image. This will have a value like 10 or 20% etc.

· border: sets a border around the image. This will have a value like 1 or 2 etc.

· src: specifies URL of the image file.

· alt: this is an alternate text which will be displayed if image is missing.

· align: this sets horizontal alignment of the image and takes value either left, right orcenter.

· valign: this sets vertical alignment of the image and takes value either top, bottom orcenter.

· hspace: horizontal space around the image. This will have a value like 10 or 20%etc.

· vspace: vertical space around the image. This will have a value like 10 or 20%etc.

· name: name of the image with in the document.

· id: id of the image with in the document.

· style: this will be used if you are using CSS.

· title: specifies a text title. The browser, perhaps flashing the title when the mouse passes over the link.

· ismap and usemap: These attributes for the <img> tag tell the browser that the image is a special mouse-selectable visual map of one or more hyperlinks, commonly known as an image map.

Syntax for defining an image:

<img src="url" alt="some_text">

The URL points to the location where the image is stored. An image named "boat.gif", located in the "images" directory on "www.w3schools.com" has the URL: http://www.w3schools.com/images/boat.gif.

The browser displays the image where the <img> tag occurs in the document. If you put an image tag between two paragraphs, the browser shows the first paragraph, then the image, and then the second paragraph.

Html image src attributes:

The source attribute (src) is what makes an image tag display an image. An image source is a URL value and should point to the directory location of an image file. Let's take one more look at the code from our first HTML image example.

Image source URLs can be either local or global, meaning that the picture files you wish to display on your website can be either hosted locally on your machine (local) or hosted elsewhere on some other web site domain (global).

Local URLs are relative to the file path of the web page itself. For example, if the picture file is placed inside the same directory as the web page, then the local URL for the image would simply be the name of the image, since it is residing in the same directory as the HTML page.

Local URLs Explained:

Local Src	Location Description
src="sunset.gif"	picture file resides in same directory as .html file
src="pics/sunset.gif"	picture file resides in the pics directory
src="../sunset.gif"	picture resides one folder "up" from the .html file
src="../pics/sunset.gif"	picture file resides in the pics directory, one folder "up" from the .html file.

Pictures must reside on the same web host as your .html file in order for you to use local URLs. A URL cannot contain drive letters such as C:\, since a src URL is a relational interpretation based on the location of the.html file and the location of the picture file. Something like src="C:\www\web\pics\" will not work.

Each URL format has its pros and cons. Using the URL of pictures on other sites poses a problem if the other site happens to change the physical location of the picture file. Copying the file directly to your web server solves this problem. However, as you continue to upload picture files to your system, you may eventually run short on hard drive space. Use your best judgment based upon your situation.

Is that all I need to know about images?

There are a few more things you should know about images.
First, you can easily insert pictures located in other folders, or even pictures that are located on other websites:

An image source value is essentially the URL of a picture file and tells the web browser where the image is located so that it can then display the image correctly.

Here src is images folder in my desktop

Here image name is web design.jpg

Here alt text is web design

Long description is http://webcoachbd.wordpress.com

:
Example 2:

<img
src="images/logo.png" />

Example 3:

<img
src="http://www.creativedesignbest.blogspot.com/logo.png" />

Second, images can be links:
Example 4:

<a href="http://www. creativedesignbest.blogspot.com ">

<img src="logo.png" /></a>

Are there any other attributes?

You always need to use the attribute src, which tells the browser where the image is located. Besides that, there are a number of other attributes which can be useful when inserting images.
The alt attribute is used to give an alternate description of an image if, for some reason, the image is not shown for the user. This is especially important for users with impaired vision, or if the page is loaded very slowly. Therefore, always use the alt attribute:
Example 5:

<img src="logo.gif"
alt="webcoachbd.net logo" />

Some browsers let the text of the alt attribute appear as a small pop-up box when the user places their cursor over the picture. Please note that when using the alt attribute, the aim is to provide an alternative description of the picture. The alt attribute should not be used to create special pop-up messages for the user since then visually impaired users will hear the message without knowing what the picture is.
The title attribute can be used to add information to the image:

img src="logo.gif" title="Learn
HTML from creativedesignbest.blogspot.com " />

Two other important attributes are width and height:
Example 7:

<img src="logo.png" width="141px" height="32px" />

The width and height attributes can be used to set the height and width of an image. The value that is used to set the width and height is pixels. Pixels are the units of measurement used to measure the resolution of screens. (The most common screen resolution is 1024x768 pixels). Unlike centimetres, pixels are relative units of measurement which depend on the resolution of the screen. To a user with a high screen resolution, 25 pixels may correspond to 1 centimetre, while the same 25 pixel in a low screen resolution may correspond to 1.5 centimetres on the screen.
If you do not set the width and height, the image will be inserted in its actual size. But with width and height you can manipulate the size:
Example 8:

img src="logo.gif"
width="32px" height="32px" />

However, it is worth keeping in mind that the actual size in kilobytes of the image file will remain the same so it will take the same time to load the image as it did before, even though it appears smaller on the screen. Therefore, you should never decrease the image size by using the width and height attributes. Instead, you should always resize your images in an image editing program to make your pages lighter and faster.
That said, it is still a good idea to use the width and height attributes because the browser will then be able to detect how much space the image will need in the final page layout before the image is fully downloaded. This allows your browser to set up the page nicely in a quicker way.

HTML Images - Set Height and Width of an Image:

The height and width attributes are used to specify the height and width of an image.

The attribute values are specified in pixels by default:

Example 1

<img src="images/web design.jpg" width="600" height="160" />
<img src="images/web design.jpg" width="650" height="200" />

Tip: It is a good practice to specify both the height and width attributes for an image. If these attributes are set, the space required for the image is reserved when the page is loaded. However, without these attributes, the browser does not know the size of the image. The effect will be that the page layout will change during loading (while the images load).

Margin Attributes:
Format: <img style="margin:00px 00px "/>

<!DOCTYPE html>

<html>

<head>

<title> example of image with margin tag </title>

</head>

<body style="color:red;">

this image with no margin. this image with no margin. this image with no margin. this image with no margin. this image with no margin. this image with no margin. this image with no margin. 

<img src = "bappi.jpg" height="100" width="100" border="5" style="border-color:green" alt = "Bappi's Photograph"/> 

this image with horizontal and vertical margin. this image with horizontal and vertical margin. this image with horizontal and vertical margin. this image with horizontal and vertical margin. this image with horizontal and vertical margin.

<img src = "bappi.jpg" alt = "Bappi's Photograph" height="100" width="100" border="5" style="border-color:green; margin:50px 50px"/> 

</body>

</html>

Border around:

You can add a border to the image using the border setting shown in the example below:

Note:
Netscape browsers will only show the border if the image is a link.
<img src="http://www. webcoachbd.wordpress.com / banner.gif" border="5">

Adding a border to your image might help the visitor recognize that the image is a link. However, the net is filled with images that work as links and have no borders indicating it - so the average visitor is used to letting the mouse run over images to see if they are links.

Still - if you have an image that is often mistaken you might consider adding a border to it - although you should probably consider changing the image entirely - since if it does not indicate by itself that it is a link then it isn't serving it's purpose.

Alternative text:

You can add an alternative text to an image using the alt setting shown in the example below:

Format:

,img alt =”sample picture”/>

Example:1

You should always add alternative texts to your images, so the users can get an idea of what the image is about before it is loaded.

This becomes particulary important if the image is a link.

Few things are as annoying as knowing that you want to leave the current page - and at the same time being forced to wait for an image to load before being able to do so.

It is extremely tempting to use the browser's straightforward options to leave the entire site instead.

The required alt attribute specifies an alternate text for an image, if the image cannot be displayed.

The value of the alt attribute is an author-defined text:

Example 2

The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).

Spacing around:

You can easily add space over and under your images
with the Vspace attribute.
In a similar way you can add space to the left and right of the image using theHspace attribute.
Below is an example using these attributes

As you see these settings allow you to add spacing around your image. Unfortunately, they also force you to add the same spacing to each side of the image (over and under - or left and right).

The workaround for this, if you only want spacing on one side of the image is to use a 1x1 pixel transparent gif image.

If, for example, you wanted a 10 pixel spacing to the left of your image you could use the transparent image (pixel.gif) this way:

The 1x1 pixel transparent gif image is simply stretched to whatever size you want the spacing to have.

This 1x1 pixel "cowboy-trick" is probably one of the most widely used workarounds on the entire net.

The reasons are obvious: It works on all browsers and it gives you complete pixel precision in your design!

Alignment of images:

Html horizontally align images

Images can be aligned horizontally to the right or to the left of other elements using the align attribute. Image elements are aligned to the left by default.

1. align

o right

o left

HTML Align Attribute Code:

HTML Image Align: Right:

As you can see, the image's right edge has now been aligned with the right edge of the display box. Since the display box is the parent element, this is the desired behavior for the align attribute. If we take this example a step further, you can achieve some really great designs by embedding aligned images inside of paragraph elements.

HTML Image Align Code:

This is paragraph 1, yes it is...

The image will appear along the...isn't it?

This is the third paragraph that appears...

You can align images according to the text around it, using the following alignments:

default aligns the image using the default settings of the Web browser. Same as baseline.

left aligns the image in the left margin and wraps the text that follows the image.

right aligns the image in the right margin and wraps the text that precedes the image.

top aligns the top of the image with the surrounding text.

texttop aligns the top of the image with the top of the tallest text in the line.

middle aligns the middle of the image with the surrounding text.

absmiddle aligns the image with the middle of the current line.

baseline aligns the image with the baseline of the current line.

bottom aligns the bottom of the image with the surrounding text.

absbottom aligns the image with the bottom of the current line.

center aligns the center of the image with the surrounding text.

HTML

Wrap text around:

In addition to the vertical alignments covered on the images can also be aligned horizontally.

To do this, add align="left" or align="right" to the <img> tag.

Consider these examples to see how it works:

HTML-CODE

<img src="rainbow.gif"
align="left">
bla bla bla bla bla
bla bla bla bla bla
bla bla bla bla bla

<img src="rainbow.gif"
align="right">
bla bla bla bla bla
bla bla bla bla bla
bla bla bla bla bla

Basic Notes - Useful Tips:

Note: If an HTML file contains ten images - eleven files are required to display the page right. Loading images takes time, so my best advice is: Use images carefully.

Note: When a web page is loaded, it is the browser, at that moment, that actually gets the image from a web server and inserts it into the page. Therefore, make sure that the images actually stay in the same spot in relation to the web page, otherwise your visitors will get a broken link icon. The broken link icon is shown if the browser cannot find the image.

Insert images source:

<!DOCTYPE html>

<html>

<body>

An image:

<img src="html.gif" alt="learn html" width="42" height="42">

A moving image:

<img src="html.gif" alt="html tutorial" width="48" height="48">

Note that the syntax of inserting a moving image is no different from a non-moving image.

</body>

</html>

Insert images from different locations source:

<!DOCTYPE html>

<html>

<body>

An image from another folder:

<img src="/images/chrome.gif" alt="Google Chrome" width="33" height="32">An image from google.com 

</body>

</html>

How to let an image float to the left or right of a paragraph source:

<!DOCTYPE html>

<html>

<body>

<img src="sample logo.gif" alt="logo design" style="float:left" width="42" height="42"> A paragraph with an image. The image will float to the left of this text.

<img src="web design.gif" alt="web design tutorial" style="float:right" width="42" height="42"> A paragraph with an image. The image will float to the right of this text.

Note: Here we have used the CSS "float" property to align the image; as the align attribute is deprecated in HTML 4, and is not supported in HTML5.

</body>

</html>

How to use an image as a link source:

<!DOCTYPE html>

<html>

<body>

Create a link of an image:

<a href="default.asp">

<img src="smiley.gif" alt="HTML tutorial" width="42" height="42"></a>

No border around the image, but still a link:

<a href="default.asp">

<img style="border:0;" src="smiley.gif" alt="HTML tutorial" width="42" height="42"></a>

</body>

</html>

How to create an image map, with clickable regions. Each region is a hyperlink source:

<!DOCTYPE html>

<html>

<body>

Click on the sun or on one of the planets to watch it closer:

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">

<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">

<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">

<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">

</map>

</body>

</html>

HTML Image Tags:

HTML <img> Tag

How to insert an image:

<img src="html.gif" alt="learn html" height="42" width="42">

HTML <map> Tag:

An image-map, with clickable areas:

HTML <area> Tag:

An image-map, with clickable areas:

Pages

Saturday, May 10, 2014

HTML image

Image Attributes:

Syntax for defining an image:

<img src="url" alt="some_text">

Html image src attributes:

The source attribute (src) is what makes an image tag display an image. An image source is a URL value and should point to the directory location of an image file. Let's take one more look at the code from our first HTML image example.

Image source URLs can be either local or global, meaning that the picture files you wish to display on your website can be either hosted locally on your machine (local) or hosted elsewhere on some other web site domain (global).

Local URLs Explained:

Is that all I need to know about images?

Are there any other attributes?

HTML Images - Set Height and Width of an Image:

Border around:

Alternative text:

Alignment of images:

HTML Align Attribute Code:

HTML Image Align: Right:

HTML Image Align Code:

Basic Notes - Useful Tips:

HTML <img> Tag

HTML <map> Tag:

An image-map, with clickable areas:

HTML <area> Tag:

An image-map, with clickable areas:

No comments:

Post a Comment