Kursinhalt

Ultimatives HTML

1. Verständnis der Webentwicklung

Willkommen bei HTML und Webentwicklung Was ist das Internet?Wie funktioniert das Internet?Verstehen, Wie Websites Funktionieren Frontend- und Backend-Entwicklung Erklärt

2. HTML-Tags und Attribute

Verständnis von HTML-Tags Arbeiten mit HTML-Attributen Verständnis von Gepaarten und Einzelnen Tags in HTML Textauszeichnung und -Formatierung in HTML Herausforderung: Erstellen Sie Ihren Ersten Webseiten-Absatz Herausforderung: Erstellen Sie Eine Persönliche Vorstellungs-Webseite Herausforderung: Gestaltung Einer Filmpräsentations-Webseite Verwendung von Links und Schaltflächen in HTML Herausforderung: Links zu Beliebten Websites Erstellen Überprüfung Ihres HTML-Codes auf Best Practices

3. HTML-Dokumentstruktur

Die Geheimnisse Hinter Gut Strukturierten Webseiten Verständnis der HTML-Dokumentstruktur Die Rolle des Dokumentkopfs Verwaltung von Dokumentenfluss und Layout Herausforderung: Eine HTML-Datei Korrekt Strukturieren Verwendung von Entwickler-Tools zur HTML-Inspektion und Fehlerbehebung

4. Arbeiten mit Medien und Tabellen

Bilder in HTML Einfügen Herausforderung: Arbeiten Mit Bildern Arbeiten mit Klickbaren Bildern, Bildunterschriften und Optimierung Verständnis von Vektor- und Rastergrafiken Einbetten von Audio und Video für Multimediale Inhalte Herausforderung: Einbetten von Audio und Video in HTML Erstellen und Strukturieren von Tabellen in HTML Herausforderung: Entwurf Einer Funktionalen HTML-Tabelle

5. HTML-Formulare und Benutzereingaben

Einführung in HTML-Formulare Grundlagen der Formularerstellung in HTML Verwendung von Labels für bessere Formularzugänglichkeit Formulare mit Eingabeattributen Erweitern Untersuchung Verschiedener Eingabetypen in HTML Herausforderung: Formular mit Eingabefeldern und Beschriftungen Erstellen Arbeiten mit dem Textarea-Element für Mehrzeilige Eingaben Verwendung des Select-Elements für Dropdown-Menüs Verwendung des Datalist-Elements für vordefinierte Eingabevorschläge Gruppierung von Formularelementen für eine bessere Struktur

Herausforderung: Eine HTML-Datei Korrekt Strukturieren

Ziel

Erstellen Sie die korrekte Webseite, indem Sie eine grundlegende HTML-Dokumentstruktur anlegen. Diese Struktur bildet das Rückgrat jeder HTML-Seite und besteht aus den wesentlichen Elementen, die Browser benötigen, um Ihre Inhalte korrekt darzustellen.

Hinweis

Lassen Sie sich nicht von der scheinbaren Einfachheit des Webseitendesigns täuschen. Auch wenn es unkompliziert wirkt, ist es dennoch von größter Bedeutung, die korrekte Dokumentstruktur beizubehalten. Dies stellt sicher, dass die Website in allen Browsern lesbar und funktionsfähig bleibt.

Aufgabe

Erstellen Sie eine grundlegende HTML-Dokumentstruktur. Wenn Sie sich bereits sicher fühlen, können Sie gerne ohne Schritt-für-Schritt-Anleitung fortfahren. Falls Sie jedoch zusätzliche Unterstützung wünschen, steht Ihnen eine schrittweise Anleitung zur Verfügung.

Schritt-für-Schritt-Anleitung

Schritt 1: HTML-Dokument beginnen

Beginne mit der Eingabe der HTML-Doctype-Deklaration, die dem Browser mitteilt, dass das Dokument in HTML geschrieben ist. Die Deklaration sollte die erste Zeile deines HTML-Dokuments sein:

