() translation by (you can also view the original English article)
Die Programmierung einer Website zu lernen, kann eine schwierige Aufgabe sein. Wenn man mit Programmiersprachen nicht vertraut ist, ist es noch schwieriger. Aber mit dem richtigen Leitfaden ist es ganz einfach zu lernen, wie man eine Website erstellt.
In diesem Tutorial gehen wir auf das einfache Website-Design für Anfänger mit einer HTML-Webseitenvorlage ein. Sie sind der einfachste Weg, mit HTML eine Website zu erstellen. Mit diesem Verfahren sparen Sie langfristig Zeit und können gleichzeitig eine professionell gestaltete Website für Ihre Besucher erstellen!
Wir werden in diesem Tutorial eine Vorlage von Envato Elements verwenden. Wenn Sie sich andere Webdesign-Vorlagen ansehen möchten, schauen Sie sich die Envato Elements-Sammlung von Website-Vorlagen an. Dort finden Sie professionelle, reaktionsschnelle Optionen, die Sie für Ihr nächstes Projekt anpassen können.
Bevor wir mit unserem Web-Design-Code beginnen
Sie fragen sich vielleicht: Wie erstelle ich eine Webseite überhaupt? Sie sind wahrscheinlich begeistert, wenn Sie lernen, wie man eine Website programmiert. Aber der Blick auf den Code kann für Anfänger einschüchternd sein. Bevor wir also eintauchen, werfen wir einen Blick auf einige nützliche Begriffe, die Sie kennen sollten, damit Sie die Änderungen, die Sie in den folgenden Schritten zur Programmierung einer Website vornehmen, verstehen können.
- HTML: Hypertext Markup Language ist eine Sprache, mit der Webseiten organisiert werden. Dinge wie Text und Links werden hier hinzugefügt. In diesem Tutorium werden wir mit HTML arbeiten.
- Tags: Tags sind die Art und Weise, wie Code in HTML funktioniert. Sie werden zwischen spitzen Klammern geschrieben. Ein Tag öffnet (z.B. <title>) und ein anderer schließt (z.B. </title>). Der Textinhalt steht zwischen dem öffnenden und dem schließenden Tag.
- PHP: Eine serverseitige Skriptsprache, die meist zur Erstellung webbasierter Anwendungen verwendet wird. Fast alle Kontaktformulare funktionieren mit einer PHP-Datei.
- Kommentare: Kommentare sind Anmerkungen, die der Schreiber des Codes hinterlassen hat. Sie ändern nichts an der Seite, aber sie zeigen Ihnen, was der Code tun soll.
Was wir brauchen
Wenn Sie diesem Tutorial folgen wollen, brauchen Sie ein paar Dinge:
- Okno-Ultimate Multipurpose HTML5 Template. Wir werden eine persönliche Landing Page aus dieser HTML-Webseitenvorlage bearbeiten.
- Sublime Text Editor. Sublime Text wird für die Bearbeitung des Markups verwendet.
- Chrome, Safari, Firefox oder ein anderer Webbrowser. Sie benötigen Ihren Browser, um sicherzustellen, dass Ihre Änderungen richtig funktionieren
Haben Sie alles, was Sie brauchen? Dann lassen Sie uns loslegen!
1. Titel und Kopfzeile bearbeiten
In diesem Tutorial arbeiten wir an der Datei index-onepage-personal.html. Es handelt sich um ein einfaches Website-Design für Anfänger. Öffnen Sie sie in Sublime Text und in Ihrem Browser, nachdem Sie den Okno-ZIP-Ordner entpackt haben. In Sublime Text können Sie den HTML-Code bearbeiten, und in Ihrem Browser können Sie die Änderungen in Echtzeit sehen.
In Sublime Text finden Sie das Tag title unter dem Titelkommentar (Zeile 9). Dadurch wird der Name geändert, der auf der Registerkarte oder im Fenster der Seite erscheint. In HTML sieht das dann so aus:
1 |
<!-- Title -->
|
2 |
<title>Okno - Ultimate Multi-Purpose HTML5 Template</title> |
Ersetzen Sie den Text durch den Namen Ihrer Website. Da es sich um eine persönliche einseitige Website-Vorlage handelt, wird dies höchstwahrscheinlich Ihr eigener Name sein. Speichern Sie die Datei in Sublime Text, und aktualisieren Sie die Seite in Ihrem Browser. Sie werden die Änderungen in der Registerkarte oben im Fenster sehen:
Lassen Sie uns nun zur Navigationsleiste dieser einfachen Website für Anfänger übergehen. Diese Leiste ist sichtbar, wenn der Besucher scrollt, und sie enthält auch einen Platz für ein Logo auf der linken Seite. Sie können das Logo ab Zeile 45 mit diesen Codezeilen ändern:
1 |
<!-- Logo -->
|
2 |
<a class="logo-wrapper" href="index.html"> |
3 |
<img class="logo logo-light" src="assets/img/logo-light.png" alt="Okno"> |
4 |
<img class="logo logo-dark" src="assets/img/logo-dark.png" alt="Okno"> |
5 |
</a>
|
Zeile 45 und Zeile 46 sind beide für Ihr Logo, aber für unterschiedliche Teile Ihrer Seite. Zeile 45 ist für ein helles Logo vor einem dunklen Hintergrund. Zeile 46 ist für ein dunkles Logo vor einem hellen Hintergrund. Damit soll sichergestellt werden, dass Ihr Branding auf der Seite sichtbar ist.
Plazieren Sie Kopien Ihres Logos in den Ordner img assets innerhalb des Ordners . Ändere die Dateinamen im Code (logo-light.png und logo-dark.png) so, dass sie den Dateinamen Ihres Logos entsprechen.
Hinweis: Ihr Logo sollte im PNG-Dateiformat mit einem transparenten Hintergrund vorliegen. Beachten Sie auch, dass das Attribut alt für Ihre Webseite sehr wichtig ist, für den Fall, dass das Foto nicht geladen wird oder ein Besucher eine Bildschirmlesesoftware benutzt. Geben Sie eine alternative Beschreibung für alle Ihre Bilder, während Sie an diesem Tutorial arbeiten.
In dieser Vorlage stellt die Navigationsleiste verschiedene Abschnitte des One-Pagers dar. Wenn Sie diese Abschnitte nicht umbenennen möchten, können Sie sie einfach überspringen.
Unter dem Kommentar zum Hauptmenü sehen Sie die Namen der einzelnen Abschnitte. Bearbeiten Sie den Text zwischen den Tags ab Zeile 54, um die Links in der Navigationsleiste umzubenennen.
1 |
<!-- Hauptmenü -->
|
2 |
<div class="module menu left"> |
3 |
<ul id="nav-primär" class="nav nav-primär"> |
4 |
<li><a href="#home">Start</a></li> |
5 |
<li><a href="#services">Services</a></li> |
6 |
<li><a href="#skills">Skills</a></li> |
7 |
<li><a href="#experience">Experience</a></li> |
8 |
<li><a href="#testimonials">Testimonials</a></li> |
9 |
<li><a href="#works">Works</a></li> |
10 |
<li><a href="#contact">Kontakt</a></li> |
11 |
</ul>
|
12 |
</div>
|
Speichern Sie den HTML-Code für dieses Webdesign-Projekt und aktualisieren Sie ihn, um Ihre Änderungen zu sehen.
2. Aktualisieren Sie Ihre persönlichen Daten
Jetzt ist es an der Zeit, Ihre Informationen im Webdesign-Code zu bearbeiten.
Schauen wir uns den Abschnitt an, der mit dem Kommentar in Zeile 96 beginnt. Was kann hier geändert werden? Wir können das Hintergrundbild und den Avatar ersetzen. Außerdem können Sie Ihren Namen, Ihre Berufsbezeichnung, Ihr Fachgebiet und andere Informationen hinzufügen.
Fangen wir damit an, die Bilder zu ändern. Sie können das Hintergrundbild in Zeile 99 und den Avatar in Zeile 104 bearbeiten. Anders als beim Text müssen Sie die Änderungen am img tag selbst über das Quellattribut vornehmen. Das Attribut src teilt der Webseite mit, wo das Foto zu finden ist.
Wenn wir uns das Attribut src für das Hintergrundfoto ansehen, können wir sehen, wo das Bild zu finden ist. Gehen Sie in Ihrem Finder oder Datei-Explorer zu Assets > img > Fotos um die Bilddatei selbst zu finden.
Um das Hintergrundbild zu ändern, halten Sie ein Ersatz-JPG mit den genauen Abmessungen der Originaldatei bereit. Geben Sie Ihrem Foto einen einfachen Namen und legen Sie es in den Ordner Fotos ab. Ändern Sie nun den Namen im Attribut src und speichern Sie.
Wenn Sie kein Ersatzfoto zur Hand haben, aber den Hintergrund ändern möchten, gehen Sie zu Envato Elements. Dort können Sie ein Archivfoto oder eine coole Grafik finden, die Sie verwenden können. Ich verwende eines dieser Hintergrundfotos.
Das Ändern des Avatars ist der gleiche Vorgang. Legen Sie Ihr Kopfbild im Ordner avatar unterhalb des Ordners img ab. Ersetzen Sie avatar01 in Zeile 104 durch den Namen Ihres Fotos. Speichern Sie den HTML-Code für dieses Webdesign-Projekt in Sublime Text und aktualisieren Sie Ihren Browser, um zu sehen, wie es jetzt aussieht.
Namen und Lebenslauf ändern
Der Name und die Biografie lassen sich in wenigen einfachen Schritten ändern. Suchen Sie den Tag H1 in Zeile 107 und fügen Sie Ihren Namen ein. In der Zeile darunter geben Sie Ihre Berufsbezeichnung ein.
1 |
<h1 class="mt-20 mb-0 text-lg">Mike Lee</h1> |
2 |
<h3 class="lead text-muted mb-40">Professioneller Front-End-Entwickler</h3> |
In den Zeilen 112 bis 129 können Sie kurz weitere berufliche Informationen hinzufügen. Wie Sie in Ihrem Browser sehen können, sind die Standardfelder Fachgebiet, Geburtsdatum, Vorheriges Unternehmen, Jahre Berufserfahrung, und Gegenwärtiges Unternehmen. Wenn Sie diese Informationen weitergeben möchten, bearbeiten Sie die dd in den Zeilen 113, 115, 121, 123 und 129. Wenn Sie diesen gesamten Abschnitt ändern möchten, müssen Sie auch den dt-Tag in den Zeilen 112, 114, 120, 122 und 128 ändern.
1 |
<div class="col-sm-4"> |
2 |
<dl class="description-2"> |
3 |
<dt>Spezialität</dt> |
4 |
<dd>Front-End-Entwicklung</dd> |
5 |
<dt>Jahre Erfahrung</dt> |
6 |
<dd>6+</dd> |
7 |
</dl>
|
8 |
</div>
|
Haben Sie Ihre Änderungen vorgenommen? Speichern Sie die HTML-Datei, aktualisieren Sie die Seite, und sehen Sie sich Ihre Änderungen an.
Beachten Sie, dass die Besucher Ihren Lebenslauf über eine Schaltfläche herunterladen können. Um dies einzurichten, erstellen wir zunächst einen Ordner mit dem Titel cv innerhalb des assets -Ordners. Dann legen wir unseren Lebenslauf in diesem neuen Ordner ab.
Werfen wir nun einen Blick auf das HTML. Genauer gesagt, die Zeile 134 des Beispielcodes für das Website-Design:
1 |
<div class="col-sm-4">a href="#" class="btn btn-primary btn-filled btn-block">Download CV</a></div> |
Wir werden das # im href Attribut durch assets/cv/name-of-cv-file.extension ersetzen. Um den Lebenslauf herunterladbar zu machen, fügen Sie das download -Attribut nach dem href -Attribut hinzu. Zeile 134 sollte nun wie folgt aussehen:
1 |
<div class="col-sm-4">a href="assets/cv/my-resume.docx" download class="btn btn-primary btn-filled btn-block">Lebenslauf herunterladen</a></div> |
Speichern Sie den HTML-Code für dieses Webdesign-Projekt und testen Sie ihn in Ihrem Browser. Beachten Sie, dass Sie die Datei vorerst nur über die Schaltfläche öffnen können. Sobald Ihre Website jedoch online ist, können die Besucher Ihren Lebenslauf herunterladen.
3. Dienstleistungsbereich
Lassen Sie uns die Dienstleistungen hinzufügen, die wir anbieten. Wenn Sie den Namen dieses Abschnitts oder eines anderen Abschnitts in Schritt 1 geändert haben, können Sie trotzdem mit dem Rest des Tutorials fortfahren. Achten Sie nur darauf, den h6 tag in jedem Schritt zu ändern.
Ändern Sie den Namen des ersten Dienstes in Zeile 155 mit dem h5-Tag. Dies kann eine beliebige Dienstleistung sein, die Sie anbieten. In der folgenden Zeile geben Sie eine kurze Beschreibung Ihres Dienstes im p Tag ein. Speichern Sie die Datei und sehen Sie sich die Änderungen in Ihrem Browser an.
Sieht aus, als ob wir auf ein Problem stoßen könnten. Wenn Sie den Namen des Dienstes geändert haben, stimmt das Symbol der mobilen App nicht mehr überein. Das ist kein Problem. Okno verwendet Themify Icons. Dies sind kostenlose Web-Icons für den persönlichen und kommerziellen Gebrauch.
Suchen Sie unter dem obigen Themify-Link nach einem passenden Icon. Fügen Sie den Namen des Attributs des Icons in den i tag ein. Für dieses Beispiel verwende ich das Symbol ti-shortcode. Schauen wir mal, wie das jetzt aussieht:
Das ist schon besser. Wiederholen Sie diesen Vorgang für den Rest Ihrer Dienste in den Zeilen 162, 169, 178 und 185 des Beispielcodes für die Gestaltung einer Website.
4. Fügen Sie Ihre Fähigkeiten hinzu
Dies ist ein gut gestalteter Abschnitt in diesem einfachen Website-Design für Anfänger. Wie Sie in Ihrem Browser sehen können, enthält der Abschnitt "Fähigkeiten" eine Anzeige, die Ihr Können darstellt. Diese kann im Code des Webdesigns unter dem Kommentar Skills bearbeitet werden.
Ändern Sie in Zeile 209 die Fertigkeit, die Sie den Besuchern zeigen wollen. Sie befindet sich im strong tag.
Wie gut sind Sie in dieser Fähigkeit? Um dies auf Ihrer Website zu zeigen, müssen wir zu Zeile 207 zurückgehen. Innerhalb des Tags div bearbeiten wir das Attribut aria-valuenow sowie das Attribut style . Diese Werte werden dieselbe Zahl verwenden, um Ihre Fertigkeitsstufe auf einer Skala von 100 darzustellen. Wenn Sie 97 von 100 Punkten angeben möchten, müssen Sie diese Änderung in beiden Attributen vornehmen. Ihre Änderungen sollten mit dem folgenden Code übereinstimmen.
1 |
<div class="mb-40"> |
2 |
<div class="progress progress-2"> |
3 |
<div class="progress-bar" role="progressbar" aria-valuenow="97" aria-valuemin="0" aria-valuemax="100" style="width: 97%;">97%</div> |
4 |
</div>
|
5 |
<strong>Adobe Photoshop</strong> |
6 |
</div>
|
Speichern Sie und aktualisieren Sie Ihr Browserfenster, um Ihre neuen Fähigkeiten zu sehen! Sie können diesen Schritt wiederholen, um den Rest Ihres Kompetenzbereichs zu vervollständigen.
5. Ausbildung und Berufserfahrung
Dies ist der Abschnitt in unserem Webdesign-Code, in dem wir Ausbildung und Berufserfahrung hinzufügen können.
Beginnen wir mit den Zeilen 255 bis 257. In der ersten Zeile können wir das Datum eingeben, in der folgenden Zeile den Titel Ihrer Ausbildung oder Berufserfahrung und in der letzten Zeile den Ort. Wenn ich also meinen dreimonatigen Raketenkurs bei der NASA mitteilen wollte, würde ich den Code wie folgt ändern:
1 |
<div class="event"> |
2 |
<div class="date">15.02.2004 - 15.05.2004</div> |
3 |
<h5 class="mb-0">Rocket Science Course</h5> |
4 |
<span class="text-muted">NASA</span> |
5 |
</div>
|
Diese Schritte können Sie für die beiden anderen Einträge in den Zeilen 262-264 und 272-274 wiederholen.
6. Erfahrungsberichte
Wenn Sie diese Schritte befolgen, um als Freiberufler eine Website zu programmieren, dann wissen Sie, wie wichtig dieser Abschnitt ist. Zeugnisse von früheren Kunden, Klienten und Chefs tragen viel dazu bei, jemanden davon zu überzeugen, Ihnen sein nächstes Projekt anzuvertrauen.
Dieser Abschnitt über Zeugnisse beginnt mit dem Kommentar in Zeile 294. Diese Zitate haben eine besondere Formatierung, die wir so belassen werden. Alles, was wir tun, ist, den Text im div tag zu bearbeiten. Wenn Sie ein genaues Zitat verwenden möchten, fügen Sie es hier ein. Verwenden Sie den strong -Tag, um Teile des Testimonials durch fetten Text hervorzuheben.
Wenn Sie ein Foto von der Person haben, die das Zeugnis ausstellt, fügen Sie es in Zeile 298 ein. Wenn nicht, können Sie diese Codezeile auch entfernen. Mit den folgenden zwei Codezeilen können Sie das Zeugnis mit dem Namen und der Berufsbezeichnung der Person abschließen.
1 |
<div class="col-sm-6"> |
2 |
<div class="testimonial testimonial-1"> |
3 |
<div class="quote"> |
4 |
Diese Tutorials sind <strong>ausgezeichnet</strong>. Ich habe so viel gelernt. Ich kann es nicht erwarten, weitere auszuprobieren! |
5 |
</div>
|
6 |
<div class="author with-image"> |
7 |
<img src="assets/img/avatars/avatar01.jpg" alt="testimonial author avatar"> |
8 |
<span class="name text-uppercase">Mark Johnson</span> |
9 |
<span class="caption text-muted">Envato Tuts+ user</span> |
10 |
</div>
|
11 |
</div>
|
12 |
</div>
|
Wiederholen Sie diese Schritte, um diesen Abschnitt abzuschließen.
7. Medien
Haben Sie Fotos von Ihrer Arbeit, die Sie gerne teilen möchten? Sie können sie in diesem Schritt bereitstellen.
Bevor wir beginnen, ist es wichtig zu wissen, dass die genauen Abmessungen der Fotos für diesen Abschnitt wichtig sind. Jedes Foto muss genau 640x563 groß sein. Verwenden Sie Adobe Photoshop, um die Größe Ihrer Bilder zu ändern. Wenn Sie das Programm nicht haben, können Sie eine kostenlose Website wie Pixlr verwenden.
Wenn Sie Ihre Bilder fertig haben, sehen wir uns an, wie wir sie in unsere Website einfügen können. In Zeile 337 können wir unser Foto mit einer bekannten Codezeile ändern. Wenn wir diese Zeile lesen, sehen wir, dass wir unsere Fotos im Ordner works haben müssen, der sich im img Ordner befindet. Wir müssen auch den Dateinamen ändern, damit unsere Website weiß, welches Foto zu verwenden ist.
1 |
<img src="assets/img/works/gr-winter.jpg" alt="grand rapids in winter"> |
Lassen Sie uns diese Änderungen vornehmen und speichern. Aktualisieren Sie Ihren Browser, um Ihr Foto zu sehen.
Wenn Sie mit dem Mauszeiger über Ihr Foto fahren, sehen Sie vielleicht einen besonderen Effekt. Es sieht so aus, als ob wir eine kurze Beschreibung des im Bild gezeigten Projekts hinterlassen können. Nutzen wir also die Vorteile dieser HTML-Webseitenvorlage und fügen wir eine kurze Beschreibung ein.
Gehen Sie zurück zu den Zeilen 333 und 334 des Beispielcodes für das Website-Design. In der ersten Zeile lassen wir den Namen des Projekts stehen. In der zweiten Zeile fügen wir einen zugehörigen Dienst hinzu, der für die Fertigstellung des Projekts benötigt wird.
1 |
<div class="image-box image-hover bg-black text-center"> |
2 |
<div class="image"> |
3 |
<div class="hover dark"> |
4 |
<a href="#"> |
5 |
<h5 class="mb-0">Stadtlandschaften</h5> |
6 |
<span class="text-muted">Fotografie</span> |
7 |
</a>
|
8 |
</div>
|
9 |
<img src="assets/img/works/gr-winter.jpg" alt="grand rapids in winter"> |
10 |
</div>
|
11 |
</div>
|
Wenn dieses Werk online zu sehen ist, können wir es verlinken. Ersetzen Sie in Zeile 332 das # im href -Attribut durch den Link zu der Webseite, auf der Ihr Projekt vorgestellt wird. Probieren Sie die Verlinkung mit Google aus, um zu sehen, wie das funktioniert.
In diesem Abschnitt können Sie bis zu sechs Projekte teilen. Führen Sie die oben genannten Schritte für jedes Projekt aus, das Sie teilen möchten.
8. Kontakt Abschnitt
Jetzt ist es an der Zeit, die Kontaktinformationen im HTML-Code für dieses Webdesign-Projekt einzurichten. Dieser Schritt ist leicht zu bewerkstelligen.
Zunächst fügen wir in Zeile 425 Ihr Porträt ein. Dies geschieht nach demselben Verfahren, das wir im zweiten Schritt dieses Webdesign-Code-Tutorials besprochen haben.
In den Tag address ab Zeile 426 fügen wir unsere Adresse, Telefonnummer und E-Mail-Adresse ein. Es steht Ihnen frei, die Art der Kontaktinformationen zu ändern, indem Sie den Inhalt der Tags strong ändern.
1 |
<div class="col-sm-4"> |
2 |
<img class="img-circle mb-25" width="72" src="assets/img/avatars/envato-avatar.jpg" alt="envato avatar"> |
3 |
<address>
|
4 |
<strong>Adresse:</strong><br> |
5 |
A795 Folsom Ave, Suite 600<br>
|
6 |
San Francisco, CA 94107<br><br>
|
7 |
<strong>Telefon:</strong><br> |
8 |
+48 221 909 99<br><br>
|
9 |
<strong>E-Mail:</strong><br> |
10 |
<a href="#">your.name@example.com</a><br> |
11 |
</address>
|
12 |
</div>
|
Das Kontaktformular braucht nicht viele Änderungen. Wenn Sie den Standardtext etwas aufpeppen möchten, ändern Sie einfach die Attribute Platzhalter in den Zeilen 440, 443 und 447. Den Text der Schaltfläche können Sie in Zeile 451 ändern.
1 |
<div class="col-sm-8"> |
2 |
<form class="contact-form validate-form" id="contact-form"> |
3 |
<div class="row"> |
4 |
<div class="form-group col-sm-6"> |
5 |
<input name="name" id="name" type="text" class="form-control bordered" placeholder="Name"> |
6 |
</div>
|
7 |
<div class="form-group col-sm-6"> |
8 |
<input name="email" id="email" type="text" class="form-control bordered" placeholder="E-Mail Adresse"> |
9 |
</div>
|
10 |
</div>
|
11 |
<div class="form-group"> |
12 |
<textarea name="Nachricht" id="Nachricht" cols="30" rows="7" class="form-control bordered" placeholder="Nachricht"></textarea> |
13 |
</div>
|
14 |
<div class="row"> |
15 |
<div class="col-md-4 col-sm-6"> |
16 |
<button class="btn btn-filled btn-primary btn-block"<Senden Sie es <i class="i-after ti-arrow-right"></i></button> |
17 |
</div>
|
Aber wird unser Kontaktformular funktionieren? Noch nicht! Wir müssen unsere PHP-Datei ganz schnell bearbeiten. Gehen Sie in Ihrem Finder oder Datei-Explorer zu assets php innerhalb des Okno-Ordners. Dann öffnen Sie die Datei Kontaktformular.php in Sublime Text.
In Zeile 9 dieser Datei finden Sie den folgenden Code:
1 |
$emailTo = 'example@mail.com'; |
Ersetzen Sie die Beispiel-E-Mail durch Ihre eigene E-Mail-Adresse und speichern Sie die Datei. Wenn nun ein Besucher das Kontaktformular ausfüllt, erhalten Sie eine E-Mail, die Ihnen mitteilt, was er gesagt hat.
9. Bearbeiten der Fußzeile
Dies ist der letzte Schritt zur Programmierung einer Website. Die Fußzeile dieser einseitigen Website enthält einen Copyright-Hinweis auf die Ersteller der Webvorlage Okno und drei Links. Sie können die Fußzeile ganz entfernen, einige Elemente entfernen oder die Links bearbeiten. Wenn Sie die Links bearbeiten möchten, zeige ich Ihnen, wie Sie das machen können.
In Zeile 476 des Beispielcodes für die Gestaltung einer Website finden Sie folgenden Code:
1 |
<li><a href="#">Sign Up</a></li> |
Ersetzen Sie innerhalb des Attributs href das Symbol # durch einen Link zu einer Website, die Sie teilen möchten. Diese Änderung ermöglicht es den Besuchern, diese Website durch Klicken auf Anmelden aufzurufen. Sie können diesen Text nach Belieben ändern. Wiederholen Sie diesen Vorgang für die Zeilen 477 und 478.
Wir sind fertig!
Glückwunsch, Sie haben die Schritte zum Programmieren einer Website mit einer Webvorlage erfolgreich durchgeführt! Dieses Verfahren spart Ihnen eine Menge Zeit, wenn Sie eine Website für sich selbst oder einen Kunden erstellen wollen. Und wie Sie sehen können, ist es eine der einfachsten Möglichkeiten, eine Website zu erstellen.
Finden Sie fantastische HTML-Webseitenvorlagen von Envato Elements
Wenn Ihnen die Webvorlage, die wir in diesem Tutorial verwendet haben, gefallen hat, können Sie auf Envato Elements noch mehr Vielfalt finden. Dort gibt es eine ganze Reihe von modernen Vorlagen, die Sie genauso einfach bearbeiten können wie den Quelltext der HTML Website Vorlage Okno. Hier sind nur ein paar Optionen, die Sie auf Envato Elements finden können.
1. AppStorm: App Startup Template
Hier ist die perfekte HTML-Webseitenvorlage für ein technisches Startup. AppStorm wurde mit Blick auf die Förderung von Software entwickelt. Das Layout ist unglaublich modern und funktional und wurde auch für mobile Geräte entwickelt. Wählen Sie aus drei verschiedenen Homepagedesigns und Anpassungsoptionen für den perfekten Look. AppStorm ist der einfachste Weg, eine Website für Ihre neue App oder Ihr SaaS-Produkt zu programmieren.
2. Jadusona: eCommerce Baby Shop Bootstrap4 Template
Jadusona ist eine minimale, einfach zu bedienende E-Commerce-Website. Sie haben eine Vielzahl von Seitendemos, die Sie verwenden können, um Ihre Baby- und Kinderprodukte zu präsentieren. Mit den Funktionen von Jadusona können Sie Ihren Online-Baby-Shop einrichten, z.B.:
- Vollständig responsives Design
- Sauberer Code
- Beinhaltet Google Fonts
- Ajax Kontaktformular
Versuchen Sie es mit Jadusona, wenn Sie nach Webdesign-Beispielen für Anfänger gesucht haben, um Ihre Website zu starten.
3. Erika: Portfolio, CV und Lebenslauf HTML Vorlage
Ergänzen Sie Ihren physischen Lebenslauf oder Ihre Bewerbung mit Erika. Diese Online-Landingpage ist der perfekte Ort, um Besuchern alles über Sie und Ihre Fähigkeiten zu erzählen. Präsentieren Sie Ihre Dienstleistungen, Ihr Portfolio und vieles mehr mit Erika. Sie ist retina-ready, cross-browser-kompatibel und responsive, so dass Besucher von jedem Gerät aus browsen können. Im Grunde ist Erika alles, was Sie von einem persönlichen Web-Template Download benötigen.
4. Modaz | Minimalist eCommerce HTML Template
Wenn Sie eine E-Commerce-Website starten, wollen Sie Ihre Produkte in den Mittelpunkt stellen. Mit der Modaz E-Commerce HTML-Vorlage ist das möglich. Das minimale Design lenkt die Aufmerksamkeit auf Ihre Produktfotos und Artikelseiten. Wählen Sie aus 11 Homepage-Varianten und passen Sie die Innenseiten an, um Ihre Website zu vervollständigen. Der saubere Code macht Modaz zu einer der einfachsten Möglichkeiten, eine Website zu kodieren.
5. Emily: Personal Blog HTML Template
Geben Sie Ihren Inhalten mit Emily die ästhetische Plattform, die sie verdienen. Diese persönliche Blog-HTML-Webseitenvorlage kommt mit über 14 HTML-Seiten für Sie, um Ihre Website zu erstellen. Das Design ist vollständig responsive und browserübergreifend kompatibel, so dass Besucher Ihren Blog auf jedem Gerät genießen können. Wenn Sie etwas über Webdesign in HTML-Code lernen möchten, zeigt Ihnen ein Projekt wie Emily, wie es geht.
Noch mehr HTML-Webseitenvorlagen finden
Wer mag es nicht, Optionen zu haben? Die oben vorgestellten Webdesign-Vorlagen sind einige der besten Webdesign-Beispiele für Anfänger, die Sie heute online finden können. Wenn Sie sich für Premium-Optionen mit sauberem Code interessieren, schauen Sie sich diese Artikel des Envato Tuts+ Teams an.
15+ beste einseitige Website-Vorlagen mit ansprechenden Designs
Die 16 Besten Responsiven HTML5-Website-Design-Geschäftsvorlagen
Die 21 besten responsive Restaurant & Food Website HTML-Vorlagen für 2021
Die 24 besten eCommerce Website-Vorlagen: Aktualisiert für 2022
Mehr über Code lernen mit Envato Tuts+
Ganz gleich, ob Sie Anfänger sind oder schon Erfahrung mit Code haben, es gibt immer etwas Neues zu lernen. Wenn Sie Videotutorials und Anleitungen finden möchten, die Ihnen dabei helfen, besuchen Sie den Envato Tuts+ YouTube Kanal. Dort gibt es Hunderte von Video-Tutorials, auch für Code. Schauen Sie sich einfach unsere Wiedergabeliste für Code-Videos an. Hier ein Blick darauf, was Sie finden können:
Auch auf der Envato Tuts+ Website gibt es schriftliche Anleitungen und Kurse. Im Folgenden finden Sie einige, mit denen Sie beginnen können.
Weiter die Welt des Codes erforschen!
Heute haben Sie gelernt, wie man eine Website mit einer Webvorlage programmiert, und Sie haben sich einige ausgezeichnete Vorlagenoptionen angesehen. Webdesign-Vorlagen sind perfekt, wenn Sie HTML leicht machen oder schnelles Webdesign für Anfänger und Experten betreiben wollen.
Denken Sie daran, dass Sie noch mehr nützliche Webdesign-Vorlagen von Envato Elements mit Ihrem Abonnement finden können. Es gibt noch mehr HTML-Webseitenvorlagen von ThemeForest, die Sie ohne Mitgliedschaft erwerben können.
Wenn Sie an der Gestaltung weiterer Webseiten interessiert sind, finden Sie weitere Anleitungen auf unserer Website und unserem YouTube-Kanal. Fanden Sie diesen Leitfaden hilfreich? Lassen Sie es uns in den Kommentaren wissen!
