Lektion 3:

Entitäten & Sonderzeichen, Tabellen

Entitäten und Sonderzeichen

Entitäten

einige gebräuchliche Entitäten:

© –> ©   ä –> ä   Ä –> Ä
> –> >   ö –> ö   Ö –> Ö
&lt; –> <   &uuml; –> ü   &Uuml; –> Ü
&amp; –> &   &times; –> ×   &nbsp; –> (Leerzeichen)>

➡ Übersicht HTML-Entitäten z.B: auf https://wiki.selfhtml.org/wiki/Zeichenreferenz

Unicode und Sonderzeichen

<p> ♪ δ ñ العربية ⇨ Русский 乸 漢 🙂⭐ </p>

Damit diese Emojis auch tatsächlich angezeigt werden, muss die Zeichencodierung (nächste Slide) korrekt gesetzt sein.

UTF8-Codierung

Unicode als Entität

Zeichen dezimal hexadezimal Entität
–> 9834 266A &#9834;
🙂 –> 128578 1F642 &#128578;
–> 28450 6F22 &#28450;

➡ Unicode-Zeichentabelle online z.B: auf https://unicode-table.com

➡ Unter Windows aufrufbar in der App Zeichentabelle (Suche nach charmap)

➡ Ab Windows 10 gibt es ein Emoji-Auswahlfenster. Tastenkombination:  Win + .   (Windowstaste und Punkt)

HTML-Tabellen

HTML-Tabellen

Die drei wichtigsten HTML-Tags für Tabellen lauten:



🖊️ Wie würdet ihr diese Tags verwenden und schachteln, um damit eine solche Tabelle zu erzeugen??

Tabellen-Grundstruktur

<table>
	<tr>
		<td> oben-links </td>
		<td> oben-Mitte </td>
		<td> oben-rechts </td>
	</tr>
	<tr>
		<td> unten-links </td>
		<td> unten-Mitte </td>
		<td> unten-rechts </td>
	</tr>
</table>

Tabellen-Grundstruktur mit Rahmen

<table border="1">
	<tr>
		<td> oben-links </td>
		<td> oben-Mitte </td>
		<td> oben-rechts </td>
	</tr>
	<tr>
		<td> unten-links </td>
		<td> unten-Mitte </td>
		<td> unten-rechts </td>
	</tr>
</table>

Tabellenüberschriften <th>

Wenn man anstatt <td> das Tag <th> verwendet, dann wird eine Tabellenüberschrift erzeugt, welche fett und zentriert dargestellt wird.

<table border="1">
	<tr>
		<th> Ü1 </th>
		<th> Ü2 </th>
		<th> Ü3 </th>
	</tr>
	<tr>
		<td> oben-links </td>
		<td> oben-Mitte </td>
		<td> oben-rechts </td>
	</tr>
	<tr>
		<td> unten-links </td>
		<td> unten-Mitte </td>
		<td> unten-rechts </td>
	</tr>
</table>

Tabellenkopf-, -rumpf und -fuss <thead>, <tbody>, <tfoot>

Die Bereiche der Tabelle werden oftmals noch zusätzlich gegliedert mithilfe dieser (semantischer) Tags:

<table border="1">
	<thead>
		<tr>
			<th> Ü1 </th>
			<th> Ü2 </th>
			<th> Ü3 </th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td> oben-links </td>
			<td> oben-Mitte </td>
			<td> oben-rechts </td>
		</tr>
		<tr>
			<td> unten-links </td>
			<td> unten-Mitte </td>
			<td> unten-rechts </td>
		</tr>
	</tbody>
</table>

⚠ Die drei Tags haben (zum jetzigen Zeitpunkt) keine Auswirkung auf die Formatierung!

Tabellenattribute

Tabellen können mit folgenden Attributen gestaltet werden:

<table border="1" cellpadding="10" width="600">
	<tr>
		<td width="20%">oben-links</td>
		<td width="60%" align="center">oben-zentriert</td>
		<td width="20%">oben-rechts</td>
	</tr>
	<tr>
		<td>unten-links</td>
		<td align="center">unten-zentriert</td>
		<td>unten-rechts</td>
	</tr>
</table>

Tabellenattribute

<table border="1">
	<tr>
		<th colspan="2"> Singular </th>
	</tr>
	<tr>
		<td> ich </td>
		<td> bin </td>
	</tr>
	<tr>
		<td> du </td>
		<td> bist </td>
	</tr>
	<tr>
		<td> er </td>
		<td rowspan="3"> ist </td>
	</tr>
	<tr>
		<td>sie</td>
	</tr>
	<tr>
		<td>es</td>
	</tr>
</table>

Übung 3

Übung 3