Web インターネット技術特論 A:HTML と Web ページ公開山口実靖現在の情報処理技術で最も重要な技術は Webに関する技術 ( かもしれない ). 講義概要インターネット技術特論 A-1 成績評価方

Size: px

Start display at page:

Download "Web インターネット技術特論 A:HTML と Web ページ公開山口実靖現在の情報処理技術で最も重要な技術は Webに関する技術 ( かもしれない ). 講義概要インターネット技術特論 A-1 成績評価方"

なぎさあいしま
5 years ago
Views:

1 インターネット技術特論 A: とページ公開山口実靖現在の情報処理技術で最も重要な技術はに関する技術 ( かもしれない ). 講義概要インターネット技術特論 A-1 成績評価方法及び水準インターネット技術特論 A-2 インターネットの応用技術について学習する. インターネットのネットワーク技術 (TCP, IP など ) は, 講義の対象としない. 講義の主なテーマ WWW (World Wide ), HTTP サーバサイドプログラム Ruby RDBMS 以下により成績評価する課題に対して提出されたレポート 60 点以上を合格とする. 試験は行わない. 可能な限り多く演習を行いたい. 目標インターネット技術特論 A-3 課題 ( い ) インターネット技術特論 A-4 を書ける素人 CSS, Flash などができる多少技術者. ( むしろデザイナ ) クライアントサイドプログラムができる技術者. 本講義の対象外サーバサイドプログラムができる技術者. 本講義の目標本学サーバにページ ( ホームページ ) を公開し, その URL をメールにて提出. 宛先 "ct13140@ns.kogakuin.ac.jp" メールの件名 (Subject:) は, 必ずインターネット技術特論課題い " とすること. 途中に空白無し. ダブルクォーテーション不要. メール本文に, 学籍番号, 研究科 ( 学部 ), 専攻 ( 学科, コース ), 研究室, 氏名,URL を記述. 提出期限 13 日後の 23 時 59 分質問は早めに ML に! xxxx.yyyy.com xxxx.yyyy.co.uk xxxx.yyyy.co.jp xxxx.yyyy.go.jp xxxx.yyyy.ac.jp xxxx.yyyy.ne.jp ホスト名ドメイン名ドメイン名トップレベルドメイン国企業会社政府教育機関ネットワークインターネット技術特論 A-5 最新情報! 2008 年 6 月 27 日 "40 年のインターネット史上最大の改正 " が承認された. 自由にトップレベルドメインを使用可能になった. 例.travel インターネット技術特論 A-7 インターネット技術特論 A-6 URL (Uniform Resource Locator) インターネット上における情報 ( ファイル ) の住所スキーム名ホスト名ドメイン名ポート番号ディレクトリ名ファイル名から構成されるスキームホスト名ドメイン名パス ( ディレクトリ名ファイル名 ) FQDN (Fully Qualified Domain Name) " jp" というコンピュータの "/~ct13140/abc.html" というファイル. アクセス方法は http インターネット技術特論 A-8

DNS (Domain Name System) WWW (World Wide ) ドメイン名と IP アドレスとの対応付け正引き WWW( 以下 ) は, インターネット上の ( ハイパーテキスト ) と, その間のリンク ( ハイパーリンク ) により構築される, 情報システム. www.kogakuin.ac.jp 133.80.134.

2 DNS (Domain Name System) WWW (World Wide ) ドメイン名と IP アドレスとの対応付け正引き WWW( 以下 ) は, インターネット上の ( ハイパーテキスト ) と, その間のリンク ( ハイパーリンク ) により構築される, 情報システムは, 転送プロトコルは HTTP 逆引きインターネット技術特論 A-9 インターネット技術特論 A-10 サーバサーバ画像アプリケーションアプリケーションアプリケーションサーバサーバサイドプログラミングが極めて重要なスキルに! SaaS, ASP, クラウドコンピューティング (cloud) 例えば, オンラインショッピング,SNS, blog など. 閲覧ブラウザ HTTP ブラウザ HTTP サーバプログラム RDBMS インターネット技術特論 A-11 インターネット技術特論 A-12 HTTP GET HTTP POST "index.html" "index.html" ブラウザサーバ Hello!! ブラウザサーバ Hello!! 基本的に情報は, サーバクライアントの方向情報は, クライアントサーバの方向にも流れる. インターネット技術特論 A-13 インターネット技術特論 A-14 (0/2) (1/2) (HyperText Markup Language) ページを記述するのに使用される言語マークアップ言語であり, タグにより装飾できるハイパーテキストであり, ハイパーリンクを使用可能画像, 表などを使用可能現在,W3C (World Wide Consortium) という標準化団体が仕様を策定.( かつては IETF) ファイル Hello,<br>World of <font color="red">world Wide </font> Hello, World of World Wide これを Browser で表示すると注意 : 上記はの文法を無視した汚い (?) ファイルです. インターネット技術特論 A-15 インターネット技術特論 A-16

3 ホームページとは WWW (World Wide ) のページ正しくは (?)," ページ " と言う. というルール ( 言語 ) に従って記述. 実は, ルール無視でも 90% は上手く行く Browser( 閲覧ソフト ) で閲覧 Chrome, IE (Internet Explorer), FireFox, Safari などとりあえず作成 (0/3) Win html ファイルの作成 [ メモ帳 ] を起動中身を作成 ( 例えば " こんにちは ") [ ファイル ] [ 上書き保存 ] "abc.html" html ファイルの読み込み "abc.html" をダブルクリック ( ブラウザが起動 ) or ブラウザから [ ファイル ] [ ファイルを開く ] など html ファイルの変更 [ メモ帳 ] でファイルを編集 [ ファイル ] [ 上書き保存 ] ブラウザ (FF など ) で再読み込み, 更新とりあえず作成 (1/3) Mac インターネット技術特論 A-17 html ファイルの作成 [mi] を起動 [ ファイル ] [ 新規 ] [ 標準 ] 中身を作成 ( 例えば " こんにちは ") [ オプション ] [ 文字コード ] [Shift JIS/MacRoman] [ オプション ] [ 改行コード ] [CR (Mac)] or [CR+LF (Win)] [ ファイル ] [ 保存 ] "abc.html" html ファイルの読み込み "abc.html" をダブルクリック ( ブラウザが起動 ) html ファイルの変更 [mi] でファイルを編集 [ ファイル ] [ 保存 ] ブラウザ (FF など ) で再読み込み, 更新とりあえず作成 (2/3) <br> <hr> <p> <b></b> <i></i> <strong> <em> <big> <u> <h1></h1> <h2></h2> <font color="#ffffff" size="+2"></font> <title></title> <pre></pre> インターネット技術特論 A-18 <img src=" ファイル名 "> <a href=" ジャンプ先 "></a>  < > " & Windows の設定インターネット技術特論 A-19 ファイルの構成インターネット技術特論 A-20 拡張子を表示する. エクスプローラを起動ツールフォルダオプション表示登録されている拡張子は表示しないを OFF 全てのフォルダに適用ファイル名が ".html" なのに, アイコンがメモ帳なら, 要チェック <!DOCTYPE PUBLIC "-//W3C//DTD 4.01 Transitional//EN" " <> <HEAD> <Meta http-equiv="content-type" content="text/html; charset=shift_jis"> <TITLE> さねのページ </TITLE> </HEAD> <BODY> <DIV> ようこそさねのページへ </DIV> <P> ここはさねのページです </P> </BODY> バージョン情報ヘッダ部分本文部分 </> タグインターネット技術特論 A-21 基本のタグインターネット技術特論 A-22 <HR> 単一のタグ <P>~~</P>, <I>~~</I> 開始タグと終了タグで挟む. <IMG SRC="a.jpg"> <A HREF="a.html"> ああ </A> 属性 =" 属性値 " の情報を持つタグ. 改行 <BR> 見出し <H1> </H1> <H6> </H6> H1 が一番大きい見出し ( 章題 ) 段落 <P> </P> フォントのサイズ <FONT SIZE= n > </FONT> 区切り線 <HR> 無料情報とほほの WWW 入門インターネット技術特論 A-23 インターネット技術特論 A-24

基本のタグ (1)- リンク相対パス指定リンク <A HREF= file > </A> <A HREF= URL > </A>.. の部分をクリックするとリンク先 URL にジャンプ現在記述中のファイルから見た相対的なファイルの場所 web folder1 page1.html から page2.html へのパス folder1/page2.html 超重要!! page1.html page2.

alt は, その画像の代わりに表示される文字列を指定する. 音声ブラウザでは画像そのものを読むことができないのでここで指定されたテキストが読み上げられる ( 視覚障碍者への配慮 ).

4 基本のタグ (1)- リンク相対パス指定リンク <A HREF= file > </A> <A HREF= URL > </A>.. の部分をクリックするとリンク先 URL にジャンプ現在記述中のファイルから見た相対的なファイルの場所 web folder1 page1.html から page2.html へのパス folder1/page2.html 超重要!! page1.html page2.html page2.html から page1.html へのパス../page1.html 基本のタグ (2)- 画像インターネット技術特論 A-25 画像の挿入 <IMG SRC= file WIDTH=n HEIGHT=n alt= alt > 幅 (WIDTH), 高さ (HEIGHT) のサイズ指定は, ピクセル数またはパーセンテージ. 無くても良い. alt は, その画像の代わりに表示される文字列を指定する. 音声ブラウザでは画像そのものを読むことができないのでここで指定されたテキストが読み上げられる ( 視覚障碍者への配慮 ). ウェブ用画像ファイル JPEG 形式約 1677 万色 ( フルカラー ) 写真等の色数の多いものに適している非可逆圧縮 PNG 形式 PNG-8: 256 色 PNG-24: 約 1677 万色バナー, アニメなどに適している可逆圧縮. インターレース, 透過 GIF 形式 256 色 ( インデックスカラー ) イラスト等の色数の少ないものに適しているインターレース透過アニメーションの設定ができるインターネット技術特論 A-26 基本のタグ (3)- 表インターネット技術特論 A-27 基本のタグ (4)- 箇条書き 1 インターネット技術特論 A-28 表の挿入 <TABLE BORDER=1> <TR><TD> 日本 </TD><TD> 米国 </TD></TR> <TR><TD> 東京 </TD><TD>WDC</TD></TR> <TR><TD> 日本語 </TD><TD> 英語 </TD></TR> <TR><TD> 米 </TD><TD> パン </TD></TR> </TABLE> 日本米国東京 WDC 日本語英語米パン基本のタグ (5)- 箇条書き 2 インターネット技術特論 A-29 箇条書きの挿入 unorderlist <UL> <LI> 北海道 </LI> <LI> 青森 </LI> <LI> 岩手 </LI> </UL> 北海道青森岩手色の指定に関する属性インターネット技術特論 A-30 箇条書きの挿入 orderlist <OL> <LI> 北海道 </LI> <LI> 青森 </LI> <LI> 岩手 </LI> </OL> 1. 北海道 2. 青森 3. 岩手ページ全体の色指定 <body bgcolor= #rrggbb > </body> <body text= #rrggbb > </body> <body link= #rrggbb > </body> <body vlink= #rrggbb > </body> テキスト色の指定 <font color= #rrggbb > </font> 背景色テキスト色リンクテキスト色訪問済みリンクテキスト色インターネット技術特論 A-31 インターネット技術特論 A-32

色の記述ファイル名 16 進数での表現 0~9 A~F 光の 3 原色 R( 赤 ) G( 緑 ) B( 青 ) での記述 6 桁 ( 各色 2 桁 ) で #FF0000 R G B 色の名前で指定することも可例 : blue, red, white, black 等半角英数字 (1 バイト ) を使う日本語等 (2 バイト ) の全角文字は使わないスペースを含めない代わりに例えば

内容, 文法, 見栄えの確認 ( ローカル作業 ) 3. 公開サーバにアップロードサーバ内の置き場にファイルを保存 ( ネットワーク作業 ) インターネット技術特論 A-33 工学院大学のサーバ公開サーバ非公開ローカルPC インターネット技術特論 A-35 工学院大学の場合ホスト green.ns.kogakuin.ac.

html 自分の学籍番号ページは学外からも, ネットワーク経由で接続可能 ( 世界中に公開 ) 教員番号が ct13140 の例チルダ条件 : /home/ct13140,public_html, abc.

