Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.

--- gf_informatik:web:html_2022 [2023-10-22 15:58] – gelöscht - Externe Bearbeitung (Unknown date) 127.0.0.1
+++ gf_informatik:web:html_2022 [2023-10-22 15:58] (aktuell) – ↷ Seitename wurde von gf_informatik:web:html auf gf_informatik:web:html_2022 geändert hof
@@ Zeile 1: / Zeile 1: @@
+==== HTML ====
+HTML ist eine Auszeichnungssprache, dh. der enthaltene Text wird mittels *Tags* strukturiert: Markierter Inhalt wird vom Start-Tag (bsp. `<h3>`) und dem End-Tag (`</h3>` - beachte den Schrägstrich) eingeschlossen.
+<code html>
+<h3>Titel werden mit h1 - h6 gekennzeichnet</h3>
+Dies ist normaler Text.
+</code>
+wird so dargestellt:
+<HTML>
+<div style="border: 1px solid #ccc; border-radius: 4px; padding: 9.5px">
+<h3>Titel werden mit h1 - h6 gekennzeichnet</h3>
+Dies ist normaler Text.
+</div>
+</HTML>
+=== Grundstruktur ===
+HTML gibt eine Grundstruktur vor, die alle HTML-Dateien einhalten sollten. Im `head` werden Metadaten gespeichert, zum Beispiel der Titel der Webseite, der im Browser-Tab dargestellt wird; im `body` folgt der eigentliche Inhalt:
+<code html index.html>
+<html>
+  <head>
+    <title>Dies ist der Titel</title>
+  </head>
+  <body>
+    <p>Hier folgt der Inhalt</p>
+  </body>
+</html>
+</code>
+=== Block-Elemente ===
+Block-Elemente werden typischerweise untereinander angeordnet und nehmen die ganze verfügbare Breite ein. Sie können Text, andere Block-Element oder auch Inline-Element (s.u.) enthalten.
+Die wichtigsten Struktur-Elemente sind die folgenden:
+<code html>
+<h5>Überschriften</h5>
+<p>Abschnitte (en. paragraph) strukturieren den Text</p>
+<ul>
+  <li>Listen (ul: unnumbered list)</li>
+  <li>li: list item</li>
+</ul>
+</code>
+wird zu:
+<HTML>
+<div style="border: 1px solid #ccc; border-radius: 4px; padding: 9.5px">
+<h5>Überschriften</h5>
+<p>Abschnitte (en. paragraph) strukturieren den Text.</p>
+<ul>
+  <li>Listen (ul: unnumbered list)</li>
+  <li>li: list item</li>
+</ul>
+</div>
+</HTML>
+=== Inline-Auszeichnung ===
+Bereiche im Lauftext können auch ausgezeichnet werden. Sogenannte *Inline-Tags* können keine Block-Element enthalten.
+<code html>
+Text kann <em>betont (en. emphasis)</em> oder <strong>stark betont</strong> werden.
+</code>
+wird zu:
+<HTML>
+<div style="border: 1px solid #ccc; border-radius: 4px; padding: 9.5px">
+Text kann <em>betont (en. emphasis)</em> oder <strong>stark betont</strong> werden.
+</div>
+</HTML>
+=== Attribute ===
+Gewisse Tags benötigen *Attribute*, um zusätzliche Informationen angeben zu können. Diese folgen innerhalb der Spitzklammern des Tags, nach dem Tag-Namen. Wir nennen hier zwei Beispiele:
+== Links ==
+Hyperlinks (Tag: `<a>` für *anchor*) benötigen ein `href` Attribut (für *hyper reference*).
+<code html>
+Dieser Text enthält einen
+<a href="http://ksr.ch">Link zur KSR</a>.
+</code>
+<HTML>
+<div style="border: 1px solid #ccc; border-radius: 4px; padding: 9.5px">
+Dieser Text enthält einen <a href="http://ksr.ch">Link zur KSR</a>.
+</div>
+</HTML>
+Übrigens waren Hyperlinks das ursprünglich revolutionäre Merkmal von HTML, und das was es zum *Hypertext* macht: die Möglichkeit, aus einem Text gleich zu einem anderen springen zu können, was in keinem Buch oder anderen linearen Medium möglich ist.
+== Bilder ==
+Bilder werden mit dem `<img>` Tag eingebettet, wobei der Dateiname des Bilds im `src`-Attribut angegeben werden. Weil der Bild-Tag keinen Inhalt hat, braucht er auch keinen End-Tag; stattdessen wir der Tag gleich mit einem Schrägstrich geschlossen:
+<code html>
+<img src="tigerente.jpg" />
+</code>
+{{ :gf_informatik:tigerente.jpeg?nolink&400 |}}
+=== Aufgaben HTML ===
+Erstelle eine einfache Webseite:
+  * Erstelle einen neuen Ordner (zum Beispiel auf `OneDrive/Informatik/Internet/Webseite`).
+  * Erstelle eine neue Datei `index.html` in einem [[#Editoren|Text-Editor]].
+  * Füge die HTML-Grundstruktur ein
+    * ergänze einen Titel
+    * eine Überschrift und etwas Text
+    * füge ein Bild ein (finde ein Bild im Internet und speichere das Bild im selben Ordner ab)
+    * und natürlich darf ein Link nicht fehlen.
+Öffne die Datei im Browser - immer wenn du die Datei neu abgespeichert hast, musst du die Seite im Browser neu laden, um die Änderungen anzuzeigen. Die meisten Browser tun dies mit dem Kommando `Ctrl+R` (oder `Cmd+R` auf dem Mac).
+==== Editoren ====
+HTML- und CSS-Quellcode ist nichts anderes als Text. Die Dateien können mit jedem Texteditor bearbeitet werden. Programmier-Umgebungen sind am Anfang etwas schwieriger zu bedienen, bieten aber mehr Komfort und Hilfe bei Fehlern.
+  * Ich empfehle [[https://code.visualstudio.com/|Visual Studio Code]] zu installieren.
+    * Alternative ohne Installation: [[https://vscode.dev/|vscode.dev]] direkt im Internet.
+  * Auf Windows installiert ist normalerweise _Microsoft Editor_.