1 / 32

Mastering XHTML Grouping and Form Elements

Learn XHTML grouping elements like div and span, create tables with attributes, understand forms for user-server communication.

rwoods
Download Presentation

Mastering XHTML Grouping and Form Elements

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. XHTML Grouping • Block grouping: div element • <div class=“cats”> • <h1>Cats For Sale</h1> • <h2>Six week old Tabby</h2> • <p> … </p> • <h2>Eight week old Siamese</h2> • <p> … </p> • </div> • Inline grouping: span element • <span class=“x”><em>Trotsky</em> arrived</span>

  3. XHTML Tables • Table – 2 dimensional array of cells (explicit) • <table> attribute: summary • <caption>(must be first child of <table>) • Row – 1 dimensional array of cells (explicit) • <tr> table row • Column – 1 dimensional array of cells (implicit) • Cell – a single item (explicit) • Attributes: rowspan colspan(e.g. <th colspan=“3”>) • <td> table data (e.g. <td>$3.79</td>) • <th> table heading (e.g. <th>price</th>)

  4. 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

  5. XHTML Form Elements • <form actionmethod > • <input namevaluetypeid /> • <label for > • <textarea namerowscols > • <select namemultiplesize > • <option valueselectedlabel > • <fieldset> (groups form fields together) • <legend> (caption for a field set)

  6. Form Element • <form action=“url” method=“post|get”> • 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

  7. Input Element Types • textvalue(default), size, maxlength • radiovalue(value), checked • checkboxvalue(value), checked • submitvalue(button text) • resetvalue(button text) • buttonvalue(button text) • passwordvalue(default), size, maxlength • file(value invalid), accept • imagevalue(value), src, alt • hiddenvalue(default)

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

  9. 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 ; }

  10. 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 ; • }

  11. 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]

  12. Attribute Selectors • Distinguish elements having the same name • Special cases: class and id attributes • XHTML (and HTML) • Any element (in <body>) 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

  13. 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 “-”

  14. 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 }

  15. 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 ; • }

  16. 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

  17. 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

  18. 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

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

  20. 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

  21. 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)

  22. 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

  23. 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

  24. 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”

  25. 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)

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

  27. CSS List Properties • Properties of <ol> and <ul> • 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

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

  29. 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 ;

  30. 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

  31. 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

  32. 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)

More Related