5 色の記述ファイル名 16 進数での表現 0~9 A~F 光の 3 原色 R( 赤 ) G( 緑 ) B( 青 ) での記述 6 桁 ( 各色 2 桁 ) で #FF0000 R G B 色の名前で指定することも可例 : blue, red, white, black 等半角英数字 (1 バイト ) を使う日本語等 (2 バイト ) の全角文字は使わないスペースを含めない代わりに例えば - ( ハイフン ) や _ ( アンダーバー ) を用いる大文字小文字は別の文字として識別されるファイルの拡張子は.html または.htm 各 256 色 (00 ~FF) 16,777,216 色 ( フルカラー ) 各 6 色 (00,33,66,99,CC,FF) 216 色 (WEB セーフカラー ) サーバへのアップロード 1. ファイルを作成 ( ローカル作業 ) 2. 内容, 文法, 見栄えの確認 ( ローカル作業 ) 3. 公開サーバにアップロードサーバ内の置き場にファイルを保存 ( ネットワーク作業 ) インターネット技術特論 A-33 工学院大学のサーバ公開サーバ非公開ローカルPC インターネット技術特論 A-35 工学院大学の場合ホスト green.ns.kogakuin.ac.jp の中のディレクトリ "/home/ct13140/public_html" の中に, ファイル "abc.html" を配置すると, 下記の URL でネットワーク経由でアクセス可能自分の学籍番号ページは学外からも, ネットワーク経由で接続可能 ( 世界中に公開 ) 教員番号が ct13140 の例チルダ条件 : /home/ct13140,public_html, abc.html などが他人に読み込み可能インターネット技術特論 A-37 ファイルのサーバへの転送方法工学院大学のサーバインターネット技術特論 A-34 工学院大学の場合ホスト green.ns.kogakuin.ac.jp の中のディレクトリ "/home/cm12345/public_html" の中に, ファイル "abc.html" を配置すると, 下記の URL でネットワーク経由でアクセス可能自分の学籍番号ページは学外からも, ネットワーク経由で接続可能 ( 世界中に公開 ) 学籍番号が cm12345 の例チルダ条件 : /home/cm12345,public_html, abc.html などが他人に読み込み可能インターネット技術特論 A-36 ファイルのサーバへの転送方法 WinSCP により転送 WinSCP の入手 DOWNLOAD" "Portable executable" 実行 green.ns.kogakuin.ac.jp 22 パスワード ( 大学と同一 ) 学籍番号初回接続時の質問は "Yes" を選択 SCP は学内からのみ接続可能インターネット技術特論 A-38 ファイルのサーバ公開 WinSCP により転送 DnD によりファイル転送可能現在地が表示される SCP は学内からのみ接続可能ディレクトリをダブルクリックすると, 現在地を変更できる. ( ディレクトリの中に入る ).. は一つ上のディレクトリへ. ( ディレクトリから出る ) 現在地表示を操作して, 現在地を変更可能. ディレクトリの作成方法は, 右側の領域を左クリック空き領域を右クリック ( 最下段 ) New Directory (1) 自分のホームディレクトリのパーミッションを "0755" に変更する. (A) 現在地を "/home" に変更する. (B) "ct13140" を右クリック "Properties" (C) 右図の様に "0755" に (D) OK をクリック削除はファイルを右クリックインターネット技術特論 A-39 これは, 変更内容が残るので, 1 回行えば, 次回以降は必要ありません. インターネット技術特論 A-40

6 ファイルのサーバ公開ファイルのサーバ公開 (2) 自分のホームディレクトリの中にディレクトリ "public_html" を作成する. (A) 現在地を "/home/ct13140" にする. (B) ディレクトリ "public_html" を作成 (3) 自分の "public_html" の中にファイル ( など ) を転送する. (A) 右側の現在地を "/home/ct13140/public_html" にする. (B) ファイルを転送 (DnD) 仮にファイル名が "abc.html" とするこれは, 変更内容が残るので, 1 回行えば, 次回以降は必要ありません. インターネット技術特論 A-41 これは, ファイルの変更毎に毎回行う. インターネット技術特論 A-42 ファイルのサーバ公開ファイルの作成 (4) ブラウザによる確認 (A) 以下の URL を打ち込み接続 & 確認ホームページ作成専用ソフト Microsoft Front Page IBM ホームページビルダー Adobe GoLive CS Apple i エディタメモ帳テキストエディット vi emacs Windows に標準で添付 Unix で標準的なエディタ商用ソフト ( 有料 ) これは, ファイルの変更毎に毎回行う. インターネット技術特論 A-43 ホームページ作成の注意事項インターネット技術特論 A-44 著作権違反をしないプライバシー情報を必要以上に載せない差別的な表現公序良俗に反する表現根拠の不確かな情報を載せないブラウザの違いに配慮するページ管理者 ( 文責者 ) 情報を記載する見やすさ読みやすさに配慮する ( カラーバリアフリーユニバーサルデザイン ) 機種依存文字を含めない 1 Ⅱ etc. インターネット技術特論 A-45

Microsoft PowerPoint - homepage 互換モード

Microsoft PowerPoint - homepage 互換モード情報基礎ホームページ作成コンピュータとネットワークコンピュータネットワークネットワークとネットワーク 1 2 インターネットインターネットインターネット : 元々はネットワークとネットワークを接続したもの狭義には IP 接続された世界規模のコンピュータネットワーク歴史 1960 年代後半 ARPAnet (Advanced Research Project Agency): 米国防総省による軍事研究支援用実験ネットワーク

Web インターネット技術特論 A:HTML と Web ページ公開山口実靖 現在の情報処理技術で最も重要な技術は Webに関する技術 ( かもしれない ). 講義概要 インターネット技術特論 A-1 成績評価方

Web インターネット技術特論 A:HTML と Web ページ公開山口実靖現在の情報処理技術で最も重要な技術は Webに関する技術 ( かもしれない ). 講義概要インターネット技術特論 A-1 成績評価方