HTML/Tutorials/Einstieg/Erste Schritte

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

HTML steht für Hypertext Markup Language, auf Deutsch Auszeichnungssprache für Hypertext. Hyper wird hier im Sinne von „erweitert“ gebraucht und bedeutet, dass Hypertext nicht einfach zur geradlinigen Lektüre gedacht ist. Statt dessen bietet ein Hypertext-Dokument Verknüpfungen zu anderen Textstellen an - die Hyperlinks. Das Ziel solcher Links kann im gleichen Dokument liegen oder auch in einem ganz anderen. Der Leser kann damit jederzeit in seinem Lesefluss an eine andere Stelle verzweigen.

Hypertext lässt sich auf unterschiedliche Weisen herstellen. HTML ist eine rein auf Text basierende Realisierung dieses Konzepts und verwendet spezielle Zeichenfolgen, um Hyperlinks zu erzeugen und Einsprungpunkte für Hyperlinks zu markieren. Gleichzeitig bieten diese Markierungen auch die Möglichkeit, den Inhalt des Dokuments zu strukturieren, so dass bei der Anzeige des Dokuments eine passende Darstellung erzeugt werden kann..

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, finden Sie in der Einführung zu HTML 5, aber das sollten Sie für den ersten Einstieg höchstens kurz überfliegen.

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 sehen Sie als Mensch, ein Browser weiß das nicht. Dass eine Gruppe von Zeilen eine Auflistung bildet, muss man dem Browser sagen. Aber dann, wenn er es weiß, kann er Ihnen bei einer ansprechenden Darstellung dieser Inhalte helfen. Und Sie können dann später, mit Hilfe der sogenannten Stylesheets, Ihrerseits dem Browser helfen, Ihre Vorstellungen von einer ansprechenden Darstellung umzusetzen.

Die wissenschaftliche Disziplin, die sich mit der Bedeutung von Symbolen beschäftigt, heißt Semantik. Ausgehend davon sagt man, dass die HTML Elemente Ihr Dokument nach semantischen Gesichtspunkten strukturieren. Durch die HTML Tags - das Markup - erschließen Sie dem Browser die Bedeutung dessen, was Sie verfasst haben. Und nicht nur ihm. Ihr 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 Ihrem Text und verstehen nichts.

Hyperlinks sind in diesem Zusammenhang nur ein Element von vielen. Wir werden einen Blick darauf werfen, wenn wir die einzelnen Seiten des geplanten Internetauftritts von Herrn Meier miteinander verknüpfen.

Aber das beste Markup nützt nichts ohne Inhalt.

Herrn Meiers Entwurf

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. 

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, nachhaltiger Forstwirtschaft.
    
Unsere Leistungen:

- Möbel nach Ihren Wünschen
- 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 Meier den Betrieb in der 15. Generation und arbeitet bereits seinen Enkel als
Nachfolger ein.

Was ist besser als ein Vierundzwanzig-Zoll Bildschirm? Zwei davon!

Wenn Sie dieses Tutorial auf einem Gerät mit einem Kleinbildschirm lesen (Smartphone oder Tablet ohne Tastatur), dann wechseln Sie für die Aufgaben bitte an ein anderes Gerät, optimalerweise an einen Desktop-PC. Kleingeräte, vor allem mit Bildschirmtastaturen, eignen sich zur Entwicklung von Webseiten nicht. Sie brauchen Platz auf dem Bildschirm, und Sie brauchen mehrere Fenster.

Aufgabe:
  1. Kopieren Sie Herrn Meiers Text bitte in den Texteditor Ihres Vertrauens und speichern Sie ihn auf Ihrem Computer als index.txt ab. Achten Sie dabei bitte auf die Codierung. Sie muss UTF-8 lauten. Schließen Sie nun den Editor und öffnen Sie die Textdatei in einem Browser. Die gängigen Browser wie Firefox, Chrome, Edge, Safari und Opera bieten dafür die Tastenkombination Strg+O an (auf dem Mac: cmd+O).
    • Öffnen Sie die Datei bitte nicht an Stelle dieses Textes hier, sondern in einem neuen Fenster oder Tab. Wir werden öfter zwischen Tutorial und dem Ergebnis Ihrer Übung hin- und herwechseln.
  2. Ändern Sie nun die Dateiendung auf .html. Im Windows Explorer müssen Sie dafür die Anzeige der Datennamenerweiterungen einschalten, das ist unter Windows 10 eine Checkbox auf dem "Ansicht" Tab. Laden Sie die umbenannte Datei in den Browser.
    • Beschreiben Sie, was Sie beobachten können
    • Überlegen Sie, was passiert ist.
  3. Öffnen Sie die Datei index.html wieder mit dem Editor, die brauchen Sie gleich wieder.
  4. Lesen Sie anschließend bitte weiter.

Textauszeichung

Die .txt Datei wurde vom Browser so angezeigt, wie Sie sie in Ihrem Editor abgespeichert haben. 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 Sie beim Schreiben die ENTER/RETURN-Taste ⏎ drücken) 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-Tags 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 Sie versucht sind, mehrere Hauptüberschriften zu setzen, ist das ein Zeichen dafür, dass Sie ihre HTML-Datei in mehrere Dateien aufteilen sollten.
  2. Wenn Sie den Inhalt Ihrer Seite weiter untergliedern möchten, verwenden Sie die nächste Ebene: einen oder mehrere h2. Und so weiter, und so fort. Überspringen Sie keine Ebenen!

