Cos 125 DAY 14. Agenda Assignment #3 Graded 7 A’s, 2 B’s, 1 C Problems are mostly caused by not...
-
date post
19-Dec-2015 -
Category
Documents
-
view
219 -
download
2
Transcript of Cos 125 DAY 14. Agenda Assignment #3 Graded 7 A’s, 2 B’s, 1 C Problems are mostly caused by not...
![Page 1: 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.](https://reader033.fdocuments.net/reader033/viewer/2022051415/56649d3f5503460f94a18bba/html5/thumbnails/1.jpg)
Cos 125
DAY 14
![Page 2: 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.](https://reader033.fdocuments.net/reader033/viewer/2022051415/56649d3f5503460f94a18bba/html5/thumbnails/2.jpg)
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
![Page 3: 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.](https://reader033.fdocuments.net/reader033/viewer/2022051415/56649d3f5503460f94a18bba/html5/thumbnails/3.jpg)
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/
![Page 4: 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.](https://reader033.fdocuments.net/reader033/viewer/2022051415/56649d3f5503460f94a18bba/html5/thumbnails/4.jpg)
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 …/>
![Page 5: 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.](https://reader033.fdocuments.net/reader033/viewer/2022051415/56649d3f5503460f94a18bba/html5/thumbnails/5.jpg)
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
![Page 6: 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.](https://reader033.fdocuments.net/reader033/viewer/2022051415/56649d3f5503460f94a18bba/html5/thumbnails/6.jpg)
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
![Page 7: 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.](https://reader033.fdocuments.net/reader033/viewer/2022051415/56649d3f5503460f94a18bba/html5/thumbnails/7.jpg)
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%”
![Page 8: 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.](https://reader033.fdocuments.net/reader033/viewer/2022051415/56649d3f5503460f94a18bba/html5/thumbnails/8.jpg)
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>
![Page 9: 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.](https://reader033.fdocuments.net/reader033/viewer/2022051415/56649d3f5503460f94a18bba/html5/thumbnails/9.jpg)
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
![Page 10: 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.](https://reader033.fdocuments.net/reader033/viewer/2022051415/56649d3f5503460f94a18bba/html5/thumbnails/10.jpg)
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
![Page 11: 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.](https://reader033.fdocuments.net/reader033/viewer/2022051415/56649d3f5503460f94a18bba/html5/thumbnails/11.jpg)
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” />
![Page 12: 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.](https://reader033.fdocuments.net/reader033/viewer/2022051415/56649d3f5503460f94a18bba/html5/thumbnails/12.jpg)
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
![Page 13: 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.](https://reader033.fdocuments.net/reader033/viewer/2022051415/56649d3f5503460f94a18bba/html5/thumbnails/13.jpg)
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”
![Page 14: 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.](https://reader033.fdocuments.net/reader033/viewer/2022051415/56649d3f5503460f94a18bba/html5/thumbnails/14.jpg)
Gee Whiz Tip of the Day
The W3C provides a free validation service for xHTML (and HTML) at http://validator.w3.org/
![Page 15: 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.](https://reader033.fdocuments.net/reader033/viewer/2022051415/56649d3f5503460f94a18bba/html5/thumbnails/15.jpg)
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