Scribd
Upload
13 views

HTML Tags

The document discusses various HTML elements for embedding audio, video, images and creating hyperlinks on webpages. It includes elements such as <audio>, <video>, <map> and their usage with different attributes to add background colors, images, create image maps and hyperlinks. It also covers HTML color codes and applying styles using inline CSS or the bgcolor attribute.

Uploaded by

linn.pa.pa.khaing.2020.2021.fb
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
13 views

HTML Tags

The document discusses various HTML elements for embedding audio, video, images and creating hyperlinks on webpages. It includes elements such as <audio>, <video>, <map> and their usage with different attributes to add background colors, images, create image maps and hyperlinks. It also covers HTML color codes and applying styles using inline CSS or the bgcolor attribute.

Uploaded by

linn.pa.pa.khaing.2020.2021.fb
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 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