スライド 1

Size: px

Start display at page:

Download "スライド 1"

ゆいとうづき
5 years ago
Views:

1 基礎情報処理 I(A) 第回 : ウェブページ作成 ,07-04,11 酒井由紀子慶應義塾大学文学部授業の準備酒井の授業ページから以下を DL-> 保存本日の投影資料 2017Info-1214_web.pdf 日吉キャンパスマップ hiyoshi_campus.jpg 以下は必要に応じてクリックして表示するウェブサンプル1() web_sample1.jpg ウェブサンプル2(map.html) web_sample2.jpg 2 1

2 目標ゼミやグループワークを想定した以下に関する基本的な知識とスキルの習得ウェブページ作成 ITC の機能を使ったウェブサイト公開ウェブページ : ブラウザで見る個別のページウェブサイト : 個人や組織で提供するひとまとまりのページ群 3 目次 1. ウェブの仕組み 2. ウェブサイトの準備 3. ウェブページの作成 : 基礎編 4. ウェブサイトの公開 5. ウェブページの作成 : 中級編 6. 課題 5( ウェブページ ) 4 2

3 1. ウェブの仕組み 5 ウェブページの構成ファイル HTML CSS JPEG コンテンツ : ほかの関連ファイル群 6 3

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 4

5 ウェブページの作成テキストエディターが必要機能テキスト形式のファイルを編集する.html( または.htm) の形式で保存する種類メモ帳 ( 本科目ので利用 ) 9 ウェブページの公開 FTP クライアントが必要機能 FTP(File Transfer Protocol) に従いローカルマシンからウェブサーバへファイル転送を行う種類 FFFTP WinSCP( 本科目ので利用 ) 10 5

6 ITC-PC 以外で作業するときの確認閲覧のためにウェブブラウザー IE 作成のためにテキストエディター terapad 公開のために FTPクライアント WinSCP 11 ウェブページ作成中ローカル ( 作成 PC) ITC ウェブサーバローカル ( 閲覧 PC) 1 で HTML ファイル作成 2 その他のファイルを準備 3IE 等ブラウザで表示確認ローカルアドレス課題 5 で提出するアドレス URL ではない Z Documents web_sample 12 6

7 ローカル ( 作成 PC) ウェブページ公開閲覧課題 5で提出するインターネット上のアドレス =URL: Uniform Resource Locator( 通信方式 + 場所 ) ITC ウェブサーバ 2HTTPによるリクエストユーザ名 / 3 ファイル受信ローカル ( 閲覧 PC) Index.html ほか 1Win-SCP を使いアップロード Index.html ほか Index.html ほか 4IE 等ブラウザで表示ウェブサイトの準備 =WinSCP のログイン 14 7

8 WinSCP WinSCP のログイン ( 初回 ) WinSCP 起動 > 項目入力選択 > 保存ログイン 1 ホスト名入力 upload.user.keio.ac.jp 3 いたん保存してからログイン 2 ユーザ名 / パスワード入力 ITC アカウントと同じ 15 WinSCP WinSCP のログイン ( 初回 ) 初めて接続するホストに対する警告はい 16 8

9 WinSCP WinSCP のログイン保存後はホスト名一覧から 1upload.user.keio.ac.jp を確認してログイン 2 ユーザ名を入力して OK 3 パスワードを入力して OK 17 WinSCP WinSCP のログインログイン完了! ローカルホスト ( 作成 PC) リモートホスト ( ウェブサーバ ) 18 9

10 WinSCP WinSCP の終了 1 をクリック 2 終了確認メッセージで OK をクリックウェブページの作成 : 基礎編 20 10

11 / 課題 5 で作成するページ map.html rishu.html 21 手順ローカルPCでを用いてHTMLファイルを作成編集リンク先のファイルを用意 IEを用いローカルウェブページの表示確認 URL 例 )Z Documents web_sample 22 11

12 ウェブページ上のファイル名ファイル名は半角英小文字半角数字ハイフンアンダースコアのみ HTML ファイル拡張子は.html または.htm 良い例 ) 悪い例 ) aboutme.html about_me.htm about me.html you&me.jpg aboutme.html 自己紹介.pdf 23 サンプル

13 の準備マイドキュメントの下に専用フォルダを作成例 )web_practice 上記フォルダの下で右クリック> 新規作成 > テキストドキュメント 27 の準備ファイル名をに変更変更しますか? にはい.txt 28 13

