Advanced Javascript Tutorials

From JavaScript Kit
Latest Tutorials
  • JavaScript and memory leaks -If you're not careful, your JavaScript code may leak memory and sometimes even bring the visitor's browser to its knees. This tutorial looks at different leak patterns in JavaScript and how to fix them.
  • JavaScript Closures 101- they're not magic - Morris Johns explains JavaScript closures, a powerful yet often bewildering concept, in a gentle, step by step fashion.
  • Conditional Compilation of JScript/ JavaScript in IE - IE supports a little known feature called conditional compilation that selectively compiles any block of JScript or JavaScript depending on your script logic. Think of it as the absolute form of object detection.
  • External JavaScript and PHP - External JavaScript can reference not just .js files, but PHP scripts as well. See how this is done, and the wonderful possibilities linking PHP to JavaScript bring.
  • Changing Select element content on the fly - This tutorial explains how to change a select element's content using JavaScript, from adding new options to modifying and deleting them. It also shows how to create a 2 level interdependent select list.
  • Determining cookie support in client's browser - If your script relies on JavaScript cookies to store and persist information, it's a good idea to always first make sure the user's browser has cookies enabled. This tutorial shows you how to perform this detection.
    Sorting and filtering a Tabular Data Control - A Tabular Data Control can easily be sorted and filtered before its data is shown on the page. The following two tutorials examine this:- Sorting a Tabular Data Control- Filtering a Tabular Data Control
  • Introduction to Tabular Data Control (IE) - Tabular Data Control is a Microsoft ActiveX control that comes pre-installed with all versions of IE4+. This useful control allows you to access, display, and sort ASCII information stored on the server end, such as a .txt file. In other words, it creates a simple client side "database." Learn about TDC and how to use JavaScript to manipulate it in this tutorial.
  • Introductory Guide to Regular Expressions - Always wanted to learn about Regular Expressions in JavaScript? With this comprehensive yet gentle tutorial on the subject, you'll be on your way to slashing and validating string input using Regular Expressions in no time!
  • Programmer's Guide to Regular Expressions - Concise, to-the-point tutorial on Regular Expressions with sections on more advanced aspects of the feature.
  • JavaScript and Object Oriented Programming (OOP) - JavaScript may not be known for its object oriented properties, but it does support most of the features required to be considered an Object Oriented language. See how to write OOP code in JavaScript.
  • Formatting numbers for decimals and significant digits - Need to display a number in currency format? How about a number that is x digits in length? See how to easily, using two new methods of JavaScript 1.5+.

Click to Read More

Labels:

Introduction to Dynamic HTML

By Aaron Weiss
Dynamic HTML builds upon existing HTML standards to expand the possibilities of Web page design, presentation, and interaction. Ultimately, mastering DHTML will allow you to build Web-based applications, rather than mere portraits of data. Because DHTML is essentially an "added value" technology, you should be rather familiar with basic Web page design using traditional HTML specifications. Experience with JavaScript programming is also necessary to employ the potential of DHTML. Consequently, portions of this introduction to DHTML will assume some HTML and JavaScript familiarity.
What and Why
The Web is an ever evolving environment, and Web pages themselves are steadily blooming from static displays of data to interactive applications. "Dynamic HTML" is somewhat of an umbrella term encompassing several ways in which Web developers can breathe life into pages which have traditionally been still portraits of information.
The basic notion behind Dynamic HTML is quite simple: allow any element of a page to be changeable at any time. Sounds like a dream, but as with any simple plan, "God is in the details," as they say. In the olden days, you could only change content on a page via CGI. This required a server to perform the changes to the page and re-serve the entire page, modifications and all, back to the client. While workable, this process was quite slow, as it placed a burden on both network traffic and server processing time. With long delays between a user's action and an on-screen response, building effective Web-based applications was quite constricting.
With DHTML, the magic occurs entirely on the client-side. This means that page modifications should appear immediately following a trigger, such as a user selection. And, remember, the DHTML dream is that you can modify any aspect of the currently loaded page -- text styles, swapped images, context-sensitive forms and tables, and even the on-screen data itself.
It's worth noting here, then, that "Dynamic HTML," isn't really about HTML, the markup language. By and large, DHTML describes the abstract concept of breaking up a page into manipulable elements, and exposing those elements to a scripting language which can perform the manipulations. The degree, or fineness, to which these elements are defined and actionable is a function of DHTML's maturity. And since it has only been around for a year or so, DHTML is not fully mature.
Like the Web itself, Dynamic HTML is ever evolving. At some point, DHTML may self actualize and reach its full potential of "change anything anywhere anytime." It may even change its name -- product developers possess a whimsy for this sort of thing -- but the concepts defined above for modifying elements on a page will necessarily continue to mature.
Labels:

Using HTML 3.2, Java 1.1, and CGI

By Eric Ladd and Jim O'Donnell
This book was designed and written from the ground up with two important purposes:
  • First, Platinum Edition Using HTML 3.2, Java 1.1, and CGI makes it easy for you to find the most effective means to accomplish any task that needs to be done or present most any kind of information that can be served on the Web.
  • Second, this book covers the major Web technologies-not only HTML, Java, and CGI, but also VRML, Web browser scripting languages such as JavaScript and VB Script, and the full range of Microsoft's ActiveX technologies-in a depth and breadth that you won't find anywhere else. It has been expanded well beyond the best-selling Special Edition Using HTML, Second Edition, including almost 500 additional pages of in-depth technical detail, tips, techniques, and troubleshooting solutions. It also includes two CD-ROMs of Web software and HTML versions of some of Que's other related books.

With these goals in mind, how do you use this book?

If you are familiar with HTML and with setting up Web pages and Web sites, you may be able to just skim through the first couple of chapters to see what some of the issues in page and site design are and glance through the basic HTML elements discussed in the first two or three parts. Even if you are familiar with HTML, there may be some information in them that will be new to you. You can then read the advanced sections on HTML, as well as the sections on other Web technologies such as JavaScript and Java, CGI, VRML, and ActiveX technologies to determine which of those elements you want to include in your Web pages.

Platinum Edition Using HTML 3.2, Java 1.1, and CGI was written with the experienced HTML programmer in mind. Your experience may be limited to a simple Web home page you threw together, or you may be designing and programming Web sites. Either way, you will find comprehensive coverage on HTML and other Web technologies. Throughout this book, there are techniques for creating quality, effective Web pages and Web sites.

Click to Read More

Labels:

Encyclopedia of HTML elements

by Emil Stenström
HTML is a much richer language than what it’s used for. There are 77 elements and each one has a certain purpose. It is possible to find that reason by reading the specification, but who does that? I wrote this list as a way to tell you what I think each of the HTML tags should be used for, common problems you might encounter, and general advise about each one.

I’ve included all the elements from HTML 4.01 Strict. It’s a long one, but I’m sure you have more “tips and tricks” to add to it. Leave a comment and I’ll add yours to the list too. Let’s start off with a list of all the elements:

A, ABBR, ACRONYM, ADDRESS, AREA, B, BASE, BDO, BIG, BLOCKQUOTE, BODY, BR, BUTTON, CAPTION, CITE, CODE, COL, COLGROUP, DD, DEL, DFN, DIV, DL, DT, EM, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HEAD, HR, HTML, I , IMG, INPUT, INS, KBD, LABEL, LEGEND, LI, LINK, MAP, META, NOSCRIPT, OBJECT, OL, OPTGROUP, OPTION, P, PARAM, PRE, Q, SAMP, SCRIPT, SELECT, SMALL, SPAN, STRONG, STYLE, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TITLE, TR, TT, UL, VAR

For people that view this site in a visual browser I added colored bars on all the elements. They represent if an element is recommended to use or not. Green bar means “Use this!”, Yellow means “Consider if you really need it”, and Red means “Don’t use this unless you have a really good reason”.

Click to Read More

Labels:

CGI Programming Unleashed

By Eugene Eric Kim
The first things you should know about Common Gateway Interface (CGI) are what it is and why it is used. CGI is a standard whose specification defines a way for Web servers to communicate with external programs, and vice versa, so that the external program can generate HTML, images, or whatever, and have the server treat it the same as HTML, images, and so on not generated by an external program. The reason CGI is used is so you can generate dynamic content with the same ease that you generate static content. CGI is used because it is a very well defined and supported standard, and without CGI, dynamic content would have been impossible without proprietary server methods (now, there are alternatives to CGI that are becoming standard).
There are many useful applications of CGI programs. But, as with every other technology, CGI programs have their limits. Also, as with many other technologies, it is not always the best way to do things. For this reason, this chapter will go over what CGI programs can and cannot do, and what CGI based apps are good and bad for.
For comparison's sake, I use Java as the applet language.
What CGI Is Useful For
As stated earlier, CGI is useful for many different tasks. There are different reasons why it is the best method, or the only method, for a variety of tasks. This chapter examines the reasons, separating the tasks into three different levels. First, we cover simple tasks, which we will define as tasks that can be completed in a couple of hours and/or require almost no knowledge of how to program CGI apps/the CGI spec in general. This task level includes counters, among other things. Next, we cover intermediate tasks, which we will define as tasks that can be completed in a day or two and/or tasks that require a pretty good knowledge of how to program CGI apps/the CGI spec in general. This task level includes built from scratch imagemapping programs, apps that generate entire HTML pages, and apps that do animation, among other things. Finally, we cover advanced tasks, which we will define as tasks that take more than a day or two and/or require an expertise in CGI app programming/the CGI spec in general. This task level includes apps that include a home grown database engine, among other things.
Labels:

Special Edition Using CGI

By Jeffry Dwight and Michael Erwin
The Common Gateway Interface, or CGI, is one of the most useful tools in a Webmaster's kit. Whether you're the lone maintainer of a single home page on someone else's machine or the Webmaster of a huge domain, you'll find that CGI is essential for anything beyond presenting static text and graphics.
CGI is the magic behind Web-based interactive games, page counters, order-entry systems, online shopping carts, SQL database interfaces, animations, and clickable images. In fact, you'll find that CGI, in one of its many forms, is what brings the World Wide Web to life.
We assume throughout the book that you have at least an intermediate understanding of programming in one or more languages. This book won't teach you how to program, but it will teach you how to use your existing programming skills to make CGI scripts work.
We didn't shy away from complicated topics, but we made sure to cover the fundamentals, too. In all, if you're comfortable with C, Perl, Visual Basic, or AppleScript, you should be able to glean a great deal of information from these pages.
We explain the basics of CGI programming fairly well, so even if you've never thought of writing CGI before, you'll do fine. If you're already an accomplished CGI programmer, you'll find hundreds of tips and tricks throughout the book to expand your repertoire.
Where possible, we used pseudocode or a textual description of the process under discussion. We did this for a couple of reasons: First, this book is intended to be platform-independent, meaning that you should be able to profit from it no matter what server you run and no matter what programming environment you use. Second, a textual description forces the reader (and the author) to focus on the process rather than the syntax. The goal is for you to understand how the magic works, not just what to type.
You'll also find a lot of actual code, both in the pages of the book and on the accompanying CD-ROM. We assume that programmers, once they understand the concepts, will want to go forth and create programs. What better way than to be armed with working samples?
Labels:

XForms Essentials

by Micah Dubinko
You should read this book if you want to:
  • Create XForms files in a text or XML editor
  • Convert existing forms (electronic or paper) to XForms
  • Collect XML data from users in a user-friendly way
  • Reduce the amount of JavaScript needed within browser interfaces
  • Increase the security and reliability of your current information system by combining client-side and server-side checks into a common code base
  • Understand how to create interactive web sites using the latest standard technology

This book is organized into three divisions. The first gives a general introduction to web forms, including information on the history and basic construction of forms. The second section serves as a kind of reference manual to the XForms specification. The third section offers additional hints, guidelines, and techniques for working with XForms.

If you simply want to fill out a form, you need only acquire the appropriate software or browser plug-in. There's no need for you to know what's going on behind the scenes unless you wish to satisfy your commendable intellectual curiosity.

If you wish to create forms with a designer program that has XForms export capability, just read that program's documentation to learn how to use that program feature. XForms goes to great lengths to make the fill-out experience intuitive; reading instructions is not required.

Click to Read More

Labels:

JavaScript Advanced Tutorials

Latest Tutorials
  • JavaScript and memory leaks - If you're not careful, your JavaScript code may leak memory and sometimes even bring the visitor's browser to its knees. This tutorial looks at different leak patterns in JavaScript and how to fix them.
  • JavaScript Closures 101- they're not magic - Morris Johns explains JavaScript closures, a powerful yet often bewildering concept, in a gentle, step by step fashion.
  • Conditional Compilation of JScript/ JavaScript in IE - IE supports a little known feature called conditional compilation that selectively compiles any block of JScript or JavaScript depending on your script logic. Think of it as the absolute form of object detection.
  • External JavaScript and PHP - External JavaScript can reference not just .js files, but PHP scripts as well. See how this is done, and the wonderful possibilities linking PHP to JavaScript bring.
  • Changing Select element content on the fly - This tutorial explains how to change a select element's content using JavaScript, from adding new options to modifying and deleting them. It also shows how to create a 2 level interdependent select list.
  • Determining cookie support in client's browser - If your script relies on JavaScript cookies to store and persist information, it's a good idea to always first make sure the user's browser has cookies enabled. This tutorial shows you how to perform this detection.
    Sorting and filtering a Tabular Data ControlA Tabular Data Control can easily be sorted and filtered before its data is shown on the page. The following two tutorials examine this:- (1) Sorting a Tabular Data Control (2) Filtering a Tabular Data Control
  • Introduction to Tabular Data Control (IE) - Tabular Data Control is a Microsoft ActiveX control that comes pre-installed with all versions of IE4+. This useful control allows you to access, display, and sort ASCII information stored on the server end, such as a .txt file. In other words, it creates a simple client side "database." Learn about TDC and how to use JavaScript to manipulate it in this tutorial.
  • Introductory Guide to Regular Expressions - Always wanted to learn about Regular Expressions in JavaScript? With this comprehensive yet gentle tutorial on the subject, you'll be on your way to slashing and validating string input using Regular Expressions in no time!
  • Programmer's Guide to Regular Expressions - Concise, to-the-point tutorial on Regular Expressions with sections on more advanced aspects of the feature.
  • JavaScript and Object Oriented Programming (OOP) - JavaScript may not be known for its object oriented properties, but it does support most of the features required to be considered an Object Oriented language. See how to write OOP code in JavaScript.
  • Formatting numbers for decimals and significant digits - Need to display a number in currency format? How about a number that is x digits in length? See how to easily, using two new methods of JavaScript 1.5+.

Click to Read More

Labels:

JavaScript Authoring Info

