ホームページ作成の部屋−簡単なWebページを作ってみる


1.すごく簡単なWebページを作る
2.少し実用的なページを作る
3.リンクについて学ぶためのページを作る


 1. すごく簡単なWebページを作る
 WebページHTML で記述します。最初に HTML や,その中で使われるタグについて学ぶというのも一つの道ですが,ここでは実際に Webページ を作りながら解説していくことにします。
 それではまず非常に簡単な Webページ を作ってみましょう。
(1)いつも使用しているテキストエディタを起動します。
もしまだ常用のエディタがない場合はデスクトップ左下の「スタート」をクリック→「プログラム」→「アクセサリ」から「ワードパッド」を選んでください。
(2)次の「練習−1」の内容を入力してください。
・日本語以外の部分は必ず半角文字にしてください。
・もちろん内容をコピペしてもよいです。
エディタに貼り付けると,各行の前にたくさんの半角スペースが付くことがあります。エディタの置換機能等を用いで削除してください。
練習−1
<html>
<head>
<title>ホームページ作成練習1</title>
</head>
<body>
初めて作ったホームページです。
</body>
</html>


(2)入力し終わったら次のようにしてセーブ(保存)します。
・エディタのツールバーから「保存」を選択してください。
・適当なフォルダ(ディレクトリ)を作ってください。たとえば c:\data\html
・ファイルの種類は
  「HTML形式」
  「すべてのファイル」
  「テキストファイル」
  「テキストドキュメント」
  「テキストドキュメント MS-DOS形式」
 から選んでください。
・ファイル名は半角英数字&記号を使用して,たとえば
  web-001.htm
  というよう付けます。
拡張子.html または .htm とします。
ファイル名の大文字と小文字は別の文字となります。小文字にするのが一般的です。
・[保存]ボタンを押してください。
「ワードパッド」を使っている場合は[保存]ボタンを押した後に「書式情報が失われます」という警告が表示されますが,かまわずに[はい]を選択してください。

拡張子.html または .htm でセーブした時,エディタによっては .html.txt などという変な拡張子が付いてしまうことがあります。その時はファイラの「名前の変更」機能を使って,正しい拡張子に変えてください。


(3)作ったファイルをファイラに表示させ,ダブルクリックしてください。
インターネット・ブラウザが起動して,画面上に
初めて作ったホームページです。
  と表示されるはずです。またタイトルバーには
