2. XSD - Restriction
Restriction element is used to define accepted values that an XML element can
take.
Restrictions on XML elements are called facets.
Syntax :
<xs:restriction base = "element-type"> restrictions </xs:restriction>
base - Type of the Element on which restriction is to be applied.
For example : <xs:restriction base = "xs:integer"> specifies that this
restriction is specific to an element of type int.
restriction - restriction is normally a range of conditions to be applied on the
element's value. In this example, we've set a restriction
on marks that marks should be in range of 0 to 100 with
both values are included.
<xs:minInclusive value = "0"/>
<xs:maxInclusive value = "100"/>
3. Types of Restrictions
1 ) maxInclusive : defines upperbounds for numeric values including this number.
2 ) minInclusive : defines lowerbounds for numeric values excluding this number.
Example : Marks should be in range of 0 to 100.
<xs:element name = "marks">
<xs:simpleType>
<xs:restriction base = "xs:integer">
<xs:minInclusive value = "0"/>
<xs:maxInclusive value = "100"/>
</xs:restriction>
</xs:simpleType>
</xs:element>
4. 3 ) enumeration : defines a list of values which are acceptable.
Example : Grades should only be A, B or C.
<xs:element name = "grades">
<xs:simpleType>
<xs:restriction base = "xs:string">
<xs:enumeration value = "A"/>
<xs:enumeration value = "B"/>
<xs:enumeration value = "C"/>
</xs:restriction>
</xs:simpleType>
</xs:element>
5. 4 ) pattern : defines the exact sequence of characters identified by the pattern that
are acceptable.
Example : firstname should be in alphabets only.
<xs:element name = "firstname">
<xs:simpleType>
<xs:restriction base = "xs:string">
<xs:pattern value = "[a-z]"/>
</xs:restriction>
</xs:simpleType>
</xs:element>
6. 5 ) length : defines length in terms of characters of string or items in a list(zero or
more).
Example : value must be exactly eight characters
<xs:element name="password">
<xs:simpleType>
<xs:restriction base="xs:string">
<xs:length value="8"/>
</xs:restriction>
</xs:simpleType>
</xs:element>
7. 6 ) maxLength : defines maximum length in terms of characters of string or items
in a list(zero or more).
7 ) minLength : defines minimum length in terms of characters of string or items in
a list(zero or more).
Example : value must be minimum five characters and maximum eight
characters
<xs:element name="password">
<xs:simpleType>
<xs:restriction base="xs:string">
<xs:minLength value="5"/>
<xs:maxLength value="8"/>
</xs:restriction>
</xs:simpleType>
</xs:element>
8. XSL Element
The <xsl:element> element is used to create an element node in the output
document.
Syntax:
<xsl:element
name="name"
namespace="URI"
use-attribute-sets="namelist">
<!-- Content:template -->
</xsl:element>
9. Example using for-each:
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html xmlns="http://www.w3.org/1999/XSL/Transform>
<body>
<h2>My CD Collection</h2>
<table border="1">
<tr bgcolor="#ff00ff">
<th>Title</th>
<th>Artist</th>
</tr>
19. DHTML
DHTML, or Dynamic HTML, is an umbrella term for 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).
DHTML allows scripting languages to change variables in a web page's definition
language, which in turn affects the look and function of otherwise "static" HTML page
content, after the page has been fully loaded and during the viewing process. Thus the
dynamic characteristic of DHTML is the way it functions while a page is viewed, not in
its ability to generate a unique page with each page load.
A dynamic web page is a broader concept, covering any web page generated differently
for each user, load occurrence, or specific variable values. This includes pages created
by client-side scripting, and ones created by server-side scripting (such as PHP, Perl,
JSP or ASP.NET) where the web server generates content before sending it to the client.
21. <!-- Often the code is stored in an external file; this is done by linking the file that
contains the JavaScript. This is helpful when several pages use the same script:
-->
<script src="myjavascript.js"></script>
</body>
</html>
22. JavaScript
JavaScript crcan eate dynamic HTML content:
document.write():can be used to display dynamic content to a web page.
Example
Using JavaScript to display the current date:
<html>
<body>
<script type="text/javascript">
document.write(Date());
</script>
</body>
</html>
23. JavaScript and the HTML DOM
To change the content of an HTML element use:
document.getElementById(id).innerHTML=new HTML
To change the attribute of an HTML element use:
document.getElementById(id).attribute=new value
JavaScript and HTML Events
New to HTML 4 is the ability to let HTML events trigger actions in the browser,
like starting a JavaScript when a user clicks on an HTML element.
To execute code when a user clicks on an element, use the following event
attribute:
onclick=JavaScript
JavaScript and CSS
With HTML 4, JavaScript can also be used to change the style of HTML elements.
To change the style of an HTML element use:
document.getElementById(id).style.property=new style
24. Document Object Model (DOM)
The Document Object Model (DOM) is a cross-platform and language-independent
application programming interface that treats an HTML, XHTML, or XML document as
a tree structure wherein each node is an object representing a part of the document. The
objects can be manipulated programmatically and any visible changes occurring as a
result may then be reflected in the display of the document.
The DOM API is the foundation of DHTML, providing a structured interface that
allows access and manipulation of virtually anything in the document. The HTML
elements in the document are available as a hierarchical tree of individual objects,
meaning you can examine and modify an element and its attributes by reading and
setting properties and by calling methods. The text between elements is also available
through DOM properties and methods.
25. The DOM presents HTML as a tree-structure (a node tree), with
elements, attributes, and text:
26. Examples
innerHTML
How to access and change the innerHTML of an element.
Attribute change
How to access an image element and change the "src" attribute.
HTML DOM
The HTML DOM is:
A standard programming interface for HTML
Platform- and language-independent
A W3C standard
The HTML DOM defines the objects and properties of all HTML elements, and
the methods (interface) to access them.
27. Using the HTML DOM to Change an HTML Element
The HTML DOM can be used to change the content of an HTML element:
Code:
<html>
<body>
<h1 id="header">Old Header</h1>
<script type="text/javascript">
document.getElementById("header").innerHTML="New Header";
</script>
</body>
</html>
28. Using the HTML DOM to Change an HTML Attribute
The HTML DOM can be used to change the attribute of an HTML element:
Code:
<html>
<body>
<img id="image" src="smiley.gif">
<script type="text/javascript">
document.getElementById("image").src="landscape.jpg";
</script>
</body>
</html>
29. DHTML Event
Events usually occur due to users actions
-For example, pressing the keyboard, changing a text field, moving the mouse
over an element, etc.
An event is represented by an event object that is created upon the event occurrence
Every event has an associated target element
-For example, the image over which the mouse clicks
30. DHTML Event Handlers
An event handler allows you to execute code when an event occurs.
Events are generated by the browser when the user clicks an element, when the page loads,
when a form is submitted, etc.
Events are represented by an event object as a member variable of the window object, such
as window.event or whether as a parameter to your function Event handlers are Javascript
code that are not include inside the <script> tags, but rather, inside the html tags, that
execute Javascript when some events fire, such as pressing a button, moving your mouse
over a link, submitting a form, etc.
The basic syntax of these event handlers is : name_of_handler="JavaScript code here“
For Example:
<a onclick="alert('Hello World!')" href="javascript:;" class="link">Click Here</a>
31. Event Functions
onclick:
The onclick Event is used to invoke Javascript upon clicking a link or form boxes as in
the below example:
<form name="myalertform">
<input onclick="alert('hello World')" type="button" value="Click me"
name="test" class="link">
</form>
32. onload:
The onload function invokes Javascript after the page has finished loading.
For example:
<form name="myalertform">
<input onload="alert('hello World')" type="button" value="Click me"
name="test" class="link">
</form>
33. onmouseover:
The onmouseover: function is used to invoke Javascript when the mouse passes
over a link.
<a onmouseover="status='You activated this message when you moused over the
link!';return true" onmouseout="status=' '" href="javascript:;" class="link">
Mouse over this link and look the status bar message.
</a>
34. onfocus:
The onfocus event occurs when an element gets focus.
The onfocus event is most often used with <input>, <select>, and <a>.
<html>
<head>
<script type="text/javascript">
function message()
{
alert("This alert box was triggered by the onfocus event
handler");
}
</script>
</head>
<body>
<form>
Enter your name: <input type="text" onfocus="message()" size="20">
</form>
</body>
</html>
35. Common Event Handlers:Given below is a list of common Javascript event handlers:
Event Occurs when
onabort a user aborts page loading
onblur a user leaves an object
onchange a user changes the value of an object
onclick a user clicks on an object
ondblclick a user double-clicks on an object
onfocus a user makes an object active
onkeydown a keyboard key is on its way down
onkeypress a keyboard key is pressed
onkeyup a keyboard key is released
onload a page is finished loading. Note: In Netscape this event occurs during the loading of a page!
onmousedown a user presses a mouse-button
onmousemove a cursor moves on an object
onmouseover a cursor moves over an object
onmouseout a cursor moves off an object
onmouseup a user releases a mouse-button
onreset a user resets a form
onselect a user selects content on a page
onsubmit a user submits a form
onunload a user closes a page
36. Here below the parameters in which they can be used
Handlers Can be used with these tags
onAbort images
onBlur windows, all form elements, frames
onClick buttons, radio buttons,checkboxes, submit buttons, links
onChange text fields, textareas, select lists
onError windows, images
onFocus windows, frames, and all form elements
onLoad body, images
onMouseover areas, links
onMouseout links
onReset forms
onSelect text fields, textareas
onSubmit submit button
onUnload body
37. DHTML - CSS
Cascading Style Sheets are a simple way to control style without compromising
structure. They separate the style (visual design elements) from the structure of
documents.
CSS is a form of HTML mark-up that provides web designers with greater control
over typography and spacing between elements on a page.
Changing the style can affect an entire document.
Style sheets can be shared by multiple documents.
So changing a style can affect an entire website
CSS overrides the browser's default settings
38. WHAT DOES CSS LOOK LIKE?
The basic template for CSS code looks like this
Tag: {Property: value; Property2: value2}
Tag - The element that will be affected
Property - What part of the selector will be affected
Value - How it will be affected
A CSS declaration has two parts:
-a property (”font-size” or “color”)
and a value ( “10pt” or "red").
The basic syntax of a rule
-selector {property 1: value 1; property 2: value: 2}
Examples:
-P {font-size: 10pt; color: red}
-H1 {FONT-SIZE: 9pt; FONT-WEIGHT: bold}
39. Linked Global Local style sheet definitions
Local (inline) definitions replace the <FONT> definitions for typeface,
font size, color and margins, etc.
Global (embedded) declarations are defined within
<STYLE></STYLE> pairs, usually in header.
Linked (external) stylesheets use separate .css files, and link to them
using :
<link rel="stylesheet" href="style.css" type="text/css">
40. Types of CSS
Inline:
<h3 style="font-weight: bold">this will be bold</h3>
Internal :
<HEAD>
<STYLE TYPE="text/css">
<!- -
Tag: {Property: value; Property2: value2}
- ->
</STYLE>
</HEAD>
41. Types of CSS
External:
<HEAD>
<LINK REL="STYLESHEET" HREF="/PATH/SHEET.CSS TYPE="TEXT/CSS">
</HEAD>
The SHEET.CSS file would then contain all the style-sheet code which would be
applied to any page that calls it using the code above.
43. DHTML CSS Positioning
First, the element must specify the position attribute (relative or absolute).
Then we can set the following CSS-P attributes:
left - the element's left position
top - the element's top position
visibility - specifies whether an element should be visible or hidden
z-index - the element's stack order
filter - add more style effects to your text and images
For example:
<div style="position:relative;
font-size:50px; z-index:2;">LAYER 1</div>
<div style="position:relative;
top:-50; left:5; color:red;
font-size:80px; z-index:1">LAYER 2</div>
44. Relative Positioning Relative positioning changes the position of the HTML element relative to where it normally appears. So
"left:20" adds 20 pixels to the element's LEFT position.
<html>
<head>
<style>
h1
{
position:relative;
left:40px;
}
</style>
</head>
<body>
<h1>Heading A</h1>
<p>This is a paragraph.</p>
</body>
</html>
45. Absolute Positioning
An element with position: absolute is positioned at the specified coordinates relative to your
screen top-left corner.
<html>
<head>
<style>
h1.x
{
position:absolute;
left:100px;
top:150px;
}
</style>
</head>
<body>
<h1 class="x">This is a heading</h1>
</body>
</html>
46. z-index
The z-index property specifies the stack order of an element.
An element with greater stack order is always in front of an element with a lower stack order.
For example:
<style>
img.x
{
position:absolute;
left:0px;
top:0px;
z-index:1;
}
</style>
47. Change Background Color
The backgroundColor property sets or returns the background color of an element.
For example:
<html>
<head>
<script type="text/javascript">
function bgChange(bg)
{
document.body.style.background=bg;
}
</script>
</head>
<body>
<b>Mouse over the squares and the background color will change!</b>
