HTML Tutorial - Ein schneller Einstieg in die Grundlagen von HTML

Mit diesem kleinen HTML Tutorial möchte ich Ihnen einen möglichst schnellen praxisnahen Einstieg in HTML ermöglichen.

Der Kurs zielt darauf ab, Ihnen das Wissen zu vermitteln, das Sie brauchen, um eine Homepage von Grund auf komplett selber neu zu erstellen.

Viele frischgebackene Webmaster wenden HTML und CSS nach der Methode Versuch und Irrtum an. Sie probieren einen Tag aus, gucken anschließend, ob das Ergebnis Ihren Vorstellungen entspricht, und starten, wenn dem nicht so ist, den nächsten Versuch. Das kann man so machen. Nachteilig ist allerdings, das diese Methode zeitraubend und auf Dauer nervig ist, wenn man das gewünschte Ergebnis nach zig Fehlversuchen immer noch nicht erreicht hat.

Sinnvoller ist sich ein Basiswissen über HTML anzueignen. Das geht relativ zügig. Damit kann man schon Webseiten erstellen, die man online stellen kann. Schön aussehen werden die zwar nicht. Aber der Anfang ist gemacht.

Dazu reichen schon die paar Anweisungen auf der Seite:

aus.

Danach gilt es sich mit Cascading Style Sheets abgekürzt CSS zu beschäftigen. Damit hübschen Sie Ihre Seiten auf. Auch hier ist ein Basiswissen erstmal ausreichend.

Damit Ihre Seiten später einmal gut ranken, sollte man sich möglichst früh mit Suchmaschinenoptimierung befassen. Die beste Website der Welt wird schlecht ranken, wenn sie nicht suchmaschinenoptimiert ist. Das ist ein eigenes Thema zu dem es Bücher gibt, mit dem man ganze Regalwände füllen kann.

Wächst die Website gilt es sich Gedanken über ein geeignetes Content-Management-System oder einen Static Site Generator zu machen.

Bestimmte Dinge lassen sich nur mit JavaScript und/oder PHP und/oder Python realisieren. Dann ist Programmierwissen gefragt.

Und wenn eine Datenbank eingebunden werden soll, ist auch Datenbankwissen erforderlich.

Das lernt man weder alles auf einmal noch in ein paar Stunden. Und das braucht man auch nicht alles. Was man braucht sind erst mal Basiskenntnisse über HTML, CSS und Suchmaschinenoptimierung.

Webseiten zu erstellen ist nicht schwer. Aber man benötigt ein sehr umfangreiches Wissen aus verschiedenen Techniken, will man alle Möglichkeiten nutzen. Oder anders formuliert: Die Komplexität in der Tiefe ist gering. Die Komplexität in der Breite ist sehr hoch.

Ich will versuchen, Ihnen nicht nur das Wissen, was zur Erstellung einer Website erforderlich ist, zu vermitteln, sondern auch das Sie verstehen was passiert, wenn Sie einen Tag gegebenenfalls im Zusammenspiel mit CSS anwenden. Wenn Sie bestimmte Prinzipien, wie sich die Anwendung von HTML und CSS auf das Aussehen Ihrer Webseite auswirken, einmal verstanden haben, werden Sie danach viel schneller zu den Ergebnissen kommen, die Ihren Vorstellungen entsprechen.
Dieser scheinbar langsame Weg ist letzten Endes der schnellere und bessere Weg, um Ihre eigene Homepage zu erstellen.

Es wird Anfängern oft empfohlen, sich ein Content Management System zu installieren und mit einer fertigen Vorlage zu arbeiten.
Dann haben Sie, wenn Sie Glück haben, recht schnell ansehnliche Ergebnisse.
Früher oder später werden Sie aber an einen Punkt sein, an dem Sie nicht mehr weiterkommen. Dann brauchen Sie doch Kenntnisse in HTML, CSS und gegebenenfalls Javascript.

