I  M  A  G  E  S and L  I  N  K  S
About HTML      Colors      Images and Links       Lists       Tables           Index Page      
Links             Image Types    Absolute Links     Anchor Links

Inserting Images on Webpages

Images are not inserted into webpages. 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:
<body background="imagename.file_extension">
To put an image onto a page, use the image tag:
<img src= "imagename.file_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.file_extension">

Attributes for the image tag

alt= "snow in Dallas"
Alt stands for alternate text. It explains words the content of the image. It is helpful for people are browsing the web with pictures turned off and blind people.
width and height
The width hand height attributes specify the size of the picture. This allows people to read text before the pictures load. Size is expressed in pixels. example:
width= "800" height= "600" (part of an image tag)
You can change the size of an image this way, but you should resize in Photoshop to enhance loading time (if making the picture smaller).
The alignment attribute lines up pictures. There are three alignment tags: top, middle, bottom, left right.
example: align="middle"
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



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


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


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




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

The hspace attribute adds space to the left and the right of the image. Space is designated in pixels.
hspace hspace hspace hspace hspace hspace

The vspace attribute adds space to the top and bottom of the image.
vspace vspace vspace vspace vspace vspace vspace vspace vspace vspace vspace vspace vspace vspace vspace vspace vspace vspace vspace vspace vspace vspace vspace vspace vspace vspace vspace vspace vspace vspace vspace vspace vspace vspace vspace vspace vspace vspace


Image Types

Raster Images

A pixel stands for a picture element. Pixel===>pixel element
Resolution is how many pixels are on the screen-how many pixels are horizontal and vertical.
In the picture element, there are three lights. RED, GREEN, and BLUE.
How much of each color is turned on will determine how much you see.
When you save a raster image (non-compressed), takes individual pixels and determines how much red, green, and blue is in each one.
Raster images take more memory on your computer. You should compress them. Raster images are ALL about pixel by pixel saving!
If you try to enlarge a raster image, you may get a pixelated image (an image with jagged edges). They do not resize well, because they become pixelated when made larger.
Examples of when to use raster images:
-Photographs
-Images with shadings and gradients

Raster File Types

 The most used image types for webpages are jpeg, gif, and png.
PSD images are images saved in photoshop format. They are workable images in photoshop (layers are maintained).
psd image that will not show
PSD images will not show up in a browser.

JGP stands for Joint Photographic Experts Group.
Use JPG for photos and images with a large or subtle color set.

The JPG didn't become transparent.

PNG stands for Portable Network Graphics.
PNG is the most common file type for images which need transparency.

PNG became transparent. It is the most similar to the original photoshop image.

GIF stands for Graphics Interchange Format.
GIF's are smaller files, because they have a reduced color set. They can be good for logos where shadings of colors are not important. The GIF file type supports transparency. Many simple web animations are GIF's.
The GIF looks similar to JPEG. No transparency (but this is a result of how I saved my image). You can see individual squares of color.

Vector Images

An image rendered mathematically. Everything for a vector image is known through equations and calculations (an x,y position, a width, and a height).
MATHEMATICAL Able to be resized because it has been mathematically calculated. If you double the size of the picture, it just doubles the heighth and width. They will still look good after resizing.
Examples of When to use vector images:
-Cartoons
-Logos (see below)

Image Sizes

You always want to resize an image. Image files that are too big will take forever to load on a webpage. And the image won't necessarily be any clearer.
But reducing the pixels too much will result in a blurry, pixelated image.
-For JPG images, medium quality will be sufficient.
-The advantage of GIF images is their low file size. They don't take very long to load on a page.

Links

 Linking is what makes webpages interactive. The internet is interactive. A link can take you to a different part of a page. It can take you to another page. It can open an email to someone. Internet is hyper media. Unlike books, the internet is non-linear. You skim until you find what you need or you jump to a new website.

The <a></a> is the tag for links.

The specific tag for a link to another webpage is:
<a href= "somepage.html" > linked text </a>

absolute links

 An absolute link gives the full and complete path to a webpage.
http://www.esdallas.org -->ABSOLUTE LINK
You're saying go to the ESD website and open this page.
Here are some absolute links:
Martha Stewart She is a GENIUS.
Cakespy Yumm delish!
Dallas Mavericks Gooo Mavericks!

relative links

A link to another page within this website or this same folder structure. In relative links you link to the location of the page. It is relative to other files. You do not give the absolute path. You give the path relative to where you are now.
Example:
Within same folder "filename.ext" (just put the file name itself)
About HTML
Link to a subfolder "foldername/filename.ext"
Logo
A higher level folder- "../filename.ext"
Index Page

anchor links

 Links used to link to another part of the same page. It will pop to the specific section of the page.
Anchor links require two things. Requires a link and where the link is supposed to go on the page. You tag that place on the page (the anchor).
To tag the anchor use this <a name="label">TEXT</a>
To link to the anchor use this <a href ="#label">Image Types</a>
Example:
Back to Top

mailto links

When you click a mailto link it opens an email to a person (specified email).
<a href="kerra2435@aol.com">Clickable Text</a>

images as links

Insert an image tag into the the tag.

Cookie Madness--Tasty baked goods!
Page Created By: Alice
February 4, 2010