logo

.: XHTML, CSS & JavaScript Gallery :.

The Beauty of XHTML & CSS:


What is XHTML?     What is CSS?     What is JavaScript?     What is DHTML?

CSS Image Magnifier
CSS ©: Stu Nicholls - CSSplay

A CSS3 Enhanced Photo Gallery
CSS ©: Stu Nicholls - CSSplay




Hangman Game
A combination of DHTML, CSS & JavaScript

My Work In Progress Painting as an Image Map
CSS ©: Stu Nicholls - CSSplay




Cross Browser Font Embedding Part 4
A Johannes Vermeer Gallery

jQuery Auto / Manual Slideshow
©: Stu Nicholls - iStu.co.uk




jQuery Carousel Gallery with Bounce Effect
©: Stu Nicholls - iStu.co.uk

jQuery Mesdag Panorama
©: Open Studio Webdesign and Development




jQuery Stacked Gallery II
©: Stu Nicholls - iStu.co.uk

jQuery Stacked Gallery
©: Stu Nicholls - iStu.co.uk




Tabbed Pages Gallery
©: Stu Nicholls - CSSplay.co.uk

CSS Image Manipulation
©: Stu Nicholls - CSSplay.co.uk




“Expando” Images JavaScript
Courtesy and ©: Dynamic Drive

Featured Content Glider
Courtesy and ©: Dynamic Drive




jQuery - Show me some more . . .
Courtesy and ©: Stu Nicholls of CSS Play

Recipe for a Happy New Year
Font Embedding Part 3




Font Embedding Part 2
Courtesy: FontSquirrel.com

Drop Down Panel
Courtesy: Dynamic Drive




Expandable- and Collapsable Definition List
with JavaScript

Vertical Navigation Menu
Courtesy: Dynamic Drive




Horizontal Navigation Menu
Using an Unordered List

Horizontal Accordion Scripts
Courtesy: Dynamic Drive




CSS Inheritance
Courtesy and © Copyright Russ Weakley.

♣ XHTML Special Signs & Characters ♣
♣ ♣ ♣ ♣ ♣ ♣ ♣ ♣




“Drag & Drop” JavaScript
Courtesy and ©: Walter Zorn

Cynthia Says™
Understanding Accessibility




Simple Tooltip with Image

Drop Caps
Enhancing your Paragraphs




Tableless Layout
“Look Ma, no Tables”

Forms
A Simpe Form with Images




Font Embedding on the Web
Having Fun with Fonts.

Relative Positioning
Layers: Stacking Images




“A Perfect Table”
How to set a perfect table.

Four Curved Corners
Courtesy and ©: Stu Nicholls of CSS Play.




Rounded Borders without Images
Courtesy and ©: Stu Nicholls of CSS Play.

Simple CSS Photo Gallery
Courtesy and ©: Stu Nicholls of CSS Play.




Simple CSS Slideshow
Courtesy and ©: Stu Nicholls of CSS Play.

Validation Rollover Buttons
XHTML & CSS Coding included




Full size Image on Hover
XHTML & CSS Coding included

CSS i-Frame
XHTML & CSS Coding included




Simple XHTML & CSS Page
with 2 navbars and background image

Style Sheet for Print
CSS Coding included




More projects will be added when time permits!

top of the page

What is XHTML?

The Extensible Hypertext Markup Language, or XHTML, is a markup language that has the same depth of expression as HTML, but also conforms to XML syntax. While HTML prior to HTML5 was defined as an application of Standard Generalized Markup Language (SGML), a very flexible markup language, XHTML is an application of XML, a more restrictive subset of SGML. Because they need to be well-formed, true XHTML documents allow for automated processing to be performed using standard XML tools - unlike HTML, which requires a relatively complex, lenient, and generally custom parser. XHTML can be thought of as the intersection of HTML and XML in many respects, since it is a reformulation of HTML in XML. XHTML 1.0 became a World Wide Web Consortium (W3C) Recommendation on January 26, 2000. XHTML 1.1 became a W3C Recommendation on May 31, 2001.

XHTML 1.0.- December 1998 saw the publication of a W3C Working Draft entitled Reformulating HTML in XML. This introduced Voyager, the codename for a new markup language based on HTML 4 but adhering to the stricter syntax rules of XML. By February 1999 the specification had changed name to XHTML™ 1.0: The Extensible HyperText Markup Language, and in January 2000 it was officially adopted as a W3C Recommendation. There are three formal DTDs for XHTML 1.0, corresponding to the three different versions of HTML 4.01 and one formal DTD for XHTML 1.1:

What is CSS?

In computing, Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can be applied to any kind of XML document, including SVG and XUL. The CSS specifications are maintained by the World Wide Web Consortium (W3C).

CSS has various levels and profiles. Each level of CSS builds upon the last, typically adding new features and are typically denoted as CSS1, CSS2, and CSS3. Profiles are typically a subset of one or more levels of CSS built for a particular device or user interface. Currently there are profiles for mobile devices, printers, and television sets. Profiles should not be confused with media types which were added in CSS2. The use of CSS to position the content of a web page is sometimes referred to as CSS-P or CSS Positioning.

Advantages of using CSS include:
Presentation information for an entire website or collection of pages can be held in one CSS file, allowing sweeping changes to be propagated with quick changes to this one file. Different users can have different style sheets: for example a large text alternative for visually-impaired users, or a layout optimized for small displays for mobile phones. The document code is reduced in size and complexity, since it does not need to contain any presentational markup.

Syntax: CSS has a simple syntax, and uses a number of English keywords to specify the names of various style properties.

A style sheet consists of a list of rules. Each rule or rule-set consists of one or more selectors and a declaration block. A declaration-block consists of a list of semicolon-separated declarations in curly braces. Each declaration itself consists of a property, a colon (:), a value, then a semi-colon (;)

Example:
body {
background: #5D6B98 url(wd-images/wd-bg.gif) center center repeat fixed;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #020446;
font-size : 77%;
margin-top: 20px;
}

What is JavaScript?

JavaScript is an object-oriented scripting language used to enable programmatic access to objects within both the client application and other applications. It is primarily used in the form of client-side JavaScript, implemented as an integrated component of the web browser, allowing the development of enhanced user interfaces and dynamic websites. JavaScript was influenced by many languages and was designed to look like Java, but to be easier for non-programmers to work with.

What is DHTML?

Dynamic HTML or DHTML is an umbrella term for a collection of technologies used together to create interactive and animated web sites by using a combination of a static markup language (such as XHTML), a client-side scripting language (such as JavaScript), a presentation definition language (such as CSS), and the Document Object Model

DHTML allows scripting languages to change variables in a web page's definition language, which in turn affects the look and function of otherwise "static" HTML page content, after the page has been fully loaded and during the viewing process. Thus the dynamic characteristic of DHTML is the way it functions while a page is viewed, not in its ability to generate a unique page with each page load.

By contrast, a dynamic web page is a broader concept - any web page generated differently for each user, load occurrence, or specific variable values. This includes pages created by client-side scripting, and ones created by server-side scripting (such as PHP, Perl, JSP or ASP.NET) where the web server generates content before sending it to the client.

Source: WikipediA.org


top of the page

Last updated:

w3c xhtml 1.1

w3c css