1,2. 情報メディアコミュニケーション(Ver.2018.10.3)
0.実験に必要な物
USB メモリ、レポート用紙、テキスト、筆記用具を必ず持参すること。 ※実験前にテキストを読み、内容を理解して実験に臨むこと。1.目的
本実験では，インターネットのしくみ，ホームページのしくみについて学ぶ．次に HTML 言語，各種 タグ，リンクの張り方およびサイト転送等について学ぶ．2.理論
2.1 インターネット 通信プロトコルTCP/IP を用いて全世界のネットワークを相互に接続した巨大なコンピュータネット ワークのことである．インターネットは全体を統括するコンピュータの存在しない分散型のネットワー クであり，全世界に無数に散らばったサーバコンピュータが相互に接続され，少しずつサービスを提供 することで成り立っている．インターネット上で提供されるサービスやアプリケーション(WWW や FTP，電子メールなどの基本的なものからクレジット決済などの高度なものまで)は，そのほとんどが TCP/IP という機種に依存しない標準化されたプロトコルを利用しており，インターネット上では機種 の違いを超えて様々なコンピュータが通信を行なうことができる．インターネットに参加するためには， インターネットに既に参加しているネットワークに専用回線で接続する必要がある．一般家庭などから 接続する場合は，公衆回線(電話回線やISDN 回線，ADSL 回線，FTTH 回線，無線 LAN など)からの 通信を受け付けてインターネットに接続してくれるインターネットサービスプロバイダと呼ばれる業 者と契約する必要がある．ただし，本学ではLAN 環境にあるのでプロバイダとの接続を考える必要は ない．本学の所有するサーバ上の指定されたサイトに，本実験で作成したホームページ用のファイルを 転送すればよい． 2.2 Web サーバ WWW システムにおいて，情報送信を行なうコンピュータのことである．また，WWW による情報送 信機能を持ったソフトウェアをさす場合もある．Web サーバは，HTML 文書や画像などの情報を蓄積 しておき，Web ブラウザなどのクライアントソフトウェアの要求に応じて，インターネットなどのネッ トワークを通じて，これらの情報を送信する役割を果たす．初期の Web サーバは，あらかじめ用意し ておいたファイルを送出する機能しか持たなかったが，最近では機能が増え，要求に応じてプログラム を実行し，結果をクライアントに送信する動的ページ生成の機能や，データベースと連携したトランザ クション処理機能などを持つものも登場している．中でもCGI や SSI などの拡張機能は歴史が古く， 最も一般的に利用されている．Java 言語を利用した Java サーブレットや JSP，Microsoft 社独自の技 術であるASP などを利用した Web サイトも増えている．Web サーバソフトウェアで最も人気があるの は，全世界のボランティアプログラマが共同開発しているフリーソフトウェアのApache で，インターネット上の Web サーバの過半を占めるといわれている．企業内のイントラネットでは Microsoft 社の IIS の人気が高い．
2.3 ブラウザ
Web ページを閲覧するためのアプリケーションソフトのことである．インターネットから HTML フ ァイルや画像ファイル，音楽ファイルなどをダウンロードし，レイアウトを解析して表示・再生する． フォームを使用してユーザがデータを Web サーバに送信したり，JavaScript や Flash，および Java などで記述されたアプリケーションソフトを動作させたりすることも可能である．世界初のグラフィカ ルなWeb ブラウザは NCSA によって開発された Mosaic である．現在では，Microsoft 社の Internet Explorer がかなりのシェアを占めるほか，Mosaic 開発チームが興した Netscape Communications 社 の Netscape Communicator(Navigator)，Netscape 社が立ち上げたオープンソースプロジェクト 「Mozilla.org」による Mozilla Firefox，Opera Software 社の Opera，Google 社の Google Chrome な どが著名な Web ブラウザである．また，テキストしか表示できない環境でも利用できる「テキストベ ース Web ブラウザ」と呼ばれるものもある．テキスト限定の環境ではもちろん画像は表示できないが (「画像が表示できる」テキストベース Web ブラウザというのもあり，テキストベースだが画像も表示 可能という環境では画像を表示させることができる)，HTML ファイルをタグに合わせて整形した状態 で読むことができる．テキストベースWeb ブラウザとしては w3m や lynx が著名である．本学のホー ムページを観覧するには“http://www.cc.it-hiroshima.ac.jp/”のようなアルファベットの文字列を入力 する．これをURL(Uniform Resource Locator)と呼び，インターネット上に存在する場所を指し示す記 述方式で，インターネットにおける情報の「住所」にあたる．情報の種類やサーバ名，ポート番号，フ ォルダ名，ファイル名などで構成される．（読めない単語はちゃんと調べる） 2.4 ホームページ ホームページは通常，複数のページから構成されている．最初に表示されるページのことを「トップ ページ」，それ以外のページのことを「サブページ」と呼ぶ．トップページのファイル名は通常 「index.html」である．「サイト」とは，プロバイダが所有するサーバ上に，自分のホームページ用の フォルダを確保してくれる場所のことである．ただし作業用としてパソコン上に，作成するホームペー ジ専用のフォルダ（仮のサイト）を作っておくと良い．
2.5 HTML(Hyper Text Markup Language)
Web ページを記述するためのマークアップ言語のことである．W3C が作成している規格で，最新版 はHTML ○○○○←最新版を調べて発表．HTML は文書の論理構造や見栄えなどを記述するために使 用される．また，文書の中に画像や音声，動画，他の文書へのハイパーリンクなどを埋め込むこともで きる．HTML で記述された文書を閲覧するには通常 Web ブラウザを使用する．しかし，HTML 文書は テキスト文書の一種であるため，テキストエディタで HTML 文書を開き，タグごとテキスト文書とし て読み書きすることも可能である．
2.6 タグ Web ページなどの記述に使われる HTML や XML では，元になる文書に「<」と「>」で囲まれた標 識を埋め込むことにより，表示ソフトに対して文書構造や書式，文字飾りなどを指示したり，画像や他 の文書へのリンクを埋め込むことができるようになっている．このように，地の文とは別のレベルで解 釈され(HTML の場合，文章を読むのは人間だがタグを解釈して表示に反映するのは Web ブラウザであ る)，付加情報を埋め込む特殊な文字列などのことをタグと言う．HTML ファイルであることをブラウ ザに知らせるために最初に<html>というタグがくる．そして HTML 文章の終わりには必ず</html>が つく．<head>から</head>はこのページに関する情報をまとめて載せる．このヘッダー部分の中の， <title>と</title>間に，ページの名前になるタイトル名を記述する．ホームページの内容は，<body>か ら開始する．ここにホームページを構成する各種の要素が含まれる．つまり，ボディにはブラウザで表 示される内容が記述される．ボディの終了タグは</body>とする．このように HTML 文章はヘッド部と ボディ部に分かれている． ＊example＊ ＊注意！＊タグは全て半角英数小文字で入力 <html> <title> タイトル名 例えば，「升井研究室へようこそ」などのタイトルを記入する． </title> <body> ページ内容 例えば，文章や画像を表示する． </body> </html>
3. 実験方法
3.1 第 1 週目の実験 ・理論について学ぶ． インターネットの仕組み，ホームページの仕組みに関して理論を学ぶ．必要があればメモを取っておく こと．担当項目（インターネット，Web サーバー，ブラウザ・・・等々）を 1 人につき１つ決めて順に ホワイトボードを使用して説明する． 各項目は全てレポートにまとめて提出することになるのでしっかり理解すること． ・フォルダの作成 デスクトップ上に自分のフォルダ”userwww_html”を作成する。既に同じ名前のフォルダがある場合 は削除して，新規に作成する。 ・index ページの作成 「スタート」→「プログラム」→「アクセサリ」→「メモ帳」でメモ帳を開き，メインページである index ページを作成する．記述については“2.6 タグ”の example を参照．記述できたら「ファイル」→「名前をつけて保存」 ＊注意＊保存先→”自分のフォルダの中”，ファイル名”index.html”，半角英数小文字で入力する． ・profile ページの作成 このページでは自分の簡単な自己紹介などを記載する．住所などの個人情報は記載しないように注意 する．また，他人の誹謗中傷も記載しないように注意する． index ページと同様にメモ帳で作成する．記述できたら 「ファイル」→「名前をつけて保存」 ＊注意＊保存先”自分のフォルダの中”，ファイル名”profile.html”，半角英数小文字で入力する． ・link ページの作成 このページでは自分のお気に入りのページを紹介する．節度のあるページを紹介すること． index ページと同様にメモ帳で作成する．記述できたら 「ファイル」→「名前をつけて保存」 ＊注意＊保存先”自分のフォルダの中”，ファイル名”link.html”，半角英数小文字で入力する． ・リンク “index”，“profile”，“link”のページ間を自由に行き来できるようにする． <body></body>の間に<a href=”リンク先の URL”>タイトル</a>と記述する． “index”のページを例に挙げる． ＊example＊ <html> <title> タイトル名 例えば，「原研究室へようこそ」などのタイトルを記入する． </title> <body>
<a href=”profile.html”>profile へ</a> <br>
<a href=”link.html”>link へ</a> <br> </body> </html> 同様に，“profile”，“link”のページにも記述する． ・写真撮影 ホームページに掲載する写真を，ディジタルカメラを用い撮影を行う．撮影後，自分のフォルダ内に 転送する．
・ホームページの加工 無数にあるタグを駆使して自分のホームページの加工を行う．加工が終わったら上書き保存し，ブラ ウザの更新をクリックして確認する．タグについてまとめてある Web サイトを参考にしてもよい．ま た実際に存在する Web ページのソースを参考してもよい．本実験では時間の都合上フレームは使用し ないこととする． ＊注意＊ 第2 週目で持ってくるもの 第2 週目の実験終了後にデータを持ち帰るため，各自 USB メモリなどの記憶媒体を持ってくること． 3.2 第 2 週目の実験 ・JavaScript の学習（以下のページの「２．まず始めてみよう」からチャレンジ） http://www.tohoho-web.com/js/index.htm ・ホームページの加工 ・レポートまとめ 各自作成したデータはUSB メモリに保存して持って帰ること．
4. 主なタグ一覧
基本的なタグを挙げておく． 4.1 フォントタグ フォントサイズを指定 <font size=”数字”>文字列</font> フォントサイズを一括指定 <basefont size=”数字”>文字列</font> フォントカラーを指定 <font color=”カラーコード”>文字列</font> フォントカラーを指定<font size=”数字” color=”カラーコード”>文字列</font> フォントスタイルを指定 <font face=”フォントスタイル”>文字列</font> 太字 <b>文字列</b> 斜体 <i>文字列</i> 強い強調（太文字） <strong>文字列</strong> 強い強調（斜体） <em>文字列</em> 下線
<u>文字列</u> 取り消し線 <s>文字列</s> 等幅フォント <tt>文字列</tt> 流れ文字 <marquee>文字列</marquee> 横幅指定 <marquee width=”数字”>文字列</marquee> 右へ，”left”で左へ
<marquee direction=” right”>文字列</marquee> 左右
<marquee behavior=”alternate”>文字列</marquee> 背景色付き
<marquee bgcolor=”カラーコード”>文字列</marquee> スピード指定
<marquee scrollamount=”数字” truespeed>文字列</marquee> 上へ，”down”で下へ
<marquee direction=”up” height=”50”>文字列</marquee> 上下
<marquee behavior=”alternate” direction=”up” height=”50”>文字列</marquee> 回数指定
<marquee loop=”数字”>文字列</marquee> オンマウスで静止
<marquee onmouseover=this.stop() onmouseout=this.start()>文字列</marquee> ２つ組み合わせ
<marquee behavior="alternate" direction="up" height="数字"> <marquee direction="right">文字列</marquee></marquee> 4.2 レイアウトタグ 改行 <br> 回りこみ解除改行 <br clear=”位置”> 改行禁止 <nobr>文字列</nobr> 横線 <hr> 横線の長さ指定
<hr width=”数字”> 右，中央，左寄せを指定 <hr algin=”位置”> 影を無くす <hr noshade> 横線の太さを指定 <hr size=”数字”> 横線の色を指定 <hr color=”カラーコード”> 4.3 リンク・画像タグ リンク <a href=”URL”></a> オンマウスで説明文
<a href=”URL” title=”文字列”> </a> 画像を貼る
<img src=”ファイル名”> 画像でリンク
<a href=”URL”><img src=”ファイル名”> </a>
この他にもタグはたくさんあるのでレポートの完成度を上げるなら検索してみる.
5. 検討
（１）BMP 形式での 1 画素の記録形式を説明せよ． （２）解像度と階調を関連させて説明せよ． （３）相互リンクについて説明せよ． 【レポート作成の注意点】 目次 ＊注意＊ ページ番号有り １．目的 自分なりにまとめる ２．理論 発表内容を中心にまとめる ３．実験方法 自分なりにまとめる ４．実験結果 ・index ・profile ・link ・自分が作ったその他のページ それぞれにおいて「ページの画面の画像」 「HTML 文書」 「使われているタグの説明」 を書くこと ５．検討 ６．考察 ７．レポートを読む人が読みやすくなる工夫をし、工夫した点を箇条書きでまとめること ８．実験の目的がどの程度達成できたか１００点満点で自己評価し、点数を記載すること 点数をつけた理由も記載すること ９．感想 注 ・画面の画像は「Prt Sc」等を使ってサイズ調整すること ・このレポートは「ページの画面の画像」「HTML 文書」も含めＰＣで作成すること。 ・もし期間内に提出できない場合は必ず実験担当の先生に期間内に連絡すること ・目次の前に次ページのチェックリスト（コピー可）を載せ、レポートに必須の項目が揃っていること を提出前に必ず確認する。 ⇒必要項目が１つでもない場合は返却する。
【提出用チェックリスト】 レポートが完成したら以下のチェックリストを使ってレポートが再提出にならないかチェックし（各 項目に○をし）、チェックリストをレポートの最初に入れて下さい。チェックリストが全て満たされてい ないと再提出になります。 ※本チェックリストをコピーして使ってもかまいません。 ・レポートに必要となる項目に対するチェックリスト 本チェックリストは最初のページにありますか？ 目次はありますか？ 実験の目的はまとめてありますか？ 理論として、各ワード（インターネット、Web サーバー、ブラウザ、ホームページ、HTML、 タグ等）に関してまとめてありますか？ 各週（第1 週、第 2 週）の実験方法（内容）はまとめてありますか？ 実験結果として自分が作ったHP（ホームページ）をまとめてありますか？ 実験結果として自分が作った HP（ホームページ）のソースコード（HTML）をまとめてあり ますか？ 検討課題はまとめてありますか？ 実験の考察はまとめてありますか？ レポートを読む人が読みやすくなる工夫を箇条書きでまとめてありますか？ 実験の目的がどの程度達成できたか100 点満点で自己評価し、点数を記載してありますか？ 実験の考察はまとめてありますか？ ・フォーマットに関するチェックリスト ページ番号はありますか？ 図/表には通し番号やタイトルがついていますか？ レポート全体に関して読む人が読みやすくなるよう心掛けて作成しましたか？ ホッチキスで確実に留めてありますか？レポートが厚くなった場合は図書館、ISMC、学科事 務、新1 号館-908 号室（ゼミ室）等に大きなホッチキスがあるので利用して下さい。
