Kursinhalt
Ultimatives HTML
Ultimatives HTML
2. HTML-Tags und Attribute
Verständnis von HTML-TagsArbeiten mit HTML-AttributenVerständnis von Gepaarten und Einzelnen Tags in HTMLTextauszeichnung und -Formatierung in HTMLHerausforderung: Erstellen Sie Ihren Ersten Webseiten-AbsatzHerausforderung: Erstellen Sie Eine Persönliche Vorstellungs-WebseiteHerausforderung: Gestaltung Einer Filmpräsentations-WebseiteVerwendung von Links und Schaltflächen in HTMLHerausforderung: Links zu Beliebten Websites ErstellenÜberprüfung Ihres HTML-Codes auf Best Practices
3. HTML-Dokumentstruktur
4. Arbeiten mit Medien und Tabellen
Bilder in HTML EinfügenHerausforderung: Arbeiten Mit BildernArbeiten mit Klickbaren Bildern, Bildunterschriften und OptimierungVerständnis von Vektor- und RastergrafikenEinbetten von Audio und Video für Multimediale InhalteHerausforderung: Einbetten von Audio und Video in HTMLErstellen und Strukturieren von Tabellen in HTMLHerausforderung: Entwurf Einer Funktionalen HTML-Tabelle
5. HTML-Formulare und Benutzereingaben
Einführung in HTML-FormulareGrundlagen der Formularerstellung in HTMLVerwendung von Labels für bessere FormularzugänglichkeitFormulare mit Eingabeattributen ErweiternUntersuchung Verschiedener Eingabetypen in HTMLHerausforderung: Formular mit Eingabefeldern und Beschriftungen ErstellenArbeiten mit dem Textarea-Element für Mehrzeilige EingabenVerwendung des Select-Elements für Dropdown-MenüsVerwendung des Datalist-Elements für vordefinierte EingabevorschlägeGruppierung von Formularelementen für eine bessere Struktur
Herausforderung: Formular mit Eingabefeldern und Beschriftungen Erstellen
Ziel
Verbesserung der Benutzererfahrung der Website durch die Erstellung eines interaktiven Formulars, das Eingabefelder für Name, E-Mail und Passwort mit zugehörigen Beschriftungen erfordert.
Aufgabe
Ein benutzerfreundliches Formular in die Website integrieren, um die Nutzerbindung und Interaktion zu erhöhen. Die Aufgabe umfasst:
- Für das Namensfeld: Ein Texteingabefeld erstellen, das die Namen der Nutzer erfasst. Die passenden Attribute für eine reibungslose Nutzung verwenden.
- Den passenden
type
für das Texteingabefeld festlegen; - Das
placeholder
aufJohn
setzen; - Das Eingabefeld standardmäßig fokussieren.
- Den passenden
- Für das E-Mail-Feld: Ein E-Mail-Eingabefeld erstellen, das die E-Mail-Adressen der Nutzer erfasst. Die passenden Attribute zur Sicherstellung der Datenkorrektheit verwenden.
- Den korrekten
type
für das E-Mail-Eingabefeld festlegen; - Das
placeholder
aufexample@gmail.com
setzen; - Das Feld als erforderlich markieren.
- Den korrekten
- Für das Passwortfeld: Ein sicheres Passwort-Eingabefeld erstellen, das die Nutzerdaten schützt. Die passenden Attribute zur Verbesserung des Datenschutzes verwenden.
- Den korrekten
type
für das Passwortfeld festlegen; - Das Feld als erforderlich markieren.
- Den korrekten
index.html
index.css
autofocus
: fokussiert das Eingabefeld automatisch, wenn die Seite geladen wird.required
: kennzeichnet das Eingabefeld als Pflichtfeld und verhindert das Absenden des Formulars, wenn es leer bleibt.placeholder
: zeigt einen Hinweis oder Beispieltext im Eingabefeld an.for
undid
: verknüpft ein Label mit einem Eingabefeld zur Verbesserung der Barrierefreiheit.type
: gibt den erwarteten Datentyp im Eingabefeld an (z. B. Text, E-Mail, Passwort).
index.html
index.css
War alles klar?
Danke für Ihr Feedback!
Abschnitt 5. Kapitel 6