Images and Links on the Web

HTML Tags       Color       Images & Links       Lists       Tables      
Raster Images       Vector Images       Images on the Web       Links      

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.file_extension">

To put an image onto a page, use the image tag.
< img src= "imagename.extension">

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.extension" >

Raster Images

-Pixel- Picture element
-The more number of pixels the nicer the resolution, and the nicer the picture will look.
-There are red, green, and blue lights involved in pixels, they determine how much color you see.
-Raster images maps out how much red, blue and green is in each pixel on the screen
-Raster images are all about pixel by pixel saving, and each pixel holds an amount of red, green, and blue and how the picture appears is how its interpretted by the computer
-If you try and enlarge a Rascalated image you may get a picture with jagged edges
-Pictures are perfect for Raster

Vector Images

-Vector images are drawn on the screen mathematically
-Locations are known by giving (x,y) coordinates
-You can resize them and they will always still look good -photographs in nature dont look good with Vector images, because they cant be calculated mathematically
-Cartoons and logos are perfect for Vector
-Shadings and variations are harder to do on Vector than on Raster
-Most browsers dont support vector images

Attributes for the Image Tag

-alt: explains in words the content of the image
example: alt= "snow in Dallas"
-alt stands for alternate text
-It explains in words the content of the image
-It is helpful for people who are blind and have screen readers
-The width and height attributes specify the size of the picture
-Size is expressed in pixels
example: width= "80" height= "60" -pixel stands for picture element
-the choices you have for alignment are top, middle and bottom
-you can also have alignment choices when it comes to left and right
-middle, top, and bottom all make one line of text next to the picture
-left and right alignment moves the picture left or right and text flows around them

Middle Alignment

Top Alignment

Bottom Alignment

Left Alignment



Right Alignment




File Size

-File size and quality are both very important when dealing with images
-They determine the clarity of the image you are viewing

Images on the Web

-JPG or JPEG stands for Joint Photographic Experts group
-Use JPG for photos and images with alarge or subtle color set
-PNG stands for Portable Network Graphics
-PNG is the most common file type for images which need transparency
-GIF stands for Graphic Interchange Format
-GIF's are smaller files, because they have a reduced color set. they can be good for logos where shadings of color are not important. The GIF file type supports transparency. Many simple web animations are GIFs
JPG

GIF

PNG

Links

-linking is what makes web pages interactive
-links take you to a different part of the page your on
-links can take you to a different webpage
-known as hypermedia
-It is non linear
-<a> is the link tag
-<a href="somepage.html "> is the linked text to a webpage

Absolute Links

-gives the full and complete path to the webpage
-you will use this when referring to any webpage that you go to
-Here are three absolute links to webpages i think are interesting:
Apple
Yahoo
Wikipedia

Relative Links

-It doesnt give the direct path it gives you a link from where you are then
-A link to my homepage would be a relative link:
My Homepage
-A link to my Html page would also be a relative link:
HTML Tags
-Here is an example of a picture link:
Puppy

Anchor Links

-used when u want to link to a different part of the same page
-requires two things:
    1. a label
    2. you have to tag the place where you want to be linked to
    you have to put an "anchor" on the page
-<a name-format> </a>
-once you have labled it, you can use it to make a link
-<a href= "imageformat">
-when you are referring to a label and not a file you use the number sign "#"

Mailto Links

-a link that opens up an email
<"mailto:emailgoeshere"> </a>

Images as Links

-you can link a website to a picture


Back to Top


Ellie
1/26/10