授業説明を参照
今日、Webは私たちの日常のあらゆる場面で利用されています。PCからWebサイトを閲覧する以外にも、携帯電話端末を使って見たり、時にはアプリの内部で気づかないうちに利用していることさえあります。この授業ではこれらを支えるWeb技術の初歩を、自らプログラミングすることで理解していきます。
普段われわれが目にするWebページは、そのページで使用されている画像ファイルやFlashコンテンツなどを除けば、基本的にはすべてテキストで記述されています。今私たちが見ているこのページも例外ではありません。こうしたWebページの正体は、ページのソースを表示することができます。
Macを利用しているならば、SafariやChromeというブラウザを用いてこのページを見ている人が多いと思います。ページ内でcontrolキーを押しながらクリックすると「ページのソースを表示」というようなメニューがあります。またメニューにも同様のものがあります。ただしSafariの場合、標準ではソースを表示する機能が隠されていますので、以下の設定をしてください。Safariのメニューから「環境設定」を選び、表示された画面で「詳細」を選択します。その一番下にある「メニューバーに"開発"メニューを表示」にチェックを入れます。するとメニューに「開発」という項目が表示され、この中に「ページのソースを表示」という機能があります。
ソースを表示させてみると、Webブラウザの画面に表示されている文章とは異なる記号が多く混ざったテキストが現れます。この記号たちこそが、ただのテキストをWebページに仕立て上げている影の功労者であり、これらの記号たちのことやその記述ルールのことをHTML（HyperText Markup Language）と呼んでいます。
つまり、HTMLという特殊な記号を用いた文書をインターネットを介しやりとりし、ブラウザというソフトを用いて表示しているのがWebページです。
この授業ではまずHTMLの記述からスタートしますが、HTML以外の関連する技術も学んでいきます。
HTMLの次に扱うのは、CSSというWebページの見た目を制御する技術です。またその次には、JavaScriptというブラウザ上で動作するプログラミング言語を扱い、ユーザの操作に反応するインタラクティブなページを実現する手法を学びます。
HTML文書をCSSやJavaScriptと組み合わせることで、普段目にするような綺麗で複雑なWebページを実現することができます。
インターネット上のWebサーバ上にある1ページの文書をWebページと呼びます。Webサイトは、テーマに沿って複数のWebページを構成したものです。この違いを意識して呼び分けるようにしましょう。
また、私たちが日常的に利用するWebサイトの中には、様々なデータやユーザからの入力に基づき情報が表示されるものがあります。Webブラウザは、インターネット上から取得したHTML文書を表示するソフトウェアです。このHTML文書は、あらかじめ作成してサーバ上に保存されたものでなくても、サーバで必要なタイミングで生成したものでも構いません。Webサービスとは、Webの技術を用いて、様々なデータやユーザからの入力に応じて機能を提供するサービスのこと指します。今はまだ難しい話かもしれませんが、HTMLを理解することが、こうしたサービスの実現の基礎になっています。
HTMLやCSS、JavaScriptなどのWeb文書は、テキスト形式で記述されています。この授業ではこれらのファイルの編集を、Visual Studio Code (VSCode)というエディタを用いて行います。（よく理解している人でお気に入りのテキストエディタのある人はそちらを利用しても構いません。）
VSCodeは、Microsoft社が開発しているプログラミングに向いたテキストエディタのひとつです。以下からダウンロードをし、インストールしてください。
https://azure.microsoft.com/ja-jp/products/visual-studio-code/
ダウンロードしたファイルを、Finderでアプリケーションフォルダに移動してください。最初に起動しようとすると、セキュリティ警告が出ることがありますが、許可をしてください。
VSCodeはそのままでは英語のインタフェースとなっていますので、以下の手順で日本語化しておきましょう。
画面左側のアイコンから「Extention」を選択し、検索窓に「japanese（途中まででよい）」と入力すると、「Japanese Language Pack for Visual Studio Code」が見つかりますので、「Install」します。 VSCodeを更新するか一度閉じて再起動すると、メニューが日本語で表示されるようになります。
まだHTMLの書き方は説明していませんが、まずは一度、以下の内容をそのまま書き写し、HTML文書を作成してみましょう。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>はじめの一歩</title>
</head>
<body>
<h1>はじめてのHTML</h1>
<p>こんにちは世界</p>
</body>
</html>
作成したファイルは、自分のMac上の適切な位置に「webprog」というフォルダを作成し「work01_1.html」という名前で保存してください。
この文書に書いた呪文の意味は次回から説明していきますが、最初にこのファイルをブラウザで開いて、何が表示されるかよく観察してください。 （もしブラウザで開いたときに文字化けが起こる場合には、VSCodeの右下の方に「UTF-8」と表示されていないはずです。確認して文字コードをUTF-8に設定してください。）
記述した文字列がどの部分に表示されるかを理解したら、この部分を自分で自由に書き換えてみてください。
レポートに、書き換えたHTML文書のソース（等幅フォントを使用）と、ブラウザで表示したスクリーンショット（⌘+⇧+4）を貼り、どの部分がどこに表示されているかわかったことを説明してください。
今日はちゃんと環境が作れ、HTML文書が書けることを確認できれば終わりです。ここまでたどり着けない場合には次回からの授業に支障がありますので、何か問題があれば教員や周囲に助けを求めて必ず解決してください。