Publishing Images using HTML

00:00


Images are essential in making a website more interesting and it engages the readers by helping them visualize what the information is talking about. However, inserting them can tricky as they require many different codes to be typed on Notepad.



Here is an example that you should follow if you want to put simple images on your website.

<html>
<body>
<p>

An image:

<img src="smiley.jpg" alt="Smiley face" width="32" height="32" />
</p>

A moving image:

<img src="hackanm.gif" alt="Computer man" width="48" height="48" />
</p>
<p>

Note that the syntax of inserting a moving image is no different from a non-moving
image

</p>
</body>

</html>

Here are some key things that you need to make sure occurs if you want the images to be published correctly:
  1. Whatever the image you want to insert (whether its a JPG or a GIF), make sure that it is saved somewhere in your computer. It must not be a picture that has not been saved onto your computer. 
  2. After you save the images, remember the name of the image that you saved it as because you are going to need to type the EXACT same name onto the HTML in order for it to uploaded onto the website.
  3. Type the name of the image right following this format:
    <img src=" (name of picture) " alt=(description of the image, in case it fails to load on the website) width="(how big wide you want the image to be in pixels) height="(how high you want the image to be in pixels) />
  4. Another thing to make sure is that if the image is a JPG, you must type in ".jpg" after the name of the image. So if the image is a GIF, then type in ".gif" after the name. This is to ensure that the picture gets published according to how we want it to be published (e.g. a gif is meant to be a moving image, but if the ".gif" is not typed in notepad, then it will either not be published or move). 




You Might Also Like

0 comments

Contributors