Folien



(letzte Synchronisation der PDF-Präsentation: 02.03.2017)

Falls keine PDF-Präsentation zu sehen ist, klicken Sie zum Download hier: Direktdownload PDF-Präsentation

(zum Rumspielen: Tabellen-Border-Wizard )

Übungen

Alle Übungen finden Sie in der Materialsammlung (dort auch alle zusätzlichen Dateien wie Bilder, Klassendiagramme oder HTML-Vorlagen!).

Die aktuelle Übung können Sie hier als txt-File herunterladen.


***** Übungen: HTML - Tabellen *****



HTML_9-1: Fehler im Quelltext finden 1
Finden Sie die vier Fehler, die sich im folgenden Quelltext verstecken:

HTML-Code
<body> <table> <tr> <td>Ich bin eine Zelle.</td> <td>Ich bin eine Zelle.<td> </tr> <tr> <tr> <tr> <td>Ich bin eine Zelle.</td> <td>Ich bin eine Zelle.</td> <td>Ich bin eine Zelle.</td> <td colspan="2">Ich bin eine </tr> </body>   verbundene Zelle.</td>  




HTML_9-2: Fehler im Quelltext finden 2
Finden Sie die beiden Fehler im Quelltext:

HTML-Code
<table> <tr> <td>Ich bin eine Zelle.</td> <td>Ich bin eine Zelle.</td> <td>Ich bin eine Zelle.</td> <td>Ich bin eine Zelle.</td> </tr> <tr> <td>Ich bin eine Zelle.</td> <td>Ich bin eine Zelle.</td> <td>Ich bin eine Zelle.</td> </tr> </table>  




HTML_9-3: Tabelle nachbauen
Bauen Sie die Tabelle aus dem Bild 02html/html09-bild-tabelle-nachbauen.png in HTML nach.




HTML_9-4: Stundenplan erstellen
Erstellen Sie Ihren Stundenplan als HTML-Tabelle (Hintergrundfarben usw. fügen wir später dazu). Arbeiten Sie ausgiebig mit Copy-Paste!




HTML_9-5: Beispiel aus der Praxis von unserer alten Schulhomepage (Stand 2012): Der untere Teil soll wie der obere Teil in einer Tabelle stehen!

