この記事は翻訳作業中です。

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

前提条件

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

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

ガイド

このモジュールには下記の記事が含まれていて、そこではウェブページにマルチメディアを組み込むすべての基本に連れていってくれます。

Images in HTML
考慮すべき他のタイプのマルチメディアもありますが、簡単なイメージをWebページに埋め込むために使用される、慎ましい <img> 要素から始めるのが理にかなっています。この記事では、基本的な使い方を含め、 <figure>を使ったキャプションによる注釈付け、CSSの背景画像との関連の仕方など、より深く使っていきます。
Video and audio content
Next, we'll look at how to use the HTML5 <video> and <audio> elements, to embed video and audio on our pages; including basics, providing access to different file formats to different browsers, adding captions and subtitles, and how to add fallbacks for older browsers.
From <object> to <iframe> — other embedding technologies
At this point we'd like to take somewhat of a sideways step, looking at a couple of elements that allow you to embed a wide variety of content types into your webpages: the <iframe><embed> and <object> elements. <iframe>s are for embedding other web pages, and the other two allow you to embed PDFs, SVG, and even Flash — a technology on its way out, but which you may still see semi-regularly.
Adding vector graphics to the Web
Vector graphics can be very useful in certain situations. Unlike regular formats like PNG/JPG, they don't distort/pixelate when zoomed in — they can remain smooth when scaled. This article introduces you to what vector graphics are, and how to include the popular SVG format in web pages.
Responsive images
With so many different device types now able to browse the Web — from mobile phones to desktop computers — an essential concept to master in the modern web world is responsive design. This refers to the creation of webpages that can automatically change their features to suit different screen sizes, resolutions, etc. This will be looked at in much more detail in a CSS module later on, but for now we'll look at the tools HTML has available to create responsive images, including the <picture> element.

評価試験

The following assessments will test your understanding of the HTML basics covered in the guides above:

Mozilla splash page
In this assessment, we'll test your knowledge of some of the techniques discussed in this module's articles, getting you to add some images and video to a funky splash page all about Mozilla!

関連情報

Add a hitmap on top of an image
Image maps provide a mechanism to make different parts of an image link to different places (think of a map, linking through to further information about each different country you click on.) This technique can sometimes be useful.
Web literacy basics 2

An excellent Mozilla foundation course that explores and tests some of the skills talked about in the Multimedia and embedding module. Dive deeper into the basics of composing webpages, designing for accessibility, sharing resources, using online media, and working open (meaning that your content is freely available, and shareable by others).

ドキュメントのタグと貢献者

このページの貢献者: miminari, Uemmra3, hamasaki
最終更新者: miminari,