HTML BOOT CAMP Chapter 6 Links and Webs

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

<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> 3 Chapter 06 > Hypertext Links

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> 4 Chapter 06 > Linking Images

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="#chapter 01"> Chapter One</a> The Anchor (target location): <h 3><a name="chapter 01"> Chapter One (not HTML 5)</a></h 3> or <h 3 id="chapter 01"> Chapter One</h 3> 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="http: //en. wikipedia. org/ wiki/Mayflower_compact" target="_blank"> Mayflower Compact</a> 6 Chapter 06 > Link Opening New Tab

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

Links Dos and Don'ts Regarding links, here is a list of some things to consider: 1. 2. 3. 4. Don't specify links like “click here”. Keep link content concise Link should be two or more words 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? key 1=value 1&k ey 2=value 2 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 12 and files via links within the website.

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 13

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 %3 C > Greater than sign %3 E " 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: http: //meyerweb. com/eric/tool s/dencoder/ URL Encode and Decode Tool: http: //www. url-encodedecode. 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: http: //server. domain. com: port/ path/file. html Example: https: //google. com/maps 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: 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 18 omitted.

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

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 20

mailto query string parameters Description: The mailto protocol can specify a query string that prepopulates several mail header fields. Example: mailto: webmaster@example. com? s ubject=Subject%20 here&cc=cc@ex ample. com&bcc=bcc@example. com& body=Dear%20 Webmaster%3 A%0 A 21 Chapter 06 > Linking Email 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: http: //google. com/dir/subdir/fil e. html 22

Relative URLs Description: Relative path specifies the pathname relative to the directory of the current file. Accessing file in current directory: about. Us. html Accessing file two sub-directories down: dept/hr/personnel. html Accessing file two directories up: . . /contact. Us. 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"> <map name="map">. . . </map> 24

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

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

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, 50" nohref title="nohref"> </map> 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: <map name="map"> <area shape="default" href="javascript: alert('default'); " title="default"> </map> 29 Chapter 06 > Image Map