情報処理演習資料

今日の内容
1.
2.

第12回
HTML入門3.

Webページの記述言語HTML
タグのいろいろ自分のWebページの作成– WordのファイルをHTMLに変換する。

4.

情報の発信
– Webページを公開する。

5.

今日の課題
– 第３回レポートを自分のホームページとして公開する。

Webページの例「ようこそ」

Webページの記述言語 HTML
 現在のWebページはHTML (Hyper Text MarkupLanguage)によって書かれている。
 HTMLは､Web上でドキュメントや写真､音声､サービスなどを提供するために開発された。
 最新バージョンは 4.01でこのページはこのページはどうやって書かどうやって書かれているの？
れているの？

HTMLの特徴
 タグ: 開始タグ<TAG名>と終了タグ</TAG名>例)<h1> 私のホームページ </h1> （見出し１）例外) <img src="bows_b.gif"> (お辞儀学生画像)
http://www.cyborg.ne.jp/~yoko/1105/anime/bow_b/anime.htmlより

 最も基本的な形

要素
HTML<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN">
ブラウザのタイトル部分で表示される内容<html><head> <title> … </title> </head><body> … </body></html>ブラウザの本体部分で表示される内容

http://www.w3.org/TR/html401/
で､その仕様が定義されている。
 ワープロでは、文字の大きさや色などの属性を持っていて、それらを指定することで、様々な表現ができる。HTMLは、このような属性指定をする言語である。
 タグと呼ばれる記号を利用して､ドキュメントに様々な意味づけ（フォントの変更､リンク､画像の表示､プログラムの起動など）を行う。

Webページの例「ようこそ」の中身<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><meta content="text/html; charset=Shift_JIS" http-equiv="content-type"><title> My Home Page </title></head><body><h1>私のホームページへようこそ</h1><h2> <img src="bows_b.gif"> お気に入りリンク集</h2><ul><li> <a href="http://www.google.co.jp"> Google </a> </li><li> <a href="http://www.yahoo.co.jp"> Yahoo </a> </li><li> <a href="http://www.goo.ne.jp/"> goo </a> </li><li> <a href="http://search.msn.co.jp/">MSNサーチ</a> </li><li> <a href="http://cl.is.kyushu-u.ac.jp/Literacy/">
情報処理演習のページ</a> </li></ul></body></html>1

情報処理演習資料

タグのいろいろWebページの例「ようこそ」の解説

 <h1>(～<h6>) 見出し </h1>(～</h6>)

titleタグで囲まれた文字

リンク先のURL <ul> <li>番号無しリスト</li> </ul> <ol> <li>番号つきリスト</li> </ol>
見出し１タグ<h1>と</h1>で囲まれた文字

イメージタグ<img>で指定された画像

見出し2タグ<h2>と</h2>で囲まれた文字

 <a href="http://www.kyushu-u.ac.jp/">

九州大学のホームページ </a>へのリンク
 <!-- コメント --> <img src="bows_b.gif"> （画像）

番号なしリストタグ<ul>と</ul>
で囲まれた項目

画像ファイルの名前

リスト項目タグ<li>と</li>で囲まれた各文字列

テーブルタグ

テーブルのイメージcaptionタグで囲まれた文字<table border="1"><caption>講義内容</caption>行
thタグ(ヘッダ)で囲まれた文字<thead><tr></thead><tbody><th>講師</th> <th>タイトル</th> </tr>見出し<tr><td>Q太郎</td> <td> HTML入門</td> </tr><tr><td>Q太郎</td> <td>ホームページ作成</td></tr></tbody></table>データ
tdタグ(データ)で囲まれた文字

自分のWebページの作成
発信する情報を保存したHTMLファイルを作成する。
1. どんな内容を発信するのかを決める。
•••

ネットワークのエチケット（ネチケット）に反しないような内容にする。
誰が見ているかわからないので､個人のプライバシーに関する情報は載せないようにする。
他人の著作権を侵害するものや､他人が不快に思うものなどは載せない。

Word での HTML ファイルの作成（１） Word を使用して､普通に文書を作成する。