By John Russell
JavaScript (aka ECMAScript) is a relatively easy way to make your website visually attractive to clients and other viewers by adding interactivity and dynamics to HTML pages. This page explains why one would use JavaScript in their HTML website design. JavaScript can also be used as a basis for writing utility programs that are platform independent. Programming concepts learned in JavaScript can be rolled over into Java or any modern object oriented language. This page also has links to JavaScript code repositories and references for those who prefer not to reinvent wheels. And finally for those who do prefer to roll their own there are my programming notes, some introductory tutorials, small projects, larger projects and form projects pages.
Why Use JavaScript
  • Why should a webpage author use JavaScript in addition to HTML?
  • Javascript adds user interactivity.
  • Javascript enhances visual displays.
  • Javascript allows client-side user form validation.
  • Javascript provides more seamless integration with user plug-ins.
  • Javascript allows access to some system information that HTML does not.

Language Design Issues

  • Because JavaScript uses a high-end approach to security (leaving lapses in the domain of the browser) there are some applications that it is not appropriate for:
  • JavaScript does not have user file access. You must use cut/paste techniques to input or save data.
  • JavaScript does not have a print method. You must create an HTML page and use the browser menu to print.
  • JavaScript cannot run programs on the host machine unless it is through browser plug-ins or associations allowed within the browser.
  • JavaScript has no access to the user environment other than what the browser provides. Hence no access to the Windows registry is possible.
  • JavaScript is definitely not a system programming language! Use Java or C++ for this type of activity.

Click to Read More

Labels:

Core JavaScript Reference

This book is a reference manual for the core JavaScript language for version 1.5. JavaScript is Netscape's cross-platform, object-based scripting language. Core JavaScript can be extended for a variety of purposes by supplementing it with additional objects.

JavaScript version 1.5 provides the following features and enhancements:

  • Runtime errors. Runtime errors are now reported as exceptions.
  • Number formatting enhancements. Number formatting has been enhanced to include Number.prototype.toExponential, Number.protoytpe.toFixed and Number.prototype.toPrecision methods. See page 127, page 128, and page 129.
  • Regular expression enhancements:
    (1) Greedy quantifiers - +, *, ? and {} - can now be followed by a ? to force them to be non-greedy. See the entry for ? on page 148.
    (2) Non-capturing parentheses, (?:x) can be used instead of capturing parentheses(x). When non-capturing parentheses are used, matched subexpressions are not available as back-references. See the entry for (?:x) on page 148.
    (3) Positive and negative lookahead assertions are supported. Both assert a match depending on what follows the string being matched. See the entries for (?=) and (?!) on page 148.
    (4) The m flag has been added to specify that the regular expression should match over multiple lines. See page 146.
  • Conditional function declarations. Functions can now be declared inside an if clause. See page 221.
  • Function expressions. Functions can now be declared inside an expression. See page 254.
  • Multiple catch clauses. Multiple catch clauses in a try...catch statement are supported. See page 231.
  • Constants. Readonly, named constants are supported. This feature is available only in the C implementation of JavaScript. See page 215.
  • Getters and Setters. JavaScript writers can now add getters and setters to their objects. This feature is available only in the C implementation of JavaScript. See Defining Getters and Setters in Chapter 7 of the Core JavaScript Guide for information about this feature.

Click to Read More

Labels:

Teach Yourself JavaScript in a Week

By Arman Danesh
In this book we are going to take a look at JavaScript—the internal scripting language Netscape has developed and included in the Navigator browser.
JavaScript is an evolving tool, like so many tools associated with the Internet and the World Wide Web. Still, the future of JavaScript is sufficiently clear that many people have already developed sophisticated Web-based applications using the language.
We start by taking a broad look at Netscape Navigator 2.0, the current version of the popular Web browser, which some estimates say commands more than 80 percent of the Web browser market. Following this, we take an introductory look at JavaScript and its relationship with Java and its place in the Netscape suite of Web development tools.
Once this is done, we will be ready to look at the nuts and bolts of the JavaScript language and learn how to apply them to real-world scenarios on the Web. JavaScript can be used to add a wide range of interactivity and functionality to Web pages including the following:
  • Dynamic forms that include built-in error checking
  • Spread sheets and calculators
  • User interaction in the form of warning messages and confirmation messages
  • Dynamic changes to text and background colors
  • The ability to analyze URLs and access URLs in a user's history list
  • The capability to open, name, clear, and close new windows and direct output to specific frames

These types of functions already appear in numerous Web sites on the World Wide Web, and it is expected that the number will grow rapidly in early 1996 now that Navigator 2.0 has moved from being a beta product to commercial release software.

Throughout the book, you will have the opportunity to develop several small scripts that you can immediately use in your own Web pages.

Finally, we close with a review of the future of JavaScript and where it seems to be heading. We will consider Netscape's plans as well as announcements from other companies to include JavaScript in their products.

Click to Read More

Labels:

JavaScript The Definitive Guide - Fourth Edition

by David Flanagan

This edition of JavaScript: The Definitive Guide has been thoroughly updated in light of the changes I just described. Major new features include complete coverage of JavaScript 1.5 and the third edition of the ECMA-262 standard on which it is based, and complete coverage of the Level 2 DOM standard.
Throughout the book, the focus has shifted from documenting particular JavaScript and browser implementations ( JavaScript 1.2, Netscape 4, Internet Explorer 5, etc.) to documenting the standards upon which those implementations are (or ought to be) based. Because of the proliferation of implementations, it is no longer practical for any one book to attempt to document -- or for any one developer to attempt to understand -- every feature, proprietary extension, quirk, and bug of every implementation. Focusing on the specifications instead of the implementations makes this book easier to use and, if you take the same approach, will make your JavaScript code more portable and maintainable. You'll particularly notice the increased emphasis on standards in the new material on core JavaScript and the DOM.
Another major change in this edition is that the reference section has been split into three distinct parts. First, the core JavaScript material has been separated from the client-side JavaScript material (Part IV) and placed in a section of its own (Part III). This division is for the convenience of JavaScript programmers who are working with the language in an environment other than a web browser and who are not interested in client-side JavaScript.
Second, the new material documenting the W3C DOM has been placed in a section of its own (Part V), separate from the existing client-side JavaScript material. The DOM standard defines an API that is quite distinct from the "legacy" API of traditional client-side JavaScript. Depending on the browser platforms they are targeting, developers typically use one API or the other and usually do not need to switch back and forth. Keeping these two APIs distinct also preserves the organization of the existing client-side reference material, which is convenient for readers of the third edition who upgrade to this edition.
In order to accommodate all the new material without making the book much, much larger, I've gotten rid of reference pages for the trivial properties of objects. These properties are already described once on the reference page for the object, and putting another description in a reference page of its own was redundant and wasteful. Properties that require substantial description, as well as all methods, still have reference pages of their own. Furthermore, the design wizards at O'Reilly have created a new interior design for the book that remains easy and pleasant to read but takes up less space.
Click to Read More
Labels:

ppk on JavaScript

By Peter-Paul Koch
The purpose of this book is to offer easy access to all the basic JavaScript knowledge I've gathered in the eight years I've been a professional Web developer.
Since this book reflects my knowledge, it also reflects the limitations of that knowledge. I am a Web developer, not an application developer—which means I talk about browser incompatibilities, accessibility, low-level syntax, and cooperation with the HTML structural layer, instead of modules, design principles, and abstraction layers.
During the eight years that I've earned a living by making Web sites, I have used some JavaScript features extensively but largely ignored others. I always took the tools I needed to do the job I was paid to do, and it turns out that the JavaScript toolbox contains many features I don't need in my day-to-day use.
Obviously, I cannot teach you to use a tool that I myself don't understand. Therefore this book only treats those language features I work with. Object-oriented JavaScript, for instance, is conspicuously absent because I've never seen the need to use it.
Besides, a book has a fixed length, and therefore I had to make choices—occasionally very difficult ones. In the end I selected those JavaScript features that I feel you must understand in order to use the language at competent intermediate to advanced level. I left out other features that aren't quite so essential—in my opinion. Some of my readers will disagree with my selections, but that can't be helped.
Labels:

