CLASS 15 - Dynamic Website Development
Coding Exercise - Image Loader
See the outcome here: index.html
- Create a folder with your name on it - no spaces - eg: janesmith
- Create a new HTML file in Dreamweaver in your folder. Open the file in Dreamweaver and go to the Code View. You will see some basic HTML code there - a skeleton of tags that allow you to start building a page.
- Copy the second chunk of text in this text file [body.txt] to the <BODY></BODY> tags of the HTML file - this is the HTML code.
- Create a folder called "images" inside your named folder.
- Download and save the PHP file provided [getpics.txt] in the images folder. Rename it as "getpics.php". Open it in Dreamweaver and inspect the code. It's very important to get the file name and folder location correct otherwise the exercise won't work.
- Place a selection of your own images in the images folder with the PHP file. The PHP file will be able to detect the file names in that folder that are JPG, JPEG, GIF, or PNG and turn that information into a list to send to the HTML file for presentation.
- Once complete, copy your folder to MMSHARE. I will then upload them to our web server that has the PHP server running.
- Once online, you can view your own exercise and test it to see if it loads your images. I will let you know the URL to find your folder online.
Quiz - Identify these coding languages
EG: 1. HTML, 2. CSS etc...
<div style="float: left; width: 200px;">
<select name="picslist" size="4" style="width: 200px" onClick="showpicture(this)">
$locationstring="http://" . $_SERVER['HTTP_HOST'].$pathstring['dirname'] . "/";
</head><body leftmargin="0" topmargin="0" bgcolor="#ffffff" marginheight="0" marginwidth="0">
<table align="center" border="0" cellpadding="15" cellspacing="0" width="800">
<td valign="bottom" bgcolor="#CCCCCC">
<p class="plain1"><strong><a href="../index.html" class="link1">Interactive Design Homepage</a></strong></p>
echo 'var locationstring="' . $locationstring . '";';
echo 'var picsarray=new Array();';
font-family: Verdana, Arial, Helvetica, sans-serif;