第2回 Web文書

Size: px

Start display at page:

Download "第2回 Web文書"

そうすけうとだ
5 years ago
Views:

1 Slide URL Web 情報システム構成法第 3 回 HTML 入門 (2) 萩野達也 (hagino@sfc.keio.ac.jp) 1

2 前回課題 : 簡単な HTML ページの作成架空のオンラインショップのトップページを作成しなさい HTML5で記述すること HTMLだけを用い CSSやJavascriptなどは用いないことテキストエディタ (emacs, vim, notepad, atom, miなど ) で作成しなさいマークアップのコピペはしないように手で打ち込みましょうその方が覚えられます myshop.html のような名前で作成しブラウザで直接ファイルを開くトップページに書く内容提出ショップの名前ショップの概要名前の由来ショップで扱う商品の簡単な説明商品の例など作成したHTMLファイルを直接提出してください締め切り : 次の日曜日の正午締め切り 2

テキストエディタファイルにはテキストファイルとバイナリファイルがあるテキストファイル

バイナリファイル人が直接中身を見てもよくわからないファイルフォーマットを標準テキストにする

テキストエディタテキストを編集するためのアプリケーションどんなテキストでも編集できる汎用のアプリケーション

3 テキストエディタファイルにはテキストファイルとバイナリファイルがあるテキストファイル人が直接中身を見て理解できるファイル自然言語で使っている文字 ( アルファベット漢字など ) で書かれているバイナリファイル人が直接中身を見てもよくわからないファイルフォーマットを標準テキストにするアプリケーションを経由して中身を見る必要がある画像や音楽 Word 文書 PDF アプリケーション自身などテキストエディタテキストを編集するためのアプリケーションどんなテキストでも編集できる汎用のアプリケーション Windowsの標準メモ帳 (notepad) Mac OS Xの標準テキストエディット自分でインストール emacs atom vim mi 3

CSV: 表計算アプリで利用 MIME データの形式のやり取りで指定電子メールで添付文書の利用に Multipurpose Internet Mail Extensions mime タイプ拡張子意味 text/plain.

4 テキスト形式にもいろいろある plain text 装飾もなにもないテキスト形式通常のメールの本文に用いられる Macのテキストエディットでは標準テキストのこと rich text html 装飾などを含んだテキスト形式メールでの簡単な装飾にも使われる Macのテキストエディットのデフォールト HTML もテキスト形式その他 TeX: 文書清書システムで用いられる C, javascript: プログラムもテキスト形式で書く CSV: 表計算アプリで利用 MIME データの形式のやり取りで指定電子メールで添付文書の利用に Multipurpose Internet Mail Extensions mime タイプ拡張子意味 text/plain.txt など汎用テキスト形式 text/rtf.rtf リッチテキスト text/html.html HTML ファイル text/css.css CSS ファイル text/javascript.js JavaScript ファイル text/csv.csv CSV ファイル text/xml.xml XML ファイル 4

5 文字コードとその指定テキストエディタでテキスト作成するときに指定する保存するときにオプションメニューとしてあることが多い Mac テキストエディット UTF-8 と UTF-16 は同じ Unicode でもエンコードが異なる Windows メモ帳 ANSI とすると Shift_JIS になる Unicode とすると UTF-16 になる 5

6 文字コードとは 6 文字をどのような数字 (2 進数 ) で表現するのかコンピュータの中はすべて数字 A をで表す(10 進数では 65 ) 文字集合とエンコード文字集合 : どのような文字を使うのか JIS 文字集合 ( 第 1 水準第 2 水準外字 ) Unicode エンコード : どのように数字で表すのか JIS iso-2022-jp EUC Shift_JIS あるいは CP932 Unicode UTF-8 UTF-16 UTF-32 Unicode ファイルには先頭に BOM (Byte Order Mark) がついたものがある UTF-16 では推奨されるが UTF-8 では必須でも推奨でもない JIS 文字集合エンコード含む ASCII 文字集合含むラテン 1 文字集合含む Unicode 文字集合エンコード iso-2022-jp EUC Shift_JIS UTF-8 UTF-16 UTF-8 Unicode 0000~007F 0080~07FF 0800~FFFF 0xxxxxxx ビット列 110yyyyy 10xxxxxx 1110zzzz 10yyyyyy 10xxxxxx

7 提出課題の行数と文字コード文字コード文字コード人数 ASCII 3 BINARY 3 Shift_JIS 3 UTF-16 1 UTF 総計 217 <meta charset="..." /> などの文字コード指定がないものもいくつかあった文字コード指定と実際の文字コードが一致しないものもあった 7 文字化けの可能性あり

8 よくある間違い記号はすべて半角文字で書くこと <html lang="ja"> の < > " などはすべて半角文字です全角の空白をあまり用いないタグ内の属性を区切る空白として用いないを用いましょう body は一つだけ 2つ書いてはいけませんコピペしてませんか? class 属性は使っても意味がない 16 名利用 <div class="xxx"> の class は何の意味も持ちませんコピペですか? fontで色指定はしない 31 名利用 font タグは廃止されていますコピペしてませんか? centerは廃止されたタグです 15 名利用 8

9 myshop.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title> なんでもショップ </title> </head> <body> <h1> なんでもオンラインショッピング </h1> <p> このオンラインショップではなんでも売っています </p> </body> </html> HTML5であることを宣言日本語で本文を記述文字コードはUTF-8 文書のタイトル本文 9

