インターネットの情報技術 HTML入門

Webページが表示される仕組み
WWWServer

WWWServer２．必要なデータを送信

Client
WWWServer
１．見たいWebページのURLを入力（URLをもとに、ページを指定してデータ送信を要求）

３．目的のWebページを閲覧

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

HTML(HyperText Markup Language)•

Webページ（Webブラウザに表示される画面）を記述するための言語。
• Web関連の標準化団体W3C（World Wide WebConsortium）が標準化を進めている。
• < と >ではさんだタグを使って記述する。

WebページとHTMLの関係
Sample.html<html><body>
Hello World!
</body></html>ブラウザで見ると<html>から</html>までが、「HTML形式の文書です」という意味<body>から</body>までが、本文という意味

注：HTTPクライアントの一つ。
Internet Explorer（IE）やNetscape Navigatorなどがある。

Webページを閲覧する方法• WWWサーバーから受信する方法
例： http://www.cit.nihon-u.ac.jp/~a06007/index.html• 単純にファイルとして閲覧する方法
例：C:¥マイドキュメント¥index.html

URL(Uniform Resource Locators)

プロトコル名

ドメイン名

http://www.cit.nihon-u.ac.jp/folder/index.html
ホスト名

組織名

属性 国

ディレクトリ名

ファイル名

E-mail
ドメイン名
myname@nihon-u.ac.jp
アカウント名

組織名

属性 国

URLでWebを閲覧する仕組み•••

インターネット上のサーバには、IPアドレスという世界でたった１つの固有の番号を割り当てられている。
Webやメールなど、そのサーバへアクセスするには、そのIPアドレスを利用する。
しかし、人間がIPアドレスを覚えるのは難しいためURLを利用している。基本的にURLとIPアドレスは１対１。
DNS Server

http://www.nihon-u.ac.jp/index.html
http://012.12.180.210/index.html

www.nihon-u.ac.jp(012.12.180.210)

Webページ作成の基礎<html>< body >ホームページの本文を書きます。
</body></html>

上記をWebブラウザで見ると文字装飾に関する基本的なタグ• 見出し<h見出しレベル(1-6)>見出し</ h見出しレベル(1-6) >– 例 <h2>基本的なタグ</h2>• フォントサイズの指定<font size="サイズ1-7 ">文字列</font>– 例 <font size=" 3 ">文字列</font>• 文字色の設定<font color="色">文字列</font>– 例 <font color=" red ">文字列</font>• 複数段落を中央揃え<center>文字列</center>– 例 <center>文字列</center>• 段落位置設定<p align=”位置()”>文字列</p>– 位置： left, center, right– 例 <p align"right">文字列</font>自分の名前を表示する•••

メモ帳で、以下の内容を作成しブラウザで表示する。
ファイル名は mypage.html
保存場所は マイドキュメント

右のように見えればokです。

課題：文字装飾の練習•メモ帳で、以下の内容を追加しブラウザで表示する。
– 授業で出てきたタグを多用して、自己紹介ページを作成して下さい。
– 提出方法： メールに添付して、提出右のように見えればokです。
<html><body>
ここはbodyというタグの内側なので、本文になります。
ここにはh2サイズのタグで<h2>見出し</h2>を書いてみます<br>
学生番号 名前 <br>
これから、頑張ってhtmlを習得しましょう<br><br>
文字色を<font color="red">赤文字</font>にします。<br>太字は<b>文字列</b>です。<br>
斜体は<i>文字列</i>です。<br>
特殊文字は &diams;&hearts;&spades;&clubs;などです。<br></body></html>画像に関する設定• 壁紙設定 <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以上

GIF(Graphics Interchange Format）• 適した画像内容– 最大8ビット（256色）までの色を扱うことのできる圧縮画像形式。
– 色数の少ないイラストや単色ベタ塗の多い画像に向いている。

• GIFのファイル圧縮の仕組み– 赤色や青色など、色全てに色番号を決めて管理している。
– これをコンピュータで扱う際には｢000001111・・｣という２進数で管理する。
– このとき｢0が5個と1が4個｣というデータに置き換えて圧縮する。

GIFは水平方向（横方向）に同じ色のピクセルが連続する箇所を、数値に置き換えることで圧縮している。このため、縦ストライプと横ストライプの画像では横ストライプの画像の方がファイル容量が小さくなる。

JPEG (Joint Photograph Experts Group）• JPEGに適した画像内容– JPEGは24ビット（1670万色）まで扱うことが出来る。 このため、多くの色数を必要とする写真などの表現に向いている。

• JPEGのファイル圧縮の仕組み– 画像を8×8ピクセルの正方形ブロックに分割して色の変化が小さい部分を平均化して色データを破棄している。
– 圧縮率を上げすぎると、 8×8のブロック単位で画像がモザイク状になる。
GIFは色データを纏めて圧縮し、JPEGは色データを破棄してサイズを小さくしている。

JPEG圧縮の原理
各ブロックの中は下記のように８×８のドットで構成される。
ブロック内では色を平均して置き換え、色の情報量を軽減する

元の画像

JPEGで圧縮した例• 元の画像
ファイルサイズ 65.3 KB
画像サイズ
横300×高さ200 ピクセル

• 圧縮率を上げた例
ファイルサイズ 12.6 KB
画像サイズ
横300×高さ200 ピクセルPNG（Portable Network Graphic）• PNGに適した画像内容– 最大で280兆色まで扱うことができる。GIFファイルより10％～30％程度ファイルサイズが小さくなる。圧縮によってデータが捨てられてしまうことがない可逆圧縮形式を採用している。

文字化けする仕組み
HTMLやメールの情報は100000101010000010・・・という２進数で送られてくる。

あ1000001010100000⇒16進数で８２Ａ０⇒(シフトjis) 全角のあ
別のコード体系でこれらを置き換えると、滅茶苦茶な文字列になる
例：[EUC]あいうえお ⇒ [シフトJISで置き換えると] ､｢､､､ｦ､ｨ､ｪ

全角の“あ”の文字コード： シフトJIS（0x8260）, JIS（0x2422）, Unicode（0xA4A2）
0xとは、それ以降が16進数であることを示す

ASCII：7bit （128種類の文字と数字、入出力制御コード）
JIS： 8bit （半角文字）と 16bit （全角文字）が混在
シフトJIS、 EUC 、Unicode： 16bitで定義