Was ist eine Webseite?

Schau dir irgendeine Webseite im Internet an: Du siehst meist nicht mehr als Textstücke, Links und Bilder (oder Gifs oder Videos). Aber diese Elemente (Textstücke, Links und Bilder) erscheinen nicht einfach nacheinander in beliebiger Reihenfolge und Gestalt, nein: Sie erscheinen in einer bestimmten Struktur – im Idealfall wohlgeordnet, übersichtlich und schön gestaltet.

Eine Webseite ist also eine strukturierte und gestaltete Zusammenstellung von Text, Links und Bildern. Sie besteht mindestens aus einer HTML-Datei, also zum Beispiel index.html. Oft gehören auch Bilder und weitere Dateien dazu. Auch eine CSS-Datei gehört meistens zu einer Webseite.

Die Struktur einer Webseite legst du mit HTML fest. Mit CSS kann du das Erscheinungsbild dieser Struktur anpassen.

HTML-Grundlagen

HTML ist eine Auszeichnungssprache, das heisst eine Sprache, in der du Textstücke und andere Elemente auszeichnen bzw. markieren kannst. Durch diese Markierungen wird der Text strukturiert: Dies ist ein Titel, dies eine Überschrift, diese eine Liste etc.

HTML-Beispiel

Eine sehr einfache HTML-Datei sieht zum Beispiel so aus:

Beispiel.html

<html>
<head>
    <meta charset="UTF-8">
    <title>Meine HTML-Seite</title>
</head>
<body>
    <h1>Willkommen auf meiner Webseite</h1>
    <p>Dies ist ein <em>einfacher</em> Absatz.</p>
    <h2>Eine ungeordnete Liste:</h2>
    <ul>
        <li>Listenpunkt 1</li>
        <li>Listenpunkt 2</li>
        <li>Listenpunkt 3</li>
    </ul>
    <h2>Ein Bild:</h2>
    <img src="bild.jpg" alt="Mein Bild" width="200">
    <h2>Ein Link:</h2>
    <a href="https://www.example.com">Besuchen Sie diese Webseite</a>
</body>
</html>

Willkommen auf meiner Webseite

Dies ist ein einfacher Absatz.

Eine ungeordnete Liste:

Listenpunkt 1
Listenpunkt 2
Listenpunkt 3

Ein Bild:

Ein Link:

Besuchen Sie diese Webseite

HTML-Grundgerüst aus head und body

HTML besteht aus vielen Tags (Markierungen). Die meisten HTML-Elemente haben ein Start- und ein Endtag.

Der HTML-Kopf beginnt mit dem Starttag <head> und endet mit dem Endtag </head>. Er beinhaltet Einstellungen und zusätzliche Informationen, die nicht im Hauptfenster des Browsers angezeigt werden, z.B.:

<meta charset="UTF-8">: sorgt dafür, dass z.B. Umlaute ä,ö,ü richtig angezeigt werden.
<title>Meine HTML-Seite</title>: enthält den Titel der Seite (erscheint auf dem Tab im Browser).

Der HTML-Körper beginnt mit dem Starttag <body> und endet mit dem Endtag </body>. Dazwischen befindet sich der Inhalt der Website, also das, was im Hauptfenster des Browsers angezeigt wird.

HTML-Elemente

Es gibt zwei Arten von Elementen: Block-Elemente und Inline-Elemente. Einige Elemente haben Attribute.

Block-Elemente

Block-Elemente werden typischerweise untereinander angeordnet und nehmen die ganze verfügbare Breite ein. Sie können Text, andere Block-Elemente oder Inline-Elemente enthalten. Die wichtigsten Block-Elemente sind:

Blockelemente.html

<h1>Header 1 (Überschrift 1)</h1> 
<h2>Überschriften sind h1 bis h6</h2>
<p>Das Paragraph-Element dient zur Darstellung von Paragraphen (Absätzen).</p>
<p>Jeder Paragraph beginnt auf einer neuen Zeile.</p>
<ul>
  <li>Listenpunkt in einer unnummerierten Liste</li>
  <li>Listenpunkt in einer unnummerierten Liste</li>
</ul>
<ol>
  <li>Listenpunkt in einer nummerierten Liste</li>
  <li>Listenpunkt in einer nummerierten Liste</li>
</ol>

Header 1 (Überschrift 1)

Überschriften sind h1 bis h6

Das Paragraph-Element dient zur Darstellung von Paragraphen (Absätzen).

Jeder Paragraph beginnt auf einer neuen Zeile.

Listenpunkt in einer unnummerierten Liste
Listenpunkt in einer unnummerierten Liste

Listenpunkt in einer nummerierten Liste
Listenpunkt in einer nummerierten Liste

Inline-Elemente

Inline-Elemente fügen sich in den Textfluss einer Seite ein, ohne eine neue Zeile zu beginnen. Die wichtigsten Inline-Elemente sind:

Text kann <em>betont (en. emphasis)</em> oder <strong>stark betont</strong> werden. Der entsprechende Text wird kursiv bzw. fett dargestellt.

Text kann betont (en. emphasis) oder stark betont werden. Der entsprechende Text wird kursiv bzw. fett dargestellt.

Elemente mit Attributen

Gewisse Tags benötigen Attribute, um zusätzliche Informationen angeben zu können:

Hyperlinks (Tag: <a> für anchor) benötigen ein href Attribut (für hyper reference).

Dieser Text enthält einen 
<a href="http://ksr.ch">Link zur KSR</a>.

Dieser Text enthält einen Link zur KSR.

Bilder werden mit dem <img> Tag eingebettet, wobei der Dateiname bzw. Pfad¹⁾ des Bilds im src-Attribut angegeben werden. Weil der Bild-Tag keinen Inhalt hat, braucht er auch keinen End-Tag; stattdessen wird der Tag gleich mit einem Schrägstrich geschlossen:

<img src="tigerente.jpg" width="200" />

¹⁾

Mit dem Attribut src (source) gibt man den Pfad zum Bild an. Befindet sich das Bild im gleichen Ordner wie die index.html Datei, so kann man einfach den Namen des Bildes inkl. Dateiendung (typischerweise .jpg oder .png) angeben.

Inhaltsverzeichnis

HTML