Website Construction for Visual Artists
That's a shorthand way of saying:
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:
You can create <a> links to the following
Example:
You can also make a link to an email address:
<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:
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:
The Image Files page will delve further into the formatting and use of images in HTML documents.
Next: Site organization Top
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>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.
<a href="http://www.google.com">Click here to search on Google</a>
You can create <a> links to the following
- other webpages on your site
- pages of other websites
- Audio/visual media (like MP3's or .mov video files)
- Media files that browsers typically can read (like PDF's)
- Media files that browsers can't read (like Photoshop .psd documents). In such cases, the user will have to right-click and download the document to his/her desktop to really look at it, but at least the HTML link can provide access to the file.
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:
<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