WWW(World Wide Web) 世界中に張り巡らされたクモの巣という意味 CERN( 欧州合同原子核共同研究機関 ) の研究者が開発したハイパーテキスト形式 ( HTML ) の分散情報システム WWW サーバーのアドレスを指定するのに URL(Uniform Resource Loc

Size: px

Start display at page:

Download "WWW(World Wide Web) 世界中に張り巡らされたクモの巣という意味 CERN( 欧州合同原子核共同研究機関 ) の研究者が開発したハイパーテキスト形式 ( HTML ) の分散情報システム WWW サーバーのアドレスを指定するのに URL(Uniform Resource Loc"

ゆめじいんそん
7 years ago
Views:

1 インターネットの情報技術 HTML入門 Webページが表示される仕組み WWWServer WWWServer ２必要なデータを送信 Client WWWServer １見たいWebページのURLを入力 URLをもとにページを指定してデータ送信を要求３目的のWebページを閲覧 Client

2 WWW(World Wide Web) 世界中に張り巡らされたクモの巣という意味 CERN( 欧州合同原子核共同研究機関 ) の研究者が開発したハイパーテキスト形式 ( HTML ) の分散情報システム WWW サーバーのアドレスを指定するのに URL(Uniform Resource Locators) を使う HTML(HyperText Markup Language) Web ページ (Web ブラウザに表示される画面 ) を記述するための言語 Web 関連の標準化団体 W3C(World Wide Web Consortium) が標準化を進めている < と > ではさんだタグを使って記述する

3 Web ページと HTML の関係 Sample.html <html> <body> Hello World! </body> </html> <html> から </html> までが HTML 形式の文書ですという意味 <body> から </body> までが本文という意味ブラウザで見ると注 :HTTP クライアントの一つ Internet Explorer(IE) や Netscape Navigator などがある Web ページを閲覧する方法 WWW サーバーから受信する方法例 : 単純にファイルとして閲覧する方法例 :C: マイドキュメント index.html

4 URL(Uniform Resource Locators) プロトコル名ドメイン名ホスト名組織名属性国ディレクトリ名ファイル名ドメイン名アカウント名組織名属性国 URLでWebを閲覧する仕組みインターネット上のサーバには IPアドレスという世界でたった１つの固有の番号を割り当てられている WebやメールなどそのサーバへアクセスするにはそのIPアドレスを利用するしかし人間がIPアドレスを覚えるのは難しいためURLを利用している基本的にURLとIPアドレスは１対１ DNS Server ( )

Web ページ作成の基礎 <html> < body > ホームページの本文を書きます </body> </html> 上記を Web ブラウザで見ると文字装飾に関する基本的なタグ見出し <h 見出しレベル (1-6)> 見出し </ h 見出しレベル (1-6) > 例 <h2> 基本的なタグ </h2> フォントサイズの指定 <font size=" サイズ 1-7 "> 文字列

5 Web ページ作成の基礎 <html> < body > ホームページの本文を書きます </body> </html> 上記を Web ブラウザで見ると文字装飾に関する基本的なタグ見出し <h 見出しレベル (1-6)> 見出し </ h 見出しレベル (1-6) > 例 <h2> 基本的なタグ </h2> フォントサイズの指定 文字列 例 文字列 文字色の設定 文字列 例 文字列 複数段落を中央揃え <center> 文字列 </center> 例 <center> 文字列 </center> 段落位置設定 文字列 位置 : left, center, right 例 文字列

6 自分の名前を表示するメモ帳で以下の内容を作成しブラウザで表示するファイル名は mypage.html 保存場所はマイドキュメント右のように見えれば ok です課題 : 文字装飾の練習メモ帳で以下の内容を追加しブラウザで表示する授業で出てきたタグを多用して自己紹介ページを作成して下さい提出方法 : メールに添付して提出右のように見えれば ok です <html> <body> ここはbodyというタグの内側なので本文になりますここにはh2サイズのタグで <h2> 見出し </h2> を書いてみます 学生番号名前 これから頑張ってhtmlを習得しましょう 文字色を 赤文字 にします 太字は 文字列 です 斜体は 文字列 です 特殊文字はなどです </body> </html>

7 画像に関する設定壁紙設定 <body background=" 画像ファイル "> 例 <body background="back1.jpg"> 画像挿入 <img src= " 画像ファイル " > 例 <img src= "image1.jpg"> 文字の回りこみ設定 <img src= " 画像ファイル " align= " 回込指定 " > 例 <img src= "image1.jpg" align="left"> align: left or right HTML で利用できる画像 GIF(Graphics Interchange Format) GIF に使われている圧縮法は 1985 年に米国 Unisys 社が特許を取得特許利用契約を結んでいないソフトウェアで作成した GIF 画像をホームページに掲載している場合そのホームページ運営者が特許利用料を支払わなければならない JPEG (Joint Photograph Experts Group) 多くの色数を必要とする写真などの表現に向いているが平坦なイラストには向かない PNG ライセンスフリーだがブラウザが対応していないと表示できない PNG に対応しているのは Windows 版の Internet Explorer4.0 以上 Mac 版の Internet Explorer5.0 以上 Netscape Navigator4.04 以上

8 GIF(Graphics Interchange Format) 適した画像内容最大 8 ビット (256 色 ) までの色を扱うことのできる圧縮画像形式色数の少ないイラストや単色ベタ塗の多い画像に向いている GIF のファイル圧縮の仕組み赤色や青色など色全てに色番号を決めて管理しているこれをコンピュータで扱う際にはという 2 進数で管理するこのとき 0 が 5 個と 1 が 4 個というデータに置き換えて圧縮する GIF は水平方向 ( 横方向 ) に同じ色のピクセルが連続する箇所を数値に置き換えることで圧縮しているこのため縦ストライプと横ストライプの画像では横ストライプの画像の方がファイル容量が小さくなる JPEG (Joint Photograph Experts Group) JPEG に適した画像内容 JPEG は 24 ビット (1670 万色 ) まで扱うことが出来るこのため多くの色数を必要とする写真などの表現に向いている JPEG のファイル圧縮の仕組み画像を 8 8 ピクセルの正方形ブロックに分割して色の変化が小さい部分を平均化して色データを破棄している圧縮率を上げすぎると 8 8 のブロック単位で画像がモザイク状になる GIF は色データを纏めて圧縮し JPEG は色データを破棄してサイズを小さくしている

9 JPEG 圧縮の原理各ブロックの中は下記のように 8 8 のドットで構成されるブロック内では色を平均して置き換え色の情報量を軽減する元の画像 JPEG で圧縮した例元の画像ファイルサイズ 65.3 KB 画像サイズ横 300 高さ 200 ピクセル圧縮率を上げた例ファイルサイズ 12.6 KB 画像サイズ横 300 高さ 200 ピクセル

10 PNG(Portable Network Graphic) PNG に適した画像内容最大で 280 兆色まで扱うことができる GIF ファイルより 10%~30% 程度ファイルサイズが小さくなる圧縮によってデータが捨てられてしまうことがない可逆圧縮形式を採用している文字化けする仕組み HTMLやメールの情報はという2 進数で送られてくるあ進数で82A0 ( シフトjis) 全角のあ別のコード体系でこれらを置き換えると滅茶苦茶な文字列になる例 : [EUC] あいうえお [ シフト JIS で置き換えると ] ヲィェ全角のあの文字コード : シフト JIS(0x8260), JIS(0x2422), Unicode (0xA4A2) 0x とはそれ以降が 16 進数であることを示す ASCII:7bit (128 種類の文字と数字入出力制御コード ) JIS: 8bit ( 半角文字 ) と 16bit ( 全角文字 ) が混在シフト JIS EUC Unicode: 16bit で定義

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

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