1つの段落に写真と画像を入れる

今作ったWebページの写真の人物紹介を書きます. まずはじめに自分の顔写真とその説明を 1つの段落に書いてみます.

1. 顔写真のファイル「myface.jpeg」を Gimp で開き, その大きさをメモします.
2. 次に, geditで, 先ほど記述した水平線のタグ<hr>の下に, 次の記述を加えます.

   <p><img class="persons" src="myface.jpeg" alt="MyFace"
           width="横幅" height="高さ">
   私がこのページの作者の×××です。
   数理科学科の1年生です.
   ×××と呼んで下さい. よろしくお願いします.
   <br class="next">
   (文章は自分で適当に考えたものを書けばよい.)
   </p>
   

imgタグの class 属性も, スタイルシートで記述します.

注意: 写真の横に複数行に渡って記述するときは, 適当な個所で改行のタグ<br>を入れるようにします. 1行終わるごとにタグ<br>を書き, 最後の行は, タグ<br clear="left">と書きます. これは, 説明文の行が画面右端に来て行の折り返しが起こり左端に行く際に, 写真の右端から次の行が始まるようにするためです. 最後の <br clear="next">は, 次の写真の説明を始める際に, 写真の表示が画面の左端に来るようにするためです. これを指定しないと, 表示の左端は, 常に 1つ上の写真の右端から始まります. ここでは, <br> タブに clear 属性を直接記述するのではなく, class 属性を指定して, スタイルシートにこの属性を書きました. これは, <br> タブで clear 属性を指定する事が非推奨事項になっているからです.

出来たら, 上書き保存し, Firefoxの「再読み込み」の操作を行って下さい.