第2節 もう少しホームページらしく

  何とかページの最低限のものは出来たけど、これでは少しものたりないよね
  写真やイラスト、また表の形にして見やすくしたいし、バックも模様も入れたいんだ
  それから すこし文法とか、基本的な言葉も学ぶ必要もあるだろうしね
  引き続き、ぼくと一緒に、よりよいホームページにしていきましょう!



 @ 構文のおはなし
 A タグのおはなし
 B 画像の貼付け
 C 画像と文字の縦の位置関係
 D 画像と文字の横の位置関係
 E 表(テーブル)を作る
 F 背景を飾る
 G メールにリンク
 H テキストエディタのおはなし



@ 構文のおはなし

HTMLの文章には、下記のように構文上のルールがあります。
        構文の最小の基本形
 <html>
    <head>
       <title> タイトル名 </title>
    </head>
    <body>
       ホームページの本文
    </body>
 </html>
まず<html>〜</html>で囲われた部分が、HTMLファイルであるという宣言です。
次に<head>〜</head>で囲われたヘッダー部があり,この部分は表示されません。
この部分には、最低<title>〜</title>の間に、ページのタイトルを書きましょう。
最後に、<body>〜</body>で囲われた部分に、HPの本文を書き込みます。

これがHTMLファイルの基本構文で、前節では、これらを省略していた訳です。

今回からは、ホームページを省略しないで書いてみます。
タイトル名を「くまさんのHP」とします。 全角の空白を□で表します。
メモ帳
<html>
  <head>
   <title>くまさんのHP</title>
  </head>

<body>

<div align="center">
  <!-- ++++++++++ タイトル ++++++++++ -->
   <font size="7" color="red">
    くまさんのホームページ
  </font><br><br>

  <!-- ++++++++++ あいさつ ++++++++++ -->
   <font color="navy" face="HG創英角ポップ体">
    ようこそ、くまさんのホームページへ、おいでくださいました。<br>
    まだ始めたばかりなので、内容はあまりありませんが、<br>
    すこしづつ充実させて行きますので、たびたびお立ち寄り下さい。
   </font><br><br>
</div>

  <!-- ++++++++++ 自己紹介  ++++++++++ -->
   <font color="#bb00ff">
    <b>□□□まずは、自己紹介します</b>
   </font><br><br>

   □私のなまえは、<i>くまさん</i>です。<br>
   □また、住所は兵庫県の中部の田園地帯に住んでいます。<br>
   □仕事はパープリンの助手をしています。<br>
   □年齢は30歳代です。<br>
   □趣味は<u>パソコン・スキー</u>が特に好きです。<br>
   □学歴は、ぱーぷりん高校を何とか卒業しました。<br>
   □そして、ぱーぷりん大学でパソコンを専攻しました。<br>

</body>
</html>
入力が出来れば、「上書き保存」で、index.html を保存します。
この結果、どのように表示されるか見てみましょう。 右のスイッチをクリックしてください。

表示は同じですが、最上段のタイトルバーと、最下段のタスクバーに、タイトル名が表示されました。
また、ブックマークに登録すれば、HP名にタイトル名が表示されます。


A タグのおはなし

よくHP上で「タグ」って言葉がよくでてきますよね。 いったいそれは何者なんでしょう?
前節から、改行や段落・書式を「指示する方法」と言ってきたものが、実は「タグ」なのです。
<br>は改行タグ、<p>〜</p>は段落タグ、<font>〜</font>は書式タグと呼ぶ訳です。
  タグのの基本形
<☆☆☆ ●●="**"> この間に文章を入れる </☆☆☆>
  ☆☆☆   : タグ名
  ●● = "**" : 属性 ( ●●:属性名  **:属性値 )
   ・タグ名は必ず半角文字で記述し、大文字・小文字はどちらでもok
   ・タグ名と属性、属性と属性の間は、必ず半角のスペースを入れます
   ・タグ名の前にスペースをいれてはなりません
いままでHPを作るため、メモ帳で書いてきましたね。 それをソースファイルと言います。
HPを作る作業は、HTMLファイルを見ながら、そのソースファイルを修正する繰り返しです。

ソースファイルを簡単に呼び出し、編集できる方法がありますので、紹介します。
  ソースファイルを見る
@ HTMLファイルを表示する
A 画像以外の任意の場所を、「右クリック」をして小窓を出す
B「ソースの表示」を左クリックする

 またプルダウンメニューから、「表示(V)」→「ソース(C)」でも見られます
試しに、このページを右クリックをして「ソースの表示」を左クリックしてみましょう。
下図のようになり、これをクリックしましょう。
どうですか。 メモ帳に表示された、ソースファイルが表示されましたね。

PS : インターネット上で表示されているホームページで、右クリックして「ソースファイル」を修正して保存しても、その内容は変更されません。 これで変更されたら怖いですよね〜(笑)


B 画像の貼付け

HTMLファイルは、文章だけでなく、写真やイラスト・ロゴをなどの画像ファイルを表示出来ます。
画像ファイルの利用の仕方次第で、ホームページの出来映えに大きく影響します。

それだけに、画像ファイル関係だけで、ホームページ作成に係わる一分野を占めます。
まずは、画像ファイル取得方法をまとめましょう。
  画像ファイル取得方法
@ デジカメで写真を撮る、またはスキャナで写真やイラスト・ロゴを取り込む
A (フリー)素材を提供しているホームページから画像を借りてくる
B 上記の画像を、自分のホームページに合うよう画像処理ソフトで加工して使う
C 画像処理ソフトで自分のオリジナル画像を作って使う

・画像処理は一大技能であり、HP作成の学習と共に伸ばしていきましょう
・Cの項目は、技能の上に才能も必要でしょう〜〜♪

ここで注意するのは、他人の画像を利用するには著作権の保護があることです
フリー表示のない画像を借用時は事前に、メール等で作者の了解を求めます
上記Aのフリー素材等の画像を、ホームページより取り込む場合の、一般的な方法を説明しましょう。

■ 取り込みたい画像の上に、マウスポインターを合わせます。

■ 右クリックして小窓を開けます。

■ 「名前を付けて画像を保存」をクリックします。(左図の状態)

■ 「画像の保存」という窓が開き、「保存する場所」でフォルダを指定しますが、今は「デスクトップ」を選びます。

■ ファイル名を変えたい時は、好きな名前を入力し、「OK」をクリックして完了です。

■ 今回は、画像のアイコンが、デスクトップに残ったはずです。

次に、画像貼付けのタグの使用法を説明しましょう。
  画像の貼付け指定タグ
<img src="画像ファイル名"> : 本来の大きさの画像を表示

  画像の大きさを指定するとき
<img src="画像ファイル名" width="**" height="**">
 ・ width ="***" で横幅を指定する
 ・ height="***" で縦幅を指定する
   (幅・高さの指定単位はピクセル)

 width ="***" のみを指定した場合や、height="***" のみを指定した場合は、
 指定してない部分は、元の画像の縦横の比率より自動決定されます
ピクセル(px)について

今頃よく「画素」という言葉を、デジカメの性能等で、よく耳にしますね。 これは画像の大きさを表すもので, 1画素 = 1ピクセル(px) x 1ピクセル(px) になります。 つまり、画像の一辺の長さを表しますが、1cmの様に絶対長さでなく、相対的な長さです。

パソコンで画像の領域を設定する時,800×600や、1024×768ピクセル等の設定をしますね。 これは全画面を縦横それぞれ、この数値に分割したものを、基本長さ1ピクセルという事です。 この場合画面の大きさが一定なので、画像の密さを表すようになります。

