HTML lernen – Alles was Du über HTML wissen musst

eServiceMaster

vor 5 Jahren

Du möchtest HTML lernen? Du weißt aber nicht wo Du anfangen sollst?

Dann bist Du hier genau richtig.

Ich zeige Dir nämlich was HTML ist und wie es aufgebaut ist. Abschließend lernst Du die verschiedenen Elemente kennen. Damit kannst und solltest Du dem Inhalt die richtige Bedeutung geben.

Was Du brauchst um HTML lernen zu können

Grundsätzlich brauchst Du nur einen Computer, Texteditor und einen Browser. Manch einer sagt, dass man unbedingt einen Webserver oder einen Hosting Anbieter braucht.
Um HTML lernen zu können, ist es jedoch nicht notwendig.

So etwas brauchst Du erst, wenn Du etwas veröffentlichen willst.
Für die Darstellung deiner Texte reicht ein Browser aus. Ich empfehle Dir einen der 3 folgenden Browser: Chrome, Opera oder Firefox.

Einen dieser Browser brauchst Du auch für eine unkonventionelle Anleitung für das CSS lernen.
Ansonsten brauchst Du eigentlich nichts. Nur die Bereitschaft etwas neues zu lernen.

Du kannst natürlich noch einen Schritt weiter gehen. Du könntest Dir noch lokal einen Server erstellen.
Wenn Du Windows nutzt, empfehle ich dir XAMPP oder WAMP Server. Der WAMP Server ist nur für das Betriebsystem Windows verfügbar. Für andere Betriebssysteme kannst Du auch XAMPP nutzen.

Was ist HTML eigentlich?

Ich könnte Dir jetzt die Geschichte von HTML erzählen. Das brauchst Du aber nicht wirklich, oder?
Was Du aber wissen musst: Um Inhalte richtig definieren zu können, ist ein bestimmtes Format notwendig. Irgendwie muss der Browser ja auch wissen, ob es sich hier um ein Bild, Text oder eine Überschrift handelt. Ohne die Formatierung von Inhalten klappt das leider nicht.

Übrigens nutzen Suchmaschinen auch diese Formatierungen. Andernfalls könnten Sie relevanten Inhalt zu Suchbegriffen nicht richtig einordnen.

PS Wie Du Deine Seite für Suchmaschinen optimierst, zeige ich dir mithilfe der 7 SEO Tipps. Dadurch kommst Du an weitaus bessere Positionen bei Suchmaschinen. Und bekommst natürlich mehr Besucher.

Grundlage für die Formatierung ist XML. Also HTML ist sozusagen ein XML-Format. Das bedeutet Extensible Markup Language. Jeder Inhalt kann damit einem Typ zugeordnet werden.
Es wird also genutzt um Inhalte zu strukturieren und sie semantisch auszuzeichnen (s.a. Semantik).

Falls Dir es noch nicht klar ist, hilft Dir sicherlich ein Beispiel.

Was hat HTML mit einem gut gegliederten Text zu tun?

Du hast sicherlich schon einmal Word genutzt. Um die Hauptüberschrift zu definieren, musst Du nur einen Button drücken. Intern definiert Word den Text mit einem Marker.

Damit kann Word auch ein Inhaltsverzeichnis automatisch erzeugen.
Ohne die Markierung könnte Word das nicht automatisch.

Das gleiche macht man mit HTML.

Dabei wird die Information in HTML immer mit dem Marker umschlossen.

<h1>Deine Hauptüberschrift</h1>

So wird die Hauptüberschrift umschlossen. Dadurch kann der Browser erkennen, dass es sich um den Titel handelt. Andere Software natürlich auch. Natürlich benötigen Crawler für Suchmaschinen diese Informationen auch.

Warum Du HTML lernen solltest

HTML ist der Grundbaustein für jede Webseite. Ohne HTML geht da nichts. Darum solltest Du zumindest als Besitzer einer Webseite darüber bescheid wissen.

Du kannst natürlich sagen: „Ich nutze ein CMS. Das brauche ich dann nicht wissen.“

Bestimmt nutzt Du eines von vielen Content Management Systeme, aber es kann schon vorkommen, dass Du ab und an HTML einbauen musst.

Ich finde es wichtig, dass man wenigstens ansatzweise versteht,was man da überhaupt macht.

Der Grundaufbau von HTML

