オリエンテーション

Size: px

Start display at page:

Download "オリエンテーション"

たしろうまるこ
4 years ago
Views:

1 課題 14 ホームページを作る ( 基礎 ) 1. WWW の仕組みと HTML ファイル (1) WWW( World Wide Web) の仕組みと基礎用語通常 Web ページを閲覧する際には,Web ブラウザと呼ばれるアプリケーションを使用し, 閲覧したい HTML 1 ファイルの送信を, そのファイルを持つ Web サーバ (WWW サーバ ) に依頼する ( 図 11) Web サーバは, 依頼元に該当するファイルを送信し ( 図 12),Web ブラウザは受信したファイルの HTML タグを解析して表示する ( 図 13) ブラウザとサーバのやりとりは, HTTP 2 というプロトコル ( 通信の決まりごと ) を用いて行われる場合が多いどういうプロトコルを用いて, どこの Web サーバに, どのファイルの送信を依頼するかは,URL(Uniform Resource Locator) と呼ばれる書式を用いて指定するこれは, ブラウザの ( アドレスとか場所という欄に記述する例えば, 麗澤大学において taro というログイン名 ( ユーザ ID) を有する学生が作成したトップページ ( 通常,index.html というファイル名を使用する 3 ) の URL は, 図 2 のように表記されるプロトコルと Web サーバ名 ( ドメイン名 ) の間は ( :// ( コロン, スラッシュ, スラッシュ ) で区切る Web サーバ名とディレクトリ名, ディレクトリとファイル名の間は ( / で区切るドメイン名とは, インターネット上でのマシンやサービス提供者を一意に識別するもので, 学生が使用するマシンには u.ac.jp という名前が付与されているなお,( ~ taro という表記は, 本学の Web サーバの設定によって, taro さんのホームディレクトリの下にある,www というディレクトリを指している ~ taro の ~ はチルダと読む (2) Web ページの外部公開制限について Web ページを作成した場合, 通常はインターネットからそのページにアクセスできるようになるしかし, 本学では, 授業で作成する Web ページは学外非公開となっている学外に公開する場合は, 申請が必要である (3) HTML とは HTML とは,Hyper Text Markup Language のことであるハイパーテキスト ( Hyper Text) とは, 文書間にリンクを張り, リンク先にジャンプすることができる文書を示すまた, マークアップ言語 ( Markup Language) とは, 文書を修飾 ( 色をつける罫線を引くなど ) したり, 構造を表現 ( タイトルや段落の指定 ) したりするための言語を示す Web ページを構成する HTML は, これら 2 つの機能を併せ持つものである HTML ファイルに用いる文字には, ブラウザ上に表示する文字と, それらの表示方法等を指定する文字 ( タグ, < > で囲まれた命令文字列 ) があるこのタグを使用して, 画像等の取込みや文書間のリンクを指定する図 1 WWW の動作の仕組み図 2 URL の構成 (Uniform Resource Locator) 1 HTML: Hyper Text Markup Language 2 HTTP: Hyper Text Transfer Protocol 3 index.html というファイル名は省略可能である一般的に,URL の最後をディレクトリ名で終了した場合には,index.html, 又は, index.htm などが自動的に補填される ( サーバの設定に依存する ) 1

2 2. ホームページを作る ( 練習 ) ステップ 1 www ディレクトリを作る (1) 準備として, ホームページに関連するファイルを収納するための www ディレクトリを個人領域 (X:) に作成する次のようにする (2) ファイルエクスプローラを起動する左のリソース一覧表で個人領域 (X:) を見つける X: を右クリックメニュー新規作成フォルダー新しいフォルダー名称を www とする ( 必ず半角小文字 ) (3) 名称を再編集するとき F2 キー ( 編集キー ) をたたく (4) ファイルエクスプローラは, そのままにしておくステップ 2 トップページを作る index.html (1) トップページは常に index.html という名称であるここではテキストエディタ EmEditor を使って作成する以下, ひな形の教材を使って HTML 文書の書き方を学んでいこう (2) スタートボタン EmEditor を選択 EmEditor が起動するファイル新規作成 HTML を選択する HTML の編集画面になるデフォルトの HTML 文が表示されたら全部削除する (3) 授業のホームページの第 14 回のホームページ教材を開くトップページのひな形教材 1 がある範囲選択コピー (Ctrl+C) (5) HTML 文書を構成する基本要素のタグタグ説明 <!DOCTYPE> HTML ドキュメントを宣言する <html>~ </html> <head>~ </head> <body>~ </body> (5) <head> で設定するタグ <meta> <title>~ </title> HTML ドキュメントの始まりと終わりを表す各種設定の始まりと終わりを表すブラウザに表示されない例 :CSS,Javascript Web 本文の始まりと終わりを表すブラウザに表示される文章や画像などいろいろな設定をするメタタグここでは Web 本文の文字コード utf-8 を指定ブラウザのタブに表示される Web ページのタイトル (6) <body> で文章のレベル等を指定するタグ <h1>~</h1> レベル 1 の見出し最も大きい太字 <h2>~</h2> レベル 2 の見出し次に大きい太字 <p>~</p> 段落の始まりと終わりを表すタグ <br> <hr> 改行を行うタグラインを表示するタグ (7) ファイル名前をつけて保存保存する場所 X: www ファイルの種類 HTML ファイル名 index.html 必ず半角小文字エンコード UTF-8(BOM 無し ) 保存 (8) index.html は開いたままにしておく (9) 次に IE を起動するファイル開く X: www index.html を見つけて開くいま作ったホームページが表示される EmEditor に貼り付け (Ctrl+V) (4) HTML 文書は下記のような構成になっている < > をタグという文書の構成や表示方法を決める要素 web ページには表示されない英字, 数字, 記号, 空白はすべて半角文字 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title> 私の自己紹介 </title> </head> <body> <h1>web デザイナーを目指して </h1> <hr> <h2> 出身地 </h2> <p> 北陸の金沢ですふるい城下町です京都のようなイケズではないです </p> <h2> 将来の抱負 </h2> <p> お仕事ドラマで吉高がやってたアレ, Web デザイナーっつうのやってみたい! </p> <p> 以上 </p> </body> </html> (10) EmEditor で index.html を修正する ( 上書き保存 (11) IE に戻り F5 キー ( 更新キー ) をたたく表示が更新される (12) このように ( EmEditor で修正 ( ( 上書き ( ( IE で 2

名前をつけて保存保存する場所 X: www ファイルの種類 HTML ファイル名 jimoto.html 必ず半角小文字エンコード UTF-8(BOM 無し ) 保存 (4) IE で X: www jimoto.html を見つけて開くいま作ったホームページが表示される (5) EmEditor で jimoto.

3 更新表示 (F5) して確認を繰り返してトップページを完成するステップ 3 地元紹介ページを作る jimoto.html 次に地元紹介ページ (jimoto.html) をつくる (1) EmEditor で, ファイル新規作成 HTML を選択する HTML の編集画面になるデフォルトの HTML 文が表示されたら全部削除する (2) 授業のホームページの第 14 回のホームページ教材を開く地元紹介ページのひな形教材 2 がある範囲選択コピー (Ctrl+C) EmEditor に貼り付け (Ctrl+V) (3) ファイル名前をつけて保存保存する場所 X: www ファイルの種類 HTML ファイル名 jimoto.html 必ず半角小文字エンコード UTF-8(BOM 無し ) 保存 (4) IE で X: www jimoto.html を見つけて開くいま作ったホームページが表示される (5) EmEditor で jimoto.html を修正する上書き保存 (6) IE に戻り F5 キー ( 更新キー ) をたたく表示が更新される (7) 修正 ( 上書き ( ( 更新表示を繰り返して地元紹介ページを完成する <ul> <li><a href="./jimoto.html"> 地元紹介 </a></li> </ul> ( 解説 ) 地元紹介をクリックすると jimoto.html にジャンプするようにするそれには <a> タグで ( 地元紹介を ( <a> 地元紹介 </a> のようにはさむ <a> タグの属性 href にリンク先のアドレスを割り当てるため,href="./jimoto.html" と書く./jimoto.html は, 同じディレクトリ内 (./) の jimoto.html というファイルを示している <ul>~</ul> は箇条書き ( リスト ) を構成するタグ <li>~</li> はリストの 1 項目を指定している (3) index.html を上書き保存する開いたままにする (4) 次に,EmEditor で jimoto.html を開く (5) <h1> 私の地元のポイント </h1> の上に, 以下を入力するまたはー & ペーストする教材 4 の赤字部分をコピ <ul> <li><a href="./index.html"> トップページ </a></li> </ul> (6) jimoto.html を上書き保存し開いたままにする (7) IE で 2 つのページの間をジャンプできるか確認! (8) トップページにさらにリンクを追加してみよう EmEditor で index.html を開く (9) <h1> 私の 4 つのポイント </h1> の上のリストに, 友達紹介と麗澤大学へのリンクを追加してみよう以下を入力するまたは教材 5 の赤字部分をコピー & ペーストする <ul> <li><a href="./jimoto.html"> 地元紹介 </a></li> <li><a href=" 友達紹介 </a></li> <li><a href=" 麗澤大学 </a></li> </ul> (10) 友達紹介と麗澤大学では,href に URL を記述するステップ 4 リンクを設定する 2つのホームページから相互にリンクを設定するつまりクリックすると別のページにジャンプできるようにする (1) EmEditor で index.html を開く (2) <h1> 私の4つのポイント </h1> の上に, 以下を入力するまたは教材 3 の赤字部分をコピー & ペーストする 3

左右どちらも both と指示している (5) 上書き保存 IE で F5 をたたいて更新表示地図画像が右寄せに配置されるか確認するステップ 5 地図の画像を貼り込む地元紹介ページに地図の画像を表示させよう (1) 準備として教材 6 の地図画像を表示する画像を右クリック名前をつけて画像を保存ファイル保存のウィンドウが開く保存先には X: www を指定するファイル名は

html を開く (3) 私の出身地の金沢はの上に次のように記述すこれまではローカルに HTML ファイルを作成しただるまたは教材 7 の赤字部分をコピー&ペースけで作成者しか見ることができないそこで次に作トする成したホームページを Web サーバにアップロードして学内限定で公開することにしよう4 FFFTP というフリ <img src="./kanazawa.

jpg"を割り当てる属性 alt には画像が表示されないときの代替表示の文字列を指定する属性 style にはスタイルシートと呼ばれる書式を記述するスタイルシートではプロパティ:値; という書き方をするここではプロパティ float で画像に対し文字を回り込みさせることを宣言しているさらにプロパティ float に right という値を割り当てて画像を右寄せにする

4 左右どちらも both と指示している (5) 上書き保存 IE で F5 をたたいて更新表示地図画像が右寄せに配置されるか確認するステップ 5 地図の画像を貼り込む地元紹介ページに地図の画像を表示させよう (1) 準備として教材 6 の地図画像を表示する画像を右クリック名前をつけて画像を保存ファイル保存のウィンドウが開く保存先には X: www を指定するファイル名は kanazawa.jpg のまま保存注画像ファイルの名称の拡張子は jpg png gif である bmp は使えないステップ 6 Web サーバにアップロードして公開する (2) EmEditor で jimoto.html を開く (3) 私の出身地の金沢はの上に次のように記述すこれまではローカルに HTML ファイルを作成しただるまたは教材 7 の赤字部分をコピー&ペースけで作成者しか見ることができないそこで次に作トする成したホームページを Web サーバにアップロードして学内限定で公開することにしよう4 FFFTP というフリ <img src="./kanazawa.jpg" alt="金沢位置図" style="float:right;"> ーソフトを使用する注意解説画像を表示するタグは<img>タグである終わりのタグ </img>はない属性 src には画像ファイルのアドレス"./kanazawa.jpg"を割り当てる属性 alt には画像が表示されないときの代替表示の文字列を指定する属性 style にはスタイルシートと呼ばれる書式を記述するスタイルシートではプロパティ:値; という書き方をするここではプロパティ float で画像に対し文字を回り込みさせることを宣言しているさらにプロパティ float に right という値を割り当てて画像を右寄せにすることを指定している左寄せのときは left と書けばよい (4) さらに <h2>回転ずし発祥の地</h2> の上に次 FFFTP ではサーバ側のファイルを操作できるが間違ってファイルを削除しないように注意すること UNIX の環境ファイル.login,.cshrc 等を削除するとログインできなくなるメール用のディレクトリ.Maildir を削除するとメールを失う PC ディレクトリを削除すると X ドライブの内容を失う失ったファイルは復活できない必ず教員の指示に従って操作を行うこと先走って色々とやったりはしない (1) スタート FFFTP を選択して起動する (2) 接続する Web サーバの名前が表示されるを選択接続のように記述するまたは教材 8 の赤字部分をコピー&ペーストする <br style="clear:both;"> これは回り込み解除を意味している <br>タグの中のスタイルシートで回り込み解除 clear 4 標準では学内にあるコンピュータ以外から公開した Web ページを閲覧することはできないようになっている 4

(3) Web サーバにログインするため, 学内で使用しているユーザ名とパスワードを入力する (4) 接続すると, 初期画面が出る下図左側に自分のパソコンの X:

X: ドライブに www ディレクトリがあることを確認する (8) IE に移る次の URL をアドレスバーに入れて [Enter] キーを押す ((http://www.cs.

また, 友人へのリンクを押すと友人のページに移動できることも確認する (11) アップロードしたファイルを更新したい場合は, ローカルでホームページを更新 ( サーバにアップロードを繰り返す

:www フォルダを Web サーバにアップロードする作業以外は決して行わないこと!

5 (3) Web サーバにログインするため, 学内で使用しているユーザ名とパスワードを入力する (4) 接続すると, 初期画面が出る下図左側に自分のパソコンの X: ドライブのファイルとディレクトリが表示される ( ローカル側 ) 右側に Web サーバの自分のホームディレクトリにあるファイルとディレクトリが表示される ( リモート側 ) (5) 左画面の X: ドライブに www ディレクトリがあることを確認する (8) IE に移る次の URL をアドレスバーに入れて [Enter] キーを押す (( ((( 注 )foo には自分のユーザ ID を書く (9) 自分が作成したページが表示されれば OK である! また, 友人へのリンクを押すと友人のページに移動できることも確認する (11) アップロードしたファイルを更新したい場合は, ローカルでホームページを更新 ( サーバにアップロードを繰り返す (12) このときサーバ側には既に www ディレクトリが存在しており ( 上書きしても良いかと FFFTP に聞かれるが上書き, 以降全てを選択する注意!:www フォルダを Web サーバにアップロードする作業以外は決して行わないこと!! (6) ファイルの転送モードを指定するためツールバーの中の 3 つのボタンをクリックする下図 (7) 左画面で www フォルダを右クリックメニューアップロード www フォルダと中のファイルがすべてサーバに転送される確認 3. 仮登録してみる (1) 授業のホームページの ( ホームページを登録するを開いて, 指示に従ってあなたが作成したホームページを仮登録しなさい (2) タイトルには ( 仮登録という語をつけなさい 5

6 4. 自分のホームページを作る ( 本番 ) ステップ 7 コンテンツを自分の内容に変える (1) 本文, 画像などのコンテンツを, あなたの自己紹介の内容に変えなさい (2) 授業のホームページにあるホームページをつくる ( 発展 ) を参考に, できる範囲で表現をスキルアップしたものに更新しなさい (3) 完成させるホームページの条件は以下の通りです前提条件 : (1) ホームページ ( トップページ ) が存在していること (index.html) という URL でアクセスできることただし foo は自分のユーザ ID であるトップページ作成における条件と注意点 : (1) トップページには, 最低限, 次のものが記載されていること (2) 学籍番号, 氏名, よみ (3) 最終更新日 (4) 自分が作成した他のページへのリンク (5) 友達のページへのリンク (6) 麗澤大学のホームページへのリンクその他のページ作成における条件と注意点 : (1) トップページ以外に,1 ページ以上のページを作成すること (2) 自分について紹介したページが,1 ページ以上存在していることただし, 顔写真, 住所 ( 電話番号など, プライバシーに関わる情報は掲載しないこと (3) 必ず, 自分のトップページへのリンク ( ホームページに戻るなど ) が存在していること (4) 必ず, 写真, 図, イラストなどの画像が入っていることただし, 著作権や肖像権に注意すること漫画アニメのキャラクター, アイドルや芸能人の写真などは, 出典を明記しても使用できないと考えたほうがよい画像サイズにも注意をはらうこと評価のポイント : (1) 適切に自己紹介されているか (2) ページに記載されている情報が有用で充実しているか (3) 著作権や肖像権などに配慮し, ネチケットが守られているか ( 出典の明記等 ) (4) プライバシーの開示など危険なことをしていないか (5) その他 ( デザインなど, ただし主ではない ) 5. 本登録する (1) 授業のホームページの ( ホームページを登録するを開いて, あなたが作成したホームページを正式に登録しなさい (2) タイトルからは ( 仮登録という語を削除しなさい (3) タイトルは, 内容を表す適切なものをくふうしなさい以上 6

ホームページ公開方法

ホームページ公開方法 1 公開するページの作成... 1 2 サーバー上にホームページ公開用ディレクトリを作成する... 3 3 公開するファイルをサーバーにアップロードする... 5 4 ホームページ公開申請 ( 学内公開の場合は不要 )... 9 5 確認方法... 11 6 ホームページなど情報公開する上での注意... 12 1 公開するページの作成ホームページのデータは一般的に HTML(Hyper