CGI Programming on the World Wide Web

By Shishir Gundavaram
The Common Gateway Interface (CGI) emerged as the first way to present dynamically generated information on the World Wide Web. CGI allows the computer to generate Web pages instantly at the user's request rather than being written by someone in advance. And at the time of this writing, it remains the only stable and well-understood method for creating such pages. Java presents problems that have not yet been solved. Other products are currently just in the announcement stage.
CGI is fun. You can get a kick out of writing scripts that perform tricks for you, and the users enjoy the spice the scripts add to your Web pages. But CGI has a serious side too: It lets the Internet offer the kind of interactive, user-driven applications that modern computer users have come to expect. CGI opens up an entire class of modern applications to the Web.
Today's computer users expect custom answers to particular questions. Gone are the days when people were satisfied by the computing center staff passing out a single, general report to all users. Instead, each salesperson, manager, and engineer wants to enter specific queries and get up-to-date responses. And if a single computer can do that, why not the Web?
This is the promise of CGI. You can display sales figures for particular products month by month, as requested by your staff, using beautiful pie charts or plots. You can let customers enter keywords in order to find information on your products. You can also offer day-to-day conveniences, like collecting comments from users, offering them searches through your archives, and letting them sign your guestbook.
Labels:

Embedding Perl in HTML with Mason

By Dave Rolsky and Ken Williams
Preface
Mason is a tool for embedding the Perl programming language into text, in order to create text dynamically, most often in HTML. But Mason does not simply stop at HTML. It can just as easily create XML, WML, POD, configuration files, or the complete works of Shakespeare.
Mason was originally written by Jonathan Swartz, with the help of the rest of the CMP development team at CMP Media in 1996, and in its earliest incarnations it was known as Scribe.
Mason was first made publicly available as Version 0.1 in August of 1998. Since that time, Jonathan Swartz has invited your humble authors to participate in the further development of Mason. Mason has been expanded, and rewritten and is much changed from those early days. This book covers Version 1.12 of Mason.
Intended Audience
This book assumes that the reader is familiar with Perl at an intermediate level and that common Perl idioms don't stop you in your tracks. While you need not have written your own modules previously, familiarity with Perl's object-oriented syntax will be helpful.
Since Mason is most often used in the generation of web sites, this book frequently presents its example in terms of generating HTML pages. You definitely do not need to be an HTML expert to read this book, but a passing familiarity with HTML will be helpful in understanding what the output is intended to look like.
As previously mentioned, Mason is well-suited for the generation of any sort of dynamic text, including markup languages such as XML, as well as configuration files, email bodies (think mail merge, perhaps), or even code.
Finally, experience with mod_perl and Apache will be helpful for Chapter 7 and Chapter 9, which discuss integrating Mason with mod_perl and CGI, respectively, though the rest of the book should be easily comprehensible regardless of your familiarity with those particular topics.
Labels:

Special Edition Using JAVASCRIPT

By Mark C. Reynolds
Five years ago the Internet was mostly the province of academics and programmers, and the World Wide Web was an obscure idea in the minds of a few researchers. Today both are experiencing explosive growth and unparalleled interest. Web pages are being created at an astonishing rate. The fundamental challenge of Web page development is that while it is easy to create a Web page, it is more difficult to create an attractive and exciting one.
HTML, the markup language that describes the appearance of a page, is easy to learn, and requires no background in programming. HTML has undergone several revisions in order to meet the expanding needs of Web page authors. However, there are limits to what can be achieved inside HTML. The Java programming language was introduced to dramatically extend the Web developer's set of tools, but is still more complex than HTML. Java is very easy to learn; however, like most programming languages, it isn't easy to master. JavaScript bridges this gap.
JavaScript offers the Web page author a new level of sophistication without requiring him to become a programmer. JavaScript brings dynamic and powerful capabilities to Web pages, yet JavaScript is no more difficult to learn than HTML. JavaScript can be used to solve common problems, such as validating forms input, and can also be used to create dramatic and visually appealing content, which would be impossible with HTML. The goal of this book is to completely explore JavaScript, from the mundane to the extraordinary. It is designed as an introduction, a reference, and a continuous source of ideas, so that you may continually improve the Web pages that you create.
Labels:

JavaScript Manual of Style

By Marc Johnson
This is a book about writing exciting Web pages with JavaScript. Before JavaScript or its ancestor, LiveScript, Web pages were written in HTML. The pages could be very sophisticated in their layout, but they just sat there. JavaScript can make your Web pages come alive. Your Web pages can now be dynamic, changing before the user's eyes. JavaScript can make your Web pages both more interesting and more fun.
JavaScript isn't very difficult to learn. I myself picked up the basics in a matter of hours. You can, too.
You don't need to read this book cover to cover, and you don't have to read the chapters in any particular order. Skip around, read what seems interesting, and write some code. It's the best way to learn. You will need a copy of Netscape Navigator, preferably version 2.01 or later, but that's all. I use WebMania! to write some of my code, because it takes care of a lot of the details that I might forget, but all you really need is a simple ASCII text editor-vi, emacs, Notepad, whatever.
This book is divided into three parts. The first part includes three chapters. Chapter 1is a quick introduction to JavaScript that describes what it is and where it came from. Chapter 2explains what JavaScript is good for, outlining what you can do with it. Chapter 3 lets me get up on my soapbox and do a little preaching about what makes a good Web page, what makes a bad Web page, and what you can do to keep your pages on the good list.
The second section consists of six chapters, all of which contain a complete JavaScript Web page. Each chapter introduces a problem, demonstrates how you might solve it without JavaScript, and then shows how you can craft a much better solution with JavaScript. These chapters all conclude with some thoughts on how you can enhance the solution and how you can adapt the techniques to creating your own Web pages with JavaScript. In every chapter, the JavaScript code is discussed in depth, function by function. No mysteries; there's no one behind the curtain. If you don't understand something about the code, write me at marcj@nando.net. I'll be glad to answer your questions!
Finally, the third section contains six appendices, chock full of useful reference material: the character set, reserved words, a review of HTML, the JavaScript operators, JavaScript's built-in objects and functions, and online resources. Again, if there's something I missed, write me. I want to help.
Labels:

Teach yourself WEB Publishing with HTML in 14 days

By Laura Lemay
What This Book Contains
This book is intended to be read and absorbed over the course of two weeks (although it may take you more or less time depending on how much you can absorb in a day). On each day you'll read two chapters, which describe one or two concepts related to Web presentation design.
Day 1 Getting Started: The World Wide Web and You
You get a general overview of the World Wide Web and what you can do with it, and then come up with a plan for your Web presentation.
Day 2 Creating Simple Web Pages
You learn about the HTML language and how to write simple documents and link them together using hypertext links.
Day 3 Doing More with HTML
You do more text formatting with HTML, including working with text alignment, rule lines, and character formatting. You'll also get an overview of the various HTML editors available to help you write HTML.
Day 4 Images and Backgrounds
Today covers everything you ever wanted to know about images, backgrounds, and using color on the Web.
Day 5 Multimedia on the Web: Animation, Sound, Video, and Other Files
You learn all about adding multimedia capabilities to your Web presentations: using images, sounds, and video to enhance your material.
Day 6 Designing Effective Web Pages
You get some hints for creating a well-constructed Web presentation, and you explore some examples of Web presentations to get an idea of what sort of work you can do.
Day 7 Advanced HTML Features: Tables and Frames
You learn about some of the advanced features of HTML available in Netscape and other browsers: tables and frames.
Day 8 Going Live on the Web
Starting Week 2, you learn how to put your presentation up on the Web, including how to set up a Web server and advertise the work you've done.
Day 9 Creating Interactive Pages
Today covers adding interactive forms and image maps to your Web page, including the new client-side image map tags.
Day 10 All About CGI Programming
Today introduces you to CGI programming; in the first half you learn all about writing CGI scripts and programs, and in the second half you work through a number of examples.
Day 11 Interactive Examples
Today contains nothing but lots of examples-both informational and interactive-for you to look at and explore.
Day 12 JavaScript
You explore JavaScript, a new language available in Netscape to add new features to and interactivity to your Web pages.
Day 13 Java, Plug-ins, and Embedded Objects
Today covers more Netscape enhancements: the use of Java applets inside Web pages, and including other embedded objects through the use of plug-ins.
Day 14 Doing More with Your Server
You learn lots of new tricks for using your server, including using server-includes, security, and authentication.
Bonus Day Creating Professional Sites
Labels:

