HTML Real-Time Tutorial

1.9 Frames and Multimedia

Frames in HTML

HTML frames are used to divide your browser window into multiple sections where each section can load a separate HTML document. A collection of frames in the browser window is known as a frameset. The window is divided into frames similarly to how tables are organized: into rows and columns.

Disadvantages of Frames

  • Some smaller devices cannot cope with frames due to limited screen size.
  • Pages might be displayed differently on different computers due to varying screen resolutions.
  • The browser's back button might not work as expected.
  • Not all browsers support frames, and they are deprecated in HTML5.

Creating Frames

To use frames, the <frameset> tag is used instead of the <body> tag. The rows attribute defines horizontal frames, and cols defines vertical frames. Each frame is specified by the <frame> tag, which defines which HTML document will load in the frame.

Note: The <frame> tag is deprecated in HTML5.

<!DOCTYPE html>
<html>
<head>
  <title>HTML Frames</title>
</head>
<frameset rows="10%,80%,10%">
  <frame name="top" src="/html/top_frame.htm" />
  <frame name="main" src="/html/main_frame.htm" />
  <frame name="bottom" src="/html/bottom_frame.htm" />
  <noframes>
    <body>Your browser does not support frames.</body>
  </noframes>
</frameset>
</html>

Multimedia in HTML

Multimedia refers to sound, music, videos, animations, and more. Initially, web browsers only supported text, but modern browsers support various multimedia formats.

Common Multimedia Formats

Multimedia files have different formats and extensions. Below are some of the commonly supported formats:

Format File Extension
MPEG .mpg, .mpeg
AVI .avi
WMV .wmv
Ogg .ogg
MP4 .mp4

HTML5 Multimedia Support

HTML5 introduced native support for multimedia, eliminating the need for third-party plugins like Flash or Silverlight. The <video> and <audio> tags allow embedding media files directly in the HTML document. Supported formats include MP4, WebM, and Ogg for video, and MP3, Ogg, and WAV for audio.

Example of Embedding a Video

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>