CSE 102 Introduction to Web Design and Programming XHTML: Images & Character Encoding
Practice file for today <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>My Practice Web Page</title> </head> <body> </body> </html>
Images To display an image alone in a browser you may use the a tag. Add to your practice page: <p><a href=" http://www.du.edu/~jcalvert/hist/wh9j.jpg"> William Henry Harrison</a></p> To display an inline image within a page, use img: <img src="URL" width="…"height="…" alt="… "longdesc="…"> URL points to a GIF, JPEG, or PNG img may be placed in any block-level or inline element except pre You should always include alt (including hw1) Add to your practice page: <img src="http://www.du.edu/~jcalvert/hist/wh9j.jpg"width= "250" height= "300" alt="An elongated William Henry Harrison" > Change the code such that when one clicks on the picture, the browser goes to: http://www.whitehouse.gov/history/presidents/wh9.html This is called a graphical link
Organizing your own site images Place all images inside an images directory Be sure to do this for all assignments Inside your Web pages, you may then reference the images using src="images/…" When you upload your Web pages, upload your entire images directory Save the following file to an images directory and correct the URLs accordingly http://www.du.edu/~jcalvert/hist/wh9j.jpg
Text around images You may wrap text around an image Float the image to the left or right margin Use style="float:right" Add appropriate spacing between the image and text Use style="margin-left:1em" Place the image right before whatever text you wish it to be even with.
Add the following to your practice page: <p><img src="http://www.du.edu/~jcalvert/hist/wh9j.jpg" alt="An elongated William Henry Harrison" style="float:right; margin-left:1em"> <a href="http://www.du.edu/~jcalvert/hist/wh9j.jpg">William Henry Harrison</a></p> <p>"Give him a barrel of hard cider and settle a pension of two thousand a year on him, and my word for it," a Democratic newspaper foolishly gibed, "he will sit ... by the side of a 'sea coal' fire, and study moral philosophy. " The Whigs, seizing on this political misstep, in 1840 presented their candidate William Henry Harrison as a simple frontier Indian fighter, living in a log cabin and drinking cider, in sharp contrast to an aristocratic champagne-sipping Van Buren.</p> <p>Harrison was in fact a scion of the Virginia planter aristocracy. He was born at Berkeley in 1773. He studied classics and history at Hampden-Sydney College, then began the study of medicine in Richmond.</p> Try moving the image to a new place inside a paragraph, see what happens
Additional Ways to align images Use style="vertical-align:value" Possible values: baseline – aligns baselines of image & text middle – aligns middle of image with middle character in preceding text text-top – aligns top of image with font top of preceding text xx% - raises the bottom of image xx percent of the text line height
Image Maps An image map is an image with active areas when clicked, these areas lead to designated URLs Use map tag, then specify areas using area tags Areas can be specified as rect, poly, circle, or default Specify using shape & coords attributes 0, 0 is top-left coordinate Specify link using href attribute Not placed in body, instead, put it inside head element Assign a name (ex: image_map_name) to your image map Then, inside the body, specify an image and usemap="#image_map_name" attribute
Add the following to your practice page: <head> <map name="usa_map"> <area shape="rect" coords="0,0,290,182" href="http://zapatopi.net/treeoctopus.html" alt="Northwest USA" /> <area shape="poly" coords="290, 182, 580, 0, 580, 182" href="http://www.geography.ccsu.edu/harmonj/atlas/atlasf.html" alt="Northeast USA" /> <area shape="circle" coords="435,273,91" href="http://2bnthewild.com/" alt="Southeastern USA" /> </map> </head> <body> <img src="images/usa-map-on-blue.gif" usemap="#usa_map" /> … http://www.cs.sunysb.edu/~cse102/images/usa-map-on-blue.gif
Character Encoding ASCII character set has only 128 different character symbols Each character is assigned a number (0 – 127) Not enough for foreign languages, math symbols, etc … Unicode character set has many more Characters for most languages UTF-8 contains ASCII and then has many more (over 65,000) Specify document uses Unicode with: <?xml version="1.0" encoding="UTF-8" ?> You should always specify that your documents use Unicode, whether they really do or not you may add Unicode characters later
Special Symbols Unicode characters may be placed into a document by referencing the Unicode number decimal &#num; or hex &#numb; http://www.Unicode.org/charts/ is in hex Add to your practice file: <p style="font-size:40pt">☯ ☯ </p> HTML & XHTML have provided special shortcut names for many characters http://www.natural-innovations.com/wa/doc-charset.html <p style="font-size:40pt">Ω Ω</p>
QUIZ #1 -- Upload Upload your practice page and your images directory such that the images appear properly You must use relative reference for all local images