Smith College HTML Lesson #3
    © D. Weinberger and D. Thiébaut

    HTML Lesson #3

    HTML Lesson #3

    Creating hypertext links

      Assume that you would like to create a link in your page to the Lego Mindstorms official Web page. The address of a page on the Web is called its URL, for Universal Resource Locator, or Uniform Resource Locator. The URL for the Lego page is http://www.legomindstorms.com.

      Assume that you would like your text to say 

      
       click here to go to the Lego Mindstorms Page.

      and that you want the word here to be a link to the page in question. Then you would enter the text as follows: 

      
       click <A HREF="http://www.legomindstorms.com">here</A> 
       to go to the Lego Mindstorms Page

    Exercise

      Create a new Web page (or modify one you already have), and generate a list of links to the following URLs. These are pages that you should spend time visiting during the week. They contain good design and project ideas. On the left is a description of the page, and on the right is the actual URL:

      The Lego Mindstorms
      official Web page      		 http://www.legomindstorms.com
      The Legobot Headquarters http://www.geocities.com/Area51/Station/3260/
      Design tips and tricks http://www.cs.ruu.nl/people/markov/
      lego/tips/index.html
      Bumper car design http://www.enteract.com/~dbaum/lego/
      creations/bumper.html
      A Lego garbage truck http://www.enteract.com/~dbaum/lego/
      creations/garbage.html
      More Lego creations http://www.enteract.com/~dbaum/lego/creations

      Here's one way of starting on this exercise, in case you are not sure. 

           A list of interesting robot-related sites:
     <UL>
       <LI>The official <A HREF="http://www.legomindstorms.com">Web 
                 page</A> for the Lego Mindstorms.
       <LI>...

    Links to local pages

      If you want to create a link to one of your pages, you do not need to specify the whole address of your page, since both pages reside in the same directory. In this case you simply need to specify the name of the files. Here is an example of a list of links to the pages you have created for the previous labs: 

            Here is a list of my pages:
      <UL>
        <LI>my <A HREF="firstpage.htm">first page</A>
        <LI>the <A HREF="lab2.htm">page</A> I created
                  for Lab #2
        <LI>the <A HREF="lab3.htm">page</A> of the
             speed/power challenges
      </UL>

    Sizing images

      The <IMG SRC="..."> tag will accept a WIDTH and HEIGHT parameter to define the size of the image. This is useful if you want to reduce the image so that it takes less space on the screen.

      The following examples use a picture of the RCX (TheBrick.jpg) and show you how to change the size of an image. You may have to go through a trial and error process to find the right height and width proportion. The first example is the raw, unsized image.

      <IMG SRC="TheBrick.jpg" ALIGN="MIDDLE">

      <IMG SRC="TheBrick.jpg" ALIGN="MIDDLE" HEIGHT="120" WIDTH="100">

      <IMG SRC="TheBrick.jpg" ALIGN="MIDDLE" HEIGHT="60" WIDTH="50">

      <IMG SRC="TheBrick.jpg" ALIGN="MIDDLE" HEIGHT="30" WIDTH="25">

    Aligning text and images

      You will notice the ALIGN="MIDDLE" parameter inside the <IMG> tag. It defines where you want the text to appear, relative to the image. Here are some examples that will illustrate how it works:

      I like playing with the <IMG SRC="TheBrick.jpg" ALIGN="MIDDLE"> brick!

      I like playing with the <IMG SRC="TheBrick.jpg" ALIGN="TOP"> brick!

      I like playing with the <IMG SRC="TheBrick.jpg"> brick!


      © D. Weinberger and D. Thiébaut