課題1-1

  1. Terapadを起動する。


  2. 「表示」→「オプション」で、図のようにしてタブの幅を4文字分にし、タブと空白文字を表示する設定に変更する。
    試しにタブ(キーボードのTabキー)、全角、半角のスペースを入れてみると、このように表示される。


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


  3. デスクトップに「課題1」フォルダーを作り、さらにその中に「1」フォルダーを作る。


  4. Terapadで「ファイル」→「文字/改行コード指定保存」を選び、文字コードを「UTF-8N」にして(こうしないとブラウザで見たときに文字化けする)、さっき作った「1」フォルダーの中に「index.html」という名前で保存する。


  5. 以下の囲みのものをTerapadにコピー&ペーストし、上書き保存する。
    <!DOCTYPE html>
    <html>
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    	<title>あああ</title>
    </head>
    <body>
    いいい
    </body>
    </html>
    


  6. 「課題1-1」フォルダーにある「index.html」をChromeで開く。すると、このようなものが表示される。
    タブ名のところに「あああ」、本文に「いいい」が表示される (コードでいうとさっきの赤字部分)。


  7. 「あああ」「あああ」を別のものに書き換え、上書きしてからブラウザをリロード(F5キー)して、変わったことを確認する。


  8. 適当に画像検索し、「1」フォルダーに保存する。
  9. 画像名は半角英数にすること (日本語も使えないことはないが、エンコードなどに注意しないとサーバーにアップロードしたときにうまく読み込めなくなる)。


  10. 本文のあとに赤枠のようなものを追記 (「hirosakijou.jpg」のところは自分で入れた画像の名前にする) して上書き保存 (Ctrl+S) する。


  11. リロードして画像が表示されることを確認する。
  12. 「width」は画像の横幅。これを変えると画像の大きさが変わる。
    画像表示のコードで
    <image src="hirosakijou.jpg" width="200" height="300">
    
    のようにすると高さも指定できる。
    もっとも、元画像と縦横比が違っているとこのように歪んでしまうので、指定するのは幅か高さのどちらかにしておくのがよい。


  13. 本文の後ろに<br>を追記して上書き保存する。


  14. リロードして画像が文の下にくることを確認する。
  15. <br>は改行の命令。これを使えば文の改行もできる。


    逆に、コード上で改行していても<br>をいれなければブラウザでは改行されない。

  16. 文と画像の表示命令をもう一つ追加する (今までに書いたものを適当にコピーして再利用するとよい)。


  17. 適当なサイトで画像を右クリックし、「画像アドレスをコピー」を選ぶ。


  18. 2つ目の画像の画像名 (「"」と「"」の間) を消して、そこにアドレスを貼り付ける (「"」と「"」の間にカーソルを置いてCtrl + V) 。


  19. ブラウザをリロードする。すると、2つ目の画像が元サイトと同じものになる。これを確認したら、画像の上の文を画像にあったものに変更する。




課題2
inserted by FC2 system