Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Lernen Erstellung Einer Gesamten Website | Fortgeschrittenes HTML
Html-Grundlagen

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

html

index.html

copy
<!DOCTYPE html>
<html>
<head>
<title>Julia's Website</title>
<meta charset="UTF-8" />
</head>
<body>
</body>
</html>

3. Kopfbereich

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

html

index.html

copy
<!DOCTYPE html>
<html>
<head>
<title>Julia's Website</title>
<meta charset="UTF-8" />
</head>
<body>
<header>
<h1>Julia Botsford</h1>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
</body>
</html>

4. Über Abschnitt

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

html

index.html

copy
<!DOCTYPE html>
<html>
<head>
<title>Julia's Website</title>
<meta charset="UTF-8" />
</head>
<body>
<header>
<h1>Julia Botsford</h1>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<section id="about">
<h2>About Me</h2>
<p>
Welcome to my portfolio website. I'm a web developer with a passion for
creating amazing websites.
</p>
</section>
</body>
</html>

5. Portfolio Abschnitt

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

html

index.html

copy
<!DOCTYPE html>
<html>
<head>
<title>Julia's Website</title>
<meta charset="UTF-8" />
</head>
<body>
<header>
<h1>Julia Botsford</h1>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<section id="about">
<h2>About Me</h2>
<p>
Welcome to my portfolio website. I'm a web developer with a passion for
creating amazing websites.
</p>
</section>
<section id="portfolio">
<h2>Portfolio</h2>
<ul>
<li>
<img
src="https://codefinity-content-media-v2.s3.eu-west-1.amazonaws.com/courses/392f24ac-0126-4c34-a28a-f2f26d12196b/section-5/techtrack.png"
width="100"
alt="TechTrek App"
/>
<h3>TechTrek App</h3>
<p>Explore Tech Trends</p>
</li>
<li>
<img
src="https://codefinity-content-media-v2.s3.eu-west-1.amazonaws.com/courses/392f24ac-0126-4c34-a28a-f2f26d12196b/section-5/ecocraft.png"
width="100"
alt="EcoCraft Website"
/>
<h3>EcoCraft Website</h3>
<p>Promote Sustainable Living</p>
</li>
<!-- Add more project entries as needed -->
</ul>
</section>
</body>
</html>

6. Kontaktbereich

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

html

index.html

copy
<!DOCTYPE html>
<html>
<head>
<title>Julia's Website</title>
<meta charset="UTF-8" />
</head>
<body>
<header>
<h1>Julia Botsford</h1>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<section id="about">
<h2>About Me</h2>
<p>
Welcome to my portfolio website. I'm a web developer with a passion for
creating amazing websites.
</p>
</section>
<section id="portfolio">
<h2>Portfolio</h2>
<ul>
<li>
<img
src="https://codefinity-content-media-v2.s3.eu-west-1.amazonaws.com/courses/392f24ac-0126-4c34-a28a-f2f26d12196b/section-5/techtrack.png"
width="100"
alt="TechTrek App"
/>
<h3>TechTrek App</h3>
<p>Explore Tech Trends</p>
</li>
<li>
<img
src="https://codefinity-content-media-v2.s3.eu-west-1.amazonaws.com/courses/392f24ac-0126-4c34-a28a-f2f26d12196b/section-5/ecocraft.png"
width="100"
alt="EcoCraft Website"
/>
<h3>EcoCraft Website</h3>
<p>Promote Sustainable Living</p>
</li>
</ul>
</section>
<section id="contact">
<h2>Contact Me</h2>
<form onsubmit="return false">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required />
<label for="email">Email:</label>
<input type="email" id="email" name="email" required />
<label for="message">Message:</label>
<input type="text" id="message" name="message" required />
<button type="submit">Send</button>
</form>
</section>
</body>
</html>

7. Fußzeilenabschnitt

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

html

index.html

