Transcript CHƯƠNG 1 - SaigonTech

eXtensible Markup
Language (XML)
Tutorial 2
Adding Hypertext Links
to a Web Page
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 email 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
www.saigontech.edu.vn, so the SaigonTech website will
be opened in the secondary window.
 Finally, create an email link with email address
[email protected]
5
III. Solution
1. Analysis and Design
2. Implementation
6
1. Analysis and Design
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.
7
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
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.
Assign the id to the
Education portion
The Education portion
9
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.
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 <a> to make link.
12
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.
13
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
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