第2回『リンクタグを作ってみよう』


ホームページとブログの教室第二回目は、リンクタグ(アンカーリンク)の作成体験です。

配布資料

HTMLタグとは

<> で始まり、</> で終わる、
山括弧(ギュメ)で要素を囲むこと

例) <html>○○○</html>

リンクの文法

<a href=”リンク先”>任意の文字</a>

リンクタグの意味

a: アンカー(碇 いかり)
リンクタグであることを表します
href: Hypertext Reference ハイパーテキスト参照 ※諸説あります
リンク先(クリックしたら開くページ)を指定します。

実践ワーク:リンクを作ってみよう

学習用専用フォルダを用意しましょう

デスクトップに『HP』というフォルダを作り、『hello.html』ファイルを移動させます。
一つのフォルダにファイルがまとまっていると、デスクトップが片付きます。

ファイルの新規作成


今作った『hp』フォルダの中に、メモ帳でファイルを新規作成します。
フォルダの中の何もない場所(白い部分)で、右クリックし、『新規作成』→『テキストドキュメント』でもOK

リンクタグを入力してみましょう

空白のメモ帳に、以下のように入力します。


<a href=”hello.html”>クリックしてください</a>

『index.html』という名前をつけて保存し、いったん閉じてください。

index.htmlファイルを開く

『クリックしてください』と言う部分をクリックしてみてください。

このように、『こんにちわ』とう文字が表示されて、上のアドレスバーが『hello.html』になっていれば成功です。

上手くいかない場合

上のように表示されない場合は、以下の原因が考えられます。

  • hello.htmlが同じフォルダにない
    同じ『hp』フォルダに『hello.html』と『index.html』があるか確認してください。

     

  • きちんと入力されていない
    『クリックしてください』以外の文字は全て半角英数です。
    ※特にダブルクォーテーションに注意
    また 『a』と『href』の間は半角空白です、全角空白や、空白なしではありませんか?
    HTMLタグを入力するときは、入力モードを半角英数(右下にAと表示される状態)にしておいてください。

     

  • 文字コードを『UTF-8』にしていない
    『UTF-8』を選びなおして保存しましょう。

リンクを追加してみましょう

ブラウザを閉じ、『index.html』 をメモ帳で開きなおします
html拡張子に変えたら、ダブルクリックでは編集できません。

右クリック、プログラムの選択→メモ帳
または
空白のメモ帳をを開いて、そこにファイルをドラッグ&ドロップしてください。

<br>
<a href=”http://yahoo.co.jp”>ヤフーはこちら</a>

を追加します。

<br>は、改行をするためのタグです。

追加したリンクをクリックしてみる

『ヤフーはこちら』をクリックします。

ヤフーのページが開いたら成功です。

上手くいかない場合は、きちんと入力されているかを確認してみてください。

きちんと入力したのに反映されない場合は

  • 上書き保存しているか確認
    『ファイル』→『上書き保存』、または『Ctrl+S』で上書き保存してください

     

  • ブラウザをリロードする
    ブラウザのリロードボタン、または『F5』を押してリロード(再読み込み)をしてください。

リンクを新規タブで開いてみる

『target=”_blank”』要素を追加することで、開いているページはそのままでリンク先を新規タブで開くことができます。

<a href=”http://yahoo.co.jp” target=”_blank”>ヤフーはこちら</a>

上記のように、空白半角あけて、『target=”_blank”』を書き加えて上書き保存してください。

新規タブでYahooが開くはずです。

まとめ

  • メモ帳にHTMLタグを入力することで、リンクを作ることができる。
  • HTMLファイルはダブルクリックするとブラウザが立ち上がる
  • HTMLファイルはメモ帳でも開くことができる
  • タグはきちんと入力しないと動作しない。

タイトルとURLをコピーしました