HTML und CSS sind die Grundbausteine jeder Website - HTML...
Informatik2.813 aufrufe·Aktualisiert 25. Aug. 2026·2 SeitenHTML und CSS Tutorial: Tags und Formatierungen
Kim🐢@kimsofie.h
1
of 2
HTML - Die Struktur deiner Website
HTML (Hyper Text Markup Language) ist wie das Skelett einer Website. Es besteht aus drei Teilen: Hypertext (Verlinkungen zwischen Seiten), Markup (Strukturierung des Textes) und Language (eine eigene Computersprache).
Tags sind die wichtigsten Bausteine in HTML - sie funktionieren wie Klammern um deinen Inhalt. Jedes Tag hat normalerweise einen Start-Tag <h1> und einen End-Tag </h1>. Du kannst den HTML-Code jeder Website sehen, indem du mit Rechtsklick auf "Quelltext anzeigen" gehst.
Eine HTML-Datei erstellst du ganz einfach: Editor öffnen, Code schreiben und als .html-Datei speichern. Der Grundaufbau ist immer gleich: <!DOCTYPE html> am Anfang, dann <html>, <head> für unsichtbare Infos und <body> für alles, was auf der Website zu sehen ist.
Die wichtigsten Tags kennst du schnell: <h1> für Überschriften, <p> für Absätze, <ul> und <ol> für Listen, <img> für Bilder und <a> für Links. Mit diesen Tags kannst du bereits richtig gute Websites bauen!
Tipp: Probier einfach mal aus! HTML lernt man am besten durch Experimentieren im Browser.
2
of 2
CSS - Das Design deiner Website
CSS (Cascading Style Sheets) macht aus langweiligen HTML-Seiten echte Hingucker! Während HTML die Struktur vorgibt, bestimmt CSS das Aussehen - Farben, Schriftarten, Abstände und Layout.
CSS schreibst du in eine separate Datei und verlinkst sie mit deiner HTML-Datei. So bleibt alles übersichtlich und du kannst das Design mehrerer Seiten zentral steuern. Selektoren wie body, h1 oder table bestimmen, welche HTML-Elemente gestaltet werden sollen.
Mit CSS-Eigenschaften wie color, font-size, background-color und text-align veränderst du das Aussehen komplett. Besonders cool sind Hover-Effekte bei Links - damit reagieren Buttons auf Mausbewegungen.
Das Box-Model ist super wichtig zu verstehen: Jedes Element hat Content, Padding (Innenabstand), Border (Rahmen) und Margin (Außenabstand). Mit margin: auto zentrierst du Elemente automatisch auf der Seite.
Merke dir: CSS folgt dem Prinzip "Cascading" - später definierte Regeln überschreiben frühere Regeln!
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
Steuerung und Kontrolle
BiologieBeliebtester Inhalt: CSS
1Beliebtester Inhalt in Informatik
9InformatikPython Lernzettel Informatik
Python Lernzettel (mathematische Operatoren, Variablen, Datentypen, Skripte, Boolesche Operatoren)
109229
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,91061
InformatikInformatik Abitur 2025 NRW
Informatik Übersicht zu den Themen die im mündlichen Abitur drankommen. Ist also vielleicht nicht zu 100% vollständig.
124819
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.
107,890198
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,63965
InformatikWENN und SVERWEIS
Erklärung sverweis und wenn Funktion bei exel
116484
InformatikKaufverträge: Grundlagen und Ablauf
Erfahren Sie alles über das Zustandekommen von Kaufverträgen, einschließlich der verschiedenen Arten von Willenserklärungen und den Bindungsfristen. Diese Zusammenfassung bietet einen klaren Überblick über die Abläufe und rechtlichen Grundlagen, die für Kauffrauen und Kaufmänner im Büromanagement wichtig sind.
121,28929
InformatikArduino Programmierbefehle
Entdecken Sie die wichtigsten Programmierbefehle für Arduino, einschließlich digitaler und analoger Steuerung, Zufallszahlengenerierung und serieller Kommunikation. Ideal für Anfänger und Fortgeschrittene, die ihre Kenntnisse in der Arduino-Programmierung vertiefen möchten.
93,117100
MatheExcel Formelsammlung
IHK Kaufmännische Zwischenprüfung
1289620
Beliebtester Inhalt
9
LerntippsFührerschein Theorie Wiederholung/Notizen
Schilder, Zeichen, Zahlen, Vorfahrt und mehr - alles für die theoretische Führerscheinprüfung :)
1110,749187
DeutschHeimsuchung komplette Zusammenfassung
Zusammenfassung des Buches als auch der einzelnen Kapitel und deren Charakteren. Auch tabellarisch. Im Unterricht ohne KI erstellt
127,937178
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.
1178,2342,217
DeutschKapitelzusammenfassung Heimsuchung Jenny Erpenbeck
Zusammenfassung jeder Kapitel, Deutungen und Erklärungen
1315,529186
LerntippsLernzettel Führerschein Theorie
Ausarbeitung schwieriger Theorie Fragen, Klasse Auto
114,29278
DeutschHeimsuchung_JennyErpenbeck_Abitur
Zusammenfassungen für jedes Kapitel, Analysen und Zitate
1315,658302
DeutschDer zerbrochene Krug Inhaltsübersicht und Szenenanalyse Aufbau - Deutsch Q1/Q2/Abitur
Inhaltsübersicht und Szenenanalyse Aufbau “der zerbrochne Krug” Heinrich von Kleist
128,255139
DeutschHeimsuchung - Jenny Erpenbeck
Inhalt, Entstehung und Quellen, Figuren, Geschichtliche Hintergründe, Motive, Erzählstruktur/- stil
1135,472676
LerntippsVerkehrsregeln und Zeichen
Entdecken Sie die wichtigsten Verkehrszeichen, Regeln und Fahrbahnmarkierungen für die Führerscheinprüfung. Diese Zusammenfassung bietet klare Erklärungen zu Geschwindigkeitsbegrenzungen, Überholverboten und Vorfahrtsregeln, um Ihre Fahrkenntnisse zu verbessern. Ideal für die Vorbereitung auf die theoretische Führerscheinprüfung.
1124,773634
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.813 aufrufe·Aktualisiert 25. Aug. 2026·2 SeitenHTML und CSS Tutorial: Tags und Formatierungen
Kim🐢@kimsofie.h
HTML und CSS sind die Grundbausteine jeder Website - HTML sorgt für die Struktur, CSS macht alles schön! Mit diesen beiden Sprachen kannst du bereits richtig coole Webseiten erstellen und verstehen, wie das Internet funktioniert.
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 - Die Struktur deiner Website
HTML (Hyper Text Markup Language) ist wie das Skelett einer Website. Es besteht aus drei Teilen: Hypertext (Verlinkungen zwischen Seiten), Markup (Strukturierung des Textes) und Language (eine eigene Computersprache).
Tags sind die wichtigsten Bausteine in HTML - sie funktionieren wie Klammern um deinen Inhalt. Jedes Tag hat normalerweise einen Start-Tag <h1> und einen End-Tag </h1>. Du kannst den HTML-Code jeder Website sehen, indem du mit Rechtsklick auf "Quelltext anzeigen" gehst.
Eine HTML-Datei erstellst du ganz einfach: Editor öffnen, Code schreiben und als .html-Datei speichern. Der Grundaufbau ist immer gleich: <!DOCTYPE html> am Anfang, dann <html>, <head> für unsichtbare Infos und <body> für alles, was auf der Website zu sehen ist.
Die wichtigsten Tags kennst du schnell: <h1> für Überschriften, <p> für Absätze, <ul> und <ol> für Listen, <img> für Bilder und <a> für Links. Mit diesen Tags kannst du bereits richtig gute Websites bauen!
Tipp: Probier einfach mal aus! HTML lernt man am besten durch Experimentieren im Browser.
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
CSS - Das Design deiner Website
CSS (Cascading Style Sheets) macht aus langweiligen HTML-Seiten echte Hingucker! Während HTML die Struktur vorgibt, bestimmt CSS das Aussehen - Farben, Schriftarten, Abstände und Layout.
CSS schreibst du in eine separate Datei und verlinkst sie mit deiner HTML-Datei. So bleibt alles übersichtlich und du kannst das Design mehrerer Seiten zentral steuern. Selektoren wie body, h1 oder table bestimmen, welche HTML-Elemente gestaltet werden sollen.
Mit CSS-Eigenschaften wie color, font-size, background-color und text-align veränderst du das Aussehen komplett. Besonders cool sind Hover-Effekte bei Links - damit reagieren Buttons auf Mausbewegungen.
Das Box-Model ist super wichtig zu verstehen: Jedes Element hat Content, Padding (Innenabstand), Border (Rahmen) und Margin (Außenabstand). Mit margin: auto zentrierst du Elemente automatisch auf der Seite.
Merke dir: CSS folgt dem Prinzip "Cascading" - später definierte Regeln überschreiben frühere Regeln!
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: CSS
1Beliebtester Inhalt in Informatik
9InformatikPython Lernzettel Informatik
Python Lernzettel (mathematische Operatoren, Variablen, Datentypen, Skripte, Boolesche Operatoren)
109229
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,91061
InformatikInformatik Abitur 2025 NRW
Informatik Übersicht zu den Themen die im mündlichen Abitur drankommen. Ist also vielleicht nicht zu 100% vollständig.
124819
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.
107,890198
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,63965
InformatikWENN und SVERWEIS
Erklärung sverweis und wenn Funktion bei exel
116484
InformatikKaufverträge: Grundlagen und Ablauf
Erfahren Sie alles über das Zustandekommen von Kaufverträgen, einschließlich der verschiedenen Arten von Willenserklärungen und den Bindungsfristen. Diese Zusammenfassung bietet einen klaren Überblick über die Abläufe und rechtlichen Grundlagen, die für Kauffrauen und Kaufmänner im Büromanagement wichtig sind.
121,28929
InformatikArduino Programmierbefehle
Entdecken Sie die wichtigsten Programmierbefehle für Arduino, einschließlich digitaler und analoger Steuerung, Zufallszahlengenerierung und serieller Kommunikation. Ideal für Anfänger und Fortgeschrittene, die ihre Kenntnisse in der Arduino-Programmierung vertiefen möchten.
93,117100
MatheExcel Formelsammlung
IHK Kaufmännische Zwischenprüfung
1289620
Beliebtester Inhalt
9LerntippsFührerschein Theorie Wiederholung/Notizen
Schilder, Zeichen, Zahlen, Vorfahrt und mehr - alles für die theoretische Führerscheinprüfung :)
1110,749187
DeutschHeimsuchung komplette Zusammenfassung
Zusammenfassung des Buches als auch der einzelnen Kapitel und deren Charakteren. Auch tabellarisch. Im Unterricht ohne KI erstellt
127,937178
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.
1178,2342,217
DeutschKapitelzusammenfassung Heimsuchung Jenny Erpenbeck
Zusammenfassung jeder Kapitel, Deutungen und Erklärungen
1315,529186
LerntippsLernzettel Führerschein Theorie
Ausarbeitung schwieriger Theorie Fragen, Klasse Auto
114,29278
DeutschHeimsuchung_JennyErpenbeck_Abitur
Zusammenfassungen für jedes Kapitel, Analysen und Zitate
1315,658302
DeutschDer zerbrochene Krug Inhaltsübersicht und Szenenanalyse Aufbau - Deutsch Q1/Q2/Abitur
Inhaltsübersicht und Szenenanalyse Aufbau “der zerbrochne Krug” Heinrich von Kleist
128,255139
DeutschHeimsuchung - Jenny Erpenbeck
Inhalt, Entstehung und Quellen, Figuren, Geschichtliche Hintergründe, Motive, Erzählstruktur/- stil
1135,472676
LerntippsVerkehrsregeln und Zeichen
Entdecken Sie die wichtigsten Verkehrszeichen, Regeln und Fahrbahnmarkierungen für die Führerscheinprüfung. Diese Zusammenfassung bietet klare Erklärungen zu Geschwindigkeitsbegrenzungen, Überholverboten und Vorfahrtsregeln, um Ihre Fahrkenntnisse zu verbessern. Ideal für die Vorbereitung auf die theoretische Führerscheinprüfung.
1124,773634
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