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

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

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 address 3

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

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 so the SaigonTech website will be opened in the secondary window.  Finally, create an link with address 5

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

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 to someone: Send me an .

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

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

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

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

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

2.3 Developing the Internet Link  Use the tag, note the prefix 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

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

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