Basics

Aufbau eines Userfrontend

Hilfe gibt's im Netz der Netze, z.B.

W3Schools

SelfHtml

uvm

Aufgabe

Nachfolgende Aufgabenstellung sollten Sie aufgrund des Wissens, das Sie bei dem Seminar Advanced Web Basics (oder anderweitig) erworben haben, selbständig mit Hilfe von Tutorials und Referenzen erfüllen können.

Bitte erzeugen Sie eine HTML5 Webseite, die nur die Strukturinformation enthält und binden Sie eine CSS Datei ein, die alle Layoutinformationen bereitstellt. Zusätzlich binden Sie eine JavaScript Datei ein, die für die Funktionalität sorgt.

Kopiervorlage für die HTML Seite

CSS als externe Resource einbinden

JS als exteren Resource einbinden

Auf der Webseite ist die Grundfunktion eines Gästebuches:

  • eine Überschrift,
  • ein kurzer erläuternder (Blind)Text in einem Absatz,
  • ein beschriftetes Inputelement zur Texteingabe mit OK-Button und
  • ein Bereich, der eine ID aufweist, aber noch keinen Inhalt hat, aber eine Überschrift enthält, die erläutert, dass es sich um Gästebucheinträge handelt.
  • Anschließend gibt es noch eine Fußzeite mit einem Copyright-Hinweis.

Bitte gestalten Sie mit CSS (externe Datei) die einzelnen Bereiche.

Bauen Sie eine Javascript-Funktion (externe Datei) ein, die den eingegebenen Text ausliest und in dem freien Bereich formatiert wieder ausgibt.

Funktionen

getElementById()

getElementById("XYZ").innerHTML

Beispiel wie es aussehen könnte