復習

準備

1. 当サイトの「素材」ページを開きます。
2. 「追補」のテキスト部分をメモ帳に貼り付けます。
3. 画像部分を各自のサイトの「images」フォルダーにファイル名 「usj.jpg」として保存します。

report.htmlの作成

1. 各自のサイトをbracktsで開きます。
2. 新しいページを開きます（Ctrl + N）。
3. ファイルの種類を「HTML」に設定します。
4. 宣言文、head要素、body要素を挿入します（! + Tab）。
5. text ホルダーにファイル名「report.html」として保存します。
6. body要素内にh1要素を挿入し、前項2でコピーした1行目を貼り付けます。
7. 直下にｐ要素を3つ作成します。
8. 1番目と2番目のｐ要素内に上記2でコピーした2行目と3行目を貼り付けます。
9. 3番目のｐ要素内に前項3で保存した画像を挿入し代替テキストを挿入します。
   <p><img scr=“../images/usj.jpg” alt=“ユニバーサルスタジオ" ></p>
10. 1番目のｐ要素内の「ユニバーサルスタジオ 」部分にユニバーサルスタジオジャパンのwebサイトのトップへのリンクを設定します。
    <a href=“https://www.usj.co.jp/” target="_blank">ユニバーサルスタジオ</a>
11. 上書き保存します。

CSSの設定

1. bracktsメニューバーの「表示」から「左右分割」を選択して画面を分割します。
2. 右側場面に新しいページを開きます（Ctrl + N）。
3. ファイルの種類を「CSS」に設定します。
4. charsetをUTF-8に指定します。
5. style フォルダーにファイル名「report.css」として保存します。
6. h1のフォントサイズを20pxに、文字色を赤に、ｐの幅を720ｐｘに指定します。
   h1 {
   　font-size: 20px;
   　color: #ff0000;
   }
   p{
   　width: 720px;
   }
   
7. 上書き保存します。
8. 「report.html」のhead要素内に外部CSSの読み込みコードを書きます。
   <link rel="stylesheet" href="../style/report.css" type="text/css">
9. 上書き保存します。

トップページからのリンクの設定

1. bracktsで「index.html」を開きます。
2. 動物園へのリンクの直下に「report.html」へのリンクを追記します。
   <p><a href="text/report.html">レポート</a></p>
3. 上書き保存します。