•
公開アドレスをブラウザに入れてみる http://user.keio.ac.jp/~ ユーザ名 /
※ユーザ名は
ITC-PC の ログイン名と同じ
※
~ は Shift+ 「へ」（右上）
※
index.html は 入れなくとも 自動表示される
公開ページ表示の確認
75
演習
IE
中級演習の準備
• 「酒井の授業ページ」で以下を参照
–「応用情報処理」科目一覧 2017-mita-oyojohoshori.pdf
–原色大辞典 http://www.colordic.org/
–ウェブサンプル3(index.html) web_sample3.jpg
77
演習
演習サンプル 3
1) JavaScriptを使って 更新日時を表示する
2)Tableタグを使って 表を作成する
3)CSSを使って
index.html
解説
JavaScript
•
Netscape Communications 社が開発したプロ グラミング言語
•
ウェブページで様々な機能を提供する
–フォームに入力した値をチェックする –ゲームができる–時刻を表示する★
•
<script></script> タグで囲んで記述する
79
解説
JavaScript
• 見出しと平行線<hr>の間に、JavaScriptを挿入し、
最終更新日時を表示
<h1 id="top">練習のページ</h1>
<script type=“text/javascript”>document.write('最終更
新日時:' + document.lastModified);// </script>
index.html
演習
TeraPad
※コピー貼り付け後 半角の“が全角”に なっていたら半角に修正
ブラウザで表示を確認
81
演習
IE
index.html
※警告が出たら「ブ ロックされているコン テンツを許可」をク リック
テーブル
1 行 2 列の表の場合
<table>
<tr>
<td>
</td>
<td> <td>2列 <tr>1行 <table>1表
</td>
</tr>
解説
tr= table row th= table head td= table data
テーブル
• 8行3列の表の枠を作る
<!--メイン ここまで-->の上に
<p>三田キャンパスでは「基礎情報処理」に加えて「応用情報処
理I～VI」が開講されています。
<br>概要は以下のとおりです</p>
<table>
</table>
<br>
<!--メイン ここまで-->
83
index.html
※改行タグ<br>は単独で利用可
→1行あけたいときに便利。<p></p>とレイアウト異なる
演習
TeraPad
テーブル
•
<table></table> の間に行を確保する <tr></tr>
を入力、さらに <th></th> で表頭見出し入力
<table>
<tr>
<th>科目名</th>
<th>開講学期</th>
<th>内容</th>
index.html
演習
TeraPad
テーブル
• 行を確保する<tr></tr>を入力、<td></td>で科目名、
開講学期、内容を各行に入力（2～8行目）
<tr>
<td>応用情報処理I</td>
<td>秋</td>
<td>テキスト処理</td>
</tr>
85
index.html
演習
TeraPad
ブラウザで表示を確認 演習
IE
index.html
枠の色を指定していない ので、枠ナシでOK!
CSS （ Cascading Style Sheet ）
• スタイル記述言語 ≠HTML
• 記述場所
– タグの中 <p style=“color: “ff0000;”>
– HTML 文書中★
– 外部 CSS ファイル
↑ 複数ページで共有可のため主流
87
解説
CSS
• HTML の <head></head> の中に
<style></style> の枠を設けて記述する
<head>
<title>
練習のページ
</title><style>
index.html
演習
TeraPad
CSS
• タイトルの後に、背景色 →
見本の16 進法 で指定
<style>
body{
background-color: #ccffff;/*背景色*/
}
</style>
89
｛で開始、｝で終了
index.html
演習
TeraPad
プロパティと値 コメント 指定場所
CSS
• 見出し文字色 →
見本の16 進法で指定
h1 {
color: #000080;/* 見出し文字色 */
}
index.html
演習
TeraPad
CSS
• テーブル見出し → 色は
見本16 進法で指定
table th {
background-color: #ffffff;/*表見出背景色*/
border: 1px solid #b0c4de;/*表見出し枠*/
font-weight: bold;/*表見出し文字太さ*/
}
91
index.html
演習
TeraPad
CSS
• テーブルセル → 色は
見本16 進法で指定
table td {
background-color: #ffffff;/*表背景色*/
border: 1px solid #b0c4de;/*表枠*/
}
index.html
演習
TeraPad
ブラウザで確認
93
演習
IE