Chapter 2 - Blog of nguyen nhu hoa file14 Creating a hypertext link Absolute path and Relative path You should almost always userelative paths in your links Ex. A Link in Index.htm

1

Chapter 2

Developing a Web Site

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

6

Linear Structures

� Features:

� Easy of return to the home page or other main 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

8

Mixed Structures

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

10

The Structure of tuoitre.vn

11

Protected Structure

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


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


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>

15

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

18

Using an inline image as a link

� <a href=“reference”> <img src=“file” alt=“text” /> </a>

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


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


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


� 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


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


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 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 Local File

� file://server/path/filename

� file:///E:/Tai_nguyen/HOA_WEB/VD_bai_1/vidu1.html

29


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