Web プログラミング 1 HTML+CSS (6) (2 章 ) 2013/5/29( 水 ) 演習室の PC のハードディスクには演習で作成したデータは保管できません各 PC のネットワーク接続ショートカットからメディア情報センターのサーバーにアクセスしてください (Z ドライブとして使用

(1)

Web

Webプログラミング

プログラミング

プログラミング1

1

HTML+CSS (6)(2章) 2013/5/29(水) 1/21 湘南工科大学講義資料Webプログラミング1(2013) 阿倍

講義で使うフォルダ

2/21 湘南工科大学講義資料Webプログラミング1(2013) 阿倍

演習室のPCのハードディスクには演習で作成したデータは

保管できません。

各PCの「ネットワーク接続」ショートカットからメディア情報セ

ンターのサーバーにアクセスしてください(Zドライブとして使

用できます)。

演習名演習名演習名演習名使用するフォルダ使用するフォルダ使用するフォルダ使用するフォルダ演習1 Z:¥Webプログラミング1¥20130529¥演習1¥ 演習2 Z:¥Webプログラミング1¥20130529¥演習2¥ 演習3 Z:¥Webプログラミング1¥20130529¥演習3¥ 演習4 Z:¥Webプログラミング1¥20130529¥演習4¥ 演習5 Z:¥Webプログラミング1¥20130529¥演習5¥ 演習6 Z:¥Webプログラミング1¥20130529¥演習6¥

(

(演習

演習

演習1)

1)

1)表を作成する

表を作成する

HTMLファイル「shuuhen.html」を開き、以下の通り変更して保存してください前略 <p class=“honbun”>湘南工科大学は1963年に創立した工学部のみの単科大学で、機械工学科、電気電子工学科、情報工学科、コンピュータ応用学科、コンピュータデザイン学科、人間環境学科の6学科から構成されます。</p> <table> <tr><th>機械工学科</th><td>機械の開発・設計、生産・組立、管理まで多彩な視点でモノづくりの技術を学ぶ</td></tr> <tr><th>電気電子工学科</th><td>エコ・情報通信を支え、生活を豊かにする電気と電子の技術を学ぶ </td></tr> <tr><th>情報工学科</th><td>すべてはプログラミングからはじまる。企画・立案・開発ができる情報エンジニアへ</td></tr> <tr><th>コンピュータ応用学科</th><td>みんなで力をあわせて進めるモノづくり。社会で発揮できる実践的な創造力を習得</td></tr> <tr><th>コンピュータデザイン学科</th><td>感性を活かしたデザインと設計技術で機能性や使いやすさを形にする</td></tr> <tr><th>人間環境学科</th><td>文系・理系双方から総合的に学びテクノロジーと創造力を身につける </td></tr> </table> </div>

(

(演習

演習

演習1)

1)

1)結果

結果

(2)

表を定義するタグ

タグ <table> ～</table> 機能表を定義するタグ <tr> ～</tr> 機能表の行を定義するタグ <td> ～</td> 機能表の項目を定義するタグ <th> ～</th> 機能表の項目の見出しを定義する

(

(演習

演習

演習2)

2)

2)表にスタイルを適用する

表にスタイルを適用する

6/21 湘南工科大学講義資料Webプログラミング1(2013) 阿倍スタイルシート「tsujido.css」を下記の通り修正してください前略

.shoukai{border-left:solid20px #ccc;margin:1em 0;background-color:#fff;} a{text-decoration:none;} a:link{color:#170;text-decoration:underline;} a:visited{color:#3a0;} a:hover{color:#fff;background-color:#f80;font-weight:bold;} a:active{color:#f00;background-color:#ffa;font-weight:bold;border:solid1px #f00;} img.top{vertical-align:middle;} p.honbunimg{float:right;margin-left:1em;} p.photo{min-height:180px;} table{margin:auto;border:solid2px #000;border-collapse:collapse;width:75%;} th,td{height:3em;border:solid 1px #000;padding:0.5em;} th{background-color:#ffe5a3;width:10em;} td{vertical-align:middle;}

(

(演習

演習

演習2)

2)

2)結果

結果

表に指定できるスタイル

スタイル borderborderborderborder----collapse:collapse:collapse:collapse:枠線の表示方法

機能表の項目同士を離して表示するかどうか指定する

値 collapse・・・表の項目を離さずに表示する separate・・・表の項目を離して表示する(default)

スタイル verticalverticalverticalvertical---align:-align:align:align:高さ位置の指定

