HTML 5 Interface Start Prepare Modify Create HTML
- Slides: 18
HTML 5 Interface Start Prepare Modify Create HTML 5 Interface Deliver
HTML 5 Interface Start Prepare Modify This interactive i. Lab 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 i. Lab guide is an interactive coaching tool for preparing, modifying, and creating an HTML 5 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 theme of your course project. Create Deliver
HTML 5 Interface Start Prepare Modify Prepare HTML Code with Text Editor Head section begin Title of page External CSS <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Basic HTML 5 Page</title> <script src="my-javascript. js"></script> <link rel="stylesheet" href="styles. css" /> </head> <body> <!-- comments --> <header> <hgroup> <h 1>Basic HTML 5 Page</h 1> <h 2>A List of Projects Demonstrating Web Animation Techniques</h 2> </hgroup> </header> Create Deliver
HTML 5 Interface Start Prepare Modify Prepare HTML Code with Text Editor Navigation section begin The a href=“#” shows a placeholder for a future link <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> Create Deliver
HTML 5 Interface Start Prepare Modify Prepare HTML Code with Text Editor Section begin Section id for CSS One of as many topics as needed Break at the end of the topic <section> <section id="one"> <h 1>Topic 1</h 1> 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> Create Deliver
HTML 5 Interface Start Prepare Modify Prepare HTML Code with Text Editor Section close tag </section> Footer section Body close tag <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> Create Deliver
HTML 5 Interface Start Prepare Modify 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> Create Deliver
HTML 5 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: 1 px dotted #000; clear: both; width: 100%; } List Item attributes Section ID formats Optional aside section CSS Style close tag nav li {display: inline; } section#one {clear: both; border: 5 px 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 5 px; padding: 1%; width: 30%; clear: both; } aside img {border: 1 px solid #ccc; margin: 0 10 px 0 0; } footer {width: 90%; margin: 0 px auto; } footer li {display: inline; } </style>
HTML 5 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: 1 px dotted #000; clear: both; width: 100%; } nav li {display: inline; } section#one {clear: both; border: 5 px 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 5 px; padding: 1%; width: 30%; clear: both; } aside img {border: 1 px solid #ccc; margin: 0 10 px 0 0; } footer {width: 90%; margin: 0 px auto; } footer li {display: inline; } </style>
HTML 5 Interface Start Prepare Modify Create Modify HTML 5 Code with Text Editor Use the open with option to open an existing page in a text editor Deliver
HTML 5 Interface Start Prepare Modify Create Modify HTML 5 Code with Text Editor Use save the file save as option to create a modified version of the file Deliver
HTML 5 Interface Start Prepare Modify Create Modify Code with Text Editor Modify the name of the. css file to a modified version <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Basic HTML 5 Page</title> <script src="my-javascript. js"></script> <link rel="stylesheet" href="styles. css" /> </head> <body> <!-- comments --> <header> <hgroup> <h 1>Basic HTML 5 Page</h 1> <h 2>A List of Projects Demonstrating Web Animation Techniques</h 2> </hgroup> </header> Deliver
HTML 5 Interface Start Prepare Modify Create Modify Code with Text Editor Modify items such as topics to reflect the category of your industry <section> <section id="one"> <h 1>Topic 1</h 1> 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> Deliver
HTML 5 Interface Start Prepare Modify Create Modify CSS Code with Text Editor Use the open with option to open an existing CSS page in a text editor Deliver
HTML 5 Interface Start Prepare Modify Create Modify CSS Code with Text Editor Use save the file save as option to create a modified version of the file Deliver
HTML 5 Interface Start Prepare Modify Create Modify CSS Code with Text Editor <style> header, nav, section, article, footer {display: block; } Modify CSS to influence the display results header, nav { margin: 0 px auto; border-bottom: 1 px dotted #000; clear: both; width: 100%; } nav li {display: inline; } section#one li { display: inline; margin: 10 px; padding: 1%; width: 25%; background-color: #b 0 c 4 de; } h 1 {background-color: #6495 ed; } footer {width: 90%; margin: 0 px auto; } footer li {display: inline; } </style> Deliver
HTML 5 Interface Start Prepare Modify Create 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. Deliver
HTML 5 Interface Start Prepare Modify Create http: //jolaughlinfac. mydevryportfolio. com/list. html http: //jolaughlinfac. mydevryportfolio. com/list_modify. html http: //jolaughlinfac. mydevryportfolio. com/list_create. html Deliver
Describes a firm's ability to create deploy modify
Jika noel(create(q)) adalah 0, maka front(create(q)) adalah
Create sequence start with
An interface
What is interface in java
Office interface vs industrial interface
Industrial interfaces
Site:slidetodoc.com
Jump start algorithm
Create html form
Stressed possessive adjectives and pronouns
Words that modify nouns
T.a.
Using expressions of quantity in adjective clauses
Streamlines on a weather map depict
Unsupported operation: cannot modify an unmodifiable list
Please feel free to edit
Words that modify verbs adjectives and adverbs
Scamper modify example
