Adding pictures, page 1

If you were successful in making or modifying my Blank Form for typing text and getting it to open in your browser, then move on to this page about pictures.

There should be a blank space or box here for a picture we haven't described yet:

On this page is a 'table' which will crowd the web page text into an easy-to-read column. You may notice that the Source Notepad version of the text doesn't look like this narrow column.

I've seen many of your jpg file pictures in e-mails. Many are 'just the right size' to fit the screen and not too big in kilobytes so they move fast over the phone lines. The web doesn't support super-size high-quality pictures, it knocks down the quality to save time, so don't fight it. About 800 pixels wide and under 80 kb is enough. If some reader wants better for printing, they can ask you for the original file.

Put the picture or a copy or saved-as version into the SAME FOLDER as the html page you wrote earlier. After you get better at links, we can do better at not having to keep pictures in the same folder. But for this first one, this can make your troubleshooting simple.

Write down the file name of the picture EXACTLY as it appears. Including whether the file name extension is capitalized JPG or little jpg
And don't get too carried away with fancy characters and symbols in file names, because a lot of punctuation in a file name could get confused as an HTML instruction.

Then type the name between the quotation marks of this 'Source code' that you see on the Notepad file or VIEW / SOURCE of this page.

Using your photo program, look at the picture width and height in PIXELS. Write it down.

Type the width and height into the code. You can stretch or shrink pictures by accident or on purpose by not using the same width and height.

Now copy and paste that whole IMG SRC line onto your Notepad html page that you wrote earlier.

Save that page. Look at it with your browser, find the page in your C-drive and open it. A quick way to find it is to save that page as one of your Favorites. Use browser REFRESH after you save changes or improvements in the Notepad html file.

If it doesn't look right or work here reading from your C-drive, it ain't gonna get no better after you transfer it. Notice that reading from your C-drive is a lot faster loading compared to what you get from the web. Dont' get fooled into putting a 2 megabyte picture onto your page just because it loads fast from your C-drive. And the browser's history file may get filled up fast if you use big files.

Discover your errors here, from your C-drive, before it gets frustrating. Little punctuation errors can cause a no-show picture.

If the page looked like you expected, then it's worthwhile to transfer to your web space.

The long form of text-typing instructions was on file aBlankForm3a.html, Long form instructions

A stripped simple version of the type-your-own web page is on file aBlankForm3c.html, Fill in the space Short form.

Information on transferring pages from your computer to your Internet provider is on atransfer1.html, How to transfer, page 1.

Information on linking or connecting pages is on blinks1.html, How to add Links, page 1.

Information about how to get your site noticed by search engines is on bmetaname1.html, Adding names to aid Search Engines

**********************************************

Wrote Dec 25, 2003