<aside> <img src="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/5f6e7806-7a2c-47fb-867b-54742c37b10e/透明画像10001000.png" alt="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/5f6e7806-7a2c-47fb-867b-54742c37b10e/透明画像10001000.png" width="40px" /> ファストス

</aside>

課題

HTMLタグを使ってページを作成してみる

<aside> 💡 **実装を行うファイル

`html-general` ブランチを作成して実施してください**

</aside>

### 目的

HTMLタグを実際に使ってもらい一通り覚えてもらう

### 実装画面

<aside>
💡 **下記条件を満たしていること**

- インデントが崩れていないこと（[インデントとは](<https://alchemy-inc.notion.site/c335f1cf32744042b36011bcd2f6f288>)）
- 開始タグと閉じタグの記入漏れはないか
**- 完成ページ通りに作成すること** 
- 機能要件を満たしていること
**※OSに依存するため多少のズレは気にせず進めてください**

</aside>

- モック画面
- 完成ページ（見本）

### 機能要件

1. ヘッダー作成
    
    下記条件を満たしていること
    
    - `header` タグ、`nav` タグ、`ul`タグ、`li`タグを利用し、ヘッダー部分を作成する
    
2. フォーム作成
    
    下記条件を満たしていること
    
    - `form` タグ、`table` タグ系、`select / option`タグ、`input`タグ(`type="text", type="radio"`)、`textarea`タグ、`label`タグ、`button type="submit"`タグ、`**br**`タグを利用し、フォーム部分を作成する
    - 上記のタグは全て`form` タグ内に入れること
    
3. フッター作成
    
    下記条件を満たしていること
    
    - `footer`タグを利用し、フッター部分を作成する
    

### 実装する際の参考文献

1. タグ一覧

[HTML 要素リファレンス - HTML: HyperText Markup Language | MDN](<https://developer.mozilla.org/ja/docs/Web/HTML/Element>)

1. タグの属性一覧

[HTML 属性リファレンス - HTML: HyperText Markup Language | MDN](<https://developer.mozilla.org/ja/docs/Web/HTML/Attributes>)

1. HTMLテーブルに関する作成方法