**Dies ist eine alte Version des Dokuments!**
HTML
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 die 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 WebseiteHTML-Grundgerüst aus head und body
HTML besteht aus vielen Tags. Die meisten HTML-Elemente haben einen Start- und einem 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
<p>Das Paragraph-Element dient zur Darstellung von Paragraphen (Absätzen).</p> <p>Jeder Paragraph beginnt auf einer neuen Zeile.</p> <h1>Header 1 (Überschrift 1)</h1> <h2>Überschriften sind h1 bis h6</h2> <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>
Das Paragraph-Element dient zur Darstellung von Paragraphen (Absätzen).
Jeder Paragraph beginnt auf einer neuen Zeile.
Header 1 (Überschrift 1)
Überschriften sind h1 bis h6
- 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:
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).
Bilder werden mit dem <img> Tag eingebettet, wobei der Dateiname bzw. Pfad1) 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" />
hof