HTML und CSS sind die Grundbausteine jeder Website, die du...
Informatik2.309 aufrufe·Aktualisiert 19. Juni 2026·2 SeitenHTML und CSS Grundlagen
S
Selin Ben@selinbenh_fde6c
1
of 2
HTML Grundlagen und Dokumentaufbau
Stell dir vor, du baust ein Haus - HTML ist wie das Gerüst, das alles zusammenhält. Mit der Hypertext Markup Language erstellst du die komplette Struktur deiner Website, während CSS (Cascade Style Sheet) später für das coole Design sorgt.
Jedes HTML-Dokument startet mit <!DOCTYPE html> - das sagt dem Browser "Hey, hier kommt eine HTML-Seite!". Das Wurzelelement <html> umschließt dann alles andere. Die Sprache gibst du mit lang="de" an.
Der Head-Bereich ist unsichtbar für Besucher, aber wichtig für Browser und Suchmaschinen. Hier steht der <title>, den du oben in der Browser-Registerkarte siehst. Im Body kommt dann der sichtbare Inhalt: Überschriften (<h1> bis <h6>), Textabschnitte (<p>) und Zeilenumbrüche (<br>).
Tipp: Denk an HTML wie an ein Buch - Head ist das Inhaltsverzeichnis, Body sind die Kapitel!
2
of 2
HTML-Elemente und Tabellen
Mit HTML-Elementen machst du deine Website lebendig! Bilder fügst du mit <img src=""> ein - das Bild muss im gleichen Ordner wie dein HTML-Dokument liegen. Der alt-Text ist super wichtig, falls das Bild mal nicht lädt.
Links erstellst du mit <a href=""> - damit verbindest du verschiedene Seiten miteinander. Für Listen hast du zwei Optionen: <ol> für nummerierte Listen (1, 2, 3...) und <ul> für einfache Aufzählungen mit Punkten.
Tabellen sind perfekt für strukturierte Daten. Das <table>-Element umschließt alles, <tr> erstellt Zeilen und <td> die einzelnen Zellen. Mit CSS kannst du dann Rahmen hinzufügen (border-style: solid) und Farben ändern (background-color, color).
Merke: Tabellen sind nicht für Layouts gedacht - nur für echte Daten wie Stundenplan oder Noten!
Wir dachten schon, du fragst nie...
Was ist der Knowunity KI-Begleiter?
Unser KI-Begleiter ist ein speziell für Schüler entwickeltes KI-Tool, das mehr als nur Antworten bietet. Basierend auf Millionen von Knowunity-Inhalten liefert er relevante Informationen, personalisierte Lernpläne, Quizze und Inhalte direkt im Chat und passt sich deinem individuellen Lernweg an.
Wo kann ich die Knowunity-App herunterladen?
Du kannst die App im Google Play Store und im Apple App Store herunterladen.
Ist Knowunity wirklich kostenlos?
Genau! Genieße kostenlosen Zugang zu Lerninhalten, vernetze dich mit anderen Schülern und hol dir sofortige Hilfe – alles direkt auf deinem Handy.
Ähnlicher Inhalt
HistoriaBeliebtester Inhalt: HTML-Element
2
NwTHolzarten und Funiere
Entdecken Sie die verschiedenen Holzarten und die Herstellung von Furnieren. Dieser Lernzettel behandelt die Eigenschaften von Massivholz, Sperrholz, MDF und OSB sowie die Techniken zur Furnierherstellung. Ideal für Studierende der Holzverarbeitung und verwandter Fachrichtungen.
111,16733
InformatikHTML Grundlagen und Stile
Entdecken Sie die wesentlichen HTML-Grundlagen, einschließlich wichtiger Tags, Stile und Struktur. Dieser Lernzettel bietet eine umfassende Übersicht über HTML-Elemente, CSS-Stile und grundlegende Programmierkonzepte. Ideal für die Vorbereitung auf Klausuren und das Verständnis von Webentwicklung.
111,43743
Beliebtester Inhalt in Informatik
9InformatikInformatik GK Lernzettel Abitur 2025
- selbstständig erstellter Lernzettel
1278418
Q
InformatikQuiz für die Komponenten des Pc's💻
💻Hier lernst ind testest du dein wissen über die Pc Komponenten⌨️
65924
InformatikInformatik Abitur 2024: Themenübersicht
Umfassende Themenübersicht für das Abitur 2024 im Fach Informatik. Dieser Lernzettel deckt wichtige Konzepte wie Programmierung in Java, Algorithmen, Datenstrukturen, Datenbanken, Cybersecurity und Verschlüsselungsmethoden ab. Ideal für Schüler, die sich auf das erhöhte Anforderungsniveau vorbereiten. Enthält auch Informationen zu relationalen Datenbanken, SQL-Abfragen und kryptologischen Verfahren.
132,85158
C
InformatikComputer
Lerne alles über Computer und ihre Funktionsweise mit diesen fesselnden Flashcards. Perfekt für Schüler der 5. Klasse, die Computer Science entdecken möchten.
55390
InformatikInformatik Abitur 2024: Datenstrukturen & Datenbanken
Umfassender Lernzettel für das Informatik-Abitur 2024, der sich auf lineare Datenstrukturen, relationale Datenbanken, SQL-Abfragen und Automaten konzentriert. Ideal zur Vorbereitung auf Prüfungen mit Schwerpunkten auf Sortieralgorithmen, Datenbankmodellierung und Java-Programmierung.
112,52447
InformatikInformatik Abitur 2025 NRW
Informatik Übersicht zu den Themen die im mündlichen Abitur drankommen. Ist also vielleicht nicht zu 100% vollständig.
124599
InformatikWENN und SVERWEIS
Erklärung sverweis und wenn Funktion bei exel
116233
InformatikPython Lernzettel Informatik
Python Lernzettel (mathematische Operatoren, Variablen, Datentypen, Skripte, Boolesche Operatoren)
118758
InformatikInformatik Grundlagen: Datenstrukturen & Algorithmen
Dieser Lernzettel bietet eine umfassende Übersicht über grundlegende Konzepte der Informatik, einschließlich Objekte und Klassen, lineare und nicht-lineare Datenstrukturen, Sortier- und Suchalgorithmen, Bäume, Struktogramme, relationale Datenbanken, SQL-Abfragen, formale Sprachen und Automaten sowie Netzwerktopologien. Ideal für die Vorbereitung auf das Abitur in NRW.
131,40031
Beliebtester Inhalt
9
DeutschDer zerbrochene Krug
Szenenzusammenfassunfen, Figurenkonstellationen, Aufbau des Stücks, Sprache und Stilbesonderheiten, Aussageabsicht, Thematik, Interpretation
1148,044728
DeutschDer zerbrochene Krug von Heinrich von Kleist
Hier steht so ziemlich alles drinnen von Zusammenfassungen der einzelnen Auftritte bis hin zu den einzelnen Perosn und noch einiges mehr
1254,773921
DeutschDer zerbrochne Krug
Ausführliche Lernzettel zu: Basisdaten, Handlung, ausführliche Zusammenfassungen der Auftritte, zentrale Themen, Symbolische Bedeutung, Merkmale der Komödie
1214,336253
DeutschHeimsuchung_JennyErpenbeck_Abitur
Zusammenfassungen für jedes Kapitel, Analysen und Zitate
1314,091277
MatheZP10 Mathe Zusammenfassung NRW
Lernzettel für die ZP10 Mathe in NRW mit allen Themen außer Sinusfunktionen.
1061,9154,842
DeutschDer zerbrochene Krug: Analyse
Diese umfassende Analyse von 'Der zerbrochene Krug' von Heinrich von Kleist bietet eine detaillierte Kapitelzusammenfassung, Charakterisierungen, historische Kontexte, sowie den Aufbau und die sprachlichen Merkmale des Dramas. Ideal für Studierende, die sich auf Prüfungen vorbereiten oder tiefere Einblicke in Kleists Werk gewinnen möchten.
1199,8421,255
EnglischEnglisch LK Abitur 2025
Komplette Englisch LK Abi Zusammenfassung 2025
1315,043394
DeutschSchreibkompetenzen Deutsch LK
Diese umfassende Zusammenstellung bereitet auf das Abitur 2024 vor und deckt alle relevanten Schreibkompetenzen ab: von der Analyse pragmatischer Texte über die Erörterung literarischer Werke bis hin zur Interpretation von Epik, Lyrik und Dramatik. Zudem werden Techniken des materialgestützten Schreibens, der Redeanalyse sowie journalistische Textsorten und rhetorische Mittel behandelt. Ideal für eine gezielte und effektive Prüfungsvorbereitung.
138,208165
DeutschJenny Erpenbeck "Heimsuchung"
Übersicht und Struktur des Romans
118,006169
Findest du nicht, was du suchst? Entdecke andere Fächer.
Schüler lieben uns — und du auch.
4.6/5App Store
4.7/5Google Play
Die App ist sehr einfach zu bedienen und gut gestaltet. Ich habe bisher alles gefunden, wonach ich gesucht habe, und konnte viel aus den Präsentationen lernen! Ich werde die App definitiv für ein Schulprojekt nutzen! Und natürlich hilft sie auch sehr als Inspiration.
Stefan SiOS-Nutzer
Diese App ist wirklich super. Es gibt so viele Lernzettel und Hilfen [...]. Mein Problemfach ist zum Beispiel Französisch und die App hat so viele Möglichkeiten zur Hilfe. Dank dieser App habe ich mich in Französisch verbessert. Ich würde sie jedem empfehlen.
Samantha KlichAndroid-Nutzerin
Wow, ich bin wirklich begeistert. Ich habe die App einfach mal ausprobiert, weil ich sie schon oft beworben gesehen habe und war absolut beeindruckt. Diese App ist DIE HILFE, die man für die Schule braucht und vor allem bietet sie so viele Dinge wie Übungen und Lernzettel, die mir persönlich SEHR geholfen haben.
AnnaiOS-Nutzerin
Informatik2.309 aufrufe·Aktualisiert 19. Juni 2026·2 SeitenHTML und CSS Grundlagen
S
Selin Ben@selinbenh_fde6c
HTML und CSS sind die Grundbausteine jeder Website, die du täglich nutzt! HTML erstellt die Struktur und den Inhalt, während CSS für das schöne Aussehen sorgt.
1
of 2
Melde dich an, um den Inhalt zu sehen. Kostenlos!
- Zugriff auf alle Dokumente
- Verbessere deine Noten
- Schließ dich Millionen Schülern an
Mit der Anmeldung akzeptierst du die Nutzungsbedingungen und Datenschutzerklärung
HTML Grundlagen und Dokumentaufbau
Stell dir vor, du baust ein Haus - HTML ist wie das Gerüst, das alles zusammenhält. Mit der Hypertext Markup Language erstellst du die komplette Struktur deiner Website, während CSS (Cascade Style Sheet) später für das coole Design sorgt.
Jedes HTML-Dokument startet mit <!DOCTYPE html> - das sagt dem Browser "Hey, hier kommt eine HTML-Seite!". Das Wurzelelement <html> umschließt dann alles andere. Die Sprache gibst du mit lang="de" an.
Der Head-Bereich ist unsichtbar für Besucher, aber wichtig für Browser und Suchmaschinen. Hier steht der <title>, den du oben in der Browser-Registerkarte siehst. Im Body kommt dann der sichtbare Inhalt: Überschriften (<h1> bis <h6>), Textabschnitte (<p>) und Zeilenumbrüche (<br>).
Tipp: Denk an HTML wie an ein Buch - Head ist das Inhaltsverzeichnis, Body sind die Kapitel!
2
of 2Melde dich an, um den Inhalt zu sehen. Kostenlos!
- Zugriff auf alle Dokumente
- Verbessere deine Noten
- Schließ dich Millionen Schülern an
Mit der Anmeldung akzeptierst du die Nutzungsbedingungen und Datenschutzerklärung
HTML-Elemente und Tabellen
Mit HTML-Elementen machst du deine Website lebendig! Bilder fügst du mit <img src=""> ein - das Bild muss im gleichen Ordner wie dein HTML-Dokument liegen. Der alt-Text ist super wichtig, falls das Bild mal nicht lädt.
Links erstellst du mit <a href=""> - damit verbindest du verschiedene Seiten miteinander. Für Listen hast du zwei Optionen: <ol> für nummerierte Listen (1, 2, 3...) und <ul> für einfache Aufzählungen mit Punkten.
Tabellen sind perfekt für strukturierte Daten. Das <table>-Element umschließt alles, <tr> erstellt Zeilen und <td> die einzelnen Zellen. Mit CSS kannst du dann Rahmen hinzufügen (border-style: solid) und Farben ändern (background-color, color).
Merke: Tabellen sind nicht für Layouts gedacht - nur für echte Daten wie Stundenplan oder Noten!
Wir dachten schon, du fragst nie...
Was ist der Knowunity KI-Begleiter?
Unser KI-Begleiter ist ein speziell für Schüler entwickeltes KI-Tool, das mehr als nur Antworten bietet. Basierend auf Millionen von Knowunity-Inhalten liefert er relevante Informationen, personalisierte Lernpläne, Quizze und Inhalte direkt im Chat und passt sich deinem individuellen Lernweg an.
Wo kann ich die Knowunity-App herunterladen?
Du kannst die App im Google Play Store und im Apple App Store herunterladen.
Ist Knowunity wirklich kostenlos?
Genau! Genieße kostenlosen Zugang zu Lerninhalten, vernetze dich mit anderen Schülern und hol dir sofortige Hilfe – alles direkt auf deinem Handy.
Ähnlicher Inhalt
Beliebtester Inhalt: HTML-Element
2NwTHolzarten und Funiere
Entdecken Sie die verschiedenen Holzarten und die Herstellung von Furnieren. Dieser Lernzettel behandelt die Eigenschaften von Massivholz, Sperrholz, MDF und OSB sowie die Techniken zur Furnierherstellung. Ideal für Studierende der Holzverarbeitung und verwandter Fachrichtungen.
111,16733
InformatikHTML Grundlagen und Stile
Entdecken Sie die wesentlichen HTML-Grundlagen, einschließlich wichtiger Tags, Stile und Struktur. Dieser Lernzettel bietet eine umfassende Übersicht über HTML-Elemente, CSS-Stile und grundlegende Programmierkonzepte. Ideal für die Vorbereitung auf Klausuren und das Verständnis von Webentwicklung.
111,43743
Beliebtester Inhalt in Informatik
9InformatikInformatik GK Lernzettel Abitur 2025
- selbstständig erstellter Lernzettel
1278418
Q
InformatikQuiz für die Komponenten des Pc's💻
💻Hier lernst ind testest du dein wissen über die Pc Komponenten⌨️
65924
InformatikInformatik Abitur 2024: Themenübersicht
Umfassende Themenübersicht für das Abitur 2024 im Fach Informatik. Dieser Lernzettel deckt wichtige Konzepte wie Programmierung in Java, Algorithmen, Datenstrukturen, Datenbanken, Cybersecurity und Verschlüsselungsmethoden ab. Ideal für Schüler, die sich auf das erhöhte Anforderungsniveau vorbereiten. Enthält auch Informationen zu relationalen Datenbanken, SQL-Abfragen und kryptologischen Verfahren.
132,85158
C
InformatikComputer
Lerne alles über Computer und ihre Funktionsweise mit diesen fesselnden Flashcards. Perfekt für Schüler der 5. Klasse, die Computer Science entdecken möchten.
55390
InformatikInformatik Abitur 2024: Datenstrukturen & Datenbanken
Umfassender Lernzettel für das Informatik-Abitur 2024, der sich auf lineare Datenstrukturen, relationale Datenbanken, SQL-Abfragen und Automaten konzentriert. Ideal zur Vorbereitung auf Prüfungen mit Schwerpunkten auf Sortieralgorithmen, Datenbankmodellierung und Java-Programmierung.
112,52447
InformatikInformatik Abitur 2025 NRW
Informatik Übersicht zu den Themen die im mündlichen Abitur drankommen. Ist also vielleicht nicht zu 100% vollständig.
124599
InformatikWENN und SVERWEIS
Erklärung sverweis und wenn Funktion bei exel
116233
InformatikPython Lernzettel Informatik
Python Lernzettel (mathematische Operatoren, Variablen, Datentypen, Skripte, Boolesche Operatoren)
118758
InformatikInformatik Grundlagen: Datenstrukturen & Algorithmen
Dieser Lernzettel bietet eine umfassende Übersicht über grundlegende Konzepte der Informatik, einschließlich Objekte und Klassen, lineare und nicht-lineare Datenstrukturen, Sortier- und Suchalgorithmen, Bäume, Struktogramme, relationale Datenbanken, SQL-Abfragen, formale Sprachen und Automaten sowie Netzwerktopologien. Ideal für die Vorbereitung auf das Abitur in NRW.
131,40031
Beliebtester Inhalt
9DeutschDer zerbrochene Krug
Szenenzusammenfassunfen, Figurenkonstellationen, Aufbau des Stücks, Sprache und Stilbesonderheiten, Aussageabsicht, Thematik, Interpretation
1148,044728
DeutschDer zerbrochene Krug von Heinrich von Kleist
Hier steht so ziemlich alles drinnen von Zusammenfassungen der einzelnen Auftritte bis hin zu den einzelnen Perosn und noch einiges mehr
1254,773921
DeutschDer zerbrochne Krug
Ausführliche Lernzettel zu: Basisdaten, Handlung, ausführliche Zusammenfassungen der Auftritte, zentrale Themen, Symbolische Bedeutung, Merkmale der Komödie
1214,336253
DeutschHeimsuchung_JennyErpenbeck_Abitur
Zusammenfassungen für jedes Kapitel, Analysen und Zitate
1314,091277
MatheZP10 Mathe Zusammenfassung NRW
Lernzettel für die ZP10 Mathe in NRW mit allen Themen außer Sinusfunktionen.
1061,9154,842
DeutschDer zerbrochene Krug: Analyse
Diese umfassende Analyse von 'Der zerbrochene Krug' von Heinrich von Kleist bietet eine detaillierte Kapitelzusammenfassung, Charakterisierungen, historische Kontexte, sowie den Aufbau und die sprachlichen Merkmale des Dramas. Ideal für Studierende, die sich auf Prüfungen vorbereiten oder tiefere Einblicke in Kleists Werk gewinnen möchten.
1199,8421,255
EnglischEnglisch LK Abitur 2025
Komplette Englisch LK Abi Zusammenfassung 2025
1315,043394
DeutschSchreibkompetenzen Deutsch LK
Diese umfassende Zusammenstellung bereitet auf das Abitur 2024 vor und deckt alle relevanten Schreibkompetenzen ab: von der Analyse pragmatischer Texte über die Erörterung literarischer Werke bis hin zur Interpretation von Epik, Lyrik und Dramatik. Zudem werden Techniken des materialgestützten Schreibens, der Redeanalyse sowie journalistische Textsorten und rhetorische Mittel behandelt. Ideal für eine gezielte und effektive Prüfungsvorbereitung.
138,208165
DeutschJenny Erpenbeck "Heimsuchung"
Übersicht und Struktur des Romans
118,006169
Findest du nicht, was du suchst? Entdecke andere Fächer.
Schüler lieben uns — und du auch.
4.6/5App Store
4.7/5Google Play
Die App ist sehr einfach zu bedienen und gut gestaltet. Ich habe bisher alles gefunden, wonach ich gesucht habe, und konnte viel aus den Präsentationen lernen! Ich werde die App definitiv für ein Schulprojekt nutzen! Und natürlich hilft sie auch sehr als Inspiration.
Stefan SiOS-Nutzer
Diese App ist wirklich super. Es gibt so viele Lernzettel und Hilfen [...]. Mein Problemfach ist zum Beispiel Französisch und die App hat so viele Möglichkeiten zur Hilfe. Dank dieser App habe ich mich in Französisch verbessert. Ich würde sie jedem empfehlen.
Samantha KlichAndroid-Nutzerin
Wow, ich bin wirklich begeistert. Ich habe die App einfach mal ausprobiert, weil ich sie schon oft beworben gesehen habe und war absolut beeindruckt. Diese App ist DIE HILFE, die man für die Schule braucht und vor allem bietet sie so viele Dinge wie Übungen und Lernzettel, die mir persönlich SEHR geholfen haben.
AnnaiOS-Nutzerin