HTMLソースコードを色分けして見やすく、便利なソースコードアシスト機能もあり。
Aptana Studio 3で新規HTML作成
前回記事は、Aptana Studio 3のダウンロードとインストール、そして日本語化について説明しました。
今回記事では、Aptana Studio 3で簡単なHTMLファイルを作るところまで説明します。
Web プロジェクトを作る
まず最初に白紙のHTMLファイルを説明します。
画像のようにツールバーの「新規」アイコンの「▼」の部分を押して「Web プロジェクト」を選択します。
または、「新規」アイコンを押して表示されたウィンドウから「Web プロジェクト」を選択してもよいです。
次に、「Default Projectを選択します。」
「新規 Web プロジェクト」ウィンドウが表示されます。「プロジェクト名(P)：」にはわかりやすい名前を入力して「完了(F)」ボタンを押します。
これでHTMLファイルを作る環境は整いました。
白紙のHTMLを作る
まず、メニューバーから「ファイル(F)」->「新規(N)->「ファイル」と選択します。
次に、「新規ファイル」ウィンドウが表示されますので、ファイル名(M)」にアルファベットでわかりやすい名前(トップページにするならindex.html)を入力して「完了(F)」ボタンを押します。
すると、白紙のHTMLファイルが出来上がります。ここにソースコードを書いていきます。
HTMLの一部を自動生成する
HTMLの骨格となる一部ソースコードを自動生成する方法を説明します。
まず、メニューバーから「ファイル(F)」->「新規(N)->「ファイル」と選択し、「新規ファイル」ウィンドウを表示させ、ファイル名(M)」にわかりやすい名前を入れます。(ここまでは白紙のHTMLファイルを作るところと一緒です)
ファイル名を入力したら「次へ(N>)」ボタンを押すと、File Templateウィンドウが表示されますので、「HTML 5 Template」を選択し「完了(F)」ボタンを押します。
すると、次のようなHTMLファイルが出来上がります。まず、<html lang="en">(英語)になっているので、ここを<html lang="ja">(日本語)に変えておきましょう。
また、下線を引いているところに作者の名前(ユーザー名)が入るので、変更したい場合は変更しましょう。
<!DOCTYPE html>から始まるお決まりのHTMLソースを入れないでよいので、便利ですね。
作成したHTMLの実行
HTML文章を書くと、ブラウザでどう表示されるのかプレビューをしてテストを行う必要があります。
Aptana Studio 3には、作ったHTMLをプレビューする機能も付いています。
やり方は簡単で、ツールバーにある実行アイコンを押すか、メニューバーから「実行(R)」->「実行(R)」を選択するか、「Ctrlキー」を押しながら「F11キー」を押すだけ。
(HTMLファイルが変更されている場合は、'ファイル名.html'は変更されています。変更を保管しますか？とメッセージボックスが出ますので「はい(Y)」キーを押して保存します)。
ためしに、「HTML基礎 文字化け防止」の記事でサンプルとして作ったHTMLファイルをプレビューしてみます。
以下がAptana Studio 3でプレビューした画面です。FireFoxでプレビューしていますね。実行アイコンの右にある「▼」の部分からプレビューするブラウザが選べますので複数のブラウザでプレビューすることもできます。
次回記事からHTML要素の説明
今回までの記事でHTMLの基本と、HTML開発環境を整えました。
次回からHTML要素の説明を行います。
以上、当サイト管理人のAsterismでした。