====== HTML Theorie ====== ===== 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. 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-Beispiel ==== Eine sehr einfache HTML-Datei sieht zum Beispiel so aus:




    
    Meine HTML-Seite


    Willkommen auf meiner Webseite
    Dies ist ein einfacher Absatz.
    Eine ungeordnete Liste:
    
        Listenpunkt 1
        Listenpunkt 2
        Listenpunkt 3
    
    Ein Bild:
    
    Ein Link:
    Besuchen Sie diese Webseite

Willkommen auf meiner Webseite

Dies ist ein einfacher Absatz.

Eine ungeordnete Liste:

Listenpunkt 1
Listenpunkt 2
Listenpunkt 3

Ein Bild:

Ein Link:

Besuchen Sie diese Webseite

==== HTML-Grundgerüst aus head und body ==== HTML besteht aus vielen Tags. Die meisten HTML-Elemente haben einen Start- und einem Endtag. Der HTML-Kopf beginnt mit dem Starttag `` und endet mit dem Endtag ``. Er beinhaltet Einstellungen und zusätzliche Informationen, die nicht im Hauptfenster des Browsers angezeigt werden, z.B.: * ``: sorgt dafür, dass z.B. Umlaute ä,ö,ü richtig angezeigt werden. * `Meine HTML-Seite`: enthält den Titel der Seite (erscheint auf dem Tab im Browser). Der HTML-Körper beginnt mit dem Starttag `` und endet mit dem Endtag ``. Dazwischen befindet sich der **Inhalt** der Website, also das, was im Hauptfenster des Browsers angezeigt wird. {{:gf_informatik:web_sca:html_tattoo_head_body.png?nolink&300|}} ==== HTML-Elemente ==== Es gibt zwei Arten von Elementen: **Block-Elemente** und **Inline-Elemente**. Einige Elemente haben **Attribute**. === 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:


Header 1 (Überschrift 1) 
Überschriften sind h1 bis h6
Das Paragraph-Element dient zur Darstellung von Paragraphen (Absätzen).
Jeder Paragraph beginnt auf einer neuen Zeile.

  Listenpunkt in einer unnummerierten Liste
  Listenpunkt in einer unnummerierten Liste


  Listenpunkt in einer nummerierten Liste
  Listenpunkt in einer nummerierten Liste

Header 1 (Überschrift 1)

Überschriften sind h1 bis h6

Das Paragraph-Element dient zur Darstellung von Paragraphen (Absätzen).

Jeder Paragraph beginnt auf einer neuen Zeile.

Listenpunkt in einer unnummerierten Liste
Listenpunkt in einer unnummerierten Liste

Listenpunkt in einer nummerierten Liste
Listenpunkt in einer nummerierten Liste

=== Inline-Elemente === Inline-Elemente fügen sich in den Textfluss einer Seite ein, ohne eine neue Zeile zu beginnen. Die wichtigsten **Inline-Elemente** sind:


Text kann betont (en. emphasis) oder stark betont werden. Der entsprechende Text wird kursiv bzw. fett dargestellt.

Text kann betont (en. emphasis) oder stark betont werden. Der entsprechende Text wird kursiv bzw. fett dargestellt.

=== Elemente mit Attributen === Gewisse Tags benötigen **Attribute**, um zusätzliche Informationen angeben zu können: **Hyperlinks** (Tag: `` für *anchor*) benötigen ein `href` Attribut (für *hyper reference*).


Dieser Text enthält einen

Link zur KSK.

Dieser Text enthält einen Link zur KSK.

**Bilder** werden mit dem `` 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: