HTML – allererste Schritte

HTML ist die Sprache des Internet. Es steht für “Hypertext Markup Language”.

Das bedeutet – grob vereinfachend -, dass durch “Markups” oder sogenante “Tags” – das sind quasi “Schilder” – beschrieben wird, wie etwas dargestellt werden soll – oder genauer: was etwas funktional im Text bedeutet.

Nehmen wir als Beispiel eine Aufzählung, also eine Liste. Diese kann in nummerierter Form erfolgen, oder aber mit einfachen Spiegelstrichen oder ähnlichen Symbolen.

Im ersten Fall sieht das etwas so aus:

  1. Das ist der erste Punkt.
  2. Das ist der zweite Gedanke.
  3. Das ist die dritte Botschaft.

Im zweiten Fall dagegen würde es so aussehen:

  • Das ist der erste Punkt.
  • Das ist der zweite Gedanke.
  • Das ist die dritte Botschaft.

In HTML nennt man das erste eine “orderered list” und das zweite – Sie können es sich denken – eine “unorderered list”. Die einzelnen Elemente nennt man “list items”.

Und nun setzt man dafür “Schilder” – mit je einem Beginn und einem Ende. Diese “Schilder” lauten etwa

<ul> unordered list - begin </ul> unordered list - end
<ol> ordered list - begin </ol> ordered list - end
<li> list item - begin </li> list item - end

Mit so gearteteten “Wegweisern” sehen die Beispiele von oben also so aus:
<ol>
<li>Das ist der erste Punkt.</li>
<li>Das ist der zweite Gedanke.</li>
<li>Das ist die dritte Botschaft.</li>
</ol>

für das erste Beispiel und
<ul>
<li>Das ist der erste Punkt.</li>
<li>Das ist der zweite Gedanke.</li>
<li>Das ist die dritte Botschaft.</li>
</ul>

für das zweite Beispiel.

Sie sehen daraus die Funktionsweise der Tags: Sie werden in spitze Klammern eingeschlossen.

Und: zu jedem öffnenden gibt es einen schließenden Hinweis, der mit einem Schrägstrich zwischen den spitzen Klammern beginnt. So markiert also <ol> den Beginn einer nummerierten Liste, während deren Ende durch </ol>. gekennzeichnet ist.

Und Sie haben an dem Beispiel gesehen, dass geschachtelt werden kann: Innerhalb der Liste können Sie wiederum eine “Unterliste” definieren. Wie sähe das aus? Probieren Sie zunächst selbst – und lesen Sie dann erst weiter.

Sie müssten so etwas erhalten haben wie zum Beispiel

  1. Dies ist die erste Teilliste:
    1. Dies ist das erste Teilelement.
    2. Dies ist das zweite.
    3. Und das ist das dritte
  2. Und das geht auch mit unsortierten Listen:
    • Dies ist das erste Teilelement der “unordered list”.
    • Und dies ist das nächste.
    • Und so kann es immer weiter gehen.

Und der Quelltext dafür lautet.


<ol>
<li>Dies ist die erste Teilliste:
<ol>
<li>Dies ist das erste Teilelement.</li>
<li>Dies ist das zweite.</li>
<li>Und das ist das dritte</li>
</ol>
</li>
<li>Undd das geht auch mit unsortierten Listen:
<ul>
<li>Dies ist das erste Teilelement der "unordered list".</li>
<li>UOnd dies ist das nächste.</li>
<li>Und so kann es immer weiter gehen.</li>
</ul>
</li>
</ol>

Damit können Sie nun schon recht viel HTML. Denn das Grundprinzip haben Sie damit vestanden.

Was für Elemente lassen sch denn weiterhin mit diesem System zusammenbauen? Das ist Teil der nächsten Geschichte.

 

About Wolfgang Wagemann

Wolfgang Wagemann lebt im Rhein-Neckar-Raum.
This entry was posted in Sprachen und Systeme and tagged . Bookmark the permalink.