html mit Adi Prinz

Ungeordnete Listen

Eine ungeordnete Liste wird mit dem Element <ul> erstellt. Die einzelnen Listeneinträge werden mit <li> ausgezeichnet.

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Die Reihenfolge der Einträge hat bei einer ungeordneten Liste keine besondere Bedeutung. Browser stellen die Listeneinträge standardmäßig mit Aufzählungszeichen dar.

Geordnete Listen

Eine geordnete Liste wird mit dem Element <ol> erstellt. Sie eignet sich für Inhalte, bei denen die Reihenfolge wichtig ist.

<ol>
  <li>HTML-Datei erstellen</li>
  <li>Grundgerüst einfügen</li>
  <li>Inhalt ergänzen</li>
  <li>Datei im Browser öffnen</li>
</ol>

Browser nummerieren die Listeneinträge standardmäßig mit arabischen Zahlen.

Nummerierung festlegen

Mit dem Attribut type kann die Art der Nummerierung bestimmt werden.

<ol type="A">
  <li>Erste Aufgabe</li>
  <li>Zweite Aufgabe</li>
  <li>Dritte Aufgabe</li>
</ol>

Startwert festlegen

Mit dem Attribut start kann festgelegt werden, bei welchem Wert die Nummerierung beginnt.

<ol start="5">
  <li>Fünfter Eintrag</li>
  <li>Sechster Eintrag</li>
  <li>Siebter Eintrag</li>
</ol>

Nummerierung umkehren

Das boolesche Attribut reversed kehrt die Reihenfolge der Nummerierung um.

<ol reversed>
  <li>Dritter Platz</li>
  <li>Zweiter Platz</li>
  <li>Erster Platz</li>
</ol>

Wert eines Listeneintrags ändern

Mit dem Attribut value kann einem einzelnen <li>-Element ein bestimmter Zahlenwert zugewiesen werden. Die folgenden Einträge setzen die Nummerierung von diesem Wert aus fort.

<ol>
  <li>Erster Eintrag</li>
  <li value="5">Fünfter Eintrag</li>
  <li>Sechster Eintrag</li>
</ol>

Verschachtelte Listen

Listen können weitere Listen enthalten. Die untergeordnete Liste muss dabei innerhalb eines <li>-Elements stehen.

<ul>
  <li>
    Webdesign
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>

  <li>
    Microsoft 365
    <ul>
      <li>Excel</li>
      <li>Word</li>
    </ul>
  </li>
</ul>

Geordnete und ungeordnete Listen können auch miteinander kombiniert werden.

<ol>
  <li>
    HTML-Grundlagen
    <ul>
      <li>Elemente</li>
      <li>Attribute</li>
    </ul>
  </li>

  <li>
    CSS-Grundlagen
    <ul>
      <li>Selektoren</li>
      <li>Eigenschaften</li>
    </ul>
  </li>
</ol>

Beschreibungslisten

Eine Beschreibungsliste eignet sich für Begriffe mit zugehörigen Erklärungen, beispielsweise für ein Glossar.

Sie besteht aus drei Elementen:

• <dl> umschließt die gesamte Beschreibungsliste.
• <dt> kennzeichnet einen Begriff oder Namen.
• <dd> enthält die zugehörige Beschreibung.

<dl>
  <dt>HTML</dt>
  <dd>Beschreibt die Struktur und Bedeutung einer Webseite.</dd>

  <dt>CSS</dt>
  <dd>Bestimmt die Gestaltung und das Layout einer Webseite.</dd>

  <dt>JavaScript</dt>
  <dd>Ermöglicht dynamische und interaktive Funktionen.</dd>
</dl>

Ein Begriff kann mehrere Beschreibungen besitzen. Ebenso kann eine Beschreibung zu mehreren Begriffen gehören.

<dl>
  <dt>HTML</dt>
  <dt>HyperText Markup Language</dt>
  <dd>Auszeichnungssprache zum Strukturieren von Webseiten.</dd>
</dl>

Listen mit CSS gestalten

Die Art und Position der Aufzählungszeichen kann mit CSS angepasst werden.

ul {
  list-style-type: square;
}

ol {
  list-style-type: upper-roman;
}

li {
  margin-block: 0.5rem;
}

Mit list-style-position wird festgelegt, ob sich das Aufzählungszeichen innerhalb oder außerhalb des Inhaltsbereichs befindet.

ul {
  list-style-position: inside;
}

Soll eine Liste beispielsweise für eine Navigation verwendet werden, können die Aufzählungszeichen entfernt werden:

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

Auswahl des passenden Listentyps

Der Listentyp sollte nach der Bedeutung des Inhalts ausgewählt werden. Die gewünschte optische Darstellung wird anschließend mit CSS festgelegt.

Aufbau eines Verweises

Das Ziel eines Verweises wird mit dem Attribut href angegeben. Zwischen dem öffnenden und dem schließenden Tag steht der sichtbare Linktext.

<a href="https://www.example.com">Webseite öffnen</a>

Ein Verweis besteht damit aus folgenden Teilen:

Absolute Verweise

Ein absoluter Verweis enthält die vollständige Internetadresse einschließlich des Protokolls. Er wird meistens für Ziele auf einer anderen Website verwendet.

<a href="https://developer.mozilla.org/de/">
  MDN Web Docs
</a>

Bei externen Webseiten muss normalerweise https:// angegeben werden. Andernfalls könnte der Browser die Adresse als relativen Pfad innerhalb der eigenen Website interpretieren.

Relative Verweise

Relative Verweise führen zu einer Datei innerhalb derselben Website. Die Adresse wird ausgehend vom Speicherort der aktuellen Datei angegeben.

Datei im selben Ordner

<a href="kontakt.php">Kontakt</a>

Datei in einem Unterordner

<a href="downloads/beispiel.zip">Beispiel herunterladen</a>

Datei im übergeordneten Ordner

<a href="../index.php">Zur Startseite</a>

Verweise innerhalb einer Seite

Mit einer Sprungmarke kann direkt zu einem bestimmten Element innerhalb derselben Seite navigiert werden. Das Zielelement benötigt dafür eine eindeutige id.

<a href="#kontakt">Zum Kontaktbereich</a>

<section id="kontakt">
  <h2>Kontakt</h2>
  <p>Hier stehen die Kontaktdaten.</p>
</section>

Im Attribut href wird der Wert der Ziel-ID mit einem vorangestellten Doppelkreuz # angegeben.

Sprungmarke zu einer anderen Seite

<a href="kontakt.php#formular">
  Direkt zum Kontaktformular
</a>

Zurück zum Seitenanfang

<body id="top">
  ...
  <a href="#top">Zum Seitenanfang</a>
</body>

Ziel eines Verweises festlegen

Mit dem Attribut target kann festgelegt werden, wo das verknüpfte Dokument geöffnet wird.

<a
  href="https://www.example.com"
  target="_blank"
  rel="noopener"
>
  Webseite in einem neuen Tab öffnen
</a>

Bei einem neuen Tab sollte das Verhalten für Benutzer erkennbar sein. Das Attribut rel="noopener" verhindert außerdem, dass die neu geöffnete Seite über JavaScript auf die ursprüngliche Seite zugreifen kann.

Verweise auf E-Mail-Adressen und Telefonnummern

E-Mail-Verweis

Mit mailto: kann das auf dem Gerät eingerichtete E-Mail-Programm geöffnet werden.

<a href="mailto:info@example.com">
  E-Mail schreiben
</a>

Betreff und Nachricht können als zusätzliche Angaben ergänzt werden:

<a href="mailto:info@example.com?subject=Anfrage&body=Guten%20Tag">
  Anfrage senden
</a>

Telefon-Verweis

Mit tel: kann auf geeigneten Geräten ein Telefonanruf vorbereitet werden.

<a href="tel:+43123456789">
  +43 1 234 56 789 anrufen
</a>

Dateien verlinken und herunterladen

Ein Verweis kann auch auf ein Bild, ein PDF-Dokument, eine ZIP-Datei oder einen anderen Dateityp führen.

<a href="downloads/html-beispiele.zip">
  HTML-Beispiele herunterladen
</a>

Mit dem Attribut download wird dem Browser mitgeteilt, dass die Datei heruntergeladen werden soll.

<a href="downloads/html-beispiele.zip" download>
  HTML-Beispiele herunterladen
</a>

Optional kann ein gewünschter Dateiname angegeben werden:

<a
  href="downloads/beispiel.zip"
  download="HTML-Beispiele.zip"
>
  Beispiele herunterladen
</a>

Ob ein Download tatsächlich erzwungen wird, hängt unter anderem von der Herkunft der Datei und den Einstellungen des Browsers beziehungsweise Servers ab.

Bilder als Verweise

Statt eines Textes kann auch ein Bild als anklickbarer Inhalt eines Verweises verwendet werden.

<a href="index.php">
  <img
    src="images/logo.png"
    alt="Zur Startseite von EDV mit Adi Prinz"
  >
</a>

Der Alternativtext des Bildes sollte in diesem Fall auch das Ziel oder die Funktion des Verweises verständlich beschreiben.

Verständliche und barrierefreie Verweise

Verweise sollten auch außerhalb ihres unmittelbaren Textzusammenhangs verständlich sein. Screenreader können beispielsweise eine Liste aller Links einer Seite ausgeben.

Ungeeigneter Linktext

<a href="html-grundlagen.pdf">Hier klicken</a>

Aussagekräftiger Linktext

<a href="html-grundlagen.pdf">
  HTML-Grundlagen als PDF herunterladen
</a>

Bei Verweisen sollten außerdem folgende Punkte beachtet werden:

• Linktexte beschreiben das Ziel oder die ausgeführte Aktion.
• Gleiche Linktexte führen innerhalb einer Seite möglichst zum gleichen Ziel.
• Verweise sind nicht ausschließlich durch ihre Farbe erkennbar.
• Der Tastaturfokus bleibt deutlich sichtbar.
• Ein neues Fenster oder ein Dateidownload wird verständlich angekündigt.