chapter 2 - blog of nguyen nhu hoa file14 creating a hypertext link absolute path and relative path...
TRANSCRIPT
2
Overview
� Web site structures
� Creating a hypertext link
� Link to the other web page
� In the current web site
� In the other web site
� Link to a location in the current web page
� Link to FTP server
� Link to send an email
� Using a tag to make a hypertext link
� href attributes and URLs
� Using a image as a hypertext link
� target and title attributes
� base tag and meta tag
3
Exploring Web site structures
� Web site’s structure indicates how all the pages in this site are linked together� Using a storyboard to describe
� There are variety of structures� Linear
� Hierarchical
� Mixed
� The Home page is usually the first page � The home page must containt the links to other pages in the site
4
Exploring Web site structures
� A Well-designed structure ensures users to
able to navigate the site without getting lost
important information
5
Linear Structures
� Features:
� Clearly defined order of pages
� Move forward and back through the pages
7
Hierarchical Structures
� Pages are arranged in a hierarchy from the general down to the specific
� Users can move up and down the tree
9
The Structure of tuoitre.vn
Nhịp sống trẻThế giới
Home
Giáo dục
Bài 1 Bài 2 Bài 3
Nhịp sống trẻThế giới Giáo dụcHome
12
Creating a hypertext link
� <a href=“reference” > content </a>
� The reference value can be :
� A page on the www
� A local file
� An email address
� A network server
� Content: is a hypertext link, where the user
clicks with a mouse
� How to write the effective content ?
13
Creating a hypertext link
Absolute path and Relative path
� Absolute path :
/folder1/folder2/folder3/file
� Folder1 is the topmost folder in the computer’s folder tree
� Start with /
� Relative path :
folder1/folder2/folder3/file� Folder1 can be :
� subfolder of the current folder
� .. (to reference the father folder of the current document )
14
Creating a hypertext link
Absolute path and Relative path
� You should almost always use relative paths in your links
� Ex.� A Link in Index.htm to tips1.htm
<a href=“pages/tips/tips1.htm”> link_to_tips1 </a>
� A Link in tips1.htm to Index.htm
<a href=“../../index.htm”> link_to_index </a>
� Using absolute path
<a href=“file:///D:/camshots/pages/tips/tips1.htm”> link_to_tips1 </a>
16
Linking to Locations within Documents
� Include the following steps:
� Mark the location by a name, using id attribute
<h2 id=“A” > A </h2>
� Create a link to that location, using
<a href=“#A”> A </a>
� Ex. in glossary.htm file
� Early browser versions support using name
attribute instead of id attribute
� Using both of them
<h2 id=“A” name=“A”> A </h2>
17
Creating links between Documents
� Create a link to another file
<a href=“reference” > content </a>
� Create a link to a specific location in another file
<a href=“reference#id” > content </a>
� Create a link to a specific location in current file
<a href=“#id” > content </a>
� Ex. Home.htm file
19
Using a image maps to link several
locations
� HTML allows to divide an image into different
zones (hotspots) , each linked to a different
destination.
home.htm tips.htm glossary.htm
image
20
Creating a client-side Image Map
and appling it
1. Defining an client-side image map<map id=“map” name=“map”>
hotspots
</map>
2. Defining Hotspots<area shape=“shape” coords=“coordinates”href=“reference” alt=“text” />
3. Appling an image map to an image, add the usermap attribute<img src=“file” alt=“text” usermap=“#map” />
21
Creating a client-side Image Map
and appling it
<area shape=“poly” coords=“30,142,76,80,110,142” />
<area shape=“rect” coords=“240, 110, 402, 145” href= “glossary.htm” />
<area shape=“circle” coords=“82,78,80” href==“home.htm” />
22
Creating a client-side Image Map
and appling it
<div>
<img src=“camshots.jpg” usemap=“#logomap” />
<map id=“logomap” name=“logomap”>
<area shape=“circle” coords=“82,78,80” href=“home.htm” />
<area shape=“rect” coords=“168,110,225,145” href=“tips.htm” />
<area shape=“rect” coords=“240, 110, 402, 145”href=“glossary.htm” />
</map>
</div>
Image map
hotspots
Map element
name or id
23
Linking to Resources on the Internet
� What is URL ?
� Uniform Resource Locator
� URL specifies the precise location of a resource on the Internet
schema:location
http://tuoitre.vn/Giao-duc/Index.html
https://online.acb.com.vn/index.jsp
ftp://ftp.ispace.vn
file:///E:/tainguyen/cntt/laptrinhC/bai1.htm
telnet://locis.loc.gov
mailto:[email protected]?subject=test&body=hello
24
Linking to Resources on the Internet
� Schema :
� indicates the type of resource
� the name of the schema is taken from the protocol
used to access the resource
http, https, ftp, file, mailto, news, telnet, …
25
Linking to Resources on the Internet
The URL for a Web page
� Common form
http://server/path/filename#id
http://www.tuoitre.vn/Giao-duc/Index.html
� Domain name � Is the server name portion of the URL
http://www.tuoitre.vn/Giao-duc/Index.html
� Contains a hierarchy of names
� ISP manages to register the domain name
26
Linking to Resources on the Internet
The URL for a Web page
Topmost level
Name of the
individual or
organization
The name of
the stored device or
www
The name be
assigned
by owner’s the web
site
com, gov, edu, vn , net, ….
google, chinhphu, hui, Tuoitre, …
video.google.com maps.google.com mail.google.com
27
Linking to Resources on the Internet
Linking to FTP Servers
� It is a method of storing and sharing files on
the Internet by using FTP servers.
ftp://server/path
ftp://ftp.microsoft.com
28
Linking to Resources on the Internet
Linking to Local File
� file://server/path/filename
� file:///E:/Tai_nguyen/HOA_WEB/VD_bai_1/vidu1.html
29
Linking to Resources on the Internet
Linking to an Email Address
mailto:address
� mailto:[email protected]
� mailto:[email protected]?subject=li
chgd&body=xem%20file%20dinh%20kem
30
Hypertext Link Attributes
� Opening a Secondary Window or Tab� Using target attribute
<a href=“url” target=“window-name”>content </a>
� window-name are
� Any name
� _blank
� _self
31
Hypertext Link Attributes
� Creating a tooltip
� Using title attribute
<a href=“url” title=“text”>content </a>
32
The Base element
� Set the Default Location of Relative paths
� <base href=“path” />
� The base element is useful when a single
document is moved to a new folder
� Opening a Secondary Window or Tab
� <base target=“windowname” />
33
The meta element
� Add information and commands to the HTTP communication stream between the server and the browser
� Automatically refresh the Web page every 60 second
<meta http-equiv=“refresh” content=“60” />� Automatically redirect to the new site after 5 second
<meta http-equiv=“refresh”content=“5;url=“tuoitre.vn” />
� Specify the character set used by the document
<meta http-equiv=“content-type”content=“text/html;charset=“UTF-8” />
Tham khảo tag-meta