*情報教育演習II 第10回 [#vfafdfdc] *World Wide Webとハイパーテキスト [#n02058f2] **Webとハイパーテキスト [#n34b0be6] ***「ハイパーテキスト」と「ハイパーリンク」 [#ac594215] **「ハイパーテキスト」と「ハイパーリンク」 [#ac594215] 「本」という文書(テキスト)は、 1ページ目から、順番に、書かれ読まれます。 ''ハイパーテキスト''(Hyper Text)とは、 「''ハイパーテキスト''」(Hyper Text)とは、 ある文書の中に他の文書への「位置情報」を埋め込むことで、 文章同士を相互に結びつけることができる、 文書同士を相互に結びつけることができる、 コンピュータを利用した文書のひとつです。 テキスト(Text)を超える(Hyper)、というところから名づけられました。 ''ハイパーリンク''(Hyper Link)とは 「''ハイパーリンク''」(Hyper Link)とは 他の文書や様々な情報(画像、音声、動画など)への位置情報のことです。 リンク(Link)ともいいます。 #ref(hypertext.png,nolink,ハイパーテキスト) ハイパーテキストを使えば、 膨大な情報を、順番に読む必要はなく、 ハイパーリンクを利用して効率的に情報にアクセスすることができます。 ***ハイパーテキストの特徴 [#q8a14c55] -それぞれの情報は、リンクで結びついている --必ずしも順番に並んでいない -それぞれの情報は、(ある程度は)内容が独立している --本のように「前に書いてあること」を考慮しない -それぞれお情報は、独立して作成・管理される --本のように、紙の上に情報が張り付いていない **ハイパーテキストの特徴 [#q8a14c55] :それぞれの情報は、リンクで結びついている| ハイパーテキストの情報は、本のように、必ずしも順番に並んでいるとは限りません。 ハイパーリンクを使って、(人間の頭の中と同じように)自由に情報同士を結び付けています。 :それぞれの情報は、(ある程度は)内容が独立している| ハイパーテキストの情報は、順番に並んでいるとは限らないので、 本のように「前に書いてあること」を考慮した内容にはなっていません。 それぞれの情報は、その中である程度完結したものになっています。 :それぞれの情報は、独立して作成・管理される| ハイパーテキストの情報は、 本のように、紙(メディア)の上に情報が張り付いてはいません。 本の情報は、内容が変更したり新しい情報を追加するためには、 本そのものを作り直す必要があります。 しかし、ハイパーテキストは、そのテキストだけ変更・追加すればいいので、 リンク全体を作成する必要がありません。 **Webページの作成 [#k802b483] ***Webページを作成する道具 [#z106678c] Webページを作成するには、いくつかのソフトウェアが必要です。 **World Wide Web [#b3a1d891] ''Web (World Wide Web)'' は、1989年に''ティム・バーナーズ=リー''が作った、 インターネット上の情報を共有するためのしくみです。 :編集ソフト| Webページを作成し、編集するためのソフトです。いくつかの種類があります。 --アプリケーションソフト~ ワープロソフトなど、本来は別の目的に使用するソフトの中には、簡単なWebページを作るための機能があるものがあります。 --ホームページ作成ソフト~ Webページを作成専用のソフトで、作成・編集するためのさまざまな機能をもっています。また、サーバへのデータの転送や画像データの作成・編集機能がある、高機能なものもあります。 ---[[ホームページビルダー(日本IBM):http://www-6.ibm.com/jp/software/internet/hpb/]] ---[[Dreamweaver(マクロメディア):http://www.macromedia.com/jp/software/dreamweaver/]] --テキストエディタ~ Webページはテキストファイルですので、専用のソフトがなくても作成することができます。Windowsの「メモ帳」やMacintoshの「Simple Text」でも、十分作成することができます。 :ブラウザ| 作成中または完成したWebページのでき具合を、ブラウザを使って確認します。 なお、同じWebページでもブラウザによって見栄えが異なる場合があります。 これについては、あとで詳しく説明します。 :ファイル転送ソフト| 作成したWebページをネットワークで公開するには、Webサーバに登録する必要があります。 Webサーバに作成したWebページを送ったり、逆にWebサーバから現在のデータを取り寄せるのに、ファイル転送(FTP)ソフトを使用します。 このWebは、ハイパーテキストをインターネット上で現実化したものです。 共通のフォーマットで作った文書(テキスト)をインターネット上に公開し、 それらを、ハイパーリンクを使って、相互に参照できるようにしました。 ***テキストエディタを使うメリット・デメリット [#z2b58b38] :メリット| --HTMLなどのWWWに関する技術の勉強になる --余計なデータが勝手に書き込まれない(見やすいファイル) --ブラウザによる表示の違いなどを意識して作成できる :デメリット| --HTMLなどのWWWに関する技術をある程度理解する必要がある --作業に慣れるまで、作るのに時間がかかる --専用ソフトとは違い... ---HTMLを自分で入力しなければならない ---入力中に出来上がりを確認できない(ソフトの切り替えが必要) ハイパーテキストを、インターネット上で、利用者のコンピュータ環境に関係なく、 誰もが利用できるようにするため、Webでは次のような技術を使っています。 -URL: ネットワーク上の情報の位置を特定するための技術 -HTTP: Webのシステムで情報をやりとりするための技術 -HTML: コンピュータ環境に関係なく情報を表現するための技術 **HTML : Hyper Text Markup Language [#lf55dbd5] ***HTMLとは [#sa3d49f8] ''HTML''(Hyper Text Markup Language)は、 WWW(World Wide Web)上で、ハイパーテキストを利用して情報を発信するための、 コンピュータ言語のひとつです。 [[W3C(World Wide Web Consortium):http://www.w3c.org/]]が仕様を発表しています。 Webに関する技術開発や普及活動は、 1994年に設立された、 [[WWWコンソーシアム(通称W3C):http://www.w3c.org/]]が行っています。 特徴は次のとおりです。 -ハイパーテキストの機能をもつ --他の文書や情報へのリンクを作ることができる -文書の中に、構成要素をあらわす目印(マーク)をつけることができる --目印をコンピュータが解釈して、適切な表現で表示する --例(1)「○○から××までを見出しにする」 --例(2)「○○から××までを太字にする」 --例(3)「○○の部分をほかの情報へのリンクにする」 &br; &navi2(Lecture/InfoDesignB2004/3rd,next);進んでください。 ---- #navi2(Lecture/InfoDesignB2004/3rd,toc,next) 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文書とブラウザ [#ja00efbf] ''HTML文書''とは、HTMLで書かれた文書のことです。(HTMLファイルともいう) ファイル名は必ず半角文字で、拡張子は「.html」か「.html」になります。 +----------+ (解析) +==========+ (表示) +-----------+ | HTML文書 |------->| ブラウザ |------->| Webページ | |__________/ +==========+ |___________/ Webサーバ上にあるHTML文書を、ブラウザが内容を解析して、 Webページとして適切な表示をします。 ただし、HTML文書に書かれた、文書構造の目印の表現のしかたが、 ブラウザによって多少異なります。 また、ブラウザがどのHTMLのバージョンに対応しているかによっても、 表示のできる範囲が変わってしまいます。 現在の主なブラウザは、次のとおりです。 -Internet Explorer(マイクロソフト) -[[Mozilla:http://jt.mozilla.gr.jp/products/mozilla1.x/]], [[Firefox:http://jt.mozilla.gr.jp/products/firefox/]](The Mozilla Organization) -[[Opera:http://opera.livedoor.com/]] (Opera Software、ライブドア) ***HTMLの書き方 [#pbdc6e7b] -タグ(tag) --文章に意味や表示の仕方を指定するために使うマークを使う ---「<」と「>」で囲まれた文字列(タグ名) ---タグ名は半角文字で、大文字と小文字の区別なし --開始タグ(<...>)と終了タグ(</...>)で囲まれた部分が指定される <h1>今回の内容</h1> ---終了タグのないものもある <hr>, <br> --タグの入れ子ができる ---字下げを使って、タグの組み合わせがわかりやすく <body> <p> この中は<b>段落</b>です。 </p> </body> -属性(attribute) --タグの機能を細かく設定するもの(属性のないタグもある) ---文字の大きさや色、線の太さや色など --複数の属性を指定することができる(属性名="値") これは<font size="5" color="red">重要</font>です。 ***HTMLファイルの構造 [#x755fc03] HTMLファイルの構造は、たいてい次のようになっています。 <html> <head> <title>タイトル</title> </head> <body> コンテンツ </body> </html> -<html>...</html>(HTML要素) --そのファイルがHTML文書であることを示す -<head>...</head>(ヘッダ要素) --HTML文書の情報(本でいえば、題名や著者、発行日など) -<title>...</title> --Webページのタイトル名(タイトルバーに表示) -<body>...</body>(ボディ要素) --Webページとして表示される内容(コンテンツ) ***空白と改行の扱い [#lbea4b84] -空白 --半角スペースは、何文字入力しても、ブラウザでは一文字の空白文字として表示 --全角スペースは、入力した数だけの空白文字(全角)としてて表示 -改行 --<br>タグで改行する位置を指定する ---HTMLファイルの中で改行しても、ブラウザでは一文字の空白文字として表示 - ここで改行します<br>ここで改行します ***記号の入力 [#b81e5319] 「<」は「>」などは、タグなどのHTMLが使用する記号とみなされてしまいます。 そこで、次のようにして、一部の記号を入力します。 |記号|HTMLでの入力|h |CENTER:<|CENTER:&lt;| |CENTER:>|CENTER:&gt;| |CENTER:&|CENTER:&amp;| |CENTER:”|CENTER:&quot;| |CENTER:(空白)|CENTER:&nbsp;| **HTML文書の作成 [#fd3a4541] ***雛形の作成 [#n87f2bab] -まず、Webページを保存するフォルダを作成しましょう。 --「マイドキュメント」の中に、「public_html」というフォルダを作成してください。 -メモ帳を使って、次のような雛形を作りましょう。 <html> <head> <title>Welcome to My Web Page!</title> </head> <body> </body> </html> -<title>...</title> --Webページのタイトルを設定します。 -タイトルに「「わたし」の街」と設定してください。 ***見出し [#t4463359] -<hn>...</hn>(nには1〜6の数字が入る) --見出しを設定します。 --大きさが最も大きいh1から、最も小さいh6までの6段階あります。 ---本で例えると、h1は題名や章見出し、h2は節見出し、h3は項見出し -次のように見出しを設定しましょう。 <h1>「わたし」の街</h1> <h2>はじめに</h2> <h2>メニュー</h2> ***段落と改行 [#s47c32a1] -<p>...</p> --段落を設定します。 --ひとまとまりの(意味のある)文章に使います。 --改行や連続した半角文字の空白は、半角文字の空白一文字にしかならないことに注意しましょう。 -<br> --改行を設定します。 --段落のなかで、強制的に改行するときに使います。 -「<h2>はじめに</h2>」のあとに、次のように入力しましょう。 <p>このWebページは、「情報教育演習II」の授業で作成したものです。</p> -「<h2>メニュー</h2>」のあとに、次のように入力しましょう(○○には自分の名前や出身地を入力)。 <p> ここでは「わたし」○○が育った<br>○○県○○市について紹介します。 </p> -「</body>」の前の行に、区切り線を入れましょう。 ***文書の装飾 [#rc0fb0d6] -<b>...</b> --太字を設定します。 -<i>...</i> --斜体を設定します。 -<tt>...</tt> --等幅フォントを設定します。 -自分の名前や出身地の名前を太字や斜体に設定してみましょう。 <b>兵庫 太郎</b>, <i>兵庫県加古川市</i> ***箇条書き [#sda2e839] -<ul>...</ul>、<ol>...</ol> --箇条書きを設定します。 --ulタグは番号なし、olタグは番号つきの箇条書きに使います。 -<li>...</li> --箇条書きの中の項目を設定します。 --liタグは、次のようにul、olのタグの中の項目に使います。 <ol> <li>ひとつめ</li> <li>ふたつめ</li> </ol> -<dl>...</dl>, <dt>...</dt>, <dd>...</dd> --説明つき箇条書きを設定します。 --dlタグの中に、項目名(dtタグ)とその説明(ddタグ)を書きます。 <dl> <dt>項目1</dt> <dd>項目1の説明</dd> <dt>項目2</dt> <dd>項目2の説明</dd> </dl> -「〜ついて紹介します。</p>」のあとに、次のように入力しましょう。 <ul> <li>「わたし」について</li> <li>「街」について</li> <li>「わたし」と「街」</li> </ul> ***リンク [#v92fb636] -<a href="...">...</a> --他のWebページにジャンプするリンクを設定します。 --「href="」と「"」の間にリンク先のURLを指定し、「">」と「</a>」の間にリンクさせる文字を設定します。 --次のようにすると、[[Yahoo! JAPAN:http://www.yahoo.co.jp/]]にジャンプします。 <a href="http://www.yahoo.co.jp/">Yahoo! JAPAN</a> --次のようにすると、メーラーが起動して、hoge@aaa.bbb.cc.jpへのメールを送るウィンドウが開きます。 <a href="mailto:hoge@aaa.bbb.cc.jp">メールはこちらへ</a> -「<hr>」の下の行に、次のように大学のサイトへのリンクを設定しましょう。 <a href="http://www.hyogo-dai.ac.jp/">兵庫大学のページへ</a> -箇条書きの項目に、次のようなリンクを設定してください。 --「わたし」について:prefile.htmlへのリンク --「街」について:town.htmlへのリンク --「わたし」と「街」:memory.htmlへのリンク ***行の位置揃え [#j1fb75d1] -<div align="揃えかた">〜</div> --行をそろえる位置を指定します。揃え方には、「left」「center」「right」があります。 --「align」という属性は、<h>や<p>属性にも使えます。 <div align="right">hogehoge1</div> <div align="center">hogehoge1</div> <h1 align="center">hogehoge1</h1> <p align="center">hogehoge1</p> ***水平線 [#m56d82b7] -<hr> --文章を区切る、水平線(横罫線)を設定します。 --「width="」と「"」の間に、長さをパーセントで指定することができます。 <hr> <hr width="80%"> ***署名 [#h200af7b] -<address>...</address> --制作者の名前やメールアドレスなどの連絡先、著作権に関する情報を設定します。 -</body>の前の行に、次のように入力してください(○○は自分のメールアドレス)。 <hr> <address> 制作年月日: 2004-06-22; 更新年月日: 2004-06-29<br> <a href="mailto:○○">○○^</a> </address> **参考リンク [#a4dffe91] -とほほのWWW入門 --http://tohoho.wakusei.ne.jp/ -Academic HTML --http://www.tg.rim.or.jp/~hexane/ach/ -The Quick Color Table --http://www.kanzaki.com/docs/colortable-t.html -0からHTML --http://www.zerokara.com/html/ |