Ich empfehle Ihnen sich diesen Umweg zu ersparen. Später, wenn Ihre Website einen Umfang von ca. 10 Seiten erreicht hat, und Sie planen diesen Umfang weiter zu erhöhen, und Sie sich mit HTML und CSS bereits auskennen, dann sollten Sie Ihre Webpräsenz auf ein Content Management System oder einen Static Site Generator umstellen.

Fertige Vorlagen, so schön sie meistens auch sind, haben Ihre Tücken. Ich spreche da aus eigener Erfahrung.

Darauf werde ich bei nächster Gelegenheit mal in einem Artikel genauer eingehen, den Sie dann in meinem BLOG lesen können.

Wenn Sie wirklich selber ein Projekt auf die Beine stellen wollen, sollten Sie von Anfang an gründlich arbeiten. Das bringt Sie weiter, als wenn Sie versuchen auf die Schnelle ein paar Seiten ins Netz zu stellen, die dann von niemanden aufgerufen werden. Es nutzt Ihnen nichts, wenn Sie diese oder auch andere Seiten zum Thema nur durchlesen. Wichtig ist sich Kenntnisse anzueignen und anschließend auch anzuwenden!

Nur beim erstellen von Webseiten lernen Sie das erstellen von Webseiten!

HTML ist so konzipiert, dass es "Befehle" gibt, die keinen Einfluss auf das Aussehen der Webseite haben aber trotzdem extrem wichtig sind, weil Sie unter anderem die Lesbarkeit des Codes vereinfachen und dafür sorgen dass Suchmaschinen Ihre Seite "verstehen".
Wenn Sie diese "Befehle" weglassen, weil Sie es sich einfach machen wollen, machen Sie es sich im Gegenteil schwer.
Sie verbauen sich die Chance im Suchmaschinenranking weit vorne zu erscheinen. Dazu später mehr...

zurück zum Inhaltsverzeichnis

HTML ist die Abkürzung für HyperText Markup Language.
Es ist eine Seitenauszeichnungssprache. Sie dient dazu Text, den Sie schreiben, optisch so darzustellen, wie das von Ihnen gewünscht ist. Es ist DIE Sprache des Web in der fast alle Webseiten geschrieben sind.

HTML ist keine Programmiersprache im engeren Sinne. So gibt es beispielsweise keine Kontrollstrukturen.
HTML ist vergleichsweise einfach zu erlernen (also keine bange, dass kriegen Sie hin), aber sehr umfangreich. Letzteres ist aber unproblematisch. Mit relativ wenigen "Befehlen" können Sie Ihre Seiten optisch gut darstellen und strukturieren.
Die kennen Sie nach einiger Zeit auswendig. Alles andere eignen Sie sich mit der Zeit an, falls das überhaupt nötig sein sollte.

Wenn Sie eine HTML Seite geschrieben haben, liegt quasi der Quelltext auf dem Webserver auf den Sie die Seite hochgeladen haben. Der Browser, mit dem die Seite aufgerufen wird, hat dann die Aufgabe den Quelltext zu übersetzen, und die Seite so am Bildschirm darzustellen, wie Sie das vorgesehen haben.

zurück zum Inhaltsverzeichnis

Sie wissen, wenn nicht sollten Sie sich darüber erst mal Gedanken machen, welchen Zweck Ihre Seite erfüllen soll und zu welchem Thema Sie Inhalte anbieten wollen. Dann schadet es nicht sich Seiten von "Mitbewerbern" anzuschauen, um sich Anregungen zu holen. Anregungen holen bedeutet NICHT kopieren. Wenn Sie das machen, werden Sie früher oder später eine teure Abmahnung in Ihrem Briefkasten finden!

"Echte" Programmierer programmieren oft auch zuerst auf Papier. Ich halte es für gut, sich erst mal eine grobe Skizze mit Bleistift und Papier von Ihrer Startseite zu erstellen. Überlegen Sie sich, wo Sie Ihre Navigation platzieren wollen, wo Ihre eigentlichen Inhalte auf Ihren Seiten erscheinen sollen, welche Bezeichnungen Sie Ihren Navigationslinks geben wollen und so weiter. Lassen Sie sich dabei genug Zeit.
Dieser Entwurf sollte in etwa dem entsprechen, was Sie realisieren wollen. Gehen Sie dabei aber auch nicht zu sehr ins Detail. Es kann sein dass sich das, was Sie sich vorstellen, gar nicht oder vorläufig nicht realisieren lässt. Sei es weil Ihnen die Kenntnisse dazu (noch) fehlen, oder weil sich durchaus herausstellen kann, dass Ihr Entwurf am Bildschirm dann doch nicht Ihrer Vorstellung entspricht.

