Lernen Erstellung Einer Vollständigen Website Mit HTML

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 Folgendes enthalten:

Header: Seitentitel und Navigationslinks;
Über mich: eine kurze Einführung zur Person;
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 zu den Abschnitten Über, Portfolio und Kontakt hinzufügen.

index.html

4. Über-Bereich

Erstellen Sie einen <section id="about"> mit einer Überschrift und einem kurzen Absatz, der den Eigentümer beschreibt.

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 abfragt.

index.html

7. Fußzeilenbereich

Abschluss der Seite mit einem <footer>, das 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

War alles klar?

Danke für Ihr Feedback!

Abschnitt 5. Kapitel 4

Fragen Sie AI

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

Suggested prompts:

Can you show me the full HTML code for the portfolio website?

What are some tips for customizing the sections for my own portfolio?

How can I add more projects or sections to the website?

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 Folgendes enthalten:

Header: Seitentitel und Navigationslinks;
Über mich: eine kurze Einführung zur Person;
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 zu den Abschnitten Über, Portfolio und Kontakt hinzufügen.

index.html

4. Über-Bereich

Erstellen Sie einen <section id="about"> mit einer Überschrift und einem kurzen Absatz, der den Eigentümer beschreibt.

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 abfragt.

index.html

7. Fußzeilenbereich

Abschluss der Seite mit einem <footer>, das einen Copyright-Hinweis sowie Links zu sozialen Medien, Telefon und E-Mail enthält.

index.html

Bonus

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

War alles klar?

Danke für Ihr Feedback!

Abschnitt 5. Kapitel 4