HTML Tutorial - Ein schneller Einstieg in die Grundlagen von HTML

1. Einleitung

Mit diesem kleinen HTML Kurs möchte ich Ihnen einen möglichst schnellen Einstieg in HTML ermöglichen.
Trotzdem werde ich in meiner Darstellung auf nichts verzichten, was ich für wichtig erachte.
Das bedeutet im Umkehrschluss, dass diese Einführung umfangreicher sein wird, als Ihnen das vielleicht lieb ist.

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 Webmaster wenden HTML und CSS nach der Methode Versuch und Irrtum an. Sie wenden einen Tag an, 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.
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 kommen, 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, können und sollten Sie Ihre Webpräsenz auf ein Content Management System 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. Wenn Sie am Ende angelangt sind haben Sie den Anfang wieder vergessen.
Wenn Sie HTML lernen wollen, ist es erforderlich sich die entsprechenden Kenntnisse anzueignen und anschließend direkt 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 u. a. die Lesbarkeit des Codes vereinfachen und dafür sorgen dass Suchmaschinen Ihre Seite "verstehen".
Wenn Sie diese "Befehle" weglassen, verbauen Sie sich die Chance im Suchmaschinenranking weit vorne zu erscheinen. Dazu später mehr...

zurück zum Inhaltsverzeichnis

2. Was ist HTML?

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

3. Wie beginne ich ein Projekt?

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 usw. 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 Je länger die Bezeichnung ist, desto aussagekräftiger ist diese. Eine aussagkräftige Bezeichnung ist für den Besucher wichtig, damit er die Information möglichst schnell findet, die er sucht.
Ich kenne das von mir und Sie wahrscheinlich auch von sich selber. Auf einen Link klicken und dahinter Inhalte zu finden, die nicht dem entsprechen was man erwartet hat, ist ärgerlich.
Lange Bezeichnungen lassen die Navigation aber gegebenenfalls zu gross werden. Ihr Bildschirmplatz und der Ihrer Besucher ist begrenzt, ganz zu schweigen von dem mobiler Endgeräte.
Finden Sie einen guten Kompromiss!

Wenn Sie ein Projekt, dass aus mehr als einer Homepage 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 ggf. 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. D. h. nicht, dass Sie täglich am Rechner sitzen müssen. Aber von Zeit zu Zeit ist es sinnvoll Ihre Website an einigen Stellen zu aktualisieren.
Unter anderem deshalb ist es sinnvoll den Weg einzuschlagen Ihre Homepage selber zu schreiben. Natürlich ist das 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 haben erstellen lassen, zieht die Aktualisierung Ihrer Seite immer Kosten nach sich.

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. Aber das brauchen Sie abhängig vom Zweck Ihrer Webpräsenz vielleicht ja auch gar nicht.

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!

Ob Ihre Wunschdomain zur Zeit noch frei ist können Sie hier prüfen:

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

4. Vorbereitungen

Für die ersten Versuche reicht ein einfacher Texteditor. Der vom Betriebssystem mitgelieferte reicht aus. 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. Aber soweit sind wir noch nicht...

Empfehlenswert ist 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 werden Sie früher oder später ohnehin sehr wahrscheinlich brauchen.

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:

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 o. a. 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 aus anderen Gründen 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

5. Die Syntax von HTML

Bei HTML spricht man nicht von (Programm)"Befehlen" sondern von "Tags".
Das englische "to tag something" heißt frei übersetzt so viel wie "etwas kennzeichnen".
Und das ist genau das, was Sie mit HTML machen: Sie kennzeichnen einen bestimmten Bereich mit einem oder auch mehreren tags, damit der Browser Ihren Text so darstellt, wie Sie das haben wollen.
Sie erinnnern sich: HTML ist eine Seitenauszeichnungssprache. Sie zeichnen (bzw. kennzeichnen) bestimmte Bereiche Ihrer Seite mit Tags aus.
Das ist das grundlegende Prinzip von HTML.

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

5.1 Single und Nichtsingle tags

