Web Development & Programming

Do we need to use jQuery in your Web Application Project?

noreply@blogger.com (rjs) — Sat, 11 Feb 2023 11:39:00 -0800

Well, there are so many sites which uses jQuery. Most of us are very much familiar that jQuery was very popular between 2007-2012, although its still using in many website across the internet. Below I am going to tell you what is very beneficial for using jQuery and why we should not use it.

Pros of using jQuery:

- It provides very handy commands for direct manipulation of DOM structure.
- You can easily change any style, attribute, elements, etc. with the help of desired selectors.
- There are couple of plugins availabe which basically works together with jQuery like: sliders, form validations, animation effects, and many more.

Cons of using jQuery:

- It only modifies DOM from interaction point of view and doesn't change the code. It means it will not effect any changes for the actual running code and at the time of refresh page your changes might be lost.
- You cannot generate dynamic code with jQuery, meaning You cannot run dynamic loops and properties based on programming languages, but that can be achievable via Angular/Reactjs/Vuejs/Next.js etc.
- Also, you don't need to consider your jQuery changes to be available in Search Engine crawling, because jQuery or javascript modifications/renderings will be completely ignored by Crawlers.

Why You Need Good JavaScript Tutorials

noreply@blogger.com (rjs) — Tue, 1 Nov 2011 06:19:00 -0700

JavaScript allows you to change how a webpage looks completely. By using JavaScript you can change text, colors to drop-down list and much more. These scripts are integrated into the browsing environment. All you need to find good JavaScript tutorials for beginners to get started with JavaScript.

The popularity of JavaScript over the years has increased significantly and so as the demand for menu JavaScript tutorial and other such tutorials.
The reason for the popularity is basically because JavaScript offers a number of advantages. They are:

• JavaScript is executed on the user's processor instead of the web server thus it saves bandwidth and there is less load on the web server
• JavaScript is relatively easy to learn and comprises of syntax that is close to English
• As JavaScript code is executed on the user's computer, results and processing is completed almost instantly
• JavaScript offers extended functionalities to web pages

Therefore, use these advantages to your benefit. Start learning from the best JavaScript tutorials for beginners available in the internet. Get information specifically on menu JavaScript tutorial and other such tutorials and start experimenting.

These JavaScript tutorials for beginners allow you to even create extremely powerful browser games similar to flash games. Menu JavaScript tutorial and others will also help you create menu as well as UI related things.
Just like all other languages, JavaScript also has some best practices:

• Always Use 'var'
• Feature-Detect Rather Than Browser-Detect
• Use Square Bracket Notation
• Avoid 'eval'
• Reference Forms and Form Elements Correctly
• Avoid 'with' Statements
• Use onclick In Anchors Instead Of JavaScript: Pseudo-Protocol
• Use The Unary + Operator To TypeConvert To Number
• Avoid document.all
• Don't Use HTML Comments In Script Blocks
• Avoid Cluttering The Global Namespace
• Avoid sync "Ajax" calls
• Use JSON
• Use Correct script Tags

A good JavaScript tutorial for beginners would instruct you to keep testing, the changes you make. If your web page no longer works, you won’t necessarily know which change caused it to fail. Write your programs a step at a time and test often.
If you want to explore your learning through menu JavaScript tutorial and others, then explore JavaScript by writing simple scripts. One of the nice things about client-side JavaScript is that anyone with a web browser and a simple text editor has a complete development environment. You don’t need to buy or download special-purpose software in order to begin writing JavaScript.

Therefore, find out a good JavaScript tutorial for beginners and start learning it from today. Fortunately, there are many good and intuitive tutorial sites available on the Internet. These sites make it extremely easy and simple to learn JavaScript by offering all the details and necessary tools and demos.

They offer menu JavaScript tutorial and other very important tutorials that are in demand and most widely used. So, search some Internet and find out the best JavaScript tutorials offering the most practical tutorials for your knowledge.

Swap Images by XML using XMLHTTP Request

noreply@blogger.com (rjs) — Mon, 6 Oct 2008 00:27:00 -0700

Calling XML file into HTML Page using XMLHTTP Request or ActiveXOject
Here, we have used some features for calling xml file into html document with the help of ajax. In the example mentioned below, we called xml nodes by using

item(0).firstChild.nodeValue

Below find the javascript code as a Example, as a result it shows toggle images effects.

Javascript file Source:

XML file Source:

<?xml version="1.0"?>
<root>
<image>images/img-1.jpg</image>
<thumb>images/thumb-1.jpg</thumb>
<alt>XML</alt>
<link>http://javascript-guru.blogspot.com/search/label/ajax/</link>
<image>images/img-2.jpg</image>
<thumb>images/thumb-2.jpg</thumb>
<alt>Ajax</alt>
<link>http://javascript-guru.blogspot.com/</link>
</root>

Quick Tips & Tricks for Websites

noreply@blogger.com (rjs) — Wed, 3 Sep 2008 05:52:00 -0700

Quick Tips for making Websites Sensible

1.Images & animations: Use the alt attribute to describe the function of each visual.

2.Image maps: Use the client-side map and text for hotspots.

3.Multimedia: Provide captioning and transcripts of audio, and descriptions of video.

4.Hypertext links: Use text that makes sense when read out of context. For example, avoid "click here."

5.Page organization: Use headings, lists, and consistent structure. Use CSS for layout and style where possible.

6.Graphs & charts: Summarize or use the longdesc attribute.

7.Scripts, applets, & plug-ins: Provide alternative content in case active features are inaccessible or unsupported.

8.Frames: Use the “noframes” element and meaningful titles.

9.Tables: Make line-by-line reading sensible. Summarize.

10.Check your work: Validate. Use tools, checklist, and guidelines at http://www.w3.org/TR/WCAG

CSS hover with JavaScript animation methods

noreply@blogger.com (rjs) — Mon, 1 Sep 2008 02:52:00 -0700

The CSS rollover effects is commonly used in jQuery Frameworks, suppose hover animations that respond to a user's behavior in ways standards-based sites never could before.

read more | digg story

Introduction to Regular Expressions - RegExp( )

noreply@blogger.com (rjs) — Wed, 20 Aug 2008 22:13:00 -0700

Regular Expressions are very useful and commonly used for creating pattern matches, pattern searches, etc. for Strings in JavaScript. There is another method called indexOf() method which works almost same like regular expressions but for advance and complex pattern searches, regular expressions are used.

For creating a regular expression as an object, we can simply write:

new RegExp("\/D\");

Regular expressions are clearly defined by example given below:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<script language="JavaScript">
 use this /[^a-zA-Z]/.
// /[^a-zA-Z]/g here (g) for global search anywhere in the string even mix-up string.

// match(), search(), replace(), split()
// For Constructor -----> exec(), compile(), test()

var mat=document.demoMatch.subject.value.match(re);

if (mat)
{
alert(mat);
}
else
{
alert("No match");
}
}

</script>
</head>

<body>
<form id="demoMatch" NAME="demoMatch" METHOD="POST">
<P>Subject Number: <INPUT TYPE=TEXT NAME="subject"
VALUE="" SIZE=50></P>
<P><INPUT TYPE=SUBMIT VALUE="Test Match" ONCLICK="demoMatchClick()"></P>
</form>
</body>

Other Useful Resources:
• Javascript Completed Reference - Regular Expressions
• Basics of Regular Expressions

How to Create a CSS Webpage from Scratch?

noreply@blogger.com (rjs) — Sat, 9 Aug 2008 01:47:00 -0700

In this section, we will learn how to create a css webpage from scratch. This is the first lesson about Basics of CSS concepts using Tutorials. Hope you like it.

read more | digg story

Use of CSS Properties with Variables

noreply@blogger.com (rjs) — Wed, 6 Aug 2008 04:36:00 -0700

Advanced CSS with Variables:
CSS Level 2 Recommendation effects the Web authors' community that has been requesting a way of defining variables in CSS.

Variables allow to define stylesheet-wide values identified by a token and usable in all CSS declarations.

If a value is often used in a stylesheet - a common example is the value of the color or background-color properties - it's then easy to update the whole stylesheet statically or dynamically modifying just one variable instead of modifying all style rules applying the property/value pair.

Example:

#
@variables {
#
CorporateLogoBGColor: #fe8d12;
#
}
#
#
div.logoContainer {
#
background-color: var(CorporateLogoBGColor);
#
}

The Same thing we can define in PHP also. For that thing firstly, you need to create php page for the content. Following example shows how:

Example:

<?php
header("Content-type: text/css");
$color = "green"; // <--- define the variable
echo <<<CSS
/* --- start of css --- */
h2
{
color: $color; /* <--- use the variable */
font-weight: bold;
font-size: 1.2em;
text-align: left;
}
/* --- end of css --- */
CSS;
?>

For more information regarding this, visit:
• CSS Variables
• How to create CSS Variables?

HTML, CSS, AJAX and Javascript Books

noreply@blogger.com (rjs) — Tue, 5 Aug 2008 01:31:00 -0700

The Best e-books for HTML, CSS, Ajax and Javascript is available here. Anyone can download the given files from the torrent or can visit the site directly from where the refernce has taken.

HTML, CSS, AJAX and Javascript Books 2007

It contains the following files:

AJAX - Creating Web Pages With Asynchronous JavaScript And XML (2006).chm
AJAX And PHP - Building Responsive Web Applications (2006).pdf
Ajax Design Patterns (2006).chm
Ajax For Dummies (2006).pdf
Ajax For Web Application Developers (2006).chm
Ajax Hacks - Tips & Tools For Creating Responsive Websites (2006).chm
Ajax In Action (2006).pdf
Ajax On Rails (2006).chm
Ajax Patterns And Best Practices (2006).pdf
Beginning Ajax With ASP.NET (2006).pdf
Beginning Ajax With PHP - From Novice To Professional (2006).pdf
Beginning Google Maps Applications With PHP And Ajax - From Novice To Professional (2006).pdf
Beginning JavaScript With DOM Scripting And Ajax - From Novice To Professional (2006).pdf
Beginning XML With DOM And Ajax - From Novice To Professional (2006).pdf
CSS - The Definitive Guide, 3rd Edition (2006).chm
CSS - The Missing Manual (2006).chm
CSS Cookbook, 2nd Edition (2006).chm
CSS Hacks & Filters - Making Cascading Stylesheets Work (2005).pdf
CSS Instant Results (2006).chm
CSS Web Design for Dummies (2005).pdf
Creating Cool Web Sites With HTML, XHTML, And CSS (2004).pdf
Foundations Of Ajax (2006).pdf
Foundations Of Atlas - Rapid Ajax Development With ASP.NET 2.0 (2006).pdf
HTML & XHTML - The Definitive Guide, 6th Edition (2006).chm
HTML 4 For Dummies, 5th Edition (2005).pdf
HTML In 10 Simple Steps Or Less (2004).pdf
HTML Mastery - Semantics, Standards, And Styling (2006).pdf
HTML, XHTML, & CSS - Visual QuickStart Guide, 6th Edition (2006).chm
HTML, XHTML, & CSS Bible, 3rd Edition (2004).pdf
JavaScript & AJAX For The Web - Visual QuickStart Guide, 6th Edition (2006).chm
JavaScript Bible - Gold Edition (2001).pdf
JavaScript Bible, 5th Edition (2004).pdf
JavaScript In 10 Simple Steps Or Less (2004).pdf
JavaScript Phrasebook - Essential Code And Commands (2006).chm
JavaScript Programmer's Reference (2001).pdf
Learning JavaScript (2006).chm

