写真を貼り付けよう

HTML文書には普通の文章(テキスト)だけでなく、画像なども織り込むことが できる。ものはためし、さっそく自分のホームページ(index.html)に写真画像を 入れてみよう。

画像ファイルの準備

最初に貼り付けたい画像をファイルとして用意する必要がある。 ここでは各自の写真を自分のWebページに置いてみる。

やり方は自由だが、たとえば以下のようにして写真を用意する。

  1. スマートフォンで互いの写真を撮影する
  2. 相手の大学emailアドレスに写真をJPEG形式で送る
  3. koeki MAIL で受信して送られた画像を ~/public_html/ 内に保存する。

ファイル名は c102345.jpg で保存したものとして以後の説明を続ける。

保存できたか確認するために、~/public_html ディレクトリ の内容を表示させる。

ls -l ~/public_html
total 11
-rw-rw-r--   1 ta01002  wheel     10820 May  2 10:24 c102345.jpg

画像ファイルのサイズ調整

多くの場合スマートフォンで撮影したものは必要以上に高画素で 巨大すぎてWebページに適さないため適性サイズに縮小する。 縦横のうち長い方のピクセルサイズが600程度に納める。

ここではGIMPを用いて確認・縮小する方法を示す。

  1. アプリケーションメニューからマルチメディア→GIMPを起動する
  2. C-o(ファイルを開く)で保存した画像ファイルを開く
  3. 画像上で右クリック:「画像(I)」→「画像の拡大・縮小(S)」
  4. 幅(W)と高さ(E)のうち大きな値を600に変えて Enter
  5. [拡大・縮小(S)]ボタンを押す
  6. キーボードで 1 (いち)を押して原寸大を確認
  7. 画像上で右クリック: 「ファイル(F)」→「○○に上書きエクスポート」

画像を埋めるHTMLを書く

画像ファイルの準備ができたらHTMLファイル(index.html)を修 正しよう。Emacsで ~/public_html/index.html を開く (C-x C-f)。

Find file: ~/public_html/index.html

以下の記述を追加する(下線つきで示したのが追加分)。もちろん c102345.jpg の部分は自分の写真のファイル名を書くこと。

<html>
<head>
<title>KOEKI Taro's Home Page!!</title>
</head>

<body>
<h1>公益太郎の部屋へようこそ</h1>
<p><img src="c102345.jpg" alt="私の写真"></p>
<p>寄ってらっしゃい見てらっしゃい。</p>
</body>
</html>

追加が終わったら、ファイルを保存し(C-x C-s)、 Webブラウザで確認する。

文書中への画像の挿入には、img要素を利用する。多くのタグには、開始タグ (<xxx>)と終了タグ(</xxx>)両方があ るがimg要素には終了タグは無い。つまり </img>というタグは書かないことに注意する。img要素のタ グに指定する src="名前" のような形式を 属性指定 という。この場合img要素のsrc属性にファイ ル名を指定している。これは表示したい画像のファイルを指定している。

情報リテラシー