今日の授業内容と学習目標

講義＋実習：ウェブページの作成

表の作成と変更の作成が出来るようになる。
段落の表示位置の調整が出来るようになる（課題1）。
フォントの変更と装飾の追加が出来るようになる（課題1・3・4）。
背景に画像を挿入し、その画像のサイズの変更が出来るようになる（課題3）。
リストを作ることが出来るようになる（課題4）。
リンクの作成が出来るようになる（課題5）。
空白の行を入れることが出来るようになる（全課題）。

講義＋実習：ウェブページの公開

ウェブページの公開の仕組みを理解する。
FTPソフトを用いてウェブページをアップロード出来るようになる。

ウェブページの作成

ウェブページ閲覧の仕組み

ウェブページの作成

ウェブページは、htmlタグという【言語】で記述されている。
そのファイルを、【htmlファイル】という。これがウェブページの【設計図】のようなもの。
【htmlファイル】は、テキストエディタ（「メモ帳」など）で作成・編集する。
【htmlファイル】自体には文字しか書けないが、他の画像ファイルやウェブページを【参照】することが出来る。

ウェブページの作成の手順

テキストエディタ（メモ帳かTeraPad）でタグを使用してHTML文書を記述する。
作成したファイルを任意のフォルダに保存する。保存ウィンドウの【ファイルの種類】は【すべてのファイル】にすること。
拡張子としてファイル名のあとに「.html」を加える。
あとで修正する時のために、ここでメモ帳は閉じない方が良い。
保存したHTMLファイルをダブルクリックし、ウェブブラウザ（GoogleChrome）で確認する。
変更、修正点があれば、
①開いたままのメモ帳を再度編集する。
②ブラウザの【表示】→【ソース】からHTMLファイルをメモ帳で開いて編集する。
③メモ帳を開いて【ファイル】→【開く】から編集したいファイルを探す。
メモ帳で【上書き保存】して、ブラウザで【再読込み】（ショートカットだと【ctrl+r】）をする。

ウェブページ作成上の注意点(1)：ファイル名と拡張子

ウェブページ作成に関連するファイル名はすべて半角英数字で記述すること。
大文字と小文字は区別されるので注意する。例えば、「index.html」と「Index.html」は違うファイルとして扱われる。
HTMLファイルは必ず「.html」という拡張子をつけること。画像ファイルは「.jpg」、「.gif」となる（画像ファイルの拡張子が大文字になる場合があるので要注意）。
HTMLタグは半角英数字で記入すること。大文字小文字の区別はない。

ウェブページ作成上の注意点(2)：拡張子の表示方法

【コントロールパネル】→【デスクトップのカスタマイズ】→【フォルダーオプション】→【表示】→【「登録されていない拡張子は表示しない」】のチェックを外す。
このようにしておかないと、拡張子の種類が分からないので、画像の挿入時などにトラブルのもととなる。

ウェブページの基本構造

すべてのHTMLファイルは以下の基本タグを記述する必要がある。

ほとんど全てのhtmlタグは、始まりと終わりがある。
htmlタグの始まりと終わりの間に、文章を書いたり画像・他のウェブページへのリンクなどの情報を書き込む。

練習1：基本的なウェブページの作成

「基礎情報処理」フォルダの中に「web」という名前のフォルダを作り、これ以降扱うファイルは全てそこに入れること。
TeraPadを起動し、下記の太枠内のhtmlタグをコピーして、簡単なウェブページを作る。
保存の際に、ファイル名は半角英数で「test.html」とすること。
保存の際に、ファイルの種類は「すべてのファイル」とすること。
タイトル（～～の部分）と本文（・・・の部分）に何か書くこと（日本語で大丈夫）。
タイトルタグに挟まれた部分に書いた文字はどこに表示されるを確認すること。

<HTML>
<HEAD>
<TITLE>～～</TITLE>
</HEAD>

<BODY>
・・・
</BODY>
</HTML>

編集途中でファイルを閉じてしまったら

テキストエディタ（メモ帳かTeraPad）を起動する。
【ファイル】→【開く】で編集対象のファイルを選ぶ（あるいは、テキストエディタにドラッグ＆ドロップ）。
ダブルクリックして開こうとしても、編集は出来ない。

練習2：表の作成

「test.html」ファイルを開いて、以下の表を挿入する。bodyタグの開始から終了までの間に入れること。
どのように見えるかを確認する。
trが行（横方向）、tdが列（縦方向）の区切りを決めていることを確認する。

