Day Four - Links, Images, and Linking Images

      Got your index.html open? Good. Know the address of your fav site? Good. Go down beneath your </p> but before the </body> and hit enter a couple of times, type <p> and then hit enter.

<A href="">     </a>

      This is the basic layout for a link. 'A' stands for 'anchor', and 'href' is 'hyperreference'. Always enclose your URL (the '' part) in DOUBLE quotations: "     This is to let the browser know that you are beginning and ending your URL.

      However, none of that right up there will be seen by the visitor to your page. In that space between the two tags, type the text that you want seen; in this case, 'IrgendAnders'.


      This is what the visitor clicks on, and the page opens in the current browser window. (Later we'll learn how to make things open in new windows...) So save your html file, hit the refresh button on the top of your browser, and volia! A link!

      This is image.gif. At some point, you will want to display images on your site. This works a little like the 'A href'.

      First: click with the right mouse button on the image above, and choose the 'Save As...' option, then save it to the same folder as your index.html. Then, type this code into your html file beneath your link:

<img src="image.gif">

      Ooh... see that? No closing tag is needed for images.
      (You may want to place a break or two after the link, to keep things from running together... ^_^)
      'Img' is short for 'image', telling the browser that what it's looking at is a picture. 'Img' is also an anchor-style tag, but don't worry about that now. 'src' is for 'source'. Basically, you're telling the browser, 'Please display this image, and here it the image's source.' (There are more fun attributes for this tag later.) So save, refresh, and view the pretty picture!

      I'm sure you've seen people say 'click on the image above to access this certain feature on my page!' To link an image is not hard at all.

<A href=""> <img src="image.gif"> </a>

      Exactly the same as linking text; just treat the image as though it were text.
And yes, there will be a nappy colored line around your image; there is a way to get rid of that, coming later...

      Good job! This is getting easy, isn't it? Good for you. And it's only Day Four. Tomorrow is...
Day Five: More Body Attributes.

This HTML Tutorial was created by Sanna for the edification of new HTML programmers. Please do not steal the text from this page and call it yours. Reproduction rights granted for educational purposes only! Be nice, y'all; you know right from wrong. August 10, 2002.
HTML 3-A-Day
Main Index
Hosted by