Der folgende Code zeigt den Grundaufbau eines HTML-Dokuments:

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<!-- Meta-Daten und andere Ressourcen, wie Stylesheet und JavaScript Dateien -->
</head>
<body>
<!-- content -->
<header>
<!-- Logo, Navigation oder andere im Head-Bereich -->
</header>
<div class="main-content">
<h1>Die Hauptüberschrift des Dokumentes</h2>
<p>Eine Einleitung</p>
</div>
<!-- div.main-content -->
<footer>
<!--  Navigation des Footers, CopyrightIinformationen, etc. -->
</footer>
</body>
</html>

Füge den Code in ein Textdatei über einen Editor ein. Und speichere das Dokument als [ihr_name_der_datei].html ab.

Danach kannst Du die Datei in einem Browser (Firefox oder Chrome; Doppelklick oder Öffnen mit…) öffnen. Du siehst nun eine Seite mit dem Text „Die Hauptüberschrift des Dokumentes“ und „Eine Einleitung“. Es ist also das Dokument, dass Du gerade abgespeichert hast.

Jedes Dokument sollte einen Head und Body Bereich beinhalten. Im Head Bereich kommen Meta Daten, eingebundene CSS Dateien rein. Der Body besitzt den Inhalt der Webseite.

Der Head Bereich

Wie bereits besprochen beinhaltet der Head Bereich zusätzliche Informationen zu dem HTML-Dokument. Hierbei können sehr viele Informationen mitgeliefert werden. Deshalb begrenzen wir in erster Linie die Möglichkeiten.

Der Head beinhaltet den sogenannten Titel der Webseite. Über das Element erstellen Suchmaschinen den Titel der Ergebnisse. Sie sind im Tag „<title>Dein Titel</title> eingebettet.
Daneben können viele verschiedene Meta-Daten gesetzt werden:

Seitenbeschreibung: <meta name=“description“ content=“Hier sollte deine Seitenbeschreibung rein“/>
Schriftcodierung: <meta charset=“UTF-8″/>
Viewport: <meta name=“viewport“ content=“width=device-width, initial-scale=1, maximum-scale=1″>

Die Seitenbeschreibung dient als Kurzbeschreibung für den Inhalt der Seite. Die Beschreibung in den Suchmaschinenergebnissen basieren auf diesen Informationen.
Die Schriftcodierung sollte jetzt immer utf-8 sein. Ältere Webseiten können immer noch andere Codierungen nutzten.

Der letzte Punkt macht die Webseite überhaupt responsive. Damit ist es möglich für Mobilgeräte ein anderes Aussehen zu definieren.

Es gibt noch viele weitere Metal-Daten, wie z.B. für Social Media Seiten. Jedoch besprechen wir hier nicht alle.

Neben den Metal-Daten können noch bspw. CSS Dateien eingebunden werden: <link rel=“Stylesheet“ type=“css/text“ href=“link-zur-css-datei.css“ / >

Natürlich können auch Javascript-Dateien eingebunden werden. Wobei sie von jeder Stelle geladen werden können. CSS kann jedoch nur im Head oder Asynchron geladen werden.

Der Body

Der Body beinhaltet alles, was gelesen und angeschaut werden kann. Hierzu gehört der Text, Bilder, Videos oder sonstige Animationen.

Elemente in HTML lernen

Nun kommen wir zu den Elementen im Body. Dazu beginnen wir als allererstes mit den Containern. Anschließend kümmern wir uns um die textlichen Elemente. Danach geht es um Elemente anderer medialer Form, wie Audio oder Video. Im letzten Punkt kümmern wir uns noch um Formulare.

Alle Elemente mit Inhalt beginnen mit <Elementname>Der Inhalt&lt/Elementname>. Der Inhalt wird somit mit den Tagnamen umschlossen.

Es gibt auch Elemente ohne inneren Inhalt. Hierbei erfolgt der Inhalt über die Werte aus Attributen. Das verstehst Du gleich besser.

Container-Elemente in HTML lernen

Ein Container ist ein Element, welches textliche oder mediale Inhalte besitzt.
Das gängigste Element ist der div Container.

Dieser Container erhielt deshalb viele verschiedene Klassen und IDs. Das sind Attribute in Elementen. Später mehr dazu. Da es andere Elemente gibt, sind alle Elemente innen ihre Kinder oder Nachfahren.

Auch heute werden noch oft div Container genutzt. Aber heute können noch andere Elemente genutzt werden.

Natürlich haben sie die gleiche Eigenschaften wie ein div. Aber sie sollen der Übersicht für den Entwickler dienen.

Es handelt sich um die Elemente header, footer, section und sidebar.

Ich denke die Namen sprechen für sich.
Du kannst Dank HTML 5 auch eigene Elemente benennen. Jedoch baut der Browser sie dann zu divs wieder um.

Textliche Elemente in HTML lernen

