Informatik@GRG11

Appearance

🌐 HTML-Grundlagen und wichtige Tags ​

Webseiten strukturieren und Inhalte beschreiben ​

Einstieg: Worum geht es in diesem Kapitel? ​

Wenn du eine Website im Browser öffnest, siehst du eine fertige Oberfläche: Texte, Bilder, Links, Menüs, Tabellen oder eingebettete Inhalte. Der Browser zeigt diese Oberfläche aber nicht einfach „von selbst“ an. Er verarbeitet verschiedene Ressourcen, zum Beispiel HTML, CSS, Bilder und manchmal JavaScript.

In diesem Kapitel geht es um HTML. HTML steht für HyperText Markup Language. Es handelt sich nicht um eine Programmiersprache wie Python, sondern um eine Auszeichnungssprache. HTML beschreibt, welche Inhalte auf einer Webseite vorkommen und welche Bedeutung sie haben: Überschrift, Absatz, Liste, Link, Bild, Tabelle oder Bereich.

CSS kommt später dazu. Während HTML die Struktur beschreibt, ist CSS für die Gestaltung zuständig.

Merksatz

HTML strukturiert Inhalte. CSS gestaltet ihre Darstellung.

Grundbegriffe: Website, Webseite und HTML-Dokument ​

Was ist ein HTML-Dokument? ​

Ein HTML-Dokument ist die technische Grundlage vieler Webseiten. Es ist eine Datei mit der Endung:

text
.html

Ein häufiger Dateiname ist:

text
index.html

Der Name index.html ist wichtig, weil Webserver diese Datei oft automatisch als Startdokument eines Ordners ausliefern. Wenn du später einen Ordner auf einen Webspace hochlädst, ist index.html häufig die Datei, die beim Aufruf der Adresse zuerst angezeigt wird.

Wenn du ein HTML-Dokument lokal im Browser öffnest, interpretiert der Browser den enthaltenen HTML-Code und stellt daraus eine Webseite dar. Dabei geht es nicht nur darum, etwas sichtbar zu machen, sondern Inhalte sinnvoll zu strukturieren.

Wichtig

Eine Webseite besteht im Browser oft aus mehreren Ressourcen. HTML liefert die Struktur, CSS die Gestaltung, Bilder und andere Dateien ergänzen den Inhalt.

Website, Webseite und HTML-Dokument ​

Im Alltag werden die Begriffe Website und Webseite oft ähnlich verwendet. Technisch kann man sie genauer unterscheiden.

Eine Website ist der gesamte Webauftritt, zum Beispiel eine Schulwebsite, ein Nachrichtenportal oder ein persönliches Portfolio.

Eine Webseite ist eine einzelne Seite innerhalb einer Website, zum Beispiel die Startseite, eine Kontaktseite oder ein einzelner Artikel.

Ein HTML-Dokument ist eine Datei, die die Struktur einer solchen Webseite enthalten kann.

Eine einfache Projektstruktur könnte so aussehen:

text
website/
├─ index.html
├─ kontakt.html
├─ style.css
└─ images/
   └─ logo.png

index.html könnte die Startseite sein, kontakt.html eine weitere Webseite. Die Datei style.css enthält später CSS-Regeln für die Gestaltung. Im Ordner images liegen Bilddateien.

Aufbau: Die Grundstruktur einer HTML-Seite ​

Eine einfache HTML-Seite sieht so aus:

html
<!DOCTYPE html>
<html>
  <head>
    <title>Meine erste Website</title>
  </head>
  <body>
    <h1>Hallo Welt!</h1>
    <p>Das ist meine erste HTML-Seite.</p>
  </body>
</html>

Der Browser liest diese Datei und interpretiert die Struktur. Nicht alles davon ist später direkt sichtbar. Manche Teile liefern dem Browser Informationen über die Seite, andere Teile enthalten den sichtbaren Inhalt.

<!DOCTYPE html> ​

Ganz oben steht:

html
<!DOCTYPE html>

