htmlとは？：高校生のためのホームページづくり（男の子用）

誰でも解ると思うけどまず基礎を固めますね。地震に強い家を造ろうとするならば基礎と柱を強靭に造ることがとても大切です。基礎や柱をいい加減にして外観にこだわってもしかたがないですね。実はホームページもまったく同じです。市販のホームページビルダーの解説本なんかを読んでも表面的な操作方法を書いてあるだけで基礎とは何か柱とは何かについて触れられていません。そんな本を読んでまともなホームページは絶対できません。保証します。→経験者は語る。。。^^;

基礎と柱って何ですか？

HTMLのHTはハイパーテキストつまり文字だけではない音や映像も扱えるということを意味します。Mはマークアップ。そのまま日本語に訳すと「構造化」というむづかし～い言葉になります。ワープロの文書でもホームページでもページにはページを構成するいろんな部品（要素）があります。前のページの例だと「多摩高生のためのホームページづくり（男の子用）」が見出し１、「目次」や「１．ホームページって何かな？」が見出し２、「カタカナ英語って知ってる？」や「元の意味は？」が見出し３になります。小説でも第１部、第１章、第１節なんてあるでしょう？あれと同じです。必ず見出し１から始まります。見出し１の次は必ず見だし２を選びます。よくＨＴＭＬの解説本に「見出し１から６は文字の大きさの違い」と説明している本がありますがとんでもない間違いです。これこそ基礎中の基礎です。次に文章の塊である段落があります。上の例の場合はその塊を見出し３で表しています。こういう見出しもつけず１枚のページを文字で埋めつくしたらどうなると思いますか？もうまったく読む気がしないですよ。試しにやってみました。こんなの読む気がしないよね？タイトルや見出しの無いページは家で言うと表札のない家のようなものです。

柱は？

柱にあたるものは目次のところにある「項目」、引用文に適用する「引用」、ページ内の区分けに使う「水平線」、署名と作成日時を書く「アドレス」、他のページへ飛ぶための「ハイパーリンク」くらいですので「言語」なんておおげさに言っても１０くらい単語を覚えれば良いだけです。

外観ってどうでも良いの？

家の場合で言うと仮に外壁を塗るペンキをぬらなくても内装の壁に壁紙をはらなくても住めないことはありません。基礎にお金をかけずに壁紙に凝ってもしかたがありません。ホームページもまったく同じなのです。この文章の中に赤いところがあります。（そう見えない人もいるかもしれません。）個々は単に赤くしているのではなくて「強調」を意味しています。「強調」を示すために赤を採用しているのであって聴覚ブラウザの場合少し強く読まれます。自分のパソコンだけで色を変えたり、字の大きさを変えたり（変えるだけならいいのですが固定にしてしまったらどうしようもないですよ。）、字体を変えることに時間を注いでもまともなホームページにはなりません。すでに述べましたがワープロとはまったく違うのです。

ネット上には多くのデザインのかっこいいページがあります。しかしそれらのソースを見ますと案外、文法的にはデタラメなものが多いのが事実です。インターネット・エクスプローラで見た場合はかっこよくても他の（例えば聴覚ブラウザ)で聞いた場合は何のことやら解らない可能性が充分あります。アメリカではおよそ公的なホームページで聴覚ブラウザで認識できないページは非難の対象となります。それだけ弱者への配慮がされています。ところが日本の場合は基礎も柱もないペラペラのページが多いのが事実です。それだけウェブという文化が正確に伝わっていないからだと思います。

配色の大切さ

外観で一番大切なのは配色だと思います。特にホームページの場合はディスプレーで字を読むということを考えると読みやすく、疲れにくいことがとても大切です。ホームページというものはいろんな人が読むものなので字の大きさを固定してしまうなどというのはとんでもないことです。また字の色と背景の色に同系色を使うととても読みにくくなります。せっかくスタイルシートを使ってデザインしているにも関わらずかえって読みにくくなっているページがけっこうあります。また色に関してはウィンドウズとマックでは見え方が違うということで「ウェブセーフカラー」が定められています。大切なのは自分の感覚で色を選定しないということがとても大事です。ネット上にはセンスの良い人が配色について選定したページがありますのでそういうものから選ぶのが万人受けするページを作る上でとても大切です。

４.HTMLってなあに？

ホームページ（ウェブページ）のための世界共通語

HTMLの基本を日本語で書いてみます。