14 の準備 IE のアイコンに変わっていることを確認 29 の準備保存した HTML ファイルをで編集するを起動してからファイル> 開くでHTMLを選択する or を起動してから HTML のファイルのアイコンをドラッグしてくるファイルアイコンのダブルクリックすると IE が起動する ( 関連づけ設定のため ) 30 14

15 の準備すべてのプログラム >terapad terapad の窓にをドラッグしてくる 31 の準備 Terapad で編集可能となった [EOF]=End of File この前が入力域ファイル名の表示 32 15

16 IE アイコンからブラウザ表示の確認もすぐに OK! : HTML の表示が色分けされ見やすい! タグが青コメントが灰色参照ファイルや URL が緑 33 Explorer リンク先ファイルの準備 web_practice の下にリンクファイルをコピー 2017Info-1214_web.pdf hiyoshi_campus.jpg 重要と同じフォルダ下にリンクファイルを置く本の HTML の記述ではそうしないとリンク先が表示されない 34 16

17 HTML の基礎基本書式と名称 <p> こんにちは </p> 一つの要素開始タグ要素の内容終了タグタグの記述は半角で大文字小文字は問わないが統一する (HTML5.0) 35 HTML 入力ブラウザ表示の [EOF] の前に試しに HTML 入力 IE アイコン IE で表示 IE 36 17

18 HTML の基礎改行インデント ( 字下げ ) は読みやすさのためで HTML 表示には関係しない HTML 表示の改行はあくまでもタグで <ul> 本日のランチ <li> チキンサンド </li><li> チーズバーガー </li></ul> <ul> 本日のランチ tab <li> チキンサンド </li> tab <li> チーズバーガー </li> </ul> 本日のランチチキンサンドチーズバーガー 37 必須タグの入力 <!doctype html> <html> <head> </head> <body> </body> </html> HTML ヴァージョン 5.0 を表すメタデータ ( 非表示 ) 内容 ( 表示 ) ルート要素試し入力は削除この必須タグは投影資料 (.pdf) からコピー貼り付け可 38 18

19 メタデータの入力メタデータ ( 非表示 ) は <head></head> の間に <!doctype html> <html> <head> <meta charset= shift-jis > <title> 練習のページ </title> </head> <body> 文字コード指定タイトル 39 ブラウザで表示を確認 IE アイコン IE が起動して表示 IE ページタイトルが表示されている! 40 19

20 IE ブラウザからソース表示 IE 右クリックからソースの表示ソースが下方に開く不要になったらで消す 41 見出しと水平線内容 ( 表示 ) は <body> と </body> の間に <body> <h1> 練習のページ </h1> 見出し本文として表示されるページタイトルは IE タブ <hr> 水平線 ( 単体で利用 ) </body> 42 20

21 段落箇条書きこのでは <hr> に続けて <p> 段落基礎情報処理ではウェブページの作成に関する基礎的な知識を得てを行いました手順は以下のとおりです <ul> 非序列リスト ( 箇条書き ) <li>html ファイルの作成 </li> <li>html ファイルのアップロード </li> </ul> 非序列リスト ( 箇条書き ) おわり </p> 段落おわり ul 子要素 43 IE ブラウザで表示を確認 44 21

22 番号付リストこのでは前の </p> に続けて <p> ほかにも多くのことを学びました <ol> 序列リスト ( 番号つきリスト ) <li> イントロダクション情報倫理 PC 利用メール </li> <li> 検索エンジンデータベース検索 </li> <li> MS-Word(1)</li> <li> MS-Word(2)</li> 授業のページを参考に第 11 回までの授業内容をリストアップ! </ol> 序列リスト ( 番号つきリスト ) おわり </p> 45 コメント文 ( 非表示 ) 表示に影響しないメモを目印に入れておく     囲まれた文字列は表示されない改行しても同じ 46 22

23 コメント文 ( 非表示 ) 1<body> の下に  2<hr> の下に <! メインここから --> 32 つ目の </p> の下に <! メインここまで --> <! フッター -> 47 IE ブラウザで表示を確認 48 23

24 IE リンクの種類内部リンク 1: 同じサイトにあるファイルにリンク外部リンク : 別サイトにあるファイルやページにリンク内部リンク 2: 同じページの id( 固有名 ) の位置へリンク 49 リンク :<a> タグ基本 <a href= リンク先アドレス /ID > リンク元 </a> a:anchor href: hyperlink reference リンク先アドレスの種類内部リンク : 今のページと同じサイトにあるファイル /ID にリンクパス名 ( フォルダ名 ) ファイル名による相対参照で指定同ページ内の ID 名で指定 URL による絶対参照も可外部リンク : 別のサイトにあるページやファイルにリンク絶対参照として URL を記載 50 24

