Differences

This shows you the differences between two versions of the page.

--- en:web_development:media:exercises [2021/12/20 11:12]
mag created
+++ en:web_development:media:exercises [2023/08/16 09:33] (current)
@@ Line 1: / Line 1: @@
-Javascript play / pause video
+====== Web Development Lesson 6 - Media ======
-create album for Colombian team
+===== Exercises =====
+==== Objective ====
+In this activity you'll apply what you've learnt to other elements and create a photo album of Colombian footballers.
+==== Setup ====
+  * We'll base some exercises on work done to date in this lesson in 'media.php' and 'style.css'.
+  * Others will be based on files created in previous lessons in the 'project' directory.
+==== Javascript Video ====
+  * In 'media.php', create a button to play / pause the video. Use the same techniques you used to play / pause the audio.
+==== PHP Arrays ====
+  * In the 'project' folder, create a file called 'album.php'.
+  * Set up the base code for the file to include the header, menu and footer.
+  * Create an album showing the photos for the Colombian footballers as shown in the following table. Try to do it using PHP arrays.
+^ Player ^ Image ^
+| Andrés Felipe Mosquera Marmolejo | https://secure.cache.images.core.optasports.com/soccer/players/150x150/132914.png |
+| David Ospina Ramírez | https://secure.cache.images.core.optasports.com/soccer/players/150x150/22426.png |
+| Camilo Andrés Vargas Gil | https://secure.cache.images.core.optasports.com/soccer/players/150x150/22456.png |
+| Yeimar Pastor Gómez Andrade | https://secure.cache.images.core.optasports.com/soccer/players/150x150/308766.png |
+| Jhon Janer Lucumí Bonilla | https://secure.cache.images.core.optasports.com/soccer/players/150x150/394760.png |
+| Johan Andrés Mojica Palacio | https://secure.cache.images.core.optasports.com/soccer/players/150x150/173784.png |
+| Daniel Muñoz Mejía | https://secure.cache.images.core.optasports.com/soccer/players/150x150/473447.png |
+| Davinson Sánchez Mina | https://secure.cache.images.core.optasports.com/soccer/players/150x150/290497.png |
+| William José Tesillo Gutiérrez | https://secure.cache.images.core.optasports.com/soccer/players/150x150/125048.png |
+  * Style the album as you like.
+  * For a bonus, display the name of the player with the photo.
+==== Link Javascript Files ====
+  * Recall that we used a PHP variable <html>$page</html> to link the Javascript file for 'media.php'. Now the Javascript files for 'lists.php' and 'tables.php' don't work.
+  * Add the PHP variable to these pages to reenable their Javascript code.
+  * Do the same with all pages in the 'project' folder. You'll also need to add the relevant code into 'header.php'.
+==== Add Menus ====
+  * Add a link for 'album.php' to the project 'menu.php' file.
+  * Add a link for 'media.php' to the 'menu.php' file in the top level directory.
+[[en:web_development:media:summary|Next: Summary]]

Tech School

User Tools

Site Tools

Differences

Page Tools