ファイルの作成
さて、コンテンツの設計が終わったら、実際にホームページの基礎となるhtmlファイルを作ってみましょう。
使用するソフトは「メモ帳」です（Windowsに最初からついてきます）。
サイトドラフトを最初からhtml文書ファイルで作成しておくと、後の「コーディング講座」の作業が楽になります。
また、html文書で作ると、企画段階から「SEOツール講座」にある様々なSEOツールを使用する事もできます。
とはいうものの、サイトドラフトは企画書ですから、コンテンツの設計が固まっていないのであれば、ワードやパワーポイントなどの文書ファイルでのコンテンツ設計作業とサイトドラフトの作業を繰り返すと良いかもしれません。
メモ帳の起動
[スタート]→[すべてのプログラム]→[アクセサリ]→[メモ帳]の順でクリックします。
メモ帳が起動します。
メモ帳は、ほんのちょっとのメモから、htmlやcss等の作成まで幅広く使えるソフトです。
htmlソースのコピー
ホームページは、Wordなどで作成した文章をそのままコピーして作成できるものではありません。
htmlファイルというのは、冒頭部分に「これはhtmlで記述された文書です！」とファイルの特性を宣言し、どのようなルールに基づいて記述されているのかについても書かなければならないものです。
また、ホームページに掲載する文書を「タグ」と呼ばれる特別な文字列で囲って、見出しやリンク、段落、表などの文書構造を定義付け（マークアップ）しなければなりません。
html（Hyper Text Markup Language）、DOCTYPEの解説や、head、bodyタグの詳細解説は、とりあえず省きます。
今のところは、「htmlファイルを制作するためには、『書き方』がある」ということを覚えていただければOKです。
日本語のページを制作するのであれば、下記のコードをこのままコピーして使えば問題ありません。
コピーは、ソースエリアにマウスを乗せると表示される「copy to clipboard」のアイコンをクリックするだけです。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr"> <head> </head> <body> </body> </html>
メモ帳にペーストします。
[編集]→[貼り付け]の順でクリックします。
メモ帳にペーストされました。
「copy to clipboard」のアイコンをクリックしても、Flashの設定で、コピー出来ない場合があります。
そんな時は、「view source」アイコンをクリックして、ソースを別ウィンドウで表示させます。
そこで、Ctrl+Aでコードを全選択、Ctrl+Cでコピーできます。
ファイルの保存
作成したファイルを保存します。
［ファイル］→［名前を付けて保存］の順でクリックします。
ファイルを保存するためのフォルダを作成します。
ここではフォルダの作成先として、「デスクトップ」を選択してください。
［デスクトップ］→［新しいフォルダ］の順でクリックします。
フォルダに名前をつけます。
ここではhomepageというフォルダ名にします（後で変更できます）。
フォルダ名を入力して[enter]を押すと新しいフォルダが開きます。
最後にフォルダを保存します。
ファイル名はindex.htmlとして、文字コードはUTF-8を選択します。
最後に［保存］をクリックしてください。
ホームページのトップページのファイル名は、必ずindex.html（index.htm,index.php,index.jspなどの場合もあります。）です。これは、インターネット上の決まりです。
文字コードをUTF-8にしないと、作成したhtmlをブラウザで見た場合に文字化けすることがあります。
では、次に「ファイルの編集」に進みましょう。
