HTML/Tutorials/HTML-Einstieg/Kapitel2

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Inhaltsverzeichnis

Das 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>
  <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 Dokumentstruktur und Aufbau.

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.

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 zweite Angabe 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.

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.

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. 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. Nehmen wir als Beispiel eine schöne große Überschrift. Überschrift heißt auf Englisch heading. Es gibt sechs Überschriftenebenen, die einfach von eins bis sechs nummeriert werden (h1, h2, h3, h4, h5, h6). Gewöhnlich fängt man mit h1 an; das ist die größte. Wenn man dann das, was auf diese Überschrift folgt, nochmals unterteilen will, nimmt man die nächste: h2. Und so weiter, und so fort.

Da wir gerade erst anfangen, wird die Überschrift zwischen die Tags

<h1></h1>

gesetzt. Genaueres zu Überschriften finden Sie unter HTML/Textstrukturierung/Überschriften.

Die HTML-Datei, die Herr Meier bisher erstellt hat, sieht jetzt so aus:

Beispiel: für eine einfache HTML-Seite mit einer Überschrift ansehen …
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Schreinerei Meier, Dingenskirchen</title>
  </head>
  <body>
    <h1>Willkommen bei der Schreinerei Meier im Internet!</h1>
  </body>
</html>

Speichern Sie die Datei z.B. unter dem Namen index.html ab. Sie können jetzt z.B. auf diese Datei doppelklicken, und dann sollte diese im Standardbrowser Ihres Systems geöffnet und im Browserfenster angezeigt werden. Die HTML-Datei ist eine ganz normale Textdatei, die Sie mit jedem beliebigen Editor oder Browser auf dem normalen Weg öffnen und bearbeiten können, wie Sie es auch mit anderen Dateien tun.

So schön diese Begrüßung auch sein mag: Es fehlt noch etwas, nämlich der eigentliche Inhalt. Deswegen fangen wir jetzt mit dem ernsthaften Erstellen an.

Herr Meier wird jetzt gern ein paar Worte über seine Schreinerei verlieren wollen. Üblicherweise wird er also einen normalen Text mit Absätzen verfassen. Das englische Wort für „Absatz“ lautet paragraph, und daraus ergeben sich dann die Tags <p> (Absatzanfang) und </p> (Absatzende).

Dazwischen schreibt man dann den eigentlichen Textabsatz. Genauere Informationen zu Absätzen in HTML finden Sie unter HTML/Textstrukturierung/Textabsätze. Die richtigen Worte zu finden und kurz und prägnant die wichtigsten Informationen darzustellen, ist eine Kunst für sich, mit der wir uns hier aber nicht weiter beschäftigen wollen. Wenn Sie zu Testzwecken ein paar Textabsätze einfügen wollen, aber keine Lust haben, selbst Text zu entwerfen, können Sie (inhaltlich sinnlosen) so genannten „Blindtext“, auch „lorem-ipsum“-Text genannt, verwenden. Dafür gibt es sogar Programme, die man über das Internet im Browser benutzen kann, beispielsweise dieses: professional lorem ipsum generator for typographers. Wir nehmen diesen Text jetzt einfach mal und basteln damit ein paar Absätze nach dem schon bekannten Muster:

Beispiel: für drei Textabsätze voller Blödsinn (Blindtext)
<p>Ma illo vostre instruction sed, sed appellate secundarimente o, in uno nostre intention distinguer. Da nos union greco-latin, un magazines demonstrate pro. Es inviar subjecto web. Ha vide millennios non. Regula preparation il sed. Le scriber interlinguistica duo, duo le independente interlinguistica, il uso capital millennios simplificate.</p>
 
<p>Web de major tentation primarimente, se periodicos denominator que. Sia un lista studio millennios, asia vices regno non se. Non e tamben subjecto denomination, de duce regno altere sed, ha pote medio continentes nos. Asia europeo duo le, medio synonymo interlinguistica ma del.</p>
 
<p>Libro anglese denomination duo e. Romanic effortio al sed. Pro su texto existe technologia, sitos spatios linguistic da con. Malo encyclopedia ma nos. Multo responder interlinguistica de web, publicava greco-latin se web.</p>

Diese Absätze müssten nun noch in unsere HTML-Datei index.html eingefügt werden (unter die Überschrift). Aber das können Sie sicher schon mal alleine machen. Also machen Sie ruhig, wir machen inzwischen eine kleine Pause.

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML