Take me back!! I want my CSS!! Click me to get back :)

×

READY FOR A NEW CAREER?

But not sure where to start? Find out if a tech career is right for you.

TAKE THE 3-MINUTE QUIZ

Images & Video

3009340-poster-instagram

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.

We recommend that you use CloudApp, which is a cloud based image sharing app that you can download at the App Store. For PC users try FluffyApp built on the CloudApp service.

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.

FANCY QUOTES

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!
 

VIDEOS

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&amp;hl=en_US” frameborder=”0″ allowfullscreen></iframe>

OR

<iframe src=”http://player.vimeo.com/video/36768685?title=0&amp;byline=0&amp;portrait=0&amp;badge=0&amp;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!

 

Deepina Kapila

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.

In her spare time she enjoys playing video games, reading on her Kindle & scuba diving in her hometown (Curaçao - an island in the Caribbean!).

Your email address will not be published.

6 comments

  1. Cfreitasrun Replied

    Say I have a host and domain and I also have said image folder.  What is the code I use for an image in that case?

  2. Melissa Bonito Replied

    The smart and dumb quotes in the post look the same on my computer. Had to google it.

  3. rene_multimedia Replied

    Hi Deepina. Some of the links are not working.

Want more articles like this?

Sign up to get the most recent tech news, tips and career advice.