10 複数の Web ページの作成 Web サイトは複数の Web ページから構成されている全体の構成を考える必要があるコンテンツマトリックスどのようなページを用意するのか利用者のページの流れを考えて配置する URL タイトルキーワード内容 myshop.html ショップタイトル概要ショップの概要トップページ category1.html 商品カテゴリ1 商品カテゴリ 1のグループの商品一覧 goods1.html 商品 1 商品商品 1の説明 goods2.html 商品 2 商品商品 2の説明 about.html ショップについて由来ショップの由来 help.html 問い合わせヘルプショップに対する問い合わせ cart.html ショッピングカートショッピングカート購入予定商品の一覧 checkout.html チェックアウト清算商品の購入 10

11 ページ間の移動ページ間はハイパーリンクにより接続するリンクをクリックすることで移動するハイパーリンクの指定 a タグ ( 要素 ) を使う a は anchor ( 錨 ) のことブラウザでは青く下線が引かれたりする myshop.html <p> この <a href="goods1.html"> 商品 </a> は大変優秀です是非ともお買い求めください </p> ハイパーリンク goods1.html <h1> 商品 1</h1> <p> この商品の特徴は以下の通りです </p> 11

12 メニューもハイパーリンクメニューは別のページに移動するものなのでハイパーリングです ul を使ったメニューの作成先頭省略 <body> <h1> なんでもオンラインショッピング </h1> <p> このオンラインショップではなんでも売っています </p> <ul> <li><a href="goods1.html"> 商品 1</a></li> <li><a href="goods2.html"> 商品 2</a></li> <li><a href="help.html"> ヘルプ </a></li> </ul> </body> メニュー 12

13 URL ハイパーリンクで別のページを指すために使っているのが URL <a href="goods1.html"> 商品 1</a> URL Uniform Resource Locator Web 上の資源の場所を一意的に指し示すスキーマプロトコルオーソリティホスト名サーバ名パスオーソリティ内での位置ファイル名問い合わせフラグメント文書内の位置絶対 URL スキーマから始まるURL 相対 URL スキーマやオーソリティが省略されたURL / ではじまれば文書と同じオーソリティ内の絶対パスそうでなければ文書と同じ位置からの相対パス 13

14 ナビゲーションナビゲーショングローバルナビゲーションローカルナビゲーション補足ナビゲーションコンテキストナビゲーション親切ナビゲーションパンくずリストサイトマップサイトインデックスロゴローカルナビゲーション補足ナビゲーション典型的なページグローバルナビゲーションパンくずリスト本文親切親切ナビゲーション検索補足ナビゲーション 14

15 ナビゲーション詳細グローバルナビゲーションサイト全体を大きく切り替えるすべてのページで共通 7つ程度までローカルナビゲーションそれぞれのカテゴリー内での切替補足ナビゲーションローカルで不足する部分親切ナビゲーションヘルプ検索問い合わせ先パンくずリストサイト内での現在の位置迷子にならないようにするサイトマップサイト全体の構成を表示コンテキストナビゲーション複数のページの場合に次のページへ遷移するなど 15

16 HTML5 の基本的な body 構造 HTML5 では標準のページの構造を表す要素がある <body> <header> header </header> <nav> menu </nav> <article> main content </article> <aside> advertisement </aside> <footer> about </footer> </body> nav menu header article main content footer ad. 16

17 HTML5 による myshop.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title> なんでもショップ </title> </head> <body> <header> <h1> なんでもオンラインショッピング </h1> </header> <nav> <ul> <li><a href="goods1.html"> 商品 1</a></li> </ul> </nav> <article> <p> このオンラインショップではなんでも売っています </p> </article> <footer> <p> 問い合わせ : <a href="help.html"> ヘルプ </a></p> </footer> </body> </html> ショップのヘッダロゴなどメニューこのページの本文フッターヘルプナビなど 17

18 課題 : 複数の HTML ページ架空のオンラインショップの複数のページを作成しメニューでこれらをリンクしなさい HTML5で記述すること HTML5の基本構造を利用してヘッダメニュー本文フッタを分けなさい HTMLだけを用い CSSやJavascriptなどは用いないこと複数ページ提出トップページ : ショップの概要商品ページ : 商品の紹介その他作成したHTMLファイルをCNS 上に置き CNS 内のみから見えるようにして下記のものを宿題登録システムから提出してくださいトップページのURL トップページのHTML 商品紹介ページの1つのHTML 締め切り : 5 月 2 日午後 11 時 59 分 59 秒 18

19 CNS への Web ページの置き方 CNSの個人 Webページホームディレクトリ下の public_html が公開される ~/public_html/ ファイル名ログイン名 / ファイル名 Web 情報システム構成法のためにサブディレクトリを作ると便利 ~/public_html/wis/myshop.html ログイン名 /wis/myshop.html public_html の設定 webedit.sfc.keio.ac.jp に ssh などで入って編集自分のPCで作成したファイルは scp などでCNSに転送 CNS 外から見えないように設定 ~/public_html/.htaccess を設定 19

20 CNS 外から見えないように設定する ~/public_html/wis/.htaccess に次のように記述する order deny,allow deny from all allow from /16 apache Webサーバに対する記述 order deny,allow アクセス制限の順序を拒否から評価することを指定 deny from all デフォールトではすべての接続を拒否 allow from /16 CNSのIPアドレスからの接続を許可自宅からCNSに制限したWebページを見るには VPN 接続する Web-VPNサービス 20

21 まとめテキスト文書テキスト形式文字コードハイパーリンク URL ナビゲーション HTML5 基本構造 21

第6回　CSS入門（つづき）

第6回　CSS入門（つづき） Slide URL https://vu5.sfc.keio.ac.jp/slide/ Web 情報システム構成法第 6 回 CSS 入門 ( 続き ) 萩野達也 (hagino@sfc.keio.ac.jp) 1 CSS の役割 HTML に表現を与える背景色, 画像, 画像の繰り返し文字色, 種類, 太さ, 傾き, 大きさ文書整列 ( 左揃え, 中央揃え, 右揃え, 均等割り付け )