HTML Tutorials

HTML - Working code for embedding images, videos, and audio

Working Code for Embedding Images, Videos, and Audio



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Media Embedding Example</title>
    <style>
        img, video, audio {
            max-width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
    <h1>Embedding Media in HTML</h1>

    <h2>Embedded Image</h2>
    <img src="path/to/image.jpg" alt="Description of the image">

    <h2>Embedded Video</h2>
    <video controls>
        <source src="path/to/movie.mp4" type="video/mp4">
        <source src="path/to/movie.ogg" type="video/ogg">
        Your browser does not support the video tag.
    </video>

    <h2>Embedded Audio</h2>
    <audio controls>
        <source src="path/to/audio.mp3" type="audio/mpeg">
        <source src="path/to/audio.ogg" type="audio/ogg">
        Your browser does not support the audio element.
    </audio>
</body>
</html>

Explanation of Code

HTML Structure: The code begins with a <html> element that declares English as the language and the typical <!DOCTYPE html> declaration. It has a title, viewport settings for responsiveness, a <style> element for CSS rules, and a <head> section with character encoding.

CSS Rules: Within the <style> tag, CSS makes sure that photos, videos, and music all scale proportionately with the width of the device, keeping their aspect ratios within reason and never going wider than the screen.

Media Elements:

  • Image: The <img> element is used, with alt serving as a substitute written description and src referring to the image file.
  • Video: The control element of the <video> tag lets the user change the volume, pause, and play the video. It makes use of several <source> elements to work with various browsers.
  • Audio: The <audio> tag supports numerous <source> tags and controls to support different audio formats, just like the video tag does.

This code offers a thorough illustration of how to incorporate and handle media into a webpage, guaranteeing that it is adaptable and viewable on various platforms and web browsers.

logo

HTML

Beginner 5 Hours

Working Code for Embedding Images, Videos, and Audio



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Media Embedding Example</title>
    <style>
        img, video, audio {
            max-width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
    <h1>Embedding Media in HTML</h1>

    <h2>Embedded Image</h2>
    <img src="path/to/image.jpg" alt="Description of the image">

    <h2>Embedded Video</h2>
    <video controls>
        <source src="path/to/movie.mp4" type="video/mp4">
        <source src="path/to/movie.ogg" type="video/ogg">
        Your browser does not support the video tag.
    </video>

    <h2>Embedded Audio</h2>
    <audio controls>
        <source src="path/to/audio.mp3" type="audio/mpeg">
        <source src="path/to/audio.ogg" type="audio/ogg">
        Your browser does not support the audio element.
    </audio>
</body>
</html>

Explanation of Code

HTML Structure: The code begins with a <html> element that declares English as the language and the typical <!DOCTYPE html> declaration. It has a title, viewport settings for responsiveness, a <style> element for CSS rules, and a <head> section with character encoding.

CSS Rules: Within the <style> tag, CSS makes sure that photos, videos, and music all scale proportionately with the width of the device, keeping their aspect ratios within reason and never going wider than the screen.

Media Elements:

  • Image: The <img> element is used, with alt serving as a substitute written description and src referring to the image file.
  • Video: The control element of the <video> tag lets the user change the volume, pause, and play the video. It makes use of several <source> elements to work with various browsers.
  • Audio: The <audio> tag supports numerous <source> tags and controls to support different audio formats, just like the video tag does.

This code offers a thorough illustration of how to incorporate and handle media into a webpage, guaranteeing that it is adaptable and viewable on various platforms and web browsers.

Related Tutorials

Frequently Asked Questions for HTML

  • HTML stands for HyperText Markup Language.
  • It is used to create the structure of web pages and web applications.
  • HTML defines elements such as headings, paragraphs, links, images, and other content.

  • Block-level elements (like <div>, <p>, <h1>) start on a new line and take full width.
  • Inline elements (like <span>, <a>, <strong>) stay within the flow of the text.
  • Understanding this helps with layout and styling.

  • A basic HTML page includes a <!DOCTYPE html> declaration, followed by <html>, <head>, and <body>.
  • The <head> section contains metadata like the title and links to stylesheets.
  • The <body> section contains all the visible content of the webpage.

  • The <meta> tag provides metadata such as page description, keywords, and author.
  • It helps browsers and search engines understand the content of the page.
  • One common use is specifying the character encoding: <meta charset="UTF-8">.

  • Forms collect user input using the <form> tag.
  • Inside a form, use <input>, <textarea>, <select>, and <button>.
  • The action attribute specifies where to send the form data.

  • The <label> tag defines a label for an input element.
  • It improves accessibility and allows users to click the label to focus the input.
    Example: <label for="email">Email:</label><input id="email">.

Comments in HTML are written between <!-- and -->.

Example:
<!-- This is a comment -->.
Comments are not displayed on the webpage and are used for documentation.

HTML entities are used to display reserved or special characters.

For example, &lt; displays < and &amp; displays &.
Use them to avoid confusion with actual HTML syntax.