Download Tutorial Books

8 Amazing Websites by Rafaël Rozendaal's

noreply@blogger.com (rjs) — Tue, 5 Aug 2008 00:16:00 -0700

Usability and Accessibility means single serving sites with explosion, and it shows in his work's standout beauty and interactivity. His homepage documents years of acclaimed work, but in case you're unfamiliar (or just looking for a simplistic internet retreat), here are a few of our favorites to get you started.

read more | digg story

Basics of DTD (Document Type Definition)

noreply@blogger.com (rjs) — Sun, 3 Aug 2008 22:35:00 -0700

In this section, we have explained about the DTD XML file. Basically, DTD XML file uses for various applications like HTML, XHTML, WML (wireless markup language) and DOM. Below is the example of DTD file written in XML format for XHTML Transitional DTD for Web.

DTD XHTML Transitional Code:

<!--
   Extensible HTML version 1.0 Transitional DTD



   This is the same as HTML 4 Transitional except for
   changes due to the differences between XML and SGML.



   Namespace = http://www.w3.org/1999/xhtml



   For further information, see: http://www.w3.org/TR/xhtml1



   Copyright (c) 1998-2002 W3C (MIT, INRIA, Keio),
   All Rights Reserved. 



   This DTD module is identified by the PUBLIC and SYSTEM identifiers:



   PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   SYSTEM "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"



   $Revision: 1.2 $
   $Date: 2002/08/01 18:37:55 $



-->



<!--================ Character mnemonic entities =========================-->



<!ENTITY % HTMLlat1 PUBLIC
   "-//W3C//ENTITIES Latin 1 for XHTML//EN"
   "xhtml-lat1.ent">
%HTMLlat1;



<!ENTITY % HTMLsymbol PUBLIC
   "-//W3C//ENTITIES Symbols for XHTML//EN"
   "xhtml-symbol.ent">
%HTMLsymbol;



<!ENTITY % HTMLspecial PUBLIC
   "-//W3C//ENTITIES Special for XHTML//EN"
   "xhtml-special.ent">
%HTMLspecial;



<!--================== Imported Names ====================================-->



<!ENTITY % ContentType "CDATA">
    <!-- media type, as per [RFC2045] -->



<!ENTITY % ContentTypes "CDATA">
    <!-- comma-separated list of media types, as per [RFC2045] -->



<!ENTITY % Charset "CDATA">
    <!-- a character encoding, as per [RFC2045] -->



<!ENTITY % Charsets "CDATA">
    <!-- a space separated list of character encodings, as per [RFC2045] -->



<!ENTITY % LanguageCode "NMTOKEN">
    <!-- a language code, as per [RFC3066] -->



<!ENTITY % Character "CDATA">
    <!-- a single character, as per section 2.2 of [XML] -->



<!ENTITY % Number "CDATA">
    <!-- one or more digits -->



<!ENTITY % LinkTypes "CDATA">
    <!-- space-separated list of link types -->



<!ENTITY % MediaDesc "CDATA">
    <!-- single or comma-separated list of media descriptors -->



<!ENTITY % URI "CDATA">
    <!-- a Uniform Resource Identifier, see [RFC2396] -->



<!ENTITY % UriList "CDATA">
    <!-- a space separated list of Uniform Resource Identifiers -->



<!ENTITY % Datetime "CDATA">
    <!-- date and time information. ISO date format -->



<!ENTITY % Script "CDATA">
    <!-- script expression -->



<!ENTITY % StyleSheet "CDATA">
    <!-- style sheet data -->



<!ENTITY % Text "CDATA">
    <!-- used for titles etc. -->



<!ENTITY % FrameTarget "NMTOKEN">
    <!-- render in this frame -->



<!ENTITY % Length "CDATA">
    <!-- nn for pixels or nn% for percentage length -->



<!ENTITY % MultiLength "CDATA">
    <!-- pixel, percentage, or relative -->



<!ENTITY % Pixels "CDATA">
    <!-- integer representing length in pixels -->



<!-- these are used for image maps -->



<!ENTITY % Shape "(rect|circle|poly|default)">



<!ENTITY % Coords "CDATA">
    <!-- comma separated list of lengths -->



<!-- used for object, applet, img, input and iframe -->
<!ENTITY % ImgAlign "(top|middle|bottom|left|right)">



<!-- a color using sRGB: #RRGGBB as Hex values -->
<!ENTITY % Color "CDATA">



<!-- There are also 16 widely known color names with their sRGB values:



    Black  = #000000    Green  = #008000
    Silver = #C0C0C0    Lime   = #00FF00
    Gray   = #808080    Olive  = #808000
    White  = #FFFFFF    Yellow = #FFFF00
    Maroon = #800000    Navy   = #000080
    Red    = #FF0000    Blue   = #0000FF
    Purple = #800080    Teal   = #008080
    Fuchsia= #FF00FF    Aqua   = #00FFFF
-->



<!--=================== Generic Attributes ===============================-->



<!-- core attributes common to most elements
  id       document-wide unique id
  class    space separated list of classes
  style    associated style info
  title    advisory title/amplification
-->

<!ENTITY % coreattrs
 "id          ID             #IMPLIED
  class       CDATA          #IMPLIED
  style       %StyleSheet;   #IMPLIED
  title       %Text;         #IMPLIED"
  >



<!-- internationalization attributes
  lang        language code (backwards compatible)
  xml:lang    language code (as per XML 1.0 spec)
  dir         direction for weak/neutral text
-->

<!ENTITY % i18n
 "lang        %LanguageCode; #IMPLIED
  xml:lang    %LanguageCode; #IMPLIED
  dir         (ltr|rtl)      #IMPLIED"
  >



<!-- attributes for common UI events
  onclick     a pointer button was clicked
  ondblclick  a pointer button was double clicked
  onmousedown a pointer button was pressed down
  onmouseup   a pointer button was released
  onmousemove a pointer was moved onto the element
  onmouseout  a pointer was moved away from the element
  onkeypress  a key was pressed and released
  onkeydown   a key was pressed down
  onkeyup     a key was released
-->

<!ENTITY % events
 "onclick     %Script;       #IMPLIED
  ondblclick  %Script;       #IMPLIED
  onmousedown %Script;       #IMPLIED
  onmouseup   %Script;       #IMPLIED
  onmouseover %Script;       #IMPLIED
  onmousemove %Script;       #IMPLIED
  onmouseout  %Script;       #IMPLIED
  onkeypress  %Script;       #IMPLIED
  onkeydown   %Script;       #IMPLIED
  onkeyup     %Script;       #IMPLIED"
  >



<!-- attributes for elements that can get the focus
  accesskey   accessibility key character
  tabindex    position in tabbing order
  onfocus     the element got the focus
  onblur      the element lost the focus
-->

<!ENTITY % focus
 "accesskey   %Character;    #IMPLIED
  tabindex    %Number;       #IMPLIED
  onfocus     %Script;       #IMPLIED
  onblur      %Script;       #IMPLIED"
  >



<!ENTITY % attrs "%coreattrs; %i18n; %events;">



<!-- text alignment for p, div, h1-h6. The default is
     align="left" for ltr headings, "right" for rtl -->



<!ENTITY % TextAlign "align (left|center|right|justify) #IMPLIED">



<!--=================== Text Elements ====================================-->



<!ENTITY % special.extra
   "object | applet | img | map | iframe">


 
<!ENTITY % special.basic
 "br | span | bdo">



<!ENTITY % special
   "%special.basic; | %special.extra;">



<!ENTITY % fontstyle.extra "big | small | font | basefont">



<!ENTITY % fontstyle.basic "tt | i | b | u | s | strike ">



<!ENTITY % fontstyle "%fontstyle.basic; | %fontstyle.extra;">



<!ENTITY % phrase.extra "sub | sup">
<!ENTITY % phrase.basic "em | strong | dfn | code | q |
                   samp | kbd | var | cite | abbr | acronym">



<!ENTITY % phrase "%phrase.basic; | %phrase.extra;">



<!ENTITY % inline.forms "input | select | textarea | label | button">



<!-- these can occur at block or inline level -->
<!ENTITY % misc.inline "ins | del | script">



<!-- these can only occur at block level -->
<!ENTITY % misc "noscript | %misc.inline;">



<!ENTITY % inline "a | %special; | %fontstyle; | %phrase; | %inline.forms;">



<!-- %Inline; covers inline or "text-level" elements -->
<!ENTITY % Inline "(#PCDATA | %inline; | %misc.inline;)*">



<!--================== Block level elements ==============================-->



<!ENTITY % heading "h1|h2|h3|h4|h5|h6">
<!ENTITY % lists "ul | ol | dl | menu | dir">
<!ENTITY % blocktext "pre | hr | blockquote | address | center | noframes">



<!ENTITY % block
    "p | %heading; | div | %lists; | %blocktext; | isindex |fieldset | table">



<!-- %Flow; mixes block and inline and is used for list items etc. -->
<!ENTITY % Flow "(#PCDATA | %block; | form | %inline; | %misc;)*">



<!--================== Content models for exclusions =====================-->



<!-- a elements use %Inline; excluding a -->



<!ENTITY % a.content
   "(#PCDATA | %special; | %fontstyle; | %phrase; | %inline.forms; | %misc.inline;)*">



<!-- pre uses %Inline excluding img, object, applet, big, small,
     font, or basefont -->



<!ENTITY % pre.content
   "(#PCDATA | a | %special.basic; | %fontstyle.basic; | %phrase.basic; |
    %inline.forms; | %misc.inline;)*">



<!-- form uses %Flow; excluding form -->


<!ENTITY % form.content "(#PCDATA | %block; | %inline; | %misc;)*">



<!-- button uses %Flow; but excludes a, form, form controls, iframe -->



<!ENTITY % button.content
   "(#PCDATA | p | %heading; | div | %lists; | %blocktext; |
      table | br | span | bdo | object | applet | img | map |
      %fontstyle; | %phrase; | %misc;)*">



<!--================ Document Structure ==================================-->



<!-- the namespace URI designates the document profile -->



<!ELEMENT html (head, body)>
<!ATTLIST html
  %i18n;
  id          ID             #IMPLIED
  xmlns       %URI;          #FIXED 'http://www.w3.org/1999/xhtml'
  >



<!--================ Document Head =======================================-->



<!ENTITY % head.misc "(script|style|meta|link|object|isindex)*">



<!-- content model is %head.misc; combined with a single
     title and an optional base element in any order -->



<!ELEMENT head (%head.misc;,
     ((title, %head.misc;, (base, %head.misc;)?) |
      (base, %head.misc;, (title, %head.misc;))))>



<!ATTLIST head
  %i18n;
  id          ID             #IMPLIED
  profile     %URI;          #IMPLIED
  >



