第13回 授業ページ

今回の授業の内容
Step1. 動画のリンクを貼りつける。
Step2. 動画をページに埋め込む。

●Step1. 動画のリンクを貼りつける。

css技術を用いて、ページ上でYoutube等の動画を表示することが出来ます。
動画を埋め込む前に、まずはおさらいとして動画のリンクを貼りつけてみましょう。

１．「CSS教育_202○」フォルダーの中で右クリックする
２．「新規作成（X)」→「テキスト ドキュメント」をクリック
３．テキストのファイル名（新しいテキスト ドキュメント.txt）をクリック
４．「lesson13.html」を入力して「Enter」キーを押す。
５．作成したテキストを右クリックして、「プログラムから開く(H)」→「メモ帳」をクリックする
６．下の内容をテキストにコピーして貼り付ける。
<html lang="ja">
<head>
<meta http-equiv="content-type" charset="UTF-8">
</head>
<body>

<a href="動画のアドレス" target="_blank">この文章が表示されます。</a>

</body>
</html>

７．Youtubeにアクセスする。
８．好きな動画にアクセスする。
９．動画のアドレスをコピーする。



１０．ページの「動画のアドレス」を削除して、コピーしたアドレスを貼りつける。
１１．テキストを閉じる。
１２．「保存する(S)」をクリック
１３．作成したテキストをダブルクリックしてブラウザで表示する。


※aタグに「target="_blank"」と書くと、リンクをクリックした際にページが別タブで開きます。

<a href="動画のアドレス" target="_blank">この文章が表示されます。</a>


●Step2. 動画をページに埋め込む。

続いて、動画をページ上で表示してみましょう。

１．Youtubeにアクセスする。
２．好きな動画にアクセスする。
３．動画の右下の「共有」をクリックする。



４．「埋め込む」をクリックする。



５．表示されたタグをコピーする。



６．「lesson13.html」を右クリックして、「プログラムから開く(H)」→「メモ帳」をクリックする
７．コピーしたタグを<body>～</body>のどこかに貼り付ける。
８．テキストを閉じる。
９．「保存する(S)」をクリック
１０．作成したテキストをダブルクリックしてブラウザで表示する。


前のページに戻る