A Snazzy Bookshelf Can Be Yours!

Most of us want our BookCrossing bookshelves to be a reflection of ourselves. Plain text just doesn't do that! So here is a short tutorial on how to use HTML within BookCrossing.com to snazz up your extended profile.

Let me give you a little overview of HTML so that you have an idea of what you are doing. That way you will not be as confused as if I just gave you some HTML code to copy. HTML stands for HyperText Markup Language. Writing HTML is simply the process of marking up your text with special codes to make the text act a certain way. You can do little things like make a word red or make a word bold. You can even go as far as making a word link to another page (FYI: you are going to need to close that new window to get back here if you click on the previous word link).

Whoa, what's that!? You can even show a picture on your bookshelf that is stored on another computer on the web. For illustrative purposes, I'm using a picture/graphic stored on Yahoo! Mail. .. I really hope they don't mind.

All of this is real easy. Gather round, I'm going to tell you a little secret. Basic HTML is super duper easy. Any of you remember WordPerfect 5.1 for DOS? It's very much like that. To do anything in HTML you have to have two codes around the text you want to change. That's it! Ready to get started? Okay, let's bold something.



I am currently reading Lost in a Good Book by Jasper Fforde.

I am currently reading <b>Lost in a Good Book</b> by Jasper Fforde.

What you will see in this tutorial is a line of how the text looks marked up and then a line below showing you the code you need to use. In the bold example, the code is simply an open code to start the bolding and a close code to finish the bolding. That's what the <b> and </b> are for. As I said before, pretty much all HTML begins with an open code and a close code. All codes are delineated as code by the less than sign (<) and the greater than sign (>). To start a code you use these signs and the letter representing the code in between. To end the code you do almost the same thing except you add a slash (/) before the code. The slash (/) signifies that you are ending the code. Let's try some underlining and italicizing.



I am currently reading Lost in a Good Book by Jasper Fforde.

I am currently reading <b><u>Lost in a Good Book</u></b> by <i>Jasper Fforde</i>.

Okay this is a little more complicated. I bolded AND underlined the words "Lost in a Good Book" and italicized the words "Jasper Fforde". The bold codes are still there. I added the <u> and </u> to add underlining. And I added the <i> and </i> to add italicizing. Yeah it's a bit hard to read, but in no time you'll be reading HTML like it was second nature to you. Notice that you can nest codes.

Those are just three little tools to use to put a little impact on your page. But wait, you say, it would be even cooler if I could add color. Yes, very true. Let's do that next.




I am currently reading Lost in a Good Book by Jasper Fforde.

<font color="blue">I am currently reading <b><u>Lost in a Good Book</u></b> by <i>Jasper Fforde</i></font>.

Now my sentence is a wonderful shade of blue. What I added to make the sentence blue was a <font> code around the sentence. Notice to represent blue all I had to write was "blue". There are a bunch of different colors that you can use, including the basics of green, red, yellow, blue, purple, black, etc. All the colornames supported by the newer internet browsers can be found here (new window again).

Perhaps you want to add a link inside the extended text in your profile. A link takes the person reading to another web page when they click on the text you marked as a link. I just used a link to direct you to the colornames page. We are going to try it using my personal web page. You need to know two things to accomplish this. First, you need to know what code to use (I'll show you that below). Second, you need to know the url (that's the address line in most browsers). In our case, we will be using http://www.crustytapioca.com.




If you want to know more about me, visit my web page at www.crustytapioca.com.

If you want to know more about me, visit my web page at <a href="http://www.crustytapioca.com">www.crustytapioca.com</a>.

So the codes to specify the link are the <a> and </a>. To specify the url or address you add into the open <a> code an attribute called href. This is where you put the address. A little more complicated, but nothing too serious. You can link to your favorite sights this way and all you need to know is their address on the web.

Well let's say you want to add a picture to your profile. Now, I'm talking about adding this picture to the text portion of your profile. For example, I have pictures of my 3 cats on my bookshelf/profile (new window again). Again, you need two pieces of information. First, you need the code. Second, you need an address for where that picture is on the web. Putting pictures on your profile is very much like putting a link on it. The only difference is that instead of displaying a clickable link the HTML code will display the actual picture.






<img src="http://www.bookcrossing.com/images/WingAnimL-11x19.gif"/>

Oh my gosh! That wing is ruffling at you! So I decided to use a graphic from the bookcrossing site. You can use a graphic on any site, you just need to figure out the address. More on that later. The new code is <img>. Notice that it does not have an end tag, just a />. This is one of the few codes in HTML that does not have an end code. However, we signify the end of the code by closing the greater than sign with a slash (/).

Okay so how do you find the address to a picture on the web? Easier than you think. First, find the graphic or picture you want on a web site. Then use one of the two methods below, depending on your browser, to get the address for that graphic or picture.




Mozilla: right click on graphic, choose Copy Image Location.

Internet Explorer: right click on graphic, choose Properties. Highlight the address line in the pop up window and press Ctrl + C on your keyboard to copy the text. Click the Cancel button to get out of the window.

In either method, the url is now in memory. Edit/Paste (Ctrl + V) to place it in any text area. The Microsoft way is a tad more complicated. .. makes you want to go right out and download a Mozilla product!

That's it in a nutshell. There are many more things you can do with HTML but they wouldn't necessarily be a good idea inside your bookshelf. I learned to code HTML through trial and error. You can do the same. My favorite place on the web to get help with HTML is www.w3schools.com. They have tutorials on most web technologies, but their HTML tutorial is particularly easy and understandable. It also has a slew of examples. The neatest thing is that you can try any of the examples. On the left panel will be the code that you can edit and on the right will be how the code would display if put in a web page.

Good luck coding and happy hunting!

Recently Released

Recently Caught