Programming the Web using XHTML and JavaScript Chapter 5 Images, Links, and Multimedia
Images
Displaying Images General Form <img src=“URL goes here” /> Example: <img src=“http://www.nasa.gov/multimedia/imagegallery/image_feature_73.jpg” />
Displaying Images <html> … Here is the Horsehead Nebula <img src=… /> </html> Ch05-Ex-01
Displaying Images Absolute Path Relative Path <img src “http://www.nasa.gov/multimedia/imagegallery/image_feature_73.jpg” /> Analogous to a complete house address: Tony Kombol 333G Woodward Hall 9201 University City Blvd. Charlotte, NC 28223 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
Sidebar
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
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
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?
Displaying Images Deprecated align attribute in img tag <img src=“…” align=“top”>
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
Resume 7/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
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
Displaying Images Centering (without flowing text) Ch 5-Ex-06 Place in a paragraph Center the paragraph Ch 5-Ex-06
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
Links
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>
Creating Links Pathnames Absolute Relative Defaults http://www.nasa.gov/multimedia/highlights/index.html www.google.com Relative Attendance.htm highlights/index.html Defaults Apache: index.htm or index.html Microsoft IIS: default.htm
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
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
Creating Links Combined Form: url#id http://webpages.uncc.edu/~tkombol#resources
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
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
Images as Links <map id=“map_name”> </map> <area shape=“rect” coords=“43, 70, 97, 120” href=“…” />
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”
Images as Links <img src=“…” usemap=“#…”> Ch05-Ex-08 NOAA US Radar
Multimedia
Multimedia <embed src=“…” /> autostart=“false” height and width align loop=“true” CH05-Ex-09
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