HTML文書の作成と公開 - 準備編からの続きです。
HTML文書を作成してみましょう。先に紹介していた Nvu をインストールした方は、デスクトップメニューから Nvu のアイコンをダブルクリックで選択して Nvu を起動してください。Nvu が起動できたら白紙の画面の左下に「ソース」という部分があります。 この「ソース」の部分を左クリックすると、HTML Source(HTMLソース)と呼ばれる以下のような英文字の羅列が表示されます。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"><head> <meta content="text/html; charset=UTF-8" http-equiv="content-type"> <title></title> </head><body> <br></body></html>
この英文字の羅列が HTML文書の基本構造です。ではまず最初に "<title>" と "</title>" の間に何か文字を入力してみましょう。「○○のウェブサイト」など好きな文字列を自由に入力してください。この部分がタイトル(表題)となります。
次に左下の部分にある「通常」をクリックしてください。これで、最初に起動したときの白紙の画面に戻ったら、Word や一太郎等のワープロソフトと同じ要領で文章を打ち込んでください。ここに打ち込まれた内容は、先の HTMLソースの中でいえば、"<body>" と "</body>" の間に収まり、文書の本文となります。文章を入力し終えたら、左上の「ファイル(Alt + F)」の部分を左クリックして、「名前をつけて保存(A)」を選択してください。
この HTML文書の保存場所は、先に作っておいたウェブサイト専用のフォルダにしてください。
このHTML文書をこれからできるウェブサイトのトップページにあたるウェブページとして機能させたいので、保存する際の文書の名称は "index.html"、または "index.htm" で保存します。".html" や ".htm" の部分は拡張子と呼ばれます。拡張子は、ファイルの種類を識別するためのもので、HTML文書の場合は ".html"、または ".htm" の拡張子とするのが一般的です(ただし拡張子は、ウェブサーバーの動作設定に依ります)。
テキストエディタを使って HTML文書を作成しようという方は、メモ帳を利用されることを想定して説明します。まず、次の手順でメモ帳を開きます。
スタート(Ctrl + Esc) > すべてのプログラム(P) > アクセサリ > メモ帳
上記の手順でメモ帳を開いて、下記の HTMLソースをコピー(Ctrl + C)して、白紙のメモ帳に貼り付け(Ctrl + V)てください。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"><head> <meta content="text/html; charset=Shift_JIS" http-equiv="content-type"> <title></title> </head><body> <p>ようこそ、マイウェブサイトへ</p> </body></html>
Nvu の場合と同じ要領で、"<title>" と "</title>" の間に適当な文字列を入力してから、文書を保存します。
左上の「ファイル(Alt + F)」の部分を左クリックして、「名前をつけて保存(A)」を選択してください。
この HTML文書の保存場所は、先に作っておいたウェブサイトの専用フォルダを選んでください。保存する際の文書の名称は、この HTML文書をこれからできるウェブサイトのトップページにあたるウェブページとして機能させたいので "index.html"、または "index.htm" で保存します。".html" や ".htm" の部分は拡張子と呼ばれます。拡張子は、ファイルの種類を識別するためのもので、HTML文書の場合は ".html"、または ".htm" の拡張子とするのが一般的です(ただし拡張子は、ウェブサーバーの動作設定に依ります)。
作成した HTML文書を WWW上へと公開してみましょう。HTML文書をウェブページとして WWW 上に公開するには、まず WWW上にあなたのウェブサイト用のスペースを確保することと、そのスペースに HTML文書をアップロードするためのファイルを転送するソフトウェアが必要です。
インターネットでファイルを送受信する際の方式に、FTP(File Transfer Protocol)があります。FTP は、おそらくウェブサイト作成ぐらいにしか利用することがありません。この FTP の方式でファイルをアップロードするツールにFFFTPという有名なフリーソフトがあります。 リンク先へジャンプすると、FFFTP のメニューがあるので、そこからソフトウェアのダウンロードを実行し、FFFTP を入手(インストール)してください。
次に、ウェブサイトを公開するためのスペースの確保です。契約している ISP(インターネット接続業者)がマイホームページスペースといった類で無料でスペースを提供している場合は、そちらのスペースを利用すると良いでしょう。また、無料のウェブスペースを利用する場合は、Yahoo!ジオシティーズ, FC2WEB, isweb, 只今ホームページ, XREA.COM などが有名です(これらは無料サービスのためページ内に広告が表示されます)。
ここでは、作者が過去に利用したことのある只今ホームページと、現在も利用しているXREA.COMでスペースを拝借した場合の FFFTP の設定方法を紹介します。まずは、スペースを拝借するための申し込みを行ってください(※申し込みには、メールアドレスから本名、住所など私的な情報も入力する必要もあります)。
ウェブスペースの申し込みが完了すると、下記のような内容のメールが送られてきます。これはサンプルのため、「○○」の部分やパスワード等は申し込まれた内容によってそれぞれ異なるので注意してください。
また、メール以外にこれらの各情報は、サービス提供側が用意している管理モードやファイルマネージャーに接続することでも確認できます。
申し込んだウェブスペースにファイルをアップロードするには、FFFTP の「ホスト名(アドレス)(Alt + N)」、「ユーザ名(Alt + U)」、「パスワード/パスフレーズ(Alt + P)」の 3つを設定する必要があります。 ダウンロードした FFFTP をデスクトップメニューからアイコンをダブルクリックで選択して起動してください。次の手順に従って、それぞれの入力項目を埋めていきます。
新規追加(Alt + N) > 各入力項目 > メールの内容をコピー(Ctrl + C) > 貼り付け(Ctrl + V)
最初のホストの設定名(Alt + T) には、何を入力して頂いても結構です。ホスト設定名は、そのウェブスペースの名前をつけておくことで、これから複数のウェブサイトを管理する場合にそれぞれのスペースの見分けがつくようにするためです。設定が必要なのは、横にある「ホスト名(アドレス)(Alt + N)」からです。ここには、只今ホームページの場合は FTPユーザ名の「○○.client.jp」を入力し、XREA.COM の場合は FTPサーバーの「s101.xrea.com」を入力します。
続いて「ユーザ名(Alt + U)」の部分に、只今ホームページの場合はFTPユーザ名の「○○.client.jp」を入力し、XREA.COM の場合は ID(FTPユーザー名)の「○○」を入力します。どちらも「○○」の部分は、ウェブスペースを登録した際にウェブサイトのアドレスを決めたものを入力します。
「パスワード/パスフレーズ(Alt + P)」の部分には、只今ホームページの場合は、上記の FTPアクセスパスワード「aada2hv22sbrrtab34」を入力、XREA.COM の場合は、上記のパスワード「x84eGFhxafaHJIyJa」を入力します。
最後に、XREA.COM のように最初の接続時にフォルダがいくつもわかれている場合は、ホストの初期フォルダに「/public_html」を入力します。これは、FTPに接続した際に、最初からファイルをアップロードする対象のフォルダに移動することができます。忍者TOOLS の只今ホームページのようにフォルダがわけられていない場合は、初期フォルダを設定する必要はありません。また、その他のスペースでもフォルダが別れている場合は、初期フォルダの入力の可否が書かれてると思われますので、目を通しておいてください。ここまでの一連の流れをイメージで整理しておきましょう。



