Inserting a picture/image

@kecswimSep 01.2005

This is my first post, so please bear with my incompetence of building a web page. I am a coach who is trying to insert pictures onto my web page. I have read up on htmlgoodies about putting in an image using <img src=”….”>.

I have the pictures saved in the proper folder, but still only a box appears when I go to view the page. Any suggestions? Am I making a mistake somewhere?

to post a comment

HTML

12 Comments(s) _↴

@Wiz_CreationsSep 01.2005 — #you may need to use [I]../[/I] to go up on level (up one folder) to reach the image.

example:

[mainfolder]

[INDENT][image.jpg]

[filefolder]

[INDENT][file][/INDENT][/INDENT]

tag would be <img src="../image.jpg">

can you give more of a description of whats wrong, besides just that the image doesn't come up?

@kecswimauthorSep 01.2005 — #I tried the ../, and no luck. Currently, after writing the img src="...." I get a litte white box with a red X. This box is appearing in the correct location, just no picture.

Further suggestions?

Thanks

@bathurst_guySep 01.2005 — #First check that the image is uploaded to the server and that the image has correct permissions (CHMOD). You can test this by directly accessing the image from your browser (eg; http://www.yourwebsite.com/images/image.jpg). If you can see the image all is good, otherwise open your ftp program and check the properties of the image, there should be a section on permissions, set it to 0755 or just make sure that it is viewable for world. Second, check that the link on the website (<img src="...">) is linking to the correct folder and image in relation to the file that is trying to access it, if you have problems with this, try an absolute link (http://www.yourwebsite.com/images/image.jpg) and then check. Still no luck? Try me again :p

@kecswimauthorSep 01.2005 — #Thanks, does it matter if I haven't yet put my page on the web yet? If not, could you explain some things in your post (I am brand new to this language). For example, what is CHMOD? FTP?

Thanks again

@KravvitzSep 02.2005 — #CHMOD is short for "change mode". It's a command in Linux and Unix.

FTP is the file transfer protocol. It's how most people upload files to their sites.

@kecswimauthorSep 07.2005 — #I have tried the recommendations of the posts and still am having difficulties.

Everyone I speak to says inserting a picture onto a web page is easy, but not for me.

If anyone could walk me through an example of how they would do this I would greatly appreciate it (i.e. from finding the picture you want, where to save it, how to write it in notepad to retrieve it, etc...)

Thanks again!

@ray326Sep 08.2005 — #how to write it in notepad to retrieve it[/QUOTE]I'd suggest you use [url="http://htmlkit.com"]HTML-kit[/url] instead of Notepad. It will give you lots of help along with a quick preview so you can learn faster. Tip #1 is to start with the graphic file (e.g. graphic.gif) and the HTML page in the same directory on your disk. The image src will then simply be src="graphic.gif". If you then make an "images" directory under that directory and move the graphic file into it the src becomes scr="images/graphic.gif".

@tabzterSep 08.2005 — #If you can do it on your home computer first then you will find it much easier to transfer onto the internet later on. Heres a step by step guide of what to do:

// Im assuming that your picture is called [I]me.jpg[/I]

1) Create a folder on your desktop called [I]web[/I].

2) Move your picture file into this folder.

3) Open up notepad (or any other text editor) and type in the following code:

<html>

<head>

<title>Your title here</title>

</head>

<body>

<img src="me.jpg"></img>

</body>

</html>
[/QUOTE]
4) Save this file as "index.html" (make sure save as type... all files (*) is selected)

5) Open the newly created file called index.html - there should be your picture in there.

-----------Now to upload-------------

If you have a website already, then you must use an ftp program such as "cuteFTP" or "WS FTP Pro" to transfer all of the contents in the web folder (2 items) on your desktop to your website. You must provide your username and password in these programs to access the server that will host your website - so have these handy.

A much easier way - especially for people new to this is to use free web hosting from, for example http://geocities.yahoo.com, that provide their own simple file transfer routines with a helpful step-by-step analysis of how to do it.

@kecswimauthorSep 08.2005 — #Thank you for all who are trying to help. I have taken all the suggestions and still come up empty.

I still receive an empty box where the jpg. should be, with a little red X box inside.

I right clicked on it to find the properties of the picture and wanted to share them in hopes of finding my mistake.

Under Properties it says:

Protocol: File Protocol

Type: Not available

Adress: blah, blah, blah

Size: Not available

Dimension: 100x100 pixels

Created: Not available

Modified: Not available

Does this mean anything, or at least should it to me???

Thanks again...I'll keep taking any suggestions!

@tabzterSep 09.2005 — #Just Use a web editing tool like "Microsoft Frontpage" or "Macromedia Dreamweaver" and I cant see it not working.

Actually I think you can do it in MS word, just save as web page.

@ellicitSep 09.2005 — #have you tired doing what bathurst said?

if nothing works trying placeing " <base href="http://www.yoursite.com/images/"> " on top of the page... maybe that might help..

@ray326Sep 09.2005 — #Under Properties it says:

Protocol: [B]File Protocol[/B]

Type: Not available

Adress: blah, blah, blah
[/QUOTE]
If you're really getting that from the web page as served from the web server and not from your local disk, that tells me your img tag has a src="file:///....", which is not right but a common situation with some misconfigured editors. (The old Netscape Composer used to be really bad about that.)

Also in #HTML _↴

Internet Explorer Sound Layer over and <embed> object?How could I realise a website banner using a frame?

Success!

Help @kecswim spread the word by sharing this article on Twitter...

Tweet This

Inserting a picture/image

12 Comments(s) _↴

Also in #HTML _↴

Success!

Social

Version

Inserting a picture/image

12 Comments(s) ↴

Also in #HTML ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

12 Comments(s) _↴

Also in #HTML _↴