| 目次 | 索引 |
|---|---|
今日は、テキストファイルを扱います。 テキストファイルとは、文字だけで構成されるファイルであることを思い出してください。 また、テキストファイルを作成するには、テキストエディタと呼ばれるアプリケーションを利用することも思い出してください。 以前と同じように、テキストエディタとしてJeditを使います。
テキストファイルを扱うときには、文字コードに関する理解が必要です。 文字コードをいい加減にしますと、ファイルの処理がうまくいかなかったり、文字化けに悩まされたりします。
パソコンの内部では、文字は直接処理されるわけではありません。 一つ一つの文字には番号が割り当てられていて、その番号をパソコンは処理するのです。 この、文字と番号の対応が、文字コードです。
文字コードは言語によって異なります。 さらに、同じ言語でも複数の文字コードが使われることがあります。 世界共通の文字コードも提案されていますが、これは最近の話です。
以下では、日本語に限って説明をします。
まず、全角文字と半角文字は、文字コードの意味で別物です。 全角文字とは、日本語モードで入力される、幅の広い文字のことです。 半角文字とは、英数モードで入力される、幅の狭い文字のことです。 全角文字の文字コードと半角文字の文字コードは異なります。 したがって、全角文字の"Ａ"と半角文字の"A"は、パソコンの内部では区別されます。 「半角文字で入力してください」と書かれた入力欄に、全角文字を入力しますと、文字の番号が違うので、うまく処理されないのです。 特に、スペースと全角スペースは混乱しやすいので、Jeditでは全角スペースを灰色の四角で表示します。
そして、全角文字については、いくつかの文字コードが使われています。 重要なものは以下の通りです。
| 文字コード | 主な用途 |
|---|---|
| JIS（ISO-2022-JP） | メール |
| シフトJIS | パソコン |
| EUC | ワークステーション |
| UTF-8 | Web |
同じ文字でも、文字コードが異なれば、割り当てられる番号も違います。 テキストファイルには、実際には文字の番号が記録されます。 したがって、保存する文字コードと開く文字コードが食い違うと、文字化けが起こるのです。
例えば、「瑕」という文字には、シフトJISで224-234という番号が割り当てられています（瑕疵（かし）で欠点という意味）。 また、「琲」という文字には、EUCで224-234という番号が割り当てられています（珈琲でコーヒー）。 テキストファイルに「瑕」と入力してシフトJISで保存し、EUCで開きますと、「琲」という文字に化けてしまいます。
| 文字 | シフトJIS | EUC |
|---|---|---|
| 琲 | 224-232 | 224-234 |
| 瑕 | 224-234 | 224-236 |
HTMLとは、HyperText Markup Languageの略で、Webページを記述するための言語です。
HTMLで書かれた文書をHTML文書と呼び、HTML文書が格納されたファイルをHTMLファイルと呼びます。
Webページを作成することは、HTMLファイルを作成し、補助的に画像ファイルなどを用意することです。
HTMLファイルはテキストファイルです。 したがって、テキストエディタで作成できます。
一般的に、Webページを作成するには、HTMLファイルを作成し、そのファイルをアップロードします。 この授業では、もう少し簡単な方法でWebページを作成します。
まず、東京女子大学のMacでは、ファイルをアップロードする必要はありません。 ホームフォルダにWWW-localというフォルダを作成し、その中にファイルを格納しますと、そのファイルは学内に公開されます。 ファイル名が filename .htmlならば、URLはhttp://www-local.twcu.ac.jp/~ loginname / filename .htmlです。
なお、ホームフォルダにWWWというフォルダを作成し、その中にファイルを格納しますと、そのファイルは世界中に公開されます。 ファイル名が filename .htmlならば、URLはhttp://www.twcu.ac.jp/~ loginname / filename .htmlです。 世界中に情報を公開することの責任を理解するまでは、WWWフォルダは作成しないでください。
それでは、次のようにしてWWW-localフォルダを作成してください。
次に、HTMLファイルを作成するわけですが、一から書くのは大変なので、テンプレート（雛形）をコピーし、それを変更することにします。 次のようにして、テンプレートをコピーしてください。
<!DOCTYPE
から
</HTML>
までをドラッグ。
なお、index.htmlというファイル名は特別で、URLではファイル名を省略できます。 つまり、WWW-localフォルダの中にindex.htmlという名前で保存しますと、そのファイルはhttp://www-local.twcu.ac.jp/~ loginname /で開けます。
ということで、最後に、Safariのアドレスバーにhttp://www-local.twcu.ac.jp/~ loginname /と入力してください。
後は、このテンプレートを編集すれば、Webページが完成します。 ただし、HTMLファイルを編集しても、即座にブラウザに表示されるわけではありません。 ブラウザに表示するには、次の操作を繰り返します。
HTMLの基本は、「タグで囲むと文書要素になる」です。
例えば、HTML文書に「
私の趣味はサイクリングです。
」と書きますと、「私の趣味はサイクリングです。」という文字列と見なされ、ブラウザではそのまま表示されます。
ところが、「
<P>私の趣味はサイクリングです。</P>
」と書きますと、「私の趣味はサイクリングです。」という段落と見なされ、ブラウザでは段落らしく表示されるのです。
この
<P>
と
</P>
がタグです。
詳しくは、
<P>
が開始タグ、
</P>
が終了タグです。
P
は、段落という意味のParagraphに由来します。
HTMLには、いろいろなタグが用意されています。
開始タグ
<
elt
>
と終了タグ
</
elt
>
で囲みますと、そこは文書要素
elt
と見なされ、ブラウザではその文書要素らしく表示されます。
タグによっては、開始タグだけを書き、終了タグは書かないものがあります。
例えば、タグ
<HR>
は水平線を表します（Horizontal Rule）。
このタグに終了タグはありません。
HTML文書には、水平線を表示したい所に
<HR>
とだけ書きます。
タグには属性を与えることができます。
属性とは、タグに対する追加情報です。
タグ
<
elt
>
に対して、属性
att
の値を
value
とするには、
<
elt
att
="
value
">
と書きます。
属性が2つある場合は、
<
elt
att1
="
value1
"
att2
="
value2
">
となります。
なお、終了タグには属性は書きません。
HTMLでは、文字
<
はタグの開始と見なされます。
本当に<と表示するには、代わりに
<
と書きます。
このような、特別な文字の代わりになる文字列を、文字実体参照と呼びます。
基本的な文字実体参照は、以下の表の通りです。
| 文字 | 文字実体参照 | 覚え方 |
|---|---|---|
| スペース（改行禁止） | |
No-Break SPace |
| < | < |
Less Than |
| > | > |
Greater Than |
| & | & |
AMPersand |
| " | " |
QUOTe |
テンプレートについて、簡単に説明します。
<!DOCTYPE ...><HTML>〜</HTML><HEAD>〜</HEAD><META ...><TITLE>〜</TITLE><BODY>〜</BODY><ADDRESS>〜</ADDRESS>一般的に、文書では、全体はいくつかの章に分かれ、それぞれの章はいくつかの節に分かれ、それぞれの節はいくつかの小節に分かれます。 文書の規模によっては、章の上に部が設けられたり、章がなかったりします。 それぞれの文書単位（部、章、節、小節など）には見出しが付きます。 ここでは、もっとも大きな文書単位の見出しをレベル1の見出し、次に大きな文書単位の見出しをレベル2の見出し、…と呼ぶことにします。
HTMLでは、レベル1の見出しを
<H1>
〜
</H1>
で囲みます（Heading）。
すると、ブラウザでは、上下に余白が設けられ、太字の大きなフォントで表示されます。
レベル2の見出しは
<H2>
〜
</H2>
です。
レベル2では、やや大きなフォントになります。
レベル3, 4, 5, 6の見出しは、それぞれ
<H3>
〜
</H3>
,
<H4>
〜
</H4>
,
<H5>
〜
</H5>
,
<H6>
〜
</H6>
です。
レベル3, 4, 5, 6となるにつれて、だんだん小さなフォントが使われます。
HTMLでは、段落を
<P>
〜
</P>
で囲みます。
すると、ブラウザでは、上下に余白が設けられて表示されます。
引用とは、参考目的で取り込んだ他人の文章のことです。 引用は、自分の文章とは区別する必要があります。
HTMLでは、引用を
<BLOCKQUOTE>
〜
</BLOCKQUOTE>
で囲みます。
すると、ブラウザでは、上下左右に余白が設けられて表示されます。
HTML文書で改行しても、ブラウザでは原則として改行されません。 改行は、ウィンドウの幅に合わせて行われます。 また、HTML文書でスペースをいくら並べても、ブラウザでは一つのスペースになります。
改行やスペースの個数に意味があるテキストを、整形済みテキストと呼びます。
HTMLでは、整形済みテキストを
<PRE>
〜
</PRE>
で囲みます（PREforamtted）。
すると、ブラウザでは、上下に余白が設けられ、改行は改行のまま、スペースはスペースのまま表示されます。
また、整形済みテキストではないけれど、強制的に改行するところには、タグ
<BR>
を書きます（line BReak）。
すると、ブラウザでは、強制的に改行されます。
HTMLでは、箇条書きができます。 ここでは、箇条書きのことをリストと呼びます。 HTMLには、3種類のリストが用意されています。
最初は、番号無しリストです。
これは、項目の順番に意味がないリストです。
HTMLでは、まず、一つ一つの項目を
<LI>
〜
</LI>
で囲みます（List Item）。
そして、項目の並びを
<UL>
〜
</UL>
で囲みます（Unordered List）。
すると、ブラウザでは、上下に余白が設けられ、一つ一つの項目が記号付きで表示されます。
次は、番号付きリストです。
これは、項目の順番に意味があるリストです。
HTMLでは、まず、一つ一つの項目を
<LI>
〜
</LI>
で囲みます。
そして、項目の並びを
<OL>
〜
</OL>
で囲みます（Ordered List）。
すると、ブラウザでは、上下に余白が設けられ、一つ一つの項目が番号付きで表示されます。
最後の定義リストについては、次回説明します。