Goodreads: HTML Code How-To Guide

During the 2015 Brain to Books Cyber Convention,  I saw all the bold and italics popping up all over some (very few) booths. In 2016, I figured out how to insert bold and italics into Goodreads and how to insert images! I want to share this with you.

Welcome to Goodreads: HTML Code How-To!

Designed for authors with no formal education in HTML Code by an author with no formal education in HMTL Code.

In HMTL code, all you need to know is one thing.

Code is like parenthesis. If you can use parenthesis, you can use Code.

Before we talk about the parenthesis, there are two thing you need to know going in. Ellipses and Quotes.

Ellipses

This was one of those really simple, but weird things I had to figure out. When someone gives you a code, usually they omit the URL links or text. But you still need to know where all the URL links and text goes. To do this, programmers use the ellipses as place markers to show where the URL and text go. Ellipses do not appear anywhere in code. They are only place markers.

To bold a sentence I would send you the command: <b>…</b>

The … can be replaced with any text you want.

<b>[Insert Your Text Here]<b/> can be confusing as the open closed brackets are often used in Code. Ellipses do not appear in code and will appear in your final results if you don’t delete them.

When writing or sharing code, the ellipses is to indicate “insert your URL or Text here.” In some cases, the ellipses must be deleted for the code to work, or you’ll have ellipses next to your image/text.

The Quotes

Open and closed quotes appear all over code. If they get deleted, your code won’t work. Don’t delete the quotes. Quotes usually indicate the URL, image size, or wording that can be altered and/or changed to your liking. This is your “Safe zone” so to speak. But mind you! If you delete one of these quotes, the code won’t work. Mind the quotes! Leave the quotes. Respect the quotes.

On a side note… You have no idea how thrilled I am that all of you are authors.

Writing Code… The primordial basics.

So we have open parenthesis… (… and we have closed parenthesis… )…

Everyone together. “Ooooooh!”

Now then…

When using code, you will replace the open parenthesis with a less-than-greater-than sign. Remember these from math class? < >

I know, I’m throwing math and computer tech at a bunch of English majors. It’s okay. We’ll get through this together. You can do this!

So this… < > … is code. You will be using these to create commands in the code.

<…> is your open parenthesis and begins the code.

</…> is your closed parenthesis and ends the code. Don’t forget the forward slash.

To bold, we will use a B in place of the ellipses. Remember that place marker?

The code looks like this: <b>…</b>

Now… let’s bold this sentence.

I would write it like this in Writer’s Lingo:

(Let’s bold this sentence.)

But instead of parenthesis, I would use “The Code.” Here is what it looks like.

<b>Let’s bold this sentence. </b>

That’s it.

Note:  Capitalization doesn’t matter in code, but may annoy some programmers.

RECAP!

  • <…> = open parenthesis and begins code
  • </…> = closed parenthesis and ends code

That is the be all end all in writing code. That is it! Now you try.

To italicize, you use an “i” instead of a “b”. For underline, you use a “u” instead of a “b.”

Here is the Code provided by Goodreads.

Remember, delete the ellipses. Leave the quotes!

bold text: <b>…</b>
italic text: <i>…</i>
underline text: <u>…</u>
strike text: <s>…</s>
exact spacing: <pre>…</pre>
blockquote: <blockquote>…</blockquote>
paragraph: <p>…</p>
spoiler: <spoiler>…</spoiler>

Embedding a link:  

<a href=”…Paste your URL link here…”>These are the words that will be embedded</a>

Adding an image:

<img src=”…Paste the COPIED IMAGE LOCATION here…”width=”275″ height=”325″>

We will go over copied image location in a moment.

Embedding an image:

<a href=”…Paste your URL destination link here…”><img src=”…Paste your COPIED IMAGE LOCATION here…”width=”275″ height=”325″></a>

Note: tags must be properly nested, example:
OK   <i><b>…</b></i>
Not OK   <i><b>…</i></b>

 

Combing two codes or “Nesting” code.

This is a tedious detail and is one of the many reasons why programmers scream at HTML code. Let’s say you want to bold and italicize a word.

To bold, you would write <b>this</b>

To italicize, you would write <i>this</i>

You can put them together, but there is only one way that they will go together.

You can either write

<i><b>this</b></i>

or

<b><i>this</i></b>

You can not write

<i><b>this</i></b>

or

<b><i>this</b></i>

If a code is an “outside” parenthesis, both open and closed code must remain on the outside. If one code is an “inside” parenthesis, both open and closed code must remain on the inside.

If your code doesn’t work, you may have accidentally deleted something really small like a < or a / or a “.

And when your code looks like this….

<a href=”https://www.goodreads.com/group/show/154267-brain-to-books-cyber-convention-2016″ target=”_blank”><img class=”size-full wp-image-63 aligncenter” src=”http://5bf.269.myftpupload.com/wp-content/uploads/2016/01/Flyers-5.png” alt=”Flyers (5)” width=”480″ height=”672″ /></a>
<h1>For Readers</h1>

Suddenly the < and / and ” gets REALLY tedious.

How do I hyperlink text?

Here is the code:

<a href=”…”>…</a>

<a href=”…Paste the destination URL here…”>This is the text you want to embed</a>

Sample:

<a href=”http://www.angelabchrysler.com/”>Visit my website!</a> will look like this on Goodreads!

Visit my website!

Adding Images to Code

NOTE! Be sure you pay close attention to the open/closed quotes in Code! These are mandatory for the code to work and are too easy to delete.

 

See my booth? Large images of my book covers welcome you. To do this, I wrote this code…

<img src=”https://pbs.twimg.com/media/CaFdhwNWYAALJMB.png:large”width=”275″ height=”325″>

“img src” is short for “Image Search.” When you see an image on Goodreads, you are actually seeing an image from somewhere else on the internet. The code is linked to an outside source so you are not actually posting the image on Goodreads. You are simply creating a telescope to another location. That’s a perfect analogy. When you see an image on Goodreads, you are using code to look through a telescope to view the image at a different location.

Here is what the code looks like.

<img src=”…Paste the COPIED IMAGE LOCATION here…”width=”275″ height=”325″>

Now let’s go over what “Copied Image Location means.”

Copy Image Location

You probably have already seen it when you right click with your mouse online to “view image” or “copy image.” Perhaps you often “save image as…” or “email image…”

My favorite is “Set as Desktop background.”

The one you probably didn’t notice is “Copy image location.”

Take a moment and paste this into your web browser: https://pbs.twimg.com/media/CaFdhwNWYAALJMB.png:large

You are now looking at my book cover located in a Tweet on my Twitter account. This is the URL you will use to plug into code.

<img src=”…Paste the COPIED IMAGE LOCATION here…”width=”275″ height=”325″>

  1. Now, paste the code <img src=”…Paste the COPIED IMAGE LOCATION here…”width=”275″ height=”325″>
  2. Right Click on any image found online and “Copy Image Location”
  3. Paste said image between the open and closed quotes. A URL will appear.
  4. The width and height can be adjusted accordingly and/or to your liking.

You’re all set!

To embed the image, here is the code:

<a href=”…Copy your URL link here… “><img src=”…Paste your COPIED IMAGE LOCATION here…”width=”275″ height=”325”></a>

 

Share This: