Review HTML basics using whatever text/tutorial works best for you, such as
A page is structured text, marked by HTML tags. For example:
<p> ... <em>...</em> ... <a href="http://example.com">...</a> ... </p> <ul> <li>...</li> <li>...</li> <li>...</li> </ul>
Some common, useful tags:
Elements in a page (the tags, effectively) can generate events, which are used to invoke Javascript code.
Some useful events are:
Example use:
<img src="foo.jpg" onmouseover="alert('hey!');">
Every HTML tag can have an id (which should be unique).
This can be used to access the element from Javascript.
e.g. to get information about the element, or to change its attributes.
Use document.getElementById(id) to find an element.
innerHTML is a special attribute that can be used to read or change the text (including HTML markup) within an element.
<p id="paragraph">lorem ipsum</p>
<button onclick="var x = document.getElementById('paragraph'); x.innerHTML='hello, world';">
change</button>
lorem ipsum
Working in pairs: make a dynamic web page, with multiple elements that respond to the user.
If you have your own idea of something you'd like to do, go for it.
Otherwise, here's a suggestion:
Create a political debate between two characters. Have two pictures of the characters, plus text under each for what they say. Also have one button for each; when the button is hit, generate new text for that person.
Optionally: change the image size when a person "speaks"; use a table (or css) to lay out the pictures side-by-side; write just one function that can be used by both buttons; anything else interesting.
At the end of class, please e-mail your results (the html page) to depape@buffalo.edu.
Make sure to include both your names in the comments.
