htmlは、中身は様々なファイルのリンクアドレスで作られています。アドレスに、httpから始まるwebアドレスで説明してきたのは、webサーバー上の公開されているファイルで、誰の環境でも使えるようにしたからです。
これに対し、個別のパソコンのハードディスクのファイルも、アドレスがあります。
●ローカルアドレスを使う
パソコンの、lesson1.html が残っていたら、これを開いてみます。上のアドレスバーにアドレスが出ます。
ここにカーソルを入れて、選択状態でctrl +Cでアドレスをコピーします。
これは、win坊の環境なので、file:///C:/Users/winboys/Desktop/lesson1.html というアドレスがコピーされます。file:///というのは、http://のようなアドレスの共通語で、パソコンのファイルを表すものです。
メモ帳を開き、これを<aタグに書いてみます。
<a href="file:///C:/Users/winboys/Desktop/lesson1.html">練習ページ</a>
これをlesson0.htmlで同じデスクトップに保存し、開くと、
このアドレスは、デスクトップに仮に保存したファイルで、Win坊の環境でのアドレスで、同じアドレスを入れても、異なる環境では開かれません。このデスクトップは、パソコンにログインしたユーザーしかアクセスできません。
C:/Users/winboys/Desktop/ から、同じ C:/Users/winboys/Desktop/ のファイルへリンクしています。この場合、共通の C:/Users/winboys/Desktop/ は省略できます。
先の、lesson0.html を編集し、<a href="lesson1.html">練習ページ</a> として、確認してください。
この様なアドレスの書き方は、同じものを省略する書き方で、相対アドレスといいます。
そこで、lessonというフォルダを作り、練習ファイルはすべてここに置きます。
●フォルダの中にデータ用フォルダを作る
html以外のファイルは、サブフォルダを作ってその中にまとめると、アドレスが管理しやすいです。
その際、フォルダ名は半角英字で作ります。htmlで使えるアドレス文字は日本語全角文字は使えません。
dataというフォルダを作って、その中の画像ファイルとpdfファイルへのリンクを書いてみます。
参考のため、Win坊のデスクトップに、たまたまあったデジカメ写真と、日本語名のpdfファイルを置き、これらへのリンクを、lesson0.htmlに書いてみます。
<a href="data/IMG_20200613_103546.jpg">画像</a> <a href="data/meetを使う準備.pdf">PDFファイル</a> dataフォルダにあるファイルは、data/を追加しないといけません。Lesson0.htmlのアドレスの共通部分には、dataは含まれないので、data/を追加します。
ファイルへの直リンクなので、リンクアドレスが出ています。最初のlesson0.htmlとの共通部分は、
Lesson/までで、フォルダ内のファイルには、data/が必要なことが分かります。
この画像は、縦が4000ピクセルもありファイルサイズも４MBあり、通常はブラウザに入り切りませんが、最近のブラウザは、自動で縮小表示されています。また、pdfファイルは日本語名のものですが、windowsの環境では、アドレスに日本語が入っていても大丈夫です。しかし、webサーバーにアップして共有するには、windowsでないサーバーやコンピューターを通るので、日本語全角文字は対応していません。うっかりサーバーにアップすると、後で削除もできない事態になります。
■ポイント htmlの理解は、ファイルの名前、ファイルの種類を表す拡張子、保存場所を表すアドレスなど、パソコンの基本理解が進みます。