Ultra fast cheap  linux and windows hosting
html tutorial HTML Tutorial:

  • Html - Introduction
  • Html - A basic html file
  • Html - Meta tags
  • Html - Text Control
  • Html - Color
  • Html - Lists
  • Html - Links
  • Html - Tables
  • Html - Forms
  • Html - frames
  • Html - Background music
  • HTML tag list
  • HTML Character Entities
  • Browse
    html tutorial
    Home >> Tutorials >> HTML Tutorials
    Html Links:


     

    Creating links Open link in new window Image as link
    Page jump



    A link is like a pointer to another page.


    Creating Link
    To create a link in HTML we uses the <a> (anchor) tag .

    An anchor can point to any resource on the Web like an HTML page, an image, a sound file, a movie, etc.The href attribute is used as reference to the resource that link to.

    An anchor is the part of the link that we see on the page, it can take the form of text or multimedia. A text anchor is called hypertext and an anchor in multimedia is called hypermedia.

    The following is a simple link in html:

    <a href="test.html">Hypertext</a>


    In this "a" for anchor link and "href" is for "hypertext reference". Whatever follows after the first > and before the closing </a> symbols will be the "hypertext" that appears underlined.

    (1)Linking to files in same directory

    (i)You can create a link that opens another HTML file in the same directory as the presently displayed web page. The syntax is:

         <a href="filename.htm">text link</a>

    With anchor tag you can create a link to display a HTML files or graphic file. The filename may be another html file or gif files.

    (ii) With HTML you can direct your web browser to open any document/graphic at a directory level lower or higher than the working HTML page.

    Lower directory level means  a sub-directory or folder within the directory/folder that contains the working HTML file.
    Eg:

    Suppose your current html document is in directory "webtest" and you have a folder "html" in that directory which contains a file "test.htm".

    ie:
    directory :webtest --> your html file is in this directory

    sub-directory :html --> 'test.htm' is is in this sub-directory

    To create a link to 'test.htm' file, use the following syntax:

    < a href="html/test.htm">link text</a>

    Linking to higher directory level means go in the opposite direction. Suppose your current document is in subdirectory "html" and you want to link to a file "links.htm" in directory "webtest" use the following syntax:

    ie:
    directory :webtest --> your html file is in this directory

    sub-directory :html --> 'test.htm' is is in this sub-directory

    then use:
    < a href="../webtest/links.htm">link text</a>

    Each instance of "../"  tells the web browser to go to a higher level directory/folder relative to the current page; in this case to go up one directory/folder level and look for a file called links.htm.

    (2)Links to the Internet Sites

    This allow people to move from page to page on the World Wide Web. The general syntax is:

     <a href="URL">Link Text</a>

    where URL is the address for the Internet site where you want to go and Link Text is what will show up as hypertext in your web browser underlined and in blue. When a viewer clicks on this hypertext, the web browser will link them to the Internet site indicated by the URL.

    The following is a link to HOTMAIL

    <a href= "http://www.hotmail.com">Hotmail</a>



    Open link in new window

    With the Target Attribute, you can define where the linked document will be opened.For example the line below will open the document in a new browser window:

    <a href="http://www.hotmail.com/" target="_blank">Hotmail</a>




    Html - Image as link
    We can use picture as link to another page.

    A simple example is:
    <a href= "http://www.yoursite.com"><img src= "anchor.gif"></a>

    The following are Image Attributes :

    SRC="file.gif"/src="file.jpg"

    ALIGN= "left/right/middle /bottom/top/absmiddle/textop/absbottom". If you select right, then image will be aligned to left of the text written.
    HEIGHT= height of the image source.

    WIDTH= width of image source.

    Vspace= space above and below that will be left blank.

    Hspace=space right and left that will be left blank.

    ALT      =       we can write a description text here. This text will appear when the image is down-loading or when the viewer has a text only browser or has images turned off. It will also appear when the mouse cursor is held over the image for about two seconds.

    BORDER="x" Specifies if the image should have a border line

     




    Jumping to a point on the same page

    If  you want to go to a section on the same web page, Internal links can be  used . For example, click here to go to Creating links which is on the same page.

    An internal link requires two tags in the document.

    (1) Specify a named anchor which is a hidden reference marker for a particular section of your HTML file.The name attribute is used to create a named anchor. The name of the anchor can be any text you care to use.This might be used to link to a different section of the same page if it is long, or to a marked section of another page.
    The syntax is:

    <a name=jumphere>This is the place to be</a>

    (2)Write a Link to a Named Anchor

    <a href= "#jumphere">Go to the place</a>

    You should notice that a link to named anchor is displayed in a special way.The "#" symbol instructs your web browser to look through the HTML document for a named anchor called "jumphere" and when you click on the hypertext, it brings the part of the document that contains the named anchor to the top of the screen.

    eg:

    <html>
    <head>

    <title>Example of targeting</title>

    </head>

    <body>

    <a name=create>creating Links</a>

    ....................

    <a href="#create">creating links</a>

    </body>
    </html>

    You can jump to an anchor which is on the same web page or to a different web page in the same website or to to a different web page in a different website.

    Eg:
    <a href="filename.htm#gothere">Link Text</a>

    or

    <a href="http://www.webgimmicks.com/html/links.htm#create">Creating links</a>

     

    Top


    Page contents: itechies.net - Learn How to create links in an HTML document
    htmltutorials
    tutorial home