第５回 HTML入門 その２
Webデザイン基礎B/2020｜造形短期大学部｜2020.10.12｜遠隔
情報共有シート｜特設サイト
AGENDA
- 以下名簿が表示されます。ご自身の「出席欄」にチェックをつけて下さい。
情報共有シート - 前回に引き続き、HTMLのコーディングについて学びます。
- 概要説明の後、演習項目を用意しています。
- 更新後の SampleSiteは、GitHubへのアップして確認して下さい。
以下、LIVE動画をご覧下さい。記事に沿って解説しています。
記録動画の公開は14日（水）までとします。早めの確認をお願いします。
本日のメニュー
はじめに
- 今回は、HTMLの書き方の２回目です。各種メディアの埋め込み、画像の掲載、表、フォームといった要素の掲載記法について学習します。
- 第１節から第４節までは説明を聞いていただくだけです。第５節に、その動作確認のための演習を用意しています。
1. 各種メディアの埋め込み掲載
1.1. VIDEO｜ビデオデータの掲載
videoタグは、ビデオデータを直接ページに掲載するためのものです。
<video src="video/sample1.ogv" width="480" autoplay></video>
- src：ソース
- autoplay：自動再生
- width：表示幅
- controls：コントロールバー
- 使えるデータ形式：WebM、Ogg、MP4
1.2. AUDIO｜音声データの掲載
audioタグは、オーディオデータを直接ページに掲載するためのものです。
<audio src="audio/sample1.wav" autoplay></audio>
- src：ソース
- autoplay：自動再生
- loop：ループ再生
- controls：コントロールバー
- 使えるデータ形式 WAV、MP3、MIDI（演奏情報）
1.3. EMBED｜メディアの埋め込み
embedタグは、メディア一般の埋め込みです。AUDIOやVIDEOで再生できないメディアを再生できる場合があります。
<embed src="Sample.swf" width="200" height="100" autoplay>
- src：ソース
- width：表示幅
1.4. IFRAME｜インラインフレーム
iframeタグは、HTML文書内に別のHTML文書を配置するためのものです。
<iframe src="https://www.example.com/index.html" width="480"></iframe>
- src：ソース
- width：表示幅
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" >
- src：情報ソースのURL（ 使える形式 JPEG、GIF、PNG、SVG）
- alt：代換え文字
- width：表示幅（単位は pixcel）
2.2. 画像ファイルの管理
画像データは、サイトのディレクトリ（フォルダ）の中に、images という名称のディレクトリを作って、その中に置くのが一般的です。サイトのディレクトリ構造は、以下のようになります。
- index.html
- style.css
- images ← フォルダです。
- sample01.jpg
- sample02.jpg
2.3. 補足説明
- 画像の形式について
- JPEG：微妙な色彩の変化を多く含む写真等の圧縮に最適
- GIF：256色以下、写真よりはイラスト等で圧縮効率が大きい
アニメーションのデータを扱える点でも重要な形式 ＞ GIFアニメ - PNG：背景を透明化したロゴ・マークの作成等に最適
Photoshop等では背景レイヤーを削除（透明化）した状態のものをPNGで保存すればOK
- サイズの目安について
現在のWebサイト(PC)の幅は、1280px 〜 1920 px あたりです。小さな表示でいい場合は、320px幅〜640px幅、拡大して見てもらいたい場合でも1280px幅あれば十分です。1920px幅（FullHD）はWebページ掲載用としては若干贅沢です（通信負荷が大きくなります）
- 以下のページをあわせてご確認下さい（重要）
WebDesign/Images
3. 表の作成
3.1. TABLE｜表組み
- tableタグは全体、trタグは行、tdタグは列。組み合わせて使用します。
<table> <tr> <td>データ</td> <td>データ</td> </tr> </table>
3.2. 補足説明
- セルの横方向の結合は、以下のように colspan を追記します。
表の１行目では、横３つのセルが１つのセルに結合表示されます。<table border="1" rules="all"> <tr> <td colspan="3">一覧</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> </table>
- セルの縦方向の結合は、同様に以下のような書き方になります。
表の１列目では、縦３つのセルが１つに結合表示されます。<table border="1" rules="all"> <tr> <td rowspan="3">一覧</td> <td>A</td> </tr> <tr> <td>B</td> </tr> <tr> <td>C</td> </tr> </table>
- HTML5では、border属性の指定は空文字か「1」の指定だけが使用を認められています。見た目に関することは原則としてCSSで記述するのが現在の標準的な考え方なので、ここでは罫線その他の表現には触れないのが賢明です。
4. フォームの掲載
4.1. FORM｜フォーム
formタグは、入力・送信フォームを作成する際に使用します。
<form action="（送信時の動作：今回はここは空白でOK）">
<input type="text" name="NAME"></div>
<input type="submit" value="送信">
</form>
4.2.フォーム部品
フォーム部品には、以下のタグがあります。
- INPUT｜入力
- type= の部分を変更するだけで、様々な入力受付が可能です。
- type="text" 1行テキストボックス
- type="password" パスワード入力ボックス
- type="checkbox" チェックボックス（複数選択可能）
- type="radio" ラジオボタン（排他的選択）
- type="file" 送信ファイルの選択（[参照]ボタンが表示されます）
- type="submit" 送信ボタン
- type="reset" リセットボタン
- type="button" 汎用ボタン
- type="image" 画像のボタン
- SELECT&OPTION｜選択。以下のように使います。
<select name="color"> <option value="R">RED</option> <option value="G">GREEN</option> <option value="B">BLUE</option> </select>
- TEXTAREA｜テキストエリア。以下のように使います
<textarea name="message" rows="4" cols="40">ここに記入してください。 </textarea>
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. 演習
はじめに
- iframe、img、table、form。これらのタグの機能を確認するサンプルを作成します。それぞれ、5.1. 〜 5.4. の４つの演習として HTMLの編集を体験してください。動作確認ができればよいので、記載の方法は自由です。
- 本日の演習の完成イメージは、以下のようになります。事前にご覧下さい。
https://koichi-inoue.github.io/SampleSite02/
HTMLファイルの編集準備
- 本日の４つの演習は、それぞれ、独立した article ブロックの中に記載します。
- section ブロックの中に、前回と同様の article ブロックを ４つ、新規に作成してください。結果、以下のような構造になります。
<section> <article> ・・P、H* の事例・・ </article> ← 前回確認済み <article> ・・LIST の事例・・ </article> ← 前回確認済み <article> ・・IFRAME の事例・・ </article> ← 今回の演習 5.1. <article> ・・IMG の事例・・ </article> ← 今回の演習 5.2. <article> ・・TABLE の事例・・ </article> ← 今回の演習 5.3. <article> ・・FORM の事例・・ </article> ← 今回の演習 5.4. </section> <aside> ・・A の事例 ← 前回確認済み </aside>
以下、本日のタグの機能を試すための４つの演習です。
5.1. 演習１｜YouTube動画の埋め込み
- 新規の article ブロック内に、YouTubeで動画の埋め込みコードを取得の上、以下の形式で、コードを挿入してみて下さい。
<h1>Sample Video</h1> <iframe width="560" height="315" src="https://ww・・ 略 </iframe>
- YouTube動画の埋め込みは自由です（許諾は不要です）。
5.2. 演習２｜画像の掲載
- article ブロック内に、以下のコードを挿入してみて下さい。。
<h1>Sample Image</h1> <img src="images/sample.jpg" width="480" alt="サンプル"> ： ： 複数のサンプルを掲載して下さい。
- サンプル画像は、自身で作成・撮影したものか、あるいはPD（パブリックドメイン）のものをお使いください
＞ Wikimedia Commons
5.3. 演習３｜表組み
- article ブロック内に、以下のコードを挿入してみて下さい。
<h1>表組み</h1> <table border="1" rules="all"> <thead> <tr> <th>商品</th> <th>価格</th> </tr> </thead> <tfoot> <tr> <td>合計金額</td> <td>250円</td> </tr> </tfoot> <tbody> <tr> <td>鉛筆</td> <td>150円</td> </tr> <tr> <td>消しゴム</td> <td>100円</td> </tr> </tbody> </table>
5.4. 演習４｜Google検索フォームの掲載
- article ブロック内に、以下のコードを挿入してみて下さい。
<h1>Sample Form</h1> <form action="http://www.google.com/search" method="get"> <label >Google: </label> <input type="search" name="q"> </form>
- label部分は、適宜あなたのオリジナルに書き換えて下さい。
6. 本日の成果をGitHub にアップロード
- 本日手を加えた最新の データ（index.html と画像を含んだ imagesフォルダ）を 前回作成した リポジトリ（SampleSite ）にアップロード更新して下さい。
- 手順は以下です。
- GitHub で あなたの SampleSite リポジトリを開いてください。
- [File Upload] をクリックして下さい。
- 本日更新した、index.html、imagesフォルダ をドラッグ＆ドロップします
- [Commit Canges] をクリックすると、新しいファイルでリポジトリが更新されます。
- リポジトリが以下のように構成されていれば正解です。
- 特設サイトの以下の部分から、サイトにアクセスして本日更新したWebサイトが閲覧できればOKです。
==GitHub Pages== * https://JaneSmith.github.io/SampleSite <br>
第５回目は、以上をもって終了とします。お疲れ様でした。
第６回から、CSSについて学びます。