HTML/Tutorials/HTML-Einstieg/Kapitel2

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Grundgerüst einer HTML-Seite

Um nun richtig anfangen zu können, beginnen Sie mit einer Textdatei, die folgenden Inhalt hat:

Beispiel: für eine sehr einfache HTML-Datei ansehen …
<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>Beschreibung der Seite (erscheint in der Titelzeile des Browsers)</title>
  </head>
  <body>
    <p>Dieser Text wird im Browserfenster angezeigt.</p>
  </body>
</html>

Wenn Sie beim Anblick dieser HTML-Datei denken: „Das ist aber schön bunt!“ – und vielleicht sogar ein wenig enttäuscht sind, dass es bei Ihnen nicht so aussieht, keine Sorge! So oder so ähnlich sieht es aus, wenn eine HTML-Datei von einem richtigen HTML-Editor, also einem speziellen Programm zur Anzeige von HTML-Dateien, dargestellt wird. Die einzelnen Bestandteile einer HTML-Datei, die Sie im Laufe dieses Kurses erst noch kennenlernen werden, sind damit zur besseren Unterscheidung farblich gekennzeichnet.

Wenn Sie jedenfalls obiges Grundgerüst in allen Einzelheiten erklärt haben wollen, dann lesen Sie bitte Grundgerüst einer HTML-Datei.

Doctype

Mit der ersten Zeile <!doctype html> sagen Sie dem Browser: „Ich versuche, mich an den HTML-Standard zu halten, versuch du bitte dasselbe!“ Das im Browser sichtbare Ergebnis wird davon nicht unbedingt immer beeinflusst; dennoch ist es allgemein empfehlenswert, die Zeile einfach so zu übernehmen, wie sie ist.

Tags und Elemente

Bestimmt sind Ihnen schon diese spitzen Klammern aufgefallen. Die sind typisch für HTML. Welche Angabe Sie auch immer machen: Wenn Sie möchten, dass der Browser Sie versteht, müssen diese Klammern drumherum stehen. So heißt die Angabe <html>: Hier fängt der HTML-Bereich an.

Die letzte Angabe ganz unten mit dem Schrägstrich darin </html> sagt dem Browser, dass der HTML-Bereich hier zu Ende ist. Und auch dieses System zieht sich durch HTML und bleibt sehr verlässlich so. Es gibt zwar ein paar Ausnahmen, aber darum kümmern wir uns jetzt einfach erst einmal nicht. Wir merken uns: Spitze Klammern mit einer Bezeichnung drin – Anfang. Spitze Klammern mit einem Schrägstrich und derselben Bezeichnung drin – Ende.

Das englische to tag something bedeutet „etwas markieren“ oder „etwas kennzeichnen“, und so spricht man bei HTML von Tags. <html> ist also ein öffnendes Tag, und </html> ist ein schließendes Tag – beide zusammen „kennzeichnen“ den HTML-Bereich. Damit Screenreader den Inhalt nicht z.B. auf Englisch ausprechen, wird ein lang="de"-Attribut hinzugefügt.

Nun müssen wir aber endlich zu einem häufig gebrauchten Fachbegriff kommen, bevor wir uns noch was Falsches angewöhnen: Der HTML-Profi spricht nicht von „Bereichen“, sondern von „Elementen“. Wir sagen also nicht mehr „HTML-Bereich“, sondern „HTML-Element“.

Nun können HTML-Elemente auch ineinander verschachtelt sein, d.h. ein Element befindet sich innerhalb eines anderen Elements. Das ist bei HTML ganz normal – auch bei unserer kleinen Beispielseite oben. Das HTML-Element beispielsweise enthält noch zwei weitere Elemente, nämlich head und body („Kopf“ und „Körper“).

Weitere Einzelheiten zum Prinzip der Textauszeichnung in HTML gibt es unter HTML/Regeln/Textauszeichnung.

head

Das head-Element (der „Kopf“) enthält Angaben über das folgende Dokument; der eigentliche Inhalt, also das, was der Browser letztlich anzeigen soll, folgt später im body-Element (im „Körper“).

Zwischen die Tags <head> und </head> notieren Sie jetzt einige Angaben, die dem Browser helfen, das Dokument auf den Bildschirm zu zaubern.

Zeichenkodierung

Los geht's mit der Zeichenkodierung. Es gibt verschiedene Zeichenkodierungen, aber heute nimmt man üblicherweise UTF-8, weil damit die meisten Anwendungsfälle abgedeckt sind. Geradezu erschlagen werden Sie mit ausführlichen Informationen dazu auf der Seite Zeichenkodierung. Sie notieren UTF-8 jedenfalls folgendermaßen:

