Full file at http://testbank360.eu/solution-manual-new-perspectives-on-html-and-xhtml-5th-edition-carey
HTML and XHTML Tutorial Two: Developing a Web Site A Guide to this Instructor’s Manual: We have designed this Instructor’s Manual to supplement and enhance your teaching experience through classroom activities and a cohesive chapter summary. This document is organized chronologically, using the same heading in blue that you see in the textbook. Under each heading you will find (in order): Lecture Notes that summarize the section, Figures and Boxes found in the section (if any), Teacher Tips, Classroom Activities, and Lab Activities. Pay special attention to teaching tips, and activities geared towards quizzing your students, enhancing their critical thinking skills, and encouraging experimentation within the software. In addition to this Instructor’s Manual, our Instructor’s Resources CD also contains PowerPoint Presentations, Test Banks, and other supplements to aid in your teaching experience. For your students: Our latest online feature, CourseCasts, is a library of weekly podcasts designed to keep your students up to date with the latest in technology news. Direct your students to http://coursecasts.course.com, where they can download the most recent CourseCast onto their mp3 player. Ken Baldauf, host of CourseCasts, is a faculty member of the Florida State University Computer Science Department, where he is responsible for teaching technology classes to thousands of FSU students each year. Ken is an expert in the latest technology and sorts through and aggregates the most pertinent news and information for CourseCasts, so your students can spend their time enjoying technology, rather than trying to figure it out. Open or close your lecture with a discussion based on the latest CourseCast.
Table of Contents Tutorial Objectives HTML 62: Exploring Web Site Structures HTML 67: Creating a Hypertext Link HTML 69: Specifying a Folder Path HTML 74: Linking to Locations within Documents HTML 81: Working with Linked Images and Image Maps HTML 89: Linking to Resources on the Internet HTML 98: Working with Hypertext Attributes HTML 102: Using the Link Element HTML 103: Working with Metadata End of Tutorial Material Glossary of Key Terms
2 2 3 3 5 5 7 8 9 9 10 12
Full file at http://testbank360.eu/solution-manual-new-perspectives-on-html-and-xhtml-5th-edition-carey
Tutorial Objectives Students will have mastered the material in Chapter One when they can: Session 2.1 Mark an image as a link Learn how to storyboard various Web site Create an image map from an inline image structures Remove an image border Create links among documents in a Web site Session 2.3 Understand relative and absolute folder Understand URLs paths Link to a site on the Web Work with the base element Link to an FTP site Link to an e-mail address Session 2.2 Work with hypertext attributes Mark a location with the id attribute Work with metadata Create a link to an id HTML 62: Exploring Web Site Structures LECTURE NOTES Teach the students about a technique known a storyboarding. Explain that students should determine which structure works best for the type of information they are presenting. It should be easy for users to navigate from page to page. Explain the linear Web page structure, in which each page is linked to the next and to previous pages, in an ordered chain of pages. Discuss that if you want to make it easier for users to return to the first page, use an augmented linear structure Describe the hierarchical structure and how it starts with a general topic that includes links to more specific topics. Discuss mixed structures that can combine linear and hierarchical structures. Explain about protected structures. FIGURES Figure 2-1, Figure 2-2, Figure 2-3, Figure 2-4, Figure 2-5, Figure 2-6 TEACHER TIP Students often lead very busy lives and have a hard time understanding that in Web site design they really do need to make a plan first. Show them some examples of bad Web sites that could have been avoided if someone had just made an effort to plan it out before building it. CLASSROOM ACTIVITIES 1. Discuss with your students the different design approaches and basic Web structures. If you have a computer and a projection device in class, search the Web to find examples of good and bad structures. 2. Quick Quiz: 1. Which of the following is not a basic Web page structure? a. Storyboarding
Full file at http://testbank360.eu/solution-manual-new-perspectives-on-html-and-xhtml-5th-edition-carey
b. Linear c. Hierarchical d. Augmented linear (Answer: A) 2. A(n) ____________ structure starts with a general topic that includes links to more specific topics. (Answer: hierarchical) 3. True/False: You can combine linear and hierarchical structures. (Answer: True) HTML 67: Creating a Hypertext Link LECTURE NOTES Review the concept of hypertext links with your students. Remind students to use their storyboards as guide when linking. Explain how the href attribute of the <a> tag is used Demonstrate how to create a list of items that users can click on, that is, a list of links. BOXES Tip: Keep your filenames short so that users are less apt to make a typing error when accessing your Web site (HTML 67) Reference Window: Marking a Hypertext Link (HTML 68) FIGURES Figure 2-8, Figure 2-9, Figure 2-10 TEACHER TIP Students find visual aids useful. You might want to track the entire process of creating a link on the chalkboard or a flip chart. This especially will work if you have drawn out the storyboard already as you can show the correspondence between the storyboard and the resulting links. CLASSROOM ACTIVITIES 1. Class Discussion: Have the students view a particular Web site, for example the Web site for their school. Based upon how the links on the Website directed them, what type of structure would they say is being used? 2. Quick Quiz: 1. True/False: A hypertext link is a one-sided tag. (Answer: False) 2. True/False: The href is the location being linked to by the hypertext link. (Answer: True) 3. What is the HTML code you would use you create a link to a page called calendar.htm? (Answer: <a href=”calendar.htm” > calendar page </a>) HTML 69: Specifying a Folder Path LECTURE NOTES Explain that when referencing a file located in a different folder than the link tag, you must include the location, or path, for the file. Discuss the difference between absolute paths and relative paths. Explain that the absolute pathnames for files located on different computers begin with slash followed by the drive letter and a vertical bar ( | ).
Discuss how most Web designers use relative pathnames in their hypertext links due to the complexity of absolute paths and the fact that relative pathnames make the hyperlinks portable. Explain how to reference a file in a folder directly above the current folder in the folder hierarchy, using two periods (..). Review with students how to change the base in the document’s head allowing them to move a document to a new folder without having to redo all the relative paths.
BOXES Tip: To make your Web site easier to maintain, organize your folders to match the organization of the pages on the Web site and group images and other media files within folders separate from your HTML files (HTML 69) Tip: You can reference the current folder in a using a single period (.) character (HTML 72) Reference Window: Using the Base Element to Set the Default Location of Relative Paths (HTML 72) InSight: Managing Your Web Site (HTML 73) FIGURES Figure 2-11, Figure 2-12, Figure 2-13 TEACHER TIP Students have a hard time learning how to write the paths because they differ from just clicking folders in Windows Explorer. Provide several different examples for them. Show them how to create a Web site folder on their USB drives that will mirror what they load on a Web server. This helps them to build good relative paths and then just upload the contents of the Web site folder to their Web server.
CLASSROOM ACTIVITIES 1. Students are sometimes confused by paths. Create a demonstration of folders and paths using manila file folders and papers, or you can ask a group of students to design their own demonstration. Be sure to demonstrate subfolders by tucking folders inside one another. Show how two subfolders can have the same name, as long as they are located inside different main folders. 2. Quick Quiz: 1. The HTML code <a href = “contacts.htm”>Contact me</ a> a. Links to a spot in the same document with the ID contacts.htm b. Links to a document called contacts.htm located in the root directory c. Links to a document called contacts.htm located in the same folder as the original page d. Links to a section called “Contact me” in a file called contacts.htm (Answer: C) 2. True/False: You should always use absolute paths in your links because they are more precise than relative paths. (Answer: False) LAB ACTIVITY Have students create a folder for Lab assignments. Have them put in it the files that you use in the lab. Have them also create a main lab assignment page. On this page have them add links to the lab assignments they have done so far using relative paths. Tell them that as they complete lab pages in the future, they need to add links to them on this main lab assignment page. This will help them to understand links as well as learn a bit about Web site maintenance and updating.
HTML 74: Linking to Locations within Documents LECTURE NOTES Introduce the id Attribute to students. Describe how it can be added to any element. Explain that not all browsers support the id Attribute and then discuss how to create an Anchor element. Remember to state that anchors are deprecated in strict XHTML. Demonstrate how to create links within a page that go to a specified location within the same page using #. Demonstrate how to create links within a page that go to a specified location within a different page using #. BOXES Tip: In general, Web pages should not span more than one or two screen heights. Studies show that long Web pages are often skipped by busy users. (HTML 74) Reference Window: Defining an Element id (HTML 74) InSight: Working with Anchors (HTML 78) Reference Window: Linking to an id (HTML 78) FIGURES
Figure 2-14, Figure 2-15, Figure 2-16, Figure 2-17, Figure 2-18, Figure 2-19, Figure 2-20, Figure 2-21, Figure 2-22, Figure 2-23
TEACHER TIP Bring two notebooks to class: one with dividers in it and the other without dividers. Explain that adding ids is like placing dividers in a notebook to indentify locations in a page. Explain to them that once ids are added to a Web page, you can then choose to link to that particular id just as once you have dividers you can flip right to that part of the notebook. Contrast that with the notebook without dividers and how you can only reference the notebook itself as a whole. CLASSROOM ACTIVITIES 1. Class Discussion: What advantages do element IDs provide over anchor tags? Discuss this with the class. Why do students think that element IDs were introduced? 2. Quick Quiz: 1. To mark a piece of text as a link, you need to assign it a(n) ____________________. (Answer: ID attribute) 2. A(n) ____________ attribute identifies the link target. (Answer: href) 3. True/False: To support older browsers, you need to use anchor elements to create links. (Answer: True) HTML 81: Working with Linked Images and Image Maps LECTURE NOTES Explain that to use a single image to access multiple targets, you must set up hotspots within the image. Describe how a hotspot is a designated area of the image that acts as a hypertext link. Explain that hotspots are defined through the use of image maps, which list the positions of all hotspots within a particular image. Introduce client-side image maps and how they are used. Describe the basic layout of an image map tag. Discuss how images are measured in pixels and how each hotspot has a different set of coordinates created from pixel values. Explain how the <area> tag is used to specify the areas of the image that act as hotspots. Describe the possible values for the shape attribute: “rect” for a rectangular hotspot, “circle” for a circular hotspot, “poly” for irregularly shaped polygon hotspots, and “default” for the spots not covered by another hotspot. Explain how the coords attribute is used for the different shapes. Demonstrate how to apply an image map using the usemap attribute Explain how to remove the border from around an image. Discuss server-side image maps Discuss how to create effective hypertext links BOXES Tip: Always include alternate text for your linked images to allow non-graphical browsers to display a text link in place of the linked image. (HTML 81) Reference Window: Creating a Client-Side Image Map (HTML 85)
Tip: If you need to be compatible with older browsers, use the attribute border=“0” in place of the border-width style. Note that the border attribute has been deprecated and is not supported in strict applications of XHTML. (HTML 86) Reference Window: Removing the Border from an Inline Image (HTML 87) InSight: Writing Effective Hypertext Links (HTML 88)
FIGURES Figure 2-24, Figure 2-25, Figure 2-26, Figure 2-27, Figure 2-28, Figure 2-29, Figure 2-30 TEACHER TIP Students have a hard time understanding how to get the coordinates for the shapes used in an image map. Show them that it is not as difficult as they may think. For example, you could show them how MS Paint displays coordinates as you move your mouse over a picture displayed in Paint. Or show them some of the shareware programs available for helping to create image maps available on the Web. CLASSROOM ACTIVITIES 1. Class Discussion: Have students discuss the difference between normal links and links created by using an image map. Which style do they prefer? Why do they prefer that style?. 2. Quick Quiz: 1. Which of the following is not a valid value for the hotspot shape attribute? A. Circle B. Triangle C. Rect D. Poly (Answer: B) 2. A ______________-side image map is defined within the HTML file. (Answer: client) LAB ACTIVITY Most schools have pictures available of different buildings on campus. Acquire one and provide it to your students. Have them build a page that displays the picture. Have them create a simple description page for three or four places on campus that can be seen in the picture. Have them do this in one page using id attributes to mark each description. Then have them add an image map to the page with the picture that links the location in the picture to the location in the description page. HTML 89: Linking to Resources on the Internet LECTURE NOTES Review the process of creating other kinds of links with your students. Explain that to create a hypertext link to a resource on the Internet, you need to know the URL. Describe the general structure of a URL (scheme: location). Discuss how Web pages use Hypertext Transfer Protocol (HTTP). Go over the list of other protocols used on the Web. Explain the parts of a URL and domain names. Demonstrate how to create a link to a Web page using HTTP. Discuss how FTP Servers use the communication protocol FTP, or File Transfer Protocol and how FTP servers are used. Explain how to link to an FTP servers.
Describe how to link to a local file. Discuss how many Web designers include their e-mail addresses on their Web pages as hypertext links. Describe how to create a mailto: link for an e-mail address as well as including information to be added to the e-mail as part of the link. Discuss relationship between e-mail links and spam.
BOXES Tip: Because URLs cannot contain blank spaces, avoid blank spaces in Web site file and folder names. (HTML 89) InSight: Understanding Domain Names (HTML 91) Tip: To link to more than one e-mail address, add the addresses to the mailto link in a commaseparated list. (HTML 94) InSight: E-mail Links and Spam (HTML 98) Reference Window: Linking to Various Internet Resources (HTML 98) FIGURES Figure 2-31, Figure 2-32, Figure 2-33, Figure 2-34, Figure 2-35, Figure 2-36, Figure 2-37, Figure 2-38, Figure 2-39, Figure 2-40 TEACHER TIP Students will probably already be familiar with a few examples of different resources available on the Web. Use some of the more popular examples and explain how those links were created in the Web page. This will help them to understand the link and protocol association better. Be sure and discuss how to carefully construct e-mail links to avoid spam. CLASSROOM ACTIVITIES 1. Search the Web to find examples of Web pages that link to other Internet resources. Challenge students to find links to FTP sites, newsgroups, and e-mail addresses. 2. Quick Quiz: 1. _____________ servers can store files that Internet users can download, or transfer to their computers. a. FTP b. Web c. HTTP d. HTML (Answer: A) 2. There should always be a(n) ________________following the communication protocol in a URL. (Answer: separator) 3. True/False: By convention, if the path and filename are left out of the URL, the browser searches for a file named “index.html” in the current folder. (Answer: False) HTML 98: Working with Hypertext Attributes LECTURE NOTES Introduce and describe the target attribute. Describe the different target names: new, _blank, and _self.
Explain what a tooltip is and how to add one to an anchor. Discuss semantic links and how to use them. Explain the different types of link relations for the rel and rev attributes.
BOXES Tip: All of the hypertext attributes applied to the <a> tag can also be applied to the <area> tags within your image maps. (HTML 98) Reference Window: Opening a Link in a New Window or Tab (HTML 99) Tip: To force all hypertext links in your page to open in the same target, add the target attribute to a base element located in the documents header. (HTML 100) FIGURES Figure 2-41, Figure 2-42, Figure 2-43, Figure 2-44 TEACHER TIP Students understand targets better when they see examples. Show students a few different Web sites that use different types of targets. Show them how different browsers display the pages and how to setup pages to display in new tabs instead of new windows. CLASSROOM ACTIVITIES 1. Class Discussion: Ask students what they think about popups. Do they find them useful? When do they become annoying? Do they like having them open in tabs instead? What about tooltips? 2. Quick Quiz: 1. By default, each new page you open appears in a(n) _____________ browser window. (Answer: existing) 2. True/False: All browsers support popup windows, so you should use them whenever you can. (Answer: False) LAB ACTIVITY Have students modify their main lab assignment page that they created earlier to include links to the new pages they have created for this lab. Have them display the pages in a new window/tab. HTML 102: Using the Link Element LECTURE NOTES Explain what a link element is. Describe the <link /> one-sided tag. Demonstrate how they appear in a Web browser that supports them. Explain that not all browsers support link elements. Remind students to duplicate link element information elsewhere in the page so that their pages will work in more browsers. FIGURES Figure 2-45 TEACHER TIP
Make sure that you have Opera or another Web browser that can demonstrate the usage of these link elements. Most students will not understand why they are helpful so you could hint at their usage later on for external style sheets. CLASSROOM ACTIVITIES 1. Class Discussion: Ask students how many of them keep an organized notebook. Do they all organize the same way? Is there a defined good style for organizing a notebook? Help them to understand that while standards do exist, it takes a while for them to catch on just like organizational models exist, but not everyone follows them just yet. 2. Quick Quiz: 1. True/False: You should not place important elements in a link element unless those links are also duplicated elsewhere on the page. (Answer: True) 2. True/False: All web browsers recognize the same link elements. (Answer: False) HTML 103: Working with Metadata LECTURE NOTES Discuss how search engines use metadata. Introduce the Meta element and how it is used. Explain how to create well-crafted descriptions and keywords. Describe the other examples of metadata that can be used to describe a document. Explain how to use a meta element to refresh and redirect a Web page. Demonstrate how to use a meta element to indicate the character set for a document. BOXES Tip: Avoid generic and vague descriptions of your Web site. Instead, to attract a specific target audience to your site, use descriptions and keywords that will show how your Web site is different from others. (HTML 104) Reference Window: Working with Metadata (HTML 105) FIGURES Figure 2-46, Figure 2-47 TEACHER TIP Develop some safe searches ahead of time (ones that will not lead to student’s being ambushed while searching the Internet). Discuss how meta elements in a page help to make these searches possible. Provide examples of good and bad meta elements.
CLASSROOM ACTIVITIES 1. Class Discussion: Ask students if they have ever performed searches before on the Internet. Ask them if they have ever had a search that has failed even though they know the page exists. What keywords do they think need to be added to the page so that it shows up in a search better? 2. Quick Quiz: 1. True/False: When adding keywords you should use generic ones to identify your page. (Answer: False) 2. True/False: The only type of meta elements are descriptions and keywords. (Answer: false) 3. ________ meta elements can be used to force browsers to change to another document. (Answer: Refresh) End of Tutorial Material
Review Assignments: Review Assignments provide students with additional practice of the skills they learned in the tutorial using the same tutorial case, with which they are already familiar. These assignments are designed as straight practice only and should not include anything of an exploratory nature.
Case Problems: A typical NP tutorial has four Case Problems following the Review Assignments. Short tutorials can have fewer Case Problems (or none at all); other tutorials may have five Case Problems. The Case Problems provide further hands-on assessment of the skills and topics presented in the tutorial, but with new case scenarios. There are four types of Case Problems: Apply. In this type of Case Problem, students apply the skills that they have learned in the tutorial to solve a problem. Apply Case Problems can include Explore steps, which go a bit beyond what was presented in the tutorial, but should include only one or two Explore steps if any at all. Create. In a Create Case Problem, students are either shown the end result, such as a finished Word document, and asked to create the document based on the figure provided; or, students are asked to create something from scratch in a more free-form manner. Challenge. A Challenge Case problem involves three or more Explore steps. These steps challenge students by having them go beyond what was covered in the tutorial, either with guidance in the step or by using online Help as directed. Research. In this type of Case Problem, students need to go to the Web to find information that they will incorporate somehow in their work for the Case Problem. A tutorial does not have to include each of the four types of Case Problems; rather, the tutorial’s content should dictate which Case Problems to include. It’s possible, therefore, that some tutorials might have three Case Problems of one type and only one Case Problem of a different type. To the extent possible, the first Case Problem in a tutorial should be an Apply so that the Case Problems progress in degree of difficulty.
Internet Assignments: Internet Assignments are additional exercises that students access via the Student Online Companion Web site. These assignments integrate the skills the students learned in the tutorial with research on the Web. Not all books or tutorials include Internet Assignments;
for example, in the Office First Course text, only the application tutorials (Word, Excel, Access, and PowerPoint) have Internet Assignments. ď‚ˇ
Reality Check Exercises: Reality Check exercises are comprehensive, open-ended assignments that give students the opportunity to practice skills by creating practical, real-world documents, such as resumes and budgets, which they are likely to use in their everyday lives at school, home, or work. Reality Check exercises are offered at various points throughout a text, encompassing the concepts and skills presented in a standalone tutorial or a group of related tutorials.
Glossary of Key Terms absolute path (HTML 71) augmented linear structure (HTML 63) client-side image map (HTML 82) domain name (HTML 91) e-mail harvester (HTML 98) escape characters (HTML 94) extension (HTML 91) File Transfer Protocol (HTML 92) FTP (HTML 92) FTP server (HTML 92) hierarchical structure (HTML 64) home page (HTML 62) hotspot (HTML 81) HTTP (HTML 89) Hypertext Transfer Protocol (HTML 89) image map (HTML 81) Top of Document
linear structure (HTML 63) metadata (HTML 103) mixed structure (HTML 64) protected structure (HTML 66) protocol (HTML 89) relative path (HTML 71) semantic link (HTML 101) server-side image map (HTML 88) sibling folder (HTML 71) site index (HTML 65) spam (HTML 98) storyboard (HTML 62) tooltip (HTML 100) Uniform Resource Locator (HTML 89) URL (HTML 89)