Adding Hypertext Links to a Web Page Tutorial 2 eXtensible Markup Language (XML)
-
Upload
brianna-mclaughlin -
Category
Documents
-
view
227 -
download
0
Transcript of Adding Hypertext Links to a Web Page Tutorial 2 eXtensible Markup Language (XML)
![Page 1: Adding Hypertext Links to a Web Page Tutorial 2 eXtensible Markup Language (XML)](https://reader035.fdocuments.us/reader035/viewer/2022062422/56649e7e5503460f94b81dc9/html5/thumbnails/1.jpg)
Adding Hypertext Links to a Web Page
Tutorial 2
eXtensible Markup Language (XML)
![Page 2: Adding Hypertext Links to a Web Page Tutorial 2 eXtensible Markup Language (XML)](https://reader035.fdocuments.us/reader035/viewer/2022062422/56649e7e5503460f94b81dc9/html5/thumbnails/2.jpg)
2
Contents
I. ObjectivesII. Creating a Personal Web Page ProblemIII. Solution
![Page 3: Adding Hypertext Links to a Web Page Tutorial 2 eXtensible Markup Language (XML)](https://reader035.fdocuments.us/reader035/viewer/2022062422/56649e7e5503460f94b81dc9/html5/thumbnails/3.jpg)
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
![Page 4: Adding Hypertext Links to a Web Page Tutorial 2 eXtensible Markup Language (XML)](https://reader035.fdocuments.us/reader035/viewer/2022062422/56649e7e5503460f94b81dc9/html5/thumbnails/4.jpg)
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:
![Page 5: Adding Hypertext Links to a Web Page Tutorial 2 eXtensible Markup Language (XML)](https://reader035.fdocuments.us/reader035/viewer/2022062422/56649e7e5503460f94b81dc9/html5/thumbnails/5.jpg)
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 [email protected]
![Page 6: Adding Hypertext Links to a Web Page Tutorial 2 eXtensible Markup Language (XML)](https://reader035.fdocuments.us/reader035/viewer/2022062422/56649e7e5503460f94b81dc9/html5/thumbnails/6.jpg)
6
III. Solution
1. Analysis and Design2. Implementation
![Page 7: Adding Hypertext Links to a Web Page Tutorial 2 eXtensible Markup Language (XML)](https://reader035.fdocuments.us/reader035/viewer/2022062422/56649e7e5503460f94b81dc9/html5/thumbnails/7.jpg)
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.
![Page 8: Adding Hypertext Links to a Web Page Tutorial 2 eXtensible Markup Language (XML)](https://reader035.fdocuments.us/reader035/viewer/2022062422/56649e7e5503460f94b81dc9/html5/thumbnails/8.jpg)
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
![Page 9: Adding Hypertext Links to a Web Page Tutorial 2 eXtensible Markup Language (XML)](https://reader035.fdocuments.us/reader035/viewer/2022062422/56649e7e5503460f94b81dc9/html5/thumbnails/9.jpg)
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
![Page 10: Adding Hypertext Links to a Web Page Tutorial 2 eXtensible Markup Language (XML)](https://reader035.fdocuments.us/reader035/viewer/2022062422/56649e7e5503460f94b81dc9/html5/thumbnails/10.jpg)
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.
![Page 11: Adding Hypertext Links to a Web Page Tutorial 2 eXtensible Markup Language (XML)](https://reader035.fdocuments.us/reader035/viewer/2022062422/56649e7e5503460f94b81dc9/html5/thumbnails/11.jpg)
11
2.1 Developing the Internal Links (con’t)
Do the same steps for creating other internal links.
![Page 12: Adding Hypertext Links to a Web Page Tutorial 2 eXtensible Markup Language (XML)](https://reader035.fdocuments.us/reader035/viewer/2022062422/56649e7e5503460f94b81dc9/html5/thumbnails/12.jpg)
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.
![Page 13: Adding Hypertext Links to a Web Page Tutorial 2 eXtensible Markup Language (XML)](https://reader035.fdocuments.us/reader035/viewer/2022062422/56649e7e5503460f94b81dc9/html5/thumbnails/13.jpg)
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.
![Page 14: Adding Hypertext Links to a Web Page Tutorial 2 eXtensible Markup Language (XML)](https://reader035.fdocuments.us/reader035/viewer/2022062422/56649e7e5503460f94b81dc9/html5/thumbnails/14.jpg)
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.
![Page 15: Adding Hypertext Links to a Web Page Tutorial 2 eXtensible Markup Language (XML)](https://reader035.fdocuments.us/reader035/viewer/2022062422/56649e7e5503460f94b81dc9/html5/thumbnails/15.jpg)
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
![Page 16: Adding Hypertext Links to a Web Page Tutorial 2 eXtensible Markup Language (XML)](https://reader035.fdocuments.us/reader035/viewer/2022062422/56649e7e5503460f94b81dc9/html5/thumbnails/16.jpg)