- home |
- workshops |
- tutorials |
- e-portfolio |
- LIS
Module 1: HTML Basics
Adding an Image
To insert an image into your web page, simply use the following code:<img src="cabbage.gif"" alt="My Little Cabbage" />
This tag, short for “image source” will load the requested URL. This URL is a document-relative link. This means that the server will look for an image in the same folder as the page itself. If you have an images folder (which I highly recommend), your link will look like this:
<img src="images/cabbage.gif"
alt="My Little Cabbage" />
The uhUNIX server reads folders in the above manner; other servers may
need a backslash in front of the folder name:
<img src="/images/cabbage.gif"
alt="My Little Cabbage"/>
Don’t forget the alt! This enables people to read what your picture is about, instead of looking at it. This is useful if the user is blind and using a screen reader, which will read the alt text, or for a broken image link, or for a user with a slow connection who doesn’t load browser images.
<img src="images/cabbage.gif"
alt="My Little Cabbage" />
The <IMG> tag has the following associated attributes:
src= specifies the URL, or path to the image file
width= specifies the width of an image
height= specifies the height of an image
alt= specifies an alternative text label, or description, of your image
The src= attribute tells your browser where to find the image
file that you want to display on your web page.
The width and height attributes are not mandatory.
They simply help the browser download your page faster. These attributes are not
required, but if you want to ensure that your page renderes quickly in any web
browser, it might be a good idea to include them in the <IMG> tag.
To find the width and height of your image, simply load it into any image program. Loading it into a web browser will also show the width/height (across the top of the browser).
The alt= attribute provides users with screen readers or text
only browsers to identify whether an object on a page is an image or whether that
image conveys meaningful information to the user. This is the string of text that
pops-up when you roll your mouse over an image. Alt attributes are required if
you are building web accessible web pages and web sites.
Next: Lesson 1: Creating a Digital Pathfinder: Your first web page »
top of page