画像の大きさをディスプレイ上で推定する場合は、その縦横の長さは、1024×768 ピクセル設定の時は、画面横幅の 1/10 を、約 100 ピクセル と見当をつけます。
画像貼付の練習をしてみましょう。 メモ帳で入力します。
練習用画像は、 ぷりんの画像 : plin.jpg を使いましょう。
この画像ファイルを、HTMLファイルと同じ所(今はデスクトップ)に置いておきます。
メモ帳
<img src="plin.jpg">元の大きさです
<img src="plin.jpg" width="200" height="80">縦横共に大きさを指定<br>
<img src="plin.jpg" width="150">横幅を150ピクセルに指定
<img src="plin.jpg" height="75">縦幅を70ピクセルに指定
これを,HTMLファイルにして表示すると,次のようになります。
元の大きさです 縦横共に大きさを指定 横幅を150ピクセルに指定 縦幅を70ピクセルに指定
ホームページに応用
それでは、ホームページに熊の画像ファイル kuma.gif を貼り付けます。
この熊の画像ファイルは、より借りています。
赤字の部分が修正したところです。全角の空白を□で表します。
メモ帳
<html>
  <head>
   <title>くまさんのHP</title>
  </head>
<body>

<div align="center">

  <!-- ++++++++++ タイトル ++++++++++ -->
   <font size="7" color="red">
    くまさんのホームページ
  </font><br><br>

  <!-- ++++++++++ あいさつ ++++++++++ -->
   <font color="navy" face="HG創英角ポップ体">
    ようこそ、くまさんのホームページへ、おいでくださいました。<br>
    まだ始めたばかりなので、内容はあまりありませんが、<br>
    すこしづつ充実させて行きますので、たびたびお立ち寄り下さい。
   </font><br><br>
</div>

  <!-- ++++++++++ 画像を貼る ++++++++++ -->
  <img src="kuma.gif"><br><br>

  <!-- ++++++++++ 自己紹介  ++++++++++ -->
   <font color="#bb00ff">
    <b>□□□まずは、自己紹介します</b>
   </font><br><br>

   □私のなまえは、<i>くまさん</i>です。<br>
   □また、住所は兵庫県の中部の田園地帯に住んでいます。<br>
   □仕事はパープリンの助手をしています。<br>
   □年齢は30歳代です。<br>
   □趣味は<u>パソコン・スキー</u>が特に好きです。<br>
   □学歴は、ぱーぷりん高校を何とか卒業しました。<br>
   □そして、ぱーぷりん大学でパソコンを専攻しました。<br>

</body>
</html>
右のスイッチをクリックして,表示した上で、ソースファイルも参照してください。
ソースの内容より、画像の貼り付け方は、ご理解できましたか?

PS : ここ以降から3節までのホームページのソースファイルの画像呼び出し部分で、画像ファイル名の前に「parts/」が入ってますが、今は気にせず読み進めてください。


C 画像と文字の縦の位置関係

画像を続けて並べた場合や、文字に挟んで置いた場合はどうなるでしょう。
  画像ファイルの性質
・ その前後で改行されない
・ 文字や、他の画像と下端が揃えられる
上記のことを、実際に画像を使って確かめてみます。
次の画像を使い、練習してみましょう。
  ぷりんの画像  : plin.jpg   みるくの画像  : milk.jpg   愛犬ももの画像 : momo.jpg
画像と文字並べた場合の練習をしてみましょう。 メモ帳で入力します。
メモ帳
<img src="plin.jpg"><img src="milk.jpg"><img src="momo.jpg"> <br><br>

これは ぷりんの <img src="plin.jpg"> 写真です <br><br>

次は愛犬もも <img src="momo.jpg"> と、ぷりんの <img src="plin.jpg width=130"> 写真です <br><br>
これを,HTMLファイルにして表示すると,次のようになります。


これは ぷりんの 写真です

次は愛犬もも と、ぷりんの 写真です


次に、この縦の位置関係を変える属性について説明しましょう。
  画像と文字の縦の位置関係
<img src="画像ファイル名" align="****">
  align = top  : 上合せ     align = bottom : 下合せ
  align = middle : 中央合せ
 改行すれば、画像の下の左端に来る
 中央合わせがうまくいかない時は align = absmiddle を試してください
画像と文字の縦の位置関係の練習をしてみましょう。 メモ帳で入力します。
メモ帳
ぷりんは <img src="plin.jpg" align=top> 上合せにしました <br><br>

愛犬ももは <img src="momo.jpg align=middle> 中央合せにしました <br><br>

愛犬ももは <img src="momo.jpg align=middle> 中央合せにしました。自然改行すればどこに来るでしょうか? さてさて如何だったでしょうか?
これを,HTMLファイルにして表示すると,次のようになります。
ぷりんは 上合せにしました

愛犬ももは 中央合せにしました

愛犬ももは 中央合せにしました。自然改行すればどこに来るでしょうか? さてさて如何だったでしょうか?
画像は、自動・強制に係わらず、改行すれば画像の下行に移ります。
ホームページの応用は次の項目を併せましょう。


D 画像と文字の横の位置関係

文字に比べ高い画像の場合、画像の左や右の空いた部分に、一行書けば画像の下に移るのではなくて、普通に改行した文章を、書き込みたいですね。

実は、 img タグは、align 属性値を変える事で、上記のような事が出来るのです。
これを、画像に対する 文字の回込み と呼びます。
  画像と文字の横の位置関係
<img src="画像ファイル名" align="****">
 align = "left" : 画像が左、文字が右側に回込む
 align = "right" : 画像が右、文字が左側に回込む
   これで、改行されても、画像に関係なく、1行下へ改行されるだけです

   途中で、この回込みを打ち切り、画像の下行に移したい時には、
   次のclear属性付きの改行を入れます
<br clear="***">
 clear = "left" : 左の画像の下に改行
 clear = "right" : 右の画像の下に改行
 clear = "all"  : 左右の両画像のうち下になる方の、下に改行
画像と文字の横位置の関係の練習をしてみましょう。 メモ帳で入力します。
メモ帳
<img src="plin.jpg">わたしは、ぷりんです。<br>改行しました。<br><br>

<img src="plin.jpg" align="left">わたしは、ぷりんです。<br>改行しました。うまく回込みました。<br clear=all><br>

<img src="plin.jpg" align="right">わたしは、ぷりんです。次は右画像の回り込みです。<br>改行しました。<br>もう一度改行しました。うまく回込みました。<br clear=all><br>

<img src="plin.jpg" align="left">わたしは、ぷりんです。<br>改行しました。<br clear=all>回込みを中断しました
 これを,HTMLファイルにして表示すると,次のようになります。
わたしは、ぷりんです。
改行しました。

わたしは、ぷりんです。
改行しました。うまく回込みました。

わたしは、ぷりんです。次は右画像の回り込みです。
改行しました。
もう一度改行しました。うまく回込みました。

わたしは、ぷりんです。
改行しました。
回込みを中断しました
ホームページに応用
それでは、ホームページで、くまさんの画像の周りを「あいさつ文」を回り込ませてみましょう。
また、あいさつ文で、バランスをとるために、左寄せにし、<br>を適宜挿入しています。(緑部分
赤字の部分が修正したところです。 全角の空白を□で表します。
メモ帳
<html>
  <head>
   <title>くまさんのHP</title>
  </head>

<body >

<!-- ++++++++++ タイトル ++++++++++ -->
  <div align="center">
   <font size="7" color="red">
    くまさんのホームページ
   </font><br><br>
  </div>

<!-- ++++++++++ あいさつ ++++++++++ -->
   <img src="kuma.gif" align="left">

   <font color="navy" face="HG創英角ポップ体">
    ようこそ、くまさんのホームページへ、おいでくださいました。<br><br>
    まだ始めたばかりなので、内容はあまりありませんが、<br><br>
    すこしづつ充実させて行きますので、たびたびお立ち寄り下さい。
   </font><br clear="all"><br>

<!-- ++++++++++ 自己紹介  ++++++++++ -->
   <font color="#bb00ff">
    <b>□□□まずは、自己紹介します</b>
   </font><br><br>

   □私のなまえは、<i>くまさん</i>です。<br>
   □また、住所は兵庫県の中部の田園地帯に住んでいます。<br>
   □仕事はパープリンの助手をしています。<br>
   □年齢は30歳代です。<br>
   □趣味は<u>パソコン・スキー</u>が特に好きです。<br>
   □学歴は、ぱーぷりん高校を何とか卒業しました。<br>
   □そして、ぱーぷりん大学でパソコンを専攻しました。<br>

</body>
</html>
右のスイッチをクリックして,表示した上で、ソースを参照してください。
ソースファイルの内容も確認しましたか?
画像については、まだ沢山の工夫ができますが、また後節で説明しましょう。


E 表(テーブル)を作る

だらだら長い文章は、読みにくいものです。 表にすれば見やすくなる場合がよくあります。
HTMLの文法では、「表」の事を「テーブル」と呼びます。
またテーブルの一つのマス(要素)の事を セル と呼びます。
それでは、テーブルタグの使い方を説明しましょう。
  表(テーブル)を作る
<table align="***" border="*">
 <tr>
  <td> 各セルの内容を記入 </td>
   <td> 〜 </td> を列の数だけ繰り返す
  </tr>
   <tr> 〜 </tr> を行の数だけ繰り返す
</table>


 <table> 〜 </table> : テーブルを宣言し、テーブル全体の設定をする
 <tr> 〜 </tr> : テーブルの行を作り、その行の設定をする
 <td> 〜 </td> : 行の下に、各セルの列を作り、各セルの設定をする

 boder="*" : テーブルの外枠の太さを、ピクセルで指定
 align="center" : テーブル全体を中央寄せにします
 align="left" : テーブルを左寄せにして、画像と同じく、文字は右に回込みます
 align="right" : テーブルを右寄せにして、画像と同じく、文字は左に回込みます
テーブルは様々な指定が出来、応用範囲も非常に広いので、詳細は後説で学習しましょう。
基本的な使い方は、使用例で説明するのが、わかりやすいでしょう。

それでは、2行3列の表(テーブル)を作ってみます。
テーブルの練習をしてみましょう。 メモ帳で入力します。
メモ帳
 テーブルの練習
<table border="1">  ← テーブルの開始
 <tr>   ← 1行目の開始
  <td>1行1列</td> ← 1列目
  <td>1行2列</td> ← 2列目
  <td>1行3列</td> ← 3列目
 </tr>   ← 1行目の終了
 <tr>   ← 2行目の開始
  <td>2行1列</td> ← 1列目
  <td>2行2列</td> ← 2列目
  <td>2行3列</td> ← 3列目
 </tr>   ← 2行目の終了
</table>テーブルを抜けました
 これを,HTMLファイルにして表示すると,次のようになります。
 テーブルの練習
1行1列 1行2列 1行3列
2行1列 2行2列 2行3列
テーブルを抜けました
画像とテーブルは、回込みなど似た部分もありますが、下記の点が違います
テーブルの性質 : その前後で改行される
ホームページに応用
それでは、ホームページで、「自己紹介」をテーブルにしてみましょう。
一部見やすいように、変更している部分があります。
赤字の部分が修正したところです。 全角の空白を□で表します。
メモ帳
<html>
  <head>
   <title>くまさんのHP</title>
  </head>

<body>

<!-- ++++++++++ タイトル ++++++++++ -->
  <div align="center">
   <font size="7" color="red">
    くまさんのホームページ
   </font><br><br>
  </div>

<!-- ++++++++++ あいさつ ++++++++++ -->
   <img src="kuma.gif" align="left">

   <font color="navy" face="HG創英角ポップ体">
    ようこそ、くまさんのホームページへ、おいでくださいました。<br><br>
    まだ始めたばかりなので、内容はあまりありませんが、<br><br>
    すこしづつ充実させて行きますので、たびたびお立ち寄り下さい。
   </font><br clear="all"><br>

<!-- ++++++++++ 自己紹介  ++++++++++ -->
   <font color="#bb00ff">
    <b>□□□まずは、自己紹介します</b>
   </font><br><br>

   <table border="1">   ← テーブルの始まり
    <tr>   ← 1行目
      <td>□なまえ</td>
      <td><i>□くまさん</i></td>
    </tr>
    <tr>   ← 2行目
      <td>□住 所</td>
      <td>□兵庫県の中部の田園地帯</td>
    </tr>
    <tr>   ← 3行目
      <td>□仕 事</td>
      <td>□パープリンの助手</td>
    </tr>
    <tr>   ← 4行目
      <td>□年 齢</td>
      <td>□30歳代</td>
    </tr>
    <tr>   ← 5行目
      <td>□趣 味</td>
      <td>□<u>パソコン・スキー</u>が特に好き</td>
    </tr>
    <tr>   ← 6行目
      <td>□高 校</td>
      <td>□ぱーぷりん高校を何とか卒業</td>
    </tr>
    <tr>   ← 7行目
      <td>□大 学</td>
      <td>□ぱーぷりん大学でパソコンを専攻</td>
    </tr>
</table>   ← テーブルの終わり

</body>
</html>
右のスイッチをクリックして,表示した上で、ソースを参照してください。


F 背景を飾る

HTMLでは背景の、色を付けたり、画像を貼り付ける事が出来ます。
どちらも body タグの属性で指定します。
背景に色を付ける
まずは、背景の色を付ける説明をしましょう。
  背景に色を付ける
<body bgcolor="****">
 ** : 色を指定します。 その指定法には次の二つがあります。
  ・bgcolor="red"    ... 色の名前を指定する。
  ・bgcolor="#ff0000" ... 色のRGB値を指定する。

 色の種類は、第1節5項の「文字の色」を参照
それでは背景の色を付ける練習をしてみましょう。
メモ帳
<body bgcolor="silver">

背景色に silver を指定しました。

</body>
 これを,HTMLファイルにして表示すると,次のようになります。
背景に silver を指定しました。




背景に画像を貼付ける
次に、背景に画像を貼付ける説明をしましょう。
  背景に画像を貼付ける
<body background="****">
 **** : 画像ファイルを指定します
  画像ファイルを繰り返し表示して、背景を埋め尽くします

壁紙貼り付けの練習をしてみましょう。
壁紙には、右の画像ファイルを使用します。(ファイル名 bg.gif
  (このファイルは、ルチル・クォーツさんの素材を借りてます。)

メモ帳
<body background="bg.gif">
くまさんの画像を<br>
背景に貼付けてみました
</body>
 これを,HTMLファイルにして表示すると,次のようになります。
くまさんの画像を
背景に貼付けてみました




ホームページに応用
それでは、ホームページに、この壁紙を貼り付けてみましょう。
壁紙の画像ファイルを、HTMLファイルと同じ所(今はデスクトップ)に置いておきます。
赤字の部分が修正したところです。 全角の空白を□で表します。
メモ帳
<html>
  <head>
   <title>くまさんのHP</title>
  </head>

<body background="bg.gif">

<!-- ++++++++++ タイトル ++++++++++ -->
  <div align="center">
   <font size="7" color="red">
    くまさんのホームページ
   </font><br><br>
  </div>

<!-- ++++++++++ あいさつ ++++++++++ -->
   <img src="kuma.gif" align="left">

   <font color="navy" face="HG創英角ポップ体">
    ようこそ、くまさんのホームページへ、おいでくださいました。<br><br>
    まだ始めたばかりなので、内容はあまりありませんが、<br><br>
    すこしづつ充実させて行きますので、たびたびお立ち寄り下さい。
   </font><br clear="all"><br>

<!-- ++++++++++ 自己紹介  ++++++++++ -->
   <font color="#bb00ff">
    <b>□□□まずは、自己紹介します</b>
   </font><br><br>

   <table border="1">
    <tr>
      <td>□なまえ</td>
      <td><i>□くまさん</i></td>
    </tr>
    <tr>
      <td>□住 所</td>
      <td>□兵庫県の中部の田園地帯</td>
    </tr>
    <tr>
      <td>□仕 事</td>
      <td>□パープリンの助手</td>
    </tr>
    <tr>
      <td>□年 齢</td>
      <td>□30歳代</td>
    </tr>
    <tr>
      <td>□趣 味</td>
      <td>□<u>パソコン・スキー</u>が特に好き</td>
    </tr>
    <tr>
      <td>□高 校</td>
      <td>□ぱーぷりん高校を何とか卒業</td>
    </tr>
    <tr>
      <td>□大 学</td>
      <td>□ぱーぷりん大学でパソコンを専攻</td>
    </tr>
</table>

</body>
</html>
右のスイッチをクリックして,表示した上で、ソースを参照してください。
ソースの修正部分は、body タグの中だけです。 簡単に出来ましたね。


G メールにリンク

ホームページを作ったからには、来訪者の意見が聞きたいですね。
それではホームページより、電子メールを呼び出し(リンク)てみましょう。
まずは、一般的なリンクのタグを習います。
  リンクする
<a href="***"> 文章または画像 </a>
  *** : リンク先のアドレスを指定します

   ・「文章または画像」に、マウスを近づけると指型になり、クリックでリンクします
   ・「文章」の場合、アンダーラインが引かれます
   ・「画像」の場合,画像属性でborder=0としないと枠線が入ります
今回は、電子メールのリンクに限定していますので、下記のようになります。
  メールにリンクする
<a href="mailto:メールアドレス"> 文章または画像 </a>
  ・「文章または画像」に、マウスを近づけると指型になり、クリックでメールにリンクします
  ・「文章」の場合、アンダーラインが引かれます
  ・「画像」の場合,画像属性でborder=0としないと枠線が入ります
メールにリンクする練習をしてみましょう。
メール画像には、右の画像ファイルを使用します。(ファイル名 mail.gif
このファイルは、ルチル・クォーツさんの素材を借りてます。
くまさんのメールアドレスは、 perplin@mail.goo.ne.jp です。
メモ帳
<a href="mailto:perplin@mh1.117.ne.jp">
メールを送る
</a><br><br>

<a href="mailto:perplin@mh1.117.ne.jp">
<img src="parts/mail.gif">
</a><br><br>

<a href="mailto:perplin@mh1.117.ne.jp">
<img src="parts/mail.gif" border="0">
</a>
 これを,HTMLファイルにして表示すると,次のようになります。
いずれも、マウスを近づけると指型になり、クリックでメールが出てきます。
画像属性でborder=0としないと、上の例のように枠線が入ります。
ホームページに応用
それでは、ホームページのタイトルの下に、メールのリンクを貼り付けてみましょう。
メールの画像ファイルを、HTMLファイルと同じ所(今はデスクトップ)に置いておきます。
赤字の部分が修正したところです。 全角の空白を□で表します。
メモ帳
<html>
  <head>
   <title>くまさんのHP</title>
  </head>

<body background="bg.gif">

<!-- ++++++++++ タイトル ++++++++++ -->
  <div align="center">
   <font size="7" color="red">
    くまさんのホームページ
   </font><br><br>

<!-- ++++++++++ メールを貼る ++++++++++ -->
    <a href="mailto:perplin@mh1.117.ne.jp">
      <img src="mail.gif" border="0">
    </a>
  </div><br>

<!-- ++++++++++ あいさつ ++++++++++ -->
   <img src="kuma.gif" align="left">

   <font color="navy" face="HG創英角ポップ体">
    ようこそ、くまさんのホームページへ、おいでくださいました。<br><br>
    まだ始めたばかりなので、内容はあまりありませんが、<br><br>
    すこしづつ充実させて行きますので、たびたびお立ち寄り下さい。
   </font><br clear="all"><br>

<!-- ++++++++++ 自己紹介  ++++++++++ -->
   <font color="#bb00ff">
    <b>□□□まずは、自己紹介します</b>
   </font><br><br>

   <table border="1">
    <tr>
      <td>□なまえ</td>
      <td><i>□くまさん</i></td>
    </tr>
    <tr>
      <td>□住 所</td>
      <td>□兵庫県の中部の田園地帯</td>
    </tr>
    <tr>
      <td>□仕 事</td>
      <td>□ぱーぷりんの助手</td>
    </tr>
    <tr>
      <td>□年 齢</td>
      <td>□30歳代</td>
    </tr>
    <tr>
      <td>□趣 味</td>
      <td>□<u>パソコン・スキー</u>が特に好き</td>
    </tr>
    <tr>
      <td>□高 校</td>
      <td>□ぱーぷりん高校を何とか卒業</td>
    </tr>
    <tr>
      <td>□大 学</td>
      <td>□ぱーぷりん大学でパソコンを専攻</td>
    </tr>
</table>

</body>
</html>
右のスイッチをクリックして,表示した上で、ソースを参照してください。


H テキストエディタのおはなし

これまでは「メモ帳」を使い、ホームページのソースを作って来ましたね。
このように、テキスト文章を作成・編集するものを テキストエディタ と言います。

この「メモ帳」は、非常にコンパクトなのはいいのですが、もう少し便利な編集機能の付いたソフトが、 インターネット上で、無料で提供されています。

今まで学習されて来て、ソースの打ち込みには少し慣れてきた今の時点で、これらの便利なソフトにシフトされる事をお勧めしたいと思います。

好みの差もあって、一概にどれがいいとは言い切れませんが、私の独断と偏見(?)で次の二つのソフトを紹介します。
  お勧めテキストエディタ

  TeraPad
・シンプルでメモ帳と入れ替えが出来、また全角のスペースが表示されるのが、チェック時に便利
・ホームページ  http://www2s.biglobe.ne.jp/~t-susumu/toclip/
・ダウンロード   http://www2s.biglobe.ne.jp/~t-susumu/toclip/library/tpadbeta.html

  HmEdit
・ワンタッチでタグが挿入され、煩わしいタグ打ちを簡単にしてくるのが便利
・ホームページ  http://homepage1.nifty.com/kazunobu/ (ダウンロードも同じ)
メモ帳に匹敵する軽快さをもつ TeraPad と、スピーディな HmEdit は、やがては両方を(もっと広く言えば、ホームページビルダー等の専用ソフトも併せ)使い分け出来れば効率的です。

しかし、やっと使い慣れた時点の方々には、まずは TeraPad をお使いするのを勧めます。 そしてこのソフトを、手に入れる手順を説明します。
TeraPad の入手方法
@ まず上記のダウンロード先に行き 「●ダウンロード」の下の 「tp075b06.lzh (499KB)」 をクリックします。

A ダウンロード先を聞いてきますので、「保存」を選択します。
  保存先を聞いてきますので、とりあえず「デスクトップ」を選択します。
  するとダウンロードが始まり、しばらく待てば完了します。
  デスクトップに 「tp075b06.lzh」 と言う名前のアイコンが表示されています

B 解凍ソフト 「Lhasa」を入手し、 ここ の「解凍プログラムを入手」を参考にセットアップします。
  以上の結果、「LHASA.EXE」 と言う名のアイコンがデスクトップに出来ます。

C 「tp075b06.lzh」 のアイコンをクリックしたまま引きずり、「LHASA.EXE」 のアイコンの上で放します。
  すると「解凍」と言う操作が行われ、デスクトップに「tp075b06」と言う名のアイコン(フォルダ)が出来ます。

D このアイコン(フォルダ)をダブルクリックすると、窓が開きます。
  その中に「TeraPad.exe」と言うアイコン(ファイル)があります。
  これが TeraPad のプログラムです。

E これを右クリックしたまま引きずり、デスクトップで放すと小窓が表れ、「ここにコピー」を選びます。
TeraPad の起動方法と設定
今までの操作でデスクトップに「TeraPad.exe」と言うアイコン(ファイル)が出来ています。
これをダブルクリックすると TeraPad が起動します。
基本操作は、メモ帳とほぼ同じイメージで使えます。

まずはメニューの「ツール」の、「ツールの設定」を選択し、「表示」タブにすると、右のような窓が出ます。
「全角空白マーク」と「半角空白マーク」と「タブマーク」にチェックを入れましょう。
これで、見落としやすい全角の空白や、タブマークが解るようになります。

編集機能(検索や置換他)をヘルプを参考に、少しずつ使える様にしていきましょう。

慣れるに従い、これらの機能と、右クリックやコピーアンドペースト『@BG』さんのHPより) 等をうまく利用して、効率よくホームページが作れる様になるでしょう。