...will produce this:
Some text
Some more text
An image is not actually included within a webpage's HTML code; it is merely linked to by the HTML, using an image tag. The actual location of the image must be included in the image tag.
Image files must be of the proper file format. The two most common formats for pictures are GIF (.gif) and JPEG (.jpg). Another format that is used online is PNG (.png).
This is how to display an image on a webpage:
<img src="filename">
filename is the name of an image, either on your computer, online in the same folder as your webpage, or somewhere else on the Internet. If you are simply linking to an image that resides on a website somewhere the Internet, you must give the full address to it, including "http://". For example:
If the image is in the same folder:Downloading an image and keeping it in the same folder as your webpage (like in the second example above) has both advantages and disadvantages. The upside is that you can you modify and rename the image. Also, you aren't "stealing" the bandwidth of the person from whom you got the image, since you're hosting it yourself. The downside to downloading your own copy of an image is that it uses up your hard drive space or webspace, and it might not load as fast if it's on your own site as it would if it were on someone else's. All in all, it is generally better to download an image and host it yourself if you want to link to it in your webpage.
You can place your image tag anywhere relative to the text on your page, and the browser will show them in their correct places. For example:
Some text <img src="pic1.jpg"> Some more textAs you can see in the above examples, text is, by default, aligned along the bottom of the picture. You can change this with the align attribute of the <img>. For example:
Some text <img align=middle src="pic1.jpg"> Some more text
...will produce this:
Some text Some more text
The possible values for the align attribute are top, middle, and bottom.
The align attribute also allows text to wrap around an image. With align=left or align=right, you can determine whether the image will be to the left or to the right of the wrapping text. So...
Some text <img align=left src="pic1.jpg"> Some more text
...would look like this:
Some text Some more text
...and...
Some text <img align=right src="pic1.jpg"> Some more text
...would look like this:
Some text Some more text
If you use align=left or align=right, it doesn't really matter whether the image is after the text, or between two pieces of text, or what. It will always be shown all the way to the left of right side of the page.
To manually resize an image on your webpage, use the width=x and height=x attributes in the <img> tag. This will not actually change the size of the image file; it will merely change how the image is displayed on your page. For example, if an image is 200x200 pixels, you can use height=100 width=100 in your <img> tag, to make the height and width display as half of what they should be. Just be sure to adjust both the height and width proportionally. In other words, if you display the 200x200 image using height=400 width=50, it will be vertically stretched and will not look right. Also be careful not to make these values too big. Displaying a 200x200 image with height=400 width=400 might cause the image to appear blurry.
By keying more pixels (or less) to change the width and height of the picture. Warning: YouThe <a> tag defines a hyperlink; everything between the <a> and </a> tags will be clickable as some kind of link. Normally, we just put text between the <a> tags, but you can use an image as well, like this:
<a target="_blank" href="http://www.getfirefox.com/"><img src="firefox.jpg"></a>
(The target="_blank" attribute makes the link open in a new browser window, instead of in the current window. This can be done with any hyperlink, not just images.)
To use an image instead of just a color for your webpage's background, use the background="filename" attribute of the <body> tag. If the image is smaller than the page, it will keep repeating in order to fill the entire page. For example, the background image used for this page is only a couple inches in height and width.
Be sure to respect copyright laws when taking images from others. The ideal thing is to ask someone before taking their image, but if that is not possible, then you should still refrain from using their image for public or commercial purposes without their consent.
Here are some sites that offer images which you can download and use. Be sure to abide by their Terms of Use policies. They are giving you tons of images, absolutely free, so try and be respectful of their rights in return.
www.barrysclipart.com