HOW TO INSERT IMAGES ON YOUR SITE
As you have now learned, in order to put an image on your site you have to first get it onto the Internet. As soon as you set up your own web server this won’t be an issue. You will just FTP that baby to an image folder, and voilà! Until then, you need to find a different way to get your image up on the Internet. Facebook and Flickr are obvious answers since they host lots of images, but sometimes you can run into permissions issues.
1. Once you have installed CloudApp, drag your photo into it and you will get a URL like this: http://cl.ly/image/2M0y2Z1w3d2e
2. You will still need to right-click and select “View Image” to get the end URL, which will look something like this: http://f.cl.ly/items/303W1m292M3e0C2N371i/skillcrush101.jpg
3. Pop that into your HTML like so:
<img src=”http://f.cl.ly/items/303W1m292M3e0C2N371i/skillcrush101.jpg” alt=”Skillcrush 101 Class Image” />
And you should be in business!
When working with images, make sure you are using the right image file. For better or for worse, there are only a small handful of allowable image file types on the web: JPG or JPEG, PNG, and GIF. Make sure that your images are one of those file types, otherwise you won’t be able to get them onto your site (at least not without a lot of rigamarole.
Some common images types you might be tempted to use (but won’t work): PDF, TIFF, PSD.
If you have ever done any work with print design or typography, you might be familiar with the idea of quotation marks vs. feet marks. Other names are smart quotes vs. dumb quotes, or curly quotes vs. straight quotes.
All of these silly names are just ways to describe the small difference between these marks: “ ” and these:” ”
When it comes to HTML, you can ONLY use the latter, those dumb, straight quotes. Anything else won’t be understood by your computer. It’s a very common mistake to accidentally use smart quotes in your <img> tags instead of straight quotes. Sometimes it even happens by accident! But if you have written your <img> tag, and everything looks good but your image is not showing up, double check those quotes!
Adding videos to your site:
YouTube & Vimeo are both great web hosting services. I prefer Vimeo because they are just slightly nicer and easier to use and have great privacy options & pro accounts. But really, either one will work. To add a video to your website, you need to get the “embed” code, this will look something like this:
<iframe width=”853″ height=”480″ src=”http://www.youtube.com/embed/F15IjgyHd60?list=PL6F63D8F762D09AD1&hl=en_US” frameborder=”0″ allowfullscreen></iframe>
<iframe src=”http://player.vimeo.com/video/36768685?title=0&byline=0&portrait=0&badge=0&color=ffffff” width=”600″ height=”338″ frameborder=”0″ webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> <p><a href=”http://vimeo.com/36768685“>’STUFF & THINGS'</a> from <a href=”http://vimeo.com/user3600796“>Mummu</a> on <a href=”http://vimeo.com“>Vimeo</a>.</p>
On YouTube you can find the embed code under the “Share” functionality under the video. On Vimeo there is usually a “Share” button on the video itself. If you want to change the width or height of the video, you can do it by editing the width & height properties inside of the iframe tags.
Have fun! We can’t wait to see more images and video in your sites!
Dee is a fun-loving instructor with diverse tech experience across Fortune 500 companies, early-stage start-ups, government agencies & non-profits. Dee works at mobile product design studio Funsize, in Austin Texas where she lives with her husband, 2 border collie mixes, & 2 cats.