News and External Resources

Cheat Sheets that list all of the different HTML5 and CSS3 tags you can use. Print them out, use them. Explore and get to know them. You can use these during the quiz next week:

1. HTML5 Cheat Sheet all of the different tags and the attributes they can have.
2. CSS3 Cheat Sheet all of the different properties and all possible values or value types they take.

Install these Plug-ins if you use Firefox or Chrome. They will facilitate your web development. Do not forget to activate the Show Developer menu in menu bar under the Advanced tab in Safari’s Preferences. Detailed help pages are available for Safari Web Developer are available.

1. Firebug Plug in for Firefox and Chrome.
2. Web Developer Plug in for Firefox and Chrome.
3. Safari Web Developer Help Pages.

Resources that will aid your understanding of HTML and CSS.

1. Google University: HTML, CSS and Javascript from the Ground Up.
2. Can I use this CSS?Updated list of browser support.
3. Dive Into HTML5Book on HTML5.
4. W3.org Status of CSS level 3 specifications Keeper of the standards specifications used to create CSS support in the browsers.

CSS Prefabs

There are many frameworks that allow you to build your websites using preexisting CSS. They arose because layout in CSS is neither intuitive nor easy, and go from simple grids to complete font-end frameworks.

Simple Grids

1. Twitter Blueprint
2. 960 Grid System
3. UnSemantic
4. Frameless and Golden Grid System

Complete Front End Frameworks featuring HTML5, CSS3 and Javascript building blocks for rapid website production.

1. Twitter Bootstrap
2. Create JS
3. Foundation
4. HTML5 Boilerplate
5. Skeleton
6. KickStart

CSS Authoring Frameworks

1. Compass

CSS Extention Languages

1. Less
2. Sass
3. Stylus

Modding Prefabs

There are many services that allow you to build your own websites, and you can use the HTML and CSS skills you learn here to modify them. This can give you the best of both worlds, for you can use their platform and templates, but modified so that they look unique in ways that goes beyond template options.

build your own

1. WordPress Build your own with lots of templates to choose from.
2. Joomla For more complicated websites.
3. Drupal For more the most complicated websites.

Or use a pre-made platform. Note that there are limitations imposed, like Wix depends on absolute positioning to give it flexibility in designing the site, but that end up curtailing the flexibility in other ways.

1. Tumbler Customize the experience with HTML and CSS.
2. Cargo Collective
3. Coroflot
4. Indexhibit
5. Wix
6. Square Space

Lynda.com Web Video Tutorials

As of 9/13.

Definitions

These are the terms that participants should be familiar with during this unit:

box model

CSS (Cascading Style Sheets) describes the rendering of documents on various media. When textual documents (e.g., HTML) are laid out on visual media (e.g., screen or print), CSS models the document as a hierarchy of boxes containing words, lines, paragraphs, tables, etc. each with properties such as size, color and font.

This module describes the basic types of boxes, with their padding and margin, and the normal “flow” (i.e., the sequence of blocks of text with margins in-between). It also defines “floating” boxes, but other kinds of layout, such as tables, absolute positioning, ruby annotations, grid layouts, columns and numbered pages, are described by other modules. Also, the layout of text inside each line (including the handling of left-to-right and right-to-left scripts) is defined elsewhere.

Boxes may contain either horizontal or vertical lines of text. Boxes of different orientations may be mixed in one flow. (This is a level 3 feature.)

Inline Text Effects

This CSS3 module defines properties for text manipulation and specifies their processing model. It covers line breaking, justification and alignment, white space handling, text decoration and text transformation.

Positioning Schemes

In CSS 2.1, a box may be laid out according to three positioning
schemes:

1. Normal flow. In CSS 2.1, normal flow includes block formatting of block-level boxes, inline formatting of inline-level boxes, and relative positioning of block-level and inline-level boxes.
2. Floats. In the float model, a box is first laid out according to the normal flow, then taken out of the flow and shifted to the left or right as far as possible. Content may flow along the side of a float.
3. Absolute positioning. In the absolute positioning model, a box is removed from the normal flow entirely (it has no impact on later siblings) and assigned a position with respect to a containing block.

CSS3 Floating Boxes

A float is a box that is shifted to the left or right on the current line. The most interesting characteristic of a float (or “floating” box) is that content may flow along its side (or be prohibited from doing so by the ‘clear’ property). Content flows down the right side of a left-floated box and down the left side of a right-floated box. The following is a (non-normative) introduction to float positioning and content flow; the exact rules governing float positioning are given in the next section.

A floated box is shifted to the left or right until its outer edge touches the containing block edge or the outer edge of another float. If there is a line box, the top of the floated box is aligned with the top of the current line box.

If there isn’t enough horizontal room for the float, it is shifted downward until either it fits or there are no more floats present.

Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float didn’t exist. However, line boxes created next to the float are shortened to make room for the margin box of the float. If a shortened line box is too small to contain any further content, then it is shifted downward until either it fits or there are no more floats present. Any content in the current line before a floated box is re-flowed in the first available line on the other side of the float. In other words, if inline boxes are placed on the line before a left float is encountered that fits in the remaining line box space, the left float is placed on that line, aligned with the top of the line box, and then the inline boxes already on the line are moved accordingly to the right of the float (the right being the other side of the left float) and vice versa for rtl and right floats.

Floats and Positioning Level 3

(This is a more advanced development of floats to exploit their wide usage in layout. It is one of the layout strategies coming out of the W3.org) CSS Floats and Positioning Level 3 allows authors to have text and other inline content wrap around specified elements, thereby allowing for the creation of more intricate layouts than is currently possible with existing CSS floaters. Specifically, CSS 3 Floats, also known as “positioned floats”, can be absolutely positioned on a web document, while still affecting the document flow. Authors can individually specify whether intersected block elements surrounding a positioned float (e.g. paragraphs, divs, etc.) overlap with the positioned float, and if so how they overlap with it. Positioned float can also be styled with a wrap-shape property, which specifies both how text within the positioned float is laid out and how content outside the positioned float wraps around the positioned float. It is also possible to define a shape based on transparency values within an image.

Grids

A typographic grid is a two-dimensional structure made up of a series of intersecting vertical and horizontal axes used to structure content. The grid serves as an armature on which a designer can organize text and images in a rational, easy to absorb manner.