html b oot c amp chapter 6 links and webs kirkwood continuing education © copyright 2015, fred...
Post on 25-Dec-2015
213 Views
Preview:
TRANSCRIPT
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>
top related