1 / 18

Interactive iLab Guide: HTML5 Interface Preparation & Creation

This interactive guide uses Bloom’s Taxonomy to progress from basic learning levels to original work creation, focusing on HTML5 interface development using a text editor. Includes preparation, modification, and creation activities.

bracy
Download Presentation

Interactive iLab Guide: HTML5 Interface Preparation & Creation

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML5 Interface Start Prepare Modify Create Deliver HTML5 Interface

  2. HTML5 Interface Start Prepare Modify Create Deliver This interactive iLab guide uses Bloom’s Taxonomy to help you progress from lower levels of learning to creating original work. You will begin by recalling reading and reproducing existing content to start. Then you will advance to preparing supporting materials and modifying content to support hands-on application of learning. From that foundation you will advance to creating original content. This iLab guide is an interactive coaching tool for preparing, modifying, and creating an HTML5 interface with a text editor such as Notepad. The three deliverables include a recreation, a modification, and an original creation of web Interface presented on the Career Web Portfolio. The original creation should match the theme of your course project.

  3. HTML5 Interface Start Prepare Modify Create Deliver Prepare HTML Code with Text Editor Head section begin <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Basic HTML5 Page</title> <script src="my-javascript.js"></script> <link rel="stylesheet" href="styles.css" /> </head> <body> <!-- comments --> <header> <hgroup> <h1>Basic HTML5 Page</h1> <h2>A List of Projects Demonstrating Web Animation Techniques</h2> </hgroup> </header> Title of page External CSS

  4. HTML5 Interface Start Prepare Modify Create Deliver Prepare HTML Code with Text Editor Navigation section begin <nav> <ul> <li><a href="#">Nav link 1</a></li> <li><a href="#">Nav link 2</a></li> <li><a href="#">Nav link 3</a></li> </ul> </nav> The a href=“#” shows a placeholder for a future link

  5. HTML5 Interface Start Prepare Modify Create Deliver Prepare HTML Code with Text Editor Section begin Section id for CSS <section> <section id="one"> <h1>Topic 1</h1> Description of Topic 1. <ul> <li> Reproduce content <a href="#">Reproduce link </a> </li> <li> Modify content <a href="#">Modify link</a> </li> <li> Create content <a href="#">Create link</a> </li> </ul> <br> One of as many topics as needed Break at the end of the topic

  6. HTML5 Interface Start Prepare Modify Create Deliver Prepare HTML Code with Text Editor Section close tag </section> <footer> <ul> <li><a href="#">Footer 1</a></li> <li><a href="#">Footer 2</a></li> <li><a href="#">Footer 3</a></li> </ul> </footer> </body> Footer section Body close tag

  7. HTML5 Interface Start Prepare Modify Create Deliver Prepare HTML Code with Text Editor File “Save As” list.html </section> <footer> <ul> <li><a href="#">Footer 1</a></li> <li><a href="#">Footer 2</a></li> <li><a href="#">Footer 3</a></li> </ul> </footer> </body>

  8. HTML5 Interface Start Prepare Modify Create Deliver Prepare CSS Code with Text Editor CSS Style open tag <style> header, nav, section, article, footer {display: block;} header, nav {margin: 0 auto; border-bottom: 1px dotted #000; clear: both; width: 100%;} nav li {display: inline;} section#one {clear: both; border: 5px solid #000; padding: 1%; width: 65%;} section#two {margin: 0; padding: 1%; width: 30%;} section#three {margin: 0; padding: 1%; width: 30%;} aside {float: right; margin: 0 5px; padding: 1%; width: 30%; clear: both;} aside img {border: 1px solid #ccc; margin: 0 10px 0 0;} footer {width:90%; margin:0px auto;} footer li {display: inline;} </style> List Item attributes Section ID formats Optional aside section CSS Style close tag

  9. HTML5 Interface Start Prepare Modify Create Deliver Prepare CSS Code with Text Editor File “Save As” styles.css <style> header, nav, section, article, footer {display: block;} header, nav {margin: 0 auto; border-bottom: 1px dotted #000; clear: both; width: 100%;} nav li {display: inline;} section#one {clear: both; border: 5px solid #000; padding: 1%; width: 65%;} section#two {margin: 0; padding: 1%; width: 30%;} section#three {margin: 0; padding: 1%; width: 30%;} aside {float: right; margin: 0 5px; padding: 1%; width: 30%; clear: both;} aside img {border: 1px solid #ccc; margin: 0 10px 0 0;} footer {width:90%; margin:0px auto;} footer li {display: inline;} </style>

  10. HTML5 Interface Start Prepare Modify Create Deliver Modify HTML5 Code with Text Editor Use the open with option to open an existing page in a text editor

  11. HTML5 Interface Start Prepare Modify Create Deliver Modify HTML5 Code with Text Editor Use save the file save as option to create a modified version of the file

  12. HTML5 Interface Start Prepare Modify Create Deliver Modify Code with Text Editor <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Basic HTML5 Page</title> <script src="my-javascript.js"></script> <link rel="stylesheet" href="styles.css" /> </head> <body> <!-- comments --> <header> <hgroup> <h1>Basic HTML5 Page</h1> <h2>A List of Projects Demonstrating Web Animation Techniques</h2> </hgroup> </header> Modify the name of the .css file to a modified version

  13. HTML5 Interface Start Prepare Modify Create Deliver Modify Code with Text Editor <section> <section id="one"> <h1>Topic 1</h1> Description of Topic 1. <ul> <li> Reproduce content <a href="#">Reproduce link </a> </li> <li> Modify content <a href="#">Modify link</a> </li> <li> Create content <a href="#">Create link</a> </li> </ul> <br> Modify items such as topics to reflect the category of your industry

  14. HTML5 Interface Start Prepare Modify Create Deliver Modify CSS Code with Text Editor Use the open with option to open an existing CSS page in a text editor

  15. HTML5 Interface Start Prepare Modify Create Deliver Modify CSS Code with Text Editor Use save the file save as option to create a modified version of the file

  16. HTML5 Interface Start Prepare Modify Create Deliver Modify CSS Code with Text Editor <style> header, nav, section, article, footer {display: block;} header, nav { margin: 0px auto; border-bottom: 1px dotted #000; clear: both; width: 100%;} navli {display: inline;} section#one li { display: inline; margin: 10px; padding: 1%; width: 25%; background-color:#b0c4de; } h1 {background-color:#6495ed;} footer {width:90%; margin: 0px auto;} footer li {display: inline;} </style> Modify CSS to influence the display results

  17. HTML5 Interface Start Prepare Modify Create Deliver Now it is your turn to create. Explore ideas such as the CSS attributes to affect the style of content sections. Update the text to describe the specific industry category you are working . Use specific descriptive words for industry themed web animation demonstrations you intend to create.

  18. HTML5 Interface Start Prepare Modify Create Deliver http://jolaughlinfac.mydevryportfolio.com/list.html http://jolaughlinfac.mydevryportfolio.com/list_modify.html http://jolaughlinfac.mydevryportfolio.com/list_create.html

More Related