Images are another important component of websites. Sometimes these just help bring your website to life, but other times images are critical for communicating information to visitors.
Images are created with the <img> tag. Similar to the <a> tag, <img> requires an attribute, in this case src. The src attribute stands for source and communicates secondary information to your browser that tells it where the image is located.
The following element pulls in an image located in the same folder as the .html file:
<img src="scream.jpeg"/>
The same rules apply here as with the href tag: if the image is not located in the same folder as the document you are writing in, the image will not be found by the browser. If the browser cannot find an image resource, you will see a broken image icon, such as this one from Chrome:
Download and save an image from the web, or move an image from your computer into the same folder as your index.html file.
Tip: Give the file a simple name. Also, the name can not have spaces.
Using the code above as a reference, add that image into your index.html file, re-save the file, and re-open or refresh the page in your browser.
Looking at the code in your index.html file, what type of tag is the <img> tag?
Hint: Compare this tag with your <p> tag.