Dynamic Web Authoring

Week 1 Practical feedback

19/04/23 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

19/04/23 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

19/04/23 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

19/04/23 COM311, H ZHENG, C&M, UUJ 4

Web Programming

Cascading Stylesheets

19/04/23 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

19/04/23 COM311, H ZHENG, C&M, UUJ 6

Syntax

CSS Rules Composed of Three Parts

• Selector

• Property

• Valueselector { property:value; property:value…}

Exampleh1{

font-style: italic; color: blue

}

19/04/23 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”>

19/04/23 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>

19/04/23 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>

19/04/23 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

19/04/23 COM311, H ZHENG, C&M, UUJ 11

.CSS example

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

19/04/23 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/css-

validator/

19/04/23 COM311, H ZHENG, C&M, UUJ 13

Web Programming

XHTML – Extensible Hypertext Markup

Language

19/04/23 13:12 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

19/04/23 13:12 COM311, H ZHENG, C&M, UUJ 1515

1619/04/23 13:12 COM311, H ZHENG, C&M, UUJ 16

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>

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"?>

19/04/23 13:12 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

19/04/23 13:12 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.

19/04/23 13:12 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

19/04/23 13:12 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 up1. 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>

19/04/23 13:12 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>

19/04/23 13:13 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 />

19/04/23 13:13 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">

19/04/23 13:13 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>

19/04/23 13:13 COM311, H ZHENG, C&M, UUJ 25

An XHTML Example(3)

19/04/23 13:13 COM311, H ZHENG, C&M, UUJ 26

XHTML Document Validation

Go to W3C, http://validator.w3.org/

Select Validate by File Upload

19/04/23 13:13 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

• Program runs on client (browser)• Server-side

• 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

Objects• Window

• Document• Form

• History

• Location

• Navigator

• Car, staff….

• eg. • window.document

• staff.id

COM311 H Zheng, School of C&M, UUJ 37

Instance– John.id

Properties

– size, color, id… Values

– object name . property name = “new value”

– John.id=“12528956”

– Window.document.bgColor=“red”

Fundamental Concepts – 2Various PropertiesObject Property Property Descriptionwindow Status sets the message displayed in the status bar.

length contains the number of frames in the window.document bgColor specifies the background color of the current document. fgColor specifies the color of the text on the document. lastModified specifies the date when the document was last modified. title specifies the title of the document.

linkColor specifies the color of the links on the document.history length contains the number entries in the history list.

current specifies the URL of the current history entry. next specifies the URL of the next entry in the history list.

previous specifies the URL of the previous entry in the history list.location hostname will specify the hostname of the server.form name specifies the name of the form.

method specifies how the input information sent to the server. action specifies the destination for the data submitted from form

COM311 H Zheng, School of C&M, UUJ 38

COM311 H Zheng, School of C&M, UUJ 39

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.

onfocus Some 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

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