HTML und CSS sind die Grundbausteine des Internets - mit...
Informatik2.779 aufrufe·Aktualisiert 21. Juli 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⌨️
65974
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.
55440
InformatikInformatik Abitur 2025 NRW
Informatik Übersicht zu den Themen die im mündlichen Abitur drankommen. Ist also vielleicht nicht zu 100% vollständig.
124679
InformatikInformatik GK Lernzettel Abitur 2025
- selbstständig erstellter Lernzettel
1279118
InformatikWENN und SVERWEIS
Erklärung sverweis und wenn Funktion bei exel
116263
InformatikPython Lernzettel Informatik
Python Lernzettel (mathematische Operatoren, Variablen, Datentypen, Skripte, Boolesche Operatoren)
118899
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,86659
InformatikRelationale Datenbanken und SQL
Diese Zusammenfassung bietet einen umfassenden Überblick über relationale Datenbanken, einschließlich der Definition von Datensätzen, Attributen, Primär- und Fremdschlüsseln. Erfahren Sie mehr über Anomalien, ER-Diagramme und die Formulierung von SQL-Abfragen, um Daten effizient zu verwalten und zu analysieren. Ideal für Informatik-Abiturienten.
132,61765
InformatikExcel: Tabellen & Funktionen
Entdecken Sie die Grundlagen der Tabellenformatierung, wichtige Excel-Funktionen wie SUMME, MAX und WENN sowie die Erstellung von Diagrammen. Diese Zusammenfassung bietet klare Beispiele und Anleitungen für effektives Arbeiten mit Excel. Ideal für Studierende, die ihre Excel-Kenntnisse vertiefen möchten.
4,188139
Beliebtester Inhalt
9
DeutschDer zerbrochene Krug
Szenenzusammenfassunfen, Figurenkonstellationen, Aufbau des Stücks, Sprache und Stilbesonderheiten, Aussageabsicht, Thematik, Interpretation
1148,107729
DeutschHeimsuchung_JennyErpenbeck_Abitur
Zusammenfassungen für jedes Kapitel, Analysen und Zitate
1314,164277
MatheLernzettel ZP 10 Mathe
Lernzettel von der ZP 10
105,350116
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,223165
MatheMathe ZP10 Zusammenfassung NRW
Zusammenfassung der Mathethemwn für die ZP10 NRW + Formelsammlung
1010,195518
DeutschDer zerbrochene Krug Lernzettel & Zusammenfassung
Der zerbrochene Krug, Die wichtigsten Informationen zusammengefasst, Lernzettel
1323,506356
1
Englisch10 unregelmäßige Verben im past participle
unregelmäßige Verben aus Englisch - past participle
64,2783
DeutschHeimsuchung - Jenny Erpenbeck
Inhalt, Entstehung und Quellen, Figuren, Geschichtliche Hintergründe, Motive, Erzählstruktur/- stil
1134,816655
LerntippsFührerschein Theorie Wiederholung/Notizen
Schilder, Zeichen, Zahlen, Vorfahrt und mehr - alles für die theoretische Führerscheinprüfung :)
119,082149
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 21. Juli 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⌨️
65974
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.
55440
InformatikInformatik Abitur 2025 NRW
Informatik Übersicht zu den Themen die im mündlichen Abitur drankommen. Ist also vielleicht nicht zu 100% vollständig.
124679
InformatikInformatik GK Lernzettel Abitur 2025
- selbstständig erstellter Lernzettel
1279118
InformatikWENN und SVERWEIS
Erklärung sverweis und wenn Funktion bei exel
116263
InformatikPython Lernzettel Informatik
Python Lernzettel (mathematische Operatoren, Variablen, Datentypen, Skripte, Boolesche Operatoren)
118899
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,86659
InformatikRelationale Datenbanken und SQL
Diese Zusammenfassung bietet einen umfassenden Überblick über relationale Datenbanken, einschließlich der Definition von Datensätzen, Attributen, Primär- und Fremdschlüsseln. Erfahren Sie mehr über Anomalien, ER-Diagramme und die Formulierung von SQL-Abfragen, um Daten effizient zu verwalten und zu analysieren. Ideal für Informatik-Abiturienten.
132,61765
InformatikExcel: Tabellen & Funktionen
Entdecken Sie die Grundlagen der Tabellenformatierung, wichtige Excel-Funktionen wie SUMME, MAX und WENN sowie die Erstellung von Diagrammen. Diese Zusammenfassung bietet klare Beispiele und Anleitungen für effektives Arbeiten mit Excel. Ideal für Studierende, die ihre Excel-Kenntnisse vertiefen möchten.
4,188139
Beliebtester Inhalt
9DeutschDer zerbrochene Krug
Szenenzusammenfassunfen, Figurenkonstellationen, Aufbau des Stücks, Sprache und Stilbesonderheiten, Aussageabsicht, Thematik, Interpretation
1148,107729
DeutschHeimsuchung_JennyErpenbeck_Abitur
Zusammenfassungen für jedes Kapitel, Analysen und Zitate
1314,164277
MatheLernzettel ZP 10 Mathe
Lernzettel von der ZP 10
105,350116
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,223165
MatheMathe ZP10 Zusammenfassung NRW
Zusammenfassung der Mathethemwn für die ZP10 NRW + Formelsammlung
1010,195518
DeutschDer zerbrochene Krug Lernzettel & Zusammenfassung
Der zerbrochene Krug, Die wichtigsten Informationen zusammengefasst, Lernzettel
1323,506356
1
Englisch10 unregelmäßige Verben im past participle
unregelmäßige Verben aus Englisch - past participle
64,2783
DeutschHeimsuchung - Jenny Erpenbeck
Inhalt, Entstehung und Quellen, Figuren, Geschichtliche Hintergründe, Motive, Erzählstruktur/- stil
1134,816655
LerntippsFührerschein Theorie Wiederholung/Notizen
Schilder, Zeichen, Zahlen, Vorfahrt und mehr - alles für die theoretische Führerscheinprüfung :)
119,082149
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