Während der Erstellung deiner Website bist du möglicherweise auf Begriffe wie HTML-Editor, HTML Code oder HTML-Tags gestoßen. Obwohl die meisten Plattformen zum Erstellen von Websites (wie WordPress) recht einfach zu verwenden sind und keine großen technischen Kenntnisse erfordern, hilft dir das Wissen über HMTL, einige Programmierkonzepte zu verstehen. Du kannst dann besser verstehen, wann du den Style deiner Website verändern musst.
Daher ist es sinnvoll, einige Grundbegriffe zu dem Thema zu verstehen. Du erfährst hier die wichtigsten 10 HTML Codes, die du unbedingt kennen solltest. Anhand von Beispielen wirst du besser verstehen, wie man HTML Codes nutzt.
Was ist HTML?
Das HTML-Akronym stammt aus “Hyper Text Markup Language” oder “Hypertext Markup Language”.
HTML Codes sind die universelle Sprache zum Erstellen und Formatieren von Websites. Sie funktionieren unter jedem Betriebssystem (Windows, Mac, Linux usw.) und mit jedem Browser (z.B. Chrome, Safari oder Mozilla).
Verwende HTML, um deine Website zu formatieren
Obwohl es sich nicht um eine sehr ausgefeilte Programmiersprache handelt, kannst du mit dem Umgang von HTML andere leistungsstärkere Codes einfügen, wie z. B. Javascript. Schauen wir uns nun das Grundelement der HTML-Syntax an: Tags.
HTML-Tags
Die HTML-Sprache besteht aus einem seriellen Tag-System oder Tags, die Anweisungen enthalten und die der Browser wie folgt übersetzt:
- Bilder
- Text
- Hyperlinks
- Listen
- Tabellen usw.
Damit ein Element dieses Typs gelesen werden kann, muss das Tag aus zwei Teilen bestehen: Einem Start-Tag <tag> und einem Schluss-Tag </ tag> - dazwischen ein Bindestrich (<>).
Beispielsweise definieren die Tags <strong> und </ strong> Fettdruck. Wenn wir in unserem HTML-Dokument einen Satz mit folgendem Code schreiben:
<strong> Dieser Text ist fett gedruckt. </ strong>Das Ergebnis:
Dieser Text ist fett gedruckt.
Versuch es selbst! Füge den obigen Code in einen HTML-Viewer ein.
Wie du vielleicht bemerkt hast, wird das anfängliche Tag verwendet, um das Verhalten des Inhalts zu definieren (z.B. wenn ein Text fett ist oder eine bestimmte Größe hat), und das schließende Tag teilt dem Browser mit, wie weit dieses Verhalten gehen soll. Um den “Verschluss” zu erstellen, musst du nur einen Schrägstrich (/) am Anfang des Etiketts einfügen.
Beachte: Wenn du das schließende Tag nicht einfügst, wird alles, was du nach dem Start-Tag eingeben hast, in diesem Format angezeigt.
Denke daran, dass nicht alle Tags unbedingt einen “Verschluss” benötigen. Beispielsweise wird der <br> Code zur Eingabe von Zeilenumbrüchen als “leeres Element” betrachtet und kann an einer beliebigen Stelle im Textkörper von selbst verwendet werden.
Bei der Erstellung von Websites kannst du mithilfe von HTML-Dokumenten alle Codes, die du auf deiner Seite verwenden möchtest, an einem Ort organisieren. Dieses Dokument kann im Texteditor deiner Wahl (z.B. Microsoft Word) erstellt werden und du musst nur sicherstellen, dass es als HTML oder als ein anderes Webformat gespeichert wird (es ist ein Dokument für jede Seite).
Auch interessant: Wie du mit Microsoft Office 365 effizienter arbeiten kannst
Grundlegende HTML-Struktur
Bevor du dir die Basiscodes anschaust, solltest du wissen, dass die erste Zeile deines HTML-Dokuments immer das Tag <! DOCTYPE html> enthalten muss. Dadurch wird dein Site-Code in jedem Browser lesbar.
Ein gut erstelltes HTML-Dokument verfügt nun über vier wichtige Tags, damit der Inhalt korrekt verteilt werden kann. Diese sind:
1. HTML
<html> befindet sich am Anfang eines HTML-Dokuments und teilt den Browsern mit, dass die Seite HTML Codes enthält, damit du sie auf diese Weise lesen kannst. Nach der Sprachsyntax ist das schließende Tag </ html> das letzte Element im Dokument.
2. Header
<head> ist das Tag, das für den Header der Seite verwendet wird. Seine Hauptfunktion besteht darin, alle Informationen über den Betrieb der Site zu enthalten. Aus diesem Grund handelt es sich um einen verschlüsselten Code, den Personen, welche die Seite betreten, nicht sehen können.
3. Seitentitel
<title> ist das Tag, das deiner Site ihren Namen gibt, damit Benutzer sie identifizieren können. Dies ist der Titel, den du auf den Registerkarten des Browsers sehen kannst.
4. Hauptteil
<body> ist das Tag, das alle einzelnen Elemente der Site enthält. Oder anders ausgedrückt, es enthält den gesamten sichtbaren Inhalt der Website. Hier kannst du nach Belieben Text, Bilder, Videos oder andere Funktionen einfügen.
Beispiel für die vier wesentlichen Etiketten:
<html>
<head>
<title> Meine Beispielseite </ title>
</ head>
<body>
Hier steht mein Inhalt.
</ body>
</ html>Mit den vier vorherigen Tags hast du bereits das Grundgerüst deine Webseite. Die nächste Aufgabe wäre die Eingabe von Text (zwischen den Tags <body> und </ body> ) und die Steuerung der Tags. Schauen wir uns die Elementarsten von ihnen an.
5. Titel und Untertitel
<h1> <h2>… <h6> sind Tags, mit denen Titel und Untertitel in den Textkörper eingefügt werden, um die Informationen zu priorisieren. Übrigens empfehlen wir, das H1-Tag innerhalb des Inhalts nur einmal zu verwenden.
Beispiel:
<h1> Dies ist ein H1-Tag. Verwende es im Titel. </ h1>
<h2> Dies ist ein H2-Tag. Verwende es in Abschnittsüberschriften. </ h2>
<h3> Dies ist ein H3-Tag. Verwende es in Unterabschnitten. </ h3>
<h4> Dies ist ein H4-Tag. Diese wirst du nicht sehr oft verwernden. </ h4>
<h5> Dies ist ein H5-Tag. </ h5>
<h6> Dies ist ein H6-Tag. </ h6>Ergebnis:
Dies ist ein H1-Tag. Verwende es im Titel.
Dies ist ein H2-Tag. Verwende es in Abschnittsüberschriften.
Dies ist ein H3-Tag. Verwende es in Unterabschnitten.
Dies ist ein H4-Tag. Dieses wirst du nicht sehr oft verwenden.
usw.
6. Absätze
Mit den Tags <p> und <br> kannst du deinen Text in Absätze und Zeilenumbrüche unterteilen.
Beispiel:
<p> Dein erster Absatz. </ p>
<p> Dein zweiter Absatz. </ p>
<p> Eine Aussage. <br>
Ergebnis:
- Dein erster Absatz.
- Dein zweiter Absatz.
- Eine Aussage.
7. Bilder
<img> Mit diesem Tag kannst du dem Hauptteil deiner Website Bilder hinzufügen. Wenn du es mit dem src- Attribut kombinierst, kannst du den Ort angeben, an dem sich das Bild befindet. Mit dem alt- Attribut kannst du diesem Bild einen Titel geben, den Suchmaschinen wie Google lesen können.
Die Struktur der Attribute ist wie folgt: Zuerst kommt das Wort oder die Abkürzung, die es definiert (in diesem Fall ist src eine Abkürzung für “Quelle” engl. Source), dann das Gleichheitszeichen (=) und zuletzt der Modifikator des Attributs zwischen den doppelten Anführungszeichen (“_”) oder einfach ('_').
Beispiel:
<img src = "https://images.unsplash.com/photo-1535378917042-10a22c95931a">Ergebnis:
8. Hyperlinks
Mit <a> kannst du einen Hyperlink zur Website einfügen. Zum Beispiel der Link zu deinen Social Media-Kanälen oder zu einer anderen Website, mit der du deine Site verbinden möchtest.
Beispiel:
<a href="https://de.godaddy.com/blog"> Besuche jetzt den GoDaddy Blog! </a>Ergebnis:
Besuche jetzt den GoDaddy Blog!
Wie du vielleicht bemerkt hast, war das Attribut, das hier verwendet wurde, href.
9. Auflistungen
<ol> wird verwendet, um nummerierte Listen hinzuzufügen und <ul>, um Aufzählungszeichen hinzuzufügen, welche die Lesbarkeit deiner Texte verbessern.
Beispiel:
<ul>
<li> Listenelement 1 </ li> </ ul>
<li> Listenelement 2 </ li> </ ul>
<li> Listenelement 3 </ li> </ ul>
<li> Listenelement 4 </ li> </ ul>
</ ul>Ergebnis:
- Listenelement 1
- Listenelement 2
- Listenelement 3
- Listenelement 4
10. Stil
Obwohl es sich normalerweise innerhalb des <head> Tags befindet, kannst du mit dem <style> Attribut den Stil deines Inhalts in Bezug auf Folgendes definieren:
- Farbe
- Schriftgröße
- Typografie usw.
Beispiel:
<p style = "Farbe: rot; Schriftgröße: 100px"> Hallo Welt </ p>Ergebnis:
Zusätzlicher Tipp: Wenn du dich für den Anfang erst einmal bereits vorgeschriebene HTML Codes übernimmst, kannst du mehr über Webdesign erfahren. Diese sind jederzeit verfügbar, indem du mit der rechten Maustaste auf eine leere Stelle klickst und “Seitenquelltext anzeigen” auswählst. Schau dir am Anfang Codes an, um die Sprache zu verstehen und selbst davon zu lernen.
Vielleich hilft dir der Artikel weiter, mehr mit der Funktionsweise dieser Codes zu experimentieren, sodass dir beim Coden deiner Website(s) keine Details entgehen. Denke daran, dass Übung den Meister macht.
Falls Computersprache nicht dein Ding ist... keine Sorgen! Dafür gibt es auch den GoDaddy Homepage-Baukasten, mit dem du deine Website Step-by-Step via Drag-and-Drop ganz schnell und einfach zusammenbauen kannst. Du kannst gleich kostenlos damit starten!
Bildnachweis: Unsplash
Dieser Artikel ist am 09.02.2018 erschienen und wurde am 02.09.2023 aktualisiert.
