HTML/Tutorials/Einstieg/Kapitel2

Aus SELFHTML-Wiki
< HTML‎ | Tutorials‎ | Einstieg
Wechseln zu: Navigation, Suche

Informationen zu diesem Text

Lesedauer
15min
Schwierigkeitsgrad
einfach
Vorausgesetztes Wissen
keine Grundkenntnisse nötig!

HTML steht für Hypertext Markup Language, auf Deutsch Textauszeichnungssprache. In diesen wird Text nach semantischen Gesichtspunkten anhand der Bedeutung seines Inhalts strukturiert. So werden die verschiedenen Bereiche der Webseite mit jeweils passenden Elementen ausgezeichnet, die dann vom Browser, aber auch von Suchmaschinen und Screenreadern verstanden werden.

ein Versuch

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

einfache HTML-Seite mit Überschrift, Text und Liste ansehen …
  <body>
    Schreinerei Meier, ihre Werkstatt für gutes Wohnen
    
    Willkommen bei der Schreinerei Meier im Internet!
    
    Wir sind seit vielen Jahren darauf spezialisiert, alle Kundenwünsche zu erfüllen. In unserer 
    Werkstatt produzieren wir selbst - mit Holz aus regionaler, nachaltiger Forstwirtschaft.
    
    Unsere Leistungen:

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

	Unsere Geschichte:
    
    Die Anfänge unserer Firma reichen bis ins Mittelalter zurück, als Horst Holzmann begann seine 
    bisher für den Eigenbedarf hergestellten Möbel auch auf dem Markt der nächsten Stadt zu verkaufen.
    
 	Sein Sohn führte diese Tradition fort und nach ihm noch viele weitere Kinder und Kindeskinder. 
    Heute führt Harry Holzmann den Betrieb in der 15. Generation und arbeitet bereits seinen Enkel 
    als Nachfolger ein.  
  </body>
Aufgabe:
  1. Speichern Sie den Text als meineDatei.txt ab und öffnen Sie sie in einem Browser.
  2. Ändern Sie nun die Dateiendung auf .html und laden die Datei erneut.
    1. Beschreiben Sie, was Sie beobachten können
    2. Überlegen Sie, was passiert ist.
  3. Lesen Sie anschließend bitte den folgenden Abschnitt!

Textauszeichung

Wie oben bereits erwähnt, soll in HTML der Inhalt nach seiner Bedeutung passend ausgezeichnet werden. Dies muss nun nachgeholt werden:

Ü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).

  1. Gewöhnlich fängt man mit h1 an; das ist die wichtigste und einzige Hauptüberschrift.
  2. Wenn man dann das, was auf diese Überschrift folgt, nochmals unterteilen will, nimmt man die nächste Ebene: einen oder mehrere h2. Und so weiter, und so fort.

Der Text der Überschrift wird zwischen die Tags <h1> … </h1> gesetzt.

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).

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.

Aufgabe: Gehen Sie nun (mit einem klick auf "ausprobieren") zurück zu unserer Webseite und …
  1. zeichnen Sie den Inhalt mit den passenden HTML-Elementen aus. Klicken Sie dann auf "Ergebnis aktualisieren"
    • Fügen Sie vor einen Abschnitt einen Start-Tag (<h1>, <h2>, <p> sowie <ul>, oder <ol> und <li>.
    • Jeder Tag, der geöffnet wird, muss anschließend wieder geschlossen werden (</…> )!
  2. Überlegen Sie, ob Sie für die Leistungen eine geordnete oder ungeordnete Liste verwenden wollen.
einfache HTML-Seite mit Überschrift, Text und Liste ansehen …
  <body>
    Schreinerei Meier, ihre Werkstatt für gutes Wohnen
    
    Willkommen bei der Schreinerei Meier im Internet!
    
    Wir sind seit vielen Jahren darauf spezialisiert, alle Kundenwünsche zu erfüllen. In unserer 
    Werkstatt produzieren wir selbst - mit Holz aus regionaler, nachaltiger Forstwirtschaft.

verschachtelte Listen

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/Zeichencodierung Editieren von HTML.

Wie Sie jedenfalls beim Ausprobieren des Beispiels 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:

für verschachtelte Listen ansehen …
<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:

Aufgabe:
  1. Kopieren Sie Ihr HTML aus dem Frickl-Beispiel in Ihr HTML-Grundgerüst aus dem letzten Kapitel zwischen den <body>-Starttag und den </body-End-Tag. Schließen Sie auch den HTML-Tag!
  2. Speichern Sie das Dokument als HTML-Dokument (mit der Endung .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!