Eine Website mit HTML und CSS erstellen (kompletter Aufbau) | We.Inc
Baue eine komplette One-Page-Website mit HTML und CSS: Grundgerüst, Header, Hero, Abschnitte, Kontaktformular, Footer, responsives Layout und Veröffentlichung, mit Live-Vorschau.
Eine Website mit HTML und CSS erstellen
Lege einen Ordner mit zwei reinen Textdateien an: index.html für den Inhalt und styles.css für das Aussehen. Beginne index.html mit dem Standard-Grundgerüst (doctype, html, head, body), binde das Stylesheet im head ein, füge einen Header, Hauptabschnitte und einen Footer hinzu und öffne die Datei dann im Browser. Lade den Ordner auf einen beliebigen statischen Host hoch, um ihn zu veröffentlichen.
Der komplette Aufbau in sechs Schritten
Schritt
Datei
Was du hinzufügst
1. Grundgerüst
doctype, html lang, head mit charset, viewport und title
2. Struktur
header, nav, main mit Abschnitten, footer
3. Inhalt
Überschriften, Absätze, ein Bild mit Alt-Text, ein Formular
4. Stil
Schrift, Farben, Abstände, eine zentrierte Inhaltsbreite
5. Layout
Flexbox für den Header, Grid für Karten, eine Media Query
6. Veröffentlichen
Beide
Den Ordner auf einen statischen Host hochladen
Das ist der komplette Aufbau, nicht nur die erste Datei. Du schreibst eine Seite für ein kleines Unternehmen, vom leeren Ordner bis zum responsiven Layout, und mit dem Baukasten unten kannst du deinen eigenen Namen und deine Angaben eintippen und siehst, wie sich die fertige Seite aktualisiert. Jedes Snippet ist vollständig, sodass du die beiden fertigen Dateien kopieren und sofort öffnen kannst.
Lege auf deinem Computer einen neuen Ordner an und erstelle darin mit einem beliebigen Texteditor index.html und styles.css.
Fülle die Felder des Baukastens unten aus, um die Seite zu gestalten, und kopiere dann die beiden erzeugten Dateien in deinen Ordner.
Doppelklicke auf index.html, um sie im Browser zu öffnen. Bearbeite, speichere und lade neu, um jede Änderung zu sehen.
Lies die Abschnitte zu den einzelnen Schritten, um zu verstehen, was jeder Teil des Codes tut, damit du ihn sicher ändern kannst.
Wenn du zufrieden bist, veröffentliche den Ordner mit einer der Hosting-Optionen am Ende.
Verwende einen Code-Editor wie VS Code statt einer Textverarbeitung, die Formatierungen einfügt, die Browser nicht lesen können.
Nenne die Startseite index.html. Die meisten Hosts liefern diese Datei automatisch aus, wenn jemand die Ordneradresse aufruft.
Schreib Dateinamen klein und ohne Leerzeichen, zum Beispiel about-us.html, denn viele Server unterscheiden Groß- und Kleinschreibung.
Prüfe deine Arbeit vor dem Veröffentlichen in der Geräte-Symbolleiste der Entwicklertools deines Browsers bei schmaler Smartphone-Breite.
Lass die Seite durch einen HTML-Validator laufen. Er findet nicht geschlossene Tags, die Browser stillschweigend überspielen.
Häufige Fragen
Muss ich für eine HTML-Website etwas bezahlen?
Nein. Zum Schreiben der Dateien brauchst du nur einen Texteditor und einen Browser, beide kostenlos. Mehrere statische Hosts haben kostenlose Tarife für kleine Websites; eine eigene Domain ist meist die einzige Ausgabe, falls du eine willst.
Wozu brauche ich das Viewport-Meta-Tag?
Ohne es bauen Smartphone-Browser die Seite in einer breiten Desktop-Breite auf und verkleinern sie, sodass der Text winzig wird. width=device-width weist sie an, die echte Bildschirmbreite zu verwenden, und erst dadurch funktionieren Media Queries richtig.
Kann eine reine HTML-Website ein Kontaktformular haben?
HTML zeichnet das Formular, aber irgendetwas muss die Übermittlung empfangen. Richte auf einem statischen Host das action-Attribut des Formulars auf einen Formulardienst oder die eingebaute Formularfunktion deines Hosts. Ein mailto:-Link ist die einfachste Notlösung.
Wie füge ich weitere Seiten hinzu?
Erstelle eine weitere Datei wie about.html mit demselben Header und Footer, verlinke sie mit <a href="about.html">About</a> und nutze dieselbe styles.css für beide. Jede Seite sollte einen eigenen title und eine eigene h1 haben.
Sollte ich stattdessen ein Framework verwenden?
Nicht für die erste Website. Reines HTML und CSS laden schnell, brauchen keinen Build-Schritt und zeigen dir, was jedes Framework unter der Haube erzeugt. Greif zu einem Framework, wenn du gemeinsame Komponenten über viele Seiten oder app-ähnliches Verhalten brauchst.
Semantische Tags leisten echte Arbeit
header, nav, main, section und footer sind nicht nur ordentlichere Namen für div. Screenreader stellen sie als Landmarks bereit, zwischen denen man springen kann, und Suchmaschinen unterscheiden damit den Hauptinhalt von wiederholten Menüs.
Verwende eine h1 für das Thema der Seite und eine h2 für jeden Abschnitt. Die Überschriftengliederung sollte sich für sich allein wie ein Inhaltsverzeichnis lesen.
Ein Layout, das zuerst auf Smartphones funktioniert
Schreib das einspaltige Smartphone-Layout als Standard, denn Blöcke stapeln sich ohnehin vertikal. Ergänze dann eine Media Query mit min-width, die Spalten einschaltet, sobald genug Platz ist.
Begrenze die Lesebreite mit max-width auf einem Wrapper und zentriere ihn mit margin-inline: auto. So bleiben die Zeilen auf breiten Bildschirmen angenehm, ganz ohne zusätzliche Regeln.
Deinen Ordner veröffentlichen
Ein statischer Host liefert deine Dateien so aus, wie sie sind, und mehr braucht eine HTML- und CSS-Website nicht. Typische Anbieter lassen dich den Ordner in ein Dashboard ziehen oder ein Git-Repository verbinden, sodass jeder Push die Live-Website aktualisiert.
Öffne nach dem Hochladen die Live-Adresse auf deinem Smartphone, klicke jeden Link an und sende das Formular einmal ab, um zu prüfen, dass es bei dir ankommt.
Schritt 1: das Grundgerüst der Seite
Jede HTML-Seite beginnt mit denselben paar Zeilen. Der doctype hält Browser im Standardmodus, lang sagt Screenreadern, in welcher Sprache sie sprechen sollen, und das Viewport-Tag sorgt dafür, dass Smartphones ihre echte Breite nutzen.
Ausgangspunkt für index.html
Speichere das, öffne es im Browser, und du hast bereits eine gültige Seite mit Tab-Titel.
Schritt 2 und 3: Struktur und Inhalt
Innerhalb von body enthält ein header den Namen und das Menü, main die Abschnitte, und ein footer schließt die Seite ab. Das Live-Ergebnis unten hat noch keine Styles und zeigt so, wie gut lesbar gutes HTML schon für sich allein ist.
Header, Hero, Karten, Kontaktformular und Footer
Bearbeite den Text und das Ergebnis aktualisiert sich. Achte auf die Formularbeschriftungen: Ein Klick auf eine Beschriftung fokussiert ihr Feld.
Schreib das in styles.css neben index.html. Es sorgt für gut lesbare Schrift, eine zentrierte Spalte, einen Flex-Header und ein Kartenraster, das auf breiteren Bildschirmen dreispaltig wird.
Das vollständige Stylesheet
Umschließe den Inhalt von header, main und footer mit <div class="wrap">, um ihn zu zentrieren, so wie es die Ausgabe des Baukastens tut.
Schritt 6: veröffentlichen
Wege, einen statischen Ordner online zu stellen
Weg
Geeignet für
Was du tust
Statischer Host mit Drag and Drop
Deine erste Website
Den Ordner im Dashboard des Hosts hochladen
Mit Git verbundener statischer Host
Websites, die du weiter bearbeiten wirst
In ein Repository pushen; der Host stellt neu bereit
Shared Webhosting
Websites, die auch E-Mail oder PHP brauchen
Mit dem Dateimanager oder per SFTP in den öffentlichen Ordner hochladen
Ein Website-Baukasten
Ganz ohne Code auskommen
Die Website beschreiben und visuell bearbeiten
Hafenbäckerei
Frisches Sauerteigbrot, gebacken vor Sonnenaufgang.
Landbrot mit Sauerteig
Roggenbrot mit Saaten
Wochenendgebäck
Baue deine Seite
Gib den Namen deines Unternehmens, einen Slogan und drei Angebote ein. Die Vorschau und beide Dateien aktualisieren sich beim Tippen und sind bereit zum Kopieren.