DATT 1939 Week 3 - Minimum Code/Techniques to Practice Before Week 4

Practice more than the content in grey on this page before your week 4 tutorial:

Catch up on Minimum Techniques for Week 1 (Quick Reference Notes and PhotoShop) and Week 2 if needed. 
(Everything in grey on the above pages, plus some additional content below the grey section, is the minimum.)

If you haven't already, use the Basics of Internal CSS, to start to learn how colour and control to your pages 
using a small internal Cascading Style Sheet (CSS) added in the head tag of the web page, like so:

   <style>
    body {
           background-color: #ffffff;
           font-family: Verdana, Helvetica, Arial;
           font-size: medium;
           color: #000000;
        }
   </style>


   Look up the Webmonkey RGB Colour Code chart so that you can find colours you like, and get the 
   hexadecimal code for a colour (like #ffffff, for example).

   Learn how to Set Link Colours with CSS.
   Learn the basic way to load a Simple Background Image using CSS.
   Make sure you recognize CSS comments and their basic usefulness.


Work from the proper DOCTYPE tag and HTML5 page structure with CSS for HTML5. 
Start your new HTML pages using the above code!


Try a few CSS selectors from the week 3 notes 
(tag, class, id, and the various link selectors are the most important for our purposes).


Read about Static vs Relative vs Absolute vs Fixed Positioning in the week 3 notes.


Set the width, height, and position of divs using CSS:
CSS Placement and Scrolling Effects 1 - Building on the Static vs Relative vs Absolute vs Fixed Positioning notes above:   
	
   Div Positioning - Basic Options - How to place things on your page anywhere! Unusual scrolling possible.
   (Includes comments on page flow, div width and height, div background colours.) 
   
   #uniqueidname     /* selects the div you have given this id name to */
     {
   	position: fixed;  /* fixed does not scroll with the page, not in flow */
   	top: 300px;
   	left: 500px;
   	width: 400px;
   	height: 200px;      /* setting div height sometimes desirable, test it */
   	background-color: #33ff33;     /* setting background colour of div shows its box/rect shape */ 
     }
   
    Basic div positioning example: Code Based on these notes - look at the source in an HTML editor to see what was done.
 

Some More Code/Techniques To Try This Week

   
Test how to basically control the direction of background image tiling/repeating using CSS, and how to prevent tiling/repeating at all.
   Try out a little positioning of a page background images using CSS.
   Try setting the background colour (background-color) and then a background image of a div using CSS. 
   
Background Image Positioning Example
Combines settings for positioned divs with fixed background image setting (background-attachment: fixed;) for the page. Background Images In Divs: These examples combine settings for positioned divs with background image settings in the divs themselves. - Code displayed with comments on page - Code commented in the CSS in the head (To see the above page's HTML/CSS in Firefox: if the page is loaded, press command + u) Use Image alignment with Text to Learn how to align the <img> tag with surrounding text using CSS Try More Simple CSS to try different kinds of text alignment and spacing setting with CSS An example: Extreme Word/Line Spacing and Justification Learn more useful Mac shortcuts you don't already know: Some Shortcut Keys for Mac OS X If you haven't already, use <a id="targetname"> </a> and learn how to link to a point part-way down the same page, or part-way down another html page (when pages are saved in the same place/folder, etc.) Have an idea of what blocklevel versus inline tags are. Try a few a syntax checks in BBEdit, or using an online checker, and correct any syntax errors that come up, and check again.
Finally, try other tags, CSS rules, links, information from any week 3 notes not listed above.

If you want more, feel free to work ahead into the Week 4 notes, or
look up online HTML5 resources, CSS resources (ideally, CSS3), and/or ask your tutorial leader for pointers...