cos 125 day 16. agenda second capstone progress report due march 23 (next class ) assignment #4...

COS 125

DAY 16

Agenda

• Second Capstone Progress Report Due March 23 (next class)

• Assignment #4 assigned – Due Tuesday March 23

• Exam #3 will March 26– Castro Chaps 1-7

• Problem Areas– Review XHTML– Review Paint Shop Pro– Review Dreamweaver Usage

• Lecture/discuss Using Images• Assignment #5

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

<?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>

Images

Animations

Adding Image

Links

• 3 parts– Destination

• Where to go• URLs

– 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 >

• 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)

• Use absolute URLs if the destination is on a different server (see Chap 1)

• DO NOT use “click here”• 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>

• 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>

• Ling 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 windows 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 e be created to many things– FTP

• href=“ftp://allagash.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=“regions1” shape=“rect or circle or poly” cords=“100,100,220,200” href=“some.url” />

• Create a default• <area shape=“default” href=”someother.url” />

– Add closing tag <map/>• Associate map with the image

– <img src=“picture,gif” alt=“a Picture” usemap=“daMap” />

Assignment # 5

• Examples– http://perleybrook.umfk.maine.edu/samples/links.htm

• In WebCT

• Linking Exercise

• Due Friday March 26

• Click on icon to see AssignmentMicrosoft Word

Document

cos 125 day 16. agenda second capstone progress report due march 23 (next class ) assignment #4...

Documents