07 - Web Technologies I - sti-innsbruck.at · 4 HTML & XHTML •W3C – Set Standards •Syntax •...

1

Web EngineeringWeb Technologies I

N 30 2009

© Copyright 2008 STI - INNSBRUCK www.sti-innsbruck.at

Nov 30 2009Katharina Siorpaes

Overview

• Introduction• HTML & XHTML• CSS• JavaScript• Wrap-up

Web Engineering 2

2

What are the basic ingredients to start to build a Web site

Web Engineering

INTRODUCTION

3

Basic Ingredients

• Content structuring (and “basic” presentation…)– (X)HTML

• Business logic (client side)– JavaScript

• Presentation– CSS

• … with these 3 elements you can start building nice (content static) interfaces for you web applications

Web Engineering

(content static) interfaces for you web applications

4

3

Standards or not Standards?

• XHTML and CSS are recommendation from W3C– XHTML 1.1 (2.0 is currently a draft)

htt // 3 /M kU /• http://www.w3.org/MarkUp/– CSS 2.1 (3.0 is under development)

• http://www.w3.org/Style/CSS/

• JavaScript is “not” a standard– This due to the fact also that at the beginning there was

some competition between Sun scripting language and Mircrosoft one

– An attempt of standardization was made by European

Web Engineering

An attempt of standardization was made by European Computer Manufacturers Association (ECMA), never completed (last version dates back to 1999)

– http://en.wikipedia.org/wiki/JavaScript

5

How to structure your content in a Web page

Web Engineering

HYPERTEXT MARKUP LANGUAGE

6

4

HTML & XHTML

• W3C– Set Standards

• Syntax• Functionality

• HyperText Markup Language (v4.01 – 1999)– Type of More General Language (SGML)– Describes Function of Text Using Codes

• Extensible HTML (v2.0 – 2004)St i t V i f HTML

Web Engineering

– Stricter Version of HTML– Integrate HTML with XML

7

HTML & XHTML

• HTML Advantages– Platform Portability– Speed (size of file)– Text File

• HTML Disadvantages– Rendering Differences– Extensions

• Proprietary Functionality Added by Browsers

Web Engineering

• XHTML Advantages– Resolve Issues with Different HTML Versions

8

5

Syntax

• Elements (Tags)– Codes that Control Content Appearance– Opening/Closing

• Two-Sided– <tagName>Content</tagName>

• One-Sided– <tagName />

– Lowercase

• Deprecated

Web Engineering

– Obsolete Elements or Syntax– Future Support Not Guaranteed

9

Syntax

• Comments– 

• 

• White Space– Does Not Render Multiple Spaces– Tab, Enter do not Render– Use Non-breaking Space

•

Attrib tes

Web Engineering

• Attributes– Controls Behavior or Appearance of Element

• <tagName attrib#1=“Value” attrib#2=“Value” />

10

6

<html>

• <html>…</html>– Surround All Markup & Text– Required – Used To Begin & End Every HTML Document

Web Engineering 11

<head>

• <head>…</head>– Contains the Document's Header Information– Required – Important Information

• Document Title• META Tags

– Text Included Does Not Render

Web Engineering 12

7

<body>

• <body>…</body>– Contains All Content to be Rendered

• Attributes– leftmargin=number

• Sets The Left Margin for Page

– topmargin=number• Sets the Top Margin for the Page

Web Engineering 13

<body>

• Styles– style=“color: colorName | #rrggbb | rgb(#,#,#);”

• Specifies the Color of the Regular Text

– style=“background-color: colorName | #rrggbb | rgb(#,#,#);”• Specifies the Background Color

– style=“background-image: url(filename.ext);”• Points to Location of Image that is Used as Background• Image is Tiled

Web Engineering 14

8

<body>

• Styles– style=“background-position: horizontal vertical;”

• Specifies the Positioning of the Background Image• Can Specify Keywords or Percentages

– style=“background-repeat: repeat | repeat-x | repeat-y | no-repeat;”

• Specifies the Tiling of the Background Image

– style=“background-attachment: scroll | fixed;”• Background Image Scrolls with Page or Acts as Watermark

Web Engineering 15

<h#>

• <h#>…</h#>– Create a Heading– Numbered from h1 through h6

• h1 is the Top Head Level While h6 is the Bottom

– Should not be Used for Text Formatting– Convey Page & Content Organization– Should be Used in Descending Order

