Zum Inhalt

Inhaltsverzeichnis • Teil 1 - Anfänger • Webpräsenz • Weitere Tags
⇦ Webpräsenz / Vorbereitungen ⇨
27.07.2014 16:25:16

Weitere Tags

Weitere Tags

Eine Webseite besteht aus mehr als nur Text. HTML kann externe Objekte (Bilder, Töne, Videos usw.) einbinden sowie Tabellen und Listen erstellen.

In der folgenden Definitionen sind nur die wichtigsten Attribute und Tags angegeben. Weitere finden sie in ihrer HTML-Referenz. Beachten sie, dass auch für die folgenden Tags CSS zur Formatierung genutzt werden sollte.

Weitere Tags finden sie im Anhang: Wichtige Tags und im Anhang: Semantische Tags. Nur zur Vollständigkeit hier der Verweis zum Anhang: Formatierende Tags.

Anker

<a> [s,a,w]

<a name="name">
interner Sprungpunkt.
<a href="#name">
Sprung dorthin.

Überschriften

<h1_h6> [s,a,w]

<h1>
Überschriftebene 1 (höchste)
<h2>
Überschriftebene 2
<h3>
Überschriftebene 3
<h4>
Überschriftebene 4
<h5>
Überschriftebene 5
<h6>
Überschriftebene 6 (niedrigste)

Listen

<ul> [s,a,w], <ol> [s,a,w],

<ol start="">
geordnete Liste mit Startwert
<ul type="">
ungeordnete Liste mit Listenpunkttyp
<li>
Listeneintrag

Tabellen

<table> [s,a,w]

<table border="">
Tabelle mit Rahmen
<tr rawspan="">
Tabellenzeile (raw) mit Überspannung
<th>
Zellenkopf (head)
<td width="" colspan="">
Tabellenzelle (data) mit Breite und Überspannung
&nbsp;
Leerzeichen für leere Spalten (auch <br />)

Grafiken

<img> [s,a,w]

<img src="" alt="" width="" height="" />
Bild einfügen
Attribute
src: URI des Bildes
width: Breite in Prozent oder Pixel
height: Höhe in Prozent oder Pixel
alt: Alternativer Text

Seiten

<iframe> [s,a,w]

<iframe src="" />
Andere Webseite per URI (src) einfügen

Multimedia-Objekte

<object> [s,a,w]

<object data="" type="" />
Beliebiges Objekt mit Typ (Ton, Video, ...) per URI (data) einfügen

Bilder können sie als <img> oder <object> mit dem entsprechenden Typ einbinden. Auch externe Webseiten können sie als <iframe> oder <object> mit dem Typ "text/html" einbinden. <object> soll in Zukunft alle anderen Tags dieser Art ersetzen. Zumindest zur Zeit funktioniert das noch nicht in jedem Browser.

Beispiele zu den Tags finden sie im weiteren Verlauf dieser Lektion.

Exkurse dazu

Exkurs Grafikformate

Tabelle: Grafikformate
FormatVor-/Nachteile
jpgBilder mit variabler Komprimierung und vollem Farbspektrum.
gifBilder mit fester Komprimierung und geringen Farbspektrum. Kann durchsichtig und bewegt sein.
pngMischung aus jpg und gif (volles Farbspektrum und durchsichtig).
svgGrafiken im Vektorformat (d.h. aus Punkten, Linien und Flächen zusammengesetzt)

Grafikformate in der Wikipedia.

Exkurs MIME-Typen

Wir haben schon bei einigen HTML-Tags das type-Attribut kennengelernt. Dieses gibt den sogenannten MIME-Type (Multipurpose Internet Mail Extensions) einer Datei an. Windows erkennt den Typ einer Datei über die Endung. Im Web regelt das der MIME-Type, welcher ursprünglich aus dem E-Mail Bereich kommt.

Tabelle: Mime-Typen
Mime-TypBeschreibung
text/textReiner Text (.txt)
text/htmlReiner Text im HTML-Format (.html)
text/cssReiner Text im CSS-Format (.css)
text/javascriptReiner Text mit JavaScript-Code (.js)
image/gifBild im GIF-Format (.gif)
audio/mpegMusik im MP3-Format (.mp3)
video/mpegVideo im MPEG-Format (.mpg)

Referenz: MIME-Typen im selfHTML Wiki.

Tags schachteln

Liste und Tabellen lassen sich auch ineinander schachteln.

Verschachtelte Liste

Editor - Verschachtelte_Liste
<ul>
  <li>Morgens
    <ol>
      <li>geh ich nach Haus</li>
      <li>schlaf ich aus</li>
    </ol>
  </li>
  <li>Abends
    <ol>
      <li>geh ich in die Bar</li>
      <li>mach ich mich zuhause rar</li>
    </ol>
  </li>
</ul>

Das sieht dann im Browser folgendermaßen aus:

Webbrowser - Verschachtelte_Liste

  • Morgens
    1. geh ich nach Haus
    2. schlaf ich aus
  • Abends
    1. geh ich in die Bar
    2. mach ich mich zuhause rar

Verschachtelte Tabellen

Editor - Verschachtelte_Tabellen
<table border="1">
   <tr> <td>1a</td><td>1b</td><td>1c</td> </tr>
   <tr> <td>2a</td><td>2b</td><td>2c</td> </tr>
   <tr> <td>3a</td><td>3b</td><td>3c</td> </tr>
   <tr> <td colspan="3">
          <table>
            <tr> <td>4 1a</td><td>4 1b</td> </tr>
            <tr> <td>4 2a</td><td>4 2b</td> </tr>
          </table>
   </td></tr>
</table>

Das sieht dann im Browser folgendermaßen aus:

Webbrowser - Verschachtelte_Tabellen

1a1b1c
2a2b2c
3a3b3c
4 1a4 1b
4 2a4 2b

Liste in Tabelle

Editor - Liste_in_Tabelle
<table border="1">
   <tr> <td>1a</td><td>1b</td><td>1c</td> </tr>
   <tr><td colspan="3">
           <ol>
             <li>Punkt 1</li>
             <li>Punkt 2</li>
           </ol>
   </td></tr>
</table>

Das sieht dann im Browser folgendermaßen aus:

Webbrowser - Liste_in_Tabelle

1a1b1c
  1. Punkt 1
  2. Punkt 2

Übung:

Schlagen sie die Tags in der Referenz nach und prüfen sie was sie noch für Möglichkeiten mit diesen haben. Bauen sie diese Tags in ihre Visitenkarte ein.

Anhang: Tastaturkommandos

Zusammenfassung

⇦ Webpräsenz / Vorbereitungen ⇨
Nach oben