HTML B OOT C AMP Chapter 6 Links and Webs Kirkwood Continuing Education © Copyright 2015, Fred McClurg All Rights Reserved

tag Description: The anchor tag links to other documents and to anchors with a document. Syntax: Clickable Link Text 2

tag “href” attribute Description: The href attribute of the anchor tag specifies the URL of the hypertext link. Example: Color Scheme Designer 3 Chapter 06 > Hypertext Links

Linking via an image Description: An image or an icon can serve as a clickable link. Example: <img src="images/visibone.png" alt="Visibone Lab" border="0" /> Chapter 06 > Linking Images 4

Linking to named anchors Description: A link can jump (scroll) to an anchor location within the same or external document. The Link (clickable): Chapter One The Anchor (target location): Chapter One (not HTML5) or Chapter One Chapter 06 > Linking Named Anchors 5

Link Opening New Tab Description: A link can open a new tab each time it is clicked. Example: <a href=" wiki/Mayflower_compact" target="_blank"> Mayflower Compact Chapter 06 > Link Opening New Tab 6

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=" /George_Washington%27s_Farewell_Ad dress" target="wiki">George Washington's Farewell Address Chapter 06 > Link Same Tab 7

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 concise 3.Link should be two or more words 4.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) 8

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&k ey2=value2 protocol://server.domain.com: port/dir/file#fragment 9

URL Personal Directory Description: If the document path begins with the tilde character (~) this references a personal home account. Syntax: protocol://server.domain.co m:port/~account/dir/file 10

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.php index.html index.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. 11

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. 12

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: %21 13

Encoding Unsafe Characters Description: Unsafe characters can be encoded using the hexadecimal equivalent. See page 161. At sign %40 < Less than sign %3C > Greater than sign %3E " Double Quotation %22 Space %20 14

URL Encoding Online Description: There are several sites online that perform URL encoding and decoding. Meyer Web URL Decoder/Encoder: s/dencoder/ URL Encode and Decode Tool: decode.com/ 15

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: th/file.html Example: 16

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. 17

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: 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. 18

javascript URL Description: Allows a user to call a JavaScript function. Example: javascript:alert('Hello World'); 19

mailto URL Description: The mailto protocol is a convenient way, to specify and edit an outgoing message via your default client. Example: 20

mailto query string parameters Description: The mailto protocol can specify a query string that pre- populates several mail header fields. Example: body=Dear%20Webmaster%3A%0A 21 Chapter 06 > Linking Addresses

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: e.html 22

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 23

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" />... 24

Image Map “rect” Description: Rectangular region defined within an image map. Example: <area shape="rect" coords="150,200,450,400" href="javascript:alert('rect');" title="rect" /> 25

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: <area shape="poly" coords="300,100,500,500,100,500" href="javascript:alert('poly');" title="poly" /> 26

Image Map “circle” Description: A circular region can be defined within an image map. Example: <area shape="circle" coords="300,300,200" href="javascript:alert('circle');" title="circle" /> 27

Image Map “nohref” Attribute Description: A region that no action is taken even when user selects it. Example: <area shape="circle" coords="300,300,50" nohref title="nohref" /> 28

Image Map “default” Description: The entire image can be specified as a region within an image map. This functions as a fallback region. Example: <area shape="default" href="javascript:alert('default');" title="default" /> 29 Chapter 06 > Image Map

keywords Tag Description: Provides additional information about the document. Syntax: <meta name="keywords" content="quote, quotes, quotation, quotations, saying, sayings, proverb, proverbs, adage, aphorism, axiom, dictum, motto, maxim, apophthegm, epithet, platitude, precept, rule" /> Note: Due to abuse, google may no longer be using this field to index pages. 30

description Tag Description: Provides additional information about the document. Syntax: <meta name="description" content="Famous quotes by famous folks" /> 31

author Tag Description: Provides additional information about the document. Syntax: <meta name="author" content="Fred McClurg" /> 32

http-equiv Tag Description: Redirect the page to another URL Syntax: <meta http-equiv="refresh" content="5; url= /> Redirecting page in 5 seconds. 33