Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download Server-side Programming
Document related concepts
Transcript
Client-side Programming
Copyright (C) 2009 Dr.Yong Uk Song
Yonsei University Wonju Campus
Architecture of WWW
user
input
GUI
user
output
content
File Input
request with
arguments
Web
Browser
HTTP
response
Client-side
program
Web Server
HTML
file
input
Interface
Server-side
output
program
Dynamic HTML
Dynamic HTML, or DHTML, is a collection of technologies
used together to create interactive and animated web sites by
using a combination of a static markup language (such as
HTML), a client-side scripting language (such as
JavaScript), a presentation definition language (such as
CSS), and the Document Object Model (DOM).
By contrast, a dynamic web page is a broader concept - any
web page generated differently for each user, load
occurrence, or specific variable values.
JavaScript
JavaScript
JavaScript is a scripting language used to enable
programmatic access to objects within other applications
(usually, Web browsers).
It is primarily used in the form of client-side JavaScript for
the development of dynamic websites.
Note) A scripting language, script language or extension
language is a programming language that allows control of
one or more software applications (Web browsers in our
case).
Note) JavaScript and Java are different to each other.
JavaScript Example JavaScript/hello.html
<HTML>
<HEAD>
<TITLE> JavaScript Example </TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-function fcn()
{
var msg="Hello there!";
alert(msg);
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button" VALUE="Click" OnClick="fcn()">
</FORM>
</BODY>
</HTML>
Architecture of WWW
user
input
GUI
user
output
content
File Input
request with
arguments
Web
Browser
HTTP
response
Client-side
program
Web Server
HTML
file
input
Interface
Server-side
output
program
Note) There is no interface between Web Browser and Client-side program.
JavaScript Programming in HTML
Syntax
Inserting JavaScript codes in an HTML document
<SCRIPT LANGUAGE="JavaScript">
… JavaScript codes here
</SCRIPT>
Using a JavaScript source code file
<SCRIPT LANGUAGE="JavaScript" SRC="script.js">
</SCRIPT>
Note : ".js" is used for JavaScript source code files.
JavaScript Codes in HTML File
JavaScript/hello.html
<HTML>
<HEAD>
<TITLE> JavaScript Example </TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-function fcn()
{
var msg="Hello there!";
alert(msg);
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button" VALUE="Click" OnClick="fcn()">
</FORM>
</BODY>
</HTML>
JavaScript Codes in ".js" File
JavaScript/hello2.html
index.html
script.js
<HTML>
<HEAD>
<TITLE> JavaScript Example
</TITLE>
<SCRIPT LANGUAGE="JavaScript"
SRC="script.js">
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button"
VALUE="Click" OnClick="fcn()">
</FORM>
</BODY>
</HTML>
function fcn()
{
var msg="Hello there!";
alert(msg);
}
JavaScript: if statement
A control statement for
division
Syntax
if (expression) {
statement(s)1
} else {
statement(s)2
}
Control and execution
If evaluation result of the
"expression" is true, then
"statement(s)1" is executed.
Otherwise, "statement(s)2" is
executed.
e.g.
if (n > 0) {
a = 1;
} else {
a = 0;
}
Controls in programming
Sequence
Division
Repetition
JavaScript: for statement
A control statement for repetition
Syntax
for (expression1; expression2;
expression3) {
statement(s)
}
Control and execution
The "expression1" is evaluated.
If evaluation result of the
"expression2" is true, then
"statement(s)" is executed.
After the execution, the
"expression3" is evaluated.
Go to the evaluation of the
"expression2".
Otherwise, the whole "for"
statement is finished.
e.g.
for (i = 0; i < 100; i++)
{
document.write(i);
}
Controls in programming
Sequence
Division
Repetition
JavaScript: User Interface Methods
alert(string)
e.g.
alert("Hello there!");
confirm(string)
e.g.
bSure = confirm("Are you sure?");
prompt(string, string)
e.g.
sName = prompt("Enter your name", "name");
JavaScript: confirm( ) JavaScript/confirm.html
<HTML>
<HEAD>
<TITLE>Confirm Example</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-function fcn()
{
var bSure = confirm("Are you sure?");
alert(bSure);
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button" VALUE="Click" OnClick="fcn()">
</FORM>
</BODY>
</HTML>
JavaScript: prompt( ) JavaScript/prompt.html
<HTML>
<HEAD>
<TITLE>Prompt Example</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-function fcn()
{
var sName = prompt("Enter your name", "Type here");
alert("Hi, " + sName);
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button" VALUE="Click" OnClick="fcn()">
</FORM>
</BODY>
</HTML>
JavaScript: Function
A subroutine or subprogram (also called procedure, method,
function, or routine) is a portion of code within a larger
program, which performs a specific task and is relatively
independent of the remaining code.
"A useful command"
A function should be defined and then called.
JavaScript: Defining Function
Syntax
function functionName(p1, p2, … , pn)
{
statements
}
e.g.
function fcn()
{
var msg="Hello there!";
alert(msg);
}
JavaScript: Calling Function
Syntax
functionName(p1, p2, … , pn)
e.g.
alert("Hello there!");
fcn();
<INPUT TYPE="button" VALUE="Click" OnClick="fcn()">
JavaScript: Event
An event is an action that is usually initiated outside the scope
of a program and that is handled by a piece of code inside the
program.
Typical sources of events include the user (who presses a key
on the keyboard, in other words, through a keystroke).
Another source is a hardware devices such as a timer.
A computer program that changes its behavior in response to
events is said to be event-driven, often with the goal of being
interactive.
JavaScript: Event Handling Process
Syntax
Attribute="Event-Handler"
Attribute='Event-Handler'
e.g.
OnClick="fcn()"
OnMouseOver='alert("Hello")'
OnMouseOver="alert('Hello')"
Mouse & keyboard
action
Mouse & keyboard
event
Browser
Display
Updates to
browser display
JavaScript
event handler
JavaScript: Event JavaScript/onmouseover.html
<HTML>
<HEAD>
<TITLE>Example Event Handler</TITLE>
</HEAD>
<BODY>
<H1>Example Event Handler</H1>
<P>
<A HREF="http://www.muohio.edu"
OnMouseOver='alert("Hello")'>
Move your mouse over this link and a popup window is
displayed.
</A>
</P>
</BODY>
</HTML>
JavaScript: List of Events (partial)
Category
Type
Attribute
Description
Fires when the pointing device button is clicked over an element. A click is defined as a mousedo
click
onclick
wn and mouseup over the same screen location. The sequence of these events is: mousedown, m
ouseup, and click
dblclick
ondblclick
Fires when the pointing device button is double clicked over an element.
mousedown onmousedown Fires when the pointing device button is pressed over an element.
Mouse
mouseup
onmouseup
Fires when the pointing device button is released over an element.
mouseover onmouseover Fires when the pointing device is moved onto an element.
mousemove onmousemove Fires when the pointing device is moved while it is over an element.
mouseout
onmouseout
Fires when the pointing device is moved away from an element.
keypress
onkeypress
Fires after keydown, when a key on the keyboard is pressed.
Keyboard keydown
onkeydown
Fires when a key on the keyboard is pressed.
keyup
onkeyup
Fires when a key on the keyboard is released.
Fires when the user agent finishes loading all content within a document, including window, fra
load
onload
mes, objects and images. For elements, it fires when the target element and all of its content has
finished loading.
Fires when the user agent removes all content from a window or frame. For elements, it fires w
HTML
unload
onunload
hen the target element or any of its content has been removed.
frame/
abort
onabort
Fires when an object/image is stopped from loading before completely loaded.
object
error
onerror
Fires when an object/image/frame cannot be loaded properly.
resize
onresize
Fires when a document view is resized.
scroll
onscroll
Fires when a document view is scrolled.
select
onselect
Fires when a user selects some text in a text field, including input and textarea.
change
onchange
Fires when a control loses the input focus and its value has been modified since gaining focus.
submit
onsubmit
Fires when a form is submitted.
HTML form
reset
onreset
Fires when a form is reset.
focus
onfocus
Fires when an element receives focus either via the pointing device or by tab navigation.
blur
onblur
Fires when an element loses focus either via the pointing device or by tabbing navigation.
Exercise 1: Events JavaScriptX1/index.html
Make HTML files to test events like:
Click
→ <span>, <a>, <input type=submit>, …
Dblclick
→ <span>, <a>, <input type=submit>, …
Mouseover
→ <span>, <a>, …
Mousemove → <span>, <a>, …
Mouseout
→ <span>, <a>, …
Keypress
→ <body>, …
Load
→ <body>, …
Unload
→ <body>, …
Resize
→ < body>, …
Scroll
→ < body>, …
Select
→ <input>, …
Change
→ <input>, …
Submit
→ <input type=submit>, …
Focus
→ <input>, <body>, …
Blur
→ <input>, <body>, …
Exercise 1: Events JavaScriptX1/index.html
<HTML>
<HEAD>
<TITLE>Example Event Handler</TITLE>
</HEAD>
<BODY onKeypress="alert('KeyPress')" onLoad="alert('Load')"
onUnload="alert('Unload')" onResize="alert('Resize')" onScroll="alert('Scroll')">
<H1>Example Event Handler</H1>
<P>
<span onClick="alert('Click')">Click</span> <br>
<span onDblClick="alert('DblClick')">DblClick</span> <br>
<span onMouseOver="alert('Mouseover')">Mouseover</span> <br>
<span onMouseMove="alert('Mousemove')">Mousemove</span> <br>
<span onMouseOut="alert('Mouseout')">Mouseout</span> <br>
<form action="http://www.muohio.edu" onSubmit="alert('Submit')">
<input type="text" onSelect="alert('Select')" onChange="alert('Change')">
<br>
<input type="text" onFocus="alert('Focus')" onBlur="alert('Blur')"> <br>
<input type="submit" onClick="alert('Click')">
</form>
</P>
</BODY>
</HTML>
Exercise 2: OnMouseOver
JavaScriptX2/index.html
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
var count=0;
</SCRIPT>
</HEAD>
<BODY>
<A HREF="http://www.kaist.ac.kr" OnMouseOver='++count;
alert("You moved your mouse here " + count + " times!")'>
Displays the number of times you move your mouse over this link.
</A>
</BODY>
</HTML>
JavaScript: Cancelling Default Action
The default action can be cancelled by returning false in the event handler:
<head>
<script type="text/javascript">
function helloWorld( name )
{
alert("Hello " + name);
return(false);
}
</script>
</head>
<body>
<p>
Stay <a href="http://www.example.com"
onClick="return(helloWorld('Joe'))">here</a>!
</p>
</body>
In the example above, the browser will not go to "example.com" when the
hyperlink is clicked.
Exercise 3: Confirm Link
JavaScriptX3/index.html
<HTML>
<HEAD>
<SCRIPT>
function confirmLink() {
if (confirm("Are you ten years old or younger?")) {
window.location="http://www.muohio.edu";
}
}
</SCRIPT>
</HEAD>
<BODY>
<A HREF="somewhere" OnClick="return(false)"
OnMouseOver="confirmLink()">
Confirms whether you want to connect via this link.
</A>
</BODY>
</HTML>
Exercise 4: Focus and Blur
JavaScriptX4/index.html
<HTML>
<HEAD>
<TITLE>Handling onFocus and onBlur events in a
frame</TITLE>
</HEAD>
<FRAMESET COLS="*,*">
<FRAME SRC="doc1.html"/>
<FRAME SRC="doc2.html"/>
</FRAMESET>
</HTML>
Exercise 4: Focus and Blur JavaScriptX4
doc1.html
doc2.html
<HTML>
<HEAD>
<TITLE>Document 1</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function gotFocus() {
document.bgColor="#FFFFFF";
}
function lostFocus() {
document.bgColor="#00FF00";
}
</SCRIPT>
</HEAD>
<BODY BgColor="#00FF00"
onFocus="gotFocus()"
onBlur="lostFocus()">
<H1>Document 1</H1>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Document 2</TITLE>
</HEAD>
<BODY BgColor="#FF0080">
<H1>Document 2</H1>
</BODY>
</HTML>
Exercise 5: Handling Edit Box
JavaScriptX5
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function nameSelect() {
if (isBlank("" + document.contest.last.value)) {
document.contest.last.value = "Surname";
document.contest.last.focus();
document.contest.last.select();
}
}
function isBlank(s) {
var len=s.length;
var i;
for (i=0;i<len;++i) {
if (s.charAt(i)!=" ") return(false);
}
return(true);
}
function validate(fieldName,fieldValue) {
if (isBlank(fieldValue)) {
alert(fieldName + " cannot be left blank.");
return(false);
}
return(true);
}
function validateEmail() {
validate("The e-mail field", document.contest.email.value);
}
function validateEssay() {
validate("The essay field", document.contest.essay.value);
}
function validateForm() {
if (!validate("The last name field",
document.contest.last.value))
return(false);
if (!validate("The e-mail field", document.contest.email.value))
return(false);
if (!validate("The essay field",
document.contest.essay.value))
return(false);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="contest"
ONSUBMIT="return(validateForm())"
ACTION="http://www.muohio.edu">
<H2 ALIGN="CENTER">Contest Application</H2>
<P>
Last name: <INPUT TYPE="TEXT" NAME="last"
SIZE="16" ONCHANGE="nameSelect()">
First name: <INPUT TYPE="TEXT" NAME="first"
SIZE="12">
Middle Initial: <INPUT TYPE="TEXT" NAME="initial"
SIZE="2">
</P>
<P>E-mail address: <INPUT TYPE="TEXT"
NAME="email" SIZE="32"
ONCHANGE="validateEmail()"></P>
<P>In 50 words or less, state why you should win the
contest:</P>
<TEXTAREA NAME="essay" ROWS="5" COLS="40"
ONCHANGE="validateEssay()"></TEXTAREA>
<P>Submit your winning entry: <INPUT TYPE="SUBMIT"
NAME="go" VALUE="Make me a winner!"></P>
</FORM>
</BODY>
</HTML>
Exercise 6: Handling Checkbox
JavaScriptX6
<HTML>
<HEAD>
<TITLE>Button and Check Box Events</TITLE>
<SCRIPT>
function showResults() {
var resultMsg = "";
if (document.survey.age[0].checked) resultMsg += "under 30, ";
if (document.survey.age[1].checked) resultMsg += "between 30
and 60, ";
if (document.survey.age[2].checked) resultMsg += "over 60, ";
if (document.survey.sex[0].checked) resultMsg += "male, ";
if (document.survey.sex[1].checked) resultMsg += "female, ";
if (document.survey.reading.checked) resultMsg += "reading, ";
if (document.survey.eating.checked) resultMsg += "eating, ";
if (document.survey.sleeping.checked) resultMsg += "sleeping, ";
document.survey.results.value = resultMsg;
}
function upperCaseResults() {
var newResults = document.survey.results.value;
document.survey.results.value = newResults.toUpperCase();
}
</SCRIPT>
</HEAD>
<BODY>
<H2 ALIGN="CENTER">Survey Form</H2>
<FORM NAME="survey">
<P>
<B>Age:</B>
<INPUT TYPE="RADIO" NAME="age" VALUE="under30"
ONCLICK="showResults()">Under 30
<INPUT TYPE="RADIO" NAME="age" VALUE="30to60"
ONCLICK="showResults()">30 - 60
<INPUT TYPE="RADIO" NAME="age" VALUE="over60"
ONCLICK="showResults()">Over 60
</P>
<P>
<B>Sex: </B>
<INPUT TYPE="RADIO" NAME="sex" VALUE="male"
ONCLICK="showResults()">Male
<INPUT TYPE="RADIO" NAME="sex" VALUE="female"
ONCLICK="showResults()">Female
</P>
<P>
<B>Interests: </B>
<INPUT TYPE="CHECKBOX" NAME="reading"
ONCLICK="showResults()"> Reading
<INPUT TYPE="CHECKBOX" NAME="eating"
ONCLICK="showResults()"> Eating
<INPUT TYPE="CHECKBOX" NAME="sleeping"
ONCLICK="showResults()"> Sleeping
</P>
<P><INPUT TYPE="BUTTON" NAME="makeUpper"
VALUE="To Upper Case" ONCLICK="upperCaseResults()"></P>
<P>
<B>Results: </B>
<INPUT TYPE="TEXT" NAME="results" SIZE="50">
</P>
<INPUT TYPE="SUBMIT" NAME="submit" VALUE="Submit"
ONCLICK="return(confirm('Are you sure?'))">
<INPUT TYPE="RESET" NAME="reset"
ONCLICK="return(confirm('Are you sure?'))">
</FORM>
</BODY>
</HTML>
Exercise 7: Handling List JavaScriptX7
<HTML>
<HEAD>
<SCRIPT>
function updateOrder() {
var orderString = "";
var n = document.diner.entries.length;
for (i = 0; i < n; ++i) {
if
(document.diner.entries.options[i].selected) {
orderString +=
document.diner.entries.options[i].value + "\n";
}
}
document.diner.summary.value =
orderString;
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="diner">
<H2 ALIGN="CENTER">The Web
Diner</H2>
<P><B>Place your order:</B></P>
<SELECT NAME="entries" SIZE="4"
MULTIPLE="MULTIPLE"
ONCHANGE="updateOrder()">
<OPTION
VALUE="Hamburger">Hamburger</OPTION
>
<OPTION VALUE="Hot Dog">Hot
Dog</OPTION>
<OPTION VALUE="Chicken
Sandwich">Chicken Sandwich</OPTION>
<OPTION VALUE="French Fries">French
Fries</OPTION>
<OPTION VALUE="Onion Rings">Onion
Rings</OPTION>
<OPTION
VALUE="Soda">Soda</OPTION>
<OPTION VALUE="Milk Shake">Milk
Shake</OPTION>
<OPTION
VALUE="Coffee">Coffee</OPTION>
</SELECT>
<P><B>You ordered: </B></P>
<P><TEXTAREA NAME="summary"
ROWS="4"
COLS="20"></TEXTAREA></P>
<P><INPUT TYPE="SUBMIT"
NAME="order" VALUE="Let me have
it!"></P>
</FORM>
</BODY>
</HTML>
JavaScript: Timeout
Syntax
Timeout = setTimeout(function-call-in-string, milliseconds)
clearTimeOut(Timeout)
e.g.
timeVar = setTimeout("timeoutFunction()", 10000);
clearTimeout(timeVar);
JavaScript: Timeout JavaScript/timeout.html
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
var timer;
function setTimer() {
timer=setTimeout("window.close()", 5000);
}
function clearTimer() {
clearTimeout(timer);
alert("Congratulations! You have saved this window just before.");
}
</SCRIPT>
</HEAD>
<BODY OnLoad="setTimer()">
<H1>You should click the button below within 5 seconds. Or this window is
closed.</H1>
<FORM>
<INPUT TYPE="BUTTON" VALUE="Click here within five seconds"
OnClick="clearTimer()">
</FORM>
</BODY>
</HTML>
JavaScript: Timeout JavaScript/scroll1.html
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function setScrollText() {
scrollCount = 0;
maxScroll = 127;
scrolledText = "This is a scrolling text!!!";
scrollText();
}
function space(n) {
result = "";
for(var i = 0; i < n; ++i) result+=" ";
return(result);
}
function scrollText() {
var text = space(maxScroll - scrollCount) + scrolledText;
++scrollCount;
scrollCount %= (maxScroll + 1);
window.status = text;
window.setTimeout("scrollText()", 50);
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFFF" onLoad="setScrollText()">
<H1>Scrolling text in the status bar</H1>
</BODY>
</HTML>
JavaScript: Timeout JavaScript/scroll2.html
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function setScrollText() {
scrollCount = 0;
maxScroll = 64;
scrolledText = "This is a scrolling text!!!";
scrollText();
}
function space(n) {
result = "";
for(var i = 0; i < n; ++i) result+=" ";
return(result);
}
function scrollText() {
var text = space(maxScroll - scrollCount) + scrolledText;
++scrollCount;
scrollCount %= (maxScroll + 1);
document.form1.scr_msg.value = text;
window.setTimeout("scrollText()", 50);
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFFF" onLoad="setScrollText()">
<H1>Scrolling text in the window</H1>
<FORM NAME="form1">
<INPUT TYPE="text" NAME="scr_msg" size="32">
</FORM>
</BODY>
</HTML>
JavaScript: Interval
Syntax
Interval = setInterval(function-call-in-string, milliseconds)
clearInterval(Interval)
e.g.
timeVar = setInterval("intervalFunction()", 10000);
clearInterval(timeVar);
JavaScript: Interval JavaScript/scroll3.html
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function setScrollText() {
scrollCount = 0;
maxScroll = 64;
scrolledText = "This is a scrolling text!!!";
window.setInterval("scrollText()", 50);
}
function space(n) {
result = "";
for(var i = 0; i < n; ++i) result+=" ";
return(result);
}
function scrollText() {
var text = space(maxScroll - scrollCount) + scrolledText;
++scrollCount;
scrollCount %= (maxScroll + 1);
document.form1.scr_msg.value = text;
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFFF" onLoad="setScrollText()">
<H1>Scrolling text in the window</H1>
<FORM NAME="form1">
<INPUT TYPE="text" NAME="scr_msg" size="32">
</FORM>
</BODY>
</HTML>
Cascading Style Sheets (CSS)
CSS
Cascading Style Sheets (CSS) is a style sheet language used to
describe the presentation (that is, the look and formatting) of a
document written in a markup language.
CSS is designed primarily to enable the separation of document
content (written in HTML or a similar markup language) from
document presentation, including elements such as the colors,
fonts, and layout.
This separation can improve content accessibility, provide more
flexibility and control in the specification of presentation
characteristics, enable multiple pages to share formatting, and
reduce complexity and repetition in the structural content (such
as by allowing for tableless web design).
CSS: Defining Styles
Styles must be defined before they are used.
Four methods to define styles
Defining styles in HTML documents
Defining in-line styles within HTML tags
Linking with external style sheets
Importing style sheets
CSS: Defining in HTML Documents
Format
<STYLE TYPE="text/css">
tag { style-definition }
#id-name { style-definition }
tag#id-name { style-definition }
.class-name { style-definition }
tag.class-name { style-definition }
…
</STYLE>
style-definition = name1: v1 v2 …; name2: v1 v2 …; …
CSS: Defining in HTML Documents
e.g.
<STYLE TYPE="text/css">
H1 { font: small }
#mystyle { font: bold large; text-decoration: underline }
.myclass { font: bold large; text-decoration: overline }
</STYLE>
CSS: Defining in HTML Documents
CSS/InHTML.html
<HTML>
<HEAD>
<STYLE TYPE="text/css">
H1 { font: small }
#mystyle { font: bold large; text-decoration: underline }
.myclass { font: bold large; text-decoration: overline }
</STYLE>
</HEAD>
<BODY>
<H1> Hello </H1>
<H1 ID="mystyle"> Hello </H1>
<H1 CLASS="myclass"> Hello </H1>
</BODY>
</HTML>
CSS: Defining In-line Styles
Format
<tag STYLE="style-definition"> … </tag>
e.g.
<H1 STYLE="font: bold large"> … </H1>
CSS: Defining In-line Styles
CSS/InLine.html
<HTML>
<BODY>
<H1> Hello </H1>
<H1 STYLE="font: italic"> Hello </H1>
<SPAN STYLE="font: bold"> Hello </SPAN>
</BODY>
</HTML>
CSS: Linking
Format
<LINK REL=STYLESHEET TITLE="title" TYPE="text/css"
HREF="filename">
e.g.
<LINK REL=STYLESHEET TITLE="master style"
TYPE="text/css" HREF="styles.css">
CSS: Linking CSS
linking.html
styles.css
<HTML>
<HEAD>
<LINK REL=STYLESHEET
TITLE="master style"
TYPE="text/css"
HREF="styles.css">
</HEAD>
<BODY>
<H1> Hello </H1>
<H1 ID="mystyle"> Hello
</H1>
<H1 CLASS="myclass"> Hello
</H1>
</BODY>
</HTML>
H1 {
font: small
}
#mystyle {
font: bold large;
text-decoration: underline
}
.myclass {
font: bold large;
text-decoration: overline
}
CSS: Importing
Format
<STYLE TYPE="text/css">
@IMPORT URL(address);
</STYLE>
e.g.
<STYLE TYPE="text/css">
@IMPORT URL(http://localhost:8080/CSS/styles.css);
</STYLE>
CSS: Importing CSS
importing.html
styles.css
<HTML>
<HEAD>
<STYLE TYPE="text/css">
@IMPORT
URL(http://localhost:8080/CSS/style
s.css);
</STYLE>
</HEAD>
<BODY>
<H1> Hello </H1>
<H1 ID="mystyle"> Hello </H1>
<H1 CLASS="myclass"> Hello
</H1>
</BODY>
</HTML>
H1 {
font: small
}
#mystyle {
font: bold large;
text-decoration: underline
}
.myclass {
font: bold large;
text-decoration: overline
}
CSS Properties
Fonts
Background
Text align
Spacing
Box
…
CSS: Font Properties
font-family
font-size : small, large, x-large, xx-large, …
font-style : oblique, italic, normal
font-weight : normal, bold, bolder, lighter
font-variant : small-caps, normal
font : font-weight + font-size + font-style …
color : #RGB / black, white, red, green, …
text-decoration : underline, overline, line-through, blink
* RGB - Red(0…FF)+Green(0…FF)+Blue(0…FF)
e.g. #FF0000, #00FF00, #0000FF, #FFFFFF, #000000
CSS: Font Properties CSS/fonts.html
<HTML>
<HEAD>
<STYLE TYPE="text/css">
#mystyle {
font-family: "Lucida Calligraphy Italic";
font-size : xx-large;
font-style : oblique;
font-weight : bolder;
font-variant : small-caps;
color : #FF00FF;
text-decoration : underline;
}
</STYLE>
</HEAD>
<BODY>
<SPAN ID="mystyle"> Hello! Good to see you. </SPAN>
</BODY>
</HTML>
CSS: Background Properties
background-color : #RGB / transparent
background-image : URL(address) / none
background-repeat : repeat, repeat-x, repeat-y, no-repeat
background-attachment : scroll, fixed
background-position : combination of top, center, bottom,
left, right / x% y%
background : background-color + image + repeat +
attachment + position
CSS: Background Properties
CSS/background.html
<HTML>
<HEAD>
<STYLE TYPE="text/css">
#mystyle {
background-color : #00FF00;
background-image : URL("image.gif");
background-repeat : repeat-y;
background-attachment : fixed;
background-position : center;
}
</STYLE>
</HEAD>
<BODY ID="mystyle">
<SPAN> Hello! Good to see you.</SPAN> <BR>
<BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR>
<BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR>
<SPAN> Hello! Good to see you.</SPAN>
</BODY>
</HTML>
CSS: Text Align Properties
vertical-align : baseline, middle, sub, super, text-top, text-
bottom / top, bottom
text-align : left, center, right, justify
text-indent : nin, ncm, npx, n%
CSS: Text Align Properties CSS/textAlign.html
<HTML>
<HEAD>
<STYLE TYPE="text/css">
#body {
vertical-align : baseline;
text-align : justify;
text-indent : 1in;
}
#sub {
vertical-align : sub;
}
#super {
vertical-align : super;
}
</STYLE>
</HEAD>
<BODY>
<P ID="body">
<SPAN ID="super">Four</SPAN> score and <SPAN ID="sub">seven</SPAN> years ago
our fathers brought forth on this continent a new nation, conceived in Liberty, and dedicated to the
proposition that all men are created equal.
</P>
</BODY>
</HTML>
CSS: Spacing Properties
word-spacing : n, normal
letter-spacing : n, normal
line-height : n, n%, normal
white-space : normal, pre, nowrap
CSS: Spacing Properties CSS/spacing.html
<HTML>
<HEAD>
<STYLE TYPE="text/css">
#body {
vertical-align : baseline;
text-align : justify;
text-indent : 1in;
}
#spacing {
word-spacing : 20;
letter-spacing : 3;
line-height : 3;
white-space : nowrap;
}
</STYLE>
</HEAD>
<BODY>
<P ID="body">
Four score and seven years ago our fathers brought forth <SPAN ID="spacing">on this
continent a new nation,</SPAN> conceived in Liberty, and dedicated to the proposition that all
men are created equal.
</P>
</BODY>
</HTML>
CSS: Box Properties (1)
margin-top : npx, n%, auto
margin-right : npx, n%, auto
margin-bottom : npx, n%, auto
margin-left : npx, n%, auto
margin
CSS: Box Properties (1) CSS/margin.html
<HTML>
<HEAD>
<STYLE TYPE="text/css">
#mystyle {
margin-top : 100px;
margin-right : 100px;
margin-bottom : 100px;
margin-left : 100px;
}
</STYLE>
</HEAD>
<BODY>
<P ID="mystyle">
Four score and seven years ago our fathers brought forth on this continent a new
nation, conceived in Liberty, and dedicated to the proposition that all men are created
equal.
</P>
</BODY>
</HTML>
CSS: Box Properties (2)
border-width: thin, medium, thick, none
border-color: #RGB / black, red, green, …
border-style: none, dotted, dashed, solid, …
border-top: width style color
border-right: width style color
border-bottom: width style color
border-left: width style color
border
CSS: Box Properties (2) CSS/border.html
<HTML>
<HEAD>
<STYLE TYPE="text/css">
#mystyle {
margin-top : 100px;
margin-right : 100px;
margin-bottom : 100px;
margin-left : 100px;
border-width: thick;
border-color: #FF0000;
border-style: dashed;
}
</STYLE>
</HEAD>
<BODY>
<P ID="mystyle">
Four score and seven years ago our fathers brought forth on this continent a new
nation, conceived in Liberty, and dedicated to the proposition that all men are created
equal.
</P>
</BODY>
</HTML>
CSS: Box Properties (3)
padding-top : npx, n%, auto
padding-right : npx, n%, auto
padding-bottom : npx, n%, auto
padding-left : npx, n%, auto
padding
CSS: Box Properties (3) CSS/padding.html
<HTML>
<HEAD>
<STYLE TYPE="text/css">
#mystyle {
margin-top : 100px;
margin-right : 100px;
margin-bottom : 100px;
margin-left : 100px;
border-width: thick;
border-color: #FF0000;
border-style: dashed;
padding-top : 50px;
padding-right : 50px;
padding-bottom : 50px;
padding-left : 50px;
}
</STYLE>
</HEAD>
<BODY>
<P ID="mystyle">
Four score and seven years ago our fathers brought forth on this continent a new nation,
conceived in Liberty, and dedicated to the proposition that all men are created equal.
</P>
</BODY>
</HTML>
CSS: Box Properties (4)
width: npx
height: npx
e.g.
IMG { width: 250px; height: 250px }
float : left, right, none
e.g.
IMG { float: left; margin: 0px; border: none }
CSS: Box Properties (4) CSS/image1.html
<HTML>
<HEAD>
<STYLE TYPE="text/css">
#mystyle {
width: 500px;
height: 500px;
}
</STYLE>
</HEAD>
<BODY>
<IMG ID="mystyle" SRC="image.gif">
</BODY>
</HTML>
CSS: Box Properties (4) CSS/image2.html
<HTML>
<HEAD>
<STYLE TYPE="text/css">
#mystyle {
margin: 50px;
padding: 20px;
border: thick dotted #FF0000;
}
#myimg {
width: 50px;
height: 50px;
float: left;
margin: 50px;
border: thick dotted #0000FF;
}
</STYLE>
</HEAD>
<BODY>
<IMG ID="myimg" SRC="image.gif">
<P ID="mystyle">Four score and seven years ago our fathers brought forth on this continent a
new nation, conceived in Liberty, and dedicated to the proposition that all men are created
equal.</P>
</BODY>
</HTML>
CSS: Positioning Example CSS/position.html
<html>
<style type="text/css">
H1 { font-size: 50pt; font-family: arial }
.shadow { color: black; margin-top: 50; margin-left: 50;
background-color: white }
.front { color: red; margin-top: -90; margin-left: 52 }
</style>
<body bgcolor="#000000">
<h1 class=shadow> Drop Shadow </h1>
<h1 class=front> Drop Shadow </h1>
</body>
</html>
Document Object Model (DOM)
DOM
The Document Object Model (DOM) is a cross-platform and
language-independent convention for representing and interacting
with objects in HTML, XHTML and XML documents.
Objects under the DOM (also sometimes called "Elements") may
be specified and addressed according to the syntax and rules of the
programming language used to manipulate them.
The rules for programming and interacting with the DOM are
specified in the DOM Application Programming Interface (API).
In simple terms, the Document Object Model is the way
JavaScript sees its containing HTML page and browser state.
DOM: Page Elements
e.g.
<IMG NAME="aImg" SRC="home.gif" WIDTH="50"
HEIGHT="35" BORDER="1">
Object:
Attributes:
name
src
width
height
border
aImg
"aImg"
"home.gif"
50
35
1
DOM: Page Elements DOM/ElementInfo.html
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function access() {
alert(window.document.aImg.name);
alert(window.document.aImg.src);
alert(window.document.aImg.width);
alert(window.document.aImg.height);
alert(window.document.aImg.border);
}
</SCRIPT>
</HEAD>
<BODY onLoad="access()">
<IMG NAME="aImg" SRC="image.gif" WIDTH="50" HEIGHT="35"
BORDER="1">
</BODY>
</HTML>
DOM: Page Elements DOM/ElementChange.html
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function enlarge() {
window.document.aImg.width += 10;
window.document.aImg.height += 10;
}
</SCRIPT>
</HEAD>
<BODY>
<IMG NAME="aImg" SRC="image.gif" WIDTH="50" HEIGHT="35"
BORDER="1" OnClick="enlarge()">
</BODY>
</HTML>
Exercise 5: Handling Edit Box, revisited
JavaScriptX5
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function nameSelect() {
if (isBlank("" + document.contest.last.value)) {
document.contest.last.value = "Surname";
document.contest.last.focus();
document.contest.last.select();
}
}
function isBlank(s) {
var len=s.length;
var i;
for (i=0;i<len;++i) {
if (s.charAt(i)!=" ") return(false);
}
return(true);
}
function validate(fieldName,fieldValue) {
if (isBlank(fieldValue)) {
alert(fieldName + " cannot be left blank.");
return(false);
}
return(true);
}
function validateEmail() {
validate("The e-mail field", document.contest.email.value);
}
function validateEssay() {
validate("The essay field", document.contest.essay.value);
}
function validateForm() {
if (!validate("The last name field",
document.contest.last.value))
return(false);
if (!validate("The e-mail field", document.contest.email.value))
return(false);
if (!validate("The essay field",
document.contest.essay.value))
return(false);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="contest"
ONSUBMIT="return(validateForm())"
ACTION="http://www.muohio.edu">
<H2 ALIGN="CENTER">Contest Application</H2>
<P>
Last name: <INPUT TYPE="TEXT" NAME="last"
SIZE="16" ONCHANGE="nameSelect()">
First name: <INPUT TYPE="TEXT" NAME="first"
SIZE="12">
Middle Initial: <INPUT TYPE="TEXT" NAME="initial"
SIZE="2">
</P>
<P>E-mail address: <INPUT TYPE="TEXT"
NAME="email" SIZE="32"
ONCHANGE="validateEmail()"></P>
<P>In 50 words or less, state why you should win the
contest:</P>
<TEXTAREA NAME="essay" ROWS="5" COLS="40"
ONCHANGE="validateEssay()"></TEXTAREA>
<P>Submit your winning entry: <INPUT TYPE="SUBMIT"
NAME="go" VALUE="Make me a winner!"></P>
</FORM>
</BODY>
</HTML>
DOM: Style Sheet Objects
e.g
<H1 ID=aH1 STYLE="color: blue; text-align: center;"> Head
</H1>
Object:
Attributes:
color
textAlign
aH1.style
'blue'
'center'
Note: text-align → textAlign
DOM: Style Sheet Objects
DOM/StyleInfo.html
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function access() {
alert(aH1.style.color);
alert(aH1.style.textAlign);
}
</SCRIPT>
</HEAD>
<BODY onLoad="access()">
<H1 ID=aH1 STYLE="color: blue; text-align: center;"> Head </H1>
</BODY>
</HTML>
DOM: Style Sheet Objects
DOM/StyleChange.html
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
var red = 0;
var green = 0;
var blue = 0;
function change() {
red = (red + 20) % 256;
green = (green + 20) % 256;
blue = (blue + 20) % 256;
aH1.style.color = "#" + red.toString(16) + green.toString(16) + blue.toString(16);
}
</SCRIPT>
</HEAD>
<BODY>
<H1 ID=aH1 STYLE="color: blue; text-align: center;" OnClick="change()"> Head </H1>
</BODY>
</HTML>
DOM: Example (IE) DOM/FlyingText.html
<html>
<head>
<style type="text/css">
.text {font-size: 23pt; font-family: Arial; font-weight: 800; color: white; background-color: red }
</style>
<script language="JavaScript">
function init() {
textDiv.style.visibility = "visible";
flyText();
}
function flyText() {
if (textDiv.style.pixelLeft < 200) {
textDiv.style.pixelLeft += 20;
window.setTimeout("flyText()", 500);
}
}
</script>
</head>
<body bgcolor=black onLoad="init()">
<div align=center id="textDiv" class="text" style="position: absolute; left: -300; top: 100; width: 300;
border: 10 red double; visibility: hidden">
DYNAMIC HTML TUTORIAL!
</div>
</body>
</html>
DOM: Example (FF) DOM/FlyingText.html
<html>
<head>
<style type="text/css">
.text {font-size: 23pt; font-family: Arial; font-weight: 800; color: white; background-color: red }
</style>
<script language="JavaScript">
function init() {
textDiv.style.visibility = "visible";
flyText();
}
function flyText() {
l = textDiv.style.left.length;
left = parseInt(textDiv.style.left.substring(0, l - 2), 10);
if (left < 200) {
textDiv.style.left = left + 20;
window.setTimeout("flyText()", 500);
}
}
</script>
</head>
<body bgcolor=black onLoad="init()">
<div align=center id="textDiv" class="text" style="position: absolute; left: 0; top: 100; width: 300; border: 10
red double; visibility: hidden">
DYNAMIC HTML TUTORIAL!
</div>
</body>
</html>
DOM: Exercise 1
Develop a DHTML document in which a text is flying along
a path of a shape of a circle.
Project name
DOMX1
(Hint) x = radius * cos(radian)
y = radius * sin(radian)
DOM: Exercise 1 (IE) DOMX1/index.html
<html>
<head>
<style type="text/css">
.text {font-size: 23pt; font-family: Arial; font-weight: 800; color: white; background-color: red }
</style>
<script language="JavaScript">
var radian = 0.0;
function init() {
textDiv.style.visibility = "visible";
flyText();
}
function flyText() {
radian += 0.4;
textDiv.style.pixelLeft = 300 + 200 * Math.cos(radian);
textDiv.style.pixelTop = 300 + 200 * Math.sin(radian);
window.setTimeout("flyText()", 500);
}
</script>
</head>
<body bgcolor=black onLoad="init()">
<div align=center id="textDiv" class="text" style="position: absolute; left: 0; top: 100; width: 300; border: 10
red double; visibility: hidden">
DYNAMIC HTML TUTORIAL!
</div>
</body>
</html>
Business model:
Web 2.0
Web 2.0
"Web 2.0" refers to the second generation of web development and web
design.
It is characterized as facilitating communication, information sharing,
interoperability, user-centered design and collaboration on the World
Wide Web.
It has led to the development and evolution of web-based communities,
hosted services, and web applications.
Examples include social-networking sites
(http://www.facebook.com/), video-sharing sites
(http://www.youtube.com/), wikis, blogs, mashups and folksonomies
(http://delicious.com/).
Note) A mashup is a web page or application that combines data or
functionality from two or more external sources to create a new
service.
Note) folksonomies : folk + taxonomies
Web 2.0
"Web 2.0" refers to the second generation of web development and web
design.
It is characterized as facilitating communication, information sharing,
interoperability, user-centered design and collaboration on the World
Wide Web.
It has led to the development and evolution of web-based communities,
hosted services, and web applications.
Examples include social-networking sites
(http://www.facebook.com/), video-sharing sites
(http://www.youtube.com/), wikis, blogs, mashups and folksonomies
(http://delicious.com/).
Note) A mashup is a web page or application that combines data or
functionality from two or more external sources to create a new
service.
Note) folksonomies : folk + taxonomies
facebook
Web 2.0
"Web 2.0" refers to the second generation of web development and web
design.
It is characterized as facilitating communication, information sharing,
interoperability, user-centered design and collaboration on the World
Wide Web.
It has led to the development and evolution of web-based communities,
hosted services, and web applications.
Examples include social-networking sites
(http://www.facebook.com/), video-sharing sites
(http://www.youtube.com/), wikis, blogs, mashups and
folksonomies (http://delicious.com/).
Note) A mashup is a web page or application that combines data or
functionality from two or more external sources to create a new
service.
Note) folksonomies : folk + taxonomies
YouTube
Web 2.0
"Web 2.0" refers to the second generation of web development and web
design.
It is characterized as facilitating communication, information sharing,
interoperability, user-centered design and collaboration on the World
Wide Web.
It has led to the development and evolution of web-based communities,
hosted services, and web applications.
Examples include social-networking sites
(http://www.facebook.com/), video-sharing sites
(http://www.youtube.com/), wikis, blogs, mashups and folksonomies
(http://delicious.com/).
Note) A mashup is a web page or application that combines data or
functionality from two or more external sources to create a new
service.
Note) folksonomies : folk + taxonomies
Mashup: NateOn - Map Application
Web 2.0
"Web 2.0" refers to the second generation of web development and web
design.
It is characterized as facilitating communication, information sharing,
interoperability, user-centered design and collaboration on the World
Wide Web.
It has led to the development and evolution of web-based communities,
hosted services, and web applications.
Examples include social-networking sites
(http://www.facebook.com/), video-sharing sites
(http://www.youtube.com/), wikis, blogs, mashups and folksonomies
(http://delicious.com/).
Note) A mashup is a web page or application that combines data or
functionality from two or more external sources to create a new
service.
Note) folksonomies : folk + taxonomies
delicious
Web 2.0
Although the term suggests a new version of the World Wide Web, it
does not refer to an update to any technical specifications, but rather to
cumulative changes in the ways software developers and end-users
utilize the Web.
Wikinomics is based on four ideas: Openness, Peering, Sharing, and
Acting Globally. (Don Tapscott and Anthony D. Williams, Wikinomics:
How Mass Collaboration Changes Everything)
Technical aspects of Web 2.0
Ajax
Ajax, sometimes written as AJAX (shorthand for asynchronous JavaScript and XML),
is a group of interrelated web development techniques used on the client-side to create
interactive web applications or rich Internet applications.
XMLHttpRequest + Multi-threading + XML + DHTML (JavaScript, CSS, DOM)
Despite the name, the use of JavaScript and XML is not actually required, nor do the
requests need to be asynchronous.
Wikipedia
Wikipedia
Google Maps: Street View
Daum: Road View
Street View: .com vs. Web 2.0
.com
Several hundred or more million dollars for development and
maintenace
Quality, Privacy
Web 2.0
Development cost
Maintenance cost
Quality, Privacy, Private-advertisement, …
How to motivate the folks?
Daum: Road View
Google Maps: Street View
Tuffy's
Toasted Roll
Building Blocks for DHTML
JavaScript Programming in HTML
Syntax
Inserting JavaScript codes in an HTML document
<SCRIPT LANGUAGE="JavaScript">
… JavaScript codes here
</SCRIPT>
Using a JavaScript source code file
<SCRIPT LANGUAGE="JavaScript" SRC="script.js">
</SCRIPT>
Note : ".js" is used for JavaScript source code files.
JavaScript: User Interface Methods
alert(string)
e.g.
alert("Hello there!");
confirm(string)
e.g.
bSure = confirm("Are you sure?");
prompt(string, string)
e.g.
sName = prompt("Enter your name", "name");
JavaScript: List of Events (partial)
Category
Type
Attribute
Description
Fires when the pointing device button is clicked over an element. A click is defined as a mousedo
click
onclick
wn and mouseup over the same screen location. The sequence of these events is: mousedown, m
ouseup, and click
dblclick
ondblclick
Fires when the pointing device button is double clicked over an element.
mousedown onmousedown Fires when the pointing device button is pressed over an element.
Mouse
mouseup
onmouseup
Fires when the pointing device button is released over an element.
mouseover onmouseover Fires when the pointing device is moved onto an element.
mousemove onmousemove Fires when the pointing device is moved while it is over an element.
mouseout
onmouseout
Fires when the pointing device is moved away from an element.
keypress
onkeypress
Fires after keydown, when a key on the keyboard is pressed.
Keyboard keydown
onkeydown
Fires when a key on the keyboard is pressed.
keyup
onkeyup
Fires when a key on the keyboard is released.
Fires when the user agent finishes loading all content within a document, including window, fra
load
onload
mes, objects and images. For elements, it fires when the target element and all of its content has
finished loading.
Fires when the user agent removes all content from a window or frame. For elements, it fires w
HTML
unload
onunload
hen the target element or any of its content has been removed.
frame/
abort
onabort
Fires when an object/image is stopped from loading before completely loaded.
object
error
onerror
Fires when an object/image/frame cannot be loaded properly.
resize
onresize
Fires when a document view is resized.
scroll
onscroll
Fires when a document view is scrolled.
select
onselect
Fires when a user selects some text in a text field, including input and textarea.
change
onchange
Fires when a control loses the input focus and its value has been modified since gaining focus.
submit
onsubmit
Fires when a form is submitted.
HTML form
reset
onreset
Fires when a form is reset.
focus
onfocus
Fires when an element receives focus either via the pointing device or by tab navigation.
blur
onblur
Fires when an element loses focus either via the pointing device or by tabbing navigation.
JavaScript: Timeout
Syntax
Timeout = setTimeout(function-call-in-string, milliseconds)
clearTimeOut(Timeout)
e.g.
timeVar = setTimeout("timeoutFunction()", 10000);
clearTimeout(timeVar);
JavaScript: Interval
Syntax
Interval = setInterval(function-call-in-string, milliseconds)
clearInterval(Interval)
e.g.
timeVar = setInterval("intervalFunction()", 10000);
clearInterval(timeVar);
CSS: Defining in HTML Documents
Format
<STYLE TYPE="text/css">
tag { style-definition }
#id-name { style-definition }
tag#id-name { style-definition }
.class-name { style-definition }
tag.class-name { style-definition }
…
</STYLE>
style-definition = name1: v1 v2 …; name2: v1 v2 …; …
CSS: Defining In-line Styles
Format
<tag STYLE="style-definition"> … </tag>
e.g.
<H1 STYLE="font: bold large"> … </H1>
CSS: Linking
Format
<LINK REL=STYLESHEET TITLE="title" TYPE="text/css"
HREF="filename">
e.g.
<LINK REL=STYLESHEET TITLE="master style"
TYPE="text/css" HREF="styles.css">
CSS: Importing
Format
<STYLE TYPE="text/css">
@IMPORT URL(address);
</STYLE>
e.g.
<STYLE TYPE="text/css">
@IMPORT URL(http://localhost:8080/CSS/styles.css);
</STYLE>
CSS: Font Properties
font-family
font-size : small, large, x-large, xx-large, …
font-style : oblique, italic, normal
font-weight : normal, bold, bolder, lighter
font-variant : small-caps, normal
font : font-weight + font-size + font-style …
color : #RGB / black, white, red, green, …
text-decoration : underline, overline, line-through, blink
* RGB - Red(0…FF)+Green(0…FF)+Blue(0…FF)
e.g. #FF0000, #00FF00, #0000FF, #FFFFFF, #000000
CSS: Background Properties
background-color : #RGB / transparent
background-image : URL(address) / none
background-repeat : repeat, repeat-x, repeat-y, no-repeat
background-attachment : scroll, fixed
background-position : combination of top, center, bottom,
left, right / x% y%
background : background-color + image + repeat +
attachment + position
CSS: Text Align Properties
vertical-align : baseline, middle, sub, super, text-top, text-
bottom / top, bottom
text-align : left, center, right, justify
text-indent : nin, ncm, npx, n%
CSS: Spacing Properties
word-spacing : n, normal
letter-spacing : n, normal
line-height : n, n%, normal
white-space : normal, pre, nowrap
CSS: Box Properties (1)
margin-top : npx, n%, auto
margin-right : npx, n%, auto
margin-bottom : npx, n%, auto
margin-left : npx, n%, auto
margin
CSS: Box Properties (2)
border-width: thin, medium, thick, none
border-color: #RGB / black, red, green, …
border-style: none, dotted, dashed, solid, …
border-top: width style color
border-right: width style color
border-bottom: width style color
border-left: width style color
border
CSS: Box Properties (3)
padding-top : npx, n%, auto
padding-right : npx, n%, auto
padding-bottom : npx, n%, auto
padding-left : npx, n%, auto
padding
CSS: Box Properties (4)
width: npx
height: npx
e.g.
IMG { width: 250px; height: 250px }
float : left, right, none
e.g.
IMG { float: left; margin: 0px; border: none }
DOM: Page Elements
e.g.
<IMG NAME="aImg" SRC="home.gif" WIDTH="50"
HEIGHT="35" BORDER="1">
Object:
Attributes:
name
src
width
height
border
aImg
"aImg"
"home.gif"
50
35
1
DOM: Style Sheet Objects
e.g
<H1 ID=aH1 STYLE="color: blue; text-align: center;"> Head
</H1>
Object:
Attributes:
color
textAlign
aH1.style
'blue'
'center'
Note: text-align → textAlign
