Clientside programming DHTML Cookies DHTML Dynamic HTML Use

DHTML = Dynamic HTML Use CSS and Java. Script to dynamically change objects on

Positioning objects Various ways to position objects in HTML - using CSS-P (CSS positioning).

Let us analyze this html 5 code fragment <!DOCTYPE html> <head> <meta charset="utf-8" >

Code cont… <nav> <h 3>Nav</h 3> <a href="http: //www. example. com">Link 1</a> <a href="http:

Code cont…. . <h 1>Article Header</h 1> </header> <p>HTML 5: “Let those who are

Now lets look at the CSS script that can work on it body {

CSS cont… header h 2 { margin: 0 px; } h 1 { font-size:

CSS cont… h 4 { color: #F 47 D 31; background-color: #fff; -webkit-box-shadow: 2

CSS cont… nav a: link, nav a: visited { display: block; border-bottom: 3 px

CSS cont… #container { background-color: #888; } section { display: block; width: 50%; float:

article { background-color: #eee; display: block; margin: 10 px; padding: 10 px; -webkit-border-radius: 10

CSS cont… article header { -webkit-border-radius: 10 px; -moz-border-radius: 10 px; padding: 5 px;

aside { display: block; width: 25%; float: left; } aside h 3 { margin:

footer { clear: both; display: block; background-color: #F 47 D 31; color: #FFFFFF; text-align:

a{ color: #F 47 D 31; } a: hover { text-decoration: underline; }

BIT 3100 Web Design & Development Cascading Style Sheets (CSS)

Selector Type Tag redefines the look of a specific tag E. g. body {background-color:

Values - Lenghts Lengths [a number + unit identifier] Unit identifier can be em

Values – Percentages & URIs Percentages [a number + %] p { line-height: 120%

Values - Colors A color is either a keyword (e. g. white, red), or

Values - Colors 16 original predefined color codes (names) http: //www. cs. pitt. edu/~mehmud/cs

Values - Strings String Sequence of characters written inside double quotes ("") or single

Box Properties margin : <length> border : <style> <width> <color> padding : <length> width

Text Properties font-family : <font name>, | <font name>, … font-size : <length> |

Text Properties Practice Create a paragraph text Create internal style for <p> tag as

Text Properties Practice Color is #666666; font-family is Arial, Helvetica, sans-serif; font-indent is 20%;

Positioning Properties height : <length> | <percentage> | inherit width : <length> | <percentage>

Values for position property Value Description static Default. An element with position: static always

Positioning Properties A floated box is shifted to the left or right until its

Positioning Properties Practice – thumbnail image Create a table with only one cell Insert

List Properties list-style: [disc | circle | square | decimal | lowerroman | upper-roman

List Properties Difference between inside and outside Outside

Background Properties background-color: <color> | transparent | inherit background-image: <uri> | none | inherit

Background Properties Practice body { background-image: url(http: //www. cs. pitt. edu/~mehmud/imag e/bgd. png); background-repeat:

<div> and <span> tags <div> is a generic block-level tag <span> is a generic

<title> tag <title>: defines the title of the document. Placed between <head> and </head>

Adding style We can specify a CSS rule for just that section, using its

Making it move We can modify stylesheet property values from within Java. Script: mybit.

Jump Example <script. . > In head In body function jump() { mybit. style.

Moving across the screen We can keep adding a little to the positions, until

Summary: DHTML Can manipulate position and properties of bits of HTML using Java. Script.

Cookies allow web site providers to store and retrieve small bits on information on

Cookies You will have a cookie file (stored somewhere) holding everything any site has

Cookies in Java. Script Can set and read cookies using Java. Script. Example: function

Cookies in Java. Script Later want to read this cookie to find user name.

Cookie Demo In general to read/write cookies you should copy standard Read. Cookie and

Cookie Issues Not everyone likes cookies: privacy. Legal issues (data protection). Users may need

Summary: Cookies Used to store small bits of data about user, on THEIR machine.

Summary Java. Script used to add interactivity to page. Use event handlers to detect

Slides: 53

Download presentation

Client-side programming DHTML Cookies

DHTML = Dynamic HTML Use CSS and Java. Script to dynamically change objects on web page: Format text content position of objects content of objects properties of objects (e. g. , color) This requires that we can specify, and change position of objects.

Positioning objects Various ways to position objects in HTML - using CSS-P (CSS positioning). We create sections (divisions) in our HTML, which will have a position and size on screen. We use CSS to specify the position and size.

Let us analyze this html 5 code fragment <!DOCTYPE html> <head> <meta charset="utf-8" > <title>HTML 5</title> <link rel="stylesheet" href="html 5. css"> </head> <body> <header> <h 1>Header</h 1> <h 2>Subtitle</h 2> <h 4>HTML 5 Rocks!</h 4> </header> <div id="container">

Code cont… <nav> <h 3>Nav</h 3> <a href="http: //www. example. com">Link 1</a> <a href="http: //www. example. com">Link 2</a> <a href="http: //www. example. com">Link 3</a> </nav> <section> <article> <header> <h 1>Article Header</h 1> </header> <The quick brown fox jumped over the lazy dog. Misery is missing the flight and beyond misery is falling out of the flight. </p> <True heroes are not people who think about doing the right thing but people who do the right thing without thinking. </p> <footer> <h 2>Article Footer</h 2> </footer> </article> <header>

Code cont…. . <h 1>Article Header</h 1> </header> <p>HTML 5: “Let those who are blessed with the power and soaring swiftness of an eagle fly ahead, I will go slowly but I will also get there. </p> <footer> <h 2>Article Footer</h 2> </footer> </article> </section> <aside> <h 3>Aside</h 3> <p>HTML 5: “The battle is not won by the strong nor the race to the swift nor does food come to the rich, but time and chance happen to them all. </p> </aside> <footer> <h 2>Footer</h 2> </footer> </div> </body> </html>

Now lets look at the CSS script that can work on it body { background-color: #CCCCCC; font-family: Geneva, Arial, Helvetica, sans-serif; margin: 0 px auto; max-width: 900 px; border: solid; border-color: #FFFFFF; } header { background-color: #F 47 D 31; display: block; color: #FFFFFF; text-align: center; }

CSS cont… header h 2 { margin: 0 px; } h 1 { font-size: 72 px; margin: 0 px; } h 2 { font-size: 24 px; margin: 0 px; text-align: center; color: #F 47 D 31; } h 3 { font-size: 18 px; margin: 0 px; text-align: center; color: #F 47 D 31; }

CSS cont… h 4 { color: #F 47 D 31; background-color: #fff; -webkit-box-shadow: 2 px 20 px #888; -webkit-transform: rotate(-45 deg); -moz-box-shadow: 2 px 20 px #888; -moz-transform: rotate(-45 deg); position: absolute; padding: 0 px 150 px; top: 50 px; left: -120 px; text-align: center; } nav { display: block; width: 25%; float: left; }

CSS cont… nav a: link, nav a: visited { display: block; border-bottom: 3 px solid #fff; padding: 10 px; text-decoration: none; font-weight: bold; margin: 5 px; } nav a: hover { color: white; background-color: #F 47 D 31; } nav h 3 { margin: 15 px; color: white; }

CSS cont… #container { background-color: #888; } section { display: block; width: 50%; float: left; }

article { background-color: #eee; display: block; margin: 10 px; padding: 10 px; -webkit-border-radius: 10 px; -moz-border-radius: 10 px; -webkit-box-shadow: 2 px 20 px #888; -webkit-transform: rotate(-10 deg); -moz-box-shadow: 2 px 20 px #888; -moz-transform: rotate(-10 deg); }

CSS cont… article header { -webkit-border-radius: 10 px; -moz-border-radius: 10 px; padding: 5 px; } article footer { -webkit-border-radius: 10 px; -moz-border-radius: 10 px; padding: 5 px; } article h 1 { font-size: 18 px; }

aside { display: block; width: 25%; float: left; } aside h 3 { margin: 15 px; color: white; } aside p { margin: 15 px; color: white; font-weight: bold; font-style: italic; }

footer { clear: both; display: block; background-color: #F 47 D 31; color: #FFFFFF; text-align: center; padding: 15 px; } footer h 2 { font-size: 14 px; color: white; } /* links */

a{ color: #F 47 D 31; } a: hover { text-decoration: underline; }

BIT 3100 Web Design & Development Cascading Style Sheets (CSS)

Selector Type Tag redefines the look of a specific tag E. g. body {background-color: #000000; } Class can apply to any tag E. g. . indent{margin-right: 5%; margin-left: 5%; } In HTML, <p class=“indent”> Advanced IDs, pseudo-class selectors E. g. #my. Id {color: #38608 A; }

Values - Lenghts Lengths [a number + unit identifier] Unit identifier can be em (font size of the relevant font), ex (x-height of the relevant font), px (pixels), in (inches), cm (centimeter), mm, pt (points, =1/72 in), pc (picas, 1 pc = 12 pt) E. g. h 1 { margin: 0. 5 em }, h 1 { margin: 1 ex }, p { font-size: 12 px }, h 2 { line-height: 3 cm }, h 4 { font-size: 12 pt }, h 4 { font-size: 1 pc }

Values – Percentages & URIs Percentages [a number + %] p { line-height: 120% } URLs & URIs url(“<A URI/URL>”), or url(<A URI/URL>) li { list-style: url(http: //www. cs. pitt. edu/~mehmud/image/bull et 2. jpg) disc } body { background: url("yellow. png") } where, “yellow” is relative to the URI of the style sheet.

Values - Colors A color is either a keyword (e. g. white, red), or a numerical RGB specification (e. g. ). A numerical RGB specification can be: An RGB value in hexadecimal notation, which is a ‘#’ immediately followed by a 6 digit or 3 digit hexadecimal number, i. e. #rrggbb or #rgb. E. g. #ff 0000, #f 00 An RGB value in functional notation, i. e. rgb(rrr, ggg, bbb), rgb(r%, g%, b%) E. g. rgb(255, 0, 0), rgb(100%, 0%)

Values - Colors 16 original predefined color codes (names) http: //www. cs. pitt. edu/~mehmud/cs 134/resources/p redefined_colors. html 216 browser safe colors Colors display correctly on all color monitors http: //www. cs. pitt. edu/~mehmud/cs 134/resources/b rowser_safe_colors. html

Values - Strings String Sequence of characters written inside double quotes ("") or single quotes (''). Examples "this is a ’string’“ "this is a "string"“ ’this is a "string"’ ’this is a ’string’’

Box Properties margin : <length> border : <style> <width> <color> padding : <length> width & height : <length> Examples: p{ margin: 50 px; padding: 30 px; float: right; height: 200 px; width: 400 px; border: 5 px solid #006633; }

Box Model

Text Properties Practice Create a paragraph text Create internal style for <p> tag as following p{ margin: 50 px; padding: 50 px; clear: right; float: right; border: 10 px solid #0066 CC; } Create a internal style called “text. Style” and apply it to paragraph text and let it look like this

Text Properties Practice Color is #666666; font-family is Arial, Helvetica, sans-serif; font-indent is 20%;

Values for position property Value Description static Default. An element with position: static always has the position the normal flow of the page gives it (a static element ignores any top, bottom, left, or right declarations) relative An element with position: relative moves an element relative to its normal position, so "left: 20" adds 20 pixels to the element's LEFT position absolute An element with position: absolute is positioned at the specified coordinates relative to its containing block. The element's position is specified with the "left", "top", "right", and "bottom" properties fixed An element with position: fixed is positioned at the specified coordinates relative to the browser window. The element's position is specified with the "left", "top", "right", and "bottom" properties. The element remains at that position regardless of scrolling. Works in IE 7 (strict mode)

Positioning Properties A floated box is shifted to the left or right until its outer edge touches the containing block edge or the outer edge of another float. Example. position. Style { height: 400 px; width: 200 px; left: 50 px; top: 50 px; right: 50 px; bottom: 50 px; position: absolute; float: rigth; }

Positioning Properties Practice – thumbnail image Create a table with only one cell Insert an image 10 times inside the only cell of the table Create a rule called “. thumb. Img” which floats to left, has a margin of 20 pixels on the top & bottom and 15 pixels on the left & right; has a 5 -pixel solid border with silver color Apply the rule to all the 10 images

List Properties list-style: [disc | circle | square | decimal | lowerroman | upper-roman | lower-alpha | upper-alpha | none] || [inside | outside] || [<url> | none] Example li { list-style: url(http: //www. must. ac. ug/~site/image/bullet 2. jpg) disc inside; } Can use the list-style-type, list-style-image, liststyle-position separately.

List Properties Difference between inside and outside Outside

Background Properties background-color: <color> | transparent | inherit background-image: <uri> | none | inherit background-position: [ [ <percentage> | <length> | left | center | right ] [<percentage> | <length> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] | inherit background-repeat: repeat | repeat-x | repeat-y | no-repeat | inherit background-attachment: scroll | fixed | inherit

Background Properties Practice body { background-image: url(http: //www. cs. pitt. edu/~mehmud/imag e/bgd. png); background-repeat: no-repeat; color: #FFFFFF; background-position: center; background-color: #666666; background-attachment: fixed; }

<div> and <span> tags <div> is a generic block-level tag <span> is a generic inline tag, it spans a series of characters Example. sub. Title { font-family: Georgia, Times, serif; font-size: 14 px; font-weight: bold; color: #960000; } <p>blah <span class="sub. Title">some text in different style</span> text</p>

<title> tag <title>: defines the title of the document. Placed between <head> and </head> Example <html> <head> <title>XHTML Tag Reference</title> … </head> … </html>

Directory Structure

Adding style We can specify a CSS rule for just that section, using its id: <style…> #mybit {color: blue; position: relative: pixel. Left: 50} </style> position: relative states that it should be relative to other elements on page. pixel. Left gives distance from left in pixels

Making it move We can modify stylesheet property values from within Java. Script: mybit. style. pixel. Left = 300; mybit. style. color = “red”; Could have a function that changed position of section: function jump() { mybit. style. pixel. Left += 20; } Then could have: onclick=“jump()”

Jump Example <script. . > In head In body function jump() { mybit. style. pixel. Left += 10; } </script> … <div id=“mybit”> <h 1> Hello </h 1> </div> <form> <input type=“button” value=“Jump” on. Click=“jump()”> </form>

Moving across the screen We can keep adding a little to the positions, until it has moved enough. . function move() { if(mybit. style. pixel. Left < 300) { mybit. style. pixel. Left +=5; set. Timeout(“move()”, 50); } set. Timeout calls function again after small time delay.

Summary: DHTML Can manipulate position and properties of bits of HTML using Java. Script. One way is to use CSS to specify position of section of HTML, and then change the position under Java. Script. Note: Some of methods demonstrated are IE specific. Standard W 3 C DOM based methods should be considered in future.

Cookies allow web site providers to store and retrieve small bits on information on client’s computer. Usually used to store customer details like name, address etc. Normally only site which wrote the cookie can read it.

Cookies You will have a cookie file (stored somewhere) holding everything any site has recorded about you. Typical line: www. mysite. com FALSE /~Willy 1027069996 username Willy mysite. com has recorded that your username is Willy. It also records when this data should expire. Try looking in ~/. mozila/cookies

Cookies in Java. Script Can set and read cookies using Java. Script. Example: function set. Cookie() { document. cookie = “name=willy” } Browser will read this and add a cookie which includes your site name: yoursite. com …. name willy

Cookies in Java. Script Later want to read this cookie to find user name. Needs a bit of work getting hold of right bit of cookie: function read. Name() { var broken_cookie = document. cookie. split(“=“); var yourname = broken_cookie[1]; return yourname; }

Cookie Demo In general to read/write cookies you should copy standard Read. Cookie and Set. Cookie methods.

Cookie Issues Not everyone likes cookies: privacy. Legal issues (data protection). Users may need reassurance data won’t be passed on. Some users switch off cookies. Sites using cookies should include some statement on use of personal data.

Summary: Cookies Used to store small bits of data about user, on THEIR machine. Fairly simple to store/read cookies using Java. Script. But issues concerning use and storage of personal data.

Summary Java. Script used to add interactivity to page. Use event handlers to detect and act on standard events like button presses, form submission. User DOM to access and modify the page. Some variability in what different browsers support. But soon we will all be able to use W 3 C standards for DOM and events.