その１３　リンクでページをつなげる

トップページ＞その１３　リンクでページをつなげる

その１３　リンクでページをつなげる

サイドメニューにあるページにリンクを挿入しましょう
ホームページといったら、ボタンを押したら他のページに切り替わるリンクのイメージが強いのではないでしょうか？
このリンクの役割を果たす要素は「a」要素になります。これはアンカー（anchor：碇)のaからきています。
リンクの設定は以下のようになります。

a要素の後にhref(エイチレフ）属性をつなげてイコール（=）の後にリンク先を指定します。リンク先の指定をするときはそれをダブルクォーテーションで囲みます。

リンク先には、このサイト内リンクならばサイトのファイルを直接指定しますが、外部の別サイトならば、http://～で続くURLを入力する必要があります。
たとえば当方の親サイトインターネットマーケティングスキルビギナーズガイドならば、外部サイトになるので以下のように記述します

<a href="http://akarukutanoshiku.com">インタネットマーケティングスキルアップガイド</a>

サイト内のリンクは実際にindex.html他のファイルを実際ににコーディングしていきましょう

index.htmlにリンクタグ（aタグ）を挿入してみましょう。

index.htmlのサイドメニューにリンクの設定をします。
ハイライトしている部分が変えているところです

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>ホームページの作り方</title>

</head>

<body>

<h1>ホームページの作り方</h1>

<h2>ホームページの作り方　へようこそ！</h2>

<p>このサイトはホームページ作成初心者の方でもホームページの作成ができるように作ったページです。</p>

<h3>サイドメニュー</h3>

<ul>

<li><a href="hajime.html">はじめに</a></li>

<li><a href="kiso.html">ホームページの基礎</a></li>

<li><a href="ouyou.html">ホームページ作成の応用</a></li>

<li><a href="oyakudachi.html">お役立ちサイト</a></li>

<li><a href="linksyu.html">リンク集</a></li>

</ul>

<h4>welcom</h4>

<p>このページでホームページの基礎を固めましょう</p>

<h4>infomaition</h4>

<p>○○年○月○日ホームページをリニューアルしました。</p>

</body>

</html>

修正し終わったら上書き保存してください。

「hajime.html」「kiso.html」「 ouyou.html」「 oyakudachi.html」「 linksyu.html」も同様に修正します。

トップページだけでなく先ほど作ったそれぞれのページのサイドメニューもindex.htmlのコードをコピーして修正しましょう

このファイルをまたクリックして確認してみてください。（確認画面はこちら）

これで全てのページのサイドメニューにリンクの挿入が完了しました。いよいよ次はページのレイアウトを学んでいきます。ホームページの本当の楽しさはここからと言っても過言ではありません。
ホームページのレイアウトや文字の装飾、背景の設定などは全てスタイルシートという、別のファイルで指定をしていきます。スタイルシートはホームページ作成において欠かせないものです。
かといってそれがそんなに難しいのかといったらそうではありません。次のセクションからスタイルシートを学んでいきましょう。

次のセクションは
その１４　ページのレイアウト設定に必須のスタイルシートとは？　です。

ホームページ作成ビギナーズガイド