このコースではここまで多くのテキストを見てきましたが、ただテキストだけのウェブでは面白くありません。 ウェブが生き生きとして、面白いコンテンツがどんどんあふれるようにする方法を見ていきましょう! このモジュールでは、HTMLをどのように用いれば、あなたのウェブページにマルチメディアを含めることができるかについて学びます。 また、画像を挿入するためのさまざまな方法や、動画・音声、さらには他のウェブページ全体を挿入する方法についても触れます。

前提条件

このモジュールを開始する前に、HTML入門で述べられてきた、HTMLの基本についてのある程度の知識が求められます。 このモジュール(や似たようなもの)を一通り終えていない場合、まずそちらを一通り終えてから戻ってきてください!

メモ: 自分自身のファイルを作れないコンピューター/タブレット/その他デバイスで作業している場合、JSBinThimble のようなオンラインコーティングプログラムにてコードの実例(の大半)を試すことができます。

ガイド

このモジュールには下記の記事が含まれていて、そこではマルチメディアをウェブページに埋め込むための基礎を学びます。

HTMLの画像
考慮すべき他のタイプのマルチメディアもありますが、単純な画像をウェブページに埋め込むために使用される、慎ましい <img> 要素から始めるのが理にかなっています。 この記事では、基本的な使い方を含め、 <figure> を使ったキャプションによる注釈付け、CSS背景画像との関連の仕方など、画像をより深く使用する方法を見ていきます。
動画と音声のコンテンツ
次に、HTML5の <video> 要素と <audio> 要素を使用して、動画や音声をページに埋め込む方法を見ていきます。 それには、基本的な使い方を含め、さまざまなファイルフォーマットへのアクセスをさまざまなブラウザーに提供したり、キャプションや字幕の追加、古いブラウザーへの代替の追加などが含まれています。
<object> から <iframe> へ — その他の埋め込み技術
この時点では、<iframe><embed><object> 要素のような幅広い種類のコンテンツをウェブページに埋め込むことができる要素をいくつか見ていきたいと考えています。 <iframe> は他のウェブページを埋め込むためのもので、他の2つは PDF、SVG、さらには Flash を埋め込むことができます — 出口にある技術ですが、まだ半定期的に見かけるでしょう。
ウェブにベクターグラフィックスを追加する
ベクターグラフィックスは、特定の状況で非常に便利です。 PNG や JPG のような通常のフォーマットとは異なり、ズームインしてもゆがんだりピクセル化したりしません — 縮尺を変えても滑らかな状態を保つことができます。 この記事では、ベクターグラフィックスの概要と、ポピュラーな SVG フォーマットをウェブページに含める方法を紹介します。
レスポンシブ画像
携帯電話からデスクトップコンピュータに至るまで、ウェブを閲覧できるようになったさまざまな種類のデバイスで、現代のウェブ世界を習得するために不可欠な概念は、レスポンシブデザインです。 これは、さまざまな画面サイズ、解像度などに合わせて機能を自動的に変更できるウェブページの作成を指します。 これについては、後ほどCSSモジュールで詳しく見ていく予定ですが、ここでは、HTMLで <picture> 要素を含むレスポンシブ画像を作成するためのツールを見ていきます。

評価試験

上記のガイドで説明されているHTMLの基本について、以下の評価試験を行います。

Mozillaのスプラッシュページ
今回の評価試験では、このモジュールの記事で説明したいくつかの技術の知識をテストするために、Mozillaのすべてついてのファンキーなスプラッシュページに、いくつかの画像と動画を追加してもらいます!

関連情報

画像の上にヒットマップを追加する
イメージマップは、画像のさまざまな部分を別の場所にリンクするためのメカニズムを提供します(あなたがクリックしたそれぞれの国についての詳細情報にリンクしている地図を考えてみてください)。 この手法は時には便利なことがあります。
ウェブリテラシーの基礎 2(英語)
優れたMozillaの基礎コースで、マルチメディアと埋め込みモジュールで説明されているスキルのいくつかを調べてテストします。 ウェブページの作成、アクセシビリティの設計、リソースの共有、オンラインメディアの使用、オープンな作業(コンテンツは自由に利用可能で、他の人が共有できることを意味します)の基礎を深く理解してください。