機能行の中で文字や画像を表示する高さを指定する値 baseline・・・1行目のベースラインが揃うように調整する (default) top・・・上辺に揃えて表示する middle・・・中央に揃えて表示する bottom・・・下辺に揃えて表示する

(3)

(

(演習

演習

演習3)

3)

3)表にタイトルを追加する

表にタイトルを追加する

9/21 湘南工科大学講義資料Webプログラミング1(2013) 阿倍 HTMLファイル「shuuhen.html」を開き、下記の通り修正してください「tsujido.css」を開き、下記の通り修正してください前略 <table> <caption>湘南工科大学工学部の学科一覧</caption> <tr><th>機械工学科</th><td>機械の開発・設計、生産・組立、管理まで多彩な視点でモノづくりの技術を学ぶ</td></tr> <tr><th>電気電子工学科</th><td>エコ・情報通信を支え、生活を豊かにする電気と電子の技術を学ぶ</td></tr> 前略 th{background-color:#ffe5a3;width:10em;} td{vertical-align:middle;} caption{background-color:#350;color:#fff;padding:0.2em 0;}

(

(演習

演習

演習3)

3)

3)結果

結果

表のタイトルを指定するタグ

タグ <caption>～</caption> 機能表のタイトルを指定する

表のタイトルを指定するタグ

(

(演習

演習

演習4)

4)

4)番号入りのリストを作成する

番号入りのリストを作成する

HTMLファイル「index.html」を開き、下記の通り修正してください前略 <p class="head">辻堂案内は辻堂周辺を紹介するサイト

です。<imgsrc="tsujido.jpg" title="辻堂" alt="[写真／辻堂]" width="200"

height="155" class="top"></p>

と<a href="shuuhen.html#univ">湘南工科大学</a></li>

<li><a href="history.html">辻堂の歴史</a></li>

<li>作者について</li>

</ol> </div>

</body>

(4)

(

(演習

演習

演習4)

4)

4)結果

結果

番号入りのリストを作るためのタグ

タグ <ol>～ </ol> 機能番号入りのリストを定義するタグ <li>～ </li> 機能リストの各行を定義する

(

(演習

演習

演習5)

5)

5)箇条書きのリスト、リストの中にリスト

5)

箇条書きのリスト、リストの中にリスト

を作成する

HTMLファイル「index.html」を開き、下記の通り修正してください前略 <div class="contents"> <ul> <li><a href="shuuhen.html">辻堂周辺</a> <ol>

<li><a href="shuuhen.html#eki">辻堂駅</a></li> <li><a href="shuuhen.html#univ">湘南工科大学</a></li> </ol> </li> <li><a href="history.html">辻堂の歴史</a></li> <li>作者について</li> </ul> </div>

(

(演習

演習

演習5)

5)

5)結果

結果

(5)

箇条書きのリストを作るタグ

タグ <ul> ～</ul> 機能箇条書きのリストを定義する

(

(演習

演習

演習6)

6)

6)リストにスタイルを指定する

リストにスタイルを指定する

18/21 湘南工科大学講義資料Webプログラミング1(2013) 阿倍「tsujido.css」を開き、下記の通り修正してください前略 caption{background-color:#350;color:#fff;padding:0.2em 0;} li{list-style-image:none;padding-left:0.2em;} olli{list-style-image:none;list-style-type:lower-roman;}

(

(演習

演習

演習6)

6)

6)結果

結果

リストを設定するスタイル

スタイル list-style-type:各種の値機能リストの表示スタイルを設定する値 disc・・・塗りつぶされた丸を表示する circle・・・白抜きの丸を表示する square・・・塗りつぶされた四角を表示する decimal・・・算用数字で表示する lower-roman・・・小文字のローマ字で表示する upper-roman・・・大文字のローマ字で表示する lower-alpha・・・小文字のアルファベットで表示する upper-alpha・・・大文字のアルファベットで表示する none・・・何も表示しない

(6)

HTML+CSS(6)

HTML+CSS(6)まとめ

まとめ

21/21 湘南工科大学講義資料Webプログラミング1(2013) 阿倍演習演習演習演習内容内容内容内容作成ファイル作成ファイル作成ファイル作成ファイル演習１表を作成する shuuhen.html 演習２表にスタイルを適用する shuuhen.html tsujido.css 演習３表にタイトルを追加する shuuhen.html tsujido.css 演習４番号入りのリストを作成する index.html 演習５箇条書きのリスト、リストの中にリストを作成する index.html 演習６リストにスタイルを指定する index.html tsujido.css

本日の演習内容について復習してください