FiveJs

Posts tagged as:

blogging

html

When I first started blogging I didn't know how to do anything more than write and publish a post. When I wanted to put a button on my sidebar, and there wasn't code that I could just copy and paste, I had to ask my husband for help.

But before long I learned some of the basics of HTML so I could link things up without any help, and knowing just that little bit about HTML made a tremendous difference in the freedom I had with my blog.

So, if you're like I was as a newbie blogger, and you don't know much about HTML, I'd like to show you how to link text and graphics in your posts and sidebars.

How to Create a Text Link

Let's start with clickable text. In most blogging software, you can create links automatically in the editor, but I'm going to show you how to write this code from scratch, which you have to do if you want to link text in a sidebar.

Take a look at the linked text here: Happy to be at Home. If you were to click the link, it would take you to Happy to be at Home.net. Here's the code that makes that possible.

<a href="http://happytobeathome.net">Happy to be at Home</a>

Now let's look at each part of the code. Notice that there are three sections to the code above.

  1. <a href="http://happytobeathome.net">
  2. Happy to be at Home
  3. </a>

The first tag — the one that begins with <a href — defines where your browser will send you when you click on the link. Notice that the complete URL for the destination is enclosed in quotes.

Now take a look at the last tag — </a>. This is the closing tag. Everything that comes between the opening <a href tag and the </a> is what becomes "clickable." In my example, what comes between the opening and closing tags is the text Happy to be at Home.

It's that simple.

So just remember the following tips when writing text link code:

Writing Text Link Code

