hobbylab.jp Software プログラミング HTML 開始&Note

Hyper Text Markup Language の事です。
ここで言う Text は文章を示し、Hyper Text は多くの文章を相互に関連付けして結びつける仕組みから文章を超えるものと言う意味です。
Markupは文章を飾り価値を高くすると言う意味で Markup Languageは文章を飾る言語と言う意味です。
飾るマークをタグと呼び、例えば或るホームページにリンクさせるタグとしては下記のように記載します。

<A href="https://www.hobbylab.jp" target="_blank">趣味の実験室！</A>

これをブラウザ（ホームページなどを見るアプリ）から見ると以下の様に見えます。

趣味の実験室

この『趣味の実験室』は青字?になっていると思いますが、この文字をクリックすると、今見ているページ以外の新たなページで www.hobbylab.jp の先頭文章が表示されます。
簡単な説明でしたが、この様な記号を使用した文章を扱っていたシステムが World Wide Web 略名 www です。
これがインターネット上で提供されている情報システムの一部になっています。

私は1995年ごろから簡単なHTMLを使いホームページを作成してきました。
その時からHTMLのレベル(文章の作り方やデザイン)は上達せず今に至っていました。
最近、ページでリンクを見やすくするためページを分割するframeタグ関係を使用しようと思っていました。
2024年11月ごろから調べてみるとframeタグはHTML5.0で廃止になったこと。
CSS(Cascading Style Sheets)で文章を飾る事が出来るということ。
HTML5.0からHTML Living Standard になったことなど判りました。
このため調べたことで面白い事や記憶しておいた方がよい事を書きとめるため本ページを作成しました。
ページを分割することにより使い勝手が良ければ、当方のページを修正して行きたいと思っています。
まず最初は歴史ですが、調べていて面白かった項目を超簡単ですが下記に記載します。

２.超簡単なHTMLの歴史

年月	内　　　容
1945年	ヴァネヴァー・ブッシュがThe Atlantic Monthly 誌の記事「As We May Think」で発表した『Memex』の概念にHyperTextの元となったシステムを掲載した。
1980年	ティモシー・"ティム"・ジョン・バーナーズ＝リーがロバート・カイリューとで欧州原子核研究機構(CERN)で行ったソフトウエアプロジェクトでWWWのアイデアが生み出されその名をENQUIRE(Enquire Within upon Everything)とした。
1990年12月	ティモシー・"ティム"・ジョン・バーナーズ＝リーがロバート・カイリューとともにWorld Wide Web（WWW）を考案し、ハイパーテキストシステムを実装・開発した。
1992年	イリノイ大学の米国立スーパーコンピュータ応用研究所 (NCSA) によって、画像なども扱えるようになった。
1993年	イリノイ大学の学生であったマーク・アンドリーセンは Mosaic (ブラウザ)を開発し、このソフトに改良を加えるために無料でソースコードを公開
1993年04月	CERNがwwwを無料で開放する事を発表
1993年06月	HTML1.0がインターネット標準化団体 IETF の IIIR Working Group から Internet Draft として公開
1993年11月	HTML PLUSが公開
1994年	非営利団体 World Wide Web Consortium 略称 W3C を設立ワールドワイドウェブ特有の技術、HTMLなど当初はIETFのRFCにより標準化が進められていたが、W3C設立以降はW3Cにより標準化が進められることになった。
1995年11月	HTML2.0がIETFから公開
1996年12月	CSS level 1 が W3Cから公開：CSS=Cascading Style Sheetsの略語しかしブラウザが対応しだしたのが2000年です。またCSSが普及するのはもっと先になる。
1997年01月	HTML3.2がW3Cから公開 IETFによりHTML3.0の仕様策定が進められていたが頓挫しW3CによりHTML3.2の仕様を策定し公開した。
1997年12月	HTML4.0がW3Cから公開
1998年05月	CSS level 2 が W3Cから公開
1999年12月	HTML4.1がW3Cから公開
2000年01月	XHTML1.0がW3Cから公開
2001年05月	XHTML 1.1がW3Cから公開
2004年06月	W3Cがウェブ開発者の要望を軽視していることなどを不満に思ったApple、Mozilla、Operaの開発者たちによって Web Hypertext Application Technology Working Group 略称 WHATWGを設立
2005年09月	WHATWGによって Web Applications 1.0と Web Forms 2.0 を策定
2008年01月	HTML5(草案)がW3Cから公開： WHATWGと共同作業により2007年5月には、Web Applications 1.0 を HTML5 と改名し、2008年1月に最初の草案(Working Draft)を公開したが・・・
2009年07月	W3Cが XHTML の開発を正式に中止
2009年10月	WHATWG が再び Web Applications 1.0 という名称を使い始める
2010年01月	WHATWG が「HTML5(including next generation additions still in development)」を発表
2011年06月	CSS level 2.1 がW3Cから公開
2011年10月	WHATWG が新Web Applications 1.0 と、版数の無い HTML を統合して、HTML Living Standard を公開
2014年10月	HTML5(勧告)がW3Cから勧告
2016年04月	CSS level 2.2 が公開
2016年11月	HTML5.1(勧告)がW3Cから勧告
2017年12月	HTML5.2(勧告)がW3Cから勧告
2018年12月	Microsoftの Edge が Chrome と同じ Chromium (WHATWG) ベースに移行することを発表
2019年05月	W3CとWHATWGはHTMLの開発で協力する事のお知らせがあった。
2021年01月	W3Cは WHATWG の HTML Living Standardを推奨することになった。HTML Review Draft — Published 29 January 2020 is a W3C Recommendation
現在2024年	HTML5.2の勧告ページには『このバージョンは古くなっています。最新バージョンについては、https://www.w3.org/TR/html52/ をご覧ください。』と表示されており HTML Living Standardと同じページになっている。

