テーブル（表）は、様々なデータをリストとして表示する際に頻繁に利用される。
かつてはテーブルによってレイアウトしていたケースもあったが、最近はスタイルシートによってデザインされる例が多くなっているので、この授業では、純粋に表としての機能の紹介にとどめる。

知的所有権は創作部やビジネスのための権利を総称した名称。
特許権、登録商標、著作権、意匠などすべて含まれる。
著作権
小説、絵画、写真、音楽、プログラムなどの創作物を作成したものが自動的に得られる権利。
著作権には、
「財産権としての著作権」
「著作者人格権」
がある。
通常問題になるのは、財産権としての著作権。
web上での著作権問題は年々変化しているので、著作権関連のニュースなどには目を通しておきたい。
近年、著作権のある楽曲を演奏して動画サイトに投稿することは許可されるケースが増えてきた。
これはYouTubeなどがその管理団体に利用料を払っているので可能になっている。
参考サイト
Webでの著作権侵害/弁護士の法律相談
音楽の著作権に関する動き
Tokyo IT News 2008年4月7日放送
JASRAC
JRC

サウンドや動画の埋め込みは、タグさえ覚えれば簡単にできる。しかし、BGMとしてサウンドを使う場合にはユーザーにとって必要かどうかを考える必要がある。
サウンド
embedタグを使用する。この例では、WAVE形式のデータを使っている（環境によって再生できない場合がある）。

<embed src="sample.wav" autostart="true" loop="3" hidden="false" width="180" height="40" />

sample.wav

フォームは、メールの送信などに頻繁に使われ、サーバ側のCGIスクリプトやPHPなどのスクリプトに値を送信している。
ここでは、一般的なメールフォームの構造を解説する。

パーミッション（ファイルへのアクセス権）の設定
サーバ上のファイルには、「読み出し」「書き込み」「実行」の3種類の権限があり、それぞれどの操作が可能かを「オーナー（自分）」「グループ」「その他」の3つのグループについて設定できる。初期状態では自分以外のユーザは何も権限がないので、そこに「読み出し」権限を与えてやれば、ファイルを公開できる。
書き込みの権限を与えてしまうと、勝手にファイルが書き換えられたり、巨大なファイルや悪質なプログラムをアップロードされたりしてしまうので、パーミッションの設定は慎重に行うこと。

画面右側のサーバ側のファイルリストの中から設定を変更したいファイルにカーソルをあわせ、右クリックをしてメニューを開き「Properties」を選ぶと次のようなウィンドウが開く。ここで、各グループごとの権限を変更する。
Ｒ：読み出し
Ｗ：書き込み
Ｘ：実行
である。通常、html文書や画像などのパーミッションは、下の「Octal」表示で644となる。

ページを表示しようとしたら「Forbidden」というメッセージが出てきた場合
これは、サーバの自身のディレクトリが、データを読める設定になっていなかったことが原因となっている。
自身のディレクトリの上の「home」ディレクトリを表示する。

自分のディレクトリを表示（例：user08_000）し、上記の通りにパーミッションを「755」に変更する。

サーバとクライアント
webサイトを作る際に用いられるのがhtml文書（と画像など）で、そのhtml文書を読み込み、表示するのがブラウザである。ブラウザは、ネットワーク上にあるhtml文書だけでなく、ブラウザの起動しているPC内（ローカル環境という）のハードディスクにあるhtml文書も同じように表示できる。

クライアント環境にあるhtml文書は自分しか見ることができないが、FTPやSCPという方法によってサーバーへ文書をアップロードすれば、インターネット上に公開されたウェブサイトとなる。
注；
クライアントからサーバへデータを転送することをアップロード(upload)
サーバからクライアントへデータを転送することをダウンロード(download)
という。
サーバへのアップロード
コンピュータ内でつくっていたHTMLファイルや画像ファイルなどをサーバに転送し、さらに適切なアクセス権の設定を行ってやれば、インターネット上に公開されたウェブサイトになる。
一般的にファイルの転送は「FTP」と呼ばれるサーバへの接続方法を用いる。メディアアート表現学科のサーバの場合は「SCP」というよりセキュリティの高い方法によって接続する。SCPのソフトとして、「WinSCP」というフリーウェアを用いる。
WinSCPを最初に立ち上げると下のような画面が開くので、学科のサーバの設定を登録する。

ホスト名：sandbox.media.t-kougei.ac.jp
ユーザ名：user08_000 (000の部分は自分の学籍番号の下3桁)
パスワード：授業時に説明
さらにポート番号を「20022」へ変更する（この設定はメディアアート表現学科のサーバのみで、一般的には必要ない）。
「ログイン」を選んで、サーバへの接続を開始する。サーバを信頼するかどうか、をたずねるダイアログがでるが、問題ないので「Yes」を選ぶ。

これで、認証がうまくいけばサーバに接続できる。左半分がローカルのファイルで、右半分がサーバのファイルを表示している。ローカルからサーバへ、ドラッグ＆ドロップすればファイルをアップロードできる。このサーバでは、ウェブサイトは「public_html」フォルダにアップロードする。

サイトで表示
次に、以下のURLにアクセスする。
http://sandbox.media.t-kougei.ac.jp/~user08_000/
（000の部分は自分の学籍番号の下3桁）
「Forbidden」というメッセージが出てきた人は、パーミッションのページを参照すること。
index.htmlファイルの必要性
サーバにデータをアップロードした時に気をつけななければいけないのは、必ず「index.html」を入れることだ。
それぞれのディレクトリを読み込んだ時に、先ず最初にindex.htmlが探される。それがないと、すべてのファイルを表示してしまう。がindex.htmlが存在すれば先ずそのファイルが表示されるため、そのディレクトリの他のファイルは隠蔽される。
不正なアクセスを防ぐためにも、必ずindex.htmlファイルを入れること。

xhtml文書のパーツひとつひとつは「要素」と呼ばれ、それぞれ開始タグ（< 要素名>）と終了タグ（）によってその内容が囲まれる。
要素の中に要素を配置することもある。たとえばhtmlという要素（とに囲まれた領域）にheadとbodyという要素が入っている。
この場合、開始タグと終了タグが完全に入れ子構造になっていなければならない。
xhtml文書の大きな構造は次のようになる。

ビットマップ画像は以下の画像のように、四角いピクセルの集まりでできている。

ここで生じているギザギザを目立たなくするため、背景との中間色を境界に配置してなめらかに見せる技術がアンチエイリアスである。Webのみにとどまらず、ディスプレイ上で表示される画像の多くで使われている技術である。
背景色との中間色になるので、画像を作る際にあらかじめ背景色が分かっている必要があることもある。たとえば背景が白であることを想定して作られたアンチエイリアスを持った画像は、黒の背景の上に配置すると、画像との境界線に灰色の線が入ることになる。
Illustrator, Photoshopによるウェブ用画像の書き出し
Illustrator, Photoshopともにウェブ用に圧縮して画像を書き出す機能があり、圧縮の程度を調節しながら保存できる。「ファイル」メニューより「Web用に保存…」を選ぶ。
GIF

カラー
256色まで表現できるが、色数を下げることによってわずかながらファイルのサイズを小さくすることができる。
ディザ
ディザとは、ある2色をタイル状に交互に配置することによって、遠目から見た際にその中間調を表現する方法である。マットな面に適用されるとざらざらした感じになるので、たいていの場合は「ディザなし」でよい。グラデーションが多くを占めるような画像に対しては有効に働く。
透明部分
書き出す元画像の透明部分を、透明として書き出すかどうかを指定する。透明にしない場合は、「マット」より、何色に変換して書き出すかを指定する。また透明にする場合も、なに色に向かってアンチエイリアスをかけて書き出すか、を「マット」で指定する。
インターレース
これを指定すると、ブラウザで画像を読み込んだ際に、上からだんだんと読み込まれるのではなく、まず全体が粗い画像で表示され、徐々にきれいな画像に変わっていく表示になる。
Webスナップ
GIF画像に割り当てている色を、ウェブセーフカラーに近づける。
JPEG

画質
JPEGでは、どこまで圧縮するかを指定できる。画質を上げると、ファイルサイズが大きくなる。圧縮率を優先すると、画面にブロック状のノイズが目立ち始める。
プログレッシブ
このオプションを指定すると、GIFの「インターレース」のように画像を読み込む際に粗い全体像から表示され、だんだんときめ細かな画像になる。
ぼかし
JPEGではなだらかに色が変化する画像の圧縮に向いている。「ぼかし」オプションは Photoshopの「ぼかし」フィルタと同様の効果がかかり、全体をぼかすことによって圧縮率を上げることができる。
マット
元画像の透明部分を、何色に変換して書き出すかを指定する。JPEGは透明部分を持つことができないので、必ず何かしらの色に変換しなければならない。

a要素のhref属性の属性値を mailto:メールアドレス で指定すると、メールソフトが起動する。

<a href="mailto:abc@def.jp">メールを送る</a>

ウェブサーバの多くで使われているUNIXというシステムでは、WindowsやMacにおけるフォルダのことをディレクトリと呼ぶ。
まず始めに、以下のようなディレクトリのxhtmlページを作るとする。ここでは実際にページを作りながら考えていく。
images.zip
imagesフォルダの中

pagesフォルダの中

同じディレクトリの画像とのリンク
図のように、index.htmlと同じフォルダに、画像ファイル「google.gif」があり、これをindex.htmlに配置するときは、次のようにhtmlを書く。

<img src="google.gif"/>

別のディレクトリの画像とのリンク
次に、top.htmlと同じフォルダに「images」というフォルダがあり、この中に入っている画像ファイル「icon1.gif」をtop.htmlに配置することを考える。ここでは、フォルダを表す「/」という記号を使ってURL を記述する。

<img src="images/icon1.gif"/>

ひとつ上のディレクトリのファイルを指定する
次に、フォルダ「pages」にある「page1.html」から、ひとつ上の階層にあたるフォルダにある「google.gif」を読み込むことを考える。この場合は、一つ上の階層を表す特殊な記号「..」を使って

<img src="../google.gif"/>

と記述する。
ひとつ上のディレクトリの「images」フォルダの中のファイルを指定する
次に、フォルダ「pages」にある「page1.html」から、ひとつ上のディレクトリの「images」フォルダにある「art1.jpg」を読み込むことを考える。この場合は、以下のように記述する。

<img src="../images/art1.jpg" />

ディレクトリでファイル構成を整理する
このようにフォルダ（サーバ上ではディレクトリ）をまたいだファイルの読み込みやリンクが可能なので、複雑な構成を持つサイトを作る際には、内容のまとまりごとやファイルの種類などによってフォルダに整理しておくと、制作やメンテナンスの際にやりやすくなる。
以下がそのディレクトリ構造を図式化したもの。