... HTML & Webpages ...

... Recommend this series to a friend.

It's not really our first graphic since the background (jpg or gif) is really a graphic too. So we'll think of this as our second graphic but our first picture. How do we add a picture to our page? First we have to have to picture to place on the page, so it's either in your computer or somewhere out there in cyberspace (on the internet).

If it is a picture you see on the internet, you have to download it to your computer: How? Like we did with the background on page 8. Right-click the picture and click Save Image AS, and in the resulting Save As window, give it a name, and save it to a place. I usually prepare a folder for any special download and initially might have it on my desktop. Now you have the picture in your computer.

And like we did with the background, we now upload the picture into your File Manager. Let's take a little time out here to discuss "organization" … how we organize that File Manager so it makes sense, realizing that in time you will have more than one page, and each page might have a different background (which I don't recommend; let your site be known for one or two background styles), and each page might have its own set of pictures. How this is done is a personal style, but it does have to be planned out; certainly thought about as you build your website.

What I do is have a folder (sub-directory) on my first level File Manager, and I name it "Files". So we understand each other, I call the level where this index.html page is, the "first level". And into this folder I keep all the graphics that I might be using on many pages, pages on this level, and pages in other folders (other sub-directories).

In a way, it's a tradeoff. Putting that one graphic here in this Files folder to be used in many pages in different sub-directories will use less website memory but require longer paths to access the graphic … whereas, putting this one graphic in many folders will use more website memory with shorter paths. And if the picture is large, many of them in your different directories means more memory used. And keep in mine that graphics (and sound files) use tons of memory compared to text.

So let's create a folder (that's a sub-directory like you did in page 8) and name it "Files". And let's upload a picture (this is just for practice) into that Files folder. If you don't have a picture in your computer, or maybe one that caught your eye online, (just for practice now), we will download this picture of eyes. That was a link; click the "download" link. Where or how I got this picture is very interesting but that would take us off our topic; so let's download "eyes". So right-click it, save it someplace in your computer (your desktop?) just remember where it is.

Now return to your File Manager (Files folder), and upload that file, "eyes". The larger the file, or the more files you are uploading at one time, the longer it will take. Sometimes I notice that it doesn't upload the way it should (maybe it takes too long, or after uploading it doesn't open). Just return to the file, wherever you saved it, open it, and save it again (click File, Save, and then close it. Now upload it again; it will overwrite itself, and it should upload properly ... smart is only having experience. With enough practice and experience, you'll be teaching me.

After the uploading, click "Return to File Manager" and click "Up one level" found on top of your list of files (which is only one file now). That brings you back to the first level FM (file manager) and you now open your index.html file for editing. We will place that picture on your page.