LogoMark.png

Webデザイン/2020/0609

第6回 HTML入門 その2

Webデザイン/2020造形短期大学部|2020.06.09

第6回目の展開と要件



以下、目次を見て演習の全体像を把握してから、順に説明を読み進めて下さい。



本日のメニュー


はじめに

1. 各種メディアの埋め込み掲載

1.1. VIDEO|ビデオデータの掲載

videoタグは、ビデオデータを直接ページに掲載するためのものです。

<video src="video/sample1.ogv" width="480" autoplay></video>

1.2. AUDIO|音声データの掲載

audioタグは、オーディオデータを直接ページに掲載するためのものです。

<audio src="audio/sample1.wav" autoplay></audio>

1.3. EMBED|メディアの埋め込み

embedタグは、メディア一般の埋め込みです。AUDIOやVIDEOで再生できないメディアを再生できる場合があります。

<embed src="Sample.swf" width="200" height="100" autoplay>

1.4. IFRAME|インラインフレーム

iframeタグは、HTML文書内に別のHTML文書を配置するためのものです。

<iframe src="https://www.example.com/index.html" width="480"></iframe>

YouTubeでは、iframeタグによる、動画の埋め込みコードが提供されているので、ページに動画を掲載する場合には、この方法を使いましょう。
以下、YouTube埋め込みコードの例

<iframe width="560" height="315"
  src="https://www.youtube.com/embed/EexXu1UhLMY" frameborder="0"
  allow="accelerometer; autoplay; 
              encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen>
</iframe>

自身のサイトの中に動画ファイルを置くと、自身のサーバーに配信負荷がかかります。よって、動画配信については「動画共有サイトにアップして埋め込む」というのが一般的です。

補足説明

2. 画像の掲載

2.1. IMG|画像の掲載

imgタグは、様々な形式の画像を掲載する際に使用します。

<img src="images/sample.jpg" alt="香椎駅" width="200" height="100" >

2.2. 画像ファイルの管理

画像データは、サイトのディレクトリ(フォルダ)の中に、images という名称のディレクトリを作って、その中に置くのが一般的です。サイトのディレクトリ構造は、以下のようになります。

2.3. 補足説明

3. 表の作成

3.1. TABLE|表組み

3.2. 補足説明

4. フォームの掲載

4.1. FORM|フォーム

formタグは、入力・送信フォームを作成する際に使用します。

<form action="(送信時の動作:今回はここは空白でOK)">
    <input type="text" name="NAME"></div>
    <input type="submit" value="送信">
</form>


4.2.フォーム部品

フォーム部品には、以下のタグがあります。

4.3. 活用事例

以下のフォームは、Google検索を活用するコードで、実際に動きます。

<form action="http://www.google.com/search" method="get">
  <label >Google: </label>
  <input type="search" name="q">
</form>


付記:Googleフォームについて

Googleドライブの「フォーム」を利用すると、自力でフォームをつくる手間を省くことができます。Googleのアカウントがあれば、誰でも自由に使えるので、お試し下さい。以下のようなアンケートが簡単に作れます。

アンケートの結果は、即グラフ化して表示可能、Googleドライブ内のスプレッドシートへもまとめられますので、非常に便利です。
<iframe>形式でページへの埋め込みコードも提供されますので、あなたのHTMLに埋め込むのも簡単です。

5. 演習

はじめに

HTMLファイルの編集準備


以下、本日のタグの機能を試すための4つの演習です。


5.1. 演習1|YouTube動画の埋め込み

5.2. 演習2|画像の掲載

5.3. 演習3|表組み

5.4. 演習4|Google検索フォームの掲載

6. 本日の成果をGitHub にアップロード


第6回目は、以上をもって終了とします。お疲れ様でした。
第7回から、CSSについて学びます。





PAGES

GUIDE

DATA

Last-modified: 2020-06-09 (火) 10:46:50