Images, Audio & Video

Users browse the internet in search of interesting and informational content, commonly found in the form of plain text. To accompany this plain text, HTML provides a way to give users rich media in the form of images, audio tracks, and videos.

Adding Images

To begin adding images to a page the img inline element is used. The img element is self containing, in that it doesn’t wrap any other content and exists as a single tag. For the img element to work, a src attribute value must be included to specify the source of the requested image. The src attribute value comes in way of a URL, most often relative to the server upon which the website is hosted.

<img src="business.jpg" alt="Group meeting in office">
Demo of above code

Sizing Images

There are a couple of different ways to size images so that they work well on a page. One option is to use the height and width attributes directly within the img tag in HTML. While this works, it also puts styles in the HTML. Since styles should specifically be reserved for CSS, let’s use the CSS height and width properties instead.

img {
  height: 200px;
  width: 200px;
}
Demo of above code

Positioning Images

Images can be positioned in quite a few different ways, including inline, block, flush left, flush right, and so on. All of these positions are obtained using the CSS float property, along with other box model properties including margin, padding, border, and display.

Inline Positioning Images

The img element by default is an inline level element. Adding an image to a page without any styles will position that image directly in place while all the other content will fall inline with it as necessary, as seen below.

<p>Lorem ipsum Ut aliqua Ut magna deserunt quis amet in in reprehenderit deserunt <img src="business.jpg" alt="Group meeting in office"> nulla ut in deserunt id velit aliqua aliqua pariatur dolor sunt deserunt eu occaecat est tempor.</p> 
Demo of above code

Lorem ipsum Ut aliqua Ut magna deserunt quis amet in in reprehenderit deserunt nulla ut in deserunt id velit aliqua aliqua pariatur dolor sunt deserunt eu occaecat est tempor.

Block Positioning Images

Adding the CSS property display and setting its value to block forces the image to be a block level element. Doing so makes the image appear on its own line, leaving the surrounding content to be positioned above and below the image.

img {
  display: block;
}
Demo of above code

Lorem ipsum Ut aliqua Ut magna deserunt quis amet in in reprehenderit deserunt nulla ut in deserunt id velit aliqua aliqua pariatur dolor sunt deserunt eu occaecat est tempor.

Positioning Images Flush Left or Right

Sometimes displaying an image as inline or block isn’t the ideal usage. You may want the image to appear flush to the left or right while letting all of the other content surround the image as necessary. To do this the CSS float property is used with the value of either left or right.

Floating an image is a start, but all of the other content will align directly up against it. To provide an adequate amount of spacing around an image the margin property is used. Additionally, we can use the padding, border, and background properties to build a frame for the image if desired.

img {
  background: #e8eae9;
  border: 1px solid #c6c9cc;
  float: right;
  margin: 8px 0 0 20px;
  padding: 4px;
}
Demo of above code
Lorem ipsum Ut aliqua Ut magna deserunt quis amet in in reprehenderit deserunt nulla ut in deserunt id velit aliqua aliqua pariatur dolor sunt deserunt eu occaecat est tempor.

Adding Audio

HTML5 provides a quick and easy way to add audio and video files to be played on a website. Using the audio element an audio clip can be added to a page. Just as with the img element, an audio element also needs a source URL specified via the src attribute.

<audio controls>
  <source src="images/audio.ogg" type="audio/ogg">
  <source src="images/audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Demo of above code

Adding Video

Adding in HTML5 videos is very similar to that of adding in audio. In this case however, we use the video element in place of the audio element. All of the same attributes (source, autoplay, controls, loop, and preload) and fallbacks apply here too.

<video controls>
  <source src="images/video.mp4" type="video/mp4">
  <source src="images/video.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>
Demo of above code

comments powered by Disqus