Wie man seine eigene Website mit einer HTML-Vorlage erstellt und sie ins Internet bringt – Anleitung für Anfänger

• Warum eine Website in HTML erstellen

• Wie man den fertigen HTML-Code der Website im Notepad zum Bearbeiten öffnet

• Grundlegende HTML-Tags

• Ersetzen von Textblöcken in einer Vorlage

• Was ist das Entwicklerwerkzeug im Browser und wie öffnet man es

• Ersetzen von Bildern im HTML-Code

• Was man über die Arbeit mit HTML-Code wissen muss

• Hochladen einer fertigen Website auf das Hosting

Warum eine Website in HTML erstellen

Wenn die Notwendigkeit besteht, eine eigene Website zu erstellen, wählen angehende Webentwickler normalerweise zwischen mehreren Optionen, bei denen man nicht mit Code arbeiten muss. Das kann eines der vielen CMS oder Online-Baukästen sein. Selten ist jemand bereit, sich an eine handgeschriebene HTML-Website zu wagen, denn das ist schwieriger.

Aber tatsächlich gibt es einen Weg, diese Aufgabe zu bewältigen, wenn man zumindest eine ungefähre Vorstellung davon hat, wie die Auszeichnungssprache funktioniert — man kann den fertigen HTML-Code einer Website herunterladen und ihn ein wenig an seine Bedürfnisse anpassen. Indem man mit einer Vorlage arbeitet, erhält man ein fertiges Gerüst, gestaltete Stile (Schriften, Farben, Anordnung der Elemente), funktionierende JS-Skripte (Buttons, Menüs, Kontaktformulare). Dabei muss man nur den Inhalt ersetzen — eigene Bilder und Texte einfügen.

Dafür benötigt man ein wenig Aufmerksamkeit und Wissen, aber die Anpassung einer fertigen Vorlage ist durchaus für Anfänger zugänglich. Diese Erfahrung wird für diejenigen nützlich sein, die sich für Layout interessieren, sowie für die Erstellung einer eigenen Website im einfachsten Format — Landing Page oder Visitenkarte. Statisches HTML ist für kleine Websites vorteilhafter als die Entwicklung auf CMS, da Content-Management-Systeme viel mehr Speicherplatz benötigen. Die Nutzung eines Systems mit umfangreichem PHP-Code und einer Vielzahl verschiedener Module für eine Landing Page ist nicht ganz rentabel. Eine HTML-Website benötigt sehr wenig Ressourcen auf Hosting, daher ist es die beste Option, wenn man eine Website nur auf einer Seite erstellen möchte — das ist die beste Wahl.

Lesen Sie auch: TOP-3 CMS zur Erstellung eines Online-Shops

Also, fangen wir an zu arbeiten. Zuerst müssen Sie eine gute Vorlage (kostenpflichtig oder kostenlos) finden und sie als Zip-Ordner auf Ihren Computer herunterladen.

Zur Anpassung können Sie zwei Optionen nutzen:

1. Auf dem Computer bearbeiten und dann die fertige Website auf das Hosting hochladen.

2. Die Website auf das Hosting hochladen und im Dateimanager bearbeiten.

Wir werden den ersten Weg gehen, damit potenzielle Benutzer die unfertige Website nicht sehen.

Wie man den fertigen HTML-Code der Website im Notepad zum Bearbeiten öffnet

Entpacken Sie das Archiv auf Ihrem Computer und gehen Sie in den Ordner. Sie werden etwa folgendes Bild sehen — Verzeichnisse mit JS- und CSS-Code, Bildern (images) und die Hauptseiten. Unter ihnen müssen Sie index.html auswählen — das ist die Seite, von der aus die Website gestartet wird. Bei einer einseitigen Website ist dies die einzige Datei im HTML-Format. In unserem Beispiel hat die Website mehrere Abschnitte, daher gibt es auch mehr Dateien.

Das System hat bereits die HTML-Dateien in Google Chrome geladen, und sie werden automatisch in diesem Browser geöffnet. Sie können sofort sehen, wie die Hauptseite der Vorlage im Internet aussehen wird (bis jetzt sehen nur Sie sie).

Um die Seite zu bearbeiten, öffnen wir sie mit der rechten Maustaste in einem anderen Programm. Wenn Sie ein angehender Entwickler sind, haben Sie wahrscheinlich bereits spezielle Software wie Sublime oder Visual Studio Code. Aber dieser Leitfaden ist für Laien gedacht, also nehmen wir an, dass Sie ein solches Programm nicht haben. Der HTML-Code der Website lässt sich hervorragend im Standard-Notepad oder WordPad bearbeiten, deshalb öffnen wir ihn über den Notepad.

Vergessen Sie nicht, die Option Format => Zeilenumbruch auszuwählen, um den gesamten Code in einem Fenster zu sehen. So wird es ungefähr aussehen.

Grundlegende HTML-Tags

