Links

Here's some handy links for good html/css web sites, although if you google them you will find many, many on the web. It's almost as if the web were built with these tools. Hey, it is!


• w3schools css page -- the main css info on the w3schools site.
  
  
• w3schools html5 page -- the main html5 info on the w3schools site
  
  
• html5 'cheat sheet' -- handy listing of html5 tags
  
  
  These are more specific w3schools links for various html5 interactions:
  
  
• <input> types -- the different basic types for the <input> tage
  
  
• more in-depth <input> types -- even more!
  
  
• event attributes -- mouse events and a basic listing of different events. Jeez, this stuff is all over the place!
  
  
• event object (DOM) documentation -- event object stuff, data and information from the event recording app on your local machine. Very useful.
  
  
• event types tutorial -- I think.
  
  
• color names -- handy reference (thanks, Mary!)

Class Downloads

• week9-html-files.zip -- all the html/javascript files we created in class (covered below).
  
  Mary wrote a pretty good set of notes for her lecture. I've included part of them here:
  
  Mary's css/html notes
  
  for you to access.
  
  Here are the html files shown in class:
  
  
  • input-css-demo1.html -- basic mouse/button interaction (with lots of good comments by Mary!)
  • input-css-demo2.html -- display a css-created 'div' area with mouse in/out functions
  • input-css-demo3.html -- add a second css-created 'div' area showing mouse coordinates and keyboard input. Note that the two different coordinates ("cientX/Y" and "pageX/Y") measure differently -- the y-coordinate will change depending on if the page is scrolled or not
  • input-css-demo4.html -- add a third css-created 'div' area with 'draggability'
  • input-css-demo5.html -- more <input ...> types (like the "button" we started with) [scroll down on the page to see them all]
  • input-css-demo6.html -- change the font using css
  • input-css-demo6.html -- change the font using css
  • input-css-demo7.html -- change the font and the button using css
  
  use your "view source" browser capability to see the code of these examples, or check them in the downloadable archive above