【情報リテラシー】第11回 HTML -Webページ作成3-

画像の埋め込みとハイパーリンクの要素

要素 タグ 意味 置ける場所 writerとの対応
img <img> 画像埋め込みの要素である。src 属性を用いて埋め込む画像を記述する。終了タグのない空要素である。 body 要素内 画像の挿入
a <a>…</a> ハイパーリンクのアンカー要素である。href 属性を用いてハイパーリンクを記述する。 body 要素内

画像の埋め込み

HTML 文書には普通の文章（テキスト）だけでなく、画像を埋め込むことができる。

画像を埋め込むには、埋め込みたい場所で img 要素を指定する。 終了タグはない。 

<img src="画像の場所" alt="代替テキスト">

img 要素には src 属性が必須である。

alt 属性は付けるのが望ましい。 alt 属性には、画像が表示されない場合のために代替のテキスト（画像の説明）を記述する。 alt 属性は、Web ブラウザでは画像の読み込みに失敗して画像を表示できない場合や、画像表示ができない Web ブラウザ（例えば、視覚障害者用の音声読み上げ Web ブラウザ）に対して訳に立つ。

img 要素で主に使う属性には以下のものがある。

属性名 意味
src 表示したい画像のファイル名や URL を指定する。img 要素には必須である。
alt 画像が表示されないときに画像を説明する代替テキストを記述する。
width 画像の横幅をピクセル値で "400" のように記述する。
height 画像の縦幅をピクセル値で "200" のように記述する。

画像の埋め込みの例

画像ファイルの準備

まず、HTML 文書に埋め込みたい画像をファイルとして用意する。

今回は、以前のメールの課題で提出した自分の写真を使うことにする。 写真は以下の URL でアクセスできる（大学内の環境からのみ）。 

http://172.17.54.201/photo/ユーザ名.jpg

ユーザ名は自分のユーザ名で置き換える。 ちなみに課題を提出していない人の画像も用意してある。

Firefox でアドレスバーに上記の URL を入力して写真を表示できたら、次のようにして保存する（Ctrl+S でも可能）。

  1. Firefox で表示している写真の上にマウスカーソルを置いて右クリックする。
  2. [Save Image As（名前を付けて画像を保存）] を選択する。
  3. [保存] ボタンをクリックして保存する。

保存された写真のファイルは、普通は「~/Downloads/」「~/ダウンロード/」「~/Desktop/」などのディレクトリに保存される。 index.html で使うには「~/public_html/」の中に移動させる必要がある。

ファイルの移動には Thunar を利用するとよい。

  1. ウインドウの無い場所でマウスの左ボタンを押し、ルートメニューを表示する。
  2. ルートメニューの [ホームディレクトリ（thunar）] を選択して Thunar を起動する。
  3. 保存したファイルのあるディレクトリ（「~/Downloads/」「~/ダウンロード/」「~/Desktop/」など）に移動する。
  4. 保存したファイル「ユーザ名.jpg」でマウスを右クリックしてメニューを表示する。
  5. [切り取り] を選択する。
  6. ホームボタンをクリックし、さらに「~/public_html/」に移動する。
  7. 右下のディレクトリのアイコンのない白いところで右クリックをしてメニューを表示する。
  8. [貼り付け] を選択する。

HTMLの書き換え

画像ファイルの準備ができたら、以前作成した ~/public_html/index.html で画像を表示できるように書き換えよう。

emacs で Ctrl+X Ctrl+F と連続してキー操作し、「Find File:」の次に「~/public_html/index.html」と入力して Enter を押す。

10 行目に img 要素を挿入する。 「ユーザ名.jpg」の部分は、先ほど自分で保存した写真のファイル名を書くこと。

index.html
  2. <!DOCTYPE html>
  3. <html lang="ja">
  4. <head>
  5. <meta charset="UTF-8">
  6. <title>My Home Page</title>
  7. </head>
  8. <body>
  9. <h1>[氏名]のホームページ</h1>
  10. <p>ゆっくりしていってね！</p>
  11. <p><img src="ユーザ名.jpg" alt="撮影した写真"></p>
  12. </body>
  13. </html>

保存したら Firefox のアドレスバーに次の URL を入力してファイルの内容が表示されるか確認する。 

http://roy.e.koeki-u.ac.jp/~ユーザ名/

もし、画像が大きすぎたり小さすぎたりした場合は width 属性や height 属性で画像の大きさを調整する。

例えば、 

<img src="ユーザ名.jpg" alt="撮影した写真" width="200">

のように属性に「width="200"」を追加すると、画像の横幅が 200ピクセルになるように拡大縮小されて表示される。

width 属性のみ、もしくは height 属性のみだと、 アスペクト比（横幅と縦幅の比）が一定のまま拡大縮小される。

小テスト

Moodle Server（非公式） で第11回の小テストを受験しなさい。

ハイパーリンク

HTML 文書を読む場合に一番便利なのは、他の文書に簡単に移動できる点である。 例えば、目次のようなページから見たいページにすぐに辿り着くことができる。 この機能をハイパーリンクという。 単にリンクという場合が多い。

文書の特定の箇所を別の文書やファイルに結びつけることを（ハイパー）リンクを張るという。 文書中でリンクを作成するには a 要素（アンカー要素）を使う。 a 要素は「<a>」で始めて「</a>」で閉じる。

a 要素では href 属性を使ってリンク先を指定する。

具体的には次のように記述する。 

<a href="リンク先">リンク先の案内</a>

「リンク先の案内」にはテキストか画像を入れる。 画像の場合は img 要素で埋め込む。

「リンク先」の書き方には次の3通りある。

リンク先のイメージ

①同じ場所にあるファイルへのリンク

リンク先に同じディレクトリにあるファイルを指定する場合は、href 属性にそのファイル名をそのまま記述する。

自分の「~/public_html/」の中にある index.html から music.html へのリンクを張ってみよう。

まずは emacs でリンク先のファイル music.html を「~/public_html/」に作る。

music.html
  2. <!DOCTYPE html>
  3. <html lang="ja">
  4. <head>
  5. <meta charset="UTF-8">
  6. <title>Music</title>
  7. </head>
  8. <body>
  9. <h1>音楽のページ</h1>
  10. <p>音楽で好きなジャンルは以下の通りです。</p>
  11. <ul>
  12.  <li>ロック</li>
  13.  <li>アニソン</li>
  14. </ul>
  15. <p>この中で一番好きなのはロックです。</p>
  16. </body>
  17. </html>

index.html の11行目に次のように追加する。

index.html
  2. <!DOCTYPE html>
  3. <html lang="ja">
  4. <head>
  5. <meta charset="UTF-8">
  6. <title>My Home Page</title>
  7. </head>
  8. <body>
  9. <h1>[氏名]のホームページ</h1>
  10. <p>ゆっくりしていってね！</p>
  11. <p><img src="ユーザ名.jpg" alt="撮影した写真"></p>
  12. <p>私の趣味は<a href="music.html">音楽鑑賞</a>です。</p>
  13. </body>
  14. </html>

index.html で「音楽鑑賞」を a 要素で囲み、href 属性でリンク先に music.html を指定している。

ブラウザで次の URL にアクセスしてリンクができているか確かめてみよう。 

http://roy.e.koeki-u.ac.jp/~ユーザ名/

「音楽鑑賞」というテキストをクリックすれば、music.html に移動する。

テキストを a 要素で囲めば、そのテキストがリンクとして機能する。

テキストの代わりに img 要素を a 要素で囲めば、その画像がリンクとして機能する。

②外部サーバのファイルへのリンク

リンク先に外部サーバのファイルを指定する場合は、href 属性に URL を省略せずに記述する。

例えば次のように記述する。 

<p>私は <a href="https://www.koeki-u.ac.jp/">東北公益文科大学</a> に所属しています。</p>

「東北公益文科大学」をクリックすれば、東北公益文科大学のホームページへ移動する。

③同じサーバ上の別の人のファイルへのリンク

リンク先に同じサーバ上の別の人のファイルを指定する場合は、href 属性にドメイン名を省略して記述する。

例えば、同じサーバ（この場合 roy.e.koeki-u.ac.jp ）上にある友達のページが 

http://roy.e.koeki-u.ac.jp/~c234567/

の場合、ドメイン名を省略して「/」から先をリンク先に記述する。 

<p>大学の友達は <a href="/~c234567/">○○さん</a> です。</p>

ドメイン名を含めて URL 全てを href 属性値に指定することも可能だが、将来サーバ名が変わる可能性などを考えると、省略して記述した方が良い。

ハイパーリンクの注意

HTML 文書中にリンクを作成する場合は、リンク先とそのリンク先を示すテキストを適切に選ぶ必要がある。

よくあるのが「ここをクリック」という文字列にリンクが張ってある場合である。 このような指示代名詞にリンクを張るのは良くないとされている。

リンク先を示すテキストは、短くて意味のあるものにすべきである。 以下のようなテキストを選ぶことが推奨されている。

参考

その他の要素

その他文章を書くときに便利な要素をいくつか挙げる。

インライン要素は行内で使っても改行されずに続けて表示される。 ブロックレベル要素はその開始タグを書いた位置で必ず改行されて表示される。

ブロックレベル要素はインライン要素の中には書けないので注意すること。

インライン要素

要素 タグ 意味
br <br> 改行を意味する要素である。終了タグはない。普段の改行には p 要素を使うべきであり、極力用いないようにする。
em <em>...</em> 単語や文を強調するための要素である。表示が可能なら目立つような書体で表される。
strong <strong>...</strong> 単語や文をもっと強調するための要素である。表示が可能ならさらに目立つような書体で表される。
code <code>...</code> その部分がプログラムのソースコードであることを示すための要素である。
samp <samp>...</samp> その部分がコンピュータの出力の例であることを示すための要素である。
kbd <kbd>...</kbd> その部分がコンピュータへの入力、つまり人間がキーボードから入力するものの例であることを示すための要素である。
span <span>...</span> インライン要素化するための要素である。中にいれる要素を「インライン要素」として囲むためだけに存在する要素である。名前の無い箱のような役割で、 ほとんどの場合、次で説明するスタイルシートの範囲を決めるために利用する。

ブロックレベル要素

要素 タグ 意味
hr <hr> 行いっぱいに横罫線を表示する要素である。終了タグはない。ページの内容に大きな区切りがあるとき、視覚的に分割を示す場合に便利である。
blockquote <blockquote>...</blockquote> その部分（段落）が引用されたものであることを示す。通常は余分に字下げして表示される。
pre <pre>...</pre> この部分が整形済みテキストであると指定する。
div <div>...</div> ブロックレベル要素化するための要素である。中にいれる要素を「ブロックレベル要素」として囲むためだけに存在する要素である。名前の無い箱のような役割で、ほとんどの場合、次で説明するスタイルシートの範囲を決めるために利用する。

課題

profile.html というファイル名で以下のように自分のプロフィールを紹介する Web ページを作成しなさい。

プロフィールの作成例

赤で書かれた指示にに従うこと。

写真は以前のメールの課題で送った自分の写真を使う。 課題で送った写真は以下の URL でアクセスできる。 

大きな写真 http://172.17.54.201/photo/ユーザ名.jpg
小さな写真 http://172.17.54.201/photo/tn-ユーザ名.jpg

作成した HTML ファイルはMoodle Server（非公式） の第11回の課題に提出すること。