Scribd Logo
Upload

Welcome to Scribd!

  • HTML Tags

    Uploaded by

    linn.pa.pa.khaing.2020.2021.fb
    1 views25 pages

    Original Title

    HTML Tags (2)

    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

    Copyright:

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

    HTML Tags

    Uploaded by

    linn.pa.pa.khaing.2020.2021.fb

    Copyright:

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

    FOUNDATIONS OF WEB

    PROGRAMMING

    1
    HTML Tags

     HTML <audio>Tag
     HTML <video> Tag
     Applying a Background Color
     Specifying a Background Image File

    2
    HTML <Audio>tag

     Embedding audio in webpage allows to link to various files containing music


    or speech.
     The controls attribute provides start/stop/fast-forward/rewind buttons for the
    listener. The <source> tags inside the <audio> tag allow to provide several
    different audio formats

    3
    HTML <Audio>tag Example

    4
    HTML <Video >Tag

    Embedding video in webpage allows to link to various files containing


    movies.
     The controls attribute provides start/stop/fast-forward/rewind buttons for
    the listener. The <source> tags inside the <video> tag allow to provide
    several different video formats.

    5
    HTML <Video >Tag Example

    6
    Applying A Background Color

     In HTML, we can change the color of the background of a webpage using the following
    different ways:
     Using bgcolor attribute
     Using an Inline style attribute
     Using internal CSS
     To change the color of a background of a web page, bgcolor attribute can be used
    within the starting tag in our Html document.

    7
    HTML Color Codes And Name

    Color Name Color Code Color Name Color Code


    Red #FF0000 White #FFFFFF

    Cyan #00FFFF Silver #C0C0C0

    Blue #0000FF Gray or Grey #808080

    DarkBlue #00008B Black #000000

    LightBlue #ADD8E6 Orange #FFA500

    Purple #800080 Brown #A52A2A

    Yellow #FFFF00 Maroon #800000

    Lime #00FF00 Green #008000

    Magenta #FF00FF Olive #808000

    Pink #FFC0CB Aquamarine #7FFFD4

    8
    Applying A Background Color Example

    9
    Specifying A Background Image File

    To add a background image on an HTML element, see the HTML background attribute
    <body background=“roses.jpg”>

    10
    Background Image File example

    11
    HTML Elements

     Meter Element
     Progress Element
     Image Hyperlinks
     Image Maps

    12
    Meter Element

     The meter element provides to display a bar chart on a web page.


     The meter element is configured with several attributes, including value (the
    value displayed), min (the lowest possible value in the range), and max (the
    highest possible value in the range).

    13
    Meter Element Example

    14
    Progress Element

     The progress element displays a bar that depicts a numeric value within a
    specified range.
     The progress element is configured with the value (the value displayed) and
    max (highest possible value) attributes.

    15
    Progress Element Example

    16
    Image Hyperlinks

     To create image link, image element with anchor tags


    <a href=“backimage.html”><img src=“miitlogo.jpg” height=“19” width=“85”
    alt=“Home> </a>
     When an image is used as a hyperlink, the default is to show a blue outline (border)
    around the image. If not to display this outline(border),
    <a href=“background.html”><img src=“miitlogo.jpg” height=“19” width=“85”
    alt=“Home” border=“0”> </a>

    17
    Image Hyperlinks Example

    18
    Image Maps

     An image map is an image that can be used as one or more hyperlinks.


     An image map will have multiple clickable or selectable areas that link to
    another web page or website. The selectable areas are called hotspots.
     One common use of image maps is to create interactive maps that website
    visitors can manipulate to choose a location.
     Image maps can be used to create clickable areas in three shapes: rectangles,
    circles, and polygons.

    19
    Image Maps

     Client - side image maps: The web browser works out which part of the
    image the user has clicked on and takes the user to the appropriate page.
     Server - side image maps: The browser sends the server the coordinates,
    saying which part of the image the user clicked on, and these are processed
    by a script file on the server that determines which page the user should be
    sent to.

    20
    Client-side Image

     An image map uses two new elements: map and area.


     The map element is a container tag and is used to begin and end the image map.
     The name attribute is coded to associate the <map> tag with its corresponding image.
     The id attribute uniquely identifies the map area in <map> tag.
     The area tag defines the coordinates or edges of the map area and uses shape, coords, title
    and href attributes.
     Configure the image <img> tag with the usemap attribute to indicate which <map> to use
    preceded by a pound or hash sign (#).

    21
    Shape Coordinates

    22
    Image Maps Example

    23
    Server-side Images Map

     With server - side images, the < img > element sits inside an <a> element just like any
    image that is a link.
     But the < img > element carries a special ismap attribute, which tells the browser to send
    the server x, y coordinates representing what part of the image the user ’ s mouse was on
    when clicked the image map.
     Then a script on the server is used to determine which page the user should be sent to,
    based on the coordinates fed to it.

    24
    Server-side Images Map Example

    25

    You might also like