Embed Size (px)
Citation preview
COS 125
DAY 15
Agenda• Assignment 4 Posted
– Due March 25• Assignment 5 posted
– Due April 1 (no joke!)
• Left to do– 5 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– One Hour, 20 M/C and 4 short essay– Available from 1PM to 6PM
• There will no class on March 28• Lecture/discuss Using Links
– http://perleybrook.umfk.maine.edu/classes/cos125/HTML6ed_examples/localindex.html#c6
– http://perleybrook.umfk.maine.edu/samples/links.htm
WYSIWYG vs. TEXT
• XHTML is a formatting language and is not well suited for WYSIWYG development.
• XHTML programs best as text
XHTML Review
• Basic Format and Structure– Document Format– Block level – Inline
• Creating and Using Images– Img tags
• <img src=“” alt=“” />
• Links• Two types of tags
– Single sided• < tag />• <br /> <hr /> <img src=“” alt=“” />
– Double sided• < tag> modified content </tag>• Can be nested
– <tag1><tag2> Content </tag2></tag1>
Template for Transitional XHTML
Should be for every page
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>A title</title>
</head>
<body>
</body></html>
Creating Images
Creating Animations
Adding Images in Dreamweaver
Problem
Links
• 3 parts– Destination
• Where to go• URLs, Anchors, Files
– Label• The part the user sees• Can be text or an image or both
– Target• Where the destination will be displayed• In same browser window, a new browser window or a certain browser
window
Creating a link to another webpage
• Destination– <a href=“somepage.url >
• Value for href MUST be in “quotes”
• Label– Label text
• End of link </a>
<a href=“somepage.url’”> label text</a>
Creating a Web Link
• Use relative URLS if the destination is on the same server (see Chap 1)– “/bios/tonyg.htm”
• Use absolute URLs if the destination is on a different server (see Chap 1)– “http://www.somewhere.com/page.htm”
• DO NOT use “click here” as a label– Tacky!!
• Label CANNOT contain block-level elements
Creating Anchors
• An anchor is a labeled place on a Web Page that can be a destination for a Link
• <a name=“daName”>text or image</a>• Any element can be a anchor using the “id”
attribute– <h1 id=“daName”>A header</h1>
• Name and id value MUST be in “quotes”• For long documents create anchors for top,
bottom and important sections
Linking to a Specific Anchor
• Link to “daName” on same page– <a href=“#daName”>Go to daName</a>
• Link to “daName” on another page– <a href=“page.url#daName”>Go to
daName</a>
Target Links to a Specific Browser Windows
• You can have the destination appear in a new Browser window so that you may view both the source and destination pages
• Same Window (default)– <a href=“some.url” target=“_self”>label</a>
• New window– <a href=“some.url” target=“_blank”>label</a>
• Existing Windows– <a href=“some.url” target=“daWindow”>label<.a>– If the named window isn’t open it will be created
Setting a default Target
• By default a link opens in the same window that contains the link
• To change default– In head section– <base target=“daWindow” />
• If you set a target in a link it will override default
More links
• Links can be created to many things– FTP
• href=“ftp://perleybrook.umfk.maine.edu”
– E-mail• href=“mailto:[email protected]”
– Telnet• href=“telnet://allagash.umfk.maine.edu”
– Files• href=“url/file.ext”• If the browser does have a plug-in for the file it will
attempt to download the file
Keyboard shortcuts for Links
• Keyboard shortcuts or Hotkeys– Ctrl-C for copy– Ctrl-V for paste
• For a link– <a href=“some.url” accesskey=“t”>label</a>– In IE type alt-t– In Netscape ctrl-t
• Make sure you don’t override an existing hotkey
Setting Tab Order
• In many application you can use the tab key to move around from section to section
• To change how the TAB key works on your web page set a tabindex=“n” attribute– <a href=“some.url” tabindex=“10”>label</a>– N can be 1 to 32767– Smaller N’s will be TAB’ed to first– Negative N’s will be skipped
Using an Image to Label a Link
• Simply replace the label text with an image• <a href=“some.url”><img src=“image.gif”
alt=“aPicture”/></a>• Border
– Most browsers will create a blue border around an image that is a link
– You can add a border to any image• <img src=“image.gif” alt=-”aPicture” border=“10” />
Image Maps
• An Image map is an image with regions that link to different destinations
• Two types– Client Side Image Maps
• Faster• Most common• Users can see the HTML that creates the map and the
possible destinations– Server Side Image Maps
• Require a special program running on the server• Hides the destinations from “View Source”
Creating an Image Map
• First divide the image into regions – Circles
• Center and radius
– Rectangles• Top Left X and Y and Bottom right X and Y
– Polygons• X and Y for each vertex of the Polygon
Finding regions
Creating a Client Side Image Map
• Divide your images into a regions• Create a “map” of the regions
– <map name=“daMap” id=”daMAP”>– Add regions & destinations
• <area alt=“region1” shape=“rect or circle or poly” cords=“100,100,220,200” href=“http://some.url” />
• Create a default• <area shape=“default” href=”http://someother.url” />
– Add closing tag <map/>• Associate map with the image
– <img src=“picture,gif” alt=“a Picture” usemap=“daMap” />
Using Dreamweaver for maps
Add hotspots
The Code<p><img src="audi.tt.1.jpg" width="640" height="480"
border="0" usemap="#test" /> <map name="test" id="test"> <area shape="circle" coords="301,363,69"
href="http://www.tirerack.com" target="_blank" alt="Buy Tires" />
<area shape="rect" coords="90,83,420,210" href="http://www.crutchfield.com" target="_blank" alt="Buy Stereo" /><area shape="default" href="http://www.audi.com" target="_blank" alt="Buy a TT"/>
</map></p>
Assignment # 5
• Examples– http://perleybrook.umfk.maine.edu/samples/links.htm
• In Blackboard• Linking Exercise• Due April 1• Click on icon to see Assignment
Microsoft Word Document
