Basics

Aufbau eines Userfrontend

Hilfe gibt's im Netz der Netze...

SelfHtml

W3Schools

Und hier direkt von Susanne Kurz:

Videos

HTML

CSS

Javascript

Aufgabe

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 (nicht direkt oben auf der Seite ;-) )

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 die einzelnen Bereiche.

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

Funktionen

getElementById()

getElementById("XYZ").innerHTML