Der Text der Überschrift wird zwischen die Tags <h1> … </h1> gesetzt und bildet damit das h1-Element.

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. Machen Sie das gleich einmal: Verwandeln Sie die erste Zeile „Schreinerei Meier...“ in die Hauptüberschrift und die beiden Absätze darunter in Paragraphen.
  2. Speichern Sie die Datei als index.html ab (dabei nicht den Editor beenden) und aktualisieren Sie das Browserfenster (oder Tab), in dem die Datei angezeigt wird (Taste F5).

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, müssen Sie sich 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 Sie das auch in Ihrer Textverarbeitung tun. 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öffnen Sie 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ßen Sie dann die Liste mit </ol> oder </ul>.

Aufgabe: So, und nun dürfen Sie wieder 'ran. Wechseln Sie in das Fenster Ihres Texteditors, und erstellen Sie die Liste der Leistungen.
  1. Wo Sie gerade schon im Editor sind, machen Sie auch gleich die Überschriften Unsere Leistungen: und Unsere Geschichte: zu HTML Überschriften. Natürlich nicht <h1>, sondern?
  2. Und wenn Sie schon dabei sind, seien Sie doch auch so lieb und machen Sie die beiden Paragraphen zur Geschichte zu HTML-Paragraphen, ja?
  3. Überlegen Sie, ob Sie eine geordnete oder eine ungeordnete Liste darstellen möchten, und erstellen Sie an der passenden Stelle die HTML-Tags für Beginn und Ende der Liste.
  4. Entfernen Sie die Minuszeichen, die Herr Meier im Schreibmaschinenstil hingeschrieben hat, und markieren Sie jede Zeile als Listeneintrag.
  5. Speichern Sie die Datei und aktualisieren Sie das Browserfenster, in dem die letzte Version noch geöffnet war.

Eine Darstellung, wie das Ergebnis aussehen könnte, erhalten Sie durch einen Klick auf „Vorschau“ im nachstehenden Beispielrahmen. Und auch wenn es Sie der Mausfinger juckt, drücken Sie nicht auf „ausprobieren“, bevor Sie den nachstehenden Abschnitt gelesen haben.

Die erste Liste ansehen …
Klicken Sie bitte auf Vorschau!

Und jetzt dürfen Sie - frickeln Sie los 😀. Speichern können Sie nichts, und kaputtmachen können Sie auch nichts. Sie können sich aber, wenn Sie mögen, das HTML in Ihren eigenen Editor kopieren. Kehren Sie mit der Zurück-Funktion des Browsers hierher zurück.

Empfehlung: Wenn Sie nicht mit der Standardmaustaste (für Rechtshänder: die linke Taste) auf „ausprobieren“ klicken, sondern mit der rechten Maustaste, finden Sie in dem Menü, das sich dann öffnet, einen Eintrag wie „Link in neuem Tab oder Fenster öffnen“. Das ist ganz praktisch, denn dann haben Sie Frickl und Tutorial in verschiedenen Tabs oder Fenstern und können 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 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.

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.

Herr Meier hat, während Sie hier Ihre ersten Schritte mit HTML gemacht haben, ü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 Sie HTML Elemente verschachteln können, ist nicht begrenzt. Bei solchen Schachtelungen muss man sich ein bisschen konzentrieren, aber das bekommen Sie hin!

Aufgabe: Erstellen Sie die Liste mit Beispielen.
  1. Wechseln Sie in Ihren Texteditor, und fügen Sie zwischen Wünschen und </li> zwei Zeilenumbrüche ein.
  2. Erstellen Sie in der entstandenen Leerzeile eine neue, ungeordnete Liste
  3. Fügen Sie Listeneinträge mit Möbelbeispielen ein. Die drei von oben, oder andere...
  4. Vergessen Sie nicht, Listeneinträge und die Liste selbst korrekt zu beenden.
  5. Speichern Sie die Datei und schauen Sie sich im Browser das Ergebnis an.
Klicken Sie hier, um das Ergebnis anzuzeigenKlicken Sie 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>

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

Und wenn Sie auf die Vorschau-Seite wechseln, dann sehen Sie 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 Ihrem 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 Sie bisher kennengelernt haben, sind allesamt Blockelemente, und wenn man die ineinander schachtelt, wird Leerraum dazwischen vom Browser gar nicht dargestellt.

Schauen Sie sich das vollständige HTML gerne im Frickl an.

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

Die ganze Kunst

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-Seite

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 Ihnen im Editor anzeigt, findet sich in diesem Rahmen zwischen <body und </body wieder. Nehmen Sie 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 Sie dieses Grundgerüst in allen Einzelheiten erklärt haben wollen, dann lesen Sie bitte den Artikel Grundgerüst einer HTML-Datei.

Aufgabe:
  1. Kopieren Sie dieses HTML-Grundgerüst in Ihren Editor, vor Ihr bisher erstelltes HTML
  2. Verschieben Sie beiden letzten Zeilen so, dass ihr 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. Speichern Sie Ihre Datei als HTML-Dokument (mit der Endung .html).
  4. Aktualisieren Sie die Browseransicht Ihres Dokuments. Achten Sie dabei auf den Tab-Titel, der zu dieser Seite gehört. Sorgen Sie 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 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 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. Sie dürfen weiterhin „Homepage“ sagen, wenn Sie eine Webpräsenz meinen, 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=HTML/Tutorials/Einstieg/Erste_Schritte&oldid=97178“