SELF-Treffen in Mannheim 2025

SELFHTML wird 30 Jahre alt! → Veranstaltungs-Ankündigung.

Einstieg in HTML/Erste Schritte

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Dieses Kapitel zeigt dir, wie Webseiten im Internet aufgebaut sind. Im Laufe des Kapitels lernst du mit HTML umzugehen.

HTML steht für Hypertext Markup Language, auf Deutsch Auszeichnungssprache für Hypertext.


Text, Struktur und Textauszeichnung

Unser Herr Meier hat sich überlegt, was er auf seine Webseite schreiben möchte. Hier ist sein Konzepttext - ohne jedes Markup, einfach wie mit der Schreibmaschine erstellt. Sein Enkel konnte Opa Harry gerade noch davon abhalten, Überschriften durch eine Kette von Gleichheitszeichen zu unterstreichen.


Die Textvorlage ansehen …
Aufgabe:
  1. Kopiere Herrn Meiers Text bitte in den Texteditor deines Vertrauens und speicher ihn auf deinem Computer als index.txt ab. Achte dabei bitte auf die Codierung. Sie muss UTF-8 lauten. Schließe nun den Editor und öffne die Textdatei in einem Browser. Die gängigen Browser wie Firefox, Chrome, Edge, und Safari bieten dafür die Tastenkombination Strg+O an (auf dem Mac: cmd+O).
    • Öffne die Datei bitte nicht an Stelle dieses Textes hier, sondern in einem neuen Fenster oder Tab. Wir werden öfter zwischen Tutorial und dem Ergebnis deiner Übung hin- und herwechseln.
  2. Ändere nun die Dateiendung auf .html. Im Windows Explorer musst du dafür die Anzeige der Datennamenerweiterungen einschalten, das ist unter Windows 10 eine Checkbox auf dem "Ansicht" Tab. Lade die umbenannte Datei index.html in den Browser.
    • Beschreibe, was du beobachten kannst
    • Überlege, was passiert ist.
  3. Öffne die Datei index.html wieder mit dem Editor, die brauchst du gleich wieder.
  4. Lies anschließend bitte weiter.

Die index.txt Datei wurde vom Browser so angezeigt, wie du sie in deinem Editor abgespeichert hast. Er hat sie nicht als HTML aufgefasst, und daher die Zeilenumbrüche und Leerstellen beibehalten.

In einem HTML Dokument ist das anders. Zeilenumbrüche (wenn du beim Schreiben die ENTER/RETURN-Taste ⏎ drückst) und Leerstellen dienen bestenfalls als Hilfe für den Autor, um die Übersicht zu behalten, aber für die Anzeige fasst der Browser Leerstellen und Zeilenumbrüche, auch mehrfacher hintereinander, zu einer einzigen Leerstelle zusammen. Eine Aufteilung in Zeilen benötigt Struktur.

Die wollen wir ihm nun mit Hilfe von HTML-Elementen geben:

Ü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. Ein Dokument bekommt eine Hauptüberschrift. Genau eine. Dafür verwenden wir das h1 Tag. Wenn du versucht bist, mehrere Hauptüberschriften zu setzen, ist das ein Zeichen dafür, dass du deine HTML-Datei in mehrere Dateien aufteilen solltest.
  2. Wenn du den Inhalt deiner Seite weiter untergliedern möchtest, verwende die nächste Ebene: einen oder mehrere h2. Und so weiter, und so fort. Überspringe keine Ebenen!

Diese Markierungen benötigen kein spezielles Programm, um sie zu erstellen, sondern können genau wie der übrige Text mit einem einfachen Texteditor geschrieben werden. Man nennt sie Tags (engl. für Marken), und sie geben an, wo bestimmte Teile eines Dokuments beginnen und enden. Ein solches Tag besteht am Beginn eines Dokumentteiles aus einem Namen, der in spitze Klammern eingeschlossen ist. Für das Ende fügt man vor dem Namen noch einen Schrägstrich hinzu. Eins dieser Tags heißt h1 und markiert die Haupt-Überschrift einer Seite: 

   <h1>Einstieg in HTML</h1>

Das Anfangs-Tag, den Inhalt dazwischen und das Ende-Tag bilden zusammen ein HTML-Element. Eine ausführlichere Beschreibung, wie HTML aufgebaut ist, findest du hier:

