HTML/Tutorials/HTML-Einstieg/Kapitel2

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

HTML ist eine Textauszeichnungssprache. Das bedeutet, dass der Text nach semantischen Gesichtspunkten anhand der Bedeutung seines Inhalts strukturiert wird. So werden die verschiedenen Bereiche der Webseite mit jeweils passenden Elementen ausgezeichnet, die dann vom Browser, aber auch von Suchmaschinen und Screenreadern verstanden werden.

Textauszeichung

Überschriften

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  lang="de">
  <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.

Der Normalfall: Textabsätze

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.

Weiter geht's – mit Listen!

So, sind Sie so weit, dass wir weitermachen können? Schön. Was stand als nächstes auf Herrn Meiers Liste? Ah ja, die Liste mit den Leistungen. Liste heißt auf Englisch list und man notiert sie grundsätzlich auf eine von zwei Arten: Entweder nummeriert (geordnet) oder eben nicht nummeriert (ungeordnet). Nicht nummerierte Listen haben meistens irgendein Symbol vor den einzelnen Listenpunkten; das kennen Sie vermutlich aus Ihrer Textverarbeitung. Eine geordnete Liste (ordered list) wird bei HTML zwischen <ol></ol> notiert. Eine ungeordnete Liste (unordered list) wird zwischen <ul></ul> notiert. Jedes einzelne Element der Liste (egal, ob geordnet oder ungeordnet) wird wiederum zwischen die Tags

<li></li>

gesetzt. Probieren Sie beides aus:

Beispiel: für eine ungeordnete Liste ansehen …
<ul>
  <li>Möbel nach Ihren Wünschen</li>
  <li>Haustüren</li>
  <li>Gartenzäune</li>
  <li>Reparaturen</li>
</ul>

Das sollte im Browser dann ungefähr so dargestellt werden:

  • Möbel nach Ihren Wünschen
  • Haustüren
  • Gartenzäune
  • Reparaturen
Beispiel: für eine geordnete (nummerierte) Liste ansehen …
<ol> 
  <li>Möbel nach Ihren Wünschen</li>
  <li>Haustüren</li>
  <li>Gartenzäune</li>
  <li>Reparaturen</li>
</ol>

Das sollte im Browser dann ungefähr so dargestellt werden:

  1. Möbel nach Ihren Wünschen
  2. Haustüren
  3. Gartenzäune
  4. Reparaturen

Wir haben die Listen beim Schreiben unserer HTML-Beispiele zur besseren Übersichtlichkeit eingerückt, obwohl das nur dem Menschen und nicht dem Browser dient, denn dem Browser ist es egal, ob ihr HTML-Code übersichtlich aussieht oder nicht – Hauptsache, er ist korrekt. Generell ist zu empfehlen, dass Sie beim Schreiben von HTML ebenfalls auf sinnvolle Einrückungen achten. Gute, auf HTML spezialisierte Editoren helfen Ihnen übrigens dabei, solche Einrückungen automatisch vorzunehmen – manche auch bei bereits bestehenden Dateien.

Einrückungen stören den Browser deswegen nicht, weil er beim Anzeigen der HTML-Datei mehrere Leerzeichen, Tabulator-Zeichen und Zeilenumbruch-Zeichen (wenn Sie beim Schreiben die ENTER/RETURN-Taste drücken), die direkt hintereinander kommen, so darstellt, als handle es sich nur um ein einziges Leerzeichen. Details dazu finden Sie unter HTML/Regeln beim Editieren von HTML.

Wie Sie jedenfalls beim Ausprobieren der beiden Beispiele leicht erkennen können, ist die ungeordnete Liste für unseren Zweck besser geeignet, da die Leistungen des Schreiners nur aufgelistet werden sollen, wobei die Reihenfolge keine besondere Rolle spielt. Dabei werden vor den einzelnen Listenpunkten – je nach Browser – keine Ziffern, sondern Symbole angezeigt.

So, nun kümmern wir uns aber um unseren Herr Meier, dessen Liste ja etwas anders aussah. Wenn wir die Bilder und die Preistabelle mal weglassen – diese sollen nämlich noch jeweils eine eigene Seite bekommen – dann sieht die Liste mit den Leistungen der Schreinerei Meier folgendermaßen aus:

  • Möbel nach Ihren Wünschen
    • Küchenmöbel
    • Regale und Schrankwände
    • Badezimmermöbel
  • Haustüren
  • Gartenzäune
  • Reparaturen

Wie bekommt man so eine Verschachtelung hin? Ganz einfach: Die Lösung dafür ist die Liste in der Liste! Jetzt müssen wir uns ein bisschen konzentrieren, aber das bekommen wir hin:

Beispiel: mit den Angeboten der Schreinerei Meier
<ul>
  <li>Möbel nach Ihren Wünschen
    <ul>
      <li>Küchenmöbel</li>
      <li>Regale und Schrankwände</li>
      <li>Badezimmermöbel</li>
     </ul>
  </li>
  <li>Haustüren</li>
  <li>Gartenzäune</li>
  <li>Reparaturen</li>
</ul>

Sie können hier also sehen, dass der erste Listenpunkt „Möbel nach Ihren Wünschen“ nicht sofort mit einem schließenden Tag beendet wird. Stattdessen wird erst eine weitere vollständige Liste mit allem Drum und Dran eingefügt. Erst nach dieser Liste wird der Listenpunkt „Möbel nach Ihren Wünschen“ mit einem schließenden Tag beendet. Die weiteren Listenpunkte folgen danach auf gewohnte Weise.

Die ganzen Details zu Listen finden Sie unter HTML/Textstrukturierung/Listen.

Die ganze Kunst

Und jetzt basteln wir das Ganze in einem vollständigen Dokument zusammen, wobei wir die Liste mal zwischen zwei der Absätze geschoben haben, damit's ein bisschen lebhafter aussieht:

Beispiel: für die Begrüßungsseite der Schreinerei Meier ansehen …
<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>Schreinerei Meier, Dingenskirchen</title>
  </head>
  <body>
    <h1>Willkommen bei der Schreinerei Meier im Internet!</h1>
    <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>
    <h2>Unsere Leistungen:</h2>
    <ul>
      <li>Möbel nach Ihren Wünschen
        <ul>
          <li>Küchenmöbel</li>
          <li>Regale und Schrankwände</li>
          <li>Badezimmermöbel</li>
        </ul>
      </li>
      <li>Haustüren</li>
      <li>Gartenzäune</li>
      <li>Reparaturen</li>
    </ul>
    <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>  
  </body>
</html>

So, damit ist die Startseite des Webangebots der Schreinerei Meier fertig. Die „Startseite“ wird im Englischen übrigens als home page bezeichnet. Vielleicht wundern Sie sich schon die ganze Zeit darüber, dass wir im bisherigen Text den beliebten Begriff „Homepage“ meistens vermieden haben. Viele Leute sagen: „Ich will eine Homepage haben!“, meinen in Wirklichkeit aber nicht nur die Startseite, sondern eine ganze „Webpräsenz“, die natürlich mehr als nur die Startseite enthält. Der Begriff „Homepage“ hat sich in der deutschen Sprache mit der Bedeutung „Webpräsenz“ eingebürgert.

Weil wir nun aber alles so fürchterlich genau nehmen, können wir uns damit nicht abfinden, sonst werden wir vielleicht noch ausgelacht. Sie dürfen weiterhin „Homepage“ sagen, wenn Sie möchten, aber wir werden „Homepage“ nur dann sagen, wenn wir tatsächlich die Startseite meinen.

Hier nochmal die wichtigsten Begriffe:

  • Startseite (englisch: home page)
  • Webseite (englisch: web page) = eine einzelne Seite eines Webangebotes
  • Webangebot, Webpräsenz (englisch: web site) = alle Seiten eines Anbieters zusammen

Jetzt aber wieder zum Schreinermeister Meier. Damit dieser nicht pleitegeht, müssen natürlich Preise her! Bitte blättern Sie um!