HTML-Elemente

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.

<h1>Eine Überschrift</h1>

Eine Überschrift

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

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>

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
Attribute

Zeilenumbruch

<p>In diesem Absatz drin hat es<br>einen Zeilenumbruch.</p>

In diesem Absatz drin hat es
einen Zeilenumbruch.

Name
break
Tag
<br> (kein schliessendes Tag da kein Inhalt)
Typ
inline
Attribute

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.

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

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.

<img src="star-rating.png" alt="3 von 4 Sternen">
3 von 4 Sternen
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
width – Breite des Bildes in Pixel (optional)
height – Höhe des Bildes in Pixel (optional)

Text hervorheben

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

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

Ich bin fett und ich kursiv

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

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

<style>
   .mit-rahmen {
      background-color: white;
      border: 2px solid green;
      text-align: center;   
   }
</style>
<div class="mit-rahmen">
   <img src="star-rating.png" alt="3 von 4 Sternen"><p>3 von 4 Sternen</p>
</div>
3 von 4 Sternen

3 von 4 Sternen

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:

<style>
   aside {
      border: 6px dotted white;
      text-align: center;
      width: 300px;   
   }
</style>
<aside><img src="star-rating.png" alt="3 von 4 Sternen"><p>3 von 4 Sternen</p>
</aside>
Name
division (article, section, header, footer, nav, aside)
Tag
<div> (article, section, header, footer, nav und aside)
Typ
block
Attribute
class – Name, selbstgewählt (keine Leerzeichen). Kann verwendet werden um alle Element mit derselben Klasse per CSS zu gestalten. (optional)

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.

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