Java: Unit 0 goals

Unit 0 is about HTML and CSS.

By the end of Unit 0, the student should be able to

HTML

knosstructure of a webpage (write out the structure, identify when there are errors in it)
state two examples of things that go in the HEAD section.
Identify TAG, ATTRIBUTE, VALUE
Know how to write closing tags
List 3 tags that do not have closing tags
Insert images. Resize them if need be and also add a border
Change the colour and size of font. Also the font face
Make a numbered list and a bulleted list
- Make one list inside another
- Like this!
Be able to identify and use the following tags:
<html> <head> <title> <body> <h1> <h2> <p> <br> <b> <i> <hr> <pre> <code> <a> <img>
Tables: <table> <caption> <tr> <th> <td>
Lists: <ul> <ol> <li>
Create tables
- use <th> in the first row of a table
- set rowpsan and colspan appropriately
- change the background colour of table cells and rows
make links to other local webpages as well as to ones online
know how to use the <body> tag to change overall background colour, text colour and link colour.
Use escape codes to print > , < and extra spaces (non-breaking space).
Write comments in HTML
Know how to make text subscripted and superscripted.
Look up information on new tags and attributes online (e.g how to use the <METER> tag, find the tag for strikethrough)

CSS

state 3 reasons for using CSS
distinguish between HTML tags that are block formatting vs inline formatting
link a CSS page to an HTML page (<link> tag)
use the <style> tag to put css in the <head> section
apply css formatting to a tag in an HTML document using the style attribute (<ol style="list-style-type: upper-roman;"> )
create CSS formatting for HTML tags (p { font-weight:bold;})
create CSS formatting for class and id selectors
apply class (and id) formatting to html tags (<img class="mainImage">)
state reasons for using ID instead of class
use span and div correctly
be able to write major colours in hexadecimal notation
estimate what a colour would be given a hex code.
use the following CSS selector combinations:

A, B {} (formatting applies to both A and B)
A B {} (formatting only applies to B elements inside A)
tag.class {} (this class will only apply to that tag. eg. h1.primary{...} only applies to <h1 class="primary">)

use the box model to create borders and apply padding and margins when needed
explain the difference between padding and margins
know the meaning of the numbers used for border, padding and marging:
when there are 1,2, or 4 numbers: e.g. padding:5px; vs padding: 5px 10px; vs padding: 3px 6px 9px 12px;

explain what a given example of CSS formatting does, eg.

   .firsttext{
	border: 7px groove #B8860B;
	background:beige;
	padding: 20px;
	color:black;
	font-family:Arial;
	font-size:100%;
   }

You should also know what float left/right do, and what the various position options do. (but you won't be tested on these).