Lesson 6 – Add a Picture

Let’s recap what you have learned:

  • How to register a domain name
  • How to get a hosting account
  • How to point your domain name at your hosting account
  • How to get your FTP information from your host
  • How to build a basic web page
  • How to upload a page to your hosting account
  • How to get to that page from any web browser, anywhere in the world.

Because you’ve completed these steps up to this point, you know how to do all of this now!

Congratulations!

Next…

Let’s put a picture (and in the next step add a link) on the page you built

In order to do this, you’ll need to open the file you built in your WYSIWYG editor.

So, open index.html inside of your WYSIWYG editor.

Then, to add a picture…

Every WYSIWYG editor is different.

But basically, when you have the page open in your WYSIWYG editor, click insert –> picture –> from file.

(Those are the instructions for FrontPage. If you’re not using FrontPage, it will be something similar to those instructions.)

Find the picture (any picture you are okay having on the Internet) on your computer.

Insert the picture into the index.html page you just built.

Now, here’s a good question for you.

Question: Where is that picture *living*?
Answer: It lives in a folder on your computer.

Chances are good that the picture is not *living* in the same file where you built your index.html.

Look at the HTML CODE of the index.html.

(You do this by clicking the “Code” or “HTML” or “Split” button in your WYSIWYG editor)

Find where it says <img src=”…” in the code.
(CTRL+F usually will do a FIND) on a PC)

Chances are, if you inserted the picture from a file other than where you built index.html, you will have something like this:
<img src=”file:///C:/Documents%20and%20Settings/Jonathan%20Kraft/My%20Documents/My%20Web%20Sites/…………………../filename-whatever-your-picture-is-dsc1234567.jpg”>

PERFECT!

This code tells FrontPage to go and find the picture on your computer.

But, you need FrontPage (or whatever WYSIWYG editor you are using) to find the picture on your web site.

So, we’re going to tell your page to find the picture on your web site.

To do this:

  • Open Filezilla.
  • FTP to your web host. (Remember how to do this? Just click to connect to your web host.)
  • Go into your /public_html folder of your hosting account (or /web or /htdocs, depending on where you are hosting.)
  • Inside of /public_html or /web or /htdocs, create a new folder.
  • Call it: graphics, or pictures, or images.

———————————-
IMPORTANT POINT
Anything after the domain name www.MYDoMaIN.com is case sensitive.
That means that www.MYDoMaIN.com is the same as www.mydomain.com.
But www.mydomain.com/graphics is NOT the same as www.mydomain.com/Graphics.
So KEEP EVERYTHING AFTER THE DOMAIN NAME lower case!
(This tip will save you a lot of time and frustration over the course of your Internet marketing career.)
———————————-

So, you created a folder.

Let’s say you called it graphics.

Inside of FileZilla, on the right hand side, you should now see public_html/graphics.

You should see nothing inside of that folder.

Again, make sure you are inside of the graphics folder on the right hand side of FileZilla.

Next, on the left hand side of FileZilla, navigate to wherever your picture lives on your computer.

Find the picture, and upload it (drag and drop the picture from the left (your computer) to the right (your web host))

(Again, Upload the picture by dragging and dropping it from your computer to your hosting account (inside of the /graphics folder).)

———————————-
IMPORTANT POINT
You do NOT want spaces in ANY file names.
The Internet isn’t friendly to filenames with spaces in them.
So if your picture is called  *  my picture is the best.jpg  * on your computer,
then you want to change it to my-picture-is-the-best.jpg
———————————-

If your picture is called {dog picture.jpg}, then right click on the filename (inside of FileZilla) and rename it to {dog-picture.jpg} or {dog_picture.jpg}.

Now, go back to your WYSIWYG editor.
In the HTML code, where it says
<img src=”file:///C:/Documents%20and%20Settings/Jonathan%20Kraft/My%20Documents/My%20Web%20Sites/…………………../filename.jpg”

Leave the <img src=”, but change the
“file:///C:/Documents%20and%20Settings/Jonathan%20Kraft/My%20Documents/My%20Web%20Sites/…………………..” to
“http://www.WhateverYouCalledYourNewWebsite.com/graphics/filename.jpg”

So, the whole thing should look something like this <img src=“http://www.WhateverYouCalledYourNewWebsite.com/graphics/file-name.jpg”>.

Got it?
If not, just re-read and go for it again.

Then, go to the design or preview screen in your WYSIWYG editor.

Your picture will now load.

However, your picture will NOT load from your computer anymore (where it has been loading from).

It will now load from your web site.

You just changed the place where the file index.html is going to look for your image.

If not, go back and re-read… better yet, go and try it out.

Do this STEP-BY-STEP.

Inch by inch, it’s a cinch.

Once you’ve got the image loading from your website…

Save your index.html file.

Open Filezilla.

Upload index.html (drag and drop inside of FileZilla).

Go to http://www.WhateverYouCalledYourNewWebsite.com/index.html, and refresh the page.

You’ve now put a picture on your web site!

Congratulations!

(This gets much easier the 3rd or fourth time you do it, so try adding more pictures.)

Once again, you might have been just reading along up to this point.

Go take action, and LEARN how to add a picture to your web site.

YOU CAN DO IT! Go make it happen!

Now, if you want, post below, and say something like:

“I DID IT! I uploaded a picture and uploaded my page and now the picture shows on my page!” and then if you want, post a link to your new page with a picture on it.

2 thoughts on “Lesson 6 – Add a Picture”

  1. Do you mind if I quote a few of your posts as long as I provide credit and sources back to
    your weblog? My blog site is in the exact same area of interest as yours
    and my users would definitely benefit from a lot of the
    information you present here. Please let me know if this ok with you.
    Thanks!

  2. Hey Veronica,

    I don’t mind at all. Thanks for your comment and definitely quote posts and provide links back. Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *