Comments
Description
Transcript
HTML - 東京女子大学 情報処理センター
1 情報処理技法(マルチメディア)I 第6回 構造化文書 HTML (3) ©D.Mitsuhashi ì 2 HTML 文法チェック ©D.Mitsuhashi ì 3 Another HTML-lint Gateway ì HTMLの文法をチェックする ì ブラウザで表示されているからといって, 必ずしも正しい XHTML 記述とは限らない ì The W3C Markup Validation Service ì http://validator.w3.org/ ì Another HTML-lint Gateway ì 石野恵一朗氏による文法チェックサイト ì http://openlab.ring.gr.jp/k16/htmllint/ ì http://www.htmllint.net/ (HTML5対応版) ©D.Mitsuhashi 4 Another HTML-lint Gateway ì 自分のページをチェックしてみよう ì 必ずしも 100点 をとる必要はないが, 重大なエラーは修正しておくこと ì 他のページをチェックしてみよう ì 正しく書かれている Web ページはどこか? ì 有名なサイトは 100 点がとれているのか? ©D.Mitsuhashi 5 アンカータグ <a> ©D.Mitsuhashi ì 6 リンクの設計 ì ナビゲーションパートの リンクに当たる部分を <nav>内記述する ì メニュー部分は箇条書き ì ©D.Mitsuhashi 現段階では縦に箇条書き として表示されるが、 CSSで横並びにすること も可能。 <nav> <ul> <li> home</li> <li>about</li> <li>works</li> <li>gallery</li> <li>BBS</li> </ul> </nav> 7 アンカータグ ì <a> ì リンクを指定するタグ ì href 属性に属性値(URL)を設定 <a href="http://office.twcu.ac.jp/info/index.html">東京女子大学</a>に行く 東京女子大学に行く ©D.Mitsuhashi 8 属性と属性値 ì 属性とは,タグに補足情報を付与するもの ì 開始タグに記述 ì 半角スペースで区切り複数入力可 ì 属性には 「=(イコール)」で属性値を入力する ì 値は「"(ダブルクォート)」で開始し閉じる (HTML5 では値のダブルクォートを省略可能である が、コードの可読性を高めるため表記推奨) <ahref="http://www.google.com/"> 属性 ©D.Mitsuhashi 値 9 <a>タグで用いる属性 ì href ì Hyper Reference リンク先(参照先)を指定する(URL) ì title ì タイトル リンク先の簡潔な説明を入れる 2byte 文字でかまわない ©D.Mitsuhashi 10 アンカータグ ì 属性を用いた <a> タグの正しい書き方 <a href="http://office.twcu.ac.jp/info/index.html" title="東京女子大学のページ"> 東京女子大学</a>に行く 東京女子大学に行く ©D.Mitsuhashi 11 絶対参照 ì URL でインターネット上の絶対的な位置を 参照する方法を絶対参照という ì この方法では URL が変更になった時に, いちいち <a> タグの参照先を書き換える 必要がある ©D.Mitsuhashi 12 絶対参照 ì リンク先が ì ì http://hoge.com/index.html http://hoge.com/profile.html から ì ì hoge.com index.html http://fuga.jp/index.html http://fuga.jp/profile.html に変更になったら? http://hoge.com/profile.html fuga.jp index.html ©D.Mitsuhashi profile.html profile.html 13 相対参照 ì 参照先の相対的な位置関係を示す記述方法 ì ツリー構造で ì 同じ階層を示す場合は, sample.html ./ ./sample.html ì 上の階層を示す場合には, ../ sample.html ©D.Mitsuhashi ../sample.html 14 相対参照 large medium small index.html ©D.Mitsuhashi dai.html chu.html sho.html 15 相対参照 1. ./dai.html 2. ./medium/chu.html 3. ./medium/small/sho.html 4. ../dai.html 5. ../../dai.html large medium 1 small 2 3 4 5 index.html ©D.Mitsuhashi dai.html chu.html sho.html 16 相対参照 ì 相対参照でサイト内リンクを構成していれば, アップロード先の URL が変更になってもリンクが維 持される ¨ ¨ ©D.Mitsuhashi http://hoge.com/large/index.html →http://hoge.com/large/medium/chu.html ↓ http://fuga.jp/large/index.html →http://fuga.jp/large/medium/chu.html 17 演習 ì 自分が作成した Web ページ同士を <a> タグで, リンクする ì リンクは相対参照を用いる <a href="./contents/about.html" title="サークル概要">サークルについて</a> ©D.Mitsuhashi 18 Webページの公開 ©D.Mitsuhashi ì 19 Webページの公開 ì 作成した HTML書類は、Webサーバーにアップ ロードしない限り公開されない ì 通常はファイル転送ソフトウェアを使って、 Webサーバーに書類をアップロードする ì 東京女子大学では、ホームディレクトリにフォ ルダを作成するだけで公開可能 ì 学内向け WWW-local ì 学外向け WWW ©D.Mitsuhashi 20 Webページ公開用ディレクトリの作成 ì ホームディレクトリで右 クリックして「新規フォ ルダ」を作成 ì フォルダの名称は、 ì WWW-local ©D.Mitsuhashi 21 Webページの公開 ì 「WWW」フォルダ ì http://www.cis.twcu.ac.jp/~[学籍番号]/ ì 「WWW-local」フォルダ(学内向け) ì http://www-local.cis.twcu.ac.jp/~[学籍番号]/ 課題 Webページは「WWW-local」で公開する ©D.Mitsuhashi 22 次回までの作業 ì 複数の Web ページをリンクで繋ぐ(相対参照) ì 「WWW-local」 にすべてアップロードする ©D.Mitsuhashi