CS 101 Web Construction, Winter
2014, Instructor: Jeffrey
Horn GUIDE TO THE FINAL EXAM
GENERAL
-
SCOPE:
The final exam for CS 101 is
comprehensive.
-
TIME:
I try to design so that it is easily completed within one hour,
leaving students with plenty of time (total time allocated for NMU final
exams is 1 hour and 50 minutes) to go over the test, double-checking,
etc.
-
OPEN BOOK: The
final, like all of our assessments, is open book, open notes, open use of
computers, but you must do your own work! (Don't be tempted to
use your laptop to communicate with others (other humans, that is!). Help from anyone but
the instructor is forbidden and must be punished (pretty darn harshly) if
detected.
-
COMPUTER USE: A laptop
is not absolutely required to complete this test (which for reasons of
reliability will be pencil-and-paper. But it is a good idea to have
a laptop with you. You will be allowed to use it to look things up
and try things out (e.g., by typing in a bit of html, css, or Javascript).
But once again, you must do your own work, so don't be tempted to use your
laptop to communicate with others (other humans, that is!).
-
FORMAT: Mostly
multiple choice and fill-in-the-blank. Maybe a few short answer (one or
two sentences) questions. Very much like
our quiz questions!
TOPICS
(not necessarily complete, but I tried!)
- BASIC HTML
- The basic parts of a web page, including head and body, style
sheets, and comments.
- Proper nesting of tags.
- No visual content in head, only in body.
- Proper syntax for attributes (e.g., do not forget the closing angle
bracket ">"!)
- Text formatting (bold, italics, quote, etc.)
- MORE HTML
- Inserting local and remote images.
- Hyperlinks to local and remote web pages.
- Making images become hyperlinks.
- BASIC CSS
- Inline css via the style attribute (e.g., <p style="text-align: center;">
- Embedded css via the <style> element
- Linking in an external css file (e.g., using the <link> element)
- Basic css syntax: selector {property: value;
property: value; }, for example h1 {color: #450970}/
- Using hex numbers for RGB color specification, including the "#"
character!
- ADVANCED CSS (from Ch. )
- CSS classes and IDs
- Specifically using the "class" and "id" attributes in the HTML
elements
- And using the "." and "#" type selectors in the embedded CSS code to
refer to HTML elements
- FORMS
- What the action attribute specifies.
- How the submit button triggers the action.
- How to NAME datafields in the form so that their values are sent when
the submit button is clicked.
- How the serverside script generates an html web page dynamically, and
sends it back to the browser.
- How the server can do other things with the data that it is sent.
- Form elements such as <input> (including the different types
such as "text", "hidden", "password", "button", "reset", "checkbox",
"radio", etc.), select, button, textarea,
- BASIC JAVASCRIPT
- How to add javascript to a web page via the "onclick" attribute of a
button, image, image map, etc. When will this code run?
This code will only run when the user actually clicks on the html
element that has this javascript as its "onclick" attribute!
- How to add javascript to a web page via the "<script>" element (in the
<head>). When will this code run? This code will
only be run once, when the page is first loaded.
- Javascript syntax (semi-colons at the end of each statement,
case-sensitivity, comment syntax, which is "//" for commenting out to the
end of the current line, and"/*" with "*/" to comment out any size section
of text, including multiple lines; the "/* */" comment delimiter is also
used in css but the "//" is not!).
- OTHER TOPICS:
- Accessibility: use of "alt" attribute for images, to describe
image in words.
- Know how to use the browser's "view source" to get at web page's source
code".
- Server-side vs. client-side scripts (what are the differences?)
- Server operation: e.g., what gets served up out of the pub
folder (answer: everything!)
HTML
ELEMENTS you should know
(not necessarily complete!)
Document Structure: <html><head><title><body><!--
comment -->
Text Spacing and Formatting: <i><b><sub><sup><big><small><strong><cite><hr
/><br /><quote>
Text Headings:
<h1><h2><h3><h4><h5><h6>
Grouping Text: <p><dif> <span>
Lists: <ul><ol><li>
Tables: <table><tr><td><th><caption>
Forms and Programming:
<form><input type="text"><input
type="radio"><input type="checkbox"><input
type="submit"><textarea><select><script>
Others: <img><a><style>
CSS PROPERTIES you should
be aware of (not necessarily complete!)
You should feel comfortable with any of the properties on
this handout. By that I do not
mean that you are expected to memorize them or know all of the different
"value"s for them; just be able to have some idea what
each does, if you come across them in some code, and be able to look them up if
you need to use them yourself, ever. I am more interested in whether or
not you understand the css syntax used. If you do, then I am sure
that you could look up the properties and values and learn them on your own!
JAVASCRIPT COMMANDS you should know
(not necessarily complete!)
| Javascript Command |
Example |
| alert |
alert("Your age is below the minimum!"); |
| if-then-else |
if( age < 0)
{ alert("You are too young to enter."); }
else { alert("You may enter");
}
|
| var |
var x; |
| assignment |
x = 1; |
| incrementing a variable |
x=x+1; or
x++; |
| assignment to part of a form |
document.getElementById("totalPayment").value = cost_of_items + shipping
+ tax; |
| changing any attribute in a web page |
document.getElementById("aardvark").width =
// This assumes that the <img> element has id="aardvark".
document.getElementById("aardvark").width + 10;
document.getElementById("barnyardAnimal").src = "horse.gif";
// This assumes that the <img> element has id="barnyardAnimal". |
| comment |
// Use double slashes for short,
one line comments
/* This is the syntax for comments that span
more than one line. You can use whole paragraphs for comments,
just by putting the slash-star and star-slash delimiters around the
whole thing! */ |
CS 101 Fall 2008 Final Exam Guide