|
I'll start with a comment. I have no use for tutorials that tell you what to do, but not why. Recently I've been going through dozens of tutorials about a Web page topic. Each one does it a little differently, and they're driving me crazy because they're not explaining the code they use.
To add a picture to your signature, the picture file must be hosted on a server somewhere. You can't just link to the file name of an image that's on your hard drive. There are numerous image hosting and Web page hosting sites that will allow you to do this at no charge. A few image hosts are listed near the bottom of this page. In this tutorial, one imaginary picture file name will be Sproles.jpg. From this point on, we'll assume that you've successfully dumped the image onto a server.
Once you have successfully transferred the picture file to a server (host), you will be able to look at it with your Web browser. You should check that this step is OK before going farther. The picture file will now have its own URL. (It's possible that the server might change your picture's file name.)
The URL can be copied from the address line near the top of the Web browser that is displaying the picture file, then pasted into your signature code on the message board. The URL must include http:// and the domain name of the Web site (image host) that will serve out your picture (for example: www.ddy.com) followed by a forward slant ( / ), followed by the file name of your picture (e.g. Sproles.jpg). Notice that there are no spaces in a URL.
At this point you may want to copy and paste the URL into a text file. In this tutorial I'm going to show you several different things you can do. The small box the message board provides for typing or pasting in the URL and the HTML code will make it very hard to see what you're doing. You'll find it easier to work from a separate text file so you can see all of the code at once. When it's all ready, you can copy it and paste all of it into your signature. And, once you've gotten it right, it can be a template for future use.
We're not done yet. Besides the URL, you must also include HTML (Hypertext Markup Language) code to tell Web browsers (Internet Explorer, Safari, Firefox, etc.) what you want them to do with the URL (which in our case is to display a picture of the legendary Mr. Sproles). Every HTML command you use needs to be begun and ended with brackets, like this: <command> . The "less than" and "greater than" brackets tell the Web browser you're going into and out of a command. It's how commands are identified and separated from one another. Note: If you enter valid HTML code, it will not be visible in your signature. It will be there, doing its job, behind the scenes. If you enter bad HTML code, it will probably be displayed.
Pictures align to the left by default. If I wanted to center the image, I'd go into and out of the centering command:
 Notice the / before the right-hand center in the example above. That tells the Web browser to stop centering at that point. Any time you turn on centering, you should turn it off when you're done, or wacky things can happen farther down on the page. If I wanted to put two pictures side by side, I could paste this in:
See how the < and > brackets separate the two commands that insert the two pictures? If I wanted some horizontal space between side-by-side pictures, I could include several repetitions of
If I wanted to stack one picture on top of another, I'd need to put a line break command <BR> between the two image commands:
If I wanted to stack one picture on top of another with a bit of space between, I'd need to put a paragraph command <P> between the two image commands:
The message board page you're working with may not allow you to be quite as neat as in the example above. Your code could just as well be run together on one line. The "less than" and "greater than" brackets will separate the commands. If I wanted more than one line of vertical spacing, I'd use repetitions of the break command <BR> . The more I repeat <BR> , the more vertical spacing I create, for example:
Suppose I wanted to put a caption under my picture. It's easy to do, but I'd want it centered. Also, I'd use the <P> command to get a little space between the picture bottom and the caption. Here's what I'd use:
the legendary Claire Coggins Just so it's all clear, there's a difference between the code for displaying a picture in a Web page, as compared to inserting a clickable link for the same picture. First, here's the code for the displayed picture (as shown earlier in this tutorial):
The code for a link to the same picture in a regular Web page is: The A HREF signals the browser that you're creating a link. (You must have a space between the A and the HREF.) Notice the valid URL, enclosed in quotation marks, after that. To display the name of your link, Darren Sproles Photo, insert it as shown above. The </A> is required. If it's left out, the Web browser will think the rest of your page is part of that link, and the rest of the text in the page will be underlined!
What you need to understand is that something like the GoPowercat boards handle links two different ways. If you know enough to insert the A HREF thing in your signature, that will work fine. But if you use the input box for a link (and its name), you will insert only the URL... not the A HREF and the </A>. GoPowercat knows that not all users know HTML code. They have a script that generates the code for the user. That explains the difference. See the screen capture toward the bottom of this page for a look at the input boxes.
After you have your picture file on a server and you're ready to set up your signature, from the main page of a message board like Wabash Station, click on "User Options". You'll get an input page that has a section like this:  Type or paste in the code, as explained above, into the Signature (HTML allowed) box. Click "Submit" at the bottom when you're ready to try it. Most of what I have shown in this tutorial amounts to what is called hotlinking. It means bringing in files (usually pictures) from someone else's Web page instead of from the server your page is on. Sometimes this is OK and sometime's it's not, and it all depends on whether you have permission to do it. The free hosting services listed just above are provided so you can hotlink. That's different from swiping a picture you like from someone else's Web page... a picture that may be the centerpiece of their work, that may be copyrighted, etc. Not only is it a copyright issue, it's a bandwidth issue. Bandwidth is a term taken from the world of radio. When used in relation to Internet service, it means the product of file size times how many times the file was downloaded from a server. People have to pay someone to serve out their Web pages, and the cost is based on bandwidth. Hotlinking to the material on their page is sort of a compliment and an insult at the same time. You like their stuff, but you're making them pay for you to pretend their stuff is yours.
I'm covering this because you'll sometimes find that hotlinking won't work, and you may wonder why. A Webmaster can put an .htaccess file on his server, which can ban any Web sites but his or her own from being able to display their stuff. Also, it can ban customers of specific Internet service providers (for example, AOL or BellSouth) from being able to visit their site at all. It can ban a specific person's computer (by way of his or her IP number) from visiting. Usually this happens after a hacker has created a nuisance. Both of my domains, ddy.com and k-statecats.com, have .htaccess files that make it impossible to hotlink to my pictures and movies. This was done after several instances of someone else outright stealing entire Web pages from me. It's why no one from Georgia Tech University can see the videos on my Letterman fan page... let alone hotlink to them. A sophomore decided to change the title of my page and turn it in as a class project. Unfortunately, he wasn't bright enough to realize that his teacher would look at his code and see that everything was hotlinked to me, then visit my domain for proof that his homework was plagiarized.
  Refer to the screen captures above. The big mistake most people make is pasting in a complete cut-and-pasted URL after the http:// in the Link Address input box. You need to erase that http:// before pasting in a full URL. There is zero tolerance for error in URLs! If you have two of the http:// in the URL, your link can't possibly work. Also, remember to type in some sort of name for the link in the Link Name box. 
|
||||
