Lesson 6 creating links

Lesson 6 creating links

• 1.
  HTML Lesson Six –Creating Links http://www.htmltutorials.ca/lesson6.htm#t op
• 2.
  Links • You uselinks 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 http://www.htmltutorials.ca/lesson6.htm#t op
• 3.
  There are differentways to provide these links • The three most common ones are: 1. clicking on a word, phrase or sentence 2. clicking on a button 3. clicking on an image http://www.htmltutorials.ca/lesson6.htm#t op
• 4.
  LINKS WITHIN APAGE - 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. http://www.htmltutorials.ca/lesson6.htm#t op
• 5.
  • "linkname" isthe 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> http://www.htmltutorials.ca/lesson6.htm#t op
• 6.
  • When youmove 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. http://www.htmltutorials.ca/lesson6.htm#t op
• 7.
  • "#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. http://www.htmltutorials.ca/lesson6.htm#t op
• 8.
  • The Astands 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. http://www.htmltutorials.ca/lesson6.htm#t op
• 9.
  • The Anchorelement 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. http://www.htmltutorials.ca/lesson6.htm#t op
• 10.
  • 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… http://www.htmltutorials.ca/lesson6.htm#t op
• 11.
  REMEMBER • There isno # 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. http://www.htmltutorials.ca/lesson6.htm#t op
• 12.
  LINKING TO ANOTHERPAGE 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> http://www.htmltutorials.ca/lesson6.htm#t op
• 13.
  LINKING TO ANOTHERPAGE 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> http://www.htmltutorials.ca/lesson6.htm#t op
• 14.
  USING A LINKBUTTON • There are two main command lines here. 1. FORM command 2. 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). http://www.htmltutorials.ca/lesson6.htm#t op
• 15.
  • The FORMcommand has two attributes – 1. METHOD 2. 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. http://www.htmltutorials.ca/lesson6.htm#t op
• 16.
  • ACTION meansthe 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. http://www.htmltutorials.ca/lesson6.htm#t op
• 17.
  • The TYPEattribute 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. http://www.htmltutorials.ca/lesson6.htm#t op