HTML-Tutorial: Die Grundlagen (1)
Eine Textseite aufbauen
In dieser Lektion lernen Sie die absoluten Grundlagen der Sprache HTML kennen, die man zum Aufbau einer Internetseite braucht. Am Ende der Lektion können Sie bereits selber eine Seite mit Text erstellen und Überschriften verschiedenen Grades und einige Formatierungen einsetzen.
Was ist HTML?
Wer eine Homepage erstellen will, braucht HTML. Es ist die Sprache des Internets schlechthin. Das Kürzel HTML setzt sich aus den Anfangsbuchstaben von HyperText Markup Language zusammen. Es ist keine Programmiersprache, sondern nur eine so genannte Auszeichnungssprache.
Wie eine Auszeichnungssprache funktioniert
Die Auswirkung der Verwendung von Auszeichnungen - Tags genannt - kann z.B. folgendermaßen aussehen:
Das ist etwas gestalteter Text.
Und so sieht das im HTML-Code aus:
Das <i>ist etwas</i> <b>gestalteter Text.</b>
Die so genannten Tags (engl.: Etikett, Markierung) weisen den Browser an, das folgende auf eine ganz bestimmte Weise darzustellen (im Beispiel hier kursiv bzw. fett). Tags stehen in spitzen Klammern. Zu einem öffnenden Tag gehört auch ein schließendes Tag, das man am zusätzlichen Schrägstrich erkennt. Der hier gezeigte HTML-Code bedeutet also:
Die Tags erscheinen auf den ersten Blick vielleicht recht willkürlich gewählt. Zu Grunde liegt aber die englische Sprache. Dort bedeutet "italic" = kursiv und "bold" = fett.
HTML ist einfach
Der grundlegende Aufbau einer Internetseite mit HTML ist erfreulich einfach, wenn man dieses Prinzip verstanden hat. Um das Wichtigste zu erklären, will ich erst mal so tun, als müsste man eine HTML-Seite grundsätzlich von Anfang bis Ende von Hand tippen (wie es auch einfacher geht, dazu später mehr). Vorab deshalb zwei Hinweise:
- Für den HTML-Code kein Textverarbeitungsprogramm verwenden! Der Browser möchte reinen ASCII-Text geliefert bekommen. Notepad unter Windows oder TextEdit auf dem Mac sind geeignete Programme dafür.
- Die Datei sollte mit der Erweiterung .htm oder .html gespeichert werden, damit sie der Browser akzeptiert. Einige andere Erweiterungen sind auch möglich (z.B. .php), aber momentan für uns nicht von Belang.
<html>, <head> und <body>
Jede HTML-Datei gehört am Anfang und Ende in das <html>-Tag eingeschlossen und sollte zwei Bereiche haben: den Seitenkopf und den Seitenrumpf. Der eigentliche Seiteninhalt, der im Browserfenster angezeigt werden soll, muss im Seitenrumpf stehen, damit er sichtbar wird. In den Seitenkopf gehören verschiedene Einträge (z.B. der Seitentitel, der in der Kopfleiste des Browserfensters erscheint), mit denen wir uns später noch befassen werden.
Auch wenn der Seitenkopf anscheinend nur weniger wichtige Informationen enthält, auf die man doch eigentlich fast verzichten könnte, stimmt das nur am Anfang. Dort gehören nämlich auch eher unscheinbare Einträge hin, die aber eine wichtige Rolle für die Zahl der Aufrufe Ihrer Homepage über Google spielen. - In den SEO-Tutorials finden Sie mehr darüber.
Texte formatieren
Eine Internetseite war schon immer für die Darstellung auf ganz verschiedenen Ausgabegeräten gedacht, die nicht nur verschiedene Browser verwenden können, sondern auch verschiedene Betriebssysteme (Windows, MacOS, Linux...). Es hat deshalb Vorteile, wenn man auf ganz enge Festlegungen verzichtet und nur Zuweisungen allgemeinerer Art vornimmt. Die genaue Umsetzung übernimmt der Browser. Sie kann sich durchaus sichtbar unterscheiden.
Recht ungewohnt ist eine Eigenschaft von HTML, die man sich von einem Textverarbeitungsprogramm wie z.B. Word nicht vorstellen kann: Auf die exakte Darstellung der Seite hat man nur mäßigen Einfluss.
Folgende Zuweisungen sind die wichtigsten:
- Der Absatz, wie man ihn auch aus Textverarbeitungsprogrammen kennt. Sein Tag lautet <p> wie engl. Paragraph.
- Die Überschrift mit den hierarchischen Abstufungen von <h1> bis <h6> (engl. Headline steckt dahinter).
- Die Aufzählungen wie diese hier mit Aufzählungspunkt vorne dran. Auf Einzelheiten dazu kommen wir noch.
- Die Tabellendarstellung, die aber durch eine andere Methode immer mehr an Bedeutung verliert. Ich gehe deshalb auch erst später darauf ein.
Dem Browser wird also mitgeteilt, zu welchem Typ der in das öffnende und schließende Tag eingebundene Text gehört. Wie er Text dieses Typs aber darstellt, das bleibt dem Browser überlassen. Man kann dabei natürlich schon eine sinnvolle Abstufung erwarten (Eine Überschrift ersten Grades - also <h;1> - wird also wahrscheinlich schon größer dargestellt werden als eine dritten Grades. Tatsächlich sicher wissen kann man das aber nicht!
Weil diese Situation heute, in Zeiten schneller Datenbertragung, natürlich anachronistisch und unbefriedigend ist, greift man auf die Cascading Style Sheets (CSS) zurück, mit denen man wesentlich mehr Einfluss auf die Darstellung erhält - wenn auch noch immer nicht die volle Kontrolle. Wir kommen später noch darauf, aber momentan soll uns das noch nicht interessieren.
Ein Beispiel
Damit wie ncht nur in der Theorie herum wurschteln, ist es Zeit, dass wir uns mal eine vollständige HTML-Datei mit Text ansehen. So etwa könnte die aussehen:
<html> <head> <title>Unsere Testseite</title> <meta http-equiv="Content-type" content="text/html; charset=iso-8859-1"> </head> <body> <h1>Unsere erste Testseite</h1> <p>Das soll nur ein <b>Beispiel</b> sein, an dem wir sehen, wie der Inhalt der Seite mit <i>HTML-Code</i> aussieht und wie der Browser diese Seite dann darstellt.</p> <p>Hier beginnt ein neuer Absatz.</p> </body> </html>
Wahrscheinlich stolpern Sie über die Zeile mit diesem kryptischen Inhalt:
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1">
Diese Zeile wäre nicht unbedingt nötig, ist aber nützlich: Erst durch Aufrufen des Zeichensatzes iso-8859-1 hat der Browser eine große Menge Sonderzeichen zur Verfügung, die für die deutsche Sprache gebraucht werden (z.B. ä, ö, ü, ß). Ohne diesen Zeichensatz geht es zwar auch, aber jedes dieser Zeichen müsste einzeln anders codiert werden, damit es der Browser richtig darstellt. Das ist eine Folge davon, dass das Internet natürlich international ist und der selbe Browser ja auch auf einem Rechner installiert sein könnte, der kyrillische Zeichen braucht.
Hier sehen Sie, wie unsere Testseite vom Browser angezeigt wird: Testseite anzeigen
Zeilenumbrüche und Leerzeichen
Wahrscheinlich ist es Ihnen gar nicht aufgefallen: HTML geht mit der Darstellung des Codes und mit der Ansicht der Internetseite im Browser ziemlich großzügig um. Sie können die HTML-Seite so aufbauen, wie Sie persönlich es übersichtlich finden. Es spielt für die Ansicht im Browser überhaupt keine Rolle, ob Sie den ganzen Inhalt samt Tags in einer einigen Zeile runter tippen oder z.B. jedes Tag in eine neue Zeile setzen, weil Ihnen das grad Spaß macht. Beides ist sicher nicht grad lesefreundlich. Deshalb baue ich meine HTML-Seiten so ähnlich auf wie oben gezeigt.
Was Sie zwischen <p> und </p> schreiben gilt als Absatz. Probieren Sie mal Folgendes aus: Schieben Sie das Fenster, in dem Sie unsere Testseite angezeigt bekommen, doch mal schmäler zusammen - und schwuppdiwupp wird der Absatz automatisch neu umbrechen, wenn der Platz nicht mehr reicht! Der Platz zum nächsten Absatz bleibt trotzdem bestehen. Das ist nur einer der Gründe, warum es nützlich ist, dass man zusammen gehörigen Text in Absätze einbindet.
Aufzählungen
Oft wünscht man sich auch übersichtlichere Gestaltungsmöglichkeiten für Aufzählungen. Dazu bietet HTML die Listen an, die angenehm einfach zu handhaben sind:
<ul> <li>Das ist der erste Eintrag</li> <li>und das hier der zweite</li> </ul>
was dann so aussieht:
- Das ist der erste Eintrag
- und das hier der zweite
Das Tag <ul> steht für unordered list (meist als Punkteliste vom Browser dargestellt). Möglich ist stattdessen auch <ol> für ordered list (also eine numerische Aufzählung).