課題5　ハイパーリンク

Terapadを起動する。
「表示」→「オプション」でタブの幅を4文字分にし、タブと空白文字を表示する設定に変更する。

デスクトップに「課題5」フォルダーを作り、さらにその中に「1」フォルダーを作る。
Terapadで「文字/改行コード指定保存」で、文字コードを「UTF-8N」にして、「1」フォルダーの中に「index.html」という名前で保存する。
以下のコードをコピー＆ペーストして上書き保存する。

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<link rel="stylesheet" type="text/css" href="main.css">
	<title>課題5. ハイパーリンク</title>
</head>
<body>
<span class="header">青森県の観光・天気情報総合ページ</span>
<div class="main">
	<ul class="city">
		<li>
			青森市
		</li>
		<li>
			弘前市
		</li>
	</ul>
</div>
</body>
</html>

「ファイル」→「新規作成」でもう一枚TeraPadを開く。
「文字/改行コード指定保存」で、文字コードを「UTF-8N」にして、「1」フォルダーの中に「aomori.html」という名前で保存する。
以下のコードをコピー＆ペーストして上書き保存する。

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<link rel="stylesheet" type="text/css" href="main.css">
	<title>青森市の観光・天気情報</title>
</head>
<body>
<span class="header">青森市</span>
<div class="main">
	<ul class="city">
		<li>
			青森市
		</li>
		<li>
			弘前市
		</li>
	</ul>
	<br>
	<a class="button" href="" target="_blank">観光</a>
	<a class="button" href="" target="_blank">天気</a>
	<br><br>
	トップページに戻る
</div>
</body>
</html>

「文字/改行コード指定保存」で、文字コードを「UTF-8N」にして、「1」フォルダーの中に「main.css」という名前で保存する。

以下のコードをコピー＆ペーストして上書き保存する。

/* 画像 */
img {
	max-width: 100%; /* 最大幅をブラウザの幅にする */
}
/* 見出し用 */
.header {
	font-size: 2.0em;/* 2倍サイズ */
	font-weight: bold;/* 太字 */
}
/* 小見出し用 */
.header2 {
	font-size: 1.5em;/* 1.5倍サイズ */
	font-weight: bold;/* 太字 */
}
/* 本文用字下げ */
div.main {
	margin-left: 10px;/* 左をあける */
}
/* 箇条書き(都市)の設定 */
ul.city {
	margin-top: 10px;/* 上を10ピクセルあける */
	padding: 0; /* 上下左右の隙間なし */
	list-style-type: none; /* 先頭のマークをなくす */
	display: flex; /* 横並びにする */
}
/* 箇条書き(都市)の項目の設定 */
ul.city li {
	padding: 10px 15px; /* 上下・左右の隙間 */
	border-right: solid 2px; /* 右側に実線の枠を入れる */
	font-size: 1.2em; /* 1.2倍サイズ */
}
/* 箇条書き(都市)の最後の項目の設定 */
ul.city li:last-child {
	border: none; /* 枠を入れない */
}
/* ハイパーリンク(ボタン型) */
a.button {
	background-color: #aaffff; /* 背景を薄い水色にする */
	border: 2px solid #000000; /* 黒枠を入れる */
	padding: 8px 40px; /* 上下・左右の隙間 */
	border-radius: 30px; /* 左右を丸める */
	text-decoration: none; /* アンダーラインを消す */
}
/* ハイパーリンク(ボタン型)にカーソルを乗せたとき */
a.button:hover{
	background-color: #ffffff; /* 背景を白にする */
}

このように「1」フォルダに3つのファイルができていて、TeraPadも3枚開いていればOK。
以下の説明では行番号で変更箇所を指定するので、先頭に空白行が入っている場合は、詰めて1行目からコードが記述されている状態にしておく。

今回は複数のhtmlファイルを扱う。どのファイルでもCSSの設定は同じにしたいので、その設定を「main.css」に記述し、htmlファイルからそれを読み込む形にしている。
index.html, aomori.htmlの6行目の「<link rel="stylesheet" type="text/css" href="main.css">」がそれを読み込む命令。

今回はCSS部分は初めから完成状態になっている。
「ul.city」は前回の課題4-2の例3のように、箇条書きの要素を横に並べて縦棒で区切って表示する設定。
「a.button」はリンクをボタンの形で表示し、マウスカーソルを乗せたときに色が変わるようにする設定。

main.cssを閉じる。
index.htmlをFireFoxで開く。

この時点では「青森市」「弘前市」はまだただの文字になっている。
それぞれをクリックしたときに青森市のページ、弘前市のページに飛ぶようにしたい。

index.htmlの14行目の「青森市」の左に「<a href="aomori.html">」を、右に「</a>」を記入して上書きしてFireFoxのページを更新し、図のように「青森市」をクリックして aomori.html にジャンプすることを確認する。

「a」がハイパーリンクのタグ。この href プロパティにリンク先のファイル名やURLを入れると、タグで囲まれたものがリンクになる。

aomori.htmlの24行目の「トップページに戻る」の左右に「<a href="index.html">」「</a>」を記入して上書きしてFireFoxのページを更新し、図のように index.html と aomori.html を行き来できることを確認する。

「青森市　観光」などで検索して青森市の観光に関わるページを表示させてそのURLをコピーし、aomori.htmlの21行目のhrefプロパティの値に入れて上書き保存してFireFoxのページを更新し、図のように「観光」のボタンを押すとそのページが別タブで開く (aomori.html の方はそのまま) ことを確認する。

最初から書かれている「 target="_blank"」は、別タブで開くようにするための設定。
外部リンクだけでなく、自分のページへのリンクでもこれをいれれば別タブで開くようになる。
必要に応じて普通のリンクと使い分けるとよい。

観光のページ (外部サイト) のタブを閉じ、さっきと同様にしてaomori.htmlの22行目に必要な情報を追加して、「天気」のボタンを押すとそのページが別タブで開くようにする。

エクスプローラー上で「aomori.html」を選んでCtrl+C, Ctrl+Vの順に押し、できた「aomori - コピー.html」の名前を「hirosaki.html」に変更する。

いままでやったことを踏まえ、図のような表示、動作になるように aomori.html と hirosaki.html を書き換える。

hirosaki.html は弘前のページなので、7行目、10行目の「青森市」のところを「弘前市」にする。

13～18行目の部分は、aomori.html の方は hirosaki.html に飛ぶリンク、hirosaki.html には aomori.html に飛ぶリンクを作る。
自分自身へのリンクは書かないでおく。

hirosaki.html の21行目と22行目のリンクを、それぞれ弘前の観光、天気の情報へのページのものに変更し、図のようにそれぞれ対応するページに飛べることを確認したら課題5-1は完了。

index.html の17行目に hirosaki.html へのリンクのための記述を追加し、図のようにそれぞれのページに飛べることを確認したら課題5-1は完了。

どうしてもうまくいかない場合は完成状態の index.html、aomori.html、hirosaki.html (観光・天気のリンクはこれと同じでなくてもよい) と見比べて修正する。

課題5-1の結果表示用のFireFoxのタブ、TeraPadを閉じる。
「課題5」フォルダの中に「2」フォルダを作る。
「2」フォルダの中にindex.htmlを含む少なくとも2つのhtmlファイルと、cssファイルを作る (新しく作ってもよいし、課題5-1で作ったものをコピーしてもよい)。
それらのファイルを編集し、オリジナルのページ群を作る。

課題の条件

自分・友人などの個人名を使わない (課題まとめのページに載せるため)。
index.html に、それ以外のすべての自前のページへのリンクをつくる。
index.html 以外のページそれぞれに、index.html へのリンクをつくる (要するに、index.htmlにトップページ的な役割をさせる)。
画像を使う場合は、横幅は800ピクセル以内、高さは600ピクセル以内にする。また、著作権に注意。
エラーのない状態 (FireFoxでCtrl+Uでソースを表示させ、赤点線のアンダーラインがない状態) にする。

注意 (この課題限定ではなく、Webページ全般について)

ファイル名に使う文字は半角のアルファベットと数字、「-（ハイフン）」「.（ピリオド）」「_（アンダーバー）」だけにする。
画像とhtmlファイル本文での大文字・小文字を揃える。

参考
文字だけでなく、画像をリンクとして使うこともできる。
例えばここで以下のような設定でボタンの画像を作って「2」フォルダに保存し (仮に「english.gif」とする)、

(自前のenglish.htmlを作ったうえで) index.htmlのリンクの部分を「<a href="english.html"><img src="english.gif"></a>」のように書けば、画像をクリックしてそのページに飛べるようになる。
もちろん、外部ページへのリンクに画像を使うこともできる。

「課題5」フォルダーをzip化する。
以下のフォーマットで課題を提出する。

宛先 : pws2022a@gmail.com
件名 : Webページ制作第5回課題
本文 : 学籍番号、氏名
添付ファイル: 課題5.zip

課題5 ハイパーリンク

課題5-1

課題5-2

提出

課題5　ハイパーリンク