Images and Links on the Web
About html Color Images and Links Lists Tables My Horses Index
Inserting Images on Web Pages Raster Images Vector Images Links Bottom of Page
Inserting Images on Web Pages
Images are not inserted into a webpage.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 you body tag:
<body background="imagefilename.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 in the folder that the page is in, use the tag: <img src="foldername/picturename.jpg">
Attributes for Image Tags
alt- explains in words the content of the image.Example: alt= "snow in Dallas"
This is important especially if a picture is a link--it allows people who can't see the pictures to know what is there. Useful for blind people and when internet connections are slow so the user turned images off.
Width and Height attributes specify the size of the picture. These are useful for small adjustments, but if you need to make a big size adjustments, just resize it in PhotoShop. Size is expressed in pixels, which stands for picture element.
Example: width ="800" height= "600" --that is all inside of the image tag.
The alignment tag, align="middle", lines up pictures; choices are top, middle, bottom, left, and right.
hspace- horizontal space added to the right and left of the image.
vspace-vertical space added to the top and bottom of the image.
Ex. <img src= "pics/image.jpg" align=top> --top alignment
Ex. < img src= "pics/image.jpg" hspace="50"> --horizontal space
Image Types
Raster Images
-Pixel stands for a picture element.-Resolution expresses how many pixels there are in the screen.
-The more pixels, the better the image quality.
-Three lights: red, green, and blue. As they change, the color you see is altered.
-Raster Images maps out how much red, blud, and green is in each pixel on the screen.
-Raster images take up more memory on your computer.
**Raster images are ALL about pixel by pixel saving**
-A pixilated image- a Raster image that has been resized (larger) and now the pixels look jagged and rough.
-The most used image types for the web are .jpg, .gif, and .png
JPG stands for Joint Photographic Experts Group.
Use JPG for images with a large 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 Graphics Interchange Format.
GIFs are smaller files because they have a reduced color set. They can be useful for logos where shadings of the colors are not important. GIFs can do transparency. Mnay simple web animations are GIFs.
-.PSD
.psd images will not show up on the web, so it won't work at all.
-.JPG
This one is not transparent, and it is a little blurrier than the others. You can also see the color gradation a little.
-.PNG
This is my favorite. It fades nicely to transparent, the letters are clear, and the color fades smoothly.
-.GIF
You can really see the color gradation in the image; it just fades in blocks of color. It also is not transparent, but the letters are clearer than the .jpg.
Vector Images
-Vector images are drawn on the screen mathematically.-Location is known by giving an (x,y) position on the screen.
-Vector images do resize easily, because the computer recalculates where the image is, rather than becoming pixilated.
File Size
SIZE and QUALITY matter.The higher quality of the image, the larger the file will be, so there has to be a balance.
The larger the file size, the longer it will take to load.
No one wants to wait and wait for a page to load, but also it needs to be a quality image.
More...
-Photographic and natural images are better as Raster images. That allows all colors to be expressed and seen in the clearest fashion possible-Cartoons or logos are usually better as Vector images. Because shading and keeping natural color and look are not as important, Vector images work better.
Links
Linking is what makes web pages interactive. A link can take you to another part of the same web page, a different page, a whole new website, or it can open an application. Internet is known as hypermedia. It is also non-linear, unlike a book. <a> and </a> are the link tags. <a href= "somepage.html"> links to a web page; it also ends with </a>Absolute Links
An absolute link gives the full and complete path to the web page. This is useful when refering to a visited web page. It tells exactly what website to go to, so if a page is moved into a new folder, the link won't work anymore--the link is broken. These links are absolute links: MLIA Olympics 2010Relative Links
A relative link doesn't show the whole path, you give the path to the folder from where ever you already are. If the page is moved, the link can still work. No matter where the folder is, the link will still work as long as they are in the same vicinity. These links can break, but not as easily as absolute links. Within the same folder, the link would be "aboutHTML.ext" (.ext= extention--it tells the computer what type of file it is), if you link to a sub-folder, it would be "foldername/filename.ext" A link to a higher level folder will be "../index.ext" These are relative links: Index About HTML LogoAnchor Links
An anchor link goes to a different part of the same page. They are often at the top of the page, and they link to somewhere farther down on the page. An anchor link requires a link and a tag for the place that you want it to go. This is an anchor link: Top of PageMailTo Links
A MailTo link is a link that you click on that opens an email to a specific address. This is a MailTo link: EmailImages as Links
Instead of typing text after the link tag, just put an image tag there. This is an image link:
Maria 3/9/10