Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Lernen Strukturierung des HTML-Dokuments | Erstellen der Blog-Website
Webentwicklung Grundlagen mit KI

book
Strukturierung des HTML-Dokuments

Ziel

Zuerst erstellen wir die grundlegende Dokumentstruktur unserer Website. Wir möchten drei Artikel haben. In jedem Artikel möchten wir die Artikelüberschrift, einige Artikelinhalte und ein Bild angeben.

Möglicher Prompt

Erstellen Sie eine HTML-Dokumentstruktur für eine Blog-Website, die die Veröffentlichung von 3 Artikeln ermöglicht. Jeder Artikel sollte bestehen aus:

  • Einem Titel (Überschrift);
  • Mehreren Absätzen Text;
  • Einem Bild;
  • Einem Thema oder einer Kategorie.

Die HTML-Struktur sollte klar und logisch organisiert sein und HTML-Tags sowie semantische Bedeutungen richtig verwenden.

Ergebnis

html

index.html

copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Blog</title>
</head>
<body>
<header>
<h1>Welcome to My Blog</h1>
</header>

<main>
<article>
<h2>Article 1: Exploring Nature</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, tortor non
ullamcorper commodo, justo libero maximus purus, vel pulvinar turpis quam vitae mi. Nullam
auctor, tortor id sagittis fermentum, leo lacus venenatis tortor, at tristique leo magna
in lorem.
</p>
<img src="nature.jpg" alt="Nature Image" />
<p>Category: Nature</p>
</article>

<article>
<h2>Article 2: Cooking Adventures</h2>
<p>
Phasellus rutrum tincidunt sapien, sed vestibulum velit vehicula nec. Sed pharetra dui in
fermentum sodales. Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas.
</p>
<img src="cooking.jpg" alt="Cooking Image" />
<p>Category: Cooking</p>
</article>

<article>
<h2>Article 3: Traveling Around the World</h2>
<p>
Nullam efficitur lacus nec urna fringilla, ut venenatis tortor lacinia. Duis vitae mauris
sed mi semper aliquet. Aenean vestibulum libero eget nibh malesuada, id luctus libero
pharetra. Fusce auctor mauris sed tristique efficitur.
</p>
<img src="travel.jpg" alt="Travel Image" />
<p>Category: Travel</p>
</article>
</main>

<footer>
<p>&copy; 2024 My Blog. All rights reserved.</p>
</footer>
</body>
</html>

Wenn Sie daran interessiert sind, tief in den Code einzutauchen und seine Funktionalität zu verstehen, verwenden Sie bitte die Code Description-Schaltfläche unten. Wenn Sie damit einverstanden sind, überspringen Sie diesen Schritt und fahren Sie mit dem nächsten Kapitel fort.

Website-Zustand

Video Tutorial

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 4. Kapitel 2
some-alt