第1章で色々学んだけど、ちゃんと理解できてるかな？
それなら実践的なクイズで確認してみよう！実際のコードを見ながら答える問題だから、本当に理解できているかがわかるよ。
コードを見て答えるクイズなら、実際に書く時にも役立ちそうですね！
その通り！そして、クイズで確認した後は、学んだ知識を使って実際にHTMLページを作成してみよう。理論と実践の両方で知識を定着させることが大切だからね。
第1章まとめクイズ
第1章の重要ポイントを12問に凝縮した総合クイズだ。基本概念から実践まで、HTML習得に必要な核心部分を網羅しているよ。これまで学んだ内容を思い出しながら挑戦してみよう。
第1章 総合まとめクイズ（12問）
①
<html ...>
<head>
...
</head>
<body>
...
</body>
</html><head>
<meta charset="UTF-8">
②
<title>私の最初のWebページ</title>
</head><head>
<meta charset="UTF-8">
<title>私の最初のWebページ</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>これは私が作った最初のHTMLページです。</p>
</body><h1>大きなタイトル</h1>
<h2>章の見出し</h2>
<h3>小見出し</h3><img ①="photo.jpg" ②="美しい風景写真">実践:実際にHTMLページを作成しよう
このセクションでは、実際にHTMLページを作成する手順を学びます。クイズで確認した知識を活用して、自己紹介ページを作成してみましょう。
以下のリンクからファイルをダウンロードし、VS Codeで開いて内容を確認することもできます。
ファイルのダウンロードただし、実際に自分でコードを書いてみることが最も効果的な学習方法なので、以下の手順を参考にぜひ自分で実装してみてください！
HTMLファイルの作成手順
まずは、HTMLファイルを作成するための手順を確認しましょう。
「HTMLファイルを作ってみよう！」で作成した「html-practice」フォルダーをVS Codeで開きましょう。
- VS Codeの「ファイル」→「フォルダーを開く」でデスクトップの「html-practice」フォルダーを選択してください。
- 「chapter1」フォルダを作成します。
- 「chapter1」フォルダ内に新しいファイル「index.html」を作成します
第1章で学んだ全ての要素を使った自己紹介ページ
クイズお疲れ様！今度は第1章で学んだ全ての知識を使って、自己紹介ページを作成してみよう。まずは完成例を見てから、自分で実装してみよう。
完成形が見られるんですね！どんなページになるのか楽しみです！
実装してみよう
それでは、この完成例を参考に自分で実装してみよう。以下の手順でindex.htmlにコードを書いていくよ。
実装手順
- 基本構造作成 HTML5のDoctype、html、head、body要素を書く
- メタ情報設定 charset、viewport、titleを設定
- 見出し作成 h1で名前、h2でセクション見出しを作る
- 基本情報追加 strong、br、pタグで情報を整理
- 自己紹介文作成 em、strong、blockquoteを使って文章を書く
- リスト作成 ul（趣味）とol（学習計画）を追加
- 属性追加 id、class属性を連絡先に設定
使用する要素チェックリスト
- 文書構造 DOCTYPE、html lang=“ja”、head、body
- メタ要素 meta charset、meta viewport、title
- 見出し h1（ページタイトル）、h2（セクション）
- 段落・強調 p、strong、em
- 改行・区切り br、hr
- リスト ul、ol、li
- 引用 blockquote、cite
- 属性 id、class
まとめ
お疲れ様！第1章のクイズと実践演習、両方ともよく頑張ったね。クイズで知識を確認してから実際にコードを書くという流れはどうだった？
クイズで理解度をチェックしてから実践に進むと、「あ、これクイズで出た内容だ！」って繋がりを感じられて良かったです！
自己紹介ページを作る時に、本当に全部の要素を使えたので達成感がありました！HTMLの基礎がしっかり身についた気がします。
素晴らしい！理論と実践を組み合わせることで、本当の理解につながったんだね。これで君たちはHTMLの基礎をマスターしたよ。次はいよいよCSSでデザインを学んでいこう！
- HTML基本概念 Webページの構造を理解し、HTMLの役割を説明できる
- 開発環境 VS CodeとChromeを使ってHTMLファイルを作成・表示できる
- 文書構造 HTML5の正しい文書構造でページを作成できる
- 基本タグ 見出し、段落、リストを適切に使い分けられる
- 属性活用 id、class、lang属性を目的に応じて使用できる
- テキスト要素 意味に基づいてstrong、em、citeタグを選択できる
- 実践力 学んだ知識を統合してオリジナルページを作成できる
第2章では、リンクと画像の使い方を学びます。他のページへのリンク作成や、魅力的な画像の表示方法をマスターして、より豊かなWebページを作れるようになりましょう！