All of the text fields below (e.g. ) contain HTML. Use you mouse or keyboard to copy and paste the HTML into a "plain text editor" (e.g. notepad, textpad).
Save the file to your desktop as an HTML file, (e.g. file_name.html). Once they are saved, you can double click on them or use your keyboard to open them. They will automatically open in your default Web browser. When the files are open in your Web browser, you will be able to see how the HTML works in your browser.
Various Web browser types will display the HTML differently.
************************************************************************************************************
Lesson 5:
Hyperlinks in HTML Documents:
Hyperlinks:
Hyperlinks are the "hypertext" of hypertext markup language (HTML). There is a single markup tag used in all hyperlinks.
The Anchor tag:
The ANCHOR tag defines the start and/or destination of a hypertext link. An ANCHOR can link one place in your document to some other place. The other place could be in the same document, in another file, or across the Internet. The hyperlink is the single most powerful feature of HTML.
The ANCHOR tag looks like the following:
In the above example, a text link would be created in the browser that says Click Here. If the user places their mouse pointer over the text link, the pointer would turn into a hand. The hand indicates that the user can "left click" their mouse and activate the hyper link. In this case, the link would transport the user to the "home page" of the EWM PSI Web site.
In the above example:
A represents the introduction of (opening) the ANCHOR tag
HREF (Hypertext REFerence) is the pointer that says what follows is the destination of the link
HTTP (Hypertext Transport Protocol) is the protocol being used. Others include FTP and e-mail
WWW (World Wide Web) is a network used to facilitate HTML documents.
productsservicesideas.com is the domain name and/or document name (abc.com/index.html)
Click Here is the text that has been made "clickable" (contains hyperlink)
/A is the closing ANCHOR tag
By default, the above address will retrieve the "index page" or "home page" of the productsservicesideas.com Web site. Once inside any Web site, you can retrieve other HTML files that are a part of the site by adding to the end of . the "name" part of /name.html is where the HTML document name goes.
You can link to documents that are a part of the same Web site without using the HTTP, WWW and productsservicesideas.com by using :
The users browser (by default) assumes that the document referenced is on the same server (stores Web documents) and is within the same domain. The above anchor would retrieve a page titled"shopping.html" within the productsservicesideas.com Web site.
Linking Near:
You can also link to destinations within the same document. If you create a document that is long enough to be "scrolled" you may choose to add links that help users navigate up and down the page. To see an example, go here: Click Here
In order to pull this trick off, you will need to place tags on the "spot" where a user will be guided to and tags on the "text" that will activate the hyperlink.
is an example of how to label a "spot" on a Web page as being the destination of a hyperlink. The place containing Spot Name Displays Here (replace with whatever name you want to use) will be displayed at the top of the browser once the hyperlink is activated.
Is an example of how to created a "text" text link that is clickable. The hyper link is activated when Clickable Text Goes Here is "clicked". The users is carried to the portion of the Web page that contains the Spot Name Displays Here "spot".
Linking Far:
You can use a URL to link to other documents on other servers on the Web. A URL is the street address of a Web page. You've seen examples of them, they look like the following:
http://www.yahoo.com/
http://www.google.com/
You can add a URL to the anchor tag and use it to make text or images "clickable". A URL can be used in an anchor tag as follows:
The code looks like the following:
Future lessons will get into Hyperlinks and URLs with more detail.
Copy any of the aformentioned source code examples to the BODY of any of your previously saved lessons and save it as lesson5.html
Open the file in you browser to see the results and test the results!