Class-1:
Cascading Style Sheets and XML
Topics:
Cascading Style Sheets, style rules in CSS, naming style rules
(class), priority of styles, link tag to refer to CSS, purpose of
CSS
xml, hierarchical data organization, root element, DTD
grammar file for xml, xml file reference to its DTD file
Developing example - css
1.
2.
3.
4.
5.
6.
7.
xx.css starts as expCSS00.css
define xx.html as blank page - with link to xx.css – see cyan page
define class .reddish with background-color red and use in body tag
add p tag (with multiple breaks to fatten up) and move reddish to p.
add p.bluish to a new p – see blue background; also add same class to
body tag – but no effect because its for p not body
priority of styles – add style = "background:tan" to body and see overrides
default body color
emphasize link tag in head:
<link rel="stylesheet" type="text/css" href="xx.css"></link>
Developing example - xml
1. make a basic xml file – draw a tree first – roster (root element) – student
with major, gpa, name (first & last) and at top of xml file
<?xml version="1.0" ?>
2. drop xml in browser – note collapse-expand behavior
3. note error if no root, or case-sensitive error with tags, or duplicate opening
tag, contrast IE and Netscape (with javascript console on)
4. data type definition file – root and first category, quantifiers (+, ?, *), leaf
elements (#PCDATA), case & space sensitive:
<!ELEMENT element ( sub1, sub2, ... >
5. xml reference to the defining dtd file:
<!DOCTYPE rootElementName SYSTEM "dtdFileName.dtd">
Class-2:
XML, HTML and Cascading Style Sheets
Topics:
1.
2.
3.
Assignment 06 – xml – css- html – demo, javascript to generate xml-html.
Accessing data via html - only high level element access – demo– then return to
– develop first without DTD – just xml & html.
RGB - colors notations - expCSS000.css & 001.html – explain by modifying.
both #hhhhhh and rgb(x, y, z) notations.
In-class lab: The purpose of this lab is to illustrate how an HTML page can
retrieve data from an xml file.
Make up some xml, corresponding DTD, and html to access it, and css style rules for
html. One possibility is:
1. XML: employees, name, salary, social security number, address, street, town,
state, zipcode, undergraduate degree
2. DTD: undergraduate degree – one or more
3. HTML page - table to capture name and salary –also use styles from style sheet –
include some paragraphs subject to style rules, use tagName (like for body),
className, and tagName.className selectors.
4. CSS – use some colors – using #xxxxxx and rgb (xx, xx, xx) notation.
Steps: These can be done in various orders depending on what you want to
experiment with first.
1. XML: Make up the hierarchical data organization and sample data for the xml file
and test its display in the browser. Use IE. Include the xml introductory tag:
<?xml version="1.0" ?>
and an appropriate root element. First implement it for a simplified, preliminary
subset of characteristics of employees: name, salary, ssn. Use copy/paste to
quickly generate multiple elements.
2. HTML/XML: Create an HTML file with some preliminary paragraph tags.
3. HTML/XML: Add a cross-reference in the HTML file to the xml file it access:
<xml id="internalName" src = "xmlFileName.xml" />
4. HTML/XML: Add a table/tbody template for names to the HTML file. Use the
datasrc attribute in the table tag:
datasrc = "#internalName"
Bracket the 'dynamic' row with a <tbody> tag. Define the <td> cell contents to be
retrieved from the xml file with a <div tag with a dataFld attribute like:
<div dataFld = "xmlElementName" />
5. HTML/XML: Add extra fields for salary to the HTML table.
6. CSS/XML: Create a CSS file illustrating a variety of rules/selector types.
7. CSS/XML: Cross-reference the CSS file from the HTML file.
8. DTD/XML: Develop a preliminary DTD file. Watch out for the case-sensitive
and white-space sensitive restrictions of the DTD. The definition tags have the
form:
<!ELEMENT elementName (sub1, sub2, etc)>
9. DTD/XML: Add a cross-reference in the xml file to the DTD file it depends on
and then test the xml again. The cross-reference has the form:
<!DOCTYPE rootElementName SYSTEM "dtdFileName.dtd">
assuming the DTD is in the same directory. Try the HTML file again in this
context.
10. DTD/XML: Expand the types of elements in the xml file to include the more
deeply structured element address, etc.
11. DTD/XML: Expand the existing DTD to reflect the expanded xml file.
12. CSS?XML: Separately develop a CSS file for the xml file only.
13. CSS?XML: Add a cross-reference in the xml file to the CSS file it depends on:
<?xml-stylesheet type="text/css" href="xmlCSS01.css" ?>
Class-3:
XML/HTML/CSS and In-class Lab
Topics:
1.
2.
3.
Assignment 06 – demonstrate challenge variation with filename and multiple
element name inputs.
Using CSS for XML files: xmlCSS001.css & .xml – explain by modifying add sample xml element to css page to see elements in play;
+/- border/white from address; +/1 border/teal from student (each student) ;
display: block : from street, zipcode pair (white); change to display: none for
address; +/- display from student (nasty); +/- margin-left:65px (address);
change width=50% to 25% (address); +/- display: block for name etc.
format of rules: elementName { }, xml cross-reference:
<?xml-stylesheet type="text/css" href="xmlCSS01.css" ?>
observe effects.
In-class lab contd.
Install Tomcat on your personal PC!
Next two classes: JSP and Tomcat server
Then two classes: on Access DB
Then: two classes on accessing DB from JSP
temp:
demo remarks: C:\Documents and Settings\user1\Desktop\MyStuff\AA-IT202\IT202\AHtml-examples\HTML-Sp-04\XML-CSS\XMLExamples\XML\BuildTable01.html, sheet2.css, and BuildTableXML00.xml
data access - html student5.html
colors expCSS000.css in \HTML-Sp-04\XML-CSS\CSS-Examples\
- xmlCSS01.css & .xml in \HTML-Sp-04\XML-CSS\XML-Examples\XML
css&xml: