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 属性も, スタイルシートで記述します.


注意: 次のスタイルシートに書く内容ですが, 写真は float 属性をもたせて, 文章に囲まれるようにします. この際に, この囲みを解除するのが, clear というプロパティ(property, 性質)です. スタイルシートでは, 改行タグ<br>にこの clear という属性を指定しています. このような指定をしないと, 画像は行の中の文字と同じ扱いになります.

このようなスタイル(見せ方)の指定は, HTML ファイル内で行っても良いのですが, 「見た目と論理構造の分離」ということを意識していただくために, あえて スタイルシートを別ファイルで作成します.

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

student
2015-05-29