▪️前回の復習（HTMLとCSS）
別スライド参照
▪️リンクの設定
テキストp.88-89
a要素：ページ同士を繋げるもの
href：リンク先を指定するもの
<a href=”リンク先のページ.html”>リンクを設定したい文字列</a>
このように記述することで、リンクをクリックした際にどのウェブページを表示するのかを指定します。
例）<a href=”about.html”>このサイトについて</a>
リストの設定
今回のウェブサイトでは、リンクをリスト形式で記述し、リンクを４つ用意することにします。
（参照：テキストp.94-95）
リスト形式にしたい部分は以下のタグで囲みます。
<ul>〜</ul>
リストのひとつひとつの要素は以下のタグで囲みます。
<li>〜</li>
リスト形式の記述例は以下のようになります。
<ul>
<li>〜</li>
<li>〜</li>
<li>〜</li>
</ul>
リンク先のウェブページを作成する
「index.html」をフォルダ内で複製します。複製して増やした方のファイルを、「about.html」というファイル名に変更します。
※名前を付けて保存しなおす場合は、文字コードの指定（「UTF-8」）を忘れないように。
これから作成するページリンクのイメージ
リンクの記述
以下のようにソースコード内にメニュー（リンク）のリストを挿入しましょう。
ソースコード02_01
ファイル名「index.html」
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<!– ページのタイトルをここに入れる –>
<title>タイトル</title>
<!– スタイルシートの場所を指定している –>
<link rel=”stylesheet” href=”style.css” type=”text/css”>
</head>
<!– headここまで –>
<!– ここからbody –>
<body>
<!– サイトの見出しとその説明 –>
<h1>見出し</h1>
<p>説明文</p>
<!– メニューのリスト –>
<ul>
<li><a href=”index.html”>トップページ</a></li>
<li><a href=”about.html”>このページについて</a></li>
<li><a href=”campus.html”>キャンパス</a></li>
<li><a href=”class.html”>クラス</a></li>
</ul>
<p>本文</p>
<!– addressには制作者の情報を入れる –>
<address>制作者：自分の名前（愛知淑徳大学創造表現学部）</address>
</body>
<!– bodyここまで –>
</html>
ソースコード02_02
ファイル名「about.html」 ※「index.html」を複製し必要な部分だけ書き換えます。
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<!– ページのタイトルをここに入れる –>
<title>タイトル</title>
<!– スタイルシートの場所を指定している –>
<link rel=”stylesheet” href=”style.css” type=”text/css”>
</head>
<!– headここまで –>
<!– ここからbody –>
<body>
<!– サイトの見出しとその説明 –>
<h1>見出し</h1>
<p>解説</p>
<!– メニューのリスト –>
<ul>
<li><a href=”index.html”>トップページ</a></li>
<li><a href=”about.html”>このページについて</a></li>
<li><a href=”campus.html”>キャンパス</a></li>
<li><a href=”class.html”>クラス</a></li>
</ul>
<h2>中見出し</h2>
<p>説明</p>
<h3>小見出し</h3>
<p>説明<br>
説明</p>
<h3>小見出し</h3>
<p>説明<br>
説明</p>
<!– addressには制作者の情報を入れる –>
<address>制作者：自分の名前（愛知淑徳大学創造表現学部）</address>
</body>
<!– bodyここまで –>
</html>
完成したら、リンクを設定した文字列をクリックして動作を確認してみましょう。
【次回予告】
次回は各自で制作をします。第1回で配布した企画書を、可能な範囲で記入して持って来て下さい。
企画書の提出時期は第8回授業の直前です。
KOTERA Ryo 