7 days of PowerPoint templates, graphics & videos - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Business
  2. Resumes

Wie Sie eine HTML-Lebenslaufvorlage verwenden können, um Ihre persönliche Website zu erstellen

Scroll to top
Read Time: 11 mins
This post is part of a series called How to Make a Great Personal Resume Website (Ultimate Guide).
19 Best HTML Resume Templates to Make Personal Profile CV Websites (2022)
Should You Use an Online Resume Builder for Your Personal Site?

German (Deutsch) translation by Tatsiana Bochkareva (you can also view the original English article)

Es gibt viele Möglichkeiten, Ihre persönliche Lebenslauf-Website zu erstellen.

Sie können einen oder mehrere Website-Builder verwenden oder sich für ein CMS wie WordPress, Drupal oder ähnliches entscheiden. Sie können auch einen professionellen Entwickler beauftragen, eine für Sie zu erstellen.

Bei so vielen Möglichkeiten kann es schwierig sein zu wissen, wo man anfangen soll. Um die Sache noch komplizierter zu machen, bietet jede dieser Optionen unterschiedliche Vor- und Nachteile, ganz zu schweigen vom Schwierigkeitsgrad oder Preis.

Es gibt aber auch eine andere großartige Möglichkeit, Ihre persönliche Website in angemessener Zeit zu erstellen. Dazu verwenden Sie eine HTML-Lebenslaufvorlage. Sie sind einfach zu verwenden und können auf Ihren Hosting-Server hochgeladen werden.

Hier sind einige der besten (zum schnellen Durchsuchen, bevor Sie weiterlesen):

  • Lebensläufe
    15 besten HTML-Lebenslaufvorlagen für fantastische persönliche Websites
    Brenda Barron

Darüber hinaus ist der Code hinter einer professionellen Website-Vorlage für Lebensläufe für Anfänger weitaus weniger kompliziert als die komplexeren Programmiersprachen, die in Content-Management-Systemen verwendet werden.

In diesem Teil der Reihe Making a Great Personal Resume Website führen wir Sie durch den einfachen Prozess zum Ändern und Hochladen einer HTML-Lebenslaufvorlage.

Befolgen Sie diesen Workflow, um Ihre Lebenslauf-Website zu erstellen und an Ihre persönliche Marke anzupassen. So können Sie Ihre Website in kürzester Zeit starten.

Was benötigen Sie, um Ihre Lebenslauf-Website live zu bringen?

Bevor wir mit der Änderung von Websitevorlagen beginnen, möchten wir uns mit den Tools befassen, die Sie benötigen, um Ihre HTML-Lebenslauf-Website zum Laufen zu bringen:

1. Die richtige Hosting-Firma

Der Kauf des Domainnamens für Ihre Website ist nur der erste Schritt auf Ihrer Reise. Sie benötigen außerdem einen Hosting-Server, auf dem Sie die Dateien für Ihre Website hochladen. Das richtige Hosting-Unternehmen zu finden ist nicht einfach, zumal es so viele gibt. Die meisten Hosting-Anbieter bieten grundlegende Hosting-Pakete zwischen 5 und 10 US-Dollar pro Monat an. Einige Unternehmen bieten unbegrenzte Bandbreite und Speicherplatz, während andere eingeschränktere Pläne anbieten.

Wichtig ist, dass fast alle Hosting-Anbieter HTML-Vorlagen unterstützen. Lesen Sie beim Einkauf für ein Hosting-Unternehmen die häufig gestellten Fragen (FAQs) durch und stellen Sie sicher, dass das Unternehmen Kundenunterstützung bietet, falls Sie Hilfe bei Ihrer Website benötigen. Sie sollten auch ein wenig recherchieren und die Bewertungen eines bestimmten Hosts auf unabhängigen Websites lesen, um zu sehen, wie zufrieden die Kunden sind.

2. Ein FTP-Client

Sobald Sie ein Hosting-Unternehmen gefunden haben, müssen Sie einen FTP-Client herunterladen. Mit einem FTP-Client können Sie Ihre Vorlage auf die Hosting-Server hochladen. Die Wahl des FTP-Programms hängt vom Betriebssystem Ihres Computers ab.

