Lecture/JouhouC2004/10th の変更点 - KAWANO's PukiWiki Plus!

追加された行はこの色です。
削除された行はこの色です。
Lecture/JouhouC2004/10th へ行く。
*情報教育演習II 第10回 [#vff54d7c]

**Webとハイパーテキスト [#v7965485]
***「ハイパーテキスト」と「ハイパーリンク」 [#n58f5d7b]
「本」という文書（テキスト）は、
１ページ目から、順番に、書かれ読まれます。

''ハイパーテキスト''(Hyper Text)とは、
ある文書の中に他の文書への「位置情報」を埋め込むことで、
文章同士を相互に結びつけることができる、
コンピュータを利用した文書のひとつです。
テキスト(Text)を超える(Hyper)、というところから名づけられました。

''ハイパーリンク''(Hyper Link)とは
他の文書や様々な情報（画像、音声、動画など）への位置情報のことです。
リンク(Link)ともいいます。

ハイパーテキストを使えば、
膨大な情報を、順番に読む必要はなく、
ハイパーリンクを利用して効率的に情報にアクセスすることができます。

***ハイパーテキストの特徴 [#a229dc5b]
-それぞれの情報は、リンクで結びついている
--必ずしも順番に並んでいない
-それぞれの情報は、（ある程度は）内容が独立している
--本のように「前に書いてあること」を考慮しない
-それぞれお情報は、独立して作成・管理される
--本のように、紙の上に情報が張り付いていない

**Webページの作成 [#n134a306]
***Webページを作成する道具 [#k93c5b78]
Webページを作成するには、いくつかのソフトウェアが必要です。

:編集ソフト|
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）ソフトを使用します。

***テキストエディタを使うメリット・デメリット [#q345b2df]
:メリット|
--HTMLなどのWWWに関する技術の勉強になる
--余計なデータが勝手に書き込まれない（見やすいファイル）
--ブラウザによる表示の違いなどを意識して作成できる
:デメリット|
--HTMLなどのWWWに関する技術をある程度理解する必要がある
--作業に慣れるまで、作るのに時間がかかる
--専用ソフトとは違い...
---HTMLを自分で入力しなければならない
---入力中に出来上がりを確認できない（ソフトの切り替えが必要）

**HTML : Hyper Text Markup Language [#k8ac6aba]
***HTMLとは [#zcf77d4a]
''HTML''(Hyper Text Markup Language)は、
WWW(World Wide Web)上で、ハイパーテキストを利用して情報を発信するための、
コンピュータ言語のひとつです。
[[W3C(World Wide Web Consortium):http://www.w3c.org/]]が仕様を発表しています。

特徴は次のとおりです。
-ハイパーテキストの機能をもつ
--他の文書や情報へのリンクを作ることができる
-文書の中に、構成要素をあらわす目印（マーク）をつけることができる
--目印をコンピュータが解釈して、適切な表現で表示する
--例（１）「○○から××までを見出しにする」
--例（２）「○○から××までを太字にする」
--例（３）「○○の部分をほかの情報へのリンクにする」

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文書とブラウザ [#j803a7e9]
''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の書き方 [#z7918129]
-タグ(tag)
--文章に意味や表示の仕方を指定するために使うマークを使う
---「<」と「>」で囲まれた文字列（タグ名）
---タグ名は半角文字で、大文字と小文字の区別なし
--開始タグ（<...>）と終了タグ（</...>）で囲まれた部分が指定される
 <h1>今回の内容</h1>
---終了タグのないものもある
 <hr>, <br>
--タグの入れ子ができる
---字下げを使って、タグの組み合わせがわかりやすく
 <body>
   <p>
     この中は<b>段落</b>です。
   </p>
 </body>
-属性(attribute)
--タグの機能を細かく設定するもの（属性のないタグもある）
---文字の大きさや色、線の太さや色など
--複数の属性を指定することができる（属性名="値"）
 これは<font size="5" color="red">重要</font>です。

***HTMLファイルの構造 [#l198a50c]
HTMLファイルの構造は、たいてい次のようになっています。
 <html>
 <head>
   <title>タイトル</title>
 </head>
 <body>
   コンテンツ
 </body>
 </html>
-<html>...</html>（HTML要素）
--そのファイルがHTML文書であることを示す
-<head>...</head>（ヘッダ要素）
--HTML文書の情報（本でいえば、題名や著者、発行日など）
-<title>...</title>
--Webページのタイトル名（タイトルバーに表示）
-<body>...</body>（ボディ要素）
--Webページとして表示される内容（コンテンツ）

***空白と改行の扱い [#sf722891]
-空白
--半角スペースは、何文字入力しても、ブラウザでは一文字の空白文字として表示
--全角スペースは、入力した数だけの空白文字（全角）としてて表示
-改行
--<br>タグで改行する位置を指定する
---HTMLファイルの中で改行しても、ブラウザでは一文字の空白文字として表示
-
 ここで改行します<br>ここで改行します

***記号の入力 [#j8a530ad]
「<」は「>」などは、タグなどのHTMLが使用する記号とみなされてしまいます。
そこで、次のようにして、一部の記号を入力します。
|記号|HTMLでの入力|h
|CENTER:＜|CENTER:＆lt;|
|CENTER:＞|CENTER:＆gt;|
|CENTER:＆|CENTER:＆amp;|
|CENTER:”|CENTER:＆quot;|
|CENTER:（空白）|CENTER:＆nbsp;|

**HTML文書の作成 [#xa4f359a]
***雛形の作成 [#lfe86442]
-まず、Webページを保存するフォルダを作成しましょう。
--「マイドキュメント」の中に、「public_html」というフォルダを作成してください。
-メモ帳を使って、次のような雛形を作りましょう。
 <html>
 <head>
   <title>Welcome to My Web Page!</title>
 </head>
 <body>
 
 </body>
 </html>
-<title>...</title> 
--Webページのタイトルを設定します。
-タイトルに「「わたし」の街」と設定してください。

***見出し [#fb895c72]
-<hn>...</hn>（nには1〜6の数字が入る）
--見出しを設定します。
--大きさが最も大きいh1から、最も小さいh6までの6段階あります。
---本で例えると、h1は題名や章見出し、h2は節見出し、h3は項見出し
-次のように見出しを設定しましょう。
  <h1>「わたし」の街</h1>
  <h2>はじめに</h2>
  <h2>メニュー</h2>

***段落と改行 [#nd9b6d19]
-<p>...</p>
--段落を設定します。
--ひとまとまりの（意味のある）文章に使います。
--改行や連続した半角文字の空白は、半角文字の空白一文字にしかならないことに注意しましょう。
-<br>
--改行を設定します。
--段落のなかで、強制的に改行するときに使います。
-「<h2>はじめに</h2>」のあとに、次のように入力しましょう。
  <p>このWebページは、「情報教育演習II」の授業で作成したものです。</p>
-「<h2>メニュー</h2>」のあとに、次のように入力しましょう（○○には自分の名前や出身地を入力）。
  <p>
    ここでは「わたし」○○が育った<br>○○県○○市について紹介します。
  </p>
-「</body>」の前の行に、区切り線を入れましょう。

***文書の装飾 [#tfe8ff34]
-<b>...</b>
--太字を設定します。
-<i>...</i>
--斜体を設定します。
-<hr>
--指定した行に区切り線（水平線）を設定します。
-<tt>...</tt>
--等幅フォントを設定します。
-自分の名前や出身地の名前を太字や斜体に設定してみましょう。
 <b>兵庫 太郎</b>, <i>兵庫県加古川市</i>

***箇条書き [#r3c5a18e]
-<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>

***リンク [#s71479b1]
-<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へのリンク

***行の位置揃え [#n8e0510d]
-<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> 

***水平線 [#vbbd8ef5]
-<hr>
--文章を区切る、水平線（横罫線）を設定します。
--「width="」と「"」の間に、長さをパーセントで指定することができます。
 <hr>
 <hr width="80%">

***署名 [#me85d050]
-<address>...</address>
--制作者の名前やメールアドレスなどの連絡先、著作権に関する情報を設定します。
-</body>の前の行に、次のように入力してください（○○は自分のメールアドレス）。
  <hr>
  <address>
  制作年月日: 2004-06-22; 更新年月日: 2004-06-29<br>
  <a href="mailto:○○">○○＾</a>
  </address>

**参考リンク [#pbee7144]
-とほほの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/
KAWANO's PukiWiki Plus! - Lecture/JouhouC2004/10th の変更点

メニュー

大学関係リンク

今日の5件

最新の5件
