powered by 
Mit HTML beschreibst du, was auf einer Webseite oder einer Folie steht: Überschriften, Absätze, Listen, Links und Bilder. Wie es aussieht, regelt CSS. Such dir die Stelle heraus, die du gerade brauchst.
Alles auf dieser Seite gilt für Webseiten und für Folien mit Shower gleichermaßen. Auf einer Webseite steht der Code im <body> deiner Datei index.html, auf einer Folie zwischen <section class="slide"> und </section>. Jedes Beispiel zeigt rechts, wie es aussieht; mit dem Knopf in der Ecke des Bildes siehst du es als Folie statt als Webseite.
HTML-Code besteht aus Tags. Ein Tag steht in spitzen Klammern und sagt, was für ein Stück Inhalt folgt. Die meisten Tags gibt es paarweise: Das öffnende Tag beginnt etwas, das schließende Tag mit / beendet es.
<h1>Axolotl</h1> <p>Axolotl leben ihr ganzes Leben im Wasser.</p>
<h1> beginnt eine Überschrift, </h1> beendet sie.<p> beginnt einen Absatz (»paragraph«), </p> beendet ihn.Was zwischen den beiden Tags steht, ist der Inhalt des Elements. Elemente können andere Elemente enthalten. Rücke den Inhalt dann ein, damit du siehst, was wozu gehört:
<ul> <li>Ein Punkt</li> <li>Noch ein Punkt</li> </ul>
Für den Browser sind die Leerzeichen am Zeilenanfang egal, für dich nicht. Mit Tab und ShiftTab rückst du markierte Zeilen ein und aus; StrgShiftI (»Format Document«) räumt die ganze Datei auf.
Jede Webseite hat dasselbe Gerüst. Der sichtbare Inhalt steht im <body>, alles im <head> beschreibt die Seite selbst:
<!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Axolotl</title> </head> <body> <h1>Axolotl</h1> <p>Axolotl leben ihr ganzes Leben im Wasser.</p> </body> </html>
<!DOCTYPE html> sagt dem Browser: Das ist eine moderne HTML-Seite.lang="de" nennt die Sprache. Damit trennt der Browser Wörter richtig, und eine Vorlesesoftware spricht deutsch.<meta charset="UTF-8"> sorgt dafür, dass Umlaute und Emojis richtig erscheinen.viewport sagt Handys, dass sie die Seite in ihrer echten Breite zeigen sollen.<title> steht im Browser-Tab, nicht auf der Seite.<body>, jede in ihrer eigenen <section class="slide">.
Es gibt sechs Stufen von Überschriften, <h1> bis <h6>; meistens brauchst du nur die ersten drei. Eine Webseite hat genau eine <h1> für ihr Thema und <h2> für ihre Abschnitte. Auf einer Folie ist die <h2> die Überschrift der Folie.
<h2>Warum HTML?</h2> <p>HTML beschreibt den Inhalt einer Seite.</p> <p>CSS legt fest, wie dieser Inhalt aussieht.</p>
Zwischen zwei Absätzen entsteht von selbst etwas Abstand. Leere Zeilen im Code oder leere Absätze wie <p></p> machen keinen zusätzlichen Abstand; Abstände gestaltest du mit CSS (margin).
Eine Überschrift sollte sagen, worum es geht. Besser als ein einzelnes Wort ist oft eine kleine Aussage:
Nicht so gut:
<h2>HTML</h2>
Besser:
<h2>HTML beschreibt die Struktur</h2>
Manchmal soll innerhalb eines Absatzes eine neue Zeile beginnen, zum Beispiel bei einer Adresse. Dafür gibt es <br>, ohne schließendes Tag:
<p> Max Mustermann<br> Klasse 9b<br> Informatik </p>
<br> bricht nur die Zeile um; der Abstand zwischen Absätzen entsteht nicht. Brauchst du einen neuen Gedanken, nimm einen neuen Absatz.
Listen machen Inhalte übersichtlich. Es gibt zwei Arten:
<ul> (»unordered list«) für Stichpunkte,<ol> (»ordered list«) für eine nummerierte Liste, wenn die Reihenfolge zählt.Jeder einzelne Punkt steht in einem eigenen <li> (»list item«):
<h2>Meine Projektidee</h2> <ul> <li>🎮 Ein kleines Spiel programmieren</li> <li>🧭 Eine Spielfigur bewegen</li> <li>💎 Punkte sammeln</li> </ul>
Bei <ol> setzt der Browser die Nummern selbst davor. Schreib sie also nicht in den Text, sonst stimmen sie nicht mehr, sobald du einen Punkt einfügst:
<ol> <li>Repository klonen</li> <li>index.html öffnen</li> <li>Vorschau starten</li> </ol>
<li> gehört zwischen <ul> und </ul> (oder <ol> und </ol>). Stehen die Punkte außerhalb, versucht der Browser trotzdem etwas daraus zu machen, aber Abstände und Einrückung stimmen dann nicht mehr.
Manche Tags stehen mitten im Text und verändern nur ein paar Wörter:
<p>Speichere mit <strong>Strg + S</strong>, bevor du die Vorschau prüfst.</p> <p>Verwende Farben <em>sparsam</em>.</p> <p>Die Folien stehen in <code>index.html</code>.</p> <p>Fläche: A = a<sup>2</sup>, Wasser: H<sub>2</sub>O</p>
<strong> markiert etwas Wichtiges (meist fett).<em> betont ein Wort (meist kursiv).<code> markiert Code, Dateinamen und Befehle.<sup> stellt Text hoch, <sub> tief.Wenn alles hervorgehoben ist, fällt nichts mehr auf. Und auch diese Tags brauchen ihr schließendes Tag: Fehlt </strong>, ist der ganze Rest fett.
Willst du ein Tag im Text zeigen, statt es zu benutzen, schreibst du die spitzen Klammern anders: < für < und > für >.
<p>Eine Folie beginnt mit <code><section class="slide"></code>.</p>
Ohne diese Umschreibung würde der Browser wirklich eine neue Folie beginnen.
Das H in HTML steht für Hypertext: Seiten können auf andere Seiten verweisen. Ein Link ist ein <a>-Element; im Attribut href steht, wohin er führt:
<p> <a href="https://de.wikipedia.org/wiki/Axolotl">Mehr über Axolotl</a> </p> <p> Weiter zu <a href="zweite-seite.html">meiner zweiten Seite</a>. </p>
https:// führt zu einer anderen Webseite.zweite-seite.html führt zu einer Datei im selben Ordner. Das nennt man einen relativen Pfad.Ein Attribut wie href steht immer im öffnenden Tag, in der Form name="wert", mit Anführungszeichen.
Bevor ein Bild auf der Seite erscheinen kann, muss die Bilddatei in deinem Projekt liegen. In der Shower-Vorlage gibt es dafür den Ordner pictures; bei einer eigenen Webseite legst du Bilder neben index.html oder in einen eigenen Ordner wie bilder.
Verwende einfache Dateinamen: kleine Buchstaben, keine Leerzeichen, keine Umlaute, keine Sonderzeichen.
Gut:
fuji.jpg
Auch gut:
mount-fuji.webp
Eher schlecht:
Fuji Bild NEU!!!.JPG
| Format | Gut für | Endung |
|---|---|---|
| JPEG | Fotos; kleine Dateien |
.jpg, .jpeg
|
| PNG | Grafiken, Screenshots, durchsichtiger Hintergrund | .png |
| WebP | Fotos und Grafiken; meist kleiner als JPEG und PNG | .webp |
| SVG | Logos und Symbole; scharf in jeder Größe | .svg |
| GIF | einfache Animationen | .gif |
bild.png in bild.webp um, bleibt es ein PNG, nur mit falschem Namen. Umwandeln kannst du es weiter unten.
Liegt das Bild auf deinem Computer, ziehe es aus deinem Dateimanager in den Explorer von VS Code und lege es im richtigen Ordner ab:
Ein Bild im Browser kopierst du mit einem Rechtsklick und »Bild kopieren« (»Copy Image«):
Klicke dann im Explorer auf eine Datei im Zielordner und drücke StrgV. Je nach Browser musst du das Einfügen bestätigen:
Die neue Datei heißt meist image.png:
Unten stehen zwei wichtige Angaben: die Auflösung (hier 1280 × 1013 Pixel; zu kleine Bilder werden unscharf) und die Dateigröße (hier 1,92 MB; das ist für ein einzelnes Bild viel). Gib der Datei einen sinnvollen Namen und behalte die Endung:
Bilder aus der Zwischenablage werden als PNG gespeichert, und Fotos sind als PNG unnötig groß. Die Erweiterung »WebP Converter for VSCode« wandelt sie um: installieren, dann Rechtsklick auf die Datei und »Convert to WebP«:
»Lossless« behält jedes Pixel und eignet sich für Grafiken und Screenshots. »Lossy« verliert ein wenig Qualität und macht Fotos viel kleiner; 85 % sieht man kaum:
Aus 1,92 MB sind 180 kB geworden.
Liegt die Bilddatei im Projekt, fügst du sie mit <img> ein:
<h2>Der Fuji</h2> <img src="pictures/fuji.jpg" alt="Der Fuji vom Shōji-See aus gesehen" style="height: 300px;">
src (»source«) sagt, wo die Datei liegt: hier im Ordner pictures, relativ zur HTML-Datei.alt beschreibt, was das Bild zeigt (mehr dazu gleich).style="height: 300px;" macht das Bild 300 Pixel hoch; ohne das wäre es so groß wie die Datei. Mehr dazu unter Bildgröße.<img> hat keinen Inhalt und deshalb kein schließendes Tag.
Erscheint ein Bild nicht, liegt es fast immer am Pfad:
Fuji.JPG ist nicht fuji.jpg. Auf deinem Rechner geht es vielleicht trotzdem, auf dem Webserver nicht..jpg, .jpeg, .png, .webp)?Richtig:
<img src="pictures/fuji.jpg" alt="Der Fuji">
Falsch:
<img src="Fuji.jpg" alt="Der Fuji">
src auch die Adresse eines Bildes im Internet stehen (»Hotlinking«). Das ist praktisch zum Ausprobieren, aber das Bild verschwindet, wenn die fremde Seite es löscht, und ohne Internet fehlt es ganz. Für deine fertige Seite oder Präsentation gehört das Bild in deinen eigenen Ordner.
Den Alt-Text liest ein Screenreader Menschen vor, die das Bild nicht sehen, und der Browser zeigt ihn, wenn das Bild fehlt. Er sagt kurz, was das Bild zusätzlich zum Text vermittelt:
Gut:
alt="Ein rosa Axolotl in einem Aquarium"
Nicht hilfreich:
alt="Bild"
Schreib nicht »Bild von …«: Dass es ein Bild ist, weiß der Screenreader schon. Ist ein Bild nur Schmuck, ist ein leerer Alt-Text richtig: alt="".
Manchmal sollen mehrere Elemente zusammengehören, etwa eine Überschrift und eine Liste, die gemeinsam neben einem Bild stehen, oder ein Kasten mit Hintergrundfarbe. Dafür gibt es <div>: einen Bereich ohne eigene Bedeutung, nur zum Zusammenfassen.
<div class="kasten"> <h3>Merke</h3> <p>Ein div fasst Elemente zusammen.</p> </div>
Ohne CSS sieht man von einem <div> nichts. Erst mit einer Klasse und einer Regel wird es zum Kasten, zur Spalte oder zur Infokarte; wie das geht, steht unter CSS und Layout.
Für die großen Teile einer Webseite gibt es Bereiche mit Bedeutung: <header> für den Kopf, <main> für den Hauptinhalt, <section> für einen Abschnitt, <footer> für den Fuß. Sie verhalten sich wie <div>, sagen aber, was sie sind. In Shower ist jede Folie eine <section>.