『リンク』を作ってみよう

ホームページに欠かせない『リンク』を作ってみましょう。

リンクとは？

クリックすると、別のホームページ（ウェブサイト）が開く機能です。

↓クリックしてみてください
ヤフーを開く

※リンクをクリックするときは１回でいいです。

Yahoo!（ヤフー）のホームページが『新しいタブ』で開いたはずです。

タブとは

ブラウザの中のページの切り替えをする『見出し』のような部分です。

このように出っ張っているところをクリックすると、ページを切り替えることができます。

↓イメージとしてはこんな感じですね（タックインデックス）

コクヨ KOKUYO / カラーレーザー＆インクジェット用はかどりタックインデックス（強粘着） A4・56面・中サイズ （KPC-T692）

リンクをつくってみよう

メモ帳を開いて以下のように一字一句間違いなく記入してください。

↓文字で書くとこのようになっています。

ハロー

※注意※
– htmlは半角英数で書く
『ハロー』という文字以外すべて 半角英数（変換しない文字）で入力してください。
特に『”』ダブルクオーテション、空白に気を付けて

– ピリオドとコンマの違いに注意
『. （ピリオド）』『, (コンマ)』は違います、ヒゲあるのがコンマで、ピリオドはヒゲのないほうです。

ファイル『名前を付けて保存』を選び、デスクトップに、『index.html』という名前で保存してください。

文字コードはUTF-8で！

いったんメモ帳は閉じて

デスクトップに、以前作った『hello.html』もあることを確認してください。

『hello.html』がない場合はこちらをクリック→ htmlファイルはテキストファイルであることを知ろう

リンクができているかを確認

index.htmlをダブルクリックします。

すると、ブラウザが立ち上がり

このように、下に線がある、色のついた「ハロー」の文字が出ているはずです。
（色は青か紫になっているかと思います）

その、『ハロー』の文字を、マウスでクリックしてください。（クリックは１回）

文字が「こんにちわ」にかわって、タブの部分とアドレスバーの部分が『hello.html』になっていることを確認してください。

これは、リンクをクリックすることによって、hello.htmlのファイルが開いて、画面が切り替わった、ということです。

トラブル　こんなときは

次の画面が開かない原因その１：間違って記入している

メモ帳で書いた文字が間違っている可能性が大です。
間違えていないか、半角で書いているか、空白やダブルクォーテーションも半角かどうか確認してください。

半角英数を入力するときには、日本語のモードではなく、半角英数モード（入力のときに変換のための下線が出ない状態）にして入力することを強くおすすめします。

全角モードから半角英数モードへ

↓画面右下のツールバーを半角モードにします。

キーボードの『Alt』を押しながら『半角/全角 漢字』と書いてあるキーを押すと切り替わります。
マウスでやるより手早く切り替えられます。

次の画面が開かない原因その２： hello.htmlがない

同じデスクトップ上に、リンク先のファイル『hello.html』がないと、「ファイルが見つかりません」のような表示がでます。

※お使いのブラウザによって画像・文章は異なります。

同じデスクトップの上に、hello.htmlがあるかどうか確認してください。
他のアイコンがあって隣同士並んでいなくても構いません。

文字化けする

場合によっては、このように『文字化け』という現象を起こし、文字が読めない状態になる場合があります。

原因はまず、『文字コードをUTF-8で保存していない』と言う事が考えられます。

ですが、文字コードをUTF-8にしても文字化けがすることもあります。
その場合は、今の段階ではあまり気にしないでください。
理由は、htmlファイルというのは他に設定をかかなければいけない決まりがあり、その設定をまだ書いていないからです。

今回は、リンクを作る練習のために、リンクの部分だけを書いてみました。

htmlファイルをつくるための記述を『タグ』といいます

<a href=”ｘｘｘ”>○○</a>　のような、『< >』ではじまり『 </ >』で終わるような記号のことを『HTMLタグ』といいます。

このタグで挟み込んだり、様々な設定を記入することによって、リンクを作ったり、画像を貼ったり、デザインをしたりします。

はじめてのうちはなかなか理解しづらいかもしれませんが、いくかタグを見よう見まねで使っていくことによって、だんだんと身についてきますのでご心配なく！

インターネット上のホームページへのリンクを作ってみよう

