Html Download Link For Image
HTML Image Map has been around all this while, and yet not many web pages are using it when it comes to single image with multiple links. It’s really handy and fast for web designers or developers to create multiple “Hot Spots” linking within a single image, without slicing any image for.
By Joe Burns
Desktop-as-a-Service Designed for Any Cloud ? Nutanix Frame
(with updates by editorial staff 1/12/16)
How To Add HTML Images To Your Web Pages!
By now you know enough to write a very nice, text-based home page in HTML, but it is the ability of the Web to provide pictures, technically called images, graphics, or sometimes icons, that has made it so popular. In this Primer, you'll learn how to place an image on your web page and also how to turn an image into a link to another page using HTML to display the image.
Placing An HTML Image On Your Page
The HTML command to place an image is constant. You will use the same format every time. Now might be a good time to talk about where to store everything on your web server because you're starting to call for additional items to fill up your home page. Until now, all you did was put text on the page. Now you're going to place an image.
At this point in your HTML career, it's a good idea for you to place whatever images you are going to use in a subdirectory called 'images'. That means place the image in a directory (to be called 'images') under the directory where your web pages are located (which would be the 'root' directory for your site). There's more on that coming up in Primer #7.
Here's the HTML format for placing an image:
<IMG SRC='image.gif' ALT='some text' WIDTH=32 HEIGHT=32>
By replacing 'image.gif' with 'homepage.gif', one of my own graphics, you get this...
Here's What's Happening: the Image Element Parameters
- IMGstands for 'image.' It announces to the browser that an image will go here on the page. Yes, the image will pop up right where you write in the image tag.
- SRC stands for 'source.' This again is an attribute, a command inside a command. It's telling the browser where to go to find the image. Again, it's best for you to place the images you want to use in a subdirectory called 'images'. This way you can call for the image by name with just the subdir name in front of it, like this: /images/imagename.gif. You could also direct the source to some other place online, such as an image you have stored on Photobucket, for instance, by using the full URL of the image, such as http://www.photobucket.com/youraccount/imagename.jpg. Right now, let's just get it to work.
- image.gifis the name of the image. Notice it's following the same type of format as your HTML documents. There is a name (image) then a dot and then there is a suffix (gif).
- ALTstands for 'alternate text'. This tells the browser that if it can't find the image, then just display this text. It also tells anyone who can't view your image what the image is about. For example a disabled user using a screen reader, or dare I mention it, Search Engines. When you mouse over the image, the alternate text pops up.
- 'some text'is where you put the text describing your image.
- WIDTHstands for just that, the width of the image in pixels. It can range from 1 pixel to, well, just about any number, but generally will be less than the width of the web browser.
- HEIGHT stands for, as you might guess, the height of the image in pixels. Again, the height can be just about anything, but generally will be less than the height of the web browser.
Image Formats for the Web
There are four basic formats you will find on the Web. Each is denoted to the browser by a different suffix. Remember that 'name.suffix' discussion from Primer #1?
- .gif This is pronounced 'jif' or 'gif' (hard 'G') depending on whom you speak to. I have always said 'jif', like the peanut butter. This is an acronym for Graphics Interchange Format.
The format was invented by Compuserve and it's very popular. The reason is that it's a simple format. It's a series of colored picture elements, or dots, known as pixels, that line up to make a picture. Your television's picture is created much the same way. Browsers can handle this format quite easily.
- .png Pronounced as 'ping', this stands for Portable Network Graphic. This is ultimately the replacement for .gif, with partial transparency options, but browser support is sketchy--some browsers still don't like to display .png files.
- .jpeg or .jpg (pronounced 'j-peg') There are two names to denote this format because of the PC and MAC formats allowing 3 and 4 letters after the dot. JPEG is an acronym for Joint Photographic Experts Group, the organization that invented the format. The format is unique in that it uses compression after it's been created. That's fancy computer talk that means that when the computer is not using a .jpeg image it folds it up and puts it away. For example, if the picture is 10K bytes when displayed, it may be only 4K bytes when stored. Nice trick, huh? It saves on hard drive space, but also tends to require a bit of memory on your part to unfold the image.
Someone always writes to me to tell me that .gif images also use compression. Yes, they do, but only when they are first created into that format. After that, no compression. JPEG, on the other hand, uses compression throughout its life to fold up smaller than it really is.
- .bmp (pronounced 'bimp') This is a 'bitmap.' You will probably never place a bitmap as an image, although some browsers do allow it. A bitmap is an image that a computer produces and places for you. A counter is an example. Even though some browers, such as Internet Explorer, will allow you to place a BMP as an image, I wouldn't. Most browsers will not be able to display it. Go with .gif, .jpg or .png.
Where Do I Get Free Images For My Page?
They are literally everywhere. There are plenty of sites out there that offer tons of free images. Plus, since you've been surfing, you've seen hundreds of images already. If you see something on someone's page that you really like, ask to use it. Don't just take it. That's not right and could be against copyright law. Ask. You'll probably get the image. In no time you'll have a slew to use on your page. One great place to start is freeimages.com where they have over 300,000 free images to choose from.
Activating An Image: Turning An Image Into a Link
Okay, this gets a little fancy. In Primer #4, I showed you how to create a hypertext link. What it did was create blue words on your page so someone could click on them and then jump to another site. Well, here we're going to set it up so an image becomes clickable or 'active.' The viewer would click on the image, instead of on the hyperlinked words, to make the hypertext link. I'll make a link to my home page using the image above. Here's the format:
Look at it again. See what happened? I placed an image tag where I would normally have placed words. However, in case the image isn't visible for any reason I've added some alternate text stating where the link goes.
Here's what you get with that format. Lay your pointer on the image, but don't click. You'll see the entire image is active:
Neat, huh? But what's with that new border around the image? That's what happens when you activate an image. It attempts to turn blue, or whatever color the page is set to, like the wording it's replacing, so it places what's known as a 'border' around the image. Some people like it. I don't, and I know how to get rid of it.
To make the border disappear, we need a tiny bit of inline CSS (Cascading Style Sheets). This used to be done using the Border attribute, but that's unfortunately no longer with us...
Here's the format:
See what I did? I added some CSS that denoted that there should be no border. You can go the other way too if you'd like. Make it 'border: 55px solid blue;' if you want. It'll just make a huge border. Note that the CSS is in quotes.
Here's what you get using the CSS:
Again, lay your pointer on the image without clicking. You'll see that it is active but doesn't carry that annoying blue border.
And that brings this to a close. The next lesson will deal almost exclusively with attributes you will use in order to manipulate your images. You'll truly impress your friends with this one.
IT Solutions Builder TOP IT RESOURCES TO MOVE YOUR BUSINESS FORWARD
- HTML Tutorial
- HTML References
- HTML Resources
- Selected Reading
Images are very important to beautify as well as to depict many complex concepts in simple way on your web page. This tutorial will take you through simple steps to use images in your web pages.
Insert Image
You can insert any image in your web page by using <img> tag. Following is the simple syntax to use this tag.
The <img> tag is an empty tag, which means that, it can contain only list of attributes and it has no closing tag.
Example
To try following example, let's keep our HTML file test.htm and image file test.png in the same directory −
This will produce the following result −
You can use PNG, JPEG or GIF image file based on your comfort but make sure you specify correct image file name in src attribute. Image name is always case sensitive.
The alt attribute is a mandatory attribute which specifies an alternate text for an image, if the image cannot be displayed.
Set Image Location
Usually we keep all the images in a separate directory. So let's keep HTML file test.htm in our home directory and create a subdirectory images inside the home directory where we will keep our image test.png.
Example
Assuming our image location is 'image/test.png', try the following example −
This will produce the following result −
Set Image Width/Height
See More On Stackoverflow
You can set image width and height based on your requirement using width and height attributes. You can specify width and height of the image in terms of either pixels or percentage of its actual size.
Example
Html Download Link For Image
This will produce the following result −
Set Image Border
By default, image will have a border around it, you can specify border thickness in terms of pixels using border attribute. A thickness of 0 means, no border around the picture.
Give More Feedback
Example
This will produce the following result −
Set Image Alignment
By default, image will align at the left side of the page, but you can use align attribute to set it in the center or right.
Example
This will produce the following result −
Free Web Graphics
For Free Web Graphics including patterns you can look into Free Web Graphics