● これまで辞典づくりには、「タグ」と呼ばれる命令記号を用いて作成してきた。大変簡単なHP作成技法である。
このタグ命令記号を「HTML言語 (Hyper Text Markup Language)」ともいう。
いわばHTMLは、ウェブページ(ホームページ)を作るための原語の一つである。タグ命令言語をもって記述されるファイル、即ち
html言語で記述されるファイルをウェブ・ブラウザで開くと、ウェブページが表示され閲覧できる。htmlファイルはテキスト
ファイルであり、テキストエディター(例えば「メモ帳」。Windowsパソコンなどに標準装備されている)でみると、
文字の羅列である。しかし、ブラウザでみるとウェブページとして文字、画像などがきれいにレイアウトされて見える。
● タグ命令記号で記述されるファイル(=「htmlファイル」。拡張子に「.html」をもつファイルのこと)を作成するには、
パソコンに共通してインストールされているテキスト作成ソフトの「メモ帳」で十分である。まずタグ命令記号を用いて
「テキストフィアル」(拡張子に「.txt」をもつファイルのこと)を作成し、それを「htmlファイル」に「名付けて保存」し、
もって「htmlファイル」に変換し、それをブラウザで見ることになる。
● 過去に作成してきた「htmlファイル」や「txtファイル」を、HP作成専用ソフトをもって更新した場合、
どんな不都合が発生し、それにどう対処すべきなのか、経験がないので分からない。タグ命令記号で書かれた海洋辞典の「txtファイル」
は、恐らく訳の分からないものに変換されてしまい、収拾に困窮するのではないかと想像する。
HP作成専用ソフトを用いて上手く辞典のアップデートを続行できるものなのか定かでない。(タグ命令記号での作成・更新にずっと
慣れ親しんできたので、専用ソフトを用いる必要がなかった)。
● 通常では、市販ソフトは数年に一度くらいの頻度で最新化されよう(あるいは廃止されたり、ひどく改変されたりする)。ソフトがリニューアルされても、既存ファイルを将来ともに
ずっと長く問題なくアップデートを続けられるのか。ソフトによっては、リニューアルの結果、過去の古いファイルが上手く
扱えなくなることもある。また、別会社のHP作成専用ソフトに乗り換えた場合、ソフト間の整合性につき支障なく、既存ファイルの
アップデートを続行できるのかも定かでない。
● 辞典づくりに常時必要とされるタグ命令記号の数はわずか30ほどであり、またその記号構造は大変シンプルなものである。
そんな言語で「txtファイル」を新規に作成したり、既存ファイルを更新し、その後に「htmlファイル」に変換するだけで、
ウェブページを作成してこれていた。にもかかわらず、HP作成専用ソフトを使うことによって逆に、辞典づくりが複雑な作業となったり、
大きな不便や混乱をもたらすことになることを大いに懸念してきた。いずれにせよ、タグ命令記号=html言語による辞典づくりが
ベストであると言える。以下にhtml言語によるウェブページ作成技法に関する基本を取りまとめる。
● ホームページ作成専用ソフトを利用すれば、ページの見栄えがよくなり、便利にもなるかもしれないが、
次々代の後継編さん者がそのテクニックをマスターするのに多大な労力を費やしかねない。作成・更新の方法が複雑になって、
その習熟に四苦八苦することは是非避けたいところである。将来過度の負担になることを避けるために、敢えてタグ命令記号方式
という最もシンプルな方法を採用している。海洋辞典は単純なコンテンツであるにもかかわらず、専用ソフトをもってページ作成
技法をより複雑にして、凝ったコンテンツを作成するというのはなじまない。
● また、タグ命令記号の基本を知っていれば、将来どんなにウェブ作成技法が進歩しても、その基本は変わらないであろう。たとえ、
タグ命令記号が新規に追加されたり部分的に廃止されたりして、技術進歩として技法が少しは変わってはいくが、容易くキャッチ
アップすることができる。タグ方式の基礎を1990年代中期に学び、2022年までずっとその基本的ノウハウを
ベースにウェブページをアップデートしてきた。その間経験した技法の最大の変化は一つだけであった。
かつてはブラウザは多言語で書かれた「htmlファイル」に対応できず、多くの文字化けが生じていた。例えば長年、フランス語や
スペイン語の特殊文字(スペイン語の「ñ、ú、ó」など)の文字化けに悩んでいた。
だが、ある時点から一行のタグ命令を「txtファイル」に付記し、「htmlファイル」に変換し、文字コードを
「UTF-8」に変更するだけで即座に解決された。それ以来、同一ページに多言語で既述しても(例えば、
特殊文字の「àâçôîïœêèé」など)正しく表示されるようになり、技術的進歩が図られてきた。
● 辞典づくりをする以前に、ホームページビルダーなどの専用ソフトでのプログラミングを習熟するのに疲れてしまうような
ことは避けたいところである。タグ命令記号・html言語は何十年もほとんど不変であり、将来においてもほどんど
不変であると思われる。その技法の基礎的心得があれば、将来にわたり、いずれの後継者であっても、時と場所を選ばず簡単に学び、
かつすぐに辞典づくりに着手することができよう。
● シンプルなタグ技法で作成するのがベストであり、辞典づくりを複雑にしないことが最も大事である。後継者は
辞典コンテンツの向上・進化に力を最大限に注ぐのが本来の有り様であろう。仮に専用ソフトによる作成に長けることがあったとしても、
次世代や次々世代の編さん者はその習熟にお手上げとなり、辞典づくりにネガティブになるとも限らない。
後々のことを考えれば、編さん者は最も簡単なやり方を後代へ申し送りすることが、辞典づくりの持続可能性を高めることに
つながるものと思料する。海と語学に関心のある後継者が、最もシンプルにして容易く、辞典をアップデート・進化させることができる
ことこそが最も大切なことに違いない。
結論として、海洋辞典づくりには、タグ命令記号による「txtファイル」の作成→「htmlファイル」への変換によることを強く勧めたい。
2.ホームページ(HP)づくりの基本書の通読について
● タグ命令記号、html言語によるホームページ作成入門書をひも解きざっと通読すれば、その基本を理解できよう。
(ウェブブラウザは、html言語で書かれたテキストファイルの内容を翻訳して、ネット画面上に表示するためのソフトといえる)。
html言語の基本を心得たうえで、その後は、その都度タグ使用事例を参照しながら、言語を記述しトライ&エラーで学習していけば事足りる。
30ほどのタグ命令記号が基本であり、タグを過度に多用して辞典のコンテンツや構造をいたずらに複雑にすることはお勧めしない。
複雑にすればするほど、次々世代の後継者に負担を強い入り、また後継者をリクルートするうえでの選択の幅を狭めることにもなり
かねない。
● タグ命令記号を解説したHP作成入門書の通読をぜひともお薦めします。例えば、図書の例として、
1) 「はじめてのホームページ HTML5入門」、荒石正二、(株)秀和システム発行、2011年、1380円。
2) 「超図解 HTML&CSS辞典」、著・ユニゾン、(株)エクスメディア発行、2006年、1900円。
● 後者の「超図解 HTML&CSS辞典」という図書を最も愛用してきた。その他にもいろいろな最新の入門書が多数ある。公共図書館
で借りて、ざーっと通読してみてください。また、通販サイト・アマゾンで、「HTML入門書」、「ホームページ作成入門書」、
「ホームページのつくり方」などのキーワードにて検索すれば、入門書を購入できることでしょう。
(HTML言語=タグ命令記号によるウェブページ作成技法の基本は過去ほとんど変わらない。30年近く前に作成した「htmlファイル」
は今もネット上で問題なく閲覧できる。
● 入門書が数百ページあっても、その要点とするところや基本事項は、最初のほんの数十ページ程度に集約される。後は、辞典づくり
の途上でその都度入門書を紐解いて、いろいろなタグ命令記号をトライ・アンド・エラー方式で理解を深め、少しずつ使いこなして
いけばよいことである。本節の後半にタグ命令記号とHPづくりの基本、HPづくりの事例などについて、さわり部分だけでも触れたい。
● 海洋辞典の各ページはごくシンプルなコンテンツ・構造で成り立ち、そこで使用されているタグ命令記号の数も極く限られている。
従ってそれらを取り扱うのに四苦八苦することは全くない。時を経てもそれらはほとんど変わってこなかった。
後述する通り、ウェブページの作成・更新はごく簡単にできる。タグ命令記号が新規に追加されたり、部分的に廃止されたりなどして、
時を経るにつれ技術進歩によって少しは変わっていくであろうが、注意を払っていれば十分対処できる。何故ならば、ブラウザで意図した通りに表示され
なくなるからである。なお、ブラウザによっても表示具合は多少変化する。
● 今後とも、タグ命令記号をもって作成・更新するのが長期に見て最も安定している。時代と共にパソコンのハードウェア(機種変更)、
基本ソフト(OS)、その他アプリケーションがどんどん進化しようとも、タグ命令記号を用いての「htmlファイル」作成技法は、
そんな時代変化にほとんど左右されない。時と場所を越えて、汎用性が維持されるタグ命令記号を用いて「txtファイル」を
作成しておけば、「htmlファイル」に変換することで予見しうる将来にわたり閲覧可能であり続ける。HPの作成・更新を
ずっと半永久的に続けられることになる(世界中のウェブページは基本的にこの「htmlファイル」=html言語ファイルが表示されている)。
● タグ命令記号によるテキストファイル作成は、メーカーが異なるどのパソコンでも可能であり、またパソコンを10年、20年後に
新機種に乗り替えても、また海洋辞典の編さん者がいずれに交代することがあっても、その技法を心得れば何の支障もなく円滑に
作成・更新が可能である。また、それらのタグ命令記号や使い方の基本は半永久的に同じであり、いつの時代になってもぶれることなく、
辞典を簡単に作成・更新できるのが最大の強みである。
3.HP作成・更新からネット公開までの準備と大まかな流れについて
● 前提となるパソコン環境としては、普通のパソコン(デスクトップタイプが作業しやすい)に加えて、ネット通信回線に接続され
ネットが快適にできる状態であることが必要である。グーグルなどのブラウザでウェブサイトを閲覧でき、またメールのやりとりも
可能な、現代では普通のネット接続環境があれば十分である。
● タグ命令記号=html言語によるウェブページ作成に関する1~2冊の入門書を手元に準備しておくことが推奨される。そして、
ざっと通読し(特に最初の数10ページに記されるイントロダクション)、その基本的な仕組みを理解する。
● 作成したウェブページをネット上で閲覧するには、ネット上でのアドレスである「ドメイン」を取得する必要があるが、
「海洋辞典」については、既にムームードメイン社」を通じてドメインを登録・取得済みである。
URLは「http://www.oceandictionary.jp」である。なお、辞典づくりを後継編さん者に託すまでのドメインやサーバーの契約延長・
支払い手続きについては前節の通りである。
● 次に、24時間世界中の通信網とつながっているサーバーが必要である。24時間365日ネットに接続される専用サーバーを自宅に設営
するのも一つの方法であるが、個人がこれをするには、相当の技術力が必要である。特にウイルス対策や深刻な通信障害発生時における
対応などのために多大の時間・金力と労力がいる。自宅に自前のサーバーを設営することはとても薦められない。
しっかりしたウイルス対策がなされ、サービスも細やかに行き届いているレンタル方式が最も賢明であり安心できる。
● かくして、「海洋辞典」の全データをアップロード(送信)し、キープしておくためのサーバーをレンタルする(ホスティング
サービス会社との契約による)。現在「ロリポップ社 (Lolipop)」というホスティング提供会社と契約済みであり、最大容量160GBまで利用
できる。
(サーバーには「htmlファイル」だけでなく、「txtファイル」をもアップロードしているので、サーバー容量を必要以上に浪費して
いることになるが、本来アップする必要のない「txtファイル」を削除すれば、サーバー使用容量のほぼ半分となり十分な余裕がある。
拡張子htmlとtxtの両ファイルを毎回仕分けして、「htmlファイル」だけをアップすることが面倒なだけである。なお、「x」から
始まる画像ファイル(拡張子は「.jpg」あるいは「.gif」のファイル」は一切アップロードしていない。
● ドメイン登録契約とレンタルサーバー契約の毎年の延長は「車の両輪」であり、どちらを欠いてもウェブサイトを維持できなくなる。
ドメインもサーバーも毎年1年単位で、かつ「非自動」で延長してきた。毎年忘れないで、2月中旬頃を目途に延長手続きと支払いを
完了する(期限は3月27~31日に設定されている)。毎年、税務の確定申告(2月中旬から3月中旬)の時期を迎えるたびに、
契約延長・支払いを思い出すことにしてきた。
● 次に、作成・更新した「htmlファイル」を、「ftpソフト、またはffftpソフト」をもってサーバーにアップロードする。ソフトは
ネット上のフリーソフトをダウンロードし利用してきた。「Lolipop社」もそのソフトを提供しているが、使用したことはない。
それをダウンロードした後は、必要な設定を行なうことになる(ホスト名、ホストアドレス、ユーザー名、パスワードなどの入力を要する)。
ftpソフトの取得と設定の詳細については次節「ftpソフトによるファイル・画像などのアップロード法」を参照。
● 例えば、自宅のパソコンで辞典のいずれかの「txtファイル」をダブルクリックすると、どのWindowsパソコンにも標準装備されて
いるアプリ「メモ帳」が立ちあがり、ファイルが開かれる。それに加筆修正を加えた後、上書き保存した後、それを「htmlファイル」
に変換し、ftpソフトでサーバーに送信する。その結果、サーバー内で修正済みのhtmlファイルが既存ファイルに上書き保存され、
ウェブページが更新される。
● さて、「txtファイル」から「htmlファイル」に変換されて「変換済みとなったhtmlファイル」にさらに加筆修正することで、
更新作業を続行することはできる。ただし、作業終了時には「txtファイル」へ変換して、「txtファイル」そのものについてもアップデートしておく
ことが必要である。改めて加筆修正を行なうのは、その「txtファイル」を起点にするからである。「htmlファイル」を起点にして
加筆修正することはできない。
● さて、当該加筆修正済み「htmlファイル」をクリックして閲覧すると、データが更新されていることが分かる。作業に慣れてくれば、
「txtファイル」上で更新作業をしながら、時に「htmlファイル」に変換した後、それをブラウザで閲覧できる。そして「htmlファイル」
に加筆修正を行ない上書き保存した後ブラウザでファイルを「再読み込み」すれば再び修正済みページを閲覧できる。
サーバーに接続せず、自身のパソコン内で自己完結的に、正常に加筆修正されたり、リンクされているかを確認するという方法が
最も合理的で、余裕をもって辞典づくりを行える。なお、「htmlファイル」をftpソフトで随時アップロードし、かつほぼ同時にネット上
で更新内容を確認することもできる。ただし、セキュリティの観点から、サーバーへの長時間接続は良くないと考え、こまめに接続した
うえで、完了したファイルのみを一括アップロードしてきた。
4. タグ命令記号とHPづくりの基本
● HTML言語(タグ形式の命令記号)で書かれた「htmlファイル」(末尾に拡張子「.html」をもつファイル)をダブルクリックすると、
ブラウザ(ネット閲覧ソフト) が立ちあがり、ホームページ画面となる。
「htmlファイル」を作成するには、Windowsパソコンに標準装備されるテキスト作成ソフトの「メモ帳」を立ち上げ、文章を作成して
タグ命令記号を書き入れて「txtフィアル」を作成する。それを「htmlファイル」に変換し(「txtファイル」を「htmlファイル」
に名付けて保存する)、それをブラウザで閲覧する。(「htmlファイル」をもっていきなり作成はできない。それをクリックしてもウェブ
ページが立ちあがるだけ。なお、HP画面のツールバーにある「ソースをみる」と、タグ記号も含めたテキストの表示となる。
大変重宝するテキスト機能である。
● 「メモ帳」でなくとも、マイクロソフトの「ワード」を立ち上げ、文章を普通に書いた後、それをテキストファイル
(拡張子「.txt」のファイル) に「名付けて保存」する。ファイル名には半角英数字で書き込む。ツールバーにて、「txtファイル」を
上書きしておいた後に、「htmlファイル」に変換する。それをクリックすることで、ページを閲覧できる。
だが、「メモ帳」を用いてウェブページを作るのが最もシンプルで扱いやすい。
● タグ(すなわち、<>や</>)の中に命令記号や数字を書き入れることによって、ブラウザに対して表示法(見え方、情報の
翻訳方法)を命令する。大きくは2種の命令(コマンド)がある。命令記号のアルファベットは大文字でも小文字でもよいが、半角英数字である
必要がある。
・ <hr>や<br>のようにタグの単独記述をもって、表示法を命令できるタグ(独立型コマンド)。例えば、横線一本を引いたり、
改行することができる。
・ 他は、<font color="red">……</font>のように、文章・字句の間に挟み込むようにして記述するタグ(範囲指定型)。後ろのタグ
では「color」を省略可能。
例えば <i>……</i>。これによって囲まれた文章は斜めの文字(イタリック体)として表示される。
このように、タグとは、ネット閲覧ソフトのブラウザに対して画面表示法を命令する記号のことである。
● Windowsパソコンに標準装備されている「メモ帳」(テキスト文書作成ソフト)を起動させ、何でもよいから1行の文章を書いて
みる。そして、その文章の両側(文頭と末尾)にタグという命令記号を付ける。例えば、文頭に<B>、末尾に</B>を付けると、文章は
太いブロック体の文字で表示される。。
別の命令記号をもって、文字を大きくしたり、下線を引いたり、改行したり、表を作成したり、文字やフレーム内に色を付けたり、
画像を貼り付けたり、他のページ(別のファイル)や他人他社のウェブサイトへジャンプ(リンク)することができる。
● 重要なことは、上記の<B></B>、<font color="red">……</font>などのタグは全て(<、>、/を含めて)、
半角英数字で書くことである。ただし、英字は大文字でも小文字でもよい。
また、ごく少数の例外を除いて、<b>……</b>のように、対象とする文章や文字をはさむこと。
<font size-"5"><b>と</b></font>とで挟みこまれた文章・文字がブロック体で、かつ文字のサイズが大きく表示される
ことになる。属性・変数の5が2となれば、標準文字よりもかなり小さく表示される。
字句に下線を引いたり、色をつけたり、大きく表示したり、イタリック体にすることができる。
<FONT COLOR="blue">と</FONT>との間に挟まれた文章は青字で表示されるという具合であり、基本はいたってシンプルである。
文章の末尾に<BR>を付けると文章を改行できる。代わりに、<P>を付けると、1行あけて改行できる。
<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) の2つのファイル
ができる。
この「sample.html」ファイルをクリックすると、ブラウザが起動し、ネッ上でウェブページを閲覧するのと同じ画像を見ることができる。
● さらに「sample.html」を継続更新する場合は、そのまま加筆修正を加えたうえに、ツールバーの「ファイル」にある「上書き保存」を選ぶ。
そして、もう一度「htmlファイル」をクリックするか、それよりも「sample.html」画面上で右クリックして「再読み込み」をクリックすると
修正された画面となる。これを何度も繰り返して、修正内容をウェブページ上で確認しながら続行できる。
作業を終えて「sample.html」を閉じる場合は、必ずそれを「名付けて保存」して「sample.txt」ファイルに変換しておくことが必須である。
即ち「htmlファイル」で修正した内容を、「txtファイル」に上書き保存しておく必要がある。
次回加筆修正するには、「sample.html」ファイルではなく、「sample.txt」ファイルを起点にして修正作業に着手することになり、
上書き保存されていないと、最後に加筆修正した部分は「htmlファイル」には保存されていても「txtファイル」には
保存されないままになっているからである。次回「htmlファイル」を立ち上げても、そこでは修正できない(ブラウザがウェブページを
表示するだけである)。ページのアップデート・更新の起点はあくまで「txtファイル」である。
● 「海洋辞典」づくりに必要なタグ命令記号はそう多くない。通常使用するタグは、30ほどである。他のタグを使用する必要があれば、
その都度入門書、あるいは既存の「txtファイル」、または「htmlファイル」を立ち上げ、ウェブ画面上で右クリックして「ページのソースを
表示」することで、タグの使用例を参照すればこと足りるであろう。既存の「txtファイル」をケーススタディにして、そのタグ構造、
使用例などを、ウェブページ上での表示とじっくり比べながら学ぶのは極めて有益であり、実際的である。
● オンラインで実際にウェブページを見ながらツールバーの「表示」→「ソース」をクリックしても、そのページがどんなタグで
作成されているか(ページのソース)を知ることができる。今日ではネット上のほとんどのページは複雑にできていようが、
「海洋辞典」のそれは極めてシンプルとなっている。
複雑化すればするほど、辞典のメンテナンスやアップデート、加筆修正などにおける負担が大きくなり、次世代の後継編さん者はそれだけ
辞典づくりに難儀するリスクが高まるのを危惧する。
5.タグによるHP作成・更新の練習
(1) テキスト文書作成アプリ「メモ帳」を立ち上げ、下記の<html><body>と</html></body>とにはさまれた以下の
0~11の文章を例示の通りに全部書き込んで見てください。
ただし、タグの<>、</>、およびその中の英数字や記号のすべてを半角にすること。全角で書いた場合、あるいはわずかな記載ミス
でも、ブラウザはその機能(命令内容)を全く理解せず、ホームページは正しく表示されない。
<html>
<body>
0 タグを使って作成したサンプルです。<br>
1 文字を書いてみる。「ocean」を書く。<br>
2 <font size="5">文字を大きくする。</font><br>
3 <font color="red">文字の色を赤くする。</font><br>
4 <b>ゴシック体にする。</b><br>
5 下に一行あける。<p>
6 <i>Ocean is beautiful.</i>イタリック体(斜字)にする。<br>
7 <u>下線をひく。</u><br>
<hr>
<center>8 上下の線ではさみこむ。</center><br>
<hr width="20%" font color="green">
<img src="ocean2.jpg">
9 上に「ocean2」という名前の画像を入れる。<br>
10 <a href="ocean1.html">「ocean1.html」</a>と名付けた、同じフォルダーにあるファイル「ocean1」とリンクする。<br>
11 ネット上のサイト<a href="http://www.yahoo.co.jp">ヤフー</a>のトップページとリンクする。<br>
</body>
</html>
(1) 決まり事として、最初と最後の<html>と</html>は、その間にはさまれた文章は「html言語」で書かれていること、即ちこの
ページは「htmlファイル」であることをブラウザに示す。必要不可欠の命令タグ。
<body>と</body>ではさまれた文章がこのページの本文であることをブラウザへ示す命令記号である。
いずれもページ作成時は必ずこれらを必ず記入する。
(2) 上記を書き終えたら、そのファイルを「txtファイル」として「名前を付けて保存」する。例えば、ファイル名を半角英数字
にて任意の名前、例えば「sample20」とし、拡張子「.txt」を書き添えて、「sample20.txt」を保存する。つまり、
「*.txt」を「sample20.txt」と書き換える)。
(3) その「txtファイル」を「htmlファイル」に変換するために「名前を付けて保存する」。即ち、今度は拡張子として「.html」
を付け加えて保存する。つまり、「sample20」→ 「sample20.html」とする。ファイルの名は同じだが、拡張子は「.html」となっている)。
これによって、「txtファイル」(sample20.txt)と「htmlファイル」(sample.html)の2つのファイルができることになる。
ファイル名は半角英数字のみで書くことが決まり。文字数は8文字以内という制限がある。それ以上の場合は、例えば、
「ocean_pacifico.html」のように「 _ 」でつなぐことで長くできる。「=、/、%」などの記号は使えないというのが決まりである。
(4) この「sample20.html」ファイルをクリックすると、ブラウザが自動的に立ち上がり、ネッ上でHPを閲覧するのと同じ
表示となる。その表示とは下記のようなものとなる。いずれのタグがブラウザに対しどのような表示を
命令しているかが理解できる。
* タグはほとんどの場合「入れ子」となっている。 例えば、<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>
2行目は多言語表示されるべきファイルであることを示す。テキストが保存される時には文字コードとして「UTF-8」を選択した
うえで保存されること。3行目はページのコンテンツのキーワードを記す。4行目のタイトルは文字通りこのファイル、ページの
タイトルを記す。
* カラーコードは、例えば<font color="#ffff00">イエローカラー</font>のように、2桁ずつの16進数(0~9、a~f)で
指定される。だが、白、赤、黄、グレー、黒、緑、イエローなどの16色については色の名前で指定できる。例えば、
<font color="yellow">イエローカラー</font>のように。
6.ページの更新方法について (再掲)
● 例えば、「海洋辞典」を構成しているファイルの一つを更新するには、テキスト文書作成ソフト「メモ帳」をもって、一例として「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ファイル」上であれ、加筆修正(アップデート)した内容が両ファイルともに同じように
しっかり上書き保存されていることが肝である。
7.リンクの仕方、事例、その留意事項/リンクが正常になされているか、検証の重要性
(1) 辞典内の全ての「htmlファイル」は他の一つ又は複数のファイルと何らかの形でリンクされている。現在までのところは、
意図的にリンクを限定的にしている。それには理由がある。当初フォルダー/ファイルの階層構造の変更を繰り返しいて、後で
手戻りとならないようにしっかりと固めておく必要があった。階層が不安定で変更を繰り返していると、その度に数多くのファイル
のリンクを修正する必要が生じるからである。構造がしっかりと固まれば、より多くのリンクがなされることになる。
(2022年3月ではほぼ固まっている)
また、外部のウェブサイトとのリンクを貼っているが、これも将来的には多くなろう。ただし、ウェブの住所(URL)は往々にして
変更されることがあり、リンクが多くなればそれだけ修正作業が頻発し、時に修正が追いつかない恐れがある。
リンクを貼った場合には、それが正常にリンクされているかどうかを、ネット画面上で実際にクリックして確認することが極めて
大切である。何千、何万と内・外部サイトとのリンクが増えれば、その確認は大変となる。厳選しながらリンクすることが肝要である。
(2) 「ローカル・ディレクトリー(自宅で作業中のパソコン内のフォルダー/ファイルのこと)」の上ではうまくリンクされていても、
「リモート・ディレクトリー(レンタルサーバー内のフォルダー/ファイルのこと)」へアップロードして、オンラインの
画面上で実際に閲覧すると、意外と上手くリンクされていないこともある。原因はいろいろある。最も多いのが自身の思い違い、錯誤に
よるものである。また、2つのディレクトリー内のフォルダー/ファイルの階層構造が完全に一致していないことによることもある
(原則99%は同じ構造になっているが、ローカルディレクトリーの「AAAUnderProcess」フォルダーのように、作業途上にあるため
未だアップロードしていないファイル/画像などがあり、思い違いが多く発生するリスクがある。今後それを少なくしておきたい)。
タグ内の一文字のエラー、一スペース(タグ内でのスペースについても、半角のスペースを空ける)のエラーであっても、ネット上
正しく表示されない。
リンクのいくつかの簡単事例について:
● 辞典のURLとフォルダー/ファイルの階層構造。
辞典のトップページ「index.html」と「mu_japan.html」というファイルの位置。
http://www.oceandictionary.jp/index.html→ ファイル「index.html」はローカルディレクトリーの第1階層にある。
http://www.oceandictionary.jp/mus/mus_japan/mu_japan.html
ファイル「mu_japan.html」は、第1階層にあるフォルダー「mus」の中にある、第2階層にあるフォルダー「mus_japan」の中に
「mu_japan.html」というファイルがあることを示している。ファイルは第3階層にあることを示す。
● 2つのファイルが同じフォルダー内にある場合
(1) 「ocean1.html」と「ocean2.html」の二つの文章ファイルが同一のフォルダー内にあるとする。そして、
「ocean1.html」という文章ファイルに「<a href="ocean2.html">オーシャンページNo.2</a>へジャンプする。」という文章を記述して、
2つのファイルを同じサーバーにアップロードする。
文中の「サンプルページNo.2」をクリックすると、「ocean2.html」のページへとジャンプすることができる。
(2) 「sample1.html」の文章ファイルと画像ファイルの「image1.jpg(あるいはgif)」の二つのファイルが、同一のフォルダー内に
あるとする。「sample1.html」のファイルに「<a href="image1.jpg">写真1</a>へジャンプする。」と記述し、そのファイルと
「image1.jpg」画像ファイルをサーバーにアップする。 「写真1」をクリックすると「image1.jpg」と名付けられた「写真1」
へジャンプし、その写真が表示される。
(3) 「sample1.html」という文章ファイルに、「ここに写真2を貼る。<img src="image2.jpg">」という文章を記述し、
その文章ファイルと「image2.jpg」の画像ファイルを同一フォルダーにアップする。
「sample1.html」を立ち上げると 「ここに写真を貼る」の後のスペースに「image2.jpg」という名の画像が表示される。
(4) 「sample1.html」という文章ファイルに、「ここに写真2を貼る。<img src="BB/image2.jpg">」という文章を記述し、その文章ファイルを
フォルダー「AA」に入れてアップする。
他方、フォルダー「AA」と同じ階層にあるフォルダー「BB」に画像ファイル「image2.jpg」を入れてそれらをアップする。
すると文書ファイル「sample.html」に画像「image2.jpg」の写真が表示される。
「/」は階層が上位や下位であることを示す。右に行くほど下位の階層に文書・画像ファイルがあることになる。
(5)「フォルダーA」の中に「sample1.html」の文章ファイルを収納し、他方、別の「フォルダーB1」の中に
「フォルダーB2」を収納し、その中に「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」「B1」は同じ階層にある。
逆に、ファイル「sample2.html」から「sample1.html」にリンクさせたい場合は、<a href="../../A/sample1.html>とすればよい。
(6) 画像ファイル「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.