LogoMark.png

Webデザイン実習/2020/0519

第3回 HTMLのサンプル制作(続)

Webデザイン実習/20202020.05.19


第3回目の展開と要件

本日の完成イメージ

以下、JohnSmith さん(架空の受講生)の3回目の授業終了イメージです。ダミーデータのため、リンクは無効になっていますが、みなさんの完成ページでは、それぞれのリンク先で、HTMLのサンプルが確認できるようになっている必要があります。



では以下、まずは目次を見て、本日の作業の全体像を把握してから、順に説明を読み進めて下さい。



第3回 目次


はじめに

前回の後半同様に、記法のサンプルを制作して、それをリポジトリに蓄積していくという作業を行います。

作業手順の確認

今回も同様です。

サンプル作成上の留意事項

1. IMGタグ

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>


補足説明

2. 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" autoplay></audio>
    <h2>Sample Video</h2>
    <video src="video/sample.mp4" width="480" autoplay></video>
  </body>
</html>


補足説明

3. 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マップ等の埋め込みも試してみて下さい。




4. 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で制御するので、使わないようにしましょう

5. 本日の成果の確認

本日の演習が終了すると、学科サイトの氏名/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 を含むサンプル制作を行います。定刻になったら、授業のページを開いて、4回目の授業部分を見て作業を進めて下さい。



PAGES

GUIDE

DATA

Last-modified: 2020-05-22 (金) 17:45:03