The ability to add images to webpages was in the very first HTML specification. That's how important it is. The best part is that adding images is both important, and easy. What a great combination.
<imgtag- tag attributes
When we bring an image into an HTML document, we’re essentially telling the browser where to find it so that it can be displayed. We do this by adding some more information into the HTML tag, and, when it comes to images, the tag we want to use is the img tag.
On the left you will see the following code:
<img src="https://curriculum-content.s3.amazonaws.com/web-development/FIS_New_Logo.png">On the right you see our logo. This tag has something you've never seen before: an attribute. The image tag has one attribute called the src attribute. To load an image, we set the src attribute to equal the URL (wrapped in quotation marks) of the image we want. In this specific case the URL is:
https://curriculum-content.s3.amazonaws.com/web-development/FIS_New_Logo.png
If we wanted to change the image to something else, we just need to change the URL to be a different image. Here is another URL to use:
https://curriculum-content.s3.amazonaws.com/web-development/circle_logo.jpg
Go ahead and change the HTML code to use this new URL like this:
<img src="https://curriculum-content.s3.amazonaws.com/web-development/circle_logo.jpg">You should now see our circle logo instead of the full logo. Congratulations! You now know how to add images to websites using the img tag with a src attribute.
Some HTML tags have extra information or instructions embedded in them, which we call attributes. We use the src attribute in an img tag to point the browswer to the location of an image we want to display.
- attribute
Next, we’ll take a look at one of the other most-used HTML tags: the link tag.