Teach Yourself HTML 3.2 in 24 Hours

By Dick Oliver
In the next 24 hours, approximately 100,000 new Web pages will be posted in publiclyaccessible areas of the Internet. At least as many pages will be placed on privateintranets to be seen by businesspeople connected to local networks. Every one ofthose pages--like over 100 million pages already online--will use the Hypertext MarkupLanguage, or HTML.
If you read on, your Web pages will be among those that appear on the Internetin the next 24 hours. And this will be the day that you gained one of the most valuableskills in the world today: mastery of HTML.
Can you really learn to create top-quality Web pages yourself, without any specializedsoftware, in less time than it takes to schedule and wait for an appointment witha highly-paid HTML wizard? Can this thin, easy-to-read book really enable you toteach yourself state-of-the-art Web page publishing?
Yes. In fact, within two hours of starting this book, someone with no previousHTML experience at all can have a Web page ready to place on the Internet's WorldWide Web.
How can you learn the language of the Web so fast? By example. This book breaksHTML down into simple steps that anyone can learn quickly, and shows you exactlyhow to take each step. Every HTML example is pictured right above the Web page itwill produce. You see it done, you read a brief plain-English explanation of howit works, and you immediately do the same thing with your own page. Ten minutes later,you're on to the next step.
Labels:

CGI Manual of Style Online

by Robert McDaniel

Welcome to the HTML version of the book CGI Manual of Style, by Robert McDaniel. To get started right away, use the link below to the Table of Contents. From this page you can link to any chapter as well as to the Quick Reference section. We've also included some script files from the book. Download CGIMOS.ZIP, this zip file contains a dozen or so scripts. Please use a utility that allows long file names when decompressing this file.

The Common Gateway Interface, or CGI, is a standard for communication between Web documents and CGI scripts you write. CGI scripting, or programming, is the act of creating a program that adheres to this standard of communication. A CGI script is simply a program that in some way communicates with your Web documents. Web documents are any kind of file used on the Web. They can be HTML documents, text files, image files, or any number of other file formats. The existence of this gateway between programs you write and your Web documents allows you to create much more dynamic and interactive Web pages than you could with HTML alone.

Labels:

CGI Developer's Guide

by Eugene Eric Kim
I wrote this book for the enthusiastic and the curious. You do not have to be an expert computer scientist or programmer to learn and master CGI programming. However, you must know at least one programming language and should have some basic programming experience. Your ability as a CGI programmer reduces to your ability as a programmer in general. After you learn the basic concepts and begin programming, you will rapidly gain the necessary knowledge and instincts to write effective applications.
Although the concepts in this book apply to any programming language, the examples are limited to C and Perl. C and Perl are two very popular CGI programming languages with different things to offer. It is useful to look at both C and Perl examples for similar tasks in order to understand some of the subtle distinctions between the different languages.
Most of the examples use the cgihtml library for C programs and cgi-lib.pl for Perl. My Perl examples are written in Perl 4. I chose not to use Perl 5 because proper Perl 5 programming requires some understanding of object-oriented programming and other advanced features. Instead of distracting you with the nuances of Perl 5, I decided to use Perl 4 examples (which are compatible with the Perl 5 interpreter). If you know and are familiar with Perl 5, I highly recommend you look at Lincoln Stein's CGI.pm module, an excellent programming library for CGI applications. This and other libraries are included on the CD-ROM that accompanies this book.
Although knowing at least one programming language (preferably either C or Perl) is required, sometimes books like this are useful tools for learning how to program in a language. You should not use this book as a beginner's guide to C or Perl, but I hope your programming skills in either language are strengthened by going through the examples and applying some of the concepts on your own.
Finally, this book is centered largely around UNIX, although again, most of the concepts and code are portable to all platforms. I have tried to keep as many examples as possible fairly general so that they apply to all platforms. Some of the more advanced topics and examples required a focus on at least one platform. In these cases, my discussion is based on the UNIX environment. On other, rarer occasions, I also include more advanced information on both the Windows and Macintosh environments. I include some references to more information regarding these other platforms in the reference section at the end of this book.
Labels:

Special Edition Using HTML 4

Macmillan Computer Publishing
What Is HTML?
You can't build a monument without bricks, and you can't make bricks without straw--everyone who has seen the film The Ten Commandments knows that. Likewise, if you plan to establish your own monumental presence on the World Wide Web, you have to start with the straw--HTML.
The World Wide Web is built of Web pages, and those pages are themselves created with HyperText Markup Language, or HTML. Though many folks talk about HTML Programming with a capital P (particularly recruiters), HTML is really not a programming language at all. HTML is exactly what it claims to be: a markup language. You use HTML to mark up a text document, just as you would if you were an editor using a red pencil. The marks you use indicate which format (or style) should be used when displaying the marked text.
If you have ever used an old word processing program (remember WordStar?), you already know how a markup language works. In these old programs, if you wanted text to appear italicized, you surrounded it with control characters. For example, you might surround a phrase with control characters that make it appear as bold text:
Labels:

Special Edition USING HTML Second Edition

by Tom Savola, Mark Brown, John Jung, Bill Brandon, Robert Meegan, Kenneth Murphy,
Jim O'Donnell, and Stephen R. Pietrowicz

HTML: The Bricks and Mortar of the Web

Now that you know where the Web came from, it's time to jump into the whole melange feet first-but with your eyes open. HTML (HyperText Markup Language) is what you use to create Web pages, and it's the topic of this book.
HTML is relatively simple in both concept and execution. In fact, if you have ever used a very old word processor, you are already familiar with the concept of a markup language.
In the "good old days" of word processing, if you wanted text to appear in, say, italics, you might surround it with control characters like this:
/Ithis is in italics/I
The "/I" at the beginning would indicate to the word processor that, when printed, the text following should be italicized. The "/I" would turn off italics so that any text afterward would be printed in a normal font. You literally marked up the text for printing just as you would if you were making editing marks on a printed copy with an editor's red pencil.
HTML works in much the same way. If, for example, you want text to appear on a Web page in italics, you mark it like this:
Labels:

HTML By Example

