TUEats HTML CSS Tutorial: Anmeldeformular für Cosc484 Assignment

TUEats Anmeldeformular: HTML & CSS Tutorial für Cosc484

Die Food-Delivery-Branche boomt, und mit TUEats bringt Towson eine eigene Ghost Kitchen auf den Markt. In diesem Tutorial lernst du, wie du den ersten Schritt der Benutzerregistrierung gestaltest – mit sauberem HTML und CSS. Wir bauen ein voll funktionsfähiges Anmeldeformular, eine übersichtliche Menütabelle und fügen das typische Towson-Design hinzu. Perfekt für dein Cosc484 Assignment und ideal, um Grundlagen der Webentwicklung zu festigen.

1. HTML-Grundgerüst für tueats.html

Beginne mit einer standardkonformen HTML5-Struktur. Füge im <head> den Seitentitel und die Verlinkung zur externen CSS-Datei ein. Achte darauf, dass die <form> eine GET-Methode verwendet und als Aktion tueats completed.html erhält – relativer Pfad ist Pflicht.

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>TUEats – Anmelden</title>
  <link rel="stylesheet" href="tueats.css">
</head>
<body>
  <h1>Willkommen bei TUEats</h1>
  <form action="tueats completed.html" method="GET">
    <!-- Felder hier -->
  </form>
</body>
</html>

2. Das Anmelde-Fieldset

Erstelle ein <fieldset> mit der Überschrift „Anmelden“. Enthalten sind: Benutzername (required), E-Mail (required), Empfehlungscode (optional), Passwort (required), Passwort bestätigen (required) und eine Checkbox für den Newsletter. Verwende <label> für Barrierefreiheit und ordne die Checkbox rechts neben dem Label an.

<fieldset>
  <legend>Anmelden</legend>
  <p>
    <label for="username">Benutzername:</label>
    <input type="text" id="username" name="username" required>
  </p>
  <p>
    <label for="email">E-Mail-Adresse:</label>
    <input type="email" id="email" name="email" required>
  </p>
  <p>
    <label for="referral">Empfehlungscode:</label>
    <input type="text" id="referral" name="referral">
  </p>
  <p>
    <label for="password">Passwort:</label>
    <input type="password" id="password" name="password" required>
  </p>
  <p>
    <label for="password2">Passwort bestätigen:</label>
    <input type="password" id="password2" name="password2" required>
  </p>
  <p>
    <input type="checkbox" id="newsletter" name="newsletter">
    <label for="newsletter">Für unseren Newsletter anmelden?</label>
  </p>
</fieldset>

3. Menü-Tabelle mit rowspan und colspan

Die Menütabelle zeigt vier Spalten: (leer), Name, Preis, Kalorien. Nutze rowspan, um die Kalorienangabe für Mozzarella Sticks und Fries zusammenzufassen. Ergänze eine <caption> mit einem Link zur Towson-Website.

<fieldset>
  <legend>Menü</legend>
  <table>
    <caption>Menü kann sich ändern. Besuche unsere <a href="https://www.towson.edu" target="_blank">Towson Website</a> für mehr Infos.</caption>
    <thead>
      <tr>
        <th></th>
        <th>Name</th>
        <th>Preis</th>
        <th>Kalorien</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>item 1</td>
        <td>Burger</td>
        <td>$8</td>
        <td>550</td>
      </tr>
      <tr>
        <td>item 2</td>
        <td>Mozzarella Sticks</td>
        <td>$7</td>
        <td rowspan="2">400</td>
      </tr>
      <tr>
        <td>item 3</td>
        <td>Fries</td>
        <td>$4</td>
      </tr>
    </tbody>
  </table>
</fieldset>

4. Submit-Button und Abschluss

Füge einen einzelnen Submit-Button hinzu. Der gesamte HTML-Code sollte valide sein und die Formulardaten an tueats completed.html senden.

<p>
  <input type="submit" value="Anmelden">
</p>
</form>

5. CSS-Styling für tueats.css

Verknüpfe die CSS-Datei extern. Gestalte die Tabelle nach Vorgaben: 75% Breite, zentrierter Text, grauer Hintergrund (#808080), 1px schwarzer Rand. Fette die <th>-Elemente. Füge ein Hintergrundbild für TUEats ein (z.B. Towson-Logo) und kommentiere die Quelle. Der <h1> soll Towson Gold (#FFBB00) erhalten. Der Link in der Tabellenüberschrift soll bei Hover ebenfalls Gold werden.

/* Hintergrundbild: Towson University Logo, Quelle: https://www.towson.edu/ */
body {
  background-image: url('towson-logo.png');
  background-repeat: no-repeat;
  background-position: top right;
}

h1 {
  color: #FFBB00; /* Towson Gold */
}

table {
  width: 75%;
  border: 1px solid black;
  background-color: #808080;
  text-align: center;
  border-collapse: collapse;
}

th, td {
  border: 1px solid black;
  padding: 5px;
}

th {
  font-weight: bold;
}

a:hover {
  color: #FFBB00;
}

6. tueats completed.html – Erfolgsseite

Erstelle eine einfache Bestätigungsseite mit einer Überschrift.

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>TUEats – Anmeldung erfolgreich</title>
</head>
<body>
  <h1>Willkommen bei TUEats</h1>
</body>
</html>

7. Tipps zur Fehlervermeidung

Relative Pfade: Verwende action="tueats completed.html" ohne führenden Schrägstrich oder absoluten Pfad.
Externe CSS: Die Verlinkung muss href="tueats.css" sein – kein Inline-Style.
Semantische Tags: Nutze <fieldset>, <legend>, <label> für bessere Struktur und Barrierefreiheit.
Hover-Effekt: Stelle sicher, dass nur der Link in der Tabellenüberschrift die Gold-Farbe bekommt – nicht etwa andere Links auf der Seite.

8. Fazit

Mit diesem Tutorial hast du eine solide Grundlage für dein Cosc484 Assignment. Du hast gelernt, wie man ein Anmeldeformular mit Pflichtfeldern, eine Menütabelle mit rowspan und ansprechendem CSS-Styling erstellt. Die Kombination aus HTML und CSS ist essenziell für moderne Webentwicklung – ob für eine Ghost Kitchen wie TUEats oder eine andere App. Viel Erfolg bei deiner Abgabe!