TOPページのマークアップ
日 時：2023年2月13日 13:30から16:30
参加者：小野 寺島 大関 大野 青木 池田 藤本
内 容：各自のindex.htmlページ用の画像を編集した後下図のようにマークアップしました。
- <body >の直下に <div class="wrapper" >を挿入。
- </div >を </body >の直前に移動。
- <div class="wrapper" >の直下に「header」要素を挿入。
- 「header」要素にヘッド画像を挿入。
- </header >の直下に <main >を挿入。
- 最終の </div >の直前に </main >を挿入。
-
「 <p >外出した時の記録を残して行きます。 </p
>」の直下に
<!-- ============box========= -- >を挿入。 - 直下に <ul class="box" >を挿入。
- <h1 >初詣ベスト3 </h1 >の直前に </ul >を移動。
- 動物園の <p >を <li >に書き換え。
- 「動物園 </a >」の直後の「 </p >」を削除し「 <br >」を挿入。
- ライオン画像の前の <p >を削除。
- ライオン画像の後の </p >を </li >に書き換え。
- ライオン画像の幅を300ピクセルに指定（width="300"）
- 「公園」、「USJ」についても同様にpをli に書き換え。
- さらに「 <br >」を追記して画像を挿入しリンクを設定し、幅を300に指定。
-
「 <h1 >初詣ベスト3 </h1 >」の直前に
<!-- ============box2========= -- >を挿入 - 直下に <div class="box2" >を挿入。
- </div >を </main >の直前に移動。
- <div class="box2" >の直下に <div >を挿入。
- </div >を <h1 >IT用語辞典 </h1 >の直前に移動。
- 「IT用語辞典」 「箇条書き」 「表」についても同様にdivで括る。
- 「箇条書き」 「表」についてそれぞれh1要素の直下にp要素を追加しリンクを移動。
- 「箇条書き」 「表」に画像を挿入しリンクを貼る(未実施)。
-
head部分に次の外部cssへのリンクを設定。
<link rel="stylesheet" href="style/top.css" >