� at32,Wyn32 2002
| |
[ Home ]
| |
Web Design: at32 Webcraft
| | | |
at32 Webcraft
|
[ Learn HTML with WebCraft ]
Links
Writing pages is all very well and good, but sooner or later you're going to want to make two pages, and typically - then link them together.
A hyper link is simplicity in itself, assuming you have got to grips with the URL / web address system that you use whenever you type an address into your browser.
A typical hyper text link looks like this:
|
<A HREF=http://www.at32.com/doc/webcraft.htm>at32 Webcraft</A>
|
The great thing is that you can easily create links in webcraft by dragging and selecting the text you want to turn into a hyper link, then right click and choosing: Selection Functions > Make A HREF Text. This will do all the hard work for you, and you then only need enter the URL after the = symbol.
If the file you are linking to is on the same server / web address as the file from which you are linking - you can enter the filename directly and miss the rest out. This is handy because if you're writing a website on your computer first and then uploading them later, you can test the website out fully on your own PC first. In the example above, a "local" version would be:
|
<A HREF=webcraft.htm>at32 Webcraft</A>
|
The great thing is that with local links you can move between files in WebCraft (editing them as you go), and thus totally aovid the File menu! This saves time and means you are constantly testing the site as you work...
With this knowledge, that's pretty much all you'll need to allow website visitors to move back and forth between your pages. The only extra thing you might want to do, is create a new browser window when they click on a particular link. In this instance, you need to add the target clause to the meta tag, as shown below:
|
<A HREF=webcraft.htm target=_blank>at32 Webcraft</A>
|
...note that the target is set to _blank, essentially a reference to a new (blank) browser window. Try this out now by clicking this link, constructed from the same HTML shown above:
With text and linking basics covered, let's move onto images.
Images
Take a look at the following HTML:
|
<IMG SRC=i/at32.gif border=0>
|
This is the only HTML needed to display an image, in fact - you could miss out the border=0 part if you like (though we will see the value of leaving it in later).
A quick way of creating the HTML to an image is to type the URL, select it then right click and choose Selection Functions > Make IMG URL.
Note that the URL is a local URL, pointing to the at32 logo relative to the filename of this webpage. If you wanted to display this image from outside of this webpage (which typically you would have to - since you're not the webmaster!), then you would use this HTML:
|
<IMG SRC=http://www.at32.com/i/at32.gif border=0>
|
Again, nothing clever going on here - it's just two ways to referance an image the same way as with the two methods to refernce a HTML document. Both of the above example produce the following:
Armed with text and image tools, you are now quite capable of knocking together a reasonable website consisting of a few images and paragraphs of text.
Typically, though you may want to integrate the text and the images closer together. However, if you try adding text immediatly after the image - you end up with this slightly messy result:
 This is not what most people would want - notice how the text seems to treat the image as a whole character!
|
However, salvation is at hand - in the form of the align tag:
|
<IMG SRC=i/at32.gif border=0 align=left>
|
Which clears up everything nicely:
|
Now this is much better. The text is flowing neatly down the side of the image and I can now achieve a much more professional result!
|
Try experimenting with different settings for the align tag - setting it to "right" is an obvious one!
To finish this section, you will be introduced into turning images into links. Consider this HTML:
|
<A HREF=index.htm target=_blank2><IMG SRC=i/at32.gif border=0></A>
|
All that we have done here is enclose the image in the hyper text link tag, as if it were text. You now have linkable images - try this one:
Remember what was said earlier about the importance of the border tag? If you leave it out you get:
...an unsightly looking border around the image. On the other hand - this may be what you want, and in some cases helps identify to the website visitor that the image is indeed a link that he or she can click on.
[ Prev | Next ]
|
| | | |
|
