2.HTML 文書を見る方法ホームページの文書はファイル名の最後に.htm 又は.html の拡張子が付けられそれら文書をプラウザで確認するためのソフトとしては Microsoft 社の Internet Exproler Netscape 社の Netscape Navigater があります

(1)

１．まえがき私は、楽謡会の連絡係として、毎月連絡のメールを送信しておりましたが、楽謡会のホームページを作ってほしいとの話がありました。この話を聞いてまづ考えたのは、ホームページを開設しても頻繁に内容を更新していかなければ、見る人がいなくなってしまうし、そのように更新していくのが大変だということです。ホームページを作成すると、作成した人しかいじれなくなるのが普通です。ホームページ連絡委員というのを作ってその全員がいじれるようにして、共同で管理して行くことを提案しました。多くの人がいじれるようにするためには、HTML エデイタ等特別のアプリケーションソフトは使わないことが望ましく、また、頻繁に書き換える部分は、テキスト文をそのまま載せる方法を取る等の工夫を行いました。説明会を開催して、ホームページはむずかしくないということは分かったようですが、まだ、実際にいじれるレベルにはなっていないようです。それらの人のためにマニュアルを作成しようと思いましたが、それならいっそのこと、IPCC ニュースのパソコン Tips コーナーに掲載できるものにしようと考えたわけです。今回は私が作成した「楽謡会ホームページ」を説明用に変更したものを例にして説明します。第1 図楽謡会ホームページ起動時の画面パソコン Tips コーナー

手作りホームページ入門(第１回)

最初はさるまねが近道

機械Ａ部門事務機器小関恭二ホームページは、HTML(HyperTextMarkupLanguage)という言語を使ったファイル(HTML 文書)で構成されます。このHTML 文書は、テキスト形式の文書に、タグと呼ばれる命令コマンド(文字列)を埋め込んで行くことで作成でき、更にタグで指定した画像ファイルや音声ファイルを読み込んで表示・再生させたり、他のHTML ファイルを表示させることができます。 HTML ファイルを作成するには、HTML エデイタ(MicrosoftFrontpage、IBM ホームページビルダー等) を使用する場合が多いですが、タグの意味を理解すれば、単にテキストエデイタ(WINDOWS に添付されている「メモ帳」「ワードパッド」等)だけで作成できます。また、この他に、「WORD」「一太郎」で作成した文書をweb ページとして保存した場合にも HTML ファイルが作成されます。今回は、テキストエデイタのみでホームページを手作りする方法を紹介します。HTML のタグは多くの種類があり、そのための本も発行されています。(翔泳社：ホームページ辞典等) 今回は使用するタグの種類を限定して分かりやすいものとし、出来るだけ簡単な構成としておりますので、理解しやすく、作成･変更が容易です。同好会のホームページの作成、個人のホームページの作成に応用できます。手作りのホームページは、コンパクトで修正・変更が容易であることが特長です。手作りホームページ作成の最初はさるまねが近道と言えます。即ち、第5 図以下のソース表示を基に変更を加えたものを「メモ帳」に作成し、ファイル名に.htm という拡張子を付けて保存すると HTML 文書となります。この中でindex.htm ファイルをクリックすれば。第 1 図のように表示されるというわけです。

(2)

２．HTML 文書を見る方法

ホームページの文書は、ファイル名の最後に.htm 又は、.html の拡張子が付けられ、それら文書をプラウザで確認するためのソフトとしては、Microsoft 社の Internet Exproler 、 Netscape 社の Netscape Navigater があります。但し、これらの二つのソフト間で、又版数によって、表示方法が多少異なる場合があります。また、HTML 文書のソースをテキストエデイタで見る場合には、例えば、Windows に添付されている「メモ帳」を用います。HTML 文書をクリックすると、InternetExproler 又は NetscapeNavigater が起動されますが、HTML 文書のソースを見て編集する場合には、第 2 図の如く、HTML 文書を右クリックして「送る」−「メモ帳」を指定して開いて見ます。（但し、このためには、C:¥Documents and Settings ¥Default User ¥Send To フォルダに「メモ帳」のショートカットが入っていることが必要です。なお、上記の¥Send To フォルダを見るためには、いずれかのフォルダを開き、ツール−フォルダオプション−表示 −ファイルとフォルダの表示で、「全てのファイルとフォルダを表示する」の設定が行われている必要があります。）また、InternetExproler では、表示のプルダウンでソースを指定した場合にも、同様にメモ帳が起動されソースを確認できます。「メモ帳」上で内容を修正した場合には、上書き保存とした後、InternetExproler で「更新」の指定をするか、NetscapeNavigater で「再読み込み」の指定を第2 図 HTML ファイルのソースを見る行うことにより、修正の確認ができます。３．ホームページの構想をまとめるホームページを作成する場合、まず最初に開かれるページをどのようにするかが非常に重要です。第1 ページを目次のみとする場合が多いですが、目次のみを見て、読者が迷ってしまったり、すぐに引っ込んでしまうのは、もったいないことです。第 1 ページには、目次の他に、最も読んでほしい内容を記載し、しかも、その内容が頻繁に書き換えられるものとすることが望ましいと言えます。「楽謡会ホームページ」では、フレームを左右に区切って、左側に全体の目次、右側に毎月メールで通知している「連絡事項」を載せることにしました。更に、この「連絡事項」は、最新の内容が最上位に来るようにし、下のほうにスクロールすることにより、過去のものも見れるようにしました。また、左側の目次からは、上記の「連絡事項」の他に、「ニュース・記事」、「写真集」、「資料集/リンク集」の項目を指定して右側のページに表示できるようにしました。このように、左側に細長い目次をおく方式は、右側のページの下部までスクロールした場合でも、右側の該当する項目をクリックすることにより(「戻る」のボタンなしで)、すぐにそのページの先頭に戻ることが出来ると言う特長があります。４．ファイル構成プロバイダを介してインターネットのホームページをアップロードした場合には、ホームページとして登録したファイル内のindex.htm と言うファイルが、まず起動されます。第3 図ファイル構成 rakuyokai フォルダ index.htm hontai フォルダ mokuzi.htm renraku.htm syasin フォルダ 99kasen1.jpg ： siryo フォルダ tizu1.jpg ：

(3)

今回は、rakuyokai と言うフォルダをプロバイダに登録するとして、第 3 図の如きファイル構成としました。(インターネット上では、ファイル名・フォルダ名を全て半角英小文字にしておくのが無難です。) ５．HTML の基本構成 HTML の基本構成を第４図に示します。この中で、 < >で囲まれた部分を、HTML タグと呼び、プラウザの表示を制御します。(第 5 図∼第 7 図参照) 第4 図 HTML の基本構成６．フレームの作成第5 図に index.htm のソースを示します。ヘッダの<TITLE>∼</TITLE>の部分にこの文書のタイトルを記述します。タイトルは、第1 図の如く、このファイルを開いた時にメニューバーに表示されます。フレームを作成する場合には、<FRAMESET>のタグを用います。この場合には<BODY>はありません。 FREMESET の COLS=”140,*”は、140 画素(ドット) で縦区切りすることを示します。COLS の代わりに ROWS を用いれば横区切りとなり、”140,*”の代わりに、”20％,80%”と記述すれば、全体画面の 20 パーセントの部分で区切られるようになります。その下の<FRAME NAME>のタグは、左側のフレームの名称をframe1 とし、起動時に hontai フォルダのmokuzi.htm を表示し、又、右側のフレームの名称をframe2 として、同様に renraku.htm を表示することを意味します。なお、<NORESIZE>はフレームサイズの変更禁止の意味です。７、左側画面(mokuzi.htm)の作成第 6 図に mokuzi.htm のソースを示します。 <TITLE>∼</TITLE>の部分は、このファイルが単独で起動されることがあまりなく(通常は index.htm から起動)、タイトルを入力しておいても有効でないので入力しておりません。 BGCOLOR は、”#+16 進数 6 桁”で背景色を示します。色は、#rrggbb 値(赤、緑、青の成分を各 16 進数で表示したもの。#000000= 黒、#ffffff=白、 #ff0000=赤)、又は、第 7 図の如く英語の色名で表現します。その後の∼は段落を示し、この範囲の前で改行され、更に1 行の空白が挿入されます。その後の∼で文字の書体、文字色、文字の大きさを定義します。∼の部分で表示する文章を示し、∼で囲まれた部分は太字を、 は改行を示します。

