CIS 228 The Internet 11/1/11 Review HFHTML ch 8-14

XHTML Grouping Block grouping: div element Cats For Sale Six week old Tabby … Eight week old Siamese … Inline grouping: span element Trotsky arrived

XHTML Tables Table – 2 dimensional array of cells (explicit) attribute: summary (must be first child of ) Row – 1 dimensional array of cells (explicit) table row Column – 1 dimensional array of cells (implicit) Cell – a single item (explicit) Attributes: rowspan colspan (e.g. ) table data (e.g. $3.79 ) table heading (e.g. price )

XHTML Forms Limited 2-way communication between user & server (Heretofore server supplies information to the user) Browser sends name-value pairs to server application Names are specified by the application Values are supplied by the user Application responds with new web page for browser (Creating server applications beyond this course) Forms structure the interaction Give user “natural” means of supplying information

XHTML Form Elements (groups form fields together) (caption for a field set)

Form Element action Relative (path to local application) Absolute (path to application on a different site) method post - form data bundled in separate communication Cannot be bookmarked get - form data appended to url Size limited Do not use to transmit sensitive data

Input Element Types text value (default), size, maxlength radio value (value), checked checkbox value (value), checked submit value (button text) reset value (button text) button value (button text) password value (default), size, maxlength file (value invalid), accept image value (value), src, alt hidden value (default)

Attaching CSS to a Web Page Style attribute (on element in ) Value: one or more CSS rules Deprecated Style element (in ) Attribute type=”text/css” Content: one or more CSS rules Link element (empty element in ) Attribute type=”text/css” Attribute rel=”stylesheet” Attribute href=”somepath/file.css”

