1. ホームページ概要 (1) ホームページとは現在インターネット上では世界中で数億台以上のコンピュータが相互に接続されていますこのインターネットが爆発的に普及した最大の要因がホームページですホームページを作成閲覧するためにパソコンを購入する方が増えてきていますホームページの最大の特

Size: px

Start display at page:

Download "1. ホームページ概要 (1) ホームページとは現在インターネット上では世界中で数億台以上のコンピュータが相互に接続されていますこのインターネットが爆発的に普及した最大の要因がホームページですホームページを作成閲覧するためにパソコンを購入する方が増えてきていますホームページの最大の特"

たみじろうあさぶき
5 years ago
Views:

1 目次 1. ホームページ概要... 1 (1) ホームページとは... 1 (2) ホームページのサービス Web とは?... 1 (3) ホームページの住所アドレスとは?... 1 (4) ホームページを公開するとは?... 1 (5)FTP とは?... 2 (6) 教員用 Web サーバ (c-faculty) について準備するもの... 3 (1) ソフトウェア... 3 (2) アカウントパスワード... 3 (3) ホームページデータホームページの開設申請ホームページ作成時の注意点... 5 (1) 著作権に関して... 5 (2) メールアドレスの掲載に関してホームページの転送方法... 6 (1)WinSCP( フリーウェア Windows 用 )... 6 (2)Dreamweaver CS4(Adobe Systems 社製品 Windows/MAC 用 ) CGI について (1)CGI とは (2)CGI の仕組み (3) 準備するもの (4) アクセスカウンターの取り付け方法よくある質問 (1) パスワードに関して (2) ファイル作成に関して (3)c-faculty サーバへの接続に関して (4)CGI に関して付録 (1) ホームページのアクセス制限 (Basic 認証 ) (2) カラーテーブル一覧表問い合わせ先一覧... 31

2 1. ホームページ概要 (1) ホームページとは現在インターネット上では世界中で数億台以上のコンピュータが相互に接続されていますこのインターネットが爆発的に普及した最大の要因がホームページですホームページを作成閲覧するためにパソコンを購入する方が増えてきていますホームページの最大の特徴はハイパーリンク機能ですこれはホームページにテキスト画像音声映像などを貼り付けそれをクリックすることによってインターネットに接続されているどこのページにでもジャンプが可能であるという仕組みです (2) ホームページのサービス Web とは? Web とは World Wide Web( 世界中に広がったクモの巣の意味略称 WWW) のことで専用線で相互に接続された世界中のホームページサーバ (Web サーバ ) の集まりのことですホームページの実体はインターネットの Web サーバ上にあるシステム資源 ( レイアウト情報画像データ音声データ等 ) ですインターネットを通じてこのシステム資源にアクセスし Internet Explorer や Firefox などの Web ブラウザで読み込むことによってこのシステム資源をホームページとして閲覧することができます (3) ホームページの住所アドレスとは? ホームページの住所アドレスは URL(Uniform Resource Locater) といわれる表記法で一元管理されておりブラウザに URL を入力するとインターネット上のどんな情報にもアクセスすることができます例えばブラウザにと URL を入力すると中央大学のホームページを呼び出すというしくみになっていますまた教員用 Web サーバを使用してホームページを構築する場合トップページはアカウント名 /index.html 上記のアドレスになりますこのアドレスがわかっていれば世界中のコンピュータから情報を読み出すことができます (4) ホームページを公開するとは? ホームページのデータはまずは自分のパソコンのハードディスクの中に作成しますしかしこのままではまだ世界中に公開された状態にはなっていません作成したホームページのデータを Web サーバ (c-faculty サーバも Web サーバの一つです ) に転送 (=FTP) 1

