HTML : Images ( img tag)

 INTRODUCTION TO HTML

All of the elements you’ve learned about so far (headings, paragraphs, lists, and spans) share one thing in common: they’re composed entirely of text! What if you want to add content to your web page that isn’t composed of text, like images?

The <img> tag allows you to add an image to a web page. Most elements require both opening and closing tags, but the <img> tag is a self-closing tag. Note that the end of the <img> tag has a forward slash /. Self-closing tags may include or omit the final slash — both will render properly.

<img src="image-location.jpg" />

The <img> tag has a required attribute called src. The src attribute must be set to the image’s source, or the location of the image. In this case, the value of src must be the uniform resource locator (URL) of the image. A URL is the web address or local address where a file is stored.



Question 1

This exercise 104 says, “A URL is the web address or local address where a file is stored”. What is a local address and how does it differ from a web address?

Answer

local address refers to the path to an image, file, or resource that exists on your own computer. A web address on the other hand generally refers to the path to an image, file, or resource that exists externally, on a remote computer.


Question 2

Rather than using a url to link to images that exist on the web, can I link to images that are stored locally on my own computer?

Answer

Yes you can! In fact, developers often work locally before pushing their code to production. When dealing with assets like images, we will often want to include them in a folder which will also contain our HTML document. With a properly arranged directory or folder structure, we can create a path which points to our image and is relative to our HTML document. In this scenario, this relative path will be the value of the <img> src attribute.

For more information about relative and absolute paths, take a look at this chapter 11.5k.


Question 3

How can I store my own images online so that I can link to their urls within my own websites?

Answer

There are sites that allow you to upload your images to the web. Once your image is uploaded, you can then use its web address as the value for the <img> element’s src attribute. More commonly, images and project assets are stored within a folder that also contains our HTML document. This allows developers to create paths to be used as src values that are relative to the HTML document. In other words, images and HTML files often exist on the same server or computer.

Comments