●　タグ命令記号を解説したHP作成入門書の通読をぜひともお薦めします。例えば、図書の例として、
1)　「はじめてのホームページ　HTML５入門」、荒石正二、(株)秀和システム発行、2011年、1380円。
2)　「超図解　HTML＆CSS辞典」、著・ユニゾン、(株)エクスメディア発行、2006年、1900円。

●　後者の「超図解　HTML＆CSS辞典」という図書を最も愛用してきた。その他にもいろいろな最新の入門書が多数ある。公共図書館 で借りて、ざーっと通読してみてください。また、通販サイト・アマゾンで、「HTML入門書」、「ホームページ作成入門書」、 「ホームページのつくり方」などのキーワードにて検索すれば、入門書を購入できることでしょう。 （HTML言語＝タグ命令記号によるウェブページ作成技法の基本は過去ほとんど変わらない。３０年近く前に作成した「htmlファイル」 は今もネット上で問題なく閲覧できる。

●　入門書が数百ページあっても、その要点とするところや基本事項は、最初のほんの数十ページ程度に集約される。後は、辞典づくり の途上でその都度入門書を紐解いて、いろいろなタグ命令記号をトライ・アンド・エラー方式で理解を深め、少しずつ使いこなして いけばよいことである。本節の後半にタグ命令記号とHPづくりの基本、HPづくりの事例などについて、さわり部分だけでも触れたい。

●　海洋辞典の各ページはごくシンプルなコンテンツ・構造で成り立ち、そこで使用されているタグ命令記号の数も極く限られている。 従ってそれらを取り扱うのに四苦八苦することは全くない。時を経てもそれらはほとんど変わってこなかった。 後述する通り、ウェブページの作成・更新はごく簡単にできる。タグ命令記号が新規に追加されたり、部分的に廃止されたりなどして、 時を経るにつれ技術進歩によって少しは変わっていくであろうが、注意を払っていれば十分対処できる。何故ならば、ブラウザで意図した通りに表示され なくなるからである。なお、ブラウザによっても表示具合は多少変化する。

●　今後とも、タグ命令記号をもって作成・更新するのが長期に見て最も安定している。時代と共にパソコンのハードウェア(機種変更)、 基本ソフト（OS）、その他アプリケーションがどんどん進化しようとも、タグ命令記号を用いての「htmlファイル」作成技法は、 そんな時代変化にほとんど左右されない。時と場所を越えて、汎用性が維持されるタグ命令記号を用いて「txtファイル」を 作成しておけば、「htmlファイル」に変換することで予見しうる将来にわたり閲覧可能であり続ける。HPの作成・更新を ずっと半永久的に続けられることになる（世界中のウェブページは基本的にこの「htmlファイル」＝html言語ファイルが表示されている）。

●　タグ命令記号によるテキストファイル作成は、メーカーが異なるどのパソコンでも可能であり、またパソコンを10年、20年後に 新機種に乗り替えても、また海洋辞典の編さん者がいずれに交代することがあっても、その技法を心得れば何の支障もなく円滑に 作成・更新が可能である。また、それらのタグ命令記号や使い方の基本は半永久的に同じであり、いつの時代になってもぶれることなく、 辞典を簡単に作成・更新できるのが最大の強みである。
　

●　タグ命令記号＝html言語によるウェブページ作成に関する１～２冊の入門書を手元に準備しておくことが推奨される。そして、 ざっと通読し（特に最初の数10ページに記されるイントロダクション)、その基本的な仕組みを理解する。

●　作成したウェブページをネット上で閲覧するには、ネット上でのアドレスである「ドメイン」を取得する必要があるが、 「海洋辞典」については、既にムームードメイン社」を通じてドメインを登録・取得済みである。 URLは「http://www.oceandictionary.jp」である。なお、辞典づくりを後継編さん者に託すまでのドメインやサーバーの契約延長・ 支払い手続きについては前節の通りである。

