<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <!-- CS 328 - Week 5 Lecture 2 playing around by: Sharon Tuttle last modified: 2016-02-17 --> <head> <title> playing with still more CSS </title> <meta charset="utf-8" /> <link href="http://users.humboldt.edu/smtuttle/styles/normalize.css" type="text/css" rel="stylesheet" /> <link href="328lect05-2.css" type="text/css" rel="stylesheet" /> </head> <body> <h1> playing with still more CSS3 </h1> <p class="width1"> This is an opening paragraph. It is very short. It should do for CSS demo purposes. </p> <p class="important width2"> This paragraph contains extremely vital and important information! Do not ignore me! </p> <p class="lovely"> And this is a lovely paragraph. Or it thinks it is, at least. </p> <h2 id="cs328"> CS 328 </h2> <table> <caption> examples of good Arcata things </caption> <tr> <th scope="col"> ice cream </th> <td> Arcata Scoop </td> </tr> <tr> <th scope="col"> chocolate </th> <td> Drake's Glen </td> </tr> <tr> <th scope="col"> bagels </th> <td> Los Bagels </td> </tr> <tr> <th scope="col"> quesadillas </th> <td> Taqueria La Barca </td> </tr> </table> <!-- <aside> --> <div class="sidebar"> <h1> Lady Ada Lovelace </h1> <p> Lady Ada Lovelace is often considered to be the first computer programmer. The Ada programming language is named after her. </p> </div> <!-- </aside> --> <h2> My form! </h2> <form action="http://users.humboldt.edu/smtuttle" method="get"> <fieldset> <legend> My first fieldset </legend> <label> Last name: <input type="text" name="lastname" required="required" /> </label> <br /> <label> Age: <input type="text" name="age" size="3" maxlength="3" /> ...in years </label> <br /> <label class="favecolor" for="colorinput"> Your Favorite Color: </label> <input type="text" name="color" required="required" id="colorinput" /> <br /> </fieldset> <fieldset> <legend> Your ice cream choice for today </legend> <label> <input type="radio" name="ice_cream" value="chocolate" checked="checked" /> Chocolate </label> <br /> <label> <input type="radio" name="ice_cream" value="vanilla" /> Vanilla </label> <br /> <label> <input type="radio" name="ice_cream" value="strawberry" /> Strawberry </label> <br /> </fieldset> <fieldset> <legend> Which of these do you have? </legend> <label> <input type="checkbox" name="bike" checked="checked" /> Bike </label> <br /> <label> <input type="checkbox" name="car" /> Car </label> <br /> <label> <input type="checkbox" name="skateboard" /> Skateboard </label> <br /> <label> <input type="checkbox" name="heelies" required="required" /> Heelies </label> <br /> </fieldset> <fieldset> <legend> More info </legend> <label> State of Legal Residence <select name="state"> <option value="CA" selected="selected"> California </option> <option value="OR"> Oregon </option> <option value="JF"> Jefferson </option> <option value="NJ"> New Jersey </option> </select> </label> </fieldset> <input type="submit" name="subby" value="Send Info" /> </form> <p> <a href="#cs328">Link back to the top of the form. </a> </p> <div class="column"> (given 1st) Always look on the bright side of life! </div> <div class="column"> (given 2nd) I'm a Lumberjack, and that's OK! </div> <div class="column"> (given 3rd) It's an ex-parrot! </div> <div class="column"> (given 4th) Is this the room for an argument? </div> <p class="aftercolumns"> I am the text that follows the columns. I want it to catch your eye. </p> <hr /> <p> <a href="http://validator.w3.org/check/referer"> Validate this HTML5 page </a> </p> <p> For full credit, this page must also pass the tests at <a href="http://validator.nu/"> http://validator.nu/</a>: (instructions modified from http://stackoverflow.com/questions/16596493/html5-doctype-with-strict) </p> <ul> <li> switch to "text field" in the select box at the top left of the form (make sure JavaScript is enabled...!) </li> <li> paste in the text of your document </li> <li> in the Preset field, select: <br /> "XHTML5 with SVG 1.1 + MathML 3.0 + RDFa Lite 1.1" </li> <li> click validate </li> </ul> <p> <a href= "http://jigsaw.w3.org/css-validator/check/referer?profile=css3"> <img src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS3!" height="31" width="88" /> </a> </p> </body> </html>