by Todd Stauffer
What's the by Example Advantage?
There are two major reasons why learning HTML is easier when it's by Example. First, HTML isn't a typical programming language-in fact, it isn't a programming language at all. It's a "mark-up" language that builds on very basic concepts that are all somewhat related to one another. Learning by example, then, allows you to start with the initial concepts and learn to build to make complex Web pages come to life easily.
Second, with the included CD-ROM, HTML by Example gives you a major headstart in Web creation. Why? Because if you see an example that's similar to what you want to create, just copy the example from the CD and alter it to suit your needs. It's possible to have a Web page created within minutes of finding a suitable example! Just copy and paste.
Who Should Use This Book?
Before you get to the point of actually creating HTML documents (Web pages), you'll go through a little refresher course on the Internet and the World Wide Web. So, even if you're not terribly familiar with the Web, I'll try to get you there before throwing any strange codes or address at you.
Essentially, all you need to use this book is a rudimentary grasp of the Internet and Web, and a desire to create your own presence. If you've just "heard" of the Web, or even if you've been surfing for a while and want to know more about Web page creation, you've found the right book.
Programmers and graphic artists will also find this book useful for making the transition to the Web-although I should make the point that Web design is not in any way as complicated or cerebral as programming. For the basics (and even for the best looking Web pages), no programming expertise is required. Later in this book, you'll learn how to make your pages "cutting-edge" with emerging tools like JavaScript. But even for that, programming is not a prerequisite.
Labels:

HTML 3.2 and CGI Professional Reference Edition UNLEASHED

By John December and Mark Ginsburg
The State of the World Wide Web
It's the late 1990s, and the World Wide Web is a more complex system for communication than when it was introduced almost a decade ago. Although technically still based on the system of hypertext that Tim Berners-Lee and others developed at the European Laboratory for Particle Physics in Geneva, Switzerland in the late 1980s, the Web today is more diverse technologically and more diffused within society and culture.
The Technical Expansion of the Web
The range of technologies a Web developer can choose from is now more varied than ever. Besides an array of techniques and tools to shape meaning with HyperText Markup Language (HTML), developers also can use many technologies to add new kinds of multimedia and interactive content to on-line services. New kinds of software to observe Web content are being developed, and the competition for being the provider of Internet software has risen to the highest priority in the personal computer industry.
Whereas the view of the Web in 1989 was a text-based browser deployed on an internal network, today the Web is a global medium that encompasses many software and communications systems across many networks. Within just the years 1995-1996, new kinds of system s emerged that enabled new forms of communications over the Web.
Labels:

How to Use HTML 3.2

By Scott Arpajian And Robert Mullen
The World Wide Web is exploding all around us, and it shows no signs of slowing down. Chances are that if you've opened the book to this page, you're already familiar with the Internet in general and the World Wide Web in particular. You've probably al-ready explored what the Web has to offer, and like millions of others, you've become hooked by its limitless information and exciting content. In fact, you've probably even thought about publishing your own home page on the Web.
Surprisingly, publishing on the Web is easy. The backbone of the World Wide Web is the Hypertext Markup Language, often simply re-ferred to as HTML. This is the language that is used to create Web pages, and it is the glue that holds all of the pieces of the Web together. Despite its power and flexibility, HTML is simple to understand and write. HTML is not complicated, and it doesn't require special compilers or tools. In fact, you can write HTML just as we did for this book-using the Windows Notepad.
How to Use HTML 3.2 is an illustrated tutorial that will teach you the fundamentals of HTML. It starts with the basics, and then moves on to the more advanced concepts. Along the way, you'll get the chance to practice your skills in a series of exercises known as Try-Its. By the time you complete this book, you'll be an accomplished HTML author. Even when you finish reading the book, you can continue to use it as a reference and guide as you publish your own documents on the Web.
The Web is an exciting medium, and it levels the playing field for electronic publishing. Anyone can publish on the Web. There are very few obstacles, and no special tools are required. All you need is a working knowledge of HTML, some disk space on a Web server, and a whole lot of ambition. This book will teach you everything you need to know about creating HTML content on the World Wide Web. The rest is up to you.
Labels:

Zen Garden -The Beauty of CSS Design

Littering a dark and dreary road lay the past relics of browser-specific tags, incompatible DOMs, and broken CSS support.
Today, we must clear the mind of past practices. Web enlightenment has been achieved thanks to the tireless efforts of folk like the W3C, WaSP and the major browser creators.
The css Zen Garden invites you to relax and meditate on the important lessons of the masters. Begin to see with clarity. Learn to use the (yet to be) time-honored techniques in new and invigorating fashion. Become one with the web.
So What is This About?
There is clearly a need for CSS to be taken seriously by graphic artists. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The code remains the same, the only thing that has changed is the external .css file. Yes, really.
CSS allows complete and total control over the style of a hypertext document. The only way this can be illustrated in a way that gets people excited is by demonstrating what it can truly be, once the reins are placed in the hands of those able to create beauty from structure. To date, most examples of neat tricks and hacks have been demonstrated by structurists and coders. Designers have yet to make their mark. This needs to change.
Labels:

CSS 2.1 Specification

