課題1　画像の表示

Visual Studio Codeを起動する。
「File」→「Preferences」→「Settings」で、図のようなメニューを出し、検索欄に「render whitespace」と入力する。
設定を「none」から「all」に変更する。

こうすることで半角スペースが「・」で表示されるようになる。
特に全角スペースは誤動作の原因になるので、これを見つけやすくするのは非常に大事。
(全角スペースを入れてしまったところは「・」が表示されないので、それを目印にして見つける)
演習室ではPCを起動するたびに設定が元に戻されるので、この作業は毎回行う。
デスクトップに「課題1」フォルダーを作る。
Visual Studio Codeで「Exproler」→「Open Folder」を選び、上で作った「課題1」フォルダーを開く。

このようになっていればOK。
「課題1」フォルダーの中に「1」「2」フォルダーを作る。
「1」フォルダーの中に「index.html」というファイルを作る。
「index.html」に以下のようにしてコードを記述する。

HTMLファイルは html, head, body などの「タグ」で囲んだ中にいろいろなものを記述する。「/」のない方を開始タグ、「/」がある方を終了タグという。
Visual Studio Code では開始タグを書くと自動的に終了タグが入力される。

この時点のコードはこうなっていればOK。
以下のようにしてコードを追加し、最後に Shift+Alt+F キーを押す。

Shift+Alt+Fキーで自動整形が行われる (Processing の Ctrl+T と同じ)。
普通のプログラムで { と } に囲まれたものを一段深くして書く (インデントをつける) のと同様に、HTMLファイルでもタグで囲まれたものは一段深くする。
これを行うことで「タグの閉じ忘れ」も防げる。
ただし、htmlタグは一番外側で全体を囲むものなので、これだけは例外的にインデントを省略することが多い (Visual Studio Code の初期設定でもそうなっている)。

この時点のコードはこうなっていればOK。
以下のようにコードを書き換える (インデントがこれと異なっていた場合はShift+Alt+F キーを押して自動整形する)。さらに Ctrl+S キーを押して上書き保存する。

半角スペースの有無、大文字・小文字の違い、ダブルクォーテーションの対応にも注意。
間違っているとここでの設定が機能しなかったり、機能してもブラウザでエラーが出たりする。

5行目はこのファイルのエンコードの設定、6行目はスマホでこのページを見たときの表示用の設定、7～11行目は画像を表示させたときにブラウザから横にはみ出ないようにするための設定。
このように、headタグで囲んだ部分にはいろいろな「お約束」を書く。
index.htmlをFireFoxで開く (右クリック → プログラムから開く → FireFox)。
タブの部分には titleタグで囲った「ページタイトル」が、ブラウザの本体の方には bodyタグで囲った「本文」が表示される。
ここを右クリックし、画像ファイル「flower.jpg」を「1」フォルダ (index.htmlが入っているフォルダ) に保存する。
(このページをFireFoxで開いている場合は「名前を付けてリンク先を保存」)
(Visual Studio Code でも「1」フォルダーの中に「flower.jpg」が追加されるはず。こうならない場合は画像の保存先を確認する)
コードをを次のように書き換えて Ctrl+S キーで上書きし、FireFoxのページを更新する。
(赤枠が変更部分。この図では全角コロン「：」は黄色でハイライトされているが、演習室の環境ではこのハイライトはない)
(画像はimgタグを使って表示する。「src」に画像のファイル名を入れるとその画像が表示される。imgタグには終了タグはなく、単独で使われる)
(<br>は改行タグ。これを入れることでブラウザ上で改行される。これにも終了タグはなく、単独で使われる)

このように画像が表示される。こうなっていることが確認できたら課題1-1は完了。