Erstellung Einer Vollständigen Website Mit HTML
Wir haben alle wichtigen HTML-Themen behandelt und sind nun bereit, eine vollständige Website von Grund auf zu erstellen. Erstellen wir eine einseitige Portfolio-Website, um Ihre Projekte und Fähigkeiten zu präsentieren.
Sie können entweder eigenständig daran arbeiten oder der untenstehenden Anleitung folgen, in der wir Ihnen Schritt-für-Schritt-Anweisungen und den zugehörigen Code zu jedem Schritt bereitstellen.
Schritt-für-Schritt-Anleitung
1. Strukturplan der Website
Unsere Website wird aus mehreren zentralen Abschnitten bestehen:
- Header: Dieser Abschnitt zeigt den Namen des Portfolio-Inhabers deutlich an und ermöglicht die Navigation auf der Website;
- Über mich: Hier finden Besucher relevante Informationen über den Website-Inhaber, die Einblicke in dessen Hintergrund und Fachkenntnisse geben;
- Portfolio: In diesem Abschnitt werden verschiedene Projekte präsentiert, jeweils mit Projektbildern, Titeln, Beschreibungen und den verwendeten Technologien;
- Kontakt: Wir integrieren ein Formular, um Informationen von Besuchern zu erfassen;
- Footer: Der Footer bildet den Abschluss und enthält Urheberrechtsinformationen sowie Links zu Social-Media-Profilen, Telefonnummer und E-Mail-Adresse.
2. Strukturierung von Inhalten mit semantischem HTML
Erstellen Sie eine neue Datei namens index.html und richten Sie die grundlegende HTML-Dokumentstruktur ein.
index.html
3. Kopfbereich
Erstellen Sie den header mit dem Namen des Website-Betreibers und Navigationslinks.
index.html
4. Über-Bereich
Abschnitt, der einer kurzen Einführung und Informationen über den Eigentümer gewidmet ist.
index.html
5. Portfolio-Bereich
Im Portfolio-Bereich liegt der Fokus auf den Projekten mit Beschreibungen und Bildern.
index.html
6. Kontaktbereich
Erstellung des Kontaktformulars, um mit dem Eigentümer in Verbindung zu treten.
index.html
7. Fußzeilenbereich
Abschließend werden Copyright-Informationen und Links zu sozialen Medien hinzugefügt.
index.html
Bonus
Verbesserung des Erscheinungsbildes der Website nicht nur für Suchmaschinen, sondern auch für Benutzer. Dies lässt sich mit CSS erreichen, was für Cascading Style Sheets steht. Obwohl CSS in diesem Kurs nicht behandelt wurde, ist es ein wichtiger Aspekt des Webdesigns.
CSS ist eine Stylesheet-Sprache, mit der die Präsentation und das Styling eines in einer Auszeichnungssprache wie HTML verfassten Dokuments festgelegt werden können. Es kann der nächste Schritt nach dem Erlernen von HTML sein — mehr dazu im nächsten Kapitel. Beobachten wir zunächst, wie CSS HTML verbessert.
index.html
index.css
Video-Tutorial
Hier ist der Link zur vollständigen Website, die in diesem Kapitel erstellt wurde: Julias Website
Danke für Ihr Feedback!
Fragen Sie AI
Fragen Sie AI
Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen
Can you show me the basic HTML structure for the index.html file?
What should I include in each section of the website?
Can you explain how to use semantic HTML for this project?
Awesome!
Completion rate improved to 3.13Erstellung Einer Vollständigen Website Mit HTML
Swipe um das Menü anzuzeigen
Wir haben alle wichtigen HTML-Themen behandelt und sind nun bereit, eine vollständige Website von Grund auf zu erstellen. Erstellen wir eine einseitige Portfolio-Website, um Ihre Projekte und Fähigkeiten zu präsentieren.
Sie können entweder eigenständig daran arbeiten oder der untenstehenden Anleitung folgen, in der wir Ihnen Schritt-für-Schritt-Anweisungen und den zugehörigen Code zu jedem Schritt bereitstellen.
Schritt-für-Schritt-Anleitung
1. Strukturplan der Website
Unsere Website wird aus mehreren zentralen Abschnitten bestehen:
- Header: Dieser Abschnitt zeigt den Namen des Portfolio-Inhabers deutlich an und ermöglicht die Navigation auf der Website;
- Über mich: Hier finden Besucher relevante Informationen über den Website-Inhaber, die Einblicke in dessen Hintergrund und Fachkenntnisse geben;
- Portfolio: In diesem Abschnitt werden verschiedene Projekte präsentiert, jeweils mit Projektbildern, Titeln, Beschreibungen und den verwendeten Technologien;
- Kontakt: Wir integrieren ein Formular, um Informationen von Besuchern zu erfassen;
- Footer: Der Footer bildet den Abschluss und enthält Urheberrechtsinformationen sowie Links zu Social-Media-Profilen, Telefonnummer und E-Mail-Adresse.
2. Strukturierung von Inhalten mit semantischem HTML
Erstellen Sie eine neue Datei namens index.html und richten Sie die grundlegende HTML-Dokumentstruktur ein.
index.html
3. Kopfbereich
Erstellen Sie den header mit dem Namen des Website-Betreibers und Navigationslinks.
index.html
4. Über-Bereich
Abschnitt, der einer kurzen Einführung und Informationen über den Eigentümer gewidmet ist.
index.html
5. Portfolio-Bereich
Im Portfolio-Bereich liegt der Fokus auf den Projekten mit Beschreibungen und Bildern.
index.html
6. Kontaktbereich
Erstellung des Kontaktformulars, um mit dem Eigentümer in Verbindung zu treten.
index.html
7. Fußzeilenbereich
Abschließend werden Copyright-Informationen und Links zu sozialen Medien hinzugefügt.
index.html
Bonus
Verbesserung des Erscheinungsbildes der Website nicht nur für Suchmaschinen, sondern auch für Benutzer. Dies lässt sich mit CSS erreichen, was für Cascading Style Sheets steht. Obwohl CSS in diesem Kurs nicht behandelt wurde, ist es ein wichtiger Aspekt des Webdesigns.
CSS ist eine Stylesheet-Sprache, mit der die Präsentation und das Styling eines in einer Auszeichnungssprache wie HTML verfassten Dokuments festgelegt werden können. Es kann der nächste Schritt nach dem Erlernen von HTML sein — mehr dazu im nächsten Kapitel. Beobachten wir zunächst, wie CSS HTML verbessert.
index.html
index.css
Video-Tutorial
Hier ist der Link zur vollständigen Website, die in diesem Kapitel erstellt wurde: Julias Website
Danke für Ihr Feedback!