「ホームページ作成練習1」
が表示されていることを確認してください。

 解説
 「練習−1」のソースを見てください。そこには <> に囲まれた文字と,囲まれていない文字があることに気が付くと思います。< から >までをタグと言って,これが HTML文書を特徴づけています。タグWebページをコントロールする働きを持っているのです。
 「練習−1」に登場するタグは,開始タグ終了タグ(閉じタグ)が一対一に対応しています。たとえば <html> は開始タグで,</html> は終了タグで,終了タグ内の文字の先頭には / (スラッシュ)が付いています。開始タグから終了タグまでは,ひとつのブロックを形成していて,これを要素(element)と言います。(参考⇒タグの構造と名称
 それでは,ここで用いられている 4 種類のタグについて説明しましょう。
(1)<html>
 <html> と </html> に囲まれた部分がHTML文書であることをブラウザに知らせる働きをします。
(2)<head>
 <head> と </headl> に囲まれた部分がヘッダであることを表します。ヘッダにはWebページ全体に関する情報を書きます。
(3)<title>
 <title> と </title> に囲まれた部分がWebページのタイトルであることを表します。タイトルはブラウザタイトルバーに表示されるとともに,お気に入りブックマークに登録したときのWebページのタイトルにもなります。
(4)<body>
 <body> と </body> に囲まれた範囲が,実際にブラウザに表示されるところです。

 以上 4 種類のタグは,どんなWebページを作るときにも必ず用いられます。


  2. 少し実用的なWebページを作る
 テキストエディタを起動して,次の「練習−2」を入力してください。入力したら適当な名前を付けて(たとえば web-002.htm とします。日本字は使用しないようにしてください。拡張子は .html または .htm とします)セーブし,ブラウザで見てください。
 dscn2881.jpgdscn3629.jpgという画像ファイルは,次のようにして取得できます。
上の「画像ファイル名をクリック」→「ブラウザ上に表示された画像の上でマウスの右ボタンをクリック」→「画像を名前を付けて保存」→「練習−2」の文書と同じフォルダに保存する。

練習−2
<html>
<head>
  <title>庭の花</title>
</head>

<body bgcolor="#ffffcc">

<center>
<h1><font color="#cc6666">庭の花</font></h1>
<h3>ミセス・ハーバートスティーブンス</h3>
<img src="dscn3629.jpg" width="512" height="384"
alt="ミセス・ハーバートスティーブンス">
</center>

<p>朝日を浴びて誇らしげに咲いている<b>ミセス・ハーバート
スティーブンス</b>です。<br>
近づくと,とても甘い香りが漂ってきます。</p>
      <p>一昨年は5月9日,昨年は4月22日だった初咲きが,


      今年は 4月        14日でした。<br>
      <i>地球がだんだん暑くなるようで心配です。</i></p>
<br>
<br>
<center>
<h3><a name="xrose">クリスマスローズ</a></h3>
<img src="dscn2881.jpg" width="512" height="384"
alt="クリスマスローズ">
</center>

<p>玄関近くに咲いた<b>クリスマスローズ</b>です。<br>
クリスマスの頃に咲くのかと思っていましたが,
2月になって咲き始めました。これは春咲き種で,
2月から5月にかけて咲き続けるとのことです。<br>
2月27日に撮影しました。</p>

</body>
</html>


「練習−2」をブラウザの新しいウィンドウに表示させる


 解説
 新しく登場したタグや,練習−1 にはなかった機能について説明します。
(1)<body bgcolor="#ffffcc">
 bgcolorは背景の色を指定する属性です。body要素名といいます。
 "#ffffcc" は色を表す属性の値です。このように色は,#に続いて赤・緑・青の順に2桁の16進数で指定します。最大は FF で最小は 00 です。ここで使用している ffffcc は赤と緑が強く,青が少し弱いので,淡い黄色になります。
参考⇒♪色見本(カラーチャート)
 値は "1234" または '1234' というように引用符で囲ってください。
(ただし値にアルファベット・数字・ハイフン・ピリオド以外が含まれていないときは,囲わなくてもエラーにはなりません。)
 要素名属性は大文字でも小文字でもかまいません。
(「ホームページ作成の部屋」では要素名,属性,値を小文字で表記するようにしました。)
(2)<center>
 文章や画像を画面左右の中央に表示させるためのタグです。
 デフォルトでは画面左側から詰めて表示します。ですからこのタグが終了した後にある文章は画面の左側から始まっています。
(3)<h1><h3>
 このタグは見出しを書くときに使用します。文字は太字で表示されます。<H1>から<H6>までの6種類があって,数字が小さいほど大きな文字になります
(4)<font>
 文字の大きさや色などを指定します。color は色を指定する属性です。
(5)<img>
 画像を表示させるタグです。このタグには終了タグがありません。ほとんどの場合 <img src=> というように src を伴います。src の値は画像のファイル名とします。とりあえず画像ファイルは HTML ファイルと同じフォルダに入れておいてください。
 widthheight は,それぞれ画像の幅と高さで,値はピクセルまたはウィンドウの大きさに対する割合で示します。割合のときは 50% というようにパーセント記号を付けます。
 alt は画像の代わりになる言葉を指定する属性です。画像が表示できないWebブラウザや画像の表示を OFF にしているブラウザのために,言葉を書いておくことになっています。画像をロードしている間や,画像をロードできなかったときにも,指定した言葉が表示されます。
 画像にマウスカーソルを乗せると,altで指定した言葉がツールチップに現れます。
(6)<p>
 段落を設定します。具体的には,前の段落との間に 1 行分の空白ができます。
(7)<b>
 太字(ボールド)で表示させるタグです。
(8)<br>
 改行させるタグです。HTML文書で文章を改行させても,ブラウザ上では改行しないので,このタグが必要になります。このタグにも終了タグがありません
 HTML文書では,「…初咲きが,」のところで改行し,さらに2行分の空白がありますが,ブラウザ上では「…初咲きが,」と「今年は…」が続いていることがわかります。
(9)<i>
 斜体(イタリック)で表示させるタグです。
(10)<a name="xrose">
 リンク関係のタグです。説明は次の「3. リンクについて学ぶためのページを作る」という節にあります。

 半角スペースについて
 HTML文書を見ると,「<p>一昨年は…」から「…です。</i></p>」の段落の部分は,だいぶ右に寄っています。前の方に 6 つも半角スペースが入っているためです。ところがブラウザ上の画面を見ると,半角スペースの影響がほとんどないこと分かります。
 HTML文書の「今月は4月14日でした。」のところを見てください。「は」と「4」の間に半角スペースが入っていますが,ブラウザ上の画面でもスペースが入っていることがわかります。しかし「月」と「1」の間には半角スペースが 8 個も入れてあるにもかかわらず,ブラウザ上では 1 つ分のスペースが入っているだけです。
 HTML文書における半角スペースの扱われ方は次のようになっています。
(1)行の先頭からタグまでにある半角スペースは無視されます。
(2)半角スペースは,何個続いていても 1 つとして扱われます。
 複雑な構造のHTML文書を作るときに,このことを利用してインデントを付けると,見やすくなります。


  3. リンクについて学ぶためのページを作る
 テキストエディタを起動して,次の「練習−3」を入力してください。入力したら適当な名前を付けて(たとえば web-003.htm)セーブし,ブラウザで見てください。
次の3つの画像ファイル
  • wakab.jpg
  • nit2tv.jpg
  • nit2tvs.jpg
は,ソースの後にある「練習−3」をブラウザに表示させるをクリックして,「練習−2」のときと同じ方法で得ることができます。

練習−3
<html>
<head>
  <title>リンクの練習</title>
</head>

<body bgcolor="#ccffcc">

<center>
<h1><font color="#226600">リンクの練習</font></h1>
</center>
<br>
<br>
<br>
<br>
<h3>リンクについて学びます</h3>
<br>
<br>
「ホームページ作成の部屋」で最初に作ったページは<br>
<a href="web-001.htm">ホームページ作成練習1</a>でした。<br>
味気ないページでしたね。<br>
<br>
<br>
その次に作ったのは…<br>
<br>
暖かさにさそわれて,<br>
咲き始めた<a href="web-002.htm">庭の花</a>でした。<br>
<br>
<br>
<br>
<br>
冬の間は硬かった木の芽は<br>
ゆっくりとふくらんで,<br>
やがてちょっぴり見えた緑の粒は<br>
日に日に成長しました。<br>
<a name="wakaba">今では</a>日の光を浴びた眩い
<a href="wakab.jpg">若葉</a>が<br>
庭いっぱいに広がっています。<br>
<blockquote>
<font color="#0088cc">
リンク先は<br>
webページだけではなく,<br>
画像でもよいのです。
</font>
</blockquote>
<br>
<br>
名工大2号館の屋上に上ってみました。<br>
その日は風がとても強く,<br>
じっと立ってることができないほどでしたが,<br>
それでもバッグからカメラを取り出して<br>
写してみることにしました。<br>
<br>
<a href="nit2tv.jpg"><img src="nit2tvs.jpg" width="120" height="90"></a><br>
<br>
正面に名古屋のテレビ塔,<br>
左の方にはjrセントラルタワーズの姿も見えます。<br>
手前の方は名工大の構内で,<br>
左は社発棟,右は1号館です。<br>
 撮影:2002年8月20日<br>
<br>
↑小さい写真をクリックすると<br>
大きい写真(640×480ピクセル)が見られます。<br>
<blockquote>
<font color="#0088cc">
テキストだけではなく写真に対しても<br>
リンクを設定することができます。<br>
</font>
</blockquote>
<br>
<br>
<br>
説明と写真を同時に見せたいときは,<br>
別のウィンドウを開いて<br>
表示させるとよいです。<br>
<br>
<a href="nit2tv.jpg" target="_blank"><img src="nit2tvs.jpg"
width="120" height="90"></a><br>
<br>
<br>
<br>
ところで<br>
<a href="http://www.nitech.ac.jp/">大学の
ホームページ</a>ですが,<br>
最初のものとはすっかり変わりましたねえ。<br>
<blockquote>
<font color="#0088cc">
まったく別のwebページにも<br>
ジャンプできます。<br>
</font>
</blockquote>
<br>
<br>
<br>
ところで,
<a href="web-002#xrose">クリスマスローズ</a>って
知ってますか。<br>
<blockquote>
<font color="#0088cc">
webページ内の特定の場所に<br>
ジャンプすることもできます。
</font>
</blockquote>
<br>
<br>
<br>
そういえば前の方にあった
<a href="#wakaba">若葉のところ</a>は<br>
面白かったなあ。<br>
何でこれが若葉だ!?って。<br>
<blockquote>
<font color="#0088cc">
このページ内の特定の場所にも<br>
ジャンプできます。
</font>
</blockquote>
<br>
<br>


</body>
</html>


 次の「練習−3」をブラウザに表示させるをクリックすると,できあがったWebページが表示されます。
「練習−3」をブラウザに表示させる


 裏技
 Webページ「練習−2」と「練習−3」のソースファイルは,コピペなどよりもずっと簡単に得られます。ここでその方法をお教えします。
 たとえば「練習−3」のソースファイルは,次のようにして得られます。
(1)すぐ上の「練習−3」をブラウザに表示させるをクリックします。ブラウザに「リンクの練習」のページが表示されます。
(2)ブラウザメニューバーから[表示]を選んで[ソース]をクリックします。そうするとブラウザに登録されているテキストエディタが起動して,ソースが表示されます。
  NN の場合はソース表示専用のウィンドウが開きます)
