sample.pdf

Transcript

1. <!DOCTYPE html> <html lang="ja"> <head> <title>HTML入門</title> </head> <body> <h1>学習開始</h1> <p>基礎から始めよう</p> </body> </html> AIチューター学習コース HTML 学習コース概要 3 単元数 130分 学習時間 初級 難易度
2. コース全体像 単元#1 イントロダクション HTMLとは何かを対話形式で学ぶ。 コードは書かず概念理解に集中。 10分 10,000 cr 単元#2 基礎 HTMLの基本構造・テキスト・リス ト・コンテナ・画像を実践的に学習 。 60分 35,000 cr 単元#3 セマンティックHTML 意味のあるタグでSEO・アクセシビ リティに強いマークアップを学習。 60分 50,000 cr
3. HTMLとは？ ─ Webページができる仕組み HTMLファイル index.html テキストで書かれた 設計図ファイル ブラウザ Chrome / Safari HTMLを読み取り 解釈・レンダリング Webページ ブラウザ上で表示 見出し・リスト・ 画像が表示される HTMLファイルはメモ帳でも書けます。文字（テキスト）だけで構成された、シンプルなファイルです。
4. HTMLタグの仕組み ① 開始タグ <h1> 要素の始まりを示す 「<タグ名>」の形 ② 内 容 こんにちは ブラウザに表示される テキストや要素 ③ 終了タグ </h1> 要素の終わりを示す 「/」がついた形 組み合わせるとこうなる： <h1>こんにちは</h1> ブラウザで表示すると： こんにちは
5. HTMLの基本構造 <html lang="ja"> </html> <head> </head> <title> ページタイトル <meta> 文字コード設定 <link> CSS読み込み <body> </body> <h1> 大見出し <p> 段落テキスト <a> リンク head は「見えない設定」、body は「見える内容」 各要素の役割 <html> HTML文書全体を囲む最外殻タグ。lang='ja'で日本語を指定す る。 <head> ページの情報を書く場所。ブラウザには表示されない。 <body> 実際にブラウザに表示されるコンテンツを全て書く場所。 <title> ブラウザのタブに表示されるページタイトルを指定する。 <meta> 文字コード（UTF-8）などページの設定情報を指定する。
6. テキストを表示するタグ 見出しタグの大きさ比較 (h1〜h6) <h1> 最大の見出し <h2> 大見出し <h3> 中見出し <h4> 小見出し <h5> より小さい <h6> 最小 h1が最大、h6が最小。ページに h1 は1つだけが原則 その他のテキストタグ <p> 段落タグ <p>本文テキストです。</p> → テキストを段落として表示。前後に自動で余白が できる <a> リンクタグ <a href="URL">リンク文字</a> href 属性 リンク先のURL を指定する
7. リスト & コンテナ要素 リスト <ul> 順序なし りんご みかん ぶどう <ol> 順序あり 1 起動する 2 ファイル作成 3 コードを書く <ul> <li>りんご</li> <li>みかん</li> </ul> コンテナ要素（グループ化） <div> ブロック要素 <div> ブロックA （行全体を占める） <div> ブロックB （縦に積み重なる） <span> インライン要素 これはここだけ強調して続けます。 ここだけ強調 span はテキストの中に溶け込む（改行しない） これは<span>強調</span>して続ける
8. 画像・メディアの埋め込み <img> タグ <img src="photo.jpg" alt="風景写真"> src 属性 画像ファイルの場所（パスまた はURL）を指定する alt 属性 表示できない場合の代替テキス ト。SEOにも重要 photo.jpg <iframe> タグ <iframe src="YouTube URL"> YouTube 動画 動画ページの「共有」→「埋め込み」からiframe コードを取得 Google マップ マップの「共有」→「地図を埋め込む」から iframeコードを取得 外部サービスのコンテンツをそのまま埋め込める！
9. セマンティックHTML ─ ページ構造の設計 <header> ロゴ・タイトルなどページの上部 <nav> ナビゲーションメニュー部分 <main> メインコンテンツ（1ページに1つ） <section> テーマごとのセクション区分 <article> 独立したコンテンツ（記事・投稿） <footer> 著作権・リンクなどページの下部 ページレイアウトイメージ <header> ロゴ / タイトル <nav> Home | About | Contact <main> <section> <article> 記事コンテンツ <footer> © 2025 Copyright
10. このコースで身につくこと HTMLの 基礎力 HTMLファイルを作りブラウザで表示で きる 主要タグ（見出し・段落・リンク・リス ト・画像）を使える divとspanの違いを理解し構造化できる セマンティックタグでSEO・アクセシビ リティを意識できる さあ、HTMLの世界へ！