Tutorials & Script Homepage
HTML/DHTML 29to35
Table Examples
Different Link Types
Changing Text with HTML
Intro to Frames
Intro to Sound
Automatic Refreshing
Meta Tags
advertisment
advertisement
advertisement
Host With Us: HostingHelper.co.uk From Only $5.00p/m
Spotted an Error ? Let us Know
100's more FREE templates at FreeWebTemplates
Looking for a new Web Host ?
Free templates from TemplatesLand
Professional High-End Templates
TemplateBox.com more FREE templates
Free Flash Templates and Intros
advertisement
 
HTML/DHTML TUTORIAL NUMBER : 30
Please Click Here, and Help Keep This Site FREE to Use
 
Please click on our sponsors advert to the right if you download or use anything from this page.
Thank you for your help.
This tutorial has been created by: seajaygraphics.com

Different Link Types

In this tutorial we are going to learn how to add Links to your pages. Links can come in many different forms. The 2 most common being text and graphic links.

Step 1: We will start with text so open your HTML document and work out where you want your menu or links placed. Type your text. In this case I will add my links in this sentence by saying "please visit my site at Sea Jay Graphics". I want the words "Sea Jay Graphics" to be the link.

Step 2: The code for this will be A HREF="http://www.seajaygraphics.com". This has to go inside these brackets <> and have a closing tag as well.

Place your cursor in front of the word you wish to link. In my case it is the S in front of Sea. Start with your "<" and then type A HREF=, followed by the address you want to link. Below is an example of mine. Note the close at the end of the word "Graphics". All links require a closing tag.



My text link now looks like this. Please visit my site at Sea Jay Graphics.

That is how simple it is to add a link to your site and link it to wherever you want your guests to go.


Adding links to Graphics

Most people prefer to use graphics as a link. Graphics allow us to be more individual in displaying our artistic preferences, they make a page look more vibrant and alive. The drawback being graphics take longer to load then text so pages will be slower in opening. If you are like me, I do not care about that. I want my pages to look good and I am a firm believer that graphics on personal pages are what makes or break them.

There is little difference to adding links to graphics as there is to text.

Step 1: You will already have your graphics made or chosen from one of the many excellent Graphic sites online. Work out in your mind where and how you want them positioned on your page. They can be changed later if you are not happy with the end result.

Step 2: You now need to insert your graphic before you can link it. Have a look at my code example below. The name of my graphic is "Cj3" and the Width and Height is the size. The "IMG SRC" is the HTML code to make this image appear on your page. Insert your image name and size in place of mine.



Results in this:



Step 3: If you want that graphic central on your page you need to add the following code. In this example the word "CENTER" is used but can be replaced with "LEFT" or "RIGHT", depending on where you want the graphic placed.



Step: 4 To add your link to this graphic is the same as adding a link to the text menu as described in the above tutorial. Below is an example. Again replace the address with your own.





Step 5: The end result. Note how the end result has a border around the graphic. This spoils the effect. You need to add BORDER="0" after the "200". Leave a space and add the Border code. Look at the example below.


You now have a linked graphic on your page. Whether you are linking to another page on your site or a completely different site, it does not matter. You need only change the address in the code and the name and size of each graphic if different from the first.


Adding an Email link

Adding an email link is very similiar to other links but the code is slightly different. I have added the mailbox graphic and attached my mail link to the graphic. The example code below the mailbox shows you what code you need to add and how to add it. Naturally exchange my email address for your own.




Link opening in a new page

How do you get your link to open in a new page? Simple, again my example below will show you what code to add to achieve this. You need only add target="new window" at the end of the HREF bracket as pictured below.




I hope this came in useful!
Ask in the forum if you have any suggestions or comments.

This tutorial has been created by: seajaygraphics.com
Web Hosting  |  Membership website templates  |  Reliable UK Web Hosting  |  dresses  |  Art Web Templates  |  Cheap Flight Deals  |  UK Web Hosting Company  |  Coursework Writing  |  Reseller Hosting  |  coches de ocasion  |  Cheap UK Web Hosting  |   cell phones  |  Web Design  |  Low Cost Domain Names  |  Website templates  |  master a distancia  |  Austin Web Design  |  Flash Templates  |  Factory  |   cell phones  |  Canadian Web Hosting  |  Flash Intros  |  Web Templates  |  cartuchos  |  Corporate Logo Design Service  |  Website Templates  |  Bespoke Software Development  |  Domain Name Registration  |  Free Website Templates  |   Dedicated Server  |  UK Web Hosting  |  Dating Software - aeDating 4.1  |  Website Templates  |  Power Saver  |  taobao agent  |  Flash templates  |  cctv cameras  |  Lolita Dresse  |  china wholesale  |  Canadian Web Hosting  |   Cheap Web Hosting Deal  |  Linux Hosting  |  Web Design uk  |  Web Hosting  |  Business web directory  |  Electronics  |  Free domain names  |  Best UK web Hosting  |  Shower Enclosures UK  |  

 
advertisment
advertisment
advertisment
  Top-end templates
  Flash Templates
  Web Hosting UK
  Made-in-China.com
  Web Design Tips
  Web Hosting Reviews
  Web hosting reviews
  Website Design
  Top web hosting
  Stock Photography
  Bildagentur
  Reseller Hosting
  Company Logos
  Website Templates
  Website Templates
  Web Hosting UK
  templatebox.com
  freewebtemplates.com
  templatesland.com
  topfreegraphics.com
  freegraphicland.com
  free-templates-layouts
  Logo Design Software
  Layouts4Free
  Webmaster Resoucres
  Web Templates Factory
  Free Web Templates
  Free Templates Catalog
  Web Templates
  Reseller Web Hosting
  Stock Photography
  Animations-galore.com
  4print.com.au
  Host Review
  Web Hosting Host Color
  Dedicated Servers
  FlashTemplateDesign
  ZeroDollarTemplates
  Killersites.com
  how-to-build-websites
  Build a free website
  web Hosting
  Business Logo Design
  Templates Favpage
  webmastermind.de
  flasheasy.com
  More Featured Sites