Kurs:Die erste eigene Website/HTML

HTML - Eine Sprache des World Wide Web

HTML ist eine einfache Textdatei, in der zusätzlich Angaben für den Computer stehen. Die Abkürzung „HTML“ steht dabei für „HyperText Markup Language“.

Unter "Hypertext" versteht man einen Text, der mit einem anderen verknüpft ist. Daher nennt man das World Wide Web teilweise auch Netz. Die Verknüpfungen erfolgen u.A. durch Hyperlinks, in der Kurzform auch "Links" genannt.

HTML ist die Sprache, die du in diesem Kurs erlernen wirst. Mit ihr sagst du dem Computer, was ein Absatz sein soll und was eine Überschrift oder eine Liste ist. Und natürlich, an welcher Stelle und wie du gerne dein Bild oder dein Video eingebunden haben möchtest.

Seit neustem kann HTML auch mit SVG, einem Vektorgrafikenformat, oder MathML, einem Format für mathematische Formeln, erweitert werden.

Editor

Entsprechend benötigt man nur einen einfachen Texteditor, um die Dateien zu bearbeiten.

Es ist allerdings Vorteilhaft, wenn das Programm die einzelnen Bestandteile des Codes erkennt-das nennt man Interpreter. Sie beginnen mit

 <!--

und hören mit

-->

auf.

Kommentar

Kommentare sind dazu da, dass der Programmierer sich in seinem Code zurecht findet. Sie werden vom Interpreter ignoriert.

Dateiendung

HTML-Dokumente können unter verschiedenen Dateiendungen gespeichert werden. .html und .htm haben in etwa die gleiche Wirkung und können in jedem Fall verwendet werden, vorausgesetzt, dass das Betriebssystem mehr als 3-stellige Dateiendungen erlaubt.

Überschriften

Aufgabe:

Öffne einen Texteditor und kopiere Folgendes in das Fenster:
```
<h1>Hallo Welt!</h1>
```
Speichere diese Datei unter dem Namen hallo.html. Du kannst auch einen anderen Namen wählen. Wichtig ist dabei, dass die Dateiendung html lautet.
Öffne diese Datei mit mit einem Browser.

Ergebnis: Du siehst in etwa Folgendes:

Hallo Welt!

Erklärung: "<h1>" gibt an, dass nun eine Überschrift der Ebene 1, also eine Hauptüberschrift, beginnt und "</h1>" dass hier diese Überschrift zu Ende ist.

Merke: So etwas wie "<h1>" nennt man Tag ([[[:Vorlage:IPA]]], eingedeutscht [tɛk]).

Ein solches Tag beginnt immer mit einem Kleiner-Als-Zeichen: < und endet immer mit einem >. Fehlt eines der beiden Zeichen, zeigt der Browser das Dokument falsch an. Zu den meisten Tags (z.B.

) gibt es auch einen zweiten Tag- dieser beginnt mit </ . Du kannst auch Unterüberschriften verwenden: h2, h3, h4, h5 und h6. Schreibe nun Folgendes in das Textfeld und schaue es dir anschließend im Browser an:

 <h1>Das ist die Hauptüberschrift</h1>
  Hier steht was darüber
  <h2>Überschrift Stufe 2</h2>
   Bla, Bla
  <h2>Noch eine Überschrift</h2>

Das Grundgerüst

Allein so eine Überschrift ist aber noch kein gütiges HTML-Dokument. So sieht nämlich z.B. ein nach den Regeln des W3C gültiges HTML5-Dokument aus:

<!DOCTYPE html>
<html>
<head>
  <title>Beispiel</title>
</head>
<body>
  <p>Hallo Welt!</p>
</body>
</html>

Das ist schon komplizierter als nur so eine Überschrift, oder? Auch wenn es in der Praxis oft nur kopiert wird, sollte man wissen, was die einzelnen Teile bedeuten. Daher schauen wir uns das Grundgerüst mal genauer an:

Die Dokumenttypdefinition (DTD)

<!DOCTYPE html>