Diese Zeile sagt dem Browser, dass es sich um ein modernes HTML-Dokument handelt. Sie wird nicht auf der Website angezeigt, ist aber wichtig, damit der Browser das Dokument korrekt interpretiert.

<html> ​

Das Element <html> umschließt die gesamte HTML-Seite:

html
<html>
  ...
</html>

Alles, was zur HTML-Seite gehört, steht innerhalb dieses Elements.

<head> und <body> ​

Eine HTML-Seite besteht grob aus zwei wichtigen Bereichen: head und body.

Im head stehen Informationen über die Webseite. Diese Informationen sieht man meistens nicht direkt im Seiteninhalt. Dazu gehören zum Beispiel der Titel des Browser-Tabs, technische Angaben oder später die Verbindung zu einer CSS-Datei.

Im body steht alles, was auf der Webseite sichtbar sein soll: Überschriften, Texte, Bilder, Links, Listen, Tabellen oder eingebettete Inhalte.

html
<head>
  <title>Seitentitel im Browser-Tab</title>
</head>

<body>
  <h1>Sichtbare Überschrift</h1>
  <p>Sichtbarer Absatz.</p>
</body>

Merkhilfe

Der head enthält Informationen über die Seite. Der body enthält den sichtbaren Inhalt der Seite.

Bausteine: Tags und Attribute ​

Was sind Tags? ​

HTML arbeitet mit sogenannten Tags. Tags markieren, welche Bedeutung ein Inhalt hat.

Ein Absatz sieht zum Beispiel so aus:

html
<p>Das ist ein Absatz.</p>

<p> öffnet den Absatz. </p> schließt ihn wieder.

Viele HTML-Elemente bestehen aus einem öffnenden und einem schließenden Tag:

html
<h1>Eine Überschrift</h1>
<p>Ein Absatz</p>
<strong>Wichtiger Text</strong>

Häufiger Fehler

Wenn ein schließendes Tag fehlt oder Tags falsch verschachtelt sind, kann der Browser die Seite trotzdem anzeigen. Das Ergebnis ist aber nicht immer zuverlässig oder fachlich korrekt.

Attribute ​

Manche Tags brauchen zusätzliche Informationen. Diese Zusatzinformationen heißen Attribute.

Ein Link braucht zum Beispiel ein Ziel:

html
<a href="https://www.orf.at">ORF öffnen</a>

Das Attribut href gibt an, wohin der Link führt.

Ein Bild braucht eine Quelle und eine Beschreibung:

html
<img src="images/logo.png" alt="Logo der Website">

Das Attribut src gibt an, wo das Bild liegt. Das Attribut alt beschreibt das Bild.

Wichtig

Attribute stehen im öffnenden Tag. Sie liefern zusätzliche Informationen zu einem HTML-Element.

Wichtige HTML-Tags ​

Überschriften: h1 bis h6 ​

Überschriften strukturieren eine Webseite. HTML kennt sechs Ebenen:

html
<h1>Hauptüberschrift</h1>
<h2>Unterüberschrift</h2>
<h3>Kleinere Überschrift</h3>
<h4>Noch kleinere Überschrift</h4>
<h5>Weitere Ebene</h5>
<h6>Kleinste Überschrift</h6>

h1 ist die wichtigste Überschrift einer Seite. Danach folgen h2, h3 usw.

Gute Praxis

Verwende Überschriften nicht nur, weil sie größer oder kleiner aussehen. Verwende sie, um Inhalte sinnvoll zu gliedern.

Absätze: p ​

Normale Textabschnitte schreibt man mit dem p-Tag:

html
<p>Das ist ein Absatz mit normalem Text.</p>

Absätze helfen dabei, längere Inhalte lesbarer zu machen.

Zeilenumbruch: br ​

Ein Zeilenumbruch kann mit br eingefügt werden:

html
<p>Erste Zeile<br>Zweite Zeile</p>

br hat kein schließendes Tag.

Achtung

Verwende br nicht, um ganze Seiten optisch zu gestalten. Für Abstände und Layout ist später CSS zuständig.

Hervorhebungen: strong und em ​

Mit strong markierst du wichtigen Text:

html
<p>Das ist <strong>besonders wichtig</strong>.</p>

Mit em betonst du Text:

html
<p>Das ist <em>betont</em> formuliert.</p>

Im Browser sieht strong meistens fett aus und em meistens kursiv. Wichtig ist aber nicht nur das Aussehen, sondern die Bedeutung: HTML beschreibt, welche Rolle ein Text hat.

Listen: ul, ol und li ​

Listen sind sinnvoll, wenn mehrere Punkte zusammengehören.

Eine ungeordnete Liste verwendet ul:

html
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Eine geordnete Liste verwendet ol:

html
<ol>
  <li>Datei erstellen</li>
  <li>Code schreiben</li>
  <li>Im Browser öffnen</li>
</ol>

Die einzelnen Listenelemente stehen jeweils in li.

Merkhilfe

ul steht für eine Liste ohne feste Reihenfolge. ol steht für eine nummerierte Liste mit Reihenfolge. li steht für einen einzelnen Listenpunkt.

Links verbinden Webseiten miteinander oder führen zu anderen Websites.

html
<a href="https://www.orf.at">Zur ORF-Website</a>

Der sichtbare Text steht zwischen öffnendem und schließendem Tag. Das Ziel steht im Attribut href.

Ein Link kann auch auf eine lokale Datei zeigen:

html
<a href="kontakt.html">Kontaktseite öffnen</a>

Bilder: img ​

Bilder werden mit img eingebunden:

html
<img src="images/bild.png" alt="Beschreibung des Bildes">

Das img-Tag hat kein schließendes Tag.

Das Attribut src gibt den Pfad zur Bilddatei an. Das Attribut alt beschreibt das Bild. Dieser Alternativtext ist wichtig, wenn das Bild nicht geladen werden kann oder wenn Menschen Hilfstechnologien wie Screenreader verwenden.

Typischer Fehler

Wenn ein Bild nicht angezeigt wird, liegt es oft an einem falschen Pfad im src-Attribut.

Tabellen: table, tr, th und td ​

Tabellen verwendet man für geordnete Daten. Eine einfache Tabelle sieht so aus:

html
<table>
  <tr>
    <th>Name</th>
    <th>Alter</th>
  </tr>
  <tr>
    <td>Alex</td>
    <td>16</td>
  </tr>
  <tr>
    <td>Sam</td>
    <td>17</td>
  </tr>
</table>

table beschreibt die Tabelle. tr steht für eine Tabellenzeile. th steht für eine Tabellenüberschrift. td steht für eine normale Tabellenzelle.

Hinweis

Tabellen sind für Daten gedacht, nicht für das Layout einer ganzen Website.

Eingebettete Inhalte: iframe ​

Mit einem iframe können Inhalte von einer anderen Seite eingebettet werden, zum Beispiel eine Karte, ein Video oder ein anderes Webdokument.

html
<iframe src="https://example.com" width="600" height="400"></iframe>

Das kann praktisch sein, sollte aber bewusst verwendet werden. Eingebettete Inhalte kommen von einer anderen Quelle und können Datenschutz, Sicherheit oder Ladezeiten beeinflussen.

Achtung

Nicht jeder fremde Inhalt darf einfach eingebettet werden. Außerdem können eingebettete Inhalte Daten übertragen oder Cookies setzen.

Bereiche: div ​

Das div-Element ist ein allgemeiner Container:

html
<div>
  <h2>Über mich</h2>
  <p>Hier steht ein kurzer Text.</p>
</div>

Ein div hat zunächst keine besondere sichtbare Wirkung. Es hilft aber, Inhalte zu gruppieren. Später wird das besonders für CSS wichtig, weil ganze Bereiche gemeinsam gestaltet werden können.

Neben div gibt es Elemente, die eine Bedeutung für die Seitenstruktur haben:

html
<header>
  <h1>Meine Website</h1>
</header>

<main>
  <p>Hier steht der Hauptinhalt.</p>
</main>

<footer>
  <p>Kontakt und Impressum</p>