Es gibt einige wenige single tags. Diese stehen entweder komplett alleine oder hinter dem Bereich, den sie kennzeichnen sollen.

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

Die meisten tags bestehen aber aus einem einleitenden und einem schliessenden tag.
Einleitendes und schliessendes Tag umschliessen das zu kennzeichnende Element und sind identisch bis auf den Unterschied, das das schliessende Tag einen Schrägstrich vor dem eigentlich Tag hat.

Beispiel für ein single tag: <br>

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

zurück zum Inhaltsverzeichnis

5.2 Tags mit und ohne Einfluss auf das Aussehen Ihrer Webseiten

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:

  1. Meta Tags
  2. Tags, die der (internen) Seitenstrukturierung dienen
  3. Kommentar Tags

Zu 1: Meta Tags werden im Dateikopf Ihrer 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

5.3 Das Grundgerüst einer HTML Datei

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

5.3.1 Das minimale Grundgerüst einer HTML Datei

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

<!doctype html>
<html>
<head>
<title></title>
</head>
<body>

</body>
</html>

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 natürlich alles Tags sind die keinen Einfluss auf das Aussehen Ihrer Webseite haben und Sie ja auch 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

5.3.2 Das minimale Grundgerüst einer HTML Datei mit Einrückungen

<!doctype html>
<html>
    <head>
        <title></title>
    </head>
    <body>

    </body>
</html>

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 ist egal.

zurück zum Inhaltsverzeichnis

5.3.3 Ein minimales Grundgerüst einer HTML Datei das praxistauglich ist

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

<!doctype html>
<html lang="de">
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <title>Ihr Seitentitel!</title>
    </head>
    <body>
    Ihr Text!
    </body>
</html>

zurück zum Inhaltsverzeichnis

6. Die Bedeutung der einzelnen Tags des Grundgerüsts

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

Bezeichnung des tagsingle tagverändert das Aussehen der SeiteAnzahl Vorkommen im Dokument
<!doctype html>
ja
nein
einmal pro HTML-Datei

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


 
Bezeichnung des tagsingle tagverändert das Aussehen der SeiteAnzahl Vorkommen im Dokument
<html>
nein
nein
einmal pro HTML-Datei

<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 Argument für deutschsprachige Seiten eingefügt werden:

<html lang="de">

Das erfolgt nur in dem einleitenden tag. Das ist nicht zwingend erforderlich, aber sinnvoll. Auf diese Weise teilen Sie Suchmaschinen mit in welcher Sprache Ihr Dokument verfasst ist.
Das kann mit entscheidend sein, ob Ihr Dokument bei Suchergebnissen erscheint.
Außerdem erleichtern Sie Screenreadern Ihr Dokument beim vorlesen richtig auszusprechen.


 
Bezeichnung des tagsingle tagverändert das Aussehen der SeiteAnzahl Vorkommen im Dokument
<head>
nein
nein
einmal pro HTML-Datei

<head>...</head>: Der <head> tag wird unter dem <html> tag notiert.
In ihm werden vorwiegend aber nicht nur Meta Tags notiert. Auch wenn das was Sie innerhalb des <head> tags notieren, im Browser nicht sichtbar ist, sollten Sie Ihre "Kopfdaten" sorgfältig und wohlüberlegt notieren. 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.


 
Bezeichnung des tagsingle tagverändert das Aussehen der SeiteAnzahl Vorkommen im Dokument
<body>
nein
nein
einmal pro HTML-Datei

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


 
Bezeichnung des tagsingle tagverändert das Aussehen der SeiteAnzahl Vorkommen im Dokument
<meta charset="utf-8"/>
ja
nein
einmal pro HTML-Datei

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

Wichtig ist, dass Sie Ihre HTML Dateien auch mit dieser Zeichencodierung abspeichern. Ansonsten werden bspw. 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


 
Bezeichnung des tagsingle tagverändert das Aussehen der SeiteAnzahl Vorkommen im Dokument
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
ja
nein
einmal pro HTML-Datei

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


 
Bezeichnung des tagsingle tagverändert das Aussehen der SeiteAnzahl Vorkommen im Dokument
<title>
nein
nein
einmal pro HTML-Datei

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

Damit sind die Tags des minimalen praxistauglichen Grundgerüsts erläutert. Innerhalb des <head> Tags fehlen noch einige wichtige (Meta) Angaben. Darauf komme ich an anderer Stelle zurück.
Ich möchte Ihnen jetzt erst mal Tags erläutern, die Sie sehr häufig benutzen werden und im Browserfenster sichtbar sind.


 
Bezeichnung des tagsingle tagverändert das Aussehen der SeiteAnzahl Vorkommen im Dokument
<h1>
nein
ja
ggf. mehrmals pro HTML-Datei

<h1>...</h1>: Der "h" Tag kennzeichnet ein Element als Überschrift. Die "1" steht für eine Überschrift 1. Ordnung.
Eine Überschrift 1. Ordnung ist die größte Überschrift. Analog kann man auch die Zahlen 2 bis 6 einsetzen.
Eine Überschrift 6. Ordnung ist dann die kleinste Überschrift.
Das Aussehen dieser Überschriften wiederum lässt sich mit Cascading Style Sheets sowohl was die Größe, Schriftart, Schriftauszeichnung als auch Farbe betrifft modifizieren.
Wie das geht, können Sie auf meiner Seite CSS TUTORIAL nachlesen.


 
Bezeichnung des tagsingle tagverändert das Aussehen der SeiteAnzahl Vorkommen im Dokument
<br>
ja
ja
ggf. mehrmals pro HTML-Datei

<br>: Der <br> Tag bewirkt einen Zeilenumbruch. Wenn Sie eine Zeile innerhalb Ihres HTML Editors umbrechen, ist dieser Zeilenumbruch, wenn Sie die entsprechende HTML Datei mit Ihrem Browser aufrufen, nicht sichtbar.
Ihr Text wird im Browser grundsätzlich als Fliesstext dargestellt, der erst umbrochen wird, wenn der viewport nicht mehr gross genug ist, um den folgenden Text in der gleichen Zeile anzuzeigen.
Wenn Sie also an einer bestimmten Textstelle einen im Browser sichtbaren Zeilenumbruch bewirken wollen, ist es erforderlich, das <br> Tag zu setzen.


 
Bezeichnung des tagsingle tagverändert das Aussehen der SeiteAnzahl Vorkommen im Dokument
<p>
nein
ja
ggf. mehrmals pro HTML-Datei

<p>...</p>: Der <p> Tag steht als Abkürzung für paragraph. Auf deutsch also: Absatz.
Das oben zum <br> Tag gesagte gilt analog für den <p> Tag.
Wollen Sie einen im Browser sichtbaren Absatz erzeugen, ist es erforderlich, den betreffenden Text mit dem <p> Tag auszuzeichnen.


 
Bezeichnung des tagsingle tagverändert das Aussehen der SeiteAnzahl Vorkommen im Dokument
<b>
nein
ja
ggf. mehrmals pro HTML-Datei

<b>...</b>: Der <b> Tag steht als Abkürzung für bold, was übersetzt fett/fett gedruckt bedeutet.
Damit ist auch klar, wie ein Element, das mit diesem Tag ausgezeichnet ist, im Browser dargestellt wird.


 
Bezeichnung des tagsingle tagverändert das Aussehen der SeiteAnzahl Vorkommen im Dokument
<i>
nein
ja
ggf. mehrmals pro HTML-Datei

<i>...</i>: Das <i> Tag steht als Abkürzung für italic, was übersetzt kursiv bedeutet.
Entsprechend wird ein Element, das mit diesem Tag ausgezeichnet ist, im Browser kursiv dargestellt.


Jetzt kommt ein tag, der beispielsweise wichtig ist, um mathematische Ausdrücke korrekt in HTML darstellen zu können.

