More HTML Tricks!
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:
<a href="http://designsbysummer.blogspot.com"><img src="http://i231.photobucket.com/albums/ee24/summeresque/designsbysummerbutton.jpg"></a>
We find the img tag right here:
<a href="http://designsbysummer.blogspot.com"><img src="http://i231.photobucket.com/albums/ee24/summeresque/designsbysummerbutton.jpg"></a>
Type a space after the img and insert sizing declarations like so:
<a href="http://designsbysummer.blogspot.com"><img width="100" height="100" src="http://i231.photobucket.com/albums/ee24/summeresque/designsbysummerbutton.jpg"></a>
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:
<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" />
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
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”
EDWARD YOUR A HAMSOME GUY ALL IM ASKING IS FOR BELLA TO HAVE THE BABY AND PUT...
This is so awesome…you are so awesome. Thanks for all the cool tricks!
marissas last blog post..Hook Me Up - The Mommy Hook
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
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
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
I never knew about the copyright thingy. That’s pretty cool!
kailanis last blog post..WW: Another Day in Paradise
excellent AND useful! i’ve always wanted to know how to resize with html. thanks!
oh amandas last blog post..Roaring Wordless Wednesday
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!
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
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
Thank you for the button resizing instructions!!!
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
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
I
all your awesome html coding tips! Thanks Summer!
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
I did not know the resizing trick thats too neat!
Kelseys last blog post..::Dennis Will Not Be Getting into Harvard or the Convent::
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….
Great information! Thanks for writing this. It is an honor to participate in the discussion.
Hey, great post. I have one question, how do you put all those favourite buttons along the bottom of your post on the one line? would be awesome if you could pass on that info!
Thanks
Adams last blog post..Where is my training at?
Hiya, i have seen your site when searching a few weeks ago and i really love the design! I just bought a new 3 character domain (cost me a packet) for a niche review blog, and i was wondering if your design is a free or paid one? I’m new to Wordpress and about to set it up, and i would really like to get something with a similar look to yours. Any ideas where i could download or buy something similar? Thanks for your help! :)