How to Embed Pictures in HTML Text

by Cameron

You can embed a photo and manipulate its size through special HTML coding. In order to successfully embed a photo to your site, blog or web page, make sure that you have a non-formatted program such as Notepad so that the image will show up online (using Microsoft Word will not work). Double check the coding to make sure that characters are not missing or out of place. Small inaccuracies can prevent the image from properly showing on your web page.

1

Decide whether to add a photo from either the .jpg or the .gif file extension. Choose and entitle the picture file, making sure to add the file extension. For example, if you want to save a picture of a puppy, you can name it "pup.jpg" or "pup.gif."

2

Tag the image in a non-formatted program such as Notepad. Open up a new document in Notepad and apply the image tag <IMG> into the document. Follow up with the source tag and the equal symbol: SRC=. Always begin the image with the source tag to ensure that your image will appear on the web page; <IMG SRC=.

3

Type in your file name. For example, label the tag “pup.jpg” after the image and source tag, placing it in quotes and closing it in with a bracket; <IMG SRC= “pup.jpg”>

4

To increase or decrease the image size, altering the width and height, simply follow up the tags by labeling the width and height measurement in quotes. Close tags with a bracket; <IMG SRC=”pup.jpg”> WIDTH= “100” HEIGHT = “300”>.

5

Save the document under a specified name, making sure to follow the file name with .html so that the image can be viewable online.

Tip

  • check Incorporate the 'ALT' or attribute tag to the coding. The attribute tag helps identify any missing codes on the web page when the image does not show up or load properly. Place the ALT tag after the regular code so that it can show up on your web page if image does not load; alt="pic of puppy" />

Photo Credits

  • photo_camera Ciaran Griffin/Lifesize/Getty Images