ISコースプロジェクト実習前期（第1回　ガイダンス）

Size: px

Start display at page:

Download "ISコースプロジェクト実習前期（第1回　ガイダンス）"

ありかつとべ
5 years ago
Views:

1 プロジェクト実習 IS2 前期 ( 第 1 回 ) 使用教室 :5-102,8-203,8-303,8-305,4-205 担当教員 : 熊谷和志, 早川吉弘資料サイト : 熊谷研究室授業資料 (

2 1. 授業を進める上で授業概要 1 学年のコンピュータリテラシ, 総合工学基礎実験を踏まえ, 数週間から数ヶ月の中長期にわたり, 学生数人がグループを作り, 高専において重要なものづくりの基礎となるプロジェクト型の実習を行う. この実習を通じて, 社会人基礎力と呼ばれる職場や地域社会の中で多様な人々とともに仕事を行っていく上で必要な基礎的な能力について理解し, 養うことを目標にする. 前期は各コース毎に異なるテーマのプロジェクトに取り組む. 学習上の留意点 1 学年のコンピュータリテラシおよび総合工学基礎実験などで学んだ報告書のまとめ方や発表の仕方をより深めて, 担当教員への進捗報告, グループメンバー間の知識共有などグループ作業に活かすことが必要である. また, グループで課題を遂行するので, 積極的に討論, 作業に加わることが必要である. 2

3 2. 実習内容実習テーマ Web ページの作成 3 実習形式 5-6 人程度のグループで Web ページの題材や構成を企画し, これを作成する. 到達目標プロジェクト遂行のための PDCA( 計画 - 実行 - 確認 - 評価 ) サイクルを理解する. グループ内で協調的して作業を進めることができる. 学習成果およびプロジェクトの評価を報告書にまとめ, 分かりやすいプレゼンテーションができる. 評価方法課題レポートおよび発表会により総合的に評価を行う.

4 3. スケジュール 4 H30 プロジェクト実習スケジュール回月日内容提出物使用教室備考 1 4 月 9 日ガイダンス,HTML 実習 1 演習 1( 締切 4/16 昼 ) 月 16 日 HTML 実習 2 演習 5( 締切 4/23 昼 ) 月 23 日 HTML 実習月 30 日祝日振替 4 5 月 7 日 HTML 実習 4 演習 10( 締切 5/14 昼 ) 月 14 日企画設計 1 議事録作成月 21 日企画設計 2 議事録作成 8-303/ 月 28 日前期中間試験 7 6 月 4 日企画設計 3, 発表資料作成議事録作成 8-303/ 月 11 日発表会 ( 構想発表, 質疑 ) 外部設計書 ( 締切 6/18 昼 ) 月 18 日取材実装 1 議事録作成月 25 日取材実装 2 議事録作成月 2 日高専大会休業 11 7 月 9 日取材実装 3, 発表資料作成議事録作成月 17 日発表会 ( 作品披露 ) Web 作品, 発表資料, 報告書, 外部設計書 ( 修正版 )( 締切 7/19) 火曜日 7 月 23 日前期末試験 7 月 30 日 OC 振替 13 8 月 3 日 Webサーバ構築 8-305/4-205 金曜日 14 9 月 19 日組込みシステム学習 ( 予備日 ) 8-305/4-205 水曜日報告書 : 議事録のまとめ, 全員の感想

5 HTML とは 5 HTML とは (p.02) ハイパーテキストマークアップ言語 (Hyper Text Markup Language) Web ページ記述用に開発された言語ハイパーリンク機能文書のある部分から次の文書へ次々とたどれるテキストベースの文書...

6 HTML の基本書式 6 要素とタグ (p.05) 開始タグと終了タグで挟まれたものを要素という <title> 文書のタイトル </title> 値 <a href= > アンクのページ </a> 要素名属性終了タグ開始タグ

----2007 年 4 月現在 </p> HTML タグ辞典スタイルシート辞典 JavaScript 辞典ホームページ辞典 Perl/CGI 辞典ちび辞典リスト本文 <ul>

7 HTML の基本的な構成 7 開始タグ終了タグ Web 辞典シリーズについて翔泳社が出版する Web 辞典シリーズは次のようになっています年 4 月現在見出し <h1>web 辞典シリーズについて </h1> <p> 翔泳社が出版する Web 辞典シリーズは次のようになっています年 4 月現在 </p> HTML タグ辞典スタイルシート辞典 JavaScript 辞典ホームページ辞典 Perl/CGI 辞典ちび辞典リスト本文 <ul> <li>html タグ辞典 </li> <li> スタイルシート辞典 </li> <li>javascript 辞典 </li> <li> ホームページ辞典 </li> <li>perl/cgi 辞典 </li> <li> ちび辞典 </li> </ul>

8 HTML の基本構造 HTML の木構造 (p.11) 8 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transiotional//EN" > <html> HTMLの文書であることを宣言 <head> <meta http-equiv="content-type" content="text/html;charset=shift_jis"> <title> 文書のタイトル </title> </head> 文書のタイトルや情報を記述 <body> <p> ここに本文が書かれています.</p> </body> 実際に記述される内容 </html>

9 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

10 URL とパス 10 URI (Uniform Resource Identifiers) (p.18) インターネット上の情報資源の所在を示す. URL (Uniform Resource Locator) とも. スキームサーバパス

11 絶対パスと相対パス (p.19) 絶対 URL http://www.ank.co.jp/index.html あるファイルの位置を一番もとになる位置から記述相対 URL <a href ="a.html"> a.html</a> <a href = pops/b.

11 11 絶対パスと相対パス (p.19) 絶対 URL あるファイルの位置を一番もとになる位置から記述相対 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

12 リンクを設定したい (p.176) 文書間のリンク 12 任意のテキストや画像にリンクを設定 <a href =" 仙台高専 Web サイトへ </a> HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transiotional//EN" <html> <head> <meta http-equiv="content-type" content="text/html;charset=shift_jis"> <title> 文書のタイトル </title> </head> <body> <p> ここに本文が書かれています.</p> <a href= 仙台高専 Web サイトへ </a> </body> </html> ブラウザでの表示ここに本文が書かれています. 仙台高専 Web サイトへ

13 同一文書内のリンク同一ページの指定した場所へジャンプする. 13 HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transiotional//EN" <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 回 : 発表 [ 先頭に戻る ]

14 代表的な HTML タグ 14 文書にタイトルをつける (p.60) <title> </title> 見出しを設定する (p.80) <h1> </h1> 段落を設定する (p.82) <p> </p> h1 から h6 まであり h1 から h6 に従って文字サイズが小さくなる

15 15 改行する (p.84) <br> 入力した通りに表示させる (p.88) <pre> </pre> 横罫線を表示させる (p.146) <hr>

16 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 17 背景色を指定する (p.129) <body bgcolor="#808080"> </body> ページの文字を指定する (p.140) <body text="#0000ff"> </body> 見出しや段落の位置を指定する (p.143) <h1 align="center"> </h1> <p align="right"> </p>

18 18 リストを作る (p.186) <ul> <li>htm タグ辞典 </li> <li> スタイルシート辞典 </li> </ul> 表示 HTML タグ辞典スタイルシート辞典番号つきリストを作る (p.188) <ol> <li>htm タグ辞典 </li> <li> スタイルシート辞典 </li> </ol> 表示 1. HTML タグ辞典 2. スタイルシート辞典

19 19 画像を表示させる (p.152) <img src="cat2.gif" alt=" 猫のイラスト "> 画像の表示サイズを指定する (p.154) <img src="cat2.gif" width="200" height="200">

20 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 位北海道詰合せ

21 テキストエディタ TeraPad TeraPadをテキストエディタとして使用することを推奨ネットもしくは授業資料のサイトからダウンロード ( インストーラ, 本体のどちらでもよい ) 21

22 22 TeraPad の設定 1 文字コード :UTF-8, 改行コード :LF 2 タブの文字数 :4 程度が見やすい

23 演習 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

24 演習 2 ( 終了時刻になったら中断して次回で ) 文字の大きさ次の Web ページを作成せよ. 24 h1 サイズタイトルは演習 2 文字の大きさ h2 サイズ h3 サイズファイル名は enshu2.html

■新聞記事

■新聞記事情報処理 C (P.1) 情報処理 C ホームページ作成入門テキストエディタ ( メモ帳 TeraPad など ) でHTMLファイルを作成する HTML(Hyper Text Markup Language ) ホームページを記述するための言語のことテキストエディタの起動 (TeraPad の場合 ) [ スタート ]-[ プログラム ]-[ テキストエディタ ]-[TeraPad] をクリック

ISコースプロジェクト実習 前期（第1回 ガイダンス）

ISコースプロジェクト実習前期（第1回　ガイダンス）