Friday, September 9, 2011

Putting it Together - HTML

Oh how I wish I knew more about HTML. I would love to take a course some day. You could put what I know about writing HTML in a thimble. Then why the heck am I telling you about it?!?!?


I guess what I want to say is that it's really nothing to fear. You can work with HTML even if you don't understand it. I do. My eBay listings are all HTML. I didn't write them, but I alter them. I also make widgets from scratch, and this Post is rewritten in HTML, so sometimes I have to click on that little Edit HTML tab and do a little altering.


I'm going to tell you how to make an easy widget, how to change color, how to make your Blogger images clickable to another site, and how to "play" with HTML.


When I first started using computers, I was terrified of them, but I learned that if I "played" with software, nothing blew up. My computer didn't implode and the world didn't end. I rarely crashed my computer. Well actually, I was playing with computers I used as a work study while going to school, so I was a lot braver with the PC I didn't own.


That's how I learned to play with HTML. I bought a template from a seller for my listings on eBay. It had instructions written IN the template in RED. The instructions weren't HTML so I could leave them there. Nice.


HTML PRACTICE:
I wanted to add my own touch to the templates, so I found an HTML Practice Board. That link takes you to the one I use. There are others, just search HTML practice board. You type in your HTML, hit -see HTML- and voila. You can see how badly you screwed up, or succeeded. If it's bad, click clear and start over.


COLOR: 
You can change the color of text, borders, anything that has a color. You can find color codes by searching HTML color codes. You will get a list and hopefully a color Chart, like this nifty one from http://htmlcolorcodes.org/. Color codes are preceeded by a hashtag and have 6 letters/numbers following. The combination make the colors. If you are in a hurry, some basic color names will work #red #purple. Your HTML should read something like "color = #990099"

WIDGETS:
Widgets are so easy. Make your image, find out the size you need for your post (your blogger friend or site will tell you). Take your image to a photo hosting site. I use photobucket. Upload it in the correct size - you will be using the HTML version.

You will see text in the HTML that is between quotes listed twice, it won't be hard to miss, because you might think "why twice"? One is the image you see, the other is the clickable link "target" Like when you click and get a bigger version of your picture.

Copy your complete web address, the one that starts http or www. Paste it between the quotes of the first listing of your image, replacing the original text. And there you have your clickable image. Try it out on your practice board.

MAKE BLOGGER IMAGES CLICKABLE TO A WEBSITE:
If you can make a widget, you can do this.

Write your blog and place your images where you want them. Now click the Edit HTML tab. You'll have to hunt for the image, because it is now text instead of a picture. The one you want will have the same title as your file name, but inside quotes. Follow the instructions above, just put your web page link inside the first set of quotes, replacing the text that is there. Now your picture will open in a web page.

And I bet you thought this was going to be hard.

Now that you can work with HTML, I'll bet you'll be telling me how to design it in no time.

3 comments:

Gilded Owl Musings said...

This is GREAT! Thank you!

Pili said...

Thanks a lot for all these little tidbits, you are more proficient in HTML than I am, so any tips are always welcome!

Maiden Jane said...

That's a great tip on the clickable picture. Will try that!

Related Posts Plugin for WordPress, Blogger...