はじめに

HTMLやJavaScriptで文字や画像をローカル環境（公開サーバー上でない自分だけの動作環境）で表示・描画するには、拡張子がhtmlのテキストファイルを作成します。

小林一茶の俳句を画面に表示させるには以下のようなファイルを作ります。ファイル名はyasegaeru.htmlなどとします。

《yasegaeru.html》HTML言語

やせ蛙　負けるな一茶　ここにあり

同じようなことをC言語での記述は以下のようでありました。

《yasegaeru.C》C言語

#include <stdio.h>
int main(int argc, char *args[])
{
    printf("やせ蛙　負けるな一茶　ここにあり\n");
    return 0;
}

　

2つを比較するとCに較べHTMLでは前提条件は何もなく、表示内容を記述するだけです。強いてあげればhtmlというファイル拡張子だけです。

yasegaeru.htmlを作成しエクスプローラーなどでJavaScriptコードを実行し、やせ蛙　負けるな一茶　ここにありが表示されたら、あなたは立派なHTML(Javascript)の習得者です。

初めてHTMLやJavaScriptを扱うのならば、実際に動作させて自信を深め自分の血肉にしてください。

少しずつ進化

これらを少しずつ進化させます。本文だけでも構いませんが拡張したり高級化のために本文を＜p＞＜/p＞で囲みます。<や>は本来、半角文字ですが説明のために全角文字を使っています。ブログ記事はHTML言語を用いて記述しており、要素に用いる記号文字に半角文字を使うと表示が乱れるので便宜的に全角文字を用います。

加えて、＜div＞＜/div＞で大きく囲みます。divはdivisionを省略したものであり領域を定義します。

本文は通常サイズで補足説明は小さな文字で表示する場合、有効領域をブロックとして定義します。このような場合にdiv要素を使います。これらの改良コードと実行例を以下に示します。

yasegaeru1.htmlは最初の例と大差ありませんがp要素により段落として定義しています。<や>により囲まれた単語は要素、タグと呼ばれ特別な働きをしますが、ここでは多くを語りません。

改良コードと実行例

《yasegaeru1.html》

<div>
<p>やせ蛙　負けるな一茶　ここにあり</p>
</div>

《yasegaeru2.html》

<div>
<p>小林一茶の俳句　二首</p>
</div>
<div style="font-size:28px">
<p>やせ蛙　負けるな一茶　ここにあり</p>
<p>春雨に　大欠伸（おおあくび）する　美人かな</p>
</div>

※※※※※※※※※※※※※※※※※※※※※※※※※

《yasegaeru1.html》

《yasegaeru2.html》

今回のまとめ

今回はHTMLにより、実際にプログラムコードを作成し実行させてみました。divとp要素を使った単純な例です。

HTMLには多くの要素(タグ）が用意されており、これらを縦横無尽に使いこなしたときに熟達者と呼ばれることでしょう。次回は定番の例題を味のあるものに変身させてみます。

上述しましたが、既存のものに手を加えて応用し、少しずつ力を付けていきます。車を勝手に改造し公道を走らせることは許されません。これに対し、自由に改造して成長できることはなんと恵まれたことでしょう。

テキストファイル、拡張子とは何ぞやについては端折って語っていません。厳密に詳細に語るのは容易ではありません。100％理解できなくても前に進み、後に振り返るのも一方法です。次回以降で触れる機会があることでしょう。

余禄

古い人間には「やせ蛙　負けるな一茶　ここにあり」と記憶していますが、最近では『やせ蛙　負けるな一茶　これにあり』と記されることが多くなっています。