The Opening Tag

  1. Begin the opening tag with <a href=
  2. Type your destination URL in between quotes (") with no spaces.
  3. End the opening tag with a >

The Clickable Text

After the complete opening tag, type what you want to be clickable (in other words, the text that you want your readers to be able to click).

The Closing Tag

Type </a> at the end of the text you want to be made clickable. If you leave this out, then everything after your opening tag will become a link, and that's not a pretty sight!

How to Create an Image Link

Now let's say you want to make an image clickable, instead of just text, such as when you want to put a button in your sidebar. This requires only one change to the link code I described above.

You still have the opening tag (the <a href= part) and the closing tag (</a>). The only difference in an image is what comes in between those tags.

Look at the code for the clickable button below. Notice the tag in blue is what is different from a basic text link code.

<a href="http://happytobeathome.net"><img src="http://happytobeathome.net/wp-content/uploads/2008/05/happyhomebutton.jpg" /></a>

Since I wanted to make an image clickable, I just put the code for the image in between the <a href and the </a> tag.

The abbreviation img src means image source — or basically where the browser pulls the image from. In this case, the graphic is hosted at the URL in between the quotes — http://happytobeathome.net/wp-content/uploads/2008/05/happyhomebutton.jpg. This could easily just have been a Photobucket account or my own blog media library. Wherever the image is located, I have to put the entire URL in between quotes.

So as you can see, making an image clickable is just about as easy as making a text link.

Writing Image Link Code

The Opening Tag

Start with <a href="the URL for where you want the link to click to…with no spaces">

The Clickable Image

Type the code for your image like this, paying attention carefully to the spacing: <img src="put the complete URL where your image is stored here…with no spaces" /> (Don't forget to end this img src tag with a />, although if you do forget the /, the code will still work.)

The Closing Tag

End the code with the </a> tag.

Bonus Code Tips

Forcing the link to open in a new window

If you want the browser to open a new window/tab when the link is clicked (so your reader doesn't have to leave your site), you just insert the following code in into the <a href tag. See the code in blue below.

<a href="http://happytobeathome.net" target="_blank" >

Changing the size of the image

If your image is too wide for your sidebar, you can adjust the horizontal width by inserting a piece of code into the img src tag. See the code in blue below.

<img src="http://happytobeathome.net/wp-content/uploads/2008/05/happyhomebutton.jpg" width="150" />

Make sure you only make the image smaller, not larger, or you'll lose quality and the image will appear pixellated. Also, if there is a height= that is already specified, you can simply remove the height= part so that only the width= is specified (the height is adjusted proportionally). You can also adjust the size of images in your posts this way; just insert the width="number of pixels" code into the img src tag in the position shown above.


Like this post? Bookmark it, share it, tweet it, or print it.
  • Share on Stumbleupon
  • Bookmark on Del.icio.us
  • Dig this Article
  • Bookmark this on Google
  • Share this article on Facebook
  • Share this article on Twitter
  • Email This Post
  • Print this article

{ 7 comments }

Saturday, September 27, 2008

Is 10 minutes too much to ask?

I am a mom. And I'm a blogger.

And that means that I'm frequently distracted by my three well-meaning munchkins when I'm in the middle of writing a blog post.

And just in case you don't believe me, I can prove it!

When I checked my blog dashboard this evening, I noticed I had five posts in drafts…five posts that have never been published. And they're not sitting in drafts because I've been thinking ahead, writing posts to be published in the future. Oh, no, no, no. The posts are unpublished because they were only partially finished due to my being rudely nicely interrupted by my high-maintenance adorable children in the midst of writing each post.

(I really do love and adore my kids. It's just that I wish I could sit down for even 10 minutes without interruptions. Point in fact — my 9-year-old has interrupted me four times since I began this post!)

So, instead of going back and trying to complete all my unfinished posts, I thought I'd just put them all into one post, in their current unintelligible unfinished state. WARNING: If you're looking for perfection here, or even a single complete thought, you're not going to find it.

(…and I was just interrupted by my 11-year-old.)

I'm Married to the Sweetest Man! (August 20)

As of today, my husband and I have been married 14 years. Over the years he has come to understand that I'm not much of a romantic—I'm not overly fond of Hallmark cards and, in fact, I don't usually like receiving flowers either.

Yet he still gave an anniversary gift that truly shows his love. And no, it wasn't chocolate (although chocolate would definitely have been deeply appreciated). Instead he gave me a stack of letters, the first of which read "Happy Anniversary! Don't open until 8 AM August 20, 2008." Each of the rest of the envelopes I was to open every hour from 9 AM to 10 PM on our anniversary. Each letter (so far) has been filled with handwrit…[I was obviously going to finish this sentence eventually!]

Here are some of the things we've experienced over our last 168 months (or 5,114 days) of marriage:

  • 9 months completely broke and still in college
  • 2 weeks driving from Missouri to Alaska
  • 35 months in a run-down apartment in Anchorage, Alaska
  • 27 months of pregnancy
  • around 20,000 diaper changes
  • 39 months of lactation
  • 24 months of nursing school…

Saying Goodbye to Kaizer (August 31)

Our dog found a new home today…and a new girlfriend, too! And believe it or not it took less than 48 hours to locate a family that was eager and willing to take him.

We've had Kaizer for almost two years, and over that time he's…

Menu Plan Monday: Week of September 8

[I actually copied this post into our Happy to be at Home blog, but didn't publish it on my own blog. Was I interrupted by my kids, or was it just plain ol' laziness/tiredness? I have no idea.]

On last week’s menu I mentioned that I probably wouldn’t get to many of my scheduled meals. So, now that last week is done, here’s the rundown on how last week’s menu worked in practice. The meals we actually made are in red.

  • Monday: Red Pepper Pesto Spaghetti, Homemade Breadsticks, and Corn Yo-Yo (you’re on your own) although I did use frozen leftover Red Pepper Pesto on my spaghetti
  • Tuesday: Baked Beans and Creamed Corn Cornbread
  • Wednesday: Yo-Yo

  • Thursday: Wet Burritos (but with chicken this time!) Yo-Yo
  • Friday: Homemade pizza (with whole wheat crust) Yo-Yo
  • Saturday: BFD (Breakfast for Dinner) Yo-Yo
  • Sunday: Stir Fry Veggies and Rice (this is quickly becoming a family favorite!)

This is our menu plan for this week. I’ve moved our unmade meals from last week to this upcoming week:

  • Monday: eating out at Johnny Carino’s while we’re in town at the library
  • Tuesday: Wet burritos

  • Wednesday: Yo-Yo
  • Thursday: Fish & potato home fries
  • Friday: Homemade pizza (with whole wheat crust)
  • Saturday: BFD (Breakfast for Dinner)
  • Sunday: Spaghetti, corn, and breadsticks

We All Need a Little Allegory In Our Life (September 13)

I recently discovered a great book that is chock full of something we don't see very much in today's literature—allegory… [This is actually a post I WILL be completing about a fantastic book called The Wordsmith, the Kid, and the Electrolux by Clifford Leigh. You might have seen the book on my sidebars. If you haven't heard of this book before, you'll really want to check it out!]

A Reading Milestone (September 22)

Joely hit a major milestone in reading today. She voluntarily took a book to the other room to read on her own! Oh, Happy Day!

It's been difficult for me to keep from comparing her to her older sister Jerah, who read through the entire American Girl series the last half of first grade, which was our first year of homeschooling (incidentally, Jerah is now as much of, if not more of a book nut than I am. We routinely have to tell her to stop reading, shut off her lamp and go to bed because she's still reading after midnight!).

Joely's seemed to have been coming along at a slower pace than Jerah up to this point, but now I'm not so sure. Maybe it's just that I've had…

So there you have it. Five sometimes incoherent, often rambling, occasionally nonsensical, and mostly unfinished posts.

I now return you to your regular programming.

Like this post? Bookmark it, share it, tweet it, or print it.
  • Share on Stumbleupon
  • Bookmark on Del.icio.us
  • Dig this Article
  • Bookmark this on Google
  • Share this article on Facebook
  • Share this article on Twitter
  • Email This Post
  • Print this article

{ 3 comments }

Introducing The JoJo Bean!

Joely, my (almost) six-year-old, has wanted her own blog ever since her siblings set theirs up last October. We've put her off saying that she has to "learn to read" before she gets a blog of her own. That worked for a while. But you see, the line between Not-Reading and Reading is kinda blurry. [...]

In which I give up and blog anyway…

I had thought that if I waited long, I would eventually catch the blogging bug again, and I'd miraculously be motivated to blog about something. But I apparently have a very healthy immune system which has successfully prevented this particular technological infection from taking over. But I do want to write something…anything. I've really missed [...]

Back from the dead?

Any rumors you might have heard that I have fallen off the face of the earth are extremely exaggerated. Although I am sure it has seemed that I have vanished without a trace, reports of my permanent disappearance are definitely premature. I'm actually on vacation. Yes, you read that right. Vacation. Can you believe it? [...]