25 内部リンク説明は本日の <a href= 2017Info-1214_web.pdf target= _self > 投影資料 </a> にありますローカル ( 作成 PC) ウェブサーバパスファイル名で指定 = リンク元先のファイルの関係を保持しないとリンク切れになる投影資料 2017Info-1214_web.pdf リンク先のファイルを参照練習のページローカル ( 閲覧 PC) 練習のページ練習のページ投影資料投影資料 2017Info-1214_web.pdf 2017Info-1214_web.pdf 51 内部リンク 1 このでは 1 つ目の </p> と 2 つ目の <p> の間に相対参照で内部ファイルにリンク <p> 説明は本日の <a href="2017info-1214_web.pdf" target="_self"> 投影資料 </a> にあります </p> コピー貼り付け後半角のが全角になっていたら半角に修正 <a href= ファイル名 target= _blank > テキスト </a> a タグ href 属性 ( ファイル名 )target 属性 ( 開き方 ) 終了タグ 52 25

26 内部リンク 2 このではフッター部分から id をつけたトップへ相対参照でリンク <h1 id= top > 練習のページ </h1> 見出し部分 id 属性 ( 固有名 ) を追加  コピー貼り付け後半角のが全角になっていたら半角に修正 <a href= #top > トップにもどる </a> フッター部分 a タグ href 属性 (id 名 ) 終了タグ 53 外部リンク詳細は <a href= target= _blank > 授業のページ </a> にありますローカル ( 作成 PC) リンク元ウェブサーバ URL で指定 = 絶対参照なのでリンク元のファイルがどこにあっても気にすることなし練習のページリンク先の URL 練習のページローカル ( 閲覧 PC) 授業のページリンク先ウェブサーバ練習のページ授業のページ Index.html 54 26

27 外部リンクこのでは番号つきリスト段落おわり </ol></p> の後に絶対参照でリンク <p> 詳細は <a href= target= _blank > 授業のページ </a> にあります </p> <a href= URL target= _blank > テキスト </a> a タグ href 属性 ( リンク先 ) target 属性 ( 開き方 ) 終了タグ 55 リンクと参照 : 開き方 target 指定 <p> 説明は本日の <a href= 2017Info-1214_web.pdf target= _self > 投影資料 </a> にあります </p> <p> 一般的な指定 : 内部リンクでは現在のウィンドウ外部リンクでは新規のウィンドウ詳細は <a href= target= _blank > 授業のページ </a> にあります </p> 56 27

28 IE ブラウザで表示とリンクを確認リンク先が開かない! ファイル名やアドレスに間違いがないか HTML のタグや記述の記号に抜けや不要なものがないか内部リンクの場合指定のフォルダにファイルが存在しているか 57 map.html サンプル

29 map.html の準備マイドキュメント >web_practice の下で右クリック > 新規作成 > テキストドキュメント 59 map.html の準備ファイル名を map.html に変更変更しますか? にはい map.html map.html.txt 60 29

30 hiyoshi_campus.jpg +map.html の確認同じフォルダに画像ファイルがあるアイコンが IE になっている 61 map.html 必須タグメタデータ入力 <!doctype html> <html> <head> <meta charset= shift-jis > <title> 案内地図 </title> </head> <body> コピー貼り付け後半角のが全角になっていたら半角に修正 </body> </html> 62 30

31 画像リンク : <img> タグ基本 <img src= リンク先アドレス > リンク先アドレスの種類内部リンク相対参照としてパス名ファイル名外部リンク絶対参照として URL を記載 63 map.html 見出し入力画像挿入 imgタグで画像ファイルを指定する <body> <h2> 案内地図 </h2> コピー貼り付け後半角のが全角になっていたら半角に修正 <img src= hiyoshi_campus.jpg alt= 案内地図 > img タグ src 属性 ( ファイルパス ) alt 属性画像ファイルを取得できない時表示されるテキスト 64 31

