文字で構成する

つまらないかもしれないけれど

色もついていないホームページは、つまらないかもしれないけれど、ものには順序がある。まずページの内容を作ってから一気に色をつける方法でやってみることにする。

ホームページにはいろいろなやり方があるが、いくつかのパターンを学んで、後で組み合わせて自由な構成に発展させることにする。

大見出し、小見出し

この教科書のように最初に大見出しをおき、その後は小見出しと説明の繰り返しをするような構成をつくります。

以下のようなページを作ってみてください。ただし、文章の内容は各自が感じたまま考えたままを書いてください。ファイル名は joho.html にします。保存場所は例によってデスクトップにショートカットをつくった joelのpublic です。

<html>

<head>
<title>情報で学んだこと</title>
</head>

<body>
<h1>情報で学んだこと</h1>
<h2>中学校で</h2>
<p>少しだけワープロの練習をしたり、マウスで
絵を描いたりした。キッドピックスとかいうソフト
だったと思う。</p>
<h2>Windowsソフトウェアの使い方</h2>
<p>メモ帳とペイント、ワードパッドで起動の仕方、
保存の仕方を学んだ。文字の入力も同時に練習した
が、特に記号の入力や全角と半角の区別などに苦し
んだ。カットアンドペーストの手法もここで学んだ。
</p>
・・・・・
</body>

</html>

大見出しは<h1>、小見出しは<h2>で挟みます。hの後の数字は見出しのレベルを表し、数字が小さいほど高いレベルの見出しとなります。数字は6まで(h1からh6まで)用意されているが全部使う必要はありません。これは文字を大きくするタグではありません。あくまで見出しの指定です。見出しの見栄えを指示しなければブラウザは大きく太い字で表示しますが、これはあくまで結果です。単に文字を大きくするのであれば他のやり方があります。

タグに使用する文字は必ず半角にします。大文字と小文字の区別はなく、混ぜて使ってもかまいません。<H1>も<h1>も同じです。ただし、現在勉強しているHTMLの発展形であるXHTMLでは小文字と決められているので小文字の習慣にしておいた方がいいでしょう。

例によって新規作成をするとタグに色が付きませんから、次のうちのどれかで色が付くようにする方が編集が楽でしょう。

<html>や<head>などのいつも同じタグは、いちいち書かずにコピーすればよのです。各自工夫してください。

保存してブラウザで見る

public_html に、joho.html ができたら、デスクトップのマイドキュメントをひらき、public_html を開いて、「joho.html」をダブルクリックして、ホームページとして出来上がりを見てください。

上の画像をクリックすると作例の全体を見ることができます。


聖愛高等学校
http://www.seiai.ed.jp/