1. Adding Hypertext Links to a Web Page Tutorial 2 eXtensible Markup Language (XML)

2. Contents I.Objectives II.Creating a Personal Web Page Problem III.Solution 2

3. I. Objectives Create links among documents in a Web site Understand relative and absolute folder paths Mark a location with the id attribute Create a link to an id Create a link to a resource on the internet Create a link to an email address 3

4. II. Creating a Personal Webpage Problem The student has been creating a personal web page. The page has grown with class information. Therefore, he decides to add links in the page as follow: 4

5. Requirements:  Create internal links named Education, Technical skills, Hobbies, and XML so that customer clicks on one of any links, the corresponding section of the webpage will be displayed.  In the XML section, create a link named “New Perspectives HTML, XHTML, and XML 3rd Edition” to link to the webpage book_info.html.  In the footer part, create a link named www.saigontech.edu.vn, so the SaigonTech website will be opened in the secondary window.  Finally, create an email link with email address nguyenvana@saigontech.edu 5

6. III. Solution 1. Analysis and Design 2. Implementation 6

7. 1. Analysis and Design 7 Internal Links - link to another section of the web page: Education, Technical Skills, Hobbies, XML. External Link - link to another web page in the same folder with the original page: Book info webpage. Internet Link - link to a website on the Internet: SaigonTech website.  Send an email to someone: Send me an Email.

8. 2. Implementation 2.1 Developing the Internal Links 2.2 Developing the External Link 2.3 Developing the Internet Link 2.4 Developing the email Link 8

9. 2.1 Developing the Internal Links  To jump to a specific location within a document, you first need to mark that location with id attribute.  Id values must be unique.  Id values are not case sensitive. 9 The Education portion Assign the id to the Education portion

10. 2.1 Developing the Internal Links (con’t)  After assigning an Id to the education portion, use tag with href attribute to create a link.  For internal link, the value of href starts with #, followed by Id value. 10

11. 2.1 Developing the Internal Links (con’t)  Do the same steps for creating other internal links. 11

12. 2.2 Developing the External Link  To create a link to the book_info.html webpage that has been developed in tutorial 1, use the tag to make link. 12

13. 2.3 Developing the Internet Link  Use the tag, note the prefix http://, it’s always used to link to a web page on the Internet  Open a link in a new window or tab, use target=“_blank” attribute. 13

14. 2.4 Developing the email link  To send an email to someone, use the URL mailto:email address  Use title=“text” attribute to show a tooltip on the link. 14

15. References  New Perspectives on Creating Web Pages with HTML and XML (Patrick Carey & Mary Kemper) - Course Technology Publisher  Creating Cool Web Sites with HTML, XHTML and CSS - Taylor, Dave, Wiley 15