Bei den Bezeichnungen für die Navigation ist es erforderlich einen guten Kompromiss zu finden zwischen

• der Länge der Bezeichnung
• und der Aussagekraft der Bezeichnung

Wenn Sie ein Projekt, dass aus mehr als einer Landingpage und den üblichen Pflichtseiten besteht, realisieren wollen, ist Ihre Website eine Baustelle und wird es solange Sie das Projekt weiterführen auch bleiben.
Selbst wenn Sie alle geplanten Inhalte hinterlegt haben und Sie mit Ihrem Werk zufrieden sind, gibt es immer Anpassungsbedarf.

Ihre Homepage ist ein kleiner Teil des großen Web. Dort ändern sich Links auf die Sie möglicherweise verlinken, die Bewertungskriterien von Suchmaschinen ändern sich, es gibt neue Techniken, mit denen sich vielleicht endlich Sachen auf Ihrer Website realisieren lassen, die vorher nicht möglich waren oder der Aufwand vorher gegebenenfalls zu hoch war, Ihre Informationen veralten unter Umständen und so weiter.

Wenn Sie mit Ihrer Seite dauerhaft Erfolg haben wollen, ist es erforderlich auch dauerhaft daran zu arbeiten. Das heißt nicht, dass Sie täglich am Rechner sitzen müssen. Aber von Zeit zu Zeit ist es sinnvoll Ihre Website bedarfsweise zu aktualisieren. Zumal Suchmaschinen das wohlwollend registrieren.
Eine Homepage selber zu schreiben, ist gerade zu Beginn sehr mühsam. Aber wenn Sie am Ball bleiben, werden Sie merken, wieviel Spass man dabei haben kann.

Wenn Sie Ihre Seite zum Beispiel von einer Agentur erstellen lassen würden, haben Sie Einmalkosten für die Erstellung und fortlaufende Kosten für die Aktualisierung Ihrer Seite.

Versuchen Sie nicht Ihre Website von Anfang an perfekt zu gestalten. Das wird Ihnen nicht gelingen! Eignen Sie sich erst mal ein Grundwissen an. Anschließend realisieren Sie das, was Sie mit Ihrem erworbenen Wissen realisieren können. Wenn Ihre Website gut genug ist online gestellt zu werden, dann stellen Sie sie online. Warten Sie ab was passiert.

Kontrollieren Sie, ob Ihre Website von Suchmaschinen erfasst wird und wie Ihre Seite rankt. Und seien Sie bitte nicht enttäuscht, wenn Sie sie erst mal unter "ferner liefen" bei Google finden.
Etwas anderes sollten Sie zu Beginn nicht erwarten! Ein gutes Ranking erreichen Sie nicht von heute auf morgen. Das müssen Sie sich erarbeiten.

Lernen Sie mehr über HTML, CSS und gegebenenfalls Javascript und wenden Sie dieses Wissen wieder auf Ihre Website an. So kommen Sie Ihrem Ziel Schritt für Schritt näher.

Wenn Sie an irgendeinem Punkt feststecken, improvisieren Sie erst mal. Ihr Wunschlogo beispielsweise können Sie sich immer noch später erstellen und einbauen. Nehmen Sie zum Beispiel erst mal eine besonders gestaltete Schrift mit dem Logonamen als vorläufigen Platzhalter dafür. Aber realisieren Sie das, was Sie realisieren Ihrem Kenntnisstand entsprechend sorgfältig.
Es ist sehr mühsam und fehlerträchtig eine schlampig erstellte Website nachträglich zu bereinigen.

Achten Sie von Anfang an darauf Ihre Website suchmaschinenoptimiert zu erstellen. Mehr dazu können Sie auf meiner Seite SEO nachlesen.
Auch auf dieser Seite werden Sie später noch Informationen dazu bekommen.

Es ist nicht zwingend erforderlich schon eine Domain registriert und Webspace gemietet zu haben, bevor Sie anfangen Ihre Homepage zu erstellen.
Aber es ist ein gutes Gefühl zu wissen, wo Ihre Seiten in Zukunft zu Hause sein werden.
Außerdem können Sie Ihre Website schon mit Bezug auf Ihre registrierte Domain erstellen. Ob Ihre Wunschdomain noch frei ist, wenn Sie Ihre Seiten zum ersten Mal online stellen wollen, wenn Sie sie vorher nicht registriert haben, wissen Sie nicht.

Wenn Sie eine freie Domain gefunden haben, die Ihren Vorstellungen entspricht, empfehle ich Ihnen diese auch sofort zu registrieren, bevor sie Ihnen jemand anders wegschnappt.
Sonst haben Sie unter Umständen das nachsehen... Ich spreche da aus eigener Erfahrung!

Eine Auswahl an Webhostern finden Sie auf meiner LINKS Seite.

Mehr über Domains können Sie auf meiner Seite DIE DOMAIN nachlesen.

zurück zum Inhaltsverzeichnis

Für die ersten Versuche reicht ein einfacher Texteditor. Der vom Betriebssystem mitgelieferte erfüllt vorläufig seinen Zweck. Aber nehmen Sie kein Textverarbeitungsprogramm! Das ist zur Erstellung von HTML Seiten nicht geeignet.

Einen Browser brauchen Sie natürlich auch, um zu kontrollieren, ob Ihre Seiten so aussehen, wie Sie sich das vorgestellt haben.
Welchen Sie nehmen ist egal. Aber es sollte keine uralte Version sein.
Später, wenn Sie fortgeschritten sind, macht es gegebenenfalls Sinn verschiedene Browser zu installieren und Ihre Seiten unter diesen Browsern zu überprüfen.
Die Browserhersteller halten sich manchmal nicht immer genau an die vorgegebenen Standards, so dass Unterschiede in der Darstellung auftreten können.

Es ist empfehlenswert sich einen HTML-Editor und ein FTP-Programm zu installieren. Mit dem HTML-Editor ist die Erstellung von Webseiten deutlich komfortabler als mit einem "normalen" Texteditor.
Außerdem lernen Sie dessen Funktionen direkt kennen und müssen sich da nicht erst später einarbeiten.
Ein FTP-Programm benötigen Sie in der Regel, um Ihre fertigen Webseiten auf den Webserver zu laden.

Erstellen Sie sich einen Ordner für Ihr Projekt. Es ist sinnvoll zum Beispiel Ihren Domainnamen als Ordnernamen zu nehmen. Letzten Endes ist der Ordnername aber beliebig.
Erstellen Sie eine Textdatei mit der Dateiendung ".htm" oder ".html" in diesem Ordner. Das wird Ihre Startseite.
Ich empfehle Ihnen diese Datei "index.html" zu nennen. Das ist zwar kein muss aber Konvention im Internet, dass die eigentliche Homepage (Startseite) "index.html" oder "index.htm" heißt.

Wichtig:

Wenn Sie Ordner- und Dateinamen für Ihre Website vergeben halten Sie sich bitte unbedingt an folgende Regeln:

• Nehmen Sie nur Kleinbuchstaben.
• Wenn Sie Umlaute im Namen haben schreiben Sie sie um: also statt ä => ae, statt ö => oe, statt ü => ue usw.
• Vermeiden Sie Leerzeichen: Nehmen Sie statt eines Leerzeichens den Bindestrich "-" und aus suchmaschinenoptimierenden Gründen auch nicht den Unterstrich "_".
• Vermeiden Sie Sonderzeichen.

