HTML and IMG SRC Code

Save

Even though HTML is in version 5 at the time of publication, the IMG SRC code has not changed much since version 1. You still link images with the "a href" tag, and you call to the picture instead of text with the "img src" tag. If you want to resize the picture, there is a place for that in the coding. If you want a border, there is room for that, too. But IMG SRC is still the basic image insertion tag.

The IMG SRC Tag

  • When you want to add an image to a web page, and you are editing it using HTML, you have to use the IMG SRC tag. It should look like the following: <img src="image.jpg" />

    This is the simplest image insertion code. Typically, it has a few more attributes added onto it, like dimensions, any sort of link, a hover-caption or alignment. You can also substitute a URL for the image name, if the image you would like to display is not actually stored in your file manager. In that case, your image code would be <img src="http://www.site.com/image.jpg" />

Adding Dimensions to the Image

  • To add dimensions to an image that might be too large to place in the website, all you do is add dimensions (in pixels) to the image tag: <img src="image.jpg" height=200 width=300 />

    Try to make sure the dimensions you give the image are proportional to the original. If you do not take care to keep proportion, your image will end up skewed and stretched.

Linking the Image

  • To add a link to an image, you have to add an <a href> tag. A linked image would be coded like this: <a href="link URL"> <img src="image.jpg" height=200 width=300 /> </a>

    The <a href> tag works for any hyperlink, so if you left out the IMG SRC code and typed some text where it appears in above, the text would be linked, not the image. It would look like this: <a href="link URL"> TEXT </a>

ALT Added to the IMG Tag

  • A common addition to the IMG SRC tage is alt, which stands for "alternative." In the code, it usually appears at the end of the list of attributes, like this: <img src="image.jpg" height=200 width=300 alt="image name" /> So if your image does not load, text will appear with the broken image icon, and the name of the image will appear. The advantage of doing this is that instead of just a broken image icon, site visitors will at least know the name of the image.

Promoted By Zergnet

Comments

Resources

Related Searches

Check It Out

Geek Vs Geek: Robot battles, hoverboard drag race, and more

M
Is DIY in your DNA? Become part of our maker community.
Submit Your Work!