HTML-Code
<table style="width: 550px;" align="center" cellpadding="5" cellspacing="0" border="1"> <tbody> <tr> <td><span style="font-size: 10pt; font-family: Verdana,Arial,Helvetica,sans-serif"><strong>Verantwortlich                                   im Sinne des § 6 Teledienstegesetz und                                   des § 6 Mediendienste-Staatsvertrag:</strong><br> <br> Schulleiter: Dr. Rainer Gallinger, OStD<br> Fachabteilungsleiter Informatik: Egon Göring, StD<br> <br> </span><br> <span style="font-size: 10pt; font-family: Verdana,Arial,Helvetica,sans-serif"><em>Carl-Helbing-Schule Emmendingen<br>Jahnstr. 10<br> 79312 Emmendingen<br></em> <em><img align="absmiddle" height="16" width="16" title="Telefon" alt="Telefon" border="0" src="../images/stories/icons/phone.jpg"> 07641-465-300<br></em> <em><img align="absmiddle" height="16" width="16" title="Fax" alt="Fax" border="0" src="../images/stories/icons/fax.jpg"> 07641-465-399<br></em> <em><img align="top" height="16" width="16" title="eMail" alt="eMail" border="0" src="../images/stories/icons/email.jpg"> k.s.emmendingen@t-online.de</em></span></td> </tr> </tbody> </table> <br> <table style="width: 550px;" align="center" cellpadding="5" cellspacing="0" border="1"> <tbody> <tr> <td><span style="font-size: 10pt; font-family: Verdana,Arial,Helvetica,sans-serif"> <strong>Administration und Pflege der Schulhomepage:</strong><br> <br> Berthold Metz, StR<br> <br> <span style="font-size: 10pt; font-family: Verdana,Arial,Helvetica,sans-serif"><em>Carl-Helbing-Schule Emmendingen<br>Jahnstr. 10<br> 79312 Emmendingen<br></em> <em><img align="absmiddle" height="16" width="16" title="Telefon" alt="Telefon" border="0" src="../images/stories/icons/phone.jpg"> 07641-465-300<br></em> <em><img align="absmiddle" height="16" width="16" title="Fax" alt="Fax" border="0" src="../images/stories/icons/fax.jpg"> 07641-465-399<br></em> <em><img align="top" height="16" width="16" title="eMail" alt="eMail" border="0" src="../images/stories/icons/email.jpg"> bmetz@chs-em.de</em></span></span></td> </tr> </tbody> </table> <br> <table style="width: 550px;" align="center" cellpadding="5" cellspacing="0" border="1"> <tbody> <tr> <td> <p><span style="font-size: 10pt; font-family: Verdana,Arial,Helvetica,sans-serif"><strong>Haftungshinweis für Urheberrecht und externe Links:</strong><br> <br><span style="font-size: 10pt; font-family: Verdana,Arial,Helvetica,sans-serif">Alle externen Links werden von uns selbstverständlich kontrolliert und nach bestem Wissen in Einklang mit den gültigen Gesetzen gesetzt. Natürlich haben wir niemals die völlige Kontrolle über die Inhalte, die auf den extern verlinkten Seiten angeboten werden. Sollten Sie auf einer von uns verlinkten Seite Inhalte entdecken, die nicht mit den gültigen Gesetzen in Einklang stehen, bitten wir um einen formlosen Hinweis.</span></span></p> <p><span style="font-size: 10pt; font-family: Verdana,Arial,Helvetica,sans-serif"><span style="font-size: 10pt; font-family: Verdana,Arial,Helvetica,sans-serif">Wir verwenden hier ausschließlich Medien (das heißt in erster Linie: Bilder und Texte), die entweder für die öffentliche Verwendung freigegeben sind (z.B. die mit der Installation unseres Open-Source-CMS mitgelieferten Bilder und Icons) oder an denen die CHS Emmendingen die Rechte besitzt. An einer Schulhomepage arbeiten viele Menschen mit (Lehrer/innen, Schüler/innen, Eltern ...), so dass Versehen nicht vollständig ausgeschlossen werden können. Wir versichern jedoch, dass wir streng darauf achten, dass keine urheberrechtlich geschützten Materialien eingepflegt werden. Sollte Ihnen doch ein solcher Fall auffallen, bitten wir Sie um eine formlose Mitteilung. Wir werden die betreffenden Inhalte umgehend entfernen.</span></span></p> </td> </tr> </tbody> </table> <br><p><span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: small;"><span><strong>Datenschutz</strong></span></span></p> <p><span style="font-family: Verdana, Arial, Helvetica, sans-serif;"><span style="font-size: x-small;">Durch die Nutzung dieser Website werden im Serverbetrieb automatisch Daten generiert und in Logfiles gespeichert. Wir verwenden diese Daten zur Erstellung von Statistiken (Anzahl der Seitenabrufe usw.). In keinem Fall reichen wir personenbezogene Daten (d.h. in erster Linie: IP-Adressen) an Dritte weiter.</span></span></p> <p><span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: small;"><strong> </strong></span><span style="font-size: x-small;"><em>Quelle der folgenden Passagen: eRecht24.de - Internetrecht von </em><a href="http://www.e-recht24.de"><em>Rechtsanwalt</em></a><em> Sören Siebert (Auszug)</em></span></p> <p>Die Nutzung unserer Webseite ist in der Regel ohne Angabe personenbezogener Daten möglich. Soweit auf unseren Seiten personenbezogene Daten (beispielsweise Name,        Anschrift oder eMail-Adressen) erhoben werden, erfolgt dies, soweit möglich, stets auf freiwilliger Basis. Diese Daten werden ohne Ihre ausdrückliche Zustimmung nicht an Dritte weitergegeben.</p> <p>Wir weisen darauf hin, dass die Datenübertragung im Internet (z.B.        bei der Kommunikation per E-Mail) Sicherheitslücken aufweisen kann.        Ein lückenloser Schutz der Daten vor dem Zugriff durch Dritte ist nicht        möglich.</p> <p>Der Nutzung von im Rahmen der Impressumspflicht veröffentlichten Kontaktdaten        durch Dritte zur Übersendung von nicht ausdrücklich angeforderter        Werbung und Informationsmaterialien wird hiermit ausdrücklich widersprochen.        Die Betreiber der Seiten behalten sich ausdrücklich rechtliche Schritte        im Falle der unverlangten Zusendung von Werbeinformationen, etwa durch Spam-Mails,        vor.</p> <p> </p> <table border="1" cellspacing="0" cellpadding="5" align="center" style="width: 550px;"> <tbody> <tr> </tr> </tbody> </table>