For Aroka

data_files_tut_1-6.zip

Home >Computer Science homework help >***For Aroka***

Data Files Tut 1-6/tutorial.01/case1/mhlogo.jpg

Data Files Tut 1-6/tutorial.01/case1/mhstyles.css

/* New Perspectives on HTML Tutorial 1 Case Problem 1 Math High Style Sheet Author: Laureen Coe Date: 3/1/2014 Filename: mhstyles.css Supporting Files: none */ /* Section Styles */ body { margin: 0px auto; padding: 0px; line-height: 1.5em; width: 98%; max-width: 980px; min-width: 250px; font-family: Times New Roman, serif; } header { width: 100%; text-align: center; } article { width: 65%; float: left; } aside { width: 34%; margin-top: 25px; background-color: rgb(212, 212, 212); float: left; border: 3px solid rgb(102, 102, 102); -moz-border-radius: 15px; border-radius: 15px; } aside h1 { font-size: 1em; margin: 0px; text-align: center; margin: 5px 5px; } aside p { font-size: 0.8em; margin: 5px 5px; } aside h1+p+p { text-align: center; font-size: 1.1em; } aside h1+p+p+p+p { text-align: center; font-size: 1.1em; } footer { display: block; width: 100%; clear: left; text-align: center; font-size: 0.8em; font-style: normal; font-variant: small-caps; border-top: 1px solid black; background-color: rgb(221, 221, 221); } /* Block Styles */ h1, h2, h3, h4, h5, h6 { font-family: Arial, Helvetica, sans-serif; } header h1 { margin: 1em 0em; font-size: 2em; } h2 { margin: 1em 0em; font-size: 1.5em; } header h1 { margin: 0px; } header h2 { font-size: 1.2em; font-style: italic; margin: 0em; padding-bottom: 0.5em; border-bottom:1px black solid; } article p { margin: 0.2em 0.9em 0.7em 0em; }

Data Files Tut 1-6/tutorial.01/case1/mhtxt.htm

Leonhard Euler (1707-1783) The greatest mathematician of the eighteenth century, Leonhard Euler was born in Basel, Switzerland. There, he studied under another giant of mathematics, Jean Bernoulli. In 1731 Euler became a professor of physics and mathematics at St. Petersburg Academy of Sciences. Euler was the most prolific mathematician of all time, publishing over 800 different books and papers. His influence was felt in physics and astronomy as well. He is perhaps best known for his research into mathematical analysis. Euler's work, Introductio in analysin infinitorum (1748), remained a standard textbook in the field for well over a century. For the princess of Anhalt-Dessau he wrote Lettres a une princesse d'Allemagne (1768-1772), giving a clear non-technical outline of the main physical theories of the time. One can hardly write a mathematical equation without copying Euler. Notations still in use today, such as e and pi, were introduced in Euler's writings. Leonhard Euler died in 1783, leaving behind a legacy perhaps unmatched, and certainly unsurpassed, in the annals of mathematics. The Most Beautiful Theorem? Euler's Equation cos(x) + isin(x) = e (ix) demonstrates the relationship between algebra, complex analysis, and trigonometry. From this equation, it's easy to derive the identity e(pi i) + 1 = 0 which relates the fundamental constants: 0, 1, pi, e, and i in a single beautiful and elegant statement. A poll of readers conducted by The Mathematical Intelligencer magazine named Euler's Identity as the most beautiful theorem in the history of mathematics. Math High: A Site for Educators and Researchers

Data Files Tut 1-6/tutorial.01/case1/modernizr-1.5.js

