HTML [KSR Wiki]

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.

<h3>Titel werden mit h1 - h6 gekennzeichnet</h3>
Dies ist normaler Text.

wird so dargestellt:

Dies ist normaler Text.

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:

index.html

<html>
  <head>
    <title>Dies ist der Titel</title>
  </head>
  <body>
    <p>Hier folgt der Inhalt</p>
  </body>
</html>

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:

<h5>Überschriften</h5>
<p>Abschnitte (en. paragraph) strukturieren den Text</p>
<ul>
  <li>Listen (ul: unnumbered list)</li>
  <li>li: list item</li>
</ul>

wird zu:

Überschriften

Abschnitte (en. paragraph) strukturieren den Text.

Listen (ul: unnumbered list)
li: list item

Inline-Auszeichnung

Bereiche im Lauftext können auch ausgezeichnet werden. Sogenannte Inline-Tags können keine Block-Element enthalten.

Text kann <em>betont (en. emphasis)</em> oder <strong>stark betont</strong> werden.

wird zu:

Text kann betont (en. emphasis) oder stark betont werden.

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).

Dieser Text enthält einen 
<a href="http://ksr.ch">Link zur KSR</a>.

Dieser Text enthält einen Link zur KSR.

Ü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:

<img src="tigerente.jpg" />

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 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).

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 Visual Studio Code zu installieren.
- Alternative ohne Installation: vscode.dev direkt im Internet.
Auf Windows installiert ist normalerweise Microsoft Editor.

HTML

Titel werden mit h1 - h6 gekennzeichnet