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
