基礎情報処理I（A）第12-14回：ウェブページ作成user.keio.ac.jp/~ub274706/2017Info-1214_web.pdf•HTML（Hyper Text Markup Language ）ファイル –最低限必要なHTML言語で書かれたドキュメント

1

基礎情報処理Ｉ（Ａ）第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

2

演習

2

目標

3

ゼミやグループワークを想定した以下に関する基本的な知識とスキルの習得

• ウェブページ作成

• ITCの機能を使ったウェブサイト公開

※ウェブページ：ブラウザで見る個別のページ

※ウェブサイト：個人や組織で提供するひとまとまりのページ群

目次

4

1. ウェブの仕組み

2. ウェブサイトの準備

3. ウェブページの作成：基礎編

4. ウェブサイトの公開

5. ウェブページの作成：中級編

6. 課題5（ウェブページ）

3

1.ウェブの仕組み

5

ウェブページの構成ファイル

6

ＨＴＭＬ

CSS JPEG

コンテンツ：index.html

ほかの関連ファイル群

解説

http://www.google.co.jp/url?sa=i&rct=j&q=PDF&source=images&cd=&cad=rja&docid=twG5XgxEvbq-oM&tbnid=sfHzVohKz1kEtM:&ved=0CAUQjRw&url=http://www.makeuseof.com/tag/create-free-pdf-files-instantly-easily-pdfcreator/&ei=8BDQUbXaNJHpkAWR4oHABg&bvm=bv.48572450,d.dGI&psig=AFQjCNHOoJF7VhpreCKmsdfJsNmzdK20Kw&ust=1372676713787634

4

ウェブページの構成ファイル

• 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

8

解説

5

ウェブページの作成

「テキストエディター」が必要

• 機能–テキスト形式のファイルを編集する

– .html（または.htm）の形式で保存する

• 種類– メモ帳

– TeraPad（※本科目の演習で利用）

9

ウェブページの公開

「FTPクライアント」が必要

• 機能– FTP(File Transfer Protocol)に従い、ローカルマシンからウェブサーバへファイル転送を行う

• 種類– FFFTP

– WinSCP（※本科目の演習で利用）

10

解説

6

ITC-PC以外で作業するときの確認

11

• 閲覧のために「ウェブブラウザー」 IE

• 作成のために「テキストエディター」 terapad

• 公開のために「FTPクライアント」 WinSCP

ウェブページ作成中

12

ITC

ウェブサーバローカル（作成PC）

①TeraPadでＨＴＭＬファイル作成

②その他のファイルを準備③IE等ブラウザで表示確認

ローカル（閲覧PC）

Z¥Documents¥web_sample¥index.html

ローカルアドレス※課題5で提出するアドレス

URLではない

解説


7

ウェブページ公開・閲覧

13

ITC

ウェブサーバローカル（作成PC）

①Win-SCPを使いアップロード

Index.htmlほか

②HTTPによるリクエスト

④IE等ブラウザで表示


http://user.keio.ac.jp/~ユーザ名/index.html

③ファイル受信

Index.htmlほか

Index.htmlほか

◎課題5で提出するインターネット上のアドレス＝URL: Uniform Resource Locator（通信方式＋場所）

解説

2.ウェブサイトの準備=WinSCPのログイン

14





8

WinSCPのログイン（初回）

• WinSCP起動＞項目入力・選択＞保存・ログイン

15

①ホスト名入力

upload.user.keio.ac.jp

演習WinSCP

①ホスト名入力

upload.user.keio.ac.jp

②ユーザ名/パスワード入力ITCアカウントと同じ

③いたん「保存」してから「ログイン」

WinSCPのログイン（初回）

• 初めて接続するホストに対する警告

16

「はい」

演習WinSCP

9

• 保存後はホスト名一覧から

WinSCPのログイン

17

①upload.user.keio.ac.jpを確認して「ログイン」

②ユーザ名を入力して「OK」③パスワードを入力して「OK」

演習WinSCP

• ログイン完了!

WinSCPのログイン

18

ローカルホスト（作成PC）

リモートホスト（ウェブサーバ）

演習WinSCP

10

WinSCPの終了

19

演習WinSCP

① をクリック

②終了確認メッセージで「OK」をクリック

3.ウェブページの作成：基礎編

20

11

演習/課題5で作成するページ

21

index.html

map.html

rishu.html

解説

手順

ローカルPCで

• TeraPadを用いてHTMLファイルを作成・編集

• リンク先のファイルを用意

• IEを用いローカルウェブページの表示確認

URL例）Z¥Documents¥web_sample¥index.html

22

解説

12

ウェブページ上のファイル名

• ファイル名は半角英小文字、半角数字、ハイフン、アンダースコアのみ

• ＨＴＭＬファイル拡張子は.htmlまたは.htm

良い例）悪い例）

○aboutme.html ×about me.html

○about_me.htm ×you&me.jpg

×aboutMe.html

×自己紹介.pdf

23

解説

演習サンプル1

26

index.html 解説

13

• 「マイドキュメント」の下に専用フォルダを作成

例）web_practice

• 上記フォルダの下で右クリック＞新規作成＞

テキストドキュメント

index.htmlの準備

27

演習TeraPad

• ファイル名を「index.html」に変更

• 「変更しますか？」に「はい」

index.htmlの準備

28

演習TeraPad

○index.html×index.html.txt

14

• IEのアイコンに変わっていることを確認

index.htmlの準備

29

演習TeraPad

保存したHTMLファイルをTeraPadで編集する

• 「TeraPad」を起動してから、「ファイル＞開く」でHTMLを選択する or

• 「TeraPad」を起動してから、HTMLのファイルのアイコンをドラッグしてくる

※ファイルアイコンのダブルクリックするとIEが起動する（関連づけ設定のため）

index.htmlの準備

30

解説TeraPad

15

• すべてのプログラム＞terapad

• terapadの窓にindex.htmlをドラッグしてくる

index.htmlの準備

31

TeraPad 演習

• Terapadで編集可能となったindex.html

index.htmlの準備

32

TeraPad

[EOF]=End of Fileこの前が入力域

解説

“index.html“ファイル名の表示

16

33

TeraPad: HTMLの表示が色分けされ見やすい！• タグが青• コメントが灰色• 参照ファイルやURLが緑

解説

IEアイコンからブラウザ表示の確認もすぐにOK!

リンク先ファイルの準備

34

• web_practiceの下にリンクファイルをコピー

• 2017Info-1214_web.pdf

• hiyoshi_campus.jpg

演習Explorer

【重要】index.htmlと同じフォルダ下にリンクファイルを置く⇒本演習のHTMLの

記述では、そうしないとリンク先が表示されない

17

HTMLの基礎

• 基本書式と名称

<p>こんにちは</p> ←一つの要素

• タグの記述は半角で

• 大文字・小文字は問わないが統一する

(HTML5.0)

35

開始タグ要素の内容終了タグ

解説

• TeraPadの[EOF]の前に試しにHTML入力

• IEアイコンIEで表示

HTML入力⇒ブラウザ表示

36

index.html 演習

TeraPad

IE

18

HTMLの基礎

• 改行、インデント（字下げ）は読みやすさのためで、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>

</html>

38

index.html

試し入力は削除。この必須タグは

投影資料（.pdf）からコピー貼り付け可

演習TeraPad

19

メタデータの入力

• メタデータ（非表示）は＜head＞＜/head＞の間に

<!doctype html>

<html>

<head>

<meta charset=“shift-jis”> ←文字コード指定

<title>練習のページ</title> ←タイトル

</head>

<body>…

39

index.html 演習TeraPad

• IEアイコンIEが起動して表示

ブラウザで表示を確認

40

index.html 演習

TeraPad

IE

ページタイトルが表示されている！

20

ブラウザから「ソース表示」

• IE右クリックから「ソースの表示」

• ソースが下方に開く。不要になったらで消す

41

演習index.html

IE

見出しと水平線

• 内容（表示）は<body>と</body>の間に

<body>

<h1>練習のページ</h1> ←見出し

<hr> ←水平線（単体で利用）

</body>

42


本文として表示される※ページタイトルはIEタブ

21

段落・箇条書き

• この演習では<hr>に続けて…

<p> ←段落

基礎情報処理では、ウェブページの作成に関する基礎的な知識を得て、演習を行いました。手順は以下のとおりです。

<ul> ←非序列リスト（箇条書き）

<li>HTMLファイルの作成</li> ←ul子要素

<li>HTMLファイルのアップロード</li>

</ul> ←非序列リスト（箇条書き）おわり

</p> ←段落おわり43



44

index.html 演習IE

22

番号付リスト

• この演習では前の</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

コメント文（非表示）

• 表示に影響しないメモを目印に入れておく









46

index.html

囲まれた文字列は表示されない。改行しても同じ

TeraPad

解説

23

コメント文（非表示）

47


①<body>の下に

②<hr>の下に<!—メインここから-->

③2つ目の</p>の下に<!—メインここまで--><!—フッター->


48

index.html

IE

演習

24

リンクの種類

49

index.html

IE

演習

内部リンク①：同じサイトにあるファイルにリンク

外部リンク：別サイトにあるファイルやページにリンク

内部リンク②：同じページのid（固有名）の位置へリンク

リンク：<a>タグ

• 基本

<a href=“リンク先アドレス/ID”>リンク元</a>a:anchorhref: hyperlink reference

