Images and Links

Home Page     About HTML     Color     Lists     Tables     Layout

Images and Links     Images on Pages     Image Types     Images on Pages     Links

Images

PSD images will not show up in a browser

JPEG is not transparent

PNG gives transparency and it looks the way it should

GIF is similar to JPEG. No transparency, but you can make it show color gradient when you save it

Pixel = picture element
The higher number of pixels in a picture the higher the resolution and the nicer the picture will be.
In the picture element there are "three little lights" they can be on or off, they are red green and blue. How much each color is turned on is dependant on how much color you see in the picture. It is important to make the image a size and quality one that will load quickly. People will not wait around for people to load a picture so it is important to make sure that it loads so people will stay on the site

Width and Height attributes specify the size of the picture. It is important to resize images. Size is expressed in pixels. You should always include the image size. It helps the page load before the pictures load so that your reader can look at the text while the images load.
Example: width = "800" height = "600"

Inserting Images on Webpages

Images are not inserted into a web page. The image tag is a LINK to an image file that the browser will display.
To use an image as a background, include this in your body tage
< body background = "imagename.file_extension" >
To put an image on a page use the image tag shown below:
< img src = 'imagename.extension" >
This will ONLY work if the image is in the same folder as tha page.
If the image is not in the same folder as the page use this tag:
< img src = "foldername/filename.extension" >

Attributes for the image tag alt -stands for alternate text. It explains in words the content of the image. It is helpful for blind people whose computers read the page and people who browse the web without pictures.
example: alt="snow in dallas"

The Alignment atrribute lines up picutres. The alignment choices are top, middle, bottom, left, and right.
*hspace adds space around the left and right of the image
*vspace adds space around the top and bottom of the image
Examples:

Top Alignment Top Alignment Top Alignment Top Alignment Top Alignment Top Alignment Top Alignment Top Alignment Top Alignment Top Alignment Top Alignment Top Alignment Top Alignment Top Alignment Top Alignment Top Alignment Top Alignment Top Alignment Top Alignment Top Alignment Top Alignment Top Alignment Top Alignment

Middle Alignment Middle Alignment Middle Alignment Middle Alignment Middle Alignment Middle Alignment Middle Alignment Middle Alignment Middle Alignment Middle Alignment Middle Alignment Middle Alignment Middle Alignment Middle Alignment

Bottom Alignment Bottom Alignment Bottom Alignment Bottom Alignment Bottom Alignment Bottom Alignment Bottom Alignment Bottom Alignment Bottom Alignment Bottom Alignment Bottom Alignment Bottom Alignment Bottom Alignment Bottom Alignment

Right Alignment Right Alignment Right Alignment Right Alignment Right Alignment Right Alignment Right Alignment Right Alignment Right Alignment Right Alignment Right Alignment Right Alignment Right Alignment Right Alignment Right Alignment Right Alignment

Left Alignment Left Alignment Left Alignment Left Alignment Left Alignment Left Alignment Left Alignment Left Alignment Left Alignment Left Alignment Left Alignment Left Alignment Left Alignment Left Alignment Left Alignment Left Alignment

Image Types

Type 1: Raster Images

When you save a Raster image it maps out each pixel determining how much red green and blue there is in each tiny pixel. This creates a lot of information. They take more memory on your computer, so it is a good idea to compress them. Raster is all about pixel by pixel saving. If you try to resize a Raster image chances are it will show rough edges that you didn't see before, a circle will not longer have smooth edges, the image is pixelated. Raster works best on images where you need to know a lot about the pixels, to create a perfect picture, such as pictures of people etc. The most used image types for webpages are jpeg. gif. and png.
Use JPEG for photos and images with large or subtle color set. JPEG stands for Joint Photographic Experts Group
PNG is the most commonly used file type for images that need transparency. PNG stands for Portable Network Graphics
GIF are the smaller files becuase they have a reduced color set. GIF stands for Graphics Interchange Format. They can be good for logos where shading colors are not important. The Gif file type supports transparency. Many simple web animations are GIF.

Type 2: Vector Images

In Vector images the picture is rendered mathematically. It gives the computer (x, y) points for the where the image fits. This is easy to resize because it just changes up the math, to create an exactly equal smaller or larger image. Vector don't work for images of people or nature because it can't mathematically figure out everything. Vector works best for cartoons or computer generated images.

Links

Linking makes websites interactive just like the internet. A link can take you to a whole different website, open a resource or take you to a part of the page you are already on. The internet is known as hyper media and hyper is talking about linking.

The < a > link < /a > is a general tag for links.
The specific tag is < a href = "website" > linked text < /a >

Absolute Links

Gives a full and complete path to the webpage. Used when you refer to any website link.

Relative Links

In relative links you link to the location of the page. The folder is relative to the original location. This works well because no matter where you move the folder the link is not broken, as it would be if you used an absolute link. A relative link will link you to another pager within the site.
EX: < a href = "foldername/documenttitle" > linked text < /a >

Images

To link to a higher level folder "../filename"

Home Page

Logo

Anchor Links

Anchor Links link to another part of the same page. You need to provide a link, but also tag the place on the page that you want to go to. To label it you put < name= "Top(this will not show up on page)" > < h3 > Back to Top < h3 > < /a >
< a href = "#Top" > Back to Top < /a >
Ex: Back to Top

Mailto Links

A mailto link will autiomatically open an email with the links email. Here is how you set it up:
< a href= "mailto:theemailaddress" > Link < /a >
Blair S

Images as Links

Fun Links:

Adobe Kuler

Cute Animals

BABY TREES!

Images and Links Together!