プロジェクト実習 IS2 前期 ( 第 1 回 ) 使用教室 :5-102,8-203,8-303,8-305,4-205 担当教員 : 熊谷和志, 早川吉弘 資料サイト : 熊谷研究室授業資料 (http://ckuma.html.xdomain.jp/class/)
1. 授業を進める上で 授業概要 1 学年の コンピュータリテラシ, 総合工学基礎実験 を踏まえ, 数週間から数ヶ月の中長期にわたり, 学生数人がグループを作り, 高専において重要なものづくりの基礎となるプロジェクト型の実習を行う. この実習を通じて, 社会人基礎力 と呼ばれる 職場や地域社会の中で多様な人々とともに仕事を行っていく上で必要な基礎的な能力 について理解し, 養うことを目標にする. 前期は各コース毎に異なるテーマのプロジェクトに取り組む. 学習上の留意点 1 学年の コンピュータリテラシ および 総合工学基礎実験 などで学んだ報告書のまとめ方や発表の仕方をより深めて, 担当教員への進捗報告, グループメンバー間の知識共有などグループ作業に活かすことが必要である. また, グループで課題を遂行するので, 積極的に討論, 作業に加わることが必要である. 2
2. 実習内容 実習テーマ Web ページの作成 3 実習形式 5-6 人程度のグループで Web ページの題材や構成を企画し, これを作成する. 到達目標プロジェクト遂行のための PDCA( 計画 - 実行 - 確認 - 評価 ) サイクルを理解する. グループ内で協調的して作業を進めることができる. 学習成果およびプロジェクトの評価を報告書にまとめ, 分かりやすいプレゼンテーションができる. 評価方法課題レポートおよび発表会により総合的に評価を行う.
3. スケジュール 4 H30 プロジェクト実習スケジュール 回 月日 内容 提出物 使用教室 備考 1 4 月 9 日ガイダンス,HTML 実習 1 演習 1( 締切 4/16 昼 ) 5-102 2 4 月 16 日 HTML 実習 2 演習 5( 締切 4/23 昼 ) 5-102 3 4 月 23 日 HTML 実習 3 5-102 4 月 30 日 祝日振替 4 5 月 7 日 HTML 実習 4 演習 10( 締切 5/14 昼 ) 5-102 5 5 月 14 日企画 設計 1 議事録作成 8-303 6 5 月 21 日企画 設計 2 議事録作成 8-303/5-102 5 月 28 日 前期中間試験 7 6 月 4 日企画 設計 3, 発表資料作成 議事録作成 8-303/5-102 8 6 月 11 日発表会 ( 構想発表, 質疑 ) 外部設計書 ( 締切 6/18 昼 ) 5-102 9 6 月 18 日取材 実装 1 議事録作成 5-102 10 6 月 25 日取材 実装 2 議事録作成 5-102 7 月 2 日 高専大会休業 11 7 月 9 日取材 実装 3, 発表資料作成 議事録作成 5-102 12 7 月 17 日発表会 ( 作品披露 ) Web 作品, 発表資料, 報告書, 外部設計書 ( 修正版 )( 締切 7/19) 5-102 火曜日 7 月 23 日 前期末試験 7 月 30 日 OC 振替 13 8 月 3 日 Webサーバ構築 8-305/4-205 金曜日 14 9 月 19 日組込みシステム学習 ( 予備日 ) 8-305/4-205 水曜日 報告書 : 議事録のまとめ, 全員の感想
HTML とは 5 HTML とは (p.02) ハイパーテキストマークアップ言語 (Hyper Text Markup Language) Web ページ記述用に開発された言語 ハイパーリンク機能 文書のある部分から次の文書へ次々とたどれるテキストベースの文書...
HTML の基本書式 6 要素とタグ (p.05) 開始タグと終了タグで挟まれたものを要素という <title> 文書のタイトル </title> 値 <a href= http://www.ank.co.jp > アンクのページ </a> 要素名 属性 終了タグ 開始タグ
HTML の基本的な構成 7 開始タグ 終了タグ Web 辞典シリーズについて 翔泳社が出版する Web 辞典シリーズは次のようになっています. ----2007 年 4 月現在 見出し <h1>web 辞典シリーズについて </h1> <p> 翔泳社が出版する Web 辞典シリーズは次のようになっています. ----2007 年 4 月現在 </p> HTML タグ辞典 スタイルシート辞典 JavaScript 辞典 ホームページ辞典 Perl/CGI 辞典 ちび辞典 リスト 本文 <ul> <li>html タグ辞典 </li> <li> スタイルシート辞典 </li> <li>javascript 辞典 </li> <li> ホームページ辞典 </li> <li>perl/cgi 辞典 </li> <li> ちび辞典 </li> </ul>
HTML の基本構造 HTML の木構造 (p.11) 8 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transiotional//EN" http://www.w3.org/tr/html4/loose.dtd > <html> HTMLの文書であることを宣言 <head> <meta http-equiv="content-type" content="text/html;charset=shift_jis"> <title> 文書のタイトル </title> </head> 文書のタイトルや情報を記述 <body> <p> ここに本文が書かれています.</p> </body> 実際に記述される内容 </html>
9 HTML の木構造 <html> <head> <title> 文書のタイトル </title> </head> <body> <h1>web 辞典シリーズについて </h1> <p> 翔泳社が出版する Web 辞典シリーズ </p> <ul> <li>html タグ辞典 </li> <li> スタイルシート辞典 </li> <li>javascript 辞典 </li> </ul> </body> </html> HTML 文書では, 各要素の間で木構造 ( ツリー構造 ) になっている. 開始タグと終了タグの位置に気をつける必要がある. head title html body h1 P Ul li
URL とパス 10 URI (Uniform Resource Identifiers) (p.18) インターネット上の情報資源の所在を示す. URL (Uniform Resource Locator) とも. http://www.ank.co.jp/product/index.html スキームサーバパス
11 絶対パスと相対パス (p.19) 絶対 URL http://www.ank.co.jp/index.html あるファイルの位置を一番もとになる位置から記述相対 URL <a href ="a.html"> a.html</a> <a href = pops/b.html"> b.html</a> <a href =../c.html"> c.html</a> main.html からの相対 URL でリンクフォルダごと移動する場合, 相対 URL の方が便利 music フォルダ a.html main.html pops フォルダ b.html c.html
リンクを設定したい (p.176) 文書間のリンク 12 任意のテキストや画像にリンクを設定 <a href ="http://www.sendai-nct.ac.jp/"> 仙台高専 Web サイトへ </a> HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transiotional//EN" http://www.w3.org/tr/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html;charset=shift_jis"> <title> 文書のタイトル </title> </head> <body> <p> ここに本文が書かれています.</p> <a href=http://www.sendai-nct.ac.jp/> 仙台高専 Web サイトへ </a> </body> </html> ブラウザでの表示 ここに本文が書かれています. 仙台高専 Web サイトへ
同一文書内のリンク 同一ページの指定した場所へジャンプする. 13 HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transiotional//EN" http://www.w3.org/tr/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html;charset=shift_jis"> <title> 文書のタイトル </title> </head> <body> <a name="top"> この文書の先頭 </a> <ul> <li> 第 1 回 : ガイダンス </li> <li> 第 2 回 : 企画 設計 </li> <li> 第 3 回 :Web ページの製作 </li> <li> 第 4 回 : 発表 </li> </ul> <a href="#top">[ 先頭に戻る ]</a> </body> </html> ブラウザでの表示 この文書の先頭 第 1 回 : ガイダンス 第 2 回 : 企画 設計 第 3 回 :Web ページの製作 第 4 回 : 発表 [ 先頭に戻る ]
代表的な HTML タグ 14 文書にタイトルをつける (p.60) <title> </title> 見出しを設定する (p.80) <h1> </h1> 段落を設定する (p.82) <p> </p> h1 から h6 まであり h1 から h6 に従って文字サイズが小さくなる
15 改行する (p.84) <br> 入力した通りに表示させる (p.88) <pre> </pre> 横罫線を表示させる (p.146) <hr>
16 フォントの色を指定する (p.105) <font color="#ff0000"> </font> <font color="green"> </font> フォントサイズを指定する (p.108) <font size="7"> </font> サイズは 1 から 7 まであり 数字が大きくなるに従ってフォントサイズが大きくなる 太字 斜体 等幅のフォントを使用する (p.124) <b> </b> 太字 <i> </i> 斜体 <tt> </tt> 等幅
17 背景色を指定する (p.129) <body bgcolor="#808080"> </body> ページの文字を指定する (p.140) <body text="#0000ff"> </body> 見出しや段落の位置を指定する (p.143) <h1 align="center"> </h1> <p align="right"> </p>
18 リストを作る (p.186) <ul> <li>htm タグ辞典 </li> <li> スタイルシート辞典 </li> </ul> 表示 HTML タグ辞典 スタイルシート辞典 番号つきリストを作る (p.188) <ol> <li>htm タグ辞典 </li> <li> スタイルシート辞典 </li> </ol> 表示 1. HTML タグ辞典 2. スタイルシート辞典
19 画像を表示させる (p.152) <img src="cat2.gif" alt=" 猫のイラスト "> 画像の表示サイズを指定する (p.154) <img src="cat2.gif" width="200" height="200">
20 表 ( テーブル ) を作る (p.202) <table border="2"> <tr><td>1 位 </td> <td> 味覚の京都 </td></tr> <tr><td>2 位 </td> <td> 大阪食い倒れ </td></tr> <tr><td>3 位 </td> <td> 北海道詰合せ </td></tr> </table> 枠線の太さ ( ピクセル数 ) 表示 1 位 味覚の京都 2 位 大阪食い倒れ 3 位 北海道詰合せ
テキストエディタ TeraPad TeraPadをテキストエディタとして使用することを推奨ネットもしくは授業資料のサイトからダウンロード ( インストーラ, 本体のどちらでもよい ) 21
22 TeraPad の設定 1 文字コード :UTF-8, 改行コード :LF 2 タブの文字数 :4 程度が見やすい
演習 1 次の HTML ファイル (enshu1.html) を作成し,Web ブラウザで閲覧せよ. <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>html5 演習 </title> </head> <body> <h1> 初めての HTML5</h1> <p>html は, 最新の HTML です.<br> 今後,Web ページの主流になることは間違いないでしょう. </p> </body> </html> 最初の演習は,ckuma@sendai-nct.ac.jp にメール添付で提出すること. 23
演習 2 ( 終了時刻になったら中断して次回で ) 文字の大きさ 次の Web ページを作成せよ. 24 h1 サイズ タイトルは 演習 2 文字の大きさ h2 サイズ h3 サイズ ファイル名は enshu2.html