{"id":4065,"date":"2024-06-18T13:02:14","date_gmt":"2024-06-18T13:02:14","guid":{"rendered":"\/tutorials\/?p=4065"},"modified":"2025-12-18T13:45:45","modified_gmt":"2025-12-18T13:45:45","slug":"website-mit-html-erstellen","status":"publish","type":"post","link":"\/de\/tutorials\/website-mit-html-erstellen","title":{"rendered":"Website mit HTML erstellen: So geht\u2019s in 8 einfachen Schritten"},"content":{"rendered":"<p>Die Erstellung einer Website ist heutzutage einfach und erfordert keine Programmierkenntnisse. Plattformen wie Hostingers <strong>Website-Baukasten<\/strong> bieten eine einfache visuelle Oberfl&auml;che und Drag-and-Drop-Funktionen, die den Entwicklungsprozess erleichtern.<\/p><p>Vielleicht m&ouml;chten Sie aber auch Websites von Grund auf neu mit <strong>Hypertext Markup Language (HTML<\/strong>) erstellen. Das ist zwar schwieriger, aber HTML-Websites sind flexibler und schneller, da sie weniger Ressourcen f&uuml;r die Ausf&uuml;hrung ben&ouml;tigen.<\/p><p>Um Ihnen den Einstieg zu erleichtern, werden in diesem Artikel die Schritte zur Erstellung einer Website mit HTML erl&auml;utert. Wir geben Ihnen auch Tipps, wie Sie das Aussehen und die Funktionalit&auml;t Ihrer HTML-Website nach der Entwicklung verbessern k&ouml;nnen.<\/p><p>\n\n\n\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-wie-man-eine-website-mit-html-erstellt\"><strong>Wie man eine Website mit HTML erstellt<\/strong><\/h2><p>In diesem Abschnitt finden Sie eine Schritt-f&uuml;r-Schritt-Anleitung f&uuml;r die Programmierung einer Website mit HTML. Bevor Sie fortfahren, sollten Sie unseren <a href=\"https:\/\/www.hostinger.com\/tutorials\/html-cheat-sheet\"><strong>HTML-Spickzettel<\/strong><\/a> lesen, wenn Sie mit der Standard-Auszeichnungssprache nicht vertraut sind.<\/p><h3 class=\"wp-block-heading\" id=\"h-1-wahlen-sie-einen-html-code-editor\"><strong>1. W&auml;hlen Sie einen HTML-Code-Editor<\/strong><\/h3><p>Ein Code-Editor ist eine Software, mit der Sie Ihre Website schreiben. Sie k&ouml;nnen zwar eine HTML-Seite mit einem Standard-Text-Editor wie Notepad erstellen, aber es fehlen ihm Funktionen, die den Entwicklungsprozess vereinfachen, wie z. B.:<\/p><ul class=\"wp-block-list\">\n<li><strong>Syntaxhervorhebung:<\/strong> Markiert HTML-Tags je nach Kategorie in verschiedenen Farben. Dies macht die Codestruktur leichter lesbar und verst&auml;ndlich.<\/li>\n\n\n\n<li><strong>Automatische Vervollst&auml;ndigung:<\/strong> Schl&auml;gt automatisch HTML-Attribute, -Tags und -Elemente auf der Grundlage des vorherigen Wertes vor, um den Codierungsprozess zu beschleunigen.<\/li>\n\n\n\n<li><strong>Fehlererkennung:<\/strong> Hebt Syntaxfehler hervor, so dass ein Webentwickler sie schnell erkennen und beheben kann.<\/li>\n\n\n\n<li><strong>Integration:<\/strong> Einige Code-Editoren lassen sich mit Plugins, Git und FTP-Clients integrieren, um den Bereitstellungsprozess effizienter zu gestalten.<\/li>\n\n\n\n<li><strong>Live-Vorschau:<\/strong> Anstatt HTML-Dateien manuell in Browsern zu &ouml;ffnen, k&ouml;nnen Sie ein Plugin installieren, um eine Live-Vorschau der Website zu erhalten.<\/li>\n<\/ul><p>Da es viele Optionen gibt, haben wir einige der besten HTML-Code-Editoren aufgelistet, damit Sie einen finden, der Ihren Anforderungen entspricht:<\/p><ul class=\"wp-block-list\">\n<li><strong>Notepad++:<\/strong> Ein kostenloser, leichtgewichtiger Texteditor mit zus&auml;tzlichen Funktionen f&uuml;r Codierung und Plugin-Unterst&uuml;tzung.<\/li>\n\n\n\n<li><strong>Atom:<\/strong> Ein Open-Source-HTML-Editor mit einer Live-Vorschau der Website und umfassender Kompatibilit&auml;t mit Markup- und Skriptsprachen.<\/li>\n\n\n\n<li><strong>Visual Studio Code (VSCode):<\/strong> Ein beliebtes Tool f&uuml;r die Webentwicklung mit einer umfassenden Erweiterungsbibliothek zur Erweiterung seiner Funktionen.<\/li>\n<\/ul><h3 class=\"wp-block-heading\" id=\"h-2-planen-sie-das-layout-der-website\"><strong>2. Planen Sie das Layout der Website<\/strong><\/h3><p>Wenn Sie einen Layoutplan erstellen, k&ouml;nnen Sie sich das Aussehen Ihrer Website besser vorstellen. Sie k&ouml;nnen ihn auch als Checkliste verwenden, um festzustellen, welche Elemente Sie in Ihre Website aufnehmen sollten.<\/p><p>Dar&uuml;ber hinaus hilft Ihnen ein Layoutplan dabei, die Benutzerfreundlichkeit und die Navigation Ihrer Website zu bestimmen, die sich auf die Benutzererfahrung auswirken. Einige Elemente, die Sie bei der Planung ber&uuml;cksichtigen sollten, sind die Kopfzeile, die Fu&szlig;zeile und die Navigation der Website.<\/p><p>Sie k&ouml;nnen Stift und Papier oder eine Webdesign-Software wie <a href=\"https:\/\/www.figma.com\/\" target=\"_blank\" rel=\"noopener\"><strong>Figma<\/strong><\/a> verwenden, um ein Website-Layout zu entwerfen. Es muss nicht detailliert sein, solange es in etwa den Gesamteindruck Ihrer Website wiedergibt.<\/p><h3 class=\"wp-block-heading\" id=\"h-3-schreiben-sie-den-html-code\"><strong>3. Schreiben Sie den HTML-Code<\/strong><\/h3><p>Sobald das Tool und der Layoutplan fertig sind, k&ouml;nnen Sie mit dem Schreiben des Codes f&uuml;r Ihre Website beginnen. Die Schritte k&ouml;nnen je nach Ihrem Code-Editor variieren, aber die allgemeine Idee ist &auml;hnlich.<\/p><p>In diesem Tutorial zeigen wir Ihnen, wie Sie dies mit <strong>VSCode <\/strong>tun k&ouml;nnen:<\/p><ol class=\"wp-block-list\">\n<li>Erstellen Sie einen neuen Ordner auf Ihrem Computer. Dies wird das Verzeichnis f&uuml;r alle Dateien Ihrer Website sein.<\/li>\n\n\n\n<li>&Ouml;ffnen Sie VSCode &rarr; <strong>Datei <\/strong>&rarr; <strong>Ordner &ouml;ffnen<\/strong>.<\/li>\n\n\n\n<li>Suchen Sie den neuen Ordner und klicken Sie auf <strong>Ordner ausw&auml;hlen<\/strong>.<\/li>\n\n\n\n<li>W&auml;hlen Sie <strong>Neue Datei<\/strong>. Nennen Sie die Datei <strong>index.html <\/strong>und dr&uuml;cken Sie <strong>Enter<\/strong>.<\/li>\n\n\n\n<li>Klicken Sie zur Best&auml;tigung auf <strong>Datei erstellen<\/strong>.<\/li>\n\n\n\n<li>Sobald Sie auf die Registerkarte <strong>index.html <\/strong>des Editors weitergeleitet werden, geben Sie die folgende grundlegende HTML-Dokumentstruktur ein:<\/li>\n<\/ol><pre class=\"wp-block-preformatted\">&lt;!DOCTYPE html&gt;<br><br>&lt;html&gt;<br><br>&nbsp;&nbsp;&nbsp;&lt;head&gt;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt; &lt;\/title&gt;<br><br>&nbsp;&nbsp;&nbsp;&lt;\/head&gt;<br><br>&nbsp;&nbsp;&nbsp;&lt;body&gt;<br><br>&nbsp;&nbsp;&nbsp;&lt;\/body&gt;<br><br>&lt;\/html&gt;<\/pre><p>Um Ihnen das Verst&auml;ndnis des Codes zu erleichtern, finden Sie hier eine Erkl&auml;rung der einzelnen Tags:<\/p><ul class=\"wp-block-list\">\n<li><strong>&lt;!DOCTYPE html&gt;: <\/strong>Teilt den Browsern mit, dass die Website eine HTML-Seite ist.<\/li>\n\n\n\n<li><strong>&lt;\/html&gt;: <\/strong>Das Tag, das das HTML-Dokument &ouml;ffnet und angibt, wo der Code beginnt.<\/li>\n\n\n\n<li><strong>&lt;head&gt;: <\/strong>Ein Tag, das die Metadaten der Website enth&auml;lt.<\/li>\n\n\n\n<li><strong>&lt;title&gt;: <\/strong>Definiert den Text, der auf der Web-Browser-Registerkarte angezeigt wird, wenn Sie die Webseite besuchen.&nbsp;<\/li>\n\n\n\n<li><strong>&lt;body&gt;: <\/strong>Enth&auml;lt alle sichtbaren Inhalte auf der Webseite.<\/li>\n<\/ul><h3 class=\"wp-block-heading\" id=\"h-4-erstellen-sie-elemente-im-layout\"><strong>4. Erstellen Sie Elemente im Layout<\/strong><\/h3><p>F&uuml;gen Sie HTML-Code in die Datei <strong>index.html ein<\/strong>, um die Elemente Ihres geplanten Layouts zu erstellen. Je nach Design Ihrer Website ben&ouml;tigen Sie unterschiedliche <a href=\"https:\/\/www.w3schools.com\/html\/html5_semantic_elements.asp\" target=\"_blank\" rel=\"noopener\"><strong>semantische HTML-Elemente<\/strong><\/a>.<\/p><p>Diese Elemente unterteilen Ihre Website in mehrere Abschnitte und dienen als Container f&uuml;r den Inhalt. Hier sind die Tags, die wir verwenden werden:<\/p><ul class=\"wp-block-list\">\n<li><strong>&lt;header&gt;: <\/strong>Container f&uuml;r einleitende Inhalte oder die Navigation.<\/li>\n\n\n\n<li><strong>&lt;main&gt;: <\/strong>Stellt den Hauptinhalt einer Webseite dar.<\/li>\n\n\n\n<li><strong>&lt;div&gt;: <\/strong>Definiert einen Abschnitt in einem HTML-Dokument.<\/li>\n\n\n\n<li><strong>&lt;footer&gt;: <\/strong>Enth&auml;lt den Inhalt, der am unteren Rand Ihrer Website angezeigt wird.<\/li>\n<\/ul><p>F&uuml;gen Sie diese Elemente innerhalb der &lt;body&gt;&lt;\/body&gt;-Tags in den Code Ihrer <strong>index.<\/strong>html-Datei ein. Stellen Sie sicher, dass Sie jedes Element mit einem schlie&szlig;enden Tag abschlie&szlig;en, sonst wird Ihr Code nicht funktionieren.<\/p><p>So sieht der vollst&auml;ndige Code aus:<\/p><pre class=\"wp-block-preformatted\">&lt;!DOCTYPE html&gt;<br><br>&lt;html&gt;<br><br>&nbsp;&nbsp;&nbsp;&lt;head&gt;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;Personal Blog&lt;\/title&gt;<br><br>&nbsp;&nbsp;&nbsp;&lt;\/head&gt;&nbsp;<br><br>&nbsp;&nbsp;&nbsp;&lt;body&gt;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;header&gt;&nbsp;&nbsp;&nbsp;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/header&gt;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;main&gt;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&rdquo;row\"&gt;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&rdquo;post-text-box&rdquo;&gt;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&rdquo;profile&rdquo;&gt;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;&nbsp;&nbsp;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/main&gt;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;footer&gt;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/footer&gt;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/body&gt;<br><br>&lt;\/html&gt;<\/pre><h3 class=\"wp-block-heading\" id=\"h-5-fugen-sie-den-html-inhalt-hinzu\"><strong>5. F&uuml;gen Sie den HTML-Inhalt hinzu<\/strong><\/h3><p>Nachdem das Layout fertig ist, beginnen Sie damit, den Inhalt Ihrer Website hinzuzuf&uuml;gen, z. B. Text, Bilder, Hyperlinks oder Videos. Wenn der Inhalt noch nicht fertig ist, verwenden Sie Dummy-Inhalte als Platzhalter und ersetzen Sie sie sp&auml;ter.<\/p><p>Hier sind einige Tags, mit denen wir den Inhalt der Website hinzuf&uuml;gen werden:<\/p><ul class=\"wp-block-list\">\n<li><strong>&lt;h1&gt; und &lt;p&gt;: <\/strong>Enthalten &Uuml;berschriften und Absatztext. Verwenden Sie den <strong>&lt;br&gt; <\/strong>Tag, um einen Zeilenumbruch zu erzeugen, wenn der Text zu lang ist.<\/li>\n\n\n\n<li><strong>&lt;nav&gt; und &lt;a&gt;: <\/strong>Geben die Navigationsleiste und ihr Ankerelement an. Verwenden Sie das href-Attribut, um die verlinkte URL des Ankers anzugeben.<\/li>\n\n\n\n<li><strong>&lt;img&gt;: <\/strong>Container f&uuml;r das Bildelement. Es enth&auml;lt das Attribut <strong>img src<\/strong>, das den Link oder den Namen der Bilddatei angibt.<\/li>\n<\/ul><p>\n\n\n<div class=\"protip\">\n                    <h4 class=\"title\">Profi-Tipp<\/h4>\n                    <p> Der img-Tag hat auch ein optionales alt-Attribut. Es beschreibt das Bild f&uuml;r den Fall, dass die Datei nicht geladen werden kann.<\/p>\n                <\/div>\n\n\n\n<\/p><p>So sieht der Code aus:<\/p><pre class=\"wp-block-preformatted\">&lt;!DOCTYPE html&gt;<br><br>&lt;html&gt;<br><br>&nbsp;&nbsp;&nbsp;&lt;head&gt;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;Personal Blog&lt;\/title&gt;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/head&gt;&nbsp;<br><br>&nbsp;&nbsp;&nbsp;&lt;body&gt;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;header&gt;&nbsp;&nbsp;&nbsp;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Your Personal Blog&lt;\/h1&gt;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;nav&gt;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&rdquo;domain.tld\/home&rdquo;&gt;Home&lt;\/a&gt;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&rdquo;domain.tld\/blog&rdquo;&gt;Blog&lt;\/a&gt;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&rdquo;domain.tld\/about&rdquo;&gt;About&lt;\/a&gt;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/nav&gt;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/header&gt;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;main&gt;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&rdquo;row\"&gt;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&rdquo;post-text-box&rdquo;&gt;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Newest Post&lt;\/h1&gt;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section&gt;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;First Post&lt;\/h1&gt;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;The first post&rsquo;s content&lt;\/p&gt;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/section&gt;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&rdquo;profile&rdquo;&gt;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;About Me&lt;\/h1&gt;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src=&rdquo;profile-picture.png&rdquo;&gt;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;About the author&lt;\/p&gt;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;&nbsp;&nbsp;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/main&gt;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;footer&gt;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&rdquo;twitter.com\/author&rdquo;&gt;Twitter&lt;\/a&gt;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&rdquo;facebook.com\/author&rdquo;&gt;Facebook&lt;\/a&gt;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&rdquo;instagram.com\/author&rdquo;&gt;Instagram&lt;\/a&gt;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/footer&gt;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/body&gt;<br><br>&lt;\/html&gt;<\/pre><p>Nachdem Sie den Code hinzugef&uuml;gt haben, sieht Ihre HTML-Website wie folgt aus:<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"69ef9f419e6b0\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1460\" height=\"623\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2024\/06\/A-website-written-only-with-HTML.png\/public\" alt=\"Eine mit HTML erstellte Website\" class=\"wp-image-4068\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2024\/06\/A-website-written-only-with-HTML.png\/w=1460,fit=scale-down 1460w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2024\/06\/A-website-written-only-with-HTML.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2024\/06\/A-website-written-only-with-HTML.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2024\/06\/A-website-written-only-with-HTML.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1460px) 100vw, 1460px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Vergr&ouml;&szlig;ern\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><h3 class=\"wp-block-heading\" id=\"h-6-binden-sie-layout-css-ein\"><strong>6. Binden Sie Layout-CSS ein<\/strong><\/h3><p>Da Sie mit HTML nur die Struktur der Website erstellen und grundlegende Inhalte hinzuf&uuml;gen k&ouml;nnen, verwenden Sie <a href=\"\/de\/tutorials\/was-ist-css\"><strong>Cascading Style Sheets (CSS)<\/strong><\/a>, um das Layout zu &auml;ndern. CSS ist eine Sprache, die den Stil Ihres HTML-Dokuments definiert.<\/p><p>Erstellen Sie dazu eine <strong>style.<\/strong>css-Datei und <a href=\"\/de\/tutorials\/css-in-html-einbinden\"><strong>verkn&uuml;pfen Sie das Stylesheet mit dem HTML-Dokument<\/strong><\/a>, indem Sie den folgenden Code zwischen den &ouml;ffnenden und schlie&szlig;enden &lt;head&gt;-Tags der <strong>index.html einf&uuml;gen:<\/strong><\/p><pre class=\"wp-block-preformatted\">&lt;link rel=\"stylesheet\" href=\"style.css\"&gt;<\/pre><p>Um das zweispaltige Website-Layout zu erstellen, werden wir die Eigenschaft <strong>flex <\/strong>verwenden. Sie ordnet HTML-Elemente mit flexiblen Containern an, so dass sie sich an die Bildschirmgr&ouml;&szlig;e des Benutzers anpassen k&ouml;nnen.<\/p><p>So sieht der vollst&auml;ndige Code aus:<\/p><pre class=\"wp-block-preformatted\">\/*header style*\/<br><br>header {<br><br>&nbsp;&nbsp;&nbsp;text-align: center;&nbsp;<br><br>&nbsp;&nbsp;&nbsp;padding: 20px;<br><br>}<br><br>\/*navigation menu style*\/<br><br>nav {<br><br>&nbsp;&nbsp;&nbsp;text-align: center;<br><br>&nbsp;&nbsp;&nbsp;word-spacing: 30px;<br><br>&nbsp;&nbsp;&nbsp;Padding: 10px;<br><br>}<br><br>\/*creating the two-column layout*\/<br><br>*{<br><br>&nbsp;&nbsp;&nbsp;box-sizing: border-box;<br><br>}<br><br>.row {<br><br>&nbsp;&nbsp;&nbsp;display: flex;<br><br>&nbsp;&nbsp;&nbsp;flex-wrap: wrap;<br><br>}<br><br>.post-text-box {<br><br>&nbsp;&nbsp;&nbsp;flex: 70%;<br><br>&nbsp;&nbsp;&nbsp;padding: 20px;<br><br>}<br><br>.profile {<br><br>&nbsp;&nbsp;&nbsp;flex: 70%;<br><br>&nbsp;&nbsp;&nbsp;padding: 20px;<br><br>}<br><br>\/*profile image and heading style*\/<br><br>.profile img {<br><br>&nbsp;&nbsp;&nbsp;width: 120px;<br><br>&nbsp;&nbsp;&nbsp;display: block;<br><br>&nbsp;&nbsp;&nbsp;margin-left: 0;<br><br>&nbsp;&nbsp;&nbsp;margin-right: 0;<br><br>}<br><br>.profile h1 {<br><br>&nbsp;&nbsp;&nbsp;text-align: center;<br><br>}<\/pre><p>Nachdem Sie den Codeschnipsel zu Ihrer CSS-Datei hinzugef&uuml;gt haben, sieht die Website folgenderma&szlig;en aus:<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"69ef9f41a0e77\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1460\" height=\"588\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2024\/06\/A-website-with-CSS-layout.png\/public\" alt=\"Website mit CSS-Layout\" class=\"wp-image-4069\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2024\/06\/A-website-with-CSS-layout.png\/w=1460,fit=scale-down 1460w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2024\/06\/A-website-with-CSS-layout.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2024\/06\/A-website-with-CSS-layout.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2024\/06\/A-website-with-CSS-layout.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1460px) 100vw, 1460px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Vergr&ouml;&szlig;ern\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><h3 class=\"wp-block-heading\" id=\"h-7-passen-sie-ihre-website-an\"><strong>7. Passen Sie Ihre Website an<\/strong><\/h3><p>Neben der &Auml;nderung des Layouts k&ouml;nnen Sie mit CSS auch andere visuelle Aspekte Ihrer Website anpassen. Sie k&ouml;nnen zum Beispiel die Schriftfamilie und das Hintergrundbild &auml;ndern.<\/p><p>Um das Aussehen Ihrer Website zu &auml;ndern, f&uuml;gen Sie die CSS-Eigenschaften in das Element ein, das Sie anpassen m&ouml;chten. Hier ist zum Beispiel der Code zur Gestaltung der Hintergrundfarbe und der Textelemente der Navigations-Men&uuml;leiste:<\/p><pre class=\"wp-block-preformatted\">\/*navigation bar style*\/<br><br>nav {<br><br>&nbsp;&nbsp;&nbsp;text-align: center;<br><br>&nbsp;&nbsp;&nbsp;word-spacing: 30px;<br><br>&nbsp;&nbsp;&nbsp;padding: 10px;<br><br>&nbsp;&nbsp;&nbsp;background-color: #f5f5dc<br><br>&nbsp;&nbsp;&nbsp;font-family: Helvetica;<br><br>}<br><br>\/*navigation bar button style*\/<br><br>nav a {<br><br>&nbsp;&nbsp;&nbsp;color: #000000;<br><br>&nbsp;&nbsp;&nbsp;text-decoration: none;<br><br>&nbsp;&nbsp;&nbsp;font-size: larger;<br><br>}<\/pre><p>Nachdem Sie f&uuml;r jedes Element ein CSS-Styling hinzugef&uuml;gt haben, sieht die Website folgenderma&szlig;en aus:<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"69ef9f41a363d\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1460\" height=\"572\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2024\/06\/An-HTML-website-with-CSS-layout-and-styling.png\/public\" alt=\"Website mit CSS-Layout und -Styling\" class=\"wp-image-4070\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2024\/06\/An-HTML-website-with-CSS-layout-and-styling.png\/w=1460,fit=scale-down 1460w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2024\/06\/An-HTML-website-with-CSS-layout-and-styling.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2024\/06\/An-HTML-website-with-CSS-layout-and-styling.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2024\/06\/An-HTML-website-with-CSS-layout-and-styling.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1460px) 100vw, 1460px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Vergr&ouml;&szlig;ern\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><h3 class=\"wp-block-heading\" id=\"h-8-wahlen-sie-eine-hosting-plattform-und-gehen-sie-live\"><strong>8. W&auml;hlen Sie eine Hosting-Plattform und gehen Sie live<\/strong><\/h3><p>Sobald Sie alle Dateien und Assets der Website fertiggestellt haben, ist es an der Zeit, sie zu ver&ouml;ffentlichen. Dieser Schritt erfordert ein Hosting, das Sie von einem Hosting-Anbieter erhalten.<\/p><p>Die Webhosting-Angebote von Hostinger, die bei <strong>2,79 &euro; <\/strong>beginnen, beinhalten eine kostenlose Domain, ein SSL-Zertifikat und automatische Backups. Der niedrigste Tarif bietet <strong>100 GB SSD-Speicher <\/strong>f&uuml;r bis zu 100 Websites und damit ausreichend Platz f&uuml;r zuk&uuml;nftige Webentwicklungs-Projekte.<\/p><p>Standard-Sicherheitsma&szlig;nahmen wie eine Web Application Firewall, ein Malware-Scanner, eine Cloudflare DNS-Firewall und <a href=\"\/de\/tutorials\/domain-privacy\"><strong>WHOIS-Datenschutz<\/strong><\/a> sch&uuml;tzen Ihre HTML-Website vor b&ouml;sartigen Angriffen. Nutzer von <strong>Business Webhosting <\/strong>und h&ouml;heren Tarifen k&ouml;nnen auch unsere hauseigene DNS-L&ouml;sung f&uuml;r eine verbesserte Leistung nutzen.<\/p><p>Sie k&ouml;nnen unsere Hosting-Services risikofrei mit unserer <strong>30-Tage-Geld-zur&uuml;ck-Garantie <\/strong>testen.<\/p><figure class=\"wp-block-image size-large\"><a href=\"\/de\/webhosting\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2024\/02\/DE-Web-hosting_in-text-banner.png\/public\" alt=\"\" class=\"wp-image-3553\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2024\/02\/DE-Web-hosting_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2024\/02\/DE-Web-hosting_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2024\/02\/DE-Web-hosting_in-text-banner.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><p>Nachdem Sie das Hosting in Anspruch genommen haben, verwenden Sie entweder einen Dateimanager oder einen FTP-Client, um Ihre Website ins Internet hochzuladen.<\/p><p>Hier erfahren Sie, wie Sie Ihre Website-Dateien mit dem Dateimanager von Hostinger hochladen k&ouml;nnen:<\/p><ol class=\"wp-block-list\">\n<li>Navigieren Sie im hPanel zu <strong>Dateien <\/strong>&rarr; <strong>Dateimanager<\/strong>.<\/li>\n\n\n\n<li>&Ouml;ffnen Sie <strong>public_html <\/strong>und laden Sie die Archivdatei der Website von Ihrem Computer in das Stammverzeichnis hoch.<\/li>\n\n\n\n<li>Klicken Sie mit der rechten Maustaste auf die hochgeladene Datei und w&auml;hlen Sie <strong>Extrahieren<\/strong>.<\/li>\n<\/ol><p>Die Dateimanager-Methode ist ideal f&uuml;r das Hochladen von Website-Dateien unter <strong>100 GB<\/strong>.<\/p><h2 class=\"wp-block-heading\" id=\"h-tipps-zum-optimieren-einer-html-website\"><strong>Tipps zum Optimieren einer HTML-Website<\/strong><\/h2><p>In diesem Abschnitt werden die Schritte erl&auml;utert, die Sie nach der Erstellung einer Website mit HTML und CSS durchf&uuml;hren m&uuml;ssen. Befolgen Sie sie, um die Zug&auml;nglichkeit und Funktionalit&auml;t Ihrer Website zu verbessern.<\/p><p><strong>Eine Dropdown-Leiste f&uuml;r bessere Navigation hinzuf&uuml;gen<\/strong><\/p><p>Komplexe Websites mit mehreren Seiten haben viele Navigationsschaltfl&auml;chen, Links und Texte. Sie k&ouml;nnen ein einfaches Dropdown-Men&uuml; mit CSS erstellen, um diese Elemente zu gruppieren.<\/p><p>Benutzer k&ouml;nnen die Navigationsleiste erweitern, um auf die Elemente zuzugreifen. Dies tr&auml;gt dazu bei, die &Uuml;bersichtlichkeit und die Benutzerfreundlichkeit der Website f&uuml;r Benutzer mit kleineren Bildschirmen zu verbessern.<\/p><p><strong>Verbessern Sie das Design Ihrer Website mit fortgeschrittenem CSS<\/strong><\/p><p>Mit CSS k&ouml;nnen Sie erweiterte Anpassungen vornehmen, um das Design Ihrer Website f&uuml;r ein besseres Benutzererlebnis zu verbessern. Aktivieren Sie zum Beispiel das Einrasten beim Scrollen, die Textanimation, die Zoom-Animation beim Hovern und Farbverl&auml;ufe.<\/p><p>Dar&uuml;ber hinaus k&ouml;nnen Sie mit Media Queries, CSS-Regeln und Flexboxen eine responsive Website erstellen. Das Flexbox-Layout passt Ihre Website automatisch an die Bildschirmgr&ouml;&szlig;e des Kunden an.<\/p><p><strong>Machen Sie die Website mit JavaScript interaktiver<\/strong><\/p><p>JavaScript ist eine Skriptsprache, mit der Sie interaktive und dynamische Website-Inhalte erstellen k&ouml;nnen. Aktivieren Sie zum Beispiel Animationen, f&uuml;gen Sie Countdowns hinzu und f&uuml;gen Sie Schaltfl&auml;chen, Formulare oder Men&uuml;s ein.<\/p><p>Diese Funktionen machen Ihre Website interessanter und fesselnder und verbessern das Benutzererlebnis. Die Schritte zum Hinzuf&uuml;gen von JavaScript zu Ihrer HTML-Website sind &auml;hnlich wie die f&uuml;r CSS. Sie k&ouml;nnen eine separate Datei verwenden oder es direkt in den aktuellen Code schreiben.<\/p><h2 class=\"wp-block-heading\" id=\"h-muss-ich-html-lernen-um-eine-website-zu-erstellen\"><strong>Muss ich HTML lernen, um eine Website zu erstellen?<\/strong><\/h2><p>Die Benutzer haben vielleicht nicht die Zeit oder das Engagement, HTML f&uuml;r die Webentwicklung zu lernen. Zum Gl&uuml;ck gibt es Plattformen, mit denen Sie eine funktionale Website erstellen k&ouml;nnen, ohne Code zu schreiben.<\/p><p>Ein Website-Baukasten wie Hostinger ist eine hervorragende Option f&uuml;r Anf&auml;nger. Er verf&uuml;gt &uuml;ber eine visuelle Benutzeroberfl&auml;che und einen Drag-and-Drop-Editor, der die Anpassung einfach macht.<\/p><p>Die Pflege einer Baukasten-basierten Website ist auch einfacher und weniger fehleranf&auml;llig, da Sie den Quellcode nicht manuell aktualisieren m&uuml;ssen. W&auml;hlen Sie einfach die Elemente aus, die Sie bearbeiten m&ouml;chten, und wenden Sie die &Auml;nderungen direkt auf einem Bildschirm an.<\/p><p>Da der Website-Baukasten von Hostinger in allen unseren Hosting-Angeboten enthalten ist, m&uuml;ssen Sie den Service nicht separat erwerben. Er ist bereits ab <strong>2,79 &euro;\/Monat <\/strong>erh&auml;ltlich<strong> <\/strong>und kann auf leistungsst&auml;rkere Hosting-Dienste aufger&uuml;stet werden.<\/p><h2 class=\"wp-block-heading\" id=\"h-fazit\"><strong>Fazit<\/strong><\/h2><p>Anstatt Website-Bauk&auml;sten zu verwenden, k&ouml;nnen Sie eine Website von Grund auf mit HTML programmieren. HTML-Seiten sind zwar komplizierter zu erstellen, aber ressourcenschonender und flexibler, da Sie den Quellcode bearbeiten k&ouml;nnen.<\/p><p>In diesem Artikel haben wir Ihnen in acht Schritten erkl&auml;rt, wie Sie eine Website mit HTML und CSS programmieren:<\/p><ol class=\"wp-block-list\">\n<li><strong>W&auml;hlen Sie einen HTML-Editor: <\/strong>W&auml;hlen Sie ein Programm zum Schreiben und Bearbeiten des Codes Ihrer Website, wie VSCode.<\/li>\n\n\n\n<li><strong>Planen Sie das Layout der Website: <\/strong>Erstellen Sie ein Mockup des Layouts der Website mit einem Programm wie Adobe XD oder mit Stift und Papier.<\/li>\n\n\n\n<li><strong>Schreiben Sie den HTML-Code: <\/strong>Erstellen Sie eine <strong>index.<\/strong>html-Datei und f&uuml;gen Sie HTML-Dokumentstruktur-Tags hinzu.<\/li>\n\n\n\n<li><strong>Erstellen Sie die Layout-Elemente: <\/strong>Unterteilen Sie Ihre Website in mehrere Abschnitte, die auf dem Layout basieren, indem Sie der HTML-Datei Tags hinzuf&uuml;gen.<\/li>\n\n\n\n<li><strong>F&uuml;gen Sie den HTML-Inhalt hinzu: <\/strong>F&uuml;gen Sie die &Uuml;berschrift, den Text und die Bilder in jeden Abschnitt ein.<\/li>\n\n\n\n<li><strong>Layout-CSS einbinden: <\/strong>Erstellen Sie eine <strong>style.<\/strong>css-Datei und f&uuml;gen Sie CSS-Code hinzu, um die Spaltenposition, die Textausrichtung und die Polsterung der Elemente zu &auml;ndern.<\/li>\n\n\n\n<li><strong>Passen Sie Ihre Website an: <\/strong>Verwenden Sie CSS-Stilattribute, um die Hintergrundfarbe, die Schriftgr&ouml;&szlig;e, die Schriftarten und andere visuelle Elemente der Website anzupassen.<\/li>\n\n\n\n<li><strong>Ver&ouml;ffentlichen Sie Ihre Website:<\/strong> W&auml;hlen Sie einen Hosting-Anbieter und laden Sie Ihre Dateien hoch, um Ihre Website zu ver&ouml;ffentlichen.<\/li>\n<\/ol><p>Nachdem Sie Ihre HTML-Webseite erstellt haben, k&ouml;nnen Sie fortgeschrittenes CSS und JavaScript hinzuf&uuml;gen, um die Navigation, die Interaktivit&auml;t und das Gesamtdesign zu verbessern.<\/p><p>Zu viel zu lernen? Suchen Sie einen Code-freien Website-Builder? Sehen Sie sich den Website-Baukasten von Hostinger an:<\/p><figure class=\"wp-block-image size-large\"><a href=\"\/de\/website-erstellen\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2024\/02\/DE-Website-Builder_in-text-banner.png\/public\" alt=\"\" class=\"wp-image-3571\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2024\/02\/DE-Website-Builder_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2024\/02\/DE-Website-Builder_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2024\/02\/DE-Website-Builder_in-text-banner.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><h2 class=\"wp-block-heading\" id=\"h-erstellen-einer-website-mit-html-faq\"><strong>Erstellen einer Website mit HTML FAQ<\/strong><\/h2><p>Damit Sie mehr &uuml;ber die Erstellung einer Website mit HTML erfahren, werden wir einige h&auml;ufig gestellte Fragen dazu beantworten.<\/p><div id=\"rank-math-faq\" class=\"rank-math-block\">\n<div class=\"rank-math-list \">\n<div id=\"faq-question-69440589a5970\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><strong>Reicht HTML aus, um eine Website zu erstellen?<\/strong><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Ja, Sie k&ouml;nnen eine funktionale Website nur mit HTML erstellen. Sie zeigt jedoch nur statische Inhalte wie Text, Links, Bilder und Videos an.<\/p>\n<p>Verwenden Sie CSS, um das HTML-Element zu gestalten, z. B. um die Hintergrundfarbe und die Schriftgr&ouml;&szlig;e zu &auml;ndern. Um eine dynamische und interaktive Website zu erstellen, ben&ouml;tigen Sie au&szlig;erdem PHP.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-69440589a5975\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><strong>Ist HTML gut f&uuml;r die Erstellung von Websites?<\/strong><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Ja, HTML ist gut f&uuml;r die Erstellung einer <strong>statischen Website<\/strong> geeignet. HTML-Webseiten ben&ouml;tigen weniger Ressourcen zum Laden und sind flexibel, da Sie den Quellcode &auml;ndern k&ouml;nnen.<\/p>\n<p>Allerdings eignet sich HTML nur dann f&uuml;r komplexe Websites, wenn es mit CSS und JavaScript gepaart ist. Wenn Sie nur HTML-Codes lernen wollen, sollten Sie besser WordPress verwenden.&nbsp;<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-69440589a5976\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><strong>Wie lange dauert es, eine HTML-Website zu programmieren?<\/strong><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Bei komplexeren Websites dauert die Erstellung l&auml;nger. Die Anzahl der Webentwickler, die an dem Projekt arbeiten, ihre F&auml;higkeiten und Ressourcen k&ouml;nnen sich ebenfalls auf die Bauzeit auswirken. Im Allgemeinen kann ein erfahrener Entwickler eine einfache Website in <a href=\"https:\/\/digital.com\/best-website-builders\/how-long-does-it-take-to-build-a-website\/\" target=\"_blank\" rel=\"noopener\"><strong>vier bis sechs Wochen<\/strong><\/a> von Grund auf neu programmieren.<\/p>\n\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Die Erstellung einer Website ist heutzutage einfach und erfordert keine Programmierkenntnisse. Plattformen wie Hostingers Website-Baukasten bieten eine einfache visuelle Oberfl&auml;che und Drag-and-Drop-Funktionen, die den Entwicklungsprozess erleichtern. Vielleicht m&ouml;chten Sie aber auch Websites von Grund auf neu mit Hypertext Markup Language (HTML) erstellen. Das ist zwar schwieriger, aber HTML-Websites sind flexibler und schneller, da sie weniger [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/de\/tutorials\/website-mit-html-erstellen\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":392,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"Website mit HTML erstellen: So geht\u2019s in 8 einfachen Schritten","rank_math_description":"In diesem Artikel erkl\u00e4ren wir 8 Schritte zur Erstellung einer Website mit HTML. Wir geben Ihnen auch Tipps, zur Verbesserung der Funktionalit\u00e4t Ihrer Website.","rank_math_focus_keyword":"website mit html erstellen","footnotes":""},"categories":[1],"tags":[],"class_list":["post-4065","post","type-post","status-publish","format-standard","hentry","category-website-erstellung"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/making-website-with-html","default":0},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/site-html","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/tutoriels\/comment-creer-page-web-html","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/como-hacer-una-pagina-web-en-html","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/tutorial\/cara-membuat-website-dengan-html","default":0},{"locale":"de-DE","link":"https:\/\/www.hostinger.com\/de\/tutorials\/website-mit-html-erstellen","default":0},{"locale":"it-IT","link":"https:\/\/www.hostinger.com\/it\/tutorial\/realizzazione-di-un-sito-web-con-html","default":0},{"locale":"en-UK","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/making-website-with-html","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/making-website-with-html","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/making-website-with-html","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/como-hacer-una-pagina-web-en-html","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/como-hacer-una-pagina-web-en-html","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/como-hacer-una-pagina-web-en-html","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/site-html","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/making-website-with-html","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/making-website-with-html","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/making-website-with-html","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/making-website-with-html","default":0}],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/posts\/4065","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/users\/392"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/comments?post=4065"}],"version-history":[{"count":10,"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/posts\/4065\/revisions"}],"predecessor-version":[{"id":7720,"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/posts\/4065\/revisions\/7720"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/media?parent=4065"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/categories?post=4065"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/tags?post=4065"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}