Lecture Summaries class 6
Prepared by: Anthony Larrain
These notes serve as an outline to the lecture, they are not intended to be complete. Attend class to get more details.
Putting Images on Your Web Page
- Your web pages can display digital images.
- An image is a collection of pixels organized into rows and columns. Recall a pixel is the basic unit of the composition of an image on a computer screen.
- These numbers are stored in a file on your computer.
- There are many file types used to store an image. The two most common file types for the web are:
- JPEG (pronounced "jay peg") which stands for, Joint Photographic Experts Group, are files that end in .jpg
- butterfly.jpg
- tree.jpg
- GIF (pronounced "giff") which stands for, Graphic Interchange Format, are files that end in .gif
- tweety.gif
- sylvester.gif
- To display an image we use the HTML
imgtag. - The
imagetag has another attribute calledalt. The alt attribute is used to provide text in place of the image, if the image does not load.
Think of it like this, an image is made up of many many dots. Each dot is called a pixel. Each pixel represents the smallest portion of the image in a particular color, or shade of gray. Since these pixels are so close together we see an image.
In computer graphics each color is made up by varying the intensity of the colors red, green and blue. So computer color is a composition of red, green and blue. When an image is digitized, these pixels are given numeric values. These numeric values describe the amount of red, green and blue in the pixel.
Examples:
Examples:
Suppose I have a JPEG image file called tree.jpg in the same directory as my HTML file. To display an image I would put the following into the HTML document.
Notice the image tag img has an attribute named src which stands for source. That is, the location
of the image. Since I did not specify an absolute URL, the browser will start its search for the image file in the current directory.
(Remember an absolute URL looks like http:// etc ...)
This is what you would see.
Photo taken from Free Photos
The resolution of an image is the number of pixels that make up the image OR the number of pixels per inch(ppi).
The dimensions of an image are the width and height of the image. That is the number of pixels per row and the number of pixels per column.
The dimensions of the tree image is: 200 by 133
When using the img tag we should also use the dimension attributes to help out the browser.