Eines der beliebtesten Programme ist FileZilla. Es ist ein kostenloses FTP-Programm, das sehr einfach zu bedienen ist und unter Windows, Mac und Linux verfügbar ist.

3. Ein Code-Editor

Sie benötigen außerdem einen Texteditor, um Änderungen an den Dateien Ihrer Vorlage vorzunehmen. Während Sie einen Editor oder TextEdit verwenden können, um Änderungen vorzunehmen, wird die Verwendung eines Code-Editors dies erheblich vereinfachen. Im Gegensatz zu normalen Texteditoren enthält ein Code-Editor Tools, die die Bearbeitung erleichtern, z. B. die Verwendung unterschiedlicher Farben für verschiedene Teile des Codes, damit Sie leichter sehen können, was Sie bearbeiten.

Für die Zwecke dieses Tutorials verwende ich Sublime Text, der unter Mac, Windows und Linux verwendet werden kann. Die Testversion kann kostenlos heruntergeladen werden. Erfahren Sie mehr über die Arbeit mit diesem beliebten Code-Editor:

  • Sublime Text
    Nützliche Verknüpfungen für einen schnelleren Workflow in Sublime Text 3
    Tim Hartmann

4. Die HTML-Vorlage und die Bilder für Ihre Lebenslauf-Website

Die letzten beiden Dinge, die Sie benötigen, sind Ihre HTML-Lebenslaufvorlage und die Bilder, die Sie auf Ihrer Website verwenden möchten.

Für die Zwecke dieses Tutorials verwende ich die hier gezeigte Flatrica HTML-Lebenslauf-Website-Vorlage:

Flatrica HTML resume website templateFlatrica HTML resume website templateFlatrica HTML resume website template
Flatrica HTML Lebenslauf Website-Vorlage.

Sie finden Ihre Website-Vorlage nach dem Kauf im Download-Bereich Ihres Envato-Kontos. Wenn Sie die HTML-Site-Vorlage heruntergeladen haben, entpacken Sie den Ordner und speichern Sie ihn für den einfachen Zugriff auf Ihrem Desktop.

Wenn es um Bilder geht, benötigen Sie Ihr Portraitfoto Farben, die Sie verwenden möchten. Sie können auch ein Hintergrundbild oder -muster verwenden. Stellen Sie daher sicher, dass alle Bilder auf Ihrem Computer gespeichert sind, damit Sie sie Ihrer Vorlage hinzufügen können.

Wie Sie den Inhalt Ihrer Lebenslauf-Website-Vorlage bearbeiten können

Nachdem Sie alles eingerichtet haben, ist es an der Zeit, die Vorlage mit Ihren Informationen zu personalisieren. Lassen Sie uns durchgehen, wie Sie die Flatrica-HTML-Vorlage anpassen:

1. Die Struktur der HTML-Lebenslaufvorlage

Bevor wir mit dem Ändern der Dateien beginnen, werfen wir einen Blick auf die Struktur dieser HTML-Vorlage. Wenn Sie den Ordner entpacken, werden Sie feststellen, dass er zwei Ordner enthält: einen mit Dokumentation und einen mit den eigentlichen Vorlagendateien.

A look at the files included in this HTML resume website templateA look at the files included in this HTML resume website templateA look at the files included in this HTML resume website template
Ein Blick auf die Dateien in dieser HTML-Lebenslauf-Website-Vorlage.

Der Ordner mit den eigentlichen Site-Vorlagendateien enthält mehrere Unterordner:

  • Colors, die alle in der Site-Vorlage verwendeten Farbcodes und Variablen enthalten.
  • Schriftarten, die alle Symbolschriftarten enthalten.
  • Bilder mit allen Platzhalterbildern.
  • Ein Ordner enthält den gesamten JavaScript-Code, der für die ordnungsgemäße Funktion der Vorlage erforderlich ist. In den meisten Fällen müssen Sie diesen Ordner oder die darin enthaltenen Dateien nie bearbeiten, da JavaScript zusätzliche Funktionen bietet, z. B. das Umschalten des Menüs zum Öffnen, das Steuern der Folienanimationen und das Überprüfen von Formularen.
  • Ein PHP-Ordner, der den PHP-Code enthält, der für das Funktionieren des Kontaktformulars erforderlich ist. Sie müssen hier nur eine einzige Codezeile bearbeiten, um Ihre E-Mail-Adresse hinzuzufügen.
  • Der Sass-Ordner enthält alle Variablen für die Stylesheets.
  • Stylesheets enthalten die CSS-Dateien, die Sie bearbeiten müssen, um der Vorlage Ihr Styling hinzuzufügen und es mit Ihrer Marke abzugleichen.

