Informatik2.790Aktualisiert 31. 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.00994
Chemie

Experimentelles Protokoll

Diese Vorlage für ein experimentelles Protokoll bietet eine strukturierte Anleitung zur Dokumentation von Laborversuchen. Sie umfasst Abschnitte für Vorüberlegungen, Durchführung, Beobachtungen und Auswertung, einschließlich der Interpretation von Ergebnissen und chemischen Gleichungen. Ideal für Studierende der Chemie, die ihre Experimente systematisch festhalten möchten.

71.33016
Informatik

Kryptologie Grundlagen

Entdecken Sie die Grundlagen der Kryptologie, einschließlich monoalphabetischer (Caesar) und polyalphabetischer (Vigenere, One-Time-Pad) Verschlüsselung. Erfahren Sie mehr über das Kerckhoffs-Prinzip, asymmetrische Verschlüsselung und digitale Unterschriften. Ideal für Studierende der Informatik und Sicherheitsforschung.

132.11053
Informatik

Zahlensysteme - Informatik

Binär, Hexa, Dezimal

92767
Informatik

Zahlensysteme und Codierung

Entdecken Sie die Grundlagen der Zahlensysteme (Dezimal, Binär, Hexadezimal), die Funktionsweise von RGB und ASCII-Codierung sowie die Berechnung von Speichereinheiten. Diese Zusammenfassung bietet eine klare Übersicht über die wichtigsten Konzepte der Informatik, ideal für Schüler der 11. Klasse im Gymnasium Niedersachsen. Erfahren Sie, wie Netzwerke funktionieren und welche Rolle sie in der modernen Technologie spielen.

1194527
Informatik

Arduino Grundlagen: Programmierung

Entdecke die Grundlagen der Arduino-Programmierung mit diesem Lernskript. Es bietet klare Erklärungen zu Variablen, Schleifen, Bedingungen und Schaltkreisen, ergänzt durch praktische Übungen. Ideal für Schüler, die in die Welt der Mikrocontroller und Robotik einsteigen möchten.

93.16565

Beliebtester Inhalt: Informatik

Informatik

Python Lernzettel Informatik

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

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

123.05661
Mathe

Excel Formelsammlung

IHK Kaufmännische Zwischenprüfung

121.01324
Informatik

Informatik Abitur 2025 NRW

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

126249
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.453117
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.71664
Informatik

WENN und SVERWEIS

Erklärung sverweis und wenn Funktion bei exel

117594
Informatik

Excel: 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.340139
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.

114359

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.