HTML：マークアップ課題

課題

HTMLの基本タグを正しく使ってマークアップする課題です。

制作時間：1時間～2時間

STEP01：課題フォルダを配置

学校サーバーから課題フォルダ「osarai_markup」を「HTML講座」フォルダ内にダウンロードしてください。

ダウンロードした後に「osarai_markup」を「h01_XX（出席番号）」に変更してください。

例）出席番号8番「h01_08」
※1桁番号の方は0埋めしてください

STEP02：HTMLファイルを作成

「h01_XX（出席番号）」フォルダ直下に以下のHTMLファイルを作成してください。

ファイル名「recruit.html」

例）出席番号8番の場合

STEP03：基本構造を記述

「!」+「Tab」でHTMLの基本構造を記述します。

titleタグ「採用情報 – 株式会社HIGASHI NAKANO」

STEP04：Wordファイルの文章をマークアップ

「data」>「markup.docx」ファイルの内容を「recruit.html」にコピーしてください。

コピーした文章を適切なHTMLタグでマークアップしてください。
※今回はHTMLの学習なのでChatGPTなどのAIにマークアップ作業をさせないでください

注意点

• タグ付けによって改行や余白など、Wordと異なる見た目になっても構わない
• 文の意味に合わせて、適切なタグや見出し階層を選ぶこと
• 段落の区切りはコーダーの自由
• 文章の書き換えは禁止だが、リストのマーカーや区切りなど、タグ付けによって不要になった記号や文字は削除して構わない
• テーブルには属性「border=”1″」を追加して枠線を表示させること
  <table border=”1″>・・・</table>
• 画像は「img」フォルダにあるので該当ファイルを表示すること
• リンクは新しいタブで開くこと

使用するタグの例

Step05：バリデータでチェック

「W3Cのバリデータサービス」で文法エラーがないかチェックしてください。もしエラーがある場合は修正してください。
※属性「border=”1″」エラーは例外とする

エラー修正時はChatGPTなどのAIを活用して構いません。

Step06：学校サーバーにアップロード

制作フォルダを学校サーバの「h01」フォルダ内にアップロードしてください。

以上で課題終了です。

完成例

見出しレベルやリストの作成方法の違いで、下記の完成例と見た目が変わっていても構いません。