HTMLファイルは、新規ウィザードから[Web] > [HTML]を選択し、ウィザードで作成します。ウィザードでの設定は、以下を参考にしてください。
親フォルダを入力または選択
HTMLファイルを作成するフォルダを選択します。
ファイル名
作成するHTMLファイルの名前を指定します。拡張子を省略した場合、拡張子は ".html"になります。
HTML テンプレートの使用
テンプレートを使ってHTMLファイルを作成する場合にチェックします。新たにテンプレートを追加することもできます。
ポイント
拡張子を省略したときの拡張子、および、ファイル作成時に埋め込まれるエンコードは、設定ページの[Web] > [HTMLファイル]でカスタマイズすることができます。
HTMLファイルの編集には、HTMLエディタを用います。HTMLエディタは以下の特徴を持つテキストエディタです。
構文の強調表示
要素名、属性名、属性値、コメントなどをそれぞれ異なる色で強調します。強調の方法は、設定でカスタマイズすることができます。
問題の指摘
記述したタグ、属性名、属性値などに誤りがある場合には、エラーや警告としてマーカや波線で指摘します。
コンテンツアシスト
カーソルの位置に応じて、選択可能な要素名、属性名、属性値などの候補がコンテンツアシストリストに表示されます。[Ctrl+Space]キーを押してコンテンツアシストリストを表示し、文字を入力することで候補を絞り込みます。
ツールチップ表示
マウスカーソルを要素名や属性名の上に移動し、F2キーを押すと、その要素や属性の説明が表示されます。
ユーザ定義可能なテンプレートとスニペット
コンテンツアシストで利用可能なテンプレートを登録することができます。
また、良く利用するコードの断片などをスニペットに登録することで、ドラッグ＆ドロップで簡単にコードを挿入することができます。
タグの選択
カーソルの位置に応じて、そのタグが及ぶ範囲をページ左の垂直方向ルーラーにインジケータを表示します。
HTMLエディタで編集するときには、以下のビューを適宜利用します。
アウトラインビュー
HTML構文のアウトラインを表示します。要素の追加や属性の追加もこのビューで行うことができます。
プロパティビュー
エディタで選択されている要素の属性を表示します。値を変更することもできます。属性値を一覧から選択することも可能です。
スニペットビュー
良く利用するコードの断片を登録することで、ドラッグ＆ドロップでコードを簡単にソースに挿入することができます。
タグを入力する
以下のどちらかの方法でタグを入力します。
コンテンツアシスト
[Ctrl+Space]キーを押すと、現在のカーソル位置に応じてタグの候補がコンテンツアシストリストに表示されます。コンテンツアシストリストには、構文上挿入可能なタグのほかに、HTMLのテンプレートに登録されているテンプレートも表示されます。
アウトラインビューを利用
アウトラインのコンテキストメニューからタグを挿入することができます。アウトラインビューで現在選択されているタグの子、前、後のどれかの位置にタグを挿入できます。
表を挿入する
コンテンツアシストで表を挿入します。テンプレートに表が「table」としてあらかじめ登録されています。
リストを挿入する
コンテンツアシストでリストを挿入します。順序付きリストは、テンプレートの「ol」を使います。順序なしリストは、テンプレートの「ul」を使います。
属性/属性値を入力する
属性の追加や属性値の変更には、以下の方法があります。
コンテンツアシストを利用する
タグの中で、[Ctrl+Space]キーを押すと、そのタグで利用可能な属性の一覧がコンテンツアシストリストに表示されます。追加したい属性をリストより選択します。選択肢の決まっている属性値は、属性値の先頭にキャレットを移動してコンテンツアシストを起動すると、属性値の候補がコンテンツアシストリストに表示されます。
プロパティビューを利用する
エディタでキャレットのある位置のタグの属性一覧が、プロパティビューに表示されます。プロパティビューの値カラムに値を入力すると、その値がタグの属性値に反映されます。
ページをプレビューする
作成したHTMLファイルをプレビューするには、そのファイルをWebブラウザで開きます。
ポイント
編集を行うHTMLエディタとプレビューを行うWebブラウザを縦に並べて表示すると、便利です。エディタを縦に並べて表示するには、エディタのタブをドラッグします。
HTML構文バリデータによって、HTMLタグの検証が行われます。検証の詳細については、"7.2.5.2 検証"を参照してください。