Der Hintergrund dafür ist, dass der Webserver mit Sicherheit unter einem anderen Betriebssystem läuft als Ihr Rechner. Dazu kommt, dass moderne Betriebssysteme verschiedene Dateisysteme unterstützen, die alle Ihre Eigenheiten haben, was den Umgang mit Ordner- und Dateinamen betrifft.
Wenn Sie sich an die oben angegebenen Regeln halten, dürften Sie keine Probleme haben, wenn Sie Ihre Dateien auf den Webserver hochgeladen haben.

Wenn Sie diese Regeln missachten, kann es sein, dass trotzdem alles wunschgemäss läuft. Aber wenn nicht sind Sie erst mal mit einer langwierigen Fehlersuche beschäftigt.
Sowas habe ich schon hinter mir und möchte Ihnen das ersparen!

Ebenfalls wichtig:

Vergeben Sie "sprechende" also beschreibende Ordner- und Dateinamen.
Spätestens mit steigendem Umfang Ihres Projekts wissen Sie sonst nicht mehr welche Inhalte Sie wo hinterlegt haben.
Und Sie sorgen auf diese Weise dafür, dass Suchmaschinen Ihre Website besser "verstehen" und indexieren können.
Allein mit solchen Kleinigkeiten können Sie Ihr Suchmaschinenranking deutlich verbessern.

Mehr zum Thema Suchmaschinenoptimierung können Sie auf meiner Seite SEO nachlesen.

zurück zum Inhaltsverzeichnis

Ein Tag beginnt immer mit einer öffnenden spitzen Klammer (bzw. einem "kleiner als") Zeichen: "<"

und endet immer mit einer schliessenden spitzen Klammer (bzw. einem "größer als") Zeichen: ">"

Zwischen diesen Klammern steht dann der Tag selber. Der Tag selber besteht in der Regel aus einem oder mehreren Buchstaben, manchmal auch aus kurzen kompletten Worten.
Die Buchstaben sind fast immer Abkürzungen von englischen Begriffen aus denen man vom Namen schon ableiten kann, welchem Zweck dieser Tag dient.
Wenn ich einen Tag erläutere, werde ich den dazugehörigen englischen Begriff in der Regel erwähnen und auch die deutsche Übersetzung dazu.
Wenn man die Bedeutung eines Tags kennt, kann man sich diesen viel leichter merken.

Wenn Sie der englischen Sprache mächtig sind, ist das natürlich hilfreich. Aber das ist keine zwingende Voraussetzung, um HTML zu erlernen.

zurück zum Inhaltsverzeichnis

Der Begriff des "Bereichs" der gekennzeichnet werden soll ist logisch nachvollziehbar. Korrekt spricht man in der HTML Syntax aber davon, dass mein ein Element kennzeichnet.
Wenn ich also in Zukunft davon schreibe, dass ein Element durch einen Tag gekennzeichnet wird, kann das ein Bereich Ihrer Seite sein also beispielsweise ein Absatz oder auch wirklich nur ein Element also ein Wort oder nur ein Buchstabe sein.
Elemente können auch verschachtelt sein. So können Sie beispielsweise ein ganzes Wort in fetter Schrift darstellen und innerhalb dieses Wortes den ersten Buchstaben zusätzlich unterstreichen.

Beispiel für ein single tag: <br>

Beispiel für ein einleitendes und ein schliessendes tag: <p>Ihr Text!</p>

zurück zum Inhaltsverzeichnis

Die meisten Tags haben direkten Einfluss auf das Aussehen Ihrer Webseiten. Das Aussehen Ihrer Webseiten nach Ihren Wünschen zu gestalten ist ja schließlich der Hauptzweck von HTML. Es gibt aber auch sehr viele Tags, die keinen Einfluss auf das Aussehen Ihrer Webseiten haben.
Diese Tags sind natürlich nicht überflüssig. Die Menschen die an der Entwicklung von HTML mitgewirkt haben und mitwirken, haben gute Gründe, warum sie diese Tags ins Leben gerufen haben!

Und Sie sollten diese Tags auf jeden Fall nutzen!

Tags, die keinen Einfluss auf das Aussehen Ihrer Webseiten haben lassen sich in 3 verschiedene Kategorien einteilen:

