HTML/CSS クラス - レッスン 1 の内訳

レッスン 1: 基本的な HTML の復習と高度な HTML 要素の紹介

客観的：

• 基本的な HTML タグを更新します。
• より機能的な Web ページを構築するための中級レベルの HTML 要素を導入します。

1. HTML 構造の概要

まず、HTML がタグを使用して Web ページのコンテンツを編成する方法について簡単に説明します。 HTML (HyperText Markup Language) は Web ページの構造に使用され、CSS はスタイル設定に使用されることを強調します。

確認すべき重要な概念:

• 、、: すべての HTML ドキュメントには定義された構造があることを説明します。
  • : Web ページ全体を含むルート要素。
  • : タイトル、CSS へのリンク、スクリプトなどのメタ情報が含まれます。
  • : テキスト、画像、ユーザーが操作する要素など、すべての表示コンテンツが含まれます。

2.基本的な HTML タグの要約

• 見出し (

  から

  ):

  見出しは、最大 (

  ) から最小 (

  ) まで、コンテンツを階層的に構造化することを説明します。

主な見出し

小見出し

    
Main Heading
    
Sub Heading

• 段落 (

  ): テキストまたは段落のブロックを定義するために使用されます。

これは段落です。

    
Main Heading
    
Sub Heading

• アンカー (ここをクリック

      
  Main Heading
      
  Sub Heading
  

  • 画像 (): 画像の表示に使用されます。画像ファイルにリンクするための src 属性とアクセシビリティのための alt について説明します。
  例：

  
  

  

      
  Main Heading
      
  Sub Heading
  

  3.中間 HTML 要素の紹介

  3.1.フォーム (、、)

  • フォームはユーザー入力を収集するために使用されます。

  • 基本的なフォーム構造:
    • : フォーム要素のコンテナー。アクション (フォーム データの送信先) やメソッド (GET/POST) などの属性を含めることができます。
    • : 入力要素のラベルを定義し、アクセシビリティを向上させます。
    • : テキスト、パスワード、チェックボックス、ラジオなどのさまざまなタイプの入力フィールドを定義します。
  テキスト入力を含む単純なフォームの例:

  
  

  名前: メールアドレス:

      
  Main Heading
      
  Sub Heading
  

  3.2.リスト (

  、
  、
  1. )
     • 順序なしリスト (
       ) と 順序付きリスト (
       ) は、箇条書きまたは番号付きリストでデータを整理するのに役立ちます。
     • リスト項目 (
     • ) はリスト内の各項目を定義します。
     順序なしリストと順序付きリストの例:

     
     

     • 項目 1
     • 項目 2
  2. ステップ 1
  3. ステップ 2

      
  Main Heading
      
  Sub Heading
  

  3.3.テーブル (

  、、

  、

  ) テーブルを使用すると、構造化データを行と列に表示できます。 : テーブルのコンテナ。 : テーブル内の行を定義します。 テーブル> Main Heading Sub Heading 4.クラス活動 4.1.アクティビティの要約: 生徒に次の内容を含む基本的なウェブページを作成してもらいます: 見出し ( ) 段落 ( ) 画像 () 例： 私のウェブサイトへようこそ これは私の最初のウェブページです。 Main Heading Sub Heading 4.2.ガイド付きエクササイズ: 単純なフォームの作成: ユーザー入力 (名前と電子メール) を収集するための単純なフォームの作成について生徒に説明します。 、、および を含めます。 4.3.リストとテーブル: 好きなものの順序なしリスト ( ) と、数行のデータ (名前、年齢、好きな色) を含む単純な表を作成するよう生徒に指示します。 例： 読書 コーディング 旅行 テーブル> Main Heading Sub Heading 5.宿題 学生は次の方法でウェブページを拡張する必要があります: チェックボックス、ラジオ ボタン、送信ボタンなどのフォーム要素を追加します。 フォームをカスタマイズして 追加のユーザー情報（性別、趣味など）を収集します。 例： 性別:男性女性 Gender:MaleFemale 6.追加のヒント W3C マークアップ検証サービスなどのツールを使用して HTML を 検証 するよう生徒に奨励します。 セマンティック HTML の重要性と、アクセシビリティと SEO にとって正しいタグの使用が重要である理由を説明します。 まとめ 学生は、見出し、段落、画像、リンクなどの基本的な HTML タグを確認します。 フォーム、リスト、テーブルなどの中級レベルの HTML 要素を紹介します。 実践的な演習と宿題により、より構造化された Web ページを作成する実践的な経験が得られます。 : テーブル内のセルを定義します。 : テーブルのヘッダー セルを定義します (オプション)。 単純なテーブルの例: 名前 年齢 ジョン 25 名前 年齢 アリス 30