index.html

Schritt 2: Hinzufügen der öffnenden und schließenden HTML-Tags

Nach der Doctype-Deklaration die öffnenden und schließenden HTML-Tags einfügen. Die gesamte Struktur des HTML-Dokuments befindet sich innerhalb dieser Tags. Zusätzlich das Attribut lang einfügen, um die Sprache des Dokuments anzugeben:

index.html

Schritt 3: Erstellen des head-Bereichs

Die öffnenden und schließenden <head>-Tags innerhalb der HTML-Tags einfügen. Der head-Bereich enthält Metainformationen über das HTML-Dokument, wie den Titel und Verweise auf externe Stylesheets:

index.html

Schritt 4: Titel hinzufügen

Fügen Sie innerhalb der <head>-Tags die öffnenden und schließenden <title>-Tags hinzu. Der Text, den Sie zwischen diese Tags einfügen, wird als Titel der Webseite in der Titelleiste oder dem Tab des Browsers angezeigt:

index.html

Schritt 5: Erstellen des body-Bereichs

Nach dem <head>-Abschnitt die öffnenden und schließenden <body>-Tags hinzufügen. Der body-Bereich enthält den sichtbaren Inhalt der Webseite:

index.html

Schritt 6: Inhalt zum body hinzufügen

Innerhalb der <body>-Tags können Elemente wie Überschriften, Absätze, Bilder, Links usw. eingefügt werden. Nachfolgend ein Beispiel für das Hinzufügen einer Überschrift und eines Absatzes:

index.html

Probiere es selbst aus

index.html

War alles klar?

Danke für Ihr Feedback!

Abschnitt 3. Kapitel 5

Fragen Sie AI

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

Kursinhalt

Ultimatives HTML

1. Verständnis der Webentwicklung

Willkommen bei HTML und Webentwicklung Was ist das Internet?Wie funktioniert das Internet?Verstehen, Wie Websites Funktionieren Frontend- und Backend-Entwicklung Erklärt

2. HTML-Tags und Attribute

3. HTML-Dokumentstruktur

4. Arbeiten mit Medien und Tabellen

5. HTML-Formulare und Benutzereingaben

Herausforderung: Eine HTML-Datei Korrekt Strukturieren

Ziel

Hinweis

Lassen Sie sich nicht von der scheinbaren Einfachheit des Webseitendesigns täuschen. Auch wenn es unkompliziert wirkt, ist es dennoch von größter Bedeutung, die korrekte Dokumentstruktur beizubehalten. Dies stellt sicher, dass die Website in allen Browsern lesbar und funktionsfähig bleibt.

Aufgabe

Schritt-für-Schritt-Anleitung

Schritt 1: HTML-Dokument beginnen

Beginne mit der Eingabe der HTML-Doctype-Deklaration, die dem Browser mitteilt, dass das Dokument in HTML geschrieben ist. Die Deklaration sollte die erste Zeile deines HTML-Dokuments sein:

index.html

Schritt 2: Hinzufügen der öffnenden und schließenden HTML-Tags

index.html

Schritt 3: Erstellen des head-Bereichs

index.html

Schritt 4: Titel hinzufügen

index.html

Schritt 5: Erstellen des body-Bereichs

Nach dem <head>-Abschnitt die öffnenden und schließenden <body>-Tags hinzufügen. Der body-Bereich enthält den sichtbaren Inhalt der Webseite:

index.html

Schritt 6: Inhalt zum body hinzufügen

Innerhalb der <body>-Tags können Elemente wie Überschriften, Absätze, Bilder, Links usw. eingefügt werden. Nachfolgend ein Beispiel für das Hinzufügen einer Überschrift und eines Absatzes:

index.html

Probiere es selbst aus

index.html

War alles klar?

Danke für Ihr Feedback!

Abschnitt 3. Kapitel 5