Neben diesen Ordnern gibt es auch mehrere HTML-Dateien: index-normal.html, index-video.html, single-blog.html und single-portfolio.html.

Beachten Sie, dass Ihre Vorlage möglicherweise nicht alle diese Dateien und Ordner enthält. In den meisten Fällen werden Sie jedoch auf die Ordner Stylesheets, Bilder, JavaScript und PHP stoßen. Ihre Vorlage enthält möglicherweise auch mehr oder weniger HTML-Dateien.

2. Ersetzen der Standard-HTML-Vorlageninformationen

Doppelklicken Sie auf die Datei index-normal.html (oder auf index.html, falls Sie eine andere Vorlage verwenden). Dadurch wird die Datei in Ihrem Browser geöffnet und es wird einfacher zu verstehen, welche Teile des Codes Sie bearbeiten müssen und wie Sie sie in Ihrer HTML-Vorlagendatei finden.

Browser code inspector view of the HTML templates codeBrowser code inspector view of the HTML templates codeBrowser code inspector view of the HTML templates code
Browser-Code-Inspektoransicht des Codes der HTML-Vorlage.

Wenn Sie sich die Vorlage in Ihrem Browser ansehen, werden Sie feststellen, dass Sie Folgendes bearbeiten müssen:

  • Ihr Name und Ihre Kontaktinformationen.
  • Der Klappentext über den Schaltflächen zum Herunterladen Ihres Lebenslaufs.
  • Verschiedene Abschnitte mit Informationen zu Ihrer Ausbildung, Ihren Fähigkeiten, Ihrer Erfahrung, Ihrem Portfolio, früheren Kunden und vielem mehr.

Sobald Sie wissen, was Sie ändern müssen, können Sie nach dem entsprechenden Code suchen.

Klicken Sie mit der rechten Maustaste auf den Namen John Doe und wählen Sie Inspizieren. Unten sehen Sie ein Fenster mit dem HTML-Code, aus dem unsere Vorlage besteht.

Die Codezeile mit dem Namen wird auf der linken Seite des Inspektorfensters mit dem entsprechenden Stil auf der rechten Seite ausgewählt.

Wie Sie dem obigen Screenshot entnehmen können, befindet sich der Name zwischen den <h4>-Tags, den HTML-Tags, die zur Darstellung von Überschriften verwendet werden.

In den meisten Fällen haben Tag-Paare wie dieses ein öffnendes und ein schließendes Tag, und der Inhalt muss zwischen diesen Tags platziert werden, damit er auf einer Webseite wie folgt angezeigt wird:

<h4>John Doe</h4>

Um die Vorlage zu bearbeiten, müssen Sie lediglich wissen, welche Tags den Teil der Seite enthalten, den Sie bearbeiten möchten, sie im Code finden und durch Ihre Informationen ersetzen.

Öffnen Sie die HTML-Datei in Ihrem Editor

Kehren Sie nun zum Vorlagenordner zurück, klicken Sie mit der rechten Maustaste auf die Datei index-normal.html und wählen Sie Mit Sublime Text öffnen. Sie sollten jetzt den vollständigen HTML-Code sehen, aus dem Ihre Vorlage besteht.

Um mit der Bearbeitung der Vorlage zu beginnen, möchten Sie denselben Code finden, den Sie im Inspektorfenster Ihres Browsers gesehen haben.

Scrollen Sie nach unten, bis Sie es um die Zeilen 150-151 finden. Klicken Sie dann zwischen die <h4>-Tags und ersetzen Sie den Namen durch Ihren eigenen.

Replacing the default name and contact informationReplacing the default name and contact informationReplacing the default name and contact information
Ersetzen des Standardnamens und der Kontaktinformationen.

Klicken Sie danach zwischen die <h6>-Tags, löschen Sie den Text und geben Sie Ihren Beruf ein.

Wenn Sie diese Schritte immer wieder wiederholen, können Sie alle Dummy-Informationen durch Ihre eigenen ersetzen.

