To take full advantage of some of the tools available in the IDE that support HTML5 application development it is recommended that you use the Chrome browser and install the NetBeans Connector extension from the Chrome Web Store. You only need to install the extension once.

When installed, the NetBeans Connector extension adds a NetBeans Actions menu that is accessible from the URL location bar when you run a NetBeans HTML5 project in the Chrome browser. The NetBeans Actions menu enables you to enable Inspect in NetBeans Mode and to quickly resize the browser window to the dimensions of common display devices. The JavaScript debugger is also automatically enabled when you run an HTML5 application.

It is recommended that you run your HTML5 applications in the Chrome browser with the NetBeans Connector extension installed when you are developing the application. The Chrome with NetBeans Integration option is selected by default as the run target when you create an HTML5 application. However, it is also possible to run your HTML5 application in the Embedded WebKit Browser that is bundled with the IDE.

When you run the HTML5 application in the Embedded WebKit Browser the IDE opens the Web Browser window in the IDE. The Embedded WebKit Browser supports many of the features that are enabled in the Chrome browser when the NetBeans Connector extension is installed, including Inspect mode, various screen size options and JavaScript debugging.

Perform the following steps to run an HTML5 application in the Embedded WebKit Browser.

When you run application the Web Browser window opens in the IDE.

You can click the icons in the toolbar of the Web Browser tab to enable Inspect mode and to quickly switch between different display sizes.

In this exercise you will use the New Project wizard in the IDE to create a new HTML5 project. For this tutorial you will create a very basic HTML5 project that only has an index.html file. In the wizard you will also select some jQuery JavaScript libraries that you want to use in the project.

When you select the No Site Template option the wizard generates a basic empty NetBeans HTML5 project. If you click Finish now the project will only contain a Site Root folder and an index.html file in the Site Root folder.

The Site Template page of the wizard enables you to select from a list of popular online templates for HTML5 projects or to specify the location of a .zip archive of a site template. You can type the URL of the .zip archive or click Browse to specify a location on your local system. When you create a project based on a site template the files, libraries and the structure of the project are determined by the template.

When you click Finish the IDE creates the project and displays a node for the project in the Projects window and opens the index.html file in the editor.

You can now test that your project displays correctly in the Chrome browser.

When you choose Run the IDE opens a tab in the Chrome browser and displays the default index.html page of the application. The Browser DOM window opens in the IDE and displays the DOM tree of the page that is open in the browser.

You will notice that there is a yellow bar in the browser tab that notifies you that the NetBeans Connector is debugging the tab. The IDE and the browser are connected and are able to communicate with each other when the yellow bar is visible. When you launch an HTML5 application from the IDE the JavaScript debugger is automatically enabled. When you save changes to a file or make changes to a CSS style sheet you do not need to reload the page because the browser window is automatically updated to display the changes.

If you close the yellow bar or click Cancel you will break the connection between the IDE and the browser. If you break the connection you will need to run the HTML5 application from the IDE again.

You will also notice that the NetBeans icon is visible in the URL location field of the browser. You can click the icon to open a menu that provides various options for changing the display size of the browser and for enabling the Inspect in NetBeans mode.

If you select one of the default devices in the menu the browser window will resize to the dimensions of the device. This enables you to see how the application will look on the selected device. HTML5 applications are usually designed to respond to the size of the screen of the device on which they are viewed. You can use JavaScript and CSS rules that respond to the screen size and modify how the application is displayed so that the layout is optimized for the device.

In this exercise you will set up Bower (bower.io) and use it to download the JavaScript libraries that you’ll use in the sections that follow.

You can use the text field in the panel to filter the list of JavaScript libraries. For example, type jq in the field to help you find the jquery libraries. You can Ctrl-click the names of the libraries to select multiple libraries.

When you have completed this step, you should see the below.

In this exercise you will add the project resources to the project and edit the index.html file to add links to the resources and add some CSS rules. You will see how a few simple CSS selectors when combined with JavaScript can significantly change how a page is displayed in a browser.

The ZIP archive contains two folders with files that you need to add to the project: pix and css .

Note: If you are looking at the directory structure of the project, you need to copy the folders into the public_html folder.

You can use the code completion in the editor to help you.

When you save your changes the page automatically reloads in the browser and the page should look similar to the following image.

Press Ctrl-Space to use the code completion in the editor when you add the CSS rules.

If you open the Browser DOM window you can see the current structure of the page.

The basecss.css style sheet is based on some of the CSS rules that are defined in the custom CSS style sheet in the jQuery "UI lightness" theme.

You can open the basecss.css style sheet in the editor and modify the style sheet to add the CSS rules that you added in the previous step or create a new style sheet for the CSS rules.

jQuery works by connecting dynamically-applied JavaScript attributes and behaviors to elements of the DOM (Document Object Model). The jQuery instructions that are used in this example must be executed only after all of the elements of the DOM have been loaded by the browser. This is important because jQuery behaviors connect to elements of the DOM, and these elements must be available to jQuery in order to get the results we expect. jQuery takes care of this for us through its built-in (document).ready function, which follows the jQuery object, represented by $.

You can also use the following abbreviated version of this function.

The instructions for jQuery take the form of a JavaScript method, with an optional object literal representing an array of parameters, and must be placed between the curly braces {} inside the (document).ready function in order to execute only at the proper time, which is after the DOM has completely loaded.

This code will invoke the jQuery accordion widget script that is included in the jQuery UI library. The accordion script will modify the elements within the DOM object that is identified as infolist . In this code, #infolist is a CSS selector connected to a unique DOM element that has an id attribute with the value infolist. It is connected using typical JavaScript dot notation (‘.’) to the jQuery instruction that uses the accordion() method to display this element.

In the next step you will identify an element in the page as infolist .

The <head> section of the index.html file should look as follows.

You can tidy up your code by right-clicking in the editor and choosing Format.

This <div> element encloses the contents of the page (the four sets of <h3> tags and <div> tags that you added earlier in the tutorial).

You can add the selector to the element in the Edit CSS Rules dialog box. To open the Edit CSS Rules dialog box, right-click in the <div> tag in the editor and choose Edit CSS Rules in the popup menu. Alternatively, if the insert cursor is in the <div> tag in the editor you can click the Edit CSS Rules button (images:./newcssrule.png[title="Code completion in the editor"]) in the CSS Styles window (Window > Web > CSS Styles).

In the CSS Rules dialog box, select id as the Selector Type and type infolist as the Selector. Confirm that Apply Changes to the Element is selected.

When you click OK in the dialog box a CSS rule for the infolist selector is automatically added to the basecss.css style sheet.

When you save your changes the page in the web browser reloads automatically. You can see that the layout of the page has changed and that the page now uses the CSS style rules that are defined in the basecss.css style sheet. One of the lists below the <h3> is open but the others are now collapsed. You can click an <h3> element to expand the list.

The jQuery accordion function now modifies all the page elements that are contained in the infolist DOM object. In the Navigator window you can see the structure of the HTML file and that the div element that is identified by id=infolist .

You can right-click on an element in the Navigator window and choose Go To Source to quickly navigate to the location of that element in the source file.

In the Browser DOM window you can see the DOM elements in the page that is rendered in the browser and the JQuery styles that are applied to the elements.

When Inspect in NetBeans Mode is enabled in the browser, when you select an element in the browser window the element is highlighted in the Browser DOM window.

In this tutorial you have learned how to create an empty HTML5 project that uses a couple jQuery JavaScript libraries. You also learned how to install the NetBeans Connector extension for the Chrome browser and run the HTML5 project in the browser. When you edited the index.html file you saw that the IDE provides some tools that can help you to edit HTML and CSS files.