The Complete Python Pro Bootcamp 2023: Day 42/100
HTMLの基本的な構造となるHTMLボイラープレート、リスト要素、属性の詳細を学習しました。さらに、適切なネストとインデントを用いてコードの可読性を向上させる方法についても探求しました。
リストの項目のネスト、リンクの作成、画像の挿入といったHTMLの各機能を実際に操作し、それぞれの使用方法と意義を理解しました。
日の終わりには、これらの新しい知識を使ってレトロな90年代テーマの誕生日パーティーの招待状ウェブサイトを作成するプロジェクトに取り組み、HTML要素の実践的な応用を体験しました。
42日目はHTMLの世界に踏み込み、HTMLのボイラプレート、リスト要素、属性の複雑さを学びました。適切な入れ子とインデントによってコードの読みやすさを向上させることに焦点を当て、ハイパーリンクを作成し、HTMLドキュメントに画像を挿入する方法を探りました。
HTMLボイラープレートの理解
HTMLボイラープレートとは、すべてのHTMLファイルの基礎となるものです。このレッスンはハンバーガーに例えて紹介され、さまざまなHTML要素が互いに入れ子になっていることが示されました。
ボイラープレートはdoctype宣言から始まり、ブラウザに使用されているHTMLのバージョンを通知します。次に、文書全体をカプセル化するルートHTML要素を追加します。次に「head」要素が続き、文字セット・エンコーディングやウェブページのタイトルといった重要な情報が含まれます。
最後に「body」要素を追加し、テキストや画像、リンクといったウェブサイトのコンテンツを保持します。レッスンを通して、コードの読みやすさを維持するために適切なインデントが重要であることを繰り返し強調しました。学習者は、HTML の定型文を作成し、さまざまな要素を追加して、自分だけの「ハンバーガー」ウェブサイトを構築することを試みました。
HTML におけるリスト： 順序なしと順序あり
次に、HTMLのリスト要素について、順序なしリストと順序付きリストの違いについて説明しました。これらの概念を示すために、BuzzFeedの記事やFBIの最重要指名手配犯リストなどの実例を参照しました。
順序なしリスト（UL）と順序付きリスト（OL）の作成構文を説明し、リストアイテム（LI）を使用して各要素の内容を定義する方法を強調しました。また、リストマーカーとしての箇条書き（順序なし）と数字（順序あり）の違いも強調しました。これらの概念を練習するために、与えられたシナモンロールのレシピをHTMLのリストに変換するコーディング演習を行いました。
HTML における入れ子とインデント
引き続き、HTMLの入れ子とインデントに焦点を当てました。ここでは、リストの中のリストなど、HTMLの要素は互いに入れ子にすることができるという概念を紹介しました。学習者に複雑な入れ子リストを作成させる演習を行い、正確なインデントの重要性を強調しました。
HTML 属性の紹介
HTMLの属性について、特にアンカー要素とハイパーリンクの作成に焦点を当てました。属性の構造と、ハイパーリンク先のURLを指定する「href」属性の機能について説明しました。グローバル属性の概念も紹介され、dragable属性など、どのHTML要素にも適用できる属性が示されました。
HTML ドキュメントへの画像の組み込み
この日の学習の最後は、画像要素と、ウェブサイトに画像を組み込む方法に焦点を当てました。ウェブサイトのアクセシビリティに不可欠な概念である「altテキスト」を紹介し、スクリーンリーダーに頼る視覚障害者のために説明的なテキストを提供することの重要性を強調しました。
誕生日の招待状プロジェクト すべてをまとめる
豊富な情報を吸収した学習者は、90年代をテーマにしたレトロな誕生日パーティーの招待状サイトを作成し、新しい知識を応用することに挑戦しました。このプロジェクトには、画像、リスト、アンカータグなど、その日に取り上げたすべてのトピックが含まれています。
42日目までに、学習者はHTMLの要素とその応用に関する確かな基礎を身につけ、魅力的なウェブ開発の世界への旅を続ける準備が整いました。
このレッスンでは、HTMLファイルの構造を提供するHTMLボイラープレートという概念を紹介します。ハンバーガーに例えて、HTML 要素の入れ子とインデントを説明します。HTMLボイラープレートは、HTMLのバージョンを指定するdoctype宣言と、文書のルートとなるHTML要素で構成されます。head要素は、文字セット・エンコーディングやタイトルなど、ウェブサイトに関する重要な情報を含めるのに使われます。body要素には、テキスト、画像、リンクなど、ウェブサイトの実際のコンテンツが含まれます。コードの読みやすさを維持するために、適切なインデントが強調されています。HTMLボイラープレートを素早く生成するためのVSコードのショートカットについても触れています。互換性とビューポート設定のための追加のメタタグについて説明します。学習者は、独自のHTMLボイラープレートを作成し、さまざまな要素を試して独自の「ハンバーガー」ウェブサイトを構築することが推奨されます。Q&Aセクションでコードを共有することが推奨されます。
このレッスンでは、HTMLの中級と上級のコンセプトを紹介します。リスト要素、特に順序付きリストと順序なしリストに焦点を当てます。BuzzFeedの記事やFBIの最重要指名手配犯など、インターネット上で見られるリストの例を示します。順序なしリストと順序付きリストを作成するための構文を説明し、リスト項目を使用して各リスト項目の内容を定義します。リストマーカーとしての箇条書きと数字の違いも強調されています。シナモンロールのレシピに従って、プレーンテキストをリストに整形するコーディング演習を行います。UL要素とOL要素をそれぞれ順序なしリストと順序付きリストに使い、その中にリスト項目を追加します。リスト項目の書式設定におけるインデントと個人の好みの重要性についても触れています。このレッスンでは、入れ子とインデントについてより詳しく説明します。
このレッスンでは、HTMLにおける入れ子とインデントの概念を紹介します。リストの中のリストも含め、要素同士を入れ子にすることができることを説明します。コードの可読性における適切なインデントの重要性が強調されます。与えられた構造に従って、複雑な入れ子リストを作成する演習を行います。この問題では、リスト項目の中に順序なしリストと順序付きリストを入れ子にし、インデントに注意します。また、Visual Studio Code を使用した自動インデントの利点についても説明します。このレッスンは、エラーチェックとデバッグにおけるインデントの有用性を強調することで締めくくられます。次のレッスンでは、アンカー要素とWebページでのハイパーリンクの作成について説明します。
このレッスンでは、アンカー要素とハイパーリンクの作成に焦点を当て、HTML属性の概念を紹介します。属性の構造は、属性名、等号、属性値で構成されています。href属性は、ハイパーリンクのリンク先URLを指定するための属性として特に言及されています。href属性を追加した後のハイパーリンクの見た目の変化について説明します。あらゆる HTML 要素に適用できるグローバル属性についても、dragable 属性を例に挙げて説明します。演習では、学習者がお気に入りのウェブサイト上位5つを紹介するウェブサイトを、順序付きリストとアンカータグを使って作成します。アンカー・タグをリスト・アイテムの中に入れ子にし、href属性に対応するウェブサイトのURLを追加します。学習者はまた、開始番号を変更するために、順序付きリストの start 属性を変更することに挑戦します。この解決策は実演され、学習した概念を強化し、メモを取ることの重要性が強調されます。次のレッスンでは image 要素について簡単に触れます。
このレッスンでは、HTML の image 要素が紹介され、ウェブサイトに画像を追加するプロセスが説明されます。image 要素は自己閉鎖タグとして示され、以前に説明した他の void 要素と同様に void 要素です。image要素の重要な属性は "src "属性で、画像のソースを指定します。代替テキストの概念が紹介され、スクリーン・リーダーに依存する視覚障害者のために、画像に説明的なaltテキストを提供することの重要性が強調されています。スクリーン・リーダーの出力をシミュレートするためのブラウザ拡張機能であるSilktideツールバーの例を示し、altテキストの重要性を強調します。学習者が、提供された画像URLを使って画像要素を作成し、説明的なaltテキストを追加するように指示される演習が用意されています。この問題では、猫派か犬派かを示すH1見出しを作成し、対応する画像URLとaltテキストを含む画像要素を作成します。プレビューを表示して、画像が正常にレンダリングされていることを確認します。Webサイトのアクセシビリティを向上させるaltテキストの重要性が再確認され、学習者は、これまでに学んだスキルを使って、誕生日招待のWebサイトを作成する最終プロジェクトで知識を応用することが奨励されます。
この記事が気に入ったらサポートをしてみませんか？