next up previous
Next: スタイルシートを書く Up: 実習 Previous: 写真を載せるためのタグを書く

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

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

  1. 顔写真のファイル「myface.jpeg」を Gimp で開き, その大きさをメモします.
  2. 次に, Emacs の画面を前面にもってきて, 先ほど記述した水平線のタグ<hr>の下に, 次の記述を加えます.
    <p><img class="persons" src="myface.jpeg" alt="MyFace"
            width="横幅" height="高さ">
    私がこのページの作者の×××です。
    数理科学科の1年生です.
    ×××と呼んで下さい. よろしくお願いします.<br clear="left">
    (文章は自分で適当に考えたものを書けばよい.)
    </p>
    
imgタグの class 属性も, スタイルシートで記述します,

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

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


next up previous
Next: スタイルシートを書く Up: 実習 Previous: 写真を載せるためのタグを書く

平成22年6月4日