Day1 - HTMLを書いてみよう！

5日間の授業スタート！
今日はHTMLを書いて「Webページの仕組み」を体験します。

イメージ画像

この5日間でやること

Day1：HTMLを書いてみよう！
Day2：CSSで見た目を整えよう！
Day3：HTML+CSSでブラッシュアップ！
Day4：模写してみよう！
Day5：ページを仕上げて完成！

Webページはどうできている？

HTML = 構造、CSS = 見た目、JS = 動き

HTML：文章や画像などの“部品”を書く
CSS：色や大きさなど“見た目”を整える
JS：動きをつけたり計算したりする

HTMLを開いてみよう

まずは先生の用意したHTMLをブラウザで表示してみよう！

Chromeで開く
どんなふうに見える？
検証ツールを使ってみる

👉 s1.htmlを開く

HTMLってどう書くの？

HTMLの基本ルールは3つだけ！

タグで囲む（例：<p>こんにちは</p>）
開始と終了のペア（例：<h1> と </h1>）
入れ子（なかよく重ねる）構造

よく使うタグ

タグ	用途
`<h1>`〜`<h6>`	見出し
`<p>`	文章（段落）
`<img>`	画像
`<a>`	リンク
`<ul>` / `<ol>` / `<li>`	リスト
`<div>`	ブロック要素
`<span>`	インライン要素
`<br>`	改行

演習：自分のページを編集しよう！

名前を入れてみる
好きな画像を表示してみる
リンクでお気に入りサイトを紹介

👉 s0.htmlを開く

発展タスク

見出し（<h2>）を増やしてみよう
<span>を使ってみよう
<div>を使ってみよう
<header>を調べて使ってみよう
<footer>を調べて使ってみよう
<main>を調べて使ってみよう
<nav>を調べて使ってみよう
<section>を調べて使ってみよう

ふりかえり

今日はHTMLタグを使ってみました！
中身の「しくみ」が少しわかった！

👉 次回はCSSで見た目を整えていきます！