Using The Image Tag To Decorate Your Webpage

I am very new to using HTML, but in decorating my webpage I found that inserting and modifying images is not nearly as difficult as I thought. Adding images is a great way to draw people to your webpage, and it is a way to make your webpage a lot more personal.

So… to begin, when inserting images you use the image tag, <img>. Unlike other tags, the image tag has no closing tag.

Next, use the src attribute which stands for source. you type src=”url” Now your code should look like this:

<img src=”url” />

Where it says url this is where you are going to insert your image. You want to find an image either from the web or from your own camera that you want on your site. You need to save it as a picture into your index folder where your home page is saved. It is important to make sure the picture is saved as an image and ends with a .jpg. Name the image so that when you insert it into the code it will be found. Once your picture is saved correctly, you are free to insert in between the quotation marks like so….

<img src=”cathedral.jpg” />

Depending on the size of your picture it might be very big or very small, but with a few minor adjustments the size can be changed to fit with your webpage. Like we added the source attribute we also want to add height and width attributes. Type into your code width=”number” and height=”number”.  You can choose any height and width you would like.

<img src=”cathedral.jpg”  width=”100″  height=”100″ />

****NOTE: you can resize your picture using photoshop or Adobe element before you insert it in order to take out some of the grunt work if you would like.

It is very important to save each time you make a new adjustment to an image.

Lastly, there is an alt attribute that can be used in the case that an image cannot be displayed. Type alt=”name of image” and the name of the image will be displayed in the event your image does not appear. Make sure to save once this is done.

<img src=”cathedral.jpg width=”100″ height=”100″ alt=”picture of cathedral” /> 

Hopefully after all of this you have successfully uploaded an image to your webpage. Best of luck decorating!

-Olivia Allegretto

~ by oma12 on September 24, 2012.

%d bloggers like this: