- Terapadを起動する。
- 「表示」→「オプション」で、図のようにしてタブの幅を4文字分にし、タブと空白文字を表示する設定に変更する。
- デスクトップに「課題1」フォルダーを作り、さらにその中に「1」フォルダーを作る。
- Terapadで「ファイル」→「文字/改行コード指定保存」を選び、文字コードを「UTF-8N」にして (こうしないとブラウザで見たときに文字化けする)、さっき作った「1」フォルダーの中に「index.html」という名前で保存する。
- 以下の囲みのものをTerapadにコピー&ペーストし、上書き保存する。 (<head>の下の行は、このファイルのエンコード形式を指定するもの)
- index.htmlをFireFoxで開く (右クリック → プログラムから開く → FireFox)。
- ページタイトル、本文を以下のように書き換えて上書きし、FireFoxのページを更新する。 (<br>は改行の命令。これがないと、エディタ上で改行してもブラウザでは改行されない)
- ここを右クリックし、画像ファイル「flower.jpg」を「1」フォルダ (index.htmlが入っているフォルダ) に保存する。 (このページをFireFoxで開いている場合は「名前を付けてリンク先を保存」)
- index.htmlを次のように書き換えて上書きし、FireFoxのページを更新する。



試しにタブ(キーボードのTabキー)、全角、半角のスペースを入れてみると、このように表示される。

HTMLを書くときに変なところに全角スペースを入れてしまうとエラーになったり、想定外の表示になったりするので、こうして一目でわかるようにしておく。

HTMLを書くときに変なところに全角スペースを入れてしまうとエラーになったり、想定外の表示になったりするので、こうして一目でわかるようにしておく。
演習室ではPCを起動するたびに設定が元に戻されるので、この作業は毎回行う。



(その下の2行はスマホ対応のために必要な設定)
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <style type="text/css">img {max-width: 100%;}</style> <title>ページタイトル</title> </head> <body> 本文 </body> </html> |





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

補足1
F12キーを押すと開発用のメニューが表示される。
図のアイコンで切り替えればスマホでの表示が確認できる。
(もしindex.htmlの5, 6行目がないと、スマホではかなり見づらくなる)
F12キーを押すと開発用のメニューが表示される。
図のアイコンで切り替えればスマホでの表示が確認できる。
(もしindex.htmlの5, 6行目がないと、スマホではかなり見づらくなる)

補足2
「width」を使うと、画像を表示するときの横幅を指定できる。
指定しなければ元画像のサイズのまま表示される (ここで使っている画像は600x450ピクセル)。
「width」を使うと、画像を表示するときの横幅を指定できる。
指定しなければ元画像のサイズのまま表示される (ここで使っている画像は600x450ピクセル)。

補足3
「hight」で画像を表示するときの高さを指定できる。ただしwidthと併用した場合は、元画像とアスペクト比を合わせないとこのように歪んでしまう。
そのため、指定するのはwidthかhightのどちらかだけにしておくとよい。
「hight」で画像を表示するときの高さを指定できる。ただしwidthと併用した場合は、元画像とアスペクト比を合わせないとこのように歪んでしまう。
そのため、指定するのはwidthかhightのどちらかだけにしておくとよい。

補足4
別のサイトで使われている画像をダウンロードしなくても、画像を右クリックしてアドレスをコピー (Chromeなら「画像アドレスをコピー」、FireFoxなら「画像のリンクをコピー」を選ぶ) し、「img src」の値に入れてやればその画像を自分のページに表示させられる。

別のサイトで使われている画像をダウンロードしなくても、画像を右クリックしてアドレスをコピー (Chromeなら「画像アドレスをコピー」、FireFoxなら「画像のリンクをコピー」を選ぶ) し、「img src」の値に入れてやればその画像を自分のページに表示させられる。


補足5
FireFoxで Ctrl + U を押すと、別タブでソースが見られる。
ソースにエラーがあるときはその部分に赤い点線のアンダーラインが表示される (この場合は「flower.jpg」の前の「"」が足りない)。
「title」「head」「body」などのタグでは開始タグ (「/」がない方) と終了タグ (「/」がある方) が1対1できちんと対応していないといけないので、1か所だけが原因でイモヅル式に大量のエラーが出ることもある。
これは<title>を<tite>と書いてしまったケース。厄介なことに、間違えた<tite>にはエラー表示は出ない。
FireFoxで Ctrl + U を押すと、別タブでソースが見られる。

ソースにエラーがあるときはその部分に赤い点線のアンダーラインが表示される (この場合は「flower.jpg」の前の「"」が足りない)。

「title」「head」「body」などのタグでは開始タグ (「/」がない方) と終了タグ (「/」がある方) が1対1できちんと対応していないといけないので、1か所だけが原因でイモヅル式に大量のエラーが出ることもある。
これは<title>を<tite>と書いてしまったケース。厄介なことに、間違えた<tite>にはエラー表示は出ない。
