Making your own HTML Signature How do they do that? If you have visited the PC Q&A Forum or some other forums, you have probably noticed that some of the messages have some really cool signatures (or short: sigs), such as a nice font, a funny image, different colors, a link to another site, scrolling names and more. If you haven't seen it yet, click on one of the links above, visit a forum and look through some messages. Did you see the signatures? Looks pretty cool, doesn't it? But how do you do that? It's easier than you think. Web pages are written in a language called HTML, which stands for Hyper Text Markup Language. The concept behind it is that you take the text you want to display on a web page, and add commands to it that apply special formatting to the text, such as size, color, etc. And that's how those HTML signatures are done. At the end of the message, which is written in plain text and shows up as such, you can then insert a few lines of HTML code for your signature. When you post the message, it will interpret the HTML you typed and create the signature. By the way, this does not work on every message board. Only on the ones that do allow HTML code inside a post. Learn the Basics For starters, if you are not familiar with HTML, you should check out http://www.htmlgoodies.com to learn the basics about HTML. It is a great site to learn about HTMl and web design, written in English with a sense of humor and well-paced. A must-see for anybody who is interest in it. Anyway, the primers and tutorials will show you how to apply formatting to text, such as fonts and colors, which is a good start to create your own signature. Then you should take a look at what's behind these signatures. There is an easy way to find out how they were made. When you see a post with a signature you like, right-click on the page and select View Source. Notepad will open on your screen and display the HTML used to create this page. Scroll until you can see the part with the message. That's where you'll find the signature. Depending on how much you like writing your own HTML, you have the choice of writing your own HTML code using Notepad - or, if you have no desire to learn this at all, you can use a WYSIWYG (What You See Is What You Get) editor. This is a program where you type in the text and then use menus and tool bars to apply and formatting. It's really easy to do because it doesn't require you to learn HTML, it's quick and painless. The disadvantage is that you don't learn anything doing it this way, and you probably won't be able to do some of the things you could do. You can find links to a few free HTML editors in our freeware download section at http://www.pcnineoneone.com/downloads/. In this tutorial, I'll explain how to use Notepad, the most common text editor, to write your own code. Create a Sig using Notepad This requires that you know the basics of HTML. First, open Notepad by clicking Start and Run, then typing Notepad and clicking OK. Let's start with the important part and work our way outwards. Type in the text that you want to display. This can be your name, your nickname, a cool phrase, anything. Just to be consistent, we'll use "My Signature" as an example. My signature Not very exciting, is it? Now we start adding HTML text formatting tags. To define the font, you add the tag to the front of it, and don't forget to add the font ending tag to the end. To make it bold, you add the tag to the front and to the end. It's important that you end each tag, and also that you nest them correctly. You have to close the tags in the reverse order of which they were opened. My Signature You probably noticed that there is nothing between the quotes yet. So let's choose a color, e.g. red, a size, e.g. 5, and a font type, e.g. Comic Sans MS, and insert that into the proper spots in the font tag. My Signature Another neat effect you could apply to your signature is the Marquee tag, which makes your signature scroll across the screen. This is what people like best, however I must point out the only IE browsers are able to see the scrolling marquees; the Netscape browser will just show them as stationary text. My Signature Now let's see how this looks. To save the file, go to File and choose Save As. Save the file as .htm or .html, e.g. mysignature.html. To force Notepad to save it as a HTML file, put the entire file name in quotes like this: "mysignature.html" To view it, you open your browser, go to the browsers File menu, choose Open, maneuver to the location where you saved your sig file, and select it. The browser will open the HTML file and display your sig. You get the idea. Now it's up to you to let your creativity go wild to create your own personal custom sig. Some forums will even allow you to add images to make it even more interesting. Using Images Depending on how the forum is set up, you might also be able to use images in your posts or signatures. An image could be a picture of yourself, or something animated, or a drawing, a smiley face, anything. It's completely up to you. However, you should keep a few important things in mind. - Keep it civil - Use something appropriate for all ages. You don't want to use anything that might offend anybody. - Keep it small - Don't choose an image that is rather large, which would cause every page that you use the image on to take a lot longer to load. This is very rude towards people that use slow Internet connections such as dial-up. Please keep your image size down to a few Kilo Bytes. - Keep it tasteful - Animated gifs can be fun - the first time. But after seeing the same flashing/spinning/rotating image over and over, it can get annoying very fast. Choose an image that people don't mind looking at repeatedly. - Stick to one image - The image will usually be stored in the cache on each viewer's hard drive and therefore doesn't require any subsequent downloads. But if you constantly change the image, each new image needs to be downloaded again which increases page loading time. Please keep these simple rules in mind as a courtesy towards others. Now, in order to use an image, you need to have access to a web server where you can store your images. Most ISP's provide a few MB of free web space to their customers. Then there are a bunch of free web space providers out there. Or maybe you have your own web site somewhere that you can upload the image to. Either way, the first step to use an image in your signature is to upload your image to a web server. Once the image is uploaded, try to access it in your browser to make sure it works. For example, if your web site is www.whatever.com, and you uploaded the image into the images directory, and the image is called mypicture.jpg, then the address to use would be http://www.whatever.com/images/mypicture.jpg. You get the idea. The next step is to insert the code that actually displays the image into your signature. In HTML, you would use the following syntax: Now simply add this line to your signature. My Signature

The

tag inserts a paragraph break between the two lines for some empty space. Your signature in action Now let's see what this looks if we do this for real. Let's say your forum nick name is MonkeyBoy, and you uploaded a picture of a chimpansee called chimp.gif to the web address http://www.PCNineOneOne.com/images. Then the code for your signature would look like this: MonkeyBoy

Custom HTML Tags One other thing to keep in mind is this: Each forum has a unique way of allowing and handling HTML code and images. Before you start pasting your signature into each post on a forum, be sure to read the forum rules and help file. Each forum out there has one or more pages explaining what is and what isn't allowed, as well as how to use HTML and insert images etc. Take the time to read those instructions! It might save you a lot of time if you find out up front that a particular forum doesn't allow HTML and/or images, or uses custom tags to insert HTML code into a post. For example, if you check out the HTML Help page for the PC Q&A Forum - http://www.pcqanda.com/cgi-bin/dcforum/dcboard.cgi?az=html_reference - you'll notice that you cannot use pointy brackets < and >, you have to use square brackets [ and ] instead. Another thing you'll see is that in order to insert an image you don't have to use the HTML code, you can simply insert the URL to the image. This means that in order to use the code from our example in our forum, you have to modify the code by replacing all pointy brackets with square brackets and eliminate the HTML code for the image, leaving only the URL, so that the code looks like this: [font color="red" size="5" face="Comic Sans MS"][b]MonkeyBoy[/b][/font] [p] http://www.PCNineOneOne.com/images/chimp.gif Have fun! That's all there is to it. Not that difficult now, is it? Have fun with it, experiment a little until you find the signature you like best. Keep the basic rules in mind, use common sense, read the instructions, and you're ready to go. One last tipe for the road: When experimenting, don't post two dozen test messages in a forum. This might really annoy other posters and/or the web master. Instead, test it first on your local machine by saving the text file with your signature in it with the extension .html on your hard drive and open it in your browser to see what it looks like until you get it right. Alternatively, you can create a test message in the forum, but don't post it. Use the Preview button instead to check out the sig before actually posting it. http://www.PCNineOneOne.com