以上で、HTML文書を WWW上にアップロードするための準備が整いました。では、設定の完了した FFFTP に接続します。最初は、FFFTP の左側には FFFTP のフォルダが表示されます。「一つ上のフォルダへ」のフォルダマークを左クリックして、先に作成しておいたウェブサイト専用のフォルダを探してください。
専用のフォルダを見つけたら、中に入っている "index.html"、または "index.htm" 名称で保存したファイルを下記の図に従って、アップロード(転送)してみましょう。


アップロードが完了したら、WWW 上にあなたの作成した HTML文書がウェブページとなっているのかを Internet Explorer などのブラウザからアクセスして確認してみましょう。 ウェブページにアクセスするには、ブラウザにウェブページのアドレス(住所)にあたる URI(URLとも呼ばれる)を入力する必要があります。URI(URL) は、スペースを申し込んだ際の任意の URI(URL)を選択したものです。登録確認メールにもウェブサイトの URI(URL) が書かれています。無事ウェブページを表示することできれば、これであなたも Web Master(ウェブマスター)の仲間入りです。
HTML文書が作成できて、ウェブページとして公開できれば、それで終わりというわけではありません。まだ、HTML についての解説は何も始まっていません。あなたはこれからどんなウェブサイトをどんなデザイン(サイト設計)で作っていこうかなどを具体的に悩んで考えていくことになるでしょう。本格的なウェブサイトを作るためには、これからが本当の勉強となります。HTML は仕様に沿って正しく使うことで、ウェブページとしての情報的価値を最大限に高めることができるようになるなど様々なメリットが生まれます。正しい HTML のノウハウを習得するために、これからも一緒に勉強していきましょう。
http://w3g.jp/xhtml/ref/open直近の制作実績等:大阪人間科学大学 New! / 大阪薫英女子短期大学 New! / セキスイハイム みんなのお国じまん New!