|
How do I add a picture to my Web page?I've been reading your Creating Cool Web Sites book, and what I'd like you ask you is how do I put a picture on website? Even though you have mentioned it I am not sure what to write in the <img src='__" />. I am not sure where you get that part if you want to download a picture from the Internet. It would be a great help. If you're trying to add a picture on your Web page that's already somewhere else on the Internet, there are two different ways you can accomplish this task. The first one, the easier one, is to simply right click (or, if you're on a Mac, Control-click) on the image when you view that page that hosts it. Your Web browser will pop up a menu of options, one of which will be something like "Copy Image Location" or "Copy Image" or similar. Do that. Now the fully qualified URL of the image is in your copy and paste buffer. Go to the source of the Web page where you want to add the image then use the menu option Edit --> Paste to copy the URL of the image into your own Web page. Save the page. Done! Here's an example of this. Let's say you were visiting the Department of Homeland Security Web site and really liked its logo. You right click on the image on the page then choose "Copy Image". Now your copy and paste buffer will have this: http://www.dhs.gov/dhs/images/dhs-header-title.jpg
To include that graphic on your own page, you'll want to type in the following: <img src="" />
then place your cursor between the two quotes and choose Edit --> Paste. Now it'll look like this: <img src="http://www.dhs.gov/dhs/images/dhs-header-title.jpg" />
Add that to your page, load your page in a Web browser, and you'll see this:  Make sense? The other way you can do this is to download the image to your own computer, then upload it to your Web server and use a local reference. It's more complicated, but that way the Government site doesn't have to serve up graphics for your personal page. To do this, right click on the image as before, but this time choose "Save Image As..." and save it to your Desktop, naming it suitably for your uses. Now use whatever tool you use to upload your HTML files to your public server (probably an FTP tool of some sort) and upload the graphic file itself. Let's say that it's called dhs-header-title.jpg for purposes of explanation. Since you've uploaded it into the same directory that will contain your HTML, your HTML references to the image are simply: <img src="dhs-header-title.jpg" />
Before we leave this answer, however, a brief note that regardless of what type of site you're building, commercial or personal, you should respect the copyright and intellectual property ownership of images on other sites. Just because the Motorola logo looks cool doesn't mean you have a legal right to include it on your site, copied or otherwise. Some sites don't have this restriction, notably governmental sites, but the vast majority of Web sites out there should be assumed to have protected or legally off-limits images. If there's any doubt, email the webmaster and ask for permission. Hope this sheds some light on your puzzlement!
Categorized:
HTML and CSS
(Article 4068,
Written by Dave Taylor)
Tagged: Previous: What's typosquatting? Next: Won auction on eBay, paid, but never received the goods? Subscribe!
REGARDING PUTTING IMAGES ON YOUR WEBSITE. I HAVE JUST STARTED LEARNING WEB DESIGN SO I HAVEN'T PUT ANYTHING ON THE WEB JUST YET, STILL WRITING PROGRAM. I AM USING PERSONAL PHOTO'S IN MY PICTURES FOLDER. WHEN I GO ONLINE AND OPEN MY HTML IT SHOWS EVERYTHING BUT THE PICTURE IS A RED X IS THIS OK OR IS MY PICTURE NOT GOING TO SHOW ON THE WEB SITE. IF IT'S OK HOW CAN I TELL IF THE POSITIONING IS OK, IF NOT DO YOU KNOW WHY I CAN'T GET IT TO FIND THE PHOTO'S? I PUT IN THE FULL ADDRESS OF THE FOLDERS. THANK YOU. Posted by: SANDY at February 22, 2007 8:46 AMhey Mr. Dave,
thanks How do I get a picture to show up in the tile bar of the web browser when my web site is up? I think this is a really classy touch and I would like to add it to my site - which I am currently building. Posted by: DaveP at July 24, 2007 1:42 PMI got my cousin to take some pictures of me on her phone and email them to me so I could add them to My Space and I can't get them on there for nothing. I tried saving them to a folder called "Pictures to add to sites" but now I can't find that anywhere. Man this is driving me crazy. I'm about ready to throw this damn computer out of the window. Please help me man. I have several different sites that I really need to place these pictures so I can be seen but no matter what I do I'm still left looking at a blank space where my photo should be. What's worse is so are the ladies I want to see them. Please man. HELP!!! Posted by: fuse1318933 at October 1, 2007 1:10 PMHey there I just need some information , about enlarging phone photos downloaded on my computer through a D600 Samsung mobile phone , I was on holidays overseas and had to purchase a PREPAID CARD,at the mobile shop my phone was not switched off,to replace the original sim card with one off theres , so all the phone picture settings were lost I did not know it till i got back home. T he pic size is 240 x180 , Type JPEG, Size 3.78 kb some are at a higher up to 7 kb, is there any way to enlarge them without deforming the pic , I do hve quit a lot of pics. Please advice me best regards Bassile Anastasopoulos Hello I am trying to post a picture on a webpage stored in a temp folder in the c drive. Is it possible to give me an example in code how to do this Thank you Posted by: costa at August 8, 2008 8:32 PMThe first part of your article where you instruct folks to copy an image's location and paste it to our own websites is called hotlinking, and is a BIG no-no. Hotlinking images from other web sites which are not your own is bad because the image does not belong to you and may not be in the public domain (and could be copyrighted). Moreover, hotlinking is stealing bandwidth. Saying "It's more complicated, but that way [their] site doesn't have to serve up graphics for your personal page." Right you are. But you basically are using up this other web site's resources when you do that. Like hooking up your cable TV from your neighbor's, instead of your own. A good web expert would advise against such tactics. Thanks, beej Posted by: beej at October 10, 2008 11:35 PMYou raise a good point, Beej, but I'm not sure I'd go for the rhetorical flourish of "stealing". If you're writing about a company and include a graphic from their site, it's more akin to free promotion or advertising than any sort of theft. Anyway, yeah, everything being equal, it's better to host all images on your own server. And it's always a good idea to ensure that you aren't violating any intellectual property or fair use rules. Posted by: Dave Taylor at October 11, 2008 8:27 AMI followed your instructions on putting a picture on my website with html. Thank you, your wording was so easy to understand. Now the problem, when I viewed my website, the picture was huge. Just FYI, my husband viewed it on his pc and it was huge too, I am working on a Mac. So I reduced the photo and did all the same steps over again. It looks GREAT on my screen but only shows up as a square box with some kind of drawing inside it on all our pc's. I've tried everything I can think of. Do you know what would cause this? Thanks, Mary PS I had a friend with a Mac look it up and it was great on her screen too. Posted by: Mary at January 26, 2009 10:45 AMHow do I get a picture of myself to someone on a web site? Posted by: michael vizzari at May 3, 2009 5:16 AMI want my picture from my phone gallery to the internet Posted by: Ikedi ohaegbu at August 30, 2009 4:38 AMREGARDING PUTTING IMAGES ON YOUR WEBSITE. I HAVE JUST STARTED LEARNING WEB DESIGN SO I HAVEN'T PUT ANYTHING ON THE WEB JUST YET, STILL WRITING PROGRAM. I AM USING PERSONAL PHOTO'S IN MY PICTURES FOLDER. WHEN I GO ONLINE AND OPEN MY HTML IT SHOWS EVERYTHING BUT THE PICTURE IS A RED X IS THIS OK OR IS MY PICTURE NOT GOING TO SHOW ON THE WEB SITE. IF IT'S OK HOW CAN I TELL IF THE POSITIONING IS OK, IF NOT DO YOU KNOW WHY I CAN'T GET IT TO FIND THE PHOTO'S? I PUT IN THE FULL ADDRESS OF THE FOLDERS. THANK YOU. Posted by: hashif at November 24, 2009 4:18 AMI switche my web page from a verizon host to a comcast host. Everything came up but the pictures. How do I get the pichures back on? I have all the photos on my computer. Please if you can help me. Thank Frank Posted by: frank brancaccio at June 2, 2010 1:10 PMYeah it really is stealing. If someone pays for their web hosting based on bandwidth used, and you hotlink a bunch of their content - you are making their internet bill higher than it should be, so that really is like stealing. Because the person paying for the service is not even getting any benefit from it - you would be. Posted by: Dave at June 21, 2010 1:45 PMi have simple button-OPEN-in my pics.i need a site to upload pic and embed an http address in it. my website has one page. i need to drop and drag the button where i want it. button will be clicked on to re-direct to my forum.please help! im so tired of searching. my hosting is running and i cant publish without this link!! please!! Posted by: nick at July 23, 2010 12:34 PMplease tell me the method that how do i store pictures in my web page? Posted by: shahid at July 24, 2010 4:00 AMMr. Taylor Frank, what you're talking about is what's called a "favicon" and I have an article on how to set that up too: http://www.askdavetaylor.com/how_to_include_favicon_ico_web_page_blog.html Hope that's helpful! Posted by: Dave Taylor at November 14, 2010 8:31 AMhow can i adding flash or media player on my web page .please tell me tags Posted by: waqas at November 23, 2010 8:01 PMhow do you add pics to your website, that are on your computer already ? Posted by: andrew at April 1, 2011 10:39 AMhow do i add browse option on my web page kindly told me code that a person can upload pic on web by browsing her/his computer. Posted by: maaz at July 5, 2011 10:58 PMThank your explanation was very helpful. Posted by: Adelaide Fiske at July 10, 2011 6:54 PMHi Dave i have goole home page but google it self will not come up same with face book writing on outer edge but not sign in page could you help Hi. i want to add a picture on webpage from my computer using html.so please ask me that how to set path of image. How can I update my company website like pictures,new,,change of address and any sort of changes how can I do it please help Posted by: Donald at September 18, 2011 11:44 PMHello Dave, I'm using my computer as a server in this case and followed you instructions above by saving the picture in the same folder where my HTML is saved. I tried to link it in the page source but it didn't work. Posted by: Ash at September 23, 2011 11:45 AMonly for mozilla firefox Posted by: legend at January 8, 2012 11:07 PMI have something to say, now that you mention it, but ...
I do have a comment, now that you mention it!
|
Recommended
Recent Entries
Search
I Need Help!
Apple iPad Help
Articles and Reviews Auctions and Online Shopping Blogs and RSS Feeds Building Web Site Traffic Business and Management CGI Scripts and Web Site Programming Computer and Internet Basics d) None of the Above Facebook Help Google Plus Help HTML and CSS Industry News and Trade Shows iPhone and Cell Phone Help iPod, Sony PSP and MP3 Player Help Mac OS X Help Pay Per Click (PPC) Advertising Search Engine Optimization (SEO) Shell Script Programming Tech Support Video Help The Writing Business Twitter, LinkedIn and Social Network Help Unix and Linux Help Video Game Tips and Help Windows PC Help WordPress Help |
Note: This web site is for the purpose of disseminating information for educational purposes, free of charge, for the benefit of all visitors. We take great care to provide quality information. However, we do not guarantee, and accept no legal liability whatsoever arising from or connected to, the accuracy, reliability, currency or completeness of any material contained on this web site or on any linked site.
![[whiteboard marker tray]](/Graphics/marker-tray.gif){kind=small}
