画面サイズ(横:/縦:
2023130()1952
あと8分で午後8時です。もう夜になりましたね。
Topページへもどる
前のページへもどる

イラスト HTML(エィチ・ティー・エム・エル)とは?
(ページの内容は変更あり)

(1)HTML(エイチ・ティー・エム・エル)とは?

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

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

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

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

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

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

イラスト 未完成です。
 つぎは、HTMLの 歴史や、 バージョン(Version)の話です。

(2)HTMLの誕生からHTML5に至るまで

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

HTML1.0
 1993年(平成5年)、今から 30 年前に、1967年にアメリカのカンザスシティ生まれのコンピューター科学者である「 ダン・コノリー(Dan Connolly)」氏によって「 いわゆるHTML 1.0 」と呼ばれるものが考案されました。 Connolly氏 は、HTML 3.2およびHTML 4.0仕様を作成したW3CのHTMLワーキンググループの議長を務めました。
イラスト
「W3C」って何?
「W3C」とは「World Wide Web Consortium」の略だよ!頭文字の Wが3つ並ぶから「W3」で、 Consortium(コンソーシアム)とは、 「互いに力を合わせて目的に達しようとする組織や人の集団。 共同事業体」という意味だよ! イラスト

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

(3)HTMLのソースプログラムを見る方法

【ソース】って何?
「ソース」(source)略してsrcの意味は、 「IT用語辞典-eWord」には次のように解説されています。

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

■ブラウザが「Google Chrome」の場合
(1)MTMLソースを見たいページで右クリックする。
(2)表示されたメニューの中の
    「ページのソースを表示」をクリックする
■ブラウザが「Microsoft Edge」の場合
(1)MTMLソースを見たいページで右クリックする。
(2)表示されたメニューの中の
   「ソースの表示」をクリックする
(3)表示された画面の上部にある「要素」をクリックする
■ブラウザが「Firefox」の場合
(1)MTMLソースを見たいページで右クリックする。
(2)表示されたメニューの中の
   「ページのソースを表示」をクリックする
■ブラウザが「Opera ブラウザ」の場合
(1)MTMLソースを見たいページで右クリックする。
(2)表示されたメニューの中の
    「ページのソース」をクリックする
イラスト さぁ~!早速やってみよう!

(4)ソースプログラムの例
   (このページのPHPとHTMLです。)
   通常は上記の「(3)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">HTMLとは?</span>
    </TD>
</TR>
<TR><TD><HR></TD></TR>
<TR>
    <TD class="usuKiiro">
        <span class="large-black-b">(1)HTML(エイチ・ティー・エム・エル)とは?</span>
    </TD>
</TR>
<TR><TD><HR></TD></TR>
<TR>
    <TD>
        <span class="large-black-b">HTML</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>
         つぎは、HTMLの
          <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">(2)HTMLの誕生からHTML5に至るまで</span>
    </TD>
</TR>
<TR><TD><HR></TD></TR>
<TR>
    <TD>
        <span class="large-red-b">●</span>
        <span class="large-black-b">HTMLの誕生</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">HTML1.0</span><br> 1993年(平成5年)、今から
        <?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が3つ並ぶから「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">HTML2.0</span><br> 1995年(平成7年)、今から
        <?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>
        <TR>や<TD>はホームページ作成支援ソフトに頼らずにホームページを作成する人にとっては
        <span class="medium-red-b">HTMLの重要な基礎知識</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">(3)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>の意味は、
        「IT用語辞典-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>
        (1)MTMLソースを見たいページで右クリックする。<br>
        (2)表示されたメニューの中の<br>
            「ページのソースを表示」をクリックする<br>
        <span class="large-red-b">■ブラウザが「Microsoft Edge」の場合</span><br>
        (1)MTMLソースを見たいページで右クリックする。<br>
        (2)表示されたメニューの中の<br>
           「ソースの表示」をクリックする<br>
        (3)表示された画面の上部にある「要素」をクリックする<br>
        <span class="large-red-b">■ブラウザが「Firefox」の場合</span><br>
        (1)MTMLソースを見たいページで右クリックする。<br>
        (2)表示されたメニューの中の<br>
           「ページのソースを表示」をクリックする<br>
        <span class="large-red-b">■ブラウザが「Opera ブラウザ」の場合</span><br>
        (1)MTMLソースを見たいページで右クリックする。<br>
        (2)表示されたメニューの中の<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">(4)ソースプログラムの例</span><br>
        <span class="medium-black-b">   (このページのPHPとHTMLです。)</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 "で1時です。";
    }
    // ----- 午後1時から午後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時から午前0時の間の場合 ----------------------
    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 "で午前0時です。";
    }
    // ------------------------------------------
    // 追加メッセージ
    // ------------------------------------------
    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>";
}
?>
    
	

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


Topページへもどる
前のページへもどる