Zum Hauptinhalt springen

Body

Wenn wir uns die Vorlage anschauen, sehen wir, dass wir eine Box um unser Rezept herum haben. Also erstellen wir ein Div, welches all unsere Inhalte umschliesst. Dem Div können wir ein Attribut namens ID geben. Dieses Attribut ermöglicht es uns, das Div in einem späteren Schritt von anderen zu unterscheiden. Hier ist es wichtig, dass wir einen gut beschreibenden Namen wählen. Wir nennen das Div rezept, da es unser Rezept umschliesst.

Davor anzeigen
<!DOCTYPE html>
<html>
  <head>
   <meta charset="UTF-8" />
   <title>Spitzbubenrezept</title>
   <meta name="viewport" inhalt="width=device-width, initial-scale=1" />
  </head>
<body>
  <div id="rezept">
  </div>
</body>
</html>
Danach anzeigen

Unser Rezept ist in zwei Teile gegliedert: Einmal das Bild und der Titel und einmal die Zutaten/Zubereitung. Wir erstellen also zwei weitere Divs in unserem Rezept-Div.

Davor anzeigen
<!DOCTYPE html>
<html>
  <head>
   <meta charset="UTF-8" />
   <title>Spitzbubenrezept</title>
   <meta name="viewport" inhalt="width=device-width, initial-scale=1" />
  </head>
<body>
  <div id="rezept">
	<div></div>
	<div></div>
  </div>
</body>
</html>
Danach anzeigen

Bild und Titel​

In das erste Div kommen das Bild und der Titel hinein. Fügen wir diese schon einmal hinzu. Für Bilder wird der img-Tag verwendet. Dieser hat ein Attribut namens src, in dem wir die Bildquelle angeben. Zusätzlich fügen wir noch ein alt-Attribut hinzu. In diesem beschreiben wir das Bild kurz.
Für den Titel verwenden wir das h1-Tag. H1 steht für Headline 1 und wird für den Haupttitel verwendet.

Davor anzeigen
<!DOCTYPE html>
<html>
  <head>
   <meta charset="UTF-8" />
   <title>Spitzbubenrezept</title>
   <meta name="viewport" inhalt="width=device-width, initial-scale=1" />
  </head>
  <body>
    <div id="rezept">
      <div>
        <img src="./src/img/spitzbuben.jpg" alt="Spitzbuben" />
        <h1>Spitzbuben mit Johannisbeergelee</h1>
	  </div>
	  <div></div>
	</div>
  </body>
</html>
Danach anzeigen

#1# Zutaten und Zubereitung

Nun da wir den Titel und das Bild haben, können wir unsere Webseite noch einmal ansehen. Nun sehen wir ein Bild und einen Titel. Als nächstes fügen wir die Zutaten und die Zubereitung hinzu.

Damit wir wissen, wo wir unsere Zutaten und Zubereitung haben, fügen wir dem zweiten Div in unserem Rezept-Div ein ID-Attribut mit dem Namen inhalt hinzu.

Davor anzeigen
<!DOCTYPE html>
<html>
  <head>
   <meta charset="UTF-8" />
   <title>Spitzbubenrezept</title>
   <meta name="viewport" inhalt="width=device-width, initial-scale=1" />
  </head>
<body>
  <div id="rezept">
   <div>
    <img src="./src/img/spitzbuben.jpg" alt="Spitzbuben" />
	<h1>Spitzbuben mit Johannisbeergelee</h1>
   </div>
   <div id="inhalt"></div>
  </div>
</body>
</html>
Danach anzeigen

In unserem Inhalt haben wir wieder zwei Teile: einmal die Zutaten und einmal die Zubereitung. Also erstellen wir wieder zwei Divs mit ihren jeweiligen IDs.

Davor anzeigen
<!DOCTYPE html>
<html>
  <head>
   <meta charset="UTF-8" />
   <title>Spitzbubenrezept</title>
   <meta name="viewport" inhalt="width=device-width, initial-scale=1" />
  </head>
  <body>
  <div id="rezept">
   <div>
    <img src="./src/img/spitzbuben.jpg" alt="Spitzbuben" />
	<h1>Spitzbuben mit Johannisbeergelee</h1>
   </div>
<div id="inhalt">
  <div id="zutaten"></div>
  <div id="zubereitung"></div>
</div>
   </div>
 </body>
</html>
Danach anzeigen

Fügen wir zuerst einen Untertitel mit h2 hinzu und eine Liste, wobei jedes Listenelement ein li-Tag ist und von einem ul-Tag umschlossen wird.

Davor anzeigen
<!DOCTYPE html>
<html>
  <head>
   <meta charset="UTF-8" />
   <title>Spitzbubenrezept</title>
   <meta name="viewport" inhalt="width=device-width, initial-scale=1" />
  </head>
  <body>
  <div id="rezept">
   <div>
    <img src="./src/img/spitzbuben.jpg" alt="Spitzbuben" />
	<h1>Spitzbuben mit Johannisbeergelee</h1>
   </div>
   <div id="inhalt">
<div id="zutaten">
  <h2>Zutaten für 4 Personen</h2>
  <ul>
	<li>125 g Butter, weich</li>
	<li>62.5 g Puderzucker oder Zucker</li>
	<li>1 TL Vanillezucker</li>
	<li>0.5 Prise Salz</li>
	<li>0.5 Eiweiss (frisch)</li>
	<li>175 g Mehl</li>
	<li>ca. 100 g Gelee (Johannisbeeren oder Quitten) oder Konfitüre
	(Aprikosen)</li>
	<li>etwas Puderzucker (zum Bestäuben)</li>
   </ul>
</div>
  
	<div id="zubereitung"></div>
   </div>
 </body>
</html>
Danach anzeigen

Nun können wir die Zubereitung hinzufügen. Auch hier fügen wir zuerst einen Untertitel mit h2 hinzu und danach verschiedene Absätze mit dem p-Tag.

Davor anzeigen
<!DOCTYPE html>
<html>
  <head>
   <meta charset="UTF-8" />
   <title>Spitzbubenrezept</title>
   <meta name="viewport" inhalt="width=device-width, initial-scale=1" />
  </head>
  <body>
  <div id="rezept">
   <div>
    <img src="./src/img/spitzbuben.jpg" alt="Spitzbuben" />
	<h1>Spitzbuben mit Johannisbeergelee</h1>
   </div>
   <div id="inhalt">
	<div id="zutaten">
	  <h2>Zutaten für 4 Personen</h2>
	  <ul>
		<li>125 g Butter, weich</li>
		<li>62.5 g Puderzucker oder Zucker</li>
		<li>1 TL Vanillezucker</li>
		<li>0.5 Prise Salz</li>
		<li>0.5 Eiweiss (frisch)</li>
		<li>175 g Mehl</li>
		<li>ca. 100 g Gelee (Johannisbeeren oder Quitten) oder Konfitüre
		(Aprikosen)</li>
		<li>etwas Puderzucker (zum Bestäuben)</li>
	  </ul>
	</div>
<div id="zubereitung">
  <h2>Zubereitung</h2>
  <p>
  Butter in einer Schüssel verrühren. Puderzucker, Vanillezucker und
  Salz beigeben, rühren, bis die Masse heller ist.
  </p>
  <p>
  Eiweiss verklopfen, darunterrühren. Mehl beigeben, zu einem Teig
  zusammenfügen, etwas flach drücken, zugedeckt mind. 2 Std. kühl
  stellen.
  </p>
  <p>
  Ofen auf 200 Grad vorheizen. Teig portionenweise zwischen einem
  aufgeschnittenen Plastikbeutel 2 mm dick auswallen. Rondellen von
  ca. 4 cm Ø (Mini-Spitzbuben ca. 2 cm Ø) ausstechen. Bei der Hälfte
  der Guetzli mit einem kleinen Förmchen die Mitte ausstechen. Guetzli
  auf mit Backpapier belegte Bleche legen, ca. 15 Min. kühl stellen.
  </p>
  <p>
  Backen pro Blech: je ca. 6 Min. in der Mitte des Ofens. Herausnehmen,
  Guetzli auf einem Gitter auskühlen.
  </p>
  <p>
  Gelee in einer kleinen Pfanne warm werden lassen, glatt rühren, auf
  die flache Seite der Guetzlibödeli verteilen. Deckeli mit
  Puderzucker bestäuben, darauf setzen.
  </p>
</div>  
   </div>
 </body>
</html>
Danach anzeigen