• リンク先アドレスの種類– 内部リンク：今のページと同じサイトにあるファイル/IDにリンク

パス名（フォルダ名）・ファイル名による「相対参照」で指定同ページ内のID名で指定URLによる「絶対参照」も可

– 外部リンク：別のサイトにあるページやファイルにリンク絶対参照としてURLを記載

50

解説

25

説明は本日の<a href=“2017Info-1214_web.pdf” target=“_self”>投影資料</a>にあります

内部リンク

パス・ファイル名で指定=

リンク元・先のファイルの関係を保持しないとリンク切れになる

ローカル（作成PC）

ウェブサーバ

リンク先のファイルを参照

練習のページindex.html投影資料

2017Info-1214_web.pdf

練習のページindex.html

投影資料2017Info-1214_web.pdf



投影資料2017Info-1214_web.pdf 51

解説

内部リンク①

• この演習では1つ目の</p>と2つ目の<p>の間に相対参照で内部ファイルにリンク

<p>

説明は本日の<a href="2017Info-1214_web.pdf" target="_self">投影資料</a>にあります。

</p>

<a href=“ファイル名” target=“_blank”>テキスト</a>

52

aタグ href属性（ファイル名）target属性（開き方）終了タグ


※コピー貼り付け後、半角の“が全角”になっていたら半角に修正




26

内部リンク②

• この演習ではフッター部分からidをつけたトップへ相対参照でリンク

<h1 id=“top”>練習のページ</h1> ←見出し部分



<a href=“#top”>トップにもどる</a> ←フッター部分

53

id属性（固有名）を追加

index.html

aタグ href属性（id名）終了タグ

※コピー貼り付け後半角の“が全角”に

なっていたら半角に修正

演習TeraPad


外部リンク

詳細は<a href=“http://web.flet.keio.ac.jp/~yukiko/kiso-joho2017/” target=“_blank”>授業のページ</a>にあります。

リンク先ウェブサーバ

ローカル（作成PC）


リンク元ウェブサーバ

リンク先のURL

URLで指定＝絶対参照なので、

リンク元のファイルがどこにあっても気にすることなし


授業のページindex.html


授業のページIndex.html

54

解説

27

外部リンク

• この演習では番号つきリスト段落おわり</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属性（開き方）終了タグ


リンクと参照：開き方

• target指定<p>

説明は本日の<a href=“2017Info-1214_web.pdf” target=“_self”>投影資料</a>にあります。

</p>

<p>

詳細は

<a href=“http://web.flet.keio.ac.jp/~yukiko/kiso-joho2017/”target=“_blank”>授業のページ</a>にあります。

</p>

56

解説

一般的な指定：内部リンクでは現在のウィンドウ外部リンクでは新規のウィンドウ

28

ブラウザで表示とリンクを確認

57

index.html 演習IE

リンク先が開かない!

• ファイル名やアドレスに間違いがないか

• HTMLのタグや記述の記号に抜けや不要なものがないか

• 内部リンクの場合、指定のフォルダにファイルが存在しているか

演習サンプル2

58

map.html 解説

29

• 「マイドキュメント」>web_practiceの下で右クリック＞新規作成＞テキストドキュメント

map.htmlの準備

59

演習TeraPad

• ファイル名を「map.html」に変更

• 「変更しますか？」に「はい」

map.htmlの準備

60

演習TeraPad

○map.html×map.html.txt

30

hiyoshi_campus.jpg+map.htmlの確認

61

演習TeraPad

アイコンがIEになっている

同じフォルダに

画像ファイルがある

必須タグ・メタデータ入力

<!doctype html>

<html>

<head>

<meta charset=“shift-jis”>

<title>案内地図</title>

</head>

<body>

</body>

</html> 62

map.html 演習TeraPad



31

画像リンク： <img>タグ

• 基本

<img src=“リンク先アドレス”>

• リンク先アドレスの種類

–内部リンク相対参照としてパス名・ファイル名

–外部リンク絶対参照としてURLを記載

63

解説

見出し入力・画像挿入

• imgタグで画像ファイルを指定する

<body>

<h2>案内地図</h2>

<img src=“hiyoshi_campus.jpg” alt=“案内地図” >

64

imgタグ src属性（ファイルパス） alt属性※

※画像ファイルを取得できない時、表示されるテキスト

map.html



演習TeraPad

32

内部リンク③

• 画像<img>タグの後に、map.htmlからIndex.htmlへ相対参照でリンク

<p>

<a href=“index.html” target=“_self”>「練習のページ」に戻る</a>

</p>

<a href=“ファイル名” target=“_self”>テキスト</a>

65aタグ 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>

66aタグ href属性（パス） target属性（開き方）終了タグ




33

ブラウザで表示とリンクを確認

