はじめに
この実験では、ウェブサイトの主なコンテンツ領域に焦点を当てます。このセクションでは、「ペットの家」のサービスを紹介しています。
これは Guided Lab です。学習と実践を支援するためのステップバイステップの指示を提供します。各ステップを完了し、実践的な経験を積むために、指示に注意深く従ってください。過去のデータによると、この 初級 レベルの実験の完了率は 93%です。学習者から 98% の好評価を得ています。
会社概要レイアウト
会社概要セクションは、画像部分とテキストコンテンツ部分に分けることができます。画像を追加するには <img> タグを、タイトルを追加するには <h2> タグを、テキスト段落を追加するには <p> タグを使用します。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Pet's House</title>
</head>
<body>
<!--Header Content-->
<header>
<div class="logo-section">
<img class="logo" src="images/logo.svg" alt="logo" />
</div>
<nav class="navigation-section">
<ul class="navigation">
<li>Home</li>
<li>About Us</li>
<li>Display</li>
<li>Contact</li>
</ul>
</nav>
</header>
<!--Main Content-->
<main>
<div class="container">
<section id="home" class="cover-sect">
<div class="title-text">
<h1>Welcome</h1>
<p>~ This website offers personalised services for pets. ~</p>
</div>
<div class="box-feature">
<img class="cover-image" src="images/cat.jpeg" alt="just a cat" />
</div>
</section>
<section id="about" class="story-sect">
<div class="section-text">
<h2>About Us</h2>
<p>
we're about creating a community of happy pets and happier pet
owners. <br /><br />
Our exceptional customer service team is dedicated to providing
you with a seamless shopping experience, offering expert support
from browsing to delivery and beyond. <br /><br />We understand
the importance of fast, reliable service, which is why we offer
expedited shipping options and hassle-free returns.
</p>
</div>
<div class="box-feature circle">
<img src="images/intro.png" />
</div>
</section>
</div>
</main>
<!--Footer Content-->
<footer></footer>
</body>
</html>
idグローバル属性は、識別子（ID）を定義します。これは、文書全体で一意でなければなりません。classと同じように、要素の名前のようなものですが、違いは、id が一意であり、id 属性にはブックマークを設定する機能もあります。これを後の実験で使用します。<h1>から<h6>までの HTML 要素は、セクション見出しの 6 つのレベルを表します。<br>HTML 要素は、テキスト内で改行（キャリッジ・リターン）を生成します。詩や住所を書く場合に便利で、行の区切りが重要な場合に使用します。
表示レイアウト
主に画像とテキストで構成される展示ページでは、このページを 3 つのセクションに分けることができます。それぞれのセクションは画像とテキストで構成されています。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Pet's House</title>
</head>
<body>
<!--Header Content-->
<header>
<div class="logo-section">
<img class="logo" src="images/logo.svg" alt="logo" />
</div>
<nav class="navigation-section">
<ul class="navigation">
<li>Home</li>
<li>About Us</li>
<li>Display</li>
<li>Contact</li>
</ul>
</nav>
</header>
<!--Main Content-->
<main>
<div class="container">
<section id="home" class="cover-sect">
<div class="title-text">
<h1>Welcome</h1>
<p>~ This website offers personalised services for pets. ~</p>
</div>
<div class="box-feature">
<img class="cover-image" src="images/cat.jpeg" alt="just a cat" />
</div>
</section>
<section id="about" class="story-sect">
<div class="section-text">
<h2>About Us</h2>
<p>
we're about creating a community of happy pets and happier pet
owners. <br /><br />
Our exceptional customer service team is dedicated to providing
you with a seamless shopping experience, offering expert support
from browsing to delivery and beyond. <br /><br />We understand
the importance of fast, reliable service, which is why we offer
expedited shipping options and hassle-free returns.
</p>
</div>
<div class="box-feature circle">
<img src="images/intro.png" />
</div>
</section>
<section id="display" class="samples">
<div class="section-text">
<h2>Display</h2>
</div>
<div class="services">
<div class="service">
<figure>
<img src="images/service-1.png" alt="Dog walking services" />
<figcaption>Provide pet care services.</figcaption>
</figure>
</div>
<div class="service">
<figure>
<img src="images/service-2.png" alt="Pet check-up services" />
<figcaption>Provide pet check-up services.</figcaption>
</figure>
</div>
<div class="service">
<figure>
<img src="images/service-3.png" alt="Pet washing services" />
<figcaption>Provide pet washing services.</figcaption>
</figure>
</div>
</div>
</section>
</div>
</main>
<!--Footer Content-->
<footer></footer>
</body>
</html>
<figure>HTML 要素は、キャプション（オプション）付きの独立したコンテンツを表します。キャプションは<figcaption>要素を使用して指定します。図、そのキャプション、およびそのコンテンツは、1 つの単位として参照されます。
まとめ
この実験では、ウェブサイトのメインセクションを開発する方法を案内しました。そこでは、「ペットの家」のサービスを紹介しました。このステップは、ウェブサイトが提供するものを詳細に説明し、構造化されたコンテンツと美学的な要素を通じてサイトの訪問者に対する価値を高めるために重要でした。