Text in Absätzen

Herr Meier hat nach seiner Überschrift die Leser begrüßt und kurz etwas zum Konzept seiner Schreinerei erzählt. Dazwischen hat er Leerzeilen gemacht und Absätze gebildet. Was ein Absatz ist, weiß der Browser nicht, wir müssen es ihm also durch HTML-Tags mitteilen. Das englische Wort für „Absatz“ lautet paragraph, und davon abgeleitet heißen die Tags zum Bilden von Absätzen <p> (Absatzanfang) und </p> (Absatzende).

Aufgabe:
  1. Mach das gleich einmal: Verwandele die erste Zeile „Schreinerei Meier...“ in die Hauptüberschrift und die beiden Absätze darunter in Paragraphen.
  2. Speicher die Datei als index.html ab (dabei nicht den Editor beenden) und aktualisiere das Browserfenster (oder Tab), in dem die Datei angezeigt wird (Taste F5).

Der Sinn der HTML Elemente ist es, die inhaltliche Struktur Ihres Dokuments für den Browser verständlich zu machen. Dass etwas eine Überschrift ist, das siehst du als Mensch, ein Browser weiß das nicht. Dass eine Gruppe von Zeilen eine Auflistung bildet, muss man dem Browser sagen.

Die wissenschaftliche Disziplin, die sich mit der Bedeutung von Symbolen beschäftigt, heißt Semantik. Ausgehend davon sagt man, dass die HTML-Elemente das Dokument nach semantischen Gesichtspunkten strukturieren. Durch die HTML Tags - das Markup - erschließst du dem Browser die Bedeutung dessen, was du verfasst hast. Und nicht nur ihm. Dein HTML-Dokument wird auch von Suchmaschinen gelesen, und Menschen, die schlecht oder gar nicht sehen können, benötigen Programme, die ihnen den Bildschirminhalt vorlesen, sogenannte Screenreader. Ohne semantisch korrektes Markup stehen Suchmaschine und Screenreader hilflos vor deinem Text und verstehen nichts.

Weiter geht's – mit Listen!

So, hat es geklappt? Schön. Wenn nicht, hier ist eine Musterlösung:


anzeigenverbergen
Überschrift und erste Absätze 
<h1>Schreinerei Meier, ihre Werkstatt für gutes Wohnen</h1>

<p>Willkommen bei der Schreinerei Meier im Internet!</p>
    
<p>Wir sind seit vielen Jahren darauf spezialisiert, alle Kundenwünsche zu erfüllen. In unserer 
Werkstatt produzieren wir selbst - mit Holz aus regionaler, nachhaltiger Forstwirtschaft.</p>
    
Unsere Leistungen:


Was stand als nächstes in Herrn Meiers Entwurf? Ah ja, die Liste mit den Leistungen. Um dafür HTML-Tags schreiben zu können, mussst du dir zuerst überlegen, was für eine Liste das ist: geordnet oder ungeordnet. Eine geordnete Liste erkennt man daran, dass die Einträge darin fortlaufend gekennzeichnet sind (durch Nummern oder Buchstaben), und eine ungeordnete Liste hat einfach nur ein Symbol (Strich, Punkt, Pfeil) oder sogar überhaupt nichts vor ihren Einträgen. Das Erzeugen dieser Kennzeichnung überlassen wir dem Browser, so, wie du das auch in deiner Textverarbeitung tust. Wir sagen im HTML nur: das ist eine Liste. Dafür müssen wir zwei Dinge tun: Den Bereich der Liste als Ganzes markieren, und darin dann jeden einzelnen Eintrag der Liste.

Die Liste selbst eröffnest du mit dem <ol> oder dem <ul> Tag, je nachdem, ob es eine geordnete Liste oder eine ungeordnete Liste ist. Danach folgen die Listeneinträge, oder list items auf Englisch. Sie werden durch das <li> Tag begonnen, und mit </li> beendet. Nach dem letzten Listenelement schließst du dann die Liste mit </ol> oder </ul>.

Aufgabe: So, und nun darfst du wieder 'ran. Wechsel in das Fenster deines Texteditors, und erstell die Liste der Leistungen.
  1. Wo du gerade schon im Editor bist, mach auch gleich die Überschriften Unsere Leistungen: und Unsere Geschichte: zu Überschriften. Natürlich nicht <h1>, sondern?
  2. Und wenn du schon dabei bist, sei doch auch so lieb und mach die beiden Absätze zur Geschichte zu HTML-Paragraphen, ja?
  3. Überlege, ob du eine geordnete oder eine ungeordnete Liste darstellen möchtest, und erstelle an der passenden Stelle die HTML-Tags für Beginn und Ende der Liste.
  4. Entferne die Minuszeichen, die Herr Meier im Schreibmaschinenstil hingeschrieben hat, und markiere jede Zeile als Listeneintrag.
  5. Speicher die Datei und aktualisiere das Browserfenster, in dem die letzte Version noch geöffnet war.

Eine Darstellung, wie das Ergebnis aussehen könnte, erhältst du durch einen Klick auf „Vorschau“ im nachstehenden Beispielrahmen. Und auch wenn dich der Mausfinger juckt, drücke nicht auf „ausprobieren“, bevor du den nachstehenden Abschnitt gelesen hast.

Die erste Liste ansehen …
Klicke bitte auf Vorschau!

Und jetzt darfst du - frickel los 😀. Speicher kannst du nichts – kaputtmachen kannst du aber auch nichts. Du kannst dir aber, wenn du willst, das HTML in deinen eigenen Editor kopieren. Kehre mit der Zurück-Funktion des Browsers hierher zurück.

Empfehlung: Wenn du nicht mit der Standardmaustaste (für Rechtshänder: die linke Taste) auf „ausprobieren“ klickst, sondern mit der rechten Maustaste, findest du in dem Menü, das sich dann öffnet, einen Eintrag wie „Link in neuem Tab oder Fenster öffnen“. Das ist ganz praktisch, denn dann habst du Frickl und Tutorial in verschiedenen Tabs oder Fenstern und kannst schnell zwischen beiden hin und her schalten. Es versteht sich wohl von selbst, dass das Entwickeln von Webseiten an einem größeren Bildschirm, an dem optimalerweise mehrere Fenster nebeneinander zu sehen sind, einfacher ist als auf einem Handy oder Tablet mit kleinem Bildschirm.

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 dein HTML-Code übersichtlich aussieht oder nicht – Hauptsache, er ist korrekt. Generell ist zu empfehlen, dass du beim Schreiben von HTML ebenfalls auf sinnvolle Einrückungen achtest. Gute, auf HTML spezialisierte Editoren helfen dir übrigens dabei, solche Einrückungen automatisch vorzunehmen – manche auch bei bereits bestehenden Dateien.

Wie du jedenfalls beim Ausprobieren des Beispiels leicht erkennen kannst, 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.

Herr Meier hat, während du hier deine ersten Schritte mit HTML gemacht hast, übrigens noch etwas über seine Webseite nachgedacht. „Möbel nach Ihren Wünschen“ - das ist ihm zu dürftig. Da sollen ein paar Beispiele hin, welche Art von Möbeln man sich von ihm bauen lassen kann.

  • Küchenmöbel
  • Regale und Schrankwände
  • Badezimmermöbel

Das soll als eingerückte Liste unter dem Listenpunkt „Möbel nach Ihren Wünschen“ erscheinen.

Das ist mit HTML ganz einfach. So, wie wir die Listeneinträge in die ungeordnete Liste eingepackt haben, können wir eine weitere Liste einfach in diesen Listeneintrag hineinpacken. Die Tiefe, wie weit du HTML-Elemente verschachteln kannst, ist nicht begrenzt. Bei solchen Schachtelungen muss man sich ein bisschen konzentrieren, aber das bekommst du hin!

Aufgabe: Erstelle die Liste mit Beispielen.
  1. Wechsel in deinen Texteditor, und füge zwischen Wünschen und </li> zwei Zeilenumbrüche ein.
  2. Erstelle in der entstandenen Leerzeile eine neue, ungeordnete Liste
  3. Füge Listeneinträge mit Möbelbeispielen ein. Die drei von oben, oder andere...
  4. Vergiss nicht, Listeneinträge und die Liste selbst korrekt zu beenden.
  5. Speicher die Datei und schau dir im Browser das Ergebnis an.
