（オトナの）一人でこっそり始めてみよう人生初プログラミング（WEB編その3）
本日の3行まとめ
ネット上に実際に表示してみる
ソースを確認する
どのような記述でどのように表示されるかを知る
その１はコチラ（htmlファイル作成＆表示編）
その２はコチラ（Web予備知識編）
その２－１はコチラ（FFFTP編）
いよいよ本番
本件にかかるコスト（タコパ）
タイパ＆コスパで計算します。名付けてタコパ（謎）
総時間 数分程度～数十分程度（以下を読む時間＆作業時間の合算）
総費用 パソコンの電気代＆アップロード先のサーバのランニングコスト
※現時点においてサーバ環境が用意できない方のために、実際のサーバ上にデータ（サンプル）を用意しましたので、そちらでご体感ください♪
（その場合の総費用は例によってパソコンの電気代です！）
本日の目標はネットにデータを表示させる！
以下のような画像が表示されれば本日の課題クリア！
データの準備
その１でつくったa.htmlを用意（アップロードする心の準備をします）
サーバにアップロードする
サーバ環境を用意できる方は、その２で予備知識をつけ、その２－１のようにFFFTP環境を準備し、接続するサーバ先を準備し、パソコンの中にあるa.htmlをサーバにアップロードします。
表示された内容をみる
上記画像のように指定されたURL上（ネット上）に、その１でつくったファイルがその通り表示されているかを確認して下さい。
※補足 サーバ環境が用意できない方へ
以下をクリックいただき「雰囲気」をつかんでください
※↓は私のゲーム制作用サーバ上に、今回の練習用に用意したものです。
URLの後方部分（/test/a.html）に深い意味はなく、今回サーバ環境が用意できない方に備え、testというディレクトリ（フォルダ）をつくり、その下にa.htmlというファイルをアップロードして以下のように表示されています。
↑をクリックするとタイトル画像と同じものが表示されます。
今サーバ環境が用意できない方は、上記に用意した実際のネット上の画面をみてリアル感を体感してください。
現時点では、へぇ～実際はこんな感じになるんだ！とでも思っておいていただけましたら十分でございます。
ソースを確認する
画面に表示されるモノと実際に記述される内容の違いを知る
画面の空いている所（今から楽しんで・・・の下あたりどこでもOK）でマウスを右クリックすると、以下のような画面が表示されます
ソースが表示されます
タイトル画像を表現している実際のhtmlソースコードが表示されます（以下画像参照）
① タイトル画像のように閲覧者の画面に「実際に表示される」URLです。
② URLの前にview-sourceと記載があります（小さくて申し訳ないですが）
こちらは、実際のHTMLデータ（ソースコード）として、画面を表示しているものです。
③ URL自体は本来のURLであり、ソースコードとして表示される場合には、URLの前にview-sourceがついているかどうかの違いということが画面よりお分かりいただけるかと思います。
④ 実際のHTMLソースコードです。
その１でつくったa.htmlファイルの内容を思い出してみてください。
確かに上記④のものをおつくりいただいたかと思います。
本日のまとめ（補足という気もする）
ネット上に実際に何かを表示させるということ
基本というか原点はここです。
データを用意してサーバにアップする。
それだけです。
そして今日はここまで分かれば（到達できれば）十分です。
後は装飾（デザイン）的なものであったり、その内容であったり、よりホームページらしく、というお話になっていきます。
いまだにdoctypeやらの説明もなければ記述もないんだけど…？
むしろそういうことです。でもきちんと表示されてますよね。
意味もなく、理由も分からず、つけなければいけないと習ったから…でつけるよりもシンプルにリアルを学べてよいと思います♪
一応さわりだけ
もはやdoctypeが気になって仕方がない！という方に…
別にもったいぶってるわけでも意地悪で説明していないわけでもないので、少し前補足的に説明させていただきますと、doctypeというのはhtmlのドキュメントタイプの宣言です（通称ドックタイプと呼んでいます）
「このホームページはHTMLバージョン〇で書いています！」と明示的に宣言し、その仕様に準拠するという宣言文のようなものです。
なぜその大事なdoctypeの話が後回しなのかについて
doctypeには複数のバージョンが存在し、html4.01ではDocument Type Definition（DTD）が３種類（厳密型、移行型、フレーム設定型の３つ）存在し、そのDTDごとに非推奨の要素や属性があります。
その勧告はW3C（World Wide Web Consortium）という機関が行っており、strictDTD（厳密型）が最も仕様的には厳しく厳格になり、この仕様に合わせてつくろうと思うと、チョットデザインが、、、とか色々と大変ですが、公共機関や病院関係だと喜ばしいつくりともいえたりムズカシイお話になったりもします。
このように、それ（Doctype）一つとっても、深堀していくとどこまでも話が深く重くなっていくため、今いきなりその話をするよりも、まずはネットに馴染んでいただきたい、ネットに自分の想いのものを表示できる楽しみを知ってほしいという思いから「後回し」にさせていただいておりました。
なぜサンプルではdoctype無しでいいのか
本サンプル（テキスト一行）（まぁ厳密にはBタグは使ってますが…）の表示にあたって（必要ないという意味ではなく）宣言無しでも実際表示して（出来て）イメージは体感できるため、ネットの入り口にシンプルに入ってきていただきたかったため、端折ったということです。
言い出すとキリがなくなって…
この話を突き詰めてまいりますと、標準モードや互換モードの話（レンダリング互換の話）、ブラウザ間の問題や要素の解釈etc色々と重い話になるのです。
いい悪い以前に、需要に合わせて（古いブラウザからでも型崩れせずに見れるようにするとか）色々考え出すと、それはもう完全に「仕事」として「プロ」が学ぶものですので、今はそこは色々と端折らせていただかないと話がまったく進みませんのでどうかご了承下さいませ…
次回予告
エヴァンゲリオンじゃないですが…
少しずつ形を覚えていったり（画面に目を慣らしていったり）CSSに記述してみたり、などしていきましょう。
出来ることは多いですが
そもそもタグを知らなければhtmlで表現できることとできないことの違いが分からないという話ですので、少しずついきましょう♪
当面はHTMLとCSSで
しばらくはこの二大巨頭で話が進みます。
送信ボタンの「先」をつくってみたいとか、少しずついい意味で欲もわいてくるかと思いますが、当面はフロントエンドの処理を覚えていく形で話を進めさせていただきます。
Javascriptについて
次回ではまだ早いですが、いずれはこの辺も多少は…と思っています。
ちなみにJavascriptとJavaは全く異なるものです。
ホームページでチョットしたボタンや装飾等、プログラムを必要とするシーンで使うのはJavascriptの方です。
※高度な処理にはJava等ガチ系言語でなければ難しい部分もあります（無理やり雰囲気それっぽくするためのAjaxとかは簡単に使えるため一時期流行りましたが…）
PHPやMySQLの話はさらにその後の後くらいに
ここでもまた一段グッと難易度が上がるので、その２０くらいまでいくと少し話がでてくるかもしれませんが、気になっている方もいらっしゃるかもしれませんが、当分放置プレイでOKです。
PHPは言語として、MySQLはSQLそのものの勉強とMySQLの仕様と使い方の理解が必要という色々と色々になってきます。
もし、万が一、サポートいただけるようなことがあった場合には、NOTEの記事の方でしっかりと記事と合わせてサポート額の使い道を報告させていただきます。 （先日落雷でパソコンが破壊されたので多分当分はその買い替え費用の足しにさせていただくことに…すみませんすみません）