Die Dokumenttypdefinition gibt bei SGML und XML an, um was für ein Dokument es sich handelt. In diesem Beispiel gibt die DTD an, dass es sich um ein HTML-Dokument nach neuem Standard handelt. Wenn du die DTD weglässt, wird deine Seite weiterhin vom Browser angezeigt, aber er behandelt sie wie eine alte Webseite nach den alten Regeln, sodass deine Seite falsch dargestellt werden kann. Beginne jedes HTML-Dokument also auf jeden Fall mit „<!DOCTYPE html>“.

Das HTML-Tag

<html> ... </html>

Das HTML-Tag leitet die eigentliche Seite ein und darf auch am Ende des Dokuments als abschließendes Tag nicht vergessen werden.

Der Dateikopf

<head> ... </head>

Der Dateikopf ist das erste Element, das nach dem HTML-Tag folgt. Auch ist es wichtig, ihn am Ende mit </head> abzuschließen. In ihm stehen verschieden Elemente. Zum Beispiel:

<title>Beispiel</title>

Dieses Element gibt den Titel des Dokuments an und erscheint zum Beispiel in der Überschrift des Browsers, also bei Windows XP im Standard-Theme ist er blau hinterlegt.

Der Körperbereich

<body> ... </body>

Der Körperbereich ist der zweite große Abschnitt eines HTML-Dokuments. Er folgt immer nach dem Dateikopf. Alle Elemente, die in ihm stehen, kann man durch den Browser später sehen. So zum Beispiel auch unsere Überschrift, die wir am Anfang kennen gelernt haben.

Der Absatz

<p> ... </p>

Absätze werden in p-Tags geschrieben. Du kannst auch einfach ein leeres p-Tag (<p/>) schreiben, wenn du Platz zwischen zwei bestimmten Absätzen einfügen möchtest.

Aufgabe:: Speichere das Grundgerüst unter dem Namen grundgerüst.htm. (Du kannst aber natürlich auch einen anderen Namen wählen, da manche Webserver oder Webbrowser Probleme mit Umlauten haben.) Falls dir mal das Grundgerüst nicht einfallen sollte, kannst du es nun immer unter diesem Namen finden.

Attribute

Nun kannst du bereits Tags erstellen und kennst das Grundgerüst. Es gibt aber nicht nur Tags, die eine einfache Zeichenkombination wie h1, head, title oder body haben. Zusätzlich kann man den Tags auch noch weitere Informationen zuordnen. Eine mögliche Information ist beispielsweise die Zieladresse eines Links. Solche Informationen nennt man Attribute. Die Attribute werden innerhalb "<" und ">" geschrieben und durch ein oder mehr Leerzeichen vom Tag-Namen getrennt. Das sieht dann so aus: <Tagname Attribut>. Im Falle eines Links ist das passende Tag a. Das Attribut für die Zieladresse lautet href. Du kannst das folglich so schreiben:

<a href="http://www.wikipedia.org">Linktext</a>

Wie du siehst, enthält das Tag das Attribut mit dem Namen "href", welches durch ein Gleichheitszeichen (=) den Attributwert in Anführungsstrichen zugewiesen bekommt. In dem Fall ist der Attributwert die Adresse des Linkziels.

Dateiweite Einstellungen

Aufgabe:

Öffne einen Texteditor und schreib das Grundgerüst einer HTML-Datei hinein. In das <head>-Tag schreibst du folgendes:
```
<style type="text/css">h1, h2, h3, h4, h5, h6 { font-variant: small-caps; }</style>
```
Speichere diese Datei.
Öffne die Datei nun genau wie beim letzten Mal mit einem Browser.

Ergebnis: Die Buchstaben der Überschriften werden wie Großbuchstaben ausgegeben (Kapitälchen). Großbuchstaben, wie zum Beispiel bei Namen, werden noch größer angezeigt. Sie heben sich also ab.

Erklärung: Wenn bestimmte Eigenschaften für das gesammte Dokument gelten sollen, müssen sie in den <head>-Tag geschrieben werden.

