Scribd Logo
Upload

Welcome to Scribd!

  • 47 views

    Computer 7 2nd Term Session 5

    Uploaded by

    DreamCodm
    The document discusses how to add audio and PDF files to HTML pages. It explains that the <audio> element is used to embed audio, and accepts source files via the <source> element along with attributes like src, type, controls and autoplay. PDFs can be embedded using the <iframe> element, specifying the PDF URL as the source along with width and height attributes. Alternatively, a PDF can be linked using the <a> tag and href attribute pointing to the PDF file.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content

    You might also like

    Computer 7 2nd Term Session 5

    Uploaded by

    DreamCodm
    47 views3 pages
    The document discusses how to add audio and PDF files to HTML pages. It explains that the <audio> element is used to embed audio, and accepts source files via the <source> element along with attributes like src, type, controls and autoplay. PDFs can be embedded using the <iframe> element, specifying the PDF URL as the source along with width and height attributes. Alternatively, a PDF can be linked using the <a> tag and href attribute pointing to the PDF file.

    Original Description:

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document discusses how to add audio and PDF files to HTML pages. It explains that the <audio> element is used to embed audio, and accepts source files via the <source> element along with attributes like src, type, controls and autoplay. PDFs can be embedded using the <iframe> element, specifying the PDF URL as the source along with width and height attributes. Alternatively, a PDF can be linked using the <a> tag and href attribute pointing to the PDF file.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    47 views3 pages

    Computer 7 2nd Term Session 5

    Uploaded by

    DreamCodm
    The document discusses how to add audio and PDF files to HTML pages. It explains that the <audio> element is used to embed audio, and accepts source files via the <source> element along with attributes like src, type, controls and autoplay. PDFs can be embedded using the <iframe> element, specifying the PDF URL as the source along with width and height attributes. Alternatively, a PDF can be linked using the <a> tag and href attribute pointing to the PDF file.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    of 3

    The media attribute specifies what media/device the linked document is optimized for.

    This attribute is used to specify that the target URL is designed for special devices (like
    iPhone) , speech or print media. This attribute can accept several values. Only used if
    the href attribute is present.

    Multimedia files have formats and different extensions


    like: .wav, .mp3, .mp4, .mpg, .wmv, and .avi.

    Audio:

    the <audio> element accepts a source URL specified by


    the src attribute. The <audio> element requires both opening and closing tags.

    <audio src="jazz.ogg"></audio>

    Several other attributes may accompany the src attribute on the <audio> element; the
    most popular include autoplay, controls, loop, and preload.
    By default, the <audio> element isn’t displayed on a page. If the autoplay Boolean
    attribute is present on the <audio> element, nothing will appear on the page, but the
    audio file will automatically play upon loading.

    <audio src="jazz.ogg" autoplay></audio>

    To display the <audio> element on a page, the controls Boolean attribute is necessary.

    At the moment, different browsers support different audio file formats, the three most
    popular of which are ogg, mp3, and wav.
    To begin, we’ll remove the src attribute from the <audio> element. Instead, we’ll use
    the <source> element, with an src attribute, nested inside the <audio> element to
    define a new source.
    Using an <source> element and src attribute for each file format, we can list one audio
    file format after the other. We’ll use the type attribute to help the browser identify which
    audio types are available quickly. When a browser recognizes an audio file format, it
    will load that file and ignore all the others.

    <audio controls>
    <source src="jazz.ogg" type="audio/ogg">
    <source src="jazz.mp3" type="audio/mpeg">
    <source src="jazz.wav" type="audio/wav">
    Please <a href="jazz.mp3" download>download</a> the audio file.

    1|Media Files in HTML


    </audio>

    PDF

    The easiest way to put PDF in an HTML document is using the <a> tag with its href attribute. You need to
    add the URL or the reference link of your PDF file to the element.

    <p>Open a PDF file <a


    href="/uploads/media/default/0001/01/540cb75550adf33f281f29132dddd14fded85bfc.pdf">ex
    ample</a>.

    Another way of adding a PDF file to your HTML document is using the <iframe> tag. It allows
    setting your preferred width and height as well. To have the code, follow these simple steps:
    To specify the web address of your PDF file, set the source. Both of the mentioned properties can
    be specified by "px", "cm", "vh", or percentages.

    <iframe src="URL"></iframe>
    To define the size of the iframe, set the height and width attributes:
    <iframe src="URL" height="200" width="300"></iframe>

    <!DOCTYPE html>
    <html>
    <head>
    <title>Title of the document</title>
    </head>
    <body>
    <h1>PDF Example with iframe</h1>
    <iframe
    src="/uploads/media/default/0001/01/540cb75550adf33f281f29132dddd14fded
    85bfc.pdf" width="100%" height="500px">
    </iframe>
    </body>
    </html>

    2|Media Files in HTML


    References
    Adding Media. (n.d.). Retrieved from Learn to Code HTML & CSS:
    https://learn.shayhowe.com/html-css/adding-media/
    How to Embed PDF in HTML. (n.d.). Retrieved from W3 Docs:
    https://www.w3docs.com/snippets/html/how-to-embed-pdf-in-html.html

    3|Media Files in HTML

    You might also like