==== HTML ==== HTML ist eine Auszeichnungssprache, dh. der enthaltene Text wird mittels *Tags* strukturiert: Markierter Inhalt wird vom Start-Tag (bsp. `

`) und dem End-Tag (`

` - beachte den Schrägstrich) eingeschlossen.

Titel werden mit h1 - h6 gekennzeichnet

Dies ist normaler Text. wird so dargestellt:

Titel werden mit h1 - h6 gekennzeichnet

Dies ist normaler Text.
=== Grundstruktur === HTML gibt eine Grundstruktur vor, die alle HTML-Dateien einhalten sollten. Im `head` werden Metadaten gespeichert, zum Beispiel der Titel der Webseite, der im Browser-Tab dargestellt wird; im `body` folgt der eigentliche Inhalt: Dies ist der Titel

Hier folgt der Inhalt

 === Block-Elemente === Block-Elemente werden typischerweise untereinander angeordnet und nehmen die ganze verfügbare Breite ein. Sie können Text, andere Block-Element oder auch Inline-Element (s.u.) enthalten. Die wichtigsten Struktur-Elemente sind die folgenden:
Überschriften

Abschnitte (en. paragraph) strukturieren den Text

 wird zu:
Überschriften

Abschnitte (en. paragraph) strukturieren den Text.

=== Inline-Auszeichnung === Bereiche im Lauftext können auch ausgezeichnet werden. Sogenannte *Inline-Tags* können keine Block-Element enthalten. Text kann betont (en. emphasis) oder stark betont werden. wird zu:
Text kann betont (en. emphasis) oder stark betont werden.
=== Attribute === Gewisse Tags benötigen *Attribute*, um zusätzliche Informationen angeben zu können. Diese folgen innerhalb der Spitzklammern des Tags, nach dem Tag-Namen. Wir nennen hier zwei Beispiele: == Links == Hyperlinks (Tag: `` für *anchor*) benötigen ein `href` Attribut (für *hyper reference*). Dieser Text enthält einen Link zur KSR.
Dieser Text enthält einen Link zur KSR.
Übrigens waren Hyperlinks das ursprünglich revolutionäre Merkmal von HTML, und das was es zum *Hypertext* macht: die Möglichkeit, aus einem Text gleich zu einem anderen springen zu können, was in keinem Buch oder anderen linearen Medium möglich ist. == Bilder == Bilder werden mit dem `` Tag eingebettet, wobei der Dateiname des Bilds im `src`-Attribut angegeben werden. Weil der Bild-Tag keinen Inhalt hat, braucht er auch keinen End-Tag; stattdessen wir der Tag gleich mit einem Schrägstrich geschlossen: {{ :gf_informatik:tigerente.jpeg?nolink&400 |}} === Aufgaben HTML === Erstelle eine einfache Webseite: * Erstelle einen neuen Ordner (zum Beispiel auf `OneDrive/Informatik/Internet/Webseite`). * Erstelle eine neue Datei `index.html` in einem [[#Editoren|Text-Editor]]. * Füge die HTML-Grundstruktur ein * ergänze einen Titel * eine Überschrift und etwas Text * füge ein Bild ein (finde ein Bild im Internet und speichere das Bild im selben Ordner ab) * und natürlich darf ein Link nicht fehlen. Öffne die Datei im Browser - immer wenn du die Datei neu abgespeichert hast, musst du die Seite im Browser neu laden, um die Änderungen anzuzeigen. Die meisten Browser tun dies mit dem Kommando `Ctrl+R` (oder `Cmd+R` auf dem Mac). ==== Editoren ==== HTML- und CSS-Quellcode ist nichts anderes als Text. Die Dateien können mit jedem Texteditor bearbeitet werden. Programmier-Umgebungen sind am Anfang etwas schwieriger zu bedienen, bieten aber mehr Komfort und Hilfe bei Fehlern. * Ich empfehle [[https://code.visualstudio.com/|Visual Studio Code]] zu installieren. * Alternative ohne Installation: [[https://vscode.dev/|vscode.dev]] direkt im Internet. * Auf Windows installiert ist normalerweise _Microsoft Editor_.