HTML und CSS sind die Grundbausteine des Internets - mit...
Informatik2.779 aufrufe·Aktualisiert 11. Aug. 2026·6 SeitenHTML CSS Grundlagen
J
Janine@selrax_a56f74
1 / 6
1
of 6
HTML und CSS Grundlagen
HTML steht für Hypertext Markup Language und ist wie das Skelett einer Webseite. Es strukturiert den Inhalt mit Tags - das sind Befehle in spitzen Klammern wie <h1>Überschrift</h1>. Das Coole daran: Du sagst dem Browser nur, WAS etwas ist, nicht wie es aussehen soll.
CSS (Cascading Style Sheets) ist dagegen der Stylist deiner Webseite. Hier bestimmst du Farben, Schriftarten und das Layout. HTML ohne CSS ist wie ein Auto ohne Lackierung - funktioniert, sieht aber langweilig aus!
Tags funktionieren immer paarweise: Ein Starttag <h1> öffnet, ein Endtag </h1> schließt. Manche Tags wie <br /> für Zeilenumbrüche stehen alleine da. Wichtig: Speichere deine Dateien immer mit der Endung .html!
Merktipp: Tags sind unsichtbar im Browser - sie sind nur Anweisungen für die Darstellung!
2
of 6
Textformatierung und Überschriften
Mit HTML kannst du Texte ganz einfach formatieren: <b>fett</b>, <i>kursiv</i> oder <u>unterstrichen</u>. Diese Befehle kennst du bestimmt schon aus Word - nur dass hier alles mit Code funktioniert!
Überschriften sind super wichtig für die Struktur deiner Webseite. Es gibt sechs verschiedene Größen: <h1> ist die größte (wie der Titel eines Buches), <h6> die kleinste (wie eine Fußnote). Die Zahlen zeigen die Hierarchie - genau wie bei Gliederungen in der Schule.
Du kannst die Überschriften verschachteln: Erst kommt <h1> für das Hauptthema, dann <h2> für Unterkapitel, <h3> für weitere Unterpunkte und so weiter. Das macht deine Seite übersichtlich und hilft auch Google beim Verstehen deiner Inhalte.
Praxistipp: Verwende immer nur eine
<h1>pro Seite - das ist wie ein Buchtitel und sollte einzigartig sein!
3
of 6
Links und Verweise
Verweise sind das Herzstück des Internets - ohne sie gäbe es kein "Surfen" von Seite zu Seite! Eine URL wie https://apps.informatik.cc/sql/sqlite.php besteht aus verschiedenen Teilen: dem Protokoll (https), der Domain (informatik.cc) und dem Pfad zur Datei.
Absolute Verweise enthalten die komplette Adresse - funktionieren überall, sind aber lang zum Tippen. Relative Verweise sind wie Wegbeschreibungen: "Gehe in den Ordner img und hole die Datei bird.jpg". Sie funktionieren nur, wenn du schon auf der richtigen Website bist.
Links erstellst du mit <a href="https://informatik.cc/">Informatik</a>. Das href-Attribut enthält die Zieladresse, zwischen den Tags steht der Text, den Besucher anklicken können. So einfach verbindest du deine Seite mit dem Rest des Internets!
Webdev-Hack: Relative Verweise sind praktischer für lokale Projekte - weniger Tipparbeit und funktionieren auch offline!
4
of 6
Bilder und div-Elemente
Bilder bringst du mit <img src="img/dog.jpg" alt="Dog" /> auf deine Webseite. Das src-Attribut zeigt dem Browser, wo das Bild liegt, alt beschreibt es für Menschen mit Sehbehinderung - das ist wichtig für Barrierefreiheit!
Beachte: Anders als bei Links wird das Bild direkt angezeigt, nicht nur verlinkt. Du kannst sowohl absolute Pfade (komplette URLs) als auch relative Pfade (lokale Dateien) verwenden.
Das div-Element <div></div> ist dein Alleskönner - ein neutraler Container ohne vordefinierte Eigenschaften. Erst mit CSS wird daraus ein farbiger Kasten, eine Navigation oder was auch immer du brauchst. Es ist wie ein leeres Zimmer, das du nach Belieben einrichten kannst.
Design-Tipp: div-Elemente sind perfekt zum Gruppieren von Inhalten - denke an sie wie an unsichtbare Boxen, die du später stylen kannst!
5
of 6
Listen und Tabellen
Listen strukturieren Inhalte übersichtlich: <ul> für ungeordnete Listen mit Punkten, <ol> für nummerierte Listen. Jeder Listenpunkt bekommt ein <li>-Tag. Das kennst du von PowerPoint-Präsentationen - nur eben in Code!
Listen sind super praktisch für Navigationselemente, Aufzählungen oder To-Do-Listen. Der Browser nummeriert automatisch oder setzt Bullet Points - du musst dich nur um den Inhalt kümmern.
Tabellen erstellst du mit <table>, <tr> (Zeilen) und <td> (Zellen). Denk an ein Excel-Raster: Erst das große Rechteck (<table>), dann die Zeilen (<tr>), und in jede Zeile kommen die einzelnen Zellen (<td>). So baust du Schritt für Schritt deine Tabelle auf.
Struktur-Tipp: Tabellen sind perfekt für echte Daten wie Preislisten oder Stundenpläne - nicht für das Layout der ganzen Seite!
6
of 6
Wir dachten schon, du fragst nie...
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.
Du kannst die App im Google Play Store und im Apple App Store herunterladen.
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
Physik
BiologieBeliebtester Inhalt: HTML
1Beliebtester Inhalt in Informatik
9Q
InformatikQuiz für die Komponenten des Pc's💻
💻Hier lernst ind testest du dein wissen über die Pc Komponenten⌨️
65984
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.
55460
InformatikInformatik Abitur 2025 NRW
Informatik Übersicht zu den Themen die im mündlichen Abitur drankommen. Ist also vielleicht nicht zu 100% vollständig.
124719
InformatikWENN und SVERWEIS
Erklärung sverweis und wenn Funktion bei exel
116314
InformatikPython Lernzettel Informatik
Python Lernzettel (mathematische Operatoren, Variablen, Datentypen, Skripte, Boolesche Operatoren)
109099
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.
122,87959
InformatikInformatik GK Lernzettel Abitur 2025
- selbstständig erstellter Lernzettel
1279618
InformatikKünstliche Intelligenz und Maschinelles Lernen
Entdecken Sie die Grundlagen der Künstlichen Intelligenz und des maschinellen Lernens, einschließlich künstlicher neuronaler Netze und Deep Learning. Diese Zusammenfassung behandelt die Geschichte, Stärken und Schwächen der KI, verschiedene Lernmethoden sowie praktische Anwendungen wie autonomes Fahren. Ideal für Studierende, die sich mit den Konzepten der KI und deren Entwicklung vertraut machen möchten.
117,866198
InformatikPython Grundkonzepte
Entdecken Sie die grundlegenden Konzepte der Python-Programmierung, einschließlich logischer Operatoren, Verzweigungen, Funktionen, Datentypen und Schleifen. Diese Zusammenfassung bietet eine klare Übersicht über die wichtigsten Elemente, die Sie für den Einstieg in Python benötigen.
81,1019
Beliebtester Inhalt
9
LerntippsFührerschein Theorie Wiederholung/Notizen
Schilder, Zeichen, Zahlen, Vorfahrt und mehr - alles für die theoretische Führerscheinprüfung :)
1110,039168
DeutschDer zerbrochene Krug Lernzettel & Zusammenfassung
Der zerbrochene Krug, Die wichtigsten Informationen zusammengefasst, Lernzettel
1323,568357
DeutschHeimsuchung komplette Zusammenfassung
Zusammenfassung des Buches als auch der einzelnen Kapitel und deren Charakteren. Auch tabellarisch. Im Unterricht ohne KI erstellt
126,251133
MatheLernzettel ZP 10 Mathe
Lernzettel von der ZP 10
105,383117
1
Englisch10 unregelmäßige Verben im past participle
unregelmäßige Verben aus Englisch - past participle
64,2913
Deutsch„Heimsuchung“ - Jenny Erpenbeck Lernlandkarte/ Lern Übersicht
Lernzettel/ Lernlandkarte Heimsuchung, Jenny Erpenbeck, Methodik Deutsch Abitur
112,83950
DeutschHeimsuchung - Jenny Erpenbeck
Inhalt, Entstehung und Quellen, Figuren, Geschichtliche Hintergründe, Motive, Erzählstruktur/- stil
1135,170670
MatheMathe ZP10 Zusammenfassung NRW
Zusammenfassung der Mathethemwn für die ZP10 NRW + Formelsammlung
1010,213518
LerntippsFahrschule Theorieprüfung Essentials
Entdecke die wichtigsten Punkte für die Theorieprüfung in der Fahrschule. Diese Zusammenfassung behandelt Geschwindigkeitsbegrenzungen, Sicherheitsabstände, Verkehrszeichen und wichtige Berechnungen für Reaktions- und Bremswege. Ideal für angehende Fahrer, die sich optimal vorbereiten möchten.
1177,1162,198
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.779 aufrufe·Aktualisiert 11. Aug. 2026·6 SeitenHTML CSS Grundlagen
J
Janine@selrax_a56f74
HTML und CSS sind die Grundbausteine des Internets - mit HTML strukturierst du Webseiten und mit CSS machst du sie hübsch! Egal ob du später mal Webdesigner werden willst oder einfach verstehen möchtest, wie Websites funktionieren, hier lernst du alles...
1
of 6
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 und CSS Grundlagen
HTML steht für Hypertext Markup Language und ist wie das Skelett einer Webseite. Es strukturiert den Inhalt mit Tags - das sind Befehle in spitzen Klammern wie <h1>Überschrift</h1>. Das Coole daran: Du sagst dem Browser nur, WAS etwas ist, nicht wie es aussehen soll.
CSS (Cascading Style Sheets) ist dagegen der Stylist deiner Webseite. Hier bestimmst du Farben, Schriftarten und das Layout. HTML ohne CSS ist wie ein Auto ohne Lackierung - funktioniert, sieht aber langweilig aus!
Tags funktionieren immer paarweise: Ein Starttag <h1> öffnet, ein Endtag </h1> schließt. Manche Tags wie <br /> für Zeilenumbrüche stehen alleine da. Wichtig: Speichere deine Dateien immer mit der Endung .html!
Merktipp: Tags sind unsichtbar im Browser - sie sind nur Anweisungen für die Darstellung!
2
of 6Melde 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
Textformatierung und Überschriften
Mit HTML kannst du Texte ganz einfach formatieren: <b>fett</b>, <i>kursiv</i> oder <u>unterstrichen</u>. Diese Befehle kennst du bestimmt schon aus Word - nur dass hier alles mit Code funktioniert!
Überschriften sind super wichtig für die Struktur deiner Webseite. Es gibt sechs verschiedene Größen: <h1> ist die größte (wie der Titel eines Buches), <h6> die kleinste (wie eine Fußnote). Die Zahlen zeigen die Hierarchie - genau wie bei Gliederungen in der Schule.
Du kannst die Überschriften verschachteln: Erst kommt <h1> für das Hauptthema, dann <h2> für Unterkapitel, <h3> für weitere Unterpunkte und so weiter. Das macht deine Seite übersichtlich und hilft auch Google beim Verstehen deiner Inhalte.
Praxistipp: Verwende immer nur eine
<h1>pro Seite - das ist wie ein Buchtitel und sollte einzigartig sein!
3
of 6Melde 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
Links und Verweise
Verweise sind das Herzstück des Internets - ohne sie gäbe es kein "Surfen" von Seite zu Seite! Eine URL wie https://apps.informatik.cc/sql/sqlite.php besteht aus verschiedenen Teilen: dem Protokoll (https), der Domain (informatik.cc) und dem Pfad zur Datei.
Absolute Verweise enthalten die komplette Adresse - funktionieren überall, sind aber lang zum Tippen. Relative Verweise sind wie Wegbeschreibungen: "Gehe in den Ordner img und hole die Datei bird.jpg". Sie funktionieren nur, wenn du schon auf der richtigen Website bist.
Links erstellst du mit <a href="https://informatik.cc/">Informatik</a>. Das href-Attribut enthält die Zieladresse, zwischen den Tags steht der Text, den Besucher anklicken können. So einfach verbindest du deine Seite mit dem Rest des Internets!
Webdev-Hack: Relative Verweise sind praktischer für lokale Projekte - weniger Tipparbeit und funktionieren auch offline!
4
of 6Melde 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
Bilder und div-Elemente
Bilder bringst du mit <img src="img/dog.jpg" alt="Dog" /> auf deine Webseite. Das src-Attribut zeigt dem Browser, wo das Bild liegt, alt beschreibt es für Menschen mit Sehbehinderung - das ist wichtig für Barrierefreiheit!
Beachte: Anders als bei Links wird das Bild direkt angezeigt, nicht nur verlinkt. Du kannst sowohl absolute Pfade (komplette URLs) als auch relative Pfade (lokale Dateien) verwenden.
Das div-Element <div></div> ist dein Alleskönner - ein neutraler Container ohne vordefinierte Eigenschaften. Erst mit CSS wird daraus ein farbiger Kasten, eine Navigation oder was auch immer du brauchst. Es ist wie ein leeres Zimmer, das du nach Belieben einrichten kannst.
Design-Tipp: div-Elemente sind perfekt zum Gruppieren von Inhalten - denke an sie wie an unsichtbare Boxen, die du später stylen kannst!
5
of 6Melde 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
Listen und Tabellen
Listen strukturieren Inhalte übersichtlich: <ul> für ungeordnete Listen mit Punkten, <ol> für nummerierte Listen. Jeder Listenpunkt bekommt ein <li>-Tag. Das kennst du von PowerPoint-Präsentationen - nur eben in Code!
Listen sind super praktisch für Navigationselemente, Aufzählungen oder To-Do-Listen. Der Browser nummeriert automatisch oder setzt Bullet Points - du musst dich nur um den Inhalt kümmern.
Tabellen erstellst du mit <table>, <tr> (Zeilen) und <td> (Zellen). Denk an ein Excel-Raster: Erst das große Rechteck (<table>), dann die Zeilen (<tr>), und in jede Zeile kommen die einzelnen Zellen (<td>). So baust du Schritt für Schritt deine Tabelle auf.
Struktur-Tipp: Tabellen sind perfekt für echte Daten wie Preislisten oder Stundenpläne - nicht für das Layout der ganzen Seite!
6
of 6Melde 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
Wir dachten schon, du fragst nie...
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.
Du kannst die App im Google Play Store und im Apple App Store herunterladen.
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
1Beliebtester Inhalt in Informatik
9Q
InformatikQuiz für die Komponenten des Pc's💻
💻Hier lernst ind testest du dein wissen über die Pc Komponenten⌨️
65984
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.
55460
InformatikInformatik Abitur 2025 NRW
Informatik Übersicht zu den Themen die im mündlichen Abitur drankommen. Ist also vielleicht nicht zu 100% vollständig.
124719
InformatikWENN und SVERWEIS
Erklärung sverweis und wenn Funktion bei exel
116314
InformatikPython Lernzettel Informatik
Python Lernzettel (mathematische Operatoren, Variablen, Datentypen, Skripte, Boolesche Operatoren)
109099
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.
122,87959
InformatikInformatik GK Lernzettel Abitur 2025
- selbstständig erstellter Lernzettel
1279618
InformatikKünstliche Intelligenz und Maschinelles Lernen
Entdecken Sie die Grundlagen der Künstlichen Intelligenz und des maschinellen Lernens, einschließlich künstlicher neuronaler Netze und Deep Learning. Diese Zusammenfassung behandelt die Geschichte, Stärken und Schwächen der KI, verschiedene Lernmethoden sowie praktische Anwendungen wie autonomes Fahren. Ideal für Studierende, die sich mit den Konzepten der KI und deren Entwicklung vertraut machen möchten.
117,866198
InformatikPython Grundkonzepte
Entdecken Sie die grundlegenden Konzepte der Python-Programmierung, einschließlich logischer Operatoren, Verzweigungen, Funktionen, Datentypen und Schleifen. Diese Zusammenfassung bietet eine klare Übersicht über die wichtigsten Elemente, die Sie für den Einstieg in Python benötigen.
81,1019
Beliebtester Inhalt
9LerntippsFührerschein Theorie Wiederholung/Notizen
Schilder, Zeichen, Zahlen, Vorfahrt und mehr - alles für die theoretische Führerscheinprüfung :)
1110,039168
DeutschDer zerbrochene Krug Lernzettel & Zusammenfassung
Der zerbrochene Krug, Die wichtigsten Informationen zusammengefasst, Lernzettel
1323,568357
DeutschHeimsuchung komplette Zusammenfassung
Zusammenfassung des Buches als auch der einzelnen Kapitel und deren Charakteren. Auch tabellarisch. Im Unterricht ohne KI erstellt
126,251133
MatheLernzettel ZP 10 Mathe
Lernzettel von der ZP 10
105,383117
1
Englisch10 unregelmäßige Verben im past participle
unregelmäßige Verben aus Englisch - past participle
64,2913
Deutsch„Heimsuchung“ - Jenny Erpenbeck Lernlandkarte/ Lern Übersicht
Lernzettel/ Lernlandkarte Heimsuchung, Jenny Erpenbeck, Methodik Deutsch Abitur
112,83950
DeutschHeimsuchung - Jenny Erpenbeck
Inhalt, Entstehung und Quellen, Figuren, Geschichtliche Hintergründe, Motive, Erzählstruktur/- stil
1135,170670
MatheMathe ZP10 Zusammenfassung NRW
Zusammenfassung der Mathethemwn für die ZP10 NRW + Formelsammlung
1010,213518
LerntippsFahrschule Theorieprüfung Essentials
Entdecke die wichtigsten Punkte für die Theorieprüfung in der Fahrschule. Diese Zusammenfassung behandelt Geschwindigkeitsbegrenzungen, Sicherheitsabstände, Verkehrszeichen und wichtige Berechnungen für Reaktions- und Bremswege. Ideal für angehende Fahrer, die sich optimal vorbereiten möchten.
1177,1162,198
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