SOEN 287 WebProgramming

Stuart Thiel

Tags with Style

Fonts, Color, ImageTypes, etc.

Supplemental

ReviewSOEN 287 Web Programming

Stuart Thiel

Concordia UniversityDepartment of Engineering Computer Science

Winter, 2014

SOEN 287 WebProgramming

Stuart Thiel

Tags with Style

Fonts, Color, ImageTypes, etc.

Supplemental

Review

Outline

Tags with Style

SOEN 287 WebProgramming

Stuart Thiel

Tags with Style

Fonts, Color, ImageTypes, etc.

Supplemental

Review

Tags with Style

I Last section, looked at semantic tags

I Some tags have visual expectation

SOEN 287 WebProgramming

Stuart Thiel

Tags with Style

Fonts, Color, ImageTypes, etc.

Supplemental

Review

Tables

I Present tabular data

I . . . layout?

I The most complex structure

SOEN 287 WebProgramming

Stuart Thiel

Tags with Style

Fonts, Color, ImageTypes, etc.

Supplemental

Review

Tables Components

I Headers

I FootersI Rows

I Height

I CellsI Columns?

I WidthI Can specify by index

SOEN 287 WebProgramming

Stuart Thiel

Tags with Style

Fonts, Color, ImageTypes, etc.

Supplemental

Review

Table Cells

I AlignmentI text-alignI vertical-align

I borders

I padding

I margin

SOEN 287 WebProgramming

Stuart Thiel

Tags with Style

Fonts, Color, ImageTypes, etc.

Supplemental

Review

Complex Table Cells

I rowspan

I colspan

I http://www.w3schools.com/tags/tryit.asp?

filename=tryhtml_th_rowspan_0

SOEN 287 WebProgramming

Stuart Thiel

Tags with Style

Fonts, Color, ImageTypes, etc.

Supplemental

Review

Lists

I Unordered

I Ordered

I Definition

SOEN 287 WebProgramming

Stuart Thiel

Tags with Style

Fonts, Color, ImageTypes, etc.

Supplemental

Review

Sublists and Styling

I New lists inside

I Differentiate sub-lists

I disc, square, circle

I number, alpha, roman (upper/lower)

I Can get fancy with counters (CSS) and sublists

SOEN 287 WebProgramming

Stuart Thiel

Tags with Style

Fonts, Color, ImageTypes, etc.

Supplemental

Review

Tags with Expected Style

I You can change this

I Arguably, shouldn’t “expect” this

I em, strong, code, sub, sup, br, hr

SOEN 287 WebProgramming

Stuart Thiel

Tags with Style

Fonts, Color, ImageTypes, etc.

Supplemental

Review

Pre–formatted Text

I pre

I Doesn’t compress whitespace

I *usually* fixed-width

SOEN 287 WebProgramming

Stuart Thiel

Tags with Style

Fonts, Color, ImageTypes, etc.

Supplemental

Review

Figures

I All non-text media

I figcaption treated as expected

SOEN 287 WebProgramming

Stuart Thiel

Tags with Style

Fonts, Color, ImageTypes, etc.

Supplemental

Review

Outline I

Tags with StyleFonts, Color, Image Types, etc.SupplementalReview

SOEN 287 WebProgramming

Stuart Thiel

Tags with Style

Fonts, Color, ImageTypes, etc.

Supplemental

Review

Fuscia?

I Red, Green and BlueI Hue, Saturation, Lightness and Alpha

I alpha is coolI there term “opacity” has always bothered me

I What’s this hex stuff?I #CCCCCCI #555555I rgb(0,204,108)

I Hash or not?

SOEN 287 WebProgramming

Stuart Thiel

Tags with Style

Fonts, Color, ImageTypes, etc.

Supplemental

Review

Fuscia?

I Red, Green and BlueI Hue, Saturation, Lightness and Alpha

I alpha is coolI there term “opacity” has always bothered me

I What’s this hex stuff?I #CCCCCCI #555555I rgb(0,204,108)

I Hash or not?

SOEN 287 WebProgramming

Stuart Thiel

Tags with Style

Fonts, Color, ImageTypes, etc.

Supplemental

Review

Fuscia?

I Red, Green and BlueI Hue, Saturation, Lightness and Alpha

I alpha is coolI there term “opacity” has always bothered me

I What’s this hex stuff?I #CCCCCCI #555555I rgb(0,204,108)

I Hash or not?

SOEN 287 WebProgramming

Stuart Thiel

Tags with Style

Fonts, Color, ImageTypes, etc.

Supplemental

Review

Fuscia?

I Red, Green and BlueI Hue, Saturation, Lightness and Alpha

I alpha is coolI there term “opacity” has always bothered me

I What’s this hex stuff?I #CCCCCCI #555555I rgb(0,204,108)

I Hash or not?

SOEN 287 WebProgramming

Stuart Thiel

Tags with Style

Fonts, Color, ImageTypes, etc.

Supplemental

Review

Image types

I gif

I jpeg

I bmp

I png

SOEN 287 WebProgramming

Stuart Thiel

Tags with Style

Fonts, Color, ImageTypes, etc.

Supplemental

Review

Fonts

I Now done in CSS

I font tag may still exist. . . avoid

I fixed-width or variable width

I People make fun of Comic Sans

SOEN 287 WebProgramming

Stuart Thiel

Tags with Style

Fonts, Color, ImageTypes, etc.

Supplemental

Review

Units

I Mostly relevant in css

I must be specified, cm/em/px

I px vs cm?

I % is special

SOEN 287 WebProgramming

Stuart Thiel

Tags with Style

Fonts, Color, ImageTypes, etc.

Supplemental

Review

Outline I

Tags with StyleFonts, Color, Image Types, etc.SupplementalReview

SOEN 287 WebProgramming

Stuart Thiel

Tags with Style

Fonts, Color, ImageTypes, etc.

Supplemental

Review

Making Sure We Got Tables

I theadI moves itself to the topI tr

I thI maybe td

I you can have multiple thead, they stack. . . don’t

I tbodyI tr

I tdI maybe th

SOEN 287 WebProgramming

Stuart Thiel

Tags with Style

Fonts, Color, ImageTypes, etc.

Supplemental

Review

Tables and Feet

I tfootI moves itself to the bottomI tr

I thI maybe td

I you can have multiple tfoot, they stack. . . don’t

SOEN 287 WebProgramming

Stuart Thiel

Tags with Style

Fonts, Color, ImageTypes, etc.

Supplemental

Review

Outline I

Tags with StyleFonts, Color, Image Types, etc.SupplementalReview

SOEN 287 WebProgramming

Stuart Thiel

Tags with Style

Fonts, Color, ImageTypes, etc.

Supplemental

Review

Expected Structure

I A bunch of tags are assumed to have a structure

I It’s not official

I . . . but it really is

SOEN 287 WebProgramming

Stuart Thiel

Tags with Style

Fonts, Color, ImageTypes, etc.

Supplemental

Review

Expected Structure

I A bunch of tags are assumed to have a structure

I It’s not official

I . . . but it really is