Code for Crafters :: Images 101

You asked for it! Basics. I’m going to *attempt* to teach you a few things via video tutorial. This is my very first attempt and I know it needs work – but I also know you need this information!

Fair warning, you’ll need to turn your speakers up.

In this short slideshow, you’ll learn the basic parts of linking & displaying an image – visually.

I’ll be working on more installments soon!

Updated! March 11, 2010

Here’s a second look at the code so that you can reference the structure easily.

How can you use your new knowledge? Great question!

• Edit your images within blog posts to specify “titles” and “alt” text. Simply click “HTML editor” or “Code Editor” on your blog platform’s post editor. Then look for the code that looks like what’s above. Hint: It’s the stuff that’s not the text of your post
• Create “buttons” in your sidebar with images. You’ll want to use a “text widget” in WordPress or other generic widget in your own blog platform. You’ll need to write the code by yourself – but you can do it!

Want an opportunity to play & practice? My very favorite place to learn about & mess with code is on the W3 Schools site. Hey, people, they literally wrote the book on this – they invented it. To practice with image code, go here.