ステップごとに覚えよう!

ステップ1
まずはここ。ホームページとは何か?~SEOの意味について解説。


ステップ2
ホームページを作る上での準備について解説。


ステップ3
htmlとは?書き方や確認の仕方について解説。


ホームページ リンクを設定する リンクhtmlタグとは?

前回は、相対リンクについてご説明させて頂きました。
今回は、それらの内容を踏まえてメニュー部分にリンクの設定をおこなっていきます。
【相対リンク・絶対リンクについて】も一緒にご確認して頂きながらご参考にしていただければと思います)

1、a hrefタグを使用する

リンクを設定するには以下のようなhtmlタグを使用します。

<body>
<a href="リンク先URL(相対リンクor絶対リンク)">任意のテキストや画像</a>
</body>

では、実際に上記の内容でリンクの設定をしていきます。

※ファイルの開き方・保存方法、ブラウザでの確認方法などは省略しています。以前のページをご参考にして下さい。

 

■index.html編集

<body>
<h1>ホームページ作成 初心者 テストウェブサイト</h1>

<p>
<a href="index.html">トップページ</a> | <a href="profile.html">プロフィール</a>
| <a href="news.html">お知らせ</a> | <a href="info.html">当ホームページについて</a>
</p>

<h2>参考サイトとして</h2>

<p>
当サイトへようこそ!こちらのウェブサイトでは、ホームページを初めて作ろうとチャレンジする方の為に<br>
参考サイトとして用意しています。ブラウザからソースを表示などで確認することで、<br>
どのような形で作られているかも把握できますので、少しづつ自分のものにしていきましょう。<br>
</p>

<img src="img/01.jpg">

<h2>今後ページ数なども増やしていく予定です</h2>
↓===以下省略===↓
</body>

 

■index.html編集、参考イメージ
リンクを追加

なんとなくでも把握できましたでしょうか。
この辺りは慣れも多少必要なので、少し戸惑う方もいるかもしれません。
例2でimgファルダを作ったように、色々テストで試してみると階層(パス)の仕組みも理解しやすいと思います。
実践あるのみです。

 

また、難しい場合はすべて同じ階層にファイル等を設置することで、リンク設定の記述は、基本的にファイル名そのままを記載すればOKとなります。

 

前述にもありますがimg以外の以下の部分がそれにあたります。(メニュー部分のみ掲載)

<body>
<p>
<a href="index.html">トップページ</a> | <a href="profile.html">プロフィール</a>
| <a href="news.html">お知らせ</a> | <a href="info.html">当ホームページについて</a>
</p>
</body>

2、他のページにもメニューを設置する

今の状態だとトップページ(index.html)だけしかメニューがなく、他のページに移動した場合に行き止まりとなってしまいます。

 

他のページにもindex.htmlで記述したメニュー部分を同じく設置してあげます。
コピーして貼り付けるだけの作業になりますのでわかりやすいと思います。

リンクを貼り付けて追加

リンクを貼り付けて追加 手順

上書きを忘れずに

すべてのhtmlファイルにコピーしたメニュー部分を貼り付けましょう。

 

3、事項について

次回は、毎度のことですがブラウザで確認作業をおこなっていきます。