Setting Defaults Set defaults for inherited properties on body element body { font-family: Verdana, Geneva, “Dejavu Sans”, Arial, san-serif ; font-size: medium ; background-color: #FEA ; color: #963 ; } h1 { font-size: 150% ; } h3 { font-size: 1.2em ; }

CSS Rules Template: selector { property : value + ; } Selector identifies 0 or more elements in a document Element names (e.g. blockquote, p, q …) Class attribute values (e.g. p.legalese or.legalese) Id attribute values (e.g. p#signature or #signature) Property governs an aspect of element presentation Value specifies a property (e.g. 7px, 7%, red, #777, etc.) Example: p.legalese, #signature { color: #0BEAF0 ; }

CSS Selectors Rule: selector-group { property-declaration * ; } Selector-group: selector *, Selector: simple-selector * operator Operator: descendant (“”) | child (“>”) | sibling (“+”) Simple-selector: (universal (“*”|“”) | type) context* (type is an XHTML element name) Context selectors Id-selector: #identifier Class-selector:.identifier Pseudo-class: :identifier (e.g. :link, :visited, :hover, etc.) Attribute-selector: [identifier]

Attribute Selectors Distinguish elements having the same name Special cases: class and id attributes XHTML (and HTML) Any element (in ) can have a class attribute At most one element can have any value for an id attribute CSS for class and id attributes p.legalese { color: red ; }.legalese { font-size: small ; } p#signature { font-size: 3em ; } #signature { border: 1px solid #DEAD29

Attribute Selectors, continued Match elements based on their attribute [title] elements with a title attribute e.g. li > a[title] [title=UN] matches elements with title UN e.g. p[class=loser] (same as p.loser) [title~=UN] matches element with UN in the title In a value that is a list of identifiers separated by “ ” [lang|=en] matches elements containing en in lang In a value that is a list of identifiers separated by “-”

Pseudo Classes and Elements Refer to state not represented in the element tree Pseudo-classe selectors :link, :visited, :hover register the state of hyperlinks e.g. a:link { color: C4C } :first-child selects the first element of its parent e.g. blockquote > p:first-child { indent: 4em } Pseudo-element selectors (must come last) :first-letter, :first-line e.g. p.first-letter { font-size: 5em } :before, :after (not supported by IE) e.g. blockquote:before { content: open-quote }

Property Inheritance Some property values are inherited e.g. color, font-family Some are not e.g. border (why?) Elements pass inherited values to their children e.g. em inherits color from p Inheritance can be overridden by explicit assignment e.g. em { color: maroon ; }

Determining Property Values What is the value v of property p on element e? Is there a rule that selects e and defines p? Only one? that rule gives v More than one? take the (physically) last one Is p an inherited property? Take the value of p for e's parent Otherwise Default value Multiple style sheets are concatenated together

The Cascade Which declaration for property p applies on element e? Concatenate style sheets: Browser defaults User style sheet Applicable author style sheet(s) (in order) Gather declarations whose selectors match the e (If none, check inheritance) If any are “ ! important ”, ignore the rest (You can mark declarations “ ! important ”, but don't!) Ignore all but the most specific declarations The physically last remaining declaration wins

Selector Specificity Rules specified by style attributes are most specific If there is one, ignore the rest Id-selectors are most important Ignore rules with less than the most id-selectors Context-selectors are very important Ignore rules with less than the most context-selectors Type selectors are important Ignore rules containing less than the most type-selectors Remember: last remaining rule wins

The Box Model Element content is surrounded by (optional) boxes: Padding transparent space Border width style solid double groove outset dotted dashed inset ridge color if not specified, same as content text (element color) Margin transparent space

Box Model Properties padding: 10px border: 2px dotted #A84E19 border-width: 2px border-style: dotted border-color: #A84E19 margin: 8em background-image: url(Images/myDucky.png) background-repeat: no-repeat background-position: top center

Sides Each box has four sides: top right bottom left (clockwise ordering) Properties of an individual side can be specified border-bottom-style: dotted padding-left: 10% Properties of each side can be specified in turn border-style: none double dotted inherit margin: 2em 5% 30px 6pt padding: 4em 8em (4em 8em) border-width: 3px (3px 3px 3px)

Some Fonts Sans-serif Ariel, Verdana, Geneva, Helvetica, “DejaVu Sans” Serif “Times New Roman”, Times, “DejaVu Serif” Monospace “Courier New”, Courier, “DejaVu Sans Mono” Cursive “Comic Sans”, Cartoon, “Apple Chancery” Fantasy Impact, “Last Ninja”, Crush, Papyrus

Font Size Keywords: xx-small, x-small, small, medium, large, x-large, xx-large Absolute size: Pixels: 14px Points: 14pt Relative size: Reference character: 1.4em Percentage: 140% Suggestions: Default: use keyword (medium or small) in body rule Otherwise: use relative size measurements

Other Text Properties font-weight “bold” or “normal” font-style “italic” (“oblique”) or “normal” text-decoration “underline”, “overline”, “line-through”, “blink”, “none” line-height e.g. 1.6em or 160% text-align “left”, “center”, “right”, “justify”, “inherit”

Color Properties background-color: color: Specifying color 17 named colors black, white, red, green, blue, aqua, fuchsia, yellow, etc. Red-Green-Blue triples rgb(255, 127, 63) rgb(100%, 50%, 25$) Hex codes #FF7F3F #963 (= #996633)

Deciphering Hex Color Codes Example: #3FE29B Separate into color pairs: 3F E2 9B Replace letters with numbers: 3(15) (14)2 9(11) A->(10) B->(11) C->(12) D->(13) E->(14) F->(15) Multiply first by 16: (48)(15) (224)2 (144)(11) Add: #3FE29B = rgb( 63, 226, 155)

CSS List Properties Properties of and list-style list-stype-position outside, inside, or inherit list-style-image none or url (e.g. url(images/dimond.jpg) ) list-style-type disc, circle, square, none decimal, lower-alpha, upper-alpha, lower-roman, upper-roman, lower-greek

CSS Table Properties Standard CSS properties apply to all table elements color, font, text-align, padding, border, etc. Property for only caption-side: top, bottom, inherit Properties for,,, and border-spacing : length length border-collapse : ( separate, collapse, inherit ) Properties for and align : ( left, right, center, justify, inherit ) valign : ( top, center, bottom, inherit )

Floats Floats are removed from the normal flow pushed to the right (or left) of the page at the point they were removed ignored by block elements in the normal flow avoided by inline elements in the normal flow float: right ; Clear property delays a block element until after any float clear: right ;

Normal Flow Block elements Arranged vertically Line break between successive elements Margins overlap Ignore floats Inline elements Arranged horizontally Lines wrap (if they get too long) Margins add Respect float boundaries

Creating a Sidebar In XHTML 1 Wrap sidebar content in a div element 2 Give div element an id attribute (e.g. id= “sidebar”) 3 Move div element to where sidebar should start In CSS 4 Set width property of the sidebar 5 Set float property of the sidebar 6 Increase margin for content next to the sidebar 7 Set clear property for content immediately below sidebar

The Position Property Absolute top (right, bottom, left) relative to containing positioned element z-index property orders absolutely positioned elements Fixed Top (right, bottom, left) relative to viewport (browser window) Relative Top (right, bottom, left) relative to element's normal flow position Static Default (normal flow position)