The document discusses Dynamic HTML (DHTML) and its components. It explains that DHTML allows web pages to function more like software applications through a combination of technologies including the DOM, CSS, and scripting languages. It provides definitions and examples of the DOM, CSS, and different types of CSS like inline, embedded, and external stylesheets. It also includes links to resources about DHTML and its components.

1. Pemrograman Internet Dasar
BEI HARIRA IRAWAN, S.KOM, MM, M.KOM

2. Pemrograman Dasar
Dynamic HTML (DHTML)

3. 3
Electronic Commerce;
Prof. Sheizaf Rafaeli
Dynamic HTML
• “Call us crazy, but we thought that the next big thing in
HTML wasn't going to be a new tag. “
• Netscape’s (DevEdge) guide to DHTML:
• http://developer.netscape.com/library/documentation/co
mmunicator/dynhtml/index.htm
• Microsoft’s Dynamic HTML Object Model:
• http://msdn.microsoft.com/msdn-
online/workshop/author/dom/domoverview.asp
• http://msdn.microsoft.com/workshop/author/om/doc_o
bject.asp

4. 4
Electronic Commerce;
Prof. Sheizaf Rafaeli
DHTML: Dynamic HTML
• DHTML - still more a promise than a reality
• But certainly the shape of things to come
• a group of technologies that make Web pages more like miniature
software applications.
• If ever there was a Bleeding Edge

5. 5
Electronic Commerce;
Prof. Sheizaf Rafaeli
Dynamic HTML
• Cross-Browser techniques are the holy grail
• WebMonkey’s tutorial, Nadav Savio, reconciles the two at:
• http://www.hotwired.com/webmonkey/html/97/31/index2a.html
• See C-Net builder’s tutorial at:
• http://www.cnet.com/Content/Builder/Authoring/Dhtml/?st.cn.fd.acol.bl
• See http://www.insidedhtml.com (book and website)
• And especially the 10K demos!

6. 6
Electronic Commerce;
Prof. Sheizaf Rafaeli
DHTML components
• DOM:
the (DYNAMIC) Document Object Model
• CSS: Cascading Style Sheets
• Scripting languages: (like Javascript, Active-X, asp).
• And, depending on the browser, positioning, downloading fonts,
streaming content, “behaviors”, image transition, animated
backgrounds, etc.

7. 7
Electronic Commerce;
Prof. Sheizaf Rafaeli
DOM: The Document object Model
• defines all items on a Web page as objects that can be manipulated.
• Otherwise, those elements are set, defined solely by the browser.
For example, the DOM makes it possible to identify
individual letters on a page as separate objects, and
then to assign specific qualities, such as color or size,
to each letter. In a sense, every letter becomes a tiny
Web page.

8. 8
Electronic Commerce;
Prof. Sheizaf Rafaeli
Cascading Style Sheets
(CSS)
• Cascading Style Sheets are a simple way to control style without
compromising structure. They separate the style (visual design
elements) from the structure of documents.
• CSS is a form of HTML mark-up that provides web designers with
greater control over typography and spacing between elements on a
page.

9. 9
Electronic Commerce;
Prof. Sheizaf Rafaeli
Cascading Style Sheets
(CSS)
•Changing the style can affect an entire document.
•Style sheets can be shared by multiple documents.
•So changing a style can affect an entire website
• WHAT ABOUT BROWSER COMPATIBILITY? CSS support is provided in
Internet Explorer 4+ and Netscape Navigator 4+. However, some
annoying browser inconsistencies continue

10. 10
Electronic Commerce;
Prof. Sheizaf Rafaeli
Cascading Style Sheets
(CSS)
•CSS overrides the browser's default settings
• WHAT DOES CSS LOOK LIKE?
• The basic template for CSS code looks like this:
• Tag: {Property: value; Property2: value2}
• Tag - The element that will be affected
Property - What part of the selector will be affected
Value - How it will be affected

