Media forms a big part of the web comprising of mainly images, videos and audio. Truth be told, media makes the web colorful❤️. Before we begin seeing how we can use media on web pages, here’s a general rule—all media to be used in your website should be inside a folder (that is, if you’re not going to use media on other websites like YouTube, etc). If you’re going to use your own media, then ensure it is inside your project folder. Also, ensure you take note of the type of the media e.g. jpeg, png, web, etc for images, mp3, mp4 for videos and audios as well as the name of the media item. They’re to be used to much and they are a common cause of errors when working with media.
Images
Lets begin with images while focusing on the code inside the body tag of the code snippet below:
See the Pen Images by bmutebi (@bmutebi) on CodePen.
Images are inserted into a web page using the <img> tag. This is a closed element and doesn’t have a closing tag—tags without a closing tag (you don’t know what closed elements we have in HTML?. Don’t worry, I have your back. Visit this page for a complete list of all self-closing tags).
The img is followed by a src which basically is used for referencing the name of the image or the URL of the image (if the image is on another website like for our case in the snippet above). If the image is yours on your computer, put it inside your project folder and just use its name inside the src attribute e.g. if my image is called berries.jpg—berries is the name of the image and the type of the image is jpg, then the code will look like this:
<img src="berries.jpg">The alt attribute is optional but highly recommended to be there. It is where we put the alternative text to be returned to the user in case the image failed to load rather than a broken image icon which is useless to those who are visually impaired and other users. Lets see the code snippet below for more clarity (focus on code inside the body element):
See the Pen Broken Image by bmutebi (@bmutebi) on CodePen.
You can see from the snippet above, the broken.jpg is not available. If we had not put the alt value (broken image), it would have been just the icon returned back which is meaningless to the user. Better to use meaningful text that represents what the image shows in the alt attribute.