Zu 1: Meta Tags werden im Dateikopf einer HTML Datei notiert. Sie sind unter anderem wichtig für die Suchmaschinenoptimierung. Anhand der Daten, die Sie in Ihren Meta Tags notieren, kann eine Suchmaschine diverse Eigenschaften Ihrer HTML Datei auslesen.
Außerdem teilen Sie der Suchmaschine auf diese Weise mit, womit sich Ihre HTML Datei inhaltlich beschäftigt.

Zu 2: Diese Tags dienen dazu, dass Sie (und ggf. auch andere) Ihren HTML Code besser lesen können und auch wieder Suchmaschinen, denen Sie mit diesen Tags mitteilen, wie Ihre Inhalte aufgeteilt sind.

Zu 3: Wie der Name schon sagt, dienen Kommentar Tags dazu Kommentare in Ihren HTML Code zu schreiben.

Das ist jetzt erstmal sehr abstrakt. Ich werde die wichtigsten all dieser Tags weiter unten konkret ausführlich darstellen und erläutern!

zurück zum Inhaltsverzeichnis

Historisch bedingt gibt es verschiedene Versionen von HTML. Darauf einzugehen sprengt aber den Rahmen dieses kleinen Kurses und spielt in der Praxis so gut wie keine Rolle.
Sie sollten HTML5 Dateien erstellen. Damit sind Sie auf der sicheren Seite. Und wie das geht lernen Sie hier.

zurück zum Inhaltsverzeichnis

So sieht das minimale Grundgerüst einer HTML-Datei aus:

Kopieren Sie sich dieses Grundgerüst in Ihre "index.html" Datei, speichern Sie sie ab und rufen Sie sie über Ihren Browser auf und Sie sehen ... nichts aus einer leeren weissen Seite. Und warum?
Weil es alles Tags sind die keinen Einfluss auf das Aussehen Ihrer Webseite haben und Sie noch keine Inhalte hinterlegt haben!

Das ist gerade mal das Grundgerüst und das sieht schon unübersichtlich aus. Vielleicht kriegt man das besser hin:

zurück zum Inhaltsverzeichnis

Diesen Code kann ich wesentlich besser lesen als den ersten. Und Sie sicherlich auch.

Worauf ich hinaus will sind Einrückungen. Sie müssen Ihren Code nicht einrücken! Dem Browser ist das vollkommen egal, ob Sie Ihren Code immer ab der ersten Spalte Ihrer Datei anfangen zu schreiben, oder ab der zehnten oder wie auch immer Sie das handhaben. Ihre Seite sieht im Browser immer gleich aus - egal ob und wenn ja wie Sie Ihren Code einrücken.

Es hat sich aber bewährt Code einzurücken, weil die Lesbarkeit damit sowohl für Sie als auch für andere deutlich verbessert wird.

Feste Regeln, wie einzurücken ist, gibt es nicht.

Wenn Sie zuviel einrücken, wird Ihre Quellcodeseite zu breit, so dass Sie andauernd horizontal scrollen müssen, wenn Sie zuwenig einrücken leidet die Lesbarkeit.
Finden Sie einen guten Kompromiss für sich!
Sinnvoll ist meines Erachtens das jede Einrückung die gleiche Länge hat. 2 Leerzeichen pro Einrückung empfinde ich für mich als optimal.
Ob Sie Ihre Einrückungen mit Leerzeichen oder über Tabulatoren realisieren spielt keine Rolle.

zurück zum Inhaltsverzeichnis

Das folgende Grundgerüst ist zwar immer noch recht minimal, kann aber benutzt werden.

zurück zum Inhaltsverzeichnis

Es geht hier lediglich um die Grundlagen von HTML. Ich werde im folgenden nur die Tags vorstellen und erläutern (Das bezieht sich nicht nur auf die Tags des Grundgerüsts sondern auf alle Tags, die ich auf meiner Seite vorstelle!), die ich für den Anfang als wichtig erachte und diese gegebenenfalls von Zeit zu Zeit ergänzen.