表の基本構成
<TABLE> <TR><TD>1</TD><TD>2</TD></TR> <TR><TD>3</TD><TD>4</TD></TR> </TABLE>

htmlタグによるウェブページの作成

目的：3つのhtmlファイルを作ることと2つのファイルをダウンロードすることで、タグの扱い方を習得する。

留意点

随時、ホームページ作成Tips を参照すること。
作業前に、拡張子を表示させる設定にしておくこと
- 【コントロールパネル】→【デスクトップのカスタマイズ】→【フォルダーオプション】→【表示】→【「登録されていない拡張子は表示しない」】のチェックを外す。
- このようにしておかないと、拡張子の種類が分からないので、画像の挿入時などにトラブルのもととなる。
作業中は、メモ帳かterapadで上書きをし【ctrl+s】、ブラウザで再読み込み【ctrl+r】をし、思い通りの表示なっているかを随時確認・修正しながら進めるとよい。
作業中は、メモ帳やterapadは閉じないほうがいいでしょう。たいていの場合、ブラウザで見た後で修正の必要が出る。
閉じてしまった場合、メモ帳かterapadを開き、【ファイル】→【開く】とたどり、開きたいファイルを探す。

「基礎情報処理」フォルダ内に「web」という名前のフォルダを作ってください。以下のファイルはすべてこのフォルダに保存します。

旧課題1：段落と文字装飾

ファイル名：「kadai1.html」
ファイルの種類：「すべてのファイル」〈以下同様〉
保存場所：「ドキュメント」内の「基礎情報処理」フォルダ内の「web」フォルダ
以下のような見栄えにすること。
- 【Pタグ】による段落の中央揃えと右端揃えを行うこと。
- 【bタグ】によって文字を太字にすること。
- 【iタグ】によって文字を斜体にすること。
- 【uタグ】によって文字に下線を引くこと。
- 【brタグ】によって改行を行うこと。
- 【hnタグ】によって見出しの大きさを変更すること。
- 【fontタグ】によってフォントの大きさを変更すること。
- 【fontタグ】によってフォントの色を変更すること。

タグはこちら。

「課題2」は欠番です。

旧課題3：画像の挿入とサイズの変更

ファイル名：「kadai3.html」
保存場所：「ドキュメント」内の「基礎情報処理」フォルダ内の「web」フォルダ
以下のような見栄えにすること。
- 【imgタグ】によって画像の大きさをピクセル単位で指定して変更すること。
- 【imgタグ】によって画像の周りに線を入れること。

画像はこちら。左のリンクを右クリックして【名前をつけて保存】を選択し、「基礎情報処理」フォルダ内の「web」フォルダに保存すること。

タグはこちら。

授業のウェブページのURLは、現在は「http://user.keio.ac.jp/~y-hama/」に変更されているのでこちらを入力するように。

課題1：リンク・背景色の設定

ファイル名：「index.html」
保存場所：「ドキュメント」内の「基礎情報処理」フォルダ内の「web」フォルダ
以下のような見栄えにすること。
- 課題2・課題3へのリンクがある。
- 【aタグ】によって「課題X」という文字をクリックすると、各課題のページに飛ぶようにすること。
- 【bodyタグ】によって背景色をつけること（以下の例と同じでなくともよい）。

課題2：リストとリンクと背景画像の設定

ファイル名：「kadai2.html」
保存場所：「ドキュメント」内の「基礎情報処理」フォルダ内の「web」フォルダ
以下のような見栄えにすること。
- 【imgタグ】によって背景に画像を挿入すること。
- 【ulタグ】と【olタグ】によってリストを挿入すること。
- リストを入れ子状に挿入すること。
- 【aタグ】によってリンクを挿入すること。

画像はこちら。左のリンクを右クリックして【名前をつけて保存】を選択し、「基礎情報処理」フォルダ内の「web」フォルダに保存すること。

課題3：表の作成

ファイル名：「test.html」
保存場所：「ドキュメント」内の「基礎情報処理」フォルダ内の「web」フォルダ
以下のような見栄えにすること。
- 高校の時間割表、架空の時間割表、何かの表を作成する。tableタグを使えるようになること。
- 実際の今の時間割表にしはないこと。

ウェブサイトの公開

アップロードの方法

決まり事

ファイル名は、半角英数であること（トップ.htmlはダメ。renshu.htmlはOK）。
トップページのファイル名は、「index.html」であること。
ウェブサーバ上にないものは、他人からは見られない。

概要

