九州産業大学 平成 22 年度教員免許状更新講習 8 月 2 日 ( 月 ) 選択領域工学 情報系講座 (F) ホームページ作成技術の基礎と応用 Ⅰ ホームページ作成技術の基礎 九州産業大学情報科学部稲永健太郎 inenaga@is.kyusan-u.ac.jp http://www.is.kyusan-u.ac.jp/~inenaga/
2 講習会の概要 ホームページの作成方法をわかりやすく学ぶ講座です ホームページを作る際の基本的な知識だけではなく ユニバーサルデザインを考慮したホームページの作り方を学びます さらには基本的なモバイル向けホームページの作成も解説します 上級者には入力フォームやスクリプト言語等の機能を使い ユーザとの対話や反応でダイナミックに内容が変化する動的ホームページへの応用も可能にします
3 講習計画 Ⅰ ホームページ作成技術の基礎 (1) ホームページ作成の基礎知識 (60 分 ) (2) ホームページ作成と公開方法 (60 分 ) (3) モバイル向けホームページ作成の基礎 (60 分 ) Ⅱ 動的ホームページの作成 (1) JavaScriptプログラミングの基本 (60 分 ) (2) JavaScriptの動的ホームページへの応用 (60 分 ) Ⅲ 認定試験 - 筆記試験 (60 分 )
4 本講習 ( 前半 ) の内容について 九州産業大学情報科学部 1 年次生配当科目 情報リテラシー ( 講義 ) および 情報リテラシー演習 にて使用した教材の内容を本講習向けに再構成 + 加筆修正 ベースとなったオリジナル教材 2009 / 2010 年度 情報リテラシー 2 コマ分 2009 / 2010 年度 情報リテラシー演習 2 コマ分
5 講習内で紹介する参考ページのリンク集 Web ブラウザで下記 URL にアクセス http://www.is.kyusan-u.ac.jp/~inenaga/ or 大手検索サイトで 稲永健太郎 で検索 稲永健太郎研究室 九州産業大学平成 22 年度教員免許状更新講習選択領域工学 情報系講座 (F) ホームページ作成技術の基礎と応用 I. ホームページの作成技術の基礎
情報リテラシーシラバス (1) 6
情報リテラシーシラバス (2) 7
情報リテラシー演習シラバス (1) 8
情報リテラシー演習シラバス (2) 9
ホームページ作成の基礎知識 WWW と HTML ホームページの作り方 Web アクセシビリティ
11 WWW(World Wide Web) いろいろな情報資源を統合的に扱う 情報資源のネットワーク (on Internet) 様々な技術の集合 HTML (HyperText Markup Language) URI (Universal Resource Identifier) URL(Universal Resource Locator) はURIの一部 ページの アドレス HTTP (HyperText Transfer Protocol)
HTML (Hyper Text Markup Language) 12 Web ページ記述用に開発された ハイパーテキスト記述用言語 http://www.w3.org/markup/ SGML(Standard Generalized Markup Language) のサブセット
13 SGML HTML SGML 文章にマーク付けするための言語 HTML SGML を元に Web ページを記述するために開発 HTML は便利 他の目的にも使いたい! しかし Web ページ記述に特化されている!! SGML は複雑すぎる!!
14 XML XHTML XML (extensible Markup Language) SGMLを元にした汎用のデータ記述言語 現在さまざまなところで使われている XHTML HTMLはXMLではないので不便 XMLの一部としてHTMLを再設計 今後は主流になると思われる
15 SGML XHTML SGML: 元々の元祖 ( 複雑 汎用性あり ) HTML: Web ページ記述用 ( 単純 汎用性無し ) XML: 汎用データ記述用 ( 単純 汎用性あり ) XHTML: Web ページ記述用 (XML 用システムを利用可能 ) HTML SGML XML XHTML
16 HTML の今後 HTML は 1999 年公開の 4.01 が最新 XHTML に切り替わることが期待されていた XHTML の普及は必ずしも進んでいない 新しい HTML 仕様の策定がスタート HTML5 2008 年 1 月に最初の草稿が公開 2010 年 9 月に正式勧告予定
17 HTML5 参考サイト HTML5.JP - 次世代 HTML 標準 HTML5 情報サイト http://www.html5.jp/ HTML5 とは? 変わる Web と注目の新要素 HTML5.0 の情報サイト http://www.html5-guide.com/
ホームページの例 18
19 このページの実体 <html> <head> <title>web ページサンプル </title> </head> <body> <h1>world Wide Web</h1> <p>world Wide Web は WWW や Web とも呼ばれる インターネットの爆発的普及の原動力となったアプリケーションである これは以下の 3 つの要素技術から構成される </p> <ul> <li>html: HyperText Markup Language</li> <li>uri: Universal Resource Identifier</li> <li>http: HpyerText Transfer Protocol</li> </ul> <p> 情報リテラシーでは これらのうち <strong>html</strong> について詳しく解説する なお <a href="http://www.w3.org/markup">html の正式な仕様 </a> も参考になる </p> <p><img src="http://www.w3.org/icons/valid-html401" alt="valid HTML 4.01 Strict" height="31" width="88"></p> </body> </html>
20 HTML の書き方 文書の構造の例 タイトル 作者 段落 列挙 ( 箇条書き ) 引用 文書の構造 ( 構成要素 ) を HTML の要素としてマークアップ ( 印付け ) していく ブラウザが その構造を見やすく表示
21 HTML 文書の構成要素の例 タイトル 見出し 段落 画像 リンク 箇条書き 強調
22 文書の構成要素と HTML 要素との対応例 文書の構成要素 HTMLの要素 タイトル title 見出し h1 h2 h3 h4 h5 h6 段落 p 箇条書き ul 強調 em strong 引用 blockquote 画像 img リンク a
23 HTML の要素 要素は 開始タグ 内容 終了タグで構成 < 要素 > が開始タグ </ 要素 > が終了タグ <title>, </title>, <p>, <ul> など 終了タグを省略できるものもある p 要素 li 要素など XHTML や新 HTML では終了タグは省略不可能 終了タグがないもの ( 空要素 ) もある img 要素 hr 要素など タグは半角文字 XHTML や新 HTML では空要素は <img /> のように開始タグを /> で終わらせる
24 HTML 文書の基本構成 HTML 文書はヘッダと本体で構成 ヘッダは head 要素に書く 本体は body 要素に書く 全体が html 要素 ヘッダに文書の説明を記述 タイトルはヘッダの中 本体は文書本文を記述 <html> <head> </head> <body> </body> </html> ここがヘッダ (head 要素 ) ここが全体 (html 要素 ) ここが本体 (body 要素 )
25 この Web ページの実体 ( 再掲 ) <html> <head> <title>web ページサンプル </title> </head> <body> <h1>world Wide Web</h1> <p>world Wide Web は WWW や Web とも呼ばれる インターネットの爆発的普及の原動力となったアプリケーションである これは以下の 3 つの要素技術から構成される </p> <ul> <li>html: HyperText Markup Language</li> <li>uri: Universal Resource Identifier</li> <li>http: HpyerText Transfer Protocol</li> </ul> <p> 情報リテラシーでは これらのうち <strong>html</strong> について詳しく解説する なお <a href="http://www.w3.org/markup">html の正式な仕様 </a> も参考になる </p> <p><img src="http://www.w3.org/icons/valid-html401" alt="valid HTML 4.01 Strict" height="31" width="88"></p> </body> </html>
26 HTML 要素の構成の注意点 開始タグと終了タグの関係は数学の開きカッコと閉じカッコと同じ 良い例 : <p> 一部 <em> 強調 </em> する </p> 悪い例 : <p> 一部 <em> 強調 </p> したつもり </em> タグは半角文字で記述 タグは大文字 小文字ともに可 XHTML や新 HTML では小文字のみ
文書をマークアップする (1) 見出し 27 見出し部分を h1 要素でマークアップ 見出しのレベルで h2, h3, 開始部分に開始タグ <h1> を追加 終了部分に終了タグ </h1> を追加 <h1> World Wide Web </h1>
文書をマークアップする 段落部分 ( 一つの段落 ) を p 要素 (Paragraph) でマークアップ 開始部分に開始タグ <p> を追加 終了部分に終了タグ </p> を追加 HTML 中の改行位置は気にしなくて良い (2) 段落 28 <p> World Wide Web は WWW や Web とも呼ばれる インターネットの爆発的普及の原動力となったアプリケーションである これは 以下の3つの要素技術から構成される </p>
文書をマークアップする 29 箇条書き部分全体を ul 要素 (Unordered List) でマークアップ 各箇条書き項目を li 要素 (List Item) でマークアップ (3) 箇条書き <ul> <li> <li> <li> </ul> HTML: HyperText Markup Language URI: Universal Resource Identifier HTTP: HpyerText Transfer Protocol </li> </li> </li>
文書をマークアップする 強調部分を strong 要素でマークアップ (4) 強調 30 <p> 情報リテラシーでは これらのうちHTMLについて詳しく解説する なおついて詳しく解説する なおHTMLの正式な仕様も参考になる </p> </p> 情報リテラシーでは これらのうち <strong>html</strong> に
文書をマークアップする (5) リンク 31 <p> 情報リテラシーでは これらのうち <strong>html<strong> について詳しく解説する なお <a>html の正式な仕様も参考になる </a> も参考になる </p> <a href= http://www.w3c.org/markup >HTMLの正式な仕様 </a> も参考になる </p> リンク部分を a 要素でマークアップ (Anchor) リンク先を href 属性で指定する (Hyper REFerence)
文書をマークアップする の正式な仕様 </a> も参考になる </p> (6) 画像 の正式な仕様 </a> も参考になる </p> <p> <img src= http://www.w3.org/icons/valid-html401 alt= Valid HTML 4.01 Strict height= 31 width= 88 > </p> <img> src= http://www.w3.org/icons/valid-html401 > src=http://www.w3.org/icons/valid-html401 alt= Valid HTML 4.01 Strict height= 31 width= 88 > 32 画像を入れる部分に img 要素をマーク (IMaGe) 画像の URI を src 属性で指定 (SouRCe) 代替テキストや画像サイズも属性で指定 画像を段落にする
33 様々な要素 : テキスト (1) 見出し h1 要素 h2 要素 h6 要素 (Heading) <h1> </h1>, <h2> </h2>, 1が大見出し ( 章 ) 順に小見出し( 節 小節 ) 段落 ( 一般の文章 ) p 要素 (Paragraph) <p> </p>
34 様々な要素 : テキスト (2) 事例 <h1> 情報リテラシー </h1> <h2>html の説明 </h2> <p>html の規格は W3C が規定 </p>
35 様々な要素 : リスト (1) 箇条書き ul 要素 (Unordered List) <ul> </ul> 番号つき箇条書き ol 要素 (Ordered List) <ol> </ol> リスト要素 ( 箇条書きの各項目 ) li 要素 (List Item) <li> </li>
36 事例 様々な要素 : リスト (2) <ul> <li>web ページ記述用言語 </li> <li>sgml のサブセット </li> </ul>
37 様々な要素 : 画像 (1) img 要素 (IMaGe) 属性で情報を指定 src 属性 (SouRCe) 画像ファイルの場所を URI で指定 alt 属性 (ALTernative text) 画像が表示できないときのための代替文字列を指定 width 属性 画像の幅を指定 表示を高速化するため利用 height 属性 画像の高さを指定 表示を高速化するため利用 <img src= alt= width= height= >
38 事例 様々な要素 : 画像 (2) <img src="topadd.gif" width="73" height="52" alt=" 九州産業大学 ">! 大文字小文字をファイル名と同じにする Windows では 区別しないが UNIX では 大文字小文字を区別する
39 様々な要素 : リンク (1) a 要素 (Anchor) href 属性でリンク先の URI を指示 (Hyper REFerence) <a href= > </a>
40 様々な要素 : リンク (2) 事例 <p>html の規格は <a href="http://www.w3.org">w3c</a> が規定 </p>
41 様々な要素 : その他 文字の強調 em 要素 (EMphasise) strong 要素 横罫線 hr 要素 (Horizontal Rule) HTML 要素の種類の数が多いため 必要に応じてリファレンスブックやウェブページを適宜参照されたい
文字コードについて (HTML 作成について補足 ) 42 漢字を表現する文字コードには大きく 4 種類 JIS (ISO-2022-JP) Shift JIS EUC ( 日本語 EUC, EUC-JP) Unicode (UTF-8) 詳細については 以下のページを参照 Cyber Librarian 日本の文字コード http://www.asahi-net.or.jp/~ax2s-kmtn/character.html 文字コードの話 http://euc.jp/i18n/charcode.ja.html
43 文字化け 情報通信では 送信者が使う文字コードと受信者が使う文字コードが一致することが必要 一致しない場合 いわゆる 文字化け が発生 携帯会社が違う場合の絵文字化けも原因は同じ Web でも サーバから送られてくるデータの文字コードが分からないと文字化けの原因
44 ホームページでの文字化けの例 ( 出所 ) 教えて君.net ページが文字化けしたり真っ白のページがたまにある http://www.oshiete-kun.net/archives/2007/08/26_0003.html
45 HTML での対策 JIS でファイルを作っておくと文字化け しにくい TeraPad で 文字 / 改行コード指定保存 で JIS を指定 Web サーバ管理者に最終確認を取るとよい head 要素中で ファイルの文字コードを指定する方法も <meta http-equiv= Content-Type content="text/html; charset=iso-2022-jp"> 上の例は JIS の場合 Shift JIS の場合 ISO-2022-JP ではなく Shift_JIS と記述 EUC-JP の場合は EUC-JP と記述
47 Web Accessibility(a11y) a11y = accessibility : アクセシビリティ できるだけ多くの人に情報を提供するには? 視聴覚障害者もアクセスしてくるかも 画像表示できないブラウザを利用しているかも 障害者が Web を知覚 理解 ナビゲーション インターラクション可能 視覚障害 聴覚障害 肢体不自由 発話障害 認知障害 脳機能障害 高齢者, 一時的な障害 状況による障害 ユーザビリティも向上
48 Web a11y の例 代替テキスト イメージの代わりに表示されるテキスト オーディオキャプション 音声での 字幕 効果 デバイス非依存 ( キーボードだけでも操作可能 ) 明確で一貫したデザインとナビゲーション
49 Web a11y は機会均等に不可欠 Web があらゆる場面 ( 含公的サービス ) で利用されている Web なら障害者もアクセスしやすいようにできる 企業の社会的責任 (CSR) である a11y に対応した Web にすることで人々の暮らしが改善し 全体として社会に利益をもたらす
50 障害者以外への利点 高齢者 ( 日本!) 読み書きが不得手な人 その言語に堪能でない人 ネットワークが遅い人 Web の初心者 明確で一貫したデザイン ナビゲーション リンク サーバーサイド イメージマップにテキストリンク追加 新しくブラウザを開く際の事前情報
51 参考サイト (Web a11y) ウェブアクセシビリティチェックサイト HAREL (NTT データ ) http://feed.designlinkdatabase.net/feed/outsit e_182390.aspx Web ページのソースコードをチェックし アクセシビリティへの適合度を点数で表示 みんなのウェブ情報バリアフリーのための情報提供サイト ( 情報通信研究機構 ) http://www2.nict.go.jp/v/v413/103/accessibility/
52 ネットセキュリティ / モラルの教育 必修科目 情報リテラシー にて実施 警察庁および都道府県警察のサイバー犯罪対策部門のコンテンツの活用 ( 協力依頼 ) 利用コンテンツ 県警講演 ( サイバー犯罪対策部門へ依頼 ) 警察庁監修情報セキュリティ対策ビデオ http://www.npa.go.jp/cyber/video/ ポリスチャンネル ビデオライブラリ http://www.police-ch.jp/video/
53 警察庁監修情報セキュリティ対策ビデオ http://www.npa.go.jp/cyber/video/ ココロノスキマ アクセスの代償 ~あなたの知らないネット事情 ~ 嘘 ~ 出会い系サイトによる犯罪被害に遭わないために~ 仕掛けられた罠 ネットオークション ネットバンキングの危険性 サイバー犯罪事件簿 3 ~NET SPY ネットスパイ ~ 企業の情報セキュリティ サイバー犯罪事件簿 2 ~ 危険なアクセス ~ ワンクリック詐欺 出会い系サイト等
54 参考 : 動的なページ アクセスごとに変化のあるページ サーバ側でコンテンツを作り替えるページ CGI: Common Gateway Interface Java Servlet PHP クライアント側でプログラムが動くページ Java Applet JavaScript
55 その他参考ページ W3C http://www.w3.org 今回講義で紹介した HTML は 説明のため簡略化 W3C のページは正確な HTML を使用 Getting started with HTML http://www.w3.org/markup/guide/ 同上日本語版 ( 非公式 ) http://bewaad.com/archives/getstart.html
56 マルチメディアコンテンツ 静止画像 動画像 音声 音楽
57 静止画像 GIF: Graphic Interchange Format アイコンのように色数が少ない画像向き JPEG: Joint Photographic Experts Group 写真や CG のように色数が多い画像向き BMP: BitMaP Windows 標準の画像形式 ファイルサイズが無駄に大きい PNG: Portable Network Graphics GIFにおける特許問題を解決するために開発 W3C 推奨
58 動画像 MPEG (.mpg) Moving Picture Experts Group が開発 業界標準 様々な会社により開発された独自規格 開発元 名称 代表的な拡張子 Microsoft Video for Windows.avi Windows Media.wmv,.asf,.asx Real Media Real Media.rm,.ram Apple Quick Time.mov Adobe Flash.swf Flash Video.flv
59 音声 音楽 MIDI (.midi,.midi) 音符データなのでサイズが小さい MP3: MPEG Layer-3 の略 (.mp3) 波形データだが非常にファイルサイズが小さい 様々な会社により開発された独自規格 開発元 名称 代表的な拡張子 Microsoft Wave.wav Windows Media.asx,.asf,.wma Real Media Real Audio.ra,.ram,.rm Apple AIFF.aiff,.aif
60 ホームページの作成 公開手順 1. HTML ファイルの作成 1 テキストエディタ (TeraPad, メモ帳 ) で HTML ファイルを作成 / 修正 2 作成した HTML ファイルを Web ブラウザ (Firefox, Internet Explorer) で確認 2. HTML ファイルのアップロード & 公開 1 作成した HTML ファイルを Web サーバへ転送 2 転送した HTML ファイルを Web ブラウザで確認 3. HTML ファイルの追加 修正 1 追加 修正分の HTML ファイルに対して手順 1 と 2
ホームページの作成 テキストエディタを使った 基本的なホームページの作成 ~ 自己紹介 / お気に入り集のページを作ろう ~
62 補足 : ページ内容の選択 個人情報を世界中に公開することの是非 調査結果 ( 勉強した成果 ) の公開 学校行事や生徒の各種活動の公開 校内の日常風景 ( 部活動 授業等 ) 体育祭や文化祭 地域との交流 先生方と生徒さんの共同制作で学校を PR?
作成例 63
64 ホームページ (HTML ファイル ) の作り方 手動で HTML を書く テキストエディタ ( メモ帳 TeraPad など ) を利用 HTML に関する知識が必要 自動で HTML を生成する ホームページ作成支援ソフトを利用 Blog, Wiki, CMS(Contents Management System) などの利用 HTML に関する知識は不要
65 ホームページ作成支援ソフト Web オーサリングツール (Web Authoring Tool) とも呼ばれる 専用ツール IBM ホームページビルダー Adobe DreamWeaver KompoZer ( フリーソフト ) 汎用ツール Word, Excel
66 KompoZer Netscape Composer を元に開発した NVU を改良 オープンソースの Web オーサリングツール WYSIWYG (What You See Is What You Get) Web エディタ内蔵
ホームページ作成の手順 ( 自 PC 内作業 ) 67 1. テキストエディタを起動 2. HTML ファイルを作成 修正 3. 作成 修正した HTML ファイルをデスクトップに保存 4. Web ブラウザで表示 確認
68 テキストエディタ起動 テキストエディタ メモ帳 秀丸エディタ TeraPad HTML 要素のタグを見た目で区別できるよう 自動的に色付けする機能が付いているほうが便利
69 HTML ファイルの作成 修正 テキストエディタで HTML タグを含む Web ページの内容を入力 下記の作成例を参考に 自分なりの工夫をして作成すること HTML ファイルの作成例を参照 作成する HTML ファイルの種類 ホームページ (index.htm) お気に入りのページ (links.htm)
index.htm 70
参考 :links.htm 71
72 参考 : 作成例のソース 前述のサンプルページは情報リテラシーのページにリンクあり http://www.is.kyusan-u.ac.jp/~toshi/ lectures/il/2009/webpages/ Web ブラウザでページのソースを参照 同じところにリンクあり
73 Web ページの中身 ( ソース ) の見方 ソース ソースコード source code の略称 Web ブラウザから見ることが可能 Internet Explorerでは [ ページ ] [ ソースの表示 ] Firefox では [ 表示 ] [ ページのソース ]
74 HTML ファイルの保存 作成 修正した HTML ファイルをデスクトップに保存 ファイル名は半角英数字で! TeraPad で 文字 / 改行コード指定保存 で JIS を指定 ファイル名 index.htm お気に入りのページのファイル名 links.htm
75 Web ブラウザで表示 確認 HTML ファイルをダブルクリック 表示されたページ内容と 自分の想像したものとが異なる場合 HTML ファイルをテキストエディタで修正 & Web ブラウザで再確認
76 Web ブラウザで表示 確認 ( 続き ) 場合によっては 表示 ( 見え方 ) が異なることもあるので注意! Web ブラウザの種類 文字サイズ フォント ( 書体 ) ウィンドウサイズ Firefox と IE の両方で見てみると良い HTML ファイルを右クリック プログラムから開く Firefox もしくは Internet Explorer
77 ブラウザによる見栄えの違い w3m Firefox 携帯 (i モード )
78 HTML-lint HTML の文法的な正しさのチェックツール http://openlab.ring.gr.jp/k16/htmllint/htmllint.html 文法が正しければ良いというものではない しかし それなりの根拠 ( 例えば WAI) はあるので 正しいほうが望ましい Word が生成する HTML の採点結果は悲惨 例
79 参考例 (HTML-lint 向け改良版 ) ホームページ改良版 http://www.is.kyusan-u.ac.jp/~toshi/ lectures/il/2009/webpages/ 下川のホームページその 2
PDF ファイルの作成 Word/Excel 等からの PDF 化
81 PDF ファイルの広がりと重要性 PDF(Portable Document Format) Adobe Systems 社によって開発 電子文書のためのフォーマット 電子的に配布可能 相手のコンピュータの機種や環境に依存しない PDFファイルを作成できソフトが数多く存在 Adobe Acrobat Primo PDF ( フリーソフト ) 瞬簡 PDF ZERO ( フリーソフト )
82 印刷を選択 講座ページからダウンロード ファイル名 : サンプル Word ファイル.docx 印刷 印刷 を選択
プリンタとして PrimoPDF を選択 83
プリンタとして PrimoPDF を選択 84
85 プリンタとして PrimoPDF を選択 作成 修正した HTML ファイルをデスクトップに保存 ファイル名は sample.pdf 保存後 開いて内容を確認
86 Word/Excel から PDF 化 ( その他 ) 名前をつけて保存 Adobe PDF Office2007 以降のバージョンで
87 Blog(Weblog) 元々は個人運営で日々更新される日記的な Web サイトの総称 Blog を作成するためのツールやサービスが充実 HTML を知らなくても Blog を書くことができる 特別なツール不要 Web ブラウザで利用可能 Web ページの発行 編集などが行なえる
Blog の例 88
89 Wiki Web ブラウザから簡単に Web ページの発行 編集などが行なえる 独自の 整形ルール で文章を記述 複数人が共同で Web サイトを構築していく利用法を想定 語源はハワイ語の Wikiwiki ( 速い 急ぐ 形式張らないといった意味 )
Wiki の例 90
参考 :Web ページチェックリスト (1) 91
参考 :Web ページチェックリスト (2) 92
93 STYLE 要素の追加 HTML 要素ごとに 文字色や背景色 フォントサイズなどの指定 HEAD 要素に STYLE 要素を追加 追加例 <style type="text/css"> <!-- body { color: #602727; background: #D1EEEE; } h2 { margin: 0em 2em 0em 0em; font-size: 1.6em; font-weight: 600; border-style: solid; border-width: 0.2em 0em 0em 1em; border-color: blue; } --> </style>
94 参考例 (STYLE 要素の追加 ) ホームページ改良版 http://www.is.kyusan-u.ac.jp/~toshi/ lectures/il/2009/webpages/ 下川のホームページその 3
95 外部スタイルシート CSS 前述の STYLE 要素を ( 別ファイルとして ) 外部スタイルシート (CSS ファイル ) として用意 CSS(Cascading Style Sheets) ファイル *.css CSS ファイルもテキストエディタで作成 HTML ファイルの HEAD 要素内で 使用する CSS ファイルを指定 使用例 : <link rel="stylesheet" type="text/css href="hoo.css">
96 CSS ファイルの作成方法 (1) CSS ファイルには 1 つ以上の規則集合が含まれる 規則集合 : セレクタ ( 選択子 ) と宣言ブロックから構成 p.id { color : #ff3300 } セレクタ : スタイルが適用される対象を示す ( 上例では p.id の部分 ) 宣言ブロック : { から } までの部分 1 つ以上の宣言を含む 宣言 : color : #ff3300 の部分 プロパティ ( 特性 ): 宣言の内 : より前 ( 上例では color ) 値 : 宣言の内 : より後 ( 上例では #ff3300 )
97 CSS ファイルの作成方法 (2) CSS ファイルで指定した規則集合を HTML ファイルの HTML 要素に適用する際の記述例 CSS ファイル内 p.id { color : #ff3300 } HTML ファイル内 <p class="id"> </p>
98 参考例 (CSS ファイルの使用 ) ホームページ改良版 http://www.is.kyusan-u.ac.jp/~toshi/ lectures/il/2009/webpages/ 下川のホームページその 4 さらに改変して外部スタイルシートを
ホームページの アップロード & 公開 作成したホームページを Web サーバへ転送
100 ホームページの公開までの手順 1. ホームページをデザイン 2. ホームページを構成する HTML ファイルや画像ファイル等を作成 3. Web ブラウザで表示 確認 4. 問題があれば 2 へ戻る 5. 公開用 Web サーバへ転送 ( アップロード ) 6. サーバ上のホームページを表示 確認 7. 問題があれば 2 または 5 へ戻る
101 WWW の仕組み HTTP アクセスアクセス クライアント Web サーバ FTP サーバ コンテンツ作成 PC データ 基本的に Web サーバはファイルのアップロード機能を持たない そこで FTP サーバを併用 ファイルを FTP サーバに転送 ( アップロード ) FTP サーバに転送したデータには Web サーバを通じてアクセスできる
102 本講習でのページの公開 FTP サーバ ftp.ip.kyusan-u.ac.jp にあるホームディレクトリ内 WWW-KSU フォルダに公開したい HTML ファイルを保存 http://www.kyusan-u.ac.jp/ ~ ユーザ名 / ファイル名でアクセス可能 ~ ( 破線符号 ) は 直接入力 ( 半角英数字入力 ) で shift + ^ ~ の代わりに %7E の 3 文字でも可
103 作業 : ホームページのアップロード & 公開 作業内容 1. PC で作成した HTML ファイルを FTP サーバに転送 2. アップロードした Web ページへアクセス 3. HTML ファイルの修正 4. 3. へ戻る ( 修正するたび転送する )
104 アクセス制限の設定方法 (1) 条件 : Webサーバとして Apache を使用 制限方法 ( ウェブブラウザでのフィルタ制限) 1. ドメイン (IPアドレス) による制限.htaccess ファイルのみ使用 2. パスワードによる制限 (Basic 認証 ).htaccess ファイル.htpasswd ファイルを使用 1. および 2. の制限を一緒に適用可.htaccess ファイル.htpasswd ファイルを使用
105 アクセス制限の設定方法 (2) 作成した.htaccess.htpasswd を 制限をかけたいファイルと同じ場所 ( ディレクトリ ) に保存.htaccess.htpasswd の保存場所に存在するディレクトリ ( 子ディレクトリ ) も適用
106 ドメイン (IP アドレス ) による制限.htaccess ファイルの例 <Limit GET POST> 特定のホスト ( コンピュータ ) からのアクセスのみを許可する場合 Satisfy any Order Deny,Allow Deny from all Allow from as.kyusan-u.ac.jp Allow from 123.17.144.0/22 </Limit> ネットマスクを利用したホスト指定
107 参考 : ネットマスク IP アドレスをネットワーク ID 部分とホスト ID 部分とに分離する際の指定方法 例 :123.17.144.0/24 IP アドレス 123.17.144.0 の各数値 (10 進数 ) を 8 桁の 2 進数に変換 そのうち 上位 ( 左から )24 桁はネットワーク ID 部分 01111011.00010001.10010000.00000000 よって 123.17.144.0( 下位 8 桁が 00000000) ~ 123.17.144.254( 下位 8 桁が 11111111) からのアクセス可
108 パスワードによる制限 (Basic 認証 ).htaccess ファイルの例 AuthType Basic Basic 認証の宣言 AuthName members AuthUserFile /home/foo/public_html/.htpasswd <Limit GET POST> Require valid-user </Limit>.htpasswd ファイルの例 Web サーバで htpasswd コマンドを使って作成 or.htpasswd ファイルをウェブサイトで作成 student:cfu7fksyacvfx
109 ドメイン / パスワードによる制限.htaccess ファイルの例 AuthType Basic AuthName members AuthUserFile /home/foo/public_html/.htpasswd <Limit GET POST> Require valid-user Satisfy any Order Deny,Allow Deny from all Allow from as.kyusan-u.ac.jp Allow from 123.17.144.0/24 </Limit> any 指定は ドメイン認証 or パスワード認証いずれかを通過すれば O.K. の意味
110 参考ページ : アクセス制限 All About [ ホームページ作成 ] 基本認証でアクセス制限をかける方法 http://allabout.co.jp/internet/hpcre ate/closeup/cu20020910a/.htaccess ファイルを簡単作成.htaccess Editor http://www.htaccesseditor.com/
111 モバイル用ウェブページの作成 主に 緊急連絡用で使用される事例が多い 学校のリスク管理の 顔 となることも 必要最小限の内容 ( コンテンツ ) を掲載 文字を中心に 内容情報の更新タイミングも重要 使用タグも最小限に 主要なキャリアで閲覧確認を NTT docomo / au (KDDI) / softbank キャリアによって使えないタグも
112 作業 : 所属校のモバイル向けページ制作 TeraPad を使って HTML ファイル ( ホームページ ) を作成 ページタイトル (title 要素 ) には 所属校名 + モバイル向けページ 例 : 松香台高校モバイル向けページ ページコンテンツとして 以下の内容を記述 緊急時のお知らせ 所在地 / 代表電話番号 交通アクセス
113 作業 :QR コードの作成 URL を入れた QR コードを作成 例 : 九産大情報科学部モバイル向けサイト http://www.is.kyusan-u.ac.jp/m/ QR のススメ http://qr.quel.jp/ さっそく作る URL(http://~) の 作る タイトル URL を入力し OK ボタン 作成した QR コードを携帯電話で読み取りアクセス (2 次元 ) バーコードリーダ機能を使用
お疲れ様でした 講習内容についてのお問い合わせは下記電子メールアドレスまで inenaga@is.kyusan-u.ac.jp