– 文字の色や大きさを変更していても良い。
– 表や図（画像）が含まれていても良い。
 作成したものを予備として保存しておく。
 [ファイル]→[Webページとして保存]をクリックする。
 [名前を付けて保存]のウィンドウが表示さ2. HTML言語で記述されたファイルを用意する。
•••

Microsoft Word で作成して､HTML形式で保存する。
HTMLエディタで作成して､保存する。
一般のエディタを使用してHTML データを直に入力し､保存する。

れる。
– 保存先は「public_html」とする。
– ファイルの種類を「Webページ(*.htm; *.html)」とする。

どれを使用しても良いが､Word が最も簡単（慣れているから）。

2情報処理演習資料

Word での HTML ファイルの作成（２）

情報の発信
情報の発信は使用する計算機システムに大きく依存する。

 メッセージが表示されることがあるが､とりあえず[続行]をクリックする。

– 一般には､ftp(File Transfer Protocol) などのファイル転送プログラムを使用して､Web の情報を発信する計算機（Webサーバ）に HTML ファイルを転送する。
– 教育用計算機システムでは､Webサーバ上の各自のホームフォルダがz ドライブとして見えているので､ファイル転送を行う必要はない。
– 「z:¥public_html」が発信用のフォルダと決めてあるので､作成したHTML ファイルおよび画像ファイル（フォルダごと）をこのフォルダにコピー（移動）する。
– ホームページのトップページはファイル名を「index.html」とする。

 本文はHTMLファイルとして､画像は別ファイル(gifファイル）として保存される。
 gifファイルは､「??.file」

（??はhtmlのファイル名と同じ）というフォルダの中に保存される。

自分のホームページのURL
ユーザ名が「te100001」である学生の場合– http://www.s.kyushu-u.ac.jp/~te100001/

教育用計算機システムの特殊事情
 ファイルのパーミッション（permission）の設定– セキュリティの関係で､教育用計算機システムでは､自分以外の人にファイル（フォルダ）の中身をみせることができない設定になっている。

パーミッションの変更方法（１）PCでの設定
デスクトップ上のアイコン「WWW公開」
をダブルクリックする。

すると､窓が開き､「WWWページを全世界に公開しますか？Y or N or H」と尋ねてくるので､ y を入力する。

Web の情報を見る人は､作成した本人ではない。
– ファイル（フォルダ）のパーミッションを開かなければならない。
– パーミッションは､Windows上でファイルを保存するたびに元に戻るので､保存のたびに変更しなければならない。
（毎回行うのは､次ページ以降のパーミッションの変更方法（１）または（２））

パーミッションの変更方法（２）WSでの設定
参考資料
 telnet を使用して､ワークステーション(ah)にログインする。
ダブルクリック

セキュリティ警告が出る場合もあるが､続行をクリックする。

決められたフォルダにファイルを格納する。

次に､「パスワードを入力してください」の要求通りに､パスワード

Passwd(ah.cse.ec.kyushu-u.ac.jp:):のプロンプトの後にパスワードを入力する。
入力しても見えない「設定が終了しました」「何かキーを押してください」と表示されれば設定は終わり。Enterキーを押して終了。

パーミッションの変更方法（２）WSでの設定（続き）
 ウィンドウが開き､「ah%」（プロンプトと呼ぶ）の右横で点滅する長方形（カーソル）が表示される。
（「ah%」でなく､「%」だけの時もある。）
 「public_html」フォルダの中の全てのファイル（フォルダ）のパーミッションを変更する。
– 大文字､小文字は区別されるので､確実に下のとおりに入力する。

[OK]ボタンをクリック
これを選択「ah.s.kyushu-u.ac.jp」
であることを確認
ユーザ名とパスワードを入力する。
パスワードは「*」で表示される。
これを選択% w3publish
WWWページを公開しますか？ y or n y% exit
• 何もメッセージが表示されずに､新たにプロンプトが表示されれば､コマンドの実行が成功したことになる。

• 何かメッセージが表示された場合は､そのメッセージに従って､コマンドを入力しなおす。

[OK]ボタンをクリック

3情報処理演習資料

今日の課題
 第3回レポートを､自分のホームページとして公開しなさい。

4