●　次に、24時間世界中の通信網とつながっているサーバーが必要である。24時間365日ネットに接続される専用サーバーを自宅に設営 するのも一つの方法であるが、個人がこれをするには、相当の技術力が必要である。特にウイルス対策や深刻な通信障害発生時における 対応などのために多大の時間・金力と労力がいる。自宅に自前のサーバーを設営することはとても薦められない。 しっかりしたウイルス対策がなされ、サービスも細やかに行き届いているレンタル方式が最も賢明であり安心できる。

●　かくして、「海洋辞典」の全データをアップロード(送信)し、キープしておくためのサーバーをレンタルする（ホスティング サービス会社との契約による）。現在「ロリポップ社 （Lolipop）」というホスティング提供会社と契約済みであり、最大容量160GBまで利用 できる。
（サーバーには「htmlファイル」だけでなく、「txtファイル」をもアップロードしているので、サーバー容量を必要以上に浪費して いることになるが、本来アップする必要のない「txtファイル」を削除すれば、サーバー使用容量のほぼ半分となり十分な余裕がある。 拡張子htmlとtxtの両ファイルを毎回仕分けして、「htmlファイル」だけをアップすることが面倒なだけである。なお、「x」から 始まる画像ファイル（拡張子は「.jpg」あるいは「.gif」のファイル」は一切アップロードしていない。

● ドメイン登録契約とレンタルサーバー契約の毎年の延長は「車の両輪」であり、どちらを欠いてもウェブサイトを維持できなくなる。 ドメインもサーバーも毎年１年単位で、かつ「非自動」で延長してきた。毎年忘れないで、２月中旬頃を目途に延長手続きと支払いを 完了する（期限は３月２７～３１日に設定されている）。毎年、税務の確定申告（２月中旬から３月中旬）の時期を迎えるたびに、 契約延長・支払いを思い出すことにしてきた。

●　次に、作成・更新した「htmlファイル」を、「ftpソフト、またはffftpソフト」をもってサーバーにアップロードする。ソフトは ネット上のフリーソフトをダウンロードし利用してきた。「Lolipop社」もそのソフトを提供しているが、使用したことはない。 それをダウンロードした後は、必要な設定を行なうことになる（ホスト名、ホストアドレス、ユーザー名、パスワードなどの入力を要する）。 ftpソフトの取得と設定の詳細については次節「ftpソフトによるファイル・画像などのアップロード法」を参照。

●　例えば、自宅のパソコンで辞典のいずれかの「txtファイル」をダブルクリックすると、どのWindowsパソコンにも標準装備されて いるアプリ「メモ帳」が立ちあがり、ファイルが開かれる。それに加筆修正を加えた後、上書き保存した後、それを「htmlファイル」 に変換し、ftpソフトでサーバーに送信する。その結果、サーバー内で修正済みのhtmlファイルが既存ファイルに上書き保存され、 ウェブページが更新される。

●　さて、「txtファイル」から「htmlファイル」に変換されて「変換済みとなったhtmlファイル」にさらに加筆修正することで、 更新作業を続行することはできる。ただし、作業終了時には「txtファイル」へ変換して、「txtファイル」そのものについてもアップデートしておく ことが必要である。改めて加筆修正を行なうのは、その「txtファイル」を起点にするからである。「htmlファイル」を起点にして 加筆修正することはできない。

●　さて、当該加筆修正済み「htmlファイル」をクリックして閲覧すると、データが更新されていることが分かる。作業に慣れてくれば、 「txtファイル」上で更新作業をしながら、時に「htmlファイル」に変換した後、それをブラウザで閲覧できる。そして「htmlファイル」 に加筆修正を行ない上書き保存した後ブラウザでファイルを「再読み込み」すれば再び修正済みページを閲覧できる。 サーバーに接続せず、自身のパソコン内で自己完結的に、正常に加筆修正されたり、リンクされているかを確認するという方法が 最も合理的で、余裕をもって辞典づくりを行える。なお、「htmlファイル」をftpソフトで随時アップロードし、かつほぼ同時にネット上 で更新内容を確認することもできる。ただし、セキュリティの観点から、サーバーへの長時間接続は良くないと考え、こまめに接続した うえで、完了したファイルのみを一括アップロードしてきた。

●　「メモ帳」でなくとも、マイクロソフトの「ワード」を立ち上げ、文章を普通に書いた後、それをテキストファイル　 (拡張子「.txt」のファイル)　に「名付けて保存」する。ファイル名には半角英数字で書き込む。ツールバーにて、「txtファイル」を 上書きしておいた後に、「htmlファイル」に変換する。それをクリックすることで、ページを閲覧できる。 だが、「メモ帳」を用いてウェブページを作るのが最もシンプルで扱いやすい。

●　タグ（すなわち、＜＞や＜／＞）の中に命令記号や数字を書き入れることによって、ブラウザに対して表示法（見え方、情報の 翻訳方法）を命令する。大きくは２種の命令（コマンド）がある。命令記号のアルファベットは大文字でも小文字でもよいが、半角英数字である 必要がある。
・　＜hr＞や＜br＞のようにタグの単独記述をもって、表示法を命令できるタグ（独立型コマンド）。例えば、横線一本を引いたり、 改行することができる。
・　他は、＜font color="red"＞……＜／font＞のように、文章・字句の間に挟み込むようにして記述するタグ（範囲指定型）。後ろのタグ では「color」を省略可能。
　　例えば　＜i＞……＜／i＞。これによって囲まれた文章は斜めの文字（イタリック体）として表示される。 このように、タグとは、ネット閲覧ソフトのブラウザに対して画面表示法を命令する記号のことである。

●　Windowsパソコンに標準装備されている「メモ帳」（テキスト文書作成ソフト）を起動させ、何でもよいから１行の文章を書いて みる。そして、その文章の両側（文頭と末尾）にタグという命令記号を付ける。例えば、文頭に＜B＞、末尾に＜/B＞を付けると、文章は 太いブロック体の文字で表示される。。
別の命令記号をもって、文字を大きくしたり、下線を引いたり、改行したり、表を作成したり、文字やフレーム内に色を付けたり、 画像を貼り付けたり、他のページ（別のファイル）や他人他社のウェブサイトへジャンプ(リンク)することができる。

●　重要なことは、上記の＜B＞＜／B＞、＜font color="red"＞……＜／font＞などのタグは全て（＜、＞、／を含めて）、 半角英数字で書くことである。ただし、英字は大文字でも小文字でもよい。
また、ごく少数の例外を除いて、＜ｂ＞……＜／ｂ＞のように、対象とする文章や文字をはさむこと。 ＜font size-"5"＞＜b＞と＜／b＞＜/font＞とで挟みこまれた文章・文字がブロック体で、かつ文字のサイズが大きく表示される ことになる。属性・変数の５が２となれば、標準文字よりもかなり小さく表示される。 字句に下線を引いたり、色をつけたり、大きく表示したり、イタリック体にすることができる。 ＜FONT COLOR="blue"＞と＜／FONT＞との間に挟まれた文章は青字で表示されるという具合であり、基本はいたってシンプルである。

文章の末尾に＜BR＞を付けると文章を改行できる。代わりに、＜P＞を付けると、１行あけて改行できる。 ＜br＞も＜p＞も単独でも表示可能なタグである。

●　新規に「メモ帳」で「txtファイル」を作成するには先ず最初に＜html＞＜／html＞、＜body＞＜／body＞、＜head＞＜／head＞などを記述する などの決まりがあるが（後述）、txtファイルに幾つかの文章に必要なタグを付け終えたら、ツールバーの「ファイル」にある 「名前を付けて保存」を選ぶ。次いで、「*.txt」の「　*　」に、例えば「sample」というファイル名を付けて、「sample.txt」へと 書き換える。即ち、半角英数字にてファイル名を付け、拡張子を「.txt」にして、テキストファイルとして保存する。

●　次に、この「txtフィアル」を「htmlフィアル」に変換する。再度ツールバーの「ファイル」にある「名前を付けて保存」を選ぶ。 ファイル名の後に拡張子の「.html」を付け、保存する。即ち、ファイル名「sample」に拡張子「.html」を付けて「sample.html」とし、 文章保存する。 ファイルの名は同じだが、拡張子が異なる。「txtファイル」（sample.txt）と 「htmlファイル」（sample.html）　の２つのファイル ができる。
この「sample.html」ファイルをクリックすると、ブラウザが起動し、ネッ上でウェブページを閲覧するのと同じ画像を見ることができる。

●　さらに「sample.html」を継続更新する場合は、そのまま加筆修正を加えたうえに、ツールバーの「ファイル」にある「上書き保存」を選ぶ。 そして、もう一度「htmlファイル」をクリックするか、それよりも「sample.html」画面上で右クリックして「再読み込み」をクリックすると 修正された画面となる。これを何度も繰り返して、修正内容をウェブページ上で確認しながら続行できる。

作業を終えて「sample.html」を閉じる場合は、必ずそれを「名付けて保存」して「sample.txt」ファイルに変換しておくことが必須である。 即ち「htmlファイル」で修正した内容を、「txtファイル」に上書き保存しておく必要がある。 次回加筆修正するには、「sample.html」ファイルではなく、「sample.txt」ファイルを起点にして修正作業に着手することになり、 上書き保存されていないと、最後に加筆修正した部分は「htmlファイル」には保存されていても「txtファイル」には 保存されないままになっているからである。次回「htmlファイル」を立ち上げても、そこでは修正できない（ブラウザがウェブページを 表示するだけである）。ページのアップデート・更新の起点はあくまで「txtファイル」である。

●　「海洋辞典」づくりに必要なタグ命令記号はそう多くない。通常使用するタグは、３０ほどである。他のタグを使用する必要があれば、 その都度入門書、あるいは既存の「txtファイル」、または「htmlファイル」を立ち上げ、ウェブ画面上で右クリックして「ページのソースを 表示」することで、タグの使用例を参照すればこと足りるであろう。既存の「txtファイル」をケーススタディにして、そのタグ構造、 使用例などを、ウェブページ上での表示とじっくり比べながら学ぶのは極めて有益であり、実際的である。

●　オンラインで実際にウェブページを見ながらツールバーの「表示」→「ソース」をクリックしても、そのページがどんなタグで 作成されているか（ページのソース）を知ることができる。今日ではネット上のほとんどのページは複雑にできていようが、 「海洋辞典」のそれは極めてシンプルとなっている。
複雑化すればするほど、辞典のメンテナンスやアップデート、加筆修正などにおける負担が大きくなり、次世代の後継編さん者はそれだけ 辞典づくりに難儀するリスクが高まるのを危惧する。

ただし、タグの＜＞、＜／＞、およびその中の英数字や記号のすべてを半角にすること。全角で書いた場合、あるいはわずかな記載ミス でも、ブラウザはその機能(命令内容)を全く理解せず、ホームページは正しく表示されない。

＜html＞
＜body＞
０　タグを使って作成したサンプルです。＜br＞
１　文字を書いてみる。「ocean」を書く。＜br＞
２　＜font size="5"＞文字を大きくする。＜/font＞＜br＞
３　＜font color="red"＞文字の色を赤くする。＜/font＞＜br＞
４　＜b＞ゴシック体にする。＜/b＞＜br＞
５　下に一行あける。＜p＞
６　＜i＞Ocean is beautiful.＜/i＞イタリック体(斜字)にする。＜br＞
７　＜u＞下線をひく。＜/u＞＜br＞
＜hr＞ ＜center＞８　上下の線ではさみこむ。＜/center＞＜br＞
＜hr width="20%" font color="green"＞ ＜img src="ocean2.jpg"＞
９　上に「ocean2」という名前の画像を入れる。＜br＞
１０　＜a href="ocean1.html"＞「ocean1.html」＜/a＞と名付けた、同じフォルダーにあるファイル「ocean1」とリンクする。＜br＞
１１　ネット上のサイト＜a href="http://www.yahoo.co.jp"＞ヤフー＜/a＞のトップページとリンクする。＜br＞
＜/body＞
＜/html＞


