Working with Hyperlinks, Creating Bookmarks and Links

 

Student Learning Outcomes:

1. Learn where to place bookmarks on a web page.
2. Create a link to a Bookmark
3. Create a link to another page
4. Create a definition list
5. Create a link to an external web site.
6. Identify the pseudo-class selectors
7. Use an image as a link.
8. Create links to e-mail and to non-XHTML files.

Important Points: 

1. Hyperlink XHTML code that serves as a navigation point to antoher section of the same document, another document or another web site.
2. Broken Link - one that does not work
3. Hyperlink view provides a diagram of all files that link to a selected file or are link from a selected file.
4. Uniform Resource Locator (URL) - complete address of a web site.
5. Communications protocol is an agreed to standard for send voice, data and video over communications lines.
6. Domain name is the registered name of the file server.
7. The path is the folder or folder directory of the web page.
8. HTTP - Hyper Text Transfer Protocol
9.TCP/IP - Transfer Control Protocol/Internet Packet - http://earl.wylie.solano.edu/computerlectures/tcp.htm
10. Bookmark - place within a document that is used as a target to a link referred to as the anchor.
11. Hyperlink to bookmark - <a href="#top">Go originalAttribute="href" originalPath=""#top">Go" to top of page</a>
12. Create a bookmark:
a. Select the text or object or nothing,
b. Click insert on common menu bar.
c. Click bookmark

You will see:

Bookmark Dialog Box
d. Click in bookmark name if you have not select text or object and type in name such as top or bottom or something else.
e. Click Ok.
f. In design view you will see text or object with dash underline is bookmark
g. In code view you might see:  <a name="Top">text or picture optional</a>

13. Linking to a bookmark: -
a. Select text  or object to be used as bookmark.
b. Click Insert hyperlink button on the common toolbar.
c. You will see:

Insert Hyperlink Dialog box

d. Click place in this document: You will see:

Insert Hyperlink , Place in document option

e. Select the bookmark that you want and click OK.
f. In design view you will see the hyperlink to the bookmark underlined.
g. In code view you might see:<a href="#top">Go to top of page</a>

14. Definition List - commonly used to create a chronology, list of events or cited pages.
<dl>
<dt></dt>
</dl>

15. Placeholder page is a page that is still in the early stages of development.
16. Creating link to another page.
a. select the text
b. click insert hyperlink button on common toolbar.
You will see:

 

Hyperlink Dialog box
c. Click existing file or web page>
d. Navigate to the folder/web page that you want to link
e. click OK
17. Creating link to page that does not exist.
a. Select the text for the link.
b. Click insert, click hyperlink, click create new document: you will see:

Insert Hyperlink, new document

c. type in the name of the new document:
d. click edit the new document now.
e. Click ok, and the new document is created.  Save it.

 


18. External Web Site Link: Click insert, click hyperlink,.  You will see:
Insert Hyperlink, external web site
a. In the address box type in the external URL.
19. Changing the target setting. 
a. _top-replace the current browser window with a new web site. Only one window remain open new window
b._blank-new window with old still open - two window open - Whole page
c. _self - same window a  as link. -Same Frame
d. Select hyper link, right click, click hyperlink properties, click target frame: you will see:
Target Frame
e. Select the target you want, click OK.
20.Creating e-mail link.
a. Select text for link
b.  Click insert hyperlink button.
c. Click e-mail address link to object.
You will see:
E-mail hyperlink

d. Type in the e-mail address, Click ok.
21. Using an image as link.
a. Select the image, click insert, click hyperlink and fill out the hyperlink dialog box.

22. Pseudo-class selector is one for which there is no XHTML equivalent. Used for changing hyperlink colors.

Psuedo Code for hyperlinks

a. right click on page, click page properties, click formatting tab you will see:
Link colors

b. click list arrow next to the corresponding hyperlink color.
c. Click a color
d. click ok.

23. Hyperlinks View- click site on menu bar, click hyperlinks.  You will see:

Hyperlinks View
 
24. Setting the screen tip for a hyperlink.- screen tip is a mouse over event which display a text message.
a. Right click the hyperlink
b. Select hyperlink properties.
c. Click the screen tip
You will see:
Screen Tip Dialog Box

d. type in the text, click Ok.

25. Remove link. right click the link, click hyperlink properties, click remove link button.

26. Manage Hyperlinks
a. Click Task panes, click hyperlinks, the task pane will appear at the bottom of the page.  You will see:
Hyperlink

b. Click the edit hyperlink button on the left side You will see:
Edit Hyperlink Dialog Box
c. Make the change you want.

1. Page templates can be used to create specific pages.

