Veranstaltungen Zeitplan Challenge Links FAQ WBA1 Ilias

Web-basierte Anwendung 1

Medieninformatik am Campus Gummersbach

CSS Basics

Dauer
240 min
Typ
Workshop
Maximale Teilnehmerzahl
30 Teilnehmer
Verantwortlich
Christian Noss, Jan Kus, Franz Jaspers, Volker Schaefer
Empfohlene Trainings und Workshops als Vorraussetzung
Tooling, HTML Basics
Info
What is CSS?; CSS Syntax; Location of Styles; Selectors; The Cascade - How Styles Interact; The Box Model; CSS Text Styling; Font Embedding

Termine:

Über den Workshop

An wen richtet sich der Workshop?

Anfänger im Bereich Web-Technologien mit Basiskenntnissen in HTML. Sie sollten in der Lage sein, gutes semantisches Markup zu schreiben und Ihre Website auf Ihrem ADV Account zu deployen.

Worum geht es?

Kennenlernen von CSS, Selektoren und dem Gestalten von semantischem Markup mit Hilfe von Cascading Stylesheets.

HTML to CSS

Was muss ich mitbringen?

Eigenen Computer mit Web-Editor, FTP Client, Zugang zum eigenen ADV Account, gutes semantisches HTML Markup aus dem Workshop HTML Basics Workshop.

Material

Übung 1

Binden Sie im <head> Ihrer HTML Datei ein Stylesheet ein und definieren Sie folgende Regeln mit Hilfe von Elementselektoren und ggf. Kombinatoren:

  • der Body soll einen Innenabstand von 3rem haben
  • das komplette Dokument soll eine serifenlose Schrift verwenden
  • alle Headlines sollen eine Serifenschrift verwenden
  • alle Texte sollen einen sinnvollen Zeilenabstand verwenden
  • alle Headlines sollen einen Zeilenabstand von 100% haben

Übung 2

Verschieben Sie die CSS Angaben in eine externe CSS Datei mit dem Namen style.css und binden Sie diese CSS Datei ein. Binden Sie vor Ihrer CSS Datei eine “reset.css” oder “normalize.css” aus einem Content Delivery Network ein.

Definieren Sie sinnvolle Regeln mit Hilfe von Elementselektoren und ggf. Kombinatoren für Ihr Markup.

Übung 3

Binden Sie via Google Fonts die Schriften Permanent Marker und Open Sans in Ihr Dokument ein. Definieren Sie folgende Regeln mit Hilfe von Elementselektoren und ggf. Kombinatoren:

  • alle Texte sollen die Schrift Open Sans verwenden
  • alle Headlines verwenden die Schrift Permanent Marker
  • definieren Sie sinnvolle Schriftgrößen für die Headlines
  • definieren Sie sinnvolle Abstände
  • bringen Sie die Bilder auf die selbe Breite wie die Texte

Übung 4

Erweitern Sie Ihr HTML dahingehend, dass semantisch zusammengehörige Elemente in Container eingeschlossen sind. Ergänzen Sie Ihr CSS dahingehend, dass zwischen den einzelnen Containern horizontale Trennlinien angezeigt werden.

Übung 5

Ergänzen Sie Ihr Stylesheet um einen Regelsatz, mit dessen Hilfe die Navigation in einer Zeile und mit einer Hintergrundfarbe angezeigt wird.

Übung 6

Definieren Sie ein CSS Klasse, die Textblöcke hevorhebt. Die Hervorhebung soll folgende Eigenschaften haben:

  • hellgrauer Hintergrund
  • dunkle Linie an der linken Seite des Blocks

Nutzen Sie die Klasse für zwei Textblöcke.

Übung 7: Deployment

Machen Sie die Seite jetzt über den ADV Server unter dem Verzeichnis wba1/rheinpark-spielplatz/index.htm verfügbar. Eine Hilfe dazu finden Sie auf der ADV Website.

Übung 8: Passwortschutz

Schützen Sie die Seite jetzt mit Hilfe einer .htaccess Datei. Verwenden Sie bitte als Nutzername und Passwort wba1. Eine Hilfe dazu finden Sie auf der Seite mit .htaccess schützen