This specification defines Cascading Style Sheets, level 2 revision 1 (CSS 2.1). CSS 2.1 is a style sheet language that allows authors and users to attach style (e.g., fonts, spacing, and aural cues) to structured documents (e.g., HTML documents and XML applications). By separating the presentation style of documents from the content of documents, CSS 2.1 simplifies Web authoring and site maintenance.
CSS 2.1 builds on CSS2 [CSS2] which builds on CSS1 [CSS1]. It supports media-specific style sheets so that authors may tailor the presentation of their documents to visual browsers, aural devices, printers, braille devices, handheld devices, etc. It also supports content positioning, table layout, features for internationalization and some properties related to user interface.
CSS 2.1 corrects a few errors in CSS2 (the most important being a new definition of the height/width of absolutely positioned elements, more influence for HTML's "style" attribute and a new calculation of the 'clip' property). But most of all CSS 2.1 represents a "snapshot" of CSS usage: it consists of all CSS features that were implemented interoperably at the date of publication.
Labels:

Tableless layout HOWTO

It has been advocated many times that tables shouldn't be use in HTML for layout purposes. This page shows one way to create a 3 columns layout using CSS only.
HTML is a structural language, which means it is - or should be - used to add structure into a text through tags. The table tag should then only be used to format data into a table to relate columns with rows.
But since the apparition of tables in HTML, it has been very often used for layout purpose, usually split a web page into columns. Besides the fact that it breaks the meaning of HTML, it doesn't help either in various cases that we could summarize by the difficulty to parse or render a table in some context (disabilities, view port restrictions, ...).
This document describes one way to create a 3 columns layout and links to other layout techniques.
Labels:

Style Sheets

Style sheets represent a major breakthrough for Web page designers, expanding their ability to improve the appearance of their pages. In the scientific environments in which the Web was conceived, people are more concerned with the content of their documents than the presentation. As people from wider walks of life discovered the Web, the limitations of HTML became a source of continuing frustration and authors were forced to sidestep HTML's stylistic limitations. While the intentions have been good -- to improve the presentation of Web pages -- the techniques for doing so have had unfortunate side effects. These techniques work for some of the people, some of the time, but not for all of the people, all of the time. They include:
  • Using proprietary HTML extensions
  • Converting text into images
  • Using images for white space control
  • Use of tables for page layout
  • Writing a program instead of using HTML

These techniques considerably increase the complexity of Web pages, offer limited flexibility, suffer from interoperability problems, and create hardships for people with disabilities.

Click to Read More

Labels:

40 CSS Tutorial Reference

This tutorials and guides or ebook are for understanding and using Cascading Style Sheets (CSS). It also shows several method for implementing CSS. This reference make you clear how to code CSS and how to change different formats using CSS.
This all are free Cascading Style Sheet tutorials (CSS) tutorials or ebook from industry experts that feature extensive information on CSS basics, tags, programming, and scripts.

Labels:

CSS Attributes: Index -MSDN Library

This index lists all the supported Cascading Style Sheets (CSS) attributes by category, and indicates in which version of Microsoft Internet Explorer they were first available.
Version Keys
(5) Attribute available as of Internet Explorer 5
(5.5) Attribute available as of Internet Explorer 5.5
(6) Attribute available as of Internet Explorer 6
(7) Attribute available as of Windows Internet Explorer 7
Note When an attribute has multiple version keys, later version keys indicate significant updates to the attribute.
Attributes that have been proposed to the World Wide Web Consortium (W3C) but are not part of any standard are marked with "." Microsoftextensions to the CSS standard are indicated with "."
Labels:

Introduction to CSS shorthand properties

Shorthand properties?
One of the many great possibilities in CSS is the use of shorthand properties. It lets you specify several properties by using only one. If you have started learning about CSS and started implementing it on your web pages, you'll immediately see the benefit of using shorthand CSS properties. It makes it even easier for you to apply style to your markup, and it will make your CSS code shorter.
For you to have any value of this article you need to know the normal CSS properties and their values, they will be used here, but not extensively explained.
Browser support as indicated for every shorthand property is vague and only gives a general idea of the browser compatibility. For more detailed information about the nature in which a property is buggy or partially supported, check the link to Webreview and Stylemaster at the end of this article.
Now let us have a quick look at a sample CSS rule to refresh our memory on the different parts of CSS and what they are called:
Labels:

Cascading Style Sheets

Style Sheets Now!
Change the appearance of hundreds of Web pages by changing just one file... Influence presentation without losing visitors... All with the power and flexibility of Web style sheets.
Quick Tutorial
A basic introduction to Cascading Style Sheets.
CSS Structure and Rules
An introduction to the various kinds of selectors, pseudo-classes, pseudo-elements, and cascading order.
CSS Properties
Descriptions of the various properties available in Cascading Style Sheets, level 1.
Linking Style Sheets to HTML
Various methods of incorporating style sheets into an HTML document.
Style Sheet Dependence
How to misuse style sheets and make your pages inaccessible.
CSSCheck
Check the syntax and style of your Cascading Style Sheets with this CSS lint.
CSS References
Links to CSS specifications and other documentation.
Labels:

CSS 2 Tutorial

By Miloslav Nic
In this tutorial CSS 2 stylesheets are applied on XML documents. The text is written in pure HTML and can be therefore displayed in any browser. Each example contains one or more xml sources which can be displayed (and formatted) with CSS when the link View output is clicked on.
You can start from the Example 1, from the Contents, which contains descriptions of individual examples, or from Index which lists all used properties in the stylesheets with links to individual examples.
Labels:

RichInStyle.com CSS2 tutorial

This is one of very few CSS2 tutorials on the net. Not only does it have that advantage, but also has the following advantages:
  • It is easy to understand
  • It covers every aspect of the specification, including those that are frequently not touched upon by other tutorials such as cascading, box width calculations, etc.
  • It presents information in an efficient manner - it is short, so you learn faster

Why style sheets?
Style sheets have the following advantages:

  • They separate content from formatting. This means that instead of marking a quotation as italic, you mark it as a quote and then tell the browser that you want all quotes to be italic. This means that it is a two-second job to change quotes to bold, red, green or normal.
  • They reduce download time by removing formatting information from documents. Thus instead of having to specify that you want Times New Roman a few dozen times in a file for headings, you specify once that you want headings to be Times New Roman. They also are advantageous in that they need only be downloaded once for an entire website.
  • They give far more control over formatting than HTML - such features as background images and colors on all elements - not just the whole document, etc.
  • They ensure a consistent appearance across a site

Click to Read More

Labels:

RichInStyle.com CSS1 tutorial

This is a CSS1 tutorial with a difference - unlike other tutorials, it has the following advantages:
It covers every aspect of the specification, including those that are frequently not touched upon by other tutorials such as cascading, box width calculations, etc.
It presents information in an efficient manner - it is short, so you learn faster.
What are style sheets
Style sheets provide a means for authors to specify how they wish documents written in a markup language such as XML or HTML to be formatted. For example, an author might wish to specify that a document should be green on pink - this could be done using CSS, an established standard for styling documents.
You might ask 'Why do we need style sheets - can't you use HTML; for example, the FONT element or the bgcolor attribute?'
Labels:

Style Master CSS Tutorial

This tutorial teaches CSS using both hand-coding and Style Master for Windows. You can also follow it using instructions for Style Master for Mac OS X. By working through the exercises you will learn all about CSS for text styling and page appearance including layout, and create a stylish looking page like this. If you want to learn CSS by hand-coding alone, simply work through all the exercises and code examples and skip all the specially styled Style Master instructions.
Style Master is a CSS editor which includes full support for hand-coding. It's a great way to start learning CSS: hand code when it suits, and fall back on the WYSIWYG editors when you're working with new properties and selectors. This tutorial is included as part of the 30 day demo download.
Labels:

Web Style Sheets CSS tips & tricks

A random collection of CSS examples and some help in using them.
  • Figures & captions
  • A pinned-down menu
  • Indented paragraphs
  • Alternative style sheets
  • A confetti menu
  • Getting rid of colored scrollbars (user style sheets)
  • Even/odd: coloring every other row
  • A tabbed interface
  • A chart comparing font styles
  • Horizontal and vertical centering
  • Boxes with drop shadows
  • Text shadows
  • Rounded boxes and unsharp shadows

Figures & captions

HTML doesn't have an element that allows to insert a figure with a caption. It was once proposed (see HTML3), but never made it into HTML4. Here is one way to simulate such a figure element:

Click to Read More

Labels:

CSS Quick Tutorials

If you already know what a style sheet is and how to link it to your page, and how to specify selectors, properties and units with CSS, then in some ways the rest is detail. But, there can be a lot of detail to learn. The following is our ongoing collection of tips, tricks and quick tutorials.
The rising tide
When I redesigned the Westciv site (some time ago now - how it flies!) I included a neat little effect on the top left corner logo which I like to call "The Rising Tide". Scroll up and down the page a bit now if you've never actually noticed it before.
(Not seeing anything in particular? I'm guessing you're using Internet Explorer on Windows. Because a vital aspect of CSS is not supported by this browser, the technique doesn't actually work here. However it does no harm either, so in the spirit of progressive enhancement I decided to use it anyway.)
I've always been surprised by the number of people who have written in asking how the effect on the logo works, and now I've finally got round to writing a little tutorial to spell it out. There are two parts to the technique. One is simply the scrolling effect, and the way the westciv logo can always be seen no matter how far you scroll down the page. And then there is the fact that this logo is a live link to the Westciv home page, available right there in the top left of the viewport, no matter how far down the page has been scrolled.
Labels:

CSS Online - Explore the World of CSS

CSS Online is an interactive guide to CSS. CSS Online will be updated to reflect the latest CSS standards. You can explore each page and experiment on-line by manipulating different CSS properties. See how to manipulate text, margins, borders, and much more.
Adminstrator's Note: This site is a great interactive online CSS tutor
Labels:

CSS-guide

By Tapio Markula
Hi. You arrived to my CSS-guide. I handle in my CSS-guide almost everything, which relates with CSS. CSS-pages have following page groups in the main menu:
  • General info - general info about the CSS-guide, how topic groups relate with each others, last changes, functionality of pages, used colors, special markups and links; includes also a FAQ-page, where I answer either real question, which I have got or imaginary questions, which somebody might ask for me
  • Index pages - many kinds of index pages, for example alphabetical index and table of contents (the site map of CSS-guide)
  • Guide pages - the most important CSS-pages, where I handle systematic CSS - the actual CSS-guide
  • Extra pages - a group of mixed pages, which somewhat relate with CSS
  • Proposals - some CSS-related proposals
  • Practice - practice tasks and example pages

I hope that you could find from my site what you are looking for and my site could give for you much pleasure!

Click to Read More

Labels:

CSS Frequently Asked Questions

By Håkon Wium Lie and Bert Bos
What is CSS?
CSS stands for Cascading Style Sheets and is a simple styling language which allows attaching style to HTML elements. Every element type as well as every occurance of a specific element within that type can be declared an unique style, e.g. margins, positioning, color or size.
What are Style Sheets?
Style Sheets are templates, very similar to templates in desktop publishing applications, containing a collection of rules declared to various selectors (elements).
What is external Style Sheet? How to link?
External Style Sheet is a template/document/file containing style information which can be linked with any number of HTML documents. This is a very convenient way of formatting the entire site as well as restyling it by editing just one file.
The file is linked with HTML documents via the LINK element inside the HEAD element. Files containing style information must have extension .css, e.g. style.css.
Labels:

CSS Pointers Group's CSS Example

CSS Pointers Group provides various practical use examples of CSS. It includes -
  • Blockquote Usage
  • Border on BODY
  • CSS Columns
  • Deprecated examples
  • CSS Layers example
  • Drop Cap simulation
  • More Drop Cap simulations
  • Table example
  • Embedded CSS example
  • External CSS example
  • CSS Font Rules
  • CSS font-family
  • CSS font-size
  • CSS font-style
  • CSS font-variant
  • CSS font-weight (keyword)
  • CSS font-weight (numeric)
  • Table example (green bar paper)
  • CSS highlighting
  • Imported CSS example
  • Indenting with CSS
  • Inline CSS example
  • Text justification with CSS
  • List options with CSS
  • Pullquotes Examples
  • Shadowed text with CSS
  • Suppress Hypertext underlining
  • CSS table with named colors
  • Border workaround for Netscape

Click to Read More

Labels:

Introduction to CSS3

The members of the CSS&FP Working Group have decided to modularize the CSS specification. This modularization will help to clarify the relationships between the different parts of the specification, and reduce the size of the complete document. It will also allow us to build specific tests on a per module basis and will help implementors in deciding which portions of CSS to support. Furthermore, the modular nature of the specification will make it possible for individual modules to be updated as needed, thus allowing for a more flexible and timely evolution of the spcification as a whole.
This document lists all the modules to be contained in the future CSS3 specification.
This is an official introduction, issued by the CSS Working Group, which details the modularization of the CSS3 specification and the CSS test suite. This document should be considered to be informative, not normative. See the Style overview pages for more information on W3C's work on style sheets, including CSS.
This is a public W3C Working Draft for review by W3C members and other interested parties. As a draft document, it may be updated, replaced, or obsoleted by other documents at any time. It is inappropriate to use W3C Working Drafts as reference material or to cite them as other than "work in progress."
Labels:

Cascading Style Sheets, level 2

This specification defines Cascading Style Sheets, level 2 (CSS2). CSS2 is a style sheet language that allows authors and users to attach style (e.g., fonts, spacing, and aural cues) to structured documents (e.g., HTML documents and XML applications). By separating the presentation style of documents from the content of documents, CSS2 simplifies Web authoring and site maintenance.
CSS2 builds on CSS1 (see [CSS1]) and, with very few exceptions, all valid CSS1 style sheets are valid CSS2 style sheets. CSS2 supports media-specific style sheets so that authors may tailor the presentation of their documents to visual browsers, aural devices, printers, braille devices, handheld devices, etc. This specification also supports content positioning, downloadable fonts, table layout, features for internationalization, automatic counters and numbering, and some properties related to user interface.
Labels:

Cascading Style Sheets, level 1

This document specifies level 1 of the Cascading Style Sheet mechanism (CSS1). CSS1 is a simple style sheet mechanism that allows authors and readers to attach style (e.g. fonts, colors and spacing) to HTML documents. The CSS1 language is human readable and writable, and expresses style in common desktop publishing terminology.
One of the fundamental features of CSS is that style sheets cascade; authors can attach a preferred style sheet, while the reader may have a personal style sheet to adjust for human or technological handicaps. The rules for resolving conflicts between different style sheets are defined in this specification.
This Recommendation results from W3C activities in the area of Style Sheets.
Labels:

Comprehensive CSS Guide

by Marcus Kazmierzak
CSS are text files, or special text in a HTML file, which allows you to specify styles, formatting, and positioning of HTML objects.
What do you mean style?
Style is what gives an item its distinctive look or feel. For text it could be what font is used, what color, size, or spacing. It also applies to other HTML objects such as links, images, backgrounds, margins and borders.
How can I benefit by using CSS?
Some of the benefits to using CSS are more consistency, better layout and visual design, plus easier HTML coding. Also you can do things with style sheets that could never be done before.
  • consistency: This would apply for larger sites, and many different developers, which is the environment I am currently working in for the Department of Education. A site-global style sheet could be set up, which all pages would refer to. This sheet could include the look and feel you want for the complete site. Each page would maintain the same attributes throughout the site. The ability to change one item, on one page can change the same attribute on your whole site.
  • easier coding: No more elaborate tables, and complicated HTML. This will also greatly benefits the large multi-contributor web environments. The HTML code using style sheets is much simpler. The code reverts back to what it was in the early simple days. Just using header tags (H1, H2, ...), and paragraph tags with style sheets can produce a rich document, with the help of a SPAN and DIV tag here and there. (but that's getting ahead of myself)
  • rich design and layout: Cascading Style Sheets bring professional layout and design control to HTML documents. Here's a brief listing of what you can do with style sheets that you could only do with an elaborate work around, or not at all.
    (1) exact positioning of elements
    (2) font control (size, color, family)
    (3) white space control, margins, leading
    (4) background control (placement, repeat, ...)

Click to Read More

Labels:

Complete CSS Guide

By John Allsopp and Maxine Sherrin
The first four parts of this guide, including the all important sections on properties and selectors are available here for free as part of our collection of CSS resources, the House of Style.
What is the Complete CSS Guide?
When Cascading Style Sheets were introduced in late 1996, they represented an exciting new opportunity. They enabled much more sophisticated page design (typography and layout) than web developers had been used to, and they helped manage the complex tasks of developing and maintaining sites, and keeping them up to date. They also greatly simplified the process of making web pages accessible to as many people as possible, regardless of the device they use to read a page, and regardless of any disability they might have.
Since then, much about the web has changed. It's hard to believe now but in late 1996, Netscape Navigator was the browser of choice for the majority of web users. Internet Explorer from Microsoft lagged far behind in terms of features, performance, and number of users. Web browsing was something you did on a PC or Mac. HTML was not a single standard which was well adhered to, but a tangle of competing versions, with proprietary extensions. The dotcom boom was still gaining momentum, and the bust was just a twinkle in the naysayers' eyes.
Now, Internet Explorer dominates the browser scene even more than Netscape did back then. Browsers are built into mobile phones and people browse from television based systems, even games consoles. HTML has become a widely adhered to standard, and lots of those old proprietary extensions have either gone the way of all flesh, or become part of the standard. And slowly, slowly, intransigence, reluctance and skepticism towards CSS is fading away. Cascading style sheets are becoming a solid, well supported and easy to use technology for creating the appearance of web pages.
Many (internet) years ago, we put together a quite straightforward guide to getting up to speed with CSS. In time it's grown to accommodate changes in our knowledge and in CSS itself. This single guide has grown into a whole website, the "House of Style", with articles, tutorials, reference materials and more.
Labels:
Subscribe to: Posts (Atom)

Followers