（１）　決まり事として、最初と最後の＜html＞と＜/html＞は、その間にはさまれた文章は「html言語」で書かれていること、即ちこの ページは「htmlファイル」であることをブラウザに示す。必要不可欠の命令タグ。
　 ＜body＞と＜/body＞ではさまれた文章がこのページの本文であることをブラウザへ示す命令記号である。 いずれもページ作成時は必ずこれらを必ず記入する。

（２）　上記を書き終えたら、そのファイルを「txtファイル」として「名前を付けて保存」する。例えば、ファイル名を半角英数字 にて任意の名前、例えば「sample20」とし、拡張子「.txt」を書き添えて、「sample20.txt」を保存する。つまり、 「*.txt」を「sample20.txt」と書き換える）。

（３）　その「txtファイル」を「htmlファイル」に変換するために「名前を付けて保存する」。即ち、今度は拡張子として「.html」 を付け加えて保存する。つまり、「sample20」→　「sample20.html」とする。ファイルの名は同じだが、拡張子は「.html」となっている）。
これによって、「txtファイル」（sample20.txt）と「htmlファイル」（sample.html）の２つのファイルができることになる。 ファイル名は半角英数字のみで書くことが決まり。文字数は８文字以内という制限がある。それ以上の場合は、例えば、 「ocean_pacifico.html」のように「 _ 」でつなぐことで長くできる。「＝、／、％」などの記号は使えないというのが決まりである。

（４）　この「sample20.html」ファイルをクリックすると、ブラウザが自動的に立ち上がり、ネッ上でHPを閲覧するのと同じ 表示となる。その表示とは下記のようなものとなる。いずれのタグがブラウザに対しどのような表示を 命令しているかが理解できる。

０　タグを使って作成したサンプルです。
１　文字を書いてみる。「ocean」を書く。
２　文字を大きくする。
３　文字の色を赤くする。
４　ゴシック体にする。
５　下に一行あける。

６　Ocean is beautiful.イタリック体(斜字)にする。
７　下線をひく。


---

８．　上下の線ではさみこむ。


---


９．　上に「ocean2」という名前の画像を入れる。
１０．　「ocean1.html」と名付けた、同じフォルダーにあるファイル「ocean1」とリンクする。
１１．　インターネット上のウェブサイト「ヤフー」のトップページとリンクする。

＊　タグはほとんどの場合「入れ子」となっている。 例えば、＜font size="5"＞「ヤフー」＜/font＞である。属性の値(数値)はダブルクォー テーションを付けることが推奨される。なお後ろの＜/＞では一部省略が可能である。

＊　ただし、"ocean2.jpg"という名の画像が存在しないので画像が壊れているとの表示になっているが、それが同じフォルダー内に あるのでれば、画像がそこに表示される。また、＜hr＞や＜img src＞は対ではなく単独で用いられている。

＊　なお、正式には最初の＜html＞と＜body＞との間に例えば以下の命令記号が挿入される。

＜head＞
＜meta http-equiv="Content-Type" content="text/html; charset=utf-8" /＞
＜meta name="keywords" CONTENT="ホームページの作成法、html言語、タグ事例"＞
＜title>ウェブページ作成のトライアル＜/title＞
＜/head＞

２行目は多言語表示されるべきファイルであることを示す。テキストが保存される時には文字コードとして「UTF-8」を選択した うえで保存されること。３行目はページのコンテンツのキーワードを記す。４行目のタイトルは文字通りこのファイル、ページの タイトルを記す。

＊　カラーコードは、例えば＜font color="#ffff00"＞イエローカラー＜/font＞のように、2桁ずつの１６進数（０～９、a～f）で 指定される。だが、白、赤、黄、グレー、黒、緑、イエローなどの１６色については色の名前で指定できる。例えば、 ＜font color="yellow"＞イエローカラー＜/font＞のように。

●　例えば、「海洋辞典」を構成しているファイルの一つを更新するには、テキスト文書作成ソフト「メモ帳」をもって、一例として「txt ファイル」の「eja.txt」（所在：　フォルダー「eejj」の下の階層にあるフォルダー「ej-abc」の中にある）を開く。 「eja.txt」ファイルをクリックすれば、自動的に「メモ帳」ソフトが立ち上がりファイルが開く。

　　重要なのは、既存のファイルの更新を行う場合、必ず拡張子が「.txt」となっているファイルを立ち上げて作業すること。 それ以外の方法はない。仮に「htmlファイル」の「eja.html」をクリックして立ち上げても、ブラウザが起動してHP画面が 立ち上がるだけで、そのファイル上では更新作業はできない。

●　次に、適宜加筆修正を行なった後、まず「上書き保存」をして、当該「eja.txt」ファイルの内容をアップデートする （これを常に習慣にすることが大事となる）。続いて、その「txtファイル」を「htmlファイル」に変換する。即ち、その「txtファイル」 を「名前を付けて保存」する（ツールバーの「ファイル」のプルダウンメニューにある）。つまり「.txt」の代わりに 拡張子「.html」をファイル名の末尾に付けて保存する。これで「eja.htmlファイル」が更新される。

　　ネット画面で確認したい場合は、この「htmlファイル」を立ち上げる。例えば、アップデートした後の「eja.html」ファイルを クリックすれば、ブラウザが立ち上がり、ネット画面上で辞典の見出し語「A」の画面が表示され、上手く更新されているか確認できる。

●　ところで、「メモ帳」の画面に表示されているファイルは、もはや「eja.txt」という名のテキストファイルではなく、変換後の 「eja.html」という名の「htmlファイル」になっている。そして、この「htmlファイル」画面上で、いろいろな加筆修正作業を そのまま続行することができる。

●　その作業後、その「htmlファイル」を「上書き保存」してクリックすれば、見出し語「A」の再修正後の画面が再び表示される。 また、見出し語「A」のネット画面がそのまま残されているのであれば　（通常残されている）、 その画面の上のツールバーの「表示」の「最新の情報に更新」ボタンをクリックすれば、修正済みの最新画面を見ることができる。 あるいは、マウスを右クリックしても同じである。

●　ここで最も重要なことは、加筆修正が「eja.htmlファイル」上でなされていたことである　（最初は「eja.txt」ファイル であったが）。ここで作業を終了する場合には、当該「eja.html」ファイル自身を「上書き保存」しておくと同時に、必ず忘れずに その「htmlファイル」を「名付けて保存」し、「eja.txt」ファイルに変換したうえで保存しておくことである。 即ち、「htmlファイル」上で更新した場合は、「htmlファイル」から「txtファイル」に変換し、「txtファイル」自身を最新のデータに 上書き保存しておくことが不可欠となる。何故なら次回更新する場合、「txtファイル」を起点にするから。

●　このように、「htmlファイル」上で更新作業を行ない続けた場合には、「htmlファイル」上のデータの「上書き保存」とともに、さらに 「htmlファイル」を「名付けて保存」し、「txtファイル」へ変換しておかないと、次回の更新作業時に大きな不都合が生じる。 理由は、「txtファイル」上において未だ最新データが上書き保存されていないためである。 それは、直近まで行なっていた修正内容がアップデートされていないのと同じである。次回の更新作業は、「txtファイル」を立ち上げた 上で行なわれるので、更新されていない「旧txtファイル」上で始めることになってしまう。「htmlファイル」からいきなり更新作業は できない。

●　万一この作業を忘れてしまった場合は、やむなく、更新済み（であるはず）の当該「htmlファイル」（直近の更新作業時に 「htmlファイル」を上書き保存しておいた場合）をクリックして立ち上げ、ツールバーの「表示」の「ソースの表示」を表示させ、 ＜html＞から＜/html＞までの全ての内容をコピーして、直近の「txtファイル」にペースト(貼り付け)した上で、それを「上書き保存」 して当座の対応をする他ない。

●　新規のファイル作成でも、また既存ファイルの更新作業であっても、「txtファイル」と「htmlファイル」との間を行き来しながら 両ファイルにおいて全く同じ内容を上書き保存しておくことが肝である。だが、辞典づくりを進める過程で、時に錯覚・錯誤が 生じることがある。作業が「txtファイル」か「htmlファイル」のいずれでなされたかを理解し、常々「上書き保存」か「名前を 付けて保存」を行いつつ、双方のファイルが同じ内容で保存・更新されていることが極めて大事である。辞典づくりに慣れてきた 場合でも、時に犯しやすいエラーである。このエラーのために、大量に入力したはずのデータが更新されていなかったりして、 時に思いがけない手戻りが生じることがある。

●　以上、印象的にはいかにも煩雑な操作のように見受けられるが、試しの操作を行い、何度か失敗するうちに、上記をすぐさま 理解されよう。「txtファイル」上であれ「htmlファイル」上であれ、加筆修正（アップデート）した内容が両ファイルともに同じように しっかり上書き保存されていることが肝である。

　　また、外部のウェブサイトとのリンクを貼っているが、これも将来的には多くなろう。ただし、ウェブの住所（URL）は往々にして 変更されることがあり、リンクが多くなればそれだけ修正作業が頻発し、時に修正が追いつかない恐れがある。 リンクを貼った場合には、それが正常にリンクされているかどうかを、ネット画面上で実際にクリックして確認することが極めて 大切である。何千、何万と内・外部サイトとのリンクが増えれば、その確認は大変となる。厳選しながらリンクすることが肝要である。

（２）　「ローカル・ディレクトリー（自宅で作業中のパソコン内のフォルダー／ファイルのこと）」の上ではうまくリンクされていても、 「リモート・ディレクトリー（レンタルサーバー内のフォルダー／ファイルのこと）」へアップロードして、オンラインの 画面上で実際に閲覧すると、意外と上手くリンクされていないこともある。原因はいろいろある。最も多いのが自身の思い違い、錯誤に よるものである。また、２つのディレクトリー内のフォルダー／ファイルの階層構造が完全に一致していないことによることもある （原則９９％は同じ構造になっているが、ローカルディレクトリーの「AAAUnderProcess」フォルダーのように、作業途上にあるため 未だアップロードしていないファイル／画像などがあり、思い違いが多く発生するリスクがある。今後それを少なくしておきたい）。 タグ内の一文字のエラー、一スペース（タグ内でのスペースについても、半角のスペースを空ける）のエラーであっても、ネット上 正しく表示されない。

リンクのいくつかの簡単事例について：

●　辞典のURLとフォルダー／ファイルの階層構造。
辞典のトップページ「index.html」と「mu_japan.html」というファイルの位置。
http://www.oceandictionary.jp/index.html→　ファイル「index.html」はローカルディレクトリーの第１階層にある。
http://www.oceandictionary.jp/mus/mus_japan/mu_japan.html
ファイル「mu_japan.html」は、第１階層にあるフォルダー「mus」の中にある、第２階層にあるフォルダー「mus_japan」の中に 「mu_japan.html」というファイルがあることを示している。ファイルは第３階層にあることを示す。


●　２つのファイルが同じフォルダー内にある場合
（１）　「ocean1.html」と「ocean2.html」の二つの文章ファイルが同一のフォルダー内にあるとする。そして、 「ocean1.html」という文章ファイルに「＜a href="ocean2.html"＞オーシャンページNo.2＜/a＞へジャンプする。」という文章を記述して、 ２つのファイルを同じサーバーにアップロードする。
文中の「サンプルページNo.2」をクリックすると、「ocean2.html」のページへとジャンプすることができる。

（２）　「sample1.html」の文章ファイルと画像ファイルの「image1.jpg（あるいはgif）」の二つのファイルが、同一のフォルダー内に あるとする。「sample1.html」のファイルに「＜a href="image1.jpg"＞写真１＜/a＞へジャンプする。」と記述し、そのファイルと 「image1.jpg」画像ファイルをサーバーにアップする。　「写真１」をクリックすると「image1.jpg」と名付けられた「写真１」 へジャンプし、その写真が表示される。　

（３）　「sample1.html」という文章ファイルに、「ここに写真２を貼る。＜img src="image2.jpg"＞」という文章を記述し、 その文章ファイルと「image2.jpg」の画像ファイルを同一フォルダーにアップする。
「sample1.html」を立ち上げると　「ここに写真を貼る」の後のスペースに「image2.jpg」という名の画像が表示される。

（４）　「sample1.html」という文章ファイルに、「ここに写真２を貼る。＜img src="BB／image2.jpg"＞」という文章を記述し、その文章ファイルを フォルダー「AA」に入れてアップする。 他方、フォルダー「AA」と同じ階層にあるフォルダー「BB」に画像ファイル「image2.jpg」を入れてそれらをアップする。
すると文書ファイル「sample.html」に画像「image2.jpg」の写真が表示される。 「/」は階層が上位や下位であることを示す。右に行くほど下位の階層に文書・画像ファイルがあることになる。

（５）「フォルダーA」の中に「sample1.html」の文章ファイルを収納し、他方、別の「フォルダーB１」の中に 「フォルダーB２」を収納し、その中に「sample2.html」という文章ファイル、および「image1.jpg」が収納されているとする。 これらを略図式化すれば
・　フォルダー「A」／ファイル「sample1.html」
・　フォルダー「B1」／フォルダー「B2」／ファイル「sample2.html」、画像「image2.jpg」。
ファイル「sample1.html」から「sample2.html」や「image2.jpg」にリンク・ジャンプさせたい場合は、 ＜a href="../B1/B2/sample2.html＞、あるいは＜a href="../B1/B2/image1.jpg"＞とすればよい。 ただし、フォルダー「A」「B１」は同じ階層にある。

逆に、ファイル「sample2.html」から「sample1.html」にリンクさせたい場合は、＜a href="../../A/sample1.html＞とすればよい。

（６）　画像ファイル「z1200.jpg」がフォルダー「z」の中のフォルダー「z1000」に収納されているとする。 他方、「select33.htmlファイル」が、フォルダー「randamA」の中のフォルダー「selectB」の中に収納されているとする。 そこで、文書ファイル「select33.html」においてその「z1200」画像をリンクさせたい場合、あるいは、その画像をそこに貼り付けたい 場合を想定する。略式化すれば、
・　文書フォルダー「randamA」／フォルダー「selectB」／select33.html
・　画像フォルダー「z」／「z1000」／「z1200.jpg」


・　リンクの貼り方は、＜A HREF="../../z/z1000/z1200.jpg"＞画像ナンバー1200＜/A＞とする。
　　ページ「select33.html」の画面上の「画像ナンバー1200」をクリックすると、その画像にアクセスできる。
・　また、＜IMG SRC="../../z/z1000/z1200.jpg"＞をそれに貼り付けると、ページ「select33.html」の画面上にて画像を 見ることができる。

文書ファイルや画像の相対的な位置関係（階層関係）を適切に表示する必要がある。海洋辞典のtxt・htmlファイルに記載されて いるリンクのタグ命令記号にかかる事例をご覧になれば、その絶対的・相対的パスの設定の仕方が自ずと理解されよう。

このページのトップに戻る ／Back to the Pagetop.