■表の枠線を消す
TABLE タグの属性、「BORDER」で線の太さ を設定しましたが、「BORDER="0"」にす ると表の枠線を消すことができます。
第６章 リンクの作成
①
②
文字を選択します リンクの作成
「index.html」に 5 章までで作成し た各ページへのリンクを張り、目次 を作ります。
① 「 こ の ペ ー ジ の ソ ー ス は index.html です」のあとに、改行タ グを入れます。
②「目次」と入力し、改行タグを挿 入します。
次に各ページのタイトルをそれぞれ
「色見本と改行について」「画像表示 について」「表の作り方」と入力しま す。
「色見本と改行について」という文 字を選択します。「タグ挟み込み」
メニューから「リンク」を選択しま す。
「リンク」ダイアログボックスが表示されます。「参照」ボタンをクリックします。
「ファイルを開く」ダイア ログボックスが表示されま す。デスクトップの「html」
フォルダから「color.html」
を選択し、開くボタンをクリ ックします。
指定したファイル名が入っ ていることを確認して、OK ボタンをクリックします。
リンクのタグが挿入されました。
ツールバーのボタンをクリックし、
上書き保存します。
改行タグを挿入します。
「画像表示について」と「表の 作り方」にも同様にリンクを設 定し、改行タグを挿入します。
★タグ挟み込みメニューから挿 入しても、コピー＆ペーストで 編集してもどちらでも構いませ ん。
ブラウザで表示
上書き保存し、ブラウザで表示します。
リンクをクリックして、それぞれのペ ージに正しくリンクされているか確認 します。それぞれのページからはブラ ウザの戻るボタンで戻ります。
確認したらブラウザを閉じます。
２.color.html を開く
「color.html」を開きます。
このページからも TOP ページへ戻れるようにリンクを貼ります。
段落の設定 <P>〜</P>
本文のタイトル「色見本」
以外の部分に段落を設定 します。手書きで段落タ グ<P></P>を入力します。
<P>と</P>で囲まれた部 分がひとつの段落になり ました。
★段落を設定した部分の前後には、ブラウザで表示すると 1 行分の空白が入ります。<P>
は段落を表すタグなので本来推奨される方法ではありませんが、<P></P>を書くこと
リンクの作成
行を変えて「TOP へ戻る」と入力します。第６章-1 の手順で「index.html」にリン クを貼り、上書き保存します。
ブラウザで表示
「TOP へ戻る」をクリックし、リンクが正しく設定されたか確認します。
「色見本と改行について（color.html）」と「TOP ページ（index.html）」はお互い にリンクで行き来できるようになりました。確認したらブラウザを閉じます。
段落を設定した分 一行ずつ空いています
リンクができました
３.image.html を開く
「image.html」を開きます。
このページからも TOP ペー ジへ戻れるようにしますが、
今度は画像にリンクを貼り ます。二つ目の画像のタグ を選択します。
リンクの作成
「index.html」にリンクを貼ります。リンクタグの後に「左の画像をクリックする とトップページへ戻ります。」と入力し、上書き保存します。
ブラウザで表示
ブラウザで表示して二つ目の画像をクリッ クし、リンクが正しく設定されたか確認し ます。
「画像表示について（image.html）」と「TOP ページ（index.html）」はお互いにリンクで 行き来できるようになりました。確認した らブラウザを閉じます。
４.table.html にリンクを設定
「table.html」を開きます。
このページからも TOP ページへ戻 れるようにしますが、今度はテー ブルのデータからリンクできる ようにします。試しに「産地」を 選択します。
第６章-1 の手順で「index.html」
にリンクを貼ります。
「産地」にリンクタグ<A>が入りま した。上書き保存してブラウザで 表示します。
表のデータ「産地」にリンクが設定されま した。
「表の作り方（table.html）」と「TOP ペー ジ（index.html）」はお互いにリンクで行き 来できるようになりました。確認したらブ ラウザを閉じます。
★今回は練習なので「産地」にリンクを設 定しましたが、実際にはわかりやすい場所 にリンクを作成するようにしましょう。
５.index.html を開く
目次に段落を設定します。今度 は手書きで段落タグ<P></P>を 入力します。
「外部へのリンク」と入力し、
改行タグを挿入します。
６ . 国 際 基 督 教 大 学 の ホ ー ム ペ ー ジ
（http://www.icu.ac.jp/）へのリ ンクを作る
「国際基督教大学」と入力します。
入力した文字を選択し、タグ挟み 込みメニューから「リンク」を選 択します。
「リンク」ダイアログボック スが出るので、リンク先に
「http://www.icu.ac.jp/」
と入力します。
タグが追加されました。上書き保存し、ブラウザで表示します。
「国際基督教大学」へのリン クができました。「国際基督 教大学」をクリックすると
（インターネットが繋がる 環境であれば）ICU のページ が表示されます。
■グローバルリンクとローカルリンク
他のサイトへリンクを張るときは、絶対パスで指定（アドレスを全て記入）します。
外部ページへのリンクを「グローバルリンク」といいます。
それに対して、自分のホームページ内のリンクには相対パスを使用し、これを「ロー カルリンク」といいます。
詳しくは 4 章 絶対パスと相対パスを参照してください。
７.「How to web pages at ICU」へのリンクを作る
もう一つリンクを張ります。今度は subsite にある「How to web pages at ICU」
というページです。先程作った ICU のリンクの後に改行タグを挿入します。そして、
「 How to web pages at ICU 」 と 入 力 し 、 第 ６ 章 - ６ と 同 じ 要 領 で
「http://subsite.icu.ac.jp/people/koba/webtips/」にリンクを張ります。
最後に改行タグを挿入します。
８.コメントの挿入 <!-- -->
次の行にカーソルを入れ、タグ挟み込みメニュー「その他」の中から「コメント」
を選択します。
「<!-- -->」が挿入されました。「<!--」と「-->」で囲まれた部分はホームページ 上には表示されません。
ここでは、次に新しくリンクを追加するときのために目印として「リンクはここに 追加」と書いておきます。目立つように「---」も多めに入力します。
★<!-- -->を使って、後で再編集するときに見やすいように、改行したり、コメン
９.特殊な文字の表示
タグに使用される「<」「>」や、「＆」「α」などの特殊な記号や文字は、そのまま 書いてもブラウザでは表示されません。それぞれ「<」「>」「&」「&3945」
と入力して初めて文中に表示されます。
「改行タグは<BR> です。」と入力します。
上書き保存してブラウザで表示 します。
★第６章-７でリンクした「How to web pages at ICU」にも特殊文字 の一覧があります。その他にも HTML で使用できるタグを解説し ているサイトが沢山あるので、イ ンターネットで検索してみてく ださい。