Um Elemente zu ersetzen, müssen Sie sie zuerst im Code finden. Dafür sollten Sie die grundlegenden Tags kennen, in denen Inhalte verschiedener Typen enthalten sind:

• div — universeller Container zur Gruppierung von Inhaltsblöcken;

• H1, H2, H3… H6 — Überschriften;

• li — Listenelement;

• p — Textabsatz;

• a href — Link;

• img — Bild.

Im Allgemeinen gibt es viel mehr Tags, aber für jetzt ist das genug. Man muss auch verstehen, wo der Inhalt des Tags beginnt und endet.

Das öffnende Tag hat die Form < p >, das schließende sieht ähnlich aus, hat aber einen Schrägstrich < /p >. Das heißt, der Textabsatz muss zwischen ihnen enthalten sein.

«Lorem ipsum» und alles, was danach auf Latein kommt, bedeutet in «Programmierersprache» «beliebiger Text» oder einfach «bla-bla-bla». Es wird verwendet, wenn man sehen möchte, wie ein Textblock aussehen wird, aber der Inhalt noch nicht vorhanden ist.

Lesen Sie auch: Soll man sich selbst das Programmieren beibringen oder einen Entwicklerkurs besuchen — was sollte man wählen?

Ersetzen von Textblöcken in einer Vorlage

Lassen Sie uns versuchen, die Überschrift und den Haupttext auf der Seite zu ersetzen.

Die Überschrift «Welcome To Beauty Class» lässt sich leicht über das Tag < h2 > finden (große Überschrift der zweiten Ordnung). Der Haupttext ist blau hervorgehoben, damit Sie sehen, wo er beginnt und endet.

Ersetzen Sie den Text durch Ihren eigenen, klicken Sie im Notepad auf Datei => Speichern und aktualisieren Sie den Browser, um das Ergebnis zu überprüfen. Wie Sie sehen, hat sich unser Text geändert.

Was ist das Entwicklerwerkzeug im Browser und wie öffnet man es

Wenn Sie nicht verstehen, in welchem Tag sich ein Element befindet oder wie es genannt wird, nutzen Sie die Entwicklerwerkzeuge im Browser.

So öffnen Sie die Entwicklerwerkzeuge in Chrome:

• Klicken Sie mit der rechten Maustaste auf das Element und wählen Sie aus der Liste «Untersuchen».

• Drücken Sie die Taste F12 auf der Tastatur und wählen Sie den Punkt Elemente.

• Gehen Sie in das Menü des Browsers in der oberen rechten Ecke => Weitere Tools => Entwicklerwerkzeuge.

Um den Namen und das Tag des Elements zu sehen, klicken Sie erneut mit der rechten Maustaste darauf und wählen Sie «Untersuchen».

Zum Beispiel hat dieses Bild die Adresse images/image_01.jpg, wobei images —  der Name des Ordners ist und /image_01.jpg — der Name der Datei.

Ersetzen von Bildern im HTML-Code

Lassen Sie uns das Bild ersetzen. Dies muss an zwei Stellen geschehen — im Ordner und im Code. Wie funktioniert das überhaupt?

Bilder sind nicht in der Auszeichnung enthalten — sie liegen im Ordner images. Im Code ist der Pfad zu ihnen als Ort angegeben, an dem sich das Bild befindet, sowie dessen Name. Wenn Sie ein Foto auf der Website sehen, zeigt der HTML-Code Ihnen einfach die Datei aus dem Ordner an.

Daher müssen Sie zum Ersetzen oder Hinzufügen eines Bildes es in den Ordner images hochladen und den Pfad im Code angeben.

Das Zeichen «Slash» bezieht sich auf den Ordner, und der letzte Name in Anführungszeichen sollte immer auf die Datei verweisen.

Wenn wir beispielsweise einen Ordner images haben, der einen Ordner banners enthält, in dem sich das Bild main-picture.jpg befindet, würde der Pfad so aussehen:

«images/banners/main-picture.jpg»

Aber beachten Sie, dass es besser ist, nicht zu viele Unterordner zu erstellen.

Es gibt auch eine einfachere Möglichkeit, Ihre Fotos einzufügen: Wenn Sie ein anderes Bild mit demselben Namen in den Ordner hochladen, wird es automatisch auf der Website ersetzt, ohne dass die Auszeichnung bearbeitet werden muss. Lassen Sie uns diese Option ausprobieren.

Ersetzen Sie im Ordner mit Bildern das vorhandene Foto durch ein anderes (in unserem Fall wird es ein Foto von einer Katze) mit demselben Namen image_01.jpg. Achten Sie darauf, dass die Erweiterungen ebenfalls gleich sind. Wenn die Namen gleich sind, aber das ursprüngliche Bild die Erweiterung .jpg hatte und Sie im Format .webp hinzugefügt haben — werden die Bilder auf der Website nicht ersetzt.