Bezeichnung des tagsingle tagverändert das Aussehen der SeiteAnzahl Vorkommen im Dokument
<sup>
nein
ja
ggf. mehrmals pro HTML-Datei

<sup>...</sup>: Das <sup> Tag steht als Abkürzung für superscript, was übersetzt hoch gestellt bedeutet.
Entsprechend wird ein Element, das mit diesem Tag ausgezeichnet ist, im Browser hoch gestellt dargestellt.


Der entsprechende tag, der das Gegenteil nämlich ein tiefer stellen bewirkt, ist beispielsweise hilfreich, um chemische Formeln korrekt in HTML darstellen zu können.

Bezeichnung des tagsingle tagverändert das Aussehen der SeiteAnzahl Vorkommen im Dokument
<sub>
nein
ja
ggf. mehrmals pro HTML-Datei

<sub>...</sub>: Das <sub> Tag steht als Abkürzung für sub, was frei übersetzt soviel wie tiefer bedeutet.
Entsprechend wird ein Element, das mit diesem Tag ausgezeichnet ist, im Browser tiefer gestellt dargestellt.


 
Bezeichnung des tagsingle tagverändert das Aussehen der SeiteAnzahl Vorkommen im Dokument
<hr>
ja
ja
ggf. mehrmals pro HTML-Datei

<hr>: Der <hr> Tag steht als Abkürzung für horizontal ruler. Übersetzt heißt das horizontales Lineal.
Der <hr> Tag erzeugt eine waagerechte Linie und gleichzeitig einen neuen Absatz im viewport.
Sie können den <hr> Tag hinter dem letzten Wort Ihres vorherigen Absatzes oder vor dem ersten Wort Ihres kommenden Absatzes oder in einer eigenen Zeile notieren.
Ich bevorzuge die letztgenannte Variante, weil der Quelltext so für mich am besten lesbar ist.

Mit den Tags des Grundgerüsts und den oben aufgeführten Basis Tags sind Sie in der Lage, rudimentäre HTML Dateien zu erstellen.

Wenn Sie bis hierhin gelesen haben, macht es Sinn HTML Dateien zu erstellen, erste Inhalte zu schreiben und mit den Tags zu experimentieren.
Diese Dateien ergänzen Sie später, um Ihre Navigation, Bilder, Links usw.
Wie Sie das bewerkstelligen werde ich Ihnen, sobald ich Zeit dafür finde, auf dieser Seite erläutern...

zurück zum Inhaltsverzeichnis

7. HTML Tutorial Video Kurs

Als Ergänzung empfehle ich Ihnen sich folgendes Video von Mike Dane anzusehen:

HTML Full Course
HTML Videokurs für Anfänger in englischer Sprache.

zurück zum Inhaltsverzeichnis

Das könnte Sie auch interessieren:

CSS TUTORIAL

Mit HTML strukturieren Sie Ihren Inhalt.
Im nächsten Schritt erstellen Sie mit Cascading Style Sheets ein Layout und sorgen dafür, das Ihre Seite gut aussieht.
Wie Sie das bewerkstelligen, erfahren Sie hier!

JAVASCRIPT TUTORIAL

Wenn Ihre Website interaktiv sein soll, ist Programmierung erforderlich.
Die meisten Webseiten verwenden dazu JavaScript, da diese Sprache zu diesem Zweck geschaffen wurde.
Wenn Sie JavaScript lernen wollen, ist dieses JavaScript Tutorial ein sehr guter Einstieg!

LITERATUR

Kenntnisse über HTML und CSS sind Voraussetzung, wenn man seine Website selber erstellen will. Ohne Suchmaschinenoptimierung wird Ihre Website keinen Erfolg haben. Je nach Projekt brauchen Sie zusätzlich Wissen über Programmiersprachen, Content Management Systeme und mehr.
Auf dieser Seite finden Sie Literatur rund um alle Themen, die sich mit der Erstellung eines Websiteprojekts beschäftigen!


Die Datei wurde zuletzt aktualisiert am: 05.04.2020