Dynamic Web Authoring Week 1 Practical feedback 09/09/2015COM311, H ZHENG, C&M, UUJ1

Feedback 1 Mount P: drive in iMAC Set the right click of the Mouse Live link vs folder path Wrong: File://…. is NOT a live link Correct: /  home2/students/2137/b…/public_html/ folder or  home/students/2081/b…/public_html/ folder 09/09/2015 COM311, H ZHENG, C&M, UUJ 2

Feedback 2 Server space Bcode folder public_html => workspace => html html upload your work to blackboard update weekly learning log folder copy paste the live link ( to submission box 09/09/2015 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 09/09/2015 COM311, H ZHENG, C&M, UUJ 4

Web Programming Cascading Stylesheets 09/09/2015COM311, H ZHENG, C&M, UUJ5

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 09/09/2015 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 } 09/09/2015 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 09/09/2015 COM311, H ZHENG, C&M, UUJ 8

Embedded Style Sheets Placed within head section of document Embedded Style Syntax <!-- The style rules are placed here --> 09/09/2015 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; } 09/09/2015 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 09/09/2015 COM311, H ZHENG, C&M, UUJ 11.CSS example

Applying External Style Sheets 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 element is: Or CSS_external_ex1 09/09/2015 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 validator/ validator/ 09/09/2015 COM311, H ZHENG, C&M, UUJ 13

Web Programming XHTML – Extensible Hypertext Markup Language 09/09/ :56COM311, H ZHENG, C&M, UUJ14

Overview of XHTML The first version of XHTML, 1.0, was released in 2000 W3C 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 09/09/ :56COM311, H ZHENG, C&M, UUJ15

1609/09/ :56COM311, H ZHENG, C&M, UUJ16 XHTML standard structure <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " Page Titile ……

Using an XML declaration Start XHTML documents with the XML declaration to inform the application that it is handling XML. 09/09/ :56 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" " Three DTDs: Transitional Strict Frameset 09/09/ :56 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 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. 09/09/ :56 COM311, H ZHENG, C&M, UUJ 19

The Expanded HTML Tag The top-level node of an XHTML document must be an node. xmlns: XML namespace xml:lang: declare the language of the document 09/09/ :56 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 Some Data 09/09/ :56 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: Here’s a paragraph of text Correct: Here’s a paragraph of text 09/09/ :56 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. or 09/09/ :56 COM311, H ZHENG, C&M, UUJ 23

XTML Tags(4) 5.All attribute values must be placed inside quotes. e.g. Content 09/09/ :56 COM311, H ZHENG, C&M, UUJ 24

An XHTML Example(1) (Example 1) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " Sample XHTML Document Sample XHTML Document This very basic document is an XHTML document It has an xml version identifier It has a valid DTD All tags are closed 09/09/ :56 COM311, H ZHENG, C&M, UUJ 25

An XHTML Example(3) 09/09/ :56 COM311, H ZHENG, C&M, UUJ 26

XHTML Document Validation Go to W3C, Select Validate by File Upload 09/09/ :56 COM311, H ZHENG, C&M, UUJ 27

Dynamic Web Authoring JavaScript Basics COM311H Zheng, School of C&M, UUJ28

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=“ ” –Window.document.bgColor =“red”

Fundamental Concepts – 2 Various Properties Object PropertyProperty Description window 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. onloadSome action is performed when the document is loaded. onmouseover Some action is performed when the mouse is moved over something. onresizeSome action is performed when a page or element is resized. onfocusSome action is performed when a particular element gets focus. onkeydownSome action is performed when a key is pressed over an element. onkeypressSome action is performed when a key is pressed and released over an element. onkeyupSome action is performed when a key goes up over an element. Example: Image Swap, exerciseImage Swap

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