staff1前回index.htmlファイルに新たなコードを追記したところまで学習しました。追記したファイルをWEBブラウザで表示させてみましょう。以下のように表示されましたか?h1タグが見出しなどを作るタグで、ブラウザ上では文字が太字で表示されます。pタグはパラグラフ(段落)を意味するタグで、中に文章を記述します。これら2つのタグだけでも、視覚的に見やすい文章を作ることができます。これだとTOPページ1枚だけのサイトしか作ることができません。他のページに飛ばすリンクをつけることができれば、複数のページからなるWEBサイトが作れそうです。今回は新たにprofile.htmlページを作成し、index.htmlページとリンクで行き来できるようにコードを書いていきましょう。リンクは、aタグを使って書きます。リンクには「どこの場所にあるファイルへ飛ばすか?」の指定が必要です。お探しのページは見つかりませんでした)が表示されるでしょう。今回はもっとも簡単な「同じ階層のページへ飛ばすリンク」を作ってみます。aタグを埋め込んでみたいと思いますが、その前にリンク先にあるWEBページのHTMLファイルが必要ですね。そちらからテキストエディタを使って作成していきましょう。【1】profile.htmlファイルを作成する以下のコードをエディタで書いて「profile.html」と名前をつけて新しくファイルを保存します。charset="UTF-8"></head><body><h1>鷹の目くんのプロフィール</h1><p>名前:鷹の目くん</p><p>誕生日:3月1日</p><p>星座:魚座</p></body></html>ファイルを保存する際は、index.htmlと同じ階層のディレクトリへ保存してください。HTML├index.html└profile.html※HTMLはディレクトリ名です。第2章で作成したHTMLディレクトリにprofile.htmlファイルを保存します。【2】index.htmlファイルにaタグを埋め込むprofile.htmlを保存したら、index.htmlを開いて以下の行を追記します。href="profile.html">プロフィール</a>追記場所はh1タグの1行下になります。href="profile.html">プロフィール</a><p>プログラミング学習で、まずはHelloWorldと表示させるところから初めることが多いです。</p><p>なぜかというと、Cというプログラミング言語の本に登場する1番はじめのサンプルプログラムが、HelloWorldと表示するコードだったからです。</p></body></html>記述したらファイルを保存しWEBブラウザで確認してみましょう。※プログラミングは、記述する→保存する→確認するの3つのプロセスを繰り返して作業を行っていきます。慣れていないと保存することを忘れる方がいます。気をつけましょう!これでプロフィールページへのリンクが完成しました。それでは、このaタグの意味を解説していきます。aタグの中にhref=”profile.html”と書かれています。このタグの中に含まれるものを属性と呼びます。aタグのhref属性へ、ファイルパス(ファイルのある場所)を指定しているのです。※今回は同じ階層にあるファイルのため、単純にhref属性にファイル名を指定しています。異なる階層にあるファイルパスの指定方法は次の記事で説明します。href属性にURLを指定することで、インターネット上のあらゆるページにリンクを貼ることが可能です。href=”https://www.yahoo.co.jp/”と記述することでヤフー・ジャパンのホームページへ飛ぶリンクを作ることができます。index.htmlからprofile.htmlへのリンクが完成しました。これではprofile.htmlからindex.htmlへ戻ることはできませんね。したらよいでしょうか?答えは簡単ですね。profile.htmlにも同様にリンクを貼ればよいのです。演習を用意しましたので実際に戻るリンクを作ってみましょう。【演習1】profile.htmlにindex.htmlへ戻るリンクを作ってみましょう。リンクの文字列は「トップページ」とします。Google検索を利用して、調べながら作って頂いても構いません。※15分ほどコードを書いてみて、難しいようなら下の回答ボタンを押してコードを見てくださっても構いません。回答profile.htmlへ以下のように書いてください。href="index.html">トップページ</a><p>名前:鷹の目くん</p><p>誕生日:3月1日</p><p>星座:魚座</p></body></html>このように各ページを相互になるようリンクを作っていけば、誰でもWEBサイトを作ることができます。HTMLのリンクはすべてこのように作られています。aタグに関わらずHTMLタグには色々な属性があります。タグとタグ属性を適切に使いこなせば、思い通りのWEBページを作成することができます。まとめHTMLでリンクを作るにはaタグを使用する。aタグのhref属性に「ファイルのある場所」を指定する。記述する→保存する→確認する、を繰り返す。次回は、さらにリンクとページを追加しながらホームページを作って行きます。コメントをキャンセルコメントを投稿するにはログインしてください。Reserved.運営会社|プライバシーポリシ。