Session 10: Dynamic HTML, Cascading Style Sheets (CSS) Object Model and Collections

Slide1Session 10Dynamic HTML: Cascading Style Sheets ™  (CSS), Object Model and Collections Matakuliah : M0114/Web Based Programming Tahun : 2005 Versi : 5

Slide2Learning OutcomesPada akhir pertemuan ini, diharapkan mahasiswa akan mampu : menghasilkan web page dengan menerapkan konsep Dynamic HTML: CSS, Event Model, Filter, Transition, dan Data Binding (C3)

Slide310.1   Introduction10.2   Inline Styles 10.3   Creating Style Sheets with the STYLE           Element 10.4   Conflicting Styles 10.5   Linking External Style Sheets 10.6   Positioning Elements 10.7   Backgrounds 10.8   Element Dimensions 10.9   Text Flow and the Box Model 10.10 User Style Sheets 10.11 Object Model 10.12 Collections  all  and  children 10.13  Summary of the DHTML Object Model Outline Materi

Slide410.1  Introduction• Cascading Style Sheets  (CSS) – Specify the style of your page elements – Spacing, margins, etc. • Separate from the structure of your document – Section headers, body text, links, etc. • Separation of structure from content – Greater manageability – Easier to change style of document

Slide510.2  Inline Styles• Inline styles – Individual element’s style declared using the STYLE  attribute – Each CSS property followed by a colon and the value of that attribute – Multiple properties separated by semicolons <P STYLE = “font-size: 20 pt; color: #0000FF”> – Inline styles override any other styles Sample Program

Slide610.3  Creating Style Sheets withthe STYLE Element • Style sheet in header section – Begins with  <STYLE TYPE = “text/css”> • Styles placed here apply to the whole document • TYPE  attribute specifies the MIME type – MIME is a standard for specifying the format of content » Other MIME types include  text/html , image/gif  and  text/javascript • Without style sheets – Browser completely controls the look and feel of Web pages • With style sheets – Designer can specify the look and feel of Web pages continue..

Slide710.3  Creating Style Sheets withthe STYLE Element • Declare CSS rules within  STYLE  element – Each rule body begins and ends with a curly brace ( {  and  } ) – Class declarations are preceded with a period and applied to elements only of that specific class – Each property is followed by a colon and the value of the property – Multiple properties are separated by semicolons continue..

Slide810.3  Creating Style Sheets withthe STYLE Element • Generic font families – Allow you to specify a type of font instead of a specific font • Font-size property – Relative sizes:  xx-small ,  x-small ,  small , smaller ,  medium ,  large ,  larger ,  x- large  and  xx-large • Styles applied to an element (the  parent element ) – Also apply to the elements inside that element ( child elements ) Sample Program

Slide910.4  Conflicting Styles• Inheritance  and  specificity • text-decoration property – Applies decorations to text within an element – none – overline – line-through – blink • Browsers are not required to support  blink • Pseudo-classes – Give the author access to content not specifically declared in the document – Ex.  hover  pseudo-class continue..

Slide1010.4  Conflicting Styles• px : pixel is a relative-length measurement – Varies in size based on screen resolution • Other relative-lengths – em : the size of the font – ex : the “x-height” of the font, usually set to the height of a lowercase x – Percentages • E.g.  margin-left: 10% • Absolute-length measurements – in : inches – cm : centimeters – mm : millimeters – pt : points (1  pt  = 1/72  in ) – pc : picas (1  pc  = 12  pt ) • Use relative length over absolute continue..

Slide1110.4  Conflicting Styles• Three possible sources for style sheets – Browser defaults – Preset user styles – Author styles • Author styles have a greater precedence than preset user styles Sample Program

Slide1210.5   Linking External Style Sheets• External linking – Separate pages can all use same style sheet – Only modify a single file to change styles across your site • LINK  element – Specifies a relationship  ( REL  attribute) between current document and another document  <LINK REL = “stylesheet” TYPE = “text/css” HREF = “styles.css”> – LINK  element can only be placed in header – Other  REL  values • next ,  previous  allow you to link a series of documents – Print all linked documents  option • Style sheets are reusable Sample File(CSS) Sample Program

Slide1310.6   Positioning Elements• CSS  position  property – Absolute positioning • Specifying an element’s  position  as  absolute removes it from the normal flow of elements on the page • Position the element according to distance from top ,  left ,  right  or  bottom  margins of parent element – z-index  attribute • Allows you to properly layer overlapping elements • Elements with higher  z-index  are displayed in front of elements with lower  z-index Sample Program continue..

Slide1410.6   Positioning Elements• CSS  position  property (cont.) – Relative positioning • Browser lays out the element on the page • Then offsets the element by specified  top , bottom ,  left  or  right  values • Keeps elements in the general flow of elements on the page • Be careful to avoid unintentionally overlapping text Sample Program

Slide1510.7   Backgrounds• background-image  property – Specifies the URL • background-position  property – Positions the image on the page – Top ,  bottom ,  center ,  left  or  right – Ex.  background-position: 50% 30px; • Position image centered vertically (50% of the distance across the screen) and 30 pixels from the top • background-repeat  property controls tiling – no-repeat ,  repeat ,  x-repeat ,  y-repeat • background-attachment  property – fixed : scrolling the browser window will not move the image – scroll : moves the image as the user scrolls the window (default) • text-indent   property – Indents first line of text by specified amount continue..

