Informatik2.784Aktualisiert 10. Okt. 20266 Seiten

HTML CSS Grundlagen

Melden
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 Wichtige.
HTML CSS – Seite 1

Melde dich an, um den Inhalt zu sehen.
Kostenlos!

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!

HTML CSS – Seite 2

Melde dich an, um den Inhalt zu sehen.
Kostenlos!

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!

HTML CSS – Seite 3

Melde dich an, um den Inhalt zu sehen.
Kostenlos!

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!

HTML CSS – Seite 4

Melde dich an, um den Inhalt zu sehen.
Kostenlos!

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!

HTML CSS – Seite 5

Melde dich an, um den Inhalt zu sehen.
Kostenlos!

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!

HTML CSS – Seite 6

Melde dich an, um den Inhalt zu sehen.
Kostenlos!

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

Informatik

Informatik Abitur 2023: Schlüsselkonzepte

Entdecken Sie die zentralen Themen für das Informatik-Abitur 2023, einschließlich Datenbanken (Access), Programmierung (VBA), Multimedia (HTML) und statistische Analyseverfahren (GrafStat). Diese Zusammenfassung bietet eine klare Übersicht über wichtige Konzepte wie CSS, Datenbanknormalisierung und Algorithmen. Ideal für die Prüfungsvorbereitung.

114.00894
Informatik

Objektorientierte Programmierung in Java

Entdecken Sie die Grundlagen der objektorientierten Programmierung in Java. Diese Zusammenfassung behandelt zentrale Konzepte wie Klassen, Objekte, Attribute, Methoden, Vererbung, Polymorphismus und Zugriffsmodifikatoren. Ideal für Schüler, die sich auf Prüfungen vorbereiten oder ihre Programmierkenntnisse vertiefen möchten.

115.672212
Informatik

Java Grundlagen und OOP

Entdecken Sie die Grundlagen von Java, einschließlich Datentypen, Arrays, objektorientierter Programmierung (OOP) und Sortieralgorithmen. Diese Zusammenfassung bietet einen klaren Überblick über wichtige Konzepte wie Klassen, Objekte, Konstruktoren, Methoden und Kontrollstrukturen. Ideal für Schüler, die sich auf Informatikprüfungen vorbereiten oder ihre Programmierkenntnisse vertiefen möchten.

121.89920
Physik

Facharbeit: Schritt-für-Schritt Anleitung

Entdecke eine umfassende Schritt-für-Schritt Anleitung zum Schreiben deiner Facharbeit. Von der Themenfindung über die Gliederung bis hin zu korrektem Zitieren und Korrekturlesen – diese Übersicht bietet dir alle wichtigen Tipps und Techniken, um eine erfolgreiche Facharbeit zu erstellen. Ideal für Schüler und Studenten, die ihre Schreibfähigkeiten verbessern möchten.

115.444167
Steuerung und Kontrolle

Drogenwirkungen und Fahrverhalten

Entdecke die Auswirkungen von Drogen wie Ecstasy, Speed und Halluzinogenen auf das Fahrverhalten. Diese Zusammenfassung behandelt wichtige Themen wie Leistungseinschränkungen, Nachweiszeiten und rechtliche Konsequenzen. Ideal für Fahrschüler und alle, die sich auf die Prüfung vorbereiten.

1129913
Informatik

JAVA Grundbegriffe und Konzepte

Entdecken Sie die grundlegenden Begriffe und Konzepte der JAVA-Programmierung, einschließlich Datentypen, Klassen, Objekten, Methoden und Kontrollstrukturen. Diese Zusammenfassung bietet eine klare Übersicht über die wichtigsten Elemente der objektorientierten Programmierung in JAVA, ideal für Studierende und Programmieranfänger.

85.864303

Beliebtester Inhalt: Informatik

Informatik

Informatik 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.

133.00661
Informatik

Theorie Anhänger Klasse B

Teil 1 Anhänger

1039110
Informatik

Python Lernzettel Informatik

Python Lernzettel (mathematische Operatoren, Variablen, Datentypen, Skripte, Boolesche Operatoren)

119889
Informatik

Globalisierung: Ursachen & Effekte

Entdecken Sie die Ursachen und Auswirkungen der Globalisierung sowie deren Vor- und Nachteile. Diese Zusammenfassung behandelt die Rolle von Kommunikationstechnologie, internationalem Handel und den Einfluss auf Umwelt und Gesellschaft. Ideal für Studierende, die sich mit den komplexen Aspekten der Globalisierung auseinandersetzen möchten.

114208
Mathe

Excel Formelsammlung

IHK Kaufmännische Zwischenprüfung

1298424
Informatik

Informatik Abitur 2025 NRW

Informatik Übersicht zu den Themen die im mündlichen Abitur drankommen. Ist also vielleicht nicht zu 100% vollständig.

125759
Informatik

Python Grundlagen verstehen

Entdecken Sie die grundlegenden Konzepte der Python-Programmierung in diesem umfassenden Überblick. Ideal für Anfänger, die die Basis von Python erlernen möchten. Themen umfassen Datentypen, Kontrollstrukturen und Funktionen. Perfekt für Präsentationen oder als Zusammenfassung.

113.411117
Informatik

Relationale 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.68467
Informatik

Zahlensysteme und Umrechnungen

Entdecke die Grundlagen der Zahlensysteme: Dezimal-, Dual- und Hexadezimalsystem. Lerne, wie man Zahlen zwischen diesen Systemen umrechnet, mit praktischen Beispielen und Übungen zur Vertiefung. Ideal für Mathematikstudenten und Informatikinteressierte.

111.68063

Schüler lieben uns, und du wirst es auch.

4.6/5App Store
4.7/5Google Play
Stefan SiOS-Nutzer

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.

Samantha KlichAndroid-Nutzerin

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.

AnnaiOS-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.