Images & Lists :Class notes

More Chapter 5 stuff

Adding images to your web site.

Types of image formats

1. GIF - Graphics Interchange Format (.gif) Transparent background possible. Animated GIFs
2. JPEG or JPG - Joint Photographics Experts Group (.jpg or .jpeg) Better photographic quality color than GIF
3. PNG - Portable Network Graphics (.png) New, supported by most but not all NEWER browsers. Still developing.
4. SVG- Scalable Vector Graphic (.svg)  Released 2001 mathematically based, xml complient.
5. PDF - Portable Data Format (.pdf) Cannot be read by current browser.
6. TIFF -Tagged Image File Format commonly used across platforms (.tif on MS .tiff on Apple & Unix)
7. BMP - Bit-Mapped Picture (.bmp) Standard Windows image format.
    

So, what format is the best?  

Image file sizes and download time .

Suppose you had a 600 pixel x 300 pixel image or 180,000 pixels. If we used a file format with 8 bits per pixel, we would have to download a

1,440,000 bit file. Point is, the more images the slower the download time!

Image tag

<img> </img>  OR use

<img/>

Important attributes

• src - source attribute - needed to identify the file name (including extension) and path to image.
• alt - alternative text - used to identify what image will be displayed if image is not displayed. Also, identifies the image when mouse rests over image.

<img src="sensq.jpg" alt="picture of SENSQ"/>

Sizing the image.

height and width attributes

picture distortion

Pixels vs Percentage

Alignments - There are several different vertical and horizontal alignments available for images. Please see pages 150-152 in your book.

Borders are also available using the "border" attrbutes.

Using images in the internet???

Images as links

You can use images as links much the same way you use text!

<a href="http://www.cs.pitt.edu"> <img src="sensq.jpg" alt="CS building link" height="150"/></a>

NOW FOR SOME CHAPTER 4 stuff.

How do I love my CS134 class......Let me count the ways!

1. Its as exciting as an Olympic gold medal moment.
2. Its as educational as a PBS documentary.
3. Its the best value in education at Pitt

But you know, I have some points that would make it just a little better!

• Give everyone an "A" if the football team goes undefeated this year!
• Cancel any class the falls on a nice weather day in Pittsburgh.
• Increase the homework load significantly to ensure that no student "gets cheated out of a good quality education!"
   

Yes, you guessed it. LISTS!!

There are Three basic list types

1. Ordered list
2. Unordered list
3. Definition list

Ordered list

Yes, new tags.

<ol> </ol> to declare the list

<li> </li> to define the list items

example - this will provide a numerical list (list can also be Alpha). However, both list are increasing.

<ol>

      <li> list item #1 </li>

      <li> list item #2 </li>

      <li> list item #2 </li>

</ol>

<ul> </ul> to declare the list

<li> </li> to define the list items

example - this will provide a bulleted list.

<ul>

      <li> list item #1 </li>

      <li> list item #2 </li>

      <li> list item #2 </li>

</ul>

These list can be nested so PLEASE make use of an indenting style when coding!!