| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> | |
| <html> | |
| <head> | |
| <title>NetBeans IDE - Developing with HTML, JavaScript, and CSS</title> | |
| <link rel="stylesheet" type="text/css" href="../../features.css" > | |
| <link rel="stylesheet" href="../../netbeans.css" type="text/css"> | |
| <meta name="description" content="NetBeans IDE - Integrated Tools for JavaScript Developers"> | |
| <meta http-equiv="content-language" content="en"> | |
| <meta name="author" content="Ruth Kusterer" /> | |
| </head> | |
| <body> | |
| <h1>Developing with HTML, JavaScript, and CSS</h1> | |
| <p> | |
| <a href="../../images_www/v7/screenshots/html.png"><img | |
| alt="HTML 5 in the NetBeans IDE" | |
| src="../../images_www/v7/screenshots/html-cut.png" | |
| class="box" width="650" height="255"><br><span | |
| class="font-11">Click image for fullscreen preview</span></a> | |
| </p> | |
| <p><strong>The best tools for web development.</strong></p> | |
| <table class="features-table"> | |
| <tbody> | |
| <tr> | |
| <td class="valign-top features-col"> | |
| <h2>Editor Support for HTML, JavaScript, and CSS</h2> | |
| <p> | |
| Take advantage of full syntax highlighting, code completion, pop-up documentation, | |
| and error checking for HTML, CSS and JavaScript, | |
| including HTML 5, JavaScript 1.7 and semantic highlighting for E4X (embedded XML objects). | |
| The IDE validates HTML through the validator.nu service. The Editor recognizes HTML code in JavaScript files and JavaScript code in | |
| HTML files. The Editor also recognizes HTML and JavaScript in XHTML, PHP and JSP files. </p> | |
| <h3>HTML <img src="../../images_www/v6/features/improved_small.gif" alt="improved icon" width="54" height="17"></h3> | |
| <p>You can use the editor in the IDE to quickly surround code with a tag or remove a surrounding tag by using new hints. | |
| You can also remove inline styles to a style block or <tt>.css</tt> file. </p> | |
| <h3>CSS <img src="../../images_www/v6/features/improved_small.gif" alt="improved icon" width="54" height="17"></h3> | |
| <p>NetBeans IDE supports CSS 3. Refactoring, semantic highlighting, mark occurrences and other features have been adapted to CSS3 code. | |
| CSS code completion has been expanded to complete html elements, CSS3 properties and their values, new pseudo classes and pseudo elements, and namespace prefixes. Vendor-specific properties (dash prefix properties) have also been added to code completion. The Navigator window now shows css classes, ids, elements, namespaces and rules in separate element sets. </p> | |
| <h3>JavaScript</h3> | |
| <p> | |
| When you specify in the JavaScript Options panel browser types and versions, | |
| the editor provides you with browser compatibility information while you type. | |
| </p><p> | |
| Drag and drop handy code snippets for forms and tables | |
| from the HTML Palette into the editor. | |
| Edit CSS rules and preview the results in the visual CSS editor. | |
| <br /><a class="notes" href="../../kb/docs/web/js-toolkits-jquery.html">Using | |
| jQuery to Enhance the Appearance and Usability of a Web Page</a> | |
| </p> | |
| <p><br></p> | |
| <h2>Ajax development</h2> | |
| <p> | |
| The NetBeans JavaScript and CSS editors are the perfect choice for Ajax development. | |
| The NetBeans IDE also comes with a client-side monitor to examine HTTP messages, | |
| an Ajax-ready environment for your choice of server-side scripting language | |
| (e.g., JSP, PHP, Groovy), out-of-the-box support for MySQL and Java DB, | |
| and extensive integration support for web frameworks and third-party JavaScript toolkits. | |
| </p> | |
| <p><br></p> | |
| <h2>Toolkit Integration</h2> | |
| <p> | |
| The NetBeans JavaScript editor provides code completion and integrated | |
| documentation for popular toolkits such as | |
| jQuery, Script.aculo.us, Prototype, etc. Download your favorite | |
| JavaScript toolkits, copy the files into your project, and the editor | |
| will automatically recognize them. | |
| </p> | |
| <p><br></p> | |
| <p><img alt="-" src="../../images_www/v6/arrow-button.gif" width="15" height="12"> | |
| <a href="../../kb/trails/web.html">Web Application Learning Trail</a></p> | |
| </td> | |
| <td class="screenshots-col"> | |
| <p><img src="../../images_www/v6/8/features/javascript-browser-options.png" | |
| alt="javascript browser options" class="box" width="200" height="165"></p> | |
| <p><img src="../../images_www/v6/8/features/http-monitor.png" | |
| alt="HTTP server monitor" class="box" width="200"></p> | |
| <p><img src="../../images_www/v6/8/features/ajax.png" | |
| alt="Ajax hints in editor" class="box" width="200" height="75"></p> | |
| <p><img src="../../images_www/v6/5/features/javascript-editor.png" | |
| alt="NetBeans JavaScript Editor" class="box" width="200"></p> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </body> | |
| </html> |