Wenn die Vorlage einen Abschnitt enthält, den Sie nicht benötigen, löschen Sie ihn einfach. Im folgenden Screenshot habe ich alles im Abschnitt "Preistabelle" ausgewählt und den gesamten darin enthaltenen Code gelöscht.

You can delete sections of the code you dont need You can delete sections of the code you dont need You can delete sections of the code you dont need
Sie können Abschnitte des Codes löschen, die Sie nicht benötigen.

Wie Sie Bilder durch Ihre eigenen ersetzen

Um die Bilder durch Ihre eigenen zu ersetzen, wählen Sie einfach alle Bilder im entsprechenden Ordner aus, löschen Sie sie und legen Sie Ihre Bilder im selben Ordner ab. Wenn Sie den Ratschlägen zuvor gefolgt sind, haben Sie Ihre Bilder mit denselben Namen wie die Platzhalter benannt, wodurch die Bearbeitung der Vorlage beschleunigt wird.

Wenn Sie weitere Informationen hinzufügen möchten, wählen Sie den vorhandenen Code im gewünschten Abschnitt aus, kopieren Sie ihn, indem Sie auf STRG/CMD + C klicken, und fügen Sie ihn unten mit STRG/CMD + V ein. Im folgenden Screenshot möchte ich eine weitere Fertigkeitsleiste hinzufügen. Also, ich habe ich Code für die vierte Fertigkeitsleiste ausgewählt und ihn direkt darunter kopiert:

You can duplicate sections of HTML if you need toYou can duplicate sections of HTML if you need toYou can duplicate sections of HTML if you need to
Sie können HTML-Abschnitte bei Bedarf duplizieren.

Und das Endergebnis sieht so aus:

The end product of adding another skill barThe end product of adding another skill barThe end product of adding another skill bar
Das Endprodukt des Hinzufügens einer weiteren Fertigkeitsleiste.

So ändern Sie das Erscheinungsbild Ihrer HTML-Lebenslauf-Site

Nachdem Sie alle Informationen ersetzt haben, ist es an der Zeit, die Website-Vorlage für den Lebenslauf nach Ihren Wünschen zu gestalten. Standardmäßig enthält die Flatrica-HTML-Vorlage verschiedene Stylesheets. Wenn Sie sich den Ordner Stylesheets ansehen, werden Sie feststellen, dass er nach den verwendeten Farben benannt ist:

Flatrica comes with numerous stylesheet optionsFlatrica comes with numerous stylesheet optionsFlatrica comes with numerous stylesheet options
Flatrica wird mit zahlreichen Stylesheet-Optionen geliefert.

Sie können die Farbe schnell anpassen, indem Sie das Stylesheet im Kopf des Dokuments durch den Namen Ihres bevorzugten Stylesheets ersetzen. Suchen Sie nach der Codezeile mit der Aufschrift:

<!-- CUSTOM STYLE -->

<link href="stylesheets/style.css" id="switch_style" rel="stylesheet">

Wenn Sie den Namen in style_blue.css ändern, erhält unsere Vorlage eine völlig neue Farbe und ein neues Aussehen:

The results of apply the blue stylesheetThe results of apply the blue stylesheetThe results of apply the blue stylesheet
Die Ergebnisse der Anwendung des blauen Stylesheets.

Wenn Sie sich abenteuerlustig fühlen, können Sie das Haupt-Stylesheet style.css mit Schriftarten und Farben Ihrer Wahl bearbeiten. Sie können beispielsweise die Hintergrundfarbe in der Datei style.css bearbeiten, indem Sie einen HEX-Code Ihrer gewünschten Farbe wie folgt eingeben:

background-color: #65b5c1;

Das Bearbeiten von CSS kann auf die gleiche Weise erfolgen, wie wir den HTML-Code bearbeitet haben. Klicken Sie mit der rechten Maustaste auf das Element, das Sie formatieren möchten, und klicken Sie auf Überprüfen. Dieses Mal möchten Sie auf der rechten Seite der Registerkarte "Inspektor" nach dem Code suchen und dann denselben Code im Code-Editor finden.

A look at the resume website templates CSS fileA look at the resume website templates CSS fileA look at the resume website templates CSS file
Ein Blick auf die CSS-Datei der Site-Vorlage.

Wie Sie Ihre Website-Dateien auf den Server hochladen

Nachdem Sie die Website-Vorlagendateien nach Ihren Wünschen geändert haben, müssen Sie sie auf Ihren Hosting-Server hochladen. Sie sollten von Ihrem Host eine E-Mail mit den erforderlichen Informationen zum Übertragen von Dateien über FTP erhalten haben.

Starten Sie Ihr FTP-Programm, um den Upload-Vorgang zu starten. In diesem Fall verwende ich FileZilla. Geben Sie die von Ihrem Host bereitgestellten Informationen in die obere Leiste ein und klicken Sie dann auf QuickConnect:

Inserting information into FileZillaInserting information into FileZillaInserting information into FileZilla
Einfügen von Informationen in FileZilla.

Suchen Sie den Ordner mit Ihrer Vorlage auf Ihrem Computer auf der linken Seite des Bildschirms und klicken Sie darauf, um ihn aufzuklappen. Wählen Sie unten links alle Dateien und Ordner aus und ziehen Sie sie auf die rechte Seite des Bildschirms.

Stellen Sie sicher, dass Sie sie in den Stammordner Ihres Hosting-Servers im Ordner public_html hochladen.

Uploading files to the server via FTPUploading files to the server via FTPUploading files to the server via FTP
Hochladen von Dateien auf den Server über FTP.

Sobald alle Dateien hochgeladen wurden, öffnen Sie Ihren Browser und geben Sie Ihren Domainnamen ein. Herzlichen Glückwunsch ,Ihre neue Lebenslauf-Website ist jetzt online!

Vier schnelle Tipps, um Ihre Website für Lebensläufe großartig zu machen

Nachdem Sie nun wissen, wie Sie eine HTML-Lebenslaufvorlage verwenden, finden Sie hier vier kurze Tipps, mit denen Sie Ihre persönliche Website noch besser gestalten können:

  1. Komprimieren Sie Ihre Bilder - Stellen Sie vor dem Hochladen von Dateien auf Ihren Hosting-Server sicher, dass Sie die Dateigröße Ihrer Bilder reduzieren, indem Sie sie optimieren. Dies wird Ihnen helfen, Ihre Website zu beschleunigen. Sie können ein Tool wie TinyJPG verwenden, um die Bilder zu komprimieren, ohne deren Qualität zu beeinträchtigen.
  2. Erwägen Sie das Minimieren Ihrer Stylesheets und JavaScript-Dateien - Wie bei Bildern hilft das Reduzieren der Dateigröße dabei, dass Ihre Website schneller geladen wird. Tools wie CSS Minifier und JSCompress erledigen den Job für Sie.
  3. Hinzufügen Ihrer Website zu Ihren Social Media-Profilen - Sie haben hart daran gearbeitet, Ihre Website zu erstellen. Jetzt ist es an der Zeit, die Welt darüber zu informieren. Erhöhen Sie Ihre Sichtbarkeit, indem Sie Ihre Website zu Ihren Social Media-Profilen hinzufügen.
  4. Verwenden Sie es als Teil Ihrer E-Mail-Signatur - Eine der besten Möglichkeiten, Ihre Website zu bewerben, besteht darin, sie Ihrer E-Mail-Signatur hinzuzufügen. Die Einrichtung ist einfach, kostenlos und dauert Sekunden. Die Vorteile sind jedoch zahlreich.

Richten Sie Ihre HTML-Lebenslaufvorlage ein

Das Bearbeiten einer HTML-Vorlage mag zunächst einschüchternd erscheinen, ist jedoch nicht so schwierig, wenn Sie erst einmal verstanden haben, wie die Vorlage aufgebaut ist und was bearbeitet werden muss. Wenn Sie sich auch die Zeit nehmen, einige Tutorials zu lesen, beherrschen Sie HTML und CSS in kürzester Zeit. Verwenden Sie unseren obigen Leitfaden, um Ihre Website-Vorlage für Lebensläufe zu ändern und Ihre Chancen auf eine Anstellung zu erhöhen.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Business tutorials. Never miss out on learning about the next big thing.
Advertisement
Start your 7-day free trial*
Start free trial
*All Individual plans include a 7-day free trial for new customers; then chosen plan price applies. Cancel any time.