Lesson 6 creating links
-
Upload
patrick-arellano -
Category
Technology
-
view
202 -
download
0
description
Transcript of Lesson 6 creating links
![Page 1: Lesson 6 creating links](https://reader036.fdocuments.us/reader036/viewer/2022082915/548f0a20b479598f168b4599/html5/thumbnails/1.jpg)
http://www.htmltutorials.ca/lesson6.htm#top
HTMLLesson Six – Creating Links
![Page 2: Lesson 6 creating links](https://reader036.fdocuments.us/reader036/viewer/2022082915/548f0a20b479598f168b4599/html5/thumbnails/2.jpg)
http://www.htmltutorials.ca/lesson6.htm#top
Links
• You use links to:1. jump from section to section within the same
web page (also called Page Jump) 2. link to a different page within your own website
(such as my linking this lesson to the next lesson or to my home page)
3. link to another web page or website anywhere in the world
![Page 3: Lesson 6 creating links](https://reader036.fdocuments.us/reader036/viewer/2022082915/548f0a20b479598f168b4599/html5/thumbnails/3.jpg)
http://www.htmltutorials.ca/lesson6.htm#top
There are different ways to provide these links
• The three most common ones are:1. clicking on a word, phrase or sentence2. clicking on a button3. clicking on an image
![Page 4: Lesson 6 creating links](https://reader036.fdocuments.us/reader036/viewer/2022082915/548f0a20b479598f168b4599/html5/thumbnails/4.jpg)
http://www.htmltutorials.ca/lesson6.htm#top
LINKS WITHIN A PAGE - PAGE JUMP
• To offer a page jump, you need two items:1. The command that points or sends the browser
to another section on your web page. 2. The place or point on the page where you want
the browser to jump to.
![Page 5: Lesson 6 creating links](https://reader036.fdocuments.us/reader036/viewer/2022082915/548f0a20b479598f168b4599/html5/thumbnails/5.jpg)
http://www.htmltutorials.ca/lesson6.htm#top
• "linkname" is the name of the section you are jumping or linking to.
• EXAMPLE<H4 ALIGN="CENTER"><A HREF="#top">click here to go to the top of the
page</A></H4>
![Page 6: Lesson 6 creating links](https://reader036.fdocuments.us/reader036/viewer/2022082915/548f0a20b479598f168b4599/html5/thumbnails/6.jpg)
http://www.htmltutorials.ca/lesson6.htm#top
• When you move the mouse pointer anywhere on the words, "click here to go to the top of the page", it turns into a pointing hand.
• …It means that you are on a link and clicking on the link will take you some place.
![Page 7: Lesson 6 creating links](https://reader036.fdocuments.us/reader036/viewer/2022082915/548f0a20b479598f168b4599/html5/thumbnails/7.jpg)
http://www.htmltutorials.ca/lesson6.htm#top
• "#top“ from <A HREF="#top">click here to go to the top of the page</A><P> is called the URL which stands for – Universal – Resource – Locator.
• A URL is the address or location of the link.
![Page 8: Lesson 6 creating links](https://reader036.fdocuments.us/reader036/viewer/2022082915/548f0a20b479598f168b4599/html5/thumbnails/8.jpg)
http://www.htmltutorials.ca/lesson6.htm#top
• The A stands for Anchor.• Every Anchor tag must have a closing or end
tag (</A>) to signal the end of the anchor.• The anchor element is a "container element".• Everything contained between the <A> and
</A> tags is affected by the element.
![Page 9: Lesson 6 creating links](https://reader036.fdocuments.us/reader036/viewer/2022082915/548f0a20b479598f168b4599/html5/thumbnails/9.jpg)
http://www.htmltutorials.ca/lesson6.htm#top
• The Anchor element is called a Hyperlink as it allows you to link to any location or address you want.
• The anchor tag is the glue for hypertext documents.
• HREF stands for Hypertext REFerence• It means that "this is where the link is going
to" - that is, where the link is referenced.
![Page 10: Lesson 6 creating links](https://reader036.fdocuments.us/reader036/viewer/2022082915/548f0a20b479598f168b4599/html5/thumbnails/10.jpg)
http://www.htmltutorials.ca/lesson6.htm#top
• The # symbol that you see in the first command must be there.
• The # denotes an internal page link.• Without it, your browser will be looking for
the code name outside the page you are on…
![Page 11: Lesson 6 creating links](https://reader036.fdocuments.us/reader036/viewer/2022082915/548f0a20b479598f168b4599/html5/thumbnails/11.jpg)
http://www.htmltutorials.ca/lesson6.htm#top
REMEMBER
• There is no # symbol in the NAME attribute.• The NAME attribute is used to set up "named
anchors". • When you click on the link, the section where
you place the NAME command (the target of your HREF attribute) will appear at the top of the browser screen.
![Page 12: Lesson 6 creating links](https://reader036.fdocuments.us/reader036/viewer/2022082915/548f0a20b479598f168b4599/html5/thumbnails/12.jpg)
http://www.htmltutorials.ca/lesson6.htm#top
LINKING TO ANOTHER PAGE IN YOUR WEBSITE
• <A HREF="#linkname">Click on these words</A> • …just replace the #linkname with the name of
your file…• <A HREF="filename.htm">Click on these
words</A>
![Page 13: Lesson 6 creating links](https://reader036.fdocuments.us/reader036/viewer/2022082915/548f0a20b479598f168b4599/html5/thumbnails/13.jpg)
http://www.htmltutorials.ca/lesson6.htm#top
LINKING TO ANOTHER PAGE ANYWHERE IN THE WORLD
• To link to any page in the world, just replace the file name with the COMPLETE ADDRESS (URL) of the page you want to link to.
EXAMPLE• <A HREF="http://www.youtube.com/">THIS WILL GO TO
YOUTUBE SITE</A>
![Page 14: Lesson 6 creating links](https://reader036.fdocuments.us/reader036/viewer/2022082915/548f0a20b479598f168b4599/html5/thumbnails/14.jpg)
http://www.htmltutorials.ca/lesson6.htm#top
USING A LINK BUTTON
• There are two main command lines here.1. FORM command2. INPUT command.
• FORM is a container element. • The opening tag tells the browser that a form
item is going here. The closing tag </FORM> ends the form item (which you see at the end of the statements).
![Page 15: Lesson 6 creating links](https://reader036.fdocuments.us/reader036/viewer/2022082915/548f0a20b479598f168b4599/html5/thumbnails/15.jpg)
http://www.htmltutorials.ca/lesson6.htm#top
• The FORM command has two attributes – 1. METHOD2. ACTION.
• METHOD, a FORM attribute, tells the browser how to handle the FORM command.
• Its value here is "GET". • That is, the browser is to "get" something
which in this case points to a link through the ACTION attribute.
![Page 16: Lesson 6 creating links](https://reader036.fdocuments.us/reader036/viewer/2022082915/548f0a20b479598f168b4599/html5/thumbnails/16.jpg)
http://www.htmltutorials.ca/lesson6.htm#top
• ACTION means the connection that you want to make.
• In this case, the action is a connection to my home page which is a file called "index.htm".
• If you want to connect to a page on the WWW, be sure to type in the complete address (URL).
• ACTION is a required attribute as it specifies the URL of the location you want to link to.
• The second command line is the INPUT command and it generates the button.
![Page 17: Lesson 6 creating links](https://reader036.fdocuments.us/reader036/viewer/2022082915/548f0a20b479598f168b4599/html5/thumbnails/17.jpg)
http://www.htmltutorials.ca/lesson6.htm#top
• The TYPE attribute lets the browser know what TYPE of INPUT will occur.
• In this case we want to SUBMIT a button (a button is assumed in "submit"). Thus TYPE="submit" produces a button.
• The VALUE attribute gives the wording that will appear on the button.
• Only the value of the ACTION and VALUE attributes require quotation marks.
• Quotation marks for the METHOD and TYPE values are optional.