Textliche Elemente gibt es weitaus mehr als Container Elemente. Daher teilen wir sie in diesem Abschnitt nochmals auf.

Überschritten

Alle Überschriften beginnen mit einem h. Und sie Enden mit einer Zahl.
Damit ist die Hauptüberschrift als h1 vorhanden.

<h1>Deine Hauptüberschrift</h1>

Es gibt 6 Überschritten. Von h1 bis h6. Solltest Du h6 verwenden, dann muss vorher h5 gesetzt sein. Dann würde h4 vorher genutzt.

Ich hoffe Du verstehst das. Natürlich könntest Du es auch ganz anders machen
Aber das wäre nicht semantisch. Es würde daher wenig Sinn machen.

Paragraphen und Listen in HTML lernen

Da der meiste Inhalt einer Webseite aus Text besteht, solltest Du unbedingt die Paragraphen und den Aufbau von Listen kennen.

Paragraphen

Nun ein Text besteht grundsätzlich aus Paragraphen. Ein Paragraph ist ein Textabschnitt in einem größeren Text.
Sein Tag-Name lautet p.

<p>Das ist ein Paragraph </p>

Ein Paragraph kann neben dem Text noch weitere Elemente beinhalten: Links, span-Elemente und Zeilenumbrüche.

Das Element ist für den Zeilenumbruch notwendig. Links und das Span Element werden im nächsten Abschnitt besprochen.

Für den Text gibt es noch weitere Möglichkeiten ihn anders darzustellen und semantisch auszuzeichnen.

Damit Du alle anderen Elemente kennst, Liste ich sie Dir hier kurz auf.

Dicker Text: Fette Schrift – ohne semantische Bedeutung
Dicker Text: Fette Schrift – mit betonender Bedeutung
Kursüber Text: kursive Schrift – ohne semantische Bedeutung
Schutz vor Umbruch: Fette Schrift – ohne semantische Bedeutung
: Umbruch

Listen

Listen sind ein wichtiges Instrument um Inhalt zu gliedern. Daher nutzt man sie öfters. Es gibt zwei unterschiedliche Typen von Listen: geordnete und ungeordnete Listen.

<!-- ungeordnete Liste -->
<ul>
<li>Listeneintrag</li>
<li>Listeneintrag</li>
<li>Listeneintrag</li>
</ul>

<!-- ungeordnete Liste -->
<ol>
<li>Listeneintrag Nr. 1</li>
<li>Listeneintrag Nr. 2</li>
<li>Listeneintrag Nr. 3</li>
</ol>

<!-- Liste in Liste-->
<ul>
<li>Listeneintrag
    <ol>
      <li>Listeneintrag</li>
      <li>Listeneintrag</li>
      <li>Listeneintrag</li>
    </ol>
</li>
<li>Listeneintrag</li>
<li>Listeneintrag</li>
</ul>

Wie Du siehst, es ist ganz einfach. Du kannst Listen ineinander verschachteln. Es lassen sich natürlich auch andere HTML Elemente einbauen.

Das Hilfsmittel span

Das Element span ist eine Hilfskonstruktion um textliche Veränderungen zu erzielen. Wenn ein kleiner Teil des Textes zum Beispiel eine andere Farbe haben soll. Dann umschließt Du ihn einfach mit einem span.

<p>Dein Text soll <span class="Red"&GT;rot</span> sein</p>

<style>
p span.red {color: red;}
</style>

Das Element setzt man nur ein, wenn kein anderes Element Sinn macht.

Links in HTML lernen

Links sind notwendig um auf andere Seiten zu verweisen. Ein Link besitzt immer das Ziel im href-Attribut. Hierbei kann das Ziel ein interner Verweis sein. Dabei könnte der Wert bspw. /deine-seite sein. Ein Link zu einer anderen Seite kann bspw. https://www.eine-andere-seite.de/eine-Seite sein.

Außerdem können auch sog. Hashes genutzt werden. Das geht so: <a href=“#dein-anker“>Ein Anker Link</a>.

Damit ist es möglich auf andere Elemente in der Seite zu springen. Nützlich ist das z.B. bei einem Inhaltsverzeichnis.

Du kannst außerdem festlegen ob der Link im gleichen oder anderen Fenster geöffnet werden soll.
Hierzu nimmt man das Attribut target. Für ein anderes Fenster braucht es den Wert _blank.

Tabellen in HTML lernen

Tabellen sind eine gute Form Daten zu präsentieren. Darum zeige ich Dir einmal wie das geht.

<table>
    <thead>
       <th>Spalte 1</th>
       <th colspan="2">Spalte 2 - doppelte Spaltengröße</th>
    </thead>
    <tbody>
       <tr>
           <td>Inhalt Spalte 1 - Zeile 1</td>
           <td> Inhalt Spalte - Zeile 1</td>
       </tr>
       <tr>
           <td>Inhalt Spalte 1 - Zeile 2</td>
           <td> Inhalt Spalte - Zeile 2</td>
       </tr>
    </tbody>
</table>

In th sind die Spaltennamen vorhanden. Sie befinden sich immer in thead.

Dabei beinhaltet der tbody immer den Inhalt der Tabelle. Eine Zeile ist im Element tr vorhanden. Der Inhalt der Zeile je Spalte in td.

Mediale Elemente in HTML lernen

Bilder sagen oft mehr als Worte. Deshalb werden oft Bildet auf Webseiten genutzt.

Ein Bild wird über das img aufgebaut.

<img src="bild-url" title="Titel des Bildes" alt="Beschreibung des Bildes" />

Die URL des Bildes ist im src-Attribut zu finden. Kann ein Bild nicht angezeigt werden, hilft das alt-Attribut. Dann wird der Inhalt des Attributs angezeigt.

Formulare in HTML lernen

Formulare sind notwendig um Nutzereingaben zu sammeln. Hierbei denken viele an ein Kontaktformular. Aber der Login zu einer Seite braucht auch ein Formular.

Also sind Formulare extrem wichtig. Wir schauen uns einmal ein einfaches Formular an.

<form method="POST" action="deine-ziel-url">
<label for="username">Username</label>
<input type="text" id="username" name="username" value="" placeholder="Username"/>

<label for="password"> Passwort</label>
<input type="password" id="password" name="password" value="" placeholder="Passwort"/>

<input type="submit" value="Einloggen" />
</form>

Das Formular besitzt den Namen form. In unserem Beispiel nutzen wir zwei Attribute: action und method.

Das Attribut method bezieht sich auf die Übergabeart der Daten. GET übergibt die Werte in der URL. POST hingegen nicht.

Um die Daten zu verarbeiten braucht man ein Ziel. Hier wird die URL in das Attribut action eingetragen.

Im Formular können nun verschiedene Felder genutzt werden. Einfachhalber nennen wir erstmal alle im Beispiel.

Ein einfaches Eingabefeld ist immer vom Typ input. Hierbei kann es verschiedene Typen besitzen. Wir nutzen text, password und submit.

Das Passwort Feld ist wie ein Input-Feld des Typs text. Jedoch werden die Zeichen als Punkte dargestellt.
Um das Formular abschicken zu können, braucht es schließlich einen Schalter. Hierzu wird das Input-Feld des Typs submit genutzt.

Weitere Formularfelder

Natürlich braucht man noch weitaus mehr Möglichkeiten. Daher nenne ich Dir erstmal altbekannte.

E-Mail Input-Feld
Select-Boxen
Checkboxen
Radiobuttons

<form>
<input type="email" name="email" value="" />

<select name="auswahl_box">
<option value=""></option >
<option value="auswahl1">Auswahl Nr. 1</option >
<option value="auswahl2">Auswahl Nr. 2</option >
</select>

<input type="checkbox" name="ist_gecheckt" checked="checked" />

<input type="radio" name="auswahl_feld" value="Ein Wert" />
</form>

Ja richtig. Das hast Du sicherlich gleich gesehen. Das Form-Element hat keine Attribute. Das ist jedoch nicht so schlimm.

In diesem Fall sendet das Formular die Daten an die gleiche URL der Seite. Und die Übertragungsart ist dann GET.

Ansonsten ist das Feld Input vom Typ email auch wie vom Typ text. Aber im Normalfall führt der Browser eine Validierung durch. Das muss dann nicht selbst gemacht werden.
Natürlich sieht die Nachricht bei nicht bestandener Validierung je Browser anders aus. Du kannst sie mit dem Attribut novalidate im form-Elementunterbinden.

Dann solltest Du aber eine eigene Validierung durchführen.

Das select Element besitzt die Elemente mit dem Namen option. Dabei erscheinen die Texte zwischen den Elementen im Browser. Hingegen übergibt das Formular den Wert des Attribut value der ausgewählten Option.

Die Checkbox übergibt den Wert nur, wenn diese gewählt wurde. Hierbei wird das Attribut checked gesetzt. Ist es nicht gewählt, sendet das Formular keine Daten des Feldes.

Radiobuttons sind gut geeignet um aus mehreren Möglichkeiten nur eine auswählbar zu machen. Stell Dir dazu einmal eine Quiz-App mit mehreren Antwortmöglichkeiten vor. Genau hierfür wären Radiobuttons perfekt geeignet.

