Website Construction for Visual Artists

Text and image links

The tags that create both links and images have attributes which refer to something outside of that particular HTML page, whether it's another file on the site, or a file somewhere else on the Web.


Links

In the top-left corner of this page, I have a link to the first page of this website (default.htm) which appears as the underlined text "Why bother?". To create this link, I used the following

<a href="default.htm">Why bother?</a>


That's a shorthand way of saying:

<anchor-tag: hypertext-reference="default.htm"> Why bother? <close anchor-tag>


All my HTML files for this website are kept in the same folder on my server's hardrive, so the link tells the browser to look elsewhere in that folder for "default.htm" and call it up to your browser window when clicked.

Here's the script to turn a piece of text or image into a link to an external Web address:
<a href="http://enter web address here">Enter text here</a>

<a href="http://www.google.com">Click here to search on Google</a>
It is really important to include the "http://" part of external links, or otherwise your browser won't know to get online and search the Web.

You can create <a> links to the following All of these would simply use the <a href=" "> </a> tags.

Example:
<a href="song25.mp3">Click to download song</a>

You can also make a link to an email address:

<a href="mailto:Enter email address here">Email text-link here</a>
The problem is that spam bots can find email addresses with such links, so they're falling out of style (in favor of phonetically spelling out email addresses).

Links that open a new window

You can use the target="_blank" attribute in your <a> tag if you want a link to force open a new window. For example:
<a href="http://www.google.com" target="_blank">Click here to search on Google</a>
Originally, this was recommended so a designer could provide access to other sites without the user losing touch with the current site. Whether this is a good idea or not is debatable, and some users find this function irritating and would prefer to decide on their own when setting their browser preferences.


Images

The <img> tag conjures up an image file from a remote source. Generally, images on a website are often stored within a folder named something like "pics" or "images", which is kept within the main folder that holds all the documents for the website (this is an organizational issue, btw, and not a rule). Here's an example for an image called wrapped_dog.jpg that I keep within a folder entitled "media" that is inside the folder that contains the whole tutorial website:

pic of wrapped dog

<img src="media/wrapped_dog.jpg"   width="150"   height="152"   border="1"
  alt="pic of wrapped dog">

Now, first of all, the image would still pop into place if I had used the following script:

<img src="media/wrapped_dog.jpg"   border="1">


This second script tells the browser to dig through my "media" folder (in the same folder as all of these tutorial pages you are reading) on the server, to find an image called "wrapped_dog.jpg", and to please give it a 1-pixel border. But, I want my image tag to do more than that: I want to specify the width and height of the image (this is for page-formatting efficiency) and to give it an "alternate" title (alt) in case the image link breaks, or if someone is accessing the site with a text-only browser (such as a Web-reader for the blind).

Furthermore, since I downloaded this image from CuteOverload, I wanted the image to become a clickable link back to the source. So I nested the <img> tag inside of <a> </a> tags. Here's how it works:
<a href="http://cuteoverload.com">

  <img src="media/wrapped_dog.jpg" width="150" height="152" border="1"
    alt="pic of wrapped dog">

</a>


The Image Files page will delve further into the formatting and use of images in HTML documents.


Next:   Site organization           Top