3 すると Web サーバによってインターネットに接続された世界中のパソコンからページを閲覧できる状態になりますこれがホームページを公開した状態です (5)FTP とは? FTP とは File Transfer Protocol の略でインターネットでファイルを転送する手順のことですこの FTP の仕組みを利用しインターネット経由でファイルを他のコンピュータやサーバに転送することができます自分のコンピュータに FTP クライアントソフト ( 以下 FTP ソフトとします ) をインストールし相手のコンピュータ名 ( 今回の場合は Web サーバ名 ) やそのアカウントなどの情報を設定すればそのソフトを使ってサーバにファイルを転送することができます (6) 教員用 Web サーバ (c-faculty) について c-faculty とは多摩 IT センターで管理している教員用の Web サーバのことです中央大学に所属する専任教員の方であれば所定のお手続きを頂いた後にホームページを開設することができます研究室あるいはご自宅のコンピュータにホームページのデータを作成頂いて FTP ソフトで c-faculty 側に転送すればインターネットに接続されているコンピュータからホームページが閲覧できます c-faculty で使用できるサーバのスペースは 1 人あたり 2GB となっておりますまた日本語のファイル名はご使用になれませんので予めご了承下さい ( c-faculty URL: ) 2

4 2. 準備するものホームページを教員用 Web サーバ (c-faculty) に転送 ( アップロード ) するためには下記のものが必要になりますインターネットに接続できる環境以下に紹介するソフトウェア等教員用 Web サーバのアカウントホームページのコンテンツ (1) ソフトウェア Web ブラウザソフト Internet Explorer Firefox Safari など FTP ソフト FTP 機能を持つホームページ作成ソフト WinSCP( フリーソフト ) Adobe Dreamweaver CS4(Adobe Systems 社製品 ) ホームページビルダーシリーズ (IBM 社製品 ) など本書では Dreamweaver CS4 と WinSCP でのアップロード方法を説明していきます (2) アカウントパスワード教員用 Web サーバにデータを置いてインターネット上に公開するには Web サーバのアカウントとパスワードが必要になりますアカウントとパスワードの取得に関しては 3. ホームページの開設申請をご参照ください (3) ホームページデータ教員用 Web サーバ (c-faculty) にアップロードするためのホームページデータをご用意ください 3

5 3. ホームページの開設申請教員用 Web サーバ (c-faculty) でのホームページ開設には下記 URL で配布しております教員用個人ホームページ (c-faculty) 開設申請書 (PDF) に必要事項を記入し多摩 IT センターまでお持ちください手続きが終了した後ホームページ開設に必要な情報を記した用紙を別途お渡し致します申請書 URL: 太枠の中に必要事項を記入して多摩 IT センターにお渡し下さい 4

6 4. ホームページ作成時の注意点インターネットの世界では著作物の複製頒布が簡単にできてしまいます著作権侵害の起きやすい環境といわれていますのでホームページに掲載するデータは写真絵文章音楽等製作者の許可を得られない限りオリジナルのデータを使用しましょう (1) 著作権に関して他の人の著作物である文章を引用するとき著作物の引用は必要な範囲であることを条件に法律で認められています引用を行う際には引用であることが明確に解るように以下のことにご注意下さい 1 自分の著作物と引用する他人の著作物との間に一行開けるまたは行頭を下げるかぎかっこを付けるなど見た目に明確に両者を区別できるようにしましょう 2 自分の著作物が主で引用する他人の著作物が従であるようにします 3 引用には出所の明示が必要です引用を行ったページの分かるところに記しましょう * 国や地方公共団体が作成した報告書調査統計資料や広報資料は原則的には転載禁止の但し書きがなければホームページ上に転載し利用することが許可されています他の人の著作物である絵画のデータをページにはりつけるときホームページで著作物を公開することは法律上では作品を複製 ( 著作権法第 2 条第 15 号 ) し自動公衆送信 ( 著作権法第 2 条 1 項第 9 号の 4) することとなりますので他の人の著作物は著作権者の承諾無しにホームページに掲載することができません絵画の著作者 ( 描いた人 ) の没後 50 年であれば著作権が消滅していますこれを自ら写真に撮影しホームページに載せても問題ありませんそれが美術作品集のような出版物に掲載されたものであっても基本的には問題ありませんただその絵画の写真を撮影したのが有名な写真家であるなどの場合はその写真自体に著作権が発生する場合がありますのでご注意ください (2) メールアドレスの掲載に関してメールアドレスをホームページに記載してしまうとアドレスを収集するプログラムによって捕捉されスパムメールが大量配信される場合がありますメールアドレスの不正利用を防止するために極力不要なアドレス掲載は避けるようにしてくださいまた下記のような回避方法もありますのでご不明な点は多摩 IT センターまでお問い合わせくださいメールアドレスを全角などで表記するメールアドレスを画像化するメールアドレスの記載部分を暗号化する CGI によるメールフォームを使用するなど 5

