Html code for image inserting

How to Insert Images with HTML

wikiHow is a “wiki,” similar to Wikipedia, which means that many of our articles are co-written by multiple authors. To create this article, 45 people, some anonymous, worked to edit and improve it over time.

The wikiHow Tech Team also followed the article’s instructions and verified that they work.

This article has been viewed 1,981,727 times.

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.

Sample HTML for Inserting Images

Inserting the Image

• 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 using an FTP service. Creating an «images» directory is recommended to keep your files organized.
• If you want to use an image on another website, ask the creator for permission. If she grants it, download the image, then upload the image to an image hosting site.

• 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 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.

• 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=»https://www.wikihow.com/Insert-Images-with-HTML» and paste the image URL in between the quotation marks. Here’s an example: [1] X Research source

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. [2] X Research source Follow this example, changing the text inside the quotation marks:

• If the image is not important to the page content, include the alt attribute with no text (alt=»»). [3] X Research source

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.

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 shrink or expand the image, which can be inconsistent across browsers and (rarely) cause display errors. [4] X Research source If you want a quick and serviceable adjustment, use this format:

• (Number of pixels, or the more phone-friendly «CSS pixels» in HTML5.)[5] X Research source [6] X Research source
• or (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.

Источник

HTML Tag

The tag is used to embed an image in an HTML page.

Images are not technically inserted into a web page; images are linked to web pages. The tag creates a holding space for the referenced image.

The tag has two required attributes:

• src — Specifies the path to the image
• alt — Specifies an alternate text for the image, if the image for some reason cannot be displayed

Note: Also, always specify the width and height of an image. If width and height are not specified, the page might flicker while the image loads.

Tip: To link an image to another document, simply nest the tag inside an tag (see example below).

Browser Support

Attributes

Attribute	Value	Description
alt	text	Specifies an alternate text for an image
crossorigin	anonymous use-credentials	Allow images from third-party sites that allow cross-origin access to be used with canvas
height	pixels	Specifies the height of an image
ismap	ismap	Specifies an image as a server-side image map
loading	eager lazy	Specifies whether a browser should load an image immediately or to defer loading of images until some conditions are met
longdesc	URL	Specifies a URL to a detailed description of an image
referrerpolicy	no-referrer no-referrer-when-downgrade origin origin-when-cross-origin unsafe-url	Specifies which referrer information to use when fetching an image
sizes	sizes	Specifies image sizes for different page layouts
src	URL	Specifies the path to the image
srcset	URL-list	Specifies a list of image files to use in different situations
usemap	#mapname	Specifies an image as a client-side image map
width	pixels	Specifies the width of an image

Источник