Content

• To step
• Method 1 of 1: Inserting Images with HTML
• Tips
• Warnings

Adding images to your website or social network profile is an excellent way to dress up your web page. HTML (HyperText Markup Language) has many functions for creating web pages, but fortunately the code you need to add images is not too difficult.

To step

Method 1 of 1: Inserting Images with HTML

1. Upload your image to a free hosting website, such as Photobucket or TinyPic, that allows hot linking. Hot-linking allows for a direct link of an image to the website server; some providers have banned this because hot-linking uses their bandwidth and takes up space on their servers.
   • If you have a paid hosting account, upload the images directly to the server where your website is placed. This is always more reliable than a free site and doesn't have to be expensive at all.
2. Open a new document in a text editor (e.g., Notepad / Notepad) or open the page in your website / profile where you can change the HTML code directly.
3. Start with the img tag. The img tag is empty, meaning no closing tag is needed. However, for XHTML validation you can still put a space and a slash in front of it greater than sign.
   • img />
4. There are many available attributes, but only one is necessary:src. That is the location / address, or also the URL, of your image.
   • img src = "URL of image" />
5. Next you have to alt add attribute. This shows an alternate text, in case the image fails to load. This is also a service for the visually impaired that uses screen readers.
   • If you hover the cursor over an image, this text is also shown as a tooltip, but this is only the case in Internet Explorer. The solution that works with all browsers (Firefox et al.) is to it title attribute to use in addition to alt. (You can omit the latter if you don't want the image to have a tooltip.)

As an example:img src = "URL of image" alt = "Just in case" title = "Tooltip" />

1. Now you could indicate the size of the image with the height and width attribute, and by specifying the pixels or a percentage. Note that resizing in this way only changes the size of the view, not the size of the image itself. To shorten the loading time of an image, it is better, especially with large images, to reduce them in advance with photo editing software or with an online service such as PicResize.com.
   • img src = "URL of image" alt = "Just in case" title = "Tooltip" height = "50%" width = "50%" />
   • img src = "URL of image" alt = "Just in case" title = "Tooltip" height = "25px" width = "50px" />

Tips

• The value for these attributes is either given in pixels, or as a percentage, from 1-100%.
• The image can be placed anywhere on the web page, using the various formatting attributes such as top, bottom, middle, right, left etc.
• The hspace attribute is used to insert horizontal space to the left and right of an image, while the vspace attribute is used to make room at the top and bottom of images and other objects.
• Don't indulge too much with images. That looks messy and unprofessional.
• GIF images are fine for logos or cartoons, but this file type is less suitable for photos and other images with many colors.
  • GIF images only support 8-bit color with a maximum of 256 colors for an image. It is therefore to be expected that the reproduction of a 16 or 24 bit color illustration or photo will be less good.
  • GIF images also support transparency. One bit of transparency is possible, which means that one color can be made transparent.
  • Interlacing is also supported by GIF images which means that the site visitor will get an idea of ​​what the image will look like before it is completely loaded.
  • The GIF format also supports animation.
• Make sure the URL states the file format of the image (.webp .gif etc).

Warnings

• Don't Hotlink!