• Stylet l “t t li l ft | t | i ht | j tif ”

Web Engineering

– style=“text-align: left | center | right | justify;”• Specifies the Alignment of the Heading Text

16

9

<p> & <br>

• <p>…</p>– Inserts Blank Line Before Tag

• Separates Paragraphs of Text

• <br />– Causes Text To Break Wherever Tag is Placed

Web Engineering 17

Lists

• <ul>…</ul>– Unordered List Renders a Bulleted List– Use Where Order or Rank is Unimportant

• Style– style=“list-style-type: disc | square | circle;”

• Changes Style of Bullet Before Item

– style=“list-style-image: url(filename.ext);” • Image Used as Bullet

Web Engineering 18

10

Lists

• <ol>…</ol>– Ordered List Tags Render a Numbered List

• Style– style=“list-style-type: decimal | upper-roman | upper-alpha |

. . .;” • Changes Number / Letter Style Before Item

– style=“list-style-position: inside | outside;” • Changes Wrapped Item Placement

Web Engineering 19

Lists

• <li>…</li>– Defines an Item in a List

• <dl>…</dl>– Definition List– <dt>…</dt>

• Defined Term

– <dd>…</dd>• Definition

Web Engineering 20

11

Block Level Elements

• <blockquote>…</blockquote>– Content Indented on Left & Right

• <pre>…</pre>– Retains All White Space– Uses Fixed Width Typeface

Web Engineering 21

Inline Elements

• <strong>…</strong> or <b>…</b>– Bold

• <em>…</em> or <i>…</i>– Italics

• <sub>…</sub>– Subscripted

• <sup>…</sup>– Superscripted

Web Engineering

Superscripted

22

12

Inline Elements

• <span>…</span>– Used for Applying CSS Classes

• Nesting– Placing Sets of Tags Within Each Other

• <b><i>…</i></b> instead of <b><i>…</b></i>

Web Engineering 23

<img>

• <img />– Inserts an Image Into a Document– Secondary to Content

• Attributes– alt=“text”

• Provides Alternative Text that Describes the Image• IE Displays ALT Text When User Hovers on Image

– Users Who Surf With Graphics Turned Off– Non-graphical Browsers

Web Engineering

» Alt Text is Displayed in Place of Image

• Required

24

13

<img>

• Attributes– height=“pixels”

• Specifies the Image's Height

– src=“URL”• Specifies Location of Image to Place in Web Page• Required

– width=“pixels”• Specifies the Image's Width

Web Engineering 25

<img>

• Style– style=“float: none | left | right;”

• Place Image on Left / Right & Wrap Text Around It

– style=“clear: none | left | right;”• Display Content After Margin is Clear of Floating Elements

– style=“margin: top# right# bottom# left#;”– style=“border-width: #;”

• Rendered in Designated Link Color if Image is a Link

Web Engineering 26

14

<hr>

• <hr />– Inserts Plain Line (Horizontal Rule) Across Page– Emphasize Divisions & Transitions In Content

• Style– style=“background-color: #RRGGBB | colorname;”– style=“color: #RRGGBB | colorname;”– style=“height: number;”– style=“width: number;”

Web Engineering 27

Special Characters

• & – Ampersand

• ©– Copyright

• ·– Bullet

• ®– Registered

Web Engineering

Registered

• ™– Trademark

28

15

<a>

• <a>…</a>– Used to Create Links to Other Resources– Named Anchor

• AKA Bookmark• Used to Name Specific Locations within a Page• id Attribute

– Defines Destination

Web Engineering 29

<a>

• Attributes– accesskey=“text”

• Character Used as Keyboard Shortcut to Activate Link

– coords=“X1, Y1, X2, Y2, etc.”• Coordinates that Define Hot Spot Shape in Image Map

– href=“URL”• Specifies Location of Linked Resource

– Typically Another HTML File– Can Also Specify Other Internet Resources

» Files, E-mail, FTP

Web Engineering

• Named Anchor or Bookmark URLs are Preceded By #

30

16

<a>

• Attributes– name=“text”

• Marks Specific Place Within an HTML Document• AKA Named Anchor or Bookmark

– rel=“text”• Indicates Relationship Between Documents

– rel=“stylesheet”» Tells Browser that Linked Document is a Style Sheet

– shape=“rect | circle | poly | default”• Specifies Shape of Hot Spot in Image Map

Web Engineering

Spec es S ape o o Spo age ap

31

<a>

• Attributes– title=“text”

• Provides Supplemental Information Regarding a Link– Behaves Like a Tooltip– Should be Less Than 60 Characters

Web Engineering 32

17

<a>

• Example<a href="http://www.mysite.com/">A link to a p ysite.</a>

< a href="#P5">A link to paragraph 5 in same document.</a><p>Paragraph 1</p><p>Paragraph 2</p>

Web Engineering

p Paragraph 2 /p<p>Paragraph 3</p><p>Paragraph 4</p><p id=“P5”>Paragraph 5 content.</p>

33

Paths

• URL (Uniform Resource Locator)– Location of Document on Web

• www.sti-innsbruck.at

• Path– Location of Document on Server

• http://www.sti-innsbruck.at/about/team/details/federico-michele-facca/

Web Engineering 34

18

Paths

• Absolute– Exact Location on Server

• Begins with a /– /student/index.htm

• Relative– Location Relative to Current Document

• Current — Nothing– page.htm

• Child — Separated by /images/background gif

Web Engineering

– images/background.gif• Parent — Two Periods (..)

– ../page.htm

35

URL

• http://www.sti-innsbruck.at/about/team/details.html– Communication Protocol

• http://

– Domain• www.sti-innsbruck.at

– Path • /about/team/

– Document• details.html

Web Engineering 36

19

Protocols

• Hypertext Transfer Protocol– Web Server– http://

• File Transfer Protocol– File Server– ftp://

• USENET– Newsgroup

Web Engineering

g p– <a href=“news:newsgroup.name”>Click Me</a>

37

Protocols

• E-Mail– Mailto

• <a href=“mailto:[email protected]”>Send Mail</a>

– Can Automatically Include Subject Line• “mailto:[email protected]?subject=text”

– Other Options• “mailto:[email protected][email protected]

&[email protected]&subject=subscribe&body=Send me your newsletter right away”

Web Engineering 38

20

<table>

• <table>…</table> – Structure to Control Page Layout– Structure to Contain & Align Content

• Attributes– border=“#”

• Sets Thickness of Borders Displayed for Table Cells• Attribute Set to 0 Will Make Borders “Invisible”

Web Engineering 39

<table>

• Attributes– cellpadding=“#”

• Specifies Amount of Space Between Cell & Content in Cell

– cellspacing=“#”• Specifies Amount of Space Between Cells

– frame=“above | below | border | box | hsides | lhs | rhs | void | vsides”

• Specifies Where Borders of Tables & Cells Appear

Web Engineering 40

21

<table>

• Attributes– height=“# | %”

• Specifies Height of Table in Pixels or Percentage of Window

– rules=“all | cols | groups | none | rows”• Specifies Where Gridlines Appear in a Table

– valign=“top | bottom | middle ”• Specifies Vertical Alignment of Text in Cells

– width=“# | %”• Specifies Width of Table in Pixels or Percentage of Window

Web Engineering 41

<colgroup>

• <colgroup>…</colgroup> – Defines Groups of Table Columns for Formatting– Only Valid Inside <table>

• Attributes– align=“left | center | right | justify | char”

• Specifies Horizontal Alignment of Contents in Column Group

– char=“character”• Specifies Character to Use to Align Text On

Web Engineering 42

22

<colgroup>

• Attributes– span=“#”

• Specifies Number of Columns <colgroup> Should Span

– valign=“top | middle | bottom | baseline”• Specifies Vertical Alignment of Contents in <colgroup>

– width=“# | %”• Specifies Width of Each Column in <colgroup>• 0* - Column Width Should be Minimum Width

Web Engineering 43

<col>

• <col /> – Defines One or More Columns of Table for Formatting– Only Valid Inside <table> or <colgroup>

• Attributes– align=“left | center | right | justify | char”

• Specifies Horizontal Alignment of Contents in Table Column

– char=“character”• Specifies Character to Use to Align Text On

Web Engineering 44

23

<col>

• Attributes– span=“#”

• Specifies Number of Columns the Column Should Span

– valign=“top | middle | bottom | baseline”• Specifies Vertical Alignment of Contents in Table Column

– width=“# | %”• Specifies Width of Column• 0* - Column Width Should be Minimum Width

Web Engineering 45

<tr> & <td>

• <tr>…</tr>– Defines a Row in a Table

• <td>…</td>– Defines Table Data (a Cell) in a Row

• Table Data Cells Must Only Appear Within Table Rows• Closing Tag Must Appear on Same Line as Content

– Otherwise Gapping May Occur

Web Engineering 46

24

<td>

• Attributes– colspan=“#”

• Specifies How Many Columns the Cell Overlaps

– rowspan=“#”• Specifies How Many Rows the Cell Overlaps

Web Engineering 47

<th> & <caption>

• <th>…</th>– Specifies the Table Header for a Row

• Identical to Table Data Cells Except:– Cells Contents are Bolded– Cells Contents are Centered

• <caption>…</caption>– Attaches a Caption to a Table

Web Engineering 48

25

Example

Web Engineering 49

How to make your Web page good looking

Web Engineering

CASCADE STYLE SHEET

50

26

History of CSS

• Initial Proposal for CSS – Released in 1994 by Hakon Lie of CERN

• World Wide Web Consortium (W3C)– Founded in 1994 as a Web Standards Organization

• CSS1 (’96) — 50 Properties– www.zvon.org/xxl/css1Reference/Output/index.html

• CSS2 (’98) — 70 Additional Properties– www.zvon.org/xxl/css2Reference/Output/index.html

Web Engineering

www.zvon.org/xxl/css2Reference/Output/index.html

51

CSS Basics

• Style Rules– Determines Style Characteristics for an HTML Element– Selector

• Determines Element to Which Rule is Applied

– Declaration• Details the Exact Property Values

– Property» Quality or Characteristic (e.g., Color)

– Value» Specification of Property (e.g., Blue)

Web Engineering

• Style Sheet– Set of Style Rules

52

27

CSS Basics

• Style Rule Syntax

Web Engineering 53

Combining CSS & HTML

• Inline– Modify the Appearance of a Particular Element

• Style Attribute

• Embedded– Applied To An Entire Document

• Redefines All Occurrences of a Particular Element– Uses <style>…</style> in <head>

• Linked

Web Engineering

Linked– External File of Declarations Available to an Entire Site

• ASCII File with an Extension of .css

54

28

Inline Style

• Defines a Style for a Single Element

– Generally Used to Override a Style Set at a Higher LevelGenerally Used to Override a Style Set at a Higher Level

– Only Affects One Instance of an Element

• Syntax

– <tag style=“property:value1; property:value2;”>

Web Engineering

<h1 style=“color:green; font-family:sans-serif;”>

<b style=“color:yellow; background-color:green;”>

55

Embedded Style

• Always Contained in the <head> – Generally Used to Override a Style Set at a Higher Level– Only Affects the Document in Which it Resides

• Syntax– selector {declarations}

<style type=“text/css”>h1 {color:green; font-family:sans-serif;}b {color:yellow; background-color:green;}

Web Engineering

</style>

56

29

Linked Style

• External Style Sheet– Always Contained in the <head>– Text Document that Contains Style Rules– Allows Specification of Rules for Multiple Documents– Does Not Contain HTML Code

• Syntax• <link rel=“stylesheet” href=“master.css” />

Web Engineering 57

Cascading

• Determines Which Rules are Assigned to Elements• Weight Assignment Based on Four Variables:g g

– Use of the !Important Keyword– Origin of the Rule– Specificity of the Selector– Order of the Rule in the Style Sheet

Web Engineering 58

30

Cascading

• Rule Weight with the !Important Keyword– Allows User to Override Author’s Style Setting

• For Particular Element

– Improves Accessibility of Documents • Gives Control to Users with Special Requirements

• Rule Weight by Origin– Cascading Order of Precedence:

1. Rules From Author’s Style Sheet

Web Engineering

1. Rules From Author s Style Sheet

2. Rules From User’s Style Sheet

3. Rules From Browser’s Style Sheet

59

Cascading

• Rule Weight by Specificity– Rules with More Specific Selectors Take Precedence Over

Rules with Less Specific Selectors

• Rule Weight by Order– Based on Order of Rule within Style Sheet

• Rules Listed Later Take Precedence Over Those Listed Earlier

Web Engineering 60

31

Inheritance

• Parent– Element that Contains Another Element

• Child– Element within Another Element

• Inheritance– CSS Rules Inherit from Parent to Child Elements

• Based on Hierarchical Structure of Documents

Web Engineering 61

Basic Selection

• Type Selectors– Selector Determines Element to which Declaration is

Applied– Style Sheet Examples:

• h2 {color: red;}• p {font-size: 10 pt;}

