Cos 125

DAY 14

Agenda Assignment #3 Graded

7 A’s, 2 B’s, 1 C Problems are mostly caused by not following the instructions

Assignment 4 Posted Due March 25

Left to do 6 Assignments (9 total)

One per week 2 Quizzes Capstone projects

Second Capstone Progress Report Due April 4 Exam #3 will be on March 25

Castro Chaps 1-7 There will no class on March 28 Lecture/discuss Using Images

http://perleybrook.umfk.maine.edu/classes/cos125/HTML6ed_examples/localindex.html#c5

More PSP tricks

http://www.mardiweb.com/web/psp5/ http://psptips.com/6/ http://www.pinoy7.com/ http://www.pixel2life.com/tutorials/

paint_shop_pro/animation/ http://arizonakate.com/

Inserting a Image Determine after what element in your WebPage you want the

Image to appear Place cursor in your code after the element Type <img src=“image.url”/> “image.url” is location of the file

http://www.server.com/images/image.gif ../images/image.gif images/image.gif image.gif

Hint To place image on a new line use <br/> before <img …/>

Offering Alternative Text

If the image won’t appear, the “alternative text” will <img src=“cat.gif” alt=“Picture of a cat”/> alt is REQUIRED for XHTML Can also use title attribute On some browsers “Alt” text will be a mouse over

pop-up Examples

http://perleybrook.umfk.maine.edu/samples/UsingImages.htm

Specify Size of Image

Tell the Browser how large the picture is to speed up loading

<img src=“image.gif” alt=“a picture” height=“100” width=“100” />

Quick Way Insert image in webpage without dimensions View page and right mouse on image Select properties and determine dimensions Modify img tag with the dimensions

Scaling an Image

Use new values for height and width attributes

CAREFUL –you must maintain aspect ratios or you will distort image Just set height or width and Browser will

automatically set the other Can also set to percentage of Browser

viewable space height =“ 50%” width = “50%”

Thumbnails

A thumbnail is a “mini” version of a larger image

<a href=“large.jpg”><image src=“mini.jpg” alt=“A thumbnail” height = “50” /></a>

Making Images “float”

You can float images in the text You can move image to the left or to the right

relative to text <img src=“image.gif” align=“right”> Use <p></p> after img tag to get text to “fill”

left over space Example

http://perleybrook.umfk.maine.edu/samples/textfloat.htm

Stopping Elements from Wrapping Image

You can control how text & other elements “flows” around your images

<br clear=“left”/> (or right) Next element goes to first available margin on left

<br clear=“all”/> Next element goes to first available spot where

both margins are clear

Adding Space around Image

Create a buffer around your image <img src=“image.gif” alt=“a picture”

height=“100” width=“100” hspace=“20” vspace=“20” />

Aligning images NOTE: Not all directions work in all browsers Used to align images with text <img src=“image.gif” align=“direction”> Where direction is

TEXTTOP Top of image to top of text

TOP Top of image to top of tallest element

MIDDLE Middle of image with base of text

ABSMIDDLE Middle of image to middle of tallest element

BOTTOM Bottom of image to baseline of text

ABSBOTTOM Bottom of image to bottom of tallest element

Adding Horizontal Rules

A horizontal rule is a line across the Web page <hr/>

size=“10” (how thick) Width=“70%” Align=“left” or “right” or “center” noshade=“noshade”

Gee Whiz Tip of the Day

The W3C provides a free validation service for xHTML (and HTML) at http://validator.w3.org/

Assignment #4

Assignment posted to WebCT Examples are on

http://perleybrook.umfk.maine.edu/samples/ http://perleybrook.umfk.maine.edu/classes/cos12

5/HTML6ed_examples/localindex.html#c5

Due Monday, March 25 You may begin assignment in class

In fact I suggest you do