Wenn ich Tags erläutere, fasse ich mich dabei so kurz wie möglich aber so ausführlich wie nötig.

Ab und zu werde ich allerdings weiter ausholen. Dann handelt es sich meistens um einen Tag, den ich als besonders hilfreich empfunden habe beziehungseise um eine Lösung, die mir lange Kopfzerbrechen bereitet hat.

Wenn Ihnen Erklärungen zu einem Tag nicht umfangreich genug sind, möchte ich Sie auf entsprechende Referenzseiten zu HTML verweisen, die Sie auf meiner LINKS Seite finden.

Das Problem, was diese an sich hervorragenden Dokumentationen aus meiner Sicht haben ist, dass Sie so umfangreich sind, dass man den Wald vor lauter Bäumen nicht mehr sieht.
Aufgrund dessen, dass wirklich jedes noch so selten benutzte Argument zu jedem noch so selten benutzten Tag aufgeführt und erläutert wird (was ja auch Sinn und Zweck einer Dokumentation ist, die als Referenz dienen soll), leidet die Verständlichkeit der Dokumentation oft. Außerdem werden keine Prioritäten gesetzt.
Es gibt nun mal tags, die Sie ständig brauchen, solche die Sie selten oder nur einmal benötigen und die meisten davon werden Sie wahrscheinlich niemals brauchen.

Wenn Sie als Anfänger, dort anfangen zu lesen, werden Sie wahrscheinlich schnell zu dem falschen Schluss kommen, das das alles viel zu kompliziert ist.

HTML ist nicht kompliziert. HTML ist einfach!

Ich möchte Sie mit meiner kleinen Einführung zu HTML animieren, sich damit zu beschäftigen, und Ihr eigenes Projekt zu verwirklichen.
Sie werden mit der Zeit merken, wie schnell Ihnen, wenn Sie am Ball bleiben, HTML in Fleisch und Blut übergehen wird.
Natürlich: Aller Anfang ist schwer! Aber nach und nach wird Ihnen Ihre Arbeit an Ihrem Projekt immer mehr Spass machen.
Zumindest mir ist es so ergangen. Warum sollte es bei Ihnen anders sein?

Ich versuche Ihnen hier nur das Wissen zu vermitteln, dass sie brauchen, um schnell zu qualitativ guten Ergebnissen zu kommen. Alles andere können Sie sich bei Bedarf später immer noch aneignen.

Und jetzt geht es endlich los mit der Erklärung von tags.

Ich beginne mit den tags die im "praxistauglichen Grundgerüst" auftauchen.

<!DOCTYPE html>: Steht als erstes in jeder HTML Datei. Damit wird dem Browser mitgeteilt, dass es sich um ein HTML5 Dokument handelt (Trotzdem können Sie HTML4 Code verwenden!).

<html>...</html>: Der <html> tag umschliesst das gesamte HTML Dokument (Bis auf den <!doctype html> tag.).
Es ist das Wurzel Element mit dem das Dokument beginnt und mit dem </html> tag endet.
Wenn Sie eine deutschsprachige Website veröffentliche wollen, sollte Ihr tag mit dem Wert für deutschsprachige Seiten eingefügt werden:

<html lang="de">

Werte werden grundsätzlich nur in dem einleitenden tag eingefügt. Das ist in diesem Fall nicht zwingend erforderlich, weil Suchmaschinen die Sprache (wie viele andere Sachen auch) selbst erkennen, aber sinnvoll. Auf diese Weise teilen Sie Suchmaschinen unmissverständlich mit in welcher Sprache Ihr Dokument verfasst ist.

Es gibt viele Werte die scheinbar überflüssig sind. Es ist empfehlenswert, sich die Mühe zu machen, sie trotzdem zu benutzen. Sie erleichtern Suchmaschinen damit Ihre HTML-Seiten korrekt zu indexieren. Möglicherweise sorgt das dafür, das Ihre Seiten besser ranken als die Ihrer Mitbewerber. Außerdem erleichtern Sie Screenreadern Ihr Dokument beim vorlesen richtig auszusprechen.

