This is because unlike a paragraph, we won’t have a plethora of content inside our element, but rather a single image. If, for example, you had your image file inside a folder named “images” your code would look like this: Self Closing ElementsĪs you can see, in both code examples so far there has not been an ending tag, because the image code is a “self closing” element. This example assumes your image file is located in the same directory as your HTML file. Naturally, the value for the source attribute is “funny-dog.jpg”. Basically, we need to provide the web browser with a value to the source of the image. Next, the letters “src” are used as an attribute (which you learned about in Lesson 3: Attributes and Values) and stand for “source”. First, is the code for creating an image element. Let’s pretend we have an image of a dog on our computer saved as “funny-dog.jpg” and we want to insert it into a webpage this is the code we would use: This will greatly enhance your learning ability. This will allow you to edit the text, and refresh the file in your web browser as we make edits. Follow Alongīefore we continue, I encourage you to follow along by copying and pasting today’s code into your own HTML document (or the page we created in Lesson 2: How To Create and Save Your First HTML File by Hand). Adding an image, however, is a little more complicated.
As you recall from Lesson 1 (What is HTML?), adding a paragraph in HTML is as simple as wrapping text in and tags.