HTMLの表をつくる
HTML
- HTML (hypertext markup language) は、ウェブページをつくるためのマークアップ言語である。
文書中のそれぞれの文字列のやくわりや、文書間のリンクを表現できる。
- ここでいう hypertext は、(単に「テキストの上のほう」ではなく)
テキストどうしがつながることによって単なるテキストよりも高度なことができるようになったものをさすのだろう。
つながりかたは href リンクである。これは hypertext reference だろう。
どちらがどちらを参照しているかは一方向きだ。(双方リンクをつけようとするとてまがかかる。)
リンクの趣旨が、根拠なのか、批判対象なのか、同類なのか、などは、リンク自体からはわからず、
人が書いた文章を読んではじめてわかることや、わからないことがある。
- いま標準 (Living Standard) をつくっている団体は WHATWG (whatwg.org)。
かつて (HTML5 まで) は W3C (www.w3.org)。
- わたしが知っているのは、1997年の HTML3.2 から変わっていない範囲のこと。
- 似た形式で汎用のマークアップ言語 XML がある。
HTMLでもXMLでもある XHTML という形式の規格もつくられたが、更新されておらず、
ちかごろは奨励されていない。
HTMLの基本構造
- タグから構成される。
- <タグ名>内容</タグ名>
- ただし、タグだけで有効なものは、<タグ名> (最近の正式な形は <タグ名 />)
- 全体が <html> と </html> でつつまれる。
- head部 ... <head> と </head> でつつまれる。
- <title>題目</title> ... ページの題目 (ページ内には表示されない。
ブラウザの窓の枠などに表示される。検索エンジンがとりあげやすい。)
- 文字コードの指定 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- body部 ... <body> と </body> でつつまれる。ページに表示される内容はこの中に置かれる。
HTMLのおもな要素
- 段落 <p>内容</p> [paragraph]
- 文字列などのグループ (前後で改行) <div>内容</div>
- 見出し <h1>レベル1</h1> など [header]。番号が大きいほどこまかいレベル。
ただし、ブラウザではふつう、レベルのちがいを文字の大きさなどの表示に反映させるが、
階層構造のチェックはしない。
- 箇条書き 全体を <ul> ... </ul> [un-numbered list] でつつみ、各項目を <li> ... </li>
[list item] でしめす。入れ子構造可能。
- 横線 <hr>
- 改行 <br>
- 他のファイルへのリンク <a href="ファイル名">[...]</a>
- インターネット上の情報へのリンク 例 <a href="http://www.ris.ac.jp">[...]</a>
- 画像 <img src="画像ファイル名" alt="画像が表示できないとき表示される文字列" width=幅 height=高さ>
- 表 <table border=1> 内容 </table>
- 表を構成する行 <tr> 内容 </tr> [table row]
- 行を構成する要素 <td> 内容 </td> (または <th> 内容 </th> [table header] ... 見出し項目用)
文字列の属性指定
- 強調 [emphasis] <em>内容</em> ... 多くのブラウザでは斜体 [italic] <i>内容</i>と同じ。
- 強い強調 <strong>内容</strong> ... 多くのブラウザでは太字 [bold] <b>内容</b>と同じ。
- 下線 [underline] <u>内容</u>
注意
- HTML文法上の意味をもつ文字自体をしめしたいときは、複数文字からなる表現をつかう。
- 「<」は「 & l t ; 」(最後はセミコロン) を空白なしにつづける。(HTMLでは山かっことしてつかわれているが、lt は演算式の less than の不等号だから。)
- 「>」は「 & g t ; 」を空白なしにつづける。(gt は greater than の不等号。)
- 「&」は「 & a m p ; 」 を空白なしにつづける。(英語 ampersand から。)
ここでつくりたいウェブページ
画像が規則的につくられている。たて × よこ の表のかたちにしたい。
(例、たて は 時間、よこ は 変数の種類。)
ブラウザで表示させると、表のそれぞれの升目には縮小された画像が見える。
画像をクリックすると、拡大された画像が表示される。
【さいわいなことに、image タグの width または height を指定しておくと、
ブラウザが画像をその大きさにおさまるように縮小表示してくれるので、
縮小画像ファイルをつくっておく必要はない。
(ネット転送データ量を節約するためには、データ量の小さい縮小画像ファイルをつくっておいたほうが
よいのかもしれないが、まだそのやりかたはこころみていない。)】
画像ファイルが存在しないばあいは、そのことをしめす文字列が見える。
【これは、image タグの alt で実現できる。
ただし、くわしくいうと、画像ファイルが存在しないばあい以外にも alt 文字列が表示されることが
あるかもしれず、そのばあいには、alt 文字列を「画像ファイルが存在しない」という意味のものにしたら
まちがいになってしまう。
いまのところ、alt には画像ファイル名を入れている。
知らない人には意味不明だが、作業者が自分で見るためのページにはこれが有用だろう。】
Python によるプログラム例
- HTMLファイルをつくった Pythonプログラム
- 結果のHTMLファイル (注: 画像ファイルが適切な位置に置かれていない。)
- この例は、気象衛星 ひまわり の 赤外の輝度温度と可視の反射の強さを横に、
1時間ごとの時刻を縦にした表のなかで画像を配置するものである。
- 画像ファイルは、[気象衛星 ひまわり 8・9 号のデータ (千葉大による緯度経度格子データ) を読む]
のページで説明した map_tbb_v20251202.py と map_refl_v20251202.py で
つくられたものであり、ファイル名は、tbb2025071704gkanto.png、refl2025071704gkanto.png
などのように、UTC (世界時) の年月日時を数字でふくむ形で規則的につけられている。
- 【ひまわり以外の増田が作成したプログラム例には、
JST (日本標準時) の日時を入れるようにしたものが多い。
HTMLの表づくりは時刻がJSTであっても同様にできるが、
どの時間帯にもとづく時刻かがまぎれないように注意してほしい。】
- 日時の範囲の指定は、map_tbb, map_refl のプログラムと同様に、
UTC (世界時) で、yearstart, monthstart, daystart, hourstart から
yearend, monthend, dayend, hourend まで連続した期間とした。
- ただし、可視画像は、UTC の時刻で 23時および 0時から 7時
(JST で 8時から 16時) だけ作成したので、それに対応する処理をしている。
- プログラム例の現状では、画像ファイル名は「分」をふくんでいない。
画像は毎正時のものと想定し、
HTMLに表示される日時の文字列には、たとえば「23:00」のような形で、
つねに00分をふくめるようにしている。
正時の画像が千葉大のアーカイブに見あたらず10分後の画像で代用したばあいは、
手作業で、その時刻の UTCの列とJSTの列の両方にある文字列の
「:00」を「:10」と書きかえることにしている。
- プログラム例の現状では、
2025年 7月17日の 04 UTC (13 JST) から 18日 05 UTC (14 JST) までの
1時間ごとの地図画像を、時間を縦に、赤外の輝度温度と可視の反射の強さを横にならべる。
- ファイル名にふくめている地域名 (例では gkanto) は、
プログラム内の変数 region にあたえる文字列で指定している。
地域名がないばあいは、「region = ""」でよい。
画像作成時に地域名の前後に下線文字 (「_」) をはさんだばあいは、便宜上、
今回のプログラムの region には下線文字をふくめたものを指定する。
- 画像ファイルが imageのディレクトリにおかれ、
表をふくむHTMLファイルはそのディレクトリと横ならびにある
(上位のディレクトリが共通である) ことを想定している。
(HTML作成のときその配置になくても、ページを見るときその配置になっていればよい。)
- imagetable.html ← プログラムの標準出力を書き出したファイル
- image/ ← プログラム中の dirtbb の値で指定したディレクトリ
- image/ ← プログラム中の dirrefl の値で指定したディレクトリ
- Linux でも Windows でも、このディレクトリ配置にしておけば、
ウェブブラウザで imagetable.html を選択すれば、画像をふくむ表を見ることができる。
niigata, hamana には firefox というブラウザがはいっているが、
残念ながら TeraTerm 経由の利用では firefox は正常動作しない。
Windows では、OS常備の edge でも、firefox でも、chrome でもよい。
- HTMLファイルの表の各項目には、画像ファイル名を3重にふくめている。
- imageタグの src にふくめることによって、画像をページ中に表示する。
- imageタグの alt にふくめることによって、画像ファイルが表示できないときは
かわりにファイル名の文字列を表示する。
- aタグの href にふくめることによって、(srcで見えている画像またはalt文字列をクリックすると)
画像を単独で表示する。
- imageタグの width で、src にもとづいて表示した画像の画面上の大きさ (横方向の画素数) を指定している。
href をたどって表示される画像の大きさはそれに制約されない。
- 実習手順
- はじめてのばあい
- cp -r /home/masudako/ex/mkhtml . (スペースのあとにピリオド)
- cd mkhtml
- すでに mkhtml ディレクトリがあるばあい
- cd mkhtml
- cp /home/masudako/ex/mkhtml/mkhtmltable_v20251202.py .
- emacs mkhtmltable_v20251202.py で 各自の内容に応じて修正 (日時, region, ディレクトリ名など)
- python mkhtmltable_v20251202.py > imagetable.html
- もし画像ファイルの余白がじゃまならば、下の trimming 処理をおこなう。
【map_tbb_v20251202.py や map_refl_v20251202.py でつくった画像ならば、
savefig のオプションで余白部分をとりのぞくようにしてあるので、この処理は不要。】
- imagetable.html と image ディレクトリ (必要な画像をふくむもの) を
Windows に転送し、両者がディスク上で (エクスプローラーで見て)
横並びの位置にあるようにして、Windows のウェブブラウザで見る。
2023年度アドバンスト授業の教材としてつくった
[HTMLの表をつくる] のページは、
このページとだいたい同様だが、そのときは気象衛星ひまわりの10分間隔の画像をあつかった。
画像ファイルの加工
- 余白をきりおとす ... trim (trimming)
- convert -trim 入力ファイル名 出力ファイル名
- (ここでつかう convertは、ImageMagick または GraphicMagick (niigata, hamana にあるのは後者)
というフリーソフトウェアパッケージにふくまれるプログラム)
- 該当するすべての画像ファイルについて同じ作業をするためのしかけ
- 行き先のディレクトリをつくっておく。... 例、mkdir image_trimmed
- ファイル名一覧をつくる ... 例、 ls -1 *.png > ls1
【ここでの ls のオプションの文字は数字のイチである。エルではない。】
- (必要なばあいには) ファイル名一覧をエディタ作業で加工する。
- 加工対象でないファイルの名まえの行を消す。
- 作業によっては (画像ファイルの形式を変換するばあいなど)、
ファイル名の拡張子部分 (例、「.png」) をとりのぞく。
- ファイル名一覧を材料として、シェルスクリプト (実行するコマンドを書きならべたもの、例、dotrim.sh ) をつくる。
Python でも可能だが、増田の例文では シェルスクリプト mkdotrim.sh から awk を呼び出している。
- シェルスクリプト (例、dotrim.sh) を実行する。
(2021-11-11, 2023-12-22, 2025-07-01) 2025-12-02
増田 耕一 (MASUDA Kooiti)