|
||||
|
|
とりあえず作ってみる
|
|
|
初めに
普段パソコンを使ってお気に入りのページを見たり、Yahoo! Japan で天気を調べたり、またはショッピングをしたりと、何気なくインターネットを利用しています。では実際にそれがどのような仕組みで動作しているのか、ホームページ(ウェッブページ)を作り始める前にそう言った本当に基本的なことを覚えておきましょう。 また作るといってもどこから手を付けて、どのようにすれば良いのか分らない方向けに、基本的な手順までご紹介します。
※ インターネットと一言で括っていますが、Webサイトを作る過程で重要となる HTTP(Hyper Text Transfer Protocol)と FTP(File Transfer Protocol)について紹介します。その他のプロトコル(後述)についての説明は今回の章では省略します。 ホームページ? サイト? Webサイト? Webページ? トップページ?
上記でホームページやウェッブページ言った言葉を使用しています。 またそれ以外にも サイトと言ったり、wwwサイトと言ってみたり、それぞれが同じような意味で使用されています。しかし、本来これらは同じ意味ではありません。 例えば 「サイト」 という言葉は http://www.site-cooler.com/ や http://www.site-cooler.com/base/1.htm 等の複数ページで構成された全体の事を指します。 (下図)
![]() それに対して「ホームページ(ウェッブページ)」とは本来上図で 赤く色を変えているページのみを意味しているものです。 このページはサイトの玄関的な意味を持っていて、「トップページ」とも呼ばれます。 しかし 「ホームページを作る!!」 と言って、この赤い部分1枚だけしか作成しないなんて人はまず居ないでしょう。 大抵ホームページを作ると言えば、サイトを全体を作ると言う意味になります。 ウェッブページの作り方
まずは Windows付属の メモ帳 というソフトを使って 実際に作る手順を順を追ってご紹介します。
何はともあれ、使うソフトを起動しなければ始まりません。 下図のように、「スタートメニュー」→「プログラム」→「アクセサリ」→「メモ帳」をクリックしてアプリケーションを起動します。 ご使用の OSのよって若干画面が異なるかもしれませんが大体は同じです。(下図は Windows 2000) ![]() メモ帳が起動したら以下のように入力して見てください。 この入力している内容が HTMLと呼ばれるもので、<> で囲っている語句をタグと呼びます。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>MY HOME PAGE</title> </head> <body> <h1>MY HOME PAGE</h1> <p> これは私の作った初めてのウェッブページです。 </p> </body> </html> 上のように入力していただいたら、「ファイル」→「名前を付けて保存」を選択してください。作成したファイルを保存します。 分りやすくするためにファイルの保存場所はデスクトップにします。「保存する場所」がデスクトップになっていない場合は、プルダウンからデスクトップを選択してください。 今回は保存するファイル名を 「hajimete.html」としてみます。 ![]() ※何故拡張子を「.html」にするのか説明が足らないとの以下のようなご指摘を受けましたので追記です。
text/htmlで送られればHTML文書です。
MIMEタイプさえ間違わなければ、拡張子は.htmでも.htmlでも.xhtmlでも.cgiでも「可」です。
確かにご指摘の通りです。HTMLファイルは拡張子が「.html」でなくてはいけないという規則はありませんが、今回は最も一般的に使用されている「.html」を拡張子に指定しています。 ※説明が正しくないと指摘がありましたので、もう一つ補足になります。 HTMLは見栄え定義するマークアップ言語ではありません。あくまで HTMLは文書構造を定義するマークアップ言語になります。どのように表示するという見栄えは スタイルシートで記述します。 しかし恥ずかしながら当サイトも HTMLで見栄えを定義している部分が多いのも事実です。。。 既存コンテンツについては徐々に修正して正しいHTMLを紹介いたします。 ここまでくればメモ帳を終了していただいて構いません。(終了するにはメモ帳右上の「×」をクリックします) デスクトップには以下のように作った作成したファイルが出来たかと思います。このファイルをHTMLファイルと呼びます。 (意外と簡単でしたね) ![]() 最後にこのファイルを ftp でサーバへ転送するだけです。非常に簡単ですがこれでウェブページの作成は完了です。ブラウザへURLを入力してみてください、あなたが作ったウェブページが表示されるはずです。 以上が簡単ですがウェブページを作成する流れになります。 HTMLやスタイルシートを覚えることで、もっともっとスタイリッシュなページを作ることが出来るようになります。 |