Scribd Logo
Upload

Welcome to Scribd!

  • 51 views

    Lect3 (HTML Images, Audio and Video)

    Uploaded by

    Muhammad Umair
    The document discusses how to add images, audio, and video to web pages. It covers using the <img>, <audio>, and <video> tags and their attributes. It also covers image maps and using images as links.

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd

    Lect3 (HTML Images, Audio and Video)

    Uploaded by

    Muhammad Umair
    51 views28 pages
    The document discusses how to add images, audio, and video to web pages. It covers using the <img>, <audio>, and <video> tags and their attributes. It also covers image maps and using images as links.

    Original Description:

    html images

    Original Title

    Lect3 (HTML images, audio and video)

    Copyright

    © © All Rights Reserved

    Available Formats

    PPTX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    The document discusses how to add images, audio, and video to web pages. It covers using the <img>, <audio>, and <video> tags and their attributes. It also covers image maps and using images as links.

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Download as pptx, pdf, or txt
    51 views28 pages

    Lect3 (HTML Images, Audio and Video)

    Uploaded by

    Muhammad Umair
    The document discusses how to add images, audio, and video to web pages. It covers using the <img>, <audio>, and <video> tags and their attributes. It also covers image maps and using images as links.

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Download as pptx, pdf, or txt
    of 28

    Adding Image, audio and video files to

    web pages

    Khurram Iqbal, Department of Computer


    1
    Science,CIIT,Islamabad, Pakistan.
    Summary of the previous lecture
    • Internal links
    • External links
    • Directory Structure
    • Internal document reference
    • Some attributes of <a>

    Khurram Iqbal, Department of Computer


    2
    Science,CIIT,Islamabad, Pakistan.
    Outline
    • Adding images to web pages
    • Using images as links
    • Image map
    • Adding video to web pages
    • Adding audio to web pages

    Khurram Iqbal, Department of Computer


    3
    Science,CIIT,Islamabad, Pakistan.
    1. Adding images to web pages
    • <img> tag is used to add images to web pages
    • SRC attribute of the <img> tag is used to
    indicate the source of the image
    • We can add an image by
    – <img src=“image-name”>
    – <img src=“abc.jpg”>

    Khurram Iqbal, Department of Computer


    4
    Science,CIIT,Islamabad, Pakistan.
    1. Adding images to web pages...

    Image path and name

    Root Directory

    examples images

    ex.html img1.jpg
    Image tag

    Src attribute

    Khurram Iqbal, Department of Computer


    5
    Science,CIIT,Islamabad, Pakistan.
    1. Adding images to web pages...

    Khurram Iqbal, Department of Computer


    6
    Science,CIIT,Islamabad, Pakistan.
    1.1 Attributes of <img> tag
    1. Height and width:
    • <img src=“image-name” height=“100” width=“100”>
    2. Alt attribute:
    – <img src=“image-name” alt=“image description”>
    3. Align attribute:
    – <img src=“image-name” align=“left”>
    – Left, right, top, bottom, middle

    Khurram Iqbal, Department of Computer


    7
    Science,CIIT,Islamabad, Pakistan.
    1.1 Attributes of <img> tag …
    4. Border attribute:
    – <img src=“image-name” border=“2”>

    Khurram Iqbal, Department of Computer


    8
    Science,CIIT,Islamabad, Pakistan.
    1.1 Attributes of <img> tag …

    Khurram Iqbal, Department of Computer


    9
    Science,CIIT,Islamabad, Pakistan.
    1.1 Attributes of <img> tag …

    Khurram Iqbal, Department of Computer


    10
    Science,CIIT,Islamabad, Pakistan.
    1.1 Attributes of <img> tag …

    Khurram Iqbal, Department of Computer


    11
    Science,CIIT,Islamabad, Pakistan.
    1.1 Attributes of <img> tag …

    Align top
    Align middle

    Khurram Iqbal, Department of Computer


    12
    Science,CIIT,Islamabad, Pakistan.
    1.1 Attributes of <img> tag …

    Wrong image name

    Khurram Iqbal, Department of Computer


    13
    Science,CIIT,Islamabad, Pakistan.
    1.1 Attributes of <img> tag …

    Image is found

    Image not found

    Khurram Iqbal, Department of Computer


    14
    Science,CIIT,Islamabad, Pakistan.
    1.1 Attributes of <img> tag …

    Khurram Iqbal, Department of Computer


    15
    Science,CIIT,Islamabad, Pakistan.
    1.1 Attributes of <img> tag …

    Khurram Iqbal, Department of Computer


    16
    Science,CIIT,Islamabad, Pakistan.
    2. Using images for linking
    • We can put images between <a> and </a >
    tags instead of text to link other documents
    or portions of the page
    • <a href=“page-reference”> <img src=“image-
    srource”></a>
    • <a href=“abc.html”> <img src=“img.jpg”></a>

    Khurram Iqbal, Department of Computer


    17
    Science,CIIT,Islamabad, Pakistan.
    2. Using images for linking…
    Link

    Image

    Khurram Iqbal, Department of Computer


    18
    Science,CIIT,Islamabad, Pakistan.
    3. Image maps
    • Image maps allow you to add multiple links
    to the same image
    • Each link can point to a different page
    • Each of these clickable areas is known as a
    hotspot

    Khurram Iqbal, Department of Computer


    19
    Science,CIIT,Islamabad, Pakistan.
    3. Image maps…
    • Defining a map:
    • Step1 (Define a map):
    <map name=“map name”>
    <area shape=“link-shape” coords=“coordinates
    of link area” href=“page-reference”>
    </map>
    • Step2(using the map):
    <img src=“image-title” usermap=“#map-name”>

    Khurram Iqbal, Department of Computer


    20
    Science,CIIT,Islamabad, Pakistan.
    3. Image maps…

    Map name
    Shape Coordinates
    Map Area tag

    Link

    End of Map

    Using a map Khurram Iqbal, Department of Computer


    Adding an Image Science,CIIT,Islamabad, Pakistan.
    21
    4. Adding videos to web pages
    • The <video> tag is used to add a video to a
    web page
    • This tag is provided in HTML5
    • The src attribute of the <video> tag is used to
    indicate the source of the video
    • We can add a video to our page as
    – <video src=“abc.mp4”>

    Khurram Iqbal, Department of Computer


    22
    Science,CIIT,Islamabad, Pakistan.
    4. Adding videos to web pages…
    • Attributes of <video> tag:
    • Auto-play
    • Controls
    • Height
    • Loop

    Khurram Iqbal, Department of Computer


    23
    Science,CIIT,Islamabad, Pakistan.
    4. Adding videos to web pages…

    Source of the video


    Video tag

    Controls attribute
    Loop attribute

    Auto-play attribute

    Khurram Iqbal, Department of Computer


    24
    Science,CIIT,Islamabad, Pakistan.
    5. Adding audio to web pages…
    • The <audio> tab is used to add a video to a
    web page
    • This tag is provided in HTML5
    • The src attribute of the <audio> tag is used to
    indicate the source of the audio
    • We can add a video to our page as
    – <audio src=“abc.mp3”>

    Khurram Iqbal, Department of Computer


    25
    Science,CIIT,Islamabad, Pakistan.
    5. Adding audio to web pages…
    • Attributes of <audio> tag:
    • Auto-play
    • Controls
    • Loop

    Khurram Iqbal, Department of Computer


    26
    Science,CIIT,Islamabad, Pakistan.
    Summary
    • Adding images to web page
    • Using images as links
    • Image map
    • Adding audio and video to web page

    Khurram Iqbal, Department of Computer


    27
    Science,CIIT,Islamabad, Pakistan.
    References
    • Chapter 3, Beginning HTML, XHTML,CSS,
    and JavaScript, by Jon Duckett, Wiley
    Publishing; 2009, ISBN: 978-0-470-
    54070-1.

    Khurram Iqbal, Department of Computer


    28
    Science,CIIT,Islamabad, Pakistan.

    You might also like