03 | Freitag, 04.11.2022
Schriften und Bilder in Webseiten
Vielleicht ist bei Ihnen der Wunsch entstanden, Ihr neues HTML-Konstrukt möge ein wenig ansehnlicher werden. Hier können grundsätzlich Schriften und Bilder helfen. Dabei sollte unterschieden werden, wie diese technisch eingebunden werden und welche gestalterischen Grundsätze dabei gelten. Letztes werden wir in der Veranstaltung nicht behandeln, es sei denn, jemand möchte dazu einige Tipps loswerden. Das Augenmerk liegt auf der Technik.
Ziele
- Sie binden Schriften datenschutzkonform in Ihre Website ein.
- Sie verwenden Bilder semantisch korrekt mit Bildunterschrift.
- Sie formulieren eine Projektidee für die kommenden Wochen und Monate, die Sie in Gruppen von zwei bis vier Teilnehmenden bearbeiten.
Auftrag: Schriften und Bilder einbinden (GTW)
In der ersten Sitzung hatten Sie schon Ihre Erwartungen an eine “Einführung in die Informationstechnik” kurz umrissen. Nun gilt es, diese Erwartungen in eine Projektidee zu gießen, über die wir dann aus verschiedenen Blickwinkeln ins Gespräch kommen wollen.
- Lesen Sie den Abschnitt zur Typografie im Netz. Recherchieren Sie mindestens eine Schrift von Google Fonts, die Sie herunterladen und datenschutzkonform einbinden.
- Lesen Sie den Abschnitt zum Einbinden von Bildern.
- Probieren Sie aus, mit
figureeine Abbildung mit Bildunterschrift einzubinden.
- Probieren Sie aus, mit
- Lesen Sie zu den Grundlagen von CSS.
- Versuchen Sie, eine CSS-Datei in Ihre Seite einzubinden und einfache Formatierungen vorzunehmen.
- Abschließend systematisieren Sie Ihr Wissen mit dem Kapitel Element, Tag und Attribut.
Auftrag: Meine Projektidee (GTW)
In der ersten Sitzung hatten Sie schon Ihre Erwartungen an eine “Einführung in die Informationstechnik” kurz umrissen. Nun gilt es, diese Erwartungen in eine Projektidee zu gießen, über die wir dann aus verschiedenen Blickwinkeln ins Gespräch kommen wollen.
- Bitte formulieren Sie in einem HedgeDoc (Hinweise unten) einen zusammenhängenden Text zu Ihrer Projektidee. Nutzen Sie zur Formatierung die Formatierungssymbolleiste am Kopf des Schreibbereichs.
- Beantworten Sie in Ihrem Dokument die folgenden Fragen:
- Wie heißen die Projektdurchführenden? Gruppenprojekte sind willkommen, vor allem, wenn verschiedene Fachrichtungen beteiligt sind. In diesem Fall notieren Sie, wer mit dabei ist und welche Aufgaben übernimmt.
- Warum dieses Projekt und kein anderes?
- Was genau interessiert Sie an der Projektidee, was wollen Sie am Ende wissen oder können?
- Worin liegen die größten Herausforderungen für Sie?
- Was wissen Sie schon, was müssen Sie noch lernen?
- Verlinken Sie im Abschnitt “Quellen” alles, was Sie zu Ihrer Idee schon gefunden haben: Bücher, Tutorials, Videos etc.
- Teilen Sie den Link zu Ihrer Projektidee im Kanal Arbeitsaufträge.
HedgeDoc für das kollaborative Schreiben mit Markdown
HedgeDoc ist eine browserbasierte freie Software, die an der TU Hamburg genutzt werden kann. Wir werden das Tool für unterschiedliche Zwecke auch in Zukunft verwenden. Heute legen Sie Ihr erstes Dokument an.
- Öffnen Sie die Seite von HedgeDoc an der TUHH.
- Melden Sie sich über den Button “Sign in” mit GitLab an.
- Erstellen Sie ein neues Dokument (“New note”).
- Stellen Sie anschließend den Zugriff von PROTECTED auf EDITABLE, damit auch andere Ihr Dokument lesen können. Veröffentlichen Sie Ihr Dokument nicht mit “Publish”, da es dann von Suchmaschinen gefunden wird.
Auftrag: Mein KI-Thema (ALT)
In der ersten Schreibaufgabe haben Sie sich schon dem Thema Künstliche Intelligenz (KI) angenähert und ein erstes Erkenntnisinteresse formuliert. Im folgenden Auftrag bringen Sie weitere Recherchen zu Ihrem KI-Interesse mit Ihren neuen HTML-Kenntnissen zusammen!
- Bitte formulieren Sie in Ihrem neuen HTML-Konstrukt einen ersten Text über den KI-Bereich, der Sie interessiert.
- Kopieren Sie zunächst den Ordner der letzten Woche in Ihr Verzeichnis
Informatik. Benennen Sie ihn um zu03-2022-11-04-Meine-Projektidee. - Legen Sie ein neues HTML-Dokument
kuenstliche-intelligenz.htmlan, das Sie mit den existierenden Dokumenten in beide Richtungen verlinken. - Vergeben Sie eine aussagekräftige Überschrift für das neue Dokument.
- Schreiben Sie nun einige Absätze zum Thema in diesem Dokument. Nutzen Sie möglichst alle HTML-Tags, die Sie schon kennengelernt haben.
- Recherchieren Sie ein Video zu dem Thema und binden Sie es als
<iframe>in Ihr Dokument ein. Was passiert technisch bei dieser Einbindung? - Recherchieren Sie auch ein Bild, das zu Ihrem Thema passt. Legen Sie es in einem Ordner
imgim Verzeichnis Ihrer HTML-Dokumente ab. Binden Sie es anschließend an passender Stelle ein. Ein Abschnitt im Skript hilft Ihnen dabei. Die rechtlichen Aspekte von Video- und Bildeinbindung werden wir noch besprechen.
- Kopieren Sie zunächst den Ordner der letzten Woche in Ihr Verzeichnis
Abgabe (GTW/ALT)
Erledigen Sie den Auftrag bis zum Donnerstag, 10.11.2022 und laden Sie die Dateien in GitLab hoch (einzeln, nicht gezippt!). Legen Sie dafür in Ihrem Projekt Studienleistungen einen neuen Ordner 03-2022-11-04-Meine-Projektidee an.
Wenn Sie Fragen und Frust zur Arbeit mit GitLab haben, melden Sie sich im Kanal Arbeitsaufträge bei Ihren Tutor*innen.