HTML BOOT CAMP

Chapter 6Links and Webs

Kirkwood Continuing Education

© Copyright 2015, Fred McClurg All Rights Reserved

2

<a> tag

Description: The anchor tag links to other documents and to anchors with a document.

Syntax:<a attributes> Clickable Link Text</a>

3

<a> tag “href” attribute

Description: The href attribute of the anchor tag specifies the URL of the hypertext link.

Example:<a href="http://colorschemedesigner.com/"> Color Scheme Designer</a>

Chapter 06 > Hypertext Links

4

Linking via an image

Description: An image or an icon can serve as a clickable link.

Example:<a href="http://www.visibone.com"> <img src="images/visibone.png" alt="Visibone Lab" border="0" /></a>

Chapter 06 > Linking Images

5

Linking to named anchors

Description: A link can jump (scroll) to an anchor location within the same or external document.

The Link (clickable):<a href="#chapter01"> Chapter One</a>

The Anchor (target location):<h3><a name="chapter01"> Chapter One (not HTML5)</a></h3> or<h3 id="chapter01"> Chapter One</h3>

Chapter 06 > Linking Named Anchors

6

Link Opening New Tab

Description: A link can open a new tab each time it is clicked.

Example:<a href="http://en.wikipedia.org/wiki/Mayflower_compact" target="_blank"> Mayflower Compact</a>

Chapter 06 > Link Opening New Tab

7

Link Opening Same Tab

Description: A link can open the same tab each time it is clicked. This is ideal for building a help system.

Example:<a href="http://en.wikipedia.org/wiki/George_Washington%27s_Farewell_Address" target="wiki">George Washington's Farewell Address</a>

Chapter 06 > Link Same Tab

8

Links Dos and Don'ts

Regarding links, here is a list of some things to consider:

1. Don't specify links like “click here”.2. Keep link content concise3. Link should be two or more words4. Never place two links immediately

adjacent to one another.5. Would the document be

understandable if the content did not have a hypertext link? (newspaper test)

9

The URL

Description: The Uniform Resource Locator (URL) is the unique address that identifies every document on the web.

Syntax:protocol://server.domain.com:port/dir/file?key1=value1&key2=value2

protocol://server.domain.com:port/dir/file#fragment

10

URL Personal Directory

Description: If the document path begins with the tilde character (~) this references a personal home account.

Syntax:protocol://server.domain.com:port/~account/dir/file

11

Directory Index

Description: The web server first looks for a certain file name when a directory is specified. This is called a “Directory Index” and is often one of the following filenames:

index.phpindex.htmlindex.htm

In addition, if there is no Directory Index, and the Options Indexes directive is enabled, the web server will return a formatted directory listing.

12

Directory Hiding

Best Practice:In order to enable Directory Hiding and prevent users from browsing your website outside of the web pages, every directory should contain a Directory Index.

Note:Users should not have to depend upon a directory listing in order to traverse a website. Users should be able to navigate to all pages and files via links within the website.

13

Unsafe File/Dir Characters

Description:There are several characters that should not be used in a file or directory name. If those characters are used, they must be encoded.

Safe Characters (recommended):A-Z, a-z, 0-9, “-”, “_”, “.”

Unsafe Characters Encoded:http://lmgtfy.com/?q=Hello+World%21

14

Encoding Unsafe Characters

Description:Unsafe characters can be encoded using the hexadecimal equivalent. See page 161.

Character Description Encoding

@ At sign %40

< Less than sign %3C

> Greater than sign %3E

" Double Quotation %22

Space %20

15

URL Encoding Online

Description: There are several sites online that perform URL encoding and decoding.

Meyer Web URL Decoder/Encoder:http://meyerweb.com/eric/tools/dencoder/

URL Encode and Decode Tool:http://www.url-encode-decode.com/

16

http/https URL

Description:The http URL formats the servers request and the server’s reply via the Hypertext Transfer Protocol (HTTP). The https uses the secure protocol of http.

