On the web, a link is a connection to somewhere else. This somewhere else can be another part of your document, a picture, another document on your web site, or even another document on someone else’s web site.
If you have pictures on your web site, you can put them inside your web documents. You can also use any picture accessible on the net! You will of course want to use this ability responsibly: always make sure you have permission to use someone else’s work.
Your pictures should be in ‘gif’ or ‘jpeg’ format, because that’s what most web browsers can read. ‘GIF’ is more widely known, and ‘JPEG’ uses smaller files (saving quota on your account, if you are charged for extra disk space). In general, GIF is better for simple drawings, and JPEG is better for photographs.
In the future, PNG is going to take over from GIF, and for the most part you can use PNG now if you wish to.
Pointing to a picture is like most other things in html, except that there isn’t an ‘end’ tag. The ‘picture’ tag (called an image) is:
<img src="wherethepictureis" />
If you have a picture called ‘mom.gif’ in your web site, you could point to it with:
<img src="mom.gif" />
This only works if the image is in the same folder as your web page. It is often a good idea to store your images in a separate folder just to keep things neat. If the image is in a separate folder, you have to specify the folder as well. If you call the folder “pictures”, use:
<img src="pictures/mom.gif" />
If you want to show off an image that isn’t on your personal site, you have to specify the site where the image is:
<img src="http://sitename/image" />
Usually, you’ll use your web browser to look at the image, and then get the image’s location, or URL. The URL is what goes in between the straight quotes on “src”. In graphical web browsers, you can find an image’s location by holding the mouse button down while the mouse is over the image. (For Windows computers, hold the right mouse button down.) A menu will pop up, and one of the items is to “copy” the image location.
This points to the Negative Space logo no matter where the web page is:
<img src="http://www.hoboes.com/Graphics/Cerebus.jpg" />
Always check with the image owner before doing something like this! They might not want you using their image, or they might want you to do something special with it, like always link back to their page.
You can align the text next to the image to the top, bottom, or middle of the image.
Here’s how to align text to your picture:
<img src="picture" align="alignment" />
The alignment can be ‘top’, ‘bottom’, or ‘middle’, which aligns the image’s top, bottom, or middle with the text’s top, bottom, or middle. ‘Bottom’ is the default. You’ll probably usually want ‘middle’:
<img src="http://www.hoboes.com/Graphics/Cerebus.jpg" align="middle" />Negative Space!
You should only want to <em>align</em> top, bottom, or middle with short text. Long text will wrap around in an ugly manner--only the first line will be aligned. The rest will be underneath the image. Web browsers treat top, bottom, and middle-aligned image as if they were just another text character, albeit a large one.
You can, however, also align with ‘left’ or ‘right’. This aligns the image to the left or right side of the viewer’s page, with the top of the image at the same level as the next new line. Using ‘left’ and ‘right’, you can have the text of a page wrap nicely around your pictures. You can force it to stop wrapping with the <br clear="all" /> tag. The addition of ‘clear’ causes the line to break and resume at the bottom of the current image.
A lot of people don’t have graphical interfaces to the net. When someone without a graphical interface gets a page that has pictures on it, the pictures are replaced with the word [IMAGE], with nothing, or with something else.
If you want something else to be displayed, include the attribute alt="alternate text to be displayed" in your img tag.
<img src="/Graphics/Cerebus.jpg" alt="The Negative Space Logo" />
You’ll need to be careful that your alternate text makes sense next to whatever normal text you’ve got the picture near. And remember who your alternate text is for: people or computers that are not downloading your image.
When you link to other places on the net, that means you’re showing your readers the ‘way’ to get there. You might decide, for example, that the FireBlade Mail Your Rep page (http://www.hoboes.com/Politics/electednet/) is something that your readers should be able to get to. You’ll ‘link’ to that page from your document, and they’ll be able to click on your link and go directly to the mail your rep page without having to know its address on the net. The ‘tag’ is ‘a’, which stands for ‘anchor’. You are ‘anchoring’ this text to another page on the net. The attribute ‘href’ specifies the page you’re anchoring to.
The ‘clickable’ text usually appears blocked out or in color to the reader.
The <a href="http://www.hoboes.com/Politics/electednet/"> FireBlade Mail Your Rep</a> page!</a>
The above example will “link” the words “FileBlade Mail Your Rep” to the web page listed in the “href” option. In graphical browsers, readers will be able to “click” that text to get to that page.
You can also link to an e-mail address. When the reader selects this type of link, they’ll be able to send a message to the address you linked. For example, if you would like your readers to send e-mail to president@white-house.gov, you would use:
<a href="mailto:president@white-house.gov">The President of the United States</a>
<a href="mailto:vice-president@white-house.gov">The Vice President of the United States</a>
This allows any of your readers to send e-mail directly to the President or Vice President just as if they were visiting another web page. They’ll “click” and write their message.
If you want to specify a subject for the message, you can add “?Subject=This%20is%20my%20Subject” to the end of the address. You can’t have spaces in a ‘URL’, so you have to put ‘%20’ wherever a space should appear.
<a href="mailto:president@white-house.gov?Subject=Vote%20Libertarian">The President of the United States</a>
Generally, you’ll have more than one web page on your web site. You can link to these other documents on your site in the same way that you make links to e-mail addresses. Your web page filenames should always (if it is an html file) end in .html.
<a href="filename.html">Click here for the file</a>.
When the reader selects that link, they are transported to the new file.
That form only works if the new web page is in the same folder as the web page that is doing the linking. If the web pages are in different folders, you’ll have to specify the full ‘path’ to the new page:
<a href="/folder/filename.html">Click here for the file</a>.
This ‘html code’ links to the search page on Negative Space:
<a href="/Search.html">Search Negative Space</a>
You can also link to web pages on other web sites. Just like with images, if the web page you’re linking to is not on your web site, you have to specify what web site it is on:
<a href="http://sitename/filename.html">The link text</a>
For example, if you wanted to link to the Negative Space search page from your web site, you would have to include the site name:
<a href="http://www.hoboes.com/Search.html">Search the Great Negative Space!</a>
You can point to most any Internet site from inside your web pages. You can find the ‘href’ for any site you’ve visited by looking in the ‘location’ box, which is usually in the upper part of your web browser.
You’ll often see ‘URL’s which don’t end in ‘.html’ but instead end in ‘/’. These are the ‘main pages’ of that area of that web site. Your main page should almost always be called ‘index.html’ (it depends on your web server, but the best web servers do it that way). Any page that is called ‘index.html’ can have the ‘index.html’ left out of the address. For example, http://www.hoboes.com/index.html is better addressed as simply http://www.hoboes.com/.