| ←Older revision |
Revision as of 07:55, 18 February 2019 |
| (One intermediate revision by the same user not shown) |
| Line 1: |
Line 1: |
| − |
Adding images to your website or social networking profile is a great way to spruce up your page. The HTML code for adding images is straightforward, and often one of the first lessons for an HTML novice.
|
|
| − |
[[Category:HTML]]
|
|
| − |
== Steps ==
|
|
| − |
===Sample HTML for Inserting Images===
|
|
| − |
[[Doc:Insert Image HTML]]
|
|
| |
|
|
|
| − |
===Inserting the Image===
|
|
| − |
#[[Upload-Images-to-the-Internet|Upload your image]]. There are many free image hosting services, such as Picasa Web Albums, Imgur, Flickr, or Photobucket. Read the terms carefully. Some services will reduce your image quality, or take down your image if too many people view it (since this uses up the host's bandwidth).[[Image:Insert Images with HTML Step 1 Version 6.jpg|center]]
|
|
| − |
#*Some blog-hosting services let you upload images using the blog administrator tools.
|
|
| − |
#*If you have a paid web host, upload the image to your own site [[Use-FTP|using an FTP service]]. Creating an "images" directory is recommended to keep your files organized.<ref>http://bit.ly/2tozeqc>
|
|
| − |
#*If you want to use an image on another website, ask the creator for permission. If she grants it, [[Download-Pictures-from-a-Website|download the image]], then upload the image to an image hosting site.
|
|
| − |
#Open your HTML file. Open the HTML document for the web page where the image will be displayed.[[Image:Insert Images with HTML Step 2 Version 6.jpg|center]]
|
|
| − |
#*If you are trying to insert an image on a forum, you can type directly in the post. Many forums use a custom system instead of HTML. Ask for help from other forum-goers if this doesn't work.
|
|
| − |
#Begin with the img tag. Find the point in your HTML body where you'd like to insert an image. Write the tag <nowiki><img></nowiki> here. This is an empty tag, meaning it stands alone, with no closing tag. Everything you need to display your image will go inside the two angle brackets.[[Image:Insert Images with HTML Step 3 Version 6.jpg|center]]
|
|
| − |
#*<font size=4><nowiki><img></nowiki></font>
|
|
| − |
#Find the URL of your image. Visit the web page where your image is hosted. Right-click the image (control-click on Mac) and select "Copy Image Location." You can also click "View Image" to see the image alone on a page, then copy the URL in your address bar.[[Image:Insert Images with HTML Step 4 Version 6.jpg|center]]
|
|
| − |
#*If you uploaded the image to an images directory in your own website, link to it with /images/''yourfilenamehere''. If this doesn't work, the images directory is probably inside another folder. Move it up to the root directory.
|
|
| − |
#Place the URL in a src attribute. As you may already know, HTML attributes go inside a tag to modify it. The '''src''' attribute is short for "source," and tells the browser where to look to find the image. Write src=" " and paste the image URL in between the quotation marks. Here's an example:[[Image:Insert Images with HTML Step 5 Version 5.jpg|center]]
|
|
| − |
#*<font size=4><nowiki><img src="http://bit.ly/2GN9agh>
|
|
| − |
#Add an alt attribute. Technically your HTML has everything it needs to display the image, but it's best to add an '''alt''' attribute as well. This tells the browser what text to display when the image fails to load. More importantly, this helps search engines figure out what your image is about, and lets screen readers describe the image to visually impaired visitors.<ref>http://bit.ly/2tozeqc> Follow this example, changing the text inside the quotation marks:[[Image:Insert Images with HTML Step 6 Version 4.jpg|center]]
|
|
| − |
#*<font size=4><nowiki><img src="http://bit.ly/2tryKQj" alt="my dog eating a tangerine"></nowiki></font>
|
|
| − |
#*If the image is not important to the page content, include the alt attribute with no text (alt="").<ref>https://mzl.la/2GN9bRn>
|
|
| − |
#Save your changes. Save the HTML file to your website. Visit the page you just edited, or refresh the page if you already had it open. You should now see your image. If it's the wrong size or you're unhappy with it for another reason, continue to the next section.[[Image:Insert Images with HTML Step 7 Version 3.jpg|center]]
|
|
| − |
|
|
| − |
===Optional Adjustments===
|
|
| − |
#Change the size of the image. For best results, [[Resize-Digital-Photos|resize the image using free editing software]], then upload the new version. Setting the '''width''' and '''height''' using HTML tells the browser to shrink or expand the image, which can be inconsistent across browsers and (rarely) cause display errors.<ref>http://bit.ly/2tqSxiH> If you want a quick and serviceable adjustment, use this format:[[Image:Insert Images with HTML Step 8 Version 3.jpg|center]]
|
|
| − |
#*<font size=4><nowiki><img src="http://bit.ly/19dj9Y8" alt="display this" width=200 height=200></nowiki></font> ''(Number of pixels, or the more phone-friendly "CSS pixels" in HTML5.)''<ref>http://bit.ly/2tq3AZg>
|
|
| − |
#*or <font size=4><nowiki><img src="http://bit.ly/19dj9Y8" width=100% height=10%></nowiki></font> ''(Percentage of web page dimensions, or percentage of HTML element containing the image.)
|
|
| − |
#*If you only enter one attribute (width or height), the browser should preserve the width:height ratio.
|
|
| − |
#Add a tooltip. The '''title''' attribute can be used to add an additional comment or information about the image. For example, you can credit the artist here. In most cases, this text will be displayed when the visitor hovers the cursor over the image.[[Image:Insert Images with HTML Step 9 Version 3.jpg|center]]
|
|
| − |
#*<font size=4><nowiki><img src="http://bit.ly/19dj9Y8" title="Photograph by J. Godfrey"></nowiki></font>
|
|
| − |
#Make it a link. To make an image that's also a link, insert the image tag inside the '''<nowiki><a></a></nowiki>''' hyperlink tag. Here's an example:[[Image:Insert Images with HTML Part 2 Step 3.jpg|center]]
|
|
| − |
#*<font size=4><nowiki><a href="http://bit.ly/2wJcvZM src="http://bit.ly/2tuc7uc>
|
|
| − |
|
|
| − |
== Video ==
|
|
| − |
|
|
| − |
|
|
| − |
== Tips ==
|
|
| − |
*Keep a backup of the image on your computer, just in case.
|
|
| − |
* Make sure the URL includes the picture's file format (.jpg, .gif, etc).
|
|
| − |
*GIF images work well for logos or cartoons, whereas JPEG images work well for complex imagery such as photographs.
|
|
| − |
*In most cases, you'll want to stick to images with the file formats .gif, .jpeg, .jpg, or .png.<ref>http://bit.ly/2tozeqc> Other formats are unlikely to display correctly on all browsers.
|
|
| − |
|
|
| − |
== Warnings ==
|
|
| − |
*Do not "hotlink" by inserting the URL of another person's website. This uses up bandwidth on that person's site, without bringing any visitors to his page. Besides the bad etiquette, a hotlinked image will disappear if the linked site goes down. If the web host sees what you're doing, he can even change the image that appears on your site.<ref>http://bit.ly/2GN9ewx>
|
|
| − |
|
|
| − |
== Related wikiHows ==
|
|
| − |
*[[Use Font Color Tags in HTML]]
|
|
| − |
*[[Resize iFrames in HTML]]
|
|
| − |
*[[Link Within a Page Using HTML]]
|
|
| − |
|
|
| − |
==Sources and Citations==
|
|
| − |
|
|
| − |
|
|
| − |
__PARTS__
|
|
| − |
|
|
| − |
<!-- Quick Summary code below. Please move/edit via section Edit link if needed. -->
|
|
| − |
== Quick Summary ==
|
|
| − |
|
|
