ポイントここでは、
朧げにでも、WEBに関するイメージできること。
が学習ポイントです。 登場する人名・言葉等、些細な事柄は無視して頂いても結構です。
講義担当概要WEBとは、インターネット上で公開されているコンテンツ(文書・ブログ・ホームページ等)のことを言います。 正式には、Worl Wide Web(略称:www)と呼ばれているもので、インターネット上で提供されているハイパーテキスト・システムのことです。 本来、研究者間での論文のやり取り等に使用されていたものが、一般化されたもののことを現在では指します。 欧州原子核研究機構 (CERN) のティム・バーナーズ=リーが現在のWORLD WIDE WEBの草案を提出したことに始まっています。 これ以上の固い話はおいておくことにし、今回は全体的なイメージを掴んで頂きます。
図解seminar_html_introduction_no0001
説明上図にもあります通り、通常はブラウザで公開されているWEBシステムにアクセスすることで誰でも見ることができます。 勿論、お金を払わないと見れなくなっているものも存在しています。 インターネットを経由しますので、全てのデータはデジタル化された電子データです。 デジタル化されたデータは「0か1」の2進数のデータです。 しかし、 これでは人間が複雑な写真・書籍・ビデオ等のコンテンツを作成することは困難です。(事実上不可能) そこで人間が簡単に情報を共有する方法・システムが必要となりました。
つまり、 複雑なデータを人間が簡単にインターネット上で公開できるようにしたものがWEBシステムであり、 作成する方法・ツールがハイパーテキストと言うことになります。 ハイパーテキストとは、良く聞かれる「HTML(ハイパー・テキスト・マークアップ・ランゲージ)」のことです。(実際には、これから徐々にお話することになるJavaScript/CSS/PHP/Java/Python等といったものも必要となってきますが、ここでは色々な作成方法・ツール・公開方法があるということだけ記憶しておいてください。)
少し複雑に感じられるかもしれませんが、 映画の作成で例えてみましょう。
- 台本を作成するツール(鉛筆)が「HTML」
- 出来上がった映画が「WEBシステム」
- CGを使った特殊なものが「JavaScript/CSS/Java/PHP等」
- 完成した映画を見るということが「WEBを(ブラウザで)閲覧する」ということ。
と考えると理解しやすいかもしれません。 上記の例えは、適切ではなかもしれませんが、WEBシステムが特別なものではなく、少しの知識さえあれば、誰でも簡単に作成することができるものだということを覚えておいてください。 (魔法でも、それ自体に特殊な技能が必要となるようなものでもないのです)
実例ここで安心して頂くために、簡単な例を示します。
コード
<html> <body> Hello World! </body> </html>
このような言語の説明の最初に使用される「Hello World!」です。
詳細は次回以降の講座でご説明致しますが、 <html>から</html>がHTMLであることを示しています。 <body>から</body>がブラウザで見ることの出来る内容を示しています。 上記では、この中に「Hello World!」がありますので、これだけが表示されるのです。
勘の良い方は、 <body>から</body>があるなら、それ以外の<header>や<footer>などがあっても良いのではないかと考えられたかもしれません。 正解です。 但し、<footer>はHTML5という新しい規格で利用できるようになりました。
総括ここまでWEBに関して最初の一歩をご説明致しました。 疑問も多く持たれたかもしれません。 当然です。 ここでは、概略を説明したに過ぎないからです。
- 実際にコードを書くにはどうすれば良いのか?
- 書いたデータはどのようにサーバーに配置(アップロード)すれば良いのか?
- サーバーに配置したものをブラウザでどうしたら見ることができるのか?
- ゲームのような動きのあるものはどうすれば作成できるのか?
等、個人差はあるにせよ、様々な疑問が新たに起こったことと思います。 が、 どのようなことでも、疑問から始まり、調査・確認を繰り返し、結論に導けるのです。 これから順に、その疑問を解くお手伝いをさせて頂きますので、一緒にがんばりましょう。 決して折れない・諦めない心が大切です。
予告- 開発を行うには、どのような環境を準備する必要があるのか?
- 準備する環境の目的は?
開発環境に関して講義致します。 次回からは、各講座中に、違和感を抱えたまま先に進むようなことは避けてください。 特に分かったつもりは厳禁です。
コメント
|
Selection | File type icon | File name | Description | Size | Revision | Time | User |
|