Dynamic Web Authoring
Week 1 Practical feedback
23/03/2016
COM311, H ZHENG, C&M, UUJ
1
Feedback 1
Mount P: drive in iMAC
https://scm.ulster.ac.uk/technicalsupport.php
 Set the right click of the Mouse
 Live link vs folder path
• Wrong: File://…. is NOT a live link
• Correct: https://scm.ulster.ac.uk/~b…. /
 home2/students/2137/b…/public_html/
folder or
 home/students/2081/b…/public_html/
folder

23/03/2016
COM311, H ZHENG, C&M, UUJ
2
Feedback 2


Server space
•
•
•
•
•
http://scm.ulster.ac.uk
Bcode folder
public_html => https://scm.ulster.ac.uk/~BCode
workspace => https://scm.ulster.ac.uk/~BCode/workspace/
http://scm.ulster.ac.uk/~BCode/workspace/com311/com311.
html
upload your work to blackboard
•
•
update weekly learning log folder
copy paste the live link (https://scm.ulster.ac.uk/~B……)
to submission box
23/03/2016
COM311, H ZHENG, C&M, UUJ
3
Feedback 3


Mac / Window system? – preferred
Mac, window can also be used, if you
don’t have a Mac， you can work on PC
at home and FTP to your P driver
Find more information from school
website, technical support
23/03/2016
COM311, H ZHENG, C&M, UUJ
4
Web Programming
Cascading Stylesheets
23/03/2016
COM311, H ZHENG, C&M, UUJ
5
What is Cascading Stylesheets?

Control design aspects of an HTML document

Why are they called Cascading
Stylesheets ?

Contain rules that define appearance of
elements
Ways of using cascading style sheets

• Inline styles
• Embedded style sheets
• External style sheets
23/03/2016
COM311, H ZHENG, C&M, UUJ
6
Syntax


CSS Rules Composed of Three Parts
• Selector
• Property
• Value
selector { property:value; property:value…}
Example
h1{
font-style: italic;
color: blue
}
23/03/2016
COM311, H ZHENG, C&M, UUJ
7
Inline Styles




allows for a brief deviation of other
defined styles.
adding the style attribute to an HTML
element
does not let us achieve the separation of
style from the document
Syntax
<element style=“declaration”>
23/03/2016
COM311, H ZHENG, C&M, UUJ
8
Embedded Style Sheets


Placed within head section of document
Embedded Style Syntax
<style type=“text/css”>
<!-The style rules are placed here
-->
</style>
23/03/2016
COM311, H ZHENG, C&M, UUJ
9
Creating a Style Class



Define different styles for the same element
or group
Defined within an embedded or external style
sheets
Syntax:
selector.classname {
property: value;
property: value;
}
<selector class=classname>
23/03/2016
COM311, H ZHENG, C&M, UUJ
10
External Style Sheets




Sometimes referred to as a linked style
sheet
Stored separately from the HTML document
• Contain the same rules
Can be used to apply the same style to
every page in a Web site
Text files that have a .css extension
.CSS example
23/03/2016
COM311, H ZHENG, C&M, UUJ
11
Applying External Style Sheets

<link > element is used to apply an external style
sheet to an HTML document
•
•
•

href attribute is used to provide the name and location of
the style sheet
rel attribute is used to specify the relationship of the page
containing the link to the other document.
type attribute is used to tell the browser what type of file it
is reading
basic syntax for using the <link> element is:
<link rel=Stylesheet href=exstyle.css type=“text/css”/>
Or
<link rel=Stylesheet href=“url” type=“text/css”/>
CSS_external_ex1
23/03/2016
COM311, H ZHENG, C&M, UUJ
12
More on CSS







Defining HTML tags
Defining classes for any tag
Defining ID Selectors to identify an object (vs
element?)
contextual styles: descendant selectors, child
selectors(>), adjacent sibling selectors(+), universal
selectors(*)
Defining selectors based on tag attributes
Pseudo class
Try the css validator http://jigsaw.w3.org/cssvalidator/
23/03/2016
COM311, H ZHENG, C&M, UUJ
13
Web Programming
XHTML – Extensible
Hypertext Markup
Language
23/03/2016 15:08
COM311, H ZHENG, C&M, UUJ
14
Overview of XHTML





The first version of XHTML, 1.0, was released in 2000
W3Chttp://www.w3.org/MarkUp/ description of XHTML :
•
XHTML 1.0 reformulates HTML as an XML application. This makes it
easier to process and easier to maintain. XHTML 1.0 borrows elements
and attributes from W3C's earlier work on HTML 4, and can be interpreted
by existing browsers, by following a few simple guidelines. This allows you
to start using XHTML now!
XHTML is extensible meaning that its element set is not finite,
like that of HTML. Additional elements or other XML-based
languages can be integrated with XHTML
XHTML consists of the element set of HTML reformulated to
adhere to the syntax rules of XML
XHTML is compatible with existing web browser technology
and will be compatible with future XML-based clients
23/03/2016 15:08
COM311, H ZHENG, C&M, UUJ
15
XHTML standard structure
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Page Titile</title>
</head>
<!--- Page Content -->
<body>
……
</body>
</html>
23/03/2016 15:08
COM311, H ZHENG, C&M, UUJ
16
Using an XML declaration
Start XHTML documents with the XML
declaration to inform the application that
it is handling XML.
<?xml version="1.0" encoding=“utf-8"?>

23/03/2016 15:08
COM311, H ZHENG, C&M, UUJ
17
The New Document Type
Definition (1)
XHTML documents have to have a Document Type Definition
(DTD).
 Format:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Three DTDs:
•
•
•
Transitional
Strict
Frameset
23/03/2016 15:08
COM311, H ZHENG, C&M, UUJ
18
The New Document Type
Definition (2)

Three DTDs:
• Transitional should be used in pages which
•
•
include some presentational markup such as
<font> tags
Strict is used when you want your documents
to be fully compliant with the standard. All
presentational control is done through the use
of cascading stylesheets
Frameset lets you partition the screen into a
number of separate frames.
23/03/2016 15:08
COM311, H ZHENG, C&M, UUJ
19
The Expanded HTML Tag

The top-level node of an XHTML
document must be an <html> node.
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en" >
xmlns: XML namespace
xml:lang: declare the language of the
document
23/03/2016 15:08
COM311, H ZHENG, C&M, UUJ
20
XHML Tags (1)


The tags remain the same as in HTML
The way in which may be used have
been tighten up
1. Nested tags must be terminated in the
reverse of the order in which they were
declared:
e.g <tr><td> Some <b>Data</b> </td></tr>
23/03/2016 15:08
COM311, H ZHENG, C&M, UUJ
21
XHTML Tags (2)
2. All XHTML tags and attributes must be in
low-case. (XML is case-sensitive. )
3. All tags which have, or may have, content
must have end tags.
Incorrect: <p>
<p> Here’s a paragraph of text
Correct:
<p></p>
<p>Here’s a paragraph of text</p>
23/03/2016 15:08
COM311, H ZHENG, C&M, UUJ
22
XTML Tags(3)
4. Empty elements, tags which do not
contain content, must either have end
tags or to be terminated properly. A
space should be placed before the
terminating slash.
e.g. <hr></hr>
or
<hr />
23/03/2016 15:08
COM311, H ZHENG, C&M, UUJ
23
XTML Tags(4)
5. All attribute values must be placed
inside quotes.
e.g. <hr width="50%"></hr>
<p align="center">Content</p>
<table rows="3">
23/03/2016 15:08
COM311, H ZHENG, C&M, UUJ
24
An XHTML Example(1)
(Example 1)
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title> Sample XHTML Document </title>
</head>
<body>
<h1>Sample XHTML Document</h1>
<hr />
<p>This very basic document is an XHTML document</p>
<ul>
<li>It has an xml version identifier</li>
<li>It has a valid DTD</li>
<li>All tags are closed</li>
</ul>
<hr />
</body>
</html>
23/03/2016 15:08
COM311, H ZHENG, C&M, UUJ
25
An XHTML Example(3)
23/03/2016 15:08
COM311, H ZHENG, C&M, UUJ
26
XHTML Document Validation

Go to W3C,
http://validator.w3.org/

Select Validate by
File Upload
23/03/2016 15:08
COM311, H ZHENG, C&M, UUJ
27
Dynamic Web Authoring
JavaScript Basics
COM311
H Zheng, School of C&M, UUJ
28
Objectives




To discover the reasons to learn
JavaScript
To learn the history of JavaScript
To master the fundamental concepts
To become familiar with the Document
Object Model
COM311
H Zheng, School of C&M, UUJ
29
Why Learn JavaScript?






Broad support among web browsers
Vast libraries of scripts available online
Applicable to other host environments
Allows use of reusable code libraries
Similar syntax to C, C++, and Java
Encourages creative problem solving
COM311
H Zheng, School of C&M, UUJ
30
But

JavaScript is NOT Java!!
COM311
H Zheng, School of C&M, UUJ
31
A Little History

JavaScript
•
•
•
Invented by Eich at Netscape in 1995, originally
called LiveScript in Netscape Navigator
In Navigator 2.0, name changed to JavaScript
Became popular with Navigator 3
• Dynamic effects: image swapping, scrolling text in
the status bar, form validation …


Jscript: Microsoft’s competing language
ECMAScript:
•
•
International, standardized version (1997)
Both versions (JavaScript and JScript) conform
to the standard
COM311
H Zheng, School of C&M, UUJ
32
JavaScript (1)




An object-oriented programming language
JavaScript code is integrated directly into
common HTML documents
Interpreted by the web browser when the
document is loaded
Two formats:
•
Client-side
•
Server-side
• Program runs on client (browser)
• Program runs on server
• Proprietary to web server platform
COM311
H Zheng, School of C&M, UUJ
33
JavaScript (2)
Three parts:
 Core JavaScript
 Document object model (DOM)
 Browser Object Model (BOM)
COM311
H Zheng, School of C&M, UUJ
34
The Document Object Model
(DOM) (1)

What is DOM?
•
•
•
•
Internal road map of objects on a web page, allows
programmers generic access - adding, deleting, and
manipulating - of all styles, attributes, and elements in a
document.
a platform- and language-neutral interface that will allow
programs and scripts to dynamically access and update
the content, structure and style of documents.
A standard for representing HTML or XML and related
formats.
is likely to be best suited for applications where the
document must be accessed repeatedly or out of
sequence order. Hierarchical model of web browser
objects
COM311
H Zheng, School of C&M, UUJ
35
DOM (2)

All the elements that go into making a page are
objects.
•
Document, forms, images, tables, button, ….

All objects have properties (color, length, size…), with
values that define them.

Actions that your script performs on or with
objects are called methods (alert, write, ….) These
are functions built-into objects.

Dealing with user-controlled events like clicks and
mouse movement is accomplished through commands
called event handlers (onclick, onsubmit, ….. )
COM311
H Zheng, School of C&M, UUJ
36
Fundamental Concepts - 1

Instance
Objects
•
Window
• Document
•
•
•
•
Form
• History
• Location
Navigator
Car, staff….
eg.
• window.document
• staff.id
COM311
– John.id
 Properties
– size, color, id…
 Values
– object name . property name
= “new value”
– John.id=“12528956”
– Window.document.bgColor
=“red”
H Zheng, School of C&M, UUJ
37
Fundamental Concepts – 2
Various Properties
Object
window
Property
Status
length
document bgColor
fgColor
lastModified
title
linkColor
history
length
current
next
previous
location hostname
form
name
method
action
COM311
Property Description
sets the message displayed in the status bar.
contains the number of frames in the window.
specifies the background color of the current document.
specifies the color of the text on the document.
specifies the date when the document was last modified.
specifies the title of the document.
specifies the color of the links on the document.
contains the number entries in the history list.
specifies the URL of the current history entry.
specifies the URL of the next entry in the history list.
specifies the URL of the previous entry in the history list.
will specify the hostname of the server.
specifies the name of the form.
specifies how the input information sent to the server.
specifies the destination for the data submitted from form
H Zheng, School of C&M, UUJ
38
Fundamental Concepts – 3
Events And Event Handlers

Events and Event handlers
onclick Some action will be performed when any mouse
button is clicked.
onload
Some action is performed when the document is
loaded.
onmouseover Some action is performed when the mouse is moved over
something.
onresize
Some action is performed when a page or element is
resized.
onfocusSome action is performed when a particular element gets focus.
onkeydown
Some action is performed when a key is pressed over an
element.
onkeypress
Some action is performed when a key is pressed
and released over an element.
onkeyup
Some action is performed when a key goes up over an
element.
Example: Image Swap, exercise
COM311
H Zheng, School of C&M, UUJ
39
Exercise /Practical


Apply xhtml or html5, CSS and
accessibility standards to html pages you
designed in week 1
Create your first javascript page
Next Week Pratical

Apply accessibility standards to html
pages you designed in week 1 and 2