課題4　ハイパーリンク

課題4-1

  1. Terapadを起動する。
  2. タブの幅を4文字分にし、タブと空白文字を表示する設定に変更する (方法を忘れた場合はWebページ制作初回の資料を参照)。
    3. (自宅で作業したことがある場合は設定が残っているはずなのでこの工程は飛ばしてよい)
  3. デスクトップに「課題4」フォルダーを作り、さらにその中に「1」フォルダーを作る。
  4. 文字コード「UTF-8N」で、「1」フォルダーの中に「index.html」「sightseeing.html」「weather.html」という3つのファイルを作る。

  5. それぞれに以下のコードを記入して上書き保存する。
    6. (ヘッダ部分はWebページ制作初回の資料からコピーすると楽)
    (3つのファイルのコードのうちかなりの部分が共通なので、適宜コピーして使いまわすとよい)

    index.html


    sightseeing.html


    weather.html


  6. index.htmlをChromeで開く。リンクをクリックすると、それぞれのページにジャンプする。
    7. aタグで囲んだ部分に書いたものがリンクの文字として表示される。
    hrefで指定したものがリンク先のファイルになる (これは説明の一部)。

  7. sightseeing.htmlに赤枠の部分を追加する。
    8. (この図に入っていない部分はそのままにする。変えるのは赤枠のところだけ)


  8. 「青森市」「観光」などで検索して引っ掛かる適当なサイトを開き、URLをクリップボードにコピーする。


  9. コピーしたものをsightseeing.htmlの図の位置に貼り付け (Ctrl+Vを押す)、上書きする。


    10. このように「青森市」のリンクからそのサイトが別タブで開けば課題4-1は完了。
    aタグのhrefにサイトのURLを指定すると、そのサイトへのリンクになる。
    aタグで「target="_blank"」を記述すると、別タブでリンク先のページが開くようになる。
    ハイパーリンクでは文字のかわりに画像を使うこともできる。
    例えばここでこういう画像を作ってhtmlファイルと同じフォルダに保存し、


    aタグで囲まれる文字をこの画像に置き換えれば


    このようにボタンをクリックしてリンク先に飛べるようになる。

課題4-2

  1. 課題4-1の結果表示用のChromeのタブ、すべてのTeraPadを閉じる (今回はファイルが多く、間違いが起こりがちなので必ずやること)。
  2. 「課題4」フォルダの中に「2」フォルダを作る。
  3. 「2」フォルダの中に2つ以上のhtmlファイルを作る (新しく作ってもよいし、課題4-1で作ったものをコピーしてもよい)。
  4. それらのファイルを編集し、オリジナルのページを作る。
課題の条件
注意 (この課題限定ではなく、Webページ全般について)

提出

inserted by FC2 system