</footer>

header enthält häufig den Kopfbereich einer Seite. main enthält den Hauptinhalt. footer enthält häufig den Fußbereich.

Diese Elemente helfen dabei, eine Website klarer zu strukturieren.

Arbeiten im Dateisystem ​

Dateinamenerweiterungen anzeigen ​

Eine Webseite entsteht nicht nur im Browser. Du arbeitest zuerst im Dateisystem deines Computers. Deshalb ist es wichtig, Ordner, Dateinamen und Dateiendungen bewusst zu verwenden.

Windows blendet Dateiendungen manchmal aus. Das ist beim Arbeiten mit HTML problematisch, weil du genau sehen musst, ob eine Datei wirklich index.html heißt.

Öffne den Explorer und aktiviere:

text
Ansicht → Anzeigen → Dateinamenerweiterungen

Danach solltest du Endungen wie .html, .css, .png oder .jpg sehen.

Typischer Fehler

Wenn Dateinamenerweiterungen ausgeblendet sind, kann leicht eine Datei wie index.html.txt entstehen. Diese Datei ist dann keine echte HTML-Datei.

Projektordner vorbereiten ​

Lege in deinem Ordner Dokumente einen neuen Ordner an:

text
html-einstieg

In diesem Ordner erstellst du folgende Struktur:

text
html-einstieg/
├─ index.html
└─ images/

Der Ordner images bleibt zunächst leer oder enthält später ein Bild, das du in deine Webseite einbindest.

Notepad++ verwenden ​

Öffne index.html mit Notepad++.

Notepad++ ist für diese Aufgabe sinnvoll, weil du den Code als Text bearbeiten kannst und durch Syntaxhervorhebung leichter erkennst, ob dein HTML sinnvoll aufgebaut ist.

Hinweis

Ein Textverarbeitungsprogramm wie Word ist für HTML-Code ungeeignet, weil es zusätzliche Formatierungsinformationen speichert. Wir brauchen reinen Text.

Challenges ​

🌐 Challenge 1: Projektordner und Grundgerüst erstellen ​

Du erstellst eine erste HTML-Datei und bereitest den Projektordner so vor, dass später Bilder und CSS-Dateien sauber ergänzt werden können.

Aufgabe ​

  1. Öffne den Explorer.
  2. Aktiviere Dateinamenerweiterungen.
  3. Lege in deinem Ordner Dokumente einen neuen Ordner an:
text
html-einstieg
  1. Erstelle darin einen Unterordner:
text
images
  1. Erstelle im Ordner html-einstieg eine Datei:
text
index.html
  1. Öffne index.html mit Notepad++.
  2. Ergänze ein gültiges HTML-Grundgerüst.

Mindestanforderung ​

Deine Datei muss enthalten:

  • <!DOCTYPE html>
  • <html>
  • <head>
  • <title>
  • <body>
  • eine sinnvolle Überschrift
  • den Rohtext aus der Angabe

Rohtext ​

Füge diesen Text zunächst unstrukturiert in den <body> ein:

text
Informatik ist überall. Sie steckt nicht nur in Computern, sondern auch in Smartphones, Smartwatches, Autos, Bankomaten, Navigationssystemen, Streamingdiensten, sozialen Netzwerken und manchmal sogar in Kühlschränken, die der Meinung sind, sie müssten mit dem Internet sprechen. Dabei geht es in der Informatik nicht nur darum, Programme zu schreiben. Es geht auch darum, Probleme zu verstehen, Informationen zu ordnen, Abläufe zu beschreiben und gute Lösungen zu finden.

Ein Computer ist dabei ziemlich schnell, aber nicht besonders nachsichtig. Wenn ein Mensch sagt: Mach das ungefähr so, kann ein anderer Mensch meistens erraten, was gemeint ist. Ein Computer kann das nicht. Er braucht genaue Anweisungen. Ein vergessener Buchstabe, eine falsche Klammer oder ein fehlendes Zeichen kann schon reichen, damit etwas nicht funktioniert. Das ist manchmal mühsam, aber auch hilfreich: Man lernt sehr genau zu denken.

