Sc182(2) 情報科学演習 資料 (Part 2)　

[タスク] 簡単なホームページの作成

手順

  1. WZエディタの起動

    デスクトップのWZエディタのショートカットアイコンをダブルクリックする．

    以下の設定をしておくと，行番号が表示されるので便利！
    1. 「表示」メニューの「表示関連の設定」を選ぶ．
    2. 表示されたダイアログの左側の「一覧」で「表示」→「行番号とルーラー」を選ぶ．
    3. ダイアログの右側で，「行番号を表示」にチェックを入れる．
    4. 「行番号の種類」として「段落行」を選ぶ
    5. 「OK」をクリックする．
    （参考： 出口先生の資料）
  2. テキストの入力

    下のサンプルを入力する． クリップボードを使ってコピー&ペーストしてもよい． （青字部分をクリックすると， 対応する「とほほのWWW入門」の解説を読むことができる．）

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<!-- 次の2行は省略可能です．(この行はコメント) -->
<meta name="Author" content="著者名">
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>Sample Page No.1</title>
</head>
<body>
<h1>私のホームページ</h1>
<p>ようこそ私のホームページへ</p>
</body>
</html>

    1,2行目は，ひとまとまりのもの（DOCTYPE宣言）なので，1行にまとめてもよい． また，"http://www.w3.org/TR/html4/loose.dtd" を省略してもよい．

    3行目の「lang="ja"」はこの文書が日本語で記述されていることを示す．
    6行目の 著者名 のところには自分の名前(半角英字)を入れる．
    7行目は，この文書の形式 (HTML文書) と文字コード (shift_jis) を表わす．
    8行目の Sample Page No.1 は文書の表題で，11行目の 私のホームページ は文書内に表示する見出しである． これらは適当に書き換えてもよい．
    12行目の ようこそ私のホームページへ のところは本文なので，適当な文章に変えてもよい． 複数行にわたる文章でも構わない．
    5行目のコメントのみの行と， 6行目と7行目の「<meta …」で始まる行は省略しても表示には差し支えない．

  3. ファイルの保存

    「ファイル」-「名前を付けて保存」を選び， マイ ドキュメント の下の public_html の下に samp2-1.html と名づけて保存する． ファイル名は直接入力モードで入力し， 半角文字とすること． (スペルミスのないように)

  4. ブラウザ(Firefox)で見る

    保存したファイルのアイコンをダブルクリックするか Firefox のショートカットアイコン（またはウィンドウ）にドラッグ&ドロップする． ブラウザウィンドウの「ファイル」-「ファイルを開く」を選び， マイ ドキュメント の下の public_html の下の samp2-1.html を選んで [開く] としてもよい．

    入力内容と表示を見比べてみよ． Firefox のタイトルバーの文字列が，文書の表題となっていることも確認せよ．

注意事項

[解説] HTML (Hyper Text Markup Language)

概要

通常のホームページは，HTMLと呼ばれる形式で作成される．このHTML形式は，通常の文字のみで構成されるので，普通のテキストエディタで作成することができる．(表示されるイメージと区別して，HTMLソースと呼ばれることもある)

HTML形式は，最初にその文書がHTML形式であることを示すドキュメントタイプ宣言を書き， その後に，開始タグ・終了タグ・テキストからなる文書を記述する． ドキュメントタイプ宣言は，<!DOCTYPE … > という形を持ち， 後に続く文書の形式や，記述しているHTMLのバージョンによって複数の種類がある． ドキュメントタイプ宣言の詳細は「ドキュメントタイプ」(by とほほ氏) を参照されたい． 授業では，原則として「HTML4.01 Transitional」を採用することにする．

開始タグ・終了タグは以下の形式を持つ．

開始タグ： <タグ名[ 属性名="属性値" …]>
終了タグ： </タグ名>

なお，< > / = " などの記号やタグ名，属性名には半角文字のみを用いること． 全角文字を用いてはいけないので， 直接入力モードで入力するのがよい． また，タグ名と属性名は大文字小文字が区別されない． かつては大文字を使うことが多かったが，最近は小文字を使うことが多い．

コメント

タグではないが，<!-- と --> で囲まれた部分は コメント とみなされて無視される． (表示されない)

要素 (element)