<!-- The title element is not considered part of the flow of text.
       It should be displayed, for example as the page header or
       window title. Exactly one title is required per document.
    -->


<!ELEMENT title (#PCDATA)>
<!ATTLIST title 
  %i18n;
  id          ID             #IMPLIED
  >



<!-- document base URI -->



<!ELEMENT base EMPTY>
<!ATTLIST base
  id          ID             #IMPLIED
  href        %URI;          #IMPLIED
  target      %FrameTarget;  #IMPLIED
  >



<!-- generic metainformation -->
<!ELEMENT meta EMPTY>
<!ATTLIST meta
  %i18n;
  id          ID             #IMPLIED
  http-equiv  CDATA          #IMPLIED
  name        CDATA          #IMPLIED
  content     CDATA          #REQUIRED
  scheme      CDATA          #IMPLIED
  >



<!--
  Relationship values can be used in principle:

   a) for document specific toolbars/menus when used
      with the link element in document head e.g.
        start, contents, previous, next, index, end, help
   b) to link to a separate style sheet (rel="stylesheet")
   c) to make a link to a script (rel="script")
   d) by stylesheets to control how collections of
      html nodes are rendered into printed documents
   e) to make a link to a printable version of this document
      e.g. a PostScript or PDF version (rel="alternate" media="print")
-->



<!ELEMENT link EMPTY>
<!ATTLIST link
  %attrs;
  charset     %Charset;      #IMPLIED
  href        %URI;          #IMPLIED
  hreflang    %LanguageCode; #IMPLIED
  type        %ContentType;  #IMPLIED
  rel         %LinkTypes;    #IMPLIED
  rev         %LinkTypes;    #IMPLIED
  media       %MediaDesc;    #IMPLIED
  target      %FrameTarget;  #IMPLIED
  >



