メールマガジン「初心者のためのホームページ作り」でお伝えした内容を、「復習」の意味で掲載しています。テキストのみのマガジンと違って、実際のサンプルや画像を交えて解説していますので、理解が深まると思います。なお、疑問点や分からない点がありましたら、遠慮なく メールにてご質問ください。
メールマガジン「初心者のためのホームページ作り」でお伝えした内容を、「復習」の意味で掲載しています。テキストのみのマガジンと違って、実際のサンプルや画像を交えて解説していますので、理解が深まると思います。なお、疑問点や分からない点がありましたら、遠慮なく メールにてご質問ください。
毎週金曜日配信 What's New 2003/6/6 〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓 今週のコンテンツ ■ HTML講座 第４回 HTMLの作り方とヘッダの役割 ■ XHTML講座 第16回 動画の扱い
HTML文書の作成とは、普通の文書（テキスト）を、その文書の構成要素にしたがって、一連のマークアップ作業を行うものです。
HTMLを作成するためのオーサリング・ソフトウェア（作成支援ソフト）を利用するのであれば、面倒なマークアップ作業は必要ありません。しかし、オーサソフトが吐き出す HTMLが、仕様書に照らし合わせて妥当性があるものなのかは、保証の限りではありません。大体が滅茶苦茶な文法によって作られていることは、ユーザ自身が経験していることでしょう。
当講座は、基本的に自分自身でマークアップを行うことを主体としています。そのための必要となるツールを揃える必要があります。
ツール（ソフトウェア）といっても、高価なものは必要ありません。その気になればそのほとんどが無料で手に入るものです。以下に最初に用意しなければならないツールを列挙しました。
| テキストエディタ | 比較的容量の小さい軽量で、普通のテキストを作成するソフト | |
| Windowsではメモ帳、MacではSimpleText、Linuxなら viなどで十分 | ||
| 高機能で軽量なフリーソフトがあるので入手する方法もあります | ||
 | ||
WindowsXP におけるテキストエディタ「メモ帳」 | ||
| ||
| FTPソフト | 作成したHTML文書やその他のリソースを Webサーバに転送するソフト | |
| これも、フリーで優れたソフトがあるので、ネットで探して入手します | ||
| ||
| Webサーバ | 自分で用意するのは大変、最初はプロバイダの Web領域を利用します | |
| また広告が表示されるが、無償で提供しているサーバもあります | ||
この他に、Webブラウザも必要ですが、これはほとんどのパソコンに標準でインストールしてあるので十分でしょう。できれば、他の銘柄の Webブラウザをインストールしておきしましょう。
なお、基本的にはインターネットにアクセスする環境を持つことは当然でしょう。個人がローカル（自分のパソコン）だけで楽しむのならその必要はありませんが・・
文書の中で示されるある特定の意味を持つ要素ごとに「タグ」を用いてマークアップします。例えば見出しなら、<h1>見出し</h1>、段落ならば、<p>段落</p> というように、そのほとんどで開始と終了のタグで囲みます。
このように開始と終了タグを対としたものを コンテナタグと呼び、終了タグを必要としないタグを、エンプティタグと呼びます。
HTMLを構成する１つにヘッダという構造があります。ヘッダとは、自分自身の文書情報を Webサーバ、あるいはユーザエージェントに伝えるための重要な役割があります。
また、自分自身の文書から見た他の文書との位置関係を示したり、外部文書を読み込んだりします。
ヘッダで記述される要素で、titileタグが唯一、ブラウザに表示されるものであり、文書の題名を記述します。この titleタグは、必ずヘッダ部に記述しなければなりません。
ヘッダ部で記述するタグと属性（タグの役割情報）は以下のとおりです。
| 要素名 | 属性 | 機能 |
|---|---|---|
| meta | http-equiv | メタデータのプロパティを name属性の替わりに指定 |
| content | Content-type で示されたプロパティの値 | |
| name | メタデータのプロパティ名を Webサーバに送信する | |
| link | rel | この文書から見た他の文書との位置関係を示す |
| rev | href属性から見たこの文書の位置関係を示す | |
| href | 関連する文書の URLを指定する | |
| hreflang | リンク先の言語コードを指定する | |
| charset | 他の文書を読み込む際の文字コードを指定する | |
| title | なし | 文書のタイトルを指定する（必須） |
この中で「必須」とされるのは、文書のMIMEタイプと記述された文字コードを明示し、文書のタイトルを必ず記述しなければなりません。
形式的な記述法 <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_Jis"> <title>初心者のためのホームページ作り</title> </head>
ヘッダには最低、上記のように記述しなければなりません。なお、言語コードおよび、文字コードについては次回詳しく説明します。
昨今のブロードバンド環境の普及が進むにつれ、Web上で動画コンテンツを配信するサイトが増えてきています。
動画を再生するためには、ユーザ側でそのプラグインツールを用意していないと見ることができません。また、ある種のプラグインをインストールしていても、それに適応した動画でなければ、やはり見ることができません。
動画は、実は大変容量が大きくオリジナルの30秒程度の動画コンテンツですら、80MB（メガバイト）くらいが必要になります。それを Web上で公開するのは現実的ではありません。
Webで公開するために、動画を圧縮し小さな容量にする必要があり、そのエンコード方式によってプラグインが必要になるわけです。
| エンコード | 特徴 |
|---|---|
| QiuckTime | Apple社によるエンコード方式。圧縮率に優れ、ストリーミングに対応している
エンコーダーは有償ですが、Mac版 iMoveソフトでも作成可能 Mac版のほかに、Windows版もサポート （拡張子は .mov） |
| RealMedia | 動画エンコーダーとしては老舗だが、度重なるアップデートが多いので人気薄
エンコーダは有償だが、多くのプロットフォームをサポートしている MPEG、MP3などもサポートしている （拡張子は .rm) |
| WindowsMedia | Microsoft社のエンコーダーで、Windows版として無償で提供している
画質もよく、多くの形式にも対応 （拡張子は .wmv） |
HTMLで動画再生でよく用いられているのが、embed要素です。HTML規格外ですが、Netscape Navigator、MSIEでサポートされていますが、他のブラウザでは実現されていません。
HTML規格外 embed使った動画の再生 （MPEG-1方式 2,819KB） 未対応ブラウザがあります。また、ナローバンド（ダイヤルアップ、ISDN）では、非常に重いので遠慮してください。
HTML4.01Strict、および XHTML1.1 では、汎用的に利用できる object要素を強く推奨されていますが、残念ながらサポートしている Webブラウザが少ないのが現状です。
object要素の記述 <object data="sample.mpg" type="video/mpeg" width="320" height="240"> サンプル動画 </object>
以下に、object要素によってサンプル動画を再生します。サンプルなので、非常につまらない動画であることをご留意ください。
object要素を使った動画の再生 （MPEG-1方式 2,819KB 注：すぐに再生します。重いです。）
XHTML1.1で確実に動画を際精査する方法は、至極簡単なアンカー要素を用いて、ユーザに選択させる方法があります。いきなりページを訪れたら動画が始まってしまうのは、ユーザビリティ、アクセシビリティの観点からお勧めできるものではありません。
アンカーを利用した動画の再生 <a href="sample.mpg">MPEG動画の再生</a>
アンカーを利用した動画再生 （MPEG方式のほかに、WindwsMedia、QuickTime方式も掲載しました。）
Copyright（C） 2002-2003 ばんばん banban@scollabo.com