Adding Hypertext Links to a Web Page

Tutorial 2

eXtensible Markup Language (XML)

2

Contents

I. ObjectivesII. Creating a Personal Web Page ProblemIII. Solution

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

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:

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

6

III. Solution

1. Analysis and Design2. Implementation

7

1. Analysis and DesignInternal 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

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.

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 <a> tag with href attribute to create a link.

For internal link, the value of href starts with #, followed by Id value.

11

2.1 Developing the Internal Links (con’t)

Do the same steps for creating other internal links.

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 <a> to make link.

13

2.3 Developing the Internet Link

Use the tag <a>, 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.

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.

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