Syntax:http://server.domain.com:port/path/file.html

Example:https://google.com/maps

17

file URL

Description:The file URL indicates file location on the computer (or CD) without specifying the protocol used to retrieve the file.

Syntax:file:///C:/dir/file.html

Note:The file URL may allow a local file to be rendered by the browser but is not served by the web server.

18

ftp URL

Description:The ftp URL allows a convenient method to access files on an ftp server without logging in via a command shell.

Syntax:ftp://user:password@server:port/path;type=a|b

Example:ftp://ftp.gnu.org/gnu/

Syntax:Non-authenticated access, called Anonymous FTP, uses “anonymous” or “guest” as the username. FTP servers may assume anonymous access if the username and password are omitted.

19

javascript URL

Description: Allows a user to call a JavaScript function.

Example:javascript:alert('Hello World');

20

mailto URL

Description: The mailto protocol is a convenient way, to specify and edit an outgoing e-mail message via your default e-mail client.

Example:mailto:abc@example.com, xyz@example.com

21

mailto query string parameters

Description: The mailto protocol can specify a query string that pre-populates several mail header fields.

Example:mailto:webmaster@example.com?subject=Subject%20here&cc=cc@example.com&bcc=bcc@example.com&body=Dear%20Webmaster%3A%0AChapter 06 > Linking Email Addresses

22

Absolute URLs

Description:Absolute path specifies the full pathname of a file starting at the document root directory.

File on same server:/dir/subdir/file.html

File on different server:http://google.com/dir/subdir/file.html

23

Relative URLs

Description:Relative path specifies the pathname relative to the directory of the current file.

Accessing file in current directory:aboutUs.html

Accessing file two sub-directories down:dept/hr/personnel.html

Accessing file two directories up:../../contactUs.html

24

Client Side Image Maps

Description:Regions of an image can be linked to other content. This defines clickable “hot spots” areas on images.

Example:<img src="map.png" usemap="#map" />

<map name="map"> ...</map>

25

Image Map “rect”

Description: Rectangular region defined within an image map.

Example:<map name="map">

<area shape="rect" coords="150,200,450,400" href="javascript:alert('rect');" title="rect" /></map>

26

Image Map “poly”

Description: A polygonal region defined within an image map. If the first and last coordinate pairs are not the same, the browser will add the last coordinate pair and close the polygon.

Example:<map name="map">

<area shape="poly" coords="300,100,500,500,100,500" href="javascript:alert('poly');" title="poly" /></map>

27

Image Map “circle”

Description: A circular region can be defined within an image map.

Example:<map name="map"><area shape="circle" coords="300,300,200" href="javascript:alert('circle');" title="circle" /></map>

28

Image Map “nohref” Attribute

Description: A region that no action is taken even when user selects it.

Example:<map name="map"><area shape="circle" coords="300,300,50" nohref title="nohref" /></map>

29

Image Map “default”

Description: The entire image can be specified as a region within an image map. This functions as a fallback region.

Example:<map name="map"><area shape="default" href="javascript:alert('default');" title="default" /></map> Chapter 06 > Image Map

30

<meta> keywords Tag

Description: Provides additional information about the document.

Syntax:<head>

<meta name="keywords"

content="quote, quotes, quotation, quotations, saying, sayings, proverb, proverbs, adage, aphorism, axiom, dictum, motto, maxim, apophthegm, epithet, platitude, precept, rule" />

</head>

Note: Due to abuse, google may no longer be using this field to index pages.

31

<meta> description Tag

Description: Provides additional information about the document.

Syntax:<head> <meta name="description" content="Famous quotes by famous folks" /></head>

32

<meta> author Tag

Description: Provides additional information about the document.

Syntax:<head><meta name="author" content="Fred McClurg" /></head>

33

<meta> http-equiv Tag

Description: Redirect the page to another URL

Syntax:<head>

<meta http-equiv="refresh"

content="5;

url=http://example.com/" />

</head>

<body>

Redirecting page in 5 seconds.

</body>