Web Engineering 62

32

Basic Selection

• Grouping Selectors– Set the Same Declaration for Multiple Selectors

• Syntax:• h1 {color: red;}• h2 {color: red;}or• h1, h2 {color: red;}

Web Engineering 63

Basic Selection

• Combining Declarations– Multiple Declarations May be Stated for Same Selector

• Syntax:• p {color: blue;}• p {font-size: 12pt;}or• p {color: blue; font-size: 12pt;}

Web Engineering 64

33

Basic Selection

• Descendant Selector– AKA Contextual Selectors– Based on Hierarchical Structure of Elements in Document

• Syntax:– b i {color: #336699; background-color: #000000;}– Does Not Apply to i b

Web Engineering 65

Advanced Selection

• id Attribute Selector– Applied to Only ONE

Unique Element in aUnique Element in a Document

– Core Attribute that can be Applied to Any HTML Element

Web Engineering• Syntax:

34

Advanced Selection

• class Attribute Selector– Enables Application of Rule to Selected Element(s)– Core Attribute that can be Applied to Any HTML ElementCore Attribute that can be Applied to Any HTML Element

• Syntax:

Web Engineering

Syntax:<p class=“quote”>Text in red with a 30 pixel margin</p>– May be Restricted to a Specific Element Type

h1.quote {color: red; margin: 30px;}

67

Advanced Selection

• <div>…</div>– Block Level Element – Used to Contain Other HTML Elements– Displayed Discretely from the Rest of the Document

• Paragraph Breaks Added Before and After <div> Contents

• <span>…</span>– Inline Element– Used to Contain Other HTML Elements

U d ithi T t Bl k

Web Engineering

– Used within Text Blocks

68

35

Advanced Selection

• Pseudo-Class Selectors– Select Elements Based on Characteristics Other Than

Name– Link Pseudo-Classes

• :link– Allow Modification of Style Characteristics for Unvisited Links

:link {color: green;}• :visited

– Allow Modification of Style Characteristics for Visited Links:visited {color: green;}

Web Engineering 69

Advanced Selection

• Pseudo-Class Selectors– Dynamic Pseudo-Classes

• Apply Styles to an Element Based on User’s Actions• :hover

– Applies Style When User Mouses Over Element• :active

– Applies Style When User Activates Element• :focus

– Applies Style When Element is Accepting User Input

Web Engineering 70

36

Advanced Selection

• Pseudo-Elements Selectors– Modify Aspects of Document Not Classified by Elements– :first-letter

• Apply Style Rules to the First Letter of Any Block-level Element– Initial Capitals– Drop Capitals

Web Engineering 71

Advanced Selection

• Pseudo-Element Selectors

:first letter– :first-letter

Web Engineering

37

Advanced Selection

• Pseudo-Element Selectors

– :first-line

• Apply Style Rules to the First Line of Any Block-level Element

Web Engineering 73

Advanced Selection

• Child Selector– >

• Apply Style Rules to Child Elements of Any Parentdiv > blockquote {font-weight: bold;}

Web Engineering 74

38

Advanced Selection

• First Child– :first-child

• Apply Style Rules to the First Child Element of a Parentdiv > p:first-child {font-weight: bold;}

Web Engineering 75

Advanced Selection

• Adjacent Sibling– +

• Apply Style Rules to – Elements that Share the Same Parent– Are Adjacent in the Code

Web Engineering 76

39

Fonts

• Measurement Units

– Absolute Units

• Specify a Fixed Value

• Cannot be Scaled to Client Display

– Use Only When Measurements of User Medium are Known

– Relative Units

• Enables Scalable Web Pages

Web Engineering

– Adapt to Different Display Types & Sizes

– Recommended Method for Web Page Design

77

Fonts

• Measurement Units

Web Engineering 78

40

Font Propertiess

• Styles– style=“font-family: fonts;”

• Allows Specification of Font Family Names• Generic Font Families

– Allows Greater Portability Across Platforms– Serif → Traditional Letter Form (e.g., Times)– Sans-serif → Block Letters, Have no Serifs (e.g., Arial)– Monospace → Fixed-width

» Every Letter has Same Horizontal Width– Cursive → Resembles Handwriting (Limited Support)– Fantasy → Primarily Decorative (Limited Support)

Web Engineering

y y ( pp )

79

Font Properties


• Specific Font Families– Allows Specification of Particular Font-family

» Garamond, Impact– User Must Have Font Installed on Machine

» If not, Browser Will Supply Default

• Example:<p style=“font-family: arial;”>

Web Engineering 80

41

Font Properties


• Specifying Font Substitution– Allows Specification of Alternate Fonts

» Uses Comma Separated List– Browser Scans List for First Installed Font

» Otherwise, Browser Supplies Default– Generic Font-family Names can be Used

• Example:<p style=“font-family: verdana,arial,helvetica,sans-serif;”>

Web Engineering 81

Font Properties

• Styles– style=“font-size: size | keyword | %;”

Ab l t K d• Absolute Keywords– xx-small– x-small– small– medium– large– x-large– xx-large

Web Engineering

42

Font Properties

• Styles– style=“font-size: size | keyword | %;”

• Relative Keywords– Smaller | Larger– Example

» Parent Element’s Size is Large» Current Element’s Size is Set to Larger» Result is that the Current Font Size will be X-large

• Percentage– Example

» 50%, 150%, 200%

Web Engineering

Font Properties

• Styles– style=“font-style: normal | italic | oblique;”– style=“font-variant: normal | small-caps;”– style=“font-weight: normal | bold | bolder | lighter | #;”

• # = 100 – 900 in Increments of 100• 400 = Normal• 700 = Bold

Web Engineering

43

Font Properties

• Font Shortcut– Allows Specification of Properties in a Single Statement– Font-size & Font-family Required

• Must be in Order

– Line-height Must be Preceded by /

• Example:– <p style=“font: 18pt/24pt arial bold;”>

Web Engineering 85

Text Properties

• Styles– style=“line-height: # | %;”

AKA L di• AKA Leading

– style=“letter-spacing: normal | #;”

• AKA Kerning

– style=“word-spacing: normal | #;”

• AKA Tracking

Web Engineering

46

Box Model

• Describes Rectangular Boxes that Contain Content– Each Block-level Element is Displayed as a Box– Each Content Box can have Margins, Borders, & Padding

Web Engineering 91

Margin Properties

• margin: # | %– Shorthand Property Sets All Four Individual Margins

Web Engineering

48

Border Properties

• border: style width color

Shorthand Property Sets All Four Individual Borders– Shorthand Property Sets All Four Individual Borders

• Same Format as Margin

Web Engineering

Border Properties

• border-style: keyword– Keywords

• none• dotted • dashed• solid• double• groove• ridge

i t

Web Engineering

• inset • outset

50

Special Box Properties

• float & clear

Web Engineering

Background Properties

• background-color: colorname | #

Web Engineering

51


• background-image: url(imagename.gif)

Web Engineering


• background-repeat: repeat | repeat-x | repeat-y | no-repeat

Web Engineering

52


• background-position: % | length | keyword

Web Engineering


• background-attachment: scroll | fixed

Web Engineering

53

List Properties

• list-style-type: disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lo er greek | lo er alpha | lo er latin | pper alphalower-greek | lower alpha | lower-latin | upper-alpha | upper-latin | hebrew | armenian | georgian | cjk-ideographic | hiragana | katakana | hira-ganairoha | katakana-iroha | none– Default = disc– Allows Customization of the List Marker

• Syntax:

Web Engineering

• Syntax:ul {list-style-type: circle;}

105

List Properties

• list-style-type

Web Engineering

54

List Properties

• list-style-image: url(filename.ext)– Allows Use of Image as List Marker

• Syntax:ul {list-style-image: url(paw.gif);}

Web Engineering 107

List Properties

• list-style-position: inside | outside

– Default = inside

– Allows Placement of the List Marker

• Syntax:

Web Engineering

ul {list-style-position: outside;}

108

55

Positioning Properties

• position: type position size

– type = static | relative | absolute | fixed

– position = top | left | bottom | right

– size = height | width

Web Engineering 109


• div {position:absolute; left:130px; top:100px;}

Web Engineering

56


• div {position:absolute; left:130px; top:100px; width: 100px;}

Web Engineering


• visibility: visible | hidden

– Specifies Whether an Element is Displayed or Hidden

• z-index: auto | #

– Specifies an Element’s Stacking Level

Web Engineering 112

57

Example

Web Engineering 113

How to add some business logic to your Web page

Web Engineering

JAVASCPRIPT

114

58

What’s a Scripting Language?

• Language used to write programs that compute inputs to another language processor– One language embedded in another

• Embedded JavaScript computes HTML input to the browser• Shell scripts compute commands executed by the shell

• Common characteristics of scripting languages– String processing – since commands often strings– Simple program structure, define things “on the fly”

Flexibility preferred over efficiency safety

Web Engineering

– Flexibility preferred over efficiency, safety• Is lack of safety a good thing? (Example: JavaScript used for Web

applications…)

JavaScript History

• Developed by Brendan Eich at Netscape – Scripting language for Navigator 2

• Later standardized for browser compatibility– ECMAScript Edition 3 (aka JavaScript 1.5)

• Related to Java in name only– Name was part of a marketing deal

• Various implementations available– SpiderMonkey C implementation (from Mozilla)

Web Engineering

SpiderMonkey C implementation (from Mozilla)– Rhino Java implementation (also from Mozilla)

59

Common Uses of JavaScript

• Form validation• Page embellishments and special effectsg p• Navigation systems• Basic math calculations• Dynamic content manipulation• Sample applications

– Dashboard widgets in Mac OS X, Google Maps, Philips universal remotes Writely word processor hundreds of

Web Engineering

universal remotes, Writely word processor, hundreds of others…

Example 1: Add Two Numbers

<html>…

<p> </p><p> … </p><script>

var num1, num2, sumnum1 = prompt("Enter first number")num2 = prompt("Enter second number")sum = parseInt(num1) + parseInt(num2)alert("Sum = " + sum)

/ i t

Web Engineering

</script>…

</html>

60

Example 2: Browser Events

<script type="text/JavaScript">function whichButton(event) {if (event button==1) {

Mouse event causes page-defined function to be calledif (event.button==1) {

alert("You clicked the left mouse button!") }else {

alert("You clicked the right mouse button!") }}

</script>…

b d d " hi hB tt ( t)"

to be called

Web Engineering

<body onmousedown="whichButton(event)">…</body>

Example 3: Page Manipulation

• Some possibilities– createElement(elementName)– createTextNode(text)– appendChild(newChild)– removeChild(node)

• Example: add a new list itemvar list = document.getElementById('t1')var newitem = document.createElement('li')

Web Engineering

var newtext = document.createTextNode(text)list.appendChild(newitem)newitem.appendChild(newtext)

61

Language Basics

• JavaScript is case sensitive– onClick, ONCLICK, … are HTML, thus not case-sensitive

• Statements terminated by returns or semi-colons – x = x+1; same as x = x+1

• “Blocks” of statements enclosed in { …}• Variables

– Define using the var statement– Define implicitly by its first use, which must be an

Web Engineering

Define implicitly by its first use, which must be an assignment

• Implicit defn has global scope, even if occurs in nested scope!

JavaScript Primitive Datatypes

• Boolean: true and false• Number: 64-bit floating pointg p

– Similar to Java double and Double – No integer type – Special values NaN (not a number) and Infinity

• String: sequence of zero or more Unicode chars– No separate character type (just strings of length 1)– Literal strings using ' or " characters (must match)

Web Engineering

g g ( )

• Special objects: null and undefined

62

Objects

• An object is a collection of named properties• Think of it as an associative array or hash tabley

– Set of name:value pairs• objBob = {name: “Bob", grade: 'A', level: 3};

– Play a role similar to lists in Lisp / Scheme

• New members can be added at any time• objBob.fullname = 'Robert';

• Can have methods

Web Engineering

• Can refer to this

Functions

• Functions are objects with method called “( )”– A property of an object may be a function (=method)

• function max(x,y) { if (x>y) return x; else return y;};• max.description = “return the maximum of two arguments”;

– Local declarations may appear in function body

• Call can supply any number of arguments– functionname.length : # of arguments in definition– functionname.arguments.length : # arguments in call

Basic types are passed by value objects by reference

Web Engineering

– Basic types are passed by value, objects by reference

• “Anonymous” functions – (function (x,y) {return x+y}) (2,3);

63

Examples of Functions

• Curried functions• function CurriedAdd(x) { return function(y){ return x+y} };

C i dAdd(2)• g = CurriedAdd(2);• g(3)

• Variable number of argumentsfunction sumAll() {

var total=0;for (var i=0; i< sumAll.arguments.length; i++)

total+=sumAll.arguments[i];return(total); }

Web Engineering

return(total); }sumAll(3,5,3,5,3,2,6)

Anonymous Functions

• Anonymous functions very useful for callbacks– setTimeout(function() { alert("done"); }, 10000)– Evaluation of alert("done") delayed until function call

• Simulate blocks by function definition and callvar u = { a:1, b:2 }var v = { a:3, b:4 }(function (x,y) {

var tempA = x.a; var tempB =x.b; // local variables

Web Engineering

x.a=y.a; x.b=y.b; y.a=tempA; y.b-tempB

}) (u,v) // Works because objs are passed by ref

64

Basic Object Features

• Use a function to construct an object– function car(make model year) {function car(make, model, year) {

this.make = make; this.model = model; this.year = year; }

• Objects have prototypes, can be changed– var c = new car(“Ford”,”Taurus”,1988);– car.prototype.print = function () {

Web Engineeringslide 127

car.prototype.print function () {return this.year + “ “ + this.make + “ “ + this.model;}

– c.print();

JavaScript in Web Pages

• Embedded in HTML page as <script> element– JavaScript written directly inside <script> element

• <script> alert("Hello World!") </script>

– Linked file as src attribute of the <script> element• <script type="text/JavaScript" src=“functions.js"></script>

• Event handler attribute• <a href="http://www.yahoo.com " onmouseover="alert('hi');">

• Pseudo-URL referenced by a link• <a href=“JavaScript: alert(‘You clicked’);”>Click me</a>

Web Engineering

<a href JavaScript: alert( You clicked ); >Click me</a>

65

Language Features in This Class

• Stack memory management– Parameters, local variables in activation records

• Garbage collection• Closures

– Function together with environment (global variables)

• Exceptions• Object features

Dynamic lookup encapsulation subtyping inheritance

Web Engineering

– Dynamic lookup, encapsulation, subtyping, inheritance

• Concurrency

JavaScript eval

• Evaluate string as code– The eval function evaluates a string of JavaScript code, in

scope of the calling codevar code = "var a = 1";eval(code); // a is now '1‘var obj = new Object(); obj.eval(code); // obj.a is now 1

Web Engineering slide 130

66

Unusual Features of JavaScript

• Eval, run-time type checking functions• Support for pattern matching (reg. expressions)pp p g ( g p )• Can add methods to an object• Can delete methods of an object

– myobj.a = 5; myobj.b = 12; delete myobj.a;

• Iterate over methods of an object– for (variable in object) { statements }

Web Engineering

Example

Web Engineering 132

67

That’s almost all for day…

Web Engineering

WRAP-UP

133

Things to keep in mind(or summary)

• XHTML for content structure• CSS for presentationp• JavaScript for client side logic

Web Engineering 134

68

Bibliography

• Mandatory reading– XHTML Specification

• http://www.w3.org/TR/xhtml11/

– CSS Specification• http://www.w3.org/TR/CSS2/

– JavaScript reference• http://www.w3schools.com/jsref/default.asp

Web Engineering 135

Validation Tools

• XHTML– http://validator.w3.org/

• CSS– http://jigsaw.w3.org/css-validator/

• JavaScript Debugger (for Mozilla)– https://addons.mozilla.org/en-US/firefox/addon/216

Web Engineering 136

69

Next Lecture

# Date Title Lecturer

1 7th Oct Web Engineering Introduction and Overview F. M. Facca

2 14h Oct Collection Requirements for Web Applications F. M. Facca

3 21st Oct Web Application Modeling F M Facca3 21st Oct Web Application Modeling F. M. Facca

4 28th Oct Developing Applications with WebML F. M. Facca

5 4th Nov Web Application Architectures I F. M. Facca

6 11th Nov Web Application Architectures II F. M. Facca

7 18th Nov Testing and Usability on the Web F. M. Facca

8 25th Nov Mid Term Exam F. M. Facca

9 2nd Dec Web Technologies I F. M. Facca

10 9th Dec Web Technologies II F. M. Facca

Web Engineering 137

11 6th Jan Web Technologies III F. M. Facca

12 13th Jan Web 2.0 Mash-ups F. Daniel (UNITN)

13 20th Jan Web Application Development Process/Project Management for Web Applications

F. M. Facca

14 27th Jan Final Exam F. M. Facca

Questions?

Web Engineering 138

07 - Web Technologies I - sti-innsbruck.at · 4 HTML & XHTML •W3C – Set Standards •Syntax •...

Documents

Transcript of 07 - Web Technologies I - sti-innsbruck.at · 4 HTML & XHTML •W3C – Set Standards •Syntax •...