<!-- style info, which may include CDATA sections -->
<!ELEMENT style (#PCDATA)>
<!ATTLIST style
  %i18n;
  id          ID             #IMPLIED
  type        %ContentType;  #REQUIRED
  media       %MediaDesc;    #IMPLIED
  title       %Text;         #IMPLIED
  xml:space   (preserve)     #FIXED 'preserve'
  >



<!-- script statements, which may include CDATA sections -->
<!ELEMENT script (#PCDATA)>
<!ATTLIST script
  id          ID             #IMPLIED
  charset     %Charset;      #IMPLIED
  type        %ContentType;  #REQUIRED
  language    CDATA          #IMPLIED
  src         %URI;          #IMPLIED
  defer       (defer)        #IMPLIED
  xml:space   (preserve)     #FIXED 'preserve'
  >



<!-- alternate content container for non script-based rendering -->

<!ELEMENT noscript %Flow;>
<!ATTLIST noscript
  %attrs;
  >



<!--======================= Frames =======================================-->



<!-- inline subwindow -->



<!ELEMENT iframe %Flow;>
<!ATTLIST iframe
  %coreattrs;
  longdesc    %URI;          #IMPLIED
  name        NMTOKEN        #IMPLIED
  src         %URI;          #IMPLIED
  frameborder (1|0)          "1"
  marginwidth %Pixels;       #IMPLIED
  marginheight %Pixels;      #IMPLIED
  scrolling   (yes|no|auto)  "auto"
  align       %ImgAlign;     #IMPLIED
  height      %Length;       #IMPLIED
  width       %Length;       #IMPLIED
  >



<!-- alternate content container for non frame-based rendering -->



<!ELEMENT noframes %Flow;>
<!ATTLIST noframes
  %attrs;
  >



<!--=================== Document Body ====================================-->



<!ELEMENT body %Flow;>
<!ATTLIST body
  %attrs;
  onload      %Script;       #IMPLIED
  onunload    %Script;       #IMPLIED
  background  %URI;          #IMPLIED
  bgcolor     %Color;        #IMPLIED
  text        %Color;        #IMPLIED
  link        %Color;        #IMPLIED
  vlink       %Color;        #IMPLIED
  alink       %Color;        #IMPLIED
  >



<!ELEMENT div %Flow;>  <!-- generic language/style container -->
<!ATTLIST div
  %attrs;
  %TextAlign;
  >



<!--=================== Paragraphs =======================================-->



<!ELEMENT p %Inline;>
<!ATTLIST p
  %attrs;
  %TextAlign;
  >



<!--=================== Headings =========================================-->



<!--
  There are six levels of headings from h1 (the most important)
  to h6 (the least important).
-->



<!ELEMENT h1  %Inline;>
<!ATTLIST h1
  %attrs;
  %TextAlign;
  >



<!ELEMENT h2 %Inline;>
<!ATTLIST h2
  %attrs;
  %TextAlign;
  >



<!ELEMENT h3 %Inline;>
<!ATTLIST h3
  %attrs;
  %TextAlign;
  >



<!ELEMENT h4 %Inline;>
<!ATTLIST h4
  %attrs;
  %TextAlign;
  >



<!ELEMENT h5 %Inline;>
<!ATTLIST h5
  %attrs;
  %TextAlign;
  >



<!ELEMENT h6 %Inline;>
<!ATTLIST h6
  %attrs;
  %TextAlign;
  >



<!--=================== Lists ============================================-->



<!-- Unordered list bullet styles -->



<!ENTITY % ULStyle "(disc|square|circle)">



<!-- Unordered list -->



<!ELEMENT ul (li)+>
<!ATTLIST ul
  %attrs;
  type        %ULStyle;     #IMPLIED
  compact     (compact)     #IMPLIED
  >



<!-- Ordered list numbering style



    1   arabic numbers      1, 2, 3, ...
    a   lower alpha         a, b, c, ...
    A   upper alpha         A, B, C, ...
    i   lower roman         i, ii, iii, ...
    I   upper roman         I, II, III, ...



    The style is applied to the sequence number which by default
    is reset to 1 for the first list item in an ordered list.
-->


<!ENTITY % OLStyle "CDATA">



<!-- Ordered (numbered) list -->



<!ELEMENT ol (li)+>
<!ATTLIST ol
  %attrs;
  type        %OLStyle;      #IMPLIED
  compact     (compact)      #IMPLIED
  start       %Number;       #IMPLIED
  >



<!-- single column list (DEPRECATED) --> 
<!ELEMENT menu (li)+>
<!ATTLIST menu
  %attrs;
  compact     (compact)     #IMPLIED
  >



<!-- multiple column list (DEPRECATED) --> 
<!ELEMENT dir (li)+>
<!ATTLIST dir
  %attrs;
  compact     (compact)     #IMPLIED
  >



<!-- LIStyle is constrained to: "(%ULStyle;|%OLStyle;)" -->
<!ENTITY % LIStyle "CDATA">



<!-- list item -->



<!ELEMENT li %Flow;>
<!ATTLIST li
  %attrs;
  type        %LIStyle;      #IMPLIED
  value       %Number;       #IMPLIED
  >



<!-- definition lists - dt for term, dd for its definition -->



<!ELEMENT dl (dt|dd)+>
<!ATTLIST dl
  %attrs;
  compact     (compact)      #IMPLIED
  >



<!ELEMENT dt %Inline;>
<!ATTLIST dt
  %attrs;
  >



<!ELEMENT dd %Flow;>
<!ATTLIST dd
  %attrs;
  >



<!--=================== Address ==========================================-->



<!-- information on author -->



<!ELEMENT address (#PCDATA | %inline; | %misc.inline; | p)*>
<!ATTLIST address
  %attrs;
  >



<!--=================== Horizontal Rule ==================================-->



<!ELEMENT hr EMPTY>
<!ATTLIST hr
  %attrs;
  align       (left|center|right) #IMPLIED
  noshade     (noshade)      #IMPLIED
  size        %Pixels;       #IMPLIED
  width       %Length;       #IMPLIED
  >



<!--=================== Preformatted Text ================================-->



<!-- content is %Inline; excluding 
        "img|object|applet|big|small|sub|sup|font|basefont" -->



<!ELEMENT pre %pre.content;>
<!ATTLIST pre
  %attrs;
  width       %Number;      #IMPLIED
  xml:space   (preserve)    #FIXED 'preserve'
  >



<!--=================== Block-like Quotes ================================-->



<!ELEMENT blockquote %Flow;>
<!ATTLIST blockquote
  %attrs;
  cite        %URI;          #IMPLIED
  >



<!--=================== Text alignment ===================================-->



<!-- center content -->
<!ELEMENT center %Flow;>
<!ATTLIST center
  %attrs;
  >



<!--=================== Inserted/Deleted Text ============================-->



<!--
  ins/del are allowed in block and inline content, but its
  inappropriate to include block content within an ins element
  occurring in inline content.
-->


<!ELEMENT ins %Flow;>
<!ATTLIST ins
  %attrs;
  cite        %URI;          #IMPLIED
  datetime    %Datetime;     #IMPLIED
  >



<!ELEMENT del %Flow;>
<!ATTLIST del
  %attrs;
  cite        %URI;          #IMPLIED
  datetime    %Datetime;     #IMPLIED
  >



<!--================== The Anchor Element ================================-->



<!-- content is %Inline; except that anchors shouldn't be nested -->



<!ELEMENT a %a.content;>
<!ATTLIST a
  %attrs;
  %focus;
  charset     %Charset;      #IMPLIED
  type        %ContentType;  #IMPLIED
  name        NMTOKEN        #IMPLIED
  href        %URI;          #IMPLIED
  hreflang    %LanguageCode; #IMPLIED
  rel         %LinkTypes;    #IMPLIED
  rev         %LinkTypes;    #IMPLIED
  shape       %Shape;        "rect"
  coords      %Coords;       #IMPLIED
  target      %FrameTarget;  #IMPLIED
  >



<!--===================== Inline Elements ================================-->



<!ELEMENT span %Inline;> <!-- generic language/style container -->
<!ATTLIST span
  %attrs;
  >



<!ELEMENT bdo %Inline;>  <!-- I18N BiDi over-ride -->
<!ATTLIST bdo
  %coreattrs;
  %events;
  lang        %LanguageCode; #IMPLIED
  xml:lang    %LanguageCode; #IMPLIED
  dir         (ltr|rtl)      #REQUIRED
  >



<!ELEMENT br EMPTY>   <!-- forced line break -->
<!ATTLIST br
  %coreattrs;
  clear       (left|all|right|none) "none"
  >



<!ELEMENT em %Inline;>   <!-- emphasis -->
<!ATTLIST em %attrs;>



<!ELEMENT strong %Inline;>   <!-- strong emphasis -->
<!ATTLIST strong %attrs;>



<!ELEMENT dfn %Inline;>   <!-- definitional -->
<!ATTLIST dfn %attrs;>



<!ELEMENT code %Inline;>   <!-- program code -->
<!ATTLIST code %attrs;>



<!ELEMENT samp %Inline;>   <!-- sample -->
<!ATTLIST samp %attrs;>



<!ELEMENT kbd %Inline;>  <!-- something user would type -->
<!ATTLIST kbd %attrs;>



<!ELEMENT var %Inline;>   <!-- variable -->
<!ATTLIST var %attrs;>



<!ELEMENT cite %Inline;>   <!-- citation -->
<!ATTLIST cite %attrs;>



<!ELEMENT abbr %Inline;>   <!-- abbreviation -->
<!ATTLIST abbr %attrs;>



<!ELEMENT acronym %Inline;>   <!-- acronym -->
<!ATTLIST acronym %attrs;>



<!ELEMENT q %Inline;>   <!-- inlined quote -->
<!ATTLIST q
  %attrs;
  cite        %URI;          #IMPLIED
  >



<!ELEMENT sub %Inline;> <!-- subscript -->
<!ATTLIST sub %attrs;>



<!ELEMENT sup %Inline;> <!-- superscript -->
<!ATTLIST sup %attrs;>



<!ELEMENT tt %Inline;>   <!-- fixed pitch font -->
<!ATTLIST tt %attrs;>



<!ELEMENT i %Inline;>   <!-- italic font -->
<!ATTLIST i %attrs;>



<!ELEMENT b %Inline;>   <!-- bold font -->
<!ATTLIST b %attrs;>



<!ELEMENT big %Inline;>   <!-- bigger font -->
<!ATTLIST big %attrs;>



<!ELEMENT small %Inline;>   <!-- smaller font -->
<!ATTLIST small %attrs;>



<!ELEMENT u %Inline;>   <!-- underline -->
<!ATTLIST u %attrs;>



<!ELEMENT s %Inline;>   <!-- strike-through -->
<!ATTLIST s %attrs;>



<!ELEMENT strike %Inline;>   <!-- strike-through -->
<!ATTLIST strike %attrs;>



<!ELEMENT basefont EMPTY>  <!-- base font size -->
<!ATTLIST basefont
  id          ID             #IMPLIED
  size        CDATA          #REQUIRED
  color       %Color;        #IMPLIED
  face        CDATA          #IMPLIED
  >



<!ELEMENT font %Inline;> <!-- local change to font -->
<!ATTLIST font
  %coreattrs;
  %i18n;
  size        CDATA          #IMPLIED
  color       %Color;        #IMPLIED
  face        CDATA          #IMPLIED
  >



<!--==================== Object ======================================-->
<!--
  object is used to embed objects as part of HTML pages.
  param elements should precede other content. Parameters
  can also be expressed as attribute/value pairs on the
  object element itself when brevity is desired.
-->



<!ELEMENT object (#PCDATA | param | %block; | form | %inline; | %misc;)*>
<!ATTLIST object
  %attrs;
  declare     (declare)      #IMPLIED
  classid     %URI;          #IMPLIED
  codebase    %URI;          #IMPLIED
  data        %URI;          #IMPLIED
  type        %ContentType;  #IMPLIED
  codetype    %ContentType;  #IMPLIED
  archive     %UriList;      #IMPLIED
  standby     %Text;         #IMPLIED
  height      %Length;       #IMPLIED
  width       %Length;       #IMPLIED
  usemap      %URI;          #IMPLIED
  name        NMTOKEN        #IMPLIED
  tabindex    %Number;       #IMPLIED
  align       %ImgAlign;     #IMPLIED
  border      %Pixels;       #IMPLIED
  hspace      %Pixels;       #IMPLIED
  vspace      %Pixels;       #IMPLIED
  >



<!--
  param is used to supply a named property value.
  In XML it would seem natural to follow RDF and support an
  abbreviated syntax where the param elements are replaced
  by attribute value pairs on the object start tag.
-->
<!ELEMENT param EMPTY>
<!ATTLIST param
  id          ID             #IMPLIED
  name        CDATA          #REQUIRED
  value       CDATA          #IMPLIED
  valuetype   (data|ref|object) "data"
  type        %ContentType;  #IMPLIED
  >



<!--=================== Java applet ==================================-->
<!--
  One of code or object attributes must be present.
  Place param elements before other content.
-->
<!ELEMENT applet (#PCDATA | param | %block; | form | %inline; | %misc;)*>
<!ATTLIST applet
  %coreattrs;
  codebase    %URI;          #IMPLIED
  archive     CDATA          #IMPLIED
  code        CDATA          #IMPLIED
  object      CDATA          #IMPLIED
  alt         %Text;         #IMPLIED
  name        NMTOKEN        #IMPLIED
  width       %Length;       #REQUIRED
  height      %Length;       #REQUIRED
  align       %ImgAlign;     #IMPLIED
  hspace      %Pixels;       #IMPLIED
  vspace      %Pixels;       #IMPLIED
  >



<!--=================== Images ===========================================-->



<!--
   To avoid accessibility problems for people who aren't
   able to see the image, you should provide a text
   description using the alt and longdesc attributes.
   In addition, avoid the use of server-side image maps.
-->



<!ELEMENT img EMPTY>
<!ATTLIST img
  %attrs;
  src         %URI;          #REQUIRED
  alt         %Text;         #REQUIRED
  name        NMTOKEN        #IMPLIED
  longdesc    %URI;          #IMPLIED
  height      %Length;       #IMPLIED
  width       %Length;       #IMPLIED
  usemap      %URI;          #IMPLIED
  ismap       (ismap)        #IMPLIED
  align       %ImgAlign;     #IMPLIED
  border      %Length;       #IMPLIED
  hspace      %Pixels;       #IMPLIED
  vspace      %Pixels;       #IMPLIED
  >



<!-- usemap points to a map element which may be in this document
  or an external document, although the latter is not widely supported -->



<!--================== Client-side image maps ============================-->



<!-- These can be placed in the same document or grouped in a
     separate document although this isn't yet widely supported -->



<!ELEMENT map ((%block; | form | %misc;)+ | area+)>
<!ATTLIST map


  %i18n;
  %events;
  id          ID             #REQUIRED
  class       CDATA          #IMPLIED
  style       %StyleSheet;   #IMPLIED
  title       %Text;         #IMPLIED
  name        CDATA          #IMPLIED
  >



<!ELEMENT area EMPTY>


<!ATTLIST area


  %attrs;
  %focus;
  shape       %Shape;        "rect"
  coords      %Coords;       #IMPLIED
  href        %URI;          #IMPLIED
  nohref      (nohref)       #IMPLIED
  alt         %Text;         #REQUIRED
  target      %FrameTarget;  #IMPLIED
  >



<!--================ Forms ===============================================-->



<!ELEMENT form %form.content;>   <!-- forms shouldn't be nested -->



<!ATTLIST form
  %attrs;
  action      %URI;          #REQUIRED
  method      (get|post)     "get"
  name        NMTOKEN        #IMPLIED
  enctype     %ContentType;  "application/x-www-form-urlencoded"
  onsubmit    %Script;       #IMPLIED
  onreset     %Script;       #IMPLIED
  accept      %ContentTypes; #IMPLIED
  accept-charset %Charsets;  #IMPLIED
  target      %FrameTarget;  #IMPLIED
  >



<!--
  Each label must not contain more than ONE field
  Label elements shouldn't be nested.
-->


<!ELEMENT label %Inline;>


<!ATTLIST label
  %attrs;
  for         IDREF          #IMPLIED
  accesskey   %Character;    #IMPLIED
  onfocus     %Script;       #IMPLIED
  onblur      %Script;       #IMPLIED
  >



<!ENTITY % InputType
  "(text | password | checkbox |
    radio | submit | reset |
    file | hidden | image | button)"
   >



<!-- the name attribute is required for all but submit & reset -->



<!ELEMENT input EMPTY>

     <!-- form control -->
<!ATTLIST input


  %attrs;
  %focus;
  type        %InputType;    "text"
  name        CDATA          #IMPLIED
  value       CDATA          #IMPLIED
  checked     (checked)      #IMPLIED
  disabled    (disabled)     #IMPLIED
  readonly    (readonly)     #IMPLIED
  size        CDATA          #IMPLIED
  maxlength   %Number;       #IMPLIED
  src         %URI;          #IMPLIED
  alt         CDATA          #IMPLIED
  usemap      %URI;          #IMPLIED
  onselect    %Script;       #IMPLIED
  onchange    %Script;       #IMPLIED
  accept      %ContentTypes; #IMPLIED
  align       %ImgAlign;     #IMPLIED
  >



<!ELEMENT select (optgroup|option)+>  <!-- option selector -->
<!ATTLIST select
  %attrs;
  name        CDATA          #IMPLIED
  size        %Number;       #IMPLIED
  multiple    (multiple)     #IMPLIED
  disabled    (disabled)     #IMPLIED
  tabindex    %Number;       #IMPLIED
  onfocus     %Script;       #IMPLIED
  onblur      %Script;       #IMPLIED
  onchange    %Script;       #IMPLIED
  >



<!ELEMENT optgroup (option)+>   <!-- option group -->
<!ATTLIST optgroup
  %attrs;
  disabled    (disabled)     #IMPLIED
  label       %Text;         #REQUIRED
  >



<!ELEMENT option (#PCDATA)>     <!-- selectable choice -->
<!ATTLIST option


  %attrs;
  selected    (selected)     #IMPLIED
  disabled    (disabled)     #IMPLIED
  label       %Text;         #IMPLIED
  value       CDATA          #IMPLIED
  >



<!ELEMENT textarea (#PCDATA)>     <!-- multi-line text field -->
<!ATTLIST textarea
  %attrs;
  %focus;
  name        CDATA          #IMPLIED
  rows        %Number;       #REQUIRED
  cols        %Number;       #REQUIRED
  disabled    (disabled)     #IMPLIED
  readonly    (readonly)     #IMPLIED
  onselect    %Script;       #IMPLIED
  onchange    %Script;       #IMPLIED
  >



<!--


  The fieldset element is used to group form fields.
  Only one legend element should occur in the content
  and if present should only be preceded by whitespace.
-->


<!ELEMENT fieldset (#PCDATA | legend | %block; | form | %inline; | %misc;)*>
<!ATTLIST fieldset
  %attrs;
  >



<!ENTITY % LAlign "(top|bottom|left|right)">



<!ELEMENT legend %Inline;>     <!-- fieldset label -->
<!ATTLIST legend
  %attrs;
  accesskey   %Character;    #IMPLIED
  align       %LAlign;       #IMPLIED
  >



<!--


 Content is %Flow; excluding a, form, form controls, iframe
--> 
<!ELEMENT button %button.content;>  <!-- push button -->
<!ATTLIST button
  %attrs;
  %focus;
  name        CDATA          #IMPLIED
  value       CDATA          #IMPLIED
  type        (button|submit|reset) "submit"
  disabled    (disabled)     #IMPLIED
  >



<!-- single-line text input control (DEPRECATED) -->
<!ELEMENT isindex EMPTY>
<!ATTLIST isindex
  %coreattrs;
  %i18n;
  prompt      %Text;         #IMPLIED
  >



<!--======================= Tables =======================================-->



<!-- Derived from IETF HTML table standard, see [RFC1942] -->



<!--
 The border attribute sets the thickness of the frame around the
 table. The default units are screen pixels.



 The frame attribute specifies which parts of the frame around
 the table should be rendered. The values are not the same as
 CALS to avoid a name clash with the valign attribute.
-->


<!ENTITY % TFrame "(void|above|below|hsides|lhs|rhs|vsides|box|border)">



<!--


 The rules attribute defines which rules to draw between cells:



 If rules is absent then assume:
     "none" if border is absent or border="0" otherwise "all"
-->



<!ENTITY % TRules "(none | groups | rows | cols | all)">
 

 
<!-- horizontal placement of table relative to document -->
<!ENTITY % TAlign "(left|center|right)">



<!-- horizontal alignment attributes for cell contents



  char        alignment char, e.g. char=':'
  charoff     offset for alignment char


-->


<!ENTITY % cellhalign
  "align      (left|center|right|justify|char) #IMPLIED
   char       %Character;    #IMPLIED
   charoff    %Length;       #IMPLIED"
  >



<!-- vertical alignment attributes for cell contents -->
<!ENTITY % cellvalign
  "valign     (top|middle|bottom|baseline) #IMPLIED"
  >



<!ELEMENT table


     (caption?, (col*|colgroup*), thead?, tfoot?, (tbody+|tr+))>
<!ELEMENT caption  %Inline;>
<!ELEMENT thead    (tr)+>
<!ELEMENT tfoot    (tr)+>
<!ELEMENT tbody    (tr)+>
<!ELEMENT colgroup (col)*>
<!ELEMENT col      EMPTY>
<!ELEMENT tr       (th|td)+>
<!ELEMENT th       %Flow;>
<!ELEMENT td       %Flow;>



<!ATTLIST table


  %attrs;
  summary     %Text;         #IMPLIED
  width       %Length;       #IMPLIED
  border      %Pixels;       #IMPLIED
  frame       %TFrame;       #IMPLIED
  rules       %TRules;       #IMPLIED
  cellspacing %Length;       #IMPLIED
  cellpadding %Length;       #IMPLIED
  align       %TAlign;       #IMPLIED
  bgcolor     %Color;        #IMPLIED
  >



<!ENTITY % CAlign "(top|bottom|left|right)">



<!ATTLIST caption
  %attrs;
  align       %CAlign;       #IMPLIED
  >



<!--


colgroup groups a set of col elements. It allows you to group
several semantically related columns together.
-->


<!ATTLIST colgroup
  %attrs;
  span        %Number;       "1"
  width       %MultiLength;  #IMPLIED
  %cellhalign;
  %cellvalign;
  >



<!--


 col elements define the alignment properties for cells in
 one or more columns.



 The width attribute specifies the width of the columns, e.g.



     width=64        width in screen pixels
     width=0.5*      relative width of 0.5



 The span attribute causes the attributes of one
 col element to apply to more than one column.
-->
<!ATTLIST col
  %attrs;
  span        %Number;       "1"
  width       %MultiLength;  #IMPLIED
  %cellhalign;
  %cellvalign;
  >



<!--
    Use thead to duplicate headers when breaking table
    across page boundaries, or for static headers when
    tbody sections are rendered in scrolling panel.



    Use tfoot to duplicate footers when breaking table
    across page boundaries, or for static footers when
    tbody sections are rendered in scrolling panel.



    Use multiple tbody sections when rules are needed
    between groups of table rows.
-->
<!ATTLIST thead
  %attrs;
  %cellhalign;
  %cellvalign;
  >



<!ATTLIST tfoot
  %attrs;
  %cellhalign;
  %cellvalign;
  >



<!ATTLIST tbody
  %attrs;
  %cellhalign;
  %cellvalign;
  >



<!ATTLIST tr
  %attrs;
  %cellhalign;
  %cellvalign;
  bgcolor     %Color;        #IMPLIED
  >



<!-- Scope is simpler than headers attribute for common tables -->
<!ENTITY % Scope "(row|col|rowgroup|colgroup)">



<!-- th is for headers, td for data and for cells acting as both -->



<!ATTLIST th
  %attrs;
  abbr        %Text;         #IMPLIED
  axis        CDATA          #IMPLIED
  headers     IDREFS         #IMPLIED
  scope       %Scope;        #IMPLIED
  rowspan     %Number;       "1"
  colspan     %Number;       "1"
  %cellhalign;
  %cellvalign;
  nowrap      (nowrap)       #IMPLIED
  bgcolor     %Color;        #IMPLIED
  width       %Length;       #IMPLIED
  height      %Length;       #IMPLIED
  >



<!ATTLIST td


  %attrs;
  abbr        %Text;         #IMPLIED
  axis        CDATA          #IMPLIED
  headers     IDREFS         #IMPLIED
  scope       %Scope;        #IMPLIED
  rowspan     %Number;       "1"
  colspan     %Number;       "1"
  %cellhalign;
  %cellvalign;
  nowrap      (nowrap)       #IMPLIED
  bgcolor     %Color;        #IMPLIED
  width       %Length;       #IMPLIED
  height      %Length;       #IMPLIED
  >

Generally, we use

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

for creating a transitional page dtd for validation, but if you want to use your custom transitional DTD then you can use

<!DOCTYPE html SYSTEM ...>

, SYSTEM is used to create you own dtd with customized format using XML. It is not accessible by other users.

For more details, you can directly visit the sites:

• Basics of DTD
• Introduction of DTD's

Object-Oriented JavaScript: Using the `Prototype` Property

noreply@blogger.com (rjs) — Fri, 11 Jul 2008 06:21:00 -0700

# Object-Oriented JavaScript: Using the `Prototype` Property# Prototyping objects: looking at the “prototype” property# Object interaction in JavaScript: applying Inheritance through the “prototype” property# Traversing object properties: using the “for in” loop structure

read more | digg story

Drag Div with Cursor using JavaScript

noreply@blogger.com (rjs) — Thu, 10 Jul 2008 23:50:00 -0700

Event Handling
For this context, we generally use window.event method for creating drag functionality with the help of javascript.

First of all, we need take the position of mouse or cursor within the document with the help of clientX for X position of mouse, clientY for Y position of the cursor.

Example:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Drag Div</title>
<script language="JavaScript" type="text/javascript">

function abc()
{

</script>

</head>

<body onload="abc();">
<div id="x" style="background:#FFCC33; padding:10px; width:150px;">This is Testing!!</div>
</body>
</html>

See other useful Events

Complete Tutorial Reference:- HTML, CSS & JavaScript

noreply@blogger.com (rjs) — Tue, 8 Jul 2008 01:27:00 -0700

This is the place, where u can find the good JavaScript Tutorials ever. It includes DOM, Advanced JavaScript, HTML Reference Tutorial (for Beginner, Intermediate and Advanced Learners), Css Advanced Reference Tutorials for Web, Javascript Quick Tutorial with Examples and AJAX.

read more | digg story

Ajax : Basic to Advance

noreply@blogger.com (rjs) — Mon, 7 Jul 2008 05:58:00 -0700

Ajax stands for Asynchronous JavaScript and XML, it is a method of creating/developing interactive web based applications so that user requests immediately. Ajax includes major web tools like JavaScript, Document Object Model (DOM), Dynamic HTML (DHTML), Extensible Markup Language (XML), XSLT, Cascading Style Sheets (CSS), HTML (Hype-Text Markup Language), ActiveXObjects and XMLHttpRequest.

In short, AJAX is a method for retriving dynamic data very Easily with lots of data.

The Major role of Ajax is to handle responseText and responseXML parsing.

The responseXML method is very handy to use, for this context developer has to create the XML for that further it requires data parsing. The first thing developer will have to do is target the root node of the XML response:

" var client = data.get.responseXML.documentElement; "

For more help, simply you can visit the site: www.w3schools.com/ajax/default.asp

25 Excellent Ajax Techniques and Examples

noreply@blogger.com (rjs) — Fri, 4 Jul 2008 23:36:00 -0700

If you’re interested in expanding your understanding of Ajax techniques and practices, check out these 25 hand-picked Ajax articles and tutorials that outline various methods and concepts involved in the development of Ajax-based applications.

read more | digg story

Top 5 javascript and Ajax frameworks

noreply@blogger.com (rjs) — Fri, 4 Jul 2008 23:33:00 -0700

A list of the top 5 javascript frameworks and features. These are the best and mostly used frameworks which have integrated technologies related to Ajax, XML, DTD, etc.

read more | digg story

Best Ajax and Javascript Solutions

noreply@blogger.com (rjs) — Tue, 1 Jul 2008 00:47:00 -0700

Mocha UI
Mocha is a rich web Based applications UI Library built on the MooRD Tools javascript and ajax frameworks. The Mocha Core UI components are made with advanced canvas tag graphics.

This is the best use of ajax frameworks, is developed by Moo RD Tools and for advanced learners anyone can visit Moo Tools.net (its a completely javascript frameworks source).

Facebook Ajax Search
The autocomplete functionality of adding multiple users to messages used on Facebook. “I’d seen it in Facebook before, generally based on core Ajax and Javascript Tool search which has a really decent implementation of this concept is a modern programming principles”.

These days there are lots of APIs available for this kind of functionality. Which have unique features for using XML file into that Frameworks.

In this context, there is a UI control that replaces a standard HTML textarea. The Rich Text Editor’s Toolbar is extensible via a plugin architecture so that advanced implementations can achieve a high degree of customization. The tool is based upon Yahoo UI Library.

CSS Science: CSS Frameworks and Code Reusability

noreply@blogger.com (rjs) — Fri, 27 Jun 2008 03:10:00 -0700

No one has to write the duplicate CSS Code or XHTML-Markup over and over again. At some point you have to define classes and IDs throughout the web-projects. To avoid unnecessary mistakes or codes you might have to start not from a dummy file, but from an almost standard format. The latter might contain some basic definitions you’d write in your code anyway. However, once you’ve decided to create such a standard format then you need to make sure it is really bulletproof — besides, if the CSS Stylesheet also sets up optimal typographic rules and basic form styling, that would be the best.

And this is how, CSS Frameworks and CSS Reusability of Code are becoming important.Get CSS Frameworks and CSS Reusability

Using them, you can get yourself a perfect CSS stylesheet and markup master, save your time and ensure the best quality of your code from the very beginning to advanced level. But what are CSS Frameworks? And why do you need the Reset for?

so the answer is here....

u can simply download the advanced css book Download CSS Book

Best Book for HTML & CSS Tutorial

noreply@blogger.com (rjs) — Fri, 27 Jun 2008 03:01:00 -0700

The highly used web browsers like — Firefox 3, Opera 9.5 and Internet Explorer 7 — provides a lot of features which seems to save and secure lots of work time for web-developers in future.

In that Reference, the Best Tutorial e-Book over HTML & CSS can be found here.

Download Now!

Reference Tutorials in Technorati.com

noreply@blogger.com (rjs) — Sun, 22 Jun 2008 22:09:00 -0700

All user those who are interested and are used to Web, AJAX, CSS, Javascript Tutorials for thei Rich Web Application can found here.

Users can see my profile over Technorati.com mentioned below or can directly visit Technorati.com

Technorati Profile

Hottest Online Gaming!!

noreply@blogger.com (rjs) — Mon, 24 Mar 2008 22:25:00 -0700

This section covers the best online games over the website which includes action games, puzzling games, arcade games, etc., named Games Flame.

About Games Flame

Recently created site with major online games for all kind of users.more...

or you can visit the complete details of the site by reading this blog Learn More About GamesFlame.com

Introduction to CSS 3

noreply@blogger.com (rjs) — Fri, 14 Dec 2007 23:29:00 -0800

CSS3

Cascading Style Sheets Level 3 is known as CSS3 for short. Cascading Style Sheets level 3 is the most recent approach of CSS which has a modularized approach which helps to differentiate the connections between the different parts of the specification and also helps in attaining a systematic approach with more flexibility.

The popularity of Cascading Style Sheets Level 3 is because of its modularized capability which gives greater flexibility. That is in other words the Cascading Style Sheets Level 3 has the capability of building of specific tests on a per module basis. By this modularized capability users or developers can develop and maintain the system very easily as it allows to update individual modules and test the particular module and then integrate and test it on whole as and when needed thus making development and maintenance easier .Thus to support the modularized capability of Cascading Style Sheets Level 3 each of the module of Cascading Style Sheets Level 3 modules have syntax, grammar and so on.

Thus having got a brief idea on what a Cascading Style Sheets Level 3 is let us see in this section the reasons for the popularity of Cascading Style Sheets Level 3 and also the features of Cascading Style Sheets Level 3.

Thus the popularity of Cascading Style Sheets Level 3 is because Of the introduction of modules that is modularized approach which gives the following benefits namely:

Completion Time is Faster:
This is because the specification to be completed are finished and checked in modules and thus making completion time faster and also added to it easier.

Flexibility:
The modularized approach helps to develop and maintain the system on a per module basis and thus gives more flexibility to the system.

Easier Maintenance:
By making updation and changes only to the individual modules needed and testing of the individual modules and then integrating with the total system the maintenance part becomes very simple.

There are many features of Cascading Style Sheets Level 3 which gives its powerfulness. Having got an idea about Cascading Style Sheets Level 3 let us see some of the important features of it which adds to its powerfulness.

· Selectors

· Multi-Column Layout

· Text Effects and Layout

· Paged Media and Generated Content

· First-Letter and First-Line Pseudo-Classes

· Ruby

Let us see about each of the feature mentioned above in brief and a detailed approach of each would be seen in coming sections.

Selectors:
This feature of Cascading Style Sheets Level 3 helps the developer to select specific levels of the document and work with it. Also added to this is this feature browsers support the feature of advanced Cascading Style Sheets Level 3 Selectors and thus making CSS3 more popular.

Multi-Column Layout:
As the name suggests using this property Cascading Style Sheets Level 3 the designers and users can output their content in multiple columns along with definitions for each column like column-width, column-count and so on.

Text Effects and Layout:
More features and options are available in Cascading Style Sheets Level 3 for layout and display of text with effects as per the user needs like justification of text in documents, hyphenation and many more. We will see in detail in coming sections how to handle all these features.

Paged Media and Generated Content:
Using this feature of Cascading Style Sheets Level 3 one can have page numbers, headers, footers for page added and many more. There are also many options in this feature to handle printing of pages as needed.

First-Letter and First-Line Pseudo-Classes:
The first-line pseudo-element describes the first formatted line of an element and this can be attached to all elements of Cascading Style Sheets Level 3. The first-letter pseudo-element describes the first formatted letter of an element and this also can be attached to all elements of Cascading Style Sheets Level 3.

The method of applying this property with examples and the explanations will be seen in coming sections.

Ruby:
This is very important feature of Cascading Style Sheets Level 3 by using which programmers can add annotations on top or next to words wherever needed thus making the difficult part of text more meaningful to users.

Thus on the whole Cascading Style Sheets Level 3 proves to be a powerful tool for Web designers and thus gaining its popularity.

CSS3 Selectors
The main usage of Cascading Style Sheets selectors is that it is used for binding style properties to elements in the document. The Cascading Style Sheets Level 3 selectors are compatible with many modern browsers thus making its usage more powerful and popular. In general a CSS selector is made up of a pattern that is matched against all elements in the document tree.

That is to explain in brief a pattern has set of conditions placed in it and when all conditions in the pattern are satisfied or in other words returns true value then selector is applied which means the declarations placed within the rule are applied to the element or elements that match.

That is in general the selectors take the following notation namely:

expression element ? boolean

The above means that the specification placed defines whether that element matches the selector. A set of elements or a single element from the set of elements can be selected by means of expressions defined as above and these expressions gets applied across all the elements in a sub tree.

First one must know the basic categories of selectors before going in detail.

In broad there are two basic categories of selectors. They are namely:

· simple

· combined

Let us see what each of these means:

Simple Selector:
A simple selector consists of either a type selector which is denoted by pattern E and thereby matches any E element or the universal selector which is denoted by pattern * and thereby matches all element in the document followed by zero or more attribute selectors which represents a pattern denoted as E[attr] thereby matching any E element that has an attr attribute, regardless of its value, ID selectors denoted by pattern #footer and there by matches any element with an id equal to footer, or pseudo-classes.

Combined Selector:
The combined selector is also called as contextual selector and this contains two or more simple selectors separated by a combinator.

The Cascading Style Sheets Level 2 also had selectors feature in it. There are some differences and some new features that are implemented in the Cascading Style Sheets Level 3. Let us see some of them namely:

Definition:
In Cascading Style Sheets Level 3 the definitions that we defined above for simple and combined selectors and many more has been redefined. That is in other words let us see how the simple selector is represented in Cascading Style Sheets Level 3.In Cascading Style Sheets Level 3 simple selector is defined as sequence of simple selectors. Like that there is change in all definition which we will see in coming sections as we define each module in detail.

Introduction of optional namespace component:
Introduction and Usage of an optional namespace component which is allowed for specification of an element type in Cascading Style Sheets Level 3. We know that type selector matches every instance of a particular element type that is in other words has a pattern denoted by pattern E and thereby matches any E element. Also a universal selector is denoted by pattern * and matches all element in the document. This new optional component usage namely the optional namespace component of Cascading Style Sheets Level 3 can be used with any of these type element selectors or the universal selector and attribute selectors.

Introduction of new combinator:
Combinators in general are used to separate the two or more simple selectors that make up a combined. There is a new combinator introduced in CSS3 namely the Indirect Adjacent combinator. Detailed explanation of types of combinators available along with the usage, syntax with the explanation in detail on the new combinator also will be made in coming sections.

Substring matching attribute selectors:
This new concept of Substring matching attribute selectors in Cascading Style Sheets Level 3 helps developers to match substrings in the value of an attribute.

New pseudo-classes:
The new pseudo-classes in Cascading Style Sheets Level 3 like :target pseudo-class helps to link a certain element within the document. There are many new pseudo-classes in Cascading Style Sheets Level 3 like the above .To mention some more are namely like :enabled and :disabled pseudo-classes which helps programmers to control the appearance of user interface elements like whether enabled or disabled as needed by them. There are still a lot more new pseudo-classes in Cascading Style Sheets Level 3 which all will be dealt in detail in coming sections.

New pseudo-elements:
The new pseudo-elements in Cascading Style Sheets Level 3 like ::selection pseudo-element helps to control the way a selected text would appear like color or any properties. Here we can note that a special notation namely "::" has been used in Cascading Style Sheets Level 3.

Modularization of Selectors:
As we have seen in our earlier section the modularization is the major concept of Cascading Style Sheets Level 3 which adds to its powerful ability. The selectors concept of Cascading Style Sheets Level 3 is also a CSS3 Module and thereby becomes an independent specification for handling.

CSS3 Multi-Column Feature

CSS3 Multi-Column Module is a vital feature present in CSS3.This feature enables users to flow the content of an element into multiple columns. The CSS3 Multi-Column Module is a important feature because it gives users the following features or advantages there is no need to for users to scroll up and down while reading the text from one column to the next column,

it prevents the need for horizontal scrolling, wraps text user friendly and easier to read without making too short words or lines and most of all everything could be embedded in a single page making it comfortable and economical. This feature is supported by most of the famous and commonly used browsers like Mozilla and Firefox.

Need of Multi-Column:
When one compares vertical space and horizontal space the vertical space is expensive whereas in contrast the horizontal spacing proves to be cheaper and thus the need for these increases. In a screen or window which has fixed layout achieving horizontal spacing is easier but this lacks the dynamic ability of line-length maintenance. In printing media it is very essential to maintain the ideal line length defined and they do this by having the text spread across columns. To achieve the above feature in web design media the multi-column module of CSS3 gives a dynamic and good advantage for users. It helps designers to specify the number of columns an element should be spread across, the style of columns, width and so on. The formatting of text is taken care by the browser automatically. The multi column format supported by CSS3 is represented below to get a clear idea on this concept. That is for instance to have the format as below:

The first format represents a simple normal CSS box layout format and this would be achieved by using the div tag as all would be aware of as below:

<div id="xxx">
<p>....</p>
<p>....</p>
..............
</div>

The second format shown above represents a CSS3 multi column format and this would be achieved by using the #entry as below:

#entry
{
column count:number;
}

The representation is of CSS3 normal CSS layout and CSS3 multi column shown below:

The second format as shown above denotes CSS3 multi column module format.

The multi column module feature of CSS3 is thus a specification of CSS3 proposed by the W3C standard and is accepted universally. As the name suggests using this property Cascading Style Sheets Level 3 the designers and users can output their content in multiple columns along with definitions for each column like column-width, column-count and so on. The above feature of Multi-column layouts of CSS3 helps users - web designers, publishers, authors, newspapers and magazine printers to use the web media in a extensive and useful format as per their needs in a elaborate and efficient manner. In this context it is vital to know that the first browser implementation of the multi column module feature of CSS3 Module was done by Mozilla. It is also found that splitting of elements into columns is also possible by JavaScript and thus enabling implementation of the CSS3 Multi-Column module.

Properties Associated with CSS3 Multi-Column Feature:

The attributes or properties associated with CSS3 multi-column feature are as given below:

· column-width

· column-count

· column-rule

· column-gap

Let us see what each of this denotes in brief:

Column-width:
The column-width property of CSS3 denotes the width of columns within the element.

The general format of using column-width property is as below:

Value: <length> | auto

The column-width gets applied to block-level elements in CSS. In the above the value is that is length is denoted and given as pixels.

For example a user can denote column width property as 600 pixels by using the format as denoted below:

body { column-width: 600px; }

column-count:
As the name implies the column-count property denotes the number of columns. These are the number of columns into which the content of the element gets into.

The general format of using column-count property is as below:

Value: <integer> | auto

In the above the integer can be any number from 1,2,... as denoted by user. User can also denote the column count as auto which provides room for as many columns as there are in the specification or usage. The column count gets applied to block-level elements in CSS.

For example a user can denote column count as integer 2 by using the format as denoted below:

body { column-count: 2 }

column-rule:
The border width column-rule property of CSS3 depicts the border rule, border style and border color that is represented between columns. In this case one need not separately mention by the name as column-rule-color, column-rule-style and column-rule-width but instead can denote as column-rule and give the values for border width, border style and border color separated. That is the general syntax for column-rule property of CSS3 is shown below. The column rule property also like column count and column width properties gets applied to block-level elements in CSS.

The general format of using column-rule property is:

Value: [ <'border-width'> || <'border-style'> || <color> ]

The border-style that could be used are 'dotted', 'ridge', 'groove' and 'dashed' styles.

For example let us see an example which used all the three properties of CSS# defined above column-width, column-count and column-rule denoted in a single example. That is a user can denote a column count as integer 2 with column width as 20pixels and border-width as 2pixels with border-style as solid ad color used as #697 by using the format as denoted below:

body { column-count:2; column-width: 20px; column-rule: 2px solid #697; }

column-gap:
The user can set the padding between columns using the property of column-gap of CSS3.The column gap is thus always a positive integer. There is association between column rule property of CSS3 we have seen above and column gap property of CSS3.That is if column rule property is defined between columns then column gap defined by the user gets applied for half on each side of the column rule. If there is no column rule defined and only column gap defined by the user then the column gap property of CSS3 defined by the user depicts the distance between columns.

The general format of using column-gap property is as below:

Value: <length>

The length denoted by the column gap in above is always a positive integer ands must always be denoted in pixels.

For example a user can denote column gap as integer 20 pixels by using the format as denoted below:

body { column-count: 3; column-gap:20px; }

In the above there is no column rule defined and only column-gap property is defined which means the 20 pixels is the distance between each column.

For example let us see another instance

body { column-count:3; column-rule: 2px solid #697; column-gap: 20px;}

In the second example as above the column rule property as well as column gap property is defined. So in this case the 20 pixels of column gap defined get applied as half on each side of the column rule that is 10 pixels on each side of the column rule.

Ways of Implementing Multi Column Feature of CSS3:
Having seen the importance and the properties associated with Multi Column Feature of CSS3 in detail let us see the ways of Implementing Multi Column Feature of CSS3 in brief. This is done by using the properties of CSS3 defined above column-count, column-rule, column-width and column-gap within the tags <body>, <div>,<p> and so on. Let us see how to do in an orderly and evenly manner.

· The first step is to decide and define the number of columns required in the column-count property of CSS3.For instance as explained before to define 3 columns the column-count attribute of CSS3 is defined as 3 as below:

body { column-count : 3 }

As explained before in our previous section if auto is specified then the number of columns defined is determined or calculated automatically.

· The second step is to define the width of columns by using the column-width property of CSS3.For instance as explained before to define 20 pixels for columns width the column-width attribute of CSS3 is defined as 20pixels as below:

body { column-width : 20px }

Column Width Representation:
As explained before if auto is specified then the width of columns defined is determined or calculated automatically.

Thus there is lot of advantages and uses achieved by users by using the Multi Column Feature of CSS3 like defining multi column layout, column width, space, count and also adding new columns as and when required in the window. But if only the column count and column width property is present in CSS3 then while adding new columns in window or while resizing readability due to flowing from columns to columns become difficult. So to achieve better readability and enhancement two more properties - column-gap and column-rule takes its presence in CSS3 and this was explained in detail with example in our previous section

CSS3 Advantages

Having got a detailed idea of CSS3 and its features with some of the vital attributes of CSS3 let us see the advantages or uses of CSS3 in brief in this section. There are numerous and variety of areas in which CSS3 makes it mark and thus users finds it one of the comfortable and powerful tools for usage thus making it a reason for its popularity. Let us see some of the important advantages and uses of CSS3 in detail.

Usage of style sheet:
Long before introduction of CSS3 in fact the Cascading style sheets concepts designers of web were using HTML markup to denote the font colors, background styles, border size. But after the introduction of Cascading style sheets concept all these got moved into a separate style sheet area thus making the users to have an easier and comfortable HTML markup. This gives another associated advantage of CSS3 are easier maintenance by which updations and changes are made only to the individual modules needed and testing of the individual modules is carried out and then integrating with the total system thus making the maintenance part very simple.

Differentiation and Isolation:
The concept of CSS3 helps users to have presentation separated from structure. That is for instance prior to the concept of CSS3 while users and web designers were using HTML markup the way of depicting or denoting a heading to be centered on the page in Bold, Blue with Ariel font would be as follows:

<h2 align="center">
<font color="blue" size="+6" face="Ariel">
<i>Usage of CSS</i>
</font>
</h2>

The above structure is very difficult to manage because the markup had to be repeated for each heading to apply wherever needed thus making more complex maintenance and presentation. But by the concept of Cascading style sheets and CSS3 the presentation separated from structure. That is clear differentiation and isolation is made where by the style sheet defines presentational characteristics and the structure of document defined in heading <h2>. Thus taking the following format:

<h2>Benefits of Cascading style sheets</h2>

h2 {
text-align: center;
color: blue;
font: bold "Ariel";
}

The above separation of presentation from structure concept helps the users to maintain in an efficient, easier and comfortable manner. Thus the modularized approach helps to develop and maintain the system on a per module basis and thus gives more flexibility to the system.

Helps to achieve Multi Column Layout:
Multi-Column Module is a vital feature present in CSS3.This feature enables users to flow the content of an element into multiple columns. The CSS3 Multi-Column Module is a important feature because it gives users the following features or advantages are there is no need to for users to scroll up and down while reading the text from one column to the next column, it prevents the need for horizontal scrolling, wraps text user friendly and easier to read without making too short words or lines and most of all everything could be embedded in a single page making it comfortable and economical. We have seen about this Multi-Column Module feature in detail in our earlier section of CSS3.

Flexibility in Handling:
The Cascading style sheets concept helps users to handle in a flexible and convenient way the web designing because it is possible to attach the CSS style information as a separate document or if the user wishes it is also possible to attach the CSS style information embedded within the HTML document. Also it is possible to handle multiple style sheets that is to say in other words multiple style sheets can be imported anywhere. It is also possible for users to specify many alternative style sheets which enable users to make a choice between them as needed. Thus the modularized approach of CSS3 helps to develop and maintain the system on a per module basis and thus gives more flexibility to the system .Thus greater control and flexibility is achieved at presentation level by user of CSS3 because of the advantages and powerful features of CSS3.

Handling multiple background images:
The drawback with CSS2 was that CSS2 allowed only a single background image per element. This drawback was removed in CSS3 by its capability of handling multiple background images per element.

Users find it amazing and powerful to use since it is possible to handle eight background images to a single element which is really a powerful feature of CSS3 ability. By this powerful feature of handling multiple background images per element users can create interesting effects of various kinds without the need of additional elements thus making it easier and efficient way of handling images and also the completion time is achieved faster. Also the selectors feature of Cascading Style Sheets Level 3 which we have seen in our earlier section in detail helps the developer to select specific levels of the document and work with it. Also added to this is this feature browsers support the feature of advanced Cascading Style Sheets Level 3 Selectors and thus making CSS3 more popular. In this context it is worth to mention about the border-radius command of CSS3 which is very useful for handling and bringing out rounded Corners without images with ease.

CSS3 Opacity
Need for Handling Transparency:
Before the introduction of features in CSS3 for handling transparency of images the web design though took over in various aspects had a great limitation embedded in it. That is the print design can handle overlaying of text on a background which could either be an image or color background.

This overlaying of text on background ability have the print design the ability of giving fading of text effect in the background and thereby handling the feature of transparency of images. But in contrast the web design lacked this powerful ability before the introduction of features in CSS3 which was handled in CSS3 by its powerful feature of opacity.

What is Opacity in CSS3:
Opacity is actually a property of CSS3 which gives its the ability to change the opacity of web design objects or elements and thereby make the element achieve the effect of fading and appearing thereby handling transparency of images. In short opacity is actually a property introduced in the version of CSS3 which would help users to define and handle the transparency of images on web screen with respect to its background.

Structure of Opacity in CSS3:
The general syntax of the powerful feature opacity in CSS3 is as below:

opacity: <alphavalue> | inherit

In the above the alphavalue denotes any value in the range from number 0.0 to 1.0 inclusive of both. In this the number 0.0 denotes fully transparent image which means that the background image to the element would be completely visible and number 1.0 denotes fully opaque which means that the background image to the element would be completely invisible. The default initial value is 1.0.

Opacity Browser Support:

Netscape 7
Mozilla 1
Firefox 1, 2
Opera 9
Safari 1
For example

opacity:1.0

The above example denotes the transparency of element to be completely opaque thereby making all the background images below the element defined to be completely invisible.

The option inherit is optional which if included denotes that the opacity property of the element defined should be maintained in the same way as that of its parent opacity. The opacity feature is handled and supported by Netscape browsers and is not supported by non-Mozilla browsers and is also not supported by Internet Explorer6 and Internet Explorer 7. The above statement may put the users feel that Internet Explorer being famous browser could not handle opacity property making it less powerful ability. But it is not so because though Internet Explorer does not support opacity property of CSS3 it supports an equivalent property alpha filter which is a property of Microsoft. The alpha filter property of Internet Explorer takes any value in the range from number 0 to 100 inclusive of both. In this the number 0 denotes fully transparent image which means that the background image to the element would be completely visible and number 100 denotes fully opaque which means that the background image to the element would be completely invisible. Thus it now clear from the alpha filter property that if one wants to handle transparency of images in CSS3 using Internet Explorer then they must multiply opacity by 100 and add the corresponding alpha filter.

So the general syntax for handling transparency of images in CSS3 using Internet Explorer property of alpha filter is as below:

filter: alpha(opacity=value);

The Mozilla-based browsers also support the property of opacity of CSS3 but some of the Mozilla-based browsers use the syntax with keywords as

-moz-opacity

for handling opacity property of CSS3

Apart from the above representation placement position also has to be specified along with the sytax of opacity definition. The placement position supported by Internet Explorer and Mozilla-based browsers is float:left

An example of the representation is given below:

<span style="float:left;filter:alpha(opacity=30);-moz-opacity:.30;opacity:.30;">

One more feature which makes using opacity property powerful is the way or syntax of opacity property is convenient to handle. This is because one can use the same value for rgb but still can achieve shades in images by using the opacity property defined in CSS3 instead of achieving different shades by giving different values for rgb which is inconvenient for users to handle. The example given below explains this in detail.

Defining using opacity property of CSS3 takes the below format:

<div style=" background: rgb(255, 0, 0) ; opacity: 0.1;"></div>
<div style=" background: rgb(255, 0, 0) ; opacity: 0.3;"></div>
<div style=" background: rgb(255, 0, 0) ; opacity: 0.5;"></div>
<div style=" background: rgb(255, 0, 0) ; opacity: 0.7;"></div>
<div style=" background: rgb(255, 0, 0) ; opacity: 1;"></div>

Instead of inconvenient way of handling using rgb without opacity property as shown below:

<div style=" background: rgb(241, 182, 178) ; "></div>
<div style=" background: rgb(243, 152, 132) ; "></div>
<div style=" background: rgb(247, 86 , 84) ; "></div>
<div style=" background: rgb(251, 35, 40) ; "></div>
<div style=" background: rgb(255, 0, 0) ; "></div>

The above concepts and effects of transparency which we applied for background images of elements defined can also be applied to elements transparency. That is the user can define the opacity in the same way for the image or element directly which will make the element to fade and appear in and out of the background. Let us see an example to understand this concept of handling transparency for background images in detail:

<img src="http://exforsys.com/sample/test/training.jpg"
style="opacity:0.3;filter: alpha(opacity=30) ;" />

CSS3 Wrapping
Wrapping is a vital property for proper display of contents in web pages for if wrapping is disabled then the user could not display and view long lines that goes outside the window boundary and thus becomes useless.

Thus in this context it becomes necessary to handle preformatted text on web pages which can be done in CSS3 in several ways like using text-wrap, by using Pre-tag to display preformatted text on web pages and also by using the concept of word wrap in CSS3.Let’s see about each of these in detail.

Text Wrapping:
The text wrapping in CSS3 is handled by 'text-wrap' and 'word-wrap' properties. Let us see about these properties in detail.

text-wrap:
The general format of text-wrap property of CSS3 is as follows:

text-wrap: normal | unrestricted | none | suppress

In the above the default initial value is normal and the above format is used for handling text wrapping mode of text in CSS3. In the above we could find that the text-wrap can take any one of the values normal, unrestricted, none or suppress. Let us see what each of this denotes in brief.

Values of text-wrap:
normal:
When this value is taken by text-wrap mode then it denotes that the breaking of lines is allowed at the allowed break points.

unrestricted:
When this value is taken by text-wrap mode then it denotes that the line breaking can take place only between any two grapheme clusters and the final effect of line breaking would be in such as way that the Character shaping would have the effect of no breaking at all.

suppress:
As the name implies when this value is taken by text-wrap mode then the line breaking is suppressed within the element.

none:
When this value is taken by text-wrap mode then lines do not break any text that does not fit within the boundary get overflowed.

Word Wrap:
Like text wrapping as seen above CSS3 also can handle word wrapping by using the property named as word-wrap by which users can define break within a word and thereby prevent the overflowing when a word defined as string becomes long enough to fit inside a line box. But the vital point to note here is the property of word-wrap in CSS3 takes its effect and presence only when the text-wrap property tales its value as 'normal' or 'suppress'.

The general format of word-wrap property of CSS3 is as follows:

word-wrap: normal| break-word

In the above the default initial value is normal and the above format is sued for handling word wrapping mode of text in CSS3. In the above we could find that the word-wrap can take any one of the values normal, suppress. Let us see what each of this denotes in brief.

Values of text-wrap:
normal:
When this value is taken by word-wrap mode then the lines are allowed to break only at the defined and allowed break points.

break-word:
When this value is taken by word-wrap mode then causes an unbreakable word to break provided there are no acceptable break points in the line. Also the breaking of words is done in such a way that the final character shaping would give the effect of word not being broken.

For example:

word-wrap: break-word;
The above statement define in Internet Explorer browser would cause the word-wrapping mode to take the value and effect of value break-word.

In the context of text handling in CSS there is yet another property named as white-space property.This property is similar and in fact a short alternative property for white-space-collapse and text-wrap properties. Let us now see about the white-space property of CSS3 in detail.

white-space Property:
The white-space Property of CSS3 depicts the way of handling and treating the white spaces or line returns in a text. Earlier version of CSS which was CSS2 provided four values for the property white-space. They are:

• inherit
• normal
• pre
• nowrap

CSS3 can take five possible values for the property white-space which are

· normal

· pre

· nowrap

· pre-wrap

· pre-line

The general format of text-wrap property of CSS3 is as follows:

white-space: nnormal | pre | nowrap | pre-wrap | pre-line

In the above the white spaces denotes any of space, tab, and End-of-line characters.

Let us see about each in brief:

normal:
When this value is taken by white-space Property then it sets the value for white-space-collapse property as 'collapse' and sets the value for text-wrap property to 'normal'. Denoting the value of white-space as normal would enable the browser to consolidate sequences of white spaces into a single one and also line wrapping takes place appropriately as needed.

pre:
When this value is taken by white-space Property then it sets the value for white-space-collapse property as 'preserve' and sets the value for text-wrap property to 'none'. Denoting the value of white-space as pre would prevent the browser from consolidating sequence of white spaces into a single one and also the wrapping the lines is prevented.

nowrap:
When this value is taken by white-space Property then it sets the value for white-space-collapse property as 'collapse' and sets the value for text-wrap property to 'none'. When the white-space property takes the value of nowrap then as the name implies no wrapping of lines takes place but white space gets consolidated as needed by the browser.

pre-wrap:
When this value is taken by white-space Property then it sets the value for white-space-collapse property as 'preserve' and sets the value for text-wrap property to 'normal'

pre-line:
When this value is taken by white-space Property then it sets the value for white-space-collapse property as ''preserve-breaks' and sets the value for text-wrap property to 'normal'

CSS3 Links Creation and Usage

Links are very vital for any web page to navigate through the site and so is also with CSS3. In CSS3 it is possible to handle links even more powerful and effectively as it is possible to handle various states of links which are link, visited, hover, and active states. Also it is possible to create buttons and boundaries to links in CSS3 by using the features of CSS3 technology which gives the effect of button to links.

As explained above in CSS3 it is possible go handle various states of links which are link, visited, hover, and active states. Before going in depth of how to handle this in CSS3 it is first important to know what each of these states means. Let us see about each of these states in brief.

States of Link:
The states of link are link, visited, hover, and active states.

visited:
This refers to the state of the link after a link has been clicked.

hover:
This refers to the pre-state of the link or in other words the state when a mouse is paced over the link.

link:
The link state refers to the default state of the link.

active:
This refers to the state of the link just after link is being clicked.

The above all four states of link can be handled in CSS3 as needed by the user. But care must be taken by user to use them in proper order namely link followed by visited then hover followed by active that is in short form denoted as LVHA. If the above order is not followed then there would be confusion in the link states which would cause the links from not working. So user must take sufficient care in following the above order while designing links using CSS3.

The general syntax of the link property of CSS3 is as below:

A:link|visited|active|hover

which refers that the link property can take any of the four values link, visited, active or hover. All the four properties can take value as <style>.The style can be given as needed by user just like styling for normal texts. Let us see a small example to understand the above link state usage in CSS3 in brief. Let us define each link state with a separate color that is a unique color for denoting the default state of link and a separate color for denoting the mouse paced over a link, another unique color for representing the link being clicked and visited and then a color to denote the active state of link. This can be done collectively as below:

<style type="text/css">
A: link { text-decoration: none;color: #00e; }
A:visited { text-decoration: none;color: blue; }
A:hover { text-decoration: underline;color: #fff; }
A:active { text-decoration: none;color: red; }
</style>

In the above we see another style property mentioned as text-decoration. In the above example the hover alone has text-decoration value as underline and the rest has text-decoration value as none which depicts that the link becomes underlined only when mouse is placed over the link and remains as not underlined in other states.

It is also possible for creating color on background for the links created. The background color can be set as determined by user for each state of link.

For example:

<style type="text/css">
A: link { background: #CCFF00;text-decoration: none;color: #00e; }
A:visited {background: #ECEC00; text-decoration: none;color: blue; }
A:hover { background: #FFFF00;text-decoration: underline;color: #fff; }
A:active { background: #CCCC00;text-decoration: none;color: red; }
</style>

The above example would create a background color for each state of link as defined above.

Shorter representation:
Now let us see how to present the above format in a shorter format if some properties are common for certain link states.

First let us see an example to understand this concept in detail.

a:link {
color:red;
font-weight:bold;
text-decoration:underline;
}

a: visited {
color:blue;
font-weight: bold;
text-decoration:underline;
}

a: hover {
color:#ff00;
font-weight: bold;
text-decoration:none;
}

a:active{
color:#fff0;
font-weight: bold;
text-decoration:none;
}

In the above representation we find that all the states link, visited, hover and active has the propery

font-weight:bold;

as common and also the property

text-decoration:underline;

holds good for link and visited states and the property

text-decoration:none;

holds good for hover and active states respectively.

So we can combine the above common attributes and could make a shorter representation in CSS3.The above example would take a shorter representation in CSS3 as below:

a{
font-weight:bold;
text-decoration:underline;
}

a:link{
color:red;
}

a: visited {
color:blue;
}

a: hover {
color:#ff00;
text-decoration:none;
}

a:active{
color:#fff0;
text-decoration:none;
}

Use of Creating Links as Buttons:
As explained before it is possible to create buttons and boundaries to links in CSS3 by using the features of CSS3 technology which gives the effect of button to links. One might have a query of what is the use of making links as buttons when a user can normally place a button by using the concept of images as done in earlier versions. The main drawback associated with the earlier approach of placing button by using the concept of images is time factor. That is it takes much time for page to load which in turn decreases the performance. This drawback is removed by the concept of border style being used in links which gives a button effect to links and thereby making the time slice less and there by improving the performance.

Introduction to Web 2.0

noreply@blogger.com (rjs) — Sat, 27 Oct 2007 00:04:00 -0700

I'm using the term "Web 2.0 design" to describe the prevailing style of web design I introduce in my current style article.

Many people use the term "Web 2.0" to describe:
¤ a resurgence in the web economy
¤ a new level of technological interactivity between web sites and services
¤ or social phenomena deriving from new types of online communities and social networks

Many others also use the term in reference to a recent school of web design

In this tutorial, I describe various common graphic design elements in modern web ("2.0") design style.

Introduction
I'm going to take you through the features of the current wave of excellent web site designs, dissect the most significant features, explain why each one can be good, and show you how to use them in your own sites.

If I had to sum up "Web 2.0" design in one word, it would have to be "simplicity", so that's where we'll start.

I'm a great believer in simplicity. I think it's the way forward for web design.

Today's simple, bold, elegant page designs deliver more with less:
¤ They enable designers to shoot straight for the site's goals, by guiding the site visitor's eye through the use of fewer, well-chosen visual elements.
¤ They use fewer words but say more, and carefully selected imagery to create the desired feel.
¤ They reject the idea that we can't guess what people want from our sites

Simplicity
Web design is simpler than ever, and that's a good thing.

2.0 design means focused, clean and simple.

"Use as few features as are necessary to achieve what you need to achieve"

I really believe in simplicity. That's not to say that all web sites should be minimal, but that we should use as few features as are necessary to achieve what you need to achieve.

I've written elsewhere about Occam's Razor, which is a principle I use all the time. One way of interpreting it is: Given any two possible solutions to a problem, the simpler one is better.

Here are some examples. Note how unnecessary elements have been stripped out from each. There could be a lot more on each page than there is... but would that make them stronger?

The result is that you have to look at the content. You find yourself interacting with exactly the screen features the designer intended. And you don't mind - it's easy, and you get just what you came for.

Why simplicity is good?
¤ Web sites have goals and all web pages have purposes.
¤ Users' attention is a finite resource.
¤ It's the designer's job to help users to find what they want (or to notice what the site wants them to notice)
¤ Stuff on the screen attracts the eye. The more stuff there is, the more different things there are to notice, and the less likely a user is to notice the important stuff.
¤ So we need to enable certain communication, and we also need to minimise noise. That means we need to find a solution that's does its stuff with as little as possible. That's economy, or simplicity.