New Perspectives on Creating Web Pages with HTMLteachers.dadeschools.net/zhernandez/PDF PP...
Transcript of New Perspectives on Creating Web Pages with HTMLteachers.dadeschools.net/zhernandez/PDF PP...
![Page 1: New Perspectives on Creating Web Pages with HTMLteachers.dadeschools.net/zhernandez/PDF PP Presentations/New... · 10 XP Creating Links To create a link to an anchor, use the same](https://reader036.fdocuments.net/reader036/viewer/2022071023/5fd76d2c2300156ad0653946/html5/thumbnails/1.jpg)
1
XP
New Perspectives
on Creating Web
Pages with HTML
Adding Hypertext Links to a Web Page
![Page 2: New Perspectives on Creating Web Pages with HTMLteachers.dadeschools.net/zhernandez/PDF PP Presentations/New... · 10 XP Creating Links To create a link to an anchor, use the same](https://reader036.fdocuments.net/reader036/viewer/2022071023/5fd76d2c2300156ad0653946/html5/thumbnails/2.jpg)
2
XP
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, including FTP servers and newsgroups
![Page 3: New Perspectives on Creating Web Pages with HTMLteachers.dadeschools.net/zhernandez/PDF PP Presentations/New... · 10 XP Creating Links To create a link to an anchor, use the same](https://reader036.fdocuments.net/reader036/viewer/2022071023/5fd76d2c2300156ad0653946/html5/thumbnails/3.jpg)
3
XP
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 on the same document
� to a different document
� to a different Web page
� to a variety of other Web objects
![Page 4: New Perspectives on Creating Web Pages with HTMLteachers.dadeschools.net/zhernandez/PDF PP Presentations/New... · 10 XP Creating Links To create a link to an anchor, use the same](https://reader036.fdocuments.net/reader036/viewer/2022071023/5fd76d2c2300156ad0653946/html5/thumbnails/4.jpg)
4
XP
Opening A Web Page
This figure shows that a browser may only show a portion of the web page. The user must scroll down to see the rest of the web page.
vertical scroll bar
horizontal scroll
bar can also be
shown
![Page 5: New Perspectives on Creating Web Pages with HTMLteachers.dadeschools.net/zhernandez/PDF PP Presentations/New... · 10 XP Creating Links To create a link to an anchor, use the same](https://reader036.fdocuments.net/reader036/viewer/2022071023/5fd76d2c2300156ad0653946/html5/thumbnails/5.jpg)
5
XP
Adding Hypertext Links
You can place hypertext links at the top of a web page to make it easier for the user to navigate to a particular section of the document instead of scrolling.
![Page 6: New Perspectives on Creating Web Pages with HTMLteachers.dadeschools.net/zhernandez/PDF PP Presentations/New... · 10 XP Creating Links To create a link to an anchor, use the same](https://reader036.fdocuments.net/reader036/viewer/2022071023/5fd76d2c2300156ad0653946/html5/thumbnails/6.jpg)
6
XPCreating Anchors
� The <a> tag creates an anchor, text that is specially
marked so that you can link to it from other points in a
document.
� Text that is anchored is the destination of a link; it is not
the text you click on.
� Each anchor has its own anchor name, using the “name” attribute i.e. <a name=“cc”>Classes</a>.
� An anchor doesn’t have to be text. You can mark an inline image as an anchor.
� Adding an anchor does not change your document’s appearance in any way. It merely creates locations in
your Web page that become destinations of links.
![Page 7: New Perspectives on Creating Web Pages with HTMLteachers.dadeschools.net/zhernandez/PDF PP Presentations/New... · 10 XP Creating Links To create a link to an anchor, use the same](https://reader036.fdocuments.net/reader036/viewer/2022071023/5fd76d2c2300156ad0653946/html5/thumbnails/7.jpg)
7
XP
Creating Anchors
<HTML>
<TITLE>Text</TITLE><BODY>
<A HREF=“#POWERFUL”>Powerful Lines</A><P>Text</P><P>Text</P>
<P>Text</P>
<A NAME=“POWERFUL”>Powerful Lines</A></BODY>
</HTML>
� Internal hyperlinks required two steps:
� Enter an anchor tag using a
# before the name of the target location.
� Define where the link will take you (the target location) with the NAME attribute.
![Page 8: New Perspectives on Creating Web Pages with HTMLteachers.dadeschools.net/zhernandez/PDF PP Presentations/New... · 10 XP Creating Links To create a link to an anchor, use the same](https://reader036.fdocuments.net/reader036/viewer/2022071023/5fd76d2c2300156ad0653946/html5/thumbnails/8.jpg)
8
XP
Hyperlinks Inside Your Document
� Internal hyperlinks jump from an index to content below, in another spot on a Web page.
� Internal hyperlink
� Jumps to content below
![Page 9: New Perspectives on Creating Web Pages with HTMLteachers.dadeschools.net/zhernandez/PDF PP Presentations/New... · 10 XP Creating Links To create a link to an anchor, use the same](https://reader036.fdocuments.net/reader036/viewer/2022071023/5fd76d2c2300156ad0653946/html5/thumbnails/9.jpg)
9
XP
How an Anchor Works
anchor
hypertext links
When the user clicks
one of the hypertext
links, the link will go
directly to that section
(anchor, which is the
destination of the link)
within the web page.
![Page 10: New Perspectives on Creating Web Pages with HTMLteachers.dadeschools.net/zhernandez/PDF PP Presentations/New... · 10 XP Creating Links To create a link to an anchor, use the same](https://reader036.fdocuments.net/reader036/viewer/2022071023/5fd76d2c2300156ad0653946/html5/thumbnails/10.jpg)
10
XP
Creating Links
� To create a link to an anchor, use the same <a> tag you used to create the anchor.
� The <a> tags used to create links are sometimes called link tags.
� Use the href attribute, which is short for Hypertext Reference, to indicate the location to jump to.
� href can refer to an anchor that you place in the document or to a different Web page or a resource anywhere on the Internet
� it is important to note that the href attribute is case sensitive
� You link to an anchor using the anchor name preceded by a pound (#) symbol i.e. <a href=“#gra”>Grading</a>.
![Page 11: New Perspectives on Creating Web Pages with HTMLteachers.dadeschools.net/zhernandez/PDF PP Presentations/New... · 10 XP Creating Links To create a link to an anchor, use the same](https://reader036.fdocuments.net/reader036/viewer/2022071023/5fd76d2c2300156ad0653946/html5/thumbnails/11.jpg)
11
XP
Creating Links Continued
After you create the anchors that serve as destinations for your links, you need to create the links themselves.
The <a> tag
you use to create
the anchor and
the href
attribute to
indicate the
location to jump
to.
You should be careful to make each anchor name unique within a document.
![Page 12: New Perspectives on Creating Web Pages with HTMLteachers.dadeschools.net/zhernandez/PDF PP Presentations/New... · 10 XP Creating Links To create a link to an anchor, use the same](https://reader036.fdocuments.net/reader036/viewer/2022071023/5fd76d2c2300156ad0653946/html5/thumbnails/12.jpg)
12
XP
Text Links in the Browser
Text formatted as links
If the headings do not appear as text links, check your code to make sure that you are using the <a> and </a>
tags around the appropriate text, the href attribute
within the tag, and the quotes and # symbols.
![Page 13: New Perspectives on Creating Web Pages with HTMLteachers.dadeschools.net/zhernandez/PDF PP Presentations/New... · 10 XP Creating Links To create a link to an anchor, use the same](https://reader036.fdocuments.net/reader036/viewer/2022071023/5fd76d2c2300156ad0653946/html5/thumbnails/13.jpg)
13
XP
Web Page Structures
� Storyboarding your Web pages before you create links helps you determine which structure works best for the type of information you’re presenting.
� You want to ensure that readers can navigate easily from page to page without getting lost.
� You’ll encounter several Web structures as you navigate the Web.
� Examining some of these structures can help you decide how to design your own system of Web pages.
![Page 14: New Perspectives on Creating Web Pages with HTMLteachers.dadeschools.net/zhernandez/PDF PP Presentations/New... · 10 XP Creating Links To create a link to an anchor, use the same](https://reader036.fdocuments.net/reader036/viewer/2022071023/5fd76d2c2300156ad0653946/html5/thumbnails/14.jpg)
14
XP
Linear Structures
In this structure
you can jump
only from one
page to the next
or previous page
Link to
previous page
Link to next page
This figure shows one common Web page structure, the linear structure, in which
each page is linked to the next and to previous page, in an ordered chain of pages.
![Page 15: New Perspectives on Creating Web Pages with HTMLteachers.dadeschools.net/zhernandez/PDF PP Presentations/New... · 10 XP Creating Links To create a link to an anchor, use the same](https://reader036.fdocuments.net/reader036/viewer/2022071023/5fd76d2c2300156ad0653946/html5/thumbnails/15.jpg)
15
XP
Augmented Linear Structure
This figure shows an augmented linear structure, in which you include a link in each
page that jumps directly back to the first page, while keeping the links that allow you
to move to the next and previous pages.
first link jumps to
previous page
second link jumps back to beginning
third page has three links
third link
jumps to next
page
![Page 16: New Perspectives on Creating Web Pages with HTMLteachers.dadeschools.net/zhernandez/PDF PP Presentations/New... · 10 XP Creating Links To create a link to an anchor, use the same](https://reader036.fdocuments.net/reader036/viewer/2022071023/5fd76d2c2300156ad0653946/html5/thumbnails/16.jpg)
16
XP
Hierarchical Structure
This figure shows the
hierarchical structure,
which 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.
In a hierarchical
structure, users can
move easily from
general to specific and
back, but not from
specific to specific.
![Page 17: New Perspectives on Creating Web Pages with HTMLteachers.dadeschools.net/zhernandez/PDF PP Presentations/New... · 10 XP Creating Links To create a link to an anchor, use the same](https://reader036.fdocuments.net/reader036/viewer/2022071023/5fd76d2c2300156ad0653946/html5/thumbnails/17.jpg)
17
XPHierarchical Structure on
AltaVista Web Page
As with the linear
structure, including a link
to the top of the structure
on each page gives users
an easy path back to the
beginning.
Subject catalogs such as
the AltaVista directory of
Web pages often use this
structure. This figure
shows this site, located at
http://www.altavista.com.
![Page 18: New Perspectives on Creating Web Pages with HTMLteachers.dadeschools.net/zhernandez/PDF PP Presentations/New... · 10 XP Creating Links To create a link to an anchor, use the same](https://reader036.fdocuments.net/reader036/viewer/2022071023/5fd76d2c2300156ad0653946/html5/thumbnails/18.jpg)
18
XPCombination of Linear and Hierarchical
Structures
This figure shows a hierarchical structure in which each level of
pages is related in a linear structure.
information about the play
the scenes
each level
is linear
information
about the
acts
ove r
all
str
uc t
ure
is
hi e
r ar c
hic
al
![Page 19: New Perspectives on Creating Web Pages with HTMLteachers.dadeschools.net/zhernandez/PDF PP Presentations/New... · 10 XP Creating Links To create a link to an anchor, use the same](https://reader036.fdocuments.net/reader036/viewer/2022071023/5fd76d2c2300156ad0653946/html5/thumbnails/19.jpg)
19
XP
Web Structures Continued
� A little foresight can go a long way toward making your Web pages easier to use.
� The best time to organize a structure is when you first start creating pages, when those pages are small in number and more easily managed.
� If you’re not careful, your structure can become confusing and unmanageable for the user.
![Page 20: New Perspectives on Creating Web Pages with HTMLteachers.dadeschools.net/zhernandez/PDF PP Presentations/New... · 10 XP Creating Links To create a link to an anchor, use the same](https://reader036.fdocuments.net/reader036/viewer/2022071023/5fd76d2c2300156ad0653946/html5/thumbnails/20.jpg)
20
XPMultipage Document with
No Coherent Structure
This structure is
confusing, and it makes it
difficult for readers to
grasp the contents of the
overall Web site.
Moreover, a user who
enters this structure at a
certain page might not be
aware of the presence of
the other pages.
![Page 21: New Perspectives on Creating Web Pages with HTMLteachers.dadeschools.net/zhernandez/PDF PP Presentations/New... · 10 XP Creating Links To create a link to an anchor, use the same](https://reader036.fdocuments.net/reader036/viewer/2022071023/5fd76d2c2300156ad0653946/html5/thumbnails/21.jpg)
21
XP
Creating Links Among Documents
links to the
conttxt.htm
document,
which contains
contact
information
links to the
linktxt.htm
document, which
contains links to
various Chemistry
Web sites.
Unlike creating hypertext
links between elements on
the same page, this process
does not require you to set
an anchor in a file to link
to it; the filename serves as
the anchor or destination
point.
the chem.htm
document, which is
the document
containing the links.
![Page 22: New Perspectives on Creating Web Pages with HTMLteachers.dadeschools.net/zhernandez/PDF PP Presentations/New... · 10 XP Creating Links To create a link to an anchor, use the same](https://reader036.fdocuments.net/reader036/viewer/2022071023/5fd76d2c2300156ad0653946/html5/thumbnails/22.jpg)
22
XP
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.
![Page 23: New Perspectives on Creating Web Pages with HTMLteachers.dadeschools.net/zhernandez/PDF PP Presentations/New... · 10 XP Creating Links To create a link to an anchor, use the same](https://reader036.fdocuments.net/reader036/viewer/2022071023/5fd76d2c2300156ad0653946/html5/thumbnails/23.jpg)
23
XPHTML Code that
Links to Other Documents
<a> tags to
point to other
documents
![Page 24: New Perspectives on Creating Web Pages with HTMLteachers.dadeschools.net/zhernandez/PDF PP Presentations/New... · 10 XP Creating Links To create a link to an anchor, use the same](https://reader036.fdocuments.net/reader036/viewer/2022071023/5fd76d2c2300156ad0653946/html5/thumbnails/24.jpg)
24
XPBrowser Displaying Links
to Other Documents
links to the Contact and Links page
![Page 25: New Perspectives on Creating Web Pages with HTMLteachers.dadeschools.net/zhernandez/PDF PP Presentations/New... · 10 XP Creating Links To create a link to an anchor, use the same](https://reader036.fdocuments.net/reader036/viewer/2022071023/5fd76d2c2300156ad0653946/html5/thumbnails/25.jpg)
25
XP
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 and link to an anchor you create within the document.
� for example, to create a link to a section in the Web page home.htm marked with an anchor name of “interests,” you create an anchor in home.htm in the section on Interests, and then enter the following HTML code in the current 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 (#) in this tag distinguishes the filename fromthe anchor name
![Page 26: New Perspectives on Creating Web Pages with HTMLteachers.dadeschools.net/zhernandez/PDF PP Presentations/New... · 10 XP Creating Links To create a link to an anchor, use the same](https://reader036.fdocuments.net/reader036/viewer/2022071023/5fd76d2c2300156ad0653946/html5/thumbnails/26.jpg)
26
XPAdding Links to Specific
Locations in a Page
The pound symbol
(#) in these tags
(shown in red)
distinguishes the
filename from the
anchor name.
![Page 27: New Perspectives on Creating Web Pages with HTMLteachers.dadeschools.net/zhernandez/PDF PP Presentations/New... · 10 XP Creating Links To create a link to an anchor, use the same](https://reader036.fdocuments.net/reader036/viewer/2022071023/5fd76d2c2300156ad0653946/html5/thumbnails/27.jpg)
27
XPLinks in the Chemistry Page that
Point to Anchors in the Links Page
links
![Page 28: New Perspectives on Creating Web Pages with HTMLteachers.dadeschools.net/zhernandez/PDF PP Presentations/New... · 10 XP Creating Links To create a link to an anchor, use the same](https://reader036.fdocuments.net/reader036/viewer/2022071023/5fd76d2c2300156ad0653946/html5/thumbnails/28.jpg)
28
XPLinking 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 mustinclude the location, or path, for the file.
� HTML supports two kinds of paths: absolute paths and relative paths.
![Page 29: New Perspectives on Creating Web Pages with HTMLteachers.dadeschools.net/zhernandez/PDF PP Presentations/New... · 10 XP Creating Links To create a link to an anchor, use the same](https://reader036.fdocuments.net/reader036/viewer/2022071023/5fd76d2c2300156ad0653946/html5/thumbnails/29.jpg)
29
XP
Absolute Pathnames
� An absolute pathname provides a precise location for a file.
� With HTML, 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.
� After you type the name of the folder or folders that contains the file, type a final slash and then the filename itself i.e. /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.
![Page 30: New Perspectives on Creating Web Pages with HTMLteachers.dadeschools.net/zhernandez/PDF PP Presentations/New... · 10 XP Creating Links To create a link to an anchor, use the same](https://reader036.fdocuments.net/reader036/viewer/2022071023/5fd76d2c2300156ad0653946/html5/thumbnails/30.jpg)
30
XP
Folder Tree
This figure shows five
HTML files that 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.
![Page 31: New Perspectives on Creating Web Pages with HTMLteachers.dadeschools.net/zhernandez/PDF PP Presentations/New... · 10 XP Creating Links To create a link to an anchor, use the same](https://reader036.fdocuments.net/reader036/viewer/2022071023/5fd76d2c2300156ad0653946/html5/thumbnails/31.jpg)
31
XP
Absolute Pathname
This figure shows absolute pathnames for five HTML files.
![Page 32: New Perspectives on Creating Web Pages with HTMLteachers.dadeschools.net/zhernandez/PDF PP Presentations/New... · 10 XP Creating Links To create a link to an anchor, use the same](https://reader036.fdocuments.net/reader036/viewer/2022071023/5fd76d2c2300156ad0653946/html5/thumbnails/32.jpg)
32
XP
Relative Pathnames
� A relative path specifies the location for a file in relation to the folder containing the current Web document.
� As with absolute pathnames, folder names are separated
by slashes.
� 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.
![Page 33: New Perspectives on Creating Web Pages with HTMLteachers.dadeschools.net/zhernandez/PDF PP Presentations/New... · 10 XP Creating Links To create a link to an anchor, use the same](https://reader036.fdocuments.net/reader036/viewer/2022071023/5fd76d2c2300156ad0653946/html5/thumbnails/33.jpg)
33
XP
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.
![Page 34: New Perspectives on Creating Web Pages with HTMLteachers.dadeschools.net/zhernandez/PDF PP Presentations/New... · 10 XP Creating Links To create a link to an anchor, use the same](https://reader036.fdocuments.net/reader036/viewer/2022071023/5fd76d2c2300156ad0653946/html5/thumbnails/34.jpg)
34
XP
Relative Pathnames
This figure shows the relative pathnames and their interpretations
for HMTL files and how they would be displayed.
![Page 35: New Perspectives on Creating Web Pages with HTMLteachers.dadeschools.net/zhernandez/PDF PP Presentations/New... · 10 XP Creating Links To create a link to an anchor, use the same](https://reader036.fdocuments.net/reader036/viewer/2022071023/5fd76d2c2300156ad0653946/html5/thumbnails/35.jpg)
35
XP
Linking to Documents on the Internet
� To create a hypertext link to a document on the Internet, you need to know its URL.
� A URL, or Uniform Resource Locator, 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>.
![Page 36: New Perspectives on Creating Web Pages with HTMLteachers.dadeschools.net/zhernandez/PDF PP Presentations/New... · 10 XP Creating Links To create a link to an anchor, use the same](https://reader036.fdocuments.net/reader036/viewer/2022071023/5fd76d2c2300156ad0653946/html5/thumbnails/36.jpg)
36
XP
Uniform Resource Locator (URL)
� Each URL follows the same format.
� The first portion of the URL identifies the
communication protocol, which is a set of rules that governs how information is exchanged.
� Web pages use the communication protocol HTTP,
short for Hypertext Transfer Protocol, so all Web page URLs begin with the letters “http”.
� Following the communication protocol, there is typically a separator, such as a colon and two slashes
(://) i.e. http://www.mwu.edu.
![Page 37: New Perspectives on Creating Web Pages with HTMLteachers.dadeschools.net/zhernandez/PDF PP Presentations/New... · 10 XP Creating Links To create a link to an anchor, use the same](https://reader036.fdocuments.net/reader036/viewer/2022071023/5fd76d2c2300156ad0653946/html5/thumbnails/37.jpg)
37
XPInterpreting Parts of a
Uniform Resource Locator (URL)
This figure interprets a Web page with the URL
http://www.mwu.edu/course/info.html#majors.
![Page 38: New Perspectives on Creating Web Pages with HTMLteachers.dadeschools.net/zhernandez/PDF PP Presentations/New... · 10 XP Creating Links To create a link to an anchor, use the same](https://reader036.fdocuments.net/reader036/viewer/2022071023/5fd76d2c2300156ad0653946/html5/thumbnails/38.jpg)
38
XP
Link to Another Page on the Web
As long as your
computer is
connected to the
Internet, clicking
the text within the
tag navigates you
to the document
located at the
specified URL.
Links to the College Board AP Internet page
![Page 39: New Perspectives on Creating Web Pages with HTMLteachers.dadeschools.net/zhernandez/PDF PP Presentations/New... · 10 XP Creating Links To create a link to an anchor, use the same](https://reader036.fdocuments.net/reader036/viewer/2022071023/5fd76d2c2300156ad0653946/html5/thumbnails/39.jpg)
39
XP
College Board AP Page
Chemistry page
remains open in
the original
browser window
AP page in a
separate browser
window
![Page 40: New Perspectives on Creating Web Pages with HTMLteachers.dadeschools.net/zhernandez/PDF PP Presentations/New... · 10 XP Creating Links To create a link to an anchor, use the same](https://reader036.fdocuments.net/reader036/viewer/2022071023/5fd76d2c2300156ad0653946/html5/thumbnails/40.jpg)
40
XPDisplaying 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, instead
of the main browser window, you would use the targetattribute in the href tag i.e. <a href=“url” target=“new_window”>Hypertext</a>
� url is the URL of the page, and new_window is a name assigned to the new browser window
� the value use for the target attribute is used by the browser to identify the different open windows in the
current browser session
![Page 41: New Perspectives on Creating Web Pages with HTMLteachers.dadeschools.net/zhernandez/PDF PP Presentations/New... · 10 XP Creating Links To create a link to an anchor, use the same](https://reader036.fdocuments.net/reader036/viewer/2022071023/5fd76d2c2300156ad0653946/html5/thumbnails/41.jpg)
41
XP
External Hyperlinks
� You can set up external hyperlinks to open in the same browser window by using the same value for the target
attribute.
� if you do, the first hyperlink clicked opens the new window
and displays the contents of the external file
� as subsequent external hyperlinks are clicked, they replace the contents of the already opened window, and the
contents of the main browser window remain unaffected
� If you want your external documents to be displayed in their
own browser window, you can assign a unique target value for each hyperlink, or you can assign the _blank keyword to the
target attribute i.e.
<a href=“url” target=_blank>Hypertext</a>.
![Page 42: New Perspectives on Creating Web Pages with HTMLteachers.dadeschools.net/zhernandez/PDF PP Presentations/New... · 10 XP Creating Links To create a link to an anchor, use the same](https://reader036.fdocuments.net/reader036/viewer/2022071023/5fd76d2c2300156ad0653946/html5/thumbnails/42.jpg)
42
XPLinking to File Transfer Protocol
(FTP) Servers
� You can create links to other Internet resources, such as FTP (File Transfer Protocol) servers.
� FTP servers can store files that Internet users can download, or transfer, to their computers
� FTP is the communications protocol these file servers use to transfer information
� URLs for FTP servers follow the same format as those for Web pages, except that they use the FTP protocol rather than the HTTP protocol i.e.
� <a href= ftp://ftp.microsoft.com>Microsoft FTP server</a>.
![Page 43: New Perspectives on Creating Web Pages with HTMLteachers.dadeschools.net/zhernandez/PDF PP Presentations/New... · 10 XP Creating Links To create a link to an anchor, use the same](https://reader036.fdocuments.net/reader036/viewer/2022071023/5fd76d2c2300156ad0653946/html5/thumbnails/43.jpg)
43
XP
Displaying a FTP Site
Different browsers can display the contents of an FTP site in different ways.
This figure shows what it might look like with Internet Explorer.
![Page 44: New Perspectives on Creating Web Pages with HTMLteachers.dadeschools.net/zhernandez/PDF PP Presentations/New... · 10 XP Creating Links To create a link to an anchor, use the same](https://reader036.fdocuments.net/reader036/viewer/2022071023/5fd76d2c2300156ad0653946/html5/thumbnails/44.jpg)
44
XP
Linking to Usenet News
� Usenet is a collection of discussion forums
called newsgroups that let users exchange
messages with other users on a wide variety of
topics.
� The URL for a newsgroup is news:newsgroup.
� To access the surfing newsgroup alt.surfing, you place this line in your HTML file i.e. <a href=news:alt.surfing>Go to the
surfing newsgroup</a>.
![Page 45: New Perspectives on Creating Web Pages with HTMLteachers.dadeschools.net/zhernandez/PDF PP Presentations/New... · 10 XP Creating Links To create a link to an anchor, use the same](https://reader036.fdocuments.net/reader036/viewer/2022071023/5fd76d2c2300156ad0653946/html5/thumbnails/45.jpg)
45
XP
Accessing the alt.surfing Newsgroup
When you click a
link to a newsgroup,
your computer
starts your
newsgroup software
and accesses the
newsgroup.
This figure shows
an example of the
Outlook
Newsreader
program.
![Page 46: New Perspectives on Creating Web Pages with HTMLteachers.dadeschools.net/zhernandez/PDF PP Presentations/New... · 10 XP Creating Links To create a link to an anchor, use the same](https://reader036.fdocuments.net/reader036/viewer/2022071023/5fd76d2c2300156ad0653946/html5/thumbnails/46.jpg)
46
XP
Linking to E-mail
� Many Web designers include their e-mail addresses on their Web pages, so that users who access the page can send feedback.
� 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.
� To create a link to the e-mail address [email protected], the following code would be entered
<a href=mailto:[email protected]>[email protected]</a>
![Page 48: New Perspectives on Creating Web Pages with HTMLteachers.dadeschools.net/zhernandez/PDF PP Presentations/New... · 10 XP Creating Links To create a link to an anchor, use the same](https://reader036.fdocuments.net/reader036/viewer/2022071023/5fd76d2c2300156ad0653946/html5/thumbnails/48.jpg)
48
XP
Adding an Email Link
the address
itself is in the
code for the
mailto: URL
mail message
window opens
with e-mail
address already
inserted
![Page 49: New Perspectives on Creating Web Pages with HTMLteachers.dadeschools.net/zhernandez/PDF PP Presentations/New... · 10 XP Creating Links To create a link to an anchor, use the same](https://reader036.fdocuments.net/reader036/viewer/2022071023/5fd76d2c2300156ad0653946/html5/thumbnails/49.jpg)
49
XP
Coloring Text
� You will use three separate attributes to color text :
� Use the text attribute to change color of text
� Use the hypertext link colorattribute to change color of hypertext links
� Use the visited link attributeto change color of hypertext links that have been selected
<HTML><TITLE>Text</TITLE>
<BODY TEXT=BLUE LINK=RED VLINK=GREEN>
<P>Text</P><P>Text</P>
<P>Text</P>
</BODY>
</HTML>
![Page 50: New Perspectives on Creating Web Pages with HTMLteachers.dadeschools.net/zhernandez/PDF PP Presentations/New... · 10 XP Creating Links To create a link to an anchor, use the same](https://reader036.fdocuments.net/reader036/viewer/2022071023/5fd76d2c2300156ad0653946/html5/thumbnails/50.jpg)
50
XP
Coloring Text
<HTML><TITLE>Text</TITLE>
<BODY
TEXT=BLUE
LINK=RED
VLINK=GREEN><P>Text</P><P>Text</P><P>Text</P></BODY></HTML>
![Page 51: New Perspectives on Creating Web Pages with HTMLteachers.dadeschools.net/zhernandez/PDF PP Presentations/New... · 10 XP Creating Links To create a link to an anchor, use the same](https://reader036.fdocuments.net/reader036/viewer/2022071023/5fd76d2c2300156ad0653946/html5/thumbnails/51.jpg)
51
XP
Summary
• Learned how to work with hypertext links.
• Learned how to create anchors within a Web
page.
� Created links to anchors.
• Created hyperlinks within a single
document and links to other Web pages.
• Discussed creating hyperlinks to
resources other than Web pages,
such as FTP sites, e-mail addresses
and Gopher servers.