HTML ist das Rückgrat des heutigen Internets. Millionen von Websites bilden zusammen das Internet. Dabei ist HTML der Baustein all dieser Websites. Vor zwanzig Jahren musste man selbst als Hobby-Blogger einige Kenntnisse im Webcode haben, um sich zu schützen oder einfache Funktionen zu seiner Website hinzuzufügen. Heute gibt es jedoch so viele Editoren und Plugins, dass selbst HTML-Grundkenntnisse nicht mehr erforderlich sind.
Das Problem dabei ist: Wenn Sie einige grundlegende Dinge nicht kennen, können Sie mit Ihrem Blog schnell in ernsthafte Schwierigkeiten geraten und einen teuren Entwickler beauftragen müssen, um ein möglicherweise kleines Problem zu beheben. Darüber hinaus erfordert das Vornehmen von Änderungen an Ihrem Blog, wie z. B. das Hinzufügen eines benutzerdefinierten Text-Widgets, ein gewisses Wissen.
Und wenn das Layout Ihrer Inhalte nicht richtig aussieht, können HTML-Kenntnisse Ihnen dabei helfen, wieder auf den richtigen Weg zu kommen.
Bevor Sie beginnen – Die Grundlagen von HTML
Was ist HTML?
HTML ist die Abkürzung für Hyper Text MArkupe LSprache. Es ist die Standardsprache zum Taggen von Inhalten für Webbrowser.
HTML wird durch „Elemente“ dargestellt. Elemente werden auch als „Tags“ bezeichnet.
Warum wird HTML benötigt?
Webbrowser können eine Website nur dann darstellen, wenn sie in der von ihnen unterstützten Sprache geschrieben ist. HTML ist die am weitesten verbreitete Auszeichnungssprache und wird von Webbrowsern am häufigsten akzeptiert.
Deshalb brauchen Sie HTML.
Ist HTML groß- und kleinschreibungsempfindlich?
HTML unterscheidet nicht zwischen Groß- und Kleinschreibung. Die beste Vorgehensweise besteht jedoch darin, HTML mit der korrekten Groß- und Kleinschreibung zu schreiben.
Schritte zum Erstellen Ihrer ersten HTML-Datei
Sie können mit dem Editor auf Ihrem Computer eine einfache HTML-Datei erstellen. Das Schreiben vieler Codezeilen wird jedoch mühsam sein.
Sie benötigen einen Code-Editor. Ein guter Code-Editor erleichtert das Schreiben und Organisieren umfangreicher Codes. Ich verwende und empfehle Notepad++ (kostenlos und Open Source) zum Schreiben von Websprachen. Es gibt auch andere Editoren wie Sublime Text, Atom usw.
Hier ist was du tun musst:
- Installieren Sie einen Code-Editor
- Öffne es
- Erstellen Sie eine neue Datei
- Speichern Sie es als HTML-Datei
1. Hallo Welt!
Kopieren Sie den folgenden Code, fügen Sie ihn in Ihre neue HTML-Datei ein und speichern Sie sie. Führen Sie ihn anschließend in Ihrem Webbrowser aus.
HTML-Code
<!DOCTYPE html>
<html>
<head>
<title>My first web page</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
Ausgang:
Herzlichen Glückwunsch! Sie haben Ihre erste HTML-Datei erstellt. Sie müssen sie jetzt noch nicht verstehen. Wir werden sie gleich behandeln.
Grundlegendes zur HTML-Struktur
Jede HTML-Datei hat eine gemeinsame, nackte Struktur. Hier beginnt alles. Und jede größere Codeseite erhält nach der Verkleinerung diese Struktur.
Versuchen wir es anhand des „Hello World!“-Codes zu verstehen. Die folgenden Elemente sind die obligatorischen Teile jeder HTML-Datei.
- = Es ist eine Erklärung an den Browser, dass es sich um eine HTML-Datei handelt. Sie müssen dies vor dem Etikett.
- = Dies ist das Stammelement einer HTML-Datei. Alles, was Sie schreiben, geht zwischen Und .
- = Dies ist der Metadatenteil für einen Browser. Codes innerhalb dieses Tags haben keine visuelle Ausgabe.
- = Dies ist der Teil, den ein Webbrowser rendert. Was Sie auf einer Website genau sehen, ist die Darstellung von Codes zwischen Und .
2. HTML-Tags
HTML ist das Zusammenspiel von Hunderten verschiedener Tags. Sie müssen lernen, wie sie funktionieren. Außerdem müssen Sie sicherstellen, dass Sie sie richtig verwenden.
HTML-Tags bestehen üblicherweise aus einem öffnenden und einem schließenden Tag. Der öffnende Tag enthält das Schlüsselwort, umgeben von einem Kleiner-als-Zeichen (<) und einem Größer-als-Zeichen (>). Der schließende Tag enthält alles Gleiche, außer einem zusätzlichen Schrägstrich (/) nach dem Kleiner-als-Zeichen (<).
Head-Tags
Alle Head-Tags gehen zwischen Und . Sie enthalten Metadaten für Webbrowser und Suchmaschinen. Sie haben grundsätzlich keine visuelle Ausgabe.
Der Titel-Tag definiert den Titel einer Webseite, der im Browser-Tab angezeigt wird. Diese Information wird von Webprogrammen und Suchmaschinen verwendet. Pro HTML-Datei ist maximal ein Titel möglich.
Code:
<title>My first web page</title>
Der Link-Tag verknüpft Ihre HTML-Seite mit externen Ressourcen. Seine Hauptanwendung ist die Verknüpfung von HTML-Seiten mit CSS-Stylesheets. Es ist ein selbstschließender Tag und benötigt keine Endung. . Dabei steht rel für die Beziehung zur Datei und src bedeutet die Quelle.
Code:
<link rel="stylesheet" type="text/css" src="style.css">Meta ist ein weiterer selbstschließender Tag, der Metainformationen einer HTML-Datei bereitstellt. Suchmaschinen und andere Webdienste nutzen diese Informationen. Meta-Tags sind ein Muss, wenn Sie Ihre Seite für Suchmaschinen optimieren möchten.
Code:
<meta name="description" content="This is the short description that search engines show"Das Skript-Tag dient zum Einbinden eines serverseitigen Skripts oder zum Erstellen eines Links zu einer externen Skriptdatei. Das öffnende Tag kann zwei Attribute enthalten: den Typ und die Quelle (src).
Code:
<script type="text/javascript" src="scripts.js"></script>Das Noscript-Tag funktioniert, wenn Skripte in einem Webbrowser deaktiviert sind. Es macht eine Seite für diejenigen kompatibel, die keine Skripte in ihrem Webbrowser zulassen.
Code:
<noscript><p>Alas! Scripts are disabled.</p></noscript>Text-Tags
Alle Body-Tags gehen zwischen Und Sie haben visuelle Ergebnisse. Hier wird die meiste Arbeit erledigt. Sie müssen diese Tags verwenden, um den Inhalt Ihrer Hauptseite zu strukturieren.
Zu
Dies sind die Überschriften-Tags. Die wichtigste Überschrift ist mit und das am wenigsten Wichtige mit . Sie sollten sie in der richtigen Hierarchie verwenden.
Code:
<h1>This is a h1 heading</h1>
<h2>This is a h2 heading </h2>
<h3>This is a h3 heading </h3>
<h4>This is a h4 heading </h4>
<h5>This is a h5 heading </h5>
<h6>This is a h6 heading </h6>Ausgang:
Formatierungs-Tags
Text in einer HTML-Datei kann mit verschiedenen Formatierungs-Tags formatiert werden. Dies ist erforderlich, wenn Sie ein Wort oder eine Zeile im Inhalt hervorheben möchten.
Code:
<p>You can highlight your text in many ways.</p>
<p>You can <strong>bold</strong>, <u>underline</u>, <em>italic</em>, <mark>mark</mark>, <sub>subscript</sub>, <sup>superscript</sup> and more!</p>Ausgang:
Mithilfe des Kommentar-Tags können Sie Codes vom Rendern abhalten. Der Code wird zwar im Quellcode angezeigt, aber nicht gerendert. Der Hauptzweck dieses Tags besteht darin, HTML-Dateien für spätere Verwendung zu dokumentieren.
Ejemplo:
<!-- <p>You can comment out any code by surrounding them in this way</p> -->Andere wichtige HTML-Tags
Anker ist ein unverzichtbares Tag, das fast überall verwendet wird. Sie werden online keine Webseite ohne mindestens einen Ankerlink finden.
Die Struktur ist dieselbe. Sie besteht aus einem einleitenden und einem abschließenden Teil . Der zu verankernde Text steht zwischen und .
Es gibt einige Attribute, die definieren, wohin und wie der Benutzer gelangt, nachdem er darauf geklickt hat.
- ahref=” “ = Definiert den Ziellink. Der Link steht zwischen den Anführungszeichen.
- Ziel = „“ = Es definiert, ob die URL in einem neuen Browser-Tab oder im selben Tab geöffnet wird. target=”_blank” ist für den neuen Tab und target=”_self” ist für das Öffnen im selben Tab.
- rel=” “ = Definiert die Beziehung der aktuellen Seite zur verlinkten Seite. Wenn Sie der verlinkten Seite nicht vertrauen, können Sie rel=”nofollow” definieren.
Code:
<p><a target="_blank" href="https://www.google.com/">Click here</a> to go to Google.
It will open in a new tab.</p>
<p><a target="_self" href="https://www.google.com/">Click here</a>.
It will also take you to Google but will open in the current tab.</p>Ausgang:
Der Bild-Tag ist ein weiterer wichtiger Tag, ohne den viele bildbasierte Websites nicht vorstellbar sind.
ist ein selbstschließendes Tag. Es benötigt nicht den traditionellen Abschluss wie . Es gibt einige Eigenschaften, die Sie kennen müssen, bevor Sie es richtig verwenden können.
- src=” “ = Hiermit wird der Quelllink des Bildes definiert. Setzen Sie den Link direkt zwischen die Anführungszeichen.
- alt=” “ = Steht für Alternativtext. Wenn Ihr Bild nicht geladen wird, gibt dieser Text den Benutzern einen Hinweis auf das fehlende Bild.
- Breite = „“ = Es definiert die Breite eines Bildes in Pixeln.
- Höhe=” “ = Es definiert die Höhe eines Bildes in Pixeln.
<p>This is the Googleplex in August 2014.</p>
<p>This image has a width of 500 pixels and a height of 375 pixels.</p>
<img src="https://upload.wikimedia.org/wikipedia/commons/0/0e/Googleplex-Patio-Aug-2014.JPG"
alt="Google's Headquarter in August 2014" width="500" height="375" />Ausgang:
Tipps: Möchten Sie ein anklickbares Bild einfügen? Umschließen Sie den Bildcode mit einem Tag. So funktioniert es.
oder
Das Listen-Tag dient zum Erstellen einer Liste von Elementen. steht für geordnete Listen (nummerierte Liste) und steht für ungeordnete Listen (Aufzählungspunkte).
Die Listenelemente in der oder ist getaggt mit . li steht für Liste. Sie können beliebig viele wie Sie möchten innerhalb des übergeordneten oder Etikett.
Code:
<p>This is an ordered list:</p>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<p>This is an unordered list:</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>Ausgang:
Mit dem Tabellen-Tag wird eine Datentabelle erstellt. Es gibt einige Tags auf innerer Ebene, die Tabellenüberschriften, Zeilen und Spalten definieren.
ist der äußere übergeordnete Code. In diesem Tag steht für Tabellenzeile, steht für Tischsäule und steht für Tabellenüberschrift.
Code:
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>Profession</th>
</tr>
<tr>
<td>Jo
<td>27</td>
<td>Businessman</td>
</tr>
<tr>
<td>Carol</td>
<td>26</td>
<td>Nurse</td>
</tr>
<tr>
<td>Simone</td>
<td>39</td>
<td>Professor</td>
</tr>
</table>Ausgang:
Hinweis: Werte innerhalb der ersten sind Überschriften. Wir haben also wodurch der Fettdruckeffekt auf den Text angewendet wird.
Tabellengruppierung
Sie können die Funktionalität einer Tabelle mithilfe von Tabellengruppierungselementen erweitern. Manchmal müssen Sie große Tabellen erstellen, die auf mehrere Seiten aufgeteilt sind.
Durch die Gruppierung Ihrer Tabellendaten in Kopf-, Text- und Fußzeile können Sie unabhängiges Scrollen ermöglichen. Kopf- und Textteil werden auf jeder Seite gedruckt, die Ihre Tabelle umfasst.
Die Tags zur Tabellengruppierung sind:
- = Zum Umbrechen der Überschriften einer Tabelle. Wird auf jeder geteilten Seite der Tabelle gedruckt.
- = Zum Umbrechen der Hauptdaten einer Tabelle. Sie können beliebig viele wie Sie brauchen. Ein Tag bedeutet eine separate Datengruppe.
- = Zum Umbrechen der Fußzeileninformationen einer Tabelle. Wird auf jeder geteilten Seite der Tabelle gedruckt.
Bitte beachten Sie, dass die Gruppierung nicht zwingend erforderlich ist. Sie kann verwendet werden, um größere Tabellen lesbarer zu gestalten. Einige spezielle Entwickler verwenden diese Tags jedoch auch als CSS-Selektoren.
So können wir unsere Beispieltabelle gruppieren in , Und :
Code:
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Profession</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>27</td>
<td>Businessman</td>
</tr>
<tr>
<td>Carol</td>
<td>26</td>
<td>Nurse</td>
</tr>
<tr>
<td>Simone</td>
<td>39</td>
<td>Professor</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total Persons:</td>
<td>3</td>
</tr>
</tfoot>
</table>Ausgang:
Formularelemente dienen zur Erstellung interaktiver Formulare für Webseiten. Ein HTML-Formular enthält mehrere aufeinanderfolgende Elemente. Beispiel: , , usw.
Das Aktionsattribut im Formular ist sehr wichtig. Es verweist auf eine serverseitige oder Drittanbieterseite zur Verarbeitung der Informationen. Für die Verarbeitung müssen Sie zunächst eine Methode definieren.
Sie können eine der beiden Methoden „Get“ oder „Post“ verwenden. „Get“ sendet alle Informationen im URL-Format, während „Post“ die Informationen im Nachrichtentext sendet.
Es gibt viele Eingabetypen für Formulare. Der grundlegendste Eingabetyp ist Text. Er wird wie folgt geschrieben: . Mögliche Typen sind auch Radio, Kontrollkästchen, E-Mail usw. Unten sollte eine Eingabemöglichkeit für den Übermittlungstyp vorhanden sein, um eine Übermittlungsschaltfläche zu erstellen.
Das Tag dient zum Erstellen von Beschriftungen und deren Zuordnung zu Eingaben. Die Regel für die Zuordnung von Beschriftungen zu Eingaben lautet, dass das for=”-Attribut der Beschriftung und das id=”-Attribut der Eingabe denselben Wert aufweisen.
Code:
<form action="#">
<label for="firstname">First Name: </label>
<input type="text" id="firstname"><br>
<label for="lastname">Last Name: </label>
<input type="text" id="lastname"><br>
<label for="bio">Short Bio: </label>
<textarea id="bio" rows="10" cols="30" placeholder="Enter your bio here..."></textarea><br>
<label>Gender:</label><br>
<label for="male">Male</label>
<input type="radio" name="gender" id="male"><br>
<label for="female">Female</label>
<input type="radio" name="gender" id="female"><br>
<input type="submit" value="Submit">
<form>Ausgang:
Hinweis: Ich habe der Aktion einen Nullwert zugewiesen, da keine Verbindung zu einem Server bestand, um die Informationen zu verarbeiten.
3. HTML-Attribute
Attribute sind eine Art von Modifikatoren für HTML-Tags. Sie fügen den HTML-Tags neue Konfigurationen hinzu.
Ein Attribut sieht wie attributename=” aus und befindet sich im öffnenden HTML-Tag. Der Wert des Attributs steht zwischen den Anführungszeichen.
id=”” und class=””
ID und Klasse sind die Bezeichner von HTML-Tags. Verschiedene HTML-Elemente werden durch Bezeichner mit unterschiedlichen Namen versehen. Sie können einen Klassenbezeichner für mehrere Elemente verwenden. Sie können jedoch nicht einen ID-Bezeichner für mehrere Elemente verwenden.
Code:
<h1 class="heading">This is the main title</h1>href=””
href steht für Hypertext Reference. Sie verweisen Benutzer auf Referenzlinks. Der Ankertag verwendet href, um Benutzer zu einer Ziel-URL zu leiten.
Code:
<a href="https://www.google.com/">Google</a>src=””
src steht für Quelle. Es definiert die Quelle eines Mediums oder einer Ressource, die Sie in der HTML-Datei verwenden. Die Quelle kann entweder eine lokale oder eine Drittanbieter-URL sein.
Code:
<img src="https://upload.wikimedia.org/wikipedia/commons/0/0e/Googleplex-Patio-Aug-2014.JPG" />alt=””
alt steht für Alternative. Es handelt sich um einen Ersatztext, der verwendet wird, wenn ein HTML-Element nicht geladen werden kann.
Code:
<img src="https://upload.wikimedia.org/wikipedia/commons/0/0e/Googleplex-Patio-Aug-2014.JPG" alt="Google's Headquarter" />Stil = „“
Das Style-Attribut wird häufig in HTML-Tags verwendet. Es übernimmt die Aufgabe von CSS innerhalb des HTML-Tags. Ihre Styling-Eigenschaften stehen zwischen den Anführungszeichen.
Code:
<h2 style="color:red">This is another title</h2>4. Codeanzeige: Block vs. Inline
Manche Elemente beginnen immer in einer neuen Zeile und nehmen die gesamte verfügbare Breite ein. Dies sind „Block“-Elemente.
Ex: , , - , Formular usw.
Manche Elemente belegen nur den erforderlichen Platz und beginnen nicht in einer neuen Zeile. Dies sind „Inline“-Elemente.
Ex: , , , , usw.
Sie müssen zwischen Block- und Inline-Elementen unterscheiden, wenn Sie CSS-Stile verwenden. In dieser HTML-Anleitung ist dies nicht unbedingt erforderlich.
Code:
<!DOCTYPE html>
<html>
<head>
<title>My first web page</title>
</head>
<body>
<h2>This is a H2 heading. It has Block display.</h2>
<h2>This is <u>another</u> H2 heading. Here the underline tag has Inline display.</h2>
</body>
</html>Ausgang:
5. Doppelte Anführungszeichen vs. einfache Anführungszeichen in HTML
Diese Frage liegt auf der Hand. Was sollte man in HTML verwenden? Einfache oder doppelte Anführungszeichen? Viele Leute verwenden beides, aber welches ist richtig?
In HTML sind einfache und doppelte Anführungszeichen dasselbe. Sie machen in der Ausgabe keinen Unterschied.
Sie können jeden beliebigen Code verwenden. Es ist jedoch nicht ratsam, beide Codes auf einer Seite zu vermischen. Sie sollten bei jedem Code konsistent bleiben.
6. Semantisches HTML vs. nicht-semantisches HTML
Semantisches HTML ist die neueste Version von HTML, die auch HTML5 genannt wird. Es ist die weiterentwickelte Version von nicht-semantischem HTML und XHTML.
Warum ist HTML5 besser? In früheren Versionen wurden HTML-Elemente durch ID/Klassennamen identifiziert. Beispiel: wurde als Artikel betrachtet.
In HTML5 Tag stellt sich selbst als Artikel dar, ohne dass eine ID/Klassenkennung erforderlich ist.
Dank HTML5 können Suchmaschinen und andere Webanwendungen Webseiten nun besser verstehen. Semantische Websites haben sich als SEO-optimierend erwiesen.
Hier ist eine Liste einiger beliebter HTML5-Tags:
- = Dies dient zum Umschließen des Hauptinhalts, den Sie Ihren Zuschauern zeigen möchten.
- = Dies dient zum Markieren des Header-Teils eines Inhalts, beispielsweise des Titels oder der Autorenmetadaten.
- = Es gibt Ihren Zuschauern einen benutzerdefinierten oder unabhängigen Inhalt vor.
- = Es kann jeden Code wie Kopf-, Fuß- oder Seitenleiste gruppieren. Man könnte sagen, es ist die semantische Form eines Div.
- = Hierhin gehören Ihr Fußzeileninhalt, Ihr Haftungsausschluss oder Ihr Copyright-Text.
- = Es ermöglicht Ihnen, Audiodateien einzufügen, ohne dass es zu Plug-in-Problemen kommt.
- = Gefällt mir , Sie können Videos mit diesem Tag ohne Plugin-Probleme einfügen.
Eine einfache HTML5-Struktur würde folgendermaßen aussehen:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>My first web page</title>
</head>
<body>
<header>
<nav>
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
</nav>
</header>
<main>
<article>
<header>
<h2>This is the title of the article</h2>
<p>Posted by John Doe</p>
</header>
<p>Content of the article goes here</p>
</article>
</main>
<footer>
<p>Copyright 2025 John Doe</p>
</footer>
</body>
</html>7. HTML-Validierung
Die meisten Web-Experten validieren ihren Code nach der Fertigstellung. Warum ist die Validierung eines Codes notwendig, wenn er einwandfrei funktioniert?
Es gibt zwei mögliche Gründe für die Validierung Ihrer Codes:
- Es hilft Ihnen, Ihren Code browser- und plattformübergreifend kompatibel zu machen. Der Code zeigt in Ihrem aktuellen Browser möglicherweise keine Fehler an, in einem anderen jedoch schon. Die Codevalidierung behebt das Problem.
- Suchmaschinen und andere Webprogramme können das Crawlen Ihrer Seite stoppen, wenn diese Fehler enthält. Sie können durch eine Validierung bestätigen, dass keine schwerwiegenden Fehler vorliegen.
Der W3C Validator ist der beliebteste Dienst zur Codevalidierung. Er bietet verschiedene Methoden zur Codevalidierung. Sie können entweder eine Datei hochladen oder den Code direkt in die Validierungs-Engine eingeben.
Der nächste Schritt: Vom Schreiben von HTML zum Erstellen und Hosten Ihrer Website
Da Sie nun die HTML-Grundlagen gut beherrschen, sind Sie auf dem besten Weg, funktionale und gut strukturierte Webseiten zu erstellen. Egal, ob Sie weiterhin manuell programmieren oder einen optimierten Ansatz bevorzugen: Es gibt zahlreiche Tools, die Ihnen bei der Umsetzung Ihrer Projekte helfen.
Wenn Sie Websites erstellen möchten, ohne tief in den Code einzutauchen, sollten Sie Folgendes erkunden unsere Liste der besten No-Code-Website-Builder. Mit diesen Plattformen können Sie mithilfe intuitiver Drag-and-Drop-Oberflächen mühelos professionelle Websites entwerfen und starten – perfekt, um Ihre Ideen schnell in die Realität umzusetzen, ohne dabei an Flexibilität einzubüßen.
Für diejenigen, die ihre HTML-Projekte live schalten möchten, ist die Wahl des richtigen Hosting-Dienstes entscheidend. Schauen Sie sich einige der Die besten Anbieter für statisches Website-Hosting in diesem Handbuch um erschwingliche Optionen zu finden, die Ihre handcodierten Websites perfekt ergänzen.
Egal welchen Weg Sie wählen: Die Kombination aus Ihren HTML-Kenntnissen, den richtigen Tools und Hosting-Lösungen bildet die Grundlage für Ihre Online-Präsenz. Viel Spaß beim Programmieren!
