目次
1.初期設定
１．Google Chromeの拡張機能 NetBeans Connector をインストールしておくと、NetBeansでHTMLファイルを保存するとリアルタイムでChromeの表示が更新されるので、開発効率が上がります。
2.プロジェクトの作成
作成するHTMLファイルは、「プロジェクト」という単位で管理されます。以下の手順でプロジェクトを作成します。
1.ウィンドウの左上にある「ファイル (F)」をクリック
2.下図6.2の「新規プロジェクト(W)…」をクリック
3.新規プロジェクトという、新しく作るプロジェクトの設定を行うための下図6.3のウィンドウが開きます。
下図6.3のウィンドウ では、「カテゴリ」が「HTML5/Javascript」、「プロジェクト」が「HTML5/JSアプリケーション」を選択して、「次へ (N) >」をクリックします。
4.次に、下図6.4でプロジェクト名を決定します。
「プロジェクト名（N）」はデフォルトで「HTML5Application」となっています。（プロジェクト名は講師の指示に従ってください）
「プロジェクトの場所（L）」にHTMLファイルやCSSファイルが保存されるので任意の場所を選んでください。
（研修ではCドライブ直下の指定したフォルダ）
5.下図6.5のサイト・テンプレートは「なし」を選択してください。
6.下図6.6の「ツール」はすべてのチェックを外してください。
問題なければ「終了（F）」ボタンをクリックします。
研修中はこのプロジェクトを使い続けていきます。
7.下図6.7のようにGoogleChromeのアイコンが表示されます。
8.緑色の右向き三角のボタンをクリックすることでプロジェクトが実行できます。
9.GoogleChrome「TODO write content」と書かれたWebページが表示されます。
10.NetbeansのエディタでHTMLの内容を書き換え、上書き保存するとリアルタイムでWebページの内容も更新されます。
これをライブプレビューといいます。
3.エディタ機能
1.HTMLの自動生成
何も入力していない状態でエディタ上で「Ctrl ＋ Space」キーを同時に押すことで入力の自動補完機能が使えます。
下図6.9のようにフォームや特定のHTMLを自動で生成するためのサブメニューが表示されます
2.HTMLの自動補完
1.エディタ上で小なり記号（<）を入れるとタグの候補を表示します。
2.さらに「p」などと最初の一文字を入力するとタグの候補が絞り込まれます。
3.大なり記号（>）を入れて、開きタグを入力し、エンターキーを押すと、閉じタグ（今回の場合は</p>）が挿入されて便利です。
3.履歴
1.メニューバーの｢チーム｣ -「履歴(T)」-「履歴を表示(T)」を選択すると下図6.10のように、そのファイルの編集履歴が表示されます。
ファイルの保存日時、メッセージ、修正箇所の差分が表示されます。
2.過去の履歴と現在のファイルの内容を見比べながら、必要に応じて過去の状態に戻ることができます。
3.右向きの矢印をクリックすることで過去のファイルの状態に戻せます。
4.「ソース」タブをクリックすると、通常の編集用エディタに戻ります。
なお、Javaの時に使用したショートカットキーはほとんどそのまま使用できます。
HTMLの文法に関しては以下の記事も参考にしてください。
以上。