jp/ ) ( Vector: http://www.vector.co.jp/ ) インストーラーを実行します ( この場合のバージョンは 5.13.

7 5. ホームページの転送方法各ソフトウェアを利用して教員用 Web サーバ (c-faculty) にホームページを転送する方法を紹介します (1)WinSCP( フリーウェア Windows 用 ) 窓の杜 Vector 等から WinSCP をダウンロードしインストールを実行します ( 窓の杜 : ) ( Vector: ) インストーラーを実行します ( この場合のバージョンはです ) 自動的にインストールを行うための画面が表示されますので最初の画面で許諾を選択し以降の画面はその都度次へボタンをクリックしインストールを進めていきます本手順書ではインターフェイスオプションの選択でコマンダーを選択した場合のファイル転送手順をご紹介します 6

8 インストール後 WinSCP を起動し左側メニューから新しいサイトを選択し必要事項を設定し保存をクリックします転送プロトコル : FTP 2 ホスト名 ( アドレス ): c-faculty.chuo-u.ac.jp 3 ポート番号 : 21 4 ユーザ名 : ユーザ名 5 パスワード : 空白 c-faculty サーバへ接続します保存したサイトを選択しログインボタンをクリックします 7

9 パスワード入力画面が表示されますパスワードをご入力ください右側のパネルにサーバ上のディレクトリ内容が表示されれば接続完了です 8

10 ファイルを転送するには左側のローカルパネルからファイルを選択しアップロードボタンを選択します左側のサーバ側パネルにアップロードしたファイルがコピーされますまたファイルのアップロードはマウス操作のドラッグ & ドロップでも可能ですこれで転送は完了です Internet Explorer などのブラウザで転送したホームページが正常に表示されることを確認して下さい 9

11 .htaccess( 隠しファイル ) の表示設定 WinSCP は初期設定では.htaccess などの隠しファイルが非表示になっているため下記設定で表示させるようにします WinSCP を起動しツール環境設定をクリックします環境設定画面からパネルを選択し隠しファイルを表示するにチェックを入れ OK をクリックします設定は以上です 10

12 (2)Dreamweaver CS4(Adobe Systems 社製品 Windows/MAC 用 ) c-faculty サーバへの接続設定を追加していきますファイルパネルのサイト管理をクリックするかサイトサイトの管理をクリックします 11

13 2 新規作成サイトをクリックします c-faculty アカウント登録通知書を基にローカル情報を入力します 1 サイト名 : 中央大学 ( 任意の名前 ) 2 ローカルルートフォルダ : ご自身の PC での任意のフォルダ 3 初期設定イメージフォルダ : ご自身の PC での任意のフォルダ 4 HTTP アドレス : アカウント名 12

14 次にリモート情報を入力します 1 FTP ホスト : c-faculty.chuo-u.ac.jp 2 ログイン : アカウント名 3 パスワード : パスワードローカル情報リモート情報を入力し最後に OK をクリックします 13

15 ホームページを作成しファイルを保存します保存場所はローカル情報に入力したローカルルートフォルダを指定します ( ファイル名は任意ですがホームページのトップページにする場合は index.html と入力して下さい ) 6 ホームページ用のファイルが完成したら c-faculty に転送しますサイト PUT をクリックするとファイルが c-faculty 側に転送されます 14

16 またはファイルパネルのファイルリモートビューをクリックします下側の画面が c-faculty サーバ側 ( リモートサイト ) になりますファイルを PUT するボタンか全ての情報を同期させる場合は同期ボタンをクリックして下さい詳しくは Adobe Dreamweaver CS4 のヘルプをご参照ください 15

を利用したホームページとの違いを下図に示します通常のホームページの閲覧 CGI を使ったページの閲覧 HTML ファイルを閲覧する場合は

17 6. CGI について (1)CGI とは Common Gateway Interface の頭文字を取った略称で Web 上で自動処理を実現するための仕組みです CGI を使用し掲示板やアクセスカウンターなどをホームページ上に設置することができるようになります (2)CGI の仕組み普通の HTML ファイルのみのホームページと CGI を利用したホームページとの違いを下図に示します通常のホームページの閲覧 CGI を使ったページの閲覧 HTML ファイルを閲覧する場合はブラウザから閲覧する命令を送ると該当するファイルをサーバの中から探して折り返し送信します CGI の場合はブラウザから閲覧する命令が下されると Web サーバに置いた CGI プログラムがその都度ページ (HTML ファイル ) を生成し生成されたページを折り返しブラウザに送信します 16

18 (3) 準備するもの c-faculty 上で CGI サービスを利用するためには 2 通りの方法があります c-faculty で提供しているアクセスカウンターサービスを使うこの場合には特別な準備は必要ありません CGI を自分で設置するこの場合には CGI のプログラムファイルのパーミッションを変更することが可能な FTP ソフト上記のものをあらかじめ用意しておく必要がありますパーミッションとはアップロードしたファイルのアクセス権限のことです CGI プログラムをアップロードした後にファイルのパーミッションの変更を行うことで CGI プログラムが動作するようになりますパーミッションを変更することが可能な FTP ソフトとしては WINSCP(Windows 用フリーソフト ) Adobe Dreamweaver 等のファイル転送などが挙げられます 17

19 (4) アクセスカウンターの取り付け方法 c-faculty サーバにはユーザー全員が使用できるアクセスカウンターのプログラムが予めインストールしてありますアクセスカウンターを取り付けたいページにタグを1つ書き加えて頂くだけでアクセスカウンターを使用することができます ( このサービスは内のページのみ使用できます ) 1 カウンターを表示させてみるカウンターを設置したいページの任意の場所に <img src="/cgi-bin/count.cgi?df= アカウント名 "> と書き加えるとと表示されます ( カウント数は 1 から始まります ) このタグに様々なオプションを書き加えていくことでカウンターをカスタマイズすることができます 2 カウンターの文字スタイルを変えるカウンターの文字スタイルを変更するパラメーターは "dd=x" です文字スタイルはアルファベットのA~Eまでの全 5 種類で指定しアカウント名の後ろに & で繋いでいきます (x には使用するスタイルのアルファベットを記入します ) 記述方法 <img src="/cgi-bin/count.cgi?df= アカウント名 &dd=x"> 設置例 <img src="/cgi-bin/count.cgi?df= アカウント名 &dd=a"> <img src="/cgi-bin/count.cgi?df= アカウント名 &dd=b"> <img src="/cgi-bin/count.cgi?df= アカウント名 &dd=c"> <img src="/cgi-bin/count.cgi?df= アカウント名 &dd=d"> <img src="/cgi-bin/count.cgi?df= アカウント名 &dd=e"> 18

20 3 フレームのアレンジをするフレームの太さを変更するパラメーターは "ft=x" ですフレームの色を変更するパラメーターは "frgb=color" ですスタイル同様アカウント名の後ろに & で繋いで設定します (x には数字を入力します Color には指定する色を文字で入力します ) 記述方法 <img src="/cgi-bin/count.cgi?df= アカウント名 &ft=x&ftgb=color"> 設置例 <img src="/cgi-bin/count.cgi?df= アカウント名 &ft=10&frgb=red"> フレームの色は全部で 650 色です色の名称はこのマニュアルのカラーテーブル一覧表を参照して下さい 4 カウンターの文字をカンマで区切るカウンターの値をカンマ区切りで表示するパラメーターは "comma=t" ですアカウント名の後ろに & で繋いで設定します設置例 <img src="/cgi-bin/count.cgi?df= アカウント名 &comma=t"> 5 カウンターの文字色を変える元々の文字色を指定するパラメーターは "srgb=color" です変更したい文字色を指定するパラメーターは "prgb=color" ですアカウント名の後ろに & で繋いで設定します (color には指定する色を文字で入力します ) 記述方法 <img src="/cgi-bin/count.cgi?df= アカウント名 &srgb=color&prgb=color"> 設置例 <img src="/cgi-bin/count.cgi?df= アカウント名 &srgb=green&prgb=red"> 使用出来る色は全部で 650 色です色の名称はこのマニュアルのカラーテーブル一覧表を参照して下さい 19

21 6 カウンターの文字盤の中を反転色にするカウンターの文字盤の中の色を反転色にするパラメーターは "negate=t" ですアカウント名の後ろに & で繋ぎます設置例 <img src="/cgi-bin/count.cgi?df= アカウント名 &negate=t"> 7 カウンターの文字盤の中を透過させる元々の文字色を指定するパラメーターは "tr=t" です変更後の文字色を指定する為のパラメーターは "trgb=color" ですアカウント名の後ろに & で繋ぎます (color には指定する色を文字で入力します ) 記述方法 <img src="/cgi-bin/count.cgi?df= アカウント名 &tr=t&trgb=color"> 設置例 <img src="/cgi-bin/count.cgi?df= アカウント名 &tr=t&trgb=black"> 使用出来る色は全部で 650 色です色の名称はこのマニュアルのカラーテーブル一覧表を参照して下さい 8 カウンターの桁数を指定するカウンターの表示桁数を変更するパラメーターは "md=number" ですアカウント名の後ろに & で繋ぎます (number には指定する桁数を数字で入力します ) 記述方法 <img src="/cgi-bin/count.cgi?df= アカウント名 &md=number"> 設置例 <img src="/cgi-bin/count.cgi?df= アカウント名 &md=8"> 20

22 9 カウンターを時計年月日で表示するカウンターの display パラメータに clock か date を指定することにより時刻や日付を表示することができます各パラメーターは以下の通りです時刻の表示"display=clock" 日付の表示"display=date" 時刻を 24 時間表示にする "tformat=24" 時刻を GMT 表示 ( グリニッジ標準時 ) にする "timezone=gmt+0000" 年月日を日本式表示にする"dformat=YYMMDD" 設置例 <img src="/cgi-bin/count.cgi?display=clock"> <img src="/cgi-bin/count.cgi?display=date"> <img src="/cgi-bin/count.cgi?display=clock&tformat=24"> <img src="/cgi-bin/count.cgi?display=clock&timezone=gmt+0000"> <img src="/cgi-bin/count.cgi?display=date&dformat=yymmdd"> 10 カウンターのゼロサプレイスカウンターの 0( ゼロ ) をサプレイスして表示させる事が出来ますパラメーターは "pad=f" ですアカウント名の後ろに & で繋ぎます ( ゼロサプレイスとは先頭の [0] を削除する又は空白で置き換えるという意味です例えば [000105] は [105] として表示されます ) 設置例 <img src="/cgi-bin/count.cgi?df= アカウント名 &pad=f"> 11 カウンターの文字を回転させるカウンターの表示画像を回転させるかどうかを設定するパラメーターは rotate=t です角度を指定するパラメーターは "degree=x" ですアカウント名の後ろに & で繋ぎます角度はの 4 つが使用出来ます通常は時計回りに指定しますが rotate だけの指定の場合には逆回りの 90 度となります ( x には角度を数字で入力します ) 記述方法 <img src="/cgi-bin/count.cgi?df= アカウント名 &rotate=t&degree=x"> 設置例 <img src="/cgi-bin/count.cgi?df= アカウント名 &degrees=90"> 21

23 12 カウンターの初期値を指定するカウンターの初期値を指定する事が出来ますパラメーターは "st=n" です (N にはスタートする数字を入力する事も出来ます ) ファイル名の重複を防ぐ為に"df= アカウント名 _ ファイル名 " というパラメーターを同時に使用する事が出来ます df には /usr/local/etc/count/data/file-name という形で置かれるファイル名を書く事が出来ますさらに詳しくは次の13で説明します記述方法 <img src="/cgi-bin/count.cgi?st=n&df= アカウント名 _ ファイル名 "> 設置例 <img src="/cgi-bin/count.cgi?st=1000&df=sample_001"> 13 カウンターを複数表示するカウンターを複数表示する事が出来ますページ毎にカウンターを別で設置したい場合等にこれを使用しますここで使用するパラメーターは上 12でも出てきた "df= アカウント名 _ ファイル名 " です ( ファイル名には任意の文字 ( ピリオドを含む ) 新しいファイル名を指定しますアカウント名は必ず入力して下さい ) 記述方法 <img src="/cgi-bin/count.cgi?df= アカウント名 _ ファイル名 "> 設置例 1 ページ目 <img src="/cgi-bin/count.cgi?df=sample_001"> 設置例 2 ページ目 <img src="/cgi-bin/count.cgi?df=sample_002&srgb=green&prgb=pink"> 22

24 7 よくある質問 (1) パスワードに関してパスワードを変更したい初期パスワードは変更できますか? 下記 URL のパスワード変更ページから手順に従って変更して下さい ( URL: ) パスワードを忘れてしまいましたパスワードの再発行で対応いたします下記 URL からパスワード再発行申請書をダウンロードし多摩 IT センターまで申請して下さい ( 即日発行 ) ( 申請書 URL: ) (2) ファイル作成に関して c-faculty で使用できる容量はどれぐらいですか? 1 人あたり 2GB まで用意しておりますホームページデータのファイル名に制限はありますか? c-faculty サーバでは日本語のファイル名を認識することができません日本語のファイル名は使用せず半角英数字のファイル名を使用して下さいさらに大文字と小文字を区別しますので全てのファイル名を小文字に統一するほうが確実です自分のコンピュータ上では見えている画像がホームページにアップロードすると見えなくなる場合はまずファイル名を確かめてください (3)c-faculty サーバへの接続に関してアカウントやパスワードを設定して接続しようとしましたがエラーが出て接続できませんよくある原因として考えられるのは FTP ソフトの初期設定ホスト名ユーザー名パスワードの入力に間違いがあることです念のためピリオド大文字小文字の区別等に気を付けて設定項目が正確に入力されていることを確認してください (* なおはホスト名には含まれませんホスト名の欄には c-faculty.chuo-u.ac.jp と入力してください ) 23

25 PPP 接続でのアップロードは可能ですか? ダイヤルアップ接続の設定をしていただければ PPP 接続でもアップロード可能です TELNET は使用できますか? c-faculty ではセキュリティを確保するために TELNET は利用できないようにしてありますアップロード後ページが正しく表示されません以下のような原因が考えられます今一度ご確認下さい該当するファイル ( 画像 /HTML ファイル ) がサーバに正常転送されているかどうか URL 入力の際ファイル名フォルダ名を打ち間違えていないか日本語ファイル名を使っていないか ( 日本語のファイル名は使用できません ) 大文字 / 小文字は間違っていないか新しいコンテンツを転送したのに前の内容のまま訂正されていませんお使いのブラウザでリロードまたはページの更新を実行して下さい教員用個人ホームページ開設完了通知書に記入してある URL にアクセスしましたが Forbidden と表示されてしまいますデータをアップロードするとき index.html あるいは index.htm というファイルを置いていただければ Forbidden と表示されることはありません index.html でないファイルを転送した場合はユーザー名 / の後ろに転送されたファイル名を追加して Web ブラウザで閲覧してみてください (4)CGI に関して各 CGI ソフトウェアのパスを教えて下さい下記の通りになっております詳細は多摩 IT センターまでお問い合わせください perl /usr/bin/perl php /usr/bin/php nkf /usr/bin/nkf uuencode /usr/bin/uuencode sendmail /usr/lib/sendmail CGI が正常に動作しません下記の点についてもう一度確認して下さいファイルのパーミッションは正しく設定されているかファイルの名前 CGI のパスは正しく設定されているか CGI ファイルはアスキーモードで転送されているか (FTP ソフトの設定をご確認ください ) 24

26 8. 付録 (1) ホームページのアクセス制限 (Basic 認証 ) ホームページを特定の人にのみ閲覧させたい場合 Basic 認証という仕組みを利用してアクセス制限をすることができます本書ではパスワードを使った Basic 認証を紹介していきます 1.htaccess の作成メモ帳などのテキストエディタで作成します Windows の場合. ( ドット ) で始まるファイル名は使用できないため htaccess.txt のような別名で保存しアップロード後にファイル名を変更してください.htaccess 記入例 AuthUserFile フルパス /.htpasswd AuthGroupFile /dev/null AuthName "Input ID and Password." AuthType Basic require valid-user * 3 行目の AuthName "Input ID and Password." は入力画面に表示される文字です ( ダブルクオート ) 間に任意で設定してください * フルパスに関しては多摩 IT センターまでお問い合わせください 2.htpasswd の作成メモ帳などのテキストエディタで作成します.htaccess 同様ファイル名は htpasswd.txt のような別名で保存しアップロード後にファイル名を変更してください hpasswd にはログイン用のユーザー名とパスワードを入力します.htpasswd 記入例 user1:fetazs2ywe user2:sn4q7dldsdfczu user3:fxjpxoesfyuws パスワードは暗号化する必要があります下記 URL を参考に暗号化して下さい

27 3 ファイルの作成が完了したらサーバにアップロードしますこの時ファイルのパーミッションは 604 に設定してください WINSCP を使用した場合の例ファイルを選択した状態でコマンド属性変更をクリックします現在の属性を 604 に設定し OK をクリックします 26

にてファイル名の先頭が.( ドット ) の場合に当該ファイルが参照できない場合は以下の操作をお試しください 1.WINSCP を立ち上げ [ 接続 (F)] から [ ホストの設定 ] をクリックします 2.

28 4 ホームページにアクセスし下記のような画面が出れば成功です.htpasswd で設定したユーザー名とパスワードを入力して下さい InternetExplorer の場合 Firefox の場合ご不明な点は多摩 IT センターまでお問い合わせください WINSCP にてファイル名の先頭が.( ドット ) の場合に当該ファイルが参照できない場合は以下の操作をお試しください 1.WINSCP を立ち上げ [ 接続 (F)] から [ ホストの設定 ] をクリックします 2. ホスト一覧から c-faculty( 中央大学 ) を選択し設定変更をクリックします 3. ホストの設定画面から [ 高度 ] タブを選択し [LIST コマンドでファイル一覧を取得 ] のチェックを外します 4.[OK] をクリックします上記の操作を行って頂きましたのちに c-faculty( 中央大学 ) へ接続して頂き. のついたファイルが表示されるかをご確認ください 27

29 (2) カラーテーブル一覧表 HTML では 16 進表記の他にカラーネームで色を指定することができます ( 使用 OS やディスプレイブラウザによって色味が異なったり正しく表示されない場合もあります ) aliceblue #F0F8FF lightgreen #90EE90 antiquewhite #FAEBD7 lightgrey #D3D3D3 aqua #00FFFF lightpink #FFB6C1 aquamarine #7FFFD4 lightsalmon #FFA07A azure #F0FFFF lightseagreen #20B2AA beige #F5F5DC lightskyblue #87CEFA bisque #FFE4C4 lightslategray # black # lightsteelblue #B0C4DE blanchedalmond #FFEBCD lightyellow #FFFFE0 blue #0000FF lime #00FF00 blueviolet #8A2BE2 limegreen #32CD32 brass #B5A642 linen #FAF0E6 brown #A52A2A magenta #FF00FF burlywood #DEB887 maroon # cadetblue #5F9EA0 mediumaquamarine #66CDAA chartreuse #7FFF00 mediumblue #0000CD chocolate #D2691E mediumorchid #BA55D3 coolcopper #D98719 mediumpurple #9370DB copper #BF00DF mediumseagreen #3CB371 coral #FF7F50 mediumslateblue #7B68EE cornflower #BFEFDF mediumspringgreen #00FA9A cornflowerblue #6495ED mediumturquoise #48D1CC cornsilk #FFF8DC mediumvioletred #C71585 crimson #DC143C midnightblue # cyan #00FFFF mintcream #F5FFFA darkblue #00008B mistyrose #FFE4E1 darkbrown #DA0B00 moccasin #FFE4B5 darkcyan #008B8B navajowhite #FFDEAD 28

30 darkgoldenrod #B8860B navy # darkgray #A9A9A9 oldlace #FDF5E6 darkgreen # olive # darkkhaki #BDB76B olivedrab #6B8E23 darkmagenta #8B008B orange #FFA500 darkolivegreen #556B2F orangered #FF4500 darkorange #FF8C00 orchid #DA70D6 darkorchid #9932CC palegoldenrod #EEE8AA darkred #8B0000 palegreen #98FB98 darksalmon #E9967A paleturquoise #AFEEEE darkseagreen #8FBC8F palevioletred #DB7093 darkslateblue #483D8B papayawhip #FFEFD5 darkslategray #2F4F4F peachpuff #FFDAB9 darkturquoise #00CED1 peru #CD853F darkviolet #9400D3 pink #FFC0CB deeppink #FF1493 plum #DDA0DD deepskyblue #00BFFF powderblue #B0E0E6 dimgray # purple # dodgerblue #1E90FF red #FF0000 feldsper #FED0E0 richblue #0CB0E0 firebrick #B22222 rosybrown #BC8F8F floralwhite #FFFAF0 royalblue #4169E1 forestgreen #228B22 saddlebrown #8B4513 fuchsia #FF00FF salmon #FA8072 gainsboro #DCDCDC sandybrown #F4A460 ghostwhite #F8F8FF seagreen #2E8B57 gold #FFD700 seashell #FFF5EE goldenrod #DAA520 sienna #A0522D gray # silver #C0C0C0 green # skyblue #87CEEB Greenyellow #ADFF2F slateblue #6A5ACD Honeydew #F0FFF0 slategray # Hotpink #FF69B4 snow #FFFAFA Indianred #CD5C5C springgreen #00FF7F Indigo #4B0082 steelblue #4682B4 Ivory #FFFFF0 tan #D2B48C 29

31 Khaki #F0E68C teal # Lavender #E6E6FA thistle #D8BFD8 Lavenderblush #FFF0F5 tomato #FF6347 Lawngreen #7CFC00 turquoise #40E0D0 Lemonchiffon #FFFACD violet #EE82EE Lightblue #ADD8E6 wheat #F5DEB3 Lightcoral #F08080 white #FFFFFF Lightcyan #E0FFFF whitesmoke #F5F5F5 lightgoldenrodyellow #FAFAD2 yellow #FFFF00 yellowgreen #9ACD32 30

32 9. 問い合わせ先一覧 Q&A をご覧になっても解決できない問題が発生した場合は下記連絡先までお問い合わせください多摩 IT センターサポートデスク ( 研究者の情報研究利用支援 ) 2205 号室 ( 内線 :2740) 窓口対応時間月 ~ 土 09:00~17:00 toiawase@tamacc.chuo-u.ac.jp 学年暦その他の都合で窓口時間を変更する場合があります多摩 IT センター HP でご確認ください利用者以外の方からの電話でのお問い合わせにはお答えできない場合があります多摩 IT センター事務室 ( 各種相談対応 ) 2206 号室 ( 内線 :2743) 各 URL 一覧多摩 IT センター HP c-faculty 申請書一覧 31

まずは以下の文章をテキストエディタで作成してみましょうテキストエディタの使用方法は別紙のテキストエディタ (gedit) の使用方法についてを参考にしてくださいホームページ作成の練習ファイル名を index.html として保存ができましたらサーバーにアップロードしますアップロード方法

まずは以下の文章をテキストエディタで作成してみましょうテキストエディタの使用方法は別紙のテキストエディタ (gedit) の使用方法についてを参考にしてくださいホームページ作成の練習ファイル名を index.html として保存ができましたらサーバーにアップロードしますアップロード方法ホームページを作成しよう! 1. 最初に最近ですと皆さんもインターネットを利用する機会も増えてきているかと思いますが本日は情報を与える側の立場に立ってもらいホームページを作成するための HTML 形式と呼ばれるファイルの作成方法を学んでもらおうと思います HTML とはタグと呼ばれるキーワードを文章中に入れることで様々な文章スタイルを表現することができる言語です HTML ファイルを作成するときは