情報教育演習II 第10回
Webとハイパーテキスト
「ハイパーテキスト」と「ハイパーリンク」
「本」という文書（テキスト）は、
１ページ目から、順番に、書かれ読まれます。
ハイパーテキスト(Hyper Text)とは、
ある文書の中に他の文書への「位置情報」を埋め込むことで、
文章同士を相互に結びつけることができる、
コンピュータを利用した文書のひとつです。
テキスト(Text)を超える(Hyper)、というところから名づけられました。
ハイパーリンク(Hyper Link)とは
他の文書や様々な情報（画像、音声、動画など）への位置情報のことです。
リンク(Link)ともいいます。
ハイパーテキストを使えば、
膨大な情報を、順番に読む必要はなく、
ハイパーリンクを利用して効率的に情報にアクセスすることができます。
ハイパーテキストの特徴
- それぞれの情報は、リンクで結びついている
- それぞれの情報は、（ある程度は）内容が独立している
- それぞれお情報は、独立して作成・管理される
Webページの作成
Webページを作成する道具
Webページを作成するには、いくつかのソフトウェアが必要です。
- 編集ソフト
- Webページを作成し、編集するためのソフトです。いくつかの種類があります。
- アプリケーションソフト
ワープロソフトなど、本来は別の目的に使用するソフトの中には、簡単なWebページを作るための機能があるものがあります。
- ホームページ作成ソフト
Webページを作成専用のソフトで、作成・編集するためのさまざまな機能をもっています。また、サーバへのデータの転送や画像データの作成・編集機能がある、高機能なものもあります。
- テキストエディタ
Webページはテキストファイルですので、専用のソフトがなくても作成することができます。Windowsの「メモ帳」やMacintoshの「Simple Text」でも、十分作成することができます。
- ブラウザ
- 作成中または完成したWebページのでき具合を、ブラウザを使って確認します。
なお、同じWebページでもブラウザによって見栄えが異なる場合があります。
これについては、あとで詳しく説明します。
- ファイル転送ソフト
- 作成したWebページをネットワークで公開するには、Webサーバに登録する必要があります。
Webサーバに作成したWebページを送ったり、逆にWebサーバから現在のデータを取り寄せるのに、ファイル転送（FTP）ソフトを使用します。
テキストエディタを使うメリット・デメリット
- メリット
- HTMLなどのWWWに関する技術の勉強になる
- 余計なデータが勝手に書き込まれない（見やすいファイル）
- ブラウザによる表示の違いなどを意識して作成できる
- デメリット
- HTMLなどのWWWに関する技術をある程度理解する必要がある
- 作業に慣れるまで、作るのに時間がかかる
- 専用ソフトとは違い...
- HTMLを自分で入力しなければならない
- 入力中に出来上がりを確認できない（ソフトの切り替えが必要）
HTML : Hyper Text Markup Language
HTMLとは
HTML(Hyper Text Markup Language)は、
WWW(World Wide Web)上で、ハイパーテキストを利用して情報を発信するための、
コンピュータ言語のひとつです。
W3C(World Wide Web Consortium)が仕様を発表しています。
特徴は次のとおりです。
- ハイパーテキストの機能をもつ
- 文書の中に、構成要素をあらわす目印（マーク）をつけることができる
- 目印をコンピュータが解釈して、適切な表現で表示する
- 例（１）「○○から××までを見出しにする」
- 例（２）「○○から××までを太字にする」
- 例（３）「○○の部分をほかの情報へのリンクにする」
HTMLは、数年おきに、新しいバージョン（版）に更新されています。
現在のバージョンは、HTML4.01です。
- HTML 1.0 (1993年）
- HTML 2.0 (1995年）
- HTML 3.2 (1997年）
- HTML 4.0 (1997年、1998年）
- HTML 4.01 (1999年）
- XHTML 1.0 (2000年、2002年）
- XHTML 1.1 (2001年）
HTML文書とブラウザ
HTML文書とは、HTMLで書かれた文書のことです。（HTMLファイルともいう）
ファイル名は必ず半角文字で、拡張子は「.html」か「.html」になります。
+----------+ (解析) +==========+ (表示) +-----------+
| HTML文書 |------->| ブラウザ |------->| Webページ |
|__________/ +==========+ |___________/
Webサーバ上にあるHTML文書を、ブラウザが内容を解析して、
Webページとして適切な表示をします。
ただし、HTML文書に書かれた、文書構造の目印の表現のしかたが、
ブラウザによって多少異なります。
また、ブラウザがどのHTMLのバージョンに対応しているかによっても、
表示のできる範囲が変わってしまいます。
現在の主なブラウザは、次のとおりです。
- Internet Explorer（マイクロソフト）
- Mozilla, Firefox（The Mozilla Organization）
- Opera （Opera Software、ライブドア）
HTMLの書き方
- タグ(tag)
- 文章に意味や表示の仕方を指定するために使うマークを使う
- 「<」と「>」で囲まれた文字列（タグ名）
- タグ名は半角文字で、大文字と小文字の区別なし
- 開始タグ（<...>）と終了タグ（</...>）で囲まれた部分が指定される
<h1>今回の内容</h1>
- タグの入れ子ができる
- 属性(attribute)
HTMLファイルの構造
HTMLファイルの構造は、たいてい次のようになっています。
<html>
<head>
<title>タイトル</title>
</head>
<body>
コンテンツ
</body>
</html>
- <html>...</html>（HTML要素）
- <head>...</head>（ヘッダ要素）
- HTML文書の情報（本でいえば、題名や著者、発行日など）
- <title>...</title>
- <body>...</body>（ボディ要素）
空白と改行の扱い
- 空白
- 半角スペースは、何文字入力しても、ブラウザでは一文字の空白文字として表示
- 全角スペースは、入力した数だけの空白文字（全角）としてて表示
- 改行
- <br>タグで改行する位置を指定する
- HTMLファイルの中で改行しても、ブラウザでは一文字の空白文字として表示
ここで改行します<br>ここで改行します
記号の入力
「<」は「>」などは、タグなどのHTMLが使用する記号とみなされてしまいます。
そこで、次のようにして、一部の記号を入力します。
| 記号 | HTMLでの入力 |
| ＜ | ＆lt; |
| ＞ | ＆gt; |
| ＆ | ＆amp; |
| ” | ＆quot; |
| （空白） | ＆nbsp; |
HTML文書の作成
雛形の作成
見出し
段落と改行
文書の装飾
箇条書き
リンク
行の位置揃え
- <div align="揃えかた">〜</div>
水平線
- <hr>
- 文章を区切る、水平線（横罫線）を設定します。
- 「width="」と「"」の間に、長さをパーセントで指定することができます。
<hr>
<hr width="80%">
署名
参考リンク
- とほほのWWW入門
- Academic HTML
- The Quick Color Table
- 0からHTML