今までは、同じデスクトップ上へのリンクでしたが、インターネット上のホームページならどこへでもリンクを貼ることが出来ます。
例として、ヤフーに飛ぶリンクを作ってみましょう。

さきほどの『index.html』をメモ帳で開き、

このように書き足します。

コピペが便利

同じような記述を繰り返し書くときは『コピペ』（コピー＆ペースト）が楽で間違えません。

コピーは日本語でいうと複写、ペーストは貼り付けと言う意味です。

このようにコピーしたい部分をマウスドラッグまたは『Shiftキー』を押しながら『← → （矢印キー）』で選び、色を反転。（青い背景にする）

コピー

メニューバーから『編集』→『コピー』でもいいですし、

マウス右クリック→ 『コピー』でもいいですし、

キーボードの『Ctrl』ボタンを押しながら『C』を押してもいいです。

これで、目には見えないですが、パソコンが文字を記憶します。

ペースト

貼り付けたい場所にカーソルを持って行って、１回クリック。
下の行に貼り付けたいときは、『Enterキー』で改行してください。

縦長の棒線『｜』がチカチカしているところが、選択場所です。

どこにチカチカがあるか必ず確認してください
この場所をちゃんと確認せず、別のところにあると、思ってもいないところにペーストされてしまいます。

『編集』→『貼り付け』でもいいですし

右クリックして『貼り付け』でもいいですし、

『Ctrlキー』を押しながら『V』を押してもいいです。

※このとき、『Ｖ』のキーは押したらすぐに離してください。
押しっぱなしにしていると、、、

こんなふうにダダダーっと連続コピーされてしまいます。

コピペはキーボードでやるのがおすすめ

慣れてくると『Ctrl + C』『Ctrl + V』のように、キーボードでコピペをするのが速くて楽になります。
ですが、結果が同じならご自身のやりやすい方法でやってくださって構いません。

リンクの書き替え

コピーしたら、クリックした先を書き換えたいので、　『hello.html』と言う部分を書き換えます。

hello.htmlと言う部分を選択して、『Delete』キーなどで消します。

リンクしたいホームページのアドレスをコピーします

ホームページのアドレスは、ブラウザのアドレスバーにあります。

手書きで書いてもいいのですが、間違えやすいので、コピーしたほうがいいでしょう。

今回の場合、Yahooのホームページを開き、アドレスバー（ブラウザの上の部分）を選択して青く反転させておき、
『Ctrl』＋『c』を押すなどしてコピーします。

貼り付けたい位置にカーソルをもってきて、１回クリック、『”|”』ダブルクォーテーションの間に『｜』縦棒があってチカチカしてるか確認します。

そこで『Ctrl』+『v』で貼り付けます。

無事に張り付きましたでしょうか。

これが、クリックしたら開くページ、『リンク先』になります。

リンク文字の書き替え

こんどは表から見える文字を書き換えます。

今、『ハロー』となっているかと思いますので、これを『ヤフー』に書き換えます。

これで書き換えが完了です。

ファイルを書き換えたら『上書き保存』をします

『上書き保存』とは、ファイルを増やさず、そのファイルのまま、内容を書き換えてコンピューター内に保存することを言います。

ファイルの文字などをかきかえて、表面上は書き変わっていても、この『上書き保存』という作業をしないと、本当に書き変わったことにはなっていません。

上書き保存の方法

『ファイル』→『上書き保存』でもいいですし、

キーボードの『Ctrl』と『s』を押しても上書き保存できます。

保存せずに閉じようとすると

このように聞いてきますので

そこで『保存する』を押しても上書き保存されます。

『保存しない』を選ぶと、保存せず終了します。（書き換えた内容は消え、前回保存した時の状態に戻ります）
『キャンセル』を選ぶと、元の画面に戻ります。

閉じて保存でもいいのですが、いちいち閉じずに、ファイルを開いたままにしておいて作業するときは、『上書き保存』をまめにするよう心がけましょう。

上書き保存しないと、パソコンが急に止まった時などにせっかく書き加えた内容が水の泡になる場合もあります。

ヤフーへのリンクを追加したindex.htmlファイルを開く

デスクトップにある

index.htmlファイルを『ダブルクリック』して開きましょう。

このようになっているはずですので「ヤフー」と書かれた部分を１回クリックしてみましょう。

ヤフーのページが開けばＯＫです。

リンクを作ってみるまとめ

リンクは、<a href=”hello.html”>ハロー</a>のように書いてつくることができます。

同じ場所にあるファイルの場合は、ファイルの名前(hello.html)を書けば良いです。
インターネット上のホームページは、アドレスをコピペで貼れば良いです。

リンクの文字は好きなように変えることができます。

『コピペ』と『上書き保存』ができるようになりましょう。

ホームページに欠かせない『リンク』を作ってみましょう。

リンクとは？

クリックすると、別のホームページ（ウェブサイト）が開く機能です。

↓クリックしてみてください
ヤフーを開く

※リンクをクリックするときは１回でいいです。

Yahoo!（ヤフー）のホームページが『新しいタブ』で開いたはずです。

タブとは

ブラウザの中のページの切り替えをする『見出し』のような部分です。

このように出っ張っているところをクリックすると、ページを切り替えることができます。

↓イメージとしてはこんな感じですね（タックインデックス）

コクヨ KOKUYO / カラーレーザー＆インクジェット用はかどりタックインデックス（強粘着） A4・56面・中サイズ （KPC-T692）

リンクをつくってみよう

メモ帳を開いて以下のように一字一句間違いなく記入してください。

↓文字で書くとこのようになっています。

ハロー

ファイル『名前を付けて保存』を選び、デスクトップに、『index.html』という名前で保存してください。

文字コードはUTF-8で！

いったんメモ帳は閉じて

デスクトップに、以前作った『hello.html』もあることを確認してください。

『hello.html』がない場合はこちらをクリック→ htmlファイルはテキストファイルであることを知ろう

リンクができているかを確認

index.htmlをダブルクリックします。

すると、ブラウザが立ち上がり

このように、下に線がある、色のついた「ハロー」の文字が出ているはずです。
（色は青か紫になっているかと思います）

その、『ハロー』の文字を、マウスでクリックしてください。（クリックは１回）

文字が「こんにちわ」にかわって、タブの部分とアドレスバーの部分が『hello.html』になっていることを確認してください。

これは、リンクをクリックすることによって、hello.htmlのファイルが開いて、画面が切り替わった、ということです。

トラブル　こんなときは

次の画面が開かない原因その１：間違って記入している

メモ帳で書いた文字が間違っている可能性が大です。
間違えていないか、半角で書いているか、空白やダブルクォーテーションも半角かどうか確認してください。

半角英数を入力するときには、日本語のモードではなく、半角英数モード（入力のときに変換のための下線が出ない状態）にして入力することを強くおすすめします。

次の画面が開かない原因その２： hello.htmlがない

同じデスクトップ上に、リンク先のファイル『hello.html』がないと、「ファイルが見つかりません」のような表示がでます。

※お使いのブラウザによって画像・文章は異なります。

同じデスクトップの上に、hello.htmlがあるかどうか確認してください。
他のアイコンがあって隣同士並んでいなくても構いません。

文字化けする

場合によっては、このように『文字化け』という現象を起こし、文字が読めない状態になる場合があります。

原因はまず、『文字コードをUTF-8で保存していない』と言う事が考えられます。

ですが、文字コードをUTF-8にしても文字化けがすることもあります。
その場合は、今の段階ではあまり気にしないでください。
理由は、htmlファイルというのは他に設定をかかなければいけない決まりがあり、その設定をまだ書いていないからです。

今回は、リンクを作る練習のために、リンクの部分だけを書いてみました。

htmlファイルをつくるための記述を『タグ』といいます

<a href=”ｘｘｘ”>○○</a>　のような、『< >』ではじまり『 </ >』で終わるような記号のことを『HTMLタグ』といいます。

このタグで挟み込んだり、様々な設定を記入することによって、リンクを作ったり、画像を貼ったり、デザインをしたりします。

はじめてのうちはなかなか理解しづらいかもしれませんが、いくかタグを見よう見まねで使っていくことによって、だんだんと身についてきますのでご心配なく！

インターネット上のホームページへのリンクを作ってみよう

今までは、同じデスクトップ上へのリンクでしたが、インターネット上のホームページならどこへでもリンクを貼ることが出来ます。
例として、ヤフーに飛ぶリンクを作ってみましょう。

さきほどの『index.html』をメモ帳で開き、

このように書き足します。

コピペが便利

同じような記述を繰り返し書くときは『コピペ』（コピー＆ペースト）が楽で間違えません。

