Lektion 4:

Tabellen, Validation, FTP-Upload

HTML-Tabellen

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

<table> –> Tabelle als Ganzes
<tr> –> Zeile einer Tabelle (table row)
<td> –> Zelle einer Tabelle (table data)

🖊️ 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:

<thead> –> Tabellenkopf / -überschrift
<tbody> –> Hauptteil der Tabelle
<tfoot> –> Fussteil der Tabelle

<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:

cellspacing –> Abstand der Zellen zueinander
cellpadding –> Abstand des Textes zum Rand der Zelle
align –> Ausrichtung (horizontal) innerhalb der Zelle (left, center, right)
valign –> Ausrichtung (vertikal) innerhalb der Zelle(top, middle, bottom)
width –> Breite der Tabelle/Spalte (entweder in Pixel oder Prozent)

<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

Durch die Attribute colspan und rowspan innerhalb von <td> (oder <th>) können Zellen verbunden, d.h. Zellen definiert werden, die sich über mehrere Spalten oder Zeilen erstrecken.
Der Attributwert spezifiziert die Anzahl Spalten/Zeilen.
Diejenigen Zellen, welche überspannt werden, werden im HTML-Code weggelassen.

colspan –> Zellen horizontal (spaltenübergreifend) verbinden
rowspan –> Zellen vertikal (zeilenübergreifend) verbinden

<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>

Validation

Was ist valides HTML?

🖊️ Du öffnest eine HTML-Datei. Welche Punkte und Kriterien überprüfst du um festzustellen, ob die Datei ein valides HTML-Dokument ist??

Valides HTML

Syntax, z.B. jede geöffnete Klammer < wird wieder geschlossen >, Attribute werden korrekt angegeben
Die hierarchische Baumstruktur von HTML wird eingehalten: jedes Element (ausser der Wurzel) hat ein Eltern-Element
Es werden nur zulässige Tags und Attribute verwendet

DOCTYPE

Der Doctype legt die zulässigen Tags und Attribute fest.

Beispiele von Doctypes:

HTML5
```
<!DOCTYPE html>
```

HTML4.01/Strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

HTML4.01/Transitional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

XHTML 1.0/Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Mit dem Doctype kann überprüft werden, ob ein HTML-Dokument valide ist.

Quelle: https://www.w3.org/QA/2002/04/valid-dtd-list.html

HTML Validator

Mit dem W3C Markup Validation Service können HTML-Dokumente als Validität überprüft werden.
Alle Fehler und Warnungen werden angezeigt.

➡ https://validator.w3.org/

FTP-Upload

Beziehung Client-Server und FTP

Besucher öffnet im Browser via http:// eine Homepage:
➡ Websites werden vom Server zum Besucher-Computer (Client) transferiert mit HTTP (HyperText Transfer Protocol.
Auf dem Server liegen alle nötigen Dateien (html, css, jpg, png, usw.)
Zur Übertragung von Dateien vom eigenen PC auf einen Webserver verwendet man FTP (File Transfer Protocol).

FileZilla Client

FileZilla Client ist ein FTP-Client zur Übertragung von Websites zu einem Server
Kostenfrei verfügbar für Windows, Mac, Linux.
Installiert auf den KSSB-PCs.

⚠ Die Gross-/Kleinschreibung der Dateien spielt eine Rolle!

➡ Download unter https://filezilla-project.org/download.php?type=client

➡ Anleitung FileZilla.pdf

Übung 4

➡ Übung 4

➡ Anleitung FileZilla.pdf

➡ Anleitung HTML-Tabellen.pdf

Lektion 4:

Tabellen, Validation, FTP-Upload

HTML-Tabellen

HTML-Tabellen

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

Tabellen-Grundstruktur

Tabellen-Grundstruktur mit Rahmen

Tabellenüberschriften <th>

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

Tabellenattribute

Tabellenattribute

Validation

Was ist valides HTML?

Valides HTML

DOCTYPE

HTML Validator

FTP-Upload

Beziehung Client-Server und FTP

FileZilla Client

Übung 4

Tabellenüberschriften `<th>`

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