「web安曇野」の読み方

「web安曇野」のHTMLソース例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

「DOCTYPE宣言」:この文書をHTML4.01 Strictという定義に基づいて書こうという意思表示。と、それに関する情報源。

<HTML lang="ja">

〜</HTML>までの、このHTMLは日本語で書かれている。

<HEAD>

〜</HEAD>までに、この文書の基本情報を記述する。

<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Script-Type" content="text/javascript"> <META http-equiv="Content-Style-Type" content="text/css">

上から順に、
テキストはシフトJISで書かれています。以前のバージョンに対応する為に、末尾が; charset=x-sjis"の場合もある。
スクリプトはJavaScriptで書かれています。
スタイルシートはCascading Style Sheets(='css')で書かれています。

<meta name="GENERATOR" content="Microsoft FrontPage Express 2.0"> <META name="Generator" content="Microsoft Word 98">

上はマイクロソフト社製「FrontPage Express 2.0」でHTMLを生成した時に挿入される。(もちろんWindows用)
下はマイクロソフト社製「Word 98」でHTMLを生成した時に挿入される。(もちろんこれはMacintosh用)
「Word 98」より素材や一部の画像を使用しているので意図的に残してあります。

<META name="author" content="著者/SHINSHU Univ. Masashing Club's Alumni-society"> <META name="author" content="Original:著者 ;HTMLised by 〜">

この文書を書いた人。「信州大学さだまさし研究会OB/OG会の◯◯さんの著作」です。
下段は、もともと会報などに掲載されていたものを引用した文書で使用する。
HTMLised by 〜 で、〜さんによりマークアップされHTML文書化されたことを表そうとしている。

<META name="description" content="文書の内容"> <META name="keywords" content="キーワード1, キーワード2">

上段では文書の内容が、下段ではこの文書に関連するキーワードが提供され、いずれも検索機能などに利用される。

<LINK rev="MADE" href="mailto:kisch@nifty.ne.jp">

作者の連絡先(=Ｅメール・アドレス)をあらわす。

<LINK rel="Start" href="http://member.nifty.ne.jp/kisch/webaz/index.html"> <LINK rel="Index" href="http://member.nifty.ne.jp/kisch/webaz/c_index.html"> <LINK rel="Prev" href="prev_page.html"> <LINK rel="Next" href="next_page.html"> <LINK rev="Appendix" href="web_azumino.html">

上から順に、
http://〜は、最初の位置もしくはHomePageです。
http://〜は、索引あるいはサイトマップです。
prev_page.htmlは、ひとつ前の文書です
next_page.htmlは、ひとつ後の文書です
この文書は、web_azumino.htmlの付録です

<TITLE>タイトル</TITLE>

この文書のタイトルです。ウインドウのタイトルバーなどに表示されます。

<STYLE type="text/css">  </STYLE>

<STYLE>〜</STYLE>内のにCSS形式でスタイルを記述しています。
この文書で表現したい主な表現方法や見せ方が記述されています。文書の内容とは直接関係ないですが、わりと多く文書構造と関連づけています。

</HEAD>

この文書の基本情報の終わり。

<BODY>

〜</BODY>までが、この文書で表現したい内容。

<DIV title="見出し">

〜</DIV>までが、この文書のヘッダー、見出し。
大見出し、スクリプトによるジャンプ、文書の概説などを含む。

<H1>文書の大見出し</H1>

最上位の見出し。この文書自体の見出しでもある。

<P>〜</P>

この文書の概説や簡単なコメントなどを記述した、段落(=パラグラフ)

<DIV title="JavaScript" id="js"> <SCRIPT type="text/javascript">  </SCRIPT> <NOSCRIPT> <P><A accesskey="c" href="../c_index.html">⇒索引(index)へ</A></P> </NOSCRIPT> </DIV>

<SCRIPT>〜</SCRIPT>内のにJavaScript形式でスクリプトを記述しています。
スクリプトを使わないユーザーのために<NOSCRIPT>〜</NOSCRIPT>に代わりの(1階層上の)索引へのリンク(ここでは'c'キーがショートカットとして設定されています)があります。

<FORM action="#js"> <P><SELECT onChange="moveTitle(this.options.selectedIndex)"> <OPTION selected>↓目次↓〔ここから選べます〕↓</OPTION> <OPTION>データ１</OPTION> <OPTION>データ２</OPTION> </SELECT></P> </FORM>

<FORM>〜</FORM>で、上記のスクリプトで処理するデータを送ります。
そのデータは<OPTION>〜</OPTION>で提示され、<SELECT>〜</SELECT>によって主にプルダウン形式で表示されます。
なお、selectedと記述された項目がはじめに表示されることになります。

ここではプルダウン・メニューで選択したデータを"moveTitle(〜)"という関数で処理するように書いてあるはずです。

</DIV> <HR title="header">

〜</DIV>までが、この文書のヘッダ。と、それを視覚的に表現している水平線。

<DIV class="n"><A accesskey="b" href="prev_page.html">←前</A>┨<A href="../c_index.html#index">index</A>┠<A accesskey="n" href="next_page.html">後→</A></DIV> <HR>

文書に前後関係がある場合に、前後の文書と目次にリンクしています。
ここでは'b'と'n'キーがショートカットとして設定されています。

そして本文との区切りを視覚的に表現している水平線。

<DIV title="本文"> <H2>本文の見出し</H2>

最終的な、〜</DIV>までが、この文書の本文にあたる。
本文の内容が複数の話題になるときには、省略している場合もあるが、それぞれの見出しが入ります。

<P>文章1<BR>文章2</P>

本文をパラグラフ単位で記述します。複数行にわたる文章は改行することも出来ます。
パラグラフ(=paragraph)と日本語でいう段落との違いについて、レトリックに関する講議ではしっかりと叩き込まれるらしいのですが、パラグラフの概念が希薄な日本語環境では難しい問題です。。

パラグラフとは「文章の一区切りで，内容的に連結されたいくつかの文から成り，全体としてある一つの話題についてある一つのこと（考え）を言う（記述する，主張する）もの」

そしてパラグラフには、その話題について端的に述べた中心文(=topic sentence)と次のような文が含まれる。

中心文で一口に述べたことをくわしく説明するもの

そのパラグラフと他のパラグラフとの関係を示すもの

などと、解説している本もあります。
難しいので、ここでは努力目標にとどめておきましょう。

<BLOCKQUOTE cite="URI"><P>引用文</P></BLOCKQUOTE>

上の例でも使っていますが、どこそこからの引用文であることを表します。
なお、URIとは、Uniform Resource Identifiersの略で、よく'http://〜'などで表されるURL(=Universal Resource Locator)を含むweb上にあるいろんなモノを指す大まかな概念です。

<H3><A name="anchor">小見出し</A></H3>

本文の内容がいくつかの節(=section)に分かれた場合や、リスト(=list)や表(=table)などの見出しに使ってます。
この場合は「小見出し」の文字が、他所からのリンク対象のアンカーになります。

<OL><LI>リスト1</LI><LI>リスト2</LI></OL> <UL><LI>リスト1</LI><LI>リスト2</LI></UL>

両者ともリストであるが、上段では数字・ローマ数字・アルファベットでリストに順番をつけられる。下段ではリスト項目が丸・四角・点であらわされるので並列なリストになる。

<DL> <DT>定義語1</DT><DD>定義語1の説明</DD> <DT>定義語2</DT><DD>定義語2の説明</DD> </DL>

『定義リスト』であるが、その堅苦しい語感からは考えられないほど、自由度の高い使い方ができる便利なリスト。辞書みたいな使い方や、トピックとそのコメントといった使い方もできる。
定義語で対象となる言葉・人物・話題などを設定し、説明にその解説・コメントなどを記述する。
つまりこの文書の様に使っています。

<TABLE frame="border" rules="all" border="1" summary="概要"> <CAPTION><SPAN>table1.</SPAN>キャプション</CAPTION> <THEAD> <TR><TH>セル</TH><TH>セル</TH></TR> </THEAD> <TBODY> <TR><TH>セル</TH><TD>セル</TD></TR> <TR><TH>セル</TH><TD>セル</TD></TR> </TBODY> </TABLE>

あくまでも表(=table)です。
この場合は、上下左右を枠で囲み、すべてのセルの境界に線をひいた、縦3列×横2行の表になります。
上の1列は表ヘッダで、縦行のタイトルとなるヘッダ・セルです。
以下の表本体は、横列のタイトルとなるヘッダ・セルといくつかのデータ・セルを重ねて構成します。
もちろん表なので、上には表の番号をふって簡単な説明(=caption)をつけましょう。

<DIV title="図解">

<IMG src="URI" alt="代替語" height="高さ" width="横幅"><BR> <SPAN class="cap"><SPAN>fig1.</SPAN>キャプション</SPAN>

グラフィカルな環境で指定したURIの画像を表示します。
表示したい画像の縦横のサイズをピクセル数で指定すると、そのスペースを確保します。また、画像を表示しない場合には代替語が表示されます。
そして、図解(=figure)には図解の番号をふって簡単な説明(=caption)をつけましょう。

<P>その説明を<EM>強調</EM>して<STRONG>より強調</STRONG>して<EM>さらに<STRONG>強調</STRONG></EM>する。</P>

その説明を強調してより強調してさらに強調する。

たとえ似ていても、次の一文とは明らかに異なるので、ご注意。

その説明を強調してより強調してさらに強調する。

<I>イタリック体</I><B>ボールド体</B><TT>等幅・固定ピッチ</TT>

どれもあまり使いませんが、生物学の約束事で「生物の学名」はイタリック体で表記することになっています。
ですが、必要に迫られると等幅・固定ピッチをなりふり構わず使っています。

</DIV>

<A href="http://www.sada.co.jp">絶対パス</A> <A href="../index.html">相対パス</A> <A href="#anchor">参照先アンカー</A> <A name="anchor">参照元アンカー</A> <A href="c_index.html#index">index</A> <A href="mailto:E-mail@address" name="Email">Eメール・アドレス</A>

上から順に、

リンク先を、絶対的に指定します。
リンク先を、相対的に指定します。
この文書のアンカーにジャンプします。
この文書のアンカーを設定します。
上記のように設定した、別文書のアンカーにジャンプします。
メール・ソフト/メーラーを起動します。同時に参照元となるアンカーにもなります。

</DIV> <HR>

〜</DIV>までが、この文書の本文。

そして本文との区切りを視覚的に表現している水平線。

<DIV class="n"><A href="prev_page.html">←前</A>┨<A href="../c_index.html#index">index</A>┠<A href="next_page.html">後→</A></DIV> <HR title="footer">

ヘッダー下にあるものと同じもの。
と、それをそしてフッターとの区切りを視覚的に表現している水平線。

<DIV title="署名"> <P><A accesskey="y" href="../index.html">⇒ふりだしに戻る</A>[y]</P> <P class="sig">[*この背景には再生紙を使用しています。]<BR>修正日<SPAN lang="en">: day/month/year by <A accesskey="m" title="mail to author" href="mailto:E-mail@address">author</A>(<ABBR title="Shinhu Univ. Masashing Club">S.U.M.C.</ABBR>)</SPAN></P> </DIV>

フッターとして署名などを記述しています。HomePageに戻るリンクが相対パスで記述しています。
ここでは'y'キーがショートカットとして設定されています。
更新日あるいは修正日と著者それから所属の信州大学さだまさし研究会の略称が英語で記述してあります。

</BODY>

この文書の本体の終わり。

</HTML>

このHTML文書の終わり。

[EOF]