Ich sehe folgendes HTML:
Code
<article class="gedicht">
<h1>Hundeträume</h1>
<p>Sag mir wovon Du träumst, schlafender Hund!</p>
<p>Von einem leben ohne Kette <br>und einem weichen warmen Bett.</p>
<p>In meiner Schüssel reichlich Futter <br>und einer zärtlich guten Mutter.</p>
<p>Von der Sanftmut meines Herrn <br>und in der Dunkelheit ein Stern.</p>
<p>Von einer Katze ohne Krallen <br>und dass nie mehr Schüsse fallen.</p>
<p>Zwischen Nachbarn keine Feindschaft <br>unter allen Rassen Freundschaft.</p>
<p>Weder Folter, weder Schmerzen <br>und nicht kalt verschloss´ne Herzen.</p>
<p>Ohne Maulkorb, Zwinger, Hiebe: <br>Von einer Welt aus lauter Liebe!</p>
</article>
Alles anzeigen
Eine komplette Seite mit minimalem Inhalt könnte folgendermaßen aussehen:
HTML
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Gedicht</title>
<meta name="description" content="Platzhalter - Ein kurze Beschreibung des Inhalts in Satzform">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <link href="../css/zentrale.css" rel="stylesheet"> -->
<style>
/*Schreibschrift*/
@import url('https://fonts.googleapis.com/css2?family=Twinkle+Star&display=swap');
/*Basisangaben*/
@media all {
* {
min-width: 1px;
}
body {
margin: 1rem 1rem 1rem 1rem;
}
}
/*Schriften*/
@media all {
html {
font-family: sans-serif;
font-size: 120%;
line-height: 1.3;
}
}
/*.gedicht*/
@media all {
.gedicht {
background-color: hsla(178, 60%, 55%, 0.5);
max-width: 600px;
padding: 0.5rem;
border-radius: 0.5rem;
margin: 2rem auto 2rem auto;
}
.gedicht h1,
.gedicht p {
font-family: 'Twinkle Star', cursive;
font-size: 1.5rem;
font-weight: bold;
text-align: center;
margin-top: 1.4rem;
}
.gedicht p:last-of-type {
margin-bottom: 1.4rem;
}
}
</style>
</head>
<body>
<header>
<h1>Gedicht (zentriert)</h1>
</header>
<main>
<article class="gedicht">
<h1>Hundeträume</h1>
<p>Sag mir wovon Du träumst, schlafender Hund!</p>
<p>Von einem leben ohne Kette <br>und einem weichen warmen Bett.</p>
<p>In meiner Schüssel reichlich Futter <br>und einer zärtlich guten Mutter.</p>
<p>Von der Sanftmut meines Herrn <br>und in der Dunkelheit ein Stern.</p>
<p>Von einer Katze ohne Krallen <br>und dass nie mehr Schüsse fallen.</p>
<p>Zwischen Nachbarn keine Feindschaft <br>unter allen Rassen Freundschaft.</p>
<p>Weder Folter, weder Schmerzen <br>und nicht kalt verschloss´ne Herzen.</p>
<p>Ohne Maulkorb, Zwinger, Hiebe: <br>Von einer Welt aus lauter Liebe!</p>
</article>
</main>
<footer>
<p>Originaldiskussion: <a href="https://www.html-seminar.de/forum/thread/10249-formatierung-eines-bestimmten-teils-vom-inhalt/">https://www.html-seminar.de/forum/</a></p>
</footer>
</body>
</html>
Alles anzeigen