HTML ist ein gutes Beispiel dafür. Eine Webseite sieht im Browser vielleicht übersichtlich und einfach aus. Im Hintergrund besteht sie aber aus einer Struktur. Überschriften, Absätze, Listen, Links und Bilder haben im Code jeweils eine bestimmte Bedeutung. Der Browser liest diese Struktur und stellt daraus eine sichtbare Seite dar. Wenn die Struktur sauber ist, kann die Seite besser verstanden, gestaltet und später erweitert werden.

CSS kommt später dazu und sorgt dafür, dass die Seite nicht aussieht wie ein sehr trauriger digitaler Zettel. Mit CSS kann man Farben, Schriftgrößen, Abstände und Layouts verändern. HTML und CSS arbeiten also zusammen: HTML beschreibt die Inhalte, CSS gestaltet sie.

Auch künstliche Intelligenz verändert die Arbeit mit Websites. Eine KI kann heute in wenigen Sekunden HTML und CSS erzeugen. Das ist beeindruckend, aber es bedeutet nicht, dass man nichts mehr verstehen muss. Wer HTML und CSS kennt, kann besser beurteilen, ob der erzeugte Code sinnvoll ist, Fehler finden und die Seite an eigene Ideen anpassen. Kurz gesagt: KI kann helfen, aber denken muss weiterhin jemand. Im Idealfall nicht der Kühlschrank.

Hinweis

In dieser Challenge geht es zuerst um eine technisch gültige HTML-Datei. Die inhaltliche Struktur verbesserst du in der nächsten Challenge.

🌐 Challenge 2: Rohtext in eine echte HTML-Seite verwandeln ​

Du strukturierst den Rohtext aus Challenge 1 mit passenden HTML-Tags. Die Seite soll danach nicht nur sichtbar sein, sondern fachlich sinnvoll gegliedert wirken.

Aufgabe ​

Bearbeite den Inhalt innerhalb des <body>.

Verwende mindestens:

  • eine Hauptüberschrift mit h1
  • mehrere Zwischenüberschriften mit h2
  • mehrere Absätze mit p
  • eine ungeordnete Liste mit ul und li
  • eine geordnete Liste mit ol und li
  • mindestens eine Hervorhebung mit strong
  • mindestens eine Betonung mit em
  • mindestens einen Link mit a

Strukturierungshilfe ​

Überlege zuerst, bevor du Tags setzt:

  • Welche Textteile gehören in eigene Absätze?
  • Welche Zwischenüberschriften passen zu den Abschnitten?
  • Welche Begriffe oder Aussagen sind wirklich wichtig?
  • Welche Aufzählung eignet sich für ul?
  • Welcher Ablauf eignet sich für ol?
  • Welcher Link passt sinnvoll zum Thema?

Unvollständiges Beispiel ​

Dieses Beispiel zeigt nur das Prinzip. Übertrage es nicht einfach unverändert, sondern strukturiere deinen eigenen Text sinnvoll.

html
<h1>...</h1>

<h2>...</h2>
<p>
  ...
</p>

<ul>
  <li>...</li>
  <li>...</li>
</ul>

<ol>
  <li>...</li>
  <li>...</li>
</ol>

Wichtig

Verwende HTML-Tags nicht nur, damit etwas größer oder fetter aussieht. Verwende sie, weil sie dem Inhalt eine Bedeutung geben.

🌐 Challenge 3: Tabelle, Bild und Pfade ergänzen ​

Du erweiterst deine Seite um geordnete Daten und ein Bild. Dabei achtest du besonders auf sinnvolle Pfade und passende Attribute.

Aufgabe ​

Ergänze deine Seite um:

  • eine Tabelle mit mindestens drei Datenzeilen
  • ein Bild im Ordner images
  • einen passenden Alternativtext mit alt
  • mindestens einen internen oder externen Link

Tabelle ​

