The first test in CS 120 will be given in class on Wednesday, September 24. It will cover everything that we have done so far, including the labs and the reading. The test covers general ideas about how the web works, HTML, CSS, and the bit of JavaScript in Lab 3. The reading includes Chapters 1-5, 8, and 10-13 from HTML & CSS. However, you are not responsible for memorizing every detail of HTML, CSS, and JavaScript. This page includes a list of things that you should know.
On the test, you should expect several types of questions. There will be some essay questions about definitions and concepts. There could be questions about the design of web sites or web pages. You will have to write some HTML code and some CSS code. You might have to write some basic JavaScript statements. For some questions, you will be given HTML, CSS, or JavaScript code and asked what it does. This can include questions about the way JavaScript is used with buttons. There will be no questions about Linux.
Here are some important terms and ideas that you should be familiar with:
Web browser
Web server
The web uses client/server (browser is the client, web server is the server)
The web uses request/response (browser sends request, server sends response)
HTML (HyperText Markup Language)
CSS (Cascading Style Sheets)
JavaScript
syntax and semantics
About HTML:
HTML is for content
tag (for example <h1>)
end tag (for example </h1>)
element
content of an element
attribute (for example, src in <img src="me.png">)
attribute name and attribute value
the basic structure of an html file
the "head" and "body" sections in html
links on a web page
URL
absolute URLs such as http://math.hws.edu/eck/index.html
relative URLs such as page1.html, images/mypic.jpg, ../index.html
block display and inline display for HTML elements
<div> and <span> and why they are used
HTML id and class attributes and how they are used
About CSS:
CSS for presentation (or style)
can be in a separate .css file, or in the HTML document
putting CSS in a separate file, and why it is done for multi-page sites
the <style> section of an html file
CSS rules
CSS selectors
CSS properties and property values
padding, border, and margin
About JavaScript:
JavaScript is for behavior (including interaction with the user)
what is a "programming language"?
variables and assignment statements
using JavaScript with a <button> to make a page interactive
You should be able to WRITE original HTML, CSS, and JavaScript using:
HTML: <h1>, <h2>, <h3>
<p>
<ul> and <li>
<br>
<hr>
<a href="...">
<img src="..." height="..." width="...">
<button onclick="...">
the attribute id="..."
the attribute class="..."
CSS properties: color (with color names, like red and black)
background-color
text-align (left, right, center)
font-size
specifying sizes with measurements (2.5cm) and percentages (150%)
CSS selectors: basic selectors ( tag names such as h1 or p )
id selectors ( such as #main or #content )
class selectors ( such as .intro or .address )
JavaScript: know how to use document.getElementById("...")
setting the style of an element
(Example: document.getElementById("foo").style.color = "red")
setting the innnerHTML of an element
(Example: document.getElementById("foo").innerHTML = "Hello")
setting the src of an image
(Example: document.getElementById("pic").src = "MyVacation.jpg")
You should memorize the basic structure of a web page:
<html>
<head>
<title>...</title>
</head>
<body>
...
</body>
</html>
In addition, you should be able to UNDERSTAND code that uses:
HTML:
<title>
<style>
<link rel="stylesheet" type="text/css" href="...">
<i> and <b>
<div>, <span>
<button onclick="...">
the attribute style="..."
CSS properties:
background-image (value looks like: url(...) )
font-style (italic, normal)
font-weight (bold, normal)
font-family (serif, sans-serif, monospace)
margin, margin-left, etc.
padding, padding-left, etc.
border, border-left, etc. (values such as thin solid black )
CSS selectors:
class selector for a specific element type: p.intro
selecting nested elements, such as: div h3
JavaScript:
Defining a function so that it can be used with a button