Jump to content

Embedding An Image Into Html


katlap1
 Share

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
Link to comment
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" />

Link to comment
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 :)

Link to comment
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!
Link to comment
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.

Link to comment
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.

Link to comment
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.

Link to comment
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
Link to comment
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.
Link to comment
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
Link to comment
Share on other sites

  • 1 month later...
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).
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...