67

演習IE

index.html

map.html

4.ウェブサイトの公開

68

34

• 以下のファイルを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

解説

コンテンツのアップロード

70

• ローカル→リモートへのファイルのコピー

演習WinSCP

Public_htmlフォルダを開く

35


71

• ローカル→リモートへのファイルのコピー

演習WinSCP

Public_htmlフォルダの中に4ファイルをドラッグしてコピー

• アップロード完了!


72

演習WinSCP

確認メッセージが出たら「OK」

36

• 同名ファイルをアップロードしようとすると…


73

演習WinSCP

上書き確認メッセージが出るのでよければ「はい」

• WinSCPの終了


74

演習WinSCP

① をクリック

②終了確認メッセージで「OK」をクリック

37

• 公開アドレスをブラウザに入れてみる

http://user.keio.ac.jp/~ユーザ名/

※ユーザ名はITC-PCの

ログイン名と同じ

※~はShift+「へ」（右上）

※index.htmlは

入れなくとも

自動表示される

公開ページ表示の確認

75

演習IE

5.ウェブページの作成：中級編

76

38

中級演習の準備

• 「酒井の授業ページ」で以下を参照– 「応用情報処理」科目一覧 2017-mita-oyojohoshori.pdf

–原色大辞典 http://www.colordic.org/

–ウェブサンプル3(index.html) web_sample3.jpg

77

演習

演習サンプル3

78

1) JavaScriptを使って更新日時を表示する

2)Tableタグを使って表を作成する

3)CSSを使ってスタイルを整える

index.html 解説

39

JavaScript

• Netscape Communications社が開発したプログラミング言語

• ウェブページで様々な機能を提供する

– フォームに入力した値をチェックする

–ゲームができる

–時刻を表示する★

• <script></script>タグで囲んで記述する

79

解説

JavaScript

• 見出しと平行線<hr>の間に、JavaScriptを挿入し、最終更新日時を表示

<h1 id="top">練習のページ</h1>

<script type=“text/javascript”>document.write('最終更新日時:' + document.lastModified);// </script>

<hr>

80




40


81

演習IE

index.html

※警告が出たら「ブロックされているコンテンツを許可」をクリック

テーブル

1行2列の表の場合

<table>

<tr>

<td>

</td>

<td> <td>2列 <tr>1行 <table>1表

</td>

</tr>

</table>

82

解説

tr= table rowth= table headtd= table data

41

テーブル

• 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>

</tr>

…

84


42

テーブル

• 行を確保する<tr></tr>を入力、<td></td>で科目名、開講学期、内容を各行に入力（2～8行目）

<tr>

<td>応用情報処理I</td>

<td>秋</td>

<td>テキスト処理</td>

</tr>

85



86

演習IE

index.html

枠の色を指定していないので、枠ナシでOK!

43

CSS （Cascading Style Sheet）

• スタイル記述言語≠HTML

• 記述場所

–タグの中 <p style=“color: “ff0000;”>

–HTML文書中★

–外部CSSファイル

↑複数ページで共有可のため主流

87

解説

CSS

• HTMLの<head></head>の中に<style></style>の枠を設けて記述する

<head>

<title>練習のページ</title>

<style>

</style>

</head>88


44

CSS

• タイトルの後に、背景色→見本の16進法で指定

<style>

body{

background-color: #ccffff;/*背景色*/

}

</style>

89

｛で開始、｝で終了


プロパティと値コメント

指定場所

CSS

• 見出し文字色→見本の16進法で指定

h1 {

color: #000080;/*見出し文字色*/

}

90


http://www.colordic.org/


45

CSS

• テーブル見出し→色は見本16進法で指定

table th {

background-color: #ffffff;/*表見出背景色*/

border: 1px solid #b0c4de;/*表見出し枠*/

font-weight: bold;/*表見出し文字太さ*/

}

91


CSS

• テーブルセル→色は見本16進法で指定

table td {

background-color: #ffffff;/*表背景色*/

border: 1px solid #b0c4de;/*表枠*/

}

</style>

92




46

ブラウザで確認

93

演習IE

基礎情報処理Ｉ（Ａ）第12-14回：

ウェブページ作成

2017-06-27,07-04,11酒井由紀子

慶應義塾大学文学部

Documents

基礎情報処理I（A） 第12-14回： ウェブページ作成user.keio.ac.jp/~ub274706/2017Info-1214_web.pdf•HTML（Hyper Text Markup Language ）ファイル –最低限必要なHTML言語で書かれたドキュメント

基礎情報処理I（A）第12-14回：ウェブページ作成user.keio.ac.jp/~ub274706/2017Info-1214_web.pdf•HTML（Hyper Text Markup Language ）ファイル –最低限必要なHTML言語で書かれたドキュメント