Week 4: Demo

HTML/CSS Exam Study Guide

• The written exam might ask questions about any/all html and css concepts we have studies. The practical exam, by its nature, will not of course cover/require every concept we have studied.
• You will need to know how to USE styles but will not have to memorize particular style properties (font-size, background-color, etc.). Both exams will have partial lists of style property names where needed.
• For the practical exam you can pretty much any text or html editor such as Visual Studio Code, Atom, Brackets, TextWrangler, Sublime Edit, Notepad, Notepad+, TextEdit, etc. You WILL of course also be allowed to have a web browser open to test your pages.

Review:

• You should be familiar with all tags and information in the Basic Tags and Form Tags resources pages.
• You should be able to use style commands inside tags (inline) AND through stylesheets.
• Review labs, assignments and lecture notes.
• Review the core Resource pages on Basic HTML Tags and Form Quicksheet.
• Review the Study Guide.

Written Exam:

• Mix of short answer, code/long answer (lines of code) and multiple choice.


• Short answer: Short blanks to fill in the names of tags, css properties, values (for a defined outcome), etc.
  
  Examples:
  
  The CSS property that sets up an animation trigger if a value is changed is _________________.
  
  The HTML tag that creates a textbox is ____________.
  
  The HTML attribute that defines the destination of a hyperlink is ___________.
  
  The HTML tag that defines a block of the page with administrative information such as stylesheets is _______________.
  
  The CSS property that defines whether an object has an underline is _______________________________.
  
  Either of the following CSS properties can be used to set the horizontal location of a position:fixed element in a page: ___________________ and __________________.


• Code/long answer: Write 1-5 lines of code to create a specific HTML tag or CSS style.
  
  Examples:
  
  In the box below write a stylesheet entry for an object IDed as "box1" that would make the object 200 pixels wide, 300 pixels tall, with a "red" background and that floats to the right.
  
  In the box below, write the HTML tag that would insert an image into the page with a file path of "dent.jpg", an alternate text entry of "Photo of Patrick Dent", classes of both "headshot" and "small", and an ID of "dentphoto".
  
  In the box below write the HTML that would create a single-line textbox with a name of "birthday", a temporary/ph text that says "enter date in yyyy-dd-mm format", initial contents of "", and a class of "medium".

Practical Exam:

• Timed environment to build a page based on a provided printout (of the final page).
• Text and media assets will be provided.
• Almost identical in structure to the "practice exam lab".

Fundamental HTML/Web Publishing Concepts:

• HTML basics: Fundamentals of how HTML tags work. Tags, attributes and attribute properties. Basic format for tags and attributes. Using HTML tags to organize text and create basic objects such as lines and images. See lectures segments on HTML basics, Basic HTML Tags, and "good code, HTML and img review" (portion of lecture).
• CSS Style Properties and Stylesheets: Almost all formatting of text and objects should be done through style properties. Basics of opening up style attribute blocks in HTML tags. Syntax of style instructions. See lecture segments on "styles" (portion of lecture), "stylesheets review" (portion of lecture), CSS Properties, CSS Part 2 and CSS3. Note: You are responsible for being able to implement/use styles but NOT expected to memorize all style property names. We also covered using stylesheets to set up clases and IDs (as well as redefine html tags) in the stylesheets and styles section of the "div's continued" lecture.
• Create layouts and using div tags: How to use "div" tags along with specific style properties such as margin, padding, float, width and height to create "boxes" that make up a page's design and layout. See lecture segments on Layout with divs and re-usable classes (from the forms lecture).
• Form objects: HTML tags used to create a range of form objects from text boxes to radio and checkboxes to drop-down/select menus to buttons, including HTML5 input types and object attributes. Understanding of the different tags and syntax. See lecture segments on "forms" (portion of lecture) and the Form Quicksheet resource.

Review of HTML/CSS Course Content:

• Knowledge of HTML tags: You should be familiar and able to use (without notes) all "basic" html tags AND form tags. You should be able to answer questions about tag functionality.
• Using HTML tags: You should be able to create a web page (without notes) of similar complexity to your previous assignments and the practice exam.
• Using Styles: You should be familiar with the basic mechanics of setting style properties, of creating tag, id and class styles, and be able to use any style property (if provided with a list) to apply formatting to objects. And using CSS2 and CSS3 properties, including transitions.
• Stylesheets, classes and IDS: You should know how to set up a "style" block in the head of a document and to create named ID or class entries for associating style instructions to objects.
• Making page layouts: You should be able to create web page layouts using div tags for a variety of formats or uses, again similar in scope and complexity to the pages you created in your labs and assignments thus far.
• Creating form objects: You should be able to use HTML tags to create common form objects, including HTML5.

Teaching Assistant Review Guides: