統合開発環境「Aptana Studio 3」でHTMLを作る

 HTMLソースコードを色分けして見やすく、便利なソースコードアシスト機能もあり。

Aptana Studio 3で新規HTML作成

 前回記事は、Aptana Studio 3のダウンロードとインストール、そして日本語化について説明しました。
今回記事では、Aptana Studio 3で簡単なHTMLファイルを作るところまで説明します。
Aptana Studio 3 エディタ

Web プロジェクトを作る

 まず最初に白紙のHTMLファイルを説明します。
画像のようにツールバーの「新規」アイコンの「▼」の部分を押して「Web プロジェクト」を選択します。
Aptana Studio 3 新規プロジェクト

 または、「新規」アイコンを押して表示されたウィンドウから「Web プロジェクト」を選択してもよいです。
aptana-studio-newhtml03

 次に、「Default Projectを選択します。」
Aptana Studio 3 プロジェクトテンプレート

 「新規 Web プロジェクト」ウィンドウが表示されます。「プロジェクト名(P):」にはわかりやすい名前を入力して「完了(F)」ボタンを押します。
これでHTMLファイルを作る環境は整いました。
Aptana Studio 3 プロジェクト名入力

白紙のHTMLを作る

 まず、メニューバーから「ファイル(F)」->「新規(N)->「ファイル」と選択します。
Aptana Studio 3 新規ファイル

 次に、「新規ファイル」ウィンドウが表示されますので、ファイル名(M)」にアルファベットでわかりやすい名前(トップページにするならindex.html)を入力して「完了(F)」ボタンを押します。
Aptana Studio 3 新規ファイル作成画面

 すると、白紙のHTMLファイルが出来上がります。ここにソースコードを書いていきます。
Aptana Studio 3 白紙のHTML

HTMLの一部を自動生成する

 HTMLの骨格となる一部ソースコードを自動生成する方法を説明します。

 まず、メニューバーから「ファイル(F)」->「新規(N)->「ファイル」と選択し、「新規ファイル」ウィンドウを表示させ、ファイル名(M)」にわかりやすい名前を入れます。(ここまでは白紙のHTMLファイルを作るところと一緒です)
Aptana Studio 3 新規ファイル作成画面
ファイル名を入力したら「次へ(N>)」ボタンを押すと、File Templateウィンドウが表示されますので、「HTML 5 Template」を選択し「完了(F)」ボタンを押します。
Aptana Studio 3 ファイルテンプレート

 すると、次のようなHTMLファイルが出来上がります。まず、<html lang="en">(英語)になっているので、ここを<html lang="ja">(日本語)に変えておきましょう。
また、下線を引いているところに作者の名前(ユーザー名)が入るので、変更したい場合は変更しましょう。
<!DOCTYPE html>から始まるお決まりのHTMLソースを入れないでよいので、便利ですね。
Aptana Studio 3 HTML5テンプレート

作成したHTMLの実行

 HTML文章を書くと、ブラウザでどう表示されるのかプレビューをしてテストを行う必要があります。
Aptana Studio 3には、作ったHTMLをプレビューする機能も付いています。
やり方は簡単で、ツールバーにある実行アイコンを押すか、メニューバーから「実行(R)」->「実行(R)」を選択するか、「Ctrlキー」を押しながら「F11キー」を押すだけ。
(HTMLファイルが変更されている場合は、'ファイル名.html'は変更されています。変更を保管しますか?とメッセージボックスが出ますので「はい(Y)」キーを押して保存します)。
Aptana Studio 3 実行

 ためしに、「HTML基礎 文字化け防止」の記事でサンプルとして作ったHTMLファイルをプレビューしてみます。
以下がAptana Studio 3でプレビューした画面です。FireFoxでプレビューしていますね。実行アイコンの右にある「▼」の部分からプレビューするブラウザが選べますので複数のブラウザでプレビューすることもできます。
Aptana Studio 3 プレビュー

次回記事からHTML要素の説明

 今回までの記事でHTMLの基本と、HTML開発環境を整えました。
次回からHTML要素の説明を行います。

 以上、当サイト管理人のAsterismでした。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


上の画像に表示されている英数字を入力してください *

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>