Download presentation
Presentation is loading. Please wait.
1
Programming the Web using XHTML and JavaScript
Chapter 5 Images, Links, and Multimedia
2
Images
3
Displaying Images General Form <img src=“URL goes here” />
Example: <img src=“ />
4
Displaying Images <html> … Here is the Horsehead Nebula
<img src=… /> </html> Ch05-Ex-01
5
Displaying Images Absolute Path Relative Path
<img src “ /> Analogous to a complete house address: Tony Kombol 333G Woodward Hall 9201 University City Blvd. Charlotte, NC USA Relative Path <img src=“../pics/image_feature_73.jpg” /> Analogous to directions to get somewhere from “here” Start here Turn left at 1st stoplight Go 3 blocks Turn Right 3rd House on the left
6
Sidebar
7
Sidebar: Directories and Structure
. – current directory .. – previous directory (parent) / or \ Alone or starting: Depends on operating system Typically the root directory After a directory name: find the directory and go there With http / is usually safe
8
Displaying Images Alternate Text Example Ch05-Ex-02
Used if image is unavailable Used by sight limited persons Note: IE and Firefox render differently Example <img src=“./pics/image_73.jpg” /> <img src=“./pics/image_73.jpg” alt=“Horsehead Nebula” /> Note: the images referenced above will be found as following: . – start in the same directory as the base HTML page /pics - go into the pics directory Ch05-Ex-02 Note: view in I.E. and Firefox
9
Displaying Images Inline images
“In line” with the rest of text like any other character …whole bunch of text <img …> and so forth… Image typically not be the same size as text characters on the rest of the line How to align text with image?
10
Displaying Images Deprecated align attribute in img tag
<img src=“…” align=“top”>
11
Displaying Images <vertical-align> property of the img element
Values: bottom, middle, top baseline, sub, super, text-top, text-bottom <percentage> <style …> img {vertical-align:middle} </style> Ch 5-Ex-03 Note: view differences between IE and FF
12
Resume 7/13
13
Displaying Images Problem when text is more than just a few words:
Ch 5-Ex-04 Note effect of not using the <style…>: Ch05-Ex-04a.html Not aligned Photo not resized
14
Displaying Images Wrapping text around image float style property
Image “floats” down to next open line Text flows around one side or the other left or right values for the float property Ch 5-Ex-05
15
Displaying Images Centering (without flowing text) Ch 5-Ex-06
Place in a paragraph Center the paragraph Ch 5-Ex-06
16
Displaying Images Sizing height and width attributes in img element
Units are pixels <img … height=“50” width=“50” … > Maintain aspect ratio! If you use only one the other attribute will automatically scale Ch 5-Ex-06a
17
Links
18
Creating Links External Downloads and displays a new Web page
Implemented by an anchor tag with a hypertext reference: <a href=“…”>some text the user sees</a>
19
Creating Links Pathnames Absolute Relative Defaults
Relative Attendance.htm highlights/index.html Defaults Apache: index.htm or index.html Microsoft IIS: default.htm
20
Creating Internal Links
Create the Location (where do we want to go) <a id=“some_label”> Establish the Link (where are we now) <a href=“#some_label”>Click here</a> Internal Link Simple Identifies an internal link
21
Creating Links Internal links Can use Why choose ID over NAME?
<a id=“some_label”> - or - <a name=“some_label”> Why choose ID over NAME? ID can be used in other tags NAME mainly valid in <a…> only Internal Link – Trickier One link to ID One link to nothing One line to an anchor <a> May work strange depending on browser
22
Creating Links Combined Form: url#id
23
Images as Links Same format as before:
<a href=“…”>some text</a> But text replaced by an img element: <a href=“…”><img src=“…” /></a> Ch05-Ex-07
24
Images as Links Image Maps Graphics with “hotspots” that act as links
Client-side and server-side Two-step process: Define hotspots Overlay graphic with hotspots
25
Images as Links <map id=“map_name”> </map>
<area shape=“rect” coords=“43, 70, 97, 120” href=“…” />
26
Images as Links Rectangle Circle Polygon shape = “rect”
coords=“xl, yu, xr, yl” Circle shape = “circle” coords=“xc, yc, r” Polygon shape= “poly” coords=“x1, y1, x2, y2, … xn, yn”
27
Images as Links <img src=“…” usemap=“#…”> Ch05-Ex-08
NOAA US Radar
28
Multimedia
29
Multimedia <embed src=“…” /> autostart=“false” height and width
align loop=“true” CH05-Ex-09
30
Assignment PTW Ch 5 See Assignments Web Page Grade based on:
Start with code from ptw4 Copy to a new file ptw05.htm Grade based on: Appearance Technical correctness of code
Similar presentations