Wenn Sie Bilder in einem anderen Format hochladen müssen, muss der Name im Code erneut angegeben werden. Aber unser Foto wurde ersetzt, ohne dass die Auszeichnung bearbeitet werden musste.

Es sollte beachtet werden, dass die Ersteller kostenloser Vorlagen nicht immer die Größe der Bilder in den Stilen angeben, daher muss man sie manchmal manuell anpassen. Unser Bild wurde in der Grafiksoftware Figma an die Größe aller anderen angepasst.

So können Sie den gesamten Inhalt durch Ihren eigenen ersetzen, eine einzigartige Website erstellen und sie problemlos nutzen. Wenn Sie sich mit CSS auskennen — passen Sie das Design mit Farben oder Schriftarten an.

Lesen Sie auch: Top-10 ukrainische YouTube-Kanäle über IT

Was man über die Arbeit mit HTML-Code wissen muss

Hier sind einige Tipps zur Arbeit mit der Auszeichnung, die für Anfänger nützlich sein können:

1. Elemente im Auszeichnungscode sind in der gleichen Reihenfolge angeordnet wie auf der Seite. Das heißt, wenn ein Element oben ist, befindet es sich am Anfang des Codes, wenn es unten ist — dann am Ende.

2. Ein Element im Code kann auch anhand seines Textes gefunden werden. Wenn Sie beispielsweise einen Button mit der Beschriftung «Blog» im oberen Menü finden müssen, drücken Sie im Notepad CTRL+F und geben Sie das Wort «Blog» ein, und Sie werden es im Code sehen.

3. Für den Code ist jedes Zeichen wichtig. Wenn Sie etwas «kaputt gemacht haben», könnte das bedeuten, dass ein Zeichen — Anführungszeichen, Punkt oder sogar ein Leerzeichen, das ebenfalls von Bedeutung ist — gelöscht oder falsch hinzugefügt wurde.

4. Versuchen Sie, andere Teile des Codes nicht zu bearbeiten oder zu löschen, wenn Sie nicht verstehen, was das ist. Es gibt viele Verbindungen mit JS und CSS-Dateien, und wenn Sie einen Link löschen, riskieren Sie, ohne Stile oder interaktive Elemente dazustehen.

5. Bei Layoutdesignern gibt es ungeschriebene Regeln — Dateien im Code mit englischen Wörtern zu benennen, die direkt die Art des Inhalts und nicht dessen Inhalt beschreiben. Das heißt, ein Bild wird oft als image oder picture bezeichnet, und ein Video wird einfach video_1 genannt. Dies vereinfacht die Arbeit mit der Auszeichnung und hilft externen Layoutdesignern, schnell zu verstehen, was im Code geschrieben steht.

Hochladen einer fertigen Website auf das Hosting

Unsere Website ist fertig und es ist Zeit, sie auf eine Domain und Hosting hochzuladen. Wir zeigen Ihnen, wie man dies im Cityhost.ua-Panel macht, aber das Prinzip ist ähnlich für andere Anbieter. Wir werden den Prozess des Kaufs von Dienstleistungen nicht beschreiben, sondern annehmen, dass Sie bereits Hosting gekauft und eine registrierte Domain damit verknüpft haben.

Zuerst müssen Sie in die Website gelangen, was Sie mit Hilfe von FTP tun können. Aber wir werden nicht mit großen Dateien arbeiten, daher ist für diese Aufgabe der Dateimanager völlig ausreichend.

Melden Sie sich bei Ihrem Cityhost-Konto an und öffnen Sie die Registerkarte Hosting 2.0 => Verwaltung => Im Dateimanager öffnen.

Jetzt ist die Website leer, aber auf einem neuen Hosting befindet sich normalerweise ein «Banner-Placeholder» in Form einer PHP-Datei – diesen können Sie löschen.

Archivieren Sie Ihre Website in einen Zip-Ordner und laden Sie sie über die Schaltfläche «Datei hochladen» auf das Hosting hoch.

Anschließend müssen Sie den Ordner mit der Schaltfläche «Archiv entpacken» entpacken. Nach dem Entpacken ist es besser, das Archiv sofort zu löschen. 

Der nächste Schritt besteht darin, alle Dateien aus dem Ordner in das Root-Verzeichnis mithilfe der Ausschneiden — Einfügen-Prozedur zu extrahieren. Die Dateien, insbesondere index.html, sollten sich auf der ersten Ebene befinden, sonst sehen die Benutzer sie nicht auf der Domain. Danach löschen Sie den Hauptordner, er ist bereits leer.

Das ist alles. Die Website ist bereits im Internet veröffentlicht — jetzt können Sie Ihre Domain in die Suchleiste des Browsers eingeben und die Webressource anzeigen. Um sie zu bearbeiten, genügt es, die benötigte Datei auf dem Hosting zu öffnen und direkt dort zu bearbeiten, es ist nicht notwendig, die Website jedes Mal neu hochzuladen.

Hat Ihnen der Artikel gefallen? Erzählen Sie Ihren Freunden davon: