プロジェクト実習
IS2前期（第1回）
使用教室：5-102，8-203，8-303，8-305，4-205 担当教員：熊谷和志，早川吉弘 資料サイト：熊谷研究室 授業資料 （http://ckuma.html.xdomain.jp/class/）１．授業を進める上で • 授業概要 １学年の「コンピュータリテラシ」，「総合工学基礎実験」を踏まえ，数 週間から数ヶ月の中長期にわたり，学生数人がグループを作り，高 専において重要なものづくりの基礎となるプロジェクト型の実習を行 う．この実習を通じて，「社会人基礎力」と呼ばれる「職場や地域社 会の中で多様な人々とともに仕事を行っていく上で必要な基礎的な 能力」について理解し，養うことを目標にする．前期は各コース毎に 異なるテーマのプロジェクトに取り組む． • 学習上の留意点 1学年の「コンピュータリテラシ」および「総合工学基礎実験」などで 学んだ報告書のまとめ方や発表の仕方をより深めて，担当教員へ の進捗報告，グループメンバー間の知識共有などグループ作業に 活かすことが必要である．また，グループで課題を遂行するので，積 極的に討論，作業に加わることが必要である． 2
• 実習テーマ Webページの作成 • 実習形式 5-6人程度のグループでWebページの題材や構成を企画し，これを 作成する． • 到達目標 プロジェクト遂行のためのPDCA（計画-実行-確認-評価）サイクルを 理解する．グループ内で協調的して作業を進めることができる．学 習成果およびプロジェクトの評価を報告書にまとめ，分かりやすいプ レゼンテーションができる． • 評価方法 課題レポートおよび発表会により総合的に評価を行う．
３．スケジュール 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とは
(p.02)ハイパー テキスト マークアップ言語
(
H
yper
T
ext
M
arkup
L
anguage）
Webページ記述用に開発された言語 ハイパーリンク機能 文書のある部分から次の文書へ次々とたどれるテキストベース の文書 ……… ……… ……… ………. ……… ……… ……… ………. ……… ……… ……… ……….
•
要素とタグ
(p.05) 6開始タグ
と
終了タグ
で挟まれたものを
要素
という
<title>
文書のタイトル
</title>
<a href=“http://www.ank.co.jp”> アンクのページ</a> 要素名 属性 値 開始タグ 終了タグ ◆HTMLの基本書式•
HTMLの基本的な構成
Web辞典シリーズについて 翔泳社が出版するWeb辞典シリーズは 次のようになっています． ----2007年4月現在 •HTMLタグ辞典 •スタイルシート辞典 •JavaScript辞典 •ホームページ辞典 •Perl/CGI辞典 •ちび辞典 見出し 本文 リスト <h1>Web辞典シリーズについて</h1> <p> 翔泳社が出版するWeb辞典シリーズは 次のようになっています． ----2007年4月現在 </p> <ul> <li>HTMLタグ辞典</li> <li>スタイルシート辞典</li> <li>JavaScript辞典</li> <li>ホームページ辞典</li> <li>Perl/CGI辞典</li><li>ちび辞典</li> </ul>
8
<!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> </body> </html> HTMLの文書であることを宣言 文書のタイトルや情報を記述 実際に記述される内容 •
HTMLの木構造
(p.11) ◆HTMLの基本構造•
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 body h1 P Ul li HTML文書では，各要素の間で 木構造（ツリー構造）になってい る． 開始タグと終了タグの位置に気 をつける必要がある．•
URI (Uniform Resource Identifiers)
(p.18)インターネット上の情報資源の所在を示す．
URL (Uniform Resource Locator)とも．
http://www.ank.co.jp/product/index.html
スキーム サーバ パス
10
•
絶対パスと相対パス
(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フォルダ popsフォルダ a.html main.html b.html c.html
•
文書間のリンク
12
任意のテキストや画像にリンクを設定
<a href ="http://www.sendai-nct.ac.jp/"> 仙台高専Webサイトへ</a>
<!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サイトへ HTML ブラウザでの表示 ◆リンクを設定したい (p.176)
•
同一文書内のリンク
同一ページの指定した場所へジャンプする．
<!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>第１回：ガイダンス</li> <li>第２回：企画・設計</li> <li>第３回：Webページの製作</li> <li>第４回：発表</li> </ul> <a href="#top">[先頭に戻る]</a> </body> この文書の先頭 •第１回：ガイダンス •第２回：企画・設計 •第３回：Webページの製作 •第４回：発表 [先頭に戻る] HTML ブラウザでの表示
•
文書にタイトルをつける
(p.60) <title> … </title> •見出しを設定する
(p.80) <h1> … </h1> •段落を設定する
(p.82) <p> … </p> 14 ◆代表的なHTMLタグ h1からh6まであり、h1からh6に従って文字サイズ が小さくなる•
改行する
(p.84) <br> •入力した通りに表示させる
(p.88) <pre> … </pre> •横罫線を表示させる
(p.146) <hr>•
フォントの色を指定する
(p.105) <font color="#ff0000"> … </font> <font color="green"> … </font>•
フォントサイズを指定する
(p.108) <font size="7"> … </font>•
太字・斜体・等幅のフォントを使用する
(p.124) <b> … </b> 太字 <i> … </i> 斜体 <tt> …</tt> 等幅 サイズは1から7まであり、数字が大きくな るに従ってフォントサイズが大きくなる•
背景色を指定する
(p.129)<body bgcolor="#808080"> … </body>
•
ページの文字を指定する
(p.140) <body text="#0000ff"> … </body>•
見出しや段落の位置を指定する
(p.143) <h1 align="center"> … </h1>•
リストを作る
(p.186) <ul> <li>HTMタグ辞典</li> <li>スタイルシート辞典</li> </ul> •番号つきリストを作る
(p.188) <ol> <li>HTMタグ辞典</li> <li>スタイルシート辞典</li> </ol> •HTMLタグ辞典 •スタイルシート辞典 表示 1. HTMLタグ辞典 2. スタイルシート辞典 表示•
画像を表示させる
(p.152)<img src="cat2.gif" alt="猫のイラスト">
•
画像の表示サイズを指定する
(p.154)•
表（テーブル）を作る
(p.202) <table border="2"> <tr><td>１位</td> <td>味覚の京都</td></tr> <tr><td>２位</td> <td>大阪食い倒れ</td></tr> <tr><td>３位</td> <td>北海道詰合せ</td></tr> </table> 1位 味覚の京都 ２位 大阪食い倒れ 3位 北海道詰合せ 表示 枠線の太さ(ピクセル数）•
TeraPad
TeraPadをテキストエディタとして使用することを推奨 ネットもしくは授業資料のサイトからダウンロード
•
TeraPadの設定
① 文字コード：UTF-8，改行コード：LF
•
次のHTMLファイル（enshu1.html)を作成し，Web
ブラウザで閲覧せよ．
最初の演習は，[email protected] にメール添付 <!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>•
