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
ì タイトル
リンク先の簡潔な説明を入れる
２byte 文字でかまわない
©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