Webprogrammierung — 2. Lektion

Höher- und Tieferstellung

Höherstellung: super (lat., =über)

Tieferstellung: sub (lat., =unter)

Listen

Ungeordnete Auflistung

Gesamte Liste: unordered list
Listeneintrag: list item

Aufzählung

Gesamte Liste: ordered list
Listeneintrag: list item

Definitionsliste

Gesamte Liste: definition list
Begriff: definition term
Erklärung: definition description

Tabellen

Gesamte Tabelle: table
Tabellenüberschrift: caption
Kopfbereich: table head
Fußbereich: table foot
Mittelstück: table body
Zeile: table row
Eintrag: im Tabellenkopf table head; sonst table data

[↑ mit thead, tbody, tfoot]   [↑ ohne thead, tbody, tfoot]

Zellen verbinden

Attribut colspan für Anzahl der zu verbindenen Spalten
Attribut rowspan für Anzahl der zu verbindenen Zeilen

Trennlinien zwischen Spalten und Zeilen sowie Umrandungen werden später mittels CSS definiert.

Bilder

Bild: image
Einzeln stehendes Tag <img> an der Stelle, wo ein Bild erscheinen soll
Attribut src (source) gibt die Quelle an
Attribut alt (alternative) gibt einen Text als Alternative an

Bild als Verweis

Bild mit Verweisen

Bild mit img-Tag setzen, Attribut usemap gibt den Namen der damit verknüpften Karte mit vorangestelltem # an
Karte mit map-Tag definieren, Attribut name ist der bei usemap angegebene Name (ohne Doppelkreuz)
Inhalt einer Karte sind einzelne Areale
Areal: area
Attribut href gibt die URL an, zu der das Areal verlinkt sein soll
Attribut alt gibt einen alternativen Text für den Hyperlink an (muss bei Anwesenheit von href angegeben werden und darf nicht leer sein; der Wert ist bei barrierefreiem Webdesign wichtig)
Attribut title gibt den Text an, der beim Überfahren des Areals mit der Maus am Mauszeiger angezeigt werden soll
Attribut shape ist einer der drei Werte rect, circle oder poly je nach dem, ob das Areal eine Fläche ist, die durch ein Rechteck, einen Kreis bzw. einen geschlossenen Polygonzug begrenzt ist
Attribut coords gibt die Koordinaten an (in Pixeln und in Abhängigkeit von shape):
shapecoordsErklärung
rect x1,y1,x2,y2 x1 und x2 sind die Abstände der senkrechten Ränder vom linken Bildrand, y1 und y2 sind die Abstände der waagerechten Ränder vom oberen Bildrand
circle x,y,r x und y sind die Abstände des Mittelpunktes vom linken bzw. oberen Bildrand, r ist der Radius
poly x1,y1,x2,y2,...,xn,yn n ist die Anzahl der Ecken, xi und yi sind die Abstände der i-ten Ecke vom linken bzw. oberen Bildrand (i=1,...,n)

Inline Frames

Einbinden anderer Webinhalte (z.B. Webseiten, Videos)
Rahmen, in dem der andere Inhalt angezeigt werden soll: inline frame
Attribut src gibt die Adresse der einzubindenen Seite an
Attribut name bezeichnet den Rahmen
Der Text zwischen Anfangs- und Endtag wird angezeigt, falls der Browser keinen <iframe> anzeigen kann.
In der Sprachdefinition von HTML5 ist kein Inhalt zwischen Anfangs- und Endtag mehr vorgesehen. Es wird davon ausgegangen, dass Browser, die HTML5 verstehen, auch Inline Frames anzeigen können und daher den Inhalt zwischen den Tags ohnehin ignorieren. Ein älterer Browser, der keine Inline Frames anzeigen kann, ignoriert hingegegen die Tags und zeigt den Inhalt dazwischen normal an. Somit kann man den Inhalt zwischen den Tags dafür nutzen, den Nutzer darauf hinzuweisen, dass sein Browser zu alt ist, um den beabsichtigen Inhalt anzuzeigen.