|
ホームページ(HP)って、どんなものか知ってましたか? インターネット・ネットワークの話をするつもりはありませんが、 HPとは、ある場所に保管されているファイルを、電話回線〜ネット網を通じ、 自分のパソコン上から、保管先のファイル位置を指定して(URL指定) そのファイルを自分のパソコン内に移動させて(HDD内にダウンロード) それを表示させているだけなのです。 (URL指定・ダウンロード・表示するソフトをWWWブラウザと言い、ネットスケープやインターネットエクスプローラーが有名) 結局HPそのものは、自分のパソコンに保存されている文書等のファイルと同様 どこかの場所のコンピュータに保存されているファイル群なのです。 |
■HPのきまりごと(ファイル形式)
|
インターネット・WWWブラウザでは、表示出来るファイルの種類が決められています。 よってHPを作るに当たっては、ある基準に従って、誰でも見ることが出来る形式でHPファイルを作成しなければなりません。 それでは、初歩的なファイル形式からご紹介します。 txt jpg(jpeg) gif 聞いた事ありますか? これらは拡張子と呼ばれ、そのファイルがどんな形式か?を示すものです。 まず、txt(テキスト)形式ですが、これは文書等の保存形式で、メモ帳・ワードパット等で保存される形式がそれです。(マックの方はSimple Text) HPのファイルは、このテキスト形式により、ある編集用言語を用い記述作成されたもので、それをHTMLと言います。(Hyper Text Markup Languageの略) 次にjpeg、gif形式ですがこれはそれぞれ絵や写真などのイメージ形式で、写真等の表示を行う場合、これらの形式で保存されたファイルを準備しなければなりません。 jpegは写真イメージの圧縮用形式(フルカラーに近い)(Joint Photographic Experts Group) gifは、最も普及している標準形式(256色)(Graphics Interchage Format) |
■HTMLを作る(メモ帳かワードパットで、マックの方はSimple Text)
HTMLとは言っても、ワープロ等で作成する文章と何も変わりはありません。
実際に、メモ帳・ワードパット等で作成を行います。
ただし、先にも述べた通り、ある編集用言語を用いる必要があり、そこでは < > の記号で囲まれたタグと呼ばれる記述を用いて文章等の構造を指定します。
|
■実践の前に! これより先の文章には、マウス・コピー・ペースト(貼り付け)・ドラックアンドドロップ・ フォルダー・保存する、等パソコンの標準かつ初歩的用語を多用いたします。 それらの説明は、省かせて頂きますのでご了承ください。 |
■HTMLの実践(これからが面白い!)
まず、アプリケーションを2つ起動する必要があります。
起動するのは、WWWブラウザとメモ帳等のソフトです。(準備はいいですか?)
(電話回線はオフライン状態で結構です)
下記のリンクをクリックし、表示されたサンプル文章を、マウスでなぞり(文字を選択)、コピーして、メモ帳の新規のページにペーストして下さい。
(マックユーザーも同様にコピーし、Simple Text空白ページにペースト)
HTMLサンプル-01
■サンプルの保存と表示!
ワンポイント!
HTMLサンプル-01の表示
サンプルの保存
さて、メモ帳にペーストした文章をデスクトップ上に保存しましょう。
保存ファイル名は、top とでもして下さい。(以降ファイル名は英数小文字半角で)
次に、デスクトップ上に保存されたファイルの拡張子を変更します。
方法は、デスクトップ上で直接、保存したファイルの名前を変更して下さい。
ファイルの名称は、top.html と変更下さい。(後半に.htmlを加える)
メモ帳などで作成したファイルはtop.txtなどと、後半部分に「.txt」と言う
拡張子が付きます。(拡張子の表示がされていないのはパソコンの設定)
この部分を .html とすると、初めてブラウザが記述された内容をHTML形式で実行します。
いよいよ、デスクトップ上の top.html をWWWブラウザで表示させましょう。
デスクトップ上のファイルを直接、ブラウザ画面上にドラックアンドドロップするか、
WWWブラウザのファイルから開く等で、目的のファイルを指定して表示させて下さい。
■サンプルファイルの解説(タグの説明)
<HTML>は、HTML文書であることを示す。(<>記号等のタグは英字で!)
</HTML>は、/(スラッシュ記号)で終了を示すので、HTML文書の終わりを示します。
まとめると、<HTML></HTML>は、「ここから、ここまではHTML文書である」と言う意味となります。
以降、先頭タグのみの説明とします。
<TITLE>は、お気に入り・ブックマークに保存されるタイトルを示す。
<CENTER>は、センター揃え(センタリング)。
<FONT>は、フォントの指定で、多々属性がありますが今回はサイズを指定したもの。(SIZE="5")
<BR>は、改行(終了タグは不要)
<HR>は、罫線(幅や太さを示す属性もある)
<P>は、改行して一行あける指令。(終了タグは不要)
■まとめ
HPは、このようにHTMLで記述された簡単なプログラムです。
一番複雑なのは・・・ここまでの内容を理解すること・・
後は、応用とデザイン的感覚!
複雑なことは何もありません。
友達に自分の成果を見せれるまでがんばりましょう!