Slide1610.7   Backgrounds• font-weight  property – specifies the “boldness” of affected text – bold – normal – bolder – lighter – Multiples of 100 from 100 to 900 • font-style  property – none – italic – oblique • Will default to  italic  if system does not have separate font file for  oblique continue..

Slide1710.7   Backgrounds• SPAN  element: generic grouping element – Does not apply any inherent formatting – Main use is to apply styles or  ID  attributes to block of text – Inline element • DIV  element – Similar to  SPAN , but  block-level element • Displayed on own line with margins above and below Sample Program

Slide1810.8   Element Dimensions• width  property – Ex.  <DIV STYLE = “width: 20%”> • height  property – Relative and absolute lengths for  width  and height  properties • text-align  property – center ,  left  or  right • overflow  property – scroll  adds scrollbars if the text overflows the boundaries Sample Program

Slide1910.9   Text Flow and the Box Model• Floating – Allows you to move an element to one side of the screen – Other content in the document flows around the floated element – Float to the left or right of a document • Each block-level element is “boxed” – Box model  allows properties of box to be easily adjusted • Padding • Border • Margins Sample Program continue..

Slide2010.9   Text Flow and the Box Model• Box model border – border-width – border-style • E.g.  border-top-style • none • hidden • dotted • dashed • solid • double • groove • ridge • inset • outset – border-color • E.g.  border-left-color Sample Program1 Sample Program2

Slide2110.10 User Style Sheets• Important issue when adding style sheets: – What kind of users will be using your site? • Users can define their own user style sheets • CSS specification gives precedence to author styles over user styles • Use relative measurements • Add a user style sheet in IE5 – Tools  menu     Internet Options… • Accessibility… – Check Format documents using my style sheet Sample Program continue..

Slide2210.10 User Style SheetsAdding a user style sheet in Internet Explorer 5 ©  Copyright 2001 by Deitel & Associates. All Rights Reserved

Slide2310.11 Object ModelIntroduction • Dynamic HTML object model – Great control over presentation of pages • Access to all elements on the page – Whole web page (elements, forms, frames, tables, etc.) represented in an object hierarchy • HTML elements treated as objects – Attributes of these elements treated as properties of those objects • Objects identified with an  ID  attribute can be scripted with languages like JavaScript, JScript and VBScript continue..

Slide2410.11 Object ModelObject Referencing • Simplest way to reference an element is by its  ID  attribute • Changing the text displayed on screen – Example of a Dynamic HTML ability called dynamic content Sample Program

Slide2510.12 Collections all and children• Collections  are basically arrays of related objects on a page • all – Collection of all the HTML elements in a document in the order in which they appear • length  property – Specifies the number of elements in the collection • tagName  property of an element – Determines the name of the element • Every element has its own  all  collection, consisting of all the elements contained within that element continue.. Sample Program

Slide2610.12 Collections all and children• The  children  collection – Contains only those elements that are direct child elements of that element – An  HTML  element has only two children: the  HEAD element and the  BODY  element continue.. Sample Program

Slide2710.12.1 Dynamic Styles • Refer to the background color of a page as document.body.style.backgroundCol or • Dynamic HTML object model allows you to change the  CLASS  attribute of an element Sample Program1 Sample Program2

Slide2810.12.2 Dynamic positioning • Dynamic Positioning – An element can be positioned with scripting • setInterval  function takes two parameters: – A function name – How often to run that function – clearInterval  function stops the timer • setTimeout  function similar, but only calls the function once – clearTimeout  function stops the timer Sample Program

Slide2910.12.3 Using the  frames  Collection • frames  collection – To reference a frame, use  frames(“ name ”) where name is the  ID  or  NAME  of the desired frame • Ex.  frames(“lower”)  refers to the element in the frames collection with an  ID  or  NAME  of  lower Sample Program1 Sample Program2

Slide3010.12.4 Navigator ObjectNavigator  object – Supported by Netscape Navigator and Internet Explorer – navigator  object contains info about the Web browser viewing the page – navigator.appName  contains the name of the application • “ Microsoft Internet Explorer ” • “ Netscape ” – Value of  navigator.appVersion  not a simple integer • Contains other info, such as OS • When using a browser-specific technology – Make provisions for other browsers Sample Program

Slide3110.13 Summary of the DHTML Object Model • DHTML object model – Allows script programmer to access every element in an HTML document – Every element a separate object

Slide3210.13 Summary of the DHTML Object Model window document history navigator applets all anchors body embeds forms filters images links plugins styleSheets scripts location screen event document document plugins object collection Key frames continue.. ©  Copyright 2001 by Deitel & Associates. All Rights Reserved

Slide3310.13 Summary of the DHTML Object Model • Objects in the Internet Explorer 5 object model continue.. ©  Copyright 2001 by Deitel & Associates. All Rights Reserved

Slide3410.13 Summary of the DHTML Object Model • Objects in the Internet Explorer 5 object model – Continued from previous slide continue.. ©  Copyright 2001 by Deitel & Associates. All Rights Reserved

Slide3510.13 Summary of the DHTML Object Model • Collections in the Internet Explorer 5 object model continue.. ©  Copyright 2001 by Deitel & Associates. All Rights Reserved

Slide3610.13 Summary of the DHTML Object Model • Collections in the Internet Explorer 5 object Model – Continued from the previous slide ©  Copyright 2001 by Deitel & Associates. All Rights Reserved

Slide37End of Session 10