How To Get Image From Computer To Upload To My Html

As y'all recall from Lesson 1 (What is HTML?), adding a paragraph in HTML is every bit simple as wrapping text in <p> and </p> tags. Adding an image, even so, is a little more complicated.

Follow Along

Before we continue, I encourage y'all to follow forth past copying and pasting today's lawmaking into your ain HTML document (or the folio we created in Lesson ii: How To Create and Save Your First HTML File by Hand). This will allow you to edit the text, and refresh the file in your web browser as we brand edits. This will greatly raise your learning ability.

A Funny Canis familiaris

How to Insert an Image in HTML

Let's pretend we have an image of a dog on our computer saved as "funny-domestic dog.jpg" and nosotros desire to insert it into a webpage; this is the code we would apply:

<img src="funny-dog.jpg">

Let's analyze this code. First, <img> is the code for creating an image element. Side by side, the letters "src" are used as an attribute (which you learned about in Lesson iii: Attributes and Values) and stand for "source". Basically, nosotros need to provide the web browser with a value to the source of the prototype. Naturally, the value for the source aspect is "funny-domestic dog.jpg". This example assumes your epitome file is located in the same directory as your HTML file. If, for example, yous had your image file within a folder named "images" your lawmaking would look like this:

<img src="images/funny-domestic dog.jpg">

Self Endmost Elements

As you tin can run into, in both code examples and then far there has not been an ending </img> tag, because the prototype lawmaking is a "self endmost" element. This is because unlike a paragraph, we won't have a plethora of content inside our <img> element, but rather a unmarried paradigm. In fact, HTML5 does non require us to always "close" our elements, only for organizational reasons I recommend including traditional closing tags for most elements.

In that location is one additional bit of lawmaking we must add together before we are finished. We must assign an "alt" aspect and value to our image. The "alt" attribute stands for "alternative" and is used to provide a text-based alternative for viewers incase the epitome volition not load, or if they are visually impaired. Here is what our code volition look like:

<img src="funny-dog.jpg" alt="A funny domestic dog sitting on the grass.">

How to Insert an Image in HTML

That's it!

If you prefer to watch video lessons instead of reading written lessons check out my 8 60 minutes video course and learn pro-level HTML, CSS, and responsive design.