HTMLとは？

画面サイズ（横：／縦：）

2023年12月3日(日)9時37分
あと23分で10時です。今日も一日頑張りましょう！

ＨＴＭＬ（エィチ・ティー・エム・エル）とは？
（ページの内容は変更あり)

（１）ＨＴＭＬ(エイチ・ティー・エム・エル)とは？

ＨＴＭＬ(エイチ・ティー・エム・エル)とは HyperText Markup Languageの略です。
※ HyperText（ハイパー・テキスト）の Hyperは、（～を超えた）という意味で、 Text （テキスト）の意味は（文書）です。
つまり、「ハイパー・テキスト」とは「普通の文書（テキスト）を超えた素晴らしい文書」という意味でしょうか。

※Markup （マークアップ）の意味は「マークを付ける」という意味で、テキスト（文書）に「タグ」と呼ばれるマークを付けること。
「タグ（tag）」の意味は、「荷札」とか「付箋」という意味があります。

　具体的に言えば、
おはようございます。
と大文字〇号で表示する場合は
＜大文字〇号＞おはようございます。＜／大文字〇号＞
となります。

　また、こんにちは
と大文字で表示する場合は
＜大文字〇号＞こんにちは＜／大文字〇号＞
となります。

　さらに、
ハロー！
と「赤色の大文字」で表示する場合の手順は
＜赤色＞＜大文字〇号＞ハロー！＜／大文字〇号＞＜／赤色＞
という具合になります。

※「／」は終了の合図で、色指定を省略すれば規定の色（黒色を規定の色にしていれば黒）で表示されます。

未完成です。
　つぎは、ＨＴＭＬの歴史や、バージョン（Version）の話です。

（２）ＨＴＭＬの誕生からＨＴＭＬ５に至るまで

● ＨＴＭＬの誕生
　1989年(平成元年)、今から 34 年前に、スイスのジュネーブの CERN(欧州原子核研究機構) 【ヨーロッパの12か国が共同で研究を行う機関】で、イギリスの計算機科学者「ティム・バーナーズ・リー」氏や「ロバート・カイリュー」氏によって、 World Wide Web（WWW）が考案・開発されました。

● ＨＴＭＬ１．０
　1993年(平成５年)、今から 30 年前に、1967年にアメリカのカンザスシティ生まれのコンピューター科学者である「ダン・コノリー（Dan Connolly）」氏によって「いわゆるHTML 1.0 」と呼ばれるものが考案されました。 Connolly氏は、HTML 3.2およびHTML 4.0仕様を作成したW3CのHTMLワーキンググループの議長を務めました。
イラスト

「W3C」って何？
「W3C」とは「World Wide Web Consortium」の略だよ！頭文字の Wが３つ並ぶから「W3」で、 Consortium（コンソーシアム）とは、「互いに力を合わせて目的に達しようとする組織や人の集団。共同事業体」という意味だよ！

● ＨＴＭＬ２．０
　1995年(平成７年)、今から 28 年前の11月に制定されました。
画像の表示はできるが「テーブル要素がない」、「マルチメディアには対応してない」など、シンプルなHTMLでした。最初の「標準」HTMLと呼ばれるものです。
table要素とは「表」のことで、表の中には1つ以上の「行」があり、その行の中にはまた1つ以上の「セル」があるという考え方でテーブルを表現します。
「行」をtr要素（Table Row）、「セル」をtd要素（Table Data）で表します。
＜ＴＲ＞や＜ＴＤ＞はホームページ作成支援ソフトに頼らずにホームページを作成する人にとってはＨＴＭＬの重要な基礎知識の一つです。

（３）HTMLのソースプログラムを見る方法

● 【ソース】って何？
「ソース」（source）略してsrcの意味は、「ＩＴ用語辞典-eWord」には次のように解説されています。

　ソースとは、源、起源、情報源、発信源、原典、出典、転送元、複製元、水源、光源、音源などの意味を持つ英単語。外来語としてはタレを意味するソース（sauce）と同音異義語だが、英語では綴りも発音も全く異なり何の共通点もない。

■ブラウザが「Google Chrome」の場合
（１）MTMLソースを見たいページで右クリックする。
（２）表示されたメニューの中の
　　　　「ページのソースを表示」をクリックする
■ブラウザが「Microsoft Edge」の場合
（１）MTMLソースを見たいページで右クリックする。
（２）表示されたメニューの中の
　　　「ソースの表示」をクリックする
（３）表示された画面の上部にある「要素」をクリックする
■ブラウザが「Firefox」の場合
（１）MTMLソースを見たいページで右クリックする。
（２）表示されたメニューの中の
　　　「ページのソースを表示」をクリックする
■ブラウザが「Opera ブラウザ」の場合
（１）MTMLソースを見たいページで右クリックする。
（２）表示されたメニューの中の
　　　　「ページのソース」をクリックする

さぁ～！早速やってみよう！

（４）ソースプログラムの例
　　　（このページのＰＨＰとＨＴＭＬです。）
　　　通常は上記の「（３）HTMLのソースプログラムを見る方法」ではPHPのプログラムは見えません。

    
    <?php
    header("Content-Type: text/html; charset=UTF-8");
    // PHPの初期設定
    ini_set('mbstring.language', 'ja');
    ini_set('mbstring.internal_encoding', 'UTF-8');

    // サーバー名を取得する
    $server_mei = $_SERVER["SERVER_NAME"];

    // 日時情報取得
    //タイムゾーンを日本の時間に設定
    date_default_timezone_set('Asia/Tokyo');
    $Now = getdate();
    $Nen = $Now["year"];
    $Tuki = 1*$Now["mon"];
    $Day = $Now["mday"];
    $Ji = $Now["hours"];
    $Fun = $Now["minutes"];
    // $Byou = $Now["seconds"];
    $week = array( "日", "月", "火", "水", "木", "金", "土" );
    $youbi = $week[date("w")];
    $Nitiji = $Nen . "年" . $Tuki . "月" . $Day . "日" . $Ji . "時" . $Fun . "分";

    // --------------------------------------------
    // 「HTML(WWW)」誕生からの経過年数を求める
    // --------------------------------------------
    $WWW_keikaNen = intval($Nen) - intval("1989");
    // --------------------------------------------
    // 「HTML1.0」誕生からの経過年数を求める
    // --------------------------------------------
    $HTMLver1_keikaNen = intval($Nen) - intval("1993");
    // --------------------------------------------
    // 「HTML2.0」誕生からの経過年数を求める
    // --------------------------------------------
    $HTMLver2_keikaNen = intval($Nen) - intval("1995");

?>
<!DOCTYPE HTML>
<HTML lang="ja">
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<META name="viewport" content="width=device-width">
<meta name="author" content="新村　保">
<LINK REL="PREV" HREF="../index.php">
<TITLE>HTMLとは？</TITLE>
<LINK rel="stylesheet" href="../css/allDeviceCss/table_settei.css" type="text/css">
<LINK rel="stylesheet" href="../css/allDeviceCss/fontSoutaiSettei.css" type="text/css">
<LINK rel="stylesheet" href="../css/allDeviceCss/style_syosettei.css" type="text/css">
<LINK rel="stylesheet" href="../css/allDeviceCss/mediaQueriCss.css" type="text/css">
<script type="text/javascript">
    <!--
    setTimeout("location.reload()",60000);
    // -->
</script>
</HEAD>
<BODY>
<DIV class="wakuNasiHaba100_table">
<TABLE>
<TBODY>
<TR>
    <TD style="text-align : right;">
        <?php
        $GamenWidth = '<script>
        document.write(window.localStorage.getItem("画面横サイズ"));
        </script>';
        $GamenHeight = '<script>
        document.write(window.localStorage.getItem("画面縦サイズ"));
        </script>'; 
        //取得したJSONデータ文字列を表示する
        echo "画面サイズ（横：" . $GamenWidth . "／縦：" . $GamenHeight . "）"; 
        ?>
    </TD>
</TR>
<TR>
    <TD style="text-align : center">
        <?php
        $kekka = jikokuMessage($Nen, $Tuki, $Day, $youbi, $Ji, $Fun, $GamenWidth);
        ?>
    </TD>
</TR>
<TR>
    <TD>
        <A href="../index.php">Topページへもどる</A>
    </TD>