<head>...</head>: Der <head> tag wird zwischen dem <html> und dem <body> tag notiert.
Der <head> tag ist ein Container für Metadaten. Metadaten sind Daten, die Informationen über andere Daten enthalten.

Auch wenn das was Sie innerhalb des <head> tags notieren, im Browser nicht sichtbar ist, sollten Sie Ihre "Kopfdaten" sorgfältig und wohlüberlegt erfassen. Und das nicht nur für Ihre Startseite, sondern für alle Seiten Ihrer Webpräsenz.
Ansonsten dürfen Sie sich später nicht wundern, dass Ihre Webpräsenz in Suchergebnissen kaum erscheint.

<body>...</body>: Der <body> tag wird unter dem <head> tag notiert.
Innerhalb des "<body>" Elements werden alle Inhalte hinterlegt, die dann im Browser wirklich sichtbar sind.
Es ist der tag innerhalb dessen Sie Ihren eigentlichen Inhalt (Content) hinterlegen.

<meta charset="utf-8">: "<meta charset="utf-8">" legt Ihre Zeichencodierung für Ihr HTML Dokument fest.
Für deutschsprachige HTML-Dateien übernehmen Sie den tag bitte einfach so.

"<meta charset="utf-8">" ist ein Meta-Tag und wird innerhalb des <head> tags notiert.

Wichtig ist, dass Sie Ihre HTML-Dateien auch mit dieser Zeichencodierung abspeichern.

Ansonsten werden beispielsweise Umlaute nicht korrekt dargestellt.
Bei Notepad++ können Sie das über den Menüpunkt "Kodierung" einstellen oder am besten über die "Einstellungen" als Standardzeichencodierung festlegen.
Beim Editor von Windows können Sie diese Zeichencodierung nicht einstellen. Sollten dort Probleme auftreten, können Sie das umgehen, indem Sie Zeichen maskieren.

Mehr zu diesem Thema können Sie hier nachlesen: Zeichencodierung

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>: Dieser tag dient stark vereinfacht ausgedrückt dazu, dass Ihre Seiten auch auf mobilen Engeräten "vernünftig" angezeigt werden.

"<meta name="viewport" content="width=device-width, initial-scale=1.0"/>" ist auch ein Meta-Tag und wird innerhalb des <head> tags notiert.

Der Begriff des "viewport" bezeichnet den Bereich des Browsers in dem die Inhalte Ihrer Seiten angezeigt werden.
Übernehmen Sie diesen Tag bitte einfach so. Ausführliche Erläuterungen dazu erspare ich mir an dieser Stelle aus didaktischen Gründen.

<title>...</title>: Der title Tag ist im viewport nicht sichtbar aber in der Titelzeile des Anzeigefensters Ihres Browsers.

Der title Tag ist sehr wichtig und sollte für jede Seite Ihrer Webpräsenz sorgfältig ausgewählt und eingetragen werden.

Und zwar aus folgenden Gründen:

• Wenn jemand Ihre Seite als Lesezeichen (Bookmark, Favorit) abspeichert, wird der Titel Ihrer Seite mit abgespeichert.
• Der Titel Ihrer Seite wird im Browserverlauf also den besuchten Webseiten angezeigt.
• Der Titel Ihrer Seite ist sehr wichtig für Suchmaschinen, um den Inhalt Ihrer Seite einordnen zu können.
• Und der Titel Ihrer Seite erscheint in der Regel in den Suchergebnissen von Suchmaschinen und ist damit mit ausschlaggebend, ob Ihre Seite von einem potentiellen Besucher aufgerufen wird oder nicht.

Damit sind die Tags des minimalen praxistauglichen Grundgerüsts erläutert. Innerhalb des <head> Tags fehlen noch einige wichtige Meta Angaben.

Hier finden Sie mehr Informationen über HTML Meta-Tags.

Als nächstes sollten Sie sich mit den HTML Basic Tags befassen.

zurück zum Inhaltsverzeichnis

zurück zum Inhaltsverzeichnis

zurück zum Inhaltsverzeichnis