Erstellung Einer Gesamten Website

Wir haben alle wesentlichen HTML-Themen behandelt und sind nun bereit, eine komplette Website von Grund auf zu erstellen. Lassen Sie uns eine einseitige Portfolio-Website erstellen, um Ihre Projekte und Fähigkeiten zu präsentieren.

Sie können entweder selbstständig daran arbeiten oder der unten stehenden Anleitung folgen, in der wir Ihnen Schritt-für-Schritt-Anweisungen und Code zu jedem Schritt geben.

Schritt-für-Schritt-Anleitung

1. Website-Strukturplan

Unsere Website wird aus mehreren wichtigen Abschnitten bestehen:

1. Header: Dieser Abschnitt wird den Namen des Portfolioinhabers prominent anzeigen und die Navigation auf der gesamten Website erleichtern;
2. Über: Hier finden Besucher relevante Informationen über den Website-Inhaber, die Einblicke in seinen Hintergrund und seine Expertise geben;
3. Portfolio: In diesem Abschnitt werden verschiedene Projekte vorgestellt, die jeweils Projektbilder, Titel, Beschreibungen und die verwendeten Technologien enthalten;
4. Kontakt: Wir werden ein Formular einbinden, um Besucherinformationen zu sammeln;
5. Footer: Der Footer wird der abschließende Abschnitt sein und Urheberrechtsinformationen sowie Links zu sozialen Medien, Telefonkontakt und E-Mail-Adresse enthalten.

2. Strukturieren Sie Inhalte mit semantischem HTML

Lassen Sie uns eine neue index.html-Datei erstellen und die grundlegende HTML-Dokumentstruktur einrichten.

3. Kopfbereich

Lassen Sie uns den header mit dem Namen des Website-Besitzers und den Navigationslinks erstellen.

4. Über Abschnitt

Abschnitt gewidmet der kurzen Einführung und Informationen über den Besitzer.

5. Portfolio Abschnitt

Im Portfolio-Abschnitt konzentrieren wir uns auf die Projekte mit Beschreibungen und Bildern.

6. Kontaktbereich

Lassen Sie uns das Kontaktformular erstellen, um mit dem Besitzer in Kontakt zu treten.

7. Fußzeilenabschnitt

Zum Schluss fügen wir Urheberrechtsinformationen und Links zu sozialen Medien hinzu.

Bonus

Lassen Sie uns das Erscheinungsbild unserer Website nicht nur für Suchmaschinen, sondern auch für Benutzer verbessern. Dies können wir mit Hilfe von CSS erreichen, was für Cascading Style Sheets steht. Obwohl wir CSS in diesem Kurs nicht behandelt haben, ist es ein wichtiger Aspekt des Webdesigns.

CSS ist eine Stylesheet-Sprache, die es uns ermöglicht, die Präsentation und das Styling eines Dokuments zu spezifizieren, das in einer Auszeichnungssprache wie HTML geschrieben ist. Es kann der nächste Schritt nach dem Erlernen von HTML sein — mehr dazu im nächsten Kapitel. Für den Moment beobachten wir, wie CSS HTML verbessert.

Video Tutorial

Hier ist der Link zur vollständigen Website, die in diesem Kapitel erstellt wurde: Julias Website