Beginners’ HTML – Part 2

In this, the second part of the tutorial series, we’ll find out how to create links to other Web pages, as well as links to other parts of our own pages. Our main page is beginning to look a little cluttered now, so we are going to make a brand new Web page that will contain some links to a few of our favorite Websites.

Basic Linking

To begin, open up a new blank page in your text editor, then fill in the basic starting shell that we saw in the first part. Set a title for the page:

<html> 
  <head> 
    <title>My Favorite Web Sites</title> 
  </head> 
  <body> 
    content 
  </body> 
</html>

Next, let’s add in a little formatting and a few links:

<html> 
  <head> 
    <title>My Favorite Web Sites</title> 
  </head> 
  <body> 
    <font size="+2"> 
      My Favorite Web Sites 
    </font> 
    <p> 
      SitePoint - http://www.sitepoint.com <br> 
      Google - http://www.google.com <br> 
      AltaVista - http://www.altavista.com <br> 
      Slashdot - http://www.slashdot.com 
    </p> 
  </body> 
</html>

Now, this page is all well and good, but if a user wants to visit one of the sites you’ve listed, they’ll have to either retype the address into their browser or cut and paste the URL. There is a much better way to do this, which uses the <a> tag. The syntax for the <a> tag is as follows:

<a href="URL">TEXT TO DISPLAY</a>

You’ll need to replace “URL” above with the full address to the site, including the http://, and then replace “TEXT TO DISPLAY” with the text you’d like the user to click on in order to go to the URL. once we add this code to our page, it’ll look like:

<html> 
  <head> 
    <title>My Favorite Web Sites</title> 
  </head> 
    <body> 
      <font size="+2"> 
        My Favorite Web Sites 
      </font> 
    <p> 
      <a href="http://www.sitepoint.com">SitePoint</a><br> 
      <a href="http://www.google.com">Google</a> <br> 
      <a href="http://www.altavista.com">AltaVista</a> <br> 
      <a href="http://www.slashdot.com">SlashDot</a>  
    </p> 
  </body> 
</html>

Now all a user has to do is click on the title of the site (e.g. SitePoint), to be instantly transported to that site.

Organizing the Links

At the moment, our page looks pretty good. However, once you’ve added a few more links it will be much more difficult for a user to navigate the page and find the link they’re looking for. So let’s split the links up into categories (you’ll notice that I’ve already added some more links to the list below):

<html>  
  <head>  
    <title>My Favorite Web Sites</title>  
  </head>  
  <body>  
    <font size="+2">  
      My Favorite Web Sites  
    </font>  
    <p>  
      <i>  
        Web Development <br>  
        Search Engines <br>  
        Miscellaneous  
      </i>  
    </p>  
    <p>  
      <b>Web Development</b><br>  
      <a href="http://www.sitepoint.com">SitePoint</a><br>  
      <a href="http://www.webmasterbase.com">WebmasterBase</a><br>  
      <a href="http://www.promotionbase.com">PromotionBase</a><br>  
      <a href="http://www.ecommercebase.com">eCommerceBase</a><br>  
      <a href="http://www.servicesbase.com">ServicesBase</a>  
    </p>  
    <p>  
      <b>Search Engines </b><br>  
        <a href="http://www.google.com">Google</a> <br>  
        <a href="http://www.altavista.com">AltaVista</a> <br>  
        <a href="http://www.yahoo.com">Yahoo</a><br>  
        <a href="http://www.dmoz.org">Open Directory Project (DMOZ) </a>  
      </p>  
      <p>  
        <b>Miscellaneous </b><br>  
        <a href="http://www.slashdot.com">SlashDot</a> <br>  
        <a href="http://www.theregister.co.uk">The Register</a> <br>  
        <a href="http://www.f-free.net">F-Free</a>  
      </p>  
  </body>  
</html>

As you can see, I’ve also included a list of all the categories at the top of the page to help users find the category they want.

At the moment, it’s pretty easy to navigate the links page. But as our list of links grows, it will become increasingly harder for a visitor to find what they’re looking for. Fortunately, another function of the <a> tag allows us to link to other parts of the same document. It appears to the user just like any other link, but allows them to move to another position on the same page, or to a position on another page within the same site.

There are two main elements to this tag.

The Pointer

Firstly, we must place a pointer in the position on the page to which we want to link. The pointer is:

<a name="myposition"></a>

The name you specified in the tag will allow you to navigate to that area of the page through a normal link. This doesn’t change the way the page appears to the user; it looks exactly the same as before.

The Link

The next step is to create a link to this pointer. Links to certain areas of pages work like this:

<a href="http://www.mysite.com/index.html#myposition">click here</a>

In our particular case, seeing as the destination is on the same page as the link itself, the full URL need not be specified – just the #myposition part will suffice.

So, once the category names have been made into links, our page will look like this:

