# HTML-Übungen und Webspace
In dieser Übung arbeitest du mit HTML. Schreibe den Code "von Hand",
verwende wirklich nur HTML, kein CSS oder Javascript.
Lass den Code nicht von KI schreiben, schalte die "Codecompletion" im Editor ab:
Diese Übung dient dazu, dass du das Schreiben und Verbessern von Code übst.
Es geht nicht um das Endergebnis - das kann die KI in 10 Sekunden liefern.
Üben kannst nur du selbst.
Lade alle Übungen in den Webspace hoch. Die URL deines Webspace lautet
https://users.ct.fh-salzburg.ac.at/~fhsxxxx/ (mit deinem Usernamen statt fhsxxxx)
## 1) Beschwerdebrief
Hier ist ein Teil eines Briefes von Nanni an Ea-nasir, aus dem Buch [Letters from Mesopotamia](https://isac.uchicago.edu/publications/letters-mesopotamia-official-business-and-private-letters-clay-tablets-two-millennia):
How have you treated me for that copper? You have withheld
my money bag from me in enemy territory; it is now up to you
to restore my money to me in full.
Take cognizance that from now on I will not accept here any
copper from you that is not of fine quality. I shall from now on
select and take the ingots individually in my own yard, and I
shall exercise against you my right of rejection because you have
treated me with contempt.
Es gibt auch eine [Wikipedia-Seite über den Brief](https://en.wikipedia.org/wiki/Complaint_tablet_to_Ea-n%C4%81%E1%B9%A3ir)
Gestalte eine Webseite mit dem Dateinamen `html/beschwerde.html` die den Text enthält, und ungefähr wie eine e-mail formatiert
ist: mit Datum, Absender, Empfänger, Betreff, Text.
Checks:
- lautet die URL wirklich https://users.ct.fh-salzburg.ac.at/~fhsxxxx/html/beschwerde.html (mit deinem usernamen)
- ist beschwerde.html valides HTML? Prüfen mit dem [Validator](https://web-development.ct.fh-salzburg.ac.at/html/validator/)!
- Enthält die Webseite die Wörter "Datum", "Absender", "Empfänger", "Betreff"?
## 2) Farb-Tabelle
Hier ist eine Liste von Farben in mehreren Sprachen, leider sind die Worte alle aneinander-geklebt:
- EnglischDeutschJapanisch (Hiragana)Koreanisch
- RedRotあか (aka)빨간색 (ppal-gan-saek)
- BlueBlauあお (ao)파란색 (pa-ran-saek)
- YellowGelbきいろ (kiiro)노란색 (no-ran-saek)
- GreenGrünみどり (midori)초록색 (cho-rok-saek)
- BlackSchwarzくろ (kuro)검은색 (geom-eun-saek)
- WhiteWeißしろ (shiro)하얀색 (ha-yan-saek)
- OrangeOrangeだいだいいろ (daidaiiro)주황색 (ju-hwang-saek)
- PinkRosa / Pinkももいろ (momoiro)분홍색 (bun-hong-saek)
- PurpleLila / Violettむらさき (murasaki)보라색 (bo-ra-saek)
- BrownBraunちゃいろ (chairo)갈색 (gal-saek)
- GreyGrauはいいろ (haiiro)회색 (hoe-saek)
erstelle eine Webseite `html/farben.html` und in der Seite eine HTML-Tabelle mit 1 Zeile für die Überschriften und
11 Zeilen für die Farben, mit einer separaten Spalte pro Sprache.
Checks:
- lautet die URL wirklich https://users.ct.fh-salzburg.ac.at/~fhsxxxx/html/farben.html (mit deinem usernamen)
- ist farben.html valides HTML? Prüfen mit dem Validator!
- Enthält die Webseite eine HTML Tabelle?
- hat die Tabelle 12 Zeilen und 4 Spalten?
- Werden die verschiedenen Schriften (Lateinisch, Hiragana, Hangul) korrekt angezeigt?
## 3) Bilder
Baue eine Webseite, die eine Bilder-Galerie ist. Sie soll drei Bilder enthalten:
- ein Bild, das unter einer Creative-Commons-Lizenz steht, z.B. aus [commons.wikimedia.org](https://commons.wikimedia.org/wiki/Main_Page)
- ein Bild von [Unsplash](https://unsplash.com/de), das du gratis verwenden darfst
- ein Bild das du selbst erstellt hast (Photo, eigene Zeichnung), das du veröffentlichen willst
Erstelle die Webseite `html/bilder.html`. Baue die drei Bilder ein.
Checks:
- lautet die URL wirklich https://users.ct.fh-salzburg.ac.at/~fhsxxxx/html/bilder.html (mit deinem usernamen)
- sind die drei Bilder auf dieser Webseite sichtbar
- sind die drei Bild-Dateien in einer geeigneten Größe und einem geeigneten Format (siehe [Lehrbuch](https://web-development.ct.fh-salzburg.ac.at/images/compare/index.html))
- sind für alle drei Bilder die Autor*innen und die Lizenz korrekt angegeben? (siehe [Lehrbuch](https://web-development.ct.fh-salzburg.ac.at/html/legal/) und die Benutzungsbedingungen von unsplash)
## 4) FAQ
Baue eine Webseite mit einer kleinen FAQ zu einem Thema, einem Hobby das dich interessiert. Es sollen nur
4 oder 5 Fragen und Antworten sein, die du selbst schnell schreiben kannst
Ein Beispiel von Brigitte: [FAQ zu Brettspielen](faq-brettspiel.txt)
Erstelle die Webseite `html/faq.html`. Baue deine Fragen und Antworten so ein,
dass man zuerst nur die Fragen sieht, und wenn man auf eine Frage klickt die Antwort angezeigt wird.
Checks:
- lautet die URL wirklich https://users.ct.fh-salzburg.ac.at/~fhsxxxx/html/faq.html (mit deinem usernamen)
- Enthält die Webseite die nötigen Tags für das "Aufklappen"?
## 5) Inhaltsverzeichnis
Die Seite `index.html` hat eine spezielle Bedeutung am Webserver: Wenn man
eine URL aufruft, die auf den Schrägstrich endet, dann wir in dem Ordner nach
der Datei `index.html` gesucht, und diese angezeigt - falls sie existiert.
Gestalte die Seite `index.html` im Hauptordner deines Webspace um: Sie soll deinen
Vornamen anzeigen, Links zu allen Übungsseiten enthalten, und eine Liste mit Links zu
den Leuten mit denen du zusammengearbeitet hast.
Verwende alles was du schon über HTML gelernt hast um die Seite gut zu strukturieren
und übersichtlich zu machen: Überschriften, Text, Listen, Links, ....
Checks:
- lautet die URL wirklich https://users.ct.fh-salzburg.ac.at/~fhsxxxx/index.html (mit deinem usernamen)
- Enthält die Webseite Links zu allen Übungen
- Enthält die Webseite links zu zwei verschiedenen Personen mit denen du in der 1. und der 2. Übungsstunde zusammengearbeitet hast