Beispiel: für die Angabe der Zeichenkodierung
<meta charset="utf-8">

Danach folgt noch der Titel, und schon endet das head-Element, und das body-Element beginnt (keine Sorge – was da drin steht, wird in diesem Tutorial noch ausführlichst erläutert). Man kann natürlich noch viel mehr in das head-Element packen wenn man möchte, aber das ist ja unsere erste Beispielseite, also beschränken wir uns auf das Allernötigste.

Übrigens: Ganz viele Details zum Kopf einer HTML-Datei finden Sie unter HTML/Kopfdaten.

Achten Sie bitte darauf, die Datei jetzt auch tatsächlich in dieser Zeichenkodierung (UTF-8) abzuspeichern. Der Texteditor sollte dazu eine Möglichkeit bieten, wenn Sie z.B. „Speichern unter …“ anwählen.

Spitze Klammern piken – Sonderzeichen richtig einfügen

Ein Problem, das Ihnen an dieser Stelle einfallen könnte, ist: Was mache ich eigentlich, wenn ich in meinem normalen Text spitze Klammern brauche? Sehr gute Frage! Denn wie Sie sich wahrscheinlich vorstellen können, kann zumindest eine öffnende spitze Klammer sehr schnell den Browser durcheinanderbringen, weil der Browser nun ein Tag erwartet. Die Lösung besteht darin, solche Zeichen wie die spitzen Klammern (sowohl die öffnende als auch die schließende) und nebenbei gesagt auch das kaufmännische Und (&), die in HTML eine besondere Bedeutung haben, zu maskieren, also durch bestimmte andere Zeichen zu ersetzen. Da wir in unserem Text keine spitzen Klammern und auch kein kaufmännisches Und (auch englisch als ampersand bezeichnet) brauchen, wollen wir Sie mit diesem Problem zwar nicht weiter behelligen, verweisen Sie aber gerne auf den Abschnitt HTML/Regeln/Zeichenvorrat und HTML-eigene Zeichen#HTML-eigene Zeichen maskieren, wo die Lösung derartiger Probleme aufgezeigt wird.

Der Titel des Dokuments

Jede HTML-Datei muss einen Titel erhalten. Dieser Titel dient in der Praxis mehreren Zwecken, aber solange Sie die Seiten nur zum Lernen und Ausprobieren auf Ihrem eigenen Computer entwickeln und testen, wird für Sie erstmal wichtig sein, dass der Titel im Browser in der Titelzeile des Anzeigefensters bzw. Karteireiters (Tab) angezeigt wird. So könnte dies beispielsweise bei der Schreinerei Meier aussehen (Bilder anklicken zum Vergrößern):

Später, wenn Ihre HTML-Datei aus dem Internet erreichbar sein wird, bekommt der Titel einer HTML-Seite sogar noch größere Bedeutung:

  • Der Titel der Datei wird vom Web-Browser beim Setzen von Lesezeichen (Bookmarks, Favoriten) auf die Datei verwendet.
  • Der Titel der Datei wird im Web-Browser in der Liste der bereits besuchten Seiten (Verlauf) angezeigt.
  • Der Titel der Datei dient im Web vielen automatischen Suchprogrammen als wichtige Informationsquelle, so dass Ihre HTML-Seiten leichter von Interessenten mit einer Suchmaschine wie z.B. Google gefunden werden kann, sofern Sie sinnvolle Titel für Ihre HTML-Seiten vergeben haben.
  • Suchergebnis-Beispiel (Anklicken zum Vergrößern)
    Wenn die Datei zu den Suchtreffern einer Suche gehört, bieten viele Suchmaschinen den Titel der Datei als anklickbaren Verweis an. Das Bild an der rechten Seite zeigt, wie so ein Suchergebnis aussehen kann: Die Zeile „Schreinerei Meier, Dingenskirchen“ kann im Suchergebnis also angeklickt werden, um auf die Homepage der Schreinerei Meier zu gelangen. Bitte beachten Sie, dass es sich nicht um ein echtes Suchergebnis, sondern nur um ein Beispiel handelt.

Unser Schreinermeister wird also sicherlich etwas wie das Folgende eintragen:

Beispiel: für eine Titelzeile
<title>Schreinerei Meier, Dingenskirchen</title>

Nach dem Kopf folgt der Körper

Nun wird es Zeit, dem Browser zu sagen, was er auf dem Monitor darstellen soll. Wie schon erwähnt, kommt das in das body-Element rein.

Beispiel: für eine Titelzeile
<body>
 Sichtbarer Inhalt der Seite
</body>