Add an Image in HTML

Building your first website can be an exciting, yet difficult, challenge. An easy way to spruce up your site while you’re still learning HTML is to add an image.

The first thing you’ll need is your <img> tag. This defines the tag, however, you’ll need to add a source or src attribute to display an actual image. This will work for regular images as well as moving images (yay gifs!)

<img src=”the URL where you will take the image from”>

You can also add an alt attribute that will allow you to name an alternate text if your image doesn’t show up.

<img src=”the URL where you will take the image from” alt=”something descriptive about your image”>

Wait! Before you close the tab, you’ll want to add in the height and width in pixels!

<img src=”the URL where you will take the image from” alt=”something descriptive about your image” height=”200” width=”350”>

And now your website looks great with one simple line of HTML!

-Haley Kim

Advertisements

~ by kimhaley on September 22, 2013.

3 Responses to “Add an Image in HTML”

  1. I really liked the style in which you wrote your blog post– it’s engaging for the reader because of your use of conversational language, and the large and clear pictures you use to supplement your tutorial!

  2. It took me a moment to decide what the “most important thing” would constitute, but ultimately no website is visually appealing without some type of visual accompaniment. I also thank you for this post, because I was confused as to how to import an image into my webpage for the homework assignment. I love this: ”something

    I could NOT figure out how to get a comment to accompany my images and this was extremely helpful. Your own comments and dialogue in these sample images are also entertaining which makes the post more fun to read!

    Admittedly I hadn’t seen where you explained how to resize the image. I need to do that!

  3. This was a very engaging post. I mean that in the sense that its style is very fun and for me, when I look at the screenshots they make me laugh and actually understand the steps to the tutorial much better. Your writing style is funny, and makes the tutorial easy to follow.

    For example, in this moment where you define some of the terms, it was very easy to understand what they mean:
    “The first thing you’ll need is your tag. This defines the tag, however, you’ll need to add a source or src attribute to display an actual image. This will work for regular images as well as moving images (yay gifs!)”

    Rather than just saying “add an tag” you actually explained what that tag means and how it will affect the look of your website. It’s a very succinct and fun tutorial to read.

Comments are closed.

 
%d bloggers like this: