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

Size: px

Start display at page:

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

あいぞうあいきょう
5 years ago
Views:

パソコン Tips コーナー手作りホームページ入門 ( 第 1 回 ) 最初はさるまねが近道機械 A 部門事務機器小関恭二ホームページは HTML(HyperTextMarkupLanguage) という言語を使ったファイル (HTML 文書 ) で構成されますこの HTML 文書はテキスト形式の文書にタグと呼ばれる命令コマンド ( 文字列 ) を埋め込んで行くことで作成でき

1 パソコン Tips コーナー手作りホームページ入門 ( 第 1 回 ) 最初はさるまねが近道機械 A 部門事務機器小関恭二ホームページは HTML(HyperTextMarkupLanguage) という言語を使ったファイル (HTML 文書 ) で構成されますこの HTML 文書はテキスト形式の文書にタグと呼ばれる命令コマンド ( 文字列 ) を埋め込んで行くことで作成でき更にタグで指定した画像ファイルや音声ファイルを読み込んで表示再生させたり他の HTML ファイルを表示させることができます HTML ファイルを作成するには HTML エデイタ (MicrosoftFrontpage IBM ホームページビルダー等 ) を使用する場合が多いですがタグの意味を理解すれば単にテキストエデイタ (WINDOWS に添付されているメモ帳ワードパッド等 ) だけで作成できますまたこの他に WORD 一太郎で作成した文書を web ページとして保存した場合にも HTML ファイルが作成されます今回はテキストエデイタのみでホームページを手作りする方法を紹介します HTML のタグは多くの種類がありそのための本も発行されています ( 翔泳社 : ホームページ辞典等 ) 今回は使用するタグの種類を限定して分かりやすいものとし出来るだけ簡単な構成としておりますので理解しやすく作成変更が容易です同好会のホームページの作成個人のホームページの作成に応用できます手作りのホームページはコンパクトで修正変更が容易であることが特長です手作りホームページ作成の最初はさるまねが近道と言えます即ち第 5 図以下のソース表示を基に変更を加えたものをメモ帳に作成しファイル名に.htm という拡張子を付けて保存すると HTML 文書となりますこの中で index.htm ファイルをクリックすれば第 1 図のように表示されるというわけです 1. まえがき私は楽謡会の連絡係として毎月連絡のメールを送信しておりましたが楽謡会のホームページを作ってほしいとの話がありましたこの話を聞いてまづ考えたのはホームページを開設しても頻繁に内容を更新していかなければ見る人がいなくなってしまうしそのように更新していくのが大変だということですホームページを作成すると作成した人しかいじれなくなるのが普通ですホームページ連絡委員というのを作ってその全員がいじれるようにして共同で管理して行くことを提案しました多くの人がいじれるようにするためには HTML エデイタ等特別のアプリケーションソフトは使わないことが望ましくまた頻繁に書き換える部分はテキスト文をそのまま載せる方法を取る等の工夫を行いました説明会を開催してホームページはむずかしくないということは分かったようですがまだ実際にいじれるレベルにはなっていないようですそれらの人のためにマニュアルを作成しようと思いましたがそれならいっそのこと IPCC ニュースのパソコン Tips コーナーに掲載できるものにしようと考えたわけです今回は私が作成した楽謡会ホームページを説明用に変更したものを例にして説明します第 1 図楽謡会ホームページ起動時の画面

2 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 ファイルのソースを見る行うことにより修正の確認ができます 3. ホームページの構想をまとめるホームページを作成する場合まず最初に開かれるページをどのようにするかが非常に重要です第 1 ページを目次のみとする場合が多いですが目次のみを見て読者が迷ってしまったりすぐに引っ込んでしまうのはもったいないことです第 1 ページには目次の他に最も読んでほしい内容を記載ししかもその内容が頻繁に書き換えられるものとすることが望ましいと言えます楽謡会ホームページではフレームを左右に区切って左側に全体の目次右側に毎月メールで通知している連絡事項を載せることにしました更にこの連絡事項は最新の内容が最上位に来るようにし下のほうにスクロールすることにより過去のものも見れるようにしましたまた左側の目次からは上記の連絡事項の他にニュース記事写真集資料集 / リンク集の項目を指定して右側のページに表示できるようにしましたこのように左側に細長い目次をおく方式は右側のページの下部までスクロールした場合でも右側の該当する項目をクリックすることにより ( 戻るのボタンなしで ) すぐにそのページの先頭に戻ることが出来ると言う特長があります 4. ファイル構成プロバイダを介してインターネットのホームページをアップロードした場合にはホームページとして登録したファイル内の index.htm と言うファイルがまず起動されます第 3 図ファイル構成 rakuyokai フォルダ index.htm hontai フォルダ mokuzi.htm renraku.htm syasin フォルダ 99kasen1.jpg : siryo フォルダ tizu1.jpg :

3 今回は rakuyokai と言うフォルダをプロバイダに登録するとして第 3 図の如きファイル構成としました ( インターネット上ではファイル名フォルダ名を全て半角英小文字にしておくのが無難です ) 5.HTML の基本構成 HTML の基本構成を第 4 図に示しますこの中で < > で囲まれた部分を HTML タグと呼びプラウザの表示を制御します ( 第 5 図 ~ 第 7 図参照 ) 第 4 図 HTML の基本構成 <HEAD> ヘッダ情報 ( 種々の設定と情報等を記述します ) </HEAD> <BODY> 本文 ( プラウザに表示される文を記述します ) </BODY> 6. フレームの作成第 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> はフレームサイズの変更禁止の意味です 7 左側画面(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= でリンク先を記述するわけですがこの内容については次回もう少し詳しく説明しますなお写真集拡大ニュース記事資料集 / リンク集についてもほぼ同様でその部分をクリックすれば対応したファイルが右側の画面に表示されます 8. 右側画面 (renraku.htm) の作成第 7 図に renraku.htm のソースを示します <BODY BGCOLOR= tan > で前述の如く背景色が tan 色 ( 日焼けした皮膚の色 ) とすることを定義しています ( 今回はヘッダを省略しています ) 楽謡会のホームページにようこそ では斜体文字 (I=イタリック体) で楽謡会のホームページにようこそと表示しますその後の PRE のタグは <PRE> ~ </PRE> で囲まれた部分の整形済みのテキスト文をそのまま表示することを意味しますテキスト文の部分はかなり大きくしても大丈夫なので楽謡会ホームページでは毎月の連絡事項として発行しているメールの内容をそのまま最新号を上部に挿入する形で運用していますこの変更は非常に容易で HTML 文書を全く知らない人でも追加できますこうすることにより楽謡会ホームページを開いた時に常に連絡事項の最新のものが右側の主画面に表示されることになります

4 第 5 図 index.htm ファイルのソース表示 <HEAD> <TITLE> 楽謡会ホームページ </TITLE> </HEAD> <FRAMESET COLS="140,*"> <FRAME NAME="frame1" SRC="hontai/mokuzi.htm" NORESIZE> <FRAME NAME="frame2" SRC="hontai/renraku.htm" NORESIZE> </FRAMESET> 第 6 図 mokuzi.htm ファイルのソース表示 <HEAD> <TITLE></TITLE> </HEAD> <BODY BGCOLOR="#ffe4c4"> 楽謡会の ホーム ページ <A HREF="renraku.htm" TARGET="frame2"> 連絡事項 </A> <A HREF="syasin.htm" TARGET="frame2"> 写真集 </A> <A HREF="syasindai.htm" TARGET="frame2"> 拡大 </A> <A HREF="news.htm" TARGET="frame2"> ニュース記事 </A> <A HREF="siryosyu.htm" TARGET="frame2"> 資料集 / リンク集 </A> </BODY> 第 7 図 renraku.htm ファイルのソース表示 <BODY BGCOLOR="tan"> 楽謡会のホームページにようこそ <PRE> 楽謡会連絡事項 : ( 途中省略 ) : </PRE> </BODY> 平成 13 年 4 月 24 日

5 パソコン Tips コーナー手作りホームページ入門 ( 第 2 回 ) よく使われる表現機械 A 部門事務機器小関恭二前回に引き続き楽謡会のホームページを例にして説明します前回の index.htm mokuzi.hym および今回の syasin.htm の記載は前回述べたようにさるまねでよいですがそれ以外の部分については工夫を加え, 表現力のあるものにすることが必要です今回説明に使用するソース表現の例及び最終ページに示す良く使われるタグの一覧表を参考にして自分のホームページを手作りしてみてくださいこのシリーズでは左側に目次のフレームを作成する方法で説明しておりますがこのようなフレームを使用せずに今回述べる siryosyu.htm のような構成のものを最初の画面 (index.htm) として作成する場合も多いことを付け加えておきます ( この方式では戻るのボタンが必要です ) 9. テーブルに写真をならべる (syasin.htm) 目次の写真集をクリックして syasin.htm を表示させたものを第 8 図に, そのソース表示を第 9 図に示します <TABLE>~</TABLE> で囲まれた範囲がテーブルであることを示しセルに入るデータは <TD>~ </TD> で囲みます <TR>~</TR> で行を定義しますセルに入るデータは文字でも画像でもよく画像の場合には <IMG> でソース (SRC) 画像の幅 (WIDTH) 高さ(HEIGHT) を記述する必要がありますソースが HTML 文の下位にある場合にはフォルダ名 / 参照ファイル名を相対アドレスとして記述し幅及び高さは画素数で指定しますなお目次の中で写真集の脇の拡大の文字をクリックすると syasindai.htm が表示されます syasindai.htm は syasin.htm の中で画像の幅及び高さの寸法のみを各々約 1.5 倍に変更したものです第 8 図写真集をクリックした時の画面第 9 図 syasin.htm のソース表示 <BODY BGCOLOR="#b0c4de"> <TABLE><TR><TD>H11 新年謡初会 </TD></TR> <TR><TD><IMG SRC="syasin/99utasm1.jpg" WIDTH="265" HEIGHT="210"></TD> <TD><IMG SRC="syasin/99utasm2.jpg" WIDTH="410" HEIGHT="210"></TD></TR></TABLE> <TABLE><TR><TD> 道成寺 </TD></TR> <TR><TD><IMG SRC="syasin/mvc-016f.jpg" WIDTH="265" HEIGHT="210"></TD> <TD><IMG SRC="syasin/mvc-021f.jpg" WIDTH="265" HEIGHT="210"></TD> <TD><IMG SRC="syasin/mvc-023f.jpg" WIDTH="265" HEIGHT="210"></TD></TR> <TR><TD> 開演前の鐘の吊り上げ </TD><TD> 鐘に入る前 </TD><TD> 鐘から出る </TD></TR> </TABLE> </BODY>

6 10. 文章と図の配置 (news.htm) 目次のニュース / 記事をクリックして news.htm を表示させたものを第 10 図に, そのソース表現を第 11 図に示します第 11 図で は中央への行揃えを意味します は改行を表わし 2 個並べると 1 行空けることになるので大変便利なタグです文章の部分の全角文字のスペースはそのまま空白となります左側に図を入れ右側に文章を入れ図に回り込ませる場合には <IMG ALIGN="left"> とし回り込みを解除する個所に とします図の上部または下部に文字列を入れる場合には前章 (syasin.htm) で述べた <TABLE> に ALIGN = left/right を組み合わせて用いるのがよいようです は右端への行揃えです第 10 図第 14 図を参照しながら第 11 図を見て行けばどのように文字や図を配置しようとしているかを容易に理解できると思いますいずれにしてもメモ帳上でいろいろやってみて前回 ( 第 2 章 ) で述べたように上書き保存としてからプラウザ確認用ソフト上で更新または再読み込みとしどのような配置になるかを確認します <IMG ALIGN="left/right"> <TABLE ALIGN= left/right > を組み合わせるだけで文章と図をかなり自由に配置することができます第 10 図ニュース / 記事をクリックした時の画面第 11 図 news.htm のソース表示 <BODY BGCOLOR="yellow"> 平成 11 年歌仙会 IPCC 楽謡会は OB12 名を含め会員数 45 名 ( 観世流 28 名宝生流 14 名金剛流 3 名 ) で各流儀毎 ( 但し観世流は 3 グループに分かれて ) に通常は月 2 回の練習を行っておりその成果を年 2 回 新年謡初会 (1 月 ) 歌仙会 (7 月 ) として発表します <IMG ALIGN="left" SRC="syasin/99kasen1.jpg" WIDTH="400" HEIGHT="220"> 今年は創立 10 周年にあたり 1 月に横浜能楽堂でその記念の新年謡会を開催しましたがそれに続く謡会として今回の歌仙会は 7 月 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>

7 11. リンクの作成 (siryosyu.htm) 目次の資料集 / リンク集をクリックして siryosyu. htm を表示させたものを第 12 図に, そのソース表示を第 13 図に示します siryosyu.htm の最初の部分は目次です目次の各行がその本文の最初の部分にリンクしクリックによりその部分に移行するようにしています同一ファイル内の別の個所にリンクさせる場合には最初にそのリンク先の個所に名前を付ける必要があります第 13 図の場合は同一ファイル内のリンク個所として変更履歴と川崎能楽堂地図の2つの段落 (~) があり各々の段落の最初の部分を横罫線 <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 ファイルにリンクすることを示しています ( 前回の第 3 図には示しておりませんが rakuyokai フォルダには index.htm ファイルと共に homepagenyumon.doc というファイルがあるものとします ) 次の行は能楽協会ホームページにリンクの文字列をクリックすると能楽協会ホームページにリンクするもので <A HREF= の後にリンク先の URL( インターネット上のアドレス ) を入力しておきます次の行は ~にメール送信の部分をクリックすると ~へのメール送信状態にするもので <A HREF ="mailto: の後にメールアドレスを入力しておきます第 12 図資料集 / リンク集をクリック時の画面第 13 図 siryosyu.htm のソース表示 <BODY BGCOLOR="#d3d3d3"> 資料集目次 <A HREF="#henkourireki"> 変更履歴 <A HREF="#k-nougakudou"> 川崎能楽堂地図 </A> <A HREF="../homepage-nyumon.doc"> 手作りホームページ入門 </A> <A HREF=" 能楽協会ホームページにリンク </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>

8 12. あとがきります楽謡会ホームページの URL( ネット上の今回は使用した楽謡会ホームページは説明アドレス ) は下記の通りです用に修正を加えたもので実際のものとは多少異な第 14 図よく使われるタグの一覧表 < BODY BGCOLOR="#rrggbb 値 / 色名 ( 英語 ) ">~</BODY> 背景色指定なお背景に模様を使用する場合には,<BODY BACKGROUND="image/wood.gif"> の如く指定する 改行 (image フォルダの wood.gif ファイルを背景に使用 ) <HR> 横罫線 ~ 段落 ( の前に 1 行の空白が挿入される ) 行揃え ( 中央 / 右 ) は ~ の如く指定する <PRE>~</PRE> <PRE> </PRE> タグで挟まれたテキスト文をそのまま表示 ~ 太文字 <L>~</L>----- 斜体文字 ( イタリック体 ) ~ 下線 ( アンダーライン ) ~ 上付き文字 ( 例 :X の2 乗 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="x" の如く記載 x=0: 枠線なし xが大きい太い枠線 ) ( テーブルの左側 ( 又は右側 ) に文章を回り込ませる場合には <TABLE ALIGN="right/left" の如く記載し, <TR>~</TR> 表の横列 ( 行 ) 回り込み終了個所に と記載 ) <TD>~</TD> ~の部分に表のセルに入るデータ ( 文字列または図 ) を入れる <A NAME="xxx">~</A> ~にリンク先の場所の名前 xxxを登録 <A HREF="#xxx">~</A> ~のクリックにより同一ファイルの xxxと登録された場所にリンク <A HREF=" ファイル名 #xxx">~</a> 他のファイルのxxxにリンク <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=" ファイル名 #xxx"><img SRC=" 画像ファイル名.jpg" WIDTH="*" HEIGHT="*" ></A> 画像のクリックによりリンク先ファイルの xxxを表示 <A HREF="mailto: メールアドレス ">~</A> リンクを利用してメール発信

(3) 本文を書く実際にページを開いたときに表示される本文を書いてみましょうからの間に書きます <html > <head > <title > 武のホームページ </title > </head > </html > (4) ページを保存するここで一度ページを保存してみましょうテキストエ

(3) 本文を書く実際にページを開いたときに表示される本文を書いてみましょうからの間に書きます <html > <head > <title > 武のホームページ </title > </head > </html > (4) ページを保存するここで一度ページを保存してみましょうテキストエ 1. はじめの準備 (1) フォルダの作成ホームページ作成の基礎これから作るホームページのデータをホームページ用として保存 ( 保管 ) するフォルダを作成しますホームページで使う作成したファイル画像写真音楽などファイルはすべて同じフォルダに保存しますデスクトップやマイドキュメントの中 ( 任意 ) で右クリック新規作成 (N) フォルダ (F) で新しいフォルダができます (

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

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