課題2-1

  1. Terapadを起動する。
  2. タブの幅を4文字分にし、タブと空白文字を表示する設定に変更する (方法を忘れた場合は前回の資料を参照)。
  3. デスクトップに「課題2」フォルダーを作り、さらにその中に「1」フォルダーを作る。
  4. Terapadで「文字/改行コード指定保存」で、文字コードを「UTF-8N」にして、「課題2」の中の「1」フォルダーの中に「index.html」という名前で保存する。


  5. 以下の囲みのものをTerapadにコピー&ペーストし、上書き保存する。
    <!DOCTYPE html>
    <html>
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    	<title>ハイパーリンク</title>
    </head>
    <body>
    リンクの練習<br>
    <a href="http://aows.jp/ws/">ワークショップのページ</a><br>
    </body>
    </html>
    


  6. 「課題2」フォルダーにある「index.html」をブラウザで開く。すると、このようなものが表示される。「ワークショップのページ」をクリックすると、実際にワークショップのページにジャンプする (確認したら戻るボタンで元の画面に戻る)。
    さっきの赤字部分:リンクに表示される文字
    さっきの青字部分:リンクのURL


  7. 好きなページへのリンクを追加する。
    だいたい手順はこんな感じ。
    • TeraPadで「ワークショップのページ」の行をコピペして1行増やす
    • ブラウザでお気に入りのページを開き、URLをコピーする
    • 上の青字部分を消してそこにURLを貼り付ける
    • 赤字部分をそれに合わせて書き換える


  8. 「ボタン 素材 作成」などで検索して、リンク用の画像を作る (例えばここ。このサイトを使うなら、例えば設定をこんな感じにすればそれらしいボタンが作れる)。


  9. 作った画像をダウンロードして「1」フォルダーに入れる。


  10. 「ワークショップ」のところを次のように書き換える (「workshop.gif」は画像名。違う名前で保存した場合はその名前をここに書く)。
  11. 書き方は前回画像を表示させたときと同じ。こうして文字のかわりに画像を使う。


  12. ブラウザをリロードして、このようにボタンが表示されたらそれをクリックしてワークショップのページに飛ぶことを確認する。


  13. 同様にしてもう一つのリンクの画像も作り、TeraPadのコードもそれに合わせて書き換えて、動作を確認する。


  14. 「1」フォルダの「index.html」をコピーしてその場に貼り付け、できた「index - コピー.html」の名前を「a.html」に変更する。


  15. 「index.html」を次のように書き換えて上書き保存する (一つ目のボタンと、「a.html」へのリンクだけにする)。


  16. 「a.html」をTeraPadで開き、次のように書き換える (二つ目のボタンと、「index.html」へのリンクだけにする)。


  17. ブラウザをリロードし、「aに行く」「indexに行く」でそれぞれのページに飛べばOK。
     ⇔ 
    htmlファイルが同じフォルダーにあるときは、このようにリンクのところにそのファイルの名前を書けば、ブラウザでそのリンクに飛べる。


課題2
inserted by FC2 system