どうもこんにちは、ジョリビーです。前回はPHPプログラミングで「Hello world!」と表示するところまで来ました。今回はWebサイトとhtmlについて解説と実装をしていこうと思います。
なお、本格的に学びたい方はTechAcademy [テックアカデミー] 
のオンラインスクールを強くお勧めしています。学ぶだけではなく転職サポートも付いているので、IT業界への転職にはピッタリです。ちなみに私の妻もテックアカデミーを利用して転職しました。
なお、当ブログで行っているプログラミング講座は、テックアカデミーでいうとはじめてのプログラミングコースのカリキュラムと学習範囲が重なっています。当ブログで基礎を学び、テックアカデミーではより転職に繋がるスキルを身に着けるといった使い方がとてもいい感じです。
そもそもWebサイトの仕組みがいまいち分からない
プログラミングを学習する前に、Webってなんだ？ってところから解説していきたいと思います。すでに「そんなこといちいち説明しなくても分かってるよ」となってる方は、軽く読み飛ばしていただければと思います。
では、webが何なのか引用を使って解説していきます。
World Wide Web（ワールド・ワイド・ウェブ、略名：WWW）とは、インターネット上で提供されているハイパーテキストシステムである。Web、ウェブ、W3（ダブリュー スリー）[1]とも呼ばれる。俗には「インターネット」という表現がワールド・ワイド・ウェブを指す場合もある。情報提供を担う者はウェブサーバを公開し、一般利用者はウェブブラウザを介してウェブサーバにある情報を閲覧するようなシステムが基本である。1990年代のマルチメディアブームで登場したシステムの内で最も普及したシステムの1つで、技術の進歩に合わせて現在も仕様が更新され続けている。今ではハイパーテキストの枠組みを超えた仕様も追加され、アプリケーションの基盤としても活用されている。また、1980年代に各国で独自に商業展開されていたビデオテックス[2]を置き換えるに至った。
引用元：Wikipedia
この文の中でwebの特徴を表しているのが赤ラインを引いたと所です。気になる単語は、ハイパーテキストとウェブサーバではないでしょうか。
ハイパーテキストを、無理やり日本語にすると「めっちゃすげー文字」ですね。いったんこちらは後にして、先にウェブサーバについての話をします。
ウェブサーバについては、サーバが何者なのかを知ると分かるようになってきます。
サーバの歴史
人類が壁に文字を刻むころからさかのぼり・・・ってさかのぼり過ぎですね。あながち起源は間違っていないんですが、人は太古の昔から他者に何かを伝える方法として、文字などの情報を残してきました。文明の発展に伴い、壁から本へ、本からサーバへと移行してきました。
つまり、サーバとは情報の貯蔵とその閲覧が本来の役割です。映画の世界とかで見たことあると思いますが、サーバールーム（又はデータセンター）と呼ばれる施設は世界中にあります。
そんなサーバーですが、その中でもインターネットに繋がって、どこでも閲覧ができる状態のサーバの事をウェブサーバと呼んでます。
HTMLとは
HTMLはhyper text markup languageの頭文字をとったものです。日本語にすると「めっちゃすげー文字を目印などを付けて書いた言語」となります。
例えば、太字にするとかリンクを貼るとか、色や文字の大きさなど特殊な装飾ができるようにタグと呼ばれる目印によって可能にしています。以下のような感じです。
|
1 2 3 |
<!DOCTYPE html> <b>太文字になります</b> <a href="http://google.com">googleへリンク</a> |
これらの形で書かれたファイルをウェブサーバ上に保存することで、保存された場所へアクセスしたら表示されます。
これらの一連の仕組みが基本的なWebとなります。
さっそく書いてみよう
ここから、実装パートです。前回と前々回の記事で実装可能な環境を用意していただきました。まだの方はこちらから、
では、実装をしていきます。VScodeからjollibeeフォルダーにindex.htmlというファイルを作ります。そして、先ほどの、文字を入力します。そんなに量は多くないのでコピペせずに手入力してみましょう。次に、ターミナルからWebサーバを立ち上げるコマンドを実行します。
|
1 |
php -S localhost:8000 |
そしたら、ブラウザで確認してみます。本来なら、URLにhttp://localhost:8000に続いて/index.htmlを付けるところですが、index.htmlは特殊なファイル名になってますので、付けなくても問題ありません。
見事に太字とリンクが貼れましたね。
次回からは、もう少し詳しくHTMLのタグについて勉強していきましょう！ではまた！
コメント