※宣言文　今からHTML4.01通常版を使ってウェブページを書きます！
< html>
< 頭部>
< タイトル> 高校生のためのホームページづくり< /タイトル>
< /頭部>
< 本体>
< 見出し１>高校生のためのホームページづくり< /見出し１>
< 見出し２> １．ホームページって何かな？< /見出し２>
< 見出し３> カタカナ英語って知ってる？< /見出し３>
< 段落> 日本では元は英語の「カタカナ英語」がいっぱい使われているよね。～中略～野球の「ホームベース」と同じ意味なのです。
< /段落>
< 水平線>
< 署名> Henrry Oates< /署名>
< /本体>
< /html>

・・とまあこんな感じです。最初は< html> で始まって< /html> で終わっています。その中に頭部と本体があるのです。日本語で書けば簡単でしょう？それぞれの要素の終わりには< /見出し１> のようにくくってやります。ちなみにホームページのソースを見るにはインターネット・エクスプローラの場合だと「表示」→「ソース」で見ることができます。

HTMLの歴史と現状

最初にHTMLが生まれたのは１９９３年のことです。HTMLの基準を作るW3Cという世界的な組織があります。組織といってもいろんな基本ソフトを作っているソフトメーカーやいろんなブラウザを作っているソフトメーカーが参画して世界標準規格を決めているのです。生まれて６年目に今の標準にあたるHTML4.01が決められました。ここでの大事なことはHTMLでは上のような基本的な基礎や柱を示し、外観はスタイルシート（後で簡単に説明します。）で設定しようという取り決めがされたのです。ちなみにこのページもスタイルシートを使って見栄えを付けています。スタイルシートのおかげで男の子用とか女の子用なんてお遊びが簡単にできるのです。ちなみにこのページからスタイルシートでの見栄え指定をはずすしたページを見てください。どうでしたか？かっこよくないでしょう？それでも一応、見出し１とか段落とか項目だとかが指定されていますからページの構造はきちんとできているのです。そういう意味ではなんの構造もないさっきの例よりはずっとまともなのですよ。どこがどう違うかじっくり見てね。

ウェブページ（htmlファイル）を作るのに必要なもの

テキスト・エディタ～メモ帳でもできなくはないですが編集機能がきわめてお粗末なので、無料のエディタをダウンロードしましょう！エディタを使うと色を指定できたり、検索や置換ができたり何かと便利です。ソースを編集する際は同じスペースでも半角スペースと全角スペースでは全く違います。半角スペースはいくつ挿入しても影響はありませんが、全角の場合は挿入した数に応じてスペースが挿入されます。エディタにはスペースを表示する機能がたいていありますのでトラブルを未然に防ぐことができます。インターネット上から無料でダウンロードできます。TeraPadやCoolMintなどがお奨めです。メモ帳トラッパーを使えばソースを表示した時にいつも使っているエディタを起動できるようになります。
FTPソフト～出来たページをサーバー（ホームページを置くところ）にコピー（アップロードと言います）するときに使います。
FFFTPが定評があって使い易いよ！
HTML辞典～なかなか良いのがないので注意しないといけない。ウェブ上ではおすすめのページがあるので解ってから買った方が良い。
ウェブサーバー～作ったページを置くところ。インターネット契約をすれば自動的に提供される。ただし自前の掲示板などのプログラムは設置できない場合が多い。
ホームページ作成ソフト～HTMLの基本を解ってから買った方が良い。スタイルシートを作成するときや表を挿入するときは便利である。

私はDream WeaverというプロのWebデザイナーによく使われているホームページ作成ソフトを使っていますが使っていて便利だと思う点を挙げてみます。

ソース画面からタグを打とうとするとポップアップメニューが開きタグを選べ、選ぶと終了タグまで自動的に入力されること。終了タグを選択してから挿入位置までドラッグすればOK!
編集画面で<や>の入力ができること。（ソースでは<や>と入力しないといけない。）
スタイルシートの設定が簡単にできること。
表（テーブル）の作成が容易にできること。
head内のmeta情報の入力も簡単にできること。
サイト内のリンクチェックなどもほぼ自動的に行える。

その他慣れて来るに従って必要なものが出て来るでしょうが基本的なソフトは全て無料のものがインターネット上で入手できます。VECTORには数多くの無料のソフトがあります。無料とは言っても市販のソフトと遜色のないものが多いのです。

高校生のためのホームページづくり（男の子用）

３．外観（壁や屋根）よりもまず基礎と柱？

家を造る場合は？