copy
<!DOCTYPE html>
<html>
<head>
<title>Julia's Website</title>
<meta charset="UTF-8" />
</head>
<body>
<header>
<h1>Julia Botsford</h1>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<section id="about">
<h2>About Me</h2>
<p>
Welcome to my portfolio website. I'm a web developer with a passion for
creating amazing websites.
</p>
</section>
<section id="portfolio">
<h2>Portfolio</h2>
<ul>
<li>
<img
src="https://codefinity-content-media-v2.s3.eu-west-1.amazonaws.com/courses/392f24ac-0126-4c34-a28a-f2f26d12196b/section-5/techtrack.png"
width="100"
alt="TechTrek App"
/>
<h3>TechTrek App</h3>
<p>Explore Tech Trends</p>
</li>
<li>
<img
src="https://codefinity-content-media-v2.s3.eu-west-1.amazonaws.com/courses/392f24ac-0126-4c34-a28a-f2f26d12196b/section-5/ecocraft.png"
width="100"
alt="EcoCraft Website"
/>
<h3>EcoCraft Website</h3>
<p>Promote Sustainable Living</p>
</li>
</ul>
</section>
<section id="contact">
<h2>Contact Me</h2>
<form onsubmit="return false">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required />
<label for="email">Email:</label>
<input type="email" id="email" name="email" required />
<label for="message">Message:</label>
<input type="text" id="message" name="message" required />
<button type="submit">Send</button>
</form>
</section>
<footer>
<p>&copy; 2024 My Portfolio. All Rights Reserved.</p>
<ul>
<li><a href="https://www.linkedin.com/">LinkedIn</a></li>
<li><a href="https://github.com/">GitHub</a></li>
<li><a href="tel:+442038851801">+44 20 3885 1801</a></li>
<li><a href="mailto:julia188@mail.com">julia188@mail.com</a></li>
<!-- Add more social media links as needed -->
</ul>
</footer>
</body>
</html>

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.

html

index.html

css

index.css

copy
<!DOCTYPE html>
<html>
<head>
<title>Julia's Website</title>
<meta charset="UTF-8" />
<!-- Link to the external CSS file -->
<link rel="stylesheet" href="index.css" />
</head>
<body>
<header>
<h1>Julia Botsford</h1>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<section id="about">
<h2>About Me</h2>
<p>
Welcome to my portfolio website. I'm a web developer with a passion for
creating amazing websites.
</p>
</section>
<section id="portfolio">
<h2>Portfolio</h2>
<ul>
<li>
<img
src="https://codefinity-content-media-v2.s3.eu-west-1.amazonaws.com/courses/392f24ac-0126-4c34-a28a-f2f26d12196b/section-5/techtrack.png"
width="100"
alt="TechTrek App"
/>
<h3>TechTrek App</h3>
<p>Explore Tech Trends</p>
</li>
<li>
<img
src="https://codefinity-content-media-v2.s3.eu-west-1.amazonaws.com/courses/392f24ac-0126-4c34-a28a-f2f26d12196b/section-5/ecocraft.png"
width="100"
alt="EcoCraft Website"
/>
<h3>EcoCraft Website</h3>
<p>Promote Sustainable Living</p>
</li>
</ul>
</section>
<section id="contact">
<h2>Contact Me</h2>
<form onsubmit="return false">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required />
<label for="email">Email:</label>
<input type="email" id="email" name="email" required />
<label for="message">Message:</label>
<input type="text" id="message" name="message" required />
<button type="submit">Send</button>
</form>
</section>
<footer>
<p>&copy; 2024 My Portfolio. All Rights Reserved.</p>
<ul>
<li><a href="https://www.linkedin.com/">LinkedIn</a></li>
<li><a href="https://github.com/">GitHub</a></li>
<li><a href="tel:+442038851801">+44 20 3885 1801</a></li>
<li><a href="mailto:julia188@mail.com">julia188@mail.com</a></li>
</ul>
</footer>
</body>
</html>

Video Tutorial

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

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 5. Kapitel 4

Fragen Sie AI

expand
ChatGPT

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

We use cookies to make your experience better!
some-alt