11. 11
Electronic Commerce;
Prof. Sheizaf Rafaeli
Cascading Style Sheets
(CSS)
•CSS overrides the browser's default settings
•A CSS declaration has two parts:
• a property (”font-size” or “color”)
and a value ( “10pt” or "red").
•The basic syntax of a rule
• selector {property 1: value 1; property 2: value: 2}
•Examples:
• P {font-size: 10pt; color: red}
• H1 {FONT-SIZE: 9pt; FONT-WEIGHT: bold}

12. 12
Electronic Commerce;
Prof. Sheizaf Rafaeli
CSS (3)
•Linked Global Local style sheet definitions.
• Local (inline) definitions replace the <FONT> definitions for typeface, font
size, color and margins, etc.
• Global (embedded) declarations are defined within <STYLE></STYLE> pairs,
usually in header.
• Linked (external) stylesheets use separate .css files, and link to them using :
• <link rel="stylesheet" href="style.css" type="text/css">

13. 13
Electronic Commerce;
Prof. Sheizaf Rafaeli
Types of CSS
• Inline:
<h3 style="font-weight: bold">this will be bold</h3>
• Embedded :
<HEAD>
<STYLE TYPE="text/css">
<!- -
Tag: {Property: value; Property2: value2}
- ->
</STYLE>
</HEAD>

14. 14
Electronic Commerce;
Prof. Sheizaf Rafaeli
Types of CSS
• External:
<HEAD>
<LINK REL="STYLESHEET" HREF="/PATH/SHEET.CSS
TYPE="TEXT/CSS">
</HEAD>
• The SHEET.CSS file would then contain all the style-sheet code which
would be applied to any page that calls it using the code above.

15. 15
Electronic Commerce;
Prof. Sheizaf Rafaeli
Short, sweet example
• REMOVE UNDERLINES
- A Complete Style Sheet
•Do you want to remove underlines from links on
your site? Below is a short and sweet style-sheet
that will do just that, just copy and paste it between
the <head></head> tags on your site:
• <STYLE TYPE="text/css">
<!- -
a { text-decoration: none}
- ->
</STYLE>

16. 16
Electronic Commerce;
Prof. Sheizaf Rafaeli
Full CSS example<html>
<style type="text/css">
<!--
h4 {font: 17pt Arial,Helvetica";
font-weight: bold;
color: maroon}
h2 {font: 15pt "Courier";
font-weight: bold; color: blue}
p {font: 12pt "Arial,Helvetica";
color: black}
-->
</style>
<body>
...
</body>
</html>
This is an example of the middle level
(“global” or “embedded” form of CSS.
Note how style code is hidden (as in
Javascript)
Note that fonts can be defined in
points, pixels, inches or centimeters.

17. 17
Electronic Commerce;
Prof. Sheizaf Rafaeli
CSS (4)
• Cascading or Inheritance: When conflicting, the more specific stylesheet
overrides.
• Units of Measure: see:
• http://www.hotwired.com/webmonkey/stylesheets/reference/units.html
• Attributes: layers of Class, ID, Span and DIV.
• Properties: see:
• http://www.hotwired.com/webmonkey/stylesheets/reference/css_prope
rties.html

18. 18
Electronic Commerce;
Prof. Sheizaf Rafaeli
CSS (5)
• W3C Cascading Style Sheets specs, at:
• http://www.w3.org/TR/WD-CSS2/
• Microsoft’s User’s Guide, at:
http://msdn.microsoft.com/workshop/author/css/css.asp
http://msdn.microsoft.com/workshop/design/layout/css-des.asp
• Examples, at:
• http://www.hotwired.com/webmonkey/stylesheets/reference/examples.html
• Microsoft’s CSS gallery, at: http://www.microsoft.com/truetype/

19. 19
Electronic Commerce;
Prof. Sheizaf Rafaeli
CSS (6)
•http://www.htmlgoodies.com/beyond/classid.ht
ml
•http://www.w3.org/Style/css/
•http://www.htmlhelp.com/reference/css/
•http://www.canit.se/%7Egriffon/web/writing_styl
esheets.html
•http://builder.cnet.com/Authoring/CSS/ss02.htm
l