Web初心者のホームページを作ろう~第2回~「リンクの作り方」

 皆さんこんにちは、KUJIRAです。

 前回は、最小限のHTMLでHello worldを書きました。どうです?皆さん覚えてますか?忘れてしまったよという人は、前回の記事をぜひ見てください。今回は、前回作ったベースとなるファイルにいろいろな文章を入れたり、リンクを張っていきたいと思います・・・どうです?ホームページっぽい内容でしょ?それでは早速はじめたいと思います。

 前回はブラウザ上で「Hello world!」と表示しましたよね???

 察しの良い皆様のことです。どこが表示されている部分かもうお分かりだと思います。そうです「<body>」から「</body>」で囲まれた部分です。この部分の間に好きな文字を入力したりHTMLタグを入力するとそれを反映してブラウザ上に表示します。

——————————————————————————————-
<html>
 <head>
  <title>Hello world</title>
 </head>
 <body>
  Hello world!    ← ここっ!
 </body>
</html>
——————————————————————————————-

 「っん?なんだHTMLタグって???HTMLとどう違うの?」と思った人がいると思いますので説明をしておきます。HTMLタグとは、Webページを作るために書かれる「<○○○○○>」や「</○○○○○>」などの文字をいいます。要するに「<html>~</html>」や「<head>~</head>」、「<body>~</body>」、「<title>~</title>」などです。そして「HTML」というのは「Hyper Text Markup Language(ハイパー テキスト マークアップ ランゲージと呼びます)」の略でHTMLタグの総称だと思ってください。ほかにどんな種類のタグがあるのか知りたい人は、書店やWebで文献を探してみてね。

 話が逸れてしまったので、元に戻します。それでは早速「<body>~</body>(以降<body>タグと記載、以下ほかのタグも同様)」の間に好きな文字を入力していきましょう。

——————————————————————————————-
<html>
 <head>
  <title>Hello world</title>
 </head>
 <body>
  KUJIRAさん、KUJIRAさん、遊びっましょ!
  はーい(^O^)/
 </body>
</html>
——————————————————————————————-

 結果はこちら!

 どうでしょう?表示されましたか?表示されたのでしたら、皆様、何か違和感を感じませんでしたか?たぶん皆様は、「<body>タグの中で改行したのにできてないじゃん!( ̄△ ̄#)」と思っているでしょう。

 そうです!確かにできてません。でもご心配なく、故障でも詐欺られてる訳でもありません。そういう仕様です。

 「じゃあ改行はどうするの?」となります。答えはこれです。

——————————————————————————————-
<html>
 <head>
  <title>Hello world</title>
 </head>
 <body>
  KUJIRAさん、KUJIRAさん、遊びっましょ!<br>
  はーい(^O^)/
 </body>
</html>
——————————————————————————————-

 結果はこちら!

 どうですか?ちゃんと改行されたでしょ?改行には<br>タグというタグを改行したいところへ入力してあげます。

 これで文章を書くための最小限度の機能は説明されました。それでは、リンクに行きましょう。「HTMLと言えばやっぱリンクでしょ!」そう言われる程(・・・言われてないかも知れないけど)リンクは大切です。リンクが無ければ何もできません。リンクは<a>タグというタグで行います。以下に例を示しましょう。

——————————————————————————————-
<html>
 <head>
  <title>Hello world</title>
 </head>
 <body>
  「KUJIRAさん、KUJIRAさん、遊びっましょ!」<br>
  「はーい(^O^)/」<br>
  「でもどこで遊ぶんだよ・・・」<br>
  「じゃあ<a href=”http://www.kujira-station.com”>KUJIRA STATION</a>に行こうZE☆」<br>
  「そうだな<a href=”http://www.kujira-station.com” target=”_blank”>KUJIRA STATION</a>に行こう」<br><br><br>
  LINK<br>
  <a href=”../../index.php”>KUJIRA STATION</a>
 </body>
</html>
——————————————————————————————-

 結果はこちら!

 どうですか?リンクできましたか?簡単に説明すると<a>タグでリンクにしたい文字列を囲い、hrefでURL、もしくは相対パスを一つ指定します。URL、相対パスは一つのリンクに一つずつしか適用できないので気をつけてください。

 「<a href=”http://www.kujira-station.com” target=”blank”>」の部分にtargetという属性があると思います。このtargetはリンク先の内容等をどのフォームやウィンドウに表示するかを指定するための属性です。例では「_blank」と言うパラメータが記述されています。このパラメータは、クリックしたときに行き先のページを別ウィンドウに表示すると言う意味です。サンプルの中の「_blank」と書かれたリンクをクリックすると、別のウィンドウが起動し、その中に行き先のページが表示された事と思います。target属性を指定しないと同一ウィンドウで表示が変わる事も大切な点です。

 いかがです?理解できましたでしょうか?リンクの部分は後ほどSEOや色々大切な事へと繋がっていきますので、しっかり復習する事をお勧めします。次回は、ヘッダー部分の記述に関して説明しようと思います。

 それでは、KUJIRAでした。

コメント