Im Folgenden wollen wir die für uns wichtigsten HTML-Elemente etwas genauer anschauen. Grob gesehen gibt es zwei Arten von HTML-Elemente: block- und inline-Elemente. Während inline-Elemente im Textfluss drin sind, werden Block-Elemente wirklich als Blöcke dargestellt. Es gibt sogar noch eine Mischung: inline-block.

Absätze

<p>Dieser Text wird in einem Absatz dargestellt</p>
<p>Hier beginnt ein weiterer Absatz. Normalerweise werden Absätze durch eine Leerzeile getrennt.</p>

Name

paragraph

Tag

<p>

Typ

block

Der Browser stellt zwei Absätze dar. Je nach Formatierungs-Einstellung, gibt es dazwischen einen entsprechenden Abstand:

Dieser Text wird in einem Absatz dargestellt

Hier beginnt ein weiterer Absatz. Normalerweise werden Absätze durch eine Leerzeile getrennt.

Überschriften

Insgesamt gibt es 6 heading-Element um Kapitel, Unterkapitel, Unterunterkapitel, usw. zu kennzeichnen.

<h1>Kapitel</h1>
<h2>Unterkapitel</h2>
<h3>Unterunterkapitel</h3>

Name

heading

Tag

<h1>, <h2>, <h3> (<h4>, <h5> und <h6>)

Typ

block

Der Browser stellt den Code wie folgt dar. Dabei wird die Formatierung (farbige Linie) vom Design der aktuellen Webseite übernommen:

Kapitel

Unterkapitel

Unterunterkapitel

Hyperlinks

Mit dem anchor-Element kann ein Inhalt (Text oder ein Bild) mit einem Hyperlink versehen werden. Klickt man den Inhalt an, so wird die entsprechende URL geöffnet.

Hier ist <a href="http://www.gymkirchenfeld.ch">ein Link</a>

Name

anchor

Tag

<a>

Typ

inline

Attribute

href – URL welche bei Klick geöffnet werden soll.

Der Browser hebt den Inhalt des anchor-Elementes hervor und macht diesen klickbar:

Hier ist ein Link

Bilder

Um ein Bild auf einer Webseite anzuzeigen, fügen wir ein img-Element ein. Dieses dient als Platzhalter für das Bild. Das Bild wird dann vom Browser in einem weiteren request von der als Attribut angegebenen URL geladen.

<img src="moonlight.jpg" alt="Moonlight (2016)">

Name

image

Tag

<img>

Typ

inline-block

Attribute

src – URL von welcher das Bild geladen werden soll

alt – Alternativer Text für Browser welche keine Bilder darstellen können

Der Browser lädt also diese Bild und platziert es im img-Element:

Text hervorheben

Die zwei wichtigsten Tags um einzelne Buchstaben oder Wörter im Text hervorzuheben werden normalerweise fett oder kursiv dargestellt

<p>Ich bin <strong>stark</strong> und ich <em>hervorgehoben</em>.</p>

Name

strong/emphasize

Tag

<strong>/<em>

Typ

inline

Die eigentliche Darstellung hängt von den Formatierungseinstellung der entsprechenden Webseite ab:

Ich bin stark und ich hervorgehoben.

Block-Bereiche

Mit dem div-Tag kann ein Bereich (division) erstellt werden. So lassen sich beliebige Element zusammenfassen. Das div-Tag wird vor allem verwendet, um Elemente zu gestalten und zu positionieren (mehr dazu im Kapitel «CSS»).

HTML5 bringt semantische Varianten des div-Elements. Deren Namen sprechen für sich: article, section, header, footer, nav und aside. Wenn man nur ein Element des Typs einsetzt, kann man sich das class-Attribut sparen:

<header>
   <h1>Spaghetti</h1>
   <small>das Rezept</small>
</header>
<article>
   <p>Man bringe einen Grossen Topf Wasser zum Kochen, nehme Salz und koche die Spaghetti «al dente».</p>
</article>
<footer>
   <p><small>&copy; 2022 by fts</small></p>
</footer>

Name

division (article, section, header, footer, nav, aside)

Tag

<div> (article, section, header, footer, nav und aside)

Typ

block

Der Browser stellt also diese 3 Blöck untereindander dar (wenn nichts anderes angegeben ist):

Spaghetti

das Rezept

Man bringe einen Grossen Topf Wasser zum Kochen, nehme Salz und koche die Spaghetti «al dente».

© 2022 by fts

header, div und footer sind zur Veranschaulichung farblich hervorgehoben

Liste

Um eine Aufzählung zu machen, kann man entweder eine nicht-geordnete Liste (Aufzählungspunkte) oder eine geordnete Liste (Zahlen) einfügen. Beide Listen beinhalten für jedes Listen-Element ein li-Tag (list-item). Im Listen-Element drin können Text, Links, Bilder und weitere Elemente vorkommen.

geordnete Liste

<ol>
   <li>Arbeiten</li>
   <li>Essen</li>
   <li>Schlafen</li>
</ol>

Name

ordered-list/list-item

Tag

<ol> mit einem oder mehreren <li>

Typ

block

1. Arbeiten
2. Essen
3. Schlafen

ungeordnete Liste

<ul>
   <li>Schlafen</li>
   <li>Essen</li>
   <li>Arbeiten</li>
</ul>

Name

unordered-list/list-item

Tag

<ul> mit einem oder mehreren <li>

Typ

block

• Schlafen
• Essen
• Arbeiten

Listen können auch völlig umgestaltet werden. Häufig verwendet man die ungeordnete Liste ohne die Aufzählungspunkte.

Formulare

Formulare werden verwendet, um Benutzereingaben an den Server zu senden. Ein Formular hat verschiedene Felder – das können Textfelder oder auch Check- und Auswahlboxen sein. Wir schauen hier nur das Textfeld an, das wir als Eingabe für den Suchbegriff brauchen.

<form action="suche.html" method="get">
   <label>Suche:
      <input type="text" name="q" />
   </label>
   <button>go</button>
</form>

Name

Form

Tag

<form>

Typ

block

Attribute

action – URL die aufgerufen werden soll

method – Art der Datenübermittlung (GET für Query-String)

Unterelemente

<label> – Beschriftung des Formular-Elementes

<input> – Eingabe-Feld

---

Name

Label

Tag

<label>

Typ

inline

---

Name

Input

Tag

<input>

Typ

inline

Attribute

type – Art der Eingabe, z.B. text

name – Name für die Datenübermittlung

Die Formular-Daten werden bei der im Beispiel verwendeten Methode GET als sogenannte Query-String-Parameter an die mit dem Attribut action festgelegte URL gehängt. Dabei wird als Name des Paramaters das name-Attribut des input-Elemnets genommen und… Drückt man also im oberen Beispiel den Button go, dann wird die folgende Seite aufgerufen:

suche.html?q=Curry

Suche:

Alles was nach dem ? kommt ist der sogenannte Querystring.

Die aufgerufene Seite kann dann die Benutzereingabe für die Suche aus dem Querystring rauslesen:

👉 Querystring-Parameter mit JS auslesen