Upload
benjamin-wilkinson
View
227
Download
1
Embed Size (px)
Citation preview
XP
1
HTML
Tutorial 2: Developing a Basic Web Site
XP
2
Tutorial Objectives
Create hypertext links between elements within a Web page
Create hypertext links between Web pages
Review basic Web page structures
Create hypertext links to Web pages on the Internet
Distinguish between and be able to use absolute and relative pathnames
Create hypertext links to various Internet resources
XP
3
Creating a Hypertext Document
Hypertext documents contain hypertext links, items that you can select to view another topic or document, often called the destination of the link.
These links can point to:
– another section
– the same document
– a different document
– a different Web page
– a variety of other Web objects
The browser mayonly show a
portion of thepage. The user
must scroll downto see the rest of
the page.
Place links at thetop of the page
to make it easierfor the user tonavigate to a
particular section.
Add an id nameto an element:<h2
id=“classes”>Chemistry Classes</h2>
Link to anelement with an id:
<a href=“#classes”>Classes</a>
Place links at thetop of the page
to make it easierfor the user tonavigate to a
particular section.
Define ananchor element:<h2>
<a name=“classes”>Chemistry Classes</a></h2>
Link to an anchorelement:
<a href=“#classes”>Classes</a>
Linear Structures: each page is linked to the next & to previous page, in an ordered chain of pages
In this structure you can jump only from one page to the next or previous page
Link to previous page
Link to next page
first link jumps to previous page
second link jumps back to beginning
third page has three links
third link jumps to next page
Augmented Linear Structure include a link in each page that jumps directly backto the first page, while keeping the links to move to
the next and previous pages
Hierarchical Structure It starts with a general topic that includes links to more specific topics. Each specific topic includes links to yet more specialized topics, and so on
Combination of Linear and Hierarchical Structures
information about the play
the scenes
each level is linear
information about the acts
over
all s
truc
ture
is h
i era
rchi
cal
XP
11
Linking to a Document
To create a link to a document, use the same <a> tag with the href attribute i.e. <a href=“contact.htm”>Contact me</a>.
In order for the browser to be able to locate and open contact.htm, it must be in the same folder as the document containing the link.
XP
12
Linking to a Section of a Document
To navigate to a specific location elsewhere in a document, rather than the top, you can set anchors or ids and link to an anchor you create within the document.
<a href=“home.htm#interests”> View my interests </a> the entire text, “View my interests,” is linked to the
Interests section in the home.htm file, via the anchor name “interests”
the pound symbol (#) distinguishes the filename from the anchor name
XP
13
Linking to Documents in Other Folders
Browsers assume that if no folder information is given, the file is in the same folder as the current document.
When referencing a file located in a different folder than the link tag, you must include the location, or path, for the file.
HTML supports two kinds of paths: absolute paths and relative paths.
XP
14
Absolute Pathnames
An absolute pathname provides a precise location for a file.
Absolute pathnames begin with a slash (/) and are followed by a sequence of folders beginning with the highest level folder and proceeding to the folder that contains the file. Each folder is separated by a slash. For example, /tutorial.02/case/parks.htm
HTML also requires you to include the drive letter followed by a vertical bar (|), i.e. /C|/tutorial.02/case/parks.htm.
Folder Tree
Five HTML files are located in four different folders. The top most folder is the tutorial.02 folder. Within the tutorial.02 folder are the tutorial and case1 folders, and within the case1 folder is the extra folder.
XP
17
Relative Pathnames
A relative path specifies the location for a file in relation to the folder containing the current Web document.
Unlike absolute pathnames, a relative pathname does not begin with a slash.
To reference a file in a folder directly above the current folder in the folder hierarchy, relative pathnames use two periods (..) i.e. ../tutorial/chem.htm.
XP
18
Relative Pathnames Continued
Relative pathnames make your hypertext links portable.
Unlike absolute pathnames, If you move your files to a different computer or server, the hypertext links will stay intact.
If absolute pathnames are used, each link has to be revised. This can be a very tedious process.
Assuming the current folder is case1
The relative path to rock.htm is:
The relative path to parks.htm is:
The relative path to index.htm is:
The relative path to chem.htm is:
rock.htm
../index.htm
extra/parks.htm
../tutorial/chem.htm
XP
20
Linking to Documents on the Internet
A URL specifies a precise location on the Web for a file. You can find the URL of a Web page in the Location or
Address box of your browser’s document window. Once you know a document’s URL, you can create a
link to it by adding the URL to the <a> tag along with the href attribute in your text file i.e. <a href=“ http://www.mwu.edu/course/info.html”> Course Information</a>
XP
21
Displaying Linked Documents in a New Window
By default, each Web page you open is displayed in the main browser window, replacing the one you were viewing last.
To force a document to appear in a new window, you would use the target attribute in the href tag:<a href=“url” target=“new_window”>Hypertext</a>– new_window is a name assigned to the new
browser window
XP
22
Linking to File Transfer Protocol (FTP) Servers
You can create links to other Internet resources, such as FTP servers.
FTP servers can store files that Internet users can download, or transfer, to their computers
URLs for FTP servers follow the same format as those for Web pages, except ftp is used:<a href=“ftp://ftp.microsoft.com”> Microsoft FTP server</a>
XP
23
Linking to E-mail
You can identify e-mail addresses as hypertext links. When a user clicks the e-mail address, the browser starts a mail program and automatically inserts the e-mail address into the “To” field of the outgoing message
The URL for an e-mail address is mailto:e-mail_address<a href=“mailto:[email protected]”> CY Lin</a>