ゼロから始めるＨＰ作り３
５． 画像を貼り付ける
　大分勉強したので、画像を貼り付けて見ましょう。
HTMLソース
ブラウザの表示画面
<!DOCTYPE html>
<html lang="ja">
<head>
　<meta charset="UTF-8">
　<title>写真の貼り付け</title>
</head>
<body>
  ホームページに写真を付けました<br>
   <img src="y0399s.jpg" alt="富士山" title="河口湖の富士">
</body>
</html>
🗋 　写真の貼り付け
🠤 🠦 ⟳ ✕ ☖　ⓘ ファイル･･･
ホームページに写真を付けました
富士の写真
　 以上のように、<img>タグで画像を貼り付けることが出来ます。なお、src="y0399s.jpg" で、画像のある URL を記述し、title="河口湖の富士" で、ポインタを当てたときに表示される文字を記述します。
　 画像の貼り付けについて、さらに詳しくは、画像の貼付をご覧下さい。

　 ＊ <meta charset="UTF-8"> というタグがありますが、これはこのページが UTF-8 で書かれていることを表す タグです。 これが文字化けの防止策になると憶えておきましょう。

　 さらに、リンクを張るなどしてページに飾りつけをしてみましょう。

６． リンクページを作ってみる
　ホームページの醍醐味は、各ページにリンクが張ってあり、それらのページを次々に渡り歩けることです。
このリンクはアンカータグ <a> で記述します。実際にやってみましょう。
HTMLソース
ブラウザの表示画面
<!DOCTYPE html>
<html lang="ja">
<head>
　<meta charset="UTF-8">
　<title>リンクページ</title>
</head>
<body>
  <a href="../../index.html" target="_blank">サイトTop</a><br>
  <a href="../hp_g.html" target="_self">ＨＰ作りのTop</a>
</body>
</html>
🗋 　リンクページ
🠤 🠦 ⟳ ✕ ☖　ⓘ ファイル･･･
サイトTop
ＨＰ作りのTop

　 href="～" で～にリンク先の URL を記述します。また、target="_blank" はリンク先のページを 新たに開いて表示し、target="_self" はリンク先のページを現在のページに表示することを表します。　 さらに詳しくは、こちらで

７． 画像表示やリンクの URL 表示について　(補足)
　◆各ページの構成
　 　ここまで見てきたように、通常各ページファイルは「ＨＴＭＬファイル」や画像ファイルやそれらを含むフォルダ等のセットとして構成されます。 詳しくは、「ＨＴＭＬの初歩」や以下をご覧下さい。
◆ホームページの構造  （ツリー構造）
  • Web サーバーに置かれたホームページとなるファイルは、HTMLファイルと言う決まりで作られています。
  • 閲覧者のブラウザソフトはそのファイルの内容を解釈して、閲覧者のPC上にホームページを表示します。
  • ホームページは指定されたアドレス(URL)の入力で最初に表示される「トップページ」( index.html もしくは index.htm)と、そこから「リンク」される「サブページ」 等で構成された次のような構造になっています。
トップフォルダ ┬ サブフォルダ1 ─ ┬ サブフォルダ11 ─ ┬ サブページ111
├ トップページ1 ├ スタイルシート 11 ├ スクリプト 111
├ 画像 1 ├ ページ 11 ├ 画像 111
├ サブページ２ └ 画像 11 └ 音声 111
└ サブフォルダ 2 ─ ┬ サブフォルダ 21 ─ ┬ スタイルシート 211
　 ├ スタイルシート 21 ├ スクリプト 211
　 ├ ページ 21 └ ページ 211
　 └ 画像 21 　 

　これはパソコン内に層構造のフォルダがあり、それぞれにいくつかのファイルがあることと同じですが、各ページで表示画像やファイルを指定したり、画像や文字をクリックすると、他のページにジャンプしたりするように 「リンク設定」 されていることが HTMLファイル特徴です。

　リンク先の URL記述 は、一般には相対アドレスで書きますが、その位置が特定されている場合は絶対アドレスで書きます。
　 前へ　　次へ
Top>  ＨＰ作りTop>  HPの仕組>  基本タグ/ 作成ﾌﾛｰ∥ ゼロ１/ ゼロ２/ ゼロ３/ ゼロ４∥ HTMLの初歩/ 演習∥ 手軽に作る∥