３.HTMLを書いてみよう

(1)HTMLを書く前に

　a.HTMLを書くときに必要な物は
　(a)Windows付属の『ノート』など文字をファイルに書込むアプリが必要です。
　　　私は『 Visual Studio Code 』を使用しています。
　　　『 Visual Studio Code 』のインストールがまだなら、左のメニューのｰｰ関連ｰｰ
　　　 5.アプリ、から 1.エディタ (1)エディタ『a.VSC導入』のリンクを確認下さい。
　(b)ファイル名の決まり事

　　***.html 又は ***.htm でHTMLのファイル名を書きます。
■ html と htm の違い　Windowsよりもむかし DOS と言うものがファイル管理をしていたころ、ファイル名として半角8字の名前.3文字の種別の制限が有った。
HTMLで書かれた文章は3文字の種別のため htm で表していました。
今ではその制限が無くなったので、どちらでも良いことになっています。
■ *** は
・半角の英数字と - ハイフン _ アンダースコア以外は使用しないで下さい。
　ブラウザ(HTMLを見るアプリ)やWebサーバーで誤動作する可能性が有るため使用しないようにして下さい。
・Webサーバーの機能として指定のURLでフィル名を省略した場合は、ファイル名が index.html または index.htm をブラウザに表示させます。
なおWEBサーバーでは同じホルダーに index.htm と index.html が有った場合には URL でファイル名が省略されている場合 index.html を優先して表示させるのが多いようです。
このため当方では種別を html でHTMLのファイルを書いています。

　b.必要な言語

　HTML言語(タグ)の他にCSSやJAVAスクリプトと言う言語のプログラムが必要となりますが、今はまずHTML言語を簡単に説明します。

(2)最低限のHTMLタグ

最初に知っておきたいタグはたったの10個です。

タ　グ	説　　明
***<br>	***に文章を入れ、最後に改行をしたいときにこの<br>タグを書きます。
<b>***</b>	<b>から</b>までの範囲が太文字になります。 ***の文章が太文字になります。
<ruby>***</ruby>	文字の上に『ふりながな(ルビ)』をつけます。
<hr>	罫線を引き上下を分離します。
<p>***</p>	***に一つの文章を入れます。最終は自動的に改行およびある程度の行間が入ります。
<h1>***</h1>	数字の部分は1～6まであり、***は見出し文字を入れます。
<a +++>***</a>	***に文字をしれます。この文字をクリックすることにより、他のページにリンクさせたり、メールアドレスへ送信を行うことが出来ます。 +++にリンクやメールの情報を書きます。
<img +++>	画像を貼り付けます。 +++には画像の情報を書きます。
<table +++> </table> <tr> </tr> <td> </td> <th> </th>	表の枠を作成する時に使用するタグです。
<script>+++</script>	CSSやJAVAスクリプトを呼び出す時に使用します。

