この実験では、学習者は Web 開発における HTML コメントと特殊文字の使用の基本技術を探求します。この実験では、HTML コメントの構文を理解し、単一行と複数行のコメントを作成し、特殊文字用の HTML 文字エンティティを利用するための包括的なガイドが提供されます。
参加者は、HTML コードに説明的な注釈を追加し、コードセクションを一時的に無効にし、Web ドキュメントに特殊文字を埋め込む実践的なスキルを習得します。手を動かしながらの例と段階的な指示を通じて、学生はコメントと特殊文字を使用してコードの読みやすさを向上させ、作業を文書化し、HTML マークアップを効果的に管理する方法を学びます。
このステップでは、HTML コメントについて学びます。HTML コメントは、Web ページに表示されない HTML コードに説明的な注釈を追加するために不可欠です。
HTML コメントは、開発者が注釈、説明、またはコードの一部を一時的に無効にするために使用できる特殊なマーカーです。Web ページを表示しているユーザには見えませんが、ソースコードを調べるときには見ることができます。
HTML コメントの基本的な構文は以下の通りです。
<!-- This is an HTML comment -->HTML コメントの主な特徴：
<!-- で始まります--> で終わりますコメントを示すための簡単な HTML ファイルを作成しましょう。
WebIDE を開き、~/project ディレクトリに新しいファイル comments-example.html を作成します。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>HTML Comments Example</title>
</head>
<body>
<!-- This is a comment explaining the purpose of the page -->
<h1>Welcome to My Website</h1>
<!-- TODO: Add more content later -->
<p>This is a sample paragraph.</p>
<!--
Multi-line comments
can span across
multiple lines
-->
</body>
</html>「Go Live」をクリックして Web サーバを開き、comments-example.html をクリックしてレンダリングされた Web ページを表示します。
これらのコメントは、レンダリングされた Web ページには表示されませんが、ページソースを見るときには表示されます。
このステップでは、HTML コードの特定の部分を説明するための簡潔な注釈である単一行の HTML コメントを作成する方法を学びます。
単一行コメントは、HTML コメントの最も一般的なタイプです。特定の行やコードセクションについての簡単な説明や注釈を提供するために使用されます。単一行コメントを練習するために新しい HTML ファイルを作成しましょう。
WebIDE を開き、~/project ディレクトリに single-line-comments.html という名前のファイルを作成します。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Single-Line Comments Example</title>
</head>
<body>
<!-- This is a single-line comment describing the main heading -->
<h1>Welcome to My Web Page</h1>
<!-- Navigation menu section -->
<nav>
<ul>
<!-- Home link -->
<li><a href="#">Home</a></li>
<!-- About link -->
<li><a href="#">About</a></li>
<!-- Contact link -->
<li><a href="#">Contact</a></li>
</ul>
</nav>
<!-- Main content area -->
<main>
<!-- Paragraph with additional context -->
<p>This is an example of using single-line HTML comments.</p>
</main>
</body>
</html>単一行の HTML コメントに関する要点：
<!-- で始まり、--> で終わりますこのステップでは、より詳細な説明を提供するために役立つ複数行の HTML コメントを作成する方法、または一時的により大きなコードブロックを無効にする方法を学びます。
複数行コメントを使用すると、複数行にまたがるコメントを書くことができ、HTML コードに広範な注釈や文書を追加することが容易になります。WebIDE を開き、~/project ディレクトリに multi-line-comments.html という名前のファイルを作成します。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Multi-Line Comments Example</title>
</head>
<body>
<!--
This is a multi-line comment
demonstrating how to write
comments that span multiple lines.
You can include:
- Detailed explanations
- TODO notes
- Code documentation
- Temporary code blocks
-->
<h1>Welcome to My Web Page</h1>
<!--
Temporarily disabled section
<div class="hidden-content">
<p>This content is currently hidden using a multi-line comment.</p>
</div>
-->
<main>
<!--
Project Description:
This is a sample webpage to demonstrate
the use of multi-line HTML comments
in web development.
-->
<p>Learning HTML comments is an important skill for web developers.</p>
</main>
</body>
</html>複数行の HTML コメントに関する要点：
<!-- で始まり、--> で終わりますこのステップでは、HTML 文字エンティティについて学びます。HTML 文字エンティティは、HTML で直接入力できない予約文字や記号を表示するために使用される特殊なコードです。
HTML 文字エンティティは、HTML で特殊な意味を持つ特殊文字や直接入力が難しい文字を表示するのに役立ちます。それらはアンパサンド（&）で始まり、セミコロン（;）で終わります。
WebIDE を開き、~/project ディレクトリに character-entities.html という名前のファイルを作成します。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>HTML Character Entities</title>
</head>
<body>
<h1>Common HTML Character Entities</h1>
<p>Less than symbol: < (represents <)</p>
<p>Greater than symbol: > (represents >)</p>
<p>Ampersand symbol: & (represents &)</p>
<p>Quotation mark: " (represents ")</p>
<p>Copyright symbol: ©</p>
<h2>Special Symbols Examples</h2>
<p>Currency symbols: € (Euro), £ (Pound), ¥ (Yen)</p>
<p>Mathematical symbols: × (Multiplication), ÷ (Division)</p>
<p>Trademark: ™</p>
<h3>Spacing and Invisible Characters</h3>
<p>Non-breaking space: First Word Second</p>
</body>
</html>Web ブラウザでの出力例：
Common HTML Character Entities
Less than symbol: <
Greater than symbol: >
Ampersand symbol: &
Quotation mark: "
Copyright symbol: ©
Special Symbols Examples
Currency symbols: € £ ¥
Mathematical symbols: × ÷
Trademark: ™
Spacing and Invisible Characters
First Word SecondHTML 文字エンティティに関する要点：
& で始まり、; で終わります一般的な文字エンティティ：
< - 小なり> - 大なり& - アンパサンド" - 引用符© - 著作権表示このステップでは、HTML コメントと文字エンティティに関することをすべて組み合わせて、これらの概念を示す包括的な HTML ドキュメントを作成します。
WebIDE を開き、~/project ディレクトリに final-practice.html という名前のファイルを作成します。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>HTML Comments and Special Symbols Practice</title>
</head>
<body>
<!-- Main page header with special character -->
<h1>Tech & Innovation Blog</h1>
<!-- Navigation section with comments -->
<nav>
<!-- TODO: Add more navigation links later -->
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Articles »</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<!--
Main content area
This section will showcase how to use
comments and special symbols effectively
-->
<main>
<article>
<h2>Understanding Web Development © 2023</h2>
<p>Key symbols in tech: <code>, >, &, "</p>
<!-- Temporary note for future updates -->
<p>Price: €49.99 × 2 = £99.98</p>
</article>
<!--
Footer section with copyright
and additional information
-->
<footer>
<p>© 2023 Tech Blog ™ All rights reserved.</p>
</footer>
</main>
</body>
</html>Web ブラウザでの出力例：
Tech & Innovation Blog
Home | Articles » | Contact
Understanding Web Development © 2023
Key symbols in tech: <code>, >, &, "
Price: €49.99 × 2 = £99.98
© 2023 Tech Blog ™ All rights reserved.この練習の要点：
この実験では、参加者は HTML コメントと特殊文字を探り、HTML コードを効果的に文書化して注釈付けする方法を学びました。この実験では、HTML コメントの構文と使い方を学び、開発者が Web ページの閲覧者には見えないが、ソースコードを調べるときにアクセスできる説明的な注釈を追加できる方法を示しました。
参加者は、単一行と複数行のコメントの作成を練習し、<!-- で始まり --> で終わるなどの主な特徴を理解しました。また、コードの文書化、コードセクションを一時的に隠す方法、「TODO」マーカーのような開発ノートの追加にコメントをどのように使用するかを学びました。さらに、この実験では、特殊文字を表す HTML 文字エンティティを紹介し、HTML のテキストレンダリング機能の理解を深めました。
