Lecture 2 - HTML and CSS Review SFDV3011 – Advanced Web Development 1

Recall from SFDV  Hypertext Markup Language (HTML) Semantic markup Content Logical structure Meaning  Cascading Style Sheets (CSS) Presentation Appearance 2

HTML document structure 3 <! DOCTYPE HTML PUBLIC " -// W3C // DTD HTML 4.01// EN" " http :// org /TR/ html4 / strict. dtd ">..

HTML standard  DTD HTML 4.01 Strict, Transitional or Frameset XHTML 1.0 Strict, Transitional or Frameset HTML 5 - still a draft  Validator  World Wide Web Consortium (W3C) 4

HTML elements and attributes  Block elements:,,  Inline elements:,  Headings,,...  Paragraph  Anchor  Image 5 Search the Web.

HTML tables 6 Table caption Header 1 Header 2 Cell 1 Cell 2 Cell 3 Cell 4  Remember, tables are not for page layout!!!

HTML forms 7 A group of controls : Text box Check 1 Check 2

HTML and CSS Three ways to include CSS in an HTML document:  External - style sheet is a separate le linked from HTML document  Embedded - the style resides in the header of the HTML document  Inline - inside the tags of the corresponding element 8

CSS standard  CSS  CSS 3 - still a draft  Validator - 9

CSS selectors, properties and values 10 /* CSS comments. */ selector { property : value ;... } /* All paragraph and level 1 header elements */, { margin : 10 px; } /* All div elements with attributed class =" nav " */ div. nav { width : 10 em; } /* Elements with id=" lname " */ # lname { border : 1px solid #8 c3ba2 ; } /* Pseudoselector when hovering over an anchor */ a: hover { color : # ff0000 }

CSS box model 11 margin border padding background width height

CSS standard  Normal flow (default) - position: static;  Relative - position: relative;  Absolute - position: absolute;  Fixed - position: fixed;  Floating - float: left; or float: right;  Remember vertical margin collapse? 12

CSS cascading and inheritance 13 Cascading order Lowest priority Highest priority StylesheetBrowser default User Author LocationExternal Embedded Inline SelectorsContextual Class Id Inheritance tree Not all properties are inheritable Body divpul li em

Catch up... ...if you're not familiar with any of the concepts mentioned in this lecture.  You'll find great tutorials at  More tutorials at  Review any other textbook on HTML and/or CSS - there are many. 14