Saturday, September 27, 2008

Class 2 - Basic XHTML / CSS Layout

Here is my first webpage using CSS!

Notes from Today's Class 9/27: CSS

  • To link an XHTML file to a CSS file: <link rel="stylesheet" type="text/css" href="styles/main.css" />
  • To avoid wrapping: <div class="container">
  • To put everything on the same line: {float: left;}
  • To keep text from wrapping around boxes: <br class="clear" />
  • To make sure there is nothing to the left or the right of the break: .clear {clear: both;}
  • **Account for border widths in your container (pixels or %s): i.e. 3 bordered boxes with 1px borders (1 on left and 1 on right) = 6px of border width

Thursday, September 25, 2008

Learned from W3 Schools

HTML: http://www.w3schools.com/html/html_quick.asp

XHTML
XML was designed to describe data and HTML was designed to display data.
  1. XHTML elements must be properly nested
  2. XHTML elements must always be closed
  3. XHTML elements must be in lowercase
  4. XHTML documents must have one root element
  5. Attribute names must be in lower case
  6. Attribute values must be quoted
  7. Attribute minimization is forbidden
  8. The id attribute replaces the name attribute
  9. The XHTML DTD (Document Type Definition) defines mandatory elements
  • The lang attribute applies to almost every XHTML element. It specifies the language of the content within an element.
  • All XHTML documents must have a DOCTYPE declaration. The html, head and body elements must be present, and the title must be present inside the head element. The DOCTYPE declaration defines the document type: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  • Modules: By splitting XHTML into modules, the W3C (World Wide web Consortium) has created small and well-defined sets of XHTML elements that can be used separately for small devices, or combined with other XML standards into larger and more complex applications.
  • DOCTYPE describes in precise, computer-readable language, the allowed syntax and grammar of XHTML markup.
  • There are currently 3 XHTML document types:

    • STRICT: Use this when you want really clean markup, free of presentational clutter. Use this together with Cascading Style Sheets. Includes elements and attributes that have not been deprecated or do not appear in framesets.
    • TRANSITIONAL: Use this when you need to take advantage of HTML's presentational features and when you want to support browsers that don't understand Cascading Style Sheets. Includes everything in the strict DTD plus deprecated elements and attributes.
    • FRAMESET: Use this when you want to use HTML Frames to partition the browser window into two or more frames. Includes everything in the transitional DTD plus frames as well.
  • XHTML Validator
  • Dave Raggett's HTML TIDY
  • There are attributes that can be inserted into HTML tags to define event actions. - onmouseover
CSS
  • Styles can be specified inside a single HTML element, inside the element of an HTML page, or in an external CSS file. Even multiple external style sheets can be referenced inside a single HTML document.
  • All the styles will "cascade" into a new "virtual" style sheet by the following rules, where number four has the highest priority:
    1. Browser default
    2. External style sheet: Each page must link to the style sheet using the tag. The link tag goes inside the head section: <link rel="stylesheet" type="text/css" style="font-family: monospace;" href=".css>
    3. Internal style sheet (inside the tag): An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section by using the

Saturday, September 20, 2008

Class 1: Information Architecture: Wireframes

Today we worked on Information Architectures.

A sitemap reveals all of the pages and how they link together.

A wireframe shows the underlying layout of the page.
Here is the wireframe I created for our hypothetical Pet Shop page (click for a larger image):


First Web Development Class

Welcome to my blog!!!!