Attribute in HTML lernen

Du hast bereits Attribute kennen gelernt. Links besitzen href-Attribute, Bilder src-Attribute. Ich will Dir jetzt auch nicht alle Elemente mit den Attributen auflisten.

Mir geht es um die Möglichkeit für die Standard-Attribute id und class.

Sie sind exzellente Helfer zur Identifikation. Für CSS-Anweisungen, wie auch zur Selektion von Elementen für Javascript sind sie perfekt geeignet. Du kannst allen Elementen diese Attribute geben.

Zweitens kannst Du auch Attribute erfinden. Im Normalfall hat das keine Auswirkung auf die normalen Browserfunktionen.

Aber mittels Javascript kannst Du sehr viele Dinge damit machen. Nur zur Vollständigkeit für dich. Ich werde hier nicht darüber schreiben.

Sonderzeichen in HTML lernen

Du bist der deutschen Sprache mächtig. Dann schreibst Du höchst wahrscheinlich auch ab und an ein ä, ü, usw.
Das sind Sonderzeichen. Diese werden heutzutage abgefangen. Aber es gibt weitaus mehr Sonderzeichen, die Du wahrscheinlich gebrauchen könntest.
Eine Liste der HTML Sonderzeichen findest du hier.

Alle Sonderzeichen beginnen mit einem &-Zeichen und Enden mit einem Semikolon (;).
Mehr musst Du wohl zu dem Thema nicht wissen.

HTML im Browser bearbeiten

Du hast das Dokument wahrscheinlich noch offen. Wenn nicht öffne es noch mal. mache einen rechtsklick mit der Maus und wähle den Punkt Element untersuchen. Manchmal heißt der Punkt auch Untersuchen.

HTML lernen – Element untersuchen in Chrome einer HTML-Seite

Durch die Auswahl von „Element untersuchen“ öffnet sich der untere Bereich. Hier sind verschiedenen Bereiche klassifiziert. Das Bild zeigt alle aktuellen HTML-Elemente. Nun kannst Du verschiedene Dinge mit den HTML-Elementen machen. Es ist möglich neue Elemente in das Dokument einzufügen (1). Es können Elemente verschoben werden (2). Außerdem kann man Elemente optisch angepassen (3).

Mit Punkt 3 befassen wir uns hier nicht. Das kannst Du im Beitrag CSS lernen kennen lernen.

Das Einfügen, Verschieben und Löschen von HTML lernen

Wir führen als allererstes einen neuen Text im Browser hinzu. Dazu nutzen wir einen Lorem Ipsum Generator. Er erstellt uns automatisch Text.

HTML lernen – neue HTML-Elemente einfügen

Ein Rechtsklick auf den HTML Baum bietet einige Optionen. Wähle die gewünschte Stelle in der Struktur aus. Danach kannst Du „Edit as HTML“ oder „HTML bearbeiten“ wâhlen. Damit ist es Dir möglich das Element und seine Kind-Elemente in Textform zu bearbeiten.

Folgender Code wurde nach dem Element Eine Einleitung hinzugefügt.

...
<p>Eine Einleitung</p>
<h2>Ein unglaublich toller Titel</h2>
<p>Lorem ipsum dolor ...</p>

Änderungen sind also leicht zu bewerkstelligen. Achte aber darauf, dass die Änderungen nur im Browser sind. Damit sie immer da sind, musst Du sie natürlich in der Datei abspeichern.

Das Löschen und Verschieben ist ebenfalls eine leichte Prozedur. Um HTML-Elemente zu verschieben muss das Element mit der Maus angewählt werden. Die linke Maustaste gedrückt halten und an die gewünschte Stelle schieben.
Schon fertig.

Das Löschen von Elementen ist auch ganz einfach. Das gewünschte Element sollte mit einem Linksklick ausgewählt werden. Anschließend die Löschen-Taste auf der Tastatur (Entf) drücken.

Du siehst, es ist relativ simpel im Browser Elemente zu verändern.

HTML lernen – Die nächsten Schritte

Wie Du sicherlich weißt, macht erst Übung den Meister. Das gilt auch für das HTML lernen. Darum solltest Du unbedingt HTML schreiben. Nur dann musst Du nicht mehr lange überlegen für welchen Inhaltstyp welches Element notwendig ist.

Ich empfehle Dir aber nicht alles auf einmal. Du solltest erstmals die inhaltlichen Elemente immer wieder ausprobieren. Damit wirst Du immer sicherer.