ゼロから始めるＨＰ作り１

　ホームページ作りの勉強の仕方には幾つかの手法がありますが、ここではとにかく作りながら勉強してゆく という方法でホームページ作りを書いてゆきます。
 
１． ホームページの仕組みについて
　まずホームページの仕組みについて、最低限憶えておいてほしいことを説明します。

　ホームページは、インターネットに接続された Web サーバーにあるファイルを、閲覧者がブラウザソフトを使って インターネットに接続されたパソコン(PC)を使って観ることが出来ます。(右図)　 従って、一般にホームページ作りは次のような手順になります。

1-1．ホームページの作成者は、まず自分のパソコン上にホームページの原稿ファイルを作ります。 (ファイル等名に使える文字は、基本的に半角英数字のみです)

1-2．次にこのファイルを、ホームページを公開するサーバーの指定フォルダに、「 ファイル転送ソフト」を使って、「アップロード」します。

1-3．閲覧者がブラウザソフトを使って、Web サーバーのファイルアドレス(URL)を指定すると、Web サーバーに転送されているファイルの内容が閲覧者のPCに知らされ、ファイルの内容を観ることが出来ます。
　参考: HP作りの流れ　HP作りの準備　 HPのアップロード
 
２． 最も初歩的なホームページを作ってみる (番外編)
　 では自分のパソコン上にホームページを作ってみましょう。

　 まず「メモ帳 」のような「テキストエディタ 」を使って、左下のようなテキストファイルを作り、ファイル名を 「test.html」として保存してブラウザを起動して、「ファイル」→「開く」→「参照」でこのファイルを指定してみると、 右下のように見えます。

　 ＊「メモ帳」は、Windows ディスクトップ左下の[スタート]から→[プログラム]→[アクセサリ]→[メモ帳]で開きます。
　 ＊ファイル名は、８文字以内の半角英数字で付けます。
テキストファイル ブラウザの表示画面
　これでもホームページ？
　
　
　
　C:\My Documents\test.html - Microsoft････
File　Edit　 View　fAvorite　Tool　Help　
　これでもホームページ？
　
　これでも一見ホームページらしく見えていますね。とにかく、テキストファイルを「 ***.html」のように拡張子を .html(または htm )として保存すると、ホームページファイル らしくなります。　これをサーバーにアップロード すれば、一応まともなホームページとなります。 ちなみに、日本最初のホームページ は、このようなものです。

　 調子に乗って、テキストに改行を入れて test.html を修正保存みましょう。
テキストファイル ブラウザの表示画面
　これでも
　ホームページ？
　
　
　C:\My Documents\test.html - Microsoft････
File　Edit　 View　fAvorite　Tool　Help　
　これでもホームページ？
　
　あれれ!!　テキストファイルでは改行したのに、ブラウザで見ると改行されませんね？
　これはブラウザに改行するように、記述されていないためです。

　改行するためには、<br> と書いて改行指示をする必要があります。
　この「<br>」のような記述を「タグ」と呼び、 ブラウザに色々な指示をするときに使います。 実際に修正してみましょう。
テキストファイル ブラウザの表示画面
　これでも<br>ホームページ？
　
　
　
　C:\My Documents\test.html - Microsoft････
File　Edit　 View　fAvorite　Tool　Help　
　これでも
　ホームページ？
　パチパチ!!　テキストファイルで改行するのではなく、タグで<br> を書いたら、ブラウザでは改行されましたね!!

　ブラウザに思うように表示させるには、単なるテキスト文では不十分で、「タグ」等の 記述ルールに従わないとないといけないのです。次にこのタグを等のルールについて勉強しましょう。
 
３． ホームページの基本形
では、ホームページの基本形はどのようにすればよいのでしょうか。それを次に説明します。

　 各ページの基本型は次のような構造にします。それを test.html というように .html 拡張子を付けて保存します。

HTML文書

ヘッダ部


本文
┬─
│┌
─┤
│└
│┌
─┤
│└
└─
<html>
<head>
<title>ページのタイトル</title>
</head>
<body>
　本文　(ページの表示部分)
</body>
</html>


　[ヘッダ部には、ページ表示のための情報等を記述します]


　[本文には、実際に表示させる内容を記述します]

[HTMLページについて、基本的な事項を少し説明をします]
  • HTML（Hyper Text Markup Language）ページは<html>で始まり</html>で終わります。
  • <html>〜</html>の間には、<head>〜</head>と<body>〜</body>を書きます。
  • <head>〜</head>の部分をヘッダ部と呼びます。ヘッダ部にはタイトルなどを記述します。
  • <title>〜</title>でタイトルを書きます。タイトルはブラウザのタイトルバーに 表示されるだけではなく、「お気に入り」や「履歴」に表示されたり、検索エンジンの結果として表示されたりしますので、 必ず記述するようにします。
  • <body>〜</body>の部分が本文です。この部分でブラウザのウィンドウ枠に表示される内容を記述します。
  • タグのほとんどは、<b>〜</b>のように開始タグと終了タグで囲みます。開始タグのタグ名に スラッシュ（/）をつけたものが終了タグです。たまに、<br>のような単独タグもあります。
  • タグ名は必ず半角文字で記述します。また"<"の後に空白があってはなりません。
    【正】 <HTML> <html>　　【誤】 ＜ＨＴＭＬ＞ ←全角文字はだめ　 <　HTML> ←「<」の後に空白を入れてはだめ
これらを踏まえて、実際にHTMLページを書いてみましょう。
テキストファイル ブラウザの表示画面
<html>
<head>
<title>ホームページの練習</title>
</head>
<body>
初めてのホームページです。
</body>
</html>
　やっとホームページらしいページが出来ました。
　本文(2)はあまり変わりないのですが、 ブラウザの左上にタイトル(1)が表示されました。

　次へ
　 Top>  ＨＰ作りTop>  HPの仕組>  基本タグ/ 作成ﾌﾛｰ‖ ゼロ１/ ゼロ２/ ゼロ３/ ゼロ４‖ HTMLの初歩/ 演習‖ 手軽に作る‖