HTML [KSR Wiki]

Diese Seite ist nicht editierbar. Du kannst den Quelltext sehen, jedoch nicht verändern. Kontaktiere den Administrator, wenn du glaubst, dass hier ein Fehler vorliegt.
==== 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_.