EF Informatik 2023
🔸

Im Folgenden wollen wir die für uns wichtigsten HTML-Elemente etwas genauer anschauen:

Überschriften

Diese markieren eine Überschrift. Insgesamt gibt es 6 heading-Element um Kapitel, Unterkapitel, Unterunterkapitel, usw. zu kennzeichnen.

Beispiel

<h1>Eine Überschrift</h1>
1

Eine Überschrift

Name
heading
Tag
<h1> (<h2>, <h3>, <h4>, <h5> und <h6>)
Typ
block

Absätze

Beispiel

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

Dieser Text wird in einem Absatz dargestellt

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

Name
paragraph
Tag
<p>
Typ
block

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.

Beispiel

Hier ist <a href="http://www.gymkirchenfeld.ch">ein Link</a>
1
Hier ist ein Link
Name
anchor
Tag
<a>
Typ
inline
Attribute
href – URL welche bei Klick geöffnet werden soll.

Bild

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.

Beispiel

<img src="moonlight.jpg" alt="Moonlight (2016)">
1
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

Text hervorheben

Die zwei wichtigsten Tags einzelne Buchstaben oder Wörter im Text hervorzuheben sind diese fett oder kursiv darzustellen

Beispiel

<p>Ich bin <strong>fett</strong> und ich <em>kursiv</em></p>
1

Ich bin fett und ich kursiv

Name
strong/emphasize
Tag
<strong>/<em>
Typ
inline

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:

Beispiel: Blockbereiche

<header>
   <h1>Spaghetti</h1>
</header>
<div>
   <p>Man bringe einen Grossen Topf Wasser zum Kochen, nehme Salz und koche die Spaghetti «al dente».</p>
</div>
<footer>
   <p><small>&copy; 2022 by fts</small></p>
</footer>
1
2
3
4
5
6
7
8
9

Spaghetti

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

Name
division (article, section, header, footer, nav, aside)
Tag
<div> (article, section, header, footer, nav und aside)
Typ
block

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. Im Listen-Element drin können Text, Links, Bilder und weitere Elemente vorkommen.

Beispiel

<ol>
   <li>Arbeiten</li>
   <li>Essen</li>
   <li>Schlafen</li>
</ol>
1
2
3
4
5
  1. Arbeiten
  2. Essen
  3. Schlafen

Beispiel

<ul>
   <li>Schlafen</li>
   <li>Essen</li>
   <li>Arbeiten</li>
</ul>
1
2
3
4
5
6
  • Schlafen
  • Essen
  • Arbeiten
Name
unordered-list/ordered-list/list-item
Tag
<ul>/<ol> mit einem oder mehreren <li>
Typ
block

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.

Beispiel

<form action="suche.html" method="get">
   <label>Suche:
      <input type="text" name="q" />
   </label>
   <button>go</button>
</form>
1
2
3
4
5
6

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

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-Paramter mit JS auslesen

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übermittlungc