CHAPTER 7: DESIGNING A MULTIMEDIA WEB PAGE + FRAMES ... · chapter 7: designing a multimedia web...
Transcript of CHAPTER 7: DESIGNING A MULTIMEDIA WEB PAGE + FRAMES ... · chapter 7: designing a multimedia web...
![Page 1: CHAPTER 7: DESIGNING A MULTIMEDIA WEB PAGE + FRAMES ... · chapter 7: designing a multimedia web page + frames + concepts of web development created by l. asma rikli (adapted from](https://reader035.fdocuments.in/reader035/viewer/2022063008/5fbb750031b91e24bb6c9a61/html5/thumbnails/1.jpg)
CHAPTER 7: DESIGNING A MULTIMEDIA WEB PAGE + FRAMES + CONCEPTS OF WEB DEVELOPMENT
CREATED BY L. ASMA RIKLI (ADAPTED FROM HTML, CSS, AND DYNAMIC HTML BY CAREY)
![Page 2: CHAPTER 7: DESIGNING A MULTIMEDIA WEB PAGE + FRAMES ... · chapter 7: designing a multimedia web page + frames + concepts of web development created by l. asma rikli (adapted from](https://reader035.fdocuments.in/reader035/viewer/2022063008/5fbb750031b91e24bb6c9a61/html5/thumbnails/2.jpg)
AUDIO FORMATS
1. (.mp3)
2. (.wav)
CREATED BY L. ASMA RIKLI (ADAPTED FROM HTML, CSS, AND DYNAMIC HTML BY CAREY)
![Page 3: CHAPTER 7: DESIGNING A MULTIMEDIA WEB PAGE + FRAMES ... · chapter 7: designing a multimedia web page + frames + concepts of web development created by l. asma rikli (adapted from](https://reader035.fdocuments.in/reader035/viewer/2022063008/5fbb750031b91e24bb6c9a61/html5/thumbnails/3.jpg)
<AUDIO> ELEMENT
CREATED BY L. ASMA RIKLI (ADAPTED FROM HTML, CSS, AND DYNAMIC HTML BY CAREY)
Attribute Value Description
autoplay autoplay Specifies that the audio will start playing as soon as its is
ready
loop loop Specifies that the audio will start playing again
(looping) when it reaches the end.
controls controls Adds the play, pause, and volume controls
![Page 4: CHAPTER 7: DESIGNING A MULTIMEDIA WEB PAGE + FRAMES ... · chapter 7: designing a multimedia web page + frames + concepts of web development created by l. asma rikli (adapted from](https://reader035.fdocuments.in/reader035/viewer/2022063008/5fbb750031b91e24bb6c9a61/html5/thumbnails/4.jpg)
EXAMPLE
CREATED BY L. ASMA RIKLI (ADAPTED FROM HTML, CSS, AND DYNAMIC HTML BY CAREY)
<audio src="http://audiosoundclips.com/wp-content/uploads/2011/12/Crowdcheer.mp3" autoplay="autoplay" controls="controls" loop="loop"></audio>
![Page 5: CHAPTER 7: DESIGNING A MULTIMEDIA WEB PAGE + FRAMES ... · chapter 7: designing a multimedia web page + frames + concepts of web development created by l. asma rikli (adapted from](https://reader035.fdocuments.in/reader035/viewer/2022063008/5fbb750031b91e24bb6c9a61/html5/thumbnails/5.jpg)
VIDEO FORMATS
1. (.mp4)
2. (.WebM)
CREATED BY L. ASMA RIKLI (ADAPTED FROM HTML, CSS, AND DYNAMIC HTML BY CAREY)
![Page 6: CHAPTER 7: DESIGNING A MULTIMEDIA WEB PAGE + FRAMES ... · chapter 7: designing a multimedia web page + frames + concepts of web development created by l. asma rikli (adapted from](https://reader035.fdocuments.in/reader035/viewer/2022063008/5fbb750031b91e24bb6c9a61/html5/thumbnails/6.jpg)
Attribute Value Description
autoplay autoplay Specifies that the video will start playing as soon as its is
ready
muted muted Mutes the audio track of the video clip
loop loop Specifies that the audio will start playing again
(looping) when it reaches the end.
controls controls Adds the play, pause, and volume controls
<VIDEO> ELEMENT
CREATED BY L. ASMA RIKLI (ADAPTED FROM HTML, CSS, AND DYNAMIC HTML BY CAREY)
![Page 7: CHAPTER 7: DESIGNING A MULTIMEDIA WEB PAGE + FRAMES ... · chapter 7: designing a multimedia web page + frames + concepts of web development created by l. asma rikli (adapted from](https://reader035.fdocuments.in/reader035/viewer/2022063008/5fbb750031b91e24bb6c9a61/html5/thumbnails/7.jpg)
EXAMPLE
CREATED BY L. ASMA RIKLI
<video src="http://techslides.com/demos/sample-videos/small.mp4" autoplay="autoplay" muted="muted" controls="controls" loop="loop"></video>
![Page 8: CHAPTER 7: DESIGNING A MULTIMEDIA WEB PAGE + FRAMES ... · chapter 7: designing a multimedia web page + frames + concepts of web development created by l. asma rikli (adapted from](https://reader035.fdocuments.in/reader035/viewer/2022063008/5fbb750031b91e24bb6c9a61/html5/thumbnails/8.jpg)
FRAMES
HTML frames are used to divide your browser window into multiple sections where each section can load a separate HTML document.
CREATED BY L. ASMA RIKLI
![Page 9: CHAPTER 7: DESIGNING A MULTIMEDIA WEB PAGE + FRAMES ... · chapter 7: designing a multimedia web page + frames + concepts of web development created by l. asma rikli (adapted from](https://reader035.fdocuments.in/reader035/viewer/2022063008/5fbb750031b91e24bb6c9a61/html5/thumbnails/9.jpg)
<FRAMESET> ELEMENT
CREATED BY L. ASMA RIKLI
Attribute Value Description Example
cols px OR %
muted
Specifies how many columns
there are in the frameset
with the size of each column
cols=“100,50,50”
cols=“25%,25%,50%”
rows Specifies how many rows
there are in the frameset
with the size of each row
rows=“100,50,50”
rows=“25%,25%,50%”
framespacing Number value Specifies the amount of
space between frames in a
frameset
framespacing=“10”
<frameset> is placed instead of the <body>
![Page 10: CHAPTER 7: DESIGNING A MULTIMEDIA WEB PAGE + FRAMES ... · chapter 7: designing a multimedia web page + frames + concepts of web development created by l. asma rikli (adapted from](https://reader035.fdocuments.in/reader035/viewer/2022063008/5fbb750031b91e24bb6c9a61/html5/thumbnails/10.jpg)
<FRAME> ELEMENT
CREATED BY L. ASMA RIKLI
Attribute Value Description Example
src url file name that should be loaded in the
frame
src=“nav.html”
![Page 11: CHAPTER 7: DESIGNING A MULTIMEDIA WEB PAGE + FRAMES ... · chapter 7: designing a multimedia web page + frames + concepts of web development created by l. asma rikli (adapted from](https://reader035.fdocuments.in/reader035/viewer/2022063008/5fbb750031b91e24bb6c9a61/html5/thumbnails/11.jpg)
EXAMPLE
CREATED BY L. ASMA RIKLI
<html>
<head></head>
<frameset cols="20%,30%,50%">
<frame src="nav.html">
<frame src="audioPage.html">
<frame src="videoPage.html">
</frameset>
</html>
![Page 12: CHAPTER 7: DESIGNING A MULTIMEDIA WEB PAGE + FRAMES ... · chapter 7: designing a multimedia web page + frames + concepts of web development created by l. asma rikli (adapted from](https://reader035.fdocuments.in/reader035/viewer/2022063008/5fbb750031b91e24bb6c9a61/html5/thumbnails/12.jpg)
EXAMPLE
CREATED BY L. ASMA RIKLI
<html>
<head></head>
<frameset rows="30%,32%,50%">
<frame src="nav.html">
<frame src="audioPage.html">
<frame src="videoPage.html">
</frameset>
</html>
![Page 13: CHAPTER 7: DESIGNING A MULTIMEDIA WEB PAGE + FRAMES ... · chapter 7: designing a multimedia web page + frames + concepts of web development created by l. asma rikli (adapted from](https://reader035.fdocuments.in/reader035/viewer/2022063008/5fbb750031b91e24bb6c9a61/html5/thumbnails/13.jpg)
EXAMPLE
CREATED BY L. ASMA RIKLI (ADAPTED FROM HTML, CSS, AND DYNAMIC HTML BY CAREY)
<html>
<head></head>
<frameset rows="10%,80%,10%">
<frame src="header.html">
<frameset cols="20%,80%">
<frame src="nav.html">
<frame src="content.html">
</frameset>
<frame src="footer.html">
</frameset>
</html>
![Page 14: CHAPTER 7: DESIGNING A MULTIMEDIA WEB PAGE + FRAMES ... · chapter 7: designing a multimedia web page + frames + concepts of web development created by l. asma rikli (adapted from](https://reader035.fdocuments.in/reader035/viewer/2022063008/5fbb750031b91e24bb6c9a61/html5/thumbnails/14.jpg)
WEB DEVELOPMENT
The Web development process includes Web design, Web content development, and client-side/server-side scripting, among other tasks
CREATED BY L. ASMA RIKLI
![Page 15: CHAPTER 7: DESIGNING A MULTIMEDIA WEB PAGE + FRAMES ... · chapter 7: designing a multimedia web page + frames + concepts of web development created by l. asma rikli (adapted from](https://reader035.fdocuments.in/reader035/viewer/2022063008/5fbb750031b91e24bb6c9a61/html5/thumbnails/15.jpg)
WEB DEVELOPMENT SOFTWARE TOOLS
CREATED BY L. ASMA RIKLI
Programs that make it easier for the designer to work with page and site elements through a graphical
user interface that displays the desired results, typically in a WYSIWYG manner.
1.Easy to use – just drag &
drop, no coding required.
2.Professionally designed
templates for you to use.
3.Affordable pricing.
![Page 16: CHAPTER 7: DESIGNING A MULTIMEDIA WEB PAGE + FRAMES ... · chapter 7: designing a multimedia web page + frames + concepts of web development created by l. asma rikli (adapted from](https://reader035.fdocuments.in/reader035/viewer/2022063008/5fbb750031b91e24bb6c9a61/html5/thumbnails/16.jpg)
PRINT SCREENS
CREATED BY L. ASMA RIKLI
![Page 17: CHAPTER 7: DESIGNING A MULTIMEDIA WEB PAGE + FRAMES ... · chapter 7: designing a multimedia web page + frames + concepts of web development created by l. asma rikli (adapted from](https://reader035.fdocuments.in/reader035/viewer/2022063008/5fbb750031b91e24bb6c9a61/html5/thumbnails/17.jpg)
WEB HOSTING
CREATED BY L. ASMA RIKLI
Web hosts are companies that provide space on a server.
![Page 18: CHAPTER 7: DESIGNING A MULTIMEDIA WEB PAGE + FRAMES ... · chapter 7: designing a multimedia web page + frames + concepts of web development created by l. asma rikli (adapted from](https://reader035.fdocuments.in/reader035/viewer/2022063008/5fbb750031b91e24bb6c9a61/html5/thumbnails/18.jpg)
WEB HOSTING COMPANIES - DOMAIN NAMES
CREATED BY L. ASMA RIKLI
![Page 19: CHAPTER 7: DESIGNING A MULTIMEDIA WEB PAGE + FRAMES ... · chapter 7: designing a multimedia web page + frames + concepts of web development created by l. asma rikli (adapted from](https://reader035.fdocuments.in/reader035/viewer/2022063008/5fbb750031b91e24bb6c9a61/html5/thumbnails/19.jpg)
BACK END DATABASE
CREATED BY L. ASMA RIKLI
User name + passwordAccess / Denied AccessName+ mail + comment
A database that is accessed by users indirectly through an external website or application.