ページ選択　1〜5／6〜10／11〜15

オリエンテーション
　授業をはじめるにあたり、計画、評価方法について説明する。
★次回までの宿題★　　100MB程度以上の空きがあるUSBメモリを準備(忘れた場合は実習環境の設定を自分で実施することになる)。既存のUSBメモリを使ってもよい(買う必要はない)が、内部に他の授業のファイルなどが保存されている場合バックアップをとっておくこと(自宅PCや大学PCの個人フォルダに内容をコピー)。 背景と環境設定
　経営におけるプログラミングの背景や意義を確認し、今後プログラミングを行っていくための環境設定を行う。

• 出席者
  　指示に従い、USBメモリを開いて「webkiso」フォルダを作成。続いて大学PCのデスクトップにある[名城公園キャンパスフォルダ]-[management]-[hayashi]-[thu3]-[material]から「TeraPad.exe」をコピー(キーボードの[Ctrl]+[c])し、USBメモリに作成した「webkiso」フォルダを開いて[Ctrl]+[v]で貼り付け。完了後、貼り付けたTeraPad.exeをダブルクリックして実行しテキストエディタが起動すれば完成。
  
• 出席者以外
  　USBメモリを開いて「webkiso」フォルダを作成。続いて、こちらのリンクをマウスの右ボタンでクリックし、表示されたメニューから「名前を付けて保存」といった項目を選択。途中で警告メッセージが出る場合があるが問題ないので実行する方向で進める。保存先が選べるならUSBメモリに作成した「webkiso」フォルダを選択する(保存先が選べず自動的にダウンロードされる場合はダウンロードフォルダなど各自のパソコンやブラウザの設定を確認し、保存先からダウンロードしたeditor.exeファイルを「webkiso」フォルダに移動する)。USBメモリ内のwebkisoフォルダに保存されたeditor.exeをダブルクリックすると、パスワードが確認されるため指示されたコードを入力。完了すると実行ファイルができるので、これをダブルクリックしてテキストエディタが起動すれば完成。
  
　課題が完了したらこちらより課題完了を報告する。報告内容は、(1)内容の理解度と、(2)課題の難しさ(簡単だったか難しかったか)、(3)反省や感想など。期限は授業翌週の火曜17:00とする。期限遅れは受理しないため、パソコントラブルなどを考慮して早めに登録すること。 ひな形ファイルの作成
　開発環境の設定からひな形ファイルの作成までを行う。今回の課題は以下の通り。すべて実施したら課題完了を報告すること。


HTML5 & CSS3入門 開発環境準備編を参照して、環境設定について理解せよ。
作業フォルダを参照して、環境作業フォルダについて理解せよ。
テキストエディタを参照して、テキストエディタの必要性について理解せよ(前回授業でTerapadを設定したが、できていない人は前回資料を確認して実施すること)。
Terapadの設定を参照して、表示設定と文字コードの設定を実施せよ。
ひな形ファイルを参照して、ひな形ファイルを作成せよ。
完成したひな形ファイルをダブルクリック(またはブラウザにドラッグ＆ドロップ)して、何が表示されるか確認せよ。特にブラウザのタブやタイトルバーのところ(タイトル)と、ページ内容のところを確認し、ひな形ファイルの内容との対応を確認せよ。
便利な操作を参照して、開発作業を効率化するための方法について理解せよ。
ひな形ファイルをよく確かめ、<meta charset="utf-8">となっている行の次の行に、<meta name="author" content="学籍番号・氏名">を追加し、自分の学籍番号と氏名に変更。[Ctrl]＋[s]で上書き保存して、ブラウザを更新し、見た目に変化がないことを確かめよ。
ひな形ファイルを編集し、「ページのコンテンツはこちら」の次の行に学籍番号、次の行に氏名を記入。[Ctrl]＋[s]で上書き保存して、ブラウザを更新し、ブラウザの表示が変わったことを確かめよ。
全て終了したらこちらより、(1)内容の理解度と、(2)課題の難しさ、(3)反省や感想などを含め完了報告をせよ。(授業翌週の火曜17:00まで)。

基本タグからインライン要素の操作
　基本タグの確認からインライン要素の操作方法の確認までを行う。 今回の課題は以下の通り。すべて実施したら課題完了を報告すること。


HTMLとはを参照して、HTMLについて理解せよ。
基本タグを参照して、基本タグやその構造について理解せよ。
作業ファイルを参照して、作業ファイルを作成し、タイトルや本文の文字が変わることを確認せよ。。
2つの要素を参照して、HTMLの要素にインライン要素とブロック要素があることを確認せよ。
インライン要素を参照して、改行や文字装飾のタグの効果を確かめよ。
ren01.htmlファイルを編集し、「赤橙黄緑青藍紫」と入力した上で、fontタグを使ってそれぞれの色を指定せよ。回答例は以下。 <font color="red">赤</font><font color="orange">橙</font><font color="yellow">黄</font><font color="green">緑</font><font color="blue">青</font><font color="navy">藍</font><font color="purple">紫</font>
ren01.htmlファイルを編集し、受講日の日付、学籍番号、氏名を改行を入れて表示し、受講日の日付を小さい文字small、学籍番号を下線で小さい文字small、氏名を太字で下線で青色にせよ。その際、複数のタグの入れ子構造に注意せよ。回答例は以下。 <small>2021年5月3日</small><br> <u><small>99m999</small></u><br> <b><u><font color="blue">愛学太郎</font></u></b><br>
全て終了したらこちらより、(1)内容の理解度と、(2)課題の難しさ、(3)反省や感想などを含め完了報告をせよ。(授業翌週の火曜17:00まで)。

画像とリンク
　インライン要素の続き、画像とリンクの取り扱いについて確認する。 今回の課題は以下の通り。すべて実施したら課題完了を報告すること。


教室(大学)で受講している人は、大学PCのデスクトップにある[名城公園キャンパスフォルダ]-[management]-[hayashi]-[thu3]-[material]から「p01.jpg」をコピー(キーボードの[Ctrl]+[c])し、USBメモリに作成した「webkiso」フォルダを開いて[Ctrl]+[v]で貼り付け。 自宅等大学以外で受講している人は、資料通りに進めて下さい。
画像表示を参照して、画像の表示方法について確認せよ。
作成したren02.htmlファイルを編集し、p01.jpgを3回、同じ形式で並んで表示するようにせよ。回答例は以下。 画像<br> <img src="gazo/p01.jpg" alt="夕暮れの湾" width="150" height="150" border="10"> <img src="gazo/p01.jpg" alt="夕暮れの湾" width="150" height="150" border="10"> <img src="gazo/p01.jpg" alt="夕暮れの湾" width="150" height="150" border="10"><br> 夕方の景色
続けてren02.htmlファイルを編集し、p01.jpgの3回の表示が、改行されて表示されるようにせよ。回答例は以下。 画像<br> <img src="gazo/p01.jpg" alt="夕暮れの湾" width="150" height="150" border="10"><br> <img src="gazo/p01.jpg" alt="夕暮れの湾" width="150" height="150" border="10"><br> <img src="gazo/p01.jpg" alt="夕暮れの湾" width="150" height="150" border="10"><br> 夕方の景色
さらにren02.htmlファイルを編集し、p01.jpgの3回の表示が、150×200、100×133、50×67のサイズで表示されるようにせよ。回答例は以下。 画像<br> <img src="gazo/p01.jpg" alt="夕暮れの湾" width="150" height="200" border="10"><br> <img src="gazo/p01.jpg" alt="夕暮れの湾" width="100" height="133" border="10"><br> <img src="gazo/p01.jpg" alt="夕暮れの湾" width="50" height="67" border="10"><br> 夕方の景色
教室(大学)で受講している人は、大学PCのデスクトップにある[名城公園キャンパスフォルダ]-[management]-[hayashi]-[thu3]-[material]から「p02.jpg」をコピー(キーボードの[Ctrl]+[c])し、USBメモリに作成した「webkiso」フォルダの中の「gazo」フォルダを開いて[Ctrl]+[v]で貼り付け。 自宅等大学以外で受講している人は、資料通りに進めて下さい。
リンクを参照して、リンクの意義や設定方法について確認せよ。
作成したren03.htmlファイルを編集し、リンク切れのエラーを体験するために、「前回の成果」リンクの下に、リンクファイル名を「kakuu.html」、リンクの文字列を「架空のページ」としてリンクを設定し、リンク切れエラー起こることを確認せよ。必要なら改行を行う。回答例は以下。 <a href="kakuu.html">架空のページ</a>
さらにren03.htmlファイルを編集し、愛知学院大学のウェブサイトのURLを調べ、リンク文字列を「愛知学院大学HP」としてリンクを設定せよ。必要なら改行を行う。回答例は以下。 <a href="https://www.agu.ac.jp/">愛知学院大学HP</a>
最後にren03.htmlファイルを編集し、リンクを張った鳥の画像のサイズを100×50に変更し、リンク先をひな形ファイルに変更せよ。回答例は以下。 <a href="hina.html"><img src="gazo/p02.jpg" width="100" height="50"></a><br>
全て終了したらこちらより、(1)内容の理解度と、(2)課題の難しさ、(3)反省や感想などを含め完了報告をせよ。(授業翌週の火曜17:00まで)。

---

ページ選択　1〜5／6〜10／11〜15