CSS XSLT DTD JS

“How to display HTML elements” External Style Sheets can save a lot of work. External Style Sheets are stored in CSS files. id Selector: The id selector is used to specify a style for a single, unique element. Ex: #para1 { text-align:center; color:red; }

Example:1 #para1 { text-align:center; color:red; } Hello World! This paragraph is not affected by the style.

Example:2 p.center { text-align:center; } This heading will not be affected This paragraph will be center-aligned.

There are three ways of inserting a style sheet: 1.External style sheet 2.Internal style sheet 3.Inline style ESS: ISS: hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");} IS: This is a paragraph.

Background color: body { background-color:#b0c4de; } My CSS web page! Hello world!

Backgroung image: body {background-image:url(‘imageex.gif');} Hello World!

Font size: h1,h2,p { color:green; } Hello World! Smaller heading! This is a paragraph.

Link: a:link {color:#FF0000;} a:visited {color:#00FF00;} a:hover {color:#FF00FF;} a:active {color:#0000FF;} This is a link Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective. Note: a:active MUST come after a:hover in the CSS definition in order to be effective.

List type: ul.a {list-style-type:circle;} ul.b {list-style-type:disc;} ul.c {list-style-type:square;} Circle type Tea Coca Cola Disc type Tea Coca Cola Square type Tea Coca Cola

Table properties: table, td, th { border:1px solid green; } th { background-color:green; color:white; } Firstname Lastname Savings Peter Griffin $100 Lois Griffin $150

XSLT XML Style Sheet Language

Elements: 1.The Element: A template contains rules to apply when a specified node is matched. 2.The Element: Extract the value of a selected node 3.The Element: Select every XML element of a specified node-set with the element 4.The Element: Sort the output in a node-set 5.The Element Put a conditional test against the content of an XML file

Example: (cd.xml) C book Bob Dylan USA Columbia C++ book Bonnie Tyler UK CBS Records

CD.xsl: My CD Collection Title Artist Country

Output:

element: My CD Collection Title Artist

Element: My CD Collection Title Artist

element:

DTD Document Type Definition

1.The purpose of a DTD (Document Type Definition) is to define the legal building blocks of an XML document. 2.A DTD defines the document structure with a list of legal elements and attributes.

]>

The Building Blocks of XML Documents Seen from a DTD point of view, all XML documents (and HTML documents) are made up by the following building blocks: 1.Elements 2.Attributes 3.Entities 4.PCDATA 5.CDATA

1.Element:

2.Attribute:

Example: Write an XML file which will display the Book information which includes the following: Title of the book Author Name ISBN number Publisher name Edition Price Write a Document Type Definition (DTD) to validate the above XML file. Display the XML file as follows. The contents should be displayed in a table. The header of the table should be in color GREY. And the Author Name column should be displayed in one color and should be capitalized and in bold. Use your own colors for remaining columns. Use XML schemas XSL and CSS for the above purpose. Note: Give at least for 4 books. It should be valid syntactically.

JAVA SCRIPT

Divided into 3 parts 1. Core – heart of the language, includes operators, expressions, stmts, subprograms. 2. Client-side – Collection of objects that support browser and interactions with users( embedded with HTML) 3. Server-side – useful on web server(less frequently used)

Java Vs Javascript Java supports Oops concept whereas the JavaScript does not support Java is a strongly typed language, JavaScript does not provide ( dynamically typed) Objects in Java are static and are dynamic in JavaScript

* JavaScript is the scripting language of the Web. * JavaScript is used in billions of Web pages to add functionality, validate forms, communicate with the server, and much more.

Example: function displayDate() { document.getElementById("demo").innerHTML=Date(); } My First JavaScript This is a paragraph. Display Date. document.getElementById returned a reference to our HTML element demo Each HTML element has an innerHTML property that defines both “the HTML code and the text” that occurs between that element's opening and closing tag.

Variable declaration: var x=5; var y=6; var z=5+6; document.write(x + " "); document.write(y + " "); document.write(z + " ");

Ex:1 var name1="Dhruv Gautham"; var name2='Jayadevi'; var name3="Kanishka"; var name4="Khushal'Jain'"; var name5='Rachit "agarwal" '; document.write(name1 + " ") document.write(name2 + " ") document.write(name3 + " ") document.write(name4 + " ") document.write(name5 + " ")

Javascript objects: var person=new Object(); person.firstname="Rineeth"; person.lastname="Ajay"; person.age=22; person.eyecolor="blue"; document.write(person.firstname + " is " + person.age + " years old." + " Eyes are" + person.eyecolor);

Function: Click the button!! Click Me!! function myFunction(name,job) { alert("Welcome " + name + ",To the " + job); }

Control statements: Click the button to get a time-based greeting. Try it function myFunction() { var x=""; var time=new Date().getHours(); if (time<10) { x="Good morning"; } else if (time<20) { x="Good day"; } else { x="Good evening"; } document.getElementById ( "demo").innerHTML=x; }

For Loop: Click the button to loop through a block of code five times. Try it function myFunction() { var x=""; for (var i=0;i<5;i++) { x=x + "The number is " + i + " "; } document.getElementById("demo").innerHTML=x; }

While loop: Click the button to loop through a block of as long as i is less than 5. Try it function myFunction() { var x="",i=0; while (i<5) { x=x + "The number is " + i + " "; i++; } document.getElementById("demo").innerHTML=x; }

JavaScript: Objects

Types of objects: 1.Math Object 2.String Object 3.Date Object 4.Document Object 5.Window Object

abs(x) ceil(x) floor(x) cos(x) sin(x) sqrt(x) tan(x) exp(x) log(x) max(x,y) min(x,y) pow(x,y) Math objects:

String Objects 1.charAt( index ) 2.charCodeAt( index ) 3.concat( string ) 4.fromCharCode( value1, value2, ) 5.indexOf( substring, index ) 6.lastIndexOf( substring, index ) 7.slice( start, end ) 8.split( string ) 9.substr( start, length ) 10.substring( start, end ) 11.toLowerCase() 12.toUpperCase() 13.toString() 14.valueOf()

Date Objects getDate() getUTCDate() getDay() getUTCDay() getFullYear() getHours() getMilliseconds() getMinutes() getMonth() getSeconds() setDate( val ) setFullYear( y, m, d ) setHours( h, m, s, ms ) setMonth( m, d ) setSeconds( s, ms ) setMinutes( m, s, ms ) toString() valueOf()

Document Objects write( string ) writeln( string ) document.cookie document.lastModified Window Objects open( url, name, options ) prompt( prompt, default ) close() window.focus() window.document window.closed window.opener

Document Object Model – Your web browser builds a model of the web page (the document) that includes all the objects in the page (tags, text, etc) – All of the properties, methods, and events available to the web developer for manipulating and creating web pages are organized into objects – Those objects are accessible via scripting languages in modern web browsers