Website erstellen: HTML lernen für Einsteiger
In der heutigen digitalen Welt ist eine ansprechende und funktionale Website unerlässlich, sei es für persönliche Projekte oder für professionelle Zwecke. Das Erstellen einer Website kann überwältigend erscheinen, besonders wenn man nicht mit den Grundlagen der Webentwicklung vertraut ist. In diesem Artikel werden wir die grundlegenden Schritte zur Erstellung einer Website erörtern und dabei einen besonderen Fokus auf das Erlernen von HTML legen. HTML, oder Hypertext Markup Language, ist die Grundlage jeder Website und ermöglicht es Ihnen, Inhalte strukturiert und ansprechend anzuzeigen.
Was ist HTML?
HTML steht für Hypertext Markup Language und ist die Standardauszeichnungssprache für Dokumente, die im Web angezeigt werden. HTML beschreibt die Struktur von Webseiten mithilfe von Markup-Elementen. Diese Elemente bestehen aus Tags, die den Browser anweisen, wie der Inhalt angezeigt werden soll. Dazu gehören Texte, Bilder, Links, Tabellen und vieles mehr. Wenn Sie eine Website erstellen möchten, ist es unerlässlich, die Grundlagen von HTML zu verstehen.
Die grundlegenden Elemente einer HTML-Seite
<pJede HTML-Seite besteht aus verschiedenen Elementen. Zu den grundlegenden Bestandteilen gehören:
1. Der Tag
<pDer Tag informiert den Browser über die verwendete HTML-Version. Für HTML5 verwenden Sie einfach:
<!DOCTYPE html>
2. Der Tag
Der Tag umfasst den gesamten Inhalt der HTML-Datei. So sieht der Anfang Ihrer Datei aus:
<html>
3. Der Bereich
Im Bereich finden Sie Metadaten, die nicht direkt auf der Seite angezeigt werden, aber für den Browser und Suchmaschinen wichtig sind. Beispiele sind der
Tag, der den Titel der Seite definiert, und der Tag, der Informationen über den Inhalt der Seite enthält:</p>
<pre><head>
<meta charset="UTF-8">
<title>Mein Erste Website</title>
</head></pre>
<h4>4. Der Bereich</h4>
<p>Der Bereich enthält alle sichtbaren Inhalte Ihrer Webseite, einschließlich Texte, Bilder und Links. Hier ist ein einfaches Beispiel:</p>
<pre><body>
<h1>Willkommen auf meiner Website!</h1>
<p>Das ist mein erster Versuch, eine Website zu erstellen.</p>
</body></pre>
<h3>HTML-Tags und ihre Verwendung</h3>
<p>HTML verwendet Tags, um verschiedene Elemente zu definieren. Hier sind einige der am häufigsten verwendeten Tags:</p>
<h4><strong>Textformatierung:</strong></h4>
<ul>
<li>
<pre><h1> bis <h6> für Überschriften</pre>
</li>
<li>
<pre><p> für Absätze</pre>
</li>
<li>
<pre><strong> für fettgedruckten Text</pre>
</li>
<li>
<pre><em> für kursiven Text</pre>
</li>
</ul>
<h4><strong>Links und Bilder:</strong></h4>
<p>Um Links hinzuzufügen, verwenden Sie den <a> Tag:</p>
<pre><a href="https://example.com">Besuchen Sie meine Seite!</a></pre>
<p>Für Bilder verwenden Sie den <img> Tag:</p>
<pre><img src="bild.jpg" alt="Beschreibung des Bildes"></pre>
<h3>Warum Ypsilon.dev für Ihre Website erstellen?</h3>
<p>Bei <strong>Ypsilon.dev</strong> verstehen wir, dass das Erstellen einer Website mehr ist als nur das Lernen von HTML. Wir bieten umfassende <a href="https://ypsilon.dev/website-erstellen/">Webdesign-Dienstleistungen</a>, die sowohl modernes Design als auch technische Exzellenz umfassen. Unsere Websites sind maßgeschneidert und darauf ausgelegt, sowohl gut auszusehen als auch hervorragende Leistungen zu erbringen.</p>
<h3>Schritt für Schritt: Eine einfache HTML-Webseite erstellen</h3>
<p>Hier ist eine einfache Schritt-für-Schritt-Anleitung, um Ihre erste Webseite zu erstellen:</p>
<h4>Schritt 1: Ein Text-Editor</h4>
<p>Um mit dem Codieren Ihrer HTML-Seite zu beginnen, benötigen Sie einen Text-Editor. Beliebte Optionen sind <strong>Notepad++</strong>, <strong>Sublime Text</strong> oder <strong>VSCode</strong>.</p>
<h4>Schritt 2: HTML-Datei erstellen</h4>
<p>Erstellen Sie eine neue Datei mit der Endung <strong>.html</strong>, z. B. <strong>index.html</strong>. Öffnen Sie diese Datei in Ihrem Text-Editor.</p>
<h4>Schritt 3: Grundstruktur hinzufügen</h4>
<p>Kopieren Sie die grundlegende Struktur einer HTML-Seite, die wir zuvor besprochen haben, in Ihre <strong>index.html</strong> Datei.</p>
<h4>Schritt 4: Inhalte hinzufügen</h4>
<p>Beginnen Sie, Texte, Bilder und Links hinzuzufügen. Experimentieren Sie mit verschiedenen HTML-Tags, um sich mit deren Funktionsweise vertraut zu machen.</p>
<h4>Schritt 5: Speichern und Testen</h4>
<p>Speichern Sie Ihre Datei und öffnen Sie sie in einem Browser, um zu sehen, wie Ihre Website aussieht.</p>
<h3>CSS und JavaScript in Verbindung mit HTML</h3>
<p>Nachdem Sie ein grundlegendes Verständnis von HTML haben, sollten Sie auch über <strong>CSS</strong> (Cascading Style Sheets) und <strong>JavaScript</strong> (JS) nachdenken. CSS ermöglicht es Ihnen, das Erscheinungsbild Ihrer Website zu gestalten, während JavaScript Funktionen und Interaktivität hinzufügt. Diese beiden Technologien ergänzen HTML und sind für das Erstellen moderner Websites unerlässlich. Sie können mehr über CSS- und JavaScript-Grundlagen lernen, um Ihre Kenntnisse umfassend zu erweitern.</p>
<h3>SEO-Optimierung für Ihre Website</h3>
<p>Die Erstellung einer Website ist nur der erste Schritt. Damit Ihre Website auch tatsächlich gesehen wird, ist es wichtig, sich mit <strong>Suchmaschinenoptimierung (SEO)</strong> zu beschäftigen. Hier sind einige einfache Techniken, um Ihre Website für Suchmaschinen zu optimieren:</p>
<ul>
<li>
<strong>Keyword-Integration:</strong> Stellen Sie sicher, dass die für Ihr Zielpublikum relevanten Keywords in Ihren Texten vorkommen, wie z. B. „Website erstellen“ oder „HTML lernen“.
</li>
<li>
<strong>Metadaten hinzufügen:</strong> Achten Sie darauf, dass jede Seite über relevante Metadaten wie den <title> Tag und Beschreibungen verfügt.
</li>
<li>
<strong>Responsive Design:</strong> Stellen Sie sicher, dass Ihre Website auf verschiedenen Geräten gut aussieht, indem Sie responsives Design verwenden.
</li>
</ul>
<h3>Professionelle Unterstützung durch Ypsilon.dev</h3>
<p>Wenn Sie mehr als nur die Grundlagen des HTML-Lernens benötigen, dann sind die Experten von <strong>Ypsilon.dev</strong> genau die richtige Wahl für Sie. Wir bieten nicht nur die <a href="https://ypsilon.dev/website-erstellen/">professionelle Erstellung von Websites</a> an, sondern auch umfassende <strong>SEO-Optimierung</strong>, um sicherzustellen, dass Ihre Seite von potenziellen Kunden gefunden wird. Unsere maßgeschneiderten Lösungen kombiniert mit unserer Expertise helfen Ihnen, die perfekte Online-Präsenz aufzubauen.</p>
<h3>Fazit</h3>
<p>Das Erstellen einer Website kann eine lohnende Tätigkeit sein, insbesondere wenn Sie bereit sind, die Grundlagen von HTML zu lernen und anzuwenden. Ob für einen persönlichen Blog, ein Portfolio oder ein Geschäft, mit diesen grundlegenden Kenntnissen und den richtigen Tools können Sie Ihre eigene Website erfolgreich erstellen. Und wenn Sie professionelle Unterstützung benötigen, sind wir von <strong>Ypsilon.dev</strong> bereit, Ihnen zu helfen, Ihre digitale Vision in die Realität umzusetzen.</p>
<p>Denken Sie daran, dass Ihre digitale Zukunft hier beginnt – mit Ypsilon.dev.</p>
</div>
<div class="lc-block"> </div>
<div class="lc-block">
<p class="lead text-muted">Veröffentlicht am 13.10.2025</p>
</div>
<div class="lc-block"> <div class="lc-sharing-buttons mt-1 mb-5" >
<!-- Facebook (url) -->
<a class="btn btn-outline-dark btn-sm btn-facebook" href="https://www.facebook.com/sharer.php?u=https://ypsilon.dev/blog/website-erstellen-html-lernen/" target="_blank" rel="nofollow" title="Share on Facebook">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" width="1.4em" height="1.4em" lc-helper="svg-icon" fill="currentColor">
<path d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"></path>
</svg>
<span class="d-none d-lg-inline"> Facebook</span>
</a>
<!-- Whatsapp (url) -->
<a class="btn btn-outline-dark btn-sm btn-whatsapp" href="https://api.whatsapp.com/send?text=https://ypsilon.dev/blog/website-erstellen-html-lernen/" target="_blank" rel="nofollow" title="Share on Whatsapp">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="1.4em" height="1.4em" lc-helper="svg-icon" fill="currentColor">
<path d="M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z"></path>
</svg>
<span class="d-none d-lg-inline"> Whatsapp</span>
</a>
<!-- Telegram (url) -->
<a class="btn btn-outline-dark btn-sm btn-telegram" href="https://telegram.me/share/url?url=https://ypsilon.dev/blog/website-erstellen-html-lernen/&text=" target="_blank" rel="nofollow" title="Share on Telegram">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="1.4em" height="1.4em" lc-helper="svg-icon" fill="currentColor">
<path d="M446.7 98.6l-67.6 318.8c-5.1 22.5-18.4 28.1-37.3 17.5l-103-75.9-49.7 47.8c-5.5 5.5-10.1 10.1-20.7 10.1l7.4-104.9 190.9-172.5c8.3-7.4-1.8-11.5-12.9-4.1L117.8 284 16.2 252.2c-22.1-6.9-22.5-22.1 4.6-32.7L418.2 66.4c18.4-6.9 34.5 4.1 28.5 32.2z"></path>
</svg>
<span class="d-none d-lg-inline"> Telegram</span>
</a>
<!-- Twitter (url, text, @mention) -->
<a class="btn btn-outline-dark btn-sm btn-twitter" href="https://twitter.com/share?url=https://ypsilon.dev/blog/website-erstellen-html-lernen/&text=website erstellen html lernen&via=" target="_blank" rel="nofollow" title="Share on Twitter">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1.4em" height="1.4em" lc-helper="svg-icon" fill="currentColor">
<path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path>
</svg>
<span class="d-none d-lg-inline"> Twitter</span>
</a>
<!-- Email (subject, body) -->
<!--
<a class="btn btn-outline-dark btn-sm btn-email" href="mailto:?subject=website erstellen html lernen&body=https://ypsilon.dev/blog/website-erstellen-html-lernen/" target="_blank" rel="nofollow" title="Share via Email">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1.4em" height="1.4em" viewBox="0 0 24 24" lc-helper="svg-icon" fill="currentColor">
<path d="M22 6C22 4.9 21.1 4 20 4H4C2.9 4 2 4.9 2 6V18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V6M20 6L12 11L4 6H20M20 18H4V8L12 13L20 8V18Z"></path>
</svg>
<span class="d-none d-lg-inline"> Email</span>
</a>
-->
</div>
</div>
<div class="lc-block mb-4">
<div class="card">
<div class="card-body">
<div class="comments-area" id="comments">
<div id="respond" class="comment-respond">
<h3 id="reply-title" class="comment-reply-title">Schreibe einen Kommentar <small><a rel="nofollow" id="cancel-comment-reply-link" href="/blog/website-erstellen-html-lernen/#respond" style="display:none;">Antwort abbrechen</a></small></h3><form action="https://ypsilon.dev/wp-comments-post.php" method="post" id="commentform" class="comment-form"><p class="comment-notes"><span id="email-notes">Deine E-Mail-Adresse wird nicht veröffentlicht.</span> <span class="required-field-message">Erforderliche Felder sind mit <span class="required">*</span> markiert</span></p><div class="form-group comment-form-comment"><label for="comment">Kommentar <span class="required">*</span></label> <textarea class="form-control" id="comment" name="comment" cols="45" rows="8" maxlength="65525" required></textarea></div><div class="form-group comment-form-author"><label for="author">Name <span class="required">*</span></label> <input class="form-control" id="author" name="author" type="text" value="" size="30" maxlength="245" autocomplete="name" required /></div>
<div class="form-group comment-form-email"><label for="email">E-Mail <span class="required">*</span></label> <input class="form-control" id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" autocomplete="email" required /></div>
<div class="form-group comment-form-url"><label for="url">Website</label> <input class="form-control" id="url" name="url" type="url" value="" size="30" maxlength="200" autocomplete="url" /></div>
<div class="form-group form-check comment-form-cookies-consent"><input class="form-check-input" id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes" /> <label class="form-check-label" for="wp-comment-cookies-consent">Meinen Namen, meine E-Mail-Adresse und meine Website in diesem Browser für die nächste Kommentierung speichern.</label></div>
<p class="form-submit"><input name="submit" type="submit" id="submit" class="btn btn-secondary mt-3" value="Kommentar abschicken" /> <input type='hidden' name='comment_post_ID' value='373023' id='comment_post_ID' />
<input type='hidden' name='comment_parent' id='comment_parent' value='0' />
</p></form> </div><!-- #respond -->
</div><!-- #comments -->
</div>
</div>
</div>
</div>
</div>
<div class="row border-top border-bottom">
<div class="col-sm-6 py-3 py-md-4 w-50">
<div class="d-flex align-items-center ">
« <a class="btn btn-link text-truncate" href="https://ypsilon.dev/blog/website-erstellen-html-informatik/" rel="prev">website erstellen html informatik</a>
</div>
</div>
<div class="col-sm-6 py-3 py-md-4 w-50">
<div class="d-flex align-items-center justify-content-end">
<a class="btn btn-link text-truncate" href="https://ypsilon.dev/blog/website-erstellen-html-mac/" rel="next">website erstellen html mac</a> »
</div>
</div>
</div>
</div>
</section>
</main>
<footer id='lc-footer'>
<div data-rocket-location-hash="921521c19130ea87bde921e42659a31b" class="py-6 py-lg-8 bg-slate-50 text-slate-500">
<div data-rocket-location-hash="49812ba61bd17a4e15cd1f57ea283c15" class="mb-6 ">
<div class="container py-5">
<div class="row row-cols-3 row-cols-md-3 text-center align-items-center mx-auto shadow rounded-3" style="max-width: 600px;">
<div class=" py-3">
<a href="https://www.google.com/partners/agency?id=1690635610" target="_blank" rel="noopener noreferrer">
<div class="lc-block">
<img class="img-fluid" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20128%20128'%3E%3C/svg%3E" alt="Partner Logo" width="128" height="128" data-lazy-src="https://ypsilon.dev/wp-content/uploads/Partner-RGB.svg"><noscript><img class="img-fluid" src="https://ypsilon.dev/wp-content/uploads/Partner-RGB.svg" alt="Partner Logo" width="128" height="128" loading="lazy"></noscript>
</div>
</a>
</div>
<div class="col py-3">
<a href="https://partnernetzwerk.ionos.de/partner/ypsilon.dev.ug" target="_blank" rel="noopener noreferrer">
<div class="lc-block">
<img class="img-fluid" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20128%20128'%3E%3C/svg%3E" alt="IONOS Logo" width="128" height="128" data-lazy-src="https://ypsilon.dev/wp-content/uploads/ionos-light-g.svg"><noscript><img class="img-fluid" src="https://ypsilon.dev/wp-content/uploads/ionos-light-g.svg" alt="IONOS Logo" width="128" height="128" loading="lazy"></noscript>
</div>
</a>
</div>
<div class="col py-3">
<a href="https://www.google.de/search?q=ypsilon.dev+regensburg+reviews" target="_blank" rel="noopener noreferrer">
<div class="lc-block">
<img width="128" height="85" class="img-fluid" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20128%2085'%3E%3C/svg%3E" alt="Google Reviews" seda="lazy" data-lazy-src="https://ypsilon.dev/wp-content/uploads/Google.svg"><noscript><img width="128" height="85" class="img-fluid" src="https://ypsilon.dev/wp-content/uploads/Google.svg" alt="Google Reviews" seda="lazy"></noscript>
</div>
</a>
</div>
</div>
</div>
</div>
<div data-rocket-location-hash="a500a8c9cbaa231eafecb1fcfc0211aa" class="container ">
<div class="row">
<div class="col-12 col-md-6 col-lg-3 mb-4 mb-lg-0">
<div class="lc-block mb-4"><a class="navbar-brand" href="https://ypsilon.dev/">
<img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2032%2032'%3E%3C/svg%3E" width="32" height="32" class="align-middle me-1 wp-image-389" alt="logo" data-lazy-src="https://ypsilon.dev/wp-content/uploads/LogoY.svg"><noscript><img src="https://ypsilon.dev/wp-content/uploads/LogoY.svg" width="32" height="32" class="align-middle me-1 wp-image-389" alt="logo"></noscript>
</a></div>
<div class="lc-block small text-opacity-75">
<div>
<p>Die Webagentur für Web- und Internetlösungen.<br>Das helle Fenster zur Welt der Zahlen.</p>
</div>
</div>
<!-- /lc-block -->
<div class="lc-block py-2 d-flex gap-3"><a class="text-decoration-none text-slate-500 text-slate-400" href="https://www.facebook.com/ypsilon.dev">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" width="24px" height="24px" fill="currentColor">
<path d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"></path>
</svg>
<!--FB-->
</a>
<a class="text-decoration-none text-slate-500 text-slate-400" href="https://x.com/YpsilonDev_De">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="24px" height="24px" fill="currentColor">
<path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path>
</svg>
<!--X-->
</a>
<a class="text-decoration-none text-slate-500 text-slate-400" href="https://www.instagram.com/dev.ypsilon/">
<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z"></path>
</svg>
<!--Inst-->
</a>
<a class="text-decoration-none text-slate-500 text-slate-400" href="https://www.youtube.com/@Ypsilon-dev">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" width="24px" height="24px" fill="currentColor">
<path d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"></path>
</svg>
<!--YT-->
</a>
<a class="text-decoration-none text-slate-500 text-slate-400" href="https://www.linkedin.com/company/ypsilondev/">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="24px" height="24px" fill="currentColor">
<path d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z"></path>
</svg>
<!--LinkedIn-->
</a>
</div>
</div>
<div class="col-6 col-md-3 col-lg-2 offset-lg-1 mb-4 mb-lg-0">
<h5 class="fw-semibold text-slate-700 mb-3">Solutions</h5>
<!-- lc_nav_menu --> <ul id="menu-footer-1" class="navbar-nav"><li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-366708"><a href="https://ypsilon.dev/services/" class="nav-link ">Alle Services</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-366711"><a href="https://ypsilon.dev/webdesign-services/" class="nav-link ">Webdesign</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-366710"><a href="https://ypsilon.dev/online-marketing-services/" class="nav-link ">Online-Marketing</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-367173"><a href="https://ypsilon.dev/loesungen/" class="nav-link ">Tools</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom nav-item nav-item-367174"><a href="https://ypsilon.host/" class="nav-link ">Domain & Hosting</a></li>
</ul> <!-- /lc_nav_menu -->
</div>
<div class="col-6 col-md-3 col-lg-2 mb-4 mb-md-0">
<h5 class="fw-semibold text-slate-700 mb-3">Services</h5>
<!-- lc_nav_menu --> <ul id="menu-footer-2" class="navbar-nav"><li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-366925"><a href="https://ypsilon.dev/online-werbung/" class="nav-link ">Online Werbungen</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-366926"><a href="https://ypsilon.dev/seo-optimierung/" class="nav-link ">SEO Content</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-366927"><a href="https://ypsilon.dev/local-listing/" class="nav-link ">Local SEO</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-366928"><a href="https://ypsilon.dev/dsgvo-optimierung/" class="nav-link ">DSGVO-Optimierung</a></li>
</ul> <!-- /lc_nav_menu -->
</div>
<div class="col-6 col-md-3 col-lg-2 mb-4 mb-md-0">
<h5 class="fw-semibold text-slate-700 mb-3">Content</h5>
<!-- lc_nav_menu --> <ul id="menu-footer-3" class="navbar-nav"><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home nav-item nav-item-366922"><a href="https://ypsilon.dev/" class="nav-link ">Home</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page current_page_parent nav-item nav-item-366923"><a href="https://ypsilon.dev/blog/" class="nav-link active" aria-current="page">Blog</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-366924"><a href="https://ypsilon.dev/references/" class="nav-link ">Referenzen</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-366716"><a href="https://ypsilon.dev/kontakt/" class="nav-link ">Kontakt</a></li>
</ul> <!-- /lc_nav_menu -->
</div>
<div class="col-6 col-md-3 col-lg-2 mb-4 mb-md-0">
<h5 class="fw-semibold text-slate-700 mb-3">Legal</h5>
<!-- lc_nav_menu --> <ul id="menu-footer-4" class="navbar-nav"><li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-366718"><a href="https://ypsilon.dev/policies/terms-of-service/" class="nav-link ">AGB</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-366719"><a href="https://ypsilon.dev/policies/datenschutz/" class="nav-link ">Datenschutz</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-366720"><a href="https://ypsilon.dev/policies/impressum/" class="nav-link ">Impressum</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-366717"><a href="https://ypsilon.dev/policies/" class="nav-link ">Bedingungen</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-367833"><a href="https://ypsilon.dev/sitemap/" class="nav-link ">Sitemap</a></li>
</ul> <!-- /lc_nav_menu -->
</div>
</div>
<div class="lc-block border-top border-light border-opacity-75 pt-3 mt-5">
<p class="text-slate-500 small">© 2025 Ypsilon.dev UG (haftungsbeschränkt).</p>
</div>
</div>
</div>
</footer>
<script type="speculationrules">
{"prefetch":[{"source":"document","where":{"and":[{"href_matches":"\/*"},{"not":{"href_matches":["\/wp-*.php","\/wp-admin\/*","\/wp-content\/uploads\/*","\/wp-content\/*","\/wp-content\/plugins\/*","\/wp-content\/themes\/picostrap5-child-base\/*","\/wp-content\/themes\/picostrap5\/*","\/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]}
</script>
<script id="lc_script_tag" type="module"></script>
<a href="#" title="Scroll to page top" id="backToTop" onclick="window.scroll({ top: 0, left: 0, behavior: 'smooth'});" class="bg-light text-dark rounded">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-chevron-up" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z"/></svg>
</a>
<script>
window.addEventListener('scroll', function(){
if(window.pageYOffset >= 1000) document.getElementById('backToTop').style.visibility="visible"; else document.getElementById('backToTop').style.visibility="hidden";
}, { capture: false, passive: true});
</script>
<script type="module" src="https://ypsilon.dev/wp-content/plugins/borlabs-cookie/assets/javascript/borlabs-cookie-prioritize.min.js?ver=3.3.18.1-165" id="borlabs-cookie-prioritize-js-module" data-cfasync="false" data-no-minify="1" data-no-optimize="1"></script>
<script type="module" src="https://ypsilon.dev/wp-content/plugins/borlabs-cookie/assets/javascript/borlabs-cookie-iabtcf.min.js?ver=3.3.18.1" id="borlabs-cookie-core-js-module" data-cfasync="false" data-no-minify="1" data-no-optimize="1"></script>
<div id='pys_ajax_events'></div> <script>
var node = document.getElementsByClassName('woocommerce-message')[0];
if(node && document.getElementById('pys_late_event')) {
var messageText = node.textContent.trim();
if(!messageText) {
node.style.display = 'none';
}
}
</script>
<div id='pys_late_event' style='display:none' dir='[]'></div><!--googleoff: all--><div data-nosnippet data-borlabs-cookie-consent-required='true' id='BorlabsCookieBox'></div><div id='BorlabsCookieWidget' class='brlbs-cmpnt-container'></div><!--googleon: all--><noscript><img height="1" width="1" style="display: none;" src="https://www.facebook.com/tr?id=202892216083534&ev=PageView&noscript=1&eid=202892216083534f3b5c0cb-7c3b-409f-8b6f-6bb73b00197b&cd%5Bpost_category%5D=Infos&cd%5Bpage_title%5D=website+erstellen+html+lernen&cd%5Bpost_type%5D=post&cd%5Bpost_id%5D=373023&cd%5Bplugin%5D=PixelYourSite&cd%5Bevent_url%5D=ypsilon.dev%2Fblog%2Fwebsite-erstellen-html-lernen%2F&cd%5Buser_role%5D=guest" alt=""></noscript>
<script>
(function () {
var c = document.body.className;
c = c.replace(/woocommerce-no-js/, 'woocommerce-js');
document.body.className = c;
})();
</script>
<link rel='stylesheet' id='wc-blocks-style-css' href='https://ypsilon.dev/wp-content/plugins/woocommerce/assets/client/blocks/wc-blocks.css?ver=wc-10.3.4' media='all' />
<link rel='stylesheet' id='lc-aos-css' href='https://ypsilon.dev/wp-content/plugins/livecanvas/modules/optin-extra-assets/aos.css?ver=6.8.3' media='all' />
<script src="https://ypsilon.dev/wp-content/plugins/livecanvas/modules/optin-extra-assets/aos-with-init.js?ver=6.8.3" id="lc-aos-js"></script>
<script id="wpa-toolbar-js-extra">
var wpatb = {"location":"body","is_rtl":"ltr","is_right":"default","responsive":"a11y-non-responsive","contrast":"Umschalten auf hohe Kontraste","grayscale":"Umschalten zu Graustufen","fontsize":"Schrift vergr\u00f6\u00dfern","custom_location":"standard-location","enable_grayscale":"false","enable_fontsize":"true","enable_contrast":"true"};
var wpa11y = {"path":"https:\/\/ypsilon.dev\/wp-content\/plugins\/wp-accessibility\/toolbar\/css\/a11y-contrast.css?version=2.2.6"};
</script>
<script src="https://ypsilon.dev/wp-content/plugins/wp-accessibility/js/wpa-toolbar.min.js?ver=2.2.6" id="wpa-toolbar-js" defer data-wp-strategy="defer"></script>
<script id="rocket-browser-checker-js-after">
"use strict";var _createClass=function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}return function(Constructor,protoProps,staticProps){return protoProps&&defineProperties(Constructor.prototype,protoProps),staticProps&&defineProperties(Constructor,staticProps),Constructor}}();function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}var RocketBrowserCompatibilityChecker=function(){function RocketBrowserCompatibilityChecker(options){_classCallCheck(this,RocketBrowserCompatibilityChecker),this.passiveSupported=!1,this._checkPassiveOption(this),this.options=!!this.passiveSupported&&options}return _createClass(RocketBrowserCompatibilityChecker,[{key:"_checkPassiveOption",value:function(self){try{var options={get passive(){return!(self.passiveSupported=!0)}};window.addEventListener("test",null,options),window.removeEventListener("test",null,options)}catch(err){self.passiveSupported=!1}}},{key:"initRequestIdleCallback",value:function(){!1 in window&&(window.requestIdleCallback=function(cb){var start=Date.now();return setTimeout(function(){cb({didTimeout:!1,timeRemaining:function(){return Math.max(0,50-(Date.now()-start))}})},1)}),!1 in window&&(window.cancelIdleCallback=function(id){return clearTimeout(id)})}},{key:"isDataSaverModeOn",value:function(){return"connection"in navigator&&!0===navigator.connection.saveData}},{key:"supportsLinkPrefetch",value:function(){var elem=document.createElement("link");return elem.relList&&elem.relList.supports&&elem.relList.supports("prefetch")&&window.IntersectionObserver&&"isIntersecting"in IntersectionObserverEntry.prototype}},{key:"isSlowConnection",value:function(){return"connection"in navigator&&"effectiveType"in navigator.connection&&("2g"===navigator.connection.effectiveType||"slow-2g"===navigator.connection.effectiveType)}}]),RocketBrowserCompatibilityChecker}();
</script>
<script id="rocket-preload-links-js-extra">
var RocketPreloadLinksConfig = {"excludeUris":"\/(?:.+\/)?feed(?:\/(?:.+\/?)?)?$|\/(?:.+\/)?embed\/|\/kasse\/??(.*)|\/warenkorb\/?|\/mein-konto\/??(.*)|\/(index.php\/)?(.*)wp-json(\/.*|$)|\/refer\/|\/go\/|\/recommend\/|\/recommends\/","usesTrailingSlash":"1","imageExt":"jpg|jpeg|gif|png|tiff|bmp|webp|avif|pdf|doc|docx|xls|xlsx|php","fileExt":"jpg|jpeg|gif|png|tiff|bmp|webp|avif|pdf|doc|docx|xls|xlsx|php|html|htm","siteUrl":"https:\/\/ypsilon.dev","onHoverDelay":"100","rateThrottle":"3"};
</script>
<script id="rocket-preload-links-js-after">
(function() {
"use strict";var r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},e=function(){function i(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(e,t,n){return t&&i(e.prototype,t),n&&i(e,n),e}}();function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var t=function(){function n(e,t){i(this,n),this.browser=e,this.config=t,this.options=this.browser.options,this.prefetched=new Set,this.eventTime=null,this.threshold=1111,this.numOnHover=0}return e(n,[{key:"init",value:function(){!this.browser.supportsLinkPrefetch()||this.browser.isDataSaverModeOn()||this.browser.isSlowConnection()||(this.regex={excludeUris:RegExp(this.config.excludeUris,"i"),images:RegExp(".("+this.config.imageExt+")$","i"),fileExt:RegExp(".("+this.config.fileExt+")$","i")},this._initListeners(this))}},{key:"_initListeners",value:function(e){-1<this.config.onHoverDelay&&document.addEventListener("mouseover",e.listener.bind(e),e.listenerOptions),document.addEventListener("mousedown",e.listener.bind(e),e.listenerOptions),document.addEventListener("touchstart",e.listener.bind(e),e.listenerOptions)}},{key:"listener",value:function(e){var t=e.target.closest("a"),n=this._prepareUrl(t);if(null!==n)switch(e.type){case"mousedown":case"touchstart":this._addPrefetchLink(n);break;case"mouseover":this._earlyPrefetch(t,n,"mouseout")}}},{key:"_earlyPrefetch",value:function(t,e,n){var i=this,r=setTimeout(function(){if(r=null,0===i.numOnHover)setTimeout(function(){return i.numOnHover=0},1e3);else if(i.numOnHover>i.config.rateThrottle)return;i.numOnHover++,i._addPrefetchLink(e)},this.config.onHoverDelay);t.addEventListener(n,function e(){t.removeEventListener(n,e,{passive:!0}),null!==r&&(clearTimeout(r),r=null)},{passive:!0})}},{key:"_addPrefetchLink",value:function(i){return this.prefetched.add(i.href),new Promise(function(e,t){var n=document.createElement("link");n.rel="prefetch",n.href=i.href,n.onload=e,n.onerror=t,document.head.appendChild(n)}).catch(function(){})}},{key:"_prepareUrl",value:function(e){if(null===e||"object"!==(void 0===e?"undefined":r(e))||!1 in e||-1===["http:","https:"].indexOf(e.protocol))return null;var t=e.href.substring(0,this.config.siteUrl.length),n=this._getPathname(e.href,t),i={original:e.href,protocol:e.protocol,origin:t,pathname:n,href:t+n};return this._isLinkOk(i)?i:null}},{key:"_getPathname",value:function(e,t){var n=t?e.substring(this.config.siteUrl.length):e;return n.startsWith("/")||(n="/"+n),this._shouldAddTrailingSlash(n)?n+"/":n}},{key:"_shouldAddTrailingSlash",value:function(e){return this.config.usesTrailingSlash&&!e.endsWith("/")&&!this.regex.fileExt.test(e)}},{key:"_isLinkOk",value:function(e){return null!==e&&"object"===(void 0===e?"undefined":r(e))&&(!this.prefetched.has(e.href)&&e.origin===this.config.siteUrl&&-1===e.href.indexOf("?")&&-1===e.href.indexOf("#")&&!this.regex.excludeUris.test(e.href)&&!this.regex.images.test(e.href))}}],[{key:"run",value:function(){"undefined"!=typeof RocketPreloadLinksConfig&&new n(new RocketBrowserCompatibilityChecker({capture:!0,passive:!0}),RocketPreloadLinksConfig).init()}}]),n}();t.run();
}());
</script>
<script id="rocket_lazyload_css-js-extra">
var rocket_lazyload_css_data = {"threshold":"300"};
</script>
<script id="rocket_lazyload_css-js-after">
!function o(n,c,a){function u(t,e){if(!c[t]){if(!n[t]){var r="function"==typeof require&&require;if(!e&&r)return r(t,!0);if(s)return s(t,!0);throw(e=new Error("Cannot find module '"+t+"'")).code="MODULE_NOT_FOUND",e}r=c[t]={exports:{}},n[t][0].call(r.exports,function(e){return u(n[t][1][e]||e)},r,r.exports,o,n,c,a)}return c[t].exports}for(var s="function"==typeof require&&require,e=0;e<a.length;e++)u(a[e]);return u}({1:[function(e,t,r){"use strict";{const c="undefined"==typeof rocket_pairs?[]:rocket_pairs,a=(("undefined"==typeof rocket_excluded_pairs?[]:rocket_excluded_pairs).map(t=>{var e=t.selector;document.querySelectorAll(e).forEach(e=>{e.setAttribute("data-rocket-lazy-bg-"+t.hash,"excluded")})}),document.querySelector("#wpr-lazyload-bg-container"));var o=rocket_lazyload_css_data.threshold||300;const u=new IntersectionObserver(e=>{e.forEach(t=>{t.isIntersecting&&c.filter(e=>t.target.matches(e.selector)).map(t=>{var e;t&&((e=document.createElement("style")).textContent=t.style,a.insertAdjacentElement("afterend",e),t.elements.forEach(e=>{u.unobserve(e),e.setAttribute("data-rocket-lazy-bg-"+t.hash,"loaded")}))})})},{rootMargin:o+"px"});function n(){0<(0<arguments.length&&void 0!==arguments[0]?arguments[0]:[]).length&&c.forEach(t=>{try{document.querySelectorAll(t.selector).forEach(e=>{"loaded"!==e.getAttribute("data-rocket-lazy-bg-"+t.hash)&&"excluded"!==e.getAttribute("data-rocket-lazy-bg-"+t.hash)&&(u.observe(e),(t.elements||=[]).push(e))})}catch(e){console.error(e)}})}n(),function(){const r=window.MutationObserver;return function(e,t){if(e&&1===e.nodeType)return(t=new r(t)).observe(e,{attributes:!0,childList:!0,subtree:!0}),t}}()(document.querySelector("body"),n)}},{}]},{},[1]);
</script>
<script src="https://ypsilon.dev/wp-content/plugins/woocommerce/assets/js/sourcebuster/sourcebuster.min.js?ver=10.3.4" id="sourcebuster-js-js"></script>
<script id="wc-order-attribution-js-extra">
var wc_order_attribution = {"params":{"lifetime":1.0e-5,"session":30,"base64":false,"ajaxurl":"https:\/\/ypsilon.dev\/wp-admin\/admin-ajax.php","prefix":"wc_order_attribution_","allowTracking":true},"fields":{"source_type":"current.typ","referrer":"current_add.rf","utm_campaign":"current.cmp","utm_source":"current.src","utm_medium":"current.mdm","utm_content":"current.cnt","utm_id":"current.id","utm_term":"current.trm","utm_source_platform":"current.plt","utm_creative_format":"current.fmt","utm_marketing_tactic":"current.tct","session_entry":"current_add.ep","session_start_time":"current_add.fd","session_pages":"session.pgs","session_count":"udata.vst","user_agent":"udata.uag"}};
</script>
<script id="wc-order-attribution-js-before">
if (typeof wc_order_attribution !== 'undefined' && typeof wc_order_attribution.params !== 'undefined' && typeof wc_order_attribution.params.allowTracking !== 'undefined') {
const cookies = document.cookie.split('; ');
let consentWcOrderAttribution = false;
for (let c of cookies) {
if (c.startsWith('borlabs-cookie=')) {
consentWcOrderAttribution = c.includes('%22wc-order-attribution%22');
break;
}
}
wc_order_attribution.params.allowTracking = consentWcOrderAttribution;
}
</script>
<script src="https://ypsilon.dev/wp-content/plugins/woocommerce/assets/js/frontend/order-attribution.min.js?ver=10.3.4" id="wc-order-attribution-js"></script>
<script src="https://ypsilon.dev/wp-content/plugins/pixelyoursite-pro/dist/scripts/sha256.js?ver=0.11.0" id="js-sha256-js"></script>
<script data-borlabs-cookie-script-blocker-handle="google-recaptcha" data-borlabs-cookie-script-blocker-id="contact-form-seven-recaptcha" type='text/template' data-borlabs-cookie-script-blocker-src="https://www.google.com/recaptcha/api.js?render=6LcCx8cqAAAAAHFH1EyRBWRmqgmJvjjl8Jou_Pt_&ver=3.0" id="google-recaptcha-js"></script><script src="https://ypsilon.dev/wp-includes/js/dist/vendor/wp-polyfill.min.js?ver=3.15.0" id="wp-polyfill-js"></script>
<script data-borlabs-cookie-script-blocker-handle="wpcf7-recaptcha" data-borlabs-cookie-script-blocker-id="contact-form-seven-recaptcha" type='text/template' id="wpcf7-recaptcha-js-before">
var wpcf7_recaptcha = {
"sitekey": "6LcCx8cqAAAAAHFH1EyRBWRmqgmJvjjl8Jou_Pt_",
"actions": {
"homepage": "homepage",
"contactform": "contactform"
}
};
</script><script data-borlabs-cookie-script-blocker-handle="wpcf7-recaptcha" data-borlabs-cookie-script-blocker-id="contact-form-seven-recaptcha" type='text/template' data-borlabs-cookie-script-blocker-src="https://ypsilon.dev/wp-content/plugins/contact-form-7/modules/recaptcha/index.js?ver=6.1.3" id="wpcf7-recaptcha-js"></script><script id="wp-accessibility-js-extra">
var wpa = {"skiplinks":{"enabled":false,"output":""},"target":"1","tabindex":"1","underline":{"enabled":false,"target":"a"},"videos":"","dir":"ltr","lang":"de","titles":"1","labels":"1","wpalabels":{"s":"Search","author":"Name","email":"Email","url":"Website","comment":"Comment"},"alt":"","altSelector":".hentry img[alt]:not([alt=\"\"]), .comment-content img[alt]:not([alt=\"\"]), #content img[alt]:not([alt=\"\"]),.entry-content img[alt]:not([alt=\"\"])","current":"","errors":"","tracking":"1","ajaxurl":"https:\/\/ypsilon.dev\/wp-admin\/admin-ajax.php","security":"f2496df4fd","action":"wpa_stats_action","url":"https:\/\/ypsilon.dev\/blog\/website-erstellen-html-lernen\/","post_id":"373023","continue":"","pause":"Pause video","play":"Play video","restUrl":"https:\/\/ypsilon.dev\/wp-json\/wp\/v2\/media","ldType":"button","ldHome":"https:\/\/ypsilon.dev","ldText":"<span class=\"dashicons dashicons-media-text\" aria-hidden=\"true\"><\/span><span class=\"screen-reader\">Lange Beschreibung<\/span>"};
</script>
<script src="https://ypsilon.dev/wp-content/plugins/wp-accessibility/js/wp-accessibility.min.js?ver=2.2.6" id="wp-accessibility-js" defer data-wp-strategy="defer"></script>
<script src="https://ypsilon.dev/wp-content/themes/picostrap5-child-base/js/bootstrap.bundle.min.js" id="bootstrap5-childtheme-js" defer data-wp-strategy="defer"></script>
<script id="wapf-frontend-js-extra">
var wapf_config = {"ajax":"https:\/\/ypsilon.dev\/wp-admin\/admin-ajax.php","page_type":"other","display_options":{"format":"%2$s %1$s","symbol":"€","decimals":2,"decimal":",","thousand":".","trim_zeroes":false,"tax_suffix":"","tax_enabled":true,"price_incl_tax":true,"tax_display":"incl"},"slider_support":"1","hint":"(+{x})","today":"2025-11-05T00:00:00","date_format":"mm-dd-yyyy"};
</script>
<script src="https://ypsilon.dev/wp-content/plugins/advanced-product-fields-for-woocommerce-pro/assets/js/frontend.min.js?ver=3.0.3" id="wapf-frontend-js"></script>
<template id="brlbs-cmpnt-cb-template-contact-form-seven-recaptcha">
<div class="brlbs-cmpnt-container brlbs-cmpnt-content-blocker brlbs-cmpnt-with-individual-styles" data-borlabs-cookie-content-blocker-id="contact-form-seven-recaptcha" data-borlabs-cookie-content=""><div class="brlbs-cmpnt-cb-preset-b brlbs-cmpnt-cb-cf7-recaptcha"> <div data-bg="https://ypsilon.dev/wp-content/uploads/borlabs-cookie/1/bct-google-recaptcha-main.png" class="brlbs-cmpnt-cb-thumbnail rocket-lazyload" style=""></div> <div class="brlbs-cmpnt-cb-main"> <div class="brlbs-cmpnt-cb-content"> <p class="brlbs-cmpnt-cb-description">Sie müssen den Inhalt von <strong>reCAPTCHA</strong> laden, um das Formular abzuschicken. Bitte beachten Sie, dass dabei Daten mit Drittanbietern ausgetauscht werden.</p> <a class="brlbs-cmpnt-cb-provider-toggle" href="#" data-borlabs-cookie-show-provider-information role="button">Mehr Informationen</a> </div> <div class="brlbs-cmpnt-cb-buttons"> <a class="brlbs-cmpnt-cb-btn" href="#" data-borlabs-cookie-unblock role="button">Inhalt entsperren</a> <a class="brlbs-cmpnt-cb-btn" href="#" data-borlabs-cookie-accept-service role="button" style="display: inherit">Erforderlichen Service akzeptieren und Inhalte entsperren</a> </div> </div> </div></div>
</template>
<script>
(function() {
if (!document.querySelector('script[data-borlabs-cookie-script-blocker-id="contact-form-seven-recaptcha"]')) {
return;
}
const template = document.querySelector("#brlbs-cmpnt-cb-template-contact-form-seven-recaptcha");
const formsToInsertBlocker = document.querySelectorAll('form.wpcf7-form');
for (const form of formsToInsertBlocker) {
const blocked = template.content.cloneNode(true).querySelector('.brlbs-cmpnt-container');
form.after(blocked);
const btn = form.querySelector('.wpcf7-submit')
if (btn) {
btn.disabled = true
}
}
})();
</script><template id="brlbs-cmpnt-cb-template-contact-form-seven-turnstile">
<div class="brlbs-cmpnt-container brlbs-cmpnt-content-blocker brlbs-cmpnt-with-individual-styles" data-borlabs-cookie-content-blocker-id="contact-form-seven-turnstile" data-borlabs-cookie-content=""><div class="brlbs-cmpnt-cb-preset-b"> <div data-bg="https://ypsilon.dev/wp-content/uploads/borlabs-cookie/1/bct-cloudflare-turnstile-main.png" class="brlbs-cmpnt-cb-thumbnail rocket-lazyload" style=""></div> <div class="brlbs-cmpnt-cb-main"> <div class="brlbs-cmpnt-cb-content"> <p class="brlbs-cmpnt-cb-description">Sie sehen gerade einen Platzhalterinhalt von <strong>Turnstile</strong>. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.</p> <a class="brlbs-cmpnt-cb-provider-toggle" href="#" data-borlabs-cookie-show-provider-information role="button">Mehr Informationen</a> </div> <div class="brlbs-cmpnt-cb-buttons"> <a class="brlbs-cmpnt-cb-btn" href="#" data-borlabs-cookie-unblock role="button">Inhalt entsperren</a> <a class="brlbs-cmpnt-cb-btn" href="#" data-borlabs-cookie-accept-service role="button" style="display: inherit">Erforderlichen Service akzeptieren und Inhalte entsperren</a> </div> </div> </div></div>
</template>
<script>
(function() {
const template = document.querySelector("#brlbs-cmpnt-cb-template-contact-form-seven-turnstile");
const divsToInsertBlocker = document.querySelectorAll('body:has(script[data-borlabs-cookie-script-blocker-id="contact-form-seven-turnstile"]) .wpcf7-turnstile');
for (const div of divsToInsertBlocker) {
const cb = template.content.cloneNode(true).querySelector('.brlbs-cmpnt-container');
div.after(cb);
const form = div.closest('.wpcf7-form');
const btn = form?.querySelector('.wpcf7-submit');
if (btn) {
btn.disabled = true
}
}
})()
</script><template id="brlbs-cmpnt-cb-template-facebook-content-blocker">
<div class="brlbs-cmpnt-container brlbs-cmpnt-content-blocker brlbs-cmpnt-with-individual-styles" data-borlabs-cookie-content-blocker-id="facebook-content-blocker" data-borlabs-cookie-content=""><div class="brlbs-cmpnt-cb-preset-b brlbs-cmpnt-cb-facebook"> <div data-bg="https://ypsilon.dev/wp-content/uploads/borlabs-cookie/1/cb-facebook-main.png" class="brlbs-cmpnt-cb-thumbnail rocket-lazyload" style=""></div> <div class="brlbs-cmpnt-cb-main"> <div class="brlbs-cmpnt-cb-content"> <p class="brlbs-cmpnt-cb-description">Sie sehen gerade einen Platzhalterinhalt von <strong>Facebook</strong>. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.</p> <a class="brlbs-cmpnt-cb-provider-toggle" href="#" data-borlabs-cookie-show-provider-information role="button">Mehr Informationen</a> </div> <div class="brlbs-cmpnt-cb-buttons"> <a class="brlbs-cmpnt-cb-btn" href="#" data-borlabs-cookie-unblock role="button">Inhalt entsperren</a> <a class="brlbs-cmpnt-cb-btn" href="#" data-borlabs-cookie-accept-service role="button" style="display: inherit">Erforderlichen Service akzeptieren und Inhalte entsperren</a> </div> </div> </div></div>
</template>
<script data-borlabs-cookie-script-blocker-id='meta-pixel-pys' type='text/template'>
(function() {
const template = document.querySelector("#brlbs-cmpnt-cb-template-facebook-content-blocker");
const divsToInsertBlocker = document.querySelectorAll('div.fb-video[data-href*="//www.facebook.com/"], div.fb-post[data-href*="//www.facebook.com/"]');
for (const div of divsToInsertBlocker) {
const blocked = template.content.cloneNode(true).querySelector('.brlbs-cmpnt-container');
blocked.dataset.borlabsCookieContent = btoa(unescape(encodeURIComponent(div.outerHTML)));
div.replaceWith(blocked);
}
})()
</script><div data-rocket-location-hash="5dc2db7cec9530db099bb5c2a361d386" class="wttw" aria-hidden="true"><div data-rocket-location-hash="8d821a4e6c908568ec0aadd713925ff0" class="wapf-ttp"></div></div><script>window.lazyLoadOptions=[{elements_selector:"img[data-lazy-src],.rocket-lazyload,iframe[data-lazy-src]",data_src:"lazy-src",data_srcset:"lazy-srcset",data_sizes:"lazy-sizes",class_loading:"lazyloading",class_loaded:"lazyloaded",threshold:300,callback_loaded:function(element){if(element.tagName==="IFRAME"&&element.dataset.rocketLazyload=="fitvidscompatible"){if(element.classList.contains("lazyloaded")){if(typeof window.jQuery!="undefined"){if(jQuery.fn.fitVids){jQuery(element).parent().fitVids()}}}}}},{elements_selector:".rocket-lazyload",data_src:"lazy-src",data_srcset:"lazy-srcset",data_sizes:"lazy-sizes",class_loading:"lazyloading",class_loaded:"lazyloaded",threshold:300,}];window.addEventListener('LazyLoad::Initialized',function(e){var lazyLoadInstance=e.detail.instance;if(window.MutationObserver){var observer=new MutationObserver(function(mutations){var image_count=0;var iframe_count=0;var rocketlazy_count=0;mutations.forEach(function(mutation){for(var i=0;i<mutation.addedNodes.length;i++){if(typeof mutation.addedNodes[i].getElementsByTagName!=='function'){continue}
if(typeof mutation.addedNodes[i].getElementsByClassName!=='function'){continue}
images=mutation.addedNodes[i].getElementsByTagName('img');is_image=mutation.addedNodes[i].tagName=="IMG";iframes=mutation.addedNodes[i].getElementsByTagName('iframe');is_iframe=mutation.addedNodes[i].tagName=="IFRAME";rocket_lazy=mutation.addedNodes[i].getElementsByClassName('rocket-lazyload');image_count+=images.length;iframe_count+=iframes.length;rocketlazy_count+=rocket_lazy.length;if(is_image){image_count+=1}
if(is_iframe){iframe_count+=1}}});if(image_count>0||iframe_count>0||rocketlazy_count>0){lazyLoadInstance.update()}});var b=document.getElementsByTagName("body")[0];var config={childList:!0,subtree:!0};observer.observe(b,config)}},!1)</script><script data-no-minify="1" async src="https://ypsilon.dev/wp-content/plugins/wp-rocket/assets/js/lazyload/17.8.3/lazyload.min.js"></script><script>function lazyLoadThumb(e,alt,l){var t='<img data-lazy-src="https://i.ytimg.com/vi_webp/ID/hqdefault.webp" alt="" width="480" height="360"><noscript><img src="https://i.ytimg.com/vi_webp/ID/hqdefault.webp" alt="" width="480" height="360"></noscript>',a='<button class="play" aria-label="YouTube-Video abspielen"></button>';if(l){t=t.replace('data-lazy-','');t=t.replace('loading="lazy"','');t=t.replace(/<noscript>.*?<\/noscript>/g,'');}t=t.replace('alt=""','alt="'+alt+'"');return t.replace("ID",e)+a}function lazyLoadYoutubeIframe(){var e=document.createElement("iframe"),t="ID?autoplay=1";t+=0===this.parentNode.dataset.query.length?"":"&"+this.parentNode.dataset.query;e.setAttribute("src",t.replace("ID",this.parentNode.dataset.src)),e.setAttribute("frameborder","0"),e.setAttribute("allowfullscreen","1"),e.setAttribute("allow","accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"),this.parentNode.parentNode.replaceChild(e,this.parentNode)}document.addEventListener("DOMContentLoaded",function(){var exclusions=[];var e,t,p,u,l,a=document.getElementsByClassName("rll-youtube-player");for(t=0;t<a.length;t++)(e=document.createElement("div")),(u='https://i.ytimg.com/vi_webp/ID/hqdefault.webp'),(u=u.replace('ID',a[t].dataset.id)),(l=exclusions.some(exclusion=>u.includes(exclusion))),e.setAttribute("data-id",a[t].dataset.id),e.setAttribute("data-query",a[t].dataset.query),e.setAttribute("data-src",a[t].dataset.src),(e.innerHTML=lazyLoadThumb(a[t].dataset.id,a[t].dataset.alt,l)),a[t].appendChild(e),(p=e.querySelector(".play")),(p.onclick=lazyLoadYoutubeIframe)});</script>
<script>var rocket_beacon_data = {"ajax_url":"https:\/\/ypsilon.dev\/wp-admin\/admin-ajax.php","nonce":"e427955aaa","url":"https:\/\/ypsilon.dev\/blog\/website-erstellen-html-lernen","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":null,"status":{"atf":true,"lrc":true,"preconnect_external_domain":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_threshold":1800,"preconnect_external_domain_elements":["link","script","iframe"],"preconnect_external_domain_exclusions":["static.cloudflareinsights.com","rel=\"profile\"","rel=\"preconnect\"","rel=\"dns-prefetch\"","rel=\"icon\""]}</script><script data-name="wpr-wpr-beacon" src='https://ypsilon.dev/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script></body>
</html>
<!-- This website is like a Rocket, isn't it? Performance optimized by WP Rocket. Learn more: https://wp-rocket.me - Debug: cached@1762326216 -->