{"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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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            <div class=\"protip__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M1.49234 23.5024C1.23229 23.5024 0.972242 23.4024 0.782206 23.2123C0.562165 22.9923 0.452144 22.6822 0.502153 22.3722C0.562165 21.9221 1.14227 17.9113 3.00262 16.351C3.63274 15.8209 4.43289 15.5509 5.26305 15.5609C6.09321 15.5909 6.87335 15.9109 7.47347 16.4911C8.6937 17.6913 8.76371 19.6717 7.6435 20.9919C6.0832 22.8523 2.08245 23.4324 1.63237 23.4924C1.59236 23.4924 1.54235 23.4924 1.50234 23.4924L1.49234 23.5024ZM5.16303 17.5613C4.84297 17.5613 4.53291 17.6713 4.29287 17.8813C3.60274 18.4614 3.07264 19.9317 2.75258 21.242C4.06282 20.9219 5.5331 20.3918 6.11321 19.7017C6.55329 19.1716 6.54329 18.3814 6.0832 17.9213C5.85316 17.7013 5.5431 17.5713 5.20304 17.5613C5.19304 17.5613 5.17303 17.5613 5.16303 17.5613ZM11.7243 21.8821C11.4942 21.8821 11.2642 21.8021 11.0841 21.652C10.8541 21.462 10.7241 21.1819 10.7241 20.8819V15.9109L8.08358 13.2705H3.11264C2.81259 13.2705 2.53254 13.1404 2.3425 12.9104C2.15246 12.6803 2.07245 12.3803 2.12246 12.0902C2.19247 11.7102 2.84259 8.36953 4.70294 7.12929C6.33325 6.04909 8.96375 6.49918 10.244 6.80923C11.5442 4.96889 13.2546 3.4286 15.2349 2.33839C17.4553 1.11816 19.9858 0.518051 22.4963 0.498047C23.0464 0.498047 23.4865 0.948132 23.4865 1.49824C23.4865 5.0389 22.3763 9.97983 17.1753 13.7605C17.4853 15.0408 17.9354 17.6613 16.8552 19.2816C15.615 21.1419 12.2744 21.7921 11.8943 21.8621C11.8343 21.8721 11.7743 21.8821 11.7143 21.8821H11.7243ZM12.7245 16.181V19.6016C13.7146 19.2916 14.7948 18.7915 15.2049 18.1814C15.675 17.4812 15.605 16.091 15.385 14.9008C14.5248 15.3808 13.6346 15.8109 12.7245 16.181ZM9.66388 12.0302L11.9643 14.3307C13.1845 13.8306 14.3648 13.2204 15.485 12.5103C19.9358 9.51974 21.2361 5.60901 21.4561 2.53843C19.6157 2.67846 17.8254 3.20856 16.2051 4.09872C14.2847 5.14892 12.6544 6.68921 11.4942 8.54956C10.7841 9.65977 10.174 10.82 9.66388 12.0302ZM4.39289 11.2701H7.81353C8.1936 10.3599 8.63368 9.46974 9.11377 8.60957C7.92355 8.38953 6.51329 8.31952 5.81315 8.78961C5.19304 9.19968 4.70294 10.3099 4.39289 11.2701Z\" fill=\"#673DE6\"\/>\n                <\/svg>\n                <p class=\"protip__title\">\n                    Profi-Tipp                <\/p>\n            <\/div>\n            <p class=\"protip__content\"> 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\n<\/p><p class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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\":\"6a6700d3b0d24\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a6700d3b0d24\" 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--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2024\/06\/A-website-written-only-with-HTML.png\/w=1024,h=1024,fit=scale-down\" 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\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\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>\n<\/div><h3 class=\"wp-block-heading\" id=\"h-6-binden-sie-layout-css-ein\"><strong>6. Binden Sie Layout-CSS ein<\/strong><\/h3><p class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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\":\"6a6700d3b1c16\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a6700d3b1c16\" 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--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2024\/06\/A-website-with-CSS-layout.png\/w=1024,h=1024,fit=scale-down\" 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\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\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>\n<\/div><h3 class=\"wp-block-heading\" id=\"h-7-passen-sie-ihre-website-an\"><strong>7. Passen Sie Ihre Website an<\/strong><\/h3><p class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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\":\"6a6700d3b2a14\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a6700d3b2a14\" 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--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-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\/w=1024,h=1024,fit=scale-down\" 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\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\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>\n<\/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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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\/w=1024,h=1024,fit=scale-down\" 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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\"><strong>Eine Dropdown-Leiste f&uuml;r bessere Navigation hinzuf&uuml;gen<\/strong><\/p><p class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\"><strong>Verbessern Sie das Design Ihrer Website mit fortgeschrittenem CSS<\/strong><\/p><p class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\"><strong>Machen Sie die Website mit JavaScript interaktiver<\/strong><\/p><p class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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\/w=1024,h=1024,fit=scale-down\" 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 class=\"wp-block-paragraph\">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":1},{"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":"nl-NL","link":"https:\/\/www.hostinger.com\/nl\/tutorials\/website-maken-met-html\/","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/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-GB","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/making-website-with-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},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/como-hacer-una-pagina-web-en-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":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/site-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}]}}