2007 年度「情報処理基礎」 2007-07-03 おまけ

HTML の書き方の補いです。（課題を出すために必須ではありません。）

「&」「"」「<」「>」の書き方

これらは HTML では特殊な意味を持つのでそのままは書けない。順に「&」「"」「<」「>」と書く約束である。（全角文字の場合はそのまま書けばよい。）

強制的に改行したい

改行したいところに   と書く。

ソースファイルに書いたとおりの配置で文字を表示させたい

<pre> と </pre> ではさまれた部分はそうなる。ただし、< は「<」と解釈されるなどするので、完全に書いたとおりではない。

背景の色を変えたい

冒頭の <body> を <body bgcolor="#RRGGBB"> と変えると、ページ全体の背景に色がつく。

「#RRGGBB」と書いた部分が色の指定である。 RR, GG, BB は赤、緑、青の強さを十六進二桁で指定する。十六進表記では 0, 1, ..., 9 のほかに a, b, c, d, e, f をそれぞれ十、十一、十二、十三、十四、十五の意味で使う。よくわからない人は 00, 11, 22, ..., 99, aa, bb, cc, dd, ee, ff の十六段階を使えばとりあえずは十分であろう。

色の例： #000000 黒。 #ff0000 赤、#00ff00 緑、#0000ff 青、 #ffff00 黄、#ff00ff 紫、 #00ffff 水色。 #888888 灰色。（これらの色名は HTML の規格にある正式なものではない。）

基本的な色については <body bgcolor="red"> のような書き方もできるようだ。

文字の色を変えたい

「これは赤い文字です」と書くと「これは赤い文字です」となる。色の指定法は背景の色のところを参照。

文字の大きさを変えたい

「ここは<big>大きな文字</big>にしたい」と書くと「ここは大きな文字にしたい」となる。

「ここは<big><big>もっと大きな文字</big></big>にしたい」と重ねて使うと「ここはもっと大きな文字にしたい」となる。

小さくしたければ big の代わりに small とする。「ここは小さな文字を使ってみました」と書くと「ここは小さな文字を使ってみました」となる。

字体を変えたい

イタリックにしたければ  と  とではさむ。

強調文字にしたければ  と  ではさむ。（ただし、イタリックと変わらないブラウザが多いようだ。）

もっと強調（？）した文字にしたければ  と  ではさむ。

表を書きたい

<table border="1">
<tr><td>２</td><td>９</td><td>４</td></tr>
<tr><td>７</td><td>５</td><td>３</td></tr>
<tr><td>６</td><td>１</td><td>８</td></tr>
</table>

と書いて

２	９	４
７	５	３
６	１	８

となるのが表の基本。

複数のマス目を一つにするには

<table border="1">
<tr><td colspan=2>２</td><td>４</td></tr>
<tr><td>７</td><td>５</td><td>３</td></tr>
<tr><td>６</td><td>１</td><td>８</td></tr>
</table>

で

２		４
７	５	３
６	１	８

となり、

<table border="1">
<tr><td rowspan=2>２</td><td>９</td><td>４</td></tr>
<tr><td>５</td><td>３</td></tr>
<tr><td>６</td><td>１</td><td>８</td></tr>
</table>

で

２	９	４
２	５	３
６	１	８

となることから各自で考えよ。

マス目の背景に色をつけるには

<table border="1">
<tr><td>２</td><td>９</td><td>４</td></tr>
<tr><td>７</td><td bgcolor="#ff8888">５</td><td>３</td></tr>
<tr><td>６</td><td>１</td><td>８</td></tr>
</table>

とすれば

２	９	４
７	５	３
６	１	８

となる。

<td> ... </td> を <th> ... </th> で置き換えると文字が太字になりマスの中央にくるブラウザが多いが、これは表の左や上の見出しに使うものらしい。

空欄となるマスは、 <td></td> と <td> </td> とで見た目が違う。（  はスペースを意味する。）

時間割を <table> ... </table> で書いてみるのはよい練習問題になる。

ブラウザの表示方法を変えて自分のページを見てみよう

あなたのページを読んでいる人に、あなたと全く同じ画面が見えているとは限りません。いろいろ試してみましょう。

「表示」「文字のサイズ」で文字のサイズが変えられる。また、「ツール」「インターネットオプション」「フォント」でフォント（字体）も変えられる。（これらは、自分のブラウザの表示方法を変えているに過ぎない。）
Netscape や Mozilla Firefox でも見てみよう。
lynx は、文字だけで表示するブラウザである。タイピング練習のときのようにして TeraTerm を起動するが、「ホスト名」に「ipe3001」または「ipe3002」と打ち込む。ログイン後、「[z07ja0??@ipe300? ~]$」みたいな印が出てきたら、「lynx」と打って Enter キーを押す。キー g を打つと「開きたい URL:」と聞いてくるので、打ち込む。マウスは使えないので、スペースキー、矢印キー、Enter キーなどで移動する。キー q で lynx を終了したら、タイピング練習のときと同じようにして TeraTerm を終了する。

ほかの人のページのソースファイルを見て参考にしよう

Internet Explorer で表示させておいて「表示」「ソース」とすれば「秀丸エディタ」でソースファイルを見ることができます。

ただし、まねしないほうがいいような書き方をしている人もいますから注意しましょう。

ホームページに絵を入れよう！

ホームページに絵や写真を入れるには、まず絵や写真を用意しなければなりません。 Windows で作りやすいことから、ここでは bmp という形式の画像ファイルを作りますが、これはインターネットでの標準的な方式ではないことを覚えておいてください。

Explorer でフォルダ web を表示させておいて「ファイル」「新規作成」「ビットマップイメージ」とすると「新規ビットマップイメージ.bmp」という名前のファイルができる。これを適当な名前に変える。ただし「.bmp」は変えないように。

それからそのアイコンを右クリックし、「プログラムから開く」「Paint」とすると、「ペイント」というソフトが動く。これは絵を描くための「メモ帳」みたいなもの、と理解してほしい。使い方はいろいろ試して覚えること。

ファイルができたら、 .html ファイルの中に <img src="a.bmp"> のように書けばそこにその絵がはいる。

注意：今回の課題で作るホームページに絵を入れても構いませんが、 “採点”は「絵なし」の状態で行ないます。

英語以外の外国語を自分のページに入れてみよう

ここを見てください。

岩瀬順一