HTML und CSS sind die Grundbausteine des Internets - mit...
Informatik2,779 views·Updated Jun 29, 2026·6 pagesHTML 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
We thought you’d never ask...
What is the Knowunity AI companion?
Our AI companion is specifically built for the needs of students. Based on the millions of content pieces we have on the platform we can provide truly meaningful and relevant answers to students. But its not only about answers, the companion is even more about guiding students through their daily learning challenges, with personalised study plans, quizzes or content pieces in the chat and 100% personalisation based on the students skills and developments.
Where can I download the Knowunity app?
You can download the app in the Google Play Store and in the Apple App Store.
Is Knowunity really free of charge?
That's right! Enjoy free access to study content, connect with fellow students, and get instant help – all at your fingertips.
Similar Content
Most popular content: HTML
1Most popular content in Informatik
9InformatikInformatik GK Lernzettel Abitur 2025
- selbstständig erstellter Lernzettel
1278317
Q
InformatikQuiz für die Komponenten des Pc's💻
💻Hier lernst ind testest du dein wissen über die Pc Komponenten⌨️
65894
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,84958
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.
55360
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)
118718
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
Most popular content
9
DeutschDer zerbrochene Krug
Szenenzusammenfassunfen, Figurenkonstellationen, Aufbau des Stücks, Sprache und Stilbesonderheiten, Aussageabsicht, Thematik, Interpretation
1148,034728
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,772921
DeutschDer zerbrochne Krug
Ausführliche Lernzettel zu: Basisdaten, Handlung, ausführliche Zusammenfassungen der Auftritte, zentrale Themen, Symbolische Bedeutung, Merkmale der Komödie
1214,330253
DeutschHeimsuchung_JennyErpenbeck_Abitur
Zusammenfassungen für jedes Kapitel, Analysen und Zitate
1314,076277
MatheZP10 Mathe Zusammenfassung NRW
Lernzettel für die ZP10 Mathe in NRW mit allen Themen außer Sinusfunktionen.
1061,9114,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,8391,255
EnglischEnglisch LK Abitur 2025
Komplette Englisch LK Abi Zusammenfassung 2025
1315,040394
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,207165
DeutschJenny Erpenbeck "Heimsuchung"
Übersicht und Struktur des Romans
117,998168
Can't find what you're looking for? Explore other subjects.
Students love us — and so will you.
4.6/5App Store
4.7/5Google Play
The app is very easy to use and well designed. I have found everything I was looking for so far and have been able to learn a lot from the presentations! I will definitely use the app for a class assignment! And of course it also helps a lot as an inspiration.
Stefan SiOS user
This app is really great. There are so many study notes and help [...]. My problem subject is French, for example, and the app has so many options for help. Thanks to this app, I have improved my French. I would recommend it to anyone.
Samantha KlichAndroid user
Wow, I am really amazed. I just tried the app because I've seen it advertised many times and was absolutely stunned. This app is THE HELP you want for school and above all, it offers so many things, such as workouts and fact sheets, which have been VERY helpful to me personally.
AnnaiOS user
Informatik2,779 views·Updated Jun 29, 2026·6 pagesHTML 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
Sign up to see the content. It's free!
- Access to all documents
- Improve your grades
- Join milions of students
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 6Sign up to see the content. It's free!
- Access to all documents
- Improve your grades
- Join milions of students
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 6Sign up to see the content. It's free!
- Access to all documents
- Improve your grades
- Join milions of students
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 6Sign up to see the content. It's free!
- Access to all documents
- Improve your grades
- Join milions of students
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 6Sign up to see the content. It's free!
- Access to all documents
- Improve your grades
- Join milions of students
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 6Sign up to see the content. It's free!
- Access to all documents
- Improve your grades
- Join milions of students
We thought you’d never ask...
What is the Knowunity AI companion?
Our AI companion is specifically built for the needs of students. Based on the millions of content pieces we have on the platform we can provide truly meaningful and relevant answers to students. But its not only about answers, the companion is even more about guiding students through their daily learning challenges, with personalised study plans, quizzes or content pieces in the chat and 100% personalisation based on the students skills and developments.
Where can I download the Knowunity app?
You can download the app in the Google Play Store and in the Apple App Store.
Is Knowunity really free of charge?
That's right! Enjoy free access to study content, connect with fellow students, and get instant help – all at your fingertips.
Similar Content
Most popular content: HTML
1Most popular content in Informatik
9InformatikInformatik GK Lernzettel Abitur 2025
- selbstständig erstellter Lernzettel
1278317
Q
InformatikQuiz für die Komponenten des Pc's💻
💻Hier lernst ind testest du dein wissen über die Pc Komponenten⌨️
65894
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,84958
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.
55360
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)
118718
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
Most popular content
9DeutschDer zerbrochene Krug
Szenenzusammenfassunfen, Figurenkonstellationen, Aufbau des Stücks, Sprache und Stilbesonderheiten, Aussageabsicht, Thematik, Interpretation
1148,034728
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,772921
DeutschDer zerbrochne Krug
Ausführliche Lernzettel zu: Basisdaten, Handlung, ausführliche Zusammenfassungen der Auftritte, zentrale Themen, Symbolische Bedeutung, Merkmale der Komödie
1214,330253
DeutschHeimsuchung_JennyErpenbeck_Abitur
Zusammenfassungen für jedes Kapitel, Analysen und Zitate
1314,076277
MatheZP10 Mathe Zusammenfassung NRW
Lernzettel für die ZP10 Mathe in NRW mit allen Themen außer Sinusfunktionen.
1061,9114,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,8391,255
EnglischEnglisch LK Abitur 2025
Komplette Englisch LK Abi Zusammenfassung 2025
1315,040394
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,207165
DeutschJenny Erpenbeck "Heimsuchung"
Übersicht und Struktur des Romans
117,998168
Can't find what you're looking for? Explore other subjects.
Students love us — and so will you.
4.6/5App Store
4.7/5Google Play
The app is very easy to use and well designed. I have found everything I was looking for so far and have been able to learn a lot from the presentations! I will definitely use the app for a class assignment! And of course it also helps a lot as an inspiration.
Stefan SiOS user
This app is really great. There are so many study notes and help [...]. My problem subject is French, for example, and the app has so many options for help. Thanks to this app, I have improved my French. I would recommend it to anyone.
Samantha KlichAndroid user
Wow, I am really amazed. I just tried the app because I've seen it advertised many times and was absolutely stunned. This app is THE HELP you want for school and above all, it offers so many things, such as workouts and fact sheets, which have been VERY helpful to me personally.
AnnaiOS user