logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
Action Movies
Bible Basics
Houseplants
Romance Movies
Creativity
Family Travel
Southwest USA


dailyclick
All times in EST

Clairvoyance: 08:00 PM

Full Schedule
g
g HTML Site

BellaOnline's HTML Editor

g

HTML Fundamentals Displaying Images

Guest Author - Elizabeth Connick

Once you have your website text posted and formatted to your liking, it's time to spice up the page with a few images. Not only can images add color and life to your pages, you can also use them to generate text effects that would be difficult or impossible to do with regular text and formatting. For example, your font choices will typically be limited to the small number of fonts you can be sure are installed on visitors' computers, since if they don't have the font installed they can't see it on your site! Anytime you post text in an unavailable font, the visitors' computers will render it in whatever available font is closest in style, which can often wreck havoc on your website design.

On the other hand, if you use an image editing program to capture text in a fancy font and post it as a GIF or JPEG on your site, any visitor will see it precisely as you intended since it's now a picture of text rather than text itself. This can free you to use fanciful fonts in your headers and group them in unusual ways.

The basic tag used to display images is the following:

<img src = "/folder/filename">

The above code will work perfectly in HTML. If you are using XHTML or want to be sure that your site is XHTML-ready, you should add a slash to close the tag, since in XHTML you can't use open-ended tags:

<img src="/folder/filename" />

'Src' is short for source, and you will use it to specify the file path to your image in other words, to tell your browser where the image can be found on your site. If you keep your images in the same folder as your web pages, you don't need to list the folder in the 'src' text you can just type in the image filename.

Once you've specified your image source, you can enhance this basic framework with various optional attributes to get the most out of your images. One attribute you should nearly always use is the 'alt' attribute. This allows you to specify what text the browser should display if it's unable to show your image for some reason. The 'alt' text is prepared as follows:

<img src="/folder/filename" alt="Alternate Text Here" />

Another useful set of attributes is the 'width' and 'height' tags. These allow you to display images at a different size than the actual image size. You can use them to tweak your image so that it fits perfectly into your overall page design. However, it's generally preferable to change the actual image size using image editing programs and then post the image on line, for two reasons. First, the image editing software will almost always give you a better looking result than tweaking the size by hand. Second, changing the 'width' and 'height' tags does not change the actual image's file size, so if you have an enormous image that you display as a thumbnail, the image will take just as long to load and will chew up just as much bandwidth as if you had displayed it at full size.

When specifying an image's size you can list the height, the width or both. Sizes are specified by the pixel as you can see below:

<img src="/folder/filename" width="300px" height="150px" />

You can also 'align' your images to work them in smoothly with the flow of your text. If you choose left alignment, the text will start to the right of the image. If you choose right alignment, the image will display on the right side of the page, and your text will come up to the left side of the image and then break to a new line.

Image alignment is set as follows:

<img src="/folder/filename" align="right" alt="Alternate Text Here" />

You can also set the alignment to "top," "bottom," or "middle" to make the image line up with either the top or bottom of the text line. If you don't specify alignment the image will default to "bottom."

As a side note, you can include your image attributes (src, align, alt, etc.) in any order within the image tags. My personal preference is to list the 'src' attribute first, since that's the most basic attribute and must be included in every image tag, but you can use whatever sequence feels most natural to you.
This site needs an editor - click to learn more!

Add HTML+Fundamentals+%96+Displaying+Images to Twitter Add HTML+Fundamentals+%96+Displaying+Images to Facebook Add HTML+Fundamentals+%96+Displaying+Images to MySpace Add HTML+Fundamentals+%96+Displaying+Images to Del.icio.us Digg HTML+Fundamentals+%96+Displaying+Images Add HTML+Fundamentals+%96+Displaying+Images to Yahoo My Web Add HTML+Fundamentals+%96+Displaying+Images to Google Bookmarks Add HTML+Fundamentals+%96+Displaying+Images to Stumbleupon Add HTML+Fundamentals+%96+Displaying+Images to Reddit




RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map


For FREE email updates, subscribe to the HTML Newsletter


Past Issues


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2014 by Elizabeth Connick. All rights reserved.
This content was written by Elizabeth Connick. If you wish to use this content in any manner, you need written permission. Contact BellaOnline Administration for details.

g


g features
What's Coming in HTML 5

What is FTP?

HTML Fundamentals - Tables

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2014 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor