ネット上の Web サーバの過半を占めるといわれている. 企業内のイントラネットでは Microsoft 社の IIS の人気が高い. 2.3 ブラウザ Web ページを閲覧するためのアプリケーションソフトのことである. インターネットから HTML ファイルや画像ファイル, 音楽ファイルなどをダウ

Size: px

Start display at page:

Download "ネット上の Web サーバの過半を占めるといわれている. 企業内のイントラネットでは Microsoft 社の IIS の人気が高い. 2.3 ブラウザ Web ページを閲覧するためのアプリケーションソフトのことである. インターネットから HTML ファイルや画像ファイル, 音楽ファイルなどをダウ"

しおりままだ
5 years ago
Views:

1 1,2. 情報メディアコミュニケーション (Ver ) 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 で, インター 7.8-1

2 ネット上の 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 が著名である. 本学のホームページを観覧するにはのようなアルファベットの文字列を入力する. これを URL(Uniform Resource Locator) と呼び, インターネット上に存在する場所を指し示す記述方式で, インターネットにおける情報の住所にあたる. 情報の種類やサーバ名, ポート番号, フォルダ名, ファイル名などで構成される.( 読めない単語はちゃんと調べる ) 2.4 ホームページホームページは通常, 複数のページから構成されている. 最初に表示されるページのことをトップページ, それ以外のページのことをサブページと呼ぶ. トップページのファイル名は通常 index.html である. サイトとは, プロバイダが所有するサーバ上に, 自分のホームページ用のフォルダを確保してくれる場所のことである. ただし作業用としてパソコン上に, 作成するホームページ専用のフォルダ ( 仮のサイト ) を作っておくと良い. 2.5 HTML(Hyper Text Markup Language) Web ページを記述するためのマークアップ言語のことである.W3C が作成している規格で, 最新版は HTML 最新版を調べて発表.HTML は文書の論理構造や見栄えなどを記述するために使用される. また, 文書の中に画像や音声, 動画, 他の文書へのハイパーリンクなどを埋め込むこともできる.HTML で記述された文書を閲覧するには通常 Web ブラウザを使用する. しかし,HTML 文書はテキスト文書の一種であるため, テキストエディタで HTML 文書を開き, タグごとテキスト文書として読み書きすることも可能である

3 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 人につき1つ決めて順にホワイトボードを使用して説明する. 各項目は全てレポートにまとめて提出することになるのでしっかり理解すること. フォルダの作成デスクトップ上に自分のフォルダ userwww_html を作成する既に同じ名前のフォルダがある場合は削除して, 新規に作成する index ページの作成スタートプログラムアクセサリメモ帳でメモ帳を開き, メインページである index ページを作成する. 記述については 2.6 タグの example を参照. 記述できたら 7.8-3

4 ファイル名前をつけて保存 * 注意 * 保存先自分のフォルダの中, ファイル名 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> <a href= link.html >link へ </a> </body> </html> 同様に, profile, link のページにも記述する. 写真撮影ホームページに掲載する写真を, ディジタルカメラを用い撮影を行う. 撮影後, 自分のフォルダ内に転送する

5 ホームページの加工無数にあるタグを駆使して自分のホームページの加工を行う. 加工が終わったら上書き保存し, ブラウザの更新をクリックして確認する. タグについてまとめてある Web サイトを参考にしてもよい. また実際に存在する Web ページのソースを参考してもよい. 本実験では時間の都合上フレームは使用しないこととする. * 注意 * 第 2 週目で持ってくるもの第 2 週目の実験終了後にデータを持ち帰るため, 各自 USB メモリなどの記憶媒体を持ってくること. 3.2 第 2 週目の実験 JavaScript の学習 ( 以下のページの 2. まず始めてみようからチャレンジ ) ホームページの加工レポートまとめ各自作成したデータは USB メモリに保存して持って帰ること. 4. 主なタグ一覧基本的なタグを挙げておく. 4.1 フォントタグフォントサイズを指定 文字列 フォントサイズを一括指定 <basefont size= 数字 > 文字列 フォントカラーを指定 文字列 フォントカラーを指定 文字列 フォントスタイルを指定 文字列 太字 文字列 斜体 文字列 強い強調 ( 太文字 ) 文字列 強い強調 ( 斜体 ) 文字列 下線 7.8-5

6 文字列 取り消し線 <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> 2つ組み合わせ <marquee behavior="alternate" direction="up" height=" 数字 "> <marquee direction="right"> 文字列 </marquee></marquee> 4.2 レイアウトタグ改行 回りこみ解除改行 改行禁止 文字列 横線 <hr> 横線の長さ指定 7.8-6

7 <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. 検討 (1)BMP 形式での 1 画素の記録形式を説明せよ. (2) 解像度と階調を関連させて説明せよ. (3) 相互リンクについて説明せよ. レポート作成の注意点目次 * 注意 * ページ番号有り 1. 目的自分なりにまとめる 2. 理論発表内容を中心にまとめる 3. 実験方法自分なりにまとめる 4. 実験結果 index profile link 自分が作ったその他のページそれぞれにおいて 7.8-7

8 ページの画面の画像 HTML 文書使われているタグの説明を書くこと 5. 検討 6. 考察 7. レポートを読む人が読みやすくなる工夫をし工夫した点を箇条書きでまとめること 8. 実験の目的がどの程度達成できたか100 点満点で自己評価し点数を記載すること点数をつけた理由も記載すること 9. 感想注画面の画像は Prt Sc 等を使ってサイズ調整することこのレポートはページの画面の画像 HTML 文書も含めPCで作成することもし期間内に提出できない場合は必ず実験担当の先生に期間内に連絡すること目次の前に次ページのチェックリスト( コピー可 ) を載せレポートに必須の項目が揃っていることを提出前に必ず確認する必要項目が1つでもない場合は返却する 7.8-8

9 提出用チェックリストレポートが完成したら以下のチェックリストを使ってレポートが再提出にならないかチェックし ( 各項目にをし ) チェックリストをレポートの最初に入れて下さいチェックリストが全て満たされていないと再提出になります本チェックリストをコピーして使ってもかまいませんレポートに必要となる項目に対するチェックリスト本チェックリストは最初のページにありますか? 目次はありますか? 実験の目的はまとめてありますか? 理論として各ワード ( インターネット Web サーバーブラウザホームページ HTML タグ等 ) に関してまとめてありますか? 各週 ( 第 1 週第 2 週 ) の実験方法 ( 内容 ) はまとめてありますか? 実験結果として自分が作った HP( ホームページ ) をまとめてありますか? 実験結果として自分が作った HP( ホームページ ) のソースコード (HTML) をまとめてありますか? 検討課題はまとめてありますか? 実験の考察はまとめてありますか? レポートを読む人が読みやすくなる工夫を箇条書きでまとめてありますか? 実験の目的がどの程度達成できたか 100 点満点で自己評価し点数を記載してありますか? 実験の考察はまとめてありますか? フォーマットに関するチェックリストページ番号はありますか? 図 / 表には通し番号やタイトルがついていますか? レポート全体に関して読む人が読みやすくなるよう心掛けて作成しましたか? ホッチキスで確実に留めてありますか? レポートが厚くなった場合は図書館 ISMC 学科事務新 1 号館 -908 号室 ( ゼミ室 ) 等に大きなホッチキスがあるので利用して下さい 7.8-9

(3) 本文を書く実際にページを開いたときに表示される本文を書いてみましょうからの間に書きます <html > <head > <title > 武のホームページ </title > </head > </html > (4) ページを保存するここで一度ページを保存してみましょうテキストエ

(3) 本文を書く実際にページを開いたときに表示される本文を書いてみましょうからの間に書きます <html > <head > <title > 武のホームページ </title > </head > </html > (4) ページを保存するここで一度ページを保存してみましょうテキストエ 1. はじめの準備 (1) フォルダの作成ホームページ作成の基礎これから作るホームページのデータをホームページ用として保存 ( 保管 ) するフォルダを作成しますホームページで使う作成したファイル画像写真音楽などファイルはすべて同じフォルダに保存しますデスクトップやマイドキュメントの中 ( 任意 ) で右クリック新規作成 (N) フォルダ (F) で新しいフォルダができます (