Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.

--- gf_informatik:web:html [2023-10-24 13:24] – ↷ Seite von gf_informatik:web_gra:websites_basics nach gf_informatik:web:html verschoben und umbenannt hof
+++ gf_informatik:web:html [2025-01-31 20:25] (aktuell) – [HTML-Grundgerüst aus head und body] gra
@@ Zeile 1: / Zeile 1: @@
-====== Webseiten, HTML und CSS – Grundlagen ======
+====== HTML ======
-==== Was ist eine Webseite? ====
+===== Was ist eine Webseite? =====
 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-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 ===
+==== HTML-Beispiel ====
 Eine sehr einfache HTML-Datei sieht zum Beispiel so aus:
+<WRAP group>
+<WRAP column half>
 <code html Beispiel.html>
 <html>
@@ Zeile 29: / Zeile 32: @@
     </ul>
     <h2>Ein Bild:</h2>
-    <img src="bild.jpg" alt="Mein Bild" width="300" height="200">
+    <img src="bild.jpg" alt="Mein Bild" width="200">
     <h2>Ein Link:</h2>
     <a href="https://www.example.com">Besuchen Sie diese Webseite</a>
@@ Zeile 35: / Zeile 38: @@
 </html>
 </code>
+</WRAP>
+<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>
+    <h2 style="margin: unset ! important; border: unset;">Eine ungeordnete Liste:</h2>
+    <ul>
+        <li>Listenpunkt 1</li>
+        <li>Listenpunkt 2</li>
+        <li>Listenpunkt 3</li>
+    </ul>
+    <h2 style="margin: unset ! important; border: unset;">Ein Bild:</h2>
+    <img src="https://sca.ksr.ch/lib/exe/fetch.php?w=400&tok=42c9d4&media=gf_informatik:tigerente.jpeg" alt="Mein Bild" width="200">
+    <h2 style="margin: unset ! important; border: unset;">Ein Link:</h2>
+    <a href="https://www.example.com">Besuchen Sie diese Webseite</a>
+  </div>
+</HTML>
+</WRAP>
+</WRAP>
-=== HTML-Grundgerüst aus head und body ===
+==== 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 49: / Zeile 74: @@
-=== HTML-Elemente ===
+==== HTML-Elemente ====
 Es gibt zwei Arten von Elementen: **Block-Elemente** und **Inline-Elemente**. Einige Elemente haben **Attribute**.
-== Block-Elemente ==
+=== Block-Elemente ===
 Block-Elemente werden typischerweise untereinander angeordnet und nehmen die ganze verfügbare Breite ein. Sie können Text, andere Block-Elemente oder Inline-Elemente enthalten. Die wichtigsten Block-Elemente sind:
+<WRAP group>
+<WRAP column half>
 <code html Blockelemente.html>
+<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>
-<h1>Das h1-Element ist die oberste Überschrift (header).</h1>
-<h2>Weitere Überschriften sind h2 bis h6</h2>
 <ul>
   <li>Listenpunkt in einer unnummerierten Liste</li>
@@ Zeile 69: / Zeile 96: @@
 </ol>
 </code>
+</WRAP>
+<WRAP column half>
+<HTML>
+  <div style="border: 1px solid #ccc; border-radius: 4px; padding: 1em;">
+<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>
+  <li>Listenpunkt in einer unnummerierten Liste</li>
+</ul>
+<ol>
+  <li>Listenpunkt in einer nummerierten Liste</li>
+  <li>Listenpunkt in einer nummerierten Liste</li>
+</ol>
+</div>
+</HTML>
+</WRAP>
+</WRAP>
-== Inline-Elemente ==
+=== Inline-Elemente ===
 Inline-Elemente fügen sich in den Textfluss einer Seite ein, ohne eine neue Zeile zu beginnen. Die wichtigsten **Inline-Elemente** sind:
+<WRAP group>
+<WRAP column half>
 <code html>
 Text kann <em>betont (en. emphasis)</em> oder <strong>stark betont</strong> werden. Der entsprechende Text wird kursiv bzw. fett dargestellt.
 </code>
+</WRAP>
+<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>
+</WRAP>
-== Elemente mit Attributen ==
+=== Elemente mit Attributen ===
 Gewisse Tags benötigen **Attribute**, um zusätzliche Informationen angeben zu können:
 **Hyperlinks** (Tag: `<a>` für *anchor*) benötigen ein `href` Attribut (für *hyper reference*).
+<WRAP group>
+<WRAP column half>
 <code html>
 Dieser Text enthält einen
 <a href="http://ksr.ch">Link zur KSR</a>.
 </code>
+</WRAP>
+<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>
+</WRAP>
-**Bilder** werden mit dem `<img>` Tag eingebettet, wobei der Dateiname bzw. Pfad((Mit dem Attribut *src* (source) gibt man den Pfad zum Bild an. Befindet sich das Bild *im gleichen Ordner* wie das index.html File, so kann man einfach den Namen des Bildes inkl. Dateiendung (typischerweise .jgp oder .png) angeben.)) des Bilds im `src`-Attribut angegeben werden. Weil der Bild-Tag keinen Inhalt hat, braucht er auch keinen End-Tag; stattdessen wird der Tag gleich mit einem Schrägstrich geschlossen:
+**Bilder** werden mit dem `<img>` Tag eingebettet, wobei der Dateiname bzw. Pfad((Mit dem Attribut *src* (source) gibt man den Pfad zum Bild an. Befindet sich das Bild *im gleichen Ordner* wie die `index.html` Datei, so kann man einfach den Namen des Bildes inkl. Dateiendung (typischerweise `.jpg` oder `.png`) angeben.)) des Bilds im `src`-Attribut angegeben werden. Weil der Bild-Tag keinen Inhalt hat, braucht er auch keinen End-Tag; stattdessen wird der Tag gleich mit einem Schrägstrich geschlossen:
+<WRAP group>
+<WRAP column half>
 <code html>
-<img src="tigerente.jpg" />
+<img src="tigerente.jpg" width="200" />
 </code>
+</WRAP>
+<WRAP column half>
+{{:gf_informatik:tigerente.jpeg?nolink&200 |}}
+</WRAP>
+</WRAP>
-{{:gf_informatik:tigerente.jpeg?nolink&400 |}}
-\\
-<box 100% round green|**Tipp: Arbeiten mit VSCode**>
-VSCode ist ein hervorragender Editor mit vielen Features. Sehr praktisch ist, dass man **mehrere Zeilen gleichzeitig bearbeiten** kann. Damit kannst du zum Beispiel mehrere Elemente einer Liste gleichzeitig mit Tags versehen. Um den Cursor gleichzeitig auf mehreren Zeilen zu haben: Ctrl+Alt+Up/Down (Windows) resp. Opt+Cmd+Up/Down (macOS).
-Allgemein verfügt VSCode über viele Shortcuts:
-   * Windows: [[https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf]]
-   * macOS:   [[https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf]]
-</box>
-==== CSS-Grundlagen ====
-**CSS** ist eine eine Auflistung von Gestaltungs-Eigenschaften: Zum Beispiel wird für ein bestimmtes HTML-Element festgelegt, welche Farbe es hat oder welche Schriftgrösse etc.