More HTML Tricks!

Part I

1. Resizing an Image
Ever have a button you want to put in your sidebar but find it just doesn’t fit? There’s a way to fix that! Let’s take this random button I just found somewhere on the web.

Let’s pretend it’s to big for our sidebar and we want to shrink it down to fit. To do this we have to edit the code (you know, that you copied and pasted into your widget) which will look similar to this:

We find the img tag right here:

Type a space after the img and insert sizing declarations like so:

Now our button looks like this:

You don’t have to use 100 by 100. It all depends on the shape of the button. You may have to play around with different numbers to get it to where it’s not distorted but you’ll figure it out quick.

2. Linking an Image
That’s right, you can turn a picture into a link with just a little bit of code. Below we have an ordinary unlinked image:

Now let’s turn it into a link. Once again, you must modify the code which will look something like this:

And now we are going to add our own piece of code:

<a href="http://www.urbanbotanic.com"> at the very front and </a> at the very end

So now the entire piece of code looks like this:

<a href="http://www.urbanbotanic.com"><img class="alignnone size-thumbnail wp-image-702" title="sigfragcollection" src="http://summersnook.com/wp-content/uploads/2008/06/sigfragcollection-150×141.jpg" alt="" width="150" height="141" /> </a>

Obviously insert your own URL into the code instead of using the one above. One of my new favorite companies by the way! (I wasn’t paid to say that.) And here is the linked image:

3. Make a line break

Say you want to sign a post with your name and url and email address or something. And you want your name on one line, your url below that and your email address below that. Here’s how you do it. Let’s start with everything on one line:

Summer http://summersnook.com emailme@mail.com

Now it’s time to add some code:

Summer<br> http://summersnook.com<br> emailme@mail.com

Now it looks like this:

Summer
http://summersnook.com
emailme@mail.com

4. Create a copyright, trademark and registered trademark symbol

© will give you ©
® will give you ®
™ will give you ™

5. Create a scrolling marquee

This is a scrolling marquee

I personally think they’re evil for all the time use, but they could prove useful attention getters if you’re making an important announcement on your blog. Now, how did I do it? With this little piece of code:

<marquee behavior=scroll direction="left" scrollamount="5">This is a scrolling marquee</marquee>

Just like regular text or images you can turn a marquee into a link or change the font size and color. See part I. Even change the speed at which it scrolls by changing the number next to the scrollamount tag. You can even make the marquee move right, up or down by changing the “left” to “right”, “up” or “down”

Share this post These icons link to social bookmarking sites where readers can share and discover new web pages.

July 16, 2008 | Filed Under Blogging Help, Works for me Wednesday

Comments

17 Responses to “More HTML Tricks!”

marissa on July 16th, 2008 1:58 am

This is so awesome…you are so awesome. Thanks for all the cool tricks!

marissas last blog post..Hook Me Up - The Mommy Hook
kenna on July 16th, 2008 2:00 am

I lub you.

(also, ™ will also give you a TM mark if you suck at remembering numbers like I do!)

kennas last blog post.."Evil Sometimes Feels Good": a Summer re-run
kenna on July 16th, 2008 2:01 am

haha… SEE? it worked!

I meant to say that ™ will give you a TM sign!

kennas last blog post.."Evil Sometimes Feels Good": a Summer re-run
kenna on July 16th, 2008 2:02 am

third time’s charm (the pre tag didn’t work on try 2)

“&” + “trade” + “;”

kennas last blog post.."Evil Sometimes Feels Good": a Summer re-run
kailani on July 16th, 2008 4:32 am

I never knew about the copyright thingy. That’s pretty cool!

kailanis last blog post..WW: Another Day in Paradise
oh amanda on July 16th, 2008 8:38 am

excellent AND useful! i’ve always wanted to know how to resize with html. thanks!

oh amandas last blog post..Roaring Wordless Wednesday
Joanna on July 16th, 2008 9:12 am

YAYA! I am so happy to learn how to change the size of a button!!!! With all these sponsors buttons some run off the side, and some are just huge!
themotherboard on July 16th, 2008 12:30 pm

Good grief girlfriend! You are a wealth of knowledge! How in the flim-flarin’-fling did you learn all this??

I couldn’t get the color thing you were doing on your last post to work. Do you want to come to my house and hold my hand while I learn all this stuff?? And, teach me how to make my blog look mo-hotter! Cause, I am a wicked awesome cook!
themotherboards last blog post..Wordless Wednesday
Brillig on July 16th, 2008 3:53 pm

Okay, so when I started reading this post, I thought, “hmmm, I think I already know all of this!” And then… I realized I didn’t. haha. So I’m TOTALLY going to borrow some of these. When you see a scrollling marquis on my site, you’ll know who taught it to me… :-D

Brilligs last blog post..I Think I’ll Link You… part deux
GiBee on July 16th, 2008 3:57 pm

Thank you for the button resizing instructions!!!
The Apron Queen on July 16th, 2008 4:33 pm

That scrolling marquee is awesome. Might just try that one! :) Thanks

For your daily dose of vintage goodness & a bit of silliness, stop by Confessions of an Apron Queen

The Apron Queens last blog post..Great Texas Coastal Birding Trails: Anahuac Loop
Allyson on July 16th, 2008 4:42 pm

For goodness sakes, I swear you must be studying my blog and thinking, ‘hmmmmm, how can I help her fix her blog in a tactful, subtle way??’ (hee hee)

Thank you so much!!! I hope this ‘Summer School’ of HTML will go on and on and on. You say it so it makes so much sense, and I’m able to use it and improve my blog. I love it!!! And I hope there’s so much more.

I used it to resize my Meez and Playlist pictures, and I’m looking forward to using more of your awesome tips to make a great website to go along with that beautiful design you made for me.

You rock. ;-)

Allysons last blog post..Test
Leslie on July 16th, 2008 5:27 pm

I all your awesome html coding tips! Thanks Summer!
Sheri on July 16th, 2008 9:56 pm

This is so helpful, thank you! I’ve been struggling with html, it’s so nice to have this all spelled out so simple.

Sheris last blog post..Doing it right, some of the time
Kelsey on July 17th, 2008 12:28 am

I did not know the resizing trick thats too neat!

Kelseys last blog post..::Dennis Will Not Be Getting into Harvard or the Convent::
Carol VR on July 20th, 2008 1:34 pm

I always love your hints and tips you give. Problem, I’ve added a top commenters widget on my sidebar and unfortunately something wonky is happening. After the number 9 you can’t read 10. It appears as ‘0′. I can’t figure out how to move it over to show the whole number. HELP!!!!

Carol VRs last blog post..Yes, I’m back….
Wealth and Success on August 10th, 2008 11:44 pm

Great information! Thanks for writing this. It is an honor to participate in the discussion.

Got something to say? Please keep it kind and clean. Otherwise I might have to share your email address with the spammers... Kidding. Kidding. Your email address will never be shared with anyone. But if your comment is inappropriate it will be deleted.