HTMLの表をつくる
HTML (hypertext markup language)
- ウェブページをつくるためのマークアップ言語。
文書中のそれぞれの文字列のやくわりや、文書間のリンクを表現できる。
- いま標準 (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>
ここでつくりたいウェブページ
画像が規則的につくられている。たて × よこ の表のかたちにしたい。
(例、たて は 時間、よこ は 変数の種類。)
ブラウザで表示させると、表のそれぞれの升目には縮小された画像が見える。
画像をクリックすると、拡大された画像が表示される。
【さいわいなことに、image タグの width または height を指定しておくと、
ブラウザが画像をその大きさにおさまるように縮小表示してくれるので、
縮小画像ファイルをつくっておく必要はない。
(ネット転送データ量を節約するためには、データ量の小さい縮小画像ファイルをつくっておいたほうが
よいのかもしれないが、まだそのやりかたはこころみていない。)】
画像ファイルが存在しないばあいは、そのことをしめす文字列が見える。
【これは、image タグの alt で実現できる。
ただし、くわしくいうと、画像ファイルが存在しないばあい以外にも alt 文字列が表示されることが
あるかもしれず、そのばあいには、alt 文字列を「画像ファイルが存在しない」という意味のものにしたら
まちがいになってしまう。その対策はまだできていない。】
Python によるプログラム例
- HTMLファイルをつくった Python スクリプト mkhtml_10min.py。
hamana の /home/masudako/adv2023/himawari に追加した。
- HTMLファイルをつくる方法の例 (Linux上で) ... python3 mkhtml_10min.py > imagetable_10min.html
- この例は、2014年10月14日の 05:00 UTC から 06:50 UTC までの 10分ごとの地図画像を、
時間を縦に、赤外の輝度温度と可視の反射の強さを横にならべる。
- 12月1, 8, 15日の実習で作成した10分ごとの
輝度温度の画像ファイルが image_tbb_10min のディレクトリに、
反射の画像ファイルが image_refl_10min のディレクトリにおかれ、
HTMLファイルはその上位のディレクトリにあることを想定している。
- htmltable_10min.html
- image_tbb_10min/
- image_refl_10min/
- Linux でも Windows でも、このディレクトリ配置にしておけば、
ウェブブラウザで htmltable_10min.html を選択すれば、画像をふくむ表を見ることができる。
hamana には firefox というブラウザがはいっている。
Windows にも firefox をいれることもできるが、OS常備の edge でもよい。
- できたHTMLファイルの例 imagetable_10min.html
- HTMLファイルの表の各項目には、画像ファイル名を3重にふくめている。
- imageタグの src にふくめることによって、画像をページ中に表示する。
- imageタグの alt にふくめることによって、画像ファイルが表示できないときは
かわりにファイル名の文字列を表示する。
- hrefタグの a にふくめることによって、(srcで見えている画像またはalt文字列をクリックすると)
画像を単独で表示する。
- imageタグの width で、src にもとづいて表示した画像の画面上の大きさ (横方向の画素数) を指定している。
href をたどって表示される画像の大きさはそれに制約されない。
- 上記とはちがったファイル名やディレクトリ名に対応させること、
1時間ごとの画像の表をつくること、
12月8日にやった時間変化量の画像をいれた表をつくることなど、
プログラムの改造ができる。
- 実習手順
- hamana で、cd himawari
- cp /home/masudako/adv2023/himawari/mkhtml_10min.py .
- emacs -nw mkhtml_10min.py で 各自の内容に応じて修正
- (image_tbb_10min, image_refl_10min の内容とディレクトリ名が上記のとおりならばそのままでよい。)
- python3 mkhtml_10min.py > imagetable_10min.html
- 【これは teraterm + xming ではうまくいかないようだ。】 firefox imagetable_10min.html
- もし画像ファイルの余白がじゃまならば、下の trimming 処理をおこなう。
【この授業の衛星画像の地図作図プログラムでは、savefig のオプションで
余白部分をとりのぞくようにしてあるので、この処理は不要のはず。】
- imagetable_10min.html と image_tbb_10min, image_refl_10min を
ディレクトリ構成をたもって Windows に転送して (転送先で移動して同様な構成にしてもよい)、
Windows のウェブブラウザで見る。
画像ファイルの加工
- 余白をきりおとす ... trim (trimming)
- convert -trim 入力ファイル名 出力ファイル名
- (ここでつかう convertは、ImageMagick または GraphicMagick (hamana にあるのは後者)
というフリーソフトウェアパッケージにふくまれるプログラム)
- 該当するすべての画像ファイルについて同じ作業をするためのしかけ
- 行き先のディレクトリをつくっておく。... 例、mkdir image_trimmed
- ファイル名一覧をつくる ... 例、 ls -1 *.png > ls1
【ここでの ls のオプションの文字は数字のイチである。エルではない。】
- (必要なばあいには) ファイル名一覧をエディタ作業で加工する。
- 加工対象でないファイルの名まえの行を消す。
- 作業によっては (画像ファイルの形式を変換するばあいなど)、
ファイル名の拡張子部分 (例、「.png」) をとりのぞく。
- ファイル名一覧を材料として、シェルスクリプト (実行するコマンドを書きならべたもの、例、dotrim.sh ) をつくる。
(増田の例文では シェルスクリプト mkdotrim.sh から awk を呼び出しているが、Python でも可能。)
- シェルスクリプト (例、dotrim.sh) を実行する。
(2021-11-11) 2023-12-22
増田 耕一 (MASUDA Kooiti)