Images and Links
Down to the Bottom
Down to Anchor links
Down to Types of Images

Images on the web

Inserting images on Web pages

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 tag:
background="imagename.jpg"
To put an image onto a page, use the image tag. < img src="imagename.jpg" >
This will only work if the image is in the same folder as the page. If the image is inside a folder that the page is in, this is the tag:
< img src="foldername/picturename.jpg">
< img src="pics/smiley.jpg" >

Attributes for the image tag

alt stands for alternate text-explains in words the content of the image.
example: alt="snow in Dallas" Blind people have screen readers, and need to know what the picture is by the text explaining the picture
People with slow computers sometimes turn their images off, and incase the picture is important, they need to know what it is. So you show an alternate text.

Width and height
The width and height attributes specify the size of the picture. If you tell the browser the size of the picture, it can start laying out the text before the picture is downloaded.
Example:
width="800" height="600"
You should always include the image size. It helps the browser lay out the page on the screen while images are loading. Choices for allignment are TOP, MIDDLE, BOTTOM, LEFT, and RIGHT.

Top alignment

Middle alignment

bottom alignment

Types of Images

Raster Images

PSD images will not show up in a browser

JPEG images will fade from opaque color to lighter opaque color (No transparency) Jpeg stands for Joint Photography experts group.
Use JPG for photos and images with a large or subtle color set.

PNG images will fade from opaque color to transparent color PNG stands for Portable Network Graphics
PNG is the most common file type for images which need transparency

GIF images will go from the color to completely transparent
GIF stands for Graphical Interchange Format GIF's are smaller files, because they have reduced color set. They can be good for logos where shadings of color are not important. The GIF file type suppports transparency. Many simple web animantions are GIF's The most used image types for web pages are jpeg, gif, and png
GIF stands for Graphical Interchange Format GIF's are smaller files, because they have reduced color set. They can be good for logos where shadings of color are not important. The GIF file type suppports transparency. Many simple web animantions are GIF's

Vector Images

Pixel- Picture element
More number of pixels= better resolution
Three pixel colors= red, green, blue
Raster images take more space
Each pixel holds an amount of red, green, and blue
If you try to englarge a raster image, you will get a jagged, pixelated image
Vector images use a mathematical equation
When you enlarge a vector image it doubles the height and width, so it will still look good
Vector images are not good for intricate picture because it can't calculate
cartoons, logos, and shapes are all good for vector

Image sizes

Links

Linking is what makes web pages interactive. Links take you to different pages, different websites, different parts of the page, and can open a different resource, ect... Internet is known as hypermedia, and is non linear.

Absolute Links

The <a>= linked
< a href="somewebpage.html"> Linked text
Absolute Link is a full complete path
Example: Stars players

Relative Links

A Relative link means you don't give a direct path.
It is good because no matter where you move your original folder, the link still works.
Example: Proj 1 holds my Index page, and if I move move my index page, It will still work. Examples:
ESPN
AVA
Youtube

Relative links are within the same folder.
you link to the sub folder with the extension.
example: pics/logo.png
Link to a higher folder: ../index.html

Images as Links

Anchor Links

Anchor links link to another part of the same page.
<a name="format"> text </a>
<h2> #Image format </h2> </a>
Back to the top

Mail to Links

You click the link and it goes to an email.

Images as links

Page created by Michael Collins
February 2010