HTML入門 (改定) 2015.2 by maznaga
ホームペーを作るにはHTMLという記述言語を知る必要があります。というより”ありました”と過去形で言った方が良いかもしれません。そんなものを知らなくてもGoogleやYahooが提供するブログは作れるし、WordPressならもっと少しカッコよく作れるし、Twitterでいいよという方もおられるでしょう。Youtubeなど動画をアップするサイトもあります。ホームページなど作らなくても誰でもが簡単に情報発信ができるようになってきました。しかしある程度まとまった情報や編集した情報を発信するためには個人でもホームページ作りは知っておいた方が便利です。特に個人の場合はクラウドという大容量のサーバーがGoogleやMSNで無料でも使えるようになり、通信業者のサーバの容量制限にこだわらなくてもよくなってきました。さらにHTMLの記述言語もそれを見るブラウザも進化を続けているので、単に文章と画像を超えた情報発信が容易になってきました。
私の場合は趣味の一つが囲碁ですのでホームページの掲示板機能を利用した碁会所を作っています。この碁会所に来れば相手を見つけて対局することができます。また仲間と一緒に活動している料理教室では教室で作った料理のレシピやアルバムを作っています。
掲示板機能やその応用には若干プログラムの知識も必要ですが、よそのホームページで見つけたソフトをコピーし、 それをベースに作り上げています。私のホームページはほとんどがこのような手法の積み上げで作ったものです。
最初のホームページも、最初の掲示板も、こんなページなら自分でもつくれるかなと思った所からコピーし、それを手本にして 書き換えて作ってきました。コピーの過程で中身を覗き込むことができ、作り方を理解することができます。
ここでも中身を覗きこみながら簡単なホームページを作ってみましょう。
1.ホームページの基本構造
手始めにこのページを使ってホームページの構造を調べます。
その前にメニューから「ファイルー>名前をつけて保存」を選びデスクトップにコピーを作っておきます。続いてWindowsのプログラムメニューから「アクセサリー」=>「メモ帳」を立ち上げ、コピーしたファイルを開いたメモ帳にドラッグします。するとメモ帳に記号で書かれたテキストが現れます。実際このテキストが解釈されてホームページ
として見えてくる仕掛けです。あるいはブラウザがこのテキストを解読して見やすく表しているのです。このテキストファイルは絵や 写真も文字として扱っています。絵や写真などの場所が書かれてあればブラウザーがそこから絵や写真を取って来て表示します。
メモ帳のテキストファイルの中から<IMG src=画像名>と書かれてある所(<IMG src="bodogo.gif"...>と<IMG
src="Wien.jpg"...>)を見つけましょう。そこで文字の代わりに夫々指定されたの画像が表示されます。別の画像を表示させる場合には<IMG src="">のタグにその画像のファイル名を記述します。メモ帳で内容を書き換えたときはそれをデスクトップのコピーと置き換えましょう。
メモ帳のファイルをセーブするときファイルの拡張子が"xxx.txt"ではなく"xxx.htm"にする必要がありますが「上書き保存」をすれば拡張子
はhtmのまま保存されます。続いてこの名前のファイルをクリックして見ましょう。ブラウザが動いて画像が入れ替わったページが出て来るはずです。
もう少し開いたテキストファイルの中身を覗いて見ましょう。このホームページの構造は次のような記述になってい
ることが分かります。この構造を正規表現と
いいカッコの中の記号をタグといいます。<BODY>と</BODY>の間がページとして表示
されます。また<BR>は改行を表します。<BR>がないとブラウザーはテキストの改行を行い
ません。この<HTML>から</HTML>までをメモ帳に書いてtest.htmと名前をつ
けて保存してそのファイルをクリックして下さい。それで小さなホームページが出来上がります。
<HTML>
<HEAD><TITEL>yyyyy</TITLE></HEAD>
<BODY>
XXXXXXXXXXテキストXXXXXXX
<IMG src=ファイル名>
XXXXXXXXXXテキストXXXXXXX
</BODY>
</HTML>