Session 10

Dynamic HTML: Cascading Style Sheets™ (CSS), Object

Model and Collections

Matakuliah : M0114/Web Based Programming

Tahun : 2005

Versi : 5

Learning Outcomes

Pada akhir pertemuan ini, diharapkan mahasiswa

akan mampu :

menghasilkan web page dengan menerapkan konsep Dynamic HTML: CSS, Event Model, Filter, Transition, dan Data Binding (C3)

10.1 Introduction10.2 Inline Styles10.3 Creating Style Sheets with the STYLE Element10.4 Conflicting Styles10.5 Linking External Style Sheets10.6 Positioning Elements10.7 Backgrounds10.8 Element Dimensions10.9 Text Flow and the Box Model10.10 User Style Sheets10.11 Object Model10.12 Collections all and children10.13 Summary of the DHTML Object Model

Outline Materi

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

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

10.3 Creating Style Sheets with the 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..

10.3 Creating Style Sheets with the 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..

10.3 Creating Style Sheets with the 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

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

10.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 absolutecontinue..

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

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

10.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-indexSample

Programcontinue..

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

10.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 amountcontinue..

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

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

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

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

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

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

10.10 User Style Sheets

Adding a user style sheet in Internet Explorer 5

© Copyright 2001 by Deitel & Associates. All Rights Reserved

10.11 Object Model

Introduction

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

10.11 Object Model

Object 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

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

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

10.12.1 Dynamic Styles

• Refer to the background color of a page as document.body.style.backgroundColor

• Dynamic HTML object model allows you to change the CLASS attribute of an element

Sample Program1

Sample Program2

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

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

10.12.4 Navigator Object

Navigator 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

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

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

10.13 Summary of the DHTML Object Model

• Objects in the Internet Explorer 5 object model

Object Description

window This object represents the browser window and provides access to the document object contained in the window. If the window contains frames, a separate window object is created automatically for each frame, to provide access to the document rendered in that frame. Frames are considered to be subwindows in the browser.

document This object represents the HTML document rendered in a window. The document object provides access to every element in the HTML document and allows dynamic modification of the HTML document.

body This object provides access to the BODY element of an HTML document.

history This object keeps track of the sites visited by the browser user. The object provides a script programmer with the ability to move forward and backward through the visited sites, but for security reasons does not allow the actual site URLs to be manipulated.

navigator This object contains information about the Web browser, such as the name of the browser, the version of the browser, the operating system on which the browser is running and other information that can help a script writer customize the user’s browsing experience.

continue..© Copyright 2001 by Deitel & Associates. All Rights Reserved

10.13 Summary of the DHTML Object Model

• Objects in the Internet Explorer 5 object model– Continued from previous slide

Object Description

location This object contains the URL of the rendered document. When this object is set to a new URL, the browser immediately switches (navigates) to the new location.

event This object can be used in an event handler to obtain information about the event that occurred (e.g., the mouse coordinates during a mouse event).

screen The object contains information about the computer screen for the computer on which the browser is running. Information such as the width and height of the screen in pixels can be used to determine the size at which elements should be rendered in a Web page.

continue..© Copyright 2001 by Deitel & Associates. All Rights Reserved

10.13 Summary of the DHTML Object Model

• Collections in the Internet Explorer 5 object model

Collection Description all Many objects have an all collection that provides access to

every element contained in the object. For example, the body object’s all collection provides access to every element in the BODY element of an HTML document.

anchors This collection contains all anchor elements (A) that have a NAME or ID attribute. The elements appear in the collection in the order they were defined in the HTML document.

applets This collection contains all the APPLET elements in the HTML document. Currently, the most common APPLET elements are Java applets.

embeds This collection contains all the EMBED elements in the HTML document.

forms This collection contains all the FORM elements in the HTML document. The elements appear in the collection in the order they were defined in the HTML document.

continue..© Copyright 2001 by Deitel & Associates. All Rights Reserved

10.13 Summary of the DHTML Object Model

• Collections in the Internet Explorer 5 object Model– Continued from the previous slide

Collection Description

frames This collection contains window objects that represent each frame in the browser window. Each frame is treated as its own subwindow.

images This collection contains all the IMG elements in the HTML document. The elements appear in the collection in the order they were defined in the HTML document.

links This collection contains all the anchor elements (A) with an HREF property. This collection also contains all the AREA elements that represent links in an image map.

plugins Like the embeds collection, this collection contains all the EMBED elements in the HTML document.

scripts This collection contains all the SCRIPT elements in the HTML document.

styleSheets This collection contains styleSheet objects that represent each STYLE element in the HTML document and each style sheet included in the HTML document via LINK..

© Copyright 2001 by Deitel & Associates. All Rights Reserved

End of Session 10