Einführung
In diesem Lab konzentrieren Sie sich auf den Hauptinhaltsbereich Ihrer Website. Dieser Abschnitt zeigt die Dienstleistungen von "Pet's House" auf.
Dies ist ein Guided Lab, das schrittweise Anweisungen bietet, um Ihnen beim Lernen und Üben zu helfen. Befolgen Sie die Anweisungen sorgfältig, um jeden Schritt abzuschließen und praktische Erfahrungen zu sammeln. Historische Daten zeigen, dass dies ein Labor der Stufe Anfänger mit einer Abschlussquote von 93% ist. Es hat eine positive Bewertungsrate von 98% von den Lernenden erhalten.
Über Uns Layout
Der Über Uns - Abschnitt kann in zwei Teile unterteilt werden: den Bildteil und den Textinhaltsteil. Mit der <img> - Tag fügt man das Bild hinzu, mit der <h2> - Tag den Titel und mit der <p> - Tag den Textabschnitt hinzu.
<!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 />
Unser außergewöhnliches Kundendienstteam ist bestrebt, Ihnen eine
nahtlose Einkaufserfahrung zu bieten und Ihnen von der Suche bis
zur Lieferung und darüber hinaus kompetente Unterstützung zu
gewähren. <br /><br />Wir verstehen die Wichtigkeit einer
schnellen und zuverlässigen Dienstleistung, weshalb wir Ihnen
verschnellte Versandoptionen und problemlose Rücksendungen
anbieten.
</p>
</div>
<div class="box-feature circle">
<img src="images/intro.png" />
</div>
</section>
</div>
</main>
<!--Footer Content-->
<footer></footer>
</body>
</html>
- Das globale Attribut
iddefiniert eine Kennung (ID), die in ganzem Dokument eindeutig sein muss. Es ähnelt demclassdarin, dass es wie ein Name für das Element ist, aber der Unterschied besteht darin, dass die ID eindeutig ist, und das id - Attribut hat auch die Möglichkeit, Lesezeichen zu setzen, was wir später im Experiment verwenden werden. - Die HTML - Elemente
<h1>bis<h6>repräsentieren sechs Ebenen von Abschnittstiteln. - Das HTML - Element
<br>erzeugt einen Zeilenumbruch im Text (Zeilenwechsel). Es ist nützlich, um ein Gedicht oder eine Adresse zu schreiben, wo die Unterteilung der Zeilen von Bedeutung ist.
Anzeigelayout
Auf der Display - Seite, die hauptsächlich aus Bildern und Text besteht, können wir diese Seite in drei Abschnitte unterteilen, wobei jeder Abschnitt aus Bildern und Text besteht.
<!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 />
Unser außergewöhnliches Kundendienstteam ist bestrebt, Ihnen eine
nahtlose Einkaufserfahrung zu bieten und Ihnen von der Suche bis
zur Lieferung und darüber hinaus kompetente Unterstützung zu
gewähren. <br /><br />Wir verstehen die Wichtigkeit einer
schnellen und zuverlässigen Dienstleistung, weshalb wir Ihnen
verschnellte Versandoptionen und problemlose Rücksendungen
anbieten.
</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>
- Das HTML - Element
<figure>stellt inhaltseingeschlossene Inhalte dar, möglicherweise mit einer optionalen Bildunterschrift, die mit dem<figcaption>- Element angegeben wird. Die Figur, ihre Bildunterschrift und ihre Inhalte werden als eine Einheit referenziert.
Zusammenfassung
In diesem Lab haben Sie die Entwicklung des Hauptabschnitts der Website mitgeführt, in dem Sie die Dienstleistungen von "Pet's House" vorgestellt haben. Dieser Schritt war von entscheidender Bedeutung, um detailliert darzustellen, was die Website bietet, und erhöhte den Wert der Website für Besucher durch strukturierte Inhalte und Ästhetik.
