ちょー簡単 HTML 入門

99年度・人間文化 ろ組用テキスト by tkikuchi
を　2001年度・数理情報科学1年ろ組・専門コア情報処理演習に転用

最初に

~/html または ~/public_html に ファイルを作成すると、 情報科学コースの HTTP サーバを通じて Web ページを 公開(学内限定または完全公開)することができます。 詳しくは、 大学内ユーザのページと、その中の「自分のホームページを 作りましょう」を読んでください。 今回は「学内限定」で作成してください。
平文はテキスト形式のファイルのほかにメールにも使われますが、 HTML (Hyper Text Markup Language) は WWW (World-Wide Web) のページ (あるいは、「インターネットのホームページ」) に使われます。

  1. ネットスケープでテキストファイルを読む

    ネットスケープの ファイル -> ページを開く を使って、前回作成した clife.txt を表示させてみよう。ファイルの種類を「テキストファイル (*.txt)」 にすることに注意しよう。 (2001年度は作っていなかったので、大急ぎで、「私のキャンパスライフ」 という文を作ってください。参考)

  2. HTMLファイルを作る

    clife.txt のコピーをclife.html に作成しよう。

  3. ネットスケープで HTML ファイルを読む

    そのファイルをネットスケープに表示させよう。

簡単な飾り

HTMLの極意は < と > の間に入ったタグを使って、 平文で書いた文書に飾りをつけることにあります。
  1. 見出しの「私のキャンパスライフ」を、見出しらしく大きくしましょう。
    <h1>私のキャンパスライフ</h1>
    のように書きます。h の後の数字には 1 から 5 までを使うことができます。 上の例では h1 タグを使って見出しの始まりを示し、 /h1 タグで見出しの 終わりを示しています。
  2. 本文の中で、特に強調したい言葉に飾りを付けましょう。 例えば
    <b>飲み会</b>
    と書くと太文字(bold)に、
    <i>コンパ</i>
    と書くとイタリック(italic)になり、
    <u>遊んだり</u>
    と書くと下線(underline)がつきます。
  3. ２つ以上の飾りを同時に使う時は、「入れ子」になるように 気を付けてください。
    <u>飲み会は<b>楽しい</b></u>
    は入れ子になっていますが、
    <u>飲み会<b>は</u>楽しい</b>
    は入れ子になっていないので、思った通りに表示されないかもしれません。

改行・段落

HTML文書はテキスト形式で入れた改行が無視されて、連続した行になって しまいます。このため、改行や段落を示すタグや、テキスト形式のまま 表示することを指示するタグがあります。
  1. 改行 
    情報の授業は楽しすぎる。<br>それはインターネットができるから。
  2. 段落 
    情報の授業は楽しかった。<p>ところで、昼食は何にしようか。
  3. テキスト形式での表示 
    <pre>
情報の授業は楽しかった。
ところで、昼食は何にしようか。
</pre>

箇条書き

箇条書きには数字つきのものと無しのものとがあります。 どちらも、ひとつひとつの項目は <li> タグを使います。
  1. 数字付きの箇条書きには ol タグを使います。 
    <ol>
  <li>金
  <li>銀
  <li>銅
</ol>
  2. 数字無しの箇条書きには ul タグを使います。 
    <ul>
  <li>りんご
  <li>みかん
  <li>なし
</ul>
簡単 HTML 入門へ続く。

簡単 HTML 入門

99年度・人間文化 ろ組用テキスト by tkikuchi を転用

これはちょー簡単 HTML 入門の続きです。 初めての人は、そちらを先に読んでください。

リンクを作ろう

教科書や本には、難しい言葉があると、その説明を別のところに書いておいたり します。これは注釈といいます。HTML ではこの注釈を リンクと呼びます。 リンクは同じ HTML 文書の中に置くことも、別のファイルにすることも、 インターネットのどこかにすることもできます。
  1. 同じ文書の中に作る。 
    HTML は <a href="#muzu">ちょーむずい</a> ということはありません。
<p> ..... <p>
<a name="muzu">とっても難しい</a>
  2. 別のファイルに作る。 
    この文書は、clife.html です。
<a href="clife.txt">テキスト形式のファイル</a>もあります。
  3. インターネットのどこかにあるファイルにリンクする。 
    <a href="http://www.ntt.co.jp/docs/html-jman/ncsa-j.html">
初心者向き HTML ガイド</a> には、簡単な HTML の書き方が載っています。

HTML文書にタイトルを入れる

<title> というタグを使うと、ネットスケープのタイトルバーに文書の タイトルを表示させることができます。 これも含めて、HTML文書は、 HTML 文書であることを示す <html> 、 ヘッダ(前置き)であることを示す <head> 、 本文であることを示す <body> を使って次のような構造になります。 
<html>
  <head>
    <title>ここにタイトルを書く</title>
  </head>
  <body>
    ここが本文。
  </body>
</html>

課題

ここまで練習できたら、次の手順で自分のホームページを作ってください。
  1. html ディレクトリに clife.html (私のキャンパスライフ)を作成する。
  2. html ディレクトリに index.html を作成し、 「自己紹介」を書き、さらにclife.htmlへのリンクを作成する。
と、言われてもすぐにできそうも無いので、回答例を。

~/html/index.html 

<html>
 <head>
  <title>山田花子のホームページ</title>
 </head>
 <body>
  <h1>山田花子のホームページ</h1>
  こんにちは。私は高知大学理学部 山田花子です。
  今、ホームページ作成の練習中です。
  <p>
  とりあえず、ここにあるのは
  <ul>
   <li><a href="clife.html">私のキャンパスライフ</a>
  </ul>
  だけです。よろしく。
 </body>
</html>

~/html/clife.html 

<html>
 <head>
  <title>山田花子のキャンパスライフ</title>
 </head>
 <body>
  <h1>山田花子のキャンパスライフ</h1>
  私が高知大に入学してから<b>早いもので</b>9カ月が経ちました。
  高校までは授業の予習・復習・受験勉強で忙しかったのに、
  大学に入ったら何を予習したらよいのか、ノートを見ても
  訳が分からないので何を復習したらよいのかわかりません。
  とりあえず、これといった資格を取る予定の勉強もないし、
  <i>暇で</i>、<b>閑で</b>、<u>ヒマで</u>、
  <font size="+3" color="red"><b>ひまで</b></font>、、、、
  私はどうしたらよいのでしょう？
  <p>
  室戸貫歩行けばよかった。
 </body>
</html>
上の例から進歩が無いのは最低点ですので、そのつもりで。。。
また、http://www.s.kochi-u.ac.jp/~tkikuchi/nb-99/ を参考に、自分のPCで絵を描いて貼り付けることもできます。 各自挑戦してみてください。
(但し、FTPサーバのアドレスは 情報科学ドメイン ftp.is.kochi-u.ac.jp を使ってください)