Zur Erinnerung: Das ist der Bereich zwischen <head> und </head>. Da mehr als ein Leerzeichen und Zeilenumbrüche vom Browser ignoriert werden ist es egal ob du

<head><style type="text/css">h1, h2, h3, h4, h5, h6 { font-variant: small-caps; }</style></head>

oder

<head>
<style type="text/css">h1, h2, h3, h4, h5, h6 { font-variant: small-caps; }</style>
</head>

geschrieben hast.

So stellt man die Textfarbe für die gesamte Website ein:

<font style='color:#000000;'>
(in diesem Fall schwarz)

Wichtige Elemente

Textgestaltung

Textfarbe und linksbündig/zentriert/rechtsbündig einstellen kann man so:

<p style="color:blue; text-align:left;">Text</p>
(zentriert=center,rechtsbündig=right)

Hyperlinks

Das ist z.B. ein Link: Wikipedia. Du kannst einfach den Link anklicken und schon wird die entschprechende Seite aufgerufen. Der Tag eines Hyperlinks lautet a. Das Attribut, welches das Ziel angibt, href.

Beispiel:

<a href="http://www.wikipedia.org">Wikipedia</a>

Linkliste

Eine Linkliste könnte z.B. so aussehen:

<ul>
  <li><a href="http://www.wikipedia.org">Wikipedia</a></li>
  <li><a href="http://www.wikiversity.org">Wikiversity</a></li>
  <li><a href="http://www.wikibooks.org">Wikibooks</a></li>
</ul>

Bilder

Ein Bild fügst du so ein:

<img alt="Sonnenaufgang in Israel" src="https://upload.wikimedia.org/wikipedia/commons/4/4e/Sunsetinisrael.jpg" height="600" width="800">

Das alt-Attribut gibt die alternative Textbeschreibung (z.B. für Blinde) an, das src-Attribut ist der Platz für die Internetadresse des Bildes, height steht dabei für die Höhe des Bildes in CSS-Pixel und width entsprechend für die Breite.

Das Beispiel würde dann etwa so aussehen:

Tabellen

So sieht eine HTML-Tabelle aus:

<table>
  <tr>
    <th>Karotte</th>
    <th>Apfel</th>
    <th>Orange</th>
  </tr>
  <tr>
    <td>leicht süß, knackig</td>
    <td>süß-sauer, leicht knackig</td>
    <td>süß-sauer, saftig</td>
  </tr>
  <tr>
    <td>Provitamin A (β-Carotin)</td>
    <td>Vitamin C</td>
    <td>Vitamin C</td>
  </tr>
</table>

Das tr-Element steht dabei für table row, also eine Tabellenzeile, th steht für table header, den Tabellenkopf und td für table data, was die Tabellendaten sind.

Karotte	Apfel	Orange
leicht süß, knackig	süß-sauer, leicht knackig	süß-sauer, saftig
Provitamin A (β-Carotin)	Vitamin C	Vitamin C

Objekte (Musik, Filme, Flash usw.)

Bilder, Musik, Filme, Flash usw. kannst du mit dem object-Tag einbinden. Der Dateiname wird ins data-Attribut und der Mime-Typ mit type. Das Attribut type gibt an, um was für eine Datei es sich handelt, damit der Browser weiß, ob er jetzt einen Film oder ein Bild oder etwas Anderes darzustellen hat. Wenn du den MIME-Typ der Datei nicht kennst, kannst du ihn auch weglassen. Mit width und height wird die Anzeige-Größe eingestellt. Nach ein bischen Herumexperimentieren findest du sicher eine geeignete Größe für deine Datei. Zwischen <object> und </object> kannst du einen Text angeben, der erscheint, wenn die Datei nicht angezeigt werden konnte.

Beispiel:

<object data="http://upload.wikimedia.org/wikipedia/commons/7/7f/Mature_flower_diagram.svg" type="image/svg+xml" width="423" height="217"></object>

Tipp: Wenn du Hintergrund-Musik einbinden möchtest gibst du einfach width="0" height="0" an. Dann wird die Anzeige eines Musik-Spielers unterdrückt.

Weiter