(3)エディタメニューバーから[ファイル]を選んで[名前を付けて保存]をクリックします。
(4)保存するフォルダを選択します。たとえば c:\data\html を選びます。
(5)ファイル名は web-003.htm とし,「ファイルの種類」を「すべてのファイル」としてから[保存]ボタンを押します。
(6)正しく保存できているかどうかをファイラで調べます。

 (2)〜(3) は別の方法もあります。メニューバーから[ファイル]→[名前を付けて保存]とします。ソースの内容は後で見ることになりますが,この方法の方が簡単ですし,全ての文字コードに対して有効です。IE で (2)〜(3) のようにソースを表示させて取得しますと,Shift JIS という文字コードで書かれたWebページ以外は文字化けしてしまいます。
 Webページソースを見ることは,たいへん勉強になります。「良く出来てるなあ」と思ったページ,「どうすればこんなことが出来るのかなあ」と思ったページがあったら,ぜひソースを見てください。上に書いたようにソースダウンロードできますので,ダウンロードして後でゆっくりと解析することもできます。

 解説
(1)<a href="★">■</a>
 リンクアンカーの設定をします。★はジャンプ先のURL,■はテキスト画像です。
 ジャンプ先の URLHTMLファイルと同じフォルダにある場合はファイル名だけにします。

  注意
 他人のWebページリンクを設定するときは,相手の了解を得る必要があります。ただし「リンクフリー」とか「自由にリンクしてください」などと書いてあるページや,検索サイトなどのように大衆が利用するページについては,特に了解を得る必要はないでしょう。

(2)target
 ジャンプ先のURLを表示するためのウィンドウを指定するための属性です。_blankは新しいウィンドウを開いて,そこに表示させるための変数です。tergetが省略されている場合は,今まで表示されていたWebページに代わって,ジャンプ先 URLWebページが表示されます。
(3)<a href="★#☆">
 Webページの特定の場所にジャンプさせるときは,#に続いて場所の名前☆を記入します。場所の名前の付け方は,(5)で説明します。
(4)<a href="#☆">
 同じWebページ内の特定の場所にジャンプさせる場合には#に続いて場所の名前☆だけを記入します。場所の名前の付け方は,(5)で説明します。
(5)<a name="☆">
 Webページの特定の位置に場所の名前を付けます。
(6) <blockquote>
 引用文を書くときに使います。<blockquote>と</blockquote>に挟まれた文書等はインデントされ,上下にも1行分の空間が空きます。

 メモ : 「練習−3」では<blockquote>タグを,タグ本来の使用目的では使っていません。


 「ホームページ作成の部屋」メニュー