Formatting Images in HTML
This tutorial will quickly teach you the basics of managing images in HTML without CSS beginning with inserting images on a page. Be sure to try these techniques yourself to understand more fully how they work.
To insert an image on a page first place the cursor where you want the image to appear and type <img src=”image.url” where image.url indicates the location of the image file on your website server. If your website is offline replace image.url with the location of the image on your computer. Close the tag with />
With some slow connections and handheld devices may come across some images may not appear and or will appear with a red x or other symbol in the top left corner like so.
Some developers may want to offer an alternate text to display when images don’t appear. To do this type alt= within the image tag following the “image.url” like so.
<img src="alphaorganiclogo.jpg" alt="alpha organic logo" />
Now that your image is in place you will likely want to scale it to fit your page more properly. To scale an image insert your image tag <img src=”image.url” then type width=”x” height=”y” where x and y are the desired width and height of your image in pixels. Close the tag with />
You can use the align attribute within the image tags to make images float. To do this type align=”left” or align=”right” within the image tag like so.
<img src="alphaorganiclogo.jpg" alt="alpha organic logo" align="left" />
You can also use the align attribute for images in the middle of a large body of text and choose the direction top, middle, bottom to make the image appear differently within the body of text.
When making an image float you effect all the elements that follow it unless you insert a special line break. The clear attribute inserted into the common br tag indicated that all elements should begin after clearing the image(s). To to this type <br clear=”left” /> or <br clear=”right” /> to stop content from wrapping around the image on wither the left or right margin. You can also type <br clear=”all” /> to stop content from wrapping on both the left and right margins.
If you decide not to stop elements from wrapping around an image the content that is wrapping around the image will appear very close to the image. This does not look nice so you will probably want to add space between the wrapping elements. To do this type <img src=”image.url” and follow it with hspace=”x” to add pixel space on the left and right side of the image and vspace=”x” to add pixel space on the top and bottom of the image where x is the pixel amount. Close tag with />
Most browsers support associating small image with your website url in the address bar. To include these icons on your page in the head tag type <link rel=”icon” href=”favicon.ico” type=”image/x-icon”/> where favicon.ico is the location of your image on your server. For compatibility with Internet Explorer type this below the first icon tag <link rel=”shortcut icon” href=”favicon.ico” type=”image/x-icon”/>
That concludes this tutorial. Click Links in HTML (coming soon) for next tutorial or click Here for a list of all HTML tutorials.
[...] concludes this tutorial. Click Images in HTML for next tutorial or click Here for a list of all HTML tutorials. ▶ View 2 Comments /* [...]
Basic HTML Formatting: « AO Tutorial & Review Blog
July 2, 2009
[...] Formatting Images in HTML for previous tutorial. ▶ Comment /* 0) { jQuery('#comments').show('', change_location()); [...]
Creating Links in HTML « AO Tutorial & Review Blog
July 15, 2009