</TR>
<TR>
    <TD class="usuBlue" style="text-align : center">
        <IMG src="../images/a_ilst207.gif" width="49" height="13" alt="イラスト">
        <span class="xlarge-black-b">ＨＴＭＬとは？</span>
    </TD>
</TR>
<TR><TD><HR></TD></TR>
<TR>
    <TD class="usuKiiro">
        <span class="large-black-b">（１）ＨＴＭＬ(エイチ・ティー・エム・エル)とは？</span>
    </TD>
</TR>
<TR><TD><HR></TD></TR>
<TR>
    <TD>
        <span class="large-black-b">ＨＴＭＬ</span>(エイチ・ティー・エム・エル)とは
        <span class="large-black-b">HyperText Markup Language</span>の略です。
        <br>※
        <span class="large-black-b">HyperText</span>（ハイパー・テキスト）の
        <span class="large-black-b">Hyper</span>は、（～を超えた）という意味で、
        <span class="large-black-b">Text</span>
        <span class="medium-red-b">（テキスト）</span>の意味は
        <span class="large-black-b">（文書）</span>です。<br>
        つまり、「ハイパー・テキスト」とは「普通の文書（テキスト）を超えた
        <span class="medium-red-b">素晴らしい文書</span>」という意味でしょうか。
    </TD>
</TR>
<TR><TD><HR></TD></TR>
<TR>
    <TD>
        ※<span class="large-black-b">Markup</span>
        <span class="medium-red-b">（マークアップ）</span>の意味は「マークを付ける」という意味で、
        テキスト（文書）に「タグ」と呼ばれるマークを付けること。
        <br>「タグ（tag）」の意味は、「荷札」とか「付箋」という意味があります。
    </TD>
</TR>
<TR><TD><HR></TD></TR>
<TR>
    <TD>
        具体的に言えば、
        <br>
        <span class="xlarge-black-b">おはようございます。</span>
        <br>と大文字〇号で表示する場合は
        <br><span class="medium-black-b">
        ＜大文字〇号＞おはようございます。＜／大文字〇号＞
        </span>
        <br>となります。
    </TD>
</TR>
<TR><TD><HR></TD></TR>
<TR>
    <TD>
        　また、
        <span class="xxlarge-black-b">こんにちは</span>
        <br>と大文字で表示する場合は
        <br><span class="medium-black-b">
        ＜大文字〇号＞こんにちは＜／大文字〇号＞
        </span>
        <br>となります。
    </TD>
</TR>
<TR><TD><HR></TD></TR>
<TR>
    <TD>
        さらに、<br>
        <span class="xxlarge-red-b">ハロー！</span>
        <br>と「赤色の大文字」で表示する場合の手順は
        <br><span class="medium-black-b">
        ＜赤色＞＜大文字〇号＞ハロー！＜／大文字〇号＞＜／赤色＞</span>
        <br>という具合になります。
    </TD>
</TR>
<TR><TD><HR></TD></TR>
<TR>
    <TD>
        ※「／」は終了の合図で、色指定を省略すれば規定の色（黒色を規定の色にしていれば黒）で表示されます。
    </TD>
</TR>
<TR><TD><HR></TD></TR>
<TR>
    <TD>
        <IMG src="../images/a_ilst207.gif" width="49" height="13" alt="イラスト">
        <span class="medium-red-b">未完成です。</span><br>
        　つぎは、ＨＴＭＬの
          <span class="large-black-b">歴史</span>や、
          <span class="large-black-b">バージョン</span>（Version）の話です。
    </TD>
</TR>
<TR><TD><HR></TD></TR>
<TR>
    <TD class="usuKiiro">
        <span class="large-black-b">（２）ＨＴＭＬの誕生からＨＴＭＬ５に至るまで</span>
    </TD>
</TR>
<TR><TD><HR></TD></TR>
<TR>
    <TD>
        <span class="large-red-b">●</span>
        <span class="large-black-b">ＨＴＭＬの誕生</span><br>　1989年(平成元年)、今から
        <?php
            echo "<span class='medium-black-b'>";
            echo $WWW_keikaNen;
            echo "</span>";
        ?>
        年前に、スイスのジュネーブの
        <span class="medium-black-b">CERN(欧州原子核研究機構)</span>
        【ヨーロッパの12か国が共同で研究を行う機関】で、イギリスの計算機科学者「
        <span class="medium-black-b">ティム・バーナーズ・リー</span>」氏や「
        <span class="medium-black-b">ロバート・カイリュー</span>」氏によって、
        <span class="medium-black-b">World Wide Web（WWW）</span>
        が考案・開発されました。
    </TD>
</TR>
<TR><TD><HR></TD></TR>
<TR>
    <TD>
        <span class="large-red-b">●</span>
        <span class="large-black-b">ＨＴＭＬ１．０</span><br>　1993年(平成５年)、今から
        <?php
            echo "<span class='medium-black-b'>";
            echo $HTMLver1_keikaNen;
            echo "</span>";
        ?>
        年前に、1967年にアメリカのカンザスシティ生まれのコンピューター科学者である「
        <span class="medium-black-b">ダン・コノリー（Dan Connolly）</span>」氏によって「
        <span class="medium-black-b">いわゆるHTML 1.0</span>
        」と呼ばれるものが考案されました。
        Connolly氏 は、HTML 3.2およびHTML 4.0仕様を作成したW3CのHTMLワーキンググループの議長を務めました。<br>
        <IMG src="../images/a_ilst037.gif" width="60" height="84" alt="イラスト"><br>
        <span class="medium-black-b">「W3C」って何？</span><br>
        「W3C」とは「World Wide Web Consortium」の略だよ！頭文字の
        <span class="medium-black-b">Wが３つ並ぶから「W3」</span>で、
        <span class="medium-black-b">Consortium（コンソーシアム）</span>とは、
        「互いに力を合わせて目的に達しようとする組織や人の集団。
        <span class="medium-black-b">共同事業体</span>」という意味だよ！
        <IMG src="../images/a_ilst207.gif" width="49" height="13" alt="イラスト">
    </TD>
</TR>
<TR><TD><HR></TD></TR>
<TR>
    <TD>
    <span class="large-red-b">●</span>
        <span class="large-black-b">ＨＴＭＬ２．０</span><br>　1995年(平成７年)、今から
        <?php
            echo "<span class='medium-black-b'>";
            echo $HTMLver2_keikaNen;
            echo "</span>";
        ?>
        年前の11月に制定されました。<br>
        画像の表示はできるが「テーブル要素がない」、「マルチメディアには対応してない」など、シンプルなHTMLでした。
        <span class="medium-black-b">最初の「標準」HTML</span>と呼ばれるものです。<br>
        <span class="medium-black-b">table要素</span>とは「表」のことで、表の中には1つ以上の「行」があり、
        その行の中にはまた1つ以上の「セル」があるという考え方でテーブルを表現します。<br>
        <span class="medium-black-b">「行」をtr要素</span>（Table Row）、
        <span class="medium-black-b">「セル」をtd要素</span>（Table Data）で表します。<br>
        ＜ＴＲ＞や＜ＴＤ＞はホームページ作成支援ソフトに頼らずにホームページを作成する人にとっては
        <span class="medium-red-b">ＨＴＭＬの重要な基礎知識</span>の一つです。
        <IMG src="../images/a_ilst151.gif" width="48" height="27" alt="イラスト">
    </TD>
</TR>
<TR><TD><HR></TD></TR>
<TR>
    <TD class="usuKiiro">
        <span class="large-black-b">（３）HTMLのソースプログラムを見る方法</span>
    </TD>
</TR>
<TR><TD><HR></TD></TR>
<TR>
    <TD>
        <span class="large-red-b">●</span>
        <span class="large-black-b">【ソース】って何？</span><br>
        <span class="large-black-b">「ソース」（source）略してsrc</span>の意味は、
        「ＩＴ用語辞典-eWord」には次のように解説されています。
    </TD>
</TR>
<TR><TD><HR></TD></TR>
<TR>
    <TD class="usuKiiro">
        　ソースとは、源、起源、情報源、発信源、原典、出典、転送元、複製元、水源、光源、音源などの意味を持つ英単語。
        外来語としてはタレを意味するソース（sauce）と同音異義語だが、英語では綴りも発音も全く異なり何の共通点もない。
    </TD>
</TR>
<TR><TD><HR></TD></TR>
<TR>
    <TD>
        <span class="large-red-b">■ブラウザが「Google Chrome」の場合</span><br>
        （１）MTMLソースを見たいページで右クリックする。<br>
        （２）表示されたメニューの中の<br>
        　　　　「ページのソースを表示」をクリックする<br>
        <span class="large-red-b">■ブラウザが「Microsoft Edge」の場合</span><br>
        （１）MTMLソースを見たいページで右クリックする。<br>
        （２）表示されたメニューの中の<br>
        　　　「ソースの表示」をクリックする<br>
        （３）表示された画面の上部にある「要素」をクリックする<br>
        <span class="large-red-b">■ブラウザが「Firefox」の場合</span><br>
        （１）MTMLソースを見たいページで右クリックする。<br>
        （２）表示されたメニューの中の<br>
        　　　「ページのソースを表示」をクリックする<br>
        <span class="large-red-b">■ブラウザが「Opera ブラウザ」の場合</span><br>
        （１）MTMLソースを見たいページで右クリックする。<br>
        （２）表示されたメニューの中の<br>
        　　　　「ページのソース」をクリックする<br>
        <IMG src="../images/a_ilst151.gif" width="48" height="27" alt="イラスト">
        さぁ～！早速やってみよう！
    </TD>
</TR>
<TR><TD><HR></TD></TR>
<TR>
    <TD class="usuKiiro">
        <span class="large-black-b">（４）ソースプログラムの例</span><br>
        <span class="medium-black-b">　　　（このページのＰＨＰとＨＴＭＬです。）</span>
    </TD>
</TR>
<TR><TD><HR></TD></TR>

    </code>
    </pre>
    </TD>
</TR>
<TR><TD><BR></TD></TR>
<TR><TD><BR></TD></TR>
<TR><TD><BR></TD></TR>
<TR>
    <TD>
        <A href="../index.php">Topページへ</A>
    </TD>
</TR>
<TR><TD><BR></TD></TR>
</TBODY>
</TABLE>
</DIV>
</BODY>
</HTML>
<?php
// 時刻に応じたメッセージ
function jikokuMessage($Nen, $Tuki, $Day, $youbi, $Ji, $Fun, $GamenWidth){
    if($GamenWidth>500){
        echo "<span class='medium-black-b'>ただ今の時刻は</span>";
    }
    echo "<span class='medium-red-b'>" . $Nen . "</span>";
    echo "<span class='medium-black-b'>年</span>";
    echo "<span class='medium-red-b'>" . $Tuki . "</span>";
    echo "<span class='medium-black-b'>月</span>";
    echo "<span class='medium-red-b'>" . $Day . "</span>";
    echo "<span class='medium-black-b'>日</span>";
    echo "<span class='medium-black-b'>(</span>";
    echo "<span class='medium-red-b'>" . $youbi . "</span>";
    echo "<span class='medium-black-b'>)</span>";
    // -----------------------------------------------------
    echo "<span class='medium-red-b'>" . $Ji . "</span>";
    echo "<span class='medium-black-b'>時</span>";
    if($Fun < 10){
        echo "<span class='medium-red-b'>0" . $Fun . "</span>";
        }
        else{
        echo "<span class='medium-red-b'>" . $Fun . "</span>";
    }
    echo "<span class='medium-black-b'>分</span>";
    if($GamenWidth>500){
        echo "<span class='medium-black-b'>です。</span>";
    }
    echo "<BR>";
    // ------ 午前11時までの場合 -------------------------------
    if(($Ji <= 11) and ($Fun < 30)){
        echo "午前" . $Ji . "時を過ぎました。";
        if(($GamenWidth>0) and ($GamenWidth<500)){
            echo "<br>";
        }
    }
    if(($Ji <= 11) and ($Fun >= 30)){
        $nkoriFun = 60-$Fun;
        echo "<span class='medium-red-b'>あと" . $nkoriFun . "分</span>";
        $hyoujiJi = 1*$Ji+1;
        echo "で" . $hyoujiJi . "時です。";
    }
    // ---- 昼の12時から13時の間の場合　-------------------------------
    if(($Ji == 12) and ($Fun < 30)){
        echo "お昼の" . $Ji . "時を過ぎました。";
        if(($GamenWidth>0) and ($GamenWidth<500)){
            echo "<br>";
        }
    }
    if(($Ji == 12) and ($Fun >= 30)){
        $nkoriFun = 60-$Fun;
        echo "<span class='medium-red-b'>あと" . $nkoriFun . "分</span>";
        echo "で１時です。";
    }
    // ----- 午後１時から午後11時の間の場合　------------------------------
    if(($Ji >= 13) and ($Ji < 23) and ($Fun < 30)){
        $hyoujiJi = 1*$Ji-12;
        echo "午後" . $hyoujiJi . "時を過ぎました。";
        if(($GamenWidth>0) and ($GamenWidth<500)){
            echo "<br>";
        }
    }
    if(($Ji >= 13) and ($Ji < 23) and ($Fun >= 30)){
        $nkoriFun = 60-$Fun;
        echo "<span class='medium-red-b'>あと" . $nkoriFun . "分</span>";
        $hyoujiJi = 1*1*$Ji-11;
        echo "で午後" . $hyoujiJi . "時です。";
    }
    // ------ 午後11時から午前０時の間の場合 ----------------------
    if(($Ji == 23) and ($Fun < 30)){
        echo "午後11時を過ぎました。";
        if(($GamenWidth>0) and ($GamenWidth<500)){
        echo "<br>";
        }
    }
    if(($Ji == 23) and ($Fun >= 30)){
        $nkoriFun = 60-$Fun;
        echo "<span class='medium-red-b'>あと" . $nkoriFun . "分</span>";
        echo "で午前０時です。";
    }
    // ------------------------------------------
    // 追加メッセージ
    // ------------------------------------------
    if($Ji == 0 ) {
        $msg2 = "まだ起きているのですか？";
    }
    if($Ji == 1 ) {
        $msg2 = "深夜にご苦労さま！";
    }
    if($Ji == 2 ) {
        $msg2 = "まだ起きているのですか？";
    }
    if($Ji == 3 ) {
        $msg2 = "まだ起きているの？　もう起きたの？　どっちかな？";
    }
    if($Ji == 4 ) {
        $msg2 = "もう起きたの？　ご苦労さま！";
    }
    if(($Ji >= 5) and ($Ji < 8)) {
        $msg2 = "おはようございます。";
    }
    if(($Ji >= 8) and ($Ji < 10)) {
        $msg2 = "今日も一日頑張りましょう！";
    }
    if($Ji == 10) {
        $msg2 = "「こんにちは」かな？";
    }
    if($Ji == 11) {
        $msg2 = "もうすぐお昼になりますね。";
    }
    if($Ji == 12) {
        $msg2 = "昼ごはん食べましたか？";
    }
    if($Ji == 13) {
        $msg2 = "午後も仕事や勉強で頑張りましょう！";
    }
    if(($Ji >= 14) and ($Ji < 16)) {
        $msg2 = "こんにちは！";
    }
    if($Ji == 16) {
        $msg2 = "そろそろ夕方になりますね。";
    }
    if($Ji == 17) {
        $msg2 = "もう夕方になりましたね。";
    }
    if($Ji == 18) {
    $msg2 = "こんばんわ！";
    }
    if($Ji == 19) {
        $msg2 = "もう夜になりましたね。";
    }
    if($Ji == 20) {
        $msg2 = "こんばんわ！";
    }
    if(($Ji >= 21) and ($Ji < 23)) {
        $msg2 = "今日も一日お疲れ様でした。";
    }
    if($Ji == 23) {
        $msg2 = "夜も遅くなりましたね。";
    }
    echo "<span class='medium-red-b'>" . $msg2 . "</span>";
}
?>

※通常のページは、上記の「（３）HTMLのソースプログラムを見る方法」ではPHPのプログラムは見えません。特別にお見せします。
（このページに限ってＰＨＰのプログラムをお見せしました。）

Topページへもどる

前のページへもどる