Scribd
Upload
60 views

PW 01 Introduction To Web Technologies

Pengenalan tentang pemrograman web bahasa indonesia, ini file pertemuan pertama pada mata kuliah Pemrograman Web

Uploaded by

Irfan Celestial Exalted
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
60 views

PW 01 Introduction To Web Technologies

Pengenalan tentang pemrograman web bahasa indonesia, ini file pertemuan pertama pada mata kuliah Pemrograman Web

Uploaded by

Irfan Celestial Exalted
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 34

Web Programming

Pre-01A Web Programming Technologies


Aryo Pinandito, ST, M.MT

Document Formats: The evolution of


HTML

HTML
HyperText Markup Language
Primary document type for the web

Transmitted using the HyperText Transfer Protocol


Client sends request string (with parameters)
Server returns a document

Stateless protocol

Describes document content and structure

Precise formatting directives added later


Content and structure in same document

Browser or formatter responsible for rendering

Can partially render malformed documents


Different browsers render differently

HTML structure
HTML document is a text based representation of a
tree of tags

General structure:
<OUTERTAG attribute1=val1 attribute2=val2>
<INNERTAG attribute3=val3>some text</INNERTAG>
</OUTERTAG>

HTML evolution
HTML 1 [early '90s]

Invented by Tim Berners-Lee of CERN

Aimed as standard format to faciliate collaboration between


physicists

Based on the SGML framework

Old ISO standard for structuring documents

Tags for paragraphs, headings, lists, etc.

HTML added the hyperlinks, thus creating the web

Rendered on prototype formatters

HTML evolution
HTML+ [mid '94]
First W3 conference [5/94]

HTML+ presented

HTML 2 [7/94-11/95]
HTML 3.0 draft proposed [95]
HTML 3.2 [1/97]
HTML 4 [12/97]

Stylesheet support
<object> tag for multimedia and embedded objects

Adapted by IE (market leader)

Slow adaptation by Netscape

XML 1.0 standard [2/98]


XHTML 1.0 [1/00, 8/02]
XHTML 1.1

HTML5

HTML5: What's New?

New Structures

More Semantics

More Elements
More Attributes
Supports Dynamic Pages
Tags that break usability
become obsolete.
3D with Web GL
Coupled with CSS3
SVG
WOFF

Limitations of HTML
No support for accessibility until HTML 4
No support for internationalization until HTML 4
No dynamic content in original definition
No inherent support for different display
configurations (e.g., grayscale screen)

Except for alt tag for images


Added in CSS2

No separation of data, structure and formatting

Until version 4
With HTML5 web has become more dynamic

Other Document Formats?

Wireless Markup Language (WML)

Markup language for WAP browsers

WAP = Wireless Application Protocol


Based on limited HTML, uses XML notation
Uses WMLScript scripting language, based on JavaScript

A page is called a "deck", displayed in individual


sections called "cards"

11

Tasks are used to perform events


Variables used to maintain state between cards

JSON (JavaScript Object Notation)

A lightweight format that is used for data interchanging.


It is also a subset of JavaScript's Object Notation (the way
objects are built in JavaScript)

{
"firstName": "John",

"lastName": "Smith",
"address": {
"streetAddress": "21 2nd Street",
"city": "New York",
"postalCode": 10021

},
"phoneNumbers": [
"212 555-1234","646 555-4567"
]
}

Extensible Markup Language (XML)

A markup language that defines a set of rules for


encoding documents in a format that is both humanreadable and machine-readable.

<?xml version="1.0" encoding="utf-8" ?>


<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>

Client-side: Cascading Style Sheets

Why CSS?

HTML was not meant to support styling information

But browsers started supporting inline style changes to


make web look better

Inline styling information is problematic

15

Difficult to change
Lack of consistency
No support for different display formats
Bloats pages
No support for some styling features

Connecting HTML to CSS


HTML document typically refers to external
style sheet

<HEAD>
<LINK rel="stylesheet" type="text/css
href="fluorescent.css">
</HEAD>

Style sheets can be embedded:

<HEAD><STYLE type="text/css">
<!-- CSS DEFINITIONS.. -->
</STYLE></HEAD>

16

Connecting HTML to CSS

Styles can be embedded inline with the style attribute


Style sheets can be chosen by media type

Simply add a media attribute to the link or style tags


Choose from: screen, tty, tv, projection, handheld, braille, aural, all

HTML document can provide several stylesheet options

Give titles to each stylesheet


One preferred (default) style, the rest are alternates

e.g., http://www.w3.org/Style/Examples/007/alternatives.html

Default configuration in internal browser stylesheet and


user stylesheet

17

Style sheet structure

Declaration gives value to property

Styles are applied to selectors

Property: value
e.g., color: red
Selector describes element
Simplest form is tag type
e.g., P {color:red; font-size: 16px}

Style sheet is a series of style applications

Can import other stylesheets

@import url(corestyles.css);
BODY {color: red; background-color: black}

Style of enclosing element is inherited by enclosed

18

Selectors

Type selectors

Pseudo-class

Specific subset of an HTML elements


e.g., :link, :visited, :active for the A tag

Pseudo-element

Name of HTML elements

Specific subset of any element


e.g., :first-line, :first-letter

Context sensitive elements

19

e.g., H2 I {color:green}

Selectors

Element classes

HTML document can classify tags


e.g., <P class=warning></P>
Can refer to element type with specific class
e.g., P.warning {color:red}
Can refer to all elements with specific class
e.g., .warning {color:red}
Use HTML tags <div> and <span>

Element IDs

20

HTML entity can have a unique id attribute


e.g., <P id=copyright></P>
#copyright {color:blue}

Cascading

Most properties are inherited

From enclosing element to internal element

Sort order for conflict resolution:

21

Origin (page>user>browser)
Weight (!important symbol allows overriding)
Specificity
Order

How is CSS applied?


1.

2.
3.
4.
5.
6.

22

Source document is parsed into a DOM tree


Media type is identified
Relevant stylesheets obtained
DOM tree annotated with values to every property
Formatting structure generated
Formatting structure presented (rendered)

CSS2

Extends CSS1

Many new properties and built-in classes


Better support for media types

Better support for accessibility

23

Stylesheet can specify type in selector


Properties for aural rendering

Better support for internationalization

CSS3

CSS3

Extends CSS2

Rounded corners
Border images
Shadows
Improved Backgrounds
Transformations

Rotate, Translate, Skew, Scale

Transitions
Animations
Font-faces

Client Side:
Scripting Languages
JavaScript, VBScript, DHTML

JavaScript

The most common scripting language

Typically embedded in HTML page

Executable computer code within the HTML content


Interpreted at runtime on the client side

Can be used to dynamically manipulate an HTML


document

Originally supported by Netscape, eventually by IE

Has access to the documents object model


Can react to events
Can be used to dynamically place data in the first place
Often used to validate form data

Weak typing

27

JavaScript Syntax

Code written within <script> element

e.g., <script type="text/javascript">


document.write("Hello World!")
</script>
Use src attribute for scripts in external files

Placement determines execution time

Scripts in header must be invoked explicitly

28

e.g., during events

Scripts in body executed when that part is being


processed.

JavaScript Syntax

User can declare variables

User can declare functions

function func(argument1,argument2,)
{ some statements }

Function can return values with return

Standard conditionals

e.g., var name = user;


Variables can be global to the page

if..then..else, switch, ?: operator

Standard loops

29

while, do..while, for

JavaScript Syntax

JavaScript has built-in "Object" types

Variety of operators and built-in functions


Arrays, Booleans, Dates, Math, Strings

Direct access to the HTML DOM model


HTML Elements have script-specific event attributes

30

e.g., <body onmousedown="whichButton()">


e.g., <input type="button" onclick="uncheck()"
value="Uncheck Checkbox">

VBScript

Microsoft's answer to JavaScript

Never been supported by Netscape


Less in use now

Use <script type="text/vbscript">


Similar to JavaScript

Follows Visual Basic look and feel


Possible to declare variables

31

Use option explicit to force declaration

Separates procedures and functions

DHTML

DHTML is a marketing buzzword

32

It is not a W3C standard


Every browser supports different flavour
It is HTML 4 + CSS stylesheets + scripting language with
access to document model

Questions?

Grazias Kiitos
Danke Gratias

Terima Kasih
Merci

Thank You

You might also like