Except where otherwise noted, the contents of this document are Copyright © Marty Stepp, Jessica Miller, and Victoria Kirst. All rights reserved. Any redistribution, reproduction, transmission, or storage of part or all of the contents in any form is prohibited without the author's expressed written permission.
h1, h2, a { color: #A4A400; };
Generate the following page appearance, starting from this HTML and CSS code.
<div id="outer"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> |
#outer { border: 2px dashed black; padding: 10px; } .box { width: 100px; height: 100px; background-color: black; margin: 10px; } |
<div id="outer"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box break"></div> <div class="box"></div> <div class="box"></div> </div> |
#outer { border: 2px dashed black; overflow: hidden; padding: 10px; } .box { width: 100px; height: 100px; background-color: black; margin: 10px; float: left; } .break { clear: left; } |
Generate roughly the given appearance, starting from this HTML.
<ul> <li>Bananas</li> <li>Apples</li> <li>Grapefruit</li> <li>Oranges</li> <li>Papaya</li> </ul>
ul { background-color: red; padding: 20px; text-align: center; } li { display: inline; border: 1px solid black; padding: 10px; background-color: white; }
Add CSS/HTML to this HTML code to generate the layout on the next slide.
You can add div
, span
, class
, and id
but nothing else.
<h1>Header</h1> <h2>Area 1</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing ...</p> <h2>Area 2</h2> <p>Lorem ipsum dolor sit amet, consectetur ...</p> <h2>Area 3</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...
Lorem ipsum dolor sit amet, consectetur ...
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
<div id="container"> <h1>Header</h1> <div id="column1"> <h2>Area 1</h2> <p>Lorem ipsum ...</p> </div> <div id="column2"> <h2>Area 2</h2> <p>Lorem ipsum ...</p> </div> <h2>Area 3</h2> <p>Lorem ipsum ...</p> </div> |
#container { background-color: lightgray; overflow: hidden; padding: 10px; width: 500px; } #column1, #column2 { background-color: lightblue; float: right; margin-left: 10px; width: 100px; } h1 { background-color: yellow; } |
Given 5 image files (kittie1.jpg, kittie2.jpg, etc.), write a PHP page that displays all 5 images as seen here (view source on output to get starter code!).
<!DOCTYPE html> <html> <head> <title>kitties</title> </head> <body> <div> <?php for ($i = 1; $i <= 5; $i++) { ?> <img src="kittie<?= $i ?>.jpg" /> <?php } ?> </div> </body> </html>
The following PHP pages each contain one or more bugs. The bugs could be syntax errors or incorrect logic. Look at each page, find the bug(s), and correct the errors.
T_VARIABLE
and $end
.
If you don't understand an error, try Googling for the error message.
print
for simple variables and print_r
or var_dump
for arrays and objects.
Modify the following HTML to print the first 20 Fibonacci numbers in an ordered list using PHP. Recall that in the Fibonacci sequence, each number is the sum of the two previous numbers, with the first and second numbers being 0 and 1.
<!DOCTYPE html> <html> <head> <title>Fibonacci Sequence</title> </head> <body> <h1>The first twenty Fibonacci numbers:</h1> <!-- (your code here!) --> </body> </html>
... <h1>The first twenty Fibonacci numbers:</h1> <?php $first = 0; $second = 1; for ($i = 0; $i < 20; $i++) { ?> <li><?= $first ?></li> <?php $temp = $second; $second += $first; $first = $temp; } ?>