How to insert an image into HTML: 6 steps

Table of contents:

How to insert an image into HTML: 6 steps
How to insert an image into HTML: 6 steps
Anonim

Adding images to a website or social media page is a great way to decorate a page. HTML (Hypertext Markup Language) has many features for web programming, but the code required to insert images is extremely simple.

Steps

Method 1 of 1: Insert Image into HTML

Insert Images with HTML Step 1
Insert Images with HTML Step 1

Step 1. Upload the image to a free hosting like Photobucket or TinyPic, which allows other servers to use the resources

On some sites, this is prohibited because it takes up bandwidth and server space.

If you have a paid hosting account, upload the image there. It's more reliable than a free site

Insert Images with HTML Step 2
Insert Images with HTML Step 2

Step 2. Open a new document in a text editor (for example, in Notepad), or a page on the site, or a profile, where you can change HTML

Insert Images with HTML Step 3
Insert Images with HTML Step 3

Step 3. Start with the img tag

The img tag is single, meaning it does not need an end tag, although you can add a space and a slash to achieve XHTML compliance.

Insert Images with HTML Step 4
Insert Images with HTML Step 4

Step 4. There are many items available, but only absolutely necessary:src. It points to the location or URL of the image.

Insert Images with HTML Step 5
Insert Images with HTML Step 5

Step 5. Next, you need to add an alt element

He is responsible for the text that will be shown if the image for some reason does not load. This text can also be used by blind users who use screen readers.

  • If you hover over the image, the fallback text will be shown in the explanation of the action, but only in Internet Explorer. Cross-browser solution (works in Firefox and others) is to use the title element in addition to the alt. Don't do this unless you want to explain the steps.
  • For example:
Insert Images with HTML Step 6
Insert Images with HTML Step 6

Step 6. Now with the elements height and width you can set the dimensions of the image, as well as specify pixels or percentages

Note that resizing this way will resize the displayed image, the browser will still load the original image size. If your image is too large, then resize it in an image editor program, PicResize.com will do.

Advice

  • The value of these elements is indicated either in pixels or as a percentage from 1 to 100.
  • A picture or image can be placed anywhere on a web page with the element top, bottom, middle, right, left, etc.
  • The hspace element is used to create white space horizontally from the image, left or right. Vspace element - top or bottom.
  • Do not overdo it with images, everything will look chaotic and unprofessional.
  • GIF images are suitable for logos and cartoons; JPEG is better for complex images such as high quality photographs.

    • Interleaving is also supported, i.e. even before loading, the user can estimate how the image will look.

Popular by topic