2 Themen

Tabellen werden eingesetzt, um Inhalte darzustellen, die in einem Zusammenhang stehen.

Wie andere Konstrukte in HTML auch, zB. Listen, werden Tabellen mit Hilfe mehrerer Tags umgesetzt.

Häufig benutzte Elemente dafür sind <table> <tr> <th> und <td>.

HTML beschreibt Tabellen in einer bestimmten Reihenfolge.

Zuerst definiert man die gesamte Tabelle mit <table>.

				
					<table>
					</table>
				
			

Jedes <tr> entspricht einer Zeile.

				
					<table>
					  <tr>
					  </tr>
					  <tr>
					  </tr>
					</table>
				
			

<th> und <td> sind einzelne Zellen.

				
					<table>
					  <tr>
					    <th>Kopf 1</th>
					    <th>Kopf 2</th>
					  </tr>
					  <tr>
					    <td>Daten 1</td>
					    <td>Daten 2</td>
					  </tr>
					</table>
				
			

<th> wird für die Beschriftung von Spalten verwendet.
<td> für die eigentlichen Tabelleninhalte.

Das Attribut colspan verbindet eine Anzahl Zellen X horizontal.

Das Attribut rowspan verbindet eine Anzahl Zellen X vertikal.

Die Struktur der Tabelle ist festgelegt.

Innerhalb von <th> und <td> darf aber wieder jegliches HTML stehen.

Bilder kommen auf nahezu jeder Internetseite zum Einsatz und sind Designern oft besonders wichtig.

In HTML werden sie als Image-Tag eingebunden.

<img>

Der Image-Tag ist ein Inline-Element und ein leeres Element.

<img />

Die Bilddatei, die man anzeigen möchte, kommt in das src-Attribut.

<img src="grafik_01.jpg" />

Das alt-Attribut beinhaltet einen beschreibenden Text.

<img src="grafik_01.jpg" alt="Diagramm" />

Bilddimensionen können in width und height festgelegt werden.

			
			<img src="grafik_01.jpg" alt="Diagramm"
			width="640" height="480" />
			
		

Warum ist das alt-Attribut wichtig?

Warum ist Barrierefreiheit im Webdesign wichtig?

Nicht alle Einschränkungen sind permanent. Jeder kann auch zeitweilig betroffen sein.

Versuche, bei der Planung und Umsetzung von Websites Einschränkungen deiner Nutzer zu berücksichtigen.

Dateiformate für Bilder im Web

Bilder können in den Formaten JPG, GIF und PNG vorliegen.

In modernen Browsern auch in WEBP, JP2, JXR und AVIF.

JPG eignet sich besonders für komplexe und detailreiche Bilder, wie zum Beispiel Fotos.

PNG ist ideal, wenn einfache Grafiken oder simple Verläufe gezeigt werden. Ausserdem speichert es verlustfrei (lossless).

GIF wird eigentlich nur noch für animierte Grafiken benutzt, aber auch hier zunehmend von Video­formaten verdrängt.

Eine gute Möglichkeit für Logos und Icons ist ausserdem SVG. Damit lassen sich Vektorgrafiken 1:1 im Browser darstellen.

Beginne mit Aufgabe 3.

https://arnorichter.de/hsma/int/aufgaben