32 map.html 内部リンク 3 画像 <img> タグの後に map.html から Index.html へ相対参照でリンク <p> <a href= target= _self > 練習のページに戻る </a> </p> コピー貼り付け後半角のが全角になっていたら半角に修正 <a href= ファイル名 target= _self > テキスト </a> a タグ href 属性 ( パス ) target 属性 ( 開き方 ) 終了タグ 65 内部リンク 4 からも map.html へ相対参照でリンク  の上に <p> この授業は日吉キャンパスの第 6 校舎 (<a href= map.html target= _self > 案内地図 </a> の 5 番 ) にある教室で行われています </p> コピー貼り付け後半角のが全角になっていたら半角に修正 <a href= ファイル名 target= _self > テキスト </a> a タグ href 属性 ( パス ) target 属性 ( 開き方 ) 終了タグ 66 32

33 IE ブラウザで表示とリンクを確認 map.html ウェブサイトの公開 68 33

34 手順以下のファイルを WinSCP を使ってローカル PC からウェブサーバに転送する作成した HTML ファイル map.html リンクして表示させたいファイル 2017Info-1214_web.pdf hiyoshi_campus.jpg IE を用いて公開ウェブページの表示を確認 URL 例 ) 69 WinSCP コンテンツのアップロードローカルリモートへのファイルのコピー Public_html フォルダを開く 70 34

35 WinSCP コンテンツのアップロードローカルリモートへのファイルのコピー Public_html フォルダの中に 4 ファイルをドラッグしてコピー 71 WinSCP コンテンツのアップロードアップロード完了! 確認メッセージが出たら OK 72 35

36 WinSCP コンテンツのアップロード同名ファイルをアップロードしようとすると上書き確認メッセージが出るのでよければはい 73 WinSCP コンテンツのアップロード WinSCP の終了 1 をクリック 2 終了確認メッセージで OK をクリック 74 36

37 IE 公開ページ表示の確認公開アドレスをブラウザに入れてみるユーザ名 / ユーザ名はITC-PCのログイン名と同じ ~ はShift+ へ ( 右上 ) は入れなくとも自動表示されるウェブページの作成 : 中級編 76 37

38 中級の準備酒井の授業ページで以下を参照応用情報処理科目一覧 2017-mita-oyojohoshori.pdf 原色大辞典ウェブサンプル 3() web_sample3.jpg 77 サンプル 3 1) JavaScript を使って更新日時を表示する 2)Table タグを使って表を作成する 3)CSS を使ってスタイルを整える 78 38

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 39

40 IE ブラウザで表示を確認警告が出たらブロックされているコンテンツを許可をクリック 81 テーブル 1 行 2 列の表の場合 <table> <tr> </tr> </table> <td> </td> tr= table row th= table head td= table data <td> <td>2 列 <tr>1 行 <table>1 表 </td> 82 40

41 テーブル 8 行 3 列の表の枠を作る  の上に <p> 三田キャンパスでは基礎情報処理に加えて応用情報処理 I~VI が開講されています <br> 概要は以下のとおりです </p> <table> </table> <br>  改行タグ <br> は単独で利用可 1 行あけたいときに便利 <p></p> とレイアウト異なる 83 テーブル <table></table> の間に行を確保する <tr></tr> を入力さらに <th></th> で表頭見出し入力 <table> <tr> <th> 科目名 </th> <th> 開講学期 </th> <th> 内容 </th> </tr> 84 41

42 テーブル行を確保する <tr></tr> を入力 <td></td> で科目名開講学期内容を各行に入力 (2~8 行目 ) <tr> <td> 応用情報処理 I</td> <td> 秋 </td> <td> テキスト処理 </td> </tr> 85 IE ブラウザで表示を確認枠の色を指定していないので枠ナシで OK! 86 42

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 43

44 CSS タイトルの後に背景色見本の 16 進法で指定 <style> body{ 指定場所 background-color: #ccffff;/* 背景色 */ } プロパティと値 </style> { で開始 } で終了コメント 89 CSS 見出し文字色見本の 16 進法で指定 h1 { color: #000080;/* 見出し文字色 */ } 90 44

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 45

46 IE ブラウザで確認 93 基礎情報処理 I(A) 第回 : ウェブページ作成 ,07-04,11 酒井由紀子慶應義塾大学文学部 46

<4D F736F F D A957A A A8FEE95F18F88979D DEC90AC E646F63>

<4D F736F F D A957A A A8FEE95F18F88979D DEC90AC E646F63> 情報処理 C (P.1) 情報処理 C (2011 年度 ) ホームページの作成 http://open.shonan.bunkyo.ac.jp/~ohtan/ テキストエディタ ( メモ帳 TeraPad など ) でHTMLファイルを作成する HTML(Hyper Text Markup Language ) ホームページを記述するための言語のことテキストエディタの起動 (TeraPad の場合