HTML5 und CSS sind die Grundbausteine des Webs - HTML5...
Informatik1.290 aufrufe·Aktualisiert 20. Juli 2026·3 SeitenHTML und CSS: Grundlagen und Anwendung
leardin@leardin
1 / 3
1
of 3
HTML5 Grundlagen
HTML5 (Hypertext Markup Language) ist deine Geheimwaffe für den Aufbau von Webseiten. Es funktioniert wie ein Bauplan - du sagst dem Browser, was Text, Bilder oder Videos sind, aber du programmierst nicht wirklich.
Das Geniale an HTML5 sind die Tags. Jedes Element hat einen Start-Tag <...> und meist auch einen End-Tag </...> mit Schrägstrich. Zwischen diesen Tags steht dein Inhalt. Attribute geben zusätzliche Infos - sie stehen immer im Start-Tag.
Das Grundgerüst jeder HTML-Seite sieht so aus: <!DOCTYPE html>, dann <html>, im <head> stehen unsichtbare Infos wie der Titel, und im <body> kommt alles rein, was der User sehen soll.
💡 Merktipp: Tags sind wie Klammern - was du aufmachst, musst du auch wieder schließen (außer bei ein paar Ausnahmen wie
<br>).
Die wichtigsten HTML-Elemente sind Überschriften <h1> bis <h6>, Absätze <p>, Textformatierung wie <b> für fett und <i> für kursiv, sowie Listen mit <ul> (ungeordnet) und <ol> (nummeriert).
2
of 3
Links, Tabellen und Medien
Links sind das Herzstück des Internets. Mit <a href="ziel.html"> verlinkst du zu anderen Seiten. Das href-Attribut bestimmt das Ziel - entweder eine andere Datei, eine Website oder sogar eine Stelle auf derselben Seite mit #sprungmarke.
Tabellen baust du mit <table>, <tr> für Zeilen und <td> für normale Zellen auf. Mit <th> erstellst du Kopfzeilen, die automatisch fett und zentriert sind. Tabellen sind perfekt für strukturierte Daten.
Bilder und Videos machen deine Seite lebendig. <img src="bild.jpg" alt="Beschreibung"> fügt Bilder ein, wobei alt wichtig für Screenreader ist. Videos und Audios bindest du mit <video> und <audio> ein - controls zeigt die Bedienelemente.
💡 Profi-Tipp: Mit
target="_blank"öffnen sich Links in einem neuen Fenster - super praktisch für externe Links!
3
of 3
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: CSS
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
Informatik1.290 aufrufe·Aktualisiert 20. Juli 2026·3 SeitenHTML und CSS: Grundlagen und Anwendung
leardin@leardin
HTML5 und CSS sind die Grundbausteine des Webs - HTML5 strukturiert den Inhalt deiner Webseite, während CSS für das coole Design sorgt. Zusammen ermöglichen sie dir, professionelle Websites zu erstellen, die sowohl funktional als auch optisch ansprechend sind.
1
of 3
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
HTML5 Grundlagen
HTML5 (Hypertext Markup Language) ist deine Geheimwaffe für den Aufbau von Webseiten. Es funktioniert wie ein Bauplan - du sagst dem Browser, was Text, Bilder oder Videos sind, aber du programmierst nicht wirklich.
Das Geniale an HTML5 sind die Tags. Jedes Element hat einen Start-Tag <...> und meist auch einen End-Tag </...> mit Schrägstrich. Zwischen diesen Tags steht dein Inhalt. Attribute geben zusätzliche Infos - sie stehen immer im Start-Tag.
Das Grundgerüst jeder HTML-Seite sieht so aus: <!DOCTYPE html>, dann <html>, im <head> stehen unsichtbare Infos wie der Titel, und im <body> kommt alles rein, was der User sehen soll.
💡 Merktipp: Tags sind wie Klammern - was du aufmachst, musst du auch wieder schließen (außer bei ein paar Ausnahmen wie
<br>).
Die wichtigsten HTML-Elemente sind Überschriften <h1> bis <h6>, Absätze <p>, Textformatierung wie <b> für fett und <i> für kursiv, sowie Listen mit <ul> (ungeordnet) und <ol> (nummeriert).
2
of 3Melde 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, Tabellen und Medien
Links sind das Herzstück des Internets. Mit <a href="ziel.html"> verlinkst du zu anderen Seiten. Das href-Attribut bestimmt das Ziel - entweder eine andere Datei, eine Website oder sogar eine Stelle auf derselben Seite mit #sprungmarke.
Tabellen baust du mit <table>, <tr> für Zeilen und <td> für normale Zellen auf. Mit <th> erstellst du Kopfzeilen, die automatisch fett und zentriert sind. Tabellen sind perfekt für strukturierte Daten.
Bilder und Videos machen deine Seite lebendig. <img src="bild.jpg" alt="Beschreibung"> fügt Bilder ein, wobei alt wichtig für Screenreader ist. Videos und Audios bindest du mit <video> und <audio> ein - controls zeigt die Bedienelemente.
💡 Profi-Tipp: Mit
target="_blank"öffnen sich Links in einem neuen Fenster - super praktisch für externe Links!
3
of 3Melde 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: CSS
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