270 test 1
Test may NOT be "made up" without prior arrangements or VERIFIED EMERGENCY!
Make-up tests will be different, will be given the following morning at 6:30am and require a medical excuse.

Make a CAP!
This guide is not a "promise" of what will be on the test, but is simply an outline of topics that MAY be on the test that I provide to be helpful to you. Other topics not listed may also sneak onto a test from time to time.

Understand that a test is a SAMPLING and can not possibly cover all information from class. The idea, however, is that you must study all the information since you don't know for certain what questions will show up. This is for your benefit as it motivates you to learn more!

Internet and Web and HTML   (duckett ch 1-5)

- internet 60s (AARPA net, defense) - web early 90s (CERN) - SEO page rank 0-10 high rank -> free web traffic via google 'juice' other pages link to yours high page ranked sites are more valuable when they link to you, but are offten 'nofollow' dofollow vs nofollow links twitter and facebook links are nofollow and don't pass 'juice' - http protocol request response - DNS - web server vs client - publishing on clarion server (cisprod.clarion.edu)

HTML Fundamentals

-html -structure ("scaffolding") holds content -separate structure(html) from presentation(css) from behavior(js) - Document type <!doctype HTML> html 5 should be FIRST THING in file <!-- comment --> -html guidelines (follows xhtml transitional 1.0) lower case quoted attributes proper nesting self-closing tags -semantic tags (html 5) header footer nav -Common tags comment <!-- --> html head title meta body div p h1-h6 (big to small) br hr pre a href=""(attribute) links within pages links to other pages links to other sites img src="" (attribute) alt="" (attribute) size correctly respect ownership lists: ol ul li span - inline (block starts new line) input type="" button, text, checkbox, radio, submit type is an attribute head meta charset="UTF-8" title body blocks: p, h1-h6, div span (inline) <span class="jbw">some text to style</span> <span style="quick & dirty css">some text to style</span> valid html gives some assurance of a predictable rendering by the browser de facto rules: lower case tags, quote attributes, always use end tag if available empty tags should be self closing: <br /> (hr br img meta link) -Attributes (quote!) charset="" id="" style="" href="" class="" src="" alt="" type="" title="" (not the html tag, but attribute value displays on mouse hover) rel="" (relationship) "stylesheet" "shortcut icon" example: <link rel="stylesheet" href="../../CSS/mypage.css" />

HTML tags you should recognize

<!DOCTYPE> is not an HTML tag; it is an instruction to the web browser about what version of HTML the page is written in. MUST BE THE VERY FIRST thing in your HTML document (before comments!). <!--> <a> <b> <body> <br> <div> <em> <head> <h1> - <h6> <hr> <html> <i> <img> <li> <link> <meta> <ol> <p> <pre> <script> <span> <strong> <style> <sub> <sup> <title> <ul>


browser builds DOM on load hierarchy nodes parent, child, sibling used by JS to access elements document.getElementById uses id attribute of html elements innerHTML using DOM to change pages var o = document.getElementById("one"); o.innerHTML += "<h1>Hello</h1>"; events click onload JS inserting variables and HTML into DOM document.getElementById.innerHTML = '<p>' + i + '</p>'; -DOM manipulation allows dynamic page manipulation via JS getElementById id attribute of html elements innerHTML


formatting (style) appearance presentation -Comment /* */ -Location of CSS inline style internal style sheet external style sheet -Syntax of styles rule = selector + declaration block selector classes .class{ } id #id{ } element <tag>{ } element.class{ } :pseudoclass(property: value) a:active{ } a:hover{ } input:valid{ } input:invalid{ } declaration block = one or more property:value pair property:value; color:red; font-size:large; classes .abc{ } class="abc" can use multiple classes class="abc def ght" css often use this html hook attribute micro-class ids id="xyz" javascript often uses this html hook attribute can also be styled #xyz{ } -Common properties color background-color background-image font-size font-family font-weight text-align display "none" - not visible "" - visible z-index bigger # in front of smaller Box Model layout float MBPC or MBPW margin border padding content(width) shorthand: TRBL width is CONTENT only box-sizing:border-box; /* width includes padding & border */ height overflow shorthand (mbp) TOP RIGHT BOTTOM LEFT padding: 10px 5px 7px 12px; border: solid red 5px; margin:25px 50px 75px 100px; top is 25px right is 50px bottom is 75px left is 100px margin:25px 50px 75px; top margin is 25px right and left margins are 50px bottom margin is 75px margin:25px 50px; top and bottom margins are 25px right and left margins are 50px margin:25px; all four margins are 25px -Colors 6 digit hex RGB 2 digit pair per color 00-ff (0-255) 3 digit hex shorthand 77AACC-> 7AC names rgba decimal 0-255 (00-ff hex) a is alpha - opacity : 0-1

JavaScript Fundamentals

-Variables var numbers string boolean objects null undefined scope by function assignment math operators + - / % * relational operators: < > >= <= != == identity operators: checks value AND type === !== -Comment // /* */ -Input/ Output prompt var x = prompt("Enter", default); alert document.write innerHTML = ... input element -Branching: if if/else if/else if -Loops: while, do/while, for break, continue -Functions defining calling parameters function $( id ) { return document.getElementById( id ); } -Debugging firebug finding coding errors stepping thgrough javascript code web developer syntax errors