Selected Templates and Wizards
Name Description
Normal Creates a blank web page
Bibliography page with references to printed or electronic works
Conformation Form A page that confirms the receipt of information from a user of a form, discussion, or registration page.
Feedback Form A page that collects data entered by a user, such as comments and personal information
Form Page Wizard A wizard that creates a web page contains a form with appropriate data fields to collect information
Frequently Ask Questions A page with popular questions about a topic and their answers.
Guest Book a page into which visitors to a web site can enter comments and other information
Photo Gallery A page that contains a Photo Gallery with pictures, captions, and descriptions that you supply.
Search Page A page that accepts keywords entered by a user and then returns a list of hyperlinks to pages with matching entries.
User Registration a page that visitors can used to register for a restricted access web site.
Table of Contents

A page that contain a list of hyperlinks to every page in the current web site.


2. A form is a collection of form fields in a web page that gather information.
3. A form field is a data-entry field in a form, such as a text box or an option button.
4. A form handler is a program that collects and process the form's data.
5. A form Page Wizard is one way to create a form page.
6. Inserting a form component into a normal page is another way of creating a form page.
7. Option buttons (radio buttons) are arrange in groups. Two to seven options buttons in a group. Only one button can be selected in a group.
8. Option group name identifies a related set of option buttons.
9. A drop-down box (drop down menu) is used when you want to present several choices in a single form field. Should contain a minimum of three choices.
10. A text box accepts a single line of type information - good to use for passwords.
11. A text area (scrolling text box) accepts multiple lines of text information.
12. A check box is used to collect yes/no data.
13. Validation is the process of checking the information entered by a user into one or more form fields.
14. Push buttons (command buttons) are used to submit a form to the server, to clear the form's fields.
15. Submit push button is used to let a user submit a form to the server for processing.
16. Reset push button clears any previously entered data from the form.
17. Normal push button initiates a user defined script.
18. A form handler is a program on the web server that process from data received from the browser.
19. Form handlers use the FrontPage server extensions.
20. The Save Results form handler collects data from a browser and stores it in the specified format on the server.
21. Form results are stored on the server in a format that you specify.
22. Data can be saved as a txt file, an html file, or into an access data base.
23. Field name-data value pair refers to a line for each form field name and its value.
24. All of the form fields are nested within the Form tags.
25. The POST value for the METHOD property specifies that the data in the form will be processed by or posted to the server.
26. The WEBBOT tag specifies the properties for the Save Results form handler.
27. The option button, text box, a check box form fields are implemented using the INPUT tag.
28. The drop-down box form field is implemented using the SELECT tag.
29. The text are form field is implemented sing the TEXTAREA tag.
30. Microsoft Internet Information Services (IIS) is a web server program.
31. TCP/IP is the protocol used on a web site to send the request for a web page to the server.
32. A web site is published by copying the web site's folders and files to the server.
33. In FrontPage click File, and then publish web.
34. If you have subwebs make sure you click the include subwebs box.
35. A confirmation page is a web page that contain a copy of the data entered by the user.
36. In a comma-delimited text file, the name of each form fields appears in the first line of the file.
37. _private is the folder that will contain the results of a form.
38. A hit counter is a web component that counts the number of times a page in a web site has been opened.
39. The Banner Ad Manager is a Java applet that controls the continuous display of images in a web page.
40. Banner ads are dynamic billboards that display a series of images.
41. The Find and Replace dialog box lets you search only the current page or the entire web site.
42. Recalculating hyperlinks is the process of updating the display of all views of the web site.
43. Verifying hyperlinks is the process of checking all of the hyperlinks in a web site to identify broken hyperlinks.
44. An external hyperlink is a hyperlink to a location that is not in the current web site.
45. Permissions allow a web site developer to control the use of the web site.
46. Browsing permission allow a user to browse all of the pages in a web site.
47. Authoring permissions allow a user to browse and change a sites pages.
48. Administering permissions allow a user to browse, change pages and set other permissions.
49. Going live is the process of publishing your web site to a web server.
50. Acceptable use policy (AUP) usually is a published or online document that an ISP creates to indicate the acceptable activities on the web server.
51. Frontpage 2002 Server Extensions must be loaded on the web server for the web components will work.
52. The remote web site view button is used for publishing.
53. Local to remote publishes from where you are working to the remote web site.
54. Remote to local takes it from the remote to where you are working.
55. Distributed Authoring and Versioning(DAV) is an extension of the HTTP protocol that is used to transfer files over the internet.
56. File Transfer Protocol(FTP) is an internet protocol for transferring files between computers connected to the internet.
57. A conformation page is a web page that contain a copy of the data entered by the user and often is used for verification purposes.


Best Practices: