In diesem Labyrinth werden Sie durch das Erstellen eines Kontaktformulars und des Fußzeilenabschnitts geführt, was für die Interaktion und die Bereitstellung zusätzlicher Informationen von entscheidender Bedeutung ist.
Skills Graph
%%%%{init: {'theme':'neutral'}}%%%%
flowchart RL
html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"])
html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"])
html(("HTML")) -.-> html/FormsandInputGroup(["Forms and Input"])
html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"])
html/BasicStructureGroup -.-> html/head_elems("Head Elements")
html/BasicStructureGroup -.-> html/charset("Character Encoding")
html/LayoutandSectioningGroup -.-> html/layout("Layout Elements")
html/LayoutandSectioningGroup -.-> html/nav_links("Navigation and Links")
html/FormsandInputGroup -.-> html/forms("Form Elements")
html/FormsandInputGroup -.-> html/form_valid("Form Validation")
html/FormsandInputGroup -.-> html/form_access("Accessibility in Forms")
html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements")
subgraph Lab Skills
html/head_elems -.-> lab-271711{{"Formular und Fußzeilenlayout"}}
html/charset -.-> lab-271711{{"Formular und Fußzeilenlayout"}}
html/layout -.-> lab-271711{{"Formular und Fußzeilenlayout"}}
html/nav_links -.-> lab-271711{{"Formular und Fußzeilenlayout"}}
html/forms -.-> lab-271711{{"Formular und Fußzeilenlayout"}}
html/form_valid -.-> lab-271711{{"Formular und Fußzeilenlayout"}}
html/form_access -.-> lab-271711{{"Formular und Fußzeilenlayout"}}
html/inter_elems -.-> lab-271711{{"Formular und Fußzeilenlayout"}}
end
Kontaktaufnahme Layout
Der Kontaktaufnahme-Abschnitt besteht aus zwei Teilen, dem Textabsatz und dem Formularinhalt. Es gibt verschiedene Arten von Formularfeldern in HTML, wie Textfeldformulare, Mehrfachauswahlformulare, Submit-Button-Formulare usw.
<!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>
<section id="contact" class="contact-section">
<div class="section-text">
<h2>Contact Us</h2>
<p>
Welcome to our pet website! We're thrilled to have you here and
eager to share with you the array of services we offer for you and
your beloved pets. Whether you're looking for grooming, boarding,
training, or any other pet-related service, we've got you covered.
Our team is passionate about animals and committed to providing
the best care possible. If you're interested in learning more
about our services or if you're considering joining our community,
we encourage you to fill out our form. This will allow us to
understand your needs better and offer tailored solutions for you
and your pet. Welcome aboard, and we look forward to serving you!
</p>
</div>
<div class="contact-info">
<div class="form-box">
<form id="form" class="contact-form">
<label for="name" class="form-content"
>Name <br />
<input
name="name"
id="name"
type="text"
class="txt-box"
required
/><br />
</label>
<label for="email" class="form-content"
>Email <br />
<input
name="email"
id="email"
type="email"
class="txt-box"
required
/><br />
</label>
<label for="message" class="form-content"
>Demand for services<br />
<select name="message" id="message" class="txt-box">
<option value="">Feeding pets at home</option>
<option value="">Pet play service</option>
<option value="">Pet bathing service</option>
<option value="">Join us</option>
</select>
<br /> </label
><br />
<input class="btn" id="submit" type="submit" value="Submit" />
</form>
</div>
</div>
</section>
</div>
</main>
<!--Footer Content-->
<footer></footer>
</body>
</html>
Das HTML-Element <form> stellt einen Abschnitt der Dokumente dar, der interaktive Steuerelemente zum Absenden von Informationen enthält.
Das HTML-Element <label> stellt eine Beschriftung für ein Element in der Benutzeroberfläche dar. Um ein <label>-Element explizit mit einem <input>-Element zu verknüpfen, müssen Sie zunächst das id-Attribut zum <input>-Element hinzufügen. Anschließend fügen Sie das for-Attribut zum <label>-Element hinzu, wobei der Wert von for dem id im <input>-Element entspricht.
Das HTML-Element <input> wird verwendet, um interaktive Steuerelemente für webbasierte Formulare zu erstellen, um Daten vom Benutzer zu empfangen; es stehen eine Vielzahl von Eingabetypen und Steuerelementen zur Verfügung, je nachdem vom Gerät und dem Benutzer-Agenten.
Das HTML-Element <select> stellt eine Steuerung dar, die eine Optionenliste bietet.
Jedes <option>-Element sollte ein value-Attribut haben, das den Datenwert enthält, der an den Server gesendet werden soll, wenn diese Option ausgewählt wird. Wenn kein value-Attribut enthalten ist, wird der Wert standardmäßig auf den im Element enthaltenen Text gesetzt.
Das type-Attribut ermöglicht es Ihnen, verschiedene Arten von Eingabeelementen anzugeben.
type="text" bedeutet, dass dies ein Text-Eingabefeld ist.
type="email" bedeutet, dass dies ein E-Mail-Eingabefeld ist.
type="submit" bedeutet, dass dies ein Formularelement mit einem Submit-Button ist.
Klicken Sie in der unteren rechten Ecke der Umgebung auf Go Live, um Port 8080 zu öffnen, und klicken Sie in der oberen linken Ecke der Umgebung auf Web 8080, um die Seitenergebnisse anzuschauen.
Als nächstes möchten wir es so gestalten, dass wir beim Klicken auf Home, About Us, Display und Contact in der Navigationsleiste im Header zu dem entsprechenden Inhaltsbereich springen können.
Hinzufügen des a-Tags zu einem ul-Listenelement in der Navigationsleiste:
Das HTML-Element <a> (oder Anker-Element), mit seinem href-Attribut, erstellt einen Hyperlink zu Webseiten, Dateien, E-Mail-Adressen, Positionen in derselben Seite oder allem anderen, auf das eine URL verweisen kann.
Der Inhalt jedes <a> sollte den Zielort der Verknüpfung angeben. Wenn das href-Attribut vorhanden ist, wird es aktiviert, wenn die Eingabetaste gedrückt wird, während der Fokus auf dem <a>-Element liegt. Hier fügen wir den Namen des id-Attributs des entsprechenden Layouts innerhalb des href-Attributs hinzu.
Schließlich wird der Inhalt des Fußzeilenabschnitts implementiert.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Pet's House</title>
</head>
<body>
<!--header-section-->
<header>
<div class="logo-section">
<img class="logo" src="images/logo.svg" alt="logo" />
</div>
<nav class="navigation-section">
<ul class="navigation">
<li><a class="nav-link" href="#home">Home</a></li>
<li><a class="nav-link" href="#about">About Us</a></li>
<li><a class="nav-link" href="#display">Display</a></li>
<li><a class="nav-link" href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<!--main section-->
<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>
<!-- display 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>
<!-- contact section -->
<section id="contact" class="contact-section">
<div class="section-text">
<h2>Contact Us</h2>
<p>
Welcome to our pet website! We're thrilled to have you here and
eager to share with you the array of services we offer for you and
your beloved pets. Whether you're looking for grooming, boarding,
training, or any other pet-related service, we've got you covered.
Our team is passionate about animals and committed to providing
the best care possible. If you're interested in learning more
about our services or if you're considering joining our community,
we encourage you to fill out our form. This will allow us to
understand your needs better and offer tailored solutions for you
and your pet. Welcome aboard, and we look forward to serving you!
</p>
</div>
<div class="contact-info">
<div class="form-box">
<form id="form" class="contact-form">
<label for="name" class="form-content"
>Name <br />
<input
name="name"
id="name"
type="text"
class="txt-box"
required
/><br />
</label>
<label for="email" class="form-content"
>Email <br />
<input
name="email"
id="email"
type="email"
class="txt-box"
required
/><br />
</label>
<label for="message" class="form-content"
>Demand for services<br />
<select name="message" id="message" class="txt-box">
<option value="">Feeding pets at home</option>
<option value="">Pet play service</option>
<option value="">Pet bathing service</option>
<option value="">Join us</option>
</select>
<br /> </label
><br />
<input class="btn" id="submit" type="submit" value="Submit" />
</form>
</div>
</div>
</section>
</div>
</main>
<footer>
<span class="contact-us">Contact Us</span>
<span class="company-info">Created by Lotus</span>
<span>@Copyright 2024</span>
</footer>
</body>
</html>
Das HTML-Element <span> ist ein generischer inline-Container für phrasing-Inhalte, der an sich nichts repräsentiert. Es kann verwendet werden, um Elemente zu gruppieren, um sie zu stylen (mithilfe der class- oder id-Attribute), oder weil sie gemeinsame Attributwerte wie lang teilen. Es sollte nur verwendet werden, wenn kein anderer semantisches Element geeignet ist. <span> ist sehr ähnlich wie das <div>-Element, aber <div> ist ein block-level-Element, während <span> ein inline-level-Element ist.
Das HTML-Element <link> gibt die Beziehungen zwischen der aktuellen Datei und einer externen Ressource an. Dieses Element wird am häufigsten verwendet, um auf Stylesheets zu verweisen, wird aber auch verwendet, um Site-Icons (sowohl "favicon"-Art-Icons als auch Icons für den Homescreen und Apps auf mobilen Geräten) und andere Dinge zu erstellen.
Wir verwenden eine Vielzahl von HTML-Elementen, um den Inhalt der Seite fertigzustellen. Wenn wir das Effekt eines Bildes erhalten möchten, müssen wir CSS verwenden. Hier haben wir eine vollständige CSS-Datei (style.css) vorbereitet und verwenden das Link-Element, um sie einzufügen.
Klicken Sie in der unteren rechten Ecke der Umgebung auf Go Live, um Port 8080 zu öffnen, und klicken Sie in der oberen linken Ecke der Umgebung auf Web 8080, um die Seitenergebnisse anzuzeigen.
In diesem Lab haben Sie die Website abgeschlossen, indem Sie ein Kontaktformular und einen Footer hinzugefügt haben und über Benutzerinteraktion und Informationszugänglichkeit gelernt haben. Dieses Lab hat die Bedeutung von Kommunikationskanälen und einer einheitlichen Gestaltung bei der Webentwicklung unterstrichen und die Struktur der Website abgerundet.
Herzlichen Glückwunsch zu Ihrer Einführung in HTML. Wenn Sie wissen möchten, wie Sie Ihre Seiten gestalten, lernen Sie das Lab zu CSS!
We use cookies for a number of reasons, such as keeping the website reliable and secure, to improve your experience on our website and to see how you interact with it. By accepting, you agree to our use of such cookies. Privacy Policy