大抵の場合，開始タグと終了タグは対になって，文書中で何らかの役割・機能を担う一つの「要素(element)」を構成する． 開始タグと終了タグの間には，その要素の内容，すなわち， その要素の各部分を構成する子要素（＝ 開始タグ - 終了タグ の対)やテキストを記述する． したがって「開始タグ - 終了タグ 対」は，入れ子の形で現れることはあるが， 決して交差することはない． 一部，終了タグを持たずに，開始タグ単独で現れるもの(上タスクのサンプルテキストの <meta …> など)もあるが，この場合は，この開始タグが単独で一つの要素となる．

テキストは通常の地の文であり，抽象的には文字の並びでもあるが， 通常は何かの要素（大抵は段落を表すp要素 ＝ <p>-</p>対； 以後<p>対のように略する）の中に記述される． 先のタスクの例の文書 について，これらの要素やテキストの包含関係（または上下関係）は， 下図のようになる．

この図のように，HTML文書は，タグとテキストが平坦に並んでいるものではなく， 要素やテキストの包含関係による階層構造を持っていることに注意されたい． [重要]

HTML文書の構造

HTML文書全体は<html>対で囲まれる（つまり，全体が一つのhtml要素となっている）． その他，先の例に現れたものも含め，一部のタグ（要素）の意味を，下表にまとめておく． その他のタグ（要素）については「とほほのWWW入門」等を参照されたい．

タグ意味
<html> HTML形式の文書全体
<head> <html> の直後に1つだけ現れ，そのページに付随する情報を表す．
<body> <html>対の中の <head>対の直後に1つだけ現れ， そのページの文書本体を表す．
<meta> <head>対の中に表れ， 文書に種々の情報を付与するのに用いられる．
<title> <head>対の中に表れ，そのページの表題を表す．
<hn> <body>対の中に表れ，見出しを表す．n は 1 〜 6 の数字で，見出しのレベルを表す．
「色々な大きさの見出し (by 出口先生)」も参照されたい．
<p> <body>対の中で段落を表す． 通常のテキストはこの <p>対の中に書かれる．
終了タグのみ，または，開始タグ・終了タグの両方が省略されることもあるが， 混乱を避けるため，省略しないことを勧める．
<hr> <body>対の中に表れ，水平の区切り線を表す． 終了タグは存在しない
<br> <p>対の中などに表れ，強制的な改行を表す．終了タグは存在しない． 乱用すると見づらくなるので，注意して用いること．

HTML文書における要素やテキストの包含関係にはある程度の制限があり， 禁止事項や非推奨の事項も多い．文書作成の場合には，特に以下の点に注意されたい． [重要]

タグ（要素）の属性

タグ（要素）の属性は，先に述べたように，開始タグの中で 「属性名="属性値"」 という形で与える．

このような属性は，そのタグに付加的な情報を与えたり， 役割や機能を規定するのに用いられる．各属性の詳細は， 「HTMLリファレンス」(by とほほ氏) 等を参照されたい．

テキスト中の文字

<, > 等の文字は， タグを構成する文字と紛らわしいので，本文のテキスト中では 「&」と「;」を用いた特別の表現を用いる． 以下にその例を示す．

表現表す文字
&lt; <
&gt; >
&amp; &
&nbsp; （改行しない）空白
&quot; "

（その他にも 「HTML 4の文字実体参照 （by HTML 4仕様書邦訳計画補完委員会）」 でさまざまなものが見つかる！ &hearts; (♥) とか．）

また，テキスト中で使える文字については， 「使ってもよい文字 (by 出口先生)」を参照されたい． その他，トラブルについては 「トラブルシューティング (by 出口先生)」も参照されたい．

参考資料

[タスク] HTMLの種々のタグ (1)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<!-- 次の2行は省略可能です．(この行はコメント) -->
<meta name="Author" content="著者名">
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>Sample Page No.2</title>
</head>
<body>
<h1 style="text-align:center;">私のホームページ</h1>
<p style="text-align:center;">ようこそ私のホームページへ</p>
<h2>第1章 ことはじめ</h2>
<p>ことの発端は，大学で情報科学演習という科目を取ったことでした．</p>
<p>&lt;p&gt;と表示するには，
htmlファイル内では&amp;lt;p&amp;gt;のように記述する必要があります．</p>
<hr><!-- これは水平線です -->
<p style="text-align:right;">2008年10月</p>
</body>
</html>

[解説] (HTML)文字の修飾

文字を修飾するタグには以下のようなものがある．

タグ意味
<b> <b> と </b> の間を太字にする．
<i> <i> と </i> の間を斜体にする．
<tt> <tt> と </tt> の間をタイプ文字(等幅フォント)にする．
<span> スタイルシートを併用して， <span> と </span> の間の文字スタイル等を設定する．詳細については下の例や囲み記事， 「とほほのスタイルシート入門」などを参照されたい．

上のもの以外にも，<u> や <font> のように広く使われているものもあるが，一般に見栄えを直接定義するタグは使用が推奨されなくなってきており， かわりに <span> タグとスタイルシートを用いる場合が増えてきている． （下の囲み記事も参考にすること．）

例

HTML形式表示
<p><b>太字</b>・<i>斜体</i>・<tt>OIOI</tt>・OIOI
・<span style="text-decoration:underline;">下線付き</span></p>
 太字・斜体・OIOI・OIOI ・下線付き
<p>普通・<span style="font-size:large;">大きい</span>
・<span style="font-size:x-large;">もっと大きい</span>
・<span style="font-size:small;">小さい</span>
・<span style="font-size:x-small;">もっと小さい</span><p>
 普通・大きい ・もっと大きい ・小さい ・もっと小さい
<p><span style="color:blue;">青</span>
・<span style="color:maroon;">栗</span>
・<span style="color:#00ff00;">緑</span></p>
 青 ・栗 ・緑

参考資料

スタイルシート

スタイルシートは，上記のように，<span> タグと共に用いて文字修飾をするだけではなく， さまざまなタグと共に用いて，さまざまな書式の設定に用いられる． (詳細は後述の参考資料を参照されたい)

ここでは，文字修飾の例をいくつか挙げておくに留める．

スタイル
プロパティ		説明例
color 文字色を指定する．色の表記は「とほほの色入門・色見本」等を参照． <span style="color:#cc0000;">#cc0000の色</span>
→ #cc0000の色
background-color 文字の背景の色を指定する．色の表記は color と同様． <span style="background-color:yellow;">黄色の背景</span>
→ 黄色の背景
font-family 書体を指定する．書体の名前や serif, monospace などが指定できる <span style="font-family:monospace;">等幅iwiw</span>
→ 等幅iwiw
font-style 文字スタイルを指定する. italic などが指定できる <span style="font-style:italic;">斜体</span>
→ 斜体
font-weight 文字の太さを指定する. bold などが指定できる <span style="font-weight:bold;">太字</span>
→ 太字
font-decoration 文字飾りを指定する. underline, line-through などが指定できる <span style="text-decoration:underline;">下線</span>
→ 下線
<span style="text-decoration:line-through;">打ち消し</span>
→ 打ち消し
font-size 文字の大きさを指定する. large, small などのほか，120% のような指定もできる <span style="font-size:80%;">小さい字</span>
→ 小さい字

これらは，1つの style 属性の中で組み合わせることも可能なので， 例えば斜体の太字は以下のように表現できる．

<span style="font-style:italic;font-weight:bold;">斜体の太字</span>
〔参考資料〕
スタイルシートの基本 (by 神崎正英氏)
とほほのスタイルシート入門 (by とほほ氏)

[課題] 個人ホームページの開始ページ

課題番号：　 2-1
課題名：　 個人ホームページの開始ページ
締切：　 次回の授業の開始時まで
ファイル名：　index.html

内容

個人ホームページの開始ページを作成し， マイ ドキュメント の下の public_html の下に，index.html という名前で保存すること． attractive な表題 (<h1>を用いると良い) と welcome メッセージくらいは表示するのが望ましい． また，末尾に署名として 科目番号・科目名・クラス・学生番号・氏名 を明記するのが望ましい．

以上の作業を行なった上で，作成したファイルと同じファイルを Moodle の課題ページから提出する．

報告

次週の授業時間中に提出手順を説明するので， 授業開始時までにファイルを用意しておくこと． ファイルの名前は index.html とする．

注意事項