Klick' hier, um das Ergebnis anzuzeigenKlick' hier, um das Ergebnis anzuzeigen
Die verschachtelte Liste 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>

Du kannst 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 </li> beendet. Die weiteren Listenpunkte folgen danach auf gewohnte Weise.

Und wenn du auf die Vorschau-Seite wechselst, dann siehst du etwas sehr Interessantes. Der Browser weiß, was geschachtelte Listen sind. Er rückt die innere Liste automatisch ein und stellt die Listenpunkte anders dar.

Hinweis:
Einrückungen im HTML helfen dabei, in deinem Dokument den Überblick zu behalten. Es wurde ja schon erwähnt, dass der Browser beliebig langen Leerraum zu einem Leerzeichen zusammenfasst. Um ehrlich zu sein - das ist nicht die ganze Wahrheit. Manchmal unterschlägt er sie ganz. Der Browser unterscheidet nämlich zwischen Block-Elementen, die jeweils auf eine eigene Zeile gesetzt werden, und Inline-Elementen, die fortlaufend in Zeilen geschrieben werden. Die Elemente, die du bisher kennengelernt hast, sind allesamt Blockelemente, und wenn man die ineinander schachtelt, wird Leerraum dazwischen vom Browser gar nicht dargestellt.

Schau dir das vollständige HTML gerne im Frickl an.

Für die umfangreichen Details zu Listen haben wir ein eigenes Tutorial erstellt. Du findest es unter HTML/Tutorials/Listen.

Grundgerüst einer HTML-Seite

Das war's? Nein, noch nicht ganz. Ein vollständiges HTML Dokument besteht aus mehr als nur den Tags und dem Text für den eigentlichen Inhalt. Es gibt einen Rahmen, und einen „Kopf“, in dem zusätzliche Angaben zur Darstellung im Browser aufgeführt sind. Dieser Seitenkopf wird nicht angezeigt, ist aber wichtig:


Grundgerüst einer HTML-Datei 
<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Beschreibung der Seite</title>
  </head>
  <body>
    <p>Inhalt der Seite</p>
  </body>
</html>

Was wir bisher gelernt haben, und was Frickl dir im Editor anzeigt, findet sich in diesem Rahmen zwischen <body und </body wieder. Nimm diesen Rahmen bitte erst einmal als gegeben hin. Zu fast jeder Zeile müsste man eine Menge Erklärungen machen und vor allem wichtige Konzepte erläutern, das hat Zeit für später.

Wenn du dieses Grundgerüst in allen Einzelheiten erklärt haben willst, dann lies bitte den Artikel Grundgerüst einer HTML-Datei.

Aufgabe:
  1. Kopiere dieses HTML-Grundgerüst in deinen Editor, vor dein bisher erstelltes HTML
  2. Verschiebe die beiden letzten Zeilen so, dass dein bisher erstelltes HTML Dokument zwischen <body und </body zu stehen kommt. Die „<p>Inhalt der Seite</p>“ Zeile ist nur ein Muster für möglichen Inhalt, die kommt ganz weg.
  3. Speicher deine Datei als HTML-Dokument (mit der Endung .html).
  4. Aktualisiere die Browseransicht deines Dokuments. Achte dabei auf den Tab-Titel, der zu dieser Seite gehört. Sorge bitte noch dafür, dass da Schreinerei Meier erscheint.

Die Homepage

So, damit ist die Startseite des Webangebots der Schreinerei Meier fertig. Die „Startseite“ wird im Englischen übrigens als home page bezeichnet. Vielleicht wunderst du dich 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 englische Fachbegriff dafür lautet web site und ist akustisch ein falscher Freund des deutschen Begriffs „Webseite“. Eine web site oder Webpräsenz besteht aus einer oder mehreren Webseiten, und die Homepage ist diejenige davon, auf der ein Besucher als erstes landet.

Weil wir nun aber alles so fürchterlich genau nehmen, können wir uns damit nicht abfinden, sonst werden wir vielleicht noch ausgelacht. Du darfst weiterhin „Homepage“ sagen, wenn du eine Webpräsenz meinst, 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
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Einstieg_in_HTML/Erste_Schritte&oldid=102544“