<A HREF=”renraku.htm” TARGET=”frame2”> 連絡事項</A>の部分は、「連絡事項」と表示された部分をクリックすれば、右側のフレーム(“frame2”) に”renraku.htm”のファイルを表示することを示しています。即ち、HREF=でリンク先を記述するわけですが、この内容については、次回もう少し詳しく説明します。なお、「写真集」、「拡大」、「ニュース・記事」、「資料集／リンク集」についても、ほぼ同様で、その部分をクリックすれば、対応したファイルが右側の画面に表示されます。８．右側画面(renraku.htm)の作成第7 図に renraku.htm のソースを示します。 <BODY BGCOLOR=”tan”>で、前述の如く、背景色が tan 色(日焼けした皮膚の色)とすることを定義しています。（今回は、ヘッダを省略しています。） 楽謡会のホームページにようこそ では、斜体文字(I＝イタリック体)で、「楽謡会のホームページにようこそ」と表示します。

その後の、PRE のタグは、<PRE> ~ </PRE>で囲まれた部分の整形済みのテキスト文をそのまま表示することを意味します。テキスト文の部分はかなり大きくしても大丈夫なので、「楽謡会ホームページ」では、毎月の連絡事項として発行しているメールの内容をそのまま、最新号を上部に挿入する形で運用しています。この変更は非常に容易で、HTML 文書を全く知らない人でも追加できます。こうすることにより、「楽謡会ホームページ」を開いた時に、常に連絡事項の最新のものが右側の主画面に表示されることになります。 <HTML> <HEAD> ヘッダ情報(種々の設定と情報等を記述します) </HEAD> <BODY> 本文(プラウザに表示される文を記述します) </BODY> </HTML>

(4)

第 5 図 index.htm ファイルのソース表示第 6 図 mokuzi.htm ファイルのソース表示第7 図 renraku.htm ファイルのソース表示 <HTML> <HEAD> <TITLE>楽謡会ホームページ</TITLE> </HEAD> <FRAMESET COLS="140,*">

楽謡会の ホーム ページ

<A HREF="news.htm" TARGET="frame2">ニュース・記事</A> <A HREF="siryosyu.htm" TARGET="frame2">資料集/ﾘﾝｸ集</A> </BODY> </HTML> <HTML> <BODY BGCOLOR="tan"> 楽謡会のホームページにようこそ <PRE> 楽謡会連絡事項平成13 年 4 月 24 日：（途中省略）： </PRE> </BODY> </HTML>

(5)

パソコン Tips コーナー

手作りホームページ入門

(第２回)

よく使われる表現

機械Ａ部門事務機器小関恭二前回に引き続き「楽謡会のホームページ」を例にして説明します。前回の index.htm、mokuzi.hym および今回のsyasin.htm の記載は、前回述べたように「さるまね」でよいですが、それ以外の部分については、工夫を加え,表現力のあるものにすることが必要です。今回説明に使用するソース表現の例、及び最終ページに示す良く使われるタグの一覧表を参考にして自分のホームページを手作りしてみてください。このシリーズでは、左側に目次のフレームを作成する方法で説明しておりますが、このようなフレームを使用せずに、今回述べる siryosyu.htm のような構成のものを最初の画面(index.htm)として作成する場合も多いことを付け加えておきます。(この方式では、「戻る」のボタンが必要です。) <HTML> <BODY BGCOLOR="#b0c4de"> <TABLE><TR><TD>H11 新年謡初会</TD></TR>

<TR><TD> 開演前の鐘の吊り上げ</TD><TD> 鐘に入る前</TD><TD> 鐘から出る</TD></TR> </TABLE> </BODY></HTML> ９．テーブルに写真をならべる(syasin.htm) 目次の「写真集」をクリックしてsyasin.htm を表示させたものを第8 図に,そのソース表示を第 9 図に示します。 <TABLE>∼</TABLE>で囲まれた範囲がテーブルであることを示し、セルに入るデータは<TD>∼ </TD>で囲みます。<TR>∼</TR>で行を定義します。セルに入るデータは文字でも画像でもよく、画像の場合には、<IMG> でソース (SRC) 、画像の幅 (WIDTH)、高さ(HEIGHT)、を記述する必要があります。ソースがHTML 文の下位にある場合には、フォルダ名/参照ファイル名を相対アドレスとして記述し、幅及び高さは画素数で指定します。なお、目次の中で、「写真集」の脇の「拡大」の文字をクリックすると、syasindai.htm が表示され第9 図 syasin.htm のソース表示ます。 syasindai.htm は、syasin.htm の中で、画像の幅及び高さの寸法のみを各々約 1.5 倍に変更したものです。第8 図「写真集」をクリックした時の画面

(6)

<HTML>

平成 11 年歌仙会 IPCC 楽謡会は、OB12 名を含め、会員数 45 名(観世流 28 名、宝生流 14 名、金剛流 3 名)で、各流儀毎(但し、観世流は 3 グループに分かれて)に、通常は月２回の練習を行っており、

その成果を年２回、新年謡初会(1 月)、歌仙会(7 月)として発表します。 <IMG ALIGN="left" SRC="syasin/99kasen1.jpg" WIDTH="400" HEIGHT="220">

今年は、創立10 周年にあたり、１月に横浜能楽堂で、その記念の新年謡会を開催しましたが、それに続く謡会として今回の歌仙会は７月10 日、亀戸にある日立厚生会館で開催され、素謡10 番、独吟 9 番、仕舞 1 番の発表がありました。 今回の素謡10 番の内、半蔀(はしとみ)、玉葛(たまかずら)は源氏物語を、巴(ともえ)、清経(きよつね)は平家物語を素材にしている等、謡を通して日本の古典に触れることができます。 渋谷の観世能楽堂、水道橋の宝生能楽堂で催される発表会の中に能を無料で見れるものがあり、楽謡会では、毎月の連絡で、この無料で見れる能の紹介も行っています。

<TABLE ALIGN="right"><TR><TD><IMG SRC="syasin/99kasen2.jpg" WIDTH="400" HEIGHT="220"> </TD><TR><TD> 金剛流のみなさんの写真</TD></TR></TABLE> 今回発表された中で特に、＜紅葉狩＞は、金剛流からの初めての素謡で、3 名(野坂、安野、前田)の声がよく出ており大変好評でした。 小関恭二記 </BODY> </HTML> 10.文章と図の配置(news.htm) 「目次のニュース／記事」をクリックして news.htm を表示させたものを第 10 図に,そのソース表現を第11 図に示します。第11 図で、は中央への行揃えを意味します。 は改行を表わし、2 個並べると1 行空けることになるので大変便利なタグです。文章の部分の全角文字のスペースは、そのまま空白となります。左側に図を入れ、右側に文章を入れ、図に回り込ませる場合には、<IMG ALIGN="left">とし、回り込みを解除する個所に とします。図の上部または下部に文字列を入れる場合には、前章 (syasin.htm) で述べた <TABLE> に、 ALIGN =”left/right”を組み合わせて用いるのがよいようです。 は、右端への行揃えです。第10 図、第 14 図を参照しながら、第 11 図を見て行けば、どのように文字や図を配置しようとしているかを容易に理解できると思います。第 11 図 news.htm のソース表示いずれにしてもメモ帳上でいろいろやってみて、前回 (第 2 章)で述べたように、上書き保存としてから、プラウザ確認用ソフト上で、「更新」または「再読み込み」とし、どのような配置になるかを確認します。

、 <IMG ALIGN="left/right"> 、 <TABLE ALIGN=”left/right”>、 を組み合わせるだけで、文章と図をかなり自由に配置することができます。

(7)

<HTML><BODY BGCOLOR="#d3d3d3"> 資料集目次 <A HREF="#henkourireki">変更履歴 <A HREF="#k-nougakudou">川崎能楽堂地図</A> <A HREF="../homepage-nyumon.doc">手作りホームページ入門</A> <A HREF="http://www.nohgaku.or.jp">能楽協会ホームページにリンク</A> <A HREF="mailto:rakuyoukai@jcom.home.ne.jp">楽謡会にメール送信</A> <HR>変更履歴<A NAME="henkourireki"> 2001/2/16 ﾎｰﾑﾍﾟｰｼﾞ(案)作成。hd1135 で公開---小関 2001/2/20 ｱｯﾌﾟﾛｰﾄﾞ成功(第 0 版)---国行 2001/2/21 第 1 版をｱｯﾌﾟﾛｰﾄﾞ。OB にﾒｰﾙで通知。 2001/3/3 3 月の追加連絡を入れ、第 2 版をｱｯﾌﾟﾛｰﾄﾞ。 <HR><A NAME="k-nougakudou">川崎能楽堂地図</A>

<IMG SRC="siryo/tizu1.jpg" WIDTH="800" HEIGHT="600" BORDER="1"> </BODY></HTML> 11.リンクの作成(siryosyu.htm) 目次の資料集／リンク集をクリックしてsiryosyu. htm を表示させたものを第 12 図に,そのソース表示を第13 図に示します。 siryosyu.htm の最初の部分は目次です。目次の各行が、その本文の最初の部分にリンクし、クリックによりその部分に移行するようにしています。同一ファイル内の別の個所にリンクさせる場合には、最初にそのリンク先の個所に名前を付ける必要があります。第13 図の場合は、同一ファイル内のリンク個所として、「変更履歴」と「川崎能楽堂地図」の２つの段落(∼)があり、各々の段落の最初の部分を横罫線<HR>で区切り、各段落の最初の行に <A NAME="henkourireki">、<A NAME="k-nougaku dou">として名前を付けています。

目次の第 2∼3 行では、「変更履歴」及び「川崎能楽堂地図」の文字をクリックした時に、上記で名付けた個所にリンクさせるために、 <A HREF= "#henkourireki"> 及び <A HREF="#k-nougakudou"> のタグを使用しています。（なお、siryosyu.htm 以外のファイルからリンクさせる場合には、<A HREF ="siryosyu.htm#k-nougakudou">の如くファイル名を入れます。) 次の行は、「手作りホームページ入門」の文字列をクリックすると、このsiryosyu.htm ファイルの上位のフォルダにあるhomepage-nyumon.doc ファイル第13 図 siryosyu.htm のソース表示にリンクすることを示しています。(前回の第 3 図には示しておりませんが、 rakuyokai フォルダには、 index.htm ファイルと共に、 homepage- nyumon.doc というファイルがあるものとします。) 次の行は、「能楽協会ホームページにリンク」の文字列をクリックすると、能楽協会ホームページにリンクするもので、<A HREF=の後に”リンク先の URL(インターネット上のアドレス)”を入力しておきます。次の行は、「∼にメール送信」の部分をクリックすると、∼へのメール送信状態にするもので、<A HREF ="mailto:の後に、メールアドレスを入力しておきます。第12 図「資料集／リンク集」をクリック時の画面

(8)

< BODY BGCOLOR="#rrggbb 値／色名(英語) ">∼</BODY> ---背景色指定なお、背景に模様を使用する場合には,<BODY BACKGROUND="image/wood.gif">の如く指定する。 ---改行 └ (image フォルダの wood.gif ファイルを背景に使用) <HR> ---横罫線 ∼ ---段落(の前に 1 行の空白が挿入される) 行揃え(中央／右)は、∼の如く指定する。 <PRE>∼</PRE> ---<PRE> </PRE>タグで挟まれたテキスト文をそのまま表示

∼---太文字 <L>∼</L>---斜体文字(イタリック体) ∼---下線(アンダーライン) ∼---上付き文字（例：X の２乗 → X2 ）

∼---下付き文字（例：水の化学式 → H2O ） ∼の部分の書体、文字色、文字の大きさを指定する場合には、

∼の如く指定する。 COLOR="#rrggbb 値"は、赤、緑、青の各成分を 16 進数で表わしたもの

#000000=黒、#ffffff=白、#ff0000=赤、#ffff00=黄、#0000ff=青、#800080=紫 <IMG SRC="画像ファイル名.jpg" WIDTH="265" HEIGHT="210" BORDER="1"> ----画像表示画像のソース(SRC="フォルダ名/画像ファイル名.jpg")、画像の幅(WIDTH ="画素数") 高さ(HEIGHT=”画素数”)、画像枠の指定(枠なしの場合は BORDER="1"の指定は不要) (画像の左側(又は右側)に文章を回り込ませる場合には、<IMG ALIGN="right／left"の如く記載し, 回り込み終了個所に、 と記載。) <TABLE>∼</TABLE> ---表(テーブル) (枠線を入れる場合には、<TABLE BORDER="ｘ"の如く記載。ｘ=0：枠線なし、ｘが大きい→太い枠線) (テーブルの左側(又は右側)に文章を回り込ませる場合には、<TABLE ALIGN="right／left"の如く記載し, <TR>∼</TR> ---表の横列(行) └ 回り込み終了個所に、 と記載) <TD>∼</TD> ---∼の部分に表のセルに入るデータ(文字列または図)を入れる <A NAME="ｘｘｘ">∼</A> ---∼にリンク先の場所の名前ｘｘｘを登録 <A HREF="#ｘｘｘ">∼</A> ---∼のクリックにより同一ファイルのｘｘｘと登録された場所にリンク <A HREF="ファイル名#ｘｘｘ">∼</A> ---他のファイルのｘｘｘにリンク <A HREF="ファイル名">∼</A> ---他のファイルの先頭にリンク（下位のフォルダのファイル→フォルダ名/ファイル名。すぐ上位のフォルダのファイル→../ファイル名） <A HREF="ファイル名" TARGET="フレーム名">∼</A> ---他のフレームにリンク先のファイルを表示 <A HREF="ファイル名" TARGET="BLANK">∼</A> ---新しいフレームにリンク先のファイルを表示 <A HREF="リンク先のホームページの URL">∼</A> ---他のホームページにリンク

<A HREF="画像ファイル名.jpg"><IMG SRC="画像ファイル名.jpg" WIDTH="＊" HEIGHT="＊" ></A> 画像のクリックにより画像の拡大表示 <A HREF="ファイル名#ｘｘｘ"><IMG SRC="画像ファイル名.jpg" WIDTH="＊" HEIGHT="＊" ></A> 画像のクリックによりリンク先ファイルのｘｘｘを表示 <A HREF="mailto:メールアドレス">∼</A> ---リンクを利用してメール発信 12.あとがき今回は使用した「楽謡会ホームページ」は、説明用に修正を加えたもので、実際のものとは多少異な第14 図よく使われるタグの一覧表ります。「楽謡会ホームページ」のURL(ネット上のアドレス)は下記の通りです。 http://www.geocities.jp/rakuyou_kai/

2.HTML 文書を見る方法ホームページの文書は ファイル名の最後に.htm 又は.html の拡張子が付けられ それら文書をプラウザで確認するためのソフトとしては Microsoft 社の Internet Exproler Netscape 社の Netscape Navigater があります