(3)HTMLの使用例

私は下記内容を書込んでファイル名 test.html で記録しています。

<h1>HTML</h1><IMG src="../../../img/hobbylab_jp.gif" width="250" height="96" >
  この文章は<B>HTML</B>で書きます。
  まず改行するためbrタグを使用します。<br>
  このbrタグを使用した改行の行間と<br>
  <p>pタグで囲んだ文章で行間が違います。<br>
     pタグで囲んだ文章の違いが判りますか？</P>
  <h3>2.リンク,ルビ,罫線 タグの使用例</h3>
  <A href="https://www.hobbylab.jp" target="_blank">趣味の実験室</A>では
  <ruby>発電装置<rt>はつでんそうち</rt></ruby>の実験もしています。<br>
  次は罫線hrタグです。<HR>
  <H3>3.表の例を書くと</H3>
  1.列３ 行２ 枠あり<br>
  <TABLE border="1">
    <TR>
      <TD>1</TD>
      <TD>2</TD>
      <TD>3</TD>
    </TR>
    <TR>
      <TD>4</TD>
      <TD>5</TD>
      <TD>6</TD>
    </TR>
  </TABLE>
  2.列３ 行２ 枠なし<br>
  <TABLE>
    <TR>
      <TD>1</TD>
      <TD>2</TD>
      <TD>3</TD>
    </TR>
    <TR>
      <TD>4</TD>
      <TD>5</TD>
      <TD>6</TD>
    </TR>
  </TABLE>
  3.列３ 行２ 枠あり 行方向のセル結合<br>
  <TABLE border="1">
    <TR>
      <TD>1</TD>
      <TD>2</TD>
      <TD>3</TD>
    </TR>
    <TR>
      <TD colspan="2">4,5</TD>
      <TD>6</TD>
    </TR>
  </TABLE>
  4.列３行２枠あり列方向のセル結合<br>
  <TABLE border="1">
    <TR>
      <TD>1</TD>
      <TD>2</TD>
      <TD rowspan="2">3,6</TD>
    </TR>
    <TR>
      <TD>4</TD>
      <TD>5</TD>
    </TR>
  </TABLE>
  
  このような表も書くことができます。

上記を実行する

(4)インターネットで公開

インターネットで公開する場合は上記文章を下記のタグ集で挟みます。

タグ	説明
<!DOCTYPE html> <html +++>***</html>	この文章はHTMLで書かれたファイルですと言う宣言タグです。 +++に lang="ja" と書くとこのファイルは日本語で作成されている事を示します。ブラウザによると思うが、これを書かないと何語かを問うメッセージが出ることが有ります。
<head>***</head>	文章の基本的な情報を書きます。 titleやMETAで文字コードなどを書きます。
<title +++>***</title>	ブラウザの上にあるタブに表示する文字は <title>test_note1</title> の様に title タブで囲む文字が表示されます。
<META +++>	この文章の文字コードを下記の charset タグで記載します。例は今では通常使用されている UTF-8 を記載しています。 <META charset="UTF-8">
<BODY +++>***</BODY>	このタブで挟み込んだものが文章を示します。むかしはこのタブで+++領域に文章全体の文字の大きさや背景など指定していましたが、HTML5ではCSSで設定することになり+++の記載は無くなりました。

上記タグの使用例の文章として先のtest.htmlを使用して下記の様に記載します。
なおファイル名はtest1.htmlとして記録しています。

<html lang="ja">
    <head>
      <title>test</title>
      <META charset="UTF-8">
    </head>
    <BODY>
    
    <h1>HTML</h1><IMG src="../../../img/hobbylab_jp.gif" width="250" height="96" >
    <h3>1.文章の改行やブロック</h3>
    この文章は<B>HTML</B>で書きます。
    まず改行するためbrタグを使用します。<br>
    このbrタグを使用した改行の行間と<br>
    <p>pタグで囲んだ文章で行間が違います。<br>
       pタグで囲んだ文章の違いが判りますか？</P>
    <h3>2.リンク,ルビ,罫線 タグの使用例</h3>
    <A href="https://www.hobbylab.jp" target="_blank">趣味の実験室</A>では
    <ruby>発電装置<rt>はつでんそうち</rt></ruby>の実験もしています。<br>
    次は罫線hrタグです。<HR>
    <H3>3.表の例を書くと</H3>
    1.列３ 行２ 枠あり<br>
    <TABLE border="1">
      <TR>
        <TD>1</TD>
        <TD>2</TD>
        <TD>3</TD>
      </TR>
      <TR>
        <TD>4</TD>
        <TD>5</TD>
        <TD>6</TD>
      </TR>
    </TABLE>
    2.列３ 行２ 枠なし<br>
    <TABLE>
      <TR>
        <TD>1</TD>
        <TD>2</TD>
        <TD>3</TD>
      </TR>
      <TR>
        <TD>4</TD>
        <TD>5</TD>
        <TD>6</TD>
      </TR>
    </TABLE>
    3.列３ 行２ 枠あり 行方向のセル結合<br>
    <TABLE border="1">
      <TR>
        <TD>1</TD>
        <TD>2</TD>
        <TD>3</TD>
      </TR>
      <TR>
        <TD colspan="2">4,5</TD>
        <TD>6</TD>
      </TR>
    </TABLE>
    4.列３行２枠あり列方向のセル結合<br>
    <TABLE border="1">
      <TR>
        <TD>1</TD>
        <TD>2</TD>
        <TD rowspan="2">3,6</TD>
      </TR>
      <TR>
        <TD>4</TD>
        <TD>5</TD>
      </TR>
    </TABLE>
    
    このような表も書くことができます。
    
    </BODY>
    </html>

上記を実行する

簡単ですが、これである程度のHTML文章を書くことが出来ると思います。
参考になるHTMLのタグ(CSSも有ります)を収録している外部の方のページでは
クロノドライブのHTML辞典があります。

４.HLMLのNote

(1)HTML内のコメント

下記HTMLでコメントが出来るようになる。

(2)formの代替え方法

むかしむかしのHTMLではformタグで画面を分割(おのおのスクロールバーの表示が出来た)する事が出来たが、ファイルは分割した分だけ必要だった。
しかしよくよく調べてみると、下記HTMLタグ(表の枠と div タグでスクロールバーをコントロールする)で例えば3分割（上、下左、下右）する事が出来る事が判った。
なお下記に記載している <html style=" height: 100%;"> と <BODY style=" height: 100%;"> の100%についてはページ内部で使用している height: ;で値として % を使用するために必要な設定です。

上記を実行する

(3)ピクセル計算したい

CSSの関数を使用して計算を行う。
ブラウザの表示高さを得て或る表示高さ(ピクセル値)を引いた値が欲しい！
下記はWebブラウザの表示している高さを%とピクセルで計算するのに使用できる。
style="height:calc(100% - 100px) ; overflow: visible"
計算関数　calc(　)の意味は 100%（表示されている高さ）から100ピクセル減算すると言うこと。

(4)見出しH1~H6の設定

CSSを使用して設定する。なお全ページで表示したいので、CSSの設定文をファイルに書き、それをページから呼び出す形にする。
この場合呼び出すファイル
　名の属性部は ***.css とする。
　呼び出すページに記載する位置と記載方法は
　　<html >
　　<head>
　　
　　<link rel="stylesheet" href="***.css">
　　</head>
CSS文の内容

(5)更新日を自動的に表示したい。

JAVAスクリプトを使用する。なお全ページで表示したいので、JAVAスクリプトをファイルに書き、それをページから呼び出す形にする。
この場合呼び出すファイル
　名の属性部は ***.js とする。
　格納場所は呼びやすい場所に格納する。
また呼び出すページには
まずJAVBスクリプトの結果を受けるため
<time id="modified_date"></time>　更新

と書き、JAVAスクリプトが格納されている場所を
<script src="***.js"></script>
　と書くが、記載場所はページの最終行(</BODY>の前の行)に記載する。
　　<script src="***.js"></script>
　　</BODY>
　　</html>
以上の様に書く必要がある。

JAVAスクリプトの内容
これで例として下記の様に表示される。