LogoMark.png

Webデザイン演習/2021/0427

第3回 HTML(続)

Webデザイン演習/20212020.04.27

AGENDA


CONTENTS




HTMLサンプルの制作

前回同様にHTMLのサンプルを作成して、相互閲覧可能になるよう、学科サイトにリンク掲載して下さい。

作業手順の確認

サンプル作成上の留意事項(再掲載)




IMG

IMGタグによる画像表示のサンプルを作成します。今回のサンプルでは、index.html に加えて、画像データ xxxxx.jpg とそれを格納するフォルダ images が必要になります。

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTML TAG Sample IMG</title>
  </head>
  <body>
     <h1>Sample Image</h1>
     <img src="images/sample.jpg" width="480" alt="サンプル">
       :
       :     複数のサンプルを掲載して下さい。
  </body>
</html>


補足説明

AUDIO / VIDEO

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTML TAG Sample Audio / Video</title>
  </head>
  <body>
    <h1>MEDIA</h1>
    <h2>Sample Audio</h2>
    <audio src="audio/sample.mp3" controls></audio>
    <h2>Sample Video</h2>
    <video src="video/sample.mp4" width="480" controls></video>
  </body>
</html>


付記:
自身のサイトの中に動画ファイルを置くと、自身のサーバーに配信負荷がかかります。ここでは、videoタグの動作確認のために、サイト内に動画を置く前提でお話していますが、実際には、動画共有サイトにアップしてから iframe で埋め込むのが一般的です。

音声・動画のサンプルについて

基本的には、自身で録音・撮影した素材を利用するのが理想ですが、以下のような素材を利用することも可能です。

ブラウザの対応状況について




IFRAME

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTML TAG Sample IFRAME</title>
  </head>
  <body>
     <h1>インラインフレームの活用事例</h1>
     <iframe src="https://www.example.com/index.html" width="480"></iframe>
  </body>
</html>


補足説明

時間に余裕があれば、Googleマップ等の埋め込みも試してみて下さい。




FORMタグ

index.html →DEMO フォームの表示サンプルです。 

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTML TAG Sample FORM</title>
  </head>
  <body>
    <h1>FORM SAMPLE</h1>
    <form action="" method="">
            NAME : <input type="text" name="name"><br>
            E-mail : <input type="email" name="email" size="40"><br>
            MESSAGE : <br>
            <textarea name="message" rows="4" cols="40">
                ここにメッセージを入力して下さい。
            </textarea>
            <br>
            FILE : <input type="file" name="file"><br>
            CHECK : <input type="checkbox" name="check" value="1">A
                    <input type="checkbox" name="check" value="2">B
                    <input type="checkbox" name="check" value="3">C<br>
            RADIO : <input type="radio" name="radio" value="1">合格
                    <input type="radio" name="radio" value="2">不合格<br>
            DATE : <input type="date" name="date"><br>
            TIME : <input type="time" name="time"><br>
            NUMBER : <input type="number" min="0" max="10" name="num"><br>
            RANGE : <input type="range" min="0" max="100" name="range"><br>
            PASS : <input type="password" name="password" value="******"><br>
            <input type="submit" name="submit" value="送信"><br>
        </form>
        <p>サンプルです。送信しても何も起こりません.</p>
  </body>
</html>


付記

補足説明

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


応用1:action 部分の活用事例

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

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


応用2:Googleフォームについて

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

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



時間に余裕のある方へ

以下のようなタグはシンプルな事例で試すことができます。時間に余裕があればサンプル化してください(html_sample_12 などで一括動作確認)。

以下のような見栄えに関するタグは非推奨です。これらはCSSで制御するので、使わないようにしましょう

本日の成果の確認

本日の演習が終了すると、学科サイトの氏名/WebSample のページは以下のようになるはずです。ご確認ください。

**HTML
 :
-TAG IMG:https : //JohnSmith.github.io/html_sample_08/
-TAG AUDIO/VIDEO:https : //JohnSmith.github.io/html_sample_09/
-TAG IFRAME:https : //JohnSmith.github.io/html_sample_10/
-TAG FORM:https : //JohnSmith.github.io/html_sample_11/
~




以上で、本日の授業は終了です。お疲れさまでした。

第4回 について

次回から CSS を含むサンプル制作を行います。



PAGES

GUIDE

DATA

Last-modified: 2021-04-27 (火) 17:22:19