Erstellung Einer Vollständigen Website Mit HTML
Swipe um das Menü anzuzeigen
Wir haben nun die grundlegenden HTML-Konzepte behandelt und sind bereit, eine vollständige einseitige Portfolio-Website von Grund auf zu erstellen.
Sie können versuchen, diese selbst zu erstellen, oder dieser Schritt-für-Schritt-Anleitung mit Codebeispielen für jeden Abschnitt folgen.
Schritt-für-Schritt-Anleitung
1. Strukturplan der Website
Unsere Portfolio-Seite wird enthalten:
- Header: Seitentitel und Navigationslinks;
- Über mich: eine kurze Vorstellung des Besitzers;
- Portfolio: Projekte mit Bildern, Titeln und kurzen Beschreibungen;
- Kontakt: ein Formular, damit Besucher Kontakt aufnehmen können;
- Footer: Urheberrecht und Kontakt-/Social-Media-Links.
2. Strukturierung von Inhalten mit semantischem HTML
Eine neue Datei index.html erstellen und die grundlegende HTML-Struktur mit <!DOCTYPE html>, <html>, <head> und <body> hinzufügen.
index.html
3. Kopfbereich
Einen <header> mit dem Namen des Besitzers und ein <nav> mit Links hinzufügen, die zu den Abschnitten Über, Portfolio und Kontakt springen.
index.html
4. Über-Bereich
Erstellen eines <section id="about"> mit einer Überschrift und einem kurzen Absatz zur Beschreibung des Besitzers.
index.html
5. Portfolio-Bereich
Fügen Sie einen <section id="portfolio"> hinzu, der Projekte mit Bildern, Titeln und kurzen Beschreibungen auflistet.
index.html
6. Kontaktbereich
Erstellen Sie einen <section id="contact"> mit einem einfachen Kontaktformular, das Name, E-Mail und Nachricht erfasst.
index.html
7. Fußzeilenbereich
Die Seite mit einem <footer> abschließen, der einen Copyright-Hinweis sowie Links zu sozialen Medien, Telefon und E-Mail enthält.
index.html
Bonus
Um die Seite optisch ansprechender zu gestalten, kann eine CSS-Datei eingebunden und das HTML gestaltet werden. CSS steuert Farben, Abstände, Schriftarten und Layout und sorgt dafür, dass die gleiche Struktur deutlich professioneller wirkt.
Vergleiche zunächst, wie die Seite mit reinem HTML aussieht und wie sie sich verändert, sobald grundlegende CSS-Stile angewendet werden.
index.html
index.css
Hier ist der Link zur vollständigen Website, die in diesem Kapitel erstellt wurde: Julias Website
Was Sie erstellt haben
Sie haben eine vollständige Webseite mit HTML erstellt, einschließlich Struktur, Inhalt und grundlegenden Elementen.
Was fehlt
Ihre Seite funktioniert, sieht aber sehr einfach aus. HTML definiert die Struktur, nicht das Design.
Wie es weitergeht
Um Ihre Seite zu gestalten, benötigen Sie CSS, um Farben, Layout und visuelle Verfeinerungen hinzuzufügen.
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
