2014年02月01日
■ホームページ作成はできる-4■
前回は画像の読み込みでしたが、
今回は特定の文字に対するリンクの貼り方です。
動作環境
・作業フォルダ設定
今回の最終的なフォルダ構成を下記の通りとします。
下記の赤文字箇所を追加しています。
デスクトップ-----「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">ここ</a>です。
</body>
</html>
次に「00_sub」フォルダの内での右クリック→「新規作成」→「テキストドキュメント」の
選択により「sub.html」ファイルを作成します。
sub.htmlの内容は下記をコピーしてください。
sub.html
<!doctype html>
<html lang="ja"> <!-- HTML開始 かつ 言語を「日本語」 -->
<head>
<meta charset="utf-8"> <!-- 文字タイプ設定 UTF-8 -->
<title>ホームページ作成-リンク先</title> <!-- ブラウザ上部表示タイトル -->
</head>
<body >
リンク先です。
</body>
</html>
・htmlファイル内容説明
「index.html」ファイルではリンク(クリックすると他のページへ移動する箇所)にしたい文字を
<a></a>タグで囲みます。(今回は「ここ」という文字を対象)
そして<a>内に「href="リンク先"」というルールでリンク先を記述します。
リンク先となるページは上記の「sub.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">ここ</a>です。
</body>
</html>
次に「00_sub」フォルダの内での右クリック→「新規作成」→「テキストドキュメント」の
選択により「sub.html」ファイルを作成します。
sub.htmlの内容は下記をコピーしてください。
sub.html
<!doctype html>
<html lang="ja"> <!-- HTML開始 かつ 言語を「日本語」 -->
<head>
<meta charset="utf-8"> <!-- 文字タイプ設定 UTF-8 -->
<title>ホームページ作成-リンク先</title> <!-- ブラウザ上部表示タイトル -->
</head>
<body >
リンク先です。
</body>
</html>
・htmlファイル内容説明
「index.html」ファイルではリンク(クリックすると他のページへ移動する箇所)にしたい文字を
<a></a>タグで囲みます。(今回は「ここ」という文字を対象)
そして<a>内に「href="リンク先"」というルールでリンク先を記述します。
リンク先となるページは上記の「sub.html」で作成しています。
・htmlファイル表示
実際にブラウザで表示すると下記のようになると思います。
ホームページを始めます。リンク先はここです。
↓ リンクを押すと
リンク先です。
ホームページ作成の特定の文字に対するリンクの貼り方でした。
読みやすさは重要ですね。
内容はあまり上手には説明できませんが、
行間等は適度にとっているつもりです・・・。
内容はあまり上手には説明できませんが、
行間等は適度にとっているつもりです・・・。
Posted by せしる at 07:30│Comments(0)
│パソコン関係