コピーは日本語でいうと複写、ペーストは貼り付けと言う意味です。

このようにコピーしたい部分をマウスドラッグまたは『Shiftキー』を押しながら『← → （矢印キー）』で選び、色を反転。（青い背景にする）

コピー

メニューバーから『編集』→『コピー』でもいいですし、

マウス右クリック→ 『コピー』でもいいですし、

キーボードの『Ctrl』ボタンを押しながら『C』を押してもいいです。

これで、目には見えないですが、パソコンが文字を記憶します。

ペースト

貼り付けたい場所にカーソルを持って行って、１回クリック。
下の行に貼り付けたいときは、『Enterキー』で改行してください。

縦長の棒線『｜』がチカチカしているところが、選択場所です。

どこにチカチカがあるか必ず確認してください
この場所をちゃんと確認せず、別のところにあると、思ってもいないところにペーストされてしまいます。

『編集』→『貼り付け』でもいいですし

右クリックして『貼り付け』でもいいですし、

『Ctrlキー』を押しながら『V』を押してもいいです。

※このとき、『Ｖ』のキーは押したらすぐに離してください。
押しっぱなしにしていると、、、

こんなふうにダダダーっと連続コピーされてしまいます。

コピペはキーボードでやるのがおすすめ

慣れてくると『Ctrl + C』『Ctrl + V』のように、キーボードでコピペをするのが速くて楽になります。
ですが、結果が同じならご自身のやりやすい方法でやってくださって構いません。

リンクの書き替え

コピーしたら、クリックした先を書き換えたいので、　『hello.html』と言う部分を書き換えます。

hello.htmlと言う部分を選択して、『Delete』キーなどで消します。

リンクしたいホームページのアドレスをコピーします

ホームページのアドレスは、ブラウザのアドレスバーにあります。

手書きで書いてもいいのですが、間違えやすいので、コピーしたほうがいいでしょう。

今回の場合、Yahooのホームページを開き、アドレスバー（ブラウザの上の部分）を選択して青く反転させておき、
『Ctrl』＋『c』を押すなどしてコピーします。

貼り付けたい位置にカーソルをもってきて、１回クリック、『”|”』ダブルクォーテーションの間に『｜』縦棒があってチカチカしてるか確認します。

そこで『Ctrl』+『v』で貼り付けます。

無事に張り付きましたでしょうか。

これが、クリックしたら開くページ、『リンク先』になります。

リンク文字の書き替え

こんどは表から見える文字を書き換えます。

今、『ハロー』となっているかと思いますので、これを『ヤフー』に書き換えます。

これで書き換えが完了です。

ファイルを書き換えたら『上書き保存』をします

『上書き保存』とは、ファイルを増やさず、そのファイルのまま、内容を書き換えてコンピューター内に保存することを言います。

ファイルの文字などをかきかえて、表面上は書き変わっていても、この『上書き保存』という作業をしないと、本当に書き変わったことにはなっていません。

上書き保存の方法

『ファイル』→『上書き保存』でもいいですし、

キーボードの『Ctrl』と『s』を押しても上書き保存できます。

保存せずに閉じようとすると

このように聞いてきますので

そこで『保存する』を押しても上書き保存されます。

『保存しない』を選ぶと、保存せず終了します。（書き換えた内容は消え、前回保存した時の状態に戻ります）
『キャンセル』を選ぶと、元の画面に戻ります。

閉じて保存でもいいのですが、いちいち閉じずに、ファイルを開いたままにしておいて作業するときは、『上書き保存』をまめにするよう心がけましょう。

上書き保存しないと、パソコンが急に止まった時などにせっかく書き加えた内容が水の泡になる場合もあります。

ヤフーへのリンクを追加したindex.htmlファイルを開く

デスクトップにある

index.htmlファイルを『ダブルクリック』して開きましょう。

このようになっているはずですので「ヤフー」と書かれた部分を１回クリックしてみましょう。

ヤフーのページが開けばＯＫです。

リンクを作ってみるまとめ

リンクは、<a href=”hello.html”>ハロー</a>のように書いてつくることができます。

同じ場所にあるファイルの場合は、ファイルの名前(hello.html)を書けば良いです。
インターネット上のホームページは、アドレスをコピペで貼れば良いです。

リンクの文字は好きなように変えることができます。

『コピペ』と『上書き保存』ができるようになりましょう。