/*! * Modernizr JavaScript library 1.5 * http://www.modernizr.com/ * * Copyright (c) 2009-2010 Faruk Ates - http://farukat.es/ * Dual-licensed under the BSD and MIT licenses. * http://www.modernizr.com/license/ * * Featuring major contributions by * Paul Irish - http://paulirish.com */ /* * LicenseModernizr is available under the MIT and BSD licenses: * MIT License * Copyright (c) 2009–2010 Faruk Ate? * Permission is hereby granted, free of charge, to any person obtaining a copy * of this software and associated documentation files (the "Software"), to deal * in the Software without restriction, including without limitation the rights * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell * copies of the Software, and to permit persons to whom the Software is * furnished to do so, subject to the following conditions: * The above copyright notice and this permission notice shall be included in * all copies or substantial portions of the Software. * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN * THE SOFTWARE. * BSD License * Copyright (c) 2010, Faruk Ate? * All rights reserved. * Redistribution and use in source and binary forms, with or without * modification, are permitted provided that the following conditions are met: * * Redistributions of source code must retain the above copyright * notice, this list of conditions and the following disclaimer. * * Redistributions in binary form must reproduce the above copyright * notice, this list of conditions and the following disclaimer in the * documentation and/or other materials provided with the distribution. * * Neither the name of the Organization nor the * names of its contributors may be used to endorse or promote products * derived from this software without specific prior written permission. * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND * ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE * DISCLAIMED. IN NO EVENT SHALL COPYRIGHT HOLDER BE LIABLE FOR ANY * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. */ /* * Modernizr is a script that will detect native CSS3 and HTML5 features * available in the current UA and provide an object containing all * features with a true/false value, depending on whether the UA has * native support for it or not. * * In addition to that, Modernizr will add classes to the <html> * element of the page, one for each cutting-edge feature. If the UA * supports it, a class like "cssgradients" will be added. If not, * the class name will be "no-cssgradients". This allows for simple * if-conditionals in CSS styling, making it easily to have fine * control over the look and feel of your website. * * @author Faruk Ates * @copyright (c) 2009-2010 Faruk Ates. * * @contributor Paul Irish * @contributor Ben Alman */ window.Modernizr = (function(window,doc,undefined){ var version = '1.5', ret = {}, /** * enableHTML5 is a private property for advanced use only. If enabled, * it will make Modernizr.init() run through a brief while() loop in * which it will create all HTML5 elements in the DOM to allow for * styling them in Internet Explorer, which does not recognize any * non-HTML4 elements unless created in the DOM this way. * * enableHTML5 is ON by default. */ enableHTML5 = true, /** * fontfaceCheckDelay is the ms delay before the @font-face test is * checked a second time. This is neccessary because both Gecko and * WebKit do not load data: URI font data synchronously. * https://bugzilla.mozilla.org/show_bug.cgi?id=512566 * The check will be done again at fontfaceCheckDelay*2 and then * a fourth time at window's load event. * If you need to query for @font-face support, send a callback to: * Modernizr._fontfaceready(fn); * The callback is passed the boolean value of Modernizr.fontface */ fontfaceCheckDelay = 75, docElement = doc.documentElement, /** * Create our "modernizr" element that we do most feature tests on. */ mod = 'modernizr', m = doc.createElement( mod ), m_style = m.style, /** * Create the input element for various Web Forms feature tests. */ f = doc.createElement( 'input' ), // Reused strings, stored here to allow better minification canvas = 'canvas', canvastext = 'canvastext', rgba = 'rgba', hsla = 'hsla', multiplebgs = 'multiplebgs', backgroundsize = 'backgroundsize', borderimage = 'borderimage', borderradius = 'borderradius', boxshadow = 'boxshadow', opacity = 'opacity', cssanimations = 'cssanimations', csscolumns = 'csscolumns', cssgradients = 'cssgradients', cssreflections = 'cssreflections', csstransforms = 'csstransforms', csstransforms3d = 'csstransforms3d', csstransitions = 'csstransitions', fontface = 'fontface', geolocation = 'geolocation', video = 'video', audio = 'audio', input = 'input', inputtypes = input + 'types', // inputtypes is an object of its own containing individual tests for // various new input types, such as search, range, datetime, etc. svg = 'svg', smil = 'smil', svgclippaths = svg+'clippaths', background = 'background', backgroundColor = background + 'Color', canPlayType = 'canPlayType', // FF gets really angry if you name local variables as these, but camelCased. localstorage = 'localStorage', sessionstorage = 'sessionStorage', applicationcache = 'applicationCache', webWorkers = 'webworkers', hashchange = 'hashchange', crosswindowmessaging = 'crosswindowmessaging', historymanagement = 'historymanagement', draganddrop = 'draganddrop', websqldatabase = 'websqldatabase', indexedDB = 'indexedDB', websockets = 'websockets', smile = ':)', // IE7 gets mad if you name a local variable `toString` tostring = Object.prototype.toString, // list of property values to set for css tests. see ticket #21 prefixes = ' -o- -moz- -ms- -webkit- -khtml- '.split(' '), tests = {}, inputs = {}, attrs = {}, classes = [], /** * isEventSupported determines if a given element supports the given event * function from http://yura.thinkweb2.com/isEventSupported/ */ isEventSupported = (function(){ var TAGNAMES = { 'select':'input','change':'input', 'submit':'form','reset':'form', 'error':'img','load':'img','abort':'img' }, cache = { }; function isEventSupported(eventName, element) { var canCache = (arguments.length == 1); // only return cached result when no element is given if (canCache && cache[eventName]) { return cache[eventName]; } element = element || document.createElement(TAGNAMES[eventName] || 'div'); eventName = 'on' + eventName; // When using `setAttribute`, IE skips "unload", WebKit skips "unload" and "resize" // `in` "catches" those var isSupported = (eventName in element); if (!isSupported && element.setAttribute) { element.setAttribute(eventName, 'return;'); isSupported = typeof element[eventName] == 'function'; } element = null; return canCache ? (cache[eventName] = isSupported) : isSupported; } return isEventSupported; })(); var _hasOwnProperty = ({}).hasOwnProperty, hasOwnProperty; if (typeof _hasOwnProperty !== 'undefined' && typeof _hasOwnProperty.call !== 'undefined') { hasOwnProperty = function (object, property) { return _hasOwnProperty.call(object, property); }; } else { hasOwnProperty = function (object, property) { /* yes, this can give false positives/negatives, but most of the time we don't care about those */ return ((property in object) && typeof object.constructor.prototype[property] === 'undefined'); }; } /** * set_css applies given styles to the Modernizr DOM node. */ function set_css( str ) { m_style.cssText = str; } /** * set_css_all extrapolates all vendor-specific css strings. */ function set_css_all( str1, str2 ) { return set_css(prefixes.join(str1 + ';') + ( str2 || '' )); } /** * contains returns a boolean for if substr is found within str. */ function contains( str, substr ) { return (''+str).indexOf( substr ) !== -1; } /** * test_props is a generic CSS / DOM property test; if a browser supports * a certain property, it won't return undefined for it. * A supported CSS property returns empty string when its not yet set. */ function test_props( props, callback ) { for ( var i in props ) { if ( m_style[ props[i] ] !== undefined && ( !callback || callback( props[i], m ) ) ) { return true; } } } /** * test_props_all tests a list of DOM properties we want to check against. * We specify literally ALL possible (known and/or likely) properties on * the element including the non-vendor prefixed one, for forward- * compatibility. */ function test_props_all( prop, callback ) { var uc_prop = prop.charAt(0).toUpperCase() + prop.substr(1), // following spec is to expose vendor-specific style properties as: // elem.style.WebkitBorderRadius // and the following would be incorrect: // elem.style.webkitBorderRadius // Webkit and Mozilla are nice enough to ghost their properties in the lowercase // version but Opera does not. // see more here: http://github.com/Modernizr/Modernizr/issues/issue/21 props = [ prop, 'Webkit' + uc_prop, 'Moz' + uc_prop, 'O' + uc_prop, 'ms' + uc_prop, 'Khtml' + uc_prop ]; return !!test_props( props, callback ); } /** * Tests */ tests[canvas] = function() { return !!doc.createElement( canvas ).getContext; }; tests[canvastext] = function() { return !!(tests[canvas]() && typeof doc.createElement( canvas ).getContext('2d').fillText == 'function'); }; /** * The Modernizr.touch test only indicates if the browser supports * touch events, which does not necessarily reflect a touchscreen * device, as evidenced by tablets running Windows 7 or, alas, * the Palm Pre / WebOS (touch) phones. * Additionally, chrome used to lie about its support on this, but that * has since been recitifed: http://crbug.com/36415 * Because there is no way to reliably detect Chrome's false positive * without UA sniffing we have removed this test from Modernizr. We * hope to add it in after Chrome 5 has been sunsetted. * See also http://github.com/Modernizr/Modernizr/issues#issue/84 tests[touch] = function() { return !!('ontouchstart' in window); }; */ /** * geolocation tests for the new Geolocation API specification. * This test is a standards compliant-only test; for more complete * testing, including a Google Gears fallback, please see: * http://code.google.com/p/geo-location-javascript/ * or view a fallback solution using google's geo API: * http://gist.github.com/366184 */ tests[geolocation] = function() { return !!navigator.geolocation; }; tests[crosswindowmessaging] = function() { return !!window.postMessage; }; tests[websqldatabase] = function() { var result = !!window.openDatabase; if (result){ try { result = !!openDatabase("testdb", "1.0", "html5 test db", 200000); } catch(err) { result = false; } } return result; }; tests[indexedDB] = function(){ return !!window[indexedDB]; }; // documentMode logic from YUI to filter out IE8 Compat Mode // which false positives. tests[hashchange] = function() { return isEventSupported(hashchange, window) && ( document.documentMode === undefined || document.documentMode > 7 ); }; tests[historymanagement] = function() { return !!(window.history && history.pushState); }; tests[draganddrop] = function() { return isEventSupported('drag') && isEventSupported('dragstart') && isEventSupported('dragenter') && isEventSupported('dragover') && isEventSupported('dragleave') && isEventSupported('dragend') && isEventSupported('drop'); }; tests[websockets] = function(){ return ('WebSocket' in window); }; // http://css-tricks.com/rgba-browser-support/ tests[rgba] = function() { // Set an rgba() color and check the returned value set_css( background + '-color:rgba(150,255,150,.5)' ); return contains( m_style[backgroundColor], rgba ); }; tests[hsla] = function() { // Same as rgba(), in fact, browsers re-map hsla() to rgba() internally set_css( background + '-color:hsla(120,40%,100%,.5)' ); return contains( m_style[backgroundColor], rgba ); }; tests[multiplebgs] = function() { // Setting multiple images AND a color on the background shorthand property // and then querying the style.background property value for the number of // occurrences of "url(" is a reliable method for detecting ACTUAL support for this! set_css( background + ':url(//:),url(//:),red url(//:)' ); // If the UA supports multiple backgrounds, there should be three occurrences // of the string "url(" in the return value for elem_style.background return new RegExp("(url\\s*\\(.*?){3}").test(m_style[background]); }; // In testing support for a given CSS property, it's legit to test: // elem.style[styleName] !== undefined // If the property is supported it will return an empty string, // if unsupported it will return undefined. // We'll take advantage of this quick test and skip setting a style // on our modernizr element, but instead just testing undefined vs // empty string. // The legacy set_css_all calls will remain in the source // (however, commented) in for clarity, yet functionally they are // no longer needed. tests[backgroundsize] = function() { return test_props_all( background + 'Size' ); }; tests[borderimage] = function() { // set_css_all( 'border-image:url(m.png) 1 1 stretch' ); return test_props_all( 'borderImage' ); }; // super comprehensive table about all the unique implementations of // border-radius: http://muddledramblings.com/table-of-css3-border-radius-compliance tests[borderradius] = function() { // set_css_all( 'border-radius:10px' ); return test_props_all( 'borderRadius', '', function( prop ) { return contains( prop, 'orderRadius' ); }); }; tests[boxshadow] = function() { // set_css_all( 'box-shadow:#000 1px 1px 3px' ); return test_props_all( 'boxShadow' ); }; tests[opacity] = function() { // Browsers that actually have CSS Opacity implemented have done so // according to spec, which means their return values are within the // range of [0.0,1.0] - including the leading zero. set_css_all( 'opacity:.5' ); return contains( m_style[opacity], '0.5' ); }; tests[cssanimations] = function() { // set_css_all( 'animation:"animate" 2s ease 2', 'position:relative' ); return test_props_all( 'animationName' ); }; tests[csscolumns] = function() { // set_css_all( 'column-count:3' ); return test_props_all( 'columnCount' ); }; tests[cssgradients] = function() { /** * For CSS Gradients syntax, please see: * http://webkit.org/blog/175/introducing-css-gradients/ * https://developer.mozilla.org/en/CSS/-moz-linear-gradient * https://developer.mozilla.org/en/CSS/-moz-radial-gradient * http://dev.w3.org/csswg/css3-images/#gradients- */ var str1 = background + '-image:', str2 = 'gradient(linear,left top,right bottom,from(#9f9),to(white));', str3 = 'linear-gradient(left top,#9f9, white);'; set_css( (str1 + prefixes.join(str2 + str1) + prefixes.join(str3 + str1)).slice(0,-str1.length) ); return contains( m_style.backgroundImage, 'gradient' ); }; tests[cssreflections] = function() { // set_css_all( 'box-reflect:right 1px' ); return test_props_all( 'boxReflect' ); }; tests[csstransforms] = function() { // set_css_all( 'transform:rotate(3deg)' ); return !!test_props([ 'transformProperty', 'WebkitTransform', 'MozTransform', 'OTransform', 'msTransform' ]); }; tests[csstransforms3d] = function() { // set_css_all( 'perspective:500' ); var ret = !!test_props([ 'perspectiveProperty', 'WebkitPerspective', 'MozPerspective', 'OPerspective', 'msPerspective' ]); // webkit has 3d transforms disabled for chrome, though // it works fine in safari on leopard and snow leopard // as a result, it 'recognizes' the syntax and throws a false positive // thus we must do a more thorough check: if (ret){ var st = document.createElement('style'), div = doc.createElement('div'); // webkit allows this media query to succeed only if the feature is enabled. // "@media (transform-3d),(-o-transform-3d),(-moz-transform-3d),(-ms-transform-3d),(-webkit-transform-3d),(modernizr){#modernizr{height:3px}}" st.textContent = '@media ('+prefixes.join('transform-3d),(')+'modernizr){#modernizr{height:3px}}'; doc.getElementsByTagName('head')[0].appendChild(st); div.id = 'modernizr'; docElement.appendChild(div); ret = div.offsetHeight === 3; st.parentNode.removeChild(st); div.parentNode.removeChild(div); } return ret; }; tests[csstransitions] = function() { // set_css_all( 'transition:all .5s linear' ); return test_props_all( 'transitionProperty' ); }; // @font-face detection routine created by Paul Irish - paulirish.com // Merged into Modernizr with approval. Read more about Paul's work here: // http://paulirish.com/2009/font-face-feature-detection/ tests[fontface] = function(){ var fontret; if (/*@cc_on@if(@_jscript_version>=5)!@end@*/0) fontret = true; else { // Create variables for dedicated @font-face test var st = doc.createElement('style'), spn = doc.createElement('span'), size, isFakeBody = false, body = doc.body, callback, isCallbackCalled; // The following is a font-face + glyph definition for the . character: st.textContent = "@font-face{font-family:testfont;src:url('data:font/ttf;base64,AAEAAAAMAIAAAwBAT1MvMliohmwAAADMAAAAVmNtYXCp5qrBAAABJAAAANhjdnQgACICiAAAAfwAAAAEZ2FzcP//AAMAAAIAAAAACGdseWYv5OZoAAACCAAAANxoZWFk69bnvwAAAuQAAAA2aGhlYQUJAt8AAAMcAAAAJGhtdHgGDgC4AAADQAAAABRsb2NhAIQAwgAAA1QAAAAMbWF4cABVANgAAANgAAAAIG5hbWUgXduAAAADgAAABPVwb3N03NkzmgAACHgAAAA4AAECBAEsAAUAAAKZAswAAACPApkCzAAAAesAMwEJAAACAAMDAAAAAAAAgAACbwAAAAoAAAAAAAAAAFBmRWQAAAAgqS8DM/8zAFwDMwDNAAAABQAAAAAAAAAAAAMAAAADAAAAHAABAAAAAABGAAMAAQAAAK4ABAAqAAAABgAEAAEAAgAuqQD//wAAAC6pAP///9ZXAwAAAAAAAAACAAAABgBoAAAAAAAvAAEAAAAAAAAAAAAAAAAAAAABAAIAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAAEACoAAAAGAAQAAQACAC6pAP//AAAALqkA////1lcDAAAAAAAAAAIAAAAiAogAAAAB//8AAgACACIAAAEyAqoAAwAHAC6xAQAvPLIHBADtMrEGBdw8sgMCAO0yALEDAC88sgUEAO0ysgcGAfw8sgECAO0yMxEhESczESMiARDuzMwCqv1WIgJmAAACAFUAAAIRAc0ADwAfAAATFRQWOwEyNj0BNCYrASIGARQGKwEiJj0BNDY7ATIWFX8aIvAiGhoi8CIaAZIoN/43KCg3/jcoAWD0JB4eJPQkHh7++EY2NkbVRjY2RgAAAAABAEH/+QCdAEEACQAANjQ2MzIWFAYjIkEeEA8fHw8QDxwWFhwWAAAAAQAAAAIAAIuYbWpfDzz1AAsEAAAAAADFn9IuAAAAAMWf0i797/8zA4gDMwAAAAgAAgAAAAAAAAABAAADM/8zAFwDx/3v/98DiAABAAAAAAAAAAAAAAAAAAAABQF2ACIAAAAAAVUAAAJmAFUA3QBBAAAAKgAqACoAWgBuAAEAAAAFAFAABwBUAAQAAgAAAAEAAQAAAEAALgADAAMAAAAQAMYAAQAAAAAAAACLAAAAAQAAAAAAAQAhAIsAAQAAAAAAAgAFAKwAAQAAAAAAAwBDALEAAQAAAAAABAAnAPQAAQAAAAAABQAKARsAAQAAAAAABgAmASUAAQAAAAAADgAaAUsAAwABBAkAAAEWAWUAAwABBAkAAQBCAnsAAwABBAkAAgAKAr0AAwABBAkAAwCGAscAAwABBAkABABOA00AAwABBAkABQAUA5sAAwABBAkABgBMA68AAwABBAkADgA0A/tDb3B5cmlnaHQgMjAwOSBieSBEYW5pZWwgSm9obnNvbi4gIFJlbGVhc2VkIHVuZGVyIHRoZSB0ZXJtcyBvZiB0aGUgT3BlbiBGb250IExpY2Vuc2UuIEtheWFoIExpIGdseXBocyBhcmUgcmVsZWFzZWQgdW5kZXIgdGhlIEdQTCB2ZXJzaW9uIDMuYmFlYzJhOTJiZmZlNTAzMiAtIHN1YnNldCBvZiBKdXJhTGlnaHRiYWVjMmE5MmJmZmU1MDMyIC0gc3Vic2V0IG9mIEZvbnRGb3JnZSAyLjAgOiBKdXJhIExpZ2h0IDogMjMtMS0yMDA5YmFlYzJhOTJiZmZlNTAzMiAtIHN1YnNldCBvZiBKdXJhIExpZ2h0VmVyc2lvbiAyIGJhZWMyYTkyYmZmZTUwMzIgLSBzdWJzZXQgb2YgSnVyYUxpZ2h0aHR0cDovL3NjcmlwdHMuc2lsLm9yZy9PRkwAQwBvAHAAeQByAGkAZwBoAHQAIAAyADAAMAA5ACAAYgB5ACAARABhAG4AaQBlAGwAIABKAG8AaABuAHMAbwBuAC4AIAAgAFIAZQBsAGUAYQBzAGUAZAAgAHUAbgBkAGUAcgAgAHQAaABlACAAdABlAHIAbQBzACAAbwBmACAAdABoAGUAIABPAHAAZQBuACAARgBvAG4AdAAgAEwAaQBjAGUAbgBzAGUALgAgAEsAYQB5AGEAaAAgAEwAaQAgAGcAbAB5AHAAaABzACAAYQByAGUAIAByAGUAbABlAGEAcwBlAGQAIAB1AG4AZABlAHIAIAB0AGgAZQAgAEcAUABMACAAdgBlAHIAcwBpAG8AbgAgADMALgBiAGEAZQBjADIAYQA5ADIAYgBmAGYAZQA1ADAAMwAyACAALQAgAHMAdQBiAHMAZQB0ACAAbwBmACAASgB1AHIAYQBMAGkAZwBoAHQAYgBhAGUAYwAyAGEAOQAyAGIAZgBmAGUANQAwADMAMgAgAC0AIABzAHUAYgBzAGUAdAAgAG8AZgAgAEYAbwBuAHQARgBvAHIAZwBlACAAMgAuADAAIAA6ACAASgB1AHIAYQAgAEwAaQBnAGgAdAAgADoAIAAyADMALQAxAC0AMgAwADAAOQBiAGEAZQBjADIAYQA5ADIAYgBmAGYAZQA1ADAAMwAyACAALQAgAHMAdQBiAHMAZQB0ACAAbwBmACAASgB1AHIAYQAgAEwAaQBnAGgAdABWAGUAcgBzAGkAbwBuACAAMgAgAGIAYQBlAGMAMgBhADkAMgBiAGYAZgBlADUAMAAzADIAIAAtACAAcwB1AGIAcwBlAHQAIABvAGYAIABKAHUAcgBhAEwAaQBnAGgAdABoAHQAdABwADoALwAvAHMAYwByAGkAcAB0AHMALgBzAGkAbAAuAG8AcgBnAC8ATwBGAEwAAAAAAgAAAAAAAP+BADMAAAAAAAAAAAAAAAAAAAAAAAAAAAAFAAAAAQACAQIAEQt6ZXJva2F5YWhsaQ==')}"; doc.getElementsByTagName('head')[0].appendChild(st); // we don't use `serif` and we don't use `monospace` // http://github.com/Modernizr/Modernizr/issues/closed#issue/39 // http://neugierig.org/software/chromium/notes/2009/09/monospace-fonts-workaround.html spn.setAttribute('style','font:99px _,arial,helvetica;position:absolute;visibility:hidden'); if (!body){ body = docElement.appendChild(doc.createElement(fontface)); isFakeBody = true; } // the data-uri'd font only has the . glyph; which is 3 pixels wide. spn.innerHTML = '........'; spn.id = 'fonttest'; body.appendChild(spn); size = spn.offsetWidth*spn.offsetHeight; spn.style.font = '99px testfont,_,arial,helvetica'; // needed for the CSSFontFaceRule false positives (ff3, chrome, op9) fontret = size !== spn.offsetWidth*spn.offsetHeight; function delayedCheck(){ if (!body.parentNode) return; fontret = ret[fontface] = size !== spn.offsetWidth*spn.offsetHeight; docElement.className = docElement.className.replace(/(no-)?fontface\b/,'') + (fontret ? ' ' : ' no-') + fontface; } setTimeout(delayedCheck,fontfaceCheckDelay); setTimeout(delayedCheck,fontfaceCheckDelay*2); addEventListener('load',function(){ delayedCheck(); (isCallbackCalled = true) && callback && callback(fontret); setTimeout(function(){ if (!isFakeBody) body = spn; body.parentNode.removeChild(body); st.parentNode.removeChild(st); }, 50); },false); } // allow for a callback ret._fontfaceready = function(fn){ (isCallbackCalled || fontret) ? fn(fontret) : (callback = fn); } return fontret || size !== spn.offsetWidth; }; // These tests evaluate support of the video/audio elements, as well as // testing what types of content they support. // // we're using the Boolean constructor here, so that we can extend the value // e.g. Modernizr.video // true // Modernizr.video.ogg // 'probably' // // codec values from : http://github.com/NielsLeenheer/html5test/blob/9106a8/index.html#L845 // thx to NielsLeenheer and zcorpan tests[video] = function() { var elem = doc.createElement(video), bool = !!elem[canPlayType]; if (bool){ bool = new Boolean(bool); bool.ogg = elem[canPlayType]('video/ogg; codecs="theora"'); bool.h264 = elem[canPlayType]('video/mp4; codecs="avc1.42E01E"'); bool.webm = elem[canPlayType]('video/webm; codecs="vp8, vorbis"'); } return bool; }; tests[audio] = function() { var elem = doc.createElement(audio), bool = !!elem[canPlayType]; if (bool){ bool = new Boolean(bool); bool.ogg = elem[canPlayType]('audio/ogg; codecs="vorbis"'); bool.mp3 = elem[canPlayType]('audio/mpeg;'); // mimetypes accepted: // https://developer.mozilla.org/En/Media_formats_supported_by_the_audio_and_video_elements // http://bit.ly/iphoneoscodecs bool.wav = elem[canPlayType]('audio/wav; codecs="1"'); bool.m4a = elem[canPlayType]('audio/x-m4a;') || elem[canPlayType]('audio/aac;'); } return bool; }; // both localStorage and sessionStorage are // tested in this method because otherwise Firefox will // throw an error: https://bugzilla.mozilla.org/show_bug.cgi?id=365772 // if cookies are disabled // FWIW miller device resolves to [object Storage] in all supporting browsers // except for IE who does [object Object] // IE8 Compat mode supports these features completely: // http://www.quirksmode.org/dom/html5.html tests[localstorage] = function() { return ('localStorage' in window) && window[localstorage] !== null; }; tests[sessionstorage] = function() { // try/catch required for pissy FF behavior try { return ('sessionStorage' in window) && window[sessionstorage] !== null; } catch(e){ return false; } }; tests[webWorkers] = function () { return !!window.Worker; }; tests[applicationcache] = function() { var cache = window[applicationcache]; return !!(cache && (typeof cache.status != 'undefined') && (typeof cache.update == 'function') && (typeof cache.swapCache == 'function')); }; // thanks to Erik Dahlstrom tests[svg] = function(){ return !!doc.createElementNS && !!doc.createElementNS( "http://www.w3.org/2000/svg", "svg").createSVGRect; }; // thanks to F1lt3r and lucideer // http://github.com/Modernizr/Modernizr/issues#issue/35 tests[smil] = function(){ return !!doc.createElementNS && /SVG/.test(tostring.call(doc.createElementNS('http://www.w3.org/2000/svg','animate'))); }; tests[svgclippaths] = function(){ // returns a false positive in saf 3.2? return !!doc.createElementNS && /SVG/.test(tostring.call(doc.createElementNS('http://www.w3.org/2000/svg','clipPath'))); }; // input features and input types go directly onto the ret object, bypassing the tests loop. // hold this guy to execute in a moment. function webforms(){ // Run through HTML5's new input attributes to see if the UA understands any. // We're using f which is the <input> element created early on // Mike Taylr has created a comprehensive resource for testing these attributes // when applied to all input types: // http://miketaylr.com/code/input-type-attr.html // spec: http://www.whatwg.org/specs/web-apps/current-work/multipage/the-input-element.html#input-type-attr-summary ret[input] = (function(props) { for (var i = 0,len=props.length;i<len;i++) { attrs[ props[i] ] = !!(props[i] in f); } return attrs; })('autocomplete autofocus list placeholder max min multiple pattern required step'.split(' ')); // Run through HTML5's new input types to see if the UA understands any. // This is put behind the tests runloop because it doesn't return a // true/false like all the other tests; instead, it returns an object // containing each input type with its corresponding true/false value // Big thx to @miketaylr for the html5 forms expertise. http://miketaylr.com/ ret[inputtypes] = (function(props) { for (var i = 0,bool,len=props.length;i<len;i++) { f.setAttribute('type', props[i]); bool = f.type !== 'text'; // chrome likes to falsely purport support, so we feed it a textual value // if that doesnt succeed then we know there's a custom UI if (bool){ f.value = smile; /* Safari 4 is allowing the smiley as a value, and incorrecty failing.. the test fixes for webkit only, but breaks Opera.. if (/range/.test(f.type)){ bool = test_props_all('appearance',function(prop,m){ return m_style[prop] !== 'textfield' }) } */ if (/tel|search/.test(f.type)){ // spec doesnt define any special parsing or detectable UI // behaviors so we pass these through as true } else if (/url|email/.test(f.type)) { // real url and email support comes with prebaked validation. bool = f.checkValidity && f.checkValidity() === false; } else { bool = f.value != smile; } } inputs[ props[i] ] = !!bool; } return inputs; })('search tel url email datetime date month week time datetime-local number range color'.split(' ')); } // end of test definitions // Run through all tests and detect their support in the current UA. // todo: hypothetically we could be doing an array of tests and use a basic loop here. for ( var feature in tests ) { if ( hasOwnProperty( tests, feature ) ) { // run the test, throw the return value into the Modernizr, // then based on that boolean, define an appropriate className // and push it into an array of classes we'll join later. classes.push( ( ( ret[ feature.toLowerCase() ] = tests[ feature ]() ) ? '' : 'no-' ) + feature.toLowerCase() ); } } // input tests need to run. if (!ret[input]) webforms(); /** * Addtest allows the user to define their own feature tests * the result will be added onto the Modernizr object, * as well as an appropriate className set on the html element * * @param feature - String naming the feature * @param test - Function returning true if feature is supported, false if not */ ret.addTest = function (feature, test) { feature = feature.toLowerCase(); if (ret[ feature ]) { return; // quit if you're trying to overwrite an existing test } test = !!(test()); docElement.className += ' ' + (test ? '' : 'no-') + feature; ret[ feature ] = test; return ret; // allow chaining. }; /** * Reset m.style.cssText to nothing to reduce memory footprint. */ set_css( '' ); m = f = null; // Enable HTML 5 elements for styling in IE. // fyi: jscript version does not reflect trident version // therefore ie9 in ie7 mode will still have a jScript v.9 if ( enableHTML5 && (function(){ var elem = doc.createElement("div"); elem.innerHTML = "<elem></elem>"; return elem.childNodes.length !== 1; })()) { // iepp v1.5.1 MIT @jon_neal http://code.google.com/p/ie-print-protector/ (function(p,e){function q(a,b){if(g[a])g[a].styleSheet.cssText+=b;else{var c=r[l],d=e[j]("style");d.media=a;c.insertBefore(d,c[l]);g[a]=d;q(a,b)}}function s(a,b){for(var c=new RegExp("\\b("+m+")\\b(?!.*[;}])","gi"),d=function(k){return".iepp_"+k},h=-1;++h<a.length;){b=a[h].media||b;s(a[h].imports,b);q(b,a[h].cssText.replace(c,d))}}function t(){for(var a,b=e.getElementsByTagName("*"),c,d,h=new RegExp("^"+m+"$","i"),k=-1;++k<b.length;)if((a=b[k])&&(d=a.nodeName.match(h))){c=new RegExp("^\\s*<"+d+"(.*)\\/"+d+">\\s*$","i");i.innerHTML=a.outerHTML.replace(/\r|\n/g," ").replace(c,a.currentStyle.display=="block"?"<div$1/div>":"<span$1/span>");c=i.childNodes[0];c.className+=" iepp_"+d;c=f[f.length]=[a,c];a.parentNode.replaceChild(c[1],c[0])}s(e.styleSheets,"all")}function u(){for(var a=-1,b;++a<f.length;)f[a][1].parentNode.replaceChild(f[a][0],f[a][1]);for(b in g)r[l].removeChild(g[b]);g={};f=[]}for(var r=e.documentElement,i=e.createDocumentFragment(),g={},m="abbr|article|aside|audio|canvas|command|datalist|details|figure|figcaption|footer|header|hgroup|keygen|mark|meter|nav|output|progress|section|source|summary|time|video",n=m.split("|"),f=[],o=-1,l="firstChild",j="createElement";++o<n.length;){e[j](n[o]);i[j](n[o])}i=i.appendChild(e[j]("div"));p.attachEvent("onbeforeprint",t);p.attachEvent("onafterprint",u)})(this,doc); } // Assign private properties to the return object with prefix ret._enableHTML5 = enableHTML5; ret._version = version; // Remove "no-js" class from <html> element, if it exists: docElement.className=docElement.className.replace(/\bno-js\b/,'') + ' js'; // Add the new classes to the <html> element. docElement.className += ' ' + classes.join( ' ' ); return ret; })(this,this.document);

Data Files Tut 1-6/tutorial.01/case3/dessertstyles.css

/* New Perspectives on HTML Tutorial 1 Case Problem 3 dessertWeb Style Sheet Author: Amy Wu Date: 3/1/2014 Filename: dessertstyles.css Supporting Files: none */ /* Section Styles */ body { margin: 0px auto; padding: 0px; line-height: 1.5em; width: 98%; max-width: 980px; min-width: 250px; font-family: Verdana, Geneva, sans-serif; height: 1100px; } header { display: block; width: 100%; text-align: center; border-bottom: 3px solid teal; } section { display: block; width: 55%; float: left; padding-bottom: 20px; margin-bottom: 30px; border-left: 3px solid teal; border-bottom: 3px solid teal; border-radius: 0px 0px 0px 45px; -moz-border-radius: 0px 0px 0px 45px; -webkit-border-bottom-left-radius: 45px; box-shadow:-10px 10px 20px #0b908f; -webkit-box-shadow:-10px 10px 20px #0b908f; -moz-box-shadow: -10px 10px 20px #0b908f; } section h1 { margin-left: 20px; } section p { text-align: justify; margin-right: 30px; } section img { float: left; margin: 0px 15px 30px 20px; } section h2 { clear: left; font-weight: normal; font-size: 1.3em; margin-left: 20px; margin-bottom: 0px; } section ul { margin: 0px; } section ol { margin: 0px; } aside { width: 44%; margin-top: 45px; padding-bottom: 15px; background-color: #9be5e4; float: left; border: 3px solid teal; -moz-border-radius: 45px; border-radius: 45px; } aside p { font-size: 0.8em; margin: 0px 5px 0px 15px; } aside blockquote { margin: 0px 25px 0px 35px; } aside h1 { text-align: center; font-weight: normal; font-size: 1.2em; margin: 0px; 5px; } footer { display: block; width: 100%; text-align: center; font-size: 0.8em; font-style: normal; font-variant: small-caps; border-top: 1px solid black; background-color: rgb(206, 212, 244); } /* Block Styles */ h1, h2, h3, h4, h5, h6 { font-family: Arial, Helvetica, sans-serif; } header h1 { margin: 1em 0em; font-size: 2em; } hgroup+p { text-align: justify; } dt { font-weight: bold; } #direction { background-color: ivory; } h2 { margin: 1em 0em; font-size: 1.5em; } header h1 { margin: 0px; } header h2 { font-size: 1.2em; font-style: italic; margin: 0em; padding-bottom: 0.5em; border-bottom:1px black solid; }

Data Files Tut 1-6/tutorial.01/case3/dessertweb.jpg

Data Files Tut 1-6/tutorial.01/case3/modernizr-1.5.js

Data Files Tut 1-6/tutorial.01/case3/torte.jpg

Data Files Tut 1-6/tutorial.01/case3/tortetxt.htm

Apple Bavarian Torte (4 stars) A classic European torte baked in a springform pan. Cream cheese, sliced almonds, and apples make this the perfect holiday treat (12 servings). INGREDIENTS 1/2 cup butter 1/3 cup white sugar 1/4 teaspoon vanilla extract 1 cup all-purpose flour 1 (8 ounce) package cream cheese 1/4 cup white sugar 1 egg 1/2 teaspoon vanilla extract 6 apples - peeled, cored, and sliced 1/3 cup white sugar 1/2 teaspoon ground cinnamon 1/4 cup sliced almonds DIRECTIONS Preheat oven to 450 degrees F (230 degrees C). Cream together butter, sugar, vanilla, and flour. Press crust mixture into the flat bottom of a 9-inch springform pan. Set aside. In a medium bowl, blend cream cheese and sugar. Beat in egg and vanilla. Pour cheese mixture over crust. Toss apples with sugar and cinnamon. Spread apple mixture over all. Bake for 10 minutes. Reduce heat to 400 degrees F (200 degrees C) and continue baking for 25 minutes. Sprinkle almonds over top of torte. Continue baking until lightly browned. Cool before removing from pan. REVIEWS 4 stars I loved the buttery taste of the crust which complements the apples very nicely. Reviewed on Sep. 22, 2014 by MMASON. 2 stars Nothing special. I like the crust, but there was a little too much of it for my taste, and I liked the filling but there was too little of it. I thought the crunchy apples combined with the sliced almonds detracted from the overall flavor. Reviewed on Sep. 1, 2014 by GLENDACHEF. 5 stars Delicious!! I recommend microwaving the apples for 3 minutes before baking, to soften them. Great dessert - I'll be making it again for the holidays. Reviewed on August 28, 2014 by BBABS.

Data Files Tut 1-6/tutorial.01/demo/cengage.jpg

Data Files Tut 1-6/tutorial.01/demo/demo.gif

Data Files Tut 1-6/tutorial.01/demo/demo_characters.htm

New Perspectives on HTML and CSS Tutorial 1

HTML Character Codes

This page demonstrates how to use HTML character codes to display an extended list of character symbols in your Web page. Character symbols not found on your keyboard can be entered into your Web page using the either: &#code; where code is the code number for the character, or &char; where char is the name assigned to the character. To view enter a character symbol, enter the HTML code for the character code number or name into the input box below and click the Show button. To display a table of character symbols, select the table type from the drop-down list below and click the Show Table button. The table contains a representation of the character as it appears on your browser. The character name and the character code number appear below the symbol. Note that not all browsers support the complete set of character code names and/or code numbers.

Enter a character code or character name: Select a table of characters from the list box: General Symbols International Characters Greek Symbols Punctuation Symbols Arrow Symbols Mathematial Operators Technical Symbols Miscellaneous Symbols Carey, P. New Perspectives on HTML and CSS, Course Technology: Boston, 2012.

Data Files Tut 1-6/tutorial.01/demo/demo_html.htm

New Perspectives on HTML and CSS Tutorial 1

HTML Tags

This demo displays how to use HTML tags to markup textual content in the body section of an HTML file. Enter sample HTML code in the box on the left using the following syntax: <element> content </element> where element is the name of an HTML element and content is the text content you wanted marked up. To view how your code will be rendered in the browser, click the Preview Code button.

HTML Code

Preview

Carey, P. New Perspectives on HTML and CSS, Course Technology: Boston, 2012.

Data Files Tut 1-6/tutorial.01/demo/demo2.gif

Data Files Tut 1-6/tutorial.01/demo/modernizr-1.5.js

Data Files Tut 1-6/tutorial.01/review/basiclogo.png

Data Files Tut 1-6/tutorial.01/review/basicstick.png

Data Files Tut 1-6/tutorial.01/review/basicstyles.css

/* New Perspectives on HTML Tutorial 1 Review Assignment J-Prop Shop Style Sheet Author: David Vinet Date: 3/1/2014 Filename: basicstyles.css Supporting Files: none */ /* Section Styles */ body { margin: 0px auto; padding: 0px; line-height: 1.5em; width: 98%; max-width: 980px; min-width: 250px; font-family: Verdana, Geneva, sans-serif } header { width: 100%; text-align: center; } section { width: 100%; } footer { clear: left; width: 100%; text-align: center; margin-top: 5px; } aside { float: right; border: 3px solid rgb(255, 177, 255); margin: 30px; padding: 10px; box-shadow:10px 10px 20px #000; -webkit-box-shadow:10px 10px 20px #000; -moz-box-shadow: 10px 10px 20px #000; } aside img { display: block; } aside p { display: block; text-align: center; font-size: 0.8em; } footer address { width: 100%; clear: left; font-size: 0.8em; font-style: normal; font-variant: small-caps; border-top: 1px solid black; background-color: rgb(255, 177, 255); } /* Block Styles */ h1, h2, h3, h4, h5, h6 { font-family: Arial, Helvetica, sans-serif; } header h1 { margin: 1em 0em; font-size: 2em; } h2 { margin: 1em 0em; font-size: 1.5em; } header h1 { margin: 0px; } header h2 { font-size: 1.2em; font-style: italic; margin: 0em; padding-bottom: 0.5em; border-bottom:1px black solid; } article p { margin: 0.2em 0.9em 0.7em 0em; } article ul { margin: 0.1em 0.8em 0.5em; } article ul li { margin-right: 0.5em; }

Data Files Tut 1-6/tutorial.01/review/modernizr-1.5.js

Data Files Tut 1-6/tutorial.01/review/stick.txt

Patented Dura-Coat finish ensures sticks can withstand all weather conditions. More durable than other sticks, these props will keep looking like new for as long as you own them. Enhanced stick flexibility provides more bounce, allowing for better tricks. A soft rubber core adds a whole new element to the sticking experience that you have to feel to believe! Full customization will give you the chance to own a pair of sticks unlike any others out there. I make exactly what you want, with your colors and your designs. A personal touch through both my customization options and hand-crafted designs.

Data Files Tut 1-6/tutorial.01/tutorial/jpslogo.png

Data Files Tut 1-6/tutorial.01/tutorial/jpsstyles.css

/* New Perspectives on HTML Tutorial 1 Tutorial Case J-Prop Shop Style Sheet Author: David Vinet Date: 3/1/2014 Filename: jpsstyles.css Supporting Files: none */ /* Section Styles */ body { margin: 0px auto; padding: 0px; line-height: 1.5em; width: 98%; max-width: 980px; min-width: 250px; font-family: Verdana, Geneva, sans-serif } header { width: 100%; text-align: center; } section { width: 66%; float: left; } aside { width: 32%; margin-top: 2em; float: left; border: 3px solid black; background-color: rgb(255, 177, 255); -moz-border-radius: 35px; border-radius: 35px; box-shadow:10px 10px 20px #000; -webkit-box-shadow:10px 10px 20px #000; -moz-box-shadow: 10px 10px 20px #000; } footer { clear: left; width: 100%; text-align: center; margin-top: 5px; } footer address { width: 100%; clear: left; font-size: 0.8em; font-style: normal; font-variant: small-caps; border-top: 1px solid black; background-color: rgb(255, 177, 255); } /* Block Styles */ h1, h2, h3, h4, h5, h6 { font-family: Arial, Helvetica, sans-serif; } header h1 { margin: 1em 0em; font-size: 2em; } h2 { margin: 1em 0em; font-size: 1.5em; } header h1 { margin: 0px; } header h2 { font-size: 1.2em; font-style: italic; margin: 0em; padding-bottom: 0.5em; border-bottom:1px black solid; } article p { margin: 0.2em 0.9em 0.7em 0em; } article ul { margin: 0.1em 0.8em 0.5em; } article ul li { margin-right: 0.5em; } aside h2 { text-align: center; } aside p { font-size: 0.8em; margin: 0px 0.7em; } aside blockquote { margin: 1.2em 2em 0em 2em; } aside blockquote p { margin: 0em 0em 2em; font-size: 0.7em; }

Data Files Tut 1-6/tutorial.01/tutorial/modernizr-1.5.js

Data Files Tut 1-6/tutorial.01/tutorial/Thumbs.db

Data Files Tut 1-6/tutorial.02/case2/fiddler.jpg

Data Files Tut 1-6/tutorial.02/case2/fidstyles.css

Data Files Tut 1-6/tutorial.02/case2/first.png

Data Files Tut 1-6/tutorial.02/case2/home.png

Data Files Tut 1-6/tutorial.02/case2/hometxt.htm

Thanks to everyone who made Fiddler on the Roof Jr. such a smashing success! After all of the hard work on rehearsals and set building and promotion, it really paid off. I have gotten so many enthusiastic comments about the wonderful performances that I've started putting up a slide show of the production. Please feel free to download the files from the Web site. If you want high resolution photo files, please contact me.

Once again: BRAVO!!! -- Mrs. Juroszek

Data Files Tut 1-6/tutorial.02/case2/last.png

Data Files Tut 1-6/tutorial.02/case2/modernizr-1.5.js

Data Files Tut 1-6/tutorial.02/case2/next.png

Data Files Tut 1-6/tutorial.02/case2/prev.png

Data Files Tut 1-6/tutorial.02/case2/slide1.jpg

Data Files Tut 1-6/tutorial.02/case2/slide1txt.htm

Do You Love Me? sung by D. Ingalls and T. Gates

Data Files Tut 1-6/tutorial.02/case2/slide2.jpg

Data Files Tut 1-6/tutorial.02/case2/slide2txt.htm

If I Were a Rich Man sung by T. Gates

Data Files Tut 1-6/tutorial.02/case2/slide3.jpg

Data Files Tut 1-6/tutorial.02/case2/slide3txt.htm

Matchmaker (L:R) K. Unger, R. Paulson, L. Davis, J. French, C. Lewis

Data Files Tut 1-6/tutorial.02/case2/slide4.jpg

Data Files Tut 1-6/tutorial.02/case2/slide4txt.htm

The Bottle Dance (L:R) T. Lewis, P. Richtoven, P. Levin

Data Files Tut 1-6/tutorial.02/case2/slide5.jpg

Data Files Tut 1-6/tutorial.02/case2/slide5txt.htm

Fiddler Cast #2 (Front Row): O. Young, A. Unger (Second Row): T. Brown, T. Stoller, B. Anglewright, D. Lee, K. Tindale

Data Files Tut 1-6/tutorial.02/case2/slide6.jpg

Data Files Tut 1-6/tutorial.02/case2/slide6txt.htm

Fiddler Full Cast #1

Data Files Tut 1-6/tutorial.02/case2/thumb1.jpg

Data Files Tut 1-6/tutorial.02/case2/thumb2.jpg

Data Files Tut 1-6/tutorial.02/case2/thumb3.jpg

Data Files Tut 1-6/tutorial.02/case2/thumb4.jpg

Data Files Tut 1-6/tutorial.02/case2/thumb5.jpg

Data Files Tut 1-6/tutorial.02/case2/thumb6.jpg

Data Files Tut 1-6/tutorial.02/case3/dcoords.txt

District Coordinates
====================

District 1
18	10
457	16
424	54
372	56
372	99
447	100
452	203
411	205
411	188
370	189
325	184
326	220
267	221
270	289
6	282

District 2
466	14
427	57
375	59
375	99
457	99
456	252
489	252
487	291
551	285
547	126
513	126
491	102
522	99
531	81
510	52
527	25

District 3
535	83
525	106
501	105
519	127
546	123
546	90

District 4
276	291
273	224
330	223
328	187
408	194
408	209
454	207
454	258
486	256
484	293

Data Files Tut 1-6/tutorial.02/case3/dist1txt.htm

District 1 Results

With 65% of the ballots counted, here are the current results from District 1.

District 1 Representative (65% reporting)

✔ Tate Lewis (R) - 171,603 (78%)
Harold Teague (D) - 41,805 (19%)
Kathy Steel (I) - 4,407 (2%)

View statewide races.

Click to view congressional district results ElectionWeb: Your Source for Online Election Results

Data Files Tut 1-6/tutorial.02/case3/dist2txt.htm

District 2 Results

With 65% of the ballots counted, here are the current results from District 2.

District 2 Representative (65% reporting)

✔ Katherine Young (R) - 67,927 (55%)
Hunter Olsen (D) - 49,411 (40%)
Thomas Beck (I) - 2,512 (2%)

View statewide races.

Click to view congressional district results ElectionWeb: Your Source for Online Election Results

Data Files Tut 1-6/tutorial.02/case3/dist3txt.htm

District 3 Results

With 65% of the ballots counted, here are the current results from District 3.

District 3 Representative (65% reporting)

Raymond Doyle (D) - 71,763 (48%)
Diane Peck (R) - 70,266 (47%)
Yolanda Burris (I) - 5,981 (4%)

View statewide races.

Click to view congressional district results ElectionWeb: Your Source for Online Election Results

Data Files Tut 1-6/tutorial.02/case3/dist4txt.htm

District 4 Results

With 65% of the ballots counted, here are the current results from District 4.

District 4 Representative (65% reporting)

Richard Wu (R) - 57,330 (42%)
Anne Anderson (D) - 42,315 (31%)
David Berch (I) - 34,125 (25%)

View statewide races.

Click to view congressional district results ElectionWeb: Your Source for Online Election Results

Data Files Tut 1-6/tutorial.02/case3/ewlogo.png

Data Files Tut 1-6/tutorial.02/case3/ewstyles.css

/* New Perspectives on HTML Tutorial 2 Case Problem 2 Fiddler Style Sheet Author: Tasha Juroszek Date: 3/1/2014 Filename: fidstyles.css Supporting Files: none */ /* Section Styles */ body { margin: 0px auto; padding: 0px; line-height: 1.5em; width: 98%; max-width: 880px; min-width: 700px; font-family: Verdana, Geneva, sans-serif; } header { display: block; width: 100%; margin: 0px auto 10px; } nav { display: block; float: left; } nav ul { list-style-type: none; padding: 0px; margin: 0px; } nav h2 { font-size: 1em; font-weight: bold; margin: 0px; } nav ul li { display: block; width: 150px; background-color: rgb(255, 192, 192); color: black; border: 1px solid black; text-indent: 10px; margin-bottom: 2px; line-height: 1.5em; } section { display: block; width: 600px; float: left; margin-left: 20px; } section h1 { font-size: 1.8em; font-weight: normal; clear: left; padding-top: 5px; } section h2 { font-size: 1.2em; font-weight: normal; } section ul { list-style-type: none; padding: 0px; margin: 0px 0px 10px 0px; } section ul li { font-size: 1em; } figure { display: block; clear: left; width: 600px; margin: 0px auto; text-align: center; } figure figcaption { display: block; text-align: center; width: 600px; font-size: 0.9em; margin: 0px; font-style: italic; } footer { display: block; width: 100%; clear: left; margin-top: 30px; font-size: 0.9em; text-decoration: small-caps; text-align: center; color: rgb(175, 122, 122); border-top: 1px solid rgb(175, 122, 122); } img { border-width: 0px; } section nav { display: block; width: 100%; text-align: center; } section nav ul { display: block; width: 100%; list-style-type: none; padding: 0px; margin: 0px; } section nav ul li { display: block; text-align: center; width: 24%; float: left; background-color: rgb(255, 192, 192); color: black; border: 1px solid black; line-height: 1.5em; }

Data Files Tut 1-6/tutorial.02/case3/kansasmap.png

Data Files Tut 1-6/tutorial.02/case3/kansastxt.htm

Kansas Statewide Races

The Kansas Election polls have officially been closed now for two hours and results are being constantly updated. As of 10pm with 65% of the ballots counted, leaders in the state-wide races for governor and senator are as follows:

Governor (65% reporting)

Charles Young (R) - 371,885 (47%)
Karen Drew (D) - 356,060 (45%)
Barry Davis (I) - 39,562 (5%)

U.S. Senate (65% reporting)

✔ Helen Sanchez (D) - 387,710 (49%)
Linda Epstein (R) - 348,147 (44%)
Hunter Ryan (I) - 47,474 (6%)

Get up-to-the-minute election results from the Kansas Secretary of State.

Click to view congressional district results ElectionWeb: Your Source for Online Election Results

Data Files Tut 1-6/tutorial.02/case3/modernizr-1.5.js

Data Files Tut 1-6/tutorial.02/review/camhome.htm

Welcome to CAMshots, a site for people passionate about digital photography. This site has grown out of decades of photographic experience. I offer advice for both beginners and advanced users. I hope you enjoy what you find, but please be considerate of the work it took to do all this. The entire site contents including all images and articles are copyrighted. Please honor my work and do not copy anything without permission. If you are interested in publishing any of my images or articles or using them in other ways, please contact me and we can discuss your needs. Happy Shooting!

— Gerry

CAMshots ››› Advice and News from the World of Digital Photography

Data Files Tut 1-6/tutorial.02/review/child1.jpg

Data Files Tut 1-6/tutorial.02/review/child2.jpg

Data Files Tut 1-6/tutorial.02/review/child3.jpg

Data Files Tut 1-6/tutorial.02/review/childtxt.htm

First Place: Kate's Portrait

child1

Submitted by: Tigger
Shutter Speed: 1/200 sec.
Focal Length: 40 mm.
F-Stop Number: F/8

Second Place: Ball Pit

child2

Submitted by: Spots99
Shutter Speed: 1/60 sec.
Focal Length: 18 mm.
F-Stop Number: F/3.5

Third Place: Birthday Cake

child3

Submitted by: Buchman5
Shutter Speed: 1/100 sec.
Focal Length: 32 mm.
F-Stop Number: F/6

CAMshots ››› Advice and News from the World of Digital Photography

Data Files Tut 1-6/tutorial.02/review/conlogo.jpg

Data Files Tut 1-6/tutorial.02/review/constyles.css

/* New Perspectives on HTML Tutorial 2 Review Assignment CAMShots Contest Style Sheet Author: Gerry Hayward Date: 3/1/2014 Filename: constyles.css Supporting Files: none */ /* Section Styles */ body { margin: 0px auto; padding: 0px; line-height: 1.5em; width: 98%; max-width: 780px; min-width: 250px; font-family: Verdana, Geneva, sans-serif } header { width: 100%; text-align: left; } nav { display: block; width: 100%; } section nav { font-size: 0.9em; text-align: center; padding-bottom: 20px; } nav ul { list-style-type: none; margin: 0px; padding: 0px; font-size: 0.8em; } nav ul li { display: block; float: left; width: 15.6%; height: 20px; text-align: center; border: 1px solid #2d04ff; background-color: #afd3f3; line-height: 1.5em; margin: 0px 4px 5px 0px; } section { width: 60%; float: left; } section.full { width: 100%; } section p { font-size: 0.9em; margin: 0px 20px 10px 0px; } section.full h1 { text-align: right; font-size: 2em; letter-spacing: 0.1em; } section.full p { font-size: 0.9em; margin: 0px 0px 30px 0px; } section.full article h1 { font-size: 1.1em; text-align: left; letter-spacing: 0.5em; font-weight: normal; margin: 0px 0px 5px 0px; color: #2d04ff; } section.full article figure { display: block; width: 100%; margin-bottom: 10px; } section.full article figure img { display: block; margin: 0px auto; } aside { float: left; margin-top: 25px; width: 38%; border-left: 3px solid #2d04ff; border-top: 3px solid #2d04ff; border-bottom: 3px solid #2d04ff; border-radius: 25px 0px 0px 25px; -moz-border-radius: 25px 0px 0px 25px; -webkit-border-bottom-left-radius: 25px; -webkit-border-top-left-radius: 25px; } aside h1 { text-align: center; font-size: 1.1em; font-weight: normal; color: #2d04ff; margin: 5px 0px 0px; border-bottom: 2px solid #2d04ff; } aside p { font-size: 0.9em; margin: 10px 0px 10px 15px; } aside li { font-size: 0.8em; line-height: 1.1em; } footer { display: block; width: 100%; clear: left; text-align: center; margin-top: 5px; } footer address { display: block; width: 100%; clear: left; font-size: 0.8em; font-style: normal; font-variant: small-caps; margin-top: 20px; border-top: 3px solid #2d04ff; } /* Block Styles */ h1, h2, h3, h4, h5, h6 { font-family: Arial, Helvetica, sans-serif; } header h1 { margin: 1em 0em; font-size: 2em; } h2 { margin: 1em 0em; font-size: 1.5em; } header h1 { margin: 0px; } header h2 { font-size: 1.2em; font-style: italic; margin: 0em; padding-bottom: 0.5em; border-bottom:1px black solid; } article p { margin: 0.2em 0.9em 0.7em 0em; } article ul { margin: 0.1em 0.8em 0.5em; } article ul li { margin-right: 0.5em; } section.full h2 { width: 100%; font-size: 1.5em; margin:-130px 0px 10px 0px; } section.full ul { margin: 0px 0px 140px 0px; } dl { font-size: 0.9em; margin: 0px 0px 130px 60px; } dt b { font-size: 1.1em; } section.full div { clear: left; padding-top: 30px; padding-bottom: 30px; } img { border-width: 0px; } h2+p img { display: block; box-shadow:10px 10px 20px #000000; -webkit-box-shadow:10px 10px 20px #000000; -moz-box-shadow: 10px 10px 20px #000000; }

Data Files Tut 1-6/tutorial.02/review/contest1.png

Data Files Tut 1-6/tutorial.02/review/contest2.png

Data Files Tut 1-6/tutorial.02/review/contest3.png

Data Files Tut 1-6/tutorial.02/review/contesttxt.htm

Contest Winners

Here are the results for this month's contest in the categories of Child Photos, Flower Photos, and Scenic Photos. I received hundreds of entries and it was difficult to narrow the entries down to three in each category. Thanks to everyone who participated this month.

Below are thumbnail images of the winning photos. You can click the photos to view larger images of each. These photos are distributed for non-commercial use. If you wish to obtain copies for commercial use, please contact the photographer.

Child Photos
Flower Photos
Scenic Photos

Next Month's Contest Categories

Animal Photos
Nighttime Photos
Sports Photos

Please submit your entries to Gerry Hayward. Include your name, the photo category, and the photo settings. JPEG photos only.

Attention: Our friends at BetterPhoto.com are having their annual photo contest. Please take this opportunity to submit your work to their editors.

CAMshots ››› Advice and News from the World of Digital Photography

Data Files Tut 1-6/tutorial.02/review/flower1.jpg

Data Files Tut 1-6/tutorial.02/review/flower2.jpg

Data Files Tut 1-6/tutorial.02/review/flower3.jpg

Data Files Tut 1-6/tutorial.02/review/flowertxt.htm

First Place: Lupine

flower3

Submitted by: JGal03
Shutter Speed: 1/100 sec.
Focal Length: 32 mm.
F-Stop Number: F/7

Second Place: Gaillardia

flower1

Submitted by: Krys05
Shutter Speed: 1/60 sec.
Focal Length: 42 mm.
F-Stop Number: F/5.3

Third Place: Mariposa Lily

flower2

Submitted by: Babbers
Shutter Speed: 1/60 sec.
Focal Length: 55 mm.
F-Stop Number: F/8

CAMshots ››› Advice and News from the World of Digital Photography

Data Files Tut 1-6/tutorial.02/review/modernizr-1.5.js

Data Files Tut 1-6/tutorial.02/review/photogloss.htm

Glossary

A

Ambient Light: The natural light in a scene.
Aperture: The maximum size of the hole through which light enters the camera.
Artifact: Unwanted distortions in an image caused by image compression.
Aspect Ratio: The ratio between the width and height of an image.

B

Bit: The smallest unit of computer memory.
Bitmap: A method of storing information that maps an image pixel bit by bit.
Byte: A group of 8 bits, the basic unit of information for the computer.

C

Chromatic Aberration: A fringing effect around the edges, which is caused by the lens not focusing correctly.
Color Depth: The number of bits assigned to each pixel in the image and the number of colors that can be created from those bits.

D

Depth of Field: The distance between the nearest and farthest points that appear in sharp focus in a photograph.
Digital Zoom: A digital magnification of the center 50% of an image. Digital zooms increase the apparent image size by interpolation. They do not increase the amount of image information.
DPI: Dots per Inch. A measurement of the resolution of a digital photo or digital camera. The higher the number, the greater the resolution.

E

EXIF: Exchangeable Image File. This file format embeds camera and exposure information into the graphic file created by the camera.
Exposure: The length of time that the lens is open, allowing light to fall on the camera's image sensor.

F

F-stop: A numerical designation indicating the size of the aperture.
Flash Mode: The camera mode that determines how the internal flash is used in the photo.
Focal Length: The distance from a point where an image is formed (the focal point) to a point in or near the camera lens.

CAMshots ››› Advice and News from the World of Digital Photography

Data Files Tut 1-6/tutorial.02/review/scenic1.jpg

Data Files Tut 1-6/tutorial.02/review/scenic2.jpg

Data Files Tut 1-6/tutorial.02/review/scenic3.jpg

Data Files Tut 1-6/tutorial.02/review/scenictxt.htm

First Place: Lake District Skyline

Scenic1

Submitted by: Hawkeye
Shutter Speed: 1/500 sec.
Focal Length: 23 mm.
F-Stop Number: F/8

Second Place: Chasm Lake Sunrise

Scenic2

Submitted by: Gabbers
Shutter Speed: 1/40 sec.
Focal Length: 6 mm.
F-Stop Number: F/3.5

Third Place: Crofters Cottage

Scenic3

Submitted by: Puma12
Shutter Speed: 1/400 sec.
Focal Length: 25 mm.
F-Stop Number: F/7

CAMshots ››› Advice and News from the World of Digital Photography

Data Files Tut 1-6/tutorial.02/review/thirdstip.jpg

Data Files Tut 1-6/tutorial.02/review/thumb1.jpg

Data Files Tut 1-6/tutorial.02/review/thumb2.jpg

Data Files Tut 1-6/tutorial.02/review/thumb3.jpg

Data Files Tut 1-6/tutorial.02/review/thumb4.jpg

Data Files Tut 1-6/tutorial.02/review/thumb5.jpg

Data Files Tut 1-6/tutorial.02/review/thumb6.jpg

Data Files Tut 1-6/tutorial.02/review/thumb7.jpg

Data Files Tut 1-6/tutorial.02/review/thumb8.jpg

Data Files Tut 1-6/tutorial.02/review/thumb9.jpg

Data Files Tut 1-6/tutorial.02/review/tipweek.htm

Tips of the Week

The Rule of Thirds

Good composition often results in good photographs, even of the most mundane subjects. There are several rules of thumb with respect to employing good composition. One of the most used is the Rule of Thirds. The Rule of Thirds is based on the observation that compositions in which the topic of interest is placed directly in the center of the frame tend to be static and uninteresting.

A better approach is to imagine a grid drawn over your photograph that divides it into thirds, like a tic-tac-toe grid. Place your point of interest away from the center of the frame and onto one of the intersection points on the grid (see below).

If you place points of interest into the thirds, your photo becomes more balanced and will enable the viewer to interact with it more naturally. Studies have shown that people's eyes are usually drawn to the location of the the intersection points in the grid rather than the center of the frame. The Rule of Thirds works with this natural way of viewing an image rather than against it. Many digital cameras allow the user to display the grid on the preview screen, making it easier to employ the Rule of Thirds directly before the shot is taken.

CAMshots ››› Advice and News from the World of Digital Photography

Data Files Tut 1-6/tutorial.02/tutorial/camshots.jpg

Data Files Tut 1-6/tutorial.02/tutorial/camstyles.css

/* New Perspectives on HTML Tutorial 2 Tutorial Case CAMShots Style Sheet Author: Gerry Hayward Date: 3/1/2014 Filename: camstyles.css Supporting Files: none */ /* Section Styles */ body { margin: 0px auto; padding: 0px; line-height: 1.5em; width: 98%; max-width: 780px; min-width: 250px; font-family: Verdana, Geneva, sans-serif } header { width: 100%; text-align: left; } nav { display: block; width: 100%; } section nav { font-size: 0.9em; text-align: center; padding-bottom: 20px; } nav ul { list-style-type: none; margin: 0px; padding: 0px; font-size: 0.8em; } nav ul li { display: block; float: left; width: 15.6%; height: 20px; text-align: center; border: 1px solid #2d04ff; background-color: #afd3f3; line-height: 1.5em; margin: 0px 4px 5px 0px; } section { width: 64%; float: left; } section.full { width: 100%; } section p { font-size: 1.1em; margin: 0px 20px 10px 0px; } section.full h1 { text-align: right; font-size: 2em; letter-spacing: 0.1em; } section.full p { font-size: 0.9em; margin: 0px 0px 30px 0px; } section.full article h1 { font-size: 1.1em; text-align: left; letter-spacing: 0.5em; font-weight: normal; margin: 0px 0px 5px 0px; color: #2d04ff; } section.full article figure { display: block; width: 100%; margin-bottom: 10px; } section.full article figure img { display: block; margin: 0px auto; } aside { float: left; width: 35%; border-left: 3px solid #2d04ff; border-bottom: 3px solid #2d04ff; border-radius: 0px 0px 0px 45px; -moz-border-radius: 0px 0px 0px 45px; -webkit-border-bottom-left-radius: 45px; } aside h1 { font-size: 1.1em; font-weight: normal; text-align: center; margin: 5px 0px; line-height: 1.1em; } aside figure { display: block; width: 90%; margin: 0px auto; } aside figure img { display: block; margin: 0px auto; box-shadow:10px 10px 20px #000000; -webkit-box-shadow:10px 10px 20px #000000; -moz-box-shadow: 10px 10px 20px #000000; } aside figure figcaption { display: block; width: 100%; margin: 10px auto 0px; line-height: 1em; text-align: center; font-style: italic; font-size: 0.7em; } aside li { font-size: 0.8em; line-height: 1.1em; } footer { display: block; width: 100%; clear: left; text-align: center; margin-top: 5px; } footer address { display: block; width: 100%; clear: left; font-size: 0.8em; font-style: normal; font-variant: small-caps; margin-top: 20px; border-top: 3px solid #2d04ff; } /* Block Styles */ h1, h2, h3, h4, h5, h6 { font-family: Arial, Helvetica, sans-serif; } header h1 { margin: 1em 0em; font-size: 2em; } h2 { margin: 1em 0em; font-size: 1.5em; } header h1 { margin: 0px; } header h2 { font-size: 1.2em; font-style: italic; margin: 0em; padding-bottom: 0.5em; border-bottom:1px black solid; } article p { margin: 0.2em 0.9em 0.7em 0em; } article ul { margin: 0.1em 0.8em 0.5em; } article ul li { margin-right: 0.5em; } aside h2 { text-align: center; } aside p { font-size: 0.8em; margin: 0px 0.7em; } section.full h2 { width: 100%; font-size: 1.5em; margin:50px 0px 0px 0px; border-top: 2px solid rgb(172, 172, 172); clear: left; float: left; } dl { font-size: 0.9em; margin: 0px; margin-left: 60px; clear: left; float: left; } dt b { font-size: 1.1em; } section.full div { clear: left; padding-top: 30px; padding-bottom: 30px; } img { border-width: 0px; }

Data Files Tut 1-6/tutorial.02/tutorial/glosstxt.htm

Glossary

A

Ambient Light: The natural light in a scene.
Aperture: The maximum size of the hole through which light enters the camera.
Artifact: Unwanted distortions in an image caused by image compression.
Aspect Ratio: The ratio between the width and height of an image.

B

Bit: The smallest unit of computer memory.
Bitmap: A method of storing information that maps an image pixel bit by bit.
Byte: A group of 8 bits, the basic unit of information for the computer.

C

Chromatic Aberration: A fringing effect around the edges, which is caused by the lens not focusing correctly.
Color Depth: The number of bits assigned to each pixel in the image and the number of colors that can be created from those bits.

D

Depth of Field: The distance between the nearest and farthest points that appear in sharp focus in a photograph.
Digital Zoom: A digital magnification of the center 50% of an image. Digital zooms increase the apparent image size by interpolation. They do not increase the amount of image information.
DPI: Dots per Inch. A measurement of the resolution of a digital photo or digital camera. The higher the number, the greater the resolution.

E

EXIF: Exchangeable Image File. This file format embeds camera and exposure information into the graphic file created by the camera.
Exposure: The length of time that the lens is open, allowing light to fall on the camera's image sensor.

F

F-stop: A numerical designation indicating the size of the aperture.
Flash Mode: The camera mode that determines how the internal flash is used in the photo.
Focal Length: The distance from a point where an image is formed (the focal point) to a point in or near the camera lens.

Return to Top ⇑

CAMshots ››› Advice and News from the World of Digital Photography

Data Files Tut 1-6/tutorial.02/tutorial/hometxt.htm

— Gerry

Photo of the Month

Colorado Double Rainbow by Watts213

Camera: Nikon D50
F-stop: f/7.1
Exposure: 1/200 sec.
Focal Length: 18mm
Aperture: 3.6
Flash Mode: No flash

CAMshots ››› Advice and News from the World of Digital Photography

Data Files Tut 1-6/tutorial.02/tutorial/modernizr-1.5.js

Data Files Tut 1-6/tutorial.02/tutorial/pearlake.jpg

Data Files Tut 1-6/tutorial.02/tutorial/rainbow.png

Data Files Tut 1-6/tutorial.02/tutorial/rainbow_lg.png

Data Files Tut 1-6/tutorial.02/tutorial/thirds.jpg

Data Files Tut 1-6/tutorial.02/tutorial/tipstxt.htm

Tips of the Week

The Rule of Thirds

Photography Sites on the Web

The Web is an excellent resource for articles on photography and digital cameras. Here are a few of my favorites.

☞ Apogee Photo: An established online photography magazine with articles by top pros, discussion forums, workshops, and more.
☞ Outdoor Photographer: The premier magazine for outdoor photography. The site includes extensive tips on photographing wildlife, action sports, scenic vistas, and travel sites.
☞ Digital Photo: An excellent site for novices and professionals with informative reviews and buying guides for the latest equipment and software.
☞ Popular Photography and Imaging: A useful and informative site with articles from the long-established magazine of professional and amateur photographers.

CAMshots ››› Advice and News from the World of Digital Photography

Data Files Tut 1-6/tutorial.03/case2/bmtourtxt.htm

Bike the Mountains Tour

The Bike the Mountains Tour rises from the town of Littleton, Colorado and explores the Colorado Front Range. Our tour crosses the Continental Divide twice, giving you the opportunity to bike the highest paved roads in the United States. This tour is a classic showcase of Colorado's Rocky Mountain scenery.

The Bike the Mountains Tour is amazing. I highly recommend it and would gladly return.
— Steve H.

Not designed for the weekend cyclist, this tour is offered only for those fit enough to ride high mountain passes. We provide sag wagons and support. Your lodging and meals are also part of the registration fee. We guarantee tough climbs, amazing sights, sweaty jerseys, and lots of fun.

This is the seventh year we've offered the Bike the Mountains Tour. It is our most popular tour and riders are returning again and again. Our experienced tour leaders will be there to guide, help, encourage, draft, and lead you every stroke of the way. Come join us!

Itinerary

Day 1

We start from the foothills above Littleton, Colorado, promptly at 9am. The first day is a chance to get your legs in shape, test your gearing, and prepare for what's to come.

Day 2

Day 2 starts with a climb up Bear Creek Canyon to Lookout Mountain, followed by a swift and winding descent into the town of Golden. Refresh yourself at the famous Coors Brewery.

Day 3

Day 3 takes you along the Peak to Peak Highway. This 55-mile route showcases the mountains of the Front Range, providing amazing vistas from Golden Gate Canyon State Park to Rocky Mountain National Park.

Day 4

Now for the supreme challenge: Day 4 brings some real high-altitude cycling through Rocky Mountain National Park and up Trail Ridge Road. It's an amazing ride, high above timberline, topping out at over 11,000 feet.

Day 5

We start Day 5 on the west side of the Continental Divide. From Grand Lake, you'll bike to Winter Park and then over Berthoud Pass, and back to the eastern side of the Continental Divide.

Day 6

On Day 6 we ride back to Littleton over Squaw Pass and Bear Creek and then enjoy a celebratory dinner as we share memories of a great tour.

Mountain Wheels • Littleton, CO 80123 • (303) 555 - 5499

Data Files Tut 1-6/tutorial.03/case2/modernizr-1.5.js

Data Files Tut 1-6/tutorial.03/case2/mw_layout.css

/* New Perspectives on HTML and CSS Tutorial 3 Case Problem 2 Mountain Wheels Layout Style Author: Adriana Turchenko Date: 3/1/2014 Filename: mw_layout.css Supporting Files: none */ /* Layout styles */ body { margin: 0px auto; padding: 0px; width: 900px; } header, footer { margin: 0px auto; } nav { float: left; margin-right: 10px; width: 150px; } #leftsection { float: left; margin-right: 15px; width: 450px; } #rightsection { float: left; width: 200px; } #articleheader { float: left; width: 650px; } h1, h2 { margin: 0px; padding: 0px; } #articleheader h1 { margin-bottom: 10px; } blockquote { border: 1px solid black; float: right; padding: 20px; width: 170px; -moz-border-radius: 35px; border-radius: 35px; box-shadow:10px 10px 20px #000; -webkit-box-shadow:10px 10px 20px #000; -moz-box-shadow: 10px 10px 20px #000; } section p { margin-top: 0px; margin-bottom: 20px; } footer address { border-top: 1px solid black; clear: left; }

Data Files Tut 1-6/tutorial.03/case2/mw_stylestxt.css

/* New Perspectives on HTML and CSS Tutorial 3 Case Problem 2 Mountain Wheels Text and Color Style Author: Date: Filename: mw_layout.css Supporting Files: none */

Data Files Tut 1-6/tutorial.03/case2/mwlogo.png

Data Files Tut 1-6/tutorial.03/case2/wheelmarker.png

Data Files Tut 1-6/tutorial.03/case3/civilwartxt.htm

Course Outline

The Civil War and Reconstruction

About the Course

The Civil War and Reconstruction explores the causes and consequences of the American Civil War, covering American history from 1840 through 1876 in great detail. My primary goal is to interpret the multiple threads that run through this epic event and consider how these threads still engage the politics and culture of the present day. In this course we will rely heavily on primary texts, interpreting the events of the day through the words of those men and women who experienced it. We'll examine four main points of interest:

The crisis of disunion in a young nation
The personality and motivations of the men and women who responded to that crisis
The events of the war which shaped the outcome
The aftermath and the unresolved issues which came out of the conflict

Course Structure

Lectures are provided through podcast or via direct download twice weekly with lecture notes available through e-mail or RSS feed. A detailed summary of the lectures is provided in the links at the left.

About Peter Craft

Peter Craft is a professor of American and Military History and the Director of the Taylor Institute for the Study of Military History at Midwest University. He is the author of numerous books, including: Fault Lines: The Causes of the Civil War, Day at Cooper Union (for which he received the Lincoln Prize), and Helen: A Memoir. He is also a frequent contributor to The News Hour and the History Channel.

Midwest University 2014. Some rights reserved. Unless otherwise indicated, all content on this web site is licensed under a Creative Commons License.

Data Files Tut 1-6/tutorial.03/case3/cw_layout.css

/* New Perspectives on HTML and CSS Tutorial 3 Case Problem 3 Civil War History Layout Style Author: Peter Craft Date: 3/1/2014 Filename: cw_layout.css Supporting Files: none */ /* Layout styles */ body { margin: 0px; padding: 0px; width: 1000px; } body > header > h1 { height: 90px; margin: 0px; width: 100%; } p { margin: 0px 10px 10px 10px; } nav.horizontal ul { display: block; width: 950px; height: 20px; } nav.horizontal ul li { display: block; float: left; text-align: center; width: 150px; } nav.vertical { clear: left; float: left; margin-right: 0px; width: 300px; } section { float: left; width: 700px; } article { float: left; width: 400px; } aside { display: block; width: 300px; float: left; } aside img { display: block; width: 200px; margin: 0px auto 10px; } footer { clear: left; width: 1000px; }

Data Files Tut 1-6/tutorial.03/case3/cw_stylestxt.css

/* New Perspectives on HTML and CSS Tutorial 3 Case Problem 3 Civil War History Text and Color Style Author: Date: Filename: cw_styles.css Supporting Files: cw_layout.css */

Data Files Tut 1-6/tutorial.03/case3/cwphoto.png

Data Files Tut 1-6/tutorial.03/case3/modernizr-1.5.js

Data Files Tut 1-6/tutorial.03/case3/mwulogo.png

Data Files Tut 1-6/tutorial.03/case3/pcphoto.png

Data Files Tut 1-6/tutorial.03/demo/cengage.jpg

Data Files Tut 1-6/tutorial.03/demo/demo.gif

Data Files Tut 1-6/tutorial.03/demo/demo_color_names.htm

New Perspectives on HTML and CSS Tutorial 3

Color Names

You define colors in HTML and CSS using either a color name or a color value. HTML supports list of sixteen basic color names. CSS supports this list as well and adds the color name orange. Most browsers also support an extended set of 140 color names. The following table lists these extended color names, along with RGB and hexadecimal values for each color. The sixteen color names supported by CSS are highlighted in the table. GIF images and some older monitors are limited to 256-color displays. To approximate the full palette colors, GIFs and these older monitors will use a process called dithering. To avoid dithering you should limit your colors to a subset of colors called Web-safe colors. The Web-safe colors from the extended color list are displayed in a bold font.

Sample	Name	RGB	Hexadecimal

Sample	Name	RGB	Hexadecimal

Carey, P. New Perspectives on HTML and CSS, Course Technology: Boston, 2012.

Data Files Tut 1-6/tutorial.03/demo/demo_css.htm

New Perspectives on HTML and CSS Tutorial 3

CSS Styles

This page demonstrates how different styles affect the appearance of Web page text. Enter your sample text in the box in the upper-right corner of this page. When you press the Tab key, the text will be copied to the Preview box. Set the styles for the preview text by entering or selecting the style value from the input boxes on the left and then pressing the Tab key. To apply the default style values, enter or select default. The style selections will be applied automatically to the preview text and the style code will be displayed in the box on the lower-right of the page. To reset all of the styles to their default values, click the Reset Styles button at the bottom of the page.

Note that depending on your browser and browser version, you might not be able to apply text and background colors using the rgba, hsl, or hsla color value models.

color (rgb)	( , , )
color (rgba)	( , , , )
color (hsl)	( , , )
color (hsla)	( , , , )
background-color (rgb)	( , , )
background-color (rgba)	( , , , )
background-color (hsl)	( , , )
background-color (hsla)	( , , , )
font-family	default serif sans-serif monospace cursive fantasy Arial 'Arial Black' 'Book Antiqua' 'Century Gothic' Charcoal 'Comic Sans MS' 'Courier New' Courier Gadget Geneva Georgia Helvetica Impact 'Lucida Console' 'Lucida Grande' 'Lucida Sans Unicode' Monaco Palatino 'Palatino Linotype' Tahoma 'Times New Roman' Times 'Trebuchet MS'
font-style	default italic oblique normal
font-weight	default bold bolder lighter 100 200 300 400 500 600 700 800 900 normal
text-align	default left center right justify
font-size	unit default cm em ex in mm pt px pc %
letter-spacing	unit default cm em ex in mm pt px pc %
word-spacing	unit default cm em ex in mm pt px pc %
line-height	unit default cm em ex in mm pt px pc %
text-indent	unit default cm em ex in mm pt px pc %
text-decoration	default blink line-through overline underline none
text-transform	default capitalize lowercase uppercase none
font-variant	default small-caps none

Enter sample text here

Preview

Style

none Carey, P. New Perspectives on HTML and CSS, Course Technology: Boston, 2012.

Data Files Tut 1-6/tutorial.03/demo/demo2.gif

Data Files Tut 1-6/tutorial.03/review/CloisterBlack.eot

Data Files Tut 1-6/tutorial.03/review/CloisterBlack.svg

Data Files Tut 1-6/tutorial.03/review/CloisterBlack.ttf

Data Files Tut 1-6/tutorial.03/review/CloisterBlack.txt

@font-face { font-family: 'CloisterBlack'; src: url('CloisterBlack.eot'); src: local('☺'), url('CloisterBlack.woff') format('woff'), url('CloisterBlack.ttf') format('truetype'), url('CloisterBlack.svg#cloister') format('svg'); } /* Dieter Steffmann fonts are not licensed and are considered freeware. Full repository of Dieter's fonts can be found here: http://moorstation.org/typoasis/designers/steffmann/index.htm */

Data Files Tut 1-6/tutorial.03/review/CloisterBlack.woff

Data Files Tut 1-6/tutorial.03/review/flake.png

Data Files Tut 1-6/tutorial.03/review/holiday.jpg

Data Files Tut 1-6/tutorial.03/review/holidaytxt.htm

Holidays on the Farm

Saint Nick visits Sunny Acres

This year Sunny Acres becomes Wintery Acres as we institute our first Holidays on the Farm. Join us on weekends from November 23 through January 5 for holiday cheer and festivities.

The Sunny Acres Farm Shop will be decked out in bright and colorful holiday decorations with special prices on garlands, tinsel, ornaments, and wreaths. Be sure to sample our homemade egg nog and bring some home for your family.

The trails and hills around Sunny Acres will be alive with fun and games. Come join us for sleigh rides or zoom down our awesome sledding hill (weather permitting). Sunny Acres is adjacent to Dawson Park, which has a vast network of cross country ski trails for every level of skier.

We've even decorated our barn for the holidays. Come visit Santa's stables, where you might even see a few reindeer--perhaps even one with a red nose!

Hours

Saturdays: 10 am - 5 pm
Sundays: 11 am - 3 pm
Closed: December 25, 31, January 1

Directions

From Council Bluffs, proceed east on I-80
Take Exit 38 North to the Drake Frontage Road
Turn right on Highway G
Proceed east for 2.5 miles
Sunny Acres is on your left; watch for the green sign

Sunny Acres ☀ Tammy & Brent Nielsen ☀ 1977 Highway G ☀ Council Bluffs, IA 51503

Data Files Tut 1-6/tutorial.03/review/hs_layout.css

/* New Perspectives on HTML Tutorial 3 Review Assignment Sunny Acres Layout Styles Author: Tammy Nielsen Date: 3/1/2014 Filename: hs_layout.css Supporting Files: none */ /* Layout styles */ body { margin: 0px auto; padding: 0px; width: 98%; max-width: 800px; min-width: 250px; } header, footer { margin: 0px auto; } nav { width: 200px; float: left; margin-right: 10px; margin-top: -35px; } figure { float: right; border: 1px solid black; width: 270px; margin: 0px 0px 10px 10px; } section { width: 590px; float: left; margin-top: -43px; } section img { float: right; margin: 15px; } footer address { clear: both; width: 100%; }

Data Files Tut 1-6/tutorial.03/review/hs_stylestxt.css

/* New Perspectives on HTML Tutorial 3 Review Assignment Sunny Acres Text and Color Styles Author: Date: Filename: hs_styles.css Supporting Files: CloisterBlack.eot, CloisterBlack.svg, CloisterBlack.ttf, CloisterBlack.woff */

Data Files Tut 1-6/tutorial.03/review/modernizr-1.5.js

Data Files Tut 1-6/tutorial.03/review/salogo.png

Data Files Tut 1-6/tutorial.03/tutorial/arrow.png

Data Files Tut 1-6/tutorial.03/tutorial/haunttxt.htm

The Haunted Maze

Back for another year, every night the Sunny Acres Corn Maze becomes the Sunny Acres Haunted Maze. This season's maze begins with an encounter with an evil organist (played by the Council Bluffs Choir's own Glenn Frye). Explore the maze and find the zombie graveyard, the pumpkin tower, and a haunted house made of corn--not to mention the spiders, ghosts, witches, and other assorted villainy that inhabit the maze.

The Haunted Maze is open the last three weekends of October with a special event on Halloween. Come early in the day to explore the larger Corn Maze, stay for a homemade meal of brats, burgers, soda, and chips, and then participate in the Halloween Festival. Special stations will be set up in the Haunted Maze for trick-or-treaters. A smaller maze is also available that is "scare-friendly" for younger children.

Hours

Open 5 pm - 9 pm on October 14, 15, 21, 22, 28, and 29
Halloween Festival October 31 from 3 pm - 9 pm

Admission

12 and over: $8.50
6 - 11: $6.50
Under 6: $2.50

Sunny Acres ☀ Tammy & Brent Nielsen ☀ 1977 Highway G ☀ Council Bluffs, IA 51503

Data Files Tut 1-6/tutorial.03/tutorial/hometxt.htm

Welcome

There's always something happening at Sunny Acres. With the coming of fall, we're gearing up for our big AutumnFest and Farm Show. If you haven't visited our famous Corn Maze, be sure to do so before it gets torn down on November 5. This year's maze is bigger and better than ever.

Farms can be educational and Sunny Acres is no exception. Schools and home-schooling parents, spend an afternoon with us at our Petting Barn. We have over 100 friendly farm animals in a clean environment. Kids can bottle feed the baby goats, lambs, and calves while they learn about nature and the farming life. Please call ahead for large school groups.

When the sun goes down this time of year, we're all looking for a good fright. Sunny Acres provides that too with another year of the Haunted Maze. Please plan on joining us during weekends in October or on Halloween for our big Halloween Festival.

Of course, Sunny Acres is, above all, a farm. Our Farm Shop is always open with reasonable prices on great produce. Save even more money by picking your own fruits and vegetables from our orchards and gardens.

We all hope to see you soon, down on the farm. — Tammy & Brent Nielsen

Hours

Farm Shop: 9 am - 5 pm Mon - Fri; 9 am - 3 pm Sat
The Corn Maze: 11 am - 9 pm Sat; 11 am - 5 pm Sun
The Haunted Maze: 5 pm - 9 pm Fri & Sat
Petting Barn: 9 am - 4 pm Mon - Fri; 11 am - 3 pm Sat & Sun

Directions

From Council Bluffs, proceed east on I-80
Take Exit 38 North to the Drake Frontage Road
Turn right on Highway G
Proceed east for 2.5 miles
Sunny Acres is on your left; watch for the green sign

Sunny Acres ☀ Tammy & Brent Nielsen ☀ 1977 Highway G ☀ Council Bluffs, IA 51503

Data Files Tut 1-6/tutorial.03/tutorial/mazetxt.htm

The Corn Maze

Welcome to the Sunny Acres Corn Maze. We first heard about mazes from agricultural exchange students who came from England in 1985. In Europe, mazes are very popular in castle gardens. After hearing about the mazes in Europe, we thought it would be a great idea to build one of our own right outside of Council Bluffs.

Since 1997, thousands of people have enjoyed our Corn Mazes. We hope that your family gets as much enjoyment out of this year's Corn Maze as we did building it! Our family would like to invite your family to come out and visit us at this year's Corn Maze and AutumnFest.

Our new 15-acre maze (with over 4 miles of trails to explore) is filled with twists and turns that are good fun for adults and kids alike! See how adventurous you are as you wind through the maze while taking an interactive quiz. Answer the questions correctly and receive additional clues to solve the maze. For families with young children, our maze is filled with jokes, riddles, and quests. Try to be the first in your group to punch out your quest card by visiting the secret spots. This maze is the perfect size and height for little ones. Resting places and educational displays are scattered throughout.

There is no water available in the maze. Make sure you bring water bottles with you! No one under the age of 12 will be allowed in the maze without an adult at any time.

Hours

Open August 3 through November 11
Fridays: 5 pm - 9 pm
Saturdays: 11 am - 9 pm
Sundays: 11 am - 5 pm
Open Labor Day 11 am - 5 pm
School Field Trip Week: October 24 - October 28, 9 am - 3 pm

Admission

Age 12 and Over: $5.50
Ages 6 - 11: $3.50
Ages 5 and under: free

Sunny Acres ☀ Tammy & Brent Nielsen ☀ 1977 Highway G ☀ Council Bluffs, IA 51503

Data Files Tut 1-6/tutorial.03/tutorial/modernizr-1.5.js

Data Files Tut 1-6/tutorial.03/tutorial/nobile.txt

@font-face { font-family: 'NobileRegular'; src: url('nobile-webfont.eot'); src: local('☺'), url('nobile-webfont.woff') format('woff'), url('nobile-webfont.ttf') format('truetype'), url('nobile-webfont.svg#webfontsKo9tqe9') format('svg'); } ---------------------- This Font Software is licensed under the SIL Open Font License, Version 1.1. This license is copied below, and is also available with a FAQ at: http://scripts.sil.org/OFL —————————————————————————————- SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 —————————————————————————————- PREAMBLE The goals of the Open Font License (OFL) are to stimulate worldwide development of collaborative font projects, to support the font creation efforts of academic and linguistic communities, and to provide a free and open framework in which fonts may be shared and improved in partnership with others. The OFL allows the licensed fonts to be used, studied, modified and redistributed freely as long as they are not sold by themselves. The fonts, including any derivative works, can be bundled, embedded, redistributed and/or sold with any software provided that any reserved names are not used by derivative works. The fonts and derivatives, however, cannot be released under any other type of license. The requirement for fonts to remain under this license does not apply to any document created using the fonts or their derivatives. DEFINITIONS “Font Software” refers to the set of files released by the Copyright Holder(s) under this license and clearly marked as such. This may include source files, build scripts and documentation. “Reserved Font Name” refers to any names specified as such after the copyright statement(s). “Original Version” refers to the collection of Font Software components as distributed by the Copyright Holder(s). “Modified Version” refers to any derivative made by adding to, deleting, or substituting—in part or in whole—any of the components of the Original Version, by changing formats or by porting the Font Software to a new environment. “Author” refers to any designer, engineer, programmer, technical writer or other person who contributed to the Font Software. PERMISSION & CONDITIONS Permission is hereby granted, free of charge, to any person obtaining a copy of the Font Software, to use, study, copy, merge, embed, modify, redistribute, and sell modified and unmodified copies of the Font Software, subject to the following conditions: 1) Neither the Font Software nor any of its individual components, in Original or Modified Versions, may be sold by itself. 2) Original or Modified Versions of the Font Software may be bundled, redistributed and/or sold with any software, provided that each copy contains the above copyright notice and this license. These can be included either as stand-alone text files, human-readable headers or in the appropriate machine-readable metadata fields within text or binary files as long as those fields can be easily viewed by the user. 3) No Modified Version of the Font Software may use the Reserved Font Name(s) unless explicit written permission is granted by the corresponding Copyright Holder. This restriction only applies to the primary font name as presented to the users. 4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font Software shall not be used to promote, endorse or advertise any Modified Version, except to acknowledge the contribution(s) of the Copyright Holder(s) and the Author(s) or with their explicit written permission. 5) The Font Software, modified or unmodified, in part or in whole, must be distributed entirely under this license, and must not be distributed under any other license. The requirement for fonts to remain under this license does not apply to any document created using the Font Software. TERMINATION This license becomes null and void if any of the above conditions are not met. DISCLAIMER THE FONT SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM OTHER DEALINGS IN THE FONT SOFTWARE.

Data Files Tut 1-6/tutorial.03/tutorial/nobile-webfont.eot

Data Files Tut 1-6/tutorial.03/tutorial/nobile-webfont.svg

Data Files Tut 1-6/tutorial.03/tutorial/nobile-webfont.ttf

Data Files Tut 1-6/tutorial.03/tutorial/nobile-webfont.woff

Data Files Tut 1-6/tutorial.03/tutorial/pettingtxt.htm

The Petting Barn

The Sunny Acres Petting Barn, conveniently located northeast of Council Bluffs, is a perfect setting for people of all ages to learn about farming and farm animals. At our farm you can enjoy over 100 friendly farm animals in a clean, relaxed, hands-on enviroment. The kids can bottle feed the baby goats, lambs, and calves in the Nursery and Bottle Baby pens. Come join us for a fun-filled day.

Teachers: our Petting Barn is an educational experience. Stroll around our 15 acres of open pasture and see animals in their natural habitat. Special events can be arranged for school field trips and classroom activities. Pony rides are available Saturdays and Sundays from April through October (weather permitting). Maximum rider weight limit of 75 pounds, please.

Bring a picnic lunch and stay the day, or just enjoy a peaceful hour. Perfect for school or church groups, day-care centers, family outings, company picnics, and especially birthday parties. Please come and enjoy our wonderful country atmosphere and relax! We invite you to come out and visit us often. There are always new and exciting events happening at Sunny Acres ... and that's just the way we like it!

Hours

Monday - Friday: 9 am - 4 pm
Saturday - Sunday: 11am - 3 pm

Admission

Adult: $4.00
Ages 2 - 12: $2.50

Sunny Acres ☀ Tammy & Brent Nielsen ☀ 1977 Highway G ☀ Council Bluffs, IA 51503

Data Files Tut 1-6/tutorial.03/tutorial/photo1.jpg

Data Files Tut 1-6/tutorial.03/tutorial/photo2.jpg

Data Files Tut 1-6/tutorial.03/tutorial/photo3.jpg

Data Files Tut 1-6/tutorial.03/tutorial/photo4.jpg

Data Files Tut 1-6/tutorial.03/tutorial/photo5.jpg

Data Files Tut 1-6/tutorial.03/tutorial/producetxt.htm

The Farm Shop

The Sunny Acres Farm Shop aims to offer the highest quality fresh produce. You can pick your own or buy it in our shop. Set amidst acres of outstanding natural beauty on the beautiful rolling hills northeast of Council Bluffs, the Farm Shop is easily reached on Highway G, with easy access from Interstate 80.

The Farm Shop was established over 25 years ago with great success. Our products have won numerous awards at local festivals and fairs. We also cater to local supermarkets in the Council Bluffs/Omaha area. Look for our products every Saturday morning from May to October at the Council Bluffs Farmers' Market.

Hours

Monday - Friday: 9 am - 5 pm
Saturday: 9 am - 3 pm
Pick Your Own Produce is available from May 15 - October 22
The Farm Shop is open year-round

Products

Freshly baked breads and quiches
High quality meats
Cheese and other dairy products
Freshly-picked fruits and vegetables (in season)
Canned goods and preserves

Sunny Acres ☀ Tammy & Brent Nielsen ☀ 1977 Highway G ☀ Council Bluffs, IA 51503

Data Files Tut 1-6/tutorial.03/tutorial/sa_layout.css

/* New Perspectives on HTML Tutorial 3 Tutorial Case Sunny Acres Layout Styles Author: Tammy Nielsen Date: 3/1/2014 Filename: salayout.css Supporting Files: none */ /* Layout styles */ body { margin: 0px auto; padding: 0px; width: 98%; max-width: 800px; min-width: 250px; } header, footer { margin: 0px auto; } nav { width: 200px; float: left; margin-right: 10px; } section { width: 590px; float: left; } section img { float: right; margin: 15px; } address { clear: both; width: 100%; }

Data Files Tut 1-6/tutorial.03/tutorial/sa_stylestxt.css

ÿþ

Data Files Tut 1-6/tutorial.03/tutorial/salogo.png

Data Files Tut 1-6/tutorial.04/case1/arlogo.png

Data Files Tut 1-6/tutorial.04/case1/historytxt.css

/* New Perspectives on HTML and CSS Tutorial 4 Case Problem 1 History Style Sheet Author: Date: Filename: history.css Supporting Files: */

Data Files Tut 1-6/tutorial.04/case1/lincoln01.png

Data Files Tut 1-6/tutorial.04/case1/lincoln02.png

Data Files Tut 1-6/tutorial.04/case1/lincoln03.png

Data Files Tut 1-6/tutorial.04/case1/lincoln04.png

Data Files Tut 1-6/tutorial.04/case1/lincoln05.png

Data Files Tut 1-6/tutorial.04/case1/lincoln06.png

Data Files Tut 1-6/tutorial.04/case1/lincoln07.png

Data Files Tut 1-6/tutorial.04/case1/lincoln08.png

Data Files Tut 1-6/tutorial.04/case1/lincoln09.png

Data Files Tut 1-6/tutorial.04/case1/lincoln10.png

Data Files Tut 1-6/tutorial.04/case1/lincolntxt.htm

Lincoln's Second Inaugural

The Almighty has his own purposes. "Woe unto the world because of offenses! For it must needs be that offenses come; but woe to that man by whom the offense cometh." If we shall suppose that American slavery is one of those offenses which, in the providence of God, must needs come, but which, having continued through his appointed time, he now wills to remove, and that he gives to both North and South this terrible war, as the woe due to those by whom the offense came, shall we discern therein any departure from those divine attributes which the believers in a living God always ascribe to him?

Fondly do we hope — fervently do we pray — that this mighty scourge of war may speedily pass away. Yet, if God wills that it continue until all the wealth piled by the bondsman's two hundred and fifty years of unrequited toil shall be sunk, and until every drop of blood drawn by the lash shall be paid by another drawn with the sword, as was said three thousand years ago, so still it must be said, "The judgments of the Lord are true and righteous altogether."

With malice toward none; with charity for all; with firmness in the right, as God gives us to see the right, let us strive on to finish the work we are in; to bind up the nation's wounds; to care for him who shall have borne the battle, and for his widow, and his orphan — to do all which may achieve and cherish a just and lasting peace among ourselves, and with all nations.

Data Files Tut 1-6/tutorial.04/case1/modernizr-1.5.js

Data Files Tut 1-6/tutorial.04/case2/modernizr-1.5.js

Data Files Tut 1-6/tutorial.04/case2/notice.png

Data Files Tut 1-6/tutorial.04/case2/pizzatxt.css

/* New Perspectives on HTML and CSS Tutorial 4 Case Problem 2 Pizza Style Sheet Author: Date: Filename: pizza.css Supporting Files: */

Data Files Tut 1-6/tutorial.04/case2/rblogo.png

Data Files Tut 1-6/tutorial.04/case2/redballtxt.htm

At Red Ball Pizza, we want to satisfy every appetite. That's why our menu contains a variety of different items. With so many choices, everyone's favorites are available!

Red Ball Pizza is NOT a franchise, a chain, or a corporation. It is 100% locally owned and operated. Red Ball Pizza is devoted to providing the highest quality and the best service possible. Our only goal is to provide you with a great pizza … EVERY TIME!

Classic Combo

16" 1-Topping Pizza & a 2-Liter of Your Choice For Only $14.99

Expires 3/14

Pizza & Stix

16" Specialty Pizza Reg. Cheese Stix & a 2-Liter For Only $21.99

Expires 3/14

1/2 Price

Buy any 16" Specialty Pizza at Reg. Price & Get a 2nd Pizza For Half Price

Expires 3/14

Pizza & Wings

14" 2-Topping Pizza & 12 Wings For Only $15.99

Expires 3/31

$3.00 Off

Get $3.00 Off any 16" Pizza at Menu Price

Expires 3/31

Sub Dinner

1 Toasted Sub & Chips & 1 20oz Soda For Only $6.99

Expires 3/31

Pizza Pizzazz

93% of Americans eat pizza at least once a month.
Mozzarella was originally made from the milk of Indian water buffalo in the 7th century.
75 acres of cheese is eaten every day.
23 pounds of cheese is eaten every year by the average person.
The tomato was brought back to Italy by Spaniards returning from Mexico in the 16th century.
The busiest night for take-out pizza orders is Halloween.
The first pizzeria opened in 1830 in Naples, Italy and is still operating today. We've been open since 1982 and we're happy to serve you today and tomorrow!

Red Ball Pizza • 811 Beach Drive • Ormond Beach, FL 32175 • (386) 555 - 7499

Data Files Tut 1-6/tutorial.04/case2/redbar.png

Data Files Tut 1-6/tutorial.04/case2/slice.png

Data Files Tut 1-6/tutorial.04/case2/toppings.png

Data Files Tut 1-6/tutorial.04/demo/cengage.gif

Data Files Tut 1-6/tutorial.04/demo/demo.gif

Data Files Tut 1-6/tutorial.04/demo/demo_positioning.htm

New Perspectives on HTML and CSS Tutorial 4

CSS Positioning

This page demonstrates how different position styles affect layout. Select position values from the selection lists and input boxes below. The first column of input fields sets the position of the larger red box. The second column of input fields sets the position of the smaller yellow box. To reset both colored boxes to their default positions, click the reset button. The position of the paragraph with the dotted outline can't be set, but it may change in relation to the movements of the two colored boxes.

	position	left	top
outer	static absolute relative fixed inherit
inner	static absolute relative fixed inherit

Sample paragraph moves in relation to the placement of the outer and inner boxes.

Carey, P. New Perspectives on HTML and CSS, Course Technology: Boston, 2012.

Data Files Tut 1-6/tutorial.04/demo/demo2.gif

Data Files Tut 1-6/tutorial.04/demo/grid.gif

Data Files Tut 1-6/tutorial.04/demo/grid2.gif

Data Files Tut 1-6/tutorial.04/review/alisha.png

Data Files Tut 1-6/tutorial.04/review/cp_logo2.png

Data Files Tut 1-6/tutorial.04/review/modernizr-1.5.js

Data Files Tut 1-6/tutorial.04/review/racetxt.css

/* New Perspectives on HTML and CSS Tutorial 4 Review Assignment Cycle Pathology Style Sheet Author: Date: Filename: race.css Supporting Files: */

Data Files Tut 1-6/tutorial.04/review/rosetxt.htm

The Grand Junction Neonatal Intensive Care Unit offers comprehensive neonatal diagnostic and treatment facilities for critically ill newborns. We're dedicated to providing the highest quality care for all newborns, ranging from healthy neonates to sick or premature newborns requiring close observation or intensive care.

All of the neonatologists are board certified. We believe it's critical that our clinicians learn about the latest advances in neonatal intensive care to better serve the community of Grand Junction.

Rose Hill Rally

The Grand Junction Neonatal ICU is proud to sponsor this year's Rose Hill Rally. Please join us and Cycle Pathology for the Century Ride, Metric Century (62 miles), or 50K (31 miles). Rest stations and aid stations will be spaced throughout the Century and Metric Century routes.

Come to Grand Junction a day early. Visit historic downtown Grand Junction, explore the Grand Valley, ride the Colorado National Monument, or tour local wineries.
Riders begin the course between 7:00 a.m. and 9:00 a.m. for both the Metric Century and the 50K distance. Pick up your ride packet at Canyon View Park between 6:00 a.m. and 9:00 a.m.
Entry fee includes rider breakfast & hot lunch, Rose Hill Rally t-shirt, and course map.
Stay and enjoy your post-ride meal with music provided by the Dam Busters.
Teams of six or more riders will receive special t-shirts. Team entry forms must be received two weeks prior to the rally.

Ride the Century

— Alisha Smith

While riding 100 miles in a day may sound extreme, most casual cyclists can complete a century if they follow a comprehensive training routine. Your bike should be comfortable and fit you well. Consider having a tune-up before the ride, and carry a spare tire and patch kit, tools, and a pump.

If you're not a regular cyclist, start your training at least 12 weeks before your century. Hills are a great way to train for your ride, and don't forget to allow for recovery days after your longer rides.

A few days prior to the ride, you should keep hydrated and cut back on caffeine and alcohol. On the day of your century, eat a light breakfast of high-carbohydrate foods and drink lots of water. On the ride, drink water or a sports drink before you're thirsty.

A century isn't a race, so adopt a relaxed pace that you can follow for several hours. Alter your position throughout your ride, getting up off the saddle, stretching your back, and moving your hand position. The ride goes easier if you share it with a friend or two.

Above all, enjoy the ride! Most centuries are designed to go through scenic areas of the state. Peddle on and remember to watch the scenery.

Pictures from Last Year's Rose Hill Rally!

Data Files Tut 1-6/tutorial.04/review/slide01.png

Data Files Tut 1-6/tutorial.04/review/slide02.png

Data Files Tut 1-6/tutorial.04/review/slide03.png

Data Files Tut 1-6/tutorial.04/review/slide04.png

Data Files Tut 1-6/tutorial.04/review/slide05.png

Data Files Tut 1-6/tutorial.04/review/slide06.png

Data Files Tut 1-6/tutorial.04/review/slide07.png

Data Files Tut 1-6/tutorial.04/review/slide08.png

Data Files Tut 1-6/tutorial.04/tutorial/atwood.png

Data Files Tut 1-6/tutorial.04/tutorial/bike_bg.png

Data Files Tut 1-6/tutorial.04/tutorial/cp_logo.png

Data Files Tut 1-6/tutorial.04/tutorial/cp_resettxt.css

/* New Perspectives on HTML and CSS Tutorial 4 Tutorial Case Cycle Pathology Styles to Reset Style Defaults Author: Date: Filename: cp_reset.css Supporting Files: none */

Data Files Tut 1-6/tutorial.04/tutorial/cp_stylestxt.css

/* New Perspectives on HTML and CSS Tutorial 4 Tutorial Case Cycle Pathology Style Sheet Author: Date: Filename: cp_styles.css Supporting Files: atwood.png, bike_bg.png, rawlings.png */

Data Files Tut 1-6/tutorial.04/tutorial/cycletxt.htm

From the President's Desk

— Dan Atwood

Hi fellow Cycle-Paths! The riding season is well underway and I'm recovering from the Grand Mesa Century, our first event of the summer tour schedule. Thanks to the volunteers who worked the relief and refreshment stations, and congratulations to all who finished.

Our next club meeting is Tuesday, July 8th at the DoubleTree Hotel in Grand Junction. Kaylee Frieze will talk about the upcoming Gunnison Challenge tour. Be sure to stay afterward for refreshments and fun.

Riding the Rim

— Kathy Rawlings

Rim Rock Drive in Colorado National Monument has tested many of the world's strongest riders, but is still accessible to the weekend cyclist. If you decide to Tour the Moon, here are some tips to help you have a great ride:

Keep Hydrated The canyon sun can quickly sap your energy. Make sure you carry plenty of water; there are no watering holes along the Rim.
Bring Lights All bikes must be equipped with front and rear lights for safe passage through the Rim's tunnels. Cyclists must use a white light visible at least 500 feet in front and a red light visible at least 200 feet from the rear.
Ride Single File Rim Rock Drive is narrow, with sheer drop-offs to the canyon valley. Leave plenty of room for drivers to pass you and your group.

Cycling in Colorado National Monument

Upcoming Events

July 5 Rose Hill Rally

Start from Canyon View Park and choose the Century or Metric Century ride. The $35 entry fee includes breakfast, support vehicles, rest station refreshments, and a post-ride meal.

July 12 Tour the Palisades

The Wine Tour season starts with our annual tour of the Fruit & Wine Trail. Stay afterward to enjoy samples of local wine from the valley.

July 26 Gunnison Challenge

Join us for this non-competitive tour through the Black Canyon of the Gunnison. Proceeds from the event benefit the Montrose Medical Mission.

August 9 Steamboat Springs Rally

Come to the Steamboat Ski Mountain for this epic 60-mile ride across the Continental Divide. A second ride has been added for those interested in enjoying the cross-country trails within the Steamboat ski area.

August 24 Copper Triangle

The famous Copper Triangle goes up and over Freemont, Tennessee, and Vail Pass. Amply stocked aid/rest stations will be available throughout the tour.

September 7 Durango Tour

Join Cycle Pathology on the 40-, 60-, or 100-mile tour option. Proceeds benefit Crossroads Charities. This event includes sag support vehicles, food/aid stations, and a post-ride meal.

September 23 Montrose Meander

Choose from four distances: 33 miles, 50 miles, 75 miles, and a century ride through the Black Canyon. Registration is $60 for the century ride and $50 for the other tours. Proceeds benefit the Montrose Memorial Hospital and the San Juan Cancer Center. Food/aid stations and a post-ride meal will be available to all participants.

Cycle Pathology ☉ 100 Redstone Drive ☉ Grand Junction, CO 81501 ☉ (970) 555 - 8944

Data Files Tut 1-6/tutorial.04/tutorial/modernizr-1.5.js

Data Files Tut 1-6/tutorial.04/tutorial/rawlings.png

Data Files Tut 1-6/tutorial.04/tutorial/rim.png

Data Files Tut 1-6/tutorial.05/case2/bottom.jpg

Data Files Tut 1-6/tutorial.05/case2/bottomleft.jpg

Data Files Tut 1-6/tutorial.05/case2/bottomright.jpg

Data Files Tut 1-6/tutorial.05/case2/caltxt.css

/* New Perspectives on HTML and CSS Tutorial 5 Case Problem 2 CCC Calendar Table style sheet Author: Date: Filename: calendar.css Supporting Files: bottom.jpg, bottomleft.jpg, bottomright.jpg, left.jpg, right.jpg, top.jpg, tab.jpg, topleft.jpg, topright.jpg, redtab.jpg */

Data Files Tut 1-6/tutorial.05/case2/ccc.css

/* New Perspectives on HTML and CSS Tutorial 5 Case Problem 2 Chamberlain Civic Center Style Sheet Filename: ccc.css Supporting Files: bottom.jpg, bottomleft.jpg, bottomright.jpg, left.jpg tab.jpg, top.jpg, topleft.jpg, topright.jpg, right.jpg */ /* Default Styles */ * { list-style: none; margin: 0px; padding: 0px; } header, nav, section { display: block; } /* Body Styles */ body { font-family: Verdana, Geneva, sans-serif; margin: 0px auto; width: 730px; } /* Navigation Styles */ nav { margin-top: -3px; } nav ul { border-bottom: 1px solid red; height: 20px; } nav ul li { padding: 0px; float: left; margin: 0px 3px; width: 100px; line-height: 20px; height: 20px; text-align: center; background: url(tab.jpg) no-repeat top left; } nav ul li a { display: block; width: 100px; font-size: 10px; text-decoration: none; color: black; } nav ul li:hover { background: url(tabred.jpg) no-repeat top left; } /* Summary Section */ #summary { width: 700px; } #summary h1 { color: red; font-size: 24px; font-weight: normal; letter-spacing: 5px; margin: 10px; } #summary p { font-size: 12px; margin: 10px 0px 10px 10px; text-align: justify; } #summary p i { color: red; font-style: normal; } /* Coming Events Section */ #events { margin: 0px auto; } footer { width: 720px; } footer address { border-top: 1px solid red; font-size: 10px; font-style: normal; text-align: center; }

Data Files Tut 1-6/tutorial.05/case2/ccc.jpg

Data Files Tut 1-6/tutorial.05/case2/febtxt.htm

Coming in February

February will be another banner month at the Chamberlain Civic Center with a two day performance of the Tony Award winning musical, West Side Story by the Broadway Touring Company. Tickets are going fast, so order yours today.

Celebrate Valentine's Day with the Chamberlain Symphony and their special selection of classical music for lovers. The next day, exercise your mind by attending the Charles Dickens classic, The Mystery of Edwin Drood.

Jazz lovers have a lot to celebrate in February with a visit from the Jazz Masters on February 10th, and then on February 21st, enjoy the music of The Duke with an Ellington Tribute performed by the Jazz Company of Kansas City.

Pins, bottles, plates, and chairs are flying at the Chamberlain Civic Center in February. The Taiwan Acrobats return with another amazing performance. Then, on February 25th, the Madtown Jugglers get into the act with their unique blend of comedy, juggling, and madness.

Enjoy a classical brunch every Sunday in February with music provided by the Carson Quartet. Seating is limited, so please order your table in advance.

The Chamberlain Civic Center 2011 Canyon Drive Chamberlain, SD 53725 (605)555-8741

Data Files Tut 1-6/tutorial.05/case2/left.jpg

Data Files Tut 1-6/tutorial.05/case2/modernizr-1.5.js

Data Files Tut 1-6/tutorial.05/case2/right.jpg

Data Files Tut 1-6/tutorial.05/case2/tab.jpg

Data Files Tut 1-6/tutorial.05/case2/tabred.jpg

Data Files Tut 1-6/tutorial.05/case2/top.jpg

Data Files Tut 1-6/tutorial.05/case2/topleft.jpg

Data Files Tut 1-6/tutorial.05/case2/topright.jpg

Data Files Tut 1-6/tutorial.05/review/kpaf.jpg

Data Files Tut 1-6/tutorial.05/review/kpaf2.css

/* New Perspectives on HTML and CSS Tutorial 5 Review Assignment KPAF General Style Sheet Filename: kpaf2.css Supporting Files: none */ /* Default styles */ * { margin: 0px; list-style: none; } header, section, footer, nav { display: block; } /* Body styles */ body { background-color: white; font-family: Verdana, Geneva, sans-serif; margin: 0px auto; width: 1000px; } /* Header styles */ header { background-color: rgb(215, 205, 151); border-bottom: 1px solid rgb(105, 177, 60); color: white; } header h1 { color: white; background-color: rgb(105, 177, 60); font-size: 1.1em; padding: 5px 0px 5px 12px; } header h1 em { font-size: 0.7em; } /* Navigation list styles */ header nav ul li { display: inline; font-size: 0.7em; font-family: 'Courier New', monospace; background-color: rgb(215, 205, 151); padding: 0px 10px; margin: 0px; } header nav ul li a { text-decoration: none; color: rgb(105, 177, 60); } header nav ul li a:hover { color: rgb(153, 0, 153); } /* intro section styles */ #intro { width: 100%; } #intro hgroup h2 { color: white; background-color: rgb(153, 0, 153); font-size: 1.1em; letter-spacing: 5px; padding: 5px 0px 5px 12px; } #intro p { line-height: 1.4em; margin: 15px; } /* Footer styles */ footer { clear: left; padding-top: 10px; } footer address { font-size: 0.65em; font-style: normal; text-align: center; color: white; background-color: rgb(105, 177, 60); margin: 20px 0px; }

Data Files Tut 1-6/tutorial.05/review/modernizr-1.5.js

Data Files Tut 1-6/tutorial.05/review/morningtxt.htm

| Listener supported since 1966

KPAF Morning Schedule

KPAF airs listener-supported public radio in Bismarck, North Dakota from 5:00 a.m. to 10:30 p.m. You can Listen Live to streaming audio of our broadcast or download programs from our Podcast. Please refer below for our current morning schedule.

KPAF · 4300 Magnolia Lane · Bismarck, ND 58504 · (701) 555 - 5611

Data Files Tut 1-6/tutorial.05/review/programstxt.css

/* New Perspectives on HTML and CSS Tutorial 5 Review Assignment Programming Table Style Sheet Author: Date: Filename: programs.css Supporting Files: */

Data Files Tut 1-6/tutorial.05/tutorial/kpaf.jpg

Data Files Tut 1-6/tutorial.05/tutorial/kpaftxt.css

/* New Perspectives on HTML and CSS Tutorial 5 Tutorial Case General Style Sheet Author: Date: Filename: kpaf.css Supporting Files: */ /* Default styles */ * { margin: 0px; list-style: none; } header, section, footer, nav { display: block; } /* Body styles */ body { background-color: white; font-family: Verdana, Geneva, sans-serif; margin: 0px auto; width: 1000px; } /* Header styles */ header { background-color: rgb(215, 205, 151); border-bottom: 1px solid rgb(105, 177, 60); color: white; } header h1 { color: white; background-color: rgb(105, 177, 60); font-size: 1.1em; padding: 5px 0px 5px 12px; } header h1 em { font-size: 0.7em; } /* Navigation list styles */ header nav ul li { display: inline; font-size: 0.7em; font-family: 'Courier New', monospace; background-color: rgb(215, 205, 151); padding: 0px 10px; margin: 0px; } header nav ul li a { text-decoration: none; color: rgb(105, 177, 60); } header nav ul li a:hover { color: rgb(153, 0, 153); } /* Main section styles */ #main { float: left; width: 730px; } #main hgroup h2 { color: white; background-color: rgb(153, 0, 153); font-size: 1.1em; letter-spacing: 5px; padding: 5px 0px 5px 12px; } #main p { line-height: 1.4em; margin: 15px; } /* Aside styles */ aside { border: 1px solid rgb(153, 0, 153); -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; float: left; margin: 10px 0px 10px 15px; width: 250px; } aside#current { background-color: rgb(218, 210, 218); } aside#current p { border-left: 4px solid rgb(153,0,153); font-size: 0.9em; } aside h1 { background-color: rgb(153,0,153); -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; color: white; font-size: 0.9em; text-align: center; margin: 10px; } aside h2 { color: black; text-align: left; font-size: 0.9em; line-height: 0.95; margin: 15px; } aside p { border-left: 4px solid rgb(255,202,255); font-size: 0.7em; padding: 0px 0px 0px 5px; margin: 10px 25px; } aside p:last-of-type { margin-bottom: 15px; } /* Footer styles */ footer { clear: left; padding-top: 10px; } footer address { font-size: 0.65em; font-style: normal; text-align: center; color: white; background-color: rgb(105, 177, 60); margin: 20px 0px; }

Data Files Tut 1-6/tutorial.05/tutorial/modernizr-1.5.js

Data Files Tut 1-6/tutorial.05/tutorial/schedtxt.htm

| Listener supported since 1966

KPAF Nightly Schedule

KPAF airs listener-supported public radio in Bismarck, North Dakota from 5:00 a.m. to 10:30 p.m. You can Listen Live to streaming audio of our broadcast. Please refer below for our current nightly schedule.

On the Air Now

Folk Fest

Featuring the best of traditional and contemporary folk music

Coming Up on KPAF

April 11-14 The Classical Music Connection

Peter Thiesen shares his eclectic selection from the world of classical music

April 11 Opera Fest

Excerpts from Turandot by Giacomo Puccini

April 12 Radio U

Novelist Karen Graves reads from her latest work, Hellion of Troy

April 13 Science Week

Prof. Thomas Glass from UND discusses String Theory and Spooky Action at a Distance

April 14 The Living World

A panel discussion on the Return of the Electric Car and the latest in eco-news

KPAF · 4300 Magnolia Lane · Bismarck, ND 58504 · (701) 555 - 5611

Data Files Tut 1-6/tutorial.05/tutorial/tablestxt.css

/* New Perspectives on HTML and CSS Tutorial 5 Tutorial Case Tables Style Sheet Author: Date: Filename: tables.css Supporting Files: */

Data Files Tut 1-6/tutorial.06/case2/diners.png

Data Files Tut 1-6/tutorial.06/case2/discover.png

Data Files Tut 1-6/tutorial.06/case2/formsubmit.js

/* New Perspectives on HTML and CSS Tutorial 6 Case 2 Filename: formsubmit.js Purpose: The purpose of this program is to simply report on a successful completition of a valid Web form. When the form is submitted, the onsubmit event handler verifies that the form data is complete and valid. An alert box is displayed notifying the user. The event function returns a value of false so that the student does not have to continually retype test values in the survey form. */ window.onload = setForm; function setForm() { document.forms[0].onsubmit = function() { if (this.checkValidity()) alert("No invalid data detected. Will retain data for further testing."); return false; } }

Data Files Tut 1-6/tutorial.06/case2/go.png

Data Files Tut 1-6/tutorial.06/case2/master.png

Data Files Tut 1-6/tutorial.06/case2/modernizr-1.5.js

Data Files Tut 1-6/tutorial.06/case2/paytxt.css

/* New Perspectives on HTML and CSS Tutorial 6 Case Problem 2 The Spice Bowl Payment Form Style Sheet Author: Rita Sato Date: 3/1/2014 Filename: payment.css Supporting Files: go.png, stop.png */

Data Files Tut 1-6/tutorial.06/case2/regex.txt

Postal Code Regular Expression ^\d{5}(\-\d{4})?$ Phone Number Regular Expression ^\d{10}$|^($\d{3}$\s*)?\d{3}[\s-]?\d{4}$ Credit Card Number Regular Expression ^(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|6(?:011|5[0-9][0-9])[0-9]{12}|3[47][0-9]{13}|3(?:0[0-5]|[68][0-9])[0-9]{11}|(?:2131|1800|35\d{3})\d{11})$

Data Files Tut 1-6/tutorial.06/case2/sb.css

/* New Perspectives on HTML and CSS Tutorial 6 Case Problem 2 Spice Bowl Sheet Author: Rita Sato Date: 3/1/2014 Filename: sb.css Supporting Files: */ /* Display HTML5 structural elements as blocks */ article, aside, figure, figcaption, footer, hgroup, header, section, nav { display: block; } /* Set the default page element styles */ * {margin: 0px; padding: 0px; line-height: 1.2em; color: black; font-family: 'Trebuchet MS', Arial, Verdana, sans-serif} body {background: white url(sbback.png) repeat-y} header {position: absolute; top: 0px; left: 0px} header img {border-width: 0px} nav {position: absolute; top: 80px; left: 10px; list-style-type: none} nav li {line-height: 0.9em} nav a {font-size: 12px; color: rgb(245, 170, 34); text-decoration: none} nav a:hover {color: white} li.newgroup {margin-top: 10px} section {position: absolute; top: 90px; left: 175px; width: 580px; padding: 10px 10px 0px 0px; border-top: 1px solid rgb(205, 61, 0); border-right: 3px solid rgb(205, 61, 0); border-radius: 40px;} section h1 { color: rgb(175, 72, 28); font-family: 'Century Gothic', sans-serif; font-size: 1.8em; letter-spacing: 5px; text-indent: 30px; } section p {font-size: 14px; margin-bottom: 10px} address {font-style: normal; text-decoration: small-caps; color: rgb(205, 61, 0); font-size: 10px; text-align: center; letter-spacing: 3px; border-top: 1px solid rgb(205, 61, 0); clear: right; padding: 5px 0px 20px; margin-top: 20px} aside {position: absolute; top: 96px; left: 800px; width: 180px} aside h1 {font-size: 18px; font-weight: normal; color: rgb(205, 61, 0); margin-bottom: 20px} aside h2 {font-size: 16px; font-weight: normal; color: rgb(255, 111, 50); margin-bottom: 10px} aside ul {list-style-type: none; margin: 0px 0px 5px 10px; border-top: 1px solid rgb(255, 141, 70); border-bottom: 1px solid rgb(255, 141, 70)} aside ul li {font-size: 12px; color: rgb(255, 141, 70)} aside p {font-size: 11px; margin: 5px 0px 30px; color: rgb(255, 141, 70)}

Data Files Tut 1-6/tutorial.06/case2/sbback.png

Data Files Tut 1-6/tutorial.06/case2/sblogo.png

Data Files Tut 1-6/tutorial.06/case2/spicetxt.htm

Payment Form

The Spice Bowl · 871 Park St. · East Point, GA 30344 · (404) 555- 8711

The Spice Bowl Recommends

Salt-Roasted Pecans

2 cups pecans
3 Tbs. butter, melted
1 1/4 tsp. fine sea salt

Preheat oven to 325°. Toss pecans and butter together; add salt and toss again. Spread in a single layer on a baking sheet. Bake about 15 minutes. Cook on baking sheet.

Dried Beef Sticks

5 lbs. ground chuck
5 Tbs. quick salt
3 tsp. mustard seed
2 tsp. granulated garlic
2 tsp. cracked pepper
1 Tbs. hickory smoked salt
1 Tbs. liquid smoke

Mix beef and season. Place in a large covered container for three days; make sure beef is thoroughly mixed each day. On third day, shape beef into sticks, and bake at 150° for 8 hours (turn half-way through).

Data Files Tut 1-6/tutorial.06/case2/state.txt

AL AK AZ AR CA CO CT DE FL GA HI ID IL IN IA KS KY LA ME MD MA MI MN MS MO MT NE NV NH NJ NM NY NC ND OH OK OR PA RI SC SD TN TX UT VT VA WA WV WI WY

Data Files Tut 1-6/tutorial.06/case2/stop.png

Data Files Tut 1-6/tutorial.06/case2/visa.png

Data Files Tut 1-6/tutorial.06/review/delivery.png

Data Files Tut 1-6/tutorial.06/review/formsubmit.js

/* New Perspectives on HTML and CSS Tutorial 6 Review Assignment Filename: formsubmit.js Purpose: The purpose of this program is to simply report on a successful completition of a valid Web form. When the form is submitted, the onsubmit event handler verifies that the form data is complete and valid. An alert box is displayed notifying the user. The event function returns a value of false so that the student does not have to continually retype test values in the survey form. */ window.onload = setForm; function setForm() { document.forms[0].onsubmit = function() { if (this.checkValidity()) alert("No invalid data detected. Will retain data for further testing."); return false; } }

Data Files Tut 1-6/tutorial.06/review/full.png

Data Files Tut 1-6/tutorial.06/review/left.png

Data Files Tut 1-6/tutorial.06/review/modernizr-1.5.js

Data Files Tut 1-6/tutorial.06/review/none.png

Data Files Tut 1-6/tutorial.06/review/okay.png

Data Files Tut 1-6/tutorial.06/review/ordertxt.htm

Online Ordering

Thank you for using our online ordering form for quick and easy orders, delivered free, fast, and hot to your door. If you need to talk to us directly, call Red Ball Pizza at (386) 555 - 7499.

Required values are marked by an asterisk (*)

Red Ball Pizza • 811 Beach Drive • Ormond Beach, FL 32175 • (386) 555 - 7499

Data Files Tut 1-6/tutorial.06/review/pizzatxt.css

/* New Perspectives on HTML and CSS Tutorial 6 Review Assignment Pizza Order Style Sheet Author: Date: Filename: pizza.css Supporting Files: delivery.png, okay.png, warning.png */

Data Files Tut 1-6/tutorial.06/review/redball.css

/* New Perspectives on HTML and CSS Tutorial 6 Review Assignment Red Ball Pizza Style Sheet Author: Alice Nichols Date: 3/1/2014 Filename: redball.css Supporting Files: delivery.png */ /* Display HTML5 structural elements as blocks */ article, aside, figure, figcaption, footer, hgroup, header, section, nav { display: block; } /* Set the default page element styles */ body * { font-family: Verdana, Geneva, sans-serif; font-size: 100%; font-weight: inherit; line-height: 1.2em; list-style: none; margin: 0px; padding: 0px; text-decoration: none; vertical-align: baseline; } /* Body Styles */ body { width: 95%; min-width: 900px; max-width: 1000px; font-family: Verdana, Geneva, sans-serif; font-weight: normal; font-size: 16px; margin: 0px auto; position: relative; border-left: 1px solid red; border-right: 1px solid red; } /* Header styles */ header { float: left; width: 100%; background: url(delivery.png) bottom right no-repeat; -o-background-size: contain; -moz-background-size: contain; -webkit-background-size: contain; background-size: auto 90%; background-color: rgb(255, 191, 165); border-bottom: 1px solid red; } header img { display: block; float: left; width: 30%; } /*Navigation list styles */ header nav { float: left; width: 77%; margin: 10px auto 10px -7%; } header nav li { display: block; width: 13%; margin-left: 1%; margin-bottom: 5px; float: left; } header nav li a { display: block; width: 100%; height: 50px; line-height: 50px; text-align: center; color: white; font-size: 0.8em; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; background-color: rgb(233, 69, 0); } header nav li a:hover { background-color: rgb(235, 152, 66); } header article { float: left; width: 68%; } header h1 { font-size: 2.5em; font-family: "Times New Roman", serif; font-weight: bold; color: rgb(233, 69, 0); letter-spacing: 7px; margin-right: 20%; } header p { font-size: 1.2em; color: rgb(233, 69, 0); margin: 10px 25% 10px 10px; } /* Section styles */ section { clear: left; } section p { color: rgb(233, 69, 0); margin-left: 20px; margin-bottom: 5px; padding-top: 5px; width: 100%; } /* Footer Styles */ footer { border-top: 1px solid red; background-color: rgb(255, 191, 165); clear: left; margin-top: 20px; padding: 10px 0px; } footer address { color: rgb(233, 69, 0); font-style: normal; font-size: 0.8em; text-align: center; }

Data Files Tut 1-6/tutorial.06/review/redball.png

Data Files Tut 1-6/tutorial.06/review/regex.txt

Phone Number Regular Expression ^\d{10}$|^($\d{3}$\s*)?\d{3}[\s-]?\d{4}$ Delivery Time Regular Expression ^([0-9]|1[012]):[0-5][0-9]\s?((a|p)m|(A|P)M)$

Data Files Tut 1-6/tutorial.06/review/right.png

Data Files Tut 1-6/tutorial.06/review/sizes.png

Data Files Tut 1-6/tutorial.06/review/warning.png

Data Files Tut 1-6/tutorial.06/tutorial/customer.png

Data Files Tut 1-6/tutorial.06/tutorial/formstxt.css

/* New Perspectives on HTML and CSS Tutorial 6 Tutorial Case Survey Forms Style Sheet Author: Date: Filename: forms.css Supporting Files: customer.png, go.png, stop.png */

Data Files Tut 1-6/tutorial.06/tutorial/formsubmit.js

/* New Perspectives on HTML and CSS Tutorial 6 Tutorial Case Filename: formsubmit.js Purpose: The purpose of this program is to simply report on a successful completition of a valid Web form. When the form is submitted, the onsubmit event handler verifies that the form data is complete and valid. An alert box is displayed notifying the user. The event function returns a value of false so that the student does not have to continually retype test values in the survey form. */ window.onload = setForm; function setForm() { document.forms[0].onsubmit = function() { if (this.checkValidity()) alert("No invalid data detected. Will retain data for further testing."); return false; } }

Data Files Tut 1-6/tutorial.06/tutorial/go.png

Data Files Tut 1-6/tutorial.06/tutorial/modernizr-1.5.js

Data Files Tut 1-6/tutorial.06/tutorial/rb.css

/* New Perspectives on HTML and CSS Tutorial 6 Tutorial Case Red Ball Pizza Style Sheet Author: Alice Nichols Date: 3/1/2014 Filename: rb.css Supporting Files: customer.png */ /* Display HTML5 structural elements as blocks */ article, aside, figure, figcaption, footer, hgroup, header, section, nav { display: block; } /* Set the default page element styles */ body * { font-family: Verdana, Geneva, sans-serif; font-size: 100%; font-weight: inherit; line-height: 1.2em; list-style: none; margin: 0px; padding: 0px; text-decoration: none; vertical-align: baseline; } /* Body Styles */ body { width: 95%; min-width: 900px; max-width: 1000px; font-family: Verdana, Geneva, sans-serif; font-weight: normal; font-size: 16px; margin: 0px auto; position: relative; border-left: 1px solid red; border-right: 1px solid red; } /* Header styles */ header { float: left; width: 100%; background: url(customer.png) bottom right no-repeat; -o-background-size: contain; -moz-background-size: contain; -webkit-background-size: contain; background-size: contain; background-color: rgb(255, 191, 165); border-bottom: 1px solid red; } header img { display: block; float: left; width: 30%; } /*Navigation list styles */ header nav { float: left; width: 77%; margin: 10px auto 10px -7%; } header nav li { display: block; width: 13%; margin-left: 1%; margin-bottom: 5px; float: left; } header nav li a { display: block; width: 100%; height: 50px; line-height: 50px; text-align: center; color: white; font-size: 0.8em; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; background-color: rgb(233, 69, 0); } header nav li a:hover { background-color: rgb(235, 152, 66); } header article { float: left; width: 70%; } header h1 { font-size: 2.5em; font-family: "Times New Roman", serif; font-weight: bold; color: rgb(233, 69, 0); letter-spacing: 7px; margin-right: 20%; } header p { font-size: 0.9em; color: rgb(233, 69, 0); margin: 10px 25% 10px 10px; } /* Section styles */ section { clear: left; width: 100%; } section p { color: rgb(233, 69, 0); margin-left: 20px; padding-top: 20px; } /* Footer Styles */ footer { border-top: 1px solid red; background-color: rgb(255, 191, 165); clear: left; margin-top: 20px; padding: 10px 0px; } footer address { color: rgb(233, 69, 0); font-style: normal; font-size: 0.8em; text-align: center; }

Data Files Tut 1-6/tutorial.06/tutorial/redball.png

Data Files Tut 1-6/tutorial.06/tutorial/regex.txt

Postal Code Regular Expression ^\d{5}(\-\d{4})?$ Phone Number Regular Expression ^\d{10}$|^($\d{3}$\s*)?\d{3}[\s-]?\d{4}$ Red Ball Pizza Regular Expression ^re\-\d{6}$

Data Files Tut 1-6/tutorial.06/tutorial/stop.png

Data Files Tut 1-6/tutorial.06/tutorial/surveytxt.htm

Customer Survey

Thank you for taking our customer survey. Your response helps Red Ball Pizza maintain the tradition that has made us the top-rated pizzeria in the metro area.

All participants are automatically entered into a monthly drawing to receive a Red Ball Express PizzaFest containing two large pizzas, a 2-liter soda, and a side order of chicken wings. Check your e-mail inbox for contest results.

Surveys are private and confidential. Red Ball Pizza will not share your contact information with third parties, ever.

Required values are marked by an asterisk (*)

Red Ball Pizza • 811 Beach Drive • Ormond Beach, FL 32175 • (386) 555 - 7499