基礎情報処理Ｉ（Ａ）
第12-14回：
ウェブページ作成
2017-06-27,07-04,11 酒井 由紀子 慶應義塾大学文学部授業の準備
• 「酒井の授業ページ」から以下をDL->保存
– 本日の投影資料 2017Info-1214_web.pdf – 日吉キャンパスマップ hiyoshi_campus.jpg• 以下は必要に応じてクリックして表示する
– ウェブサンプル1(index.html) web_sample1.jpg – ウェブサンプル2(map.html) web_sample2.jpg演習
目標
3ゼミやグループワークを想定した以下に関する
基本的な知識とスキルの習得
• ウェブページ作成
• ITCの機能を使ったウェブサイト公開
※ウェブページ：ブラウザで見る個別のページ ※ウェブサイト：個人や組織で提供するひとまとまりのページ群目次
1. ウェブの仕組み
2. ウェブサイトの準備
3. ウェブページの作成：基礎編
4. ウェブサイトの公開
5. ウェブページの作成：中級編
6. 課題5（ウェブページ）
1.ウェブの仕組み
5ウェブページの構成ファイル
ＨＴＭＬ CSS JPEG解説
ウェブページの構成ファイル
• HTML（
Hyper Text Markup Language）ファイル
– 最低限必要なHTML言語で書かれたドキュメント – 表示を統制する<>で囲んだタグを含むテキスト• CSS（
Cascading Style Sheet）ファイル
– 統一したレイアウトを統制するファイル ※本演習ではHTMLファイル中に記述• リンク先のファイル
– 画像ファイル（JPEG, GIF, PNG） – 文書ファイル（PDF）、ビデオファイル等 7解説
ウェブページの
閲覧
「ウェブブラウザ」が必要
• 機能
– 指定のURLからHTMLや画像データを取得 – HTMLやCSSを解析してウェブページを表示 – JavaScriptと呼ばれるプログラミング言語を実行する• 種類
– Internet Explorer (Windows), Safari(Mac) – Google Chrome, Mozilla Firefox, Opera
ウェブページの
作成
「テキストエディター」が必要
• 機能
– テキスト形式のファイルを編集する – .html（または.htm）の形式で保存する• 種類
– メモ帳 – TeraPad（※本科目の演習で利用） 9ウェブページの
公開
「FTPクライアント」が必要
• 機能
– FTP(File Transfer Protocol)に従い、ローカルマシン からウェブサーバへファイル転送を行う
• 種類
– FFFTP
ITC-PC以外で作業するときの確認
11• 閲覧のために「
ウェブブラウザー
」 IE
• 作成のために「
テキストエディター
」 terapad
• 公開のために「
FTPクライアント
」
WinSCP
ウェブページ作成中
ITC ウェブサーバ ローカル （作成PC） ①TeraPadで ＨＴＭＬファイル作成 ②その他のファイルを準備 ③IE等ブラウザで表示確認 ローカル （閲覧PC） ローカルアドレス ※課題5で提出するアドレス URLではない解説
ウェブページ公開・閲覧
13 ITC ウェブサーバ ローカル （作成PC） ①Win-SCPを使い アップロード Index.htmlほか ②HTTPによるリクエスト ④IE等ブラウザで表示 ローカル （閲覧PC） http://user.keio.ac.jp/~ユーザ名/index.html ③ファイル受信 Index.htmlほか Index.htmlほか ◎課題5で提出するインターネット上のアドレス ＝URL: Uniform Resource Locator（通信方式＋場所）解説
2.ウェブサイトの準備
=WinSCPのログイン
WinSCPのログイン（初回）
• WinSCP起動＞項目入力・選択＞保存・ログイン
15 ①ホスト名入力 upload.user.keio.ac.jp演習
WinSCP ①ホスト名入力 upload.user.keio.ac.jp ②ユーザ名/パスワード入力 ITCアカウントと同じ ③いたん「保存」してから 「ログイン」WinSCPのログイン（初回）
• 初めて接続するホストに対する警告
「はい」演習
WinSCP• 保存後はホスト名一覧から
WinSCPのログイン
17 ①upload.user.keio.ac.jp を確認して「ログイン」 ②ユーザ名を入力して「OK」 ③パスワードを入力して「OK」演習
WinSCP• ログイン完了!
WinSCPのログイン
演習
WinSCPWinSCPの終了
19演習
WinSCP ① をクリック ②終了確認メッセージで 「OK」をクリック3.ウェブページの作成：基礎編
演習/課題5で作成するページ
21 index.html map.html rishu.html解説
手順
ローカルPCで
• TeraPadを用いてHTMLファイルを作成・編集
• リンク先のファイルを用意
• IEを用いローカルウェブページの表示確認
URL例）Z¥Documents¥web_sample¥index.html解説
ウェブページ上のファイル名
• ファイル名は半角英小文字、半角数字、ハイフ
ン、アンダースコアのみ
• ＨＴＭＬファイル拡張子は.htmlまたは.htm
良い例）
悪い例）
○aboutme.html
×about me.html
○about_me.htm
×you&me.jpg
×aboutMe.html
×自己紹介.pdf
23解説
演習サンプル1
index.html解説
• 「マイドキュメント」の下に専用フォルダを作成
例）web_practice
• 上記フォルダの下で右クリック＞新規作成＞
テキストドキュメント
index.htmlの準備
27演習
TeraPad• ファイル名を「index.html」に変更
• 「変更しますか？」に「はい」
index.htmlの準備
演習
TeraPad ○index.html ×index.html.txt• IEのアイコンに変わっていることを確認
index.htmlの準備
29演習
TeraPad保存したHTMLファイルをTeraPadで編集する
• 「TeraPad」を起動してから、「ファイル＞開く」
でHTMLを選択する or
• 「TeraPad」を起動してから、HTMLのファイル
のアイコンをドラッグしてくる
※ファイルアイコンのダブルクリックするとIEが
起動する（関連づけ設定のため）
index.htmlの準備
解説
TeraPad• すべてのプログラム＞terapad
• terapadの窓にindex.htmlをドラッグしてくる
index.htmlの準備
31 TeraPad演習
• Terapadで編集可能となったindex.html
index.htmlの準備
TeraPad[EOF]=End of File
この前が入力域
解説
“index.html“ ファイル名の表示
33 TeraPad: HTMLの表示が色 分けされ見やすい！ • タグが青 • コメントが灰色 • 参照ファイルやURLが緑
解説
IEアイコンからブラウザ表 示の確認もすぐにOK!リンク先ファイルの準備
• web_practiceの下にリンクファイルをコピー
• 2017Info-1214_web.pdf • hiyoshi_campus.jpg演習
Explorer 【重要】index.html と同じフォルダ下に リンクファイルを置く ⇒本演習のHTMLの 記述では、そうしな いとリンク先が表示 されないHTMLの基礎
• 基本書式と名称
<p>こんにちは</p>
←一つの要素
• タグの記述は半角で
• 大文字・小文字は問わないが統一する
(HTML5.0)
35 開始タグ 要素の内容 終了タグ解説
• TeraPadの[EOF]の前に試しにHTML入力
• IEアイコンIEで表示
HTML入力⇒ブラウザ表示
index.html演習
TeraPad IEHTMLの基礎
• 改行、インデント（字下げ）は読みやすさ
のためで、HTML表示には関係しない
• HTML表示の改行はあくまでもタグで
<ul>本日のランチ<li>チキンサンド</li><li>チーズバーガー</li></ul> <ul>本日のランチ <li>チキンサンド</li> <li>チーズバーガー</li> </ul> 37 tab tab 本日のランチ チキンサンド チーズバーガー解説
必須タグの入力
<!doctype html> →HTMLヴァージョン5.0を表す <html> <head> メタデータ（非表示） </head> ルート要素 <body> 内容（表示） </body> index.html 試し入力は削除。 この必須タグは 投影資料（.pdf）から コピー貼り付け可演習
TeraPadメタデータの入力
• メタデータ（非表示）は＜head＞＜/head＞の間に
<!doctype html> <html>
<head>
<meta charset=“shift-jis”> ←文字コード指定
<title>練習のページ</title> ←タイトル </head> <body>… 39 index.html
演習
TeraPad• IEアイコンIEが起動して表示
ブラウザで表示を確認
index.html演習
TeraPad IEブラウザから「ソース表示」
• IE
右クリックから「ソースの表示」 • ソースが下方に開く。不要になったら で消す 41演習
index.html IE見出しと水平線
• 内容（表示）は<body>と</body>の間に <body> <h1>練習のページ</h1> ←見出し <hr> ←水平線（単体で利用） </body> index.html演習
TeraPad 本文として表示される ※ページタイトルはIEタブ段落・箇条書き
• この演習では<hr>に続けて… <p> ←段落 基礎情報処理では、ウェブページの作成に関する基礎 的な知識を得て、演習を行いました。手順は以下のとお りです。 <ul> ←非序列リスト（箇条書き）<li>HTMLファイルの作成</li> ←ul子要素
<li>HTMLファイルのアップロード</li> </ul> ←非序列リスト（箇条書き）おわり </p> ←段落おわり 43 index.html
演習
TeraPadブラウザで表示を確認
index.html演習
IE番号付リスト
• この演習では前の</p>に続けて… <p> ほかにも多くのことを学びました。 <ol> ←序列リスト（番号つきリスト） <li> イントロダクション・情報倫理・PC利用・メール</li> <li> 検索エンジン・データベース検索</li><li> MS-Word(1)</li> <li> MS-Word(2)</li>…
</ol>←序列リスト（番号つきリスト）おわり </p> 45 index.html 「授業のページ」を参考に 第11回までの授業内容を リストアップ！
演習
TeraPadコメント文（非表示）
• 表示に影響しないメモを目印に入れておく
<!--見出し部分--> <!--メイン ここから--> <!--メイン ここまで--> <!--フッター--> index.html 囲まれた文字列は表示されない。改行しても同じ TeraPad解説
コメント文（非表示）
47 index.html演習
TeraPad ①<body>の下に <!--見出し部分--> ②<hr>の下に <!—メイン ここから--> ③2つ目の</p>の下に <!—メイン ここまで--> <!—フッター->ブラウザで表示を確認
index.html IE演習
リンクの種類
49 index.html IE演習
内部リンク①：同じサイトに あるファイルにリンク 外部リンク：別サイトにある ファイルやページにリンク 内部リンク②：同じページの id（固有名）の位置へリンクリンク：<a>タグ
• 基本<a href=“リンク先アドレス/ID”>リンク元</a> a:anchor
href: hyperlink reference
• リンク先アドレスの種類 – 内部リンク：今のページと同じサイトにあるファイル/IDにリンク パス名（フォルダ名）・ファイル名による「相対参照」で指定 同ページ内のID名で指定 URLによる「絶対参照」も可 – 外部リンク：別のサイトにあるページやファイルにリンク
解説
説明は本日の<a href=“2017Info-1214_web.pdf”
target=“_self”>投影資料</a>にあります
内部リンク
パス・ファイル名で指定= リンク元・先のファイルの 関係を保持しないと リンク切れになる ローカル （作成PC） ウェブサーバ リンク先の ファイルを参照 練習のページ index.html 投影資料 2017Info-1214_web.pdf 練習のページ index.html 投影資料 2017Info-1214_web.pdf ローカル （閲覧PC） 練習のページ index.html 投影資料 2017Info-1214_web.pdf 51解説
内部リンク①
• この演習では1つ目の</p>と2つ目の<p>の間
に相対参照で内部ファイルにリンク
<p>説明は本日の<a href="2017Info-1214_web.pdf"
target="_self">投影資料</a>にあります。 </p>
index.html
演習
TeraPad
内部リンク②
• この演習ではフッター部分からidをつけた
トップへ相対参照でリンク
<h1id=“top”>練習のページ</h1> ←見出し部分
<!--フッター-->
<a href=“#top”>トップにもどる</a> ←フッター部分
53 id属性（固有名）を追加 index.html aタグ href属性（id名） 終了タグ ※コピー貼り付け後 半角の“が全角”に なっていたら半角に修正
演習
TeraPad 練習のページ index.html外部リンク
詳細は<a href =“http://web.flet.keio.ac.jp/~yukiko/kiso-joho2017/” target=“_blank”>授業のページ</a>にあります。
ローカル （作成PC） ローカル （閲覧PC） リンク元 ウェブサーバ リンク先の URL URLで指定＝絶対参照なので、 リンク元のファイルがどこに あっても気にすることなし 練習のページ index.html 練習のページ
解説
外部リンク
• この演習では番号つきリスト段落おわり
</ol></p>の後に絶対参照でリンク
<p>
詳細は<a href= “http://web.flet.keio.ac.jp/~yukiko/kiso-joho2017/”target=“_blank”>授業のページ</a>にありま す。</p>
<a href=“URL” target=“_blank”>テキスト</a>
55
aタグ href属性（リンク先） target属性（開き方） 終了タグ
index.html
演習
TeraPad
リンクと参照：開き方
• target指定
<p>
説明は本日の<a href=“2017Info-1214_web.pdf” target=“_self”>
投影資料</a>にあります。 </p> <p> 詳細は
解説
一般的な指定： 内部リンクでは現在のウィンドウ 外部リンクでは新規のウィンドウブラウザで
表示とリンクを確認
57 index.html演習
IE リンク先が開かない! • ファイル名やアドレスに間違 いがないか • HTMLのタグや記述の記号に 抜けや不要なものがないか • 内部リンクの場合、指定の フォルダにファイルが存在し ているか演習サンプル2
map.html解説
• 「マイドキュメント」>web_practice
の下で右クリッ ク＞新規作成＞テキストドキュメントmap.htmlの準備
59演習
TeraPad• ファイル名を「map.html」に変更
• 「変更しますか？」に「はい」
map.htmlの準備
演習
TeraPad ○map.html ×map.html.txthiyoshi_campus.jpg
+map.htmlの確認
61演習
TeraPad アイコンがIEに なっている 同じフォルダに 画像ファイル がある必須タグ・メタデータ入力
<!doctype html> <html> <head><meta charset=“shift-jis”> <title>案内地図</title> </head> <body> map.html
演習
TeraPad ※コピー貼り付け後 半角の“が全角”に なっていたら半角に修正画像リンク： <img>タグ
• 基本<img src=“
リンク先アドレス
”>
• リンク先アドレスの種類
– 内部リンク 相対参照としてパス名・ファイル名 – 外部リンク 絶対参照としてURLを記載 63解説
見出し入力・画像挿入
• imgタグで画像ファイルを指定する
<body> <h2>案内地図</h2><img src=“hiyoshi_campus.jpg” alt=“案内地図” >
imgタグ src属性（ファイルパス） alt属性※ map.html ※コピー貼り付け後 半角の“が全角”に なっていたら半角に修正
演習
TeraPad内部リンク③
• 画像<img>タグの後に、map.htmlから
Index.htmlへ相対参照でリンク
<p>
<a href=“index.html” target=“_self”>「練習のページ」 に戻る</a>
</p>
<a href=“ファイル名” target=“_self”>テキスト</a>
65
aタグ href属性（パス） target属性（開き方） 終了タグ
map.html
演習
TeraPad ※コピー貼り付け後 半角の“が全角”に なっていたら半角に修正内部リンク④
• index.htmlからもmap.htmlへ相対参照でリンク
<!--メイン ここまで-->の上に <p> この授業は日吉キャンパスの第6校舎（<a href=“map.html” target=“_self”>案内地図</a> の5番）にある教室で行われています。
</p>
<a href=“ファイル名” target=“_self”>テキスト</a>
index.html
演習
TeraPad
※コピー貼り付け後 半角の“が全角”に なっていたら半角に修正
ブラウザで
表示とリンクを確認
67演習
IE index.html map.html4.ウェブサイトの公開
• 以下のファイルをWinSCPを使って、ローカル
PCからウェブサーバに転送する
– 作成したHTMLファイル • index.html • map.html – リンクして表示させたいファイル • 2017Info-1214_web.pdf • hiyoshi_campus.jpg• IEを用いて公開ウェブページの表示を確認
URL例）http://user.keio.ac.jp/~ubxxxxxx/index.html手順
69解説
コンテンツのアップロード
• ローカル→リモートへのファイルのコピー
演習
WinSCP Public_htmlフォルダを開くコンテンツのアップロード
71• ローカル→リモートへのファイルのコピー
演習
WinSCP Public_htmlフォルダの中に 4ファイルをドラッグしてコピー• アップロード完了!
コンテンツのアップロード
演習
WinSCP• 同名ファイルをアップロードしようとすると…
コンテンツのアップロード
73演習
WinSCP 上書き確認メッセージが出るので よければ「はい」• WinSCPの終了
コンテンツのアップロード
演習
WinSCP ① をクリック ②終了確認メッセージで 「OK」をクリック• 公開アドレスをブラウザに入れてみる
http://user.keio.ac.jp/~ユーザ名/
※ユーザ名はITC-PCの
ログイン名と同じ
※~はShift+「へ」（右上）
※index.htmlは
入れなくとも
自動表示される
公開ページ表示の確認
75演習
IE5.ウェブページの作成：中級編
中級演習の準備
• 「酒井の授業ページ」で以下を参照
– 「応用情報処理」科目一覧 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演習
TeraPadCSS
• タイトルの後に、背景色→
見本
の16進法
で指定
<style> body{ background-color: #ccffff;/*背景色*/ } </style> 89 ｛で開始、｝で終了 index.html演習
TeraPad プロパティと値 コメント 指定場所CSS
• 見出し文字色→
見本
の16進法で指定
h1 {
color: #000080;/*見出し文字色*/
}
index.html演習
TeraPadCSS
• テーブル見出し→色は
見本
16進法で指定
table th {
background-color: #ffffff;/*表見出背景色*/ border: 1px solid #b0c4de;/*表見出し枠*/ font-weight: bold;/*表見出し文字太さ*/ } 91 index.html
演習
TeraPadCSS
• テーブルセル→色は
見本
16進法で指定
table td { background-color: #ffffff;/*表背景色*/ border: 1px solid #b0c4de;/*表枠*/ }index.html
