HTML Dokumente

HTML ist eine Abkürzung und steht für Hypertext Markup Language. Es ist eine Auszeichnungssprache, die verwendet wird, um Inhalte im Web zu strukturieren und zu formatieren. HTML ist die Grundlage für jede Webseite im Internet.

Struktur von HTML-Dokumenten

Die Struktur eines Textes wird in HTML durch Tags definiert.

<name>Inhalt</name>

Die Tags werden im Browser nie angezeigt, sondern nur der Inhalt zwischen den Tags. Folgende Begriffe sind wichtig:

Tagname

der Tagname zeigt dem Browser an, um welchen Inhalt es sich handelt.

z.B. bei <p> ist der Tagname p, für englisch Paragraph.

öffnende Tags

Sie starten einen neuen Bereich.

z.B. <p>

schliessende Tags

Sie beenden einen Bereich.

z.B. </p>

⚠️ Beachten Sie das /!

HTML-Element

Ein HTML-Element besteht aus einem öffnenden Tag, einem schliessenden Tag und dem Inhalt dazwischen.

z.B. <p>Dies ist ein Absatz.</p>

Tags

Markieren Sie im folgenden Dokument alle Öffnenden Tags grün und alle Schliessenden Tags rot.

Laden...

Laden...

Wird obiges HTML-Dokument von einem Browser dargestellt, werden alle Tags entfernt und die Inhalte formatiert angezeigt:

<h1>HTML</h1>
<div>
    Ein <code>div</code>-Tag steht für "Division", also für einen Bereich mit beliebigem Inhalt.
    <p>
        Ein <code>p</code>-Tag steht für "Paragraph", ein Bereich mit <b>Textinhalten</b>.
    </p>
</div>

Webseiten sind HTML-Dokumente

Die täglich besuchten Webseiten sind nichts anderes als HTML-Dokumente, die von einem Browser interpretiert und dargestellt werden.

Ein solches Dokument kann auch heruntergeladen werden und durch Doppelklicken im Browser geöffnet werden.

HTML-Dokumente öffnen

1. Laden Sie obiges HTML-Dokument herunter.

2. Öffnen Sie das Dokument durch Doppelklick im Browser.

3. Öffnen Sie das Dokument nun im Windows Editor

   Im Editor öffnen

   Um eine Datei mit dem Windows Editor zu öffnen, machen Sie einen Rechtsklick auf die Datei und klicken Sie Öffnen mit → Editor

   

   Falls sich folgendes Fenster öffnet, wählen Sie hier Editor aus und klicken Sie auf Nur einmal:

   

4. Ersetzen Sie den Text HTML durch Ihren Namen (⚠️ die <h1> Tags lassen Sie stehen, es steht dann also <h1>Maria</h1>).

5. Speichern Sie das Dokument (Ctrl + s) und aktualisieren Sie das Browserfenster.

6. Wenn nun Ihr Name als Überschrift erscheint, markieren Sie die Aufgabe als erledigt.

AI Tools?

Wir werden später auch auf AI-Tools eingehen, die Ihnen bei der Erstellung von HTML-Dokumenten helfen können. Vorgängig sollen aber die grundlegenden Bausteine einer Webseite erarbeitet werden.

Weshalb nicht direkt mit AI?

Mit AI-Tools lassen sich mittlerweilen wunderschöne Webseiten im Handumdrehen generieren. In Ihrer Berufslaufbahn wollen Sie allenfalls einmal Verantwortung für ein Projekt übernehmen, bei welchem Sie zwar die zugehörige Webseite nicht selber umsetzen, allerdings die Verantwortung dafür übernehmen sollen, Zeitschätzungen einordnen müssen und daraus eine Risikoabschätzung zur Tragfähigkeit des Projekts machen. Dazu ist ein etwas tiefergehendes Verständis sehr hilfreich.

Verschachtelte Elemente

Da die HTML-Tags einen eindeutigen Anfang und ein eindeutiges Ende haben, können sie auch ineinander verschachtelt werden. Dies ist bspw. bei Listen ganz nützlich:

<ul>
    <li>Erstes Element</li>
    <li>Zweites Element</li>
    <li>Drittes Element</li>
</ul>

<ul>
    <li>Erstes Element</li>
    <li>
        Zweites Element
        <ul>
            <li>Unterpunkt 1</li>
            <li>Unterpunkt 2</li>
        </ul>
    </li>
    <li>Drittes Element</li>
</ul>

Einrückung

Beachten Sie die Einrückung der verschachtelten Tags. Dies ist zwar nicht zwingend notwendig, hilft aber, den Überblick zu behalten.

Für Abschnitte:

• Öffnende und schliessende Tags immer auf der gleichen Einrückungsebene stehen.
• Verschachtelte Elemente sollen immer eine Ebene weiter eingerückt werden.

Tag-Namen

Das 👉 World Wide Web Consortium (W3C) hat ab 1994 die Spezifikationen für HTML festgelegt, wobei sie auch die Tag-Namen für verschiedene Struktur-Elemente eines Dokuments festgelegt haben.

h1

Überschrift 1. Die grösste Überschrift (engl. Heading 1).

h2

Überschrift 2. Eine etwas kleinere Überschrift (engl. Heading 2)

h3, h4, h5, h6

Überschriften 3 bis 6. Immer kleiner werdende Überschriften. (engl. Heading 3-6)

p

Absatz oder Paragraph - wie in Word...

ul

Ungeordnete Liste. Eine Liste ohne Nummerierung.

ol

Geordnete Liste. Eine Liste mit Nummerierung.

li

Listenelement. Ein Element in einer Liste.

b

Fett. Text fett darstellen.

i

Kursiv. Text kursiv darstellen.

u

Unterstrichen. Text unterstrichen darstellen.

Tags ausprobieren

Probieren Sie die verschiedenen Tags selber aus!

Übung

HTML-Tags kennenlernen

Versuchen Sie den untenstehenden Text so zu strukturieren, dass die folgende Ausgabe erzeugt wird:

Laden...

---

🚀 HTML – Die grosse Bühne
Was geht ab in HTML? 😎
Hier lernst du die wichtigsten, allercoolsten und ultimativsten Tags kennen!

Überschriften-Levels, Baby!
HTML ist wie eine Gang und jeder hat seinen Rang:
h5 – Fast schon der Underdog...
h6 – Für die kleinen, aber feinen Extras!
Paragraph = „Textklops“ – easy!

Listen-Party 🥳
Ungeordnete Liste: Coole Skills, die du brauchst
Zocken können
Meme-Game on point
HTML beherrschen (du bist hier!)
Geordnete Liste: To-Do, bevor du erwachsen wirst
Peinliche Momente überleben
Power-Naps meistern
Mindestens einen Insider-Witz haben

Laden...