XHTML, CSS , Good web and
database design practices
Snehal Monteiro
For CIS 764
Outline
What You’re In For
Why XHTML & CSS?
XHTML
CSS
Making the Transition
The Future
Good Web and Database design practices
What You’re In For
This presentation focuses mainly on the
front-end i.e. the web-pages of an
enterprise database application
XHTML and CSS are the latest trends in
web design and play a major role in
enhancing the usability of the
application
Why XHTML & CSS?
Garbage code is…uh…garbage!
Information encoded in XHTML can be more
easily migrated as technology changes
XHTML is a good step forward to learning
XML
You can easily make global changes to how
your documents display
There are user benefits to separating
information from presentation
What is XHTML
XHTML stands for eXtensible HyperText Markup
Language
XHTML is aimed to replace HTML
XHTML is a stricter and cleaner version of HTML
XHTML is HTML defined as a XML application
XHTML is a W3C Recommendation
XHTML …why?
Many pages on the WWW contain bad HTML
XML is a markup language where everything has to be
marked up correctly, which results in "well-formed"
documents.
Hand held devices like PDA’s and mobile phones do not
have resources and power to interpret bad HTML code
A mark-up language for now and for the future. Future
browser versions may support only XHTML…so be
prepared!!!
XHTML Benefits
A painless transition to more advanced
technology (XML)
Clean, more logical markup
Increased interoperability
Greater accessibility
XHTML-key ingredient in mobile
browsing
XHTML reduces the difference between wireless and web content
XHTML Basic and Cascading Style Sheets separate content from
presentation enabling content tailoring to different devices
Benefits:
Consumers –more services, better user
interface, easier-to-use
Carriers – more control over content,
consistent look & feel, service loyalty
Content providers – presentation, functionality,
consistency, familiar format
Manufacturers – Easier software
maintenance, better performance, lower cost
How can I convert to XHTML??
Very few simple rules…that’s it!
All tags must be in lowercase:
<title></title>
All tags must end:
<p></p>
Even empty tags:
<br></br> = <br />
All tags must properly nest:
<p>This is an <a
name=“here”>anchor</a>.</p>
All attribute values must be quoted:
<div align=“center”></div>
XHTML: More Rules
Attribute minimization is forbidden:
<input type=“radio” name=“stuff” CHECKED>
becomes…
<input type=“radio” name=“stuff”
checked=“checked” />
You must use a document type declaration:
Transitional:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
Strict:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
And add a namespace declaration to <html>:
<html xmlns=“http://www.w3.org/1999/xhtml” xml:lang=“en” lang=“en”>
Evolution of XHTML standards
HTML 4.0 Transitional
XHTML Basic
XHTML Transitional
XHTML Strict
There are online validation tools
available which check conformance to
standards-
Kick It Up a Notch:
Enhance your web page with
Cascading Style Sheets
CSS is a standard layout language for
the Web
Though precise and powerful, CSS is
easy to author by hand.
Replace HTML table-based layouts,
frames, and other presentational hacks.
Separate style from content
Benefits of CSS
Conserve bandwidth (less markup for visitors to
download)
Reduce design/development time
Reduce updating and maintenance time
Increased accessibility (fewer, or no, HTML tables;
no invalid junk markup)
Adhere to W3C recommendations, improving
interoperability and ensuring greater longevity Better,
more professional appearance (line–height, borders,
padding, margins)
Increased readability (line–height, borders, padding,
margins)
More easily transition in future to more powerful
standards such as XML (because page content no
longer contains junk markup)
CSS: Rule Structure
selector declaration
h1 { color: purple; }
property
value
ends every
property/
value pair
h1 { font-family: Optima, Arial, sans-serif; }
property/value
separator
begins and ends the declaration
CSS Rule Example
body {
background: #FFFFFF;
color: black;
margin-left: 5%;
margin-right: 5%;
font-family: Tahoma, Optima, Arial, sans-serif;
}
Where do you put styles?
In-line - add to HTML tag
<H1 style="color: maroon">
Embedded style sheets
<style>
</style>
External style sheets
<link href="style.css">
In-line
<H1 style="color: maroon">
Similar to adding attributes to html
tags
Disadvantages
decreased accessibility
increased file size
harder to update
Embedded style sheets
<style>
<!-h1 {font-family: arial, sans-serif;}
-->
</style>
Put rules between style tags
Put in head section
Add html comment tags
Use when single document has unique style
External style sheets
<link rel="stylesheet"
type="text/css" href="style.css">
Save rules in external file
Advantages
ease of maintenance
use less disk space
increase accessibility
Class selector & attribute
To create rules that can be applied to a
variety of html tags
<style>
.bar {color: maroon; font-size:
smaller;
background-color: yellow;}
</style>
…
<p class="bar">text</p>
…
<p><a href="url.htm" class="bar">link</a>
</p>
CSS: Diagram of Precedence
XHTML File
2) [call to external stylesheet]
1) [styles embedded inside the
document]
Generalized order of
precedence, all other
things being equal
External
Style
Sheet
http://jigsaw.w3.org/css-validator/
Making the Transition: Tidy
HTML Tidy is free software that can read your
HTML and output a much better file by:
Automatically fixing some errors
Changing uppercase tags to lowercase
Indenting your code to make to make it more
readable
Quote all attribute values
And other things, depends on configuration file
An error report may also be generated that
can identify remaining problems
Making the Transition:
Migrating an Existing Site
All at once:
Copy entire site to another location
Run Tidy; check and re-run as needed
Clean up remaining problems
Transfer back
Gradual:
Do all new things in XHTML/CSS
Migrate old files as you update them for other
reasons
The Future
Will XML replace HTML?
It already has! That’s why you’re here!
XML will typically not be delivered to web
clients; that is what XHTML will be for
So, is this the last markup you have to learn?
No way! Use this as a stepping-stone to XML,
for which you will have many additional uses
Remember — Never stop learning!
Adding hit counters to your website for free
Just register at
www.google.com/analytics
Type in the url of your web-site
You will get a javascript code snippet
Just add the code to your index page
You get daily reports about user activity
on your site
Good web-design practices:
Comment your code!
Use XHTML rules and CSS
Use AJAX to enhance user interaction and
increase speed
Archive code before making any changes to
the current web-site
Re-use code: eg: Database connection code,
reusable javascript subroutines
Use lower-case more than upper-case, it
looks more attractive and subtle
Good database design practices
Comment your code!
Don’t store big binary files in the database
Correctly identify which fields require data
If a column storing the same data appears
or is referenced in more than one table
(e.g. a foreign key), it should have the
same data type throughout the
database.
Continued…
When running queries on the database, use
only the column names that you need to
retrieve. This can reduce network traffic and
disk operations.
When running an insert action query, use the
columns list into which to insert instead of the
table name (when you want to insert data in
all the current columns). This way, if new
columns are added to the table, your query
will still work.
References
W3C-Introduction to XHTML
http://www.w3schools.com/xhtml/xhtml_intro.asp
NYPL Online Style Guide: XHTML and CSS
http://www.nypl.org/styleguide/xhtml/index.html
Better Living through XHTML
By, Jeffery Zeldman
http://www.alistapart.com/stories/betterliving/
Good practices in database design
http://www.interaktonline.com/Support/Articles/Details
Thank-you!
Questions ???
© Copyright 2026 Paperzz