課題5 ハイパーリンク

課題5-1

  1. デスクトップに「課題5」フォルダーを作り、その中に「1」「2」フォルダーを作る。
  2. Visual Studio Codeを起動する。
  3. 「File」→「Preferences」→「Settings」で設定メニューを出し、「render whitespace」で検索して設定を「all」に変える。


  4. Visual Studio Codeで「File」→「Open Folder」で「課題5」フォルダーを開く。
  5. 「課題5」の中の「1」フォルダーの中に「index.html」と「main.css」という2つのファイルを作る。


  6. index.html に以下のコードをコピー&ペーストして上書き保存する。
    <!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">
        <link rel="stylesheet" type="text/css" href="main.css">
        <title>課題5-1. ハイパーリンク</title>
    </head>
    
    <body>
        <span class="big futoji">青森県の観光・天気総合ページ</span>
        <ul>
            <li>青森市</li>
            <li>弘前市</li>
            <li>八戸市</li>
        </ul>
    </body>
    
    </html>

  7. main.css に以下のコードをコピー&ペーストして上書き保存する。
    .big {
        font-size: 2.0em;
    }
    
    .futoji {
        font-weight: bold;
    }
    
    .jisage {
        margin-left: 20px;
    }

  8. Firefoxでindex.htmlを開く。
    上の図のような表示になっていればOK。
    main.cssには、前回までの課題でindex.htmlの中に直接書いてあった内容が書かれている。
    これをindex.htmlの7行目で読み込んでいる。
    わざわざこのように分けたのは、複数のhtmlファイルでこの設定を共有するため。

  9. main.css と index.htmlにそれぞれ以下のものを追加してブラウザを更新する。



    このような表示になればOK。
    main.cssの設定の意味はそれぞれ次の通り。
    • 14行目 : 箇条書きの前のマークを無くす
    • 15行目 : 箇条書きの項目を横並びにする
    • 19行目 : 箇条書きの項目の上下に10ピクセル、左右に15ピクセルの隙間をつくる
    • 20行目 : 箇条書きの項目の右だけに縦の枠を入れる
    • 23~25行目 : 箇条書きの最後の項目だけ枠なしにする

  10. index.htmlに以下のものを追加してブラウザを更新する。


    このような表示になればOK。
    aタグは別のファイルや外部のページにジャンプするリンクを作るためのもの。
    hrefに設定したファイル、URLにジャンプするようになる。
    この時点では aomori.html, hirosaki.html, hachinohe.htmlは存在しないので、クリックしても「ファイルが見つかりませんでした」というエラーが出るだけ。

  11. index.htmlをコピーし、名前をaomori.htmlに変更する。
    (index.htmlで右クリック→Copy, 「1」で右クリック→Paste, index copy.htmlで右クリック→Rename)


  12. aomori.htmlを以下のように書き換え、ブラウザの「青森市」のリンクをクリックする。
    (index.htmlの方を書き換えないように注意)


    このような表示になればOK。
    「観光」「天気」のリンクの「target="_blank"」は、別タブで開くようにするための設定。

  13. 「青森市 観光」「青森市 天気」などで検索してそれぞれの情報があるページを探し、そのURLを19行目、20行目の「href="」の後ろにコピー&ペーストする。
  14. ブラウザのaomori.htmlを表示しているタブを更新し、「戻る」で最初のindex.htmlのページに移動できること、「観光」「天気」のリンクをクリックして別タブでそれらのページが表示されることを確認する。


  15. aomori.htmlをコピーしてhirosaki.htmlとhachinohe.htmlを作る。


  16. hirosaki.htmlとhachinohe.htmlを書き換え、titleタグと12行目の街の名前の部分をそれに合わせて変更し、19行目と20行目をそれぞれの観光・天気のページへのリンクにする。
    このように「青森市|弘前市|八戸市」からそれぞれの街のページにジャンプでき、「観光」「天気」からそれぞれの情報のページが別タブで開けばOK。


  17. どうしてもうまくいかない場合は完成状態の index.htmlaomori.htmlhirosaki.htmlhachinohe.htmlmain.css (観光・天気のリンクはこれと同じでなくてもよい) と見比べて修正する。

課題5-2

  1. 「2」フォルダの中にindex.htmlを含む少なくとも2つのhtmlファイルと、cssファイルを作る (新しく作ってもよいし、課題5-1で作ったものをコピーしてもよい)。
  2. それらのファイルを編集し、オリジナルのページ群を作る。

課題の条件
注意 (この課題限定ではなく、Webページ全般について)
参考
文字だけでなく、画像をリンクとして使うこともできる。
例えばここで以下のような設定でボタンの画像を作って「2」フォルダに保存し (仮に「english.gif」とする)、


(自前のenglish.htmlを作ったうえで) index.htmlのリンクの部分を「<a href="english.html"><img src="english.gif"></a>」のように書けば、画像をクリックしてそのページに飛べるようになる。
もちろん、外部ページへのリンクに画像を使うこともできる。

提出

inserted by FC2 system