Jump to content
katlap1

Embedding An Image Into Html

Recommended Posts

I'm studying the tutorial for html, and I've gotten to the part of embedding an image. I've tried several ways of referring to any number of pictures I have on my computer, but I just get a little empty box on my "web page". I'm not sure what I'm doing wrong.This is what I've written:<img src="desktop/webpage images/thumbnailP1040317.jpg" width="144" height="50" />I've tried variations of the above, & still no avail. This image is a tiny picture of one that I have taken, but it comes out a box with a broken picture icon in the upper left corner.Thanks for any advice!katlap1

Edited by katlap1

Share this post


Link to post
Share on other sites
I'm studying the tutorial for html, and I've gotten to the part of embedding an image. I've tried several ways of referring to any number of pictures I have on my computer, but I just get a little empty box on my "web page". I'm not sure what I'm doing wrong.This is what I've written:<img src="desktop/webpage images/thumbnailP1040317.jpg" width="144" height="50" />I've tried variations of the above, & still no avail. This image is a tiny picture of one that I have taken, but it comes out a box with a broken picture icon in the upper left corner.Thanks for any advice!katlap1
I don't know for sure but try adding (../) to the link.
<img src="../desktop/webpage images/thumbnailP1040317.jpg" width="144" height="50" />

Share this post


Link to post
Share on other sites

Unless your web page is located in the parent of desktop/, that code won't work. If it is located on your desktop, then scout's code will work (or just omit the desktop bit all together). If it is anywhere else, either reference it absolutely, or have fun figuring out how many levels you have to go up. Or just move the image file to the same location as the web page :)

Share this post


Link to post
Share on other sites
Unless your web page is located in the parent of desktop/, that code won't work. If it is located on your desktop, then scout's code will work (or just omit the desktop bit all together). If it is anywhere else, either reference it absolutely, or have fun figuring out how many levels you have to go up. Or just move the image file to the same location as the web page :)
Thanks Scout & Synook, but....This is where my webpage & picture are (the same folder on my desktop), so I tweaked it to be more accurate...and this is what I have now (but still isn't working):<img src="C:/Documents and Settings/Owner/desktop/webpage images/thumbnailP1040317.jpg" width="144" height="50" />Any other ideas?Appreciate it, folks!

Share this post


Link to post
Share on other sites

If your html page is in this folder:C:/Documents and Settings/Owner/desktop/And the images are in this folder:C:/Documents and Settings/Owner/desktop/webpage images/then all you need to do to link to the image is this:<img src="webpage images/thumbnailP1040317.jpg" width="144" height="50" />Its a relative path to the image, which makes it more flexible when moving documents around either locally on your computer or when it comes to uploading the page onto the web, as you dont have to change all the paths in every referenced file throughout all your pages.Hope that helps.

Share this post


Link to post
Share on other sites

Tehcnically that should be:

<img src="webpage%20images/thumbnailP1040317.jpg" width="144" height="50" />

Because spaces aren't allowed in URLs.

Share this post


Link to post
Share on other sites
Tehcnically that should be:
<img src="webpage%20images/thumbnailP1040317.jpg" width="144" height="50" />

Because spaces aren't allowed in URLs.

OMG! It worked! Thank you, thank you, thank you! Now I can move onward & upward!Sincerely,Katlap1

Share this post


Link to post
Share on other sites

Note that if you plan to test websites out on your desktop machine you should install a server package such as WAMPserver so that you can operate in a realistic environment.

Share this post


Link to post
Share on other sites
Note that if you plan to test websites out on your desktop machine you should install a server package such as WAMPserver so that you can operate in a realistic environment.
Thanks again.I've looked at the site for downloading WAMPserver and, for now, it's over my head with information. I'm looking for how much space it takes, and all I see is 16Mo, whatever that means. Is this program in the W3Schools.com tutorials? Is this something I need to build a website? I'm running XP w/76GB hard drive, but also have a 700GB external drive. Is this OK for WAMPserver?I won't bug you again (at least until I run into a snag again)! :) katlap1

Share this post


Link to post
Share on other sites

A web server is something that, well, serves web pages using the HTTP protocol. If you just access the pages locally (using the file:/// protocol) like you are now, you aren't really viewing a website, you're just loading up the HTML code in your browser. When you eventually host your site, your host's machines will all be running web servers.

Is this something I need to build a website?
While it is not necessary, per se, to use a web server when creating a website, it helps to have, as stated, an environment that is similar to the one you will have when you eventually put your website online. This way you can get results that will be much more in line with what you eventually see. Also, when you begin server-side scripting (eventually), you will need a web server to interpret your pages.
I'm running XP w/76GB hard drive, but also have a 700GB external drive. Is this OK for WAMPserver?
Don't worry - the requirements for a WAMP stack such as WAMPserver are very low.P.S. Read the Wikipedia article on web servers.P.P.S. Mo = Megaoctet (the "octet" meaning 8 bits), another attempt to clear up the binary/decimal confusion for digital information units (the other attempt being the kibi- (kilo-binary-), mebi- (mega-binary-), etc. prefix scheme). 1 Mo = 1,000,000 bytes, while 1 MiB = 1,048,576 bytes. The term "megabyte" can be found to mean both values.

Share this post


Link to post
Share on other sites
A web server is something that, well, serves web pages using the HTTP protocol. If you just access the pages locally (using the file:/// protocol) like you are now, you aren't really viewing a website, you're just loading up the HTML code in your browser. When you eventually host your site, your host's machines will all be running web servers.While it is not necessary, per se, to use a web server when creating a website, it helps to have, as stated, an environment that is similar to the one you will have when you eventually put your website online. This way you can get results that will be much more in line with what you eventually see. Also, when you begin server-side scripting (eventually), you will need a web server to interpret your pages.Don't worry - the requirements for a WAMP stack such as WAMPserver are very low.P.S. Read the Wikipedia article on web servers.P.P.S. Mo = Megaoctet (the "octet" meaning 8 bits), another attempt to clear up the binary/decimal confusion for digital information units (the other attempt being the kibi- (kilo-binary-), mebi- (mega-binary-), etc. prefix scheme). 1 Mo = 1,000,000 bytes, while 1 MiB = 1,048,576 bytes. The term "megabyte" can be found to mean both values.
Thank you once again! I'm headed over to the wikipedia site. I appreciate your time.Sincerely,katlap1

Share this post


Link to post
Share on other sites
use <img></img> tags to insert a image.
Please try not to bump old resolved threads. Also, the <img> element is empty, that is, it has no closing tag (i.e. what the OP wrote the first time).

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...