Wähle ein Thema, das zu deiner Seite passt, zum Beispiel:

  • HTML-Tags und ihre Aufgabe
  • Geräte oder Dienste, in denen Informatik vorkommt
  • Webtechniken und ihre Funktion
  • KI-Unterstützung und notwendige Eigenleistung

Unvollständiges Tabellen-Gerüst:

html
<table>
  <tr>
    <th>...</th>
    <th>...</th>
    <th>...</th>
  </tr>
  <tr>
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr>
  <tr>
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr>
</table>

Bild ​

Speichere ein Bild im Ordner images und binde es mit einem relativen Pfad ein.

html
<img src="images/..." alt="...">

Teste danach bewusst, was passiert, wenn Dateiname, Ordnername oder Dateiendung nicht stimmen. Korrigiere den Pfad anschließend wieder.

Wichtig

Tabellen sind für Daten gedacht, nicht für das Layout einer ganzen Website. Bilder brauchen einen sinnvollen alt-Text und müssen am richtigen Ort gespeichert sein.

🌐 Challenge 4: Fehler finden, prüfen und Mini-Abgabe vorbereiten ​

Du liest HTML-Code kritisch, prüfst deine eigene Seite und bereitest eine saubere Mini-Abgabe vor.

Fehlercode untersuchen ​

Der folgende Code enthält mehrere typische Fehler. Untersuche ihn und korrigiere ihn in einer eigenen Testdatei oder unterhalb deiner bisherigen Seite.

html
<h1>Meine Website<h1>

<p>HTML beschreibt die Struktur einer Webseite.

<ul>
  <li>Überschriften
  <li>Absätze</li>
  <li>Listen</li>
</ul>

<a href=https://www.orf.at>ORF öffnen</a>

<img src="images/logo.png">

Achte besonders auf:

  • öffnende und schließende Tags
  • Anführungszeichen bei Attributen
  • vollständig geschlossene Absätze
  • Listenelemente
  • sinnvolle Bildbeschreibung mit alt

Validator ​

Prüfe deine eigene Seite mit dem W3C Markup Validation Service:

text
https://validator.w3.org/

Nutze dort zum Beispiel:

  • Validate by File Upload
  • oder Validate by Direct Input

Korrigiere formale Fehler Schritt für Schritt.

Mini-Abgabe ​

Am Ende soll dein Ordner ungefähr so aussehen:

text
html-einstieg/
├─ index.html
└─ images/
   └─ dein-bild.png

Deine index.html soll enthalten:

  • vollständige HTML-Grundstruktur
  • sinnvoller Titel im head
  • sichtbarer Inhalt im body
  • Überschriften
  • Absätze
  • Listen
  • Link
  • Bild oder Bildplatzhalter
  • Tabelle
  • möglichst keine Validator-Fehler

Abgabe-Check

Öffne deine Datei im Browser und prüfe sie danach im Validator. Erst wenn beides sinnvoll aussieht, gilt deine Seite als fertig.

Wissensspeicher ​

Wichtige Begriffe

HTML Auszeichnungssprache zur Strukturierung von Webseiten.

HTML-Dokument Datei mit der Endung .html, die HTML-Code enthält.

index.html Häufig verwendetes Startdokument eines Ordners oder einer Website.

Website Gesamter Webauftritt mit mehreren Seiten und Ressourcen.

Webseite Einzelne Seite innerhalb einer Website.

Tag HTML-Baustein, zum Beispiel <p> oder <h1>.

Attribut Zusatzinformation in einem HTML-Element, zum Beispiel href, src oder alt.

head Bereich für Informationen über die Seite.

body Bereich für sichtbare Inhalte.

Pfad Weg zu einer Datei, zum Beispiel images/bild.png.

Browser Programm, das HTML, CSS und weitere Ressourcen interpretiert und darstellt.

Validator Werkzeug zur Prüfung, ob HTML formal korrekt aufgebaut ist.

Abschlussgedanke ​

HTML ist nicht einfach „Text im Browser“. HTML ist die strukturelle Grundlage einer Webseite. Je sauberer diese Struktur ist, desto leichter lässt sich die Seite später gestalten, erweitern, prüfen und veröffentlichen.