The purpose of Images in an HTML webpage is to improve the design and appearance of a webpage. Images draw one’s attention and concentration in a web browser. Besides Images, we can embed videos in a web browser to make web pages look more live and entertaining. This increases the chances of one staying on a web page. Before we look at the top 10 image and video-related HTML tasks, let’s take a quick view of how to load the images and videos on a web browser.
HTML Images Syntax
The <img> tag is used to embed images in a web page. we use the src to define the path of the Image and alt to define the alternate text for the Image. This means that you should make sure the image actually stays in the same spot as the web page so that your visitors do not get a broken link. In case of a broken link or if the browser cannot find the image the alt text is displayed on the browser.
Example:
<body>
<img src="brokenimagepath" alt="I'm missing. Please replace me!">
</body>
At times the image may not be on the same spot as the page hence we use ” / ” to navigate to the specific folder.
<body>
<img src="https://www.codeunderscored.com/wp-content/uploads/2020/11/code_sample_image.png" alt="Image alternative text">
</body>
The Image tag is an example of an empty tag hence it has no closing tag.
HTML Video Syntax
The HTML <video> tag is used to display videos on a webpage. It has a controls attribute that adds video controls such as play, pause, and volume. To locate the image source we use <source src =”#” </source> and the type attribute to define the type of video example .mp4.
Example:
<body>
<video>
<source src="https://www.codeunderscored.com/wp-content/uploads/2020/11/MP4_sample.mp4" type="video/mp4">
</video>
</body>
Image/video height and width
They also have some similarities in terms of defining their property height and width. It determines the amount of space or the size occupied by an image or a video on a webpage. By this, I mean to describe an image height and width you will use. Notice the “Width” usage in the example below. The value is in pixels.
<body>
<p>Setting image width and height</p>
<img src = "https://www.codeunderscored.com/wp-content/uploads/2020/11/code_sample_image.png" alt = "Test Image" width = "150" height = "100"/>
</body>
Similarly, to define a video height and width, we use:
<body>
<p>Setting image width and height</p>
<video>
<source src="https://www.codeunderscored.com/wp-content/uploads/2020/11/MP4_sample.mp4" type="video/mp4" width = "450" height = "200"/>
</video>
</body>
Image Border
A border attribute is the thickness around an image. By default, an image will have a border. The thickness of the border can be changed in terms of pixels.
<body>
<p>Image Border Demo</p>
<img src = "https://www.codeunderscored.com/wp-content/uploads/2020/11/code_sample_image.png" alt = "Test Image" width = "450" height = "200" border = "3" />
</body>
Image Alignment
This indicates the position of the image in relation to the page. By default, image justification is always left. You can change to the center or even right as needed.
<body>
<p>Image Alignment Demo</p>
<img src = "https://www.codeunderscored.com/wp-content/uploads/2020/11/code_sample_image.png" alt = "Test Image" width = "150" height = "100" align = "right" />
</body>
Image Link
Involves using an Image as a URL. This is done by embedding the “a” tag. Look at the example below:
<body>
<p>Image Link</p>
<a href ="https://www.codeunderscored.com/">
<img src = "https://www.codeunderscored.com/wp-content/uploads/2020/11/code_sample_image.png" alt = "Test Image" width = "150" height = "100"/>
</a>
</body>
Image Animation
To allow animation in Images, HTML uses .gif formats.
<body>
<p>Image animation demo</p>
<img src = "https://www.codeunderscored.com/wp-content/uploads/2020/11/Volcano_animated_sample.gif" alt = "Test Image" width = "450" height = "200"/>
</body>
Image as Background
At times we can use an image as a background of a webpage. To do this, we add a style to hold the image background.
<body background = "https://www.codeunderscored.com/wp-content/uploads/2020/11/code_sample_image.png">
<p>Image background </p>
</body
Video Controls
These are video player control buttons. Video controls include; play, pause, and volume. To add these controls, we add an attribute control.
<body>
<p>Video Controls Demo</p>
<video controls width = "450" height = "200">
<source src="https://www.codeunderscored.com/wp-content/uploads/2020/11/MP4_sample.mp4" type="video/mp4" />
</video>
</body>
Video Poster
This attribute determines if an image will be displayed while the video is loading or when a user clicks on the play button.
<body>
<p>Video poster</p>
<video controls poster ="images.gif" width = "450" height = "200">
<source src="https://www.codeunderscored.com/wp-content/uploads/2020/11/MP4_sample.mp4" type="video/mp4" />
</video>
</body>
Video Preload
Preload determines how a video loads on page refresh. The three possible preload values are; none, metadata, and auto. Note that the preload attribute is ignored if autoplay is present, which we will be discussing next.
<body>
<p>Video poster</p>
<video controls preload ="none" width = "450" height = "200">
<source src="https://www.codeunderscored.com/wp-content/uploads/2020/11/MP4_sample.mp4" type="video/mp4" />
</video>
</body>
Video Auto-Play and Mute
Mute specifies whether the video’s audio will be heard or not. At the same time, autoplay determines if the video will be played automatically as soon as enough of the video has been buffered. It can either be set true or false.
<body>
<p>Video Autoplay</p>
<video controls autoplay muted width = "450" height = "200">
<source src="https://www.codeunderscored.com/wp-content/uploads/2020/11/MP4_sample.mp4" type="video/mp4" />
</video>
</body>
Conclusion
In this tutorial, we have learned about the top 10 images and video related Html tasks one should know. The video element was introduced in HTML5; hence we need to consider the browser compatibility appropriately as per the needs. Earlier, the webpages consisted of texts, which made them appear quite boring and uninteresting.
