Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.

--- gf_informatik:web:html [2023-10-24 15:31] – hof
+++ gf_informatik:web:html [2025-01-31 20:25] (aktuell) – [HTML-Grundgerüst aus head und body] gra
@@ Zeile 4: / Zeile 4: @@
 Schau dir irgendeine Webseite im Internet an: Du siehst meist nicht mehr als **Textstücke**, **Links** und **Bilder** (oder Gifs oder Videos). Aber diese Elemente (Textstücke, Links und Bilder) erscheinen nicht einfach nacheinander in beliebiger Reihenfolge und Gestalt, nein: Sie erscheinen in einer bestimmten **Struktur** – im Idealfall wohlgeordnet, übersichtlich und schön **gestaltet**.
-Eine Webseite ist also eine strukturierte und gestaltete Zusammenstellung von Text, Links und Bildern. Sie besteht mindestens aus einer **html-Datei**, also zum Beispiel ''index.html''. Oft gehören auch Bilder und weitere Dateien dazu. Auch eine **css-Datei** gehört meistens zu einer Webseite.
+Eine Webseite ist also eine strukturierte und gestaltete Zusammenstellung von Text, Links und Bildern. Sie besteht mindestens aus einer **HTML-Datei**, also zum Beispiel ''index.html''. Oft gehören auch Bilder und weitere Dateien dazu. Auch eine **CSS-Datei** gehört meistens zu einer Webseite.
 Die **Struktur** einer Webseite legst du mit **HTML** fest. Mit **CSS** kann du das **Erscheinungsbild** dieser Struktur anpassen.
 ===== HTML-Grundlagen =====
-**HTML** ist die eine //Auszeichnungssprache//, das heisst eine Sprache, in der du Textstücke und andere Elemente //auszeichnen// bzw. //markieren// kannst. Durch diese Markierungen wird der Text strukturiert: Dies ist ein Titel, dies eine Überschrift, diese eine Liste etc.
+**HTML** ist eine //Auszeichnungssprache//, das heisst eine Sprache, in der du Textstücke und andere Elemente //auszeichnen// bzw. //markieren// kannst. Durch diese Markierungen wird der Text strukturiert: Dies ist ein Titel, dies eine Überschrift, diese eine Liste etc.
 ==== HTML-Beispiel ====
@@ Zeile 39: / Zeile 39: @@
 </code>
 </WRAP>
-<WRAP column half>
+<WRAP column half code>
 <HTML>
+  <div style="border: 1px solid #ccc; border-radius: 4px; padding: 1em;">
     <h1 style="margin: unset ! important; border: unset;">Willkommen auf meiner Webseite</h1>
     <p>Dies ist ein <em>einfacher</em> Absatz.</p>
@@ Zeile 53: / Zeile 54: @@
     <h2 style="margin: unset ! important; border: unset;">Ein Link:</h2>
     <a href="https://www.example.com">Besuchen Sie diese Webseite</a>
+  </div>
 </HTML>
 </WRAP>
@@ Zeile 61: / Zeile 63: @@
 ==== HTML-Grundgerüst aus head und body ====
-HTML besteht aus vielen Tags. Die meisten HTML-Elemente haben einen Start- und einem Endtag.
+HTML besteht aus vielen Tags (Markierungen). Die meisten HTML-Elemente haben ein Start- und ein Endtag.
 Der HTML-Kopf beginnt mit dem Starttag `<head>` und endet mit dem Endtag `</head>`. Er beinhaltet Einstellungen und zusätzliche Informationen, die nicht im Hauptfenster des Browsers angezeigt werden, z.B.:
@@ Zeile 81: / Zeile 83: @@
 <WRAP column half>
 <code html Blockelemente.html>
-<p>Das Paragraph-Element dient zur Darstellung von Paragraphen (Absätzen).</p>
-<p>Jeder Paragraph beginnt auf einer neuen Zeile.</p>
 <h1>Header 1 (Überschrift 1)</h1>
 <h2>Überschriften sind h1 bis h6</h2>
+<p>Das Paragraph-Element dient zur Darstellung von Paragraphen (Absätzen).</p>
+<p>Jeder Paragraph beginnt auf einer neuen Zeile.</p>
 <ul>
   <li>Listenpunkt in einer unnummerierten Liste</li>
@@ Zeile 97: / Zeile 99: @@
 <WRAP column half>
 <HTML>
-<p>Das Paragraph-Element dient zur Darstellung von Paragraphen (Absätzen).</p>
+  <div style="border: 1px solid #ccc; border-radius: 4px; padding: 1em;">
-<p>Jeder Paragraph beginnt auf einer neuen Zeile.</p>
 <h1 style="margin: unset ! important; border: unset;">Header 1 (Überschrift 1)</h1>
 <h2 style="margin: unset ! important; border: unset;">Überschriften sind h1 bis h6</h2>
+<p>Das Paragraph-Element dient zur Darstellung von Paragraphen (Absätzen).</p>
+<p>Jeder Paragraph beginnt auf einer neuen Zeile.</p>
 <ul>
   <li>Listenpunkt in einer unnummerierten Liste</li>
@@ Zeile 109: / Zeile 112: @@
   <li>Listenpunkt in einer nummerierten Liste</li>
 </ol>
+</div>
 </HTML>
 </WRAP>
@@ Zeile 124: / Zeile 128: @@
 <WRAP column half>
 <HTML>
+  <div style="border: 1px solid #ccc; border-radius: 4px; padding: 1em;">
 Text kann <em>betont (en. emphasis)</em> oder <strong>stark betont</strong> werden. Der entsprechende Text wird kursiv bzw. fett dargestellt.
+</div>
 </HTML>
 </WRAP>
@@ Zeile 142: / Zeile 148: @@
 <WRAP column half>
 <HTML>
+  <div style="border: 1px solid #ccc; border-radius: 4px; padding: 1em;">
 Dieser Text enthält einen
 <a href="http://ksr.ch">Link zur KSR</a>.
+</div>
 </HTML>
 </WRAP>
@@ Zeile 153: / Zeile 161: @@
 <WRAP column half>
 <code html>
-<img src="tigerente.jpg" />
+<img src="tigerente.jpg" width="200" />
 </code>
 </WRAP>