FTP（File Transfer Protcol）ソフトを使って、自分のフォルダからサーバ上の自分のフォルダに送る。
WinSCPというFTPソフト（無料）を用いて行う。
初期設定を正しく行えば、あとはドラッグ＆ドロップのみ。

初期設定の方法

WinSCPを起動する。
「新規」をクリックする。

空欄を埋める。ホスト名は「upload.user.keio.ac.jp」、「ユーザ名」と「パスワード」は、コンピュータにログインする際のものと同じ。uaなどで始まるITCアカウントのこと。keio.jpのではない。

入力できたら「保存」をクリックする。
警告が出たら「はい」を選択する。
うまくいけば以下のような画面になる。

左が自分の「ドキュメントフォルダ」などである。
右の「public_html」フォルダをダブルクリックして開く。ここが、一人一人が大学から与えられているウェブサーバ上のフォルダである。
ファイルを左側（ローカル）から右側（リモート）にドラッグ＆ドロップすることで、ウェブ上に公開される。

以下のファイルを全てアップすること（public_htmlの中にアップロードする）
- index.html
- kadai2.html
- test.html
- tora_01.jpg
- tora_02.jpg
自分のウェブページを確認しよう。
URLは、「http://user.keio.ac.jp/~ユーザ名/」です。「」内の語句を、検索するのではなく、URL欄に入れてenterキーを押す。「ユーザ名」は、uaなどで始まるITCアカウントのこと。keio.jpのではない。

最終課題：ウェブページ作成

以下の2つの課題のうちのどちらかを実施すること。単位取得には必須。他の課題での点数がいかに高くても、これを出さないと単位は取得できない。

1次課題：共通ウェブページ課題

課題1（目次っぽいもの）・2（ネコ）・3（表）を行い、そこで作成したhtmlファイルをウェブにアップロードすること。
背景色・文字色を自由に（ただし必ず）変えること。
ウェブ上から自分のウェブページが正しく閲覧できることを必ず確認すること（ブラウザを開き、URL入力欄に、「http:」で始まる自分のウェブサイトのURLを入力する。スマホでもよい。「z:\」で始まるURLは、自分のアカウントでログインしたときにしか見られないものなのでダメ。
K-LMSの第13回に紐づいている所定の提出場所に、「http:」で始まる自分のウェブページのURLを記入すること。「z:\」で始まるものなどは0点（提出したとみなさない->D確定）。
締め切りはK-LMS上で通知。

2次課題：オリジナルウェブページ課題

締切はK-LMS上で通知。締め切り日以降に教員がチェックし、訂正を求める場合もある。
ウェブ上から自分のウェブページが正しく閲覧できることを必ず確認すること（ブラウザを開き、URL入力欄に、「http:」で始まる自分のウェブページのURLを入力する。「z:\」で始まるURLは、自分のアカウントでログインしたときにしか見られないものなのでダメ。
K-LMSの第14回に紐づいている所定の提出場所に、「http:」で始まる自分のウェブページのURLを記入すること。「z:\」で始まるものなどは0点（提出したとみなさない->D確定）。
ウェブページ作成ソフト等を使わずに自分でhtmlタグを用いて作成したウェブページであること。
「なにかの魅力を紹介する」ウェブページであること。
「なにか」の概要や魅力が伝わるものであること。
トップページは、「index.html」というファイル名にすること。これをアップロードすると1次課題のトップページは上書きされるが、それでよい。この課題のhtmlファイル・画像ファイルは、1次課題のhtmlファイル・画像ファイルとは別のフォルダにおくことを推奨する。
トップページを含めて3ページ以上であること。
トップページから2ページ以降のページへのリンクや、2ページ目以降のページからトップページへのリンクを設定していること（aタグ）。
画像が2つ以上使用されていること（imgタグ）。
パワーポイントの課題と同じ対象を用いてもよいが、著作権・肖像権を侵さないように留意すること。芸能人・アーティスト・スポーツ選手の画像・マンガのスキャン画像、これらを模写した画像、スポーツチームのロゴ、出身高校や出身地の役所のウェブサイト上にある画像などは、著作権に触れるため、一切使用不可能。また、人物の写真は、当人の承諾の有無にかかわらず一切使用不可能。自分や家族も同様。

よくあるミス

画像を見せたいのに、サーバ上に画像ファイルがアップされていない。

画像を見せたいのに、html文書中の画像ファイル名が間違っている。

タグの綴りが間違っている（一文字のミスでも無理。大文字と小文字も区別される）。

トップページへ