Web-basierte Anwendung 1

Medieninformatik am Campus Gummersbach

HTML 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
Info
HTML Defined and its History; HTML Syntax; Semantic Markup; Structure of HTML; Quick Tour of HTML; HTML Semantic Elements; Validation.

Termine:

Über den Workshop

An wen richtet sich der Workshop?

Anfänger im Bereich Web-Technologien, HTML & Co.

Worum geht es?

Kennenlernen von HTML, Semantischem Markup und dem Schreiben von einfachen HTML Dokumenten.

Was muss ich mitbringen?

Eigenen Computer mit Web-Editor, FTP Client, Zugang zum eigenen ADV Account.

Material

Editoren

Codeplaygrounds

Übung 1: Aufbau von einfachem, semantischen Markup

Wir haben den Inhalt einer Spielplatzseite von Spielplatztreff.de als Basis genommen und auf die basalen Bausteine reduziert. Das Ergebnis können Sie diesen PDF oder der Markdown Datei entnehmen.

Bitte legen Sie ein Verzeichnis mit dem Namen “rheinpark-spielplatz” an und erzeugen Sie für diese Spielplatzseite sauberes semantisches Markup, jedoch noch ohne Strukturelemente wie header, div oder section.

Laden Sie die zugehörigen Bilder herunter und legen diese in ein Unterverzeichnis unterhalb von “rheinpark-spielplatz”. Bitte nennen Sie das Unterverzeichnis “img” und binden Sie die Bilder via relativer Referenzierung in ihr HTML Dokument ein.

Übung 2: Nutzung von Strukturelementen

Strukturieren Sie nun das Dokument mit semantischen Strukturelementen wie nav, section und header.

Ergänzen Sie Ihr Dokument um eine Navigation mit den folgenden Links:

Linkname Linkziel Art
Spielplatz eintragen eintragen.htm Link auf der Website
Bewertungen anzeigen #bewertungen Link innerhalb der Seite
Facebookseite http://facebook.de/spielplatztreff Externer Link

Übung 4: 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 5: 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