2014年02月03日
■ホームページ作成はできる-5■
前回は「文字に対するリンクの貼り方」でしたが、
今回は「画像に対するリンクの貼り方」です。
動作環境
・作業フォルダ設定
今回の最終的なフォルダ構成を下記の通りとします。
デスクトップ-----「hp」フォルダ
|
-------index.htmlファイル
|
-------「img」フォルダ
| ｜
| -------0.png画像ファイル
|
-------「00_sub」フォルダ
｜
-------sub.htmlリンク先ファイル
・htmlファイル編集
index.htmlファイルを下記の通り編集します。
index.html
<!doctype html>
<html lang="ja"> <!-- HTML開始 かつ 言語を「日本語」 -->
<head>
<meta charset="utf-8"> <!-- 文字タイプ設定 UTF-8 -->
<title>ホームページ作成</title> <!-- ブラウザ上部表示タイトル -->
</head>
<body >
ホームページを始めます。
リンクは次の<a href="./00_sub/sub.html"><img src="./img/0.png" alt="画像サンプル"></a>です。
</body>
</html>
「sub.html」ファイルは前回と同じで変更はありません。
・htmlファイル内容説明
前回はリンク(クリックすると他のページへ移動する箇所)にしたい文字を
<a></a>タグで囲みましたが、今回はそこの「文字」の部分を
以前に紹介した「画像の読み込み」に変更しています。
これだけで画像に対してリンクが貼れます。
リンク先となるページは前回と同様で「sub.html」で作成しています。
・htmlファイル表示
実際にブラウザで表示すると下記のようになると思います。
ホームページを始めます。リンクは次の
です。
↓ 「画像」を押すと
リンク先です。
と画面が切り替わります。
以上がホームページ作成の「画像に対するリンクの貼り方」でした。
今回までがホームページ作成の基礎と考えています。
・htmlファイルの作成
・画像の読み込み
・リンクの貼り方
以上を今回までやってきましたが、htmlファイルで行うことは
これらの内容を決めることで十分です。
(どんな画像を使うか、どんな文章にするか、どこにリンクを貼って画面を移動させるか等)
しかし、このままでは綺麗に整ったホームページになるのか不明な方もいるかと思いますので、
次回はレイアウトを決める方法について紹介したいと思います。
今回は「画像に対するリンクの貼り方」です。
動作環境
・作業フォルダ設定
今回の最終的なフォルダ構成を下記の通りとします。
デスクトップ-----「hp」フォルダ
|
-------index.htmlファイル
|
-------「img」フォルダ
| ｜
| -------0.png画像ファイル
|
-------「00_sub」フォルダ
｜
-------sub.htmlリンク先ファイル
・htmlファイル編集
index.htmlファイルを下記の通り編集します。
index.html
<!doctype html>
<html lang="ja"> <!-- HTML開始 かつ 言語を「日本語」 -->
<head>
<meta charset="utf-8"> <!-- 文字タイプ設定 UTF-8 -->
<title>ホームページ作成</title> <!-- ブラウザ上部表示タイトル -->
</head>
<body >
ホームページを始めます。
リンクは次の<a href="./00_sub/sub.html"><img src="./img/0.png" alt="画像サンプル"></a>です。
</body>
</html>
「sub.html」ファイルは前回と同じで変更はありません。
・htmlファイル内容説明
前回はリンク(クリックすると他のページへ移動する箇所)にしたい文字を
<a></a>タグで囲みましたが、今回はそこの「文字」の部分を
以前に紹介した「画像の読み込み」に変更しています。
これだけで画像に対してリンクが貼れます。
リンク先となるページは前回と同様で「sub.html」で作成しています。
・htmlファイル表示
実際にブラウザで表示すると下記のようになると思います。
ホームページを始めます。リンクは次の
です。 ↓ 「画像」を押すと
リンク先です。
と画面が切り替わります。
以上がホームページ作成の「画像に対するリンクの貼り方」でした。
今回までがホームページ作成の基礎と考えています。
・htmlファイルの作成
・画像の読み込み
・リンクの貼り方
以上を今回までやってきましたが、htmlファイルで行うことは
これらの内容を決めることで十分です。
(どんな画像を使うか、どんな文章にするか、どこにリンクを貼って画面を移動させるか等)
しかし、このままでは綺麗に整ったホームページになるのか不明な方もいるかと思いますので、
次回はレイアウトを決める方法について紹介したいと思います。
Posted by せしる at 12:03│Comments(0)
│パソコン関係