<html>  
  <head>  
    <title>My Favorite Web Sites</title>  
  </head>  
    <body>  
      <font size="+2">  
         My Favorite Web Sites  
      </font>  
      <p>  
        <i>  
          <a href="#webdev">Web Development</a><br>  
          <a href="#search">Search Engines</a><br>  
          <a href="#misc">Miscellaneous</a>  
        </i>  
      </p>  
      <p>  
        <b><a name="webdev"></a>Web Development</b><br>  
        <a href="http://www.sitepoint.com">SitePoint</a><br>  
        <a href="http://www.webmasterbase.com">WebmasterBase</a><br>  
        <a href="http://www.promotionbase.com">PromotionBase</a><br>  
        <a href="http://www.ecommercebase.com">eCommerceBase</a><br>  
        <a href="http://www.servicesbase.com">ServicesBase</a>  
      </p>  
      <p>  
        <b><a name="search"></a>Search Engines</b><br>  
        <a href="http://www.google.com">Google</a><br>  
        <a href="http://www.altavista.com">AltaVista</a><br>  
        <a href="http://www.yahoo.com">Yahoo</a><br>  
        <a href="http://www.dmoz.org">Open Directory Project (DMOZ)</a>  
      </p>  
      <p>  
        <b><a name="misc"></a>Miscellaneous</b><br>  
        <a href="http://www.slashdot.com">SlashDot</a><br>  
        <a href="http://www.theregister.co.uk">The Register</a><br>  
        <a href="http://www.f-free.net">F-Free</a>  
      </p>  
    </body>  
</html>

Now, if you access a link to a particular category, you’ll be moved down the page to that category, rather than to a separate page. Keep in mind that this example may not appear to work if you view the page on a high resolution monitor, simply because the screen won’t scroll down if all the links fit onto a single page. However, if there were more links on the page, or you shrank your browser window, then you’d see the links do their thing.

Email Links

There is one other type of link we haven’t looked at yet. This link has the ability to open up the visitor’s email client and allow them to type a message to you. The tag is similar to those we’ve looked at previously:

<a href="mailto:you@email.com">Click here to email me!</a>

Often referred to as “Mailto Links”, these provide a quick and easy way to let a visitor send you an email, perhaps with comments or suggestions about your site, or just to say hello!

Adding Images to Your Site

Now that you’ve created a page that can direct visitors to your favourite Websites, how about a page with a couple of pictures? They could be of you, your house, your car – anything you want. For the examples on this page, I’m going to assume the pictures are of my house, but of course your photos can be of anything. To avoid having cluttered pages, I’m going to start another blank page for this. So let’s open up a blank page in your text editor and call it pics.html. Fill in the blank page outline we saw earlier. Now we’re ready.

Just like all other things in HTML, images use tags. The tag for an image is <img>. There are quite a lot of attributes for this tag, but for now we’ll just look at two:

src="images/house.jpg"

The src attribute specifies where the image is located. This could be a URL, or a path on the local Website like the one I’ve included in the example above. For example, “images/house.jpg” indicates that we want to display an image stored in house.jpg, a file that can be found in the images subdirectory of the directory that contains the HTML file for this page.

alt="My House"

The alt attribute gives the image a description that can be used in a number of circumstances. Using the alt attribute is optional, but there are many good reasons for doing so, as we’ll see later on.

So now, let’s put a couple of pictures into an HTML page:

<html>   
  <head>   
    <title>   
      Pictures of My House   
    </title>   
  </head>   
  <body>   
    <p>   
      <font size="+2">   
        <b>   
          Pictures of My House   
        </b>   
      </font>   
    </p>   
    <p>   
      <img src="images/house1.jpg" alt="My Front Door">   
      <br>   
      <i>My Front Door</i>   
    </p>   
    <p>   
      <img src="images/house2.jpg" alt="My Back Yard">   
      <br>   
      <i>My Back Yard</i>   
    </p>   
  </body>   
</html>

As you can see, I’ve only included two pictures here, but there is no limit to how many you can include on your page.

Why Bother Using the alt Attribute?

You may be wondering why people use the alt attribute if it’s not required, and as it doesn’t appear to do anything when you view your page. In actual fact, there are a number of advantages to using the alt attribute.

Firstly, if your image should ever be deleted, corrupted or moved, then the description set with the alt attribute will be shown in its place. That will at least give the viewer some description of the image that should appear.

Secondly, it means your site is friendlier to disabled people, as the text-only browsers and text-to-speech systems that many of these visitors use do not pick up images, but will recognise alt attributes.

In addition, recent browsers like Microsoft Internet Explorer will display the description provided in the alt attribute when you move your mouse over the image. Perhaps the only disadvantage is that the inclusion of alt attrubutes will make the page’s file size slightly larger; however, the difference in speed is negligible. I certainly see no real reason not to use alt tags.

More Attributes for the Image Tag

The image tag uses a large number of attributes that are optional, but useful. Here are just a few:

border="n"

This places a border around the image. The “n” specifies the border’s width in pixels. This is especially useful when you make images into links, because, by default, an ugly colored border is displayed around these images.

height="n"

This tells the browser the height of the image in pixels. This attribute is used so that, when the page is being processed and loaded, the browser will reserve the right amount of space for the image. As a result, your page layout will look perfect at all times – even while the images are still loading.

width="n"

This attribute serves the same purpose as the height attribute, except that it obviously defines image width instead. Again, it should be specified in pixels.

There are many more attributes, but these will give you a good start.

A Challenge

Now that you know a fair bit of basic HTML, it’s time for a challenge! We currently have 3 pages:

The Main Page
The Links Page
The Pictures Page

However, at the moment, there’s no way to navigate between them. To rectify this, we’ll need to open up the main page, and create links that take users to the other two pages. On each of the those pages, there should be a link to return to the main page. In case you’re stuck, here’s a hint: you’ll need to use the <a> tag that we learned about at the beginning of this part of the tutorial.

The solution will be provided in the next part of the series, when we’ll also take a look at one of the most useful of the HTML layout functions – tables.

Source Link: http://www.sitepoint.com/beginners-html-2/