|
|
Adding images to your site or social networking profile is a fantastic way to liven up your page. The HTML code for adding pictures is straightforward, and frequently one of the first lessons for an HTML beginner.
Part 1
Inserting the Image
Upload your image. There are lots of free image hosting services, including Picasa Web Records, Imgur, Flickr, or Photobucket. Some providers will reduce your picture quality, or take off your picture if a lot of people view it (since this uses up the host's bandwidth).
· Some blog-hosting services let you upload images using the blog administrator tools.
· When you've got a paid web host, then upload the picture to your own site with an FTP service. Creating an "images" directory is suggested to keep your files organized.
· If you would like to use an image on another site, ask the creator for permission. If they grant it, download the picture, then upload the image to a picture hosting site.
Open your HTML file. Open the HTML document to your web page where the image will be displayed.
· If you are attempting to add an image on a forum, then 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 does not work.
Begin with the img tag. Find the point on your HTML body at which you want to add an image. Write the tag <img> there. This is an empty tag, meaning it stands alone, without a closing tag. Everything you need to display your image will go within the two angle brackets.
Find the URL of your image. Go to the web page where your image is hosted. Right-click the picture (control-click on Mac) and then choose "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.
Place the URL in a src attribute. As you may already understand, HTML attributes go inside a tag to modify it. The src feature is short for "source," and tells the browser where to look to find the picture. Write src=" " and paste the image URL in between the quote marks. Here's an example:
Add an alt attribute. Technically your HTML has everything it needs to display the image, but it is ideal to add an alt feature as well. This tells the browser exactly what text to display when thepicture fails to load. More to the point, this helps search engines determine exactly what your image is about, and lets display readers describe the picture to visually impaired visitors. Follow this example, changing the text inside the quotation marks:
Save your changes. Save the HTML document to Your Site. Go to the page you just edited, or refresh the page if you already had it open. You should now see your picture. If it's the incorrect size or you are unhappy with it for another reason, proceed to the next section.
Part 2
Optional Adjustments
Change the size of the image. For best results, resize the image using free editing software, then upload the new version. Setting the width and height using HTML tells the browser to either shrink or expand the picture, which can be inconsistent across browsers and (rarely) cause display errors. If you want a quick and serviceable adjustment, use this format:
Insert a tooltip. The title feature can be used to add an extra comment or information regarding the image. As an instance, you can credit the artist here. In most cases, this text will be displayed when the visitor hovers the cursor over the image.
· <img src="http://example.com/example.png" title="Photograph by J. Godfrey">
Make it a link. To generate a picture that is also a link, insert the image tag inside the <a></a> hyperlink tag. Here's an example: