【下準備】「ビジュアル」で画像を1つだけ挿入しておきましょう。


Step1

以下の★と★の間の部分をコピーしてください。
 ★style="border:1px solid;"★
「線の太さを1pxにして、solid（直線）で表示させる」という意味になります。
数値が大きいほど線の太さも太くなりますので、お好みの数値を入れてください。
線の種類を変えるにはsolidの部分を変えることになりますが、それは応用編で詳しくやります。

「コード」のボタンをクリックして、「コード」を見ます。
<img src="http://amakusa-web.jp/Sozai/（以下略）">
と書いてあると思います。  

Step2
imgとsrcの間には半角のスペースがあります。
先ほどコピーしたものも半角スペースを入れて貼り付けます。
貼り付け後のコードはこうなっているはずです 
<img style="border:1px solid;" 
src="http://amakusa-web.jp/Sozai/（以下略）">
(solid;"とsrcの間に半角スペースがあります）

Step3
ビジュアルに戻って見てみましょう。
　
　画像の周りに黒い線が表示されていると思います。
　Step2で画像を線で囲むことができました。 


ここに注意！
Step3後、もう一度コードを見てみましょう。
style="border:1px solid;" としか入れていないはずなのに
style="BORDER-RIGHT: 1px solid;
           BORDER-TOP: 1px solid;
           BORDER-LEFT: 1px solid; 
           BORDER-BOTTOM: 1px solid"
になっていますね（ここでは分かりやすいように改行しています）。

順に、右、上、左、下の辺（線）についてそれぞれ設定されています。これは仕様のようで、どうにもならないので、1つの指定（一括）が4辺の指定に変更されるということだけ覚えておいてください。
線の太さを変える時、全ての辺の線の太さを同じにしたい時は、4箇所書き換える必要があるということです。さて、基本編はこれで終わりですが、応用編では「線の色、線の種類」を変えることにチャレンジします。